/* ============================================
   VARIABLES CSS - FASAN
   Paleta institucional: Morado, Rosa, Turquesa
   ============================================ */

:root {
    /* Colores principales institucionales */
    --color-primary: #8331a7;        /* Morado - Color principal */
    --color-primary-dark: #6b2890;   /* Morado oscuro */
    --color-primary-light: #9b4cbd;  /* Morado claro */
    
    --color-secondary: #d0577b;      /* Rosa */
    --color-secondary-dark: #b84566; /* Rosa oscuro */
    --color-secondary-light: #e07a99;/* Rosa claro */
    
    --color-accent: #1aafbe;         /* Turquesa */
    --color-accent-dark: #15919d;    /* Turquesa oscuro */
    --color-accent-light: #3fc4d1;   /* Turquesa claro */
    
    /* Color para CTAs importantes (DONAR) */
    --color-highlight: #d0577b;      /* Rosa para destacar */
    --color-warm: #e07a99;           /* Rosa cálido */
    
    /* Colores de fondo */
    --bg-primary: #FAFBFC;           /* Fondo principal limpio */
    --bg-secondary: #ffffff;         /* Blanco puro */
    --bg-tertiary: #f5f0f7;          /* Morado muy suave */
    --bg-quaternary: #f0e8f4;        /* Morado claro */
    --bg-quinary: #ebe0f0;           /* Morado medio */
    --bg-light: #f8f5fa;             /* Gris morado claro */
    --bg-dark: #8331a7;              /* Morado oscuro */
    --bg-gradient-start: #8331a7;    /* Gradiente inicio */
    --bg-gradient-end: #d0577b;      /* Gradiente fin */
    
    /* Colores de texto */
    --text-primary: #2d2235;         /* Texto principal oscuro (morado muy oscuro) */
    --text-secondary: #5a4d66;       /* Texto secundario */
    --text-light: #ffffff;           /* Texto claro */
    --text-muted: #8a7d96;           /* Texto atenuado */
    
    /* Fuentes */
    --font-primary: "Inter", sans-serif;
    --font-secondary: "Inter", "Segoe UI", Arial, sans-serif;
    
    /* Espaciado */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    
    /* Bordes */
    --border-radius-sm: 8px;
    --border-radius-md: 15px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    --border-radius-full: 50px;
    
    /* Sombras con tonos morados */
    --shadow-sm: 0 2px 8px rgba(131, 49, 167, 0.08);
    --shadow-md: 0 4px 16px rgba(131, 49, 167, 0.12);
    --shadow-lg: 0 8px 32px rgba(131, 49, 167, 0.15);
    --shadow-xl: 0 12px 48px rgba(131, 49, 167, 0.2);
    --shadow-glow: 0 0 30px rgba(131, 49, 167, 0.3);
    --shadow-glow-accent: 0 0 30px rgba(26, 175, 190, 0.3);
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
    --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Z-index */
    --z-dropdown: 999;
    --z-modal: 100;
    --z-header: 10;
    --z-whatsapp: 9999;
}

p{
    font-size: clamp(16px, 2vw, 22px)!important;
}