/* ========================================
   VIENTO.PHP - ELEMENTO VIENTO
   Colores: Blancos, grises claros y azules cielo
   ======================================== */

:root {
    --viento-primary: #87ceeb;
    --viento-secondary: #4682b4;
    --viento-light: #b0e0e6;
    --viento-dark: #2c5f77;
    --viento-accent: #5f9ea0;
}

/* Override colores principales */
.video-overlay {
    background: linear-gradient(180deg, rgba(44, 95, 119, 0.7) 0%, rgba(70, 130, 180, 0.5) 100%);
}

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

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

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

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

.enlace-whatsapp:hover {
    color: var(--viento-accent) !important;
}

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

.costo-card {
    background: rgba(135, 206, 235, 0.1);
}

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