/* ============================================================
   mx-imss «Guía del Seguro Social» — app.css
   Paleta PROPIA azul tinta + coral · Noto Sans + Noto Serif (blindaje, 2026-10-13)
   ⛔ Nada de verde IMSS, guinda ni dorado de gobierno: la paleta anterior estaba «extraída
   pixel-exacto de la papelería oficial del IMSS Digital» (design/logo/BRIEF.md) y hacía que
   el sitio pareciera el Instituto. El sitio es una guía que asesora; no se le parece.
   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%). */
/* Noto Sans y Noto Serif SELF-HOSTEADAS (2026-08-23). Antes venían de Google Fonts con
   `display=swap` y el CSS en diferido (`media="print" onload`): el swap llegaba DESPUÉS del
   primer paint, el <h1> cambiaba de cantidad de líneas y empujaba el bloque de abajo →
   **CLS 0,14 en mobile** en /, /semanas-cotizadas-imss y /citas-imss (medido, tarea #255).
   Servirlas desde app.css, que ya es bloqueante, no agrega una sola petición a la ruta crítica,
   saca dos dominios externos (googleapis + gstatic) y —lo que importa— hace que el @font-face
   exista ANTES del primer paint, que es la condición para que `font-display:optional` funcione:
   si la fuente no llegó a tiempo el navegador se queda con el fallback para TODO el render y
   NO hace swap → cero CLS por fuente. En la navegación siguiente ya está en caché.
   Son woff2 VARIABLES: un archivo cubre 400-900 (Sans) y 600-900 (Serif). Las itálicas son
   estáticas (un solo peso cada una). Licencia OFL. Se regeneran con:
     sb-tools/dev/self-host-font.py mx-imss "Noto+Sans:ital,wght@0,400..900;1,400"
     sb-tools/dev/self-host-font.py mx-imss "Noto+Serif:ital,wght@0,600..900;1,600"
   ⛔ NO volver a `swap` ni a cargar el CSS en diferido: las dos variantes se midieron y las dos
   mueven la página. Detalle: sb-docs/conventions/fuentes-self-hosted.md */
@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 Serif';font-style:italic;font-weight:600;font-display:optional;src:url(/assets/fonts/noto-serif-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 Serif';font-style:italic;font-weight:600;font-display:optional;src:url(/assets/fonts/noto-serif-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 Serif';font-style:normal;font-weight:600 900;font-display:optional;src:url(/assets/fonts/noto-serif-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 Serif';font-style:normal;font-weight:600 900;font-display:optional;src:url(/assets/fonts/noto-serif-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}

/* Fallbacks métricos: sólo cosméticos desde que las fuentes son self-hosted con
   `optional` (ya no hay swap que pueda mover nada). ⚠️ `local('Arial')`/`local('Georgia')` NO
   resuelven en Linux ni en Android — ahí estas dos @font-face se descartan enteras y el stack
   cae a la familia siguiente. En Windows/Mac sí aplican. */
@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 ---------- */
:root{
  /* Marca */
  --marca:#1f4e8c; --marca-l:#2e6bb8; --marca-d:#142f57; --marca-br:#1e5aa8;
  --acento:#e2603f; --acento-l:#f7a48e; --acento-bg:#fde9e2;
  --acento2:#b5452a;
  --ok:#1c7a4b; --info:#1d5aa8; --warn:#9a6a12; --danger:#a3271f; --purple:#6b4ba8;
  --ok-bg:#eaf6ef; --info-bg:#eef4fb; --warn-bg:#f5efe4; --danger-bg:#fbecea; --tip-bg:#f4eefb;
  --ok-bd:#bfe3cd; --info-bd:#cfe0f3; --warn-bd:#e6d3a8; --danger-bd:#f0cdc8; --tip-bd:#ddd0ef;
  /* Superficie / texto */
  --bg:#f6f8fb; --surface:#fff; --surface-alt:#f7f9fc; --tile:#e8f0fa;
  --ink:#20242e; --soft:#4c5361; --muted:#7a8290; --border:#e2e8f0; --border-2:#e6ebf2;
  /* Forma */
  --r-s:9px; --r:12px; --r-l:14px; --r-xl:18px;
  --sh-1:0 1px 2px rgba(20,47,87,.04); --sh-2:0 1px 2px rgba(20,47,87,.04),0 12px 30px -18px rgba(20,47,87,.18);
  --sh-3:0 18px 40px -18px rgba(20,47,87,.35);
  --wrap:1120px; --font:'Noto Sans','Noto Sans fb',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --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}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--marca-d);line-height:1.15;text-wrap:balance}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.015em}
