/* =========================================================================
   FIGUEROA DIGITAL — base.css
   Reset, elementos base, tipografía editorial primitiva y utilidades
   globales. Nada específico de una sección vive aquí.
   ========================================================================= */

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

html { scroll-behavior: smooth; }

body {
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: default;
}

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

/* ---------- UTILIDADES ------------------------------------------------ */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }

/* Grain / noise sutil sobre todo el sitio (generado con SVG, sin asset extra) */
.grain {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- TIPOGRAFÍA EDITORIAL (primitivas reutilizables) ------------ */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.02em; line-height: 1.05; }

.eyebrow {
  font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; font-size: 0.75rem; color: var(--c-gray-mid);
}
.section-title { font-size: clamp(2.5rem, 6vw, 4.5rem); text-transform: uppercase; }
.section-lede { max-width: 46ch; color: var(--c-gray-mid); font-size: 1.05rem; }