:root {
  --rojo: #FF0000;
  --azul: #16365F;
  --azul-claro: rgb(46,82,129);
  --rojo-oscuro: #ce0000;
}


#map {
  width: 100%;
  max-width: 700px;
  height: 500px;
  border: 2px solid #2e5281;
  margin-bottom: 30px;
}

.marker-red {
  background: red;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid white;
}

/* Contenedor general */
.contenedor-mapa-slider {
  display: flex;
  flex-direction: column; /* por defecto mobile: apilados */
  gap: 20px;
}

/* Mapa + slider a la par en desktop */
@media (min-width: 992px) {
  .contenedor-mapa-slider {
    flex-direction: row;
  }

  #map {
    flex: 0 0 85%;       /* ocupa el 85% */
    min-height: 500px;   /* altura mínima más generosa */
  }

  .swiper-nuestros {
    flex: 0 0 15%;       /* ocupa el 15% */
  }
  
  .seccion-mapa .swiper-slide-contenido .swiper-img {
    height: 210px !important;
    overflow: hidden;
}
.swiper-nuestros .seccion-mapa .swiper-button-next,.swiper-nuestros .seccion-mapa .swiper-button-prev {
    top: 42.7% !important;
}
}


#map {
  position: relative;
  width: 100%;
  height: 300px; /* en mobile, ajustá según necesites */
  z-index: 1;
   border: 2px solid transparent;
border-image: linear-gradient(90deg, var(--rojo), var(--azul), var(--rojo-oscuro), var(--azul)) 1;
border-radius: 10px;
}

/* Borde animado */
#map::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 8px; /* opcional, si querés esquinas redondeadas */

}