/* ============================================================================
   Semanas Cotizadas — app.css (relanzamiento 2026)

   Base: el sistema de mx-afore (que viene de mx-issste, CWV 100 en 11 tipos de
   página). Lo heredado es la ESTRUCTURA de tokens y la disciplina de componentes.
   Lo propio es la identidad y el motivo gráfico.

   LA IDEA. El objeto de este nicho es un documento que registra el tiempo: altas,
   bajas, patrones, semanas que se acumulan. El sitio se diseña como un EXPEDIENTE
   LEGIBLE, no como un blog:

     · la CIFRA es el héroe — semanas, pesos y años en grande, con tabular-nums;
     · la LÍNEA DE TIEMPO es el motivo recurrente — el historial laboral, la rampa
       de semanas 2021→2031, la de cuotas de Modalidad 40, la conservación de
       derechos;
     · reglas y filetes antes que sombras pesadas. Estética de registro.

   ⛔ Lo que NO se imita, y es deliberado: la paleta exacta del IMSS, su emblema,
   el escudo nacional y la barra de gob.mx. Un sitio no oficial disfrazado de
   oficial es un problema legal y de confianza, no una ventaja.

   Sin framework. Íconos SVG inline. Fuente self-hosteada con font-display:optional.
   ============================================================================ */

/* ---------- 0. Fuentes ----------
   Noto Sans SELF-HOSTEADA. No es una elección estética: es lo que resolvió el CLS
   en mx-imss (0.14 → ~0). El @font-face vive en esta hoja, que es bloqueante, así
   que existe ANTES del primer paint — que es la condición para que
   `font-display:optional` funcione de verdad: si la fuente no llegó a tiempo, el
   navegador se queda con el fallback para TODO el render y no hay swap, y por lo
   tanto no hay reflow.
   Los fallback llevan métricas ajustadas para ocupar el MISMO espacio que la Noto.
   ⛔ No volver a `swap` ni a cargar esto en diferido: las dos variantes se midieron
   en mx-imss y las dos mueven la página. sb-docs/conventions/fuentes-self-hosted.md
   Se regeneran con: sb-tools/dev/self-host-font.py mx-semanas "Noto+Sans:ital,wght@0,400..900;1,400" */
