/* ============================================
   RECTÁNGULO DE SUPERPOSICIÓN PARA VIDEO
   ============================================
   Solución responsiva simplificada usando viewport units
*/

.video-cover-rectangle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background-color: #ffffff;
    z-index: 10;
    pointer-events: none;
}

/* El rectángulo solo es visible cuando el overlay del video está activo */
#videoIntroOverlay .video-cover-rectangle {
    display: block;
}

/* Se oculta cuando el video no está visible */
#videoIntroOverlay.gep-hidden .video-cover-rectangle,
body:not(:has(#videoIntroOverlay)) .video-cover-rectangle {
    display: none;
}

/* =============================================
   POSICIONAMIENTO RESPONSIVO
   ============================================= */

/* Desktop y tablets grandes (pantallas anchas) */
@media screen and (min-width: 993px) {
    .video-cover-rectangle {
        bottom: 12vh; /* Más bajo para cubrir más */
        height: 8vw; /* Más alto */
        max-height: 120px;
        min-height: 60px;
    }
}

/* Tablets medianas y landscape phones */
@media screen and (max-width: 992px) and (min-width: 601px) {
    .video-cover-rectangle {
        bottom: 10vh;
        height: 9vw;
        max-height: 100px;
        min-height: 55px;
    }
}

/* Móviles en portrait */
@media screen and (max-width: 600px) and (min-width: 451px) {
    .video-cover-rectangle {
        bottom: 18vh;
        height: 10vw;
        max-height: 80px;
        min-height: 50px;
    }
}

/* Móviles pequeños */
@media screen and (max-width: 450px) {
    .video-cover-rectangle {
        bottom: 20vh;
        height: 12vw;
        max-height: 70px;
        min-height: 45px;
    }
}

/* ============================================
   AJUSTES FINOS POR ALTURA DE PANTALLA
   ============================================= */

/* Pantallas muy altas (aspect ratio vertical) */
@media screen and (max-aspect-ratio: 9/16) {
    .video-cover-rectangle {
        bottom: 20vh;
    }
}

/* Pantallas muy anchas (aspect ratio horizontal) */
@media screen and (min-aspect-ratio: 21/9) {
    .video-cover-rectangle {
        bottom: 15vh;
    }
}

/* ============================================
   NOTAS:
   - Usa viewport units (vw/vh) para escalar automáticamente
   - bottom en vez de top para anclaje más predecible
   - max-height y min-height evitan valores extremos
   - Ajustes por aspect-ratio para pantallas ultra anchas/altas
   
   PARA DESACTIVAR:
   - Comenta la importación en index.html
   - O agrega: .video-cover-rectangle { display: none !important; }
   ============================================ */

/* ============================================
   NOTAS:
   - Usa viewport units (vw/vh) para escalar automáticamente
   - bottom en vez de top para anclaje más predecible
   - max-height y min-height evitan valores extremos
   - Ajustes por aspect-ratio para pantallas ultra anchas/altas
   
   PARA DESACTIVAR:
   - Comenta la importación en index.html
   - O agrega: .video-cover-rectangle { display: none !important; }
   ============================================ */