/* ============================================================
   ON! — Conectado com a vida · Landing Page
   AVVA Empreendimentos · 2026

   SISTEMA DE ESCALA
   -----------------
   html { font-size: 1vw } => 1rem = 1% da largura da viewport.
   Toda medida é escrita em "px de projeto" e dividida por --ratio,
   então tipografia E espaçamento saem da MESMA régua e o layout
   escala proporcionalmente como um vetor. Trocar --ratio num
   breakpoint re-proporciona a página inteira de uma vez.

     --ratio: 16   -> prancheta de 1600px (desktop)
     --ratio: 4.3  -> prancheta de  430px (mobile)
   ============================================================ */

:root {
  /* ---- régua ---- */
  --ratio: 16;

  /* ---- unidades de espaço (px de projeto) ---- */
  --u-4:   calc(4rem   / var(--ratio));
  --u-8:   calc(8rem   / var(--ratio));
  --u-12:  calc(12rem  / var(--ratio));
  --u-16:  calc(16rem  / var(--ratio));
  --u-24:  calc(24rem  / var(--ratio));
  --u-32:  calc(32rem  / var(--ratio));
  --u-48:  calc(48rem  / var(--ratio));
  --u-64:  calc(64rem  / var(--ratio));
  --u-96:  calc(96rem  / var(--ratio));
  --u-128: calc(128rem / var(--ratio));
  --u-160: calc(160rem / var(--ratio));
  --u-224: calc(224rem / var(--ratio));

  /* ---- escala tipográfica (mesma régua) ---- */
  --fs-h1:    calc(192rem / var(--ratio));
  --fs-h2:    calc(136rem / var(--ratio));
  --fs-h3:    calc(96rem  / var(--ratio));
  --fs-h4:    calc(63rem  / var(--ratio));
  --fs-h5:    calc(40rem  / var(--ratio));
  --fs-h6:    calc(28rem  / var(--ratio));
  /* Piso de legibilidade: a régua pura do ERA entrega 10,4px de corpo
     a 1280px de largura. Fiel, porém ilegível numa página de conversão.
     O max() preserva a proporção acima de 1600 e trava embaixo. */
  --fs-body:  max(12.5px, calc(13rem  / var(--ratio)));
  --fs-small: max(11.5px, calc(13rem  / var(--ratio)));
  --fs-micro: max(10px,   calc(11rem  / var(--ratio)));

  /* ---- cor: 2 bases + rampa de opacidade ----
     Nenhum matiz novo: texto secundário é a MESMA cor a 60%,
     linha a 10%, fundo sutil a 5%. Terracota é acento pontual. */
  --base-0-100: #f7eadb;
  --base-0-80:  #f7eadbcc;
  --base-0-60:  #f7eadb99;
  --base-0-30:  #f7eadb4d;
  --base-0-10:  #f7eadb1a;

  --base-1k-100: #252814;
  --base-1k-80:  #252814cc;
  --base-1k-60:  #25281499;
  --base-1k-30:  #2528144d;
  --base-1k-10:  #2528141a;
  --base-1k-05:  #2528140d;

  --accent: #c87050;

  /* aliases de papel (compatibilidade com o CSS existente) */
  --paper:        var(--base-0-100);
  --paper-light:  var(--base-0-100);
  --white:        var(--base-0-100);
  --ink:          var(--base-1k-100);
  --carbon:       var(--base-1k-100);
  --terracotta:      var(--accent);
  --terracotta-dark: var(--accent);
  --olive:       var(--base-1k-60);
  --olive-deep:  var(--base-1k-100);
  --line:        var(--base-1k-10);
  --line-strong: var(--base-1k-30);
  --line-light:  var(--base-0-30);

  /* ---- fontes ---- */
  --font-display: "Ambroise", "Cormorant Garamond", Georgia, serif;
  /* A Cormorant Light é bem mais fina e tem altura-x menor que a Ambroise
     do ERA: no mesmo corpo ela "pesa" menos. O peso de display é uma
     variável para poder subir a 400 se o Light sumir em algum tamanho. */
  --display-weight: 400;
  --font-body:    "Maison Neue Extended", "Neue Montreal", Arial, sans-serif;
  --font-script:  "Pinyon Script", "Ambroise", cursive;

  /* ---- shell / seções ---- */
  --shell:      min(88vw, calc(1408rem / var(--ratio)));
  --shell-wide: min(92vw, calc(1504rem / var(--ratio)));
  --sec:        var(--u-160);
  --nav-h:      var(--u-64);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-brand: cubic-bezier(0.7, 0, 0.22, 1);
}

html { font-size: 1vw; }

/* Degraus da régua. Uma prancheta por faixa: trocar --ratio
   re-proporciona a página inteira de uma vez. Sem os degraus
   intermediários, a prancheta de 430px aplicada até 991px deixaria
   tudo ~2,3x grande no tablet. */
@media (max-width: 1199px) { :root { --ratio: 12; } }   /* prancheta 1200 */
@media (max-width: 991px) {
  :root {
    --ratio: 9;                                          /* prancheta  900 */
    --fs-h1: calc(96rem / var(--ratio));
    --fs-h2: calc(68rem / var(--ratio));
    --fs-h3: calc(48rem / var(--ratio));
    --fs-h4: calc(34rem / var(--ratio));
  }
}
@media (max-width: 767px) {
  /* Teto da regua no telefone.
     A prancheta e 430, mas esta faixa vai ate 767 -- e com font-size: 1vw
     tudo cresceria junto com a tela. Num Galaxy Z Fold aberto (673) o corpo
     do texto ia a 23,5px, o rotulo micro a 15,7px e a pagina a 28 telas.
     Travando a raiz em 4,3px, acima de 430 a tipografia para de crescer e
     so o container acompanha a largura -- que e o comportamento certo: mais
     espaco para respirar, nao letra maior. */
  html { font-size: min(1vw, 4.3px); }

  :root {
    --ratio: 4.3;                                        /* prancheta  430 */
    --sec: var(--u-96);

    /* A prancheta mobile tem escala de tipo PRÓPRIA — como o artboard
       mobile do Figma. Manter os "px de projeto" do desktop aqui daria
       título de 150px num celular: o ERA consegue porque "ERA RESIDENCE"
       tem 13 caracteres; "MORAR NÃO É PAUSA…" tem 60. */
    --fs-h1:    calc(62rem / var(--ratio));
    --fs-h2:    calc(46rem / var(--ratio));
    --fs-h3:    calc(32rem / var(--ratio));
    --fs-h4:    calc(24rem / var(--ratio));
    --fs-h5:    calc(19rem / var(--ratio));
    /* Pisos de leitura: a escala pura dava 8,7px no micro em 375px -- pequeno
       demais para rotulo em telefone. Os titulos seguem proporcionais. */
    --fs-body:  max(13px,   calc(15rem / var(--ratio)));
    --fs-small: max(12px,   calc(13rem / var(--ratio)));
    --fs-micro: max(11px,   calc(10rem / var(--ratio)));
  }
}

/* trava em telas muito largas — sem isso, 4K vira outdoor.
   (o ERA não faz isso e cresce indefinidamente) */
@media (min-width: 1800px) { html { font-size: 18px; } }

/* ---------- Fonts ---------- */
/* Ambroise François — a Didone que o ERA usa, com acentos PT completos
   (250 glifos, nada faltando). Fornecida pelo cliente. */
@font-face {
  font-family: "Ambroise";
  src: url("/assets/avva/fonts/AmbroiseFrancois-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/avva/fonts/CormorantGaramond-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/avva/fonts/CormorantGaramond-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/avva/fonts/CormorantGaramond-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("/assets/avva/fonts/PinyonScript.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maison Neue Extended";
  src: url("/assets/avva/fonts/MaisonNeueExtended-Book.woff2") format("woff2"),
       url("/assets/avva/fonts/MaisonNeueExtended-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maison Neue Extended";
  src: url("/assets/avva/fonts/MaisonNeueExtended-Bold.woff2") format("woff2"),
       url("/assets/avva/fonts/MaisonNeueExtended-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree ON";
  src: url("/assets/avva/on/Figtree-Variable.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-display: swap;
}

/* ==========================================================================
   REGRA: TEXTO SOBRE FOTO
   --------------------------------------------------------------------------
   Medido no ERA (site inteiro, 29 amostras de rolagem): 12 textos claros
   sobre foto, ZERO text-shadow, UM unico token de gradiente sempre em 0,3.
   A diferenca deles nao e a opacidade -- e a posicao: todo texto micro fica
   ancorado numa BORDA do quadro, onde uma faixa direcional resolve. Texto no
   meio da foto obriga a uma elipse radial em cima do ponto focal, que e o que
   se le como "overlay pesado".

   Duas faixas, e nada entre elas:
     micro   (<=13px de projeto) -> obrigatoriamente ancorado a uma borda,
                                    dentro do alcance da faixa. Precisa 4,5:1.
     display (>=40px de projeto) -> pode ficar em qualquer lugar. Precisa 3:1.

   Proibido: tamanho entre 14 e 39px sobre foto; text-shadow; gradiente
   radial sobre o ponto focal.

   A conta que sustenta a regra: para 11px claro chegar a 4,5:1 o fundo tem de
   estar em luminancia <=107. Sobre piso claro (~200) isso exige alpha 0,50;
   sobre janela estourada (~240), 0,59. Nao existe overlay leve que salve
   texto pequeno no meio de foto clara -- so mudar onde ele fica.

   Conferir com:  python3 tools/contraste-foto.py
   ========================================================================== */

/* Token unico. Substitui os 8 gradientes que existiam antes. Para foto mais
   clara sobe-se SO a variavel --g na secao; nunca se escreve gradiente novo. */
.ph-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --g: 0.30;
  --alcance: 42%;
}
/* Perfil da rampa: segura quase a forca cheia atraves de 55% da faixa e so
   entao cai. Uma queda rapida junto a borda deixava o texto sem apoio ja a
   um quarto de distancia dela -- foi o que o aferidor pegou na calibragem.
   Os stops sao fracoes de --alcance, entao mudar o alcance nao deforma a
   curva. */
.ph-grad--bot {
  background: linear-gradient(to top,
    rgba(16, 18, 10, var(--g)) 0%,
    rgba(16, 18, 10, calc(var(--g) * 0.94)) calc(var(--alcance) * 0.55),
    rgba(16, 18, 10, calc(var(--g) * 0.46)) calc(var(--alcance) * 0.82),
    rgba(16, 18, 10, 0) var(--alcance));
}
.ph-grad--top {
  --gt: var(--g-topo, var(--g));
  --at: var(--alcance-topo, var(--alcance));
  background: linear-gradient(to bottom,
    rgba(16, 18, 10, var(--gt)) 0%,
    rgba(16, 18, 10, calc(var(--gt) * 0.94)) calc(var(--at) * 0.55),
    rgba(16, 18, 10, calc(var(--gt) * 0.46)) calc(var(--at) * 0.82),
    rgba(16, 18, 10, 0) var(--at));
}
.ph-grad--both {
  --gt: var(--g-topo, var(--g));
  --at: var(--alcance-topo, 30%);
  background:
    linear-gradient(to top,
      rgba(16, 18, 10, var(--g)) 0%,
      rgba(16, 18, 10, calc(var(--g) * 0.94)) calc(var(--alcance) * 0.55),
      rgba(16, 18, 10, calc(var(--g) * 0.46)) calc(var(--alcance) * 0.82),
      rgba(16, 18, 10, 0) var(--alcance)),
    linear-gradient(to bottom,
      rgba(16, 18, 10, var(--gt)) 0%,
      rgba(16, 18, 10, calc(var(--gt) * 0.94)) calc(var(--at) * 0.55),
      rgba(16, 18, 10, calc(var(--gt) * 0.46)) calc(var(--at) * 0.82),
      rgba(16, 18, 10, 0) var(--at));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scrollbar-width: thin;
  scrollbar-color: var(--terracotta) var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.38;
  letter-spacing: -0.024em;
  overflow-x: clip;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--terracotta); color: var(--white); }

section[id] { scroll-margin-top: var(--nav-h); }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.skip-link {
  position: fixed; top: -100px; left: calc(16rem / var(--ratio)); z-index: 300;
  background: var(--ink); color: var(--white);
  padding: calc(9.6rem / var(--ratio)) calc(19.2rem / var(--ratio)); border-radius: 0;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: calc(16rem / var(--ratio)); }

/* ---------- Type utilities ---------- */
.shell { width: var(--shell); margin-inline: auto; }
.shell-wide { width: var(--shell-wide); margin-inline: auto; }

/* Eyebrow — Maison Extended Bold 700, caps, tracking largo */
/* Rótulo padrão (l1 do ERA): 11px / 400 / +0,048em.
   O peso 700 é exceção — só onde o rótulo precisa se impor. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.048em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--strong { font-weight: 700; }

/* Rótulo de navegação (l2 do ERA): 9px / 700 / +0,32em */
.label-nav {
  font-family: var(--font-body);
  font-size: calc(9rem / var(--ratio));
  font-weight: 700;
  letter-spacing: 0.32em;
  line-height: 1.33;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--base-0-100); opacity: 0.85; }
.eyebrow--olive { color: var(--base-1k-60); }

/* Títulos — Bodoni Moda 400 (peso leve em corpo grande = elegância),
   entrelinha abaixo de 1 para o bloco tipográfico "assentar" */
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  font-size: var(--fs-h1);
  letter-spacing: -0.024em;
  line-height: 0.87;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  font-size: var(--fs-h2);
  letter-spacing: -0.024em;
  line-height: 0.88;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  font-size: var(--fs-h4);
  letter-spacing: -0.016em;
  line-height: 0.88;
  text-wrap: balance;
}

