/* ==========================================================================
   Jamil Imóveis · Apresentação Institucional · site-v2 (2026-11-06)
   Tipografia: a dupla Bodoni Moda (serif) + Archivo (sans) foi REVOGADA
   pelo Chefe (brief desta tarefa, 06/11/2026 — "muda fonte, essa serifada
   ruim"). Zero serifa no site inteiro, nem display nem corpo. Inter/Roboto/
   Arial também proibidas (regra da casa, frontend-design + CLAUDE.md).

   FONTE ESCOLHIDA: Plus Jakarta Sans, instâncias ESTÁTICAS (.ttf) peso
   200-800 + itálicos. Grotesca geométrica-humanista premium.

   CORREÇÃO 06/11/2026 (reprovação do PDF v2): a variável PlusJakartaSans-VF
   .woff2 fazia o Chromium, ao exportar PDF, converter TODO o texto em
   fontes Type 3 (bitmap por glifo) — PDF não abre nem envia no WhatsApp.
   Troca para instâncias estáticas .ttf (mesmo acervo oficial, licença OFL)
   resolve na raiz: Skia embute CID TrueType de verdade. Ver regra da casa
   em reference_pdf-comprimir-antes-de-entregar.md.

   Benchmark ao vivo confirmado nesta sessão (curl direto no CSS publicado,
   06/11/2026):
   - povoaimoveis.com.br → index-CAAKuXd7.css: "Cormorant Garamond" +
     "Playfair Display" (serif/display) + "Inter" + "Montserrat" (sans/corpo).
   - jardins-co.com.br → wp-content/themes/jco/assets/css/style.css:
     "Saol Display Italic" (serif/display, paga) + "Scto Grotesk A"
     (sans/corpo, paga — família do universo Söhne/Suisse).
   Como serifa está banida e Inter/Roboto/Arial também, Plus Jakarta Sans
   foi escolhida por cobrir o mesmo registro de grotesca geométrica
   premium que Scto Grotesk A/Montserrat ocupam nas duas referências,
   com licença gratuita (as pagas das referências não servem aqui).
   Download: https://fonts.google.com/specimen/Plus+Jakarta+Sans
   (fonte original: https://github.com/tokotype/PlusJakartaSans)
   Licença: SIL Open Font License (OFL) 1.1 — gratuita para uso comercial,
   sem necessidade de atribuição, única restrição é não revender a fonte
   isolada sob outro nome. Texto integral em ../fonts/OFL-PlusJakartaSans.txt.

   Título e corpo usam a MESMA família (var(--serif) e var(--sans) abaixo
   apontam para o mesmo font-family) — hierarquia só por peso/tamanho:
   títulos em peso 650-800, corpo em 400-500 (contraste >=1.25x).
   Itálico de ênfase nos headlines usa o itálico variável da própria
   família (nunca serifado).
   Servida localmente · sem CDN. Paleta: ameixa escuro + dourado pontual.
   ========================================================================== */

/* ---- Fonte local (instâncias estáticas .ttf, SIL Open Font License) ---- */
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-ExtraLight.ttf") format("truetype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-ExtraLightItalic.ttf") format("truetype"); font-weight:200; font-style:italic; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-LightItalic.ttf") format("truetype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype"); font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("../fonts/PlusJakartaSans-ExtraBoldItalic.ttf") format("truetype"); font-weight:800; font-style:italic; font-display:swap; }

/* ---- Tokens ---- */
:root{
  --ameixa:        #2A1420;
  --ameixa-deep:   #1B0C13;
  --ameixa-mid:    #371A29;
  --dourado:       #B69763;
  --dourado-soft:  #CDB488;
  --creme:         #F4ECE2;
  --creme-muted:   #D9C9BA;
  --linha:         rgba(244,236,226,0.16);
  --linha-forte:   rgba(182,151,99,0.45);

  /* Família única: --serif e --sans resolvem para a mesma fonte de
     propósito (ver nota acima) — hierarquia nunca por família. */
  --serif: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --sans:  "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;
  --space-7: 10rem;

  --container: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  background:var(--ameixa);
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  margin:0;
  background:var(--ameixa);
  color:var(--creme);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
p, li, dt, dd, figcaption{ text-wrap:pretty; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--creme); color:var(--ameixa-deep);
  padding:.75rem 1.25rem; z-index:999; font-family:var(--sans); font-weight:600;
}
.skip-link:focus{ left:1rem; top:1rem; }

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

/* ---- Marca fixa discreta ----
   CORRIGIDO (06/11/2026): era uma barra full-width com o logo centralizado,
   que colidia direto com headline/numero centralizados sempre que o scroll
   parava com o topo da secao perto do topo da tela (confirmado em teste de
   scroll real, nao so em crop isolado). Trocado para selo de canto, sem
   barra de fundo — padrao Locomotive/Area17 de marca persistente durante
   o scroll: pequeno, no canto, nunca disputando o centro com o conteudo.

   site-v3 (06/11/2026) — recurso estrutural do benchmark 888 adaptado:
   "header fixo com leve blur translucido" (ver referencias-888-jamil/
   01-header-fixo-blur-translucido.png, so estrutura, zero cor/texto do 888).
   Mantido como selo de canto (nao barra full-width, por causa do bug acima)
   mas agora com backdrop-filter:blur + fundo ameixa translucido em vez do
   radial-gradient simples — mesmo principio de "vidro fosco sobre o fundo
   escuro", na paleta ameixa/dourado do Jamil.

   2a rodada (06/11/2026) — medido ao vivo no 888 (Playwright,
   getComputedStyle do <header> real): background rgba(32,32,29,.9) +
   backdrop-filter:blur(12px), fixo o tempo todo (nunca transparente, nunca
   some). Blur/opacidade do selo do Jamil aumentados para o mesmo nivel de
   presenca (ainda redondo/canto, nunca barra — regra travada acima). */
