/* ============================================================
   CINNAMON STUDIO — style.css
   Fase 2 · estrutura e pele. A página deve estar bonita e
   legível SEM JavaScript. Nenhum elemento nasce escondido
   aqui: estados iniciais de animação são aplicados só pelo
   JS (fases 3–4) via gsap.set / classe html.has-js.
   ============================================================ */

/* ---------- 1 · TOKENS ---------- */
:root{
  --dark:     #22231f;
  --dark-2:   #171816;
  --dark-3:   #2c2d28;
  --cream:    #f3eee5;
  --cream-2:  #f0eadc;
  --tan:      #b7a48e;
  --tan-soft: rgba(183,164,142,.28);
  --cream-60: rgba(243,238,229,.62);
  --cream-40: rgba(243,238,229,.40);
  --dark-60:  rgba(34,35,31,.66);   /* corpo de texto no bloco claro */
  --dark-soft: rgba(34,35,31,.22);  /* hairline no bloco claro */

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .6s;
  --dur: .9s;
  --dur-slow: 1.4s;

  --gutter: 24px;
  --margin: clamp(24px, 6vw, 120px);
  --section-pad: clamp(120px, 22vh, 260px);
}

/* ---------- 2 · RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--dark);
  color:var(--cream-60);
  font-family:"Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-weight:300;
  font-size:1.06rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* âncora interna nunca pode parar embaixo do header fixo. Vale para o
   scroll nativo (sem JS, reduced-motion e mobile, onde o Lenis é desligado);
   o caminho com Lenis compensa por offset em lenis-setup.js, porque a lib
   não lê scroll-margin. */
:root{ --header-h:68px; }  /* header real: 44px no mobile, 65px no desktop */
[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }

img{ display:block; max-width:100%; height:auto; }
/* <picture> é só o seletor de arquivo (960 no celular): transparente
   para o layout — todo o CSS continua mirando o <img> interno */
picture{ display:contents; }
figure{ margin:0; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--tan); color:var(--dark); }

:focus-visible{
  outline:2px solid var(--tan);
  outline-offset:4px;
}

/* border-radius proibido — só círculos explícitos (.is-circle etc.) */

/* ---------- 3 · TIPOGRAFIA ---------- */
.eyebrow{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--tan);
}

.display{
  font-weight:300;
  font-size:clamp(2.6rem, 8vw, 8rem);
  line-height:.98;
  letter-spacing:-.005em;
  color:var(--cream);
}

/* títulos de seção em fluxo — mesmo desenho, escala contida.
   break-word: válvula de escape — um token colado por NBSP (número+unidade)
   maior que a coluna quebra dentro da palavra em vez de ser cortado */
.display-2{
  font-weight:300;
  font-size:clamp(2.2rem, 5.6vw, 5.4rem);
  line-height:1.04;
  letter-spacing:-.005em;
  color:var(--cream);
  overflow-wrap:break-word;
}

.display-3{
  font-weight:300;
  font-size:clamp(1.6rem, 3.4vw, 2.8rem);
  line-height:1.15;
  letter-spacing:-.005em;
  color:var(--cream);
}

.num{
  font-weight:200;
  letter-spacing:-.02em;
  color:var(--cream);
}

.caption{
  font-weight:300;
  font-size:clamp(1rem, 1.4vw, 1.12rem);
  line-height:1.75;
  color:var(--cream-60);
  max-width:46ch;
}

/* Wordmark — logo oficial em curvas (Aeonis LT Pro Light Extended + Roses
   Bolero), extraído da identidade visual. Não é mais texto: o tamanho vem
   da largura, e a cor de currentColor. Proporção travada em 4.9278:1 pelo
   viewBox, então não há CLS.
   O logo oficial é MONOCROMÁTICO — as seis variantes da identidade mudam de
   cor por inteiro. Por isso "STUDIO" não é mais tan. */
.wordmark{
  display:inline-block;
  line-height:0;
  color:var(--cream);
}
.wordmark__art{
  display:block;
  width:100%;
  height:auto;
  fill:currentColor;
}
/* sprite do logo: presente no DOM para o <use>, invisível na página */
.logo-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
/* texto real do wordmark para leitores de tela e SEO */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- 4 · LAYOUT ---------- */
.container{
  width:100%;
  max-width:calc(1440px + 2 * var(--margin));
  margin-inline:auto;
  padding-inline:var(--margin);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
}

.section{
  position:relative;
  padding-block:var(--section-pad);
}
/* seções encadeadas no mesmo fundo dividem UM respiro só (o padding
   inferior da anterior) — sem vão duplo entre as sessões.
   #studio fica de fora: a seção da torre termina em fullbleed sem
   padding próprio, então o respiro do seam vem do topo do #studio. */
#arquitetura{ padding-top:0; }

.section-head{
  margin-bottom:clamp(48px, 8vh, 96px);
}
.section-head .display-2{ margin-top:1.4rem; }

.hairline{
  display:block;
  width:100%;
  height:1px;
  border:0;
  background:var(--tan-soft);
  transform-origin:left center; /* JS anima scaleX 0 → 1 */
}

/* fase 3 · split-text manual (window.CINNAMON.splitWords) —
   máscara por palavra para o masked word reveal do hero e das seções.
   O padding/margin compensa descendentes (g, p) sem abrir espaço no layout. */
.word-mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.12em;
  margin-bottom:-.12em;
}
.word-mask .word{
  display:inline-block;
}

/* ---------- 5 · OVERLAYS FIXOS ---------- */

/* grain de filme — sempre presente */
.grain{
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  opacity:.045;
  /* sem mix-blend-mode: blend sobre camada fixa força re-composição da página
     inteira a cada frame de scroll (imagens "somem" em janelas grandes);
     em .045 de opacidade o resultado visual é o mesmo */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  transform:translateZ(0); /* camada própria no compositor */
}
/* celular/touch: numa tela pequena e densa o grain a .045 é invisível,
   mas a camada fixa em tela cheia custa composição a cada frame de
   scroll — exatamente o orçamento que falta nas GPUs de celular */
@media (max-width:1023.98px), (hover:none) and (pointer:coarse){
  .grain{ display:none; }
}

/* cursor customizado — só existe com JS + ponteiro fino.
   A interpolação (lerp) é da fase 3; aqui só a pele. */
.cursor-dot,
.cursor-ring{
  display:none;
  position:fixed;
  top:0; left:0;
  z-index:100;
  pointer-events:none;
  border-radius:50%; /* círculo — exceção permitida */
  transform:translate(-50%,-50%);
}
.cursor-dot{
  width:6px; height:6px;
  background:var(--tan);
}
.cursor-ring{
  width:32px; height:32px;
  border:1px solid var(--tan-soft);
  transition:opacity .35s var(--ease-out);
}
/* expansão do anel: scale() via GSAP em ui.js — regra "só transform/opacity" */
.cursor-dot.is-hidden{ opacity:0; }
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  /* fase 3: em reduced-motion o cursor custom não é inicializado — não exibir */
  html.has-js:not(.is-reduced) .cursor-dot,
  html.has-js:not(.is-reduced) .cursor-ring{ display:block; }
}

/* rail de progresso — desktop. Legível em QUALQUER fundo (pedido do usuário em
   15/10/2026): o difference invertia o creme e, sobre o céu do 3D ou fotos em tom médio,
   o rótulo saía azulado e sumia. Agora o rótulo fica numa plaquinha escura translúcida
   (com desfoque do que passa atrás) e a linha e o nó ganham um contorno escuro fino —
   creme sobre escuro no dark, e o contorno segura no bloco creme. */
.rail{
  display:none;
  position:fixed;
  right:clamp(18px, 2.4vw, 44px);
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  align-items:center;
  flex-direction:column;
  gap:14px;
}
.rail__line{
  position:relative;
  width:1px;
  height:40vh;
  background:rgba(243,238,229,.45);
  box-shadow:0 0 0 1px rgba(23,24,22,.42);
}
.rail__fill{
  position:absolute;
  top:0; left:0;
  width:1px;
  height:100%;
  background:var(--cream);
  transform:scaleY(0);          /* cresce com o scroll — só transform */
  transform-origin:top center;
}
.rail__node{
  position:absolute;
  top:0;
  left:50%;
  width:7px; height:7px;
  border-radius:50%; /* círculo */
  background:var(--cream);
  box-shadow:0 0 0 2px rgba(23,24,22,.6);
  transform:translate(-50%,-50%);
}
.rail__label{
  writing-mode:vertical-rl;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream);
  padding:12px 6px;
  background:rgba(23,24,22,.34);           /* mais transparente e mais desfoque (pedido do usuário em 15/10) */
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  text-shadow:0 0 6px rgba(23,24,22,.8), 0 0 2px rgba(23,24,22,.9);
}
@media (min-width:1024px){
  .rail{ display:flex; }
}

/* ---------- 6 · HEADER ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(10px, 1.5vw, 18px) var(--margin); /* barra enxuta */
  pointer-events:none; /* só os filhos clicam */
  /* véu do menu. Base sólida: backdrop-filter num header fixo re-borra a
     área sob ele a CADA frame de scroll — no mobile isso trava a rolagem.
     O blur entra só onde há folga de GPU (ponteiro fino / telas grandes). */
  background:rgba(34,35,31,.82);
  border-bottom:1px solid rgba(183,164,142,.14);
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .site-header{
    background:rgba(34,35,31,.38);
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
  }
}
.site-header > *{ pointer-events:auto; }

.site-header .wordmark{ width:clamp(92px, 8.5vw, 118px); }

/* grupo à direita: atalho do tour + botão de menu */
.site-header__acoes{
  display:flex;
  align-items:center;
  gap:clamp(14px, 2vw, 28px);
}
/* Atalho "Experiência 360°" — mesma língua do botão de menu (eyebrow em
   caps, hairline da marca), com um glifo próprio: o círculo do motivo da
   marca atravessado por uma órbita. Ancora #tour; o scroll é do
   lenis-setup.js. Abaixo de 768px o rótulo encurta para "360°".
   "A torre em 3D" (#fachada) divide a mesma base: o glifo é o círculo
   com um cubo de arestas dentro, que gira 60° no hover — o hexágono
   cai sobre si mesmo e o Y interno vira o cubo visto de baixo. */
.header-360,
.header-3d{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px; /* alvo de toque */
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--cream);
  transition:color .4s var(--ease-out);
}
.header-360__icon,
.header-3d__icon{
  width:24px;
  height:24px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1;
}
.header-360__icon ellipse{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .4s var(--ease-out);
}
.header-3d__cubo{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .6s var(--ease-out);
}
/* só com ponteiro de verdade: no toque o :hover gruda no link recém-tocado */
@media (hover:hover){
  .header-360:hover,
  .header-3d:hover{ color:var(--tan); }
  .header-360:hover .header-360__icon ellipse{ transform:scaleX(.7); }
  .header-3d:hover .header-3d__cubo{ transform:rotate(60deg); }
}
.header-360__long,
.header-3d__long{ display:none; }
@media (min-width:768px){
  .header-360__long,
  .header-3d__long{ display:inline; }
}
@media (max-width:767px){
  .header-360,
  .header-3d{ font-size:.6rem; letter-spacing:.22em; }
}
@media (max-width:359px){
  /* 320px: com os dois atalhos o "360°" encostava na marca — só os glifos;
     o rótulo continua no aria-label (mesmo recurso do botão de menu) */
  .header-360__txt,
  .header-3d__txt{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .header-360,
  .header-3d{ min-width:44px; justify-content:center; } /* alvo de toque */
  .site-header__acoes{ gap:12px; }
}
/* hairline vertical entre os dois controles — só existe com o botão de menu */
.site-header .header-menu-btn::before{
  content:"";
  width:1px;
  height:18px;
  background:var(--tan-soft);
}

/* O CTA "Entre em contato" saiu do header: ele vive no rodapé do drawer,
   e ter os dois deixava o mesmo destino repetido a um clique de distância.
   O header fica só com a marca à esquerda e o botão de menu à direita. */

/* ---------- 7 · PRELOADER ----------
   Sem JS ele NÃO aparece (display:none) — a página nunca
   fica presa atrás dele. A fase 4 liga com html.has-js. */
.preloader{
  display:none;
  position:fixed;
  inset:0;
  z-index:90;
  background:var(--dark);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
}
html.has-js .preloader{ display:flex; }
.preloader .wordmark{ width:clamp(184px, 30vw, 268px); }
.preloader__bar{
  width:240px;
  height:1px;
  background:var(--tan-soft);
  position:relative;
  overflow:hidden;
}
.preloader__bar-fill{
  position:absolute;
  inset:0;
  background:var(--tan);
  transform:scaleX(0);
  transform-origin:left center;
}
.preloader__count{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-60); /* contraste AA */
}

/* ---------- 8 · MOTIVO CÍRCULO ---------- */
.ring{
  position:absolute;
  color:var(--tan-soft);
  pointer-events:none;
  z-index:0;
}
.ring--hero{
  width:min(82vw, 900px);
  height:min(82vw, 900px);
  top:50%;
  right:-18vw;
  transform:translateY(-58%);
  opacity:.75;
}
.ring--finale{
  width:min(70vw, 760px);
  height:min(70vw, 760px);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  opacity:.6;
}

/* ---------- 9 · HERO — “A CHEGADA” ----------
   Sem JS: quatro telas empilhadas, cada uma 100svh, legíveis.
   Fase 3 (html.has-js): pin + crossfade — cenas viram camadas. */
