/* ==========================================================================
   INK Imóveis — Consultoria Imobiliária
   Paleta derivada do logo oficial: azul-marinho, branco e dourado discreto.
   ========================================================================== */

:root{
  --marinho:        #0E1D33;
  --marinho-escuro: #08131F;
  --marinho-claro:  #1B3350;
  --dourado:        #C6A75E;   /* dourado da marca — uso sobre fundo escuro e em detalhes */
  --dourado-texto:  #8A6A17;   /* variação escurecida: texto dourado sobre fundo claro (contraste AA) */
  --dourado-suave:  #E3D2A6;
  --branco:         #FFFFFF;
  --areia:          #F7F5F1;
  --cinza-borda:    #E2DED6;
  --texto:          #1C2430;
  --texto-suave:    #56606E;
  --texto-claro:    #C7CFDA;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --largura: 1120px;
  --raio: 4px;
  --transicao: 180ms ease;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--texto);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-0.01em; margin:0 0 .5em; }
h1{ font-size:clamp(2.3rem, 6vw, 3.9rem); }
h2{ font-size:clamp(1.8rem, 4vw, 2.6rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1rem; }

a{ color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--dourado);
  outline-offset:2px;
  border-radius:2px;
}

.container{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:clamp(20px, 5vw, 40px); }
.container--estreito{ max-width:760px; }
.centro{ text-align:center; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--marinho); color:var(--branco);
  padding:.75rem 1.25rem; text-decoration:none;
}
.pular:focus{ left:12px; top:12px; }

/* ---------- Cabeçalho ---------- */
.cabecalho{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--cinza-borda);
}
.cabecalho__linha{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:76px;
}

/* Identificação do topo: tipográfica (decisão aprovada pelo gestor).
   O logo oficial não é usado aqui — só no rodapé, como assinatura visual. */
.marca{ text-decoration:none; display:inline-flex; flex-direction:column; line-height:1; }
.marca__nome{
  font-family:var(--serif); font-size:1.55rem; font-weight:600;
  color:var(--marinho); white-space:nowrap;
}
.marca__sigla{ font-weight:700; letter-spacing:.2em; margin-right:-.08em; }
.marca__complemento{ margin-left:0; }            /* o espaço entre as palavras é real, só ajustado opticamente */
.marca__assinatura{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dourado-texto); margin-top:.42rem; font-weight:600;
}

.navegacao__lista{
  display:flex; align-items:center; gap:1.6rem;
  list-style:none; margin:0; padding:0;
}
.navegacao a{
  text-decoration:none; font-size:.92rem; color:var(--texto-suave);
  transition:color var(--transicao);
}
.navegacao a:hover{ color:var(--marinho); }
.navegacao .botao{ color:var(--branco); }

.menu-botao{
  display:none; align-items:center; gap:.5rem;
  background:none; border:1px solid var(--cinza-borda); border-radius:var(--raio);
  padding:.5rem .85rem; font:inherit; font-size:.85rem; color:var(--marinho); cursor:pointer;
}
.menu-botao__barras,
.menu-botao__barras::before,
.menu-botao__barras::after{
  content:""; display:block; width:18px; height:2px; background:var(--marinho); position:relative;
}
.menu-botao__barras::before{ position:absolute; top:-6px; }
.menu-botao__barras::after{ position:absolute; top:6px; }