/* palavra em script dentro do título — o gesto do ERA */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 1.28em;
  line-height: 0.8;
}

/* Corpo — Maison Extended Book 400, tracking positivo */
/* Corpo — kerning NEGATIVO. O +0,048em do ERA é só para rótulos
   em caixa alta; texto corrido lá tem −0,024em / 1,38 / 13px. */
.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.38;
  letter-spacing: -0.024em;
  max-width: 46em;
}

.sec-head { margin-bottom: calc(80rem / var(--ratio)); }
.sec-head .eyebrow { display: block; margin-bottom: calc(17.6rem / var(--ratio)); }
.sec-head .h2 { max-width: min(100%, 14em); }
.sec-head .lead { margin-top: calc(22.4rem / var(--ratio)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(11.2rem / var(--ratio));
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(13rem / var(--ratio));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: calc(16.8rem / var(--ratio)) calc(30.4rem / var(--ratio));
  border-radius: 0;
  border: 1px solid transparent;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn .btn-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--carbon); }

.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--white); }

/* Secundario de verdade: "Explorar o projeto" e navegacao, nao conversao.
   Com o mesmo peso do botao principal ele dividia o clique ao meio. Vira
   link sublinhado, some a caixa. */
.hero__actions .btn--ghost-light {
  border: 0;
  padding-inline: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
  opacity: 0.8;
}
.hero__actions .btn--ghost-light:hover { background: none; opacity: 1; }

.btn--ghost-light {
  border-color: rgba(251, 245, 237, 0.5);
  color: var(--white);
}
.btn--ghost-light:hover { border-color: var(--white); background: rgba(251, 245, 237, 0.08); }

.link-cta {
  display: inline-flex;
  align-items: baseline;
  gap: calc(8.8rem / var(--ratio));
  font-weight: 700;
  font-size: calc(13rem / var(--ratio));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: calc(5.6rem / var(--ratio));
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.link-cta:hover { color: var(--terracotta-dark); border-color: var(--terracotta); }
.link-cta .btn-arrow { transition: transform 0.3s var(--ease); }
.link-cta:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Nav — ícone à esquerda, CTAs à direita, sem barra ----------
   Posições medidas no ERA em 1600px: margem 48, ícone 136x136.
   A cor vem de tokens semânticos que a classe de tema religa. */

:root {
  --fg:       var(--base-1k-100);
  --fg-muted: var(--base-1k-60);
  --fg-line:  var(--base-1k-30);
}
[data-theme="dark"] {
  --fg:       var(--base-0-100);
  --fg-muted: var(--base-0-60);
  --fg-line:  var(--base-0-30);
}

.nv {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  pointer-events: none;
  color: var(--fg);
  /* sem transição: o ERA troca na fronteira exata (medido: 0s) */
}
.nv > * { pointer-events: auto; }

.nv__logo {
  position: fixed;
  top: var(--u-48);
  left: var(--u-48);
  width: calc(104rem / var(--ratio));
  display: block;
  color: inherit;
  /* o hero já traz o logo ao centro: aqui ele só entra depois dele */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.nv__logo.is-visible { opacity: 1; pointer-events: auto; transform: none; }
/* overflow visible: ao girar 90°, o "O" ultrapassa o viewBox e era cortado */
.nv__logo svg { width: 100%; height: auto; display: block; overflow: visible; }

/* o "O" gira conforme o scroll — simetria de 180° mantém o logo íntegro */
/* fill-box + 50% faz o "O" girar no PRÓPRIO eixo.
   Com view-box a origem contaria a partir do canto do viewBox (260,450),
   e o grupo orbitava o canto do logo em vez de girar sobre si. */
/* o eixo é definido por svgOrigin no GSAP (coordenadas de usuário do SVG),
   porque transform-box/transform-origin não são confiáveis em <g> */
.nv__o { will-change: transform; }

.nv__links {
  position: fixed;
  top: var(--u-48);
  right: var(--u-48);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--u-16);
}
.nv__link {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.048em;
  line-height: 1.45;
  text-transform: uppercase;
  color: inherit;
  max-width: calc(160rem / var(--ratio));
  transition: opacity 0.3s var(--ease);
}
.nv__link:hover { opacity: 0.6; }
/* CTA principal: mesma tipografia do "Select an Apartment" do ERA —
   Ambroise 28px, peso 400, caixa alta, tracking zero (medido). */
.nv__link--primary {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h6);
  letter-spacing: 0;
  /* duas linhas: entrelinha fechada, como o resto da display do site */
  line-height: 0.94;
  /* a regra do .nv__link limita a 160px, que corta "APARTAMENTO" */
  max-width: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: var(--u-8);
  margin-bottom: var(--u-12);
}
.nv__menu-btn { display: none; }

/* mobile: os dois links somem, entra o Menu — exatamente como o ERA alterna */
@media (max-width: 767px) {
  .nv__logo { top: var(--u-24); left: var(--u-24); width: calc(88rem / var(--ratio)); }
  .nv__links { top: var(--u-24); right: var(--u-24); }
  .nv__links .nv__link:not(.nv__menu-btn) { display: none; }
  .nv__menu-btn { display: block; }
}

/* ---------- Overlay do menu ---------- */
.mnu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--base-1k-100);
  color: var(--base-0-100);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--u-96) var(--u-24);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.mnu[hidden] { display: none; }
.mnu.is-open { opacity: 1; }
.mnu__close {
  position: absolute;
  top: var(--u-24);
  right: var(--u-24);
  color: inherit;
}
.mnu__nav { display: grid; gap: var(--u-24); }
.mnu__nav a {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h4);
  line-height: 0.88;
  letter-spacing: -0.016em;
  text-transform: uppercase;
}
.mnu__site-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  gap: 0.7em;
  min-height: 44px;
  margin-top: var(--u-64);
  padding: var(--u-12) var(--u-20);
  border: 1px solid rgba(251, 245, 237, 0.58);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.mnu__site-link:hover,
.mnu__site-link:focus-visible {
  border-color: var(--base-0-100);
  background: var(--base-0-100);
  color: var(--base-1k-100);
}
.mnu__cta {
  margin-top: var(--u-24);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: var(--u-8);
  justify-self: start;
  align-self: flex-start;
}

/* ---------- Hero — logo animado ao centro ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: var(--ink);
  color: var(--white);
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media video,
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(19, 21, 10, 0.5) 0%, rgba(19, 21, 10, 0.12) 30%, rgba(19, 21, 10, 0.24) 62%, rgba(19, 21, 10, 0.78) 100%),
    radial-gradient(circle at 50% 46%, rgba(19, 21, 10, 0.06) 22%, rgba(13, 15, 7, 0.42) 100%);
}

.hero__eyebrow {
  position: absolute;
  z-index: 3;
  top: calc(var(--nav-h) + clamp(calc(12rem / var(--ratio)), 2.5vh, calc(28rem / var(--ratio))));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  color: var(--white);
  opacity: 0;
}

.hero__brand {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
}
.hero__logo {
  display: block;
  width: min(74vw, 860px);
  height: auto;
  overflow: visible;
  transform: translateY(-3%);
}
.hero__logo :is(path, text) { fill: var(--white); }
.hero__logo path { transform-box: view-box; transform-origin: center; }

.hero__o-left, .hero__o-right, .hero__type,
.hero__n-mark, .hero__bang-mark { opacity: 0; }

.hero__type {
  font-family: "Figtree ON", "Maison Neue Extended", Arial, sans-serif;
  font-size: 48.5px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero__by {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.hero__pitch {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  width: min(90vw, calc(736rem / var(--ratio)));
  text-align: center;
  opacity: 0;
}
.hero__sub {
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.72;
  margin-inline: auto;
  max-width: 44em;
  opacity: 0.94;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(12rem / var(--ratio));
  margin-top: calc(36rem / var(--ratio));
}

.hero__meta {
  position: absolute;
  z-index: 3;
  left: calc((100vw - var(--shell-wide)) / 2);
  right: calc((100vw - var(--shell-wide)) / 2);
  bottom: calc(53rem / var(--ratio));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(32rem / var(--ratio));
  opacity: 0;
  pointer-events: none;
}
.hero__meta p {
  display: grid;
  gap: calc(4.8rem / var(--ratio));
  font-size: var(--fs-micro);
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.88;
}
.hero__meta p:last-child { text-align: right; }

/* assinatura AVVA ao centro do rodapé do hero — saiu de dentro do logo */
.hero__by {
  display: flex;
  align-items: center;
  gap: var(--u-8);
  pointer-events: auto;
  opacity: 0.75;
  transition: opacity 0.3s var(--ease);
}
.hero__by:hover { opacity: 1; }
.hero__by span {
  font-size: var(--fs-micro);
  letter-spacing: 0.048em;
  text-transform: uppercase;
}
.hero__by img { width: calc(52rem / var(--ratio)); height: auto; }

/* coreografia de 9,6s, disparada por .is-hero-ready */
body.is-hero-ready .hero__o-left    { animation: hero-o-left 9.6s var(--ease-brand) forwards; }
body.is-hero-ready .hero__o-right   { animation: hero-o-right 9.6s var(--ease-brand) forwards; }
body.is-hero-ready .hero__type      { animation: hero-type 9.6s linear forwards; }
body.is-hero-ready .hero__n-mark    { animation: hero-mark-in 9.6s var(--ease-brand) forwards; }
body.is-hero-ready .hero__bang-mark { animation: hero-bang-in 9.6s var(--ease-brand) forwards; }
/* A HUD nao espera a coreografia.
   Trafego pago decide entre 3 e 8 segundos: com a entrada em 4,7s o visitante
   pagava o clique e passava cinco segundos vendo um logo animar sem saber
   onde e nem o que fazer. Agora localizacao e CTA existem em menos de 1s e o
   logo segue sua animacao por tras -- o gesto de marca continua inteiro, so
   deixa de ser pedagio. */
body.is-hero-ready .hero__eyebrow   { animation: hero-eyebrow-in 0.6s var(--ease) 0.35s forwards; }
body.is-hero-ready .hero__pitch     { animation: hero-pitch-in 0.7s var(--ease) 0.55s forwards; }
body.is-hero-ready .hero__meta      { animation: hero-fade-in 0.6s var(--ease) 0.8s forwards; }

/* O "O" nasce parado. Antes ele entrava em scale(0.92) e crescia durante o
   proprio fade -- e esse crescimento junto com a opacidade que lia como uma
   mexida estranha. Agora aparece ja em escala final, na posicao de descanso
   (105,45px e onde o O sozinho fica opticamente centrado; o zero e a posicao
   dele dentro do "ON!" completo), segura 1,2s imovel e so entao abre. */
