/* Tour 3D de projeto — herda paleta/tipografia de ygg-home.css (:root já
   carrega --paper/--cream/--sand/--espresso/--gold/--ink/--muted/--line,
   --serif Cormorant Garamond, --sans Montserrat). Este arquivo só resolve
   o componente imersivo da página de detalhe do projeto. */
:root{
  --t3d-chip:rgba(251,248,242,.94);
  --t3d-rule:var(--line);
}
/* reset de margin/padding só onde o navegador aplica um valor padrão real
   (p, dl, dt, dd) — via :where()/:not(:where()) pra especificidade ficar
   em (1,0,0), igual a só "#tour3d". Assim toda regra mais específica deste
   arquivo continua vencendo normalmente, e nada aqui disputa com .btn (que
   nem faz parte da lista) nem com o .contato/footer reaproveitados dentro
   de #fechamento (explicitamente excluídos, sem custo de especificidade). */
#tour3d :where(p, dl, dt, dd):not(:where(#fechamento, #fechamento *)){margin:0;padding:0}
#tour3d *{-webkit-tap-highlight-color:transparent}
/* a experiência é um "app" de viewport único: a página real não rola,
   quem desloca o conteúdo é o transform de #pagina (ver JS). Só carrega
   nesta rota, então travar o scroll do documento aqui é seguro. */
html,body{height:100%;overflow:hidden}
#tour3d{position:relative;isolation:isolate}
#tour3d #pagina{position:fixed;inset:0;display:flex;flex-direction:column;will-change:transform;background:var(--paper)}
#tour3d #fechamento{flex:0 0 100dvh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--paper)}

/* ---------- hero de abertura ---------- */
#tour3d #hero{
  position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;
  padding:0 clamp(22px,6vw,86px) clamp(48px,9vh,96px);
  background:linear-gradient(to top, rgba(31,25,19,.92) 0%, rgba(31,25,19,.68) 42%,
                                      rgba(31,25,19,.22) 72%, rgba(31,25,19,.08) 100%),
             url('/images/projetos/painel-mesa-bhd/render-desktop.jpg') center/cover;
  transition:opacity .9s ease, visibility .9s;
}
#tour3d #hero.fora{opacity:0;visibility:hidden;pointer-events:none}
#tour3d #hero .bloco{max-width:min(720px,100%)}
#tour3d #hero .etiqueta{
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold-lt);margin-bottom:18px;
}
#tour3d #hero h1{
  font-family:var(--serif);font-size:clamp(2.4rem,8vw,4.6rem);font-weight:400;line-height:1.02;
  margin-bottom:16px;color:var(--paper);
}
#tour3d #hero .sub{
  font-size:clamp(15px,2.2vw,19px);line-height:1.5;color:rgba(251,248,242,.82);
  max-width:46ch;margin-bottom:28px;
}
#tour3d #hero .meta{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(201,167,103,.28);margin-bottom:32px}
#tour3d #hero .meta div{padding:12px 22px 12px 0;margin-right:22px;border-right:1px solid rgba(201,167,103,.28)}
#tour3d #hero .meta div:last-child{border-right:0;margin-right:0}
#tour3d #hero .meta dt{font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,242,.5);margin-bottom:3px}
#tour3d #hero .meta dd{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--paper)}
#tour3d #hero .entrar span{display:inline-block;animation:t3d-desce 1.8s ease-in-out infinite}
@keyframes t3d-desce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
body.t3d-hero #tour3d #roteiro{overflow:hidden}
body.t3d-hero #tour3d #topo,body.t3d-hero #tour3d #setas,
body.t3d-hero #tour3d #fita,body.t3d-hero #tour3d #verContato{opacity:0;pointer-events:none}
#tour3d #topo,#tour3d #setas,#tour3d #fita{transition:opacity .6s ease}
@media (max-width:680px){ #tour3d #hero{padding:0 20px 40px} #tour3d #hero .meta div{padding:10px 14px 10px 0;margin-right:14px} }

/* o header do site fica fixo por cima (z-index:50); o app abre espaço pra ele */
#tour3d #app{flex:0 0 100dvh;height:100dvh;display:flex;flex-direction:column;position:relative;padding-top:84px}

/* ---------- barra superior do experimento ---------- */
#tour3d #topo{
  position:relative;z-index:9;flex:0 0 auto;display:flex;align-items:center;gap:16px;
  height:48px;padding:0 20px;border-bottom:1px solid var(--t3d-rule);
  font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--paper);
}
#tour3d #topo b{color:var(--espresso);font-weight:600}
#tour3d #topo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tour3d #topo .voltar{flex:0 0 auto;color:var(--gold);opacity:1;letter-spacing:.1em}
#tour3d #topo .voltar:hover{color:var(--walnut)}
#tour3d #corpo{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}

