/* =========================================================
   CASA DOM IMÓVEIS — LP TOPÁZIO (lançamentos MCMV na planta)
   Direção visual: tons vivos/quentes, cantos arredondados generosos,
   texturas geométricas de fundo. Paleta oficial da marca + acentos vivos.
   ========================================================= */

:root {
  --creme: #F7F1EA;
  --dourado: #BDA280;
  --dourado-vivo: #CB8A3E;
  --terracota: #DD7A50;
  --azul-claro: #BAC8D1;
  --azul-escuro: #364D6F;
  /* Azul mais fundo que o --azul-escuro, usado só na seção do formulário: é o
     que separa duas faixas escuras vizinhas (.confianca e .conversao). Ver o
     comentário longo na seção FORMULÁRIO / CONVERSÃO. */
  --azul-noite: #22314A;
  --chumbo: #606062;
  --vermelho: #C1272D;
  --vermelho-escuro: #9E1F24;
  --branco: #FFFFFF;

  --font-titulo: 'Poppins', sans-serif;
  --font-texto: 'Inter', sans-serif;

  --radius: 28px;
  --radius-sm: 18px;
  --shadow: 0 16px 34px rgba(54, 77, 111, 0.16);
  --shadow-warm: 0 16px 34px rgba(221, 122, 80, 0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-texto);
  color: var(--chumbo);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* O "height: auto" é a trava anti-distorção do projeto e não é decoração.
   As imagens de logo trazem width/height no HTML (para o navegador reservar o
   espaço e não haver salto de layout). Só com "max-width: 100%", quando a caixa
   aperta a largura cai mas a ALTURA continua a do atributo — e a logo estica.
   É exatamente a "logo distorcida" que o cliente já reclamou em outra LP.
   Regras mais específicas (ex.: .card-lanc__foto img) continuam vencendo. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-titulo); color: var(--azul-escuro); margin: 0 0 .5em; }
p { line-height: 1.65; margin: 0 0 1em; }
a { color: inherit; }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--terracota);
  font-weight: 700;
  margin-bottom: .8rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-titulo);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  letter-spacing: .3px;
}
.btn--vermelho {
  background: linear-gradient(180deg, var(--vermelho), var(--vermelho-escuro));
  color: #fff;
  box-shadow: 0 10px 24px rgba(193, 39, 45, .35);
}
.btn--vermelho:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(193, 39, 45, .42); }
.btn--sm { padding: .65em 1.4em; font-size: .85rem; }
.btn--lg { padding: 1.05em 2.4em; font-size: 1.05rem; }
.btn--full { width: 100%; padding: 1.1em 1.4em; font-size: 1.05rem; }
/* Usado só pelo botão dos cards da vitrine; encolheu junto com eles no
   "tabloide" (os cards passaram de 310px fixos para ~280px em 4 colunas). */
.btn--card { padding: .62em .9em; font-size: .8rem; width: 100%; }
@media (max-width: 380px) { .btn--lg { padding: 1.05em 1.6em; font-size: 1rem; } }

/* ---------- Foguinho do CTA do hero ---------- */
.btn__fogo {
  /* caixa de tamanho fixo: o emoji não estica a linha nem muda a altura do botão */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  font-size: 1em;
  line-height: 1;
  /* fontes de emoji nativas — evita fallback estranho do Poppins */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  transform-origin: 50% 85%; /* pivô na base da chama: ela "lambe" pra cima */
  animation: chama 2.6s ease-in-out infinite;
}
/* Chama discreta: escala e inclinação mínimas. Só transform => zero layout shift. */
@keyframes chama {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.08) rotate(-3deg); }
  60% { transform: scale(.97) rotate(2.5deg); }
}

/* ---------- Botão que pulsa (classe reutilizável) ---------- */
.btn--pulsa { position: relative; }
/* Dois anéis idênticos, defasados em meio ciclo => pulso contínuo tipo radar.
   O anel é box-shadow com spread num pseudo-elemento absoluto:
   - não ocupa espaço => zero layout shift nos vizinhos;
   - não toca transform nem box-shadow do botão => o :hover original continua valendo;
   - não cobre o texto com camada opaca => contraste do rótulo intacto. */
.btn--pulsa::before,
.btn--pulsa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit; /* herda o pill de 999px */
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s ease;
  animation: pulsar-anel 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}
.btn--pulsa::after { animation-delay: 1.2s; } /* sempre há um anel na tela */
/* Ao passar o mouse o usuário já está engajado: os anéis somem e o hover assume. */
.btn--pulsa:hover::before,
.btn--pulsa:hover::after { opacity: 0; }
@keyframes pulsar-anel {
  0% { box-shadow: 0 0 0 0 rgba(193, 39, 45, .55); }
  70% { box-shadow: 0 0 0 18px rgba(193, 39, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(193, 39, 45, 0); }
}

/* ===================== CABEÇALHO ===================== */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 241, 234, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(54, 77, 111, .1);
}
.topo__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: .8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* A marca virou um filho só: o <span> "CRECI J10494" que ficava ao lado da
   logo deixou de existir, porque o registro passou a vir impresso DENTRO da
   logo do manual de marca (padrão de todas as LPs da Casa Dom). Por isso não há
   mais gap nem empilhamento em duas linhas.
   min-width: 0 deixa a âncora encolher quando o botão aperta — e, como a imagem
   é dimensionada por LARGURA com height:auto, encolher é seguro: a proporção
   6,95:1 do lockup se mantém. */
