/* ===== VARIABLES CSS GLOBALES ===== */

:root {
    /* ===== COLORES CORPORATIVOS ===== */
    --color-primario: #034381;
    --color-secundario: #009bb3;
    --color-accento: #b2e6f2;
    --color-texto-oscuro: #222;
    --color-texto-claro: #fff;
    --color-texto-gris: #959595;
    --color-fondo-oscuro: #05243f;
    --color-fondo-gradiente: linear-gradient(135deg, #05243f, #013a6b, #090c0e);
    --color-blanco: #fff;
    --color-gris-claro: #f7fafc;
    --color-gris-medio: #e0e0e0;
    --color-sombra: rgba(27, 45, 77, 0.10);
    --color-sombra-hover: rgba(27, 45, 77, 0.18);
    
    /* ===== TIPOGRAFÍAS ===== */
    --fuente-principal: 'Segoe UI', Arial, sans-serif;
    --fuente-titulos: 'Segoe UI', 'Montserrat', Arial, sans-serif;
    --fuente-secundaria: 'Segoe UI','Montserrat', Arial, sans-serif;
    
    /* ===== TAMAÑOS DE FUENTE ===== */
    --tamano-texto-pequeno: 0.9rem;
    --tamano-texto-base: 1rem;
    --tamano-texto-mediano: 1.1rem;
    --tamano-texto-grande: 1.2rem;
    --tamano-titulo-pequeno: 1.4rem;
    --tamano-titulo-mediano: 2rem;
    --tamano-titulo-grande: 2.5rem;
    --tamano-titulo-extra: 3.5rem;
    
    /* ===== ESPACIADOS ===== */
    --espaciado-xs: 0.5rem;
    --espaciado-sm: 1rem;
    --espaciado-md: 1.5rem;
    --espaciado-lg: 2rem;
    --espaciado-xl: 2.5rem;
    --espaciado-xxl: 3rem;
    
    /* ===== BORDES Y RADIOS ===== */
    --radio-borde-pequeno: 0.2rem;
    --radio-borde-mediano: 0.5rem;
    --radio-borde-grande: 1rem;
    --radio-borde-extra: 1.2rem;
    
    /* ===== SOMBRAS ===== */
    --sombra-suave: 0 2px 8px rgba(0,0,0,0.10);
    --sombra-media: 0 4px 16px rgba(0,0,0,0.13);
    --sombra-fuerte: 0 8px 32px rgba(0,0,0,0.18);
    --sombra-hover: 0 12px 40px rgba(0,0,0,0.15);
    
    /* ===== TRANSICIONES ===== */
    --transicion-rapida: 0.2s;
    --transicion-media: 0.3s;
    --transicion-lenta: 0.5s;
    
    /* ===== BREAKPOINTS ===== */
    --breakpoint-mobile: 600px;
    --breakpoint-tablet: 900px;
    --breakpoint-desktop: 1100px;
    
    /* ===== Z-INDEX ===== */
    --z-navegacion: 1000;
    --z-menu-sticky: 110;
    --z-overlay: 120;
    --z-modal: 130;
}

/* ===== MEDIA QUERIES GLOBALES ===== */
@media (max-width: 600px) {
    :root {
        --tamano-titulo-extra: 2.5rem;
        --tamano-titulo-grande: 1.8rem;
        --tamano-titulo-mediano: 1.5rem;
        --espaciado-xl: 1.5rem;
        --espaciado-xxl: 2rem;
    }
}

@media (max-width: 900px) {
    :root {
        --tamano-titulo-extra: 3rem;
        --tamano-titulo-grande: 2.2rem;
    }
}