/* ═══════════════════════════════════════════════════════════════════
   SITE INSTITUCIONAL CIDADE JARDIM (CDJ)
   Design system IDÊNTICO ao da apresentação AL'DORA VISTA (fonte de
   verdade: projetos/aldora-vista/src/styles/tokens.css) — mesma paleta
   cream/ink/teal/copper/gold, mesma hierarquia tipográfica, mesmo
   easing. Header/nav do site (chrome multi-página) ganham tokens
   próprios que o book de scroll único não precisa (--pad-x, --wrap etc).
   Tipografia: só Inter Variable (texto e display) — a apresentação não
   usa serif no corpo, "Fraunces" foi removido pra ficar 1:1. Adore só
   no wordmark (logo).
   ═══════════════════════════════════════════════════════════════════ */

/* Fonte única: Inter Variable (texto e display). JetBrains Mono e Adore foram removidos —
   estavam órfãos: --mono nunca é usado e o wordmark "CDJ" virou outline vetorial (SVG),
   não @font-face. Um só @font-face = menos peso e um DS honesto. */
@font-face {
  font-family: 'Inter Variable';
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2'),
       url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Adore — a fonte da MARCA AL'DORA (Didone). Usada quando "AL'DORA" aparece como TEXTO.
   No wordmark/logo continua o SVG/imagem oficial (nunca recriar o logo por fonte). */
@font-face {
  font-family: 'Adore';
  /* woff2 (48KB) na frente; OTF (158KB) só de fallback pra browser antigo */
  src: url('fonts/Adore.woff2') format('woff2'),
       url('fonts/Adore.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Adore SÓ nos NOMES DE PRODUTO nas heroes + na seção "origem do nome". Menu, texto corrido,
   legendas e demais menções ficam no Inter do design system (Didone ali fica ilegível). */
.etimologia--light .etimologia__syl,   /* origem do nome (ALL / DORA) — exceção 1 */
.pg-hero__title { font-family: 'Adore', var(--sans); }  /* hero da PÁGINA AL'DORA — exceção 2. Resto (heroes Vista, nomes de produto, menu, corpo) = Inter */

:root {
  /* Paleta AL'DORA — idêntica a tokens.css da apresentação */
  --paper:    #F4EFE4;                      /* era branco puro — agora cream */
  --cream:    #F4EFE4;
  --cream-hero: rgba(244, 239, 228, 0.95);  /* título-hero sobre foto — NUNCA 100% sólido */
  --ink:      #181818;                      /* era #000000 */
  --teal:     #245F73;                      /* era #4A9B9B (aqua claro) — teal oficial AL'DORA */
  --teal-rgb:    36, 95, 115;
  --teal-strong: color-mix(in srgb, var(--teal) 82%, black);
  --teal-deep:   color-mix(in srgb, var(--teal) 70%, black);   /* wordmark CDJ no header sólido */
  --teal-deep-rgb: 25, 66, 80;                                 /* == --teal-deep, p/ alpha no gradiente */
  --teal-soft:   color-mix(in srgb, var(--teal) 55%, white);
  --teal-tint:   color-mix(in srgb, var(--teal) 10%, var(--cream));
  --copper:   #A25015;
  --gold:     #B08D4F;                      /* era #C0892C */
  --gold-hot: #C9A86A;
  --dark:     #0D1117;
  /* MOGNO — a variação quente da página. Derivado do mesmo eixo do copper
     (#A25015) e do vinho da apresentação (#7A2626), puxado pro marrom-avermelhado
     de madeira nobre: aquece o cream sem competir com o teal, que é frio. */
  --mogno:      #6B392C;
  --mogno-deep: #4E2A20;
  --mogno-rgb:      107, 57, 44;
  --mogno-deep-rgb:  78, 42, 32;

  /* Paleta "Yacht Club" — manual da marca CDJ v2.0. São as 5 ÚNICAS cores permitidas
     na marca CDJ (logo/lockup), e não se misturam com a paleta AL'DORA acima, que rege
     o resto do site. Usar só aqui: qualquer cor fora destas 5 no lockup viola o manual. */
  --cdj-teal:   #245F73;   /* primária — lidera o lockup */
  --cdj-mogno:  #733E24;
  --cdj-mogno-rgb: 115, 62, 36;
  --cdj-silver: #BBBDBC;
  --cdj-cream:  #F2F0EF;
  --cdj-dark:   #1C1C1C;

  /* Gray ramp derivado de ink/cream via color-mix (a apresentação usa opacidade em 4
     níveis em vez de grays discretos — ver --text-* abaixo; estes ficam só de apoio
     pra componentes que já usam --gray-* pelo nome, sem reescrever 400+ linhas) */
  --gray-50:  color-mix(in srgb, var(--ink) 3%, var(--cream));
  --gray-100: color-mix(in srgb, var(--ink) 6%, var(--cream));
  --gray-200: color-mix(in srgb, var(--ink) 12%, var(--cream));
  --gray-400: color-mix(in srgb, var(--ink) 35%, var(--cream));
  --gray-600: color-mix(in srgb, var(--ink) 55%, var(--cream));
  --gray-800: color-mix(in srgb, var(--ink) 78%, var(--cream));

  /* Opacidade em 4 níveis (idêntico à apresentação — usar nestes em vez de alpha ad-hoc) */
  --text-primary-light:   rgba(24, 24, 24, 1.00);
  --text-secondary-light: rgba(24, 24, 24, 0.72);
  --text-muted-light:     rgba(24, 24, 24, 0.50);
  --text-faint-light:     rgba(24, 24, 24, 0.35);
  --text-primary-dark:    rgba(244, 239, 228, 1.00);
  --text-secondary-dark:  rgba(244, 239, 228, 0.72);
  --text-muted-dark:      rgba(244, 239, 228, 0.50);
  --text-faint-dark:      rgba(244, 239, 228, 0.35);

  /* Alias contextual (default = fundo claro) — sobrescrito em .bg-dark/.gate/.footer-opus/etc.
     Usar SEMPRE --text-primary/secondary/muted/faint em vez de rgba(...) ad-hoc ou --gray-*. */
  --text-primary:   var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-muted:     var(--text-muted-light);
  --text-faint:     var(--text-faint-light);

  /* Gradiente da marca (derivado da escala teal nova) */
  --grad: linear-gradient(120deg, var(--teal-soft) 0%, var(--teal) 52%, var(--teal-strong) 100%);
  --grad-hover: linear-gradient(120deg, color-mix(in srgb, var(--teal-soft) 90%, black) 0%, color-mix(in srgb, var(--teal) 90%, black) 52%, color-mix(in srgb, var(--teal-strong) 90%, black) 100%);

  --sans: 'Inter Variable', -apple-system, system-ui, sans-serif;
  /* Aliases mantidos só por segurança de quem referenciar; todos caem em Inter/sistema.
     O site usa uma fonte só (--sans). Não há serif no corpo, e o wordmark é vetor. */
  --serif: var(--sans);
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --wordmark: var(--sans);

  /* Easing — idêntico ao "ease-aldora" da apresentação (e ao token --cdj-site-motion-easing-signature
     já criado em design-system/tokens/motion.json — mesma curva, confirma que a pesquisa acertou) */
  --ease-aldora: cubic-bezier(0.2, 0, 0, 1);
  /* power3.out — a curva mais usada nos reveals do book (modules/*.js). Entra rápido e
     assenta suave; é o "toque de luxo" do movimento. Usada pelo kit js/effects.js. */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* ESCALA DE TRACKING — inversamente proporcional ao tamanho. É o princípio da tipografia
     de hospitalidade de luxo (ref. Aman): display grande fecha, micro-copy abre. Quanto
     menor o texto, mais ar entre as letras — é o que dá o ar caro. Usar SEMPRE estes
     tokens; letter-spacing avulso quebra a hierarquia.
     O nav era o buraco da escala: 12.5px com tracking 0, mesmo valor do corpo de texto. */
  --track-display: -0.02em;   /* h1 — o maior fecha mais */
  --track-h2:     -0.015em;
  --track-h3:     -0.005em;
  --track-body:    0;         /* corpo/lead — neutro */
  --track-ui:      0.04em;    /* listas/UI empilhado — dropdown, portais */
  --track-nav:     0.09em;    /* 12px sentence case — nav horizontal */
  --track-label:   0.1em;     /* 11px uppercase — eyebrow, botão */
  --track-wide:    0.18em;    /* micro-label, o mais arejado da escala */

  /* Chrome de header/nav — o book é scroll único, não tem essa camada; tokens próprios do site */
  --pad-x: clamp(20px, 5vw, 96px);
  --sec-y: clamp(84px, 12vw, 184px);
  --wrap: 1320px;
  /* ESCALA CANÔNICA DE BREAKPOINTS (referência, não var() — @media não lê custom
     property, e o site não tem build step/PostCSS pra resolver isso). Documentada
     aqui pra virar hábito, não decreto: as 87 media queries existentes ficam como
     estão (renumerar tudo pra "consistência" arriscaria quebra visual sem ganho
     real — cada valor já foi calibrado olhando o componente). Todo breakpoint
     NOVO usa um destes 6 degraus:
       480   → phone pequeno (o piso; abaixo disso é exceção, não regra)
       768   → tablet retrato / o corte mais comum do mercado
       1024  → tablet paisagem / notebook pequeno
       1280  → desktop padrão (perto do --wrap + folgas)
       1440  → notebook grande — início da faixa "tela grande" (ver F3, abaixo)
       1920  → desktop grande / TV — teto prático; acima disso o layout já não
               muda de comportamento, só ganha mais respiro nas laterais.

     TELAS GRANDES (1440-3840px, notebook grande → 4K/TV) — testado ao vivo em
     1920/2560/3840: o padrão já existente (fundo full-bleed + .wrap capado em
     1320px) já é o tratamento CORRETO, não "vazio sem intenção" — é a mesma
     estratégia de sites premium (Stripe, Apple): conteúdo numa largura de
     leitura confortável, mídia de fundo esticando full-bleed. Zero overflow
     horizontal nos 3 tamanhos testados. NÃO alterar --wrap por ganho estético
     marginal: é usado em dezenas de seletores — mexer arrisca desalinhar tudo
     de uma vez por um ganho invisível a olho nu.                              */
  /* FLUTUAÇÃO DAS BANDAS — só no eixo VERTICAL. A banda continua sangrando de
     borda a borda (largura cheia, sem recuo lateral: recuar encolhe a foto, que
     não é o que se quer). O que faz flutuar é o ar em cima e embaixo mais a
     sombra projetada nos dois sentidos. */
  /* Borda esquerda da banda editorial. É TOKEN porque quem se alinha a ela não é
     só o container: a citação da Zona Sul é absolute e precisa da mesma conta.
     Duas fórmulas parecidas divergiam em telas largas (65px de erro a 2000px). */
  --banda-x: max(var(--pad-x), calc((100vw - var(--wrap) - 130px) / 2));
  --banda-ar: clamp(26px, 3.4vw, 58px);
  /* sombra dupla (topo + base) das faixas — flutuação PRESENTE (ago/2026): a base
     ancora o levantamento, o topo acompanha mais suave. Vale p/ todas as faixas. */
  --banda-sombra: 0 -18px 42px -22px rgba(9, 12, 16, .32),
                  0  34px 66px -26px rgba(9, 12, 16, .46);
  --line: color-mix(in srgb, var(--ink) 12%, var(--cream));
  --header-h: 84px;
  --ctrl-h: 40px;   /* altura única de controle no header: busca e CTA batem exatamente */
  --btn-alpha: .94; /* opacidade única dos botões da marca — nunca 100% chapado; um valor só
                       pra todos compatibilizarem (btn--grad, hero__pill). Header CTA tem sua
                       própria hierarquia glass por ficar sobre foto. */

  /* Scrim do header — mesmas paradas do .pgal-cap da apresentação (cap-xi.css:638), que faz
     a imagem da galeria dissolver em cream. Lá é 0deg (de baixo pra cima); aqui é 180deg,
     invertido, pro header dissolver de cima pra baixo.
     A apresentação usa #F1E9D5, mais quente — sobre o fundo #F4EFE4 daqui isso apareceria
     como sujeira no topo da página, então mantive a GEOMETRIA verbatim e troquei só o cream
     pelo token do site. O tom vem de --scrim-tint, pra poder inverter em fundo escuro. */
  --cream-rgb: 244, 239, 228;
  --ink-rgb:   24, 24, 24;
  --dark-rgb:  13, 17, 23;
  /* Faixa cream do menu — QUASE SÓLIDA a 95%: uniforme nos primeiros ~62% da altura, depois
     dissolve suave na base (mantém o toque "chique" da dissolução, sem virar bloco chapado
     nem translúcido). 95% = quase opaco, mas ainda respira 5%. Sem blur. */
  --scrim-cream: linear-gradient(180deg,
    rgba(var(--cream-rgb), .95) 0%,
    rgba(var(--cream-rgb), .95) 62%,
    rgba(var(--cream-rgb), .55) 86%,
    rgba(var(--cream-rgb), 0)  100%);
  /* Véu do estado topo: escurece de leve o alto do hero pra assentar o texto/marca claros
     (a foto pode ter céu claro). Some ao rolar. */
  --veil-top: linear-gradient(180deg,
    rgba(var(--dark-rgb), .34) 0%, rgba(var(--dark-rgb), .08) 62%, transparent 100%);
}

/* Todo bloco de fundo escuro herda a escala de opacidade -dark automaticamente
   (mesmo mecanismo da apresentação: "todo cap com fundo dark recebe a paleta -dark") */
.gate, .footer-opus, .manifesto-brand, .etimologia, .bg-dark, .hero, .pg-hero {
  --text-primary:   var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-muted:     var(--text-muted-dark);
  --text-faint:     var(--text-faint-dark);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }

/* Lenis (scroll suave). Quando Lenis assume, o scroll-behavior nativo tem que ser auto
   pra não brigar com o lerp; on touch e reduced-motion o Lenis nem inicia (JS). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Swup — transição fade entre páginas MPA. Só o <main id="swup"> troca; header/footer ficam. */
.transition-main { transition: opacity .34s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
html.is-animating .transition-main { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .transition-main { transition: none; } }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--text-primary);
  font-weight: 400;
  line-height: 1.65;
  /* Rendering "Ferrari typography" da apresentação — outlines opticamente corretos por
     tamanho (opsz da Inter Variable), geometria exata (mais nítido que optimizeLegibility)
     e smoothing completo. Texto = vetor da fonte; isto refina o desenho do vetor. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern", "liga", "calt";
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }

/* ═══ BLINDAGEM DE TEXTO — nenhuma palavra estoura a coluna, em nenhuma largura ═══
   overflow-wrap é PROPRIEDADE HERDADA: um único ponto no body protege todo o site
   (nome composto, endereço, e-mail longo em coluna estreita) sem precisar repetir
   em cada seletor. word-break:normal reafirma que a quebra só acontece como ÚLTIMO
   recurso (overflow-wrap), nunca no meio de qualquer palavra que caiba. Zero efeito
   visual no caso comum — só entra em ação quando uma palavra de fato não cabe. */
body { overflow-wrap: break-word; word-break: normal; }
/* Hifenização automática NÃO entra por padrão: em marca editorial de luxo, hífen
   automático no meio de palavra lê como "typewriter", destoa do tom Aman/Rosewood
   (mesma razão por trás do banimento do travessão "—" em copy). overflow-wrap já
   resolve o transbordo; hyphens:auto fica documentado aqui como opção, não hábito. */
.aldora, .eyebrow, .brand, .nav a, .nav button, .btn { hyphens: none; }
/* text-wrap:pretty como PADRÃO em todo parágrafo (evita a "palavra órfã" sozinha na
   última linha). Seletores específicos que já pedem :balance ou :pretty continuam
   valendo (mais específico vence a cascata) — isto é só o piso pra quem não tinha. */
p { text-wrap: pretty; }

/* Tipografia — hierarquia IDÊNTICA à apresentação AL'DORA VISTA (tokens.css):
   display-mega/xl/lg/md = peso 500 (nunca 200/300), tracking negativo que aperta com o tamanho,
   eyebrow = tracking +0.1em (não 0.26em), opacidade em 4 níveis pra hierarquia de texto secundário. */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint); display: inline-block; }
/* text-wrap: balance — o navegador equilibra as linhas dos títulos (evita a última linha
   com 1 palavra órfã), sem <br> manual. É o que dá quebras "interessantes" e responsivas. */
h1, h2, h3 { font-weight: 500; font-family: var(--sans); text-wrap: balance; }
h1 { line-height: 1.1; letter-spacing: var(--track-display); }
/* Escala calibrada pra LEITURA DE PERTO (site 1:1 no desktop/celular), não pra TV/telão
   como a apresentação (mega 80px). Mesma HIERARQUIA (saltos ~1.35×) numa escala menor,
   contida — é o que dá o ar leve/minimalista/alto-padrão. Sweet spot: h2 ~40 · h3 ~21 ·
   lead ~18 · body 16, com salto claro entre cada nível. */
h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); line-height: 1.18; letter-spacing: var(--track-h2); }
h3 { font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.4; letter-spacing: var(--track-h3); }
.lead { font-size: clamp(1.08rem, 1.4vw, 1.25rem); font-weight: 400; line-height: 1.6; color: var(--text-secondary); }
.hair { height: 1px; background: var(--line); border: 0; }

/* ÊNFASE DE PALAVRA-CHAVE — padrão da apresentação (cap-xi.css: em→copper). Marca 1-2
   palavras-CHAVE por parágrafo com <em>: sem itálico, peso 500, a cor accent da peça.
   Sobre cream = copper (contrasta no claro); sobre foto/escuro = gold-hot (claro, destaca).
   Um accent só — NÃO é o "destaque gold-hot olha-esse-fato" que a regra editorial cortou;
   é ênfase editorial contida. strong = só peso, sem cor (pra não competir com o em). */
em { font-style: normal; font-weight: 500; color: var(--copper); }
.hero em, .pg-hero em, .gate em, .bg-dark em, .footer-opus em, .strip em, .etimologia em { color: var(--gold-hot); }
strong { font-weight: 600; }

/* ── Botões (gradiente da marca) ───────────────────────────────── */
/* Família de botões — refinada (quiet luxury): PILL coerente com o header CTA e os hero pills
   da home, caps arejadas, cantos macios, hover deliberado (curva ease-aldora). O CTA primário
   é teal-deep sólido a .94 com um brilho de topo sutil (edge light), não mais um bloco chapado. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 14px 30px; border: 0; cursor: pointer; background: transparent; color: inherit; line-height: 1;
  border-radius: 999px; white-space: nowrap;
  transition: background .35s var(--ease-aldora), color .3s var(--ease-aldora), border-color .3s var(--ease-aldora), box-shadow .4s var(--ease-aldora), transform .3s var(--ease-aldora);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
/* PADRÃO DE BOTÃO (auditado) — CTA primário = teal-deep (a mesma cor da marca no header),
   texto cream (não branco puro), opacidade .94 (nunca 100% chapado, coerente com a regra
   dos botões), sombra sutil na cor da marca. Substitui o gradiente chamativo + #fff +
   sombra em teal legado (#346D6D, fora da paleta) que existia aqui. O header tem seu
   próprio glass (contexto de foto); no corpo, sobre cream, o sólido a 94% é o certo. */
.btn--grad { background: rgba(var(--teal-deep-rgb), var(--btn-alpha)); color: var(--cream); box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .14); }
.btn--grad:hover { background: var(--teal-strong); box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .2), 0 12px 26px -12px rgba(var(--teal-rgb), .5); }
/* Ghost — hairline que ganha o teal com um leve tint no hover (não vira caixa cheia) */
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal-strong); background: var(--teal-tint); }
.btn--ghost-light { border: 1px solid rgba(var(--cream-rgb),.5); color: var(--cream); }
.btn--ghost-light:hover { border-color: var(--cream); background: rgba(var(--cream-rgb),.12); }

/* ── Header (fixo, sobrepõe o hero; solidifica ao rolar — padrão Parque Una) ───── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  height: var(--header-h); padding-inline: var(--pad-x);
  /* ESTADO TOPO (default): sobre o hero, texto claro. A cor-base é o cream, e os 4 NÍVEIS
     DE OPACIDADE do design system derivam dela — a hierarquia é preservada, só a âncora
     muda entre os dois estados. Um pouco mais opacos que o padrão porque é sobre foto. */
  --header-ink-rgb: var(--cream-rgb);
  --text-primary:   rgba(var(--header-ink-rgb), 1);
  --text-secondary: rgba(var(--header-ink-rgb), .85);
  --text-muted:     rgba(var(--header-ink-rgb), .62);
  --text-faint:     rgba(var(--header-ink-rgb), .48);
  color: rgba(var(--header-ink-rgb), 1);
  transition: color .4s var(--ease-aldora);
}
/* Dois fundos empilhados; a troca de estado só cruza-fade a opacidade (background de
   gradiente não transiciona, opacidade sim). z-index -1 fica atrás dos itens do header
   graças ao isolation:isolate acima. */
.site-header::before, .site-header::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transition: opacity .45s var(--ease-aldora);
}
.site-header::before { background: var(--veil-top);   opacity: 1; } /* topo */
.site-header::after  { background: var(--scrim-cream); opacity: 0; } /* faixa sólida */
.site-header.is-solid::before { opacity: 0; }
.site-header.is-solid::after  { opacity: 1; }
/* ESTADO SÓLIDO (rolado): faixa cream quase sólida (95%, ver --scrim-cream) + texto escuro. */
.site-header.is-solid {
  --header-ink-rgb: var(--ink-rgb);
  --text-secondary: rgba(var(--header-ink-rgb), .72);
  --text-muted:     rgba(var(--header-ink-rgb), .50);
  --text-faint:     rgba(var(--header-ink-rgb), .35);
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header::before, .site-header::after { transition: none; }
}
/* Estado inicial sem animação (evita flash claro→sólido no load) — ver header-theme.js */
.hdr-boot .site-header, .hdr-boot .site-header *,
.hdr-boot .site-header::before, .hdr-boot .site-header::after { transition: none !important; }
/* LOCKUP CDJ — módulo único: --cap (cap-height do wordmark).
   Toda medida deriva dele; pra redimensionar a marca mexa SÓ em --cap.
   Proporções calibradas pela referência Opus (+10%, conforme pedido):
     ícone = .50 × cap   — metade exata do cap-height: o passo acima de .36 que tem regra
                          própria, e a área mínima pra 4 cores com gradiente lerem a 27px
     gap   = .18 × cap   — fechado, porque o "C" redondo já adiciona folga óptica
     clear space = 1 × cap em todas as direções (manual CDJ v2: altura da letra "C")
       → cap 27px ⇒ lockup 27.7px de altura e 28px de respiro por lado no header de 84px
   1.0273 = caixa ÷ cap-height nos outlines reais (67.2443/65.4545): a caixa passa
   do cap por causa do overshoot do C e do J, que são redondos.
   Alinhamento pela LINHA DE BASE (flex-end + .0137×cap de compensação do overshoot),
   não pelo centro — é assim que a marca "senta na linha" junto com as letras. */
/* opacity .8: a logo nunca aparece 100% sólida — no máximo 80% (regra pedida). Dá um
   assentamento sutil, tanto sobre foto (topo) quanto sobre cream (sólido). */
.brand { --cap: 27px; display: flex; align-items: flex-end; gap: calc(var(--cap) * .18); color: var(--ink); opacity: .8; flex-shrink: 0; }
.brand__spark { width: calc(var(--cap) * .50); height: calc(var(--cap) * .50); margin-bottom: calc(var(--cap) * .0137); flex: none; display: block; }
/* Wordmark = outline vetorial real do glifo, inline (não fonte, não imagem):
   imune a fallback de fonte e a FOUT, renderiza vetorial em qualquer DPI/zoom,
   e herda a cor por currentColor. Master + rasters 8K em src/brand/. */
.brand__mark { height: calc(var(--cap) * 1.0273); width: auto; flex: none; display: block; }
/* O site tem dois footers: .footer-opus (#161616, escuro) e .site-footer (--gray-50,
   claro). No claro vale a versão colorida do markup; o escuro usa a VERSÃO NEGATIVA
   monocromática em cream — que é o que o manual v2.0 prevê pra fundo escuro, e a única
   saída correta: teal (#245F73) e mogno (#733E24) têm contraste ~2.5:1 e ~2.1:1 sobre
   #161616, ou seja somem. Cream dá 16:1. Resolvido aqui, não em style inline, senão
   cada página pode divergir. */
.footer-opus .brand { color: var(--cdj-cream); }
.footer-opus .brand__spark rect { fill: var(--cdj-cream); }
/* Gap cresce junto com o tracking: letra arejada precisa de mais separação entre itens,
   senão as palavras se fundem. Fluido pra não estourar o header a 1280px. */
/* align-self/align-items stretch: cada .nav__item ocupa a altura do header. Sem isso os
   <a> ficam inline dentro de um .nav__item que herda line-height 1.65 de 16px — o strut
   dessa linha manda no alinhamento vertical e a linha de base do nav caía 1.3px abaixo da
   busca e do CTA. Com os itens esticados, o align-items:center de cada um centra o link
   deterministicamente. Bônus: o `top: 100%` do dropdown passa a medir da base do header. */
/* Marca segue o estado: no TOPO (sobre hero) vira negativa cream — os 4 pilares dão
   ~2.1–2.5:1 sobre foto escura (somem); cream é a versão negativa do footer escuro.
   Ao rolar (.is-solid) volta a colorida. fill do CSS vence o atributo inline do SVG
   (presentation attribute tem especificidade zero), então basta não sobrescrever no sólido. */
.site-header:not(.is-solid) .brand { color: var(--cdj-cream); }
.site-header:not(.is-solid) .brand__spark rect { fill: var(--cdj-cream); }
.site-header:not(.is-solid) .header-search { border-color: rgba(var(--cream-rgb), .3); }
.site-header .brand__spark rect { transition: fill .4s var(--ease-aldora); }
/* Wordmark "CDJ" no estado sólido = teal escuro (teste pedido): a marca ganha a cor
   primária em vez do preto neutro. O ícone segue colorido (4 pilares). No topo o wordmark
   fica cream (herda do .brand), só no sólido vira teal. */
.site-header.is-solid .brand__mark { color: var(--teal-deep); }

.nav { display: flex; align-self: stretch; align-items: stretch; gap: clamp(12px, 1.12vw, 22px); flex: 1; min-width: 0; }
/* line-height 1 + padding 0: com line-height herdado (1.65) a caixa fica assimétrica e a
   linha de base do nav caía 1.2px abaixo da busca e do CTA. Assim os três compartilham
   a mesma linha de base, e o align-items:center do header basta. */
.nav a, .nav button { display: inline-flex; align-items: center; font-size: 12px; font-weight: 400; letter-spacing: var(--track-nav); text-transform: none; color: var(--text-secondary); line-height: 1; padding: 0; position: relative; transition: color .25s; white-space: nowrap; }
.nav a:hover, .nav button:hover { color: var(--text-primary); }
/* underline via transform (composita na GPU) — animar width dispara layout a cada
   frame do hover; scaleX dá o MESMO visual sem tocar o layout. transform-origin
   left = cresce da esquerda, idêntico ao width. */
.nav a::after { content:''; position:absolute; left:0; bottom:-7px; width:100%; height:1px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav a:hover::after { transform: scaleX(1); }
/* Página atual (aria-current): NÃO fixa cor (senão briga com o tema claro↔cream do header e
   fica teal de baixo contraste sobre o hero). Marca com texto em destaque (full opacity) +
   underline teal permanente — legível e estável nos dois estados do header. */
.nav a[aria-current="page"] { color: var(--text-primary); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
/* CTA do header — repensado (UX): o gradiente + sombra "de dashboard" destoava do header
   editorial, e a forma reta brigava com o search em pill ao lado. Agora: teal chapado
   (uma cor da marca, sem gradiente), MESMA pill do search (coerência de forma), sombra
   quase nula, tipografia do sistema. Destaca por cor sólida, não por peso — que é como
   marca de luxo sinaliza o CTA. Funciona sobre foto (topo) e sobre cream (sólido). */
/* CTA glass — segue a regra do menu: claro no topo (sobre hero), teal ao rolar.
   Forma pill (coerência com o search), texto cream, blur pra assentar sobre foto. */
.header-cta.btn--grad {
  height: var(--ctrl-h); padding-inline: 22px; border-radius: 999px; white-space: nowrap;
  color: var(--cream);
  -webkit-backdrop-filter: blur(7px) saturate(1.06);
          backdrop-filter: blur(7px) saturate(1.06);
}
/* ESTADO TOPO (sobre hero): igual ao resto do menu — translúcido claro. Teal-deep a 40% +
   filete cream: o botão "some" no hero como os itens do menu, mas continua clicável e com
   forma. O texto cream segue a mesma regra dos links (claro sobre a foto). */
.site-header:not(.is-solid) .header-cta.btn--grad {
  background: rgba(var(--teal-deep-rgb), .40);
  box-shadow: inset 0 0 0 1px rgba(var(--cream-rgb), .55), 0 2px 14px -6px rgba(9, 12, 16, .5);
}
/* ESTADO SÓLIDO (rolado): a cor que definimos (teal-deep, a do wordmark), com HIERARQUIA
   DE OPACIDADE a partir de ~66% — a base dissolve pra 66% (translúcido, glass) e a zona do
   texto fica ≥84%, o que mantém o cream em ≥5:1. 60% uniforme daria 3.3:1 (ilegível); a
   hierarquia é justamente o que permite chegar perto de 60% sem perder o texto. */
.site-header.is-solid .header-cta.btn--grad {
  background: linear-gradient(180deg,
    rgba(var(--teal-deep-rgb), .86)  0%,
    rgba(var(--teal-deep-rgb), .84) 58%,
    rgba(var(--teal-deep-rgb), .66) 100%);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .12), 0 1px 3px rgba(20, 40, 48, .14);
}
.header-cta.btn--grad:hover {
  background: rgba(var(--teal-deep-rgb), .95);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .18), 0 3px 12px -3px rgba(20, 40, 48, .4);
}
.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Com o tracking do nav aberto (--track-nav) + 2 portais + CTA, o header precisa de
   ~1420px pra caber tudo. A busca é o item de menor peso (decorativa — não há página de
   busca) e custa ~115px com o gap: some abaixo de 1440px, que é onde o nav começaria a
   ser comprimido. Ordem de sacrifício: busca → portais (560px) → nav vira menu (768px). */
/* Altura = --ctrl-h, igual ao CTA (antes: 35.8px vs 39.8px — dois controles lado a lado
   com alturas diferentes leem como desalinhamento). justify-content:center centra o
   conteúdo em vez de encostar à esquerda quando o min-width sobra. */
.header-search { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--ctrl-h); box-sizing: border-box; border: 1px solid var(--line); border-radius: 999px;
  padding-inline: 15px; font-size: 12px; line-height: 1; letter-spacing: var(--track-ui);
  color: var(--text-muted); white-space: nowrap; }
.header-search svg { flex-shrink: 0; opacity: .55; }
.header-portals { display: flex; align-items: center; gap: clamp(14px, 1.2vw, 20px); }
/* Com 8 itens de nav + 2 dropdowns (Empreendimentos + AL'DORA Vista) + CTA, o header ficou
   cheio: busca E portais saem juntos a partir de 1440 pra o nav respirar. Abaixo de 1200 o
   tracking do nav recua (regra abaixo). */
@media (max-width: 1439px) { .header-search, .header-portals { display: none; } }
/* A 1024px o nav (7 itens com tracking aberto) + portais + CTA precisam de ~1195px e
   invadiam o bloco da direita. Ordem de degradação: portais saem, e o tracking do nav
   recua de .09em pra .05em — a folga de luxo é afordância de tela grande, não dogma;
   apertar o tracking preserva os 7 itens legíveis em vez de cortar item do menu. */
@media (max-width: 1199px) {
  .header-portals { display: none; }
  .nav { --track-nav: 0.05em; }
  .header-cta { padding-inline: 16px; }
  .site-header { gap: 14px; }
}
.header-portal { display: flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.3;
  letter-spacing: var(--track-ui); color: var(--text-secondary); white-space: nowrap; transition: color .25s; }
.header-portal:hover { color: var(--text-primary); }
.header-portal svg { flex-shrink: 0; opacity: .7; }

/* ── Hero carousel (fiel ao padrão Opus: banner wide, texto centralizado, arrows+dots) */
/* Texto sempre à ESQUERDA (convenção real da apresentação — "migrar center→left, luxo
   arquitetural"): o texto nunca disputa espaço com o centro da foto, e o scrim concentra
   escurecimento na coluna onde ele fica. */
/* Banner cheio, imersivo — proporção mais próxima de full-viewport (referência Opus).
   Páginas internas continuam menores via inline style (elas já sobrescrevem height). */
/* Hero full-bleed com PEEK: ~90% da viewport, deixando ~10% da próxima seção espiar no
   rodapé — o sinal de scroll mais elegante (evita o "falso fundo" do 100vh). svh pra o
   peek ser confiável no mobile (barras dinâmicas); vh de fallback. */
.hero { position: relative; width: 100%; height: clamp(600px, 90vh, 980px); height: clamp(600px, 90svh, 980px); overflow: hidden; text-align: left; color: var(--text-primary); }
/* Scroll cue — discreto, alinhado à esquerda (o centro é dos dots), pulsa suave, some com reduced-motion */
.hero__scroll { position: absolute; bottom: 20px; left: calc(var(--pad-x) + 8px); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; color: var(--cream); opacity: .72;
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.5); transition: opacity .25s; }
.hero__scroll:hover { opacity: 1; }
.hero__scroll svg { animation: heroScrollCue 1.9s var(--ease-aldora) infinite; }
@keyframes heroScrollCue { 0%,100% { transform: translateY(0); opacity: .7 } 50% { transform: translateY(5px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none } }
/* Slides — crossfade, só um .active visível por vez (usado quando o hero tem mais de 1 slide) */
.hero__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease-aldora); z-index: 0; }
.hero__slide.active { opacity: 1; visibility: visible; z-index: 1; }
/* Hero sem slides (só 1 imagem direta) continua funcionando: .hero__bg como filho direto do .hero */
.hero > .hero__bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img, .hero__bg video { width: 100%; height: 100%; object-fit: cover; }
/* Parallax (opt-in via [data-parallax]) — mídia a 112% de altura pra a translação não
   revelar fundo; deslocamento --parallax-y vem do js/hero-parallax.js. Técnica idêntica à
   apresentação (cap-v-extras.css:1650). */
