/* ==========================================================================
   1. TOKENS — declarados antes da primeira regra de CSS.
   ========================================================================== */
:root{
  /* --- Paleta -------------------------------------------------------------
     Cinco papéis. Papéis com dois degraus contam como um: --papel/--osso são
     o fundo claro, e --navy/--navy-claro/--azul-luz são a família azul da
     marca, que é a que a i.Prosper já usa em tudo que publica.
     Nenhuma cor solta no corpo do CSS: tom novo vira token ou não existe.     */
  --papel:      #FFFFFF;  /* fundo   — superfície de cartão claro              */
  --osso:       #F6F3EE;  /* fundo   — página                                  */
  --tinta:      #16181C;  /* texto                                             */
  --prata:      #7E8894;  /* acento  — a esfera do logo.                       */
                          /*           NUNCA texto sobre claro: dá 3,25:1.     */
  --navy:       #0A1B3D;  /* fundo escuro — topo do degradê da marca           */
  --navy-claro: #142E63;  /* fundo escuro — base do degradê (pior caso medido) */
  --azul-luz:   #7FB2E5;  /* acento sobre escuro — 5,87:1 sobre --navy-claro   */
  --clay:       #A44A2B;  /* ação    — 5,28:1 sobre osso, 5,85:1 com branco    */

  /* --- Derivadas — misturas dos acima, já resolvidas em hexadecimal.
         Ficam fixas de propósito: color-mix() não existe no Safari anterior
         ao 16.2, e metade deste público navega em celular antigo. ---------- */
  --tinta-72:   #555557;  /* tinta 72% sobre osso   — 6,72:1 sobre osso        */
  --osso-74:    #BABDC5;  /* osso 74% sobre navy    — 6,98:1 sobre navy-claro  */
  --linha:      #C4C6C8;  /* prata 42% sobre osso   — só borda                 */
  --linha-dark: #2E4478;  /* prata sobre navy       — só borda                 */
  --clay-suave: #EEE2DB;  /* clay 10% sobre osso    — fundo de estado hover    */
  --navy-topo:  #12285A;  /* superfície de cartão sobre o navy                 */
  --navy-hover: #1B356E;  /* hover no escuro                                   */
  --clay-forte: #8D4229;  /* clay 84% + tinta       — hover do botão, 7,1:1    */
  --veu-topo:   rgba(246,243,238,.88);  /* osso translúcido do cabeçalho       */
  --veu-escuro: rgba(10,27,61,.86);     /* navy translúcido do cabeçalho       */
  --brilho:     rgba(127,178,229,.22);  /* o feixe de luz das artes da marca   */
  --brilho-forte:rgba(127,178,229,.42);
  --sombra:     rgba(10,27,61,.30);
  --halo:       rgba(126,136,148,.26);

  /* --- Tipografia --------------------------------------------------------- */
  --fonte-titulo: "Archivo", "Segoe UI", system-ui, sans-serif;
  --fonte-texto:  "Public Sans", "Segoe UI", system-ui, sans-serif;

  /* Escala fechada. Nenhum font-size literal no corpo do CSS. */
  --fs-1: 0.75rem;      /* 12 — etiquetas, legendas legais        */
  --fs-2: 0.8125rem;    /* 13 — microcopy                         */
  --fs-3: 0.9375rem;    /* 15 — texto de apoio                    */
  --fs-4: 1rem;         /* 16 — corpo                             */
  --fs-5: 1.125rem;     /* 18 — corpo grande, lead                */
  --fs-6: 1.375rem;     /* 22 — subtítulo                         */
  --fs-7: 1.75rem;      /* 28 — título de cartão                  */
  --fs-8: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);    /* seção      */
  --fs-9: clamp(2.4rem, 1.3rem + 4.4vw, 4.5rem);    /* herói      */

  --lh-apertado: 1.06;
  --lh-titulo:   1.14;
  --lh-corpo:    1.62;

  /* --- Espaçamento -------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.5rem;
  --space-8: 5.5rem;
  --space-9: 8rem;

  /* --- Outros ------------------------------------------------------------- */
  --raio-1: 2px;
  --raio-2: 6px;
  --raio-3: 14px;
  --raio-4: 22px;
  --largura: 1160px;
  --largura-texto: 62ch;
  --transicao: 200ms cubic-bezier(.2,.6,.3,1);
  --z-topo: 30;
  --z-flutuante: 40;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
main[id], main section[id]{ scroll-margin-top:96px; }
body{
  margin:0;
  background:var(--osso);
  color:var(--tinta);
  font-family:var(--fonte-texto);
  font-size:var(--fs-4);
  line-height:var(--lh-corpo);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; display:block; }
input,select,button,textarea{ font-family:var(--fonte-texto); }
a{ color:var(--clay); text-decoration-thickness:1px; text-underline-offset:3px; }
/* Grotesca pede peso maior e espacejamento mais fechado que serif: com
   600 e tracking solto os titulos ficavam moles. */
h1,h2,h3,h4{ font-family:var(--fonte-titulo); font-weight:700; margin:0;
             line-height:var(--lh-titulo); letter-spacing:-.02em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--clay); outline-offset:3px; border-radius:var(--raio-1); }
.escuro :focus-visible{ outline-color:var(--azul-luz); }
::selection{ background:var(--clay); color:var(--papel); }

.pular{
  position:absolute; left:var(--space-4); top:-4rem; z-index:calc(var(--z-flutuante) + 1);
  background:var(--navy); color:var(--osso); padding:var(--space-3) var(--space-4);
  border-radius:var(--raio-2); font-size:var(--fs-3); text-decoration:none;
}
.pular:focus{ top:var(--space-4); }

.env{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:var(--space-5); }
.secao{ padding-block:var(--space-8); }
.oculto-visual{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ==========================================================================
   3. IDENTIDADE — o navy em degradê com feixe de luz que a marca já usa.
      A cor de fundo declarada é sempre a MAIS CLARA do degradê, para o
      medidor de contraste avaliar o pior caso e não o mais confortável.
   ========================================================================== */
.escuro{
  position:relative; isolation:isolate; overflow:hidden;
  background-color:var(--navy-claro);
  background-image:linear-gradient(168deg, var(--navy) 0%, var(--navy-claro) 72%, var(--navy) 100%);
  color:var(--osso);
}
.escuro::before{  /* o feixe diagonal das artes do Instagram */
  content:""; position:absolute; z-index:-1; inset:-30% -10% auto auto;
  width:min(70vw,760px); height:min(70vw,760px);
  background:radial-gradient(circle at 50% 50%, var(--brilho), transparent 62%);
  pointer-events:none;
}
.escuro .titulo-secao,.escuro h3{ color:var(--osso); }
.escuro .lead{ color:var(--osso-74); }
.escuro a{ color:var(--azul-luz); }
/* …mas link não é botão nem cartão: sem estas três, a regra acima rouba a cor
   do texto dos botões e derruba o contraste para 2,62:1. */
.escuro .botao--acao{ color:var(--papel); }
.escuro .botao--contorno{ color:var(--osso); }
.escuro .zona{ color:var(--osso); }

/* Bloco escuro dentro de seção clara. Nunca junte .escuro e .cartao no mesmo
   elemento: o fundo branco do cartão vence e o texto claro some. */
.bloco{
  border-radius:var(--raio-4); padding:var(--space-6); margin-top:var(--space-6);
  border:1px solid var(--linha-dark);
}
.bloco .sim{ margin-top:0; }

.etiqueta{
  font-size:var(--fs-1); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-72); margin-bottom:var(--space-4);
  display:flex; align-items:center; gap:var(--space-3);
}
.etiqueta::before{ content:""; width:var(--space-6); height:1px; background:var(--prata); flex:none; }
.escuro .etiqueta{ color:var(--osso-74); }
.escuro .etiqueta::before{ background:var(--azul-luz); }

