/*
Theme Name: IDPP - Sitio 2026 (nueva version)
Theme URI: https://idpp04.nube4.cloud
Author: Proyecto hosting IDPP
Description: Nueva version del sitio, en idpp04.nube4.cloud; arranco el 2026-10-08 como copia del tema de idpp01 (idpp-institucional-2026). Descripcion original: Boceto visual del Home para la nueva linea grafica unica del IDPP, tras el rechazo de las tres lineas anteriores. Tipografia tomada de institutodelavictima.gob.gt (referencia aceptada por comunicacion institucional). Paleta limitada a los cinco azules del documento "Pantone Institucional 2026" y sus variaciones tonales. Logo oficial sin modificar, sin usar sus colores.
Version: 0.1.0
Requires PHP: 8.0
Text Domain: idpp-institucional
*/

/* ══════════════════════════════════════════════════════════════
   PALETA - los cinco azules del Pantone Institucional 2026
   (exactos, tal como el documento) + variaciones tonales
   derivadas matematicamente del azul principal (mezcla con
   blanco / negro). Ningun color fuera de esta familia.
   ══════════════════════════════════════════════════════════════ */
:root {
	/* Escala de la letra de los textos (de 11 a 22 px): todos los `font-size` en px de ese rango se multiplican por este factor. 1 = tamaños originales; 1.12 = ~12 por ciento más grande (el cuerpo pasa de 17 a 19 px). Los títulos grandes (24 px o más) no se escalan. */
	--esc-texto: 1.12;
	--azul-900: #10243F; /* oscuro */
	--azul-800: #0D2745; /* marino / profundo */
	--azul-700: #1B365D; /* principal */
	--azul-600: #27466B; /* intermedio */
	--azul-400: #496A8C; /* pizarra / claro */

	/* variaciones tonales, derivadas del principal */
	--azul-950: #0E1F36; /* sombra, para maximo contraste de texto */
	--azul-100: #D1D7DF; /* borde / divisor */
	--azul-050: #E4E7EC; /* fondo alterno */
	--azul-025: #F1F3F5; /* fondo general sutil */

	/*
	 * Los 9 tonos de arriba mantienen el matiz (~212°) de los cinco azules
	 * del Pantone, pero hacia el extremo claro (050/025) la saturacion cae
	 * casi a cero — por eso el sitio se sentia "gris/blanco" en vez de
	 * azul. Estos cuatro son la misma familia, mismo matiz ~212°, pero sin
	 * perder saturacion al aclarar: dan fondos de seccion y acentos que se
	 * leen como azul de verdad, no como gris.
	 */
	--azul-500: #2F4F74; /* acento intermedio, entre 600 y 400 */
	--azul-300: #7F9CBD; /* azul medio-claro, para acentos y detalles */
	--azul-150: #D3E0EE; /* fondo de seccion, claramente azul */
	--azul-075: #E9EFF6; /* fondo muy claro, azulado en vez de gris */

	--blanco: #FFFFFF;
	--texto: var(--azul-900);

	/* pictogramas (sistema de diseño): trazo, relleno tenue, un acento y el «papel» de hojas y lentes; -oscuro para fondos oscuros */
	--pictograma-trazo: var(--azul-900);
	--pictograma-relleno: var(--azul-150);
	--pictograma-acento: var(--azul-400);
	--pictograma-papel: var(--blanco);
	--pictograma-trazo-oscuro: var(--blanco);
	--pictograma-relleno-oscuro: rgba(255, 255, 255, .16);
	--pictograma-acento-oscuro: var(--azul-300);
	--pictograma-papel-oscuro: rgba(255, 255, 255, .07);
	--ic-f: var(--pictograma-relleno);
	--ic-a: var(--pictograma-acento);
	--ic-w: var(--pictograma-papel);

	--fuente: 'Poppins', sans-serif;
	--wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/*
 * ESCALA DE LETRA (2026-09-26, a pedido del usuario: «se ven muy pequeñas las letras»): todos los
 * `font-size` en px de 11 a 22 px del archivo son `calc(Npx * var(--esc-texto))`, y --esc-texto
 * (arriba, en :root) vale 1.12. Es la única perilla: 1 devuelve los tamaños de abajo, 1.2 los sube
 * aún más. Los tamaños de este archivo siguen escritos en su valor original (17px, 13px…): el
 * tamaño real es ese valor por --esc-texto (el cuerpo queda en 19px). Los títulos de 24px o más
 * y la leyenda del logo (`.idpp-brand-text small`) no se escalan. Para texto nuevo, escribirlo con
 * la misma forma `calc(Npx * var(--esc-texto))`.
 *
 * Tamaño de letra base del sitio: 17px (antes de la escala). Probado primero solo en
 * Misión/Visión/Valores (parrafo de .idpp-fila-icono-texto) y aprobado
 * por el usuario para aplicarse a todo el sitio y a las páginas que se
 * vayan creando de aquí en adelante — usar 17px (o el h3 a 19px, cuando
 * acompaña un párrafo así) para texto de lectura nuevo, no para
 * etiquetas/metadatos pequeños (tags, migas de pan, pies de tarjeta),
 * que se mantienen en su propio tamaño más chico a propósito.
 */
body {
	margin: 0;
	font-family: var(--fuente);
	font-weight: 400;
	font-size: calc(17px * var(--esc-texto));
	line-height: 1.7;
	color: var(--texto);
	background: var(--blanco);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.idpp-wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
}
h1, h2, h3 { font-family: var(--fuente); margin: 0 0 .5em; font-weight: 600; }
/*
 * Párrafos justificados en todo el sitio, a pedido del cliente -- solo tiene
 * efecto visible en párrafos de más de una línea (la última línea de un
 * bloque `justify` no se estira), así que textos cortos de una sola línea
 * (leyendas, avisos, etiquetas) no se ven afectados.
 */
p { margin: 0 0 1em; text-align: justify; text-justify: inter-word; hyphens: auto; }
.uk-vis-hidden, .sr-only {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   FRANJA DE UTILIDAD
   ══════════════════════════════════════════════════════════════ */
.idpp-utility {
	background: var(--azul-900);
	color: var(--blanco);
}
.idpp-utility .idpp-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: calc(13px * var(--esc-texto));
	font-weight: 300;
}
.idpp-utility a { opacity: .9; }
.idpp-utility a:hover { opacity: 1; text-decoration: underline; }
.idpp-utility-contact { display: flex; flex-wrap: wrap; row-gap: 4px; gap: 20px; align-items: center; }
.idpp-utility-contact svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
/*
 * Nombre completo de la institución, sitewide, en la misma franja de
 * contacto de siempre -- el logo del header ya lo trae como subtítulo,
 * pero a 84px de alto (.idpp-brand img) queda casi ilegible; esto le da
 * una segunda aparición, esta vez a un tamaño que se lee. Pedido del
 * cliente: "que se note que es el sitio del IDPP".
 */
.idpp-utility-brand { font-weight: 500; opacity: 1; white-space: nowrap; }
.idpp-utility-divider { width: 1px; height: 13px; background: rgba(255, 255, 255, .28); flex-shrink: 0; }
.idpp-utility-social { display: flex; gap: 12px; }
.idpp-utility-social svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════════
   NAV PRINCIPAL
   ══════════════════════════════════════════════════════════════ */
.idpp-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.idpp-nav-bar {
	position: relative;
	background: var(--blanco);
	border-bottom: 1px solid var(--azul-100);
}
/*
 * El menú vive en la misma fila que el logo (antes tenía su propia
 * franja abajo, con línea divisoria) -- pedido del cliente para que todo
 * el header quede a un solo nivel. Usa el mismo `.idpp-wrap` de 1180px
 * que el resto del sitio a propósito -- un ancho propio más generoso se
 * probó primero, pero dejaba el logo desalineado contra la franja de
 * contacto de arriba (que sí usa el ancho normal). Para que el menú
 * completo quepa en esos 1180px junto al logo grande, hizo falta apretar
 * bastante el espaciado (ver los `gap` de abajo) y un quiebre propio más
 * bajo que el de antes (1200px en vez de 1260px, ver RESPONSIVE) -- el
 * resto del sitio sigue cambiando de layout recién a los 900px.
 */
.idpp-nav-bar-row {
	display: flex;
	align-items: center;
	/*
	 * space-between: logo pegado a la izquierda (alineado con el texto de
	 * la franja de contacto de arriba) y el bloque compacto de menú +
	 * ícono de buscar pegado a la derecha (alineado con los íconos de
	 * redes de esa misma franja) -- mismo patrón que ya usa
	 * `.idpp-utility .idpp-wrap`, a pedido del cliente. El menú en sí no
	 * se estira (`.idpp-nav-search-wrap` en `flex: 0 0 auto`, abajo): el
	 * espacio libre de pantallas anchas cae en medio, entre el logo y el
	 * menú, igual que en la franja de arriba.
	 */
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
	gap: 14px;
}
/* Envuelve el menú y el buscador para que el buscador (ver más abajo)
   pueda posicionarse encima de esta caja completa -- "se sobrepone
   sobre el menú" en vez de empujarlo o abrirse en su propia fila.
   `flex: 0 0 auto` (no `1 1 auto`): no debe crecer para llenar la fila,
   solo ocupar el espacio de su propio contenido, pegado al logo. */
.idpp-nav-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	flex: 0 0 auto;
	min-width: 0;
}
/* Botón de hamburguesa: solo existe visualmente abajo de 900px (ver
   RESPONSIVE) -- en escritorio el menú ya cabe expandido en la barra. */
.idpp-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--azul-100);
	border-radius: 4px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	color: var(--azul-900);
	cursor: pointer;
	flex-shrink: 0;
}
.idpp-nav-toggle svg { width: 20px; height: 20px; }
.idpp-nav-toggle-icon-close { display: none; }
.idpp-nav-bar.is-nav-open .idpp-nav-toggle-icon-open { display: none; }
.idpp-nav-bar.is-nav-open .idpp-nav-toggle-icon-close { display: block; }
.idpp-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.idpp-brand img { height: 104px; width: auto; flex-shrink: 0; }
/*
 * Vuelta al wordmark como texto HTML real (no parte del PNG del escudo) --
 * el cliente pidió regresar a este formato: permite agrandar/legibilizar
 * "IDPP" y el nombre completo sin tener que regenerar una imagen cada vez.
 */
.idpp-brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.idpp-brand-text b { font-weight: 700; font-size: 63px; line-height: 1.15; color: var(--azul-900); letter-spacing: -.01em; }
.idpp-brand-text small { display: block; max-width: 190px; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--azul-600); }
.idpp-nav {
	list-style: none;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.idpp-nav > li { position: relative; }
.idpp-nav > li > a {
	display: block;
	font-size: calc(13px * var(--esc-texto));
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--azul-900);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.idpp-nav > li > a:hover { border-bottom-color: var(--azul-400); }
.idpp-nav > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}
.idpp-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: 100%;
	left: -18px;
	min-width: 300px;
	max-width: 360px;
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	border-radius: 4px;
	box-shadow: 0 12px 28px rgba(16,36,63,.12);
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* El submenú del último elemento (Biblioteca y prensa) se alinea a su borde derecho: abriendo hacia la derecha se salía de la pantalla y, aun oculto,
   alargaba la página y ponía una barra de desplazamiento horizontal (1 px a 1440, ~120 px a 1201 y 19 px a 1440 con la letra más grande). */