@font-face{font-family:'Noto Sans';font-style:italic;font-weight:400;font-display:optional;src:url(/assets/fonts/noto-sans-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Sans';font-style:italic;font-weight:400;font-display:optional;src:url(/assets/fonts/noto-sans-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400 900;font-display:optional;src:url(/assets/fonts/noto-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400 900;font-display:optional;src:url(/assets/fonts/noto-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Sans fb';src:local('Arial'),local('Helvetica'),local('sans-serif');size-adjust:101.4%;ascent-override:107%;descent-override:29%;line-gap-override:0%}

/* ---------- 1. Tokens ----------
   El eje es el VERDE PETRÓLEO heredado del themeColor del sitio, y el acento es
   ÁMBAR, reservado para las piezas de DECISIÓN (lo que hay que elegir, lo que
   conviene mirar dos veces). El guinda entra poquísimo, como color institucional
   de cita normativa.
   Se distingue a propósito de mx-imss, que se quedó con el verde institucional
   puro, y de mx-afore, que es azul con acento verde. */
:root{
  /* ⭐ EL VERDE DE LOS TÍTULOS TIENE TOKEN PROPIO, y no es capricho. `--verde-d` se usa para dos
     cosas incompatibles: el color del TEXTO de títulos y rótulos, y el FONDO de la banda del
     hero y de algún botón. En el bloque oscuro el rol no se invirtió —siguió siendo un verde
     oscuro— así que los títulos quedaban en #0B5F52 sobre #1B1F22: 2,1 de contraste, por debajo
     del 3 que pide WCAG para texto grande y muy por debajo del 4,5 de los rótulos de campo.
     Y no se podía simplemente aclarar `--verde-d`, porque entonces la banda del hero se volvía
     clara en modo oscuro. Con un token aparte cada rol vive su vida.
     En claro vale exactamente lo mismo que antes, así que el modo claro no cambia un píxel. */
  --titulo:var(--verde-d);
  /* ⚠️ El texto que va ENCIMA del ámbar. En claro el ámbar es oscuro y lleva blanco; en oscuro
     el ámbar se aclara para que se vea sobre el fondo, y entonces el blanco encima queda en
     2,1 de contraste. Es el mismo fallo que el de los títulos: se cambió el token del fondo y
     no lo que va sobre él. */
  --sobre-ambar:#fff;

  /* Marca */
  --verde:#0B5F52; --verde-d:#073F37; --verde-l:#0E7A69; --verde-br:#149B85;

  /* Acento: decisión y atención. --ambar-t es el ámbar para TEXTO sobre fondo
     claro (el #B26B12 no llega a contraste en cuerpo pequeño); --ambar-o es el
     ámbar sobre fondo oscuro, y el que usa el logo. */
  /* ⚠️ El ámbar de los botones se oscureció respecto del primer borrador (#B26B12): texto
     blanco encima daba 4,2:1 y el mínimo de la norma para cuerpo normal es 4,5:1. Con
     #9C5D0F son 5,3:1. La identidad no cambia; lo que cambia es que ahora se lee. */
  --ambar:#9C5D0F; --ambar-d:#7E4A0C; --ambar-t:#8A520E; --ambar-o:#F0B45C;
  --ambar-bg:#F7EEDF; --ambar-bg-2:#FCF7EF; --ambar-bd:#E8D3AF;

  /* Guinda institucional. Uso escaso: citas de ley y sellos normativos. */
  --guinda:#7A2142; --guinda-l:#9F2241; --guinda-bg:#F8EDF1;

  /* Estados */
  --ok:#1C7A4B; --info:#1D5AA8; --warn:#9A6A12; --danger:#A3271F; --tip:#6B4BA8;
  --ok-bg:#EAF6EF; --info-bg:#EEF4FB; --warn-bg:#FFF8EC; --danger-bg:#FBECEA; --tip-bg:#F4EEFB;
  --ok-bd:#BFE3CD; --info-bd:#CFE0F3; --warn-bd:#F0D9AE; --danger-bd:#F0CDC8; --tip-bd:#DDD0EF;

  /* Superficie y texto. El fondo es un hueso cálido, no un gris azulado: es la
     nota de "papel de expediente" que separa a este sitio de sus vecinos. */
  /* ⚠️ --muted se oscureció el 2026-08-28 (era #79828D): daba entre 3,32:1 y 3,90:1 según el
     fondo, y el mínimo AA para cuerpo normal es 4,5:1. Lo cazó Lighthouse en las 8 URLs
     auditadas, no la vista: un gris flojo se lee perfecto con buen monitor y buena luz, que
     es exactamente por qué este defecto sobrevive. Lo usan los eyebrow, las fechas de
     actualizado, las ayudas de los campos y los breadcrumbs, o sea texto chico en todas las
     páginas. Con #636C77 son 5,33:1 sobre blanco y 4,55:1 sobre el tile, que es el fondo más
     oscuro donde aparece. Mismo criterio que el ámbar de los botones. */
  --bg:#F7F5F1; --surface:#FFFFFF; --surface-alt:#FBFAF7; --tile:#E6EFEC;
  --ink:#1B2320; --soft:#4C5361; --muted:#636C77;
  --border:#E2E0D9; --border-2:#EFEDE7; --verde-bd:#B7D2CB;
  --bar-off:#CFCCC3;

  /* Forma */
  --r-bar:6px; --r-s:10px; --r:14px; --r-l:16px; --r-xl:18px; --r-cta:20px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(7,63,55,.05);
  --sh-2:0 1px 2px rgba(7,63,55,.05),0 12px 30px -18px rgba(7,63,55,.18);
  --sh-3:0 20px 44px -26px rgba(7,63,55,.8);
  --sh-ambar:0 12px 26px -20px rgba(178,107,18,.6);

  /* Tokens que consume la hoja de herramientas de sb-lib. Se mapean UNA vez y en un solo
     lugar: la librería no conoce la paleta de ningún sitio, y así la misma hoja sirve para
     el verde de éste y para el azul de mx-afore. */
  /* ⚠️ `--sb-brand-d` es el color de TEXTO de la librería (el título de la fase de cálculo),
     no un fondo. Apuntaba a `--verde-d`, que en oscuro sigue siendo un verde oscuro: mismo
     fallo que los títulos del sitio, importado. Va al token de título. */
  --sb-brand:var(--verde); --sb-brand-d:var(--titulo); --sb-brand-l:var(--verde-l);
  --sb-brand-bd:var(--verde-bd);
  --sb-accent:var(--ambar); --sb-accent-d:var(--ambar-d); --sb-accent-o:var(--ambar-o);
  --sb-accent-bg:var(--ambar-bg); --sb-accent-bd:var(--ambar-bd);
  --sb-track:var(--bar-off);

  --wrap:1120px; --pad:24px;
  --font:'Noto Sans','Noto Sans fb',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Modo oscuro por tokens, con los tres estados: el sistema, y la preferencia
   explícita en las dos direcciones. Se redefinen SOLO los tokens; ninguna regla
   de componente sabe en qué modo está. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --verde:#149B85; --verde-d:#0B5F52; --verde-l:#1DBBA1; --verde-br:#2ED3B7;
    --titulo:#2ED3B7;   /* el rol se invierte: en oscuro el título va CLARO */
    --sobre-ambar:#14171A;   /* sobre un ámbar claro, tinta oscura */
    --ambar:#E8A44C; --ambar-d:#C98A38; --ambar-t:#F5C377; --ambar-o:#F5C377;
    --ambar-bg:#2E2415; --ambar-bg-2:#241C10; --ambar-bd:#4A3A20;
    --guinda:#C4577A; --guinda-l:#D46B8E; --guinda-bg:#2C1620;
    --ok:#4FBF87; --info:#6BA3E8; --warn:#D8A94A; --danger:#E1786E; --tip:#A98BE0;
    --ok-bg:#12261C; --info-bg:#121D2C; --warn-bg:#2A2213; --danger-bg:#2C1614; --tip-bg:#211A2E;
    --ok-bd:#1F4433; --info-bd:#1E3350; --warn-bd:#463820; --danger-bd:#4A2622; --tip-bd:#382C4E;
    --bg:#14171A; --surface:#1B1F22; --surface-alt:#1F2427; --tile:#22302C;
    --ink:#E8E6E1; --soft:#B4BAB6; --muted:#939B96;
    --border:#2E3438; --border-2:#262B2E; --verde-bd:#2A4C45;
    --bar-off:#3A4145;
  }
}
:root[data-theme="dark"]{
  --verde:#149B85; --verde-d:#0B5F52; --verde-l:#1DBBA1; --verde-br:#2ED3B7;
    --titulo:#2ED3B7;   /* el rol se invierte: en oscuro el título va CLARO */
    --sobre-ambar:#14171A;   /* sobre un ámbar claro, tinta oscura */
  --ambar:#E8A44C; --ambar-d:#C98A38; --ambar-t:#F5C377; --ambar-o:#F5C377;
  --ambar-bg:#2E2415; --ambar-bg-2:#241C10; --ambar-bd:#4A3A20;
  --guinda:#C4577A; --guinda-l:#D46B8E; --guinda-bg:#2C1620;
  --ok:#4FBF87; --info:#6BA3E8; --warn:#D8A94A; --danger:#E1786E; --tip:#A98BE0;
  --ok-bg:#12261C; --info-bg:#121D2C; --warn-bg:#2A2213; --danger-bg:#2C1614; --tip-bg:#211A2E;
  --ok-bd:#1F4433; --info-bd:#1E3350; --warn-bd:#463820; --danger-bd:#4A2622; --tip-bd:#382C4E;
  --bg:#14171A; --surface:#1B1F22; --surface-alt:#1F2427; --tile:#22302C;
  --ink:#E8E6E1; --soft:#B4BAB6; --muted:#939B96;
  --border:#2E3438; --border-2:#262B2E; --verde-bd:#2A4C45;
  --bar-off:#3A4145;
}