.hero[data-parallax] .hero__bg img,   .hero[data-parallax] .hero__bg video,
.pg-hero[data-parallax] .pg-hero__bg img, .pg-hero[data-parallax] .pg-hero__bg video {
  height: 112%; object-position: center 35%;
  /* offset base -6% centraliza a sobra vertical (metade dos 12% extras) — SEM ele
     o parallax deixa gap preto no topo do hero quando move a imagem pra baixo.
     Regra da casa: SEMPRE combinar height:112% + translate -6% em heros com parallax
     pra ter sobra simétrica em cima e embaixo. */
  transform: translate3d(0, calc(var(--parallax-y, 0px) - 6%), 0);
}
/* Escurecimento direcional (receita real da apresentação AL'DORA VISTA — esquerda escura,
   direita respira — não caixa/scrim central) + reforço vertical pra legibilidade do topo/rodapé */
/* Overlay em CAMADAS (receita da apresentação, cap-v-extras.css ::before/::after):
   1) vinheta radial editorial escurecendo as bordas · 2) gradiente vertical (legibilidade
   topo/rodapé) · 3) spotlight direcional à esquerda, onde o texto senta. */
.hero__bg::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 35% 45%, transparent 0%, rgba(9,12,16,0.42) 96%),
    linear-gradient(180deg, rgba(9,12,16,0.28) 0%, rgba(9,12,16,0.05) 30%, rgba(9,12,16,0.05) 60%, rgba(9,12,16,0.42) 100%),
    linear-gradient(100deg,
      rgba(9,12,16,0.80) 0%,
      rgba(9,12,16,0.62) 22%,
      rgba(9,12,16,0.38) 40%,
      rgba(9,12,16,0.16) 56%,
      transparent 72%);
}
.hero__inner { position: relative; z-index: 2; max-width: 640px; padding-left: calc(var(--pad-x) + 8px); padding-right: var(--pad-x); }
/* Hero SIMPLES (sem .hero__slide flex wrapper) — centraliza vertical e respira do header fixo */
.hero:not(:has(.hero__slide)) { display: flex; align-items: center; padding-block: clamp(100px, 14vh, 140px) clamp(40px, 6vh, 72px); }
/* Título-hero: NUNCA cream 100% sólido (regra travada) — cream-hero 95% "respira" + sombra
   suave (gradiente sutil de profundidade atrás da letra, técnica real da apresentação:
   cap-xi-obra--overlay). Gap eyebrow→título apertado (12px, --gap-eyebrow-headline real). */
/* Hierarquia do hero — receita da apresentação (cap-v3-hero): eyebrow com respiro
   generoso pro título, título grande/apertado (line-height ~0.98, tracking negativo,
   sombra mais presente), lead com a barra dourada à esquerda (assinatura do hero AL'DORA).
   Mantém Inter (o site não usa serif) e a regra cream-hero 95% (nunca 100% sólido). */
.hero .eyebrow { color: var(--gold-hot); letter-spacing: .18em; margin-bottom: clamp(20px, 3.5vh, 40px); text-shadow: 0 1px 20px rgba(0,0,0,.5); }
/* Hero h1 — SWEET SPOT pra tela de perto: ~48-52px no desktop, ~31px no mobile. Menor que
   a apresentação (80px, feita pra telão de sala), porque aqui é 1:1: título contido lê como
   luxo/minimalismo, título gigante lê como pesado. A hierarquia vem do salto eyebrow(11)→
   título(~50), não do tamanho bruto. */
.hero h1, .hero h2 {
  font-size: clamp(1.95rem, 3.6vw, 3.25rem); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 clamp(22px, 3.5vh, 34px); max-width: 16ch; text-wrap: balance;
  color: var(--cream-hero); text-shadow: 0 4px 30px rgba(9,12,16,.5), 0 1px 3px rgba(9,12,16,.35);
}
.hero .lead {
  color: var(--text-secondary); max-width: 48ch; font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  padding-left: clamp(16px, 1.6vw, 24px); border-left: 3px solid var(--gold-hot);
  text-shadow: 0 1px 24px rgba(0,0,0,.4);
}
.hero__cta { display: inline-flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; margin-top: 34px; }
/* hero__pill (CTA claro sobre foto) — cream a --btn-alpha, mesmo GLASS dos CTAs do header
   (blur), pra compatibilizar todos os botões numa linguagem só. Nunca 100% chapado. */
/* CTA claro sobre foto — GLASS translúcido no modelo de opacidade do header (não mais cream
   chapado): cream ~16% + filete cream + blur, texto cream. "Some" na foto como o menu, mas
   continua clicável e com forma. Mesma linguagem do header-cta no estado topo. */
.hero__pill { display: inline-flex; align-items: center; gap: .34em; background: rgba(var(--cream-rgb), .16); color: var(--cream); font-size: 14px; font-weight: 500; padding: 12px 28px; border-radius: 999px; margin-top: 22px; border: 1px solid rgba(var(--cream-rgb), .5); -webkit-backdrop-filter: blur(7px) saturate(1.05); backdrop-filter: blur(7px) saturate(1.05); box-shadow: 0 2px 14px -6px rgba(9,12,16,.5); text-shadow: 0 1px 10px rgba(9,12,16,.4); transition: background .2s, border-color .2s; }
.hero__pill:hover { background: rgba(var(--cream-rgb), .26); border-color: rgba(var(--cream-rgb), .72); }
.hero__arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--cream); opacity: .85; cursor: pointer; background: none; border: 0; transition: opacity .2s; }
.hero__arrow:hover { opacity: 1; }
.hero__arrow--prev { left: 18px; }
.hero__arrow--next { right: 18px; }
.hero__dots { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; z-index: 3; display: flex; gap: 8px; }
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); border: 0; cursor: pointer; transition: background .2s, transform .2s; padding: 0; }
.hero__dot.active { background: var(--teal-soft); transform: scale(1.2); }

/* ── Grid de 3 cards PLAIN (sem overlay/texto — logo abaixo do hero) */
.plain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.plain-grid img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
@media (max-width: 768px) { .plain-grid { grid-template-columns: 1fr; } }

/* ── Split assimétrico (manifesto "Original é Opus") ───────────── */
.split { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(40px,6vw,80px); align-items: center; }
.split__icon { width: 16px; height: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 22px; }
.split__icon span { width: 6px; height: 6px; background: var(--teal); border-radius: 1px; }
.split__body h2 { font-size: clamp(1.5rem,2.4vw,2rem); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.split__body p { margin-top: 18px; color: var(--text-secondary); font-weight: 300; max-width: 42ch; }
.split__body .btn { margin-top: 28px; }
.split__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ── Seções (branco, muito respiro) ────────────────────────────── */
section { padding-block: var(--sec-y); }
/* Heros são full-bleed — não herdam o padding-block de <section> (era a "faixa cinza"
   no topo: o padding empurrava e revelava o fundo acima da foto). */
.hero, .pg-hero { padding-block: 0; }
.sunken { background: var(--gray-50); }
.sec-head { max-width: 800px; }
.sec-head h2 { margin-top: 18px; }
.sec-head h1 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); line-height: 1.18; letter-spacing: var(--track-h2); margin-top: 18px; }
.sec-head .lead { margin-top: 20px; }

/* O Grupo */
.manifesto { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px, 7vw, 128px); align-items: center; }
.manifesto__text p { color: var(--text-secondary); margin-top: 22px; max-width: 46ch; font-weight: 300; }
.manifesto__text .hair { margin: 30px 0; width: 56px; height: 2px; background: var(--grad); }
.manifesto__figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1) contrast(1.02); }
.manifesto__figure figcaption { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-top: 14px; }

/* Empreendimentos — minimal */
.emp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 52px); margin-top: clamp(48px, 5vw, 76px); }
.emp { display: block; }
.emp__img { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--gray-100); }
.emp__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.emp:hover .emp__img img { transform: scale(1.04); }
.emp__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.emp__meta h3 { font-weight: 400; }
.emp__q { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.emp__sub { font-size: 13px; color: var(--text-muted); margin-top: 11px; }
.emp__status { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }

/* ── AL'DORA · gate (único bloco escuro) ───────────────────────── */
/* Gate — fundo verde-petróleo profundo (não ink puro) pra CONTRASTAR com o footer preto
   e reforçar a identidade da marca. Glow radial superior dá profundidade e reduz o "vazio". */
.gate { position: relative; background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--teal) 30%, var(--ink)) 0%, var(--ink) 60%),
    var(--ink);
  color: #fff; text-align: center; overflow: hidden; }
.gate::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold-hot) 50%, transparent 100%); opacity: .5; }
/* linha divisória dourada entre o gate e o footer (evita a fusão dark→dark) */
.gate::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--teal-rgb),.6) 50%, transparent 100%); }
.gate__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }
.gate .spark { width: 26px; height: 26px; margin-inline: auto; }
.gate .eyebrow { color: var(--gold-hot); margin-top: 22px; }
.gate h2 { margin: 20px 0; color: #fff; }
.gate .lead { color: var(--text-secondary); margin-inline: auto; }
.gate__hint { display: block; margin-top: clamp(24px, 3vw, 32px); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.gate__cta { margin-top: 12px; }
.gate .lead em { font-style: normal; font-weight: 500; color: var(--gold-hot); }

/* ═══ Página Região dos Jardins — Zona Sul (banner parallax + copy Aman, hierarquia editorial) ═══ */
/* Faixa gradiente teal → transparent como separador editorial antes da seção */
.zonasul { background: var(--cream); position: relative; }
.zonasul::before { content: ""; display: block; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(var(--teal-rgb),.35) 50%, transparent 100%); }
/* Banner INTEIRO (aspect-ratio nativo da foto 2400×1371 = 1.75) — mostra amplitude total sem crop */
/* Banner editorial: respiro lateral + cantos quase retos + sombra discreta.
   Harmoniza com o padrão fino do site (heros são full-bleed, sem radius). */
.zonasul__banner { position: relative; margin: clamp(24px, 3vw, 48px) auto; overflow: hidden;
  aspect-ratio: 2800 / 1562; width: min(94vw, 1440px); max-height: 88vh;
  border-radius: clamp(2px, .3vw, 6px); background: var(--gray-100);
  box-shadow: 0 24px 52px -28px rgba(9,12,16,.18); }
/* Banner Zona Sul — SEM reveal por clip-path (evitando bug recorrente de "banner branco"
   quando o IntersectionObserver não dispara em edge cases do Swup / re-inject / quirk).
   Foto SEMPRE visível. Motion: só parallax de scroll + scale 1.1 estático (folga p/ parallax
   não revelar borda). Propriedades individuais scale/translate compõem sem brigar. */
.zonasul .zonasul__banner img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; scale: 1.1; translate: 0 var(--parallax-y, 0px); will-change: translate; }

/* Word-by-word reveal nos títulos H2 grandes (Apple product-page style).
   SÓ esconde sob .fx-ready (JS ativo) — regra da casa: sem JS nada some. */
@media (prefers-reduced-motion: no-preference) {
  .fx-ready .word-reveal .w { display: inline-block; opacity: 0; transform: translateY(100%); transition: opacity .9s var(--ease-aldora), transform .9s var(--ease-aldora); }
  .fx-ready .word-reveal.is-in .w { opacity: 1; transform: translateY(0); }
  .word-reveal.is-in .w:nth-child(1) { transition-delay: 40ms; }
  .word-reveal.is-in .w:nth-child(2) { transition-delay: 100ms; }
  .word-reveal.is-in .w:nth-child(3) { transition-delay: 160ms; }
  .word-reveal.is-in .w:nth-child(4) { transition-delay: 220ms; }
  .word-reveal.is-in .w:nth-child(5) { transition-delay: 280ms; }
  .word-reveal.is-in .w:nth-child(6) { transition-delay: 340ms; }
  .word-reveal.is-in .w:nth-child(7) { transition-delay: 400ms; }
  .word-reveal.is-in .w:nth-child(8) { transition-delay: 460ms; }
  .word-reveal.is-in .w:nth-child(9) { transition-delay: 520ms; }
  .word-reveal.is-in .w:nth-child(10) { transition-delay: 580ms; }
}
/* gradiente cream sutil na borda inferior (padrão do site) */
.zonasul__banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(100px, 14vh, 180px); background: linear-gradient(to top, var(--cream) 0%, rgba(244,239,228,0) 100%); pointer-events: none; }
/* Legenda banner Zona Sul: mesmo padrão delicado da .oasis-video__cap */
.zonasul__banner-cap { position: absolute; right: clamp(20px, 2.6vw, 32px); bottom: clamp(28px, 3.4vw, 46px); z-index: 2; padding: 6px 12px; border-radius: 999px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400;
  color: rgba(var(--cream-rgb), .82); background: rgba(9,12,16,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none; }
/* Bloco de texto embaixo, hierarquia editorial em 3 níveis */
.zonasul__inner { max-width: 960px; padding-block: clamp(46px, 5.2vw, 82px); text-align: center; margin-inline: auto; }
.zonasul__title { margin-top: 14px; font-weight: 400; letter-spacing: -.02em; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; color: var(--ink); text-wrap: balance; }
.zonasul__lead { margin: 0 auto; font-family: var(--sans); font-weight: 300; line-height: 1.55; letter-spacing: -.005em; color: rgba(24,24,24,.72); max-width: 60ch; text-wrap: pretty; }
.zonasul__lead em { font-style: normal; font-weight: 500; color: var(--teal-strong); }
/* espaço vertical rítmico entre parágrafos (Bringhurst: respiração crescente) */
.zonasul__lead--1 { margin-top: clamp(30px, 3.4vw, 44px); font-size: clamp(19px, 1.8vw, 23px); }
.zonasul__lead--2 { margin-top: clamp(22px, 2.4vw, 32px); font-size: clamp(17px, 1.6vw, 20px); }
.zonasul__lead--coda { margin-top: clamp(30px, 3.2vw, 42px); font-size: clamp(19px, 1.75vw, 22px); color: rgba(24,24,24,.82); max-width: 46ch; font-weight: 400; }
.zonasul__lead--coda em { color: var(--copper); }
/* Faixa gradiente ao fim da seção (transição pra próxima) */
.zonasul::after { content: ""; display: block; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--teal-rgb),.2) 50%, transparent 100%); }

/* ═══ Página Região dos Jardins — Oásis (texto de apoio ao vídeo do hero, hierarquia editorial 3 níveis) ═══ */
/* fundo com glow radial teal sutil — dá presença ao espaço horizontal, reduz o "vazio" */
.regiao-oasis { background:
    radial-gradient(90% 70% at 50% 40%, color-mix(in srgb, var(--teal) 5%, var(--cream)) 0%, var(--cream) 70%); }
.regiao-oasis__inner { max-width: 960px; padding-block: clamp(46px, 5.2vw, 82px); text-align: center; margin-inline: auto; }
.regiao-oasis__title { margin-top: 14px; font-weight: 400; letter-spacing: -.02em; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; color: var(--ink); text-wrap: balance; }
.regiao-oasis__lead { margin: 0 auto; font-family: var(--sans); font-weight: 300; line-height: 1.55; letter-spacing: -.005em; color: rgba(24,24,24,.72); text-wrap: pretty; }
.regiao-oasis__lead em { font-style: normal; font-weight: 500; color: var(--teal-strong); }
/* 3 níveis rítmicos (Bringhurst — respiração crescente) */
.regiao-oasis__lead--1 { margin-top: clamp(30px, 3.4vw, 44px); font-size: clamp(19px, 1.8vw, 23px); max-width: 56ch; }
.regiao-oasis__lead--2 { margin-top: clamp(22px, 2.4vw, 32px); font-size: clamp(17px, 1.6vw, 20px); max-width: 62ch; }
.regiao-oasis__lead--3 { margin-top: clamp(20px, 2.2vw, 30px); font-size: clamp(17px, 1.6vw, 20px); max-width: 60ch; }
.regiao-oasis__lead--coda { margin-top: clamp(30px, 3.2vw, 42px); font-size: clamp(19px, 1.75vw, 22px); max-width: 44ch; color: rgba(24,24,24,.82); font-weight: 400; }
.regiao-oasis__lead--coda em { color: var(--copper); }

/* ═══ Layout editorial assimétrico (desktop ≥1080px) — título-âncora à esquerda + prosa à direita.
   Wrappers .ed-rail (eyebrow+título) / .ed-prose (leads): cada coluna é UM item de grid, então
   não há colisão de linhas entre título alto e eyebrow (bug anterior). Rail centrado vs. prosa. ═══ */
@media (min-width: 1080px) {
  /* override do max-width 960 + text-align center dos __inner específicos.
     Garante grid full 1320 igual à logística + alinhamento left editorial. */
  .regiao-oasis__inner.ed-grid,
  .regiao-cidade__inner.ed-grid,
  .zonasul__inner.ed-grid { max-width: 1320px; text-align: left; }
  .ed-grid {
    max-width: 1320px; margin-inline: auto; text-align: left;   /* bate com .logi-grid pra alinhar bordas */
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);   /* mesma proporção da logística */
    column-gap: clamp(48px, 5vw, 96px);
    align-items: start;                                          /* rail e prosa começam NO TOPO */
  }
  .ed-grid .ed-rail { grid-column: 1; }
  .ed-grid .ed-prose { grid-column: 2; }
  /* coda solta (filho direto do grid, ex. seção A Cidade) ocupa a largura toda, centralizada */
  .ed-grid > .regiao-cidade__lead--coda {
    grid-column: 1 / -1; text-align: center; max-width: 60ch; margin-inline: auto;
    margin-top: clamp(32px, 3.4vw, 48px);
  }
  .ed-rail .eyebrow { display: block; margin: 0 0 18px; }
  .ed-rail .word-reveal { margin-top: 0; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; }
  .ed-prose > * { margin-inline: 0; max-width: 56ch; }
  .ed-prose > *:first-child { margin-top: 0; }
}

/* ═══ Movimento Uberlândia — a cidade que sustenta a Região (entre oásis e Zona Sul) ═══ */
.regiao-cidade { position: relative; background:
    radial-gradient(88% 68% at 50% 42%, color-mix(in srgb, var(--teal) 6%, var(--cream)) 0%, var(--cream) 72%); }
.regiao-cidade::before { content: ""; display: block; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--teal-rgb),.22) 50%, transparent 100%); }
.regiao-cidade__inner { max-width: 960px; padding-block: clamp(46px, 5.2vw, 82px); text-align: center; margin-inline: auto; }
.regiao-cidade__title { margin-top: 14px; font-weight: 400; letter-spacing: -.02em; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; color: var(--ink); text-wrap: balance; }
.regiao-cidade__lead { margin: 0 auto; font-family: var(--sans); font-weight: 300; line-height: 1.55; letter-spacing: -.005em; color: rgba(24,24,24,.72); text-wrap: pretty; }
.regiao-cidade__lead em { font-style: normal; font-weight: 500; color: var(--teal-strong); }
/* Hierarquia alinhada com .regiao-oasis / .zonasul (mesma escala e ritmo) */
.regiao-cidade__lead--1 { margin-top: clamp(30px, 3.4vw, 44px); font-size: clamp(19px, 1.8vw, 23px); max-width: 56ch; }
.regiao-cidade__lead--2 { margin-top: clamp(22px, 2.4vw, 32px); font-size: clamp(17px, 1.6vw, 20px); max-width: 62ch; }
.regiao-cidade__lead--3 { margin-top: clamp(22px, 2.4vw, 32px); font-size: clamp(17px, 1.6vw, 20px); max-width: 60ch; }
.regiao-cidade__lead--coda { margin-top: clamp(30px, 3.2vw, 42px); font-size: clamp(19px, 1.75vw, 22px); max-width: 52ch; color: rgba(24,24,24,.82); font-weight: 400; }
.regiao-cidade__lead--coda em { color: var(--copper); }

/* Vídeo flutuante dentro da seção oásis — faixa panorâmica (2.4:1 cinemascope) +
   zoom + shift horizontal p/ centralizar o eixo da avenida (que aparece no lado
   direito do vídeo original). O crop lateral vem do scale > 1; o parallax segue no Y. */
.oasis-video { position: relative; margin: clamp(24px, 3vw, 48px) auto 0; overflow: hidden;
  aspect-ratio: 2.4 / 1; width: min(94vw, 1440px); max-height: 58vh;
  border-radius: clamp(2px, .3vw, 6px); background: var(--gray-100);
  box-shadow: 0 24px 52px -28px rgba(9,12,16,.18); }
.oasis-video video { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; display: block; scale: 1.28; translate: -7% var(--parallax-y, 0px); will-change: translate; }
/* Fade cream SÓ na base: costura suave com a próxima seção. Topo fica limpo,
   o vídeo entra "cheio" e sai desmanchando no cream. */
.oasis-video::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  height: clamp(70px, 14%, 140px);
  background: linear-gradient(to top, var(--cream) 0%, rgba(var(--cream-rgb),.6) 45%, rgba(var(--cream-rgb),0) 100%); }
/* legenda por cima do fade */
.oasis-video__cap { z-index: 2; }
/* Legenda delicada: baixo contraste, posicionada dentro da faixa de fade cream
   (~35px do topo do fade, que tem ~60-80px). Sem borda, blur suave. */
.oasis-video__cap { position: absolute; right: clamp(20px, 2.6vw, 32px); bottom: clamp(28px, 3.4vw, 46px); z-index: 2; padding: 6px 12px; border-radius: 999px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400;
  color: rgba(var(--cream-rgb), .82); background: rgba(9,12,16,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none; }

/* ═══ Centro logístico — mapa do Brasil (hub Uberlândia). Porte do mapa da apresentação,
   recolorido para CREAM + TEAL. Arcos teal desenham até 27 capitais; pulsos copper viajam. ═══ */
.regiao-logistica { position: relative; background:
    radial-gradient(90% 80% at 62% 40%, color-mix(in srgb, var(--teal) 7%, var(--cream)) 0%, var(--cream) 74%); overflow: hidden; }
.regiao-logistica::before { content: ""; display: block; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--teal-rgb),.22) 50%, transparent 100%); }
.logi-grid { max-width: 1320px; margin-inline: auto; padding-block: clamp(44px, 4.8vw, 78px); display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1080px) { .logi-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } }
.logi-texto { text-align: center; }
@media (min-width: 1080px) { .logi-texto { text-align: left; } }
.logi-title { margin-top: 16px; font-weight: 400; letter-spacing: -.018em; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.06; color: var(--ink); text-wrap: balance; }
.logi-lead { margin: clamp(22px, 2.6vw, 34px) auto 0; font-family: var(--sans); font-weight: 300; font-size: clamp(17px, 1.55vw, 20px); line-height: 1.55; letter-spacing: -.005em; color: rgba(24,24,24,.72); max-width: 46ch; text-wrap: pretty; }
@media (min-width: 1080px) { .logi-lead { margin-inline: 0; } }
.logi-lead em { font-style: normal; font-weight: 500; color: var(--teal-strong); }
.logi-lead em.copper { color: var(--copper); }
.logi-legenda { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: rgba(24,24,24,.66); }
@media (min-width: 1080px) { .logi-legenda { justify-content: flex-start; } }
.logi-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.logi-legenda .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.logi-legenda .dot--hub { background: var(--copper); box-shadow: 0 0 6px rgba(162,80,21,.5); }
.logi-legenda .dot--cap { background: var(--teal-strong); }
.logi-legenda .dot--ring { width: 11px; height: 11px; background: transparent; border: 1.5px dashed rgba(var(--teal-rgb),.6); box-shadow: none; }

/* SVG do mapa (flat, sem tilt 3D — legível sobre cream). Host recorta qualquer sangria;
   aspect-ratio fixo dá caixa estável (SVG sem width/height intrínsecos colapsa em grid). */
/* aspect-ratio reserva a altura ANTES do SVG ser construído — senão o host colapsa (0px) e o
   IntersectionObserver (que dispara a animação no scroll) nunca aciona num elemento sem área.
   Também evita layout-shift quando o mapa entra. Mesma proporção do viewBox da .mapa-svg. */
.mapa-brasil { width: 100%; aspect-ratio: 1096 / 1084; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* O .mapa-svg tem `max-width: min(92vw, 720px)` global (760px acima de 1080px),
   herança de quando o mapa vivia numa coluna estreita. Dentro da placa esse teto
   é o que fazia o desenho parecer pequeno num container grande: aqui ele sai e o
   mapa passa a ocupar tudo o que a placa oferece. */
.h-mapa-fig .mapa-brasil { position: relative; z-index: 1; background: var(--cream);
  border-radius: var(--card-radius); border: var(--float-border); box-shadow: var(--float-shadow);
  padding: clamp(10px, 1.1vw, 18px); }
.h-mapa-fig .mapa-svg { max-width: none; width: 100%; }
.mapa-svg { width: 100%; max-width: min(92vw, 720px); height: auto; aspect-ratio: 1096 / 1084; display: block; margin-inline: auto; filter: drop-shadow(0 22px 40px rgba(9,12,16,.12)); }
@media (min-width: 1080px) { .mapa-svg { max-width: 760px; } }
.mapa-estados .br-state { fill: rgba(var(--teal-rgb), .10); stroke: rgba(var(--teal-rgb), .40); stroke-width: 0.8; }
/* O mapa do país passa a ser desenhado em MOGNO — é o que o destaca da placa
   clara e o separa do teal do plano atrás. Escopado em .h-escala--brasil pra não
   alcançar o mapa da Região, que segue teal. */
.h-escala--brasil .mapa-estados .br-state { fill: rgba(var(--cdj-mogno-rgb), .09); stroke: rgba(var(--cdj-mogno-rgb), .34); }
.h-escala--brasil .arc--primary { stroke: var(--cdj-mogno); filter: drop-shadow(0 0 3px rgba(var(--cdj-mogno-rgb), .45)); }
.h-escala--brasil .arc--secondary { stroke: rgba(var(--cdj-mogno-rgb), .34); }
.h-escala--brasil .arc-tip, .h-escala--brasil .arc-pulse, .h-escala--brasil .hub-core {
  fill: var(--cdj-mogno); filter: drop-shadow(0 0 6px rgba(var(--cdj-mogno-rgb), .6)); }
.h-escala--brasil .hub-ring { stroke: var(--cdj-mogno); }
.h-escala--brasil .hub-label { fill: var(--cdj-mogno); }
.mapa-ring { fill: rgba(var(--teal-rgb), .03); stroke: rgba(var(--teal-rgb), .48); stroke-width: 1.4; stroke-dasharray: 6 6; }
.arc { stroke-linecap: round; }
.arc--primary { stroke: var(--teal-strong); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(var(--teal-rgb), .45)); }
.arc--secondary { stroke: rgba(var(--teal-rgb), .40); stroke-width: 1.1; }
.arc-tip { fill: var(--copper); filter: drop-shadow(0 0 5px rgba(162,80,21,.7)); }
.arc-pulse { fill: var(--copper); filter: drop-shadow(0 0 6px rgba(162,80,21,.7)); }
.cap-dot { fill: rgba(var(--teal-rgb), .78); }
.cap-dot--primary { fill: var(--teal-strong); filter: drop-shadow(0 0 4px rgba(var(--teal-rgb), .6)); }
.cap-label { fill: rgba(24,24,24,.82); font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .01em; paint-order: stroke; stroke: var(--cream); stroke-width: 2.6px; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; }
.cap-label--primary { fill: var(--ink); font-size: 18px; font-weight: 700; }
.hub-core { fill: var(--copper); filter: drop-shadow(0 0 8px rgba(162,80,21,.8)); }
.hub-ring { fill: none; stroke: var(--copper); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: hub-pulse 2.6s ease-out infinite; }
@keyframes hub-pulse { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(3.6); opacity: 0; } 100% { transform: scale(3.6); opacity: 0; } }
.hub-label { fill: var(--copper); font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: .02em; paint-order: stroke; stroke: var(--cream); stroke-width: 3px; text-rendering: geometricPrecision; }
@media (prefers-reduced-motion: reduce) { .hub-ring { animation: none; opacity: 0; } }

/* Nota: content-visibility:auto foi testado aqui mas quebrava o reveal (clip-path) do banner
   da Zona Sul — o contain do subtree prende o IntersectionObserver e a seção fica em branco.
   Removido; a página já está leve (~10,7k px, metade do original). */

/* ═══ Números-âncora — 3 stats grandes entre Zona Sul e Trajetória ═══ */
.regiao-numeros { background: var(--ink); color: var(--cream); padding-block: clamp(56px, 7vw, 96px); position: relative; }
.regiao-numeros::before, .regiao-numeros::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--cream-rgb),.24) 50%, transparent 100%); }
.regiao-numeros::before { top: 0; } .regiao-numeros::after { bottom: 0; }
.regiao-numeros__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; text-align: center; }
.regiao-numeros__item { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.regiao-numeros__item + .regiao-numeros__item::before { content: ""; position: absolute; left: calc(clamp(-56px, -2vw, -12px)); top: 20%; bottom: 20%; width: 1px; background: linear-gradient(to bottom, transparent 0%, rgba(var(--cream-rgb),.18) 50%, transparent 100%); }
.regiao-numeros__val { font-family: 'Adore', var(--sans); font-size: clamp(72px, 10vw, 148px); font-weight: 400; line-height: .9; color: var(--gold-hot); letter-spacing: -.01em; }
.regiao-numeros__lbl { font-family: var(--sans); font-size: clamp(12px, 1.2vw, 15px); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--cream-rgb),.75); line-height: 1.5; }
@media (max-width: 720px) { .regiao-numeros__grid { grid-template-columns: 1fr; gap: 40px; } .regiao-numeros__item + .regiao-numeros__item::before { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   DIVISORES ELEGANTES entre seções — 3 estilos alternados criam ritmo
   visual sem virar decoração. Padrão herdado de sites editoriais luxo
   (Rosewood/Studio Freight/Locomotive Scroll — refinamentos 2025-26).
   ═══════════════════════════════════════════════════════════════════ */

/* Divisor A · Linha tríplice em degradê teal (bem sutil, editorial) */
.divisor-editorial { position: relative; height: 32px; background: transparent; overflow: hidden; }
.divisor-editorial::before,
.divisor-editorial::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--teal-rgb),.28) 50%, transparent 100%); }
.divisor-editorial::before { top: 12px; width: 60vw; max-width: 720px; }
.divisor-editorial::after { top: 16px; width: 34vw; max-width: 380px; opacity: .55; }
.divisor-editorial > .divisor__dot { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 3px var(--cream); }

/* Divisor B · SVG wave sutil (padrão Framer/Aceternity) — teal transparente */
.divisor-wave { position: relative; height: 64px; overflow: hidden; }
.divisor-wave svg { width: 100%; height: 100%; display: block; }
.divisor-wave svg path { fill: none; stroke: rgba(var(--teal-rgb),.20); stroke-width: 1; stroke-dasharray: 3 6; animation: waveDrift 24s linear infinite; }
@keyframes waveDrift { to { stroke-dashoffset: -180; } }
@media (prefers-reduced-motion: reduce) { .divisor-wave svg path { animation: none; } }

/* Divisor C · Barra copper/teal com pontos de rhythm (usado entre atos narrativos) */
.divisor-ritmo { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.divisor-ritmo::before, .divisor-ritmo::after { content: ""; flex: 0 0 22vw; max-width: 260px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--teal-rgb),.35) 50%, transparent 100%); }
.divisor-ritmo > i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--copper); opacity: .55; }
.divisor-ritmo > i:nth-child(2) { background: var(--teal-strong); opacity: .85; transform: scale(1.35); }

/* ═══════════════════════════════════════════════════════════════════
   MOTION DESIGN — Região dos Jardins (Aman/Rosewood elegante 2026)
   Padrões usados: reveal com clip-path (Basecamp/Refined) · stagger cascata
   (Vercel/Linear) · Ken Burns loop (Aman) · timeline draw (Stripe/Framer) ·
   split-word reveal (Apple product pages) · hover-lift editorial (Rosewood).
   Todos respeitam prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* Reveal editorial: clip-path + translate, mais elegante que fade puro */
