/*
Theme Name: IDPP - Propuesta datos abiertos 2026
Theme URI: https://idpp03.nube4.cloud
Author: Proyecto hosting IDPP
Description: Propuesta de layout para la portada del IDPP, inspirada en el patrón de un portal de datos públicos (opensecrets.org): menú flotante translúcido, titular grande en dos tonos sobre foto recortada con arcos, «¿Necesitas un defensor público?» con buscador de sedes, explorador de datos con gráficas, reportes y conjuntos de datos, cómo te defendemos, noticias, redes y preguntas frecuentes. Usa la paleta del sistema de diseño IDPP Institucional 2026 (azul-* y blanco), ampliada con azules del mismo matiz (cobalto, cielo y celeste), y permite comparar cuatro combinaciones tipográficas.
Version: 0.1.0
Requires PHP: 8.0
Text Domain: idpp-datos
*/

/* ══════════════════════════════════════════════════════════════
   TOKENS — los del sistema de diseño IDPP Institucional 2026 (mismos nombres y valores)
   ══════════════════════════════════════════════════════════════ */
:root {
	--azul-950: #0E1F36;
	--azul-900: #10243F;
	--azul-800: #0D2745;
	--azul-700: #1B365D;
	--azul-600: #27466B;
	--azul-500: #2F4F74;
	--azul-400: #496A8C;
	--azul-300: #7F9CBD;
	--azul-150: #D3E0EE;
	--azul-100: #D1D7DF;
	--azul-075: #E9EFF6;
	--azul-050: #E4E7EC;
	--azul-025: #F1F3F5;
	--blanco: #FFFFFF;
	--b-rgb: 255, 255, 255; /* el blanco como «r, g, b», para los blancos translúcidos */
	--pie-texto: #C9D3DD;
	--pie-texto-tenue: #8FA1B3;

	/* AMPLIACIÓN DE AZULES (propuesta; aún no están en el sistema de diseño).
	   Mismo matiz que los azul-* (210–215°) pero más saturados y luminosos, para datos, enlaces y detalles.
	   Contraste sobre blanco / sobre azul-950:
	   cobalto-700 9.0 / 1.8 · cobalto-600 7.0 / 2.4 · cobalto-500 5.1 / 3.2 · cobalto-400 3.6 / 4.7
	   cielo-300 2.4 / 7.0 · cielo-200 1.7 / 9.9 · celeste-500 3.8 / 4.3 · celeste-300 2.2 / 7.6
	   (cobalto-600 y 700 sirven de texto sobre claro; cobalto-400 y los cielo-*, de gráfica y texto sobre oscuro) */
	--cobalto-700: #1A4889;
	--cobalto-600: #1B58A7;
	--cobalto-500: #216DCA;
	--cobalto-400: #408ADD;
	--cielo-300: #76ADE5;
	--cielo-200: #A8CCF0;
	--cielo-100: #D3E5F8;
	--cielo-050: #EDF5FC;
	--celeste-500: #2189CA;
	--celeste-300: #63B9E3;

	/* PALETA NUEVA (propuesta, se alterna con «Paleta» en el panel de revisión o con ?paleta=nueva|actual).
	   Blanco pálido en lugar del blanco, y dos cálidos para acentos: ámbar (acción y foco) y rojo tierra (énfasis).
	   Contraste: azul-950 sobre ámbar 8.1 · ámbar sobre azul-950 8.1 · rojo tierra sobre blanco pálido 5.6 · blanco pálido sobre rojo tierra 5.6.
	   El ámbar sobre claro (1.9) es solo decorativo (relleno de pictogramas con contorno); nunca es texto sobre claro. */
	--ambar: #F7A426;
	--ambar-hover: #FFB84D;
	--tierra: #B23A2E;
	--tierra-700: #8F2C22;
	--papel-200: #F3EDE3;

	--wrap: 1240px;
	--gutter: 24px;

	--radio: 4px;
	--radio-tarjeta: 10px;
	--radio-pill: 30px;

	--sombra-tarjeta: 0 2px 14px rgba(16, 36, 63, .08);
	--sombra-hover: 0 8px 20px rgba(16, 36, 63, .09);
	--sombra-panel: 0 16px 28px rgba(16, 36, 63, .14);
	--sombra-modal: 0 24px 60px rgba(14, 31, 54, .35);

	/* pictogramas (ver bloque PICTOGRAMAS) */
	--ic-f: var(--cielo-100);
	--ic-a: var(--cobalto-500);
	--ic-w: var(--blanco);
}

/* ══════════════════════════════════════════════════════════════
   TIPOGRAFÍA — cuatro combinaciones para decidir. Cada una define:
   --f-titulo  titulares, etiquetas y controles
   --f-texto   texto corrido
   --f-num     cifras y valores de las gráficas (con cifras tabulares)
   --w-h1/h2/h3  peso de titular grande, de sección y de tarjeta
   La combinación se elige en el panel «Tipografía» o con ?tipo=a|b|c|d en la URL.
   ══════════════════════════════════════════════════════════════ */
html[data-tipo="a"] { /* A · Inter: la de OpenSecrets; titulares finos y muy grandes */
	--f-titulo: 'Inter', system-ui, sans-serif; --f-texto: 'Inter', system-ui, sans-serif; --f-num: 'Inter', system-ui, sans-serif;
	--w-h1: 400; --w-h2: 400; --w-h3: 500; --tr-h: -.035em; --fs-base: 17px;
}
html[data-tipo="b"] { /* B · Poppins: la actual del sistema, sin cambios */
	--f-titulo: 'Poppins', sans-serif; --f-texto: 'Poppins', sans-serif; --f-num: 'Poppins', sans-serif;
	--w-h1: 500; --w-h2: 500; --w-h3: 600; --tr-h: -.03em; --fs-base: 17px;
}
html[data-tipo="c"] { /* C · Poppins + Inter: titulares de la marca, texto y cifras en Inter (recomendada) */
	--f-titulo: 'Poppins', sans-serif; --f-texto: 'Inter', system-ui, sans-serif; --f-num: 'Inter', system-ui, sans-serif;
	--w-h1: 500; --w-h2: 500; --w-h3: 500; --tr-h: -.03em; --fs-base: 17px;
}
html[data-tipo="d"] { /* D · Public Sans + IBM Plex Mono: institucional de datos, cifras en monoespaciada */
	--f-titulo: 'Public Sans', system-ui, sans-serif; --f-texto: 'Public Sans', system-ui, sans-serif; --f-num: 'IBM Plex Mono', ui-monospace, monospace;
	--w-h1: 500; --w-h2: 500; --w-h3: 600; --tr-h: -.03em; --fs-base: 17px;
}

