@font-face{
  font-family:"DaVinci Sans";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fuentes/inter-latin.woff2) format("woff2");
}
@font-face{
  font-family:"DaVinci Serif";
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url(fuentes/source-serif-4-latin.woff2) format("woff2");
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --sans:"DaVinci Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif:"DaVinci Serif", Georgia, "Times New Roman", serif;

  --papel:#FFFFFF;
  --papel-2:#F5F4F1;
  --ink:#0D0D0E;
  --ink-2:#4E4E56;
  --ink-3:#6E6E76;
  --linea:#D6D3CC;
  --linea-2:#E9E7E2;
  --acento:#C80000;
  --acento-txt:#A30008;
  --acento-banda:#FF6B5E;
  --oro:#FFCE00;

  --banda:#0D0D0E;
  --banda-ink:#FFFFFF;
  --banda-ink-2:#B9B9C1;
  /* Tinta fija: el contorno de los rectángulos decorativos (el cuadradito del
     título del panel, la barra apilada, el cuadradito de cada hito). NO gira con
     el tema a propósito: dibujada con --ink, en oscuro el marco se volvía hueso. */
  --ink-fijo:#0D0D0E;
  --banda-linea:#2C2C33;

  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:72px; --e-9:112px; --e-10:160px;

  --ancho:1200px;
  --gutter:32px;
  --nav-h:60px;
}
/* El tema oscuro es de pantalla. En papel manda siempre la paleta clara: la hoja
   es blanca y el cuerpo ya se fuerza a tinta oscura (abajo, en IMPRESIÓN), así que
   con el tema oscuro los secundarios quedaban gris claro sobre blanco. Con esto el
   PDF sale igual desde cualquiera de los dos temas. */
@media screen{
[data-tema="oscuro"]{
  --papel:#0C0C0D;
  --papel-2:#131316;
  --ink:#F2F1EE;
  --ink-2:#B4B4BC;
  --ink-3:#8E8E96;
  --linea:#2E2E34;
  --linea-2:#232328;
  --acento:#FF5A4D;
  --acento-txt:#FF7A6E;
  --banda:#17171A;
  --banda-ink:#FFFFFF;
  --banda-ink-2:#A9A9B2;
  /* Mismo valor que en claro, a propósito: el marco de los rectángulos se queda
     en negro. No "arreglar" esto cambiándolo por --ink. */
  --ink-fijo:#0D0D0E;
  --banda-linea:#32323A;
}
} /* fin de @media screen: el tema oscuro no llega al papel */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:1px}

.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}

/* ============================================================
   BANDERA (filete tricolor, firma de la pieza)
   ============================================================ */
.bandera{position:fixed;top:0;left:0;right:0;height:8px;display:flex;z-index:80}
.bandera i{flex:1 1 33.333%}
.bandera i:nth-child(1){background:#0D0D0E}
.bandera i:nth-child(2){background:var(--acento)}
.bandera i:nth-child(3){background:var(--oro)}

/* ============================================================
   NAV  (negro: la estructura del informe; el contenido va en blanco)
   ============================================================ */
.nav{
  position:sticky;top:8px;z-index:70;
  border-bottom:1px solid var(--banda-linea);
}
.nav-in{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);
  height:var(--nav-h);display:flex;align-items:center;gap:var(--e-5);
}
.marca{display:flex;align-items:center;flex:0 0 auto}
/* Cada logo del header va a su sitio: los dos son enlaces externos, así que
   el bloque de marca ya no vuelve arriba (no se pueden anidar anclas). */
.marca a{flex:0 0 auto;text-decoration:none}
/* Los dos logos del header van gráficos y en versión blanca: la barra usa
   --banda en los dos temas, así que el switch no los afecta. Normalizados por
   altura, igual que los del pie. 34 px no es capricho: medido sobre el logo de
   AHK, abajo de eso el lockup (emblema + sigla + cuatro líneas de texto legal)
   se lee como una mancha gris y recién a 34 se reconoce la marca. */
.marca .m-logo{display:block;height:34px;width:auto;flex:0 0 auto}
.marca .m-ahk{
  display:block;height:34px;width:auto;flex:0 0 auto;
  margin-left:15px;padding-left:15px;border-left:1px solid var(--linea);
}
/* Con los dos logos a 34 px la marca ocupa 280 px: arriba de 900 hay lugar para
   el lockup completo, abajo se esconde el de AHK y queda solo da Vinci. */
@media(max-width:900px){.marca .l-ahk{display:none}}