/* ---------- Botões ---------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--marinho); color:var(--branco);
  padding:.95rem 1.7rem; border:1px solid var(--marinho); border-radius:var(--raio);
  font-size:.95rem; font-weight:600; text-decoration:none; cursor:pointer;
  transition:background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.botao:hover{ background:var(--marinho-claro); border-color:var(--marinho-claro); }
.botao--secundario{ background:transparent; color:var(--marinho); border-color:var(--marinho); }
.botao--secundario:hover{ background:var(--marinho); color:var(--branco); }
.botao--pequeno{ padding:.55rem 1.1rem; font-size:.85rem; }
.botao--largo{ width:100%; padding:1.05rem 1.7rem; }

.secao--escura .botao{ background:var(--dourado); border-color:var(--dourado); color:var(--marinho-escuro); }
.secao--escura .botao:hover{ background:var(--dourado-suave); border-color:var(--dourado-suave); }
.secao--escura .botao--secundario{ background:transparent; color:var(--branco); border-color:rgba(255,255,255,.5); }
.secao--escura .botao--secundario:hover{ background:var(--branco); color:var(--marinho); }

/* ---------- Tipografia de apoio ---------- */
.sobretitulo{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dourado-texto); font-weight:700; margin-bottom:.9rem;
}
.hero .sobretitulo,
.secao--escura .sobretitulo{ color:var(--dourado); }
.destaque{ color:var(--dourado); }
.secao__intro{ max-width:58ch; color:var(--texto-suave); font-size:1.05rem; }
.nota{ font-size:.9rem; color:var(--texto-suave); max-width:60ch; margin-top:1.5rem; }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg, var(--marinho) 0%, var(--marinho-escuro) 100%);
  color:var(--branco);
  padding:clamp(3.5rem, 9vw, 6.5rem) 0;
}
.hero__grade{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero h1{ color:var(--branco); margin-bottom:1.2rem; }
.hero__chamada{ font-size:1.12rem; color:var(--texto-claro); max-width:52ch; }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.85rem; margin:2rem 0 2.5rem; }
.hero__acoes .botao{ background:var(--dourado); border-color:var(--dourado); color:var(--marinho-escuro); }
.hero__acoes .botao:hover{ background:var(--dourado-suave); border-color:var(--dourado-suave); }
.hero__acoes .botao--secundario{ background:transparent; color:var(--branco); border-color:rgba(255,255,255,.45); }
.hero__acoes .botao--secundario:hover{ background:var(--branco); color:var(--marinho); }
.hero__selos{
  list-style:none; margin:0; padding:1.6rem 0 0; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; font-size:.86rem; color:var(--texto-claro);
}
.hero__selos li::before{ content:"\2022"; color:var(--dourado); margin-right:.55rem; }

/* Logo oficial no hero. O fundo do cartão é o mesmo marinho do arquivo PNG
   (#001F3E), então o quadrado da imagem se dissolve no cartão e só a arte
   aparece. Nada de recorte: o <img> entra inteiro, largura fluida e altura
   automática, mantendo a proporção 1:1 do original. */
.cartao-marca{
  background:#001F3E;
  border:1px solid rgba(198,167,94,.4);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  max-width:340px;
  margin-inline:auto;
}
.cartao-marca__logo{
  width:100%; height:auto; display:block;
}

/* ---------- Seções ---------- */
.secao{ padding:clamp(3.5rem, 8vw, 6rem) 0; }
.secao--clara{ background:var(--areia); }
.secao--escura{ background:var(--marinho); color:var(--branco); }
.secao--escura h2{ color:var(--branco); }
.secao--escura .secao__intro,
.secao--escura .nota{ color:var(--texto-claro); }

/* ---------- Cartões ---------- */
.cartoes{ display:grid; gap:1.5rem; margin-top:2.75rem; }
.cartoes--3{ grid-template-columns:repeat(3, 1fr); }
.cartao{
  background:var(--branco); border:1px solid var(--cinza-borda); border-radius:var(--raio);
  padding:1.9rem 1.6rem; transition:border-color var(--transicao), transform var(--transicao);
}
.cartao:hover{ border-color:var(--dourado); transform:translateY(-2px); }
.cartao h3{ color:var(--marinho); }
.cartao p{ color:var(--texto-suave); font-size:.96rem; margin:0; }
.cartao__numero{
  display:block; font-family:var(--serif); font-size:.9rem; color:var(--dourado-texto);
  letter-spacing:.12em; margin-bottom:.9rem;
}
.cartao--simples{ padding:1.5rem 1.4rem; }

/* ---------- Etapas ---------- */
.etapas{
  list-style:none; margin:2.75rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.6rem 2.5rem;
}
.etapa{ display:flex; gap:1.1rem; align-items:flex-start; }
.etapa__num{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--dourado); color:var(--dourado);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1rem;
}
.etapa h3{ color:var(--branco); margin-bottom:.3rem; font-size:1.1rem; }
.etapa p{ color:var(--texto-claro); font-size:.94rem; margin:0; }

/* ---------- Etiquetas (regiões) ---------- */
.etiquetas{
  list-style:none; display:flex; flex-wrap:wrap; gap:.7rem;
  margin:2.5rem 0 0; padding:0;
}
.etiquetas li{
  border:1px solid var(--cinza-borda); border-radius:999px;
  padding:.55rem 1.15rem; font-size:.92rem; color:var(--marinho); background:var(--areia);
}