.hero{
  position:relative;
  background:var(--dark-2);
}

.hero-scene{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background-size:cover;      /* LQIP inline no HTML fica AQUI (camada que não escala): */
  background-position:center; /* pintar na media re-rasterizava a cena inteira no Ken Burns */
}

/* gancho para a fase 3: cenas empilhadas em camadas dentro do pin.
   Em reduced-motion (html.is-reduced, fase 3) o empilhamento NÃO se aplica:
   as quatro cenas ficam em fluxo, estáticas e legíveis, sem pin. */
html.has-js:not(.is-reduced) .hero{ height:100svh; overflow:hidden; }
/* sem JS (ou reduced) a intro e o chapter-card da torre coexistiriam
   na mesma tela — o card fica só na narrativa scrollada */
html:not(.has-js) .hero-scene[data-scene="1"] .chapter-card,
html.is-reduced .hero-scene[data-scene="1"] .chapter-card{ display:none; }
html.has-js:not(.is-reduced) .hero-scene{ position:absolute; inset:0; min-height:0; }

.hero-scene__media{
  position:absolute;
  inset:0;
  overflow:hidden; /* não pinta nada: o scale do Ken Burns vira só transform no compositor */
}
.hero-scene__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translateZ(0); /* textura própria na GPU — sem re-raster durante o scale */
}
/* véu de abertura da chegada: a 1ª tela nasce quase coberta de dark —
   o prédio aparece em silhueta quente no centro, sem o azul do céu
   disputando com o layout. O scroll dissolve o véu e revela a cor
   real do vídeo (hero.js). */
.hero-vinheta{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse 115% 92% at 58% 40%,
    rgba(23,24,22,.78) 0%,
    rgba(23,24,22,.9) 52%,
    rgba(23,24,22,.985) 100%);
}

/* sequência de frames do vídeo, desenhada pelo scroll (hero.js).
   Transparente até o JS desenhar — a foto de fallback fica embaixo. */
.hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

.hero-scene__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(23,24,22,.92) 0%,
    rgba(23,24,22,.55) 30%,
    rgba(23,24,22,.12) 62%,
    rgba(23,24,22,0) 85%
  );
}

/* (a cena do céu foi substituída: o prédio abre a página) */

/* --- intro sobre a cena da torre --- */
.hero-intro{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding-bottom:clamp(96px, 16vh, 180px);
}
.hero-intro .wordmark{
  width:min(78vw, 700px);
}
.hero-slogan{
  margin-top:clamp(28px, 4.5vh, 52px);
  font-weight:300;
  font-size:clamp(1.05rem, 2.1vw, 1.55rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cream);
}
.hero-assinatura{
  margin-top:1.1rem;
  max-width:44ch;
}
.hero-selo{
  margin-top:clamp(28px, 4vh, 44px);
  display:inline-block;
  padding-top:1.1em;
  border-top:1px solid var(--tan-soft);
}

/* hint “ROLE” */
.scroll-hint{
  position:absolute;
  left:50%;
  bottom:clamp(20px, 3.5vh, 40px);
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--cream-40);
}
.scroll-hint__line{
  width:1px;
  height:44px;
  background:var(--tan-soft);
  position:relative;
  overflow:hidden;
}
.scroll-hint__line::after{ /* pulso desce — CSS puro, some em reduced-motion */
  content:"";
  position:absolute;
  top:-40%;
  left:0;
  width:1px;
  height:40%;
  background:var(--tan);
  animation:hintdrop 2.2s var(--ease-out) infinite;
}
@keyframes hintdrop{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(260%); }
}

/* --- chapter-cards (cenas II–IV) --- */
.chapter-card{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom:clamp(72px, 13vh, 150px);
  max-width:none;
}
.chapter-card__inner{
  max-width:640px;
}
.chapter-card .display{
  font-size:clamp(2.4rem, 6.4vw, 6.2rem);
  margin-top:1.2rem;
}
.chapter-card .hairline{
  width:min(240px, 40%);
  margin-block:1.6rem 1.4rem;
}

/* ---------- 10 · SEÇÃO 02 — O PROJETO ---------- */
.projeto__lead{
  max-width:58ch;
  margin-top:2rem;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gutter);
  margin-top:clamp(64px, 10vh, 120px);
  border-top:1px solid var(--tan-soft);
}
.stat{
  padding-top:clamp(28px, 4vh, 44px);
}
.stat__num{
  display:block;
  font-weight:200;
  font-size:clamp(2.6rem, 5vw, 4.8rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--cream);
  white-space:nowrap;
}
.stat__num sup{
  font-size:.34em;
  font-weight:300;
  color:var(--tan);
  letter-spacing:0;
  vertical-align:.9em;
  margin-left:.18em;
}
.stat__label{
  display:block;
  margin-top:1rem;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-60); /* contraste AA */
}
@media (max-width:900px){
  .stats{ grid-template-columns:repeat(2, 1fr); row-gap:clamp(40px, 6vh, 64px); }
}
@media (max-width:420px){
  .stats{ grid-template-columns:1fr; }
}

/* ---------- 11 · SEÇÃO 03 — A TORRE ---------- */
.torre{ padding-bottom:0; }

.torre__hero{
  position:relative;
  min-height:min(92svh, 980px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  margin-top:clamp(48px, 8vh, 96px);
}
.torre__media{
  position:absolute;
  inset:-12% 0; /* folga vertical para o parallax da fase 4 */
  background-color:#2c2d28;
}
.torre__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.torre__scrim{
  position:absolute;
  inset:0;
  /* a foto da torre tem céu e vidro claros; o scrim precisa cobrir toda a
     faixa do card, não só o rodapé, senão o texto perde contraste */
  background:linear-gradient(
    to top,
    rgba(23,24,22,.94) 0%,
    rgba(23,24,22,.86) 30%,
    rgba(23,24,22,.62) 55%,
    rgba(23,24,22,.24) 78%,
    rgba(23,24,22,0) 100%
  );
}
@media (max-width:768px){
  /* em coluna única o card ocupa o meio da imagem: véu quase sólido */
  .torre__scrim{
    background:linear-gradient(
      to top,
      rgba(23,24,22,.96) 0%,
      rgba(23,24,22,.92) 45%,
      rgba(23,24,22,.78) 72%,
      rgba(23,24,22,.5) 100%
    );
  }
}
.torre__card{
  position:relative;
  z-index:2;
  width:100%;
  padding-block:clamp(56px, 10vh, 120px);
}
.torre__card .display-2{ margin-top:1.2rem; max-width:16ch; }
.torre__card .caption{ margin-top:1.4rem; color:var(--cream); opacity:.88; }

.torre__faixa{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
  padding-block:clamp(64px, 10vh, 140px);
}
.torre__faixa figure{ overflow:hidden; }
.torre__faixa .frame{
  overflow:hidden;
  background-color:var(--dark-3);
}
.torre__faixa .frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--dur) var(--ease-out);
}
.torre__faixa figure:hover .frame img{ transform:scale(1.04); }
/* mosaico cheio: 2 linhas de altura uniforme, larguras 7/5 e 5/7
   espelhadas — sem coluna vazia, imagens grandes. O corte de cada
   render é dirigido por object-position (o assunto fica no quadro). */
.torre__f1{ grid-column:1 / span 7; }
.torre__f2{ grid-column:8 / span 5; }
.torre__f3{ grid-column:1 / span 5; }
.torre__f4{ grid-column:6 / span 7; }
.torre__f3,
.torre__f4{ margin-top:var(--gutter); }
.torre__faixa .frame{ height:clamp(320px, 34vw, 560px); }
.torre__f1 .frame img{ object-position:50% 72%; } /* chegada: rua e pessoas */
.torre__f2 .frame img{ object-position:50% 58%; } /* letreiro e lounge */
.torre__f3 .frame img{ object-position:34% 50%; } /* piscina à esquerda */
.torre__f4 .frame img{ object-position:6% 50%; } /* letreiro colado à esquerda no render */
.torre__faixa figcaption{
  margin-top:1rem;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-60); /* contraste AA */
}
@media (max-width:768px){
  .torre__f1,.torre__f2,.torre__f3,.torre__f4{ grid-column:1 / -1; margin-top:0; }
  .torre__faixa .frame{ height:clamp(240px, 62vw, 440px); }
}

/* ---------- 12 · SEÇÃO 04 — PLANTA ---------- */
.planta__grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
  align-items:start; /* planta nasce no MESMO nível do topo do texto */
}
.planta__texto{ grid-column:1 / span 5; }
.planta__figura{
  grid-column:6 / span 7;
  /* sticky: ao chegar ao meio da tela a planta trava enquanto o texto
     rola; solta no fim da coluna de texto, alinhada com o final dele.
     O min() cobre telas largas (container trava em 1440). */
  position:sticky;
  top:max(90px, calc(50svh - min(14vw, 230px)));
}

.planta__num{
  font-weight:200;
  font-size:clamp(3.4rem, 7.4vw, 7rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--cream);
  margin-top:2rem;
  white-space:nowrap;
}
.planta__num .unidade{
  font-size:.32em;
  font-weight:300;
  color:var(--tan);
  letter-spacing:.06em;
  margin-left:.2em;
}
.planta__sub{
  margin-top:1.1rem;
  color:var(--cream-60);
}
.planta__caption{ margin-top:1.4rem; }

.planta__lista{
  margin-top:clamp(40px, 6vh, 64px);
}
.planta__lista li{
  border-top:1px solid var(--tan-soft);
  padding-block:1.15em;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream);
  display:flex;
  align-items:baseline;
  gap:1.4em;
}
.planta__lista li:last-child{ border-bottom:1px solid var(--tan-soft); }
.planta__lista .idx{
  font-weight:200;
  color:var(--tan);
  letter-spacing:.1em;
}

.planta__frame{
  overflow:hidden;
  background-color:var(--dark-3); /* placeholder de carregamento — dentro da paleta */
}
.planta__frame img{
  width:100%;
  height:auto;
  transition:transform var(--dur-slow) var(--ease-out);
}
.planta__figura:hover .planta__frame img{ transform:scale(1.03); }
.planta__legenda{
  margin-top:1rem;
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream-60); /* contraste AA */
}
@media (max-width:1024px){
  .planta__texto{ grid-column:1 / -1; }
  .planta__figura{ grid-column:1 / -1; margin-top:clamp(40px, 7vh, 72px); position:static; } /* sem sticky em coluna única */
}

/* ---------- 13 · SEÇÃO 05 — GALERIA ----------
   Sem JS: scroll horizontal nativo com snap (desktop e mobile).
   Fase 4 transforma em pin horizontal no desktop. */
.galeria{
  background:var(--dark-2);
  /* pinada em tela cheia com o conteúdo (título + faixa) centrado
     verticalmente; o padding-top extra desconta o menu fixo */
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(48px, 7vh, 84px);
  padding-top:calc(clamp(48px, 7vh, 84px) + 44px);
  /* Com JS a faixa anda por transform e deixa de ser uma área de rolagem
     própria: sem este corte os cards vazavam ~2000px para a direita do
     DOCUMENTO. O body esconde a barra, mas o Chrome móvel conta o
     transbordo para o zoom mínimo e estende o header fixo para a largura
     toda — o botão de menu ia parar fora da tela até passar da galeria. */
  overflow:hidden;
}
@supports (overflow:clip){
  /* clip não cria área de rolagem: só corta */
  .galeria{ overflow-x:clip; overflow-y:visible; }
}

.galeria__track{
  display:flex;
  gap:clamp(28px, 2.6vw, 48px); /* respiro lateral claro entre as imagens */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-inline:var(--margin);
  padding-bottom:18px;
  scrollbar-width:thin;
  scrollbar-color:var(--tan-soft) transparent;
}
.galeria__item{
  flex:0 0 auto;
  /* com JS: largura derivada da altura livre medida (--galeria-media-h),
     para título + imagem + legenda sempre caberem na tela.
     Sem JS: fallback pelo viewport. */
  width:min(62vw, 880px, max(320px, calc((100svh - 260px) * 1.5)));
  scroll-snap-align:center;
}
html.has-js .galeria__item{
  width:calc(var(--galeria-media-h, 400px) * 1.5); /* o JS já limita pela largura */
}
html.has-js .galeria__frame{ height:var(--galeria-media-h, auto); }
.galeria__frame{
  overflow:hidden;
  aspect-ratio:3 / 2;
  background-color:var(--dark-3);
  transition:transform var(--dur) var(--ease-out); /* hover no frame */
}
.galeria__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* sem transition aqui: o zoom scrubado (GSAP) é dono do transform da img */
}
.galeria__item:hover .galeria__frame{ transform:scale(1.02); }
.galeria__item figcaption{
  margin-top:1.1rem;
  display:flex;
  align-items:baseline;
  gap:1.2em;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-60); /* contraste AA */
}
.galeria__item figcaption .idx{
  font-weight:200;
  color:var(--tan);
  letter-spacing:.1em;
}
@media (max-width:768px){
  .galeria__item{ width:86vw; }
}

/* ---------- 5b · DE PERTO ----------
   Mídia presa por position:sticky (CSS puro — funciona no scroll nativo
   do celular, onde o Lenis é desligado, e não empilha um terceiro pin).
   Os renders ficam empilhados na moldura; o JS move/amplia a imagem
   ativa a cada passo e faz o crossfade quando o render muda.
   Sem JS e com reduced-motion: nada gruda, cada passo mostra o
   próprio recorte estático. */
