/* ============================================================
   MV DESIGN · WEB — BASE
   Lienzo oscuro (--ink-0). Tokens en tokens.css (DS oficial).
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font: var(--t-body);
  font-family: var(--font-body);
  color: var(--fg-on-dark-2);
  background: var(--ink-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: rgba(98, 92, 217, 0.45); color: #fff; }

:focus-visible {
  outline: 2px solid var(--mv-blue-2);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* --- Tipografía sobre oscuro ------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg-on-dark-1); }

.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-on-dark-3);
}
.eyebrow .tick { color: var(--mv-blue-2); }

.display-xl { font: var(--t-display-xl); letter-spacing: -0.04em; color: var(--fg-on-dark-1); }
.display-lg { font: var(--t-display-lg); letter-spacing: -0.035em; color: var(--fg-on-dark-1); }
.display-md { font: var(--t-display-md); letter-spacing: -0.03em; color: var(--fg-on-dark-1); }
.h2 { font: var(--t-h2); letter-spacing: -0.02em; color: var(--fg-on-dark-1); }
.h3 { font: var(--t-h3); letter-spacing: -0.015em; color: var(--fg-on-dark-1); }
.lead { font: var(--t-lead); color: var(--fg-on-dark-2); text-wrap: pretty; }
.body-sm { font: var(--t-body-sm); color: var(--fg-on-dark-3); }
.mono { font: var(--t-mono); color: var(--fg-on-dark-3); }

/* Firma de marca: palabra gradiente = siempre itálica (1 por título) */
.grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-style: italic;
  letter-spacing: -0.01em;
  padding-right: 0.06em; /* la itálica de Montserrat se recorta sin esto */
}

/* --- Layout -------------------------------------------------------- */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.section { padding-block: clamp(72px, 6rem + 4vw, 160px); }

/* --- Reveals (gated por .js para no dejar nada en blanco sin JS) --- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].is-in,
.js.no-motion [data-reveal] { opacity: 1; transform: none; }

/* Palabras del hero / manifiesto: wipe con clip-path */
.js [data-words] .w {
  display: inline-block;
  clip-path: inset(0 0 110% 0);
  transform: translateY(0.35em);
}
.js.no-motion [data-words] .w { clip-path: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js [data-words] .w { clip-path: none; transform: none; }
}

/* --- Utilidades ----------------------------------------------------- */
.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-link {
  position: absolute; left: 16px; top: -100%;
  z-index: 999; background: var(--ink-1); color: #fff;
  padding: 10px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line-dark);
}
.skip-link:focus { top: 16px; }