/* ---------- 2. Reset y base ---------- */
*{box-sizing:border-box}
/* El display:none que el navegador le da a [hidden] pierde contra cualquier regla
   de autor con display. Se fuerza una vez para todo el sitio, en vez de tener que
   acordarse componente por componente. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

h1,h2,h3,h4{margin:0 0 .5em;color:var(--titulo);text-wrap:balance}
h1{font-weight:800;font-size:clamp(30px,3.8vw,42px);line-height:1.08;letter-spacing:-.022em}
h2{font-weight:800;font-size:32px;line-height:1.14;letter-spacing:-.015em}
h3{font-weight:700;font-size:20px;line-height:1.25}
h4{font-weight:700;font-size:17.5px;line-height:1.3}
@media (max-width:640px){h1{font-size:29px;line-height:1.12}h2{font-size:24px}h3{font-size:19px}}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--verde-l);text-underline-offset:2px}
a:hover{color:var(--titulo)}
strong{font-weight:700}
small{font-size:14px}
img,svg{max-width:100%}
ul,ol{margin:0 0 1em;padding-left:1.35em}
li{margin:.35em 0}
hr{border:0;border-top:1px solid var(--border);margin:32px 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--tile);padding:.1em .35em;border-radius:4px}

/* Foco visible en todo lo interactivo. No se quita nunca. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ambar);outline-offset:2px;border-radius:4px}

.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}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--verde-d);color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:8px;top:8px}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* Cifra grande: el héroe del sitio. El tamaño lo pone quien la usa; acá van los
   rasgos comunes. `tabular-nums` es obligatorio: sin él las cifras bailan de
   ancho al recalcular y una tabla de montos deja de alinearse. */
.figure-xl{font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1;color:var(--titulo)}
.num{font-variant-numeric:tabular-nums}

/* Rótulo en versalitas, arriba de cada bloque de dato. */
.eyebrow,.section-eyebrow{font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}

.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}

/* ---------- 3. Franja de estado del dato ----------
   Declara CUÁNDO se cotejó la normativa contra la fuente. En un sitio donde los
   números cambian cada 1 de enero, esa fecha es la señal de que el dato está vivo.
   A la derecha, la advertencia de sitio no oficial: se ACORTA en móvil, no se
   oculta (ocultarla la manda al pie, justo donde está la mayoría del tráfico). */
