/* Tour 360 - visual do tour publicado */
:root{
  --acc:#2f6bff;
  --bg:#0b0d12;
  --txt:#fff;
  --sombra:0 6px 24px rgba(0,0,0,.35);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;color:var(--txt);overscroll-behavior:none}
#pano{position:fixed;inset:0}

/* pannellum: tira a moldura padrao */
.pnlm-container{background:var(--bg)!important;cursor:grab}
.pnlm-container:active{cursor:grabbing}
.pnlm-load-box{background:transparent!important;border:0!important;box-shadow:none!important}
.pnlm-lbox{background:transparent!important}
.pnlm-panorama-info,.pnlm-orientation-button,.pnlm-fullscreen-toggle-button{display:none!important}
.pnlm-controls-container{display:none!important}
.pnlm-hotspot-base{z-index:5}

/* ---------- capa ---------- */
#capa{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:24px;text-align:center;transition:opacity .5s ease,visibility .5s}
#capa.sai{opacity:0;visibility:hidden;pointer-events:none}
.capa-bg{position:absolute;inset:0;background:var(--bg) center/cover no-repeat;
  filter:brightness(.5) saturate(1.05);transform:scale(1.06)}
.capa-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,transparent 20%,rgba(0,0,0,.65) 100%)}
.capa-in{position:relative;max-width:560px;animation:sobe .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#capa-logo{max-width:180px;max-height:96px;object-fit:contain;margin:0 0 22px;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.5))}
#capa-titulo{margin:0;font-size:clamp(28px,7vw,46px);line-height:1.1;font-weight:700;letter-spacing:-.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.5)}
#capa-sub{margin:12px 0 0;opacity:.82;font-size:clamp(14px,3.6vw,17px);line-height:1.5}
#capa-btn{margin-top:30px;display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;border:0;border-radius:999px;background:var(--acc);color:#fff;
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;box-shadow:var(--sombra);
  transition:transform .18s,filter .18s}
#capa-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
#capa-btn:active{transform:translateY(0)}
.capa-dica{margin:18px 0 0;font-size:12.5px;opacity:.55}

/* ---------- topo ---------- */
#topo{position:fixed;z-index:20;top:calc(var(--safe-t) + 12px);left:12px;right:12px;
  display:flex;align-items:center;gap:12px;pointer-events:none;
  animation:desce .5s .1s ease both}
@keyframes desce{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
#topo-logo{height:38px;max-width:120px;object-fit:contain;pointer-events:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.topo-txt{display:flex;flex-direction:column;min-width:0;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.topo-txt strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo-txt span{font-size:12.5px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo-btns{margin-left:auto;display:flex;gap:8px;pointer-events:auto}
.topo-btns button{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;
  background:rgba(16,18,24,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;cursor:pointer;transition:background .18s}
.topo-btns button:hover{background:rgba(16,18,24,.8)}
.topo-btns button.on{background:var(--acc)}

/* ---------- carrossel de cenas ---------- */
#cenas{position:fixed;z-index:20;left:0;right:0;bottom:0;
  padding:34px 12px calc(12px + var(--safe-b));
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .32s}
#cenas::-webkit-scrollbar{display:none}
#cenas.oculto{transform:translateY(115%);opacity:0;pointer-events:none}
#cenas button{flex:0 0 auto;width:104px;padding:0;border:2px solid transparent;border-radius:12px;
  background:#1a1d26;color:#fff;cursor:pointer;overflow:hidden;scroll-snap-align:center;
  transition:border-color .18s,transform .18s;font:inherit}
#cenas button:hover{transform:translateY(-3px)}
#cenas button.ativa{border-color:var(--acc)}
#cenas img{display:block;width:100%;height:58px;object-fit:cover;background:#000}
#cenas span{display:block;padding:6px 7px;font-size:11.5px;line-height:1.25;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}

#cenas-toggle{position:fixed;z-index:21;left:12px;bottom:calc(12px + var(--safe-b));
  display:none;align-items:center;gap:7px;padding:10px 15px;border:0;border-radius:999px;
  background:rgba(16,18,24,.65);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
#cenas.oculto ~ #cenas-toggle{display:flex}

/* ---------- CTA ---------- */
#cta{position:fixed;z-index:22;right:12px;bottom:calc(12px + var(--safe-b));
  display:flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;
  background:#22c35e;color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;
  box-shadow:var(--sombra);transition:transform .18s,filter .18s}
#cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
#cenas:not(.oculto) ~ #cta{bottom:calc(96px + var(--safe-b))}

/* ---------- hotspots ---------- */
/* position:absolute e obrigatorio: o pannellum posiciona o hotspot por transform.
   Trocar para relative joga o ponto no fluxo do layout e ele some da tela. */
.hs{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;cursor:pointer;
  display:grid;place-items:center}
.hs::before{content:"";position:absolute;inset:6px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:2px solid rgba(255,255,255,.92);box-shadow:0 3px 14px rgba(0,0,0,.45);
  transition:transform .2s,background .2s}
.hs::after{content:"";position:absolute;inset:6px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);animation:pulso 2.4s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.75);opacity:0}}
.hs:hover::before{transform:scale(1.14);background:rgba(255,255,255,.3)}
.hs svg{position:relative;width:22px;height:22px;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.hs-rot{position:absolute;inset:0;display:grid;place-items:center}
.hs-lbl{position:absolute;top:56px;left:50%;transform:translateX(-50%);
  padding:5px 11px;border-radius:8px;background:rgba(12,14,20,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:12.5px;font-weight:500;white-space:nowrap;opacity:0;transition:opacity .2s;
  pointer-events:none}
.hs:hover .hs-lbl{opacity:1}
.hs.info::before{background:rgba(47,107,255,.5);border-color:#fff}
.hs.info::after{display:none}

/* ---------- caixa de info ---------- */
#info{position:fixed;z-index:40;left:50%;bottom:calc(110px + var(--safe-b));transform:translateX(-50%);
  width:min(400px,calc(100vw - 32px));padding:18px 20px;border-radius:16px;
  background:rgba(16,18,24,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);box-shadow:var(--sombra);
  animation:sobe .3s cubic-bezier(.2,.7,.3,1) both}
#info strong{display:block;font-size:15.5px;margin-bottom:5px}
#info p{margin:0;font-size:13.5px;line-height:1.55;opacity:.8;white-space:pre-wrap}
#info-x{position:absolute;top:8px;right:10px;width:28px;height:28px;border:0;border-radius:8px;
  background:transparent;color:#fff;opacity:.6;font-size:22px;line-height:1;cursor:pointer}
#info-x:hover{opacity:1}

/* ---------- creditos ---------- */
#selo{position:fixed;z-index:19;left:12px;top:calc(var(--safe-t) + 62px);
  font-size:10.5px;opacity:.35;text-decoration:none;color:#fff}

@media (max-width:520px){
  #cenas button{width:88px}
  #cenas img{height:50px}
  #cta span{display:none}
  #cta{padding:13px 15px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}