/* Arraste horizontal direto, sem trilho de scrollbar visível. */
.panorama-scroll{cursor:grab;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-inline:contain}
.panorama-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.panorama-scroll.is-dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}

/* A foto sempre ocupa toda a altura entre o topo e o menu dos setores; a largura
   segue a proporção da foto. Se passar da largura da tela, arrasta-se para os lados. */
.panorama-scene .panorama-scroll,.reveal-ready .panorama-reveal .panorama-scroll{container-type:size}
.panorama-scene .panorama-stage,.reveal-ready .panorama-reveal .panorama-stage{width:max(100cqw,calc(100cqh * 2.069))}
.panorama-canvas{aspect-ratio:1804/872}
/* Aviso "Deslize…" só quando há o que arrastar (classe definida em app.js). */
.panorama-reveal:not(.can-pan) .panorama-swipe{display:none}
.panorama-reveal.can-pan .panorama-swipe{display:block;position:absolute;left:50%;top:auto;bottom:18px;transform:translateX(-50%);z-index:8;width:max-content;max-width:calc(100% - 32px);margin:0;padding:9px 14px;border-radius:999px;background:rgba(5,42,36,.88);color:#fff;font-size:.76rem;font-weight:800;pointer-events:none}

/* Marcadores dos setores presos à foto.
   --px/--py: ponto de início do setor, em % da foto (vale para qualquer tela).
   --line: comprimento da linha até a caixa, em % da altura da foto (cqh).
   --pin-x: onde a linha sai da caixa, em % da largura da caixa. */
.panorama-canvas{container-type:size}
.panorama-canvas .sector-marker{
  left:var(--px);top:auto;right:auto;
  /* --shift (px, definido em app.js): desce as caixas quando o topo da foto é cortado. */
  --eff-line:calc(var(--line) - var(--shift,0px));
  bottom:calc(100% - var(--py) + var(--eff-line));
  translate:calc(var(--pin-x) * -1) 0;
  width:clamp(220px,21.7cqw,340px);
}
.panorama-canvas .sector-marker:after{height:var(--eff-line)}
.panorama-canvas .sector-marker:before{top:calc(100% + var(--eff-line) - 5px)}
.panorama-canvas .marker-cinema{--px:4.64%;--py:79.3%;--line:48.3cqh;--pin-x:18%}
.panorama-canvas .marker-paraiso{--px:36.35%;--py:80.9%;--line:22.9cqh;--pin-x:94%}
.panorama-canvas .marker-slab{--px:42.2%;--py:82.1%;--line:24.1cqh;--pin-x:7%}
.panorama-canvas .marker-anarquista{--px:88.8%;--py:68.6%;--line:28.6cqh;--pin-x:62%}

/* Caixinhas dos setores clicáveis: abrem a página do setor. */
.sector-marker[data-sector]{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;-webkit-tap-highlight-color:transparent}
.sector-marker[data-sector]:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(5,42,36,.26)}
.sector-marker[data-sector]:active{transform:scale(.98)}
.sector-marker[data-sector]:focus-visible{outline:3px solid var(--sector);outline-offset:3px}
.panorama-scroll.is-dragging .sector-marker{cursor:grabbing;transform:none}

@media(max-width:900px) and (min-width:761px){
  .panorama-stage{width:1100px}
  .panorama-swipe{display:block;position:absolute;left:50%;top:clamp(28px,12vh,150px);bottom:auto;transform:translateX(-50%);z-index:8;width:max-content;margin:0;padding:9px 14px;border-radius:999px;background:rgba(5,42,36,.88);color:#fff;font-size:.76rem;font-weight:800}
}

/* Computador: mapa 12% mais largo que a tela, com arraste lateral (como no croqui). Mais que isso
   corta céu demais em telas largas e as caixinhas descem sobre o paredão. */
@media(min-width:761px){
  .panorama-scene .panorama-stage,.reveal-ready .panorama-reveal .panorama-stage{width:max(112cqw,calc(100cqh * 2.069))}
  /* Sem barra de rolagem visível: o mapa anda arrastando (mouse ou dedo) ou pelos botões dos setores. */
}
.panorama-reveal .panorama-swipe{transition:opacity .4s ease}
.panorama-reveal.was-panned .panorama-swipe{opacity:0}

/* Mapa dos setores: fixo enquanto a capa sobe (efeito de revelar); depois de revelado, rola junto
   com a página e é empurrado pela Busca rápida, em vez de ser coberto por ela. */
/* width:100% (e não 100vw): 100vw inclui a barra de rolagem vertical e gerava rolagem horizontal na página. */
.reveal-ready .panorama-reveal.is-docked .panorama-scene{position:absolute;top:0;left:0;width:100%;opacity:1;visibility:visible;pointer-events:auto}