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

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

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca */
  --verde:#006857; --verde-l:#017a66; --verde-d:#00413b; --verde-br:#017568;
  --gold:#c9a24b; --gold-l:#ecc87c; --gold-bg:#f0e4c8;
  --guinda:#7a2142; --guinda-l:#9f2241; --guinda-d:#5e1a33;
  --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:#e3f0ec;
  --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(0,65,59,.04); --sh-2:0 1px 2px rgba(0,65,59,.04),0 12px 30px -18px rgba(0,65,59,.18);
  --sh-3:0 18px 40px -18px rgba(0,65,59,.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(--verde-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(--verde-br);text-decoration:none}
a:hover{color:var(--verde);text-decoration:underline}
strong{color:var(--verde-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(--verde);color:#fff;padding:10px 16px;border-radius:var(--r-s)}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:3px solid rgba(1,117,104,.45);outline-offset:2px;border-radius:4px}
::selection{background:#ecc87c;color:#3a0f20}

/* ---------- 3. Topbar ---------- */
.topbar{background:var(--verde-d);color:#dce9e3}
.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:#ecc87c}

/* ---------- 4. Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:70;background:var(--verde);border-bottom:1px solid rgba(236,200,124,.3);box-shadow:0 6px 20px -14px rgba(0,20,15,.55)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
/* Lockup de marca (handoff de identidad 2026): símbolo + bloque PORTAL / IMSS.
   La altura del símbolo iguala la del bloque de texto —de la cima de la "P" a la base
   de "IMSS"— ≈ 14 + 4 + 28 = 46-52px. Si se escala el lockup, mantener esa proporción. */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand:hover{text-decoration:none}
/* El alto real lo fijan los atributos width/height del <img> (50 en el header, 38 en el pie):
   así reserva su caja antes de cargar y no hay salto de layout. */
.brand__mark-img{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{font-weight:700;font-size:14px;line-height:1;letter-spacing:.26em;text-transform:uppercase;color:#cfe6de}
.bn2{font-family:var(--serif);font-weight:900;font-size:28px;line-height:1;letter-spacing:.03em;color:#fff;margin-top:4px}
.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(--gold-l)}
.nav__caret{color:var(--gold-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 #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(--verde);text-decoration:none}
.nav__panel a .ico{width:15px;height:15px;color:var(--verde-d);flex:none;padding:7px;background:var(--gold-bg);border-radius:50%;box-sizing:content-box;box-shadow:inset 0 0 0 1px rgba(201,162,75,.3)}
.nav__panel a[aria-current="page"]{background:var(--tile);color:var(--verde-d);font-weight:700}
.nav__panel a[aria-current="page"] .ico{background:var(--verde);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 #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(--verde);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(--verde);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)}
.nav-drawer a[aria-current="page"]{background:var(--tile);color:var(--verde-d)}
.nav-drawer a[aria-current="page"] .nav-drawer__lbl .ico{color:var(--verde)}

/* ---------- 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(--verde-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}
/* 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(--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 verde (dirección 1e) */
.hero--home,.hero--home{background:linear-gradient(155deg,var(--verde-l) 0%,var(--verde) 55%,var(--verde-d) 100%);box-shadow:0 24px 50px -26px rgba(0,65,59,.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:#c2e2d8}
/* El <strong> global es verde oscuro: sobre la banda verde 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:#ecc87c;text-decoration:underline;text-underline-offset:3px}
.hero--home .updated{color:#8fd6ab}
.hero--home .updated__dot{background:#8fd6ab}
.hero--home .section-eyebrow{color:#ecc87c;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(--verde)}
.hero--content h1{color:var(--verde-d)}
.hero--content h1 span{color:var(--gold)}
.hero--content .hero__lede{color:var(--soft)}
.hero--content .hero__wm .ico{color:var(--verde);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(--verde);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)}
/* Icon tile bicolor estilo app IMSS: círculo dorado/arena + ícono verde. */
.itile{width:38px;height:38px;flex:none;border-radius:50%;background:var(--gold-bg);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(201,162,75,.35)}
.itile .ico{color:var(--verde-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(--verde);color:#fff;box-shadow:0 10px 20px -10px rgba(0,104,87,.6)}
.btn--primary:hover{background:var(--verde-l);color:#fff}
.btn--ghost{background:#fff;color:var(--verde);border-color:#d9c6ad}
.btn--ghost:hover{background:var(--surface-alt);color:var(--verde)}
.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(--verde-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(0,65,59,.4)}
.card .itile{width:46px;height:46px;margin-bottom:14px}
.card .itile .ico{width:24px;height:24px}
.card h3{color:var(--verde-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(--verde-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(--verde);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(--verde-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(--verde);color:#fff;display:grid;place-items:center;font:800 14px/1 var(--font);margin-bottom:12px;box-shadow:0 4px 10px -5px rgba(0,104,87,.7)}
.steps li:nth-child(3n+2) .steps__h{background:var(--verde-br)}
.steps li:nth-child(3n+3) .steps__h{background:var(--gold)}
.steps h3{margin:0 0 5px;font-size:15.5px;color:var(--verde-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(--verde-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(0,65,59,.35)}
/* 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(--verde-br);text-decoration:underline;text-underline-offset:2px}
.dir-list .ico{width:44px;height:44px;flex:none;color:var(--verde);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(--verde-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(--verde-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(--verde);box-shadow:0 0 0 3px rgba(1,117,104,.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(--verde-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(--verde-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(--verde-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(--verde-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(--verde-d)}
.states-list a:hover{text-decoration:none;border-color:#d9b8c4;background:var(--surface-alt);color:var(--verde)}

/* ---------- 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(--verde-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 #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(--verde-br);outline:none;box-shadow:0 0 0 3px rgba(1,117,104,.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 verde, NO relleno sólido: el relleno verde 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(--verde);color:var(--verde);box-shadow:inset 0 0 0 1px var(--verde)}
.chip-opt[aria-pressed="true"] .ico{opacity:1;color:var(--verde)}
/* 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(--verde);box-shadow:0 0 0 3px rgba(1,117,104,.12)}
.vig-opt__dur{font-weight:700;color:var(--verde-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(--verde);color:#ecc87c;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(--verde);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(--verde-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(--verde);cursor:pointer;transition:background .15s,color .15s}
.field__i .ico{width:15px;height:15px;stroke-width:2}
.field__i:hover{background:var(--verde);color:#fff}
.field__i[aria-expanded="true"]{background:var(--verde);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(0,65,59,.45),0 2px 6px rgba(0,65,59,.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(--verde-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(--verde);border-radius:var(--r-l);padding:24px;margin-top:22px;box-shadow:0 12px 30px -18px rgba(0,65,59,.35)}
.cl-head{display:flex;align-items:center;gap:11px}
.cl-head b{font:700 17px/1.3 var(--font);color:var(--verde-d)}
.cl-spin{flex:none;width:18px;height:18px;border:2.5px solid rgba(0,104,87,.18);border-top-color:var(--verde);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(--verde-br),var(--verde));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(--verde);border-color:var(--verde)}
.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(--verde-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(--verde);color:#fff;font:700 14.5px/1 var(--font);cursor:pointer;box-shadow:0 10px 20px -10px rgba(0,104,87,.6);transition:background .15s,transform .15s}
.res-back:hover{background:var(--verde-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(--verde-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(0,65,59,.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(--verde-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(--verde-br);font:700 14px/1 var(--font);text-decoration:underline;text-underline-offset:3px}
.next__card:hover::after{color:var(--verde)}
.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(--verde-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(--verde);font:600 12.5px/1 var(--font)}

/* ---------- 18. Footer ----------
   Banda verde oscuro a sangre: la marca cierra la página igual que la abre en el topbar.
   Todo lo de adentro se recolorea sobre oscuro (los defaults globales de a/strong son verdes
   y sobre este fondo no contrastan). */
.site-footer{background:var(--verde-d);color:#c3d6ce;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(--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:#c3d6ce}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-col a .ico{color:var(--gold)}
.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 38px, PORTAL 11px, IMSS 22px. */
.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:11px;color:#fff}
.footer-brand .bn2{font-size:22px;margin-top:3px;color:#fff}
.footer-disclaimer p{margin:0;font-size:13.5px;line-height:1.6;color:#b6cbc2}
.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;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:#8fa9a0}
.footer-legal .ico{color:var(--gold);fill:var(--gold);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(--verde-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(--verde);color:#fff;font-weight:800;box-shadow:0 0 0 2px var(--gold-l);border:0;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;transition:.15s}
.mini-cal__day--pago:hover{background:var(--verde-br)}
.mini-cal__day--pago[aria-expanded="true"]{background:var(--guinda)}
.mini-cal__s{margin:10px 0 0;font-size:12px;text-align:center;color:var(--muted)}
.mini-cal__s strong{color:var(--verde-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(--verde-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 ---------- */
@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 38px y el texto lo acompaña (11/22) */
  .brand{gap:9px}
  .brand .brand__mark-img{height:38px;width:auto}
  .bn1{font-size:11px}
  .bn2{font-size:22px;margin-top:3px}
  /* 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}
  .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(--verde);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(--verde-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 verde, el botón principal va DORADO (como el diseño); el verde se lavaría sobre el fondo verde */
.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(--verde-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(--verde)}
.group-head::before{content:"";width:4px;height:1.05em;border-radius:2px;background:var(--guinda);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 verde 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(--verde-l),var(--verde) 60%,var(--verde-d));border-radius:var(--r-l);box-shadow:0 20px 44px -24px rgba(0,65,59,.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:#c2e2d8;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(--verde),var(--verde-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:#bfe6d3}
.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:#dcefe5}
.highlight--gold{background:linear-gradient(135deg,var(--gold),#9a7430)}
.highlight--gold .highlight__k{color:#f6e6c4}
.highlight--gold .highlight__s{color:#f3e7cf}
/* Distinta del verde del hero (para no confundirlas cuando van seguidas) y con buen
   contraste: el dorado claro con texto blanco queda por debajo de 3:1. */
.highlight--guinda{background:linear-gradient(135deg,var(--guinda-l),var(--guinda-d))}
.highlight--guinda .highlight__k{color:#f0c9d6}
.highlight--guinda .highlight__s{color:#f0d7de}

/* ---------- 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(--verde-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(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);transition:.15s}
.wizard__opt:hover{border-color:var(--verde);background:var(--tile);color:var(--verde-d)}
.wizard__opt:hover::after{border-color:var(--verde)}
.wizard__opt:focus-visible{outline:3px solid rgba(1,117,104,.4)}
.wizard__out{margin-top:6px}
.wizard__card{border-left:4px solid var(--verde);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(--verde-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(--verde-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(--verde);background:var(--tile);color:var(--verde-d)}