.nav-anclas{
  margin-left:auto;display:flex;align-items:center;gap:var(--e-1);
  overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.nav-anclas::-webkit-scrollbar{display:none}
/* El enlace de vuelta al índice (sólo en las ediciones) comparte la piel de las
   anclas, pero vive fuera de `.nav-anclas`: ese grupo scrollea en horizontal y se
   enmascara por la derecha, así que adentro podría quedar fuera de vista. */
.nav-anclas a,.volver{
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.01em;
  color:var(--ink-2);padding:9px 11px;border-radius:7px;white-space:nowrap;
  border:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.nav-anclas a .nn{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:600;font-size:11.5px}
.nav-anclas a:hover,.volver:hover{color:var(--ink);border-color:var(--linea)}
.nav-anclas a[aria-current="true"]{color:var(--ink);border-color:var(--ink);font-weight:600}
.nav-anclas a[aria-current="true"] .nn{color:var(--acento-txt)}
.volver{flex:0 0 auto}

/* switch de tema */
.tema{
  flex:0 0 auto;appearance:none;background:none;border:0;padding:0;margin-left:var(--e-2);
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
}
.tema .pista{
  position:relative;width:46px;height:26px;border:1px solid #6C6C78;
  border-radius:999px;background:#34343D;
  transition:background .18s ease,border-color .18s ease;
}
.tema .bolita{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:999px;
  background:var(--banda-ink);color:var(--banda);
  transition:transform .18s ease,background .18s ease,color .18s ease;
  display:grid;place-items:center;
}
.tema .bolita svg{width:12px;height:12px}
.tema[aria-checked="true"] .pista{background:var(--banda-ink);border-color:var(--banda-ink)}
.tema[aria-checked="true"] .bolita{transform:translateX(20px);background:#0D0D0E;color:var(--banda-ink)}
.tema .sol,.tema .luna{display:none}
.tema[aria-checked="false"] .sol{display:block}
.tema[aria-checked="true"] .luna{display:block}

/* ============================================================
   PORTADA
   ============================================================ */
.portada{padding:var(--e-9) 0 var(--e-8)}
.portada-grid{display:grid;grid-template-columns:1fr;gap:var(--e-8)}
@media(min-width:980px){.portada-grid{grid-template-columns:7.2fr 4.8fr;gap:var(--e-9)}}

.kicker{
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acento-txt);margin:0 0 var(--e-5);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.kicker .sep{color:var(--linea);font-weight:400}
.kicker .en{color:var(--ink-3);letter-spacing:.13em}

h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(46px,7.2vw,86px);line-height:.98;letter-spacing:-.028em;
  margin:0;font-variant-numeric:tabular-nums;
}
h1 .anio{display:block}
h1 .anio em{font-style:normal;position:relative}

.lead{
  font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--ink-2);
  margin:var(--e-6) 0 0;max-width:34ch;font-weight:400;
}
.lead b{color:var(--ink);font-weight:600}
.nb{white-space:nowrap}

.etiquetas{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-6)}
.et{
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 12px;border:1px solid var(--linea);border-radius:7px;color:var(--ink-2);
  background:var(--papel);
}
.et.rojo{color:var(--acento-txt);border-color:currentColor}

/* índice */
.indice{list-style:none;margin:0;padding:0}
.indice .ih{
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:var(--e-3);border-bottom:1px solid var(--ink);
}
.indice li a{
  display:flex;align-items:baseline;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--linea-2);
  text-decoration:none;font-size:15px;color:var(--ink-2);
  transition:color .16s ease;
}
.indice li a:hover{color:var(--ink)}
.indice li a .nn{
  font-family:var(--serif);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--acento-txt);min-width:22px;
}
.indice li a .tt{font-weight:500}
.indice li:last-child a{border-bottom:0}

/* datos de portada */
.ficha{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--ink);margin-top:var(--e-8);
}
@media(min-width:700px){.ficha{grid-template-columns:repeat(4,1fr)}}
.ficha>div{padding:var(--e-5) var(--e-5) var(--e-5) 0;border-bottom:1px solid var(--linea)}
@media(min-width:700px){.ficha>div{border-bottom:0;border-right:1px solid var(--linea);padding-right:var(--e-5)}
.ficha>div+div{padding-left:var(--e-5)}
.ficha>div:last-child{border-right:0}}
.ficha .fk{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;
}
.ficha .fv{margin:0;font-size:15px;line-height:1.42;color:var(--ink);font-weight:500}
.ficha .fv small{display:block;font-size:13px;font-weight:400;color:var(--ink-2);line-height:1.45;margin-top:3px}
.ficha a{color:var(--acento-txt);text-decoration:none;border-bottom:1px solid currentColor}

/* ============================================================
   RETRATOS (quiénes coordinan la red)
   ============================================================ */
/* El retrato a la izquierda y el texto a la derecha, alineados por el centro; en
   celular se apilan y el retrato se achica. La foto va cuadrada, con el radio que
   usa el resto de la pieza, y el rol en el color del acento, como los kickers. */
