:root{--ink:#111111;--signal:#2A9D8F;--signal-strong:#217E72;--signal-text:#1B6B61;--soft:#E4F5F2;--base:#F8FAFC;--border:#E2E8F0;--g100:#F1F5F9;--g400:#94A3B8;--g500:#64748B;--g600:#475569}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

/* El relleno superior del body reserva el alto del header fijo (72 px, o
   60 px desde 768 px de ancho): con la página en el tope, nada se mueve. */
body{font-family:'Lato','Helvetica Neue',Arial,sans-serif;font-size:16px;color:var(--ink);padding-top:72px}

h1,h2,h3{font-family:'Montserrat',sans-serif;color:var(--ink)}

a{color:var(--signal-text);text-decoration:none}

a:hover{color:var(--signal-strong);text-decoration:underline}

.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* Nav — mismo chrome que la landing, incluido el panel mobile <details> */
  .nav-wrap{background:var(--ink);position:fixed;top:0;left:0;right:0;z-index:50}

.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 40px}

.nav-links{display:flex;align-items:center;gap:24px}

.nav-links a{font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:#FFFFFF}

.nav-links a:hover{color:#FFFFFF}

.nav-links a[aria-current="page"]{color:#7FD1C7}

.nav-links a.btn{display:inline-flex;align-items:center;height:44px;padding:0 20px;background:#FFFFFF;color:var(--ink);border-radius:4px;font-size:15px}

.nav-links a.btn:hover{background:var(--g100);color:var(--ink)}

.btn:hover{text-decoration:none}

.nav-mobile{display:none}

.nav-mobile>summary{list-style:none;cursor:pointer}

.nav-mobile>summary::-webkit-details-marker{display:none}

.nav-mobile-panel{display:flex;flex-direction:column;background:var(--ink);position:fixed;top:72px;left:0;right:0;z-index:60;max-height:calc(100vh - 72px);overflow-y:auto}

.nav-mobile-panel a{display:flex;align-items:center;min-height:44px;padding:12px 24px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:15px;color:#FFFFFF;border-top:1px solid rgba(255,255,255,0.1)}

.nav-mobile-panel a:hover{color:#FFFFFF}

.nav-mobile-panel a[aria-current="page"]{color:#7FD1C7}

/* CTA del nav — secundario (fondo blanco, tinta, sin borde): el teal fuerte
     queda para UN solo elemento por pantalla, la regla del acento único. */
  .nav-mobile-panel a.btn{margin:12px 24px 16px;border-top:none;justify-content:center;min-height:44px;background:#FFFFFF;color:var(--ink);border-radius:4px;padding:0 20px}

.nav-mobile-panel a.btn:hover{background:var(--g100);color:var(--ink)}

/* Banda de diagnóstico — Variante B del mockup (motivo §06 al 30%) */
  .diagband{background:var(--ink);position:relative;overflow:hidden;padding:64px 0}

/* Decorativo: nunca recibe toques. En móvil cubre toda la banda. */
  .diagband .motif{position:absolute;right:-80px;top:-60px;width:420px;opacity:.3;pointer-events:none}

.diagband h2{color:#FFFFFF;font-size:28px;font-weight:800;max-width:24ch;line-height:1.2}

.diagband p.lead{color:#CBD5E1;font-size:16px;line-height:1.6;max-width:56ch;margin:12px 0 24px}

/* CTA primario del DS: blanco sobre signal solo a 19px bold (DISENO.md).
     position:relative lo pinta por encima del motivo. */
  .diagband a.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;padding:12px 30px;background:var(--signal);color:#FFFFFF;border-radius:4px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:19px;line-height:1.25;text-align:center}

.diagband a.btn:hover{background:var(--signal-strong);color:#FFFFFF}

/* Footer */
  .foot{background:#FFFFFF;border-top:1px solid var(--border);padding:32px 0;font-size:13px;color:var(--g500)}

.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
    /* Una columna: el botón ocupa el ancho (tope 720px), fácil de tocar. */
    .diagband a.btn{display:flex;width:100%;max-width:720px}
  }

@media (max-width:768px){
    .nav{padding:0 24px;height:60px}
    .nav-links{display:none}
    .nav-mobile{display:block}
    .nav-mobile-panel{top:60px;max-height:calc(100vh - 60px)}
    .wrap{padding:0 24px}
  }

/* Gráfico destacado — SVG inline: las webfonts no cargan dentro de <img>,
     el texto queda rastreable (GEO) y no suma un request. Escala con el
     ancho de la figura, y el texto no puede bajar de 12px efectivos (piso
     del DS §05.1): su tamaño en unidades del viewBox (800 de ancho) se
     ajusta al ancho real de la figura con container queries. La base es la
     figura más angosta (título corto, una marca del eje de cada dos) y los
     tramos anchos reducen desde ahí: un navegador sin container queries
     recibe texto grande pero legible, nunca ilegible. Flat: rejilla, ejes y
     etiquetas con los tokens de data-viz del DS (§04.3); un solo acento
     teal, la barra del software. */
  .fig{container-type:inline-size;background:#FFFFFF;border:1px solid var(--border);border-radius:8px;overflow:hidden}

.kq-chart{display:block;width:100%;height:auto}

.kq-chart text{fill:var(--ink)}

.kq-chart .t{font-family:'Montserrat',sans-serif;font-weight:800;font-size:38px}

.kq-chart .l,.kq-chart .v,.kq-chart .k,.kq-chart .f{font-family:'Lato','Helvetica Neue',Arial,sans-serif;font-size:38px}

.kq-chart .v{font-weight:700;font-variant-numeric:tabular-nums}

.kq-chart .v-accent{fill:var(--signal-text)}

/* Contorno blanco bajo las etiquetas: la rejilla no las atraviesa. Solo
     donde paint-order existe; sin él, el trazo se pintaría sobre el texto. */
  @supports (paint-order:stroke){.kq-chart .l,.kq-chart .v{paint-order:stroke;stroke:#FFFFFF;stroke-width:6px;stroke-linejoin:round}}

.kq-chart .k{fill:var(--g600);text-anchor:middle}

.kq-chart .f{fill:var(--g600)}

/* Trazo de 1px de pantalla, alineado al píxel, a cualquier escala. */
  .kq-chart line{vector-effect:non-scaling-stroke;stroke-width:1px;shape-rendering:crispEdges}

.kq-chart .grid{stroke:var(--border)}

.kq-chart .axis{stroke:var(--g400)}

.kq-chart .bar{fill:var(--ink)}

.kq-chart .bar-accent{fill:var(--signal)}

.kq-chart .t-full,.kq-chart .k-odd{display:none}

/* Tramos por ancho de figura, de angosta a ancha. En las anchas el texto
     es más chico y el pie sube para no dejar un hueco sobre él. */
  @container (min-width:321px){.kq-chart .t{font-size:32px}.kq-chart .l,.kq-chart .v,.kq-chart .k,.kq-chart .f{font-size:30px}.kq-chart .t-full{display:inline}.kq-chart .t-short{display:none}}

@container (min-width:401px){.kq-chart .t{font-size:27px}.kq-chart .l,.kq-chart .v,.kq-chart .k,.kq-chart .f{font-size:24px}.kq-chart .k-odd{display:inline}.kq-chart .f{transform:translateY(-12px)}}

@container (min-width:501px){.kq-chart .t{font-size:24px}.kq-chart .l,.kq-chart .v,.kq-chart .k,.kq-chart .f{font-size:19.5px}.kq-chart .f{transform:translateY(-22px)}}

@container (min-width:621px){.kq-chart .t{font-size:22px}.kq-chart .l,.kq-chart .v,.kq-chart .k,.kq-chart .f{font-size:15.5px}}

/* Alto contraste forzado (Windows): los rellenos del SVG no se fuerzan solos. */
  @media (forced-colors:active){.kq-chart text{fill:CanvasText}.kq-chart .v-accent{fill:CanvasText}.kq-chart .l,.kq-chart .v{stroke:Canvas}.kq-chart .bar{fill:CanvasText}.kq-chart .bar-accent{fill:Highlight}.kq-chart .grid,.kq-chart .axis{stroke:GrayText}}

/* Header fijo arriba, sin moverse ni animarse al hacer scroll (el alto lo
     reserva el padding-top de body). Al dejar el tope, solo un borde
     inferior de 1px gray-300 — sin sombra. */

.nav-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#CBD5E1;display:none}

.nav-wrap.is-scrolled::after{display:block}

@media (max-width:768px){body{padding-top:60px}}

.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}

.skip-link{position:absolute;left:-9999px;top:8px}

.skip-link:focus{position:fixed;left:8px;top:8px;z-index:70;background:#FFFFFF;color:#111111;padding:10px 16px;border-radius:4px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 0 0 3px rgba(42,157,143,.45)}

.crumbs{font-size:13px;color:var(--g500);margin-bottom:20px}

.crumbs a{color:var(--g500)}