.deperto{ --deperto-top:calc(var(--header-h) + 16px); }
.deperto__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px, 4vw, 72px);
  align-items:start;
}
.deperto__media{ min-width:0; }
.deperto__frame{
  position:relative;
  width:100%;
  aspect-ratio:3 / 2;
  max-height:calc(100svh - var(--deperto-top) - 72px);
  overflow:hidden;
  background-color:var(--dark-3); /* placeholder dentro da paleta */
}
.deperto__frame picture{ display:contents; }
.deperto__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* sem transition: o transform/opacity é do GSAP */
}
/* sem JS (e no reduced-motion, abaixo) só o primeiro render aparece */
.deperto__img:not(.is-active){ opacity:0; }
.deperto--live .deperto__img{ opacity:1; }   /* o JS assume via inline */
.deperto__legenda,
.tour__legenda{
  margin-top:1rem;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-60); /* contraste AA, como a legenda da galeria */
}

.deperto__passos{ min-width:0; }
.deperto__passo{
  position:relative;
  padding-block:clamp(28px, 5vh, 48px);
  border-top:1px solid var(--tan-soft);
}
.deperto__passo .eyebrow{
  display:flex;
  align-items:baseline;
  gap:1.2em;
}
.deperto__passo .eyebrow .idx{
  font-weight:200;
  color:var(--tan);
  letter-spacing:.1em;
}
.deperto__titulo{
  margin-top:1rem;
  font-weight:300;
  font-size:clamp(1.5rem, 2.6vw, 2.4rem);
  line-height:1.12;
  letter-spacing:-.005em;
  color:var(--cream);
  text-wrap:balance;
}
.deperto__passo .caption{ margin-top:.8rem; max-width:34ch; }
/* recorte estático: só sem JS / reduced-motion */
.deperto__static{ display:block; margin-top:1.4rem; background-color:var(--dark-3); }
html.has-js .deperto__static{ display:none; }

/* com o JS vivo e a seção NA TELA: passo fora de foco recua, o ativo
   acende. Fora da tela ninguém recua — o texto nasce com contraste AA
   (Lighthouse/axe medem com a página no topo). */
.deperto--live .deperto__passo{ transition:opacity .5s var(--ease-out); }
.deperto--live.is-inview .deperto__passo{ opacity:.42; }
.deperto--live.is-inview .deperto__passo.is-active{ opacity:1; }

@media (min-width:1024px){
  .deperto__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  /* a mídia ocupa TODA a faixa livre abaixo do header e centra a imagem
     dentro dela: o respiro acima e abaixo do quadro fica igual, em vez
     de a imagem colar no topo e sobrar o vazio embaixo. A altura da
     caixa é o que o sticky segura; o conteúdo é que se centraliza. */
  .deperto__media{
    position:sticky;
    top:var(--deperto-top);
    height:calc(100svh - var(--deperto-top));
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .deperto__passo{
    min-height:62vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .deperto__passo:first-child{ border-top:0; }
  .deperto__passos{ padding-top:min(8vh, 72px); }
}
@media (max-width:1023.98px){
  .deperto{ --deperto-top:calc(var(--header-h) - 12px); } /* header real: 44px */
  .deperto__media{
    position:sticky;
    top:var(--deperto-top);
    z-index:1;
    background:var(--dark); /* o texto passa por baixo, não por cima */
    padding-bottom:8px;
  }
  /* a mídia ocupa até ~50% da tela; o texto vive na metade de baixo.
     Passo de 40vh + gatilhos do JS a 92% mantêm o passo ativo visível
     o tempo todo abaixo da mídia. */
  .deperto__frame{ max-height:min(44svh, 100vw * 2 / 3); }
  .deperto__legenda{ margin-top:.7rem; }
  .deperto__passo{ min-height:40vh; }
  .deperto__passo:first-child{ border-top:0; }
  .deperto__passos{ padding-top:4px; }
}

/* lightbox da galeria: expandir e dar zoom (ui.js) */
.lightbox{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(23,24,22,.95);
}
.lightbox.is-open{ display:flex; }
.lightbox__img{
  max-width:min(94vw, 1600px);
  max-height:86svh;
  width:auto;
  height:auto;
  cursor:zoom-in;
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
}
.lightbox.is-zoomed .lightbox__img{ cursor:grab; }
.lightbox__close{
  position:absolute;
  top:clamp(16px, 2.4vh, 28px);
  right:var(--margin);
  z-index:2;
  background:none;
  border:0;
  border-bottom:1px solid var(--tan-soft);
  color:var(--cream);
  font-family:inherit;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  padding:.35em 0;
  cursor:pointer;
  transition:color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.lightbox__close:hover{ color:var(--tan); border-color:var(--tan); }
.lightbox__legend{
  position:absolute;
  bottom:clamp(16px, 3vh, 32px);
  left:var(--margin);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-60);
}
.galeria__frame{ cursor:zoom-in; } /* imagens clicáveis */

/* ---------- 14 · SEÇÃO 06 — MARQUEE + BLOCO CLARO ---------- */
.potencial{ padding-block:0; } /* marquee e bloco-claro carregam o próprio respiro */

.marquee{
  overflow:hidden;
  padding-block:clamp(56px, 9vh, 110px);
  border-block:1px solid var(--tan-soft);
}
.marquee__row{
  display:flex;
  gap:0;
  width:max-content;
  white-space:nowrap;
  font-weight:200;
  font-size:clamp(2.2rem, 6vw, 5.6rem);
  line-height:1.15;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--cream);
  will-change:transform; /* deslocamento contínuo na fase 4 */
}
.marquee__row + .marquee__row{ margin-top:.4em; }
.marquee__row--outline{
  color:transparent;
  -webkit-text-stroke:1px var(--tan);
}
.marquee__chunk{ padding-right:.6em; }

.bloco-claro{
  background:var(--cream-2);
  color:var(--dark-60);
  padding-block:var(--section-pad);
  /* sem margin-top: a fresta transparente mostrava o body — escura antes
     do morph, sumia quando ele disparava e parecia bug. O bloco emenda
     direto na hairline inferior do marquee. */
}
.bloco-claro .eyebrow{ color:var(--dark); opacity:.8; }
.bloco-claro .display-2{ color:var(--dark); max-width:14ch; }
.bloco-claro .hairline{ background:var(--dark-soft); }

.potencial__corpo{
  max-width:56ch;
  margin-top:1.6rem;
  font-size:1.05rem;
  line-height:1.75;
}
.potencial__fonte{
  max-width:56ch;
  margin-top:1rem;
  font-size:.78rem;
  letter-spacing:.02em;
  opacity:.62;
}

.pilares{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(32px, 4vw, 64px);
  margin-top:clamp(64px, 10vh, 120px);
}
.pilar__num{
  font-weight:200;
  font-size:clamp(2rem, 3.4vw, 3.2rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--dark);
}
.pilar .hairline{ margin-block:1.4rem; }
.pilar h3{
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--dark);
}
.pilar p{
  margin-top:.9rem;
  font-size:1rem;
  line-height:1.75;
}
@media (max-width:768px){
  .pilares{ grid-template-columns:1fr; }
}

/* ---------- 15 · SEÇÃO 07 — ESTRUTURA & SERVIÇOS ---------- */
.servicos{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gutter);
}
.servico{
  border:1px solid var(--tan-soft);
  padding:clamp(28px, 3vw, 44px);
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:2.5rem;
  transition:border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.servico:hover{
  border-color:var(--tan);
  transform:translateY(-4px);
}
.servico__num{
  font-weight:200;
  font-size:1.6rem;
  letter-spacing:-.02em;
  color:var(--tan);
  opacity:.55;
  transition:opacity .4s var(--ease-out);
}
.servico:hover .servico__num{ opacity:1; }
.servico h3{
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream);
}
.servico p{
  margin-top:.7rem;
  font-size:.96rem;
  color:var(--cream-60);
}
.servico__lista{
  margin:1rem 0 0;
  padding:0;
  list-style:none;
}
.servico__lista li{
  position:relative;
  padding-left:1.15rem;
  font-size:.94rem;
  font-weight:300;
  line-height:1.55;
  color:var(--cream-60);
}
.servico__lista li + li{ margin-top:.42rem; }
.servico__lista li::before{ /* hairline da marca no lugar de bullet/ícone */
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:7px;
  height:1px;
  background:var(--tan);
  opacity:.7;
}
@media (max-width:1024px){
  .servicos{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .servicos{ grid-template-columns:1fr; }
}

/* ---------- 15b · EXPERIÊNCIA 360° ----------
   Palco full-bleed; o panorama é desenhado em WebGL por js/tour360.js.
   Em fluxo o gesto vertical é da PÁGINA: touch-action:pan-y e a roda
   continuam rolando o site — girar é arrastar. Na tela cheia
   (.is-expanded) o palco assume o gesto inteiro, como no arquivo original.
   Estados, todos postos pelo JS:
     .is-ready     controles ligados         .is-webgl  canvas no lugar do plano
     .is-live      há um quadro desenhado    .is-loading  cena a caminho
     .is-touched   já houve o primeiro gesto .is-expanded tela cheia
   Sem JS: só o panorama plano da primeira cena, o contador e o título. */
.tour{ padding-top:0; } /* divide o respiro com #estrutura, como #arquitetura */
.tour__lead{ margin-top:1.6rem; }

.tour__stage{
  position:relative;
  height:min(84svh, 900px);
  min-height:520px;
  overflow:hidden;
  background-color:var(--dark-3); /* placeholder dentro da paleta */
  color:var(--cream);
}
.tour__poster,
.tour__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.tour__poster{ object-fit:cover; }
.tour__canvas{
  display:none;
  opacity:0;
  cursor:grab;
  touch-action:pan-y;
  transition:opacity .45s var(--ease-out); /* = FADE em js/tour360.js */
}
.tour__canvas:active{ cursor:grabbing; }
.tour__canvas:focus-visible{ outline-offset:-6px; }
.tour__stage.is-webgl .tour__canvas{ display:block; }
.tour__stage.is-webgl .tour__poster{ visibility:hidden; } /* a troca de cena passa pelo escuro, não pelo plano */
.tour__stage.is-live .tour__canvas{ opacity:1; }

/* véu neutro em cima e embaixo: é ele, e não sombra de texto, que
   segura a leitura sobre o render */
.tour__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(23,24,22,.64) 0%,
    rgba(23,24,22,0) 27%,
    rgba(23,24,22,0) 52%,
    rgba(23,24,22,.6) 80%,
    rgba(23,24,22,.88) 100%
  );
}

.tour__loading{
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:var(--tan);
  opacity:0;
  pointer-events:none;
}
.tour__stage.is-loading .tour__loading{
  opacity:1;
  animation:tour-loading 1.6s var(--ease-out) infinite;
}
@keyframes tour-loading{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(100%); }
}

/* indicador de arraste — no centro do palco, o círculo do motivo da marca
   entre duas setas em hairline, na mesma placa dos botões de ação. O ponto
   desliza de um lado ao outro, o anel pulsa e as setas abrem: só transform
   e opacity. Sai no primeiro gesto (.is-touched) e não volta na sessão. */
.tour__drag{
  position:absolute;
  top:50%;
  left:50%;
  display:none;
  align-items:center;
  gap:14px;
  padding:14px 20px;
  border:1px solid var(--cream-40);
  background:rgba(23,24,22,.48);
  color:var(--cream);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.tour__stage.is-webgl.is-live .tour__drag{ display:flex; }
.tour__stage.is-touched .tour__drag{ opacity:0; visibility:hidden; }
.tour__drag-anel{
  position:relative;
  width:56px;
  height:56px;
  border:1px solid var(--cream);
  border-radius:50%; /* círculo — exceção permitida */
}
.tour__drag-anel::before,
.tour__drag-anel::after{
  content:"";
  position:absolute;
  border-radius:50%; /* círculo */
}
.tour__drag-anel::before{ /* o dedo */
  top:50%;
  left:50%;
  width:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  background:var(--cream);
  animation:tour-dedo 2.4s ease-in-out infinite;
}
.tour__drag-anel::after{ /* a onda do pulso */
  inset:-1px;
  border:1px solid var(--cream);
  animation:tour-pulso 2.4s var(--ease-out) infinite;
}
.tour__drag-seta{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  animation:tour-seta 2.4s ease-in-out infinite;
}
.tour__drag-seta:first-child{ --tour-lado:-1; }
.tour__drag-seta:last-child{ --tour-lado:1; }
.tour__stage.is-touched .tour__drag-anel::before,
.tour__stage.is-touched .tour__drag-anel::after,
.tour__stage.is-touched .tour__drag-seta{ animation:none; }
@keyframes tour-dedo{
  0%,100%{ transform:translateX(-13px); }
  50%{ transform:translateX(13px); }
}
@keyframes tour-pulso{
  from{ transform:scale(1); opacity:.85; }
  to{ transform:scale(1.6); opacity:0; }
}
@keyframes tour-seta{
  0%,100%{ transform:translateX(0); opacity:.5; }
  50%{ transform:translateX(calc(var(--tour-lado) * 7px)); opacity:1; }
}

/* os contêineres não seguram o ponteiro: o arrasto atravessa até o canvas */
.tour__top,
.tour__hint,
.tour__actions,
.tour__rooms{ display:none; }
.tour__stage.is-ready .tour__rooms{ display:flex; }
.tour__stage.is-webgl .tour__hint{ display:block; }
.tour__stage.is-webgl .tour__actions{ display:grid; }
.tour__stage.is-expanded .tour__top{ display:flex; }

.tour__top{
  position:absolute;
  inset:0 0 auto 0;
  align-items:center;
  gap:clamp(20px, 3vw, 44px);
  padding:clamp(18px, 2.6vh, 28px) var(--margin);
  pointer-events:none;
}
/* a marca empurra o resto para a direita — com ou sem o local, que some no celular */
.tour__top .wordmark{ width:clamp(104px, 9vw, 132px); margin-right:auto; }
.tour__place{ color:var(--cream); }
.tour__close{
  background:none;
  border:0;
  border-bottom:1px solid var(--tan-soft);
  color:var(--cream);
  font-family:inherit;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  padding:.35em 0;
  cursor:pointer;
  pointer-events:auto;
  transition:color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.tour__close:hover{ color:var(--tan); border-color:var(--tan); }

.tour__hint{
  position:absolute;
  top:clamp(20px, 3.4vh, 36px);
  left:var(--margin);
  right:var(--margin);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream);
  pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.tour__stage.is-expanded .tour__hint{ top:clamp(84px, 11vh, 108px); }
.tour__stage.is-touched .tour__hint{ opacity:.3; }
/* "role para aproximar" só é verdade na tela cheia e com roda */
.tour__hint-zoom{ display:none; }
@media (hover:hover) and (pointer:fine){
  .tour__stage.is-expanded .tour__hint-zoom{ display:inline; }
}

.tour__actions{
  position:absolute;
  top:50%;
  right:var(--margin);
  gap:8px;
  transform:translateY(-50%);
}
.tour__action{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--cream-40);
  background:rgba(23,24,22,.48);
  color:var(--cream);
  cursor:pointer;
  transition:background-color .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out);
}
/* só com ponteiro de verdade: no toque o :hover gruda no botão recém-tocado */
@media (hover:hover){
  .tour__action:hover{
    background:var(--tan);
    border-color:var(--tan);
    color:var(--dark);
  }
  .tour__room:hover img{ transform:scale(1.08); opacity:.95; }
}
.tour__action svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1;
}
.tour__icon-fechar,
.tour__stage.is-expanded .tour__icon-abrir{ display:none; }
.tour__stage.is-expanded .tour__icon-fechar{ display:block; }

