/* ===== VARIABLES DE COLOR ===== */
:root {
    /* Colores principales */
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --secondary: #60A5FA;
    --secondary-dark: #3B82F6;
    
    /* Gradientes */
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
    --gradient-hover: linear-gradient(135deg, var(--secondary), var(--primary));
    
    /* Fondos */
    --bg-dark: #05060b;
    --bg-card: #111827;
    --bg-card-hover: #1a2235;
    --bg-nav: rgba(10, 14, 25, 0.6);
    --bg-mobile: #131d2f;
    --bg-mobile-item: rgba(255, 255, 255, 0.05);
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* Textos */
    --text-primary: #ffffff;
    --text-secondary: #9caec8;
    --text-mobile: rgba(255, 255, 255, 0.78);
    
    /* Bordes */
    --border-color: #2c3953;
    --border-mobile: rgba(255, 255, 255, 0.1);
    
    /* Sombras - usando los colores principales con opacidad */
    --shadow-primary: rgba(37, 99, 235, 0.28);
    --shadow-secondary: rgba(96, 165, 250, 0.32);
    --shadow-hover: rgba(96, 165, 250, 0.44);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --shadow-darker: rgba(0, 0, 0, 0.5);
    
    /* Overlays y efectos */
    --overlay-primary: rgba(37, 99, 235, 0.2);
    --overlay-secondary: rgba(96, 165, 250, 0.16);
    --overlay-soft: rgba(255, 255, 255, 0.1);
    
    /* Blancos con opacidad */
    --white-01: rgba(255, 255, 255, 0.08);
    --white-02: rgba(255, 255, 255, 0.16);
    --white-05: rgba(255, 255, 255, 0.05);
    
    /* Tamaños y transiciones */
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    --border-radius-card: 20px;
    --border-radius-button: 50px;
}