.titulo-secao{ font-size:var(--fs-8); letter-spacing:-.028em; max-width:22ch; }
.lead{ font-size:var(--fs-5); color:var(--tinta-72); max-width:var(--largura-texto); }

/* Selo circular de ícone — o sistema que aparece nas artes deles */
.selo{
  width:52px; height:52px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--linha); background:var(--papel); color:var(--clay);
}
.selo svg{ width:24px; height:24px; }
.escuro .selo{ border-color:var(--linha-dark); background:var(--navy-topo); color:var(--azul-luz); }

.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  min-height:52px; padding:var(--space-3) var(--space-5);
  font-size:var(--fs-4); font-weight:600;
  border-radius:var(--raio-2); border:1px solid transparent; cursor:pointer;
  text-decoration:none; text-align:center;
  transition:background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.botao--acao{ background:var(--clay); color:var(--papel); }
.botao--acao:hover{ background:var(--clay-forte); }
.botao--contorno{ background:transparent; color:var(--tinta); border-color:var(--linha); }
.botao--contorno:hover{ background:var(--papel); border-color:var(--prata); }
.escuro .botao--contorno{ color:var(--osso); border-color:var(--linha-dark); }
.escuro .botao--contorno:hover{ background:var(--navy-hover); }
.botao svg{ width:20px; height:20px; flex:none; }

.cartao{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio-3);
  padding:var(--space-5);
}
.escuro .cartao{
  background:var(--navy-topo); border-color:var(--linha-dark);
  box-shadow:inset 0 1px 0 var(--brilho);   /* a borda que pega luz */
}

/* ==========================================================================
   4. CABEÇALHO
   ========================================================================== */
.topo{
  position:sticky; top:0; z-index:var(--z-topo);
  background:var(--veu-escuro);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linha-dark);
}
.topo__grade{ display:flex; align-items:center; gap:var(--space-5); min-height:76px; }
.topo__marca{ display:flex; align-items:center; gap:var(--space-4); text-decoration:none;
              margin-right:auto; min-height:44px; }
.topo__marca img{ height:38px; width:auto; }
.topo__creci{
  font-size:var(--fs-1); letter-spacing:.1em; color:var(--osso-74);
  border-left:1px solid var(--linha-dark); padding-left:var(--space-4); white-space:nowrap;
}
/* --------------------------------------------------------------------------
   Menu de celular. Some no desktop, onde a navegação horizontal já existe.
   -------------------------------------------------------------------------- */
.menu-botao{
  display:none; width:44px; height:44px; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--linha-dark); border-radius:var(--raio-2);
  place-items:center; flex:none;
}
.menu-botao__barras{ display:grid; gap:4px; width:18px; }
.menu-botao__barras i{
  display:block; height:2px; border-radius:2px; background:var(--osso);
  transition:transform var(--transicao), opacity var(--transicao);
}
.menu-botao[aria-expanded="true"] .menu-botao__barras i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__barras i:nth-child(2){ opacity:0; }
.menu-botao[aria-expanded="true"] .menu-botao__barras i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.menu-painel{
  display:none; position:absolute; top:100%; left:0; right:0;
  height:calc(100dvh - 77px);
  background:
    radial-gradient(circle at 92% 4%, var(--brilho) 0, transparent 31%),
    var(--navy);
  border-top:1px solid var(--linha-dark);
  overflow-y:auto; overscroll-behavior:contain;
}
.menu-painel[data-aberto="1"]{ display:block; }
.menu-painel__conteudo{
  display:flex; flex-direction:column; min-height:100%;
  padding-block:var(--space-5) max(var(--space-5), env(safe-area-inset-bottom));
}
.menu-painel__cabecalho{ margin-bottom:var(--space-3); }
.menu-painel__rotulo{
  display:flex; align-items:center; gap:var(--space-3);
  color:var(--azul-luz); font-size:var(--fs-1); font-weight:700;
  letter-spacing:.12em; line-height:1; text-transform:uppercase;
}
.menu-painel__rotulo::before{ content:""; width:22px; height:1px; background:currentColor; }
.menu-painel__cabecalho small{ display:block; margin-top:var(--space-2); color:var(--osso-74); font-size:var(--fs-2); }
.menu-painel nav{ display:grid; counter-reset:menu-item; border-top:1px solid var(--linha-dark); }
.menu-painel nav a{
  position:relative; display:grid; gap:2px; padding:var(--space-3) 44px var(--space-3) 42px; min-height:64px;
  align-content:center; color:var(--osso); text-decoration:none;
  border-bottom:1px solid var(--linha-dark); counter-increment:menu-item;
  transition:background var(--transicao), padding var(--transicao);
}
.menu-painel nav a::before{
  content:"0" counter(menu-item); position:absolute; left:var(--space-2); top:50%; transform:translateY(-50%);
  color:var(--azul-luz); font-size:var(--fs-1); font-weight:700; letter-spacing:.06em;
}
.menu-painel nav a::after{
  content:""; position:absolute; right:var(--space-2); top:50%; width:8px; height:8px;
  border-right:1.5px solid var(--osso-74); border-bottom:1.5px solid var(--osso-74);
  transform:translateY(-50%); transition:transform var(--transicao), border-color var(--transicao);
}
.menu-painel nav a:hover,.menu-painel nav a:focus-visible{ background:var(--navy-hover); padding-left:48px; }
.menu-painel nav a:hover::after,.menu-painel nav a:focus-visible::after{ border-color:var(--azul-luz); transform:translate(2px,calc(-50% + 2px)); }
.menu-painel nav a span{ font-family:var(--fonte-titulo); font-size:var(--fs-5); font-weight:600; }
.menu-painel nav a small{ font-size:var(--fs-2); color:var(--osso-74); }
.menu-painel__cta{ display:flex; width:100%; min-height:52px; margin-top:var(--space-5); justify-content:center; flex:none; }
.menu-painel__pe{ margin-top:var(--space-4); font-size:var(--fs-1); color:var(--osso-74); text-align:center; }
body.menu-aberto{ overflow:hidden; }
body.menu-aberto .zap{ opacity:0; visibility:hidden; pointer-events:none; }

@media (max-height:520px) and (orientation:landscape){
  .menu-painel__conteudo{ padding-block:var(--space-3); }
  .menu-painel__cabecalho{ display:none; }
  .menu-painel nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .menu-painel nav a{ min-height:52px; padding-block:6px; gap:0; }
  .menu-painel nav a span{ font-size:var(--fs-4); line-height:1.2; }
  .menu-painel nav a small{ font-size:var(--fs-1); line-height:1.3; }
  .menu-painel nav a:nth-child(odd){ border-right:1px solid var(--linha-dark); }
  .menu-painel__cta{ min-height:48px; margin-top:var(--space-3); padding-block:8px; }
  .menu-painel__pe{ display:none; }
}