.tour__bottom{
  position:absolute;
  inset:auto 0 0 0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(20px, 3vw, 40px);
  padding:0 var(--margin) clamp(22px, 3.6vh, 36px);
  pointer-events:none;
}
.tour__info{ min-width:0; }
.tour__title{ margin-top:.7rem; }

.tour__rooms{
  gap:8px;
  max-width:min(760px, 62vw);
  overflow-x:auto;
  scrollbar-width:none;
  pointer-events:auto;
}
.tour__rooms::-webkit-scrollbar{ display:none; }
.tour__room{
  position:relative;
  flex:0 0 auto;
  width:120px;
  height:80px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--cream-40);
  background:var(--dark-3);
  color:var(--cream);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .4s var(--ease-out);
}
.tour__room:focus-visible{ outline-offset:-4px; } /* a faixa rola: outline por fora seria cortado */
.tour__room img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.72;
  transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.tour__room[aria-current="true"]{ border:2px solid var(--tan); }
.tour__room[aria-current="true"] img{ opacity:.9; }
.tour__room span{
  position:absolute;
  inset:auto 0 0 0;
  padding:18px 8px 7px;
  font-size:.56rem;
  font-weight:500;
  letter-spacing:.14em;
  line-height:1.35;
  text-transform:uppercase;
  background:linear-gradient(to top, rgba(23,24,22,.88), rgba(23,24,22,0));
}

.tour__error{
  position:absolute;
  top:50%;
  left:50%;
  max-width:min(350px, calc(100% - 2 * var(--margin)));
  padding:24px;
  border:1px solid var(--tan-soft);
  background:rgba(23,24,22,.88);
  color:var(--cream);
  text-align:center;
  transform:translate(-50%,-50%);
}

/* tela cheia. Com a Fullscreen API o palco vai para a top layer; onde ela
   não existe para elementos (iPhone) a mesma classe o fixa sobre a página,
   acima do lightbox (120). */
.tour__stage.is-expanded{
  position:fixed;
  inset:0;
  z-index:130;
  width:100%;
  height:100%;
  min-height:0;
}
.tour__stage.is-expanded .tour__canvas{ touch-action:none; }

@media (max-width:768px){
  .tour__stage{ height:min(78svh, 720px); min-height:460px; }
  /* título + faixa ocupam quase um terço do palco: o véu sobe junto */
  .tour__scrim{
    background:linear-gradient(
      to bottom,
      rgba(23,24,22,.64) 0%,
      rgba(23,24,22,0) 24%,
      rgba(23,24,22,0) 44%,
      rgba(23,24,22,.66) 70%,
      rgba(23,24,22,.9) 100%
    );
  }
  .tour__bottom{ display:block; padding-bottom:18px; }
  .tour__info{ margin-bottom:14px; }
  /* a faixa sangra até as bordas: o último thumb cortado avisa que rola */
  .tour__rooms{
    max-width:none;
    margin-inline:calc(var(--margin) * -1);
    padding-inline:var(--margin);
  }
  .tour__room{ width:104px; height:70px; }
  .tour__place{ display:none; }
}

/* ---------- 15c · FACHADA 3D ----------
   A torre em Three.js, desenhada por js/fachada3d.js. Mesmas regras de
   gesto do tour: em fluxo o vertical e a roda são da PÁGINA; girar é
   arrastar. Estados postos pelo JS:
     .is-loading  biblioteca + modelo a caminho   .is-webgl  canvas no lugar do pôster
     .is-live     há um quadro desenhado          .is-ready  unidades mapeadas (seletores)
     .is-touched  já houve gesto                  .is-expanded tela cheia
     .has-panel   um studio escolhido             .is-failed sem WebGL / rede
   Sem JS: o pôster e a legenda. */
.fachada{ padding-top:0; }
.fachada__lead{ margin-top:1.6rem; }

.fachada__stage{
  position:relative;
  height:min(84svh, 900px);
  min-height:520px;
  overflow:hidden;
  background-color:var(--dark-2);
  color:var(--cream);
}
.fachada__poster,
.fachada__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.fachada__poster{ object-fit:cover; }
.fachada__canvas{
  display:none;
  opacity:0;
  cursor:grab;
  touch-action:pan-y;
  transition:opacity .6s var(--ease-out);
}
.fachada__canvas:active{ cursor:grabbing; }
.fachada__canvas.is-hit{ cursor:pointer; }
.fachada__canvas:focus-visible{ outline-offset:-6px; }
.fachada__stage.is-webgl .fachada__canvas{ display:block; }
.fachada__stage.is-live .fachada__canvas{ opacity:1; }
.fachada__stage.is-live .fachada__poster{ visibility:hidden; }

.fachada__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(23,24,22,.6) 0%,
    rgba(23,24,22,0) 24%,
    rgba(23,24,22,0) 70%,
    rgba(23,24,22,.7) 100%
  );
}

.fachada__loading{
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:var(--tan);
  opacity:0;
  pointer-events:none;
}
.fachada__stage.is-loading .fachada__loading{
  opacity:1;
  animation:tour-loading 1.6s var(--ease-out) infinite;
}

/* indicador de arraste: o mesmo motivo do tour (anel, dedo, setas) */
.fachada__drag{
  position:absolute;
  top:50%;
  left:50%;
  display:none;
  align-items:center;
  gap:14px;
  padding:14px 20px;
  border:1px solid var(--cream-40);
  background:rgba(23,24,22,.48);
  color:var(--cream);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.fachada__stage.is-live .fachada__drag{ display:flex; }
.fachada__stage.is-touched .fachada__drag{ opacity:0; visibility:hidden; }
.fachada__drag .tour__drag-anel,
.fachada__drag .tour__drag-seta{ /* herdam as animações do bloco 15b */ }

.fachada__top,
.fachada__hint,
.fachada__actions,
.fachada__picker{ display:none; }
.fachada__stage.is-webgl .fachada__hint{ display:block; }
.fachada__stage.is-webgl .fachada__actions{ display:grid; }
.fachada__stage.is-ready .fachada__picker{ display:flex; }
.fachada__stage.is-expanded .fachada__top{ display:flex; }

.fachada__top{
  position:absolute;
  inset:0 0 auto 0;
  align-items:center;
  gap:clamp(20px, 3vw, 44px);
  padding:clamp(18px, 2.6vh, 28px) var(--margin);
  pointer-events:none;
}
.fachada__top .wordmark{ width:clamp(104px, 9vw, 132px); margin-right:auto; }
.fachada__close{
  background:none;
  border:0;
  border-bottom:1px solid var(--tan-soft);
  color:var(--cream);
  font-family:inherit;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  padding:.35em 0;
  cursor:pointer;
  pointer-events:auto;
  transition:color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.fachada__close:hover{ color:var(--tan); border-color:var(--tan); }

.fachada__hint{
  position:absolute;
  top:clamp(20px, 3.4vh, 36px);
  left:var(--margin);
  right:var(--margin);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream);
  pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.fachada__stage.is-expanded .fachada__hint{ top:clamp(84px, 11vh, 108px); }
.fachada__stage.is-touched .fachada__hint{ opacity:.3; }
.fachada__hint-zoom{ display:none; }
@media (hover:hover) and (pointer:fine){
  .fachada__stage.is-expanded .fachada__hint-zoom{ display:inline; }
}

.fachada__actions{
  position:absolute;
  top:50%;
  right:var(--margin);
  gap:8px;
  transform:translateY(-50%);
}
/* o painel ocupa a direita: os botões descem para o canto, em fileira, por baixo do card */
.fachada__stage.has-panel .fachada__actions{ top:auto; bottom:clamp(22px, 3.6vh, 36px); transform:none; grid-auto-flow:column; }
.fachada__action{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--cream-40);
  background:rgba(23,24,22,.48);
  color:var(--cream);
  cursor:pointer;
  transition:background-color .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out);
}
@media (hover:hover){
  .fachada__action:hover{ background:var(--tan); border-color:var(--tan); color:var(--dark); }
}
.fachada__action svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1; }
.fachada__icon-fechar,
.fachada__stage.is-expanded .fachada__icon-abrir{ display:none; }
.fachada__stage.is-expanded .fachada__icon-fechar{ display:block; }

/* seletores — o caminho sem mouse (teclado, leitor de tela) e o atalho
   de quem já sabe o andar. Em baixo à esquerda, sobre o véu. */
.fachada__picker{
  position:absolute;
  left:var(--margin);
  bottom:clamp(22px, 3.6vh, 36px);
  gap:8px;
  flex-wrap:wrap;
  pointer-events:auto;
}
.fachada__picker label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--tan);
}
.fachada__picker select{
  min-width:150px;
  padding:9px 12px;
  border:1px solid var(--cream-40);
  background:rgba(23,24,22,.62);
  color:var(--cream);
  font-family:inherit;
  font-size:.74rem;
  font-weight:400;
  letter-spacing:.08em;
  cursor:pointer;
}
.fachada__picker select:focus-visible{ outline-offset:2px; }

/* painel do studio — à direita no desktop, folha inferior no celular.
   Só dados oficiais; nada de preço ou situação (ver js/fachada3d.js). */
.fachada__panel{
  position:absolute;
  top:50%;
  right:var(--margin);
  width:min(340px, calc(100% - 2 * var(--margin)));
  max-height:calc(100% - 2 * clamp(80px, 11vh, 100px));
  /* sem barra de rolagem (pedido do usuário em 15/10): o conteúdo se ajusta ao card —
     coluna flexível em que a planta encolhe para caber */
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:clamp(20px, 2.6vw, 30px);
  border:1px solid var(--tan-soft);
  background:rgba(23,24,22,.9);
  color:var(--cream);
  transform:translateY(-50%);
  pointer-events:auto;
}
.fachada__panel[hidden]{ display:none; }
.fachada__panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.fachada__panel-close{
  flex:0 0 auto;
  width:36px;
  height:36px;
  margin:-6px -8px 0 0;
  padding:0;
  border:0;
  background:none;
  color:var(--cream);
  cursor:pointer;
}
.fachada__panel-close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1; }
.fachada__panel .display-3{ margin-top:.4rem; font-size:clamp(1.9rem, 2.6vw, 2.6rem); }
.fachada__panel > *{ flex:0 0 auto; }
.fachada__pos{
  margin-top:.5rem;
  font-weight:300;
  font-size:.92rem;
  color:var(--cream-60);
}
.fachada__dados{
  display:grid;
  grid-template-columns:repeat(3, auto);
  justify-content:space-between;
  gap:10px;
  margin:1.2rem 0 0;
  padding-top:1.1rem;
  border-top:1px solid var(--tan-soft);
}
.fachada__dados dt{
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.18em;
  white-space:nowrap;
  text-transform:uppercase;
  color:var(--tan);
}
.fachada__dados dd{
  margin:.35rem 0 0;
  font-weight:300;
  font-size:1rem;
  white-space:nowrap;
  letter-spacing:.02em;
}
.fachada__planta{
  display:block;
  width:100%;
  height:auto;
  margin-top:1.1rem;
  border:1px solid var(--tan-soft);
}
/* a planta é a peça que cede quando o card fica baixo (proporção mantida, sem cortar) */
.fachada__panel > .fachada__planta{ flex:0 1 auto; min-height:0; width:auto; max-width:100%; align-self:flex-start; }
/* tela baixa demais: a planta ficaria um fio — sai do card (ela tem a própria seção) */
@media (max-height:640px) and (min-width:769px){ .fachada__panel > .fachada__planta{ display:none; } }
.fachada__nota{
  margin-top:.9rem;
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cream-60);
}
.fachada__panel .cta-link{ margin-top:1.1rem; align-self:flex-start; }

