/* ar-cobro — hoja única del sitio.
 *
 * IDENTIDAD. El nicho tiene una forma que la gente ya reconoce: el casillero con la fecha,
 * que ANSES dibuja en azul marino. Tomamos la forma y NO el color: clonar el azul del
 * Estado sería, además de desleal, exactamente el riesgo de «dominio-imitación» que abrió
 * el spam update de agosto. De ahí el vino, que no usa ni ANSES ni ningún otro sitio del
 * portfolio (mx-semanas es verde petróleo + ámbar, ar-dni ámbar, ar-co azul).
 *
 * PÚBLICO. El segmento que más creció es jubilados y pensionados, y el otro grande es AUH.
 * Es gente mayor y gente que entra desde un celular barato. Por eso: cuerpo de 17px, alto
 * contraste, nada de gris claro sobre blanco, botones grandes, y cero animación decorativa.
 *
 * JERARQUÍA. La fecha es el elemento más grande de la página, siempre. Después el monto.
 * Todo lo demás es soporte.
 */

/* ---------- 1. Tokens ---------- */
/* ── La fuente, auto-hospedada ──────────────────────────────────────────────────────────
   Archivo es una VARIABLE FONT: un solo archivo cubre los pesos 400 a 700, así que esto son
   34,9 KB para todo el sitio. El subconjunto es el `latin` de Google (U+0000-00FF), que
   incluye las tildes y la ñ del español.
   `font-display:optional` + preload en layout.php (convención del portfolio,
   sb-docs/conventions/fuentes-self-hosted.md): si la fuente no llegó al primer paint se queda
   el fallback y no hay swap, así que no puede haber el CLS de 0,155 que daba Google Fonts.
   El fallback de métricas ajustadas de abajo queda como red (sólo actúa en Windows/Mac: en
   Android/Linux `local("Arial")` no existe y la regla se descarta). */
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight:400 700;   /* el rango de la variable */
  font-style:normal;
  font-stretch:100%;
  font-display:optional;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* El fallback, con las métricas acercadas a Archivo para que el swap no reflowee. Los valores
   salen de comparar la altura de x y el ancho medio contra Arial/Helvetica. */
@font-face{
  font-family:"Archivo fb";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:97%;
  ascent-override:92%;
  descent-override:24%;
  line-gap-override:0%;
}

:root{
  /* ═══ Sistema de diseño ════════════════════════════════════════════════════════════════
     Portado del de mx-afore, con la paleta de este sitio. Lo que se trajo no son colores:
     es la ESCALA. Antes había un solo radio (6 px), una sola sombra y dos superficies, y
     por eso todo se veía plano y austero, más cerca de un documento que de un producto.
     Ahora hay una escala de radios, tres niveles de elevación, superficies teñidas y una
     familia semántica con su fondo y su borde. Referencia: mx-afore/assets/css/app.css §1
     y mx-afore/docs/informe-diseno-2026.md. */

  /* Marca: vino. El casillero de la fecha, las bandas y los títulos. */
  --vino:#6E1F32; --vino-l:#8F2C43; --vino-d:#4E1424; --vino-br:#A8385A;
  --vino-bg:#F7EDEF; --vino-bd:#E6CDD4;

  /* Acción: verde. Es el monto y lo disponible, nunca decorativo.
     `-t` es el verde para TEXTO sobre fondo claro; `-o`, el verde sobre fondo oscuro. */
  --verde:#166B42; --verde-d:#0F4E30; --verde-t:#125A37; --verde-o:#7FD3A6;
  --verde-bg:#E6F2EB; --verde-bg-2:#F3F9F5; --verde-bd:#BEDECD;

  /* Semánticos. Cada uno con su fondo y su borde: un aviso es una CAJA, no un color de
     texto suelto. Es lo que permite los cinco tipos de `.bloque` sin escribir hex a mano. */
  --ok:#166B42;   --ok-bg:#E9F4EE;   --ok-bd:#C3E1D1;
  --info:#1D5AA8; --info-bg:#EDF3FB; --info-bd:#CCDDF2;
  --alerta:#9A4416; --alerta-bg:#FBEDE4; --alerta-bd:#F0D3BE;
  --grave:#A3271F; --grave-bg:#FBEBE9; --grave-bd:#F0CBC7;
  --tip:#6B4BA8;  --tip-bg:#F3EFFA;  --tip-bd:#DCD1EF;

  /* ⭐⭐ SUPERFICIES de marca, separadas de los tokens de marca de arriba.
     `--vino` y `--verde` son colores de TEXTO: se invierten con el tema, porque en oscuro tienen
     que leerse sobre el papel oscuro y por eso valen rosa y verde claros. Una cabecera de tabla,
     un botón, el hero y los 27 fondos como ellos los usaban como SUPERFICIE, y en modo oscuro
     quedaban blanco sobre rosa claro: 2,51:1, menos de la mitad del mínimo AA.
     Estos tokens son la superficie y NO se invierten: una superficie de marca es oscura en los
     dos temas —en oscuro, apenas más clara que el papel para despegarse de él— y el texto encima
     es claro en los dos. Es también la decisión de diseño correcta: en un tema oscuro, un bloque
     grande y brillante es exactamente lo que nadie espera. */
  --marca-l:#8F2C43; --marca:#6E1F32; --marca-d:#4E1424;
  --marca-verde:#166B42; --marca-alerta:#9A4416; --marca-neutro:#6B5F62;
  --sobre-marca:#fff; --sobre-marca-2:#F0DDE2;

  /* Superficies. El fondo de página está TEÑIDO —no es blanco— y las tarjetas flotan
     encima: es lo que da profundidad sin una sola sombra dura. `--tile` es el relleno
     teñido de marca de los azulejos de icono. */
  --papel:#F7F3F2; --tarjeta:#FFFFFF; --papel-2:#FCF9F8; --tile:#F4EAEC;
  --tinta:#241C1E; --tinta-2:#4A3F42; --gris:#6B5F62; --gris-cl:#8A7E81;
  --linea:#E7DEDE; --linea-2:#F2ECEC;

  /* Forma. La escala completa: 6 en barras, 10 en controles chicos, 12 en botones,
     14 por defecto, 16 en tarjetas, 18 en paneles, 20 en bloques grandes, 999 en píldoras. */
  --r-bar:6px; --r-s:10px; --r-btn:12px; --radio:14px; --r-l:16px; --r-xl:18px;
  --r-cta:20px; --r-pill:999px;

  /* Elevación en tres niveles. Todas tintadas con el vino, no con negro puro: una sombra
     gris sobre un fondo cálido se ve sucia. */
  --sh-1:0 1px 2px rgba(78,20,36,.05);
  --sh-2:0 1px 2px rgba(78,20,36,.05),0 12px 30px -18px rgba(78,20,36,.22);
  --sh-3:0 20px 44px -26px rgba(78,20,36,.55);
  --sh-vino:0 10px 22px -12px rgba(110,31,50,.55);
  --sh-verde:0 10px 22px -14px rgba(22,107,66,.55);
  --sombra:var(--sh-2);            /* alias heredado */

  --ancho:1120px;
  --lectura:68ch;
  color-scheme:light;
}
/* Modo oscuro: los tres estados. El bare :root ya definió la paleta clara completa; acá
   sólo se redefinen tokens, nunca se estilan componentes (si un color vive sólo dentro de
   un media query, en el estado «sistema» sin marcar no se aplica y sale texto de un tema
   sobre el fondo del otro). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --vino:#E4899F; --vino-l:#CE7288; --vino-d:#F2B4C2; --vino-br:#EE9DB1;
    --vino-bg:#33161D; --vino-bd:#4C2630;
    --verde:#6DC79A; --verde-d:#8FD9B4; --verde-t:#8FD9B4; --verde-o:#8FD9B4;
    --verde-bg:#12301F; --verde-bg-2:#0F2619; --verde-bd:#25543A;
    --ok:#6DC79A;   --ok-bg:#12301F;   --ok-bd:#25543A;
    --info:#7FB0EE; --info-bg:#12233A; --info-bd:#22405F;
    --alerta:#E39A6C; --alerta-bg:#33200F; --alerta-bd:#57341B;
    --grave:#EE9086; --grave-bg:#361A17; --grave-bd:#572A25;
    --tip:#B99BE8;  --tip-bg:#241C36;  --tip-bd:#3B3054;
    --marca-l:#5E2032; --marca:#4A1826; --marca-d:#37121C;
    --marca-verde:#12452C; --marca-alerta:#5E2A0E; --marca-neutro:#4A4245;
    --sobre-marca:#fff; --sobre-marca-2:#F0DDE2;
    --papel:#171214; --tarjeta:#1F191B; --papel-2:#241E20; --tile:#2C2226;
    --tinta:#F2ECEC; --tinta-2:#C9BFC1; --gris:#9C9093; --gris-cl:#7E7376;
    --linea:#332A2D; --linea-2:#272022;
    --sh-1:0 1px 2px rgba(0,0,0,.45);
    --sh-2:0 1px 2px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.85);
    --sh-3:0 20px 44px -26px rgba(0,0,0,.95);
    --sh-vino:0 10px 22px -12px rgba(0,0,0,.6);
    --sh-verde:0 10px 22px -14px rgba(0,0,0,.6);
    --sombra:var(--sh-2);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --vino:#E4899F; --vino-l:#CE7288; --vino-d:#F2B4C2; --vino-br:#EE9DB1;
  --vino-bg:#33161D; --vino-bd:#4C2630;
  --verde:#6DC79A; --verde-d:#8FD9B4; --verde-t:#8FD9B4; --verde-o:#8FD9B4;
  --verde-bg:#12301F; --verde-bg-2:#0F2619; --verde-bd:#25543A;
  --ok:#6DC79A;   --ok-bg:#12301F;   --ok-bd:#25543A;
  --info:#7FB0EE; --info-bg:#12233A; --info-bd:#22405F;
  --alerta:#E39A6C; --alerta-bg:#33200F; --alerta-bd:#57341B;
  --grave:#EE9086; --grave-bg:#361A17; --grave-bd:#572A25;
  --tip:#B99BE8;  --tip-bg:#241C36;  --tip-bd:#3B3054;
  --marca-l:#5E2032; --marca:#4A1826; --marca-d:#37121C;
  --marca-verde:#12452C; --marca-alerta:#5E2A0E; --marca-neutro:#4A4245;
  --sobre-marca:#fff; --sobre-marca-2:#F0DDE2;
  --papel:#171214; --tarjeta:#1F191B; --papel-2:#241E20; --tile:#2C2226;
  --tinta:#F2ECEC; --tinta-2:#C9BFC1; --gris:#9C9093; --gris-cl:#7E7376;
  --linea:#332A2D; --linea-2:#272022;
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 1px 2px rgba(0,0,0,.5),0 12px 30px -18px rgba(0,0,0,.85);
  --sh-3:0 20px 44px -26px rgba(0,0,0,.95);
  --sh-vino:0 10px 22px -12px rgba(0,0,0,.6);
  --sh-verde:0 10px 22px -14px rgba(0,0,0,.6);
  --sombra:var(--sh-2);
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ⚠️ Con la cabecera fija, un salto a un ancla deja el destino DEBAJO de ella. `scroll-margin-top`
   reserva su alto (70 px) más un respiro. Vale para los enlaces internos y para el foco. */