.idpp-nav > li:last-child > .sub-menu { left: auto; right: -18px; }
.idpp-nav > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.idpp-nav .sub-menu a {
	display: block;
	padding: 8px 20px;
	font-size: calc(13px * var(--esc-texto));
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--azul-700);
	line-height: 1.4;
}
.idpp-nav .sub-menu a:hover { background: var(--azul-025); color: var(--azul-900); }

/*
 * Submenús en dos columnas -- Institución y Servicios, a pedido del cliente
 * a partir del sitio viejo (que los mostraba en dos y tres columnas
 * respectivamente; acá se dejaron los dos en dos, pedido explícito). No es
 * un cambio genérico a todos los submenús: solo estos dos ítems del menú
 * llevan la clase `idpp-submenu-cols`, agregada por WP-CLI directo en la
 * base de datos del menú (`wp menu item update 14/15 --classes=...`), no
 * en el tema -- mismo mecanismo que ya se usó para reubicar "Convocatorias"
 * bajo "Procesos". Los demás submenús (Información Pública, Cobertura,
 * Biblioteca) siguen en una sola columna, sin tocar.
 *
 * Gated a `min-width: 1201px` -- el mismo quiebre en el que el menú
 * colapsa a acordeón vertical (ver RESPONSIVE): abajo de eso el submenú ya
 * pasa a `position: static; width: 100%` para el acordeón en línea, así que
 * el `column-count` de acá no necesita un reset aparte, simplemente no
 * existe fuera de este rango.
 */
@media (min-width: 1201px) {
	.idpp-nav > li.idpp-submenu-cols > .sub-menu {
		min-width: 560px;
		max-width: 620px;
		column-count: 2;
		column-gap: 4px;
		padding: 10px 8px;
	}
	.idpp-nav > li.idpp-submenu-cols > .sub-menu > li {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}
}

/*
 * Buscador del header: ícono siempre visible; al hacer clic, la caja se
 * abre superpuesta encima de todo el menú (no lo empuja ni ocupa fila
 * propia) -- pedido explícito del cliente. `position: relative` en el
 * botón lo mantiene clicable por encima de la caja abierta (ver
 * `.idpp-nav-search-wrap .idpp-search-form` más abajo).
 */
.idpp-search-toggle {
	position: relative;
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 6px;
	color: var(--azul-700);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.idpp-search-toggle svg { width: 21px; height: 21px; }
.idpp-search-toggle-icon-close { display: none; }
.idpp-nav-search-wrap.is-search-open .idpp-search-toggle-icon-open { display: none; }
.idpp-nav-search-wrap.is-search-open .idpp-search-toggle-icon-close { display: block; }
.idpp-nav-search-wrap .idpp-search-form {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	width: auto;
	padding-right: 46px;
	background: var(--blanco);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, visibility .15s;
}
.idpp-nav-search-wrap.is-search-open .idpp-search-form {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.idpp-nav-search-wrap.is-search-open .idpp-nav {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.idpp-nav-search-wrap .idpp-search-input { height: 44px; }
/* Botón de enviar del buscador del header, con el ícono a la izquierda
   -- misma posición que el ícono decorativo del resto de buscadores del
   sitio (ver bloque "CAJA DE BUSCADOR" más abajo), pero clicable porque
   este buscador sí es un envío de formulario real, no un filtro en vivo. */
.idpp-search-submit-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background: none;
	border: none;
	padding: 0;
	color: var(--azul-400);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.idpp-search-submit-icon svg { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════════
   CAJA DE BUSCADOR -- formato único para todas las cajas de búsqueda del
   sitio (header, Biblioteca/Marco Normativo/Sedes, Noticias, Información
   Pública, Mapa de Sedes/Encuentra tu sede), a pedido del usuario: antes
   había dos estilos distintos (subrayado simple vs. caja con borde e
   ícono a la izquierda) según qué página se hubiera construido primero.
   Se unificó al estilo de caja, que es el que prefirió. Cada selector
   conserva aparte su propio ancho/margen (ver más abajo, junto a cada
   página), porque unos vive en línea junto a pestañas y otros solos
   sobre su propio renglón.
   ══════════════════════════════════════════════════════════════ */
.idpp-biblioteca-search,
.idpp-noticias-listado-search,
.idpp-categorias-buscador,
.idpp-mapa-buscador,
.idpp-search-form {
	position: relative;
}
.idpp-biblioteca-search svg,
.idpp-noticias-listado-search svg,
.idpp-categorias-buscador svg,
.idpp-mapa-buscador svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--azul-400);
	pointer-events: none;
}
.idpp-biblioteca-search input,
.idpp-noticias-listado-search input,
.idpp-categorias-buscador input,
.idpp-mapa-buscador input,
.idpp-search-input {
	width: 100%;
	padding: 12px 16px 12px 42px;
	border: 1.5px solid var(--azul-100);
	border-radius: 4px;
	font-family: inherit;
	font-size: calc(15px * var(--esc-texto));
	color: var(--azul-900);
	background: var(--blanco);
}
.idpp-biblioteca-search input:focus,
.idpp-noticias-listado-search input:focus,
.idpp-categorias-buscador input:focus,
.idpp-mapa-buscador input:focus,
.idpp-search-input:focus {
	outline: none;
	border-color: var(--azul-400);
}
.idpp-biblioteca-search input::placeholder,
.idpp-noticias-listado-search input::placeholder,
.idpp-categorias-buscador input::placeholder,
.idpp-mapa-buscador input::placeholder,
.idpp-search-input::placeholder {
	color: var(--azul-100);
}

/* ══════════════════════════════════════════════════════════════
   RESULTADOS DE BUSQUEDA
   ══════════════════════════════════════════════════════════════ */
.idpp-search-results { padding: 64px 0 96px; min-height: 50vh; background: var(--azul-075); }
.idpp-search-results h1 { font-size: 26px; font-weight: 600; }
.idpp-search-list { display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
.idpp-search-item { padding-bottom: 24px; border-bottom: 1px solid var(--azul-100); }
.idpp-search-item h3 { font-size: calc(18px * var(--esc-texto)); margin-bottom: 8px; }
.idpp-search-item h3 a { color: var(--azul-700); }
.idpp-search-item h3 a:hover { text-decoration: underline; }
.idpp-search-item p { font-size: calc(14.5px * var(--esc-texto)); color: var(--azul-700); margin: 0; }
.idpp-search-empty p { font-size: calc(15px * var(--esc-texto)); color: var(--azul-700); max-width: 60ch; margin-bottom: 24px; }

/* ══════════════════════════════════════════════════════════════
   HEADER FUSIONADO CON EL HERO -- solo Home, solo escritorio (pedido del
   cliente). `idpp-header-overlay` la agrega header.php únicamente en
   is_front_page(); en páginas interiores no existe nada oscuro detrás del
   header como para que se lea transparente, así que se quedan con el
   header sólido de siempre sin tocar nada.

   Todo el bloque vive bajo `min-width: 1201px` (mismo quiebre que ya usa
   el menú para colapsar a hamburguesa) a propósito: en móvil el hero
   real ya viene ajustado al límite de alto (ver el bug de la insignia
   tapando el botón del hero, corregido antes) y los íconos del header
   son objetivos de toque chicos -- mejor que ahí sean siempre sólidos y
   legibles en vez de depender de qué tan oscura salga la foto recortada
   en esa franja. Por debajo de 1201px estas reglas no existen, así que
   el header cae solo de vuelta a sus valores sin condición (sticky,
   fondo blanco, texto azul-900) sin necesitar un override aparte.

   Mecanismo: `.idpp-site-header` pasa de `sticky` a `fixed` -- al salir
   del flujo normal, el hero (que sigue justo después en el HTML) sube a
   ocupar tambien el espacio que el header dejó libre, y la foto queda
   detrás del header en vez de empezar más abajo. El header en sí queda
   transparente y su texto en blanco hasta que `is-header-solid` (clase
   en <body>, agregada por scroll en footer.php cuando el hero ya quedó
   completamente arriba del header) lo devuelve a su aspecto normal --
   solo cambian colores con `transition`, nunca el tipo de `position`,
   para no generar un salto visual al cruzar el punto de scroll.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1201px) {
	.idpp-header-overlay .idpp-site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	.idpp-header-overlay .idpp-utility,
	.idpp-header-overlay .idpp-nav-bar {
		background: transparent;
		border-bottom-color: transparent;
		transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
	}
	.idpp-header-overlay .idpp-brand-text b,
	.idpp-header-overlay .idpp-brand-text small,
	.idpp-header-overlay .idpp-nav > li > a,
	.idpp-header-overlay .idpp-search-toggle {
		color: var(--blanco);
		transition: color .25s ease;
	}
	/*
	 * Los submenús desplegables ya traen su propio fondo blanco sólido (ver
	 * NAV PRINCIPAL más arriba) -- se abren igual de legibles sobre la foto
	 * sin necesitar ningún cambio acá. La caja del buscador es la
	 * excepción: su fondo blanco (`.idpp-nav-search-wrap .idpp-search-form`,
	 * también en NAV PRINCIPAL) queda DEBAJO del propio botón de
	 * abrir/cerrar (`.idpp-search-toggle`, con `position: relative` para
	 * quedar clicable por encima) -- si ese botón se queda en blanco (regla
	 * de arriba) la X de cerrar se pierde contra su propio fondo blanco
	 * recién abierto. Bug real reportado por el usuario, no solo una
	 * hipótesis: se vuelve a oscurecer apenas el buscador está abierto,
	 * sin esperar a que el header pase a `is-header-solid`.
	 */
	.idpp-header-overlay .idpp-nav-search-wrap.is-search-open .idpp-search-toggle {
		color: var(--azul-700);
	}

	/* Ancho extra en el hero para que la foto suba detrás del header sin
	   mover ni un pixel el texto/los botones -- ver nota de cálculo en
	   BITACORA.md. El mismo alto (172px, la altura real medida del
	   header) se suma al alto mínimo del hero Y a su padding superior, así
	   que el espacio disponible para centrar el contenido no cambia: el
	   texto queda exactamente donde está hoy, solo que ahora hay foto
	   visible por detrás del header en vez del corte blanco de siempre. */
	.idpp-header-overlay .idpp-hero-slides { min-height: calc(62vh + 172px); }
	.idpp-header-overlay .idpp-hero-slide { padding-top: calc(110px + 172px); }

	.idpp-header-overlay.is-header-solid .idpp-utility {
		background: var(--azul-900);
	}
	.idpp-header-overlay.is-header-solid .idpp-nav-bar {
		background: var(--blanco);
		border-bottom-color: var(--azul-100);
		box-shadow: 0 2px 10px rgba(16,36,63,.08);
	}
	.idpp-header-overlay.is-header-solid .idpp-brand-text b,
	.idpp-header-overlay.is-header-solid .idpp-nav > li > a {
		color: var(--azul-900);
	}
	.idpp-header-overlay.is-header-solid .idpp-brand-text small {
		color: var(--azul-600);
	}
	.idpp-header-overlay.is-header-solid .idpp-search-toggle {
		color: var(--azul-700);
	}
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.idpp-hero {
	position: relative;
	overflow: hidden;
}
/* Cambio de diapositiva sin destello (2026-09-25). Antes cada diapositiva entera se desvanecía y la saliente pasaba a
   visibility:hidden al instante, así que por un momento no había foto y se veía el fondo blanco de la página
   (medido: 98.8 % de la zona clara en el primer cuadro). Ahora:
   · el contenedor tiene una base azul-950, así que nunca asoma el blanco;
   · la foto entrante aparece por encima de la saliente, que sigue opaca hasta que la entrante termina (fundido cruzado
     real, sin bajón de luminosidad en medio);
   · el texto saliente se apaga rápido y el entrante aparece cuando la foto ya casi cambió, para que no se encimen. */
.idpp-hero-slides {
	position: relative;
	min-height: 62vh;
	background: var(--azul-950);
}
.idpp-hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: 110px 0 80px;
	visibility: hidden;
	transition: visibility 0s linear 1.1s;
}
.idpp-hero-slide.is-active {
	visibility: visible;
	z-index: 1;
	transition: visibility 0s;
}
.idpp-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity 0s linear 1.1s;
}
.idpp-hero-slide.is-active .idpp-hero-bg {
	opacity: 1;
	transition: opacity 1.1s ease-in-out;
}
.idpp-hero-slide .idpp-wrap {
	opacity: 0;
	transition: opacity .35s ease;
}
.idpp-hero-slide.is-active .idpp-wrap {
	opacity: 1;
	transition: opacity .6s ease .5s;
}
@media (prefers-reduced-motion: reduce) {
	.idpp-hero-slide, .idpp-hero-slide.is-active,
	.idpp-hero-bg, .idpp-hero-slide.is-active .idpp-hero-bg,
	.idpp-hero-slide .idpp-wrap, .idpp-hero-slide.is-active .idpp-wrap { transition: none; }
}
.idpp-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.62) saturate(.85);
}
.idpp-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(14,31,54,.85) 0%, rgba(14,31,54,.68) 55%, rgba(14,31,54,.52) 100%);
}
.idpp-hero-content {
	position: relative;
	z-index: 1;
	max-width: 700px;
}
.idpp-hero-badge {
	position: absolute;
	right: 24px;
	bottom: 74px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--azul-400);
	color: var(--blanco);
	font-size: calc(13px * var(--esc-texto));
	font-weight: 500;
	padding: 11px 18px;
	border-radius: 30px;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.idpp-hero-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.idpp-hero-nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}
