header {
    /* Configuración por defecto para móviles */
    padding: 20px; 
    text-align: center;
}

.header-background-night{
    background-color: #dedede;
}
.header-background-day{
    background-color: #FFF;
}

.header-image {
    width: 100%; /* Asegura que el div ocupe el ancho completo */
    height: 50vh; /* Altura del div a la mitad de la pantalla */
}
.header-background-night, .header-background-day {
    /* Tus estilos personalizados para el fondo del header según la hora */
    padding: 0; /* Bootstrap ya maneja el padding, ajusta según necesites */
}
#obras{
    margin:0;
    width: 100%;
}



/* Media query para tabletas y escritorios */
@media (min-width: 768px) {
    #obras{
        margin:0;
        width: auto;
    }
    header {
        padding: 0px;
        /* Mantiene las demás propiedades iguales */
    }
    #cabecera {
        height:300px;
        background-position: center;
        text-align: center;
        background-repeat: no-repeat; 
    }
    .header-image-night{
        background-image: url('../images/cabecera_v8_m.png');
    }
    .header-image-day{
        background-image: url('../images/cabecera_v6_m.png');
    }
}