@keyframes hero-o-left {
  0%       { opacity: 0; transform: translateX(105.45px) scale(1); }
  9%, 22%  { opacity: 1; transform: translateX(105.45px) scale(1); }
  32%, 57% { opacity: 1; transform: translateX(-159.88px) scale(1); }
  70%, 72% { opacity: 1; transform: translateX(105.45px) scale(1); }
  83%, 100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hero-o-right {
  0%       { opacity: 0; transform: translateX(105.45px) scale(1); }
  9%, 22%  { opacity: 1; transform: translateX(105.45px) scale(1); }
  32%, 57% { opacity: 1; transform: translateX(370.78px) scale(1); }
  70%, 72% { opacity: 1; transform: translateX(105.45px) scale(1); }
  83%, 100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hero-type {
  0%, 34% { opacity: 0; clip-path: inset(0 100% 0 0); }
  36% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(20, end); }
  48% { opacity: 1; clip-path: inset(0 0 0 0); animation-timing-function: ease-in; }
  54% { opacity: 1; clip-path: inset(0 0 0 0); }
  59%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes hero-mark-in {
  0%, 70%   { opacity: 0; transform: translateX(146px); filter: blur(4px); }
  84%, 100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes hero-bang-in {
  0%, 72%   { opacity: 0; transform: translateX(118px); filter: blur(4px); }
  86%, 100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes hero-by-in {
  0%, 86%   { opacity: 0; transform: translateX(18px); filter: blur(2px); }
  97%, 100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
/* o eyebrow é centralizado por translateX: precisa de keyframe próprio
   para não perder o deslocamento durante o fade */
@keyframes hero-eyebrow-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* No telefone o hero e coluna flex: os blocos ja estao centrados pelo fluxo,
   entao o translateX(-50%) das versoes de desktop -- que existia para
   compensar o left: 50% do posicionamento absoluto -- empurraria tudo meia
   largura para a esquerda. */
@keyframes hero-eyebrow-in-mob {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-pitch-in-mob {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-pitch-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 767px) {
  /* ---- Hero em fluxo, nao em posicao absoluta ----
     No desktop os quatro blocos sao absolutos: rotulo no topo, logo
     centralizado na altura INTEIRA, frase ancorada na base e meta no rodape.
     Numa tela de 812 cabem; numa de 740 -- iPhone com a barra do navegador,
     que e o caso real -- o logo centralizado desce para dentro do espaco da
     frase e o texto fica escrito por cima dele.

     Em coluna flex nada disso pode acontecer: cada bloco ocupa seu lugar e o
     logo toma o que sobra. Funciona em qualquer altura, inclusive quando a
     barra do Safari recolhe e a viewport muda no meio da rolagem. */
  .hero {
    display: flex;
    flex-direction: column;
    padding: calc(var(--nav-h) + (20rem / var(--ratio)))
             0
             calc(24rem / var(--ratio));
  }
  .hero__eyebrow,
  .hero__brand,
  .hero__pitch,
  .hero__meta {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
  }
  .hero__eyebrow { align-self: center; }
  .hero__brand {
    flex: 1 1 auto;
    min-height: 0;
    inset: auto;
    /* O logo desce para junto do texto. Centralizado no espaco livre ele
       ficava a 141px da frase -- o vao inteiro se abria embaixo dele. Agora
       a folga toda vai para cima, onde funciona como respiro. */
    align-content: end;
    padding-bottom: calc(30rem / var(--ratio));
  }
  .hero__pitch {
    width: 88vw;
    margin-inline: auto;
    margin-bottom: calc(28rem / var(--ratio));
  }
  /* Rodape do hero em 2x2, com a assinatura centrada embaixo.
     Cada <p> ja traz dois dados empilhados -- basta virar grade de duas
     colunas para os quatro cairem em 2x2, e a AVVA atravessa as duas.
     Em coluna unica eram quatro linhas soltas ocupando altura a toa. */
  .hero__meta {
    width: var(--shell-wide);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: calc(18rem / var(--ratio)) calc(20rem / var(--ratio));
  }
  .hero__meta p:last-child { text-align: left; }
  .hero__by {
    order: 3;
    grid-column: 1 / -1;
    justify-self: center;
  }
  /* o logo se ajusta ao espaco livre em vez de ter largura fixa */
  .hero__logo { width: 88vw; max-height: 100%; transform: none; }
  /* --- Conceito ---
     As folhagens sao recortes pensados para sangrar numa tela larga; em 390
     elas entram 70 a 195px para dentro e o que se ve e um mato cortado.
     Saem do telefone: decoracao que so aparece pela metade nao decora. */
  .cpt__leaf { display: none; }

  body.is-hero-ready .hero__eyebrow { animation-name: hero-eyebrow-in-mob; }
  body.is-hero-ready .hero__pitch   { animation-name: hero-pitch-in-mob; }
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(19, 21, 10, 0.5) 0%, rgba(19, 21, 10, 0.15) 26%, rgba(19, 21, 10, 0.42) 58%, rgba(19, 21, 10, 0.86) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__o-left, .hero__o-right, .hero__n-mark, .hero__bang-mark, .hero__by,
  .hero__eyebrow, .hero__meta, .hero__pitch { opacity: 1 !important; animation: none !important; }
  .hero__type { opacity: 0 !important; }
  .hero__pitch { transform: translateX(-50%) !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .hero__pitch { transform: none !important; }
}

/* ---------- Galeria ---------- */
.gal {
  background: var(--paper-light);
  padding-block: calc(98rem / var(--ratio)) 0;
  overflow: clip;
}
.gal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(32rem / var(--ratio));
  margin-bottom: calc(46rem / var(--ratio));
}
.gal__counter {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--terracotta-dark);
  padding-bottom: calc(6.4rem / var(--ratio));
}

.gal__stage { position: relative; }
.gal__viewport {
  overflow: hidden;
  padding-block: 0 calc(124rem / var(--ratio));
}
.gal__track {
  display: flex;
  align-items: flex-start;
  gap: calc(44rem / var(--ratio));
  padding-inline: calc((100vw - var(--shell-wide)) / 2);
  width: max-content;
}
.gal__slide { flex-shrink: 0; }
.gal__slide figure { position: relative; overflow: hidden; }
.gal__slide img {
  height: min(54vh, calc(576rem / var(--ratio)));
  width: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.gal__slide--tall img { aspect-ratio: 4 / 5; object-position: center 20%; }
.gal__slide--box img { aspect-ratio: 4 / 3; }
.gal__slide figcaption {
  display: flex;
  gap: calc(16rem / var(--ratio));
  align-items: baseline;
  margin-top: calc(16rem / var(--ratio));
  padding-top: calc(13.6rem / var(--ratio));
  border-top: 1px solid var(--line);
  font-size: calc(13rem / var(--ratio));
  letter-spacing: 0.06em;
}
.gal__slide figcaption .idx {
  font-weight: 400;
  color: var(--terracotta-dark);
  letter-spacing: 0.14em;
}

/* Mobile: native swipe */
@media (max-width: 767px) {
  .gal__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gal__viewport::-webkit-scrollbar { display: none; }
  .gal__track { padding-inline: 4vw 6vw; }
  .gal__slide { width: 84vw; scroll-snap-align: center; }
  .gal__slide img { width: 100%; height: auto; aspect-ratio: 16 / 11; }
  .gal__slide--tall img { aspect-ratio: 4 / 5; }
  .gal__slide--box img { aspect-ratio: 4 / 3; }
}

/* ---------- 2. O Empreendimento ----------
   Posições medidas na referência (secao 2.svg), em % da largura:
     título      8,4% -> ~50%   (passa POR TRÁS da foto)
     foto        46,6% -> 74,4% (retrato, topo acima do texto)
     apoio       75,6%          (à direita da foto)
     dados       18,7% -> 80%   (rodapé, 5 colunas) */
/* mesma cor da seção de citação: tinta a 60% sobre o papel */
.dev {
  background: var(--base-1k-60);
  color: var(--base-0-100);
  padding-block: var(--sec);
  overflow: clip;
}
.dev .eyebrow { color: var(--base-0-100); opacity: 0.8; }

.dev__grid {
  position: relative;
  width: var(--shell-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.dev__eyebrow {
  grid-column: 1 / 6;
  grid-row: 1;
  display: block;
  margin-bottom: var(--u-24);
}

/* o título ocupa até a metade e fica ATRÁS da foto */
.dev__title {
  grid-column: 1 / 7;
  grid-row: 2;
  z-index: 3;                 /* texto POR CIMA da foto */
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(96rem / var(--ratio));
  line-height: 0.9;
  letter-spacing: -0.024em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* foto em retrato, sobreposta ao título, com o topo acima do texto */
.dev__hero {
  grid-column: 6 / 10;
  grid-row: 1 / 3;            /* não invade a linha dos dados */
  z-index: 1;                 /* foto por baixo do texto */
  margin-top: calc(-40rem / var(--ratio));
  align-self: start;
}
.dev__hero .img-w {
  aspect-ratio: 389 / 485;      /* proporção do retrato na referência */
  width: 100%;
}
.dev__hero img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* apoio à direita da foto, alinhado ao terço inferior dela */
/* acompanha a base da foto: mesma linha da grade, alinhado ao fim,
   e recebe o mesmo deslocamento em Y no scroll (ver lp.js) */
.dev__lead {
  grid-column: 10 / 13;
  grid-row: 1 / 3;
  align-self: end;
  padding-left: var(--u-24);
  padding-bottom: var(--u-32);
  font-size: var(--fs-body);
  line-height: 1.38;
  letter-spacing: -0.024em;
  color: var(--base-0-80);
}

/* régua de dados no rodapé, recuada */
.dev__facts {
  grid-column: 2 / 12;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--u-32);
  /* folga suficiente para a foto, que na entrada desce até +30svh */
  margin-top: max(var(--u-224), 34svh);
}
.dev__fact { display: flex; flex-direction: column; gap: var(--u-24); }
.dev__fact-label {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  color: var(--base-0-60);
}
.dev__fact-value {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h4);
  line-height: 0.88;
  letter-spacing: -0.016em;
  white-space: nowrap;
}
.dev__fact-value sup {
  font-size: 0.3em;
  vertical-align: super;
  letter-spacing: 0.04em;
}

@media (max-width: 991px) {
  .dev__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dev__eyebrow { grid-column: 1 / 7; }
  .dev__title { grid-column: 1 / 7; grid-row: 2; }
  .dev__hero { grid-column: 2 / 6; grid-row: 3; margin-top: var(--u-48); }
  .dev__lead { grid-column: 1 / 7; grid-row: 4; padding-left: 0; margin-top: var(--u-48); }
  .dev__facts { grid-column: 1 / 7; grid-row: 5; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--u-32); margin-top: var(--u-96); }
}
@media (max-width: 767px) {
  .dev__hero { grid-column: 1 / 7; }
}

/* ---------- 3. O Conceito — editorial pinado ---------- */
.cpt {
  position: relative;
  background: var(--base-0-100);
  overflow: clip;
  isolation: isolate;
}

/* Folhagem — proporções do ERA (50-71% da largura, sangria forte, rotação
   por posição). No Conceito ela vive DENTRO dos painéis, para viajar junto
   com a pista horizontal, e sempre ATRÁS do texto. */
.leaf, .cpt__leaf {
  position: absolute;
  z-index: 0;                 /* atrás do conteúdo do painel */
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* painel 1: folhagem no topo esquerdo */
.cpt__leaf--tl {
  width: 46%;
  top: -14%;
  left: -10%;
}

/* arbusto centrado EXATAMENTE na fronteira entre os painéis 1 e 2:
   left 100% é a borda do painel 1; o translate de -50% deixa metade
   de cada lado, então ele aparece nos dois. */
.cpt__leaf--base {
  width: 66%;
  left: 100%;
  bottom: -6%;
  transform: translateX(-50%);
}

/* painel 3: folhagem no topo direito */
.cpt__leaf--tr {
  width: 46%;
  top: -14%;
  right: -10%;
  transform: scaleX(-1);
}

/* --- demais seções --- */

@media (max-width: 767px) {
  .cpt__leaf--base { width: 108%; }
  .cpt__leaf--tl { width: 76%; top: -8%; left: -18%; }
  .cpt__leaf--tr { width: 76%; top: -8%; right: -18%; }
}

/* trilho lateral */
.cpt__rail {
  position: absolute;
  z-index: 3;
  left: calc((100vw - var(--shell-wide)) / 2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u-16);
  color: var(--base-1k-60);
}
.cpt__rail-num {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.048em;
}
.cpt__rail-line {
  width: 1px;
  height: calc(120rem / var(--ratio));
  background: var(--base-1k-30);
}
.cpt__rail-word {
  font-size: calc(9rem / var(--ratio));
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

/* pista horizontal */
.cpt__viewport { overflow: hidden; }
.cpt__track { display: flex; width: max-content; }

/* sem overflow aqui: o arbusto precisa atravessar do painel 1 para o 2.
   Quem recorta é o .cpt__viewport, no nível da seção. */
.cpt__panel {
  width: 100vw;
  min-height: 100svh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--u-96) calc((100vw - var(--shell)) / 2);
  position: relative;
  z-index: 2;
}
.cpt__panel > *:not(.cpt__leaf) { position: relative; z-index: 2; }
.cpt__panel .eyebrow { display: block; margin-bottom: var(--u-32); }

.cpt__title {
  font-size: var(--fs-h2);
  max-width: 17em;
  /* perspectiva para o reveal 3D por caractere */
  perspective: 800px;
}
.cpt__title .char { display: inline-block; will-change: transform; }

.cpt__body {
  margin-top: var(--u-48);
  max-width: 42ch;
  font-size: var(--fs-body);
  line-height: 1.38;
  letter-spacing: -0.024em;
  color: var(--base-1k-60);
}
.cpt__mark {
  margin-top: var(--u-64);
  font-size: var(--fs-micro);
  color: var(--accent);
  opacity: 0.6;
}

.cpt__symbols {
  display: flex;
  gap: clamp(24px, 6vw, 96px);
  margin-top: var(--u-64);
  align-items: flex-start;
}
.cpt__symbols figure { width: calc(180rem / var(--ratio)); min-width: 96px; }
.cpt__symbols img { width: 100%; height: auto; opacity: 0.9; }
.cpt__symbols figcaption {
  margin-top: var(--u-16);
  font-size: var(--fs-micro);
  letter-spacing: 0.048em;
  text-transform: uppercase;
  color: var(--base-1k-60);
}

/* mobile: sem pin, painéis empilham */
@media (max-width: 991px) {
  .cpt__rail { display: none; }
  .cpt__viewport { overflow: visible; }
  .cpt__track { display: block; width: auto; }
  .cpt__panel {
    width: auto;
    min-height: auto;
    padding: var(--u-96) 0;
    border-bottom: 1px solid var(--base-1k-10);
  }
  .cpt__panel:last-child { border-bottom: 0; }
  .cpt__symbols { gap: 20px; }
  }

/* ---------- Lazer 5º pavimento — full bleed + wipe diagonal ---------- */
.amen {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: var(--ink);
  color: var(--white);
}

/* pilha de camadas de imagem */
.amen__stage { position: absolute; inset: 0; }
.amen__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: clip-path;
}
.amen__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* As fotos do Lazer sao escuras (academia L 0,132, 3% de pixels claros),
   entao a forca padrao do token basta. O alcance sobe para 52% porque a
   lista de 8 ambientes agora e ancorada na base. */
.amen .ph-grad { --g: 0.52; --alcance: 44%; --g-topo: 0.34; --alcance-topo: 22%; }

.amen__eyebrow {
  position: absolute;
  z-index: 3;
  top: calc(var(--nav-h) + clamp(calc(14.4rem / var(--ratio)), 3vh, calc(32rem / var(--ratio))));
  left: calc((100vw - var(--shell-wide)) / 2);
  color: var(--white);
}

/* seletor à direita */
/* Ancorado na base, nao centralizado: os 8 itens ocupavam de 33% a 67% da
   altura -- o miolo exato do quadro, onde faixa direcional nenhuma alcanca.
   Encostados embaixo, a mesma faixa que serve a legenda serve a lista. */
.amen__nav {
  position: absolute;
  z-index: 3;
  right: calc((100vw - var(--shell-wide)) / 2);
  bottom: calc(80rem / var(--ratio));
  text-align: right;
}
/* Duas colunas de 4: empilhados, os 8 itens ocupavam 34% da altura e o topo
   da lista ficava a 55% da borda -- distancia em que faixa nenhuma entrega o
   alpha 0,53 que texto de 11px exige. Em duas colunas o bloco cai para 17%. */
.amen__list {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: calc(14rem / var(--ratio)) calc(40rem / var(--ratio));
}
.amen__item { position: relative; }
.amen__btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: right;
  padding: var(--u-4) 0 var(--u-4) var(--u-16);
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.048em;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--base-0-100);
  opacity: 0.55;
  transition: opacity 0.4s var(--ease), font-weight 0.2s;
}
.amen__btn:hover { opacity: 0.85; cursor: pointer; }
.amen__item.is-active .amen__btn { opacity: 1; font-weight: 700; }

/* tick vertical no item ativo */
.amen__nav::before {
  content: "";
  position: absolute;
  left: calc(-14.4rem / var(--ratio));
  top: 0;
  width: 1px;
  height: 1.1em;
  background: var(--white);
  opacity: 0;
  transform: translateY(var(--tick-y, 0));
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease);
}
.amen__nav.is-ready::before { opacity: 1; }

/* legenda inferior esquerda */
.amen__caption {
  position: absolute;
  z-index: 3;
  left: calc((100vw - var(--shell-wide)) / 2);
  bottom: calc(80rem / var(--ratio));
  width: min(52ch, 46vw);
}
.amen__caption-label { display: block; margin-bottom: calc(14rem / var(--ratio)); color: var(--white); }
.amen__caption-title {
  font-size: var(--fs-h4);
  line-height: 0.88;
  letter-spacing: -0.016em;
}

/* CTA circular inferior direito */
/* Foi para a esquerda: a lista agora ocupa o canto inferior direito. */
.amen__cta {
  position: absolute;
  z-index: 3;
  left: calc((100vw - var(--shell-wide)) / 2 + min(46vw, 52ch) + var(--u-48));
  bottom: calc(80rem / var(--ratio));
  display: grid;
  place-items: center;
  width: calc(151rem / var(--ratio));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(251, 245, 237, 0.45);
  font-size: calc(9.6rem / var(--ratio));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              color 0.4s var(--ease), transform 0.4s var(--ease);
}
.amen__cta:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
  transform: scale(1.04);
}

@media (max-width: 991px) {
  .amen__caption { width: min(46ch, 64vw); }
  .amen__cta { width: calc(124rem / var(--ratio)); }
}

@media (max-width: 767px) {
  .amen { min-height: 100svh; }
  .amen__nav {
    top: auto;
    bottom: auto;
    right: auto;
    left: calc((100vw - var(--shell-wide)) / 2);
    transform: none;
    top: calc(var(--nav-h) + calc(57.6rem / var(--ratio)));
    text-align: left;
    max-width: 62vw;
  }
  .amen__nav::before { display: none; }
  /* volta a uma coluna: em 375px as duas colunas colapsavam para 35px de
     largura e os itens viravam faixas de 4px de altura */
  .amen__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: calc(10rem / var(--ratio));
  }
  /* Resquicio de antes do sistema proporcional: com html{font-size:1vw},
     0.62rem viravam 2,3px em 375 -- os itens renderizavam com 4px de altura.
     Passa a usar o token de micro, como o resto da pagina. */
  .amen__btn {
    text-align: left;
    padding: calc(3rem / var(--ratio)) 0;
    font-size: var(--fs-micro);
  }
  .amen__item.is-active .amen__btn { padding-left: calc(10rem / var(--ratio)); }
  .amen__caption { width: min(90vw, 42ch); bottom: calc(53rem / var(--ratio)); }
  .amen__caption-title { font-size: calc(28rem / var(--ratio)); }
  .amen__cta {
    top: calc(var(--nav-h) + calc(54.4rem / var(--ratio)));
    bottom: auto;
    left: auto;
    right: calc((100vw - var(--shell-wide)) / 2);
    width: calc(80rem / var(--ratio));
    font-size: calc(8rem / var(--ratio));
  }
  /* no telefone a coluna empilha e a faixa precisa cobrir mais altura */
  /* no telefone a lista sobe para o topo, entao a faixa de cima cresce */
  .amen .ph-grad { --g: 0.56; --alcance: 58%; --g-topo: 0.42; --alcance-topo: 44%; }
}

/* ---------- Rooftop — tratamento do hero do ERA + abas de ambiente ----------
   Abas medidas no ERA (.amen-tab): Ambroise 40px / peso 400 / caixa alta /
   ls -0,008em / lh 1,0. Ativa em opacidade 1, inativa em 0,4, transição
   0.4s cubic-bezier(0.25, 1, 0.5, 1). */
/* Trilho de permanencia. O ERA usa 3,39 telas (.amen-scroll-area = 2392px
   sobre viewport de 706px); aqui ficou em 1,8 -- 0,8 tela de pausa, o
   suficiente para escolher um ambiente sem a secao parecer travada. */
.rf-area {
  position: relative;
  height: 180svh;
}

.rf {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: var(--base-1k-100);
  color: var(--base-0-100);
  display: grid;
  grid-template-rows: auto 1fr;
  padding-block: calc(var(--nav-h) + var(--u-64)) var(--u-96);
}

.rf__media { position: absolute; inset: 0; }
.rf__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.rf__scene.is-on { opacity: 1; }

/* Foto critica: a piscina tem 32% de pixels claros, a maior taxa do site.
   E a legenda de 13px cai sobre ela, entao a faixa inferior sobe de forca. */
.rf .ph-grad { --g: 0.62; --alcance: 50%; --g-topo: 0.54; --alcance-topo: 48%; }

.rf__head,
.rf__foot {
  position: relative;
  z-index: 2;
  width: var(--shell-wide);
  margin-inline: auto;
}

/* Abas e legenda passam a formar um bloco unico ancorado na base: antes as
   abas ficavam de 47% a 69% da altura -- no miolo -- e exigiam um gradiente
   lateral so para elas. Juntas embaixo, uma faixa serve as duas. */
.rf__foot {
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--u-48);
}