:target,h1,h2,h3,[id]{scroll-margin-top:86px}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:"Archivo","Archivo fb",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--vino);text-underline-offset:2px}
a:hover{color:var(--vino-l)}
:focus-visible{outline:3px solid var(--vino);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

h1,h2,h3,h4{line-height:1.18;letter-spacing:-.018em;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(28px,5.2vw,42px);font-weight:700}
h2{font-size:clamp(22px,3.4vw,28px);font-weight:600;margin-top:2.2em}
h3{font-size:19px;font-weight:600;margin-top:1.8em}
/* ⚠️ La prosa ocupa el ANCHO DEL CONTENEDOR, igual que las tablas y las cajas (decisión Pablo,
   pedida dos veces). Antes tenía un tope de 68ch y el efecto era el que se ve en cuanto hay algo
   ancho al lado: el párrafo cortaba a media caja y parecía que algo estaba roto.
   El tope tipográfico sigue disponible como `.angosto` para lo que sea puro texto largo. */
p,ul,ol{max-width:none}
p{margin:0 0 1em}
ul,ol{padding-left:1.3em;margin:0 0 1em}
li{margin-bottom:.45em}
strong{font-weight:600}
.num{font-variant-numeric:tabular-nums}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.angosto{max-width:var(--lectura)}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:8px;top:8px;z-index:99;background:var(--marca);color:var(--sobre-marca);padding:10px 14px;border-radius:var(--radio)}

/* ---------- 3. Banda de no oficialidad ---------- */
/* Va arriba de todo y en todas las páginas, no escondida en el pie: es lo que nos separa
   del sitio del Estado y lo que sostiene la confianza en un nicho YMYL. */
.aviso-oficial{
  background:var(--marca-d);color:var(--sobre-marca-2);font-size:13px;line-height:1.4;
  padding:8px 0;text-align:center;font-weight:500;
}
.aviso-oficial .contenedor{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.aviso-oficial .contenedor::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--verde-o);box-shadow:0 0 0 3px rgba(127,211,166,.22);flex:none}
.aviso-oficial a{color:var(--sobre-marca);text-decoration:underline}

/* ---------- 4. Cabecera y menú ---------- */
/* Fija y traslúcida con desenfoque: el contenido pasa por debajo en vez de empujarla, que es
   lo que hace que el sitio se sienta una aplicación y no un documento. El `z-index` va por
   encima de los submenús y por debajo de los globos de ayuda. */
