/* =====================================================================
   MAPA DEL FOOTER (ver mapa.js)
   ===================================================================== */

.mapa-cmp {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 0; /* evita que el mapa quede por encima del header fijo */
  background: #1a2a44;
}

/* Si Leaflet no carga, se muestra solo un enlace */
.mapa-cmp--sin-mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 20px;
}
.mapa-cmp--sin-mapa a { color: #ccc; }
.mapa-cmp--sin-mapa a:hover { color: #fff; }

/* Marcador con el logo */
.mapa-cmp-marcador { background: none; border: none; }

.mapa-cmp-pin {
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #003a87;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mapaPin 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.mapa-cmp-pin img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  transform: rotate(45deg);
}

@keyframes mapaPin {
  from { opacity: 0; transform: translateY(-20px) rotate(-45deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-45deg); }
}

/* Etiqueta con el nombre debajo del marcador */
.mapa-cmp-etiqueta {
  background: #003a87;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  padding: 3px 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.mapa-cmp-etiqueta::before { border-bottom-color: #003a87; }

/* Cartel al tocar el marcador */
.mapa-cmp-popup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #333;
}
.mapa-cmp-popup strong { color: #003a87; font-size: 14px; }
.mapa-cmp-popup a { color: #2a7cc7; text-decoration: none; }
.mapa-cmp-popup i { margin-right: 4px; }

.mapa-cmp-popup .mapa-cmp-btn,
.mapa-cmp-control a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #003a87;
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.mapa-cmp-popup .mapa-cmp-btn { margin-top: 6px; color: #fff; }

.mapa-cmp-popup .mapa-cmp-btn:hover,
.mapa-cmp-control a:hover {
  background: #2a7cc7;
  color: #fff;
  transform: translateY(-1px);
}

.mapa-cmp--popup-abierto .mapa-cmp-control { opacity: 0; pointer-events: none; }
.mapa-cmp-control { transition: opacity 0.2s; }

.mapa-cmp-control a { box-shadow: 0 3px 10px rgba(0,0,0,0.25); font-family: 'Segoe UI', sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .mapa-cmp-pin { animation: none; }
}