/* Base: reset, tipografía, layout. Los colores vienen de tokens.css. */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 64px); }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-text); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--navy); text-underline-offset:.2em; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:300; color:var(--navy);
  line-height:1.05; letter-spacing:-.025em; margin:0 0 .5em;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.015em; }
h4{ font-size:1.05rem; line-height:1.3; }
h3,h4{ font-weight:400; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.band{ padding-block:clamp(3rem, 2rem + 4vw, 6rem); }
.band--white{ background:var(--white); }
.band--paper{ background:var(--paper); }
.band--mist{ background:var(--mist); }
/* Sección oscura: los headings se sobreescriben explícitamente (no heredan el navy de h1-h4) */
.band--navy{ background:var(--navy); color:var(--on-navy); }
.band--navy h1,.band--navy h2,.band--navy h3,.band--navy h4{ color:var(--on-navy); }
.band--navy p{ color:var(--on-navy-muted); }
.lede{ font-size:clamp(1.05rem, 1rem + .35vw, 1.25rem); color:var(--ink-muted); max-width:56ch; }
.section-head{ max-width:62ch; margin-bottom:clamp(1.6rem, 1rem + 2vw, 3rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.hl{ color:var(--steel); }

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

.skip-link{
  position:absolute; left:12px; top:-100px; z-index:100;
  background:var(--white); color:var(--ink); padding:.8em 1.2em; border-radius:12px;
  box-shadow:var(--shadow-3); transition:top .2s ease; text-decoration:none; font-weight:600;
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline:2.5px solid var(--steel); outline-offset:3px; border-radius:6px; }
.band--navy :focus-visible{ outline-color:var(--on-navy); }

/* Reveals: el contenido es visible por defecto; solo se anima si hay JS (html.js) y no hay reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .js .reveal:not(.is-in){ opacity:0; transform:translateY(18px); animation:reveal-fallback .01s 3.5s forwards; }
  @keyframes reveal-fallback{ to{ opacity:1; transform:none; } }
  .reveal{ transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}