/* ============================================================
   MAPA
   Mismo sistema visual: Cormorant Garamond / Cormorant SC,
   negro cálido + dorado (lot-ox) reservado para líneas, tipografía y detalle fino.
   ============================================================ */

.mapa {
  --mp-font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --mp-font-caps: 'Cormorant SC', 'Cormorant Garamond', serif;

  --lot-ox-900: #241C0D;
  --lot-ox-700: #6B4F14;
  --lot-ox-500: #B3841F;
  --lot-ox-400: #D9A62E;
  --lot-ox-300: #E6C158;
  --lot-ox-200: #F0D689;
  --lot-ox-100: #FBF0D6;

  --mp-black: #100D06;
  --mp-black-2: #0A0703;

  --mp-platino-500: var(--lot-ox-400);
  --mp-platino-400: var(--lot-ox-200);

  --mp-ink: var(--lot-ox-100);
  --mp-ink-muted: rgba(251, 240, 214, 0.6);
  --mp-ink-faint: rgba(251, 240, 214, 0.34);

  background: var(--mp-black);
  padding: 100px 24px;
  font-family: var(--mp-font-display);
}

.mp-root {
  max-width: 1140px;
  margin: 0 auto;
}

/* ── Encabezado ── */
.mp-heading {
  text-align: center;
  margin-bottom: 44px;
}
.mp-heading-eyebrow {
  display: inline-block;
  font-family: var(--mp-font-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mp-platino-400);
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 12px;
}
.mp-heading-eyebrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--mp-platino-400);
}
.mp-heading-title {
  font-family: var(--mp-font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--mp-ink);
}
.mp-heading-title em { color: var(--mp-platino-400); font-style: italic; }

/* ── Marco del mapa ── */
.mp-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(217, 166, 46, 0.32);
  height: 460px;
}

.mp-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  /* Tiñe el mapa de Google hacia un tono cálido/dorado en vez del azul original.
     invert + hue-rotate desplaza la paleta invertida del mapa; sepia + saturate
     refuerzan el matiz ámbar. Ajusta hue-rotate si tu navegador rinde el mapa
     base con otros colores. */
  filter: grayscale(0.5) invert(90%) sepia(35%) hue-rotate(-15deg) saturate(1.5) contrast(88%) brightness(0.9);
}

.mp-overlay-top,
.mp-overlay-bot {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}
.mp-overlay-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(10,7,3,0.85), transparent);
}
.mp-overlay-bot {
  bottom: 0;
  background: linear-gradient(to top, rgba(10,7,3,0.85), transparent);
}

/* Insignia flotante */
.mp-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10,7,3,0.82);
  border: 1px solid rgba(217, 166, 46, 0.42);
  border-radius: 100px;
  padding: 10px 18px 10px 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mp-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mp-platino-400);
  box-shadow: 0 0 0 4px rgba(217, 166, 46, 0.25);
  flex-shrink: 0;
  animation: mp-pulse 2s infinite;
}
@keyframes mp-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 166, 46, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(217, 166, 46, 0.1); }
}
.mp-badge-text { display: flex; flex-direction: column; gap: 2px; }
.mp-badge-name {
  font-family: var(--mp-font-caps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mp-ink);
}
.mp-badge-addr {
  font-family: var(--mp-font-display);
  font-size: 0.8rem;
  color: var(--mp-ink-faint);
}

/* Acciones */
.mp-actions {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 3px;
  background: rgba(10,7,3,0.82);
  color: var(--mp-ink);
  font-family: var(--mp-font-caps);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 1px solid var(--mp-platino-400);
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: box-shadow 0.25s, color 0.25s;
}
.mp-btn svg { width: 16px; height: 16px; color: var(--mp-platino-400); }
.mp-btn:hover { box-shadow: 0 0 18px rgba(217, 166, 46, 0.4); }

.mp-btn--ghost {
  border-color: rgba(217, 166, 46, 0.42);
  color: var(--mp-ink-muted);
}
.mp-btn--ghost svg { color: var(--mp-ink-muted); }
.mp-btn--ghost:hover {
  border-color: var(--mp-platino-400);
  color: var(--mp-ink);
}
.mp-btn--ghost:hover svg { color: var(--mp-platino-400); }

/* ── Barra inferior de datos ── */
.mp-bar {
  display: flex;
  align-items: center;
  margin-top: 2px;
  border: 1px solid rgba(217, 166, 46, 0.28);
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(26,20,8,0.9), var(--mp-black-2));
  padding: 24px 32px;
}

.mp-bar-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.mp-bar-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1px solid rgba(217, 166, 46, 0.5);
  color: var(--mp-platino-400);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-bar-icon svg { width: 18px; height: 18px; }

.mp-bar-label {
  font-family: var(--mp-font-caps);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--mp-ink-faint);
  margin-bottom: 4px;
}
.mp-bar-value {
  font-family: var(--mp-font-display);
  font-size: 0.98rem;
  color: var(--mp-ink);
}

.mp-bar-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(217, 166, 46, 0.25);
  margin: 0 28px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .mp-bar { flex-direction: column; align-items: flex-start; gap: 20px; }
  .mp-bar-divider { display: none; }
}

@media (max-width: 640px) {
  .mapa { padding: 72px 16px; }
  .mp-frame { height: 340px; }
  .mp-actions { left: 16px; right: 16px; bottom: 16px; }
  .mp-btn { flex: 1; justify-content: center; }
  .mp-badge { left: 16px; right: 16px; top: 16px; }
  .mp-bar { padding: 20px; }
}