/* Datina: diseño compartido por todas las páginas. 03_construir_sitio.py lo copia a sitio/datina.css.
   Una sola definición por componente, en este orden: valores del sistema, base, botones y tarjetas, barra y buscador,
   portada, bloques de la portada, títulos de página, Tu provincia, Sobre nosotros, páginas de sección, fichas, controles,
   gráficos, herramientas, política, artículos, pie y preferencias del sistema (menos movimiento, menos transparencia).
   Cada componente lleva sus ajustes de pantalla al lado. Paleta de la bandera, solo modo claro.
   Anchos de pantalla donde cambia el diseño: 560 px (celular chico), 760 px (celular y tableta) y 1080 px (computadora angosta).
   El texto "Ver todo el país" del indicador de provincia aparece recién desde 1320 px, cuando entra junto a los temas. */

/* ---------- valores del sistema ---------- */
/* Letras de reemplazo (etapa 13, y desde la etapa 14 sin Arial, pedido del autor): mientras llegan Roboto Flex y Roboto Mono,
   el navegador usa Roboto (Android, ChromeOS y quien la tenga instalada) o, si no está, Verdana (Windows, Mac y iOS), achicadas
   para que ocupen el mismo ancho, así los renglones no cambian cuando llega la letra y la página no salta. Para el código, Consolas.
   Una familia por letra y por estilo, porque cada una se achica distinto: el texto común y los títulos condensados (el número es su
   ancho, "wdth"). Medido en el navegador: Roboto Flex mide el 98,7% de Roboto y el 86,4% de Verdana en el texto, y los títulos
   condensados, entre el 36% y el 95%. Si una letra no está instalada, el navegador pasa a la siguiente. Los títulos de una sola
   palabra (DATINA, la marca) no empujan nada y quedan con el reemplazo común. El lema ("wdth" 30) va un poco más grande que su
   ancho (tan chico no se leía) y sigue entrando en un renglón desde los 360 píxeles. Cada reemplazo cubre solo los caracteres de la
   parte latina de Roboto Flex que baja el sitio: los demás (las flechas, por ejemplo) se dibujan como antes.
   Antes de la etapa 13 el reemplazo era Verdana sin achicar, que ocupa un 16% más de ancho: por eso la página saltaba. */
@font-face{font-family:"Datina Roboto";src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");font-weight:100 550;size-adjust:98.7%;ascent-override:94.2%;descent-override:24.3%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Roboto";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:551 900;size-adjust:101.6%;ascent-override:91.5%;descent-override:23.6%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Verdana";src:local("Verdana");font-weight:100 550;size-adjust:86.4%;ascent-override:107.6%;descent-override:27.8%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Verdana";src:local("Verdana Bold"),local("Verdana-Bold");font-weight:551 900;size-adjust:80.9%;ascent-override:115.0%;descent-override:29.7%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Roboto C30";src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");font-weight:100 900;size-adjust:55.5%;ascent-override:167.6%;descent-override:43.2%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Verdana C30";src:local("Verdana");font-weight:100 900;size-adjust:48.6%;ascent-override:191.4%;descent-override:49.4%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Roboto C45";src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");font-weight:100 900;size-adjust:53.2%;ascent-override:174.8%;descent-override:45.1%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Verdana C45";src:local("Verdana");font-weight:100 900;size-adjust:46.5%;ascent-override:200.0%;descent-override:51.6%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Roboto C55";src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");font-weight:100 900;size-adjust:59.0%;ascent-override:157.6%;descent-override:40.7%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Verdana C55";src:local("Verdana");font-weight:100 900;size-adjust:51.6%;ascent-override:180.2%;descent-override:46.5%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Roboto C60";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:100 900;size-adjust:94.9%;ascent-override:98.0%;descent-override:25.3%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Verdana C60";src:local("Verdana Bold"),local("Verdana-Bold");font-weight:100 900;size-adjust:77.9%;ascent-override:119.4%;descent-override:30.8%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Roboto C75";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:100 900;size-adjust:90.2%;ascent-override:103.1%;descent-override:26.6%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Verdana C75";src:local("Verdana Bold"),local("Verdana-Bold");font-weight:100 900;size-adjust:71.8%;ascent-override:129.5%;descent-override:33.4%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* la bajada (etapa 38): Roboto Flex en 340 y con el tamaño óptico de 28 mide el 92,4% de Roboto y el 80,9% de Verdana (medido en el navegador con
   el texto de todas las bajadas), así que tiene su propio reemplazo: sin él, la bajada perdía un renglón al llegar la letra y la página saltaba */
@font-face{font-family:"Datina Roboto B";src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");font-weight:100 900;size-adjust:92.4%;ascent-override:100.6%;descent-override:26.0%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Verdana B";src:local("Verdana");font-weight:100 900;size-adjust:80.9%;ascent-override:114.9%;descent-override:29.7%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Datina Mono";src:local("Consolas");font-weight:100 900;size-adjust:109.1%;ascent-override:96.2%;descent-override:24.7%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:light;
  /* colores: la bandera y los neutros */
  --bg:#FFFFFF; --fondo:#F6F8FB; --ink:#18212B; --muted:#56606C; --faint:#98A2AE; --line:#E4E9EF;
  --faint-texto:#687280;   /* el gris de los textos chicos que dicen algo (etapa 34): 4,9 a 1 sobre blanco, --faint da 2,6 */
  --borde:#D9E3EE; --borde-claro:#C6DCF1; --superficie:#F7FAFD; --superficie-2:#EDF2F8; --superficie-3:#E2EAF3;
  --esqueleto:#EDF2F8;   /* formas de carga (el mismo valor va escrito en los dibujos de datina.css) */
  --celeste:#74ACDF; --celeste-fuerte:#2C74B5; --celeste-suave:#DCEBF8; --celeste-suave-2:#D1E4F5;
  --azul:#2C74B5; --azul-hondo:#1F5E97;
  --sol:#F6B40E; --sol-fuerte:#B27A00; --sol-suave:#FDF0CC; --sol-borde:#85340A;
  --sol-texto:#7F5500;
  /* cambio bueno o malo (etapa 16): verde azulado y bermellón de la paleta de Okabe e Ito, que se distinguen también con daltonismo.
     Solo donde la dirección no se discute (ver "Reglas de diseño" en CLAUDE.md). Los de texto pasan 4,5 a 1 sobre el blanco */
  --bueno:#009E73; --bueno-suave:#BFE7DA; --bueno-texto:#007A59; --malo:#D55E00; --malo-suave:#F5D2B8; --malo-texto:#B34700;  /* dorado del sol para texto chico: pasa 4,5 a 1 sobre el blanco y sobre el vidrio del menú encima del azul */
  --rojo:#C8102E; --rojo-oscuro:#8A1422; /* gorro frigio del escudo */
  --ocde:#7A4FA0; --ocde-suave:#ECE3F5; /* promedio de los países de la OCDE, solo dentro de los gráficos */
  /* sobre el azul de la portada */
  --en-azul-texto:rgba(255,255,255,.95); --en-azul-borde:rgba(255,255,255,.7); --en-azul-linea:rgba(255,255,255,.35); --en-azul-velo:rgba(255,255,255,.14);
  /* letra: diez tamaños y nada más. Los que van entre dos valores se ajustan al ancho de la pantalla */
  --f:"Roboto Flex","Datina Roboto","Datina Verdana", Roboto, Verdana, system-ui, sans-serif;
  --f-bajada:"Roboto Flex","Datina Roboto B","Datina Verdana B", Roboto, Verdana, system-ui, sans-serif;
  --f-c30:"Roboto Flex","Datina Roboto C30","Datina Verdana C30",var(--f); --f-c45:"Roboto Flex","Datina Roboto C45","Datina Verdana C45",var(--f);
  --f-c55:"Roboto Flex","Datina Roboto C55","Datina Verdana C55",var(--f);
  --f-c60:"Roboto Flex","Datina Roboto C60","Datina Verdana C60",var(--f); --f-c75:"Roboto Flex","Datina Roboto C75","Datina Verdana C75",var(--f);
  --mono:"Roboto Mono","Datina Mono",ui-monospace,Menlo,Consolas,monospace;
  /* en rem (11 de octubre de 2026, revisión de accesibilidad): con la letra de 16 píxeles del navegador se ven igual que antes en
     píxeles, y crecen si la persona elige una letra más grande */
  --t-1:.6875rem;                          /* etiquetas en mayúsculas (11) */
  --t-2:.8125rem;                          /* notas, pies y datos chicos (13) */
  --t-3:.9375rem;                          /* textos secundarios y de tarjetas (15) */
  --t-4:1.0625rem;                         /* texto (17, 16 en el celular) */
  --t-5:clamp(1.125rem,1.8vw,1.25rem);     /* bajadas y títulos chicos (18 a 20) */
  --t-6:clamp(1.25rem,2.2vw,1.5rem);       /* preguntas de entrada (20 a 24) */
  --t-7:clamp(1.375rem,2.4vw,1.75rem);     /* títulos de ficha y de tarjeta (22 a 28) */
  --t-8:clamp(1.75rem,3.4vw,2.25rem);      /* cifras chicas (28 a 36) */
  --t-9:clamp(1.875rem,3.6vw,2.75rem);     /* títulos de bloque (30 a 44) */
  --t-10:clamp(2.5rem,5.2vw,4rem);         /* títulos de página (40 a 64) */
  --t-cifra:clamp(38px,4.6vw,54px);    /* cifra destacada de cada ficha */
  --i-titulo:1.1; --i-tarjeta:1.25; --i-chico:1.4; --i-texto:1.55;
  /* espacios: la escala del autor (etapa 38), 4, 8, 12, 16, 24, 32, 48, 72, 96 y 144. No hay --e-5: los 20 píxeles no están en la
     escala y pasaron a 24 (--e-6), y --e-9 pasó de 64 a 72 */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-6:24px; --e-7:32px; --e-8:48px; --e-9:72px; --e-10:96px; --e-11:144px;
  /* tres ritmos: dentro de un componente, de 16 a 24 (--e-4 y --e-6). Entre bloques (una ficha y la siguiente, el gráfico de un
     artículo), de 24 en el celular a 40 en la computadora. Entre capítulos, solo donde cambia el tema de la página (las fichas y "Para
     entender los datos", "Seguí explorando", los grupos de Energía y los bloques de la portada), de 48 a 72. En la etapa 38 eran de 48 a
     72 y de 96 a 144, y el capítulo separaba también cosas que van juntas: el autor vio "demasiado espacio en blanco sin sentido" (10/10/2026) */
  --bloque:clamp(24px,3vw,40px);
  --capitulo:clamp(48px,5vw,72px);
  --margen:22px;          /* margen lateral de la página */
  --ritmo:var(--bloque);  /* separación entre bloques de una página */
  --tinta-bajada:#2B3440; /* la bajada de cada página: más oscura que --muted, más clara que --ink */
  /* anchos */
  --medida:40em;          /* largo máximo de un párrafo */
  --col:1180px;          /* ancho del contenido, alineado con la barra (etapa 5: antes 800) */
  --ancho-bloques:1136px; --ancho-max:1180px;
  /* formas y sombras: tarjetas redondeadas; botones, controles y fichas rectos */
  /* radios: una sola escala. Las tarjetas (fichas, el cuadro de "Para entender los datos", tarjetas que son enlaces, final de
     página) 18, los paneles que se abren encima 14, lo que va dentro de una tarjeta y los controles 10, las barras de los gráficos 4 */
  --r-tarjeta:18px; --r-panel:14px; --r-interno:10px; --r-icono:12px;
  /* controles (botones, conmutadores, listas desplegables, campos): el mismo radio que lo que va dentro de una tarjeta */
  --r-control:10px;
  /* sombra de las tarjetas: apenas las separa del fondo, teñida del azul de la marca (nunca negra) */
  --sombra-tarjeta:0 1px 2px rgba(31,94,151,.06),0 10px 28px -16px rgba(31,94,151,.24);
  --sombra-panel:0 18px 30px rgba(24,33,43,.14);
  /* el vidrio de los menús desplegables (11 de octubre de 2026, pedido del autor: "pasar de fondo blanco a transparente"): traslúcido y
     desenfocado, para que el texto se siga leyendo sobre cualquier parte de la página */
  --vidrio-menu:rgba(246,248,251,.72); --vidrio-blur:blur(18px) saturate(1.4);
  --sombra-boton:0 2px 0 rgba(24,33,43,.14);
  /* movimiento: curvas y duraciones. 150 ms respuesta al mouse, 200 menús, cuadros y cambios de vista, 250 fichas y barra, 300 páginas y gráficos.
     Nada de la interfaz pasa de 300 ms: solo el sol y el gorro de la portada, que son decorativos */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-1:150ms; --dur-2:200ms; --dur-3:250ms; --dur-4:300ms;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (max-width:760px){:root{--t-4:1rem}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:inherit}
/* lo oculto no ocupa lugar ni recibe toques, aunque su componente tenga otro display (el menú cerrado tapaba el contenido) */
[hidden]{display:none!important}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--ink);font-family:var(--f);font-size:var(--t-4);line-height:var(--i-texto);
  font-variation-settings:"opsz" 16;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* marco fino azul alrededor de la ventana */