/* ---------- palco 3D ---------- */
#tour3d #palco{position:relative;flex:0 0 54%;min-height:0;border-bottom:1px solid var(--t3d-rule)}
#tour3d #palco canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;pointer-events:auto}
#tour3d #cotas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#tour3d #semgl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:var(--cream)}
#tour3d #semgl p{font-family:var(--sans);font-size:.85rem;line-height:1.6;color:var(--muted);max-width:40ch}
#tour3d #semgl b{color:var(--espresso);font-weight:600}
#tour3d .cota{
  position:absolute;transform:translate(-50%,-50%);font-family:var(--sans);
  font-size:.7rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;padding:3px 7px;
  color:var(--ink);background:var(--t3d-chip);border:1px solid var(--t3d-rule);border-radius:2px;
  opacity:0;transition:opacity .35s ease;
}
#tour3d .cota.aco{color:var(--walnut);border-color:rgba(169,136,76,.4)}
#tour3d .cota b{font-weight:600}
#tour3d #ctrlLuz{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:6;
  display:none;flex-direction:column;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;
  user-select:none;-webkit-user-select:none;font-family:var(--sans);font-size:.72rem;letter-spacing:.01em;
  color:var(--ink);background:var(--t3d-chip);border:1px solid rgba(169,136,76,.4);border-radius:2px;
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
#tour3d #ctrlLuz.on{display:flex;opacity:1;pointer-events:auto}
#tour3d #ctrlLuz.segurando{border-color:var(--gold)}
#tour3d #ctrlLuz b{color:var(--gold);font-weight:600}
#tour3d #ctrlLuz .barra{width:132px;height:3px;background:var(--t3d-rule);position:relative;overflow:hidden}
#tour3d #ctrlLuz .barra i{position:absolute;inset:0 auto 0 0;background:var(--gold);width:0%;transition:width .08s linear}
@media (max-width:680px){ #tour3d #ctrlLuz{top:12px;font-size:.68rem;padding:9px 13px} }
#tour3d .dica-caixa{color:var(--gold);border-color:rgba(169,136,76,.55);animation:t3d-pulsa 1.6s ease-in-out infinite;cursor:pointer;pointer-events:auto}
@keyframes t3d-pulsa{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.95}50%{transform:translate(-50%,-50%) scale(1.07);opacity:.55}}