.databar{background:var(--verde-d);color:#EAF3F0;font-size:13.5px}
.databar__in{max-width:var(--wrap);margin:0 auto;padding:7px var(--pad);display:flex;gap:12px;align-items:center;justify-content:space-between}
.databar__msg{display:inline-flex;align-items:center;gap:8px;min-width:0}
.databar__msg strong{color:#fff}
.databar__dot{width:7px;height:7px;border-radius:50%;background:var(--ambar-o);flex:none;box-shadow:0 0 0 3px rgba(240,180,92,.22)}
.databar__no{color:#EAF3F0;text-decoration:underline;white-space:nowrap}
.databar__no:hover{color:#fff}
.databar__short{display:none}
@media (max-width:720px){.databar__full{display:none}.databar__short{display:inline}}

/* ---------- 4. Header y navegación ----------
   Cinco entradas, cada una abre un PANEL con las páginas de su cluster. Hecho con
   <details>/<summary>: sin framework, sin JS, navegable con teclado, y si el CSS
   no carga queda un índice desplegado y usable. */
.site-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.site-header__inner{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--titulo);flex:none}
.brand__mark{border-radius:9px}
.brand__txt{font-weight:600;font-size:18px;letter-spacing:-.01em}
.brand__txt strong{font-weight:800}

.nav-check{position:absolute}
.nav-toggle{display:none}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}

.nav__grupo{position:relative}
.nav__tit{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:9px 10px;border-radius:var(--r-s);font-weight:600;font-size:15px;color:var(--soft);white-space:nowrap}
.nav__tit::-webkit-details-marker{display:none}
.nav__tit:hover{background:var(--tile);color:var(--titulo)}
/* El chevron del sprite apunta a la DERECHA: se lo gira para que indique
   "esto se despliega hacia abajo", y media vuelta más cuando el panel ya está abierto. */
.nav__chev{width:13px;height:13px;transition:transform .15s;transform:rotate(90deg)}
.nav__grupo[open]>.nav__tit{background:var(--tile);color:var(--titulo)}
.nav__grupo[open]>.nav__tit .nav__chev{transform:rotate(270deg)}
.nav__panel{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-2);padding:16px;z-index:50}
.nav__resumen{font-size:13.5px;color:var(--muted);margin:0 0 10px;border-bottom:1px solid var(--border-2);padding-bottom:10px}
.nav__lista{list-style:none;margin:0;padding:0}
.nav__lista li{margin:0}
.nav__lista a{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:15.5px}
.nav__lista a:hover{background:var(--tile);color:var(--titulo)}
.nav__lista a[aria-current="page"]{color:var(--titulo);font-weight:700;background:var(--tile)}

.nav__cta{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:9px 14px;border-radius:var(--r-s);background:var(--ambar);color:var(--sobre-ambar);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;box-shadow:var(--sh-ambar)}
.nav__cta:hover{background:var(--ambar-d);color:#fff}

/* ⚠️ El corte lo fija el ancho que necesita el MENÚ, no un número redondo suelto. Con el
   logo mide 1061 px, y el contenedor sólo le da 1072 (--wrap 1120 menos 48 de relleno), así
   que por debajo de eso el botón «Herramientas» se sale por la derecha del contenido.
   Estuvo en 960 y entre 961 y 1119 desbordaba en silencio.
   ⚠️ Y son 1140, no 1120: la media query mide el viewport CON la barra de desplazamiento,
   que se lleva ~15 px del ancho de layout. Con 1120 clavado, a 1121 de ventana el menú
   seguía saliéndose 3 px. Los 1140 dejan ~16 px de aire real.
   Si algún día se suma un grupo al menú, este número sube con él. */
@media (max-width:1140px){
  .nav-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin-left:auto;padding:9px 14px;border:1px solid var(--border);border-radius:var(--r-s);font-weight:700;color:var(--titulo)}
  .nav-toggle__bars{width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
  .nav-check:focus-visible+.nav-toggle{outline:3px solid var(--ambar);outline-offset:2px}
  /* El panel EMPUJA el contenido, no lo tapa: un overlay a pantalla completa deja
     al lector sin referencia de dónde estaba. */
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px var(--pad) 20px;max-height:70vh;overflow-y:auto;box-shadow:var(--sh-2)}
  .nav-check:checked~.nav{display:block}
  .nav__grupo{position:static}
  .nav__tit{display:flex;justify-content:space-between;width:100%;padding:12px 6px;font-size:17px;border-bottom:1px solid var(--border-2);border-radius:0}
  .nav__panel{position:static;border:0;box-shadow:none;padding:4px 6px 12px;min-width:0}
  .nav__cta{display:flex;justify-content:center;margin:14px 0 0}
}

.breadcrumbs{background:var(--surface-alt);border-bottom:1px solid var(--border-2);font-size:13.5px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:9px 0}
.breadcrumbs li+li::before{content:"›";color:var(--muted);margin-right:6px}
.breadcrumbs a{color:var(--soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--titulo);text-decoration:underline}
.breadcrumbs [aria-current]{color:var(--muted)}

/* ---------- 5. Hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);margin:28px 0 32px;padding:44px 36px}
.hero--home{background:linear-gradient(140deg,var(--verde-d),var(--verde) 62%,var(--verde-l));color:#fff}
.hero--home h1{color:#fff}
/* ⚠️ `:not(.btn)` y no es cosmético. Sin la exclusión esta regla le gana por especificidad
   (0,1,1 contra 0,1,0) al `color:#fff` de `.btn--pri`, y el BOTÓN PRINCIPAL de la home queda
   con texto ámbar claro sobre fondo ámbar: 2,85:1, casi ilegible. Es la CTA de mayor tráfico
   del sitio. Lo cazó Lighthouse; a ojo se lee como una elección de diseño. */
.hero--home a:not(.btn){color:var(--ambar-o)}
.hero--content{background:var(--surface);border:1px solid var(--border);padding:32px 30px}
.hero__inner{position:relative;z-index:1;max-width:760px}
.hero__lede{font-size:19px;line-height:1.6;margin:0;color:inherit;opacity:.94}
.hero--content .hero__lede{color:var(--soft);opacity:1}
.hero__wm{position:absolute;right:-14px;bottom:-26px;opacity:.10;z-index:0}
.hero__wm .ico{width:210px;height:210px;stroke-width:1}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* ⚠️ SIN `opacity`. Tenía .9 y eso vuelve a romper el contraste de un color ya calibrado:
   --muted al 90% sobre blanco es #737B85 → 4,28:1, otra vez por debajo del mínimo. Un color
   corregido más una opacidad encima deja de estar corregido, y el defecto es invisible
   leyendo la hoja, porque el token dice el valor bueno. Si hace falta bajarle peso, se baja
   con un color, no con transparencia. */
.updated{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;margin:16px 0 0}
.updated__dot{width:7px;height:7px;border-radius:50%;background:var(--ambar-o)}
.hero--content .updated{color:var(--muted)}
.meta-guia{font-size:13.5px;color:var(--muted);margin:8px 0 0}
@media (max-width:640px){.hero{padding:30px 22px;margin:18px 0 24px}.hero--content{padding:24px 20px}.hero__lede{font-size:17.5px}}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--r-s);font-weight:700;font-size:16px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn--pri{background:var(--ambar);color:var(--sobre-ambar);box-shadow:var(--sh-ambar)}
.btn--pri:hover{background:var(--ambar-d);color:#fff}
.btn--sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--sec:hover{background:rgba(255,255,255,.12);color:#fff}
.hero--content .btn--sec{color:var(--titulo);border-color:var(--verde-bd)}
.hero--content .btn--sec:hover{background:var(--tile)}

/* ---------- 6. Secciones y paneles ---------- */
.secc{margin:0 0 44px}
.secc--corta{margin-bottom:28px}
.section-head{margin:0 0 18px}
.group-head{margin:32px 0 14px}
/* ⭐ LA MEDIDA DE LECTURA SE LE PONE AL TEXTO, NO A LA CAJA.
   72ch son los ~72 caracteres por línea que hacen cómodo leer un párrafo largo, y eso está
   bien. El problema era aplicárselo al `.panel`, que además lleva fondo y borde: la caja
   quedaba en 700 px de los 1072 del contenedor, alineada a la izquierda, con un hueco a la
   derecha que se lee como un error de maqueta —y lo parece, porque las secciones de al lado sí
   ocupan todo—.
   Ahora el panel ocupa su ancho y son sus párrafos los que se topan. Se enumeran los elementos
   de TEXTO a propósito: una tabla, una figura o un bloque de tarjetas dentro del panel tienen
   que poder usar todo el ancho, y con un `> *` se habrían estrujado a 700 px. */
.prosa{max-width:72ch}
.panel.prosa{max-width:none}
.panel.prosa > p,
.panel.prosa > ul,
.panel.prosa > ol,
.panel.prosa > h2,
.panel.prosa > h3,
.panel.prosa > h4,
.panel.prosa > blockquote,
.panel.prosa > .eyebrow,
.panel.prosa > .section-eyebrow{max-width:72ch}
/* ⚠️ Y lo que tiene FONDO va a ancho completo, aunque sea texto. La diferencia se ve poniendo
   una cita al lado de un callout: el callout llena el panel y se lee como una pieza; la cita
   cortada a 680 de 1072 parece que le falta algo. Un filete lateral es un adorno tipográfico y
   ahí la medida de lectura manda; un fondo dibuja una caja, y una caja a medias canta.
   La regla, en una línea: si pinta fondo, llena el ancho. */
.panel.prosa > .cita,
.panel.prosa > .callout,
.panel.prosa > .aviso{max-width:none}
.prosa h2{margin-top:1.4em}
.prosa h3{margin-top:1.6em}
/* Aclaración secundaria dentro de una celda o un párrafo: el matiz que califica al dato de
   al lado sin competirle en peso. */
.nota{display:inline-block;margin-top:4px;color:var(--soft);font-size:14.5px;line-height:1.45}
/* Cita textual de un documento oficial. Se usa poco y a propósito: sólo para el renglón que
   sostiene un argumento, como la nota al pie de la constancia sobre el último salario. */
.cita{margin:0 0 1em;padding:14px 18px;border-left:3px solid var(--verde-bd);background:var(--tile);border-radius:0 var(--r-s) var(--r-s) 0;color:var(--ink);font-size:16.5px}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 30px;margin:0 0 24px}
.panel>:last-child{margin-bottom:0}
@media (max-width:640px){.panel{padding:22px 20px;border-radius:var(--r-l)}}

.itile{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-s);background:var(--tile);color:var(--titulo);flex:none}