.personas{display:grid;grid-template-columns:1fr;gap:var(--e-7);margin-top:var(--e-6)}
@media(min-width:760px){.personas{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-8);max-width:840px}}
/* La ficha entera es un enlace a la persona, foto y texto, así que la grilla vive en el
   enlace y la figura queda de contenedor. El color y el subrayado se neutralizan para que la
   ficha se lea igual que antes de ser un enlace. */
.persona{margin:0}
.persona a{display:grid;grid-template-columns:96px 1fr;gap:var(--e-4);align-items:center;
  color:inherit;text-decoration:none}
@media(min-width:520px){.persona a{grid-template-columns:132px 1fr;gap:var(--e-5)}}
.persona a:hover h3,.persona a:focus-visible h3{color:var(--acento-txt)}
.persona a:hover .retrato{opacity:.92}
.persona .retrato{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  border-radius:12px;border:1px solid var(--linea);background:var(--papel-2);
}
.persona h3{margin:0;font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.persona .rol{margin:6px 0 0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acento-txt)}

/* ============================================================
   SECCIONES
   ============================================================ */
section.bloque{padding:var(--e-9) 0}
section.bloque.compacta{padding:var(--e-8) 0}
.banda{background:var(--banda);color:var(--banda-ink);
  --ink:var(--banda-ink);--ink-2:var(--banda-ink-2);--ink-3:var(--banda-ink-2);
  --linea:var(--banda-linea);--linea-2:var(--banda-linea);--acento-txt:var(--oro);
  --papel:var(--banda);
}
.clara{background:var(--papel-2)}

/* El título de sección queda pegado abajo de la barra de navegacion mientras
   dura su sección. Se pega el .cab entero y no un envoltorio interno: un sticky
   necesita recorrido, y el padre del .cab es el .wrap, que dura toda la sección.
   El 8 px es la franja tricolor fija de arriba.
   La regla de 2 px viaja con el título, así que al quedar pegado se ve el filete
   justo abajo de la barra. */
.cab{
  position:sticky;top:calc(9px + var(--nav-h));z-index:60;
  display:grid;grid-template-columns:1fr;gap:var(--e-2);
  border-top:2px solid var(--ink);padding:var(--e-4) 0 var(--e-3);
  background:var(--cab-fondo);
  /* el aire de abajo sigue siendo --e-7: el padding entra en el bloque pegado,
     así que se descuenta del margen */
  margin-bottom:calc(var(--e-7) - var(--e-3));
}
@media(min-width:760px){.cab{grid-template-columns:auto 1fr;gap:0 var(--e-5);align-items:baseline}}
/* El fondo del bloque pegado tiene que ser el de su sección: si no, lo que pasa
   por detrás se lee a través. */
/* La curva de la sombra no es pareja a propósito: una sombra de verdad entrega casi
   toda su fuerza en los primeros píxeles y después se apaga despacio. Un degradado
   lineal reparte el tinte en todo el alto y se lee como una banda sucia, no como una
   sombra. Medido en la sección gris: con la curva pareja el fondo bajaba 8 % de
   corrido; acá baja 12 % en el borde y vuelve al color de la sección en 22 px. */
section.bloque{
  --cab-fondo:var(--papel);
  --cab-sombra:linear-gradient(to bottom,
    rgba(13,13,14,.14) 0, rgba(13,13,14,.065) 18%,
    rgba(13,13,14,.02) 48%, transparent 100%);
}
section.bloque.clara{--cab-fondo:var(--papel-2)}
/* Sobre la banda negra una sombra oscura no existe: ahí la sombra se apaga y queda
   solo el degradado del color de fondo, que es el que hace pasar el contenido por
   detrás (medido: el texto blanco se disuelve hasta la mitad en 12 px). */
section.bloque.banda{
  --cab-fondo:var(--banda);
  --cab-sombra:linear-gradient(to bottom, transparent, transparent);
}


/* Sombra del título pegado: dos capas, 22 px, que aparecen solo con la clase
   .pegado (la pone el script midiendo si el título quedó en la línea).
   La de arriba es la sombra propiamente dicha: un tinte de tinta que da
   profundidad sobre papel y sobre el gris. La de abajo es el color de fondo de la
   sección, que disuelve el contenido que pasa por detrás y es la única que
   funciona sobre la banda negra, donde la sombra oscura no existe y por eso
   --cab-sombra se apaga.
   La máscara horizontal es la que evita el corte a los costados: el pseudo mide
   justo el ancho del bloque, así que sin ella la sombra arrancaba y terminaba con
   un borde vertical duro (medido: 255 de fondo y 237 de golpe en el borde del
   bloque). Con la máscara, los 48 px de cada punta se apagan en degradado y no
   queda línea. Son pseudo-elementos absolute: no tocan el flujo, el alto ni el
   contraste. */