body::after{content:"";position:fixed;inset:0;border:5px solid var(--azul);pointer-events:none;z-index:40}
a{color:inherit;text-decoration-color:var(--celeste);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{text-decoration-color:var(--celeste-fuerte)}
:focus-visible{outline:2px solid var(--celeste-fuerte);outline-offset:3px}
.en-azul :focus-visible{outline-color:var(--sol)}
/* en las filas que se deslizan de costado, el borde del foco va hacia adentro: el desplazamiento lo cortaba arriba y abajo (revisión de
   accesibilidad, 11 de octubre de 2026) */
.subsecciones a:focus-visible,.pildoras a:focus-visible,.cx-sug .cx-chip:focus-visible,.cifras-grid .cifra:focus-visible{outline-offset:-3px}
select option{background:var(--bg);color:var(--ink)}
/* cortes de línea: títulos con líneas parejas y textos sin una palabra sola al final */
h1,h2,h3,h4,.art-txt b,.sec-tarjeta b,.tema-intro .pregunta{text-wrap:balance}
p,li,dd,dt,small,.sec-preg,.c-txt,.dp-det{text-wrap:pretty}
.envoltura{max-width:var(--col);margin:0 auto;padding:0 var(--margen)}
/* bloques anchos de la portada, más allá de la columna de texto */
.ancho{width:min(var(--ancho-bloques),calc(100vw - 2 * var(--margen)));margin-left:calc(50% - min(var(--ancho-bloques) / 2,50vw - var(--margen)))}
.ico{display:block;width:1em;height:1em;flex:none}
@media (max-width:760px){body::after{border-width:0}}

/* íconos isométricos propios (scripts/iconos_isometricos.py): un tono por ícono, el CSS decide los colores según dónde va */
.iso{display:block;flex:none;--ic:var(--azul);--ic-claro:#fff;--ic-detalle:#fff}
.iso path,.iso ellipse,.iso circle{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;stroke-width:var(--trazo,1.6px)}
.iso .s{fill:var(--ic);stroke:var(--ic)}
.iso .l{fill:var(--ic-claro);stroke:var(--ic)}
.iso .w{fill:var(--ic-detalle);stroke:none}
.iso .wl{fill:none;stroke:var(--ic-detalle)}
.iso .k{fill:none;stroke:var(--ic)}
/* Íconos de las tarjetas (etapa 14, pedido del autor): al pasar el mouse por la tarjeta, el ícono se eleva y se inclina apenas,
   como gira el sol de "Seguí explorando", en 300 ms. Lo mismo, más chico, en los íconos de la barra */
.tarjeta .iso{transition:transform var(--dur-4) var(--ease-out);transform-origin:50% 85%}
.lupa-btn .ico,.chip-borrar .ico{transition:transform var(--dur-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .tarjeta:hover .iso{transform:translateY(-4px) rotate(-5deg)}
  .lupa-btn:hover .ico{transform:rotate(-12deg) scale(1.08)}
  .chip-borrar:hover .ico{transform:rotate(90deg)}
  /* los dos que no cambiaban al pasar el mouse (Fase 2, paso 7, respuesta del autor): la cruz de la tarjeta del mapa, con fondo gris
     claro como el botón que borra la provincia, y "Ver detalle" de Cruces, subrayado como los enlaces */
  .mt-cerrar:hover{color:var(--ink);background:var(--superficie-2)}
  .cx-detalle summary:hover{text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:1.5px;text-underline-offset:3px}
}
.tono-azul{--ic:#2C74B5}

/* ---------- botones, enlaces y tarjetas ----------
   Seis tipos y nada más: botón principal (lleno, uno por pantalla), botón secundario (con borde: el .boton común),
   enlace (texto subrayado), tarjeta (toda la tarjeta es el enlace), despliegue (abre y cierra su contenido debajo) y navegación
   (barra, menús y pie). Los botones son rectos y las tarjetas redondeadas. Lo que no se toca (cifras, etiquetas) va sin borde ni fondo.
   Sobre el azul de la portada (.en-azul) los colores se invierten.
   Los que tienen estilo propio son variantes de esos seis (Fase 2, paso 7, sin cambiar cómo se ven):
   - secundario: .conmutador y .co-btn (con el elegido lleno), .susc-boton, .elige-btn, .lupa-btn, .chip-prov y .chip-borrar
   - enlace: .esp-btn, .vt-ley, .cx-chip, .ver-mas, .dx-quitar y .mt-cerrar (la cruz que cierra la tarjeta del mapa)
   - despliegue: .despliegue, .sobre, .menu-parte, .cx-detalle, .ph-fuentes y .creditos (los de <summary>)
   - navegación: .menu-btn, la barra, los menús, las migas, .subsecciones, .pildoras y el pie
   - los puntos y celdas de los gráficos que se tocan (.cx-punto, .cx-celda, .dep, .provs) son parte del dibujo, no botones */
/* Un botón cuyo texto no entra en el ancho que tiene (320 píxeles, o el zoom del 400% de WCAG) pasa a dos renglones parejos en lugar de
   salirse de la página. Si entra, queda en uno, como antes */
.boton{--b-fondo:transparent;--b-tinta:var(--azul);--b-borde:var(--azul);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:44px;max-width:100%;padding:var(--e-1) var(--e-4);
  font:500 12px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;text-align:center;text-wrap:balance;text-decoration:none;cursor:pointer;
  color:var(--b-tinta);background:var(--b-fondo);border:1px solid var(--b-borde);border-radius:var(--r-control);
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.boton.principal{--b-fondo:var(--azul);--b-tinta:#fff}
.boton.chico{min-height:34px;padding:var(--e-1) var(--e-3);font-size:var(--t-1)}
.boton[aria-pressed="true"]{--b-fondo:var(--azul);--b-tinta:#fff}
.boton:active{transform:scale(.97)}
.boton:disabled{opacity:.45;cursor:default}
.boton[hidden]{display:none}
.en-azul .boton{--b-tinta:#fff;--b-borde:var(--en-azul-borde)}
.en-azul .boton.principal,.en-azul .boton[aria-pressed="true"]{--b-fondo:#fff;--b-tinta:var(--azul);--b-borde:#fff}
.enlace{padding:0;font:inherit;text-align:left;color:var(--azul);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:1.5px;text-underline-offset:3px}
.tarjeta{display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-6);color:var(--ink);text-decoration:none;
  background:var(--superficie-2);border:1px solid transparent;border-radius:var(--r-tarjeta);box-shadow:none;transition:background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.tarjeta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .boton:hover{--b-fondo:var(--celeste-suave)}
  .boton.principal:hover,.boton[aria-pressed="true"]:hover{--b-fondo:var(--azul-hondo);--b-borde:var(--azul-hondo)}
  .en-azul .boton:hover{--b-fondo:var(--en-azul-velo)}
  .en-azul .boton.principal:hover,.en-azul .boton[aria-pressed="true"]:hover{--b-fondo:var(--celeste-suave);--b-borde:var(--celeste-suave)}
  .enlace:hover{text-decoration-color:var(--azul)}
  .tarjeta:hover{background:var(--superficie-3)}
  .tarjeta.cifra.prov:hover{background:var(--celeste-suave-2)}
}
@media (max-width:760px){.tarjeta{padding:var(--e-4)}}

/* ---------- barra superior: azul sobre la portada y clara al bajar ----------
   A la izquierda, la marca y los temas principales, que terminan en "Más" (etapa 32, como usafacts.org). A la derecha, la provincia
   elegida y la lupa. Hasta la etapa 31, "Secciones" iba a la izquierda de la marca y los temas, al centro. */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--azul);view-transition-name:barra;
  transition:background-color var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.barra.clara{background:rgba(246,248,251,.94);box-shadow:0 1px 0 rgba(44,116,181,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.barra .envoltura{position:relative;max-width:var(--ancho-max);height:72px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--e-6)}
.barra-izq{grid-column:1;display:flex;align-items:center;gap:var(--e-6)}
/* al bajar, la barra se compacta: sube 14 px, su contenido baja 7 y la marca se achica. Al subir vuelve */
.barra-izq,.barra .temas,.barra-der{transition:transform var(--dur-3) var(--ease-out)}
.barra.compacta{transform:translateY(-14px)}
.barra.compacta .barra-izq,.barra.compacta .temas,.barra.compacta .barra-der{transform:translateY(7px)}
.barra.compacta .marca{transform:scale(.9)}
/* en el celular la barra ya es baja: se compacta menos */
@media (max-width:760px){.barra.compacta{transform:translateY(-8px)}.barra.compacta .barra-izq,.barra.compacta .barra-der{transform:translateY(4px)}.barra.compacta .marca{transform:scale(.88)}}
.barra-der{grid-column:3;display:flex;align-items:center;gap:var(--e-2);min-width:0}
.barra .marca{transform-origin:0 70%;transition:transform var(--dur-3) var(--ease-out),color var(--dur-3) var(--ease-out);padding-top:9px;font-size:46px;line-height:1;font-weight:500;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;
  color:#fff;text-decoration:none;font-variation-settings:"wdth" 25,"opsz" 144}
.barra.clara .marca{color:var(--azul)}
body[data-pagina="inicio"] .barra:not(.clara) .marca{visibility:hidden}
/* navegación: el mismo estilo en la barra, la fila de secciones del celular y el pie */
.barra .temas{grid-column:2;justify-self:start;display:flex;align-items:center;gap:var(--e-6);font-size:var(--t-2);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  font-variation-settings:"wdth" 60,"opsz" 14;color:var(--en-azul-texto);font-family:var(--f-c60)}
.barra .temas a{padding:6px 0;text-decoration:none;white-space:nowrap;transition:color var(--dur-1) var(--ease-out)}
.barra .temas a[aria-current="true"]{color:#fff;box-shadow:inset 0 -2px 0 var(--sol)}
.barra.clara .temas{color:var(--azul)}
.barra.clara .temas a[aria-current="true"]{color:var(--ink)}
/* los cuatro grupos (etapa 39): el de la página actual, con la misma marca que un tema */
.barra .temas .grupo-btn[aria-current="true"]{color:#fff;box-shadow:inset 0 -2px 0 var(--sol)}
.barra.clara .temas .grupo-btn[aria-current="true"]{color:var(--ink)}
/* controles de la barra: Secciones, la lupa y el indicador de provincia, con el mismo alto y el mismo borde */
.lupa-btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);padding:0 var(--e-4);
  font:500 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:transparent;border:1px solid var(--en-azul-borde);border-radius:var(--r-control);cursor:pointer;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.lupa-btn{width:40px;padding:0}
/* "Más" (etapa 32): termina la fila de temas, con su misma letra y una flecha que gira al abrir */
.menu-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  background:none;border:0;cursor:pointer;white-space:nowrap;transition:color var(--dur-1) var(--ease-out)}
.mas-flecha{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-2) var(--ease-out)}
.menu-btn[aria-expanded="true"] .mas-flecha{transform:rotate(180deg)}
.menu-btn:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.lupa-btn .ico{width:19px;height:19px}
.chip-borrar .ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lupa-btn:active{transform:scale(.97)}
.lupa-btn[aria-expanded="true"]{background:#fff;color:var(--azul)}
.barra.clara .lupa-btn{color:var(--azul);border-color:var(--azul)}
.barra.clara .lupa-btn[aria-expanded="true"]{background:var(--azul);color:#fff}
/* "Más" abierto: el color de la página actual, como un tema */
.menu-btn[aria-expanded="true"]{color:#fff}
.barra.clara .menu-btn[aria-expanded="true"]{color:var(--ink)}
/* provincia elegida: bandera y nombre (llevan al perfil) y un botón para volver a todo el país */
.prov-chip{display:flex;align-items:stretch;min-width:0;height:40px;color:#fff;border:1px solid var(--en-azul-borde);border-radius:var(--r-control);overflow:hidden}
.prov-chip[hidden]{display:none}
.chip-prov{display:flex;align-items:center;gap:var(--e-2);min-width:0;padding:0 var(--e-3);font-size:var(--t-3);font-weight:600;color:inherit;text-decoration:none;transition:background-color var(--dur-1) var(--ease-out)}
.chip-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Banderas provinciales (etapa 7): una sola medida, 24 x 16, con el mismo recorte 3:2 y el mismo borde para las 24, en la barra,
   el selector, las listas, las tablas, el buscador y las migas. Solo el título del perfil la lleva a 36 x 24, el máximo que
   permite la miniatura de 72 x 48 sin perder nitidez en pantallas de doble densidad. Sobre el azul, el borde es claro. */
/* esquinas redondeadas (2 de octubre de 2026, como todo el sistema): 3 px a 24 x 16, 4 a 36 x 24 y 2 a 18 x 12. El borde las sigue */
.bandera{display:inline-block;flex:none;width:24px;height:16px;vertical-align:middle;border-radius:3px;outline:1px solid rgba(24,33,43,.2);outline-offset:-1px}
.bandera.vacia{outline:0}
.bandera.grande{width:36px;height:24px;border-radius:4px}
.con-bandera{display:inline-flex;align-items:center;gap:var(--e-2);min-width:0}
.portada .bandera,.tip .bandera{outline-color:rgba(255,255,255,.55)}
.tip .bandera{width:18px;height:12px;margin-right:2px;vertical-align:-1px;border-radius:2px}
.chip-borrar{display:inline-flex;align-items:center;gap:var(--e-2);padding:0 var(--e-3);font:500 var(--t-1)/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:inherit;background:none;border:0;border-left:1px solid var(--en-azul-linea);cursor:pointer;transition:background-color var(--dur-1) var(--ease-out)}
.chip-txt{display:none}
.barra.clara .prov-chip{color:var(--azul);border-color:var(--azul)}
.barra.clara .chip-borrar{border-left-color:var(--borde-claro)}
@media (min-width:1320px){.chip-txt{display:inline}}
/* Lista de "Más" (etapa 32, 6 de octubre de 2026, pedido del autor: "que el menú desaparezca y lo dejes como usafacts", con el menú
   "More" de usafacts.org de referencia): una lista blanca debajo del botón, con la letra del texto, un solo tamaño y sin negrita, y una
   línea fina entre grupos, sin rótulos a la vista (siguen para los lectores de pantalla). A la izquierda los temas, a la derecha los
   artículos, las herramientas y Datina. Los temas que ya están en la barra se ven solo cuando la barra no los muestra. En el celular,
   una sola columna que ocupa la pantalla debajo de la barra, con la página quieta detrás. Reemplaza al panel de vidrio de la etapa 14,
   que se abría con "Secciones" a la izquierda de la marca */
.menu-panel{position:fixed;z-index:30;left:var(--menu-izq,var(--margen));top:calc(env(safe-area-inset-top,0px) + 62px);
  width:min(500px,calc(100vw - 24px));max-height:calc(100dvh - 86px);overflow:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--e-4);padding:var(--e-3);
  background:var(--vidrio-menu);-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur);
  border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sombra-panel);
  transform-origin:top left;opacity:0;transform:translateY(-4px) scale(.98);
  transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-2) var(--ease-out),translate var(--dur-3) var(--ease-out)}
.menu-panel.abierto{opacity:1;transform:none}
/* la barra sube 14 píxeles al bajar por la página: la lista la sigue con el mismo movimiento */
.barra.compacta ~ .menu-panel{translate:0 -14px}
.menu-col{display:flex;flex-direction:column;min-width:0}
/* una línea fina separa un grupo del siguiente. Su nombre (Fase 2, 23 de octubre de 2026) se ve con la letra y el tamaño de los enlaces,
   en gris y sin negrita (regla del autor del 4 de octubre de 2026): en el menú Temas, cuatro columnas sin nombre no se entendían */
.menu-grupo + .menu-grupo,.menu-panel ul + .menu-grupo{margin-top:var(--e-2);padding-top:var(--e-2);border-top:1px solid var(--line)}
.menu-panel .menu-cab,.menu-panel li.cat span{display:block;margin:0;padding:7px var(--e-3);font-family:var(--f);font-size:var(--t-3);font-weight:400;
  line-height:1.3;color:var(--muted)}
.menu-panel ul{margin:0;padding:0;list-style:none}
/* hasta 1080 píxeles se ve "Menú" y no los cuatro menús de la barra, y desde 1081 al revés */
@media (min-width:1081px){#menu-btn{display:none}}
/* todos los enlaces iguales: la letra del texto, el mismo tamaño y sin negrita */
.menu-panel a{display:block;padding:7px var(--e-3);border-radius:var(--r-control);
  font-family:var(--f);font-size:var(--t-3);font-weight:400;font-variation-settings:normal;letter-spacing:normal;line-height:1.3;
  color:var(--ink);text-decoration:none;transition:background-color var(--dur-1) var(--ease-out)}
/* la página actual: la marca amarilla de la navegación, sin negrita */
.menu-panel a[aria-current="true"]{background:var(--sol-suave)}
.menu-panel a:focus-visible{outline:2px solid var(--celeste-fuerte);outline-offset:-2px}
.teclado .menu-panel{transition:none}
.teclado .elige-panel{transition:none}
.teclado .buscador:not([hidden]){animation:none}
@media (hover:hover) and (pointer:fine){
  .barra .temas a:hover{color:#fff}
  .barra.clara .temas a:hover{color:var(--ink)}
  .barra .menu-btn:hover{color:#fff}
  .barra.clara .menu-btn:hover{color:var(--ink)}
  .lupa-btn:hover,.chip-prov:hover,.chip-borrar:hover{background:var(--en-azul-velo)}
  .barra.clara .lupa-btn:hover,.barra.clara .chip-prov:hover,.barra.clara .chip-borrar:hover{background:var(--celeste-suave)}
  .menu-panel a:hover,.menu-parte > summary:hover{background:var(--superficie)}
  .menu-panel a[aria-current="true"]:hover{background:var(--sol-suave)}
}
@media (max-width:1180px){.barra .temas{gap:var(--e-4);font-size:12px}}
@media (max-width:1080px){.barra .temas a,.barra .temas .grupo-btn,.grupo-panel{display:none}}
/* el menú de un grupo: una sola columna, con las secciones de una categoría (Migraciones y Turismo debajo de Población) un poco adentro */
.grupo-panel{grid-template-columns:1fr;width:min(290px,calc(100vw - 24px))}
.menu-panel .sub a{padding-left:calc(var(--e-3) + var(--e-4))}
/* Temas: los cuatro grupos en columnas, en el orden de la portada, sin línea entre columnas */
.panel-temas{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--e-4);width:min(980px,calc(100vw - 24px))}
.panel-temas .menu-grupo + .menu-grupo{margin-top:0;padding-top:0;border-top:0}
/* Provincias: las 24 jurisdicciones en dos columnas, cada una con su bandera */
.panel-provincias{width:min(480px,calc(100vw - 24px))}
.menu-panel .prov-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.menu-panel a.con-bandera{display:flex;align-items:center;gap:var(--e-2)}
/* "Menú" (hasta 1080 píxeles): las cuatro partes de la barra, plegables, en una columna */
#menu-panel{grid-template-columns:1fr}
.menu-parte + .menu-parte{border-top:1px solid var(--line)}
.menu-parte > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e-2);padding:10px var(--e-3);list-style:none;cursor:pointer;
  border-radius:var(--r-control);font-family:var(--f);font-size:var(--t-3);line-height:1.3;color:var(--ink)}
.menu-parte > summary::-webkit-details-marker{display:none}
.menu-parte[open] > summary .mas-flecha{transform:rotate(180deg)}
.menu-parte > summary:focus-visible{outline:2px solid var(--celeste-fuerte);outline-offset:-2px}
.menu-parte[open]{padding-bottom:var(--e-2)}
@media (max-width:760px){
  .barra .envoltura{height:62px;gap:var(--e-3)}
  .barra-izq{gap:var(--e-3)}
  .barra .marca{font-size:32px}
  /* el menú, en una sola columna y en toda la pantalla debajo de la barra (llega 8 píxeles más abajo para cubrir lo que sube la barra).
     Las partes van arriba con su alto: sin align-content, las cuatro cerradas se estiraban hasta llenar la pantalla (24 de octubre de 2026) */
  .menu-panel{left:0;right:0;width:auto;top:calc(env(safe-area-inset-top,0px) + 62px);bottom:-8px;max-height:none;
    grid-template-columns:1fr;align-content:start;gap:0;padding:var(--e-4) var(--margen) calc(env(safe-area-inset-bottom,0px) + var(--e-9));
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;transform:translateY(-8px)}
  .barra.compacta ~ .menu-panel{translate:0 -8px}
  /* en una sola columna, la línea fina también separa una columna de la siguiente */
  .menu-col + .menu-col{margin-top:var(--e-2);padding-top:var(--e-2);border-top:1px solid var(--line)}
  .menu-panel a,.menu-parte > summary{padding:10px var(--e-3);font-size:18px;line-height:1.25}
  .menu-panel .menu-cab,.menu-panel li.cat span{font-size:18px;line-height:1.25}
  /* la página queda quieta detrás del menú */
  html.menu-abierto{overflow:hidden}
}
@media (max-width:560px){
  .barra .marca{font-size:30px}
  .chip-prov{gap:6px;padding:0 var(--e-2);font-size:var(--t-2)}
  .chip-nom{max-width:7.5em}
  .chip-borrar{padding:0 10px}
}

/* buscador de la lupa: panel debajo de la barra */
.buscador{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--borde);box-shadow:var(--sombra-panel)}
.buscador:not([hidden]){animation:abre-buscador var(--dur-2) var(--ease-out)}
@keyframes abre-buscador{from{transform:translateY(-8px)}}
.buscador-caja{max-width:760px;margin:0 auto;padding:var(--e-6) var(--margen) var(--e-6)}
.buscador-lab{display:block;margin:0 0 var(--e-2);font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#busca{width:100%;padding:var(--e-3) var(--e-4);font:inherit;font-size:var(--t-5);color:var(--ink);background:#fff;border:1.5px solid var(--azul);border-radius:var(--r-control)}
/* los textos de ejemplo de los buscadores con --faint-texto: 4,9 a 1 sobre blanco (eran 3,7 y 2,6 a 1, 11 de octubre de 2026) */
#busca::placeholder{color:var(--faint-texto)}
#busca:focus-visible{outline:3px solid var(--sol);outline-offset:1px}
.busca-res{display:flex;flex-direction:column;margin-top:var(--e-3);max-height:min(60vh,440px);overflow:auto}
.busca-res a{display:flex;flex-direction:column;gap:var(--e-1);padding:10px 6px;font-size:var(--t-4);line-height:var(--i-tarjeta);color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--borde)}
.busca-res a:focus-visible{outline:2px solid var(--sol);outline-offset:-2px}
.busca-res small{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--celeste-fuerte)}
.busca-sug{margin:var(--e-2) 6px 2px;font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* resultados agrupados como la barra (Fase 2, paso 3): el nombre del grupo en gris, la opción marcada con las flechas con el fondo de
   "pasar el mouse" y una raya celeste a la izquierda, para que no dependa solo del color */
.busca-grupo{margin:var(--e-3) 6px 2px;font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.busca-res [role="group"]:first-child .busca-grupo{margin-top:var(--e-1)}
.busca-res a.activo{background:var(--superficie-2);box-shadow:inset 3px 0 0 var(--celeste-fuerte)}
@media (hover:hover) and (pointer:fine){.busca-res a:hover{background:var(--superficie-2)}}
/* respuesta rápida del buscador (26 de octubre de 2026): la cifra que ya calcula el sitio, arriba de los resultados, con su fuente */
.busca-res a.busca-resp b{font-weight:650}
.busca-res .busca-resp .con-bandera{font-weight:600}
.busca-res .busca-fuente{font-size:var(--t-2);line-height:var(--i-tarjeta);color:var(--muted)}
@media (max-width:760px){.buscador-caja{padding:var(--e-4) var(--margen) var(--e-6)}}

/* ---------- marca: gorro frigio sobre la i, como sobre la pica del escudo ---------- */
.i-gorro{position:relative;display:inline-block}
.i-gorro .gorro{position:absolute;left:50%;top:auto;bottom:.705em;width:.3em;height:auto;overflow:visible;transform:translateX(-50%) rotate(-8deg);transform-origin:50% 100%}
.marca .i-gorro .gorro{bottom:.72em;width:.44em}
.gorro-cuerpo{fill:var(--rojo)}
.gorro-banda{fill:var(--rojo-oscuro)}
.gorro-brillo{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.6;stroke-linecap:round}
.portada h1 .gorro{animation:posar .8s var(--ease-out) .55s both}
@keyframes posar{from{opacity:0;transform:translateX(-50%) translateY(-.25em) rotate(-30deg)}}

/* ---------- portada: bloque azul a sangre ----------
   Jerarquía: DATINA, qué es y "Elegí tu provincia". A la derecha, la Argentina con sus 24 provincias y el sol. */
.portada{position:relative;overflow:hidden;background:var(--azul);color:#fff}
.portada-grid{position:relative;max-width:var(--ancho-max);margin:0 auto;padding:var(--e-6) var(--margen) var(--e-7);display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch;gap:var(--e-4);pointer-events:none}
.portada-texto{position:relative;isolation:isolate;align-self:center;pointer-events:auto}
.portada-texto::before{content:"";position:absolute;inset:-36px -40px;z-index:-1;background:radial-gradient(closest-side,rgba(44,116,181,.92) 60%,rgba(44,116,181,0))}
/* entrada corta y escalonada: "Elegí tu provincia" está lista antes de los 450 ms */
.portada-texto>*{animation:aparece var(--dur-4) var(--ease-out) both}
.portada-texto>:nth-child(2){animation-delay:40ms}
.portada-texto>:nth-child(3){animation-delay:80ms}
.portada-texto>:nth-child(n+4){animation-delay:120ms}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.portada h1{margin:0 0 var(--e-3);padding-top:.28em;font-size:clamp(76px,9vw,136px);line-height:.8;font-weight:400;letter-spacing:-.005em;text-transform:uppercase;color:#fff;
  font-variation-settings:"wdth" 25,"opsz" 144}
.portada .lema{margin:0 0 var(--e-6);font-size:clamp(20px,2.2vw,28px);line-height:1.05;font-weight:500;letter-spacing:.01em;text-transform:uppercase;color:#fff;
  font-variation-settings:"wdth" 30,"opsz" 144;font-family:var(--f-c30)}
.portada .bajada{margin:0 0 var(--e-6);max-width:26em;font-size:var(--t-5);line-height:1.45;color:var(--en-azul-texto)}
.atajos{display:flex;flex-wrap:wrap;gap:var(--e-3)}
/* cifras del sitio: texto simple, no se tocan */
/* información secundaria: más chica y más tenue que los botones (octubre de 2026) */
.estado{margin:var(--e-4) 0 0;font:400 var(--t-1)/1.5 var(--mono);letter-spacing:.04em;color:#fff}
.estado span{white-space:nowrap}
.estado span+span{margin-left:6px;padding-left:var(--e-3);border-left:1px solid rgba(255,255,255,.55)}
/* el buscador a la vista de la portada (Fase 2, paso 2): un campo blanco sobre el azul, con la lista de resultados debajo. Sin
   JavaScript el buscador no se ve */
.busca-portada{position:relative;max-width:30em;margin:0 0 var(--e-6)}
/* entra sin moverse, solo con opacidad: un elemento con una animación de transform es la referencia de lo fijo que lleva adentro, y la
   lista de resultados quedaba corrida y recortada por la portada */
.portada-texto>.busca-portada{z-index:2;animation-name:aparece-quieto}
@keyframes aparece-quieto{from{opacity:0}to{opacity:1}}
html:not(.js) .busca-portada{display:none}
.busca-portada input{display:block;width:100%;height:48px;padding:0 var(--e-4);border:0;border-radius:var(--r-control);background:#fff;color:var(--ink);
  font-family:var(--f);font-size:var(--t-4);box-shadow:var(--sombra-panel)}
.busca-portada input::placeholder{color:var(--muted)}
.busca-portada input:focus-visible{outline:2px solid var(--sol);outline-offset:2px}
/* la lista va fija debajo del campo (datina.js la ubica): el bloque azul recorta lo que sobresale, y una lista larga quedaba cortada.
   Por debajo de la barra, que la tapa si se baja por la página con la lista abierta */
.busca-portada .busca-res{position:fixed;z-index:9;margin:0;padding:var(--e-2) var(--e-3);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sombra-panel)}
/* lugar del mapa: el país lo dibuja datina.js en el fondo, con la misma proyección que el mundo */
.portada-mapa{position:relative;min-height:480px}
.portada-mapa .sol{position:absolute;top:0;right:0;width:200px}
/* la ayuda va pegada debajo del país (la ubica datina.js): es la instrucción del mapa */
.mapa-ayuda{position:absolute;left:50%;bottom:0;margin:0;transform:translateX(-50%);white-space:nowrap;text-align:center;
  font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--en-azul-texto);transition:opacity var(--dur-4) var(--ease-out)}
.mapa-ayuda[style*="top"]{bottom:auto}
/* tarjeta al tocar una provincia: al lado del país en pantallas anchas, debajo del mapa en el celular */
/* con el vidrio de los menús desplegables (11 de octubre de 2026, pedido del autor: "el mismo gradiente o transparencia que los desplegables
   del menú, así vamos unificando criterios"). Los textos chicos pasan del gris al tono de la bajada, que se lee sobre el vidrio encima del azul */
.mapa-tarjeta{position:absolute;z-index:2;display:none;width:280px;padding:var(--e-4);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-panel);
  background:var(--vidrio-menu);-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur);box-shadow:var(--sombra-panel);pointer-events:auto}
.mapa-tarjeta.abierta{display:block}
.mt-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e-2);margin-bottom:var(--e-3);font-size:var(--t-5);font-weight:600}
.mt-cerrar{width:32px;height:32px;flex:none;font-size:22px;line-height:1;color:var(--muted);background:none;border:0;border-radius:var(--r-control);cursor:pointer}
.mapa-tarjeta ul{margin:0 0 var(--e-4);padding:0;list-style:none}
.mapa-tarjeta li{display:grid;grid-template-columns:1fr auto;gap:0 var(--e-2);padding:var(--e-2) 0;border-top:1px solid var(--line)}
.mt-lab{font-size:var(--t-3)}
.mapa-tarjeta li b{font-size:var(--t-3);font-weight:600;font-variant-numeric:tabular-nums}
.mapa-tarjeta li small{grid-column:1/-1;font-size:var(--t-1);color:var(--tinta-bajada)}
.mapa-tarjeta .mt-cerrar{color:var(--tinta-bajada)}
.mapa-tarjeta .boton{width:100%}
.mapa-tarjeta .boton.principal{--b-fondo:var(--azul);--b-tinta:#fff;--b-borde:var(--azul)}
@media (hover:hover) and (pointer:fine){.mapa-tarjeta .boton.principal:hover{--b-fondo:var(--azul-hondo);--b-borde:var(--azul-hondo)}}
.mapa-fondo .provs a.tocada path,.mapa-fondo .provs a.tocada circle{fill:#fff;stroke:var(--azul-hondo)}
/* en el celular, un panel fijo abajo de la pantalla: el mapa sigue a la vista */
@media (max-width:760px){.mapa-tarjeta{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;z-index:30}}
@media (max-width:1080px){.portada-mapa{min-height:420px}.portada-mapa .sol{width:170px}}
@media (max-width:760px){
  .portada-grid{grid-template-columns:1fr;gap:var(--e-4);padding:var(--e-4) var(--margen) var(--e-6)}
  .portada-texto::before{inset:-16px -24px}
  .portada h1{font-size:clamp(64px,22vw,104px)}
  .portada .bajada{font-size:var(--t-4)}
  .portada-mapa{min-height:250px}
  .portada-mapa .sol{width:84px}
  .mapa-ayuda{text-align:center}
}

/* mapa de fondo: proyección azimutal equidistante centrada en la Argentina, en líneas finas blancas */
.mapa-fondo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity var(--dur-4) var(--ease-out)}
.mapa-fondo.listo{opacity:1}
.mapa-fondo .grat{fill:none;stroke:rgba(255,255,255,.08);stroke-width:.7}
.mapa-fondo .tierra{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.28);stroke-width:.6}
.mapa-fondo .anillo{fill:none;stroke:#fff;stroke-opacity:.32;stroke-width:1;stroke-dasharray:1 6;stroke-linecap:round}
/* las 24 provincias: cada una lleva a su perfil. La elegida va en amarillo */
.mapa-fondo .provs a{pointer-events:auto;cursor:pointer;transform-box:fill-box;transform-origin:center}
/* sin el recuadro de foco que el navegador dibuja al hacer clic: era el rectángulo que contiene a la provincia y quedaba cruzado sobre
   las vecinas. El mapa no recibe el foco del teclado ("Elegí tu provincia" lleva a lo mismo) */
.mapa-fondo .provs a:focus,.mapa-fondo .provs a:focus-visible{outline:none}
.mapa-fondo .provs path,.mapa-fondo .provs circle{fill:var(--celeste);stroke:#fff;stroke-width:.9;stroke-linejoin:round;transition:fill var(--dur-1) var(--ease-out)}
.mapa-fondo .provs circle{stroke-width:1.5}
.mapa-fondo .provs a.elegida path,.mapa-fondo .provs a.elegida circle{fill:var(--sol);stroke:var(--sol-borde)}
@media (hover:hover) and (pointer:fine){.mapa-fondo .provs a:hover path,.mapa-fondo .provs a:hover circle{fill:#fff;stroke:var(--azul-hondo)}}

/* Sol de Mayo: 16 rayos rectos y 16 flamígeros alrededor del rostro, con una ráfaga de líneas finas */
.sol{display:block;width:100%;height:auto;overflow:visible}
.sol .rayo{fill:var(--sol);stroke:var(--sol-borde);stroke-width:.7;stroke-linejoin:round}
.sol .disco{fill:var(--sol);stroke:var(--sol-borde);stroke-width:.9}
.sol .rasgo{fill:none;stroke:var(--sol-borde);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.sol .pupila{fill:var(--sol-borde)}
.sol .rafaga{opacity:.55;transform-box:view-box;transform-origin:0 0;animation:girar 240s linear infinite reverse;transition:opacity 1.2s var(--ease-out)}
.sol .rafaga line{stroke:#fff;stroke-width:.32;stroke-linecap:round}
/* pestañeo: los dos ojos se cierran juntos un instante, a intervalos irregulares (a veces doble) */
.sol .ojo{transform-box:fill-box;transform-origin:50% 55%;animation:pestanear 6.4s ease-in-out infinite 1.6s}
@keyframes pestanear{0%,43%,47%,90%,93.5%,97%,100%{transform:scaleY(1)}45%,91.8%,95.3%{transform:scaleY(.08)}}
/* la boca sonríe y se relaja muy despacio */
.sol .boca{transform-box:fill-box;transform-origin:50% 30%;animation:hablar 4.2s ease-in-out infinite alternate}
@keyframes hablar{0%{transform:scale(1,1)}55%{transform:scale(1.04,.86)}100%{transform:scale(.97,1.08) translateY(.3px)}}
.sol .giro,.sol .nace,.sol .flama,.sol .rostro{transform-box:view-box;transform-origin:0 0}
.sol .giro{animation:girar 90s linear infinite}
.sol .nace{animation:nace 1.3s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 28ms)}
.sol .flama{animation:latir 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.21s)}
.sol .rostro{animation:nace 1.1s cubic-bezier(.16,1,.3,1) both}
.sol.quieto *{animation-play-state:paused!important}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes nace{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes latir{from{transform:scale(.95)}to{transform:scale(1.05)}}
/* Rompecabezas de la portada (6 de octubre de 2026, pedido del autor): mientras las provincias se arman en el país, el sol espera
   quieto y sin verse (sus animaciones, detenidas en el primer cuadro), la ayuda no se ve y las provincias no se tocan. La portada trae
   "armando" en la plantilla, así el sol no empieza a nacer antes de tiempo, y datina.js lo saca al terminar. Solo con JavaScript y con
   movimiento: con movimiento reducido no hay rompecabezas y todo se ve desde el principio */
@media (prefers-reduced-motion:no-preference){
  .js .portada.armando .sol *{animation-play-state:paused!important}
  .js .portada.armando .sol .rafaga{opacity:0}
  .js .portada.armando .mapa-ayuda{opacity:0}
  .js .portada.armando .provs a{pointer-events:none}
}

/* ---------- bloques de la portada: el mismo título, la misma bajada y la misma separación ---------- */
.bloque-tit{margin:0 0 var(--e-2);font-size:var(--t-9);line-height:1;font-weight:500;letter-spacing:-.005em;color:var(--azul);font-variation-settings:"wdth" 55,"opsz" 144;font-family:var(--f-c55)}
.bloque-sub{margin:0 0 var(--e-6);max-width:62ch;line-height:var(--i-chico);color:var(--muted);text-wrap:balance}
/* entre los bloques de la portada, el espacio de bloque y no el de capítulo (respuesta del autor del 23 de octubre de 2026, para
   compactar la portada de la Fase 2: de 48 a 72 píxeles pasaron a ser de 24 a 40) */
.secciones,.articulos-home,.herramientas-home,.destacados,.provincias-home{padding-top:var(--bloque)}
/* Datos destacados de la portada (Fase 2, paso 2): cuatro tarjetas fijas, de la familia de "En cifras", con el grupo, la pregunta de la
   ficha y su cifra destacada. La cifra y su texto llegan con datina.js: su lugar queda reservado para que la portada no salte */
.destacados-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-4)}
/* de a dos también en el celular (respuesta del autor del 23 de octubre de 2026, para compactar la portada): ninguna cifra se corta */
@media (max-width:1080px){.destacados-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.destacados-grid{gap:var(--e-3)}}
.destacado .c-preg{font-size:var(--t-3);line-height:1.3;color:var(--ink);text-wrap:pretty}
.destacado .c-num{min-height:1em}
.destacado .c-txt{min-height:4.2em}
/* Provincias en la portada: las 24 jurisdicciones con su bandera */
.prov-home{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--e-1) var(--e-4);margin:0;padding:0;list-style:none}
@media (max-width:1080px){.prov-home{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.prov-home{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--e-3)}}
.prov-home a{display:flex;align-items:center;gap:var(--e-2);min-height:44px;padding:0 var(--e-2);border-radius:var(--r-control);color:var(--azul);text-decoration:none}
.prov-home a:focus-visible{outline:2px solid var(--celeste-fuerte);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.prov-home a:hover{background:var(--superficie-2)}}
/* Historias con datos: los enlaces a todos los artículos, el Laboratorio y Curiosidades, debajo de las tarjetas */
.hist-mas{display:flex;flex-wrap:wrap;gap:var(--e-3);margin:var(--e-6) 0 0}
/* en la portada, el rótulo de una categoría cuya entrada se llama distinto (Economía: Precios y actividad) */
.tg-cat{color:var(--muted)}

/* el Sol de Mayo chico de "Seguí explorando", que gira al pasar el mouse */
.sol-ir{width:32px;height:32px;transition:transform var(--dur-4) var(--ease-out)}
.sol-ir path,.sol-ir circle{fill:var(--sol);stroke:var(--sol-borde);stroke-width:3.2;stroke-linejoin:round}

/* artículos: tarjetas con ícono */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-auto-rows:1fr;gap:var(--e-4)}
.art-card{display:grid;grid-template-columns:96px 1fr;gap:var(--e-4);align-items:center;padding:var(--e-4)}
.art-ico{display:grid;place-items:center;width:96px;height:96px;background:#fff;border-radius:var(--r-icono)}
.art-ico .iso{width:78px;height:78px;--trazo:1.5px}
.art-txt{display:flex;flex-direction:column;gap:var(--e-2)}
.art-txt b{font-size:var(--t-4);line-height:var(--i-tarjeta);font-weight:600}
.art-txt small{font-size:var(--t-2);color:var(--muted)}
.art-dek{font-size:var(--t-2);line-height:var(--i-chico);color:var(--tinta-bajada)}  /* la bajada, solo en la lista de Artículos */
.ver-todos{margin-top:var(--e-6)}
@media (max-width:760px){
  .art-grid{grid-template-columns:1fr;gap:var(--e-3)}
  .art-card{grid-template-columns:64px 1fr;gap:var(--e-3);padding:var(--e-3)}
  .art-ico{width:64px;height:64px}
  .art-ico .iso{width:54px;height:54px}
}

/* secciones: una tarjeta por sección, con su ícono */
.secciones-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-rows:1fr;gap:var(--e-4)}
/* Los temas de la portada (etapa 36): cuatro grupos con sus secciones una debajo de otra y una línea fina entre ellas. Cuatro columnas,
   dos en pantallas medianas y una en el celular. Desde el 10 de octubre de 2026, sin panel gris (el grupo más corto dejaba un panel medio
   vacío): cada grupo es una columna con su nombre sobre una línea, y Curiosidades va debajo de la columna más corta */
#secciones-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;align-items:start;gap:var(--e-7) var(--e-7)}
@media (max-width:1079px){#secciones-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){#secciones-grid{grid-template-columns:1fr;gap:var(--e-6)}.tg-col{gap:var(--e-6)}}
.tg-col{display:flex;flex-direction:column;gap:var(--e-7)}
.tg{padding-top:var(--e-3);border-top:2px solid var(--azul)}
.tg-tit{margin:0 0 var(--e-2);font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.tg-lista{margin:0;padding:0;list-style:none}
.tg-item+.tg-item{border-top:1px solid var(--borde)}
.tg-link{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--e-3);align-items:center;margin:0 calc(-1 * var(--e-2));padding:var(--e-3) var(--e-2);
  color:inherit;text-decoration:none;border-radius:var(--r-control);transition:background-color var(--dur-1) var(--ease-out)}
.tg-ico{width:44px;height:44px;color:var(--azul);--trazo:1.2px}
.tg-txt{display:flex;flex-direction:column;gap:2px}
.tg-txt b{font-family:var(--f-c45);font-size:var(--t-6);line-height:1.05;font-weight:500;color:var(--azul);font-variation-settings:"wdth" 45,"opsz" 144}
.tg-preg{font-size:var(--t-2);line-height:var(--i-chico);color:var(--muted);text-wrap:pretty}
.tg-subs{display:flex;flex-wrap:wrap;gap:2px var(--e-4);margin:calc(-1 * var(--e-2)) 0 var(--e-3) calc(44px + var(--e-3));font-size:var(--t-2)}
.tg-subs a{color:var(--azul);text-decoration:underline;text-decoration-color:var(--celeste);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .tg-link:hover{background:var(--superficie-3)}
  .tg-link:hover .tg-ico{transform:translateY(-2px) rotate(-4deg)}
  .tg-subs a:hover{text-decoration-color:var(--azul)}
}
.tg-ico{transition:transform var(--dur-4) var(--ease-out)}
@media (prefers-reduced-motion:reduce){.tg-link:hover .tg-ico{transform:none}}
/* herramientas: todas en una fila en la computadora (pedido del autor, 22/10/2026: eran cinco, desde la Fase 2 son seis), de a tres o de
   a dos en pantallas medianas y una debajo de la otra en el celular. Las filas se reparten parejas (datina.js, "Grillas parejas") */
#herramientas-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1079px){#herramientas-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){#herramientas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#herramientas-grid{grid-template-columns:1fr}}
/* Historias con datos en la portada (Fase 2, paso 2): tres artículos y la pieza de la Corte Suprema, en dos columnas, o una en el celular
   (nunca una sola tarjeta en la última fila) */
#art-grid-home{grid-template-columns:repeat(2,minmax(0,1fr))}
/* todos los artículos: tres columnas, dos en pantallas medianas y una en el celular. Con una cantidad impar en dos columnas (17 desde la
   etapa 27), la última ocupa las dos, como en las secciones de la portada: ninguna queda sola a un costado */
#art-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:761px) and (max-width:1079px){#art-grid{grid-template-columns:1fr 1fr}#art-grid>:last-child:nth-child(odd){grid-column:1 / -1}}
/* en una columna, cada tarjeta con su alto: con la bajada (paso 4), el alto parejo de la más larga dejaba huecos en las demás */
@media (max-width:760px){#art-grid{grid-template-columns:1fr;grid-auto-rows:auto}}
@media (max-width:760px){#art-grid-home{grid-template-columns:1fr}}
/* las herramientas, en su propio grupo con título: se distinguen por eso y no por el color */
.bloque-grupo{margin:var(--e-8) 0 var(--e-2);font-size:var(--t-8);line-height:1;font-weight:500;color:var(--azul);font-variation-settings:"wdth" 55,"opsz" 144;font-family:var(--f-c55)}
.sec-tarjeta{gap:6px}
.sec-ico{width:60px;height:60px;margin:-6px 0 2px -6px;color:var(--azul);--trazo:1.4px}
.sec-tipo{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sec-tarjeta b{font-size:var(--t-7);line-height:1;font-weight:500;color:var(--azul);font-variation-settings:"wdth" 45,"opsz" 144;font-family:var(--f-c45)}
.sec-preg{font-size:var(--t-3);line-height:var(--i-chico);color:var(--ink)}
@media (max-width:760px){
  .secciones-grid{grid-template-columns:1fr 1fr;gap:var(--e-3)}
  .sec-tarjeta{padding:var(--e-3) var(--e-3) var(--e-4)}
  .sec-ico{width:50px;height:50px}
  .sec-preg{font-size:var(--t-2)}
}

/* ---------- títulos de página: cada sección, Tu provincia y Sobre nosotros ---------- */
.tema,.provincias,.nosotros,.contacto,.no-encontrada,.laboratorio{padding-top:var(--e-7)}
.tema>:is(h1,h2,.tema-nombre):where(:not(.bloque-grupo)),.provincias>:is(h1,h2),.nosotros>:is(h1,h2),.contacto>:is(h1,h2),.no-encontrada>:is(h1,h2),.laboratorio>:is(h1,h2):where(:not(.bloque-grupo)){position:relative;display:inline-block;margin:var(--ritmo) 0 var(--e-4);font-size:var(--t-10);line-height:.95;font-weight:500;
  letter-spacing:-.005em;color:var(--azul);font-variation-settings:"wdth" 55,"opsz" 144;font-family:var(--f-c55)}
/* el mini sol de los títulos */
.tema>:is(h1,h2,.tema-nombre):where(:not(.bloque-grupo))::after,.provincias>:is(h1,h2)::after,.nosotros>:is(h1,h2)::after,.contacto>:is(h1,h2)::after,.no-encontrada>:is(h1,h2)::after,.laboratorio>:is(h1,h2):where(:not(.bloque-grupo))::after{content:"";position:absolute;top:.06em;right:-.32em;width:.2em;height:.2em;border-radius:50%;
  background:radial-gradient(circle,var(--sol) 34%,transparent 37%),repeating-conic-gradient(var(--sol) 0 7deg,transparent 7deg 22.5deg)}
/* La pregunta como título (etapa 35, pedido del autor tras la auditoría de diseño del 6 de octubre de 2026: primero en Trabajo y después, con la
   decisión que el autor dejó en manos de Claude, en Pobreza, Salud, Educación y Población, las secciones con class="tema con-pregunta"): el nombre de la sección queda chico
   arriba, en el estilo de la etiqueta de las fichas y con el sol, y la pregunta pasa a ser el título grande, en la letra de los títulos de
   ficha. En la plantilla es un h2 (el constructor lo lee para el índice, los menús y las migas). En la página armada el nombre es
   p.tema-nombre y la pregunta, el h1 (14 de octubre de 2026), con el mismo aspecto */
.tema.con-pregunta>:is(h1,h2,.tema-nombre):where(:not(.bloque-grupo)){margin:var(--e-6) 0 var(--e-3);padding-left:18px;font:500 var(--t-2)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  font-variation-settings:normal}
.tema.con-pregunta>:is(h1,h2,.tema-nombre):where(:not(.bloque-grupo))::after{top:.24em;right:auto;left:0;width:12px;height:12px}
.con-pregunta .tema-intro .pregunta{max-width:20em;margin:0 0 var(--e-4);font-family:var(--f-c75);font-size:var(--t-9);line-height:1.08;font-weight:600;letter-spacing:-.01em;
  color:var(--azul);font-variation-settings:"wdth" 75,"opsz" 32}

/* migas: Datina, la sección y la provincia elegida, arriba del título */
.migas{margin:var(--e-7) 0 0;font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.migas ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
.migas li{display:flex;align-items:center;min-width:0}
.migas li+li::before{content:"\203A";margin:0 var(--e-2);font-size:14px;line-height:1;color:var(--faint)}
/* subrayadas como los demás enlaces, para no distinguirlas solo por el color (Fase 2, paso 6, respuesta del autor) */
.migas a{padding:var(--e-1) 0;color:var(--celeste-fuerte);text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:1.5px;text-underline-offset:3px}
.migas span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.migas-prov{color:var(--azul)}
.migas-prov[hidden]{display:none}
.migas+:is(h1,h2,.tema-nombre){margin-top:var(--e-4)!important}
.pildoras+.migas{margin-top:var(--e-6)}
/* la fila de una categoría (etapa 36): al final de la entrada de la página, antes de "En cifras", con el estilo de la navegación (letra en
   mayúsculas y la marca amarilla en la página actual). Si no entra, se desliza de costado */
.subsecciones{display:flex;align-items:baseline;gap:var(--e-6);max-width:100%;margin:calc(-1 * var(--e-4)) 0 var(--e-7);overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.subsecciones::-webkit-scrollbar{display:none}
.sub-cat{flex:none;font-family:var(--mono);font-weight:500;color:var(--muted)}
.subsecciones a{flex:none;padding:10px 0 9px;color:var(--azul);text-decoration:none;transition:color var(--dur-1) var(--ease-out)}
.subsecciones a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--sol)}
@media (hover:hover) and (pointer:fine){.subsecciones a:not([aria-current]):hover{color:var(--ink)}}
@media (hover:hover) and (pointer:fine){.migas a:hover{text-decoration:underline}}

/* ---------- Tu provincia: desplegable propio y perfil de la provincia elegida ---------- */
.prov-sub{margin:0 0 var(--e-6);max-width:var(--medida);color:var(--muted)}
/* sin la bajada (11 de octubre de 2026, pedido del autor), el selector de provincia va en su propio renglón debajo del título, no al costado */
.provincias>:is(h1,h2)+.elige{display:flex;width:max-content;max-width:100%}
/* desplegable: compacto, fuente liviana, crece desde el botón */
.elige{position:relative;z-index:6;display:inline-flex;flex-direction:column;gap:6px}
.elige-lab{font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.elige-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-width:260px;min-height:44px;padding:0 14px 0 var(--e-4);
  font:inherit;font-weight:350;color:var(--ink);background:var(--bg);border:1px solid var(--azul);border-radius:var(--r-control);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.elige-btn:active{transform:scale(.97)}
.elige-btn[aria-expanded="true"]{border-color:var(--celeste)}
.elige-flecha{width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-2) var(--ease-out)}
.elige-btn[aria-expanded="true"] .elige-flecha{transform:translateY(1px) rotate(225deg)}
.elige-panel{position:absolute;top:calc(100% + 6px);left:0;width:min(520px,calc(100vw - 2 * var(--margen)));padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-panel);
  box-shadow:0 1px 2px rgba(24,33,43,.05),0 18px 40px -18px rgba(44,116,181,.35);
  transform-origin:top left;opacity:0;transform:scale(.97) translateY(-4px);transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.elige-panel.abierto{opacity:1;transform:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.elige-buscar{width:100%;margin-bottom:var(--e-1);padding:var(--e-2) 10px 10px;font:inherit;font-size:var(--t-3);font-weight:350;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;outline:none}
.elige-buscar::placeholder{color:var(--faint-texto)}
/* el buscador de provincias no tiene borde propio: con el teclado, la línea de abajo se engrosa y toma el color del foco */
.elige-buscar:focus-visible{border-bottom:2px solid var(--celeste-fuerte);padding-bottom:9px}
.elige-lista{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px}
.elige-lista li{display:flex;align-items:center;gap:var(--e-2);padding:7px 10px;font-size:var(--t-3);font-weight:350;line-height:1.3;color:var(--ink);cursor:pointer;transition:background-color var(--dur-1) var(--ease-out)}
.elige-lista li.activa{background:var(--celeste-suave)}
/* la provincia elegida en --azul-hondo: 5,6 a 1 sobre el celeste de la opción activa (con --celeste-fuerte daba 4,04) */
.elige-lista li[aria-selected="true"]{color:var(--azul-hondo);font-weight:600}
.elige-lista li.primera{grid-column:1/-1}
.elige-lista li[hidden]{display:none}
.elige-vacio{margin:0;padding:var(--e-2) 10px;font-size:var(--t-3);color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .elige-btn:hover{border-color:var(--borde-claro);background:#FAFCFE}
  .elige-lista li:hover{background:var(--celeste-suave)}
}
/* perfil: un indicador por tarjeta, con la tira de las 24, agrupados por tema con un índice arriba (etapa 27) */
.prov-grid{margin-top:var(--e-6)}
.perfil-indice ol{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-6);margin:0;padding:0;list-style:none;font-size:var(--t-3)}
.perfil-grupo{scroll-margin-top:96px}
.perfil-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e-2) var(--e-6);margin:var(--e-8) 0 var(--e-4)}
.perfil-cab .bloque-grupo{margin:0}
.perfil-cab .enlace{font-size:var(--t-2)}
.perfil-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--e-4)}
.dp{gap:2px;padding:var(--e-4) var(--e-6)}
.dp-lab{font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.dp-num{font-size:var(--t-8);line-height:1.1;font-weight:500;letter-spacing:-.03em;color:var(--azul);font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 45,"opsz" 144;font-family:var(--f-c45)}
/* sin provincia elegida y sin total del país: "Elegí una provincia" en letra de texto, con el alto de la cifra para que nada salte al elegir */
.dp-num.invita{display:flex;align-items:center;min-height:calc(var(--t-8) * 1.1);font:500 var(--t-4)/1.3 var(--f);letter-spacing:0;font-variation-settings:normal;color:var(--muted)}
.dp-det{min-height:2.8em;font-size:var(--t-2);line-height:var(--i-chico);color:var(--muted)}
.dp-tira{display:block;width:100%;height:26px;margin:6px 0 2px;overflow:visible}
.dp-pos{font-size:var(--t-2);line-height:var(--i-chico);color:var(--muted)}
/* aclaración de un dato distorsionado (distorsiones.json) en las tarjetas: con la barra del sol, como el aviso de quiebre de serie */
.dp-aclara,.c-aclara,.mapa-tarjeta li .mt-aclara{display:block;margin-top:var(--e-2);padding:1px 0 1px var(--e-2);border-left:2px solid var(--sol-fuerte);
  font-size:var(--t-1);line-height:var(--i-chico);color:var(--muted)}
.dp-aclara:empty{display:none}
/* provincias parecidas y "si tu provincia fuera un país" */
#prov-band:not(:empty){display:inline-block;margin-right:var(--e-4);vertical-align:.08em}
#prov-band .bandera{display:block}
.prov-extra{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-6);margin-top:var(--e-6)}
.prov-extra>div{border-top:1px dotted var(--azul);padding-top:var(--e-3)}
.prov-extra h3{margin:0 0 var(--e-2);font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.prov-extra ol,.prov-extra ul{margin:0;font-size:var(--t-3);line-height:var(--i-texto)}
.prov-extra ol{padding-left:20px}
.prov-extra .suave{color:var(--muted);font-size:var(--t-2)}
@media (max-width:760px){
  /* en el celular los indicadores de la provincia se deslizan de costado */
  .perfil-tarjetas{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--margen));padding:2px var(--margen) var(--e-3);scroll-padding:0 var(--margen);scrollbar-width:none}
  .perfil-tarjetas::-webkit-scrollbar{display:none}
  .perfil-cab{margin-top:var(--e-6)}
  .dp{scroll-snap-align:start}
  .prov-extra{grid-template-columns:1fr}
}

/* ---------- Sobre nosotros ---------- */
.nos-bajada{margin:0 0 var(--e-6);max-width:34em;font-size:var(--t-6);line-height:var(--i-chico)}
/* cifras sin recuadro: no se tocan */
.nos-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-4);margin:0 0 var(--e-7)}
.nos-cifra{padding-top:var(--e-3);border-top:1px dotted var(--azul)}
.nos-cifra b{display:block;font-size:var(--t-cifra);line-height:1;font-weight:500;color:var(--azul);font-variation-settings:"wdth" 45,"opsz" 144;font-family:var(--f-c45)}
.nos-cifra span{display:block;margin-top:6px;font-size:var(--t-3);line-height:1.3;color:var(--muted)}
.nos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-6) var(--e-7)}
.nos-item{display:grid;grid-template-columns:76px 1fr;gap:var(--e-4);align-items:start}
.nos-ico .iso{width:76px;height:76px;--trazo:1.5px}
.nos-item h2{margin:var(--e-1) 0 6px;font-size:var(--t-5);line-height:var(--i-tarjeta);font-weight:600;color:var(--azul)}
.nos-item p{margin:0;font-size:var(--t-3);line-height:1.5}
.nos-texto{max-width:44em;margin-top:var(--e-7)}
.nos-texto h2{margin:var(--e-7) 0 var(--e-2);font-size:var(--t-7);line-height:var(--i-titulo);font-weight:500;color:var(--azul);font-variation-settings:"wdth" 55,"opsz" 144;font-family:var(--f-c55)}
.nos-texto p{margin:0 0 var(--e-3);line-height:1.6}
@media (max-width:760px){
  .nos-cifras{grid-template-columns:1fr 1fr}
  .nos-grid{grid-template-columns:1fr}
  .nos-item{grid-template-columns:58px 1fr;gap:var(--e-3)}
  .nos-ico .iso{width:58px;height:58px}
}

/* ---------- Laboratorio (etapa 33): piezas visuales grandes, como The Viz Lab de USAFacts ----------
   Cada pieza es una tarjeta blanca, como las fichas, con su texto corto, su gráfico vivo y el enlace a su ficha. Las grandes llevan el
   texto a un costado desde 1080 píxeles. Las de "Más del Laboratorio" van en una grilla de tres, dos o una columna, y sus filas se
   comparten (subgrid): los gráficos empiezan a la misma altura y los enlaces quedan en la misma línea aunque los textos midan distinto */
.lab-pieza{position:relative;display:flex;flex-direction:column;gap:var(--e-3);margin:var(--e-6) 0;padding:clamp(18px,3vw,var(--e-7)) clamp(var(--e-4),3vw,var(--e-7));
  background:var(--bg);border:1px solid var(--borde);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-tarjeta);transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.lab-pieza h2{margin:0 0 var(--e-3);font-size:var(--t-7);line-height:var(--i-tarjeta);font-weight:600;letter-spacing:-.005em;color:var(--azul);font-variation-settings:"wdth" 75,"opsz" 32;font-family:var(--f-c75)}
.lab-lead{margin:0 0 var(--e-3);max-width:var(--medida)}
.lab-pieza .grafico{margin:var(--e-2) 0 0}
.lab-pieza .pol-ley{margin:0 0 var(--e-2)}
.lab-pieza .pol-ley:empty{display:none}
.lab-pieza>.enlace,.lab-texto>.enlace{justify-self:start;align-self:start;font-size:var(--t-3)}
/* el mapa de los pozos guarda la proporción de su dibujo (mapaPozos: el alto es el 92% del ancho), así su silueta mide lo mismo en cualquier ancho */
.js .grafico[data-g="lab-pozos"]:is(:empty,[aria-busy="true"])::before{height:auto;aspect-ratio:1/.92}
/* Gráficos de la Corte Suprema (rehechos el 7 de octubre de 2026): la línea de los jueces que fija la ley y los lugares vacantes rayados,
   en la leyenda y en la lectura, los nombres pegados a las barras, las franjas de los gobiernos de facto y los cuadrados de los presidentes */
.pol-ley i.co-ley{width:16px;height:0;border-radius:0;background:none;border-top:1.5px solid var(--ink)}
:is(.pol-ley,.lectura-serie) i.co-vac{background:repeating-linear-gradient(-45deg,var(--faint) 0 1.5px,transparent 1.5px 4px);box-shadow:inset 0 0 0 1px var(--line)}
.lectura-serie i.co-vac{border-radius:2px}
.co-facto rect{fill:var(--superficie-2)}
.pol-ley i.co-banda{width:16px;background:var(--superficie-2);box-shadow:inset 0 0 0 1px var(--borde)}
.co-nom{font-family:var(--f);font-size:var(--t-1);fill:var(--ink)}
.angosto .co-nom{font-size:10.5px}
.co-nom.fuerte{font-weight:650}
.co-nom.activo{font-weight:650;fill:var(--azul-hondo,var(--ink))}
.co-marco{fill:none;stroke:var(--ink);stroke-width:1.5px;pointer-events:none}
.co-franja{stroke:#fff;stroke-width:1px;stroke-linejoin:round}
.co-ley-linea{fill:none;stroke:var(--ink);stroke-width:1.5px}
.co-rot{font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.01em}
.angosto .co-rot{font-size:var(--t-1)}
.co-regla{stroke:var(--ink);stroke-width:1px;stroke-opacity:.55;pointer-events:none}
.co-pres{font-family:var(--f);font-size:var(--t-2);fill:var(--ink)}
.angosto .co-pres{font-size:11.5px}
.co-anio{font-family:var(--mono);font-size:var(--t-1);fill:var(--muted);font-variant-numeric:tabular-nums}
.co-cuenta{font-family:var(--mono);font-size:11.5px;font-weight:600;fill:var(--ink)}
.co-cuad.activo{stroke:var(--ink);stroke-width:1.5px}
.co-prot{cursor:default}
/* el gráfico de los presidentes va en dos columnas desde 760 píxeles: entre 520 y 759, en una, con su propio alto mientras carga */
@container (min-width:520px) and (max-width:759px){ .js .grafico[data-g="cs-presidentes"]::before{height:var(--alto-m)} }
.lab-pieza.grande .lab-graf>.pol-ley{margin-bottom:var(--e-2)}
.pol-ley i.lab-ini{width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid var(--celeste)}
.pol-ley i.lab-fin{width:10px;height:10px;border-radius:50%;background:var(--celeste)}
.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--e-6)}
.lab-grid>.lab-pieza{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--e-3);margin:var(--e-2) 0 var(--e-6)}
.lab-grid .lab-lead{margin:0;font-size:var(--t-3)}
@media (min-width:1080px){
  .lab-pieza.grande{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:var(--e-8);align-items:center}
  .lab-pieza.grande .grafico{margin:0}
  .lab-pieza.grande.invertida{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
  .lab-pieza.grande.invertida>.lab-texto{order:2}
}
@media (max-width:1079px){
  .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* con una cantidad impar en dos columnas, la última ocupa las dos, como las demás grillas */
  .lab-grid>.lab-pieza:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){
  .lab-grid{grid-template-columns:1fr}
  .lab-pieza{margin:var(--e-4) 0;padding:var(--e-6) var(--e-4) var(--e-4)}
}
@media (hover:hover) and (pointer:fine){.lab-pieza:hover{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul),var(--sombra-tarjeta)}}