.topo__marca { display: flex; align-items: center; text-decoration: none; min-width: 0; }
/* NUNCA dimensionar este lockup por "height".
   A logo antiga era vertical (2,35:1); esta é horizontal (1417x204 = 6,95:1),
   quase 3x mais alongada. Com height fixo a largura dispara (40px de altura
   viraria 278px de largura) e o cabeçalho quebra no celular.
   A largura mínima também não é estética: o "CRECI J10494" ocupa 27,2% da
   altura da imagem, então largura ≥ ~200px é o que mantém o registro na mesma
   régua de legibilidade do <span> de .7rem que existia antes. */
.topo__logo { width: clamp(178px, 46vw, 210px); height: auto; }

/* Em telas estreitas, logo e botão disputam a mesma linha. A logo encolhe até o
   piso do clamp e o botão fica mais compacto; abaixo disso o min-width:0 da
   âncora deixa a imagem ceder sem esticar.
   Trade-off assumido e registrado no LEIA-ME: como o CRECI agora é parte da
   imagem, ele encolhe junto com ela. Aqui no cabeçalho ele fica menor do que o
   <span> antigo — em compensação, na seção Confiança e no rodapé ele ficou
   bem maior do que era. */
@media (max-width: 560px) {
  .topo__inner { padding: .7rem .9rem; gap: .55rem; }
  .topo__logo { width: clamp(186px, 52vw, 208px); }
  .topo .btn--sm { padding: .55em .85em; font-size: .72rem; }
}
@media (max-width: 380px) {
  .topo .btn--sm { padding: .5em .7em; font-size: .68rem; letter-spacing: 0; }
}

/* No celular esse botão fica com ~33px de altura — abaixo dos 44px recomendados
   para alvo de toque, e ele é o CTA mais visível acima da dobra, o mais fácil de
   errar com o polegar. A área CLICÁVEL é ampliada por um pseudo-elemento
   transparente, sem tocar em padding nem em fonte: o botão continua desenhado
   exatamente do mesmo tamanho, nada muda visualmente, só o alvo do dedo cresce.
   O pseudo-elemento é absoluto, então não entra no flex nem empurra vizinhos.
   (pointer: coarse) => vale para toque; no desktop, com mouse, nada acontece. */
@media (pointer: coarse) {
  .topo .btn--sm { position: relative; }
  .topo .btn--sm::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  /* Foto do lançamento ao fundo + overlay quente da marca (pedido do cliente).
     Ordem das camadas no CSS: a PRIMEIRA fica por CIMA.
     1) reforço inferior — cobre a faixa clara do horizonte e a base da foto;
     2) véu escuro concentrado no centro — é onde cai o texto;
     3) gradiente quente terracota/dourado — mantém a identidade da marca;
     4) a foto.
     O véu (camada 2) é MARROM QUENTE, não azul-marinho: como ele fica por cima
     do gradiente terracota e tem alfa alta, um véu azul neutralizava a marca e
     o hero renderizava cinza-azulado. Com marrom, o resultado composto volta a
     ter R > G > B (quente) sem perder contraste do texto branco. */
  background-image:
    linear-gradient(180deg,
      rgba(42, 20, 10, 0) 0%,
      rgba(42, 20, 10, 0) 45%,
      rgba(42, 20, 10, .30) 72%,
      rgba(42, 20, 10, .52) 100%),
    radial-gradient(115% 115% at 50% 42%,
      rgba(42, 20, 10, .70) 0%,
      rgba(42, 20, 10, .58) 58%,
      rgba(42, 20, 10, .44) 100%),
    radial-gradient(130% 150% at 12% 0%,
      rgba(229, 143, 95, .58) 0%,
      rgba(221, 122, 80, .46) 45%,
      rgba(203, 138, 62, .36) 100%),
    /* A URL da foto vem versionada ("?v=<mtime>") pela variável --hero-foto, que o
       index.php declara no <head>. É o que faz a troca da foto aparecer na hora para
       quem já visitou, mesmo com o cache de 7 dias do servidor. O fallback do var()
       é a URL original: sem o bloco <style> do index.php, o hero fica igual ao antigo. */
    var(--hero-foto, url("../img/hero-apartamento.jpg"));
  background-size: cover;
  /* X centralizado = coluna mais escura da foto (céu). Y em 30% empurra a
     faixa clara do horizonte para baixo, longe da headline. */
  background-position: center 30%;
  background-repeat: no-repeat;
  /* NUNCA usar "fixed": quebra no iOS/Safari (a imagem trava e desalinha). */
  background-attachment: scroll;
  /* Cor de segurança: se a foto não carregar, o hero volta a ser quente. */
  background-color: var(--terracota);
  color: #fff;
  padding: 6.5rem 1.5rem 6rem;
  overflow: hidden;
  text-align: center;
}
.hero__textura {
  position: absolute;
  inset: 0;
  /* Sobre a foto, .18 lavava a imagem e clareava o fundo local do texto. */
  color: rgba(255, 255, 255, .11);
  background-image: radial-gradient(currentColor 1.8px, transparent 1.8px);
  background-size: 30px 30px;
  pointer-events: none;
}
/* Sobre um gradiente chapado um disco translúcido lia como decoração; sobre a
   FOTO ele virou um círculo de borda visível cortando o céu (mancha de lente).
   Agora o brilho é um radial que morre em transparente — não existe mais
   aresta — e o blur é grande o bastante para não deixar degrau de luminância. */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
}
.hero__blob--1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle,
    rgba(203, 138, 62, .34) 0%,
    rgba(203, 138, 62, .16) 45%,
    rgba(203, 138, 62, 0) 72%);
  top: -160px;
  right: -120px;
}
.hero__blob--2 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle,
    rgba(54, 77, 111, .30) 0%,
    rgba(54, 77, 111, 0) 72%);
  bottom: -140px;
  left: -80px;
}
.hero__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }

/* ---------- Selo do Minha Casa Minha Vida (T2) ----------
   A PLACA CLARA não é enfeite, é requisito. A marca oficial tem o logotipo
   "Minha Casa Minha Vida" quase preto (92,9% de pixels escuros na faixa do
   texto): solta sobre a foto escura do hero, o símbolo até sobrevive, mas as
   palavras somem. Recolorir para branco está proibido pelo manual da marca
   (não alterar cores; a versão negativa tem de ser solicitada ao Ministério),
   então a saída correta é dar fundo claro à marca em vez de mexer nela.
   O padding também cumpre a "área de proteção" que o manual exige ao redor da
   marca, e o resultado é o que a própria referência do cliente mostra (as
   logos aparecem sobre uma faixa clara do criativo). */
/* display:block + width:max-content (e não inline-block): como inline-block, a
   placa e a pílula do eyebrow cabiam juntas na linha de 760px e o navegador as
   punha LADO A LADO — a marca que o cliente mandou destacar ficava deslocada
   para a esquerda enquanto título, subtítulo e CTA seguiam centralizados. */
/* SEM placa/fundo (pedido do cliente em 11/08). A placa branca existia porque a
   versão anterior do arquivo trazia o letreiro "Minha Casa Minha Vida" em tinta
   quase preta, que sumia no hero escuro. O cliente enviou a versão NEGATIVA da
   marca (letreiro branco, fundo transparente), então a marca fica legível
   direto sobre a foto e a placa deixou de ter função.
   O drop-shadow substitui o antigo box-shadow: como agora não há caixa, a
   sombra tem de seguir o contorno do PNG, e não um retângulo. É o que garante
   o desenho da casa contra as partes mais claras do render ao fundo. */
.hero__selo {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.4rem;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45));
}
/* Dimensionada por LARGURA (a imagem é 807x704). O height:auto do reset global
   preserva a proporção — a marca não pode ser esticada nem comprimida. */
.hero__selo-mcmv { width: clamp(150px, 26vw, 260px); }

.hero__eyebrow {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(54, 77, 111, .32);
  border: 1px solid rgba(255, 255, 255, .35);
  padding: .5em 1.2em;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 1.4rem;
}
/* O H1 novo é mais longo que o antigo (68 caracteres contra 47) e ainda carrega
   o valor em corpo maior. O teto do clamp caiu de 3.3rem para 3rem e a
   entrelinha subiu de 1.14 para 1.24 — a entrelinha é o que dá espaço para a
   plaquinha do R$1.000 sem ela encostar na linha de cima. */
.hero__title {
  color: #fff;
  font-size: clamp(1.95rem, 4vw, 3rem);
  line-height: 1.24;
  margin-bottom: .5em;
}
/* ---------- R$1.000 em destaque (T2) ----------
   O cliente mandou a REF com o número GIGANTE em VERMELHO. Vermelho da marca
   (#C1272D) direto sobre o hero dá 1,34:1 de contraste — ilegível e reprovado
   em qualquer critério. Na REF o número está sobre fundo CLARO, e é isso que a
   plaquinha branca reproduz: mantém o vermelho pedido e o contraste sobe para
   ~6,5:1. O destaque vem da placa + escala, nunca de cor crua sobre a foto.
   line-height curto e display inline-block seguram a altura da caixa dentro da
   entrelinha do H1; nowrap impede que "R$1.000" quebre no meio. */
.hero__title strong {
  display: inline-block;
  background: var(--branco);
  color: var(--vermelho);
  font-size: 1.12em;
  font-weight: 800;
  line-height: 1.08;
  white-space: nowrap;
  padding: .06em .3em;
  border-radius: 14px;
}
/* Virou SUBTÍTULO na revisão de 07/08/2026 (era a manchete). O corpo continua
   1.15rem: já era tamanho de apoio, e agora o peso da página está no H1. */
.hero__lead {
  color: #fff;
  opacity: .95;
  font-size: 1.15rem;
  max-width: 620px;
  margin: 0 auto 2.2rem;
}