/* Son dos capas y van en dos pseudo-elementos, no en uno, porque la máscara que
   apaga la sombra en las puntas también apagaría la disolución: en los últimos
   48 px de cada lado el contenido volvería a aparecer de golpe bajo el título.
   La sombra se apaga en las puntas; la disolución queda pareja en toda la línea.
   El tinte va en ::before con z-index para quedar por encima de la disolución. */
.cab::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:22px;z-index:0;
  background-image:linear-gradient(to bottom, var(--cab-fondo) 0%, transparent 100%);
  pointer-events:none;opacity:0;transition:opacity .22s ease;
}
.cab::before{
  content:"";position:absolute;left:0;right:0;top:100%;height:22px;z-index:1;
  background-image:var(--cab-sombra);
  -webkit-mask-image:linear-gradient(to right,
    transparent 0, rgba(0,0,0,.45) 16px, #000 48px,
    #000 calc(100% - 48px), rgba(0,0,0,.45) calc(100% - 16px), transparent 100%);
  mask-image:linear-gradient(to right,
    transparent 0, rgba(0,0,0,.45) 16px, #000 48px,
    #000 calc(100% - 48px), rgba(0,0,0,.45) calc(100% - 16px), transparent 100%);
  pointer-events:none;opacity:0;transition:opacity .22s ease;
}
.cab.pegado::after,.cab.pegado::before{opacity:1}
/* La nota de la sección va fuera del bloque pegado: si viajara con el, en la 03 y
   la 05 el pegajoso comeria casi un cuarto de la pantalla. Cuando hay nota, el
   título la deja pegada y el aire grande pasa abajo. */
.cab:has(+ .nota){margin-bottom:0}
.cab .n{
  font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--acento-txt);font-variant-numeric:tabular-nums;
}
.cab h2{
  font-family:var(--serif);font-weight:600;letter-spacing:-.014em;
  font-size:clamp(24px,3vw,34px);line-height:1.1;margin:0;
}
/* Hermana del .cab, no hija: es la única .nota de la pieza. */
.nota{
  font-size:13.5px;color:var(--ink-2);margin:0 0 var(--e-7);
  max-width:62ch;
}

.doscol{display:grid;grid-template-columns:1fr;gap:var(--e-6)}
@media(min-width:900px){.doscol{grid-template-columns:repeat(2,1fr);gap:var(--e-8)}}

/* declaración (propósito) */
.declaracion{
  font-family:var(--serif);font-weight:500;letter-spacing:-.014em;
  font-size:clamp(24px,3.4vw,40px);line-height:1.24;margin:0;max-width:26ch;
}
.declaracion .d{color:var(--acento-txt)}
.texto{font-size:17px;line-height:1.68;color:var(--ink-2);margin:0;max-width:60ch}
.texto b{color:var(--ink);font-weight:600}

/* ============================================================
   CIFRAS
   ============================================================ */
.cifras{margin-top:var(--e-5)}
.cifras-gr{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--linea)}
@media(min-width:760px){.cifras-gr{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.cifras-gr.dos{grid-template-columns:repeat(2,1fr)}}
.cifra{padding:var(--e-6) var(--e-5) var(--e-6) 0;border-bottom:1px solid var(--linea)}
@media(min-width:760px){
  .cifra{border-bottom:0;border-right:1px solid var(--linea);padding-right:var(--e-5)}
  /* El filete va como border-right de la celda anterior, así que sin padding-left
     propio el texto de toda celda que no es la primera arranca sobre la línea
     (medido: 0 px de hueco). Mismo aire de los dos lados del filete. */
  .cifra+.cifra{padding-left:var(--e-5)}
  .cifras-gr .cifra:last-child{border-right:0}
}
.cifra .num{
  font-family:var(--serif);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(46px,5.4vw,68px);line-height:.94;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:.12em;margin:0;
}
.cifra .num .fl{width:.42em;height:.42em;flex:0 0 auto;color:var(--oro)}
.cifra .num .pc{font-size:.52em;font-weight:500;margin-left:.02em;align-self:flex-start;margin-top:.18em}
.cifra.baja .num{color:var(--banda-ink)}
.cifra.baja .num .fl{color:var(--acento-banda)}
.cifra .lbl{
  margin:var(--e-4) 0 0;font-size:15.5px;line-height:1.42;font-weight:500;
  color:var(--ink);max-width:22ch;
}
.cifra .lbl small{display:block;color:var(--ink-2);font-weight:400;font-size:13.5px;margin-top:4px}
.leyenda{
  display:flex;align-items:center;gap:var(--e-5);flex-wrap:wrap;
  margin-top:var(--e-6);padding-top:var(--e-4);border-top:1px solid var(--linea);
  font-size:12.5px;color:var(--ink-2);
}
.leyenda .li{display:flex;align-items:center;gap:8px}
.leyenda .li svg{width:13px;height:13px;flex:0 0 auto}
.leyenda .li.sube svg{color:var(--oro)}
.leyenda .li.baja svg{color:var(--acento-banda)}
.nota-pie{
  font-size:12.5px;color:var(--ink-2);margin:var(--e-5) 0 0;
  padding-left:var(--e-4);border-left:1px solid var(--linea);max-width:74ch;
}

/* ============================================================
   BARRAS APILADAS (perfil / origen)
   ============================================================ */
.panel h3{
  font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.012em;
  margin:0 0 var(--e-5);display:flex;align-items:baseline;gap:10px;
}
.panel h3 .sq{width:10px;height:10px;background:var(--oro);border:1px solid var(--ink-fijo);flex:0 0 auto}
.stack{
  display:flex;height:56px;border:1px solid var(--ink-fijo);overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.stack span{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:clamp(12px,1.7vw,19px);font-weight:600;letter-spacing:-.01em;
  color:#fff;min-width:0;overflow:hidden;white-space:nowrap;
}
.stack span b{font-weight:600}
/* El número va dentro de un <span class="cont">, que es un span más: la regla de
   arriba (.stack span, color blanco) lo alcanzaba directo y le ganaba a la
   herencia, así que en oscuro el número quedaba blanco sobre el tramo claro
   mientras el % (que no es span) sí tomaba el color del tramo. Medido: 111 px
   claros en la línea del número. Acá se le devuelve la herencia y el número toma
   el color del tramo, como el %. */
.stack span .cont{color:inherit}
.stack .s1{background:var(--acento)}
.stack .s2{background:#0D0D0E}
.stack .s3{background:var(--oro);color:#0D0D0E}
.leg{list-style:none;margin:var(--e-5) 0 0;padding:0}
.leg li{
  display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--linea-2);font-size:14.5px;color:var(--ink-2);
}
.leg li:last-child{border-bottom:0}
.leg .dot{width:10px;height:10px;flex:0 0 auto;transform:translateY(-1px)}
.leg .d1{background:var(--acento)}
.leg .d2{background:#0D0D0E}
.leg .d3{background:var(--oro)}
/* Los tramos de la barra apilada y los puntos de la leyenda cambian con el tema.
   El tema es de pantalla: en papel manda la versión clara, igual que los tokens.
   Sin este @media, imprimir desde oscuro sacaba los tramos claros (medido: 21.061
   píxeles distintos en la página 4 del PDF contra la impresión desde claro). */
@media screen{
[data-tema="oscuro"] .leg .d1{background:#FF6B5E}
[data-tema="oscuro"] .leg .d2{background:#F2F1EE}
[data-tema="oscuro"] .stack .s1{background:#FF6B5E;color:#0D0D0E}
[data-tema="oscuro"] .stack .s2{background:#F2F1EE;color:#0D0D0E}
} /* fin de @media screen */
.leg .val{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);font-size:14px}

/* en pantallas angostas, el rótulo de los tramos chicos se apoya solo en la leyenda */
@media(max-width:620px){.stack .chico b{display:none}}

/* ============================================================
   HOJA DE RUTA
   ============================================================ */
.ruta{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--linea)}
@media(min-width:900px){.ruta{grid-template-columns:repeat(3,1fr)}}
.hito{padding:var(--e-6) var(--e-5) var(--e-7) 0;border-bottom:1px solid var(--linea)}
@media(min-width:900px){
  .hito{border-bottom:0;border-right:1px solid var(--linea);padding-right:var(--e-5)}
  .hito+.hito{padding-left:var(--e-5)}
  .hito:last-child{border-right:0}
}
.hito .anio{
  font-family:var(--serif);font-weight:600;font-size:38px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);
  display:flex;align-items:center;gap:11px;margin:0 0 var(--e-4);
}
.hito .anio .sq{width:10px;height:10px;background:var(--oro);border:1px solid var(--ink-fijo);flex:0 0 auto}
.hito .org{
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acento-txt);margin:0 0 var(--e-2);
}
.hito .org .bi{display:block;color:var(--ink-3);letter-spacing:.06em;text-transform:none;font-weight:400;font-size:12px;margin-top:3px}
.hito p.tx{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.hito p.tx b{color:var(--ink);font-weight:600}
/* El "leer más" de cada hito: un enlace chico en el color del acento, con el filete abajo,
   para que se lea como salida sin competir con el texto del hito. */
.hito .mas{margin:var(--e-4) 0 0}
.hito .mas a{font-size:13px;font-weight:600;color:var(--acento-txt);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.hito .mas a:hover{color:var(--ink)}

/* ============================================================
   TOP 5
   ============================================================ */
.top{list-style:none;margin:0;padding:0;counter-reset:n}
.top li{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--e-2) var(--e-5);
  align-items:center;border-top:1px solid var(--linea);
  padding:var(--e-5) 0;
}
.top li:last-child{border-bottom:1px solid var(--linea)}
.top .idx{
  font-family:var(--serif);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--acento-txt);letter-spacing:-.01em;
}
.top .nombre{
  font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.6vw,29px);
  letter-spacing:-.016em;line-height:1.15;
}
.top .meta{font-size:12.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
/* El nombre puede ser un enlace (los emprendimientos): hereda el estilo del titular y no
   subraya, así la fila se lee igual que la de los sectores y el enlace se anuncia solo. */
.top .nombre a{color:inherit;text-decoration:none}
.top .nombre a:hover{color:var(--acento-txt)}
.top li{transition:border-color .16s ease}
.top li:hover{border-color:var(--acento)}

/* ============================================================
   EXPLORAR + PIE
   ============================================================ */
.explorar{display:grid;grid-template-columns:1fr;gap:var(--e-6);align-items:end}
@media(min-width:860px){.explorar{grid-template-columns:1fr auto}}
.explorar .lema{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(24px,3vw,34px);letter-spacing:-.015em;line-height:1.2;margin:0;
}
.enlaces{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.enlaces a{
  text-decoration:none;font-size:14px;font-weight:500;color:var(--ink);
  border:1px solid var(--linea);border-radius:8px;padding:11px 15px;
  display:flex;align-items:center;gap:9px;min-height:44px;
  transition:border-color .16s ease,background .16s ease;
}
.enlaces a:hover{border-color:var(--ink);background:var(--papel-2)}
.enlaces a svg{width:15px;height:15px;color:var(--acento)}

.pie{background:var(--banda);color:var(--banda-ink);
  --ink:var(--banda-ink);--ink-2:var(--banda-ink-2);--ink-3:var(--banda-ink-2);
  --linea:var(--banda-linea);--linea-2:var(--banda-linea);
  padding:var(--e-8) 0 var(--e-6)}
.pie-gr{display:grid;grid-template-columns:1fr;gap:var(--e-7);border-top:1px solid var(--banda-linea);padding-top:var(--e-6)}
@media(min-width:820px){.pie-gr{grid-template-columns:1.1fr 1fr .8fr;gap:var(--e-8)}}
.pie .pk{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--banda-ink-2);margin:0 0 var(--e-5);
}
/* Más aire entre los logos del pie: era --e-5 (24 px) y quedaban apretados. */
.marcas{display:flex;flex-direction:column;gap:var(--e-6)}
.marca-slot{display:flex;align-items:center;gap:14px;min-height:44px}
/* Los logos llegan en blanco, recortados al ras y con transparencia. Se
   normalizan por ALTURA (no por ancho) para que la fila se lea como un
   conjunto: el ancho lo fija la proporcion de cada marca, que va de 3,5:1 a
   6,2:1. max-width:100% para que en pantallas angostas encoja sin desbordar. */
.marca-slot .logo{
  flex:0 0 auto;display:block;
  height:44px;width:auto;max-width:100%;
}
/* Los cuatro logos del pie también son enlaces. El ancla toma el lugar del
   logo en la fila y con display:flex no agrega el hueco de la línea base,
   así que la geometria de la fila no cambia. */
.marca-slot a{flex:0 0 auto;display:flex;align-items:center;text-decoration:none}
/* Las marcas de "Lo hacen posible": son seis, así que van en grilla de tres por fila en
   escritorio y de dos en celular. Apiladas como las de Organizan y Apoyan, que son dos, el
   pie se estira de más; y todas en una sola fila quedan tan chicas que no se leen. */
.pie .posible{margin-top:var(--e-8)}
.pie .posible .marcas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e-6) var(--e-8);align-items:center}
@media(min-width:760px){.pie .posible .marcas{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Las marcas, una vez sorteado el orden: cada una entra con el retardo que le puso el script
   según su posición en la grilla, así el despliegue sigue el orden que se ve en pantalla.
   Todo cuelga de .sorteado, que el script sólo agrega cuando sorteó: con ?anim=0 las marcas
   van visibles y quietas, que es lo que necesitan las capturas y el PDF. */
.pie .posible.sorteado .marca-slot{
  opacity:0;transform:translateY(15px);
  transition:opacity .45s cubic-bezier(.22,.61,.36,1),
             transform .45s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--re,0ms);
}
.pie .posible.sorteado.visto .marca-slot{opacity:1;transform:none}
/* El ancho lo pone el HTML, uno por marca, y el alto sale de la proporción del archivo: así la
   marca nunca se deforma, tampoco cuando el ancho de la celda la obliga a achicarse. */
.pie .posible .logo{height:auto;max-width:100%}
.pie .contacto a{color:var(--oro);text-decoration:none;border-bottom:1px solid currentColor;font-weight:500}
.pie-legal{
  display:flex;flex-wrap:wrap;gap:var(--e-4) var(--e-5);align-items:center;
  margin-top:var(--e-8);padding-top:var(--e-5);border-top:1px solid var(--banda-linea);
  font-size:12px;color:var(--banda-ink-2);
}
.pie-legal .fin{margin-left:auto;display:flex;align-items:center;gap:9px}
/* Crédito de desarrollo. Texto chico y sin color de acento: tiene que leerse si
   se lo busca, no competir con las marcas del pie. */
.credito{margin:var(--e-4) 0 0;font-size:11.5px;line-height:1.4;color:var(--banda-ink-2)}
.credito a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.credito a:hover{color:var(--banda-ink)}

/* ============================================================
   ENTRADA AL SCROLL Y CONTADORES
   El estado oculto cuelga de .anim en la raíz, y .anim lo pone el script del
   head solo cuando hay IntersectionObserver, el usuario no pidió movimiento
   reducido y la URL no trae ?anim=0. Sin JS, con movimiento reducido, en papel
   o con la bandera, no existe: el informe se lee entero y con los valores
   finales. Nada del contenido depende de que una animación ocurra.
   ============================================================ */
.ap{
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--re,0ms);
}
.anim .ap{opacity:0;transform:translateY(15px)}
.anim .ap.visto{opacity:1;transform:none}

/* la barra apilada se descubre de izquierda a derecha. El recorte no toca el
   layout, así que el texto de los tramos no se deforma ni se corre. */
.stack{transition:clip-path .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--re,0ms)}
.anim .stack{clip-path:inset(0 100% 0 0)}
.anim .stack.visto{clip-path:inset(0 0 0 0)}

/* el número se reserva el ancho del valor final (lo mide el script) para que
   el símbolo % no se corra mientras las cifras crecen */
.cont{display:inline-block}

@media (prefers-reduced-motion: reduce){
  .ap,.stack{transition:none}
  .cab::after,.cab::before{transition:none}
  .anim .ap,.anim .stack{opacity:1;transform:none;clip-path:none}
  .pie .posible.sorteado .marca-slot{transition:none;opacity:1;transform:none}
}
@media print{
  .ap,.stack{transition:none;transition-delay:0s}
  .anim .ap,.anim .stack{opacity:1 !important;transform:none !important;clip-path:none !important}
  .pie .posible.sorteado .marca-slot{transition:none;transition-delay:0s;opacity:1 !important;transform:none !important}
}

/* ============================================================
   CELULAR
   ============================================================ */
@media(max-width:760px){
  :root{--gutter:20px}
  body{font-size:16px}
  .portada{padding:var(--e-8) 0 var(--e-7)}
  section.bloque{padding:var(--e-8) 0}
  .nav-in{gap:var(--e-3);padding-right:12px}
  .marca .m-logo{height:22px}
  .nav-anclas a{padding:9px 8px;font-size:12.5px;gap:5px}
  .nav-anclas a .nn{margin-right:0}
  .indice{margin-top:var(--e-2)}
  .stack{height:50px}
  .stack span{font-size:15px}
  .top li{grid-template-columns:auto 1fr;gap:6px var(--e-4);padding:var(--e-4) 0}
  .top .meta{grid-column:2;text-transform:none;letter-spacing:.02em;font-size:12.5px}
  .cifra{padding:var(--e-5) 0}
  .hito{padding:var(--e-5) 0 var(--e-6)}
  .explorar{gap:var(--e-5)}
  .enlaces a{flex:1 1 46%;justify-content:center}
}

/* ============================================================
   IMPRESIÓN / PDF  (A4 vertical, paneles negros a sangre)
   ============================================================ */
@page{size:A4;margin:14mm 13mm}
@media print{
  :root{--ancho:100%;--gutter:0px}
  /* Los contenedores con canto visible —las dos secciones negras y el pie— llevan aire
     adentro. En papel el gutter de la pantalla se anula, así que su contenido arrancaba
     justo en el canto del panel: medido en el PDF, 0 px, con el título y las cifras
     pegados al borde izquierdo. Se les devuelve el aire en la misma proporción que tiene
     en pantalla (32 px sobre un ancho de 1100, un 2,9 %), que en 184 mm de caja son 5 mm. */
  .banda .wrap,.clara .wrap,.pie .wrap{padding-left:5mm;padding-right:5mm}
  html,body{background:#fff;color:#0D0D0E;font-size:9.5pt}
  .bandera{position:static;height:5mm}
  .nav,.enlaces,.tema{display:none !important}
  .banda,.pie{color:#fff !important}
  section.bloque{padding:7mm 0;break-inside:auto}
  .bloque.banda,.cab,.cifra,.cifras-gr,.hito,.panel,.leyenda,.nota-pie,.top li,.marca-slot{
    break-inside:avoid;
  }
  /* en papel el título no se pega: va en su lugar, una sola vez, sin sombra */
  .cab{position:static;background:none}
  .cab::after,.cab::before{display:none}
  .portada{padding:0 0 8mm;break-after:page}
  #resultados,.pie{break-before:page}
  h1{font-size:30pt;line-height:1}
  .lead{font-size:11pt;margin-top:5mm}
  .declaracion{font-size:17pt}
  .cab{margin-bottom:6mm}
  .cab h2{font-size:17pt}
  .texto{font-size:10pt}
  .portada-grid{gap:14mm}
  .indice li a{padding:2mm 0;font-size:9.5pt}
  .ficha>div{padding:3mm 4mm 3mm 0}
  .ficha .fv{font-size:9pt}
  .cifra{padding:4mm 5mm 4mm 0}
  .cifra .num{font-size:28pt}
  .cifra .lbl{font-size:9pt;margin-top:2.5mm}
  .leyenda{margin-top:4mm;padding-top:3mm}
  .nota-pie{font-size:8.5pt;margin-top:4mm}
  .stack{height:12mm}
  .hito{padding:5mm 5mm 5mm 0}
  .hito .anio{font-size:20pt;margin-bottom:3mm}
  .hito p.tx{font-size:9pt}
  .hito .mas a{color:var(--ink);border-bottom:0}
  .top li{padding:3mm 0}
  .top{break-inside:avoid}
  .top .nombre{font-size:15pt}
  .lema{font-size:15pt}
  .pie{padding:10mm 0 8mm}
  .pie-gr{gap:10mm;padding-top:6mm}
  a{text-decoration:none}
}

/* ============================================================
   MENÚ DE SECCIONES  (desplegable nativo en celular)

   Abajo de 760 px las seis secciones no entran en la barra: iban en un grupo
   scrolleable que recortaba contra la máscara y dejaba secciones invisibles.
   Ahora van dentro de un <details> y se abren con la hamburguesa. Es nativo: sin
   JS funciona igual, y el estado abierto/cerrado lo anuncia el navegador solo
   (aria-expanded). El script únicamente agrega que se cierre al elegir sección.
   Este bloque va al final del archivo a propósito: pisa las reglas de
   .nav-anclas de la sección CELULAR, que son anteriores.
   ============================================================ */
.secciones > summary{
  list-style:none;cursor:pointer;border-radius:7px;
  width:44px;height:44px;display:none;place-items:center;
}
.secciones > summary::marker{content:""}
.secciones > summary::-webkit-details-marker{display:none}
.secciones > summary:hover{background:rgba(255,255,255,.08)}
.barras{display:grid;gap:4px;width:18px}
.barras i{
  display:block;height:2px;border-radius:2px;background:var(--banda-ink);
  transition:transform .18s ease,opacity .18s ease;
}
/* abierto: las tres barras pasan a equis, sin mover el botón */
.secciones[open] > summary .barras i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.secciones[open] > summary .barras i:nth-child(2){opacity:0}
.secciones[open] > summary .barras i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Desktop: el mismo markup se despliega siempre. Van las dos formas de destapar
   el contenido de un details cerrado, porque cada motor lo esconde distinto:
   display:none en los hijos (Safari, Firefox, Chrome viejo) o el pseudo
   ::details-content (Chromium 131+). Con las dos reglas el resultado es idéntico
   en todos: las anclas vuelven a ser hijas del nav, donde estaban. */
@media(min-width:761px){
  .secciones{display:contents}
  .secciones::details-content{display:contents}
  .secciones > summary{display:none}
  .secciones > .nav-anclas{display:flex}
}

@media(max-width:760px){
  .secciones{margin-left:auto}
  .secciones > summary{display:grid}
  .secciones[open] .nav-anclas{animation:desplegar .18s ease-out}
  /* El panel cuelga del header (sticky, o sea bloque contenedor), no del botón:
     por eso left:0/right:0/top:100% son el ancho y el pie de la barra. */
  .nav-anclas{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;
    margin:0;padding:var(--e-2) var(--gutter) var(--e-3);
    overflow:visible;background:var(--banda);
    border-bottom:1px solid var(--banda-linea);
    -webkit-mask-image:none;mask-image:none;
  }
  .nav-anclas a{padding:13px 8px;font-size:14px;border-radius:0;gap:var(--e-2)}
  .nav-anclas a .nn{min-width:24px;margin-right:0}
  /* en columna, el borde del enlace activo se lee como un cajón suelto */
  .nav-anclas a[aria-current="true"]{border-color:transparent}
}
@keyframes desplegar{from{opacity:0;transform:translateY(-6px)}}

@media (prefers-reduced-motion: reduce){
  .barras i{transition:none}
  .secciones[open] .nav-anclas{animation:none}
}