/* --- ANIMACIÓN GRADIENT TEXT --- */
@keyframes gradient-text-anim {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Nota: Asegúrate de que las variables --brand-red, --brand-purple y --brand-blue
   sigan existiendo en tu archivo global de :root */
.text-gradient {
    background: linear-gradient(to right, var(--brand-red), var(--brand-purple), var(--brand-blue), var(--brand-red));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: gradient-text-anim 8s ease-in-out infinite alternate;
    padding-bottom: 10px;
    margin-bottom: -10px;
}