/* ==========================================================================
   bento — tokens
   Origen: Figma "Bento Web" (MMpvYqgVzwa4h0BT0tJeKL), página "diseño",
   frame 1653:5050 "home - copy editando berni" (ancho de referencia 1920).
   Prefijo de clases: bn-
   ========================================================================== */

:root {
  /* ---- Color (valores leídos de los nodos, no de la guía) ---- */
  --bn-page: #09090a;          /* 1653:5050 → #0b0b0c + negro 20% */
  --bn-black: #0b0b0c;         /* casos / footer / textos sobre lima */
  --bn-black-cta: #0b0b0e;     /* 1977:14114 banner CTA */
  --bn-card: #141416;          /* cards de casos y testimonios */
  --bn-white: #ffffff;
  --bn-lime: #d2ff6c;          /* CTA nav, toggle FAQ, checks */
  --bn-lime-2: #daff7b;        /* botón form CTA, TLDR */
  --bn-dot: #d9ff7a;
  --bn-ink: #111111;
  --bn-ink-2: #121212;
  --bn-text: #373737;
  --bn-text-2: #404040;
  --bn-text-3: #383838;
  --bn-gray: #8f8f94;
  --bn-gray-2: #9e9ea3;
  --bn-gray-3: #bfbfc4;
  --bn-light: #f2f2f4;         /* cards problema */
  --bn-light-2: #f2f2f2;       /* cards equipo */
  --bn-line: #e0e0e0;
  --bn-capsule: #151517;
  --bn-capsule-line: #29292b;
  --bn-avatar: #333338;
  --bn-dark-hover: #171717;    /* 1713:18 hover card problema */
  --bn-navy: #0a0f6b;
  --bn-blue: #122de6;
  --bn-violet: #7b5cff;
  --bn-glow: 0, 0, 126;        /* "glow navy" #00007e */

  /* ---- Tipografía ---- */
  --bn-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala desktop: rem calibrado a root 16px @1920 (ver base.css).
     Los tamaños chicos llevan piso en px para que no se vuelvan ilegibles
     en laptops (root fluido baja hasta 11px). */
  --bn-fs-display: 12.5rem;   /* 200  +30 */
  --bn-fs-h1: 5rem;           /* 80   hero */
  --bn-fs-faq: 4.5rem;        /* 72   preguntas frecuentes */
  --bn-fs-h2: 4rem;           /* 64   títulos de sección */
  --bn-fs-h3: 3.5rem;         /* 56   método / quote */
  --bn-fs-h4: 3rem;           /* 48   banner / casos */
  --bn-fs-xl: 2rem;           /* 32 */
  --bn-fs-lg: 1.75rem;        /* 28 */
  --bn-fs-step: 1.625rem;     /* 26 */
  --bn-fs-24: max(1.5rem, 17px);
  --bn-fs-22: max(1.375rem, 16px);
  --bn-fs-20: max(1.25rem, 15px);
  --bn-fs-19: max(1.1875rem, 14.5px);
  --bn-fs-18: max(1.125rem, 14px);
  --bn-fs-17: max(1.0625rem, 14px);
  --bn-fs-16: max(1rem, 13.5px);
  --bn-fs-15: max(0.9375rem, 13px);
  --bn-fs-14: max(0.875rem, 12.5px);
  --bn-fs-13: max(0.8125rem, 12px);
  --bn-fs-12: max(0.75rem, 11px);

  /* ---- Espaciado estructural ---- */
  --bn-pad-x: 7.5rem;         /* 120 */
  --bn-pad-x-wide: 15rem;     /* 240 problema / equipo */
  --bn-max: 120rem;           /* 1920 */
}

/* Tablet 768–991: root fijo 16px, escala propia (criterio propio: el Figma solo tiene 1920) */
@media (max-width: 991px) {
  :root {
    --bn-fs-display: 8rem;
    --bn-fs-h1: 3.5rem;
    --bn-fs-faq: 3rem;
    --bn-fs-h2: 2.75rem;
    --bn-fs-h3: 2.5rem;
    --bn-fs-h4: 2.25rem;
    --bn-fs-xl: 1.625rem;
    --bn-fs-lg: 1.5rem;
    --bn-fs-step: 1.375rem;
    --bn-fs-24: 1.25rem;
    --bn-fs-22: 1.125rem;
    --bn-fs-20: 1.0625rem;
    --bn-fs-19: 1rem;
    --bn-fs-18: 1rem;
    --bn-fs-17: 0.9375rem;
    --bn-fs-16: 0.9375rem;
    --bn-fs-15: 0.875rem;
    --bn-fs-14: 0.8125rem;
    --bn-fs-13: 0.75rem;
    --bn-fs-12: 0.6875rem;

    --bn-pad-x: 2rem;
    --bn-pad-x-wide: 2rem;
  }
}

/* Mobile ≤767: un solo mobile */
@media (max-width: 767px) {
  :root {
    --bn-fs-display: 6rem;
    --bn-fs-h1: 2.5rem;
    --bn-fs-faq: 2.25rem;
    --bn-fs-h2: 2rem;
    --bn-fs-h3: 1.75rem;
    --bn-fs-h4: 1.75rem;
    --bn-fs-xl: 1.375rem;
    --bn-fs-lg: 1.375rem;
    --bn-fs-step: 1.25rem;
    --bn-fs-24: 1.125rem;
    --bn-fs-22: 1.0625rem;
    --bn-fs-20: 1rem;
    --bn-fs-19: 0.9375rem;
    --bn-fs-18: 0.9375rem;
    --bn-fs-17: 0.9375rem;
    --bn-fs-16: 0.9375rem;
    --bn-fs-15: 0.875rem;
    --bn-fs-14: 0.8125rem;
    --bn-fs-13: 0.75rem;
    --bn-fs-12: 0.6875rem;

    --bn-pad-x: 1rem;
    --bn-pad-x-wide: 1rem;
  }
}