/* =========================================
   ESTRATEGIA DE OVERLAY (TAPA) PARA VIDEOS
   ========================================= */

/* Contenedor principal: ABSOLUTO para llenar la tarjeta padre */
.progressive-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    z-index: 0;
    /* Base del stack */
}

/* Tapa (Poster) - Nivel Superior */
.video-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Encima del video */
}

/* Asegurar que la imagen llene la tapa */
.video-cover picture,
.video-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Video - Nivel Inferior */
.progressive-video-container video,
.carousel-card-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    /* Debajo de la tapa */
}

/* [FIX] Solo para el Index Principal (solutions-section):
   Aquí gana nuestro top:0, así que necesitamos quitar el transform antiguo.
   En Puertas de Garaje gana el top:50%, así que necesitan el transform. */
.solutions-section .progressive-video-container video {
    transform: none !important;
}

/* Estado "Listo": Ocultar la tapa */
.progressive-video-container.video-ready .video-cover {
    display: none;
    /* Hard switch, sin transición */
}

/* Asegurar que el contenido superpuesto (títulos, botones) esté siempre encima de todo */
.carousel-card-overlay,
.overlay-content {
    z-index: 10;
    position: absolute;
}