/* ---------- Oportunidades ---------- */
.filtros{
  display:grid; grid-template-columns:repeat(4,1fr) auto; gap:1rem;
  align-items:end; margin-top:2.5rem; padding:1.4rem 1.6rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--raio);
}
.filtro label{
  display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dourado); font-weight:700; margin-bottom:.45rem;
}
.filtro select{
  width:100%; font:inherit; font-size:.92rem; color:var(--branco);
  background:var(--marinho-escuro); border:1px solid rgba(255,255,255,.24);
  border-radius:var(--raio); padding:.6rem .8rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--dourado) 50%),linear-gradient(135deg,var(--dourado) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  appearance:none; padding-right:2.4rem;
}
.filtro select option{ background:var(--marinho-escuro); color:var(--branco); }
.filtro__limpar{
  font:inherit; font-size:.85rem; color:var(--texto-claro); cursor:pointer;
  background:none; border:1px solid rgba(255,255,255,.24); border-radius:var(--raio);
  padding:.62rem 1.1rem; white-space:nowrap;
}
.filtro__limpar:hover{ border-color:var(--dourado); color:var(--branco); }
.filtros__contagem{
  margin:1.25rem 0 0; font-size:.85rem; color:var(--texto-claro); opacity:.85;
}

.oportunidades__nota-marcas{
  margin:1.5rem 0 0; font-size:.9rem; color:var(--texto-claro); opacity:.85; max-width:62ch;
}