.cabecera{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
  box-shadow:0 1px 0 rgba(78,20,36,.03),0 6px 20px -16px rgba(78,20,36,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cabecera{background:rgba(31,25,27,.92)}}
:root[data-theme="dark"] .cabecera{background:rgba(31,25,27,.92)}
.cabecera .fila{display:flex;align-items:center;gap:16px;min-height:70px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinta);font-weight:700;font-size:17.5px;letter-spacing:-.02em;flex:0 0 auto}
.marca svg{border-radius:var(--r-s)}
.marca svg{display:block;flex:0 0 auto}
.marca span{white-space:nowrap}
.menu{margin-left:auto;display:none}
.menu ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;max-width:none}
.menu li{margin:0;position:relative}
.menu > ul > li > a,.menu button.desplegar{
  display:block;padding:9px 13px;border-radius:var(--r-s);text-decoration:none;
  color:var(--tinta-2);font-size:14.5px;font-weight:600;background:none;border:0;
  font-family:inherit;cursor:pointer;transition:background .15s,color .15s;
}
.menu > ul > li > a:hover,.menu button.desplegar:hover{background:var(--tile);color:var(--vino)}
.menu button.desplegar[aria-expanded="true"]{background:var(--tile);color:var(--vino)}
.submenu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;display:none;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-l);
  box-shadow:var(--sh-3);padding:9px;min-width:min(560px,88vw);
}
.submenu[data-abierto="1"]{display:grid;grid-template-columns:1fr 1fr;gap:1px 12px}
.submenu a{display:block;padding:9px 12px;border-radius:var(--r-s);text-decoration:none;color:var(--tinta-2);font-size:14.5px;font-weight:500}
.submenu a:hover{background:var(--tile);color:var(--vino)}
.abrir-menu{margin-left:auto;background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-s);min-height:44px;padding:0 15px;font:inherit;font-size:15px;font-weight:600;color:var(--tinta);cursor:pointer;box-shadow:var(--sh-1)}
.abrir-menu:hover{background:var(--tile);color:var(--vino)}
@media(min-width:960px){ .menu{display:block} .abrir-menu{display:none} }

/* Menú en celular: acordeón a pantalla completa, sin trucos. */
.menu-movil{display:none;border-top:1px solid var(--linea);background:var(--tarjeta)}
.menu-movil[data-abierto="1"]{display:block}
.menu-movil ul{list-style:none;margin:0;padding:8px 0;max-width:none}
.menu-movil li{margin:0}
.menu-movil a{display:block;padding:12px 20px;text-decoration:none;color:var(--tinta);font-size:16px;border-bottom:1px solid var(--linea-2)}
.menu-movil .grupo{padding:14px 20px 6px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}

/* ---------- 5. Migas ---------- */
.migas{font-size:13.5px;color:var(--gris);padding:14px 0 0}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0;
  margin:0;max-width:none}
.migas li{display:flex;align-items:center;min-height:24px}
.migas li::after{content:"›";margin-left:6px;color:var(--gris-cl)}
.migas li:last-child::after{content:""}
.migas a{color:var(--gris)}

/* ---------- 5b. Hero ----------
   El de mx-afore: la portada lleva una banda con degradado de marca y una marca de agua muy
   tenue; las internas NO llevan caja —el H1 arranca en el margen del contenido, como el resto
   de la página— porque una banda en cada página compite con el contenido en vez de anunciarlo. */
.hero{position:relative;margin:22px 0 26px;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(155deg,var(--marca-l) 0%,var(--marca) 55%,var(--marca-d) 100%);
  box-shadow:0 24px 50px -26px rgba(78,20,36,.7)}
.hero__inner{position:relative;z-index:1;padding:40px 42px;max-width:720px}
@media (max-width:640px){.hero__inner{padding:26px 20px}}
.hero h1{margin:0;color:var(--sobre-marca)}
.hero__lede{font-size:17.5px;line-height:1.6;margin:14px 0 0;color:var(--sobre-marca-2);max-width:none}
.hero__lede strong{color:var(--sobre-marca);font-weight:700}
.hero__lede a{color:var(--verde-o);text-decoration:underline;text-underline-offset:3px}
.hero__lede a:hover{color:var(--sobre-marca)}
/* La marca de agua es decorativa y nunca debe interceptar un toque. Por debajo de 900 px el
   texto ocupa todo el ancho de la banda y sólo estorbaría. */
.hero__wm{position:absolute;right:34px;top:50%;transform:translateY(-50%);z-index:0;
  opacity:.07;pointer-events:none;color:var(--sobre-marca)}
.hero__wm svg{width:230px;height:230px;display:block}
@media (max-width:900px){.hero__wm{display:none}}
/* El sello, dentro de la banda, se invierte. */
.hero .sello{color:var(--sobre-marca-2);margin:16px 0 0}
.hero .sello b{color:var(--sobre-marca)}
.hero .sello span::before{background:var(--verde-o);box-shadow:0 0 0 3px rgba(127,211,166,.22)}

/* ---------- 6. La ficha de cobro (el componente central) ---------- */
.ficha{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);overflow:hidden;margin:0 0 22px;
}
/* La cabecera lleva un degradado suave del vino, que es el único degradado del sitio y está
   reservado a este componente: es la respuesta que la persona vino a buscar. */
.ficha__cab{background:linear-gradient(135deg,var(--marca-l) 0%,var(--marca) 60%,var(--marca-d) 100%);
  color:var(--sobre-marca);padding:13px 22px;font-size:14px;font-weight:700;letter-spacing:.02em}
.ficha__cuerpo{padding:22px 20px 20px}
.ficha__fecha{
  font-size:clamp(46px,12vw,76px);font-weight:700;line-height:.95;letter-spacing:-.04em;
  color:var(--vino);margin:0;font-variant-numeric:tabular-nums;
}
.ficha__dia{font-size:18px;font-weight:500;color:var(--tinta);margin:6px 0 0;text-transform:none}
.ficha__falta{
  display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;background:var(--verde-bg);
  color:var(--verde-t);border:1px solid var(--verde-bd);
  font-weight:700;font-size:15px;padding:8px 16px;border-radius:var(--r-pill);
}
.ficha__falta::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.ficha__falta.pasada{background:var(--alerta-bg);color:var(--alerta);border-color:var(--alerta-bd)}
.ficha__hoy{background:var(--marca);color:var(--sobre-marca);border-color:var(--vino)}
.ficha__datos{display:flex;flex-wrap:wrap;gap:20px 32px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--linea-2)}
.ficha__datos > div{min-width:150px}
.ficha__datos dt{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin:0 0 3px}
.ficha__datos dd{margin:0;font-size:17px;font-weight:600}
.ficha__datos dd.plata{color:var(--verde-d);font-variant-numeric:tabular-nums}
.ficha__nota{margin:14px 0 0;font-size:14px;color:var(--gris);max-width:none}

/* ---------- 7. Grilla del calendario ---------- */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:0 0 18px;max-width:none;padding:0;list-style:none}
.grilla li{margin:0}
.grilla .casilla{
  display:block;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  background:var(--tarjeta);text-align:center;
}
.casilla__dni{background:var(--marca-neutro);color:var(--sobre-marca);font-size:12px;font-weight:600;padding:5px 4px;line-height:1.25}
.casilla__fecha{padding:11px 4px;font-size:22px;font-weight:700;color:var(--vino);font-variant-numeric:tabular-nums}
.casilla.es-hoy{border-color:var(--vino);box-shadow:0 0 0 2px var(--vino)}
.casilla.es-hoy .casilla__dni{background:var(--marca)}
/* Tres prestaciones se publican como un RANGO y están en curso todos los días de su ventana, no
   sólo uno: se resaltan igual, y la etiqueta dice cuál de los dos casos es. */
.casilla__hoy{background:var(--vino-bg);color:var(--vino-d);font-size:11px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:3px 4px 4px}

