/* ═══════════════════════════════════════════════════════════════════
   Presupuesto porteño — estilos
   Identidad: docs/direccion-de-arte.md v2. Sección de áreas:
   docs/diseno-areas.md. Recorrido y movimiento: docs/scroll-v4.md (con sus
   correcciones de design). Orden de página: docs/arquitectura-v3.md.
   Los componentes usan sólo tokens; los gráficos leen los --g-*, que se
   redefinen por superficie (las superficies oscuras tienen los suyos).
   Orden: fuentes → tokens → base → componentes en orden de página.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ FUENTES (autohospedadas; subset latin, ejes recortados con fontTools) ═══ */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../assets/fonts/source-serif-4-var.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ═══ TOKENS ═══ */
:root {
  /* Superficies (estetica-v7: todo el sitio sobre la noche del mapa) */
  --c-noche: #111417;
  --c-noche-2: #1D2023;
  --c-vidrio: rgb(255 255 255 / .05);
  --c-vidrio-hover: rgb(255 255 255 / .08);
  --c-vidrio-borde: rgb(255 255 255 / .10);
  --c-vidrio-borde-hover: rgb(127 220 249 / .35);
  --c-celeste-claro: #9FE3FA;
  --c-celeste-luz: #7FDCF9;
  --c-tinta-sobre-luz: #1E1E1E;
  --halo: rgb(0 185 242 / .14);
  --filete-luz: linear-gradient(90deg, rgb(0 185 242 / .6), rgb(0 185 242 / 0) 70%);
  --c-oscuro: #1E1E1E;
  --c-oscuro-2: #2A2E33;
  --c-blanco: #FFFFFF;
  --c-panel: #EDF1F4;
  --c-borde: #D5DCE2;
  /* Texto y marca */
  --c-tinta: #1E1E1E;
  --c-texto-2: #5C6B78;
  --c-sobre-oscuro: #FFFFFF;
  --c-sobre-oscuro-2: #A9B5BF;
  --c-celeste: #00B9F2;
  --c-celeste-hover: #33C7F5;
  --c-celeste-activo: #00A3D6;
  --c-celeste-tinta: #00709C;
  /* Datos */
  --d-suba: #24508F;
  --d-destacada: #00709C;
  --d-fondo: #B4C0CA;
  /* Baja / recorte sobre superficie oscura y texto sobre el mapa (estetica-v7 §2).
     El amarillo nunca va sobre claro ni sobre celeste, ni como fondo o link. */
  --dato-baja-oscuro: #F5CE4A;
  --d-suba-osc: #9DB8E8;
  --d-eje: #8A949C;

  /* Gráficos: valores base en :root; el sitio, todo oscuro, los redefine en body. */
  --g-fondo: var(--c-blanco);
  --g-tinta: var(--c-tinta);
  --g-texto-2: var(--c-texto-2);
  --g-eje: var(--d-eje);
  --g-grilla: var(--c-borde);
  --g-baja: var(--dato-baja-oscuro);
  --g-suba: var(--d-suba);
  --g-destacada: var(--d-destacada);
  --g-contexto: var(--d-fondo);
  --g-marca: var(--c-celeste);
  --g-marca-tinta: var(--c-celeste-tinta);

  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-texto: 'Source Serif 4', Georgia, serif;

  --fs-0: .8125rem;
  --fs-ui: .9375rem;
  --fs-1: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-2: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --fs-3: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --fs-4: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --fs-5: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --fs-6: clamp(4.5rem, 2.5rem + 9vw, 10rem);
  --lh-display: .92;
  --lh-titulo: 1.12;        /* sólo display: --fs-4 en adelante */
  --lh-titulo-chico: 1.3;   /* títulos de --fs-2 y --fs-3 */
  --lh-texto: 1.5;
  --lh-ui: 1.3;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;  --s-8: 4rem;   --s-9: 6rem;

  --icono-s: 20px;
  --icono-m: 24px;
  --icono-l: 40px;

  --r: 4px;
  --r-vidrio: 10px;
  --fs-area: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --borde: 1px solid var(--c-borde);
  --toque: 44px;
  --margen: 16px;
  --ancho-contenido: 1200px;
  --ancho-texto: 640px;
  /* El alto real lo mide js/navegacion.js; éste es el valor antes del JS. */
  --alto-cabecera: 56px;

  --ease-entrada: cubic-bezier(.22, .61, .36, 1);
  --ease-trazo: cubic-bezier(.45, .05, .55, .95);
}

/* ═══ CURSORES PROPIOS (pedido del cliente, 2026-10-03) ═══
   Sólo CSS, cero JS: reemplazan al cursor con anillo que tapaba contenido.
   Flecha fina blanca con canto tinta de 1 px y punto celeste en la punta
   (20×20, hotspot en la punta); sobre lo que se puede tocar, la mano nativa
   del sistema (Juan 2026-10-05: la flecha con aro parecía el cursor de
   "cargando"). Sólo con puntero fino; en touch quedan los
   nativos. Los campos de texto conservan "text". Si el navegador no carga
   la imagen, cae al nativo (auto / pointer). */
:root {
  --cursor-flecha: auto;
  --cursor-mano: pointer;
}
@media (pointer: fine) {
  :root {
    --cursor-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M2.5 2v13l3.3-3.1 2.3 5.1 2.1-.9-2.2-5h4.6z' fill='%23fff' stroke='%23111417' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='2.6' cy='2.6' r='1.7' fill='%2300B9F2' stroke='%23111417' stroke-width='.6'/%3E%3C/svg%3E") 2 2, auto;
  }
}
html { cursor: var(--cursor-flecha); }
:is(a[href], button:not(:disabled), summary, select, label[for], [role="tab"], [role="radio"], [role="option"]:not([aria-disabled="true"]),
  input:is([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="reset"], [type="button"])) { cursor: var(--cursor-mano); }
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="reset"]):not([type="button"]), textarea, [contenteditable="true"]) { cursor: text; }
@media (min-width: 768px) { :root { --margen: 24px; --icono-l: 48px; } }

/* ═══ BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  /* Semántica del sitio sobre noche: el texto principal es blanco y los
     grises, bordes y gráficos toman su versión oscura. */
  --c-tinta: #FFFFFF;
  --c-texto-2: var(--c-sobre-oscuro-2);
  --c-borde: var(--c-vidrio-borde);
  --c-celeste-tinta: var(--c-celeste);
  --g-fondo: var(--c-noche);
  --g-tinta: #FFFFFF;
  --g-texto-2: var(--c-sobre-oscuro-2);
  --g-eje: var(--c-sobre-oscuro-2);
  --g-grilla: var(--c-vidrio-borde);
  --g-baja: var(--dato-baja-oscuro);
  --g-suba: var(--d-suba-osc);
  --g-destacada: var(--c-celeste);
  --g-contexto: var(--c-sobre-oscuro-2);
  --g-marca: var(--c-celeste);
  --g-marca-tinta: var(--c-celeste);
  margin: 0;
  background: var(--c-noche);
  color: var(--c-tinta);
  font-family: var(--font-texto);
  font-size: var(--fs-1);
  line-height: var(--lh-texto);
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--c-celeste-tinta); text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--c-celeste-tinta); outline-offset: 2px; }
/* Foco por script (títulos con tabindex="-1" al abrir un área o la lectura):
   no es un control, no lleva anillo. El foco visible queda para lo interactivo. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
[id], .capitulo { scroll-margin-top: calc(var(--alto-cabecera) + var(--s-4)); }
[hidden] { display: none !important; }
/* Texto sólo para lectores de pantalla (ej. "se abre en una pestaña nueva"). */
/* Enlace para saltar al contenido: invisible hasta que recibe foco con el teclado. */
.saltar { position: fixed; top: var(--s-2); left: var(--s-2); z-index: 100; padding: var(--s-3) var(--s-4); background: var(--c-blanco); color: var(--c-tinta-sobre-luz); font-weight: 700; transform: translateY(-200%); }
.saltar:not(:focus) { opacity: 0; pointer-events: none; }
.saltar:focus { transform: none; }
main:focus { outline: none; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Los halos se extienden con -100vmax hasta los bordes de la pantalla: main
   los recorta ahí, así el documento nunca es más ancho que el viewport. */
main { overflow-x: clip; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { flex: none; width: var(--icono-m); height: var(--icono-m); }

.contenedor {
  max-width: calc(var(--ancho-contenido) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}
.texto { max-width: var(--ancho-texto); }
.texto > * + * { margin-top: var(--s-4); }

/* Archivo "datos": cifras tabulares. */
.nota, .grafico__medida, .grafico__fuente, .grafico__nota, .grafico__estado, .grafico__titulo,
.kicker, .sello, .boton, table, .novedad__meta, .cabecera,
.portada__antetitulo, .portada__sello, .pie, .cinta,
.fila-area, .area__incluye, .area-indicador, .indicador-extra, .dato-bloque,
.indicador-bloque, .paso, .lista__fuente, .lectura__atribucion {
  font-family: var(--font-display);
  font-stretch: 87%;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Display: Archivo condensada pesada. */
.portada__titulo, .franja__titulo,
.area__nombre, .area-principal__cifra, .area-indicador__cifra, .indicador-extra__cifra, .dato-bloque__cifra,
.indicador-bloque__cifra, .banda__titular, .lectura__titular,
.fila-area__cifra, .paso__cifra, .cinta__cifra {
  font-family: var(--font-display);
  font-stretch: 68%;
  font-weight: 850;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Kicker con línea (estetica-v7 §3): trazo celeste de 24×1 px y el texto. */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-stretch: 75%;
  font-weight: 600;
  font-size: var(--fs-0);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-sobre-oscuro-2);
}
.kicker::before { content: ''; flex: none; width: 24px; height: 1px; background: var(--c-celeste); }

/* Cifras protagonistas: color sólido (blanco neutras/suba, amarillo baja).
   La presencia la dan el tamaño y el peso, nunca degradé ni glow en texto. */

/* Vidrio: superficie sobre la noche (fichas, novedades, figuras, datos del bloque). */
.vidrio, .ficha, .novedad--destacada, .area-figura, .dato-bloque, .ayuda {
  background: var(--c-noche-2);
  border: 1px solid var(--c-vidrio-borde);
  border-radius: var(--r-vidrio);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
}
/* Sin backdrop-filter en las tarjetas (rendimiento medido por el developer 3:
   el blur de muchas superficies tiraba la GPU). Fondo rgba, sin desenfoque. El
   blur queda sólo en la leyenda (sobre el mapa), la cabecera y el mega-menú. */
.vidrio, .ficha, .novedad--destacada, .area-figura, .dato-bloque, .ayuda { background: var(--c-vidrio); }
.bajada { font-size: var(--fs-2); line-height: 1.4; }
.nota { font-size: var(--fs-0); color: var(--c-texto-2); line-height: 1.45; }
[data-variacion="neg"] { color: var(--dato-baja-oscuro); }
[data-variacion="pos"] { color: var(--d-suba-osc); }

/* ═══ BOTONES (sistema único; referencias de 21st.dev adaptadas a vanilla y v7) ═══
   - 48 px de alto (44 en mobile), Archivo 600 condensada, radio 4 px.
   - Links: texto + flecha (Lucide arrow-right; arrow-up-right si abren otra
     pestaña) que se corre 4 px en hover. Los botones que no navegan (filtros,
     "Ver más", reintentar) y "Volver" van sin flecha.
   - Primario: celeste con texto tinta; en hover entra desde la izquierda un
     barrido más oscuro (#00A3D6) en 220 ms (power2.out).
   - Secundario: borde blanco .35; en hover, borde celeste y fondo blanco .06.
   - Activo: escala .98. Reduced-motion: sólo cambia el color. */
.boton {
  --barrido: 0%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: 600 var(--fs-ui) / var(--lh-ui) var(--font-display);
  font-stretch: 87%;
  text-decoration: none;
  cursor: var(--cursor-mano);
  transition: background-size 220ms cubic-bezier(.215, .61, .355, 1), background-color 150ms var(--ease-entrada),
    border-color 150ms var(--ease-entrada), color 150ms var(--ease-entrada), transform 120ms var(--ease-entrada);
}
@media (max-width: 767px) { .boton { min-height: 44px; } }
.boton:focus-visible { outline: 3px solid var(--c-celeste); outline-offset: 2px; }
.boton:active { transform: scale(.98); }
/* Fila de acciones de una franja: al pie del contenido, alineada a su izquierda.
   En mobile cada botón ocupa el ancho (blanco táctil y lectura en columna). */
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
@media (max-width: 767px) { .acciones .boton { flex: 1 1 100%; } }
.boton:disabled { opacity: .45; cursor: var(--cursor-flecha); }
/* La flecha: máscara con el ícono de Lucide; toma el color del texto. */
a.boton:not([data-volver-inicio]):not([data-volver-areas])::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("../assets/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../assets/icons/arrow-right.svg") center / contain no-repeat;
  transition: transform 220ms cubic-bezier(.215, .61, .355, 1);
}
a.boton[target="_blank"]:not([data-volver-inicio]):not([data-volver-areas])::after {
  -webkit-mask-image: url("../assets/icons/arrow-up-right.svg");
  mask-image: url("../assets/icons/arrow-up-right.svg");
}
a.boton:hover::after { transform: translateX(4px); }
a.boton[target="_blank"]:hover::after { transform: translate(3px, -3px); }
.boton--primario {
  color: var(--c-tinta-sobre-luz);
  background: linear-gradient(#00A3D6, #00A3D6) left / 0% 100% no-repeat, var(--c-celeste);
}
.boton--primario:hover { background-size: 100% 100%, auto; }
.boton--secundario { background: transparent; color: var(--c-sobre-oscuro); border-color: rgb(255 255 255 / .35); }
.boton--secundario:hover { background: rgb(255 255 255 / .06); border-color: var(--c-celeste); }
.boton--fantasma { background: transparent; color: var(--c-celeste-tinta); padding-inline: var(--s-3); }
.boton--fantasma:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.boton__icono { width: var(--icono-s); height: var(--icono-s); }
@media (prefers-reduced-motion: reduce) {
  .boton, .boton::after { transition: background-color 150ms, border-color 150ms, color 150ms; }
  .boton:active, a.boton:hover::after, a.boton[target="_blank"]:hover::after { transform: none; }
  .boton--primario { background: var(--c-celeste); }
  .boton--primario:hover { background: #00A3D6; }
}

/* ═══ FRANJAS ═══ */
.franja { padding: var(--s-8) var(--margen); }
.franja > .contenedor { padding-inline: 0; max-width: var(--ancho-contenido); }
@media (min-width: 1200px) { .franja { padding-block: var(--s-9); } }
.franja__titulo { font-size: var(--fs-4); line-height: var(--lh-display); color: var(--c-sobre-oscuro); }
/* Halos (estetica-v7 §4): uno por sección, fijo, en esquinas alternadas. */
.franja--panel { background: radial-gradient(circle 60vw at 0% 0%, var(--halo), transparent 60%) no-repeat; }
/* En la vista de un área el halo lo lleva la cabecera del panel (uno por vista). */
.vista-area .franja--panel { background: none; }

/* Superficies oscuras: redefinen texto y gráficos ("sobre oscuro", v2 §2). */
.franja--oscura, .pie { color: var(--c-sobre-oscuro); }

/* ═══ ENCABEZADO FIJO + MENÚ ═══ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  color: var(--c-sobre-oscuro);
  /* Sólido por defecto (y sin JS): noche al 92% con blur y filete de vidrio
     (al 80% el texto que pasaba por detrás competía con el nombre: QA móvil). */
  background: rgb(17 20 23 / .92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--c-vidrio-borde);
  transition: background-color 200ms var(--ease-entrada), box-shadow 200ms var(--ease-entrada);
}
/* Sobre la portada: integrado al fondo oscuro del mapa. */
.cabecera--transparente { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.js.menu-abierto .cabecera { background: var(--c-noche); }
/* Con backdrop-filter, la cabecera pasa a ser el bloque contenedor de los
   hijos fijos: el menú (position: fixed) quedaba recortado a sus 64 px y sólo
   se veía "Inicio" (pasaba lejos de la portada, con la cabecera sólida). */
.js.menu-abierto .cabecera { -webkit-backdrop-filter: none; backdrop-filter: none; }
.cabecera :focus-visible { outline-color: var(--c-celeste); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; }
.cabecera__marca { display: flex; align-items: center; gap: var(--s-3); min-height: var(--toque); color: var(--c-sobre-oscuro); text-decoration: none; }
.cabecera__logo { width: 56px; height: 32px; flex: none; }

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--toque);
  min-width: var(--toque);
  padding: 0 var(--s-3);
  border: 1px solid var(--c-sobre-oscuro-2);
  border-radius: var(--r);
  background: transparent;
  color: var(--c-sobre-oscuro);
  font: 600 var(--fs-ui) / var(--lh-ui) var(--font-display);
  font-stretch: 87%;
  cursor: var(--cursor-mano);
}
/* Tres barras dibujadas con CSS; abiertas, una cruz. */
.menu-boton__barras, .menu-boton__barras::before, .menu-boton__barras::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 150ms var(--ease-entrada), background-color 150ms var(--ease-entrada);
}
.menu-boton__barras { position: relative; }
.menu-boton__barras::before, .menu-boton__barras::after { content: ''; position: absolute; left: 0; }
.menu-boton__barras::before { top: -6px; }
.menu-boton__barras::after { top: 6px; }
.menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after { transform: translateY(-6px) rotate(-45deg); }

.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--toque);
  padding: 0 var(--s-3);
  border: 0;
  background: none;
  color: var(--c-sobre-oscuro-2);
  font: 600 var(--fs-ui) / var(--lh-ui) var(--font-display);
  font-stretch: 87%;
  text-decoration: none;
  cursor: var(--cursor-mano);
}
.menu__enlace:hover { color: var(--c-sobre-oscuro); }
.menu__enlace[aria-current="true"] { color: var(--c-celeste); }
.menu__flecha { font-size: .8em; transition: transform 150ms var(--ease-entrada); }
.menu__desplegar[aria-expanded="true"] .menu__flecha { transform: rotate(180deg); }

