/* ============================================================
   BASE.CSS
   Reset, tipografía, contenedores y utilidades.
   No contiene ningún componente visual: eso vive en components.css
   ============================================================ */

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip no rompe position:sticky; hidden es el respaldo para navegadores viejos */
  overflow-x:hidden;
  overflow-x:clip;
}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.032em;line-height:1.05}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit}

/* ---------- CONTENEDORES ---------- */
.wrap{width:min(var(--wrap),var(--gutter));margin:0 auto}
.narrow{width:min(var(--wrap-narrow),var(--gutter));margin:0 auto}

/* ---------- ESCALA TIPOGRÁFICA ---------- */
.xl{font-size:clamp(2.6rem,6.8vw,5.8rem);letter-spacing:-.048em;line-height:1}
.lg{font-size:clamp(1.95rem,4vw,3.3rem);letter-spacing:-.04em}
.md{font-size:clamp(1.42rem,2.3vw,1.95rem);letter-spacing:-.032em}
.h3{font-size:1.1rem}
.lede{
  font-size:clamp(1.04rem,1.4vw,1.26rem);
  line-height:1.55;
  color:var(--muted);
  max-width:62ch;
}

/* separación estándar entre un H2 y su párrafo de entrada */
h2 + .lede{margin-top:1.2rem}

/* ---------- MEDIDA DE LÍNEA ----------
   Limita a cuántos caracteres rompe un titular. */
.w-19ch{max-width:19ch}

/* ---------- INVERSIÓN SOBRE FONDO OSCURO ---------- */
.on-dark,
.on-dark h2,
.on-dark h3{color:#fff}
.on-dark .lede,
.on-dark p{color:var(--muted-d)}

/* ---------- ACCESIBILIDAD ---------- */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:.8rem 1.2rem;
  border-radius:0 0 8px 0;font-size:.92rem;font-weight:500;text-decoration:none;
}
.skip-link:focus{left:0}

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

/* ---------- UTILIDADES DE RETARDO PARA LAS ANIMACIONES ----------
   Se usan junto con .rv (ver components.css) para escalonar la entrada
   de los elementos. Sustituyen a los style="--d:.1s" del HTML original. */
.d-08{--d:.08s}
.d-10{--d:.10s}
.d-14{--d:.14s}
.d-16{--d:.16s}
.d-20{--d:.20s}
.d-24{--d:.24s}
.d-30{--d:.30s}