/* ---------- 7. Avisos ----------
   Cuatro tonos y ninguno decorativo: info explica, ok confirma, warn advierte de
   una consecuencia, danger avisa de algo que puede costarle dinero al lector. */
.aviso{display:flex;gap:14px;padding:16px 18px;border-radius:var(--r);border:1px solid var(--info-bd);background:var(--info-bg);margin:0 0 20px;font-size:16px}
.aviso>.ico{margin-top:3px;color:var(--info)}
.aviso strong{color:var(--ink)}
.aviso>div>:last-child{margin-bottom:0}
.aviso--ok{border-color:var(--ok-bd);background:var(--ok-bg)}
.aviso--ok>.ico{color:var(--ok)}
.aviso--warn{border-color:var(--warn-bd);background:var(--warn-bg)}
.aviso--warn>.ico{color:var(--warn)}
.aviso--danger{border-color:var(--danger-bd);background:var(--danger-bg)}
.aviso--danger>.ico{color:var(--danger)}
.aviso--tip{border-color:var(--tip-bd);background:var(--tip-bg)}
.aviso--tip>.ico{color:var(--tip)}
.aviso--badge{border-style:dashed;background:var(--surface-alt);border-color:var(--border);font-size:14.5px;color:var(--soft)}

/* ---------- 8. Tarjetas y rejillas ---------- */
.cards,.rej{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin:0 0 24px;padding:0;list-style:none}
.rej--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.rej--3{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.rej--4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:20px 22px;text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--verde-bd);box-shadow:var(--sh-2);transform:translateY(-1px);color:var(--ink)}
.card h3{margin:0;color:var(--titulo);font-size:18px}
.card p{margin:0;color:var(--soft);font-size:15.5px}
.card__arrow{margin-top:auto;padding-top:8px;color:var(--ambar-t);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.card .itile{margin-bottom:2px}

/* ---------- 9. Pasos ----------
   La numeración va en un disco y la línea los une: es la línea de tiempo otra vez,
   que es el motivo gráfico del sitio. */
.steps{list-style:none;margin:0 0 24px;padding:0}
.steps li{position:relative;padding:0 0 22px 52px;margin:0}
/* El número lo emite sb_steps() en .steps__h; acá se lo convierte en el disco de la línea
   de tiempo. No se usa un `counter` de CSS a propósito: el número tiene que estar en el
   HTML para que se lea sin hoja de estilos y para que lo vea un extractor de contenido. */
.steps__h{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--verde);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.steps li::after{content:"";position:absolute;left:17px;top:40px;bottom:2px;width:2px;background:var(--border)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps__body>:last-child{margin-bottom:0}
.steps__body h3{margin:0 0 4px;font-size:18px}

.pasos-h{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));list-style:none;margin:0 0 24px;padding:0;counter-reset:pasoh}
.pasos-h li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:20px}
.pasos-h__n{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--tile);color:var(--titulo);font-weight:800;font-size:14px;margin-bottom:10px}

/* ---------- 10. Tablas ----------
   Toda tabla scrollea DENTRO de su contenedor. El body del sitio no se mueve en
   horizontal nunca. */
.table-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface);-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:15.5px}
.table caption{caption-side:top;text-align:left;padding:14px 18px 0;font-size:14px;color:var(--muted)}
.table th,.table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--border-2);vertical-align:top}
.table thead th{background:var(--surface-alt);color:var(--titulo);font-weight:700;font-size:14px;letter-spacing:.01em;white-space:nowrap;position:sticky;top:0}
.table tbody tr:last-child td{border-bottom:0}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-comp .fila--top{background:var(--ambar-bg-2)}
.tabla-comp .fila--top td{font-weight:600}

/* En pantallas chicas, las tablas marcadas para apilar dejan de ser tablas y pasan
   a ser fichas. Sólo las que lo piden: una tabla de dos columnas no lo necesita. */