.topo__nav{ display:flex; gap:var(--space-4); flex:none; }
.topo__nav a{
  color:var(--osso); text-decoration:none; font-size:var(--fs-3); font-weight:500;
  display:inline-flex; align-items:center; min-height:44px; white-space:nowrap;
  border-bottom:1px solid transparent; transition:border-color var(--transicao);
}
.topo__nav a:hover{ border-bottom-color:var(--azul-luz); }

/* ==========================================================================
   5. HERÓI — navy da marca com a esfera do logo em 3D
   ========================================================================== */
.heroi{ padding-block:var(--space-8) var(--space-8); position:relative; overflow:hidden; }
.heroi__grade{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-7); align-items:center;
               position:relative; z-index:2; }

/* --------------------------------------------------------------------------
   Fachada viva — o vídeo da fachada do Vintage 500 ao entardecer, material
   próprio da carteira. Silhueta desenhada não alcança prédio filmado, e este
   tem o que interessa: janela acesa, varanda iluminada, hora azul.
   O véu por cima não é enfeite: sem ele o contraste do título despenca nos
   quadros em que o vídeo clareia.
   -------------------------------------------------------------------------- */
.heroi__fachada{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none; background:var(--navy);
}
/* Empilhados no mesmo lugar: o video entra no DOM junto com o poster e
   fica por cima. O iOS nao carrega video que ainda nao esta no documento,
   entao criar solto e esperar canplay nunca disparava no iPhone. */
.heroi__fachada video, .heroi__fachada img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.heroi__veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, var(--navy) 6%, rgb(10 27 61 / .84) 48%, rgb(10 27 61 / .48) 82%),
    linear-gradient(to bottom, rgb(10 27 61 / .72), rgb(10 27 61 / .28) 44%, var(--navy) 98%);
}
.heroi__titulo{
  font-size:var(--fs-9); line-height:var(--lh-apertado); letter-spacing:-.038em;
  /* A Archivo é mais larga que a fonte de sistema que a substitui enquanto
     carrega. Sem isto, uma palavra longa em português pode ser pintada depois
     do layout e ficar cortada pelo overflow:hidden do herói. */
  overflow-wrap:break-word; hyphens:auto;
  max-width:16ch; margin-bottom:var(--space-5); color:var(--osso);
}
.heroi__titulo em{ font-style:normal; color:var(--azul-luz); }
.heroi__lead{ font-size:var(--fs-5); color:var(--osso-74); max-width:50ch; margin-bottom:var(--space-6); }
.heroi__acoes{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-6); }
.heroi__reforco{ font-size:var(--fs-3); color:var(--osso-74); display:flex; align-items:flex-start; gap:var(--space-3); }
.heroi__reforco svg{ width:18px; height:18px; flex:none; color:var(--azul-luz); margin-top:4px; }
.heroi__reforco strong{ color:var(--osso); }

/* Palco da esfera: o canvas 3D entra por cima do SVG, que fica como reserva
   para quem não tem WebGL ou pediu menos movimento. */

.palco{ position:relative; aspect-ratio:1; width:min(100%,460px); margin-inline:auto; }
.palco canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.palco__svg{
  position:absolute; inset:12%; display:grid; place-items:center;
  transition:opacity 600ms ease;
}
.palco__svg svg{ width:100%; height:auto; }
.palco.tem-3d .palco__svg{ opacity:0; pointer-events:none; }
.palco__aro{
  position:absolute; inset:2%; border-radius:50%;
  border:1px solid var(--linha-dark); pointer-events:none;
}
.palco__aro::after{
  content:""; position:absolute; inset:12%; border-radius:50%;
  border:1px dashed var(--linha-dark); opacity:.55;
}

/* Barra de prova */
.prova{ border-block:1px solid var(--linha); background:var(--papel); }
.prova__grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); padding-block:var(--space-6); }
.prova__item{ display:flex; flex-direction:column; gap:var(--space-1); }
.prova__num{ font-family:var(--fonte-titulo); font-size:var(--fs-7); letter-spacing:-.02em; line-height:1.1; }
.prova__txt{ font-size:var(--fs-2); color:var(--tinta-72); }
.prova__txt a{ display:inline-flex; align-items:center; min-height:44px; }
.prova__estrelas{ color:var(--clay); letter-spacing:.08em; }

/* ==========================================================================
   6. SEÇÕES DE CONTEÚDO
   ========================================================================== */
.duas{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:start; }

.dor__lista{ display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-5); }
.dor__item{
  display:flex; gap:var(--space-4); align-items:flex-start;
  padding-bottom:var(--space-4); border-bottom:1px solid var(--linha);
}
.dor__item:last-child{ border-bottom:0; padding-bottom:0; }
.dor__item b{ font-weight:600; display:block; }
.dor__item span{ color:var(--tinta-72); font-size:var(--fs-3); }

/* Passos */
.passos{ counter-reset:passo; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); margin-top:var(--space-6); }
.passo{ position:relative; padding-top:var(--space-5); border-top:2px solid var(--clay); }
.passo::before{
  counter-increment:passo; content:"0" counter(passo);
  font-family:var(--fonte-titulo); font-size:var(--fs-6); color:var(--clay);
  display:block; margin-bottom:var(--space-3); line-height:1;
}
.passo h3{ font-size:var(--fs-5); margin-bottom:var(--space-2); }
.passo p{ font-size:var(--fs-3); color:var(--tinta-72); }

/* ==========================================================================
   7. SIMULADORES
   ========================================================================== */
.sim{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); margin-top:var(--space-6); align-items:start; }
.sim__controles{ display:flex; flex-direction:column; gap:var(--space-5); }
.controle{ display:flex; flex-direction:column; gap:var(--space-2); }
.controle__topo{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); }
.controle label,.controle__rotulo{ font-size:var(--fs-3); font-weight:600; }
.controle output{
  font-family:var(--fonte-titulo); font-size:var(--fs-6); letter-spacing:-.01em;
  color:var(--osso); font-variant-numeric:tabular-nums;
}
.controle__nota{ font-size:var(--fs-2); color:var(--osso-74); }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background:var(--linha-dark); }
input[type=range]::-moz-range-track{ height:6px; border-radius:999px; background:var(--linha-dark); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-10px;
  border-radius:50%; background:var(--azul-luz); border:3px solid var(--navy);
  box-shadow:0 0 0 1px var(--azul-luz);
}
input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:var(--azul-luz);
  border:3px solid var(--navy); box-shadow:0 0 0 1px var(--azul-luz);
}
.escolhas{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
/* Atalhos de valor: pular direto para um número redondo em vez de perseguir
   ele arrastando o controle. */
.atalhos{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.atalho{
  font-family:var(--fonte-texto); font-size:var(--fs-2); font-weight:600;
  min-height:44px; padding:var(--space-2) var(--space-4);
  background:transparent; color:var(--osso-74);
  border:1px solid var(--linha-dark); border-radius:999px; cursor:pointer;
  transition:border-color var(--transicao), color var(--transicao), background-color var(--transicao);
}
.atalho:hover{ border-color:var(--azul-luz); color:var(--osso); }
.atalho[aria-pressed="true"]{ background:var(--azul-luz); color:var(--navy); border-color:var(--azul-luz); }

/* Composição do valor do imóvel: três fatias numa barra só. */
.composicao{ margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--linha-dark); }
.composicao__barra{
  display:flex; height:var(--space-4); margin-top:var(--space-3);
  border-radius:999px; overflow:hidden; background:var(--navy);
}
.composicao__parte{ height:100%; transition:width var(--transicao); }
.composicao__parte--entrada{ background:var(--clay); }
.composicao__parte--subsidio{ background:var(--azul-luz); }
.composicao__parte--financiado{ background:var(--prata); }
.composicao__legenda{
  display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5);
  margin-top:var(--space-4); padding:0; list-style:none;
  font-size:var(--fs-2); color:var(--osso-74);
}
.composicao__legenda li{ display:flex; align-items:center; gap:var(--space-2); }
.composicao__legenda b{ color:var(--osso); font-weight:600; }
.composicao__cor{ width:10px; height:10px; border-radius:2px; flex:none; }
.composicao__cor--entrada{ background:var(--clay); }
.composicao__cor--subsidio{ background:var(--azul-luz); }
.composicao__cor--financiado{ background:var(--prata); }