.site-mark{
  position:fixed; top:18px; left:18px; z-index:40;
  display:flex; align-items:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(20,8,14,.64);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(182,151,99,.3);
  box-shadow:0 4px 18px rgba(10,4,7,.35);
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease);
}
.site-mark.is-visible{ opacity:1; }
.site-mark__logo{
  width:30px; height:auto; margin:auto;
  filter:drop-shadow(0 1px 4px rgba(10,4,7,.8));
}
@media (max-width:600px){
  .site-mark{ top:13px; left:13px; width:36px; height:36px; }
  .site-mark__logo{ width:24px; }
}

/* ---- Tipografia base ---- */
.kicker{
  position:relative;
  text-align:center;
  padding-inline:clamp(44px,9vw,76px);
  font-family:var(--sans); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  font-size:clamp(.68rem,.6rem + .3vw,.85rem);
  color:var(--dourado-soft);
  text-wrap:balance;
}
.kicker::before,.kicker::after{
  content:""; position:absolute; top:50%; height:1px; width:clamp(20px,4vw,56px);
  transform:translateY(-50%);
}
.kicker::before{ left:0; background:linear-gradient(90deg, transparent, var(--linha-forte)); }
.kicker::after{ right:0; background:linear-gradient(90deg, var(--linha-forte), transparent); }
.kicker--left{ text-align:left; padding-inline-start:clamp(44px,9vw,76px); padding-inline-end:0; margin-inline:0; max-width:none; }
.kicker--left::after{ display:none; }
/* kicker--area: linha de endereco/atuacao da capa, 93 caracteres — caixa
   alta em frase longa vira ilegivel (confirmado por impeccable detect,
   "all-caps-body": passagem de 80+ caracteres em uppercase prejudica
   leitura por forma da palavra). Mantem o rotulo pequeno/tracked, mas em
   frase normal (so a 1a letra de cada nome proprio maiuscula, ja assim no
   texto-fonte) em vez de uppercase. */
.kicker--area{ text-transform:none; letter-spacing:.03em; font-weight:500; }

.italic{ font-style:italic; }

/* Hierarquia só por peso/tamanho (família única, ver nota do topo):
   título em 720 (bold confiante), bem acima do corpo (400-500) —
   contraste de peso >=1.25x exigido pelas leis de design da casa.

   site-v3 (06/11/2026, 2a rodada — correcao pos-reprovacao do Chefe):
   tracking negativo mais fechado e peso mais alto no titulo, medidos ao
   vivo no benchmark 888 Ultra Black (eight-eight-eight-sustains.lovable.app,
   Playwright, 06/11/2026 — H1 computado: font-size 60px, font-weight 700,
   letter-spacing -1.5px = -0.025em). Aplicado em TODOS os headlines do
   site (nao so na secao nova), com text-shadow para dar profundidade sobre
   fundo de foto — essa sombra tambem resolve o contraste baixo do titulo
   "Cada ambiente, em detalhe" apontado pelo Chefe (o em/italico antes
   usava peso 550, fino demais sobre fundo ameixa; agora 700, igual ao
   peso do titulo, sem perder a distincao por cor/italico). */
.display{
  font-family:var(--serif);
  font-weight:720;
  letter-spacing:-0.026em;
  line-height:1.02;
  text-wrap:balance;
  color:var(--creme);
  text-shadow:0 2px 26px rgba(10,4,7,.4);
}
.display em{ font-style:italic; font-weight:700; color:var(--dourado-soft); }

.lede{
  font-family:var(--sans); font-weight:400;
  color:var(--creme-muted);
  text-wrap:pretty;
  line-height:1.65;
}

.display-num{
  font-family:var(--serif); font-weight:700; color:var(--dourado);
}

/* Botao SOLIDO por padrao (site-v3, 2a rodada) — no benchmark 888 os 2 CTAs do
   hero (SOU FOOD SERVICE / COMPRAR PARA CASA) sao sempre preenchidos, nunca
   outline/ghost (medido ao vivo: background solido nos 2 estados, nunca
   transparente). O Jamil usava outline com preenchimento só no hover —
   trocado para preenchido sempre, cor dourado solida (paleta do proprio
   Jamil, nenhuma cor do 888 usada), com hover escurecendo levemente —
   leitura mais confiante de "CTA principal", igual ao benchmark. */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem;
  padding:1rem 1.9rem;
  border:1px solid var(--dourado);
  color:var(--ameixa-deep);
  background:var(--dourado);
  text-decoration:none;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover,.btn:focus-visible{ background:var(--dourado-soft); border-color:var(--dourado-soft); color:var(--ameixa-deep); transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none } .btn:hover{ transform:none } }

/* ---- Estrutura de seção ---- */
.slide{
  position:relative;
  width:100%;
  background:var(--ameixa);
  padding-block:var(--space-6);
  scroll-margin-top:100px; /* folga de seguranca contra a marca fixa (.site-mark, 72px) */
}
.slide--deep{ background:var(--ameixa-deep); }
.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.5rem,5vw,4rem);
}
.rule-top{
  max-width:var(--container); margin:0 auto; height:1px;
  background:linear-gradient(90deg, transparent, var(--linha), transparent);
}

/* reveal genérico (fade+slide ao entrar na viewport, sem scrub) */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}
.reveal--d1{ transition-delay:.08s; }
.reveal--d2{ transition-delay:.16s; }
.reveal--d3{ transition-delay:.24s; }
.reveal--d4{ transition-delay:.32s; }

/* ---- Fundo editorial (foto real como textura/moldura em seções de texto puro) ----
   Reaproveita as 2 fotos reais do acervo (sala-editorial / varanda-editorial) com
   crops e overlays diferentes por seção — nunca a mesma composição duas vezes.
   Técnica: overlay escuro sobre foto (Póvoa/Jardins & Co, ver benchmark). */
.editorial-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.editorial-bg img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.4) sepia(.16) brightness(.6) contrast(1.08);
}
/* NOTA (06/11/2026): tentativa de grao/film-grain via repeating-linear-gradient
   aqui foi REVERTIDA — deixava o pdftoppm/rasterizacao do PDF 10-15x mais lento
   por pagina (13s/pagina vs <1s), arriscando timeout em producao. A textura
   vem só da foto real + overlay, ajustados por secao abaixo. */
.editorial-bg::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(27,12,19,.8) 0%, rgba(27,12,19,.94) 60%, var(--ameixa) 100%);
}
.wrap{ position:relative; z-index:1; }