@media (max-width:640px){
  /* ⭐ Las tablas que NO apilan —las de dos columnas, que son las comparativas— tienen que
     CABER. Con `table-layout:auto` el navegador nunca las encoge por debajo de la suma de sus
     columnas mínimas: la de /modalidad-40-imss/calculadora medía 482 px dentro de un
     contenedor de 340 y el resultado era una segunda columna cortada a mitad de palabra. El
     envoltorio se puede desplazar, sí, pero nada en pantalla lo dice: se lee como texto roto.
     Con `fixed` las dos columnas se reparten el ancho por igual y el texto envuelve. Queda
     estrecho, y es lo correcto: lo que da valor a una comparativa es ver las dos al lado. */
  .table-wrap:not(.table-wrap--stack) .table{table-layout:fixed}
  .table-wrap:not(.table-wrap--stack) .table td,
  .table-wrap:not(.table-wrap--stack) .table th{overflow-wrap:break-word}
  /* Y el encabezado tiene que poder envolver. `white-space:nowrap` está bien en escritorio
     —evita partir «Del salario» en dos— y es imposible en 390 px: dejaba «Lo que la
     calculadora te da» cortado en «Lo que la calculadora». */
  .table-wrap:not(.table-wrap--stack) .table thead th{white-space:normal}

  .table-wrap--stack .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-wrap--stack .table tr{display:block;border-bottom:1px solid var(--border);padding:8px 0}
  .table-wrap--stack .table tr:last-child{border-bottom:0}
  .table-wrap--stack .table td{display:flex;justify-content:space-between;gap:16px;border:0;padding:5px 16px}
  /* El rótulo NO se encoge. Los dos son flex items y encogían a la par, así que uno de tres
     palabras se comprimía hasta su palabra más larga: «Por qué no está» quedaba en 51 px, en
     cuatro renglones de una palabra, y la fila crecía a 112 px de alto contra 61 de las de al
     lado. Con flex-shrink 0 toma el ancho que necesita y el valor se queda con el resto; el
     tope del 45 % es para que un rótulo largo no deje al valor sin sitio. */
  .table-wrap--stack .table td::before{content:attr(data-label);font-weight:700;color:var(--titulo);
    font-size:14px;flex:0 0 40%}
  /* ⭐ Una celda vacía se va entera. En una tabla normal un hueco es un hueco y se lee bien;
     apilada, cada celda se convierte en un renglón con su rótulo delante, así que una vacía
     imprime «Detalle» y nada más. Salían hasta diez por página en siete páginas del sitio, y
     el renglón huérfano se lee como un dato que se perdió. */
  .table-wrap--stack .table td:empty{display:none}
/* La celda-rótulo de la fila (primera columna sin encabezado, ver sb_table): en apilado no
   lleva ::before —no hay columna de la que venga— y encabeza la ficha a todo el ancho. */
.table-wrap--stack .table tbody th{display:block;border:0;padding:5px 16px;font-weight:700;color:var(--titulo)}
.table-wrap--stack .table tbody th:empty{display:none}
/* En escritorio el rótulo de fila se ve igual que antes: la negrita la pone el contenido si
   la quiere, no el cambio de etiqueta. */
.table tbody th{font-weight:inherit}
  /* El valor entero, en UNA sola columna. `space-between` ya lo empuja al borde derecho
     cuando es corto y lo deja envolver cuando es largo, así que no lleva alineación propia:
     ponerle text-align:right dejaba las frases con el margen izquierdo dentado.
     `min-width:0` sí hace falta: sin él un flex item no baja del ancho de su contenido y una
     palabra larga empuja la fila entera. */
  .table-wrap--stack .table .td__v{min-width:0}

}

/* ---------- 11. Preguntas frecuentes ----------
   <details> otra vez: sin JS, y el contenido está en el HTML aunque esté plegado,
   que es lo que hace que sirva para AEO. */
.faq{margin:0 0 24px}
.faq__item{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin:0 0 10px;overflow:hidden}
.faq__item>summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;color:var(--titulo);display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq__item>summary::-webkit-details-marker{display:none}
.faq__item>summary::after{content:"+";font-size:22px;line-height:1;color:var(--ambar-t);flex:none}
.faq__item[open]>summary::after{content:"−"}
.faq__item[open]>summary{border-bottom:1px solid var(--border-2)}
.faq__a{padding:16px 20px}
.faq__a>:last-child{margin-bottom:0}

/* ---------- 12. Figuras, fuentes y entradilla ---------- */
.fig{margin:0 0 24px}
.fig__box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:22px;overflow-x:auto}
.fig figcaption{font-size:14px;color:var(--muted);margin-top:10px}


.entrada{margin:0 0 20px}
.entrada__mas{cursor:pointer;color:var(--verde-l);font-weight:700;font-size:15.5px}

/* ---------- 13. Herramientas ----------
   Todas las herramientas del sitio son client-side: el dato del usuario no sale de
   su navegador y no se guarda nada. Es el argumento de privacidad que los
   competidores de pago no pueden dar, y por eso el componente lo dice en la cara. */
.calc{background:var(--surface);border:1px solid var(--verde-bd);border-radius:var(--r-xl);padding:28px 30px;margin:0 0 28px;box-shadow:var(--sh-2)}
.calc__priv{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-bd);border-radius:var(--r-pill);padding:5px 14px;margin-bottom:18px}
/* ⭐ DOS COLUMNAS COMO MÁXIMO, y las filas alineadas con `subgrid`.
   Antes eran `minmax(220px,1fr)`, o sea hasta cuatro columnas en un escritorio ancho, y cada
   campo se maquetaba por su cuenta: con rótulos de distinto largo —«Semanas que llevas
   cotizadas» ocupa dos líneas y «Ley» una— los recuadros quedaban a alturas distintas y el
   formulario se leía como una escalera. Se veía en /cuantas-semanas-cotizadas-necesito, que
   tiene los cuatro rótulos más largos del sitio.

   `subgrid` es lo que lo arregla de verdad: cada `.field` deja de tener su propia caja y pasa a
   usar las filas del contenedor, así el rótulo, el recuadro y la línea de ayuda se alinean
   ENTRE columnas aunque el de al lado ocupe dos renglones. Un `align-items` no sirve: alinea la
   caja entera, no sus partes.

   Y a 320px de mínimo entran dos, no cuatro: los campos quedan más anchos —más cómodos de
   tocar y de leer lo que uno escribió— a cambio de gastar el alto, que en una página larga no
   escasea. */