@media (prefers-reduced-motion: no-preference) {
  /* — Trio editorial (oásis · cidade · zona sul): rail sobe sereno, prosa sobe com stagger,
       o título carrega o word-reveal por cima. Assinatura própria, distinta dos blocos-cabeçalho. — */
  .fx-ready .ed-grid .ed-rail { opacity: 0; transform: translateY(20px);
    transition: opacity 1s var(--ease-aldora, cubic-bezier(.2,0,0,1)), transform 1.1s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
  .fx-ready .ed-grid.is-in .ed-rail { opacity: 1; transform: none; }
  .fx-ready .ed-grid .ed-prose > *,
  .fx-ready .ed-grid > .regiao-cidade__lead--coda { opacity: 0; transform: translateY(22px);
    transition: opacity .9s var(--ease-aldora, cubic-bezier(.2,0,0,1)), transform 1s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
  .fx-ready .ed-grid.is-in .ed-prose > *,
  .fx-ready .ed-grid.is-in > .regiao-cidade__lead--coda { opacity: 1; transform: none; }
  .ed-grid.is-in .ed-prose > *:nth-child(1) { transition-delay: .10s; }
  .ed-grid.is-in .ed-prose > *:nth-child(2) { transition-delay: .22s; }
  .ed-grid.is-in .ed-prose > *:nth-child(3) { transition-delay: .34s; }
  .ed-grid.is-in > .regiao-cidade__lead--coda { transition-delay: .46s; }

  /* — Cabeçalhos e blocos simples: clip + subida (mantido) — */
  .fx-ready .regiao-pilares__head > *,
  .fx-ready .regiao-desenv__head > *, .fx-ready .regiao-trajetoria__head > *, .fx-ready .regiao-mapa__inner > *,
  .fx-ready .jardins-galeria .sec-head > * {
    opacity: 0;
    clip-path: inset(30% 0 0 0);
    transform: translateY(24px);
    transition: opacity 1.1s var(--ease-aldora, cubic-bezier(.2,0,0,1)),
                clip-path 1.2s var(--ease-aldora, cubic-bezier(.2,0,0,1)),
                transform 1.1s var(--ease-aldora, cubic-bezier(.2,0,0,1));
    transition-delay: var(--stagger, 0ms);
  }
  .regiao-pilares__head.is-in > *, .regiao-desenv__head.is-in > *,
  .regiao-trajetoria__head.is-in > *, .regiao-mapa__inner.is-in > *,
  .jardins-galeria .sec-head.is-in > * {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
  .regiao-pilares__head > *:nth-child(1),
  .regiao-desenv__head > *:nth-child(1) { --stagger: 0ms; }
  .regiao-pilares__head > *:nth-child(2),
  .regiao-desenv__head > *:nth-child(2) { --stagger: 120ms; }
  .regiao-pilares__head > *:nth-child(3),
  .regiao-desenv__head > *:nth-child(3) { --stagger: 240ms; }

  /* Cascata nos pilares (3 cards) e marcos */
  .fx-ready .regiao-pilares__grid .pilar,
  .fx-ready .marcos .marco,
  .fx-ready .jardins-galeria__trio .jcard {
    opacity: 0; transform: translateY(30px);
    transition: opacity 1s var(--ease-aldora, cubic-bezier(.2,0,0,1)),
                transform 1s var(--ease-aldora, cubic-bezier(.2,0,0,1));
  }
  .pilar.is-in,
  .marco.is-in,
  .jcard.is-in { opacity: 1; transform: translateY(0); }
  .pilar.is-in:nth-child(1),
  .marco.is-in:nth-child(1),
  .jcard.is-in:nth-child(1) { transition-delay: 0ms; }
  .pilar.is-in:nth-child(2),
  .marco.is-in:nth-child(2),
  .jcard.is-in:nth-child(2) { transition-delay: 150ms; }
  .pilar.is-in:nth-child(3),
  .marco.is-in:nth-child(3),
  .jcard.is-in:nth-child(3) { transition-delay: 300ms; }

  /* Marcos "Em movimento": deslizam da esquerda (avanço), não de baixo — e a barra teal cresce */
  .fx-ready .marcos .marco {
    transform: translateX(-28px); border-left-width: 0;
    transition: opacity 1s var(--ease-aldora, cubic-bezier(.2,0,0,1)),
                transform 1s var(--ease-aldora, cubic-bezier(.2,0,0,1)),
                border-left-width .6s var(--ease-aldora, cubic-bezier(.2,0,0,1)),
                border-color .4s ease, box-shadow .4s ease;
  }
  .marco.is-in { transform: translateX(0); border-left-width: 3px; }

  /* Timeline: linha se desenha e nós aparecem sequencial */
  .fx-ready .regiao-trajetoria .tlj { --tlj-progress: 0; }
  .regiao-trajetoria .tlj::before { transform-origin: left center; transform: scaleX(var(--tlj-progress)); transition: transform 1.4s var(--ease-aldora, cubic-bezier(.2,0,0,1)) 200ms; }
  .tlj.is-in { --tlj-progress: 1; }
  .fx-ready .regiao-trajetoria .tlj .tlj__item { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-aldora), transform .7s var(--ease-aldora); }
  .tlj__item.is-in { opacity: 1; transform: translateY(0); }
  .tlj__item.is-in:nth-child(1) { transition-delay: 300ms; }
  .tlj__item.is-in:nth-child(2) { transition-delay: 550ms; }
  .tlj__item.is-in:nth-child(3) { transition-delay: 800ms; }
  .tlj__item.is-in:nth-child(4) { transition-delay: 1050ms; }
  .tlj__item.is-in:nth-child(5) { transition-delay: 1300ms; }

  /* Card wide (Versailles) — entra com clip-path e brilho sutil ao completar */
  .fx-ready .jcard--wide { opacity: 0; clip-path: inset(0 30% 0 30%); transition: opacity 1.1s var(--ease-aldora), clip-path 1.2s var(--ease-aldora); }
  .jcard--wide.is-in { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Underline animado nos títulos-com-em (efeito rosewood: sublinha o destaque no hover) */
.zonasul__lead em, .regiao-oasis__lead em, .regiao-cidade__lead em {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .5s var(--ease-aldora, cubic-bezier(.2,0,0,1));
}
.zonasul__lead:hover em, .regiao-oasis__lead:hover em, .regiao-cidade__lead:hover em { background-size: 100% 1px; }

/* Intro dos Jardins (linha sob o cabeçalho da galeria) */
.jardins-galeria__intro { margin: clamp(16px, 1.8vw, 24px) auto 0; font-family: var(--sans); font-weight: 300; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: rgba(24,24,24,.65); max-width: 60ch; text-wrap: pretty; }

/* ═══ BLOCO 4 · Pilares da Zona Sul (Saúde · Educação · Lazer) — Aman/Rosewood ═══ */
.regiao-pilares { background: var(--cream); padding-block: clamp(48px, 5.4vw, 88px); position: relative; }
.regiao-pilares::before, .regiao-pilares::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--teal-rgb),.24) 50%, transparent 100%); }
.regiao-pilares::before { top: 0; } .regiao-pilares::after { bottom: 0; }
.regiao-pilares__head { max-width: 720px; text-align: center; margin: 0 auto clamp(48px, 5vw, 72px); }
.regiao-pilares__title { margin-top: 14px; font-weight: 400; letter-spacing: -.015em; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.1; color: var(--ink); text-wrap: balance; }
.regiao-pilares__lead { margin: clamp(18px, 2vw, 26px) auto 0; font-family: var(--sans); font-size: clamp(15px, 1.35vw, 18px); font-weight: 300; line-height: 1.5; color: rgba(24,24,24,.65); max-width: 54ch; }
.regiao-pilares__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
@media (max-width: 980px) { .regiao-pilares__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .regiao-pilares__grid { grid-template-columns: 1fr; } }
/* Card editorial IMERSIVO — texto SOBRE a foto (formato revista/Rosewood) */
.pilar { position: relative; display: block; aspect-ratio: 3/4.1; border-radius: var(--card-radius); overflow: hidden; box-shadow: 0 8px 30px -14px rgba(9,12,16,.24); transition: transform .55s var(--ease-aldora, cubic-bezier(.2,0,0,1)), box-shadow .55s ease; }
.pilar:hover { transform: translateY(-6px); box-shadow: 0 34px 80px -26px rgba(9,12,16,.42); }
.pilar__img { position: absolute; inset: 0; overflow: hidden; margin: 0; background: var(--gray-100); }
.pilar__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
.pilar:hover .pilar__img img { transform: scale(1.07); will-change: transform; }
/* scrim escuro pra legibilidade do texto sobre a foto */
.pilar__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,12,16,.86) 0%, rgba(9,12,16,.42) 38%, rgba(9,12,16,.08) 62%, transparent 100%); pointer-events: none; }

/* Pilar "mapa" — o "banner" é um SVG estilizado (cartografia da Zona Sul com hub AL'DORA
   e universidades ao redor). Fica dentro do card, sem tocar em nada fora. */
.pilar-mapa { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pilar-mapa-lbl { fill: var(--teal-strong); font-family: var(--sans); font-size: 8.5px; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; paint-order: stroke; stroke: var(--cream); stroke-width: 2.6; }
.pilar-mapa-hub-lbl { fill: var(--copper); font-family: var(--sans); font-size: 8px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; paint-order: stroke; stroke: var(--cream); stroke-width: 2.6; }
.pilar__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(24px, 2.4vw, 36px) clamp(24px, 2.2vw, 32px) clamp(28px, 2.6vw, 38px); transform: translateY(0); transition: transform .55s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
.pilar__eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--gold-hot); }
.pilar__title { margin: 12px 0 0; font-family: var(--sans); font-weight: 400; letter-spacing: -.01em; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.15; color: var(--cream); text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
/* nota some por padrão, revela no hover (progressive disclosure — mantém o card limpo) */
.pilar__note { margin: 10px 0 0; font-family: var(--sans); font-size: clamp(14px, 1.1vw, 15px); font-weight: 300; line-height: 1.5; color: rgba(var(--cream-rgb), .82); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease-aldora, cubic-bezier(.2,0,0,1)), opacity .45s ease, margin .55s ease; }
.pilar:hover .pilar__note { max-height: 5em; opacity: 1; margin-top: 12px; }
@media (max-width: 900px) { .pilar { aspect-ratio: 3/3.4; } .pilar__note { max-height: 5em; opacity: 1; margin-top: 12px; } }

/* ═══ BLOCO 5 · Marcos de desenvolvimento — A Região continua se escrevendo ═══ */
.regiao-desenv { background: linear-gradient(180deg, var(--cream) 0%, color-mix(in srgb, var(--teal) 3%, var(--cream)) 100%); padding-block: clamp(48px, 5.4vw, 88px); }
.regiao-desenv__inner { }
.regiao-desenv__head { max-width: 720px; text-align: center; margin: 0 auto clamp(40px, 4vw, 56px); }
.regiao-desenv__title { margin-top: 14px; font-weight: 400; letter-spacing: -.015em; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; color: var(--ink); text-wrap: balance; }
.regiao-desenv__lead { margin: clamp(18px, 2vw, 26px) auto 0; font-family: var(--sans); font-size: clamp(15px, 1.35vw, 18px); font-weight: 300; line-height: 1.5; color: rgba(24,24,24,.65); max-width: 56ch; }
.marcos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 32px); }
@media (max-width: 900px) { .marcos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .marcos { grid-template-columns: 1fr; } }
.marco { padding: var(--card-pad); background: rgba(255,255,255,.55); border: 1px solid rgba(var(--teal-rgb),.14); border-radius: var(--card-radius); border-left: 3px solid var(--teal-strong); box-shadow: var(--card-shadow); transition: transform .4s var(--ease-aldora, cubic-bezier(.2,0,0,1)), border-color .4s ease, box-shadow .4s ease; }
.marco:hover { transform: translateY(-4px); border-color: rgba(var(--teal-rgb),.28); border-left-color: var(--copper); box-shadow: var(--card-shadow-hover); }
.marco__tag { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: var(--teal-strong); }
.marco__title { margin: 12px 0 0; font-family: var(--sans); font-weight: 500; letter-spacing: -.01em; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.marco__note { margin: 10px 0 0; font-family: var(--sans); font-size: clamp(13px, 1.05vw, 15px); font-weight: 300; line-height: 1.5; color: rgba(24,24,24,.65); }

/* ═══ Trajetória — TIMELINE VISUAL dos 4 loteamentos ═══ */
.regiao-trajetoria { background:
    radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--teal) 4%, var(--cream)) 0%, var(--cream) 68%);
  padding-block: clamp(48px, 5.4vw, 88px); position: relative; }
.regiao-trajetoria__head { max-width: 900px; text-align: center; margin: 0 auto clamp(40px, 4vw, 60px); }
.regiao-trajetoria__title { margin-top: 14px; font-weight: 400; letter-spacing: -.015em; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.1; color: var(--ink); text-wrap: balance; }
.regiao-trajetoria__lead { margin: clamp(22px, 2.4vw, 32px) auto 0; font-family: var(--sans); font-size: clamp(17px, 1.6vw, 20px); font-weight: 300; line-height: 1.55; letter-spacing: -.005em; color: rgba(24,24,24,.72); max-width: 62ch; text-wrap: pretty; }
.regiao-trajetoria__lead em { font-style: normal; font-weight: 500; color: var(--copper); }
.regiao-trajetoria__nota { margin: clamp(24px, 3vw, 34px) auto 0; text-align: center; font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: rgba(24,24,24,.5); }
/* TIMELINE — 5 pontos: 1977 CDJ (origem, teal-deep) · 3 Jardins FGR (copper) · Versailles (teal-strong, CDJ) */
.tlj { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 24px); position: relative; }
/* linha horizontal com 3 segmentos coloridos: origem CDJ (0-20%) · FGR (20-80%) · Versailles CDJ (80-100%) */
.tlj::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 1px;
  background: linear-gradient(90deg,
    var(--teal-deep) 0%, var(--teal-deep) 20%,
    var(--copper) 20%, var(--copper) 80%,
    var(--teal-strong) 80%, var(--teal-strong) 100%);
  opacity: .35; z-index: 0; }
.tlj__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 52px; }
.tlj__item::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--cream); border: 2.5px solid var(--copper); box-shadow: 0 0 0 6px rgba(var(--cream-rgb),1), 0 0 0 7px rgba(162,80,21,.15); z-index: 1; transition: transform .35s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
.tlj__item--origem::before { border-color: var(--teal-deep); box-shadow: 0 0 0 6px rgba(var(--cream-rgb),1), 0 0 0 7px rgba(var(--teal-deep-rgb),.22); width: 22px; height: 22px; top: 12px; }
.tlj__item--cdj::before { border-color: var(--teal-strong); box-shadow: 0 0 0 6px rgba(var(--cream-rgb),1), 0 0 0 7px rgba(var(--teal-rgb),.18); }
.tlj__item:hover::before { transform: translateX(-50%) scale(1.22); }
.tlj__year { font-family: var(--sans); font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.01em; color: var(--copper); font-variant-numeric: tabular-nums; }
.tlj__item--origem .tlj__year { color: var(--teal-deep); font-weight: 700; }
.tlj__item--cdj .tlj__year { color: var(--teal-strong); }
.tlj__name { margin-top: 6px; font-family: var(--sans); font-size: clamp(13px, 1.1vw, 15px); font-weight: 500; color: var(--ink); }
.tlj__star { color: var(--copper); font-weight: 700; font-size: .8em; }
.tlj__note { margin-top: 6px; font-family: var(--sans); font-size: clamp(12px, .9vw, 13px); font-weight: 300; color: rgba(24,24,24,.5); font-style: italic; }
@media (max-width: 900px) { .tlj { grid-template-columns: 1fr; gap: 32px; } .tlj::before { left: 50%; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto;
  background: linear-gradient(to bottom, var(--teal-deep) 0%, var(--teal-deep) 20%, var(--copper) 20%, var(--copper) 80%, var(--teal-strong) 80%, var(--teal-strong) 100%); opacity: .35; }
  .tlj__item { padding-top: 0; padding-left: 40px; align-items: flex-start; text-align: left; }
  .tlj__item::before { top: 6px; left: calc(50% - 8px); } }

/* ═══ Página Região dos Jardins — mapa ═══ */

.regiao-mapa { background: var(--cream); }
.regiao-mapa__inner { max-width: 1320px; padding-block: clamp(48px, 5.4vw, 84px) clamp(52px, 6vw, 92px); text-align: center; margin-inline: auto; }
.regiao-mapa__title { margin-top: 14px; font-weight: 400; letter-spacing: -.015em; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; color: var(--ink); text-wrap: balance; }
.regiao-mapa__lead { margin: clamp(14px, 1.6vw, 22px) auto clamp(36px, 4vw, 56px); font-family: var(--sans); font-size: clamp(15px, 1.35vw, 18px); font-weight: 300; color: rgba(24,24,24,.65); max-width: 58ch; }
.regiao-mapa__lead em { font-style: normal; font-weight: 500; color: var(--copper); }
.regiao-mapa__map { margin: 0; }
.regiao-mapa__map .ml-svg { width: 100%; aspect-ratio: 1.22 / 1; display: block; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 120% at 50% 42%, #f5f0e6 0%, #ece4d3 62%, #e2d8c4 100%); border: 1px solid rgba(24,24,24,.08); box-shadow: 0 34px 90px -36px rgba(9,12,16,.36); }
.regiao-mapa__cap { margin-top: 14px; font-family: var(--sans); font-size: 11px; letter-spacing: .04em; color: rgba(24,24,24,.5); }

/* ═══ Mapa da Região — override das cores mogno → TEAL do design system (não afeta o mapa AL'DORA) ═══ */
.regiao-mapa .ml-context__fill path { stroke: var(--teal-strong); stroke-opacity: .32; }
.regiao-mapa .ml-context__lote path { stroke: var(--teal-strong); stroke-opacity: .15; }
.regiao-mapa .ml-cj path { fill: var(--teal); fill-opacity: .12; stroke: var(--teal-strong); stroke-opacity: .60; }
.regiao-mapa .ml-jardim-fill path { fill: var(--teal); fill-opacity: .14; stroke: var(--teal-strong); stroke-opacity: .60; }
.regiao-mapa .ml-poi--jardim .ml-poi-dot { fill: var(--teal-strong); stroke: none; }
.regiao-mapa .ml-poi--jardim .ml-poi-line { stroke: rgba(var(--teal-rgb),.55); }
.regiao-mapa .ml-poi--jardim .ml-poi-lbl { fill: var(--teal-strong); font-weight: 600; }
.regiao-mapa .ml-poi--cj .ml-poi-dot { fill: var(--teal-deep); stroke: var(--cream, #f4efe4); stroke-width: 2; }
.regiao-mapa .ml-poi--cj .ml-poi-line { stroke: rgba(var(--teal-deep-rgb),.6); }
.regiao-mapa .ml-poi--cj .ml-poi-lbl { fill: var(--teal-deep); font-weight: 700; letter-spacing: .04em; }
.regiao-mapa .ml-poi-dot { fill: var(--teal-strong); }
.regiao-mapa .ml-poi-line { stroke: rgba(var(--teal-rgb),.35); }
.regiao-mapa .ml-poi-lbl { fill: color-mix(in srgb, var(--teal-deep) 78%, rgba(24,24,24,.62)); }
.regiao-mapa .ml-ring { stroke: rgba(var(--teal-rgb),.32); }
.regiao-mapa .ml-ring-lbl { fill: rgba(var(--teal-rgb),.5); }
.regiao-mapa .ml-rio__ln { stroke: color-mix(in srgb, var(--teal) 78%, #4a6b78); stroke-opacity: .58; }
.regiao-mapa .ml-rio__lbl { fill: var(--teal-strong); fill-opacity: .78; }

/* ═══ Galeria dos 4 Jardins — trio FGR + Versailles wide (destaque CDJ) — refinada ═══ */
.jardins-galeria { position: relative; background: linear-gradient(180deg, var(--cream) 0%, color-mix(in srgb, var(--teal) 3%, var(--cream)) 100%); padding-block: clamp(48px, 5.6vw, 88px) clamp(64px, 7vw, 104px); }
.jardins-galeria::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--teal-rgb),.28) 50%, transparent 100%); }
.jardins-galeria .sec-head { margin-bottom: clamp(36px, 4vw, 56px); }
.jardins-galeria__trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 2vw, 32px); margin-bottom: clamp(20px, 2vw, 32px); }
@media (max-width: 980px) { .jardins-galeria__trio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jardins-galeria__trio { grid-template-columns: 1fr; } }

.jcard { display: block; text-decoration: none; color: var(--ink); background: rgba(255,255,255,.5); border: 1px solid rgba(24,24,24,.05); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); transition: transform .5s var(--ease-aldora, cubic-bezier(.2,0,0,1)), box-shadow .5s ease, border-color .5s ease, background .5s ease; }
.jcard:hover { transform: translateY(-6px); border-color: rgba(var(--teal-rgb),.28); background: color-mix(in srgb, var(--teal) 4%, #fff); box-shadow: var(--card-shadow-hover); }
.jcard__img { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--gray-100); }
.jcard--wide .jcard__img { aspect-ratio: 21/9; }
.jcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-aldora, cubic-bezier(.2,0,0,1)); will-change: transform; }
.jcard:hover .jcard__img img { transform: scale(1.06); }
/* gradiente escuro sutil no rodapé da imagem pra dar profundidade */
.jcard__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(9,12,16,.28) 0%, transparent 100%); opacity: .8; transition: opacity .5s ease; pointer-events: none; }
.jcard:hover .jcard__img::after { opacity: .55; }
.jcard__body { padding: clamp(20px, 2vw, 30px) clamp(22px, 2.2vw, 34px); }
.jcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.jcard__name { font-family: var(--sans); font-weight: 400; letter-spacing: -.01em; font-size: clamp(20px, 1.9vw, 26px); color: var(--ink); margin: 0; }
.jcard--wide .jcard__name { font-size: clamp(28px, 2.6vw, 38px); }
.jcard__star { font-size: .7em; color: var(--copper); font-weight: 600; margin-left: 2px; }
.jcard__year { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; color: rgba(24,24,24,.5); font-variant-numeric: tabular-nums; }
.jcard__sub { margin: 10px 0 0; font-family: var(--sans); font-size: clamp(14px, 1.15vw, 16px); font-weight: 300; line-height: 1.5; color: rgba(24,24,24,.65); text-wrap: pretty; }
.jcard__sub em { font-style: normal; font-weight: 500; color: var(--copper); }

/* Versailles wide = destaque CDJ (paleta institucional teal + badge) */
.jcard--wide { background: color-mix(in srgb, var(--teal) 6%, var(--cream)); border-color: rgba(var(--teal-rgb),.18); }
.jcard--wide .jcard__body { padding: clamp(26px, 3vw, 44px) clamp(28px, 3vw, 48px) clamp(28px, 3vw, 46px); }
.jcard__badge { display: inline-block; margin-bottom: 12px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--teal-strong); padding: 6px 12px; background: rgba(var(--teal-rgb), .12); border-radius: 4px; }
.jcard__cta { display: inline-block; margin-top: 18px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--teal-strong); border-bottom: 1px solid rgba(var(--teal-rgb),.35); padding-bottom: 4px; transition: color .2s ease, border-color .2s ease; }
.jcard:hover .jcard__cta { color: var(--copper); border-bottom-color: var(--copper); }

/* Nota FGR ao fim da seção */
.jardins-galeria__nota { margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: rgba(24,24,24,.5); max-width: 62ch; }
.jardins-galeria__star { color: var(--copper); font-weight: 700; }

/* Faixa território (banner wide) */
.strip { position: relative; height: clamp(360px, 52vh, 620px); display: flex; align-items: flex-end; color:#fff; overflow: hidden; }
.strip__bg { position:absolute; inset:0; }
.strip__bg img { width:100%; height:100%; object-fit: cover; }
.strip__bg::after { content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 60%); }
.strip__inner { position: relative; z-index:2; padding-bottom: clamp(40px,6vh,80px); }
.strip .eyebrow { color: var(--teal-soft); }

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer { background: var(--gray-50); border-top: 1px solid var(--line); padding-block: clamp(64px,7vw,100px) 32px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand p { font-size: 13.5px; color: var(--text-muted); max-width: 32ch; font-weight: 300; margin-top: 18px; }
.footer-col h4 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 16px; }
.footer-col a, .footer-col span { display:block; font-size: 13.5px; color: var(--text-secondary); padding: 5px 0; transition: color .25s; }
.footer-col a:hover { color: var(--teal); }
.footer-bottom { display:flex; justify-content: space-between; gap:16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-faint); letter-spacing: 0.02em; }

/* ── Footer completo (fiel ao padrão Opus: institucional preto) ── */
.footer-opus { background: #161616; color: var(--text-secondary); padding-block: clamp(48px,6vw,72px) 0; }
.footer-opus__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px,4vw,64px); padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-opus__phones { display: flex; flex-direction: column; gap: 4px; }
.footer-opus__phones b { font-size: 13px; font-weight: 500; color: #fff; }
.footer-opus__phones a { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.footer-opus h4 { font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 16px; }
.footer-opus__cols a, .footer-opus__cols span { display: block; font-size: 13px; color: var(--text-muted); padding: 5px 0; transition: color .2s; }
.footer-opus__cols a:hover { color: #fff; }
.footer-opus__bottom { display: grid; grid-template-columns: 1fr 1fr auto; gap: clamp(24px,4vw,48px); align-items: start; padding-block: 36px; }
.footer-opus__showroom span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.footer-opus__showroom p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.footer-opus__brand { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.footer-opus__social { display: flex; gap: 14px; }
.footer-opus__social a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s; }
.footer-opus__social a:hover { background: rgba(255,255,255,.1); }
.footer-opus__legal { text-align: center; font-size: 11px; color: var(--text-faint); padding: 18px 0; border-top: 1px solid rgba(255,255,255,.08); }
/* Único ajuste pedido: afastar os links legais do copyright (estavam colados no texto
   final). Só a distância muda — o resto do rodapé fica idêntico ao original. */
.footer-opus__legal .footer-legal-links { margin-bottom: 26px; }
@media (max-width: 900px) {
  .footer-opus__cols { grid-template-columns: 1fr 1fr; }
  .footer-opus__bottom { grid-template-columns: 1fr; }
  .footer-opus__brand { align-items: flex-start; }
}
@media (max-width: 560px) { .footer-opus__cols { grid-template-columns: 1fr; } }

/* ── Widget flutuante "Falar com especialista" ─────────────────── */
/* Botão flutuante = CTA SECUNDÁRIO → verde-petróleo da marca (não preto neutro).
   Hierarquia: Imersão AL'DORA (topo, gradiente = primário) > Falar com especialista (flutuante). */
.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 10px; background: var(--teal-deep); color: var(--cream); padding: 13px 20px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: 0 12px 34px -10px rgba(var(--teal-deep-rgb), .55); border: 1px solid rgba(var(--cream-rgb), .12); transition: transform .25s var(--ease-aldora, cubic-bezier(.2,0,0,1)), box-shadow .25s ease; }
.chat-widget:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -12px rgba(var(--teal-deep-rgb), .6); }
.chat-widget svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════
   AUDITORIA UX/UI 2026 — refinamentos de acessibilidade + consistência
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Foco de teclado VISÍVEL em todos os interativos (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .jcard:focus-visible, .pilar:focus-visible, .nav a:focus-visible {
  outline: 2px solid var(--teal-strong);
  outline-offset: 3px;
  border-radius: 4px;
}
.pg-hero a:focus-visible, .hero a:focus-visible, .gate a:focus-visible, .btn--grad:focus-visible {
  outline-color: var(--gold-hot);
}

/* 2. Design tokens de CARD unificados (raio · sombra · padding consistentes) */
:root {
  --card-radius: 4px;
  --card-shadow: 0 8px 30px -14px rgba(9,12,16,.22);
  /* FLUTUAÇÃO — o que faz um banner flutuar é o ESPALHAMENTO da sombra, não o
     quanto ela é escura. Por isso: raio grande, offset alto, opacidade baixa
     (≤ .18, regra travada) e borda de 1px que só desenha o contorno. */
  --float-shadow:      0 30px 66px -34px rgba(9, 12, 16, .18);
  --float-shadow-lift: 0 40px 82px -34px rgba(9, 12, 16, .22);
  --float-border:      1px solid rgba(var(--ink-rgb), .07);
  /* no escuro a sombra some contra o fundo: quem flutua é a borda clara */
  --float-shadow-dark: 0 30px 70px -32px rgba(0, 0, 0, .55);
  --float-border-dark: 1px solid rgba(var(--cream-rgb), .10);
  --card-shadow-hover: 0 30px 72px -24px rgba(9,12,16,.34);
  --card-pad: clamp(24px, 2.2vw, 34px);
}

/* 3. Hero da Região — scrim LOCALIZADO no canto do texto (contraste AA sem escurecer tudo) */
.hero--video .hero__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 22% 88%, rgba(9,12,16,.72) 0%, rgba(9,12,16,.32) 42%, transparent 70%),
    linear-gradient(180deg, rgba(9,12,16,.24) 0%, transparent 30%, transparent 55%, rgba(9,12,16,.55) 100%);
}

/* 4. Contraste dos textos secundários — sobe pra passar AA (4.5:1) sobre cream/ink */
.footer-opus a { color: rgba(var(--cream-rgb), .78); }        /* rodapé escuro: cinza claro → +legível */
.footer-opus a:hover { color: var(--cream); }
.marco__note, .pilar__note, .regiao-desenv__lead, .regiao-pilares__lead,
.regiao-mapa__lead { color: rgba(24,24,24,.68); }             /* era .55-.65 → .68 */

/* ── Responsivo ────────────────────────────────────────────────── */
@media (max-width: 1024px) { .emp-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) {
  .nav { display: none; }
  .header-search { display: none; }
  .manifesto { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* Setas do carousel sobrepunham o texto do hero no mobile — no touch a navegação é
     por swipe + dots, então escondê-las é o padrão (e libera a leitura do título). */
  .hero__arrow { display: none; }
}

/* ═══ MENU MOBILE (hamburguer + drawer) — criado por js/mobile-menu.js ═══ */
.mnav-toggle { display: none; }
@media (max-width: 900px) {
  /* botão hamburguer no header */
  /* color:inherit é OBRIGATÓRIO aqui: <button> não herda cor da UA stylesheet por
     padrão (mesma razão pela qual .nav__item.has-drop button já precisa disso) — sem
     ela o ícone cai no azul padrão do sistema (visto no Safari iOS), fora do DS. */
  .mnav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; z-index: 120; }
  .mnav-toggle span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease-aldora, cubic-bezier(.2,0,0,1)), opacity .2s ease; }
  .mnav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mnav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .mnav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* some o CTA do header (vai pro drawer) e portais, deixa logo + hamburguer */
  .site-header .header-cta, .header-portals { display: none; }
}
/* drawer full-screen. Sem padding-top: a barra (com o X) provê o respiro do topo. */
.mnav { position: fixed; inset: 0; z-index: 110; background: color-mix(in srgb, var(--ink) 97%, var(--teal)); color: var(--cream); display: flex; flex-direction: column; justify-content: flex-start; padding: 0 clamp(28px, 8vw, 64px) clamp(40px, 6vh, 64px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .4s var(--ease-aldora, cubic-bezier(.2,0,0,1)), transform .4s var(--ease-aldora, cubic-bezier(.2,0,0,1)), visibility .4s; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mnav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* barra de topo: rótulo "Menu" (esq) + botão fechar (dir). STICKY — o X segue
   alcançável mesmo rolando um menu longo. Mesmo fundo do drawer pra o conteúdo
   deslizar por baixo sem borrão. Respeita o notch (safe-area). */
.mnav__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: calc(clamp(16px, 4vh, 26px) + env(safe-area-inset-top, 0px)) 0 clamp(18px, 3.5vh, 28px);
  background: color-mix(in srgb, var(--ink) 97%, var(--teal)); }
.mnav__eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(var(--cream-rgb), .5); }
.mnav__close { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  background: rgba(var(--cream-rgb), .08); border: 1px solid rgba(var(--cream-rgb), .18); border-radius: 999px;
  color: var(--cream); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .3s var(--ease-aldora), transform .25s var(--ease-aldora); }