/* una pieza con página propia (la Corte Suprema): el texto en una columna de lectura, como los artículos, y los gráficos a todo el ancho */
.pieza{padding-top:var(--e-2)}
.pieza>.migas{margin-top:var(--e-7)}
.pieza .nota{max-width:none}
.pieza .nota>:not(.nota-graf){max-width:740px}
.pieza>.pasos{margin-top:var(--e-8)}

/* ---------- páginas de sección: pregunta de entrada, explicación, cifras y cierre ---------- */
.tema-intro{max-width:42em;margin:-4px 0 var(--e-7)}
.tema-intro .pregunta{margin:0 0 var(--e-3);font-size:var(--t-6);line-height:1.15;font-weight:500;color:var(--ink)}
.tema-intro p{margin:0;line-height:1.5;color:var(--muted)}
/* La bajada (etapa 38, pedido del autor: "poné una fuente más linda para todo lo que sea subtítulos después del título ... Cambiá la fuente
   para todos", y la opción A que eligió): Roboto Flex más grande (20 píxeles, 18 en el celular) y más liviana (340), con el tamaño óptico
   de 28 y un gris más oscuro que el de los textos secundarios. En las páginas donde la pregunta todavía es el subtítulo (las herramientas,
   el Laboratorio y Artículos) la pregunta toma la misma letra, un tamaño más grande */