.fachada__error{
  position:absolute;
  top:50%;
  left:50%;
  max-width:min(350px, calc(100% - 2 * var(--margin)));
  padding:24px;
  border:1px solid var(--tan-soft);
  background:rgba(23,24,22,.88);
  color:var(--cream);
  text-align:center;
  transform:translate(-50%,-50%);
}
.fachada__legenda{
  margin-top:1rem;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-60);
}

.fachada__stage.is-expanded{
  position:fixed;
  inset:0;
  z-index:130;
  width:100%;
  height:100%;
  min-height:0;
}
.fachada__stage.is-expanded .fachada__canvas{ touch-action:none; }

@media (max-width:768px){
  .fachada__stage{ height:min(78svh, 720px); min-height:460px; }
  .fachada__actions{ top:auto; bottom:clamp(22px, 3.6vh, 36px); right:var(--margin); transform:none; }
  .fachada__picker{ bottom:clamp(22px, 3.6vh, 36px); right:calc(var(--margin) + 52px); }
  .fachada__picker select{ min-width:0; width:100%; }
  .fachada__picker label{ flex:1 1 120px; }
  /* folha inferior: cobre os seletores enquanto está aberta */
  .fachada__panel{
    top:auto;
    right:0;
    bottom:0;
    left:0;
    width:auto;
    max-height:62%;
    transform:none;
    border-width:1px 0 0;
    overflow-y:auto;                       /* telas muito baixas: rola, mas sem barra à vista */
    scrollbar-width:none;
  }
  .fachada__panel::-webkit-scrollbar{ display:none; }
  .fachada__stage.has-panel .fachada__picker,
  .fachada__stage.has-panel .fachada__actions{ display:none; }
  .fachada__dados{ gap:8px; }
  .fachada__planta{ display:none; } /* a planta já tem a própria seção; aqui só ocuparia a folha */
}

/* ---------- 15d · FACHADA 3D — SELETOR DE ÂNGULOS ----------
   js/fachada-gizmo.js. Círculo com o ponto central e os eixos do
   prédio projetados da câmera: arrastar gira e inclina, os pontos
   levam às fachadas e às quinas, o anel com ponto (diagonal de cima
   à direita) à vista de cima, o centro volta ao início, as setas do
   aro dão passos. Os botões não recebem o ponteiro: o script escolhe
   o alvo mais próximo do toque (ver o js); eles existem para o
   teclado e o leitor de tela. Desktop: embaixo à direita (em cima
   cairia sob o MENU do header fixo); com o card aberto, à esquerda
   do card, num salto (os botões também saltam). Celular: à esquerda
   da coluna de botões, acima dos seletores; com a folha aberta, acima
   da folha. Só transform e opacity mudam. Sem ponto cardeal (a planta
   não traz o norte). Só aparece com o 3D vivo E o script pronto. */
.fachada__gizmo{
  --gz:96px;
  --gz-passo:22px;
  --gz-base:clamp(22px, 3.6vh, 36px);
  position:absolute;
  right:var(--margin);
  bottom:var(--gz-base);
  width:var(--gz);
  height:var(--gz);
  border:1px solid var(--cream-40);
  border-radius:50%;
  background:rgba(23,24,22,.48);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--cream);
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:grab;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
/* folga de toque em volta do círculo (as setas do aro alcançam até aqui) */
.fachada__gizmo::before{
  content:'';
  position:absolute;
  inset:-9px;
  border-radius:50%;
}
.fachada__stage.is-live .fachada__gizmo.is-pronto{
  opacity:1;
  visibility:visible;
  transition:opacity var(--dur-fast) var(--ease-out), visibility 0s;
}
.fachada__gizmo.is-sobre-alvo{ cursor:pointer; }
.fachada__gizmo.is-arrastando{ cursor:grabbing; }

.fachada__gizmo-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.fachada__gizmo-plano,
.fachada__gizmo-eixo.is-vertical,
.fachada__gizmo-topo{ transform-box:view-box; transform-origin:0 0; }
.fachada__gizmo-plano *,
.fachada__gizmo-eixo.is-vertical{ vector-effect:non-scaling-stroke; }
.fachada__gizmo-trilho{ fill:none; stroke:var(--tan-soft); stroke-width:.75; }
.fachada__gizmo-chao{ fill:none; stroke:var(--cream-40); stroke-width:.6; stroke-dasharray:1.4 2; }
.fachada__gizmo-planta{ fill:var(--tan-soft); stroke:var(--tan); stroke-width:.6; stroke-linejoin:miter; }
.fachada__gizmo-eixo{ fill:none; stroke-width:1.4; stroke-linecap:butt; }
.fachada__gizmo-eixo.is-ala17{ stroke:var(--cream); }
.fachada__gizmo-eixo.is-ala01{ stroke:var(--tan); }
.fachada__gizmo-eixo.is-vertical{ stroke:var(--cream); stroke-width:1; stroke-dasharray:2 1.6; }
.fachada__gizmo-eixo.is-tras{ opacity:.38; }
.fachada__gizmo-topo{ fill:var(--cream); }

.fachada__gizmo button{ pointer-events:none; }
.fachada__gizmo button:focus-visible{ outline:2px solid var(--tan); outline-offset:1px; }

/* pontos dos eixos e centro: botões de 18 px (quinas 12 px) com o desenho no ::before */
.fachada__gizmo-ponto,
.fachada__gizmo-centro{
  position:absolute;
  top:50%;
  left:50%;
  box-sizing:border-box;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
}
.fachada__gizmo-ponto[data-gz-tipo="quina"]{ width:12px; height:12px; margin:-6px 0 0 -6px; }
/* vista de cima: fixa no aro, na diagonal de cima à direita (raio das setas) */
.fachada__gizmo-ponto[data-gz-tipo="cima"]{ top:21.2%; left:78.8%; }
.fachada__gizmo-ponto::before,
.fachada__gizmo-centro::before{
  content:'';
  position:absolute;
  inset:4px;
  border:1.5px solid var(--dark-2);
  border-radius:50%;
  background:var(--cream);
  transition:transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.fachada__gizmo-ponto[data-gz-ala="01"]::before{ background:var(--tan); }
.fachada__gizmo-ponto[data-gz-lado="interna"]::before{ background:var(--dark-2); border-color:var(--cream); }
.fachada__gizmo-ponto[data-gz-ala="01"][data-gz-lado="interna"]::before{ border-color:var(--tan); }
.fachada__gizmo-ponto[data-gz-tipo="quina"]::before{ inset:3px; border:0; background:var(--cream-60); }
.fachada__gizmo-ponto[data-gz-tipo="cima"]::before{ inset:3px; background:var(--dark-2); border-color:var(--cream); }
.fachada__gizmo-ponto[data-gz-tipo="cima"]::after{
  content:'';
  position:absolute;
  inset:7.5px;
  border-radius:50%;
  background:var(--cream);
  transition:transform .3s var(--ease-out);
}
.fachada__gizmo-ponto.is-tras::before{ opacity:.45; }
.fachada__gizmo-ponto.is-atual::before,
.fachada__gizmo-ponto.is-mira::before,
.fachada__gizmo-centro.is-mira::before{ transform:scale(1.3); opacity:1; }
.fachada__gizmo-ponto[data-gz-tipo="quina"].is-mira::before{ background:var(--cream); }
.fachada__gizmo-ponto[data-gz-tipo="cima"].is-mira::after,
.fachada__gizmo-ponto[data-gz-tipo="cima"].is-atual::after{ transform:scale(1.3); }
.fachada__gizmo-centro{ z-index:30; }
.fachada__gizmo-centro:focus-visible{ z-index:40; }
.fachada__gizmo-centro::before{ inset:5px; background:var(--cream); }

/* setas do aro: girar até a próxima fachada ou quina e inclinar 15° (segurar repete) */
.fachada__gizmo-passo{
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:var(--gz-passo);
  height:var(--gz-passo);
  margin:calc(var(--gz-passo) / -2) 0 0 calc(var(--gz-passo) / -2);
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--cream-60);
}
.fachada__gizmo-passo:focus-visible{ z-index:40; color:var(--cream); }
.fachada__gizmo-passo svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.3; transition:transform .2s var(--ease-out); }
.fachada__gizmo-passo.is-mira{ color:var(--cream); }
.fachada__gizmo-passo.is-apertado svg{ transform:scale(.8); }
/* no meio da faixa de toque da seta (do raio dos pontos até a folga de fora do círculo) */
.fachada__gizmo-passo[data-gz-passo="cima"]{ top:7.7%; }
.fachada__gizmo-passo[data-gz-passo="baixo"]{ top:92.3%; }
.fachada__gizmo-passo[data-gz-passo="esquerda"]{ left:7.7%; }
.fachada__gizmo-passo[data-gz-passo="direita"]{ left:92.3%; }

/* desktop com o card aberto: os botões descem para a fileira do canto e o círculo
   passa para a esquerda do card (340 px + folga), num salto como os botões */
@media (min-width:769px){
  .fachada__stage.has-panel .fachada__gizmo{ transform:translateX(-356px); }
}
/* desktop estreito: à esquerda do card ele chegaria aos seletores — sobe acima deles */
@media (min-width:769px) and (max-width:900px){
  .fachada__stage.has-panel .fachada__gizmo{ transform:translate(-356px, -84px); }
}
/* desktop baixo (tela cheia num notebook de 600–700 px, celular deitado): a coluna de
   botões do meio chegaria ao círculo — ele fica à esquerda dela. Com o card aberto a
   coluna vai para baixo do card: o salto desconta os 58 px para não chegar aos seletores */
@media (min-width:769px) and (max-height:700px){
  .fachada__gizmo{ right:calc(var(--margin) + 44px + 14px); }
  .fachada__stage.has-panel .fachada__gizmo{ transform:translateX(-298px); }
}
@media (min-width:769px) and (max-width:900px) and (max-height:700px){
  .fachada__stage.has-panel .fachada__gizmo{ transform:translate(-298px, -84px); }
}
/* celular: à esquerda da coluna de botões (44 px + 14 px), logo acima dos seletores (uma
   fileira de ~60 px); assim não encosta na dica de arraste do meio do palco nem, deitado,
   no Fechar da tela cheia. 92 px (quase o do desktop): cada seta do aro precisa de uma
   faixa de toque de 24 px e de ~40 × 40 px de área. Com a folha do studio aberta (62% do palco) os seletores e os
   botões somem e ele sobe acima da folha — por transform; --gz-folha (altura da folha) e
   --gz-palco vêm do script */
@media (max-width:768px){
  .fachada__gizmo{
    --gz:92px;
    --gz-passo:22px;
    --gz-acima:calc(var(--gz-base) + 60px + 12px);
    right:calc(var(--margin) + 44px + 14px);
    bottom:var(--gz-acima);
  }
  .fachada__stage.has-panel .fachada__gizmo{ transform:translateY(calc(var(--gz-acima) - var(--gz-folha, var(--gz-palco, 0px) * .62) - 12px)); }
}
/* celular estreito (< 340 px): os dois seletores quebram em duas fileiras — o círculo volta
   para cima da coluna de botões; e, como ali a dica de arraste do meio (~86 px de altura)
   chega à coluna da direita, ele fica também acima da metade do palco + 56 px (meia dica,
   a folga de toque e um respiro). --gz-palco vem do script */
@media (max-width:339px){
  .fachada__gizmo{
    --gz-acima:max(calc(var(--gz-base) + 5 * 44px + 4 * 8px + 14px), calc(var(--gz-palco, 0px) / 2 + 56px));
    right:var(--margin);
  }
}
/* celular deitado: o mesmo círculo de 92 px — o palco é mais alto que a tela e, menor,
   as setas perderiam a faixa de toque */
@media (max-width:768px) and (max-height:480px){
  /* na tela cheia com a folha aberta, a faixa acima da folha é baixa e o círculo chega ao
     Fechar do canto: ele anda para a esquerda o mesmo que a coluna de botões ocupava */
  .fachada__stage.is-expanded.has-panel .fachada__gizmo{
    transform:translate(calc(-44px - 14px), calc(var(--gz-acima) - var(--gz-folha, var(--gz-palco, 0px) * .62) - 12px));
  }
}
/* cores forçadas (alto contraste): o seletor mantém o próprio desenho sobre fundo cheio,
   senão os pontos viram todos o mesmo disco e somem as diferenças entre as alas */
@media (forced-colors:active){
  .fachada__gizmo{ forced-color-adjust:none; background:var(--dark-2); border-color:var(--cream); }
  .fachada__gizmo button:focus-visible{ outline-color:Highlight; }
}
@media (prefers-reduced-motion:reduce){
  .fachada__gizmo,
  .fachada__stage.is-live .fachada__gizmo.is-pronto,
  .fachada__gizmo-ponto::before,
  .fachada__gizmo-ponto::after,
  .fachada__gizmo-centro::before,
  .fachada__gizmo-passo svg{ transition:none; }
}

/* ---------- 16 · SEÇÃO 08 — LOCALIZAÇÃO ---------- */
.local{ padding-block:0; }