.mnav__close:hover { background: rgba(var(--cream-rgb), .16); }
.mnav__close:active { transform: scale(.92); }
.mnav__close:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }
.mnav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(18px, 3vh, 30px); }
.mnav__item { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-aldora), transform .5s var(--ease-aldora); }
.mnav.is-open .mnav__item { opacity: 1; transform: translateY(0); }
.mnav.is-open .mnav__item:nth-child(1) { transition-delay: .08s; }
.mnav.is-open .mnav__item:nth-child(2) { transition-delay: .13s; }
.mnav.is-open .mnav__item:nth-child(3) { transition-delay: .18s; }
.mnav.is-open .mnav__item:nth-child(4) { transition-delay: .23s; }
.mnav.is-open .mnav__item:nth-child(5) { transition-delay: .28s; }
.mnav.is-open .mnav__item:nth-child(6) { transition-delay: .33s; }
.mnav.is-open .mnav__item:nth-child(7) { transition-delay: .38s; }
.mnav.is-open .mnav__item:nth-child(8) { transition-delay: .43s; }
.mnav__link { font-family: var(--sans); font-size: clamp(26px, 7vw, 38px); font-weight: 400; letter-spacing: -.01em; color: var(--cream); text-decoration: none; line-height: 1.1; }
.mnav__link:hover, .mnav__link:focus-visible { color: var(--gold-hot); }
.mnav__link .aldora { font-family: var(--sans); }
.mnav__group-label { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--cream-rgb), .5); margin-bottom: 12px; }
.mnav__sub { list-style: none; margin: 0; padding: 0 0 0 2px; display: flex; flex-direction: column; gap: 12px; }
.mnav__sublink { display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); font-size: clamp(17px, 4.6vw, 21px); font-weight: 300; color: rgba(var(--cream-rgb), .82); text-decoration: none; }
.mnav__sublink:hover, .mnav__sublink:focus-visible { color: var(--gold-hot); }
.mnav__sublink small { font-size: 12px; letter-spacing: .04em; color: rgba(var(--cream-rgb), .45); font-weight: 400; }
.mnav__sublink .drop-star { display: none; }
.mnav__foot { margin-top: clamp(32px, 6vh, 56px); }
.mnav__cta { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav__item { transition: none; } }
@media (max-width: 560px) {
  .emp-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1; }
  .header-portals { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   BENCHMARK OPUS — componentes novos (menu dropdown, divisões,
   timeline, prêmios, POIs raio-1km, ficha técnica, jornal, form segmentado)
   Ver docs/BENCHMARK_OPUS_TOTAL.md
   ═══════════════════════════════════════════════════════════════════ */

/* Header: nav com dropdown + área de ação à direita (Opus framing) */
.nav__item { position: relative; display: flex; align-items: center; }
/* Caret era o glifo de texto '▾': herdava o tracking do nav (1.08px), então sobrava ar
   DEPOIS dele e o item ficava com ritmo diferente dos vizinhos. Agora é SVG no padrão de
   ícone da apresentação (stroke 1.5, cap/join round), com gap explícito e sem tracking. */
.nav__item.has-drop > button { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret { flex: none; opacity: .55; transition: transform .25s var(--ease-aldora), opacity .25s; }
.nav__item.has-drop:hover .nav__caret { opacity: .9; transform: rotate(180deg); }
.nav__item.has-drop button { background: none; border: 0; font-family: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 220px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -12px rgba(0,0,0,.16);
  padding: 10px; opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .2s, translate .2s, visibility .2s;
  /* A dropdown é uma superfície BRANCA — reancora a escala de texto no set -light (escuro).
     Sem isto, no estado topo do header (sobre a hero) ela herdava o --text-* CREM do header
     e o texto sumia no branco (contraste ~1:1). Agora lê escuro em qualquer estado. */
  --text-primary:   var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-muted:     var(--text-muted-light);
  --text-faint:     var(--text-faint-light);
}
.nav__item.has-drop:hover .dropdown,
.nav__item.has-drop:focus-within .dropdown { opacity: 1; visibility: visible; translate: 0 0; }
.dropdown a { display: block; padding: 10px 14px; font-size: 12px; letter-spacing: var(--track-ui); color: var(--text-secondary); text-transform: none; font-weight: 500; }
.dropdown a:hover { background: var(--teal-tint); color: var(--teal-strong); }
.dropdown a small { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 3px; letter-spacing: var(--track-ui); }
/* Asterisco de ressalva — os Jardins urbanizados pela FGR (Barcelona/Roma/Gênova). */
.drop-star { color: var(--gold); font-weight: 700; margin-right: 3px; }
.dropdown-note { margin: 8px 14px 2px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 10.5px; line-height: 1.45; color: var(--text-faint); letter-spacing: .01em; }
.dropdown-note .drop-star { margin-right: 2px; }
/* Dropdown em DOIS ESTADOS (mesma lógica do header): no TOPO sobre a hero = glass ESCURO +
   texto claro (some na foto como o menu); ao ROLAR (.is-solid) = o branco de cima (default).
   Reancora os --text-* no set -dark só no estado topo. */
.dropdown { transition: opacity .2s, translate .2s, visibility .2s, background .3s var(--ease-aldora), box-shadow .3s var(--ease-aldora); }
.site-header:not(.is-solid) .dropdown {
  background: rgba(var(--dark-rgb), .72);
  border-color: rgba(var(--cream-rgb), .16);
  box-shadow: 0 20px 50px -14px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
          backdrop-filter: blur(18px) saturate(1.05);
  --text-primary:   var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-muted:     var(--text-muted-dark);
  --text-faint:     var(--text-faint-dark);
}
.site-header:not(.is-solid) .dropdown a:hover { background: rgba(var(--cream-rgb), .1); color: var(--cream); }
.site-header:not(.is-solid) .dropdown-note { border-top-color: rgba(var(--cream-rgb), .16); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.portal-link { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.portal-link:hover { color: var(--teal); }

/* Grid de 4 Divisões (Urbanismo · Malls · Incorporações · Residences) */
.div-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 32px); margin-top: clamp(44px, 5vw, 72px); }
.div-card { position: relative; aspect-ratio: 3/4; overflow: hidden; display: flex; align-items: flex-end; color: #fff; }
.div-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.div-card:hover img { transform: scale(1.06); }
.div-card::after { content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.78) 10%, rgba(0,0,0,.05) 62%); }
.div-card__body { position: relative; z-index: 2; padding: 22px; }
.div-card__num { font-size: 10px; letter-spacing: .18em; color: var(--teal-soft); }
.div-card h3 { color: #fff; margin-top: 8px; font-weight: 400; }

/* Manifesto de marca (equivalente "Original é Opus") */
.manifesto-brand { background: var(--ink); color: #fff; text-align: center; }
.manifesto-brand .wrap { max-width: 760px; }
.manifesto-brand .eyebrow { color: var(--gold-hot); }
.manifesto-brand h2 { color: #fff; margin: 18px 0 22px; }
.manifesto-brand p { color: var(--text-secondary); font-weight: 300; font-size: 1.05rem; }

/* Prêmios / prova de marca (parcimoniosa — sem bento-grid) */
.premios { display: flex; flex-wrap: wrap; gap: clamp(28px,4vw,64px); margin-top: clamp(40px,5vw,64px); padding-top: clamp(40px,5vw,64px); border-top: 1px solid var(--line); }
.premio { flex: 1 1 200px; }
.premio__num { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 200; color: var(--teal); line-height: 1; }
.premio__label { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; max-width: 26ch; }

/* Timeline institucional (2007–2026 estilo Opus) */
.timeline { margin-top: clamp(48px,5vw,80px); position: relative; }
.timeline::before { content:''; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--line); }
.timeline__track { display: flex; gap: clamp(28px,4vw,56px); overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.tl-item { flex: 0 0 210px; position: relative; padding-top: 30px; }
.tl-item::before { content:''; position: absolute; top: 6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--teal); }
.tl-item__year { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--teal-strong); }
.tl-item h4 { font-size: 14.5px; font-weight: 500; margin-top: 8px; }
.tl-item p { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
/* AL'DORA na timeline = o próximo capítulo — destacado no dourado da marca (como no book):
   ponto, ano e nome em ouro; o resto da linha do tempo segue no teal. */
.tl-item--aldora::before { background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.tl-item--aldora .tl-item__year { color: var(--gold); }
.tl-item--aldora h4 { color: var(--gold); }

/* Valores (institucional) */
.valores { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: clamp(40px,5vw,64px); }
.valor { padding: 24px 0; border-top: 2px solid var(--ink); }
.valor h4 { font-weight: 500; font-size: 14px; }
.valor p { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }

/* Página de produto (template rico Opus adaptado — sem preço/estoque) */
.pg-hero { position: relative; height: clamp(380px,58vh,620px); display: flex; align-items: flex-end; overflow: hidden; color: var(--text-primary); }
.pg-hero__bg { position: absolute; inset: 0; }
.pg-hero__bg img { width:100%; height:100%; object-fit: cover; }
.pg-hero__bg::after {
  content:'';
  position:absolute; inset:0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(9,12,16,.74) 0%, rgba(9,12,16,.12) 60%),
    linear-gradient(100deg, rgba(9,12,16,.55) 0%, rgba(9,12,16,.28) 30%, transparent 60%);
}
.pg-hero__inner { position: relative; z-index: 2; padding-bottom: clamp(32px, 6vh, 60px); padding-inline: clamp(24px, 6vw, 96px); box-sizing: border-box; width: 100%; }
.pg-hero .tag { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; background: var(--grad); padding: 5px 12px; display: inline-block; }
.pg-hero h1 { font-size: clamp(2rem,4.2vw,3.4rem); margin-top: 14px; }
.pg-cta-bar { position: sticky; top: var(--header-h); z-index: 40; background: #fff; border-bottom: 1px solid var(--line); padding-block: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pg-cta-bar .specs { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 18px; flex-wrap: wrap; }
.pg-cta-bar .specs b { color: var(--ink); font-weight: 600; }
.pg-block { margin-top: clamp(56px,7vw,96px); }
.pg-block:first-child { margin-top: 0; }
.diff-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--line); margin-top: 32px; }
.diff-card { background: #fff; padding: 30px 26px; }
.diff-card h4 { font-weight: 500; font-size: 14.5px; }
.diff-card p { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 32px; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ficha-download { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; padding: 22px 26px; background: var(--gray-50); border: 1px solid var(--line); }
.ficha-download__label { font-size: 13px; color: var(--text-secondary); }
.ficha-download__label b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.poi-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 32px; }
.poi h5 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
.poi ul { list-style: none; }
.poi li { font-size: 13px; color: var(--text-secondary); padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.poi li span { color: var(--text-faint); font-size: 12px; }
.map-embed { margin-top: 32px; aspect-ratio: 16/6; background: var(--gray-100) center/cover; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 12.5px; border: 1px solid var(--line); }
.consulte { font-size: 12.5px; color: var(--teal-strong); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.similares { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 32px; }

/* Jornal (Revista) */
.jornal-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.jornal-filtros button { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; color: var(--text-muted); transition: background .3s var(--ease-aldora), color .3s var(--ease-aldora), border-color .3s var(--ease-aldora); }
.jornal-filtros button.active, .jornal-filtros button:hover { border-color: var(--teal); color: var(--teal-strong); background: var(--teal-tint); }
.jornal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,3vw,44px); margin-top: clamp(40px,5vw,64px); }
.jornal-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--gray-100); }
.jornal-card__img img { width:100%; height:100%; object-fit: cover; transition: transform .7s; }
.jornal-card:hover .jornal-card__img img { transform: scale(1.05); }
.jornal-card__tag { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-top: 16px; }
.jornal-card h3 { font-size: 1.1rem; font-weight: 500; margin-top: 8px; }
.jornal-card__date { font-size: 12px; color: var(--text-faint); margin-top: 10px; }

/* ── Repertório (Novidades) — magazine editorial (Exame × Idealiza), design system CDJ ── */
.jornal-card__img { border-radius: var(--card-radius); }
.jornal-card__dek { font-size: .9rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.rep-sec { padding-block: clamp(34px, 4.5vw, 60px); }
/* cabeçalho de seção/editoria */
.rep-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.rep-sechead__kicker { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; }
.rep-sechead__title { font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; color: var(--teal-strong); letter-spacing: -.01em; }
.rep-sechead__link { font-size: 13px; color: var(--teal-strong); white-space: nowrap; }
.rep-sechead__link:hover { text-decoration: underline; }
/* destaque split */
.rep-destaque-sec > .wrap { padding-block: clamp(40px, 5.5vw, 84px) 0; }
.rep-destaque-sec .eyebrow { display: block; margin-bottom: 20px; }
.rep-destaque { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.rep-destaque__tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-strong); }
.rep-destaque__title { font-size: clamp(28px, 3.4vw, 46px); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; margin-top: 14px; }
.rep-destaque__dek { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--text-secondary); margin-top: 18px; max-width: 44ch; }
.rep-destaque__cta { display: inline-block; margin-top: 24px; color: var(--teal-strong); font-weight: 500; }
.rep-destaque:hover .rep-destaque__cta { text-decoration: underline; }
.rep-destaque__img { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--card-radius); border: 1px solid rgba(var(--ink-rgb), .07); }
.rep-destaque__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-aldora); }
.rep-destaque:hover .rep-destaque__img img { transform: scale(1.04); }
/* editoria: lead + manchetes (Exame) */
.rep-editoria { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(26px, 4vw, 52px); align-items: start; }
.rep-lead__img { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--card-radius); border: 1px solid rgba(var(--ink-rgb), .07); }
.rep-lead__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-aldora); }
.rep-lead:hover .rep-lead__img img { transform: scale(1.04); }
.rep-lead__body { margin-top: 16px; }
.rep-lead__title { font-size: clamp(20px, 2vw, 26px); font-weight: 500; margin-top: 8px; line-height: 1.2; }
.rep-manchetes { list-style: none; display: flex; flex-direction: column; }
.rep-manchetes li { border-top: 1px solid var(--line); }
.rep-manchetes li:last-child { border-bottom: 1px solid var(--line); }
.rep-manchetes a { display: block; padding: 15px 0; transition: padding-left .3s var(--ease-aldora); }
.rep-manchetes a:hover { padding-left: 8px; }
.rep-manchetes__tag { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 5px; }
.rep-manchetes__title { font-size: 1rem; font-weight: 500; line-height: 1.35; }
/* duas editorias lado a lado */
.rep-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
.rep-coluna { display: flex; flex-direction: column; }
/* card horizontal (imagem + texto) */
.jornal-card--h { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.rep-coluna .jornal-card--h:last-child { border-bottom: 1px solid var(--line); }
.jornal-card--h .jornal-card__img { aspect-ratio: 4/3; }
.jornal-card--h .jornal-card__tag { margin-top: 0; }
.jornal-card--h h3 { font-size: 1.02rem; font-weight: 500; margin-top: 7px; }
.jornal-card--h .jornal-card__dek { margin-top: 5px; }
/* bloco AL'DORA */
.rep-aldora { background: var(--ink, #181818); }
.rep-aldora > .wrap { max-width: 820px; text-align: center; padding-block: clamp(56px, 8vw, 116px); }
.rep-aldora .eyebrow { color: var(--gold-hot); }
.rep-aldora h2 { color: var(--cream); font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; margin-top: 14px; letter-spacing: -.015em; }
.rep-aldora p { color: rgba(var(--cream-rgb), .72); margin-top: 18px; }
.rep-aldora .btn { margin-top: 30px; }
/* newsletter */
.rep-news-sec { padding-block: clamp(38px, 5vw, 68px); }
.rep-news { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.rep-news__copy p { font-size: clamp(19px, 2.2vw, 26px); font-weight: 500; margin-top: 6px; letter-spacing: -.01em; }
.rep-news__form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 440px; }
.rep-news__form input { flex: 1; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--card-radius); background: #fff; font: inherit; font-size: 14px; color: var(--ink); }
.rep-news__form input:focus { outline: none; border-color: var(--teal); }
.rep-news__form .btn { border-radius: var(--card-radius); white-space: nowrap; }
@media (max-width: 860px) {
  .rep-destaque, .rep-editoria, .rep-duplo { grid-template-columns: 1fr; }
  .rep-destaque__img { order: -1; }
}
@media (max-width: 520px) { .jornal-card--h { grid-template-columns: 96px 1fr; gap: 12px; } }

/* ── Repertório — frente densa em 3 colunas (estilo Exame) ── */
.rep-abertura { padding-block: calc(var(--header-h) + clamp(26px, 4vw, 56px)) clamp(4px, 1.5vw, 12px); }
.rep-abertura .eyebrow { font-size: clamp(12px, 1vw, 13.5px); color: var(--teal-strong); letter-spacing: .22em; margin-bottom: 12px; }
.rep-abertura__title { font-size: clamp(30px, 4vw, 52px); font-weight: 500; letter-spacing: -.02em; margin-top: 0; }
.rep-front { padding-block: 0 clamp(40px, 5vw, 72px); }
.rep-front__grid { display: grid; grid-template-columns: 0.9fr 2.1fr 0.9fr; gap: clamp(22px, 3vw, 44px); border-top: 1px solid var(--line); padding-top: clamp(22px, 3vw, 38px); }
.rep-front__col { min-width: 0; }
.rep-front__col--mid { border-inline: 1px solid var(--line); padding-inline: clamp(22px, 3vw, 44px); }
/* kicker + hierarquia de manchete */
.rep-kicker { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-strong); margin-bottom: 7px; }
.rep-hl { display: block; font-weight: 500; line-height: 1.16; letter-spacing: -.01em; transition: color .25s var(--ease-aldora); }
.rep-front a:hover .rep-hl { color: var(--teal-strong); }
.rep-hl--lead { font-size: clamp(19px, 1.6vw, 23px); }
.rep-hl--feat { font-size: clamp(28px, 3vw, 42px); margin-top: 12px; }
.rep-hl--rail { font-size: clamp(16.5px, 1.4vw, 19px); }
/* sub-links com bullet */
.rep-sublist { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 11px; }
.rep-sublist li { position: relative; padding-left: 16px; }
.rep-sublist li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.rep-sublist a { font-size: 14px; line-height: 1.4; color: var(--text-secondary); transition: color .25s; }
.rep-sublist a:hover { color: var(--teal-strong); }
.rep-block + .rep-block { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
/* feature central */
.rep-feature__img { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--card-radius); border: 1px solid rgba(var(--ink-rgb), .07); margin-bottom: 16px; }
.rep-feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-aldora); }
.rep-feature:hover .rep-feature__img img { transform: scale(1.03); }
.rep-feature__dek { font-size: 1.02rem; color: var(--text-secondary); margin-top: 14px; }
/* pilha da direita */
.rep-rail-item { padding: 15px 0; border-top: 1px solid var(--line); }
.rep-rail-item:first-child { padding-top: 0; border-top: none; }
@media (max-width: 980px) {
  .rep-front__grid { grid-template-columns: 1fr; gap: 0; padding-top: 0; border-top: none; }
  .rep-front__col { padding: 22px 0; border-top: 1px solid var(--line); }
  .rep-front__col--mid { order: -1; border-inline: none; padding-inline: 0; border-top: none; }
}

/* ── Repertório — banner rotativo (carrossel, estilo Exame) ── */
.rep-banner-sec { padding-block: clamp(18px, 3vw, 40px); }
.rep-banner { position: relative; border-radius: var(--card-radius); overflow: hidden; border: 1px solid rgba(var(--ink-rgb), .08); }
.rep-banner__track { position: relative; min-height: clamp(300px, 32vw, 400px); }
.rep-banner__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr 1fr; opacity: 0; pointer-events: none; transition: opacity .7s var(--ease-aldora); }
.rep-banner__slide.is-active { opacity: 1; pointer-events: auto; }
.rep-banner__img { overflow: hidden; background: var(--gray-100); }
.rep-banner__img img { width: 100%; height: 100%; object-fit: cover; }
.rep-banner__body { padding: clamp(26px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; background: var(--cream); }
.rep-banner__title { font-size: clamp(23px, 2.6vw, 34px); font-weight: 500; margin-top: 10px; letter-spacing: -.01em; }
.rep-banner__dek { color: var(--text-secondary); margin-top: 14px; max-width: 42ch; }
.rep-banner__cta { color: var(--teal-strong); font-weight: 500; margin-top: 20px; }
.rep-banner:hover .rep-banner__cta { text-decoration: underline; }
.rep-banner__dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.rep-banner__dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(var(--ink-rgb), .28); cursor: pointer; transition: background .3s, width .3s; }
.rep-banner__dots button.is-active { background: var(--teal-strong); width: 22px; border-radius: 4px; }
.rep-banner__dots button { position: relative; }
.rep-banner__dots button::after { content: ''; position: absolute; inset: -10px; }
/* foco visível (a11y) nos interativos do Repertório */
.jornal-card:focus-visible, .rep-front a:focus-visible, .rep-manchetes a:focus-visible, .rep-sublist a:focus-visible, .rep-banner__slide:focus-visible, .rep-feature:focus-visible, .rep-banner__dots button:focus-visible { outline: 2px solid var(--teal-strong); outline-offset: 3px; border-radius: 2px; }

/* ── Repertório — assinatura editorial CDJ (descola do Exame, mantém a densidade) ── */
/* 1 · kicker com fio editorial: "— CATEGORIA" no lugar do uppercase seco de portal */
.rep-kicker::before, .jornal-card__tag::before, .rep-manchetes__tag::before {
  content: ''; display: inline-block; width: 15px; height: 1px; background: currentColor;
  vertical-align: middle; margin: 0 8px 2px 0; opacity: .5;
}
/* 2 · masthead brand-journal: fio dourado + descritor */
.rep-abertura__rule { width: 56px; height: 2px; background: var(--gold); border: 0; margin: 20px 0 0; }
.rep-abertura__desc { font-size: clamp(14px, 1.4vw, 16px); color: var(--text-secondary); margin-top: 16px; max-width: 42ch; }
/* 3 · marca dourada antes do título de editoria (acento de luxo que o Exame não tem) */
.rep-sechead__title::before {
  content: ''; display: inline-block; width: 24px; height: 3px; background: var(--gold);
  vertical-align: middle; margin: 0 13px 5px 0; border-radius: 2px;
}

/* ── Contato — onde estamos (mapa + apps de mobilidade) ── */
.contato-local > .wrap { max-width: 900px; }
.contato-local__title { font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; margin-top: 12px; letter-spacing: -.01em; }
.contato-local__addr { color: var(--text-muted); margin-top: 6px; }
.contato-mapa { margin-top: 26px; border-radius: var(--card-radius); overflow: hidden; border: 1px solid rgba(var(--ink-rgb), .1); }
.contato-mapa iframe { width: 100%; height: clamp(280px, 42vw, 440px); border: 0; display: block; }
.local-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* botões = design system (.btn.btn--ghost): uppercase, pill, hairline que ganha teal no hover.
   Aqui só dimensiono o ícone e o estado "copiado" (mesmo tint do hover ghost). */
.local-acoes .btn { gap: 9px; padding: 13px 24px; }
.local-acoes .btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.local-btn--copy.is-copied { border-color: var(--teal); color: var(--teal-strong); background: var(--teal-tint); }
.contato-local__hint { font-size: 13px; color: var(--text-muted); margin-top: 18px; }
@media (max-width: 480px) { .local-acoes .btn { flex: 1 1 auto; padding: 13px 16px; } }
@media (max-width: 720px) {
  .rep-banner__track { min-height: 0; }
  .rep-banner__slide { position: relative; grid-template-columns: 1fr; opacity: 1; }
  .rep-banner__slide:not(.is-active) { display: none; }
  .rep-banner__img { display: none; }
}

/* Formulário (padrão Opus: nome/e-mail/telefone/mensagem + LGPD + segmentação) */
.form-box { background: var(--gray-50); border: 1px solid var(--line); padding: clamp(28px,4vw,48px); }
/* 3 primárias na linha de cima + a persona-destaque (Comprador) full-width embaixo,
   em teal — o "maior e em destaque" do seletor. .is-featured garante o full-width
   em qualquer largura (não depende do wrap acidental). */
.seg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.seg-tabs button { flex: 1 1 auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; color: var(--text-muted); transition: background .3s var(--ease-aldora), color .3s var(--ease-aldora), border-color .3s var(--ease-aldora); }
.seg-tabs button.is-featured { flex: 1 1 100%; }
.seg-tabs button:hover { border-color: var(--teal); color: var(--teal-strong); }
.seg-tabs button.active { background: rgba(var(--teal-deep-rgb), var(--btn-alpha)); border-color: transparent; color: var(--cream); box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .14); }
/* Segundo nível (progressive disclosure): motivos de menor frequência num dropdown
   custom no padrão editorial — painel FLUTUA (overlay, não empurra o form). O select
   nativo (desenhado pelo SO) foi substituído pra manter o mesmo nível do resto do site. */
.seg-outro { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 2px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.seg-outro__lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.seg-drop { position: relative; flex: 1 1 240px; min-width: 220px; }
.seg-drop__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--sans); font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); padding: 13px 15px; cursor: pointer; text-align: left; transition: border-color .25s var(--ease-aldora); }
.seg-drop__trigger:hover, .seg-drop__trigger[aria-expanded="true"] { border-color: var(--teal); }
.seg-drop__trigger:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .12); }
.seg-drop__value.is-placeholder { color: var(--text-faint); }
.seg-drop__chev { color: var(--teal); flex-shrink: 0; transition: transform .25s var(--ease-aldora); }
.seg-drop__trigger[aria-expanded="true"] .seg-drop__chev { transform: rotate(180deg); }
.seg-drop__panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: 0 16px 36px -18px rgba(var(--ink-rgb), .18); padding: 8px; }
.seg-drop__panel[hidden] { display: none; }
.seg-drop__group { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding: 10px 12px 5px; margin: 0; }
.seg-drop__opt { display: block; width: 100%; text-align: left; font-family: var(--sans); font-size: 14px; color: var(--ink); background: transparent; border: 0; border-radius: 3px; padding: 10px 12px; cursor: pointer; transition: background .2s, color .2s; }
.seg-drop__opt:hover, .seg-drop__opt:focus-visible { outline: none; background: rgba(var(--teal-rgb), .07); color: var(--teal-strong); }
.seg-drop__opt[aria-selected="true"] { color: var(--teal-strong); font-weight: 500; }
/* Faixa de convite — mesma linguagem pra pill OU dropdown; sempre preenchida (sem CLS) */
.seg-invite { margin: 16px 0 2px; background: rgba(var(--teal-rgb), .06); border-left: 2px solid var(--teal); border-radius: 0 var(--card-radius) var(--card-radius) 0; padding: 13px 16px; font-size: 13.5px; line-height: 1.5; color: var(--teal-strong); }
.seg-invite:empty { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.field input, .field textarea { font-family: var(--sans); font-size: 14px; padding: 13px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); }
.field textarea { resize: vertical; min-height: 100px; }
.lgpd { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--text-muted); margin: 6px 0 22px; }
.lgpd input { margin-top: 3px; }
.lgpd a { color: var(--teal); text-decoration: underline; }
.contato-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,88px); align-items: start; }
.contato-info h3 { font-weight: 400; margin-bottom: 6px; }
.contato-info .canal { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contato-info .canal b { display: block; font-size: 13.5px; }
.contato-info .canal span { font-size: 12.5px; color: var(--text-muted); }

@media (max-width: 1024px) {
  .div-grid { grid-template-columns: repeat(2,1fr); }
  .diff-grid, .gallery, .poi-list, .similares, .jornal-grid { grid-template-columns: repeat(2,1fr); }
  .valores { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .contato-grid { grid-template-columns: 1fr; }
  .dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; display: none; }
  .nav__item.has-drop:hover .dropdown, .nav__item.has-drop:focus-within .dropdown { display: block; }
}
@media (max-width: 560px) {
  .div-grid, .diff-grid, .gallery, .poi-list, .similares, .jornal-grid, .valores { grid-template-columns: 1fr; }
  .premios { flex-direction: column; gap: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Conteúdo validado do book AL'DORA VISTA — etimologia + disclaimer
   ═══════════════════════════════════════════════════════════════════ */
.etimologia { background: var(--ink); color: #fff; text-align: center; padding-block: clamp(64px,8vw,120px); }
.etimologia__inner { max-width: 760px; margin-inline: auto; }
.etimologia__word { display: inline-flex; flex-direction: column; align-items: center; margin: 0 clamp(20px,4vw,56px) 20px; vertical-align: top; }
.etimologia__syl { font-size: clamp(2.6rem,6vw,4.6rem); font-weight: 200; letter-spacing: .02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.etimologia__def { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-soft); margin-top: 10px; }
.etimologia__lead { margin-top: 28px; font-size: clamp(1rem,1.5vw,1.25rem); font-weight: 300; color: var(--text-secondary); max-width: 54ch; margin-inline: auto; }
.disclaimer { font-size: 11px; color: var(--text-faint); font-style: normal; text-align: center; margin-top: 48px; }
@media (max-width: 560px) { .etimologia__word { display: block; margin-bottom: 28px; } }
/* L fantasma: AL → "ALL" (inglês, tudo). O syl usa gradiente clipado (color transparent);
   o ghost precisa do próprio text-fill faint pra escapar do clip do pai. */
.etimologia__ghost { -webkit-text-fill-color: rgba(123, 191, 212, .20); color: rgba(123, 191, 212, .20); background: none; font-weight: 200; }

/* Animação "encontro": ALL vem da esquerda + DORA vem da direita, formam o nome no meio.
   Estado inicial (fx-ready + sem .is-in): cada palavra deslocada pro seu lado, invisível.
   Estado revelado (.etimologia__inner.is-in): translate 0 + opacity 1.
   Curva easeOutExpo pra "assentar" no encontro. */
@media (prefers-reduced-motion: no-preference) {
  .fx-ready .etimologia__word { opacity: 0; transition: opacity 1.1s var(--ease-aldora, cubic-bezier(.2,0,0,1)), transform 1.2s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
  .fx-ready .etimologia__word--from-left  { transform: translateX(-40vw); }
  .fx-ready .etimologia__word--from-right { transform: translateX(40vw); }
  .fx-ready .etimologia__inner.is-in .etimologia__word { opacity: 1; transform: translateX(0); }
  /* pequeno stagger p/ ALL chegar antes, DORA logo depois */
  .fx-ready .etimologia__inner.is-in .etimologia__word--from-right { transition-delay: .12s; }
}

/* ═══════════════════════════════════════════════════════════════════
   AL'DORA · PRODUTOS — hero por produto + faixa (sequência da apresentação, Parte IV).
   Ritmo alternado: foto full-bleed (nome sobreposto) → faixa cream (o que é).
   ═══════════════════════════════════════════════════════════════════ */
.prod-secao { padding: 0; }
.prod-secao > .wrap { padding-block: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 52px); }
.prod { position: relative; height: clamp(400px, 60vh, 660px); overflow: hidden; isolation: isolate; background: var(--dark); }
.prod__media { position: absolute; inset: 0; z-index: 0; }
.prod__media img { width: 100%; height: 112%; object-fit: cover; object-position: center 42%; display: block; transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.06); will-change: transform; }
.prod::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(9,12,16,.85) 0%, rgba(9,12,16,.5) 32%, rgba(9,12,16,.1) 60%, transparent 100%); }
.prod::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(9,12,16,.55) 0%, transparent 42%); }
.prod__label { position: absolute; z-index: 2; left: clamp(20px, 6vw, 96px); bottom: clamp(28px, 6vh, 60px); display: flex; align-items: baseline; gap: clamp(12px, 2vw, 26px); }
.prod__num { font-family: var(--font-sans); font-size: clamp(13px, 1.4vw, 16px); font-weight: 600; letter-spacing: .12em; color: var(--gold-hot); }
.prod__name { font-weight: 400; letter-spacing: -.01em; font-size: clamp(28px, 5vw, 60px); line-height: 1; color: var(--cream-hero, #f4efe4); text-shadow: 0 2px 30px rgba(9,12,16,.5); text-wrap: balance; }
.prod__aviso { position: absolute; z-index: 2; right: clamp(16px, 3vw, 40px); bottom: 12px; font-size: 10px; line-height: 1.35; color: rgba(244,239,228,.5); text-shadow: 0 1px 6px rgba(0,0,0,.6); max-width: 42ch; text-align: right; pointer-events: none; }
@media (max-width: 640px) { .prod__aviso { display: none; } }
.prod-faixa { background: var(--cream); border-bottom: 1px solid rgba(24,24,24,.08); }
.prod-faixa__inner { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: clamp(24px, 4vw, 72px); padding-block: clamp(34px, 4vw, 58px); }
/* descrição: peso leve como base, cor ink 78% (menos monolítica) — deixa o destaque puxar o olho */
.prod-faixa__desc { font-family: var(--sans); font-style: normal; font-size: clamp(19px, 2.1vw, 27px); line-height: 1.38; letter-spacing: -.012em; font-weight: 300; color: rgba(24,24,24,.72); max-width: 38ch; text-wrap: balance; margin: 0; }
/* destaque: <em> vira palavra-chave em copper, sem itálico, peso 500 — hierarquia por cor+peso */
.prod-faixa__desc em { font-style: normal; font-weight: 500; color: var(--copper); }
.prod-faixa__tag { justify-self: end; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-strong); white-space: nowrap; opacity: .82; }
.prod-faixa__tag--link { color: var(--cream); background: rgba(var(--teal-deep-rgb), .94); padding: 13px 24px; border-radius: 999px; text-decoration: none; box-shadow: inset 0 1px 0 rgba(var(--cream-rgb, 244,239,228), .14); transition: transform .2s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
.prod-faixa__tag--link:hover { transform: translateY(-2px); }
@media (max-width: 720px) { .prod-faixa__inner { grid-template-columns: 1fr; gap: 14px; } .prod-faixa__tag { justify-self: start; } }

/* Vitta expandido — desc + coda com síntese em teal (verde+água = paisagem+infra) */
.prod-faixa--vitta { background: linear-gradient(180deg, var(--cream) 0%, color-mix(in srgb, var(--teal) 4%, var(--cream)) 100%); }
.prod-faixa--vitta .prod-faixa__inner { align-items: start; padding-block: clamp(38px, 4vw, 62px); }
.prod-faixa__lead { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 18px); }
.prod-faixa__coda { margin: 0; font-family: var(--sans); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.4; letter-spacing: -.005em; color: rgba(24,24,24,.58); max-width: 44ch; }
.prod-faixa__coda em { font-style: normal; font-weight: 500; color: var(--teal-strong); }

/* ═══════════════════════════════════════════════════════════════════
   PÁGINA AL'DORA — design system CLARO (cream dominante; dark só na foto-hero).
   ═══════════════════════════════════════════════════════════════════ */
.pg-hero__aviso { position: absolute; right: clamp(16px,3vw,40px); bottom: 14px; z-index: 4; font-size: 10px; line-height: 1.35; color: rgba(var(--cream-rgb), .55); text-shadow: 0 1px 6px rgba(0,0,0,.6); max-width: 46ch; text-align: right; pointer-events: none; }
@media (max-width: 640px) { .pg-hero__aviso { display: none; } }
.pg-hero--aldora { height: clamp(520px, 82vh, 860px); }
.pg-hero--aldora .pg-hero__bg img { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.06); will-change: transform; }
/* overlay QUENTE (golden-hour) — aquece o aéreo e dá contraste pro texto (era cinza-frio) */
.pg-hero--aldora .pg-hero__bg::after { background:
  linear-gradient(0deg, rgba(24,12,4,.72) 0%, rgba(40,22,8,.18) 55%, rgba(60,38,14,.08) 100%),
  linear-gradient(100deg, rgba(28,14,5,.5) 0%, rgba(28,14,5,.2) 32%, transparent 62%); }
.pg-hero--aldora .pg-hero__title { font-size: clamp(52px, 9vw, 128px); font-weight: 300; letter-spacing: .02em; line-height: .95; color: var(--cream-hero, #f4efe4); }
/* AL'DORA hero — usa a LOGO OFICIAL (aldora_07_sem_descritor, ratio 6.20:1) em cream.
   Kerning/proporção herdados do vetor da marca — nada de recriar por fonte. */
.pg-hero--aldora .pg-hero__title--logo { margin: 0; line-height: 1; }
.pg-hero--aldora .pg-hero__title--logo img { display: block; width: clamp(220px, 34vw, 460px); height: auto; aspect-ratio: 5.362 / 1; filter: drop-shadow(0 4px 24px rgba(9,12,16,.35)); }
.pg-hero--aldora .pg-hero__lead { margin-top: clamp(14px, 2vw, 22px); max-width: 40ch; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: rgba(var(--cream-rgb), .9); }
/* HERO dark → destaques em gold-hot (bate com eyebrow), sem itálico */
.pg-hero--aldora .pg-hero__lead em { font-style: normal; font-weight: 500; color: var(--gold-hot); }
.pg-hero--aldora .pg-hero__scroll { display: inline-flex; align-items: center; gap: .7em; margin-top: clamp(20px, 3vw, 34px); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--cream-rgb), .7); }
.pg-hero--aldora .pg-hero__scroll::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }

/* Origem do nome — variante CLARA (cream) */
.etimologia--light { background: var(--cream); color: var(--ink); }
.etimologia--light .etimologia__inner { max-width: 900px; }
.etimologia--light .etimologia__words { display: flex; justify-content: center; flex-wrap: wrap; margin-top: clamp(18px, 3vw, 34px); }
.etimologia--light .etimologia__syl { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.etimologia--light .etimologia__ghost { -webkit-text-fill-color: rgba(36,95,115,.22); color: rgba(36,95,115,.22); background: none; }
.etimologia--light .etimologia__def { color: rgba(24,24,24,.5); }
.etimologia--light .etimologia__def em { color: var(--copper); font-style: normal; font-weight: 600; }
.etimologia--light .etimologia__lead { color: rgba(24,24,24,.7); }

/* A escala — "8 milhões de landbank" (número grande copper) */
.landbank { background: var(--cream); }
.landbank__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.landbank__fig { font-family: var(--font-sans); font-weight: 300; font-size: clamp(44px, 7vw, 96px); line-height: .95; letter-spacing: -.02em; color: var(--copper); margin-top: 12px; }
.landbank__fig em { display: block; font-style: normal; font-size: .2em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(24,24,24,.5); margin-top: 14px; }
.landbank__sub { font-size: clamp(17px, 1.9vw, 22px); line-height: 1.4; color: var(--ink); margin-top: 22px; max-width: 24ch; }
.landbank__body { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75; color: rgba(24,24,24,.74); }
.landbank__body p + p { margin-top: 1.2em; }
/* Destaques cream — copper nas palavras-chave (mesmo padrão do produtos/prod-intro) */
.etimologia--light .etimologia__lead em,
.landbank__body em,
.aldora-loc .lead em,
.aldora-cta__lead em { font-style: normal; font-weight: 500; color: var(--copper); }
.landbank__coda { color: var(--ink); }
.landbank__coda strong { color: var(--teal-strong); }
@media (max-width: 820px) { .landbank__inner { grid-template-columns: 1fr; gap: 30px; } }

/* Localização — mapa CLARO (perímetro real + anéis + A + POIs) */
.aldora-loc { background: var(--paper, #efe9dc); }
.aldora-loc__inner { display: block; }
.aldora-loc__copy { max-width: 760px; margin: 0 auto clamp(30px, 4vw, 54px); text-align: center; }
.aldora-loc__title { margin-top: 14px; }
.aldora-loc__map { margin: 0 auto; max-width: 1320px; }
.aldora-loc .ml-svg { width: 100%; aspect-ratio: 1.22 / 1; display: block; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 120% at 50% 42%, #f5f0e6 0%, #ece4d3 62%, #e2d8c4 100%); border: 1px solid rgba(24,24,24,.08); box-shadow: 0 34px 90px -36px rgba(9,12,16,.36); }
/* base de bairros/ruas do entorno em MOGNO (camada inferior do mapa) */
.ml-context__ln { fill: none; stroke: #5e2f1c; stroke-width: 1.1; stroke-opacity: .24; stroke-linejoin: round; stroke-linecap: round; }
/* bairros no entorno em MOGNO — SÓ linhas fininhas e delicadas dos limites (sem preenchimento) */
.ml-context__fill path { fill: none; stroke: #5e2f1c; stroke-opacity: .30; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ml-context__lote path { fill: none; stroke: #5e2f1c; stroke-opacity: .13; stroke-width: .6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.aldora-loc__cap { font-size: 11px; color: rgba(24,24,24,.5); text-align: center; margin-top: 12px; font-style: normal; }
.ml-ring { fill: none; stroke: rgba(36,95,115,.28); stroke-width: 1.4; stroke-dasharray: 3 7; }
.ml-ring-lbl { fill: rgba(24,24,24,.4); font-family: var(--sans); font-size: 22px; letter-spacing: .1em; }
/* AL'DORA: perímetro real (sutil, na camada baixa) + marcador flutuante (mesma geometria
   ampliada em mogno sólido + "A" Adore vetorizado cream inscrito). SEM moeda/disco. */
.ml-aldora { display: none; }
.ml-mark { filter: drop-shadow(0 10px 20px rgba(122,58,15,.32)) drop-shadow(0 2px 5px rgba(9,12,16,.22)); }
.ml-aldora-mark { fill: #A25015; stroke: var(--cream, #f4efe4); stroke-width: 3; stroke-linejoin: round; paint-order: stroke; }
.ml-a { fill: var(--cream); }
/* Rio Uberabinha — traço azul-cinza suave, referência */
.ml-rio__ln { fill: none; stroke: #4a6b78; stroke-opacity: .55; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ml-rio__lbl { fill: #3a5561; fill-opacity: .78; font-family: var(--sans); font-size: 22px; font-style: italic; font-weight: 400; letter-spacing: .04em; }
/* Bairro Cidade Jardim + 4 Jardins — preenchidos em MOGNO CLARO (bem suave, indicativo) */
.ml-cj path { fill: #A25015; fill-opacity: .10; stroke: #A25015; stroke-opacity: .55; stroke-width: 1.4; stroke-linejoin: round; }
.ml-jardim-fill path { fill: #A25015; fill-opacity: .12; stroke: #A25015; stroke-opacity: .55; stroke-width: 1.2; stroke-linejoin: round; }
.ml-poi-line { stroke: rgba(24,24,24,.32); stroke-width: 1.4; }
.ml-poi-dot { fill: var(--teal-strong); }
.ml-poi-lbl { fill: rgba(24,24,24,.72); font-family: var(--sans); font-size: 30px; font-weight: 500; }
/* 4 Jardins em destaque (mogno) */
.ml-poi--jardim .ml-poi-dot { fill: #7a3a0f; }
.ml-poi--jardim .ml-poi-line { stroke: rgba(122,58,15,.5); }
.ml-poi--jardim .ml-poi-lbl { fill: #5e2f1c; font-weight: 600; }
/* Bairro Cidade Jardim (bairro-mãe da CDJ) — mesmo tratamento dos Jardins */
.ml-poi--cj .ml-poi-dot { fill: #A25015; stroke: var(--cream, #f4efe4); stroke-width: 2; }
.ml-poi--cj .ml-poi-line { stroke: rgba(162,80,21,.55); }
.ml-poi--cj .ml-poi-lbl { fill: #A25015; font-weight: 700; letter-spacing: .04em; }
@media (max-width: 820px) { .aldora-loc__inner { grid-template-columns: 1fr; gap: 26px; } }

/* Intro dos produtos + CTA final */
.prod-intro { background: var(--cream); }
.prod-intro > .wrap { padding-block: clamp(56px, 7vw, 104px) clamp(18px, 3vw, 36px); }
/* intro dos 8 produtos — hierarquia: eyebrow · headline curta · lead editorial · meta discreto */
.prod-intro__inner { max-width: 860px; text-align: center; margin-inline: auto; }
.prod-intro__title { margin-top: 14px; font-weight: 400; letter-spacing: -.015em; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; color: var(--ink); text-wrap: balance; }
/* tese: frase-conceito com 2 destaques copper — carrega o peso da mensagem */
.prod-intro__lead { margin: clamp(20px, 2.2vw, 30px) auto 0; font-family: var(--sans); font-size: clamp(18px, 1.7vw, 22px); font-weight: 300; line-height: 1.5; letter-spacing: -.005em; color: rgba(24,24,24,.78); max-width: 60ch; text-wrap: pretty; }
.prod-intro__lead em { font-style: normal; font-weight: 500; color: var(--copper); }
/* sublead: enumeração dos 7 tipos, tom menor e leve — dá densidade sem competir com a tese */
.prod-intro__sublead { margin: clamp(14px, 1.4vw, 20px) auto 0; font-family: var(--sans); font-size: clamp(14px, 1.2vw, 16px); font-weight: 300; line-height: 1.55; letter-spacing: 0; color: rgba(24,24,24,.55); max-width: 68ch; text-wrap: pretty; }
/* CTA link elegante ao fim da intro — sublinhado sutil, hover empurra a seta */
.prod-intro__cta { display: inline-flex; align-items: baseline; gap: 12px; margin: clamp(28px, 3vw, 40px) auto 0; font-family: var(--sans); font-size: clamp(14px, 1.3vw, 17px); font-weight: 500; letter-spacing: .02em; color: var(--teal-strong); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--teal-rgb), .35); transition: color .2s var(--ease-aldora, cubic-bezier(.2,0,0,1)), border-color .2s ease; }
.prod-intro__cta:hover { color: var(--copper); border-bottom-color: var(--copper); }
.prod-intro__cta-arrow { display: inline-block; transition: transform .2s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
.prod-intro__cta:hover .prod-intro__cta-arrow { transform: translateX(4px); }
.aldora-cta { background: var(--cream); text-align: center; }
.aldora-cta__inner { max-width: 720px; margin-inline: auto; }
.aldora-cta__title { margin-top: 16px; text-wrap: balance; }
.aldora-cta__lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: rgba(24,24,24,.72); margin-top: 20px; max-width: 56ch; margin-inline: auto; }
.aldora-cta__hint { display: block; margin-top: clamp(24px, 3vw, 34px); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(24,24,24,.42); }
.aldora-cta__btn { margin-top: 12px; display: inline-block; }

/* ═══════════════════════════════════════════════════════════════════
   O MÉTODO — 14 pilares em 4 MOVIMENTOS editoriais (spread alternado,
   NUNCA grid de 14 cards iguais — regra anti-IA da casa). Cada movimento
   = imagem-lead full-bleed + texto + lista corrida dos pilares do grupo.
   ═══════════════════════════════════════════════════════════════════ */
.movimento { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; align-items: stretch; min-height: 72vh; }
.movimento--reverse { direction: rtl; }
.movimento--reverse > * { direction: ltr; }
.movimento__img { position: relative; overflow: hidden; background: var(--gray-100); }
.movimento__img img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; transition: transform .9s var(--ease-aldora, cubic-bezier(.2,0,0,1)); will-change: transform; }
/* microzoom (padrão herdado da apresentação AL'DORA VISTA — .jsub-shot:hover img scale 1.04) */
.movimento:hover .movimento__img img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .movimento__img img { transition: none; } .movimento:hover .movimento__img img { transform: none; } }
/* Fade cream na borda inferior (padrão herdado do book AL'DORA VISTA) — dá continuidade
   entre a imagem sketch e o fundo cream do texto abaixo. Aplicado nas 4 imagens dos eixos. */
.movimento__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(80px, 14vh, 160px); background: linear-gradient(to top, var(--cream) 0%, rgba(244,239,228,0) 100%); pointer-events: none; z-index: 1; }
.movimento__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px,5vw,88px); }
.movimento__num { font-size: 12px; letter-spacing: .18em; color: var(--teal-strong); font-weight: 600; }
.movimento__body h2 { margin-top: 16px; }
.movimento__body .lead { margin-top: 18px; }
/* Destaque das palavras-chave por eixo — cores do design system (as mesmas do .brand__spark do header) */
.movimento .lead em, .movimento__pilar p em { font-style: normal; font-weight: 500; color: var(--eixo-c, var(--copper)); }
.movimento .movimento__num { color: var(--eixo-c, var(--teal-strong)); }
/* Eixo I · Forma e Função — teal (azul CDJ) */
.movimento--eixo-1 { --eixo-c: #1F5263; }
/* Eixo II · Inovação, Cultura e Economia — bronze */
.movimento--eixo-2 { --eixo-c: #895D47; }
/* Eixo III · Humanidade, Tempo e Alma — copper */
.movimento--eixo-3 { --eixo-c: #A25015; }
/* Eixo IV · Governança e Futuro — gold */
.movimento--eixo-4 { --eixo-c: #977944; }
.movimento__pilares { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.movimento__pilar { padding-top: 16px; border-top: 1px solid var(--line); }
.movimento__pilar h4 { font-size: 14px; font-weight: 500; }
.movimento__pilar p { font-size: 13px; color: var(--text-muted); margin-top: 5px; font-style: normal; }
@media (max-width: 900px) {
  .movimento, .movimento--reverse { grid-template-columns: 1fr; direction: ltr; }
  .movimento__img img { min-height: 300px; }
}

/* Contraste WCAG AA — o --teal puro (#245F73) como TEXTO sobre cream fica no limite;
   --teal-strong é a variação usada em link/texto; o teal puro fica só em fundo. */
.link-teal { color: var(--teal-strong); font-weight: 500; }
.link-teal:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   BANNERS / FIGURAS FLUTUANTES — regra única do site
   Toda figura CONTIDA (card, retrato, carrossel) flutua: raio 4px, borda de
   1px e sombra grande e clara. As bandas FULL-BLEED (hero, Uberlândia, Zona
   Sul, banner do Vista, foto do Método) continuam sangrando de propósito —
   é o contraste entre o que sangra e o que flutua que dá ritmo à página, e
   é sobre elas que as citações flutuam.
   Antes daqui havia duas regras brigando (8px/.34 neste bloco vs 4px/.18 no
   resto). Vale a travada: 4px, sombra ≤ .18.
   ═══════════════════════════════════════════════════════════════════ */
.manifesto__figure img, .movimento__img, .emp__img, .jornal-card__img,
.h-jardim__img, .rep-banner {
  border-radius: var(--card-radius);
  box-shadow: var(--float-shadow);
}
.movimento__img, .emp__img, .jornal-card__img, .h-jardim__img, .rep-banner,
.manifesto__figure img { border: var(--float-border); }
.movimento__img, .emp__img, .jornal-card__img, .h-jardim__img, .rep-banner { overflow: hidden; }
/* o card sobe ao hover — a sombra cresce junto, senão ele "descola" do chão */
.h-jardim:hover .h-jardim__img { box-shadow: var(--float-shadow-lift); }
/* o Movimento (spread editorial do Método) insere a foto pra ela flutuar dentro da coluna */
.movimento__img { margin: clamp(20px, 3vw, 44px); }
@media (max-width: 900px) { .movimento__img { margin: clamp(14px, 4vw, 24px); } }

/* Sobre o cream, quem faz flutuar é o par sombra-clara + borda fina. (Os cartões
   que são eles próprios escuros — a citação teal — usam a borda clara, que é o que
   desenha o contorno contra o fundo claro.) */
.h-quadra__img { border-radius: var(--card-radius); border: var(--float-border); box-shadow: var(--float-shadow); }
/* na faixa escura a sombra some contra o fundo: quem flutua é a borda clara */
.h-prod { border-radius: var(--card-radius); border: var(--float-border-dark); box-shadow: var(--float-shadow-dark); }
/* A citação flutua SOBRE a foto, não sobre o cream — e é isso que muda a receita.
   A sombra da casa (--float-shadow-lift, .22 de opacidade) foi calibrada pra fundo
   claro; sobre uma aérea escura ela simplesmente não registra e o cartão parece
   colado. Aqui vão DUAS camadas: uma curta e mais fechada, que assenta a peça, e
   uma longa e difusa, que a afasta. Sombra única lê como brilho, não como altura.
   Mais um fio claro de 1px: sobre foto é a borda que define onde o cartão termina.
   Tamanho e posição intocados. */
.h-citacao { border-radius: var(--card-radius);
  border: 1px solid rgba(var(--cream-rgb), .13);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .40),
              0 34px 68px -24px rgba(0, 0, 0, .52); }
.h-prod { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   PARALLAX DE MÍDIA — a folga é obrigatória
   O scrub desloca a imagem ±8% da PRÓPRIA altura. Pra nunca abrir faixa vazia
   na borda, a imagem tem 124% de altura e nasce em -12%: a folga de cada lado
   (12%) é maior que o deslocamento máximo (8% de 124 = 9,9%). Sem esse cálculo
   aparece tarja preta no topo — foi o bug do hero (memória hero-parallax).
   Sem JS a imagem fica parada e centrada: o layout não depende do movimento.
   ═══════════════════════════════════════════════════════════════════ */
.h-escala__foto, .h-escala__banda, .h-metodo__foto, .h-vista__banner, .h-aldora__mapa,
.h-versailles, .h-filme__capa {
  position: relative; overflow: hidden;
}
.h-escala__foto > img, .h-escala__banda > img, .h-metodo__foto > img,
.h-vista__banner > img, .h-aldora__mapa > img, .h-versailles > img, .h-filme__capa > img:first-child {
  position: absolute; left: 0; top: -12%; width: 100%; height: 124%;
  object-fit: cover; display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   KIT DE MOVIMENTO (js/effects.js) — reveal editorial no scroll, eixo de
   peso da fonte variável, stat-reveal (blur→nítido) e count-up. Portado
   LEVE da apresentação AL'DORA VISTA, sem nenhuma lib (só CSS + IO vanilla).
   Regras da casa herdadas: respeita prefers-reduced-motion; will-change é
   TRANSIENTE; e o estado ESCONDIDO só existe sob html.fx-ready — que o JS
   só liga quando há suporte e não é reduced-motion/editor. Logo, SEM JS
   (ou com JS falhando) nada some: o conteúdo aparece normal.
   ═══════════════════════════════════════════════════════════════════ */
.fx-ready [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .85s var(--ease-out-soft), transform .85s var(--ease-out-soft);
  will-change: opacity, transform;
}
.fx-ready [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
/* Mídia revela com um leve "cinema" (sobe + assenta a escala), não só fade — receita das
   cortinas de imagem do book. O .is-in acima zera o transform (volta a scale 1). */
.fx-ready .gallery img[data-reveal], .fx-ready .movimento__img[data-reveal],
.fx-ready .div-card[data-reveal], .fx-ready .strip__inner[data-reveal] {
  transform: translateY(18px) scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .fx-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Eixo de peso da fonte variável no scroll (opt-in via [data-wght]) — o texto "ganha corpo"
   ao entrar em cena (400 → 520). Assinatura sutil de variable font. */
[data-wght] { font-variation-settings: "wght" 400; transition: font-variation-settings .7s var(--ease-out-soft); }
.fx-ready [data-wght].is-in { font-variation-settings: "wght" 520; }

/* Stat-reveal — número entra de blur→nítido (opt-in via .dado-num). Sem contagem aqui;
   é só a entrada. O count-up numérico é separado, via [data-count-to] no effects.js. */
.fx-ready .dado-num[data-reveal] { filter: blur(9px); transition: opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft), filter .9s var(--ease-out-soft); }
.fx-ready .dado-num[data-reveal].is-in { filter: blur(0); }
.dado-num { font-variant-numeric: tabular-nums; }

/* Ken Burns — zoom lento e infinito nos banners de faixa (território). Pausa off-screen
   fica pro effects.js (classe .anim-off); aqui só o keyframe. Sutil: 1 → 1.06 em 24s. */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1.5%); } }
.strip__bg img { animation: kenburns 24s var(--ease-aldora) infinite alternate; }
.strip__bg img.anim-off { animation-play-state: paused; }
/* mesma pausa pras demais animações infinitas decorativas (effects.js observa) */
.divisor-wave svg path.anim-off, .hub-ring.anim-off { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .strip__bg img { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   SUBPÁGINA DE JARDIM (Barcelona · Roma · Gênova · Versailles) — fiel ao
   capítulo VIII da apresentação: hero com selo, amenities, galeria em
   mosaico com lightbox, mapa, faixa de números (stat-reveal + count-up)
   e fechamento cerimonial (faixa com Ken Burns).
   ═══════════════════════════════════════════════════════════════════ */
/* Hero da subpágina — eyebrow gold-hot + título + tagline (linguagem do book) */
.pg-hero .eyebrow { color: var(--gold-hot); letter-spacing: var(--track-label); text-shadow: 0 1px 16px rgba(0,0,0,.5); margin-bottom: 14px; display: block; }
.pg-hero__tagline { margin-top: 14px; font-size: 13px; letter-spacing: .04em; color: rgba(var(--cream-rgb), .82); text-shadow: 0 1px 12px rgba(0,0,0,.5); }

/* Amenities — reutiliza .poi-list/.poi (h5 + ul); sem valor à direita, só o rótulo */
.amenities .poi li { justify-content: flex-start; }

/* Galeria em mosaico + lightbox (mesma linguagem editorial do book) */
.jgal { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 6px; margin-top: 32px; }
.jgal__item { position: relative; overflow: hidden; aspect-ratio: 4/3; margin: 0; padding: 0; border: 0; cursor: zoom-in; background: var(--gray-100); display: block; width: 100%; }
.jgal__item--wide { grid-column: span 2; aspect-ratio: 16/9; }
.jgal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.jgal__item:hover img { transform: scale(1.05); }
.jgal__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-align: left; background: linear-gradient(0deg, rgba(9,12,16,.72), transparent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.jgal__item:hover .jgal__cap, .jgal__item:focus-visible .jgal__cap { opacity: 1; }
@media (max-width: 768px) { .jgal { grid-template-columns: repeat(2, 1fr); } .jgal__item--wide { aspect-ratio: 16/10; } }
@media (max-width: 480px) { .jgal { grid-template-columns: 1fr; } .jgal__item, .jgal__item--wide { grid-column: auto; aspect-ratio: 4/3; } }

/* Mapa — imagem larga clicável (abre no lightbox) */
.jmapa { display: block; width: 100%; margin-top: 28px; padding: 0; border: 1px solid var(--line); overflow: hidden; cursor: zoom-in; background: var(--gray-50); }
.jmapa img { width: 100%; display: block; }

/* Em números — faixa de stats grandes (stat-reveal blur→nítido + count-up) */
.jstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); margin-top: 32px; }
.jstat { background: var(--paper); padding: 30px 26px; }
.jstat__num { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 500; letter-spacing: -0.02em; color: var(--teal-strong); line-height: 1; }
.jstat__unit { font-size: .95rem; color: var(--text-muted); margin-left: 5px; }
.jstat__label { font-size: 12.5px; color: var(--text-muted); margin-top: 14px; }
@media (max-width: 768px) { .jstats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .jstats { grid-template-columns: 1fr; } }

/* Fechamento cerimonial — usa .strip (Ken Burns já herdado). Eyebrow gold + nome. */
.strip--close .eyebrow { color: var(--gold-hot); }
.strip--close h2 { color: #fff; max-width: 20ch; margin-top: 8px; }
.strip__name { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--cream-rgb), .72); margin-top: 12px; }

/* Lightbox (js/lightbox.js) — overlay escuro AL'DORA, legenda, prev/next, contador */
.lbx { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(9,12,16,.94); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lbx.is-open { display: flex; animation: lbxIn .25s var(--ease-out-soft); }
@keyframes lbxIn { from { opacity: 0; } to { opacity: 1; } }
.lbx__stage { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lbx.is-open .lbx__stage { animation: lbxStage .32s var(--ease-out-soft); }
@keyframes lbxStage { from { transform: scale(.94); } to { transform: none; } }
.lbx__stage img { max-width: 92vw; max-height: 80vh; object-fit: contain; box-shadow: 0 24px 70px -20px rgba(0,0,0,.7); transition: opacity .25s var(--ease-out-soft); }
@media (prefers-reduced-motion: reduce) { .lbx.is-open .lbx__stage { animation: none; } .lbx__stage img { transition: none; } }
.lbx__stage figcaption { color: rgba(var(--cream-rgb), .72); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.lbx__close { position: absolute; top: 16px; right: 22px; width: 44px; height: 44px; font-size: 26px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; opacity: .8; transition: opacity .2s; }
.lbx__close:hover { opacity: 1; }
.lbx__nav { position: absolute; top: 50%; translate: 0 -50%; width: 54px; height: 54px; font-size: 36px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; opacity: .65; transition: opacity .2s; }
.lbx__nav:hover { opacity: 1; }
.lbx__prev { left: 10px; } .lbx__next { right: 10px; }
.lbx__counter { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; font-size: 10.5px; letter-spacing: .16em; color: rgba(var(--cream-rgb), .55); }
@media (prefers-reduced-motion: reduce) { .lbx.is-open { animation: none; } }
@media (max-width: 768px) { .lbx__nav { width: 42px; font-size: 28px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — arco de 6 capítulos (benchmark JHSF · Vokkan · Eurogarden · Idealiza)
   A home é um RESUMO-PORTÃO: cada capítulo resume uma página e leva pra ela.
   Ritmo de cor: cream → cream+foto → ESCURO (pico AL'DORA) → cream → convite.
   Regras da casa: radius 4px · shadow ≤.18 · hierarquia de opacidade · eyebrow com cor.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1 · A TESE + O FILME ───────────────────────────────────────────────────
   Par assimétrico: a prosa ocupa menos que o filme. Quem carrega a seção é a
   imagem em movimento, não o texto — o texto dá o porquê e sai da frente. */
.h-faixa { position: relative; padding-block: clamp(64px, 8.5vw, 132px);
  background:
    radial-gradient(120% 96% at 22% 6%, color-mix(in srgb, var(--teal) 7%, var(--cream)) 0%, rgba(244,239,228,0) 62%),
    linear-gradient(180deg, var(--cream) 0%, color-mix(in srgb, var(--teal) 4%, var(--cream)) 100%); }
.h-faixa::before, .h-faixa::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--ink-rgb), .13) 50%, transparent 100%); }
.h-faixa::before { top: 0; }
.h-faixa::after  { bottom: 0; }
.h-faixa__band { width: min(calc(var(--wrap) + 130px), calc(100% - var(--pad-x) * 2)); margin-inline: auto;
  display: grid; grid-template-columns: .78fr 1.34fr; gap: clamp(30px, 4.4vw, 68px); align-items: center; }

/* HIERARQUIA — o salto entre os níveis é o que faz a coluna parecer composta e
   não digitada. Eyebrow miúdo e muito espaçado · título grande e apertado · fio
   de corte · texto pequeno e arejado. É contraste de ESCALA fazendo o trabalho,
   não peso de fonte: a casa usa uma família só (regra do manual v2). */
.h-faixa__txt { max-width: 31rem; }
.h-faixa .eyebrow { color: var(--teal-strong); font-size: 10.5px; letter-spacing: .22em; }
.h-faixa h2 { font-size: clamp(36px, 4.6vw, 59px); font-weight: 500; letter-spacing: -.03em;
  line-height: 1.0; margin: clamp(16px, 2vw, 24px) 0 0; text-wrap: balance; }
/* Quatro vozes, não duas. O texto tem um degrau interno: a primeira frase situa
   (maior, mais escura) e o resto detalha (menor, mais clara). Sem isso o bloco
   inteiro sai num tom só e nada dentro dele tem prioridade.
   O destaque é <em> em copper, no MEIO do texto e nunca no título — é a convenção
   das outras seções (.h-escala em / .h-mapa__body em) e a regra travada manda ser
   parcimonioso. Copper e não gold: sobre cream o gold dá 1,97:1 e reprova. */
.h-faixa__lead { position: relative; margin: clamp(22px, 2.8vw, 34px) 0 0; padding-top: clamp(20px, 2.4vw, 30px);
  max-width: 26ch; font-size: clamp(1.1rem, 1.45vw, 1.34rem); line-height: 1.46;
  letter-spacing: -.005em; color: rgba(var(--ink-rgb), .86); }
.h-faixa__lead::before { content: ''; position: absolute; top: 0; left: 0; width: clamp(48px, 6vw, 84px);
  height: 1px; background: color-mix(in srgb, var(--teal) 42%, transparent); }
.h-faixa__sub { margin: clamp(12px, 1.4vw, 18px) 0 0; max-width: 38ch;
  font-size: clamp(.94rem, 1.1vw, 1.02rem); line-height: 1.76; color: rgba(var(--ink-rgb), .58); }
.h-faixa em { font-style: normal; color: var(--copper); }
.h-faixa .link-teal { display: inline-block; margin-top: clamp(24px, 2.8vw, 34px); font-size: 14px; }

/* ── O FILME — capa click-to-play (modelo: capa do cap. III do book) ─────────
   O iframe do YouTube só nasce no clique. Antes disso a página não fala com
   terceiro nenhum: nada de peso, nada de cookie de quem só passou por aqui. */
.h-filme { margin: 0; }
/* A moldura envolve SÓ o card. Antes os eixos se posicionavam pela <figure>
   inteira, que inclui a legenda — os dois de baixo caíam em cima do texto. */
.h-filme__moldura { position: relative; display: block; isolation: isolate; }

/* O PLANO DE COR — a camada que fica atrás do filme.
   Por que UM e não quatro: quatro quadrados nos cantos emolduram de forma
   simétrica, e simetria fecha a composição em vez de dar profundidade. Um plano
   só, deslocado do eixo, cria as duas coisas que interessam — camada (há algo
   atrás) e direção (o olho anda pra onde ele aponta).

   Por que COPPER: é o mesmo tom da ênfase do texto ao lado (`<em>`), então o
   bloco e as palavras destacadas rimam em vez de brigar. Teal seria redundante
   com o véu da própria capa.

   Proporção: 92% do card, nunca maior — o plano é apoio, o filme é o assunto.
   O raio acompanha a proporção do ícone da marca (10/116 ≈ 8,6% do lado), então
   continua sendo a forma da casa e não um retângulo arredondado genérico. */
.h-filme__plano { --desloc: clamp(22px, 3.6vw, 62px);
  position: absolute; z-index: 0; width: 92%; height: 92%;
  right: calc(-1 * var(--desloc)); top: calc(-1 * var(--desloc) * .62);
  /* MESMO raio do card (--card-radius, 4px). Cheguei a usar o raio proporcional
     do ícone da marca, mas o ícone é um selo de 24px: a mesma proporção numa placa
     de 700px vira canto abaulado, que é justamente o que a regra editorial do site
     proíbe. Placa e card são o mesmo material, logo o mesmo canto. */
  border-radius: var(--card-radius);
  /* Não é cor chapada: é superfície. Dois stops só leem como plástico; o que dá
     nobreza é a MESMA cor percorrendo uma faixa de luminância, com um brilho
     quente entrando por um canto e a sombra fechando no oposto — a leitura de
     metal e couro, não de tinta. Os tons de meio (#B16C3A → #8B4512) são os do
     próprio ícone da marca; as pontas só estendem a escala pra cima e pra baixo. */
  background:
    radial-gradient(112% 84% at 86% 6%, rgba(255, 226, 190, .30) 0%, rgba(255, 226, 190, 0) 54%),
    radial-gradient(90% 70% at 8% 100%, rgba(58, 24, 6, .34) 0%, rgba(58, 24, 6, 0) 60%),
    linear-gradient(142deg, #C57F42 0%, #B16C3A 26%, #9A5624 56%, #8B4512 78%, #6D3410 100%);
  box-shadow: 0 26px 60px -30px rgba(9, 12, 16, .38),
              inset 0 1px 0 rgba(255, 235, 210, .20); }

.h-filme__capa { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: var(--float-border); border-radius: var(--card-radius); overflow: hidden;
  background: var(--teal-deep); cursor: pointer; box-shadow: var(--float-shadow);
  transition: box-shadow .5s var(--ease-aldora); }
.h-filme__capa:hover { box-shadow: var(--float-shadow-lift); }
/* o hover de escala saiu: o parallax já move a imagem, e os dois transforms
   brigavam pelo mesmo eixo — o GSAP escreve `transform` e apagava o scale. */
/* Tingir, não cobrir: o `multiply` casa o teal COM a foto em vez de pintar por
   cima dela, então o desenho da paisagem continua legível sob a cor da casa. */
.h-filme__veu { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--teal) 34%, #fff) 0%,
    color-mix(in srgb, var(--teal) 74%, #fff) 44%,
    color-mix(in srgb, var(--teal-deep) 96%, #fff) 100%); }
.h-filme__capa::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 56% at 50% 48%, rgba(0,0,0,.34) 0%, transparent 74%); }

/* marca + play empilhados no centro: o cartaz do filme, não um selo no canto */
.h-filme__stack { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center;
  justify-items: center; gap: clamp(20px, 2.8vw, 38px); pointer-events: none; }

/* A MARCA É JANELA: o wordmark não é pintado por cima da capa — ele a RECORTA.
   A mesma imagem entra como fundo, clareada, e a máscara SVG deixa passar só o
   que está dentro das letras. Precisa do outline vetorial de verdade
   (_assets-fonte/brand/cdj/cdj_transp.svg): SVG com <text> não vira máscara
   confiável, depende da fonte estar instalada em quem renderiza. */
/* largura em vw, não em %: dentro de um grid `place-content: center` a faixa
   encolhe pro conteúdo e a porcentagem resolve contra ela — o clamp travava no
   mínimo e a marca nunca crescia junto com o banner. */
.h-filme__marca { display: block; width: clamp(150px, 13.5vw, 250px); aspect-ratio: 400 / 324;
  /* a janela mostra o CÉU, não o miolo da foto: área uniforme mantém a letra
     legível. Sobre construção o recorte fica manchado e o wordmark some. */
  background-image: var(--capa); background-size: 340% auto; background-position: 50% 9%;
  filter: brightness(1.75) saturate(.45) contrast(1.02)
          drop-shadow(0 3px 14px rgba(0, 0, 0, .55));
  -webkit-mask: url(img/cdj-lockup.svg) center / contain no-repeat;
          mask: url(img/cdj-lockup.svg) center / contain no-repeat; }
.h-filme__play { display: block; width: clamp(50px, 5vw, 68px); height: clamp(50px, 5vw, 68px);
  color: var(--cream); filter: drop-shadow(0 6px 22px rgba(0,0,0,.5));
  transition: transform .4s var(--ease-aldora); }
.h-filme__play svg { width: 100%; height: 100%; display: block; }
.h-filme__capa:hover .h-filme__play { transform: scale(1.08); }
.h-filme__capa:focus-visible { outline: 2px solid var(--teal-strong); outline-offset: 3px; }
.h-filme figcaption { margin-top: clamp(34px, 3.4vw, 48px); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); }
/* depois do clique o <button> vira o berço do iframe */
.h-filme__capa.is-playing { cursor: default; }
.h-filme__capa.is-playing::after { content: none; }
.h-filme__capa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .h-faixa__band { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 46px); }
  .h-faixa__txt { max-width: none; }
}

/* ── 2 · MÉTODO (~60vh split) ───────────────────────────────────────────── */
.h-metodo__inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.h-metodo__body h2 { font-size: clamp(28px, 3.9vw, 46px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; margin: 14px 0 20px; }
.h-metodo__body .link-teal { display: inline-block; margin-top: 20px; }
/* eixos numerados: a numeração É informação (os 4 eixos do método), não decoração */
.h-eixos { list-style: none; counter-reset: eixo; margin: 0; padding: 0; display: grid; gap: 2px; }
.h-eixos li { counter-increment: eixo; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.h-eixos li:last-child { border-bottom: 1px solid var(--line); }
.h-eixos li::before { content: counter(eixo, decimal-leading-zero); grid-row: span 2; font-size: 12px; letter-spacing: .08em; color: var(--gold-hot); padding-top: .35em; font-variant-numeric: tabular-nums; }
.h-eixos b { font-size: 15.5px; font-weight: 500; }
.h-eixos span { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
@media (max-width: 860px) { .h-metodo__inner { grid-template-columns: 1fr; } }

/* ── 3 · REGIÃO DOS JARDINS (~80vh — a prova) ───────────────────────────── */
.h-regiao__head { margin-bottom: 44px; }
.h-regiao__head h2 { font-size: clamp(28px, 4.2vw, 50px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 18px; }
/* banda larga: sangra até a borda, altura cinematográfica */
.h-regiao__banda { margin: 0 0 clamp(36px, 5vw, 64px); overflow: hidden; }
.h-regiao__banda img { width: 100%; height: clamp(260px, 42vw, 520px); object-fit: cover; display: block; }
/* os 4 bairros como linha do tempo */
.h-jardins { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.h-jardim { display: block; text-decoration: none; color: inherit; }
.h-jardim__img { display: block; overflow: hidden; border-radius: var(--card-radius); }
.h-jardim__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .7s var(--ease-aldora); }
.h-jardim:hover .h-jardim__img img { transform: scale(1.04); }
.h-jardim b { display: block; margin-top: 14px; font-size: 14.5px; font-weight: 500; }
.h-jardim time { display: block; margin-top: 3px; font-size: 12px; letter-spacing: .1em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.h-regiao__nota { margin-top: 18px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 760px) { .h-jardins { grid-template-columns: repeat(2, 1fr); } }
/* mapa: texto + mapa animado lado a lado */
.h-mapa { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(56px, 8vw, 110px); }
.h-mapa__body h3 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 500; letter-spacing: -.02em; line-height: 1.14; margin: 12px 0 16px; }
.h-mapa__body p { color: var(--text-secondary); max-width: 46ch; }
.h-mapa__body em { font-style: normal; color: var(--copper); }
.h-mapa__body .link-teal { display: inline-block; margin-top: 20px; }
@media (max-width: 860px) { .h-mapa { grid-template-columns: 1fr; } }

/* ── 4 · AL'DORA ────────────────────────────────────────────────────────────
   MORTO REMOVIDO: aqui vivia a versão anterior da seção (full-bleed escuro com
   .h-aldora__bg / __inner / __mix / __cta). Nenhuma dessas classes existe mais no
   HTML — mas o `.h-aldora::after` era um PSEUDO-elemento, então continuava
   renderizando um scrim `rgba(13,17,23,.92)` por cima da seção inteira. Com a
   seção em cream isso deixava o painel de texto preto com texto ink em cima:
   ilegível. Classe órfã some sozinha; pseudo-elemento órfão não.
   O que sobrou é só o que o HTML usa. */
.h-aldora__ghost { border-color: color-mix(in srgb, var(--mogno) 34%, transparent); color: var(--mogno); }
.h-aldora__ghost:hover { border-color: var(--mogno); background: color-mix(in srgb, var(--mogno) 6%, transparent); }

/* ── 5 · REPERTÓRIO ─────────────────────────────────────────────────────── */
.h-repertorio .sec-head h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 500; letter-spacing: -.02em; }
.h-repertorio .jornal-card__tag { color: var(--text-muted); }

/* ── 6 · CONVITE (~40vh banda fina, zero urgência) ──────────────────────── */
.h-convite { background: var(--gray-50); }
.h-convite__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.h-convite h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 12px; }
.h-convite .lead { max-width: 52ch; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — REFINO ANTI-LINEARIDADE (devices do Parque Una/Idealiza, na paleta CDJ)
   O sintoma de "cara de IA" era ritmo repetido: 6 seções iguais (eyebrow→h2→lead),
   todas centradas na mesma largura, nada sangrando, nada sobrepondo.
   Quebras: bloco escuro com bleed · citação sobreposta · grid irregular ·
   seção que abre sem eyebrow.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── MÉTODO — QUEBRA: lavagem TEAL sobre cream + foto sangrando à direita ───
   Sem .wrap: o grid vai de borda a borda e a foto encosta na direita da viewport.
   O bloco era escuro; virou cream lavado de teal. A quebra continua existindo —
   ela agora é de TEMPERATURA (frio contra o cream neutro das vizinhas) e de
   sangria, não de claro-escuro. */
.h-metodo { padding-block: 0; overflow: hidden;
  background:
    radial-gradient(110% 96% at 8% 0%, color-mix(in srgb, var(--teal) 11%, var(--cream)) 0%, rgba(244, 239, 228, 0) 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--teal) 5%, var(--cream)) 0%, var(--cream) 100%); }
.h-metodo__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.h-metodo__body { padding: clamp(56px, 8vw, 130px) clamp(24px, 5vw, 84px) clamp(56px, 8vw, 130px) max(var(--pad-x), calc((100vw - var(--wrap)) / 2)); }
.h-metodo__body .eyebrow { color: var(--teal-strong); }
.h-metodo__body h2 { font-size: clamp(28px, 3.7vw, 46px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; margin: 14px 0 18px; }
.h-metodo__body .lead { max-width: 48ch; }
.h-metodo__foto { margin: 0; height: 100%; min-height: clamp(360px, 46vw, 660px); }
/* eixos sobre a lavagem teal: os fios ganham o próprio tom, não o cinza neutro */
.h-metodo .h-eixos { margin-top: 34px; }
.h-metodo .h-eixos li { border-top-color: color-mix(in srgb, var(--teal) 22%, transparent); }
.h-metodo .h-eixos li:last-child { border-bottom-color: color-mix(in srgb, var(--teal) 22%, transparent); }
.link-gold { color: var(--gold-hot); text-decoration: none; font-size: 14px; display: inline-block; margin-top: 26px;
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-aldora); }
.link-gold:hover { border-bottom-color: var(--gold-hot); }
/* CONTRASTE — o gold-hot foi desenhado pra fundo escuro. Sobre cream ele dá 1,97:1
   e reprova até no limite de texto grande (3:1). Nas seções que ficaram claras o
   link e o contador vão no COPPER: 4,96:1, passa em corpo de texto, e é a cor de
   ênfase já travada no site. (No escuro que sobrou — a galeria e a citação teal —
   o gold-hot continua, que é onde ele funciona.) */
.h-metodo .link-gold, .h-vista .link-gold { color: var(--copper); }
.h-metodo .link-gold:hover, .h-vista .link-gold:hover { border-bottom-color: var(--copper); }
.h-metodo .h-eixos li::before { color: var(--copper); }
@media (max-width: 860px) {
  .h-metodo__grid { grid-template-columns: 1fr; }
  .h-metodo__body { padding: clamp(48px, 9vw, 80px) var(--pad-x); }
  .h-metodo__foto { min-height: 320px; }
}

/* ── 3 · REGIÃO — QUEBRA: citação SOBREPONDO a banda ───────────────────────
   O gesto mais forte do Parque Una (card de cor invadindo a foto), aqui em teal CDJ. */
.h-regiao__head h2 { font-size: clamp(36px, 4.6vw, 59px); font-weight: 500; letter-spacing: -.03em;
  line-height: 1.0; margin: clamp(16px, 2vw, 24px) 0 0; text-wrap: balance; }
.h-regiao__cena { position: relative; margin-bottom: clamp(56px, 7vw, 96px); }
.h-regiao__cena .h-regiao__banda { margin-bottom: 0; }
.h-citacao { position: absolute; left: var(--banda-x); bottom: clamp(-40px, -3vw, -28px);
  width: min(460px, 76vw); margin: 0; padding: clamp(26px, 3vw, 40px); background: var(--teal-deep); }
.h-citacao p { color: var(--cream); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; margin: 0; }
.h-citacao p::before { content: '“'; color: var(--gold-hot); font-size: 2.6em; line-height: 0; vertical-align: -.32em; margin-right: .06em; }
.h-citacao footer { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(var(--cream-rgb), .18); }
/* avatar: o monograma fica por baixo. Se a foto não existir (ou falhar), o
   onerror remove o <img> e sobra o monograma — nunca um ícone quebrado. */
.h-citacao__foto { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--cream) 13%, var(--teal-deep));
  border: 1px solid rgba(var(--cream-rgb), .16); }
.h-citacao__foto::before { content: attr(data-ini); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: rgba(var(--cream-rgb), .58); }
.h-citacao__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-citacao footer span { display: grid; gap: 2px; font-size: 12px; color: rgba(var(--cream-rgb), .62); }
.h-citacao footer b { font-size: 13.5px; font-weight: 500; color: var(--cream); }
@media (max-width: 860px) {
  .h-citacao { position: static; width: auto; margin: -28px var(--pad-x) 0; }
}

/* ── 4 · JARDINS — QUEBRA: ritmo irregular (2 grandes + 2 menores) ─────────
   Sai o grid 4× igual; entra assimetria com alturas alternadas. */
/* mesma banda editorial das outras seções */
.h-regiao__inner { width: min(calc(var(--wrap) + 130px), calc(100% - var(--pad-x) * 2)); margin-inline: auto; }

/* LINHA DO TEMPO — os quatro Jardins são 12 anos de entrega, e a fileira solta não
   dizia isso. Um fio atravessa a série e os clusters marcam os intervalos: mesmo
   motivo de ligação do mosaico e das quadras do Vista. O ritmo irregular fica —
   grandes nas pontas são a abertura e o fecho da região.
   TODOS os itens com endereço explícito: fio e marcos têm grid-area, e card sem
   endereço no meio disso cai pra linha 2 (erro que já me pegou três vezes hoje). */
.h-jardins { position: relative; grid-template-columns: 1.35fr 1fr 1fr 1.35fr; align-items: end; }
.h-jardim--1 { grid-area: 1 / 1 / 2 / 2; }
.h-jardim--2 { grid-area: 1 / 2 / 2 / 3; }
.h-jardim--3 { grid-area: 1 / 3 / 2 / 4; }
.h-jardim--4 { grid-area: 1 / 4 / 2 / 5; }
.h-jardim { position: relative; z-index: 1; }
.h-jardim--grande .h-jardim__img img { aspect-ratio: 3 / 4; }     /* retrato = mais alto */
.h-jardim:not(.h-jardim--grande) { padding-bottom: clamp(16px, 2.4vw, 34px); }  /* desalinha a base */
.h-jardim time { color: var(--text-muted); }

/* Sem fio nem marcos aqui: a passagem do tempo é contada pela animação
   (js/home-motion.js), não por elemento gráfico. Um motivo repetido em três
   seções deixa de ser motivo. */

.h-regiao__nota { margin-top: 18px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 760px) { .h-jardins { grid-template-columns: repeat(2, 1fr); } }
/* mapa: texto + mapa animado lado a lado */
.h-mapa { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(56px, 8vw, 110px); }
.h-mapa__body h3 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 500; letter-spacing: -.02em; line-height: 1.14; margin: 12px 0 16px; }
.h-mapa__body p { color: var(--text-secondary); max-width: 46ch; }
.h-mapa__body em { font-style: normal; color: var(--copper); }
.h-mapa__body .link-teal { display: inline-block; margin-top: 20px; }
@media (max-width: 860px) { .h-mapa { grid-template-columns: 1fr; } }

/* ── 4 · AL'DORA ────────────────────────────────────────────────────────────
   MORTO REMOVIDO: aqui vivia a versão anterior da seção (full-bleed escuro com
   .h-aldora__bg / __inner / __mix / __cta). Nenhuma dessas classes existe mais no
   HTML — mas o `.h-aldora::after` era um PSEUDO-elemento, então continuava
   renderizando um scrim `rgba(13,17,23,.92)` por cima da seção inteira. Com a
   seção em cream isso deixava o painel de texto preto com texto ink em cima:
   ilegível. Classe órfã some sozinha; pseudo-elemento órfão não.
   O que sobrou é só o que o HTML usa. */
.h-aldora__ghost { border-color: color-mix(in srgb, var(--mogno) 34%, transparent); color: var(--mogno); }
.h-aldora__ghost:hover { border-color: var(--mogno); background: color-mix(in srgb, var(--mogno) 6%, transparent); }

/* ── 5 · REPERTÓRIO ─────────────────────────────────────────────────────── */
.h-repertorio .sec-head h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 500; letter-spacing: -.02em; }
.h-repertorio .jornal-card__tag { color: var(--text-muted); }

/* ── 6 · CONVITE (~40vh banda fina, zero urgência) ──────────────────────── */
.h-convite { background: var(--gray-50); }
.h-convite__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.h-convite h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 12px; }
.h-convite .lead { max-width: 52ch; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — REFINO ANTI-LINEARIDADE (devices do Parque Una/Idealiza, na paleta CDJ)
   O sintoma de "cara de IA" era ritmo repetido: 6 seções iguais (eyebrow→h2→lead),
   todas centradas na mesma largura, nada sangrando, nada sobrepondo.
   Quebras: bloco escuro com bleed · citação sobreposta · grid irregular ·
   seção que abre sem eyebrow.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── MÉTODO — QUEBRA: lavagem TEAL sobre cream + foto sangrando à direita ───
   Sem .wrap: o grid vai de borda a borda e a foto encosta na direita da viewport.
   O bloco era escuro; virou cream lavado de teal. A quebra continua existindo —
   ela agora é de TEMPERATURA (frio contra o cream neutro das vizinhas) e de
   sangria, não de claro-escuro. */
.h-metodo { padding-block: 0; overflow: hidden;
  background:
    radial-gradient(110% 96% at 8% 0%, color-mix(in srgb, var(--teal) 11%, var(--cream)) 0%, rgba(244, 239, 228, 0) 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--teal) 5%, var(--cream)) 0%, var(--cream) 100%); }
.h-metodo__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.h-metodo__body { padding: clamp(56px, 8vw, 130px) clamp(24px, 5vw, 84px) clamp(56px, 8vw, 130px) max(var(--pad-x), calc((100vw - var(--wrap)) / 2)); }
.h-metodo__body .eyebrow { color: var(--teal-strong); }
.h-metodo__body h2 { font-size: clamp(28px, 3.7vw, 46px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; margin: 14px 0 18px; }
.h-metodo__body .lead { max-width: 48ch; }
.h-metodo__foto { margin: 0; height: 100%; min-height: clamp(360px, 46vw, 660px); }
/* eixos sobre a lavagem teal: os fios ganham o próprio tom, não o cinza neutro */
.h-metodo .h-eixos { margin-top: 34px; }
.h-metodo .h-eixos li { border-top-color: color-mix(in srgb, var(--teal) 22%, transparent); }
.h-metodo .h-eixos li:last-child { border-bottom-color: color-mix(in srgb, var(--teal) 22%, transparent); }
.link-gold { color: var(--gold-hot); text-decoration: none; font-size: 14px; display: inline-block; margin-top: 26px;
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-aldora); }
.link-gold:hover { border-bottom-color: var(--gold-hot); }
/* CONTRASTE — o gold-hot foi desenhado pra fundo escuro. Sobre cream ele dá 1,97:1
   e reprova até no limite de texto grande (3:1). Nas seções que ficaram claras o
   link e o contador vão no COPPER: 4,96:1, passa em corpo de texto, e é a cor de
   ênfase já travada no site. (No escuro que sobrou — a galeria e a citação teal —
   o gold-hot continua, que é onde ele funciona.) */
.h-metodo .link-gold, .h-vista .link-gold { color: var(--copper); }
.h-metodo .link-gold:hover, .h-vista .link-gold:hover { border-bottom-color: var(--copper); }
.h-metodo .h-eixos li::before { color: var(--copper); }
@media (max-width: 860px) {
  .h-metodo__grid { grid-template-columns: 1fr; }
  .h-metodo__body { padding: clamp(48px, 9vw, 80px) var(--pad-x); }
  .h-metodo__foto { min-height: 320px; }
}

/* ── 3 · REGIÃO — QUEBRA: citação SOBREPONDO a banda ───────────────────────
   O gesto mais forte do Parque Una (card de cor invadindo a foto), aqui em teal CDJ. */
.h-regiao__head h2 { font-size: clamp(36px, 4.6vw, 59px); font-weight: 500; letter-spacing: -.03em;
  line-height: 1.0; margin: clamp(16px, 2vw, 24px) 0 0; text-wrap: balance; }
.h-regiao__cena { position: relative; margin-bottom: clamp(56px, 7vw, 96px); }
.h-regiao__cena .h-regiao__banda { margin-bottom: 0; }
.h-citacao { position: absolute; left: var(--banda-x); bottom: clamp(-40px, -3vw, -28px);
  width: min(460px, 76vw); margin: 0; padding: clamp(26px, 3vw, 40px); background: var(--teal-deep); }
.h-citacao p { color: var(--cream); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; margin: 0; }
.h-citacao p::before { content: '“'; color: var(--gold-hot); font-size: 2.6em; line-height: 0; vertical-align: -.32em; margin-right: .06em; }
.h-citacao footer { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(var(--cream-rgb), .18); }
/* avatar: o monograma fica por baixo. Se a foto não existir (ou falhar), o
   onerror remove o <img> e sobra o monograma — nunca um ícone quebrado. */
.h-citacao__foto { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--cream) 13%, var(--teal-deep));
  border: 1px solid rgba(var(--cream-rgb), .16); }
.h-citacao__foto::before { content: attr(data-ini); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: rgba(var(--cream-rgb), .58); }
.h-citacao__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-citacao footer span { display: grid; gap: 2px; font-size: 12px; color: rgba(var(--cream-rgb), .62); }
.h-citacao footer b { font-size: 13.5px; font-weight: 500; color: var(--cream); }
@media (max-width: 860px) {
  .h-citacao { position: static; width: auto; margin: -28px var(--pad-x) 0; }
}

/* ── 4 · JARDINS — QUEBRA: ritmo irregular (2 grandes + 2 menores) ─────────
   Sai o grid 4× igual; entra assimetria com alturas alternadas. */
/* mesma banda editorial das outras seções */
.h-regiao__inner { width: min(calc(var(--wrap) + 130px), calc(100% - var(--pad-x) * 2)); margin-inline: auto; }

/* LINHA DO TEMPO — os quatro Jardins são 12 anos de entrega, e a fileira solta não
   dizia isso. Um fio atravessa a série e os clusters marcam os intervalos: mesmo
   motivo de ligação do mosaico e das quadras do Vista. O ritmo irregular fica —
   grandes nas pontas são a abertura e o fecho da região.
   TODOS os itens com endereço explícito: fio e marcos têm grid-area, e card sem
   endereço no meio disso cai pra linha 2 (erro que já me pegou três vezes hoje). */
.h-jardins { position: relative; grid-template-columns: 1.35fr 1fr 1fr 1.35fr; align-items: end; }
.h-jardim--1 { grid-area: 1 / 1 / 2 / 2; }
.h-jardim--2 { grid-area: 1 / 2 / 2 / 3; }
.h-jardim--3 { grid-area: 1 / 3 / 2 / 4; }
.h-jardim--4 { grid-area: 1 / 4 / 2 / 5; }
.h-jardim { position: relative; z-index: 1; }
.h-jardim--grande .h-jardim__img img { aspect-ratio: 3 / 4; }     /* retrato = mais alto */
.h-jardim:not(.h-jardim--grande) { padding-bottom: clamp(16px, 2.4vw, 34px); }  /* desalinha a base */
.h-jardim time { color: var(--text-muted); }

/* o fio passa na altura em que os cards menores se apoiam */
@media (max-width: 760px) {
  .h-jardins { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .h-jardim--grande .h-jardim__img img { aspect-ratio: 4 / 3; }
  .h-jardim:not(.h-jardim--grande) { padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REGIÃO · CITAÇÃO → CONSOLIDAÇÃO  (redesenho ago/2026)
   Barcelona*, Roma*, Gênova* (FGR) viram uma fileira de CITAÇÃO — frames
   pequenos, a referência que abriu o chão. O Jardim Versailles (CDJ) fecha a
   seção como FAIXA full-bleed: a escala salta de três placas para um banner
   cinematográfico, e é esse salto que conta a maturação da região.
   Classes NOVAS de propósito: a .h-jardim antiga vive em três camadas de CSS
   (2170/2289/2415) e reescrevê-la por fatia engole regra vizinha. Aqui é aditivo.
   ═════════════════════════════════════════════════════════════════════════ */
/* MOSAICO DOS ANTECEDENTES — mesmo design system do mosaico de produtos AL'DORA
   (.h-produtos), em versão MENOR e COPPER: placa escura, fotos justas dimadas que
   acendem no hover, e os CLUSTERS conectores (o quadrado da marca em miúdo)
   ligando as três placas nas emendas — aqui no copper da ênfase, não no teal. */
.h-jardins-cite { position: relative; margin: clamp(30px, 3.6vw, 52px) 0 0;
  display: grid; grid-template-columns: 1.12fr 1fr 1.12fr;
  grid-template-rows: clamp(200px, 24vw, 340px);
  gap: clamp(8px, 1vw, 14px); background: var(--dark);
  padding: clamp(8px, 1vw, 14px); border-radius: var(--card-radius);
  border: var(--float-border-dark); box-shadow: var(--float-shadow-dark); }
/* container-type: cada card vira sua PRÓPRIA referência de largura — o rótulo abaixo
   escala pelo tamanho real do card, não pelo viewport. Importa porque em 520px o
   grid colapsa de 3 pra 1 coluna: o card TRIPLICA de largura na hora, mas um
   tamanho em vw mal se move nesse mesmo intervalo — o rótulo ficava desproporcional
   logo após o corte. Fallback em vw (abaixo) cobre browser sem suporte. */
.h-cite { position: relative; display: block; overflow: hidden; text-decoration: none;
  background: var(--dark); container-type: inline-size; }
.h-cite--1 { grid-area: 1 / 1 / 2 / 2; }
.h-cite--2 { grid-area: 1 / 2 / 2 / 3; }
.h-cite--3 { grid-area: 1 / 3 / 2 / 4; }
.h-cite__img { display: block; width: 100%; height: 100%; overflow: hidden; }
.h-cite__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82;
  transition: transform 1s var(--ease-aldora), opacity .6s; }
.h-cite:hover .h-cite__img img { transform: scale(1.05); opacity: 1; }
/* legenda sobre a foto — mesmo lugar e scrim do .h-prod__tag */
.h-cite__tag { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 2px;
  padding: clamp(22px, 2.4vw, 34px) clamp(14px, 1.6vw, 20px) clamp(12px, 1.4vw, 18px);
  background: linear-gradient(0deg, rgba(9, 12, 16, .74) 0%, rgba(9, 12, 16, 0) 100%); }
.h-cite__tag b { font-size: clamp(15px, 1.5vw, 19px); font-weight: 500; letter-spacing: -.01em; color: var(--cream); }
.h-cite__tag small { font-size: 11.5px; letter-spacing: .1em; color: rgba(var(--cream-rgb), .62); font-variant-numeric: tabular-nums; }
.h-cite__tag .drop-star { color: var(--gold-hot); margin-right: .1em; }
/* progressive enhancement: mesmos valores visuais de hoje no layout 3-col (a conta
   foi feita pra bater), mas agora seguindo a largura do CARD — resiliente a 3/2/1
   colunas sem precisar de um breakpoint por combinação de grid. */
@supports (container-type: inline-size) {
  .h-cite__tag { padding: clamp(22px, 8cqw, 34px) clamp(14px, 5.3cqw, 20px) clamp(12px, 4.6cqw, 18px); }
  .h-cite__tag b { font-size: clamp(15px, 4.4cqw, 19px); }
}

/* CLUSTERS CONECTORES — copper (não teal), ligando as três nas emendas.
   Mesmo motivo do .h-conector: retângulos de tamanhos variados, arranjo próprio
   por emenda, ancorados na linha do grid e recuados metade da largura (centro do vão). */
.h-cite-liga { pointer-events: none; z-index: 3; justify-self: start; align-self: center;
  display: flex; align-items: center; gap: clamp(5px, .6vw, 9px); }
.h-cite-liga i { display: block; border-radius: 3px;
  background: linear-gradient(140deg, #C57F42, #8B4512);
  box-shadow: 0 6px 16px -5px rgba(0, 0, 0, .82); }
.h-cite-liga--1 { grid-area: 1 / 2 / 2 / 3; transform: translate(-50%, -78%); }
.h-cite-liga--1 i:nth-child(1) { width: clamp(24px, 2.7vw, 42px); height: clamp(10px, 1.1vw, 17px); opacity: .5; }
.h-cite-liga--1 i:nth-child(2) { width: clamp(50px, 5.6vw, 88px); height: clamp(14px, 1.5vw, 23px); }
.h-cite-liga--1 i:nth-child(3) { width: clamp(16px, 1.8vw, 27px); height: clamp(10px, 1.1vw, 17px); opacity: .72; }
.h-cite-liga--2 { grid-area: 1 / 3 / 2 / 4; transform: translate(-50%, 92%); }
.h-cite-liga--2 i:nth-child(1) { width: clamp(18px, 2vw, 30px); height: clamp(10px, 1.1vw, 17px); opacity: .62; }
.h-cite-liga--2 i:nth-child(2) { width: clamp(42px, 4.7vw, 74px); height: clamp(12px, 1.3vw, 20px); }
.h-cite-liga--2 i:nth-child(3) { width: clamp(28px, 3.1vw, 50px); height: clamp(9px, 1vw, 14px); opacity: .42; }

/* FAIXA VERSAILLES — full-bleed, clona a mecânica do banner do Vista: a figura
   sangra a seção, o texto ink pousa numa placa com véu cream DIRECIONAL (nunca
   caixa central). O parallax de scrub entra pela lista MEDIA do home-motion.js;
   a folga de altura (124%/-12%) vem da regra PARALLAX DE MÍDIA (.h-versailles lá). */
.h-versailles { margin: clamp(44px, 5.4vw, 88px) 0 0; min-height: clamp(460px, 76vh, 800px);
  display: flex; align-items: flex-end; border-block: var(--float-border); box-shadow: var(--banda-sombra); }
.h-versailles > img { object-position: 50% 46%; }
.h-versailles::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(16deg, rgba(var(--cream-rgb), .97) 2%, rgba(var(--cream-rgb), .88) 26%, rgba(var(--cream-rgb), .3) 54%, rgba(var(--cream-rgb), 0) 74%),
    linear-gradient(180deg, rgba(var(--cream-rgb), .28) 0%, rgba(var(--cream-rgb), 0) 22%, rgba(var(--cream-rgb), 0) 46%, rgba(var(--cream-rgb), .5) 84%, var(--cream) 100%); }
.h-versailles__txt { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0;
  padding: 0 var(--pad-x) clamp(44px, 6vw, 84px) max(var(--pad-x), calc((100vw - var(--wrap)) / 2)); }
.h-versailles__txt .eyebrow { color: var(--teal-strong); }
.h-versailles__txt h3 { font-size: clamp(30px, 4.6vw, 56px); font-weight: 500; letter-spacing: -.025em;
  line-height: 1.04; margin: 14px 0 16px; max-width: 15ch; text-wrap: balance; }
.h-versailles__txt .lead { max-width: 54ch; margin: 0 0 24px; line-height: 1.5; }
/* hierarquia das palavras-chave: ênfase copper peso 500 (a cor vem do .h-regiao em) */
.h-versailles__txt .lead em { font-weight: 500; }
.h-versailles__txt .link-teal { display: inline-block; }

@media (max-width: 520px) {
  .h-jardins-cite { grid-template-columns: 1fr; grid-template-rows: none; gap: 8px; padding: 8px; }
  .h-cite--1, .h-cite--2, .h-cite--3 { grid-area: auto; }
  .h-cite__img { height: auto; aspect-ratio: 16 / 10; }
  .h-cite-liga { display: none; }
  .h-versailles { min-height: clamp(380px, 62vh, 520px); }
  .h-versailles::after { background:
      linear-gradient(180deg, rgba(var(--cream-rgb), .26) 0%, rgba(var(--cream-rgb), 0) 30%, rgba(var(--cream-rgb), .92) 74%, var(--cream) 100%); }
}

/* ── REGIÃO · o zoom em três escalas (funil do book: cidade → zona → região) ───── */
.h-escalas { list-style: none; counter-reset: esc; margin: clamp(34px, 4vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 34px); }
.h-escalas li { counter-increment: esc; padding-top: 20px; border-top: 2px solid var(--teal); }
.h-escalas li:nth-child(2) { border-top-color: color-mix(in srgb, var(--teal) 60%, var(--cream)); }
.h-escalas li:nth-child(3) { border-top-color: var(--gold-hot); }
.h-escalas b { display: block; font-size: clamp(15px, 1.5vw, 19px); font-weight: 500; margin-bottom: 6px; }
.h-escalas span { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
@media (max-width: 760px) { .h-escalas { grid-template-columns: 1fr; gap: 18px; } }

/* ── 4 · AL'DORA — topo: o mapa humanizado em ZOOM DE DETALHE ─────────────────
   O recorte (img já cortada em 1900×1520) cai no corredor ENTRE os dois loteamentos
   coloridos: aparece ~20% deles, o suficiente pra ver que o desenho é vivo e longe
   de entregar o masterplan. Tratamento translúcido e delicado, não banner cheio:
   multiply sobre o cream apaga o papel branco e deixa só o traço; o véu de gradiente
   dissolve as bordas (nunca uma caixa — regra da casa) e a borda direita entrega
   o desenho ao painel escuro, sem emenda visível. */
/* O capítulo AL'DORA era o pico ESCURO da página. Virou o pico QUENTE: cream
   lavado de mogno. O mapa translúcido já vivia em cream — agora a seção inteira
   concorda com ele, e o desenho deixa de morrer numa borda preta. */
.h-aldora { display: block; min-height: 0; padding-block: 0;
  background:
    radial-gradient(104% 92% at 88% 4%, color-mix(in srgb, var(--mogno) 10%, var(--cream)) 0%, rgba(244, 239, 228, 0) 62%),
    linear-gradient(180deg, var(--cream) 0%, color-mix(in srgb, var(--mogno) 6%, var(--cream)) 100%); }
/* MESMA LINGUAGEM DA GALERIA: duas placas separadas por um vão, cada uma com
   raio, borda e sombra, e o cluster de retângulos atravessando a emenda. Antes o
   mapa se DISSOLVIA num gradiente até virar o painel — o que fazia dos dois uma
   coisa só e destoava do mosaico logo abaixo. Aqui eles são peças do mesmo jogo. */
.h-aldora__topo { position: relative; display: grid; grid-template-columns: 1.25fr .75fr;
  align-items: stretch; gap: clamp(9px, 1vw, 16px); padding: clamp(9px, 1vw, 16px);
  background: var(--dark); }
/* posições EXPLÍCITAS: o conector tem grid-column fixa, e sem endereço fixo nas
   placas o auto-placement dava a coluna 2 pra ele e jogava o painel pra linha 2.
   Mesmo tropeço da galeria — span/posição fixa e auto-placement não se misturam. */
.h-aldora__mapa  { grid-area: 1 / 1 / 2 / 2; }
.h-aldora__intro { grid-area: 1 / 2 / 2 / 3; }
.h-aldora__mapa { position: relative; isolation: isolate; margin: 0; overflow: hidden;
  min-height: clamp(380px, 52vw, 720px); background: var(--cream);
  border-radius: var(--card-radius); border: var(--float-border); box-shadow: var(--float-shadow); }
/* Só o TRATAMENTO aqui. Tamanho e posição são do bloco PARALLAX DE MÍDIA lá em
   cima — esta regra tem a MESMA especificidade dele (uma classe + um tipo) e vem
   depois no arquivo, então quando declarava width/height ela vencia por ordem de
   fonte e anulava a folga do parallax: a imagem voltava a 100% e o scrub abriria
   tarja na borda. Não redeclarar dimensão aqui. */
.h-aldora__mapa img { object-position: 50% 50%;
  mix-blend-mode: multiply;                 /* papel branco some no cream; sobra o desenho */
  opacity: .58;                             /* translúcido */
  filter: saturate(.74) contrast(.93); }    /* delicado — a cor não pode berrar */
.h-aldora__mapa::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--cream) 0%, rgba(var(--cream-rgb), 0) 26%, rgba(var(--cream-rgb), 0) 74%, var(--cream) 100%),
    linear-gradient(180deg, var(--cream) 0%, rgba(var(--cream-rgb), 0) 24%, rgba(var(--cream-rgb), 0) 78%, var(--cream) 100%); }
/* O painel de texto é o bloco TEAL do capítulo: dá fundo próprio ao texto (que
   sobre o desenho translúcido ficava sem apoio) e devolve à página a única cor de
   marca cheia fora dos elementos flutuantes. O desenho do mapa se dissolve dentro
   dele, então não há emenda entre os dois. */
.h-aldora__intro { display: flex; flex-direction: column; justify-content: center;
  /* Profundidade escolhida por CONTRASTE, não por gosto: o gold-hot do eyebrow e do
     link precisa de 4,5:1 (texto pequeno). Sobre teal a 82% ele dá 4,03:1 e reprova;
     a partir de ~74% passa. O gradiente vai de 70% a 56%, então o pior ponto do
     painel ainda entrega 4,80:1. */
  background: linear-gradient(152deg, var(--teal-deep) 0%, color-mix(in srgb, var(--teal) 56%, black) 100%);
  border-radius: var(--card-radius); border: var(--float-border-dark); box-shadow: var(--float-shadow-lift);
  padding: clamp(40px, 5vw, 76px) clamp(30px, 4vw, 62px); }
.h-aldora__intro .eyebrow { color: var(--gold-hot); }
.h-aldora__intro h2 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; margin: 14px 0 18px; color: var(--cream); }
.h-aldora__intro .lead { color: rgba(var(--cream-rgb), .74); max-width: 46ch; }
.h-aldora__intro .link-gold { color: var(--gold-hot); }
.h-aldora__intro .link-gold:hover { border-bottom-color: var(--gold-hot); }
@media (max-width: 860px) {
  .h-aldora__topo { grid-template-columns: 1fr; }
  .h-aldora__mapa { min-height: 300px; }
  .h-conector--e { display: none; }   /* empilhado, a emenda é horizontal: o cluster só ruído */
  /* no empilhado o desenho entrega pra BAIXO (é de onde vem o painel de texto) */
  .h-aldora__mapa::after { background:
      linear-gradient(180deg, var(--cream) 0%, rgba(var(--cream-rgb), 0) 22%, rgba(var(--cream-rgb), 0) 78%, var(--cream) 100%); }
  .h-aldora__intro { padding: clamp(36px, 7vw, 56px) clamp(24px, 5vw, 40px); }
}

/* ── AL'DORA — GALERIA DE PRODUTOS (cada peça é um pedaço da cidade) ───────────
   Posições EXPLÍCITAS. Antes era auto-placement com `span`, e span num grid de 4
   colunas empurra o item pra próxima linha quando não cabe: sobravam células
   pretas no meio do mosaico. Agora cada produto tem endereço fixo — 4 colunas ×
   3 linhas, nada acidentalmente vazio. A única célula livre é escolhida, e é onde
   o mosaico respira. */
/* A galeria é a única faixa ESCURA que sobrou na página, encaixada dentro do
   capítulo cream do AL'DORA. É de propósito: sem ela a home fica com fundo (60%)
   e acento (10%) e nada no meio — é a camada intermediária que separa os capítulos
   e faz os renders saltarem. Full-bleed, pra ler como faixa e não como caixa. */
.h-produtos { position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(9px, 1vw, 16px); background: var(--dark); padding: clamp(9px, 1vw, 16px); }
.h-prod { position: relative; display: block; overflow: hidden; text-decoration: none; background: var(--dark); }
.h-prod img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s var(--ease-aldora), opacity .6s; opacity: .82; }
.h-prod:hover img { transform: scale(1.05); opacity: 1; }

/*  c1        c2          c3         c4
 r1 Towns ───────────┘  Vitta      Nexus
 r2 Park      Boulevard ───────────────┘
 r3 Jardim ──────────────────┘         respiro
   Linhas com ALTURA EXPLÍCITA. Sem isso a linha era ditada pelo aspecto natural
   da foto mais larga (o Boulevard esticava a faixa pra 600px) e as vizinhas
   viravam retratos extremos. Todos os renders são paisagem: nenhuma célula pode
   ser um retrato estreito, senão a imagem se perde no corte. */
.h-produtos { grid-template-rows: clamp(190px, 21vw, 316px) clamp(230px, 26vw, 386px) clamp(206px, 23vw, 340px); }
.h-prod--towns     { grid-area: 1 / 1 / 2 / 3; }   /* entrada: render largo, merece largura */
.h-prod--vitta     { grid-area: 1 / 3 / 2 / 4; }
.h-prod--nexus     { grid-area: 1 / 4 / 2 / 5; }
.h-prod--park      { grid-area: 2 / 1 / 3 / 2; }
.h-prod--boulevard { grid-area: 2 / 2 / 3 / 5; }   /* panorâmico: o eixo atravessa */
.h-prod--jardim    { grid-area: 3 / 1 / 4 / 4; }

/* O RESPIRO — a célula livre não é buraco, é onde a galeria assina o conjunto.
   O texto senta EMBAIXO, no mesmo lugar e com o mesmo respiro das legendas das
   fotos vizinhas: o bloco entra na fileira em vez de flutuar solto no meio dela.
   Hierarquia da casa: eyebrow com cor própria · frase-chave 1.0 · qualificador .6.
   A ênfase é de uma expressão só. Em fundo escuro ela vai no gold-hot (o copper
   da regra encardece contra o teal; o gold é o acento que o site já usa no escuro). */
.h-prod-placa { grid-area: 3 / 4 / 4 / 5; position: relative; }
.h-prod-placa > span { position: absolute; inset: 0; display: grid; align-content: end;
  gap: clamp(9px, 1vw, 14px); padding: clamp(18px, 2vw, 28px);
  border-radius: var(--card-radius); border: 1px solid rgba(var(--cream-rgb), .14);
  background: linear-gradient(142deg, var(--teal-strong) 0%, var(--teal-deep) 100%);
  box-shadow: var(--float-shadow-dark); overflow: hidden; }
.h-prod-placa > span::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 62% at 24% 14%, rgba(var(--cream-rgb), .15) 0%, transparent 64%); }
.h-prod-placa .eyebrow { position: relative; z-index: 1; color: var(--gold-hot); }
.h-prod-placa b { position: relative; z-index: 1; display: block; max-width: 15ch;
  font-size: clamp(17px, 1.85vw, 25px); font-weight: 500; letter-spacing: -.016em;
  line-height: 1.26; color: rgba(var(--cream-rgb), .6); text-wrap: balance; }