.idpp-hero-arrow {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.4);
	color: var(--blanco);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.idpp-hero-arrow svg { width: 16px; height: 16px; }
.idpp-hero-arrow:hover { background: rgba(255,255,255,.24); }
.idpp-hero-dots { display: flex; gap: 8px; }
.idpp-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,.4);
	border: none;
	cursor: pointer;
	padding: 0;
}
.idpp-hero-dot.is-active { background: var(--blanco); width: 22px; border-radius: 4px; }
.idpp-hero-quote {
	font-size: calc(15px * var(--esc-texto));
	font-weight: 500;
	color: var(--azul-100);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 10px;
}
.idpp-hero h1 {
	font-size: 46px;
	line-height: 1.12;
	letter-spacing: -.01em;
	margin-bottom: 22px;
	text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.idpp-hero h1 .w-light { font-weight: 300; color: rgba(255,255,255,.8); }
.idpp-hero h1 .w-bold { font-weight: 800; color: var(--blanco); }
.idpp-hero-lead {
	font-size: calc(16.5px * var(--esc-texto));
	text-shadow: 0 1px 10px rgba(0,0,0,.4);
	color: rgba(255,255,255,.82);
	max-width: 46ch;
	margin-bottom: 28px;
}
.idpp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--azul-400);
	color: var(--blanco);
	font-weight: 500;
	font-size: calc(14px * var(--esc-texto));
	padding: 13px 26px;
	border-radius: 3px;
	transition: background .15s ease;
}
.idpp-btn:hover { background: var(--azul-600); }
.idpp-btn svg { width: 14px; height: 14px; }
.idpp-btn-ghost {
	background: transparent;
	color: var(--blanco);
	border: 1.5px solid rgba(255,255,255,.55);
	margin-left: 10px;
}
.idpp-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--blanco); }

/* ══════════════════════════════════════════════════════════════
   INTRO / QUE ES EL IDPP
   ══════════════════════════════════════════════════════════════ */
.idpp-intro {
	background: var(--azul-075);
	padding: 64px 0;
}
.idpp-intro .idpp-wrap {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 56px;
	align-items: start;
}
.idpp-intro h2 { font-size: 28px; font-weight: 600; color: var(--azul-900); }
.idpp-intro-body p { font-size: calc(17px * var(--esc-texto)); color: var(--azul-700); }
.idpp-intro-body a { color: var(--azul-700); font-weight: 500; border-bottom: 1.5px solid var(--azul-400); }

/* ══════════════════════════════════════════════════════════════
   SERVICIOS ESPECIALIZADOS (antes "Accesos rápidos" -- reemplazada porque
   la mitad de sus tarjetas apuntaban a "#" o al destino equivocado, y no
   tenía relación real con el menú "Servicios". Ahora muestra las 6
   coordinaciones reales que no aparecen ya en "Atención al usuario"
   arriba, en vez de una mezcla de trámites, documentos e información
   institucional.)

   Fondos de esta sección hacia abajo alternan a propósito para que cada
   una se distinga de la siguiente sin hacer scroll para notarlo: blanco
   (Encuentra tu sede) → azul-075 (esta) → azul-150 (Últimas noticias) →
   azul-075 (El IDPP en redes). Noticias y Redes no pueden bajar a blanco
   sin más: sus tarjetas (.idpp-noticia-card, .idpp-redes-card) son blancas
   con sombra (desde 2026-09-25 también las de Servicios: pictograma, título,
   texto y enlace, como las tarjetas de «Reportes» de idpp03) y dependen de un
   fondo de sección con algo de color para
   notarse -- por eso Noticias usa azul-150 (un paso más saturado que
   azul-075) en vez de blanco, y así no queda igual a Servicios ni a Redes.
   ══════════════════════════════════════════════════════════════ */
.idpp-accesos { padding: 72px 0; background: var(--azul-075); }
.idpp-servicios-intro { font-size: calc(17px * var(--esc-texto)); color: var(--azul-700); max-width: 70ch; margin-top: 8px; }
/* Único estilo de encabezado de sección del sitio (h1/h2 de página o
   subsección): sin subrayado, sin mayúsculas forzadas. No reintroducir
   la variante subrayada (existió como .idpp-section-head-underline y se
   quitó a pedido del usuario, que la vio inconsistente contra esta). */
.idpp-section-head { margin-bottom: 36px; }
.idpp-section-head h2 { font-size: 30px; font-weight: 600; }
.idpp-section-head .idpp-eyebrow {
	display: block;
	font-size: calc(12.5px * var(--esc-texto));
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--azul-400);
	margin-bottom: 8px;
}
.idpp-servicios-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 16px;
}
/* Tarjeta de servicio, con el diseño de las tarjetas de «Reportes y conjuntos de datos» de idpp03 (desde 2026-09-25): blanca, con
   radio y sombra suave, pictograma arriba, título, qué hace y un enlace al pie que empuja al fondo para alinear las tres de cada
   fila. Toda la tarjeta es el enlace. Al pasar el cursor sube 4 px (sombra de hover del sistema) y el pictograma 3 px. */
.idpp-card {
	display: flex;
	flex-direction: column;
	padding: 34px 32px 30px;
	background: var(--blanco);
	border-radius: 10px;
	box-shadow: 0 2px 14px rgba(16,36,63,.08);
	transition: transform .2s ease, box-shadow .2s ease;
}
.idpp-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(16,36,63,.09); }
.idpp-card:focus-visible { outline: 2px solid var(--azul-700); outline-offset: 3px; }
.idpp-card-pic { display: block; width: 76px; height: 76px; margin-bottom: 24px; }
.idpp-card-pic .idpp-pic { width: 100%; height: 100%; }
.idpp-card:hover .idpp-pic { transform: translateY(-3px); }
.idpp-card b { font-size: calc(22px * var(--esc-texto)); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--azul-900); margin-bottom: 10px; }
.idpp-card-desc { font-size: calc(17px * var(--esc-texto)); line-height: 1.55; color: var(--azul-700); }
.idpp-card .idpp-card-arrow {
	margin-top: auto;
	padding-top: 20px;
	font-size: calc(15px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-600);
}
.idpp-card:hover .idpp-card-arrow { color: var(--azul-900); text-decoration: underline; text-underline-offset: 4px; }

/* ══════════════════════════════════════════════════════════════
   PICTOGRAMAS - iconografía ilustrada bicolor del sistema de diseño (inc/pictogramas.php). Tres capas de la paleta por
   dibujo: trazo (currentColor), relleno tenue (--ic-f) y un acento (--ic-a); --ic-w es el «papel» de hojas y lentes.
   Sobre fondo oscuro se agrega .idpp-pic-oscuro. Son decorativos: siempre van con texto visible.
   ══════════════════════════════════════════════════════════════ */
.idpp-pic {
	display: block;
	width: 64px;
	height: 64px;
	color: var(--pictograma-trazo);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}
.idpp-pic .f { fill: var(--ic-f); }
.idpp-pic .a { fill: var(--ic-a); }
.idpp-pic .w { fill: var(--ic-w); }
.idpp-pic .sw { stroke: var(--blanco); }
.idpp-pic .ac { stroke: var(--ic-a); stroke-width: 1.8; }
.idpp-pic-oscuro {
	color: var(--pictograma-trazo-oscuro);
	--ic-f: var(--pictograma-relleno-oscuro);
	--ic-a: var(--pictograma-acento-oscuro);
	--ic-w: var(--pictograma-papel-oscuro);
}
@media (prefers-reduced-motion: reduce) {
	.idpp-card, .idpp-pic { transition: none; }
	.idpp-card:hover, .idpp-card:hover .idpp-pic { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   ATENCION AL USUARIO (coordinaciones reales)
   ══════════════════════════════════════════════════════════════ */
.idpp-atencion {
	background: linear-gradient(135deg, var(--azul-800), var(--azul-950));
	padding: 64px 0;
}
.idpp-atencion .idpp-section-head h2 { color: var(--blanco); }
.idpp-atencion .idpp-eyebrow { color: var(--azul-300); }
.idpp-atencion .idpp-enfoque-arrow { border-color: rgba(255, 255, 255, .3); color: var(--blanco); }
.idpp-atencion .idpp-enfoque-arrow:hover { background: var(--blanco); color: var(--azul-900); border-color: var(--blanco); }
/* .idpp-section-head-row es para secciones con carrusel de flechas ("El IDPP
   en redes", "Instituciones del sector justicia"); Atención al usuario dejó
   de necesitarla al convertirse en una cuadrícula de tarjetas fija, sin
   desplazamiento horizontal. */
.idpp-section-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}
.idpp-section-head-row .idpp-section-head { margin-bottom: 0; }
.idpp-enfoque-arrows { display: flex; gap: 10px; flex-shrink: 0; margin-bottom: 6px; }
.idpp-enfoque-arrow {
	background: transparent;
	border: 1px solid var(--azul-100);
	color: var(--azul-700);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.idpp-enfoque-arrow svg { width: 16px; height: 16px; }
.idpp-enfoque-arrow:hover { background: var(--azul-700); color: var(--blanco); border-color: var(--azul-700); }
.idpp-enfoque-track {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}
.idpp-enfoque-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 36px 20px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.idpp-enfoque-card:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .3);
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(4, 12, 26, .35);
}
.idpp-enfoque-icon {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: var(--blanco);
	color: var(--azul-700);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	transition: background .2s ease;
	animation: idpp-enfoque-float 3.2s ease-in-out infinite;
}
.idpp-enfoque-icon svg { width: 42px; height: 42px; }
.idpp-enfoque-card:hover .idpp-enfoque-icon { background: var(--azul-150); }
/* Vuelo continuo y sutil, con un poco de rotación para que no se sienta
   como un simple rebote vertical -- a pedido del usuario, que sintió los
   íconos demasiado estáticos. Cada tarjeta arranca en un punto distinto
   del ciclo (nth-child) para que las 5 no boten en perfecta sincronía,
   que se ve mecánico en vez de orgánico. */