/* ══════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--f-texto);
	font-weight: 400;
	font-size: var(--fs-base, 17px);
	line-height: 1.65;
	color: var(--azul-900);
	background: var(--blanco);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cobalto-500); outline-offset: 2px; }
.dat-oscuro :focus-visible, .dat-header :focus-visible { outline-color: var(--cielo-200); }
.dat-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.dat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dat-salto { position: absolute; left: 8px; top: -80px; z-index: 300; background: var(--azul-900); color: var(--blanco); padding: 10px 16px; border-radius: var(--radio); }
.dat-salto:focus { top: 8px; }
svg { flex-shrink: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.dat-sec { padding: 104px 0; }
.dat-oscuro { color: var(--blanco); }

/* Titulares: sin subrayado ni mayúsculas, un solo estilo */
.dat-h2 {
	font-family: var(--f-titulo);
	font-weight: var(--w-h2);
	font-size: clamp(36px, 5.2vw, 64px);
	line-height: 1.06;
	letter-spacing: var(--tr-h);
	color: var(--azul-900);
}
.dat-h2-medio { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; color: var(--blanco); }
.dat-h3 { font-family: var(--f-titulo); font-weight: var(--w-h3); font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.dat-h3-tarjeta { font-family: var(--f-titulo); font-weight: var(--w-h3); font-size: 24px; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 12px; }
.dat-h3-nota { font-family: var(--f-titulo); font-weight: var(--w-h3); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.02em; margin: 8px 0 14px; }
.dat-h3-nota-chica { font-size: 19px; line-height: 1.3; margin: 6px 0 0; }
.dat-cab { max-width: 1100px; margin-bottom: 56px; }
.dat-cab-fila { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
.dat-cab-oscura .dat-h2 { color: var(--blanco); }
.dat-lead { margin: 18px 0 0; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--azul-600); max-width: 60ch; }
.dat-lead a { color: var(--cobalto-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dat-cab-oscura .dat-lead { color: var(--pie-texto); }
.dat-fecha { font-family: var(--f-titulo); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--azul-600); }
.dat-enlace { font-family: var(--f-titulo); font-weight: 600; font-size: 15px; color: var(--cobalto-600); display: inline-flex; align-items: center; gap: 6px; }
.dat-enlace:hover { color: var(--azul-900); text-decoration: underline; text-underline-offset: 4px; }
.dat-enlace svg { width: 16px; height: 16px; }
.dat-oscuro .dat-enlace { color: var(--cielo-200); }
.dat-oscuro .dat-enlace:hover { color: var(--blanco); }

/* Botones (pill del sistema) */
.dat-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 24px; border: 1.5px solid transparent; border-radius: var(--radio-pill);
	font-family: var(--f-titulo); font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap; cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dat-btn svg { width: 18px; height: 18px; }
.dat-btn-claro { background: var(--blanco); color: var(--azul-900); }
.dat-btn-claro:hover { background: var(--cielo-100); }
.dat-btn-linea { background: transparent; color: var(--blanco); border-color: rgba(var(--b-rgb), .6); }
.dat-btn-linea:hover { background: rgba(var(--b-rgb), .12); border-color: var(--blanco); }
.dat-btn-oscuro { background: var(--azul-900); color: var(--blanco); }
.dat-btn-oscuro:hover { background: var(--cobalto-700); }
.dat-btn-grande { padding: 17px 32px; font-size: 17px; }
.dat-acciones-fila { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* ══════════════════════════════════════════════════════════════
   MENÚ FLOTANTE (translúcido sobre el hero, sólido al desplazarse)
   ══════════════════════════════════════════════════════════════ */
.dat-header { position: fixed; top: 14px; left: 0; right: 0; z-index: 100; padding: 0 16px; pointer-events: none; }
.dat-cabecera { position: relative; max-width: var(--wrap); margin: 0 auto; }
.dat-pill, .dat-panel { pointer-events: auto; max-width: var(--wrap); margin: 0 auto; }
.dat-pill {
	display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 8px 12px 8px 20px;
	border-radius: var(--radio-pill); border: 1px solid rgba(var(--b-rgb), .16);
	background: rgba(14, 31, 54, .5); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
	color: var(--blanco); transition: background .2s ease, box-shadow .2s ease;
}
.dat-solido .dat-pill, .dat-abierto .dat-pill { background: rgba(14, 31, 54, .92); box-shadow: 0 10px 30px rgba(14, 31, 54, .3); }
/* fuera de la portada no hay foto detrás: el menú es sólido desde el principio (contraste del texto blanco) */
.dat-interior-body .dat-pill { background: rgba(14, 31, 54, .92); }
/* Tamaño de «IDPP» ligado al escudo: --marca-h es la altura del escudo, --marca-txt la fracción de esa altura que miden las mayúsculas y --cap la altura de mayúsculas de la tipografía (Poppins .70, Inter y Public Sans .73) */
.dat-marca { --marca-h: 54px; --marca-txt: .75; --cap: .7; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
html[data-tipo="a"] .dat-marca, html[data-tipo="d"] .dat-marca { --cap: .73; }
.dat-marca img { height: var(--marca-h); width: auto; }
/* Portada: mientras se ve el logo del hero, el de la barra se oculta (el escudo aparece una vez por pantalla, como pide el manual de marca) y vuelve al bajar. Solo con JavaScript (html.dat-js); sin él, el logo de la barra se ve siempre. La caja se conserva (visibility), así que la barra no cambia de tamaño. */
.dat-marca { transition: opacity .25s ease, visibility .25s ease; }
html.dat-js .dat-sin-logo .dat-marca { opacity: 0; visibility: hidden; }
.dat-marca-txt { display: flex; flex-direction: column; }
.dat-marca-txt b { font-family: var(--f-titulo); font-weight: 600; font-size: calc(var(--marca-h) * var(--marca-txt) / var(--cap)); line-height: var(--marca-h); letter-spacing: -.01em; }
.dat-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
/* cada opción abre su menú al hacer clic; el chevron gira cuando está abierto */
.dat-nav-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: var(--radio-pill); background: transparent; cursor: pointer;
	font-family: var(--f-titulo); font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--blanco); white-space: nowrap; transition: background .15s ease;
}
.dat-nav-btn:hover, .dat-nav-btn[aria-expanded="true"] { background: rgba(var(--b-rgb), .16); }
.dat-chev { width: 14px; height: 14px; opacity: .85; transition: transform .2s ease; }
.dat-nav-btn[aria-expanded="true"] .dat-chev { transform: rotate(180deg); }
.dat-acciones { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.dat-nav + .dat-acciones { margin-left: 8px; }
.dat-icono-btn {
	width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(var(--b-rgb), .3); border-radius: 50%; background: transparent; color: var(--blanco); cursor: pointer;
	transition: background .15s ease;
}
.dat-icono-btn:hover, .dat-icono-btn[aria-expanded="true"] { background: rgba(var(--b-rgb), .16); }
.dat-icono-btn svg { width: 22px; height: 22px; }
.dat-ico-cerrar { display: none; }
[aria-expanded="true"] > .dat-ico-abrir { display: none; }
[aria-expanded="true"] > .dat-ico-cerrar { display: block; }

.dat-panel {
	margin-top: 10px; padding: 28px; border-radius: var(--radio-tarjeta);
	background: rgba(14, 31, 54, .985); color: var(--blanco); box-shadow: var(--sombra-modal);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	max-height: calc(100vh - 120px); overflow: auto;
}
/* Menús desplegables: bajo su botón, en la misma tarjeta azul oscura. Con más de 6 enlaces van en dos columnas (.dat-drop-2) */
.dat-drop { position: absolute; top: 100%; left: var(--dat-izq, 0); width: 340px; max-width: 100%; max-height: calc(100vh - 130px); }
.dat-drop-2 { width: 640px; }
.dat-drop-tit {
	margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(var(--b-rgb), .2);
	font-family: var(--f-titulo); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--cielo-200);
}
.dat-drop ul { list-style: none; margin: 0; padding: 0; }
.dat-drop-2 ul { columns: 2; column-gap: 36px; }
.dat-drop li { break-inside: avoid; }
.dat-drop li a { display: block; padding: 5px 0; font-size: 15px; line-height: 1.35; color: var(--blanco); }
.dat-drop li a:hover { color: var(--cielo-200); text-decoration: underline; text-underline-offset: 3px; }
@keyframes dat-desplegar { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: no-preference) { .dat-drop, .dat-busca { animation: dat-desplegar .16s ease-out; } }

.dat-form-busca { display: flex; background: var(--blanco); border-radius: var(--radio-pill); padding: 6px; }
.dat-form-busca input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 20px; border: 0; background: transparent; font-family: var(--f-texto); font-size: 17px; color: var(--azul-900); }
.dat-form-busca input::placeholder { color: var(--azul-400); opacity: 1; }
.dat-form-busca input:focus { outline: none; }
.dat-form-busca button { display: flex; align-items: center; gap: 8px; padding: 0 26px; background: var(--azul-900); color: var(--blanco); border: 0; border-radius: var(--radio-pill); cursor: pointer; font-family: var(--f-titulo); font-weight: 600; font-size: 16px; }
.dat-form-busca button:hover { background: var(--cobalto-700); }
.dat-form-busca button svg { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════════
   1. HERO
   ══════════════════════════════════════════════════════════════ */
.dat-hero {
	position: relative; overflow: hidden; padding: 176px 0 104px; min-height: 800px;
	/* Fondo: azul marino que se aviva hacia el cobalto a la derecha, con un resplandor cobalto detrás de la foto (opción D elegida entre seis; sin ámbar, así que vale para las dos paletas) */
	background:
		radial-gradient(60% 85% at 80% 45%, rgba(64, 138, 221, .38) 0%, rgba(64, 138, 221, .12) 45%, rgba(64, 138, 221, 0) 72%),
		linear-gradient(105deg, var(--azul-950) 0%, #123056 55%, var(--cobalto-700) 130%);
}
.dat-hero-arte { position: absolute; inset: 0; max-width: 1640px; margin: 0 auto; pointer-events: none; }
.dat-arcos { position: absolute; right: -200px; top: -20px; width: 900px; height: 900px; }
.dat-hero-foto {
	position: absolute; right: -10px; top: 170px; width: 520px; height: 520px; border-radius: 50%; overflow: hidden;
	box-shadow: 0 0 0 10px rgba(168, 204, 240, .1), 0 30px 80px rgba(0, 0, 0, .4);
}
.dat-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; filter: saturate(.72) brightness(.86); }
.dat-hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(27, 88, 167, 0) 35%, rgba(14, 31, 54, .6) 100%); }
.dat-hero-punto { position: absolute; right: 400px; top: 584px; width: 64px; height: 64px; border-radius: 50%; background: var(--cobalto-500); box-shadow: 0 0 0 10px rgba(64, 138, 221, .18); }
.dat-hero-cuerpo { position: relative; }
/* Pantalla horizontal de 901 px o más: el hero llena la pantalla menos 120 px, para que el borde de la siguiente sección («¿Necesitas un defensor?») asome y invite a bajar.
   Es un mínimo, no un alto fijo: si el contenido es más alto (pantallas bajas, ~888 px) manda el contenido, y hay un tope de 1200 px para monitores muy altos.
   El texto se centra en vertical y el arte (arcos, foto y punto) se ancla al centro del hero en vez de al borde de arriba; a 888 px las posiciones son las de siempre.
   En vertical (celular, tablet de pie) el hero sigue midiendo lo que mide su contenido. */
