#map {
    width: 100%; /* Ajusta el ancho del mapa al 100% del contenedor */
    height: 600px; /* Establece la altura del mapa */
}

.mapa-container {
    position: relative;
    width: 100%;
    height: 500px;
}

.mapa-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    z-index: -1;
    pointer-events: none; /* Evita que el pseudo-elemento interfiera con los eventos del mouse */
    filter: blur(20px); /* Aplica un efecto de difuminado */
}

.mapa-container iframe {
    position: relative;
    width: 100%;
    height: 100%;
}