/* ---------- 8. Tablas ---------- */
/* La cabecera va SÓLIDA en color de marca, no gris sobre blanco: una tabla de datos con
   encabezado plano se lee como una lista, y acá las tablas son el contenido. Cebra suave
   para seguir la fila con el ojo, y el contenedor recorta las esquinas. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--linea);
  border-radius:var(--r-l);background:var(--tarjeta);margin:0 0 22px;box-shadow:var(--sh-1)}
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
caption{text-align:left;padding:14px 18px 10px;font-size:13.5px;color:var(--gris)}
th,td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--linea-2);vertical-align:top}
thead th{background:var(--marca);color:var(--sobre-marca);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  border-bottom:0;white-space:nowrap;text-transform:none}
tbody tr:nth-child(even){background:var(--papel-2)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody th[scope="row"]{font-weight:600;color:var(--vino-d)}
/* La alineación a la derecha la quiere también el encabezado, para que caiga sobre su columna.
   El VERDE no: `th.plata` (0,1,1) le gana a `thead th` (0,0,2), así que el importe se llevaba
   puesto el blanco del encabezado y quedaba verde oscuro sobre el vino, sin contraste. */
td.plata,th.plata{text-align:right;white-space:nowrap}
tbody td.plata,tbody th.plata{font-weight:700;color:var(--verde-t)}

/* ---------- 9. Bloques de aviso ---------- */
/* Un aviso es una CAJA con su propio color de fondo y de borde, no una barra lateral sobre
   blanco: así se distingue del cuerpo de un vistazo y sin depender de un filete de 4 px.
   Cada variante trae fondo, borde y color de rótulo del mismo token semántico. */
.bloque{background:var(--vino-bg);border:1px solid var(--vino-bd);padding:16px 20px;
  border-radius:var(--radio);margin:0 0 20px}
.bloque > :last-child{margin-bottom:0}
.bloque__tit{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--vino);display:block;margin-bottom:7px}
.bloque strong{color:var(--vino-d)}
.bloque.ojo{background:var(--alerta-bg);border-color:var(--alerta-bd)}
.bloque.ojo .bloque__tit,.bloque.ojo strong{color:var(--alerta)}
.bloque.dato{background:var(--verde-bg);border-color:var(--verde-bd)}
.bloque.dato .bloque__tit,.bloque.dato strong{color:var(--verde-d)}
.bloque.info{background:var(--info-bg);border-color:var(--info-bd)}
.bloque.info .bloque__tit,.bloque.info strong{color:var(--info)}
.bloque.grave{background:var(--grave-bg);border-color:var(--grave-bd)}
.bloque.grave .bloque__tit,.bloque.grave strong{color:var(--grave)}

/* La respuesta rápida: 40-60 palabras arriba de todo, en texto plano, para que los motores
   de respuesta puedan levantarla entera. */
.respuesta{background:var(--vino-bg);border:1px solid var(--vino-bd);border-radius:var(--r-l);
  padding:20px 24px;margin:0 0 26px;font-size:17.5px;line-height:1.6}
@media (max-width:520px){.respuesta{padding:16px 18px}}
.respuesta p{margin:0}
.respuesta strong{color:var(--vino-d)}

/* ---------- 10. Sello de actualización y fuentes ---------- */
/* El verde está reservado a «dato verificado» y éste es su lugar principal: un punto y la
   fecha del dato. Un color que no se usa de adorno es el único que después significa algo. */
.sello{display:flex;flex-wrap:wrap;gap:7px 16px;align-items:center;font-size:13.5px;
  color:var(--gris);margin:0 0 20px;max-width:none;font-weight:500}
.sello span{display:inline-flex;align-items:center;gap:7px}
.sello span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--marca-verde);
  box-shadow:0 0 0 3px var(--verde-bg);flex:none}
.sello b{color:var(--tinta);font-weight:700}
.fuente-linea{font-size:13.5px;color:var(--gris);margin:22px 0 0}

/* ---------- 11. Herramienta ---------- */
/* La herramienta es el producto: panel elevado, radio grande y respiro. */
.herramienta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);padding:24px 26px;margin:0 0 26px}
@media (max-width:520px){.herramienta{padding:18px 16px}}
.campo{margin:0 0 16px}
.campo label{display:block;font-weight:600;font-size:15px;margin:0 0 6px}
.campo select,.campo input{
  width:100%;max-width:420px;font:inherit;font-size:16.5px;padding:0 14px;min-height:48px;
  border:1.5px solid var(--linea);border-radius:var(--r-btn);background:var(--tarjeta);color:var(--tinta);
  transition:border-color .15s,box-shadow .15s;
}
.campo select:focus,.campo input:focus{border-color:var(--vino);outline:0;
  box-shadow:0 0 0 3px rgba(110,31,50,.12)}
/* El importe con su signo delante: el $ es parte del control, no texto suelto al lado. */
.campo-pesos{display:flex;align-items:stretch;gap:0;max-width:420px}
.campo-pesos__signo{display:flex;align-items:center;padding:0 12px 0 14px;font-size:16.5px;
  font-weight:600;color:var(--gris);background:var(--tile);
  border:1.5px solid var(--linea);border-right:0;border-radius:var(--r-btn) 0 0 var(--r-btn)}
.campo-pesos input{border-radius:0 var(--r-btn) var(--r-btn) 0;max-width:none;flex:1;min-width:0}
.campo-pesos:focus-within .campo-pesos__signo{border-color:var(--vino)}

/* Un botón que se lee como enlace: dispara una acción, así que es <button>, pero no compite
   visualmente con el botón principal de la herramienta. */
.enlace-boton{background:none;border:0;padding:2px 0;font:inherit;color:var(--vino);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left}
.enlace-boton:hover{color:var(--vino-l)}

/* ⭐ El bloque de resultado de TODAS las herramientas (12 páginas). No tenía una sola regla:
   aparecía pegado al botón que lo genera, sin nada que lo separase de lo que había antes. */
.resultado{margin:22px 0 0}
.resultado:empty,.resultado[hidden]{margin:0}

.opciones{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none;max-width:none}
.opcion{
  border:1.5px solid var(--linea);background:var(--tarjeta);border-radius:var(--r-btn);
  padding:11px 16px;font:inherit;font-size:15.5px;font-weight:500;cursor:pointer;color:var(--tinta);
  box-shadow:var(--sh-1);transition:border-color .15s,background .15s,transform .1s;
}
.opcion:hover{border-color:var(--vino-bd);background:var(--tile)}
.opcion:active{transform:scale(.98)}
.opcion[aria-pressed="true"]{background:var(--marca);border-color:var(--vino);color:var(--sobre-marca);
  font-weight:700;box-shadow:var(--sh-vino)}
.dni-grilla{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:420px;padding:0;margin:0;list-style:none}
@media(min-width:520px){.dni-grilla{grid-template-columns:repeat(10,1fr);max-width:none}}
/* ⚠️⚠️ `width:100%` NO es cosmético. El item de la grilla es el <li>, y el <button> de adentro
   es shrink-to-fit: sin esto medía **12 px de ancho** por 55 de alto, una astilla vertical con
   el número desbordado. El control principal del sitio, en las ocho páginas que montan la
   herramienta, y ni un test lo veía porque hacen click por selector, no con el dedo.
   Lo cazó medir el rectángulo real en móvil. */