/* ==========================================================================
   SLIDE 1 · CAPA — full-bleed (06/11/2026, correção pós-revisão Nadia)
   Estrutura: 1 foto real do acervo cobrindo 100% da tela + overlay escuro
   em gradiente (mesma linguagem de .editorial-bg::after) + bloco de texto
   ancorado embaixo-a-esquerda. Padrão de composição herdado das referências
   do Chefe (prints/referencia-povoa-boutique.png, referencia-jardins-co.png)
   — estrutura, não conteúdo nem marca: aqui a família tipográfica, a paleta
   ameixa/dourado e o copy aprovado continuam travados (DESIGN.md do
   projeto), nada disso muda.
   Foto escolhida: sala-editorial.jpg — ambiente amplo, horizontal, piso de
   madeira + vista da cidade ao fundo, lê melhor em full-bleed wide nos dois
   breakpoints do que varanda-editorial.jpg (enquadramento mais vertical/
   fechado, janela em primeiro plano competiria com o texto).
   ========================================================================== */
.slide--capa{
  min-height:100svh;
  position:relative;
  display:flex; align-items:flex-end;
  padding-block:0;
  overflow:hidden;
}
.capa__bg{ position:absolute; inset:0; z-index:0; }
.capa__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
  animation:capa-kenburns 26s ease-in-out infinite alternate;
  transform-origin:center 32%;
}
/* Ken Burns lento no hero (site-v3, 2a rodada) — traduz a sensacao de
   "hero fullscreen com movimento continuo" observada ao vivo no benchmark
   888 (hero com carrossel de fotos trocando sozinho a cada poucos
   segundos). Aqui mantemos 1 unica foto real do acervo (nao um carrossel
   de produto como o 888 — o Jamil nao tem "linha de produtos" pra
   carrossel), mas o fundo ganha a mesma leitura de profundidade/movimento
   editorial via zoom lentissimo, nunca abrupto. Desligado em reduced-motion
   e em print (ver css/print.css e a media query abaixo). */
@media (prefers-reduced-motion: reduce){
  .capa__bg img{ animation:none; }
}
@keyframes capa-kenburns{
  from{ transform:scale(1); }
  to{ transform:scale(1.08); }
}
.capa__bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(27,12,19,.62) 0%, rgba(27,12,19,.22) 46%, rgba(27,12,19,.12) 100%),
    linear-gradient(180deg, rgba(27,12,19,.1) 0%, rgba(27,12,19,.18) 42%, rgba(27,12,19,.82) 100%);
}
.capa__credito-foto{
  position:absolute; right:clamp(1.25rem,3vw,2rem); bottom:1.4rem; z-index:2;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--creme-muted); margin:0;
}
.capa__content{
  position:relative; z-index:2;
  width:100%; max-width:720px;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--space-2);
  padding:var(--space-7) clamp(1.5rem,6vw,5.5rem) var(--space-6);
}
.capa__logo{ width:150px; height:auto; margin-bottom:.25rem; filter:drop-shadow(0 2px 10px rgba(10,4,7,.55)); }
/* "Curadoria imobiliária." não tem ponto de quebra de sentido válido entre
   as 2 palavras — nowrap obrigatório nos dois breakpoints (mesma lógica já
   calibrada no projeto antes da mudança de full-bleed, ver skill
   quebra-de-linha-coerente: nunca deixar 1 palavra órfã numa linha). */
.capa__headline{
  font-size:clamp(1.55rem, .95rem + 4.1vw, 4.7rem);
  max-width:none;
  white-space:nowrap;
  text-shadow:0 2px 18px rgba(10,4,7,.45);
}
.capa__lede{ font-size:clamp(1rem, .92rem + .35vw, 1.2rem); max-width:40ch; text-shadow:0 1px 10px rgba(10,4,7,.4); }
.capa__cta{ margin-top:.5rem; }
.credencial{
  margin-top:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid var(--linha-forte);
  display:flex; flex-direction:column; gap:.3rem;
  max-width:28ch;
}
.credencial__nome{ font-family:var(--serif); font-weight:650; font-size:1.15rem; color:var(--creme); }
.credencial__linha{ font-family:var(--sans); font-size:.85rem; letter-spacing:.03em; color:var(--dourado-soft); }

@media (max-width: 900px){
  .slide--capa{ min-height:100svh; }
  .capa__content{ max-width:none; padding:var(--space-6) 1.5rem var(--space-5); }
  .capa__headline{ max-width:none; }
  .capa__logo{ width:110px; }
  .capa__credito-foto{ display:none; }
}

/* ==========================================================================
   SLIDE 2 · BOUTIQUE
   ========================================================================== */
.slide--boutique{ text-align:center; }
.editorial-bg--boutique img{ object-position:22% 65%; }
.editorial-bg--boutique::after{
  background:linear-gradient(180deg, rgba(27,12,19,.74) 0%, rgba(27,12,19,.93) 58%, var(--ameixa) 100%);
}
.boutique__headline{
  font-size:clamp(2rem, 1.5rem + 2.6vw, 3.6rem);
  max-width:22ch; margin:var(--space-3) auto 0;
}
.boutique__atuacao{
  margin:var(--space-3) auto 0;
  max-width:46ch;
  font-family:var(--sans); font-weight:400; font-size:.86rem; letter-spacing:.02em;
  color:var(--creme-muted);
  text-wrap:pretty;
}
.pilares{
  margin-top:var(--space-6);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
  text-align:left;
}
.pilar{ padding-top:var(--space-3); border-top:1px solid var(--linha); }
.pilar__num{ font-size:2.4rem; display:block; margin-bottom:.6rem; }
.pilar__titulo{
  font-family:var(--sans); font-weight:600; font-size:1.05rem;
  letter-spacing:.02em; margin:0 0 .75rem; color:var(--creme);
}
.pilar__texto{ font-family:var(--sans); color:var(--creme-muted); font-size:.98rem; line-height:1.6; max-width:34ch; }
.boutique__fecho{
  margin-top:var(--space-6);
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.3rem, 1.1rem + 1vw, 2rem);
  color:var(--creme);
}
.boutique__fecho em{ color:var(--dourado-soft); }

