@font-face{font-family:'Cormorant';src:url('../fonts/cormorant.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --creme:#FBF8F1;
  --linha:#E3DCCD;
  --tinta:#1F2A1B;
  --suave:#59624F;
  --verde:#29471A;
  --ouro:#A87B2F;
  --serif:'Cormorant',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vidro:rgba(251,248,241,.94);
  --texto-barra:var(--verde);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{background:#EFE9DD;color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button,a{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

/* ---------- palco ---------- */
.palco{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 95% at 50% 0%,#FFFFFF 0%,#F4EFE4 55%,#E7E0D0 100%);transition:background-color .9s}
.maquete-poster,.maquete-poster img,.maquete-tela,.maquete-canvas{position:absolute;inset:0;width:100%;height:100%}
/* Sem tela de carregamento: o palco fica limpo e a maquete sobe do chão assim que a cena
   fica pronta. A foto da maquete só aparece (e só é baixada, pelo loading="lazy") quando
   o navegador não abre o 3D. */
.maquete-poster{display:none}
.maquete-poster img{object-fit:cover}
.maquete-canvas{display:block;opacity:0;transition:opacity .45s ease;touch-action:none;cursor:grab}
.maquete-canvas:active{cursor:grabbing}
.maquete-pronta .maquete-canvas{opacity:1}

/* ---------- barra do topo ---------- */
.maquete-barra{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:14px;padding:14px 16px 26px 20px;padding-top:calc(14px + env(safe-area-inset-top));background:linear-gradient(var(--vidro),rgba(251,248,241,0));transition:background .9s}
.maquete-marca{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--linha)}
.maquete-marca img{width:36px;height:auto}
.maquete-titulo{flex:1;min-width:0}
.maquete-titulo h1{margin:0;font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.1;color:var(--texto-barra);transition:color .9s}
.maquete-titulo p{margin:2px 0 0;font-size:15px;color:var(--suave);transition:color .9s}
.maquete-fechar{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--linha);background:#fff;display:grid;place-items:center;text-decoration:none;color:var(--tinta)}
.maquete-fechar svg{width:22px;height:22px}

/* ---------- botões ---------- */
.maquete-controles{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;gap:8px;justify-content:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none;background:linear-gradient(rgba(251,248,241,0),var(--vidro) 42%);transition:background .9s}
.maquete-controles::-webkit-scrollbar{display:none}
.maquete-controles button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--linha);background:#fff;font-size:16px;cursor:pointer;color:var(--tinta);transition:background .2s,color .2s,border-color .2s}
.maquete-controles button svg{width:18px;height:18px;flex:none}
.maquete-controles button[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.maquete-controles [data-noite][aria-pressed="true"]{background:#1E2638;border-color:#3A4766}
.maquete-controles .separa{width:1px;flex:none;background:var(--linha);margin:6px 4px}
.vistas,.alternar{display:flex;gap:8px;flex:none}
.so-toque{display:none}
@media (hover:none) and (pointer:coarse){.so-mouse{display:none}.so-toque{display:inline}}

/* ---------- dica e carregando ---------- */
.maquete-dica,.maquete-carregando{position:absolute;left:50%;z-index:5;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;text-align:center;font-size:15px;line-height:1.35;color:var(--suave);padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(31,42,27,.1)}
.maquete-dica{bottom:88px;pointer-events:none;transition:opacity .4s}
.carregando .maquete-dica,.mexeu .maquete-dica{opacity:0}
.maquete-carregando{top:50%;display:none;align-items:center;gap:10px;transform:translate(-50%,-50%);font-size:16px;color:var(--tinta)}
/* o aviso só aparece se a montagem passar de 3 s (conexão lenta): no normal ninguém vê */
.carregando .maquete-carregando{display:inline-flex;animation:aviso-lento .4s ease 3s both}
@keyframes aviso-lento{from{opacity:0}to{opacity:1}}
.gira{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(41,71,26,.2);border-top-color:var(--verde);animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- rótulos ---------- */
.maquete-rotulos{position:absolute;inset:0;z-index:4;pointer-events:none}
.maquete-rotulos[hidden]{display:none}
.rotulo{position:absolute;left:0;top:0;padding:7px 12px 8px;border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px rgba(31,42,27,.14);white-space:nowrap;transition:opacity .25s;will-change:transform}
.rotulo::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.rotulo strong{display:block;font-size:16px;font-weight:500;line-height:1.2;color:var(--verde)}
.rotulo span{display:block;font-size:14px;line-height:1.25;color:var(--suave)}

/* ---------- noite ---------- */
.palco.noite{--vidro:rgba(18,23,34,.9);--texto-barra:#F4EFE4;--suave:#B9C0CF}
.noite .maquete-dica{background:rgba(30,38,56,.92);color:#DCE2EE}
.noite .rotulo{background:rgba(30,38,56,.94);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.noite .rotulo strong{color:#F4EFE4}
.noite .rotulo span{color:#B9C0CF}

/* ---------- sem 3D ---------- */
.maquete-sem3d{display:none;position:absolute;left:16px;right:16px;bottom:24px;z-index:6;max-width:460px;margin:0 auto;padding:20px;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(31,42,27,.15);text-align:center}
.maquete-sem3d p{margin:0 0 14px}
.maquete-sem3d .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--verde);color:#fff;text-decoration:none;font-weight:500}
.sem-3d .maquete-sem3d,.maquete-sem3d.visivel{display:block}
.sem-3d .maquete-controles,.sem-3d .maquete-dica,.sem-3d .maquete-carregando{display:none}
.sem-3d .maquete-poster{display:block}

@media (max-width:640px){
  .maquete-barra{padding:10px 12px 22px 12px;padding-top:calc(10px + env(safe-area-inset-top));gap:10px}
  .maquete-marca{width:44px;height:44px}
  .maquete-marca img{width:30px}
  .maquete-titulo h1{font-size:23px}
  .maquete-titulo p{font-size:14px}
  /* duas fileiras: as vistas rolam para o lado, os botões de ligar ficam embaixo */
  .maquete-controles{flex-direction:column;align-items:stretch;gap:8px;padding:28px 0 calc(12px + env(safe-area-inset-bottom));overflow:visible}
  .maquete-controles .separa{display:none}
  .vistas{overflow-x:auto;scrollbar-width:none;padding:0 16px;scroll-padding:0 16px}
  .vistas::-webkit-scrollbar{display:none}
  .alternar{justify-content:center;padding:0 16px}
  .maquete-controles button{padding:0 15px}
  .maquete-dica{bottom:132px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}