/* ============================================
   RECTÁNGULO DE SUPERPOSICIÓN PARA VIDEO
   ============================================
   Sistema ultra granular de breakpoints cada 50-100px
   Ajusta los valores según necesites para cada tamaño
*/

.video-cover-rectangle {
    position: absolute;
    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;
}

/* =============================================
   DESKTOP - PANTALLAS GRANDES
   ============================================= */

/* Desktop Extra Grande (>1400px) */
@media screen and (min-width: 1401px) {
    .video-cover-rectangle {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        width: 1920px;
        height: 55px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Desktop Grande (1201px - 1400px) */
@media screen and (max-width: 1400px) and (min-width: 1201px) {
    .video-cover-rectangle {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        width: 1920px;
        height: 50px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Desktop Mediano Alto (1101px - 1200px) */
@media screen and (max-width: 1200px) and (min-width: 1101px) {
    .video-cover-rectangle {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        width: 1500px;
        height: 48px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Desktop Mediano (993px - 1100px) */
@media screen and (max-width: 1100px) and (min-width: 993px) {
    .video-cover-rectangle {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        width: 1400px;
        height: 45px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* =============================================
   TABLETS Y LANDSCAPE PHONES
   ============================================= */

/* Tablet Grande (901px - 992px) */
@media screen and (max-width: 992px) and (min-width: 901px) {
    .video-cover-rectangle {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        width: 650px;
        height: 43px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Tablet Mediano (801px - 900px) */
@media screen and (max-width: 900px) and (min-width: 801px) {
    .video-cover-rectangle {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 40px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Tablet Pequeño (701px - 800px) */
@media screen and (max-width: 800px) and (min-width: 701px) {
    .video-cover-rectangle {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        width: 550px;
        height: 38px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Landscape Phone Alto (651px - 700px) */
@media screen and (max-width: 700px) and (min-width: 651px) {
    .video-cover-rectangle {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        width: 500px;
        height: 36px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Landscape Phone Mediano (601px - 650px) */
@media screen and (max-width: 650px) and (min-width: 601px) {
    .video-cover-rectangle {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
        width: 480px;
        height: 35px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* =============================================
   MÓVILES - PORTRAIT MODE
   ============================================= */

/* Móvil Extra Grande (551px - 600px) */
@media screen and (max-width: 600px) and (min-width: 551px) {
    .video-cover-rectangle {
        left: 50%;
        top: 76%;
        transform: translate(-50%, -50%);
        width: 460px;
        height: 34px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Móvil Grande Alto (521px - 550px) */
@media screen and (max-width: 550px) and (min-width: 521px) {
    .video-cover-rectangle {
        left: 50%;
        top: 75%;
        transform: translate(-50%, -50%);
        width: 440px;
        height: 33px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Móvil Grande (481px - 520px) */
@media screen and (max-width: 520px) and (min-width: 481px) {
    .video-cover-rectangle {
        left: 50%;
        top: 74%;
        transform: translate(-50%, -50%);
        width: 420px;
        height: 32px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Móvil Mediano Alto (451px - 480px) */
@media screen and (max-width: 480px) and (min-width: 451px) {
    .video-cover-rectangle {
        left: 50%;
        top: 59%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 31px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Móvil Mediano (421px - 450px) */
@media screen and (max-width: 450px) and (min-width: 421px) {
    .video-cover-rectangle {
        left: 50%;
        top: 72%;
        transform: translate(-50%, -50%);
        width: 380px;
        height: 30px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Móvil Mediano Bajo (391px - 420px) */
@media screen and (max-width: 420px) and (min-width: 391px) {
    .video-cover-rectangle {
        left: 50%;
        top: 71%;
        transform: translate(-50%, -50%);
        width: 360px;
        height: 29px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Móvil Pequeño Alto (361px - 390px) */
@media screen and (max-width: 390px) and (min-width: 361px) {
    .video-cover-rectangle {
        left: 50%;
        top: 70%;
        transform: translate(-50%, -50%);
        width: 340px;
        height: 28px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Móvil Pequeño (341px - 360px) */
@media screen and (max-width: 360px) and (min-width: 341px) {
    .video-cover-rectangle {
        left: 50%;
        top: 69%;
        transform: translate(-50%, -50%);
        width: 320px;
        height: 27px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Móvil Muy Pequeño (321px - 340px) */
@media screen and (max-width: 340px) and (min-width: 321px) {
    .video-cover-rectangle {
        left: 50%;
        top: 68%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 26px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* Móvil Mini (≤ 320px) */
@media screen and (max-width: 320px) {
    .video-cover-rectangle {
        left: 50%;
        top: 67%;
        transform: translate(-50%, -50%);
        width: 280px;
        height: 25px;
        background-color: #ffffff;
        opacity: 1;
    }
}

/* ============================================
   GUÍA COMPLETA DE BREAKPOINTS
   ============================================

   COBERTURA TOTAL: 320px hasta pantallas ultra grandes (>1400px)

   BREAKPOINTS DISPONIBLES (20 rangos ultra granulares):

   1. Desktop Extra Grande (>1400px):        width: 850px, height: 55px, top: 82%
   2. Desktop Grande (1201-1400px):          width: 800px, height: 50px, top: 82%
   3. Desktop Mediano Alto (1101-1200px):    width: 750px, height: 48px, top: 82%
   4. Desktop Mediano (993-1100px):          width: 700px, height: 45px, top: 82%
   5. Tablet Grande (901-992px):             width: 650px, height: 43px, top: 82%
   6. Tablet Mediano (801-900px):            width: 600px, height: 40px, top: 82%
   7. Tablet Pequeño (701-800px):            width: 550px, height: 38px, top: 82%
   8. Landscape Phone Alto (651-700px):      width: 500px, height: 36px, top: 82%
   9. Landscape Phone Mediano (601-650px):   width: 480px, height: 35px, top: 82%
   10. Móvil Extra Grande (551-600px):       width: 460px, height: 34px, top: 76%
   11. Móvil Grande Alto (521-550px):        width: 440px, height: 33px, top: 75%
   12. Móvil Grande (481-520px):             width: 420px, height: 32px, top: 74%
   13. Móvil Mediano Alto (451-480px):       width: 400px, height: 31px, top: 73%
   14. Móvil Mediano (421-450px):            width: 380px, height: 30px, top: 72%
   15. Móvil Mediano Bajo (391-420px):       width: 360px, height: 29px, top: 71%
   16. Móvil Pequeño Alto (361-390px):       width: 340px, height: 28px, top: 70%
   17. Móvil Pequeño (341-360px):            width: 320px, height: 27px, top: 69%
   18. Móvil Muy Pequeño (321-340px):        width: 300px, height: 26px, top: 68%
   19. Móvil Mini (≤320px):                  width: 280px, height: 25px, top: 67%

   CADA BREAKPOINT TIENE CONTROLES INDEPENDIENTES PARA:
   - left: Posición X (horizontal)
   - top: Posición Y (vertical)
   - width: Ancho del rectángulo
   - height: Alto del rectángulo
   - background-color: Color del rectángulo
   - opacity: Transparencia (1 = sólido, 0.5 = semi-transparente)

   POSICIONAMIENTO RESPONSIVO OPTIMIZADO:
   - Desktop/Tablets (≥601px): top: 82% (posición original)
   - Móviles (≤600px): top: 76% a 67% (gradualmente más alto para pantallas más pequeñas)
   - Esto evita que la cinta aparezca fuera del área visible en móviles

   EJEMPLO DE AJUSTE:
   Si tu pantalla es 468px de ancho, estarás en el breakpoint:
   "Móvil Mediano Alto (451-480px)" - Busca ese comentario y ajusta
   los valores de width, height, left, top según necesites.

   PARA SUSPENDER:
   - No incluyas este archivo CSS en el HTML
   - O comenta todo el contenido del archivo
   - O agrega: .video-cover-rectangle { display: none !important; }

   NOTA: No hay gaps entre breakpoints, cada tamaño está cubierto.
*/