@media (max-width: 760px){
  .pilares{ grid-template-columns:1fr; gap:var(--space-3); }
}

/* ==========================================================================
   SLIDE NOVO (site-v3, 06/11/2026) · AMBIENTES — carrossel editorial
   split-panel (kicker + título + corpo à esquerda, foto full-bleed à
   direita), scroll-scrub bidirecional — mesmo motor --p/--from/--to já
   usado em #curadoria (ver seção seguinte), generalizado em js/main.js
   para suportar múltiplos blocos [data-scrub] na mesma página.

   Referência de movimento/coreografia (SÓ estrutura, nunca texto/marca):
   "Elegant Carousel" (21st.dev/@dev.yadhakim) — split-panel, crossfade +
   leve Ken Burns, indicador "01/0N". Reimplementado 100% em vanilla
   CSS/JS, paleta e tipografia do Jamil (ameixa/dourado, Plus Jakarta
   Sans sem serifa).

   Fundo: --ameixa-mid (terceiro tom, ver nota "ritmo alternado" do
   recurso 05 do benchmark 888 — adaptado: aqui o ritmo é
   ameixa → ameixa-mid → ameixa-deep, nunca cor/paleta do 888).
   ========================================================================== */
.slide--ambientes{ background:var(--ameixa-mid); text-align:center; padding-block:var(--space-6) var(--space-5); }
.ambientes__headline{ font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem); margin-top:var(--space-2); }

/* CORRIGIDO (06/11/2026, 2a rodada — reprovacao do Chefe, "vao vazio enorme
   entre o titulo e a 1a foto"): a causa era dupla margem — este
   margin-top:space-6 (112px) SOMADO ao padding-block:space-6 generico do
   [data-scrub-stage] (ver regra mais abaixo no arquivo, usada tambem pelo
   diagrama de #curadoria) = ~224px de vazio antes da 1a foto aparecer.
   Reduzido pra um respiro intencional (nao um buraco): margin-top menor
   aqui + override do padding do stage especifico deste bloco, logo abaixo. */
.carrossel-scrub{ margin-top:var(--space-3); }
.carrossel-scrub [data-scrub-stage]{ padding-block:var(--space-2) var(--space-4) !important; }

.carrossel{ text-align:left; }
.carrossel__slide{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:var(--space-4);
  align-items:center;
}
.carrossel__slide + .carrossel__slide{ margin-top:var(--space-6); }

.carrossel__foto-wrap{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid var(--linha-forte);
}
.carrossel__foto{
  width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:center;
}
/* ---- Crossfade em trapézio (sobe · mantém · desce) ----
   Diferente do .scrub-fade usado em #curadoria (que só SOBE e fica em 1
   para sempre — ótimo pra "revelar" um diagrama, errado pra um carrossel,
   onde o slide anterior precisa SUMIR quando o próximo entra). Cada slide
   declara 4 pontos no progresso --p (herdados do .carrossel__slide via
   style inline): --in0/--in1 (janela de entrada) e --out0/--out1 (janela
   de saída). local = min(subida, descida), sempre craveado em [0,1] —
   mesmo motor --p do scrub (não é um sistema novo, só uma formula
   diferente aplicada ao mesmo --p). */
.x-fade{
  --local: clamp(0, min( calc((var(--p) - var(--in0)) / (var(--in1) - var(--in0))), calc((var(--out1) - var(--p)) / (var(--out1) - var(--out0))) ), 1);
  opacity:var(--local);
  transition:opacity .25s linear;
}
html.scrub-enabled .x-fade{ transition:none; }

.kb-fade{
  --local: clamp(0, min( calc((var(--p) - var(--in0)) / (var(--in1) - var(--in0))), calc((var(--out1) - var(--p)) / (var(--out1) - var(--out0))) ), 1);
  opacity:var(--local);
  transform:scale(calc(1 + var(--local) * .07));
  transition:opacity .25s linear, transform .25s linear;
}
html.scrub-enabled .kb-fade{ transition:none; }
/* Fallback (sem JS ou prefers-reduced-motion): slides em fluxo normal,
   empilhados — todos sempre visíveis, a fórmula de trapézio (pensada só
   pro modo com pin) não deve apagar nenhum. */
html:not(.scrub-enabled) .x-fade,
html:not(.scrub-enabled) .kb-fade{ opacity:1; transform:none; }

.carrossel__texto{ max-width:36ch; }
.carrossel__eyebrow{
  font-family:var(--sans); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  font-size:.72rem; color:var(--dourado-soft); margin:0 0 var(--space-2);
}
.carrossel__titulo{
  font-family:var(--serif); font-weight:650; color:var(--creme);
  font-size:clamp(1.3rem,1.05rem + 1.1vw,2rem);
  max-width:18ch; text-wrap:balance; margin:0 0 var(--space-2); line-height:1.12;
}
.carrossel__corpo{ font-family:var(--sans); color:var(--creme-muted); font-size:.98rem; line-height:1.6; margin:0; text-wrap:pretty; }

.carrossel__contador{
  display:none; /* só faz sentido com o crossfade ativo; some no fallback empilhado */
  align-items:center; gap:.6rem;
  margin-top:var(--space-4);
  font-family:var(--sans); font-weight:600; letter-spacing:.12em;
  font-size:.78rem; color:var(--dourado-soft);
}
.carrossel__contador::before{ content:""; width:28px; height:1px; background:var(--linha-forte); }

@media (max-width:860px){
  .carrossel__slide{ grid-template-columns:1fr; }
  .carrossel__slide + .carrossel__slide{ margin-top:var(--space-5); }
  .carrossel__texto{ max-width:none; }
  .carrossel__foto-wrap{ aspect-ratio:4/3; }
}

/* ---- Modo aprimorado (html.scrub-enabled): pin + crossfade empilhado ----
   Bug encontrado e corrigido nesta sessão: o `.wrap` direto dentro de
   [data-scrub-stage] (flex column) tem `margin-inline:auto` — pela spec de
   flexbox, margem auto no eixo cruzado DESLIGA o stretch automático, então
   sem esse width:100% explícito o `.wrap` (e o `.carrossel` dentro dele)
   colapsava para a largura mínima de conteúdo (tudo dentro do carrossel é
   position:absolute, então não sobra conteúdo em fluxo normal para dar
   largura real — o diagrama de #curadoria nunca expôs esse bug porque tem
   conteúdo em fluxo normal grande o bastante pra "empurrar" a largura). */
