#sceneList .scenes .scene {
    flex: 1 1 calc(100% - 10px); /* Ajuste para dispositivos móviles */
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center; /* Centra el texto verticalmente */
    justify-content: center; /* Centra el texto horizontalmente */
    background-color: rgba(0, 0, 0, 1); /* Fondo negro semitransparente */
    color: white; /* Texto en blanco para mejor contraste */
    pointer-events: fill;
}

/* Media query para escritorio */
@media (min-width: 768px) {
    #sceneList .scenes .scene {
        flex: 0 0 calc(20% - 10px); /* Ajuste para mantener tres columnas incluyendo el gap */
    }
}

#sceneListBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Fondo negro semitransparente */
    z-index: 2000;
    display: none;
}

#sceneListBackground.enabled {
    display: block;
}

.scenesBackground{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(254, 254, 254, 0.75); /* Fondo negro semitransparente */
    z-index: 1000;
}

#sceneList .scenes .scene .text {
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con transparencia */
    color: black; /* Texto en negro para contraste */
    padding: 10px; /* Espacio interno */
}

.fixed-image-container {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.fixed-image {
    max-width: 300px; /* Ajusta el tamaño de la imagen según sea necesario */
    height: auto;
}

/* CSS para los botones */
.button-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Espacio entre los botones */
    padding: 10px; /* Espacio alrededor del contenedor de los botones */
    border-radius: 5px; /* Bordes redondeados opcionales */
}

.button-container .menu-button {
    width: 80px; /* Ancho de los botones */
    height: 80px; /* Altura de los botones */
    background-size: cover;
    background-position: center;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    opacity: 1; /* Transparencia inicial */
    transition: transform 0.3s;
}

.button-container button {
    width: 30px; /* Ancho de los botones */
    height: 30px; /* Altura de los botones */
    background-size: cover;
    background-position: center;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    opacity: 0.75; /* Transparencia inicial */
    transition: transform 0.3s;
}

.button-container .menu-button:hover {
    background-image: url('img/Dots.png');
    transform: scale(1.1);
    opacity: 1; /* Opacidad total al hacer hover */
}

.button-container button:hover {
    transform: scale(1.1);
    opacity: 1; /* Opacidad total al hacer hover */
}

.sub-buttons {
    display: flex;
    gap: 10px;
}

/* Botón principal */
.menu-button {
    background-image: url('img/Menu.png');
}

.rotate-button {
    background-image: url('img/Rotate.png');
}

.rotate-button .hide {
    display: none;
}

.plane-button {
    background-image: url('img/Plane.png');
}

.plane-button .hide {
    display: none;
}

.info-button {
    background-image: url('img/Info.png');
}

.gyro-button {
    background-image: url('img/gyro.png');
    display: none;
}

.mobile .gyro-button {
    display: block;
}

.hide-button {
    background-image: url('img/Hide.png');
}

/*===========================================================================*/

.entrada {
    background-image: url('places/Entrada.jpg');
}

.recepcion {
    background-image: url('places/Recepcion.jpg');
}

.biblioteca-1 {
    background-image: url('places/Biblioteca 1.jpg');
}

.biblioteca-2 {
    background-image: url('places/Biblioteca 2.jpg');
}

.biblioteca-3 {
    background-image: url('places/Biblioteca 3.jpg');
}

.zonas-comunes {
    background-image: url('places/zonas-comunes.jpg');
}

.lounge {
    background-image: url('places/lounge.jpg');
}

.lounge-2 {
    background-image: url('places/lounge-2.jpg');
}

.lounge-3 {
    background-image: url('places/lounge-3.jpg');
}

.sala-zen-1 {
    background-image: url('places/sala-zen-1.jpg');
}

.sala-zen-2 {
    background-image: url('places/sala-zen-2.jpg');
}

.gym-1 {
    background-image: url('places/Gym 1.jpg');
}

.gym-2 {
    background-image: url('places/Gym 2.jpg');
}

.gym-3 {
    background-image: url('places/Gym 3.jpg');
}

.gym-4 {
    background-image: url('places/Gym 4.jpg');
}

.area-comun-1-1 {
    background-image: url('places/area-comun-1-1.jpg');
}

.area-comun-1-2 {
    background-image: url('places/area-comun-1-2.jpg');
}

.party-room-1 {
    background-image: url('places/party-room-1.jpg');
}

.party-room-2-1 {
    background-image: url('places/party-room-2-1.jpg');
}

.party-room-2-2 {
    background-image: url('places/party-room-2-2.jpg');
}

.zona-juegos-1 {
    background-image: url('places/Zona juegos 1.jpg');
}

.zona-juegos-2 {
    background-image: url('places/Zona juegos 2.jpg');
}

.cine-exterior {
    background-image: url('places/cine-exterior.jpg');
}

.piscina {
    background-image: url('places/piscina.jpg');
}

.jardin-piscina {
    background-image: url('places/jardin-piscina.jpg');
}

.piscina-4 {
    background-image: url('places/Piscina 4.jpg');
}

.cinema {
    background-image: url('places/Cinema.jpg');
}

.terraza-chill-out {
    background-image: url('places/terraza-chill-out.jpg');
}

.zona-comun-3-1 {
    background-image: url('places/Zona comun 3-1.jpg');
}

.zona-comun-3-2 {
    background-image: url('places/Zona comun 3-2.jpg');
}

.pasillo {
    background-image: url('places/Pasillo.jpg');
}

.lavanderia {
    background-image: url('places/Lavanderia.jpg');
}

.sala-de-estudio-1 {
    background-image: url('places/sala-de-estudio-1.jpg');
}

.sala-de-estudio-2-1 {
    background-image: url('places/sala-de-estudio-2-1.jpg');
}

.sala-de-estudio-2-2 {
    background-image: url('places/sala-de-estudio-2-2.jpg');
}

.sala-de-estudio-3 {
    background-image: url('places/sala-de-estudio-3.jpg');
}

.sala-musica {
    background-image: url('places/Sala musica.jpg');
}

.zona-vending-2-1 {
    background-image: url('places/zona-vending-2-1.jpg');
}

.zona-vending-2-2 {
    background-image: url('places/zona-vending-2-2.jpg');
}

.pasillo-habitacion {
    background-image: url('places/Pasillo habitacion.jpg');
}

.habitacion-con-terraza {
    background-image: url('places/habitacion-con-terraza.jpg');
}

.habitacion-1-bao {
    background-image: url('places/Habitacion 1 bano.jpg');
}

.habitacion-2-cocina {
    background-image: url('places/Habitacion 2 cocina.jpg');
}

.habitacion-individual {
    background-image: url('places/habitacion-individual.jpg');
}

/*===========================================================================*/

.map-plane {
    position: absolute;
    z-index: 5000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.mobile .map-plane {
    width: 90%;
}

.map-plane.visible {
    display: block;
}