/* fita métrica = progresso, no mobile */
#tour3d #fita{position:absolute;left:0;right:0;bottom:0;display:flex;padding:0 14px 10px;z-index:9}
#tour3d #fita .trilho{display:flex;width:100%;border-bottom:1px solid var(--t3d-rule)}
#tour3d .estacao{
  position:relative;flex:1;height:30px;background:none;border:0;padding:0;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:flex-start;
  font-family:var(--sans);font-size:.62rem;font-weight:500;color:rgba(42,35,27,.3);transition:color .3s ease;
}
#tour3d .estacao::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:12px;background:rgba(42,35,27,.3);transition:height .3s ease,background-color .3s ease}
#tour3d .estacao::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background-image:repeating-linear-gradient(to right,var(--t3d-rule) 0 1px,transparent 1px 25%);background-position-x:25%}
#tour3d .estacao span{position:relative;z-index:1;padding:0 0 3px 5px}
#tour3d .estacao.on{color:var(--gold)}
#tour3d .estacao.on::before{height:22px;background:var(--gold)}
#tour3d .estacao:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* ---------- o render final, ato de fechamento ---------- */
#tour3d #render{position:absolute;left:0;right:0;top:0;bottom:46%;z-index:7;pointer-events:none;opacity:0;transition:opacity 1.1s ease;background:var(--espresso);overflow:hidden}
#tour3d #render.on{opacity:1}
#tour3d #render img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.06);transition:transform 2.4s cubic-bezier(.16,.8,.3,1)}
body.t3d-render12 #tour3d #palco canvas,body.t3d-render12 #tour3d #cotas{opacity:0;transition:opacity .9s ease}
#tour3d #palco canvas,#tour3d #cotas{transition:opacity .9s ease}
body.t3d-fechado #tour3d #render,body.t3d-fechado #tour3d #ctrl,
body.t3d-fechado #tour3d #rolar,body.t3d-fechado #tour3d #verContato{opacity:0!important;pointer-events:none!important}
#tour3d #render.on img{transform:scale(1)}
#tour3d #render .veu{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to top, rgba(20,15,10,.94) 0%, rgba(20,15,10,.6) 38%, transparent 100%)}
#tour3d #render .selo{position:absolute;left:0;bottom:0;padding:26px 30px calc(74px + env(safe-area-inset-bottom)) 30px;max-width:min(560px,92vw)}
#tour3d #render .selo .num{font-family:var(--sans);font-size:.68rem;font-weight:600;color:var(--gold-lt);letter-spacing:.14em}
#tour3d #render .selo h2{font-family:var(--serif);font-size:clamp(1.7rem,5vw,2.6rem);font-weight:400;line-height:1.05;margin:8px 0 10px;color:var(--paper)}
#tour3d #render .selo p{font-size:.92rem;line-height:1.5;color:rgba(251,248,242,.76);max-width:44ch}
@media (max-width:859px){
  #tour3d #render picture{display:contents}
  #tour3d #render img{object-fit:contain;transform:none}
  #tour3d #render.on img{transform:none}
  #tour3d #render .veu,#tour3d #render .selo{display:none}
}
@media (max-width:680px){ #tour3d #render .selo{padding:20px 18px calc(96px + env(safe-area-inset-bottom)) 18px} #tour3d #render .selo p{font-size:.82rem} #tour3d #render .veu{height:66%} }

#tour3d #verContato{
  position:fixed;right:18px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:11;
  transition:opacity .4s ease,filter .2s ease;
}

/* ---------- navegação de etapas: setas no md/lg, arrastar no mobile ---------- */
#tour3d #setas{display:none}
@media (min-width:760px){
  #tour3d #setas{display:block}
  #tour3d #fita{display:none}
  #tour3d #passoNav{bottom:18px}
  #tour3d #ctrlLuz{top:20px}
  #tour3d #palco{cursor:grab}
  body.t3d-arrastando #tour3d #palco{cursor:grabbing}
}
#tour3d .seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:9;width:58px;height:58px;
  padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--t3d-chip);border:1px solid var(--t3d-rule);color:var(--espresso);
  backdrop-filter:blur(6px);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .14s ease,opacity .3s ease;
}
#tour3d .seta.ant{left:20px}
#tour3d .seta.prox{right:20px}
#tour3d .seta svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none}
#tour3d .seta:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--paper);transform:translateY(-50%) scale(1.06)}
#tour3d .seta:active:not(:disabled){transform:translateY(-50%) scale(.95)}
#tour3d .seta:disabled{opacity:.2;cursor:default}
#tour3d .seta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body.t3d-animando #tour3d .seta{pointer-events:none;opacity:.25}

#tour3d #passoNav{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none}
#tour3d #passoNav .barra{width:min(320px,34vw);height:2px;background:var(--t3d-rule);position:relative}
#tour3d #passoNav .barra i{position:absolute;inset:0 auto 0 0;background:var(--gold);width:8%;transition:width .6s cubic-bezier(.3,.9,.3,1)}
#tour3d #passoNav .conta{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
#tour3d #passoNav .conta b{color:var(--gold);font-weight:600}