@keyframes idpp-enfoque-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-7px) rotate(-3deg); }
}
.idpp-enfoque-card:nth-child(2) .idpp-enfoque-icon { animation-delay: .5s; }
.idpp-enfoque-card:nth-child(3) .idpp-enfoque-icon { animation-delay: 1s; }
.idpp-enfoque-card:nth-child(4) .idpp-enfoque-icon { animation-delay: 1.5s; }
.idpp-enfoque-card:nth-child(5) .idpp-enfoque-icon { animation-delay: 2s; }
@media (prefers-reduced-motion: reduce) {
	.idpp-enfoque-icon { animation: none; }
}
.idpp-enfoque-title {
	display: block;
	font-size: calc(16.5px * var(--esc-texto));
	font-weight: 600;
	color: var(--blanco);
	line-height: 1.3;
	margin-bottom: 10px;
}
.idpp-enfoque-desc {
	font-size: calc(13.5px * var(--esc-texto));
	color: var(--azul-150);
	line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   NOTICIAS
   ══════════════════════════════════════════════════════════════ */
.idpp-noticias { padding: 72px 0; background: var(--azul-150); }
.idpp-noticia-tag {
	font-size: calc(12px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-600);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 10px;
}
.idpp-noticia-fecha {
	font-size: calc(12.5px * var(--esc-texto));
	color: var(--azul-400);
	margin-top: 6px;
}

/* destacada */
.idpp-noticia-destacada {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: center;
	background: var(--blanco);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 18px rgba(16,36,63,.08);
	margin-bottom: 40px;
}
.idpp-noticia-destacada-foto { aspect-ratio: 4 / 3; }
.idpp-noticia-destacada-foto img { width: 100%; height: 100%; object-fit: cover; }
.idpp-noticia-destacada-video { aspect-ratio: 16 / 9; background: var(--azul-950); }
.idpp-noticia-destacada-video iframe { width: 100%; height: 100%; border: none; display: block; }
.idpp-noticia-destacada-texto { padding: 8px 32px 8px 0; }
.idpp-noticia-destacada-texto h3 { font-size: 24px; line-height: 1.32; font-weight: 600; margin-bottom: 12px; }
.idpp-noticia-destacada-texto p { font-size: calc(15px * var(--esc-texto)); color: var(--azul-700); margin-bottom: 4px; }
.idpp-noticia-destacada-texto .idpp-noticia-link { display: inline-block; margin-top: 14px; }
/* .idpp-noticia-link es un <button> aquí (abre el modal de galería), no un
   <a> -- se resetea la apariencia nativa de botón manteniendo el mismo
   texto-enlace que ya tenía. */
.idpp-noticia-link:hover { color: var(--azul-900); }

/* grid de 4 */
.idpp-noticias-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.idpp-noticia-card {
	background: var(--blanco);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(16,36,63,.08);
	display: flex;
	flex-direction: column;
}
.idpp-noticia-card-foto { aspect-ratio: 4 / 3; }
.idpp-noticia-card-foto img { width: 100%; height: 100%; object-fit: cover; }
.idpp-noticia-card-video { aspect-ratio: 16 / 9; background: var(--azul-950); }
.idpp-noticia-card-video iframe { width: 100%; height: 100%; border: none; display: block; }
.idpp-noticia-card-btn {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.idpp-noticia-card-btn:hover h3 { color: var(--azul-600); }
.idpp-noticia-card-texto { padding: 18px 20px 22px; }
.idpp-noticia-card h3 { font-size: calc(15.5px * var(--esc-texto)); line-height: 1.4; font-weight: 600; margin-bottom: 8px; transition: color .15s ease; }
.idpp-noticia-card p { font-size: calc(13px * var(--esc-texto)); color: var(--azul-700); margin-bottom: 0; }
.idpp-noticia-link { font-size: calc(13px * var(--esc-texto)); font-weight: 500; color: var(--azul-700); }
.idpp-noticias-footer { margin-top: 40px; text-align: center; }
.idpp-btn-ghost-dark {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--azul-700);
	color: var(--azul-700);
	font-weight: 500;
	font-size: calc(14px * var(--esc-texto));
	padding: 12px 24px;
	border-radius: 3px;
}
.idpp-btn-ghost-dark:hover { background: var(--azul-025); }

/* ══════════════════════════════════════════════════════════════
   EL IDPP EN REDES
   ══════════════════════════════════════════════════════════════ */
.idpp-redes { padding: 72px 0; background: var(--azul-075); }
.idpp-redes-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.idpp-redes-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	color: var(--azul-600);
	font-family: var(--fuente);
	font-size: calc(13.5px * var(--esc-texto));
	font-weight: 500;
	padding: 10px 18px;
	border-radius: 30px;
	cursor: pointer;
}
.idpp-redes-tab svg { width: 15px; height: 15px; }
.idpp-redes-tab:hover { border-color: var(--azul-400); color: var(--azul-700); }
.idpp-redes-tab.is-active { background: var(--azul-700); border-color: var(--azul-700); color: var(--blanco); }
.idpp-redes-panel { display: none; }
.idpp-redes-panel.is-active { display: block; }
.idpp-redes-fb-card {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--blanco);
	border-radius: 4px;
	padding: 48px;
}
/* El embed oficial de TikTok (blockquote + embed.js) trae su propio ancho
   fijo -- solo hace falta centrarlo, el resto del tamaño lo resuelve el
   iframe que TikTok inyecta dentro del blockquote. */
.idpp-redes-tiktok { display: flex; justify-content: center; }
.idpp-redes-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(320px, 1fr);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.idpp-redes-track::-webkit-scrollbar { display: none; }
.idpp-redes-card {
	background: var(--blanco);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
}
.idpp-redes-foto { aspect-ratio: 4 / 3; }
.idpp-redes-foto img { width: 100%; height: 100%; object-fit: cover; }
.idpp-redes-video { aspect-ratio: 16 / 9; background: var(--azul-950); }
.idpp-redes-video iframe { width: 100%; height: 100%; border: none; display: block; }
.idpp-redes-card > *:not(.idpp-redes-foto):not(.idpp-redes-video) { padding-left: 24px; padding-right: 24px; }
.idpp-redes-card > .idpp-redes-platform { padding-top: 20px; }
.idpp-redes-card > .idpp-redes-link { padding-bottom: 24px; display: inline-block; }
.idpp-redes-platform {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: calc(12.5px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-600);
	margin-bottom: 16px;
}
.idpp-redes-platform svg { width: 16px; height: 16px; }
.idpp-redes-quote {
	font-size: calc(15px * var(--esc-texto));
	line-height: 1.55;
	color: var(--azul-900);
	margin-bottom: 18px;
	flex-grow: 1;
}
.idpp-redes-tag {
	font-size: calc(11.5px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-600);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 6px;
}
.idpp-redes-fecha { font-size: calc(12.5px * var(--esc-texto)); color: var(--azul-400); margin-bottom: 14px; }
.idpp-redes-link { font-size: calc(13px * var(--esc-texto)); font-weight: 500; color: var(--azul-700); }

/* ══════════════════════════════════════════════════════════════
   INSTITUCIONES DEL SECTOR JUSTICIA
   ══════════════════════════════════════════════════════════════ */
.idpp-instituciones { padding: 72px 0; background: var(--blanco); }
.idpp-instituciones-intro { font-size: calc(17px * var(--esc-texto)); color: var(--azul-700); max-width: 60ch; margin-top: 8px; }
.idpp-instituciones-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(200px, 1fr);
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
	margin-top: 32px;
}
.idpp-instituciones-track::-webkit-scrollbar { display: none; }
.idpp-instituciones-card {
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 28px 20px;
	scroll-snap-align: start;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.idpp-instituciones-card:hover { border-color: var(--azul-400); box-shadow: 0 8px 24px rgba(16,36,63,.08); }
.idpp-instituciones-logo { display: flex; align-items: center; justify-content: center; height: 84px; width: 100%; }
.idpp-instituciones-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.idpp-instituciones-logo-tile { border-radius: 4px; overflow: hidden; }
.idpp-instituciones-logo-tile img { max-height: none; height: 100%; }
.idpp-instituciones-nombre { font-size: calc(13.5px * var(--esc-texto)); font-weight: 500; color: var(--azul-700); text-align: center; line-height: 1.3; }

/* ══════════════════════════════════════════════════════════════
   HOME: "Encuentra tu sede" -- mismo mapa Leaflet + OpenStreetMap real de
   /mapa-de-sedes/ (mismos datos, mismos pines), en una versión más baja
   para el Home, con buscador de sugerencias que centra el mapa en la sede
   elegida en vez de filtrar los pines (todas las sedes se dejan visibles,
   para que el mapa siga comunicando cobertura nacional).
   ══════════════════════════════════════════════════════════════ */
.idpp-home-mapa { padding: 72px 0; background: var(--blanco); }
.idpp-home-mapa-intro { font-size: calc(17px * var(--esc-texto)); color: var(--azul-700); max-width: 70ch; margin-top: 8px; }
/* Aspecto (borde, ícono, foco) definido junto al resto de buscadores del
   sitio, en el bloque "CAJA DE BUSCADOR" -- acá solo el ancho/margen
   propio de este buscador, que vive solo en su propio renglón. */
.idpp-mapa-buscador { max-width: 480px; margin: 24px 0 20px; }
.idpp-mapa-sugerencias {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	border-radius: 4px;
	box-shadow: 0 10px 28px rgba(16,36,63,.14);
	max-height: 280px;
	overflow-y: auto;
}
.idpp-mapa-sugerencias[hidden] { display: none; }
.idpp-mapa-sugerencia {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 10px 14px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--azul-025);
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.idpp-mapa-sugerencia:last-child { border-bottom: none; }
.idpp-mapa-sugerencia:hover { background: var(--azul-025); }
.idpp-mapa-sugerencia strong { font-size: calc(14px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); }
.idpp-mapa-sugerencia span { font-size: calc(12.5px * var(--esc-texto)); color: var(--azul-400); }
.idpp-mapa-sugerencias-vacio { font-size: calc(13.5px * var(--esc-texto)); color: var(--azul-700); padding: 14px; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   BIBLIOTECA DIGITAL DEL DEFENSOR
   ══════════════════════════════════════════════════════════════ */
.idpp-biblioteca { padding: 64px 0 88px; background: var(--azul-075); }
.idpp-biblioteca-intro { font-size: calc(17px * var(--esc-texto)); color: var(--azul-700); max-width: 70ch; margin-top: 8px; }
.idpp-biblioteca-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 24px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--azul-100);
}
.idpp-biblioteca-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.idpp-biblioteca-tab {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	color: var(--azul-600);
	font-family: inherit;
	font-size: calc(13.5px * var(--esc-texto));
	font-weight: 500;
	border-radius: 30px;
	cursor: pointer;
}
.idpp-biblioteca-tab span { color: var(--azul-400); }
.idpp-biblioteca-tab:hover { border-color: var(--azul-400); color: var(--azul-700); }
.idpp-biblioteca-tab.is-active { background: var(--azul-700); border-color: var(--azul-700); color: var(--blanco); }
.idpp-biblioteca-tab.is-active span { color: var(--azul-100); }
/* Aspecto definido en el bloque "CAJA DE BUSCADOR" -- acá solo el ancho
   propio, porque este buscador vive en línea junto a las pestañas de
   categoría (usado por Biblioteca, Marco Normativo y Sedes Departamentales). */
