/* ===== VARIABLES DE COLOR ===== */
:root {
    /* Colores principales */
    --primary: #FB7A3C;
    --primary-dark: #F97316;
    --secondary: #EC4899;
    --secondary-dark: #DB2777;
    
    /* Gradientes */
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
    --gradient-hover: linear-gradient(135deg, var(--secondary), var(--primary));
    
    /* Fondos */
    --bg-dark: #04070d;
    --bg-card: #0f172a;
    --bg-card-hover: #16213a;
    --bg-nav: rgba(9, 15, 27, 0.58);
    --bg-mobile: #13203a;
    --bg-mobile-item: rgba(255, 255, 255, 0.05);
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* Textos */
    --text-primary: #ffffff;
    --text-secondary: #9eb1ca;
    --text-mobile: rgba(255, 255, 255, 0.78);
    
    /* Bordes */
    --border-color: #2a3a57;
    --border-mobile: rgba(255, 255, 255, 0.1);
    
    /* Sombras - usando los colores principales con opacidad */
    --shadow-primary: rgba(251, 122, 60, 0.28);
    --shadow-secondary: rgba(236, 72, 153, 0.32);
    --shadow-hover: rgba(236, 72, 153, 0.44);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --shadow-darker: rgba(0, 0, 0, 0.5);
    
    /* Overlays y efectos */
    --overlay-primary: rgba(251, 122, 60, 0.2);
    --overlay-secondary: rgba(236, 72, 153, 0.2);
    --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;
}