html.scrub-enabled [data-scrub-stage] > .wrap{ width:100%; }
html.scrub-enabled .carrossel{ position:relative; height:min(66vh,620px); }
html.scrub-enabled .carrossel__slide{
  position:absolute; inset:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  pointer-events:none;
}
html.scrub-enabled .carrossel__slide + .carrossel__slide{ margin-top:0; }
html.scrub-enabled .carrossel__foto-wrap{ aspect-ratio:auto; height:100%; }
html.scrub-enabled .carrossel__contador{
  display:inline-flex; position:absolute; left:0; bottom:-48px; margin-top:0;
}
@media (max-width:860px){
  html.scrub-enabled .carrossel{ height:min(78vh,760px); }
  html.scrub-enabled .carrossel__slide{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; row-gap:var(--space-2); }
  html.scrub-enabled .carrossel__contador{ bottom:-40px; }
}

/* ==========================================================================
   SLIDE 3 · CURADORIA (scroll-scrub bidirecional)
   --p: progresso 0→1 controlado por JS (padrão 1 = estado final, sem JS/motion)
   ========================================================================== */
:root{ --p:1; }

.slide--curadoria{ padding-block:var(--space-6) 0; }
.curadoria__headline{ font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem); max-width:16ch; margin-top:var(--space-2); }
.editorial-bg--curadoria img{ object-position:38% 30%; filter:grayscale(.5) sepia(.1) brightness(.46) contrast(1.15); }
.editorial-bg--curadoria::after{
  background:linear-gradient(180deg, rgba(27,12,19,.5) 0%, rgba(27,12,19,.62) 45%, rgba(27,12,19,.7) 100%);
}

[data-scrub-stage]{
  position:static;
  padding-block:var(--space-6) var(--space-6);
}
html.scrub-enabled [data-scrub]{ height:var(--scrub-h, 300vh); position:relative; }
html.scrub-enabled [data-scrub-stage]{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:var(--space-5);
  overflow:hidden;
}

.scrub-fade{
  --local: clamp(0, calc((var(--p) - var(--from)) / (var(--to) - var(--from))), 1);
  opacity:var(--local);
  transform:translateY(calc((1 - var(--local)) * 22px));
}
.scrub-line{
  --local: clamp(0, calc((var(--p) - var(--from)) / (var(--to) - var(--from))), 1);
  opacity:var(--local);
  transform-origin:left center;
  transform:scaleX(var(--local));
}
html.scrub-enabled .scrub-fade,
html.scrub-enabled .scrub-line{ transition:none; }
.scrub-fade,.scrub-line{ transition:opacity .25s linear, transform .25s linear; }

.diagrama{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:0 1.2rem;
  margin-bottom:var(--space-6);
}
.diagrama__node{
  border:1px solid var(--linha-forte);
  padding:var(--space-3) var(--space-3);
  text-align:left;
  background:linear-gradient(160deg, rgba(182,151,99,.06), transparent 60%);
}
.diagrama__node--hub{
  text-align:center; display:flex; align-items:center; justify-content:center;
  min-height:100%;
  border-color:var(--dourado);
  background:linear-gradient(160deg, rgba(182,151,99,.14), transparent 70%);
}
.diagrama__tag{
  display:block; font-family:var(--sans); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:.78rem; color:var(--dourado-soft); margin-bottom:.6rem;
}
.diagrama__tag--hub{ margin-bottom:0; font-family:var(--serif); font-weight:650; text-transform:none; letter-spacing:0; font-size:1.2rem; color:var(--creme); }
.diagrama__texto{ font-size:.92rem; color:var(--creme-muted); line-height:1.55; margin:0; }
.diagrama__link{ height:1px; width:100%; min-width:24px; background:linear-gradient(90deg, transparent, var(--dourado), transparent); }

.timeline{
  list-style:none; margin:0; padding:var(--space-4) 0 0; border-top:1px solid var(--linha);
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-3);
}
.timeline__item{ text-align:left; }
.timeline__num{ font-size:1.7rem; display:block; margin-bottom:.5rem; }
.timeline__titulo{ font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--creme); margin:0 0 .5rem; }
.timeline__texto{ font-size:.82rem; color:var(--creme-muted); line-height:1.5; margin:0; }

@media (max-width: 980px){
  .diagrama{ grid-template-columns:1fr; gap:var(--space-2); }
  .diagrama__link{ width:1px; min-width:0; height:28px; margin-inline:auto; background:linear-gradient(180deg, transparent, var(--dourado), transparent); }
  html.scrub-enabled .scrub-line{ transform-origin:top center; transform:scaleY(var(--local)); }
  .timeline{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .timeline{ grid-template-columns:1fr; }
}

/* ==========================================================================
   SLIDE 4 · EQUIPE
   ========================================================================== */
.equipe__headline{ font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem); max-width:20ch; margin-top:var(--space-2); }
.editorial-bg--equipe img{ object-position:10% 30%; filter:grayscale(.5) sepia(.1) brightness(.56) contrast(1.15); }
.editorial-bg--equipe::after{ background:rgba(27,12,19,.5); }
.equipe__grid{
  margin-top:var(--space-6);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3);
}
/* Cartao full-bleed com hover-scale (site-v3, 2a rodada) — recurso de
   estrutura do benchmark 888 (cards onde a foto domina o cartao, zoom
   suave so no hover) aplicado aqui: foto mais alta/dominante (3/4 em vez
   de 4/5) e o cartao inteiro ganha leve elevacao no hover, nao so a foto. */