.h-prod-placa b em { font-style: normal; color: var(--cream); }

/* LIGAÇÃO ENTRE PRODUTOS — cluster de retângulos pequenos, de tamanhos variados,
   atravessando o vão entre duas fotos. É o motivo de quadrados da própria marca
   CDJ, em escala miúda: liga sem virar enfeite. Ancorado na LINHA do grid e
   recuado metade da largura, fica sempre centrado no vão em qualquer tela.
   Cada emenda tem seu próprio arranjo — dois clusters iguais viravam padrão,
   e padrão repetido lê como barra de progresso, não como marca. */
.h-conector { pointer-events: none; z-index: 3; justify-self: start;
  display: flex; align-items: center; gap: clamp(5px, .6vw, 9px); }
.h-conector i { display: block; border-radius: 3px;
  background: linear-gradient(140deg, var(--teal-strong), var(--teal-deep));
  box-shadow: 0 6px 16px -5px rgba(0, 0, 0, .82); }
.h-conector i:nth-child(1) { width: clamp(32px, 3.6vw, 55px);  height: clamp(11px, 1.2vw, 19px); opacity: .52; }
.h-conector i:nth-child(2) { width: clamp(64px, 7.2vw, 113px); height: clamp(16px, 1.75vw, 26px); }
.h-conector i:nth-child(3) { width: clamp(17px, 1.9vw, 29px);  height: clamp(11px, 1.2vw, 19px); opacity: .74; }
.h-conector i:nth-child(4) { width: clamp(40px, 4.5vw, 70px);  height: clamp(9px, 1vw, 15px);   opacity: .4; }
/* arranjos próprios por emenda */
.h-conector--d i:nth-child(1) { width: clamp(20px, 2.2vw, 34px); opacity: .66; }
.h-conector--d i:nth-child(2) { width: clamp(50px, 5.5vw, 85px); height: clamp(13px, 1.45vw, 22px); }
.h-conector--d i:nth-child(3) { width: clamp(35px, 3.9vw, 60px); height: clamp(9px, 1vw, 15px); opacity: .44; }
.h-conector--b i:nth-child(1) { width: clamp(44px, 4.9vw, 76px); height: clamp(10px, 1.1vw, 16px); opacity: .44; }
.h-conector--b i:nth-child(2) { width: clamp(26px, 2.9vw, 44px); height: clamp(16px, 1.75vw, 26px); opacity: 1; }
.h-conector--b i:nth-child(3) { width: clamp(58px, 6.5vw, 102px); height: clamp(11px, 1.2vw, 19px); opacity: .7; }
/* o cluster do respiro é o mais contido: ele encosta no bloco de texto teal */
.h-conector--c i:nth-child(1) { width: clamp(20px, 2.2vw, 34px); opacity: .46; }
.h-conector--c i:nth-child(2) { width: clamp(58px, 6.5vw, 100px); height: clamp(13px, 1.45vw, 22px); }
.h-conector--c i:nth-child(3) { width: clamp(22px, 2.5vw, 38px); height: clamp(16px, 1.75vw, 26px); opacity: .8; }
.h-conector--c i:nth-child(4) { width: clamp(18px, 2vw, 30px);   opacity: .5; }

