/* ============================================================
   RELEVANTE.IA — P04 · MAPA DE ESPAÑA (dinámico)
   ============================================================ */

.mapa { text-align: center; }
.mapa__titular { margin-bottom: 64px; }
.mapa__titular span { display: block; }

.mapa { perspective: 1100px; }
.mapa__lienzo {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  aspect-ratio: 720 / 545;
  will-change: transform;
}
.mapa__lienzo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mapa__pops { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Pregunta emergente ---------- */
.mapa__pop {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.mapa__pop-punto {
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  margin-inline: auto;
  transform: scale(0);
  position: relative;
}
/* onda expansiva al nacer el punto */
.mapa__pop-punto::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
}
.mapa__pop.esta-viva .mapa__pop-punto { animation: pop-punto 500ms var(--ease-out) forwards; }
.mapa__pop.esta-viva .mapa__pop-punto::after { animation: pop-onda 700ms ease-out 120ms; }
@keyframes pop-punto {
  0% { transform: scale(0); }
  60% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
@keyframes pop-onda {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.4); }
}
.mapa__pop-caja {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  background: var(--ink);
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.35;
  padding: 8px 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 350ms ease, transform 350ms var(--ease-out);
}
.mapa__pop-caja::after {           /* tallo que une caja y punto */
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  width: 1px; height: 10px;
  background: var(--ink);
}
.mapa__pop.esta-viva .mapa__pop-caja { animation: pop-caja 520ms cubic-bezier(0.34, 1.4, 0.4, 1) 140ms forwards; }
@keyframes pop-caja {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.82); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.mapa__pop.se-va .mapa__pop-punto { transform: scale(0); }
.mapa__pop.se-va .mapa__pop-caja { opacity: 0; transform: translate(-50%, -6px); }

/* variantes de apertura para no salirse del lienzo */
.mapa__pop--derecha .mapa__pop-caja { right: auto; left: 12px; transform: translate(0, 6px); }
.mapa__pop--derecha.esta-viva .mapa__pop-caja { animation-name: pop-caja-lado; }
@keyframes pop-caja-lado {
  0% { opacity: 0; transform: translate(0, 12px) scale(0.82); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.mapa__pop--derecha .mapa__pop-caja::after { left: 8px; }
.mapa__pop--izquierda .mapa__pop-caja { left: auto; right: 12px; transform: translate(0, 6px); }
.mapa__pop--izquierda.esta-viva .mapa__pop-caja { animation-name: pop-caja-lado; }
.mapa__pop--izquierda .mapa__pop-caja::after { left: auto; right: 8px; }
.mapa__pop--debajo .mapa__pop-caja { bottom: auto; top: calc(100% + 10px); }
.mapa__pop--debajo .mapa__pop-caja::after { top: auto; bottom: 100%; }

/* ---------- Cierre en bloque lima ---------- */
.mapa__cierre {
  display: inline-block;
  margin-top: 44px;
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 18px;
}

@media (max-width: 767px) {
  .mapa__titular { margin-bottom: 40px; }
  .mapa__pop-caja { font-size: 11px; padding: 6px 9px; }
  .mapa__cierre { margin-top: 28px; font-size: 13px; }
}