.tema-intro p:not(.pregunta),.prov-sub,.nos-bajada,.bloque-sub,.nota .nota-bajada{font-family:var(--f-bajada);font-size:var(--t-5);line-height:1.5;
  font-weight:340;font-variation-settings:"opsz" 28;letter-spacing:-.003em;color:var(--tinta-bajada)}
.tema:not(.con-pregunta) .tema-intro .pregunta,.laboratorio .tema-intro .pregunta{font-family:var(--f-bajada);font-weight:340;font-variation-settings:"opsz" 28;letter-spacing:-.003em;color:var(--ink)}
/* en la portada, sobre el azul, la misma letra con su tamaño y su blanco */
.portada .bajada{font-family:var(--f-bajada);font-weight:340;font-variation-settings:"opsz" 28;letter-spacing:-.003em}
/* en el celular, una fila de secciones que se desliza de costado, con el mismo estilo que la barra */
.pildoras{display:none}
@media (max-width:760px){
  .pildoras{display:flex;gap:var(--e-6);overflow-x:auto;margin:0 calc(-1 * var(--margen));padding:var(--e-2) var(--margen) 0;scrollbar-width:none;
    border-bottom:1px solid var(--line)}
  .pildoras::-webkit-scrollbar{display:none}
  .pildoras a{flex:none;padding:var(--e-3) 0 10px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
    font-variation-settings:"wdth" 60,"opsz" 14;color:var(--azul);text-decoration:none;font-family:var(--f-c60)}
  .pildoras a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--sol)}
  .tema>.pildoras+:is(h1,h2,.tema-nombre){margin-top:var(--e-7)}
}
/* "Para entender los datos" (etapa 31, 6 de octubre de 2026, pedido del autor: "reordenar esto, queda rarísimo así, poco responsive",
   con los principios de diseño de Apple y de Emil Kowalski). El autor eligió entre cuatro opciones probadas sobre la página real, después
   de comparar cómo lo hacen Pew, The Pudding, ProPublica, la ONS, Full Fact e INSEE. Va al final de la página, después de las fichas y antes
   de "Seguí explorando", como los métodos en The Pudding o ProPublica, y arriba queda una línea que lleva hasta ahí (.exp-gancho).
   Desde 761 px es un índice y una lectura, como el índice de los informes de la ONS: el título y los temas a la izquierda, y el texto del
   tema elegido en una tarjeta a la derecha. Siempre hay un tema a la vista (el primero al llegar) y cambiar de tema no mueve la página.
   En el celular es una lista que se abre de a uno, con una flecha. Sin JavaScript se ven todos los textos, con los títulos como encabezados.
   Antes (2 de octubre de 2026) estaba arriba de las fichas: el título a la izquierda y una tarjeta con un + en un círculo por tema a la
   derecha, que dejaba la columna izquierda vacía y, en pantallas medianas, el signo lejos de su texto */
.exp-gancho{margin:0 0 var(--bloque);padding-top:var(--e-4);border-top:1px dotted var(--azul);font-size:var(--t-3);line-height:var(--i-chico);color:var(--muted)}
/* en las herramientas, después de la línea viene una sola ficha: la separación de un bloque, no la de un capítulo */
.herramienta>.exp-gancho{margin-bottom:var(--bloque)}
.exp-gancho a{font-weight:500}
.explicador{margin:var(--capitulo) 0 0;padding-top:var(--e-6);border-top:1px dotted var(--azul);scroll-margin-top:96px}
.en-cifras>h2{margin:0 0 var(--e-3);font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
/* el título con el mismo estilo que "Seguí explorando", el de los bloques de la portada */
.exp-cab .bloque-grupo{margin:0 0 var(--e-3)}
.exp-cab p{max-width:22em;margin:0;font-size:var(--t-3);line-height:var(--i-chico);color:var(--muted)}
.exp-lista{margin-top:var(--e-6);background:#fff;border:1px solid var(--borde);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-tarjeta);overflow:hidden}
.exp-fila+.exp-fila{border-top:1px solid var(--line)}
.exp-fila h3{margin:0;font-size:1em}
/* botón de despliegue (en el celular): el título en letra normal y una flecha que apunta abajo y gira al abrir. El + en un círculo de
   antes se leía como "agregar" */
.despliegue{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);width:100%;min-height:52px;padding:var(--e-3) var(--e-6);
  font:500 var(--t-4)/var(--i-tarjeta) var(--f);color:var(--ink);text-align:left;background:none;border:0;border-radius:0;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-out)}
.despliegue:focus-visible{outline-offset:-3px}
.desp-signo{position:relative;flex:none;width:20px;height:20px;color:var(--muted);transition:transform var(--dur-2) var(--ease-out),color var(--dur-1) var(--ease-out)}
.desp-signo::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translate(-50%,-70%) rotate(45deg)}
.despliegue[aria-expanded="true"] .desp-signo{transform:rotate(180deg);color:var(--azul)}
@media (hover:hover) and (pointer:fine){.despliegue:hover{background:var(--superficie)}}
html:not(.js) .desp-signo{display:none}
html:not(.js) .despliegue{cursor:default}
.js .exp-bloque:not(.abierto){display:none}
.exp-cont{padding:0 var(--e-6) var(--e-6)}
.exp-cont p{max-width:var(--medida);margin:0;font-size:var(--t-4);line-height:var(--i-texto);color:var(--ink)}
/* las fuentes al pie del texto, en gris y con el subrayado celeste de todos los enlaces */
.exp-cont .exp-fuente{margin-top:var(--e-3);font-size:var(--t-2);line-height:var(--i-chico);color:var(--muted)}
dl.glosario{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e-4) var(--e-6);margin:0}
.glosario dt{font-size:var(--t-3);font-weight:600;color:var(--ink)}
.glosario dd{margin:2px 0 0;font-size:var(--t-3);line-height:var(--i-chico);color:var(--muted)}
@media (max-width:760px){
  .despliegue{padding:var(--e-3) var(--e-4)}
  .exp-cont{padding:0 var(--e-4) var(--e-6)}
}
/* desde 761 px, índice y lectura. Una sola lista en el documento: las filas no forman caja (display: contents) y el texto abierto ocupa
   la columna derecha de arriba abajo. Las filas que sobran de la grilla no ocupan lugar, y la última, flexible, se queda con el alto de
   más cuando el texto es más largo que el índice (así los temas no se separan) */
