/* ==========================================================================
   Implant Dental · Página Sucursales (sucursales.css)
   Mapa ilustrado con pines + estados del formulario de cita por WhatsApp.
   Posiciones de los pines en % del mapa (punto exacto de la punta de la gota).
   ========================================================================== */

.suc-map {
  --pin: clamp(30px, 4.6vw, 42px);
  position: relative;
  width: 100%;
  aspect-ratio: 1078 / 962;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
}

.suc-map__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.suc-map__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 2px 8px;
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.85);
  border-top-left-radius: var(--r-sm);
  text-decoration: none;
}
.suc-map__credit:hover { color: var(--ink); text-decoration: underline; }
.suc-map__credit:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }

/* ---------- Pines ---------- */
.suc-pin {
  position: absolute;
  z-index: 2;
  width: var(--pin);
  height: calc(var(--pin) * 1.25);
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  transform: translate(-50%, -100%);   /* la punta de la gota cae en left/top */
  transition: transform 0.3s var(--ease), filter 0.3s;
  filter: drop-shadow(0 6px 8px rgba(15, 23, 32, 0.35));
}
.suc-pin:hover,
.suc-pin:focus-visible,
.suc-pin.is-selected { z-index: 4; transform: translate(-50%, -100%) scale(1.12); }
.suc-pin:active { transform: translate(-50%, -100%) scale(1.02); }
.suc-pin:focus-visible { outline: none; }
.suc-pin:focus-visible .suc-pin__drop { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 50%; }

/* Posiciones (NO inline): kennedy 41.77/85.70 · equilibrium 44.81/73.76 · ciudad-celeste 67.11/12.92 (aprox.) */
.suc-pin--kennedy { left: 41.77%; top: 85.70%; }
.suc-pin--equilibrium { left: 44.81%; top: 73.76%; }
.suc-pin--ciudad-celeste { left: 67.11%; top: 12.92%; }

.suc-pin__drop { position: absolute; inset: 0; display: block; }
.suc-pin__shape { fill: var(--accent); stroke: var(--white); stroke-width: 2; }
.suc-pin__tooth { fill: var(--white); }
.suc-pin.is-selected .suc-pin__shape,
.suc-pin:hover .suc-pin__shape { fill: var(--accent-ink); }

/* Pulso sutil en la base */
.suc-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 22px;
  height: 8px;
  margin-left: -11px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: sucPulse 2.4s ease-out infinite;
  pointer-events: none;
}
.suc-pin--equilibrium::before { animation-delay: 0.6s; }
.suc-pin--ciudad-celeste::before { animation-delay: 1.2s; }
@keyframes sucPulse {
  0% { opacity: 0.55; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.8); }
}

/* Etiqueta con el nombre: Kennedy a la izquierda, Equilibrium a la derecha (cercanos entre sí) */
.suc-pin__label {
  position: absolute;
  top: 6px;
  padding: 3px 9px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px -2px rgba(15, 23, 32, 0.35);
  filter: none;
}
@media (min-width: 640px) { .suc-pin__label { font-size: 0.82rem; padding: 4px 11px; } }
.suc-pin--kennedy .suc-pin__label,
.suc-pin--ciudad-celeste .suc-pin__label { right: calc(100% + 2px); }   /* Ciudad Celeste: cerca del borde derecho, etiqueta a la izquierda */
.suc-pin--equilibrium .suc-pin__label { left: calc(100% + 2px); }

/* Área táctil >= 44x44 centrada en el pin, sin mover el punto */
.suc-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* Tooltip (hover / foco) */
.suc-pin__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 180px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--white);
  background: var(--ink);
  border-radius: var(--r-sm);
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s var(--ease);
}
.suc-pin--ciudad-celeste .suc-pin__tip { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
.suc-pin--kennedy .suc-pin__tip { left: auto; right: 0; transform: translateY(4px); }
.suc-pin:hover .suc-pin__tip,
.suc-pin:focus-visible .suc-pin__tip { opacity: 1; transform: translate(-50%, 0); }
.suc-pin--kennedy:hover .suc-pin__tip,
.suc-pin--kennedy:focus-visible .suc-pin__tip { transform: translateY(0); }

.suc-map__hint { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); text-align: center; }

/* Tarjeta de sucursal resaltada tras pulsar un pin */
[id^="suc-"], .suc-card { scroll-margin-top: 96px; }
[id^="suc-"]:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
.is-flash { animation: sucFlash 1.6s var(--ease); }
@keyframes sucFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25% { box-shadow: 0 0 0 6px var(--accent-line); }
}

/* ---------- Estados del formulario de cita ---------- */
.form-status {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--ink);
}
.form-status[hidden] { display: none; }
.form-status p { margin: 0; }
.form-status p + p { margin-top: var(--s-2); }
.form-status--err {
  background: color-mix(in srgb, var(--danger) 8%, var(--white));
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.form-status__link { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form-status--err .form-status__link { color: var(--danger); }
.form-status__link:hover { text-decoration-thickness: 2px; }
.form-status__link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; }

[data-wa-booking] [type="submit"].is-loading { opacity: 0.7; cursor: progress; }
[data-wa-booking] [type="submit"].is-loading span:first-child::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.6em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sucSpin 0.8s linear infinite;
}
@keyframes sucSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .suc-pin::before { animation: none; display: none; }
  .suc-pin, .suc-pin__tip { transition: none; }
  .is-flash { animation: none; box-shadow: 0 0 0 4px var(--accent-line); }
  [data-wa-booking] [type="submit"].is-loading span:first-child::after { animation: none; }
}