.h-conector--a { grid-area: 1 / 3 / 2 / 4; align-self: center; transform: translate(-50%, -280%); } /* Towns │ Vitta — acima da legenda */
.h-conector--d { grid-area: 1 / 4 / 2 / 5; align-self: center; transform: translate(-50%, -90%); }  /* Vitta │ Nexus — acima da legenda, desencontrado do 'a' */
.h-conector--b { grid-area: 2 / 2 / 3 / 3; align-self: center; transform: translate(-50%, -40%); }  /* Park │ Boulevard — meio, longe da legenda */
/* no topo do AL'DORA o cluster nasce na linha entre as duas placas, no alto (o
   texto do painel é centrado, então a faixa de cima está livre) */
.h-conector--e { grid-area: 1 / 2 / 2 / 3; align-self: start; justify-self: start;
  margin-top: clamp(44px, 6vw, 104px); transform: translateX(-50%); }
.h-conector--e i:nth-child(1) { width: clamp(26px, 2.9vw, 45px); opacity: .5; }
.h-conector--e i:nth-child(2) { width: clamp(58px, 6.5vw, 102px); height: clamp(14px, 1.55vw, 24px); }
.h-conector--e i:nth-child(3) { width: clamp(30px, 3.4vw, 52px); height: clamp(9px, 1vw, 15px); opacity: .42; }
.h-conector--c { grid-area: 3 / 4 / 4 / 5; align-self: center; transform: translate(-50%, -340%); } /* Jardim │ ecossistema — sobe pra não encostar no eyebrow */

@media (max-width: 760px) {
  /* no empilhado 2×N o mosaico volta ao fluxo: as barras só fariam ruído */
  .h-produtos { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; gap: 8px; padding: 8px; }
  .h-prod--towns, .h-prod--park, .h-prod--vitta, .h-prod--nexus,
  .h-prod--boulevard, .h-prod--jardim { grid-area: auto; }
  .h-prod--boulevard, .h-prod--jardim { grid-column: span 2; }
  .h-prod img { min-height: 0; aspect-ratio: 4 / 3; }
  .h-prod--boulevard img, .h-prod--jardim img { aspect-ratio: 16 / 9; }
  .h-prod-placa, .h-conector { display: none; }
}

/* legenda: sempre legível sobre foto (gradiente direcional, nunca caixa central).
   Véu neutro, não colorido: a legenda está sobre a faixa escura e precisa sumir
   como sombra da foto — tingi-la de quente puxava atenção pro véu, não pro render. */
.h-prod__tag { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px;
  padding: clamp(18px, 2vw, 28px); color: var(--cream); font-size: 12px;
  background: linear-gradient(to top, rgba(13,17,23,.86), rgba(13,17,23,.34) 58%, transparent);
  opacity: .9; }
.h-prod__tag b { font-size: clamp(15px, 1.6vw, 20px); font-weight: 500; letter-spacing: -.01em; }
.h-prod:hover .h-prod__tag { opacity: 1; }

/* fecho do capítulo AL'DORA (as regras se perderam na reescrita da galeria) */
.h-aldora__fecho { display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap; padding-block: clamp(40px, 5vw, 72px); }
.h-aldora__fecho p { margin: 0; max-width: 48ch; font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.55; color: var(--text-secondary); }
/* hierarquia: setup no secundário, o PAYOFF (o gancho pro Vista) em copper 500 */
.h-aldora__fecho p em { font-style: normal; font-weight: 500; color: var(--copper); }

/* ── 4b · AL'DORA VISTA — o lançamento em destaque ────────────────────────────
   Continua o capítulo AL'DORA: o Vista é o primeiro capítulo dele a sair do papel,
   não um assunto novo. Banner alto → três quadras → fecho. Sem número, sem planta:
   o resumo dá vontade, a apresentação entrega.
   RESPIRO: fecha a lavagem mogno e devolve a página ao cream limpo, com folga
   generosa embaixo — é a pausa antes das Novidades. */
.h-vista { padding-bottom: clamp(80px, 9vw, 150px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mogno) 6%, var(--cream)) 0%, var(--cream) 46%); }

/* banner: a foto é o argumento. O véu é DIRECIONAL (só o canto do texto), nunca
   caixa central — a regra da casa vale igual, o que mudou é o sentido: em vez de
   escurecer pra receber texto cream, CLAREIA pra receber texto ink. Precisa ser
   opaco de verdade onde a palavra pousa, senão o miolo da foto come a leitura. */
.h-vista__banner { position: relative; margin: var(--banda-ar) 0; overflow: hidden;
  min-height: clamp(460px, 74vh, 780px); display: flex; align-items: flex-end;
  border-block: var(--float-border); box-shadow: var(--banda-sombra); }
.h-vista__banner img { object-position: 50% 42%; }
.h-vista__banner::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(16deg, rgba(var(--cream-rgb), .97) 2%, rgba(var(--cream-rgb), .88) 26%, rgba(var(--cream-rgb), .3) 54%, rgba(var(--cream-rgb), 0) 74%),
    linear-gradient(180deg, rgba(var(--cream-rgb), .28) 0%, rgba(var(--cream-rgb), 0) 22%, rgba(var(--cream-rgb), 0) 46%, rgba(var(--cream-rgb), .5) 84%, var(--cream) 100%); }
/* o texto agora vive DENTRO da placa: o padding é do próprio banner, não mais
   um cálculo pra alinhar com o wrap da página */
/* A MEDIDA VAI NOS FILHOS, NÃO NO CONTAINER. Este bloco tem padding-esquerdo que
   CRESCE com a viewport (pra alinhar com o wrap da página) e tinha `max-width: 62ch`
   junto: como box-sizing é border-box, o padding entra na conta do max-width. Em
   tela larga o padding sozinho passava dos 62ch e o texto era espremido num filete
   de uma palavra por linha. Container só posiciona; quem limita a linha é o h2 e o
   lead. `min-width: 0` porque item de flex não encolhe abaixo do min-content sem ele. */
.h-vista__txt { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0;
  padding: 0 var(--pad-x) clamp(44px, 6vw, 84px) max(var(--pad-x), calc((100vw - var(--wrap)) / 2)); }
.h-vista__txt .eyebrow { color: var(--mogno); }
.h-vista__txt h2 { font-size: clamp(32px, 5vw, 62px); font-weight: 500; letter-spacing: -.025em;
  line-height: 1.04; margin: 14px 0 18px; max-width: 15ch; text-wrap: balance; }
.h-vista__txt .lead { max-width: 50ch; }

/* AS TRÊS QUADRAS — uma SEQUÊNCIA, não três coisas iguais.
   Essenza começa, Reserva aprofunda, Jardim chega ao legado: a fileira uniforme
   não dizia nada disso. Elas descem em ESCADA, e a assimetria passa a codificar
   algo verdadeiro em vez de ser enfeite. Entre os degraus atravessam os clusters
   de retângulos — o mesmo motivo do mosaico de produtos, aqui literal: o fecho da
   seção fala do boulevard contínuo que costura as três.
   Plano de cor no GOLD, o quarto eixo da marca. Cada bloco da home fica com o seu:
   filme em copper, mapa em teal, quadras em gold. */
/* mesma banda editorial do resto da home — a galeria usava .wrap (1320px) e
   ficava 60px mais pra dentro que todas as outras seções */
.h-vista__quadras, .h-vista__fecho { width: min(calc(var(--wrap) + 130px), calc(100% - var(--pad-x) * 2));
  margin-inline: auto; }
.h-vista__quadras { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px); padding-block: clamp(44px, 5vw, 76px); align-items: start; }
.h-quadra--2 { margin-top: clamp(26px, 3.6vw, 60px); }
.h-quadra--3 { margin-top: clamp(52px, 7.2vw, 120px); }

/* o plano ancora o começo da sequência, atrás da primeira quadra */
.h-vista__plano { --desloc: clamp(18px, 2.8vw, 46px);
  grid-area: 1 / 1 / 2 / 2; position: relative; z-index: 0; align-self: start;
  width: 100%; aspect-ratio: 4 / 5;
  margin: calc(-1 * var(--desloc) * .55) 0 0 calc(-1 * var(--desloc));
  border-radius: var(--card-radius);
  background:
    radial-gradient(112% 84% at 14% 6%, rgba(255, 244, 214, .34) 0%, rgba(255, 244, 214, 0) 54%),
    radial-gradient(90% 70% at 92% 100%, rgba(58, 40, 10, .26) 0%, rgba(58, 40, 10, 0) 60%),
    linear-gradient(142deg, #D2B47E 0%, #BD9F6B 30%, #A98A52 64%, #977944 100%);
  box-shadow: 0 26px 60px -30px rgba(9, 12, 16, .32),
              inset 0 1px 0 rgba(255, 248, 226, .26); }
/* TODOS com endereço explícito. Plano e conectores têm grid-area; se as quadras
   ficarem no auto-placement, elas não acham célula livre na linha 1 e caem pra
   linha 2. Num grid, ou todo mundo tem endereço ou ninguém tem — é o mesmo
   tropeço da galeria de produtos e do topo do AL'DORA. */
.h-quadra { position: relative; z-index: 1; }
.h-quadra--1 { grid-area: 1 / 1 / 2 / 2; }
.h-quadra--2 { grid-area: 1 / 2 / 2 / 3; }
.h-quadra--3 { grid-area: 1 / 3 / 2 / 4; }

/* ligações entre as quadras: mesmo cluster do mosaico, ancorado na linha do grid */
.h-quadra-liga { pointer-events: none; z-index: 2; justify-self: start; align-self: start;
  display: flex; align-items: center; gap: clamp(4px, .45vw, 7px); transform: translate(-50%, 0); }
.h-quadra-liga i { display: block; border-radius: 3px;
  background: linear-gradient(140deg, var(--teal-strong), var(--teal-deep));
  box-shadow: 0 6px 16px -6px rgba(9, 12, 16, .5); }
.h-quadra-liga--1 { grid-area: 1 / 2 / 2 / 3; margin-top: clamp(14px, 1.9vw, 32px); }
.h-quadra-liga--2 { grid-area: 1 / 3 / 2 / 4; margin-top: clamp(40px, 5.5vw, 92px); }
.h-quadra-liga--1 i:nth-child(1) { width: clamp(26px, 2.9vw, 44px); height: clamp(9px, 1vw, 15px); opacity: .5; }
.h-quadra-liga--1 i:nth-child(2) { width: clamp(52px, 5.8vw, 90px); height: clamp(13px, 1.45vw, 22px); }
.h-quadra-liga--1 i:nth-child(3) { width: clamp(15px, 1.7vw, 26px); height: clamp(9px, 1vw, 15px); opacity: .72; }
.h-quadra-liga--2 i:nth-child(1) { width: clamp(17px, 1.9vw, 29px); height: clamp(9px, 1vw, 15px); opacity: .62; }
.h-quadra-liga--2 i:nth-child(2) { width: clamp(44px, 4.9vw, 76px); height: clamp(11px, 1.2vw, 19px); }
.h-quadra-liga--2 i:nth-child(3) { width: clamp(30px, 3.3vw, 52px); height: clamp(8px, .85vw, 13px); opacity: .42; }

@media (max-width: 860px) {
  .h-quadra--2, .h-quadra--3 { margin-top: 0; }
  .h-vista__plano, .h-quadra-liga { display: none; }
}
.h-quadra { display: block; text-decoration: none; color: inherit; }
.h-quadra__img { display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.h-quadra__img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease-aldora, cubic-bezier(.2,0,0,1)); }
.h-quadra:hover .h-quadra__img img { transform: scale(1.05); }
.h-quadra__cod { display: block; margin-top: 18px; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mogno); font-variant-numeric: tabular-nums; }
.h-quadra b { display: block; margin-top: 8px; font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 500; letter-spacing: -.015em; }
.h-quadra__frase { display: block; margin-top: 6px; font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.5; color: var(--text-secondary); }
.h-quadra:hover .h-quadra__img { box-shadow: var(--float-shadow-lift); }

/* fecho: a frase que segura o convite + as duas saídas */
/* FECHO em BANDA de 2 colunas — texto à esquerda, pilha de CTAs à direita. Aproveita
   a largura em vez de empilhar tudo num filete; a nota fica full-width embaixo. */
.h-vista__fecho { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: clamp(32px, 5vw, 88px); row-gap: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--line); padding-top: clamp(34px, 4vw, 56px); }
.h-vista__fecho-lead { grid-column: 1; grid-row: 1; margin: 0; max-width: 50ch;
  font-size: clamp(16px, 1.75vw, 21px); line-height: 1.55; color: var(--text-secondary); }
/* hierarquia: o payoff (o convite pra visita) em copper 500 */
.h-vista__fecho-lead em { font-style: normal; font-weight: 500; color: var(--copper); }
.h-vista__cta { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.h-vista__nota { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: 62ch; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 760px) {
  .h-vista__fecho { grid-template-columns: 1fr; }
  /* ⚠ armadilha de grid da casa, de novo: mudar SÓ o grid-column e herdar o
     grid-row:1 da regra base punha o CTA na MESMA célula do lead (col1/row1) —
     botão flutuando POR CIMA do parágrafo (visto em iPad mini, 744px). Na
     versão 1-coluna, TODAS as posições explícitas viram auto (ordem do fonte). */
  .h-vista__fecho-lead, .h-vista__cta, .h-vista__nota { grid-column: 1; grid-row: auto; }
  .h-vista__cta { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}

@media (max-width: 860px) {
  .h-vista__banner { min-height: clamp(400px, 62vh, 560px); }
  .h-vista__banner::after { background:
      linear-gradient(180deg, rgba(var(--cream-rgb), .26) 0%, rgba(var(--cream-rgb), 0) 34%, rgba(var(--cream-rgb), .9) 76%, var(--cream) 100%); }
  .h-vista__quadras { grid-template-columns: 1fr; gap: 30px; }
  .h-quadra__img { aspect-ratio: 16 / 10; }
}

/* ── FUNIL DE ZOOM · Brasil → Uberlândia → Zona Sul → Região ───────────────────
   Cada escala aperta o foco. O contador (01·o país … 04·a região) é informação real:
   diz ao leitor onde ele está no zoom — não é ornamento. */
/* As escalas 02 e 03 usavam .wrap (1320px) enquanto a faixa de abertura e a 01
   usam wrap+130 — 60px de diferença no x do título, visível ao rolar de uma pra
   outra. Mesma banda nas quatro. */
.h-escala__sobre { width: min(calc(var(--wrap) + 130px), calc(100% - var(--pad-x) * 2));
  margin-inline: auto; }

/* ESCADA DE QUATRO DEGRAUS — a mesma das outras seções da home. Vale pras TRÊS
   escalas do funil (país · cidade · zona), não só pra uma: aplicar em uma só
   recria a inconsistência que a escada existe pra resolver. É contraste de
   ESCALA fazendo o trabalho — a casa usa uma família de fonte só. */
/* CONTRASTE: o contador vive sobre CREAM (01·país … 04·região). O gold-hot foi
   desenhado pra fundo escuro e sobre cream dá 1,97:1 — reprova até no limite de
   texto grande. Vai no copper (4,96:1), que é a ênfase travada do site e o mesmo
   fix já aplicado nos números dos eixos do Método. */
.h-escala__num { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.h-escala h2 { font-size: clamp(36px, 4.6vw, 59px); font-weight: 500; letter-spacing: -.03em;
  line-height: 1.0; margin: clamp(16px, 2vw, 24px) 0 0; text-wrap: balance; }
.h-escala .lead { max-width: 56ch; }
.h-escala__lead { position: relative; margin: clamp(22px, 2.8vw, 34px) 0 0; padding-top: clamp(20px, 2.4vw, 30px);
  max-width: 30ch; font-size: clamp(1.1rem, 1.45vw, 1.34rem); line-height: 1.46;
  letter-spacing: -.005em; color: rgba(var(--ink-rgb), .86); }
.h-escala__lead::before { content: ''; position: absolute; top: 0; left: 0; width: clamp(48px, 6vw, 84px);
  height: 1px; background: color-mix(in srgb, var(--teal) 42%, transparent); }
.h-escala__sub { margin: clamp(12px, 1.4vw, 18px) 0 0; max-width: 46ch;
  font-size: clamp(.94rem, 1.1vw, 1.02rem); line-height: 1.76; color: rgba(var(--ink-rgb), .58); }
.h-escala em { font-style: normal; color: var(--copper); }

/* 01 · BRASIL — texto + mapa animado lado a lado */
/* ── 01 · O PAÍS — mesma gramática da faixa de abertura ─────────────────────
   Proporção: o mapa é o argumento, então fica com a fatia maior e a faixa é mais
   larga que o wrap padrão (igual à seção do filme). Hierarquia: a mesma escada de
   quatro degraus — eyebrow miúdo · título grande e apertado · fio de corte ·
   lead a .86 e detalhe a .58, com a ênfase em copper no meio do texto. */
/* Coluna de texto com largura FIXA e o mapa levando todo o resto: com duas
   frações o mapa encolhia junto com a tela mesmo tendo espaço. A largura da faixa
   é a MESMA da seção do filme, então as duas colunas de texto começam no mesmo x
   — era isso que estava desalinhado entre as seções. */
.h-escala--brasil .h-escala__grid { width: min(calc(var(--wrap) + 130px), calc(100% - var(--pad-x) * 2));
  margin-inline: auto; display: grid; grid-template-columns: minmax(0, 27rem) 1fr;
  gap: clamp(24px, 3.4vw, 54px); align-items: center; }
.h-escala--brasil .h-escala__body { max-width: 31rem; }

/* PLANO TEAL + PLACA DO MAPA — mesmo conceito do filme, invertido de lado.
   A placa é OPACA de propósito: o mapa passou a ser desenhado em mogno, e mogno
   sobre teal dá 1,21:1 — sumiria. Sobre cream dá 7,49:1. Então o teal só aparece
   na borda que escapa, e o mapa vive na sua própria placa clara. */
.h-mapa-fig { position: relative; margin: 0; isolation: isolate; }
.h-mapa-fig__plano { --desloc: clamp(20px, 3.2vw, 56px);
  position: absolute; z-index: 0; width: 92%; height: 92%;
  left: calc(-1 * var(--desloc)); top: calc(-1 * var(--desloc) * .58);
  border-radius: var(--card-radius);
  background:
    radial-gradient(112% 84% at 14% 6%, rgba(190, 232, 240, .26) 0%, rgba(190, 232, 240, 0) 54%),
    radial-gradient(90% 70% at 92% 100%, rgba(4, 24, 32, .38) 0%, rgba(4, 24, 32, 0) 60%),
    linear-gradient(218deg, #2F7A90 0%, #245F73 30%, #1B4A5B 62%, #143845 100%);
  box-shadow: 0 26px 60px -30px rgba(9, 12, 16, .38),
              inset 0 1px 0 rgba(214, 240, 246, .18); }
@media (max-width: 860px) { .h-escala--brasil .h-escala__grid { grid-template-columns: 1fr; } }

/* 02 · UBERLÂNDIA — foto larga em cima, texto embaixo (inverte o ritmo do Brasil) */
/* BANDAS FLUTUANTES — antes sangravam de borda a borda. Agora recuam, ganham
   raio, borda fina e sombra grande: a mesma gramática dos cards e da capa do
   filme. A página inteira passa a ser feita de placas sobre o cream. */
.h-escala--cidade { padding-block: 0; }
.h-escala__foto { margin: var(--banda-ar) 0; height: clamp(280px, 44vw, 560px);
  border-block: var(--float-border); box-shadow: var(--banda-sombra); }
.h-escala__sobre { padding-block: clamp(44px, 6vw, 88px); }

/* 03 · ZONA SUL — banda + citação sobreposta, texto DEPOIS (mais uma inversão) */
.h-escala--zona { padding-block: 0; background: var(--gray-50); }
.h-escala__cena { position: relative; }
.h-escala__banda { margin: var(--banda-ar) 0; height: clamp(420px, 68vw, 860px);
  border-block: var(--float-border); box-shadow: var(--banda-sombra); }
.h-escala--zona .h-escala__sobre { padding-top: clamp(56px, 7vw, 96px); }
@media (max-width: 860px) { .h-escala--zona .h-escala__sobre { padding-top: clamp(40px, 8vw, 64px); } }

/* a região herda o mesmo contador */
.h-regiao__head .h-escala__num { margin-bottom: 0; }
.h-regiao__head { margin-bottom: clamp(40px, 5vw, 72px); }
.h-regiao em { font-style: normal; color: var(--copper); }

/* ═══════════════════════════════════════════════════════════════════════════
   FLUTUAÇÃO DAS FAIXAS (ago/2026, direção do user)
   TODAS as bandas da home — fotos E banners (Vista, Versailles) — seguem o
   MESMO modelo: full-bleed de borda a borda, flutuando só no TOPO e na BASE
   (sombra dupla no --banda-sombra reforçado). Nada recua as laterais.
   Uberlândia, Zona Sul-foto e os banners Vista/Versailles já carregam
   border-block + --banda-sombra na própria regra; aqui só o Método passa a
   flutuar topo+base também (mantendo a sangria à direita). */
.h-metodo__foto { margin-block: var(--banda-ar); border-block: var(--float-border);
  box-shadow: var(--banda-sombra); }

/* ═══════════════════════════════════════════════════════════════════════════
   REPERTÓRIO — a cidade falando (redesenho ago/2026)
   Fica no FIM do arquivo: o `.h-repertorio` antigo está DUPLICADO no meio
   (2201 e 2327) e reescrever por fatia engole regra vizinha.
   Dois movimentos: editorial (destaque + rail) e o mosaico da cidade.
   Reusa a gramática do /novidades/ (.rep-kicker/.rep-hl/.rep-sublist) e o padrão
   de placa-entre-fotos do mosaico de produtos (.h-prod-placa).
   ═════════════════════════════════════════════════════════════════════════ */
.h-repertorio { padding-block: clamp(64px, 8vw, 120px) 0; }
.rep-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; max-width: none; }
.rep-head .eyebrow { color: var(--teal-strong); }
/* tier de FECHO na escala de títulos (as seções de pico vão a 52+) */
.rep-head h2 { margin: 8px 0 0; font-size: clamp(26px, 3.2vw, 38px); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.1; }

/* ── MOVIMENTO 1 · editorial: 1 destaque + rail, hairline entre eles ───────── */
.rep-home { display: grid; grid-template-columns: 1.72fr 1fr;
  gap: clamp(26px, 3.4vw, 56px); margin-top: clamp(34px, 4vw, 56px);
  border-top: 1px solid var(--line); padding-top: clamp(26px, 3vw, 44px); }
.rep-home__feat { display: block; text-decoration: none; color: inherit; }
.rep-home__feat .jornal-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--card-radius); border: var(--float-border);
  box-shadow: var(--float-shadow); margin-bottom: 18px; background: var(--gray-100); }
.rep-home__feat .jornal-card__img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ease-aldora); }
.rep-home__feat:hover .jornal-card__img img { transform: scale(1.04); }
.rep-home__feat:hover .jornal-card__img { box-shadow: var(--float-shadow-lift); }
.rep-home__feat .rep-hl--feat { margin-top: 10px; max-width: 20ch; text-wrap: balance; }
.rep-home__feat:hover .rep-hl { color: var(--teal-strong); }

/* rail: dois itens horizontais + o bloco de imprensa, separados por hairline */
.rep-home__rail { display: flex; flex-direction: column;
  border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 48px); }
.rep-home__item { display: grid; grid-template-columns: 116px 1fr; gap: 16px;
  align-items: center; text-decoration: none; color: inherit; padding-bottom: 20px; }
.rep-home__item + .rep-home__item { border-top: 1px solid var(--line); padding-top: 20px; }
.rep-home__item .jornal-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--card-radius); border: var(--float-border); background: var(--gray-100); }
.rep-home__item .jornal-card__img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease-aldora); }
.rep-home__item:hover .jornal-card__img img { transform: scale(1.05); }
.rep-home__item:hover .rep-hl { color: var(--teal-strong); }
.rep-home__item-txt { display: block; min-width: 0; }
.rep-home__item-txt .rep-hl { margin-top: 5px; }
/* imprensa: nomes em texto, nunca mural de logos (mais contido) */
.rep-home__imprensa { margin-top: auto; border-top: 1px solid var(--line); padding-top: 20px; }
.rep-home__imprensa .rep-sublist { margin-top: 10px; }
.rep-home__imprensa .rep-sublist b { font-weight: 500; color: var(--ink); margin-right: .4em; }

/* ── MOVIMENTO 2 · o mosaico da cidade (lugares em uso, não render) ───────── */
.rep-cidade { width: min(calc(var(--wrap) + 130px), calc(100% - var(--pad-x) * 2));
  margin: clamp(52px, 6vw, 92px) auto 0; padding-bottom: clamp(64px, 8vw, 120px); }
.rep-cidade__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: clamp(16px, 1.8vw, 24px); }
.rep-cidade__head .eyebrow { color: var(--teal-strong); }
.rep-mosaico { display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 14px); }
/* mesmo racional do .h-cite: o mosaico vai de 6→3→2 colunas (breakpoints 1024/520)
   e a largura do tile não anda proporcional ao viewport nesses saltos — container
   query deixa o conteúdo da placa de voz seguir o tile de verdade. */
.rep-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--card-radius); border: var(--float-border);
  box-shadow: var(--float-shadow); background: var(--gray-100); container-type: inline-size; }
.rep-tile img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92;
  transition: transform 1s var(--ease-aldora), opacity .6s; }
.rep-tile:hover img { transform: scale(1.06); opacity: 1; }
/* a placa de voz: mesmo material da placa do ecossistema no mosaico de produtos */
.rep-tile--voz { border-color: rgba(var(--cream-rgb), .14); box-shadow: var(--float-shadow-dark);
  background: linear-gradient(142deg, var(--teal-strong) 0%, var(--teal-deep) 100%); }
.rep-tile--voz::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 62% at 24% 14%, rgba(var(--cream-rgb), .15) 0%, transparent 64%); }
.rep-tile--voz > span { position: absolute; inset: 0; display: grid; align-content: end;
  gap: clamp(8px, .9vw, 12px); padding: clamp(14px, 1.5vw, 22px); }
.rep-tile--voz .eyebrow { position: relative; z-index: 1; color: var(--gold-hot); }
.rep-tile--voz b { position: relative; z-index: 1; display: block; font-weight: 500;
  font-size: clamp(13px, 1.15vw, 16px); letter-spacing: -.012em; line-height: 1.32;
  color: rgba(var(--cream-rgb), .6); text-wrap: balance; }
.rep-tile--voz b em { font-style: normal; color: var(--cream); }
@supports (container-type: inline-size) {
  .rep-tile--voz > span { gap: clamp(8px, 4cqw, 12px); padding: clamp(14px, 7.5cqw, 22px); }
  .rep-tile--voz b { font-size: clamp(13px, 7.4cqw, 16px); }
}

