/* ============================================================
   ARVEN — DESENVOLVIMENTO IMOBILIÁRIO
   Design system da reconstrução (v2).
   Base: sessão de 28/07 (v4_home_ULTIMA-VERSAO) + REFERENCIA.png
   ============================================================ */

:root{
  /* paleta da marca */
  --areia:      #F2EEE6;   /* fundo principal */
  --areia-alt:  #F8F5EF;   /* faixas alternadas */
  --linho:      #DED3C1;   /* cards, blocos claros */
  --pedra:      #C6B29A;   /* bordas, filetes */
  --barro:      #A68B6F;   /* ícones, labels de apoio */
  --terra:      #7B6450;   /* hover, itálicos, acentos */
  --carvao:     #3B322A;   /* faixas escuras */
  --noite:      #1F1C19;   /* rodapé */
  --tinta:      #2A2420;   /* títulos */
  --secundario: #6B5946;   /* texto de apoio — 5.6:1 sobre areia */
  --branco:     #FDFCF9;   /* branco quente: texto e traço sobre foto */
  --marca-dagua-cor: #F2EEE6;  /* off-white da marca: lê em foto clara e escura */

  --sans:    'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Raleway', system-ui, sans-serif;

  /* Canto levemente arredondado nas molduras de foto e nos quadros.
     A Santa Ilha usa 12px, mas eles são um site de interface — aqui a
     página é toda de traço fino e tipografia editorial, e 12px começava
     a parecer aplicativo. Seis é o ponto em que o canto deixa de ser
     seco sem virar um botão. Variável para mudar tudo numa linha. */
  --raio: 6px;

  --track-xs:.34em;   /* etiquetas */
  --track-s: .18em;   /* títulos em caixa alta */
  --gut: clamp(20px,5vw,64px);
  --max: 1560px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* algarismos sempre da mesma altura em todo o site — sem os números
   antigos, que sobem e descem da linha de base */
html{font-variant-numeric:lining-nums}
/* clip e não hidden: overflow-x:hidden faz o navegador computar
   overflow-y:auto junto, o que transforma html e body em contêineres de
   rolagem — e position:sticky passa a se prender a ELES em vez do
   viewport, ou seja, para de funcionar em toda a página. Era por isso
   que o quadro de valores da ficha descia junto com o texto em vez de
   acompanhar a leitura. clip corta a sangria horizontal do mesmo jeito,
   sem criar contexto de rolagem. */
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}
body{
  background:var(--areia);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--terra);outline-offset:4px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===== tipografia de apoio ================================== */
.eyebrow{
  font-family:var(--display);font-size:10.5px;letter-spacing:var(--track-xs);
  text-transform:uppercase;font-weight:500;color:var(--secundario);
}
.h-section{
  font-family:var(--display);color:var(--tinta);font-weight:300;
  font-size:clamp(19px,2.2vw,26px);letter-spacing:var(--track-s);
  text-transform:uppercase;line-height:1.4;
}
.statement{
  color:var(--tinta);font-family:var(--display);font-weight:200;
  font-size:clamp(29px,4.4vw,55px);line-height:1.22;letter-spacing:.005em;
}
.statement em{font-style:italic;font-weight:300;color:var(--terra)}

/* ===== botões =============================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:500;font-size:11px;
  letter-spacing:var(--track-xs);text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--carvao);background:none;cursor:pointer;
  border-radius:var(--raio);
  transition:background .45s ease,color .45s ease,border-color .45s ease;
}
.btn:hover{background:var(--carvao);color:var(--areia)}
.btn--solid{background:var(--carvao);color:var(--areia)}
.btn--solid:hover{background:var(--terra);border-color:var(--terra)}
.btn--ghost{border-color:var(--pedra)}
.btn--ghost:hover{background:var(--terra);border-color:var(--terra);color:var(--areia)}
.btn--claro{border-color:var(--areia);color:var(--areia)}
.btn--claro:hover{background:var(--areia);color:var(--carvao)}

/* elo de texto — "ver todos". Sublinhado que cresce no hover, sem seta */
.elo{
  display:inline-block;
  font-family:var(--display);font-weight:500;font-size:10.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--secundario);
  padding-bottom:3px;background-image:linear-gradient(var(--terra),var(--terra));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:color .4s ease,background-size .45s var(--ease);
}
.elo:hover{color:var(--terra);background-size:100% 1px}

/* ============================================================
   TOPO
   ============================================================ */
/* Sem promoção de camada aqui: translateZ força o navegador a rasterizar
   o topo numa resolução fixa, e era isso que deixava o nome da marca
   borrado e com a cor lavada no celular. */
.topbar{position:fixed;inset:0 0 auto 0;z-index:60}
.topbar__barra{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:16px;min-width:0;
  padding:clamp(22px,2.8vw,34px) var(--gut);
  transition:padding .5s ease;
}
.topbar.is-stuck .topbar__barra{padding-block:clamp(16px,2vw,22px)}

/* O nome da marca, alinhado opticamente com a faixa.
   Atenção: o PNG tem margem transparente generosa (só ~32% da altura
   do arquivo é letra), então a altura aqui é ~3x a altura ótica
   desejada das letras.
   Duas versões sobrepostas: a clara vale sobre a fotografia, a escura
   entra quando a faixa fecha em off-white. */
.topbar__logo{position:relative;display:block;flex:0 0 auto}
/* a marca não tem véu nem filtro: o que a fazia parecer mais fraca fora do
   monitor era só tamanho. Presa a 5.1vw, ela caía para 52px no tablet
   contra 68px no monitor. O piso subiu para 60px, então a diferença entre
   os formatos deixa de ser perceptível. */
.topbar__logo img{
  height:clamp(60px,5.1vw,68px);width:auto;display:block;
  transition:height .5s ease,opacity .45s ease;
}
.topbar__logo img + img{position:absolute;left:0;top:0}
.topbar.is-stuck .topbar__logo img{height:clamp(50px,4.3vw,56px)}
/* hoje o topo é escuro nos dois estados, então vale a versão escura do
   logo. A clara fica no HTML, desligada, para voltar rápido caso a
   fotografia do hero mude para uma de topo escuro. */
.topbar__logo .logo--claro{opacity:0}
.topbar__logo .logo--escuro{opacity:1}

/* ===== faixa do topo com recorte de onda =====================
   A onda é o contorno inferior de uma faixa preenchida — não uma
   linha com um trecho reto emendado. A linha corre exatamente sobre
   esse contorno, então as duas acompanham o mesmo recorte enquanto
   a página rola. Sobre a fotografia a faixa fica translúcida; ao
   rolar, ela fecha e vira fundo sólido.
   ============================================================ */
/* onda em escala mais baixa: o excedente abaixo da barra é o que define
   a amplitude, já que o viewBox é esticado em Y */
.topbar__bg{
  position:absolute;left:0;right:0;top:0;z-index:1;pointer-events:none;
  width:100%;height:calc(100% + clamp(30px,3.6vw,54px));
}
/* na primeira vista a faixa é o próprio tom da fotografia — ou seja,
   invisível; só ao rolar ela fecha em off-white */
.topbar__fill{fill:var(--areia);opacity:0;transition:opacity .5s ease}
/* opacidade cheia: a 97% sobravam 3% de transparência, e era por eles que
   o título do hero aparecia fantasma dentro da faixa fechada. */
.topbar.is-stuck .topbar__fill{opacity:1}
/* clara sobre a fotografia, terra quando a faixa fecha */
/* Sem filter aqui: drop-shadow num path dentro de um SVG com escala
   não-uniforme (preserveAspectRatio="none") faz o Chrome rasterizar a
   região do filtro na escala errada e o traço desaparece.
   Terra sobre a clareada do topo, como no resto do site. */
.topbar__line{
  fill:none;stroke:var(--terra);stroke-width:1;stroke-linecap:round;opacity:.55;
  vector-effect:non-scaling-stroke;
  /* O tracejado tem de ser MAIOR que o traço renderizado, senão o padrão
     se repete e abre um vão no meio da linha. Como vector-effect mede o
     tracejado em pixels de tela e o SVG é esticado na horizontal, esse
     comprimento acompanha a largura da janela — medido, ele fica em 1,00×
     a largura nesta faixa (1364px a 1360, 1922px a 1920). Daí o valor em
     vw: sobra pouco, então a caneta anda o tempo todo, e sobra sempre,
     então a linha nunca abre. Um número fixo erra numa ponta ou na outra. */
  stroke-dasharray:110vw;stroke-dashoffset:110vw;
  animation:tracar 3.4s cubic-bezier(.45,.02,.2,1) .3s forwards;
  transition:stroke .45s ease,opacity .45s ease;
}
.topbar.is-stuck .topbar__line{stroke:var(--terra);opacity:.55;stroke-width:1}

.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,38px);margin-left:auto}
.nav a{
  font-family:var(--display);font-weight:500;font-size:11px;
  letter-spacing:var(--track-xs);text-transform:uppercase;
  position:relative;padding-block:4px;white-space:nowrap;
  color:var(--tinta);
  transition:color .45s ease;
}
.topbar.is-stuck .nav a{color:var(--tinta);text-shadow:none}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .4s ease;
}
.nav a:hover::after{width:100%}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{
  display:block;width:26px;height:1px;background:var(--carvao);margin:6px 0;
  transition:transform .45s var(--ease),opacity .3s ease,background .45s ease;
}
.burger.is-open span:first-child{transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:last-child{transform:translateY(-7px) rotate(-45deg)}

.navmob{
  position:fixed;top:0;left:0;right:0;z-index:55;display:none;
  background:rgba(242,238,230,.97);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--pedra);padding:84px 0 26px;
}
.navmob:not([hidden]){display:block;animation:sobe .5s var(--ease) both}
.navmob__inner{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 26px}
.navmob a{
  font-family:var(--display);font-weight:500;padding:15px 0;font-size:11.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;
  border-bottom:1px solid rgba(198,178,154,.45);
  transition:color .35s ease,border-color .35s ease;
}
.navmob a:hover{color:var(--terra);border-color:var(--terra)}

@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes sobe{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ============================================================
   HERO — imagem de composição sangrando, texto sobreposto
   (nunca foto de imóvel real aqui)
   ============================================================ */
/* o título encosta no alto, sobre a parte calma da fotografia — é o que
   dispensa qualquer máscara atrás do texto para ele ficar legível */
.hero{position:relative;min-height:clamp(620px,100vh,1080px);display:flex;align-items:stretch}
.hero__foto{position:absolute;inset:0;overflow:hidden}
.hero__foto img{
  z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transform:scale(1.06);transform-origin:center 45%;
  /* sem will-change: a animação de entrada roda uma vez só, e manter a
     dica ativa deixa a foto numa camada própria para sempre, gastando
     memória e podendo suavizar demais a imagem */
  animation:assenta 2.6s var(--ease) .1s both;
}
@keyframes assenta{from{transform:scale(1.15)}to{transform:scale(1.06)}}
/* Sem máscara sobre o texto. No topo, uma clareada leve para a faixa
   do menu assentar; na base, a fotografia se dissolve na cor da seção
   seguinte, para a virada não bater no olho. */
/* Sobre a fotografia o texto é claro, então aqui entra um escurecimento
   discreto no topo — não uma clareada. Preserva a imagem inteira e ainda
   assenta o menu. */
/* Clareada curta e concentrada no topo, para o menu escuro se ler
   inclusive sobre a copa de árvore do canto direito. A copa mede 23 de
   brilho; o texto escuro exige ~140 para chegar a 4,5:1, o que pede
   cerca de 55% de areia naquela altura. Por isso a faixa é forte no
   início e morre rápido, em vez de um véu longo lavando a fotografia. */
.hero__foto::before{
  content:"";position:absolute;z-index:1;inset:0 0 auto 0;height:18%;
  background:linear-gradient(to bottom,
    rgba(242,238,230,.93) 0%,
    rgba(242,238,230,.64) 40%,
    rgba(242,238,230,.20) 74%,
    rgba(242,238,230,0) 100%);
}
/* a base da fotografia fecha em sombra, não em bege: clarear aqui
   lavava a imagem inteira. A sombra também dá contraste à cápsula. */
.hero__foto::after{
  content:"";position:absolute;z-index:1;inset:auto 0 0 0;height:32%;
  background:linear-gradient(to top,
    rgba(31,28,25,.42) 0%,
    rgba(31,28,25,.20) 38%,
    rgba(31,28,25,.06) 70%,
    rgba(31,28,25,0) 100%);
}

/* o texto fica à esquerda e centrado no espaço que resta entre a faixa
   do topo e a cápsula de busca — daí o padding reservando as duas zonas
   e o justify-content centralizando o que sobra */
.hero__inner{
  position:relative;z-index:3;width:100%;
  max-width:var(--max);margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(150px,18vh,206px) var(--gut) clamp(170px,22vh,272px);
}
/* título escuro com o trecho em itálico em terra — o texto cai sobre a
   parte pálida da fotografia, que sustenta a leitura sem véu nem sombra */
/* peso e espaçamento puxados na direção do menu — mesma família
   (Raleway), só com mais presença que o 200 original */
.hero .statement{
  max-width:15ch;font-size:clamp(33px,4.6vw,58px);
  font-weight:300;letter-spacing:.02em;
  color:var(--tinta);
  animation:sobe 1.15s var(--ease) .3s both;
}
/* o trecho em itálico em off-white quente, não branco puro, que ficava
   contrastante demais ao lado do escuro */
.hero .statement em{color:var(--areia)}

/* ===== busca — cápsula dentro da fotografia ==================
   Fica acima da dissolvência, não montada na divisão entre o hero
   e a seção de baixo. */
/* barra branca contínua, com os campos separados por filetes — em vez
   de pílulas soltas sobre um fundo escuro */
.search{
  position:absolute;z-index:6;left:50%;bottom:clamp(40px,5vh,68px);
  transform:translateX(-50%);
  width:min(var(--max),calc(100% - 2*var(--gut)));
  display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
  padding:8px;border-radius:999px;
  background:rgba(253,252,249,.97);
  box-shadow:0 26px 64px -30px rgba(31,28,25,.55);
  animation:sobeCentro 1.15s var(--ease) .75s both;
}
@keyframes sobeCentro{
  from{opacity:0;transform:translate(-50%,26px)}
  to{opacity:1;transform:translateX(-50%)}
}
.search__pills{display:flex;flex:1;align-items:stretch;gap:0;min-width:0}
.pill{
  position:relative;
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;
  background:none;padding:12px 26px;cursor:pointer;border-radius:999px;
  transition:background .35s ease;
}
/* filete divisor entre campos, sem encostar nas bordas da barra */
.pill + .pill::before,
.search__go::before{
  content:"";position:absolute;left:0;top:22%;height:56%;width:1px;
  background:rgba(198,178,154,.55);
}
.pill:hover,.pill:focus-within{background:rgba(222,211,193,.28)}
/* seta do seletor, como na referência */
.pill select{
  background-image:linear-gradient(45deg,transparent 50%,var(--barro) 50%),
                   linear-gradient(135deg,var(--barro) 50%,transparent 50%);
  background-position:calc(100% - 7px) center, calc(100% - 2px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:20px;
}
.pill__k{
  font-family:var(--display);font-size:9.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--barro);
}
.pill select,.pill input{
  width:100%;background:none;border:0;padding:0;
  font-size:15px;font-weight:300;line-height:1.35;color:var(--tinta);
  cursor:pointer;appearance:none;text-overflow:ellipsis;
}
.pill input{cursor:text}
.pill input::placeholder{color:var(--secundario);opacity:.85}
.pill select:focus,.pill input:focus{outline:none}

.search__go{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:10px;
  flex:0 1 auto;min-width:0;white-space:nowrap;
  background:var(--carvao);color:var(--areia);border:0;border-radius:999px;cursor:pointer;
  margin-left:14px;
  padding:18px 36px;font-family:var(--display);font-weight:500;font-size:11.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;
  transition:background .4s ease;
}
.search__go::before{left:-14px}
.search__go:hover{background:var(--terra)}
.search__go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round}
.search__go:hover svg{animation:lupa .6s ease}
@keyframes lupa{50%{transform:scale(1.14) rotate(-8deg)}}

.search__code{
  position:relative;
  display:flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;
  background:none;border-radius:999px;padding:8px 12px 8px 26px;margin-left:12px;
}
.search__code::before{
  content:"";position:absolute;left:0;top:22%;height:56%;width:1px;
  background:rgba(198,178,154,.55);
}
.search__code input{
  width:88px;min-width:0;background:none;border:0;
  font-size:14px;font-weight:300;color:var(--tinta);
}
.search__code input:focus{outline:none}
.search__code input::placeholder{color:var(--secundario)}
.search__code button{
  background:none;border:0;cursor:pointer;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;transition:background .35s ease;
}
.search__code button:hover{background:var(--linho)}
.search__code svg{width:15px;height:15px;stroke:var(--carvao);fill:none;stroke-width:1.5;stroke-linecap:round}

/* ============================================================
   TOPO DE PÁGINA INTERNA — sem fotografia, só respiro e título
   ============================================================ */
/* o respiro do topo acompanha a LARGURA, não a altura: a faixa do topo e a
   onda crescem com a largura da tela, então em vh o título encostava na
   curva no monitor (folga de -25px) enquanto no tablet ficava em -12 */
.pagina-topo{padding:clamp(150px,12vw,196px) 0 clamp(30px,4vw,48px)}
.pagina-topo .statement{margin-top:14px;max-width:24ch}
.pagina-topo p.pagina-topo__txt{margin-top:22px;max-width:56ch;font-size:15.5px;color:var(--secundario)}

/* a cápsula de busca fora do hero: fundo claro, sobre a areia */
.search--pagina{
  position:relative;left:auto;bottom:auto;transform:none;
  width:100%;max-width:none;margin-top:clamp(26px,3vw,38px);
  background:var(--linho);border-color:var(--pedra);box-shadow:none;
  backdrop-filter:none;animation:none;
}

/* ============================================================
   BLOCOS
   ============================================================ */
.block{padding-block:clamp(72px,10vw,132px)}
.block--tight{padding-block:clamp(56px,7vw,92px)}

.block__head{
  position:relative;display:flex;flex-wrap:wrap;gap:22px;
  align-items:baseline;justify-content:space-between;
  padding-bottom:22px;margin-bottom:44px;
}
.block__head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--pedra);transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease);
}
.block__head.is-in::after{transform:scaleX(1)}
.block__head .eyebrow{flex:0 0 auto}

/* ============================================================
   LISTAGEM — imoveis.html
   Busca livre no topo, barra de controle e painel de filtros.
   ============================================================ */
/* campo único de busca: bairro, cidade, código e título no mesmo lugar.
   Quatro selects separados obrigavam a pessoa a saber em qual campo a
   informação dela mora. */
.busca{
  position:relative;display:flex;align-items:center;gap:12px;
  margin-top:clamp(26px,3vw,38px);max-width:660px;
  background:var(--branco);border:1px solid var(--pedra);
  border-radius:999px;padding:6px 6px 6px 20px;
  transition:border-color .35s ease,box-shadow .35s ease;
}
.busca:focus-within{border-color:var(--terra);box-shadow:0 10px 30px -22px rgba(31,28,25,.5)}
.busca__lupa{width:17px;height:17px;flex:0 0 auto;stroke:var(--barro);fill:none;stroke-width:1.5;stroke-linecap:round}
.busca__campo{
  flex:1;min-width:0;background:none;border:0;padding:12px 0;
  font-size:15px;font-weight:300;color:var(--tinta);
}
.busca__campo::placeholder{color:var(--secundario);opacity:.75}
.busca__campo:focus{outline:none}
.busca__campo::-webkit-search-cancel-button{display:none}
.busca__limpar{
  background:none;border:0;cursor:pointer;font-size:20px;line-height:1;
  color:var(--barro);padding:0 4px;flex:0 0 auto;
}
.busca__limpar:hover{color:var(--terra)}
.busca__go{
  flex:0 0 auto;background:var(--carvao);color:var(--areia);border:0;border-radius:999px;
  cursor:pointer;padding:13px 26px;
  font-family:var(--display);font-weight:500;font-size:10.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;
  transition:background .35s ease;
}
.busca__go:hover{background:var(--terra)}

/* barra de controle */
.listagem__barra{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(14px,2vw,26px);
  padding-bottom:20px;margin-bottom:26px;
  border-bottom:1px solid rgba(198,178,154,.5);
}
.listagem__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:none;border:1px solid var(--pedra);cursor:pointer;padding:9px 17px;border-radius:999px;
  font-family:var(--display);font-weight:500;font-size:10px;
  letter-spacing:var(--track-xs);text-transform:uppercase;
  color:var(--secundario);transition:all .35s ease;
}
.chip:hover{border-color:var(--terra);color:var(--terra)}
.chip.is-active{background:var(--carvao);border-color:var(--carvao);color:var(--areia)}

.listagem__filtros{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:none;border:1px solid var(--pedra);border-radius:999px;padding:9px 17px;
  font-family:var(--display);font-weight:500;font-size:10px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--secundario);
  transition:all .35s ease;
}
.listagem__filtros:hover,.listagem__filtros.is-on{border-color:var(--terra);color:var(--terra)}
.listagem__filtros svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round}
/* o selo diz quantos filtros estão ligados — sem ele o painel fechado
   esconde que a lista está reduzida */
.listagem__selo{
  display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  background:var(--terra);color:var(--areia);border-radius:999px;
  font-size:9.5px;letter-spacing:0;
}

.listagem__acoes{display:flex;align-items:center;gap:14px;margin-left:auto}
.listagem__ordem{position:relative;display:flex;align-items:center}
/* o ícone só entra no celular, onde o rótulo escrito não cabe */
.listagem__ordem-ico{display:none}
.listagem__ordem select{
  appearance:none;-webkit-appearance:none;background:transparent;
  border:none;padding:0 16px 0 0;font-size:14px;color:var(--secundario);
  cursor:pointer;font-family:var(--sans);
}
.ordem-custom { position: relative; }
.ordem-custom__btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none; padding: 0 4px;
  font-family: var(--sans); font-size: 14px; color: var(--secundario);
  cursor: pointer;
}
.ordem-custom__btn svg { width: 14px; height: 14px; transition: transform 0.2s; stroke: var(--secundario); }
.ordem-custom.is-open .ordem-custom__btn svg { transform: rotate(180deg); }
.ordem-custom__menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: #fff; border: 1px solid var(--pedra-alt);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  display: flex; flex-direction: column;
  padding: 6px; min-width: 170px; z-index: 100;
}
.ordem-custom__menu[hidden] { display: none; }
.ordem-custom__menu button {
  background: transparent; border: none; text-align: left;
  padding: 8px 12px; font-family: var(--sans); font-size: 13.5px;
  color: var(--secundario); border-radius: 4px; cursor: pointer;
  transition: all 0.2s;
}
.ordem-custom__menu button:hover { background: var(--areia-alt); color: var(--tinta); }
.ordem-custom__menu button.is-selected { background: var(--linho); color: var(--tinta); font-weight: 500; }
@media (min-width: 621px) {
  .listagem__ordem > select { display: none; }
}
@media (max-width: 620px) {
  .ordem-custom { display: none; }
}
.listagem__modo{display:flex;border:1px solid var(--pedra);border-radius:999px;overflow:hidden}
.listagem__modo button{
  background:none;border:0;cursor:pointer;padding:8px 11px;display:grid;place-items:center;
  transition:background .3s ease;
}
.listagem__modo svg{width:16px;height:16px;stroke:var(--barro);fill:none;stroke-width:1.4;stroke-linecap:round}
.listagem__modo button.is-active{background:var(--linho)}
.listagem__modo button.is-active svg{stroke:var(--terra)}
.listagem__total{font-size:13px;color:var(--secundario);white-space:nowrap}

/* ===== gaveta de filtros =====
   Aberto no fluxo da página o painel empurrava os cards para fora da
   tela: a pessoa mexia num filtro e não via o que tinha mudado. Na
   gaveta a lista continua ao lado, e é ela que reage. */
.painel__fundo{
  position:fixed;inset:0;z-index:80;
  background:rgba(31,28,25,.34);backdrop-filter:blur(1px);
  animation:aparecer .3s ease;
}
.painel__fundo[hidden]{display:none}
@keyframes aparecer{from{opacity:0}to{opacity:1}}

.painel{
  position:fixed;top:0;left:0;bottom:0;z-index:81;
  width:min(340px,88vw);display:flex;flex-direction:column;
  /* a gaveta é o tom mais claro da página, como a barra do topo: é o
     mesmo recurso de contraste, repetido — tom sobre tom, mas separado */
  background:var(--areia);border-right:1px solid var(--pedra);
  box-shadow:14px 0 44px -30px rgba(31,28,25,.6);
  transform:translateX(-101%);transition:transform .42s var(--ease);
}
.painel.is-aberto{transform:none}
.painel__topo{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,2vw,26px);border-bottom:1px solid rgba(198,178,154,.5);
}
.painel__k{
  font-family:var(--display);font-weight:500;font-size:10px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--secundario);
}
.painel__fechar{
  display:grid;place-items:center;width:34px;height:34px;
  background:none;border:0;cursor:pointer;border-radius:50%;
  transition:background .3s ease;
}
.painel__fechar:hover{background:var(--linho)}
.painel__fechar svg{width:17px;height:17px;stroke:var(--secundario);fill:none;
                    stroke-width:1.5;stroke-linecap:round}
/* o corpo é o único pedaço que rola: topo e pé ficam onde estão */
.painel__corpo{flex:1;overflow-y:auto;padding:0 clamp(18px,2vw,26px);scrollbar-width:thin}
.painel__pe{
  display:flex;align-items:center;gap:14px;
  padding:16px clamp(18px,2vw,26px);
  border-top:1px solid rgba(198,178,154,.5);background:var(--areia);
}
.painel__limpar{
  background:none;border:0;cursor:pointer;padding:8px 0;
  font-family:var(--display);font-weight:500;font-size:10px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--secundario);
  border-bottom:1px solid var(--pedra);transition:color .3s ease,border-color .3s ease;
}
.painel__limpar:hover{color:var(--terra);border-color:var(--terra)}
.painel__ver{margin-left:auto;flex:1;justify-content:center;padding:14px 18px}
.painel__ver:disabled{opacity:.45;pointer-events:none}

/* "1+ 2+ 3+ 4+" no lugar dos botões de mais e menos */
.degraus{display:flex;gap:8px;margin-top:11px}
.degraus button{
  flex:1;min-width:0;padding:11px 0;cursor:pointer;
  background:none;border:1px solid var(--pedra);border-radius:var(--raio);
  font-family:var(--display);font-weight:500;font-size:13px;
  color:var(--secundario);transition:all .3s ease;
}
.degraus button:hover{border-color:var(--terra);color:var(--terra)}
.degraus button.is-on{background:var(--carvao);border-color:var(--carvao);color:var(--areia)}

/* características: caixas de marcar, e não interruptores. Interruptor
   promete um estado ligado/desligado permanente; aqui a pessoa está
   montando uma lista, e caixa marcada é o gesto certo para isso. */
.marcas{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.marca{
  display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:0;cursor:pointer;padding:9px 6px;border-radius:var(--raio);
  font-size:13.5px;color:var(--secundario);text-align:left;
  transition:background .25s ease,color .25s ease;
}
.marca:hover{background:var(--linho);color:var(--terra)}
.marca__caixa{
  flex:0 0 auto;width:17px;height:17px;border:1px solid var(--pedra);border-radius:3px;
  position:relative;transition:all .25s ease;
}
.marca.is-on{color:var(--tinta)}
.marca.is-on .marca__caixa{background:var(--carvao);border-color:var(--carvao)}
.marca.is-on .marca__caixa::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--areia);border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}

/* ===== SIMULADOR (STANDALONE SECTION) ======================== */
.simulador-secao{background:var(--areia-alt)}
.simulador-secao__grid{
  display:grid;grid-template-columns:1fr;gap:40px;align-items:center;
}
@media(min-width:768px){
  .simulador-secao__grid{grid-template-columns:1fr 1fr;gap:64px}
}
.simulador-secao__txt{
  margin-top:24px;font-size:16px;color:var(--secundario);max-width:63ch;
}

.simulador-info{
  margin-top:32px;padding-top:16px;
}
.simulador-info h3{
  font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:var(--track-xs);
  text-transform:uppercase;color:var(--tinta);margin-bottom:20px;
}
.simulador-info__grid{
  display:grid;grid-template-columns:1fr;gap:16px;
}
@media(min-width:500px){
  .simulador-info__grid{grid-template-columns:1fr 1fr}
}
.simulador-info__card{
  background:var(--areia);border:1px solid var(--pedra);border-radius:var(--raio);
  padding:16px;
}
.simulador-info__card h4{
  font-family:var(--display);font-size:12px;font-weight:600;color:var(--terra);
  margin-bottom:8px;
}
.simulador-info__card p{
  font-size:13.5px;line-height:1.6;color:var(--secundario);margin:0;
}

/* dentro da gaveta os grupos empilham: a largura é de uma coluna só */
.filtros{
  display:grid;grid-template-columns:1fr;gap:22px;
  padding:24px 0 28px;
}
.filtros__grupo{display:flex;flex-direction:column;gap:10px;min-width:0}
/* o [hidden] do navegador perde para qualquer regra de classe que defina
   display — sem esta linha o grupo de tipo apareceria vazio no monitor,
   onde os chips ficam na barra, e o selo de contagem apareceria zerado */
.filtros__grupo[hidden],.listagem__selo[hidden]{display:none}
/* a gaveta tem uma coluna só: "largo" deixou de significar duas colunas
   e passa a marcar os grupos que pedem um respiro a mais em cima */
.filtros__grupo--largo{padding-top:2px}
body.sem-rolagem{overflow:hidden}
.filtros__k{
  font-family:var(--display);font-weight:500;font-size:9.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--barro);
}
.filtros__par{display:flex;align-items:center;gap:10px}
.filtros__ate{font-size:12px;color:var(--secundario);flex:0 0 auto}
.filtros__par input,.filtros__select{
  width:100%;min-width:0;background:none;border:0;border-bottom:1px solid var(--pedra);
  padding:9px 2px;font-size:14px;font-weight:300;color:var(--tinta);
}
.filtros__select{appearance:none;cursor:pointer}
.filtros__par input:focus,.filtros__select:focus{outline:none;border-color:var(--terra)}
.filtros__par input::placeholder{color:var(--secundario);opacity:.7}

.filtros-custom { position: relative; width: 100%; }
.filtros-custom__btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--pedra);
  padding: 9px 2px; font-family: var(--sans); font-size: 14px; font-weight: 300;
  color: var(--tinta); cursor: pointer; text-align: left;
}
.filtros-custom__btn svg { width: 14px; height: 14px; transition: transform 0.2s; stroke: var(--tinta); flex: 0 0 auto; }
.filtros-custom.is-open .filtros-custom__btn svg { transform: rotate(180deg); }
.filtros-custom__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--pedra-alt);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  display: flex; flex-direction: column;
  padding: 6px; z-index: 100; max-height: 250px; overflow-y: auto;
}
.filtros-custom__menu[hidden] { display: none; }
.filtros-custom__menu button {
  background: transparent; border: none; text-align: left;
  padding: 8px 12px; font-family: var(--sans); font-size: 13.5px;
  color: var(--secundario); border-radius: 4px; cursor: pointer;
  transition: all 0.2s;
}
.filtros-custom__menu button:hover { background: var(--areia-alt); color: var(--tinta); }
.filtros-custom__menu button.is-selected { background: var(--linho); color: var(--tinta); font-weight: 500; }

@media (min-width: 621px) {
  .filtros-custom select { display: none; }
}
@media (max-width: 620px) {
  .filtros-custom select {
    position: absolute; inset: 0; opacity: 0.01; width: 100%; height: 100%; cursor: pointer; z-index: 2;
  }
}

/* modo lista: o card vira uma faixa, com a foto à esquerda.
   Dupla classe porque a regra de três colunas do .cards está mais adiante
   no arquivo — com uma classe só, ela venceria por ordem. */
.cards.cards--lista{grid-template-columns:1fr;gap:16px}
.cards.cards--lista .card{flex-direction:row;align-items:stretch}
.cards.cards--lista .card__frame{flex:0 0 clamp(220px,28%,340px);aspect-ratio:auto}
.cards.cards--lista .card__body{padding:26px clamp(22px,2.6vw,38px);justify-content:center}
.cards.cards--lista .card__body > *{min-width:0}
.card__specs{margin-top:14px}
.cards.cards--lista .card__price{margin-top:20px}

/* vazio */
.listagem__vazio{
  padding:clamp(40px,6vw,72px) 0;max-width:52ch;
}
.listagem__vazio p{font-size:15.5px;line-height:1.85;color:var(--secundario)}
.listagem__vazio-txt{
  font-family:var(--display);font-size:clamp(20px,2.4vw,27px);font-weight:300;
  color:var(--tinta);margin-bottom:14px;
}
.listagem__vazio .btn{margin-top:26px}

/* Nas páginas internas a faixa do topo já entra fechada, em areia — a
   mesma cor do fundo. Sem diferença de tom a barra desaparecia no papel.
   Este tom é 30% do caminho de areia para linho: separa sem escurecer a
   página, e ainda faz os cards de #FAF7F1 destacarem. */
/* O tom saiu de medição, não de gosto. Na Santa Ilha a página é #EDEFF0
   e o topo é branco: razão de luminância 1,154 — pouco o bastante para
   continuar tom sobre tom, e o suficiente para a barra existir. Aqui a
   barra é areia (#F2EEE6, L .869); para bater nessa mesma razão a página
   precisa cair a L .743, que é este #E6DFD4. Ficava em #EDE7DD, e a
   razão era 1,076: metade do contraste, e a barra sumia no papel. */
.pagina-interna{background:#E6DFD4}

/* ============================================================
   FICHA DO IMÓVEL — imoveis/{slug}.html
   ============================================================ */
.ficha{padding-top:clamp(120px,10vw,168px);padding-bottom:clamp(40px,5vw,72px)}
.ficha__voltar{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(20px,2.4vw,32px);
  font-family:var(--display);font-weight:500;font-size:10px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--secundario);
}
.ficha__voltar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4;
                   transform:rotate(180deg);transition:transform .35s ease}
.ficha__voltar:hover{color:var(--terra)}
.ficha__voltar:hover svg{transform:rotate(180deg) translateX(3px)}

/* galeria: mosaico de três fotos fechando um retângulo, mais a tira de
   miniaturas. "Ver todas" abre a tira ali mesmo — cada ida a outra tela
   perde gente no caminho.

   2fr/1fr em duas linhas iguais é o único arranjo em que as três fotos
   saem com a MESMA proporção: a grande ocupa 2u de largura por 2h de
   altura, cada lateral 1u por 1h, e 2u/2h = 1u/1h em qualquer largura de
   tela. Nada de foto esticada de um lado e achatada do outro.

   O teto de altura existe porque em 16/10 numa página de 1360px a foto
   passava de 850px e empurrava o resto para fora da primeira tela. */
.ficha__palco{
  position:relative;overflow:hidden;background:var(--linho);
  border:1px solid rgba(198,178,154,.55);
  display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;
  gap:6px;height:min(44vw,560px);border-radius:var(--raio);
}
/* altura direta, e não aspect-ratio com max-height: quando o teto de
   altura entra em ação o Chrome encolhe a LARGURA junto para preservar a
   proporção, e o mosaico parava a 1031px numa página de 1360. */
.ficha__quadro{
  position:relative;overflow:hidden;padding:0;border:0;background:var(--linho);
  cursor:pointer;min-width:0;min-height:0;
}
.ficha__quadro--maior{grid-row:span 2}
.ficha__palco img{width:100%;height:100%;object-fit:cover;display:block;
                  transition:transform 1.2s var(--ease)}
.ficha__quadro:not(.ficha__quadro--maior):hover img{transform:scale(1.05)}
/* a marca é 46% da foto, mas com teto de 230px: na foto grande isso dava
   24% da largura e nas laterais os 46% cheios, então a menor parecia
   carimbada. Solto o teto na grande e encolho a proporção nas laterais
   até as duas lerem com o mesmo peso. */
.ficha__quadro--maior .marca-dagua{max-width:300px}
.ficha__quadro:not(.ficha__quadro--maior) .marca-dagua{width:34%;max-width:170px}
.ficha__selo{
  position:absolute;top:16px;left:16px;z-index:2;
  background:rgba(59,50,42,.9);color:var(--areia);padding:7px 14px;
  font-family:var(--display);font-weight:500;font-size:9.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;
}
.ficha__todas,.ficha__conta{
  position:absolute;bottom:16px;z-index:2;
  background:rgba(253,252,249,.94);color:var(--tinta);
  font-family:var(--display);font-weight:500;font-size:10px;
  letter-spacing:var(--track-xs);text-transform:uppercase;
}
.ficha__todas{
  left:16px;display:flex;align-items:center;gap:8px;cursor:pointer;
  border:0;padding:9px 15px;transition:background .35s ease;
}
.ficha__todas:hover{background:#fff}
.ficha__todas svg{width:14px;height:14px;stroke:var(--terra);fill:none;stroke-width:1.3}
.ficha__conta{right:16px;padding:9px 13px;letter-spacing:.08em}

.ficha__minis{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(84px,9vw,116px);
  gap:10px;margin-top:10px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;
}
/* aberta, a tira vira grade e mostra tudo de uma vez */
.ficha__galeria.is-aberta .ficha__minis{
  grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(clamp(84px,9vw,116px),1fr));
  overflow:visible;max-height:none;
}
.ficha__mini{
  aspect-ratio:4/3;overflow:hidden;cursor:pointer;padding:0;
  border-radius:calc(var(--raio) - 2px);
  border:1px solid rgba(198,178,154,.55);background:var(--linho);
  opacity:.62;transition:opacity .35s ease,border-color .35s ease;
}
.ficha__mini img{width:100%;height:100%;object-fit:cover;display:block}
.ficha__mini:hover{opacity:.85}
.ficha__mini.is-ativa{opacity:1;border-color:var(--terra)}

/* corpo: texto à esquerda, valores e ação à direita */
.ficha__corpo{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(30px,4vw,64px);margin-top:clamp(30px,4vw,56px);align-items:start;
}
.ficha__chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ficha__chip{
  border:1px solid var(--pedra);border-radius:999px;padding:6px 14px;
  font-family:var(--display);font-weight:500;font-size:9.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--secundario);
}
.ficha__chip--negocio{background:var(--linho);border-color:var(--linho)}
.ficha__ref{margin-left:auto;font-size:11px;letter-spacing:.12em;color:var(--barro)}
.ficha__titulo{
  font-family:var(--display);font-weight:300;letter-spacing:.01em;line-height:1.16;
  font-size:clamp(28px,3.6vw,44px);color:var(--tinta);margin-top:16px;
}
/* rua · bairro · cidade · edifício, separados por um ponto. O separador
   é gerado pelo CSS e não pelo dado, então some sozinho quando o imóvel
   não tem rua ou não fica num edifício */
.ficha__local{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
              margin-top:12px;font-size:14.5px;color:var(--secundario)}
.ficha__local svg{width:15px;height:15px;stroke:var(--barro);fill:none;stroke-width:1.3;flex:0 0 auto}
.ficha__local span{display:flex;align-items:center;gap:10px}
.ficha__local span + span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--barro)}

/* os números em blocos, e não numa linha corrida: são o que a pessoa
   compara entre um anúncio e outro, então merecem peso próprio */
/* 150px e não 120: com seis blocos numa coluna de 700px o mínimo antigo
   cabia cinco por linha e deixava o sexto sozinho embaixo. Em quatro por
   linha fecha 4+2, que lê como bloco e não como sobra. */
.ficha__numeros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-top:clamp(24px,3vw,36px);
}
.ficha__num{
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  border:1px solid rgba(198,178,154,.55);background:#FAF7F1;padding:16px 10px;border-radius:var(--raio);
}
.ficha__num svg{width:19px;height:19px;stroke:var(--barro);fill:none;stroke-width:1.3;margin-bottom:3px}
.ficha__num strong{font-family:var(--display);font-weight:500;font-size:21px;color:var(--tinta);line-height:1}
.ficha__num span{font-size:11px;letter-spacing:.06em;color:var(--secundario)}
.ficha__num small{font-size:10.5px;color:var(--barro)}

.ficha__descricao{margin-top:clamp(26px,3vw,38px);font-size:15.5px;line-height:1.9;color:#5C4B3A;max-width:62ch}
.ficha__destaques{list-style:none;margin-top:26px;display:grid;gap:11px;max-width:62ch}
.ficha__destaques li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.7;color:var(--secundario)}
.ficha__destaques li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--barro);
}
/* Características, infraestrutura e proximidades em tópicos, e não
   diluídas na descrição: são o que a pessoa varre com o olho procurando
   uma coisa específica, e em prosa isso vira leitura. */
.ficha__bloco{margin-top:clamp(30px,3.4vw,42px)}
.ficha__bloco-k{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  padding-bottom:12px;border-bottom:1px solid rgba(198,178,154,.5);
  font-family:var(--display);font-weight:500;font-size:9.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--barro);
}
.ficha__bloco-k em{font-style:normal;font-family:var(--sans);font-size:12.5px;
                   letter-spacing:0;text-transform:none;color:var(--secundario)}
/* duas ou três colunas conforme couber: em uma coluna só, quinze itens
   viram uma tira comprida que ninguém varre até o fim */
.ficha__topicos{
  list-style:none;display:grid;gap:9px clamp(16px,2vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  margin-top:16px;
}
.ficha__topicos li{
  position:relative;padding-left:22px;
  font-size:14px;line-height:1.55;color:var(--secundario);
}
.ficha__topicos li::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:5px;height:9px;border:solid var(--barro);border-width:0 1.4px 1.4px 0;
  transform:rotate(42deg);
}

/* mesma grade dos outros tópicos, sem filete: com quatro itens em três
   colunas o último sobrava sozinho e a linha embaixo dele terminava no
   meio da página, parecendo tabela quebrada */

.ficha__perto{list-style:none;display:grid;gap:11px clamp(16px,2vw,30px);margin-top:16px;
              grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.ficha__perto li{
  display:flex;align-items:center;gap:11px;
  font-size:14px;color:var(--secundario);
}
.ficha__perto svg{width:18px;height:18px;stroke:var(--terra);fill:none;
                  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* a distância vai na direita, alinhada: é o número que se compara entre
   um item e outro, e encostado no texto ele deixa de ser coluna */
.ficha__perto b{
  margin-left:auto;font-weight:400;font-size:13px;color:var(--tinta);
  font-variant-numeric:lining-nums tabular-nums;
}

/* informação que muda a decisão de compra fica à vista, não escondida */
.ficha__ressalva{margin-top:30px;padding:20px 22px;background:var(--linho);border-left:2px solid var(--terra)}
.ficha__ressalva-k{
  font-family:var(--display);font-weight:500;font-size:9.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--terra);
}
.ficha__ressalva p{margin-top:9px;font-size:14.5px;line-height:1.8;color:#5C4B3A}

.ficha__lado{position:sticky;top:120px;display:grid;gap:12px}
.ficha__valores{border:1px solid rgba(198,178,154,.55);background:#FAF7F1;padding:22px 24px 8px;border-radius:var(--raio)}
.ficha__valores-k{
  font-family:var(--display);font-weight:500;font-size:9.5px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--barro);
}
.ficha__valor{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(198,178,154,.4);
}
.ficha__valor:last-child{border-bottom:0}
.ficha__valor span{font-size:13.5px;color:var(--secundario)}
.ficha__valor strong{font-family:var(--display);font-weight:500;font-size:15px;color:var(--tinta);text-align:right}
/* o valor de venda ocupa linha própria, com o rótulo em cima: lado a
   lado numa coluna de 180px o preço quebrava em "R$" / "620.000,00" */
.ficha__valor--forte{
  flex-direction:column;align-items:flex-start;gap:4px;padding-top:16px;
}
.ficha__valor--forte strong{font-size:26px;letter-spacing:.005em;text-align:left;white-space:nowrap}
.ficha__cta{justify-content:center;gap:10px;width:100%}
.ficha__cta svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4;flex:0 0 auto}

.ficha__mais{border-top:1px solid rgba(198,178,154,.5)}

/* barra fixa: volta para o rodapé inteiro */
.ficha__barra{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:16px;
  padding:8px clamp(20px,5vw,64px);
  background:rgba(253,252,249,.97);border-top:1px solid var(--pedra);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.ficha__barra.is-on{transform:translateY(0)}
.ficha__barra-preco{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.ficha__barra-preco span{
  font-family:var(--display);font-size:11px;
  color:var(--barro);
}
.ficha__barra-preco strong{font-family:var(--display);font-weight:500;font-size:20px;color:var(--tinta)}
.ficha__barra-ctas{display:flex;gap:10px;margin-left:auto;}
.ficha__barra .btn{gap:6px;padding:10px 16px;text-transform:none;letter-spacing:0;font-size:13.5px;}
.ficha__barra .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4}

/* ===== portfólio =========================================== */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{
  background:none;border:1px solid var(--pedra);cursor:pointer;padding:9px 17px;
  font-size:10px;letter-spacing:var(--track-xs);text-transform:uppercase;
  color:var(--secundario);transition:all .35s ease;
}
.filter:hover{border-color:var(--terra)}
.filter.is-active{background:var(--carvao);border-color:var(--carvao);color:var(--areia)}

.result{
  display:none;align-items:center;gap:16px;margin-bottom:26px;
  font-size:13px;color:var(--secundario);
}
.result.is-on{display:flex}
.result button{
  background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:10px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--terra);
  border-bottom:1px solid var(--pedra);padding-bottom:2px;
}
.result button:hover{border-color:var(--terra)}

/* minmax(0,1fr) e nao 1fr: item de grid tem min-width:auto, entao o texto
   das especificacoes empurra a trilha alem da coluna e o card vaza para
   fora da pagina — no tablet ele chegava a 1086px numa janela de 1009 */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.card{
  display:flex;flex-direction:column;background:#FAF7F1;
  border:1px solid rgba(198,178,154,.55);
  border-radius:var(--raio);overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s ease,border-color .6s ease,opacity .5s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(31,28,25,.4);border-color:var(--barro)}
.card.is-hidden{display:none}

.card__frame{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--linho)}
/* :not(.marca-dagua) em todas as regras da foto — a marca d'água mora no
   mesmo frame e não pode herdar preenchimento, zoom nem clip da fotografia */
/* as fotos do carrossel ficam empilhadas, entao position:absolute — e
   por isso a regra e escrita em .card__img e nao em img: seletor por
   tag tinha especificidade maior e vencia o empilhamento */
.card__frame .card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);clip-path:inset(0 0 100% 0);opacity:0;
  transition:transform 1.4s var(--ease),clip-path 1.4s var(--ease),opacity .4s ease;
}
.card.is-in .card__frame .card__img{transform:scale(1);clip-path:inset(0 0 0 0)}
.card:hover .card__frame .card__img{transform:scale(1.05)}

/* Os selos moram sobre a foto para o corpo do card ter sempre a mesma
   altura. No corpo eles variavam de um a dois por imóvel e a grade
   deixava de alinhar — e é o alinhamento que permite comparar dois
   anúncios de relance. */
.card__selos{position:absolute;top:14px;left:14px;z-index:2;display:flex;flex-wrap:wrap;gap:6px}
/* selo claro sobre fachada branca sumia — "INVESTIMENTO" desaparecia na
   parede da casa do Jardim Botânico. Fundo escuro lê em foto de céu
   aberto e em foto de interior escuro, que é o que precisa acontecer
   quando quem cadastra não escolhe a foto pensando no selo. */
.card__selo{
  padding:7px 12px;font-family:var(--display);font-weight:500;
  font-size:9px;letter-spacing:var(--track-xs);text-transform:uppercase;
  background:rgba(31,28,25,.66);color:var(--areia);
  backdrop-filter:blur(2px);
}
.card__selo--situacao{background:var(--carvao);color:var(--areia)}
.card__selo--destaque{background:var(--barro);color:var(--noite)}
/* Inter e algarismos alinhados: em Raleway os números do código saíam
   com alturas desiguais, umas letras subindo e outras descendo */
.card__ref{
  position:absolute;left:14px;bottom:14px;z-index:2;padding:6px 11px;
  background:rgba(31,28,25,.72);color:var(--areia);
  font-family:var(--sans);font-size:9.5px;font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:.18em;text-transform:uppercase;
}

/* Marca d'água centralizada e ampla: no canto ela é fácil de recortar,
   no meio da foto não dá para remover sem estragar a imagem.
   A cor vem por máscara, não por filtro: o PNG entra como recorte e a
   cor é a do fundo, então dá para escolher o tom exato. */
.marca-dagua{
  position:absolute;left:50%;top:50%;z-index:3;
  transform:translate(-50%,-50%);
  width:46%;min-width:110px;max-width:230px;
  aspect-ratio:1146 / 502;
  background-color:var(--marca-dagua-cor);
  -webkit-mask:url("../assets/images/marca-dagua.png") center/contain no-repeat;
  mask:url("../assets/images/marca-dagua.png") center/contain no-repeat;
  opacity:.78;
  /* sombra discreta para o off-white não sumir em fachada clara */
  filter:drop-shadow(0 1px 3px rgba(31,28,25,.45));
  pointer-events:none;user-select:none;
}

.card__body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1}
/* "Apartamento em Palhoça" grande, "Ponte do Imaruim" pequeno embaixo.
   A Santa Ilha faz o contrário porque em Florianópolis o bairro vende
   sozinho — Centro, Campeche, Jurerê. Aqui não: quem procura na Grande
   Florianópolis reconhece a cidade antes de reconhecer Potecas ou Ponte
   do Imaruim, então é a cidade que precisa vir grande.
   O que importa dos dois jeitos é o tamanho fixo: o título do anúncio
   ocupava duas linhas no celular e três no tablet, e a grade desalinhava
   toda. Esta linha cabe sempre em uma. */
.card__name{
  font-family:var(--display);font-weight:400;font-size:22px;line-height:1.25;letter-spacing:.02em;
  /* duas linhas reservadas mesmo quando o nome ocupa uma: "Apartamento
     em Palhoça" cabe numa linha e "Sobrado geminado em São José" não, e
     sem a reserva um card ficava 28px mais alto que o vizinho. Reservar
     é o que mantém a grade alinhada seja qual for o texto cadastrado. */
  min-height:2.5em;text-wrap:balance;
}
.card__name a{color:inherit}
.card__place{
  display:flex;align-items:center;gap:7px;margin-top:9px;
  font-size:13px;color:var(--secundario);letter-spacing:.02em;
}
.card__place svg.ico{width:14px;height:14px}
/* o link do nome cobre o card inteiro: a área clicável continua sendo o
   card todo, mas as setas do carrossel ficam por cima e recortam a sua
   parte — por isso elas precisam de z-index maior */
.card__link::after{content:"";position:absolute;inset:0;z-index:4}
.card{position:relative}

/* três números na mesma posição em todos os cards, com o ícone em cima:
   o card existe para comparar um anúncio com o outro, e comparação pede
   grade fixa. Em linha corrida os textos do cadastro tinham larguras
   diferentes e o bloco quebrava em duas ou três linhas irregulares. */
.card__specs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(198,178,154,.55);
}
.card__specs span{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
}
.card__specs em{font-style:normal;font-size:12.5px;color:var(--secundario);letter-spacing:.03em}
.card svg.ico{width:17px;height:17px;stroke:var(--barro);fill:none;stroke-width:1.3;flex:0 0 auto}
/* o preço é o que o comprador procura primeiro no card, então ganha
   corpo — o tamanho já basta para separá-lo, sem precisar de filete */
.card__price{
  margin-top:auto;padding-top:18px;
  /* wrap: com o preço em 24px e o "+ detalhes" ao lado, a linha estourava
     a largura do card na coluna do tablet e o texto saía para fora */
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;
  font-family:var(--display);font-size:24px;font-weight:500;
  letter-spacing:.005em;color:var(--tinta);
}
/* "+ detalhes" escrito vivia estourando a linha ao lado de um preço de
   24px — no tablet ele saía para fora do card. Uma seta em disco ocupa
   largura fixa e diz a mesma coisa. */
.card__cta{
  display:grid;place-items:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;
  background:var(--linho);color:var(--terra);
  transition:background .4s ease,color .4s ease,transform .45s var(--ease);
}
.card__cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;
               stroke-linecap:round;stroke-linejoin:round}
.card:hover .card__cta{background:var(--carvao);color:var(--areia);transform:translateX(3px)}

/* ===== carrossel dentro do card =====
   A pessoa decide se vale abrir o anúncio olhando foto. Com uma só, ela
   abre ou desiste no escuro; com cinco, ela já sabe. As fotos ficam
   empilhadas e trocam por opacidade — trocar o src piscava a moldura. */
.card__img.is-on{opacity:1}
.card__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:rgba(253,252,249,.9);
  opacity:0;transition:opacity .3s ease,background .3s ease;
}
.card__nav svg{width:15px;height:15px;stroke:var(--tinta);fill:none;stroke-width:1.6;
               stroke-linecap:round;stroke-linejoin:round}
.card__nav--prev{left:10px}
.card__nav--next{right:10px}
.card__nav:hover{background:#fff}
.card:hover .card__nav,.card__nav:focus-visible{opacity:1}
.card__pontos{
  position:absolute;left:0;right:0;bottom:12px;z-index:4;
  display:flex;justify-content:center;gap:5px;pointer-events:none;
}
.card__ponto{
  width:5px;height:5px;border-radius:50%;
  background:rgba(253,252,249,.55);transition:background .3s ease,transform .3s ease;
}
.card__ponto.is-on{background:var(--branco);transform:scale(1.35)}
.cards-more{display:flex;justify-content:center;margin-top:clamp(34px,4vw,56px)}

/* ============================================================
   CHAMADA — bloco partido: texto de um lado, imagem do outro.
   Usada na home para chamar a página de desenvolvimento.
   ============================================================ */
.chamada{
  display:grid;grid-template-columns:1.3fr 1fr;
  background:var(--linho);align-items:stretch;
}
.chamada__texto{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(48px,7vw,104px) clamp(24px,5vw,80px);
}
.chamada__texto .statement{color:var(--noite);font-size:clamp(26px,3.4vw,42px);max-width:35ch;margin-top:16px}
.chamada__texto p{margin-top:24px;max-width:65ch;font-size:15.5px;color:#5C4B3A}
.chamada__texto .elo{margin-top:34px;color:var(--terra)}
.chamada__img{position:relative;overflow:hidden;min-height:clamp(300px,38vw,540px)}
.chamada__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================
   DESENVOLVIMENTO — etapas do serviço (página desenvolvimento.html)
   ============================================================ */
.consult{background:var(--linho)}
.consult .statement,.consult .h-section{color:var(--noite)}
.consult__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,5vw,80px);align-items:start;
}
.consult__aside{position:sticky;top:110px}
.consult__aside .statement{font-size:clamp(26px,3.2vw,40px);margin-top:18px}
.consult__aside p{margin-top:22px;max-width:34ch;font-size:15px;color:#5C4B3A}

.services{list-style:none}
.services li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:16px 0;border-top:1px solid rgba(123,100,80,.32);font-size:15px;
}
.services li:last-child{border-bottom:1px solid rgba(123,100,80,.32)}
.services li i{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--terra);min-width:22px}
.services li b{font-family:var(--display);font-weight:500;letter-spacing:.02em}
.services li small{display:block;font-size:13px;color:#5C4B3A}

/* ===== hero de arte cheia (desenvolvimento e sobre) =========
   A arte já vem com um vazio reservado para o texto, e o texto entra
   por cima dele. O fundo da faixa que sobra acima e abaixo da imagem
   tem de bater com o creme da arte, senão aparece a emenda: --areia-alt
   (#F8F5EF) contra o creme de desenvolvimento (#F8F2ED) é diferença de
   3 pontos num canal, invisível. A Sobre usa outro creme e por isso tem
   o modificador --direita abaixo. */
.hero-arte{position:relative;background:var(--areia-alt)}
.hero-arte__img{display:block;width:100%;height:auto}

.hero-arte__content{position:absolute;inset:0;display:flex;align-items:center}
/* o texto sobe um pouco do centro: centralizado, ele cai em cima das
   montanhas do canto inferior e perde contraste. A largura é em px, e
   não em ch, porque ch aqui mede a fonte do bloco (16px) e não a do
   título — em ch o h1 quebrava em quatro linhas e batia no logo. */
.hero-arte__text{max-width:900px;margin-bottom:clamp(40px,8vw,130px)}
/* sem cor própria: o olho do hero usava --terra e o das seções,
   --secundario, que é o padrão do site. Eram os dois únicos tons de olho
   em todo o site, e a diferença não significava nada. */
.hero-arte__text .statement{
  margin:26px 0;color:var(--noite);
  font-size:clamp(34px,4.4vw,64px);line-height:1.16;letter-spacing:-.01em;
}
.hero-arte__text p{
  max-width:40ch;font-size:clamp(15px,1.2vw,18px);
  color:var(--tinta);line-height:1.7;
}

/* ── modificador: arte à esquerda, texto à direita ────────
   A arte da Sobre é o espelho da de desenvolvimento. O creme dela é
   #F2EBE5, que bate com --areia e não com --areia-alt. */
.hero-arte--direita{background:var(--areia)}
.hero-arte--direita .hero-arte__content{justify-content:flex-end}
/* sem o deslocamento para cima do outro hero: lá ele serve para o texto
   não cair sobre as montanhas do canto inferior, aqui só o faria bater
   na barra do topo */
/* a largura é em vw, e não em %, de propósito: a % mede o container,
   que para no .wrap de 1560px, enquanto o degradê da arte começa sempre
   em ~55% da viewport. Com % o texto ficava largo demais em tela menor
   e caía em cima da fachada — em 1200px começava 80px antes do degradê. */
.hero-arte--direita .hero-arte__text{max-width:min(600px,38vw);margin-bottom:0}
/* título bem mais longo que o de desenvolvimento: em 64px quebrava em
   cinco linhas e subia por cima do menu. Neste corpo, com a coluna
   mais larga, ele fecha em duas. */
/* mesmo corpo de .atuamos__intro .statement, que é como o site trata um
   statement em coluna estreita. Encolher abaixo disso deixava o h1 da
   página menor que os títulos das seções abaixo dele — hierarquia ao
   contrário. O texto é longo e fecha em três linhas; foi a escolha. */
.hero-arte--direita .hero-arte__text .statement{
  font-size:clamp(29px,2.6vw,40px);margin:16px 0;
}
/* 38ch deixava o parágrafo em pouco mais da metade da coluna e ele
   parecia encolhido embaixo do título esticado. 48ch segue dentro da
   faixa confortável de leitura e acompanha melhor a linha do título.
   O corpo é um pouco menor que o do outro hero: aqui o bloco todo é
   mais contido, e em 18px o parágrafo competia com o título. */
.hero-arte--direita .hero-arte__text p{
  max-width:48ch;font-size:clamp(14.5px,1.05vw,16.5px);
}

/* A arte encosta no topo e corre por baixo da barra, sem padding e sem
   deslize lateral. As duas tentativas de mover a imagem deixaram faixa
   de fundo aparecendo — em cima e à direita — e o creme da arte tem
   vinheta, então a emenda contra o fundo chapado se via. O respiro do
   título vem da largura da coluna de texto, acima, e não da imagem. */

@media (min-width:901px){
  /* a faixa fica um pouco mais alta que a proporção da arte (2,17:1):
     em 2:1 ela ganha ~60px de altura e o cover come uns 60px de cada
     lado, que são a borda da árvore e sobra de creme — nada do assunto */
  .hero-arte--direita .hero-arte__img{
    aspect-ratio:2 / 1;object-fit:cover;object-position:50% 50%;
  }
  /* o bloco encosta um pouco mais na borda que o resto da página: aqui
     ele flutua sobre o creme da arte, e não numa coluna de conteúdo que
     precise alinhar com as seções de baixo */
  .hero-arte--direita .hero-arte__content{padding-right:clamp(18px,2.5vw,40px)}
  /* e avança mais 50px usando só a folga que sobra fora do .wrap: em
     tela larga ela existe inteira, em tela estreita o clamp zera sozinho
     em vez de espremer o texto contra a borda */
  .hero-arte--direita .hero-arte__text{
    margin-right:calc(-1 * clamp(0px, (100vw - var(--max)) / 2, 50px));
  }
}

@media (max-width:900px){
  /* o vazio reservado na arte não cabe mais na largura do celular: a
     imagem vira uma faixa recortada no prédio e o texto desce para
     baixo dela, no creme. O padding do topo é a altura da barra fixa. */
  .hero-arte{padding-top:clamp(92px,20vw,118px)}
  /* nesta arte o assunto está à esquerda, então o recorte vai para lá */
  .hero-arte--direita .hero-arte__img{object-position:24% 50%}
  .hero-arte--direita .hero-arte__text{max-width:none}
  /* a faixa precisa ser mais alta do que a proporção da arte (56% da
     largura) para que o cover tenha o que recortar na horizontal — é
     esse recorte que traz o prédio para perto e tira o vazio da esquerda */
  .hero-arte__img{height:clamp(230px,70vw,330px);object-fit:cover;object-position:82% 50%}
  .hero-arte__content{position:static;display:block}
  .hero-arte__text{
    max-width:none;margin-bottom:0;
    padding-block:clamp(28px,7vw,44px) clamp(48px,10vw,76px);
  }
  .hero-arte__text .statement{margin:16px 0}
}

/* --areia contra o --areia-alt do hero e da faixa de valores: é a
   mesma alternância discreta que a Sobre faz entre equipe e pilares */
.atuamos {
  background: var(--areia); padding: clamp(60px, 8vw, 120px) 0;
}
.atuamos__sub {
  margin: 20px 0 0; max-width: 46ch; font-size: 15.5px; color: #5C4B3A; line-height: 1.6;
}
/* fecho da coluna: itálico em --terra é como o site já marca ênfase
   (ver .statement em), e o filete separa do texto de apoio sem pedir
   uma caixa. Também ocupa o vão que sobrava abaixo do título. */
.atuamos__nota{
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid rgba(123,100,80,.26);
  max-width:40ch;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:15.5px;line-height:1.6;color:var(--terra);
}
/* título na lateral e trilha à direita. O título gruda enquanto as
   etapas passam: a coluna da esquerda ficaria vazia o resto da rolagem */
.atuamos__grid{
  display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);
  gap:clamp(28px,6vw,120px);align-items:start;
}
.atuamos__intro{position:sticky;top:clamp(120px,15vh,164px)}
/* só o tamanho muda: a coluna é estreita e o clamp do .statement chega
   a 55px. O piso continua sendo o do site, 29px, e a família, o peso e
   a entrelinha vêm da regra base */
.atuamos__intro .statement{
  margin-top:14px;font-size:clamp(29px,2.6vw,40px);
}
/* ── Trilha das etapas ────────────────────────────────
   Uma fita só, contínua, descendo a página: cada etapa pendura o nó
   dela na curva e o texto vai para o lado oposto ao da barriga.

   O traçado NÃO está escrito no HTML — quem desenha é a função trilha()
   em js/site.js, lendo a posição real de cada nó depois do layout. A
   primeira versão era uma senoide fixa esticada por preserveAspectRatio,
   e ela exigia que todas as linhas tivessem exatamente a mesma altura;
   bastava uma etapa com uma linha de texto a mais para a fita descolar
   dos círculos. Calculando por JS, as linhas podem ter a altura natural
   do conteúdo e a curva passa sempre pelo meio dos nós. */
.trilha{
  position:relative;
  display:grid;row-gap:clamp(18px,2.6vw,34px);
  /* o canal precisa caber o círculo de um lado e a haste até o centro */
  --canal:172px;--ico:54px;
}
.trilha__fita{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
/* a cor é --terra rebaixada, e não --pedra: em --pedra o traço dava
   1,9:1 de contraste contra o fundo da seção e sumia em monitor comum,
   mesmo estando desenhado */
.trilha__traco{
  fill:none;stroke:var(--terra);stroke-opacity:.62;stroke-width:2;
  stroke-linecap:round;
}
/* o respiro nas laterais do canal não é enfeite: sem ele o círculo,
   que pendura na borda do canal, encosta na primeira letra do texto */
.etapa{
  display:grid;grid-template-columns:1fr var(--canal) 1fr;
  column-gap:clamp(16px,1.8vw,30px);align-items:center;
}
/* o grid-row:1 explícito nos dois é obrigatório. Sem ele, nas etapas
   ímpares o texto pede a coluna 1, que fica ANTES do cursor de
   auto-posicionamento (o nó já tomou a coluna 2); o empacotamento
   esparso então empurra o texto para uma segunda linha e o nó fica
   sozinho numa linha curta, subindo ~100px em relação ao texto. */
/* o círculo não fica mais em cima da fita: ele pendura no lado do
   próprio texto e uma haste o liga ao ponto, que é onde a fita passa.
   Antes o círculo cobria a linha por dentro, com o fundo opaco. */
.etapa__no{
  grid-column:2;grid-row:1;z-index:1;position:relative;
  display:grid;align-items:center;justify-items:start;
  min-height:var(--ico);
}
.etapa:nth-of-type(even) .etapa__no{justify-items:end}

/* o ponto marca onde a fita passa: sempre no centro do canal, porque é
   por ele que trilha() em js/site.js mede o traçado */
.etapa__ponto{
  position:absolute;left:50%;top:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--terra);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
/* a haste, do círculo até o ponto */
.etapa__no::before{
  content:'';position:absolute;top:50%;height:1px;
  background:rgba(123,100,80,.45);
  left:var(--ico);right:50%;
}
.etapa:nth-of-type(even) .etapa__no::before{left:50%;right:var(--ico)}
/* ímpares à esquerda, pares à direita: o texto sempre no lado contrário
   ao da barriga da curva, senão a fita passa por baixo do parágrafo */
.etapa__txt{grid-column:1;grid-row:1;text-align:right;padding-block:clamp(18px,2.6vw,30px)}
.etapa:nth-of-type(even) .etapa__txt{grid-column:3}
.etapa:nth-of-type(even) .etapa__txt{text-align:left}

.etapa__ico{
  display:grid;place-items:center;
  width:var(--ico);height:var(--ico);border-radius:50%;
  border:1px solid rgba(123,100,80,.5);background:var(--areia-alt);
  transition:transform .45s cubic-bezier(.2,.8,.3,1),
             border-color .45s ease, background-color .45s ease;
}
.etapa__ico svg{
  width:21px;height:21px;fill:none;stroke:var(--terra);
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .45s ease;
}
.etapa__num{
  font-family:var(--display);font-size:17px;font-weight:600;
  letter-spacing:var(--track-s);color:var(--pedra);
  transition:color .45s ease;
}
/* mesmo desenho de .sobre__valor h3, que é o título de item do site:
   --display 500 em 17px sobre --tinta. Sem declarar a família aqui, o
   título caía no --sans e era o único do site fora da Raleway. */
.etapa h3{
  margin:8px 0 10px;font-family:var(--display);font-size:17px;
  font-weight:500;color:var(--tinta);line-height:1.25;
}
.etapa p{
  font-size:14.5px;line-height:1.65;color:#5C4B3A;
  max-width:42ch;margin-left:auto;
}
.etapa:nth-of-type(even) p{margin-left:0;margin-right:auto}

/* a etapa apontada cresce e acende; as vizinhas recuam de leve — é o
   que dá a sensação de que a peça responde.
   O texto cresce a partir da borda encostada no canal, e o círculo a
   partir do próprio centro: a fita é desenhada nas coordenadas dos nós,
   então mover um centro de nó descolaria a curva do círculo. */
.etapa__txt{
  transform-origin:right center;
  transition:transform .45s cubic-bezier(.2,.8,.3,1), opacity .45s ease;
}
.etapa:nth-of-type(even) .etapa__txt{transform-origin:left center}

@media (hover:hover){
  .trilha:hover .etapa:not(:hover){opacity:.45}
  .etapa:hover .etapa__txt{transform:scale(1.045)}
  .etapa:hover .etapa__ico{
    transform:scale(1.14);border-color:var(--terra);
  }
  .etapa:hover .etapa__ponto{transform:scale(1.5)}
  .etapa:hover .etapa__num{color:var(--terra)}
}

@media (prefers-reduced-motion:reduce){
  .etapa__ico,.etapa__txt{transition:none}
}

/* ── Valores ──────────────────────────────────────── */
/* tokens da paleta, como o resto do site. Esta faixa já teve dois hex
   escolhidos à mão (#EBE4D8 e depois #D9CCB5) e era isso que fazia a
   página soar embaralhada: a Sobre alterna só entre --areia e
   --areia-alt e reserva o contraste forte para o --carvao. */
.valores {
  background: var(--areia-alt); padding: clamp(60px, 8vw, 120px) 0;
}
.valores__grid {
  display: grid; grid-template-columns: minmax(260px, 38%) 1fr;
  gap: clamp(36px, 5vw, 88px); align-items: center; width: 100%;
}
/* 3:4 é quase a proporção da foto (2:3): sobra um corte de ~8% na
   vertical, o suficiente para a faixa alargar sem a altura explodir.
   Na proporção exata, 720px de largura pediriam 1080px de altura. */
.valores__img {
  position: relative; width: 100%; overflow: hidden;
  aspect-ratio: 3 / 4;
}
/* o pouco que se corta sai de baixo, onde só há piso: o recorte sobe
   para preservar a copa da árvore */
.valores__img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
.valores__text {
  display: flex; flex-direction: column; justify-content: center;
}
.valores__text .statement { margin: 16px 0; color: var(--noite); font-size: clamp(32px, 4vw, 48px); }
.valores__sub { margin-bottom: 40px; font-size: 15.5px; color: #5C4B3A; max-width: 45ch; line-height: 1.6; }
.valores__cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px;
}
.val-card {
  display: flex; flex-direction: column; gap: 16px;
}
.val-card__ico {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: flex-start;
}
.val-card__ico svg { width: 32px; height: 32px; stroke: var(--terra); fill: none; stroke-width: 1.2; }
.val-card__info h3 {
  font-family: var(--display); font-size: 14px; font-weight: 500; color: var(--noite); margin-bottom: 8px; letter-spacing: 0.05em; text-transform: uppercase;
}
.val-card__info p { font-size: 14px; color: #5C4B3A; line-height: 1.5; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  /* o título volta a ser uma abertura comum, empilhada sobre a trilha */
  .atuamos__grid{grid-template-columns:1fr;gap:clamp(24px,6vw,40px)}
  .atuamos__intro{position:static}

  /* o canal encosta na esquerda e todo o texto passa para o mesmo
     lado: alternar em tela estreita deixaria as colunas com 40px */
  .trilha{--canal:48px;--ico:44px}
  .etapa__txt,
  .etapa:nth-of-type(even) .etapa__txt{transform-origin:left center}
  .etapa{grid-template-columns:var(--canal) 1fr;column-gap:16px}
  .etapa__no{grid-column:1}

  /* não cabe pendurar o círculo ao lado da fita numa faixa de 48px:
     ele volta para cima dela, sem haste, e o ponto some por baixo */
  .etapa__no,
  .etapa:nth-of-type(even) .etapa__no{justify-items:center}
  .etapa__no::before,
  .etapa:nth-of-type(even) .etapa__no::before{display:none}
  .etapa__ponto{opacity:0}

  .etapa__txt,
  .etapa:nth-of-type(even) .etapa__txt{
    grid-column:2;text-align:left;padding-block:clamp(16px,4vw,24px);
  }
  .etapa p,
  .etapa:nth-of-type(even) p{max-width:none;margin-left:0;margin-right:0}
  .etapa__ico svg{width:18px;height:18px}

  .valores__grid { grid-template-columns: 1fr; }
  .valores__cards { grid-template-columns: 1fr; }
  /* empilhada, a proporção cheia daria uma faixa altíssima: aqui a foto
     vira um recorte deitado, e o corte é na vertical */
  .valores__img { aspect-ratio: 4 / 3; }
}

/* ===== faixa editorial escura ============================== */
.editorial{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--carvao);color:var(--linho);align-items:stretch;
}
.editorial__text{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,7vw,110px) clamp(24px,5vw,84px);
}
.editorial__text .statement{color:var(--areia);font-size:clamp(28px,3.8vw,46px);max-width:16ch}
.editorial__text p{margin-top:24px;max-width:40ch;font-size:15.5px;color:var(--pedra)}
.editorial__mark{
  display:flex;align-items:center;gap:16px;margin-top:36px;
  font-size:10.5px;letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--pedra);
}
.editorial__mark::before{content:"";width:56px;height:1px;background:var(--barro)}
.editorial__img{position:relative;overflow:hidden;min-height:clamp(320px,42vw,600px)}
.editorial__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== pilares ============================================= */
.pillars{background:var(--areia-alt);border-block:1px solid rgba(198,178,154,.5)}
.pillars .eyebrow{display:block;text-align:center;margin-bottom:clamp(38px,5vw,58px)}
.pillars__grid{display:grid;grid-template-columns:repeat(5,1fr)}
.pillar{text-align:center;padding:0 clamp(12px,1.8vw,26px);border-left:1px solid rgba(198,178,154,.55)}
.pillar:first-child{border-left:0}
.pillar__chip{
  width:52px;height:52px;border-radius:50%;background:var(--linho);
  display:grid;place-items:center;margin:0 auto 20px;
  transition:background .5s ease,transform .5s ease;
}
.pillar__chip svg{width:22px;height:22px;stroke:var(--terra);fill:none;stroke-width:1.2}
.pillar:hover .pillar__chip{background:var(--pedra);transform:translateY(-3px)}
.pillar h3{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.pillar p{margin-top:9px;font-size:13.5px;line-height:1.65;color:var(--secundario)}

/* ===== onde atuamos — texto + mapa estilizado ==============
   Tom mais claro que o bloco de desenvolvimento: em sequência, os
   dois no mesmo linho achatavam o ritmo da página. */
/* O papel com relevo e ondas é o fundo da seção inteira, não um segundo
   mapa: ele não afirma geografia nenhuma, então convive com o contorno
   exato sem disputar com ele — que é o que a foto de satélite e a carta
   ilustrada faziam. A cor sólida fica por baixo como reserva, caso a
   imagem não carregue. */
.area{
  position:relative;overflow:hidden;
  /* sem lavagem por cima: a versão nova do papel já vem clara o bastante.
     A cor sólida fica por último como reserva, caso a imagem não carregue. */
  background:
    url("../assets/images/fundo-mapa.jpg") center / cover no-repeat,
    var(--areia-alt);
  border-block:1px solid rgba(198,178,154,.5);
}
.area__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,72px);align-items:center;
}
.area .statement{font-size:clamp(30px,4vw,48px);margin-top:16px;color:var(--noite)}
.area__txt{margin-top:24px;font-size:15.5px;line-height:1.85;color:#5C4B3A;max-width:60ch}
.area__mapa{position:relative}
/* a extensão real dos quatro municípios é bem mais alta que larga (0,71),
   porque Palhoça desce muito ao sul. O teto de altura é o que impede o mapa
   de dominar a seção — mas alto o bastante para ele ocupar a coluna, que
   antes ficava com metade da largura vazia. */
.area__mapa svg{width:100%;height:auto;display:block;max-height:min(760px,82vh)}
.mapa__linha{fill:none;stroke:var(--terra);stroke-width:1.1;opacity:.7;vector-effect:non-scaling-stroke}
/* o fio que liga o nome à cidade: fino, claro e sem ponta. Uma seta cheia
   pesaria mais que o próprio mapa; o que indica o lugar é o ponto na outra
   extremidade. */
.mapa__fio path{
  fill:none;stroke:var(--barro);stroke-width:.9;stroke-opacity:.55;
  vector-effect:non-scaling-stroke;
}
/* o ponto ganha um anel na cor do fundo: sem ele o disco encosta na costa e
   nos limites, e lê como sujeira do desenho em vez de marcador. paint-order
   pinta o anel antes do disco, então ele abre espaço em volta. */
.mapa__ponto{
  fill:var(--terra);paint-order:stroke;
  stroke:var(--areia);stroke-width:4;stroke-opacity:.95;
}
.mapa__lig{stroke:var(--barro);stroke-width:.8;stroke-dasharray:3 4;opacity:.75;vector-effect:non-scaling-stroke}
/* massa de terra dos municípios. non-scaling-stroke mantém o fio em 1px real
   qualquer que seja o tamanho de exibição, então o contorno não engorda. */
.mapa__mun{
  fill:var(--pedra);fill-opacity:.26;
  stroke:var(--terra);stroke-width:1;stroke-opacity:.5;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
/* a ilha é o assunto: um pouco mais presente que o continente */
.mapa__mun--ilha{fill-opacity:.42;stroke-opacity:.75}
/* o viewBox passou de 392 para 900 unidades de largura, então o corpo em
   unidades de usuário sobe na mesma proporção para o rótulo render do
   mesmo tamanho de antes: 9,5/392 e 22/900 dão os mesmos 2,4% da largura */
/* O track-xs do site (0.34em) é feito para etiquetas de duas palavras. Num
   nome de lugar ele espalha as letras e o rótulo deixa de ler como nome:
   "F L O R I A N Ó P O L I S". Aqui o corpo é maior e o espaçamento é
   pequeno, que é como carta compõe topônimo. */
.mapa__rot{
  font-family:var(--display);font-size:23px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;fill:var(--tinta);
}
/* nomes de água: mais leves que os das cidades, para ficarem atrás deles */
.mapa__agua{
  font-family:var(--display);font-size:19px;font-weight:400;
  letter-spacing:var(--track-s);text-transform:uppercase;
  fill:var(--barro);opacity:.7;
}
/* halo dos rótulos: com paint-order o contorno é pintado ANTES da letra,
   então ele abre um respiro no traço que passa por baixo em vez de engrossar
   a tipografia. É o recurso que carta impressa usa para o nome não brigar
   com a linha de costa. */
.mapa__rot,.mapa__agua{
  paint-order:stroke;
  stroke:var(--areia);stroke-width:6px;stroke-linejoin:round;stroke-opacity:.9;
}

/* ============================================================
   SOBRE — Quem somos, manifesto, equipe e pilares
   ============================================================ */
.sobre__manifesto{
  background:var(--carvao);color:var(--linho);
  padding-block:clamp(64px,8vw,110px);
}
.sobre__manifesto .statement{color:var(--areia);max-width:24ch}
.sobre__manifesto-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,90px);align-items:center;
}
.sobre__manifesto-txt{font-size:16px;line-height:1.8;color:var(--pedra);max-width:44ch}
.sobre__manifesto-txt p + p{margin-top:18px}

.sobre__equipe{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,4vw,64px);margin-top:clamp(40px,5vw,64px);
}
.sobre__membro{
  background:var(--areia-alt);border:1px solid rgba(198,178,154,.4);
  padding:clamp(30px,4vw,44px);
}
.sobre__membro-nome{
  font-family:var(--display);font-weight:400;font-size:24px;
  color:var(--tinta);margin-bottom:4px;
}
.sobre__membro-registro{
  font-family:var(--display);font-weight:500;font-size:11px;
  letter-spacing:var(--track-xs);text-transform:uppercase;
  color:var(--barro);margin-bottom:22px;
}
.sobre__membro-desc{font-size:15px;line-height:1.7;color:var(--secundario)}

/* Pilares */
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  text-align: center;
}
.pillar {
  padding: 0 20px;
  border-right: 1px solid rgba(62, 50, 40, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pillar:last-child {
  border-right: none;
}
.pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  background: transparent !important;
}
.pillar__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--pedra);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pillar h3 {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 12px;
}
.pillar p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta);
  opacity: 0.8;
  max-width: 180px;
}

@media (max-width: 1024px) {
  .pillars__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 0;
  }
  .pillar:nth-child(3) {
    border-right: none;
  }
}
@media (max-width: 680px) {
  .pillars__grid {
    grid-template-columns: 1fr;
    gap: 48px 0;
  }
  .pillar {
    border-right: none;
    padding: 0;
  }
}

.sobre__valores{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;margin-top:clamp(40px,5vw,64px);
}
.sobre__valor{
  background:var(--linho);padding:34px 28px;
  border-top:2px solid var(--pedra);
}
.sobre__valor h3{
  font-family:var(--display);font-weight:500;font-size:17px;
  color:var(--tinta);margin-bottom:12px;
}
.sobre__valor p{font-size:14.5px;line-height:1.6;color:var(--secundario)}

/* ============================================================
   CONTATO
   ============================================================ */
/* seção enxuta: o respiro generoso de bloco deixava um vazio grande
   abaixo dos nomes e do formulário */
/* o respiro de baixo é menor que o de cima: com as duas colunas terminando
   na mesma altura, a folga que sobrava ali virou espaço morto até a linha
   do rodapé */
.contact{
  background:var(--carvao);color:var(--linho);
  padding-block:clamp(48px,5.4vw,76px) clamp(32px,3.4vw,46px);
}
.contact .eyebrow{color:var(--pedra)}
/* stretch, não start: as duas colunas passam a ter a mesma altura, e cada
   uma distribui o próprio conteúdo dentro dela */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:stretch}
/* a coluna de texto empurra as assinaturas para a base, e o formulário
   espalha os campos: assim os nomes ficam na linha do botão */
.contact__grid > div:first-child{display:flex;flex-direction:column}
.contact__grid .team{margin-top:auto}
.contact__grid .form{align-content:space-between}
.contact .statement{color:var(--areia);font-size:clamp(28px,3.6vw,44px);margin-top:16px}
/* o parágrafo é o que preenche a coluna: sem ele sobrava um vão grande
   abaixo dos nomes, porque o formulário ao lado é bem mais alto */
/* 53ch é o que mede o título logo acima, 531px: o parágrafo espalha até ali
   e para. Com 46ch ele quebrava cedo demais e o bloco ficava encolhido à
   esquerda; sem trava nenhuma passava do título, que é o limite do bloco. */
/* 53ch deixava a linha bem curta perto da coluna, que passa de 660px:
   64ch ainda está dentro da faixa confortável de leitura e distribui
   melhor o texto ao lado do formulário */
.contact__txt{margin-top:22px;max-width:64ch;font-size:15.5px;line-height:1.85;color:var(--pedra)}
/* fecho do bloco: mesma cor, em itálico, para soar como convite e não
   como continuação do parágrafo anterior */
.contact__txt--nota{margin-top:16px;font-style:italic}
.contact__info{margin-top:34px;font-size:14px;line-height:2}
.contact__info a{border-bottom:1px solid rgba(222,211,193,.35);padding-bottom:1px}
.contact__info a:hover{color:#fff;border-color:var(--pedra)}

.team{display:grid;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(222,211,193,.22)}
.team div{font-size:13px;line-height:1.7;color:var(--pedra)}
.team b{
  display:block;font-family:var(--display);font-weight:500;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--areia);margin-bottom:3px;
}

.form{display:grid;gap:18px}
.form input,.form select,.form textarea{
  background:rgba(255,255,255,0.03);border:1px solid rgba(222,211,193,.35);
  border-radius:var(--raio);
  color:var(--areia);padding:12px 14px;font-size:15px;font-weight:300;width:100%;
  transition:border-color .4s ease;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--pedra);outline:none}
.form textarea{resize:vertical;min-height:64px}
.form input::placeholder,.form textarea::placeholder{color:rgba(222,211,193,.72)}
.form select option{background:var(--carvao)}
.form .btn{justify-content:center;margin-top:8px}
.form__note{font-size:11.5px;color:var(--pedra);line-height:1.6}

/* ==========================================================================
   SIMULADOR
   ========================================================================== */
.simulador {
  border: 1px solid var(--pedra);
  background: #FAF7F1;
  border-radius: var(--raio);
  padding: clamp(20px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.simulador__k {
  font-family: var(--display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--track-xs);
  text-transform: uppercase;
  color: var(--barro);
  margin-bottom: 4px;
  display: block;
}
.simulador__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.simulador__campo label {
  font-size: 13px;
  color: var(--tinta);
  font-weight: 500;
}
.simulador__campo input[type="text"],
.simulador__campo input[type="number"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--pedra);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  transition: border-color 0.3s;
}
.simulador__campo input[type="text"]:focus,
.simulador__campo input[type="number"]:focus {
  outline: none;
  border-color: var(--terra);
}
.simulador__toggle {
  display: flex;
  background: var(--branco);
  border: 1px solid var(--pedra);
  border-radius: var(--raio);
  overflow: hidden;
}
.simulador__toggle button {
  flex: 1;
  padding: 8px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--secundario);
  cursor: pointer;
  transition: all 0.2s;
}
.simulador__toggle button.is-active {
  background: var(--terra);
  color: var(--branco);
}
.simulador__toggle button:not(:last-child) {
  border-right: 1px solid var(--pedra);
}
.simulador__range {
  display: flex;
  align-items: center;
  gap: 12px;
}
.simulador__range input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--pedra);
  border-radius: 2px;
  outline: none;
}
.simulador__range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--terra);
  cursor: pointer;
}
.simulador__range input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--terra);
  cursor: pointer;
  border: none;
}
.simulador__range output {
  font-weight: 500;
  font-size: 14px;
  color: var(--tinta);
  min-width: 56px;
  text-align: right;
}
.simulador__resultado {
  margin-top: 8px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.simulador__linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--tinta);
}
.simulador__linha span {
  color: var(--barro);
}
.simulador__linha strong {
  font-weight: 500;
}
.simulador__linha--destaque {
  font-size: 16px;
  color: #4b6653; 
}
.simulador__linha--destaque span {
  color: inherit;
}
.simulador__linha--destaque strong {
  font-weight: 600;
}
.simulador__nota {
  font-size: 12px;
  color: var(--barro);
  text-align: center;
  margin-top: 6px;
  line-height: 1.4;
}

.simulador-secao {
  background-color: var(--areia-alt);
}
.simulador-secao__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}
.simulador-secao__txt {
  margin-top: clamp(14px, 2vw, 20px);
  color: var(--secundario);
  line-height: 1.6;
}

@media (max-width: 680px) {
  .simulador-secao__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================
   RODAPÉ
   ============================================================ */
/* mesma cor do "vamos conversar": os dois formam um bloco escuro
   contínuo, separado só por um fio — duas variações de marrom quase
   igual disputavam atenção sem motivo */
.footer{background:var(--carvao);color:var(--linho);padding-block:clamp(30px,3.4vw,44px)}
/* o rodapé usa a largura toda, só com as margens de respiro: preso ao
   container ele empilhava as quatro colunas no miolo da tela */
.footer .wrap{max-width:none}
.footer::before{
  content:"";display:block;height:1px;background:rgba(198,178,154,.22);
  margin-bottom:clamp(30px,3.4vw,44px);
}
/* As quatro colunas têm conteúdo de larguras muito diferentes — a marca
   ocupa 276px e as redes 144. Centrar cada uma na sua célula, como estava,
   abria vãos desiguais e o rodapé lia disperso. Agora as trilhas seguem a
   proporção do que carregam, todas alinham à esquerda e a última encosta
   na margem: as calhas ficam iguais e o bloco fecha de borda a borda. */
.footer__top{
  /* Trilhas do tamanho do conteúdo, com a sobra repartida igualmente entre
     elas. Com fração, a folga se acumulava dentro de uma célula e as calhas
     saíam desiguais — a primeira chegava a 148px contra 49 das outras. */
  display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;
  gap:clamp(28px,3.4vw,64px);align-items:center;
}
.footer__brand{
  display:flex;align-items:center;justify-content:flex-start;
  padding-left:clamp(6px,2.2vw,30px);
}
/* abaixo do monitor a navegação sai do rodapé: ela repete o menu do topo,
   que acompanha a rolagem, e nessas larguras só espremia as outras colunas */
@media (max-width:1320px){
  .footer__top{grid-template-columns:repeat(3,auto)}
  .footer__top > nav.footer__col{display:none}
}
/* as redes recuam um pouco da margem, para não encostarem na borda */
.footer__top > .footer__col:last-child{padding-right:clamp(8px,1.8vw,30px)}
.footer__brand img{height:clamp(86px,8.4vw,124px);width:auto}
.footer__col{display:flex;flex-direction:column;gap:13px;min-width:0}
/* a última coluna encosta na margem direita, fechando o bloco de ponta a
   ponta em vez de deixar uma folga só de um lado */
.footer__top > .footer__col:last-child{justify-self:end}
/* só o e-mail quebra em qualquer ponto: aplicado a todos os links, isso
   partia "Lançamen/tos" e "Desenvolvimen/to" no meio da palavra */
.footer__col a[href^="mailto:"]{overflow-wrap:anywhere}
/* navegar em duas colunas: era a coluna mais alta e puxava a altura do
   rodapé inteiro */
.footer__nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px clamp(20px,2vw,38px)}
.footer__col h4{
  font-family:var(--display);font-weight:400;font-size:10px;
  letter-spacing:var(--track-xs);text-transform:uppercase;color:var(--barro);margin-bottom:6px;
}
.footer__col a,.footer__col span{
  display:flex;align-items:center;gap:10px;font-size:14px;color:var(--linho);
  transition:color .4s ease;
}
.footer__col a:hover{color:#fff}
.footer__col svg.ico{width:15px;height:15px;stroke:var(--barro);fill:none;stroke-width:1.2;flex:0 0 auto}
.footer__col a:hover svg.ico{stroke:var(--pedra)}

.social{display:flex;gap:12px;margin-top:4px}
.social a{
  width:40px;height:40px;border:1px solid rgba(198,178,154,.4);
  display:grid;place-items:center;
  transition:background .45s ease,border-color .45s ease,transform .45s ease;
}
.social a:hover{background:var(--carvao);border-color:var(--barro);transform:translateY(-3px)}
.social svg{width:17px;height:17px;stroke:var(--linho);fill:none;stroke-width:1.3}

/* a linha do copyright entra um pouco da margem, para não nascer colada no
   canto do bloco */
.footer__base > span{margin-left:clamp(8px,1vw,18px)}
.footer__base{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin-top:clamp(26px,3vw,38px);padding-top:18px;
  border-top:1px solid rgba(198,178,154,.18);
  font-size:12px;letter-spacing:.04em;color:var(--pedra);
}
/* respiro só o suficiente para sair de baixo do botão flutuante do WhatsApp:
   ele vai até 74px da borda da tela e o conteúdo para em 64px, então a
   sobreposição é de uns 10px — não precisa de mais que isso */
.footer__legal{display:flex;gap:26px;margin-right:clamp(12px,1.4vw,24px)}
.footer__legal a{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .4s ease}
.footer__legal a:hover{border-color:var(--barro)}

/* whatsapp flutuante ----------------------------------------
   Barro: é o marrom do meio da paleta, então se destaca tanto sobre
   as seções claras quanto sobre o rodapé escuro — no carvão o botão
   sumia ao rolar até o fim. */
.float{
  position:fixed;right:22px;bottom:22px;z-index:70;
  transition:bottom .4s var(--ease);
  width:52px;height:52px;border-radius:50%;
  background:var(--barro);color:var(--noite);
  display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(31,28,25,.34);
  transition:transform .4s ease,background .4s ease;
}
/* na primeira tela o botão pousa acima da cápsula de busca, em qualquer
   formato; quando a rolagem começa ele desce para o canto. Antes disso só
   o celular fazia isso, e nas outras telas ele sentava sobre a cápsula. */
#topbar:not(.is-stuck) ~ .float{bottom:clamp(124px,16vh,168px)}
.float:hover{transform:translateY(-3px);background:var(--pedra)}
/* na ficha, quando a barra de preço sobe, ela já leva o mesmo WhatsApp:
   dois botões para o mesmo destino, um em cima do outro */
.float{transition:transform .4s ease,background .4s ease,opacity .3s ease,bottom .4s var(--ease)}
body:has(.ficha__barra.is-on) .float{opacity:0;pointer-events:none}
.float svg{width:24px;height:24px;fill:currentColor}

/* reveal ----------------------------------------------------- */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVO
   ============================================================ */
/* O tablet repete a cápsula do monitor: uma linha só, em pílula. A versão
   anterior deixava os campos quebrarem linha, e a cápsula crescia tanto em
   altura que subia por cima do itálico do título. Aqui só o espaçamento
   interno encolhe, o bastante para os seis campos caberem na largura menor. */
@media (max-width:1320px) and (min-width:861px){
  /* o SVG da onda é esticado (preserveAspectRatio="none"), então numa tela
     mais estreita o mesmo traço fica comprimido e a curva sai acentuada.
     Sangrando 12% para cada lado o desenho estica na horizontal e volta a
     abrir — simétrico, para a crista não sair do lugar. */
  /* largura explícita, não `auto`: num elemento substituído posicionado,
     width:auto volta ao tamanho intrínseco em vez de esticar entre left e
     right — e era isso que fazia a linha cobrir só metade da tela aqui,
     parecendo cortada no meio. Mesma forma usada no celular. */
  /* em 136% a borda direita da tela caía exatamente no fundo do vale — o
     traço terminava no ponto mais baixo do desenho, e é isso que deixava
     o fim aberto. Em 152% a borda pega a curva já subindo, 16px acima do
     fundo. O tracejado sobe junto: o traço passa a medir 1,51x a largura. */
  .topbar__bg{left:-18%;right:auto;width:152%;top:18px}
  /* O top:18px desce a onda para baixo do menu, mas deixa os 18px do alto
     fora do SVG — e é por essa tira que a página aparecia com a faixa
     fechada. A tira sólida cobre exatamente essa altura, com 2px de
     sobreposição para não deixar emenda antisserrilhada. Ela para no topo
     do SVG, então nunca aparece abaixo da curva, e a onda não muda em
     nada: mesma forma aberta e fechada. */
  .topbar::before{
    content:"";position:absolute;left:0;right:0;top:0;height:20px;
    background:var(--areia);opacity:0;z-index:1;
    transition:opacity .5s ease;
  }
  .topbar.is-stuck::before{opacity:1}
  .topbar__line{stroke-dasharray:162vw;stroke-dashoffset:162vw;animation-duration:4s}

  /* "TIPO DE HABITAÇÃO" é o rótulo mais longo, e com 0.26em de espaçamento
     ele definia sozinho a largura mínima da primeira pílula, empurrando as
     outras. Apertando o rótulo só aqui, os quatro campos voltam a dividir
     a cápsula em partes iguais. */
  .pill__k{font-size:8.5px;letter-spacing:.13em}

  .pill{padding:12px 16px}
  .search__go{padding:18px 24px;margin-left:10px}
  .search__code{padding:8px 8px 8px 16px;margin-left:8px}
  .search__code input{width:62px}
}
@media (max-width:1080px){
  .nav{gap:20px}
  .topbar__cta span{display:none}
  .topbar__cta{padding:11px 13px}
}

.ficha__header-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.btn-icone {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--pedra);
  border-radius: var(--raio);
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-icone:hover {
  border-color: var(--terra);
  color: var(--terra);
}
.btn-icone svg {
  width: 16px;
  height: 16px;
}
.ficha__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ficha__ctas .btn {
  width: 100%;
  padding: 12px 10px;
  font-size: 12.5px;
  justify-content: center;
  letter-spacing: 0.03em;
  text-transform: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] {
  display: none;
}
.modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(31,28,25,.6);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.3s ease;
}
.modal__box {
  position: relative;
  background: var(--areia);
  width: 100%;
  max-width: 460px;
  border-radius: calc(var(--raio) * 2);
  padding: 32px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  animation: slideUp 0.3s var(--ease);
}
.modal__box .form input, .modal__box .form select, .modal__box .form textarea {
  color: var(--tinta);
  background: var(--branco);
  border-color: var(--pedra);
}
.modal__box .form input::placeholder, .modal__box .form textarea::placeholder {
  color: var(--secundario);
  opacity: 0.7;
}
.modal__box .form select option {
  background: var(--branco);
  color: var(--tinta);
}
.modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.modal__chip {
  display: inline-flex;
  cursor: pointer;
  flex: 0 0 auto;
}
.modal__chip input {
  display: none;
}
.modal__chip span {
  display: block;
  border: 1px solid var(--pedra);
  border-radius: var(--raio);
  padding: 10px 16px;
  font-size: 12px;
  color: var(--secundario);
  text-align: center;
  transition: all 0.2s;
}
.modal__chip input:checked + span {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
.modal__chip span b {
  display: block;
  font-size: 15.5px;
  color: var(--tinta);
  font-weight: 500;
  margin-top: 2px;
}
.modal__chip input:checked + span b {
  color: #fff;
}
.modal__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta);
  margin-bottom: 8px;
}
.modal__fechar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--linho);
  color: var(--tinta);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.modal__fechar:hover {
  background: var(--pedra);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


@media (max-width:960px){
  .nav,.topbar__cta{display:none}
  .burger{display:block}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* no tablet o texto e o quadro de valores passam a ser uma coluna só;
     o quadro sobe para logo abaixo do título, que é onde a pergunta
     "quanto custa" aparece na cabeça de quem está rolando */
  .ficha__corpo{grid-template-columns:1fr}
  .ficha__lado{position:static}
  .ficha__palco{height:min(52vw,420px)}
  .listagem__acoes{margin-left:0;width:100%;justify-content:space-between}
  .chamada{grid-template-columns:1fr}
  .chamada__img{order:-1;min-height:280px}
  .consult__grid,.contact__grid,.area__grid{grid-template-columns:1fr}
  .consult__aside{position:static}
  .pillars__grid{grid-template-columns:repeat(3,1fr);gap:40px 0}
  .pillar:nth-child(4){border-left:0}
  .editorial{grid-template-columns:1fr}
  .editorial__img{order:-1;min-height:300px}
  .footer__top{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:860px){
  /* A crista da onda fica sempre a 39% da altura da caixa do SVG. No
     celular essa caixa era curta e a crista subia por cima do nome, que
     também estava grande demais para a tela. Reduzo o nome e alongo a
     caixa até a onda passar folgada por baixo dele. */
  .topbar__logo img{height:clamp(44px,11.6vw,50px)}
  .topbar.is-stuck .topbar__logo img{height:clamp(44px,11.6vw,50px)}
  /* altura fixa no celular: mudar padding e tamanho do logo ao mesmo
     tempo redimensiona a barra durante a rolagem, e é isso que treme */
  .topbar__barra{padding:16px var(--gut);height:76px;box-sizing:border-box}
  .topbar.is-stuck .topbar__barra{padding-block:16px}
  /* a onda tem duas cristas espalhadas em 1000 unidades; espremidas em
     390px ela fica íngreme. Alargando a caixa além da tela, aparece só o
     primeiro trecho, na mesma suavidade do monitor. */
  /* Duas cristas, na proporção do próprio logotipo: no arquivo da marca
     a onda tem cerca de 8,8 de largura para 1 de altura. Em 390px de tela
     isso dá ~45px de amplitude, que é o que a altura de 82px produz. A
     janela de 160% é o quanto precisa para as duas cristas entrarem, e o
     deslocamento vertical mantém a crista abaixo do nome. */
  /* a janela começa mais adiante no traçado, onde a curva já subiu — é
     isso que levanta a ponta esquerda, como se vê no tablet */
  /* janela de x=150 a x=690 do traçado: pega as duas cristas e termina
     antes da descida final, então as duas pontas ficam na mesma altura */
  /* Altura fixa da faixa nas duas telas. Vale registrar o dilema: com a
     faixa na mesma altura, a curva fica mais suave no tablet, porque o
     mesmo desnível se espalha pelo dobro da largura. Para ter a mesma
     inclinação do celular a faixa precisaria ficar bem mais alta no
     tablet — o que deixa o topo pesado. Ficou a faixa igual. */
  .topbar__bg{left:-27.8%;right:auto;width:185%;top:32px;height:82px}
  /* o traçado tem ~1060 unidades, mas o tracejado estava em 4000: a
     caneta ficava parada 74% da animação e desenhava tudo de uma vez no
     fim. Ajustado ao comprimento real, o desenho ocupa o tempo todo. */
  /* aqui o SVG sangra 185% da largura, então o traço renderizado fica em
     1,82× a largura da janela — medido de 360 a 860px. O 1100 fixo que
     estava aqui só cobria até uns 600px: de 610 para cima a linha abria
     um vão no meio, em qualquer aparelho mais largo. */
  .topbar__line{stroke-dasharray:190vw;stroke-dashoffset:190vw;animation-duration:4s}
  /* a onda começa 30px abaixo do topo, então esses 30px ficavam sem
     preenchimento e a foto aparecia atrás do menu ao rolar. Esta faixa
     tampa o vão; a altura fica abaixo da crista (62px) para não sobrar
     um degrau reto aparecendo por baixo da curva. */
  .topbar::before{
    content:"";position:absolute;left:0;right:0;top:0;height:56px;
    background:var(--areia);opacity:0;z-index:1;
    transition:opacity .5s ease;
  }
  .topbar.is-stuck::before{opacity:.97}

  /* O hero mantém a mesma ideia do desktop: fotografia sangrando por trás
     de tudo, título sobre ela e a cápsula apoiada na base. Muda só a
     escala e o empilhamento interno da busca. */
  /* a fotografia ocupa a tela inteira do aparelho, como no monitor */
  /* o vh vem antes como reserva: em navegador sem suporte a svh a regra
     seguinte é ignorada e o hero ficaria sem altura nenhuma */
  .hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:stretch}
  .hero__foto{position:absolute;inset:0;height:auto}
  /* enquadramento escolhido por medição: em 80% o título cai sobre o céu
     claro e o itálico sobre a mata escura — a mesma relação do monitor,
     que é o que permite manter o off-white aqui também */
  /* o celular passou a receber uma imagem já composta em retrato, então o
     deslocamento que compensava o corte da versão deitada não é mais
     necessário: o enquadramento vem pronto da própria fotografia */
  .hero__foto img{object-position:center}
  .hero__foto::before{height:26%}
  /* posição medida na fotografia de retrato: a luminância da metade de cima
     fica entre 160 e 198, e só cai para 50–90 a partir dos 50% da altura.
     Começando em 40svh as primeiras linhas ficam sobre o céu claro e o
     itálico off-white sobre a encosta escura — a mesma relação do monitor */
  .hero__inner{
    flex:1;display:flex;flex-direction:column;justify-content:flex-start;
    align-items:flex-start;
    /* a beirada da cobertura cruza a fotografia a 38,8% da altura, medido
       na própria imagem. Com o título começando a 24svh, a última linha
       — "casa." — pousa exatamente sobre essa linha do telhado. */
    padding:21.4vh var(--gut) 0;
    padding-top:21.4svh;
  }
  /* dois tons como no monitor: corpo escuro sobre o céu, itálico
     off-white sobre a encosta. A sombra sutil segura as bordas onde o
     fundo varia. */
  .hero .statement{
    /* mesma escala e mesmo limite de largura nos dois: antes o celular
       ficava com 96% da largura útil contra 41% do tablet */
    /* a 7.4vw a frase caía para 28,9px num aparelho de 390, contra 47,1px
       no tablet — daí a impressão de que ela era mais fraca no celular.
       Em 8.8vw ela sobe para 34px e a presença se aproxima. */
    font-size:clamp(31px,8.8vw,40px);max-width:14ch;
    color:var(--tinta);text-shadow:none;
  }
  .hero .statement em{color:var(--areia)}

  /* Duas camadas: dois campos por linha e, na última, Buscar e Código.
     Em uma linha só os rótulos ficavam truncados e ilegíveis. */
  .search{
    position:absolute;left:var(--gut);right:var(--gut);
    bottom:clamp(18px,3.5vh,30px);
    transform:none;margin:0;width:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    overflow:visible;border-radius:20px;padding:5px;
    background:rgba(253,252,249,.97);
    border:1px solid rgba(198,178,154,.6);
    box-shadow:0 18px 40px -24px rgba(31,28,25,.6);
    animation:sobe .9s var(--ease) .3s both;
  }
  .search__pills{display:contents}
  .pill{width:auto;min-width:0;padding:8px 14px;border-radius:14px;gap:2px}
  .pill__k{font-size:8px;letter-spacing:.16em}
  .pill select,.pill input{font-size:13px}
  .pill + .pill::before{left:0;top:20%;height:60%;width:1px;right:auto}
  .pill:nth-child(3)::before,
  .pill:nth-child(4)::before{
    content:"";position:absolute;left:8px;right:8px;top:0;height:1px;width:auto;
    background:rgba(198,178,154,.55);
  }
  .pill:nth-child(4)::after{
    content:"";position:absolute;left:0;top:20%;height:60%;width:1px;
    background:rgba(198,178,154,.55);
  }
  .search__go{
    grid-column:1;margin:5px 0 0;padding:12px 8px;font-size:10px;border-radius:14px;
  }
  .search__go::before{display:none}
  .search__code{
    grid-column:2;margin:5px 0 0;padding:6px 6px 6px 14px;justify-content:space-between;
  }
  .search__code::before{display:none}
  .search__code input{width:100%;font-size:12.5px}

  /* No celular a barra de busca ocupa a base da primeira tela. O botão do
     WhatsApp ficava escondido até a rolagem começar para não sentar em
     cima dela, mas assim ele simplesmente não existia na primeira tela.
     Agora ele aparece sempre: na primeira tela pousa acima da cápsula e,
     quando a rolagem começa, desce para o canto. */
  .float{bottom:22px;transition:bottom .4s var(--ease)}
  #topbar:not(.is-stuck) ~ .float{bottom:clamp(196px,25vh,238px)}
  .navmob__inner{grid-template-columns:1fr 1fr}

  /* Alvos de toque: no dedo, links de 21 a 25px de altura são difíceis
     de acertar. O mínimo confortável é 44px, então os links de texto
     ganham respiro vertical — sem mudar a aparência, só a área clicável. */
  .footer__col a,
  .footer__legal a,
  .contact__info a{padding-block:10px}
  .elo{
    padding-block:12px;
    background-position:0 calc(100% - 12px);
  }
  /* o hambúrguer é o controle principal do menu no celular, e o botão do
     código fica ao lado de um campo: os dois merecem os 44px cheios */
  .burger{padding:16px 10px}
  .search__code button{width:44px;height:44px}
}
@media (max-width:720px){
  .topbar{gap:10px;padding-inline:18px}
  .burger{padding:6px}
  .burger span{width:22px}
}
@media (max-width:620px){
  .navmob__inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  /* o mosaico não sobrevive a 390px: as laterais virariam selos de 90px.
     Volta a ser uma foto só, em 4/3, e as outras ficam na tira embaixo. */
  .ficha__palco{grid-template-columns:1fr;grid-template-rows:1fr;
                height:auto;aspect-ratio:4/3;gap:0}
  .ficha__quadro:not(.ficha__quadro--maior){display:none}
  .ficha__quadro--maior{grid-row:span 1}
  .ficha__numeros{grid-template-columns:repeat(2,1fr)}
  .ficha__perto li{padding:9px 14px 9px 12px;font-size:12.5px}
  /* a barra fixa de preço já carrega o CTA: o botão flutuante do
     WhatsApp em cima dela seria o mesmo destino duas vezes */
  /* os chips descem para dentro do painel de filtros; lá eles quebram
     linha à vontade e voltam ao respiro normal */
  .chip{padding:9px 14px}
  .listagem__chips{gap:8px;flex-wrap:wrap}
  /* a barra fica numa linha só: Filtros, ordenação e contagem. O
     alternador grade/lista sai — nesta largura o card ocupa a tela inteira
     nos dois modos, então a escolha não muda nada. */
  .listagem__modo{display:none}
  .listagem__barra{flex-wrap:nowrap;gap:10px;align-items:center}
  .listagem__filtros{flex:0 0 auto;padding:9px 14px}
  .listagem__acoes{margin-left:auto;gap:10px;width:auto;justify-content:flex-end}
  /* a ordenação vira um par de setas: o texto "Mais recentes" não cabe
     numa barra que já carrega Filtros e a contagem. O select fica por
     cima, invisível, e abre a lista nativa do aparelho — assim a pessoa
     escolhe entre mais recentes, menor preço e as outras sem sair da tela. */
  .listagem__ordem{height:38px;gap:7px;padding:0 12px;justify-content:center;
                   border:1px solid var(--pedra);border-radius:999px}
  .listagem__ordem-ico{display:block;width:17px;height:17px;
                       stroke:var(--barro);fill:none;stroke-width:1.4;stroke-linecap:round}
  /* as setas sozinhas não diziam que ali abre uma lista — quem olhava
     rápido lia como um botão que inverte a ordem e pronto. O chevron ao
     lado é o que transforma o ícone em "escolher entre opções". */
  .listagem__ordem::after{
    content:"";flex:0 0 auto;
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid var(--barro);
  }
  .listagem__ordem select{
    position:absolute;inset:0;width:100%;height:100%;
    opacity:0;border:0;padding:0;background:none;cursor:pointer;
  }
  .listagem__total{font-size:12.5px}
  /* no celular a gaveta ocupa a tela inteira: com 88vw sobrava uma
     faixa da lista atrás que só servia para a pessoa fechar sem querer */
  .painel{width:100%;border-right:0}
  .painel__ver{flex:1}
  /* no celular a faixa da lista não cabe lado a lado: a foto volta para
     cima, e o modo lista passa a diferir da grade só pelo enquadramento */
  .cards.cards--lista .card{flex-direction:column}
  .cards.cards--lista .card__frame{flex:none;aspect-ratio:16/10}
  .cards.cards--lista .card__body{padding:22px}
  /* o botão Buscar sai no celular: a lista já filtra a cada tecla
     digitada, então ele não fazia nada e comia 100px do campo — o
     placeholder chegava cortado em "Bairro, cidade, código ou" */
  .busca{padding:4px 18px;gap:10px}
  .busca__go{display:none}
  .pillars__grid{grid-template-columns:repeat(2,1fr)}
  .pillar:nth-child(odd){border-left:0}
  /* Rodapé enxuto no celular: marca, contato e redes. A navegação sai —
     ela já vive no menu do topo, que acompanha a rolagem, e repetida aqui
     custava 200px de altura para dizer o que já está a um toque. */
  .footer__top{grid-template-columns:1fr auto;gap:24px 20px;align-items:center}
  /* marca à esquerda e redes à direita na primeira linha; o contato ocupa
     a segunda inteira — em meia largura o e-mail mede 176px contra 183 de
     coluna e quebrava no meio do domínio */
  .footer__brand{grid-area:1 / 1;justify-content:flex-start}
  .footer__brand img{height:clamp(62px,17vw,78px)}
  .footer__top > .footer__col:last-child{grid-area:1 / 2;justify-self:end}
  /* telefone e e-mail lado a lado, na mesma linha: empilhados eles ocupavam
     duas faixas de 43px para dizer duas coisas curtas. Cabe justo — os dois
     somam 310px em 13px de corpo, contra 335 de linha. */
  .footer__top > .footer__col:nth-child(3){
    grid-area:2 / 1 / 3 / 3;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 18px;
  }
  .footer__top > .footer__col:nth-child(3) h4{flex:0 0 100%;margin-bottom:2px}
  .footer__top > .footer__col:nth-child(3) a{font-size:13px;gap:8px}
  .footer__top > nav.footer__col{display:none}
  /* sem espaço extra entre telefone e e-mail: os 9px de respiro de cada
     link já separam os dois e ainda garantem o alvo de toque. O gap por
     cima disso abria um vão de 28px entre duas linhas de contato. */
  .footer__col{gap:0}
  /* as redes ficam só com os botões: ao lado da marca, o título vira ruído */
  .footer__top > .footer__col:last-child h4{display:none}
  /* sem a moldura: três quadrados ao lado da marca competem com ela por
     atenção e ocupam largura que aqui é escassa. O respiro do link mantém
     o alvo de toque em 35px. */
  .social a{border:0;width:auto;height:auto;padding:8px}
  .social a:hover{background:none;transform:none}
  /* Os ícones descem até o eixo da palavra ARVEN. Geometricamente eles já
     estavam no mesmo pixel do centro da caixa da marca, mas o arquivo tem
     a onda em 0–30% da altura, a palavra em 50–80% e a assinatura em
     90–100%: o centro de massa fica 3,1% abaixo do centro da caixa, e a
     palavra, que é o que o olho lê como eixo, a 65%. */
  .social{gap:10px;margin-top:0;transform:translateY(8px)}
  .social svg{width:19px;height:19px}
  /* política e termos saem: no celular eles ocupavam uma linha inteira
     para um link que quase ninguém abre daqui */
  .footer__legal{display:none}
  .footer__base{margin-top:24px;padding-top:16px}
  /* 9px mantém o alvo de toque em 43px, quase o mínimo confortável de 44 */
  .footer__col a,.footer__legal a,.contact__info a{padding-block:9px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .card__frame img{clip-path:none!important;transform:none!important}
  .block__head::after{transform:scaleX(1)!important}
  .topbar__line{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}