@charset "UTF-8";
/**
 * tokens.css — Bajo Nalón Tema WP
 *
 * Única fuente de verdad de tokens TÉCNICOS y NEUTRALES del tema.
 *
 * Marca (colores y tipografía) NO vive aquí — vive en el Kit de
 * Elementor (Site Settings → Global Colors / Global Fonts) y se
 * referencia desde el CSS de componentes con:
 *   var(--e-global-color-primary | secondary | accent | text)
 *   var(--e-global-typography-primary-font-family | secondary | text | accent)
 *
 * Plan completo del sprint: PLAN-TOKENS.md
 */

:root {
    /* ── Neutrales del sistema (no marca) ─────────────────────── */
    --bn-color-white:        #fff;
    --bn-color-bg-soft:      #fafaf9;          /* fondo de página */
    --bn-color-surface:      #fff;             /* superficie card */
    --bn-color-border:       rgba(0, 0, 0, .07);
    --bn-color-border-soft:  #e5e7eb;
    --bn-color-text-muted:   #6b7280;
    --bn-color-text-soft:    #9ca3af;
    --bn-color-text-strong:  #374151;          /* texto principal sobre fondo claro */

    /* Superficies oscuras estructurales (no marca, no se exponen al Kit) */
    --bn-color-surface-darker: #001a24;        /* hero/h2 de lugares (más oscuro aún) */
    --bn-color-surface-dark:   #00222E;        /* navbar oscuro, cards oscuras, tooltip */
    --bn-color-surface-mid:    #003B4F;        /* timeline markers, headings secundarios */
    --bn-color-heading-deep:   #00334d;        /* h2 azul oscuro de carruseles */

    /* Alias del custom amarillo del Kit (fallback si cambia el ID hash) */
    --bn-color-yellow:       var(--e-global-color-98426c2, #FFBB00);

    /* ── Spacing — escala basada en 4px ───────────────────────── */
    --bn-space-2xs:  4px;
    --bn-space-xs:   8px;
    --bn-space-sm:   12px;
    --bn-space-md:   16px;
    --bn-space-lg:   24px;
    --bn-space-xl:   32px;
    --bn-space-2xl:  48px;
    --bn-space-3xl:  64px;

    /* ── Container ────────────────────────────────────────────── */
    --bn-container-max:  1450px;
    /* Padding responsive con clamp(): 20px en mobile, crece con el viewport
       hasta 32px en pantallas grandes. Coincidencia con el container del Kit
       de Elementor: el max es exacto (1450px); el padding lateral del Kit es
       de los containers individuales del editor (configurable por el editor),
       no global. Si necesitas alinear al pixel un componente del tema con un
       container Elementor concreto, ajusta el padding de ese container en el
       editor para que coincida con --bn-container-pad en el viewport actual. */
    --bn-container-pad:  clamp(20px, 2vw + 8px, 32px);

    /* ── Border radius ────────────────────────────────────────── */
    --bn-radius-sm:    8px;
    --bn-radius-md:    14px;
    --bn-radius-lg:    20px;
    --bn-radius-xl:    32px;
    --bn-radius-pill:  9999px;

    /* ── Sombras ──────────────────────────────────────────────── */
    --bn-shadow-sm:  0 2px 8px rgba(0, 0, 0, .08);
    --bn-shadow-md:  0 8px 25px rgba(0, 0, 0, .12);
    --bn-shadow-lg:  0 20px 50px rgba(0, 0, 0, .18);
    --bn-shadow-xl:  0 30px 60px rgba(0, 0, 0, .20);
    /* Sombra tintada con el primary del Kit (color-mix soportado en navegadores modernos) */
    --bn-shadow-primary: 0 10px 25px -5px color-mix(in srgb, var(--e-global-color-primary) 30%, transparent);

    /* ── Transiciones ─────────────────────────────────────────── */
    --bn-dur-fast:    .15s;
    --bn-dur-base:    .25s;
    --bn-dur-slow:    .4s;
    --bn-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

    /* ── Z-index — escala explícita ───────────────────────────── */
    --bn-z-base:     1;
    --bn-z-dropdown: 100;
    --bn-z-sticky:   500;
    --bn-z-navbar:   1000;
    --bn-z-modal:    5000;
    --bn-z-toast:    9999;
}