@media (max-width: 1024px) {
  .rep-mosaico { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .rep-home { grid-template-columns: 1fr; gap: 28px; }
  .rep-home__rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .rep-home__imprensa { margin-top: 24px; }
}
@media (max-width: 520px) {
  .rep-head { flex-direction: column; align-items: flex-start; }
  .rep-mosaico { grid-template-columns: repeat(2, 1fr); }
  .rep-home__item { grid-template-columns: 96px 1fr; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AL'DORA ESSENZA — faixa de lançamento (copper)
   O copper é a cor da quadra (eco do abre-capítulo do book, imagem de referência
   do user). A planta humanizada derrete no copper (multiply + véu), o lockup e o
   copy pousam sobre ela. Cream fade no topo/base pra derreter na página.
   ═════════════════════════════════════════════════════════════════════════ */
/* .h-essenza-slide vive DENTRO do .hero__slide (posição absolute + flex align-center
   vêm de lá). Aqui só o copper + o clip. */
.h-essenza-slide { overflow: hidden; isolation: isolate;
  /* MESMA superfície da faixa do filme (.h-filme__plano): orange FLUIDO, não chapado —
     a mesma cor percorrendo uma escala de luminância, com um brilho quente entrando por
     um canto e a sombra fechando no oposto (leitura de metal e couro, não de tinta).
     Menos sólido, mais elegante e suave. O canto brilhante mora ACIMA do lockup; sob o
     texto a escala já é meio-tom, preservando a leitura do cream. */
  background:
    radial-gradient(122% 92% at 16% 0%, rgba(255, 226, 190, .24) 0%, rgba(255, 226, 190, 0) 56%),
    radial-gradient(92% 78% at 2% 104%, rgba(58, 24, 6, .30) 0%, rgba(58, 24, 6, 0) 62%),
    linear-gradient(142deg, #C57F42 0%, #B16C3A 26%, #9A5624 56%, #8B4512 78%, #6D3410 100%); }
/* sem véu cream — o banner fica no gradiente copper fluido, edge-to-edge */

/* a FOTO dos lotes ocupa o painel DIREITO, edge-to-edge, clara (não fantasma) —
   enquadrada nos lotes demarcados + horizonte de Uberlândia ao amanhecer.
   EMENDA IMPERCEPTÍVEL: em vez de pintar um fade copper POR CIMA da foto (uma cor
   chapada nunca casa com um gradiente diagonal de 5 stops — nasce a banda vertical),
   a MÁSCARA de alpha dissolve a própria foto: o que aparece por trás é o MESMO
   gradiente fluido do slide. Não há emenda porque os dois lados são a mesma superfície. */
.h-essenza__plan { position: absolute; z-index: 0; margin: 0; inset: 0 0 0 auto;
  width: clamp(44%, 50vw, 54%); height: 100%; overflow: hidden;
  /* faixa de fusão ESTREITA (como a referência): o dissolve acontece nos primeiros
     ~20% do painel e a foto abre limpa dali em diante — a fusão não avança na foto. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 20%); }
.h-essenza__plan img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  display: block; }
/* véu copper mínimo SÓ na zona de fusão: casa a temperatura do céu (azul frio) com o
   metal antes de a foto abrir limpa. Fade um pouco mais longo que a máscara pra não criar degrau. */
.h-essenza__plan::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(139, 69, 18, .42) 0%, rgba(139, 69, 18, .12) 16%, rgba(139, 69, 18, 0) 28%); }

.h-essenza__inner { position: relative; z-index: 3; width: 100%;
  padding: clamp(56px, 8vw, 110px) var(--pad-x) clamp(56px, 8vw, 110px)
           max(var(--pad-x), calc((100vw - var(--wrap)) / 2)); }
/* eyebrow + lockup = uma unidade (rótulo do lançamento + a marca). Sem a margem
   genérica do .eyebrow, o "O LANÇAMENTO" cola na marca em vez de flutuar 53px acima. */
.h-essenza-slide .eyebrow { color: var(--gold-hot); margin: 0; }
/* lockup em TEXTO VIVO: Adore (Didone) + sublabel Inter tracked. inline-flex
   shrink-wrap → o ESSENZA centraliza sob a largura real do AL'DORA. */
.h-essenza__lockup { display: flex; flex-direction: column; align-items: center;
  width: max-content; /* shrink-wrap na largura do AL'DORA, em linha própria */
  /* sublabel COLADO na marca (a caixa da Adore já traz o respiro do descendente);
     o ar maior fica DEPOIS do lockup — a unidade marca+sublabel se separa do lead. */
  gap: clamp(2px, .35vw, 5px); margin: clamp(16px, 1.8vw, 22px) 0 clamp(28px, 3.2vw, 36px); }
/* AL'DORA = logo oficial (kerning do vetor, igual ao slide AL'DORA do hero). Largura
   no peso do lockup anterior (~300px no desktop). */
.h-essenza__wm-logo { display: block; width: clamp(196px, 24vw, 310px); height: auto;
  aspect-ratio: 5.362 / 1; }
.h-essenza__wm-sub { font-family: var(--sans); font-weight: 300;
  font-size: clamp(13px, 1.4vw, 18px); line-height: 1; color: rgba(var(--cream-rgb), .92);
  letter-spacing: .52em; margin-right: -.52em; }
.h-essenza__lead { max-width: 26ch; margin: 0; font-size: clamp(20px, 2.05vw, 27px);
  font-weight: 500; line-height: 1.26; letter-spacing: -.015em; color: var(--cream);
  font-variant-numeric: tabular-nums; }
/* HOME hero — slide AL'DORA: o h1 de texto vira a LOGO OFICIAL (mesma do hero da
   página AL'DORA, aldora-wordmark-cream.svg — kerning do vetor da marca). Tamanho no
   peso visual do h1 do hero (~52px de presença), não no do flagship (460px lá). O
   drop-shadow substitui o text-shadow do h1, que não pega em <img>. */
.hero__title--logo { margin: 0 0 clamp(22px, 3.5vh, 34px); line-height: 1; }
.hero__title--logo img { display: block; width: clamp(200px, 25vw, 320px); height: auto;
  aspect-ratio: 5.362 / 1; filter: drop-shadow(0 4px 24px rgba(9, 12, 16, .45)); }

/* tag qualifica o lead: colada nele (gap curto), com a mesma medida curta pra não
   varrer a largura toda do painel. */
.h-essenza__tag { max-width: 34ch; margin: clamp(9px, 1.1vw, 13px) 0 clamp(26px, 3vw, 32px);
  font-style: normal;
  font-size: clamp(14px, 1.5vw, 18px); color: rgba(var(--cream-rgb), .72); }
/* CTA = .btn--ghost-light do DS (contorno cream sobre escuro). Só reforço a borda
   pra ter presença de lançamento sem virar botão sólido fora do sistema. */
.h-essenza__cta { border-color: rgba(var(--cream-rgb), .78); }
.h-essenza__cta:hover { border-color: var(--cream); background: rgba(var(--cream-rgb), .14); }

@media (max-width: 860px) {
  /* VERSÃO RETRATO do design ORIGINAL (decisão do user, ago/2026): o banner tem
     VERSÕES por formato e a responsividade chama cada uma — nunca "foto de fundo
     com texto por cima". Esta é a mesma composição do desktop girada 90°:
       · painel copper com TODO o texto (topo)   — texto sempre sobre gradiente
       · foto LIMPA e opaca (base)               — nenhum scrim por cima
       · a mesma emenda de dissolve entre os dois (vertical lá, horizontal aqui) */
  .h-essenza-slide { align-items: flex-start; }
  .h-essenza__plan { inset: auto 0 0 0; width: 100%; top: auto; transform: none; opacity: 1;
    height: clamp(240px, 44%, 430px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 24%); }
  /* o recorte da foto no formato faixa: prioriza os LOTES demarcados e o skyline
     (o meio da imagem), não o céu — o céu já é insinuado pela zona do dissolve */
  .h-essenza__plan img { object-position: center 62%; }
  /* sem texto sobre a foto = sem escurecimento nenhum; a foto abre limpa */
  .h-essenza__plan::after { content: none; }
  .h-essenza__inner { padding-top: calc(var(--header-h) + clamp(10px, 2.5vw, 22px));
    padding-bottom: 0; }
  .h-essenza__lead { max-width: 22ch; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDITORIA DS DE TEXTO (ago/2026) — escala de 3 tiers + tokens de opacidade.
   Teto da página = hero (52px). Pico narrativo 52 · apoio 42-46 · fecho 38.
   Corrige a INVERSÃO de hierarquia (h2 de 59-62px maiores que o h1 de 52) sem
   tocar nos blocos triplicados do meio do arquivo — só override no fim (regra
   da casa: reescrita por fatia engole regra vizinha).
   ═══════════════════════════════════════════════════════════════════════════ */
/* tier PICO (52px, empata com o teto do hero — nunca passa) */
.h-faixa h2, .h-escala h2, .h-regiao__head h2 { font-size: clamp(34px, 4.1vw, 52px); }
.h-vista__txt h2 { font-size: clamp(32px, 4.1vw, 52px); }
/* tier APOIO (42-46): um h3 nunca acima dos h2 — o do Versailles descia de 56 */
.h-versailles__txt h3 { font-size: clamp(28px, 3.4vw, 44px); }
/* tier FECHO (38): convite alinha com o Repertório */
.h-convite h2 { font-size: clamp(26px, 3.1vw, 38px); }

/* tokens de opacidade (coda .82 · lead .72 · note .65): a escada .86/.58 das
   faixas entra nos tokens — o lead-statement é coda (.82), o detalhe é note (.65) */
.h-faixa__lead, .h-escala__lead { color: rgba(var(--ink-rgb), .82); }
.h-escala__sub { color: rgba(var(--ink-rgb), .65); }

/* eyebrow SEMPRE no par semântico definido: teal sobre cream, gold sobre escuro.
   O mogno do Vista saía do par — entra no teal como as demais seções cream. */
.h-vista__txt .eyebrow { color: var(--teal-strong); }

/* seção ESCURA → ênfase gold-hot (o h-aldora ficou fora da lista da linha 244 e
   herdava copper sobre escuro: ~2:1, reprovado). Escopado ao INTRO/TOPO (escuros);
   o FECHO do aldora é claro e o copper lá está certo. */
.h-aldora__intro em, .h-aldora__topo em { color: var(--gold-hot); }
/* lead do intro entra no token .72 (estava .74, fora de token) */
.h-aldora__intro .lead { color: rgba(var(--cream-rgb), .72); }

/* Vista intro — escada em DOIS degraus (statement coda .82 + detalhe note .65),
   mesma gramática das faixas. Medida curta: o lead antigo varria ~65ch em 3 linhas
   chapadas; agora statement 30ch + detalhe 44ch, com UMA ênfase copper (a tese). */
.h-vista__lead { margin: clamp(18px, 2.2vw, 26px) 0 0; max-width: 30ch;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.42; letter-spacing: -.005em;
  color: rgba(var(--ink-rgb), .82); }
.h-vista__sub { margin: clamp(10px, 1.2vw, 14px) 0 0; max-width: 44ch;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7;
  color: rgba(var(--ink-rgb), .65); }

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS LEGAIS (privacidade · cookies · termos · acessibilidade)
   Leitura editorial: medida curta, hierarquia do DS, cream sólido. Neutras e
   sóbrias — instrumento jurídico, não peça de marketing.
   ═══════════════════════════════════════════════════════════════════════════ */
.legal { padding: clamp(130px, 15vw, 190px) 0 clamp(70px, 9vw, 120px); background: var(--cream); }
.legal__wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--pad-x); }
.legal__eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal-strong); margin-bottom: clamp(14px, 1.6vw, 20px); }
.legal__title { font-size: clamp(30px, 4.1vw, 46px); font-weight: 500; letter-spacing: -.02em;
  line-height: 1.06; color: var(--ink); margin: 0 0 clamp(10px, 1.4vw, 16px); text-wrap: balance; }
.legal__meta { font-size: 13.5px; color: rgba(var(--ink-rgb), .5); margin: 0 0 clamp(34px, 4vw, 52px);
  padding-bottom: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid rgba(var(--ink-rgb), .12); }
.legal__meta b { color: rgba(var(--ink-rgb), .72); font-weight: 600; }
/* âncora de placeholder — realça o que falta preencher */
.legal ins.ph { text-decoration: none; background: rgba(178, 108, 58, .14); color: var(--copper);
  font-weight: 600; padding: 0 .28em; border-radius: 3px; }
.legal h2 { font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  margin: clamp(38px, 4.4vw, 56px) 0 clamp(12px, 1.4vw, 16px); }
.legal h2 .legal__num { color: var(--copper); font-variant-numeric: tabular-nums; margin-right: .5em; }
.legal h3 { font-size: clamp(15.5px, 1.5vw, 17px); font-weight: 600; color: rgba(var(--ink-rgb), .82);
  margin: clamp(22px, 2.6vw, 30px) 0 clamp(8px, 1vw, 10px); }
.legal p, .legal li { font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.72;
  color: rgba(var(--ink-rgb), .78); margin: 0 0 clamp(12px, 1.4vw, 16px); }
.legal ul, .legal ol { margin: 0 0 clamp(14px, 1.6vw, 18px); padding-left: 1.35em; }
.legal li { margin-bottom: clamp(6px, .8vw, 9px); }
.legal li::marker { color: var(--copper); }
.legal a { color: var(--teal-strong); text-underline-offset: 2px; }
.legal strong { color: rgba(var(--ink-rgb), .9); font-weight: 600; }
.legal__toc { margin: 0 0 clamp(34px, 4vw, 48px); padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
  background: rgba(var(--ink-rgb), .035); border: 1px solid rgba(var(--ink-rgb), .1); border-radius: var(--card-radius); }
.legal__toc h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; color: rgba(var(--ink-rgb), .55); }
.legal__toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.legal__toc li { margin: 0 0 7px; font-size: 14px; }
.legal__note { margin-top: clamp(40px, 5vw, 64px); padding: clamp(18px, 2.2vw, 26px);
  background: rgba(31, 82, 99, .06); border-left: 3px solid var(--teal-strong); border-radius: 0 var(--card-radius) var(--card-radius) 0;
  font-size: 14px; color: rgba(var(--ink-rgb), .7); }
.legal__contact { margin-top: clamp(34px, 4vw, 48px); padding: clamp(22px, 2.6vw, 30px);
  background: var(--ink); color: var(--cream); border-radius: var(--card-radius); }
.legal__contact h2 { color: var(--cream); margin-top: 0; }
.legal__contact p { color: rgba(var(--cream-rgb), .8); }
.legal__contact a { color: var(--gold-hot); }
@media (max-width: 640px) { .legal__toc ol { columns: 1; } }

/* links legais no rodapé */
.footer-legal-links { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.footer-legal-links a { color: inherit; opacity: .82; text-underline-offset: 2px; }
.footer-legal-links a:hover { opacity: 1; color: var(--gold-hot); }

/* ═══════════════════════════════════════════════════════════════════
   FACADE DE MAPA — consentimento por embed (LGPD, js/mapa-consent.js)
   O iframe do Google só nasce no toque; até lá a capa é 100% local.
   A capa herda o TAMANHO que o iframe tinha em cada contexto, senão o
   layout pula quando o mapa entra no lugar dela.
   ═══════════════════════════════════════════════════════════════════ */
.mapa-consent { position: relative; display: grid; place-content: center; justify-items: center;
  gap: 10px; text-align: center; overflow: hidden; padding: 24px;
  background: radial-gradient(90% 72% at 50% 30%, color-mix(in srgb, var(--teal) 6%, var(--cream)) 0%, var(--cream) 74%); }
.contato-mapa .mapa-consent { height: clamp(280px, 42vw, 440px); }
/* nas páginas de empreendimento a MOLDURA (borda/raio/sombra) era do iframe;
   passa pra capa, e o raio alinha ao token da casa (era 6px avulso) */
.jsub-loc__geo .mapa-consent { aspect-ratio: 16 / 8; border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--card-radius); box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .35); }
.mapa-consent__btn { display: grid; justify-items: center; gap: 6px; padding: 18px 26px;
  background: none; border: 0; cursor: pointer; color: var(--teal-strong); font: inherit; }
.mapa-consent__btn svg { width: 34px; height: 34px; opacity: .85; }
.mapa-consent__btn b { font-size: 15px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); padding-bottom: 2px; }
.mapa-consent__btn:hover b { color: var(--teal-strong); border-bottom-color: var(--teal-strong); }
.mapa-consent__btn span { font-size: 12px; color: var(--text-muted); }
.mapa-consent__nota { font-size: 11.5px; color: var(--text-muted); text-underline-offset: 2px; }
/* iframe injetado preenche a capa; overrides vencem os seletores antigos por
   especificidade (3 classes > 1 classe), sem !important */
.mapa-consent iframe, .jsub-loc__geo .mapa-consent iframe, .contato-mapa .mapa-consent iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0;
  box-shadow: none; aspect-ratio: auto; display: block; }
/* rodapé variante .footer-bottom: a linha de links legais ocupa a largura toda,
   acima do © (o flex-wrap cuida da quebra) */
.footer-bottom .footer-legal-links { flex-basis: 100%; margin-bottom: 0; }

/* ═══ AVISO DE COOKIES (js/cookie-banner.js) — versão ALTO PADRÃO (ago/2026) ═══
   Barra-cartão HORIZONTAL no desktop (corpo à esquerda · ações à direita),
   cartão compacto de largura total no phone. Ancorado à ESQUERDA: a zona
   inferior-direita é do chat-widget, os dois nunca disputam. Radius 4px
   editorial, hairline, cream sólido — material de cartão da casa, não "popup". */
.cookie-aviso { position: fixed; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px);
  z-index: 90; width: min(880px, calc(100vw - 300px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(18px, 2vw, 24px) clamp(22px, 2.6vw, 32px);
  /* PADRÃO FLUTUANTE da casa: mesma borda/sombra dos cartões editoriais
     (--float-border 7% ink + --float-shadow-lift), não a --line dura de 12%.
     Cream sólido, radius 4px — cartão da casa flutuando, não popup de sistema. */
  background: var(--cream); border: var(--float-border); border-radius: var(--card-radius);
  box-shadow: var(--float-shadow-lift);
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-aldora), transform .6s var(--ease-aldora); }
.cookie-aviso.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cookie-aviso { transition: none; transform: none; } }
.cookie-aviso__titulo { margin: 0 0 5px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.cookie-aviso__texto { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(var(--ink-rgb), .72);
  text-wrap: pretty; max-width: 62ch; }
/* phone/tablet estreito: empilha — cartão de largura total, sem transform de centragem */
@media (max-width: 860px) {
  .cookie-aviso { grid-template-columns: 1fr; gap: 14px; align-items: stretch;
    left: 12px; right: 12px; width: auto; bottom: 12px; padding: 18px 18px 16px; }
  /* no mobile o aviso ocupa a largura toda do rodapé e o chat-widget flutua POR
     CIMA dele (cantos não são mais opostos). Enquanto o cliente decide os cookies,
     o chat dá um passo atrás — volta assim que ele escolhe (js remove a classe). */
  html.cookie-aviso-open .chat-widget { opacity: 0; pointer-events: none; transform: translateY(8px); }
}
.chat-widget { transition: opacity .4s var(--ease-aldora), transform .4s var(--ease-aldora); }
/* os DOIS botões idênticos — exigência da ANPD virando forma */
/* minmax(0,1fr): o 1fr puro é minmax(auto,1fr) e o min-content do rótulo mais
   longo alarga a coluna dele — as duas colunas saíam desiguais */
.cookie-aviso__acoes { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; }
/* botões = .btn--ghost CANÔNICO do DS (borda --line, tinta ink, hover teal) — sem
   override local de cor. Os DOIS iguais: exigência da ANPD (recusar com o mesmo
   destaque) alinhada ao padrão de botão da casa, não é decisão estética.
   NÃO tornar "Permitir tudo" o .btn--grad primário: aí o aceitar teria mais peso
   que o recusar = dark pattern reprovado pelo guia. width:100% porque .btn é
   inline-flex e ignoraria o stretch do grid (senão as colunas saem desiguais). */
.cookie-aviso__acoes .btn { width: 100%; font-size: 11px; padding: 13px 18px; justify-content: center;
  white-space: normal; line-height: 1.35; }
/* link inline no fim do texto (não mais um terceiro nível solto embaixo) */
.cookie-aviso__mais { font-size: inherit; color: var(--teal-strong);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
@media (max-width: 560px) { .cookie-aviso__acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .cookie-aviso__acoes { grid-template-columns: 1fr; } }

/* ═══ toggle granular de consentimento em /cookies/#preferencias ═══ */
.legal__pref { margin: 20px 0; padding: 18px 20px; background: var(--gray-50);
  border: 1px solid var(--line); border-radius: var(--card-radius); }
.legal__pref-item { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.legal__pref-item input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--teal-strong); flex: none; }
.legal__pref-item span { font-size: 14px; line-height: 1.55; color: rgba(var(--ink-rgb), .78); }
.legal__pref-item b { color: var(--ink); font-weight: 500; }

/* ═══ AUDITORIA DE RESPONSIVIDADE (ago/2026, varredura 20 páginas × viewports) ═══
   Achados reais em 320px e os fixes cirúrgicos. A regra de ouro dos banners
   foto+gradiente está documentada no bloco do Essenza (foto OPACA; gradiente só
   na emenda e na cama do texto — nunca opacity<1 na foto inteira). */
/* .btn tem white-space:nowrap (correto no desktop: rótulo de botão não quebra).
   Em phone estreito, label longo ("Esquecer minha escolha de mapas", "Conhecer o
   ecossistema AL'DORA") estourava a viewport — era ELE o scroll lateral de
   /novidades/ e /cookies/ em 320px. No phone o botão pode quebrar em 2 linhas
   (padding pill segura a forma); line-height acompanha. */
@media (max-width: 480px) {
  .btn { max-width: 100%; white-space: normal; line-height: 1.35; text-align: center; }
}
/* linha da newsletter (input + botão lado a lado) não tinha wrap: em 320px o
   botão saía da tela. Abaixo de 480 empilha. */
@media (max-width: 480px) {
  .rep-news__form { flex-wrap: wrap; }
  .rep-news__form .btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAIXA-PONTE — Região → Método (js: nenhum, só data-reveal do fx-ready)
   A Região prova o resultado (bairros que já existem); esta tira é a
   virada pra CAUSA — o método por trás. Full-bleed, teal cheio: depois de
   duas seções cream seguidas, a tira quebra o ritmo e prepara o pico
   escuro que vem no capítulo AL'DORA mais adiante. Contraste medido, não
   chutado: cream sobre --teal-deep dá 9,33:1. Ênfase por PESO, não cor —
   gold-hot aqui ficaria em ~4,1:1 (marginal pro corpo de texto).
   ═══════════════════════════════════════════════════════════════════ */
/* O vão morto (o padding-block de `section`, ~173px sob o Versailles) encolhe pra
   um fio: quem preenche o intervalo agora é a tira copper, não cream vazio. Um
   respiro fino sobra em cima pra o banner do Versailles continuar FLUTUANDO. */
.h-regiao { padding-bottom: clamp(26px, 3.2vw, 48px); }

/* Refeita (ESSENZA): a tira-ponte veste a MESMA superfície copper-fluido do
   lançamento AL'DORA ESSENZA — orange suave percorrendo uma escala de luminância,
   brilho quente fora de centro, sombra fechando no canto oposto (metal e couro, não
   tinta chapada). Ocupa o INTERVALO inteiro entre a Região e o Método. Fica
   FLUTUANTE como o banner do Versailles (border-block + banda-sombra), com um fio de
   cream separando as duas placas.
     - vertical, não diagonal: o texto centralizado cruza a largura toda, então o
       meio-tom precisa ser UNIFORME em x na linha do texto (uma diagonal deixaria a
       ponta esquerda clara e sem contraste). Topo claro → base escura; no centro
       vertical a cor é meio-tom parelho.
     - véu escuro radial na linha do texto: garante o contraste onde a leitura
       acontece, sem depender de o brilho nunca alcançar ali.
   Contraste medido em pixel real (não estimado): cream .92 ~4,8:1 sobre o meio-tom;
   ênfase no warm-light do próprio Essenza (#FFE2BE ~4,5:1), NÃO gold-hot (que sobre
   copper cai a ~2,4:1). */
.h-regiao__ponte { position: relative; margin: 0;
  padding: clamp(58px, 8.8vw, 128px) var(--pad-x);
  width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden;
  border-block: var(--float-border); box-shadow: var(--banda-sombra);
  background:
    radial-gradient(66% 108% at 50% 50%, rgba(45, 18, 4, .30) 0%, rgba(45, 18, 4, 0) 72%),
    radial-gradient(74% 128% at 84% 2%, rgba(255, 226, 190, .28) 0%, rgba(255, 226, 190, 0) 60%),
    radial-gradient(70% 120% at 6% 104%, rgba(58, 24, 6, .34) 0%, rgba(58, 24, 6, 0) 62%),
    linear-gradient(180deg, #BE7A3D 0%, #A85F2C 30%, #954F20 52%, #82400F 78%, #6D3410 100%);
  text-align: center; font-size: clamp(18px, 2.1vw, 24px); font-weight: 400;
  letter-spacing: -.005em; line-height: 1.4; color: rgba(var(--cream-rgb), .92); }
.h-regiao__ponte em { font-style: normal; font-weight: 600; color: #FFE2BE; }

/* ═══════════════════════════════════════════════════════════════════
   MÉTODO — hierarquia em dois degraus (era um <p class="lead"> só).
   Lead = a reformulação (síntese/manifesto); sub = o detalhe prático
   (os quatro eixos) — mesmo padrão de escada usado nas outras seções
   da home (h-faixa__lead/__sub, h-escala__lead/__sub).
   ═══════════════════════════════════════════════════════════════════ */
.h-metodo__lead { margin: 0; max-width: 46ch; font-size: clamp(1.14rem, 1.5vw, 1.38rem);
  font-weight: 400; line-height: 1.46; letter-spacing: -.005em; color: var(--ink); }
.h-metodo__sub { margin: 10px 0 0; max-width: 44ch; font-size: clamp(.96rem, 1.1vw, 1.05rem);
  line-height: 1.7; color: rgba(var(--ink-rgb), .6); }

/* ═══════════════════════════════════════════════════════════════════
   LEADCHAT — captação conversacional (js/chat-lead.js). Editorial, não "bolha SaaS":
   painel cream com cabeçalho teal-deep, acento gold, raio 4px (regra do site).
   Desktop: painel flutuante inferior-direito, página segue interativa (sem scrim).
   Mobile: bottom-sheet com scrim. ═════════════════════════════════════ */
.leadchat { position: fixed; inset: 0; z-index: 95; pointer-events: none;
  --lc-ease: cubic-bezier(.16, 1, .3, 1); }
.leadchat[hidden] { display: none; }
.leadchat__scrim { display: none; }

.leadchat__panel { pointer-events: auto; position: fixed; right: 22px; bottom: 22px;
  width: min(392px, 92vw); max-height: min(82vh, 680px); display: flex; flex-direction: column;
  background: var(--cream); color: var(--ink); border-radius: var(--card-radius);
  border: 1px solid rgba(var(--ink-rgb), .08);
  /* sombra em camadas com tinta ink (não cinza chapado) — material caro */
  box-shadow: 0 1px 1px rgba(9,12,16,.05), 0 4px 9px rgba(9,12,16,.06),
    0 12px 24px -6px rgba(9,12,16,.14), 0 34px 64px -26px rgba(9,12,16,.5);
  overflow: hidden; animation: leadchat-in .5s var(--lc-ease) both; }
@keyframes leadchat-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

.leadchat__stepwrap { display: flex; flex-direction: column; gap: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .leadchat__stepwrap { animation: leadchat-step-in .32s var(--ease-aldora) both; }
}
@keyframes leadchat-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.leadchat__head { position: relative; display: flex; align-items: center; gap: 9px;
  padding: 14px 14px 14px 16px; color: var(--cream);
  background: linear-gradient(180deg, var(--teal-strong) 0%, var(--teal-deep) 100%); }
/* hairline gold — a assinatura de luxo do topo */
.leadchat__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,106,.75) 20%, rgba(201,168,106,.95) 50%, rgba(201,168,106,.75) 80%, transparent); }
.leadchat__spark { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.leadchat__spark svg { width: 100%; height: 100%; display: block; }
.leadchat__brand { font-family: var(--serif, 'Adore', Georgia, serif); font-weight: 600;
  letter-spacing: .17em; font-size: 14px; }
.leadchat__status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.leadchat__status.is-on { color: var(--gold-hot); }
.leadchat__status.is-off { color: rgba(var(--cream-rgb), .62); }
/* dot de presença — sonar duplo desacelerado (fase deslocada = cobertura contínua) */
.leadchat__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.leadchat__status.is-on .leadchat__dot::before,
.leadchat__status.is-on .leadchat__dot::after { content: ''; position: absolute; inset: 0;
  border-radius: 50%; background: currentColor; animation: lc-ping 2.4s cubic-bezier(0,0,.2,1) infinite; }
.leadchat__status.is-on .leadchat__dot::after { animation-delay: 1.2s; }
@keyframes lc-ping { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
.leadchat__x { margin-left: 2px; background: none; border: 0; color: rgba(var(--cream-rgb), .78);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
  transition: color .2s, transform .35s var(--lc-ease); }
.leadchat__x:hover { color: var(--cream); transform: rotate(90deg); }

/* trilha de progresso — gold fino sob o cabeçalho, orienta os passos */
.leadchat__rail { height: 2px; background: rgba(var(--ink-rgb), .06); flex-shrink: 0; }
.leadchat__rail i { display: block; height: 100%; width: 12%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hot));
  box-shadow: 0 0 8px -1px rgba(201,168,106,.55); transition: width .55s var(--lc-ease); }

/* eyebrow editorial da abertura */
.leadchat__eyebrow { margin: 0 0 -4px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 600; color: var(--copper); }

.leadchat__body { position: relative; padding: 20px 18px 18px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 13px;
  background: radial-gradient(130% 72% at 90% 0%, rgba(201, 168, 106, .07), transparent 55%); }
.leadchat__bot { font-size: 15px; line-height: 1.55; color: var(--ink); }
.leadchat__bot b { font-weight: 600; }
.leadchat__q { margin: 2px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.35;
  letter-spacing: -.01em; color: var(--ink); }
.leadchat__opt { font-weight: 400; color: rgba(var(--ink-rgb), .5); }

.leadchat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* chips premium: entrada em stagger, hover que ESQUENTA pro gold, press tátil */
.leadchat__chip { font: inherit; font-size: 13.5px; font-weight: 500; padding: 10px 15px; cursor: pointer;
  color: var(--teal-deep); background: rgba(var(--cream-rgb), .55);
  border: 1px solid rgba(var(--teal-deep-rgb), .26); border-radius: 999px;
  opacity: 0; translate: 0 8px;
  animation: lc-chip-in .5s var(--lc-ease) forwards; animation-delay: calc(var(--i, 0) * 60ms + 150ms);
  transition: background .3s var(--lc-ease), border-color .3s var(--lc-ease), color .3s var(--lc-ease),
    transform .3s var(--lc-ease), box-shadow .3s var(--lc-ease); }
@keyframes lc-chip-in { to { opacity: 1; translate: 0 0; } }
.leadchat__chip:hover { border-color: var(--gold);
  background: color-mix(in srgb, var(--gold-hot) 14%, var(--cream));
  transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(var(--teal-deep-rgb), .4); }
.leadchat__chip:active { transform: translateY(0) scale(.98); }
.leadchat__chip:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }

.leadchat__in { font: inherit; font-size: 14.5px; width: 100%; padding: 11px 13px; color: var(--ink);
  background: rgba(var(--ink-rgb), .03); border: 1px solid rgba(var(--ink-rgb), .16);
  border-radius: var(--card-radius); transition: border-color .18s, box-shadow .18s; }
.leadchat__in::placeholder { color: rgba(var(--ink-rgb), .38); }
.leadchat__in:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-deep-rgb), .14); }
.leadchat__ta { resize: vertical; min-height: 46px; }

.leadchat__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px;
  line-height: 1.45; color: rgba(var(--ink-rgb), .7); }
.leadchat__consent a { color: var(--copper); text-decoration: underline; }
/* checkbox própria da marca — substitui o widget nativo do SO (que quebrava a linguagem
   quiet-luxury do painel): quadrado macio (--card-radius), hairline, preenche teal-deep
   com check em cream ao marcar, mesma curva de easing dos botões. */
.leadchat__consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 1px 0 0; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: var(--card-radius);
  border: 1.5px solid rgba(var(--ink-rgb), .28); background: var(--cream);
  cursor: pointer; position: relative;
  transition: background .22s var(--ease-aldora), border-color .22s var(--ease-aldora); }
.leadchat__consent input[type="checkbox"]:hover { border-color: rgba(var(--teal-deep-rgb), .55); }
.leadchat__consent input[type="checkbox"]:checked { background: var(--teal-deep); border-color: var(--teal-deep); }
.leadchat__consent input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.leadchat__consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.leadchat__actions { display: flex; gap: 8px; margin-top: 2px; }
/* Botões do widget = a MESMA família .btn--grad/.btn--ghost do site (pill, --btn-alpha
   translúcido, brilho de topo, glow no hover) — antes era um retângulo --card-radius
   chapado, fora do design system dos CTAs do resto do site. */
.leadchat__btn { position: relative; overflow: hidden; font: inherit; font-size: 14px; font-weight: 600;
  flex: 1; text-align: center; padding: 12px 18px; cursor: pointer; border-radius: 999px; border: 1px solid transparent;
  background: rgba(var(--teal-deep-rgb), var(--btn-alpha)); color: var(--cream); text-decoration: none; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .16);
  transition: background .3s var(--lc-ease), box-shadow .35s var(--lc-ease), transform .3s var(--lc-ease), opacity .18s; }
/* varredura de brilho gold (núcleo cream) — só no CTA primário, no hover */
.leadchat__btn:not(.is-ghost)::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(201,168,106,.3) 45%, rgba(244,239,228,.5) 50%, rgba(201,168,106,.3) 55%, transparent 68%);
  transform: translateX(-120%); transition: transform .9s var(--lc-ease); }
.leadchat__btn:not(.is-ghost):hover::after { transform: translateX(120%); }
.leadchat__btn:hover { background: var(--teal-strong); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), .22), 0 14px 30px -12px rgba(var(--teal-rgb), .55); }
.leadchat__btn:active { transform: translateY(0); }
.leadchat__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.leadchat__btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.leadchat__btn.is-ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; flex: 0 0 auto; }
.leadchat__btn.is-ghost:hover { border-color: var(--teal); color: var(--teal-strong); background: var(--teal-tint); transform: translateY(-2px); }

.leadchat__warn { margin: 0; font-size: 12.5px; color: var(--copper); }
.leadchat__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 560px) {
  .leadchat__scrim { display: block; pointer-events: auto; position: fixed; inset: 0;
    background: rgba(13, 17, 23, .34); animation: leadchat-fade .3s ease both; }
  .leadchat__panel { right: 0; left: 0; bottom: 0; width: 100%; max-height: 88vh;
    border-radius: 14px 14px 0 0; }
  @keyframes leadchat-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .leadchat__panel, .leadchat__stepwrap, .leadchat__chip { animation: none; }
  .leadchat__chip { opacity: 1; translate: none; }
  .leadchat__status.is-on .leadchat__dot::before,
  .leadchat__status.is-on .leadchat__dot::after { animation: none; }
  .leadchat__x, .leadchat__chip, .leadchat__btn, .leadchat__rail i, .leadchat__btn::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   NA IMPRENSA — clipping de matérias externas reais (página Novidades).
   Cards de texto (sem imagem de terceiro), radius 4px, veículo + data +
   manchete + resumo atribuído + link externo. ═══════════════════════ */
.rep-press { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.rep-press__item { display: flex; flex-direction: column; gap: 9px; padding: clamp(20px, 2vw, 28px);
  background: var(--cream); border: var(--float-border); border-radius: var(--card-radius);
  box-shadow: var(--float-shadow); text-decoration: none;
  transition: border-color .2s var(--ease-aldora), box-shadow .2s ease, transform .2s var(--ease-aldora); }
.rep-press__item:hover { border-color: rgba(var(--teal-deep-rgb), .38);
  box-shadow: 0 20px 44px -22px rgba(9, 12, 16, .3); transform: translateY(-2px); }
.rep-press__meta { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(var(--ink-rgb), .5); }
.rep-press__veiculo { color: var(--teal-strong); font-weight: 600; }
.rep-press__title { margin: 2px 0 0; font-size: clamp(1.02rem, 1.25vw, 1.17rem); font-weight: 600;
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.rep-press__dek { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(var(--ink-rgb), .64); flex: 1; }
.rep-press__cta { margin-top: 6px; font-size: .86rem; font-weight: 500; color: var(--teal-strong);
  transition: color .2s; }
.rep-press__item:hover .rep-press__cta { color: var(--copper); }
@media (max-width: 860px) { .rep-press { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   RENDER-AVISO — aviso legal "imagem conceitual" (js/render-aviso.js).
   UMA linha DISCRETA ABAIXO de cada galeria/render — nunca sobreposta na
   imagem, nunca repetida tile a tile. Legível (CDC art. 31 — ostensivo),
   mas em nível "meta" da hierarquia (opacidade .5). Cor adaptativa: o JS
   marca --light quando o fundo atrás é escuro. ═══════════════════════ */
.render-aviso { margin: clamp(9px, 1.1vw, 14px) 0 0; padding: 0 var(--pad-x);
  font-family: var(--sans); font-weight: 400; font-size: 11px; line-height: 1.45; letter-spacing: .01em;
  color: rgba(var(--ink-rgb), .45); text-wrap: pretty;
  grid-column: 1 / -1; }  /* rede: se cair num grid, ocupa a largura toda (nunca coluna estreita). Ignorado fora de grid. */
.render-aviso--light { color: rgba(var(--cream-rgb), .5); }
/* HERO full-bleed: crédito discreto no canto inferior-direito (não linha larga que
   vira quebra-molas logo abaixo do hero). Sombra curta pra legibilidade sobre o render. */
.render-aviso--corner { position: absolute; z-index: 4; right: clamp(14px, 3vw, 40px); bottom: clamp(10px, 1.6vw, 16px);
  margin: 0; padding: 0; max-width: 46ch; text-align: right; pointer-events: none;
  font-size: 10px; letter-spacing: .02em; color: rgba(var(--cream-rgb), .58);
  text-shadow: 0 1px 6px rgba(9, 12, 16, .6); }
@media (max-width: 640px) { .render-aviso--corner { display: none; } }
/* dentro de galeria full-bleed (mosaico da home) o container sangra além do wrap;
   alinha o aviso ao gutter de leitura */
/* galeria full-bleed (mosaico) → alinha o aviso ao gutter de leitura. Por CLASSE
   (--wrap, adicionada no JS) + os seletores '+' de fallback — assim não depende da
   adjacência imediata, que o climb (saída de grid/flex) pode mudar num refactor. */
.render-aviso--wrap, .h-produtos + .render-aviso, .prod-secao + .render-aviso { max-width: var(--wrap); margin-inline: auto;
  padding-inline: max(var(--pad-x), calc((100vw - var(--wrap)) / 2)); }
@media (max-width: 640px) { .render-aviso { font-size: 10px; } }