.corretor{
  border:1px solid var(--linha); padding:0 0 var(--space-4);
  display:flex; flex-direction:column; gap:.4rem;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.corretor:hover,.corretor:focus-within{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(10,4,7,.35);
  border-color:var(--linha-forte);
}
@media (prefers-reduced-motion: reduce){ .corretor{ transition:none; } .corretor:hover{ transform:none; } }
.corretor--destaque{ border-color:var(--dourado); background:linear-gradient(160deg, rgba(182,151,99,.08), transparent 70%); }
.corretor--destaque:hover,.corretor--destaque:focus-within{ border-color:var(--dourado); }
.corretor__foto{
  display:block; width:100%; aspect-ratio:3/4; margin-bottom:var(--space-2);
  border-bottom:1px solid var(--linha); overflow:hidden; flex:none;
}
.corretor--destaque .corretor__foto{ border-color:var(--dourado); }
.corretor__foto img{
  width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block;
  filter:grayscale(1) contrast(1.05);
  transition:filter .6s var(--ease), transform .6s var(--ease);
}
.corretor:hover .corretor__foto img,
.corretor:focus-within .corretor__foto img{ filter:grayscale(0) contrast(1); transform:scale(1.06); }
@media (prefers-reduced-motion: reduce){ .corretor__foto img{ transition:none; } }
.corretor__funcao,.corretor__nome,.corretor__creci,.corretor__contato{ padding-inline:var(--space-3); }
.corretor__funcao{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dourado-soft); margin:0; }
.corretor__nome{ font-family:var(--serif); font-weight:650; font-size:1.35rem; margin:.2rem 0 0; color:var(--creme); }
.corretor__creci{ font-size:.82rem; color:var(--creme-muted); margin:.1rem 0 .6rem; letter-spacing:.02em; }
.corretor__contato{ font-size:.76rem; color:var(--creme-muted); margin:0; line-height:1.6; border-top:1px solid var(--linha); padding-top:.6rem; word-break:break-word; }
.corretor__contato + .corretor__contato{ border-top:none; padding-top:0; margin-top:.1rem; }
.equipe__fecho{
  margin-top:var(--space-5); text-align:center; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem); color:var(--creme-muted);
}
@media (max-width:860px){ .equipe__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   SLIDE 5 · OBJETIVO
   ========================================================================== */
.objetivo__headline{ font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem); margin-top:var(--space-2); }
.editorial-bg--objetivo img{ object-position:60% 65%; filter:grayscale(.45) sepia(.14) brightness(.46) contrast(1.15); }
.editorial-bg--objetivo::after{
  background:linear-gradient(180deg, rgba(27,12,19,.52) 0%, rgba(27,12,19,.58) 38%, rgba(27,12,19,.7) 100%);
}
.metas{ margin-top:var(--space-6); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.meta{ border-top:1px solid var(--linha-forte); padding-top:var(--space-3); }
.meta__num{ font-size:2.6rem; display:block; margin-bottom:.5rem; }
.meta__texto{ font-size:1.2rem; color:var(--creme); margin:0; font-family:var(--sans); }
.meta__texto strong{ color:var(--dourado-soft); font-weight:700; }
.objetivo__legenda{
  margin-top:var(--space-5); font-family:var(--serif); font-weight:500;
  font-size:clamp(1.1rem,1rem + .6vw,1.5rem); color:var(--creme-muted);
}
@media (max-width:760px){ .metas{ grid-template-columns:1fr; gap:var(--space-3); } }

/* ==========================================================================
   SLIDE 6 · TABELA PASSIVA X ATIVA
   ========================================================================== */
.tabela__headline{ font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem); margin-top:var(--space-2); }
.tabela{
  margin-top:var(--space-6);
  display:grid; grid-template-columns:1fr auto 1fr; gap:0 var(--space-4);
}
.tabela__eixo{ width:1px; background:linear-gradient(180deg, transparent, var(--dourado), transparent); }
.tabela__col{ position:relative; padding:var(--space-4) var(--space-3); }
.tabela__col--passiva .editorial-bg img{ object-position:88% 30%; filter:grayscale(1) brightness(.4) contrast(1.05); }
.tabela__col--passiva .editorial-bg::after{ background:rgba(27,12,19,.88); }
.tabela__col--ativa .editorial-bg img{ object-position:15% 65%; filter:grayscale(.1) sepia(.3) brightness(.5) contrast(1.1); }
.tabela__col--ativa .editorial-bg::after{
  background:linear-gradient(135deg, rgba(182,151,99,.28), rgba(27,12,19,.9) 70%);
}
.tabela__titulo{
  position:relative; z-index:1;
  font-family:var(--sans); font-weight:700; font-size:1rem; letter-spacing:.04em;
  text-transform:uppercase; margin:0 0 var(--space-3); padding-bottom:var(--space-2);
  border-bottom:1px solid var(--linha);
}
.tabela__col--passiva .tabela__titulo{ color:var(--creme-muted); }
.tabela__col--ativa .tabela__titulo{ color:var(--dourado); }
.tabela__titulo span{ display:block; font-weight:400; font-size:.78rem; color:var(--creme-muted); text-transform:none; letter-spacing:.02em; margin-top:.2rem; }
.tabela__lista{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.tabela__lista li{ font-size:.98rem; line-height:1.5; padding-left:1.4rem; position:relative; }
.tabela__col--passiva .tabela__lista li{ color:var(--creme-muted); }
.tabela__col--passiva .tabela__lista li::before{ content:"–"; position:absolute; left:0; color:var(--creme-muted); opacity:.6; }
.tabela__col--ativa .tabela__lista li{ color:var(--creme); }
.tabela__col--ativa .tabela__lista li::before{ content:"+"; position:absolute; left:0; color:var(--dourado); }
@media (max-width:760px){
  .tabela{ grid-template-columns:1fr; gap:var(--space-4); }
  .tabela__eixo{ width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--dourado), transparent); }
}