@media (min-width:761px){
  .js .explicador{display:grid;grid-template-columns:minmax(220px,4fr) minmax(0,8fr);column-gap:var(--e-8);grid-template-rows:repeat(14,auto) 1fr;align-items:start}
  .js .exp-cab{grid-column:1;margin-bottom:var(--e-4)}
  .js .exp-cab .bloque-grupo{margin-bottom:var(--e-2)}
  .js .exp-lista,.js .exp-fila{display:contents}
  .js .exp-fila h3{grid-column:1}
  .js .despliegue{min-height:38px;padding:7px var(--e-3) 7px var(--e-4);font-size:var(--t-3);font-weight:400;line-height:1.35;color:var(--muted);
    border-left:2px solid var(--line)}
  .js .despliegue[aria-expanded="true"]{color:var(--ink);font-weight:600;border-left-color:var(--azul)}
  .js .desp-signo{display:none}
  .js .exp-bloque{grid-column:2;grid-row:1/-1;align-self:start}
  .js .exp-bloque.abierto{background:#fff;border:1px solid var(--borde);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-tarjeta)}
  .js .exp-cont{padding:var(--e-6) var(--e-7)}
}
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .js .despliegue:hover{color:var(--ink);background:none;border-left-color:var(--celeste)}
  .js .despliegue[aria-expanded="true"]:hover{border-left-color:var(--azul)}
}
.sobre>summary{display:flex;align-items:center;gap:var(--e-2);min-height:44px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--celeste-fuerte)}
.sobre>summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){.sobre>summary:hover{color:var(--ink)}}
/* "En cifras": la cifra clave de cada ficha, o la de la provincia elegida, antes de la explicación */
/* Cinco tarjetas en todas las secciones (etapa 15): del mismo ancho y llenando la fila cuando entran (880 píxeles de ancho o más),
   y si no, en una sola fila que se desliza de costado (antes se partían en dos filas con una sola en la segunda) */
.en-cifras{margin:0 0 var(--e-6);container-type:inline-size}
.cifras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--e-3)}
@container (min-width:880px){.cifras-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@container (max-width:879px){
  .cifras-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 2 * var(--e-3)) / 3.2);overflow-x:auto;
    scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--margen));padding:2px var(--margen) var(--e-3);scroll-padding:0 var(--margen);scrollbar-width:thin}
  .cifra{scroll-snap-align:start}
}
@container (max-width:560px){.cifras-grid{grid-auto-columns:74%;scrollbar-width:none}.cifras-grid::-webkit-scrollbar{display:none}}
.cifra{gap:6px;padding:var(--e-4)}
.cifra.prov{background:var(--celeste-suave)}
.cifra.invita{justify-content:center;border-style:dashed;border-color:var(--azul)}
.c-lab{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.c-num{font-size:var(--t-8);line-height:1;font-weight:500;color:var(--azul);font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 45,"opsz" 144;font-family:var(--f-c45)}
.c-txt{font-size:var(--t-2);line-height:var(--i-chico);color:var(--muted)}
/* líneas de ayuda antes de las fichas de suicidio */
.ayuda{max-width:var(--medida);margin:var(--e-6) 0 0;padding:var(--e-6) var(--e-6);background:var(--celeste-suave);border-radius:var(--r-tarjeta)}
.ayuda strong{font-weight:600}
/* los grupos de una página (Energía) abren un capítulo, y su primera ficha y la que sigue a las líneas de ayuda van pegadas (etapa 38) */
.tema>.bloque-grupo{margin-top:var(--capitulo)}
:is(.bloque-grupo,.ayuda)+.ficha{margin-top:var(--e-6)}
/* programas con evaluación oficial (Educación, etapa 9): tarjetas blancas como las de cierre, del mismo alto */
.programas .bloque-grupo{margin-top:var(--capitulo)}
.programas-sub{max-width:var(--medida);margin:0 0 var(--e-6);font-size:var(--t-3);line-height:var(--i-chico);color:var(--muted)}
.programas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--e-4)}
.programa{display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-6);background:#fff;border:1px solid var(--borde);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-tarjeta)}
.programa h3{margin:0;font-size:var(--t-5);line-height:var(--i-tarjeta);font-weight:600}
.programa p{margin:0;font-size:var(--t-3);line-height:var(--i-chico)}
.programa .programa-donde{margin-top:calc(-1 * var(--e-2));font-size:var(--t-2);color:var(--muted)}
.programa dl{display:grid;gap:var(--e-3);margin:0;padding-top:var(--e-3);border-top:1px solid var(--line)}
.programa dt{font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.programa dd{margin:2px 0 0;font-size:var(--t-3);line-height:var(--i-chico)}
.programa dd small{display:block;margin-top:2px;font-size:var(--t-2);color:var(--muted)}
.programa .enlace{margin-top:auto;padding-top:var(--e-2);font-size:var(--t-3)}
@media (max-width:760px){.programa{padding:var(--e-6)}}
/* Listas sin viñetas (etapa 14, pedido del autor: "no me gustan los bullets en ningún lugar"): sin marcador y con una línea fina
   entre un ítem y el siguiente, como las listas de Apple, GOV.UK o Stripe. Las listas numeradas (los rankings) conservan el número */
.nota-limites ul,.dx-lista,.dx-no-dice ul,.prov-extra ul,.creditos ul{list-style:none;padding-left:0}
.nota-limites li,.dx-lista li,.dx-no-dice li,.prov-extra ul>li{margin:0;padding:var(--e-3) 0;border-top:1px solid var(--borde)}
.nota-limites li:first-child,.dx-lista li:first-child,.dx-no-dice li:first-child,.prov-extra ul>li:first-child{border-top:0;padding-top:0}
.nota-limites li:last-child,.dx-lista li:last-child,.dx-no-dice li:last-child,.prov-extra ul>li:last-child{padding-bottom:0}
/* desplegables chicos (Cruces y los créditos de Sobre nosotros): sin el triángulo del navegador, con el signo + de "Para entender
   los datos" en chico, que gira hasta ser una cruz al abrir */
.cx-detalle>summary,.creditos>summary{display:inline-flex;align-items:center;gap:var(--e-2);list-style:none}
.cx-detalle>summary::-webkit-details-marker,.creditos>summary::-webkit-details-marker{display:none}
.cx-detalle>summary::after,.creditos>summary::after{content:"+";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font:600 15px/1 var(--f);color:var(--azul);background:var(--celeste-suave);transition:transform var(--dur-2) var(--ease-out)}
.cx-detalle[open]>summary::after,.creditos[open]>summary::after{transform:rotate(45deg);color:#fff;background:var(--azul)}
/* final de página: "Seguí explorando" (2 de octubre de 2026, pedido del autor, como el de usafacts.org). El título, el enlace a
   todas las secciones y cuatro tarjetas grises con el ícono en un recuadro blanco: la anterior, la siguiente y dos relacionadas */
.pasos{margin:var(--capitulo) 0 0}
.pasos-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e-2) var(--e-6);margin-bottom:var(--e-6)}
.pasos-cab .bloque-grupo{margin:0}
.pasos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-4)}
.tarjeta.explora{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:var(--e-6);padding:var(--e-4);
  background:var(--superficie-2);border-color:var(--superficie-2);box-shadow:none}
.explora-ico{display:grid;place-items:center;width:96px;height:96px;background:#fff;border-radius:var(--r-icono);box-shadow:var(--sombra-tarjeta)}
.explora-ico .iso{width:72px;height:72px;--trazo:1.5px}
.explora-ico .sol-ir{width:50px;height:50px}
.explora-txt{display:flex;flex-direction:column;gap:var(--e-1)}
.explora-txt b{font-size:var(--t-4);line-height:var(--i-tarjeta);font-weight:600}
.explora-txt small{font-size:var(--t-2);font-weight:500;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.explora:hover .sol-ir{transform:rotate(45deg)}}
@media (max-width:760px){
  .pasos-grid{grid-template-columns:1fr;gap:var(--e-3)}
  .tarjeta.explora{grid-template-columns:72px minmax(0,1fr);gap:var(--e-4);padding:var(--e-3)}
  .explora-ico{width:72px;height:72px}
  .explora-ico .iso{width:56px;height:56px}
  .explora-ico .sol-ir{width:40px;height:40px}
}

/* ---------- fichas: redondeadas, como todas las tarjetas ---------- */
.ficha{position:relative;margin:var(--bloque) 0;padding:clamp(var(--e-4),2.2vw,28px) clamp(var(--e-4),2.2vw,28px) var(--e-4);background:var(--bg);border:1px solid var(--borde);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-tarjeta);transition:border-color var(--dur-1) var(--ease-out)}
/* La tarjeta aparece una sola vez, al entrar en pantalla (datina.js pone "listo" en la página y "visto" en cada ficha).
   Mientras el código no llegó, se ve con su silueta desde los 400 ms (ver "formas de carga"): si llega antes, nunca se ve vacía */
.js:not(.listo) .ficha{animation:esqueleto var(--dur-2) var(--ease-out) 400ms both}
.listo .ficha{opacity:0;transform:translateY(10px);transition:opacity var(--dur-3) var(--ease-out) var(--retraso,0ms),transform var(--dur-3) var(--ease-out) var(--retraso,0ms),border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.listo .ficha.sin-entrada{transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.listo .ficha.visto{opacity:1;transform:none}
.etiqueta{display:inline-block;margin:0 0 var(--e-3);font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.etiqueta::before{content:"# ";color:var(--azul)}
/* con el título como pregunta (etapa 35), la descripción con el período va debajo. Desde el 11 de octubre de 2026 (pedido del autor:
   "armonizá las tipografías de cada una de las cards", variante B) la descripción y el texto de la ficha usan la letra de la bajada de
   cada página, del mismo tamaño y color: el subtítulo que sigue a un título, como en el resto del sitio */
.ficha-sub{max-width:var(--medida);margin:calc(-1 * var(--e-2)) 0 var(--e-3)}
.ficha-sub,.ficha .lead{font-family:var(--f-bajada);font-size:var(--t-4);line-height:1.55;font-weight:340;font-variation-settings:"opsz" 28;
  letter-spacing:-.003em;color:var(--tinta-bajada)}
.ficha h2{margin:0 0 var(--e-3);font-size:var(--t-7);line-height:var(--i-tarjeta);font-weight:600;letter-spacing:-.005em;color:var(--azul);font-variation-settings:"wdth" 75,"opsz" 32;font-family:var(--f-c75)}
.clave{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--e-4);margin:2px 0 var(--e-3)}
.clave .num{font-size:var(--t-cifra);line-height:1;font-weight:500;letter-spacing:-.01em;color:var(--celeste-fuerte);font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 45,"opsz" 144;font-family:var(--f-c45)}
.clave .txt{max-width:24em;font-size:var(--t-3);line-height:var(--i-chico);color:var(--muted)}
.ficha .lead{margin:0 0 6px;max-width:var(--medida)}
.ficha .nota{margin:var(--e-3) 0 0;max-width:42em;font-size:var(--t-3);color:var(--muted)}
/* notas metodológicas plegadas en "Sobre los datos" */
.sobre{margin:0}
.sobre>summary{display:inline-flex;min-height:34px;padding:0 var(--e-2) 0 0}
.sobre>summary::before{content:none!important}
.sobre .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.sobre[open]>summary{color:var(--ink)}
/* el cuadro con las notas: arriba del pie, sale desde el ícono */
.sobre-panel{position:absolute;z-index:6;left:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);max-width:46em;max-height:min(60vh,520px);overflow:auto;
  padding:var(--e-4) var(--e-6);background:#fff;border:1px solid var(--azul);border-radius:var(--r-panel);box-shadow:var(--sombra-panel);transform-origin:0 100%}
.sobre[open]>.sobre-panel{animation:abre-sobre var(--dur-2) var(--ease-out)}
@keyframes abre-sobre{from{opacity:0;transform:translateY(6px) scale(.98)}}
.sobre-panel .nota{margin:0 0 var(--e-2)!important;max-width:none}
.sobre-panel .nota:last-child{margin-bottom:0!important}
/* "Ver más": seis líneas a la vista y el resto con un botón (la altura es lo único que se anima, en 250 ms) */
.ficha .lead{overflow:hidden}
.ficha .lead.plegado{max-height:var(--alto-plegado);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.ver-mas{display:block;margin:var(--e-1) 0 var(--e-2);font-size:var(--t-3)}
.ver-mas[hidden]{display:none}
.grafico{position:relative;min-height:120px;margin:var(--e-6) 0 var(--e-2)}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.grafico[data-g="presidentes"]{min-height:0}
.contexto-grafico{margin:var(--e-3) 0 0;font-size:var(--t-2);color:var(--muted)}
/* lectura fija de las series: el último dato, o el que está debajo del mouse o del dedo */
.lectura-serie{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-height:1.6em;margin:0 0 var(--e-1);
  font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.lectura-serie b{color:var(--ink);font-weight:600}
/* cada lectura en un renglón, salvo que sola no entre en el ancho del gráfico (320 píxeles): entonces se parte en lugar de salirse */
.lectura-serie span{max-width:100%}
.lectura-serie i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%}
/* pie: fuente y acciones */
.pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-6);margin-top:var(--e-6);padding-top:var(--e-4);border-top:1px dotted var(--azul);font-size:var(--t-2);color:var(--muted)}
/* la fuente, con la frecuencia de actualización (etapa 27), se acomoda en dos renglones antes de mandar los botones a otra fila */
@media (min-width:761px){.pie>span{flex:1 1 16em;min-width:0}}  /* en el celular el pie es una columna */
.acciones{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-left:auto}
.como-calcula{white-space:nowrap}  /* "Cómo se calcula" al final de la fuente (paso 5), sin partirse en dos renglones */
/* "Artículos con este dato" (Fase 2, paso 4): una fila propia debajo de las acciones, con la pregunta de cada artículo como enlace */
.pie-arts{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e-1) var(--e-4);margin:0}
.accion .lbl{display:inline-block;min-width:7.2em;text-align:center;transition:opacity var(--dur-1) var(--ease-out)}
.accion .lbl.cambia{opacity:0}
.tabla-datos{margin:var(--e-4) 0 0}
.tabla-datos .tabla-desliza{max-height:360px;margin:0}
.tabla-nota{margin:6px 0 0;font-size:var(--t-2);color:var(--muted)}
/* "Ver tabla" (etapa 16): en cada columna de números, el 20% más alto en azul y negrita y lo que queda debajo de la mitad en gris */
.tabla-areas td.q-alto{color:var(--azul);font-weight:650}
.tabla-areas td.q-bajo{color:var(--muted)}
/* qué quiere decir cada color en los gráficos de cambios (etapa 16) */
.clave-color{margin:0 0 var(--e-2);font-size:var(--t-2);line-height:var(--i-chico);color:var(--muted)}
.c-bueno{color:var(--bueno-texto);font-weight:650}
.c-malo{color:var(--malo-texto);font-weight:650}
/* Cruces: lo que quedó fuera del cálculo */
.cx-fuera{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);margin:var(--e-3) 0 0}
.cx-fuera-lab{font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cx-reponer{font-size:var(--t-2)}
@media (hover:hover) and (pointer:fine){.ficha:hover{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul),var(--sombra-tarjeta)}}
@media (max-width:760px){
  .ficha{padding:var(--e-6) var(--e-4) var(--e-4)}
  .ficha .nota{font-size:var(--t-2)}
  .grafico{margin:var(--e-6) 0 6px}
  .pie{flex-direction:column;align-items:flex-start}
  .acciones{margin-left:0}
}

/* fichas horizontales: la cabeza y el texto a la izquierda y el gráfico a la derecha, desde 1080 px. La fila del texto toma el alto que
   sobra del gráfico, así el texto queda pegado a la cabeza. Más angosto se apilan: la pregunta, el gráfico y el texto (etapa 37) */
.ficha-cab,.ficha-texto,.ficha-grafico{display:contents}
@media (min-width:1080px){
  .ficha.horizontal{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:var(--e-8);align-items:start}
  .ficha.horizontal>:is(.ficha-cab,.ficha-texto,.ficha-grafico){display:block;min-width:0}
  .ficha.horizontal>.ficha-cab{grid-area:1/1}
  .ficha.horizontal>.ficha-texto{grid-area:2/1}
  .ficha.horizontal>.ficha-grafico{grid-area:1/2/3/3}
  .ficha.horizontal>.pie,.ficha.horizontal>.tabla-datos{grid-column:1/-1}
  .ficha-grafico>:first-child,.ficha-texto>:first-child{margin-top:0}
}
/* textos de las fichas justificados (11 de octubre de 2026, pedido del autor: "los textos que van adentro los vas a justificar a todos"), con
   corte de palabras en español (la página es lang="es") para que no queden huecos grandes entre palabras en las columnas angostas */
.ficha p:not(.clave){text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3}
/* salvo los títulos chicos en letra mono de los gráficos y las herramientas, y la descripción debajo de la pregunta (Fase 2, paso 7,
   respuesta del autor del 23 de octubre de 2026): justificados quedaban con huecos grandes entre palabras, sobre todo en el celular */
.ficha p:is(.lectura-serie,.cx-leyenda,.mp-lugar,.dx-grafico-tit,.ix-leyenda,.ficha-sub){text-align:left;-webkit-hyphens:manual;hyphens:manual}
/* en las fichas a todo el ancho (anchas y herramientas), donde el gráfico no va al costado: la cabeza (la pregunta, la descripción y el
   texto) en una sola columna de lectura cómoda, de corrido, y a su derecha los controles de la ficha, alineados con el final del texto,
   justo arriba del gráfico. Así no queda vacía la mitad derecha y ninguna oración se corta (11 de octubre de 2026, pedido del autor: el
   texto en dos columnas parecía partido en dos). Las notas, en la misma columna que el texto. Lo demás va a todo el ancho */
@media (min-width:1080px){
  .ficha:is(.ancha,.explorador){display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--e-8);align-items:start}
  .ficha:is(.ancha,.explorador)>*{grid-column:1/-1;min-width:0}
  .ficha:is(.ancha,.explorador)>:is(.etiqueta,h2,.ficha-sub,.clave,.lead,.nota){grid-column:1;max-width:none}
  .ficha:is(.ancha,.explorador)>.etiqueta{justify-self:start}
  .ficha:is(.ancha,.explorador)>:is(.lg-sels,.vt-controles,.selector-ficha,.dx-controles){grid-column:2;grid-row:1/span 6;align-self:end;
    max-width:none;margin:0 0 var(--e-4)}
}
/* el texto que sigue al gráfico se separa de él como el gráfico de la cabeza (en la plantilla, antes de que llegue el código, y después) */
@media (max-width:1079px){.ficha>:not(h2,.ficha-sub,.etiqueta,.clave)+.lead,.ficha-grafico+.ficha-texto>.lead:first-child{margin-top:var(--e-6)}}

/* ---------- formas de carga (etapa 6) ----------
   Mientras llegan el código o los datos, cada ficha muestra su silueta: el título y el texto como renglones, y el gráfico
   con la forma de su tipo (data-forma en la plantilla) y el alto que va a tener, para que nada salte cuando llega.
   Quietas: aparecen con un fundido a los 400 ms, así no se ven si los datos llegan antes. Los gráficos que se dibujan
   al instante no las muestran nunca. Las notas esperan dentro de "Sobre los datos" y el texto y el gráfico ya van en
   dos columnas en la computadora, como quedan después. */
