/* ============================================================
   Causas Online — app.css (relanzamiento 2026)
   Sistema de diseño "Azul sereno" (paleta E) · Noto Sans + Noto Serif
   Base: diseño mx-issste retematizado al azul PJN. Íconos SVG inline.
   Objetivo CWV: liviano, sin frameworks.
   ============================================================ */

/* ---------- 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 Serif SELF-HOSTEADA. El @font-face tiene que existir antes del primer paint para que
   font-display:optional pueda evitar el swap — y con él el CLS de 0,10 que medimos en
   /antecedentes-penales, donde el H1 cambiaba de cantidad de lineas al llegar la fuente y
   empujaba todo el contenido de abajo. Servirla desde app.css, que ya es bloqueante, no
   agrega ni una peticion a la ruta critica y saca dos dominios externos (googleapis +
   gstatic). Es un woff2 VARIABLE: el mismo archivo cubre 600 y 700. Licencia OFL. */
@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 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: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: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 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 — Azul sereno (paleta E, relanzamiento 2026) */
  --brand:#2d72bd; --brand-l:#4f93d8; --brand-d:#1b4f86; --brand-br:#2168b5;
  --brand-2:#143f6e; /* tope oscuro de los degradados (hero / CTA oficial) */
  --accent:#c69749; --accent-l:#e6cf92;
  /* Dorado profundo para acento SOBRE FONDO CLARO: el --accent normal se lava (2,3:1 sobre el
     tile, 2,65:1 sobre blanco). Este da 3,9:1 y 4,5:1 — mismo hue, sólo más oscuro. */
  --accent-d:#96701f;
  /* Acento cálido secundario (teja): SOLO para cortar la monotonía azul en puntos salpicados */
  --accent-2:#c0704a; --accent-2-bg:#f6e9e1;
  --ok:#1c7a4b; --info:#276bb3; --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:#f2f7fc; --surface:#fff; --surface-alt:#f3f8fd; --tile:#e5f0fb;
  --ink:#1a2536; --soft:#44526a; --muted:#6b788e; --border:#d6e4f2; --border-2:#e0eaf6;
  /* Forma */
  --r-s:9px; --r:12px; --r-l:14px; --r-xl:18px;
  --sh-1:0 1px 2px rgba(18,44,80,.04); --sh-2:0 1px 2px rgba(18,44,80,.04),0 12px 30px -18px rgba(18,44,80,.18);
  --sh-3:0 18px 40px -18px rgba(18,44,80,.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(--brand-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(--brand-br);text-decoration:none}
a:hover{color:var(--brand);text-decoration:underline}
strong{color:var(--brand-d);font-weight:700}
img{max-width:100%;height:auto}
.num{font-variant-numeric:tabular-nums}
.container{max-width:var(--wrap);margin:0 auto;padding:0 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}
/* Silueta de provincia (sb_ico('prov-<slug>')): forma rellena, no de trazo como el resto de íconos */
.ico.ico--prov{fill:currentColor;stroke:none}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--brand);color:#fff;padding:10px 16px;border-radius:var(--r-s)}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:3px solid rgba(45,114,189,.45);outline-offset:2px;border-radius:4px}
::selection{background:#e6cf92;color:#23303f}

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

/* ---------- 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 #dce4ee;box-shadow:0 1px 0 rgba(18,44,80,.03),0 6px 20px -16px rgba(18,44,80,.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:var(--brand-d);display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(20,55,105,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.brand__mark .ico{width:33px;height:33px;stroke:#e6cf92}
.brand__text{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand__name{display:flex;flex-direction:column}
.bn1{font-weight:700;font-size:18px;line-height:1;color:#1c1c1c}
.bn2{font-weight:800;font-size:27px;line-height:1;letter-spacing:.005em;color:var(--brand-d)}
.nav{display:flex;align-items:center;gap:2px}
.nav__group{position:relative}
.nav__top{position:relative;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:0;background:transparent;border-radius:var(--r-s);font:600 14.5px/1 var(--font);color:var(--brand-d);cursor:pointer}
.nav__top:hover,.nav__group:hover .nav__top,.nav__top[aria-expanded="true"]{background:var(--tile)}
/* Sección actual: subrayado dorado + negrita fuerte, sin fondo. El color solo no alcanzaba
   (--brand-br #2168b5 contra --brand-d #1b4f86 no se percibe) y la pastilla celeste chocaba
   con el hover, que usa ese mismo fondo. 800 es un peso real de Noto Sans, no sintetizado. */
.nav__top--active{color:var(--brand-d);font-weight:800}
.nav__top--active::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2.5px;border-radius:2px;background:var(--accent)}
.nav__caret{color:var(--accent);transition:transform .2s}
.nav__group:hover .nav__caret,.nav__top[aria-expanded="true"] .nav__caret{transform:rotate(90deg)}
/* Sección de la página actual: el caret queda FIJO apuntando hacia abajo. El chevron del
   sprite mira a la derecha, así que "abajo" es el mismo rotate(90deg) del hover: en reposo
   sólo el grupo activo lo muestra así, y eso marca dónde estás sin agregar otro color. */