@media (min-width: 901px) and (orientation: landscape) {
	.dat-hero { display: flex; flex-direction: column; justify-content: center; min-height: clamp(800px, calc(100vh - 120px), 1200px); min-height: clamp(800px, calc(100svh - 120px), 1200px); }
	.dat-hero-cuerpo { width: 100%; }
	.dat-arcos { top: calc(50% - 464px); }
	.dat-hero-foto { top: calc(50% - 274px); }
	.dat-hero-punto { top: calc(50% + 140px); }
}
/* Con la barra de una sola fila (≥ 1101 px) el menú termina a 86 px: el contenido del hero sube (110 px arriba y 120 abajo en vez de 176 y 104) para que no quede un hueco grande entre el menú y el logo, y queda alineado con el centro de la foto */
@media (min-width: 1101px) and (orientation: landscape) {
	.dat-hero { padding: 110px 0 120px; }
}
/* Logo del hero: escudo + leyenda «Instituto de la Defensa Pública Penal» (sin «IDPP») en tres líneas y con letra alta. --leyenda es el tamaño de referencia: el escudo mide 2.86 veces --leyenda (lo que miden tres líneas de cabeza a pie a ese tamaño) y la letra, el 90 % de --leyenda (se bajó un 10 % a pedido del usuario), de modo que las tres líneas miden ~90 % del alto del escudo. El lema va debajo, más chico que la leyenda (antes era de hasta 84 px). */
.dat-hero-marca { --leyenda: clamp(40px, 6.2vw, 66px); display: flex; align-items: center; gap: calc(var(--leyenda) * .4); margin: 0 0 40px; }
.dat-hero-marca img { height: calc(var(--leyenda) * 2.86); width: auto; flex-shrink: 0; }
.dat-hero-nombre { font-family: var(--f-titulo); font-weight: 600; font-size: calc(var(--leyenda) * .9); line-height: 1.06; letter-spacing: -.015em; color: var(--blanco); }
.dat-hero-nombre span { display: block; white-space: nowrap; }
/* Con la foto a la vista (≥ 1101 px) la letra crece con el ancho de la pantalla sin llegar a la foto: ~52 px a 1101, 76 a 1440, 80 (tope) desde ~1520. El ancho del escudo más «Defensa Pública» es ~10.6 veces el tamaño de la letra; pasado el ancho del contenido (1240 px) el texto arranca más a la derecha, de ahí el segundo término. */
@media (min-width: 1101px) {
	.dat-hero .dat-hero-marca { --leyenda: clamp(46px, min(calc((100vw - 540px) / 10.585), calc((50vw + 80px) / 10.585)), 80px); }
}
.dat-hero h1 {
	max-width: 800px; font-family: var(--f-titulo); font-weight: var(--w-h1);
	font-size: clamp(26px, 3.15vw, 52px); line-height: 1.18; letter-spacing: -.02em;
}
.dat-h1-a { display: block; color: var(--cielo-200); }
.dat-h1-b { display: block; color: var(--blanco); }
.dat-hero-lead { margin: 22px 0 34px; max-width: 56ch; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: var(--pie-texto); }

.dat-populares { margin: 0; max-width: 820px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.dat-populares span { margin-right: 4px; font-weight: 500; color: var(--pie-texto); }
.dat-populares a { padding: 6px 14px; border: 1px solid rgba(var(--b-rgb), .3); border-radius: var(--radio-pill); color: var(--blanco); transition: background .15s ease, border-color .15s ease; }
.dat-populares a:hover { background: rgba(var(--b-rgb), .12); border-color: var(--blanco); }
/* «Necesito un defensor»: el enlace principal de la fila, como el botón que había en la barra (blanco con la paleta anterior y ámbar con la nueva) */
.dat-populares a.dat-pop-defensor { padding: 8px 20px; background: var(--blanco); border-color: var(--blanco); color: var(--azul-900); font-family: var(--f-titulo); font-weight: 600; font-size: 15px; line-height: 1.3; }
.dat-populares a.dat-pop-defensor:hover { background: var(--cielo-100); border-color: var(--cielo-100); }
html[data-paleta="nueva"] .dat-populares a.dat-pop-defensor { background: var(--ambar); border-color: var(--ambar); color: var(--azul-950); }
html[data-paleta="nueva"] .dat-populares a.dat-pop-defensor:hover { background: var(--ambar-hover); border-color: var(--ambar-hover); }

/* ══════════════════════════════════════════════════════════════
   2. ¿NECESITAS UN DEFENSOR? + ENCUENTRA TU SEDE
   Sección corriente, con la misma estructura que «Preguntas frecuentes»: a la izquierda el encabezado con la llamada al PBX y a la derecha
   la herramienta «Encuentra tu sede» de idpp02 (búsqueda, departamentos y resultados) en una tarjeta blanca como las de las demás secciones.
   ══════════════════════════════════════════════════════════════ */
.dat-ayuda { background: var(--cielo-050); scroll-margin-top: 22px; }
@media (max-width: 1100px) { .dat-ayuda { scroll-margin-top: 80px; } }
@media (max-width: 900px) { .dat-ayuda { scroll-margin-top: 112px; } }
.dat-ayuda-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.dat-ayuda .dat-cab { margin-bottom: 32px; }
.dat-ayuda .dat-h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.08; }
.dat-ayuda-tel { display: flex; align-items: center; gap: 18px; margin: 0 0 30px; color: var(--azul-900); }
.dat-ayuda-tel-ico { flex: 0 0 60px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--azul-900); color: var(--blanco); transition: transform .2s ease; }
.dat-ayuda-tel-ico svg { width: 26px; height: 26px; }
.dat-ayuda-tel small { display: block; margin-bottom: 4px; font-size: 14px; line-height: 1.3; color: var(--azul-600); }
.dat-ayuda-tel strong { display: block; font-family: var(--f-num); font-variant-numeric: tabular-nums; font-weight: 500; font-size: clamp(38px, 4vw, 52px); line-height: 1; letter-spacing: -.03em; }
.dat-ayuda-tel:hover strong { color: var(--cobalto-600); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.dat-ayuda-tel:hover .dat-ayuda-tel-ico { transform: scale(1.07); }
.dat-ayuda-datos { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--azul-100); display: grid; gap: 14px; }
.dat-ayuda-datos li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.45; color: var(--azul-700); }
.dat-ayuda-datos svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--cobalto-600); }