.dni-grilla .opcion{width:100%;padding:13px 0;text-align:center;font-weight:700;font-size:19px;border-radius:var(--r-s)}
/* 48 px de alto mínimo, sombra del color del botón y un píxel de elevación al pasar: es lo
   que separa un botón de un enlace con fondo. Sin mayúsculas, que es lo que hacen 12 de 13
   sitios del nicho de mx-afore y también acá. */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;background:var(--marca);color:var(--sobre-marca);border:1.5px solid transparent;
  border-radius:var(--r-btn);font:inherit;font-size:16.5px;font-weight:600;cursor:pointer;
  text-decoration:none;box-shadow:var(--sh-vino);
  transition:transform .15s,box-shadow .15s,background .15s;
}
.boton:hover{background:var(--marca-l);color:var(--sobre-marca);transform:translateY(-1px);text-decoration:none}
.boton:active{transform:translateY(0)}
.boton--verde{background:var(--marca-verde);box-shadow:var(--sh-verde)}
.boton--verde:hover{background:var(--verde-d);color:var(--sobre-marca)}
.boton--fantasma{background:var(--tarjeta);color:var(--vino);border-color:var(--linea);box-shadow:var(--sh-1)}
.boton--fantasma:hover{background:var(--tile);color:var(--vino)}
.boton[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- 12. Índice de secciones y pie ---------- */
.pie{background:var(--tarjeta);border-top:1px solid var(--linea);margin-top:64px;padding:36px 0 38px}
.pie h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--vino);margin:0 0 12px;font-weight:700}
.pie-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:22px 28px}
.pie ul{list-style:none;padding:0;margin:0;max-width:none}
.pie li{margin:0 0 7px}
.pie a{color:var(--tinta-2);text-decoration:none;font-size:14.5px}
.pie a:hover{color:var(--vino);text-decoration:underline}
.pie-legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--linea-2);font-size:13.5px;color:var(--gris);max-width:none}

/* ---------- 13. Tarjetas de navegación entre prestaciones ---------- */
/* Tarjeta de navegación. La estructura es la de mx-afore: título arriba, descripción, y la
   flecha anclada abajo; al pasar el mouse la tarjeta SUBE, que es lo que la hace sentir un
   control y no un recuadro. En móvil no hay hover, así que la flecha es permanente. */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 26px;padding:0;list-style:none;max-width:none}