/* ⚠️ min(420px,100%) y NO 420px a secas. Un `minmax` con un mínimo fijo no se encoge por
   debajo de ese mínimo: en una pantalla de 390 px la columna seguía midiendo 420 y la
   PÁGINA ENTERA se desplazaba de lado 75 px. Es el modo de falla clásico de auto-fit, y no
   se ve en el escritorio, que es donde se escribió la regla. */
.calc__campos{display:grid;gap:20px 22px;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.field{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:6px}
/* ⚠️ Sin esto, `subgrid` ESTIRA cada elemento hasta llenar su fila: en la fila de los
   recuadros manda el más alto —los chips de «¿Qué ley te rige?», que van en dos renglones— y
   los <input> de al lado se convertían en cajas del doble de altura. Alinear arriba deja que
   cada uno conserve su tamaño y que lo único compartido sea la LÍNEA en la que empieza, que es
   justo lo que se quería. */
.field > *{align-self:start}
/* Sin subgrid (navegadores viejos) vuelve al comportamiento de antes, que se ve peor pero
   funciona: es una degradación, no una rotura. */
@supports not (grid-template-rows: subgrid){
  .field{display:flex;flex-direction:column}
}
/* ⚠️ `inline-flex` acá y no en la hoja de sb-lib. El (i) es un <button>: de nivel inline pero
   se comporta como bloque dentro de un <label> de bloque, así que caía en su PROPIA LÍNEA
   debajo de la etiqueta, descolgado y comiéndose un renglón por campo. Se vio en una captura
   de móvil, no leyendo el CSS.
   Vive en el CSS del SITIO porque es maqueta, no comportamiento: cuando estaba en la librería
   le cambiaba el reflujo de las etiquetas a mx-afore, que no lo había pedido. */
/* ⚠️ NO es un flex. Lo era, y el (i) es un hijo: con `inline-flex` el texto de la etiqueta y
   el botón son dos items distintos, así que en cuanto el texto no entra en un renglón se lleva
   el ancho entero y el (i) cae SOLO a la línea de abajo, como un punto suelto. Pasaba en tres
   de las herramientas a 390 px. Es el mismo fallo que tenían las celdas de las tablas
   apiladas: flex separa lo que la maqueta supone junto.
   Con la etiqueta en línea, el (i) fluye detrás de la última palabra y envuelve con ella. */
.field__lbl{font-weight:700;color:var(--titulo);font-size:15.5px;
  position:relative;display:inline-flex;align-items:baseline;gap:7px;flex-wrap:nowrap}
.field__lbl--grupo{margin-bottom:2px}
/* ⭐ La línea de ayuda de cada campo, SIEMPRE visible. Dos trabajos a la vez: dice lo que
   evita el error antes de cometerlo —el (i) guarda el detalle largo— y es el sitio donde se
   escribe el aviso de validación, que así entra sin mover un píxel del formulario.
   ⚠️ No lleva `padding` ni `border`: el mensaje de error tiene que ocupar exactamente el mismo
   alto que este texto, o el formulario saltaría justo al fallar. */
.field__help{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.field__i,.calc input[type=text],.calc input[type=number],.calc input[type=date],.calc select{
  font:inherit;font-size:16px;padding:13px 15px;border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface);color:var(--ink);width:100%;font-variant-numeric:tabular-nums}
.calc input:focus,.calc select:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px rgba(11,95,82,.14)}
.field__lim{font-size:13px;color:var(--muted);margin-top:4px}

/* Chips: la forma de elegir cuando las opciones son pocas y excluyentes. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;padding:9px 16px;border:1px solid var(--border);border-radius:var(--r-pill);cursor:pointer;font-size:15.5px;background:var(--surface)}
.chip input:checked+span{background:var(--verde);border-color:var(--verde);color:#fff;font-weight:700}
.chip input:focus-visible+span{outline:3px solid var(--ambar);outline-offset:2px}

/* El resultado. La cifra grande primero, el desglose después, y el fundamento
   legal al pie de cada paso: es lo que nos separa de las calculadoras que tiran
   un número sin decir de dónde salió. */
.res{margin-top:24px;border-top:2px solid var(--verde);padding-top:22px}
.res__cifra{font-weight:800;font-size:clamp(38px,6vw,54px);letter-spacing:-.03em;line-height:1;color:var(--titulo);font-variant-numeric:tabular-nums}
.res__unidad{font-size:.42em;font-weight:700;color:var(--muted);letter-spacing:0}
.res__lbl{font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.res__pasos{list-style:none;margin:22px 0 0;padding:0;counter-reset:rp}
.res__pasos li{border-left:2px solid var(--border);padding:0 0 16px 18px;position:relative}
.res__pasos li::before{content:"";position:absolute;left:-5px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--verde)}
.res__pasos li:last-child{padding-bottom:0}
.res__paso-t{font-weight:700;color:var(--titulo)}
.res__paso-d{font-variant-numeric:tabular-nums}
.res__fund{display:block;font-size:13px;color:var(--muted);margin-top:3px}
/* El bloque "¿Y ahora qué?": el resultado no termina en un número, termina en un
   camino. Es donde de verdad se navega el sitio. */
.ahora{background:var(--ambar-bg-2);border:1px solid var(--ambar-bd);border-radius:var(--r-l);padding:20px 22px;margin-top:24px}
.ahora h3{color:var(--ambar-t);margin-bottom:10px;font-size:17px}
.ahora ul{margin:0;padding-left:1.2em}