.mega__lista { list-style: none; margin: 0; padding: 0; }
.mega__enlace {
  display: grid;
  grid-template-columns: var(--icono-s) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-3);
  row-gap: 2px;
  min-height: var(--toque);
  padding: var(--s-3);
  border-radius: var(--r);
  color: var(--c-sobre-oscuro);
  text-decoration: none;
  transition: background-color 150ms var(--ease-entrada);
}
.mega__icono { width: var(--icono-s); height: var(--icono-s); color: var(--c-sobre-oscuro-2); }
.mega__nombre { font: 600 var(--fs-ui) / var(--lh-ui) var(--font-display); font-stretch: 87%; }
.mega__cifra { grid-column: 2; font: 850 var(--fs-2) / 1.1 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; }
.mega__partida { grid-column: 2; font: 400 var(--fs-0) / 1.3 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.mega__enlace:hover { background: var(--c-vidrio-hover); }
.mega__enlace:hover .mega__icono, .mega__enlace[aria-current="true"] .mega__icono { color: var(--c-celeste); }

/* Sin JS: los links en una fila; el desplegable no existe. */
html:not(.js) .menu__lista { display: flex; flex-wrap: wrap; }
html:not(.js) .mega { display: none; }
html:not(.js) .cabecera__fila { flex-wrap: wrap; }

@media (max-width: 1023px) {
  .js .menu {
    position: fixed;
    inset: var(--alto-cabecera) 0 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-5) var(--margen) var(--s-8);
    background: var(--c-noche);
    color: var(--c-sobre-oscuro);
    /* Cerrado = display:none, no una transición (al redimensionar dejaba restos). */
    display: none;
  }
  .js.menu-abierto .menu { display: block; animation: entrar 180ms var(--ease-entrada); }
  .js .menu :focus-visible { outline-color: var(--c-celeste); }
  .js .menu__lista { display: grid; gap: var(--s-1); }
  .js .menu__enlace { color: var(--c-sobre-oscuro); font-size: var(--fs-2); padding-inline: 0; }
  .js .menu__enlace[aria-current="true"] { color: var(--c-celeste); }
  /* Áreas, plegable (Juan 2026-10-03): desplegadas, las 14 áreas empujaban
     el resto del menú fuera de la pantalla. Cerrado por defecto. */
  .js .menu__desplegar { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; border: 0; text-align: left; }
  .js .menu__desplegar[aria-expanded="true"] { color: var(--c-celeste); }
  .js .mega { display: none; padding: var(--s-2) 0 var(--s-3); border-block: 1px solid var(--c-oscuro-2); }
  .js .mega--abierto { display: block; }
  .js .mega__titulo { display: none; }
  .js .mega__titulo { font: 600 var(--fs-0) / 1.3 var(--font-display); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--c-sobre-oscuro-2); padding-block: var(--s-2); }
  /* Mobile: las 13 áreas en 2 columnas, con ícono y cifra. */
  .js .mega__lista--areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-2); }
  .js .mega__enlace[aria-current="true"] .mega__nombre { color: var(--c-celeste); }
}
@media (prefers-reduced-motion: reduce) {
  .js.menu-abierto .menu, .js .mega--abierto { animation: none; }
}
@media (min-width: 1024px) {
  .menu-boton { display: none; }
  /* El encabezado usa los mismos márgenes que la portada a ancho completo. */
  .cabecera > .contenedor { max-width: none; padding-inline: clamp(24px, 5vw, 96px); }
  .cabecera__fila { min-height: 64px; }
  .menu__lista { display: flex; align-items: center; gap: var(--s-1); }
  .menu__enlace { position: relative; height: 64px; }
  .menu__enlace { white-space: nowrap; }
  .menu__enlace::after { content: ''; position: absolute; inset: auto var(--s-3) 0; height: 3px; background: transparent; transition: background-color 150ms var(--ease-entrada); }
  .menu__enlace[aria-current="true"]::after { background: var(--c-celeste); }
  .mega__titulo { display: none; }
  /* Panel a todo el ancho bajo el encabezado (el encabezado sticky es su
     bloque contenedor): vidrio sobre la noche. */
  .js .mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--s-5) var(--margen) var(--s-6);
    background: rgb(17 20 23 / .94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-vidrio-borde);
    display: none;
  }
  .js .mega--abierto { display: block; animation: entrar 150ms var(--ease-entrada); }
  .mega__lista--areas {
    max-width: var(--ancho-contenido);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-2) var(--s-4);
  }
  .mega__enlace[aria-current="true"] { background: var(--c-vidrio-hover); }
  .mega__enlace[aria-current="true"] .mega__nombre { color: var(--c-celeste); }
}
@media (min-width: 1200px) { .mega__lista--areas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ═══ 1 · PORTADA (inicio-v6 §1): título, mapa de la Ciudad y leyenda ═══
   Mobile: título → mapa (60vh) → leyenda. Desktop: el mapa ocupa toda la
   franja detrás; título arriba a la izquierda y leyenda a la derecha.
   Si el mapa no carga queda el fondo oscuro liso (--c-mapa). */
.portada {
  --c-mapa: var(--c-noche);
  position: relative;
  isolation: isolate;
  /* Sube debajo del encabezado transparente: no queda ninguna barra arriba. */
  margin-top: calc(-1 * var(--alto-cabecera));
  padding-top: calc(var(--alto-cabecera) + var(--s-7));
  padding-bottom: var(--s-7);
  background: var(--c-mapa);
}
.portada__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.portada__texto { max-width: 34rem; }
.portada__texto > * + * { margin-top: var(--s-4); }
/* "Ciudad Autónoma de Buenos Aires": el renglón protagonista (no es Nación). */
.portada__antetitulo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-2);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-celeste);
}
.portada__antetitulo::before { content: ''; flex: none; width: 32px; height: 2px; background: var(--c-celeste); }
.portada__parte { white-space: nowrap; }
/* Mobile y tablet: dos renglones, cortando antes del "·" (que no se muestra). */
@media (max-width: 1023px) {
  .portada__antetitulo { font-size: clamp(.9375rem, .55rem + 1.6vw, 1.1875rem); letter-spacing: .05em; }
  .portada__parte { display: block; }
  .portada__sep { display: none; }
}
/* Desktop: un solo renglón; el tamaño acompaña el ancho del bloque de texto. */
@media (min-width: 1024px) {
  /* ≥ 18,66 px en 700: texto grande, 3:1 sobre el mapa (lo mide el arnés). */
  .portada__antetitulo { font-size: clamp(1.1875rem, .4rem + .9vw, 1.375rem); letter-spacing: .05em; }
  .portada__renglon { white-space: nowrap; }
}
.portada__titulo { font-size: clamp(3rem, 1.6rem + 6vw, 6rem); line-height: var(--lh-display); }
.portada__bajada { font-size: var(--fs-2); line-height: 1.4; color: var(--c-sobre-oscuro); }
.portada__sello { font-size: var(--fs-0); color: var(--c-sobre-oscuro-2); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6) !important; }

/* El mapa */
.portada__mapa { position: relative; height: 60vh; min-height: 320px; margin-inline: calc(-1 * var(--margen)); background: var(--c-mapa); }
/* .portada__mapa > .mapa le gana a .maplibregl-map { position: relative } de la hoja de MapLibre. */
.portada__mapa > .mapa { position: absolute; inset: 0; transition: opacity 600ms var(--ease-entrada); }
/* Mientras carga MapLibre (con red lenta, 10 s o más: QA móvil) se ve una
   imagen fija del mismo encuadre; el mapa vivo aparece encima recién con sus
   teselas dibujadas. La imagen es una captura del propio mapa (sin datos). */