.tarjetas li{margin:0}
.tarjeta{display:flex;flex-direction:column;height:100%;background:var(--tarjeta);
  border:1px solid var(--linea);border-radius:var(--r-l);padding:20px 22px 18px;
  text-decoration:none;color:var(--tinta);box-shadow:var(--sh-1);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.tarjeta:hover{border-color:var(--verde-bd);color:var(--tinta);transform:translateY(-3px);
  box-shadow:0 18px 38px -20px rgba(78,20,36,.4);text-decoration:none}
.tarjeta:active{transform:translateY(-1px)}
.tarjeta b{display:block;font-size:17px;line-height:1.3;margin-bottom:6px;color:var(--vino-d)}
.tarjeta span{font-size:14.5px;color:var(--gris);line-height:1.5;display:block}
.tarjeta::after{content:"Ver \2192";margin-top:auto;padding-top:14px;font-size:14px;
  font-weight:700;color:var(--vino-br);position:static;transform:none;opacity:1}
.tarjeta:hover::after{opacity:1}

/* Selector de prestación de la herramienta completa. Botones anchos porque los nombres son
   largos y en 360px un grid rígido los parte por la mitad. */
.prest-grilla{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.prest-grilla .opcion--ancha{width:auto;min-width:0;padding:9px 14px;font-size:.92rem;
  border-radius:999px;line-height:1.25;text-align:left;height:auto}
@media (max-width:520px){.prest-grilla .opcion--ancha{width:100%}}
.tabla-prest[hidden]{display:none}

/* ── Puente con sb-lib ──────────────────────────────────────────────────────────────────
   La hoja de las herramientas (sb-lib/assets/sb-tools.css) no conoce la paleta de nadie:
   habla en tokens --sb-*. Acá se mapean UNA vez a los del sitio. Sin esto los formularios
   salen con los colores por defecto de la librería, que no son los nuestros. */
:root{
  --sb-brand:var(--vino);   --sb-brand-d:var(--vino-d); --sb-brand-l:var(--vino-l);
  --sb-brand-bd:var(--linea);
  --sb-accent:var(--verde); --sb-accent-d:var(--verde-d); --sb-accent-o:var(--verde);
  --sb-accent-bg:var(--verde-bg); --sb-accent-bd:var(--verde);
  --sb-mal:var(--alerta);   --sb-mal-bg:var(--alerta-bg); --sb-mal-bd:var(--alerta);
  --sb-track:var(--linea-2);

  /* ⚠️⚠️ Y ADEMÁS ESTOS CATORCE, que la ficha de la convención NO lista.
     `sb-docs/conventions/herramientas-ux.md` §2 dice «mapear los tokens --sb-*», y con eso no
     alcanza: la hoja de la librería también se apoya en un juego BASE de superficies, tipografía
     y radios. Sin ellos los componentes salen a medias y NO se ve como un error: el botón (i)
     tenía `background:var(--tile)` sin definir, así que se dibujaba como una «i» suelta, sin
     disco, en las doce páginas con formulario. Lo encontró el repaso visual en móvil, no un test.
     Comprobado con: grep -oE 'var\(--[a-z0-9-]+' lib/assets/sb-tools.css | sort -u */
  --surface:var(--tarjeta); --surface-alt:var(--papel); --tile:var(--linea-2);
  --ink:var(--tinta);       --soft:var(--tinta-2);      --muted:var(--gris);
  --border:var(--linea);
  --r:var(--radio); --r-l:10px; --r-bar:999px; --r-pill:999px;
  --sh-1:var(--sombra); --sh-2:var(--sombra);
  --font:"Archivo","Archivo fb",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Los que la librería heredó de la paleta de es-sepe/es-vl y no renombró. */
  --ok:var(--verde); --bar-off:var(--linea-2);
  --verde-l:var(--verde); --verde-bd:var(--verde);
  --ambar:var(--alerta); --ambar-d:var(--alerta); --ambar-o:var(--alerta);
  --ambar-bg:var(--alerta-bg); --ambar-bd:var(--alerta);
}

/* ── Pasos numerados ────────────────────────────────────────────────────────────────────
   En HTML y no en SVG: el texto de un SVG escala con el viewBox y en 360 px queda en menos
   de 7 px reales. Acá lo dimensiona el navegador y las cajas se apilan solas. */
.pasos{margin:26px 0;padding:0}
.pasos__flujo{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;counter-reset:paso}
.pasos__flujo>li{flex:1 1 190px;min-width:0;background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:var(--radio);padding:16px 16px 14px;display:flex;flex-direction:column;gap:3px}
.pasos__n{width:27px;height:27px;border-radius:50%;background:var(--marca);color:var(--sobre-marca);
  font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;flex:none}
.pasos__flujo>li:nth-child(even) .pasos__n{background:var(--marca-verde)}
.pasos__t{font-weight:700;font-size:.98rem;color:var(--tinta);line-height:1.3}
.pasos__d{font-size:.88rem;color:var(--gris);line-height:1.45}
.pasos figcaption{margin-top:10px;font-size:.9rem;line-height:1.5;color:var(--gris)}
.pasos figcaption strong{color:var(--tinta-2)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Anatomía de un número ──────────────────────────────────────────────────────────────
   El número grande, partido en bloques de color, con su leyenda debajo. En HTML y no en SVG
   por lo mismo que los pasos: el texto lo dimensiona el navegador. El tamaño usa clamp()
   para que en 360 px entre entero sin partirse. */
.anat{margin:26px 0;padding:0}
.anat__num{display:flex;justify-content:center;align-items:baseline;flex-wrap:nowrap;
  gap:2px;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  font-size:clamp(1.15rem,6.2vw,2.1rem);font-weight:700;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);
  padding:16px 8px}
.anat__p{padding:6px 8px;border-radius:5px;white-space:nowrap}
.anat__p b{border-bottom:3px solid currentColor;padding-bottom:1px}
.anat__sep{color:var(--gris-cl);font-weight:400}
.anat__p--pre{background:var(--linea-2);color:var(--tinta-2)}
.anat__p--dni{background:var(--vino-bg);color:var(--vino-d)}
.anat__p--dv{background:var(--verde-bg);color:var(--verde-d)}
.anat__leyenda{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.anat__leyenda li{display:grid;grid-template-columns:14px 1fr;gap:1px 9px;
  align-items:start;font-size:.92rem;line-height:1.5;color:var(--tinta-2)}
.anat__leyenda li b{grid-column:2;color:var(--tinta)}
.anat__leyenda li b+span{grid-column:2}
.anat__c{grid-area:1/1;width:14px;height:14px;border-radius:4px;margin-top:4px}
/* La muestra va en color SÓLIDO, no con el relleno tenue del bloque grande: a 14 px un fondo
   tenue no se percibe (el del prefijo desaparecía) y la leyenda deja de mapear color↔bloque. */
.anat__c--pre{background:var(--gris-cl)}
.anat__c--dni{background:var(--marca)}
.anat__c--dv{background:var(--marca-verde)}
.anat figcaption{margin-top:12px;padding:12px 14px;background:var(--alerta-bg);
  border-radius:var(--radio);font-size:.93rem;line-height:1.55;color:var(--tinta-2)}
.anat figcaption strong{color:var(--alerta)}

/* ── Esquema del recibo de haberes ──────────────────────────────────────────────────────
   Un documento dibujado con HTML: la persona reconoce el suyo y ubica qué mirar. Sin
   importes a propósito (ver el comentario del partial). */
/* Acotado: un recibo real no tiene 1.200 px de ancho, y sin tope el concepto y su
   descripción quedan en extremos opuestos de la pantalla, imposibles de emparejar. */
.recibo{margin:26px 0;padding:0;max-width:760px;margin-inline:auto}
.recibo__doc{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden}
.recibo__cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:12px 16px;background:var(--marca);color:var(--sobre-marca);flex-wrap:wrap}
.recibo__org{font-weight:700;font-size:.98rem}
.recibo__per{font-size:.82rem;opacity:.85}
.recibo__sec{display:flex;align-items:center;gap:8px;margin:0;padding:11px 16px 8px;
  font-weight:700;font-size:.93rem;color:var(--tinta)}
.recibo__sec span{font-weight:400;font-size:.82rem;color:var(--gris);
  border:1px solid var(--linea);border-radius:999px;padding:1px 8px}
.recibo__sec b,.recibo__neto b,.recibo figcaption b{flex:none;width:21px;height:21px;
  border-radius:50%;background:var(--marca);color:var(--sobre-marca);font-size:.76rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.recibo__sec--menos b,.recibo__lineas--menos+.recibo__neto b{background:var(--marca-alerta)}
.recibo__lineas{list-style:none;margin:0;padding:0 16px 6px}
.recibo__lineas li{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:7px 0;border-bottom:1px dashed var(--linea-2)}
.recibo__lineas li:last-child{border-bottom:0}
.recibo__k{font-weight:600;font-size:.9rem;color:var(--tinta-2);flex:1 1 150px;min-width:0}
.recibo__d{font-size:.82rem;color:var(--gris);flex:1 1 170px;text-align:right}
.recibo__lineas--menos .recibo__k{color:var(--alerta)}
.recibo__neto{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px;
  background:var(--verde-bg);font-weight:700;color:var(--verde-d);font-size:.98rem;flex-wrap:wrap}
.recibo__neto span{font-weight:400;font-size:.85rem;color:var(--tinta-2)}
.recibo__neto b{background:var(--marca-verde)}
.recibo figcaption{margin-top:11px;font-size:.9rem;line-height:1.6;color:var(--gris)}
.recibo figcaption b{width:18px;height:18px;font-size:.7rem;vertical-align:-3px;margin:0 2px}
.recibo figcaption strong{color:var(--tinta-2)}
@media (max-width:520px){.recibo__d{text-align:left;flex-basis:100%}}

/* ═══ INFOGRAFÍAS ═══════════════════════════════════════════════════════════════════════
   Todas en HTML+CSS. El texto de un SVG escala con el viewBox: uno de 620 dibujado en 390 px
   rinde un font-size de 11,5 a 7,2 px reales. Acá lo dimensiona el navegador, respeta el zoom
   y el tamaño de fuente del sistema, y es texto de verdad para Bing. */
figure.mapa,figure.arbol,figure.reparto,figure.circuitos,figure.ventana,figure.escala{margin:26px 0;padding:0}
figure.mapa figcaption,figure.arbol figcaption,figure.reparto figcaption,
figure.ventana figcaption,figure.escala figcaption{margin-top:10px;font-size:.9rem;line-height:1.55;
  color:var(--gris)}
figure.mapa figcaption strong,figure.arbol figcaption strong,figure.reparto figcaption strong,
figure.ventana figcaption strong,figure.escala figcaption strong{color:var(--tinta-2)}

/* ── El mapa del mes ── */
.mapa__eje{display:grid;grid-template-columns:var(--mapa-nom) 1fr var(--mapa-rango);gap:0 8px;
  height:19px;margin:0 0 4px;align-items:start}
.mapa__eje-pista{position:relative;height:19px}
.mapa__eje-hueco{visibility:hidden}
.mapa{--mapa-nom:132px}
.mapa__marca{position:absolute;top:0;transform:translateX(-50%);font-size:.72rem;color:var(--gris);
  white-space:nowrap}
.mapa__marca.es-mes{color:var(--vino);font-weight:600}
.mapa__filas{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.mapa__filas>li{display:grid;grid-template-columns:var(--mapa-nom) 1fr var(--mapa-rango);align-items:center;
  gap:8px;min-height:26px}
.mapa__nom{font-size:.78rem;line-height:1.25;color:var(--tinta-2);text-align:right;
  overflow-wrap:anywhere}
.mapa__pista{position:relative;height:13px;background:var(--linea-2);border-radius:7px}
.mapa__barra{position:absolute;top:0;height:13px;border-radius:7px;background:var(--marca);min-width:8px}
.mapa__barra.es-otro{background:var(--marca-alerta)}
.mapa__rango{font-size:.72rem;color:var(--gris);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  /* En pantalla chica el nombre no cabe al lado: pasa a su propia línea y la barra ocupa todo. */
  .mapa{--mapa-nom:0px}
  .mapa__eje{grid-template-columns:1fr var(--mapa-rango)}
  .mapa__eje>:first-child{display:none}
  .mapa__filas>li{grid-template-columns:1fr var(--mapa-rango);grid-template-areas:"nom nom" "pista rango";gap:3px 8px;
    padding-bottom:6px;border-bottom:1px solid var(--linea-2)}
  .mapa__nom{grid-area:nom;text-align:left;font-size:.85rem;font-weight:600}
  .mapa__pista{grid-area:pista}
  .mapa__rango{grid-area:rango}
  /* El hueco del eje lleva `.mapa__rango` para medir igual que el rango real, pero NO va en
     el área `rango`, que sólo existe en la grilla de las filas: sin esto el eje se armaba
     cuatro columnas implícitas y su pista quedaba 74 px más corta que la de las barras. */
  .mapa__eje-hueco{grid-area:auto}
}

/* ── El árbol AUH / SUAF ── */
.arbol__q{margin:0 0 12px;padding:13px 16px;background:var(--vino-bg);border:1.5px solid var(--vino);
  border-radius:var(--radio);font-weight:700;text-align:center;color:var(--tinta)}
.arbol__ramas{display:flex;flex-wrap:wrap;gap:12px}
.arbol__rama{flex:1 1 230px;min-width:0;background:var(--tarjeta);border:1.5px solid var(--linea);
  border-radius:var(--radio);padding:14px 16px 12px;position:relative}
.arbol__et{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  padding:2px 9px;border-radius:999px;margin-bottom:8px}
.arbol__rama--si .arbol__et{background:var(--verde-bg);color:var(--verde-d)}
.arbol__rama--no .arbol__et{background:var(--alerta-bg);color:var(--alerta)}
.arbol__tit{display:block;font-size:1.15rem;line-height:1.2}
.arbol__rama--si .arbol__tit{color:var(--verde-d)}
.arbol__rama--no .arbol__tit{color:var(--vino)}
.arbol__sub{display:block;font-size:.84rem;color:var(--gris);margin-bottom:9px}
.arbol__rama ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.arbol__rama li{font-size:.88rem;line-height:1.45;color:var(--tinta-2);padding-left:14px;position:relative}
.arbol__rama li::before{content:"·";position:absolute;left:3px;color:var(--gris-cl);font-weight:700}

/* ── El 80/20 ── */
.reparto__tot{margin:0 0 8px;font-size:.9rem;color:var(--gris)}
.reparto__tot strong{color:var(--tinta)}
.reparto__barra{display:flex;height:52px;border-radius:var(--radio);overflow:hidden}
.reparto__p{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:0;padding:0 4px}
.reparto__p b{font-size:.95rem}
.reparto__p span{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.reparto__p--80{flex:0 0 80%;background:var(--marca-verde);color:var(--sobre-marca)}
.reparto__p--20{flex:0 0 20%;background:var(--vino-bg);color:var(--vino-d)}
.reparto__pies{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.reparto__pies p{margin:0;flex:1 1 200px;font-size:.85rem;line-height:1.45;color:var(--gris)}
.reparto__pies p:last-child{text-align:right}
.reparto__pies strong{color:var(--tinta-2)}
@media (max-width:520px){.reparto__pies p:last-child{text-align:left}}

/* ── Los dos circuitos ── */
.circuitos__par{display:flex;flex-wrap:wrap;gap:12px}
.circuitos__c{flex:1 1 230px;min-width:0;background:var(--tarjeta);border:1.5px solid var(--linea);
  border-radius:var(--radio);padding:14px 16px}
.circuitos__c b{display:block;color:var(--vino);line-height:1.3;font-size:.98rem}
.circuitos__c--jub b{color:var(--verde-d)}
.circuitos__reg{display:block;font-size:.8rem;color:var(--gris);margin:5px 0 8px;
  padding-bottom:8px;border-bottom:1px solid var(--linea-2)}
.circuitos__c p{margin:0;font-size:.9rem;line-height:1.5;color:var(--tinta-2)}
.circuitos__ojo{margin:12px 0 0;padding:12px 14px;background:var(--alerta-bg);border-radius:var(--radio);
  font-size:.89rem;line-height:1.55;color:var(--tinta-2)}
.circuitos__ojo strong{color:var(--alerta)}

/* ── Ventana de tiempo ── */
.ventana__linea{display:flex;align-items:stretch;gap:0;border-radius:var(--radio);overflow:hidden;
  min-height:48px;text-align:center}
.ventana__fuera{flex:1 1 22%;display:flex;align-items:center;justify-content:center;padding:8px 6px;
  background:var(--alerta-bg);color:var(--alerta);font-size:.82rem;line-height:1.25}
.ventana__dentro{flex:2 1 46%;display:flex;align-items:center;justify-content:center;padding:8px 10px;
  background:var(--verde-bg);border-left:2px solid var(--verde);border-right:2px solid var(--verde);
  color:var(--verde-d);font-weight:700;font-size:.95rem;line-height:1.25}
.ventana__hitos{display:flex;justify-content:space-between;margin-top:6px;font-size:.85rem;
  font-weight:600;color:var(--tinta)}
.ventana__hitos span{flex:1;text-align:center}
.ventana__hitos span:first-child{text-align:left}
.ventana__hitos span:last-child{text-align:right}

/* ── Escala ── */
.escala__u{margin:0 0 8px;font-size:.88rem;color:var(--tinta-2)}
.escala__cuerpo{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.escala__pista{flex:1 1 200px;display:flex;align-items:center;gap:0;min-width:0}
.escala__linea{flex:1;height:9px;background:var(--marca);border-radius:5px;margin:0 -4px}
.escala__tope{flex:none;width:38px;height:38px;border-radius:50%;background:var(--marca-d);color:var(--sobre-marca);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;z-index:1}
.escala__extra{flex:0 1 auto;background:var(--verde-bg);border:1.5px solid var(--verde);
  color:var(--verde-d);border-radius:var(--radio);padding:8px 12px;font-size:.85rem;font-weight:600}

/* Retoques del repaso visual en móvil (capturas, no a ojo):
   · las marcas del eje del mapa se cortaban en los dos extremos porque van centradas sobre su
     posición; con 0% y 100% media etiqueta queda fuera;
   · la leyenda del CUIL ya no necesita parche: se arma con grid de dos columnas (chip | texto)
     arriba, que se comporta igual en 360 px que en escritorio. El parche que había acá era
     `flex-wrap` sin media query, y en escritorio dejaba el chip solo en su propia fila. */
/* Las marcas van centradas sobre su posición, así que la primera y la última se salían media
   etiqueta por el borde de la pista: se anclan por su lado en vez de centrarse. El `overflow`
   contiene lo que igual asome. (El `padding-right:2px` que había acá desalineaba las pistas de
   las filas respecto del eje por esos mismos 2 px; ya no hace falta: el eje es una grilla con
   las mismas columnas, no un bloque empujado con padding.) */
.mapa__eje-pista{overflow:hidden}
.mapa__marca:first-child{transform:none}
.mapa__marca:last-child{transform:translateX(-100%)}

/* La etiqueta con su (i) al lado. `position:relative` es lo que ancla el globo de ayuda: la
   librería lo posiciona en absoluto contra el bloque de la etiqueta (`.field__lbl` en su
   nomenclatura). Sin esto el (i) caía a su propia línea y el globo se anclaba al <form>. */
.campo>.paso__tit,label.paso__tit{position:relative;display:flex;align-items:center;gap:7px;
  flex-wrap:wrap;font-weight:700;color:var(--tinta);margin-bottom:2px}
.sb-ayuda{margin:5px 0 0;font-size:.85rem;line-height:1.45;color:var(--gris)}

/* ── Tarjetas: la señal de que son enlaces tiene que ser PERMANENTE ─────────────────────
   En móvil no hay hover, así que una tarjeta que sólo se distingue al pasar el mouse es
   indistinguible de una caja informativa. Lleva flecha siempre y un `:active` que confirma
   el toque, que es la única realimentación que hay con el dedo. (Lección de mx-nss, en
   sb-docs/conventions/seo-qa.md.) */
.tarjeta:focus-visible{outline:2px solid var(--vino);outline-offset:2px}

/* ── Tablas apiladas en pantalla chica ──────────────────────────────────────────────────
   Sólo las que el JS marcó como `.apilable` (alguna celda de más de 40 caracteres). Cada
   fila pasa a ser una ficha con el nombre de la columna encima del dato: leer prosa larga
   scrolleando de lado es leer el contenido principal de la página de costado. */
@media (max-width:640px){
  table.apilable{display:block;width:100%;border:0}
  table.apilable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  table.apilable tbody,table.apilable tr,table.apilable td,table.apilable tbody th{display:block;width:auto}
  table.apilable tbody tr{border:1px solid var(--linea);border-radius:var(--radio);
    padding:12px 14px;margin-bottom:10px;background:var(--tarjeta)}
  table.apilable tbody tr:last-child{margin-bottom:0}
  table.apilable tbody th,table.apilable tbody td{border:0;padding:0 0 8px;text-align:left}
  table.apilable tbody tr>*:last-child{padding-bottom:0}
  /* El nombre de la columna, encima del dato. */
  table.apilable tbody td[data-col]::before,table.apilable tbody th[data-col]::before{
    content:attr(data-col);display:block;font-size:.72rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gris-cl);font-weight:600;margin-bottom:2px}
  /* La primera celda es el rótulo de la fila: se destaca. */
  table.apilable tbody th[scope=row]{font-size:1.02rem;color:var(--vino);
    border-bottom:1px solid var(--linea-2);margin-bottom:8px}
  /* ⚠️ El caption de una tabla en `display:block` se comporta como una celda y se encoge a
     una palabra por línea. Hay que devolverle el ancho a mano. */
  table.apilable caption{display:block;width:100%;text-align:left;margin-bottom:8px}
  /* Ya no hace falta que el contenedor scrollee. La clase la pone el mismo JS que apila:
     El selector de contención sería más limpio, pero recién es seguro en todos los motores
     desde 2023, y el umbral del runbook del portfolio son las features anteriores a 2022. */
  .tabla-scroll.tiene-apilable{overflow-x:visible}
}

/* ── Área táctil de la navegación del pie ───────────────────────────────────────────────
   Eran enlaces de 16 px de alto: una LISTA DE NAVEGACIÓN, no texto en una oración, así que
   no le alcanza la excepción de WCAG 2.5.8 para enlaces en línea. Se les da alto propio en
   vez de agrandar la letra, que descuadraría el pie. */
.pie-cols ul li{margin:0}
.pie-cols ul a{display:inline-block;padding:6px 0;min-height:24px}

/* Las migas también son navegación, no texto en una oración: 15 px de alto es poco para el dedo.
   ⚠️ El área táctil va en el <li>, NO en el <a>. Con `min-height` sobre el enlace, el único ítem
   que la tenía era el enlazado: el texto de «Inicio» quedaba corrido respecto del separador «›» y
   del último ítem, que son texto plano. Ahora el <li> es flex centrado y el alto lo da él, así
   que enlace, separador y ítem actual comparten la misma línea. */
.migas a{display:inline-block;padding:5px 0}

/* ── «Y ahora, ¿qué?»: las rutas que emite sbRutas ──────────────────────────────────────
   ⚠️⚠️ LA BASE LA PONE EL SITIO, NO LA LIBRERÍA. sb-tools.css sólo estila `.card--feat`,
   `.card-badge` y la flecha `Ver →` (con `:where()`, o sea especificidad cero, para no pelear
   con quien ya tenga la suya). El recuadro, la grilla y el quitar el subrayado son del sitio,
   y ar-cobro no tenía NI UNA regla `.card`: salía todo subrayado, la chapa metida en la línea
   del título y la flecha delante del texto. La convención lo dice —«la librería aporta el
   comportamiento, no los nombres»— pero es fácil leerlo como que trae también el aspecto.
   Mismo lenguaje visual que `.tarjeta`, que es la card propia del sitio. */
.next .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
  margin:0;padding:0;list-style:none;max-width:none}
.next .card{display:grid;grid-template-rows:auto auto 1fr auto;gap:2px;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-l);
  padding:16px 18px 14px;text-decoration:none;color:var(--tinta);box-shadow:var(--sh-1);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.next .card:hover{border-color:var(--verde-bd);box-shadow:0 18px 38px -20px rgba(78,20,36,.4);
  transform:translateY(-3px);text-decoration:none}
.next .card:active{transform:scale(.985);background:var(--vino-bg)}
.next .card:focus-visible{outline:2px solid var(--vino);outline-offset:2px}
/* La chapa ocupa SIEMPRE la fila 1, aunque la tarjeta no la tenga: si no, en las que no la
   llevan el título sube y la fila queda desalineada contra las destacadas. */
.next .card-badge{grid-row:1}
.next .card__t{grid-row:2;font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--vino-d);
  text-decoration:none}
.next .card__d{margin:2px 0 0;font-size:.88rem;line-height:1.45;color:var(--gris);
  text-decoration:none;max-width:none}
/* La chapa es un bloque propio arriba del título, no un trozo de la misma línea. */
.next .card-badge{grid-row:1;justify-self:start;margin-bottom:7px;font-size:.68rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 10px}
.next .card--feat{border-color:var(--verde);background:var(--verde-bg)}
.next .card--feat .card__t{color:var(--verde-d)}
.next .card--feat .card-badge{background:var(--marca-verde);color:var(--sobre-marca)}
/* La flecha de la librería, alineada abajo a la derecha en vez de en su propia fila. */
.next .card::after{justify-self:end;color:var(--vino);text-decoration:none}
.next .card--feat::after{color:var(--verde-d)}

/* ── La FAQ ─────────────────────────────────────────────────────────────────────────────
   Acordeón <details>, con el comportamiento de sb-lib (emit_faq_accordion). Sin JS abre
   igual: es mejora, no requisito. */
.secc-faq{margin:30px 0 0}
/* Cada pregunta es su propia tarjeta, no filas de un bloque: separadas se escanean mejor y
   la que está abierta se distingue sola. El signo va en un azulejo, como en mx-afore. */
.faq{display:grid;gap:10px}
.faq details{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s}
.faq details[open]{border-color:var(--vino-bd);box-shadow:var(--sh-2)}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:600;font-size:16px;color:var(--vino-d);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:var(--r-s);
  background:var(--tile);color:var(--vino);display:grid;place-items:center;
  font-weight:700;font-size:19px;line-height:1;transition:background .15s}
.faq details[open] summary::after{content:"\2013";background:var(--marca);color:var(--sobre-marca)}
.faq summary:hover{color:var(--vino)}
.faq summary:hover::after{background:var(--vino-bg)}
.faq summary:focus-visible{outline:2px solid var(--vino);outline-offset:-2px;border-radius:var(--radio)}
.faq__c{padding:0 18px 17px;color:var(--tinta-2)}
.faq__c p{margin:0;line-height:1.65}

/* ── El menú de escritorio: «Prestaciones» quedaba más arriba que el resto ───────────────
   Es un <button> entre <a>. Los dos son inline por defecto y se alinean por su LÍNEA BASE,
   que en un botón cae distinta que en un enlace, así que el desplegable subía unos píxeles.
   Alineando los items por el centro deja de depender de la etiqueta que use cada uno. */
.menu > ul{align-items:center}
.menu > ul > li{display:flex;align-items:center}
.menu > ul > li > a,.menu button.desplegar{display:flex;align-items:center;gap:5px;
  line-height:1.2;vertical-align:middle}