/* ==========================================================================
   bbtr.io — Tokens de marca (fuente de verdad: docs/design-tokens.md)
   Los colores referencian los globales del kit de Elementor (elementor-kit-6)
   con fallback al valor real medido el 2026-10-15. Cambiar un color en
   Site Settings cambia todo el sitio; cambiarlo aquí cambia solo el fallback.
   ========================================================================== */

:root {
  /* Color — dirección luminosa (actualización de dirección creativa, 2026-10-16).
     Paleta del Brandbook: azul institucional #12399D, azul medio #0F75BC (Pantone 3005C), azul real #0E59BF,
     cian #1EA6B8 y verde agua #28BDB5 (degradé institucional), celeste #7FC7E8, cian pálido #EAF6FF,
     gris neutro #D1D1D1, negro. El negro queda como contraste puntual (escena de producto, pie). */
  --bb-bg:            #FFFFFF;
  --bb-surface:       #F2F5F8;                                   /* neutro frío derivado del gris #D1D1D1 del manual */
  --bb-surface-2:     #E4EAF0;
  --bb-text:          #101418;
  --bb-text-2:        #3D4A57;
  --bb-text-muted:    #5B6670;                                   /* 5,3:1 sobre blanco (AA en texto pequeño) */
  --bb-accent:        var(--e-global-color-secondary, #12399D);
  --bb-accent-2:      var(--e-global-color-0e6155f, #0F75BC);
  --bb-accent-3:      #0E59BF;                                   /* enlaces y acentos sobre claro (6,3:1) */
  --bb-cyan:          #1EA6B8;
  --bb-aqua:          #28BDB5;
  --bb-sky:           var(--e-global-color-02e5b29, #7FC7E8);
  --bb-pale:          var(--e-global-color-a1d9013, #EAF6FF);
  --bb-border:        rgba(16, 20, 24, 0.12);
  --bb-border-strong: rgba(16, 20, 24, 0.3);
  --bb-line:          rgba(14, 89, 191, 0.55);
  --bb-focus:         var(--e-global-color-0e6155f, #0F75BC);
  --bb-error:         #B3261E;
  --bb-grad:          linear-gradient(135deg, #0E59BF 0%, #0F75BC 38%, #1EA6B8 76%, #28BDB5 100%);
  --bb-btn-primary-bg: var(--bb-accent); --bb-btn-primary-fg: #FFFFFF; --bb-btn-primary-hover: var(--bb-accent-2);

  /* Tipografía — BBTR Gotham (archivos propios del sitio) */
  --bb-font: "BBTR Gotham 2026", "BBTR Gotham", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bb-w-light: 300;
  --bb-w-regular: 400;
  --bb-w-bold: 700;

  --bb-h1: clamp(2.625rem, 1.25rem + 3.6vw, 6rem);    /* 42 px (≤ 611) → 74 px (1440) → 96 px (≥ 2110) */
  --bb-h1-lh: 1.04;
  --bb-h2: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);       /* 32–56 px */
  --bb-h2-lh: 1.12;
  --bb-h3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);    /* 22–28 px */
  --bb-h3-lh: 1.2;
  --bb-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18–22 px */
  --bb-body: 1rem;                                    /* 16 px móvil */
  --bb-body-lh: 1.55;
  --bb-small: 0.875rem;                               /* 14 px */
  --bb-measure: 68ch;

  /* Espaciado */
  --bb-s1: 8px;  --bb-s2: 12px; --bb-s3: 16px; --bb-s4: 24px; --bb-s5: 32px;
  --bb-s6: 48px; --bb-s7: 64px; --bb-s8: 96px; --bb-s9: 128px;
  --bb-section-y: clamp(3.5rem, 2rem + 5vw, 8rem);    /* 56–128 px */

  /* Grilla */
  --bb-container: 1280px;
  --bb-gutter: 24px;
  --bb-margin: 20px;
  --bb-header-h: 64px;

  /* Forma */
  --bb-radius-s: 5px;
  --bb-radius-m: 12px;
  --bb-radius-l: 20px;

  /* Movimiento */
  --bb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bb-t-fast: 160ms;
  --bb-t-ui: 200ms;
  --bb-t-swap: 300ms;
  --bb-t-draw: 800ms;
  --bb-t-hero: 1100ms;
}

/* Escenas: dentro de una escena oscura o de marca, los mismos componentes invierten sus tokens */
.bb-scene-dark, .bb-scene-brand {
  --bb-bg: #000000; --bb-surface: #171717; --bb-surface-2: #222222;
  --bb-text: #FFFFFF; --bb-text-2: #EAF6FF; --bb-text-muted: rgba(255, 255, 255, 0.62);
  --bb-accent-3: #7FC7E8; --bb-border: rgba(255, 255, 255, 0.18); --bb-border-strong: rgba(255, 255, 255, 0.4);
  --bb-line: rgba(234, 246, 255, 0.6); --bb-focus: #FFFFFF; --bb-error: #FFB4A8;
}
.bb-scene-brand {
  --bb-bg: transparent; --bb-surface: rgba(255, 255, 255, 0.1); --bb-surface-2: rgba(255, 255, 255, 0.16);
  --bb-text-2: rgba(255, 255, 255, 0.86); --bb-accent-3: #FFFFFF;
  --bb-btn-primary-bg: #FFFFFF; --bb-btn-primary-fg: #12399D; --bb-btn-primary-hover: #EAF6FF;
}

@media (min-width: 768px) {
  :root { --bb-margin: 24px; }
}

@media (min-width: 1024px) {
  :root {
    --bb-margin: 48px;
    --bb-header-h: 80px;
    --bb-body: 1.125rem;                              /* 18 px escritorio */
  }
}

@media (max-width: 375px) {
  :root { --bb-h1: 2.5rem; }                          /* 40 px */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bb-t-fast: 0ms; --bb-t-ui: 0ms; --bb-t-swap: 0ms; --bb-t-draw: 0ms; --bb-t-hero: 0ms;
  }
}

/* --------------------------------------------------------------------------
   @font-face corregido: pesos exactos y swap. Mismos archivos que ya existen
   en /uploads/2026/05/. Light sirve 200 y 300; Medium 400 y 500; Bold 600 y 700.
   -------------------------------------------------------------------------- */
@font-face { font-family: "BBTR Gotham 2026"; font-weight: 200 300; font-style: normal; font-display: swap; src: url("/wp-content/uploads/2026/05/GOTHAM-LIGHT.woff") format("woff"); }
@font-face { font-family: "BBTR Gotham 2026"; font-weight: 200 300; font-style: italic; font-display: swap; src: url("/wp-content/uploads/2026/05/GOTHAM-LIGHTITALIC.woff") format("woff"); }
@font-face { font-family: "BBTR Gotham 2026"; font-weight: 400 500; font-style: normal; font-display: swap; src: url("/wp-content/uploads/2026/05/GOTHAM-MEDIUM.woff") format("woff"); }
@font-face { font-family: "BBTR Gotham 2026"; font-weight: 400 500; font-style: italic; font-display: swap; src: url("/wp-content/uploads/2026/05/GOTHAM-MEDIUMITALIC.woff") format("woff"); }
@font-face { font-family: "BBTR Gotham 2026"; font-weight: 600 700; font-style: normal; font-display: swap; src: url("/wp-content/uploads/2026/05/GOTHAM-BOLD.woff") format("woff"); }
@font-face { font-family: "BBTR Gotham 2026"; font-weight: 600 700; font-style: italic; font-display: swap; src: url("/wp-content/uploads/2026/05/GOTHAM-BOLDITALIC.woff") format("woff"); }
@font-face { font-family: "BBTR Gotham 2026"; font-weight: 900; font-style: normal; font-display: swap; src: url("/wp-content/uploads/2026/05/GOTHAM-ULTRA.woff") format("woff"); }