h2{font-family:var(--serif);font-weight:700;font-size:1.5rem}
h3{font-weight:700;font-size:1.12rem}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--marca-br);text-decoration:none}
a:hover{color:var(--marca);text-decoration:underline}
strong{color:var(--marca-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 20px}
.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(--marca);color:#fff;padding:10px 16px;border-radius:var(--r-s)}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:3px solid rgba(30,90,168,.45);outline-offset:2px;border-radius:4px}
::selection{background:#f7a48e;color:#2a1209}

/* ---------- 3. Topbar ---------- */
/* Blindaje (2026-10-13): la franja dice qué somos y qué NO somos, a un tamaño que se lee
   (antes 12,5 px; R5 de sb-docs cita la «cinta no oficial a 11 px» como señal de suplantación). */
.topbar{background:#1f2933;color:#f3f4f6}
.topbar .container{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:15px;line-height:1.45;font-weight:500}
.topbar strong{font-weight:800}
.topbar__dot{width:7px;height:7px;border-radius:50%;background:var(--acento-l);box-shadow:0 0 0 3px rgba(247,164,142,.25);flex:none}
.topbar strong{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- 4. Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:70;background:var(--marca);border-bottom:1px solid rgba(247,164,142,.3);box-shadow:0 6px 20px -14px rgba(10,20,40,.55)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
/* Lockup de marca «Guía del Seguro Social» (2026-10-13): libro (SVG inline) + bloque de dos
   líneas: «INDEPENDIENTE · NO OFICIAL» chica arriba y el nombre abajo, con «Guía» en coral
   para que lo primero que se lea sea que esto es una guía. */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand:hover{text-decoration:none}
/* El alto lo fijan los atributos width/height del <svg> (34 en el header, 28 en el pie). */
.brand__mark{flex:none;display:block}
.brand__text{display:flex;flex-direction:column;gap:0;line-height:1}
.brand__name{display:flex;flex-direction:column;gap:0}
/* bn1 (chica, versalitas espaciadas) sobre bn2 (el nombre, serif). */
.bn1{font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:#cfdcf0}
.bn2{font-family:var(--serif);font-weight:800;font-size:22px;line-height:1.05;letter-spacing:0;color:#fff;margin-top:5px;white-space:nowrap}
.bn2 em{font-style:normal;color:var(--acento-l)}
.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:#fff;cursor:pointer}
.nav__top:hover,.nav__group:hover .nav__top,.nav__top[aria-expanded="true"]{background:rgba(255,255,255,.14)}
.nav__top--active{color:var(--acento-l)}
.nav__caret{color:var(--acento-l);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 #e3e8f0;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}
/* El desplegable del ÚLTIMO grupo se abre hacia la izquierda: alineado a la izquierda asomaba
   ~100px por la derecha y ensanchaba la página entre 1000 y 1250px (aun invisible, cuenta para el scroll). */
.nav__group:last-child .nav__panel{left:auto;right:0}
.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(--marca);text-decoration:none}
.nav__panel a .ico{width:15px;height:15px;color:var(--marca-d);flex:none;padding:7px;background:var(--acento-bg);border-radius:50%;box-sizing:content-box;box-shadow:inset 0 0 0 1px rgba(226,96,63,.22)}
.nav__panel a[aria-current="page"]{background:var(--tile);color:var(--marca-d);font-weight:700}
.nav__panel a[aria-current="page"] .ico{background:var(--marca);color:#fff;box-shadow:none}
.nav__link{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-s);font:600 14.5px/1 var(--font);color:#fff}
.nav__link:hover{background:rgba(255,255,255,.14);text-decoration:none}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.32);border-radius:var(--r-s);background:rgba(255,255,255,.12);flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span{width:20px;height:2px;background:#fff;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 #e3e8f0;background:#fff;max-height:78vh;overflow:auto}
.nav-drawer[hidden]{display:none}
.nav-drawer .container{padding:12px 20px 24px}
.nav-drawer__group{padding:12px 0;border-bottom:1px solid #edf1f6}
.nav-drawer__h{font:700 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--marca);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(--marca);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(--acento)}
.nav-drawer a[aria-current="page"]{background:var(--tile);color:var(--marca-d)}
.nav-drawer a[aria-current="page"] .nav-drawer__lbl .ico{color:var(--marca)}

/* ---------- 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(--marca-br);font-weight:600}
.breadcrumbs [aria-current="page"]{color:var(--soft);font-weight:600}
.breadcrumbs .sep{display:inline-flex;vertical-align:middle;color:#b8c2d0}
/* 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}
}

/* ---------- 6. Hero ---------- */
main{display:block}
.hero{position:relative;margin-top:24px;border-radius:var(--r-xl);overflow:hidden}
/* Con breadcrumb arriba, el margin-top de 24px sumado al padding-top:14px del breadcrumb
   (que no tiene padding-bottom propio) deja más aire abajo del texto que arriba, respecto
   del borde del header. Se achica solo en ese caso para igualar los dos espacios. */
body:has(.breadcrumbs) .hero{margin-top:14px}
.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(--acento-l)}
.hero__lede{font-size:17.5px;line-height:1.6;margin:16px 0 0}
/* Aviso corto bajo el H1, en todas las páginas (sb_hero). */
.hero__aviso{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;padding:10px 14px;border-radius:12px;font-size:14.5px;line-height:1.5}
.hero__aviso .ico{flex:none;width:18px;height:18px;margin-top:2px}
.hero--home .hero__aviso{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff}
.hero--home .hero__aviso strong{color:#fff}
.hero--content .hero__aviso strong{color:#1f2933}
.hero--content .hero__aviso{background:var(--info-bg);border:1px solid var(--info-bd);color:#1f2933}
.hero--content .hero__aviso .ico{color:var(--info)}
.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 azul de marca */
.hero--home,.hero--home{background:linear-gradient(155deg,var(--marca-l) 0%,var(--marca) 55%,var(--marca-d) 100%);box-shadow:0 24px 50px -26px rgba(20,47,87,.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:#d3e1f4}
/* El <strong> global es azul oscuro: sobre la banda azul 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:#f7a48e;text-decoration:underline;text-underline-offset:3px}
.hero--home .updated{color:#c9dcf5}
.hero--home .updated__dot{background:var(--acento-l)}
.hero--home .section-eyebrow{color:#f7a48e;background:rgba(255,255,255,.08);border:1px solid rgba(247,164,142,.35)}
/* Hero CONTENIDO — banda clara con acento lateral */
.hero--content{background:var(--surface-alt);border:1px solid var(--border);border-left:6px solid var(--marca)}
.hero--content h1{color:var(--marca-d)}
.hero--content h1 span{color:var(--acento)}
.hero--content .hero__lede{color:var(--soft)}
.hero--content .hero__wm .ico{color:var(--marca);opacity:.05}

/* ---------- 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(--marca);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(--acento)}
/* Icon tile bicolor: círculo coral claro + ícono azul. */
.itile{width:38px;height:38px;flex:none;border-radius:50%;background:var(--acento-bg);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(226,96,63,.25)}
.itile .ico{color:var(--marca-d);stroke-width:1.85}

/* ---------- 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(--marca);color:#fff;box-shadow:0 10px 20px -10px rgba(31,78,140,.55)}
.btn--primary:hover{background:var(--marca-l);color:#fff}
.btn--ghost{background:#fff;color:var(--marca);border-color:#c9d4e3}
.btn--ghost:hover{background:var(--surface-alt);color:var(--marca)}
.btn--acento{background:linear-gradient(160deg,var(--acento-l),var(--acento));color:#2a1209;font-weight:700;box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.btn--acento:hover{color:#2a1209;filter:brightness(1.03)}
.btn--link{background:transparent;color:var(--marca-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}
.card{display:flex;flex-direction:column;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:#b9cbe3;box-shadow:0 18px 38px -20px rgba(20,47,87,.35)}
.card .itile{width:46px;height:46px;margin-bottom:14px}
.card .itile .ico{width:24px;height:24px}
.card h3{color:var(--marca-d);margin:0 0 6px}
.card p{font-size:14.5px;line-height:1.55;color:var(--soft);margin:0 0 14px}
.card__arrow{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--font);color:var(--marca-br)}
/* Variante compacta: ícono y título en la misma línea, para listados largos (ej. directorio por estado) */
.cards--compact .card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;padding:18px 20px}
.cards--compact .card .itile{width:42px;height:42px;margin-bottom:0}
.cards--compact .card h3{margin:0}
.cards--compact .card p{grid-column:1/-1;margin:10px 0 12px}
.cards--compact .card__arrow{grid-column:1/-1;margin-top:0}
/* 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){
  .card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
  .card .itile{width:42px;height:42px;margin-bottom:0}
  .card h3{margin:0}
  .card p{grid-column:1/-1;margin:10px 0 12px}
  .card__arrow{grid-column:1/-1;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(--marca);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 #edf1f6}
.table tbody tr:nth-child(even){background:var(--surface-alt)}
.table td strong{color:var(--marca-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(--marca);color:#fff;display:grid;place-items:center;font:800 14px/1 var(--font);margin-bottom:12px;box-shadow:0 4px 10px -5px rgba(31,78,140,.6)}
.steps li:nth-child(3n+2) .steps__h{background:var(--marca-br)}
.steps li:nth-child(3n+3) .steps__h{background:var(--acento)}
.steps h3{margin:0 0 5px;font-size:15.5px;color:var(--marca-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(--marca-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(--acento);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:#b9cbe3;box-shadow:0 12px 28px -18px rgba(20,47,87,.3)}
/* Link chico anidado en el texto de un ítem (no el li-como-tarjeta): que se lea como link normal, no como card suelta */
.dir-list .dir-meta a{color:var(--marca-br);text-decoration:underline;text-underline-offset:2px}
.dir-list .ico{width:44px;height:44px;flex:none;color:var(--marca);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(--marca-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(--marca-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(--marca);box-shadow:0 0 0 3px rgba(30,90,168,.14)}
.dirsearch__box .ico{color:var(--acento);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(--marca-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:#fde2d8;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(--marca-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(--marca-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(--marca-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(--marca-d)}
.states-list a:hover{text-decoration:none;border-color:#b9cbe3;background:var(--surface-alt);color:var(--marca)}

/* ---------- 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(--marca-d)}
.tool__title .itile{width:40px;height:40px}
.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}
/* Un campo solo (fuera de .grid2) ocupa todo el ancho del .tool si no se lo limita —
   en desktop queda desproporcionado para un solo input numérico. */
form>.field{max-width:420px}
.field label{font:600 13.5px/1.3 var(--font);color:var(--soft)}
.field input,.field select{padding:12px 14px;border:1.5px solid #d3dce8;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(--marca-br);outline:none;box-shadow:0 0 0 3px rgba(30,90,168,.14)}
/* 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 #d3dce8;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:#b9cbe3}
/* Seleccionado = tinte claro + borde de marca, NO relleno sólido: el relleno 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(--marca);color:var(--marca);box-shadow:inset 0 0 0 1px var(--marca)}
.chip-opt[aria-pressed="true"] .ico{opacity:1;color:var(--marca)}
/* Vigencia grid (constancia) */
.vig-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vig-opt{border:1.5px solid #d3dce8;border-radius:12px;padding:16px;background:#fff;cursor:pointer;text-align:left}
.vig-opt[aria-checked="true"]{border-color:var(--marca);box-shadow:0 0 0 3px rgba(30,90,168,.14)}
.vig-opt__dur{font-weight:700;color:var(--marca-d)}
.vig-opt__price{color:var(--acento);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(--marca);color:#f7a48e;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(--marca);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(--marca-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:#7d8796;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. */
.field__lbl{position:relative;display:flex;align-items:center;gap:7px}
.field__lbl label{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(--marca);cursor:pointer;transition:background .15s,color .15s}
.field__i .ico{width:15px;height:15px;stroke-width:2}
.field__i:hover{background:var(--marca);color:#fff}
.field__i[aria-expanded="true"]{background:var(--marca);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(--acento);border-radius:var(--r);
  box-shadow:0 18px 40px -14px rgba(20,47,87,.4),0 2px 6px rgba(20,47,87,.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(--acento)}
.field__help[hidden]{display:none}
.field__help strong{color:var(--marca-d)}
@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}

.tool__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.tool__hint{font-size:13px;color:var(--muted)}
.tool__err{margin:14px 0 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. Azul = en curso; el verde de --ok queda para lo ya resuelto. */
.calc-load{background:var(--surface);border:1.5px solid var(--border-2);border-top:3px solid var(--marca);border-radius:var(--r-l);padding:24px;margin-top:22px;box-shadow:0 12px 30px -18px rgba(20,47,87,.3)}
.cl-head{display:flex;align-items:center;gap:11px}
.cl-head b{font:700 17px/1.3 var(--font);color:var(--marca-d)}
.cl-spin{flex:none;width:18px;height:18px;border:2.5px solid rgba(31,78,140,.18);border-top-color:var(--marca);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(--marca-br),var(--marca));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:#98a2b1;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(--marca);border-color:var(--marca)}
.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:22px 0 16px}
.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(--marca-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(--marca);color:#fff;font:700 14.5px/1 var(--font);cursor:pointer;box-shadow:0 10px 20px -10px rgba(31,78,140,.55);transition:background .15s,transform .15s}
.res-back:hover{background:var(--marca-l);transform:translateY(-1px)}
.res-top+.tool__result{margin-top:14px}

/* "Y ahora, ¿qué?": las rutas al contenido interno, puntuadas por el caso del usuario.
   Las 2 más pertinentes van en coral — el acento de marca reservado a destacar. */
.next{margin-top:26px}
.next__h{margin:0 0 14px;font:800 19px/1.25 var(--serif);color:var(--marca-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:#b9cbe3;box-shadow:0 16px 34px -20px rgba(20,47,87,.35)}
.next__badge{align-self:flex-start;margin-bottom:5px;padding:3px 10px;border-radius:999px;background:linear-gradient(160deg,var(--acento-l),var(--acento));color:#2a1209;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(--marca-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(--marca-br);font:700 14px/1 var(--font);text-decoration:underline;text-underline-offset:3px}
.next__card:hover::after{color:var(--marca)}
.next__card--feat{border-color:var(--acento);background:#fff7f4;box-shadow:0 0 0 1px var(--acento),0 10px 24px -16px rgba(226,96,63,.45)}
.next__card--feat:hover{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento),0 16px 32px -16px rgba(226,96,63,.55)}

/* ---------- 17. Sources / E-E-A-T ---------- */
.sources{margin:22px 0;padding:18px 20px;background:var(--surface-alt);border:1px dashed #c9d4e3;border-radius:var(--r);font-size:13.5px;color:var(--muted);line-height:1.55}
.sources__label{color:var(--marca-d);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.sources__label .ico{color:var(--acento)}
.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(--marca);font:600 12.5px/1 var(--font)}

/* ---------- 18. Footer ----------
   Banda azul oscuro a sangre: la marca cierra la página igual que la abre en el header.
   Todo lo de adentro se recolorea sobre oscuro (los defaults globales de a/strong son azules
   y sobre este fondo no contrastan). */
.site-footer{background:var(--marca-d);color:#c6d3e6;margin-top:56px}
.site-footer .container{padding:48px 20px 26px}
.site-footer strong{color:#fff}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.footer-col h3{font:700 13px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--acento-l);margin:0 0 14px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer-col a{display:flex;align-items:center;gap:9px;font-size:14px;color:#c6d3e6}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-col a .ico{color:var(--acento-l)}
.footer-disclaimer{margin-top:36px;padding:24px 26px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-l)}
/* Lockup compacto invertido (pie): símbolo blanco 28px, bn1 9.5px, nombre 18px. */
.footer-brand{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.footer-brand .brand__text,.footer-brand .brand__name{gap:0}
.footer-brand .bn1{font-size:9.5px;letter-spacing:.1em;color:#fff}
.footer-brand .bn2{font-size:18px;margin-top:4px;color:#fff}
.footer-disclaimer p{margin:0;font-size:13.5px;line-height:1.6;color:#b9c7db}
.footer-disclaimer a{color:var(--acento-l);text-decoration:underline;text-underline-offset:2px}
.footer-disclaimer a:hover{color:#fff}
.footer-disclaimer .footer-marks{margin-top:10px;font-size:12.5px;color:#9fb0c8}
.footer-legal-links{list-style:none;display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0;padding:0}
.footer-legal-links a{font-size:13px;color:var(--acento-l);font-weight:600;text-decoration:none}
.footer-legal-links a:hover{color:#fff;text-decoration:underline}
.footer-legal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:#94a6bf}
.footer-legal .ico{color:var(--acento-l);fill:var(--acento-l);stroke:none}

/* ---------- 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--2{grid-template-columns:repeat(2,1fr)}
.info-levels--4{grid-template-columns:repeat(4,1fr)}
.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)}

/* Mini-calendarios de pago: 12 grillas tipo calendario de pared, una por mes, con el
   día de pago resaltado. Reemplaza a la tabla "Mes / Día / Fecha" en calendario_pago.php:
   con solo 12 fechas sueltas la tabla escaneaba bien, pero para una página que se llama
   "calendario" un calendario de verdad vende mejor el dato de un vistazo. */
.mini-cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
.mini-cal{background:#fff;border:1.5px solid var(--border-2);border-radius:var(--r-l);padding:16px;box-shadow:var(--sh-1)}
.mini-cal__h{margin:0 0 12px;font:700 15px/1 var(--serif);color:var(--marca-d);text-align:center;text-transform:capitalize}
.mini-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mini-cal__dow{font:700 10px/1 var(--font);color:var(--muted);text-transform:uppercase;text-align:center;padding:2px 0 6px}
.mini-cal__day{font:600 12.5px/1 var(--font);color:var(--soft);text-align:center;padding:6px 0;border-radius:7px;font-variant-numeric:tabular-nums}
.mini-cal__day--pad{visibility:hidden}
.mini-cal__day--pago{background:var(--marca);color:#fff;font-weight:800;box-shadow:0 0 0 2px var(--acento-l);border:0;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;transition:.15s}
.mini-cal__day--pago:hover{background:var(--marca-br)}
.mini-cal__day--pago[aria-expanded="true"]{background:var(--acento2)}
.mini-cal__s{margin:10px 0 0;font-size:12px;text-align:center;color:var(--muted)}
.mini-cal__s strong{color:var(--marca-d)}
/* Panel de "información oportuna" que abre el botón del día de pago: cuenta regresiva o
   hace cuánto se pagó. Ocupa espacio en el flujo de la propia tarjeta (no floating) para no
   pelear con las 11 tarjetas vecinas dentro de una grilla de 3 columnas tan angosta. */
.mini-cal__tip{margin-top:12px;padding:12px 14px;background:var(--tile);border-radius:var(--r-s);font-size:14.5px;line-height:1.5;color:var(--soft)}
.mini-cal__tip p{margin:0}
.mini-cal__tip p+p{margin-top:5px;color:var(--muted);font-size:13px}
.mini-cal__tip strong{color:var(--marca-d)}
/* Meses ya transcurridos: siguen siendo referencia útil (alguien busca "marzo" en julio),
   pero no deben competir visualmente con el mes vigente en adelante. */
/* Ojo: opacity/filter en .mini-cal--past (el contenedor completo) se probó primero y se
   sacó porque cascadea a TODO el subárbol, incluido el panel de info que se revela al
   clickear el día — quedaba tan tenue como el resto y era ilegible. Atenuar solo la grilla
   decorativa deja lo que el usuario pidió ver (el tip) con contraste completo. */
.mini-cal--past .mini-cal__h{color:var(--muted)}
.mini-cal--past .mini-cal__grid{opacity:.55}
.mini-cal--past .mini-cal__day--pago{background:var(--muted);box-shadow:none}

/* ---------- 20. Responsive ---------- */
/* El lockup «Guía del Seguro Social» (2026-10-13) es más ancho que el de antes: con el menú de
   escritorio visible, entre ~860 y ~1000px el header desbordaba. El menú hamburguesa toma
   desde 1000px (el resto del layout de 860 no cambia). */
@media (max-width:1000px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .nav-drawer{display:block}
  .nav-drawer[hidden]{display:none}
}
@media (max-width:860px){
  body{font-size:16px}
  .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{grid-template-columns:repeat(2,1fr)}
  .info-levels{grid-template-columns:1fr}
  .mini-cal-grid{grid-template-columns:repeat(2,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,.mini-cal-grid{grid-template-columns:1fr}

  /* lockup compacto: el símbolo baja a 28px y el nombre a 17px para entrar junto al menú */
  .brand{gap:9px}
  .brand .brand__mark{height:28px;width:auto}
  .bn1{font-size:9px;letter-spacing:.08em}
  .bn2{font-size:17px;margin-top:4px}
  /* 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__go{width:100%;align-items:stretch}
  .official-cta .btn{justify-content:center}
  .btn{max-width:100%;padding:11px 16px;line-height:1.3;text-align:center}

  /* el footer se queda en 2 columnas también en móvil (si no, la lista queda larguísima) */
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .footer-col a{align-items:flex-start;gap:8px;font-size:13.5px}
  .footer-col a .ico{margin-top:2px}
  .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}
  .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 #edf1f6}
  .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(--marca);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(--marca-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 azul, el botón principal va CORAL: el azul se lavaría sobre el fondo azul */
.hero--home .btn--primary{background:linear-gradient(160deg,var(--acento-l),var(--acento));color:#2a1209;border-color:transparent;box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.hero--home .btn--primary:hover{background:linear-gradient(160deg,var(--acento-l),var(--acento));color:#2a1209;filter:brightness(1.04)}
.hero--home .btn--primary .ico{color:#2a1209}
/* 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(--marca-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-family:var(--serif);font-size:1.3rem;color:var(--marca)}
.group-head::before{content:"";width:4px;height:1.05em;border-radius:2px;background:var(--acento2);flex:none}
.section-head[id],.group-head[id],.box h2[id],.box h3[id]{scroll-margin-top:96px}
/* CTA oficial FINAL (después del contenido): bloque azul con botón coral */
.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(--marca-l),var(--marca) 60%,var(--marca-d));border-radius:var(--r-l);box-shadow:0 20px 44px -24px rgba(20,47,87,.6)}
.official-cta__txt{flex:1;min-width:220px}
.official-cta__go{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.official-cta__host{font-size:13px;color:#d6e3f5}
/* Más específico que «.official-cta strong» (display:block, serif grande), que viene después. */
.official-cta .official-cta__host strong{display:inline;font:700 13px/1.4 var(--font);color:#fff}
.official-cta strong{display:block;color:#fff;font:700 1.2rem/1.25 var(--serif)}
.official-cta p{margin:6px 0 0;color:#d3e1f4;font-size:14.5px;line-height:1.5}
.official-cta .btn{flex:none}

/* ---------- Highlight (valor destacado: próximo pago, resultado clave) ---------- */
.highlight{background:linear-gradient(135deg,var(--marca),var(--marca-d));color:#fff;border-radius:var(--r-l);padding:22px 26px;margin:26px 0;box-shadow:var(--sh-2)}
.highlight__k{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c6d8f2}
.highlight__v{font:800 clamp(1.5rem,4vw,2.1rem)/1.1 var(--serif);color:#fff;margin:4px 0 2px}
.highlight__s{font-size:14.5px;color:#dbe6f6}
.highlight--acento{background:linear-gradient(135deg,#cf5536,#9e3a22)}
.highlight--acento .highlight__k{color:#ffe1d6}
.highlight--acento .highlight__s{color:#ffe9e1}
/* Distinta del azul del hero (para no confundirlas cuando van seguidas): pizarra neutra. */
.highlight--acento2{background:linear-gradient(135deg,#3b4656,#1f2933)}
.highlight--acento2 .highlight__k{color:#cbd5e1}
.highlight--acento2 .highlight__s{color:#e2e8f0}

/* ---------- Wizard (árbol de decisión: "no consigo cita", etc.) ---------- */
.wizard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:22px;margin:0 0 26px;box-shadow:var(--sh-1)}
.wizard__q{font:700 1.1rem/1.3 var(--serif);color:var(--marca-d);margin:0 0 14px}
.wizard__opts{display:flex;flex-direction:column;gap:10px}
.wizard__opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface-alt);font:600 15px/1.35 var(--font);color:var(--ink);cursor:pointer;transition:.15s}
.wizard__opt::after{content:'';width:9px;height:9px;flex:none;border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:rotate(-45deg);transition:.15s}
.wizard__opt:hover{border-color:var(--marca);background:var(--tile);color:var(--marca-d)}
.wizard__opt:hover::after{border-color:var(--marca)}
.wizard__opt:focus-visible{outline:3px solid rgba(30,90,168,.4)}
.wizard__out{margin-top:6px}
.wizard__card{border-left:4px solid var(--marca);background:var(--tile);border-radius:0 var(--r) var(--r) 0;padding:16px 18px;margin-top:8px}
.wizard__card h4{margin:0 0 6px;color:var(--marca-d);font-size:1.05rem}
.wizard__card.is-danger{border-left-color:var(--danger);background:var(--danger-bg)}
.wizard__card.is-danger h4{color:var(--danger)}
.wizard__back{margin-top:14px;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border);border-radius:var(--r-s);background:#fff;color:var(--marca-br);font:600 14px/1 var(--font);cursor:pointer;padding:10px 16px;box-shadow:var(--sh-1);transition:.15s}
.wizard__back:hover{border-color:var(--marca);background:var(--tile);color:var(--marca-d)}