/* =========================================================================
   CIPAD-SST · Componentes para el modo Divi
   ---------------------------------------------------------------------
   Esta hoja NO toca la tipografia base, los titulares ni el color del
   cuerpo: de eso se encarga Divi, que es donde usted los va a editar.
   Aqui solo van las piezas que Divi no tiene y que el contenido necesita:
   tablas, notas, bloques de alcance y autoria, diagramas y formularios.

   Contrastes medidos sobre el logotipo v2.
   ========================================================================= */

:root {
	--cipad-primary:       #27146F;  /* 14,83:1 sobre blanco — AAA */
	--cipad-primary-dark:  #1B0E4E;
	--cipad-primary-light: #4A3299;
	--cipad-accent:        #FFF300;  /* 1,16:1 — SOLO FONDO, NUNCA TEXTO */
	--cipad-text:          #1F1B20;
	--cipad-text-muted:    #4A4550;
	--cipad-bg-alt:        #F4F3F9;
	--cipad-border:        #DCDAE6;
	--cipad-border-strong: #B4AFC7;
	--cipad-warning:       #8A5A00;
	--cipad-radius-s:      4px;
	--cipad-radius-m:      8px;
	--cipad-radius-l:      16px;
	--cipad-text-width:    720px;
}

/* --------------------------------------------------------- accesibilidad */

/* Foco visible siempre. Divi lo suprime en varios elementos y eso rompe
   el criterio 2.4.7 de WCAG para quien navega con teclado. */
.et_pb_module a:focus-visible,
.et_pb_text a:focus-visible,
.et_pb_button:focus-visible,
.et_pb_menu a:focus-visible,
.cipad-tabla-wrap:focus-visible {
	outline: 3px solid var(--cipad-primary) !important;
	outline-offset: 3px !important;
}

.cipad-pie-divi a:focus-visible,
.cipad-cabecera-divi a:focus-visible {
	outline-color: #FFFFFF !important;
}

.cipad-solo-lectores {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* Objetivos tactiles: 48px es el minimo razonable en movil. */
.cipad-cabecera-divi .et_pb_menu a,
.cipad-pie-divi a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ---------------------------------------------------------------- textos */

.et_pb_text .cipad-entradilla {
	font-size: 1.2em;
	line-height: 1.5;
	color: var(--cipad-text-muted);
	max-width: 46ch;
}

.et_pb_text .cipad-menor {
	font-size: .9em;
	color: var(--cipad-text-muted);
}

.et_pb_text code {
	background: var(--cipad-bg-alt);
	padding: .1em .35em;
	border-radius: var(--cipad-radius-s);
	font-size: .9em;
	word-break: break-word;
}

.et_pb_text .cipad-enlace-destacado a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--cipad-accent);
	padding-bottom: 2px;
}

/* ---------------------------------------------------------------- tablas */

/* Divi no da nada util para tablas y el contenido tiene muchas.
   El envoltorio permite recorrerlas en movil sin romper la pagina. */
.cipad-tabla-wrap {
	overflow-x: auto;
	margin: 1.75rem 0;
	border: 1px solid var(--cipad-border);
	border-radius: var(--cipad-radius-m);
	-webkit-overflow-scrolling: touch;
}

.et_pb_text table.cipad-tabla,
table.cipad-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: .95em;
	background: #FFFFFF;
	margin: 0;
	border: 0;
}

.et_pb_text table.cipad-tabla th,
.et_pb_text table.cipad-tabla td,
table.cipad-tabla th,
table.cipad-tabla td {
	padding: .8rem 1rem;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--cipad-border);
	line-height: 1.5;
}

table.cipad-tabla thead th {
	background: var(--cipad-primary);
	color: #FFFFFF;
	font-weight: 600;
	border-bottom: 0;
}
table.cipad-tabla tbody th { font-weight: 600; color: var(--cipad-primary); }
table.cipad-tabla tbody tr:nth-child(even) { background: var(--cipad-bg-alt); }
table.cipad-tabla tbody tr:last-child th,
table.cipad-tabla tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------ notas y avisos */

.cipad-nota {
	background: var(--cipad-bg-alt);
	border-left: 4px solid var(--cipad-primary);
	border-radius: 0 var(--cipad-radius-m) var(--cipad-radius-m) 0;
	padding: 1rem 1.75rem;
	margin: 1.75rem 0;
	max-width: var(--cipad-text-width);
}
.cipad-nota > *:last-child { margin-bottom: 0; }
.cipad-nota h2,
.cipad-nota h3,
.cipad-nota h4 { margin-top: 0; font-size: 1.05em; }

/* El bloque de alcance lleva borde ambar porque declara limites, no
   porque sea una alerta. Es informacion que protege al lector. */
.cipad-alcance {
	background: var(--cipad-bg-alt);
	border: 1px solid var(--cipad-border-strong);
	border-left: 4px solid var(--cipad-warning);
	border-radius: 0 var(--cipad-radius-m) var(--cipad-radius-m) 0;
	padding: 1rem 1.75rem;
	margin: 3rem auto 1.75rem;
	font-size: .92em;
	max-width: var(--cipad-text-width);
}
.cipad-alcance .cipad-corte {
	margin-bottom: 0;
	color: var(--cipad-text-muted);
	font-weight: 600;
}

.cipad-autoria {
	border-top: 3px solid var(--cipad-accent);
	padding-top: 1rem;
	margin: 1.75rem auto 0;
	font-size: .92em;
	max-width: var(--cipad-text-width);
}
.cipad-autoria > *:last-child { margin-bottom: 0; }

.cipad-consentimiento {
	background: var(--cipad-bg-alt);
	border: 1px solid var(--cipad-border);
	border-radius: var(--cipad-radius-m);
	padding: 1rem;
	margin: 1rem 0;
	max-width: var(--cipad-text-width);
}
.cipad-consentimiento pre {
	margin: 0;
	white-space: pre-wrap;
	font-family: inherit;
	font-size: .9em;
	line-height: 1.55;
	background: none;
	border: 0;
	padding: 0;
}

/* ------------------------------------------------------------ diagramas */

.cipad-diagrama { margin: 3rem 0; }
.cipad-diagrama svg { width: 100%; height: auto; display: block; }
.cipad-diagrama-estrecho { display: none; }

/* ---------------------------------------------------------- formularios */

.cipad-formulario {
	background: var(--cipad-bg-alt);
	border: 1px solid var(--cipad-border);
	border-radius: var(--cipad-radius-l);
	padding: 1.75rem;
	margin: 3rem 0;
	max-width: var(--cipad-text-width);
}
.cipad-formulario > *:last-child { margin-bottom: 0; }