.rf__head .eyebrow { display: block; margin-bottom: var(--u-24); }
.rf__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h2);
  line-height: 0.88;
  letter-spacing: -0.024em;
  text-transform: uppercase;
  max-width: 11em;
}

/* abas alinhadas à direita, como no ERA */
.rf__tabs { flex: 0 0 auto; }
.rf__tab-list { text-align: left; }
.rf__tab-item { position: relative; }
.rf__tab {
  position: relative;
  display: block;
  padding-left: var(--u-24);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h5);
  line-height: 1;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.4;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.rf__tab:hover { opacity: 0.7; }
.rf__tab.is-active { opacity: 1; }
/* o traço vertical do item ativo */
.rf__tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.rf__tab.is-active::before { opacity: 1; }

/* position + min-height sao necessarios: os .rf__cap sao absolutos (pilha de
   crossfade), entao sem isso o container fica com altura e largura zero -- foi
   o que aconteceu quando a secao virou coluna no telefone. */
.rf__caption {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 48ch;
  min-height: 3.4em;
  padding-bottom: calc(6rem / var(--ratio));
}
.rf__cap {
  position: absolute;
  max-width: 42ch;
  font-size: var(--fs-body);
  line-height: 1.38;
  letter-spacing: -0.024em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.rf__cap.is-on { opacity: 0.92; transform: none; }

@media (max-width: 767px) {
  /* No telefone o trilho e mais curto: a coluna ja empilha e cada rolagem
     percorre menos conteudo, entao 3,39 telas viraria espera morta. */
  .rf-area { height: 150svh; }
  .rf__title { max-width: none; }
  .rf__foot { flex-direction: column; align-items: flex-start; gap: var(--u-24); }
  .rf .ph-grad { --g: 0.66; --alcance: 60%; --g-topo: 0.54; --alcance-topo: 44%; }
}

/* ---------- Interiores — estrutura da "The space to live in" do ERA ----------
   Medidas do ERA na prancheta 1600: shell 1489 @ x48, grade mestre de 10
   colunas, 5 colunas dentro de cada metade, espaçadores nomeados (u-272,
   u-96, u-64, u-16) criando o ritmo vertical, e as duas colunas
   DESENCONTRADAS em 240px — é o desencontro que dá o ar editorial. */

.u-272 { height: calc(272rem / var(--ratio)); }
/* O primeiro espacador da secao vem logo depois do rooftop sangrado: 272px
   de papel vazio ali lem como buraco. Dentro da secao o ritmo do ERA se
   mantem. */
.int > .u-272:first-child { height: calc(128rem / var(--ratio)); }
.u-96  { height: var(--u-96); }
.u-64  { height: var(--u-64); }
.u-16  { height: var(--u-16); }

.int {
  background: var(--base-0-100);
  overflow: clip;
}

.int__grid10,
.int__imgs {
  width: var(--shell-wide);
  margin-inline: auto;
}

/* --- título centralizado: display + palavra em script --- */
.int__grid10 {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--u-16);
}
.int__title-w {
  grid-column: 3 / 9;
  text-align: center;
}
.int__eyebrow { display: block; margin-bottom: var(--u-24); }
/* As duas linhas na mesma fonte display: o script na segunda linha destoava
   do resto da pagina, que e toda Ambroise em caixa alta. */
