/* ══════════════════════════════════════════════════════════════════════════
 * Páginas internas 2026 — ESU
 *
 * Todo se acota a `.esu-interna-2026` —la clase de body— para que nada de aquí
 * afecte al resto del sitio. El marco (barra GOV.CO, navegación y pie) vive en
 * chrome-2026.css y se comparte con el Home; esta hoja no lo modifica salvo en
 * el único punto donde la geometría de las internas lo exige, documentado más
 * abajo.
 *
 * TIPOGRAFÍA. El origen usa Montserrat, pero en este sitio esa familia NO se
 * encola: las únicas Google Fonts servidas son Manrope y DM Sans. El kit global
 * de Elementor (ID 16418) declara Montserrat, pero Elementor solo encola las
 * familias que usan sus widgets, y ninguno la usa. El banner cae por tanto en
 * la sans-serif del sistema, igual que ya le pasa hoy a todo el chrome. Es
 * coherente con lo desplegado, no idéntico al origen; corregirlo obligaría a
 * tocar chrome-2026.css y con ello el Home, que la Migración 1 debe dejar
 * intacto.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
 * Guardarraíles.
 *
 * Los mismos que home-2026.css aplica a su `<main>`. No son adorno: el contenido
 * de estas páginas es Elementor heredado, y en la Migración 3 será HTML crudo
 * importado. Que nada pueda provocar scroll horizontal ni desbordar el ancho es
 * más necesario aquí que en el Home.
 * ══════════════════════════════════════════════════════════════════════════ */
.esu-interna-2026 .esu-interna-2026__main {
	overflow-x: clip;
}

/*
 * `height: auto` NO se aplica al iframe.
 *
 * Un iframe es un elemento reemplazado sin relación de aspecto intrínseca:
 * `height: auto` descarta el atributo `height` del marcado y lo colapsa a la
 * altura por defecto de 150px. El Home no lo nota porque no tiene ninguno;
 * estas páginas sí —el /conocenos/ de la Migración 3 trae un iframe de
 * YouTube— y ahí el guardarraíl deformaría justo lo que dice proteger.
 *
 * Lo que el iframe necesita del guardarraíl es no desbordar el ancho. Su altura
 * se gobierna con una regla propia y `aspect-ratio` cuando haga falta, no por
 * omisión.
 *
 * home-2026.css:12-15 tiene el mismo defecto, latente. No se corrige aquí:
 * tocarlo cambiaría el Home, y hoy no le afecta.
 */
.esu-interna-2026 .esu-interna-2026__main :where(img, video, svg) {
	max-width: 100%;
	height: auto;
}
.esu-interna-2026 .esu-interna-2026__main iframe {
	max-width: 100%;
}