.cipad-formulario .cipad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85rem 1.6rem;
	border-radius: var(--cipad-radius-m);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--cipad-primary);
	margin: 0 .5rem .5rem 0;
}
.cipad-formulario .cipad-btn-primario { background: var(--cipad-primary); color: #FFFFFF; }
.cipad-formulario .cipad-btn-secundario { background: transparent; color: var(--cipad-primary); }

.cipad-buscador { margin: 1.75rem 0; max-width: 520px; }
.cipad-buscador input[type="search"],
.cipad-buscador input[type="text"] {
	width: 100%;
	min-height: 48px;
	padding: .7rem 1rem;
	border: 2px solid var(--cipad-border-strong);
	border-radius: var(--cipad-radius-m);
	font-size: 1rem;
}

/* ----------------------------------------------------------------- migas */

.cipad-migas { margin-bottom: 1rem; font-size: .88em; }
.cipad-migas ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0;
	padding: 0;
	color: var(--cipad-text-muted);
}
.cipad-migas li + li::before { content: "› "; color: var(--cipad-border-strong); }
.cipad-migas a { color: var(--cipad-text-muted); }
.cipad-migas [aria-current="page"] { color: var(--cipad-text); font-weight: 600; }

/* --------------------------------------------------------- pie en Divi */

.cipad-pie-divi .et_pb_text ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cipad-pie-divi .et_pb_text li { margin-bottom: .5rem; line-height: 1.4; }
.cipad-pie-divi h3 {
	font-size: .8em !important;
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* ------------------------------------------------------- ancho de lectura */

/* El ancho de lectura lo controla la fila de Divi, no esta hoja.
   Limitarlo aqui producia bloques descentrados que se pelean con el
   constructor y desconciertan al editar. Si quiere acortar la linea de un
   apartado, hagalo en los ajustes de la fila: Diseno -> Dimensionado. */

/* ------------------------------------------------------------------ blog */

.cipad-blog-divi .et_pb_post {
	background: #FFFFFF;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
.cipad-blog-divi .et_pb_post .entry-title { margin-bottom: .35rem; }
.cipad-blog-divi .et_pb_post .entry-title a { text-decoration: none; }
.cipad-blog-divi .et_pb_post .entry-title a:hover { text-decoration: underline; }
.cipad-blog-divi .et_pb_post .post-meta { margin-bottom: .75rem; }
.cipad-blog-divi .more-link {
	display: inline-block;
	margin-top: .5rem;
	border-bottom: 2px solid var(--cipad-accent);
	text-decoration: none;
	padding-bottom: 2px;
}

/* Sin barra lateral en las paginas del proyecto. Una columna de «entradas
   recientes» junto a una pagina de servicio no informa: distrae del unico
   camino que importa, que es el formulario. */
.cipad-sitio #main-content .container::before { display: none !important; }
.cipad-sitio #sidebar { display: none !important; }
.cipad-sitio #left-area {
	width: 100% !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	float: none !important;
}

/* ------------------------------------------------- RESPONSIVE (PC/tablet/móvil)

   Divi apila sus columnas por debajo de 980px. Estas reglas se ocupan de lo
   que Divi no cubre: el contenido del proyecto —tablas anchas, diagramas,
   bloques legales— y los objetivos tactiles.
   -------------------------------------------------------------------------- */

/* --- Escritorio grande: no dejar que la linea se estire sin limite */
@media (min-width: 1441px) {
	.cipad-sitio .et_pb_row { max-width: 1200px; }
}

/* --- Tablet horizontal y portátiles pequeños */
@media (max-width: 1180px) {
	.cipad-sitio .et_pb_row { width: 92%; }
	.cipad-alcance,
	.cipad-autoria,
	.cipad-nota { max-width: 100%; }
}

/* --- Tablet vertical: aquí Divi empieza a apilar */
@media (max-width: 980px) {
	.cipad-cabecera-divi .et_pb_column { margin-bottom: 0 !important; }
	.cipad-cabecera-divi .et_pb_row { display: flex; flex-wrap: wrap; align-items: center; }

	.cipad-pie-divi .et_pb_column {
		width: 48% !important;
		margin-right: 4% !important;
		margin-bottom: 2rem !important;
	}
	.cipad-pie-divi .et_pb_column:nth-child(2n) { margin-right: 0 !important; }

	table.cipad-tabla { font-size: .92em; }
	.cipad-formulario { padding: 1.25rem; }
}

/* --- Móvil */
@media (max-width: 767px) {
	.cipad-diagrama-ancho    { display: none; }
	.cipad-diagrama-estrecho { display: block; }

	.cipad-pie-divi .et_pb_column {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 1.75rem !important;
	}

	/* Las tablas del contenido son anchas por naturaleza —umbrales de PESV,
	   estándares mínimos—. Se recorren de lado, con aviso visible. */
	.cipad-tabla-wrap { position: relative; }
	.cipad-tabla-wrap::after {
		content: "Deslice para ver la tabla completa →";
		display: block;
		padding: .5rem .75rem;
		font-size: .78rem;
		color: var(--cipad-text-muted);
		background: var(--cipad-bg-alt);
		border-top: 1px solid var(--cipad-border);
		position: sticky;
		left: 0;
	}
	table.cipad-tabla { font-size: .88em; min-width: 480px; }
	table.cipad-tabla th,
	table.cipad-tabla td { padding: .6rem .7rem; }

	.cipad-alcance,
	.cipad-nota,
	.cipad-consentimiento { padding: .9rem 1rem; }

	.cipad-formulario { padding: 1rem; border-radius: 12px; }
	.cipad-formulario .cipad-btn { width: 100%; margin-right: 0; }

	.cipad-migas { font-size: .82em; }

	/* Ningun objetivo tactil por debajo de 44px. */
	.cipad-sitio a,
	.cipad-sitio button { min-height: 44px; }
	.cipad-sitio p a,
	.cipad-sitio li a,
	.cipad-migas a { min-height: 0; }
}

/* --- Móvil estrecho */
@media (max-width: 400px) {
	.cipad-blog-divi .et_pb_post { padding: 1rem; }
	.cipad-diagrama { margin: 1.75rem 0; }
}

/* --- Orientación horizontal en móvil: aprovechar el ancho */
@media (max-width: 900px) and (orientation: landscape) {
	.cipad-diagrama-ancho    { display: block; }
	.cipad-diagrama-estrecho { display: none; }
}

/* --------------------------------------------------------------- moviles */



/* ----------------------------------------------------------- preferencias */

@media (prefers-reduced-motion: reduce) {
	.cipad-diagrama *,
	.et_pb_module * {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------- impresion */

@media print {
	.cipad-cabecera-divi,
	.cipad-buscador,
	.et_pb_button_module_wrapper { display: none !important; }

	.cipad-pie-divi,
	.cipad-pie-barra-divi { background: none !important; color: #000 !important; }
	.cipad-pie-divi *,
	.cipad-pie-barra-divi * { color: #000 !important; }

	table.cipad-tabla thead th { background: none; color: #000; border-bottom: 2px solid #000; }
	.cipad-alcance,
	.cipad-autoria { border: 1px solid #000; }
	.cipad-diagrama-ancho { display: block; }
	.cipad-diagrama-estrecho { display: none; }
}


/* =========================================================================
   BLOQUE 2 · PRESENTACIÓN CORPORATIVA   ·   v3.2
   ---------------------------------------------------------------------
   Reescrito tras la revisión del 1 de agosto. El diagnóstico del
   responsable fue: «no hay consistencia, hay textos que no se ven».
   Ambas cosas eran ciertas y tenían el mismo origen: metí fondos oscuros
   sin adaptar todo lo que va encima.

   PRINCIPIO QUE GOBIERNA ESTE BLOQUE:
   dos secciones oscuras en toda la página —la primera y la última— y
   TODO lo que lleve datos va sobre blanco. El ritmo lo dan el espacio y
   las fichas, no el color. Un sitio que alterna fondos como un folleto no
   se lee como una consultoría.
   ========================================================================= */

/* ================================================================ 1 · BASE */

/* Divi añade relleno al contenedor para compensar su cabecera fija.
   Con cabecera del Theme Builder ese relleno sobra y deja un hueco enorme
   sobre el logotipo. Era lo primero que se veía al entrar. */
.cipad-sitio #page-container { padding-top: 0 !important; }
.cipad-sitio #et-main-area   { padding-top: 0 !important; }
.cipad-sitio #main-content   { padding-top: 0 !important; }

.cipad-sitio .et_pb_section  { padding-top: 0; padding-bottom: 0; }
.cipad-sitio .et_pb_row      { padding-top: 0; padding-bottom: 0; }

/* Módulos: separación uniforme. Sin esto cada bloque decide la suya. */
.cipad-sitio .et_pb_text { margin-bottom: 1.5rem !important; }
.cipad-sitio .et_pb_text:last-child { margin-bottom: 0 !important; }

/* ==================================================== 2 · TEXTO SOBRE AZUL

   Regla dura y sin excepciones. Divi no deduce el color del texto a partir
   del fondo: texto #1F1B20 sobre azul #27146F da 1,1:1. Invisible. */

.cipad-sobre-oscuro,
.cipad-sobre-oscuro p,
.cipad-sobre-oscuro li,
.cipad-sobre-oscuro span,
.cipad-sobre-oscuro strong,
.cipad-sobre-oscuro em,
.cipad-sobre-oscuro .et_pb_text,
.cipad-sobre-oscuro .et_pb_text_inner,
.cipad-sobre-oscuro .et_pb_text_inner * {
	color: #FFFFFF !important;
}

.cipad-sobre-oscuro h1,
.cipad-sobre-oscuro h2,
.cipad-sobre-oscuro h3,
.cipad-sobre-oscuro h4,
.cipad-sobre-oscuro .et_pb_text_inner h1,
.cipad-sobre-oscuro .et_pb_text_inner h2,
.cipad-sobre-oscuro .et_pb_text_inner h3 {
	color: #FFFFFF !important;
}

/* El amarillo NO se usa para titulares. 12,76:1 lo permitiría, pero un
   titular amarillo sobre azul lee como cartel de obra, no como consultoría.
   Se reserva para el filete de acento, que es donde funciona. */
.cipad-sobre-oscuro .et_pb_text_inner > h2::after,
.cipad-sobre-oscuro .et_pb_text_inner > h3::after {
	background: var(--cipad-accent) !important;
}

.cipad-sobre-oscuro a { color: #FFFFFF !important; text-decoration: underline; }
.cipad-sobre-oscuro a:hover { color: var(--cipad-accent) !important; }
.cipad-sobre-oscuro :focus-visible { outline-color: #FFFFFF !important; }

.cipad-sobre-oscuro code {
	background: rgba(255,255,255,.14) !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255,255,255,.25);
}

/* ================================================== 3 · TABLAS · LO CRÍTICO

   Divi aplica su propio estilo a th y td, con fondo de color en la primera
   columna. Sobre azul eso producía columnas ilegibles: azul sobre azul.
   Aquí se neutraliza con la especificidad suficiente y se fuerza que TODA
   tabla viva sobre una tarjeta blanca, esté donde esté. */

.cipad-sitio .cipad-tabla-wrap,
.cipad-sobre-oscuro .cipad-tabla-wrap {
	background: #FFFFFF !important;
	border: 1px solid var(--cipad-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 12px rgba(31,27,32,.07);
	overflow: hidden;
	overflow-x: auto;
	margin: 1.75rem 0 !important;
}

.cipad-sitio table.cipad-tabla,
.cipad-sitio .et_pb_text table.cipad-tabla,
.cipad-sobre-oscuro table.cipad-tabla {
	background: #FFFFFF !important;
	border: 0 !important;
	width: 100%;
	border-collapse: collapse;
	margin: 0 !important;
}

/* Neutralizar el estilo de tabla del tema, celda por celda. */
.cipad-sitio table.cipad-tabla th,
.cipad-sitio table.cipad-tabla td,
.cipad-sitio .et_pb_text table.cipad-tabla th,
.cipad-sitio .et_pb_text table.cipad-tabla td,
.cipad-sobre-oscuro table.cipad-tabla th,
.cipad-sobre-oscuro table.cipad-tabla td {
	background: transparent !important;
	color: var(--cipad-text) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cipad-border) !important;
	padding: .95rem 1.1rem !important;
	text-align: left !important;
	vertical-align: top;
	line-height: 1.55;
	font-size: .95rem;
}

.cipad-sitio table.cipad-tabla thead th,
.cipad-sobre-oscuro table.cipad-tabla thead th {
	background: var(--cipad-primary) !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	border-bottom: 0 !important;
	letter-spacing: .01em;
}

/* La primera columna de datos: azul, legible, sobre blanco. */
.cipad-sitio table.cipad-tabla tbody th,
.cipad-sobre-oscuro table.cipad-tabla tbody th {
	color: var(--cipad-primary) !important;
	font-weight: 700 !important;
	width: 34%;
}
.cipad-sitio table.cipad-tabla tbody th *,
.cipad-sobre-oscuro table.cipad-tabla tbody th * {
	color: var(--cipad-primary) !important;
}

.cipad-sitio table.cipad-tabla tbody tr:nth-child(even) th,
.cipad-sitio table.cipad-tabla tbody tr:nth-child(even) td,
.cipad-sobre-oscuro table.cipad-tabla tbody tr:nth-child(even) th,
.cipad-sobre-oscuro table.cipad-tabla tbody tr:nth-child(even) td {
	background: var(--cipad-bg-alt) !important;
}

.cipad-sitio table.cipad-tabla tbody tr:last-child th,
.cipad-sitio table.cipad-tabla tbody tr:last-child td {
	border-bottom: 0 !important;
}

.cipad-sitio table.cipad-tabla a { color: var(--cipad-primary) !important; }

/* ================================================ 4 · DIAGRAMAS EN TARJETA

   Los tres SVG se dibujaron para fondo blanco: sus textos secundarios son
   grises. Sobre azul quedaban ilegibles. En lugar de rehacer los tres, se
   les pone siempre una tarjeta blanca debajo. Funciona en cualquier fondo
   y no toca los archivos. */

.cipad-sitio .cipad-diagrama,
.cipad-sobre-oscuro .cipad-diagrama {
	background: #FFFFFF !important;
	border: 1px solid var(--cipad-border);
	border-radius: 16px;
	padding: 1.75rem;
	margin: 2rem 0 !important;
	box-shadow: 0 4px 20px rgba(31,27,32,.09);
	max-width: 100%;
}
.cipad-sitio .cipad-diagrama svg { width: 100%; height: auto; display: block; }
.cipad-sitio .cipad-diagrama * { color: inherit !important; }

/* El módulo de código que los envuelve no debe heredar el fondo azul. */
.cipad-sobre-oscuro .et_pb_code { color: var(--cipad-text) !important; }

/* ==================================================== 5 · EL HERO

   Una sola imagen de marca: azul profundo, trama tenue, filete amarillo
   abajo. Sin nada que gire ni parpadee. */

.cipad-hero {
	position: relative;
	overflow: hidden;
	background-image:
		radial-gradient(110% 85% at 82% 8%, rgba(74,50,153,.62) 0%, rgba(39,20,111,0) 60%),
		linear-gradient(158deg, #2B1678 0%, #27146F 45%, #1B0E4E 100%) !important;
}
.cipad-hero::before {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: .55;
	pointer-events: none;
}
.cipad-hero::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 5px;
	background: var(--cipad-accent);
}
.cipad-hero .et_pb_row { position: relative; z-index: 2; }

.cipad-hero h1 {
	font-size: clamp(1.9rem, 1.15rem + 2.5vw, 3.2rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -.02em;
	max-width: 22ch;
	margin-bottom: 1rem !important;
}
.cipad-hero .cipad-entradilla,
.cipad-hero p {
	font-size: clamp(1rem, .93rem + .5vw, 1.22rem) !important;
	line-height: 1.6 !important;
	max-width: 54ch;
}
.cipad-hero .et_pb_text_inner > h1::after,
.cipad-hero .et_pb_text_inner > h2::after { display: none; }

/* ==================================================== 6 · EL CIERRE */

.cipad-cierre {
	background-image:
		radial-gradient(85% 115% at 12% 100%, rgba(74,50,153,.6) 0%, rgba(39,20,111,0) 58%),
		linear-gradient(22deg, #1B0E4E 0%, #27146F 100%) !important;
	border-top: 5px solid var(--cipad-accent);
}
.cipad-cierre h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem) !important; }

/* ======================================== 7 · FRANJA DE CONFIANZA · FICHAS

   Cuatro datos verificables. Como fichas, no como tabla: una tabla dice
   «lea esto»; una ficha dice «esto es un hecho comprobable». */

.cipad-franja-confianza .cipad-tabla-wrap {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}
.cipad-franja-confianza table.cipad-tabla,
.cipad-franja-confianza table.cipad-tabla tbody {
	background: none !important;
	display: block;
}
.cipad-franja-confianza table.cipad-tabla tbody {
	display: grid;
	gap: 1rem;
}
.cipad-franja-confianza table.cipad-tabla tr {
	display: block;
	background: #FFFFFF !important;
	border: 1px solid var(--cipad-border) !important;
	border-top: 4px solid var(--cipad-accent) !important;
	border-radius: 12px;
	padding: 1.2rem 1.3rem;
	box-shadow: 0 2px 10px rgba(31,27,32,.05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.cipad-franja-confianza table.cipad-tabla tr:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(39,20,111,.14);
}
.cipad-franja-confianza table.cipad-tabla td {
	display: block !important;
	border: 0 !important;
	padding: 0 !important;
	background: none !important;
}
.cipad-franja-confianza table.cipad-tabla td:first-child {
	font-weight: 700;
	color: var(--cipad-primary) !important;
	font-size: 1.02rem;
	margin-bottom: .35rem;
}
.cipad-franja-confianza table.cipad-tabla td:last-child {
	font-size: .9rem;
	color: var(--cipad-text-muted) !important;
	line-height: 1.5;
}
@media (min-width: 700px) {
	.cipad-franja-confianza table.cipad-tabla tbody { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.cipad-franja-confianza table.cipad-tabla tbody { grid-template-columns: repeat(4, 1fr); }
}

/* ======================================== 8 · TARJETAS DE SERVICIO */

.cipad-servicios .et_pb_module.et_pb_text {
	background: #FFFFFF;
	border: 1px solid var(--cipad-border);
	border-left: 4px solid var(--cipad-primary);
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
	transition: transform .18s ease, box-shadow .18s ease, border-left-color .18s ease;
}
.cipad-servicios .et_pb_module.et_pb_text:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(39,20,111,.11);
	border-left-color: var(--cipad-accent);
}
/* El módulo que solo lleva el titular de la sección no es una tarjeta. */
.cipad-servicios .et_pb_module.et_pb_text:first-child {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
}
.cipad-servicios .et_pb_module.et_pb_text:first-child:hover {
	transform: none;
	box-shadow: none;
}
.cipad-servicios .et_pb_text_inner > h3 { margin-top: 0; }
.cipad-servicios .et_pb_text_inner > p:last-child { margin-bottom: 0; }

/* ======================================== 9 · TITULARES CON ACENTO */

.cipad-sitio .et_pb_text_inner > h2 {
	position: relative;
	padding-bottom: .6rem;
	margin-bottom: 1rem;
}
.cipad-sitio .et_pb_text_inner > h2::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 52px; height: 4px;
	border-radius: 2px;
	background: var(--cipad-accent);
}
.cipad-franja-confianza .et_pb_text_inner > h2::after { display: none; }

/* ======================================== 10 · BOTONES */

.cipad-sitio .et_pb_button {
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease !important;
	letter-spacing: 0 !important;
}
.cipad-sitio .et_pb_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(39,20,111,.22);
}
.cipad-sobre-oscuro .et_pb_button:hover { box-shadow: 0 8px 22px rgba(0,0,0,.34); }

/* Los dos botones del hero, en línea y no apilados. */
.cipad-hero .et_pb_button_module_wrapper { display: inline-block; margin-right: .75rem; }

/* ======================================== 11 · MARCOS DE FOTOGRAFÍA */

.cipad-marco img { border-radius: 12px; display: block; width: 100%; height: auto; }
body.logged-in .cipad-marco { position: relative; }
body.logged-in .cipad-marco::after {
	content: "Imagen pendiente";
	position: absolute;
	top: 14px; left: 14px;
	background: var(--cipad-accent);
	color: var(--cipad-text);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .3rem .6rem;
	border-radius: 4px;
}

/* ======================================== 12 · NOTAS Y BLOQUES LEGALES */

.cipad-nota {
	border-left-width: 5px;
	box-shadow: 0 1px 6px rgba(31,27,32,.05);
	background: var(--cipad-bg-alt) !important;
}
.cipad-sobre-oscuro .cipad-nota,
.cipad-sobre-oscuro .cipad-alcance,
.cipad-sobre-oscuro .cipad-autoria {
	background: #FFFFFF !important;
	border-radius: 12px;
	padding: 1.25rem 1.5rem !important;
}
.cipad-sobre-oscuro .cipad-nota *,
.cipad-sobre-oscuro .cipad-alcance *,
.cipad-sobre-oscuro .cipad-autoria * {
	color: var(--cipad-text) !important;
}
.cipad-sobre-oscuro .cipad-nota strong,
.cipad-sobre-oscuro .cipad-alcance strong,
.cipad-sobre-oscuro .cipad-autoria strong { color: var(--cipad-primary) !important; }
.cipad-sobre-oscuro .cipad-alcance a,
.cipad-sobre-oscuro .cipad-autoria a { color: var(--cipad-primary) !important; }
.cipad-sobre-oscuro .cipad-autoria { border-top: 4px solid var(--cipad-accent); }

/* ======================================== 13 · MOVIMIENTO SOBRIO */

@media (prefers-reduced-motion: no-preference) {
	.cipad-servicios .et_pb_module.et_pb_text,
	.cipad-franja-confianza table.cipad-tabla tr {
		animation: cipad-entrada .45s ease both;
		animation-timeline: view();
		animation-range: entry 0% cover 20%;
	}
}
@keyframes cipad-entrada {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* ======================================== 14 · CABECERA */

.cipad-cabecera-divi .et_pb_row { align-items: center; }
.cipad-cabecera-divi .et_pb_column { margin-bottom: 0 !important; }
.cipad-cabecera-divi .et_pb_menu__menu > nav > ul > li > a {
	font-size: .95rem !important;
	padding: .55rem .1rem !important;
	border-bottom: 2px solid transparent;
}
.cipad-cabecera-divi .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
	border-bottom-color: var(--cipad-accent);
}
.cipad-cabecera-divi .et_pb_menu__wrap { justify-content: center; }

/* ======================================== 15 · RESPONSIVE DEL BLOQUE 2 */

@media (max-width: 980px) {
	.cipad-hero { padding: 56px 0 !important; }
	.cipad-sitio .cipad-diagrama { padding: 1.1rem; }
}

@media (max-width: 767px) {
	.cipad-hero h1 { max-width: none; }
	.cipad-hero .et_pb_button_module_wrapper { display: block; margin: 0 0 .6rem; }
	.cipad-hero .et_pb_button { width: 100%; text-align: center; }
	.cipad-sitio .cipad-diagrama { padding: .85rem; border-radius: 12px; }
	.cipad-servicios .et_pb_module.et_pb_text { padding: 1.15rem 1.25rem; }
	.cipad-sitio table.cipad-tabla th,
	.cipad-sitio table.cipad-tabla td { padding: .7rem .8rem !important; font-size: .88rem; }
	.cipad-sitio table.cipad-tabla tbody th { width: auto; }
}

/* ======================================== 16 · IMPRESIÓN */

@media print {
	.cipad-hero::before,
	.cipad-hero::after,
	.cipad-marco::after { display: none !important; }
	.cipad-hero, .cipad-cierre { background: none !important; }
	.cipad-sobre-oscuro, .cipad-sobre-oscuro * { color: #000 !important; }
	.cipad-sitio .cipad-diagrama { box-shadow: none; border: 1px solid #000; }
}

/* ======================================== 17 · FORMULARIOS REALES

   Una auditoría externa detectó que las páginas describían los campos en
   una tabla y no contenían ni un <form>. El visitante llegaba con intención
   alta y no podía hacer nada. Era el fallo más caro del sitio. */

.cipad-form { margin: 0; }

.cipad-campo { margin: 0 0 1.15rem; }
.cipad-campo label {
	display: block;
	font-weight: 600;
	color: var(--cipad-primary);
	margin-bottom: .3rem;
	font-size: .95rem;
}
.cipad-obligatorio { color: var(--cipad-error); margin-left: .15rem; }

.cipad-ayuda {
	display: block;
	font-size: .82rem;
	color: var(--cipad-text-muted);
	margin-bottom: .35rem;
}

.cipad-form input[type="text"],
.cipad-form input[type="email"],
.cipad-form input[type="tel"],
.cipad-form select,
.cipad-form textarea {
	width: 100%;
	min-height: 48px;
	padding: .7rem .9rem;
	border: 2px solid var(--cipad-border-strong);
	border-radius: var(--cipad-radius-m);
	font-size: 1rem;
	font-family: inherit;
	background: #FFFFFF;
	color: var(--cipad-text);
	box-sizing: border-box;
}
.cipad-form textarea { min-height: 120px; resize: vertical; }

.cipad-form input:focus-visible,
.cipad-form select:focus-visible,
.cipad-form textarea:focus-visible {
	border-color: var(--cipad-primary);
	outline: 3px solid var(--cipad-primary);
	outline-offset: 2px;
}

/* El campo inválido no se marca SOLO por color: lleva también el borde
   grueso y el icono del navegador. Criterio 1.4.1 de WCAG. */
.cipad-form input:invalid:not(:placeholder-shown),
.cipad-form textarea:invalid:not(:placeholder-shown) {
	border-color: var(--cipad-error);
	border-width: 3px;
}

/* La trampa antispam. Fuera de pantalla, no display:none: algunos robots
   detectan display:none y la esquivan. */
.cipad-trampa {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.cipad-consentimientos {
	background: #FFFFFF;
	border: 1px solid var(--cipad-border);
	border-radius: var(--cipad-radius-m);
	padding: 1rem 1.15rem;
	margin: 1.5rem 0;
}
.cipad-check { margin: 0 0 .75rem; }
.cipad-check label {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-size: .9rem;
	line-height: 1.5;
	font-weight: 400;
	color: var(--cipad-text);
	cursor: pointer;
}
.cipad-check input[type="checkbox"] {
	margin-top: .18rem;
	width: 20px; height: 20px;
	flex-shrink: 0;
	accent-color: var(--cipad-primary);
}

.cipad-aviso-sensible {
	background: #FFFDF0;
	border-left: 4px solid var(--cipad-warning);
	border-radius: 0 var(--cipad-radius-m) var(--cipad-radius-m) 0;
	padding: .85rem 1.1rem;
	font-size: .87rem;
	line-height: 1.55;
	margin: 1.25rem 0;
	color: var(--cipad-text);
}

.cipad-enviar { margin: 1.5rem 0 .75rem; }
.cipad-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .9rem 2.4rem;
	background: var(--cipad-primary);
	color: #FFFFFF;
	border: 2px solid var(--cipad-primary);
	border-radius: var(--cipad-radius-m);
	font-size: 1.05rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background-color .16s ease, transform .16s ease;
}
.cipad-form button[type="submit"]:hover {
	background: var(--cipad-primary-dark);
	transform: translateY(-2px);
}

/* Aviso de error tras un envío rechazado. */
.cipad-error-envio {
	background: #FFF3F4;
	border: 2px solid var(--cipad-error);
	border-radius: var(--cipad-radius-m);
	padding: 1rem 1.15rem;
	margin: 0 0 1.5rem;
	color: var(--cipad-text);
	font-size: .95rem;
}
.cipad-error-envio strong { color: var(--cipad-error); }

/* El H1 nunca lleva el filete de los H2: sería redundante. */
.cipad-h1 .et_pb_text_inner > h1::after { display: none; }

@media (max-width: 620px) {
	.cipad-form button[type="submit"] { width: 100%; }
	.cipad-consentimientos { padding: .85rem .9rem; }
}

/* ======================================== 18 · CIERRE LEGAL DE LA PÁGINA

   Alcance y autoría se inyectan desde el plugin, fuera de la estructura de
   Divi. Sin envoltorio se pegaban al borde izquierdo mientras el contenido
   de arriba iba centrado a 1200 px, y el corte se veía justo donde la
   página declara sus límites legales — el peor sitio posible. */

.cipad-cierre-legal {
	width: 92%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.5rem 0 3.5rem;
	box-sizing: border-box;
}

.cipad-cierre-legal .cipad-alcance,
.cipad-cierre-legal .cipad-autoria,
.cipad-cierre-legal .cipad-nota {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.cipad-cierre-legal .cipad-alcance { margin-top: 0; }

/* En pantallas anchas el texto legal no necesita 1200 px de línea: se
   limita para que se lea, pero alineado con el contenido, no centrado
   como un bloque suelto. */
@media (min-width: 1024px) {
	.cipad-cierre-legal .cipad-alcance,
	.cipad-cierre-legal .cipad-autoria { max-width: 860px; }
}

@media (max-width: 767px) {
	.cipad-cierre-legal { width: 94%; padding: 1.75rem 0 2.5rem; }
}

/* ======================================== 19 · DIAGRAMAS · AJUSTE v4.3

   El diagrama de los tres territorios se salía por los lados en el hero:
   es ancho por naturaleza y el hero le daba todo el espacio disponible.
   Se acota, se centra y se le pone fondo claro para que sus textos
   —dibujados en gris para fondo blanco— se lean. */

.cipad-hero .cipad-diagrama,
.cipad-sitio .cipad-diagrama {
	background: var(--cipad-bg-alt) !important;   /* gris muy claro */
	border: 1px solid var(--cipad-border);
	border-radius: 16px;
	padding: 1.5rem;
	margin: 2rem auto !important;
	box-shadow: 0 4px 20px rgba(31,27,32,.08);
	overflow: hidden;
}

/* El del hero, más contenido: no debe competir con el titular. */
.cipad-hero .cipad-diagrama {
	max-width: 620px;
	padding: 1.25rem;
}

/* Que el SVG quepa siempre dentro de su tarjeta, pase lo que pase. */
.cipad-sitio .cipad-diagrama svg {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	display: block;
	margin: 0 auto;
}

/* En pantallas medianas y anchas, el hero se reparte: texto y diagrama. */
@media (min-width: 1100px) {
	.cipad-hero .et_pb_row { max-width: 1200px; }
	.cipad-hero .cipad-diagrama { max-width: 560px; }
}

@media (max-width: 767px) {
	.cipad-sitio .cipad-diagrama { padding: .9rem; border-radius: 12px; }
	.cipad-hero .cipad-diagrama  { max-width: 100%; }
}

/* ======================================== 20 · RECURSOS DESCARGABLES */

.cipad-descarga {
	display: flex;
	gap: 1.15rem;
	align-items: flex-start;
	background: #FFFFFF;
	border: 1px solid var(--cipad-border);
	border-left: 5px solid var(--cipad-accent);
	border-radius: 12px;
	padding: 1.4rem 1.6rem;
	margin: 2rem 0;
	max-width: var(--cipad-text-width);
	box-shadow: 0 2px 12px rgba(31,27,32,.06);
}
.cipad-descarga-icono {
	flex-shrink: 0;
	width: 46px; height: 46px;
	border-radius: 10px;
	background: var(--cipad-primary);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.cipad-descarga-cuerpo { flex: 1; }
.cipad-descarga h3 { margin: 0 0 .3rem !important; font-size: 1.08rem !important; }
.cipad-descarga p { margin: 0 0 .75rem; font-size: .93rem; line-height: 1.55; }
.cipad-descarga .cipad-menor { margin: .6rem 0 0; font-size: .82rem; }
.cipad-descarga a.cipad-btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: .8rem 1.5rem;
	background: var(--cipad-primary);
	color: #FFFFFF !important;
	border-radius: var(--cipad-radius-m);
	font-weight: 600;
	text-decoration: none;
}
.cipad-descarga a.cipad-btn:hover { background: var(--cipad-primary-dark); }

.cipad-sobre-oscuro .cipad-descarga * { color: var(--cipad-text) !important; }
.cipad-sobre-oscuro .cipad-descarga h3 { color: var(--cipad-primary) !important; }
.cipad-sobre-oscuro .cipad-descarga a.cipad-btn { color: #FFFFFF !important; }

@media (max-width: 620px) {
	.cipad-descarga { flex-direction: column; padding: 1.1rem; }
	.cipad-descarga a.cipad-btn { width: 100%; justify-content: center; }
}

/* ======================================== 21 · TIPOGRAFÍA

   Con Google Fonts desactivado, Divi cae a una serif del sistema. En las
   capturas el titular salía en Georgia: legible, pero comunica «revista»,
   no «consultoría técnica». Se fija una pila de fuentes del sistema, que
   además no cuesta ni una petición de red. */

.cipad-sitio,
.cipad-sitio h1, .cipad-sitio h2, .cipad-sitio h3, .cipad-sitio h4,
.cipad-sitio p, .cipad-sitio li, .cipad-sitio td, .cipad-sitio th,
.cipad-sitio input, .cipad-sitio select, .cipad-sitio textarea,
.cipad-sitio button, .cipad-sitio .et_pb_button,
.cipad-sitio .et_pb_text, .cipad-sitio .et_pb_menu a {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", "Noto Sans", Arial, sans-serif !important;
}

.cipad-sitio h1, .cipad-sitio h2, .cipad-sitio h3 { letter-spacing: -.01em; }

/* ======================================== 22 · MARCOS PROVISIONALES

   Dejan de ser rectángulos negros: ahora muestran la ilustración de la
   pieza con una franja de aviso integrada en la propia imagen. El sitio
   se ve terminado y sigue señalando lo que falta. */

.cipad-marco img { border-radius: 12px; }
body.logged-in .cipad-marco::after { content: "Pendiente de foto real"; }
body:not(.logged-in) .cipad-marco::after { display: none; }

/* ======================================== 23 · FOTOGRAFÍA

   REGLA DE COLOR
   Cada fotografía se publica en blanco y negro y recupera el color al pasar
   el ratón. No es un adorno: obliga a que la página funcione en gris —donde
   la jerarquía la marcan el texto y el espacio, no la saturación— y reserva
   el color para el momento en que alguien se detiene en una imagen.

   Quien prefiera lo contrario (color en reposo, gris al pasar) añade la
   clase `cipad-foto--color` a la figura. Ambas direcciones conviven.

   ACCESIBILIDAD
   El efecto es decorativo: nunca comunica información por sí solo. Y se
   desactiva por completo si el sistema pide movimiento reducido. */

.cipad-foto {
	position: relative;
	margin: 2rem 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--cipad-bg-alt);
}

.cipad-foto img,
.cipad-foto .et_pb_image_wrap img {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(100%) contrast(1.04);
	transform: scale(1.001);          /* evita el temblor al reponer el filtro */
	transition: filter .55s ease, transform .55s ease;
}

.cipad-foto:hover img,
.cipad-foto:focus-within img,
.cipad-foto .et_pb_image:hover img {
	filter: grayscale(0%) contrast(1);
	transform: scale(1.03);
}

/* Dirección inversa: nace en color, se apaga al pasar. */
.cipad-foto--color img            { filter: grayscale(0%); }
.cipad-foto--color:hover img,
.cipad-foto--color:focus-within img { filter: grayscale(100%); }

/* En táctil no hay «pasar el ratón»: la foto se queda en color. */
@media (hover: none) {
	.cipad-foto img { filter: grayscale(0%); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cipad-foto img,
	.cipad-foto:hover img { transition: none; transform: none; }
}

/* --- CRÉDITO DE LA IMAGEN ------------------------------------------------
   Obligatorio mientras las fotografías no sean propias. Va sobre la imagen,
   discreto, siempre legible, y desaparece cuando se sustituya por una foto
   de CIPAD-SST: basta con vaciar el atributo. */

.cipad-foto figcaption,
.cipad-foto .cipad-credito {
	position: absolute;
	right: 0; bottom: 0;
	max-width: 100%;
	margin: 0;
	padding: .3rem .7rem;
	font-size: .72rem;
	line-height: 1.35;
	color: #FFFFFF;
	background: rgba(27,14,78,.82);
	border-top-left-radius: 8px;
	letter-spacing: .01em;
}
.cipad-foto figcaption a,
.cipad-foto .cipad-credito a { color: #FFFFFF; text-decoration: underline; }
.cipad-foto figcaption a:hover { color: var(--cipad-accent); }

/* Pie descriptivo bajo la foto, cuando la imagen necesita explicarse. */
.cipad-foto-pie {
	margin: .55rem 0 0;
	font-size: .85rem;
	color: var(--cipad-muted);
	line-height: 1.5;
}

/* ======================================== 24 · EL DIAGRAMA DEL HERO

   Los rótulos laterales quedaban cortados: la tarjeta tenía `overflow:
   hidden` y el SVG llenaba todo el ancho disponible, de modo que las
   etiquetas de los extremos se salían por los lados. Se le da aire por
   dentro y se deja de recortar. */

.cipad-hero .cipad-diagrama {
	overflow: visible;
	padding: 1.6rem 1.9rem;
	max-width: 620px;
	margin: 2.25rem auto !important;
}

.cipad-hero .cipad-diagrama svg {
	overflow: visible;
	max-height: 380px;
}

@media (min-width: 1100px) {
	.cipad-hero .cipad-diagrama { max-width: 540px; margin: 0 auto !important; }
}

@media (max-width: 767px) {
	.cipad-hero .cipad-diagrama { padding: 1rem; }
	.cipad-hero .cipad-diagrama svg { max-height: none; }
}

/* ======================================== 25 · CABECERAS DE TABLA · RED DE SEGURIDAD

   Una cabecera de tabla con el texto del mismo color que su fondo es un
   fallo que se repite cada vez que un tema toca `th`. Se fija aquí, con
   independencia de quién lo haya pintado antes. */

.cipad-sitio table th[scope="col"],
.cipad-sitio thead th,
.cipad-sitio thead td {
	background: var(--cipad-primary) !important;
	color: #FFFFFF !important;
	border-color: var(--cipad-primary-dark) !important;
}
.cipad-sitio thead th *,
.cipad-sitio thead th a { color: #FFFFFF !important; }

/* La convención de los campos obligatorios, en su sitio. */
.cipad-form-nota {
	margin: 0 0 1.35rem;
	font-size: .9rem;
	color: var(--cipad-muted);
}
.cipad-obligatorio { color: #A8202E; font-weight: 700; }

/* La sección de formulario añadida automáticamente en las páginas que no
   lo traían. Cuatro páginas de captación describían un formulario que no
   existía; ahora existe. */
.cipad-formulario-seccion .cipad-formulario { max-width: 720px; }

/* ======================================== 26 · ILUSTRACIONES PROPIAS

   Sustituyen a los marcos provisionales. Son obra propia generada por
   código: únicas, ligeras y en el sistema visual de la casa.

   Desde la v4.9 son FOTOGRAFÍAS. El fondo azul de la tarjeta deja de verse
   —la foto lo cubre— pero se conserva: mientras la imagen carga, el hueco es
   azul de marca y no un rectángulo gris de navegador. Un detalle de medio
   segundo que se nota. */

.cipad-ilustracion {
	margin: 2.5rem auto;
	max-width: 1120px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--cipad-primary);
	box-shadow: 0 6px 28px rgba(31,27,32,.13);
	line-height: 0;
}



.cipad-ilustracion-img {
	display: block;
	width: 100%;
	height: auto;
}

/* En el hero comparte espacio con el titular: se acota. */
.cipad-hero .cipad-ilustracion { max-width: 620px; margin: 2rem auto; }

@media (min-width: 1100px) {
	.cipad-hero .cipad-ilustracion { max-width: 540px; }
}

@media (max-width: 767px) {
	.cipad-ilustracion { border-radius: 12px; margin: 1.75rem auto; }
}

@media print {
	.cipad-ilustracion { box-shadow: none; border: 1px solid #000; }
}

/* --- PIE DE ILUSTRACIÓN ---------------------------------------------------

   Texto visible bajo la imagen. No es decoración: es la parte que un sistema
   que resume puede leer, porque el dibujo no puede mirarlo. Y para quien sí
   lo ve, aporta el dato que la ilustración sola no da —la norma, la cifra,
   la fecha—.

   Va DENTRO de la tarjeta azul, en blanco, para que se lea como parte de la
   imagen y no como un párrafo suelto del texto. */

.cipad-ilustracion-pie {
	margin: 0;
	padding: .85rem 1.15rem 1rem;
	background: var(--cipad-primary-dark);
	color: #DCD6EE;
	font-size: .88rem;
	line-height: 1.5;
	text-align: left;
	border-top: 3px solid var(--cipad-accent);
}

@media (max-width: 767px) {
	.cipad-ilustracion-pie { font-size: .82rem; padding: .7rem .9rem .85rem; }
}

@media print {
	.cipad-ilustracion-pie {
		background: none;
		color: #000;
		border-top: 1px solid #000;
		font-style: italic;
	}
}


/* ======================================== 27 · FOTOGRAFÍA · ESQUINAS, SOMBRA Y COLOR

   Tres cosas pedidas juntas, y conviene explicarlas juntas porque se apoyan
   entre sí.

   ESQUINAS. Suben de 16 a 20 px. Con una fotografía dentro, un radio pequeño
   se pierde y parece un error de recorte; uno grande la separa del texto y
   la convierte en objeto. Veinte es donde deja de parecer casualidad.

   SOMBRA. Doble: una corta y opaca que asienta la imagen sobre el fondo, y
   otra larga y muy tenue que le da profundidad. Una sombra sola, o queda
   dura o queda sucia. Al pasar el ratón, la sombra crece un poco: la imagen
   parece levantarse, que es lo que hace que el cambio de color se lea como
   una respuesta y no como un fallo de carga.

   COLOR. En reposo, a color. Al pasar el ratón, blanco y negro. Al salir,
   vuelve el color. Es la dirección inversa a la que se había programado, y
   se cambia por decisión del responsable del proyecto.

   Sobre la transición: 550 ms al entrar y 400 ms al salir. Volver más rápido
   de lo que se fue es una regla vieja de interfaz — el retorno debe sentirse
   como que la imagen se recupera, no como que arranca otro efecto. */

.cipad-ilustracion,
.cipad-foto {
	border-radius: 20px;
	box-shadow:
		0 2px 6px rgba(27,14,78,.14),
		0 14px 40px -12px rgba(27,14,78,.28);
	transition: box-shadow .45s ease, transform .45s ease;
}

.cipad-ilustracion:hover,
.cipad-ilustracion:focus-within,
.cipad-foto:hover,
.cipad-foto:focus-within {
	box-shadow:
		0 4px 10px rgba(27,14,78,.18),
		0 22px 56px -14px rgba(27,14,78,.34);
	transform: translateY(-3px);
}

/* --- El cambio de color, en las dos direcciones ------------------------- */

.cipad-ilustracion-img,
.cipad-foto img,
.cipad-foto .et_pb_image_wrap img {
	filter: grayscale(0%);
	transition: filter .40s ease;
}

/* El gris vive en los estilos críticos en línea, y SOLO dentro de
   @media (hover:hover). Aquí no se repite: dos sitios que dicen lo mismo
   acaban diciendo cosas distintas. */

.cipad-ilustracion:hover .cipad-ilustracion-img,
.cipad-ilustracion:focus-within .cipad-ilustracion-img,
.cipad-foto:hover img,
.cipad-foto:focus-within img {
	filter: grayscale(100%) contrast(1.06);
	transition: filter .55s ease;      /* ir: un poco más lento */
}

/* La regla anterior hacía lo contrario —gris en reposo, color al pasar—.
   Se anula explícitamente para que no queden dos reglas peleándose. */
.cipad-foto img { filter: grayscale(0%) contrast(1); }
.cipad-foto--color img { filter: grayscale(0%); }
.cipad-foto--color:hover img,
.cipad-foto--color:focus-within img { filter: grayscale(100%) contrast(1.06); }

/* El pie acompaña a la imagen: mismas esquinas por abajo. */
.cipad-ilustracion-pie {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

/* En táctil no existe «pasar el ratón»: la foto se queda a color y quieta.
   Un efecto que solo se dispara al tocar es un efecto que estorba. */
@media (hover: none) {
	.cipad-ilustracion:hover,
	.cipad-foto:hover { transform: none; }
	.cipad-ilustracion:hover .cipad-ilustracion-img,
	.cipad-foto:hover img { filter: grayscale(0%); }
}

@media (prefers-reduced-motion: reduce) {
	.cipad-ilustracion,
	.cipad-foto,
	.cipad-ilustracion-img,
	.cipad-foto img { transition: none; }
	.cipad-ilustracion:hover,
	.cipad-foto:hover { transform: none; }
}

@media (max-width: 767px) {
	.cipad-ilustracion,
	.cipad-foto { border-radius: 16px; }
	.cipad-ilustracion-pie {
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
	}
}

@media print {
	.cipad-ilustracion,
	.cipad-foto { box-shadow: none; border: 1px solid #000; transform: none; }
	.cipad-ilustracion-img,
	.cipad-foto img { filter: none; }
}


/* --- REFUERZO DEL REDONDEO -----------------------------------------------

   Divi aplica sus propios estilos a lo que hay dentro de un módulo de código,
   y en algunas plantillas gana por especificidad. Como el redondeo tiene que
   verse sí o sí, se refuerza sobre el contenedor Y sobre la imagen.

   Redondear las dos cosas es redundante a propósito: si el contenedor
   perdiera el `overflow: hidden`, la imagen conserva sus esquinas. */

.cipad-sitio .cipad-ilustracion,
.cipad-sitio figure.cipad-ilustracion,
.cipad-sitio .et_pb_code .cipad-ilustracion {
	border-radius: 20px !important;
	overflow: hidden !important;
}

.cipad-sitio .cipad-ilustracion-img,
.cipad-sitio .et_pb_code .cipad-ilustracion-img {
	border-radius: 20px 20px 0 0;
	display: block;
	width: 100%;
	height: auto;
}

/* Si la ilustración no lleva pie, redondea por los cuatro lados. */
.cipad-sitio .cipad-ilustracion > .cipad-ilustracion-img:only-child {
	border-radius: 20px;
}

@media (max-width: 767px) {
	.cipad-sitio .cipad-ilustracion,
	.cipad-sitio figure.cipad-ilustracion { border-radius: 16px !important; }
	.cipad-sitio .cipad-ilustracion-img { border-radius: 16px 16px 0 0; }
	.cipad-sitio .cipad-ilustracion > .cipad-ilustracion-img:only-child { border-radius: 16px; }
}


/* ======================================== 28 · LAS TARJETAS DEL BLOG

   Las miniaturas del Centro de conocimiento NO son `.cipad-ilustracion`: las
   dibuja el módulo Blog de Divi con su propio marcado. Por eso conservaban
   las esquinas cuadradas mientras el resto del sitio ya estaba redondeado.

   Se les aplica el mismo tratamiento —esquinas, sombra y cambio a blanco y
   negro— para que la página no mezcle dos criterios. Una tarjeta redonda al
   lado de una cuadrada no se lee como variedad: se lee como descuido. */

.cipad-sitio .et_pb_blog_grid .et_pb_image_container,
.cipad-sitio .et_pb_post .entry-featured-image-url,
.cipad-sitio .cipad-blog-divi .et_pb_image_container,
.cipad-sitio .cipad-blog-home .et_pb_image_container {
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow:
		0 2px 6px rgba(27,14,78,.14),
		0 12px 32px -12px rgba(27,14,78,.26);
	transition: box-shadow .45s ease, transform .45s ease;
	margin-bottom: 1.1rem !important;
	display: block;
}

.cipad-sitio .et_pb_blog_grid .et_pb_image_container img,
.cipad-sitio .et_pb_post .entry-featured-image-url img,
.cipad-sitio .cipad-blog-divi .et_pb_image_container img,
.cipad-sitio .cipad-blog-home .et_pb_image_container img {
	border-radius: 16px !important;
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(0%);
	transition: filter .40s ease;
}

.cipad-sitio .et_pb_blog_grid article:hover .et_pb_image_container,
.cipad-sitio .et_pb_post:hover .entry-featured-image-url,
.cipad-sitio .cipad-blog-divi article:hover .et_pb_image_container,
.cipad-sitio .cipad-blog-home article:hover .et_pb_image_container {
	box-shadow:
		0 4px 10px rgba(27,14,78,.18),
		0 20px 48px -14px rgba(27,14,78,.32);
	transform: translateY(-3px);
}

.cipad-sitio .et_pb_blog_grid article:hover .et_pb_image_container img,
.cipad-sitio .et_pb_post:hover .entry-featured-image-url img,
.cipad-sitio .cipad-blog-divi article:hover .et_pb_image_container img,
.cipad-sitio .cipad-blog-home article:hover .et_pb_image_container img {
	filter: grayscale(100%) contrast(1.06);
	transition: filter .55s ease;
}

/* La tarjeta entera acompaña: si la imagen se levanta y la caja no, parece
   que la imagen se despega. */
.cipad-sitio .et_pb_blog_grid .et_pb_post {
	border-radius: 16px;
	transition: box-shadow .45s ease;
}

@media (hover: none) {
	.cipad-sitio .et_pb_blog_grid article:hover .et_pb_image_container,
	.cipad-sitio .cipad-blog-home article:hover .et_pb_image_container { transform: none; }
	.cipad-sitio .et_pb_blog_grid article:hover .et_pb_image_container img,
	.cipad-sitio .cipad-blog-home article:hover .et_pb_image_container img { filter: grayscale(0%); }
}

@media (prefers-reduced-motion: reduce) {
	.cipad-sitio .et_pb_image_container,
	.cipad-sitio .et_pb_image_container img { transition: none; }
	.cipad-sitio article:hover .et_pb_image_container { transform: none; }
}