.int__title-l {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h2);
  line-height: 0.87;
  letter-spacing: -0.024em;
  text-transform: uppercase;
  perspective: 800px;
}
.int__title-l .char { display: inline-block; will-change: transform; }

/* --- duas colunas desencontradas --- */
.int__imgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--u-16);
  align-items: start;
}
.int__l { margin-top: calc(-120rem / var(--ratio)); }   /* sobe */
.int__r { margin-top: calc(120rem / var(--ratio)); }    /* desce — 240 de defasagem */

.int__grid5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--u-16);
}

/* wrapper que corta: o zoom acontece dentro dele (padrão do ERA) */
.img-w { overflow: clip; }
.img-w img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* coluna esquerda: foto menor + descrição deslocada */
/* a foto da esquerda sangra até a borda esquerda da tela */
.int__l-img {
  grid-column: 1 / 5;
  margin-left: calc((100vw - var(--shell-wide)) / -2);
}
.int__l-img .img-w { aspect-ratio: 3 / 4; }
.int__l-desc { grid-column: 3 / 5; margin-top: var(--u-96); }
.int__l-desc-title {
  font-size: var(--fs-micro);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  color: var(--base-1k-60);
}

/* coluna direita: foto maior, lead com fio, descrição e botão circular */
/* a foto da direita sangra até a borda direita da tela */
.int__r-img {
  grid-column: 2 / 6;
  margin-right: calc((100vw - var(--shell-wide)) / -2);
}
.int__r-img .img-w { aspect-ratio: 4 / 3; }

.int__r-lead {
  grid-column: 1 / 5;
  margin-top: var(--u-64);
  display: flex;
  align-items: baseline;
  gap: var(--u-16);
}
/* Bloco, não inline: o ScrollTrigger não calcula a geometria de um
   elemento inline com filhos em bloco, e o reveal das linhas não disparava. */
.int__r-lead-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h5);
  line-height: 1;
  letter-spacing: -0.008em;
  text-transform: uppercase;
}

.int__r-desc { grid-column: 3 / 5; margin-top: var(--u-64); }
/* A frase saiu de cima da foto da Arquitetura: aqui ela abre o bloco de
   acabamentos, sobre papel -- sem foto atras, sem faixa, sem problema de
   contraste, e no lugar em que ela de fato descreve o que vem depois. */
.int__r-desc-label {
  display: block;
  margin-bottom: calc(16rem / var(--ratio));
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  color: var(--base-1k-100);
  max-width: 34ch;
}
.int__r-desc p {
  font-size: var(--fs-body);
  line-height: 1.38;
  letter-spacing: -0.024em;
  color: var(--base-1k-60);
}

.int__r-btn { grid-column: 2 / 4; margin-top: var(--u-96); }
.btn-circle {
  display: grid;
  place-items: center;
  width: calc(208rem / var(--ratio));
  min-width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--base-1k-30);
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn-circle:hover {
  background: var(--base-1k-100);
  border-color: var(--base-1k-100);
  color: var(--base-0-100);
}

/* --- fecho em tela cheia --- */
.int__full {
  margin-top: calc(272rem / var(--ratio));
  width: 100%;
  overflow: clip;
  height: 100svh;
}
.int__full img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* --- máscaras de linha (padrão split-line-mask do ERA) --- */
.line-mask { display: block; overflow: clip; }
.line-mask > span { display: block; will-change: transform; }

@media (max-width: 991px) {
  .int__title-w { grid-column: 2 / 10; }
  .int__l, .int__r { margin-top: 0; }
  .int__imgs { grid-template-columns: 1fr; row-gap: var(--u-96); }
  .int__l-desc, .int__r-desc { grid-column: 1 / 5; }
  .int__r-lead { grid-column: 1 / 6; }
}
@media (max-width: 767px) {
  .int__title-w { grid-column: 1 / 11; }
  .int__l-img, .int__r-img { grid-column: 1 / 6; }
  .int__l-desc, .int__r-desc, .int__r-lead { grid-column: 1 / 6; }
  .int__r-btn { grid-column: 1 / 4; }
  .int__full { height: 70svh; }
}

/* ---------- Plantas ----------
   Refeita na regua do ERA: cabecalho assimetrico, trilho de tipologias no
   tratamento das .amen-tab (Ambroise 400 caixa alta, ativa 1 / inativa 0,4,
   transicao 0.4s cubic-bezier(0.25,1,0.5,1)), a planta grande sobre o papel
   sem moldura, e os ambientes reduzidos a uma linha de micro-tipografia --
   no lugar da tabela de comodos que poluia a secao.

   A secao inteira e dimensionada para caber numa tela: o miolo em coluna
   flexivel toma a altura livre e a planta ocupa o que sobra. Empilhado, o
   conjunto passava de 1700px na prancheta de 1600x900. */
/* Respiro superior dimensionado pela nav: com a secao ocupando exatamente
   uma tela existe uma posicao natural de descanso em que o topo dela encosta
   no topo da janela -- e ali o logo caia sobre o rotulo e o "Fale com a AVVA"
   sobre a primeira linha do texto de apoio. 104 poe o rotulo abaixo da base
   do logo (92) e joga o apoio para 163, abaixo da base do CTA (125). */
.plans {
  background: var(--base-0-100);
  padding-block: calc(104rem / var(--ratio)) calc(40rem / var(--ratio));
}
.plans > .shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - (calc(2304rem / var(--ratio)) / var(--ratio)));
}

/* cabecalho: titulo a esquerda, apoio recuado na coluna da direita */
.plans__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--u-64);
}
.plans__title {
  margin-top: calc(12rem / var(--ratio));
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h3);
  line-height: 0.88;
  letter-spacing: -0.024em;
  text-transform: uppercase;
}
.plans__lead {
  font-size: var(--fs-body);
  line-height: 1.38;
  letter-spacing: -0.024em;
  color: var(--base-1k-60);
  max-width: 44ch;
  justify-self: end;
}

/* trilho de tipologias */
.plans__rail {
  margin-top: calc(28rem / var(--ratio));
  border-top: 1px solid var(--base-1k-10);
}
.plans__rail-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.plans__rail-item { position: relative; }
.plans__rail-btn {
  display: block;
  width: 100%;
  padding: calc(16rem / var(--ratio)) calc(16rem / var(--ratio)) calc(16rem / var(--ratio)) 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.plans__rail-btn:hover { opacity: 0.7; }
.plans__rail-item.is-active .plans__rail-btn,
.plans__rail-item.is-active .plans__rail-btn:hover { opacity: 1; }

/* fio que acende sob a tipologia ativa */
.plans__rail-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--base-1k-100);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.plans__rail-item.is-active::after { transform: scaleX(1); }

.plans__idx {
  display: block;
  font-size: max(10px, calc(9rem / var(--ratio)));
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--base-1k-60);
}
/* Numero e nome, sem metragem: repetida oito vezes a unidade virava ruido,
   e ela ja aparece grande na ficha. A caixa reserva duas linhas para que os
   oito nomes fiquem na mesma base, mesmo quando um deles quebra. */
.plans__rail-name {
  display: block;
  margin-top: calc(10rem / var(--ratio));
  min-height: 2.3em;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(22rem / var(--ratio));
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: uppercase;
  text-wrap: balance;
}

/* corpo: ficha estreita a esquerda, planta na coluna larga */
.plans__body {
  flex: 1 1 auto;
  min-height: calc(300rem / var(--ratio));
  margin-top: calc(24rem / var(--ratio));
  display: grid;
  grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr);
  gap: var(--u-48);
}
.plans__info {
  align-self: start;
  display: flex;
  flex-direction: column;
}

/* a metragem e a ancora editorial da secao */
.plans__area {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h4);
  line-height: 0.9;
  letter-spacing: -0.024em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.plans__area span {
  font-size: 0.34em;
  letter-spacing: 0.048em;
  vertical-align: 0.9em;
  color: var(--base-1k-60);
}
.plans__name {
  margin-top: calc(20rem / var(--ratio));
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.048em;
  text-transform: uppercase;
}
.plans__sub {
  margin-top: calc(8rem / var(--ratio));
  font-size: var(--fs-micro);
  line-height: 1.45;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  color: var(--base-1k-60);
}

/* ambientes: linha corrida, separada por pontos medianos */
.plans__rooms {
  margin-top: calc(28rem / var(--ratio));
  padding-top: calc(20rem / var(--ratio));
  border-top: 1px solid var(--base-1k-10);
  font-size: var(--fs-micro);
  line-height: 1.7;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  color: var(--base-1k-60);
  font-variant-numeric: tabular-nums;
}
/* Linha corrida com os nomes dos ambientes. A tabela de duas colunas existia
   para preencher a coluna estreita do desktop, mas repetia sete metragens ao
   lado de uma metragem total que ja e a ancora da secao. */
.plans__rooms .sep { opacity: 0.4; margin-inline: 0.5em; }
.plans__rooms .nota { display: block; margin-top: calc(12rem / var(--ratio)); opacity: 0.6; }

.plans__cta { margin-top: calc(32rem / var(--ratio)); }

/* palco: a planta respira, sem moldura nem sombra */
.plans__stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* A imagem sai do fluxo: com height:100% num quadro de altura automatica a
   porcentagem nao resolve e ela volta a altura intrinseca, empurrando a
   secao para 1391px. Absoluta, ela nao contribui altura nenhuma e o quadro
   passa a receber exatamente a sobra vertical da secao. */
.plans__frame {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
/* Largura e altura cheias com object-fit: contain -- as plantas tem
   proporcoes muito diferentes (de 1,06:1 no Tipo 4 a 2,01:1 no Tipo 3) e o
   par max-width/max-height deixava a imagem estourar o quadro e invadir a
   linha de ambientes. Assim o encaixe e deterministico e a troca nunca
   desloca o que vem depois. */
.plans__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease);
}
.plans__frame img.is-fading { opacity: 0; transform: scale(0.985); }

/* alternador de pavimento: mesmo desenho do dia/noite do ERA */
.plans__levels {
  flex: 0 0 auto;
  margin-top: var(--u-16);
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h6);
  line-height: 1;
  text-transform: uppercase;
}
.plans__levels[hidden] { display: none; }
.plans__lv {
  display: inline-flex;
  align-items: center;
  gap: var(--u-16);
}
.plans__lv-btn {
  font: inherit;
  color: inherit;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.plans__lv-btn.is-on { opacity: 1; }
.plans__lv-div {
  position: relative;
  width: calc(64rem / var(--ratio));
  min-width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}
.plans__lv-div > span {
  position: absolute;
  inset: 0 50% 0 0;
  background: currentColor;
  transition: inset 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.plans__lv-div.is-upper > span { inset: 0 0 0 50%; }

@media (max-width: 991px) {
  .plans > .shell { min-height: 0; }
  .plans__head { grid-template-columns: 1fr; align-items: start; gap: var(--u-24); }
  .plans__lead { justify-self: start; }
  .plans__title { max-width: none; }
  .plans__body { grid-template-columns: 1fr; gap: var(--u-48); }
  .plans__stage { order: -1; min-height: 46svh; }
}

@media (max-width: 767px) {
  /* no telefone o trilho rola na horizontal com encaixe, em vez de espremer
     oito colunas numa largura de 375px */
  .plans__rail { overflow-x: auto; scrollbar-width: none; }
  .plans__rail::-webkit-scrollbar { display: none; }
  .plans__rail-list {
    grid-auto-columns: 38vw;
    scroll-snap-type: x mandatory;
  }
  .plans__rail-item { scroll-snap-align: start; }
  .plans__rail-btn { padding-right: var(--u-16); }
  .plans__stage { min-height: 42svh; }
}

/* ---------- Localização — mapa anotado ----------
   No lugar da foto de mapa com tabela ao lado, a aerea de Itajai com os 17
   pontos do entorno plotados. As coordenadas sao porcentagens sobre a imagem
   inteira (Lp-On/mapa-pontos-on.json), entao a foto nunca pode ser recortada
   com object-fit: cover -- qualquer corte desloca todos os pontos. */
.loc {
  background: var(--base-0-100);
  padding-block: calc(104rem / var(--ratio)) calc(40rem / var(--ratio));
}

.loc__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--u-64);
}
.loc__title {
  margin-top: calc(12rem / var(--ratio));
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h3);
  line-height: 0.88;
  letter-spacing: -0.024em;
  text-transform: uppercase;
}
.loc__lead {
  font-size: var(--fs-body);
  line-height: 1.38;
  letter-spacing: -0.024em;
  color: var(--base-1k-60);
  max-width: 44ch;
  justify-self: end;
}