.portada__mapa { background: var(--c-mapa) url("../assets/img/mapa-portada-movil.webp") center / cover no-repeat; }
.portada__mapa:not(.portada__mapa--listo) > .mapa { opacity: 0; }
.portada__mapa--sin-mapa .mapa { display: none; }
.mapa__titular {
  pointer-events: none;
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: var(--s-6);
  z-index: 2;
  max-width: 30rem;
  padding: var(--s-3) var(--s-4);
  /* Escrim local obligatorio (estetica-v7 §7): noche al 80% que se desvanece en 48 px. */
  background: rgb(17 20 23 / .92);
  box-shadow: 0 0 48px 24px rgb(17 20 23 / .85);
  font: 700 var(--fs-2) / var(--lh-titulo-chico) var(--font-display);
  font-stretch: 87%;
  color: var(--dato-baja-oscuro);
}
/* Enlace al área dentro del titular del mapa (sólo con el dedo). */
.mapa__ir { pointer-events: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--c-celeste); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Deuda: sin capa, los barrios se apagan y la cifra se lee grande. */
.mapa__titular--grande { max-width: 40rem; font-size: var(--fs-4); font-stretch: 68%; font-weight: 850; line-height: var(--lh-titulo); }
/* Atribución obligatoria de OpenFreeMap / OpenMapTiles / OSM: sólo con el mapa cargado. */
.mapa__atribucion {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--s-2) var(--s-3);
  background: rgb(17 20 23 / .85);
  font: 400 var(--fs-0) / 1.4 var(--font-display);
  font-stretch: 87%;
  color: var(--c-sobre-oscuro-2);
}
.franja--oscura .mapa__atribucion a { color: var(--c-sobre-oscuro-2); }
/* La imagen fija también es de OpenStreetMap: la atribución va siempre. */

/* La leyenda: "Qué recorta, área por área" */
.leyenda__titulo { font: 700 var(--fs-2) / var(--lh-titulo-chico) var(--font-display); font-stretch: 87%; }
.leyenda__bajada { margin-top: var(--s-2); font: 400 var(--fs-0) / 1.45 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.leyenda__lista { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-1); }
.leyenda__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--icono-s) minmax(0, 1fr) 72px 4.5rem;
  align-items: center;
  column-gap: var(--s-3);
  width: 100%;
  min-height: var(--toque);
  padding: var(--s-3) 0;
  /* Reseteo de botón nativo: ningún fondo ni apariencia del sistema. */
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-stretch: 87%;
  text-align: left;
  text-decoration: none;
  cursor: var(--cursor-mano);
  --transicion: 200ms var(--ease-entrada);
}
/* Estado activo sin caja (devolución del cliente): el nombre a blanco pleno
   (los demás al 55%), la barra se ilumina (las otras al 35%), el ícono a
   celeste y un filete celeste de 1 px subraya sólo el ítem activo. */
.franja--oscura .leyenda__item { color: rgb(255 255 255 / .55); }
.leyenda__item::after {
  content: '';
  position: absolute;
  left: calc(var(--icono-s) + var(--s-3));
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--c-celeste);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.leyenda__icono { width: var(--icono-s); height: var(--icono-s); color: var(--c-sobre-oscuro-2); transition: color var(--transicion); }
.leyenda__nombre { font-size: var(--fs-ui); font-weight: 600; line-height: var(--lh-ui); transition: color var(--transicion); }
.leyenda__barra { position: relative; height: 6px; background: rgb(255 255 255 / .08); }
.leyenda__relleno { position: absolute; top: 0; bottom: 0; background: var(--dato-baja-oscuro); opacity: .35; transition: opacity var(--transicion); }
.leyenda__cero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--c-sobre-oscuro-2); }
.leyenda__cifra { font-size: var(--fs-2); font-stretch: 68%; font-weight: 850; line-height: 1; text-align: right; font-variant-numeric: tabular-nums lining-nums; color: var(--dato-baja-oscuro); }
.franja--oscura .leyenda__item:hover, .franja--oscura .leyenda__item[data-activo] { color: var(--c-sobre-oscuro); }
.leyenda__item:hover .leyenda__icono, .leyenda__item[data-activo] .leyenda__icono { color: var(--c-celeste); }
/* El amarillo nunca lleva glow (estetica-v7 §2): la barra activa se ilumina por opacidad. */
.leyenda__item:hover .leyenda__relleno, .leyenda__item[data-activo] .leyenda__relleno { opacity: 1; }
.leyenda__item[data-activo]::after { transform: scaleX(1); }
.leyenda__item:focus-visible { outline-offset: 4px; }

@media (min-width: 1024px) {
  /* Ocupa la pantalla: alto 100svh, ancho completo con márgenes laterales
     propios (no la columna de 1200 px), contenido centrado en vertical. */
  /* Abajo queda lugar para el texto que aparece sobre el mapa (no pisa los botones). */
  .portada { display: flex; align-items: center; min-height: 100svh; padding-bottom: calc(var(--s-6) + 7rem); }
  .portada > .contenedor { width: 100%; max-width: none; padding-inline: clamp(24px, 5vw, 96px); }
  .portada__grilla {
    grid-template-columns: minmax(0, 1fr) clamp(360px, 26vw, 560px);
    align-items: center;
    gap: var(--s-7);
    /* El mapa recibe el hover de los barrios: la grilla deja pasar el puntero. */
    pointer-events: none;
  }
  .portada__texto, .leyenda { position: relative; z-index: 1; }
  /* La caja de la leyenda deja pasar el puntero al mapa (La Boca y Puerto
     Madero quedan debajo con el encuadre de Netlify): sólo sus ítems y links
     lo capturan. */
  .leyenda { pointer-events: none; }
  .leyenda a, .leyenda button { pointer-events: auto; }
  /* El bloque de texto deja pasar el puntero al mapa (los barrios del sur y del
     oeste quedan debajo): sólo sus links y botones lo capturan. */
  .portada__texto { pointer-events: none; }
  .portada__texto a, .portada__texto button { pointer-events: auto; }
  /* Escrim local: la Ciudad pasa por debajo del texto; detrás de las líneas
     el fondo vuelve a la noche (el contraste lo mide el arnés). */
  .portada__texto { isolation: isolate; }
  .portada__texto::before {
    content: '';
    position: absolute;
    inset: -16px -40px -16px -32px;
    z-index: -1;
    pointer-events: none;
    /* Parejo detrás de todas las líneas (también el renglón de la Ciudad, que
       es el más ancho) y con bordes difusos: no se lee como una caja. */
    background: rgb(17 20 23 / .9);
    filter: blur(24px);
  }
  /* El mapa es protagonista: el texto no pasa del 42% del ancho a 1440 ni
     del 38% a 1920 (recta entre los dos puntos). */
  .portada__texto { max-width: min(42vw, calc(230px + 26vw)); }
  /* balance: "bajo lupa" va junto en el último renglón (sin balance quedaba "lupa" sola). */
  .portada__titulo { font-size: clamp(4rem, 2.4rem + 4.4vw, 8rem); text-wrap: balance; }
  .portada__bajada { font-size: clamp(1.25rem, 1rem + .6vw, 1.75rem); }
  .portada__mapa { position: absolute; inset: 0; height: auto; margin: 0; z-index: 0; pointer-events: auto; background-image: url("../assets/img/mapa-portada-escritorio.webp"); }
  .portada__grilla > .portada__mapa { grid-column: 1 / -1; }
  /* Protección del título: fundido funcional (no decorativo) del fondo del mapa
     detrás de la columna de texto, para que las calles no crucen las letras. */
  .portada__mapa::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Más liviano que antes: la Ciudad pasa por debajo del texto y tiene que verse;
       el contraste de las letras lo garantiza el escrim propio del texto. */
    background: linear-gradient(90deg, rgb(17 20 23 / .55) 0, rgb(17 20 23 / .35) 30%, rgb(17 20 23 / 0) 45%);
  }
  .leyenda {
    grid-column: 2;
    grid-row: 1;
    padding: var(--s-5);
    border: 1px solid var(--c-vidrio-borde);
    border-radius: var(--r-vidrio);
    /* Sobre el mapa, sin backdrop-filter: el blur se recalculaba en cada
       cuadro del giro del mapa y del scroll (trabones). Fondo más denso. */
    background: rgb(17 20 23 / .88);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
  }
  .mapa__titular { left: clamp(24px, 5vw, 96px); bottom: var(--s-6); max-width: 48rem; }
  .mapa__titular--grande { max-width: none; }
  .leyenda__item { min-height: 56px; grid-template-columns: var(--icono-m) minmax(0, 1fr) clamp(48px, 5vw, 120px) 5rem; }
  .leyenda__icono { width: var(--icono-m); height: var(--icono-m); }
  .leyenda__nombre { font-size: var(--fs-1); }
  .leyenda__cifra { font-size: var(--fs-3); }
  .leyenda__item::after { left: calc(var(--icono-m) + var(--s-3)); }
}

/* ═══ 3 · CINTA DE DATOS ═══ */
/* Fondo: degradé #0A2A4A → #0077B6 → #0A2A4A con un brillo celeste que la
   recorre en 12 s. Texto blanco: contra la parada más clara (#0077B6) da
   4,87:1; las cifras de baja, en amarillo, son texto grande (≥ 20 px, 850) y
   necesitan 3:1. El brillo se limita a --cinta-brillo-alfa para no bajar de
   4,5:1 ni de 3:1 en su punto más intenso (lo mide tests/validar.cjs). */
.cinta {
  --cinta-borde: #0A2A4A;
  --cinta-centro: #0077B6;
  --cinta-brillo-alfa: .07;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  height: 64px;
  background: linear-gradient(90deg, var(--cinta-borde), var(--cinta-centro), var(--cinta-borde));
  border-block: 1px solid rgb(0 185 242 / .4);
  color: var(--c-blanco);
}
.cinta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 185 242 / var(--cinta-brillo-alfa)), rgb(0 185 242 / 0)) no-repeat;
  background-size: 40% 300%;
  background-position: -60% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .cinta::before { animation: brillo-cinta 12s linear infinite; }
}
@keyframes brillo-cinta { from { background-position: -60% 50%; } to { background-position: 160% 50%; } }
.cinta__ventana {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  /* Único degradé: el fundido funcional de los bordes. */
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
@media (min-width: 1200px) {
  .cinta__ventana { mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
}
.cinta__pista { display: flex; height: 100%; width: max-content; will-change: transform; }
.cinta__tramo { display: flex; align-items: center; height: 100%; }
.cinta__item { display: inline-flex; align-items: baseline; gap: var(--s-2); white-space: nowrap; }
.cinta__nombre { font-stretch: 75%; font-weight: 600; font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: .06em; }
.cinta__cifra { font-size: max(1.25rem, var(--fs-2)); font-weight: 850; line-height: 1; }
.cinta [data-variacion="pos"] { color: var(--c-blanco); }
.cinta [data-variacion="neg"] { color: var(--dato-baja-oscuro); }
/* Separador: trazo tinta 2×16 px inclinado 8°. */
.cinta__sep { display: inline-block; width: 2px; height: 16px; margin-inline: var(--s-5); background: var(--c-celeste); transform: rotate(8deg); }
/* Fuera de pantalla, la cinta no repinta (ni el ticker ni el brillo). */
.cinta--fuera::before { animation-play-state: paused; }
.cinta--quieta .cinta__ventana { overflow-x: auto; scrollbar-width: none; mask-image: none; }
.cinta__pausa {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  margin-right: var(--s-1);
  border: 1px solid rgb(255 255 255 / .6);
  border-radius: var(--r);
  background: transparent;
  color: var(--c-blanco);
  cursor: var(--cursor-mano);
}
.cinta__pausa:focus-visible { outline-color: var(--c-blanco); }
.cinta__pausa .icono { width: var(--icono-s); height: var(--icono-s); }
.cinta__icono-seguir, .cinta__pausa[aria-pressed="true"] .cinta__icono-pausa { display: none; }
.cinta__pausa[aria-pressed="true"] .cinta__icono-seguir { display: block; }

/* ═══ 4 · LAS ÁREAS ═══ */
.areas__vista .franja__titulo { margin-top: var(--s-2); }

.areas__estado:not(:empty) { margin-top: var(--s-5); font: 600 var(--fs-ui) / var(--lh-ui) var(--font-display); font-stretch: 87%; }
.areas__estado .boton { margin-left: var(--s-3); }

/* Fichas: las 6 primeras por `orden` (diseno-areas §2). */
.fichas {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (min-width: 768px) { .fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fichas { gap: var(--s-5); } }
.fichas > li { display: flex; }
.ficha {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-4);
  color: var(--c-sobre-oscuro);
  text-decoration: none;
  font-family: var(--font-display);
  font-stretch: 87%;
  transition: background-color 150ms var(--ease-entrada), border-color 150ms var(--ease-entrada), transform 150ms var(--ease-entrada);
}
@media (min-width: 768px) { .ficha { padding: var(--s-5); } }
.ficha:hover { background: var(--c-vidrio-hover); border-color: var(--c-vidrio-borde-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .ficha:hover { transform: none; } }
.ficha__nombre { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-ui); font-weight: 700; line-height: var(--lh-ui); }
.ficha__icono { color: var(--c-texto-2); transition: color 150ms var(--ease-entrada); }
.ficha:hover .ficha__icono { color: var(--c-celeste); }
.ficha__cifra { margin-top: var(--s-2); font-size: var(--fs-5); font-stretch: 68%; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.ficha__base { font-size: var(--fs-0); line-height: 1.4; color: var(--c-texto-2); }
.ficha__barras { display: flex; gap: var(--s-3); height: 64px; margin-top: var(--s-3); }
.ficha__columna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1); }
.ficha__barra { display: block; min-height: 1px; background: var(--c-sobre-oscuro-2); opacity: .5; }
.ficha__anio { font-size: var(--fs-0); line-height: 1; color: var(--c-texto-2); font-variant-numeric: tabular-nums; }
.ficha__barra--neg { background: var(--dato-baja-oscuro); opacity: 1; }
.ficha__barra--pos { background: var(--d-suba-osc); opacity: 1; }
.ficha__linea { margin-top: auto; padding-top: var(--s-2); font-size: var(--fs-0); line-height: 1.4; color: var(--c-texto-2); }

/* Áreas sin JS (scripts/armar_html.py → areas-respaldo): texto indexable y legible sin
   JavaScript. Con JS lo reemplazan las fichas, el índice y los paneles. */
.js .areas-respaldo { display: none; }
.areas-respaldo {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  display: grid;
  column-gap: var(--s-5);
}
@media (min-width: 768px) { .areas-respaldo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .areas-respaldo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.areas-respaldo__area { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4) 0 var(--s-5); border-top: var(--borde); }
.areas-respaldo__nombre { font-family: var(--font-display); font-size: var(--fs-2); line-height: var(--lh-ui); }
.areas-respaldo__cifra { display: grid; gap: var(--s-1); }
.areas-respaldo__valor { font-family: var(--font-display); font-size: var(--fs-4); font-stretch: 68%; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.areas-respaldo__partida, .areas-respaldo__linea { font-size: var(--fs-0); line-height: 1.4; color: var(--c-texto-2); }
.areas-respaldo__titular { font-size: var(--fs-ui); line-height: 1.45; }

/* Índice: las 7 restantes, filas sin caja (diseno-areas §2). */
.areas-indice {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-4);
}
@media (min-width: 1200px) { .areas-indice { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-5); } }
.fila-area {
  display: grid;
  gap: var(--s-1);
  height: 100%;
  min-height: 64px;
  padding: var(--s-3) var(--s-2);
  border-top: var(--borde);
  color: var(--c-tinta);
  text-decoration: none;
  transition: background-color 150ms var(--ease-entrada);
}
.fila-area:hover { background: var(--c-vidrio); box-shadow: inset 2px 0 0 var(--c-celeste); }
.fila-area__nombre { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-ui); font-weight: 600; line-height: var(--lh-ui); }
.fila-area__icono { width: var(--icono-s); height: var(--icono-s); color: var(--c-texto-2); }
.fila-area__partida { font-size: var(--fs-0); line-height: 1.35; color: var(--c-texto-2); }
.fila-area__linea { display: none; font-size: var(--fs-0); line-height: 1.4; color: var(--c-texto-2); }
/* Un área sin cifra (Género) muestra su línea también en mobile: si no, la fila
   quedaba con el nombre solo (QA móvil). */
