*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:white;
}

/* GALERIA */

.galeria{
width:100%;
max-width:900px;
margin:60px auto;
display:flex;
flex-direction:column; /* UNA TARJETA POR FILA */
gap:20px;
padding:0 20px;
}

/* TARJETAS */

.card{
width:100%;
height:260px;
position:relative;
overflow:hidden;
border-radius:10px;
cursor:pointer;
transition:all .5s ease;
background:#000;
}

/* COVER */

.cover{
position:absolute;
width:100%;
height:100%;
}

.cover img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.75);
}

/* TITULO */

.cover h2{
position:absolute;
bottom:15px;
left:15px;
color:white;
font-size:18px;
}

.cover span{
font-size:13px;
opacity:.8;
}

/* DETALLE */

.detalle{
position:absolute;
width:100%;
height:100%;
display:flex;
flex-direction:row;
opacity:0;
transition:.4s;
}

.card:hover .detalle{
opacity:1;
}

/* FOTOS */

.foto{
flex:1;
position:relative;
overflow:hidden;
}

.foto img{
width:100%;
height:100%;
object-fit:cover;
transition:.3s;
}

.foto img:hover{
transform:scale(1.05);
}

/* TEXTO FOTO */

.foto p{
position:absolute;
bottom:6px;
left:6px;
background:rgba(0,0,0,.6);
color:white;
padding:4px 8px;
font-size:11px;
border-radius:4px;
}

/* RESPONSIVE */

@media(max-width:900px){

.galeria{
flex-direction:column;
}

.card{
height:200px;
}

.detalle{
opacity:1;
}

}

/* MAPA */

.footer-col.map {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.footer-col.map h4 {
    font-size: 16px;
    margin-bottom: 12px;
    white-space: nowrap;
}

/* El contenedor del mapa para que encaje en el cuadro azul */
.map-container {
    width: 100%;
    height: 180px; /* Ajusta esta altura según prefieras */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* RESPONSIVE: En móvil el footer ya cambia a 1 o 2 columnas según tu código previo */
@media (max-width: 768px) {
    .map-container {
        height: 250px; /* Un poco más alto en móvil para que sea útil */
    }
}

/* MAPA FIN */