/* ==========================================================================
   bento — base: reset, root fluido y clases generales (tipografía, botones)
   ========================================================================== */

/* ---- Root fluido ----------------------------------------------------------
   Desktop (≥992): 1rem = 16px exacto a 1920 (ancho del frame de Figma), y
   escala lineal con el viewport: 100vw/120 → 16px @1920, 12px @1440.
   Techo 16px (>1920 no crece más; el contenido se centra en --bn-max = 1920).
   Piso 11px (≈1320px de ancho); por debajo ya se pasa a tablet en 991.
   Tablet y mobile: root fijo 16px con su propia escala en tokens.css.
   -------------------------------------------------------------------------- */
html { font-size: 16px; }
@media (min-width: 992px) {
  html { font-size: clamp(11px, calc(100vw / 120), 16px); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  font-family: var(--bn-font);
  font-weight: 400;
  font-size: var(--bn-fs-18);
  line-height: 1.5;
  color: var(--bn-white);
  background-color: var(--bn-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Grano de página: 1653:5050 IMG(TILE) @5% */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../assets/images/brand/grain.png") repeat;
  background-size: 38.25rem auto; /* 612px tile, scale 1 */
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
input { font: inherit; }

.bn-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;
}

main, footer { position: relative; z-index: 1; }

/* ---- Contenedor ---- */
.bn-container {
  width: 100%;
  max-width: var(--bn-max);
  margin-inline: auto;
  padding-inline: var(--bn-pad-x);
}

/* ---- Tipografía general (guía = valores de los nodos de la home) ---- */
.bn-h1 {      /* 1653:5069 — 80/80, ls -3.6 */
  font-size: var(--bn-fs-h1);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 400;
}
.bn-h2 {      /* 1710:2242, 1653:5095, 1967:14165 — 64/67.2, ls -1.92 */
  font-size: var(--bn-fs-h2);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.bn-h3 {      /* 1836:13983 — 56/58.2, ls -1.68 */
  font-size: var(--bn-fs-h3);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.bn-h4 {      /* 1951:30902, casos — 48/52.8, ls -1.44 */
  font-size: var(--bn-fs-h4);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.bn-muted { color: var(--bn-gray); }

/* ---- Botones ---------------------------------------------------------------
   Componentes Figma: "Button / Primary" (1376:77), "Button / Nav CTA" (1376:70),
   "Nav / Link" (1376:63). Transición 0.2s ease-out (SMART_ANIMATE del Figma).
   -------------------------------------------------------------------------- */
.bn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.09;
  white-space: nowrap;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
/* Primary — instancias de la home: fondo blanco, texto #373737, 18px, pad 16/24.
   Hover: la variante pinta lima → blanco; como las instancias ya son blancas,
   el hover invierte a lima (criterio propio, consistente con el sistema). */
.bn-btn--primary {
  padding: 1rem 1.5rem;
  font-size: var(--bn-fs-18);
  background: var(--bn-white);
  color: var(--bn-text);
}
.bn-btn--primary:hover { background: var(--bn-lime); color: var(--bn-black); }

/* Nav CTA — 1653:5064: lima, texto #0b0b0c 18/500, pad 12/20. Hover (1376:68): azul + blanco */
.bn-btn--cta {
  padding: 0.75rem 1.25rem;
  font-size: var(--bn-fs-18);
  background: var(--bn-lime);
  color: var(--bn-black);
}
.bn-btn--cta:hover { background: var(--bn-blue); color: var(--bn-white); }

/* ---- Glow navy (ELLIPSE "glow navy": #00007e @20%, opacidad capa 80%, blur grande) ---- */
.bn-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(var(--bn-glow), 0.16) 0%,
    rgba(var(--bn-glow), 0.11) 40%,
    rgba(var(--bn-glow), 0.04) 72%,
    rgba(var(--bn-glow), 0) 100%);
  z-index: 0;
}

/* ---- Grano doble (Grano overlay 35% OVERLAY + Grano 12% NORMAL) ---- */
.bn-grain { position: relative; isolation: isolate; }
.bn-grain::before,
.bn-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/brand/grain.png") repeat;
  background-size: var(--bn-grain-size, 38.25rem) auto;
  pointer-events: none;
  z-index: -1;
}
.bn-grain::before { opacity: 0.35; mix-blend-mode: overlay; }
.bn-grain::after { opacity: 0.12; }


/* Videos del Figma recreados en código (js/scroller.js): capa sobre el área del video del mockup */
.bn-live { position: absolute; overflow: hidden; pointer-events: none; }
.bn-live img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; display: block; will-change: transform; }