/* Em telas estreitas o "cover" escala a foto pela ALTURA e sobra só uma fatia
   estreita da largura — mas o texto ocupa quase toda a tela, então o véu deixa
   de ser radial e vira uniforme, para nenhuma linha cair em área clara.
   O X em 25% (e não no centro) é o que traz a TORRE para trás da headline:
   centralizado, a fatia visível caía no vão entre os dois prédios e o topo do
   hero virava só céu — o cliente pediu "uma imagem de um apartamento ao fundo". */
@media (max-width: 860px) {
  .hero {
    background-image:
      linear-gradient(180deg,
        rgba(42, 20, 10, .68) 0%,
        rgba(42, 20, 10, .62) 50%,
        rgba(42, 20, 10, .74) 100%),
      radial-gradient(140% 120% at 20% 0%,
        rgba(229, 143, 95, .52) 0%,
        rgba(221, 122, 80, .42) 50%,
        rgba(203, 138, 62, .36) 100%),
      /* Mesma variável versionada da regra .hero de desktop — ver comentário lá. */
      var(--hero-foto, url("../img/hero-apartamento.jpg"));
    background-position: 25% center;
    padding: 4.5rem 1.5rem 4rem;
  }
}

/* ===================== VITRINE DE LANÇAMENTOS (formato "tabloide") =====================
   Era um carrossel de faixa rolável com setas e swipe. O cliente pediu
   "TABLOIDE": os 8 lançamentos aparecem TODOS ao mesmo tempo, numa grade de
   cards compactos. Saíram daqui, sem deixar resto: .carrossel__track (flex +
   overflow-x + scroll-snap + estilo da barra de rolagem), o flex-basis e o
   scroll-snap-align do card, as 5 regras das setas e o @media que as escondia.
   O JS do carrossel saiu junto (assets/js/main.js). */
.vitrine { position: relative; padding: 5rem 1.5rem 5.5rem; overflow: hidden; }
.vitrine__textura {
  position: absolute;
  inset: 0;
  color: var(--dourado);
  opacity: .12;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.6px);
  background-size: 26px 26px;
  pointer-events: none;
}
.vitrine__header { position: relative; z-index: 1; max-width: 760px; margin: 0 auto 2.4rem; text-align: center; }
.vitrine__header h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }

.vitrine__grade {
  /* position/z-index NÃO são opcionais: a .vitrine__textura é um irmão
     absoluto com inset:0. Sem contexto de empilhamento aqui, a trama de
     bolinhas passa POR CIMA dos 8 cards. (Antes quem segurava isso era o
     .carrossel__wrap, que esta grade substituiu.) */
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  /* minmax(0, 1fr) e não 1fr: "1fr" é minmax(auto, 1fr) e o conteúdo mais
     largo (o botão de rótulo longo) empurraria a coluna, desalinhando a grade. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  padding-block: .5rem;
}
/* 4 colunas no desktop = 8 ÷ 4 = 2 linhas exatas, sem card órfão (é o layout da
   referência). No tablet ficam 3+3+2 e no celular 2 por linha — 1 coluna daria
   8 cards de tela cheia e empurraria benefícios e formulário para longe. */
@media (max-width: 1080px) { .vitrine__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .vitrine__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }

.card-lanc {
  /* Coluna flex + margin-top:auto no botão: no grid os cards da mesma linha
     esticam para a altura da linha, mas os títulos variam de 1 a 2 linhas
     ("Alameda das Orquídeas Residencial" quebra) — sem isto os botões ficariam
     em alturas diferentes lado a lado. */
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border-radius: var(--radius-sm); /* 28px num card de 280px lia como pílula */
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-lanc:hover { transform: translateY(-6px); box-shadow: var(--shadow-warm); }

/* 3/2 em vez de 4/3: card mais baixo, cabem as duas linhas na tela. É só
   recorte — o object-fit: cover já estava aqui, nenhuma foto foi reprocessada. */
/* overflow:hidden + imagem em position:absolute: sem isso o aspect-ratio não
   segura a foto. O height:100% da imagem resolvia para "auto" (o contêiner não
   tem altura declarada), então a foto quase quadrada do Cittrino esticava a 1ª
   linha inteira da grade e abria um rasgo entre o texto e o botão dos vizinhos. */
.card-lanc__foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(135deg, var(--dourado-vivo), var(--terracota)); }
.card-lanc__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-lanc__foto.is-missing img { display: none; }
.card-lanc__foto.is-missing::after {
  content: "Casa Dom Imóveis";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-titulo); font-weight: 600; font-size: .85rem;
  text-align: center; padding: 1rem;
}
.card-lanc__tag {
  position: absolute;
  top: .65rem;
  left: .65rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .3px;
  padding: .4em .8em;
  border-radius: 999px;
  text-transform: uppercase;
  background: var(--vermelho);
  color: #fff;
}

.card-lanc__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1rem 1.15rem; }
.card-lanc__body h3 { font-size: .98rem; margin-bottom: .35em; line-height: 1.3; }
.card-lanc__body p { font-size: .8rem; color: var(--chumbo); margin-bottom: .9rem; }
.card-lanc .btn--card { margin-top: auto; }

/* Tier compacto: a 375px cada card tem ~155px, e a tipografia de um card de
   280px não cabe ali. */
