/* ============================================================
   ALCOM — Estilos base globales
   Fase 0.2 · Reset + tipografía + utilidades de layout
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* el scroll suave lo maneja Lenis */
}

body {
  font-family: var(--font-texto);
  font-size: var(--fs-cuerpo);
  line-height: var(--interlinea-texto);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Lenis: estados del scroll suave */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }

/* --- Tipografía --------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--peso-semi);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--tinta);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--peso-bold);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-titulo);
}

p { max-width: var(--ancho-texto); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
  color: var(--morado);
}

.texto-grad {
  background: var(--grad-marca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Layout -------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion {
  padding-block: var(--esp-6);
}

.seccion--alt   { background: var(--fondo-alt); }
.seccion--oscura {
  background: var(--fondo-oscuro);
  color: var(--blanco);
}
.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3 { color: var(--blanco); }

/* --- Utilidades ---------------------------------------------- */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--morado);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Estado inicial de los reveals (GSAP los anima a visible) */
.reveal { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}