@keyframes esqueleto{from{opacity:0}}
.js:not(.listo) .ficha>.nota{display:none}
@media (min-width:1080px){
  .js:not(.listo) .tema:not(.herramienta)>.ficha:not(.ancha){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--e-8);align-items:start;grid-auto-flow:row dense}
  .js:not(.listo) .tema:not(.herramienta)>.ficha:not(.ancha)>*{grid-column:2}
  /* el texto ocupa muchas filas para no quedar debajo del gráfico: las filas vacías no miden nada */
  .js:not(.listo) .tema:not(.herramienta)>.ficha:not(.ancha)>h2{grid-column:1;grid-row:1}
  .js:not(.listo) .tema:not(.herramienta)>.ficha:not(.ancha)>.lead{grid-column:1;grid-row:2/span 30}
  .js:not(.listo) .tema:not(.herramienta)>.ficha:not(.ancha)>.ficha-sub{grid-column:1;grid-row:2}
  .js:not(.listo) .tema:not(.herramienta)>.ficha:not(.ancha):has(>.ficha-sub)>.lead{grid-row:3/span 30}
  .js:not(.listo) .tema:not(.herramienta)>.ficha:not(.ancha)>.grafico{grid-row:span 30}
  .js:not(.listo) .tema:not(.herramienta)>.ficha:not(.ancha)>.pie{grid-column:1/-1}
}
.js .ficha h2:empty::before,.js .ficha .lead:empty::before{content:"";display:block;border-radius:2px;animation:esqueleto var(--dur-2) var(--ease-out) 400ms both}
.js .ficha h2:empty::before{height:.75lh;margin:.12lh 0;width:min(24em,80%);background:var(--esqueleto)}
/* la descripción que se calcula ocupa dos renglones mientras llega, como cuando se completa */
.js .ficha .ficha-sub:empty::before{content:"";display:block;height:2lh;width:min(22em,80%);border-radius:2px;background:linear-gradient(var(--esqueleto) 0 70%,transparent 70%) 0 0/100% 1lh;
  animation:esqueleto var(--dur-2) var(--ease-out) 400ms both}
