/* ============================================================================
   BRAND.CSS — La Fórmula Fuenmayor  ·  base compartida (build Opus)
   Identidad fija: fondo negro, acentos en degradado teal -> azul -> indigo,
   monograma FF, tipografía de tracking amplio. Cada variante añade su CSS.
   Mantiene SOLO primitivas de identidad para que las 10 variantes sean
   visualmente distintas (cada una construye sus propios componentes).
   ========================================================================== */

/* ---- Fuentes self-hosted (variables) ------------------------------------ */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("./fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("./fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("./fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("./fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("./fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("./fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --lff-black: #000000;
  --lff-bg: #04060a;
  --lff-surface-1: #080b11;
  --lff-surface-2: #0d121b;
  --lff-surface-3: #131a26;

  --lff-teal: #3fd8c8;
  --lff-cyan: #5fe6d4;
  --lff-azure: #4ba8e8;
  --lff-indigo: #5b6cf0;
  --lff-violet: #7c84f4;
  --lff-accent: #4ba8e8;

  --lff-text: #eaf0f6;
  --lff-text-soft: #aab4c2;
  --lff-text-muted: #6b7585;
  --lff-text-faint: #3a424e;

  --lff-line: rgba(255, 255, 255, 0.08);
  --lff-line-strong: rgba(255, 255, 255, 0.16);

  --lff-grad: linear-gradient(180deg, var(--lff-teal) 0%, var(--lff-azure) 55%, var(--lff-indigo) 100%);
  --lff-grad-diag: linear-gradient(135deg, var(--lff-teal) 0%, var(--lff-azure) 50%, var(--lff-indigo) 100%);
  --lff-grad-soft: linear-gradient(135deg, rgba(63, 216, 200, 0.16), rgba(91, 108, 240, 0.16));
  --lff-glow: 0 0 80px rgba(75, 168, 232, 0.25);

  --lff-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --lff-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --lff-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --lff-tracking-eyebrow: 0.28em;
  --lff-tracking-wordmark: 0.34em;
  --lff-tracking-wide: 0.18em;
  --lff-tracking-tight: -0.02em;

  --lff-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lff-ease-fall: cubic-bezier(0.22, 1.1, 0.36, 1);
  --lff-dur-fast: 240ms;
  --lff-dur-mid: 520ms;
  --lff-dur-slow: 1000ms;

  --lff-maxw: 1200px;
  --lff-gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ---- Reset mínimo -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--lff-bg); color: var(--lff-text);
  font-family: var(--lff-font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(75, 168, 232, 0.32); color: #fff; }

/* ---- Utilidades de marca ------------------------------------------------- */
.lff-gradient-text {
  background: var(--lff-grad-diag);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lff-eyebrow {
  font-family: var(--lff-font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: var(--lff-tracking-eyebrow); text-transform: uppercase;
  color: var(--lff-text-soft);
}
.lff-hairline { border: 0; height: 1px; background: var(--lff-line); }

/* Monograma inyectado por monogram.js (el SVG ya trae su gradiente) */
[data-monogram] { display: inline-block; line-height: 0; }
[data-monogram] svg { width: 100%; height: auto; overflow: visible; }

/* ---- Lockup del wordmark (inyectado por lff.js) -------------------------- */
.lff-wm { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.lff-wm--left { align-items: flex-start; }
.lff-wm__top {
  font-family: var(--lff-font-display); font-weight: 300;
  letter-spacing: var(--lff-tracking-wordmark); text-indent: var(--lff-tracking-wordmark);
  color: var(--lff-text); font-size: 1.05em;
}
.lff-wm__bot {
  font-family: var(--lff-font-display); font-weight: 400;
  letter-spacing: 0.46em; text-indent: 0.46em;
  color: var(--lff-text-soft); font-size: 0.5em; margin-top: 0.45em;
}
.lff-wm--gradient .lff-wm__top {
  background: var(--lff-grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Marcador de contenido provisional ---------------------------------- */
.lff-prov {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--lff-font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--lff-violet);
  border: 1px dashed rgba(124, 132, 244, 0.45); border-radius: 999px;
  padding: 0.15em 0.6em; opacity: 0.8;
}

/* ---- Animación de entrada: "caer dentro del sitio" ----------------------- */
/* Mientras está armado, el escenario queda oculto hasta que lff.js lo deja caer.
   Sin JS nunca se añade .lff-armed, así que el contenido se ve igual. */
html.lff-armed [data-lff-stage] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.lff-armed [data-lff-stage] { opacity: 1; }
}
.lff-veil { position: fixed; inset: 0; background: var(--lff-black); z-index: 9999; pointer-events: none; }
html.lff-landed [data-lff-stage] { opacity: 1; }

/* ---- Accesibilidad ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}
.lff-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}