.dat-ayuda-der { min-width: 0; padding: 40px; background: var(--blanco); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.dat-ayuda-h3 { font-family: var(--f-titulo); font-weight: var(--w-h2); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; letter-spacing: var(--tr-h); color: var(--azul-900); }
.dat-ayuda-sub { margin: 8px 0 22px; font-size: 16px; line-height: 1.5; color: var(--azul-600); }
.dat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.dat-chip {
	padding: 6px 14px; border: 1.5px solid var(--azul-100); border-radius: var(--radio-pill); background: transparent; color: var(--azul-700); cursor: pointer;
	font-family: var(--f-titulo); font-weight: 500; font-size: 13.5px; line-height: 1.3; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dat-chip:hover { border-color: var(--azul-400); color: var(--azul-900); }
.dat-chip.is-on { background: var(--azul-900); border-color: var(--azul-900); color: var(--blanco); }
.dat-ayuda-res { height: 262px; overflow: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--azul-300) transparent; }
.dat-ayuda-res:focus-visible { outline: 2px solid var(--cobalto-500); outline-offset: 4px; border-radius: 6px; }
/* cuando hay más resultados por ver, el borde inferior se difumina para que no se corte una fila a la mitad */
.dat-ayuda-res.hay-mas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.dat-ayuda-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; margin: 0; padding: 24px; border-radius: 10px; background: var(--azul-025); text-align: center; font-size: 15px; line-height: 1.5; color: var(--azul-700); }
.dat-ayuda-vacio > span:last-child { max-width: 36ch; }
.dat-ayuda-vacio-ico { display: block; width: 72px; height: 72px; color: var(--azul-900); }
.dat-ayuda-vacio-ico svg { width: 100%; height: 100%; }
.dat-ayuda-pie { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0 0; }
.dat-ayuda-res .dat-res-lista { padding-right: 2px; }

/* ══════════════════════════════════════════════════════════════
   3. EXPLORADOR DE DATOS
   ══════════════════════════════════════════════════════════════ */
.dat-explorador { position: relative; background: linear-gradient(180deg, var(--azul-950) 0%, var(--azul-900) 100%); scroll-margin-top: 0; }
.dat-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.dat-tabs [role="tab"] {
	display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border: 1.5px solid rgba(var(--b-rgb), .3); border-radius: var(--radio-pill);
	background: transparent; color: var(--blanco); cursor: pointer; font-family: var(--f-titulo); font-weight: 500; font-size: 16px; line-height: 1.2;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dat-tabs [role="tab"] svg { width: 20px; height: 20px; }
.dat-tabs [role="tab"]:hover { background: rgba(var(--b-rgb), .12); }
.dat-tabs [role="tab"][aria-selected="true"] { background: var(--blanco); border-color: var(--blanco); color: var(--azul-900); }
.dat-tabpanel { margin-top: 28px; }
.dat-dos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.dat-grafica { padding: 34px 34px 30px; border: 1px solid rgba(var(--b-rgb), .14); border-radius: var(--radio-tarjeta); background: rgba(var(--b-rgb), .04); }
.dat-grafica .dat-h3 { color: var(--blanco); }
.dat-nota-graf { margin: 8px 0 24px; font-size: 14px; line-height: 1.5; color: var(--pie-texto); max-width: 62ch; }
.dat-fuente { margin: 28px 0 0; font-size: 13px; line-height: 1.5; color: var(--pie-texto-tenue); }

/* barras horizontales */
.dat-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.dat-barra {
	display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; align-items: center; gap: 14px; width: 100%; padding: 5px 8px; border: 0; border-radius: var(--radio);
	background: none; color: var(--blanco); font: inherit; font-size: 15px; line-height: 1.3; text-align: left;
}
.dat-barra-nombre { min-width: 0; }
.dat-barra-nombre b { font-family: var(--f-num); font-weight: 500; color: var(--cielo-200); }
.dat-barra-pista { display: block; height: 14px; border-radius: 7px; background: rgba(var(--b-rgb), .09); overflow: hidden; }
.dat-barra-relleno { display: block; height: 100%; width: calc(var(--v) / var(--max) * 100%); min-width: 4px; border-radius: 7px; background: var(--cobalto-400); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.dat-barra-valor { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 15px; text-align: right; }
.dat-barra-resto .dat-barra-relleno { background: var(--cielo-300); }
.dat-barras-largas .dat-barra { grid-template-columns: minmax(150px, 36%) minmax(0, 1fr) 48px; font-size: 14px; padding: 8px; }
.dat-js .dat-tabpanel:not(.is-in) .dat-barra-relleno { width: 0; }

/* columnas (noticias por año) */
.dat-columnas { list-style: none; margin: 0; padding: 0; height: 330px; display: flex; align-items: flex-end; justify-content: center; gap: 22px; border-bottom: 1px solid rgba(var(--b-rgb), .25); }
.dat-columnas li { flex: 1 1 0; max-width: 110px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.dat-col-valor { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 20px; margin-bottom: 8px; }
.dat-col-barra { display: block; width: 100%; height: calc(var(--v) / var(--max) * 240px); min-height: 4px; border-radius: var(--radio) var(--radio) 0 0; background: var(--cobalto-400); transition: height .9s cubic-bezier(.2, .7, .2, 1); }
.dat-col-parcial .dat-col-barra { background: repeating-linear-gradient(135deg, var(--cielo-300) 0 6px, var(--cobalto-400) 6px 12px); }
.dat-col-anio { position: absolute; top: 100%; margin-top: 10px; font-size: 15px; font-weight: 500; text-align: center; line-height: 1.2; white-space: nowrap; }
.dat-col-anio small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--pie-texto-tenue); }
.dat-js .dat-tabpanel:not(.is-in) .dat-col-barra { height: 4px; }
#dat-pan-noticias .dat-grafica { padding-bottom: 68px; }

/* dona (biblioteca) */
.dat-dona-caja { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: center; }
.dat-dona { width: 240px; height: 240px; overflow: visible; }
.dat-seg { transition: opacity .15s ease, stroke-width .15s ease; cursor: pointer; }
.dat-seg-0 { stroke: var(--cielo-100); }
.dat-seg-1 { stroke: var(--cobalto-400); }
.dat-seg-2 { stroke: var(--cielo-300); }
.dat-seg-3 { stroke: var(--cobalto-500); }
.dat-seg-4 { stroke: var(--celeste-300); }
.dat-seg-5 { stroke: var(--celeste-500); }
.dat-dona-num { fill: var(--blanco); font-family: var(--f-num); font-weight: 500; font-size: 46px; }
.dat-dona-etq { fill: var(--pie-texto); font-family: var(--f-texto); font-size: 14px; }
.dat-hay-activo .dat-seg:not(.is-activo) { opacity: .28; }
.dat-seg.is-activo { stroke-width: 36; }
.dat-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dat-leyenda li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--radio); font-size: 15px; cursor: default; transition: background .15s ease, opacity .15s ease; }
.dat-leyenda li.is-activo { background: rgba(var(--b-rgb), .1); }
.dat-hay-activo .dat-leyenda li:not(.is-activo) { opacity: .5; }
.dat-leyenda-pto { width: 14px; height: 14px; border-radius: 50%; }
.dat-leyenda-pto.dat-seg-0 { background: var(--cielo-100); }
.dat-leyenda-pto.dat-seg-1 { background: var(--cobalto-400); }
.dat-leyenda-pto.dat-seg-2 { background: var(--cielo-300); }
.dat-leyenda-pto.dat-seg-3 { background: var(--cobalto-500); }
.dat-leyenda-pto.dat-seg-4 { background: var(--celeste-300); }
.dat-leyenda-pto.dat-seg-5 { background: var(--celeste-500); }
.dat-leyenda-val { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-weight: 500; }
.dat-leyenda-val small { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--pie-texto); }

