:root{
  --paper:#f1eee7;
  --ink:#202322;
  --line:rgba(32,35,34,.18);
  --h:68px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
a{color:inherit}

/* Loader */
.loader{position:fixed;inset:0;z-index:999;background:var(--paper);display:grid;place-content:center;justify-items:center;gap:18px;transition:opacity .65s,visibility .65s}
.loader.done{opacity:0;visibility:hidden}
.loader-mark{width:154px}
.loader-mark path,.brand path,.cover-mark path{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:square;stroke-linejoin:miter}
.loader-mark .track{opacity:.1}
.loader-mark .draw{stroke-dasharray:330;stroke-dashoffset:330;animation:draw 1.55s forwards}
.loader-triad{font-size:8px;letter-spacing:.22em}
.loader-triad span{opacity:.45}
.loader-line{width:300px;height:1px;background:#cdc8bf;overflow:hidden}
.loader-line i{display:block;height:100%;background:var(--ink);animation:bar 1.8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes bar{from{width:0}to{width:100%}}

/* Header */
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--h);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(241,238,231,.965);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:9px;font-weight:700;letter-spacing:.34em}
.brand svg{width:38px;height:28px}
.topbar nav{display:flex;gap:23px}
.topbar nav button{border:0;background:transparent;padding:9px 0;font-size:8px;letter-spacing:.17em}

/* Entrance */
.hero{height:100svh;min-height:690px;position:relative;padding-top:var(--h);overflow:hidden}
.hero-image{position:absolute;inset:var(--h) 0 0;width:100%;height:calc(100% - var(--h));object-fit:cover;object-position:center}
.portal{position:absolute;top:var(--h);bottom:0;width:31%;border:0;background:none;padding:0;overflow:hidden}
.portal.left{left:0}.portal.right{right:0}
.smoke{position:absolute;inset:0;background:rgba(15,17,17,.77);backdrop-filter:blur(3px);opacity:0;transition:opacity .28s}
.portal-content{position:absolute;inset:0;color:#fff;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:54px 34px 28px;opacity:0;transform:translateY(7px);transition:opacity .28s,transform .28s}
.portal-title{font-size:clamp(18px,1.45vw,26px);line-height:1.3;letter-spacing:.045em;font-weight:400}
.icon-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.icon-grid.four{grid-template-columns:repeat(2,1fr)}
.icon-item{min-height:92px;border-top:1px solid rgba(255,255,255,.32);padding-top:13px;display:flex;flex-direction:column;gap:9px}
.icon-item svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:square;stroke-linejoin:miter}
.icon-item b{font-size:7px;letter-spacing:.14em;font-weight:400}
.portal-arrow{margin-top:auto;width:47px;height:47px;border:1px solid rgba(255,255,255,.72);border-radius:50%;display:grid;place-items:center;font-size:19px;opacity:0;transition:opacity .2s}
.left .portal-arrow{align-self:flex-end}
.portal:hover .smoke,.portal:focus-visible .smoke{opacity:1}
.portal:hover .portal-content,.portal:focus-visible .portal-content{opacity:1;transform:none}
.portal:hover .portal-arrow,.portal:focus-visible .portal-arrow{opacity:1}

/* Route */
.route{position:fixed;z-index:100;inset:0;background:#111;opacity:0;transition:opacity .42s}
.route.active{opacity:1}
.routebar{height:var(--h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 25px;background:rgba(241,238,231,.98)}
.routebar button{border:0;background:transparent;text-align:left;font-size:8px;letter-spacing:.17em}
.routebar strong{font-size:9px;letter-spacing:.36em}
.routebar span{text-align:right;font-size:8px;letter-spacing:.16em;text-transform:uppercase}
.stage{height:calc(100svh - var(--h));position:relative;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .52s;background:#111}
.slide.current{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.physical-label{
  position:absolute;left:4.3%;top:7.5%;z-index:2;
  padding:18px 21px 16px 22px;
  background:linear-gradient(135deg,rgba(219,215,205,.88),rgba(177,171,160,.78));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:4px 7px 15px rgba(0,0,0,.18),inset 1px 1px 0 rgba(255,255,255,.5);
  transform:perspective(800px) rotateY(2deg);
  color:#262522;
  max-width:min(320px,28vw);
}
.physical-label:before{content:"";position:absolute;left:10px;top:11px;width:3px;height:3px;border-radius:50%;background:#6d685f;box-shadow:calc(100% + 280px) 0 0 #6d685f}
.physical-label strong{display:block;font-size:clamp(16px,1.3vw,24px);font-weight:500;letter-spacing:.08em}
.physical-label small{display:block;margin-top:8px;font-size:7px;letter-spacing:.15em;line-height:1.5}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.72);background:rgba(0,0,0,.15);color:#fff;font-size:20px;opacity:0;transition:opacity .2s}
.slide:hover .nav-arrow,.nav-arrow:focus-visible{opacity:1}
.nav-arrow.prev{left:17px}.nav-arrow.next{right:17px}
.dots{position:absolute;z-index:130;right:22px;bottom:17px;display:flex;gap:8px}
.dots button{width:24px;height:2px;border:0;padding:0;background:rgba(255,255,255,.38)}
.dots button.on{width:47px;background:#fff}

/* Panels */
.panel,.magazine,.contact-panel{position:fixed;z-index:310;top:0;right:0;height:100svh;background:var(--paper);transform:translateX(103%);transition:transform .47s;box-shadow:-30px 0 70px rgba(0,0,0,.18)}
.panel.open,.magazine.open,.contact-panel.open{transform:none}
.text-panel{width:min(780px,92vw);overflow:auto}
.close{position:absolute;z-index:20;top:16px;right:18px;width:42px;height:42px;border:1px solid rgba(32,35,34,.22);background:rgba(241,238,231,.96);font-size:26px;font-weight:300}
.light-close{background:rgba(241,238,231,.93)}
.text-panel article{padding:88px 58px 72px}
.eyebrow{font-size:8px;letter-spacing:.22em;margin:0 0 25px}
.text-panel h2,.magazine h2{font-size:clamp(43px,4.5vw,70px);line-height:.98;font-weight:300;letter-spacing:-.045em;margin:0 0 34px}
.text-panel article p:not(.eyebrow){font-size:14px;line-height:1.72;margin:0 0 20px}

/* Magazine */
.magazine{width:min(1320px,97vw);display:flex;flex-direction:column;background:#e9e5dc}
.magazine-head{height:120px;display:flex;align-items:end;justify-content:space-between;padding:32px 68px 24px;border-bottom:1px solid rgba(32,35,34,.16)}
.magazine-head h2{font-size:35px;margin:0}
.magazine-head .eyebrow{margin-bottom:8px}
.axis{font-size:8px;letter-spacing:.18em;padding-bottom:8px}
.axis span{opacity:.45}
.magazine-body{flex:1;min-height:0;padding:24px 68px 48px}
.magazine-cover{height:100%;position:relative;background:#1f2221;overflow:hidden;padding:60px;color:#f4f1ea}
.magazine-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 48%,rgba(244,241,234,.06) 48% 49%,transparent 49%)}
.cover-mark{display:flex;align-items:center;gap:20px;position:relative;z-index:2}
.cover-mark svg{width:70px;height:50px}.cover-mark path{stroke:#f4f1ea}
.cover-mark span{font-size:14px;letter-spacing:.35em}
.cover-copy{position:absolute;left:60px;bottom:94px;max-width:650px;z-index:2}
.cover-copy small{font-size:8px;letter-spacing:.22em}
.cover-copy h3{font-size:clamp(48px,5vw,77px);line-height:.96;font-weight:300;letter-spacing:-.045em;margin:18px 0 23px}
.cover-copy p{font-size:14px;line-height:1.55;max-width:550px;color:#d2cec5}
.open-edition{position:absolute;right:60px;bottom:64px;z-index:3;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;padding:14px 18px;font-size:8px;letter-spacing:.16em}
.edition{height:100%;display:flex;flex-direction:column;background:#2b2d2c}
.edition-toolbar{height:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.14)}
.edition-toolbar button,.edition-toolbar a{border:0;background:none;color:#fff;font-size:8px;letter-spacing:.14em;text-decoration:none}
.edition-toolbar span{font-size:8px;letter-spacing:.18em}
.edition-toolbar a{text-align:right}
.pdf-object{width:100%;height:calc(100% - 48px);border:0;background:#555}

/* Contact */
.contact-panel{width:100vw;background:#111;overflow:hidden}
.contact-scene{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100vw,calc(100svh * 1.77176));
  aspect-ratio:1669/942;
}
.contact-scene>img{display:block;width:100%;height:100%;object-fit:contain}
.notebook-form{position:absolute;inset:0;pointer-events:none}
.notebook-form input,.notebook-form textarea{
  position:absolute;border:0!important;outline:0;background:transparent!important;
  color:#202322;font-size:clamp(7px,.52vw,10px);padding:2px;pointer-events:auto;
}
.notebook-form textarea{resize:none}
.f-name{left:47.98%;top:56.10%;width:8.65%;height:3.2%}
.f-email{left:57.80%;top:56.10%;width:8.70%;height:3.2%}
.f-phone{left:47.98%;top:60.12%;width:8.65%;height:3.2%}
.f-subject{left:57.80%;top:60.12%;width:8.70%;height:3.2%}
.f-message{left:47.98%;top:64.08%;width:18.55%;height:5.5%}
.f-send{position:absolute;left:48.02%;top:69.17%;width:8.25%;height:3.6%;border:0;background:transparent;pointer-events:auto}
.direct-email{
  position:absolute;right:4.1%;bottom:16.2%;
  color:#fff;text-decoration:none;font-size:clamp(8px,.69vw,12px);letter-spacing:.005em;
  border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px;
}
/* cover the tiny printed dropdown arrow in the approved screenshot */
.contact-scene:after{
  content:"";position:absolute;left:64.94%;top:60.20%;width:.75%;height:2.8%;
  background:rgba(247,247,247,.98);pointer-events:none;
}

/* Animated steam: subtle overlay only; image itself remains untouched */
.steam{position:absolute;left:21.7%;top:22.5%;width:6%;height:28%;filter:blur(7px);opacity:.36;pointer-events:none}
.steam:before,.steam:after{content:"";position:absolute;left:50%;bottom:0;width:14%;height:78%;border-radius:50%;background:linear-gradient(to top,rgba(255,255,255,.06),rgba(255,255,255,.62),rgba(255,255,255,0));transform-origin:50% 100%}
.steam-a:before{animation:steam1 5.8s ease-in-out infinite}
.steam-b:before{animation:steam2 7.2s ease-in-out infinite 1.1s}
.steam-c:before{animation:steam3 6.4s ease-in-out infinite 2.2s}
@keyframes steam1{0%{transform:translate(0,10%) scaleX(.75) rotate(-7deg);opacity:0}20%{opacity:.55}70%{opacity:.28}100%{transform:translate(45%,-18%) scaleX(1.6) rotate(14deg);opacity:0}}
@keyframes steam2{0%{transform:translate(40%,14%) scaleX(.8) rotate(8deg);opacity:0}22%{opacity:.48}100%{transform:translate(-35%,-22%) scaleX(1.55) rotate(-15deg);opacity:0}}
@keyframes steam3{0%{transform:translate(-18%,12%) scaleX(.7);opacity:0}25%{opacity:.42}100%{transform:translate(20%,-28%) scaleX(1.4) rotate(9deg);opacity:0}}

/* Backdrop */
.backdrop{position:fixed;z-index:280;inset:0;background:rgba(0,0,0,.48);opacity:0;pointer-events:none;transition:opacity .25s}
.backdrop.open{opacity:1;pointer-events:auto}

@media(max-width:900px){
  :root{--h:62px}
  .topbar{padding:0 13px}.brand span{display:none}
  .topbar nav{gap:9px}.topbar nav button{font-size:7px;letter-spacing:.08em}
  .portal{width:46%}.portal-content{padding:40px 17px 22px}
  .icon-grid,.icon-grid.four{grid-template-columns:1fr}.icon-item{min-height:auto}
  .icon-item svg{width:28px;height:28px}.icon-item b{font-size:6px}
  .routebar{grid-template-columns:1fr auto}.routebar span{display:none}
  .physical-label{left:3%;top:4%;max-width:46vw;padding:12px 13px}.physical-label small{display:none}
  .nav-arrow{opacity:.8}
  .text-panel{width:100vw}.text-panel article{padding:80px 7vw 70px}
  .magazine{width:100vw}.magazine-head{padding:28px 7vw 20px}.axis{display:none}
  .magazine-body{padding:15px}.magazine-cover{padding:30px}.cover-copy{left:30px;right:30px;bottom:90px}.open-edition{right:30px;bottom:32px}
  .contact-scene{width:100vw}
  .notebook-form,.direct-email,.contact-scene:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .loader{display:none}.steam{display:none}
}

/* v9 — correção: nenhuma etiqueta digital é colocada sobre as imagens aprovadas */
.physical-label{display:none!important}

/* Contato: a placa da própria fotografia é o elemento de navegação.
   Só criamos áreas clicáveis transparentes sobre telefone/e-mail. */
.notebook-form,.direct-email,.contact-scene:after{display:none!important}
.contact-hotspot{
  position:absolute;
  z-index:8;
  display:block;
  background:transparent;
  border:0;
  outline:none;
}
.contact-hotspot:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:3px;
}
/* Coordenadas relativas à imagem aprovada 1669×942 */
.marisa-phone{left:83.0%;top:64.4%;width:11.5%;height:4.6%}
.alex-phone{left:83.0%;top:73.1%;width:11.5%;height:4.6%}
.general-email{left:82.3%;top:78.4%;width:15.9%;height:4.7%}

.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}


/* ==============================================================
   v10 — experiência mobile dedicada, sem alterar as imagens aprovadas
   ============================================================== */
.mobile-menu-button,.mobile-menu{display:none}
.contact-intro{
  position:absolute;z-index:12;left:28px;top:22px;color:#fff;
  display:flex;align-items:baseline;gap:15px;max-width:760px;
  text-shadow:0 1px 10px rgba(0,0,0,.25);pointer-events:none
}
.contact-intro span{font-size:8px;letter-spacing:.24em;opacity:.72}
.contact-intro strong{font-size:13px;letter-spacing:.025em;font-weight:500}
.contact-intro small{font-size:9px;line-height:1.4;opacity:.76}

@media(max-width:900px){
  :root{--h:86px}
  body{overscroll-behavior:none}

  /* Cabeçalho de entrada: limpo e pensado para toque */
  .topbar{height:var(--h);padding:0 28px;border-bottom:0;background:rgba(241,238,231,.985)}
  .brand{gap:0}.brand svg{width:54px;height:38px}.brand span{display:none}
  .topbar>nav{display:none}
  .mobile-menu-button{
    display:block;border:0;background:transparent;padding:12px 0;
    font-size:8px;letter-spacing:.26em;font-weight:600
  }
  .mobile-menu{
    position:fixed;z-index:420;inset:0;background:rgba(241,238,231,.985);
    padding:34px 30px max(34px,env(safe-area-inset-bottom));
    flex-direction:column;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s
  }
  .mobile-menu.open{display:flex;opacity:1;visibility:visible}
  .mobile-menu-close{
    position:absolute;right:24px;top:21px;border:0;background:transparent;font-size:35px;font-weight:200
  }
  .mobile-menu-brand{font-size:10px;letter-spacing:.42em;font-weight:700;margin-top:8px}
  .mobile-menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:auto 0}
  .mobile-menu nav button{
    border:0;background:transparent;padding:13px 0;font-size:clamp(27px,8vw,42px);
    line-height:1.05;font-weight:300;letter-spacing:-.025em;text-align:left
  }
  .mobile-menu-axis{font-size:7px;letter-spacing:.15em;opacity:.6;line-height:1.7}

  /* Entrada: arquitetura ocupa a tela; os dois acessos viram vidro para toque */
  .hero{height:100svh;min-height:0;padding-top:var(--h);background:#111}
  .hero-image{inset:var(--h) 0 0;height:calc(100svh - var(--h));object-fit:cover;object-position:50% 50%}
  .portal{
    top:auto;bottom:max(16px,env(safe-area-inset-bottom));height:154px;width:calc(50% - 13px);
    border:1px solid rgba(255,255,255,.32);background:rgba(18,20,20,.56);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden
  }
  .portal.left{left:12px}.portal.right{right:12px}
  .portal .smoke{opacity:1;background:rgba(15,17,17,.24);backdrop-filter:none}
  .portal-content{
    opacity:1;transform:none;inset:0;padding:18px 16px 14px;justify-content:flex-start;color:#fff
  }
  .portal-title{font-size:12px;line-height:1.42;letter-spacing:.09em;font-weight:500}
  .icon-grid{display:none!important}
  .portal-arrow{
    opacity:1!important;margin-top:auto;width:35px;height:35px;font-size:15px;border-color:rgba(255,255,255,.66)
  }
  .left .portal-arrow{align-self:flex-start}
  .right .portal-arrow{align-self:flex-end}
  .portal:active{background:rgba(18,20,20,.73)}

  /* Percurso: reproduz a lógica de visita da referência enviada */
  .routebar{
    height:var(--h);grid-template-columns:1fr auto;padding:0 28px;background:rgba(241,238,231,.985)
  }
  .routebar button{font-size:8px;letter-spacing:.24em;font-weight:500}
  .routebar strong{font-size:9px;letter-spacing:.42em;text-align:right}
  .routebar span{display:none}
  .stage{height:calc(100svh - var(--h));background:#151515}
  .slide img{object-fit:cover;object-position:center center}
  .slide[data-room="MOBILIÁRIO"] img{object-position:48% center}
  .slide[data-room="RESIDENCIAL"] img{object-position:50% center}
  .slide[data-room="CORPORATIVO"] img{object-position:52% center}
  .slide[data-room="GALERIAS / EXPOSIÇÕES"] img{object-position:51% center}
  .slide[data-room="BIBLIOTECA"] img{object-position:49% center}
  .slide[data-room="ATELIÊS"] img{object-position:50% center}
  .nav-arrow{
    top:50%;width:54px;height:54px;opacity:.82;background:rgba(20,20,20,.13);
    backdrop-filter:blur(2px);border-color:rgba(255,255,255,.76)
  }
  .nav-arrow.prev{left:18px}.nav-arrow.next{right:18px}
  .dots{right:22px;bottom:max(18px,env(safe-area-inset-bottom))}
  .dots button{width:18px}.dots button.on{width:36px}

  /* Textos institucionais */
  .text-panel article{padding:96px 28px 60px}
  .text-panel h2{font-size:clamp(38px,11vw,58px)}
  .text-panel article p:not(.eyebrow){font-size:15px;line-height:1.66}
  .close{top:20px;right:20px}

  /* Revista */
  .magazine-head{height:112px;padding:27px 28px 19px;align-items:end}
  .magazine-head h2{font-size:30px}
  .magazine-body{padding:0}
  .magazine-cover{padding:28px;min-height:calc(100svh - 112px)}
  .cover-copy{left:28px;right:28px;bottom:112px}
  .cover-copy h3{font-size:clamp(42px,12vw,64px)}
  .open-edition{right:28px;bottom:36px}
  .edition-toolbar{height:56px;grid-template-columns:auto 1fr auto;gap:8px}
  .edition-toolbar span{text-align:center;font-size:7px}
  .pdf-object{height:calc(100% - 56px)}

  /* Contato mobile: preserva a placa física inteira e melhora a orientação */
  .contact-panel{background:#171717;overflow:auto}
  .contact-intro{
    position:relative;left:auto;top:auto;z-index:3;height:150px;padding:31px 62px 24px 28px;
    background:var(--paper);color:var(--ink);text-shadow:none;display:block;max-width:none;pointer-events:auto
  }
  .contact-intro span{display:block;font-size:7px;letter-spacing:.24em;opacity:.65;margin-bottom:13px}
  .contact-intro strong{display:block;font-size:24px;line-height:1.05;font-weight:400;letter-spacing:-.02em;margin-bottom:9px}
  .contact-intro small{display:block;font-size:10px;line-height:1.45;opacity:.68;max-width:330px}
  .contact-panel .close{position:fixed;z-index:25;background:rgba(241,238,231,.94)}
  .contact-scene{
    position:relative;left:auto;top:auto;transform:none;width:100vw;aspect-ratio:1669/942;
    margin:clamp(70px,16vh,150px) 0;overflow:visible
  }
  .contact-scene>img{width:100%;height:auto;object-fit:contain}
  .steam{display:block}
  .contact-hotspot{min-width:38px;min-height:28px}
}

@media(max-width:430px){
  .portal{height:145px}
  .portal-title{font-size:11px}
  .contact-intro{height:158px;padding-left:24px;padding-right:58px}
  .contact-intro strong{font-size:22px}
}


/* ==============================================================
   v11 — ajuste RESPONSIVO COMPLETO para celular
   Redimensiona navegação, textos institucionais, revista e contato.
   As imagens aprovadas permanecem intactas.
   ============================================================== */

@media (max-width: 600px){

  /* Tipografia e navegação global */
  .topbar{
    height:72px;
    padding:0 20px;
  }
  .brand svg{width:45px;height:32px}
  .mobile-menu-button{
    font-size:7px;
    letter-spacing:.22em;
    padding:10px 0;
  }

  .mobile-menu{
    padding:24px 24px max(24px,env(safe-area-inset-bottom));
  }
  .mobile-menu-brand{
    font-size:9px;
    letter-spacing:.34em;
  }
  .mobile-menu nav button{
    font-size:clamp(28px,10vw,40px);
    padding:10px 0;
  }
  .mobile-menu-axis{
    font-size:6px;
    letter-spacing:.12em;
  }

  /* Entrada */
  .hero{
    padding-top:72px;
  }
  .hero-image{
    inset:72px 0 0;
    height:calc(100svh - 72px);
  }
  .portal{
    bottom:max(12px,env(safe-area-inset-bottom));
    height:132px;
    width:calc(50% - 10px);
  }
  .portal.left{left:8px}
  .portal.right{right:8px}
  .portal-content{
    padding:15px 13px 12px;
  }
  .portal-title{
    font-size:10px;
    line-height:1.35;
    letter-spacing:.07em;
  }
  .portal-arrow{
    width:32px;
    height:32px;
    font-size:14px;
  }

  /* Barra superior dos ambientes */
  .routebar{
    height:72px;
    padding:0 20px;
  }
  .routebar button{
    font-size:7px;
    letter-spacing:.20em;
  }
  .routebar strong{
    font-size:8px;
    letter-spacing:.34em;
  }
  .stage{
    height:calc(100svh - 72px);
  }
  .nav-arrow{
    width:46px;
    height:46px;
    font-size:18px;
  }
  .nav-arrow.prev{left:12px}
  .nav-arrow.next{right:12px}
  .dots{
    right:16px;
    bottom:max(14px,env(safe-area-inset-bottom));
  }

  /* Painéis Quem Somos / Parceiros
     Tudo reduzido e com leitura confortável no celular */
  .text-panel{
    width:100vw;
    max-width:100vw;
  }
  .text-panel article{
    padding:78px 22px 44px;
  }
  .eyebrow{
    font-size:7px;
    letter-spacing:.17em;
    margin-bottom:17px;
  }
  .text-panel h2{
    font-size:clamp(34px,10vw,46px);
    line-height:1;
    margin-bottom:25px;
  }
  .text-panel article p:not(.eyebrow){
    font-size:13px;
    line-height:1.58;
    margin-bottom:16px;
  }
  .close{
    width:36px;
    height:36px;
    top:16px;
    right:16px;
    font-size:23px;
  }

  /* Revista / Projetos */
  .magazine{
    width:100vw;
    max-width:100vw;
  }
  .magazine-head{
    height:88px;
    padding:20px 22px 15px;
  }
  .magazine-head h2{
    font-size:24px;
  }
  .magazine-head .eyebrow{
    margin-bottom:5px;
    font-size:6px;
  }
  .magazine-cover{
    min-height:calc(100svh - 88px);
    padding:22px;
  }
  .cover-mark{
    gap:12px;
  }
  .cover-mark svg{
    width:48px;
    height:34px;
  }
  .cover-mark span{
    font-size:9px;
    letter-spacing:.28em;
  }
  .cover-copy{
    left:22px;
    right:22px;
    bottom:104px;
  }
  .cover-copy small{
    font-size:6px;
    letter-spacing:.16em;
  }
  .cover-copy h3{
    font-size:clamp(34px,11vw,48px);
    line-height:.98;
    margin:13px 0 16px;
  }
  .cover-copy p{
    font-size:11px;
    line-height:1.48;
    max-width:92%;
  }
  .open-edition{
    right:22px;
    bottom:28px;
    padding:12px 14px;
    font-size:7px;
    letter-spacing:.12em;
  }
  .edition-toolbar{
    height:48px;
    padding:0 10px;
  }
  .edition-toolbar button,
  .edition-toolbar a,
  .edition-toolbar span{
    font-size:6px;
    letter-spacing:.10em;
  }
  .pdf-object{
    height:calc(100% - 48px);
  }

  /* Contato:
     mensagem menor e mais clara, sem ocupar grande parte da tela */
  .contact-intro{
    height:auto;
    min-height:118px;
    padding:24px 54px 18px 22px;
  }
  .contact-intro span{
    font-size:6px;
    letter-spacing:.18em;
    margin-bottom:9px;
  }
  .contact-intro strong{
    font-size:19px;
    line-height:1.08;
    margin-bottom:7px;
  }
  .contact-intro small{
    font-size:9px;
    line-height:1.4;
    max-width:290px;
  }
  .contact-scene{
    width:100vw;
    margin:38px 0 64px;
  }

  /* Hotspots seguem proporcionais à imagem; aumenta área de toque sem criar placa nova */
  .contact-hotspot{
    min-width:44px;
    min-height:34px;
  }
}

@media (max-width: 390px){
  .topbar,.routebar{padding-left:16px;padding-right:16px}
  .text-panel article{padding-left:18px;padding-right:18px}
  .text-panel article p:not(.eyebrow){font-size:12.5px}
  .portal-title{font-size:9px}
  .contact-intro{
    padding-left:18px;
    padding-right:48px;
  }
  .contact-intro strong{font-size:18px}
  .contact-intro small{font-size:8.5px}
}


/* ==============================================================
   v12 — CONTATO REFEITO + FUMAÇA ANIMADA REAL
   ============================================================== */

/* A fumaça agora é um GIF transparente real sobre a caneca.
   Não depende de keyframes CSS e não é desligada por "reduzir movimento". */
.steam{display:none!important}
.steam-gif{
  position:absolute;
  z-index:7;
  left:18.8%;
  top:17.5%;
  width:13.5%;
  height:35%;
  object-fit:contain;
  pointer-events:none;
  opacity:.80;
  mix-blend-mode:screen;
}

.contact-panorama{
  position:absolute;
  inset:0;
  overflow:hidden;
}

/* Desktop continua limpo: imagem inteira como ambiente. */
@media (min-width:901px){
  .contact-intro{
    left:42px;
    top:30px;
    max-width:720px;
    display:block;
  }
  .contact-intro span{
    display:block;
    margin-bottom:9px;
  }
  .contact-intro strong{
    display:block;
    font-size:18px;
    line-height:1.15;
    margin-bottom:7px;
  }
  .contact-intro small{
    display:block;
    font-size:10px;
    max-width:520px;
  }
  .contact-swipe-hint{display:none}
}

/* MOBILE: o contato vira um panorama visitável.
   A imagem não é alterada e a placa física continua sendo o contato. */
@media (max-width:900px){
  .contact-panel{
    overflow:hidden!important;
    background:#111!important;
  }

  .contact-intro{
    position:absolute!important;
    z-index:30!important;
    left:0!important;
    right:0!important;
    top:0!important;
    height:auto!important;
    min-height:0!important;
    padding:20px 58px 18px 20px!important;
    background:linear-gradient(to bottom,rgba(241,238,231,.98),rgba(241,238,231,.93))!important;
    color:var(--ink)!important;
    box-shadow:0 1px 0 rgba(0,0,0,.08);
  }
  .contact-intro span{
    font-size:6px!important;
    letter-spacing:.22em!important;
    margin-bottom:7px!important;
  }
  .contact-intro strong{
    font-size:20px!important;
    line-height:1.03!important;
    margin-bottom:7px!important;
  }
  .contact-intro small{
    font-size:9px!important;
    line-height:1.35!important;
    max-width:300px!important;
  }

  .contact-panel .close{
    position:absolute!important;
    z-index:40!important;
    top:14px!important;
    right:14px!important;
    width:36px!important;
    height:36px!important;
  }

  .contact-panorama{
    position:absolute;
    left:0;
    right:0;
    top:105px;
    bottom:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    touch-action:pan-x;
    background:#111;
  }
  .contact-panorama::-webkit-scrollbar{display:none}

  .contact-scene{
    position:relative!important;
    left:0!important;
    top:0!important;
    transform:none!important;
    width:178vw!important;
    height:100%!important;
    aspect-ratio:auto!important;
    margin:0!important;
    overflow:hidden!important;
    scroll-snap-align:start;
  }
  .contact-scene>img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }

  .contact-swipe-hint{
    position:sticky;
    left:18px;
    top:18px;
    z-index:20;
    display:inline-flex;
    align-items:center;
    height:34px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:18px;
    background:rgba(15,16,16,.45);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    font-size:6px;
    letter-spacing:.16em;
    pointer-events:none;
  }

  /* Hotspots acompanham a imagem ampliada e ficam confortáveis para toque. */
  .contact-hotspot{
    z-index:12!important;
    min-width:46px!important;
    min-height:40px!important;
  }

  .steam-gif{
    left:18.5%;
    top:15.5%;
    width:14%;
    height:38%;
    opacity:.86;
  }
}

/* Não desligar o GIF da fumaça quando o aparelho usa "reduzir movimento". */
@media(prefers-reduced-motion:reduce){
  .steam-gif{display:block!important}
}


/* ==============================================================
   v13 — CORREÇÃO CIRÚRGICA DO CONTATO
   - zero texto digital sobre a fotografia
   - fumaça menor, mais sutil e alinhada à caneca
   - fechar discreto
   - desktop preservado
   - mobile tratado separadamente
   ============================================================== */

.contact-intro{display:none!important}

/* Fecha o contato sem parecer modal genérico pesado */
.contact-panel .close{
  background:rgba(245,242,236,.78)!important;
  border:1px solid rgba(32,35,34,.16)!important;
  width:34px!important;
  height:34px!important;
  font-size:20px!important;
  line-height:1!important;
  color:var(--ink)!important;
  box-shadow:none!important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Fumaça real, porém pequena e coerente com a escala da caneca */
.steam-gif{
  position:absolute!important;
  z-index:7!important;
  left:22.9%!important;
  top:25.2%!important;
  width:6.2%!important;
  height:19%!important;
  object-fit:contain!important;
  pointer-events:none!important;
  opacity:.42!important;
  mix-blend-mode:screen!important;
  filter:blur(.2px);
}

/* Desktop: imagem inteira e limpa, sem qualquer legenda digital */
@media (min-width:901px){
  .contact-panorama{
    position:absolute!important;
    inset:0!important;
    overflow:hidden!important;
    background:#111!important;
  }
  .contact-scene{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    transform:none!important;
    overflow:hidden!important;
  }
  .contact-scene>img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .contact-swipe-hint{display:none!important}
  .contact-panel .close{
    top:18px!important;
    right:18px!important;
  }
}

/* Mobile: panorama permanece, mas sem faixa/texto digital no topo */
@media (max-width:900px){
  .contact-panel{
    overflow:hidden!important;
    background:#111!important;
  }
  .contact-panorama{
    position:absolute!important;
    inset:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    touch-action:pan-x!important;
    background:#111!important;
  }
  .contact-panorama::-webkit-scrollbar{display:none!important}

  .contact-scene{
    position:relative!important;
    left:0!important;
    top:0!important;
    transform:none!important;
    width:178vw!important;
    height:100%!important;
    aspect-ratio:auto!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .contact-scene>img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }

  .contact-swipe-hint{
    position:sticky!important;
    left:16px!important;
    top:16px!important;
    z-index:20!important;
    display:inline-flex!important;
    align-items:center!important;
    height:30px!important;
    padding:0 11px!important;
    border:1px solid rgba(255,255,255,.35)!important;
    border-radius:16px!important;
    background:rgba(15,16,16,.28)!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
    color:#fff!important;
    font-size:5.5px!important;
    letter-spacing:.14em!important;
    pointer-events:none!important;
  }

  .contact-panel .close{
    position:absolute!important;
    z-index:40!important;
    top:12px!important;
    right:12px!important;
    width:32px!important;
    height:32px!important;
    font-size:18px!important;
    background:rgba(245,242,236,.72)!important;
  }

  /* Recalibragem da fumaça no panorama ampliado */
  .steam-gif{
    left:22.9%!important;
    top:24.8%!important;
    width:6.5%!important;
    height:19.5%!important;
    opacity:.40!important;
  }
}