/* ==========================================================================
   SLIDE 6 (PPT) · PLANO DE MARKETING — DIAGRAMA RADIAL
   Hub central (logo + "Seu imóvel") com 4 raios conectando os 4 canais,
   nos 4 cantos. SVG desenha as linhas progressivamente no scroll (motor
   --rp, ver js/main.js) e desfaz se o usuário rolar pra cima — mesma
   lógica bidirecional do scrub de --p usado no diagrama da seção
   "curadoria", sem precisar de pin/sticky extra (reveal contínuo,
   função direta da posição do bloco na viewport).

   REFEITO 06/11/2026 (Chefe, msgs 40449/40450): o texto dos 4 nós estava
   minúsculo (h3 ~16px, tags ~12px) sobre foto escura — ilegível no celular
   e no desktop. Referência enviada pelo Chefe (40449-desktop.jpg/
   40450-mobile.jpg): cards de vidro fosco com barra de destaque à esquerda,
   título grande em caixa alta, 1 linha de descrição e os canais como
   pílulas com contorno. Estrutura copiada; COR trocada pro vermelho ->
   dourado/ameixa (identidade do Jamil, nunca a cor da referência) e o
   texto/conteúdo mantido 100% igual ao que já existia (ZAP Imóveis e
   VivaReal inclusive, que a foto de referência do Chefe não tinha).
   Vidro fosco reaproveita o MESMO princípio do .site-mark (selo de canto
   do header, linha ~141 acima): fundo ameixa translúcido + backdrop-filter
   blur sobre o fundo escuro — não é glassmorphism "decorativo default",
   é o mesmo recurso que o site já usa, aplicado aqui com o propósito
   explícito de separar o texto da foto por trás (impeccable "glass rule":
   raro e com propósito, não "cards de vidro em toda página").
   A barra de destaque à esquerda do título é pedido explícito do Chefe,
   copiando a estrutura da referência (não é "side-stripe decorativo sem
   motivo" — é o separador visual de categoria do card, na régua de 4px
   dourado, elemento próprio .radial__bar e não um border-left solto).
   ========================================================================== */
:root{ --rp:1; }
.marketing__headline{ font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem); margin-top:var(--space-2); }

.radial{
  position:relative;
  margin-top:var(--space-6);
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(140px,15vw,165px) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "tl . tr"
    ". hub ."
    "bl . br";
  column-gap:var(--space-3);
  row-gap:var(--space-5);
  align-items:center;
  max-width:1220px;
  margin-inline:auto;
}
.radial__svg{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; overflow:visible;
}
.radial__ray{
  stroke:var(--dourado); stroke-width:1.5; vector-effect:non-scaling-stroke;
  --local: clamp(0, calc((var(--rp) - var(--from,0)) / (var(--to,1) - var(--from,0))), 1);
  stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--local));
  opacity:calc(var(--local) * .85);
  transition:stroke-dashoffset .25s linear, opacity .25s linear;
}
html.radiate-enabled .radial__ray{ transition:none; }

.radial__hub{
  grid-area:hub; position:relative; z-index:2; justify-self:center;
  width:clamp(130px,14vw,156px); height:clamp(130px,14vw,156px); border-radius:50%;
  border:1px solid var(--dourado); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  padding:18px; box-sizing:border-box;
  background:linear-gradient(160deg, rgba(55,26,41,.88), rgba(27,12,19,.94) 75%),
             radial-gradient(circle at 50% 35%, rgba(182,151,99,.22), transparent 70%);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 0 0 6px rgba(182,151,99,.08), 0 18px 42px rgba(10,4,7,.45);
}
.radial__hub img{ height:30px; width:auto; opacity:.97; }
/* 11px e o piso de legibilidade pra texto funcional (impeccable detect,
   "undersized-ui-text") — .68rem (10.88px) estava abaixo; .78rem (12.48px)
   reforça ainda mais a leitura sem mudar a composição do hub. */
.radial__hub span{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dourado-soft); }

/* ---- Cards de vidro fosco (4 canais) ---- */
.radial__node{
  position:relative; z-index:1;
  display:flex; align-items:flex-start; gap:var(--space-2);
  padding:var(--space-3);
  border-radius:20px;
  background:linear-gradient(160deg, rgba(55,26,41,.58), rgba(27,12,19,.68));
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(182,151,99,.26);
  box-shadow:0 20px 46px rgba(10,4,7,.4);
}
.radial__node--tl{ grid-area:tl; justify-self:stretch; }
.radial__node--tr{ grid-area:tr; justify-self:stretch; }
.radial__node--bl{ grid-area:bl; justify-self:stretch; }
.radial__node--br{ grid-area:br; justify-self:stretch; }

.radial__bar{
  flex:0 0 4px; width:4px; border-radius:4px; align-self:stretch;
  background:linear-gradient(180deg, var(--dourado), var(--dourado-soft));
}
.radial__body{ min-width:0; text-align:left; }
/* Título do canal: as 2 combinações mais longas ("Rede profissional",
   "Imobiliárias parceiras") só cabem numa linha só sem virar órfã de
   1 palavra (regra da skill quebra-de-linha-coerente) — por isso
   white-space:nowrap aqui. letter-spacing negativo (igual a headline
   display de luxo) compensa a largura; conferido por medição real
   (Playwright) que a maior combinação cabe no card em 1440 e 390 antes
   de travar nowrap — ver nota na entrega. */
.radial__node h3{
  font-family:var(--sans); font-weight:800; letter-spacing:-.015em; text-transform:uppercase;
  font-size:1.78rem; line-height:1.1; margin:0 0 .55rem; color:var(--creme);
  white-space:nowrap;
}
.radial__node p{
  font-family:var(--sans); font-size:1.05rem; color:var(--creme-muted);
  line-height:1.5; margin:0 0 1rem; max-width:34ch;
}
.radial__tags{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin:0; padding:0; list-style:none;
}
.radial__tags li{
  font-family:var(--sans); font-weight:600; font-size:1.05rem; letter-spacing:.01em;
  color:var(--dourado-soft);
  border:1px solid rgba(182,151,99,.55);
  border-radius:999px;
  padding:.4em 1em;
  line-height:1.25;
}

.radiate{
  --local: clamp(0, calc((var(--rp) - var(--from,0)) / (var(--to,1) - var(--from,0))), 1);
  opacity:var(--local);
  transform:translateY(calc((1 - var(--local)) * 22px));
  transition:opacity .25s linear, transform .25s linear;
}
html.radiate-enabled .radiate{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .radiate,.radial__ray{ transition:none; opacity:1; transform:none; stroke-dashoffset:0; }
}