@media (max-width:640px){.calc{padding:22px 20px}}

/* Zona para soltar el archivo del lector de constancia. Es un <label> envolviendo un input
   escondido: así funciona con clic, con teclado y con arrastrar, sin una línea de JS para el
   caso básico. */
.soltar{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:38px 24px;border:2px dashed var(--verde-bd);border-radius:var(--r-l);
  background:var(--surface-alt);cursor:pointer;transition:border-color .15s,background .15s}
.soltar:hover,.soltar.es--sobre{border-color:var(--verde);background:var(--tile)}
.soltar .ico{width:38px;height:38px;color:var(--verde)}
.soltar__t{font-weight:700;color:var(--titulo);font-size:17px}
.soltar__s{color:var(--muted);font-size:14.5px}
.calc__intro{max-width:72ch;margin:0 0 18px}
.soltar__estado{margin-top:14px;color:var(--soft);font-size:15px}

/* ---------- 14. Línea de tiempo ----------
   El motivo gráfico del sitio: la rampa de semanas 2021→2031, la de cuotas de
   Modalidad 40, el historial laboral, la conservación de derechos. Todas usan
   este mismo componente. */
.linea{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:0}
.linea li{position:relative;padding:0 0 20px 30px;border-left:2px solid var(--border)}
.linea li:last-child{border-left-color:transparent;padding-bottom:0}
.linea li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--verde)}
.linea li.es--hoy::before{background:var(--ambar);border-color:var(--ambar)}
.linea li.es--hoy{font-weight:600}
.linea__a{font-weight:800;color:var(--titulo);font-variant-numeric:tabular-nums;display:inline-block;min-width:4ch}
.linea__v{color:var(--soft)}

/* Barras comparativas: las cifras que se leen mejor una al lado de la otra (los
   dos topes, el antes y el después de Modalidad 40). */
.barras{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.barras li{display:grid;grid-template-columns:minmax(110px,auto) 1fr auto;gap:14px;align-items:center}
.barras__b{height:14px;border-radius:var(--r-bar);background:var(--bar-off);overflow:hidden}
.barras__f{display:block;height:100%;border-radius:var(--r-bar);background:var(--verde)}
.barras li.es--alto .barras__f{background:var(--ambar)}
.barras__v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--titulo)}

/* ---------- 15. Footer ---------- */
.site-footer{background:var(--verde-d);color:#D8E6E2;margin-top:56px;font-size:15px}
.site-footer .container{padding-top:44px;padding-bottom:32px}
.footer-about{max-width:640px;margin:0 0 34px}
.footer-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-brand__txt{font-weight:600;font-size:19px;color:#fff}
.footer-brand__txt strong{font-weight:800}
.footer-about p{margin:0;color:#B9CDC8;font-size:14.5px}
.footer-grid{display:grid;gap:26px 32px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.footer-col h3{color:var(--ambar-o);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:.45em 0}
.footer-col a{color:#D8E6E2;text-decoration:none;font-size:14.5px}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-legal-bar{border-top:1px solid rgba(255,255,255,.13);font-size:13.5px;color:#9FB6B1}
.footer-legal-bar .container{padding-top:16px;padding-bottom:20px}

/* ---------- 16. Impresión ----------
   Una constancia se imprime, y un resultado de calculadora también: mucha gente
   lo lleva impreso a la Subdelegación. Que salga legible es parte del trabajo. */
@media print{
  .databar,.site-header,.site-footer,.breadcrumbs,.nav,.ahora{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .panel,.calc,.card{border-color:#999;box-shadow:none}
  /* ⚠️ `break-inside:avoid` SÓLO en los bloques cortos. En `.panel` y `.calc` —que suelen ser
     más altos que media hoja— obliga a empujarlos enteros a la página siguiente y deja la
     anterior medio vacía: la primera hoja de /pension-ley-73 salía con el título y nada más.
     Una tarjeta o una pregunta sí caben, y ahí partirlas se lee peor. */
  .card,.faq__item,.res__paso{break-inside:avoid}
  .faq__item{break-inside:avoid}
  .faq__a{display:block!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ── Lector: el archivo elegido, antes de leerlo ────────────────────────────────
   Confirma QUÉ se cargó antes de procesarlo. El nombre en negrita y el peso al lado son lo que
   permite darse cuenta de que uno agarró el PDF equivocado: en la carpeta de descargas la
   constancia convive con otros papeles del IMSS de nombre parecido, y el peso los distingue
   —una constancia son decenas de KB; un escaneo, varios MB—. */
.cargado{margin-top:14px;padding:14px 16px;border:1px solid var(--verde-bd);border-radius:var(--r-l);
  background:var(--tile)}
.cargado__f{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:15.5px;
  font-weight:600;color:var(--titulo);word-break:break-all}
.cargado__f .ico{flex:none;width:20px;height:20px;color:var(--verde)}
.cargado__peso{flex:none;font-weight:400;font-size:13.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.cargado .sb-acciones{margin-top:0;padding-top:0;border-top:0}

/* La zona de carga, marcada al volver del sistema del IMSS. box-shadow y no border ni
   padding: tiene que llamar la atención sin ocupar un píxel, porque volver a una pestaña
   no cuenta como interacción y cualquier desplazamiento que provoque suma al CLS. */
.soltar.es--vuelta{
  box-shadow:0 0 0 3px var(--verde), 0 8px 24px rgba(0,0,0,.10);
  animation:sb-vuelta 1.1s ease-out 2;
}
@keyframes sb-vuelta{ 0%,100%{box-shadow:0 0 0 3px var(--verde),0 8px 24px rgba(0,0,0,.10)}
                      50%{box-shadow:0 0 0 7px rgba(47,111,78,.22),0 8px 24px rgba(0,0,0,.10)} }
@media (prefers-reduced-motion: reduce){ .soltar.es--vuelta{animation:none} }