body{
margin:0;
overflow:hidden;
background:#87CEEB;
}

#mapa{
width:100vw;
height:100vh;
position:relative;
overflow:hidden;
}

.fondo{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

.edificio{
position:absolute;
cursor:pointer;
z-index:6;
transition:.2s;
}

.edificio:hover{
transform:scale(1.05);
}

.vehiculo{
position:absolute;
width:4%;
z-index:5;
}

.nube{
position:absolute;
opacity:.9;
z-index:3;
}

.avion{
position:absolute;
width:18%;
z-index:4;
}

/* POPUP */
#popupInicio{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:999;
}

#imgBienvenida{
width:60%;
max-width:600px;
}

#btnJugar{
margin-top:20px;
padding:15px 40px;
font-size:22px;
border:none;
border-radius:10px;
background:#ffcc00;
cursor:pointer;
font-weight:bold;
}

/* CINEMATICA */
#cinematica{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:none;
align-items:center;
justify-content:center;
z-index:2000;
}

#cinematica img{
max-width:60%;
max-height:60%;
object-fit:contain;
}

/* MOBILE */
@media(max-width:768px){

.vehiculo{
    width:8%;
}

.avion{
    width:30%;
}

#imgBienvenida{
    width:90%;
}

#cinematica img{
    max-width:85%;
    max-height:85%;
}

}
}