/* ============================================================
   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%). */
/* Noto Sans y Noto Serif SELF-HOSTEADAS (2026-08-23). Antes venían de Google Fonts con `display=swap`:
   el swap llegaba después del primer paint, el texto reflotaba y empujaba lo de abajo → CLS.
   Servirlas desde este archivo, que ya es bloqueante, no agrega una petición a la ruta crítica,
   saca dos dominios externos (googleapis + gstatic) y 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é.
   woff2 VARIABLES (un archivo cubre todo el rango de pesos). Licencia OFL. Se regeneran con:
     sb-tools/dev/self-host-font.py mx-issste "Noto+Sans:ital,wght@0,400..900;1,400"
     sb-tools/dev/self-host-font.py mx-issste "Noto+Serif:ital,wght@0,600..700;1,600"
   ⛔ NO volver a `swap` ni a cargar el CSS de fuentes en diferido: las dos variantes se
   midieron en mx-imss y las dos mueven la página. 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 700;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 700;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}
@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 */
  --guinda:#611232; --guinda-l:#7d1a42; --guinda-d:#480d26; --guinda-br:#9F2241;
  --gold:#b58a3c; --gold-l:#caa254;
  --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:#faf7f2; --surface:#fff; --surface-alt:#fbf8f4; --tile:#f6eef0;
  --ink:#20242e; --soft:#4c5361; --muted:#7a8290; --border:#e7ded2; --border-2:#eadfd0;
  /* Forma */
  --r-s:9px; --r:12px; --r-l:14px; --r-xl:18px;
  --sh-1:0 1px 2px rgba(72,13,38,.04); --sh-2:0 1px 2px rgba(72,13,38,.04),0 12px 30px -18px rgba(72,13,38,.18);
  --sh-3:0 18px 40px -18px rgba(72,13,38,.4);
  --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(--guinda-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(--guinda-br);text-decoration:none}
