/* Puntos numerados sobre el visor 360 (vagon NYC, 3 nov) */
.hslayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hs { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.55);
  color: #fff; font: 700 12px/1 var(--mono); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  opacity: 0; pointer-events: none; transition: opacity .25s, background .2s, border-color .2s, transform .2s; backdrop-filter: blur(4px); }
.hs.on { opacity: 1; pointer-events: auto; }
.hs::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; animation: hsping 2.4s ease-out infinite; pointer-events: none; }
.hs em { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; font: 600 11px/1 var(--mono); font-style: normal;
  letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.8); padding: 7px 9px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s; }
@media (hover: hover) {
  .hs:hover { background: var(--acc); border-color: var(--acc); transform: scale(1.12); }
  .hs:hover em { opacity: 1; }
}
.hs:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@keyframes hsping { 0% { transform: scale(.8); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
/* movil (Hugo, 3 nov): circulos de 18 px con una zona de toque mayor (el aro), y el aviso pequeno, que se va al primer toque */
@media (max-width: 760px) {
  .hs { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 1.5px; font-size: 8.5px; background: rgba(0,0,0,.28); backdrop-filter: none; }   /* se ve la ventanilla debajo (Hugo, 3 nov) */
  .hs::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
  .hs::after { inset: -5px; }
  .ptop .turn .draghint { bottom: 8px; padding: 5px 9px; font-size: 9px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .hs::after { animation: none; } }