.escolha{
  display:inline-flex; align-items:center;
  font-size:var(--fs-3); font-weight:600; color:var(--osso);
  padding:var(--space-3) var(--space-4); min-height:44px;
  border:1px solid var(--linha-dark); border-radius:999px; background:transparent; cursor:pointer;
  transition:background-color var(--transicao), border-color var(--transicao);
}
.escolha:hover{ background:var(--navy-hover); }
.escolha[aria-pressed=true]{ background:var(--azul-luz); color:var(--navy); border-color:var(--azul-luz); }

.painel{ display:flex; flex-direction:column; gap:var(--space-4); }
.painel__valor{
  font-family:var(--fonte-titulo); font-size:var(--fs-8); line-height:1.02; letter-spacing:-.03em;
  color:var(--osso); font-variant-numeric:tabular-nums;
}
.painel__rotulo{ font-size:var(--fs-2); letter-spacing:.14em; text-transform:uppercase; color:var(--osso-74); }
.painel__linhas{ display:flex; flex-direction:column; gap:var(--space-3);
                 padding-top:var(--space-4); border-top:1px solid var(--linha-dark); }
.painel__linha{ display:flex; justify-content:space-between; gap:var(--space-4); font-size:var(--fs-3); }
.painel__linha span{ color:var(--osso-74); }
.painel__linha b{ font-weight:600; color:var(--osso); font-variant-numeric:tabular-nums; }
.painel__alerta{
  font-size:var(--fs-3); padding:var(--space-4); border-radius:var(--raio-2);
  background:var(--navy-hover); border:1px solid var(--linha-dark); color:var(--osso);
}
.painel__alerta strong{ color:var(--azul-luz); }
.aviso-legal{ font-size:var(--fs-2); color:var(--osso-74); max-width:var(--largura-texto); margin-top:var(--space-5); }

/* Barra de composição da renda */
.barra{ height:10px; border-radius:999px; background:var(--linha-dark); overflow:hidden; }
.barra__preenche{ height:100%; background:var(--azul-luz); transition:width 300ms ease, background-color 300ms ease; }
.barra__preenche.apertado{ background:var(--clay); }

/* ==========================================================================
   8. EMPREENDIMENTOS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Catálogo filtrável + mapa.
   A lista é a fonte da verdade. O mapa é melhoria progressiva: se o Leaflet
   não carregar, a seção continua inteira — por isso nada de conteúdo mora
   só dentro do mapa. Os pares de cor aqui são os mesmos já medidos em
   Seção clara: o catálogo era 3.540px de navy, o maior bloco do site, e
   pesava demais. Pares de cor aqui são os mesmos das outras seções claras
   (--tinta-72 sobre --papel), com --navy no lugar de --azul-luz nos acentos:
   azul-luz sobre fundo claro não passa em contraste.
   -------------------------------------------------------------------------- */
/* Destaques com render de verdade. São poucos de propósito: só entram os que
   têm imagem do book da construtora. Inventar foto para os outros 109 seria
   pior que não ter nenhuma. */
.destaques{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); margin-top:var(--space-6); }
.destaques[hidden]{ display:none; }
.destaque{
  position:relative; display:block; overflow:hidden; text-decoration:none;
  border:1px solid var(--linha); border-radius:var(--raio-3); background:var(--papel);
  transition:border-color var(--transicao), transform var(--transicao);
}
.destaque:hover{ border-color:var(--navy); transform:translateY(-3px); }
.destaque__foto{ position:relative; aspect-ratio:16/10; background:var(--navy); }
.destaque__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.destaque__selo{
  position:absolute; top:var(--space-4); left:var(--space-4);
  font-size:var(--fs-1); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:var(--space-1) var(--space-3); border-radius:999px;
  background:var(--navy); color:var(--osso);
}
.destaque__corpo{ padding:var(--space-5); }
.destaque__nome{ font-family:var(--fonte-titulo); font-size:var(--fs-6); color:var(--tinta); }
.destaque__local{ display:block; font-size:var(--fs-3); color:var(--tinta); margin-top:var(--space-2); }
.destaque__tipo{ display:block; font-size:var(--fs-2); color:var(--tinta-72); margin-top:var(--space-1); }
.destaque__pe{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); margin-top:var(--space-4);
  padding-top:var(--space-4); border-top:1px solid var(--linha);
}
.destaque__preco{ font-family:var(--fonte-titulo); font-size:var(--fs-6); font-weight:700; color:var(--tinta); }
.destaque__cta{ font-size:var(--fs-3); font-weight:600; color:var(--navy); }

.filtros{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-4); margin-top:var(--space-6); }
.campo-filtro{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.campo-filtro > label{
  font-size:var(--fs-1); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-72);
}
.campo-filtro input, .campo-filtro select{
  width:100%; padding:var(--space-3) var(--space-4); min-height:44px;
  background:var(--papel); color:var(--tinta);
  border:1px solid var(--linha); border-radius:var(--raio-2);
  font-family:var(--fonte-texto); font-size:var(--fs-3);
}
.campo-filtro input::placeholder{ color:var(--tinta-72); }
.campo-filtro input:focus-visible, .campo-filtro select:focus-visible{
  outline:2px solid var(--navy); outline-offset:2px; border-color:var(--navy);
}
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.chip{
  font-family:var(--fonte-texto); font-size:var(--fs-2); font-weight:600;
  padding:var(--space-2) var(--space-4); min-height:44px;
  background:transparent; color:var(--tinta);
  border:1px solid var(--linha); border-radius:999px; cursor:pointer;
  /* color entra na transição junto com o fundo: sem isso o texto troca de cor
     instantaneamente enquanto o fundo leva 200ms, e sobra um piscar ilegível. */
  transition:border-color var(--transicao), background-color var(--transicao), color var(--transicao);
}
.chip:hover{ border-color:var(--navy); }
.chip[aria-pressed="true"]{ background:var(--navy); color:var(--osso); border-color:var(--navy); }

.catalogo__barra{
  display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:baseline;
  justify-content:space-between; margin-top:var(--space-5);
  padding-bottom:var(--space-3); border-bottom:1px solid var(--linha);
}
.catalogo__contagem{ font-size:var(--fs-3); color:var(--tinta); }
.catalogo__contagem b{ font-weight:700; }
.visao{ display:none; gap:var(--space-2); }

