body {
    background-color: #6D84A3;
    color: white;
    text-align: center;
    overflow-y: auto; /* Asegura que el scrollbar vertical esté activo si es necesario */
}

h4 {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 16px; /* Reducido para pantallas pequeñas */
}

.video-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Mantener la relación de aspecto 16:9 */
    margin: 20px auto;
    width: 90%;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Un color de fondo neutro */
    z-index: -1; /* Asegura que esté detrás del vídeo */
}

.video-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #9c9c9c;
    font-weight: bold;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 0;
    height: 40px;
}

.responsive-video {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: calc(100% - 40px); /* Ajuste de altura para el texto */
}



@media (max-width: 400px) { /* Media queries para dispositivos muy pequeños como iPhone SE */
    .video-container {
        padding-top: 75%; /* Aumentar padding para más espacio vertical */
    }
    .video-label, h4 {
        font-size: 14px; /* Más reducción para texto en dispositivos muy pequeños */
    }
}
/* Media Queries para pantallas grandes */
@media (min-width: 992px) {
    .video-container {
        max-width: 700px; /* Incrementa el tamaño máximo en escritorios grandes */
    }
}