/* ============================================================
   Portal ISSSTE — app.css (relanzamiento 2026)
   Sistema de diseño guinda institucional · Noto Sans + Noto Serif
   Reemplaza a assets/css/app.css. Mismas clases/IDs del sitio actual.
   Objetivo CWV: liviano, sin frameworks, íconos SVG inline.
   ============================================================ */

/* ---------- 0. Fallbacks con métricas ajustadas ----------
   Las Noto tienen la caja de línea ~18% más alta (136px vs 114-115px @100px) y son más
   anchas que Arial/Georgia. Sin ajustar, cuando el webfont carga el texto reflota y todo
   sube ~28px (CLS 0.15 en la home de citas; y el LCP se registraba recién en el swap,
   ~2.7s). Estos fallback ocupan el MISMO espacio que la Noto → sin reflow: CLS ~0 y el
   LCP cae a la primera pintura. Ratios medidos en el navegador (size-adjust = ancho;
   ascent/descent = la caja de línea 136% de la Noto, ~107%+29%). */
@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%}
@font-face{font-family:'Noto Serif fb';src:local('Georgia'),local('Times New Roman'),local('serif');size-adjust:109.4%;ascent-override:107%;descent-override:29%;line-gap-override:0%}

/* ---------- 1. Tokens ---------- */
/* Tokens del rediseño 2026. La referencia es docs/design/handoff/README.md, sección "Tokens
   usados"; los prototipos que los ejercitan están en docs/design/handoff/.
   El azul no se movió: era el correcto y sigue igual. Lo que cambia es el acento —el dorado
   pasa a verde— y la tipografía, que deja de usar serif. */
:root{
  /* Marca — sin cambios respecto del sitio anterior */
  --brand:#074d6f; --brand-l:#0a6a94; --brand-d:#05374f; --brand-br:#0e7fa8;

  /* Acción. El dorado #c08a2e se retira: colisionaba con afore.mx (#c9a227) y con el
     secundario del gobierno. --accent-d es el hover (más oscuro, no más claro: el diseño
     oscurece al pasar el mouse). --accent-t es para texto verde sobre fondo claro, donde
     #5fa544 no alcanza contraste; --accent-o es el verde sobre fondo oscuro. */
  --accent:#5fa544; --accent-d:#4c8f36; --accent-t:#3f7d28; --accent-o:#9ad47a;
  --accent-l:#9ad47a;                    /* alias heredado, apunta al verde sobre oscuro */

  /* Naranja: uso escaso, sólo como acento puntual */
  --orange:#f4801f; --orange-t:#d4690f;

  /* Superficies del acento verde. El handoff las usa en tres sitios y hasta ahora había que
     escribirlas a mano: la banda CTA verde clara de la portada (--accent-bg / --accent-bd),
     la fila destacada del primer lugar de una tabla (--accent-bg-2, más pálida para que el
     texto negro siga leyéndose) y el cuadrito ✓ de las listas de requisitos. --orange-bg es
     su equivalente para la lista de errores (cuadrito ×). */
  --accent-bg:#eef7e9; --accent-bg-2:#f6fbf3; --accent-bd:#cfe6c0; --orange-bg:#fdeee2;
  /* El equivalente azul de --accent-bd: borde suave en color de marca, para las piezas que
     invitan a tocar sin gritar (el disco de los radios). --tile ya era su relleno; faltaba
     el borde, que se venía escribiendo a mano. */
  --brand-bd:#bcd7e4;

  --ok:#1c7a4b; --info:#1d5aa8; --warn:#6b5426; --danger:#a3271f; --purple:#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 / texto */
  --bg:#f2f6f8; --surface:#fff; --surface-alt:#f7fafb; --tile:#e9f2f7;
  --ink:#1b2430; --soft:#48545f; --muted:#74828f; --border:#dde7ed; --border-2:#eef3f6;
  --bar-off:#b8c8d2;                     /* barras inactivas de los gráficos */

  /* Forma. El diseño usa una escala más ancha que la anterior: 6 en barras, 10 en botones,
     14 en avisos, 16 en tarjetas, 18 en paneles, 20 en bloques CTA, 999 en chips. */
  --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,55,79,.05);
  --sh-2:0 1px 2px rgba(7,55,79,.05),0 12px 30px -18px rgba(7,55,79,.18);
  --sh-3:0 20px 44px -26px rgba(7,55,79,.8);          /* bloque oscuro */
  --sh-accent:0 12px 26px -20px rgba(95,165,68,.7);   /* destacado verde */

  --wrap:1120px; --pad:24px;
  --font:'Noto Sans','Noto Sans fb',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* --serif se conserva declarada porque quedan páginas sin rediseñar que la usan.
     El diseño nuevo NO la usa en ningún lado: es Noto Sans en todo, pesos 600/700/800. */
  --serif:'Noto Serif','Noto Serif fb',Georgia,serif;
}

/* ---------- 2. Reset / base ---------- */
*{box-sizing:border-box}
/* El display:none que el navegador da a [hidden] pierde contra cualquier regla de autor
   con display (.dir-rows li{display:flex} dejaba de ocultarse al filtrar). Se fuerza acá
   una vez para todo el sitio, en vez de recordarlo componente por componente. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
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}
/* Escala tipográfica del rediseño. Noto Sans en todo: el serif se retiró del sistema.
   Los tamaños salen de docs/design/handoff/README.md y están en px, no en rem, porque el
   diseño los especifica así y la mezcla de unidades era una fuente de deriva. */