.catalogo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--space-5); margin-top:var(--space-5); align-items:start;
}
/* Sem rolagem interna: com max-height a caixa escondia os últimos cards e a
   contagem dizia "4 empreendimentos" com três à vista. A página inteira rola,
   e o mapa é que fica grudado acompanhando. */
.catalogo__lista{
  display:flex; flex-direction:column; gap:var(--space-3);
}
.item__ref{ display:block; font-size:var(--fs-2); color:var(--tinta-72); margin-top:var(--space-1); }
.item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-3); text-decoration:none; color:var(--tinta);
  transition:border-color var(--transicao), background-color var(--transicao);
}
.item:hover, .item.destacado{ border-color:var(--navy); background:var(--clay-suave); }
.item:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
/* Todos em block: como <span> inline, nome, bairro e tipologia corriam na
   mesma linha e o margin-top vertical era ignorado — era isso que fazia a
   nomenclatura do local aparecer grudada. */
.item__nome{ display:block; font-family:var(--fonte-titulo); font-size:var(--fs-5); line-height:var(--lh-titulo); }
/* O bairro é a palavra-chave de quem busca imóvel, então ele sobe de tamanho
   e ganha a cor cheia; a zona fica de apoio. */
.item__local{ display:block; font-size:var(--fs-3); color:var(--tinta); margin-top:var(--space-2); }
.item__zona{ color:var(--tinta-72); }
.item__tipo{ display:block; font-size:var(--fs-2); color:var(--tinta-72); margin-top:var(--space-2); line-height:var(--lh-corpo); }
.item__marca{
  display:inline-block; margin-top:var(--space-4); font-size:var(--fs-1); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-72);
  border:1px solid var(--linha); border-radius:999px; padding:var(--space-1) var(--space-3);
}
.item__valor{ text-align:right; white-space:nowrap; }
.item__preco{ display:block; font-size:var(--fs-5); font-weight:700; line-height:var(--lh-apertado); }
.item__apartir, .item__entrega{ display:block; font-size:var(--fs-1); color:var(--tinta-72); }
.item__apartir{ margin-bottom:var(--space-1); }
.item__entrega{ margin-top:var(--space-2); }
.item__sob{ font-size:var(--fs-3); font-weight:600; color:var(--navy); }
.catalogo__vazio{ padding:var(--space-7) var(--space-5); text-align:center; color:var(--tinta-72); font-size:var(--fs-3); }

.mapa-caixa{ position:sticky; top:var(--space-5); }
/* Palco relativo só para ancorar a prévia: a caixa é sticky no desktop e
   estática no mobile, então não serve de referência estável. */
.mapa-palco{ position:relative; isolation:isolate; }
#mapa{
  height:72vh; border-radius:var(--raio-3); border:1px solid var(--linha);
  background:var(--osso); z-index:0; overflow:hidden;
}
.mapa-nota{ margin-top:var(--space-3); font-size:var(--fs-1); color:var(--tinta-72); }
.mapa-estado{
  position:absolute; inset:1px; z-index:450; display:grid; place-content:center;
  gap:var(--space-4); padding:var(--space-6); text-align:center;
  border-radius:var(--raio-3); color:var(--tinta);
  background:linear-gradient(145deg, rgb(245 242 234 / .96), rgb(232 236 241 / .96));
}
.mapa-estado[hidden]{ display:none; }
.mapa-estado p{ max-width:34ch; margin-inline:auto; }
.mapa-acoes{ display:flex; justify-content:center; flex-wrap:wrap; gap:var(--space-3); }
.mapa-acoes[hidden]{ display:none; }
.mapa-acoes button{
  min-height:44px; padding:var(--space-2) var(--space-4); cursor:pointer;
  border:1px solid var(--navy); border-radius:999px; background:var(--navy); color:var(--osso);
  font:600 var(--fs-2)/1 var(--fonte-texto);
}
.mapa-acoes button + button{ background:var(--papel); color:var(--navy); }
.mapa-acoes button:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
#mapa .leaflet-tile-pane{ filter:saturate(.58) contrast(.96) brightness(1.035); }
/* Pino próprio: o marcador padrão do Leaflet é um PNG externo e não combina
   com a marca. Este é um div estilizado, então não baixa imagem nenhuma.
   Etiqueta de preço em vez de bolinha com número: "239" sozinho lia como
   quantidade de apartamentos. Com "R$" e "mil" não sobra dúvida. */
.pino{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:var(--space-1) var(--space-3); white-space:nowrap;
  background:var(--navy); color:var(--osso); border:2px solid var(--papel);
  border-radius:999px; font-size:var(--fs-1); font-weight:700;
  box-shadow:0 1px 6px rgb(0 0 0 / .45);
  transition:background-color var(--transicao), box-shadow var(--transicao);
}
.pino--grupo{
  width:78px; gap:4px; padding:5px 10px;
  background:var(--clay); border-color:var(--papel); line-height:1;
}
.pino__numero{ font-size:var(--fs-3); font-variant-numeric:tabular-nums; }
.pino__rotulo{ font-size:var(--fs-1); font-weight:600; }
.leaflet-marker-icon:focus{ outline:none; }
.leaflet-marker-icon:focus-visible .pino{
  outline:3px solid var(--papel); box-shadow:0 0 0 5px var(--clay), 0 4px 14px rgb(0 0 0 / .45);
}
/* Só cor e sombra no realce: escalar o pino empurraria os vizinhos de lugar. */
.pino.destacado{ background:var(--clay); color:var(--papel); z-index:400; box-shadow:0 2px 12px rgb(0 0 0 / .6); }

/* Painel de opções abaixo do mapa: mantém os pinos visíveis e funciona como
   uma pequena lista quando vários empreendimentos dividem a mesma região. */
.previa{
  margin-top:var(--space-3); padding:var(--space-4);
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio-3);
  box-shadow:0 10px 28px rgb(10 27 61 / .12); color:var(--tinta);
}
.previa[hidden]{ display:none; }
.previa__cabecalho{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding-bottom:var(--space-3); border-bottom:1px solid var(--linha);
}
.previa__cabecalho h3{ font-family:var(--fonte-titulo); font-size:var(--fs-4); line-height:var(--lh-titulo); }
#previa-conteudo{ display:grid; gap:0; max-height:300px; overflow:auto; overscroll-behavior:contain; }
.previa__item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-4); align-items:center;
  padding-block:var(--space-4); border-bottom:1px solid var(--linha);
}
.previa__item:last-child{ border-bottom:0; padding-bottom:0; }
.previa__nome{ display:block; font-family:var(--fonte-titulo); font-size:var(--fs-4); }
.previa__local, .previa__tipo{ display:block; font-size:var(--fs-2); color:var(--tinta-72); margin-top:var(--space-1); }
.previa__preco{ font-size:var(--fs-4); font-weight:700; white-space:nowrap; text-align:right; }
.previa__acao{ text-align:right; }
.previa__cta{
  display:inline-flex; min-height:44px; align-items:center; justify-content:center;
  margin-top:var(--space-2); padding:var(--space-2) var(--space-3);
  border-radius:999px; background:var(--navy); color:var(--osso);
  font-size:var(--fs-1); font-weight:600; text-decoration:none;
}
.previa__cta:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
.previa__fechar{
  flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:transparent; color:var(--tinta); border:1px solid var(--linha);
  border-radius:999px; font-size:var(--fs-4); line-height:1;
}
.previa__fechar:hover{ border-color:var(--navy); background:var(--osso); }
.previa__fechar:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }
.tem-previa-mapa .zap,
.mapa-indisponivel .zap{ opacity:0; pointer-events:none; transform:translateY(12px); }

