/* =========================================================
   INSTALACIONES ÁLVAREZ - VARIABLES.CSS (OPTIMIZADO)
   ========================================================= */

:root {
    /* =====================================================
       COLORES
       ===================================================== */
    /* Colores principales */
    --color-navy: #0b1f33;
    --color-navy-dark: #071625;
    --color-navy-light: #163653;
    
    --color-yellow: #cccc00;
    --color-gold: #cccc00;
    --color-gold-light: #d9b66a;
    --color-gold-dark: #a97c2f;

    --color-blue: #159fc2;
    --color-blue-light: #eaf8fc;

    /* Fondos */
    --color-white: #ffffff;
    --color-background: #f8fafc;
    --color-background-soft: #f2f7fa;
    --color-background-blue: #eef8fb;

    --color-surface: #ffffff;
    --color-surface-soft: #f7fafc;

    /* Textos y Bordes */
    --color-text: #0b1f33;
    --color-text-secondary: #496276;
    --color-text-muted: #718496;

    --color-border: #dfe7ec;
    --color-border-light: #eaf0f3;

    /* Estados */
    --color-success: #21865b;
    --color-danger: #c84b4b;

    /* =====================================================
       TIPOGRAFÍA Y JERARQUÍA
       ===================================================== */
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.75rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;

    /* =====================================================
       LAYOUT Y ESPACIADOS
       ===================================================== */
    --container-width: 1180px;
    --container-padding: 24px;
    --section-padding: 110px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 120px;

    /* =====================================================
       BORDES Y SOMBRAS
       ===================================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(11, 31, 51, 0.05);
    --shadow-md: 0 10px 30px rgba(11, 31, 51, 0.08);
    --shadow-lg: 0 20px 50px rgba(11, 31, 51, 0.12);
    --shadow-xl: 0 30px 70px rgba(11, 31, 51, 0.16);

    /* =====================================================
       TRANSICIONES Y CAPAS
       ===================================================== */
    --transition-fast: 150ms ease;
    --transition: 250ms ease;
    --transition-slow: 400ms ease;

    --z-header: 1000;
    --z-mobile-menu: 990;
    --z-overlay: 900;
    --z-content: 10;

    /* =====================================================
       COMPONENTES (HERO Y BOTONES)
       ===================================================== */
    --hero-background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 52%, #f3f8fb 100%);
    --hero-glow: rgba(21, 159, 194, 0.08);

    --button-height: 56px;
    --button-padding-x: 28px;
}

/* =========================================================
   ADAPTACIÓN RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    :root {
        --container-padding: 28px;
        --section-padding: 90px;
        --text-6xl: 4rem;
    }
}

@media (max-width: 767px) {
    :root {
        --container-padding: 20px;
        --section-padding: 72px;
        --text-6xl: 3rem;
        --text-5xl: 2.75rem;
        --text-4xl: 2.25rem;
    }
}