.js .ficha .lead:empty::before{height:4lh;background:repeating-linear-gradient(var(--esqueleto) 0 .62lh,transparent .62lh 1lh);
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% 3lh no-repeat,linear-gradient(#000 0 0) 0 3lh/58% 1lh no-repeat;
  mask:linear-gradient(#000 0 0) 0 0/100% 3lh no-repeat,linear-gradient(#000 0 0) 0 3lh/58% 1lh no-repeat}
/* el gráfico: alto de su forma (filas de 24 píxeles, 20 si el gráfico mide menos de 520 de ancho, como en datina.js) */
.js .grafico[data-forma]:empty,.js .grafico[aria-busy="true"]{container-type:inline-size}
/* con :where() la regla general pesa poco y cada forma (más abajo) pone su dibujo encima */
.js :where(.grafico[data-forma]:empty,.grafico[aria-busy="true"])::before{content:"";display:block;box-sizing:border-box;
  --fila:24px;--izq:150px;height:var(--alto,calc(var(--filas,24) * var(--fila) + 34px + var(--extra,0px)));
  background:var(--esqueleto);background-clip:content-box;background-origin:content-box;border-radius:2px;
  animation:esqueleto var(--dur-2) var(--ease-out) 400ms both}
@container (max-width:519px){
  .js :where(.grafico[data-forma]:empty,.grafico[aria-busy="true"])::before{--fila:20px;--izq:118px;
    height:var(--alto-c,var(--alto,calc(var(--filas,24) * var(--fila) + 34px + var(--extra,0px))))}
}
.grafico[data-forma="lineas"]{--alto:363px;--alto-c:323px}
.grafico[data-forma="columnas"]{--alto:340px;--alto-c:300px}
.grafico[data-forma="puntos"]{--alto:380px;--alto-c:320px}
.grafico[data-forma="franjas"]{--alto:230px;--alto-c:190px}
.grafico[data-forma="bloque"]{--alto:340px;--alto-c:300px}
/* barras por provincia: el nombre a la izquierda y barras que se acortan hacia abajo, como quedan ordenadas */
.js .grafico:is([data-forma="barras"],[data-forma="pesas"])::before{padding-top:var(--e-6);
  background:linear-gradient(transparent 28%,var(--esqueleto) 28% 72%,transparent 72%) calc(var(--izq) - 92px) 0/82px var(--fila) repeat-y,
    linear-gradient(transparent 28%,var(--esqueleto) 28% 72%,transparent 72%) var(--izq) 0/calc(100% - var(--izq) - 54px) var(--fila) repeat-y;
  background-clip:content-box;background-origin:content-box;
  -webkit-mask:linear-gradient(#000 0 0) 0 0/var(--izq) 100% no-repeat,linear-gradient(to bottom right,#000 50%,transparent 50%) var(--izq) 0/calc(100% - var(--izq)) 100% no-repeat;
  mask:linear-gradient(#000 0 0) 0 0/var(--izq) 100% no-repeat,linear-gradient(to bottom right,#000 50%,transparent 50%) var(--izq) 0/calc(100% - var(--izq)) 100% no-repeat}
.js .grafico[data-forma="pesas"]::before{
  background:linear-gradient(transparent 28%,var(--esqueleto) 28% 72%,transparent 72%) calc(var(--izq) - 92px) 0/82px var(--fila) repeat-y,
    linear-gradient(transparent 42%,var(--esqueleto) 42% 58%,transparent 58%) var(--izq) 0/calc(100% - var(--izq) - 44px) var(--fila) repeat-y;
  background-clip:content-box;background-origin:content-box}
/* líneas en el tiempo: un área suave debajo de una línea, con el lugar de la lectura arriba */
.js .grafico[data-forma="lineas"]::before{padding:37px 128px 30px 44px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 31C12 29 18 22 30 23S48 15 60 17 82 8 100 6V40H0Z' fill='%23EDF2F8'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  background-clip:content-box;background-origin:content-box}
@container (max-width:519px){ .js .grafico[data-forma="lineas"]::before{padding-right:92px} }
/* columnas por año o por mes */
.js .grafico[data-forma="columnas"]::before{padding:14px var(--e-2) 28px 36px;background:linear-gradient(90deg,transparent 18%,var(--esqueleto) 18% 82%,transparent 82%) 0 0/5% 100% repeat-x;
  background-clip:content-box;background-origin:content-box;-webkit-mask:linear-gradient(to top,#000 45%,transparent 96%);mask:linear-gradient(to top,#000 45%,transparent 96%)}
/* pirámide: barras a los dos lados del centro, más anchas abajo */
.js .grafico[data-forma="piramide"]::before{padding:var(--e-8) var(--e-2) var(--e-4);background:linear-gradient(transparent 14%,var(--esqueleto) 14% 86%,transparent 86%) 0 0/100% 20px repeat-y;
  background-clip:content-box;background-origin:content-box;
  -webkit-mask:linear-gradient(to top left,#000 50%,transparent 50%) 0 0/calc(50% - 28px) 100% no-repeat,linear-gradient(to top right,#000 50%,transparent 50%) 100% 0/calc(50% - 28px) 100% no-repeat;
  mask:linear-gradient(to top left,#000 50%,transparent 50%) 0 0/calc(50% - 28px) 100% no-repeat,linear-gradient(to top right,#000 50%,transparent 50%) 100% 0/calc(50% - 28px) 100% no-repeat}
/* dispersión: puntos en una franja diagonal */
.js .grafico[data-forma="puntos"]::before{padding:34px var(--e-4) 44px 46px;
  background:radial-gradient(circle,var(--esqueleto) 0 5px,transparent 5.5px) 0 0/48px 40px,radial-gradient(circle,var(--esqueleto) 0 5px,transparent 5.5px) 24px 20px/48px 40px;
  background-clip:content-box;background-origin:content-box;
  -webkit-mask:linear-gradient(to top right,transparent 22%,#000 38% 62%,transparent 78%);mask:linear-gradient(to top right,transparent 22%,#000 38% 62%,transparent 78%)}
/* franjas de temperatura y listas */
.js .grafico[data-forma="franjas"]::before{padding-bottom:30px;background:repeating-linear-gradient(90deg,var(--esqueleto) 0 8px,var(--superficie) 8px 16px);background-clip:content-box}
.js .grafico[data-forma="lista"]::before{background:repeating-linear-gradient(var(--esqueleto) 0 12px,transparent 12px 28px);
  -webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.js .grafico[data-forma="mapa"]::before{width:min(100%,560px);margin:0 auto;border-radius:24px}
/* una ficha que todavía no entró en pantalla muestra la silueta recién 400 ms después de entrar, si su gráfico no llegó */
.listo .ficha:not(.visto) :is(h2,.lead,.grafico)::before{animation:none}
/* "En cifras" y el perfil provincial: tarjetas vacías del mismo tamaño (las pone el constructor y las reemplaza datina.js) */
html:not(.js) .esqueleto{display:none}
.esqueleto .cifra,.dp.esqueleto{--esqueleto:var(--superficie-3);pointer-events:none;animation:esqueleto var(--dur-2) var(--ease-out) 400ms both;background-repeat:no-repeat;
  background-image:linear-gradient(var(--esqueleto) 0 0),linear-gradient(var(--esqueleto) 0 0),linear-gradient(var(--esqueleto) 0 0),linear-gradient(var(--esqueleto) 0 0)}
.esqueleto .cifra{min-height:141px;background-position:16px 18px,16px 66px,16px 86px,16px 106px;background-size:42% 30px,calc(100% - 32px) 10px,calc(100% - 32px) 10px,55% 10px}
/* con las cinco tarjetas en fila (880 píxeles o más) la mayoría de las secciones tiene tarjetas de 149 píxeles y en celular de 141:
   la silueta usa la altura más común para que el texto de abajo casi no salte cuando llega datina.js (medido el 12 de octubre de 2026) */
@container (min-width:880px){.esqueleto .cifra{min-height:149px}}
.dp.esqueleto{min-height:224px;background-position:20px 20px,20px 50px,20px 112px,20px 168px;background-size:50% 10px,40% 40px,calc(100% - 40px) 10px,calc(100% - 40px) 12px}

/* ---------- controles de las fichas: rectos ---------- */
/* conmutador: botones de opción con un indicador que se desliza */
.conmutador{position:relative;display:inline-grid;grid-template-columns:repeat(var(--n,2),1fr);margin:var(--e-6) 0 0;padding:2px;border:1px solid var(--azul);border-radius:var(--r-control)}
.conmutador::before{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--n,2));background:var(--azul);border-radius:calc(var(--r-control) - 3px);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform var(--dur-2) var(--ease-out)}
/* con botones de anchos distintos (pantallas muy angostas), la marca toma la posición y el ancho del elegido, que mide datina.js */
.conmutador.medido::before{left:0;width:var(--w);transform:translateX(var(--x));transition:transform var(--dur-2) var(--ease-out),width var(--dur-2) var(--ease-out)}
.conmutador button{position:relative;min-height:34px;padding:0 var(--e-4);font:500 var(--t-1)/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--azul);
  background:transparent;border:0;cursor:pointer;transition:color var(--dur-1) var(--ease-out)}
.conmutador button[aria-pressed="true"]{color:#fff}
.conmutador button[aria-selected="true"]{color:#fff}
.conmutador.pestanas{margin-top:var(--e-3)}
.panel-pestana[hidden]{display:none}
@media (max-width:760px){
  .conmutador{display:grid;width:100%}
  .conmutador button{padding:6px;line-height:1.25}
}
/* a 320 píxeles, cuatro botones con palabras largas ("Evolución", "Cantidad") no entraban con 6 píxeles a cada lado, y en Cruces
   "Correlaciones" se salía de la ficha (14 de octubre de 2026): menos margen y un poco menos de espacio entre letras */
@media (max-width:360px){
  .conmutador button{padding:6px 2px;letter-spacing:.03em}
}
/* listas desplegables de las fichas y de las herramientas */
.cx-campo,.selector-ficha{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;min-width:0}
.selector-ficha{max-width:420px;margin:var(--e-6) 0 0}
.cx-campo span,.selector-ficha span,.cm-xs legend,.cx-sug-lab{font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cx-campo select,.selector-ficha select{width:100%;min-width:0;min-height:44px;padding:0 38px 0 var(--e-3);font:inherit;font-size:var(--t-3);color:var(--ink);background:var(--bg);
  border:1px solid var(--azul);border-radius:var(--r-control);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--azul) 50%),linear-gradient(135deg,var(--azul) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.cx-campo select:focus-visible,.selector-ficha select:focus-visible{outline:2px solid var(--sol);outline-offset:2px}
.ir-consultas{margin:var(--e-6) 0 0}
/* el botón a las consultas de pobreza es largo: en pantallas angostas pasa a dos renglones en lugar de salirse de la ficha */
.ir-consultas .boton{max-width:100%;white-space:normal;padding-block:10px;text-align:center}
/* la OCDE dentro de cada gráfico: botones que cambian lo que muestra, en violeta */
.ocde-conm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:var(--e-4) 0 2px}
.ocde-conm .boton:not(.propio){--b-tinta:var(--ocde);--b-borde:var(--ocde)}
.ocde-conm .boton:not(.propio)[aria-pressed="true"]{--b-fondo:var(--ocde);--b-tinta:#fff}
@media (hover:hover) and (pointer:fine){
  .ocde-conm .boton:not(.propio)[aria-pressed="false"]:hover{--b-fondo:var(--ocde-suave)}
  .ocde-conm .boton:not(.propio)[aria-pressed="true"]:hover{--b-fondo:var(--ocde);--b-borde:var(--ocde)}
}
.ocde-nota a{color:var(--azul)}
.ocde-marca{color:var(--ocde);font-weight:600}

/* ---------- gráficos ---------- */
.eje text{fill:var(--muted);font-size:12.5px;font-family:var(--f)}
.eje line,.eje path{stroke:var(--line)}
.grilla line{stroke:var(--line);stroke-dasharray:2 3}
.etq{font-size:var(--t-2);fill:var(--ink);font-family:var(--f)}
.etq-suave{font-size:12.5px;fill:var(--muted);font-family:var(--f)}
.etq-fuerte{font-size:var(--t-2);font-weight:650;fill:var(--ink);font-family:var(--f)}
.etq,.etq-suave,.etq-fuerte{paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;stroke-linejoin:round}
/* los nombres y valores de las barras llevan un borde del color del fondo: la línea del país pasa por detrás sin cruzar las cifras */
/* sin los números que van adentro de las barras apiladas (text.v): sobre un tramo oscuro, el borde del color del fondo los tapaba */
.grafico g.f text:not(.v){paint-order:stroke;stroke:var(--bg);stroke-width:6px;stroke-linejoin:round}
.anota{font-family:var(--f);font-size:11.5px;fill:var(--muted);paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;stroke-linejoin:round}
.anota.adentro{fill:var(--ink);font-weight:500;stroke-width:3px}
.anota.sobre-fuerte{fill:#fff}
/* cuadro flotante */
.tip{position:absolute;z-index:5;padding:7px 10px;font-family:var(--mono);font-size:12px;line-height:1.35;white-space:nowrap;color:var(--bg);background:var(--azul-hondo);border-radius:var(--r-interno);
  pointer-events:none;opacity:0;transform:translateY(4px) scale(.96);transform-origin:50% 100%;transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.tip.on{opacity:1;transform:none}
/* en el celular, el cuadro no pasa del ancho de la pantalla: corta en renglones en vez de correr la página de costado */
@media (max-width:760px){.tip{white-space:normal;max-width:calc(100vw - 16px)}}
.tip .tip-pais{opacity:.82}
/* minigráfico de las tarjetas de "En cifras" (etapa 16): el mismo cuadro, más ancho, arriba de la tarjeta o debajo si no entra */
.tip.tip-cifra{width:276px;padding:10px var(--e-3);white-space:normal;transform-origin:50% 100%}
.tip.tip-cifra.abajo{transform-origin:50% 0}
.mini-tit{display:block;margin:0 0 var(--e-2);font:600 12px/1.35 var(--f)}
.mini{display:block;overflow:visible}
.mini .mini-b{fill:rgba(255,255,255,.55)}
.mini .mini-hl{fill:var(--sol)}
.mini .mini-pais{stroke:#fff;stroke-width:1.2;stroke-dasharray:3 3}
.mini .mini-cero{stroke:rgba(255,255,255,.5);stroke-width:1}
.mini .mini-v{fill:#fff;font:600 11px var(--mono)}
.mini .mini-x{fill:rgba(255,255,255,.75);font:400 10px var(--mono)}
.mini-pie{display:block;margin:var(--e-2) 0 0;font:400 11px/1.4 var(--f);opacity:.88}
/* tablas */
.tabla-desliza{max-height:420px;overflow:auto;margin:var(--e-6) 0 var(--e-2);border:1px solid var(--line);border-radius:var(--r-interno)}
.tabla-areas{width:100%;border-collapse:collapse;font-size:var(--t-3);font-variant-numeric:tabular-nums}
.tabla-areas th{position:sticky;top:0;padding:9px var(--e-3);background:var(--superficie);text-align:left;font-size:var(--t-2);font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
.tabla-areas td{padding:var(--e-2) var(--e-3);border-bottom:1px solid #F0F3F7;vertical-align:top}
.tabla-areas td.n,.tabla-areas th.n{text-align:right;white-space:nowrap}
.tabla-areas tr.elegida td{background:var(--celeste-suave)}
/* mapa de las áreas protegidas */
.mapa-areas svg{max-width:560px;margin:0 auto}
.mapa-areas .prov{stroke:#fff;stroke-width:.8;transition:stroke var(--dur-2) var(--ease-out),stroke-width var(--dur-2) var(--ease-out)}
.mapa-areas .prov.elegida{stroke:var(--ink);stroke-width:1.6}
svg.mapa-prov{display:block;max-width:560px;margin:0 auto}
svg.mapa-prov .prov{stroke:#fff;stroke-width:.8;transition:stroke var(--dur-2) var(--ease-out),stroke-width var(--dur-2) var(--ease-out)}
svg.mapa-prov .prov.elegida{stroke:var(--ink);stroke-width:1.6}
svg.mapa-prov .caba-aparte line{stroke:var(--muted);stroke-width:.8}
@media (hover:hover) and (pointer:fine){svg.mapa-prov .prov:hover{stroke:var(--ink);stroke-width:1.2}}
.mapa-areas .burbuja{fill:var(--sol);fill-opacity:.8;stroke:var(--sol-borde);stroke-width:.8}
.leyenda-mapa text{font-size:12px;fill:var(--muted);font-family:var(--f)}

/* ---------- herramientas ---------- */
/* Tu índice */
.ix-cuerpo{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--e-7);align-items:start;margin-top:var(--e-6)}
.ix-pesos{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--e-3)}
.ix-peso{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:var(--e-1) var(--e-2);font-size:var(--t-3)}
.ix-peso i{width:10px;height:10px;border-radius:50%}
.ix-peso output{min-width:1.4em;font-family:var(--mono);font-size:var(--t-2);text-align:right;color:var(--azul)}
.ix-peso input{grid-column:1/-1;width:100%;margin:0;accent-color:var(--azul)}
.ix-peso small{grid-column:1/-1;font-size:var(--t-2);line-height:1.3;color:var(--muted)}
.ix-reset{justify-self:start}
.ix-lectura{max-width:40em;margin:0 0 var(--e-3)}
.ix-leyenda{display:flex;flex-wrap:wrap;gap:var(--e-1) 14px;margin:6px 0 0;font-family:var(--mono);font-size:var(--t-1);color:var(--muted)}
.ix-leyenda i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:-1px}
@media (max-width:760px){
  .ix-cuerpo{grid-template-columns:1fr}
  .ix-pesos{position:static;display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3) var(--e-4)}
  .ix-peso small{display:none}
}
/* mapa de los departamentos */
.mp-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:var(--e-6);align-items:start;margin-top:var(--e-4)}
.mp-mapa svg{max-height:640px;overflow:hidden}
.mp-mapa path.dep{stroke:#fff;stroke-width:.3;cursor:pointer}
.mp-mapa path.dep:hover{stroke:var(--ink);stroke-width:1.2}
.mp-mapa path.limite{fill:none;stroke:var(--azul);stroke-width:.9;pointer-events:none}
.mp-lugar{margin:0 0 var(--e-2);font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.mp-lado h3{margin:var(--e-4) 0 6px;font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mp-lado ol{margin:0;padding-left:20px;font-size:var(--t-3);line-height:1.5}
.mp-lado ol span{color:var(--muted);font-variant-numeric:tabular-nums}
.mp-ley{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
@media (max-width:760px){.mp-cuerpo{grid-template-columns:1fr}}
/* explorador de cruces */
.cx-controles{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--e-3);margin:var(--e-6) 0 var(--e-3)}
.cx-controles .cx-boton{flex:0 0 auto;min-height:44px}
.cx-opciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-6);font-size:var(--t-3);color:var(--muted)}
.cx-opciones label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.cx-opciones input,.cm-xs input{width:15px;height:15px;accent-color:var(--azul)}
.cx-opciones input:disabled+*,.cx-opciones label:has(input:disabled){opacity:.45;cursor:default}
/* sugerencias para empezar: enlaces en una fila que se desliza */
.cx-sug{display:flex;flex-wrap:nowrap;align-items:baseline;gap:var(--e-3);min-width:0;margin:var(--e-4) 0 0}
.cx-sug>span:last-child{display:flex;flex-wrap:nowrap;gap:var(--e-4);min-width:0;padding-bottom:var(--e-1);overflow-x:auto;scrollbar-width:thin}
.cx-sug-lab{flex:none;white-space:nowrap}
.cx-sug .cx-chip{flex:0 0 auto;font-size:var(--t-3);white-space:nowrap}
.cx-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:var(--e-6);align-items:start;margin-top:var(--e-4)}
.cx-cuerpo>*{min-width:0}
/* diagnóstico educativo (etapa 10): controles, provincias elegidas, una tarjeta interna por provincia y el gráfico al costado */
.vt-controles{display:flex;flex-wrap:wrap;gap:0 var(--e-4);align-items:end}
.dx-controles{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--e-4);margin:var(--e-6) 0 var(--e-3)}
.dx-elegidas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3);min-height:36px;margin-bottom:var(--e-6)}
.dx-chips{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:0;padding:0;list-style:none}
.dx-chips li{display:inline-flex;align-items:center;gap:var(--e-2);min-height:36px;padding:0 var(--e-1) 0 var(--e-3);font-size:var(--t-2);border:1px solid var(--borde);border-radius:var(--r-control);background:var(--bg)}
.dx-quitar{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.dx-quitar svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media (hover:hover){.dx-quitar:hover{background:var(--celeste-suave);color:var(--azul)}}
.dx-quitar:focus-visible{outline:2px solid var(--sol);outline-offset:1px}
.dx-vacio{margin:0;font-size:var(--t-2);color:var(--muted)}
.dx-cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-6);align-items:start}
.dx-cuerpo>*{min-width:0}
@media (min-width:1080px){.dx-cuerpo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.dx-grafico-caja{position:sticky;top:96px}}
.dx-grafico-tit,.dx-prov h4,.dx-no-dice h3{margin:0 0 var(--e-3);font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dx-prov{margin:0 0 var(--e-4);padding:var(--e-6);border:1px solid var(--borde);border-radius:var(--r-interno);background:var(--bg)}
.dx-prov h3{margin:0 0 var(--e-3);font-size:var(--t-4);font-weight:600}
.dx-prov h4{margin-top:var(--e-6);text-wrap:wrap}
.dx-cifra{margin:var(--e-3) 0 var(--e-1);font-size:var(--t-3);line-height:var(--i-texto);max-width:var(--medida)}
.dx-cifra b{display:block;font-size:var(--t-6);line-height:1.1;font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums}
.dx-pos,.dx-linea,.dx-lista,.dx-conjunto,.dx-contexto,.dx-ayuda{font-size:var(--t-2);line-height:var(--i-texto);max-width:var(--medida)}
.dx-pos{margin:0 0 var(--e-2);color:var(--ink)}
.dx-linea{margin:var(--e-3) 0 0}
.dx-lista{margin:0}
.dx-salida cite,.dx-tabla small{font:400 var(--t-1)/1.4 var(--mono);font-style:normal;color:var(--muted)}
.dx-tabla small{display:block;margin-top:2px}
.dx-tabla{font-size:var(--t-2)}
.dx-prov .tabla-desliza{max-height:none}
.dx-pie-tabla{margin:var(--e-2) 0 0;font-size:var(--t-1);color:var(--muted)}
.dx-aviso{margin:0 0 var(--e-3);padding:var(--e-3) var(--e-4);font-size:var(--t-2);line-height:var(--i-texto);background:var(--sol-suave);border-left:3px solid var(--sol-fuerte);border-radius:var(--r-interno)}
.dx-conjunto,.dx-contexto{margin:0 0 var(--e-4);padding:var(--e-4);background:var(--superficie-2);border-radius:var(--r-interno)}
.dx-ayuda{margin:var(--e-4) 0 0;color:var(--muted)}
.dx-no-dice{margin-top:var(--e-6);padding-top:var(--e-6);border-top:1px dotted var(--azul)}
.dx-no-dice ul{margin:0;font-size:var(--t-2);line-height:var(--i-texto);max-width:var(--medida)}
@media (max-width:760px){.dx-prov{padding:var(--e-4)}.dx-cifra b{font-size:var(--t-5)}}
/* en pantallas angostas cada fila de la tabla es un bloque: el indicador arriba y sus tres valores con su rótulo */
@media (max-width:560px){
  .dx-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .dx-tabla tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px var(--e-3);padding:var(--e-3) var(--e-3);border-bottom:1px solid var(--line)}
  .dx-tabla tr.elegida{background:var(--celeste-suave)}
  .dx-tabla td{display:block;padding:0;border:0;background:none!important}
  .dx-tabla td:first-child{grid-column:1/-1;margin-bottom:var(--e-1);font-weight:600}
  .dx-tabla td.n{text-align:left}
  .dx-tabla td.n::before{content:attr(data-l);display:block;font:400 var(--t-1)/1.4 var(--mono);color:var(--muted)}
}
.cx-tiempo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3);margin-top:var(--e-3);font-family:var(--mono);font-size:12px;color:var(--muted)}
.cx-tiempo input{flex:1 1 120px;min-width:0;accent-color:var(--azul)}
.cx-tiempo b{min-width:3em;font-size:var(--t-3);color:var(--azul)}
.cx-stats{font-family:var(--mono);font-size:12.5px;border:1px solid var(--azul);border-radius:var(--r-interno);overflow:hidden}
.cx-stats div{display:flex;justify-content:space-between;gap:10px;padding:9px var(--e-3);border-top:1px dotted var(--azul)}
.cx-stats div:first-child{border-top:0}
.cx-stats span{color:var(--muted)}
.cx-stats b{font-weight:600;color:var(--azul);font-variant-numeric:tabular-nums}
.cx-stats .aclara{display:block;font-size:var(--t-1);line-height:1.4;color:var(--muted)}
.cx-eje-tit{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.03em;fill:var(--muted)}
.cx-lab{font-size:var(--t-1);fill:var(--muted);pointer-events:none}
.cx-lab.elegida{font-size:12px;font-weight:700;fill:var(--ink)}
.cx-lab.fuera{fill:var(--faint-texto)}
.cx-punto{cursor:pointer;outline:none}
.cx-punto:focus-visible circle{stroke:var(--sol);stroke-width:3}
.cx-leyenda{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-4);margin:6px 0 0;font-family:var(--mono);font-size:var(--t-1);color:var(--muted)}
.cx-leyenda i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:-1px}
.cx-lectura{max-width:46em;margin:var(--e-4) 0 0;color:var(--ink)}
.cx-residuos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-6);margin:var(--e-4) 0 0}
.cx-residuos h3{margin:0 0 6px;font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.cx-residuos ol{margin:0;padding-left:20px;font-size:var(--t-3);color:var(--muted)}
.cx-residuos b{margin-right:6px;font-weight:500;color:var(--ink)}
.cx-detalle{margin-top:var(--e-4)}
.cx-detalle summary{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--azul);cursor:pointer}
.cx-matriz{overflow-x:auto;margin-top:var(--e-4)}
.cx-celda{cursor:pointer;outline:none}
.cx-celda:focus-visible rect{stroke:var(--sol);stroke-width:2}
.cx-r{font-family:var(--mono);font-size:10.5px;pointer-events:none;opacity:.8}
.cx-r.sig{font-weight:700;opacity:1}
.cx-mlab{font-size:11.5px}
.cm-xs{margin:0;padding:var(--e-3) var(--e-4);border:1px solid var(--line);border-radius:var(--r-interno)}
.cm-xs div{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px var(--e-4);margin-top:6px;font-size:var(--t-3);color:var(--ink)}
.cm-xs label{display:flex;align-items:center;gap:var(--e-2);cursor:pointer}
.cm-xs label:has(input:disabled){opacity:.4;cursor:default}
.cm-aviso{min-height:1.2em;margin:6px 0 0;font-size:var(--t-2);color:var(--rojo)}
@media (max-width:760px){.cx-cuerpo{grid-template-columns:1fr}}
@media (max-width:560px){.cx-residuos{grid-template-columns:1fr}}

/* ---------- política ---------- */
.pol-ley{display:flex;flex-wrap:wrap;gap:6px var(--e-4);margin:var(--e-4) 0 0;font-size:var(--t-2);line-height:1.35}
.pol-ley span{display:inline-flex;align-items:center;gap:6px}
.pol-ley i{display:inline-block;flex:none;width:12px;height:12px;border-radius:3px}
.pol-ley b{font-weight:600}
.pol-ley small{font-size:var(--t-2);color:var(--muted)}
/* legisladores de cada provincia */
.lg-sels{display:flex;flex-wrap:wrap;gap:0 var(--e-6)}
.lg-sels .selector-ficha{flex:1 1 220px}
.lg-lista{display:grid;grid-template-columns:1fr 2fr;gap:var(--e-2) var(--e-7);margin-top:var(--e-4)}
.lg-lista h3{margin:0 0 6px;font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lg-lista ul{list-style:none;margin:0;padding:0;columns:2 220px;column-gap:var(--e-6)}
.lg-lista li{display:grid;grid-template-columns:10px 1fr;gap:2px var(--e-2);padding:6px 0;border-top:1px dotted var(--line);font-size:var(--t-3);line-height:1.3;break-inside:avoid}
.lg-lista li i{grid-row:1/3;width:10px;height:10px;margin-top:var(--e-1)}
.lg-lista li small{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.03em;color:var(--muted)}
.lg-lista .senado ul{columns:1}
/* hemiciclos de la lista de legisladores (etapa 28): Diputados y el Senado lado a lado, arriba de la lista, cada uno con su leyenda */
/* las leyendas van en su propia fila, así los dos semicírculos apoyan en la misma línea aunque una leyenda sea más larga */
.lg-lista .lg-hemis,.lab-hemi .lg-hemis{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;grid-template-areas:"f0 f1" "l0 l1" "pie pie";align-items:end;
  gap:var(--e-3) var(--e-7);margin-bottom:var(--e-4)}
.hemi{margin:0}
/* el nombre de cada cámara en el Laboratorio conserva el tamaño y los márgenes que tenía como h4 (pasó a h3 el 25 de octubre de 2026) */
.lab-hemi .hemi h3{margin:1.33em 0;font-size:1em}
.hemi-svg svg{display:block;width:100%;height:auto}
.lg-hemis .pol-ley{align-self:start;margin:0}
.ha-f0{grid-area:f0}.ha-f1{grid-area:f1}.ha-l0{grid-area:l0}.ha-l1{grid-area:l1}
.hemi-pie{grid-area:pie;margin:var(--e-2) 0 0;font-size:var(--t-2);line-height:1.4;color:var(--muted)}
@media (max-width:760px){.lg-lista{grid-template-columns:1fr}
  .lg-lista .lg-hemis,.lab-hemi .lg-hemis{grid-template-columns:1fr;grid-template-areas:"f0" "l0" "f1" "l1" "pie"}.ha-f1{margin-top:var(--e-4)}}
/* tabla de leyes clave por espacio */
.vt-matriz{overflow-x:auto;min-height:0;margin-top:var(--e-6)}
.vt-matriz table{width:100%;min-width:600px;border-collapse:separate;border-spacing:2px}
.vt-matriz th{padding:0 2px 6px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;vertical-align:bottom}
.vt-matriz th:first-child{position:sticky;left:0;z-index:1;text-align:left;background:var(--bg)}
.vt-matriz td{height:30px;min-width:44px;text-align:center;font-size:12.5px;font-variant-numeric:tabular-nums;border-radius:4px}
.vt-matriz td.ley{position:sticky;left:0;z-index:1;min-width:0;padding:0 10px 0 0;text-align:left;font-size:var(--t-2);line-height:1.2;background:var(--bg)}
.vt-matriz td.ley small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.vt-matriz td.sin{font-size:11.5px;color:var(--faint-texto)}
.vt-matriz tfoot td{padding-top:6px;border-top:1px dotted var(--azul)}
/* el nombre de cada espacio abre su perfil: se lee como enlace */
.vt-matriz th .esp-btn{padding:var(--e-1) 2px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--azul);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:1.5px;text-underline-offset:3px}
.pol-ley :is(.esp-btn,.co-btn){display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:-4px -8px;padding:var(--e-1) var(--e-2);font:inherit;color:inherit;text-align:left;
  background:none;border:1px solid transparent;border-radius:var(--r-control);cursor:pointer;transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
/* la leyenda de la Corte resalta un grupo: el elegido queda marcado como presionado */
.pol-ley .co-btn[aria-pressed="true"]{background:var(--superficie-2);border-color:var(--borde)}
@media (hover:hover) and (pointer:fine){
  .vt-matriz th .esp-btn:hover{text-decoration-color:var(--azul)}
  .pol-ley :is(.esp-btn,.co-btn):hover{background:var(--superficie);border-color:var(--borde)}
}
/* perfil de un espacio político (etapa 9): un cuadro encima de la página, con el radio y la sombra de los paneles */
.esp-dialogo{width:min(720px,calc(100% - 32px));max-height:min(86vh,920px);padding:0;color:var(--ink);background:#fff;border:1px solid var(--borde);
  border-radius:var(--r-panel);box-shadow:var(--sombra-panel);overflow:auto;overscroll-behavior:contain}
.esp-dialogo::backdrop{background:rgba(24,33,43,.38)}
.esp-cab{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--e-3);padding:var(--e-4) var(--e-6);background:#fff;border-bottom:1px solid var(--line)}
.esp-cab>i{flex:none;width:18px;height:18px;border-radius:5px}
.esp-cab h3{margin:2px 0 0;font-size:var(--t-6);line-height:var(--i-titulo);font-weight:600}
.esp-cab .esp-cerrar{margin-left:auto}
.esp-eb{margin:0;font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.esp-cuerpo{padding:var(--e-6) var(--e-6) var(--e-6)}
.esp-res{max-width:var(--medida);margin:0 0 var(--e-6);font-size:var(--t-4);line-height:var(--i-texto)}
.esp-plat{padding:var(--e-4);background:var(--superficie);border-radius:var(--r-interno)}
.esp-plat p:last-child{margin:var(--e-1) 0 0;font-size:var(--t-3);line-height:var(--i-chico)}
.esp-plat small{color:var(--muted)}
.esp-cuerpo h4.esp-eb{margin:var(--e-6) 0 0}
.esp-leyes{margin:0;padding:0;list-style:none}
.esp-ley{padding:var(--e-4) 0;border-bottom:1px solid var(--line)}
.esp-ley>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e-3)}
.esp-ley b{font-size:var(--t-4);line-height:var(--i-tarjeta);font-weight:600}
.esp-ley>div small{flex:none;font:500 var(--t-1)/1.4 var(--mono);color:var(--muted)}
.esp-ley>p{max-width:var(--medida);margin:var(--e-1) 0 var(--e-2);font-size:var(--t-3);line-height:var(--i-chico);color:var(--muted)}
.esp-votos{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-6);margin:0 0 var(--e-2);padding:0;list-style:none;font-size:var(--t-2)}
.esp-votos li{display:inline-flex;align-items:center;gap:var(--e-2)}
.esp-votos span{font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.esp-votos em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:600}
.esp-votos em::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--pv)}
.esp-votos em.sin{font-weight:400;color:var(--faint-texto)}
.esp-votos em.sin::before{display:none}
.esp-votos small{color:var(--muted)}
.esp-ver{font-size:var(--t-2)}
.esp-cuerpo>.nota{margin:var(--e-6) 0 0}
@media (max-width:760px){
  .esp-dialogo{width:calc(100% - 16px);max-height:92vh}
  .esp-cab{padding:var(--e-3) var(--e-4)}
  .esp-cuerpo{padding:var(--e-4)}
}
/* comparación con la OCDE con un dato de más de tres años: el botón lleva una marca y la nota un aviso */
.ocde-conm .boton.viejo::after{content:"";display:inline-block;width:12px;height:12px;margin-left:6px;vertical-align:-2px;background:var(--sol-fuerte);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 4.6V8l2.4 1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 4.6V8l2.4 1.6'/%3E%3C/svg%3E") center/contain no-repeat}
.ocde-aviso{color:var(--sol-borde);font-weight:600}
/* quiebre de serie marcado arriba del gráfico (escolarización, SUBE) */
.aviso-serie{margin:var(--e-3) 0 0;padding:2px 0 2px var(--e-3);border-left:3px solid var(--sol-fuerte);font-size:var(--t-2);line-height:var(--i-chico);color:var(--muted)}
.vt-matriz td.plat a{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.06em;color:var(--celeste-fuerte)}
.vt-matriz tr[data-k]{cursor:pointer}
.vt-matriz .vt-ley{display:block;padding:0;font:inherit;line-height:inherit;text-align:left;color:inherit;background:none;border:0;cursor:pointer}
.vt-matriz tr[data-k]:hover .vt-ley,.vt-matriz .vt-ley:focus-visible{text-decoration:underline}
.vt-matriz .vt-ley:focus-visible{outline-offset:1px}
.vt-matriz tr.elegida td.ley{font-weight:600}
@media (max-width:760px){
  .vt-matriz table{min-width:520px}
  .vt-matriz td{min-width:36px;font-size:11.5px}
  .vt-matriz td.ley{max-width:118px;padding-right:6px;font-size:12px}
  .vt-matriz th{font-size:9.5px}
}
/* presidentes */
.pr-lista{list-style:none;margin:var(--e-4) 0 0;padding:0;columns:2 280px;column-gap:var(--e-7)}
.pr-lista li{display:grid;grid-template-columns:10px 24px 1fr;gap:1px var(--e-2);padding:7px 0;border-top:1px dotted var(--line);font-size:var(--t-3);line-height:1.3;break-inside:avoid}
.pr-lista li i{grid-row:1/3;width:10px;height:10px;margin-top:var(--e-1)}
.pr-lista li .bandera{grid-row:1/3;margin-top:1px}
.pr-lista li span,.pr-lista li small{grid-column:3}
/* gabinetes por gobierno: borde de la bandera dentro del gráfico, e ícono neutro para la fila que reúne a varios presidentes */
.bandera-borde{fill:none;stroke:rgba(24,33,43,.2);stroke-width:1}
.bandera-grupo{fill:var(--line);stroke:rgba(24,33,43,.3);stroke-width:1}
.bandera-grupo-n{font:600 10px var(--mono);fill:var(--muted)}
.pr-lista li small{font-size:var(--t-2);color:var(--muted)}

/* ---------- artículos: una página por cruce ---------- */
.notas{padding-top:var(--e-2)}
/* la nota llega vacía y la arma datina.js: mientras tanto ocupa la pantalla, así "Seguí explorando" y el pie no se ven arriba un instante
   y después saltan (la página se movía 0,52 en la primera carga, revisión de la línea de base del 11 de octubre de 2026) */
.js article.nota:empty{min-height:100vh}
.nota{max-width:740px}
.notas>.migas{margin-top:var(--e-7)}
.notas>.pasos{max-width:740px}
.nota-cab{display:grid;grid-template-columns:76px 1fr;gap:var(--e-6);align-items:center;margin:var(--e-6) 0 var(--e-6)}
.nota-ico{display:grid;place-items:center;width:76px;height:76px;background:var(--superficie-2);color:var(--azul);border-radius:var(--r-icono)}
.nota-ico .iso{width:66px;height:66px;--trazo:1.5px}
.nota-meta{margin:0 0 6px!important;font-size:var(--t-2)!important;color:var(--muted)}
.nota-tit{margin:0;font-size:var(--t-9);line-height:1.04;font-weight:500;color:var(--azul);font-variation-settings:"wdth" 55,"opsz" 144;font-family:var(--f-c55)}
.nota p{margin:0 0 var(--e-4);line-height:1.6}
.nota .nota-bajada{font-size:var(--t-5);line-height:1.5}
.nota mark{padding:0 .2em;font-weight:600;color:var(--ink);background:var(--sol-suave)}
.nota-graf{margin:var(--bloque) 0;padding:var(--e-6) var(--e-6) var(--e-6);background:#fff;border:1px solid var(--borde);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-tarjeta)}
.nota-graf h2{margin:0;font-size:var(--t-5);line-height:var(--i-tarjeta);font-weight:600;color:var(--azul)}
.nota-graf .grafico{margin-top:var(--e-6)}
.nota .nota-pie-graf{margin:var(--e-1) 0 0;font-size:var(--t-2);color:var(--muted)}
.nota-limites{margin:var(--capitulo) 0 0;padding-top:var(--e-6);border-top:3px solid var(--azul)}
.nota-limites h2{margin:0 0 var(--e-3);font-size:var(--t-7);line-height:1.05;font-weight:500;color:var(--azul);font-variation-settings:"wdth" 55,"opsz" 144;font-family:var(--f-c55)}
.nota-limites ul{margin:0}
.nota-limites li{line-height:1.5}
.nota-fuentes{margin-top:var(--e-7);padding-top:var(--e-4);border-top:1px dotted var(--azul)}
.nota .nota-fuentes p{font-size:var(--t-3);color:var(--muted)}
.nota-fuentes .acciones{margin-left:0}
@media (max-width:760px){
  .nota-cab{grid-template-columns:56px 1fr;gap:var(--e-3)}
  .nota-ico{width:56px;height:56px}
  .nota-ico .iso{width:48px;height:48px}
  .nota-graf{margin:var(--e-6) -8px;padding:var(--e-4) 14px var(--e-3)}
}

/* ---------- pie de página: a todo el ancho, alineado con la barra ---------- */
.pie-sitio{margin-top:var(--ritmo);padding:var(--e-8) 0 var(--e-8);background:#fff;border-top:3px solid var(--azul);font-size:var(--t-3);line-height:1.5;color:var(--muted)}
.pie-sitio .envoltura{max-width:var(--ancho-max);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"marca datos" "mapa mapa";gap:var(--e-8)}
.pie-marca{grid-area:marca}.pie-mapa{grid-area:mapa}.pie-datos{grid-area:datos}
.pie-sitio .marca{display:inline-block;padding-top:var(--e-3);font-size:46px;line-height:1;font-weight:500;letter-spacing:.01em;text-transform:uppercase;
  color:var(--azul);text-decoration:none;font-variation-settings:"wdth" 25,"opsz" 144}
.pie-lema,.pie-sitio h2{margin:var(--e-2) 0 var(--e-3);font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
/* más aire entre la marca, el lema y el texto (octubre de 2026) */
.pie-marca .pie-lema{margin:var(--e-4) 0 var(--e-6)}
.pie-marca p:last-child{line-height:1.6}
.pie-sitio h2{margin-top:0}
.pie-sitio p{max-width:30em;margin:0 0 var(--e-3)}
.pie-mapa{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--e-6)}
.pie-sitio ul{margin:0 0 var(--e-6);padding:0;list-style:none}
.pie-sitio li{margin:0 0 var(--e-2);break-inside:avoid}
.pie-mapa a{color:var(--azul);text-decoration:none}
.pie-mapa a[aria-current="true"]{color:var(--ink);font-weight:600}
@media (hover:hover) and (pointer:fine){.pie-mapa a:hover{text-decoration:underline}}
@media (max-width:1080px){.pie-mapa{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.pie-sitio .envoltura{grid-template-columns:1fr;grid-template-areas:"marca" "mapa" "datos";gap:var(--e-7)}.pie-mapa{grid-template-columns:1fr 1fr}}

/* ---------- consultas con IA (25 de octubre de 2026, docs/ia/CONSULTAS.md): la página existe solo con "consulta_ia" en
   datos/manual/sitio.json. El formulario es el de Contacto y la respuesta va en una tarjeta como las fichas. El aviso de lo que está leyendo
   el modelo va en la letra de las etiquetas y lo leen los lectores de pantalla (role="status") ---------- */
.ia{display:grid;gap:var(--e-6);max-width:var(--medida);margin:var(--bloque) 0}
.ia-form{max-width:none}
/* el botón: "Preguntar" y "Detener" en el mismo lugar (el que no va, oculto también para los lectores de pantalla) */
.ia-lbl{display:inline-grid}
.ia-e{grid-area:1/1;visibility:hidden}
.ia-e.activa{visibility:visible}
.campo textarea::placeholder{color:var(--faint-texto);opacity:1}
/* el aviso existe siempre (vacío, sin lugar: el margen negativo compensa el espacio de la grilla), así los lectores de pantalla lo leen
   desde el primer mensaje */
.ia-estado{margin:0;font-size:var(--t-3);line-height:var(--i-chico);color:var(--muted)}
.ia-estado:empty{margin-top:calc(-1 * var(--e-6))}
.ia-respuesta{display:grid;gap:var(--e-3);padding:clamp(var(--e-4),2.2vw,28px);background:var(--bg);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);box-shadow:var(--sombra-tarjeta)}
.ia-respuesta[hidden],.ia-fuentes[hidden]{display:none}
.ia-tit{margin:0;font-size:var(--t-5);line-height:var(--i-tarjeta);font-weight:600;color:var(--azul);font-variation-settings:"wdth" 75,"opsz" 32;
  font-family:var(--f-c75)}
.ia-tit:focus{outline:none}
.ia-tit:focus-visible{outline:2px solid var(--celeste-fuerte);outline-offset:3px;border-radius:2px}
h3.ia-tit{font-size:var(--t-4)}
.ia-eco{margin:0;font-size:var(--t-3);line-height:var(--i-chico);color:var(--muted)}
.ia-eco>span:first-child{font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.ia-salida-p{margin:0}
.ia-salida-p:has([hidden]){display:none}
.ia-texto{min-height:1.55em}
.ia-texto p{margin:0 0 var(--e-3);font-size:var(--t-4);line-height:var(--i-texto);white-space:pre-line}
.ia-texto p:last-child{margin-bottom:0}
.ia-fuentes{display:grid;gap:var(--e-2);padding-top:var(--e-3);border-top:1px solid var(--line)}
.ia-fichas{display:grid;gap:var(--e-2);margin:0;padding:0;list-style:none;font-size:var(--t-3)}
.ia-tabla{font:var(--t-2)/1.4 var(--mono);color:var(--azul);overflow-wrap:anywhere}
.ia-aviso{max-width:none}

/* ---------- contacto y página no encontrada ---------- */
.form-contacto{display:grid;gap:var(--e-4);max-width:36em}
.campo{display:grid;gap:var(--e-1)}
.campo>span{font:500 var(--t-1)/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.campo small{font-family:var(--f);font-size:var(--t-2);letter-spacing:0;text-transform:none;color:var(--muted)}
.campo input,.campo textarea{width:100%;padding:var(--e-3) 14px;font:inherit;font-size:var(--t-4);color:var(--ink);background:#fff;border:1px solid var(--azul);border-radius:var(--r-control)}
.campo textarea{resize:vertical;min-height:140px}
.campo input:focus-visible,.campo textarea:focus-visible{outline:3px solid var(--sol);outline-offset:1px}
.form-nota{margin:0;font-size:var(--t-2);color:var(--muted)}
.form-contacto .boton{justify-self:start}
/* suscripción en el pie: el correo y el botón en una fila, que en el celular se apila */
.form-suscripcion{display:grid;gap:var(--e-2);max-width:30em}
.susc-fila{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.susc-fila input{flex:1 1 14em;min-width:0;padding:10px 14px;font:inherit;font-size:var(--t-4);color:var(--ink);background:#fff;border:1px solid var(--azul);border-radius:var(--r-control)}
.susc-fila input:focus-visible{outline:3px solid var(--sol);outline-offset:1px}
.susc-fila input::placeholder{color:var(--muted)}
.pie-sitio .form-suscripcion p{margin:0}
/* el botón de la suscripción (11 de octubre de 2026, pedido del autor, con ideas del botón "Brutalist" y del botón de uiarc.dev): el
   amarillo del sol con una sombra dura azul. Al pasar el mouse se hunde sobre su sombra (solo con mouse: en el celular no queda pegado) y al
   apretarlo se achica un poco. Los tres textos ("Avisarme", "Enviando" y "Anotado") ocupan la misma celda, así el botón tiene el ancho del
   más largo y no salta al cambiar: el nuevo aparece con un fundido corto. Con movimiento reducido, nada se mueve */
.susc-boton{--sb-fondo:var(--sol);--sb-tinta:var(--ink);--sb-borde:var(--azul-hondo);
  position:relative;flex:none;display:inline-grid;place-items:center;min-height:44px;padding:0 var(--e-6);
  font-family:var(--mono);font-size:var(--t-1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:var(--sb-tinta);background:var(--sb-fondo);border:1px solid var(--sb-borde);border-radius:var(--r-control);
  box-shadow:4px 4px 0 0 var(--sb-borde);cursor:pointer;
  transition:transform var(--dur-3) cubic-bezier(.22,1,.36,1),box-shadow var(--dur-3) cubic-bezier(.22,1,.36,1),background-color var(--dur-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.susc-boton:hover{transform:translate(4px,4px);box-shadow:0 0 0 0 var(--sb-borde)}}
.susc-boton:active{transform:translate(4px,4px) scale(.97);box-shadow:0 0 0 0 var(--sb-borde)}
.susc-boton:focus-visible{outline:2px solid var(--azul-hondo);outline-offset:6px}
.susc-boton[aria-busy="true"]{cursor:progress;transform:translate(4px,4px);box-shadow:0 0 0 0 var(--sb-borde)}
.susc-boton[data-estado="ok"]{--sb-fondo:var(--bg);cursor:default;transform:translate(4px,4px);box-shadow:0 0 0 0 var(--sb-borde)}
.susc-lbl{display:grid}
.susc-e{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);opacity:0;filter:blur(3px);visibility:hidden;
  transition:opacity var(--dur-1) var(--ease-out),filter var(--dur-1) var(--ease-out),visibility 0s linear var(--dur-1)}
.susc-e.activa{opacity:1;filter:none;visibility:visible;transition-delay:0s}
/* "Enviando" lleva una ruedita del color del texto, que gira mientras espera la respuesta */
.susc-e[data-e="envia"]::before{content:"";width:.9em;height:.9em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:susc-gira .7s linear infinite}
@keyframes susc-gira{to{transform:rotate(1turn)}}
/* el resultado del envío: el renglón está reservado, así no empuja lo de abajo cuando aparece */
.pie-sitio .form-suscripcion .susc-estado{min-height:1.5em;margin-top:var(--e-1);font-size:var(--t-2);color:var(--tinta-bajada)}
@media (prefers-reduced-motion:reduce){
  .susc-boton,.susc-e{transition:none}
  .susc-boton:is(:hover,:active,[aria-busy="true"],[data-estado="ok"]){transform:none}
  .susc-e{filter:none}
  .susc-e[data-e="envia"]::before{animation:none}
}
.oculto{display:none}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* "Saltar al contenido" (Fase 2, paso 6): fuera de la vista hasta que lo enfoca el teclado. Es el botón principal, arriba a la izquierda
   sobre la barra. El lugar al que salta y el título que recibe el foco no dibujan un recuadro alrededor */
.saltar{position:fixed;top:var(--e-2);left:var(--e-2);z-index:20;box-shadow:var(--sombra-panel)}
.saltar:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#contenido:focus,h1[tabindex="-1"]:focus{outline:0}
.form-gracias{max-width:34em;font-size:var(--t-5)}
.no-acciones{display:flex;flex-wrap:wrap;gap:var(--e-3);margin:var(--e-6) 0 0}
/* autores y licencias de las banderas, en Sobre nosotros */
.creditos ul{margin:0 0 var(--e-4);font-size:var(--t-2);line-height:var(--i-chico);columns:2 240px;column-gap:var(--e-7)}
.creditos li{margin:0 0 var(--e-2);break-inside:avoid}

/* ---------- transiciones entre páginas (View Transitions entre documentos) ----------
   La barra queda anclada (también resuelve el paso de azul a clara), la página que se va se funde en 200 ms
   y la nueva entra con un fundido y 12 px hacia arriba en 300 ms. El título de una sección o de un artículo viaja desde su tarjeta.
   Donde el navegador no tiene soporte, se navega como siempre. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:var(--dur-4);animation-timing-function:var(--ease-out)}
::view-transition-old(root){animation:vt-sale var(--dur-2) var(--ease-out) both}
::view-transition-new(root){animation:vt-entra var(--dur-4) var(--ease-out) both}
@keyframes vt-sale{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(12px)}}
@keyframes vt-funde{from{opacity:0}}
/* cambio de vista de un gráfico (botones OCDE, selectores): solo funde el gráfico, la página queda quieta */
html:active-view-transition-type(grafico)::view-transition-old(root),
html:active-view-transition-type(grafico)::view-transition-new(root){animation:none}
::view-transition-group(grafico){animation-duration:var(--dur-2)}
/* cambio de provincia (etapa 6): la página queda quieta y funden en 200 ms los gráficos, "En cifras" y lo demás que cambió */
html:active-view-transition-type(provincia)::view-transition-old(root),
html:active-view-transition-type(provincia)::view-transition-new(root){animation:none}
html:active-view-transition-type(provincia)::view-transition-group(*){animation-duration:var(--dur-2)}

/* ---------- preferencias del sistema ---------- */
/* Movimiento reducido: sin desplazamientos ni giros, pero se conservan los fundidos que ayudan a entender */
@media (prefers-reduced-motion:reduce){
  .sol *,.portada-texto>*,.gorro{animation:none!important}
  .listo .ficha{transform:none!important;transition:opacity var(--dur-3) var(--ease-out)!important}
  .conmutador::before,.boton,.tarjeta,.lupa-btn,.menu-btn,.mas-flecha,.chip-prov,.chip-borrar{transition:none!important}
  .boton:active,.tarjeta:active,.lupa-btn:active,.elige-btn:active{transform:none}
  .sol-ir{transition:none!important;transform:none!important}
  .buscador:not([hidden]){animation:none}
  .sobre[open]>.sobre-panel{animation:vt-funde var(--dur-2) var(--ease-out)}
  /* menús, cuadros y barra: solo fundidos */
  .menu-panel,.elige-panel,.tip{transform:none!important}
  .barra.compacta ~ .menu-panel{translate:none}
  .tarjeta .iso,.lupa-btn .ico,.chip-borrar .ico{transform:none!important}
  .barra,.barra-izq,.barra .temas,.barra-der,.barra .marca{transform:none!important}
  .mapa-fondo .provs path{transition:none}
  /* entre páginas: solo un fundido, nada viaja */
  ::view-transition-group(*){animation-duration:0s}
  ::view-transition-new(root){animation:vt-funde var(--dur-3) var(--ease-out) both}
}
/* sin desenfoque en el navegador, el menú vuelve a ser blanco: traslúcido sin desenfoque no se lee */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.menu-panel,.mapa-tarjeta{background:#fff}}
/* Transparencia reducida: la barra clara y los menús con fondo sólido */
@media (prefers-reduced-transparency:reduce){
  .barra.clara{background:var(--fondo);-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu-panel,.mapa-tarjeta{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Catálogo de datos (catalogo.html, 11 de octubre de 2026, propuesta aprobada por el autor): los filtros arriba y las tablas en una lista,
   una por fila, separadas por una línea. Las listas desplegables son las de las herramientas (.cx-campo) y los botones, los del pie de las fichas */
.cat-filtros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:var(--e-4) var(--e-3);margin:0 0 var(--e-6)}
@media (min-width:1080px){.cat-filtros{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-4)}}
.cat-busca{display:flex;flex-direction:column;gap:6px;grid-column:1/-1;max-width:640px}
.cat-busca span{font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cat-busca input{width:100%;min-height:44px;padding:0 var(--e-3);font:inherit;font-size:var(--t-3);color:var(--ink);background:var(--bg);border:1px solid var(--azul);border-radius:var(--r-control)}
.cat-busca input::placeholder{color:var(--faint-texto);opacity:1}
.cat-busca input:focus-visible{outline:2px solid var(--sol);outline-offset:2px}
.cat-resumen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-4);padding:0 0 var(--e-3);border-bottom:1px solid var(--line)}
.cat-cuenta{margin:0;font-size:var(--t-3);color:var(--muted)}
.cat-cuenta b{font-weight:600;color:var(--ink)}
.cat-resumen .enlace{margin-left:auto}
.cat-vacio{margin:var(--e-6) 0;color:var(--muted)}
.cat-lista{margin:0;padding:0;list-style:none}
.cat-item{padding:var(--e-6) 0;border-bottom:1px solid var(--line)}
.cat-item[hidden]{display:none}
.cat-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e-1) var(--e-3);margin:0 0 var(--e-2)}
.cat-cab .etiqueta{margin:0}
.cat-archivo{font-family:var(--mono);font-size:var(--t-1);color:var(--muted);overflow-wrap:anywhere}
.cat-tit{max-width:32em;margin:0 0 var(--e-2);font-family:var(--f-c75);font-size:var(--t-6);line-height:1.15;font-weight:600;letter-spacing:-.005em;
  font-variation-settings:"wdth" 75,"opsz" 32;color:var(--azul)}
.cat-tit a{color:inherit;text-decoration:none}
.cat-tit a:hover{text-decoration:underline;text-underline-offset:3px}
.cat-sub{max-width:46em;margin:0 0 var(--e-4);font-family:var(--f-bajada);font-size:var(--t-4);line-height:1.5;font-weight:340;
  font-variation-settings:"opsz" 28;letter-spacing:-.003em;color:var(--tinta-bajada)}
/* en el celular, de a dos con la fuente a todo el ancho. Desde 768 píxeles, en una fila con la fuente más ancha */
.cat-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3) var(--e-4);max-width:72em;margin:0 0 var(--e-4)}
.cat-datos>div{min-width:0}
.cat-datos>div:first-child{grid-column:1/-1}
@media (min-width:768px){
  .cat-datos{display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-6)}
  .cat-datos>div{flex:1 1 180px}
  .cat-datos>div:first-child{flex:2 1 320px}
}
.cat-datos dt{font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cat-datos dd{margin:2px 0 0;font-size:var(--t-3);line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.cat-item .acciones{margin-left:0}
.cat-previa{margin:var(--e-4) 0 0}
.cat-previa h3{margin:var(--e-6) 0 var(--e-2);font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.cat-previa .tabla-desliza{max-height:360px;margin:var(--e-2) 0 0}
.cat-previa caption{padding:var(--e-2) var(--e-3);text-align:left;font-size:var(--t-2);color:var(--muted)}
.cat-dic th[scope="row"]{position:static;padding:var(--e-2) var(--e-3);font-weight:400;color:var(--ink);background:none;border-bottom:1px solid #F0F3F7}
.cat-dic code{font-family:var(--mono);font-size:var(--t-2)}
.cat-otros,.cat-nota{max-width:46em;margin:var(--e-3) 0 0;font-size:var(--t-3);line-height:1.5;color:var(--muted)}
.cat-licencia{margin:var(--e-6) 0 0;font-size:var(--t-2);color:var(--muted)}
/* La historia de cada jurisdicción en Tu provincia (11 de octubre de 2026, pedido del autor): una tarjeta como las fichas, con el texto a la
   izquierda y, al costado, los datos básicos (capital, desde cuándo es provincia y habitantes) y el dato curioso. En el celular, una
   columna con los datos primero. Las fuentes, plegadas al final */
.prov-historia{margin:var(--bloque) 0}
.ph{padding:clamp(var(--e-4),2.2vw,28px);background:var(--bg);border:1px solid var(--borde);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-tarjeta)}
.ph[hidden]{display:none}
.ph-tit{margin:0 0 var(--e-4);font-family:var(--f-c75);font-size:var(--t-7);line-height:var(--i-tarjeta);font-weight:600;letter-spacing:-.005em;
  font-variation-settings:"wdth" 75,"opsz" 32;color:var(--azul)}
.ph-cuerpo{display:grid;gap:var(--e-6)}
@media (min-width:1080px){.ph-cuerpo{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--e-8);align-items:start}}
@media (max-width:1079px){.ph-lado{order:-1}}
.ph-lado{display:grid;gap:var(--e-4);align-content:start}
.ph-sub{margin:var(--e-6) 0 var(--e-1);font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.ph-texto>.ph-sub:first-child,.ph-curiosidad>.ph-sub{margin-top:0}
.ph-texto p{margin:0;font-family:var(--f-bajada);font-size:var(--t-4);line-height:1.55;font-weight:340;font-variation-settings:"opsz" 28;
  letter-spacing:-.003em;color:var(--tinta-bajada);text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3}
.ph-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--e-4);margin:0;padding:var(--e-4);background:var(--superficie);border-radius:var(--r-panel)}
.ph-datos dt{font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ph-datos dd{margin:2px 0 0;font-size:var(--t-4);line-height:1.35;font-weight:600;color:var(--ink)}
.ph-datos small{display:block;margin-top:2px;font-size:var(--t-1);font-weight:400;color:var(--muted)}
.ph-curiosidad{padding:var(--e-4);background:var(--sol-suave);border-radius:var(--r-panel)}
.ph-curiosidad p:not(.ph-sub){margin:0;font-size:var(--t-3);line-height:1.5;color:var(--ink)}
.ph-fuentes{margin:var(--e-6) 0 0;padding-top:var(--e-3);border-top:1px dotted var(--azul);font-size:var(--t-2);color:var(--muted)}
.ph-fuentes summary{cursor:pointer;font-family:var(--mono);font-size:var(--t-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.ph-fuentes summary:focus-visible{outline:2px solid var(--sol);outline-offset:2px}
.ph-fuentes p{max-width:60em;margin:var(--e-3) 0}
.ph-fuentes ul{margin:0;padding:0;list-style:none;columns:2 300px;column-gap:var(--e-6)}
.ph-fuentes li{break-inside:avoid;margin:0 0 var(--e-2)}
.ph-dato{margin-right:var(--e-1);font-family:var(--mono);font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}