/* Ver mais: 107 itens de uma vez é muita informação, ainda mais no celular. */
.vermais{
  width:100%; margin-top:var(--space-4); min-height:48px;
  font-family:var(--fonte-texto); font-size:var(--fs-3); font-weight:600;
  background:transparent; color:var(--navy); cursor:pointer;
  border:1px solid var(--navy); border-radius:999px;
  transition:background-color var(--transicao), color var(--transicao);
}
.vermais:hover{ background:var(--navy); color:var(--osso); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background:var(--papel); color:var(--tinta); border:1px solid var(--linha);
}
.leaflet-popup-content{ margin:var(--space-4); font-family:var(--fonte-texto); font-size:var(--fs-2); }
.leaflet-popup-content strong{ font-family:var(--fonte-titulo); font-size:var(--fs-4); font-weight:700; }
.leaflet-popup-content a{ color:var(--navy); font-weight:600; }
.leaflet-container a.leaflet-popup-close-button{ color:var(--tinta-72); }
.leaflet-control-attribution{ background:var(--papel) !important; color:var(--tinta-72) !important; font-size:var(--fs-1) !important; }
.leaflet-control-attribution a{
  color:var(--tinta-72) !important; text-decoration:underline; text-underline-offset:2px;
}

/* Faixas do MCMV */
.faixas{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-top:var(--space-6); }
.faixa{ display:flex; flex-direction:column; gap:var(--space-3); }
.faixa__nome{ font-family:var(--fonte-titulo); font-size:var(--fs-6); color:var(--osso); }
.faixa__nome small{ display:block; font-family:var(--fonte-texto); font-size:var(--fs-1);
                    letter-spacing:.14em; text-transform:uppercase; color:var(--osso-74); margin-top:var(--space-1); }
.faixa__renda{ font-size:var(--fs-3); color:var(--osso-74); }
.faixa__destaque{ font-size:var(--fs-5); font-weight:700; color:var(--osso);
                  padding-top:var(--space-3); border-top:1px solid var(--linha-dark); }
.faixa__nota{ font-size:var(--fs-2); color:var(--osso-74); }
/* Usada na seção clara do catálogo e na escura das faixas: o padrão é claro
   e a variante escura segue o mesmo esquema de .escuro .construtora. */
.rodape-legal{ font-size:var(--fs-2); color:var(--tinta-72); margin-top:var(--space-5); max-width:var(--largura-texto); }
.escuro .rodape-legal{ color:var(--osso-74); }

/* Zonas */
.zonas{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-top:var(--space-6); }
.zona{
  display:flex; flex-direction:column; gap:var(--space-3);
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio-3);
  padding:var(--space-5); text-decoration:none; color:var(--tinta);
  transition:border-color var(--transicao), background-color var(--transicao);
}
.zona:hover{ border-color:var(--clay); background:var(--clay-suave); }
.zona h3{ font-size:var(--fs-6); }
.zona p{ font-size:var(--fs-3); color:var(--tinta-72); flex:1; }
.zona__cta{ font-size:var(--fs-3); font-weight:600; color:var(--clay); display:flex; align-items:center; gap:var(--space-2); }

/* Construtoras */
.construtoras{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); }
.construtora{
  font-size:var(--fs-3); font-weight:600; letter-spacing:.04em;
  padding:var(--space-3) var(--space-5); border:1px solid var(--linha); border-radius:999px;
  background:var(--papel);
}
.escuro .construtora{ background:var(--navy-topo); border-color:var(--linha-dark); color:var(--osso); }

/* Sobre */
.sobre__numeros{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); margin-top:var(--space-6); }
.sobre__num b{ font-family:var(--fonte-titulo); font-size:var(--fs-8); display:block; line-height:1.05; letter-spacing:-.02em; }
.sobre__num span{ font-size:var(--fs-3); color:var(--tinta-72); }
.sobre__endereco{
  margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--linha);
  font-size:var(--fs-3); color:var(--tinta-72); font-style:normal;
}
.sobre__endereco b{ color:var(--tinta); display:block; font-weight:600; }

/* Fundador: retrato à esquerda, história à direita. width/height no <img>
   reservam a proporção antes de a foto baixar, senão o texto pula de lugar
   quando ela chega. */
/* 320px é largura de retrato, não degrau da escala de espaçamento — os tokens
   de space vão só até 8rem e espremeriam a foto num selo. */
.fundador{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:var(--space-7); align-items:start; margin-top:var(--space-8);
  padding-top:var(--space-7); border-top:1px solid var(--linha);
}
.fundador__retrato{ margin:0; }
.fundador__retrato img{
  width:100%; height:auto; display:block; border-radius:var(--raio-3);
  border:1px solid var(--linha); background:var(--osso);
}
.fundador__legenda{
  display:block; margin-top:var(--space-3);
  font-size:var(--fs-2); color:var(--tinta-72);
}
.fundador__nome{ font-family:var(--fonte-titulo); font-size:var(--fs-7); margin:var(--space-2) 0 0; }
.fundador__cargo{
  font-size:var(--fs-1); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-72); margin-top:var(--space-2);
}
.fundador__texto p{ margin-top:var(--space-4); max-width:var(--largura-texto); }
.fundador__trilha{
  display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5);
  list-style:none; padding:0;
}
.fundador__trilha li{
  font-size:var(--fs-2); color:var(--tinta-72);
  border:1px solid var(--linha); border-radius:999px;
  padding:var(--space-1) var(--space-4);
}
.fundador__trilha li:last-child{ border-color:var(--clay); color:var(--tinta); font-weight:600; }

/* Trabalhe conosco: o público aqui é corretor, não comprador. */
.vagas{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-7); align-items:center; }
.vagas__motivos{ display:grid; gap:var(--space-4); margin-top:var(--space-6); list-style:none; padding:0; }
.vagas__motivos li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-4); align-items:baseline; }
/* Esta lista aparece em secao clara (trabalhe-conosco.html) e escura (chamada),
   entao o padrao e claro e a variante escura vem depois - mesmo esquema de
   .construtora e .rodape-legal. Reusar as cores de fundo escuro no claro
   custou 9 falhas de contraste. */
.vagas__motivos b{ font-family:var(--fonte-titulo); font-size:var(--fs-6); color:var(--navy); line-height:1; }
.vagas__motivos span{ font-size:var(--fs-3); color:var(--tinta-72); }
.vagas__motivos strong{ color:var(--tinta); font-weight:600; }
.escuro .vagas__motivos b{ color:var(--azul-luz); }
.escuro .vagas__motivos span{ color:var(--osso-74); }
.escuro .vagas__motivos strong{ color:var(--osso); }

/* Captação e formulário */
.captacao{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6) var(--space-7); align-items:start; }
.captacao__intro{ grid-column:1; grid-row:1; }
.faq{ grid-column:1; grid-row:2; max-width:var(--largura-texto); }
.captacao__caixa{ grid-column:2; grid-row:1 / span 2; }

