/* 
 * EFECTOS VISUALES CINEMÁTICOS ALERTATRIP
 * Transformación del Hero en experiencia inmersiva
 */

/* Fondo del hero: ahora es un contenedor para el video */
.hero { 
    position: relative !important; 
    overflow: hidden !important; 
    background: #000 !important; /* Fondo negro mientras carga el video */
    color: white !important;
}

/* El video que cubre todo el fondo */
.hero-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    z-index: 0 !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    pointer-events: none !important;
}

/* Capa de contraste (Overlay) para que el texto sea legible */
.hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.3) 0%, 
        rgba(0, 0, 0, 0.6) 100%
    ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Elevamos el contenido por encima del video y el overlay */
.hero-grid {
    position: relative !important;
    z-index: 2 !important;
}

/* Eliminamos las animaciones viejas del avioncito */
.plane-animation, .plane-trail { 
    display: none !important; 
}