/* detalle: tarjeta blanca junto a la gráfica */
.dat-detalle { padding: 32px; border-radius: var(--radio-tarjeta); background: var(--blanco); color: var(--azul-900); box-shadow: var(--sombra-modal); }
.dat-detalle .dat-btn-claro { background: var(--azul-900); color: var(--blanco); }
.dat-detalle .dat-btn-claro:hover { background: var(--cobalto-700); }
.dat-detalle .dat-btn-linea { color: var(--azul-900); border-color: var(--azul-300); }
.dat-detalle .dat-btn-linea:hover { background: var(--cielo-050); border-color: var(--azul-700); }
.dat-detalle .dat-enlace { color: var(--cobalto-600); }
.dat-detalle .dat-enlace:hover { color: var(--azul-900); }
.dat-lectura p { color: var(--azul-700); }
.dat-lectura .dat-gran-num { margin: 0; font-family: var(--f-num); font-variant-numeric: tabular-nums; font-weight: 500; font-size: clamp(56px, 6vw, 92px); line-height: 1; letter-spacing: -.04em; color: var(--azul-900); }
.dat-lectura .dat-gran-etq { margin: 10px 0 20px; font-family: var(--f-titulo); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--cobalto-600); }
.dat-lectura .dat-acciones-fila { margin-top: 26px; }