/* Los títulos largos no deben partirse mal en pantallas estrechas. */
.esu-interna-2026 .esu-interna-2026__main :where(h1, h2, h3, h4) {
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Banner de título.
 *
 * `bg-pt.webp` (24 KB) YA trae el degradado violeta→azul, la trama de cuadrícula
 * y los arcos concéntricos. Aquí no se recrea nada de eso: el `background-color`
 * es solo el color de reserva mientras la imagen carga, o si no llega.
 *
 * La ruta va relativa a esta hoja y no construida con ESU_HOME_2026_URL: así
 * sobrevive a cualquier cambio de dominio o de ruta de instalación sin que nadie
 * tenga que acordarse.
 * ══════════════════════════════════════════════════════════════════════════ */
.esu-interna-2026 .esu-titulo {
	/*
	 * 90 %: el `--content-width` del origen, medido sobre el render real de
	 * /conocenos/ (tarjeta al 89,2 % del viewport, márgenes del 5,2 % y 5,5 %).
	 *
	 * Hubo un rodeo aquí: una captura intermedia sugería un 96 % y llegué a
	 * ponerlo, pero era un montaje recortado, no el original. Medido contra el
	 * sitio de verdad, el valor bueno es el de siempre.
	 *
	 * El `margin-top` es el aire que separa la tarjeta de la barra de navegación,
	 * que en las internas NO se le superpone. 24px contra los 28 medidos en el
	 * origen a 2000px de viewport.
	 */
	width: 90%;
	margin-inline: auto;
	margin-top: 28px;
}

.esu-interna-2026 .esu-titulo__tarjeta {
	position: relative;      /* ancla de las migas, que son `position: absolute` */
	overflow: hidden;        /* recorta la imagen de fondo a las esquinas redondeadas */
	/* El padding NO es simétrico: 15px a la derecha, no 110. Las migas van
	   absolutas y no necesitan ese margen. */
	padding: 107px 15px 135px 110px;
	border-radius: 25px;
	background-color: #1C1C22;
	background-image: url("../img/bg-pt.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.esu-interna-2026 .esu-titulo__h1 {
	margin: 0 0 11px;
	font-family: Montserrat, sans-serif;
	/*
	 * 46px y no los 70 del origen. Con 70, un título largo como «Transparencia y
	 * acceso a la información pública ESU» —el de las ~102 páginas del molde— se
	 * parte en dos líneas y desequilibra la tarjeta. El objetivo de diseño lo
	 * muestra en una sola línea.
	 */
	font-size: 46px;
	line-height: 1.31428;
	color: #FFFFFF;
}

.esu-interna-2026 .esu-titulo__sub {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 20px;
	line-height: 23px;
	font-weight: 400;
	color: #FFFFFF;
	/*
	 * Sin medida máxima, como el origen: allí el salto de línea lo daba un
	 * `<br>` explícito dentro del widget. Nuestro subtítulo pasa por
	 * `sanitize_text_field`, así que no puede llevarlo, y en pantallas anchas se
	 * estirará a todo el ancho de la tarjeta. Si en la revisión visual se ve
	 * mal, la palanca es una sola línea:  max-width: 62ch;
	 */
}

/* --- Migas: píldora anclada al borde inferior, con esquinas invertidas --- */
.esu-interna-2026 .esu-titulo__migas {
	position: absolute;
	right: 224px;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	padding: 8px 35px 0;
	border-radius: 25px 25px 0 0;
	background: #ebf5ff;
	color: #000000;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	line-height: 33px;   /* alto de la píldora = 8 + 33 = 41 px */
}

.esu-interna-2026 .esu-titulo__migas ol {
	display: inline-flex;
	align-items: center;
	column-gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.esu-interna-2026 .esu-titulo__migas li {
	display: inline-flex;
	align-items: center;
}
.esu-interna-2026 .esu-titulo__migas a {
	color: inherit;
	text-decoration: none;
}
.esu-interna-2026 .esu-titulo__migas a:hover,
.esu-interna-2026 .esu-titulo__migas a:focus-visible {
	text-decoration: underline;
}
/*
 * El separador cuelga del `li`, NO del `a`.
 *
 * Con `a::after`, cualquier nivel que no fuera un enlace se pegaba al siguiente
 * —«Inicio / AncestroPágina actual»—. Hoy todos los ancestros que se imprimen
 * son enlaces, porque los no públicos se excluyen en el parcial, así que el
 * defecto no puede darse; pero atarlo al elemento de lista y no al enlace hace
 * que siga sin poder darse si algún día vuelve a haber un nivel sin enlazar.
 *
 * `:not(:last-child)` en vez de `:last-child { content: none }`: así el último
 * nivel —la página actual, que va en un `span` con `aria-current`— nunca lleva
 * separador colgando.
 */
.esu-interna-2026 .esu-titulo__migas li:not(:last-child)::after {
	content: '/';
	margin-left: 5px;
	margin-right: -2px;
}

/*
 * Esquinas invertidas.
 *
 * Dos cuadrados de 14 px pegados a los flancos de la píldora. El cuadrado es
 * transparente y lleva UNA esquina redondeada; la `box-shadow` sólida, sin
 * desenfoque y con 3 px de expansión, pinta el hueco del color de la píldora, de
 * modo que la unión con el borde inferior de la tarjeta se ve cóncava en lugar
 * de un corte recto.
 *
 * Es el recado del origen, con sus valores. Es también LO ÚNICO de este archivo
 * que no se puede verificar leyéndolo: la combinación de qué esquina se redondea
 * con el signo del desplazamiento de la sombra hay que comprobarla en la captura
 * de la revisión visual, a 1440 px. Si sale al revés, intercambiar
 * `border-bottom-right-radius` y `border-bottom-left-radius`.
 */
.esu-interna-2026 .esu-titulo__migas::before,
.esu-interna-2026 .esu-titulo__migas::after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 14px;
	height: 14px;
}
.esu-interna-2026 .esu-titulo__migas::before {
	left: -14px;
	border-bottom-right-radius: 14px;
	box-shadow: 3px 3px 0 3px #ebf5ff;
}
.esu-interna-2026 .esu-titulo__migas::after {
	right: -14px;
	border-bottom-left-radius: 14px;
	box-shadow: -3px 3px 0 3px #ebf5ff;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Responsive del banner.
 *
 * En orden descendente a propósito: a 1000 px se cumplen a la vez las consultas
 * de 1366, 1200 y 1024, y gana la última escrita.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1366px) {
	.esu-interna-2026 .esu-titulo__tarjeta { padding: 100px 30px 115px 30px; }
	.esu-interna-2026 .esu-titulo__migas   { right: 100px; }
}

@media (max-width: 1024px) {
	.esu-interna-2026 .esu-titulo__tarjeta { border-radius: 20px; }
	.esu-interna-2026 .esu-titulo__h1      { font-size: 38px; }
	.esu-interna-2026 .esu-titulo__migas   { right: 30px; }
}

@media (max-width: 767px) {
	/*
	 * Las migas SALEN DEL FLUJO ABSOLUTO.
	 *
	 * En el origen la píldora es de una línea —«Inicio / Conócenos»— y cabe de
	 * sobra en el `padding-bottom` que la tarjeta reserva. Nuestras cadenas son
	 * largas: bajo «Transparencia y acceso a la información pública ESU» la
	 * píldora crece a tres líneas (115 px medidos a 390) y, anclada a `bottom: 0`,
	 * tapaba 45 px del subtítulo. El `padding-bottom` fijo no puede anticipar una
	 * altura que depende del título del padre.
	 *
	 * En flujo normal la píldora empuja en vez de superponerse, y la tarjeta crece
	 * lo que haga falta. Es lo que hace el propio Auregon en su fallback de tema
	 * por debajo de 575 px (`_layout.scss:299-313`: `position: unset`,
	 * `margin-top`, `justify-content: flex-start`).
	 *
	 * El `padding-bottom` baja de 70 a 30 px porque ya no tiene que reservar hueco
	 * para nada: los 24 px de `margin-top` de la píldora dan la separación.
	 */
	.esu-interna-2026 .esu-titulo__tarjeta {
		padding: 70px 15px 30px 15px;
		border-radius: 15px;
	}
	.esu-interna-2026 .esu-titulo__h1 { font-size: 34px; }
	.esu-interna-2026 .esu-titulo__migas {
		position: static;
		margin-top: 24px;
		padding: 8px 15px;
		border-radius: 5px;
	}
	/*
	 * El recado de las esquinas invertidas solo tiene sentido pegado al borde
	 * inferior de la tarjeta. Fuera de ese anclaje sobra, y además sus
	 * pseudo-elementos son `position: absolute` respecto de una píldora que ya no
	 * lo es.
	 */
	.esu-interna-2026 .esu-titulo__migas::before,
	.esu-interna-2026 .esu-titulo__migas::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * La barra de navegación NO se superpone en las internas.
 *
 * chrome-2026.css la deja en `position: absolute` porque en el Home se monta
 * sobre un herobanner de ancho completo, como el origen. Aquí no sirve: la
 * tarjeta del banner va inset, así que la barra flotaba encima de ella y, entre
 * 1025 y ~1555 px, su contenido —el primer ítem del menú y el botón blanco
 * «Contáctanos»— se salía del fondo oscuro y quedaba blanco sobre blanco.
 *
 * En las internas ocupa su propio espacio, con banda de ancho completo y
 * degradado propio, y la tarjeta empieza debajo. Es lo que hace el origen en sus
 * páginas internas, y lo que pide el objetivo de diseño.
 *
 * El degradado está medido sobre ese objetivo: vertical puro, uniforme en
 * horizontal, de #141826 arriba a #495688 abajo.
 *
 * Se corrige aquí y no en chrome-2026.css: esa hoja gobierna también el Home,
 * en producción, y allí la superposición es correcta. La especificidad (0,2,0
 * frente a 0,1,0) basta; no hace falta !important.
 *
 * Solo escritorio: por debajo de 1025 px chrome-2026.css ya vuelve la barra
 * estática por su cuenta.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
	.esu-interna-2026 .esu-nav {
		/*
		 * `relative` y NO `static`.
		 *
		 * En un elemento estático el `z-index` se ignora, así que con `static` la
		 * barra perdía el `z-index: 20` que le da chrome-2026.css y los submenús
		 * —que son `position: absolute` dentro de ella— quedaban por DEBAJO de la
		 * tarjeta del banner, que viene después en el documento. Se veía al abrir
		 * «Nosotros»: el desplegable aparecía recortado bajo la tarjeta.
		 *
		 * `relative` sin desplazamientos ocupa el mismo sitio que `static` pero sí
		 * respeta el `z-index`, así que la barra vuelve a pintar por encima.
		 *
		 * `inset-inline: auto` anula el `inset-inline: 0` que trae la regla del
		 * chrome para el posicionamiento absoluto del Home: en `relative` sería un
		 * desplazamiento, no un anclaje.
		 */
		position: relative;
		inset-inline: auto;
		background: linear-gradient(180deg, #141826 0%, #495688 100%);
	}
}

/* ══════════════════════════════════════════════════════════════════════════
 * Barra flotante de redes.
 *
 * Su CSS del Home vive en home-2026.css, que aquí NO se carga. No se mueve de
 * allí a chrome-2026.css a propósito, por dos razones:
 *
 * 1. Los colores son distintos. En el Home los iconos son blancos sobre el
 *    herobanner oscuro; aquí el fondo es claro y saldrían blanco sobre blanco.
 *    El origen hace exactamente esta distinción: en /conocenos/ la barra es
 *    `border: 1px solid #111527; background: #fff; color: #111527`.
 * 2. Con `esu_home_2026_chrome = actual` no se carga chrome-2026.css, pero
 *    redes-2026.php sí se renderiza: mover las reglas allí dejaría al Home sin
 *    ellas justo en su palanca de reserva documentada.
 *
 * La geometría sí es idéntica y se transcribe del origen. Solo en escritorio:
 * en pantallas estrechas taparía contenido y compite con el widget de
 * accesibilidad, que se ancla al otro borde.
 * ══════════════════════════════════════════════════════════════════════════ */
.esu-interna-2026 .esu-redes { display: none; }

@media (min-width: 1025px) {
	.esu-interna-2026 .esu-redes {
		position: fixed;
		top: 50%;
		right: 16px;
		z-index: 60;
		display: flex;
		flex-direction: column;
		gap: 10px;
		transform: translateY(-50%);
	}
	.esu-interna-2026 .esu-redes a {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 1px solid #111527;
		border-radius: 999px;
		background: #FFFFFF;
		color: #111527;
		box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
		transition: background .25s ease, color .25s ease;
	}
	.esu-interna-2026 .esu-redes a:hover,
	.esu-interna-2026 .esu-redes a:focus-visible {
		background: #111527;
		color: #FFFFFF;
	}
}

@media (prefers-reduced-motion: reduce) {
	.esu-interna-2026 .esu-redes a { transition: none; }
}