/* barra de seleção — fica fixa no rodapé da tela enquanto houver escolhas */
.barra-selecao{
  position:sticky; bottom:1rem; z-index:20;
  margin:1.5rem 0 0; padding:1rem 1.4rem;
  background:var(--marinho-escuro); border:1px solid var(--dourado);
  border-radius:var(--raio); box-shadow:0 14px 40px rgba(0,0,0,.45);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.barra-selecao__contador{ margin:0; font-weight:600; color:var(--branco); font-size:.95rem; }
.barra-selecao__acoes{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

.oportunidade--selecionada{ border-color:var(--dourado); box-shadow:inset 0 0 0 1px var(--dourado); }
.oportunidade__selecionar{
  display:flex; align-items:center; gap:.55rem; cursor:pointer;
  font-size:.85rem; color:var(--texto-claro);
}
.oportunidade__selecionar input{ width:18px; height:18px; accent-color:var(--dourado); flex:0 0 auto; }
.oportunidade__selecionar:hover{ color:var(--branco); }
.oportunidade__selecionar input:focus-visible{ outline:3px solid var(--dourado); outline-offset:2px; }

.oportunidade__endereco{
  font-size:.82rem; color:var(--texto-claro); margin:0 0 .9rem;
  padding-top:.7rem; border-top:1px dashed rgba(255,255,255,.12);
}
.oportunidade__endereco-rotulo{
  display:block; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dourado); margin-bottom:.2rem;
}
.oportunidade__aviso{
  font-size:.72rem; color:var(--texto-claro); opacity:.7; margin:0 0 .9rem; line-height:1.5;
}

.oportunidades{ margin-top:1.75rem; display:grid; gap:1.5rem; grid-template-columns:repeat(3,1fr); }
.oportunidades__estado{
  grid-column:1 / -1; border:1px dashed rgba(255,255,255,.28); border-radius:var(--raio);
  padding:2.5rem 1.5rem; text-align:center; color:var(--texto-claro); margin:0;
}
.oportunidade{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--raio); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color var(--transicao), transform var(--transicao);
}
.oportunidade:hover{ border-color:var(--dourado); transform:translateY(-2px); }
.oportunidade__foto{ aspect-ratio:4/3; overflow:hidden; background:rgba(0,0,0,.25); }
.oportunidade__foto{ position:relative; }
.oportunidade__foto img{
  width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block;
}
/* selo que diz o que a imagem é — render de fachada, não foto do prédio pronto */
.oportunidade__tipoimg{
  position:absolute; left:.7rem; bottom:.7rem;
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(8,19,31,.82); color:var(--texto-claro);
  padding:.25rem .6rem; border-radius:999px;
}
/* fallback de localização */
.oportunidade__foto--mapa{
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(rgba(8,19,31,.45),rgba(8,19,31,.45)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 34px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.oportunidade__foto--mapa a{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  text-align:center; text-decoration:none; padding:1rem;
}
.oportunidade__foto--mapa strong{
  font-family:var(--serif); font-size:1rem; color:var(--branco);
}
.oportunidade__foto--mapa span{ font-size:.75rem; color:var(--dourado); }
.oportunidade__foto--mapa a:hover strong{ text-decoration:underline; }
.oportunidade__atribuicao{
  position:absolute; right:.7rem; bottom:.6rem;
  font-size:.58rem; letter-spacing:.08em; color:var(--texto-claro); opacity:.6;
}
/* sem foto oficial: espaço neutro — nunca a imagem de outro empreendimento */
.oportunidade__foto--vazia{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.oportunidade__foto--vazia span{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-claro); opacity:.5;
}
.oportunidade__corpo{ padding:1.5rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.oportunidade__bairro{ color:var(--dourado); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 .35rem; }
.oportunidade h3{ color:var(--branco); margin-bottom:.2rem; font-size:1.15rem; }
.oportunidade__construtora{ color:var(--texto-claro); font-size:.85rem; opacity:.8; margin:0 0 .9rem; }
.oportunidade dl{ margin:0 0 1rem; display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; font-size:.88rem; }
.oportunidade dt{ color:var(--texto-claro); opacity:.7; }
.oportunidade dd{ margin:0; color:var(--branco); }
.oportunidade__estande{
  font-size:.8rem; color:var(--texto-claro); opacity:.75; margin:0 0 .9rem;
  padding-top:.7rem; border-top:1px dashed rgba(255,255,255,.12);
}
.oportunidade__estande a{ color:var(--dourado); text-decoration:none; border-bottom:1px solid rgba(198,167,94,.4); }
.oportunidade__estande a:hover{ border-bottom-color:var(--dourado); }

.oportunidade__preco{
  font-family:var(--serif); font-size:1.05rem; color:var(--dourado);
  margin:0 0 1.1rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.12);
}
.oportunidade__status{
  align-self:flex-start; margin-bottom:.9rem; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; border:1px solid var(--dourado); color:var(--dourado);
  border-radius:999px; padding:.22rem .75rem;
}
.oportunidade__acoes{
  margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem;
}
.oportunidade__oficial{
  font-size:.85rem; color:var(--texto-claro); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.oportunidade__oficial:hover{ color:var(--branco); border-bottom-color:var(--dourado); }

.oportunidades__mais{ display:flex; justify-content:center; margin-top:2.25rem; }
.aviso-valores{
  margin:2rem auto 0; max-width:70ch; text-align:center;
  font-size:.85rem; color:var(--texto-claro);
  border:1px solid rgba(198,167,94,.35); border-radius:var(--raio);
  padding:.9rem 1.2rem; background:rgba(198,167,94,.07);
}

/* ---------- Rede de relacionamento ---------- */
.parceiros{ margin-top:2.5rem; display:grid; gap:1.5rem; grid-template-columns:repeat(3,1fr); }
.parceiros__estado{
  grid-column:1 / -1; border:1px dashed var(--cinza-borda); border-radius:var(--raio);
  padding:2.25rem 1.75rem; text-align:center; color:var(--texto-suave);
  font-size:.95rem; margin:0 auto; max-width:62ch;
}
.parceiro{
  background:var(--branco); border:1px solid var(--cinza-borda); border-radius:var(--raio);
  padding:1.75rem 1.6rem; display:flex; flex-direction:column; align-items:flex-start;
}
/* logotipo do parceiro: altura fixa e largura automática preservam a proporção */
.parceiro__logo{ height:44px; width:auto; max-width:100%; margin-bottom:1.1rem; }
.parceiro__categoria{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dourado-texto); font-weight:700; margin:0 0 .5rem;
}
.parceiro h3{ color:var(--marinho); margin-bottom:.4rem; }
.parceiro__descricao{ color:var(--texto-suave); font-size:.94rem; margin:0 0 1rem; }
.parceiro__site{
  margin-top:auto; font-size:.9rem; font-weight:600; color:var(--marinho);
  text-decoration:none; border-bottom:1px solid var(--dourado);
}
.parceiro__site:hover{ border-bottom-width:2px; }

/* visível apenas para leitores de tela */
.apenas-leitor{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Atalhos de contato (telefone e WhatsApp) ---------- */
.atalhos{
  margin-top:2.25rem; padding:1.4rem 1.6rem;
  background:var(--branco); border:1px solid var(--cinza-borda);
  border-left:3px solid var(--dourado); border-radius:var(--raio);
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
}
.atalhos__texto{
  margin:0; font-weight:600; color:var(--marinho); font-size:.98rem;
}
.atalhos__botoes{ display:flex; flex-wrap:wrap; gap:.75rem; }
.atalhos .botao{ padding:.7rem 1.3rem; font-size:.9rem; }

/* ---------- Redes sociais ---------- */
.redes{
  list-style:none; margin:1.25rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem .9rem;
}
.rede{
  display:inline-flex; align-items:baseline; gap:.4rem;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:.45rem 1rem; font-size:.85rem; text-decoration:none;
  color:var(--texto-claro); transition:border-color var(--transicao), color var(--transicao);
}
a.rede:hover{ border-color:var(--dourado); color:var(--branco); }
.rede--pendente{ opacity:.55; cursor:default; }
.rede--pendente small{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dourado);
}

/* ---------- Chamada social (TikTok) ---------- */
.chamada-social{
  margin-top:3rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem 2rem;
  padding:1.5rem 1.75rem;
  border:1px solid rgba(255,255,255,.16);
  border-left:3px solid var(--dourado);
  border-radius:var(--raio);
  background:rgba(255,255,255,.035);
}
.chamada-social__texto{ max-width:52ch; }
.chamada-social__titulo{ margin:0 0 .35rem; font-size:1.15rem; color:var(--branco); }
.chamada-social p{ margin:0; font-size:.95rem; color:var(--texto-claro); }
.chamada-social__botao{ flex:0 0 auto; }

/* ---------- Formulário ---------- */
.formulario{ margin-top:2.5rem; }

/* Armadilha anti-spam: fora da tela, mas sem display:none — parte dos robôs
   ignora campo escondido dessa forma, e é justamente neles que queremos cair. */
.armadilha{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.campo{ margin-bottom:1.5rem; }
.campo label,
.campo legend{
  display:block; font-size:.88rem; font-weight:600; color:var(--marinho); margin-bottom:.45rem;
}
.campo--grupo{ border:1px solid var(--cinza-borda); border-radius:var(--raio); padding:1.4rem; }
.campo--grupo legend{ padding:0 .5rem; margin-bottom:0; }
.campo__ajuda{ font-size:.85rem; color:var(--texto-suave); margin:.2rem 0 1rem; }
.campo__extra{ margin-top:1.3rem; }
.obrigatorio{ color:var(--dourado-texto); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--texto);
  background:var(--branco); border:1px solid var(--cinza-borda); border-radius:var(--raio);
  padding:.8rem .95rem; transition:border-color var(--transicao);
}
input:hover, select:hover, textarea:hover{ border-color:#C9C2B4; }
textarea{ resize:vertical; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--marinho) 50%),linear-gradient(135deg,var(--marinho) 50%,transparent 50%); background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:2.6rem; }

.campo-duplo{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.25rem; }

.campo__erro{ color:#9B2C2C; font-size:.85rem; margin:.4rem 0 0; }
[aria-invalid="true"]{ border-color:#9B2C2C; }

.opcoes{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem 1rem; }
.opcao{ display:flex; align-items:center; gap:.55rem; font-weight:400; font-size:.94rem; color:var(--texto); margin:0; cursor:pointer; }
.opcao input{ width:17px; height:17px; accent-color:var(--marinho); flex:0 0 auto; }

.formulario__aviso{
  font-size:.85rem; color:var(--texto-suave); background:var(--branco);
  border-left:3px solid var(--dourado); padding:.9rem 1.1rem; margin:0 0 1rem;
}
.formulario__privacidade{
  font-size:.82rem; color:var(--texto-suave); margin:0 0 1.5rem;
}

/* Mensagem de falha do envio, com a alternativa do WhatsApp. */
.formulario__estado{
  font-size:.9rem; margin:0 0 1.25rem; padding:.9rem 1.1rem;
  border-radius:var(--raio);
  background:#FDF2F2; border:1px solid #E7C6C6; color:#7A2222;
}
.formulario__estado a{ color:#7A2222; font-weight:600; }

/* Envio em andamento: botão bloqueado com indicador de progresso. */
.botao[aria-busy="true"]{ cursor:progress; opacity:.75; }
.botao[aria-busy="true"]::before{
  content:""; width:.85em; height:.85em; margin-right:.6em;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  display:inline-block; vertical-align:-.1em;
  animation:girando 700ms linear infinite;
}
@keyframes girando{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .botao[aria-busy="true"]::before{ animation:none; border-top-color:currentColor; opacity:.5; }
}

.resultado{
  margin-top:2.5rem; background:var(--branco);
  border:1px solid var(--cinza-borda); border-top:3px solid var(--dourado);
  border-radius:var(--raio); padding:2rem;
}
.resultado .botao{ margin:.4rem .6rem .4rem 0; }
.resumo{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem; margin:1.5rem 0 2rem; font-size:.95rem; }
.resumo dt{ color:var(--texto-suave); }
.resumo dd{ margin:0; color:var(--texto); }

/* ---------- Chamada final ---------- */
.chamada-final__email{ font-family:var(--serif); font-size:clamp(1.1rem,3vw,1.6rem); margin:1.5rem 0 2rem; }
.chamada-final__email a{ color:var(--dourado); text-decoration:none; border-bottom:1px solid rgba(198,167,94,.4); }
.chamada-final__email a:hover{ border-bottom-color:var(--dourado); }
.chamada-final .secao__intro{ margin-inline:auto; }
.chamada-final__acoes{
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center;
}

/* ---------- Rodapé ---------- */
.rodape{ background:var(--marinho-escuro); color:var(--texto-claro); padding:3.5rem 0 2rem; font-size:.92rem; }
.rodape__grade{ display:flex; flex-wrap:wrap; gap:2rem 4rem; justify-content:space-between; }
.rodape__titulo{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dourado); font-weight:700;
  margin:0 0 .9rem;
}
.rodape__contato{ max-width:34ch; }
.rodape__noscript{ margin-top:1rem; font-size:.85rem; }

/* Identificação institucional: discreta, abaixo dos contatos, separada por um
   filete. Não compete com os contatos, mas fica legível — o CRECI é obrigatório
   na publicidade imobiliária. */
.rodape__institucional{
  margin-top:1.6rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem;
  line-height:1.65;
  color:rgba(255,255,255,.78);
}
.rodape__institucional p{ margin:0; }
.rodape__institucional-marca{
  font-family:var(--serif);
  font-size:.95rem;
  letter-spacing:.1em;
  color:var(--branco);
  margin-bottom:.25rem !important;
}
.rodape__creci{
  margin-top:.25rem !important;
  letter-spacing:.06em;
  color:var(--dourado);
}

.rodape__marca{ font-family:var(--serif); font-size:1.5rem; color:var(--branco); letter-spacing:.14em; margin:0; }
.rodape__assinatura{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dourado); margin:.4rem 0 0; }
.rodape a{ color:var(--texto-claro); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2); }
.rodape a:hover{ color:var(--branco); }
.rodape p{ margin:0 0 .4rem; }
/* Assinatura visual: faixa no mesmo marinho do arquivo do logo (#001F3E),
   para as bordas do quadrado sumirem e sobrar só a arte. */
.rodape__assinatura-visual{
  margin-top:3rem;
  background:#001F3E;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:center; align-items:center;
}
/* altura fixa + largura automática = proporção original intacta */
.rodape__logo{
  height:190px; width:auto; max-width:100%;
  display:block;
}

.rodape__linha-final{
  margin-top:2rem; padding-top:1.5rem;
  font-size:.82rem; opacity:.7;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 900px){
  .hero__grade{ grid-template-columns:1fr; }
  .hero__cartao{ order:-1; width:100%; max-width:300px; margin-inline:auto; }
  .cartoes--3{ grid-template-columns:repeat(2,1fr); }
  .oportunidades,
  .parceiros{ grid-template-columns:repeat(2,1fr); }
  .filtros{ grid-template-columns:repeat(2,1fr); }
  .etapas{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  body{ font-size:16px; }
  html{ scroll-padding-top:80px; }

  .menu-botao{ display:inline-flex; }

  .navegacao{
    position:absolute; left:0; right:0; top:100%;
    background:var(--branco); border-bottom:1px solid var(--cinza-borda);
    box-shadow:0 18px 40px rgba(14,29,51,.12);
    display:none;
  }
  .navegacao.aberto{ display:block; }
  .navegacao__lista{
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem clamp(20px,5vw,40px) 1.5rem;
  }
  .navegacao__lista li{ border-bottom:1px solid var(--areia); }
  .navegacao__lista li:last-child{ border:0; padding-top:1rem; }
  .navegacao__lista a{ display:block; padding:.95rem 0; font-size:1rem; color:var(--marinho); }
  .navegacao__lista .botao{ padding:.9rem 1.1rem; text-align:center; }

  .cartoes--3,
  .oportunidades,
  .parceiros,
  .campo-duplo,
  .opcoes{ grid-template-columns:1fr; }

  .filtros{ grid-template-columns:1fr; gap:.9rem; padding:1.2rem; }
  .filtro__limpar{ width:100%; padding:.8rem 1.1rem; }
  .oportunidades__mais .botao{ width:100%; }
  .barra-selecao{ flex-direction:column; align-items:stretch; text-align:center; bottom:.5rem; }
  .barra-selecao__acoes{ flex-direction:column; }
  .barra-selecao__acoes .botao,
  .barra-selecao__acoes .filtro__limpar{ width:100%; }
  .oportunidade__acoes .botao{ width:100%; text-align:center; }
  /* alvo de toque confortável para marcar o empreendimento */
  .oportunidade__selecionar{ padding:.6rem 0; font-size:.9rem; }

  /* No celular o logo oficial abre o hero, acima da mensagem, em tamanho
     contido para não empurrar o texto para baixo da dobra. */
  .hero__cartao{ max-width:236px; }
  .cartao-marca{ border-radius:6px; }

  .hero__acoes .botao{ width:100%; }
  .hero__selos{ flex-direction:column; gap:.5rem; }
  .marca__nome{ font-size:1.35rem; }
  .marca__assinatura{ font-size:.55rem; letter-spacing:.2em; }
  .rodape__assinatura-visual{ margin-top:2.5rem; }
  .rodape__logo{ height:140px; }

  .chamada-social{ flex-direction:column; align-items:stretch; padding:1.3rem 1.3rem; }
  .chamada-social__botao{ width:100%; text-align:center; }

  .atalhos{ flex-direction:column; align-items:stretch; }
  .atalhos__botoes{ flex-direction:column; }
  .atalhos .botao{ width:100%; padding:.9rem 1.3rem; }
  .chamada-final__acoes{ flex-direction:column; }
  .chamada-final__acoes .botao{ width:100%; }
  .redes{ gap:.7rem; }
  .rede{ padding:.6rem 1.15rem; font-size:.9rem; }

  /* alvos de toque confortáveis nos links de contato */
  .rodape a,
  .chamada-final__email a{ display:inline-block; padding:.5rem 0; }

  .resultado{ padding:1.5rem; }
  .resultado .botao{ width:100%; margin:.4rem 0; }
  .resumo{ grid-template-columns:1fr; gap:.15rem; }
  .resumo dt{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-top:.7rem; }
}

@media print{
  .cabecalho, .menu-botao, .pular, .hero__acoes, .formulario{ display:none; }
  body{ color:#000; }
}

/* Aviso de cookies (js/medicao.js; só aparece com ID de medição da INK configurado) — 30/10/2026 */
.aviso-cookies{ position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:560px;
  margin:0 auto; background:var(--marinho); color:var(--texto-claro); border-radius:var(--raio);
  padding:1rem 1.1rem; box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:.9rem; }
.aviso-cookies p{ margin:0; }
.aviso-cookies a{ color:var(--dourado); }
.aviso-cookies__botoes{ display:flex; gap:.6rem; margin-top:.75rem; }
.aviso-cookies .botao--secundario{ color:var(--branco); border-color:rgba(255,255,255,.5); }
.rodape__linha-final a{ color:inherit; }

/* Botão fixo de WhatsApp — só no celular (31/10/2026). Marinho com filete dourado,
   como os demais botões do site. js/lead-rapido.js esconde o botão quando o rodapé
   (contatos e CRECI) entra na tela e o sobe acima do aviso de cookies. */
.whats-flutuante{ display:none; }
@media (max-width: 720px){
  .whats-flutuante{
    position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:45;
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:50%;
    background:var(--marinho); color:var(--branco) !important;
    border:1px solid var(--dourado) !important;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
    transition:opacity var(--transicao), transform var(--transicao), bottom var(--transicao);
  }
  .whats-flutuante:hover, .whats-flutuante:focus-visible{ background:var(--marinho-claro); }
  .whats-flutuante:focus-visible{ outline:2px solid var(--dourado); outline-offset:3px; }
  .whats-flutuante.is-oculto{ opacity:0; transform:translateY(12px); pointer-events:none; visibility:hidden; }
}
@media print{ .whats-flutuante{ display:none !important; } }