.loc__body {
  margin-top: calc(32rem / var(--ratio));
  display: grid;
  grid-template-columns: minmax(0, 0.26fr) minmax(0, 1fr);
  gap: var(--u-48);
  align-items: start;
}

/* coluna de dados */
.loc__address {
  display: grid;
  gap: calc(8rem / var(--ratio));
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  font-weight: 700;
}
.loc__city { font-weight: 400; color: var(--base-1k-60); }

.loc__table {
  margin-top: calc(32rem / var(--ratio));
  border-top: 1px solid var(--base-1k-10);
}
.loc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--u-16);
  padding-block: calc(9rem / var(--ratio));
  border-bottom: 1px solid var(--base-1k-10);
}
.loc__place {
  font-size: var(--fs-micro);
  letter-spacing: 0.048em;
  text-transform: uppercase;
}
.loc__time {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(22rem / var(--ratio));
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.loc__time small {
  font-size: 0.42em;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  margin-left: 0.3em;
  color: var(--base-1k-60);
}
.loc__foot {
  margin-top: calc(14rem / var(--ratio));
  font-size: var(--fs-micro);
  letter-spacing: 0.048em;
  text-transform: uppercase;
  color: var(--base-1k-30, var(--base-1k-60));
}
.loc__cta { margin-top: calc(28rem / var(--ratio)); }

/* mapa */
.loc__map {
  position: relative;
  margin: 0;
  overflow: clip;
}
.loc__map img {
  display: block;
  width: 100%;
  height: auto;
}
/* leve escurecimento na faixa da cidade, onde todos os pontos caem (y 30-72%
   depois do recorte), para os rotulos brancos assentarem sem apagar o ceu */
.loc__map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16, 18, 10, 0) 8%,
    rgba(16, 18, 10, 0.26) 42%,
    rgba(16, 18, 10, 0.44) 100%);
}
.loc__pins {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--base-0-100);
}

/* cada pino e uma ancora de tamanho zero na coordenada: o ponto e o rotulo
   se penduram nela, senao a largura do rotulo desviaria o ponto */
.loc__pin {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.loc__pin.is-in { opacity: 1; }

.loc__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(7rem / var(--ratio));
  height: calc(7rem / var(--ratio));
  min-width: 5px;
  min-height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--base-0-100);
  box-shadow: 0 0 0 1px rgba(16, 18, 10, 0.55), 0 2px 8px rgba(16, 18, 10, 0.45);
}
.loc__label {
  position: absolute;
  white-space: nowrap;
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: 0.048em;
  text-transform: uppercase;
}
.loc__pin--r .loc__label { left: calc(13rem / var(--ratio)); top: 0; transform: translateY(-50%); }
.loc__pin--l .loc__label { right: calc(13rem / var(--ratio)); top: 0; transform: translateY(-50%); }
.loc__pin--t .loc__label { bottom: calc(13rem / var(--ratio)); left: 0; transform: translateX(-50%); }
.loc__pin--b .loc__label { top: calc(13rem / var(--ratio)); left: 0; transform: translateX(-50%); }

/* o proprio empreendimento: ponto em acento, halo pulsando e rotulo em peso 700 */
.loc__pin--on .loc__dot {
  width: calc(13rem / var(--ratio));
  height: calc(13rem / var(--ratio));
  min-width: 10px;
  min-height: 10px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--base-0-100), 0 3px 14px rgba(16, 18, 10, 0.6);
}
.loc__pin--on .loc__dot::after {
  content: "";
  position: absolute;
  inset: calc(-9rem / var(--ratio));
  border-radius: 50%;
  border: 1px solid var(--base-0-100);
  opacity: 0.7;
  animation: locHalo 2.6s var(--ease) infinite;
}
@keyframes locHalo {
  0%   { transform: scale(0.72); opacity: 0.85; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.loc__pin--on .loc__label {
  /* 13px, nao 15: 15 caia na faixa morta da regra -- pequeno demais para os
     3:1 de display e sobre foto demais para os 4,5:1 de micro. */
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
}
@media (prefers-reduced-motion: reduce) {
  .loc__pin--on .loc__dot::after { animation: none; }
}

@media (max-width: 991px) {
  .loc__head { grid-template-columns: 1fr; align-items: start; gap: var(--u-24); }
  .loc__lead { justify-self: start; }
  .loc__body { grid-template-columns: 1fr; gap: var(--u-48); }
  .loc__map { order: -1; }
}

@media (max-width: 767px) {
  /* Em 375px a aerea inteira ficaria com 211px de altura e os rotulos
     encavalariam. Ela rola na horizontal com o dobro da largura da tela,
     preservando as porcentagens dos pontos. */
  .loc__map {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .loc__map::-webkit-scrollbar { display: none; }
  /* 300% e a largura em que a proporcao rotulo/mapa volta a ser a mesma de
     1046px no desktop -- em 200% os rotulos encavalavam */
  .loc__map img { width: 300%; max-width: none; }
  .loc__pins { width: 300%; }
  .loc__map::after { width: 300%; }
  .loc__label { font-size: 10px; }
}

/* ---------- CTA final ---------- */
/* O fechamento passa a acontecer diante do proprio predio: as tres
   perspectivas externas em fusao lenta, com um veu que garante o contraste
   do texto branco sobre um ceu claro. */
.cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--base-1k-100);
  color: var(--base-0-100);
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding-block: calc(120rem / var(--ratio)) calc(72rem / var(--ratio));
  text-align: left;
}
.cta > .shell { position: relative; z-index: 2; }
.cta__bg { position: absolute; inset: 0; z-index: 0; }
.cta__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s var(--ease);
}
.cta__shot.is-on { opacity: 1; }
/* Bloco inteiro ancorado na base a esquerda: antes ocupava de 19% a 81% da
   altura -- a fachada inteira coberta. Assim os 40% de cima do predio ficam
   completamente limpos, que e o efeito de "overlay leve" pedido, mesmo com a
   faixa de baixo sendo mais forte do que o veu chapado que existia aqui. */
/* Faixa curta tambem no topo: a nav e fixa e atravessa a secao inteira, e
   com faixa so na base ela ficava clara sobre o ceu limpo da fachada. */
.cta .ph-grad { --g: 0.66; --alcance: 60%; --g-topo: 0.45; --alcance-topo: 16%; }

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: end;
  gap: var(--u-64);
}
.cta__eyebrow {
  display: block;
  margin-bottom: calc(20rem / var(--ratio));
  color: var(--base-0-100);
  opacity: 0.85;
}
.cta__title {
  font-size: var(--fs-h3);
  max-width: 15ch;
}
.cta__sub {
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.cta__actions {
  margin-top: calc(36rem / var(--ratio));
  display: flex;
}
.cta__meta {
  margin-top: calc(32rem / var(--ratio));
  font-size: calc(12.48rem / var(--ratio));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ---------- Atalho flutuante do WhatsApp ----------
   Verde oficial de proposito: numa pagina de trafego pago o reconhecimento
   imediato vale mais do que a coerencia cromatica, e o botao e pequeno o
   bastante para nao brigar com a paleta. Aparece depois da hero. */
.wa {
  position: fixed;
  right: var(--u-32);
  bottom: var(--u-32);
  z-index: 120;
  display: grid;
  place-items: center;
  width: calc(60rem / var(--ratio));
  min-width: 56px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 22px rgba(16, 18, 10, 0.28), 0 1px 3px rgba(16, 18, 10, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
              visibility 0s linear 0.45s, box-shadow 0.3s var(--ease);
}
.wa.is-in {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.wa svg { width: 56%; height: 56%; display: block; }
.wa:hover { box-shadow: 0 10px 30px rgba(16, 18, 10, 0.34), 0 1px 3px rgba(16, 18, 10, 0.2); }
.wa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .wa { transition: opacity 0.2s linear, visibility 0s; transform: none; }
}

@media (max-width: 767px) {
  .wa {
    right: var(--u-24);
    /* acima da barra do navegador em telefone */
    bottom: max(var(--u-24), env(safe-area-inset-bottom, 0px) + 16px);
    width: 56px;
    min-width: 0;
  }
}

/* ---------- Footer oficial AVVA ---------- */
.avva-footer {
  position: relative;
  z-index: 1;
  background: #36302a;
  color: #36302a;
  font-family: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
}
.avva-footer__surface {
  overflow: hidden;
  background: #ece4da;
  color: #36302a;
}
.avva-footer__container {
  display: flex;
  flex-direction: column;
  min-height: 900px;
  padding-top: clamp(32px, 2.6vw, 42px);
}
.avva-footer__top,
.avva-footer__middle,
.avva-footer__credits-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) minmax(0, 2fr);
  column-gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}
.avva-footer__intro h2 {
  max-width: 70ch;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: clamp(32px, 3.27vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}
.avva-footer__cta,
.avva-footer__contact a,
.avva-footer__address,
.avva-footer__social a,
.avva-footer__legal a,
.avva-footer__legal span {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
}
.avva-footer__cta {
  position: relative;
  display: inline-flex;
  gap: 0.35em;
  margin-top: clamp(24px, 2.5vw, 36px);
  padding-bottom: 4px;
}
.avva-footer__cta::after,
.avva-footer__primary a::after,
.avva-footer__social a::after,
.avva-footer__legal a::after,
.avva-footer__contact a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease-brand);
}
.avva-footer__cta:hover::after,
.avva-footer__primary a:hover::after,
.avva-footer__social a:hover::after,
.avva-footer__legal a:hover::after,
.avva-footer__contact a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.avva-footer__contact a,
.avva-footer__social a,
.avva-footer__legal a,
.avva-footer__legal span,
.avva-footer__primary a {
  position: relative;
  display: inline-flex;
  width: fit-content;
  padding-bottom: 2px;
}
.avva-footer__contact a {
  overflow-wrap: anywhere;
}
.avva-footer__address {
  margin: 0;
}
.avva-footer ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.avva-footer__middle {
  margin-top: clamp(56px, 4.7vw, 72px);
}
.avva-footer__primary a {
  font-size: clamp(19px, 1.82vw, 26px);
  font-weight: 500;
  line-height: 1.2;
}
.avva-footer__logo {
  display: block;
  width: 100%;
  margin-top: auto;
  padding-top: clamp(54px, 5vw, 76px);
}
.avva-footer__logo span {
  display: block;
  width: 100%;
  aspect-ratio: 576 / 258;
  background: #36302a;
  transform: translateY(36.5%);
  -webkit-mask: url("/assets/avva/logo-avva-correto.svg") center / contain no-repeat;
  mask: url("/assets/avva/logo-avva-correto.svg") center / contain no-repeat;
}
.avva-footer__credits {
  background: #36302a;
  color: #f6f3ec;
  border-top: 1px solid rgba(246, 243, 236, 0.16);
}
.avva-footer__credits-grid {
  min-height: 32px;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}
.avva-footer__credits a {
  width: fit-content;
  transition: opacity 0.25s var(--ease);
}
.avva-footer__credits a:hover { opacity: 0.72; }
.avva-footer__credits button {
  justify-self: end;
  margin: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.avva-footer a:focus-visible,
.avva-footer button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .avva-footer__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
    min-height: 800px;
    padding-top: 21px;
  }
  .avva-footer__top,
  .avva-footer__middle { display: contents; }
  .avva-footer__intro {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 70px;
  }
  .avva-footer__intro h2 {
    max-width: 12ch;
    font-size: clamp(28px, 7.5vw, 32px);
    line-height: 1.05;
  }
  .avva-footer__cta { margin-top: 24px; }
  .avva-footer__primary {
    grid-column: 1;
    grid-row: 2;
  }
  .avva-footer__social {
    grid-column: 2;
    grid-row: 2;
  }
  .avva-footer__primary a {
    min-height: 26px;
    padding-block: 3px;
    font-size: 16px;
  }
  .avva-footer__social a,
  .avva-footer__legal a,
  .avva-footer__legal span,
  .avva-footer__contact a {
    min-height: 26px;
    padding-block: 3px;
  }
  .avva-footer__contact {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 68px;
  }
  .avva-footer__address {
    grid-column: 1;
    grid-row: 4;
    margin-top: 24px;
  }
  .avva-footer__legal {
    grid-column: 2;
    grid-row: 4;
    margin-top: 24px;
  }
  .avva-footer__logo {
    grid-column: 1 / -1;
    grid-row: 5;
    align-self: end;
    margin-top: 64px;
    padding-top: 0;
  }
  .avva-footer__logo span { transform: none; }
  .avva-footer__credits-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: 16px;
  }
  .avva-footer__credits-grid a {
    justify-self: end;
    white-space: nowrap;
  }
  .avva-footer__credits button { display: none; }
}

