/* Lupo Rooms — mapa de Europa con pines (includes/europe_map.php).
 * El contenedor guarda la proporción del SVG (623×537). En modo país (.lem--focus)
 * la capa interior se amplía con --z y se desplaza con --tx/--ty; cada pin se
 * contra-escala (1/--z) para que los puntos y las etiquetas no crezcan con el zoom. */

.lem { position:relative; width:100%; aspect-ratio:623/537; overflow:hidden; isolation:isolate; }
.lem-inner { position:absolute; inset:0; transform-origin:0 0;
  transform:translate(var(--tx,0%), var(--ty,0%)) scale(var(--z,1));
  transition:transform 1.4s cubic-bezier(.65,0,.35,1); }
.lem-img { position:absolute; inset:0; width:100%; height:100%; display:block; }
.lem:not(.lem--focus) .lem-img {
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
          mask-image:radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.lem--focus { border-radius:24px; background:#f6efe3; }

.lem-pin { position:absolute; width:0; height:0; z-index:1; transform:scale(calc(1 / var(--z,1))); transform-origin:0 0; text-decoration:none; }
.lem-pin::before { content:""; position:absolute; left:-15px; top:-15px; width:30px; height:30px; border-radius:50%; } /* zona táctil */
.lem-dot { position:absolute; left:-6px; top:-6px; width:12px; height:12px; box-sizing:border-box; border-radius:50%;
  background:#b81f22; border:2.5px solid #fff; box-shadow:0 3px 8px rgba(120,20,20,.45);
  transition:transform .25s cubic-bezier(.22,1,.36,1), opacity .5s, background .2s; }
.lem-dot::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(184,31,34,.42);
  animation:lem-pulse 2.8s ease-out infinite; animation-delay:calc(var(--i) * -.29s); }
@keyframes lem-pulse { 0% { transform:scale(.4); opacity:1; } 80%,100% { transform:scale(1.7); opacity:0; } }
.lem-tip { position:absolute; left:0; bottom:13px; transform:translate(-50%, 6px); white-space:nowrap;
  background:#070a12; color:#fff; border-radius:10px; padding:7px 11px; font-size:12.5px; line-height:1.25;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s cubic-bezier(.22,1,.36,1); }
.lem-tip b { display:block; font-weight:800; font-size:13.5px; }
.lem-tip span { display:block; opacity:.8; font-weight:600; }
.lem-pin--l .lem-tip { transform:translate(-88%, 6px); }
.lem-pin--r .lem-tip { transform:translate(-12%, 6px); }
.lem-pin:hover, .lem-pin:focus-visible, .lem-pin.is-hot { z-index:5; outline:none; }
.lem-pin:hover .lem-dot, .lem-pin:focus-visible .lem-dot, .lem-pin.is-hot .lem-dot { transform:scale(1.5); background:#781c1c; }
.lem-pin:hover .lem-tip, .lem-pin:focus-visible .lem-tip, .lem-pin.is-hot .lem-tip { opacity:1; transform:translate(-50%, 0); }
.lem-pin--l:hover .lem-tip, .lem-pin--l.is-hot .lem-tip, .lem-pin--l:focus-visible .lem-tip { transform:translate(-88%, 0); }
.lem-pin--r:hover .lem-tip, .lem-pin--r.is-hot .lem-tip, .lem-pin--r:focus-visible .lem-tip { transform:translate(-12%, 0); }
.lem-pin.is-dim .lem-dot { opacity:.28; background:#8a7f76; }
.lem-pin.is-dim .lem-dot::after { display:none; }
[data-map-sync].has-co .lem-pin:not(.is-hot):not(.is-co) .lem-dot { opacity:.3; }
.lem-pin.is-co .lem-dot { transform:scale(1.3); }

/* Al aparecer: en modo país Europa se acerca al país; los pines caen uno a uno. */
html.lj-js .lem--focus:not(.rv-in) .lem-inner { transform:none; }
html.lj-js .lem:not(.rv-in) .lem-dot { opacity:0; transform:translateY(-20px); }
html.lj-js .lem.rv-in .lem-dot { transition-delay:calc(.3s + var(--i) * 35ms); }
html.lj-js .lem--focus.rv-in .lem-dot { transition-delay:calc(1.2s + var(--i) * 35ms); }
html.lj-js .lem.rv-in .lem-pin:hover .lem-dot, html.lj-js .lem.rv-in .lem-pin.is-hot .lem-dot { transition-delay:0s; }
/* El mapa NO se desplaza al entrar (data-rv): solo aparece. */
html.lj-js .lem[data-rv] { transform:none; }

@media (max-width:480px) {
  .lem-dot { width:11px; height:11px; left:-5.5px; top:-5.5px; }
  .lem-tip { font-size:11.5px; padding:6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .lem-inner { transition:none; }
  .lem-dot::after { display:none; }
}