*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  background:#050403;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 35%, rgba(216,178,95,.10), transparent 35%),
    linear-gradient(180deg,#070605 0%,#020202 100%);
}

.map-shell{
  position:relative;
  width:min(100vw,1581px);
  margin:auto;
  overflow:hidden;
  background:#000;
}

.map-img{
  width:100%;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.hotspot,
.tour-hotspot{
  position:absolute;
  z-index:5;
  display:block;
  transform:translate(-50%,-50%);
  text-decoration:none;
  outline:none;
}

/* V2.1: área circular pequeña, centrada exactamente sobre cada número visual */
.hotspot{
  width:3.6%;
  aspect-ratio:1/1;
  border-radius:999px;
}

.tour-hotspot{
  left:11.8%;
  top:80.7%;
  width:21.0%;
  height:8.6%;
  border-radius:999px;
}

.hotspot::before,
.tour-hotspot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(238,196,91,.08);
  border:1px solid rgba(255,229,160,.26);
  box-shadow:0 0 22px rgba(238,196,91,.22);
  opacity:0;
  transform:scale(.74);
  transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease;
}

.tour-hotspot::before{
  inset:4%;
}

.hotspot::after,
.tour-hotspot::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  bottom:108%;
  transform:translateX(-50%) translateY(8px);
  min-width:180px;
  padding:9px 12px;
  border-radius:12px;
  background:rgba(10,9,7,.90);
  color:#fff6df;
  border:1px solid rgba(220,181,99,.58);
  text-align:center;
  font-size:13px;
  font-weight:850;
  letter-spacing:.03em;
  box-shadow:0 18px 42px rgba(0,0,0,.38);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .20s ease, transform .20s ease, visibility .20s ease;
}

.hotspot:hover::before,
.hotspot:focus-visible::before,
.tour-hotspot:hover::before,
.tour-hotspot:focus-visible::before{
  opacity:1;
  transform:scale(1);
  box-shadow:
    0 0 0 7px rgba(238,196,91,.12),
    0 0 32px rgba(255,229,160,.58),
    0 0 70px rgba(238,196,91,.30);
}

.hotspot:hover::after,
.hotspot:focus-visible::after,
.tour-hotspot:hover::after,
.tour-hotspot:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

@media(max-width:720px){
  .map-shell{
    width:100vw;
    min-width:980px;
  }

  .page{
    justify-content:flex-start;
    overflow-x:auto;
  }

  .hotspot{
    width:5.5%;
  }

  .tour-hotspot{
    width:26%;
    height:10%;
  }

  .hotspot::after,
  .tour-hotspot::after{
    min-width:132px;
    font-size:11px;
    padding:7px 9px;
  }
}