.fila-area:not(:has(.fila-area__cifra)) .fila-area__linea { display: block; }
.fila-area__cifra { font-size: var(--fs-2); line-height: 1.1; }
@media (min-width: 768px) {
  .fila-area { grid-template-columns: 1fr auto; align-items: start; column-gap: var(--s-3); }
  .fila-area__partida, .fila-area__linea { display: block; grid-column: 1; }
  .fila-area__cifra { grid-row: 1 / span 3; }
  .fila-area__cifra { grid-column: 2; grid-row: 1 / span 2; font-size: var(--fs-3); text-align: right; }
}

/* ═══ PANEL DE UN ÁREA (diseno-areas §3) ═══
   Franjas a sangre sin desborde: el fondo se extiende con box-shadow y se
   recorta con clip-path (no hay 100vw que sume la barra de scroll). */
.area { margin-top: calc(-1 * var(--s-8)); }
@media (min-width: 1200px) { .area { margin-top: calc(-1 * var(--s-9)); } }
@media (prefers-reduced-motion: no-preference) {
  .entrando { animation: entrar 180ms var(--ease-entrada); }
}
@keyframes entrar { from { opacity: 0; } to { opacity: 1; } }
.area__banda {
  position: relative;
  isolation: isolate;
}
/* "La lectura del bloque": sobre noche, con un halo abajo a la derecha
   (estetica-v7 §5), sin franja de otro color. */
.area__banda::before {
  content: '';
  position: absolute;
  inset: 0 -100vmax;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle 60vw at calc(50% + 50vw) 100%, var(--halo), transparent 60%) no-repeat;
}
.area__barra { padding-top: var(--s-5); }
.area__cabeza { position: relative; isolation: isolate; padding: var(--s-6) 0 var(--s-6); }
@media (min-width: 1200px) { .area__cabeza { padding: var(--s-7) 0 var(--s-6); } }
/* Cabecera sin rectángulo (estetica-v7 §5): halo arriba a la izquierda. */
.area__cabeza::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--s-9)) -100vmax 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle 60vw at calc(50% - 50vw) 0%, var(--halo), transparent 60%) no-repeat;
}
.area__foto { margin-bottom: var(--s-5); }
.area__foto img { width: 100%; max-height: 280px; object-fit: cover; border-radius: var(--r); }
.area__identidad { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .area__identidad { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-6); } }
/* Ícono con halo estático del doble de su tamaño. */
.area__halo {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: -24px;
  background: radial-gradient(circle, rgb(0 185 242 / .22), transparent 70%);
}
.area__icono { width: 48px; height: 48px; color: var(--c-celeste); stroke-width: 1.5; }
@media (min-width: 1200px) {
  .area__halo { width: 128px; height: 128px; margin: -32px; }
  .area__icono { width: 64px; height: 64px; }
}
.area__titulos { min-width: 0; }
.area__nombre { margin-top: var(--s-3); font-size: var(--fs-area); line-height: var(--lh-display); max-width: 14em; color: var(--c-sobre-oscuro); }

.area__incluye { margin-top: var(--s-4); max-width: 52rem; font-size: var(--fs-ui); line-height: 1.6; }
.area__incluye-rotulo { font-weight: 600; color: var(--c-sobre-oscuro-2); }

/* Filete luminoso (estetica-v7 §3): 1 px arriba de un indicador o de un
   paso, nunca cierra en caja. Va en un pseudo-elemento: no es un fondo. */
.area-indicador::before, .indicador-bloque::before, .indicador-extra::before, .paso::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--filete-luz);
}

