/* hotspot-layer — retícula cartográfica sobre el mapa del hero.
   Acento heredado: #ff6b2c es el `accent` que la sección `world` ya declara.
   No introduce ningún color nuevo al sistema. */

.mv-hotspots{position:absolute;inset:0;z-index:4;pointer-events:none;will-change:transform;opacity:0;transition:opacity .4s ease}
.mv-hotspots.is-ready{opacity:1}
.sw-scene.has-atlas{--mv-atlas-x:74%;--mv-atlas-y:44%}
.sw-scene.has-atlas::before{content:"";position:absolute;inset:-8%;z-index:2;pointer-events:none;opacity:.72;mix-blend-mode:screen;background:radial-gradient(circle at var(--mv-atlas-x) var(--mv-atlas-y),rgba(73,185,177,.17) 0,rgba(73,185,177,.065) 13%,rgba(73,185,177,0) 34%);transition:background-position .18s linear,opacity .35s ease}
/* El propio enlace ES el área táctil: 44x44 reales (criterio 2). Si se dejan los
   hijos en absoluto sin dar tamaño al <a>, el ancla colapsa a 0x0 — deja de ser
   pulsable y el anillo de foco no se ve. */
.mv-hs{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%) scale(var(--mv-inv,1));pointer-events:auto;text-decoration:none;display:block}
.mv-hs__hit{display:none}

.mv-hs__retic{position:absolute;left:50%;top:50%;width:82px;height:82px;transform:translate(-50%,-50%);display:block}
.mv-hs__x,.mv-hs__y{position:absolute;background:#ff6b2c;display:block}
.mv-hs__x{left:0;right:0;top:50%;height:1px;transform:scaleX(.34);transition:transform .55s cubic-bezier(.32,.72,0,1)}
.mv-hs__y{top:0;bottom:0;left:50%;width:1px;transform:scaleY(.34);transition:transform .55s cubic-bezier(.32,.72,0,1)}
.mv-hs__c{position:absolute;width:11px;height:11px;border:1px solid #ff6b2c;opacity:.9;display:block;transition:transform .55s cubic-bezier(.32,.72,0,1)}
.mv-hs__c1{top:0;left:0;border-right:0;border-bottom:0;transform-origin:0 0}
.mv-hs__c2{top:0;right:0;border-left:0;border-bottom:0;transform-origin:100% 0}
.mv-hs__c3{bottom:0;left:0;border-right:0;border-top:0;transform-origin:0 100%}
.mv-hs__c4{bottom:0;right:0;border-left:0;border-top:0;transform-origin:100% 100%}

/* left = 46px desde el CENTRO del punto + los 22px de media caja del ancla */
.mv-hs__lead{position:absolute;left:68px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap}
.mv-hs__lead i{width:34px;height:1px;background:#ff6b2c;transform-origin:0 50%;transform:scaleX(0);transition:transform .5s cubic-bezier(.32,.72,0,1) .1s;display:block}
.mv-hs__lead em{font-style:normal;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;font-weight:600;color:#fff;
  background:rgba(11,10,9,.55);padding:5px 9px;border-radius:3px;
  opacity:0;transform:translateX(-6px);transition:opacity .45s cubic-bezier(.32,.72,0,1) .22s,transform .45s cubic-bezier(.32,.72,0,1) .22s}
@supports (backdrop-filter:blur(3px)){.mv-hs__lead em{backdrop-filter:blur(3px)}}
.mv-hs.is-left .mv-hs__lead{left:auto;right:68px;flex-direction:row-reverse}
.mv-hs.is-left .mv-hs__lead i{transform-origin:100% 50%}

/* Enfoque: puntero, teclado, y siempre en táctil (no hay hover que esperar) */
.mv-hs:hover .mv-hs__x,.mv-hs:focus-visible .mv-hs__x,.is-touch .mv-hs__x{transform:scaleX(1)}
.mv-hs:hover .mv-hs__y,.mv-hs:focus-visible .mv-hs__y,.is-touch .mv-hs__y{transform:scaleY(1)}
.mv-hs:hover .mv-hs__c,.mv-hs:focus-visible .mv-hs__c,.is-touch .mv-hs__c{transform:scale(1.36)}
.mv-hs:hover .mv-hs__lead i,.mv-hs:focus-visible .mv-hs__lead i,.is-touch .mv-hs__lead i{transform:scaleX(1)}
.mv-hs:hover .mv-hs__lead em,.mv-hs:focus-visible .mv-hs__lead em,.is-touch .mv-hs__lead em{opacity:1;transform:none}

.mv-hs:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}

/* Caída dentro del pack: la escena escala hacia el punto pulsado. Sin panel. */
.sw-scene.mv-diving .sw-scene__still,.sw-scene.mv-diving .mv-hotspots{
  transform-origin:var(--mv-dive-origin,50% 50%)!important;
  transform:scale(2.6)!important;
  transition:transform .42s cubic-bezier(.32,.72,0,1),opacity .42s ease
}
.sw-scene.mv-diving .mv-hotspots{opacity:0}
.mv-hotspots.is-diving .mv-hs{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .mv-hs__x,.mv-hs__y,.mv-hs__c,.mv-hs__lead i,.mv-hs__lead em{transition:none}
  .mv-hs__x{transform:scaleX(1)}
  .mv-hs__y{transform:scaleY(1)}
  .mv-hs__lead i{transform:scaleX(1)}
  .mv-hs__lead em{opacity:1;transform:none}
  .sw-scene.mv-diving .sw-scene__still,.sw-scene.mv-diving .mv-hotspots{transform:none!important;transition:none}
}

@media (max-width:860px){
  .mv-hs__retic{width:62px;height:62px}
  .mv-hs__lead{left:56px}
  .mv-hs.is-left .mv-hs__lead{left:auto;right:56px}
  .mv-hs__lead em{font-size:10px;letter-spacing:.12em;padding:6px 8px;opacity:1;transform:none}
  .mv-hs__lead i{transform:scaleX(1)}
  .sw-scene.has-atlas::before{display:none}
}