/* ============================================================
   Motion primitives — only active when JS is present
   ============================================================ */
html.js [data-fade] {
  opacity: 0;
  transform: translateY(26px);
}
html.js [data-fade].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

/* split lines (populated by JS) */
.r-mask {
  display: block;
  overflow: hidden;
  /* folga no topo: em caps acentuados (Ã, É, Ç) o diacrítico sobe acima
     da altura de caixa e seria cortado pelo overflow da máscara */
  padding-top: 0.16em;
  margin-top: -0.16em;
}
.r-mask > .r-seg {
  display: block;
  will-change: transform;
}
html.js .r-pending .r-seg { transform: translateY(112%); }

/* image reveal */
html.js [data-img] {
  clip-path: inset(100% 0 0 0);
  /* clip-path corta o desenho mas NÃO impede a imagem em scale(1.14)
     de contribuir para o scrollWidth — overflow:clip impede. */
  overflow: clip;
}
html.js [data-img] img { transform: scale(1.14); transform-origin: center bottom; }
html.js [data-img].is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease);
}
html.js [data-img].is-in img {
  transform: scale(1);
  transition: transform 1.5s var(--ease);
}

/* parallax inner images get GSAP transforms — keep overflow hidden on figure */
[data-plx-wrap] { overflow: hidden; }

/* reduced motion: neutralize everything */
@media (prefers-reduced-motion: reduce) {
  html.js [data-fade],
  html.js [data-img],
  html.js [data-img] img,
  html.js .r-pending .r-seg {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ---------- Galeria com carrossel (padrão .interior-s_gallery-cms) ----------
   Medidas do ERA: slide 1236x773, paginação com anterior/próximo e fio
   de progresso. */
/* O carrossel encosta na borda direita e encolhe pela esquerda: o alinhamento
   a direita e o que da o ar de catalogo, entao o recuo tem de vir do outro
   lado, nunca centralizando. */
.int__gal {
  width: auto;
  /* O recuo e travado em 12vw: escrito so em px de projeto, ele virava 44vw
     no telefone e sobrava um carrossel de 194px. */
  margin-left: calc((100vw - var(--shell-wide)) / 2 + min(calc(3040rem / var(--ratio)) / var(--ratio), 12vw));
  margin-right: 0;
}
.int__gal-viewport { overflow: clip; }
.int__gal-track { display: flex; will-change: transform; }
.int__gal-slide {
  flex: 0 0 100%;
  aspect-ratio: 1236 / 773;
}
.int__gal-slide .img-w { width: 100%; height: 100%; }

.pag {
  /* mesma sangria do carrossel: a paginacao fecha na borda direita da foto */
  margin-right: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--u-24);
}
.pag__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--u-8);
  font-size: var(--fs-micro);
  letter-spacing: 0.048em;
  text-transform: uppercase;
  color: var(--base-1k-60);
  transition: color 0.3s var(--ease);
}
.pag__btn:hover:not(:disabled) { color: var(--base-1k-100); }
.pag__btn:disabled { opacity: 0.3; cursor: default; }
.pag__progress { height: 1px; background: var(--base-1k-10); position: relative; }
.pag__progress span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--base-1k-100);
  transition: width 0.5s var(--ease);
}

/* ---------- Arquitetura — transição sticky para o full bleed ----------
   Réplica da .arch-scroll-area: container alto com telas sticky
   empilhadas. Sticky NATIVO, não pin de JS — é o que o ERA usa e o que
   deixa a rolagem suave, porque o navegador resolve no compositor. */
.arch {
  position: relative;
  background: var(--base-0-100);
}


/* tela 2: a foto começa como card centralizado e cresce até o full bleed.
   clip-path é composto na GPU — a expansão fica suave mesmo em tela cheia. */
.arch__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  display: grid;
  place-items: center;
  background: var(--base-0-100);
}

/* Janela, nao miniatura. O quadro e uma mascara em clip-path que abre ate
   sangrar a tela; a foto por baixo fica sempre em tamanho cheio com
   object-fit: cover. Enquanto a janela nao abriu, as extremidades da foto
   ficam recortadas -- e o mecanismo do ERA, onde a imagem nunca recebe
   transform e so o box cresce. Um scale no conjunto encolhia a foto inteira
   em vez de recorta-la. */
.arch__photo {
  position: absolute;
  inset: 0;
  margin: 0;
  clip-path: inset(18% 24% 18% 24%);
  will-change: clip-path;
}
.arch__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.arch__scene.is-on { opacity: 1; }

.arch__word {
  position: absolute;
  z-index: 2;
  left: calc((100vw - var(--shell)) / 2);
  right: calc((100vw - var(--shell)) / 2);
  bottom: calc(150rem / var(--ratio));
  text-align: left;
  color: var(--base-0-100);
  /* só aparece quando a foto já tomou a tela — a classe vem do JS */
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.arch__word.is-visible { opacity: 1; pointer-events: auto; }

.arch__quote-line {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h4);
  line-height: 0.88;
  letter-spacing: -0.016em;
  text-transform: uppercase;
  max-width: 24ch;
}

/* Toggle no padrão do hero do ERA: duas palavras numa frase, com um
   divisor de 64x1 entre elas. Ativa em opacidade 1, inativa em 0,3,
   e a transição de 0.8s cubic-bezier(0.76,0,0.24,1) — valores medidos. */
/* Toggle na Maison: o ERA usa a display aqui, mas a pedido fica na fonte de
   corpo -- caixa alta, peso 700, tracking do rotulo l1. */
/* Toggle na faixa MICRO (13px), nao display: mais discreto na tela, como
   pedido. Isso muda o minimo exigido de 3:1 para 4,5:1 -- por isso a faixa
   inferior da secao sobe junto. O que nao pode e ficar entre 14 e 39px. */