@media (max-width:860px){
  .radial{
    grid-template-columns:1fr;
    grid-template-areas:"hub" "tl" "tr" "bl" "br";
    row-gap:var(--space-3);
    max-width:540px;
  }
  .radial__svg{ display:none; }
  .radial__hub{ margin-bottom:var(--space-2); }
  .radial__node{ padding:var(--space-3) .9rem; gap:.65rem; }
  .radial__node h3{ font-size:1.375rem; margin-bottom:.45rem; }
  .radial__node p{ font-size:1rem; max-width:none; }
  .radial__tags li{ font-size:1.05rem; padding:.38em .9em; }
}

/* ==========================================================================
   SLIDE 8/9 · NÚMEROS HERO (Knight Frank technique)
   ========================================================================== */
.slide--numeros,.slide--custo{ text-align:center; }
.editorial-bg--custo img{ object-position:30% 30%; filter:grayscale(.5) sepia(.12) brightness(.56) contrast(1.15); }
.editorial-bg--custo::after{
  background:linear-gradient(180deg, rgba(27,12,19,.52) 0%, rgba(27,12,19,.46) 42%, rgba(27,12,19,.58) 100%);
}
.editorial-bg--marketing img{ object-position:55% 30%; filter:grayscale(.5) sepia(.12) brightness(.56) contrast(1.15); }
.editorial-bg--marketing::after{
  background:linear-gradient(180deg, rgba(27,12,19,.56) 0%, rgba(27,12,19,.46) 45%, rgba(27,12,19,.6) 100%);
}
.editorial-bg--contato img{ object-position:30% 65%; filter:grayscale(.55) sepia(.12) brightness(.4) contrast(1.15); }
.editorial-bg--contato::after{
  background:linear-gradient(180deg, rgba(27,12,19,.62) 0%, rgba(27,12,19,.52) 50%, rgba(27,12,19,.68) 100%);
}
.editorial-bg--tabela-slide img{ object-position:40% 65%; filter:grayscale(.55) brightness(.4) contrast(1.15); }
.editorial-bg--tabela-slide::after{ background:rgba(27,12,19,.6); }
.numeros__grid{
  position:relative; z-index:1;
  margin-top:var(--space-5);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1.5rem,5vw,4rem);
  flex-wrap:wrap;
  padding-inline:clamp(1.5rem,5vw,4rem);
}
.numero{ display:flex; flex-direction:column; align-items:center; gap:.8rem; max-width:22rem; }
.numero__valor{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(3.6rem, 2.5rem + 8vw, 9.5rem);
  line-height:.95; color:var(--dourado); letter-spacing:-0.02em;
}
.numero__sinal{ font-family:var(--sans); font-weight:700; font-size:.46em; vertical-align:.38em; letter-spacing:0; margin-right:.05em; color:var(--dourado-soft); }
.numero__legenda{ font-family:var(--sans); font-size:.95rem; color:var(--creme-muted); letter-spacing:.02em; }
.numero__divisor{ width:1px; align-self:stretch; background:var(--linha-forte); min-height:8rem; }
.custo__detalhe{ margin-top:var(--space-5); text-align:center; color:var(--creme-muted); font-size:.98rem; max-width:48ch; margin-inline:auto; }
@media (max-width:760px){ .numero__divisor{ width:60%; height:1px; min-height:0; align-self:center; } }

/* ---- Rede de parceiros · 5 afirmações tratadas como hero tipográfico
   (técnica Knight Frank/The Agency: serifa grande + itálico de ênfase,
   nunca bullet pequeno) — slide 7 do PPT original, "Plano de marketing
   e rede de parceiros" ---- */
.rede{
  margin-top:var(--space-6);
  padding-top:var(--space-4);
  border-top:1px solid var(--linha);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-4) var(--space-3);
  text-align:left;
}
.rede__item{ border-top:1px solid var(--linha-forte); padding-top:var(--space-2); }
.rede__titulo{
  font-size:clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  font-weight:650; margin:0 0 .5rem; max-width:none;
}
.rede__titulo em{ color:var(--dourado-soft); font-style:italic; }
.rede__texto{ font-family:var(--sans); font-size:.86rem; color:var(--creme-muted); line-height:1.55; margin:0; }
@media (max-width:980px){ .rede{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .rede{ grid-template-columns:1fr; } }

/* ==========================================================================
   SLIDE 10 · EXCLUSIVIDADE
   ========================================================================== */
.exclusividade__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); min-height:100svh; }
.exclusividade__foto{ margin:0; position:relative; min-height:42vh; }
.exclusividade__foto img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; }
.exclusividade__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 60%, var(--ameixa) 100%),
             linear-gradient(0deg, rgba(27,12,19,.35), transparent 40%);
}
.exclusividade__text{ display:flex; flex-direction:column; justify-content:center; gap:var(--space-3); padding:var(--space-6) clamp(1.5rem,6vw,5.5rem); }
.exclusividade__headline{ font-size:clamp(2.2rem,1.6rem + 3.4vw,4.4rem); max-width:16ch; }
.numero--inline{ font-size:1.15em; }
.exclusividade__lista{ list-style:none; margin:var(--space-2) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.5rem; }
.exclusividade__lista li{ font-size:.95rem; color:var(--creme-muted); padding-left:1.1rem; position:relative; }
.exclusividade__lista li::before{ content:"·"; position:absolute; left:0; color:var(--dourado); font-weight:700; }
@media (max-width:900px){
  .exclusividade__grid{ grid-template-columns:1fr; }
  .exclusividade__foto{ min-height:50vh; order:-1; }
  .exclusividade__foto::after{ background:linear-gradient(0deg, var(--ameixa) 2%, transparent 40%); }
  .exclusividade__lista{ grid-template-columns:1fr; }
}

/* ==========================================================================
   SLIDE 11 · CONTATO / FECHAMENTO
   ========================================================================== */
.slide--contato{ min-height:100svh; display:flex; align-items:center; }
.contato__wrap{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); width:100%; }
.contato__logo{ width:250px; height:auto; margin-bottom:var(--space-2); }
.credencial--central{ align-items:center; text-align:center; border-top:none; padding-top:0; max-width:none; }
.credencial--central .credencial__nome{ font-size:1.6rem; }
.contato__wrap .btn{ margin-top:var(--space-3); }