@media (max-width: 420px) {
  .vitrine__grade { gap: .7rem; }
  .card-lanc__body { padding: .8rem .8rem .9rem; }
  .card-lanc__body h3 { font-size: .88rem; }
  .card-lanc__body p { font-size: .72rem; margin-bottom: .7rem; }
  .card-lanc__tag { font-size: .56rem; padding: .35em .7em; top: .5rem; left: .5rem; }
  .btn--card { font-size: .72rem; padding: .6em .5em; }
}

/* Abaixo de ~400px o rótulo "Quero simular este imóvel" quebra em 2 linhas
   dentro do card. Quebra igual nos 8, então lê bem — mas se o cliente reclamar,
   a saída sem mexer em copy é descer para 1 coluna. Basta descomentar:
@media (max-width: 400px) {
  .vitrine__grade { grid-template-columns: minmax(0, 1fr); }
} */

/* ===================== BENEFÍCIOS MCMV ===================== */
.beneficios { position: relative; padding: 5rem 1.5rem 4rem; background: var(--azul-escuro); overflow: hidden; }
.beneficios::before {
  content: "";
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, .06);
  background-image: radial-gradient(currentColor 1.8px, transparent 1.8px);
  background-size: 30px 30px;
  pointer-events: none;
}
.beneficios__header { position: relative; z-index: 1; max-width: 720px; margin: 0 auto 2.6rem; text-align: center; }
.beneficios__header h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
/* Pílula própria em vez do .eyebrow padrão: o terracota do .eyebrow sobre o
   azul-escuro dá 2,85:1 de contraste, abaixo do mínimo para texto pequeno. */
.beneficios__eyebrow {
  display: inline-block;
  font-family: var(--font-titulo);
  font-size: .78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: rgba(221, 122, 80, .38);
  border: 1px solid rgba(255, 255, 255, .32);
  padding: .45em 1.15em;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.beneficios__sub {
  color: var(--azul-claro);
  font-size: 1.02rem;
  max-width: 560px;
  margin: 0 auto;
}

/* Passou de 3 para 4 cards (T4 — "Composição de renda"). O max-width subiu de
   1080 para 1180px junto: mantido em 1080, cada card cairia para ~251px com um
   parágrafo de 25 palavras dentro. */
.beneficios__grid {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}
/* ORDEM IMPORTA: as duas media queries têm a mesma especificidade, então a de
   560px precisa vir DEPOIS da de 860px — invertidas, a de 860 ganharia também
   nas telas pequenas e o celular ficaria com 2 colunas apertadas. */
@media (max-width: 860px) { .beneficios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } }
@media (max-width: 560px) { .beneficios__grid { grid-template-columns: minmax(0, 1fr); } }

.card-beneficio {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 1.7rem 1.4rem; /* apertado para o card mais estreito de 4 colunas */
  text-align: left;
  box-shadow: var(--shadow);
  position: relative; /* ancora a barrinha do topo */
  overflow: hidden;   /* recorta a barrinha no raio do card */
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-beneficio__icone {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--dourado-vivo), var(--terracota));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  /* Flutuação contínua: é o movimento que se vê sem hover — e no mobile,
     onde hover não existe, é o único que aparece. */
  animation: flutuar-icone 3.4s ease-in-out infinite;
  transition: box-shadow .3s ease;
}
.card-beneficio__icone svg { width: 28px; height: 28px; }
.card-beneficio h3 { font-size: 1.15rem; margin-bottom: .5em; }
.card-beneficio p { font-size: .92rem; margin-bottom: 0; }

/* ---------- Benefícios: vida e entrada em cena ---------- */

/* Barrinha quente que cresce no topo do card ao passar o mouse */
.card-beneficio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dourado-vivo), var(--terracota));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.card-beneficio:hover::before { transform: scaleX(1); }

/* Elevação no hover — mesmo gesto dos cards da vitrine */
.card-beneficio:hover { transform: translateY(-6px); box-shadow: var(--shadow-warm); }
.card-beneficio:hover .card-beneficio__icone { box-shadow: 0 8px 18px rgba(221, 122, 80, .45); }

/* Ciclos defasados card a card para não parecer metrônomo.
   O :nth-child(4) entrou com o card "Composição de renda": sem ele o 4º ícone
   flutuaria em sincronia perfeita com o 1º, que é justamente o efeito de
   metrônomo que estes delays existem para evitar. */
.card-beneficio:nth-child(2) .card-beneficio__icone { animation-delay: .5s; }
.card-beneficio:nth-child(3) .card-beneficio__icone { animation-delay: 1s; }
.card-beneficio:nth-child(4) .card-beneficio__icone { animation-delay: 1.5s; }

