/* ══ VER EM 3D ══════════════════════════════════════
   O selo na foto da tipologia, e o diálogo de tela cheia com a maquete e a
   imersão. Cores e fontes vêm dos tokens de estilo.css e site.css. */

.ver3d{
  position:absolute;top:.9rem;right:.9rem;z-index:2;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.62rem .95rem .62rem .8rem;border:1px solid rgba(232,221,201,.35);border-radius:999px;
  background:rgba(6,20,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--areia);font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease);
}
.ver3d svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.4}
.ver3d:hover,.ver3d:focus-visible{background:var(--dourado);border-color:var(--dourado);color:var(--mar);transform:translateY(-1px);outline:none}

body.t3d-aberto{overflow:hidden}

/* ── o diálogo: só palco ─────────────────────── */
.t3d{
  width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--mar);color:var(--areia);
}
.t3d:not([open]){display:none}
.t3d::backdrop{background:rgba(6,20,18,.85)}

.t3d__palco{position:absolute;inset:0;overflow:hidden;transition:background .6s}
.t3d__palco.modo-maquete{background:#D9D9D9}              /* o cinza do pôster: o 3D nasce por cima sem corte */
.t3d__visor{position:absolute;inset:0;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.t3d__visor.some{opacity:0;pointer-events:none}
.t3d__visor.longe{transform:scale(1.06)}
.t3d__visor canvas{display:block;width:100%;height:100%;cursor:grab}
.t3d__visor canvas:active{cursor:grabbing}

/* o rótulo, flutuando no canto */
.t3d__rotulo{
  position:absolute;left:var(--margem);top:1.1rem;z-index:5;display:grid;gap:.15rem;pointer-events:none;
  padding:.7rem .95rem;border-radius:.4rem;background:rgba(6,20,18,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--areia);max-width:min(60vw,26rem);
}
.t3d__olho{font-family:var(--mono);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dourado)}
.t3d__onde{font-family:var(--titulo);font-weight:300;font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.05;color:var(--branco)}
.t3d__dica{font-family:var(--corpo);font-weight:300;font-size:.72rem;color:var(--areia-fraca);margin-top:.25rem}
.t3d__fechar{
  position:absolute;right:var(--margem);top:1.1rem;z-index:5;
  appearance:none;width:2.6rem;height:2.6rem;border:1px solid rgba(232,221,201,.3);border-radius:50%;
  background:rgba(6,20,18,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--areia);font:300 1.5rem/1 var(--corpo);cursor:pointer;transition:background .3s,color .3s;
}
.t3d__fechar:hover{background:var(--areia);color:var(--mar)}

/* o pôster: a imagem que segura a tela enquanto o 3D carrega */
.t3d__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:2;pointer-events:none;
  transition:opacity .7s var(--ease);
}
.modo-maquete .t3d__poster{object-fit:contain;background:#D9D9D9}
.t3d__poster.some{opacity:0}
.t3d__poster[hidden]{display:none}
.t3d__carregando{
  position:absolute;inset:0;display:grid;place-content:center;margin:0;pointer-events:none;z-index:3;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--areia-fraca);
  opacity:0;transition:opacity .3s;
}
.modo-maquete .t3d__carregando{color:var(--tinta-fraca)}
.t3d__palco.carregando .t3d__carregando{opacity:1}
.t3d__carregando::after{content:'';display:block;width:6rem;height:1px;margin:1rem auto 0;background:linear-gradient(90deg,transparent,var(--dourado),transparent);animation:t3d-pulsa 1.4s ease-in-out infinite}
@keyframes t3d-pulsa{0%,100%{opacity:.25;transform:scaleX(.4)}50%{opacity:1;transform:scaleX(1)}}
.t3d__erro{margin:0;position:absolute;inset:0;display:grid;place-content:center;color:var(--areia-fraca);font-size:.9rem;z-index:4}

/* a vinheta da viagem: escurece as bordas enquanto a câmera avança */
.t3d__vinheta{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(ellipse at center,transparent 38%,rgba(6,20,18,.92) 100%);
}

/* os pontos: marcas sobre a maquete e no chão do 360 */
.t3d__pontos{position:absolute;inset:0;pointer-events:none;z-index:3}
.t3d__ponto{
  position:absolute;left:0;top:0;pointer-events:auto;appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
  display:grid;justify-items:center;gap:.4rem;transition:opacity .3s;will-change:transform;
  color:var(--branco);font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
}
.t3d__ponto i{
  display:block;width:.9rem;height:.9rem;border-radius:50%;background:var(--dourado);
  box-shadow:0 0 0 .35rem rgba(201,162,39,.28),0 2px 10px rgba(0,0,0,.35);animation:t3d-pulso 2.2s ease-out infinite;
}
.t3d__ponto span{padding:.35rem .6rem;border-radius:999px;background:rgba(6,20,18,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap}
.t3d__ponto:hover i,.t3d__ponto:focus-visible i{background:var(--branco)}
.modo-maquete .t3d__ponto{color:var(--tinta)}
.modo-maquete .t3d__ponto span{background:rgba(251,248,242,.85);color:var(--tinta)}
@keyframes t3d-pulso{0%{box-shadow:0 0 0 .2rem rgba(201,162,39,.45),0 2px 10px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 1rem rgba(201,162,39,0),0 2px 10px rgba(0,0,0,.35)}}

/* a barra de baixo: Maquete e os ambientes */
.t3d__nav{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:.25rem;padding:.25rem;
  max-width:calc(100vw - 2*var(--margem));overflow-x:auto;scrollbar-width:none;
  border:1px solid rgba(232,221,201,.25);border-radius:999px;background:rgba(6,20,18,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.t3d__nav::-webkit-scrollbar{display:none}
.t3d__nav i{flex:none;width:1px;height:1.2rem;margin:0 .25rem;background:rgba(232,221,201,.25)}
.t3d__nav button{
  flex:none;appearance:none;border:0;background:transparent;color:var(--areia-fraca);cursor:pointer;padding:.5rem .9rem;border-radius:999px;
  font-family:var(--corpo);font-weight:300;font-size:.82rem;white-space:nowrap;transition:background .3s,color .3s;
}
.t3d__nav button[aria-pressed=true]{background:var(--areia);color:var(--mar)}
.t3d__nav button:not([aria-pressed=true]):hover{color:var(--branco)}

@media (max-width:760px){
  .t3d__rotulo{left:var(--pad);top:.75rem;padding:.55rem .75rem;max-width:calc(100vw - 6rem)}
  .t3d__fechar{right:var(--pad);top:.75rem}
  .t3d__dica{display:none}
  .t3d__nav{bottom:.75rem;max-width:calc(100vw - 2*var(--pad))}
  .ver3d{top:.6rem;right:.6rem;padding:.5rem .75rem .5rem .65rem}
}