/**
 * BASE / VARIABLES
 * -----------------------------------------------------------------------------
 * Design tokens del tema. Es el ÚNICO lugar donde se declaran valores crudos
 * (colores, tamaños, sombras). El resto de archivos debe consumir variables.
 *
 * El sitio es de fondo CLARO con secciones oscuras puntuales (hero, nosotros,
 * CTA y footer). Por eso hay dos familias de color de texto:
 *   --text-*    → sobre fondo claro
 *   --on-dark-* → sobre fondo oscuro
 *
 * Breakpoints (no pueden ser variables en @media, se documentan aquí):
 *   --bp-xl : 1200px
 *   --bp-lg : 1000px
 *   --bp-md :  700px
 *   --bp-sm :  480px
 */

:root {

    /* ---------------------------------------------------------------------
       COLOR / Marca
    --------------------------------------------------------------------- */
    --blue: #2f80ed;
    --blue-light: #3b8bff;
    --blue-dark: #1c5fbe;
    --blue-soft: #eaf2fe;

    --orange: #f4801f;
    --orange-dark: #e0700f;
    --orange-soft: #fff3e8;

    --green: #22833f;
    --green-mid: #4c9a63;
    --green-soft: #eefaf0;
    --whatsapp: #25d366;

    /* Alias históricos (no usar en código nuevo) */
    --primary: var(--blue);
    --primary-light: var(--blue-light);
    --primary-dark: var(--blue-dark);
    --orange-hover: var(--orange-dark);

    /* ---------------------------------------------------------------------
       COLOR / Superficies claras
    --------------------------------------------------------------------- */
    --bg: #ffffff;
    --bg-alt: #f6f8fb;
    --bg-soft: #f4f7fb;
    --white: #ffffff;

    /* ---------------------------------------------------------------------
       COLOR / Superficies oscuras
    --------------------------------------------------------------------- */
    --navy: #0c1c33;
    --navy-2: #0a1728;
    --navy-3: #0a1524;
    --navy-card: #12233d;
    --navy-footer: #081321;

    --gradient-dark: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
    --gradient-dark-diag: linear-gradient(135deg, var(--navy), var(--navy-3));
    --gradient-cta: linear-gradient(120deg, #0d2140, var(--navy-2));

    /* Halos radiales usados sobre las secciones oscuras */
    --glow-hero: radial-gradient(900px 500px at 78% 30%, rgba(47, 128, 237, 0.18), transparent 70%);
    --glow-cta: radial-gradient(700px 400px at 15% 50%, rgba(47, 128, 237, 0.2), transparent 65%);

    /* ---------------------------------------------------------------------
       COLOR / Texto sobre fondo claro
    --------------------------------------------------------------------- */
    --heading: #12233d;
    --text: #5c6b7d;
    --text-strong: #3c4a5c;
    --text-muted: #8592a3;
    --text-dim: #6a7788;

    /* ---------------------------------------------------------------------
       COLOR / Texto sobre fondo oscuro
    --------------------------------------------------------------------- */
    --on-dark: #eef3f9;
    --on-dark-muted: #aebfd2;
    --on-dark-dim: #93a6bd;
    --on-dark-soft: #8fa3ba;
    --on-dark-nav: #cdd8e6;

    /* ---------------------------------------------------------------------
       COLOR / Bordes
    --------------------------------------------------------------------- */
    --border: #e9edf3;
    --border-soft: #eef1f5;
    --border-strong: #d9e1ec;
    --border-blue: #d8e3f2;
    --border-step: #cfdcee;

    /* Gris de los nombres de marca en reposo: legible pero sin robar foco. */
    --brand-idle: #b9c4d2;

    --border-on-dark: rgba(255, 255, 255, 0.12);
    --border-on-dark-strong: rgba(255, 255, 255, 0.22);
    --surface-on-dark: rgba(255, 255, 255, 0.06);

    --blue-tint-12: rgba(47, 128, 237, 0.12);
    --blue-tint-28: rgba(47, 128, 237, 0.28);
    --blue-tint-50: rgba(59, 139, 255, 0.5);

    /* ---------------------------------------------------------------------
       TIPOGRAFÍA
    --------------------------------------------------------------------- */
    --font-heading: "Poppins", "Segoe UI", Arial, sans-serif;
    --font-body: "DM Sans", "Segoe UI", Arial, sans-serif;

    --fs-2xs: 10.5px;
    --fs-xs: 11.5px;
    --fs-sm: 12.5px;
    --fs-base: 13.5px;
    --fs-md: 14.5px;
    --fs-lg: 15.5px;
    --fs-xl: 17px;

    /* Escalas fluidas de títulos */
    --fs-h1: clamp(34px, 4.4vw, 52px);
    --fs-h2: clamp(28px, 3.4vw, 36px);
    --fs-h3: clamp(22px, 2.4vw, 26px);
    --fs-h4: 20px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --lh-tight: 1.08;
    --lh-heading: 1.15;
    --lh-body: 1.6;

    --ls-tight: -1.2px;
    --ls-heading: -0.8px;
    --ls-kicker: 2.5px;

    /* ---------------------------------------------------------------------
       ESPACIADO
    --------------------------------------------------------------------- */
    --space-2xs: 6px;
    --space-xs: 9px;
    --space-sm: 14px;
    --space-md: 22px;
    --space-lg: 34px;
    --space-xl: 50px;
    --space-2xl: 76px;

    --gap-grid: 22px;
    --gap-grid-lg: 50px;

    --section-padding: 76px;
    --section-padding-md: 56px;

    /* ---------------------------------------------------------------------
       LAYOUT
    --------------------------------------------------------------------- */
    --container: 1180px;
    --container-wide: 1240px;
    --container-narrow: 820px;
    --container-pad: 40px;
    --container-pad-md: 20px;

    --header-height: 86px;
    --header-height-md: 68px;

    /* ---------------------------------------------------------------------
       BORDES / RADIOS
    --------------------------------------------------------------------- */
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius-md: 11px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-pill: 100px;
    --radius-circle: 50%;

    /* Alias histórico */
    --radius: var(--radius-lg);

    /* ---------------------------------------------------------------------
       SOMBRAS
    --------------------------------------------------------------------- */
    --shadow-xs: 0 2px 8px rgba(18, 35, 61, 0.05);
    --shadow-sm: 0 4px 16px rgba(18, 35, 61, 0.06);
    --shadow-md: 0 10px 30px rgba(18, 35, 61, 0.09);
    --shadow-lg: 0 18px 46px rgba(18, 35, 61, 0.12);

    --shadow-orange: 0 10px 26px rgba(244, 128, 31, 0.3);
    --shadow-orange-lg: 0 12px 30px rgba(244, 128, 31, 0.32);
    --shadow-blue: 0 10px 26px rgba(47, 128, 237, 0.25);

    /* Sombra de tarjeta en hover: radio grande y desplazamiento negativo, para
       que eleve la tarjeta sin ensuciarle los bordes. */
    --shadow-card-hover: 0 22px 48px -12px rgba(18, 35, 61, 0.2);

    /* ---------------------------------------------------------------------
       TEXTURAS Y HALOS

       Capa de profundidad: rejilla técnica de fondo y halos de color que
       derivan despacio. El naranja deja de ser solo color de botón y pasa a
       funcionar como acento de fondo.
    --------------------------------------------------------------------- */
    --grid-light: rgba(18, 35, 61, 0.038);
    --grid-dark: rgba(255, 255, 255, 0.045);
    --grid-size: 56px;
    --grid-size-dark: 64px;

    --glow-orange: radial-gradient(closest-side, rgba(244, 128, 31, 0.2), transparent 70%);
    --glow-blue-strong: radial-gradient(closest-side, rgba(47, 128, 237, 0.26), transparent 70%);

    /* Filetes de acento */
    --rule-orange: linear-gradient(90deg, var(--orange), rgba(244, 128, 31, 0));
    --rule-blue: linear-gradient(90deg, var(--blue), rgba(47, 128, 237, 0));

    /* ---------------------------------------------------------------------
       MOVIMIENTO
    --------------------------------------------------------------------- */
    --transition-fast: 0.15s ease;
    --transition: 0.25s ease;
    --transition-slow: 0.5s ease;

    /* Curva y duración del revelado al scroll (ver base/motion.css) */
    --ease-out-soft: cubic-bezier(0.22, 0.68, 0.32, 1);
    --dur-reveal: 0.72s;

    --lift: translateY(-2px);
    --lift-lg: translateY(-5px);

    /* ---------------------------------------------------------------------
       Z-INDEX
    --------------------------------------------------------------------- */
    --z-below: -1;
    --z-base: 1;
    --z-content: 2;
    --z-raised: 5;
    --z-sticky: 100;
    --z-header: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;
}