.local__hero{
  position:relative;
  min-height:min(88svh, 920px);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.local__media{
  position:absolute;
  inset:-12% 0;
  background-color:var(--dark-3); /* placeholder de carregamento — dentro da paleta */
}
.local__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.local__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(23,24,22,.94) 0%,
    rgba(23,24,22,.72) 42%,
    rgba(23,24,22,.3) 75%
  );
}
.local__card{
  position:relative;
  z-index:2;
  /* o card herda .container (width:100% + margin auto): sem isto ele
     encostava nas duas bordas da tela. Agora respeita a margem do site. */
  width:auto;
  max-width:min(640px, calc(100% - 2 * var(--margin)));
  margin-inline:var(--margin);
  background:rgba(23,24,22,.82);
  border:1px solid var(--tan-soft);
  padding:clamp(28px, 4vw, 56px);
  margin-block:clamp(96px, 16vh, 180px);
}
@media (max-width:768px){
  /* padding menor para "Orla de Palmas – TO" caber na linha única */
  .local__card{ padding:24px; margin-block:clamp(56px, 12vh, 96px); }
}
.local__card .display-3{ margin-top:1.1rem; white-space:nowrap; } /* sempre 1 linha */
.local__card .caption{ margin-top:1.2rem; }

/* ---------- 17 · SEÇÃO 09 — FINALE + FOOTER ---------- */
/* na home o finale vem depois de uma seção full-bleed (.local, padding 0);
   nas páginas a seção anterior deixa um --section-pad de respiro antes do
   fechamento. O degrau extra entra aqui para igualar o ritmo. */
#contato.finale{ padding-top:calc(var(--section-pad) * 2); }

.finale{
  position:relative;
  background:var(--dark-2);
  overflow:hidden;
  text-align:center;
  padding-block:var(--section-pad);
}
.finale__glow{
  position:absolute;
  top:42%;
  left:50%;
  width:min(60vw, 680px);
  height:min(60vw, 680px);
  transform:translate(-50%,-50%);
  border-radius:50%; /* círculo */
  /* glow difuso direto no gradiente — sem filter:blur (custo de rasterização) */
  background:radial-gradient(circle, rgba(183,164,142,.85) 0%, rgba(183,164,142,.35) 34%, rgba(183,164,142,.1) 58%, rgba(183,164,142,0) 78%);
  opacity:.18;
  pointer-events:none;
}
.finale__inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(28px, 4.5vh, 48px);
}
.finale .wordmark{
  width:min(84vw, 880px);
}
.finale__tagline{
  font-weight:300;
  font-size:clamp(.95rem, 1.6vw, 1.2rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream-60);
}
.cta-major{
  display:inline-block;
  margin-top:clamp(16px, 3vh, 32px);
  border:1px solid var(--tan-soft);
  padding:clamp(20px, 2.6vw, 30px) clamp(40px, 6vw, 84px);
  font-weight:300;
  font-size:clamp(1.05rem, 2vw, 1.5rem);
  letter-spacing:.08em;
  color:var(--cream);
  transition:background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out);
  will-change:transform; /* hover magnético na fase 3 */
}
.cta-major:hover{
  background:var(--tan);
  border-color:var(--tan);
  color:var(--dark);
}

/* footer */
.site-footer{
  background:var(--dark-2);
  border-top:1px solid var(--tan-soft);
  padding-block:clamp(48px, 7vh, 80px);
}
.site-footer__top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
}
.site-footer .wordmark{ width:110px; }
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:1.8em;
}
.footer-nav a{
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cream-60);
  transition:color .4s var(--ease-out);
}
.footer-nav a:hover{ color:var(--tan); }
.site-footer__legal{
  margin-top:clamp(40px, 6vh, 64px);
  padding-top:24px;
  border-top:1px solid var(--tan-soft);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px 32px;
  font-size:.72rem;
  color:var(--cream-60); /* contraste AA */
  letter-spacing:.04em;
}

/* ---------- 18 · RESPONSIVO GERAL ---------- */
@media (max-width:768px){
  body{ font-size:1rem; }
  .chapter-card .display{ font-size:clamp(2.1rem, 9vw, 3.2rem); }
  .hero-intro .wordmark{ width:min(86vw, 440px); }
}

@media (max-width:360px){
  :root{ --margin:20px; }
}

@media (min-width:2560px){
  html{ font-size:18px; }
}

/* ---------- 19 · REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .scroll-hint__line::after{ animation:none; }
  /* fases 3–4: pin, scrub, parallax, marquee e Ken Burns
     também são desligados via gsap.matchMedia() */
  /* De perto: nada gruda e cada passo mostra o próprio recorte */
  .deperto__media{ position:static; }
  html.has-js .deperto__static{ display:block; }
  /* Tour 360: o carregamento vira uma linha parada e o indicador de
     arraste fica estático; inércia, zoom suave e fade de cena são
     desligados em js/tour360.js */
  .tour__stage.is-loading .tour__loading,
  .fachada__stage.is-loading .fachada__loading,
  .tour__drag-anel::before,
  .tour__drag-anel::after,
  .tour__drag-seta{ animation:none; }
  .tour__drag-anel::after{ opacity:0; }
  /* Fachada 3D: giro automático, inércia e planeio de câmera são
     desligados em js/fachada3d.js */
}

/* ============================================================
   20 · PÁGINAS EDITORIAIS (multipágina)
   As páginas do Copy Deck falam a MESMA língua do index: section-head
   com eyebrow entre colchetes, títulos display-2 com word-mask, stats
   com count-up, hairlines, finale com glow. Os reveals vivem em
   js/pages.js (gêmeo do sections.js); sem JS tudo nasce visível.
   ============================================================ */

/* o fundo escuro fica SÓ no <body>: o morph da banda clara anima
   background-color do body e um <main> opaco por cima o tornaria inerte
   (mesma arquitetura da home, onde as seções são transparentes) */
body.page{ background:var(--dark); }
.page{ min-height:100vh; }

/* ---------- hero da página ---------- */
.page-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(78vh, 820px);
  padding:clamp(140px, 20vh, 220px) 0 var(--section-pad);
}
.page-hero .container{ position:relative; }
.page-hero h1{ max-width:18ch; text-wrap:balance; }
.page-hero__lead{
  margin-top:clamp(20px, 3vh, 32px);
  max-width:56ch;
}
.page-hero .cta-row{ margin-top:clamp(32px, 5vh, 52px); }

/* aviso de status (deck: "Sobe com ressalva") — micro-etiqueta */
.page-aviso{
  display:inline-block;
  margin-top:4px;
  padding:10px 16px;
  border:1px solid var(--tan-soft);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tan);
}

/* ---------- CTAs ----------
   O index não tem botão sólido: só contorno (cta-major) e sublinhado
   (header-cta). As páginas herdam os dois registros, em escala de corpo. */
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px 32px;
  align-items:center;
}
.cta-btn{
  display:inline-block;
  border:1px solid var(--tan-soft);
  padding:clamp(14px, 1.8vw, 19px) clamp(26px, 3.4vw, 44px);
  font-weight:300;
  font-size:clamp(.92rem, 1.4vw, 1.05rem);
  letter-spacing:.08em;
  color:var(--cream);
  transition:background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.cta-btn:hover{
  background:var(--tan);
  border-color:var(--tan);
  color:var(--dark);
}
.cta-link{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cream-60);
  padding-bottom:.55em;
  border-bottom:1px solid var(--tan-soft);
  transition:color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.cta-link:hover{ color:var(--tan); border-color:var(--tan); }

/* ---------- ritmo de seção ----------
   Mesmo respiro do index: cada seção deixa UM --section-pad depois de si
   (o seam nunca duplica — mesma regra do #arquitetura no index). */
.page .section{ padding-block:0 var(--section-pad); }
/* a regra acima assume que cada seção contribui só com o respiro de baixo.
   A banda clara quebra a suposição: ela tem fundo próprio e termina no
   próprio padding, deixando a seção seguinte colada na emenda. */
.page .section.section--claro + .section{ padding-top:var(--section-pad); }
.page .section-head{ max-width:100%; }
/* Os títulos do deck são frases documentais longas (até 62 caracteres),
   não as frases curtas da home. Na escala cheia do display-2 (80px) um
   título desses vira uma parede de 5 linhas numa coluna de 7/12. Um degrau
   abaixo resolve, e o `balance` impede que a última linha fique órfã.
   A variante de abertura mantém a escala grande — é o diferencial dela. */
.sec{ --fs-titulo:clamp(1.9rem, 4vw, 3.6rem); }
.page .section-head .display-2{
  max-width:30ch;
  font-size:var(--fs-titulo);
  text-wrap:balance;
}
.sec-body{
  font-weight:300;
  font-size:clamp(1rem, 1.4vw, 1.12rem);
  line-height:1.75;
  color:var(--cream-60);
  /* 70ch: a seção "O ativo em cinco linhas" precisa caber em CINCO linhas
     no desktop — o eyebrow promete isso. A 62ch dava seis. Como medida e
     corpo são ambos relativos ao font-size, a contagem de caracteres por
     linha não muda com a largura da janela: a promessa se sustenta em
     todo o desktop. Continua dentro da faixa de boa leitura (45–75ch). */
  max-width:70ch;
  text-wrap:pretty; /* nunca uma palavra sozinha na última linha */
}
.sec-body + .sec-body{ margin-top:1em; }

/* banda clara — mesma inversão do bloco-claro do index */
/* especificidade 0,2,0 para empatar com `.page .section` — sem os três
   níveis a banda nascia colada no topo. margin-bottom zerada: o respiro
   de baixo já vem do próprio padding, senão o vão dobra. */
.page .section.section--claro{
  background:var(--cream-2);
  padding-block:var(--section-pad);
  margin-bottom:0;
}
/* A inversão precisa cobrir TUDO que a §22 admite dentro da banda —
   um módulo esquecido aqui vira texto creme sobre creme (~1:1). */
.section--claro .display-2,
.section--claro .display-3,
.section--claro .numlist h3,
.section--claro .tabela__valor,
.section--claro .args__frase,
.section--claro .stat__num{ color:var(--dark); }

.section--claro .eyebrow,
.section--claro .timeline h3,
.section--claro .tabela__chave,
.section--claro .nota span,
.section--claro .sec__lado span,
.section--claro .sec__aberto span,
.section--claro .prova__legenda .rotulo,
.section--claro .form label{ color:var(--dark); opacity:.8; }

.section--claro .sec-body,
.section--claro .nota p,
.section--claro .chips li,
.section--claro .credenciais li,
.section--claro .timeline p,
.section--claro .numlist p,
.section--claro .sec__lado p,
.section--claro .sec__aberto p,
.section--claro .args__nota,
.section--claro .banned__nota,
.section--claro .stat__label,
.section--claro .faq-list details p{ color:var(--dark-60); }

.section--claro .fonte,
.section--claro .stat__fonte,
.section--claro .banned__frase{ color:var(--dark); opacity:.55; }

.section--claro .ressalva{ color:var(--dark-60); border-color:var(--dark-soft); }
.section--claro .faq-list summary{ color:var(--dark); }
.section--claro .faq-list summary::after,
.section--claro .prancha__legenda{ color:var(--dark); opacity:.7; }

/* CTAs — o caso que a home nunca teve (o .bloco-claro dela não leva CTA):
   sem isto o único chamado da banda fica invisível */
.section--claro .cta-link{ color:var(--dark-60); border-bottom-color:var(--dark-soft); }
.section--claro .cta-link:hover{ color:var(--dark); border-bottom-color:var(--dark); }
.section--claro .cta-btn{ color:var(--dark); border-color:var(--dark-soft); }
.section--claro .cta-btn:hover{ background:var(--dark); border-color:var(--dark); color:var(--cream); }

/* filetes e bordas internas invertem junto */
.section--claro .tabela,
.section--claro .tabela__linha,
.section--claro .faq-list,
.section--claro .faq-list details,
.section--claro .numlist li,
.section--claro .args li,
.section--claro .banned li,
.section--claro .timeline li,
.section--claro .sec__lado--b,
.section--claro .sec__aside,
.section--claro .prova__legenda{ border-color:var(--dark-soft); }
.section--claro .sec__aberto{ border-left-color:var(--dark); }
.section--claro .chips li::before,
.section--claro .credenciais li::before,
.section--claro .timeline li::before{ background:var(--dark); }

/* ---------- acentos documentais (fonte · ressalva · notas) ---------- */
.fonte{
  margin-top:clamp(20px, 3vh, 28px);
  font-size:.74rem;
  letter-spacing:.03em;
  color:var(--cream-40);
  /* sem teto em ch: a .74rem, 62ch estrangulava a linha e jogava a data
     sozinha para a linha de baixo. A letra miúda acompanha a coluna. */
  max-width:none;
  text-wrap:pretty; /* e, quando precisar quebrar, nunca deixa órfã */
}
.sec--lastro .sec__aside .fonte{ max-width:none; }
.ressalva{
  margin-top:clamp(18px, 2.6vh, 26px);
  padding-left:16px;
  border-left:1px solid var(--tan);
  font-size:.9rem;
  font-style:italic;
  line-height:1.7;
  color:var(--cream-60);
  max-width:72ch;
  text-wrap:pretty;
}
.nota{
  margin-top:clamp(20px, 3vh, 30px);
  max-width:62ch;
}
.nota span{
  display:block;
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--tan);
  margin-bottom:.55em;
}
.nota p{
  font-size:.96rem;
  font-weight:300;
  line-height:1.7;
  color:var(--cream-60);
}
.sec-cta{ margin-top:clamp(24px, 3.6vh, 36px); }

