/* ============================================================================
   Base — reset, tipografía, layout y primitivas de movimiento
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  min-height: 100%;
  background: var(--ink-900);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--teak-300);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

::selection { background: var(--teak-500); color: var(--ink-900); }

/* ── Layout ────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  background: var(--surface);
  color: var(--text-primary);
  padding-block: var(--section-y);
}

.section--sunken { --surface: var(--ink-800); }

/* Regla capilar que separa secciones del mismo tono */
.section--ruled { border-top: var(--border-w) solid var(--hairline); }

/* ── Tipografía ────────────────────────────────────────────────────────── */

.display-2xl, .display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.display-2xl { font-size: var(--fs-display-2xl); }
.display-xl  { font-size: var(--fs-display-xl); }
.display-lg  { font-size: var(--fs-display-lg); line-height: var(--lh-heading); }
.display-md  { font-size: var(--fs-display-md); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); }

/* La palabra acentuada: exactamente UNA por titular. Es la firma del sistema. */
.em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  color: var(--accent);
  letter-spacing: 0;
  /* Instrument Serif corre más pequeña que Archivo al mismo tamaño */
  font-size: 1.12em;
  line-height: 0.9;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  inline-size: 40px;
  block-size: var(--border-w);
  background: currentColor;
  flex: none;
  transform-origin: left;
}

.lede {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  max-width: 62ch;
  text-wrap: pretty;
}

.body { color: var(--text-secondary); text-wrap: pretty; }

.meta {
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.numeral {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.4rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── Iconos (SVG inline, heredan currentColor) ─────────────────────────── */

.i {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================================
   Revelado al hacer scroll

   Todo el estado inicial cuelga de `.js`, que pone un script en línea en el
   <head>. Si el JS falla o está bloqueado, la página se ve entera: nunca
   queda contenido en opacity 0 esperando un observador que no llegó.

   El revelado se REPITE en cada pasada. main.js quita `is-in` solo cuando el
   elemento salió por completo de la pantalla, y lo hace con las transiciones
   apagadas (`rv-reset`) para que nadie vea el rebobinado.
   ========================================================================= */

.js .rv {
  opacity: 0;
  transform: translate3d(0, var(--rv-y, 24px), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-premium),
    transform var(--dur-reveal) var(--ease-premium);
  transition-delay: var(--rv-delay, 0ms);
}
.js .rv.is-in { opacity: 1; transform: none; }

/* Rebobinado instantáneo, fuera de pantalla */
.js .rv-reset,
.js .rv-reset .split-word > span,
.js .rv-reset .reveal-img > img,
.js .rv-reset.reveal-img > img,
.js .rv-reset::before,
.js .rv-reset::after,
.js .rv-reset .flipcard__list li { transition: none !important; }

/* Titulares que entran palabra por palabra */
.split-word { display: inline-block; clip-path: inset(0 0 -0.22em 0); }
.js .split-word > span {
  display: inline-block;
  transform: translate3d(0, var(--sw-y, 108%), 0);
  transition: transform var(--dur-slow) var(--ease-premium);
  transition-delay: var(--w-delay, 0ms);
}
.js .is-in .split-word > span,
.js .split-word.is-in > span { transform: none; }

/* Imágenes que se descubren de abajo hacia arriba.

   El recorte va sobre la <img>, NUNCA sobre el contenedor: el
   IntersectionObserver mide el área visible y un elemento recortado a cero
   informa ratio 0, así que si el contenedor observado se recorta a sí mismo
   queda en punto muerto — invisible porque no se ha revelado, y sin revelar
   porque está invisible. */
.js .reveal-img > img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-hero) var(--ease-premium);
  transition-delay: var(--img-delay, 120ms);
}
.js .is-in .reveal-img > img,
.js .reveal-img.is-in > img { clip-path: inset(0 0 0 0); }

/* El filete de la ceja se dibuja desde la izquierda */
.js .eyebrow::before {
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-premium);
  transition-delay: calc(var(--rv-delay, 0ms) + 120ms);
}
.js .eyebrow.is-in::before,
.js .is-in .eyebrow::before { transform: scaleX(1); }

/* Contadores: reservan su ancho para que el texto de al lado no salte */
.count { font-variant-numeric: tabular-nums; }

/* ── Progreso de lectura ───────────────────────────────────────────────── */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  block-size: 2px;
  background: var(--teak-500);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  pointer-events: none;
}

/* ── Accesibilidad ─────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--teak-500);
  color: var(--ink-900);
  font-size: var(--fs-label);
  font-weight: var(--w-semi);
  transform: translate3d(0, -200%, 0);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.skip-link:focus-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Movimiento reducido: se conserva el fundido, se quita el desplazamiento */
  .js .rv { transform: none; }
  .js .split-word > span { transform: none; }
  .js .reveal-img > img { clip-path: inset(0 0 0 0); }
  .js .eyebrow::before { transform: scaleX(1); }
}