@keyframes flutuar-icone {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Entrada em cena — só ligada quando o JS adiciona .js-anima na seção.
   Sem JS, os cards são exatamente o que sempre foram: visíveis. */
.beneficios.js-anima .card-beneficio { opacity: 0; }
.beneficios.js-anima .card-beneficio.is-visivel {
  opacity: 1;
  /* 'backwards': segura o 1º keyframe durante o delay e DEVOLVE o transform
     ao elemento quando termina — é isso que preserva a elevação do hover. */
  animation: entrar-card .62s cubic-bezier(.22, .61, .36, 1) backwards;
}
.beneficios.js-anima .card-beneficio.is-visivel:nth-child(2) { animation-delay: .12s; }
.beneficios.js-anima .card-beneficio.is-visivel:nth-child(3) { animation-delay: .24s; }
.beneficios.js-anima .card-beneficio.is-visivel:nth-child(4) { animation-delay: .36s; }

@keyframes entrar-card {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.beneficios__nota {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 2.2rem auto 0;
  text-align: center;
  font-size: .75rem;
  color: var(--azul-claro);
  opacity: .85;
}

/* ===================== POR QUE COMPRAR NA PLANTA ===================== */
/* O padding caiu de 5.5rem para 4.5rem: com a saída do parágrafo (T5) a seção
   perdeu um bloco inteiro de conteúdo e o respiro de antes virava vão morto. */
.planta { position: relative; padding: 4.5rem 1.5rem; background: var(--creme); overflow: hidden; }
.planta__textura {
  position: absolute;
  inset: 0;
  color: var(--dourado);
  opacity: .14;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.6px);
  background-size: 26px 26px;
  pointer-events: none;
}
/* 980px e não os 720px de antes: com a 3ª pílula (T6) as três somam ~880px com
   os vãos, e a 720px o layout quebrava em 2 + 1 — a pílula recém-pedida ficaria
   sozinha embaixo. O título ganha max-width próprio para não esticar junto. */
.planta__inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; text-align: center; }
/* margin-bottom explícito porque o parágrafo que fazia esse espaçamento saiu
   (T5): sem isto o .5em do h2 global cola o título nas pílulas. */
.planta__inner h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); max-width: 20ch; margin: 0 auto 1.8rem; }

.planta__minicards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2.4rem;
}
.mini-card {
  display: flex;
  align-items: center;
  gap: .6em;
  background: var(--branco);
  border: 1.5px solid rgba(221, 122, 80, .3);
  border-radius: 999px;
  padding: .8em 1.4em;
  font-size: .88rem;
  font-weight: 600;
  color: var(--azul-escuro);
  box-shadow: var(--shadow);
}
.mini-card svg { width: 20px; height: 20px; color: var(--terracota); flex: 0 0 auto; }

/* ===================== CONFIANÇA CASA DOM ===================== */
/* O padding vertical/horizontal é o mesmo de .planta e .conversao (as seções
   vizinhas): antes ele era 5rem 0 0 só porque a faixa rolante precisava
   sangrar de ponta a ponta e fechar a base da seção. */
.confianca { position: relative; background: var(--azul-escuro); padding: 5.5rem 1.5rem; overflow: hidden; }
.confianca::before {
  content: "";
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, .06);
  background-image: radial-gradient(currentColor 1.8px, transparent 1.8px);
  background-size: 30px 30px;
  pointer-events: none;
}
/* T7 — duas colunas: logo grande e horizontal de um lado, texto do outro.
   Era um bloco centrado com o H2 em cima e uma caixinha emoldurada embaixo; a
   caixinha (.confianca__marca) e o <span> do CRECI foram removidos por
   inteiro — a referência mostra a imagem solta e o registro agora vem impresso
   dentro da própria logo.
   0.9fr / 1.1fr e não 50/50: o H2 tem 64 caracteres e precisa de mais medida
   que a logo, que já tem teto de largura. */
.confianca__inner {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  text-align: left;
}
.confianca__inner h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 0; }

/* O tamanho foi escolhido pela TIPOGRAFIA, não pela caixa: neste lockup o nome
   "CASADOM" ocupa 60,2% da altura da imagem e o "CRECI J10494", 27,2%. A 420px
   de largura (= 60px de altura) o nome sai com 36px de altura de letra — o
   dobro do que era — e o CRECI com 16px, contra os 12,5px do <span> antigo. É
   assim que "aumentar a logo" (T7) e "CRECI legível" (G2) fecham juntos.
   O max-width é o freio de um lado: sem ele, width:100% numa coluna que cresce
   levaria a logo a 600px+ e esmagaria o H2 ao lado. A ausência de "height" é o
   freio do outro: altura fixa neste lockup de 6,95:1 dispara a largura sem
   controle e, com o max-width:100% do reset, deforma a marca. */
.confianca__logo {
  width: 100%;
  max-width: 420px;
  height: auto;                    /* NUNCA height fixo neste lockup */
  filter: brightness(0) invert(1); /* tinta azul chapada -> branco puro */
}

/* No celular empilha com o TEXTO PRIMEIRO: o H2 é a mensagem da seção, e a
   marca o visitante já viu no cabeçalho e vê de novo no rodapé. Uma logo de
   340px antes do título só adiaria a mensagem. */