.nav__top--active .nav__caret{transform:rotate(90deg)}
/* El ítem exacto dentro del panel: el markup ya emitía aria-current="page" y nadie lo estaba
   estilando, así que al abrir el menú la página actual se veía igual que las demás. */
.nav__panel a[aria-current="page"]{background:var(--tile);color:var(--brand-d);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.nav__panel{position:absolute;top:100%;left:0;margin-top:10px;min-width:270px;background:#fff;border:1px solid #dce4ee;border-radius:var(--r-l);padding:8px;box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.nav__group:hover .nav__panel,.nav__top[aria-expanded="true"]+.nav__panel{opacity:1;visibility:visible;transform:none}
.nav__panel a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-s);font:500 14.5px/1.25 var(--font);color:var(--soft)}
.nav__panel a:hover{background:var(--tile);color:var(--brand);text-decoration:none}
.nav__panel a .ico{width:15px;height:15px;color:var(--brand);flex:none;padding:7px;background:var(--tile);border-radius:8px;box-sizing:content-box}
.nav__link{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-s);font:600 14.5px/1 var(--font);color:var(--brand-d)}
.nav__link:hover{background:var(--tile);text-decoration:none}
.nav__link{position:relative}
.nav__link[aria-current="page"]{color:var(--brand-d);font-weight:800}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2.5px;border-radius:2px;background:var(--accent)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid #cdd8e6;border-radius:var(--r-s);background:#fff;flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span{width:20px;height:2px;background:var(--brand-d);border-radius:2px;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Drawer móvil */
.nav-drawer{display:none;border-top:1px solid #dce4ee;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 #e7edf5}
.nav-drawer__h{font:700 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin:0 0 8px}
.nav-drawer a{display:flex;align-items:center;justify-content:space-between;padding:12px 10px;color:var(--soft);border-radius:var(--r-s)}
.nav-drawer a:hover{color:var(--brand);text-decoration:none}
/* Mismo criterio en el drawer móvil, donde no hay caret que rotar: fondo + barra dorada al
   costado (el subrayado no funciona en una lista vertical). El padding lateral de .nav-drawer a
   subió de 4px a 10px para TODOS los links, así la pastilla del activo no queda pegada al borde
   y ninguno se desalinea respecto de los demás. */
.nav-drawer a[aria-current="page"]{color:var(--brand-d);background:var(--tile);box-shadow:inset 3px 0 0 var(--accent)}
.nav-drawer a[aria-current="page"] .nav-drawer__lbl{font-weight:800}
.nav-drawer__lbl{display:flex;align-items:center;gap:10px;font:600 15px/1.2 var(--font)}
.nav-drawer__lbl .ico{color:var(--accent)}

/* ---------- 5. Breadcrumb ---------- */
.breadcrumbs{padding:14px 0 0}
/* En una sola línea con scroll propio: si envuelve a 2 líneas y luego el webfont la
   reacomoda a 1, la página entera salta 29px (CLS 0.16 medido en el breadcrumb más largo).
   Además en móvil un breadcrumb de dos renglones se lee peor. */
/* Con la barra de scroll oculta, el texto cortado a ras del borde parece un bug de
   layout. El degradado avisa que sigue; cuando el contenido entra, cae sobre espacio
   vacío y no se nota. */
.breadcrumbs ol{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--muted);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.breadcrumbs ol::-webkit-scrollbar{display:none}
.breadcrumbs li{flex:none;white-space:nowrap}
.breadcrumbs a{color:var(--brand-br);font-weight:600}
.breadcrumbs [aria-current="page"]{color:var(--soft);font-weight:600}
.breadcrumbs .sep{display:inline-flex;vertical-align:middle;color:#aeb9ca}
/* 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): ocupa el hueco que deja
   el texto, que está limitado a 680px. Los anillos del fondo sí van a la izquierda. */
.hero__wm{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:0;opacity:.06;pointer-events:none}
.hero__wm .ico{width:260px;height:260px;stroke-width:1}
/* Por debajo de 980px el texto ocupa todo el ancho del hero: el watermark solo estorba. */
@media (max-width:980px){.hero__wm{display:none}}
.hero h1{margin:16px 0 0}
.hero h1 span{color:var(--accent-l)}
.hero__lede{font-size:17.5px;line-height:1.6;margin:16px 0 0}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.section-eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;padding:7px 13px;border-radius:999px}
.updated{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:13.5px;font-weight:600;color:var(--ok)}
.updated__dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
/* Hero HOME — banda azul (dirección 1e) */
.hero--home,.hero--home{background:linear-gradient(160deg,var(--brand-2) 0%,var(--brand-d) 40%,var(--brand) 100%);box-shadow:0 24px 50px -26px rgba(18,44,80,.7)}
/* Figuras del hero (estilo mx-afore): anillos concéntricos semitransparentes, recortados en las
   esquinas por el overflow:hidden del .hero. Dan textura y profundidad al fondo azul plano.
   Decorativos (::before/::after, sin markup); la balanza (watermark hero__wm) se mantiene encima. */
.hero--home::before,.hero--home::after{content:"";position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.hero--home::before{top:-240px;left:-150px;width:520px;height:520px;border:48px solid rgba(9,30,56,.16)}
.hero--home::after{bottom:-300px;left:20px;width:480px;height:480px;border:40px solid rgba(9,30,56,.10)}
/* En mobile los anillos se MANTIENEN (antes display:none), escalados a la caja más chica. */
@media (max-width:980px){
  .hero--home::before{top:-150px;left:-110px;width:330px;height:330px;border-width:30px}
  .hero--home::after{bottom:-190px;left:-30px;width:300px;height:300px;border-width:26px}
}
.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:#c7d8ec}
/* El <strong> global es azul oscuro: sobre la banda azul del hero quedaba casi
   invisible (era el caso de "la reforma BAJA la edad" en jubilación). En claro. */
.hero--home .hero__lede strong,.hero--home .hero__lede b{color:#fff;font-weight:700}
.hero--home .hero__lede a{color:#e6cf92;text-decoration:underline;text-underline-offset:3px}
.hero--home .updated{color:#8fd6ab}
.hero--home .updated__dot{background:#8fd6ab}
.hero--home .section-eyebrow{color:#e6cf92;background:rgba(255,255,255,.08);border:1px solid rgba(230,207,146,.28)}
/* Hero CONTENIDO — banda clara con acento lateral */
.hero--content{background:var(--surface-alt);border:1px solid var(--border);border-left:6px solid var(--brand)}
.hero--content h1{color:var(--brand-d)}
.hero--content h1 span{color:var(--accent)}
.hero--content .hero__lede{color:var(--soft)}
.hero--content .hero__wm .ico{color:var(--brand);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(--brand);font-variant-numeric:tabular-nums}
/* Números: solo DOS colores (azul por defecto + un toque teja en los pares) para dar variedad
   sin restarle seriedad al sitio. Verde y violeta se descartaron: coloreaban de más. */
.stat:nth-child(2n) .stat__n{color:var(--accent-2)}
.stat__l{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.35}

/* ---------- 8. Box / secciones ---------- */
.box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:28px 30px;box-shadow:var(--sh-2);margin:22px 0}
.box h2{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.box .lede{color:var(--muted)}
.box ul{margin:0;padding-left:0;list-style:none}
.box ul li{position:relative;padding:6px 0 6px 26px;line-height:1.55}
.box ul li::before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;border-radius:2px;background:var(--accent)}
/* dir-list/dir-rows dentro de un .box ya son tarjetas con ícono propio: sin la viñeta dorada ni el sangrado de 26px de las listas de texto */
.box .dir-list li,.box .dir-rows li{padding:0}
.box .dir-list li::before,.box .dir-rows li::before{content:none}
/* El anillo interior define la pastilla, que sobre el fondo celeste de la página casi no se
   recortaba. Es 1px al 14%: se percibe como nitidez, no como borde. */
.itile{width:38px;height:38px;flex:none;border-radius:10px;background:var(--tile);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(150,112,31,.14)}
/* Solo la silueta en dorado; el tile sigue celeste (--tile). Dos palancas chicas contra el
   lavado: el dorado profundo (3,9:1 en vez de 2,3:1) y el trazo a 2 en vez del 1,7 global —
   a 20px un trazo fino en color claro se desvanece. */
.itile .ico{color:var(--accent-d);stroke-width:2}

/* ---------- 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}
/* Acción primaria en navy (mismo color que el header de tablas): más peso que el azul medio */
.btn--primary{background:var(--brand-d);color:#fff;box-shadow:0 10px 20px -10px rgba(20,55,105,.6)}
.btn--primary:hover{background:var(--brand);color:#fff}
.btn--ghost{background:#fff;color:var(--brand);border-color:#bcc9db}
.btn--ghost:hover{background:var(--surface-alt);color:var(--brand)}
.btn--gold{background:linear-gradient(160deg,var(--accent-l),var(--accent));color:#23303f;font-weight:700;box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.btn--gold:hover{color:#23303f;filter:brightness(1.03)}
.btn--link{background:transparent;color:var(--brand-br);min-height:auto;padding:0}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- 10. Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
.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:#b4c6de;box-shadow:0 18px 38px -20px rgba(18,44,80,.4)}
.card .itile{width:46px;height:46px;margin-bottom:14px}
.card .itile .ico{width:24px;height:24px}
.card h3{color:var(--brand-d);margin:0 0 6px}
.card p{font-size:14.5px;line-height:1.55;color:var(--soft);margin:0 0 14px}
/* CTA de la card en dorado profundo: --accent daba 2,65:1 sobre el blanco de la card y no
   llegaba a AA; --accent-d da 4,53:1 y sí. Mismo dorado, un punto más oscuro. */
.card__arrow{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--font);color:var(--accent-d)}
.card:hover .card__arrow{color:var(--brand-d)}
/* Tile de los íconos de las cards: pastilla azul (degradado brand) con el ícono en dorado claro,
   igual que los íconos de flujo (.ig-flow__ic). Mezcla azul + dorado, seria e idéntica en todas. */
.cards .card .itile{background:linear-gradient(155deg,var(--brand-l) 0%,var(--brand) 100%);box-shadow:0 6px 14px -8px rgba(20,55,105,.5)}
.cards .card .itile .ico{color:var(--accent-l)}
/* 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:1px solid var(--border-2);border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--sh-2);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}
/* Header: degradé navy + hairline dorado de acento + versalitas (menos "básica") */
.table thead th{background:linear-gradient(180deg,var(--brand-d),var(--brand-2));color:#fff;text-align:left;padding:15px 22px;font:700 12px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--accent)}
.table td{padding:15px 22px;color:var(--soft);border-top:1px solid var(--border-2);vertical-align:top}
.table tbody tr{transition:background .12s}
.table tbody tr:nth-child(even){background:var(--surface-alt)}
.table tbody tr:hover{background:var(--tile)}
/* Primera columna = ancla de la fila (navy, semibold) */
.table tbody td:first-child{color:var(--brand-d);font-weight:600}
.table td strong{color:var(--brand-d)}

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

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

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

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

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

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

/* ---------- 16.b Herramientas: formulario → procesamiento → resultado → rutas ----------
   El resultado no aparece mientras se teclea: se pide con un botón, se procesa a la
   vista y recién entonces se revela. Ese ritmo es lo que separa una herramienta de un
   input con JavaScript. */
/* Etiqueta + botón (i): la explicación de cada campo. El panel es un TOOLTIP flotante
   (position:absolute) — se superpone al contenido en vez de empujarlo, así abrirlo no
   mueve ni un pixel del formulario. El .field es el contenedor de referencia, de modo
   que el ancho del tooltip nunca se sale de su columna. */
.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(--brand);cursor:pointer;transition:background .15s,color .15s}
.field__i .ico{width:15px;height:15px;stroke-width:2}
.field__i:hover{background:var(--brand);color:#fff}
.field__i[aria-expanded="true"]{background:var(--brand);color:#fff}
.field__help{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:100%;margin:0;padding:13px 16px;
  background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--r);
  box-shadow:0 18px 40px -14px rgba(18,44,80,.45),0 2px 6px rgba(18,44,80,.08);
  font-size:14px;line-height:1.55;color:var(--soft);animation:tip-in .16s ease both}
.field__help::before{content:"";position:absolute;bottom:100%;left:var(--tip-x,22px);border:7px solid transparent;border-bottom-color:var(--accent)}
.field__help[hidden]{display:none}
.field__help strong{color:var(--brand-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;margin-top:22px}
.tool__out.is-in{animation:reveal .45s ease both}

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

/* Encabezado del resultado: con qué datos se calculó + volver al formulario. */
.res-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 14px;margin-top:22px}
.res-sel{display:flex;flex-wrap:wrap;gap:8px}
.res-chip{display:inline-flex;align-items:baseline;gap:7px;background:var(--surface-alt);border:1px solid var(--border-2);border-radius:999px;padding:6px 14px;line-height:1.2}
.res-chip .k{color:var(--muted);font:600 11px/1 var(--font);letter-spacing:.04em;text-transform:uppercase}
.res-chip .v{color:var(--brand-d);font:700 14px/1.2 var(--font);font-variant-numeric:tabular-nums}
.res-back{flex:none;min-height:44px;padding:0 20px;border:0;border-radius:11px;background:var(--brand);color:#fff;font:700 14.5px/1 var(--font);cursor:pointer;box-shadow:0 10px 20px -10px rgba(20,55,105,.6);transition:background .15s,transform .15s}
.res-back:hover{background:var(--brand-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(--brand-d)}
.next__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.next__card{display:flex;flex-direction:column;gap:4px;padding:17px 19px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);text-decoration:none;box-shadow:var(--sh-1);transition:transform .15s,box-shadow .15s,border-color .15s}
.next__card:hover{text-decoration:none;transform:translateY(-2px);border-color:#b4c6de;box-shadow:0 16px 34px -20px rgba(18,44,80,.4)}
.next__badge{align-self:flex-start;margin-bottom:5px;padding:3px 10px;border-radius:999px;background:linear-gradient(160deg,var(--accent-l),var(--accent));color:#23303f;font:800 10.5px/1.5 var(--font);letter-spacing:.05em;text-transform:uppercase}
.next__t{font:700 15.5px/1.35 var(--font);color:var(--brand-d)}
.next__d{font-size:14px;line-height:1.5;color:var(--soft)}
.next__card::after{content:"Ver más →";margin-top:11px;align-self:flex-start;color:var(--brand-br);font:700 14px/1 var(--font);text-decoration:underline;text-underline-offset:3px}
.next__card:hover::after{color:var(--brand)}
.next__card--feat{border-color:var(--accent);background:#f4f8fd;box-shadow:0 0 0 1px var(--accent),0 10px 24px -16px rgba(198,151,73,.6)}
.next__card--feat:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 16px 32px -16px rgba(198,151,73,.7)}

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

/* ---------- 18. Footer ---------- */
/* Footer: navy profundo --brand-2 (#143f6e), el mismo tope oscuro del degradado del hero */
.site-footer{background:var(--brand-2);color:#c7d8ec;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(--accent-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:#c7d8ec}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-col a .ico{color:var(--accent-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:10px;margin-bottom:12px}
.footer-brand .brand__text,.footer-brand .brand__name{gap:0}
/* Logo invertido para el footer navy: tile claro + balanza navy + wordmark blanco,
   mismo tamaño que el header (como en mx-issste). */
/* Logo del footer: la balanza va en blanco directamente sobre el navy, SIN recuadro (sin tile ni
   sombra), a la altura de los dos renglones apilados (bn1 18px + bn2 27px ≈ 45px) y centrada con ellos. */
.footer-brand .brand__mark{background:none;box-shadow:none;width:auto;height:auto}
/* La balanza también dorada, igual que en el header: sobre el navy queda el par
   balanza + "Online" en --accent-l, con "Causas" blanco como único bloque neutro. */
.footer-brand .brand__mark .ico{width:46px;height:46px;stroke:var(--accent-l)}
.footer-brand .bn1{font-size:18px;color:#fff}
/* "Online" en dorado sobre el navy: mismo --accent-l de la balanza del header, el único
   acento cálido del sitio. "Causas" queda blanco para que el contraste no se pierda. */
.footer-brand .bn2{font-size:27px;color:var(--accent-l)}
.footer-disclaimer p{margin:0;font-size:13.5px;line-height:1.6;color:#b9cbe2}
.footer-disclaimer a{color:var(--accent-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(--accent-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:#8ba3c0}
.footer-legal .ico{color:var(--accent-l);fill:var(--accent-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 #e8eef6}
  .table-wrap--stack .table--stack td::before{content:attr(data-label);display:block;font:700 11px/1.4 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--brand);margin-bottom:3px}
}

/* ---------- 21. Ajustes de integración (labels de resultado por herramienta) ---------- */
#jub .tool__result::before{content:"Tu estimación"}
#agui .tool__result::before{content:"Tu aguinaldo estimado"}
#deudo .tool__result::before{content:"Tu código de deudo"}
#decisor .tool__result::before{content:"Nuestra recomendación"}
/* jub/decisor muestran un veredicto (texto), no un monto: el .big no debe ir a 46px */
#jub .tool__result .big,#decisor .tool__result .big{font-size:22px;line-height:1.2}
/* marca de agua del hero home: nuestros íconos son de trazo, mantener stroke (no fill) */
/* Marca de agua del hero (balanza / silueta) del MISMO navy que los anillos decorativos, para que combinen */
.hero--home .hero__wm{opacity:1}
.hero--home .hero__wm .ico{stroke:rgba(9,30,56,.16)!important;stroke-width:1}
.hero--home .hero__wm .ico--prov{fill:rgba(9,30,56,.16)!important;stroke:none!important}
/* info-levels: detalle de badge/título/pill dentro de cada nivel */
.info-levels .lvl-badge{margin-bottom:12px}
.info-levels h3{margin:0 0 6px;color:var(--brand-d)}
.info-levels p{font-size:14.5px;line-height:1.55;color:var(--soft);margin:0 0 12px}
/* caption de tablas: nota de referencia como pie muted */
.table caption{caption-side:bottom;text-align:left;padding:11px 18px;font-size:12.5px;line-height:1.5;color:var(--muted);background:var(--surface-alt);border-top:1px solid var(--border-2)}
/* En el hero azul, el botón principal va DORADO (como el diseño); el azul se lavaría sobre el fondo azul */
.hero--home .btn--primary{background:linear-gradient(160deg,var(--accent-l),var(--accent));color:#23303f;border-color:transparent;box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.hero--home .btn--primary:hover{background:linear-gradient(160deg,var(--accent-l),var(--accent));color:#23303f;filter:brightness(1.04)}
.hero--home .btn--primary .ico{color:#23303f}
/* split: texto + columna de mini-enlaces (home ¿qué es?, fichas) */
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
.split>div:first-child p:last-child{margin-bottom:0}
.split .dir-list{margin:0}
.split .dir-list li a .ico:last-child{margin-left:auto;width:15px;height:15px;padding:0;background:none;color:var(--brand-br)}
.section-eyebrow .ico{width:14px;height:14px}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:18px}}
/* encabezado de sección abierto (heading + subtítulo a la derecha), no boxed */
/* bajada apilada bajo el título (no flotando a la derecha): mismo patrón que .group-head */
.section-head{display:block;margin:34px 0 10px}
/* mismo lockup ícono+título que .box h2, para que rotular una tabla o unos pasos se vea
   igual que rotular una caja de texto (pero sin dibujar una tarjeta vacía alrededor) */
.section-head h2{display:flex;align-items:center;gap:12px;margin:0}
.section-head p{margin:6px 0 0;max-width:70ch;color:var(--muted);font-size:15px}
/* anclas internas: compensar el header sticky para que el título no quede tapado */
/* encabezado de grupo de tarjetas: rotula sin parecer tarjeta clicable */
/* rótulo de grupo de tarjetas: título con barra de acento a la izquierda (neutro, sin ícono) */
.group-head{display:flex;align-items:center;gap:11px;margin:30px 0 14px;font-family:var(--serif);font-size:1.3rem;color:var(--brand-d)}
.group-head::before{content:"";width:4px;height:1.05em;border-radius:2px;background:var(--accent-2);flex:none}
.section-head[id],.group-head[id],.box h2[id],.box h3[id]{scroll-margin-top:96px}
/* CTA oficial FINAL (después del contenido): bloque azul con botón dorado */
.official-cta{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;margin:26px 0 8px;padding:26px 30px;background:linear-gradient(160deg,var(--brand-2) 0%,var(--brand-d) 65%,var(--brand) 100%);border-radius:var(--r-l);box-shadow:0 20px 44px -24px rgba(18,44,80,.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:#c7d8ec;font-size:14.5px;line-height:1.5}
.official-cta .btn{flex:none}

/* ---------- 22. Buscador EJE (causas de CABA) ---------- */
.eje-count{margin:2px 0 12px;font-size:15px;color:var(--soft)}
.eje-list{margin-top:6px}
.eje-list li{list-style:none}
.eje-item{display:flex;align-items:flex-start;gap:14px;padding:15px 18px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--sh-1)}
.eje-item .ico{width:22px;height:22px;flex:none;color:var(--brand);margin-top:1px}
.eje-item__b{min-width:0}
.eje-item__b strong{display:block;font:600 15px/1.4 var(--font);color:var(--brand-d)}
.eje-item__b .dir-meta{margin-top:4px}
.eje-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
.eje-pgn{font:600 14px/1 var(--font);color:var(--muted)}
.eje-pgbtns{display:flex;gap:10px}
.eje-pager .btn{min-height:42px}
.eje-hint{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ---------- 23. Wizard de decisión (¿dónde está mi causa?, etc.) ---------- */
.wiz-res{border:1.5px solid var(--border-2);border-left:5px solid var(--ok);border-radius:var(--r-l);padding:22px 24px;background:var(--surface)}
.wiz-res__h{display:flex;align-items:center;gap:10px;font:600 15px/1.4 var(--font);color:var(--soft)}
.wiz-res__h .ico{color:var(--ok);flex:none}
.wiz-res__sys{font:800 24px/1.2 var(--serif);color:var(--brand-d);margin:8px 0 4px}
.wiz-res__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.wiz-res .callout{margin:16px 0 0}

/* Wizard: lista de vías (¿tengo una denuncia?) */
.wiz-ways{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.wiz-ways li{position:relative;padding:14px 16px 14px 44px;background:var(--surface-alt);border:1px solid var(--border-2);border-radius:var(--r);font-size:15px;line-height:1.55;color:var(--soft)}
.wiz-ways li::before{content:"";position:absolute;left:16px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--brand-br)}
.wiz-ways strong{color:var(--brand-d)}
.wiz-note{margin:14px 0 0;font-size:13.5px;color:var(--muted)}

/* ═══════════ 24. INFOGRAFÍAS (sb_ig_*) ═══════════ */
.ig{margin:24px 0;border:1px solid var(--border-2);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--sh-2);overflow:hidden}
.ig__cap{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--surface-alt);border-bottom:1px solid var(--border-2);font:700 13px/1.3 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--brand-d)}
.ig__cap .ico{color:var(--accent);width:18px;height:18px}

/* --- Comparación sí/no --- */
.ig-vs__grid{display:grid;grid-template-columns:1fr 1fr}
.ig-vs__col{padding:18px 20px 20px}
.ig-vs__col--yes{background:linear-gradient(180deg,var(--ok-bg),transparent 70%)}
.ig-vs__col--no{background:linear-gradient(180deg,var(--danger-bg),transparent 70%);border-left:1px solid var(--border-2)}
.ig-vs__h{display:flex;align-items:center;gap:8px;font:800 15px/1.2 var(--font);margin-bottom:12px}
.ig-vs__col--yes .ig-vs__h{color:var(--ok)} .ig-vs__col--yes .ig-vs__h .ico{color:var(--ok)}
.ig-vs__col--no .ig-vs__h{color:var(--danger)} .ig-vs__col--no .ig-vs__h .ico{color:var(--danger)}
.ig-vs__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ig-vs__col li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:var(--soft)}
.ig-vs__col li::before{position:absolute;left:0;top:0;font-weight:800}
.ig-vs__col--yes li::before{content:"✓";color:var(--ok)}
.ig-vs__col--no li::before{content:"✕";color:var(--danger)}
.ig-vs__col li strong{color:var(--brand-d)}

/* --- Flujo de proceso --- */
.ig-flow__track{display:flex;align-items:stretch;gap:0;padding:22px 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ig-flow__step{flex:1;min-width:150px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 8px}
.ig-flow__ic{width:46px;height:46px;flex:none;border-radius:12px;background:linear-gradient(160deg,var(--brand-l),var(--brand));color:#e6cf92;display:grid;place-items:center;font:800 18px/1 var(--font);box-shadow:0 8px 16px -8px rgba(20,55,105,.6)}
.ig-flow__ic .ico{width:22px;height:22px;stroke:#e6cf92}
.ig-flow__t{font:700 14.5px/1.3 var(--font);color:var(--brand-d)}
/* Paso enlazado: tiene que LEERSE como clicable, si no la infografía describe un camino
   que el lector no puede seguir. Azul de marca + subrayado, como los links del cuerpo. */
.ig-flow__t--link{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(29,78,137,.4)}
.ig-flow__t--link:hover{color:var(--brand-d);text-decoration-color:currentColor}
.ig-flow__d{font-size:13px;line-height:1.45;color:var(--muted)}
.ig-flow__arrow{flex:none;display:flex;align-items:center;color:var(--accent);align-self:flex-start;margin-top:11px}
.ig-flow__arrow .ico{width:22px;height:22px}
@media(max-width:640px){
  .ig-flow__track{flex-direction:column;gap:0}
  .ig-flow__step{flex-direction:row;min-width:0;text-align:left;gap:12px;padding:0}
  .ig-flow__t{flex:none} .ig-flow__d{flex:1}
  .ig-flow__step{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
  .ig-flow__t{grid-column:2} .ig-flow__d{grid-column:2}
  .ig-flow__ic{grid-row:1/3}
  .ig-flow__arrow{transform:rotate(90deg);margin:2px 0 2px 12px;align-self:flex-start}
}

/* --- Anatomía de un documento/dato --- */
.ig-anatomy__piece{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;justify-content:center;padding:26px 20px 22px;font:700 clamp(15px,2.4vw,20px)/1.4 var(--font)}
.ig-anatomy__tok{padding:5px 11px;border-radius:8px;position:relative}
.ig-anatomy__tok.tok-0{background:#e9eef9;color:#2c4a70}
.ig-anatomy__tok.tok-1{background:var(--ok-bg);color:#215c3f}
.ig-anatomy__tok.tok-2{background:var(--warn-bg);color:#6d4d0e}
.ig-anatomy__tok.tok-3{background:var(--tip-bg);color:#4a3670}
.ig-anatomy__sep{color:var(--muted);font-weight:600;padding:0 2px}
.ig-anatomy__legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;padding:0 20px 22px}
.ig-anatomy__leg{display:flex;gap:10px;align-items:flex-start}
.ig-anatomy__dot{width:13px;height:13px;border-radius:4px;flex:none;margin-top:3px}
.ig-anatomy__dot.dot-0{background:#7ea0ec} .ig-anatomy__dot.dot-1{background:#5bc48f}
.ig-anatomy__dot.dot-2{background:#e3a34d} .ig-anatomy__dot.dot-3{background:#a98fd6}
.ig-anatomy__leg strong{display:block;font:700 14px/1.3 var(--font);color:var(--brand-d)}
.ig-anatomy__leg span{font-size:13px;line-height:1.45;color:var(--muted)}
.ig-anatomy__note{margin:0;padding:14px 20px;border-top:1px solid var(--border-2);background:var(--surface-alt);font-size:13.5px;line-height:1.55;color:var(--soft)}
@media(max-width:560px){.ig-vs__grid{grid-template-columns:1fr}.ig-vs__col--no{border-left:0;border-top:1px solid var(--border-2)}}