/* ---------- listas ---------- */
/* itens curtos (serviços por grupo) — hairline-bullet do index */
.chips{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:.55rem 32px;
  margin-top:clamp(28px, 4vh, 40px);
  max-width:900px;
}
.chips li{
  position:relative;
  padding-left:1.15rem;
  font-size:.94rem;
  font-weight:300;
  line-height:1.55;
  color:var(--cream-60);
}
.chips li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:7px;
  height:1px;
  background:var(--tan);
}

/* numeral fino grande — mesma régua do .pilar__num do index */
.numlist{
  list-style:none;
  display:flex;
  flex-direction:column;
  margin-top:clamp(32px, 5vh, 56px);
}
.numlist li{
  display:grid;
  grid-template-columns:clamp(64px, 8vw, 110px) 1fr;
  gap:clamp(16px, 2.5vw, 40px);
  padding-block:clamp(28px, 4vh, 44px);
  border-top:1px solid var(--tan-soft);
}
.numlist__n{
  font-weight:200;
  font-size:clamp(2rem, 3.4vw, 3.2rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--tan-soft);
  font-variant-numeric:tabular-nums;
}
.numlist h3{
  font-weight:400;
  font-size:clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing:-.005em;
  color:var(--cream);
  max-width:30ch;
}
.numlist p{
  margin-top:.7rem;
  font-size:.98rem;
  font-weight:300;
  line-height:1.72;
  color:var(--cream-60);
  max-width:58ch;
}
@media (max-width:640px){
  .numlist li{ grid-template-columns:1fr; gap:10px; }
}

/* credenciais — hairline-bullet */
.credenciais{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:clamp(24px, 3.4vh, 36px);
}
.credenciais li{
  padding-left:1.15rem;
  position:relative;
  font-size:.96rem;
  font-weight:300;
  color:var(--cream-60);
  max-width:66ch;
}
.credenciais li::before{
  content:"";
  position:absolute;
  left:0; top:.78em;
  width:7px; height:1px;
  background:var(--tan);
}

/* ficha técnica */
.tabela{
  display:grid;
  margin-top:clamp(32px, 5vh, 48px);
  border-top:1px solid var(--tan-soft);
  max-width:920px;
}
.tabela__linha{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  padding-block:clamp(14px, 2vh, 20px);
  border-bottom:1px solid rgba(183,164,142,.14);
}
@media (min-width:640px){
  .tabela__linha{ grid-template-columns:minmax(180px, 300px) 1fr; gap:32px; align-items:baseline; }
}
.tabela__chave{
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tan);
}
.tabela__valor{
  font-size:1.02rem;
  font-weight:300;
  color:var(--cream);
}

/* números com fonte — cada dado em caixa própria.
   flex em vez de grid: com grid, a última fileira incompleta deixava um
   buraco à direita (5 dados em 3 colunas). No flex os itens da última
   fileira crescem e fecham a largura. `min-width:0` é o que impede um
   valor longo e sem espaço ("R$ 19.000/m²") de estourar a célula e
   invadir a vizinha. */
.page .stats{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gutter);
  border-top:0;
  margin-top:0;
}
.page .stat{
  flex:1 1 28%;
  min-width:min(100%, 240px);
  border:1px solid var(--tan-soft);
  padding:clamp(22px, 2.4vw, 36px);
  display:flex;
  flex-direction:column;
  transition:border-color .4s var(--ease-out);
}
.page .stat:hover{ border-color:var(--tan); }
.page .stat__num{
  font-size:clamp(1.8rem, 2.6vw, 2.8rem);
  white-space:normal;
  overflow-wrap:break-word;
}
.page .stat__label{ letter-spacing:.18em; margin-top:auto; padding-top:1rem; }
.page .stat__fonte{ margin-top:.6rem; }

@media (min-width:1024px){
  /* a banda de números atravessa as duas colunas do trilho: presa na
     coluna de leitura (9,6/12) as caixas ficavam estreitas demais e um
     valor longo e sem espaço ("R$ 19.000/m²") estourava para a vizinha */
  .sec--quiet > .container > .stats,
  .sec--capitular > .container > .stats,
  .sec--claro > .container > .stats{ grid-column:1 / -1; }
}
.stat__fonte{
  display:block;
  margin-top:.6rem;
  font-size:.66rem;
  letter-spacing:.03em;
  color:var(--cream-40);
}

/* argumentos / frases proibidas — página 08 */
.args, .banned{
  list-style:none;
  display:flex;
  flex-direction:column;
  margin-top:clamp(28px, 4vh, 44px);
  max-width:74ch;
}
.args li, .banned li{
  padding-block:clamp(20px, 3vh, 30px);
  border-top:1px solid rgba(183,164,142,.14);
}
.args__frase{
  font-size:clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight:300;
  line-height:1.5;
  color:var(--cream);
  max-width:60ch;
}
.banned__frase{
  font-size:clamp(1rem, 1.5vw, 1.2rem);
  font-weight:300;
  line-height:1.5;
  color:var(--cream-40);
  text-decoration:line-through;
  text-decoration-color:rgba(183,164,142,.5);
  max-width:60ch;
}
.args__nota, .banned__nota{
  margin-top:.6rem;
  font-size:.88rem;
  font-weight:300;
  color:var(--cream-60);
  line-height:1.65;
  max-width:64ch;
}

/* linha do tempo — página 09 */
.timeline{
  list-style:none;
  margin-top:clamp(32px, 5vh, 48px);
  display:flex;
  flex-direction:column;
}
.timeline li{
  border-left:1px solid var(--tan-soft);
  padding:0 0 clamp(28px, 4vh, 40px) clamp(22px, 3vw, 36px);
  position:relative;
}
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:"";
  position:absolute;
  left:-4px; top:.4em;
  width:7px; height:7px;
  border-radius:50%; /* círculo — exceção permitida */
  background:var(--tan);
}
.timeline h3{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tan);
}
.timeline p{
  margin-top:.5rem;
  font-size:.98rem;
  font-weight:300;
  color:var(--cream-60);
  max-width:56ch;
}

/* FAQ — <details> nativo */
.faq-list{ margin-top:clamp(32px, 5vh, 48px); border-top:1px solid var(--tan-soft); max-width:920px; }
.faq-list details{
  border-bottom:1px solid rgba(183,164,142,.14);
}
.faq-list summary{
  cursor:pointer;
  padding-block:clamp(18px, 2.6vh, 26px);
  font-size:clamp(1rem, 1.5vw, 1.18rem);
  font-weight:400;
  color:var(--cream);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  transition:color .4s var(--ease-out);
}
.faq-list summary:hover{ color:var(--tan); }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"+";
  font-weight:200;
  font-size:1.5rem;
  line-height:1;
  color:var(--tan);
  flex-shrink:0;
}
.faq-list details[open] summary::after{ content:"–"; }
.faq-list details p{
  padding-bottom:clamp(18px, 2.6vh, 26px);
  font-size:.96rem;
  font-weight:300;
  line-height:1.72;
  color:var(--cream-60);
  max-width:64ch;
}

/* finale das páginas — mesmos componentes da home (glow, anel, wordmark,
   cta-major); só as frases mudam. O título entra abaixo do wordmark, então
   desce um degrau na escala para não disputar com ele. */
.page .finale h2{
  max-width:24ch;
  margin-inline:auto;
  text-wrap:balance;
}
.finale__texto{
  max-width:52ch;
  margin-inline:auto;
  text-align:center;
}

/* formulário — captação (landing, evento) */
.form{
  margin-top:clamp(36px, 5vh, 56px);
  max-width:560px;
  display:flex;
  flex-direction:column;
  gap:clamp(22px, 3vh, 30px);
}
.form__campo{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.form label{
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tan);
}
.form input,
.form select,
.form textarea{
  font-family:inherit;
  font-weight:300;
  font-size:1.05rem;
  color:var(--cream);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--tan-soft);
  padding:.55em 0;
  transition:border-color .4s var(--ease-out);
}
.form select{ background:var(--dark); }
.form select option{ background:var(--dark); }
.form input:focus,
.form select:focus,
.form textarea:focus{ border-color:var(--tan); }
/* o :focus-visible global (§2) tem de sobreviver ao Tab — suprimir o anel
   só quando o foco veio do ponteiro */
.form input:focus:not(:focus-visible),
.form select:focus:not(:focus-visible),
.form textarea:focus:not(:focus-visible){ outline:none; }
.form__consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.82rem;
  font-weight:300;
  color:var(--cream-60);
  line-height:1.6;
}
.form__consent input{ margin-top:.3em; accent-color:var(--tan); }
.form__submit{
  align-self:flex-start;
  margin-top:6px;
  background:transparent;
  border:1px solid var(--tan-soft);
  color:var(--cream);
  padding:clamp(14px, 1.8vw, 19px) clamp(26px, 3.4vw, 44px);
  font-family:inherit;
  font-weight:300;
  font-size:clamp(.92rem, 1.4vw, 1.05rem);
  letter-spacing:.08em;
  cursor:pointer;
  transition:background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.form__submit:hover{ background:var(--tan); border-color:var(--tan); color:var(--dark); }
.form__submit:disabled{ opacity:.45; cursor:default; }
.form__msg{ font-size:.9rem; font-weight:300; color:var(--cream-60); }
.form__msg[data-state="ok"]{ color:var(--tan); }
.form__msg[data-state="erro"]{ color:var(--cream); }

/* ---------- 21 · MENU GLOBAL (drawer lateral) ----------
   Botão "Menu" no header + painel de 1/3 da largura entrando pela
   direita, sobre um scrim que escurece o resto da página. O botão só
   aparece com JS (html.has-menu, via js/menu.js); sem JS a navegação
   continua no rodapé. z-index 95: acima do grain (80) e do header (70),
   abaixo do cursor (100) e do lightbox (120). */
.header-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px; /* alvo de toque */
  min-width:44px;
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream);
  padding:0;
  transition:color .4s var(--ease-out);
}
.header-menu-btn:hover{ color:var(--tan); }
html.has-menu .header-menu-btn{ display:inline-flex; }
html.menu-open{ overflow:hidden; }
/* hambúrguer — três hairlines da marca, nada de ícone de biblioteca */
.menu-icon{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:24px;
  flex-shrink:0;
}
.menu-icon span{
  display:block;
  height:1px;
  background:currentColor;
  transition:transform .4s var(--ease-out);
}
.header-menu-btn:hover .menu-icon span:nth-child(2){ transform:scaleX(.7); transform-origin:left center; }
@media (max-width:767px){
  .header-menu-btn{ font-size:.6rem; letter-spacing:.22em; }
}
@media (max-width:420px){
  /* tela estreita: só o ícone — o rótulo fica para leitores de tela */
  .header-menu-btn__txt{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
}

.menu-overlay{
  position:fixed;
  inset:0;
  z-index:95;
  pointer-events:none;
}
.menu-overlay[hidden]{ display:none; }
.menu-overlay.is-open{ pointer-events:auto; }

/* scrim — clicável para fechar; blur só onde há folga de GPU (mesma
   política do .site-header: em telas pequenas o blur custa frame) */
.menu-overlay__scrim{
  position:absolute;
  inset:0;
  background:rgba(23,24,22,.62);
  opacity:0;
  transition:opacity .5s var(--ease-out);
}
.menu-overlay.is-open .menu-overlay__scrim{ opacity:1; }
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .menu-overlay__scrim{
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
}

/* painel — 1/3 da largura, ancorado à direita.
   clamp mantém legível: nunca menor que 360px nem maior que 560px. */
.menu-panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:clamp(360px, 33.333vw, 560px);
  display:flex;
  flex-direction:column;
  background:var(--dark-2);
  border-left:1px solid var(--tan-soft);
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .62s var(--ease-out);
  will-change:transform;
}
.menu-overlay.is-open .menu-panel{ transform:translateX(0); }
@media (max-width:767px){
  /* 1/3 de um celular é inutilizável — o painel cresce, mas continua
     drawer (a página aparece na fresta à esquerda) */
  .menu-panel{ width:min(88vw, 420px); }
}

.menu-overlay__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(10px, 1.5vw, 18px) clamp(24px, 3vw, 40px);
  border-bottom:1px solid var(--tan-soft);
  flex-shrink:0;
}
.menu-overlay__bar .wordmark{ width:clamp(84px, 12vw, 104px); }

.menu-list{
  list-style:none;
  margin:auto 0;
  padding:clamp(24px, 4vh, 44px) clamp(24px, 3vw, 40px);
}
.menu-list li{ border-bottom:1px solid rgba(183,164,142,.14); }
.menu-list li:first-child{ border-top:1px solid rgba(183,164,142,.14); }
.menu-list a{
  display:block;
  padding:clamp(13px, 1.8vh, 18px) 0;
  color:var(--cream);
  font-weight:300;
  font-size:clamp(1.1rem, 1.7vw, 1.55rem);
  letter-spacing:-.005em;
  transition:color .3s var(--ease-out), transform .3s var(--ease-out);
}
.menu-list a:hover{ color:var(--tan); transform:translateX(6px); }
.menu-list a[aria-current="page"]{ color:var(--tan); }