.idpp-biblioteca-search { min-width: 240px; }
.idpp-biblioteca-count { font-size: calc(13px * var(--esc-texto)); color: var(--azul-400); margin: 20px 0 20px; }
.idpp-biblioteca-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}
.idpp-biblioteca-item {
	display: flex;
	align-items: stretch;
	gap: 14px;
	padding: 16px;
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	border-radius: 4px;
}
.idpp-biblioteca-item[hidden] { display: none; }
.idpp-biblioteca-thumb {
	width: 56px;
	height: 74px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--azul-025);
	border: 1px solid var(--azul-100);
	border-radius: 3px;
	overflow: hidden;
}
.idpp-biblioteca-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.idpp-biblioteca-thumb svg { width: 20px; height: 20px; color: var(--azul-400); }
.idpp-biblioteca-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.idpp-biblioteca-info { flex: 1 1 auto; margin-bottom: 12px; }
.idpp-biblioteca-tag {
	display: inline-block;
	font-size: calc(11px * var(--esc-texto));
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--azul-400);
	margin-bottom: 6px;
}
.idpp-biblioteca-info h3 { font-size: calc(14.5px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); line-height: 1.4; }
.idpp-biblioteca-actions { display: flex; gap: 8px; }
.idpp-biblioteca-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 1 1 auto;
	padding: 6px 10px;
	font-family: inherit;
	font-size: calc(12px * var(--esc-texto));
	font-weight: 500;
	line-height: 1.2;
	border-radius: 4px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.idpp-biblioteca-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.idpp-biblioteca-btn-ver {
	background: transparent;
	border: 1px solid var(--azul-100);
	color: var(--azul-600);
}
.idpp-biblioteca-btn-ver:hover { border-color: var(--azul-400); color: var(--azul-700); background: var(--azul-025); }
.idpp-biblioteca-btn-descargar {
	background: var(--azul-700);
	border: 1px solid var(--azul-700);
	color: var(--blanco);
}
.idpp-biblioteca-btn-descargar:hover { background: var(--azul-600); border-color: var(--azul-600); }
.idpp-biblioteca-empty { font-size: calc(15px * var(--esc-texto)); color: var(--azul-700); padding: 40px 0; text-align: center; }

/* Modal de previsualización (iframe al PDF real, visor nativo del navegador) */
body.idpp-modal-open { overflow: hidden; }
.idpp-pdf-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 28px; }
.idpp-pdf-modal[hidden] { display: none; }
.idpp-pdf-modal-backdrop { position: absolute; inset: 0; background: rgba(14, 31, 54, .75); }
.idpp-pdf-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(880px, 100%);
	height: min(88vh, 980px);
	background: var(--blanco);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(14, 31, 54, .35);
}
.idpp-pdf-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: var(--azul-025);
	border-bottom: 1px solid var(--azul-100);
	flex-shrink: 0;
}
.idpp-pdf-modal-title { font-size: calc(14px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idpp-pdf-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	color: var(--azul-600);
}
.idpp-pdf-modal-close:hover { background: var(--azul-100); color: var(--azul-900); }
.idpp-pdf-modal-close svg { width: 16px; height: 16px; }
.idpp-pdf-modal-body { flex: 1 1 auto; background: var(--azul-950); }
.idpp-pdf-modal-body iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 560px) {
	.idpp-pdf-modal { padding: 0; }
	.idpp-pdf-modal-panel { width: 100%; height: 100%; border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════
   CONVOCATORIAS
   ══════════════════════════════════════════════════════════════ */
.idpp-convocatorias { padding: 64px 0 88px; background: var(--azul-075); }
.idpp-convocatorias-intro { font-size: calc(17px * var(--esc-texto)); color: var(--azul-700); max-width: 70ch; margin-top: 8px; }
.idpp-convocatoria-card {
	background: var(--blanco);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(16,36,63,.06);
}
.idpp-convocatoria-foto { aspect-ratio: 16 / 6; }
.idpp-convocatoria-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idpp-convocatoria-body { padding: 36px 40px 8px; }
.idpp-convocatoria-fecha { font-size: calc(13px * var(--esc-texto)); font-weight: 500; color: var(--azul-400); }
.idpp-convocatoria-body h2 { font-size: 24px; font-weight: 600; color: var(--azul-900); margin: 6px 0 8px; }
.idpp-convocatoria-subtitulo { font-size: calc(16px * var(--esc-texto)); font-weight: 500; color: var(--azul-700); margin-bottom: 14px; }
.idpp-convocatoria-descripcion { font-size: calc(15.5px * var(--esc-texto)); color: var(--azul-700); max-width: 80ch; margin-bottom: 24px; }
.idpp-convocatoria-entrevistas { padding: 8px 40px 40px; }
.idpp-convocatoria-entrevistas h3 { font-size: calc(18px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); margin-bottom: 20px; }
.idpp-convocatoria-entrevistas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.idpp-convocatoria-video { aspect-ratio: 16 / 9; background: var(--azul-950); border-radius: 4px; overflow: hidden; }
.idpp-convocatoria-video iframe { width: 100%; height: 100%; border: none; display: block; }
.idpp-convocatoria-entrevistado { font-size: calc(13.5px * var(--esc-texto)); font-weight: 500; color: var(--azul-700); text-align: center; margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════
   MIGAS DE PAN
   ══════════════════════════════════════════════════════════════ */
.idpp-breadcrumbs { border-bottom: 1px solid var(--azul-100); background: var(--azul-025); }
.idpp-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 14px 0;
	font-size: calc(13px * var(--esc-texto));
}
.idpp-breadcrumbs li { display: flex; align-items: center; color: var(--azul-400); }
.idpp-breadcrumbs li:not(:first-child)::before { content: "/"; margin: 0 8px; color: var(--azul-100); }
.idpp-breadcrumbs a { color: var(--azul-600); }
.idpp-breadcrumbs a:hover { color: var(--azul-900); text-decoration: underline; }
.idpp-breadcrumbs [aria-current="page"] { color: var(--azul-900); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════
   ¿QUÉ ES EL IDPP? / MISIÓN / VISIÓN / VALORES
   ══════════════════════════════════════════════════════════════ */
.idpp-institucional { padding: 56px 0 88px; background: var(--azul-075); }
/* Fila ícono + texto: ícono circular a la izquierda, título y párrafo a
   la derecha — diagramación tomada de defensoria.gov.co (Atención al
   ciudadano), en vez de tarjetas con ícono arriba. */
.idpp-filas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; margin-top: 8px; }
.idpp-fila-icono { display: flex; align-items: flex-start; gap: 22px; }
.idpp-fila-icono-circulo {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--azul-700);
	color: var(--blanco);
	display: flex;
	align-items: center;
	justify-content: center;
}
.idpp-fila-icono-circulo svg { width: 26px; height: 26px; }
.idpp-fila-icono-texto h3 { font-size: calc(19px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); margin-bottom: 8px; }
.idpp-fila-icono-texto p { font-size: calc(17px * var(--esc-texto)); line-height: 1.75; color: var(--azul-700); margin: 0; }
.idpp-fila-icono-texto p + p { margin-top: 20px; }

/* Subsecciones dentro de una página institucional (¿Qué es el IDPP?, etc.) */
.idpp-institucional-seccion { margin-top: 56px; }
.idpp-institucional-seccion > p { font-size: calc(17px * var(--esc-texto)); line-height: 1.75; color: var(--azul-700); max-width: 70ch; margin-bottom: 24px; }

/* "¿Quiénes somos?" a la par del video institucional, en vez de uno
   arriba del otro */
.idpp-quienes-somos { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.idpp-video-institucional-frame { aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--azul-950); }
.idpp-video-institucional-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.idpp-video-institucional-caption { font-size: calc(13px * var(--esc-texto)); color: var(--azul-400); margin-top: 10px; }

/* Lista simple con check, para enumeraciones sin descripción propia
   (tipos de defensores, quién puede solicitar, a quiénes atendemos) */
.idpp-lista-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.idpp-lista-check li { position: relative; padding-left: 32px; font-size: calc(17px * var(--esc-texto)); color: var(--azul-700); line-height: 1.5; }
.idpp-lista-check svg { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; color: var(--azul-700); }

/* Variante en columnas, para listas largas de sedes/ubicaciones (Servicios) */
.idpp-lista-check-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }

/* ══════════════════════════════════════════════════════════════
   FORMULARIO DE SOLICITUD DE INFORMACIÓN PÚBLICA -- migrado del formulario
   ChronoForms del sitio viejo (idpp.gob.gt). El envío lo maneja
   idpp_solicitud_info_manejar_envio() en inc/solicitud-info-cpt.php.
   ══════════════════════════════════════════════════════════════ */
.idpp-solicitud-aviso {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	border-radius: 4px;
	font-size: calc(15px * var(--esc-texto));
	line-height: 1.6;
	margin-bottom: 28px;
}
.idpp-solicitud-aviso svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.idpp-solicitud-aviso-ok { background: #E6F4EA; color: #1E4620; }
.idpp-solicitud-aviso-error { background: #FCE8E6; color: #611A15; }

/* Honeypot anti-spam: existe en el DOM (un bot que llena todo sin mirar el
   CSS lo completa) pero invisible y fuera del tabulado para una persona
   real -- `display:none` no sirve porque algunos bots lo detectan y lo
   saltan a propósito. */
.idpp-solicitud-web {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.idpp-solicitud-form { max-width: 780px; }
.idpp-solicitud-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 24px;
	margin-bottom: 28px;
}
.idpp-solicitud-campo { display: flex; flex-direction: column; gap: 8px; }
.idpp-solicitud-campo-ancho { grid-column: 1 / -1; }
.idpp-solicitud-campo label { font-size: calc(14px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); }
.idpp-solicitud-requerido { color: var(--azul-400); font-weight: 400; }
.idpp-solicitud-campo input[type="text"],
.idpp-solicitud-campo input[type="email"],
.idpp-solicitud-campo input[type="tel"],
.idpp-solicitud-campo input[type="number"],
.idpp-solicitud-campo select,
.idpp-solicitud-campo textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--azul-100);
	border-radius: 4px;
	font-family: inherit;
	font-size: calc(15px * var(--esc-texto));
	color: var(--azul-900);
	background: var(--blanco);
}
.idpp-solicitud-campo textarea { resize: vertical; min-height: 100px; }
.idpp-solicitud-campo input:focus,
.idpp-solicitud-campo select:focus,
.idpp-solicitud-campo textarea:focus {
	outline: none;
	border-color: var(--azul-400);
}
.idpp-solicitud-radios { display: flex; gap: 24px; flex-wrap: wrap; }
.idpp-solicitud-radios label { display: flex; align-items: center; gap: 8px; font-size: calc(15px * var(--esc-texto)); font-weight: 400; color: var(--azul-700); }
.idpp-solicitud-radios input { width: 16px; height: 16px; accent-color: var(--azul-400); }
.idpp-solicitud-form .idpp-btn { border: none; cursor: pointer; font-size: calc(15px * var(--esc-texto)); }

