/* ============================================
   VARIABLES CSS - STEREO IMPORT
   ============================================ */

:root {
    /* Colores principales */
    --primary-color: #3a7bd5;
    --secondary-color: #00d2ff;
    --gradient-start: #00d2ff;
    --gradient-end: #3a7bd5;
    --text-color: #1a1a1a;
    --text-dark: #2c3e50;
    --text-light: #6c757d;
    --white-color: #ffffff;
    --price-color: #003d99;
    --light-gray: #b0b0b0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --background-light: #f8f9fa;
    
    /* Gradientes */
    --primary-gradient: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    --text-gradient: -webkit-linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    
    /* Tipografía */
    --font-family: 'Poppins', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    
    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    
    /* Bordes y sombras */
    --border-radius: 10px;
    --border-radius-full: 50px;
    --box-shadow: 0 5px 15px var(--shadow-color);
    --box-shadow-lg: 0 10px 30px var(--shadow-color);
    --box-shadow-hover: 0 10px 20px rgba(58, 123, 213, 0.3);
    
    /* Transiciones */
    --transition-fast: 0.3s;
    --transition-normal: 0.6s;
    --transition-ease: ease-out;
    
    /* Breakpoints */
    --mobile: 768px;
    --tablet: 1024px;
    --desktop: 1200px;
    
    /* Z-index */
    --z-header: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
}