.form{ display:flex; flex-direction:column; gap:var(--space-4); }
.campo{ display:flex; flex-direction:column; gap:var(--space-2); }
.campo label{ font-size:var(--fs-3); font-weight:600; }
.campo input,.campo select{
  font-size:var(--fs-4); color:var(--tinta);
  background:var(--papel); border:1px solid var(--prata); border-radius:var(--raio-2);
  padding:var(--space-3) var(--space-4); min-height:52px; width:100%;
  transition:border-color var(--transicao);
}
.campo input:hover,.campo select:hover{ border-color:var(--tinta-72); }
.campo input::placeholder{ color:var(--tinta-72); opacity:.75; }
.consentimento{ display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--fs-2); color:var(--tinta-72); }
.consentimento input{ width:26px; height:26px; margin-top:2px; flex:none; accent-color:var(--clay); }
.form__erro{ font-size:var(--fs-3); color:var(--clay); font-weight:600; }
.form__ok{
  font-family:var(--fonte-titulo); font-size:var(--fs-6);
  padding:var(--space-5); background:var(--clay-suave); border:1px solid var(--clay);
  border-radius:var(--raio-3);
}
.form__ok p{ font-family:var(--fonte-texto); font-size:var(--fs-3); color:var(--tinta-72); margin-top:var(--space-2); }

/* FAQ */
.faq details{ border-bottom:1px solid var(--linha); padding-block:var(--space-4); }
.faq summary{
  font-family:var(--fonte-titulo); font-size:var(--fs-5); cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; gap:var(--space-4); align-items:center;
  min-height:44px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--clay); font-size:var(--fs-6); line-height:1; flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ font-size:var(--fs-3); color:var(--tinta-72); margin-top:var(--space-3); }

/* ==========================================================================
   9. RODAPÉ E BOTÃO FLUTUANTE
   ========================================================================== */
.rodape{ padding-block:var(--space-7) var(--space-6); }
.rodape__grade{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-6); }

/* Contato com rótulo e valor. Antes eram quatro links iguais em lista, com o
   mesmo telefone repetido em duas linhas seguidas — parecia colado às pressas.
   O número aparece uma vez; ligar e WhatsApp viram ações dele. */
.contato{ list-style:none; padding:0; margin:0; display:grid; gap:var(--space-5); }
.contato__item{ display:grid; gap:var(--space-1); }
.contato__rotulo{
  font-size:var(--fs-1); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--osso-74);
}
.contato__valor{
  font-family:var(--fonte-titulo); font-size:var(--fs-5); font-weight:600;
  color:var(--osso); text-decoration:none; word-break:break-word;
}
a.contato__valor:hover{ color:var(--azul-luz); }
.contato__acoes{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-1); }
.contato__acoes a{ font-size:var(--fs-2); color:var(--azul-luz); }
.rodape img{ height:44px; width:auto; margin-bottom:var(--space-4); }
.rodape h3{ font-size:var(--fs-2); letter-spacing:.14em; text-transform:uppercase;
            font-family:var(--fonte-texto); font-weight:600; color:var(--osso-74); margin-bottom:var(--space-4); }
.rodape a{ color:var(--osso); text-decoration:none; }
.rodape a:hover{ text-decoration:underline; }
.rodape li{ font-size:var(--fs-3); }
.rodape li a{ display:inline-flex; align-items:center; min-height:44px; }
.rodape address{ font-style:normal; font-size:var(--fs-3); color:var(--osso-74); line-height:1.8; }
.rodape__fim{
  margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--linha-dark);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-6);
  font-size:var(--fs-2); color:var(--osso-74);
}
.rodape__fim strong{ color:var(--osso); }
.rodape__credito{
  margin-left:auto; position:relative; top:-18px; display:inline-flex; align-items:center; gap:6px; min-height:44px;
  color:var(--osso-74); letter-spacing:.04em; white-space:nowrap;
}
.rodape__credito::after{
  content:"↗"; color:var(--azul-luz); font-size:1.05em; transition:transform var(--transicao);
}
.rodape__credito:hover{ color:var(--azul-luz); text-decoration:none; }
.rodape__credito:hover::after{ transform:translate(2px,-2px); }
.rodape__credito:focus-visible{
  outline:2px solid var(--azul-luz); outline-offset:4px; border-radius:4px;
}

.zap{
  position:fixed; right:var(--space-5); bottom:var(--space-5); z-index:var(--z-flutuante);
  display:flex; align-items:center; gap:var(--space-3);
  min-height:56px; padding:var(--space-3) var(--space-5);
  background:var(--clay); color:var(--papel); border-radius:999px;
  font-weight:600; font-size:var(--fs-3); text-decoration:none;
  box-shadow:0 8px 28px var(--sombra);
  transition:background-color var(--transicao), opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.zap:hover{ background:var(--clay-forte); }
.zap svg{ width:24px; height:24px; flex:none; }
.zap.zap--oculto{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px); }

/* ==========================================================================
   10. MOVIMENTO — só enfeite. Nada aparece só depois da animação.
   ========================================================================== */
.revela{ opacity:0; transform:translateY(10px); transition:opacity 320ms ease, transform 320ms ease; }
.revela.vista{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important; }
  .revela{ opacity:1; transform:none; }
}

/* ==========================================================================
   11. RESPONSIVO
   ========================================================================== */
/* O CRECI sai do topo só na faixa em que disputa espaço com o menu. Abaixo de
   960px o menu some e ele volta — é no celular que quase todo mundo chega, e
   corretor sem CRECI à vista passa amadorismo. No rodapé ele está sempre. */