.dat-campo { display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--azul-025); border: 1.5px solid var(--azul-100); border-radius: var(--radio); }
.dat-campo:focus-within { border-color: var(--cobalto-500); background: var(--blanco); }
.dat-campo svg { width: 20px; height: 20px; color: var(--azul-600); }
.dat-campo input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font-family: var(--f-texto); font-size: 16px; color: var(--azul-900); }
.dat-campo input::placeholder { color: var(--azul-400); opacity: 1; }
.dat-campo input:focus { outline: none; }
.dat-res-cab { margin: 0 0 4px; font-family: var(--f-titulo); font-weight: 600; font-size: 16px; color: var(--cobalto-700); }
.dat-res-lista { list-style: none; margin: 0; padding: 0; }
.dat-res-item { padding: 14px 0; border-top: 1px solid var(--azul-100); }
.dat-res-item:first-child { border-top: 0; }
.dat-res-tag { display: inline-block; padding: 2px 10px; border-radius: var(--radio-pill); background: var(--cielo-100); color: var(--cobalto-700); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.dat-res-item h4 { margin: 8px 0 4px; font-family: var(--f-titulo); font-weight: 600; font-size: 17px; line-height: 1.3; }
.dat-res-item p { margin: 0 0 2px; font-size: 15px; line-height: 1.5; color: var(--azul-700); }
.dat-res-item a { color: var(--cobalto-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dat-res-vacio { margin: 0; font-size: 15px; color: var(--azul-700); }
.dat-res-vacio a { color: var(--cobalto-600); font-weight: 600; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   4. REPORTES Y CONJUNTOS DE DATOS
   ══════════════════════════════════════════════════════════════ */
/* fondo claro del cuerpo: alterna con el explorador oscuro de arriba y con Noticias (azul-075) de abajo; las tarjetas llevan borde como las de redes */
.dat-reportes { background: var(--blanco); }
.dat-reportes-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dat-tarjeta { height: 100%; display: flex; flex-direction: column; padding: 34px 32px 30px; background: var(--blanco); border: 1px solid var(--azul-100); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); transition: transform .2s ease, box-shadow .2s ease; }
.dat-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.dat-tarjeta p { color: var(--azul-700); }
.dat-tarjeta .dat-enlace { margin-top: auto; padding-top: 8px; }
.dat-tarjeta-ico { display: block; width: 76px; height: 76px; margin-bottom: 24px; color: var(--azul-900); }
.dat-h3-tarjeta a:hover { color: var(--cobalto-600); }
.dat-fichas { list-style: none; margin: 4px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dat-fichas li { padding: 3px 12px; border-radius: var(--radio-pill); background: var(--cielo-100); color: var(--cobalto-700); font-size: 13px; font-weight: 600; line-height: 1.5; }
.dat-medida { margin-top: 32px; padding: 44px 48px; border-radius: var(--radio-tarjeta); background: linear-gradient(110deg, var(--azul-900) 0%, var(--cobalto-700) 100%); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.dat-medida-txt { max-width: 640px; }
.dat-medida-txt p { margin: 12px 0 0; font-size: 18px; color: var(--cielo-100); }

/* ══════════════════════════════════════════════════════════════
   5. CÓMO TE DEFENDEMOS
   ══════════════════════════════════════════════════════════════ */
/* Barra de bloques de color a todo el ancho: el mismo aspecto que «los cuatro caminos» de idpp02 (pictograma en línea blanca arriba,
   etiqueta, título en negrita, flecha abajo), con la paleta de idpp03. Cada bloque toma su color de --fondo. */
.dat-enfoques { padding-bottom: 88px; }
.dat-enfoques .dat-cab { margin-bottom: 56px; }
.dat-enfoques-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.dat-enfoque {
	--fondo: var(--azul-700); --etq: var(--cielo-200); --flecha: var(--blanco);
	--ic-f: rgba(var(--b-rgb), .16); --ic-a: var(--cielo-300); --ic-w: rgba(var(--b-rgb), .07);
	display: flex; flex-direction: column; height: 100%; min-height: 380px; padding: 56px 30px 40px;
	background: var(--fondo); color: var(--blanco);
}
.dat-e1 { --fondo: var(--azul-700); }
.dat-e2 { --fondo: var(--azul-900); }
.dat-e3 { --fondo: var(--azul-600); }
.dat-e4 { --fondo: var(--cobalto-700); }
.dat-e5 { --fondo: var(--azul-800); }
.dat-enfoque:focus-visible { outline: 3px solid var(--blanco); outline-offset: -8px; }
.dat-enfoque-ico { display: block; width: 88px; height: 88px; margin-bottom: 24px; }
.dat-enfoque-ico svg { width: 100%; height: 100%; }
.dat-enfoque-etq { font-family: var(--f-titulo); font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--etq); }
.dat-enfoque-tit { margin-top: 6px; font-family: var(--f-titulo); font-weight: var(--w-h3); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -.015em; }
.dat-enfoque-flecha { margin-top: auto; padding-top: 24px; color: var(--flecha); }
.dat-enfoque-flecha svg { width: 28px; height: 28px; transition: transform .2s ease; }
.dat-enfoque:hover .dat-enfoque-tit { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.dat-enfoque:hover .dat-enfoque-flecha svg { transform: translateX(6px); }

/* ══════════════════════════════════════════════════════════════
   6. NOTICIAS
   ══════════════════════════════════════════════════════════════ */
.dat-noticias { background: var(--azul-075); }
.dat-noticias-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.dat-nota-foto { display: block; border-radius: var(--radio-tarjeta); overflow: hidden; aspect-ratio: 16 / 10; background: var(--azul-075); }
.dat-nota-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dat-nota-dest:hover .dat-nota-foto img { transform: scale(1.03); }
.dat-nota-dest .dat-nota-txt { padding-top: 22px; }
.dat-nota-txt p { color: var(--azul-700); }
.dat-h3-nota a:hover { color: var(--cobalto-600); }
.dat-notas-lista { display: flex; flex-direction: column; }
.dat-nota { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px 0; border-top: 1px solid var(--azul-100); }
.dat-nota:first-child { padding-top: 0; border-top: 0; }
.dat-nota-mini { display: block; border-radius: var(--radio-tarjeta); overflow: hidden; aspect-ratio: 1; background: var(--azul-075); }
.dat-nota-mini img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════════════════════════
   7. EL IDPP EN REDES
   ══════════════════════════════════════════════════════════════ */
.dat-redes-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.dat-redes-tab {
	display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; border: 1.5px solid var(--azul-300); border-radius: var(--radio-pill);
	background: transparent; color: var(--azul-800); cursor: pointer; font-family: var(--f-titulo); font-weight: 500; font-size: 15px; line-height: 1.2;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dat-redes-tab svg { width: 18px; height: 18px; color: var(--cobalto-600); }
.dat-redes-tab:hover { background: var(--azul-075); }
.dat-redes-tab[aria-selected="true"] { background: var(--azul-900); border-color: var(--azul-900); color: var(--blanco); }
.dat-redes-tab[aria-selected="true"] svg { color: var(--cielo-200); }

.dat-flechas { display: flex; gap: 10px; }
.dat-flecha {
	width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--azul-300); border-radius: 50%;
	background: transparent; color: var(--azul-800); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dat-flecha svg { width: 20px; height: 20px; }
.dat-flecha:hover:not(:disabled) { background: var(--azul-900); border-color: var(--azul-900); color: var(--blanco); }
.dat-flecha:disabled { opacity: .35; cursor: default; }

.dat-red-pista {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scrollbar-width: none;
	padding: 6px 6px 26px; margin: -6px -6px 0;
}
.dat-red-pista::-webkit-scrollbar { display: none; }
.dat-red-card { display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--azul-100); border-radius: var(--radio-tarjeta); overflow: hidden; scroll-snap-align: start; box-shadow: var(--sombra-tarjeta); }
.dat-red-foto { aspect-ratio: 4 / 3; background: var(--azul-075); }
.dat-red-foto img { width: 100%; height: 100%; object-fit: cover; }
.dat-red-video { aspect-ratio: 16 / 9; background: var(--azul-950); }
.dat-red-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.dat-red-cuerpo { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 22px 24px 24px; }
.dat-red-red { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--f-titulo); font-weight: 600; font-size: 13px; color: var(--azul-600); }
.dat-red-red svg { width: 16px; height: 16px; color: var(--cobalto-600); }
.dat-red-cita { flex: 1; margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--azul-900); }
.dat-red-tag { display: inline-block; margin-bottom: 8px; padding: 2px 12px; border-radius: var(--radio-pill); background: var(--cielo-100); color: var(--cobalto-700); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.dat-red-cuerpo .dat-fecha { display: block; margin-bottom: 14px; }
.dat-red-pie { margin: 28px 0 0; text-align: center; }
.dat-red-fb { display: flex; align-items: center; flex-wrap: wrap; gap: 24px 32px; padding: 40px 44px; background: var(--blanco); border: 1px solid var(--azul-100); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.dat-red-fb-ico { flex: 0 0 72px; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--azul-900); color: var(--blanco); }
.dat-red-fb-ico svg { width: 34px; height: 34px; }
.dat-red-fb > div { flex: 1 1 320px; }
.dat-red-fb p { margin: 6px 0 0; color: var(--azul-700); }
.dat-red-tiktok { display: flex; justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   8. PREGUNTAS FRECUENTES
   ══════════════════════════════════════════════════════════════ */
.dat-faq { background: var(--cielo-050); }
.dat-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.dat-faq-grid .dat-cab { margin-bottom: 0; position: sticky; top: 120px; }
.dat-faq-lista details { margin-bottom: 10px; background: var(--blanco); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.dat-faq-lista summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; cursor: pointer; font-family: var(--f-titulo); font-weight: var(--w-h3); font-size: 18px; line-height: 1.35; }
.dat-faq-lista summary::-webkit-details-marker { display: none; }
.dat-faq-lista summary svg { width: 22px; height: 22px; color: var(--cobalto-600); transition: transform .2s ease; }
.dat-faq-lista details[open] summary svg { transform: rotate(180deg); }
.dat-faq-lista summary:hover { color: var(--cobalto-600); }
.dat-faq-lista details p { margin: 0; padding: 0 26px 24px; color: var(--azul-700); }

/* ══════════════════════════════════════════════════════════════
   PIE
   ══════════════════════════════════════════════════════════════ */
.dat-footer { background: var(--azul-950); color: var(--pie-texto); padding: 72px 0 28px; font-size: 15px; }
.dat-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.dat-footer h2 { margin-bottom: 16px; font-family: var(--f-titulo); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--blanco); }
.dat-footer ul { list-style: none; margin: 0; padding: 0; }
.dat-footer li { margin-bottom: 8px; }
.dat-footer li svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.dat-footer a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
.dat-redes { display: flex; gap: 10px; margin-top: 18px; }
.dat-redes li { margin: 0; }
.dat-redes a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--b-rgb), .25); border-radius: 50%; color: var(--blanco); transition: background .15s ease; }
.dat-redes a:hover { background: rgba(var(--b-rgb), .14); text-decoration: none; }
.dat-redes svg { width: 18px; height: 18px; margin: 0; vertical-align: 0; }
.dat-footer-pie { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(var(--b-rgb), .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 13px; color: var(--pie-texto-tenue); }

/* Círculo oscuro con aro claro: se distingue sobre cualquier fondo (el aro lo marca sobre los bloques azules, el explorador y el pie; el círculo, sobre los claros) */
.dat-arriba { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--blanco); border-radius: 50%; background: var(--azul-900); color: var(--blanco); box-shadow: 0 0 0 1px rgba(14, 31, 54, .28), 0 8px 22px rgba(14, 31, 54, .4); cursor: pointer; transition: background .15s ease; }
.dat-arriba svg { width: 20px; height: 20px; transform: rotate(180deg); }
.dat-arriba:hover { background: var(--cobalto-700); }
html[data-paleta="nueva"] .dat-arriba { color: var(--ambar); }

/* Panel de revisión de tipografía (solo para la propuesta) */
.dat-revision { position: fixed; left: 16px; bottom: 16px; z-index: 95; }
.dat-revision-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid rgba(var(--b-rgb), .35); border-radius: var(--radio-pill); background: var(--azul-900); color: var(--blanco); box-shadow: var(--sombra-panel); cursor: pointer; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; }
.dat-revision-btn:hover { background: var(--cobalto-700); }
.dat-revision-cuerpo { position: absolute; left: 0; bottom: calc(100% + 10px); width: 330px; padding: 18px 20px 16px; border-radius: var(--radio-tarjeta); background: var(--blanco); color: var(--azul-900); box-shadow: var(--sombra-modal); font-family: 'Inter', system-ui, sans-serif; }
.dat-revision-tit { margin: 0 0 10px; font-weight: 700; font-size: 15px; }
.dat-revision-cuerpo label { display: block; padding: 7px 4px; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.dat-revision-cuerpo label em { font-style: normal; font-size: 12.5px; color: var(--azul-600); }
.dat-revision-cuerpo input { margin-right: 6px; accent-color: var(--cobalto-600); }
.dat-revision-nota { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--azul-100); font-size: 12.5px; line-height: 1.5; color: var(--azul-600); }

/* ══════════════════════════════════════════════════════════════
   PICTOGRAMAS — iconografía ilustrada bicolor (inc/pictogramas.php), la del sistema de diseño.
   Tres capas por dibujo: trazo (currentColor), relleno tenue (--ic-f) y acento (--ic-a); --ic-w es el «papel».
   Aquí el acento usa cobalto-500 (más vivo que el azul-400 del sistema); sobre oscuro pasan a translúcido y cielo-300.
   ══════════════════════════════════════════════════════════════ */
