* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100vw;
    height: 100vh;
    background-color: black;
    overflow: hidden;
    font-family: Helvetica, sans-serif;
}

/* DESKTOP (Vuelve a organizar la versión web) */
@media (min-width: 769px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;    
        padding: 2vh 2vw;       
    }

    .contenedor {
        display: flex;
        flex-direction: column;
        width: fit-content;
        max-width: 95vw;        
        gap: 10px;              
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .logo {
        height: 35px;           
    }

    .contacto {
        color: white;
        text-decoration: none;
        font-size: 17px;
        font-weight: 200;
        letter-spacing: 0.05em;
    }

    .contacto:hover {
        color: gray;
    }

    .video {
        height: 88vh;          
        width: auto;            
        display: block;
    }
}

@media (max-width: 768px) {
    html, body {
        height: 100vh;
        height: 100dvh;          /* Asegura el alto en Safari iOS */
        display: flex;
        justify-content: center; /* Centra el bloque completo en la pantalla */
        align-items: center;
        padding: 4% 4%;          /* Margen lateral para despegar del borde */
    }

    .contenedor {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px;               /* Espacio entre la cabecera y el video */
    }

    .header {
        position: relative;
        display: flex;
        flex-direction: row;     /* En fila: elementos lado a lado */
        justify-content: space-between; /* Logo a la izquierda, contacto a la derecha */
        align-items: center;   
        width: 100%;
    }

    .logo {
        height: 28px;
    }

    .contacto {
        font-size: 14px;
        text-decoration: none;
        color: white;
    }

    .video {
        width: 100%;             /* Ocupa todo el ancho disponible */
        max-height: 75vh;        /* Asegura que no sobrepase el alto visible */
        object-fit: contain;     /* Conserva la proporción original del video */
        display: block;
    }
}