/* =========================================================
   BASE.CSS
   Reset minimo + tipografia base + utilidades de accesibilidad.
   No hay estilos de secciones especificas aca: eso vive en
   sections.css. Esto es lo que comparte TODA la pagina.
   ========================================================= */

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

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--sticky-h) + 12px);
}

body{
  background:var(--color-black);
  color:var(--color-ivory);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--sticky-h);
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.15;
  color:var(--color-ivory);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }

.wrap{
  max-width:var(--content-width);
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}

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

.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;
  top:-100px;
  left:12px;
  z-index:300;
  background:var(--color-gold);
  color:var(--color-black);
  padding:10px 16px;
  border-radius:var(--radius);
  font-size:14px;
  font-weight:500;
  transition:top var(--ease);
}
.skip-link:focus{ top:12px; }

section{
  padding:var(--space-9) 0;
  border-bottom:1px solid var(--color-line);
}
section:last-of-type{ border-bottom:none; }

.h2{
  font-size:26px;
  font-weight:600;
  color:var(--color-gold-bright);
  margin-bottom:22px;
}
.section-lede{
   color:var(--color-ivory-dim);
   margin-bottom:20px;
   max-width:42ch;
}

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 500ms ease, transform 500ms ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}