/* ============================================================
   BASE · reset, tipografía y utilidades de layout
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
  position:relative;

  background-color:var(--bone);
}
img,svg,video{display:block;max-width:100%;height:auto}
/* El atributo hidden debe ganar a cualquier display de componente. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}

::selection{background:var(--volt);color:var(--ink)}

:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}
.hero :focus-visible,.bg-ink :focus-visible,.ticker :focus-visible,
.footer :focus-visible,.share :focus-visible,.project :focus-visible,
.page-head :focus-visible{outline-color:var(--volt)}

/* --- Titulares --- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.025em;
  text-transform:uppercase;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.015em}
p{text-wrap:pretty}

/* --- Layout --- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--section)}
.stack>*+*{margin-top:var(--gap)}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:var(--maxw-txt)}
.measure{max-width:var(--maxw-txt)}
.center{text-align:center;margin-inline:auto}

/* --- Superficies --- */
.bg-ink{background:var(--ink);color:var(--bone)}
.bg-ink h2,.bg-ink h3{color:var(--paper)}
.bg-volt{background:var(--volt);color:var(--ink)}
.bg-paper{background:transparent}

/* --- Cabecera de sección editorial --- */
.sec-head{
  display:flex;align-items:baseline;gap:.9rem;
  margin-bottom:clamp(1.6rem,3.6vw,2.75rem);
  flex-wrap:wrap;
}
.sec-num{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:.32em .75em;
  border:1.5px solid currentColor;
  border-radius:var(--r-pill);
  opacity:.75;
  white-space:nowrap;
  flex:none;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* --- Regla animada --- */
.rule{height:1.5px;background:var(--line);border:0;width:100%}
.bg-ink .rule{background:rgba(255,255,255,.22)}

/* --- Animación de entrada ------------------------------------
   Mejora progresiva: el contenido es visible por defecto.
   Solo se oculta cuando el script inline del <head> confirma que
   hay JS (.js) y el usuario no pidió movimiento reducido. Si
   motion.js no arranca en 3.5 s, .motion-failsafe lo muestra todo. */
.js:not(.reduce-motion) .reveal:not(.in),
.js:not(.reduce-motion) [data-stagger]:not(.in)>*{opacity:0}

/* Entrada con animación y fill "backwards": aplica el estado inicial
   durante el retraso y al terminar devuelve el control al CSS del
   componente, así no bloquea hovers ni transiciones propias. */
.js:not(.reduce-motion) .reveal.in,
.js:not(.reduce-motion) [data-stagger].in>*{
  animation:m-rise var(--dur-base) var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * var(--stagger));
}
@keyframes m-rise{from{opacity:0;transform:translate3d(0,var(--dist-md),0)}}

.motion-failsafe .reveal,.motion-failsafe [data-stagger]>*{opacity:1!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Mismo comportamiento con la clase, que también permite probarlo. */
.reduce-motion{scroll-behavior:auto}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;
}

/* --- Accesibilidad --- */
.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{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--volt);color:var(--ink);padding:.75rem 1.25rem;
  font-weight:700;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}