/* Indicadores: sin cajas, filete luminoso arriba. */
.area-indicadores {
  list-style: none;
  padding: 0;
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (min-width: 1024px) { .area-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.area-indicador, .indicador-bloque {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  position: relative;
  padding-top: var(--s-3);
}
/* La cifra del titular (QA final): primera y más grande que las secundarias,
   con la partida de la que sale, igual que en la tarjeta del área. */
.area-principal { margin-top: var(--s-6); display: grid; gap: var(--s-1); justify-items: start; }
.area-principal__partida { font: 600 var(--fs-1) / 1.35 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro); }
.area-principal__cifra { font-size: var(--fs-area); line-height: .9; }
.area-principal__base { font: 400 var(--fs-0) / 1.35 var(--font-display); font-stretch: 87%; color: var(--c-texto-2); }
.area-principal + .area-indicadores .area-indicador__cifra { font-size: var(--fs-4); }
.area-indicador__rotulo { font-size: var(--fs-0); font-weight: 600; line-height: 1.35; color: var(--c-texto-2); }
.area-indicador__cifra { font-size: var(--fs-5); line-height: 1; }
.area-indicador__base { font-size: var(--fs-0); color: var(--c-texto-2); }
/* Regla 2: sin partidas, los datos del bloque ocupan la fila de indicadores. */
.indicador-bloque__cifra { font-size: var(--fs-5); line-height: 1.05; color: var(--c-sobre-oscuro); }
.indicador-bloque__texto { font: 400 var(--fs-ui) / 1.45 var(--font-texto); }
.indicador-bloque__base { font-size: var(--fs-0); font-weight: 700; color: var(--c-texto-2); }
.indicador-bloque__atribucion { font-size: var(--fs-0); color: var(--c-texto-2); }

/* Análisis, gráficos, indicadores del bloque, lista. */
.area__blanca { padding-block: var(--s-7); }
.area__blanca > * + * { margin-top: var(--s-7); }
.area__analisis p { font-size: var(--fs-1); }
.area__graficos { display: grid; gap: var(--s-5); }
.area__secundarias { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .area__secundarias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-figura { padding: var(--s-5); }
@media (min-width: 1200px) { .area-figura--principal { padding: var(--s-6) var(--s-7); } }
.grafico__titulo { font-stretch: 75%; font-weight: 800; font-size: var(--fs-2); line-height: var(--lh-titulo-chico); margin-bottom: var(--s-2); }

/* Indicadores del bloque: sin cajas, filete superior; 1 col mobile, 3 desktop. */
.indicadores-extra { list-style: none; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .indicadores-extra { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.indicador-extra { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); row-gap: var(--s-1); align-content: start; position: relative; padding-top: var(--s-3); }
.indicador-extra__icono { width: var(--icono-s); height: var(--icono-s); margin-top: .35em; color: var(--c-texto-2); }
.indicador-extra__cifra { font-size: var(--fs-3); line-height: 1.1; word-break: keep-all; hyphens: none; }
.indicador-extra__texto, .indicador-extra__fuente { grid-column: 2; }
.indicador-extra__texto { font: 400 var(--fs-1) / 1.45 var(--font-texto); }
.indicador-extra__fuente { font-size: var(--fs-0); line-height: 1.35; color: var(--c-texto-2); }
.indicadores-extra--amplia .indicador-extra__cifra { font-size: var(--fs-5); }

.lista__titulo { font: 800 var(--fs-2) / var(--lh-titulo-chico) var(--font-display); font-stretch: 75%; }
.area__lista { list-style: none; margin: var(--s-3) 0 0; padding: 0; max-width: var(--ancho-texto); font-size: var(--fs-1); line-height: 1.5; }
.area__lista li { position: relative; padding-left: var(--s-5); }
.area__lista li + li { margin-top: var(--s-3); }
.area__lista li::before { content: '\2013'; position: absolute; left: 0; color: var(--c-celeste-tinta); }
.lista__fuente { margin-top: var(--s-3); font-size: var(--fs-0); color: var(--c-texto-2); }

/* ── Línea de tiempo horizontal (Línea F). Referencia 21st: "Product
   Timeline" (hyperiux). Señalética del subte: fondo en el naranja oficial de
   la línea (#FC6D03, de la infografía de la Línea F), texto en negro noche
   (contraste AA sobre ese naranja; el blanco no lo alcanza), la foto del acto
   de anuncio fundida en duotono y degradada hacia el texto. La vía va
   punteada: así se dibujan en los planos las líneas que no existen. */
.linea-tiempo {
  --naranja-f: #FC6D03;
  --tinta-f: #fff;
  --tinta-f-2: rgb(255 255 255 / .78);
  --fondo-f: #0B0E11;
  --riel: 2.6rem;
  position: relative;
  isolation: isolate;
  margin-top: var(--s-8);
  padding-block: var(--s-8);
  color: var(--tinta-f);
  /* De borde a borde sin cambiar el ancho de la caja (la fija el pin). */
  border-image: linear-gradient(var(--fondo-f) 0 0) fill 0 // 0 100vmax;
  box-shadow: 0 -1px 0 var(--c-vidrio-borde), 0 1px 0 var(--c-vidrio-borde);
}
/* Foto de fondo: escala de grises multiplicada sobre el naranja (duotono),
   ocupa la mitad derecha y se funde hacia el texto. */
.linea-tiempo__fondo {
  /* Sólo en la zona del cartel: la vía y los hitos quedan sobre naranja liso. */
  position: absolute; z-index: -1; top: 0; height: 27rem; right: calc(-1 * (50vw - 50%)); width: min(66vw, 1050px);
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 50%, transparent 100%);
  mask-composite: intersect;
}
.linea-tiempo__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; filter: grayscale(1) contrast(1.1) brightness(.8); opacity: .5; }
@media (max-width: 1023px) {
  .linea-tiempo__fondo { left: calc(-1 * var(--margen)); right: calc(-1 * var(--margen)); width: auto; height: 22rem; bottom: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
  .linea-tiempo--con-fondo .linea-tiempo__cabeza { padding-top: 10rem; }
}
.linea-tiempo__cabeza { position: relative; max-width: 40rem; }
.linea-tiempo__cartel {
  display: flex; align-items: center; gap: .18em;
  font: 900 clamp(3rem, 2rem + 4vw, 5.5rem) / 1 var(--font-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em;
}
/* Insignia de la línea: círculo negro con la F en el naranja de la línea. */
.linea-tiempo__insignia {
  flex: none; display: grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 50%;
  background: var(--naranja-f, #FC6D03); color: #fff; font-size: .82em; text-transform: none;
}
.linea-tiempo__titulo { margin-top: var(--s-3); font: 850 var(--fs-4) / var(--lh-titulo) var(--font-display); font-stretch: 68%; }
.linea-tiempo__bajada { margin-top: var(--s-2); max-width: var(--ancho-texto); font: 500 var(--fs-1) / 1.45 var(--font-texto); color: var(--tinta-f-2); }
.linea-tiempo__pista-ayuda { margin-top: var(--s-4); font: 800 var(--fs-0) / 1.3 var(--font-display); font-stretch: 87%; }
.linea-tiempo__pista {
  position: relative; margin-top: var(--s-6); margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen); scrollbar-width: thin;
}
.linea-tiempo__pista:focus-visible { outline: 2px solid var(--tinta-f); outline-offset: 2px; }
.linea-tiempo__lista { position: relative; display: flex; width: max-content; list-style: none; margin: 0; padding: 0 0 var(--s-4); }
.linea-tiempo__lista::before, .linea-tiempo__avance {
  content: ''; position: absolute; left: 0; right: 0; top: calc(var(--riel) - 3px); height: 6px; border-radius: 3px;
}
.linea-tiempo__lista::before { background: repeating-linear-gradient(90deg, rgb(252 109 3 / .55) 0 18px, transparent 18px 30px); }
.linea-tiempo__avance { list-style: none; background: var(--naranja-f); transform: scaleX(0); transform-origin: 0 50%; }
.linea-tiempo:not(.linea-tiempo--fijada) .linea-tiempo__avance { transform: none; opacity: 0; }
.hito { position: relative; flex: none; width: min(76vw, 18.5rem); padding-right: var(--s-6); scroll-snap-align: start; }
.hito__fecha { height: 1.6rem; font: 850 var(--fs-1) / 1.6rem var(--font-display); font-stretch: 75%; color: var(--tinta-f-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Estaciones: blancas con borde negro; los anuncios, negras con aro blanco. */
.hito::before { content: ''; position: absolute; left: 0; top: calc(var(--riel) - 8px); width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--fondo-f); }
.hito--anuncio::before { background: var(--fondo-f); box-shadow: 0 0 0 3px var(--naranja-f), 0 0 0 6px var(--fondo-f); }
.hito--anuncio .hito__fecha { color: var(--naranja-f); }
.hito__cuerpo { margin-top: var(--s-7); }
.hito__texto { font: 500 var(--fs-1) / 1.45 var(--font-texto); }
.hito__cita { margin: var(--s-3) 0 0; padding-left: var(--s-3); border-left: 2px solid var(--naranja-f); font: 500 var(--fs-ui) / 1.45 var(--font-texto); font-style: italic; color: var(--tinta-f-2); }
.hito__cita footer { margin-top: var(--s-1); font-style: normal; font-size: var(--fs-0); }
.hito--hoy { width: min(80vw, 22rem); }
.hito--hoy::before { width: 22px; height: 22px; top: calc(var(--riel) - 11px); background: var(--naranja-f); box-shadow: 0 0 0 4px var(--fondo-f); }
.hito--hoy .hito__fecha { color: var(--naranja-f); }
.hito__cifra { font: 900 var(--fs-6) / .9 var(--font-display); font-stretch: 68%; color: var(--naranja-f); }
.hito--hoy .hito__cuerpo { margin-top: var(--s-5); }
.linea-tiempo--fijada .linea-tiempo__pista { overflow: hidden; scroll-snap-type: none; }
.linea-tiempo--fijada .linea-tiempo__pista-ayuda { visibility: hidden; }
@media (min-width: 1024px) { .hito { width: 20rem; } .hito--hoy { width: 24rem; } }

.area__banda { padding-block: var(--s-8); }
@media (min-width: 1200px) { .area__banda { padding-block: var(--s-9); } }
.banda__grilla { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .banda__grilla { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-7); } .banda__grilla--sola { grid-template-columns: minmax(0, 8fr); } }
.banda__kicker { color: var(--c-celeste); }
.banda__titular { margin-top: var(--s-4); font-size: var(--fs-4); line-height: var(--lh-display); color: var(--c-sobre-oscuro); }
.banda__parrafos { margin-top: var(--s-6); max-width: var(--ancho-texto); }
.banda__parrafos p { font-size: var(--fs-1); color: var(--c-sobre-oscuro-2); }
.banda__parrafos p + p { margin-top: var(--s-4); }
.banda__datos { list-style: none; padding: 0; display: grid; gap: var(--s-3); align-content: start; }
.dato-bloque { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.dato-bloque__cifra { font-size: var(--fs-5); line-height: 1.05; color: var(--c-celeste); }
.dato-bloque__texto { font: 400 var(--fs-ui) / 1.45 var(--font-texto); color: var(--c-sobre-oscuro); }
.dato-bloque__base { font-size: var(--fs-0); font-weight: 700; color: var(--c-sobre-oscuro-2); }
.dato-bloque__atribucion { font-size: var(--fs-0); color: var(--c-sobre-oscuro-2); }

/* Resaltador: la firma, una sola vez por panel (detrás de la cifra del titular). */
.resaltado {
  color: var(--c-tinta-sobre-luz);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1.2 2.1 C20 1.2 41 2.6 60 1.5 C75 0.9 88 2 98.9 1.2 L99.5 18.7 C82 19.5 63 18.2 44 19.2 C27 19.8 13 18.7 0.7 19.4 Z' fill='%2300B9F2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .02em .14em;
}

/* Ayuda y Próximamente. */
.area__cierre { padding-block: var(--s-7); display: grid; gap: var(--s-7); }
.ayuda { max-width: var(--ancho-texto); padding: var(--s-5); }
.ayuda p { font-size: var(--fs-1); line-height: 1.5; }
.ayuda__lista { list-style: none; padding: 0; margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.ayuda__lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); font-size: 1rem; }
.ayuda__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  font: 850 var(--fs-3) / 1 var(--font-display);
  font-stretch: 68%;
  color: var(--c-tinta);
  font-variant-numeric: tabular-nums lining-nums;
}
.ayuda__alcance { font-family: var(--font-display); font-stretch: 87%; color: var(--c-texto-2); }

/* Anterior / siguiente: sin caja, con filete luminoso. */
.area__pasos { padding-block: var(--s-6) 0; }
.pasos__fila { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .pasos__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paso {
  display: grid;
  gap: var(--s-1);
  min-height: 72px;
  padding: var(--s-3) var(--s-4);
  position: relative;
  color: var(--c-sobre-oscuro);
  text-decoration: none;
  transition: background-color 150ms var(--ease-entrada);
}
@media (min-width: 768px) { .paso { min-height: 88px; } .paso--siguiente { text-align: right; justify-items: end; } }
.paso:hover { background: var(--c-vidrio); }
.paso__rotulo { font-size: var(--fs-0); color: var(--c-texto-2); }
.paso__nombre { display: flex; align-items: center; gap: var(--s-2); font: 700 var(--fs-2) / var(--lh-titulo-chico) var(--font-display); font-stretch: 87%; }
.paso__icono { width: var(--icono-m); height: var(--icono-m); color: var(--c-texto-2); }
.paso__cifra { font-size: var(--fs-2); line-height: 1.1; }
.pasos__todas { margin-top: var(--s-5); }

/* ═══ 5 · NUESTRA LECTURA (docs/nuestra-lectura.md) ═══
   La voz del bloque: superficie #1E1E1E (el negro del logo), distinta de la
   noche del análisis. Adelanto en el inicio y vista propia. */
.lectura { background: var(--c-oscuro); }
.lectura__logo { width: 69px; height: 40px; }
.lectura__logo--chico { width: 49px; height: 28px; }
.lectura .kicker { margin-top: var(--s-4); }
.lectura__titular { margin-top: var(--s-3); max-width: 22em; font-size: var(--fs-4); line-height: var(--lh-titulo); color: var(--c-sobre-oscuro); }
/* El resaltado celeste es la firma del bloque: texto en tinta donde lo cubre. */
.lectura__titular .resaltado { color: var(--c-tinta-sobre-luz); }

/* Adelanto: media pantalla como máximo. */
.lectura__adelanto { display: grid; justify-items: start; }
.lectura__capitulos-linea { margin-top: var(--s-4); font: 400 var(--fs-1) / 1.45 var(--font-texto); color: var(--c-sobre-oscuro-2); }
/* Las acciones van al pie del texto que las explica, en su misma columna (sin columna aparte). */

/* Vista completa */
.vista-lectura .lectura { padding-top: var(--s-6); }
.lectura__barra { margin-bottom: var(--s-6); }
.lectura__titular--completo { max-width: 20em; font-size: var(--fs-5); line-height: var(--lh-display); }

.lectura__atribucion { margin-top: var(--s-4); font-size: var(--fs-0); color: var(--c-sobre-oscuro-2); }

/* El argumento en 4 capítulos: el hilo es un filete arriba de la fila; el
   tramo abierto se enciende en celeste. */
.capitulos { margin-top: var(--s-8); display: grid; gap: 0; }
.capitulo { position: relative; padding-top: var(--s-4); }
.capitulo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--c-vidrio-borde); }
.capitulo[data-abierto]::before { height: 2px; background: var(--c-celeste); }
.capitulo__cabeza { font: inherit; }
.capitulo__boton {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  width: 100%;
  min-height: 64px;
  padding: var(--s-3) 0;
  border: 0;
  background: none;
  color: var(--c-sobre-oscuro);
  text-align: left;
  cursor: var(--cursor-mano);
}
.capitulo__cifra { grid-column: 2; grid-row: 1; font: 850 var(--fs-3) / 1 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; color: var(--c-sobre-oscuro); }
.capitulo__rotulo { grid-column: 1; grid-row: 1; font: 700 var(--fs-2) / var(--lh-titulo-chico) var(--font-display); font-stretch: 87%; }
.capitulo__cifra[data-variacion="neg"] { color: var(--dato-baja-oscuro); }
.capitulo__cifra[data-variacion="pos"] { color: var(--d-suba-osc); }
.capitulo:not([data-abierto]) .capitulo__cifra { opacity: .7; }
.capitulo__cuerpo { padding-bottom: var(--s-6); }
.capitulo__texto { max-width: 56ch; font: 400 var(--fs-1) / 1.5 var(--font-texto); }
.capitulo__contexto { margin-top: var(--s-4); max-width: 56ch; font: 400 var(--fs-1) / 1.5 var(--font-texto); color: var(--c-sobre-oscuro-2); }
.capitulo__indicadores { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.capitulo__indicadores .indicador-extra { padding: var(--s-4); }
.capitulo__indicadores .indicador-extra::before { display: none; }
.capitulo__indicadores .indicador-extra__texto { font: 400 var(--fs-ui) / 1.45 var(--font-display); font-stretch: 87%; }
.capitulo__enlace { display: inline-flex; align-items: center; min-height: var(--toque); margin-top: var(--s-4); font: 700 var(--fs-ui) / 1.3 var(--font-display); font-stretch: 87%; }
.capitulo__siguiente {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  margin-top: var(--s-4);
  padding: 0;
  border: 0;
  background: none;
  font: 700 var(--fs-ui) / 1.3 var(--font-display);
  font-stretch: 87%;
  color: var(--c-celeste);
  cursor: var(--cursor-mano);
}
@media (prefers-reduced-motion: no-preference) {
  .capitulo__cuerpo { animation: entrar 180ms var(--ease-entrada); }
}
@media (min-width: 1024px) {
  /* Fila de 3: el abierto ocupa 6/12 y los cerrados 3/12 cada uno. */
  .capitulos { grid-template-columns: 6fr 3fr 3fr; column-gap: var(--s-5); }
  .capitulos[data-abierto="1"] { grid-template-columns: 3fr 6fr 3fr; }
  .capitulos[data-abierto="2"] { grid-template-columns: 3fr 3fr 6fr; }
  .capitulo__boton { grid-template-columns: 1fr; align-content: start; }
  .capitulo__cifra { grid-column: 1; grid-row: 1; font-size: var(--fs-5); }
  .capitulo__rotulo { grid-row: 2; }
  .capitulo__indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Quién gana y quién pierde */
.quien { margin-top: var(--s-9); display: grid; gap: var(--s-6); }
.quien__titular { margin-top: var(--s-3); font: 850 var(--fs-3) / var(--lh-titulo-chico) var(--font-display); font-stretch: 68%; }
.quien__bajada { margin-top: var(--s-3); font: 400 var(--fs-1) / 1.5 var(--font-texto); color: var(--c-sobre-oscuro-2); }
.filtro { display: inline-flex; margin-top: var(--s-5); padding: 4px; border: 1px solid var(--c-vidrio-borde); border-radius: var(--r-vidrio); }
.filtro__opcion {
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: calc(var(--r-vidrio) - 4px);
  background: none;
  font: 600 var(--fs-ui) / 1 var(--font-display);
  font-stretch: 87%;
  color: var(--c-sobre-oscuro-2);
  cursor: var(--cursor-mano);
}
.filtro__opcion[aria-checked="true"] { background: var(--c-blanco); color: var(--c-tinta-sobre-luz); }
.quien__lectura { min-height: 2.8em; font: 700 var(--fs-ui) / 1.4 var(--font-display); font-stretch: 87%; }
.quien__barras { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.quien__fila {
  display: grid;
  /* Columna de la cifra de ancho fijo: la pista (y su cero) mide lo mismo en todas las filas. */
  grid-template-columns: minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 2px var(--s-3);
  min-height: 44px;
  padding-block: var(--s-1);
  opacity: .45;
  cursor: var(--cursor-flecha);
  transition: opacity 150ms var(--ease-entrada);
}
.quien__fila[data-activa] { opacity: 1; }
.quien__fila:focus-visible { outline-offset: 2px; }
.quien__nombre { grid-column: 1 / -1; font: 600 var(--fs-0) / 1.3 var(--font-display); font-stretch: 87%; }
.quien__pista { position: relative; height: 20px; }
.quien__pista::before { content: ''; position: absolute; top: -4px; bottom: -4px; left: var(--cero); width: 1px; background: var(--c-sobre-oscuro-2); }
.quien__barra { position: absolute; top: 0; bottom: 0; }
.quien__barra[data-variacion="neg"] { background: var(--dato-baja-oscuro); }
.quien__barra[data-variacion="pos"] { background: var(--d-suba-osc); }
.quien__cifra { text-align: right; font: 850 var(--fs-2) / 1 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; }
.quien .nota { margin-top: var(--s-3); }
@media (min-width: 1024px) {
  .quien { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-7); }
  .quien__cabeza { grid-column: 2; grid-row: 1; }
  .quien__grafico { grid-column: 1; grid-row: 1; }
}

/* Propuesta: cierre tipográfico, sin caja. El único halo de la vista. */
.lectura__propuesta {
  position: relative;
  isolation: isolate;
  margin-top: var(--s-9);
  padding-block: var(--s-6) var(--s-8);
}
.lectura__propuesta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--filete-luz); }
.lectura__propuesta::after {
  content: '';
  position: absolute;
  inset: 0 -100vmax;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgb(0 185 242 / .18), transparent 65%);
}
.propuesta__contexto { margin-top: var(--s-4); max-width: 40em; font: 400 var(--fs-2) / 1.45 var(--font-texto); color: var(--c-sobre-oscuro-2); }
.propuesta__frase { margin-top: var(--s-4); max-width: 18em; font: 850 var(--fs-4) / var(--lh-titulo) var(--font-display); font-stretch: 68%; color: var(--c-sobre-oscuro); }
@media (min-width: 768px) { .propuesta__frase { font-size: var(--fs-5); } }
.propuesta__enlace { display: inline-flex; align-items: center; min-height: var(--toque); margin-top: var(--s-5); font: 700 var(--fs-ui) / 1.3 var(--font-display); font-stretch: 87%; }
.lectura__firma {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  font: 600 var(--fs-0) / 1.3 var(--font-display);
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-sobre-oscuro-2);
}
.lectura__firma::before { content: ''; width: 24px; height: 1px; background: var(--c-celeste); }
.lectura__salida { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

/* ═══ 6 · NOVEDADES: riel horizontal ═══ */
/* Novedades: la única franja azulada del inicio, para que se lea como otra
   sección. Texto medido contra la parte más clara (arriba a la derecha, el
   azul con el halo encima): blanco 11:1 y #A9B5BF 5,5:1. */
.franja--novedades {
  background:
    radial-gradient(circle 50vw at 100% 0%, rgb(0 185 242 / .12), transparent 60%) no-repeat,
    linear-gradient(160deg, #0A2A4A, var(--c-noche));
  box-shadow: inset 0 1px 0 rgb(0 185 242 / .35);
}
.franja--novedades .novedad--destacada { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); }
.novedades__contenido { min-width: 0; }
.novedades__lista {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 1024px) {
  /* Destacada a la izquierda, línea de tiempo a la derecha. */
  .novedades__lista { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-auto-flow: dense; column-gap: var(--s-7); align-items: start; }
  .novedades__lista > .novedad--destacada { grid-row: 1 / span 6; }
  .novedades__lista > .novedad--linea { grid-column: 2; }
}
/* Destacada: tarjeta grande con foto arriba. */
.novedad { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.novedad__foto { display: block; width: 100%; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; }
.novedad--destacada .novedad__foto { max-height: 340px; }
@media (max-width: 767px) { .novedad--destacada .novedad__foto { max-height: 180px; } }
.novedad__cuerpo { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: var(--s-5) var(--s-5) var(--s-4); }
.novedad--destacada .novedad__titulo { font-size: var(--fs-3); -webkit-line-clamp: 3; line-clamp: 3; }
.novedad__acciones { display: flex; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: var(--s-1); }
/* Línea de tiempo: sin caja; fecha a la izquierda, punto y conector celeste. */
.novedades__lista > .novedad--linea, .novedades__anteriores .novedad--linea {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: var(--s-5);
  overflow: visible;
}
.novedad--linea .novedad__cuerpo { position: relative; padding: 0 0 var(--s-4) var(--s-5); }
.novedad--linea .novedad__cuerpo::before { content: ''; position: absolute; left: 0; top: .35rem; bottom: calc(-1 * var(--s-5)); width: 1px; background: rgb(0 185 242 / .45); }
.novedad--linea:last-child .novedad__cuerpo::before { bottom: 0; }
.novedad--linea .novedad__cuerpo::after { content: ''; position: absolute; left: -4px; top: .3rem; width: 9px; height: 9px; border-radius: 50%; background: var(--c-celeste); }
.novedad__fecha { display: grid; gap: var(--s-1); justify-items: start; align-content: start; margin: 0; font: 600 var(--fs-0) / 1.35 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); font-variant-numeric: tabular-nums; }
.novedad--linea .novedad__meta { margin: 0; }
.novedad--linea .novedad__resumen { -webkit-line-clamp: 2; line-clamp: 2; }
@media (max-width: 767px) {
  .novedades__lista > .novedad--linea, .novedades__anteriores .novedad--linea { grid-template-columns: minmax(0, 1fr); }
  .novedad__fecha { padding-left: var(--s-5); }
}
/* Título hasta 3 líneas y resumen recortado a 3; "Ver más" lo despliega. */
.novedad__titulo, .novedad__resumen { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.novedad__titulo { -webkit-line-clamp: 3; line-clamp: 3; }
.novedad__resumen { -webkit-line-clamp: 3; line-clamp: 3; }
.novedad--abierta .novedad__resumen { -webkit-line-clamp: unset; line-clamp: none; }
/* Sin JS no hay botón: el resumen va entero. */
html:not(.js) .novedad__resumen { -webkit-line-clamp: unset; line-clamp: none; }
.novedad__meta { font-size: var(--fs-0); color: var(--c-texto-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.novedad__tipo { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-celeste); }
.novedad__hoy { background: var(--c-celeste); color: var(--c-tinta-sobre-luz); border-radius: var(--r); padding: var(--s-1) var(--s-3); font-weight: 700; }
.novedad__titulo { font: 700 var(--fs-1) / var(--lh-titulo-chico) var(--font-display); font-stretch: 87%; margin-top: var(--s-2); }
.novedad__cuerpo > p:not(.novedad__meta) { margin-top: var(--s-2); font-size: 1rem; }
.novedad__completo > p { margin-top: var(--s-2); font-size: 1rem; }
.novedad__mas, .novedad__link { margin-top: var(--s-2); margin-right: var(--s-3); }
/* Hilo de X a pedido (js/novedades.js): botón + aviso; al cargar, el widget de X. */
.novedad__x { margin-top: var(--s-3); }
/* Con panel: el título lleva a la página de la nota; "Ver todas" debajo de la lista. */
.novedad__enlace { color: inherit; text-decoration: none; }
.novedad__enlace:hover { color: var(--c-celeste); }
.novedad__leer { margin-top: var(--s-2); }
.novedades__todas { margin-top: var(--s-5); }
.novedad__x .twitter-tweet { margin: 0 !important; }
.novedad__aviso-x { margin-top: var(--s-1); font-size: var(--fs-0); color: var(--c-sobre-oscuro-2); }
.novedad__icono { width: var(--icono-s); height: var(--icono-s); }
.novedades__anteriores { margin-top: var(--s-5); }
.novedades__anteriores summary {
  display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--s-5);
  border: 1px solid rgb(255 255 255 / .6); border-radius: var(--r); cursor: var(--cursor-mano);
  font: 600 var(--fs-ui) / var(--lh-ui) var(--font-display); font-stretch: 87%;
}
.novedades__anteriores summary:hover { background: var(--c-vidrio-hover); }
.novedades__estado:not(:empty) { margin-top: var(--s-5); font-family: var(--font-display); font-stretch: 87%; font-size: 1rem; }
.novedades__estado .boton { margin-left: var(--s-3); }

/* ═══ GRÁFICOS ═══ */
.grafico__medida { display: block; font-size: var(--fs-ui); font-weight: 600; line-height: 1.35; margin-bottom: var(--s-4); }
.grafico__lienzo { min-height: 120px; }
.grafico__lienzo svg { overflow: visible; }
.grafico__fuente, .grafico__nota { font-size: var(--fs-0); color: var(--c-texto-2); line-height: 1.45; margin-top: var(--s-3); max-width: var(--ancho-texto); }
.grafico__estado { font-size: 1rem; color: var(--c-texto-2); padding-block: var(--s-5); }
.grafico__estado .boton { margin-left: var(--s-2); }
@media (hover: hover) {
  .g-fila:hover .g-nombre { font-weight: 600 !important; }
}

/* Tabla de datos accesible */
.datos { margin-top: var(--s-3); max-width: var(--ancho-texto); }
.datos summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  cursor: var(--cursor-mano);
  font-family: var(--font-display);
  font-stretch: 87%;
  font-weight: 600;
  font-size: var(--fs-ui);
  color: var(--c-celeste-tinta);
}
.datos__marco { overflow-x: auto; }
.datos table { border-collapse: collapse; width: 100%; font-size: var(--fs-ui); margin-top: var(--s-2); }
.datos caption { text-align: left; font-size: var(--fs-0); color: var(--c-texto-2); padding-bottom: var(--s-2); }
.datos th, .datos td { text-align: left; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: var(--borde); vertical-align: top; }
.datos thead th { font-weight: 600; border-bottom-color: currentColor; }
.datos tbody th { font-weight: 500; }
.datos .num { text-align: right; white-space: nowrap; padding-right: 0; }


/* ═══ PIE (oscuro) ═══ */
.pie { padding-block: var(--s-7) var(--s-5); font-size: var(--fs-ui); border-top: 1px solid var(--c-vidrio-borde); }
.pie__columnas { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .pie__columnas { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--s-8); } }
.pie__logo { width: 69px; height: 40px; }
.pie__bloque { margin-top: var(--s-4); font-weight: 600; }
.pie__nota { margin-top: var(--s-3); color: var(--c-sobre-oscuro-2); }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s-6); }
@media (min-width: 768px) { .pie__enlaces { grid-template-columns: repeat(2, auto); } }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; color: var(--c-sobre-oscuro); text-decoration: none; }
.pie__enlaces a:hover { color: var(--c-celeste); }
.pie__letra-chica { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-vidrio-borde); display: grid; gap: var(--s-2); font-size: var(--fs-0); line-height: 1.5; color: var(--c-sobre-oscuro-2); }
.pie__metodo, .pie__creditos { margin: 0; }