a:hover{color:var(--guinda);text-decoration:underline}
strong{color:var(--guinda-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(--guinda);color:#fff;padding:10px 16px;border-radius:var(--r-s)}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:3px solid rgba(159,34,65,.45);outline-offset:2px;border-radius:4px}
::selection{background:#f2d9a8;color:#3a0f20}

/* ---------- 3. Topbar ---------- */
.topbar{background:var(--guinda-d);color:#f0d9c9}
.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(--gold-l);box-shadow:0 0 0 3px rgba(230,189,108,.2);flex:none}
.topbar strong{color:#f2d9a8}
.topbar a{color:#f2d9a8;text-decoration:underline;text-underline-offset:2px}

/* ---------- 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 #ece2d3;box-shadow:0 1px 0 rgba(72,13,38,.03),0 6px 20px -16px rgba(72,13,38,.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__mark{width:44px;height:44px;flex:none;border-radius:12px;background:linear-gradient(160deg,var(--guinda-l),var(--guinda));display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(97,18,50,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.brand__mark .ico{width:26px;height:26px;stroke:#f2d9a8}
.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(--guinda);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(--guinda-d);cursor:pointer}
.nav__top:hover,.nav__group:hover .nav__top,.nav__top[aria-expanded="true"]{background:var(--tile)}
.nav__top--active{color:var(--guinda-br)}
.nav__caret{color:var(--gold);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 #ece2d3;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(--guinda);text-decoration:none}
.nav__panel a .ico{width:15px;height:15px;color:var(--guinda);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 14px;border-radius:var(--r-s);font:600 14.5px/1 var(--font);color:var(--guinda-d)}
.nav__link:hover{background:var(--tile);text-decoration:none}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid #e2d6c6;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(--guinda-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 #ece2d3;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 #f0e7da}
.nav-drawer__h{font:700 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--guinda);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(--guinda);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(--gold)}

/* ---------- 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(--guinda-br);font-weight:600}
.breadcrumbs [aria-current="page"]{color:var(--soft);font-weight:600}
.breadcrumbs .sep{display:inline-flex;vertical-align:middle;color:#c9bba8}
/* 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}
.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(--gold-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(--guinda-l) 0%,var(--guinda) 55%,var(--guinda-d) 100%);box-shadow:0 24px 50px -26px rgba(72,13,38,.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:#e7cdd6}
/* 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:#f2d9a8;text-decoration:underline;text-underline-offset:3px}
.hero--home .updated{color:#8fd6ab}
.hero--home .updated__dot{background:#8fd6ab}
.hero--home .section-eyebrow{color:#f2d9a8;background:rgba(255,255,255,.08);border:1px solid rgba(242,217,168,.28)}
/* Hero CONTENIDO — banda clara con acento lateral */
.hero--content{background:var(--surface-alt);border:1px solid var(--border);border-left:6px solid var(--guinda)}
.hero--content h1{color:var(--guinda-d)}
.hero--content h1 span{color:var(--gold)}
.hero--content .hero__lede{color:var(--soft)}
.hero--content .hero__wm .ico{color:var(--guinda);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(--guinda);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(--gold)}
.itile{width:38px;height:38px;flex:none;border-radius:10px;background:var(--tile);display:grid;place-items:center}
.itile .ico{color:var(--guinda)}

/* ---------- 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(--guinda);color:#fff;box-shadow:0 10px 20px -10px rgba(97,18,50,.6)}
.btn--primary:hover{background:var(--guinda-l);color:#fff}
.btn--ghost{background:#fff;color:var(--guinda);border-color:#d9c6ad}
.btn--ghost:hover{background:var(--surface-alt);color:var(--guinda)}
.btn--gold{background:linear-gradient(160deg,var(--gold-l),var(--gold));color:#3a0f20;font-weight:700;box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.btn--gold:hover{color:#3a0f20;filter:brightness(1.03)}
.btn--link{background:transparent;color:var(--guinda-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:#d9b8c4;box-shadow:0 18px 38px -20px rgba(72,13,38,.4)}
.card .itile{width:46px;height:46px;margin-bottom:14px}
.card .itile .ico{width:24px;height:24px}
.card h3{color:var(--guinda-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(--guinda-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){
  .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(--guinda);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 #f0e7da}
.table tbody tr:nth-child(even){background:var(--surface-alt)}
.table td strong{color:var(--guinda-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(--guinda);color:#fff;display:grid;place-items:center;font:800 14px/1 var(--font);margin-bottom:12px;box-shadow:0 4px 10px -5px rgba(97,18,50,.7)}
.steps li:nth-child(3n+2) .steps__h{background:var(--guinda-br)}
.steps li:nth-child(3n+3) .steps__h{background:var(--gold)}
.steps h3{margin:0 0 5px;font-size:15.5px;color:var(--guinda-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(--guinda-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(--gold);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:#d9b8c4;box-shadow:0 12px 28px -18px rgba(72,13,38,.35)}
.dir-list .ico{width:44px;height:44px;flex:none;color:var(--guinda);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(--guinda-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(--guinda-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(--guinda);box-shadow:0 0 0 3px rgba(159,34,65,.12)}
.dirsearch__box .ico{color:var(--gold);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(--guinda-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(--guinda-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(--guinda-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(--guinda-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(--guinda-d)}
.states-list a:hover{text-decoration:none;border-color:#d9b8c4;background:var(--surface-alt);color:var(--guinda)}

/* ---------- 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(--guinda-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 #e2d6c6;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(--guinda-br);outline:none;box-shadow:0 0 0 3px rgba(159,34,65,.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 #e2d6c6;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:#d9b8c4}
/* 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(--guinda);color:var(--guinda);box-shadow:inset 0 0 0 1px var(--guinda)}
.chip-opt[aria-pressed="true"] .ico{opacity:1;color:var(--guinda)}
/* Vigencia grid (constancia) */
.vig-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vig-opt{border:1.5px solid #e2d6c6;border-radius:12px;padding:16px;background:#fff;cursor:pointer;text-align:left}
.vig-opt[aria-checked="true"]{border-color:var(--guinda);box-shadow:0 0 0 3px rgba(159,34,65,.12)}
.vig-opt__dur{font-weight:700;color:var(--guinda-d)}
.vig-opt__price{color:var(--gold);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(--guinda);color:#f2d9a8;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(--guinda);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(--guinda-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. */
.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(--guinda);cursor:pointer;transition:background .15s,color .15s}
.field__i .ico{width:15px;height:15px;stroke-width:2}
.field__i:hover{background:var(--guinda);color:#fff}
.field__i[aria-expanded="true"]{background:var(--guinda);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(--gold);border-radius:var(--r);
  box-shadow:0 18px 40px -14px rgba(72,13,38,.45),0 2px 6px rgba(72,13,38,.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(--gold)}
.field__help[hidden]{display:none}
.field__help strong{color:var(--guinda-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. 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(--guinda);border-radius:var(--r-l);padding:24px;margin-top:22px;box-shadow:0 12px 30px -18px rgba(72,13,38,.35)}
.cl-head{display:flex;align-items:center;gap:11px}
.cl-head b{font:700 17px/1.3 var(--font);color:var(--guinda-d)}
.cl-spin{flex:none;width:18px;height:18px;border:2.5px solid rgba(97,18,50,.18);border-top-color:var(--guinda);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(--guinda-br),var(--guinda));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(--guinda);border-color:var(--guinda)}
.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(--guinda-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(--guinda);color:#fff;font:700 14.5px/1 var(--font);cursor:pointer;box-shadow:0 10px 20px -10px rgba(97,18,50,.6);transition:background .15s,transform .15s}
.res-back:hover{background:var(--guinda-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 dorado — 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(--guinda-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:#d9b8c4;box-shadow:0 16px 34px -20px rgba(72,13,38,.4)}
.next__badge{align-self:flex-start;margin-bottom:5px;padding:3px 10px;border-radius:999px;background:linear-gradient(160deg,var(--gold-l),var(--gold));color:#3a0f20;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(--guinda-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(--guinda-br);font:700 14px/1 var(--font);text-decoration:underline;text-underline-offset:3px}
.next__card:hover::after{color:var(--guinda)}
.next__card--feat{border-color:var(--gold);background:#fdfaf3;box-shadow:0 0 0 1px var(--gold),0 10px 24px -16px rgba(181,138,60,.6)}
.next__card--feat:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 16px 32px -16px rgba(181,138,60,.7)}

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

/* ---------- 18. Footer ---------- */
.site-footer{background:var(--guinda-d);color:#e7cdd6;margin-top:20px}
.site-footer .container{padding:44px 20px 20px}
.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(--gold-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:#e7cdd6}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-col a .ico{color:var(--gold-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)}
.footer-brand{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.footer-brand .brand__text,.footer-brand .brand__name{gap:0}
.footer-brand .bn1{font-size:12px;color:#fff}
.footer-brand .bn2{font-size:19px;color:#fff}
.footer-disclaimer p{margin:0;font-size:13.5px;line-height:1.6;color:#d7bcc7}
.footer-disclaimer a{color:var(--gold-l);text-decoration:underline;text-underline-offset:2px}
.footer-disclaimer a:hover{color:#fff}
.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(--gold-l);font-weight:600}
.footer-legal-links a:hover{color:#fff}
.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:#b58fa0}
.footer-legal .ico{color:var(--gold-l);fill:var(--gold-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>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}
  .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}
  .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 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;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 #f2e9dc}
  .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(--guinda);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(--guinda-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:linear-gradient(160deg,var(--gold-l),var(--gold));color:#3a0f20;border-color:transparent;box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.hero--home .btn--primary:hover{background:linear-gradient(160deg,var(--gold-l),var(--gold));color:#3a0f20;filter:brightness(1.04)}
.hero--home .btn--primary .ico{color:#3a0f20}
/* 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(--guinda-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(--guinda)}
.group-head::before{content:"";width:4px;height:1.05em;border-radius:2px;background:var(--guinda-br);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 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(--guinda-l),var(--guinda) 60%,var(--guinda-d));border-radius:var(--r-l);box-shadow:0 20px 44px -24px rgba(72,13,38,.65)}
.official-cta__txt{flex:1;min-width:220px}
.official-cta strong{display:block;color:#fff;font:700 1.2rem/1.25 var(--serif)}
.official-cta p{margin:6px 0 0;color:#e7cdd6;font-size:14.5px;line-height:1.5}
.official-cta .btn{flex:none}