.dat-oscuro { --ic-f: rgba(var(--b-rgb), .16); --ic-a: var(--cielo-300); --ic-w: rgba(var(--b-rgb), .07); }
.dat-pic { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.dat-pic .f { fill: var(--ic-f); }
.dat-pic .a { fill: var(--ic-a); }
.dat-pic .w { fill: var(--ic-w); }
.dat-pic .sw { stroke: var(--blanco); }
.dat-pic .ac { stroke: var(--ic-a); stroke-width: 1.8; }
.dat-enfoque:hover .dat-pic, .dat-tarjeta:hover .dat-pic { transform: translateY(-3px); }

/* ══════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES (mínimo: solo la portada es parte de la propuesta)
   ══════════════════════════════════════════════════════════════ */
.dat-interior { padding: 150px 0 88px; min-height: 60vh; background: var(--azul-075); }
.dat-tit-pagina { margin-bottom: 28px; font-size: clamp(30px, 4.2vw, 46px); }
.dat-cuerpo { max-width: 70ch; font-size: 17px; line-height: 1.75; color: var(--azul-700); }
.dat-listado { list-style: none; margin: 0; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 24px; }
.dat-listado li { padding-bottom: 24px; border-bottom: 1px solid var(--azul-100); }
.dat-listado h2 { margin-bottom: 8px; font-family: var(--f-titulo); font-weight: var(--w-h3); font-size: 22px; color: var(--azul-700); }
.dat-listado p { margin: 0; }
.dat-listado a:hover { color: var(--cobalto-600); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — mismos quiebres que el sistema de diseño (560 / 900 / 1200), más 1100 y 760 propios del menú flotante
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
	.dat-nav-btn { padding: 9px 10px; gap: 4px; }
}
@media (max-width: 1100px) {
	/* el menú no cabe en una fila: pasa a una segunda fila de la misma barra (con desplazamiento lateral si hace falta), sin botón de hamburguesa */
	.dat-pill { flex-wrap: wrap; row-gap: 0; padding: 8px 12px 10px 20px; border-radius: 34px; }
	.dat-nav { order: 3; flex: 0 0 100%; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid rgba(var(--b-rgb), .16); overflow-x: auto; scrollbar-width: none; }
	.dat-nav::-webkit-scrollbar { display: none; }
	.dat-nav-btn { flex-shrink: 0; padding: 9px 14px; gap: 6px; }
	.dat-nav.dat-nav-mas { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
	.dat-ayuda-grid { gap: 40px; }
	.dat-ayuda-der { padding: 32px; }
	.dat-enfoques-lista { grid-template-columns: repeat(6, 1fr); }
	.dat-enfoques-lista li { grid-column: span 2; }
	.dat-enfoques-lista li:nth-child(n + 4) { grid-column: span 3; }
	.dat-enfoque { min-height: 320px; }
	.dat-acciones, .dat-nav + .dat-acciones { margin-left: auto; }
	.dat-interior { padding-top: 190px; }
	.dat-hero-foto { display: none; }
	/* sin la foto, el resplandor pasa a la esquina inferior derecha (detrás de los enlaces) y no queda bajo el lema */
	.dat-hero {
		background:
			radial-gradient(70% 55% at 92% 96%, rgba(64, 138, 221, .40) 0%, rgba(64, 138, 221, .12) 45%, rgba(64, 138, 221, 0) 72%),
			linear-gradient(105deg, var(--azul-950) 0%, #123056 55%, var(--cobalto-700) 130%);
	}
	.dat-hero-punto { display: none; }
	.dat-arcos { right: -380px; opacity: .8; }
}
@media (max-width: 900px) {
	.dat-sec { padding: 72px 0; }
	.dat-ayuda-grid { grid-template-columns: 1fr; gap: 36px; }
	.dat-ayuda-res { height: auto; max-height: 340px; }
	.dat-ayuda-vacio { height: auto; }
	.dat-dos { grid-template-columns: 1fr; }
	.dat-reportes-lista { grid-template-columns: 1fr; }
	.dat-noticias-grid { grid-template-columns: 1fr; gap: 36px; }
	.dat-faq-grid { grid-template-columns: 1fr; gap: 32px; }
	.dat-faq-grid .dat-cab { position: static; }
	.dat-footer-grid { grid-template-columns: 1fr 1fr; }
	.dat-hero { padding: 172px 0 80px; min-height: 0; }
	.dat-hero-marca { --leyenda: clamp(26px, 6vw, 48px); }
	.dat-medida { padding: 32px 28px; }
	.dat-cab { margin-bottom: 40px; }
}
@media (max-width: 760px) {
	.dat-red-pista { grid-auto-columns: minmax(280px, 86%); }
	.dat-red-fb { padding: 30px 26px; }
	.dat-enfoques-lista { grid-template-columns: repeat(2, 1fr); }
	.dat-enfoques-lista li, .dat-enfoques-lista li:nth-child(n + 4) { grid-column: auto; }
	.dat-enfoques-lista li:last-child { grid-column: 1 / -1; }
	.dat-enfoque { min-height: 300px; padding: 40px 22px 30px; }
	.dat-enfoque-tit { font-size: 20px; }
	.dat-dona-caja { grid-template-columns: 1fr; justify-items: center; }
	.dat-leyenda { width: 100%; }
	.dat-barra { grid-template-columns: 118px minmax(0, 1fr) 34px; gap: 10px; font-size: 14px; }
	.dat-barras-largas .dat-barra { grid-template-columns: minmax(0, 1fr) 46px; row-gap: 6px; }
	.dat-barras-largas .dat-barra-nombre { grid-column: 1 / -1; }
	.dat-barras-largas .dat-barra-pista { grid-column: 1; grid-row: 2; }
	.dat-barras-largas .dat-barra-valor { grid-column: 2; grid-row: 2; }
	.dat-grafica { padding: 24px 18px; }
	.dat-detalle { padding: 26px 22px; }
}
@media (max-width: 560px) {
	:root { --gutter: 18px; }
	.dat-ayuda-der { padding: 26px 20px; }
	.dat-ayuda-tel-ico { flex-basis: 52px; width: 52px; height: 52px; }
	.dat-redes-tab { padding: 10px 16px; font-size: 14px; }
	.dat-flecha { width: 44px; height: 44px; }
	.dat-header { top: 10px; padding: 0 10px; }
	.dat-pill { min-height: 64px; padding: 6px 8px 8px 14px; }
	.dat-marca { --marca-h: 46px; }
	.dat-icono-btn { width: 42px; height: 42px; }
	.dat-nav { margin-top: 4px; padding-top: 8px; }
	.dat-nav-btn { padding: 8px 12px; font-size: 14px; }
	.dat-panel { padding: 22px 20px; }
	.dat-drop, .dat-drop-2 { left: 0; right: 0; width: auto; }
	.dat-drop-2 ul { columns: 1; }
	.dat-hero { padding: 148px 0 64px; }
	.dat-hero-marca { --leyenda: min(31px, calc((100vw - 56px) / 10.3)); gap: 16px; margin-bottom: 26px; }
	.dat-hero h1 { font-size: 20px; }
	.dat-interior { padding-top: 160px; }
	.dat-arcos { opacity: .45; }
	.dat-tabs [role="tab"] { padding: 11px 16px; font-size: 15px; }
	.dat-columnas { gap: 10px; height: 300px; }
	.dat-enfoques-lista { grid-template-columns: 1fr; }
	.dat-enfoques-lista li:last-child { grid-column: auto; }
	.dat-enfoque { min-height: 0; padding: 36px 24px 28px; }
	.dat-enfoque-ico { width: 72px; height: 72px; margin-bottom: 20px; }
	.dat-enfoque-flecha { padding-top: 20px; }
	.dat-nota { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
	.dat-footer-grid { grid-template-columns: 1fr; }
	.dat-medida .dat-acciones-fila { width: 100%; }
	.dat-medida .dat-btn { width: 100%; }
	.dat-revision-cuerpo { width: min(330px, calc(100vw - 32px)); }
}
/* ══════════════════════════════════════════════════════════════
   PALETA NUEVA — html[data-paleta="nueva"]
   Los azules institucionales siguen dominando (fondos oscuros, titulares, enlaces, gráficas). Aquí solo cambia el blanco y
   se reparten dos cálidos:
   · ámbar  → lo que se puede hacer o mirar primero: botón principal, barra seleccionada, año en curso, acento de los pictogramas;
   · tierra → énfasis de información: fechas, cabecera de resultados, icono de la pestaña activa, la banda de solicitud de información.
   Sin la paleta nueva («actual») nada de este bloque se aplica.
   ══════════════════════════════════════════════════════════════ */
html[data-paleta="nueva"] {
	--blanco: #FBF8F3;
	--b-rgb: 251, 248, 243;
	--ic-a: var(--ambar);
}
html[data-paleta="nueva"] .dat-oscuro { --ic-a: var(--ambar); }

/* botones */
html[data-paleta="nueva"] .dat-btn-claro { background: var(--ambar); color: var(--azul-950); }
html[data-paleta="nueva"] .dat-btn-claro:hover { background: var(--ambar-hover); }
html[data-paleta="nueva"] .dat-detalle .dat-btn-claro { background: var(--azul-900); color: var(--blanco); }
html[data-paleta="nueva"] .dat-detalle .dat-btn-claro:hover { background: var(--cobalto-700); }
html[data-paleta="nueva"] .dat-btn-linea:hover { border-color: var(--ambar); }
html[data-paleta="nueva"] .dat-detalle .dat-btn-linea:hover { background: var(--papel-200); border-color: var(--azul-700); }

/* portada: pequeños toques de ámbar sobre el azul */
html[data-paleta="nueva"] .dat-arco-b { stroke: var(--ambar); stroke-opacity: .85; }
html[data-paleta="nueva"] .dat-hero-punto { width: 44px; height: 44px; margin: 10px 0 0 10px; background: var(--ambar); box-shadow: 0 0 0 8px rgba(247, 164, 38, .2); }
html[data-paleta="nueva"] .dat-hero-foto { box-shadow: 0 0 0 10px rgba(var(--b-rgb), .08), 0 30px 80px rgba(0, 0, 0, .4); }
html[data-paleta="nueva"] .dat-form-busca button:hover { background: var(--tierra); }

/* menú superior: textos en blanco; el ámbar marca lo que responde al clic (chevrons) y el botón abierto o con el cursor encima */
html[data-paleta="nueva"] .dat-chev { color: var(--ambar); opacity: 1; }
html[data-paleta="nueva"] .dat-nav-btn[aria-expanded="true"] { color: var(--ambar); }
@media (hover: hover) { html[data-paleta="nueva"] .dat-nav-btn:hover { color: var(--ambar); } }
/* la lupa del buscador (y su X al abrirlo) también en ámbar; el círculo sigue neutro, no se rellena */
html[data-paleta="nueva"] .dat-icono-btn { color: var(--ambar); }

/* marca de sección: barra corta de rojo tierra sobre claro y de ámbar sobre oscuro (la misma del hero) */
html[data-paleta="nueva"] .dat-cab .dat-h2::before { content: ""; display: block; width: 44px; height: 4px; margin-bottom: 22px; border-radius: 2px; background: var(--tierra); }
html[data-paleta="nueva"] .dat-cab-oscura .dat-h2::before { background: var(--ambar); }

/* explorador de datos */
html[data-paleta="nueva"] .dat-tabs [role="tab"] svg { color: var(--ambar); }
html[data-paleta="nueva"] .dat-tabs [role="tab"][aria-selected="true"] svg { color: var(--tierra); }
html[data-paleta="nueva"] .dat-col-parcial .dat-col-barra { background: repeating-linear-gradient(135deg, var(--ambar) 0 6px, var(--cobalto-400) 6px 12px); }
html[data-paleta="nueva"] .dat-col-parcial .dat-col-anio small { color: var(--ambar); }
html[data-paleta="nueva"] .dat-campo { background: var(--papel-200); border-color: #E2D9CB; }
html[data-paleta="nueva"] .dat-campo:focus-within { background: var(--blanco); border-color: var(--cobalto-500); }
html[data-paleta="nueva"] .dat-res-cab { color: var(--tierra); }
html[data-paleta="nueva"] .dat-res-item { border-top-color: #E7DFD2; }

/* reportes: la banda de solicitud de información es el contrapeso cálido de la página */
html[data-paleta="nueva"] .dat-medida { background: linear-gradient(110deg, var(--tierra) 0%, var(--tierra-700) 100%); }
html[data-paleta="nueva"] .dat-medida-txt p { color: rgba(var(--b-rgb), .94); }
html[data-paleta="nueva"] .dat-medida .dat-btn-claro { background: var(--blanco); color: var(--tierra); }
html[data-paleta="nueva"] .dat-medida .dat-btn-claro:hover { background: var(--papel-200); }
html[data-paleta="nueva"] .dat-medida .dat-btn-linea:hover { border-color: var(--blanco); }

/* noticias: las fechas en rojo tierra */
html[data-paleta="nueva"] .dat-fecha { color: var(--tierra); }

/* enfoques: acentos de ámbar en pictogramas y flechas, y un bloque de rojo tierra en el centro de la barra */
html[data-paleta="nueva"] .dat-enfoque { --ic-a: var(--ambar); --flecha: var(--ambar); }
html[data-paleta="nueva"] .dat-e3 { --fondo: var(--tierra); --etq: rgba(var(--b-rgb), .92); --flecha: var(--blanco); --ic-a: var(--ambar-hover); }

/* redes: icono de la red seleccionada en ámbar y la fecha de cada publicación en rojo tierra (como las noticias) */
html[data-paleta="nueva"] .dat-redes-tab[aria-selected="true"] svg { color: var(--ambar); }
html[data-paleta="nueva"] .dat-red-card, html[data-paleta="nueva"] .dat-red-fb { border-color: #E7DFD2; }

/* ¿necesitas un defensor? + encuentra tu sede: círculo del teléfono en ámbar, iconos de los datos en rojo tierra, campo y ficha vacía en papel */
html[data-paleta="nueva"] .dat-ayuda-tel-ico { background: var(--ambar); color: var(--azul-950); }
html[data-paleta="nueva"] .dat-ayuda-datos svg { color: var(--tierra); }
html[data-paleta="nueva"] .dat-ayuda-vacio { background: var(--papel-200); }
html[data-paleta="nueva"] .dat-chip { border-color: #E2D9CB; }
html[data-paleta="nueva"] .dat-chip:hover { border-color: var(--azul-400); }
html[data-paleta="nueva"] .dat-chip.is-on { border-color: var(--azul-900); }

/* preguntas frecuentes */
html[data-paleta="nueva"] .dat-faq-lista details[open] { box-shadow: var(--sombra-hover); }
html[data-paleta="nueva"] .dat-faq-lista details[open] summary svg { color: var(--tierra); }

/* pie */
html[data-paleta="nueva"] .dat-footer ul:not(.dat-redes) svg { color: var(--ambar); }
html[data-paleta="nueva"] .dat-redes a:hover { border-color: var(--ambar); }

/* panel de revisión: la paleta va primero */
.dat-revision-sub { padding: 0; margin: 0 0 4px; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; color: var(--azul-600); }
.dat-revision-paleta { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--azul-100); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.dat-barra-relleno, .dat-col-barra, .dat-tarjeta, .dat-enfoque-flecha svg, .dat-nota-foto img, .dat-ayuda-tel-ico, .dat-marca { transition: none; }
	.dat-red-pista { scroll-behavior: auto; }
}