/* ═══ 404 ═══ */
.error404 { padding-block: var(--s-9); }
.error404 h1 { font-family: var(--font-display); font-stretch: 68%; font-weight: 850; font-size: var(--fs-4); line-height: var(--lh-titulo); }
.error404 p { margin-top: var(--s-4); font-size: var(--fs-2); }
.error404 .boton { margin-top: var(--s-6); }

/* ═══ AGREGADOS 2026-10-03: contacto, fuentes y base de comparación ═══ */
.menu__icono { width: var(--icono-s); height: var(--icono-s); }
.menu__contacto { gap: var(--s-2); }
.leyenda__fuente { margin-top: var(--s-4); font: 400 var(--fs-0) / 1.45 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.areas__base { margin-top: var(--s-3); max-width: var(--ancho-texto); font: 400 var(--fs-1) / 1.45 var(--font-texto); color: var(--c-sobre-oscuro-2); }
.mega__base { max-width: var(--ancho-contenido); margin: var(--s-4) auto 0; font: 400 var(--fs-0) / 1.4 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.pie__contacto a { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }

/* ═══ EJECUCIÓN 2026 (docs/tablero-ejecucion.md) ═══
   Barra de ritmo: devengado sobre vigente, con la marca de la mitad del año. */
.ritmo { position: relative; display: block; height: 10px; }
/* La pista va en un pseudo-elemento: es un dato, no un contenedor de texto. */
.ritmo::before { content: ''; position: absolute; inset: 0; background: rgb(255 255 255 / .1); }
.ritmo__barra { position: absolute; top: 0; bottom: 0; left: 0; background: var(--c-sobre-oscuro); }
.ritmo__barra--baja { background: var(--dato-baja-oscuro); }
.ritmo__mitad { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 2px; background: var(--c-celeste); }
.ritmo__rotulo { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 var(--fs-0) / 1.3 var(--font-display); font-stretch: 87%; color: var(--c-celeste); }
.ritmo--grande { height: 16px; margin-block: var(--s-4) var(--s-7); }
.ritmo--mini { width: 96px; height: 6px; }
.ritmo--mini .ritmo__mitad { top: -2px; bottom: -2px; width: 1px; }

/* Franja corta del inicio */
.ejecucion-adelanto { border-top: 1px solid var(--c-vidrio-borde); }
.ejecucion-adelanto__grilla { display: grid; gap: var(--s-6); align-items: end; }

.ejecucion-adelanto__titulo { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.ejecucion-adelanto__cifra { font: 850 var(--fs-6) / .9 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; color: var(--c-sobre-oscuro); }
.ejecucion-adelanto__cifra--baja { color: var(--dato-baja-oscuro); }
.ejecucion-adelanto__texto { max-width: 26em; font: 700 var(--fs-2) / var(--lh-titulo-chico) var(--font-display); font-stretch: 87%; }
.ejecucion-adelanto .ritmo { max-width: 40rem; margin-block: var(--s-5) var(--s-6); }
.ejecucion-adelanto__fuente { font: 400 var(--fs-0) / 1.45 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }


/* Vista del tablero */
.tablero { padding-top: var(--s-6); }
.tablero__barra { margin-bottom: var(--s-6); }
.tablero__titulo { margin-top: var(--s-3); font: 850 var(--fs-5) / var(--lh-display) var(--font-display); font-stretch: 68%; }
.tablero__bajada { margin-top: var(--s-3); font: 400 var(--fs-1) / 1.45 var(--font-texto); color: var(--c-sobre-oscuro-2); }
.tablero__totales { margin-top: var(--s-7); }
.totales__ritmo { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); font: 700 var(--fs-2) / 1.2 var(--font-display); font-stretch: 87%; }
.totales__cifra { font: 850 var(--fs-6) / .9 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; }
.totales__cifra--baja { color: var(--dato-baja-oscuro); }
.totales__montos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); margin: 0; }
.totales__montos div { position: relative; padding-top: var(--s-3); }
.totales__montos div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--filete-luz); }
.totales__montos dt { font: 600 var(--fs-0) / 1.3 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.totales__montos dd { margin: var(--s-1) 0 0; font: 850 var(--fs-3) / 1.1 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; }

.filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-8); padding: var(--s-5); }
.filtros__campo { min-width: 0; }
/* Desktop: los tres selects en una fila; el buscador en la suya, a todo el ancho. */
@media (min-width: 1024px) {
  .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--s-5); }
  .filtros__campo--busqueda { grid-column: 1 / -1; }
}
.filtros__campo { display: grid; gap: var(--s-1); font: 600 var(--fs-0) / 1.3 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.filtros select, .filtros input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: var(--toque);
  -webkit-appearance: none;
  appearance: none;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-vidrio-borde);
  border-radius: var(--r);
  background: var(--c-noche-2);
  color: var(--c-sobre-oscuro);
  font: 500 var(--fs-ui) / 1.3 var(--font-display);
  font-stretch: 87%;
}
.filtros__ver { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin: 0; padding: 0; border: 0; font: 600 var(--fs-ui) / 1.3 var(--font-display); font-stretch: 87%; }
.filtros__ver legend { float: left; margin-right: var(--s-2); padding: 0; font-size: var(--fs-0); color: var(--c-sobre-oscuro-2); }
.filtros__ver label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--toque); }
.filtros__ver input { accent-color: var(--c-celeste); width: 18px; height: 18px; }
.filtros__limpiar { justify-self: start; }
@media (min-width: 1024px) { .filtros__ver { grid-column: 1 / span 2; } .filtros__limpiar { justify-self: end; } }