@media (max-width: 860px) {
  .confianca__inner { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 2.2rem; }
  .confianca__inner h2 { order: 1; }
  .confianca__logo { order: 2; max-width: 340px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .confianca { padding: 4rem 1.25rem; }
}

/* ===================== FORMULÁRIO / CONVERSÃO =====================
   T8 — a seção era creme e passou a ser escura (padrão "Maldivas"). Como a
   .confianca logo acima TAMBÉM é escura, três coisas separam as duas faixas —
   e nenhuma delas resolve sozinha:

   1) TOM: .confianca #364D6F, .conversao #22314A. Sozinho é fraco (o contraste
      entre os dois azuis é 1,53:1). O que ele dá é RITMO — creme (planta) >
      azul médio (confiança) > azul fundo (formulário) > azul médio (rodapé):
      a página afunda até o card branco, que é onde a conversão acontece.
   2) SEPARADOR: faixa de 4px com o gradiente dourado>terracota da marca — o
      mesmo da barrinha do .card-beneficio. É uma aresta deliberada, não um
      acidente de emenda.
   3) RESPIRO + TEXTURA DIFERENTE: padding de topo maior e trama de LINHAS
      diagonais no lugar do campo de bolinhas usado na .beneficios e na
      .confianca. Duas faixas escuras com a MESMA textura leem como uma só;
      trocar a trama é o que mais ajuda de perto.
   ================================================================= */
.conversao { position: relative; padding: 6.5rem 1.5rem 5.5rem; background: var(--azul-noite); overflow: hidden; }

/* Item 2: a faixa divisória. O ::before estava livre nesta seção (aqui a
   textura é uma <div>, ao contrário da .confianca, que usa ::before). */
.conversao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dourado-vivo), var(--terracota));
  z-index: 2;
}

/* Item 3: trama de linhas. Sobre creme a textura era terracota a 10%; sobre
   azul-noite isso seria invisível, por isso vira branco a 5%. */
.conversao__textura {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .05) 0 2px,
    transparent 2px 14px);
  pointer-events: none;
}

.conversao__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; }
.conversao__inner h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
/* --azul-claro sobre --azul-noite dá 7,6:1 — folgado para texto pequeno. O
   --chumbo herdado do body era para fundo creme e aqui ficaria ilegível. */
.conversao__sub { color: var(--azul-claro); font-size: 1rem; margin-bottom: 2rem; }

/* Sombra mais funda e neutra: a sombra azul do --shadow some sobre fundo
   escuro e o card branco ficaria colado no fundo, sem a elevação do print. */
.form {
  text-align: left;
  background: var(--branco);
  padding: 2.2rem;
  border-radius: var(--radius);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--azul-escuro); margin-bottom: .4em; }
.field input,
.field select {
  width: 100%;
  padding: .8em .9em;
  border: 1.5px solid var(--azul-claro);
  border-radius: 12px;
  font-family: var(--font-texto);
  font-size: .95rem;
  background: var(--creme);
  color: var(--chumbo);
}
.field input:focus,
.field select:focus { outline: none; border-color: var(--terracota); }
/* Foco visível de verdade para quem navega por teclado: trocar a cor de uma
   borda de 1,5px não é indicação suficiente. */
.field input:focus-visible,
.field select:focus-visible { outline: 3px solid var(--dourado-vivo); outline-offset: 2px; }

/* O <select> nativo ignora a maior parte do estilo acima enquanto tiver a
   aparência do sistema: no Windows ele renderiza como uma caixinha cinza
   pequena, do tamanho do texto, e fica INLINE ao lado do <label> — foi o que
   quebrou o formulário. appearance:none devolve o controle do desenho ao CSS.
   Como isso também apaga a setinha do sistema, ela volta como imagem de fundo
   (SVG em data URI — não é requisição externa) e o padding à direita reserva
   o espaço dela para o texto da opção nunca passar por baixo. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606062' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9em center;
  background-size: 1.05em;
}
/* Enquanto a faixa não foi escolhida, o texto é placeholder e não resposta —
   fica na cor de placeholder, como nos campos de texto ao lado. */
.field select:invalid { color: #9a9a9a; }

/* ---------- Pergunta com botões grandes Sim/Não ---------- */
/* min-width: 0 no fieldset: sem isso ele se recusa a encolher dentro de
   grid/flex (comportamento antigo e universal do elemento) e estoura o card
   no celular. */
.pergunta { border: 0; margin: 0 0 1.3rem; padding: 0; min-width: 0; }
.pergunta__label { display: block; padding: 0; font-size: .82rem; font-weight: 600; color: var(--azul-escuro); margin-bottom: .55em; }

/* Duas colunas SEMPRE, inclusive no celular: são duas palavras curtas e é
   assim que o print do Maldivas mostra. */
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.opcao { position: relative; display: block; }

/* O RADIO DE VERDADE, invisível mas inteiro.
   Ele NÃO é display:none, visibility:hidden nem width:0 — é uma caixa do
   tamanho exato do botão, só que transparente. Isso preserva, sem JS nenhum:
   foco por Tab, navegação por setas dentro do grupo, leitura por leitor de
   tela, FormData e o objeto validity. E, se um dia alguém chamar
   reportValidity(), o balão nativo tem onde ancorar — um required que o
   navegador não consegue FOCAR faz o submit ser recusado em silêncio. */
.opcao input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2; /* o clique/toque cai no input, não no <span> */
}