@media (max-width: 1180px) and (min-width: 961px){
  .topo__creci{ display:none; }
}
@media (max-width: 960px){
  .duas{ grid-template-columns:1fr; gap:var(--space-6); }
  .heroi__grade{ grid-template-columns:1fr; }
  .heroi__titulo{ max-width:none; }
  /* A esfera a 340px tomava a primeira tela inteira e empurrava o título para
     baixo da dobra. Ela é assinatura de marca, não o conteúdo — e agora tem o
     vídeo da fachada atrás fazendo o trabalho pesado. */
  .palco{ width:min(58%,190px); order:-1; }
  /* Respiro do herói apertado no celular: com o padrão de desktop o título
     só começava a 446px, quase no meio da tela. */
  .heroi{ padding-block:var(--space-6) var(--space-7); }
  .heroi__grade{ gap:var(--space-4); }
  .menu-botao{ display:grid; }
  /* O CTA vira item do menu: no cabeçalho ele espremia logo e CRECI. */
  /* Escopo no filho direto da grade: o painel do menu tambem mora dentro do
     header, e ".topo .botao--acao" escondia o CTA de dentro dele. */
  .topo__grade > .botao--acao{ display:none; }
  .topo__grade{ align-items:center; }
  .sim{ grid-template-columns:1fr; }
  .captacao{ grid-template-columns:1fr; }
  .captacao__intro,.captacao__caixa,.faq{ grid-column:1; grid-row:auto; }
  .captacao__intro{ order:1; } .captacao__caixa{ order:2; } .faq{ order:3; }
  .passos,.faixas,.zonas{ grid-template-columns:repeat(2,1fr); }
  .rodape__grade{ grid-template-columns:1fr 1fr; }
  .topo__nav{ display:none; }
  .vagas{ grid-template-columns:1fr; gap:var(--space-6); }
  /* O retrato deixa de ser coluna e vira bloco no topo, com largura contida
     para não virar um pôster de rosto ocupando a tela inteira. */
  /* Retrato de 240px encostado à esquerda sobre um texto de largura inteira
     ficava torto. Vira faixa de largura total, recortada no rosto — lê como
     composição, não como sobra. */
  .fundador{ grid-template-columns:1fr; gap:var(--space-5); }
  .fundador__retrato{ max-width:none; }
  .fundador__retrato img{ aspect-ratio:5/4; object-fit:cover; object-position:center 22%; }
  .secao{ padding-block:var(--space-7); }

  /* Sem espaço para lista e mapa lado a lado: viram duas visões alternadas,
     e a lista é a que abre por padrão.
     O alternador é um controle segmentado de largura inteira, não dois chips
     soltos: com chips ele ficava idêntico aos filtros de zona logo acima e
     ninguém entendia que ali trocava a visualização — o mapa existia e
     passava despercebido. */
  .destaques{ grid-template-columns:1fr; }
  .filtros{ grid-template-columns:1fr 1fr; }
  .campo-filtro--busca{ grid-column:1 / -1; }
  .catalogo__barra{ align-items:center; }
  .visao{
    display:grid; grid-template-columns:1fr 1fr; gap:0; width:100%;
    border:1px solid var(--azul-luz); border-radius:999px; overflow:hidden;
  }
  .visao .chip{ border:0; border-radius:0; }
  .visao .chip:hover{ border:0; }
  .catalogo{ grid-template-columns:1fr; }
  .catalogo__lista{ max-height:none; padding-right:0; }
  .mapa-caixa{ position:static; }
  #mapa{ height:60vh; }
  .catalogo[data-visao="lista"] .mapa-caixa{ display:none; }
  .catalogo[data-visao="mapa"] .catalogo__lista{ display:none; }
}
@media (max-width: 620px){
  .prova__grade{ grid-template-columns:repeat(2,1fr); gap:var(--space-5) var(--space-4); }
  .passos,.faixas,.zonas,.sobre__numeros{ grid-template-columns:1fr; }
  .filtros{ grid-template-columns:1fr; }
  /* Card compacto: a 256px de altura cabia um por tela e a lista parecia
     vazia. Cortando a referência e apertando o respiro, cabem três. */
  .item{ grid-template-columns:1fr; gap:var(--space-2); padding:var(--space-4); }
  .item__valor{ text-align:left; display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
  .item__apartir{ margin-bottom:0; }
  .item__entrega{ display:inline; margin-top:0; }
  .item__ref{ display:none; }
  .item__nome{ font-size:var(--fs-4); }
  .item__local{ font-size:var(--fs-2); margin-top:var(--space-1); }
  .item__tipo{ margin-top:var(--space-1); }
  .item__marca{ margin-top:var(--space-2); }
  .item__preco{ font-size:var(--fs-4); }
  .rodape__grade{ grid-template-columns:1fr; }
  .rodape__fim{ align-items:flex-start; }
  .rodape__credito{ width:100%; margin-left:0; margin-top:var(--space-1); top:-12px; }
  .heroi__acoes .botao{ width:100%; }
  /* O CRECI e exigencia do COFECI e nao pode ficar escondido: aqui ele
     ganha linha propria embaixo da logo, com o menu ocupando a direita. */
  .topo__marca{ gap:var(--space-1) var(--space-3); flex-wrap:wrap; }
  .topo__marca img{ height:32px; }
  .topo__creci{ padding-left:0; border-left:0; }
  .zap span{ display:none; }
  .zap{ padding:var(--space-4); right:var(--space-4); bottom:var(--space-4); }
  .env{ padding-inline:var(--space-4); }
  #mapa{ height:min(64dvh,560px); min-height:420px; }
  .mapa-estado{ padding:var(--space-4); }
  .mapa-acoes{ display:grid; grid-template-columns:1fr; }
  .previa{ padding:var(--space-3); }
  #previa-conteudo{ max-height:52dvh; }
  .previa__item{ grid-template-columns:1fr; gap:var(--space-3); }
  .previa__acao{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); text-align:left; }
  .previa__preco{ text-align:left; }
  .previa__cta{ margin-top:0; }
}
@media (max-width: 360px){
  .previa__acao{ display:grid; grid-template-columns:1fr; }
  .previa__cta{ width:100%; }
  .pino--grupo{ width:72px; }
}

/* Chamada para página interna: texto à esquerda, botão à direita. */
.chamada{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-6); align-items:center; }
@media (max-width: 960px){
  .chamada{ grid-template-columns:1fr; gap:var(--space-5); }
  .chamada .botao{ width:100%; }
}

/* --------------------------------------------------------------------------
   Faixa viva — bloco de respiro com vídeo de fundo. Mesma regra do herói: o
   véu não é enfeite, é o que segura o contraste do texto sobre uma imagem que
   muda de luminosidade a cada quadro.
   -------------------------------------------------------------------------- */
.faixa-viva{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:var(--space-8); background:var(--navy);
}
.faixa-viva__fundo{ position:absolute; inset:0; z-index:0; }
/* Empilhados no mesmo lugar: o video entra no DOM junto com o poster e
   fica por cima. O iOS nao carrega video que ainda nao esta no documento,
   entao criar solto e esperar canplay nunca disparava no iPhone. */
.faixa-viva__fundo video, .faixa-viva__fundo img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.faixa-viva__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, var(--navy) 8%, rgb(10 27 61 / .86) 52%, rgb(10 27 61 / .58) 88%),
    linear-gradient(to bottom, rgb(10 27 61 / .55), rgb(10 27 61 / .42));
}
.faixa-viva__texto{ position:relative; z-index:2; max-width:var(--largura); }
.faixa-viva .etiqueta,
.faixa-viva .titulo-secao{ color:var(--osso); }
.faixa-viva .lead{ color:var(--osso-74); max-width:52ch; }
@media (max-width: 620px){
  .faixa-viva{ padding-block:var(--space-7); }
  .faixa-viva .botao{ width:100%; }
}

/* Busca por endereço: ação explícita, com botão. */
.perto{ margin-top:var(--space-5); }
.perto > label{
  display:block; font-size:var(--fs-1); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-72); margin-bottom:var(--space-2);
}
.perto__linha{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); }
.perto__linha input{
  width:100%; min-height:44px; padding:var(--space-3) var(--space-4);
  background:var(--papel); color:var(--tinta);
  border:1px solid var(--linha); border-radius:var(--raio-2);
  font-family:var(--fonte-texto); font-size:var(--fs-3);
}
.perto__linha input:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.perto__aviso{ margin-top:var(--space-3); font-size:var(--fs-2); color:var(--tinta-72); min-height:1.2em; }
.perto__aviso b{ color:var(--tinta); }
.perto__aviso button{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--navy); font-weight:600; text-decoration:underline;
}
.item__distancia{
  display:inline-block; margin-top:var(--space-2); font-size:var(--fs-1); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--navy);
}
/* Pino de origem: onde a pessoa disse que quer morar. */
.pino-origem{
  display:grid; place-items:center; width:22px; height:22px;
  background:var(--clay); border:3px solid var(--papel); border-radius:999px;
  box-shadow:0 2px 10px rgb(0 0 0 / .45);
}
@media (max-width: 620px){
  .perto__linha{ grid-template-columns:1fr; }
  .perto__linha .botao{ width:100%; }
}