body.t3d-luzativa #tour3d #dicaNav{opacity:0;pointer-events:none}
#tour3d #dicaNav{
  position:absolute;left:50%;bottom:66px;transform:translateX(-50%);z-index:9;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;color:var(--gold);
  white-space:nowrap;pointer-events:none;animation:t3d-pulsa 2s ease-in-out infinite;transition:opacity .6s ease;
}
#tour3d #ctrl{transition:opacity .4s ease}

/* ---------- roteiro ---------- */
#tour3d #roteiro{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;background:var(--paper)}
body.t3d-animando #tour3d #roteiro{overflow-y:hidden;touch-action:none}
body.t3d-animando #tour3d .estacao{pointer-events:none;opacity:.5}
#tour3d .passo{min-height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:center;padding:26px 22px 30px}
#tour3d .passo .cab{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
#tour3d .passo .num{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--gold);letter-spacing:.08em}
#tour3d .passo h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,4.6vw,2.1rem);letter-spacing:0;line-height:1.05;color:var(--espresso)}
#tour3d .passo p{font-size:.92rem;line-height:1.55;color:var(--muted);max-width:46ch;margin-bottom:16px}
#tour3d .passo .med{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);max-width:46ch}
#tour3d .passo .med div{background:var(--cream);padding:8px 10px}
#tour3d .passo .med dt{font-family:var(--sans);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
#tour3d .passo .med dd{font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--espresso)}
#tour3d .passo .med dd em{font-style:normal;color:var(--gold)}
#tour3d .passo .chamada{color:var(--gold);font-size:.92rem;margin-bottom:14px}
#tour3d .passo .revelavel{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease}
#tour3d .passo.revelado .revelavel{opacity:1;transform:none}
/* no retrato mobile #verContato fica fixo por cima do fim do .passo — dá
   espaço pra última linha de medidas não ficar embaixo do botão */
@media (max-width:680px){
  /* conteúdo centralizado brigava com o botão fixo #verContato: alinhado
     ao topo, o excesso vira scroll normal dentro do próprio .passo */
  #tour3d .passo{justify-content:flex-start;scroll-snap-align:start;padding-top:20px}
  /* nessa largura os elementos fixos (#verContato, #rolar) cobrem linhas
     de medida por cima do #roteiro; a fita de progresso (#fita) já orienta
     a navegação por toque, então os dois não fazem falta aqui */
  #tour3d #verContato,#tour3d #rolar{display:none}
}

/* #rolar e #verContato vivem fora de #pagina (que é fixed): precisam ser
   fixed também, senão herdam o containing block de #tour3d e saltam de lugar */
#tour3d #rolar{position:fixed;left:50%;bottom:42px;transform:translateX(-50%);z-index:9;font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;color:var(--muted);pointer-events:none;transition:opacity .5s ease}

/* ---------- paisagem / desktop ---------- */
@media (min-width:860px) and (orientation:landscape){
  #tour3d #corpo{flex-direction:row}
  #tour3d #render{bottom:0}
  #tour3d #palco{flex:0 0 60%;border-bottom:0;border-right:1px solid var(--t3d-rule)}
  #tour3d #roteiro{height:100%}
  #tour3d .passo{padding:44px 48px}
  #tour3d .passo p{font-size:.98rem}
  #tour3d #topo{height:54px;padding:0 48px;font-size:.76rem}
}
@media (max-width:680px){ #tour3d #topo{height:44px;padding:0 16px;font-size:.66rem;letter-spacing:.08em} }
@media (max-height:520px) and (orientation:landscape) and (max-width:859px){
  #tour3d #app{padding-top:64px}
  #tour3d #render{bottom:54%}
  #tour3d #topo{height:36px;font-size:.6rem}
  #tour3d #palco{flex:0 0 46%}
  #tour3d .passo{padding:14px 20px}
  #tour3d .passo p{font-size:.8rem;margin-bottom:10px}
  #tour3d .passo .med dd{font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){ #tour3d *{transition-duration:.01ms!important} }