/* ================================
   MAPA INTERACTIVO DESTINOS
   OnlineTours
================================ */


/* CONTENEDOR PRINCIPAL */

#mapa-destinos{

    width:100%;
    padding:60px 20px;
    background:#f5f8fb;

}


/* ESTRUCTURA MAPA + PANEL */

.contenedor-mapa-destinos{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:60% 40%;
    gap:25px;

}


/* MAPA */

#mapa{

    width:100% !important;
    height:700px !important;
    min-height:700px !important;
    background:#ddd;

}



/* PANEL INFORMACIÓN */

#panel-destino{

    background:white;

    border-radius:20px;

    padding:30px;

    height:700px;

    overflow-y:auto;

    box-shadow:
    0 15px 40px rgba(0,0,0,.12);

}



/* IMAGEN DESTINO */

.destino-imagen{

    width:100%;
    height:250px;

    object-fit:cover;

    border-radius:15px;

    margin-bottom:20px;

}



/* TITULO */

#panel-destino h2{

    color:#003b64;

    font-size:32px;

    margin-bottom:20px;

}



/* BLOQUES INFORMACION */

.info-destino{

    margin-bottom:25px;

}


.info-destino h3{

    color:#0095d9;

    font-size:20px;

    margin-bottom:8px;

}


.info-destino p{

    color:#555;

    font-size:15px;

    line-height:1.7;

}



/* TARJETAS DATOS */

.datos-destino{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-bottom:25px;

}


.dato{

    background:#f2f8fc;

    padding:15px;

    border-radius:12px;

    border-left:4px solid #0095d9;

}


.dato small{

    display:block;

    color:#777;

    margin-bottom:5px;

}


.dato strong{

    color:#003b64;

    font-size:16px;

}



/* MARCADORES LEAFLET */

.marcador-destino{

    background:#0095d9;

    width:18px;

    height:18px;

    border-radius:50%;

    border:3px solid white;

    box-shadow:0 3px 8px rgba(0,0,0,.35);

    transition:.3s;

}


.marcador-destino:hover{

    width:26px;

    height:26px;

    margin-left:-4px;

    margin-top:-4px;

}



/* POPUP */

.leaflet-popup-content-wrapper{

    border-radius:15px;

}


.leaflet-popup-content{

    font-family:Arial,sans-serif;

    font-size:14px;

}



/* BOTON */

.btn-destino{

    display:inline-block;

    background:#0095d9;

    color:white;

    padding:12px 25px;

    border-radius:30px;

    text-decoration:none;

    margin-top:15px;

    transition:.3s;

}


.btn-destino:hover{

    background:#006da8;

}



/* RESPONSIVE */

@media(max-width:1100px){


.contenedor-mapa-destinos{

    grid-template-columns:1fr;

}


#mapa{

    height:500px;

}


#panel-destino{

    height:auto;

}


}



@media(max-width:600px){


#mapa-destinos{

    padding:30px 10px;

}


#panel-destino{

    padding:20px;

}


#panel-destino h2{

    font-size:26px;

}


.datos-destino{

    grid-template-columns:1fr;

}
.leaflet-container{

    width:100% !important;
    height:100% !important;
    z-index:1;

}


}