/* Párrafo de intro bajo un H1 institucional (Cobertura, etc.) */
.idpp-institucional-intro-texto { font-size: calc(17px * var(--esc-texto)); line-height: 1.75; color: var(--azul-700); max-width: 70ch; margin-top: 10px; }
.idpp-institucional-intro-texto a { color: var(--azul-700); font-weight: 500; border-bottom: 1.5px solid var(--azul-400); }

/* Tarjetas de equipo/autoridades (Consejo IDPP, Autoridades IDPP): misma
   tarjeta con foto + texto que .idpp-noticia-card, foto rectangular (no
   circular) recortada desde arriba para no cortar el rostro en los retratos
   verticales de cuerpo entero que entrega el sitio viejo. */
.idpp-equipo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.idpp-equipo-card {
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	border-radius: 4px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 2px 14px rgba(16,36,63,.06);
}
.idpp-equipo-foto { aspect-ratio: 3 / 4; background: var(--azul-025); }
.idpp-equipo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.idpp-equipo-texto { padding: 16px 18px 20px; }
.idpp-equipo-card h3 { font-size: calc(16px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); margin-bottom: 6px; line-height: 1.3; }
.idpp-equipo-cargo { display: block; font-size: calc(12.5px * var(--esc-texto)); color: var(--azul-400); text-transform: uppercase; letter-spacing: .04em; font-weight: 500; line-height: 1.4; }

/* Acordeón de categorías (Artículo 10, Estadísticas, Transparencia
   Presupuestaria): árboles de cientos de documentos donde el usuario debe
   poder abrir solo la categoría que le interesa, en vez de navegar página
   por página como en el sitio viejo. Cerrado por defecto; el buscador
   global cambia a una vista plana de resultados en toda la sección. */
/* Aspecto definido en el bloque "CAJA DE BUSCADOR" -- acá solo el ancho/
   margen propio, porque este buscador vive solo en su propio renglón. */
.idpp-categorias-buscador { max-width: 480px; margin: 0 0 32px; }

.idpp-categoria { border-bottom: 1px solid var(--azul-100); }
.idpp-categoria:first-of-type { border-top: 1px solid var(--azul-100); }
.idpp-categoria-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 4px;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.idpp-categoria-header:hover .idpp-categoria-titulo { color: var(--azul-600); }
.idpp-categoria-titulo { font-size: calc(16.5px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); line-height: 1.4; transition: color .15s ease; }
.idpp-categoria-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.idpp-categoria-count { font-size: calc(13px * var(--esc-texto)); color: var(--azul-400); white-space: nowrap; }
.idpp-categoria-chevron { width: 18px; height: 18px; color: var(--azul-400); transition: transform .2s ease; flex-shrink: 0; }
.idpp-categoria.is-open .idpp-categoria-chevron { transform: rotate(180deg); }
.idpp-categoria-body { padding: 4px 4px 32px; }
.idpp-categoria-body[hidden] { display: none; }
.idpp-categoria-vacio { font-size: calc(15px * var(--esc-texto)); color: var(--azul-700); line-height: 1.7; max-width: 70ch; padding: 4px 0 8px; }

.idpp-subcategoria { margin-top: 28px; }
.idpp-subcategoria:first-child { margin-top: 0; }
.idpp-subcategoria-titulo { font-size: calc(14px * var(--esc-texto)); font-weight: 600; color: var(--azul-700); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.idpp-subcategoria .idpp-subcategoria { margin-top: 18px; padding-left: 18px; border-left: 2px solid var(--azul-100); }
.idpp-subcategoria .idpp-subcategoria .idpp-subcategoria-titulo { font-size: calc(12.5px * var(--esc-texto)); text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--azul-400); }

/* Acordeón por año (Artículo 10 solamente, $colapsar_anios_recientes en
   inc/informacion-publica-render.php): mismo lenguaje visual que
   .idpp-subcategoria-titulo (texto pequeño en mayúsculas) más el patrón de
   cabecera clicable + contador + chevron que ya usa
   .idpp-noticias-listado-mes-header para "meses anteriores" -- el año más
   reciente abre solo, los anteriores quedan colapsados hasta que se hace
   clic. */
.idpp-subcategoria-anio { border-bottom: 1px solid var(--azul-100); }
.idpp-subcategoria-anio:first-child { border-top: 1px solid var(--azul-100); }
.idpp-subcategoria-anio-header {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 4px;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.idpp-subcategoria-anio-header:hover .idpp-subcategoria-anio-titulo { color: var(--azul-900); }
.idpp-subcategoria-anio-titulo {
	font-size: calc(14px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-700);
	text-transform: uppercase;
	letter-spacing: .04em;
	transition: color .15s ease;
}
.idpp-subcategoria-anio-count { font-size: calc(13px * var(--esc-texto)); color: var(--azul-400); margin-left: auto; white-space: nowrap; }
.idpp-subcategoria-anio-chevron { width: 16px; height: 16px; color: var(--azul-400); transition: transform .2s ease; flex-shrink: 0; }
.idpp-subcategoria-anio.is-open .idpp-subcategoria-anio-chevron { transform: rotate(180deg); }
.idpp-subcategoria-anio-body { padding: 4px 4px 28px; }
.idpp-subcategoria-anio-body[hidden] { display: none; }

.idpp-categorias-resultados[hidden] { display: none; }
.idpp-categorias-resultados-count { font-size: calc(13px * var(--esc-texto)); color: var(--azul-400); margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════════════
   NOTICIAS: cuadrícula de tarjetas con foto (mismo patrón de tarjeta que
   .idpp-redes-card), agrupadas por año → mes en orden descendente para dar
   apariencia de línea de tiempo (a pedido del usuario), en vez de una
   lista plana o un árbol de categorías como el sitio viejo.
   ══════════════════════════════════════════════════════════════ */
.idpp-noticias-listado { padding: 64px 0 88px; background: var(--azul-075); }
.idpp-noticias-listado-tools {
	padding-bottom: 24px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--azul-100);
}
/* El buscador queda a la misma altura que "Noticias", indentado a la
   derecha -- reusa `.idpp-section-head-row` (el mismo patrón de título +
   controles que ya usan "El IDPP en redes"/"Instituciones del sector
   justicia" con sus flechas). Aspecto del input definido en el bloque
   "CAJA DE BUSCADOR" -- acá solo el ancho propio, fijo para que no se
   angoste cuando comparte fila con el título. */
.idpp-noticias-listado-search { width: 320px; flex-shrink: 0; }
/* Pestañas de año, al final de la página (no arriba junto al buscador) --
   mismo componente (.idpp-biblioteca-tabs), solo cambia dónde vive. La
   línea de arriba la separa del listado. */
.idpp-noticias-listado-tabs-footer { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--azul-100); }
.idpp-noticias-listado-empty { font-size: calc(15px * var(--esc-texto)); color: var(--azul-700); padding: 40px 0; text-align: center; }

.idpp-noticias-listado-anio { margin-bottom: 44px; }
.idpp-noticias-listado-anio[hidden] { display: none; }
.idpp-noticias-listado-anio-marcador {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 32px;
	font-weight: 700;
	color: var(--azul-700);
	margin-bottom: 24px;
}
.idpp-noticias-listado-anio-marcador::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--azul-700); flex-shrink: 0; }
.idpp-noticias-listado-anio-body { padding-left: 39px; border-left: 2px solid var(--azul-100); margin-left: 7px; }
.idpp-noticias-listado-mes-grupo { position: relative; border-bottom: 1px solid var(--azul-100); }
.idpp-noticias-listado-mes-grupo[hidden] { display: none; }
.idpp-noticias-listado-mes-grupo:last-child { border-bottom: none; }
.idpp-noticias-listado-mes-header {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 0;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.idpp-noticias-listado-mes-header:hover .idpp-noticias-listado-mes-titulo { color: var(--azul-900); }
.idpp-noticias-listado-mes-punto {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--azul-400);
	margin-left: -45px;
	box-shadow: 0 0 0 5px var(--azul-075);
	flex-shrink: 0;
}
.idpp-noticias-listado-mes-titulo {
	font-size: calc(14px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-600);
	text-transform: uppercase;
	letter-spacing: .05em;
	transition: color .15s ease;
}
.idpp-noticias-listado-mes-count { font-size: calc(13px * var(--esc-texto)); color: var(--azul-400); margin-left: auto; }
.idpp-noticias-listado-mes-chevron { width: 16px; height: 16px; color: var(--azul-400); transition: transform .2s ease; flex-shrink: 0; }
.idpp-noticias-listado-mes-grupo.is-open .idpp-noticias-listado-mes-chevron { transform: rotate(180deg); }
.idpp-noticias-listado-mes-body { padding-top: 12px; padding-bottom: 32px; }
.idpp-noticias-listado-mes-body[hidden] { display: none; }
.idpp-noticias-listado-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.idpp-noticias-listado-card[hidden] { display: none; }
.idpp-noticias-listado-card-btn {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	border-radius: 6px;
	overflow: hidden;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.idpp-noticias-listado-card-btn:hover { border-color: var(--azul-400); box-shadow: 0 8px 20px rgba(16,36,63,.09); }
.idpp-noticias-listado-card-foto { position: relative; aspect-ratio: 4 / 3; background: var(--azul-025); display: block; }
.idpp-noticias-listado-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idpp-noticias-listado-card-fotos-count {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(16,36,63,.75);
	color: var(--blanco);
	font-size: calc(11px * var(--esc-texto));
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 20px;
}
.idpp-noticias-listado-card-body { display: block; padding: 14px 16px 18px; }
.idpp-noticias-listado-card-fecha {
	display: block;
	font-size: calc(11.5px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-400);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 6px;
}
.idpp-noticias-listado-card-titulo { display: block; font-size: calc(14.5px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════
   NOTICIA INDIVIDUAL -- página completa (reemplazó al modal de galería
   que había antes, a pedido del cliente, con el estilo de presentación
   de mingob.gob.gt pero en la paleta y tipografía propias del sitio).
   Generada al vuelo por page-noticias.php cuando la URL trae ?id=, no es
   una página de WordPress con entrada de menú.
   ══════════════════════════════════════════════════════════════ */
/* Ancho igual al del header (logo + menú + buscador), no de borde a borde --
   pedido del cliente. Es un <button> (abre el visor ampliado), por eso los
   reseteos de apariencia nativa. */
.idpp-noticia-single-hero {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--azul-025);
	overflow: hidden;
	border: none;
	padding: 0;
	margin: 0;
	cursor: zoom-in;
	border-radius: 4px;
}
.idpp-noticia-single-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/*
 * `.idpp-noticia-single-layout` también lleva la clase `.idpp-wrap` (1180px,
 * padding 0 24px) -- el shorthand `padding: 40px 0 88px` de acá ABAJO pisa
 * las 4 esquinas, incluyendo el padding horizontal heredado de `.idpp-wrap`,
 * dejando el body+sidebar pegados al borde exterior del wrap en vez de
 * alineados con la foto/header (24px más angosto). Por eso se usa
 * padding-top/padding-bottom sueltos, no el shorthand -- mismo bug que hizo
 * que el cuerpo se viera más ancho que el header cuando se probó de ancho
 * completo.
 */
.idpp-noticia-single-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 56px;
	align-items: start;
	padding-top: 40px;
	padding-bottom: 88px;
}
.idpp-noticia-single-main { min-width: 0; }
.idpp-noticia-single-main h1 { font-size: 30px; line-height: 1.28; margin: 6px 0 18px; }
.idpp-noticia-single-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--azul-100);
}
.idpp-noticia-single-fecha {
	font-size: calc(12.5px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-400);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.idpp-noticia-single-share { display: flex; gap: 8px; }
.idpp-noticia-single-share a {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--azul-100);
	color: var(--azul-700);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.idpp-noticia-single-share a svg { width: 15px; height: 15px; }
.idpp-noticia-single-share a:hover { background: var(--azul-700); color: var(--blanco); border-color: var(--azul-700); }
.idpp-noticia-single-cuerpo { font-size: calc(17px * var(--esc-texto)); line-height: 1.75; color: var(--azul-800); max-width: 70ch; }
.idpp-noticia-single-galeria { margin-top: 40px; }
.idpp-noticia-single-galeria-titulo { font-size: calc(17px * var(--esc-texto)); font-weight: 600; margin: 0; }
.idpp-noticia-galeria-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(200px, 1fr);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-top: 16px;
}
.idpp-noticia-galeria-track::-webkit-scrollbar { display: none; }
.idpp-noticia-galeria-item { aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; scroll-snap-align: start; background: var(--azul-025); }
.idpp-noticia-galeria-item button { display: block; width: 100%; height: 100%; background: none; border: none; padding: 0; cursor: zoom-in; }
.idpp-noticia-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idpp-noticia-single-vecinas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--azul-100);
}
.idpp-noticia-single-vecina { display: flex; flex-direction: column; gap: 6px; }
.idpp-noticia-single-vecina-siguiente { text-align: right; align-items: flex-end; grid-column: 2; }
.idpp-noticia-single-vecina-label {
	font-size: calc(12px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-400);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.idpp-noticia-single-vecina-titulo { font-size: calc(15px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); line-height: 1.4; transition: color .15s ease; }
.idpp-noticia-single-vecina:hover .idpp-noticia-single-vecina-titulo { color: var(--azul-600); }
.idpp-noticia-single-sidebar-titulo { font-size: calc(15px * var(--esc-texto)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--azul-400); margin: 0 0 18px; }
.idpp-noticia-single-relacionadas { display: flex; flex-direction: column; gap: 16px; }
.idpp-noticia-single-relacionada { display: flex; gap: 12px; align-items: flex-start; padding: 8px; margin: -8px; border-radius: 6px; transition: background .15s ease; }
.idpp-noticia-single-relacionada:hover { background: var(--azul-025); }
.idpp-noticia-single-relacionada-foto { width: 68px; height: 68px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--azul-025); }
.idpp-noticia-single-relacionada-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idpp-noticia-single-relacionada-texto { display: flex; flex-direction: column; gap: 4px; }
.idpp-noticia-single-relacionada-fecha { font-size: calc(11px * var(--esc-texto)); font-weight: 600; color: var(--azul-400); text-transform: uppercase; letter-spacing: .04em; }
.idpp-noticia-single-relacionada-titulo { font-size: calc(13.5px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); line-height: 1.4; }
.idpp-noticia-single-vacia { padding: 96px 0; text-align: center; }
.idpp-noticia-single-vacia p { font-size: calc(17px * var(--esc-texto)); color: var(--azul-700); margin-bottom: 20px; }