.opcao__texto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px; /* alvo de toque confortável */
  padding: .8em 1em;
  border: 1.5px solid var(--azul-claro);
  border-radius: 14px;
  background: var(--creme);
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: .95rem;
  color: var(--azul-escuro);
  text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Sem a bolinha de radio dentro do botão: o formulário de referência que o
   cliente mandou igualar (Maldivas) traz só o rótulo centralizado.
   O estado marcado continua sem depender de MATIZ — o botão troca de claro
   (creme) para azul-escuro com texto branco, que é uma inversão de
   luminância, perceptível também por quem não distingue cores. */
.opcao input:hover + .opcao__texto { border-color: var(--terracota); }

.opcao input:checked + .opcao__texto {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  color: #fff;
  box-shadow: 0 8px 18px rgba(54, 77, 111, .3);
}

/* Foco pela borda do BOTÃO (o input é transparente, o outline dele não se vê). */
.opcao input:focus-visible + .opcao__texto { outline: 3px solid var(--dourado-vivo); outline-offset: 2px; }
/* Navegadores sem :focus-visible caem no :focus — vale um outline a mais do
   que um usuário de teclado perdido. */
@supports not selector(:focus-visible) {
  .opcao input:focus + .opcao__texto { outline: 3px solid var(--dourado-vivo); outline-offset: 2px; }
}

/* ---------- Erros de validação ---------- */
/* :empty => sem mensagem, sem espaço reservado. */
.campo__erro { margin: .35em 0 0; font-size: .76rem; font-weight: 600; color: var(--vermelho); }
.campo__erro:empty { display: none; }
.field.is-erro input { border-color: var(--vermelho); background: #FFF6F5; }
.pergunta.is-erro .opcao__texto { border-color: var(--vermelho); }

/* ---------- Botão de envio ---------- */
.btn__icone { width: 20px; height: 20px; flex: 0 0 auto; }
/* O JS trava o botão durante o envio; sem isto o botão travado fica idêntico
   ao destravado e a pessoa clica de novo achando que não funcionou. */
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- LGPD como texto miúdo ---------- */
/* Substituiu o checkbox .consent (pedido do cliente). O risco jurídico dessa
   troca está registrado no LEIA-ME.md. */
.form__lgpd { font-size: .74rem; line-height: 1.5; color: var(--chumbo); text-align: center; margin: 1rem 0 0; }
.form__lgpd a { color: var(--azul-escuro); text-decoration: underline; }

.form__feedback { margin-top: .9rem; font-size: .9rem; font-weight: 600; text-align: center; min-height: 1.2em; }
.form__feedback.ok { color: #2e7d4f; }
.form__feedback.erro { color: var(--vermelho); }

/* ===================== RODAPÉ ===================== */
.footer { background: #2b3c57; color: var(--azul-claro); padding: 3rem 1.5rem 2rem; }
.footer__inner { max-width: 700px; margin: 0 auto; text-align: center; }
/* Dimensionada por largura, como as outras duas (ver .topo__logo): 44px de
   altura neste lockup horizontal dariam 306px de largura contra 327px úteis a
   375px de tela — passaria raspando e com risco de esmagamento. A 280px de
   largura o "CRECI J10494" impresso na logo sai com ~11px de altura de letra. */
.footer__logo { width: min(280px, 78%); height: auto; margin: 0 auto 1.2rem; filter: brightness(0) invert(1); }
.footer__info p { font-size: .88rem; margin-bottom: .4em; }
.footer__info a { text-decoration: underline; }
.footer__disclaimer { font-size: .72rem; font-style: italic; opacity: .75; margin-top: 1rem; }
.footer__copy { font-size: .78rem; opacity: .6; margin-top: 1.2rem; margin-bottom: 0; }

/* =========================================================
   ACESSIBILIDADE — desligar movimento quando o sistema pedir
   Todas as animações da LP ficam concentradas aqui.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

  /* Foguinho do CTA do hero */
  .btn__fogo { animation: none; }

  /* Anéis de pulso do botão "Quero meu imóvel!" */
  .btn--pulsa::before,
  .btn--pulsa::after { animation: none; box-shadow: none; opacity: 0; }

  /* Benefícios: cards SEMPRE visíveis, sem entrada, sem flutuação.
     A primeira linha é o item crítico — sem ela, quem tem "reduzir movimento"
     ligado veria três cards em branco depois que o JS marca a seção. */
  .beneficios.js-anima .card-beneficio,
  .beneficios.js-anima .card-beneficio.is-visivel { opacity: 1; animation: none; }
  .card-beneficio__icone { animation: none; }
  .card-beneficio { transition: none; }
  .card-beneficio:hover { transform: none; }
  .card-beneficio::before { transition: none; }

  /* Botões Sim/Não do formulário: a troca de estado passa a ser instantânea. */
  .opcao__texto,
  .opcao__texto::before { transition: none; }

  /* Os CTAs são âncoras: rolagem animada também é movimento.
     Isto cobre só as âncoras. A rolagem disparada por JS ("Quero simular este
     imóvel", nos cards da vitrine) NÃO obedece a esta regra — um
     behavior:'smooth' passado na chamada vence o scroll-behavior —, por isso o
     main.js decide o behavior lendo a mesma preferência.
     (Até 07/08/2026 esta lista incluía as setas do carrossel e o swipe; os dois
     deixaram de existir quando a vitrine virou grade.) */
  html { scroll-behavior: auto; }
}