/* Buscador con sugerencias */
/* Safari dibuja el select nativo chico e ignora el alto: se reemplaza la flecha. */
.filtros select {
  padding-right: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A9B5BF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}
.buscador { position: relative; }
.buscador input { width: 100%; }
.buscador input::placeholder { color: var(--c-sobre-oscuro-2); opacity: 1; }
.buscador__lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 360px; /* el alto real lo fija buscador.js según el espacio libre */
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--s-1) 0;
  list-style: none;
  background: var(--c-noche-2);
  border: 1px solid var(--c-vidrio-borde);
  border-radius: var(--r-vidrio);
}
.buscador__lista--arriba { top: auto; bottom: calc(100% + 4px); }
.sugerencia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s-4);
  padding: var(--s-3) var(--s-4);
  cursor: var(--cursor-mano);
  color: var(--c-sobre-oscuro);
}
.sugerencia[aria-selected="true"], .sugerencia:hover { background: var(--c-vidrio-hover); box-shadow: inset 2px 0 0 var(--c-celeste); }
.sugerencia--vacia { cursor: var(--cursor-flecha); color: var(--c-sobre-oscuro-2); }
.sugerencia__nombre { font: 600 var(--fs-ui) / 1.3 var(--font-display); font-stretch: 87%; }
.sugerencia__contexto { grid-column: 1; font: 400 var(--fs-0) / 1.35 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.sugerencia__pct { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 850 var(--fs-2) / 1 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; }
.sugerencia__pct--baja { color: var(--dato-baja-oscuro); }
.buscador__elegido { margin-top: var(--s-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--toque);
  padding: 0 var(--s-4);
  border: 1px solid var(--c-celeste);
  border-radius: var(--r);
  background: rgb(0 185 242 / .12);
  color: var(--c-sobre-oscuro);
  font: 600 var(--fs-ui) / 1.3 var(--font-display);
  font-stretch: 87%;
  cursor: var(--cursor-mano);
}
.chip:hover { background: rgb(0 185 242 / .2); }

.tablero__subtitulo { font: 850 var(--fs-3) / var(--lh-titulo-chico) var(--font-display); font-stretch: 68%; }
.tablero__incisos { margin-top: var(--s-8); }
.incisos { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.inciso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); align-items: center; }
.inciso__nombre { font: 600 var(--fs-ui) / 1.3 var(--font-display); font-stretch: 87%; }
.inciso .ritmo { grid-column: 1; }
.inciso__cifra { grid-column: 2; grid-row: 1 / span 2; font: 850 var(--fs-3) / 1 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; }
.inciso__cifra--baja { color: var(--dato-baja-oscuro); }

.tablero__tabla { margin-top: var(--s-8); }
.tablero__conteo { margin-top: var(--s-2); font: 400 var(--fs-0) / 1.4 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.tabla-ejecucion__marco { margin-top: var(--s-4); }
.tabla-ejecucion { width: 100%; border-collapse: collapse; font-family: var(--font-display); font-stretch: 87%; font-variant-numeric: tabular-nums lining-nums; }
.tabla-ejecucion th, .tabla-ejecucion td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--c-vidrio-borde); text-align: left; vertical-align: top; }
.tabla-ejecucion .num { text-align: right; white-space: nowrap; }
.tabla-ejecucion thead th { font-size: var(--fs-0); font-weight: 600; color: var(--c-sobre-oscuro-2); }
.tabla-ejecucion thead button { min-height: var(--toque); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: var(--cursor-mano); }
.tabla-ejecucion thead th[aria-sort="ascending"] button::after { content: ' ↑'; color: var(--c-celeste); }
.tabla-ejecucion thead th[aria-sort="descending"] button::after { content: ' ↓'; color: var(--c-celeste); }
.tabla-ejecucion tbody th { font-weight: 600; font-size: var(--fs-ui); }
.tabla-ejecucion__nombre { display: block; }
.tabla-ejecucion__contexto { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-0); color: var(--c-sobre-oscuro-2); }
.tabla-ejecucion td { font-size: var(--fs-ui); }
.tabla-ejecucion__ritmo { display: grid; justify-items: end; gap: var(--s-1); }
.tabla-ejecucion__pct { font-weight: 700; }
.tabla-ejecucion__pct--baja { color: var(--dato-baja-oscuro); }
.tablero__mas { margin-top: var(--s-5); }
.tablero__metodo { margin-top: var(--s-7); max-width: var(--ancho-texto); font: 400 var(--fs-0) / 1.5 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.tablero__estado:not(:empty) { margin-top: var(--s-5); font: 600 var(--fs-ui) / 1.4 var(--font-display); font-stretch: 87%; }
.tablero__estado .boton { margin-left: var(--s-3); }

/* Mobile: cada fila de la tabla como tarjeta compacta. */
@media (max-width: 767px) {
  /* El encabezado queda como una fila de botones para ordenar. */
  .tabla-ejecucion, .tabla-ejecucion thead, .tabla-ejecucion tbody, .tabla-ejecucion tr { display: block; }
  .tabla-ejecucion thead tr { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
  .tabla-ejecucion thead th { padding: 0; border: 0; text-align: left; }
  .tabla-ejecucion tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-1) var(--s-3); padding-block: var(--s-3); border-bottom: 1px solid var(--c-vidrio-borde); }
  .tabla-ejecucion tbody th { grid-column: 1 / -1; border: 0; padding: 0; }
  .tabla-ejecucion td { display: grid; gap: 2px; border: 0; padding: 0; text-align: left; }
  .tabla-ejecucion td::before { content: attr(data-rotulo); font-size: var(--fs-0); font-weight: 600; color: var(--c-sobre-oscuro-2); }
  .tabla-ejecucion__ritmo { justify-items: start; }
  .ritmo--mini { width: 100%; }
}

/* Una figura secundaria que necesita todo el ancho (serie larga: stock de deuda). */
.area__secundarias > .area-figura--ancha { grid-column: 1 / -1; }

/* Nombre del barrio bajo el cursor (desktop). */
.mapa__barrio {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  padding: var(--s-1) var(--s-3);
  background: rgb(17 20 23 / .9);
  font: 700 var(--fs-0) / 1.3 var(--font-display);
  font-stretch: 87%;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-sobre-oscuro);
  white-space: nowrap;
}

/* ═══ MOSAICO DE EJECUCIÓN (fondo de la franja del inicio y del tablero) ═══
   Más tenue del lado del texto (izquierda) y más fuerte del lado opuesto. */
.ejecucion-adelanto, .tablero { position: relative; isolation: isolate; }
.mosaico {
  position: absolute;
  z-index: -1;
  inset: var(--s-4) var(--margen);
  width: calc(100% - 2 * var(--margen));
  height: calc(100% - 2 * var(--s-4));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .12) 0, rgb(0 0 0 / .2) 45%, rgb(0 0 0 / .7) 75%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .12) 0, rgb(0 0 0 / .2) 45%, rgb(0 0 0 / .7) 75%);
}
/* Mobile: el texto ocupa todo el ancho; el mosaico queda como textura pareja
   y tenue, sin cuadrados amarillos brillantes debajo de la letra chica (QA). */
@media (max-width: 767px) {
  .ejecucion-adelanto .mosaico {
    -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .1), rgb(0 0 0 / .14));
    mask-image: linear-gradient(180deg, rgb(0 0 0 / .1), rgb(0 0 0 / .14));
  }
}
.mosaico__leyenda { margin-top: var(--s-2); font: 400 var(--fs-0) / 1.45 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
/* Cabecera del tablero: el mosaico ocupa la franja de arriba y recibe el hover. */
.tablero__cabecera-fondo { position: absolute; inset: 0 0 auto; height: 520px; z-index: 0; }
.tablero__cabecera-fondo .mosaico { z-index: 0; height: calc(100% - 2 * var(--s-4) - 2rem); pointer-events: auto;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .1) 0, rgb(0 0 0 / .15) 50%, rgb(0 0 0 / .7) 80%), linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .1) 0, rgb(0 0 0 / .15) 50%, rgb(0 0 0 / .7) 80%);
}
.tablero > .contenedor { position: relative; z-index: 1; pointer-events: none; }
.tablero > .contenedor > * { pointer-events: auto; }
.mosaico__rotulo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  max-width: 22rem;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: rgb(17 20 23 / .94);
  border: 1px solid var(--c-vidrio-borde);
  font: 600 var(--fs-0) / 1.35 var(--font-display);
  font-stretch: 87%;
  color: var(--c-sobre-oscuro);
  pointer-events: none;
}
/* Sin texto encima (QA final): en desktop el mosaico ocupa sólo la mitad derecha de la
   cabecera, arriba de las tarjetas, y el texto queda en la mitad izquierda; en pantallas
   angostas no hay lugar libre de texto y el mosaico del tablero no se muestra (la franja
   del inicio conserva el suyo). */
@media (max-width: 1023px) { .tablero__cabecera-fondo { display: none; } }
@media (min-width: 1024px) {
  .tablero__cabecera-fondo .mosaico { left: 56%; width: calc(44% - var(--margen)); height: 320px; }
  .tablero__bajada, .mosaico__leyenda--tablero { max-width: 50%; }
}

/* ═══ EJECUCIÓN 2026: solapas y recaudación ═══ */
.solapas { display: inline-flex; margin-top: var(--s-5); padding: 4px; border: 1px solid var(--c-vidrio-borde); border-radius: var(--r-vidrio); background: rgb(17 20 23 / .7); }
.solapas__opcion {
  min-height: 40px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: calc(var(--r-vidrio) - 4px);
  background: none;
  font: 600 var(--fs-ui) / 1 var(--font-display);
  font-stretch: 87%;
  color: var(--c-sobre-oscuro-2);
  cursor: var(--cursor-mano);
  transition: background-color 150ms var(--ease-entrada), color 150ms var(--ease-entrada);
}
.solapas__opcion:hover { color: var(--c-sobre-oscuro); }
.solapas__opcion[aria-selected="true"] { background: var(--c-blanco); color: var(--c-tinta-sobre-luz); }
.recaudacion__total { margin-top: var(--s-7); }
.recaudacion__diferencia { margin-top: var(--s-2); font: 850 var(--fs-3) / 1.1 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; color: var(--dato-baja-oscuro); }
.recaudacion__arbol { margin-top: var(--s-8); }
.tabla-recaudacion tbody th { padding-left: calc(var(--nivel, 0) * var(--s-5)); }
.recaudacion__fila--n0 th, .recaudacion__fila--n0 td { font-weight: 800; }
.recaudacion__fila--n1 th { font-weight: 700; }
.recaudacion__rama { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--toque); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: var(--cursor-mano); text-align: left; }
.recaudacion__flecha { display: inline-block; color: var(--c-celeste); transition: transform 150ms var(--ease-entrada); }
.recaudacion__rama[aria-expanded="true"] .recaudacion__flecha { transform: rotate(90deg); }
/* Va en un span dentro de la celda: un td con display:grid deja de ser
   celda y desarma la tabla (las columnas se corrían). */
