/* ==========================================================================
   base.css — Reset moderno, fuentes self-hosted, tipografía y utilidades
   ========================================================================== */

/* ----- Fuentes self-hosted (woff2, display:swap) ----- */
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/spectral-400.woff2?v=3') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/spectral-500.woff2?v=3') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/spectral-600.woff2?v=3') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/spectral-700.woff2?v=3') format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/spectral-400-italic.woff2?v=3') format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/spectral-500-italic.woff2?v=3') format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:600;font-display:swap;src:url('/assets/fonts/spectral-600-italic.woff2?v=3') format('woff2');}
/* Libre Franklin con ?v=2: los archivos originales eran un stub corrupto y el caché
   de estáticos es largo (browser 1 año / nginx ~6 meses) — la URL nueva fuerza los
   bytes reparados (2026-07-02). Si se vuelven a reemplazar, subir a ?v=3 aquí y en
   los preloads de inc/head.php (deben calzar exacto para que el preload se reuse). */
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/libre-franklin-400.woff2?v=3') format('woff2');}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/libre-franklin-500.woff2?v=3') format('woff2');}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/libre-franklin-600.woff2?v=3') format('woff2');}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/libre-franklin-700.woff2?v=3') format('woff2');}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* scroll-padding-top: el nav es position:fixed (~76px, ~72px una vez scrolleado).
   Sin esto, todo salto a un ancla (#postular, #precio, #faq…) deja el titular
   tapado por la barra. El margen extra da aire y evita el corte al ras. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button { font-family: inherit; }
input, select, textarea, button { font: inherit; }

::selection { background: var(--c-teal); color: #fff; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* El anillo se dibuja FUERA del elemento (outline-offset), así que contrasta
   contra la superficie que hay detrás — no contra el componente. Por eso el
   color lo declara la superficie y se hereda hacia adentro.

   No existe un teal que sirva de comodín: medido contra los nueve fondos del
   sistema, teal-200 se cae a 1.49:1 sobre crema, teal a 2.13:1 sobre --c-ink-600
   y teal-500 a 2.71:1 sobre el mismo. Así que van dos tonos, cada uno en su sitio:
     · teal-200 sobre petróleo → 6.05:1 … 10.27:1
     · teal      sobre crema   → 4.24:1 … 5.05:1
   (WCAG 2.4.11 exige ≥3:1 contra el color adyacente.) */
.nav, .footer, .hero, .imp-hero, .imp-bar, .section--dark, .diagbn__inner,
html.page-experiencias body, html.page-diagnostico body {
  --focus-ring: var(--c-teal-200);
}
/* /recorrido es un scrollytelling que ALTERNA escenas crema y oscuras, y encima pinta
   halos teal translúcidos sobre el petróleo. Ni el teal (2.69:1 bajo el halo) ni el
   teal-200 (1.51:1 sobre crema) aguantan las dos mitades. El teal-500 sí: peor caso
   3.37:1 sobre las nueve superficies de la página. Puede acá y no como default global
   porque el crema de recorrido es más profundo y su petróleo más oscuro — no usa el
   --c-ink-600 (#1a4254) que hunde al teal-500 a 2.71:1 en el resto del sitio. */
html.page-recorrido body { --focus-ring: var(--c-teal-500); }
/* Islas crema que flotan sobre esas superficies oscuras: vuelven al teal. */
.form-card, .imp-plan, .imp-pricecard, .report { --focus-ring: var(--c-teal); }
/* La página legal re-tematiza el nav a crema (terminos.css), así que ahí el nav
   es una isla clara, no una superficie oscura. */
html.page-legal .nav { --focus-ring: var(--c-teal); }

/* ----- Tipografía base ----- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
em { font-style: italic; }
strong { font-weight: 600; }

/* ----- Accesibilidad ----- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: var(--z-skip);
  background: var(--c-ink-900); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--r-xs) var(--r-xs);
  text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }