/* ==========================================================================
   PERSICHETO IMÓVEIS — Landing Page
   Esqueleto: HTML original (copy, ordem, links)
   Estilo:    Figma "Persicheto Imóveis — Landing Page"
              Desktop 1440 — V2 (35:62) · Mobile 390 — V2 (35:427)
   Tipografia: General Sans / Author (manual de marca).
   Os estilos do Figma estão em Plus Jakarta Sans / Inter apenas como
   substitutos de editor — tamanho, peso, tracking e line-height vêm de lá.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Paleta */
  --preto:#121310;
  --marfim:#F2EFE6;
  --verde:#1E3A34;
  --travertino:#C8BBA8;
  --cinza:#6E6B64;
  --ambar:#FFCF5B;            /* CTA sólido — V2 */
  --logo-tinta:#EFEFEF;

  /* Derivadas */
  --marfim-82:rgba(242,239,230,.82);   /* lead do hero (35:89 / 35:454) */
  --marfim-72:rgba(242,239,230,.72);
  --marfim-60:rgba(242,239,230,.60);
  --marfim-40:rgba(242,239,230,.40);
  --marfim-24:rgba(242,239,230,.24);
  --marfim-12:rgba(242,239,230,.12);
  --preto-72:rgba(18,19,16,.72);
  --preto-60:rgba(18,19,16,.60);
  --preto-12:rgba(18,19,16,.12);
  --travertino-40:rgba(200,187,168,.40);
  --travertino-24:rgba(200,187,168,.24);

  /* Tipografia — manual pág. 09
     General Sans → logotipo, H1, aberturas, navegação e informações objetivas
     Author       → H2, intertítulos e corpo
     Pesos vêm do MANUAL; tamanho, entrelinha e posição vêm do FIGMA. */
  --f-titulo:'General Sans',system-ui,sans-serif;  /* onde o Figma usa Plus Jakarta Sans */
  --f-texto:'Author',system-ui,sans-serif;         /* onde o Figma usa Inter — Author é SANS */
  --p-h1:400;        /* H1: General Sans Light/Regular */
  --p-h2:500;        /* H2 e intertítulos: Author Medium */
  --p-corpo:400;     /* Corpo: Author Regular */
  --p-destaque:500;  /* Destaques: Author Medium */
  --p-funcional:500; /* Nav, botões, eyebrows, dados: General Sans Medium */

  /* Grade — 120px de respiro em 1440, 32px em 390.
     Acima de 1440 o layout PARA de crescer: `--sobra` é a metade do que
     excede o quadro do Figma, e entra em toda calha horizontal. O efeito é
     centralizar o quadro de 1440 inteiro, preservando as assimetrias de
     projeto (o Imóveis tem 120 à esquerda e 46 à direita, de propósito).
     Em 1440 ou menos --sobra é 0 e nada muda. */
  /* 100% e não 100vw: vw inclui a barra de rolagem e o quadro sairia ~15px
     mais estreito. Toda seção é bloco de largura cheia, então 100% resolve
     contra a largura real do documento. */
  --sobra:max(0px,(100% - 1440px) / 2);
  --gutter:calc(clamp(24px,8.3333vw,120px) + var(--sobra));
  --tex:url("assets/textura-grao.png");
  --malha:url("assets/malha.svg");
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  min-width:320px;
  padding-bottom:115px;   /* espaço da barra CTA fixa */
  font-family:var(--f-texto);
  font-size:15px;
  line-height:1.7;
  color:var(--preto);
  background:var(--marfim);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
svg{display:block;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

/* Textura de grão — 230.4px. Screen 16% sobre fundo escuro, multiply 9% sobre
   claro. NÃO usar os 45px que o export do Figma reporta em quase toda seção:
   medindo a autocorrelação da referência, o ladrilho repete a cada 230px
   (45 × 5.12). A 45px o grão sai fino e miúdo em vez de grosso e manchado. */
.tex{position:relative;isolation:isolate;}
.tex::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--tex);background-size:230.4px 230.4px;background-position:0 0;
  mix-blend-mode:screen;opacity:.16;
}
.tex--claro::before{mix-blend-mode:multiply;opacity:.09;}
.tex > *{position:relative;z-index:1;}
/* Seções em verde (#1e3a34) ficam LISAS — decisão do Igor em 07/08/2026.
   Diverge do Figma, que aplica o grão nas três (35:124, 35:322, 35:382). */
.sobre::before,.prova::before,.rodape::before{content:none;}

/* --------------------------------------------------------------------------
   3. BOTÕES  (componentes 6:2 / 6:6 / 6:10 / 6:14)
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 24px;border-radius:4px;border:1px solid transparent;
  font-family:var(--f-titulo);font-size:13px;font-weight:var(--p-funcional);line-height:1;
  letter-spacing:.52px;text-transform:uppercase;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.16667;stroke-linecap:round;stroke-linejoin:round;}
.btn--claro{background:var(--ambar);border-color:var(--travertino);color:var(--preto);}
.btn--claro:hover{background:#F7C444;}
.btn--escuro{background:var(--preto);border-color:var(--preto);color:var(--marfim);}
.btn--escuro:hover{background:#1E1F1B;}
.btn--contorno-claro{background:transparent;border-color:var(--marfim-40);color:var(--marfim);}
.btn--contorno-claro:hover{background:var(--marfim-12);}
.btn--contorno-escuro{background:transparent;border-color:var(--preto-12);color:var(--preto);}
.btn--contorno-escuro:hover{background:var(--preto-12);}

/* --------------------------------------------------------------------------
   4. NAV  (Figma 35:63 desktop · 35:428 mobile)
   -------------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  height:103px;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--preto);
}
.nav__logo{display:flex;align-items:center;width:203px;flex:none;overflow:hidden;}
.nav__marca{width:24.202px;height:34.922px;flex:none;}
.nav__marca path{fill:var(--logo-tinta);}
.nav__palavra{
  font-family:var(--f-titulo);color:var(--logo-tinta);
  margin-left:10.37px;line-height:1;
}
.nav__palavra b{display:block;font-size:11.212px;font-weight:500;letter-spacing:0;}
.nav__palavra span{display:block;font-size:5.968px;font-weight:400;margin-top:2.5px;}

.nav__links{display:flex;align-items:center;justify-content:center;gap:28px;width:585px;flex:none;}
.nav__links a{
  font-family:var(--f-titulo);font-size:12px;font-weight:500;line-height:1;
  letter-spacing:.6px;text-transform:uppercase;color:var(--marfim-72);
  transition:color .2s ease;
}
.nav__links a:hover,.nav__links a.is-ativo{color:var(--marfim);}

.nav__acoes{display:flex;align-items:center;gap:16px;flex:none;}
.nav .btn{padding:12px 20px;}   /* variante compacta da nav (35:75) */
.nav__menu{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--marfim-24);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.nav__menu svg{width:40px;height:40px;}
.nav__menu circle{fill:var(--marfim);}

@media(max-width:1199px){
  .nav__links{display:none;}
}

/* --------------------------------------------------------------------------
   4b. PADRÕES DE SEÇÃO
   -------------------------------------------------------------------------- */
.secao{position:relative;overflow:hidden;}
.secao__col{
  position:relative;z-index:1;
  width:100%;margin-inline:auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* Malha arquitetônica (97:2519 / 105:1202) — véu verde recortado pelo desenho */
.malha{
  position:absolute;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(30,58,52,.3) 0%,rgba(30,58,52,0) 100%);
  -webkit-mask-image:var(--malha);mask-image:var(--malha);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.eyebrow{
  font-family:var(--f-titulo);font-size:12px;font-weight:var(--p-funcional);
  line-height:1.2;letter-spacing:1.92px;text-transform:uppercase;color:var(--travertino);
}
.secao h2{
  font-family:var(--f-texto);font-weight:var(--p-h2);
  font-size:32px;line-height:1.28;letter-spacing:-.32px;
}
.secao .lead{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:15px;line-height:1.7;}
.secao .corpo{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:16px;line-height:1.7;}
.secao .corpo strong{font-weight:var(--p-destaque);}
@media(max-width:767px){
  .secao h2{font-size:22px;line-height:1.26;letter-spacing:-.22px;}
  .secao .lead{font-size:14px;line-height:1.6;}
}

/* --------------------------------------------------------------------------
   5. HERO + BARRA DE DADOS  (Figma 35:80 desktop · 35:445 mobile)
   -------------------------------------------------------------------------- */
/* 35:80 fecha em 569: 51.31 (topo) + 299.892 (Texto Hero) + 42.8 + 131
   (Barra de Dados, que começa em y=394) + 44 de base. */
.hero{
  position:relative;overflow:hidden;background:var(--preto);
  padding:51.31px 0 44px;
}
.hero__fundo{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;z-index:0;pointer-events:none;}
.hero__foto{position:absolute;left:0;top:-18.96%;width:100%;height:137.93%;max-width:none;}
.hero__veu{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,19,16,.94) 0%,rgba(18,19,16,.72) 60.096%,rgba(18,19,16,.34) 100%);
}
/* Camada_1 — halos circulares âmbar (97:205 e 97:210) */
.hero__halo{position:absolute;width:1185.37px;height:594px;pointer-events:none;}
.hero__halo--esq{left:calc(50% - 1235.005px);top:-12px;}
.hero__halo--dir{left:calc(50% + 82px);top:-25px;}
/* Marca d'água (91:200) */
.hero__marca{position:absolute;z-index:1;left:calc(50% + 234.42px);top:74.95px;width:197.766px;height:295.622px;pointer-events:none;}
.hero__marca svg{width:100%;height:100%;}
.hero__marca path{fill:url(#marcaGradD);}

/* Texto Hero (35:87) mede 529.382 e começa em x=359.83 — o Conteudo Hero
   (35:82, w 567.783) fica em calc(50% - 110.11px) com translate -50%. */
.hero__texto{position:relative;z-index:2;width:529.382px;min-height:299.892px;margin-left:calc(50% - 360.17px);}
/* Trilho (35:83) + pontos */
.hero__trilho{position:absolute;left:-32.17px;top:0;bottom:-0.44px;width:.828px;background:var(--marfim-24);}
.hero__trilho span{position:absolute;left:-1.66px;width:4.138px;height:4.138px;border-radius:50%;background:var(--ambar);}
.hero__trilho span:nth-child(1){top:0;}
.hero__trilho span:nth-child(2){top:122.5px;}
.hero__trilho span:nth-child(3){top:244.99px;}

.hero h1{
  font-family:var(--f-titulo);font-size:46.35px;font-weight:var(--p-h1);
  line-height:1.12;letter-spacing:0;color:var(--marfim);
}
.hero h1 .l2{color:var(--ambar);}
/* 35:89: caixa de 484.581 com quebra dura depois de "imobiliário —".
   Tamanho e entrelinha do Figma; peso pelo manual (corpo = Author 400). */
.hero .lead{
  width:484.581px;max-width:100%;margin-top:19.864px;
  font-family:var(--f-texto);font-size:18.286px;line-height:1.7;color:var(--marfim-82);
}
/* A quebra é do design, não do fluxo — vira bloco de altura zero para não
   somar linha. No mobile o 35:454 é parágrafo corrido, então volta a inline. */
.hero .lead .lbr{display:block;height:0;}
.hero__cta{margin-top:19.864px;}
/* Botao / Claro em escala hero (35:90) */
.hero__cta .btn{
  padding:21.952px 32.928px;gap:10.976px;border-width:1.372px;border-radius:5.488px;
  border-color:var(--ambar);font-size:17.84px;letter-spacing:.7136px;
}
.hero__cta .btn svg{width:19.208px;height:19.208px;stroke-width:1.6;}

/* Barra de Dados (35:92) */
.barra-dados{
  position:relative;z-index:2;width:1040px;max-width:100%;margin:42.8px auto 0;
  display:flex;align-items:stretch;
  padding:32px 16px;border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--marfim-12);
  background:linear-gradient(180deg,rgba(30,58,52,.8) 0%,rgba(18,19,16,.5) 100%);
}
/* Cada Dado é uma coluna: "Simbolo e numero" (113:62) em cima, rótulo embaixo.
   Alturas travadas em px porque a caixa fecha por soma: 8+26+8+17+8 = 67,
   e 32+67+32 = 131, a altura do frame 35:92. */
.barra-dados .dado{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 16px;border-right:1px solid var(--marfim-12);
}
.barra-dados .dado:last-child{border-right:0;}
.barra-dados .simb{display:flex;align-items:center;gap:12px;white-space:nowrap;}
.barra-dados .dado svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--travertino);stroke-width:1.40833;}
.barra-dados .num{
  font-family:var(--f-titulo);font-size:24px;font-weight:var(--p-funcional);line-height:26px;color:var(--marfim);
}
.barra-dados .rot{
  font-family:var(--f-texto);font-size:12px;line-height:17px;color:var(--marfim-60);
  align-self:stretch;text-align:center;
}