.menu-overlay__foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px 24px;
  padding:clamp(18px, 2.6vh, 26px) clamp(24px, 3vw, 40px) clamp(24px, 4vh, 36px);
  border-top:1px solid rgba(183,164,142,.14);
  flex-shrink:0;
}
.menu-overlay__tag{
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-60); /* --cream-40 dava 3,47:1 em 10px: reprovava AA */
}

/* entrada escalonada — os itens entram pela direita, atrás do painel;
   transform/opacity apenas. A régua global de reduced-motion zera as
   durações e o drawer abre instantâneo. */
.menu-list li{
  opacity:0;
  transform:translateX(28px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.menu-overlay.is-open .menu-list li{
  opacity:1;
  transform:translateX(0);
}
.menu-overlay.is-open .menu-list li:nth-child(1){ transition-delay:.18s; }
.menu-overlay.is-open .menu-list li:nth-child(2){ transition-delay:.23s; }
.menu-overlay.is-open .menu-list li:nth-child(3){ transition-delay:.28s; }
.menu-overlay.is-open .menu-list li:nth-child(4){ transition-delay:.33s; }
.menu-overlay.is-open .menu-list li:nth-child(5){ transition-delay:.38s; }
.menu-overlay.is-open .menu-list li:nth-child(6){ transition-delay:.43s; }
.menu-overlay.is-open .menu-list li:nth-child(7){ transition-delay:.48s; }
.menu-overlay.is-open .menu-list li:nth-child(8){ transition-delay:.53s; }
.menu-overlay.is-open .menu-list li:nth-child(9){ transition-delay:.58s; }
.menu-overlay__foot{
  opacity:0;
  transition:opacity .5s var(--ease-out) .55s;
}
.menu-overlay.is-open .menu-overlay__foot{ opacity:1; }

/* ============================================================
   22 · VARIANTES DE SEÇÃO (páginas editoriais)
   Oito variantes que dão diferencial a cada seção sem inventar
   device novo: cada uma é um RECORTE do que a home já faz.
   A escolha por seção vem do mapa em scripts/build-pages.py —
   nenhuma é aplicada à mão.
     quiet     · trilho editorial (default)
     capitular · fólio de abertura, 1x por página
     lastro    · afirmação à esquerda, prova grudada à direita
     contraste · balanço risco/mitigação em duas colunas
     ficha     · cabeçalho-índice fixo + lista corrida
     claro     · banda creme (o limite de cada página, 1x)
     prancha   · imagem full-bleed com scrim e card (= torre__hero)
     prova     · imagem dentro da coluna + legenda fixa ao lado
   ============================================================ */

/* minmax(0,1fr) — com 1fr puro o min-content de um filho grid (ex.: .chips,
   auto-fill com max-width:900px) infla a trilha além do viewport no mobile */
.sec > .container{ display:grid; grid-template-columns:minmax(0,1fr); }
.sec > .container > *{ min-width:0; }

/* ---------- trilho editorial: quiet · capitular · claro ---------- */
@media (min-width:1024px){
  .sec--quiet > .container,
  .sec--capitular > .container,
  .sec--claro > .container{
    grid-template-columns:minmax(0, 2.4fr) minmax(0, 9.6fr);
    column-gap:clamp(24px, 3.4vw, 64px);
  }

  /* o conteúdo corre na coluna de leitura */
  .sec--quiet > .container > *,
  .sec--capitular > .container > *,
  .sec--claro > .container > *{ grid-column:2; }

  /* O cabeçalho atravessa as duas colunas e monta a PRÓPRIA grade, com as
     mesmas frações e o mesmo vão — visualmente idêntico ao trilho, mas
     eyebrow e título viram irmãos numa linha só, que eu controlo.
     Precisa do combinador de filho para vencer a regra `> *` acima, que
     tem a mesma especificidade e vinha depois. */
  .sec--quiet > .container > .section-head,
  .sec--capitular > .container > .section-head,
  .sec--claro > .container > .section-head{
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:minmax(0, 2.4fr) minmax(0, 9.6fr);
    column-gap:clamp(24px, 3.4vw, 64px);
    align-items:start;
    margin-bottom:0;
  }
  .sec--quiet > .container > .section-head > .eyebrow,
  .sec--capitular > .container > .section-head > .eyebrow,
  .sec--claro > .container > .section-head > .eyebrow{
    grid-column:1;
    /* alinha o topo das MAIÚSCULAS do eyebrow com o do título:
       topo = (entrelinha − corpo)/2 + (ascendente − caixa-alta) × corpo.
       Com line-height 1.04 e Montserrat dá 0,288 × corpo no título,
       contra 7px fixos no eyebrow (corpo fixo de .68rem). */
    padding-top:calc(0.288 * var(--fs-titulo) - 7px);
  }
  .sec--quiet > .container > .section-head > .display-2,
  .sec--capitular > .container > .section-head > .display-2,
  .sec--claro > .container > .section-head > .display-2{
    grid-column:2;
    margin-top:0; /* a margem existe para o empilhamento do mobile */
  }

  /* o respiro que era do .section-head volta no primeiro conteúdo */
  .sec--quiet .section-head + *,
  .sec--capitular .section-head + *,
  .sec--claro .section-head + *{ margin-top:clamp(26px, 3.6vh, 48px); }
}

/* ---------- capitular: a abertura ----------
   Sem numeração, o que marca a primeira seção da página é o filete que a
   separa do hero e um degrau a mais na escala do título. */
.sec--capitular > .container{
  border-top:1px solid var(--tan-soft);
  padding-top:clamp(30px, 4.5vh, 60px);
}
.sec--capitular{ --fs-titulo:clamp(2.5rem, 6.2vw, 5.9rem); }
/* régua fluida no celular estreito: com o NBSP que cola número+unidade
   ("323.625 habitantes"), 2.5rem não cabe em 327px e o token era cortado.
   8.6vw escala com o container — o maior token do deck cabe em qualquer
   largura até o piso de 1.8rem (~320px de tela). */
@media (max-width:480px){
  .sec--capitular{ --fs-titulo:clamp(1.8rem, 8.6vw, 2.5rem); }
}
.page .sec--capitular .section-head .display-2{
  font-size:var(--fs-titulo);
  max-width:17ch;
  text-wrap:balance;
}
@media (min-width:1024px){

}

/* ---------- lastro: prova ancorada ao lado da afirmação ---------- */
@media (min-width:1024px){
  .sec--lastro > .container{
    grid-template-columns:minmax(0, 7fr) minmax(0, 4fr);
    column-gap:clamp(32px, 5vw, 88px);
  }
  .sec--lastro .sec__main{ grid-column:1; }
  .sec--lastro .sec__aside{
    grid-column:2;
    position:sticky;
    top:max(96px, 22svh);
    align-self:start;
    padding-left:clamp(20px, 2vw, 32px);
    border-left:1px solid var(--tan-soft);
  }
  /* dentro do aside os acentos perdem a borda própria: a coluna já é a borda */
  .sec--lastro .sec__aside .ressalva{ padding-left:0; border-left:0; }
  .sec--lastro .sec__aside > *:first-child{ margin-top:0; }
}
.sec--lastro .sec__aside{ margin-top:clamp(28px, 4vh, 44px); }
@media (min-width:1024px){ .sec--lastro .sec__aside{ margin-top:0; } }

/* ---------- contraste: o balanço ---------- */
.sec__par{
  display:grid;
  gap:clamp(22px, 3vw, 44px);
  margin-top:clamp(26px, 3.6vh, 48px);
}
@media (min-width:900px){
  .sec__par{ grid-template-columns:1fr 1fr; }
  .sec__lado--b{
    border-left:1px solid var(--tan-soft);
    padding-left:clamp(22px, 3vw, 44px);
  }
}
.sec__lado span{
  display:block;
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--tan);
  margin-bottom:.7em;
}
.sec__lado p{
  font-size:1rem;
  font-weight:300;
  line-height:1.72;
  color:var(--cream-60);
}
.sec__aberto{
  margin-top:clamp(24px, 3.2vh, 40px);
  padding-left:clamp(18px, 2vw, 26px);
  border-left:2px solid var(--tan);
  max-width:72ch;
}
.sec__aberto span{
  display:block;
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--tan);
  margin-bottom:.6em;
}
.sec__aberto p{
  font-size:.98rem;
  font-weight:300;
  line-height:1.72;
  color:var(--cream-60);
}
/* frases proibidas em par: frase à esquerda, motivo legal à direita */
@media (min-width:900px){
  .sec--contraste .banned li,
  .sec--contraste .args li{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(22px, 3vw, 44px);
    align-items:start;
  }
  .sec--contraste .banned__nota,
  .sec--contraste .args__nota{
    margin-top:0;
    padding-left:clamp(22px, 3vw, 44px);
    border-left:1px solid var(--tan-soft);
  }
}

/* ---------- ficha: cabeçalho-índice fixo ---------- */
@media (min-width:1024px){
  .sec--ficha > .container{
    grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);
    column-gap:clamp(32px, 5vw, 88px);
  }
  .sec--ficha .section-head{
    grid-column:1;
    position:sticky;
    top:max(96px, 22svh);
    align-self:start;
    margin-bottom:0;
  }
  .sec--ficha .section-head .display-2{
    /* a coluna do índice é 4/12: a 2.6rem "O empreendimento" não cabia e
       o artigo caía sozinho na primeira linha */
    font-size:clamp(1.5rem, 2.4vw, 2.1rem);
    --fs-titulo:clamp(1.5rem, 2.4vw, 2.1rem);
    max-width:18ch;
    text-wrap:balance;
  }
  .sec--ficha .sec__corpo{ grid-column:2; }
  .sec--ficha .sec__corpo > *:first-child{ margin-top:0; }
}
.sec--ficha .sec__corpo{ margin-top:clamp(26px, 3.6vh, 48px); }
@media (min-width:1024px){ .sec--ficha .sec__corpo{ margin-top:0; } }

/* ---------- prancha: a página inteira de imagem ---------- */
.sec--prancha{ padding-block:0 var(--section-pad); }
.prancha{
  position:relative;
  min-height:min(78svh, 860px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.prancha__media{
  position:absolute;
  inset:-12% 0; /* folga vertical consumida pelo parallax */
  background-color:var(--dark-3);
}
.prancha__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.prancha__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(23,24,22,.94) 0%,
    rgba(23,24,22,.86) 30%,
    rgba(23,24,22,.62) 55%,
    rgba(23,24,22,.24) 78%,
    rgba(23,24,22,0) 100%
  );
}
@media (max-width:768px){
  .prancha__scrim{
    background:linear-gradient(
      to top,
      rgba(23,24,22,.96) 0%,
      rgba(23,24,22,.92) 45%,
      rgba(23,24,22,.78) 72%,
      rgba(23,24,22,.5) 100%
    );
  }
}
.prancha__card{
  position:relative;
  z-index:2;
  width:100%;
  padding-block:clamp(48px, 9vh, 110px);
}
.prancha__card .section-head{ margin-bottom:0; }
/* três níveis para vencer `.page .section-head .display-2{max-width:20ch}`.
   24ch cabe "510 studios de 29,92 m²" inteiro na primeira linha — com 16ch
   a quebra caía no meio da metragem e no meio de "na orla da Graciosa". */
.page .prancha__card .display-2{ margin-top:1.2rem; max-width:30ch; text-wrap:balance; }
.prancha__legenda{
  margin-top:1.5rem;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream-60);
}
.sec__depois{ margin-top:clamp(40px, 6vh, 80px); }

/* ---------- prova: imagem como anexo técnico ---------- */
@media (min-width:1024px){
  .sec--prova > .container{
    grid-template-columns:minmax(0, 7fr) minmax(0, 4fr);
    column-gap:clamp(32px, 5vw, 88px);
  }
  .sec--prova .section-head{ grid-column:1 / -1; }
  .sec--prova .sec__corpo{ grid-column:1; }
  .sec--prova .prova{ grid-column:1; }
  .sec--prova .prova__legenda{
    grid-column:2;
    position:sticky;
    top:max(96px, 22svh);
    align-self:end;
    padding-left:clamp(20px, 2vw, 32px);
    border-left:1px solid var(--tan-soft);
  }
}
.prova{ margin-top:clamp(28px, 4vh, 52px); }
.prova__frame{
  overflow:hidden;
  background-color:var(--dark-3);
  border:1px solid var(--tan-soft);
}
.prova__frame img{
  width:100%;
  height:auto;
  display:block;
}
.prova__legenda{ margin-top:clamp(20px, 3vh, 32px); }
.prova__legenda .rotulo{
  display:block;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--tan);
  margin-bottom:.8em;
}
.prova__legenda .fonte{ margin-top:1rem; }

/* ---------- módulo .serie (dentro de quiet/lastro/claro) ----------
   Eixo único desenhado pelo scroll no lugar das bordas por item;
   sem JS e em reduced-motion o CSS já entrega o eixo inteiro. */
.serie{ position:relative; }
.serie__eixo{
  position:absolute;
  left:0; top:0; bottom:0;
  width:1px;
  background:var(--tan-soft);
  transform-origin:50% 0;
}
.section--claro .serie__eixo{ background:var(--dark-soft); }
.serie .numlist li,
.serie .timeline li{ border-top:0; border-left:0; }
.serie .timeline li::before{ opacity:1; }
@media (min-width:1024px){
  .serie .numlist__n{
    position:sticky;
    top:28svh;
    /* sem transition: o GSAP é dono da opacity aqui — as duas juntas
       alongavam o brilho de .7s para ~1,2s */
  }
}