.arch__tabs-line {
  margin-top: var(--u-24);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.arch__tabs {
  display: inline-flex;
  align-items: center;
  gap: calc(14rem / var(--ratio));
}
.arch__tab {
  font: inherit;
  /* o atalho `font` zera o letter-spacing herdado do botao */
  letter-spacing: inherit;
  color: inherit;
  text-transform: uppercase;
  opacity: 0.3;
  transition: opacity 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.arch__tab.is-active { opacity: 1; }
.arch__tab:hover { opacity: 0.7; }
.arch__tab.is-active:hover { opacity: 1; }

.arch__tabs-div {
  position: relative;
  width: calc(40rem / var(--ratio));
  min-width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}
.arch__tabs-div > span {
  position: absolute;
  inset: 0 50% 0 0;
  background: currentColor;
  transition: inset 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.arch__tabs-div.is-night > span { inset: 0 0 0 50%; }

/* Bloco unico ancorado na base a esquerda. Antes a frase ficava no centro
   exato do quadro -- e o centro desta foto e a janela de pe-direito duplo,
   estourada de luz. Nenhum overlay leve entrega nem 3:1 ali; era o que
   obrigava a elipse radial em cima justamente do que se esta vendendo.
   Encostado embaixo, uma faixa direcional serve frase, toggle e creditos de
   uma vez, e o ponto focal da foto fica limpo. */
/* 0,62 e nao 0,56 porque o toggle desceu de 40px (display, 3:1) para 13px
   (micro, 4,5:1): texto menor cobra faixa mais firme. */
.arch .ph-grad { --g: 0.60; --alcance: 56%; }
.arch__stage.is-night .ph-grad { --g: 0.34; }

/* Assinatura no rodape da foto sangrada, no rotulo l1 do ERA:
   Maison Neue Extended, 11px de projeto, caixa alta, tracking +0,048em.
   Peso 700 na primeira linha, 400 na segunda -- creditos sao nota de
   rodape editorial, nunca titulo. */
/* espaçadores que criam a distância de rolagem das telas sticky */
.arch__spacer { height: 100svh; }

@media (max-width: 767px) {
  .int__gal { margin-left: 8vw; max-width: none; }
  /* a frase sobe: com o recuo de desktop ela terminava 15px dentro do bloco
     de creditos na altura de 812px */
  .arch__word { bottom: calc(28rem / var(--ratio)); }

  /* ---- Alvos de toque ----
     Minimo de 44px (iOS) / 48dp (Android). A area cresce por padding e volta
     por margem negativa, entao o desenho na tela nao muda -- so o alcance do
     dedo. Sem isso o proprio botao Menu media 29x13. */
  .nv__menu-btn {
    padding: 16px 12px;
    margin: -16px -12px;
  }
  .rf__tab { padding-block: 14px; }
  .arch__tab { padding: 17px 2px; margin-block: -17px; }
  .pag__btn { padding: 16px 6px; margin: -16px -6px; }
  .amen__btn { padding-block: calc(13rem / var(--ratio)); }
  .plans__rail-btn { padding-block: calc(18rem / var(--ratio)); }
  .loc__row { padding-block: calc(14rem / var(--ratio)); }
  .hero__by { display: inline-flex; align-items: center; min-height: 44px; }
  .link-cta { padding-block: calc(46rem / var(--ratio)) calc(30rem / var(--ratio)); }

  /* ---- Legibilidade de rotulos miudos ---- */
  .loc__label { font-size: 11px; }
  .loc__time small { font-size: 0.5em; }
  .plans__area span { font-size: 0.42em; }

  /* ---- Simplificacao: menos rolagem morta ----
     A secao de Arquitetura tinha 3 telas, das quais 2 eram espacador puro
     para a mascara abrir. No telefone isso e rolagem sem recompensa: fica
     uma tela de abertura. O alcance da animacao acompanha em lp.js. */
  .arch__spacer:last-of-type { display: none; }
  /* os espacadores internos dos Interiores caem quase pela metade */
  .int .u-272 { height: calc(150rem / var(--ratio)); }

  /* "m2" e "2028" em 0,3em do h4 davam 6,3px -- ilegivel. No telefone o
     sobrescrito precisa de proporcao propria. */
  /* O titulo da 2a secao entrava em --fs-h2 (40px) e tomava 5 linhas no
     telefone. h3 mantem a presenca sem virar parede de texto. */
  .dev__title { font-size: var(--fs-h3); }

  /* ---- Piso de leitura para o que escapava da regua ----
     A prancheta mobile e 430, entao tudo escala por vw. Os textos de corpo
     tem piso e param de encolher, mas sobrescrito (em relativo), indice fixo
     em px e padding proporcional continuavam caindo: em 360 isso dava 8,4px.
     Aqui cada um ganha um minimo absoluto. */
  .dev__fact-value sup,
  .plans__area span { font-size: max(10px, 0.42em); }
  .loc__time small { font-size: max(10px, 0.5em); }
  .cpt__symbols figcaption { font-size: 11px; }

  /* ---- Numeros na Maison ----
     Os tres grupos (dados do empreendimento, tempos da Localizacao e a
     metragem da planta) trocam a Ambroise pela fonte de corpo no telefone.
     A Maison Extended e bem mais larga que a Ambroise no mesmo corpo, entao
     o tamanho cai junto para a linha nao estourar. tabular-nums fica: com
     digito de largura fixa a regua de numeros alinha na vertical, que e
     metade do ganho de trocar para uma sans. No desktop segue Ambroise. */
  .dev__fact-value,
  .loc__time,
  .plans__area {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .dev__fact-value { font-size: calc(19rem / var(--ratio)); line-height: 1.05; }
  .loc__time       { font-size: calc(18rem / var(--ratio)); }
  .plans__area     { font-size: calc(21rem / var(--ratio)); line-height: 1.05; }

  /* ---- Alvos de toque com piso absoluto ----
     O padding em rem encolhe junto com a tela. min-height fixo nao depende
     da largura. */
  .nv__logo { min-height: 44px; display: flex; align-items: center; }
  .amen__btn { padding-block: calc(16rem / var(--ratio)); }
  .nv__logo { padding-block: 6px; }

  /* ================= COMPOSICAO NO TELEFONE =================
     Um padrao so para as secoes: eyebrow no topo, todo o resto ancorado na
     base, sempre em UMA coluna. Grades pensadas para 1600px continuavam
     valendo aqui e espremiam blocos inteiros em 115px. */

  /* --- CTA: estava em duas colunas (titulo 133px / contato 115px) e o
     botao do WhatsApp saia 20px para fora da tela --- */
  /* Uma coluna, na ordem de leitura certa. Empilhando as duas colunas do
     desktop o rotulo caia DEPOIS do titulo, porque ele mora na coluna da
     direita. display:contents dissolve os dois involucros e deixa ordenar
     cada peca. */
  .cta { text-align: center; }
  .cta__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .cta__title, .cta__sub, .cta__meta { margin-inline: auto; }
  .cta__actions { width: 100%; }
  .cta__l, .cta__r { display: contents; }
  .cta__eyebrow  { order: 1; margin-bottom: calc(18rem / var(--ratio)); }
  /* h2 e nao h3: com a Ambroise o titulo cabia em 271px de 330 e ficava
     apagado para um fechamento de pagina. Em h2 ele ocupa duas linhas. */
  .cta__title    { order: 2; max-width: none; margin: 0; font-size: var(--fs-h2); }
  .cta__sub      { order: 3; max-width: none; margin-top: calc(22rem / var(--ratio)); }
  .cta__actions  { order: 4; display: block; margin-top: calc(30rem / var(--ratio)); }
  .cta__meta     { order: 5; margin-top: calc(26rem / var(--ratio)); }
  .cta__actions .btn { display: flex; width: 100%; justify-content: center; }

  /* --- Conceito: os tres simbolos em linha ocupavam 511px numa tela de 375
     e as legendas ficavam metade fora --- */
  .cpt__symbols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(14rem / var(--ratio));
    width: 100%;
  }
  .cpt__symbols figure { width: 100%; min-width: 0; }
  .cpt__symbols figcaption { font-size: 10px; }

  /* --- Interiores: as grades de 5 e 10 colunas viravam faixas de 22 a 58px.
     No telefone tudo ocupa a largura inteira --- */
  /* minmax(0,1fr) e nao 1fr: com 1fr a coluna adota o min-content do filho
     de 100vw e a grade inteira estoura 15px para a direita. */
  .int__grid5, .int__grid10 { grid-template-columns: minmax(0, 1fr); }
  .int__title-w,
  .int__l-desc, .int__r-desc, .int__r-lead, .int__r-btn { grid-column: 1 / -1; }

  /* --- Lazer: eyebrow e os 8 itens se amontoavam no topo e a legenda ficava
     sozinha na base. Agora o topo tem so o rotulo e o resto desce junto --- */
  /* A lista vertical de 8 itens ocupava 51% da tela sobre a foto. No telefone
     ela vira um trilho horizontal de uma linha, ancorado na base junto da
     legenda -- padrao nativo de celular e devolve a foto para a composicao. */
  .amen__nav {
    top: auto;
    bottom: calc(150rem / var(--ratio));
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    text-align: left;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .amen__nav::-webkit-scrollbar { display: none; }
  .amen__list {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 0;
    padding-inline: calc((100vw - var(--shell-wide)) / 2);
  }
  .amen__item { flex: 0 0 auto; scroll-snap-align: start; }
  .amen__btn {
    white-space: nowrap;
    padding: calc(18rem / var(--ratio)) calc(20rem / var(--ratio));
  }
  .amen__item.is-active .amen__btn { padding-left: calc(20rem / var(--ratio)); }
  .amen__caption { bottom: calc(56rem / var(--ratio)); width: min(92vw, 42ch); }
  /* o circulo de 5rem virava um selo desproporcional preso no topo direito:
     no telefone ele sai e o CTA vive no proprio texto da legenda */
  .amen__cta { display: none; }

  /* --- Arquitetura sem a coreografia no telefone ---
     A abertura da mascara custava uma tela inteira de rolagem para um efeito
     que so se le em monitor grande. Aqui a foto ja nasce sangrada e a secao
     vira uma tela so, com o texto por cima. */
  /* largura de tela inteira, sem depender de heranca: se algum ancestral
     ganhar recuo, a foto continua sangrando */
  /* Mesmo formato das fotos empilhadas: 4:3 de borda a borda, e nao uma tela
     inteira. Assim a Arquitetura entra no mesmo ritmo do resto da rolagem em
     vez de virar um bloco de 812px. */
  .arch { min-height: 0; }
  .arch__stage {
    position: relative;
    height: auto;
    aspect-ratio: 4 / 3;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .arch__photo, .arch__scene { width: 100%; left: 0; right: 0; }
  .arch__photo { clip-path: none !important; }
  .arch__spacer { display: none; }
  .arch__word { opacity: 1 !important; pointer-events: auto; }

  /* --- Plantas: ordem de leitura de celular ---
     display:contents promove os filhos da ficha a itens do corpo, e aí a
     metragem e o nome sobem para antes da planta. No desktop a ficha continua
     sendo uma coluna ao lado. */
  .plans__body { display: flex; flex-direction: column; gap: 0; }
  .plans__info { display: contents; }
  .plans__area  { order: 1; margin-top: calc(28rem / var(--ratio)); }
  .plans__name  { order: 2; }
  .plans__sub   { order: 3; }
  .plans__stage { order: 4; margin-top: calc(24rem / var(--ratio)); min-height: 42svh; }
  .plans__rooms { order: 5; }
  .plans__cta   { order: 6; }

  /* --- Trilho de tipologias como chips ---
     A celula de grade com numero em cima e nome em duas linhas e desenho de
     tabela: no telefone come 92px de altura e mostra 4 itens picotados.
     Em chip de uma linha cabem mais, nao quebra nome e fica claro que rola. */
  /* Grade em vez de barra rolavel: numa barra lateral so 3 das 8 tipologias
     apareciam, e as outras 5 dependiam de um gesto que ninguem adivinha.
     Em duas colunas as oito ficam visiveis de uma vez. */
  .plans__rail {
    border-top: 0;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .plans__rail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
    grid-auto-flow: row;
    gap: calc(10rem / var(--ratio));
    width: auto;
  }
  .plans__rail-item { flex: none; scroll-snap-align: none; }
  .plans__rail-item::after { display: none; }
  .plans__rail-btn {
    display: flex;
    align-items: baseline;
    gap: calc(9rem / var(--ratio));
    /* texto centrado no chip: encostado a esquerda ficava desalinhado do
       proprio botao, que ocupa a largura cheia da coluna */
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: calc(13rem / var(--ratio)) calc(14rem / var(--ratio));
    min-height: 46px;
    border: 1px solid var(--base-1k-10);
    border-radius: 999px;
    white-space: normal;
    opacity: 1;
    color: var(--base-1k-60);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
                background-color 0.3s var(--ease);
  }
  .plans__rail-item.is-active .plans__rail-btn {
    color: var(--base-0-100);
    background: var(--base-1k-100);
    border-color: var(--base-1k-100);
  }
  .plans__idx {
    margin: 0;
    /* 11px, nao 10: o piso de micro vale aqui tambem */
    font-size: 11px;
    color: inherit;
    opacity: 0.6;
  }
  .plans__rail-name {
    margin: 0;
    min-height: 0;
    /* piso: em 360 a escala pura dava 12,6px num rotulo de botao */
    /* Maison, como os demais numeros e rotulos do telefone */
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: max(12.5px, calc(14rem / var(--ratio)));
    line-height: 1.15;
    color: inherit;
    text-align: center;
  }

  /* Os titulos do Conceito ocupavam a largura exata da tela, encostando nas
     duas bordas -- lia como texto cortado. Com max-width quebram em duas
     linhas e ganham margem.
     Precisa estar NESTE bloco: a regra base de .cpt__title vem depois do
     primeiro @media de 767 no arquivo e, com a mesma especificidade, vencia. */
  .cpt__title {
    max-width: 74vw;
    margin-inline: auto;
    font-size: calc(38rem / var(--ratio));
    text-wrap: balance;
  }

  /* o selo circular dos Interiores ocupava metade da largura da tela */
  .btn-circle { width: calc(124rem / var(--ratio)); min-width: 104px; }

  /* --- Fotos empilhadas em largura cheia ---
     No telefone, carrossel e coluna desencontrada custam gesto e recorte para
     mostrar menos foto. Aqui cada imagem ocupa a tela de borda a borda, uma
     embaixo da outra: e o formato em que a foto trabalha melhor no celular. */
  /* margin-inline negativo em vez de transform: o transform criava contexto
     de empilhamento e brigava com a animacao de entrada das fotos. */
  .int__gal {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .int__gal-viewport { overflow: visible; }
  .int__gal-track {
    display: grid;
    grid-auto-flow: row;
    gap: calc(24rem / var(--ratio));
    transform: none !important;
  }
  .int__gal-slide { flex: none; width: 100%; aspect-ratio: 4 / 3; }
  /* a paginacao perde a funcao quando nao ha o que paginar */
  .int__gal + .pag,
  .int__gal .pag { display: none; }

  /* as duas fotos da coluna desencontrada tambem sangram */
  .int__l-img, .int__r-img {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .int__l-img .img-w, .int__r-img .img-w { border-radius: 0; }
  /* sem respiro entre as fotos: elas se encostam */
  .int__gal-track { gap: 0; }

  /* --- Lazer e Rooftop empilhados ---
     A secao deixa de ser uma tela com camadas absolutas e vira fluxo normal:
     titulo em cima, fotos de borda a borda uma embaixo da outra, legenda
     sobre cada uma. O seletor, as abas e as camadas do desktop saem de cena. */
  .amen.is-empilhado,
  .rf.is-empilhado {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
    padding-block: calc(var(--nav-h) + var(--u-48)) 0;
  }
  .amen.is-empilhado .amen__stage,
  .amen.is-empilhado .amen__nav,
  .amen.is-empilhado .amen__caption,
  .amen.is-empilhado .amen__cta,
  .amen.is-empilhado .ph-grad,
  .rf.is-empilhado .rf__media,
  .rf.is-empilhado .rf__foot,
  .rf.is-empilhado .ph-grad { display: none; }

  .amen.is-empilhado .amen__eyebrow,
  .rf.is-empilhado .rf__head {
    position: static;
    transform: none;
    width: var(--shell-wide);
    margin-inline: auto;
  }
  .rf.is-empilhado { padding-bottom: 0; }
  .rf-area:has(.rf.is-empilhado) { height: auto; }

  .amen__pilha, .rf__pilha {
    margin-top: calc(40rem / var(--ratio));
    display: grid;
    gap: 0;
  }
  .amen__pilha-item, .rf__pilha-item {
    position: relative;
    margin: 0;
    overflow: clip;
  }
  .amen__pilha-item img, .rf__pilha-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  /* legenda sobre a base da foto, dentro da faixa direcional do token */
  .amen__pilha-item figcaption, .rf__pilha-item figcaption {
    position: absolute;
    left: calc((100vw - var(--shell-wide)) / 2);
    right: calc((100vw - var(--shell-wide)) / 2);
    bottom: calc(28rem / var(--ratio));
    z-index: 2;
    color: var(--base-0-100);
  }
  .amen__pilha-item::after, .rf__pilha-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
      rgba(16, 18, 10, 0.66) 0%,
      rgba(16, 18, 10, 0.62) 26%,
      rgba(16, 18, 10, 0.30) 39%,
      rgba(16, 18, 10, 0) 48%);
  }
  .amen__pilha-rotulo, .rf__pilha-rotulo {
    display: block;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.048em;
    text-transform: uppercase;
  }
  /* --- Respiros das secoes ---
     84 a 105px de padding no topo de cada secao valem numa prancheta de
     1600, mas no telefone sao 12% da tela cada, so para separar blocos que
     ja se separam sozinhos pela troca de fundo. */
  :root { --sec: calc(64rem / var(--ratio)); }
  .plans, .loc { padding-block: calc(64rem / var(--ratio)) calc(28rem / var(--ratio)); }
  .cta { padding-block: calc(72rem / var(--ratio)) calc(44rem / var(--ratio)); }
  .amen.is-empilhado,
  .rf.is-empilhado { padding-block: calc(var(--nav-h) + var(--u-24)) 0; }

  .amen__pilha-texto, .rf__pilha-texto {
    margin-top: calc(8rem / var(--ratio));
    font-size: var(--fs-small);
    line-height: 1.38;
    letter-spacing: -0.024em;
    color: var(--base-0-80, var(--base-0-100));
    max-width: 34ch;
  }
}