/* ==========================================================================
   Dumbo Growth Lab — Base
   Reset moderno + tipografía base + primitivas de layout.
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: var(--lh-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

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

ul, ol { list-style: none; padding: 0; }

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

::selection { background: var(--accent); color: #fff; }

/* --- Tipografía ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.01em; }
h4 { font-size: var(--step-1); font-weight: 500; letter-spacing: 0; }

p { text-wrap: pretty; }

strong { font-weight: 600; }

/* Editorial: prosa en serif, para subtítulos y párrafos de encuadre */
.editorial {
  font-family: var(--font-editorial);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

.lead {
  font-family: var(--font-editorial);
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--fg);
  max-width: 54ch;
}

.prose {
  max-width: 78ch;
  color: var(--muted);
  font-size: var(--step-0);
}
.prose p + p { margin-top: var(--space-3); }

/* Kicker / etiqueta de sección */
.kicker {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.accent { color: var(--accent); }
.u-sage { color: var(--sage); }
.u-green { color: var(--green); }

/* --- Layout primitives ------------------------------------------------------ */

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

.section {
  padding-block: var(--section-y);
  position: relative;
}

/* Fondo oscuro para secciones sobre #121211 */
.section--dark {
  background: var(--ink);
  color: var(--paper);
}

.section__head {
  display: grid;
  gap: var(--space-3);
  max-width: 62ch;
  margin-bottom: var(--space-6);
}
.section__head--wide { max-width: 82ch; }

/* Regla fina de separación */
.rule { height: var(--rule-w); background: var(--rule); border: 0; }

/* Utilidades mínimas */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.u-nowrap { white-space: nowrap; }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100%;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-3); }

/* --- Scroll reveal (progressive enhancement) ---------------------------- */
/* Sin will-change: estaba declarado de forma permanente sobre TODOS los
   elementos con .reveal, así que el navegador mantenía una capa de
   composición por cada uno durante toda la vida de la página, aunque ya
   se hubieran revelado. La transición funciona igual sin él. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Si JS no carga, nada queda oculto */
.no-js .reveal { opacity: 1; transform: none; }