@media(max-width:1199px){
  .hero__texto{margin-left:0;margin-inline:var(--gutter);width:auto;max-width:529.382px;}
  .hero__trilho{left:-24px;}
  .barra-dados{margin-inline:var(--gutter);width:auto;}
  .hero__marca{left:auto;right:var(--gutter);}
}
@media(max-width:959px){
  .hero__marca,.hero__halo{display:none;}
  .barra-dados{flex-wrap:wrap;}
  .barra-dados .dado{flex:1 1 45%;}
  .barra-dados .dado:nth-child(2){border-right:0;}
}
@media(max-width:767px){
  /* 8px embaixo, não 24: o frame 35:445 mede 818 e a barra fecha em 810. */
  .hero{padding:64px 32px 8px;text-align:center;}
  /* O 35:446 cresceu de 470 para 818 — a foto agora cobre o hero inteiro,
     inclusive atrás da barra de dados, com o recorte do Figma: 373,14% de
     largura puxada para -136,57%. Sem isso a foto entra enquadrada errado. */
  .hero__fundo{bottom:0;height:auto;}
  .hero__foto{left:-136.57%;top:0;width:373.14%;height:100.37%;object-fit:cover;}
  .hero__veu{background:linear-gradient(180deg,rgba(18,19,16,.9) 0%,rgba(18,19,16,.74) 55%,rgba(18,19,16,.92) 100%);}
  /* No Figma mobile o bloco de texto é posicionado por offsets absolutos
     (h1 em 28, lead em 141, botão em 257 dentro de uma caixa de 303).
     Reproduzir isso mantém a barra de dados no lugar mesmo quando a
     Author quebra o parágrafo em 3 linhas em vez de 4. */
  .hero__texto{position:relative;margin:0;width:auto;max-width:none;min-height:303px;}
  /* 177:113 — o mesmo trilho do desktop, deitado: no mobile ele é uma régua
     horizontal de 249px entre o H1 e o lead, com os 3 pontos nas pontas e no
     meio. A espessura é a altura da caixa do Figma (303−124−178 = 1). */
  .hero__trilho{
    display:block;left:50%;transform:translateX(-50%);
    top:124px;bottom:auto;width:249px;height:1px;
  }
  /* top precisa vir em cada :nth-child — as regras do desktop têm a mesma
     especificidade e um `span{top:50%}` genérico perde para elas, jogando os
     pontos 2 e 3 para baixo do lead. */
  .hero__trilho span:nth-child(1){top:50%;left:0;margin-top:-2.069px;}
  .hero__trilho span:nth-child(2){top:50%;left:122.5px;margin-top:-2.069px;}
  .hero__trilho span:nth-child(3){top:50%;left:244.99px;margin-top:-2.069px;}
  /* 97:2524 fica em 90.08/11.88 dentro do frame. O absolute resolve contra a
     caixa de padding do .hero, não contra o conteúdo — os valores antigos
     (58.08/-52.12) descontavam o padding duas vezes. */
  .hero__marca{
    display:block;left:90.08px;right:auto;top:11.88px;
    width:300.385px;height:449.019px;opacity:.21;
  }
  .hero__marca path{fill:url(#marcaGradM);}
  /* 35:453: 34px/1.16 em 2 linhas, começando em y=28. Absoluto como o lead e
     o botão — com margin o offset colapsaria para fora e esticaria a seção.
     A quebra forçada que existia aqui saiu: o V2 atual cabe em 2 linhas. */
  .hero h1{position:absolute;left:0;right:0;top:28px;font-size:34px;line-height:1.16;letter-spacing:0;}
  /* 35:454 desceu de 141 para 156 quando o H1 passou a caber em 2 linhas. */
  .hero .lead{position:absolute;left:0;right:0;top:156px;width:auto;margin-top:0;font-size:15px;line-height:1.55;}
  .hero .lead .lbr{display:inline;}
  /* 35:455 é centralizado no frame (left 50% com -translate-x-1/2). */
  .hero__cta{position:absolute;left:0;right:0;top:257px;margin-top:0;text-align:center;}
  .hero__cta .btn{padding:16px 24px;gap:8px;border-width:1px;border-radius:4px;font-size:13px;letter-spacing:.52px;}
  .hero__cta .btn svg{width:14px;height:14px;stroke-width:1.16667;}
  .barra-dados{
    margin:63px 0 0;width:auto;flex-direction:column;padding:24px 16px;
  }
  /* Mesma coluna do desktop e também centralizada — decisão do cliente, não do
     Figma: o 35:458 ancora "Simbolo e numero" e rótulo em x=0. Herdamos o
     align-items:center da regra base. Altura: 16+26+8+17+16 = 83.
     Divisória por inset shadow, não border: cada Dado mede 83px COM a linha,
     e 4×1px de borda estouraria a barra em 3px. */
  .barra-dados .dado{
    flex:none;width:100%;padding:16px 0;
    border-right:0;box-shadow:inset 0 -1px 0 var(--marfim-12);
  }
  .barra-dados .dado:last-child{box-shadow:none;}
  .barra-dados .simb{white-space:normal;}
}

/* --------------------------------------------------------------------------
   6. SOBRE  (Figma 35:124 desktop · 35:489 mobile)
   -------------------------------------------------------------------------- */
.sobre{
  background:var(--verde);color:var(--marfim);
  min-height:579px;padding:70px 0;
  display:flex;align-items:center;
}
.sobre .malha{left:-115px;top:-120px;width:1736px;height:868px;
  -webkit-mask-size:1736px 868px;mask-size:1736px 868px;}
.sobre .secao__col{max-width:1209px;}              /* 969 + 2×120 de respiro */
.sobre .eyebrow{margin-bottom:15.6px;}
.sobre h2{color:var(--ambar);max-width:597px;margin-bottom:39.08px;}
.sobre .lead{max-width:529px;color:var(--marfim-72);margin-bottom:17px;}
.sobre .corpo{max-width:631px;color:var(--marfim-72);margin-bottom:28.2px;}
.sobre .corpo strong{color:var(--marfim);}
/* Botao / Contorno Claro em escala maior (35:129) */
.sobre .btn{
  padding:20.522px 30.783px;gap:10.261px;border-width:1.283px;border-radius:5.13px;
  border-color:var(--ambar);color:var(--ambar);font-size:16.67px;letter-spacing:.6668px;
}
.sobre .btn svg{width:17.957px;height:17.957px;stroke-width:1.5;}
.sobre .btn:hover{background:rgba(255,207,91,.12);}

@media(max-width:767px){
  .sobre{min-height:0;padding:48px 0;display:block;}
  .sobre .malha{left:-456.06px;top:-108px;width:1320px;height:660px;
    -webkit-mask-size:1320px 660px;mask-size:1320px 660px;}
  .sobre .secao__col{padding-inline:32px;}
  .sobre .eyebrow{order:1;margin-bottom:12px;}
  .sobre h2{order:2;color:var(--marfim);max-width:none;margin-bottom:12px;}
  .sobre .lead{order:3;max-width:none;margin-bottom:12px;}
  .sobre .btn{order:4;margin-bottom:40px;
    padding:16px 24px;gap:8px;border-width:1px;border-radius:4px;
    font-size:13px;letter-spacing:.52px;}
  .sobre .btn svg{width:14px;height:14px;stroke-width:1.16667;}
  .sobre .corpo{order:5;max-width:none;margin-bottom:0;}
}

/* --------------------------------------------------------------------------
   7. IMÓVEIS  (Figma 35:132 desktop · 35:497 mobile)
   -------------------------------------------------------------------------- */
/* 35:139: o grid vai de x=524 a x=1394 — margem direita de 46px, não o gutter
   de 120. A assimetria é do desenho: os cards sangram para a borda.
   Vertical: 90.62 + 502.764 + 90.62 = 684, a altura do frame. */
.imoveis{
  background:var(--marfim);
  /* o 46 da direita também recebe --sobra, senão o quadro de 1440 sai do
     centro justo nesta seção, que é a única com calha assimétrica */
  padding:90.62px calc(46px + var(--sobra)) 90.62px var(--gutter);
  display:flex;align-items:center;gap:64px;
}
.imoveis__cab{
  position:relative;z-index:1;flex:none;width:340px;height:205px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.imoveis__texto{display:flex;flex-direction:column;gap:16px;}
.imoveis .eyebrow{color:var(--verde);}
.imoveis h2{color:var(--preto);}
.imoveis .lead{width:281px;color:var(--cinza);}
/* Botao / Contorno Escuro no desktop vem preenchido de verde (35:138) */
.imoveis__cab .btn{
  align-self:flex-start;
  background:var(--verde);border-color:var(--verde);color:#fff;
  padding:17.489px 26.233px;gap:8.744px;border-width:1.093px;border-radius:4.372px;
  font-size:14.21px;letter-spacing:.5684px;
}
.imoveis__cab .btn svg{width:15.303px;height:15.303px;stroke-width:1.3;}
.imoveis__cab .btn:hover{background:#172E29;border-color:#172E29;}

/* O Grid Imoveis (35:139) está escalado ×1,093 no Figma — daí os números
   quebrados. A Coluna Titulo ao lado não está, por isso ela segue redonda. */
.imoveis__grid{position:relative;z-index:1;flex:1 1 0;min-width:0;height:502.764px;display:flex;gap:17.487px;}
.imoveis__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:17.487px;}
.card-imovel{
  position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;
  border:1.093px solid var(--travertino);border-radius:8.744px;overflow:hidden;
}
.card-imovel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card-imovel__legenda{
  position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:52.462px 17.487px 17.487px;
  background:linear-gradient(180deg,rgba(18,19,16,0) 0%,rgba(18,19,16,.72) 45%,rgba(18,19,16,.95) 100%);
}
.card-imovel__t{font-family:var(--f-texto);font-weight:var(--p-h2);font-size:15.302px;line-height:1.3;color:var(--marfim);}
.card-imovel__s{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:13.116px;line-height:1.4;color:var(--marfim-60);margin-top:2.186px;}
.card-imovel__seta{
  flex:none;width:34.975px;height:34.975px;border-radius:17.487px;border:1.093px solid var(--travertino);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s ease;
}
.card-imovel__seta svg{width:13.116px;height:13.116px;fill:none;stroke:var(--travertino);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;}
.card-imovel:hover .card-imovel__seta{background:var(--travertino-24);}

@media(max-width:1023px){
  .imoveis{flex-direction:column;align-items:stretch;gap:40px;padding:48px var(--gutter);}
  .imoveis__cab{width:auto;height:auto;gap:0;}   /* o Figma mobile encosta o botão no lead */
  .imoveis .lead{width:auto;}
  .imoveis__grid{flex:none;height:auto;flex-direction:column;}
  .card-imovel{flex:none;height:220px;}
}
@media(max-width:767px){
  .imoveis{padding:48px 32px;}
  .imoveis__cab .btn{
    background:transparent;border-color:var(--verde);color:var(--verde);
    padding:16px 24px;gap:8px;border-width:1px;border-radius:4px;
    font-size:13px;letter-spacing:.52px;
  }
  .imoveis__cab .btn svg{width:14px;height:14px;stroke-width:1.16667;}
  .imoveis__cab .btn:hover{background:rgba(30,58,52,.08);border-color:var(--verde);}
}

/* --------------------------------------------------------------------------
   8. CATEGORIAS  (Figma 35:188 desktop · 35:553 mobile)
   -------------------------------------------------------------------------- */
.categorias{background:var(--preto);color:var(--marfim);padding:93px 0 112px;}
/* Camada_1 (97:221) — disco verde esmaecido atrás do conteúdo */
.categorias__halo{
  position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  width:1063.8px;height:1063.8px;left:calc(50% - 531.9px);top:calc(50% - 531.9px);
  background:linear-gradient(180deg,rgba(30,58,52,.6) 0%,rgba(30,58,52,.6) 23.85%,transparent 92.45%);
}
.categorias__titulo{
  position:relative;z-index:1;width:640px;max-width:calc(100% - 2 * var(--gutter));margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.categorias h2{color:var(--marfim);width:374px;max-width:100%;}
.categorias .lead{width:432px;max-width:100%;color:var(--marfim-72);}
.categorias__grid{
  position:relative;z-index:1;margin-top:67.35px;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;
}
.card-cat{
  min-height:229px;display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:32px 20px;border-radius:8px;
  background:var(--verde);border:1px solid var(--marfim-12);text-align:center;
}
.card-cat svg{width:28px;height:28px;flex:none;fill:none;stroke:var(--ambar);stroke-width:.91;stroke-linecap:round;stroke-linejoin:round;}
.card-cat__txt{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;}
.card-cat h3{font-family:var(--f-texto);font-weight:var(--p-h2);font-size:16px;line-height:1.3;color:var(--marfim);}
.card-cat p{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:13px;line-height:1.6;color:var(--marfim-60);}

@media(max-width:1023px){
  .categorias__grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
}
@media(max-width:767px){
  .categorias{padding:48px 0;}
  .categorias__halo{width:606.013px;height:606.013px;left:calc(50% - 303px);top:calc(50% - 462.5px);}
  /* O Figma mobile posiciona o bloco por offsets absolutos (0 / 26 / 94).
     Manter os offsets em vez de somar gaps evita que uma linha a menos
     na Author arraste tudo para cima. */
  .categorias__titulo{
    display:block;position:relative;width:auto;max-width:none;
    padding:0 32px;min-height:160px;
  }
  .categorias .eyebrow{position:absolute;left:32px;right:32px;top:0;}
  .categorias h2{position:absolute;left:32px;right:32px;top:26px;width:auto;}
  .categorias .lead{position:absolute;left:32px;right:32px;top:94px;width:auto;}
  .categorias__grid{
    margin-top:40px;padding-inline:32px;grid-template-columns:1fr;gap:16px;
  }
  .card-cat{
    min-height:0;flex-direction:row;align-items:flex-start;gap:16px;padding:20px;text-align:left;
  }
  .card-cat__txt{align-items:flex-start;gap:6px;flex:1 1 0;min-width:0;width:auto;}
  .card-cat h3{font-size:15px;}
  .card-cat p{line-height:1.5;}
}

/* --------------------------------------------------------------------------
   9. ESPECIALISTAS  (Figma 35:224 desktop · 35:589 mobile)
   -------------------------------------------------------------------------- */
.especialistas{background:var(--marfim);padding:59px 0 112px;}
/* O 35:224 empilha três camadas, não duas: marfim, grão em 230,4px (não os
   45px do resto) e uma foto a 20% POR CIMA do grão. Sem a foto a seção fica
   ~8 níveis mais clara que o Figma. z-index 0 para ficar sob o conteúdo — e
   como vem depois do ::before no DOM, pinta acima do grão, como no Figma. */
.especialistas__fundo{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.2;
}
/* NÃO usar o w-447.92%/left--111.02% do export: aquilo é a transformação
   interna do fill do Figma e, traduzida ao pé da letra, amplia a parede ~3× e
   a estica. O resultado real é um cover da seção. */
.especialistas__fundo img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
}
.especialistas__titulo{
  position:relative;z-index:1;width:640px;max-width:calc(100% - 2 * var(--gutter));margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.especialistas .eyebrow{color:var(--verde);}
.especialistas h2{color:var(--preto);width:364px;max-width:100%;}
.especialistas .lead{color:var(--cinza);}
.especialistas__titulo .btn{border-color:var(--verde);color:var(--verde);}
.especialistas__titulo .btn:hover{background:rgba(30,58,52,.08);}
.especialistas__grid{
  position:relative;z-index:1;margin-top:47.2px;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
}
.card-esp{
  position:relative;display:flex;flex-direction:column;height:380px;
  background:var(--verde);border-radius:8px;overflow:hidden;
}
.card-esp__foto{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;}
.card-esp__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.card-esp__foto svg{width:96px;height:96px;fill:none;stroke:var(--marfim-24);stroke-width:4;stroke-linecap:round;}
.card-esp__tag{
  position:absolute;top:8px;right:8px;z-index:1;
  background:var(--preto-72);padding:6px 8px;
  font-family:var(--f-titulo);font-size:9px;font-weight:var(--p-funcional);line-height:1;
  letter-spacing:.54px;text-transform:uppercase;color:var(--marfim-60);
}
.card-esp__info{
  margin-top:auto;position:relative;z-index:2;
  background:rgba(18,19,16,.88);padding:16px;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
}
.card-esp__info h3{font-family:var(--f-texto);font-weight:var(--p-h2);font-size:16px;line-height:1.3;color:var(--marfim);}
.card-esp__fn{
  font-family:var(--f-titulo);font-size:11px;font-weight:var(--p-funcional);line-height:1.3;
  letter-spacing:.66px;text-transform:uppercase;color:var(--travertino);
}
.card-esp__anos{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:12px;line-height:1.4;color:var(--marfim-60);}
/* 35:604/605 — o texto do link é nowrap no Figma. Sem isso ele estoura o card
   do mobile por 0,7px, quebra em duas linhas e engorda a seção em 25px. */
.card-esp__lnk{
  align-self:flex-start;white-space:nowrap;
  margin-top:4px;padding-bottom:3px;border-bottom:1px solid var(--travertino);
  font-family:var(--f-titulo);font-size:11px;font-weight:var(--p-funcional);line-height:1.3;
  letter-spacing:.66px;text-transform:uppercase;color:var(--travertino);
  transition:color .2s ease,border-color .2s ease;
}
.card-esp__lnk:hover{color:var(--marfim);border-color:var(--marfim);}

@media(max-width:1023px){
  .especialistas__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:767px){
  .especialistas{padding:48px 0;}
  .especialistas__titulo{
    display:block;position:relative;width:auto;max-width:none;
    padding:0 32px;min-height:196px;
  }
  .especialistas .eyebrow{position:absolute;left:32px;right:32px;top:0;}
  .especialistas h2{position:absolute;left:36px;right:36px;top:26px;width:auto;}
  .especialistas .lead{position:absolute;left:32px;right:32px;top:94px;}
  .especialistas__titulo .btn{position:absolute;left:50%;transform:translateX(-50%);top:150px;}
  .especialistas__grid{margin-top:40px;padding-inline:32px;gap:12px;}
  .card-esp{height:auto;background:var(--preto);}
  .card-esp__foto{position:relative;inset:auto;height:190px;flex:none;background:var(--verde);}
  .card-esp__info{background:transparent;padding:14px;gap:3px;}
  .card-esp__info h3{font-size:15px;}
  /* 35:604: pt 8 / pb 3 somado ao gap 3 do Info — não margin-top 4.
     Tracking de .66 para .42: "Falar com Giuliano" é o rótulo mais longo dos
     quatro e passava 2,4px do card de 157px. Só aqui — o valor do Figma
     continua valendo do 768 para cima. */
  .card-esp__lnk{margin-top:0;padding-top:8px;letter-spacing:.42px;}
  .card-esp__tag{padding:4px 6px;}
}

/* --------------------------------------------------------------------------
   10. PROCESSO  (Figma 35:279 desktop · 35:644 mobile)
   -------------------------------------------------------------------------- */
.processo{background:var(--preto);color:var(--marfim);padding:112px 0 124px;}
/* Discos travertino (97:228 / 97:231 / 97:233) */
.processo__disco{
  position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  /* Curva calibrada contra o render do Figma: a interpolação de alfa do
     editor cai mais rápido que a do CSS com os mesmos stops. */
  background:linear-gradient(180deg,rgba(200,187,168,.34) 9.49%,rgba(200,187,168,0) 74.2%);
}
.processo__disco--esq{width:612.2px;height:612.2px;left:-306px;top:6px;}
.processo__disco--dir{width:612.2px;height:612.2px;left:calc(50% + 414px);top:6px;}
.processo__disco--centro{width:1062.2px;height:1062.2px;left:calc(50% - 531.1px);top:-202px;}
.processo__titulo{
  position:relative;z-index:1;width:640px;max-width:calc(100% - 2 * var(--gutter));margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;min-height:200px;
}
.processo h2{color:var(--marfim);}
.processo .lead{color:var(--marfim-72);}
.processo__titulo .btn{
  margin-top:auto;border-color:var(--ambar);color:var(--ambar);
  padding:19.826px 29.739px;gap:9.913px;border-width:1.239px;border-radius:4.957px;
  font-size:16.11px;letter-spacing:.6444px;
}
.processo__titulo .btn svg{width:17.348px;height:17.348px;stroke-width:1.4;}
.processo__titulo .btn:hover{background:rgba(255,207,91,.12);}

.processo__trilha{
  position:relative;z-index:1;margin-top:56px;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;
}
.proc-etapa{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.proc-etapa .n{
  width:48px;height:48px;border-radius:24px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--ambar);border:1px solid var(--ambar);
  font-family:var(--f-titulo);font-size:14px;font-weight:var(--p-funcional);line-height:1.2;color:var(--preto);
}
.proc-etapa__conector{position:relative;width:100%;height:0;}
.proc-etapa__conector::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--travertino-40) 0 4px,transparent 4px 8px);
}
.proc-etapa__txt{padding-top:16px;display:flex;flex-direction:column;gap:8px;width:100%;}
.proc-etapa h3{font-family:var(--f-texto);font-weight:var(--p-h2);font-size:15px;line-height:1.3;color:var(--marfim);}
.proc-etapa p{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:13px;line-height:1.6;color:var(--marfim-60);}

@media(max-width:1023px){
  .processo__trilha{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));row-gap:40px;}
}
@media(max-width:767px){
  .processo{padding:48px 0 70px;}
  .processo__disco--esq{width:228.811px;height:228.811px;left:calc(50% - 383.5px);top:-64.5px;}
  .processo__disco--dir{width:228.811px;height:228.811px;left:calc(50% + 154.7px);top:-64.5px;}
  .processo__disco--centro{width:397px;height:397px;left:calc(50% - 198.5px);top:-2.5px;}
  .processo__titulo{width:auto;max-width:none;padding-inline:32px;min-height:211px;}
  .processo h2{width:230px;max-width:100%;}
  .processo .lead{width:274px;max-width:100%;}
  .processo__titulo .btn{
    padding:16px 24px;gap:8px;border-width:1px;border-radius:4px;
    font-size:13px;letter-spacing:.52px;
  }
  .processo__titulo .btn svg{width:14px;height:14px;stroke-width:1.16667;}
  .processo__trilha{
    margin-top:39px;padding-inline:32px;grid-template-columns:1fr;gap:20px;
  }
  .proc-etapa{flex-direction:row;align-items:flex-start;gap:16px;text-align:left;min-height:63px;}
  .proc-etapa .n{width:40px;height:40px;border-radius:20px;border-color:var(--travertino-40);}
  .proc-etapa__conector{display:none;}
  .proc-etapa__txt{padding-top:0;gap:4px;flex:1 1 0;min-width:0;}
  .proc-etapa p{line-height:1.5;}
}