/* Visor ampliado de fotos (portada + galería) -- mismo patrón que el modal
   de noticia que se retiró, pero solo para agrandar la foto: el título y el
   cuerpo ya están en la página, no hace falta repetirlos aquí. */
.idpp-noticia-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; }
.idpp-noticia-lightbox[hidden] { display: none; }
.idpp-noticia-lightbox-backdrop { position: absolute; inset: 0; background: rgba(14,31,54,.9); }
.idpp-noticia-lightbox-img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.idpp-noticia-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,.14);
	color: var(--blanco);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.idpp-noticia-lightbox-close:hover { background: rgba(255,255,255,.26); }
.idpp-noticia-lightbox-close svg { width: 20px; height: 20px; }
.idpp-noticia-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,.14);
	color: var(--blanco);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.idpp-noticia-lightbox-nav:hover { background: rgba(255,255,255,.26); }
.idpp-noticia-lightbox-nav svg { width: 20px; height: 20px; }
.idpp-noticia-lightbox-prev { left: 20px; }
.idpp-noticia-lightbox-next { right: 20px; }
.idpp-noticia-lightbox-contador {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 2;
	background: rgba(255,255,255,.14);
	color: var(--blanco);
	font-size: calc(13px * var(--esc-texto));
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 20px;
}

/* Sedes Departamentales y Municipales: encabezado por departamento +
   filtro/buscador reusan los mismos componentes de pestaña de Biblioteca
   (.idpp-biblioteca-tabs/-tag/-tools/-search/-count/-empty), que ya son
   genéricos pese al nombre. */
.idpp-sedes-departamento { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--azul-100); }
.idpp-sedes-departamento:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
.idpp-sedes-departamento h2 { font-size: calc(22px * var(--esc-texto)); font-weight: 600; color: var(--azul-900); margin-bottom: 24px; }
.idpp-sedes-departamento[hidden], .idpp-sede-item[hidden] { display: none; }

/* isolation: isolate crea un contexto de apilamiento propio para este
   contenedor -- sin esto, los controles y paneles internos de Leaflet
   (que usan z-index hasta 1000) compiten directamente con el header fijo
   del sitio (z-index 100) en el mismo contexto raíz, y como 1000 > 100
   terminan pintándose ENCIMA del header en vez de detrás, cada vez que el
   mapa se desplaza bajo él al hacer scroll. Con isolation, todo lo de
   adentro del mapa queda contenido y nunca puede escapar por encima de
   nada que esté fuera de este contenedor. Afecta tanto al mapa del Home
   como al de /mapa-de-sedes/, que comparten esta misma clase. */
.idpp-mapa-sedes-frame { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 4px; overflow: hidden; border: 1px solid var(--azul-100); margin-top: 8px; isolation: isolate; }
.idpp-mapa-sedes-frame iframe, .idpp-mapa-sedes-frame #idpp-mapa-osm, .idpp-mapa-sedes-frame #idpp-home-mapa-osm { width: 100%; height: 100%; border: none; display: block; }
.idpp-mapa-sedes-atribucion { font-size: calc(12.5px * var(--esc-texto)); color: var(--azul-400); margin-top: 10px; }
.idpp-mapa-sedes-atribucion a { color: var(--azul-600); }
/* Ícono de pin propio para los marcadores de Leaflet, en vez del pin por
   defecto — mismo trazo que el resto del sitio. */
.idpp-map-pin svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 4px rgba(14,31,54,.35)); }
.leaflet-popup-content { font-family: var(--fuente); font-size: calc(14px * var(--esc-texto)); color: var(--azul-900); line-height: 1.5; }
.leaflet-popup-content strong { color: var(--azul-900); }
.idpp-mapa-popup { max-width: 220px; }
.idpp-mapa-popup-foto { width: 100%; height: 120px; object-fit: cover; border-radius: 3px; margin-bottom: 8px; display: block; }
.idpp-mapa-popup a { color: var(--azul-600); }

/*
 * Mapa + ficha lado a lado (no una arriba del otro): apilarlos hacía que el
 * componente completo pasara del alto de la ventana apenas se elegía una
 * sede -- a pedido del cliente, la ficha vive en una columna fija a la
 * derecha del mapa, así el alto total del componente nunca pasa del alto
 * del propio mapa (que ya define su alto con aspect-ratio). La columna de
 * la ficha existe siempre, con un texto de ayuda antes de elegir una sede,
 * para que no se vea como un hueco vacío.
 */
.idpp-mapa-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: stretch; margin-top: 8px; }
.idpp-mapa-layout .idpp-mapa-sedes-frame { margin-top: 0; }

/*
 * Ficha de resultado: al elegir una sugerencia del buscador o hacer clic en
 * un pin, esto reemplaza al mapa como el camino principal para llegar al
 * dato de contacto -- dirección, teléfono/correo tocables, horario y
 * "Cómo llegar" en texto grande y legible, en vez de forzar a leer un popup
 * chico sobre el mapa. El mapa se mantiene al lado como confirmación visual.
 */