.recaudacion__var { display: grid; justify-items: end; gap: var(--s-1); }
.divergente { position: relative; display: block; width: 120px; height: 8px; }
.divergente::before { content: ''; position: absolute; top: -3px; bottom: -3px; left: var(--cero); width: 1px; background: var(--c-sobre-oscuro-2); }
.divergente__barra { position: absolute; top: 0; bottom: 0; }
.divergente__barra[data-variacion="neg"] { background: var(--dato-baja-oscuro); }
.divergente__barra[data-variacion="pos"] { background: var(--d-suba-osc); }
.recaudacion__diferencias { margin-top: var(--s-8); }
.ejecucion-adelanto__recaudacion { margin-top: var(--s-3); font: 700 var(--fs-1) / 1.4 var(--font-display); font-stretch: 87%; }
.ejecucion-adelanto__recaudacion a { color: var(--c-sobre-oscuro); text-decoration-color: var(--c-celeste); }
@media (max-width: 767px) {
  .tabla-recaudacion tr { grid-template-columns: 1fr 1fr; }
  .divergente { width: 100%; }
  .tabla-recaudacion tbody th { padding-left: calc(var(--nivel, 0) * var(--s-3)); }
}
/* Solapas de Ejecución 2026: en mobile, una sola línea deslizable (sin cortar los nombres). */
@media (max-width: 767px) {
  /* Las tres solapas siempre enteras en mobile (QA final: "Recaudación" quedaba cortada). */
  .solapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .solapas__opcion { white-space: normal; padding: var(--s-2); line-height: 1.2; text-align: center; }
}
/* Gastos por programa: "Limpiar filtros" en la fila de la jurisdicción. */
@media (min-width: 1024px) {
  .filtros--programas .filtros__limpiar { justify-self: start; }
}

/* ═══ TABLERO: tablas, chips y tarjetas de totales (mejoras-21st §5, §6, §8) ═══ */
/* Encabezado fijo dentro de la tabla mientras se baja (debajo del encabezado del sitio). */
.tabla-ejecucion thead th { position: sticky; top: var(--alto-cabecera); z-index: 1; background: var(--c-noche); }
.tabla-ejecucion tbody tr { transition: background-color 120ms var(--ease-entrada); }
.tabla-ejecucion tbody tr:hover { background: rgb(255 255 255 / .04); }
.tabla-ejecucion td.num, .tabla-ejecucion th.num { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
/* Orden: ícono tenue en las columnas ordenables; claro y celeste en la activa. */
.tabla-ejecucion thead th[aria-sort] button::after { content: ' ↕'; color: rgb(255 255 255 / .3); }
.tabla-ejecucion thead th[aria-sort="ascending"] button::after { content: ' ↑'; color: var(--c-celeste); }
.tabla-ejecucion thead th[aria-sort="descending"] button::after { content: ' ↓'; color: var(--c-celeste); }
.tabla-ejecucion thead th[aria-sort="ascending"] button, .tabla-ejecucion thead th[aria-sort="descending"] button { color: var(--c-sobre-oscuro); }
.tabla-vacia td { padding: var(--s-7) 0; text-align: left; }
.tabla-vacia p { margin: 0 0 var(--s-4); font: 600 var(--fs-1) / 1.4 var(--font-display); font-stretch: 87%; }
@media (prefers-reduced-motion: no-preference) {
  .tabla--reordenada { animation: tabla-reordenar 180ms var(--ease-entrada); }
}
@keyframes tabla-reordenar { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 767px) {
  /* En mobile el encabezado (fila de botones de orden) queda fijo entero. */
  .tabla-ejecucion thead { position: sticky; top: var(--alto-cabecera); z-index: 1; background: var(--c-noche); }
  .tabla-ejecucion thead th { position: static; }
  .tabla-vacia { display: block !important; }
}

/* Chips del filtro de jurisdicción */
.filtros__chips { grid-column: 1 / -1; }
.filtros__rotulo { margin: 0 0 var(--s-2); font: 600 var(--fs-0) / 1.3 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip--filtro { border-color: var(--c-vidrio-borde); background: transparent; font-size: var(--fs-0); }
.chip--filtro:hover { border-color: var(--c-celeste); background: rgb(255 255 255 / .06); }
.chip--filtro[aria-pressed="true"] { border-color: var(--c-celeste); background: rgb(0 185 242 / .14); }
.chip__check { color: var(--c-celeste); font-weight: 800; }
.chip__quitar { margin-left: var(--s-1); color: var(--c-sobre-oscuro-2); font-weight: 700; }

/* Tarjetas de totales con mini-gráfico */
.totales-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .totales-tarjetas { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.tarjeta-total { display: grid; gap: var(--s-2); align-content: start; margin: 0; padding: var(--s-5); }
.tarjeta-total__rotulo { margin: 0; font: 600 var(--fs-0) / 1.35 var(--font-display); font-stretch: 87%; color: var(--c-sobre-oscuro-2); }
.tarjeta-total__cifra { margin: 0; font: 850 var(--fs-4) / 1 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; }
.tarjeta-total__cifra--baja { color: var(--dato-baja-oscuro); }
.tarjeta-total .totales__cifra { font: inherit; }
.ritmo--tarjeta { height: 8px; margin-top: var(--s-2); margin-bottom: var(--s-5); }
.tarjeta-total:not(.tarjeta-total--principal) .ritmo--tarjeta { margin-bottom: 0; }
@media (min-width: 1024px) { .tarjeta-total--principal { grid-column: span 2; } .tarjeta-total--principal .tarjeta-total__cifra { font-size: var(--fs-6); } }
.mini-columnas { display: flex; align-items: flex-end; gap: var(--s-2); height: 56px; margin-top: var(--s-2); }
.mini-columnas__col { display: grid; justify-items: center; gap: 2px; align-content: end; width: 32px; }
.mini-columnas__barra { display: block; width: 100%; min-height: 1px; background: rgb(255 255 255 / .25); }
.mini-columnas__col--activa .mini-columnas__barra { background: var(--c-sobre-oscuro-2); }
.mini-columnas__col--activa:last-child .mini-columnas__barra { background: var(--c-celeste); }
.mini-columnas__anio { font: 500 11px / 1.2 var(--font-display); color: var(--c-sobre-oscuro-2); font-variant-numeric: tabular-nums; }

/* ═══ SITUACIÓN FISCAL Y DEUDA (inicio) ═══ */
.fiscal { border-top: 1px solid var(--c-vidrio-borde); }
.fiscal__titulo { max-width: 22em; }
.fiscal__cifras { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .fiscal__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fiscal__cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fiscal__dato { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-3); border-top: 2px solid var(--c-celeste); }
.fiscal__cifra { white-space: nowrap; font: 850 clamp(2.2rem, 1.1rem + 2.1vw, 3.3rem) / 1 var(--font-display); font-stretch: 68%; font-variant-numeric: tabular-nums lining-nums; color: var(--c-sobre-oscuro); }
.fiscal__cifra--baja { color: var(--dato-baja-oscuro); }
.fiscal__texto { font: 400 var(--fs-1) / 1.45 var(--font-texto); }
.fiscal__fuente { font-size: var(--fs-0); color: var(--c-sobre-oscuro-2); }
.fiscal__grafico { margin-top: var(--s-7); }
.fiscal .fiscal__resultado { --macro-fondo: var(--c-noche); margin-top: var(--s-7); }
.fiscal__subtitulo { font: 850 var(--fs-3) / var(--lh-titulo-chico) var(--font-display); font-stretch: 75%; }

/* ═══ LÍNEA F: destacado en Transporte y vista propia ═══ */
.destacado-linea {
  --naranja-f: #FC6D03; --tinta-f: #fff;
  margin-top: var(--s-8); padding: var(--s-6); border-radius: 8px;
  color: var(--tinta-f); background: #0B0E11;
  border: 1px solid var(--c-vidrio-borde);
}
.destacado-linea__cartel { display: flex; align-items: center; gap: .3em; font: 900 clamp(1.8rem, 1.2rem + 2vw, 2.8rem) / 1.05 var(--font-display); font-stretch: 75%; }
.destacado-linea__cartel .linea-tiempo__insignia { font-size: .9em; }
.destacado-linea__texto { margin: var(--s-3) 0 var(--s-5); max-width: var(--ancho-texto); font: 400 var(--fs-1) / 1.45 var(--font-texto); color: rgb(255 255 255 / .82); }
.destacado-linea .boton--primario { background: var(--naranja-f); color: #111417; border-color: var(--naranja-f); }
.vista-linea { padding-top: var(--s-5); }
.vista-linea .linea-tiempo { margin-top: var(--s-4); }

/* Menú con 8 destinos (Fiscal y deuda, Línea F): entre 1024 y 1279 px se achica. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .menu__enlace { padding-inline: var(--s-2); font-size: .8rem; }
}

/* Recorridos reales del subte (capa de BA Data) de fondo en el cartel de la
   Línea F de Transporte: trazo negro tenue, a la derecha. */
.destacado-linea { position: relative; isolation: isolate; overflow: hidden; }
.destacado-linea__mapa { position: absolute; z-index: -1; top: -25%; right: -2%; width: min(62%, 600px); height: 150%; pointer-events: none; }
.destacado-linea__mapa path { fill: none; stroke: #FC6D03; stroke-opacity: .35; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@media (max-width: 767px) { .destacado-linea__mapa { width: 90%; right: -25%; opacity: .45; } }

/* Boleto del subte en pesos constantes (vista Línea F, debajo de la línea de tiempo). */
.boleto { margin-top: var(--s-8); padding-bottom: var(--s-8); }
.boleto__titulo { margin-top: var(--s-2); max-width: 24em; font: 850 var(--fs-4) / var(--lh-titulo) var(--font-display); font-stretch: 68%; }
.boleto__cifra { color: #FC6D03; }
.boleto__bajada { margin-top: var(--s-2); max-width: var(--ancho-texto); font: 400 var(--fs-1) / 1.45 var(--font-texto); color: var(--c-sobre-oscuro-2); }
.boleto__lienzo { margin-top: var(--s-2); }
.boleto__svg { display: block; width: 100%; height: auto; overflow: visible; }
.boleto__guia { stroke: var(--c-vidrio-borde); }
.boleto__eje { fill: var(--c-sobre-oscuro-2); font: 600 12px var(--font-display); }
.boleto__barra { fill: rgb(255 255 255 / .28); }
.boleto__barra--desde { fill: #FC6D03; }
.boleto__barra--activa { fill: #fff; }
.boleto__lector { margin-top: var(--s-5); min-height: 2.2em; font: 850 var(--fs-3) / 1.1 var(--font-display); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.boleto__lector-mes { color: var(--c-sobre-oscuro-2); }
.boleto__lector-valor { color: #FC6D03; }
.boleto__base { stroke: var(--c-sobre-oscuro-2); stroke-dasharray: 4 4; }

/* Fiscal y deuda: primero la situación fiscal (déficit + resultado 2016–2025), después la deuda. */
.fiscal__bloque { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--c-vidrio-borde); font: 850 var(--fs-3) / var(--lh-titulo-chico) var(--font-display); font-stretch: 75%; }
.fiscal__cifras--uno { max-width: 34rem; grid-template-columns: 1fr !important; }
@media (min-width: 1200px) { .fiscal__cifras--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fiscal .fiscal__resultado { margin-top: var(--s-5); }

.linea-tiempo__rotulo-pista { display: none; }
@media (max-width: 1023px) {
  .linea-tiempo--fijada .linea-tiempo__rotulo-pista {
    display: flex; align-items: center; gap: .35em; position: sticky; left: 0; margin-bottom: var(--s-5);
    font: 900 1.4rem / 1 var(--font-display); font-stretch: 75%; text-transform: uppercase;
  }
  .linea-tiempo__rotulo-pista .linea-tiempo__insignia { font-size: 1em; }
}

/* ═══ AVISO DE COOKIES (js/analitica.js) ═══
   Chico y abajo: nunca tapa la pantalla en el celular. Rechazar y Aceptar con el
   mismo peso (CLAUDE.md del estudio §21.1). */
.aviso-cookies { position: fixed; z-index: 30; left: var(--margen); right: var(--margen); bottom: var(--margen); max-width: 520px;
  display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-vidrio-borde); border-radius: var(--r);
  background: rgb(17 20 23 / .96); color: var(--c-sobre-oscuro); box-shadow: 0 8px 30px rgb(0 0 0 / .35); }
.aviso-cookies__texto { margin: 0; font: 400 var(--fs-ui) / 1.45 var(--font-display); font-stretch: 87%; }
.aviso-cookies__botones { display: flex; gap: var(--s-3); }
.aviso-cookies__botones .boton { flex: 1; }
.pie__cookies { padding: 0; min-height: var(--toque); border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }