/* ===== ATLAS Mapa (Red Médica) ===== */
.atlas-mapa { --blue: #669BC9; --blue-deep: #0058A5; color: #fff; }
.atlas-mapa__card {
  display: flex; align-items: center; gap: 30px;
  background: rgba(125,125,125,.06);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 40px;
  padding: 56px 50px;
}

/* Orden invertido: mapa a la izquierda, texto a la derecha */
.atlas-mapa--reverse .atlas-mapa__card { flex-direction: row-reverse; }

/* Panel izquierdo */
.atlas-mapa__left { flex: 0 0 38%; max-width: 460px; }
.atlas-mapa__title {
  font-size: clamp(30px,3.4vw,48px); font-weight: 600; letter-spacing: -1.5px;
  line-height: 1.1; color: var(--blue); margin: 0 0 44px;
}
.atlas-mapa__field { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); }
.atlas-mapa__field:last-of-type { border-bottom: 1px solid rgba(255,255,255,.14); }
.atlas-mapa__label { display: block; font-size: 16px; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.atlas-mapa__value { display: block; font-size: 26px; font-weight: 600; color: #fff; letter-spacing: -.5px; line-height: 1.2; }
/* Altura fija: reservar espacio para 2 renglones para que el mapa no se mueva */
.atlas-mapa__value--title { min-height: 63px; }
.atlas-mapa__value--ciudad { min-height: 31px; }
.atlas-mapa__link { display: block; font-size: 18px; font-weight: 500; color: #fff; text-decoration: none; word-break: break-all; line-height: 1.4; min-height: 50px; transition: color .25s ease; }
.atlas-mapa__link:hover { color: var(--blue); }

/* Mapa */
.atlas-mapa__map { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 16px; }
/* Con zoom activo, el arrastre mueve el MAPA (no hace scroll de la página).
   touch-action: none evita que el navegador se quede el gesto en móvil. */
.atlas-mapa__map.is-zoomed { cursor: grab; touch-action: none; }
.atlas-mapa__map.is-panning { cursor: grabbing; }
/* Escenario que se escala/desplaza (imagen + puntos juntos) */
.atlas-mapa__stage {
  position: relative; width: 100%;
  transform-origin: 0 0;
  transform: translate(0, 0) scale(1);
  will-change: transform;
  --s: 1;
}
.atlas-mapa__stage.has-anim { transition: transform .25s ease; }
.atlas-mapa__img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* Botones de zoom */
.atlas-mapa__zoom {
  position: absolute; top: 12px; right: 12px; z-index: 8;
  display: flex; flex-direction: column; gap: 8px;
}
.atlas-mapa__zbtn {
  width: 38px !important; height: 38px !important; min-width: 38px;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(8,12,26,.78) !important; border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 10px !important; padding: 0 !important;
  -webkit-appearance: none !important; appearance: none !important;
  transition: background .2s ease;
}
.atlas-mapa__zbtn:hover { background: rgba(30,45,80,.92) !important; }
.atlas-mapa__zbtn--reset { font-size: 17px; }

/* Puntos: círculos perfectos (neutraliza el reset de Hello que los hacía cuadrados/ovalados) */
.atlas-mapa__dot {
  position: absolute; transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1)));
  width: 16px !important; height: 16px !important;
  min-width: 16px; aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  background: var(--blue-deep) !important; /* centro sólido azul oscuro */
  border: 0 !important; padding: 0 !important; cursor: pointer;
  display: block !important; box-sizing: border-box;
  -webkit-appearance: none !important; appearance: none !important;
  box-shadow: none !important; outline: 0 !important;
  transition: width .3s ease, height .3s ease;
  z-index: 2;
}
/* Glow degradado suave alrededor (radial, se desvanece) */
.atlas-mapa__dot::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(102,155,201,.5) 0%, rgba(102,155,201,0) 66%);
  transition: width .35s ease, height .35s ease, background .35s ease;
}
.atlas-mapa__dot:hover, .atlas-mapa__dot.is-active { width: 20px !important; height: 20px !important; z-index: 5; transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1))); }
.atlas-mapa__dot:hover::before, .atlas-mapa__dot.is-active::before {
  width: 96px; height: 96px;
  background: radial-gradient(circle, rgba(183,214,241,.8) 0%, rgba(102,155,201,.35) 30%, rgba(102,155,201,0) 68%);
}
.atlas-mapa__pulse { display: none; }

/* Tooltip por-punto: ya NO se usa (se recortaba con el overflow del mapa).
   Lo reemplaza un tooltip único posicionado por JS (.atlas-mapa__tip). */
.atlas-mapa__tooltip { display: none !important; }

/* Tooltip único: el JS lo coloca (left/top) y lo clampea dentro del mapa */
.atlas-mapa__tip {
  position: absolute; top: 0; left: 0; z-index: 7; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px;
  max-width: min(280px, calc(100% - 16px));
  background: rgba(8,12,26,.92); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px 18px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.atlas-mapa__tip.is-shown { opacity: 1; transform: translateY(0); }
.atlas-mapa__t-label { font-size: 11px; color: rgba(255,255,255,.5); }
.atlas-mapa__t-name { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.25; }

/* Foto de la fachada (panel de datos, se actualiza al pasar el cursor sobre un punto).
   Altura fija reservada: al aparecer/cambiar NO mueve el mapa (evita el parpadeo). */
.atlas-mapa__photo {
  height: 200px; border-radius: 16px; overflow: hidden; margin: 0 0 28px;
  background: rgba(255,255,255,.04);
  transition: background .3s ease;
}
.atlas-mapa__photo-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease;
}
.atlas-mapa__photo.is-visible .atlas-mapa__photo-img { opacity: 1; }
/* Sin foto: el espacio se conserva (si colapsara, toda la tarjeta se recentra y
   el mapa salta ~114px) pero queda TOTALMENTE invisible: sin recuadro ni fondo. */
.atlas-mapa__photo:not(.is-visible) { background: transparent; }

@media (max-width: 900px) {
  /* En móvil: el mapa arriba, el panel abajo (aplica también con orden invertido) */
  .atlas-mapa__card,
  .atlas-mapa--reverse .atlas-mapa__card { flex-direction: column-reverse; align-items: stretch; gap: 30px; padding: 36px 26px; border-radius: 28px; }
  .atlas-mapa__left { flex: none; max-width: none; }
  .atlas-mapa__title { margin-bottom: 30px; }
}