.idpp-mapa-ficha {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	border-radius: 6px;
	padding: 20px 44px 20px 20px;
	min-height: 0;
	overflow-y: auto;
}
.idpp-mapa-ficha-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 12px; }
.idpp-mapa-ficha-vacio svg { width: 30px; height: 30px; color: var(--azul-100); }
.idpp-mapa-ficha-vacio p { font-size: calc(13.5px * var(--esc-texto)); color: var(--azul-400); margin: 0; max-width: 26ch; }
.idpp-mapa-ficha-foto { width: 100%; height: 130px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--azul-025); }
.idpp-mapa-ficha-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idpp-mapa-ficha-texto h3 { font-size: calc(17px * var(--esc-texto)); margin: 0 0 6px; }
.idpp-mapa-ficha-direccion { font-size: calc(14px * var(--esc-texto)); color: var(--azul-700); margin: 0 0 12px; }
.idpp-mapa-ficha-datos { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.idpp-mapa-ficha-dato {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: calc(14px * var(--esc-texto));
	font-weight: 500;
	color: var(--azul-900);
}
.idpp-mapa-ficha-dato svg { width: 16px; height: 16px; color: var(--azul-600); flex-shrink: 0; }
a.idpp-mapa-ficha-dato:hover { color: var(--azul-600); }
.idpp-mapa-ficha-ir { color: var(--azul-600); }
.idpp-mapa-ficha-cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	color: var(--azul-400);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.idpp-mapa-ficha-cerrar svg { width: 16px; height: 16px; }
.idpp-mapa-ficha-cerrar:hover { color: var(--azul-900); }

/* Botón "Ver todas las sedes" -- control propio de Leaflet, esquina superior
   derecha del mapa (la izquierda ya la usan los +/- de zoom). Fondo sólido
   propio porque flota encima de las teselas del mapa, no de un fondo fijo. */
.idpp-mapa-reset {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	border-radius: 4px;
	padding: 8px 12px;
	font-family: var(--fuente);
	font-size: calc(12.5px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-900);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(14, 31, 54, .18);
	white-space: nowrap;
}
.idpp-mapa-reset svg { width: 15px; height: 15px; color: var(--azul-600); flex-shrink: 0; }
.idpp-mapa-reset:hover { background: var(--azul-025); }

.idpp-idiomas { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--azul-100); }
.idpp-idiomas-titulo { font-size: calc(13px * var(--esc-texto)); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--azul-400); margin-bottom: 20px; }
.idpp-idiomas-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.idpp-idiomas-tab {
	padding: 8px 18px;
	background: var(--blanco);
	border: 1px solid var(--azul-100);
	color: var(--azul-600);
	font-family: inherit;
	font-size: calc(13.5px * var(--esc-texto));
	font-weight: 500;
	border-radius: 30px;
	cursor: pointer;
}
.idpp-idiomas-tab:hover { border-color: var(--azul-400); color: var(--azul-700); }
.idpp-idiomas-tab.is-active { background: var(--azul-700); border-color: var(--azul-700); color: var(--blanco); }
.idpp-idiomas-panel { display: none; }
.idpp-idiomas-panel.is-active { display: block; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.idpp-footer {
	background: var(--azul-950);
	color: var(--blanco);
	padding: 56px 0 28px;
}
.idpp-footer .idpp-wrap {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--azul-800);
}
.idpp-footer h4 {
	font-size: calc(13px * var(--esc-texto));
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--azul-400);
	margin: 0 0 16px;
}
.idpp-footer p, .idpp-footer li { font-size: calc(14px * var(--esc-texto)); color: #C9D3DD; }
.idpp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.idpp-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	font-size: calc(12.5px * var(--esc-texto));
	color: #8FA1B3;
}
.idpp-footer-social { display: flex; gap: 14px; }
.idpp-footer-social svg { width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════
   MAPA DEL SITIO: generado a partir de wp_get_nav_menu_items(), no de una
   lista escrita a mano -- se actualiza solo con cada cambio de menú.
   ══════════════════════════════════════════════════════════════ */
.idpp-mapa-sitio { padding: 64px 0 96px; background: var(--blanco); }
.idpp-mapa-sitio-intro { font-size: calc(17px * var(--esc-texto)); color: var(--azul-700); max-width: 70ch; margin-top: 8px; }
.idpp-mapa-sitio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 40px;
	margin-top: 16px;
}
.idpp-mapa-sitio-columna h2 {
	font-size: calc(16px * var(--esc-texto));
	font-weight: 600;
	color: var(--azul-900);
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--azul-150);
}
.idpp-mapa-sitio-columna h2 a { color: inherit; }
.idpp-mapa-sitio-columna h2 a:hover { color: var(--azul-600); }
.idpp-mapa-sitio-columna ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.idpp-mapa-sitio-columna li a { font-size: calc(14.5px * var(--esc-texto)); color: var(--azul-700); line-height: 1.4; }
.idpp-mapa-sitio-columna li a:hover { color: var(--azul-900); text-decoration: underline; }
.idpp-mapa-sitio-pendiente { font-size: calc(13.5px * var(--esc-texto)); color: var(--azul-400); font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   MENÚ DEL HEADER EN MODO HAMBURGUESA -- quiebre propio en 1200px, más
   alto que el resto del sitio (900px, ver RESPONSIVE). El logo grande
   (agrandado a pedido del cliente) no deja suficiente ancho para los 7
   ítems del menú en una sola línea por debajo de este punto, ni con el
   espaciado ya apretado al mínimo (`.idpp-nav-bar-row`, `.idpp-nav` y
   `.idpp-nav-search-wrap`, arriba). Medido en el navegador con
   contenido real: el ancho mínimo de contenido que necesita el menú
   completo es ~1121px, y el `.idpp-wrap` de 1180px les da ~1132px --
   1200px de viewport deja un margen chico pero seguro antes de ese
   límite.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
	.idpp-nav-bar-row { flex-wrap: wrap; }
	/* El buscador deja de tener aquí un contenedor propio que posicionar
	   encima -- cuando se abre, cubre toda la fila del header (ver
	   `.idpp-nav-search-wrap .idpp-search-form` sin el `position:
	   relative` de este envoltorio, sube a posicionarse contra
	   `.idpp-nav-bar`, igual que el panel del menú de abajo). */
	.idpp-nav-search-wrap { position: static; }
	/* Con `.idpp-nav-search-wrap` sin posicionar (arriba), este formulario
	   sube a posicionarse contra `.idpp-nav-bar` -- que en este ancho
	   abarca DOS filas (logo y menú/buscador quedan en filas distintas,
	   ver `.idpp-nav-bar-row { flex-wrap: wrap }`). `inset: 0` (el de
	   escritorio) lo centraría a mitad del logo; acá necesita colgar
	   como panel debajo de todo el header, igual que el menú. */
	.idpp-nav-search-wrap .idpp-search-form {
		top: 100%;
		right: 0;
		bottom: auto;
		left: 0;
		padding: 14px 24px;
		border-top: 1px solid var(--azul-100);
		box-shadow: 0 16px 28px rgba(16,36,63,.14);
		z-index: 20;
	}
	/* Menú colapsable: con el menú siempre expandido el header por sí
	   solo ocupaba casi toda la pantalla en un celular real, sin dejar
	   espacio para ver nada del sitio -- el usuario mandó una captura
	   mostrando el problema. Ahora el menú arranca oculto y el botón de
	   hamburguesa lo despliega como panel flotante ENCIMA del contenido
	   (position: absolute), no empujándolo hacia abajo -- así cerrarlo
	   devuelve el espacio de inmediato, sin tener que hacer scroll para
	   volver a ver la página. */
	.idpp-nav-toggle { display: flex; }
	.idpp-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 16px 20px;
		max-height: 80vh;
		overflow-y: auto;
		background: var(--blanco);
		border-top: 1px solid var(--azul-100);
		box-shadow: 0 16px 28px rgba(16,36,63,.14);
		padding: 8px 24px 20px;
		z-index: 20;
	}
	.idpp-nav-bar.is-nav-open .idpp-nav { display: flex; }
	/* En modo hamburguesa el nav se acomoda en una sola columna (arriba),
	   así que un submenú flotante posicionado con "left: -18px" respecto
	   a su propio disparador puede salirse de la pantalla si ese
	   disparador quedó hacia la derecha de una fila -- confirmado con la
	   geometría real a 375px: el submenú de "Cobertura" terminaba 176px
	   afuera de la pantalla. Se cambia el submenú de "flotante
	   posicionado" a "acordeón en línea": ocupa el ancho completo de su
	   propio item y empuja el contenido de abajo, en vez de
	   superponerse. */
	.idpp-nav > li { flex: 1 1 100%; }
	.idpp-nav .sub-menu {
		position: static;
		display: none;
		width: 100%;
		min-width: 0;
		max-width: none;
		margin-top: 8px;
		padding: 4px 0 4px 16px;
		border: none;
		border-left: 2px solid var(--azul-100);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.idpp-nav > li.is-open .sub-menu { display: block; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.idpp-hero-slides { min-height: 78vh; }
	.idpp-hero-slide { padding: 90px 0 56px; }
	/* En móvil el texto del hero (título de 2 líneas + párrafo + hasta 2
	   botones, como en la diapositiva 1) puede pasar de los 550px de alto,
	   más que en escritorio -- y terminaba pisando la insignia y las
	   flechas/puntos de cambio de foto, que estaban con posición absoluta
	   pegadas al fondo de la foto. Confirmado con geometría real a 375px:
	   la insignia tapaba ~27px del botón "Encuentra tu defensoría" y las
	   flechas otros ~17px. Se sacan del overlay y pasan a flujo normal
	   debajo de la foto, así su posición ya no depende de cuánto crezca el
	   texto arriba. Como ahora quedan sobre el fondo claro de la página en
	   vez de sobre la foto oscura, se les da color propio en vez del
	   blanco translúcido pensado para fondo oscuro. */
	.idpp-hero-badge { position: static; left: auto; right: auto; bottom: auto; width: fit-content; margin: 20px auto 0; justify-content: center; }
	.idpp-hero-nav { position: static; left: auto; right: auto; bottom: auto; margin: 16px 0 28px; }
	.idpp-hero-arrow { background: var(--azul-075); border-color: var(--azul-150); color: var(--azul-700); }
	.idpp-hero-arrow:hover { background: var(--azul-150); }
	.idpp-hero-dot { background: var(--azul-150); }
	.idpp-hero-dot.is-active { background: var(--azul-700); }
	.idpp-section-head-row { flex-wrap: wrap; }
	.idpp-intro .idpp-wrap { grid-template-columns: 1fr; gap: 24px; }
	.idpp-servicios-grid { grid-template-columns: repeat(2, 1fr); }
	.idpp-enfoque-track { grid-template-columns: repeat(3, 1fr); }
	.idpp-noticia-destacada { grid-template-columns: 1fr; }
	.idpp-quienes-somos { grid-template-columns: 1fr; }
	.idpp-noticia-destacada-texto { padding: 4px 24px 28px; }
	.idpp-noticias-grid { grid-template-columns: repeat(2, 1fr); }
	.idpp-redes-track { grid-auto-columns: minmax(270px, 1fr); }
	.idpp-instituciones-track { grid-auto-columns: minmax(150px, 1fr); }
	.idpp-noticia-single-layout { grid-template-columns: 1fr; gap: 40px; }
	.idpp-noticia-single-main h1 { font-size: 25px; }
	.idpp-noticia-galeria-track { grid-auto-columns: minmax(160px, 1fr); }
	.idpp-noticia-single-vecinas { grid-template-columns: 1fr; }
	.idpp-noticia-single-vecina-siguiente { text-align: left; align-items: flex-start; grid-column: 1; }
	.idpp-mapa-buscador { max-width: none; }
	.idpp-mapa-layout { grid-template-columns: 1fr; }
	.idpp-mapa-ficha { padding: 18px 44px 18px 18px; overflow-y: visible; }
	.idpp-noticias-listado-grid { grid-template-columns: repeat(2, 1fr); }
	.idpp-noticias-listado-anio-body { padding-left: 24px; }
	.idpp-noticias-listado-mes-punto { margin-left: -30px; }
	.idpp-footer .idpp-wrap { grid-template-columns: 1fr; gap: 28px; }
	.idpp-hero h1 { font-size: 34px; }
	.idpp-biblioteca-tools { flex-direction: column; align-items: stretch; }
	.idpp-biblioteca-search { min-width: 0; }
	.idpp-noticias-listado-search { width: 100%; }
	.idpp-biblioteca-list { grid-template-columns: 1fr; }
	.idpp-filas-grid { grid-template-columns: 1fr; }
	.idpp-lista-check-columnas { grid-template-columns: 1fr; }
	.idpp-solicitud-grid { grid-template-columns: 1fr; }
	.idpp-equipo-grid { grid-template-columns: repeat(2, 1fr); }
	.idpp-convocatoria-body { padding: 28px 24px 8px; }
	.idpp-convocatoria-entrevistas { padding: 8px 24px 32px; }
	.idpp-convocatoria-entrevistas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.idpp-servicios-grid { grid-template-columns: 1fr; }
	.idpp-card { padding: 28px 24px 24px; }
	.idpp-enfoque-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.idpp-enfoque-card { min-width: 0; padding-left: 12px; padding-right: 12px; }
	.idpp-enfoque-title, .idpp-enfoque-desc { overflow-wrap: anywhere; hyphens: auto; }
	.idpp-enfoque-arrows { display: none; }
	.idpp-noticias-grid { grid-template-columns: 1fr; }
	.idpp-noticias-listado-grid { grid-template-columns: 1fr; }
	.idpp-equipo-grid { grid-template-columns: 1fr; }
	.idpp-utility .idpp-wrap { flex-direction: column; gap: 6px; padding-bottom: 10px; }
	.idpp-utility-contact { justify-content: center; }
	.idpp-utility-divider { display: none; }
	.idpp-hero-badge { font-size: calc(12px * var(--esc-texto)); padding: 9px 14px; }
	.idpp-convocatoria-entrevistas-grid { grid-template-columns: 1fr; }
}

/* Con la letra más grande, «Interculturalidad» ya no cabe en media pantalla de un celular angosto y se partía en dos: por debajo de 440 px las tarjetas de «Atención al usuario» van en una columna */
@media (max-width: 440px) {
	.idpp-enfoque-track { grid-template-columns: 1fr; }
}