/* 1. RESET Y FONDO */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #C93B2C !important;
    overflow: hidden;
    font-family: sans-serif;
}

/* 2. CONTENEDOR PRINCIPAL */
.poster-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. CAPA DEL VÍDEO */
.video-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.video-layer video {
    /* IMPORTANTE: Usamos width 100% para que el video llene el ancho */
    width: 100%;
    height: 100%;
    /* 'cover' hará que el video ocupe toda la pantalla sin bordes, como la foto original */
    /* Si el video tiene ya el fondo rojo idéntico, puedes usar 'contain' */
    object-fit: cover; 
    
    /* Suavizamos mucho la sombra para que no parezca una "caja" */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.2); 
}

/* 4. CAPA DE INTERFAZ (Encima del vídeo) */
.overlay-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

/* 5. LOGO DE ARRIBA - Más pegado al borde superior como en el PDF */
.logo-top {
    width: 85%;
    max-width: 500px;
    height: auto;
    margin-top: 2vh; /* Subimos el título */
}

/* 6. CONTENEDOR DE ABAJO - Bajamos los logos para que queden al borde */
.footer-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Menos espacio entre "Solo en cines" y logos */
    margin-bottom: 3vh; /* Bajamos el bloque para que roce el borde inferior */
}

.img-solo-cines {
    width: 35%;
    max-width: 220px;
    height: auto;
}

.img-logos {
    width: 85%;
    max-width: 700px;
    height: auto;
}

/* 7. ADAPTACIÓN MÓVIL */
/* 7. ADAPTACIÓN ESPECÍFICA PARA MÓVILES */
@media (max-width: 768px) {
    /* Corregimos el alto del contenedor para navegadores móviles */
    .poster-wrapper {
        height: 100vh; /* Fallback */
        height: 100dvh; /* Altura dinámica que detecta las barras de Chrome/Android */
    }

    .video-layer video {
        width: 100%; 
        height: auto;
        max-height: 55vh; /* Reducimos un poco el vídeo para dejar espacio abajo */
    }

    .logo-top {
        width: 70%;
        margin-top: 5vh;
    }

    /* SUBIMOS LOS LOGOS DE ABAJO */
    .footer-container {
        /* Aumentamos significativamente el margen inferior */
        /* 12vh suele ser suficiente para saltar la barra de herramientas de Android */
        margin-bottom: 12vh; 
        gap: 8px;
    }

    .img-solo-cines { 
        width: 50%; 
        max-width: 180px;
    }
    
    .img-logos { 
        width: 90%; 
    }
}