h1,h2,h3,h4{margin:0 0 .5em;color:var(--brand-d);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}
/* Rótulo en versalitas: el patrón que el diseño repite arriba de cada bloque de dato. */
.eyebrow{font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* Escala móvil de titulares. docs/design/handoff/responsive.css la exige a ≤640px
   (h1 29 · h2 24 · h3 20) y faltaba: el h1 bajaba solo por el clamp, pero el h2 se quedaba
   clavado en 32px y en una pantalla de 390 un titular de sección ocupaba tres renglones. */
@media (max-width:640px){
  h1{font-size:29px;line-height:1.12}
  h2{font-size:24px}
  h3{font-size:19px}
}
/* Cifra grande. El tamaño lo pone quien la usa; acá van los rasgos comunes. */
.figure-xl{font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--brand-br);text-decoration:none}
a:hover{color:var(--brand);text-decoration:underline}
strong{color:var(--brand-d);font-weight:700}
img{max-width:100%;height:auto}
.num{font-variant-numeric:tabular-nums}
.container{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico--s{width:15px;height:15px}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--brand);color:#fff;padding:10px 16px;border-radius:var(--r-s)}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:3px solid rgba(14,127,168,.45);outline-offset:2px;border-radius:4px}
::selection{background:#cbe6f2;color:#05374f}

/* ---------- 3. Topbar ---------- */
.topbar{background:var(--brand-d);color:#cfe3ec}
.topbar .container{display:flex;align-items:center;gap:9px;padding:8px 20px;font-size:12.5px;font-weight:500}
.topbar__dot{width:7px;height:7px;border-radius:50%;background:var(--accent-l);box-shadow:0 0 0 3px rgba(95,165,68,.22);flex:none}
.topbar strong{color:var(--accent-o)}

/* ---------- 4. Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(7,55,79,.03),0 6px 20px -16px rgba(7,55,79,.4)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand__img{height:46px;width:auto;display:block}
.brand__mark{width:44px;height:44px;flex:none;border-radius:12px;background:linear-gradient(160deg,var(--brand-l),var(--brand));display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(7,77,111,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.brand__mark .ico{width:26px;height:26px;stroke:#fff}
.brand__text{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand__name{display:flex;flex-direction:column;gap:3px}
.bn1{font-weight:700;font-size:16px;line-height:1;color:#1c1c1c}
.bn2{font-weight:800;font-size:27px;line-height:1;letter-spacing:.005em;color:var(--brand);margin-top:2px}
.nav{display:flex;align-items:center;gap:2px}
.nav__group{position:relative}
.nav__top{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:0;background:transparent;border-radius:var(--r-s);font:600 14.5px/1 var(--font);color:var(--brand-d);cursor:pointer}
.nav__top:hover,.nav__group:hover .nav__top,.nav__top[aria-expanded="true"]{background:var(--tile)}
.nav__top--active{color:var(--brand-br)}
.nav__caret{color:var(--accent);transition:transform .2s}
.nav__group:hover .nav__caret,.nav__top[aria-expanded="true"] .nav__caret{transform:rotate(90deg)}
.nav__panel{position:absolute;top:100%;left:0;margin-top:10px;min-width:270px;background:#fff;border:1px solid var(--border);border-radius:var(--r-l);padding:8px;box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.nav__group:hover .nav__panel,.nav__top[aria-expanded="true"]+.nav__panel{opacity:1;visibility:visible;transform:none}
.nav__panel a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-s);font:500 14.5px/1.25 var(--font);color:var(--soft)}
.nav__panel a:hover{background:var(--tile);color:var(--brand);text-decoration:none}
.nav__panel a .ico{width:15px;height:15px;color:var(--brand);flex:none;padding:7px;background:var(--tile);border-radius:8px;box-sizing:content-box}
.nav__link{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:9px;font:600 14.5px/1 var(--font);color:var(--soft)}
.nav__link:hover{background:var(--bg);text-decoration:none}
.nav__link--active{color:var(--brand-br);background:var(--bg)}
.nav__cta{margin-left:8px;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:10px;background:var(--accent);color:#fff;font:700 15px/1 var(--font)}
.nav__cta:hover{background:var(--accent-d);color:#fff;text-decoration:none}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--r-s);background:#fff;flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span{width:20px;height:2px;background:var(--brand-d);border-radius:2px;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Drawer móvil */
.nav-drawer{display:none;border-top:1px solid var(--border);background:#fff;max-height:78vh;overflow:auto}
.nav-drawer[hidden]{display:none}
.nav-drawer .container{padding:12px var(--pad) 24px}
.nav-drawer__group{padding:12px 0;border-bottom:1px solid var(--border-2)}
.nav-drawer__h{font:700 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin:0 0 8px}
.nav-drawer a{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;color:var(--soft);border-radius:var(--r-s)}
.nav-drawer a:hover{color:var(--brand);text-decoration:none}
.nav-drawer__lbl{display:flex;align-items:center;gap:10px;font:600 15px/1.2 var(--font)}
.nav-drawer__lbl .ico{color:var(--accent)}
/* Se escopa bajo .nav-drawer para ganarle en especificidad a `.nav-drawer a` (que si no pinta el
   texto en gris y lo alinea a la izquierda). */
.nav-drawer .nav-drawer__cta{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:14px;padding:0 20px;border-radius:10px;background:var(--accent);color:#fff;font:700 16px/1 var(--font)}
.nav-drawer .nav-drawer__cta:hover{background:var(--accent-d);color:#fff;text-decoration:none}

/* ---------- 5. Breadcrumb ---------- */
.breadcrumbs{padding:14px 0 0}
/* En una sola línea con scroll propio: si envuelve a 2 líneas y luego el webfont la
   reacomoda a 1, la página entera salta 29px (CLS 0.16 medido en el breadcrumb más largo).
   Además en móvil un breadcrumb de dos renglones se lee peor. */
/* Con la barra de scroll oculta, el texto cortado a ras del borde parece un bug de
   layout. El degradado avisa que sigue; cuando el contenido entra, cae sobre espacio
   vacío y no se nota. */
.breadcrumbs ol{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--muted);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.breadcrumbs ol::-webkit-scrollbar{display:none}
.breadcrumbs li{flex:none;white-space:nowrap}
.breadcrumbs a{color:var(--brand-br);font-weight:600}
.breadcrumbs [aria-current="page"]{color:var(--soft);font-weight:600}
.breadcrumbs .sep{display:inline-flex;vertical-align:middle;color:var(--border)}
/* En pantallas chicas, las rutas de 4 niveles (las fichas de unidad) dejaban el crumb
   actual cortado a la mitad. Ese crumb no es un enlace y el H1 lo repite justo debajo:
   se cede su espacio a los ancestros, que son los que sirven para subir. El schema
   BreadcrumbList va en el JSON-LD, así que la ruta completa se sigue publicando.
   Con :has() sin soporte no se oculta nada y queda el scroll de siempre. */
@media (max-width:560px){
  .breadcrumbs ol:has(li:nth-child(4)) li:last-child{display:none}
  /* Con 2 o 3 crumbs no se oculta nada, pero "Inicio › Comparar y elegir › Cambiar de AFORE"
     igual no entra en 390px y el último quedaba cortado por la máscara, dentro de un scroll
     horizontal que casi nadie descubre. Se deja envolver: dos renglones cortos se leen; medio
     crumb tapado por un degradado, no. */
  .breadcrumbs ol{flex-wrap:wrap;overflow-x:visible;row-gap:2px;
    -webkit-mask-image:none;mask-image:none}
}

/* ---------- 6. Hero ---------- */
main{display:block}
.hero{position:relative;margin-top:24px;border-radius:var(--r-xl);overflow:hidden}
.hero__inner{position:relative;z-index:1;padding:44px 42px;max-width:680px}
/* decorativo (aria-hidden): nunca debe interceptar clics/toques sobre los CTA */
/* Anclado al borde derecho y centrado vertical (criterio de mx-pp). Antes iba colgado
   de la esquina inferior (right:-40px;bottom:-50px) y se metía DEBAJO del texto en todos
   los anchos — 178px de solape incluso a 1280px. */
.hero__wm{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:0;opacity:.06;pointer-events:none}
.hero__wm .ico{width:260px;height:260px;stroke-width:1}
/* Por debajo de 980px el texto ocupa todo el ancho del hero: el watermark solo estorba. */
@media (max-width:980px){.hero__wm{display:none}}
.hero h1{margin:16px 0 0}
.hero h1 span{color:var(--accent-l)}
.hero__lede{font-size:17.5px;line-height:1.6;margin:16px 0 0}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.section-eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;padding:7px 13px;border-radius:999px}
.updated{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:13.5px;font-weight:600;color:var(--ok)}
.updated__dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
/* Hero HOME — banda guinda (dirección 1e) */
.hero--home,.hero--home{background:linear-gradient(155deg,var(--brand-l) 0%,var(--brand) 55%,var(--brand-d) 100%);box-shadow:0 24px 50px -26px rgba(7,55,79,.7)}
.hero--home h1,.hero--home .hero__wm .ico{color:#fff}
.hero--home .hero__wm{fill:#fff;stroke:none;opacity:.07}
.hero--home .hero__lede{color:#cfe0ea}
/* El <strong> global es guinda oscuro: sobre la banda guinda del hero quedaba casi
   invisible (era el caso de "la reforma BAJA la edad" en jubilación). En claro. */
.hero--home .hero__lede strong,.hero--home .hero__lede b{color:#fff;font-weight:700}
.hero--home .hero__lede a{color:var(--accent-o);text-decoration:underline;text-underline-offset:3px}
.hero--home .updated{color:#8fd6ab}
.hero--home .updated__dot{background:#8fd6ab}
.hero--home .section-eyebrow{color:var(--accent-o);background:rgba(124,190,88,.14);border:1px solid rgba(124,190,88,.35)}
/* Hero CONTENIDO — plano sobre el fondo de página, SIN caja: es lo que pide el handoff. El
   título arranca en el margen del contenido, no indentado por una banda con borde. Antes era
   una banda clara (--surface-alt) con borde y acento lateral azul de 6px; se quitó entero. */
.hero--content{background:transparent;border:0}
.hero--content h1{color:var(--brand-d)}
.hero--content h1 span{color:var(--accent)}
.hero--content .hero__lede{color:var(--soft)}
/* Sin caja, la marca de agua ya no tiene un recinto que llenar y flotaría suelta a la derecha:
   el handoff no la muestra, así que se oculta en el hero de contenido. */
.hero--content .hero__wm{display:none}
/* Sin caja, el bloque no lleva NINGÚN padding: el H1 y la bajada se alinean con el borde del
   contenedor, igual que el resto de la página. El relleno de .hero__inner (44px en escritorio,
   22px en móvil) existe para el hero de la home, que sí es una caja azul: ahí separa el texto
   de su propio borde. Acá no hay borde del que separarse, así que era aire muerto.
   El padding-BOTTOM también se anula (antes se conservaba). Se sumaba a los 34px de margen del
   .section-head siguiente y daba 78px de hueco bajo la línea "Actualizado": el doble que
   cualquier otra separación de la página, y sin nada en el medio que lo justificara. Ahora la
   distancia la pone el margen del elemento que sigue, como en el resto del sitio.
   Arriba pasa lo mismo: sin padding-top ni margin-top del primer hijo, el gap con el breadcrumb
   queda en los 24px del margin-top del .hero, que es la separación que pide el diseño. */
.hero--content .hero__inner{padding:0}
.hero--content .hero__inner > :first-child{margin-top:0}

/* ---------- 7. Stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:20px;box-shadow:var(--sh-1)}
.stat__n{font-weight:800;font-size:27px;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.stat__l{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.35}

/* ---------- 8. Box / secciones ---------- */
.box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:28px 30px;box-shadow:var(--sh-2);margin:22px 0}
.box h2{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.box .lede{color:var(--muted)}
.box ul{margin:0;padding-left:0;list-style:none}
.box ul li{position:relative;padding:6px 0 6px 26px;line-height:1.55}
.box ul li::before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.itile{width:38px;height:38px;flex:none;border-radius:10px;background:var(--tile);display:grid;place-items:center}
.itile .ico{color:var(--brand)}

/* ---------- 9. Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 22px;border-radius:11px;font:600 15px/1 var(--font);cursor:pointer;border:1.5px solid transparent;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn .ico{width:17px;height:17px}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 10px 20px -10px rgba(7,77,111,.6)}
.btn--primary:hover{background:var(--brand-l);color:#fff}
.btn--ghost{background:#fff;color:var(--brand);border-color:var(--border-2)}
.btn--ghost:hover{background:var(--surface-alt);color:var(--brand)}
.btn--accent{background:var(--accent);color:#fff;font-weight:700;box-shadow:var(--sh-accent)}
.btn--accent:hover{background:var(--accent-d);color:#fff}
.btn--link{background:transparent;color:var(--brand-br);min-height:auto;padding:0}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- 10. Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
/* Grilla y no columna: el azulejo y el título comparten fila, y la descripción y la
   flecha ocupan el ancho completo debajo. Antes el azulejo estaba en su propia línea y
   el título caía debajo, lo que partía la tarjeta en dos bloques sueltos y desperdiciaba
   una línea entera. Esta disposición ya existía sólo para ≤560px; es la correcta en
   cualquier ancho. */
.card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:22px;text-decoration:none;box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--accent-bd);box-shadow:0 18px 38px -20px rgba(7,55,79,.4)}
.card .itile{width:46px;height:46px;margin-bottom:0}
.card .itile .ico{width:24px;height:24px}
.card h3{color:var(--brand-d);margin:0}
.card p{grid-column:1/-1;font-size:14.5px;line-height:1.55;color:var(--soft);margin:12px 0 14px}
.card__arrow{grid-column:1/-1;margin-top:auto;display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--font);color:var(--brand-br)}
/* Móvil: ícono y título en la misma línea (evita el salto de línea con la tarjeta a ancho completo) */
@media (max-width:560px){
  /* La estructura ya es grilla desde el default; acá sólo se ajustan tamaños. */
  .card{column-gap:12px}
  .card .itile{width:42px;height:42px}
  .card p{margin:10px 0 12px}
  .card__arrow{margin-top:0}
}

/* ---------- 11. Tablas ---------- */
.table-wrap{border:1.5px solid var(--border-2);border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--sh-1);margin:16px 0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap .table{min-width:520px}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table thead th{background:var(--brand);color:#fff;text-align:left;padding:14px 20px;font:700 13.5px/1 var(--font);letter-spacing:.03em}
.table td{padding:13px 20px;color:var(--soft);border-top:1px solid var(--border-2)}
.table tbody tr:nth-child(even){background:var(--surface-alt)}
.table td strong{color:var(--brand-d)}

/* ---------- 12. Steps ---------- */
/* Pasos en tarjetas lado a lado (infografía), no en columna: se abarca la secuencia
   completa de un vistazo. El número rota entre los tres colores de marca, los mismos
   que usan los niveles de atención en .info-levels. */
/* Grid con auto-fill, no flex-wrap: si la última fila queda incompleta, el paso suelto
   conserva el ancho de columna en vez de estirarse a toda la fila. */
.steps{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.steps li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:17px 18px 16px;box-shadow:var(--sh-1)}
.steps__h{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font:800 14px/1 var(--font);margin-bottom:12px;box-shadow:0 4px 10px -5px rgba(7,77,111,.7)}
.steps li:nth-child(3n+2) .steps__h{background:var(--brand-br)}
.steps li:nth-child(3n+3) .steps__h{background:var(--accent)}
.steps h3{margin:0 0 5px;font-size:15.5px;color:var(--brand-d)}
.steps p{margin:0;font-size:14.5px;line-height:1.55;color:var(--soft)}

/* ---------- 13. FAQ ---------- */
.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1);margin-bottom:10px;padding:2px 6px}
.faq__item summary{list-style:none;cursor:pointer;padding:16px 14px;font:600 16px/1.4 var(--font);color:var(--brand-d);display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";width:26px;height:26px;flex:none;border-radius:7px;background:var(--tile);color:var(--accent);display:grid;place-items:center;font:700 18px/1 var(--font)}
.faq__item[open] summary::after{content:"–"}
.faq__a{padding:0 14px 16px;font-size:15.5px;line-height:1.6;color:var(--soft)}

/* ---------- 14. Callouts ---------- */
.callout{display:flex;gap:14px;border-radius:13px;padding:16px 20px;margin:18px 0;line-height:1.6;font-size:15.5px}
.callout .ico{flex:none;margin-top:1px}
.callout__body{margin:0}
.callout--info{background:var(--info-bg);border:1px solid var(--info-bd);color:#2c4a70}
.callout--info .ico{color:var(--info)} .callout--info strong{color:var(--info)}
.callout--ok{background:var(--ok-bg);border:1px solid var(--ok-bd);color:#215c3f}
.callout--ok .ico{color:var(--ok)} .callout--ok strong{color:var(--ok)}
.callout--warn{background:var(--warn-bg);border:1px solid var(--warn-bd);color:#6d4d0e}
.callout--warn .ico{color:var(--warn)} .callout--warn strong{color:var(--warn)}
.callout--danger{background:var(--danger-bg);border:1px solid var(--danger-bd);color:#7a2019}
.callout--danger .ico{color:var(--danger)} .callout--danger strong{color:var(--danger)}
.callout--tip{background:var(--tip-bg);border:1px solid var(--tip-bd);color:#4a3670}
.callout--tip .ico{color:var(--purple)} .callout--tip strong{color:var(--purple)}

/* ---------- 15. Directorio ---------- */
.dir-list{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.dir-list li a{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--sh-1);color:var(--ink)}
.dir-list li a:hover{text-decoration:none;border-color:var(--accent-bd);box-shadow:0 12px 28px -18px rgba(7,55,79,.35)}
.dir-list .ico{width:44px;height:44px;flex:none;color:var(--brand);padding:0;background:var(--tile);border-radius:11px;padding:10px;box-sizing:content-box}
.dir-list strong{display:block;font:700 16px/1.3 var(--font);color:var(--brand-d)}
.dir-meta{font-size:13.5px;color:var(--muted)}
/* Buscador del directorio: filtro instantáneo, no un formulario que se envía */
.dirsearch{margin:22px 0 6px}
.dirsearch__lbl{display:block;font:700 15px/1.3 var(--font);color:var(--brand-d);margin:0 0 8px}
.dirsearch__box{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--border-2);border-radius:12px;padding:0 14px;box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s}
.dirsearch__box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,127,168,.12)}
.dirsearch__box .ico{color:var(--accent);flex:none}
.dirsearch__box input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:14px 0;font:400 16px/1.3 var(--font);color:var(--ink)}
.dirsearch__box input::-webkit-search-cancel-button{cursor:pointer}
.dirsearch__hint{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.dirsearch__count{margin:8px 0 0;font:600 13.5px/1.4 var(--font);color:var(--brand-br);min-height:1.2em}
.dirsearch__empty{margin:10px 0 0;padding:14px 16px;background:var(--surface-alt);border:1px solid var(--border-2);border-radius:12px;font-size:14.5px;color:var(--soft)}
/* Coincidencia resaltada en los resultados (hereda color y peso: solo marca el fondo) */
.dir-list mark,.dir-rows mark{background:#f7e3b4;color:inherit;font-weight:inherit;border-radius:3px;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dir-nivel{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-size:1.12rem}
.dir-nivel .ico{width:20px;height:20px;flex:none;color:var(--brand-br)}
.dir-nivel .pill{font-size:12px;padding:4px 10px;font-weight:600}

/* ---- Lista densa del directorio ----
   Para los tramos largos (el primer nivel de un estado son decenas de unidades casi
   idénticas): fila por unidad en vez de tarjeta, sin ícono repetido, con el municipio
   —que es por donde la gente busca— y el teléfono a la vista. El teléfono es un enlace
   aparte para poder llamar sin entrar a la ficha (no puede ir anidado en el <a> de la
   fila). Las tarjetas .dir-list quedan para los tramos cortos, donde sí se eligen. */
.dir-rows{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--border)}
.dir-rows li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.dir-rows li:hover{background:var(--surface-alt)}
.dir-rows__main{flex:1;min-width:0;display:flex;align-items:baseline;gap:14px;padding:13px 12px;color:var(--ink)}
.dir-rows__main:hover{text-decoration:none}
/* Anchos fijos, no porcentajes: si una columna cambia de ancho por fila (un teléfono
   vs "Sin teléfono"), las demás dejan de alinearse entre sí. */
.dir-rows strong{flex:none;width:270px;font:600 15.5px/1.35 var(--font);color:var(--brand-d)}
.dir-rows .dir-meta{flex:1;min-width:0}
.dir-rows__tel,.dir-rows__sintel{flex:none;width:165px;padding:13px 12px;white-space:nowrap}
.dir-rows__tel{display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--font);color:var(--brand-br)}
.dir-rows__tel .ico{width:15px;height:15px;flex:none}
.dir-rows__sintel{font-size:13.5px;color:var(--muted)}
@media (max-width:700px){
  .dir-rows li{flex-wrap:wrap;padding:4px 0}
  .dir-rows__main{flex-direction:column;align-items:flex-start;gap:3px;padding:9px 10px;width:100%}
  .dir-rows strong{width:100%}
  .dir-rows .dir-meta{flex:none;width:auto}
  .dir-rows__tel,.dir-rows__sintel{width:auto;padding:0 10px 10px}
}
.states-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.states-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 15px;background:#fff;border:1px solid var(--border);border-radius:11px;font:600 14px/1.2 var(--font);color:var(--brand-d)}
.states-list a:hover{text-decoration:none;border-color:var(--accent-bd);background:var(--surface-alt);color:var(--brand)}

/* ---------- 16. Herramientas / calculadoras ---------- */
/* scroll-margin: al revelar el resultado hacemos scroll a la card, y el header es
   sticky (70px). Sin este margen, el arranque del resultado queda tapado. */
.tool{margin:20px 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 30px;box-shadow:var(--sh-2);scroll-margin-top:88px}
.tool__title{display:flex;align-items:center;gap:12px;margin-bottom:22px;font:700 20px/1.2 var(--font);color:var(--brand-d)}
.tool__title .itile{width:40px;height:40px;border-radius:11px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.field:first-of-type,.grid2 .field{margin-top:0}
.field label{font:600 13.5px/1.3 var(--font);color:var(--soft)}
.field input,.field select{padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font:600 16px var(--font);color:var(--ink);background:#fff;width:100%}
.field select{padding-right:40px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237a8290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.field input:focus,.field select:focus{border-color:var(--brand-br);outline:none;box-shadow:0 0 0 3px rgba(14,127,168,.12)}
/* Chips segmentados */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip-opt{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border:1.5px solid var(--border);border-radius:10px;background:#fff;font:600 14.5px/1 var(--font);color:var(--soft);cursor:pointer;transition:.15s}
.chip-opt .ico{width:16px;height:16px;opacity:0;transition:.15s}
.chip-opt:hover{border-color:var(--accent-bd)}
/* Seleccionado = tinte claro + borde guinda, NO relleno sólido: el relleno guinda sólido
   queda reservado al botón de acción, para que una opción elegida no parezca un CTA. */
.chip-opt[aria-pressed="true"]{background:var(--tile);border-color:var(--brand);color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.chip-opt[aria-pressed="true"] .ico{opacity:1;color:var(--brand)}
/* Vigencia grid (constancia) */
.vig-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vig-opt{border:1.5px solid var(--border);border-radius:12px;padding:16px;background:#fff;cursor:pointer;text-align:left}
.vig-opt[aria-checked="true"]{border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,127,168,.12)}
.vig-opt__dur{font-weight:700;color:var(--brand-d)}
.vig-opt__price{color:var(--accent);font-weight:700}
/* Resultado — dirección 1g (claro, jerárquico) */
.tool__result{position:relative;margin-top:22px;border:1.5px solid var(--border-2);border-radius:var(--r-l);overflow:hidden}
.tool__result::before{content:"Estimación para tu perfil";display:flex;align-items:center;background:var(--brand);color:var(--accent-o);padding:11px 20px;font:600 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase}
.tool__result .muted-l{padding:24px 24px 0;display:block;font:600 12.5px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface-alt)}
.tool__result .big{padding:8px 24px 20px;background:var(--surface-alt);font:800 46px/1 var(--font);color:var(--brand);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.result-rows{display:grid;grid-template-columns:1fr 1fr}
.result-rows>div{padding:15px 20px;border-top:1px solid var(--border-2)}
.result-rows>div:nth-child(even){border-left:1px solid var(--border-2)}
.result-rows span{display:block;font-size:12.5px;color:var(--muted)}
.result-rows b{font:800 20px/1.2 var(--font);color:var(--brand-d);font-variant-numeric:tabular-nums}
@keyframes spin{to{transform:rotate(360deg)}}
.calc-reveal{animation:reveal .4s ease both}
@keyframes reveal{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.disclaimer-ymyl{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:#9a8f7d;font-style:italic}

/* ---------- 16.b Herramientas: formulario → procesamiento → resultado → rutas ----------
   El resultado no aparece mientras se teclea: se pide con un botón, se procesa a la
   vista y recién entonces se revela. Ese ritmo es lo que separa una herramienta de un
   input con JavaScript. */
/* Etiqueta + botón (i): la explicación de cada campo. El panel es un TOOLTIP flotante
   (position:absolute) — se superpone al contenido en vez de empujarlo, así abrirlo no
   mueve ni un pixel del formulario. El .field es el contenedor de referencia, de modo
   que el ancho del tooltip nunca se sale de su columna. */
/* flex-start y no center: con align-items:center, en un rótulo que ocupa DOS líneas —"Salario
   promedio de las últimas 250 semanas (diario)"— el botón ⓘ se iba al medio del bloque, flotando
   entre las dos líneas. Alineado arriba acompaña a la primera línea, que es donde se lo busca.
   En rótulos de una línea no cambia nada: la altura es la misma. */
.field__lbl{position:relative;display:flex;align-items:flex-start;gap:7px}
.field__lbl label{margin:0}
/* El ⓘ mide 24px y la línea de texto ~21px: este medio pixel de compensación lo centra con la
   primera línea en vez de dejarlo asomando por encima. */
.field__lbl > .field__i{margin-top:-1px}
/* Variante para los grupos de chips (sb_group_label): el rótulo es un .wz-q__t, que trae su
   propio margen inferior. Dentro del flex ese margen descentraría el botón (i) respecto del
   texto, así que se mueve del <p> al contenedor. */
.field__lbl--grupo{margin-bottom:9px}
.field__lbl--grupo .wz-q__t{margin:0}
.field__i{flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:var(--tile);color:var(--brand);cursor:pointer;transition:background .15s,color .15s}
.field__i .ico{width:15px;height:15px;stroke-width:2}
.field__i:hover{background:var(--brand);color:#fff}
.field__i[aria-expanded="true"]{background:var(--brand);color:#fff}
.field__help{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:100%;margin:0;padding:13px 16px;
  background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--r);
  box-shadow:0 18px 40px -14px rgba(7,55,79,.45),0 2px 6px rgba(7,55,79,.08);
  font-size:14px;line-height:1.55;color:var(--soft);animation:tip-in .16s ease both}
.field__help::before{content:"";position:absolute;bottom:100%;left:var(--tip-x,22px);border:7px solid transparent;border-bottom-color:var(--accent)}
.field__help[hidden]{display:none}
/* El panel de ayuda terminó con fondo var(--brand-d): un strong de ese mismo color era
   texto invisible. Blanco, como el resto del panel. */
.field__help strong{color:#fff}
@keyframes tip-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.field__help{animation:none}}
.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}
/* Texto que sólo aparece con sitio de sobra. Para bajadas que en el teléfono empujan la
   herramienta fuera de la primera pantalla sin aportar nada que el propio formulario no diga.
   Ojo: es display:none, así que el texto NO se lee en móvil —ni con lector de pantalla—; usar
   sólo para lo prescindible, nunca para una instrucción que haga falta para completar el form. */
@media (max-width:720px){ .solo-ancho{display:none} }

.tool__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.tool__hint{font-size:13px;color:var(--muted)}
/* Margen ARRIBA Y ABAJO: el aviso no siempre va al final. En /retiro-afore-65-anos se emite
   antes del botón, y con margen sólo superior quedaba pegado a él. */
.tool__err{margin:14px 0;padding:11px 15px;border-radius:var(--r-s);background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger);font-size:14px;font-weight:600}
.tool__out{outline:none}
.tool__out.is-in{animation:reveal .45s ease both}

/* Card de procesamiento. Guinda = en curso (el verde queda para lo ya resuelto). */
.calc-load{background:var(--surface);border:1.5px solid var(--border-2);border-top:3px solid var(--brand);border-radius:var(--r-l);padding:24px;margin-top:22px;box-shadow:0 12px 30px -18px rgba(7,55,79,.35)}
.cl-head{display:flex;align-items:center;gap:11px}
.cl-head b{font:700 17px/1.3 var(--font);color:var(--brand-d)}
.cl-spin{flex:none;width:18px;height:18px;border:2.5px solid rgba(7,77,111,.18);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
.cl-bar{height:8px;background:var(--tile);border-radius:6px;overflow:hidden;margin-top:16px}
.cl-bar>i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--brand-br),var(--brand));transition:width .18s ease-out}
.cl-pct{text-align:right;font:700 12px/1 var(--font);color:var(--muted);margin-top:7px;font-variant-numeric:tabular-nums}
.cl-steps{margin-top:15px;display:flex;flex-direction:column;gap:10px}
.cl-step{display:flex;align-items:center;gap:11px;font-size:14.5px;color:#a49a8c;transition:color .2s}
.cl-dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--surface-alt);border:1.5px solid var(--border-2);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;transition:background .2s,border-color .2s}
.cl-step.is-active{color:var(--ink);font-weight:600}
.cl-step.is-active .cl-dot{background:var(--brand);border-color:var(--brand)}
.cl-step.is-done{color:var(--soft)}
.cl-step.is-done .cl-dot{background:var(--ok);border-color:var(--ok)}
.cl-step.is-done .cl-dot::after{content:"\2713"}
.cl-priv{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.cl-spin{animation:none}}

/* Encabezado del resultado: con qué datos se calculó + volver al formulario. */
.res-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 14px;margin-top:22px}
.res-sel{display:flex;flex-wrap:wrap;gap:8px}
.res-chip{display:inline-flex;align-items:baseline;gap:7px;background:var(--surface-alt);border:1px solid var(--border-2);border-radius:999px;padding:6px 14px;line-height:1.2}
.res-chip .k{color:var(--muted);font:600 11px/1 var(--font);letter-spacing:.04em;text-transform:uppercase}
.res-chip .v{color:var(--brand-d);font:700 14px/1.2 var(--font);font-variant-numeric:tabular-nums}
.res-back{flex:none;min-height:44px;padding:0 20px;border:0;border-radius:11px;background:var(--brand);color:#fff;font:700 14.5px/1 var(--font);cursor:pointer;box-shadow:0 10px 20px -10px rgba(7,77,111,.6);transition:background .15s,transform .15s}
.res-back:hover{background:var(--brand-l);transform:translateY(-1px)}
.res-top+.tool__result{margin-top:14px}
/* Misma idea para el título del resultado del wizard: .res-top no trae margen inferior propio
   —lo pone el hermano que va debajo— y sin esta regla el h3 quedaba pegado al botón "Cambiar
   mis respuestas". Se nota sobre todo en móvil, donde el botón ocupa la fila entera. */
.res-top+.wz-out__h{margin-top:18px}

/* "Y ahora, ¿qué?": las rutas al contenido interno, puntuadas por el caso del usuario.
   Las 2 más pertinentes van en dorado — el acento de marca reservado a destacar. */
.next{margin-top:26px}
.next__h{margin:0 0 14px;font:800 19px/1.25 var(--font);color:var(--brand-d)}
.next__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.next__card{display:flex;flex-direction:column;gap:4px;padding:17px 19px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);text-decoration:none;box-shadow:var(--sh-1);transition:transform .15s,box-shadow .15s,border-color .15s}
.next__card:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--accent-bd);box-shadow:0 16px 34px -20px rgba(7,55,79,.4)}
.next__badge{align-self:flex-start;margin-bottom:5px;padding:3px 10px;border-radius:999px;background:var(--accent);color:#fff;font:800 10.5px/1.5 var(--font);letter-spacing:.05em;text-transform:uppercase}
.next__t{font:700 15.5px/1.35 var(--font);color:var(--brand-d)}
.next__d{font-size:14px;line-height:1.5;color:var(--soft)}
.next__card::after{content:"Ver más →";margin-top:11px;align-self:flex-start;color:var(--brand-br);font:700 14px/1 var(--font);text-decoration:underline;text-underline-offset:3px}
.next__card:hover::after{color:var(--brand)}
.next__card--feat{border-color:var(--accent);background:#fdf8ee;box-shadow:0 0 0 1px var(--accent),0 10px 24px -16px rgba(192,138,46,.6)}
.next__card--feat:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 16px 32px -16px rgba(192,138,46,.7)}

/* ---------- 17. Sources / E-E-A-T ---------- */
.sources{margin:22px 0;padding:18px 20px;background:var(--surface-alt);border:1px dashed var(--border-2);border-radius:var(--r);font-size:13.5px;color:var(--muted);line-height:1.55}
.sources__label{color:var(--brand-d);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.sources__label .ico{color:var(--accent)}
.tag-oficial{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok);font:700 12px/1 var(--font)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--tile);color:var(--brand);font:600 12.5px/1 var(--font)}

/* ---------- 18. Footer (índice del sitio: marca + grupos en masonry + AFORES + barra legal) ---------- */
.site-footer{background:var(--brand-d);color:rgba(255,255,255,.72);margin-top:56px}
.site-footer>.container{padding-top:44px;padding-bottom:32px}
.site-footer strong{color:#fff}
.footer-about{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-bottom:30px}
.footer-about .footer-logo{height:40px;width:auto;display:block}
.footer-about p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);max-width:52ch}
/* Los grupos fluyen en columnas balanceadas (masonry): se empaquetan por altura, sin celdas
   vacías ni huecos como dejaba la grilla rígida de 4 columnas. */
.footer-grid{column-count:4;column-gap:32px}
.footer-col{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 26px;display:inline-block;width:100%}
.footer-col h3{font:800 12px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-o);margin:0 0 14px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:14.5px;color:rgba(255,255,255,.72)}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-afores{margin-top:6px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;line-height:2;color:rgba(255,255,255,.72)}
.footer-afores__lbl{font:800 12px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-o);margin-right:12px}
.footer-afores__sep{margin:0 8px;opacity:.4}
.footer-afores a{color:rgba(255,255,255,.72)}
.footer-afores a:hover{color:#fff;text-decoration:none}
.footer-legal-bar{border-top:1px solid rgba(255,255,255,.12)}
.footer-legal-bar .container{padding-top:18px;padding-bottom:18px;font-size:13px;color:rgba(255,255,255,.5)}

/* ---------- 19. Infografías ---------- */
.info-levels{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--border-2);border-radius:var(--r-l);overflow:hidden;background:#fff;margin:16px 0}
.info-levels>div{padding:22px 24px}
.info-levels>div+div{border-left:1px solid var(--border-2)}
.info-levels .lvl-badge{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;color:#fff;font:800 15px/1 var(--font)}

/* ---------- 20. Responsive ---------- */
@media (max-width:860px){
  body{font-size:16px}
  /* En móvil el nav plano se colapsa detrás del botón hamburguesa, que abre el drawer. */
  .nav{display:none}
  .nav-toggle{display:flex}
  .nav-drawer{display:block}
  .nav-drawer[hidden]{display:none}
  .stat-row,.states-list{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .footer-grid{column-count:2}
  .info-levels{grid-template-columns:1fr}
  .info-levels>div+div{border-left:0;border-top:1px solid var(--border-2)}
  .hero__inner{padding:34px 26px}
}
@media (max-width:560px){
  .grid2,.stat-row,.cards,.states-list,.result-rows,.vig-grid,.next__grid{grid-template-columns:1fr}
  /* CTA oficial: el botón tiene flex:none y no encoge, así que en pantallas angostas
     se desbordaba. A ancho completo la etiqueta puede envolver. */
  .official-cta{padding:22px 18px}
  .official-cta .btn{flex:1 0 100%;justify-content:center}
  .btn{max-width:100%;padding:11px 16px;line-height:1.3;text-align:center}

  /* el footer se queda en DOS columnas en móvil (una sola lo hacía altísimo); se aprieta el gap
     y baja un punto la tipografía para que entre el texto más largo. */
  .footer-grid{column-count:2;column-gap:18px}
  .footer-col a{font-size:13.5px}
  .result-rows>div:nth-child(even){border-left:0}
  .box{padding:22px 20px}
  .tool{padding:22px 20px}
  .tool__result .big{font-size:38px}
  .calc-load{padding:20px 18px}

  /* En móvil la HERRAMIENTA es el gancho de la página: tiene que asomar en la primera
     pantalla, no después de un scroll. El hero se compacta para cederle ese espacio
     (sigue diciendo lo mismo, ocupa ~110px menos) y el arranque de la card se aprieta. */
  .hero{margin-top:14px}
  .hero__inner{padding:22px 20px}
  .hero h1{font-size:1.55rem}
  .hero__lede{font-size:16px;line-height:1.5;margin-top:11px}
  .updated{margin-top:11px;font-size:12.5px}
  .section-eyebrow{padding:5px 11px;font-size:11px}
  .hero__cta{margin-top:16px}
  .tool{margin-top:14px}
  .tool__title{margin-bottom:16px;font-size:18px;line-height:1.25}
  .tool__title .itile{width:34px;height:34px;border-radius:9px}
  .tool__title .itile .ico{width:18px;height:18px}
  .field{margin-top:13px}

  /* Pasos: en una columna, el número ocupaba un renglón entero y el título caía debajo.
     Se pone el número AL LADO del título (el texto sigue bajo el título, no bajo el
     número). display:contents sube h3 y p al grid del <li>. Solo móvil: de 561px para
     arriba las tarjetas van en varias columnas y ahí el número arriba funciona bien. */
  .steps li{display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:5px;align-items:center}
  .steps__body{display:contents}
  .steps__h{margin-bottom:0}
  .steps h3{margin:0}
  .steps p{grid-column:2}
  /* En móvil el botón de volver ocupa el ancho: es el único escape del resultado. */
  .res-top{gap:14px}
  .res-back{flex:1 0 100%}
  .table-wrap .table{min-width:0;font-size:13px}
  .table thead th,.table td{padding-left:12px;padding-right:12px}

  /* Tablas de 3+ columnas: no caben a lo ancho, así que cada fila pasa a tarjeta y la
     cabecera se repite por celda con data-label (en vez de cortarse o scrollear). */
  .table-wrap--stack{border:0;background:transparent;box-shadow:none;overflow:visible}
  .table-wrap--stack .table--stack{display:flex;flex-direction:column;font-size:14.5px;min-width:0}
  .table-wrap--stack .table--stack thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .table-wrap--stack .table--stack tbody{display:block;order:1}
  .table-wrap--stack .table--stack caption{order:2;display:block;border:1.5px solid var(--border-2);border-radius:var(--r-l);margin-top:2px}
  .table-wrap--stack .table--stack tr{display:block;background:#fff;border:1.5px solid var(--border-2);border-radius:var(--r-l);box-shadow:var(--sh-1);margin:0 0 10px;overflow:hidden}
  .table-wrap--stack .table--stack tbody tr:nth-child(even){background:#fff}
  .table-wrap--stack .table--stack td{display:block;border-top:0;padding:10px 15px}
  .table-wrap--stack .table--stack td+td{border-top:1px solid var(--border-2)}
  .table-wrap--stack .table--stack td::before{content:attr(data-label);display:block;font:700 11px/1.4 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--brand);margin-bottom:3px}
}

/* ---------- 21. Ajustes de integración (labels de resultado por herramienta) ---------- */
#jub .tool__result::before{content:"Tu estimación"}
#agui .tool__result::before{content:"Tu aguinaldo estimado"}
#deudo .tool__result::before{content:"Tu código de deudo"}
#decisor .tool__result::before{content:"Nuestra recomendación"}
/* jub/decisor muestran un veredicto (texto), no un monto: el .big no debe ir a 46px */
#jub .tool__result .big,#decisor .tool__result .big{font-size:22px;line-height:1.2}
/* marca de agua del hero home: nuestros íconos son de trazo, mantener stroke (no fill) */
.hero--home .hero__wm{fill:none!important;stroke:#fff!important;opacity:.08}
.hero--home .hero__wm .ico{stroke-width:1}
/* info-levels: detalle de badge/título/pill dentro de cada nivel */
.info-levels .lvl-badge{margin-bottom:12px}
.info-levels h3{margin:0 0 6px;color:var(--brand-d)}
.info-levels p{font-size:14.5px;line-height:1.55;color:var(--soft);margin:0 0 12px}
/* caption de tablas: nota de referencia como pie muted */
.table caption{caption-side:bottom;text-align:left;padding:11px 18px;font-size:12.5px;line-height:1.5;color:var(--muted);background:var(--surface-alt);border-top:1px solid var(--border-2)}
/* En el hero guinda, el botón principal va DORADO (como el diseño); el guinda se lavaría sobre el fondo guinda */
.hero--home .btn--primary{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.hero--home .btn--primary:hover{background:var(--accent-d);color:#fff}
.hero--home .btn--primary .ico{color:#fff}
/* split: texto + columna de mini-enlaces (home ¿qué es?, fichas) */
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
.split>div:first-child p:last-child{margin-bottom:0}
.split .dir-list{margin:0}
.split .dir-list li a .ico:last-child{margin-left:auto;width:15px;height:15px;padding:0;background:none;color:var(--brand-br)}
.section-eyebrow .ico{width:14px;height:14px}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:18px}}
/* encabezado de sección abierto (heading + subtítulo a la derecha), no boxed */
/* bajada apilada bajo el título (no flotando a la derecha): mismo patrón que .group-head */
.section-head{display:block;margin:34px 0 10px}
/* mismo lockup ícono+título que .box h2, para que rotular una tabla o unos pasos se vea
   igual que rotular una caja de texto (pero sin dibujar una tarjeta vacía alrededor) */
.section-head h2{display:flex;align-items:center;gap:12px;margin:0}
.section-head p{margin:6px 0 0;max-width:70ch;color:var(--muted);font-size:15px}
/* anclas internas: compensar el header sticky para que el título no quede tapado */
/* encabezado de grupo de tarjetas: rotula sin parecer tarjeta clicable */
/* rótulo de grupo de tarjetas: título con barra de acento a la izquierda (neutro, sin ícono) */
.group-head{display:flex;align-items:center;gap:11px;margin:30px 0 14px;font-weight:800;font-size:22px;letter-spacing:-.015em;color:var(--brand)}
.group-head::before{content:"";width:4px;height:1.05em;border-radius:2px;background:var(--brand-br);flex:none}
.section-head[id],.group-head[id],.box h2[id],.box h3[id]{scroll-margin-top:96px}
/* Y lo mismo para el contenedor de cada herramienta. sbTool() hace scrollIntoView({block:'start'})
   al calcular y al volver, y sin este margen el borde superior de la caja quedaba DEBAJO de la
   cabecera fija (.site-header, 71px + sombra): se calculaba y el resultado aparecía cortado por
   arriba. `.tool` ya lo tenía; las calculadoras usan .panel.calc, que no.
   Va sobre [data-form-id] porque es el atributo que llevan las siete herramientas por contrato. */
[data-form-id]{scroll-margin-top:88px}
/* CTA oficial FINAL (después del contenido): bloque guinda con botón dorado */
.official-cta{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;margin:26px 0 8px;padding:26px 30px;background:linear-gradient(160deg,var(--brand-l),var(--brand) 60%,var(--brand-d));border-radius:var(--r-l);box-shadow:0 20px 44px -24px rgba(7,55,79,.65)}
.official-cta__txt{flex:1;min-width:220px}
.official-cta strong{display:block;color:#fff;font:800 20px/1.25 var(--font)}
.official-cta p{margin:6px 0 0;color:#cfe0ea;font-size:14.5px;line-height:1.5}
.official-cta .btn{flex:none}

/* ============================================================
   Componentes propios de mx-afore (no venían en el sistema heredado):
   calculadoras, wizard y chips de selección.
   ============================================================ */

/* ---------- Formulario de calculadora ---------- */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px 20px;margin:22px 0}
.field{display:flex;flex-direction:column;gap:6px}
/* Los campos de una misma fila arrancan a distinta altura cuando sus rótulos ocupan distinto
   número de líneas: "Tu último salario base de cotización (diario)" son dos y "Saldo de tu
   subcuenta de retiro (RCV)" una, así que los recuadros quedaban escalonados. Empujando el
   último hijo hacia abajo, todos los campos de la fila alinean su input —las celdas del grid ya
   tienen la misma altura— y la rejilla se lee como una rejilla. */
/* Los campos de una fila alinean su recuadro reservando al rótulo el alto de DOS líneas, que es
   lo que ocupa el más largo ("Tu último salario base de cotización (diario)"). Los de una línea
   dejan el hueco y todos los inputs arrancan a la misma altura.
   Se probó empujando el control con margin-top:auto y se descartó: alineaba igual, pero como
   las celdas del grid comparten altura, en cuanto un campo crecía —al mostrarse el aviso de
   límites— los inputs VECINOS bajaban con él. Reservando el alto arriba, lo que pasa debajo del
   input no mueve a nadie.
   Sólo con más de una columna: apilado no hay nada que alinear y el hueco sobraría. */
@media (min-width:560px){
  .calc-grid .field__lbl{min-height:2.7em}
}
/* El margin-top:16px que .field trae de más arriba es de cuando los campos se apilaban en
   columna. Dentro de la rejilla lo pone el `gap`, y dejarlo hacía que el PRIMER campo —el único
   con .field:first-of-type{margin-top:0}— arrancara 16px más alto que sus vecinos de fila. */
.calc-grid .field{margin-top:0}
/* flex-start, igual que el .field__lbl general: con center, el ⓘ de un rótulo de dos líneas
   quedaba flotando en el medio. Esta regla va después de aquélla y la pisaba. */
.field__lbl{position:relative;display:flex;align-items:flex-start;gap:6px}
.field__lbl label{font-weight:600;font-size:14.5px;color:var(--brand-d);line-height:1.35}
.field__i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  flex:none;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:50%}
.field__i:hover{color:var(--brand-br);background:var(--tile)}
.field__i .ico{width:16px;height:16px}
.field__help{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:min(330px,88vw);
  margin:0;padding:11px 13px;background:var(--brand-d);color:#eaf3f8;font-size:13.5px;
  line-height:1.5;border-radius:var(--r-s);box-shadow:var(--sh-3)}
/* background-COLOR, no el atajo: `background` reseteaba el background-image del chevron que
   pone la regla de .field select más arriba, y como el appearance:none sí sobrevive, el
   desplegable quedaba sin flecha y sin la nativa — indistinguible de un input de texto. */
/* Fondo tenue en reposo y BLANCO al enfocar: el campo se distingue del panel —que también es
   blanco— y al escribir se ilumina, que es el único momento en que conviene que destaque.
   Antes eran blanco sobre blanco, separados sólo por un filete. */
.field input,.field select{padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background-color:var(--surface-alt);border:1.5px solid var(--border);
  border-radius:var(--r-s);width:100%;transition:border-color .12s,background-color .12s,box-shadow .12s}
.field input::placeholder{color:var(--muted);font-weight:400}
.field input:hover,.field select:hover{border-color:var(--brand-bd)}
.field input:focus,.field select:focus{border-color:var(--brand-br);outline:none;
  background-color:var(--surface);box-shadow:0 0 0 3px rgba(14,127,168,.14)}
/* Fuera de rango: los campos de dinero llevan min/max reales (el salario tiene tope legal), así
   que el navegador ya sabe cuándo el valor es imposible. Decirlo en el borde ahorra llegar al
   botón para enterarse. :not(:placeholder-shown) para no pintar de rojo un campo vacío. */
.field input:out-of-range:not(:placeholder-shown){border-color:var(--danger);
  background-color:var(--danger-bg)}
/* El rango, dicho con todas las letras, debajo del campo y sólo cuando hace falta. Sale por el
   hermano adyacente y no con :has(), que obligaría a subir la condición al contenedor: el <p>
   va inmediatamente después del input, así que `+` alcanza y es más barato de evaluar.
   Sin JS: cuando el valor vuelve al rango, el aviso se va solo. */
.field__lim{display:none;margin:7px 0 0;padding:8px 11px;border-radius:var(--r-s);
  background:var(--danger-bg);border:1px solid var(--danger-bd);
  font-size:13px;line-height:1.45;color:var(--danger)}
.field__lim strong{color:var(--danger);font-weight:800;white-space:nowrap}
.field input:out-of-range:not(:placeholder-shown) + .field__lim{display:block}

.cp-cta{margin:18px 0 0}

/* ---------- Calculadora de pensión ----------
   Formulario arriba, resultado abajo, y el formulario NO cambia de forma al calcular: es lo que
   pasaba con el layout lateral del prototipo, que al descubrir el resultado reacomodaba la
   rejilla de una columna a dos delante de quien acababa de pulsar. */
.calc-pension{display:grid;gap:24px}

@media (min-width:721px){
  /* Los campos se reparten en columnas en vez de estirarse a lo ancho de toda la fila.
     auto-fit + minmax: tres columnas cuando entran, dos si no, una en cuanto se estrecha. Sin
     media queries por número de columnas: la rejilla lo resuelve sola. */
  .calc-pension > .panel{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px 20px;
    align-items:start}
  /* El rótulo "Tus datos", el botón, el aviso y la nota no son campos: cruzan la rejilla enteros. */
  .calc-pension > .panel > .dato__lbl,
  .calc-pension > .panel > .cp-cta,
  .calc-pension > .panel > .tool__err,
  .calc-pension > .panel > .muted{grid-column:1/-1}
  /* Los campos ya no se apilan: el margen entre ellos lo pone el gap de la rejilla. Y los grupos
     de chips (.wz-q) pierden aquí el filete separador que llevan en los wizards: entre celdas de
     una rejilla, una línea por celda no separa preguntas, sólo ensucia. */
  .calc-pension > .panel > .field{margin-top:0}
  .calc-pension > .panel > .wz-q{border-top:0;padding:0}
  /* Reservar dos líneas al rótulo alinea entre sí TODO lo que va debajo —inputs y chips por
     igual—, aunque unos títulos ocupen una línea ("Edad de retiro") y otros dos ("Ahorro
     voluntario mensual"). Los dos selectores porque los campos son .field y los chips .wz-q. */
  .calc-pension > .panel > .field > .field__lbl,
  .calc-pension > .panel > .wz-q > .field__lbl{min-height:2.7em}
  /* Y para que reservar "dos líneas" signifique lo mismo en todas las celdas, los rótulos tienen
     que medir lo mismo. Los de los campos son <label> (14,5px/600) y los de los grupos de chips
     un <p class="wz-q__t"> que sb_group_label() emite más grande y en 700: con dos tipografías
     distintas, dos líneas de una ocupan más que dos de la otra y la alineación no cierra. */
  .calc-pension > .panel .wz-q__t{font:600 14.5px/1.35 var(--font);color:var(--brand-d)}
}

/* ---------- Resultado destacado ---------- */
.calc-result{margin:22px 0;padding:24px 26px;background:linear-gradient(135deg,var(--brand),var(--brand-d));
  color:#fff;border-radius:var(--r-l);box-shadow:var(--sh-3)}
.calc-result__lbl{margin:0;font-size:14px;opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.calc-result__big{margin:4px 0 6px;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.05;font-variant-numeric:tabular-nums}
.calc-result__sub{margin:0;font-size:15px;opacity:.93}
.calc-result strong{color:#fff}
.muted{color:var(--muted);font-size:13.5px}

/* ---------- Wizard ----------
   Las preguntas van separadas por un filete y numeradas: sin eso el bloque se leía como tres
   listas de etiquetas sueltas y no como un formulario que hay que completar. El filete es lo
   que agrupa cada pregunta con SUS opciones y la separa de la siguiente. */
.wz-q{margin:0;padding:18px 0;border-top:1px solid var(--border-2)}
.wz-q:first-of-type{border-top:0;padding-top:6px}
.wz-q__t{margin:0 0 9px;font-weight:700;color:var(--brand-d)}
/* El número de la pregunta, como disco. Antes era texto plano ("1.") dentro del rótulo y el
   bloque entero quedaba en dos grises: el disco le da al formulario el color y el ritmo que le
   faltaban, y de paso ES el indicador de avance —pasa a verde en cuanto la pregunta se
   responde—, así que sustituye al punto suelto que había aquí antes. */
.wz-n{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:25px;height:25px;border-radius:50%;
  background:var(--tile);color:var(--brand);font:800 13.5px/1 var(--font);
  vertical-align:middle;transition:background .15s,color .15s}

/* El rótulo de la pregunta, dentro de .wz-q.
   · margin-bottom: .field__lbl no trae ninguno (sólo lo tiene la variante --grupo, que estos
     wizards no usan), así que la pregunta quedaba pegada a sus opciones.
   · label como flex: el número es un <span> inline y el texto un nodo suelto al lado, así que
     en cuanto la pregunta ocupaba dos líneas —"¿Piensas hacer algún trámite pronto (retiro,
     pensión)?"— la segunda volvía al margen izquierdo, por debajo del disco. Como flex, el
     disco es un item y el texto otro: envuelve dentro de su propia columna y queda sangrado.
   · flex-start en los dos: con align-items:center el disco se iba al medio del bloque de dos
     líneas en vez de acompañar a la primera. */
.wz-q > .field__lbl{align-items:flex-start;margin-bottom:11px}
.wz-q > .field__lbl > label{display:flex;align-items:flex-start;gap:9px;line-height:1.35}
/* La clase la pone el JS del wizard. `.wz-q:has(input:checked)` haría lo mismo sin JS y funciona
   —se probó—, pero el estado ya lo lleva el propio wizard para el contador "llevas N de 3", así
   que marcarlo con una clase no cuesta nada y no deja el indicador de avance dependiendo del
   soporte de :has(). */
.wz-q.is-ok .wz-n{background:var(--ok);color:#fff}

/* Pie de acción: el botón que pide la recomendación y el contador de avance. */
.wz-go{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:4px;padding-top:20px;border-top:1px solid var(--border)}
.wz-go__hint{margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.wz-go__hint.is-error{color:var(--danger)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
/* Sobre --surface-alt y no sobre blanco: el panel del formulario ya es blanco, así que una
   opción blanca sobre fondo blanco sólo se distinguía por un filete gris de 1,5px. Con el tono
   apenas frío las opciones se leen como campos y el bloque deja de ser dos grises. */
.chip span{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;font-size:14.5px;
  font-weight:600;color:var(--soft);background:var(--surface-alt);
  border:1.5px solid var(--border);border-radius:999px;transition:all .12s}
/* El disco de radio: es lo que dice "esto se elige", que a una píldora gris suelta le faltaba.
   Vacío mientras no está elegida; relleno y en el color de la marca cuando sí. El borde va en
   tono de marca —no gris— porque es la pieza que invita a tocar. */
.chip span::before{content:"";flex:none;width:17px;height:17px;border-radius:50%;
  border:2px solid var(--brand-bd);background:#fff;transition:all .12s}
.chip input:checked+span{color:#fff;background:var(--brand);border-color:var(--brand);
  box-shadow:0 6px 14px -8px rgba(7,77,111,.65)}
.chip input:checked+span::before{border-color:#fff;background:#fff;
  box-shadow:inset 0 0 0 3.5px var(--brand)}
.chip input:focus-visible+span{box-shadow:0 0 0 3px rgba(14,127,168,.35)}
.chip:hover input:not(:checked)+span{border-color:var(--brand-br);background:var(--tile);
  color:var(--brand-d)}
.chip:hover input:not(:checked)+span::before{border-color:var(--brand-br)}
/* .seg es OTRO patrón: un control segmentado que se reparte el ancho en partes iguales y va con
   el texto centrado ("18 · 19 · 20 años"). Ahí el disco no aporta —la selección se lee por el
   segmento pintado— y encima desbalancea el centrado. Sin disco. */
.seg .chip span::before{display:none}

/* En pantalla angosta las píldoras dejan de funcionar: los textos largos ("ISSSTE o
   independiente") ocupan una línea entera igual, pero llegan a la mitad del ancho y el resto
   queda como aire muerto. Ahí el patrón correcto es el de cualquier formulario de teléfono —una
   opción por fila, a ancho completo, con su disco a la izquierda—: se ve lo que es, el área
   táctil pasa a ser la fila entera y desaparece el hueco. */
@media (max-width:560px){
  .chips{display:grid;gap:8px}
  .chip{display:block}
  .chip span{width:100%;padding:13px 15px;border-radius:12px;font-size:15px}
}

.wz-out{margin-top:24px;padding-top:22px;border-top:1px solid var(--border)}
.wz-out__h{margin:0 0 14px;font-size:1.15rem}
.wz-card{position:relative;margin:0 0 14px;padding:18px 20px;background:var(--surface-alt);
  border:1px solid var(--border);border-radius:var(--r)}
.wz-card--best{background:var(--tile);border-color:var(--brand-br);box-shadow:var(--sh-2)}
.wz-card__tag{position:absolute;top:-10px;left:18px;padding:3px 11px;font-size:11.5px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:var(--brand-br);border-radius:999px}
.wz-card h4{margin:0 0 6px;font-size:1.05rem;color:var(--brand-d)}
.wz-card p{margin:0 0 10px;font-size:15px}
.wz-card ol{margin:0 0 12px;padding-left:20px}
.wz-card li{margin-bottom:5px;font-size:14.5px}

@media (max-width:620px){
  .calc-grid{grid-template-columns:1fr;gap:16px}
  .field__help{width:min(300px,92vw)}
}

/* ---------- Infografías (SVG inline) ----------
   El SVG se escala con el ancho y nunca desborda. En móvil, las figuras anchas scrollean
   dentro de su caja en lugar de encoger hasta ser ilegibles: una infografía que no se lee
   no sirve de nada. */
.fig{margin:26px 0;padding:0}
.fig__box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);
  padding:22px 20px;overflow-x:auto;box-shadow:var(--sh-1)}
.fig__box svg{display:block;width:100%;height:auto;max-width:100%}
.fig__box svg.fig--wide{min-width:640px}          /* fuerza scroll en móvil si hace falta */
.fig figcaption{margin-top:11px;font-size:14.5px;line-height:1.6;color:var(--soft)}
.fig figcaption strong{color:var(--brand-d)}
/* Tipografía dentro de las figuras: tabular para números, tamaños que aguanten el escalado */
.fig text{font-family:var(--font);fill:var(--ink)}
.fig .t-lbl{font-size:13px;font-weight:600;fill:var(--soft)}
.fig .t-val{font-size:15px;font-weight:800;fill:var(--brand-d);font-variant-numeric:tabular-nums}
.fig .t-h{font-size:15.5px;font-weight:800;fill:var(--brand-d)}
.fig .t-sm{font-size:12px;fill:var(--muted)}
.fig .box-s{fill:var(--surface-alt);stroke:var(--border);stroke-width:1.5}
.fig .box-b{fill:var(--tile);stroke:var(--brand-l);stroke-width:1.5}
.fig .arrow{stroke:var(--brand-l);stroke-width:2;fill:none;marker-end:url(#fig-arrow)}
@media (max-width:620px){
  .fig__box{padding:16px 12px}
  .fig figcaption{font-size:13.5px}
}

/* ---------- Infografías hechas con HTML (sb_figure_html) ----------
   Reemplazo progresivo del SVG de coordenadas fijas donde el diagrama es "cajas con texto":
   éstas refluyen en vez de escalar, así que en móvil se leen sin scroll lateral y sin encoger.
   overflow-x:visible porque acá no hay nada que scrollear: si algo no entra, se reacomoda. */
.fig--html .fig__box{overflow-x:visible}

/* ---------- Anatomía de la tabla del IRN (/cual-es-la-mejor-afore-tabla-rendimientos) ----------
   Era un SVG de 720x344 con texto de 12px. En un teléfono eso no tiene arreglo: o se escala y el
   texto queda en 6px, o se deja a tamaño y hay que arrastrar la página de lado —que es lo que
   hacía, por el min-width:640px de .fig--wide—. Rehecha en HTML, la maqueta se encoge y las
   notas refluyen debajo.
   La maqueta NO lleva cifras a propósito: los rendimientos no se inventan ni de adorno, así que
   las columnas de valores son barras y bloques grises. */
.anat__t{margin:0;font-size:16.5px;font-weight:800;color:var(--brand-d);line-height:1.3}
.anat__st{margin:5px 0 18px;font-size:13.5px;color:var(--muted);line-height:1.5}
/* Dos carriles en escritorio (maqueta | notas) y uno solo en cuanto no entran. El minmax con
   min-content evita que la maqueta empuje el ancho de la rejilla. */
.anat__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px 26px;
  align-items:start}
.anat__demo{border:1.5px solid var(--border);border-radius:12px;overflow:hidden}
.anat__banda{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--brand);
  color:#fff}
/* El nombre de la siefore es un <strong>, y `strong{color:var(--brand-d)}` (línea 100) es una
   regla global que también alcanza acá dentro: pintaba azul oscuro sobre la banda azul, 1,38:1
   de contraste, o sea invisible. Hereda el blanco de la banda. El selector va con el padre para
   ganarle en especificidad al selector de tipo. Tercer caso del mismo patrón en este archivo
   —th.num en la cabecera --marco y el badge #1 fueron los otros dos—: cuando algo cambia de
   fondo, hay que revisar qué reglas globales le siguen imponiendo color al texto. */
.anat__banda .anat__sf{font-size:13.5px;font-weight:800;min-width:0;color:inherit}
/* El corte se abrevia antes que envolver: la banda es una sola línea por diseño. */
.anat__corte{margin-left:auto;font-size:11px;opacity:.9;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* Las tres columnas de la maqueta, compartidas por la cabecera y las filas: nombre, barra y
   comisión. La del medio se lleva lo que sobra porque es la que la figura viene a señalar. */
.anat__cab,.anat__fila{display:grid;grid-template-columns:minmax(56px,1.1fr) minmax(70px,1.6fr) minmax(46px,.8fr);
  gap:10px;align-items:center;padding:8px 11px}
.anat__cab{background:var(--tile);font-size:11.5px;font-weight:800;color:var(--brand-d);
  letter-spacing:.02em}
.anat__cab span{display:flex;align-items:center;gap:5px;min-width:0}
.anat__fila{border-top:1px solid var(--border)}
.anat__fila:nth-child(even){background:var(--surface-alt)}
.anat__ph{height:9px;border-radius:5px;background:var(--border-2)}
.anat__barra{height:9px;border-radius:5px;background:var(--border-2);overflow:hidden}
.anat__barra i{display:block;height:100%;border-radius:5px;background:var(--brand-l)}
/* El disco numerado: el mismo objeto en la maqueta y en la nota, que es lo que ata una con la
   otra. flex:none para que no lo aplaste la columna. */
.anat__n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;
  height:20px;border-radius:50%;background:var(--brand);color:#fff;
  font:800 11.5px/1 var(--font);font-variant-numeric:tabular-nums}
.anat__n--claro{background:#fff;color:var(--brand-d)}
.anat__n--c3{background:var(--brand-l)}
.anat__n--c4{background:var(--accent)}
.anat__notas{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.anat__notas li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.anat__notas p{margin:0;font-size:13.5px;line-height:1.5;color:var(--soft)}
.anat__pie{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (max-width:720px){
  .anat__grid{grid-template-columns:1fr;gap:18px}
  /* En un teléfono la banda ya no tiene sitio para la fecha de corte al lado del nombre: se
     permite que baje. El disco 2 la acompaña. */
  .anat__banda{flex-wrap:wrap;gap:6px 8px}
  .anat__corte{margin-left:0;white-space:normal}
  /* El disco de 20px más "Comisión" no entran en el carril más angosto y el texto se salía 9px
     de su celda. Acá el rótulo puede envolver bajo su disco y el disco se achica: la cabecera
     crece un renglón en vez de desbordar. */
  .anat__cab{font-size:10.5px}
  .anat__cab span{flex-wrap:wrap;row-gap:2px}
  .anat__cab .anat__n{width:17px;height:17px;font-size:10.5px}
}

/* ---------- Árbol de decisión (/retiro-de-afore) ---------- */
.arbol__t{margin:0;font-size:16.5px;font-weight:800;color:var(--brand-d);line-height:1.3}
.arbol__st{margin:5px 0 18px;font-size:13.5px;color:var(--muted);line-height:1.5}
.arbol__pasos{list-style:none;margin:0;padding:0}
/* --gc lo fija cada <li> con el color de su rama (el mismo que tenía en el SVG). */
.arbol__paso{position:relative;display:grid;gap:10px;padding-bottom:34px}
.arbol__paso:last-child{padding-bottom:26px}
.arbol__q{margin:0;padding:14px 16px 14px 19px;border-radius:11px;
  background:var(--surface-alt);border:1.5px solid var(--border);border-left:5px solid var(--gc);
  font-size:14px;font-weight:700;color:var(--brand-d);line-height:1.4}
.arbol__rama{display:flex;align-items:center;gap:12px;min-width:0}
.arbol__si{flex:none;font-size:11.5px;font-weight:800;color:var(--gc);letter-spacing:.06em;
  text-transform:uppercase}
/* La flecha que en el SVG era un <path>: acá es el borde de un pseudo-elemento, así no hay
   geometría que mantener cuando el texto cambia de largo. */
.arbol__si::after{content:"";display:inline-block;vertical-align:middle;margin-left:6px;
  width:16px;height:0;border-top:2px solid var(--gc);position:relative}
.arbol__r{flex:1 1 auto;min-width:0;padding:12px 16px;border-radius:11px;
  background:var(--tile);border:1.5px solid var(--gc)}
.arbol__r strong{display:block;font-size:14px;font-weight:800;color:var(--brand-d);
  line-height:1.35}
.arbol__r span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.45}
/* El "no" que baja al paso siguiente: etiqueta + el filete vertical que la acompaña. */
.arbol__no{position:absolute;left:14px;bottom:6px;font-size:11.5px;font-weight:800;
  color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding-left:14px}
.arbol__no::before{content:"";position:absolute;left:0;top:-14px;width:0;height:26px;
  border-left:2px solid var(--border)}
/* inline-block y margen, NO display:block + left: en block ocupaba el ancho entero y el
   desplazamiento lo empujaba fuera de la caja (2px de desborde). Que se ajuste a su texto. */
.arbol__no--fin{position:relative;left:auto;bottom:auto;display:inline-block;
  margin:-8px 0 14px 14px}
.arbol__no--fin::before{top:-12px;height:24px}
.arbol__fin{margin:0;padding:14px 16px;border-radius:11px;
  background:var(--danger-bg);border:1.5px solid var(--danger)}
.arbol__fin strong{display:block;font-size:14px;font-weight:800;color:var(--danger);
  line-height:1.35}
.arbol__fin span{display:block;margin-top:4px;font-size:12.5px;color:var(--soft);line-height:1.5}

/* Desktop: las dos columnas del diagrama original —pregunta a la izquierda, resultado a la
   derecha—. Por debajo de este ancho el grid colapsa a una sola columna y se apila, que es
   justamente lo que el SVG no podía hacer. */
@media (min-width:721px){
  .arbol__paso{grid-template-columns:minmax(0,308px) minmax(0,1fr);align-items:center;
    gap:0 16px;padding-bottom:28px}
  .arbol__q{grid-column:1}
  .arbol__rama{grid-column:2}
}