/* --------------------------------------------------------------------------
   11. PROVA SOCIAL  (Figma 35:322 desktop · 35:687 mobile)
   O export declara py-112, mas o frame é de altura fixa e o respiro real
   medido no render é 72. Vale a medida.
   -------------------------------------------------------------------------- */
.prova{
  background:var(--verde);color:var(--marfim);
  padding:72px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:64px;
}
.prova__cab{
  position:relative;z-index:1;flex:none;width:340px;min-height:254px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.prova__texto{display:flex;flex-direction:column;gap:16px;}
.prova h2{color:var(--marfim);}
.prova .lead{color:var(--marfim-72);}
.prova__cab .btn{align-self:flex-start;border-color:var(--ambar);color:var(--ambar);}
.prova__cab .btn:hover{background:rgba(255,207,91,.12);}
.prova__grid{
  position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:254px;padding-top:39px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;
}
.card-prova{
  min-height:176px;padding:24px;border-radius:8px;
  border:1px dashed var(--travertino-40);
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
}
.card-prova svg{width:24px;height:24px;flex:none;fill:var(--travertino);}
.card-prova p{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:13px;line-height:1.6;color:var(--marfim-60);}

@media(max-width:1023px){
  .prova{flex-direction:column;align-items:stretch;gap:40px;padding:48px var(--gutter);}
  .prova__cab{width:auto;min-height:0;gap:16px;}
  .prova__grid{flex:none;grid-template-columns:1fr;padding-top:0;min-height:0;}
}
@media(max-width:767px){
  .prova{padding:48px 32px;}
  .prova__cab{gap:0;}
  .card-prova{min-height:0;gap:0;}   /* no mobile o cartão é de altura automática */
  .card-prova p{line-height:1.5;}
}

/* --------------------------------------------------------------------------
   12. POR QUE  (Figma 35:342 desktop · 35:707 mobile)
   -------------------------------------------------------------------------- */
.porque{background:var(--marfim);padding:91px 0 112px;}
.porque .malha{
  left:-151.28px;top:-198.1px;width:1808.563px;height:1024.193px;
  background:linear-gradient(180deg,rgba(200,187,168,.2) 0%,rgba(200,187,168,0) 100%);
  -webkit-mask-size:1808.563px 1024.193px;mask-size:1808.563px 1024.193px;
}
.porque__titulo{
  position:relative;z-index:1;width:640px;max-width:calc(100% - 2 * var(--gutter));margin-inline:auto;
  min-height:222px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.porque .eyebrow{color:var(--verde);margin-bottom:15.6px;}   /* h2 no topo 30 */
.porque h2{color:var(--preto);margin-bottom:16.04px;}        /* lead no topo 87 */
.porque .lead{width:464px;max-width:100%;color:var(--cinza);margin-bottom:16.5px;}
/* Botao / Contorno Escuro preenchido de âmbar em escala maior (35:347) */
.porque__titulo .btn{
  background:var(--ambar);border-color:var(--travertino);color:var(--verde);
  padding:23.304px 34.957px;gap:11.652px;border-width:1.457px;border-radius:5.826px;
  font-size:18.93px;letter-spacing:.7572px;
}
.porque__titulo .btn svg{width:20.391px;height:20.391px;stroke-width:1.7;}
.porque__titulo .btn:hover{background:#F7C444;}

.porque__grid{
  position:relative;z-index:1;margin-top:56px;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
}
.card-porque{
  min-height:173px;padding:24px;border-radius:8px;
  background:var(--verde);border:1px solid rgba(30,58,52,.12);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.card-porque .n{
  width:32px;height:32px;border-radius:16px;flex:none;margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;background:#fff;
  font-family:var(--f-titulo);font-size:12px;font-weight:var(--p-funcional);line-height:1.2;color:var(--verde);
}
.card-porque h3{font-family:var(--f-texto);font-weight:var(--p-h2);font-size:15px;line-height:1.3;color:#fff;}
.card-porque p{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:13px;line-height:1.6;color:#fff;}

@media(max-width:1023px){
  .porque__grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
}
@media(max-width:767px){
  .porque{padding:48px 0;}
  .porque .malha{
    left:-367.23px;top:-127px;width:1142.34px;height:646.91px;
    -webkit-mask-size:1142.34px 646.91px;mask-size:1142.34px 646.91px;
  }
  .porque__titulo{width:auto;max-width:none;padding-inline:32px;min-height:0;}
  .porque .eyebrow{margin-bottom:12px;}
  .porque h2{margin-bottom:12px;}
  .porque .lead{width:auto;margin-bottom:12px;}
  .porque__titulo .btn{
    padding:16px 24px;gap:8px;border-width:1px;border-radius:4px;
    font-size:13px;letter-spacing:.52px;
  }
  .porque__titulo .btn svg{width:14px;height:14px;stroke-width:1.16667;}
  .porque__grid{margin-top:40px;padding-inline:32px;grid-template-columns:1fr;}
  /* No mobile o cartão inverte: fundo branco, texto escuro, número verde */
  .card-porque{
    min-height:0;flex-direction:row;align-items:flex-start;gap:16px;padding:20px;
    background:#fff;
  }
  .card-porque .n{margin-bottom:0;background:var(--verde);color:var(--travertino);}
  .card-porque__txt{display:flex;flex-direction:column;gap:6px;flex:1 1 0;min-width:0;}
  .card-porque h3{color:var(--preto);}
  .card-porque p{color:var(--cinza);line-height:1.5;}
}

/* --------------------------------------------------------------------------
   13. OBJEÇÃO  (Figma 35:373 desktop · 35:738 mobile)
   -------------------------------------------------------------------------- */
.objecao{
  background:var(--preto);color:var(--marfim);
  padding:112px var(--gutter);
  display:flex;align-items:flex-start;gap:64px;
}
.objecao__titulo{
  position:relative;z-index:1;flex:none;width:340px;
  display:flex;flex-direction:column;gap:16px;
}
.objecao h2{color:var(--ambar);}
.objecao__conteudo{
  position:relative;z-index:1;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
.objecao .corpo{width:640px;max-width:100%;color:var(--marfim-72);}
.objecao__conteudo .btn{margin-top:8px;border-color:var(--ambar);color:var(--ambar);}
.objecao__conteudo .btn:hover{background:rgba(255,207,91,.12);}

@media(max-width:1023px){
  .objecao{flex-direction:column;gap:40px;padding:48px var(--gutter);}
  .objecao__titulo{width:auto;gap:12px;}
  .objecao__conteudo{flex:none;width:100%;}
  .objecao .corpo{width:auto;}
}
@media(max-width:767px){
  .objecao{padding:48px 32px;}
  .objecao .corpo{font-size:15px;line-height:1.55;}
}

/* --------------------------------------------------------------------------
   14. RODAPÉ  (Figma 35:382 desktop · 35:747 mobile)
   -------------------------------------------------------------------------- */
.rodape{background:var(--verde);color:var(--marfim);padding:64px var(--gutter) 24px;}
.rodape__topo{
  position:relative;z-index:1;display:flex;gap:48px;align-items:flex-start;padding-bottom:32px;
}
.rodape__cta{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.rodape__cta h2{
  font-family:var(--f-titulo);font-weight:var(--p-funcional);
  font-size:24px;line-height:1.3;letter-spacing:-.24px;color:var(--marfim);width:340px;max-width:100%;
}
.rodape__cta h2 span{color:var(--ambar);}
.rodape__contato{flex:none;width:280px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.rodape__linha{display:flex;align-items:center;gap:8px;width:100%;}
.rodape__linha svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--travertino);stroke-width:1.05;}
.rodape__linha span{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:13px;line-height:1.6;color:var(--marfim);}
.rodape__sub{
  font-family:var(--f-titulo);font-size:11px;font-weight:var(--p-funcional);line-height:1.2;
  letter-spacing:1.32px;text-transform:uppercase;color:var(--travertino);
}
.rodape__social{display:flex;gap:8px;}
.rodape__social a{
  width:32px;height:32px;border-radius:16px;border:1px solid var(--travertino-40);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s ease;
}
.rodape__social a:hover{background:var(--travertino-24);}
.rodape__social svg{width:16px;height:16px;fill:none;stroke:var(--travertino);stroke-width:.933333;}
.rodape__marca{flex:none;width:240px;}
.rodape__marca p{font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:12px;line-height:1.6;color:var(--marfim-60);}
.rodape__divisor{position:relative;z-index:1;height:1px;background:var(--marfim-12);}
.rodape__base{
  position:relative;z-index:1;padding-top:20px;display:flex;justify-content:space-between;gap:12px;
  font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:11px;line-height:1.4;color:var(--marfim-60);
  white-space:nowrap;
}
.rodape__base a{color:var(--travertino);}

/* Degrau subido de 1023 para 1199: com "Encontrar meu imóvel" o botão pede
   247px, e entre 1024 e 1199 o flex:1 espremia a coluna do CTA para 222. */
@media(max-width:1199px){
  .rodape__topo{flex-wrap:wrap;gap:32px;}
  .rodape__cta{flex:1 1 100%;}
}
@media(max-width:767px){
  .rodape{padding:40px 32px 20px;}
  .rodape__topo{flex-direction:column;gap:24px;padding-bottom:24px;}
  .rodape__cta{gap:16px;}
  .rodape__cta h2{font-size:18px;letter-spacing:-.18px;width:auto;}
  .rodape__cta h2 span{color:var(--travertino);}
  .rodape__cta .btn{display:none;}          /* no mobile o CTA fica só na barra fixa */
  .rodape__contato,.rodape__marca{width:100%;}
  .rodape__base{flex-direction:column;gap:0;white-space:normal;}
}

/* --------------------------------------------------------------------------
   15. BARRA CTA FIXA  (Figma 35:424 desktop · 35:789 mobile)
   -------------------------------------------------------------------------- */
.barra-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--preto);border-top:1px solid var(--marfim-12);
  padding:38px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.barra-cta__txt{
  font-family:var(--f-texto);font-weight:var(--p-corpo);font-size:14px;line-height:1.6;
  color:var(--marfim-72);white-space:nowrap;
}
.barra-cta__txt strong{font-weight:var(--p-destaque);color:var(--travertino);}
.barra-cta .btn{padding:12px 20px;}
@media(max-width:767px){
  body{padding-bottom:87px;}
  .barra-cta{padding:25px 32px;justify-content:center;}
  .barra-cta__txt{display:none;}
}
@media(max-width:767px){
  .nav{height:72px;padding:0 32px;}
  .nav__logo{width:auto;gap:8px;}
  .nav__marca{width:28px;height:28px;}
  .nav__marca svg,.nav__marca img{width:100%;height:100%;object-fit:contain;}
  .nav__palavra{margin-left:0;font-size:13px;letter-spacing:1.04px;line-height:1;}
  .nav__palavra b{font-size:13px;font-weight:var(--p-funcional);letter-spacing:1.04px;color:var(--marfim);}
  .nav__palavra span{font-size:13px;font-weight:400;letter-spacing:1.04px;color:var(--marfim-72);margin-top:0;}
  .nav__acoes .btn{display:none;}
}

/* ==========================================================================
   17. MOVIMENTO
   Regras: só opacity/transform/filter/box-shadow (nada que desloque layout);
   nenhuma animação decide o estado final; `?qa=1` e prefers-reduced-motion
   congelam tudo. O JS só ACRESCENTA estado — sem ele a página fica completa.
   ========================================================================== */
:root{
  --t-rapido:.18s; --t-medio:.32s; --t-lento:.62s;
  --curva:cubic-bezier(.2,.7,.3,1);
}

/* --- Botões: expandem, o stroke recebe uma varredura dourada -------------- */
.btn{
  position:relative;
  transition:background-color var(--t-rapido) ease,color var(--t-rapido) ease,
             border-color var(--t-rapido) ease,
             transform var(--t-medio) var(--curva),
             box-shadow var(--t-medio) var(--curva);
}
.btn:hover{transform:translateY(-2px) scale(1.03);}
.btn:active{transform:translateY(0) scale(.99);transition-duration:.08s;}
.btn:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;}
.btn svg{transition:transform var(--t-medio) var(--curva),filter var(--t-medio) ease;}
.btn:hover svg{transform:translateX(3px);filter:drop-shadow(0 0 4px rgba(255,207,91,.6));}

/* varredura no contorno: gradiente recortado só na espessura da borda */
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(105deg,transparent 36%,var(--ambar) 50%,transparent 64%);
  background-size:300% 100%;background-position:200% 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-rapido) ease;
}
.btn:hover::after{opacity:1;animation:varre-stroke .85s var(--curva);}
@keyframes varre-stroke{from{background-position:200% 0}to{background-position:-100% 0}}

/* varredura no preenchimento dos botões cheios */
.btn--claro::before,.btn--escuro::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  background-size:300% 100%;background-position:200% 0;opacity:0;
  transition:opacity var(--t-rapido) ease;
}
.btn--claro:hover::before,.btn--escuro:hover::before{opacity:1;animation:varre-fill .85s var(--curva);}
@keyframes varre-fill{from{background-position:200% 0}to{background-position:-100% 0}}
.btn--claro:hover{box-shadow:0 6px 20px -6px rgba(255,207,91,.55);}
.btn--contorno-claro:hover,.btn--contorno-escuro:hover{box-shadow:0 6px 18px -8px rgba(0,0,0,.35);}

/* --- Ícones de stroke reluzem junto ao pai ------------------------------- */
.card-imovel__seta svg,.card-cat svg,.barra-dados .dado svg,
.rodape__linha svg,.rodape__social svg,.card-esp__lnk{
  transition:filter var(--t-medio) ease,stroke var(--t-medio) ease,color var(--t-medio) ease;
}
.card-imovel:hover .card-imovel__seta svg,
.card-cat:hover svg,
.barra-dados .dado:hover svg,
.rodape__linha:hover svg,
.rodape__social a:hover svg{   /* `a:hover`, não o contêiner: senão acendem os três de uma vez */
  stroke:var(--ambar);
  filter:drop-shadow(0 0 5px rgba(255,207,91,.6));
}
.card-imovel__seta{transition:background-color var(--t-medio) ease,border-color var(--t-medio) ease,transform var(--t-medio) var(--curva);}
.card-imovel:hover .card-imovel__seta{border-color:var(--ambar);transform:scale(1.08);}

/* --- Os outros clicáveis expandem igual aos .btn -------------------------
   O ••• da nav, os links dos cards de especialista e os círculos de rede
   social não têm a classe .btn, mas são botões na função. */
.nav__menu,.rodape__social a{
  transition:background-color var(--t-rapido) ease,border-color var(--t-rapido) ease,
             transform var(--t-medio) var(--curva),box-shadow var(--t-medio) var(--curva);
}
.nav__menu:hover,.rodape__social a:hover{
  transform:scale(1.12);border-color:var(--ambar);
  box-shadow:0 4px 14px -6px rgba(255,207,91,.5);
}
.nav__menu:active,.rodape__social a:active{transform:scale(.97);transition-duration:.08s;}
.nav__menu circle{transition:fill var(--t-rapido) ease;}
.nav__menu:hover circle{fill:var(--ambar);}

/* o link do card é texto sublinhado: expande a partir da esquerda, senão
   a linha de base dança junto com o resto do card */
.card-esp__lnk{
  display:inline-block;transform-origin:left center;
  transition:color var(--t-medio) ease,border-color var(--t-medio) ease,
             transform var(--t-medio) var(--curva),filter var(--t-medio) ease;
}
.card-esp__lnk:hover{
  transform:scale(1.06);
  filter:drop-shadow(0 0 5px rgba(255,207,91,.45));
}
.nav__menu:focus-visible,.rodape__social a:focus-visible,.card-esp__lnk:focus-visible{
  outline:2px solid var(--ambar);outline-offset:3px;
}

/* Links de texto também expandem. Escala menor que a dos botões e origem à
   esquerda nos que são alinhados à esquerda — escalar texto pelo centro faz a
   linha caminhar para os dois lados e lê como defeito. */
.nav__links a,.rodape__linha,.nav__logo{
  transition:color var(--t-rapido) ease,transform var(--t-medio) var(--curva),filter var(--t-medio) ease;
}
.nav__links a:hover{transform:scale(1.08);}
.rodape__linha{transform-origin:left center;}
.rodape__linha:hover{transform:scale(1.04);}
.nav__logo{transform-origin:left center;}
.nav__logo:hover{transform:scale(1.04);}
.nav__links a:focus-visible,.rodape__linha:focus-visible,.nav__logo:focus-visible{
  outline:2px solid var(--ambar);outline-offset:4px;
}

/* --- Luz pulsando -------------------------------------------------------
   NÃO entra em .btn--claro nem .btn--escuro: esses dois já têm as duas
   varreduras de ouro (contorno + preenchimento) e ficariam poluídos.
   O pulso é de repouso — no hover ele para e a sombra do hover assume,
   senão os dois disputam a mesma box-shadow. Fases desencontradas para não
   piscarem em bloco. */
@keyframes pulso-luz{
  0%,100%{box-shadow:0 0 0 0 rgba(255,207,91,0);}
  50%    {box-shadow:0 0 16px 1px rgba(255,207,91,.30);}
}
@keyframes pulso-luz-escuro{   /* sobre fundo claro o âmbar puro some */
  0%,100%{box-shadow:0 0 0 0 rgba(200,187,168,0);}
  50%    {box-shadow:0 0 16px 1px rgba(30,58,52,.22);}
}
.js-motion .btn--contorno-claro,
.js-motion .nav__menu,
.js-motion .rodape__social a,
.js-motion .card-imovel__seta{animation:pulso-luz 3.6s ease-in-out infinite;}
.js-motion .btn--contorno-escuro,
.js-motion .card-esp__lnk{animation:pulso-luz-escuro 3.6s ease-in-out infinite;}

.js-motion .rodape__social a:nth-child(2){animation-delay:.6s;}
.js-motion .rodape__social a:nth-child(3){animation-delay:1.2s;}
/* a coluna do meio tem DOIS cards — sem o segundo seletor, duas setas
   dividiriam o mesmo atraso e piscariam em dupla */
.js-motion .imoveis__col:nth-child(2) .card-imovel:nth-child(1) .card-imovel__seta{animation-delay:.9s;}
.js-motion .imoveis__col:nth-child(2) .card-imovel:nth-child(2) .card-imovel__seta{animation-delay:1.35s;}
.js-motion .imoveis__col:nth-child(3) .card-imovel__seta{animation-delay:1.8s;}
.js-motion .card-esp:nth-child(2) .card-esp__lnk{animation-delay:.7s;}
.js-motion .card-esp:nth-child(3) .card-esp__lnk{animation-delay:1.4s;}
.js-motion .card-esp:nth-child(4) .card-esp__lnk{animation-delay:2.1s;}
.js-motion .nav__menu{animation-delay:1.5s;}

/* no hover o pulso sai de cena */
.js-motion .btn--contorno-claro:hover,.js-motion .btn--contorno-escuro:hover,
.js-motion .nav__menu:hover,.js-motion .rodape__social a:hover,
.js-motion .card-esp__lnk:hover,
.js-motion .card-imovel:hover .card-imovel__seta{animation:none;}

/* --- Cartões: elevação discreta e zoom na foto --------------------------- */
.card-imovel,.card-cat,.card-esp{transition:transform var(--t-medio) var(--curva),box-shadow var(--t-medio) var(--curva);}
.card-imovel:hover,.card-cat:hover,.card-esp:hover{transform:translateY(-4px);box-shadow:0 14px 32px -14px rgba(0,0,0,.5);}
.card-imovel img,.card-esp__foto img{transition:transform var(--t-lento) var(--curva);}
.card-imovel:hover img,.card-esp:hover .card-esp__foto img{transform:scale(1.05);}

/* --- Revelação ao rolar --------------------------------------------------
   :where() zera a especificidade da lista, então `.visivel` sempre vence.
   Se o JS não rodar, `.js-motion` não existe e nada disso se aplica. */
.js-motion :where(
  .secao .eyebrow,.secao h2,.secao .lead,.secao .btn,
  .card-imovel,.card-cat,.card-esp,.proc-etapa,.card-prova,.card-porque,
  .barra-dados .dado,.imoveis__cab,.objecao__conteudo,
  .rodape__cta,.rodape__contato,.rodape__marca
){
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t-lento) var(--curva),transform var(--t-lento) var(--curva);
}
.js-motion .visivel{opacity:1;transform:none;}

/* --- Pattern: o grão entra suave e as camadas decorativas respiram ------- */
.js-motion .tex::before{opacity:0;transition:opacity 1.2s var(--curva);}
.js-motion .tex.tex-vis::before{opacity:.16;}
.js-motion .tex--claro.tex-vis::before{opacity:.09;}
.js-motion .malha,.js-motion .categorias__halo,.js-motion .processo__disco{
  opacity:0;transition:opacity 1.4s var(--curva);
}
.js-motion .tex-vis .malha,
.js-motion .categorias.tex-vis .categorias__halo,
.js-motion .processo.tex-vis .processo__disco{opacity:1;}
/* respiro ambiente: filter multiplica a opacidade em vez de substituí-la */
@keyframes respira{0%,100%{filter:opacity(.82)}50%{filter:opacity(1)}}
.js-motion .categorias__halo{animation:respira 11s ease-in-out 1.4s infinite;}
.js-motion .processo__disco--esq{animation:respira 13s ease-in-out 1.4s infinite;}
.js-motion .processo__disco--dir{animation:respira 13s ease-in-out 2.6s infinite;}
.js-motion .processo__disco--centro{animation:respira 16s ease-in-out 2s infinite;}

/* --- Mobile: movimento próprio, ambiente desligado ----------------------- */
@media(max-width:767px){
  :root{--t-lento:.44s;--t-medio:.26s;}
  .js-motion :where(.secao .eyebrow,.secao h2,.secao .lead,.secao .btn,
    .card-imovel,.card-cat,.card-esp,.proc-etapa,.card-prova,.card-porque,
    .barra-dados .dado,.imoveis__cab,.objecao__conteudo,
    .rodape__cta,.rodape__contato,.rodape__marca){transform:translateY(8px);}
  /* ambiente desligado no mobile: bateria e área de tela são outras */
  .js-motion .categorias__halo,.js-motion .processo__disco,
  .js-motion .btn--contorno-claro,.js-motion .btn--contorno-escuro,
  .js-motion .nav__menu,.js-motion .rodape__social a,
  .js-motion .card-esp__lnk,.js-motion .card-imovel__seta{animation:none;}
}

/* Sem hover de verdade (toque), nada de expandir: o :hover gruda depois do
   toque e o elemento fica preso ampliado. Gate por CAPACIDADE, não por
   largura — notebook com tela sensível ao toque em 1440 também entra aqui. */
@media(hover:none){
  .btn:hover,.nav__menu:hover,.rodape__social a:hover,.card-esp__lnk:hover,
  .card-imovel:hover,.card-cat:hover,.card-esp:hover,
  .nav__links a:hover,.rodape__linha:hover,.nav__logo:hover{transform:none;box-shadow:none;}
  .btn:hover::after,.btn--claro:hover::before,.btn--escuro:hover::before{opacity:0;animation:none;}
  .btn:hover svg{transform:none;filter:none;}
  .card-imovel:hover img,.card-esp:hover .card-esp__foto img{transform:none;}
  .card-imovel:hover .card-imovel__seta{transform:none;}
}

/* --- Congelamento: ?qa=1 e quem pediu menos movimento -------------------- */
.sem-motion *,.sem-motion *::before,.sem-motion *::after{
  animation:none!important;transition:none!important;
}
.sem-motion .visivel,.sem-motion :where(.secao .eyebrow,.secao h2,.secao .lead,.secao .btn,
  .card-imovel,.card-cat,.card-esp,.proc-etapa,.card-prova,.card-porque,
  .barra-dados .dado,.imoveis__cab,.objecao__conteudo,
  .rodape__cta,.rodape__contato,.rodape__marca){opacity:1!important;transform:none!important;}
.sem-motion .malha,.sem-motion .categorias__halo,.sem-motion .processo__disco{opacity:1!important;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .js-motion :where(.secao .eyebrow,.secao h2,.secao .lead,.secao .btn,
    .card-imovel,.card-cat,.card-esp,.proc-etapa,.card-prova,.card-porque,
    .barra-dados .dado,.imoveis__cab,.objecao__conteudo,
    .rodape__cta,.rodape__contato,.rodape__marca){opacity:1;transform:none;}
  .js-motion .tex::before{opacity:.16;}
  .js-motion .tex--claro::before{opacity:.09;}
  .js-motion .malha,.js-motion .categorias__halo,.js-motion .processo__disco{opacity:1;}
}

/* ==========================================================================
   18. PISO DE LEGIBILIDADE
   Pedido do Igor em 07/08/2026: o texto de leitura estava difícil de ler.
   DIVERGE DO FIGMA de propósito — a regra da casa é "o Figma manda no
   tamanho", e aqui a legibilidade venceu. Registrado para ninguém
   "consertar" isso depois medindo contra a referência.

   `--tipo` é o multiplicador. Para subir ou descer TUDO de uma vez, mexa
   só nesse número. Os px ao lado são o tamanho original do Figma, então dá
   para ver de quanto foi o desvio a qualquer momento.

   A tipografia de display (H1 46.35, H2 32, número 24, título 22) NÃO entra:
   já estava grande, e crescer ali empurraria as caixas medidas contra o
   Figma sem ganho de leitura.
   ========================================================================== */
:root{ --tipo:1.13; }   /* 1.075 do primeiro ajuste × 1.05 pedido depois */
/* +1% só do tablet para cima: no telefone o texto já estava confortável e
   as caixas (card de 157px) não têm folga para mais. */
@media(min-width:768px){ :root{ --tipo:1.1413; } }

.card-esp__tag{font-size:calc(9px * var(--tipo));}
.card-esp__fn,.card-esp__lnk,.rodape__sub,
.rodape__base,.rodape__base span,.rodape__base a{font-size:calc(11px * var(--tipo));}
.nav__links a,.eyebrow,
.barra-dados .rot,.card-esp__anos,.rodape__marca p{font-size:calc(12px * var(--tipo));}
.card-cat__txt p,.proc-etapa__txt p,.card-prova p,
.card-porque__txt p,.rodape__linha span,.card-imovel__s{font-size:calc(13px * var(--tipo));}
/* o corpo de leitura sobe junto: se só os rótulos crescessem, eles
   encostariam no texto e a hierarquia inverteria.
   `.secao .lead` para casar a especificidade da regra base (linha 185) —
   um `.lead` solto perde e o ajuste não pega. O lead do HERO fica fora:
   ele já está em 18.286px por regra própria, e é o maior da página. */
.secao .lead,.proc-etapa__txt h3,.card-porque h3{font-size:calc(15px * var(--tipo));}
.secao .corpo,.card-cat__txt h3,.card-esp__info h3{font-size:calc(16px * var(--tipo));}

/* A caixa dos links da nav era 585px cravados do Figma. Com o texto maior
   eles pedem 620 e quebravam em duas linhas ("QUEM SOMOS", "COMO FUNCIONA").
   Há 715px livres entre logotipo e ações, então a caixa passa a crescer e
   continua centrada pelo justify-content que já existia. */
.nav__links{width:auto;flex:1 1 auto;}
.nav__links a{white-space:nowrap;}

/* O lockup da marca NÃO entra: "PERSICHETO / IMÓVEIS" em 11.212/5.968px é
   proporção de logotipo, não texto corrido. Mexer ali deforma a marca. */

/* EXCEÇÃO medida: no mobile o link do card de especialista fica em 11px
   cravado, fora do multiplicador. O card tem 157px em 390 (129 úteis) e
   "Falar com Giuliano" já pede 127px nesse tamanho. Como o card usa
   overflow:hidden, o excedente não quebra — ele CORTA, que é pior que ler
   um grau menor. No desktop, onde o card é largo, ele acompanha o resto. */
@media(max-width:767px){
  .card-esp__lnk{font-size:11px;}
  /* Estes dois já tinham degrau próprio no mobile (linhas 190 e 601) e o
     bloco daqui, por vir depois, passaria por cima deles — o h3 do card
     voltaria a 18px numa caixa de 157. Recriados com o multiplicador. */
  .secao .lead{font-size:calc(14px * var(--tipo));}
  .card-esp__info h3{font-size:calc(15px * var(--tipo));}
}

/* ==========================================================================
   19. VIÚVAS
   Uma palavra sozinha na última linha. Resolvido pelo navegador, não por
   quebra manual na copy — quebra manual vira defeito assim que a caixa
   muda de largura, e aqui o layout é fluido acima de 1440.

   `balance` iguala o comprimento das linhas — é para bloco curto (títulos).
   `pretty` só evita a última linha órfã e é o certo para parágrafo corrido.
   Navegador sem suporte ignora a propriedade e nada muda.

   ESPAÇAMENTO PRESERVADO: nenhuma regra aqui toca padding, margin, gap ou
   line-height. Se alguma caixa mudar de altura é porque o texto passou a
   ocupar outro número de linhas — medido e relatado, não escondido.
   ========================================================================== */
h1,.secao h2,.rodape__cta h2,
.card-cat__txt h3,.card-esp__info h3,.card-porque h3,.proc-etapa__txt h3,
.card-imovel__t,.eyebrow,.objecao__titulo h2{
  text-wrap:balance;
}
/* Parágrafo longo: `pretty`, que só cuida da última linha. */
.secao .lead,.secao .corpo,.hero .lead,.rodape__marca p,
.barra-dados .rot,.card-esp__anos,.barra-cta__txt{
  text-wrap:pretty;
}
/* Legenda de card é bloco curto e estreito, e ali o `pretty` não acha saída
   — media 8 viúvas em 1024. `balance` distribui as palavras entre as linhas
   mantendo a MESMA contagem de linhas, então resolve sem mexer na altura. */
.card-cat__txt p,.proc-etapa__txt p,.card-prova p,.card-porque__txt p,
.card-imovel__t,.card-cat__txt h3,.card-porque h3,.proc-etapa__txt h3{
  text-wrap:balance;
}

/* O <br> do card de depoimento virava barreira: o `balance` não reequilibra
   depois de uma quebra forçada, e a segunda frase largava "cliente." sozinha
   acima de 1440 (onde o card fica 5px mais largo, sem a barra de rolagem).
   Bloco interno ao <p> — mesma quebra visual, sem gap de flex, e agora cada
   frase balanceia por conta. */
.card-prova .frase{display:block;text-wrap:balance;}