/* ========================================
   RAYO.PHP - ELEMENTO RAYO
   Colores: Amarillos eléctricos y púrpuras
   ======================================== */

:root {
    --rayo-primary: #ffd700;
    --rayo-secondary: #ff8c00;
    --rayo-light: #ffeb3b;
    --rayo-dark: #6a1b9a;
    --rayo-accent: #9c27b0;
}

/* Override colores principales */
.video-overlay {
    background: linear-gradient(180deg, rgba(106, 27, 154, 0.7) 0%, rgba(156, 39, 176, 0.5) 100%);
}

.reto-number,
.reto-message,
.seccion-descripcion h2,
.enlace-whatsapp {
    color: var(--rayo-light) !important;
}

.btn-cta,
.pasos-lista .paso-numero {
    background: linear-gradient(135deg, var(--rayo-primary) 0%, var(--rayo-secondary) 100%) !important;
    color: #000 !important;
}

.seccion-como-participar {
    background: linear-gradient(135deg, #fff9c4 0%, #ffecb3 100%);
}

.seccion-costos {
    background: linear-gradient(135deg, var(--rayo-dark) 0%, var(--rayo-accent) 100%);
}

.enlace-whatsapp:hover {
    color: var(--rayo-primary) !important;
}

.seccion-informacion-reto h2,
.titulo-seccion {
    color: var(--rayo-dark);
}

.costo-card {
    background: rgba(255, 215, 0, 0.1);
}

.btn-cta-final {
    background: linear-gradient(135deg, var(--rayo-light) 0%, var(--rayo-primary) 100%) !important;
    color: #000 !important;
}