/* ===================================================================
   BASE — reset, tipografía y utilidades compartidas
   =================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:var(--display);
  letter-spacing:-0.02em;
  line-height:1.08;
  color:var(--heading);
}
.mono{font-family:var(--mono)}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
section{padding:78px 0}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);font-weight:500;
}

.sec-head{max-width:640px;margin-bottom:14px}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:600;margin:12px 0 12px}
.sec-head p{color:var(--muted);font-size:1.05rem}
.sec-head.flush{margin-bottom:0}
.sec-head.centered{margin-inline:auto;text-align:center}

/* Bandas alternas: el blanco manda, el gris solo separa */
.band-mist{background:var(--base);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-paper{background:var(--paper)}

:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important;transition:none !important}
  .tile{opacity:1;transform:none}
}