/* ==========================================
   VARIABLES DE DISEÑO (Design System)
   ========================================== */

:root {
    /* 🎨 Paleta de Colores Principal (Brand) */
    --color-main: #611e26;         /* Rojo principal #BE0319 */
    --color-main-dark: #9a080f;    /* Rojo oscuro (hover, acentos) */
    --color-main-light: #EB1923;   /* Rojo vibrante (interacción) */
    --color-main-hover: #cc2f34;   /* Rojo suave (hover) */
    --color-main-focus: #FF999D;   /* Rojo pálido (focus) */

    /* 📝 Colores de Texto */
    --color-text-primary: #ffffff;
    --color-text-secondary: #cccccc;
    --color-text-muted: #9e9797;
    --color-text-dark: #1a1a1a;

    /* 🛠️ Colores Funcionales */
    --color-footer-bg: #611e26;  /*bck color #181816*/
    --color-link-hover: #5E17EB;
    --color-bg-light: #f8f9fa;
    --color-border: #f0f0f0;

    /* ✨ Efectos y Gradientes */
    --gradient-header: linear-gradient(to right, #000e, #611e2622);
    --gradient-premium: linear-gradient(135deg, var(--color-main-light), var(--color-main));
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* 📐 Dimensiones */
    --max-width-container: 1300px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
}