/* ============================================================
   responsivo.css — Polish + responsividade do clone viniun.
   Carregado POR ÚLTIMO (depois de estilo.css/acessibilidade.css)
   para sobrescrever pontos frágeis sem tocar no estilo.css original
   (preservando a fidelidade desktop do site de origem).
   Todas as sobrescritas abaixo são cirúrgicas e comentadas.
   ============================================================ */

/* ------------------------------------------------------------
   1) Guarda anti-overflow horizontal.
   O chrome do site de origem tem alguns blocos ~5px mais largos que a
   viewport (margens/negativos herdados). Impede scroll lateral
   sem afetar o layout desktop.
   ------------------------------------------------------------ */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
#Pagina {
  overflow-x: hidden;
}
img {
  max-width: 100%;
}

/* A barra fixa (.menufixo) usa `left:auto` (posição estática). Com o
   overflow-x:hidden acima, essa posição estática muda e empurra o
   hambúrguer ~24px para fora da tela à direita. Fixamos no canto. */
.menufixo {
  left: 0 !important;
  right: 0 !important;
}
.menufixo .centro {
  box-sizing: border-box;
  padding-right: 12px;
}

/* ------------------------------------------------------------
   2) FIX do título da busca "Pesquisar imóveis…".
   Causa raiz: `.bgParallax` usa `background-attachment: fixed`.
   Como a seção de busca do clone fica mais abaixo na página,
   a imagem fixa não é pintada atrás da caixa → o título branco
   (#fff) fica sobre área branca e aparece "vazado"/cinza.
   `fixed` também é problemático/ignorado em mobile (iOS).
   Solução: prender a imagem à própria seção (scroll) — assim a
   foto da praia renderiza atrás do título e da caixa em qualquer
   posição de rolagem e em qualquer dispositivo. Fallback de cor
   escura garante legibilidade mesmo se a imagem falhar.
   ------------------------------------------------------------ */
.bgParallax {
  background-attachment: scroll !important;
  background-color: #2b3a44; /* fallback caso a imagem não carregue */
}

/* Reforça a leitura do título sobre a foto (sombra um pouco mais
   forte, sem mudar cor/tamanho no desktop). */
form#busca h2 {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ============================================================
   3) RESPONSIVO — Tablet / Mobile
   O estilo.css já cobre muita coisa; aqui reforçamos os pontos
   que ficaram frágeis no clone e garantimos que nada estoure.
   ============================================================ */

@media (max-width: 1010px) {
  /* A grade Bootstrap (.container/.row/.col-lg-*) não é carregada
     no clone; garante que o container da busca ocupe a largura. */
  #Linha2 .container.hidden-xs {
    width: 100%;
    max-width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }
  #Linha2 .row,
  #Linha2 [class^="col-lg-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
}

@media (max-width: 768px) {
  /* Reduz a altura exagerada do parallax no mobile para a busca
     não deixar um "buraco" gigante. */
  #Linha2 .bgParallax {
    height: auto !important;
    padding: 18px 0 26px;
    background-position: 50% 30% !important;
  }
  form#busca {
    margin-top: 0 !important;
    padding: 0 10px;
    box-sizing: border-box;
  }
  form#busca h2 {
    font-size: 26px;
    line-height: 1.15;
    margin-bottom: 14px;
    padding: 0 6px;
  }
  form#busca > #box-busca {
    padding: 12px;
  }
  /* Campos empilhados: cantos arredondados e espaçamento coerentes. */
  #box-busca select,
  #box-busca input {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 8px;
    border-radius: 6px !important;
    font-size: 16px !important; /* evita zoom automático no iOS */
  }
  #box-busca input {
    width: 100% !important;
  }
  form#busca #btn-buscar {
    width: 100% !important;
    margin: 2px 0 0 !important;
    border-radius: 6px !important;
  }
  #box-busca select:last-child {
    width: 100% !important;
  }

  /* Segunda busca (referência): input + botão lado a lado, centralizados.
     O estilo.css usa `height: 87%` no input, que colapsa fora do contexto
     original — fixamos uma altura real e distribuímos com flex. */
  .ref {
    padding: 12px 10px 0;
    box-sizing: border-box;
  }
  .ref ul {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
  .ref ul li:first-child {
    flex: 1 1 auto;
    display: flex;
  }
  .ref ul li:last-child {
    flex: 0 0 auto;
  }
  .ref li input#referencia {
    width: 100%;
    height: 46px !important;
    box-sizing: border-box;
    font-size: 16px;
    border: 0;
    padding: 0 12px;
  }
  .ref li #BtnOk {
    height: 46px !important;
    border-radius: 0 4px 4px 0 !important;
    margin: 0 !important;
  }
}

/* ---- Cabeçalho institucional (#Linha1) em telas médias ---- */
@media (max-width: 900px) {
  #MaisOpcoes {
    text-align: center;
  }
  /* Ícones/telefones do topo institucional não devem estourar. */
  #MaisOpcoes ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
}

/* ------------------------------------------------------------
   H1 do topo (23/09/2026): `line-height` igual ao `font-size`
   (61,5px nos dois) cortava a perna do "j" e o acento do "ó" em
   11px. Título grande precisa de entrelinha maior que 1.
   ------------------------------------------------------------ */
#topo .texto h1 {
  line-height: 1.15;
  padding-bottom: 2px;
}

/* ------------------------------------------------------------
   CAMPOS QUE ESTOURAM A TELA (23/09/2026)
   O estilo.css do legado não tem `box-sizing` global — ele aplica
   `border-box` caso a caso, em 20 lugares. Todo campo escrito
   depois com `width:100%` + padding passou a somar padding À
   largura e a furar a tela: o valor do imóvel no simulador
   (14px além da viewport de 390px), campos de "Encomende seu
   imóvel" (5px) e os formulários da ficha. Como o site tem
   `overflow-x:hidden`, o estouro não vira rolagem: o canto
   direito do campo simplesmente fica inalcançável.
   Escopo de propósito limitado ao conteúdo (`main`): o chrome
   do legado foi desenhado em content-box e não se toca.
   ------------------------------------------------------------ */
main input,
main select,
main textarea,
main button,
main fieldset,
main .vsf-body,
main .vsf-head,
main .agv {
  box-sizing: border-box;
  max-width: 100%;
}

/* ------------------------------------------------------------
   FOTO DO CARD — corrigido em 23/09/2026 (medido em produção).
   Sintoma: a foto de todo imóvel aparecia distorcida e cortada
   quase na metade, em TODA página com card (home, busca,
   lançamentos, financiamento, guia de bairro, landings).
   Causa: a janela `a.floatfix` tem 210px de altura com
   `overflow:hidden`, e `.fotodacasa` do estilo.css declara só
   `width:100%`. Sem `height`, o atributo `height="400"` do <img>
   (que existe para evitar salto de layout) passa a valer como
   altura FIXA: a imagem renderizava 380×400 no lugar de 380×253
   (esticada) e 190px dela ficavam escondidos abaixo da dobra
   do card — sempre o rodapé da foto.
   Correção: a imagem preenche a janela com `object-fit: cover`,
   que mantém a proporção e recorta pelo centro.
   ------------------------------------------------------------ */
.ImoveisIndex .Imovel a.floatfix img.fotodacasa,
.conjunto-casas .Imovel .fotodacasa {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Cards de imóvel: 1 por linha e imagem responsiva ---- */
@media (max-width: 768px) {
  #Destaques .conjunto-casas .conteudo,
  .conjunto-casas .conteudo {
    width: 100% !important;
    float: none !important;
    margin: 0 0 18px !important;
    box-sizing: border-box;
  }
  .conjunto-casas .Imovel.floatfix,
  .conjunto-casas .ImoveisIndex {
    width: 100% !important;
  }
  /* No celular o card ocupa a largura toda: 210px de foto ficam baixos demais
     para a área disponível. A janela cresce com a tela e a foto continua
     preenchendo sem distorcer. */
  .ImoveisIndex .Imovel a.floatfix {
    height: 56vw !important;
    min-height: 190px;
    max-height: 280px;
  }
  .conjunto-casas .Imovel .fotodacasa {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
}

/* ---- Rodapé: colunas empilham de forma limpa ----
   estilo.css não tem media query para o rodapé (colunas são float:left
   com larguras fixas). Empilhamos e, crucialmente, CONTEMOS os floats
   internos (#Left/#Right) para que #Coluna1 não colapse e sobreponha a
   coluna seguinte. */
@media (max-width: 900px) {
  #Rodape #Coluna1,
  #Rodape #Coluna2,
  #Rodape #Coluna3 {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    box-sizing: border-box;
    display: flow-root; /* contém os floats internos */
  }
  /* Institucional: as duas colunas de links lado a lado, sem escapar. */
  #Rodape #Coluna1 #Left,
  #Rodape #Coluna1 #Right {
    float: none !important;
    display: inline-block;
    vertical-align: top;
    width: auto;
    margin-right: 28px;
  }
  #Rodape #Coluna1 #Left ul,
  #Rodape #Coluna1 #Right ul {
    width: auto !important;
  }
  #Assinatura {
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  /* Newsletter não estoura. */
  #Coluna2 form input#emailnews,
  #Linha3 #Rodape #Coluna2 div form input[type="text"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ---- Hero (#topo): garante que a logo/imagem não estourem ---- */
@media (max-width: 480px) {
  #topo .CreciTopo {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ============================================================
   4) Logo da conta — SEM descaracterizar o topo (revisto em 23/09/2026)
   O problema real: `estilo.css` estica a arte (`background-size: 100% 100%`),
   o que distorce a logo de uma conta com outra proporção. A primeira
   tentativa (QA 19/09) resolveu isso colocando a logo dentro de uma CAIXA
   BRANCA com cantos arredondados e sombra, e cortando a altura de 300px
   para 180px — e aí o topo da conta piloto deixou de ser o topo do site dela: a
   marca, que aparecia limpa e grande sobre a foto da praia, virou um
   cartãozinho. Foi a primeira coisa que o Danilo apontou ("o logotipo está
   diferente").
   O que vale agora: a MESMA caixa do desenho original (45.5vh × 27.6vh, até
   494×300) e `contain` em vez de `100% 100%`. Assim a arte da conta, que tem
   justamente essa proporção, sai idêntica à do site antigo, e a logo de
   outra conta cabe inteira sem esticar — apenas sobra espaço em volta, sem
   fundo, sem moldura, sem sombra.
   ============================================================ */
#topo .logoviewport {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* a caixa é a do estilo.css; só garantimos que não passe da tela no celular */
  max-width: min(494px, calc(100vw - 32px));
}
#Linha1 #ConteudoLinha1 h2 a {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
/* Barra fixa do celular: a faixa é vermelha, então a logo branca da conta
   precisa de contraste — mas sem cartão branco. `object-fit: contain` só
   impede o esticamento. */
.menufixo .logotipofixo {
  object-fit: contain;
  max-width: calc(100vw - 120px);
}

/* ------------------------------------------------------------
   Redes sociais do rodapé (23/09/2026)
   O estilo.css só desenhava o sprite do Facebook (12×25px, âncora vazia);
   Instagram e WhatsApp saíam como texto solto e YouTube/LinkedIn não tinham
   lugar. Agora toda rede da conta sai com ícone + rótulo, em coluna.
   ------------------------------------------------------------ */
#Coluna3 ul#RedesSociais.redes-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
#Coluna3 ul#RedesSociais.redes-lista li {
  float: none;
  padding: 0;
  width: auto;
  height: auto;
  background: none;
}
#Coluna3 ul#RedesSociais.redes-lista li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  /* 26px de altura mínima: os links de rede tinham 14–17px, abaixo do alvo de toque do
     WCAG 2.2 — no celular, Instagram, Facebook e WhatsApp ficavam colados. */
  min-height: 26px;
  height: auto;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}
#Coluna3 ul#RedesSociais.redes-lista li a:hover {
  text-decoration: underline;
}
#Coluna3 ul#RedesSociais.redes-lista li a i {
  font-size: 1.05rem;
  width: 18px;
  text-align: center;
}

/* ------------------------------------------------------------
   Alvo de toque e legibilidade do rodapé (23/09/2026)
   Medido no celular: 21 links do rodapé (#Left e #Right) tinham
   18px de altura — abaixo do mínimo de 24px que o WCAG 2.2 pede
   para alvo de toque, e no polegar dois links vizinhos viram um.
   A nota legal saía em 10px, pequena para ler no telefone.
   Só no celular: no desktop o rodapé fica como sempre foi.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  #Rodape #Left ul li a,
  #Rodape #Right ul li a,
  #Rodape #Coluna2 ul li a {
    display: inline-block;
    min-height: 26px;
    line-height: 26px;
  }
  /* Os três IDs repetem o seletor do estilo.css (`#Linha3 #Rodape #NotaDeRodape p`): com
     `#NotaDeRodape p` a regra perde por especificidade e o texto continua em 10px. */
  #Linha3 #Rodape #NotaDeRodape p {
    font-size: 11.5px;
    line-height: 1.5;
  }
}

/* "Área do cliente — acompanhe visitas e propostas" quebrava em 3 linhas de 18px
   dentro de uma caixa de 40px e invadia o horário: texto menor e caixa que cresce. */
#Linha1 #ConteudoLinha1 #MaisOpcoes ul li a#AreaCliente {
  height: auto;
  min-height: 40px;
}
#Linha1 #ConteudoLinha1 #MaisOpcoes ul li a#AreaCliente i {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}

/* ============================================================
   5) TIPOGRAFIA DOS TÍTULOS (23/09/2026) — o "acabamento" que faltava
   O reset.css do legado zera h1…h6 com `font: inherit`. O estilo.css
   devolve peso e tamanho em CADA seletor seu (`h3.descricaoTitulo`:
   18px/700, branco sobre a faixa #575656); as páginas novas do Astro
   nunca devolveram — então dez títulos da home saíam em 16px/400,
   exatamente como texto de corpo, e a ficha do imóvel tinha o H1 em
   32px/400 preto onde o site antigo tem 28px/700 branco sobre faixa
   escura. Era a causa de "parece que o site antigo está melhor": não
   faltava cor nem foto, faltava HIERARQUIA.
   Aqui o padrão volta para tudo que está dentro de `main` — sem tocar
   no chrome do legado, que já tem o seu.
   ============================================================ */
main h1,
main h2,
main h3,
main h4,
main h5 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark, #242424);
}
main h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
main h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
main h3 { font-size: 1.15rem; }
main h4 { font-size: 1rem; }
main h5 { font-size: 0.95rem; }

/* Faixa cinza do legado nos títulos de seção das páginas novas: é a marca
   visual que separa um bloco de imóveis do outro no site de origem. */
main .secao-head h2,
main .home-bairros h2,
main .home-pagamento h2,
main .home-populares h2,
main .home-secao > h2 {
  background: #575656;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  padding: 4px 0;
  text-indent: 10px;
  clear: both;
  margin: 10px 0;
}
/* O link "Ver todos" fica na mesma faixa, à direita, sem herdar o cinza. */
main .secao-head { background: #575656; align-items: center; }
main .secao-head a { color: #fff; padding-right: 12px; text-decoration: underline; }

/* Título sobre fundo escuro/colorido não pode herdar o cinza-escuro do texto. */
main .home-simulador h2,
main .bairro-hero h1,
main .bairro-hero h2,
main [class*="hero"] h1,
main [class*="hero"] h2 { color: #fff; }

/* ============================================================
   6) FORMULÁRIOS SEM ESTILO (23/09/2026) — achado da varredura
   `.lead-form-like` é usada em CINCO páginas, mas o CSS dela só
   existia dentro de `encomende-seu-imovel.astro` — e `<style>` de
   .astro tem ESCOPO. Resultado nas outras quatro (financiamento,
   trabalhe-conosco, pesquisa-de-satisfação e a candidatura da
   vaga): o formulário caía no visual padrão do navegador. O botão
   de "Pedir análise grátis" — o CTA da página de financiamento —
   era um retângulo CINZA de 21px de altura com `border: 2px
   outset`, e os campos tinham fonte de 13,3px, o que faz o iPhone
   dar zoom sozinho ao focar.
   Aqui vai o padrão para todas. Em `/encomende` as regras
   escopadas continuam mais específicas e seguem valendo.
   ============================================================ */
main .lead-form-like {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 1.25rem;
  box-sizing: border-box;
}
main .lead-form-like h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}
main .lead-form-like .grid {
  display: grid;
  gap: 0.6rem;
}
main .lead-form-like input,
main .lead-form-like select,
main .lead-form-like textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font: inherit;
  /* 16px: abaixo disso o iOS dá zoom ao focar o campo. */
  font-size: 16px;
  line-height: 1.3;
  background: #fff;
}
main .lead-form-like input:focus,
main .lead-form-like select:focus,
main .lead-form-like textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
main .lead-form-like button.btn-enviar {
  margin-top: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.75rem;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
main .lead-form-like button.btn-enviar:disabled { opacity: 0.6; cursor: default; }
main .lead-form-like .msg { margin: 0.5rem 0 0; font-size: 0.85rem; }
main .lead-form-like .msg.ok { color: #15803d; }
main .lead-form-like .msg.erro { color: #b91c1c; }
/* O formulário não precisa esticar 1.400px num monitor grande. */
main .lead-form-like { max-width: 560px; }

/* ------------------------------------------------------------
   7) Cortes de 3–4px causados pelo reset (23/09/2026)
   `reset.css` põe `line-height: 1` no body (reset do Meyer), e
   `<img>` nasce `inline` — então caixa com `overflow: hidden`
   corta o acento do "ó", a perna do "p" e a base da foto.
   ------------------------------------------------------------ */
/* Miniatura da galeria: a base da foto sumia (4px). */
#gallery-thumbs .thumb img { display: block; }
/* Migalha: "Apartamento 2 dormitórios no {bairro}" perdia o acento e a perna do "p". */
main .crumbs .container span[aria-current] { line-height: 1.45; }

/* ------------------------------------------------------------
   8) Alvo de toque no CONTEÚDO (WCAG 2.2, 24px) — 23/09/2026
   O bloco 4 já tratou o rodapé; no conteúdo sobraram links de
   12 a 21px de altura, todos pelo mesmo `line-height: 1`.
   Só no celular: no desktop, com mouse, a altura atual está boa.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  main .crumbs a,
  main .crumbs-inline a,
  main .secao-head a,
  main .acao-link,
  main .ver-mapa,
  main .btn-mapa,
  main .info-list a,
  main .bolso-nota a,
  main .sub-dorms a,
  main .home-populares ul li a,
  #Assinatura a,
  #cookie-banner a {
    display: inline-block;
    min-height: 26px;
    line-height: 26px;
  }
}

/* ---- Texto abaixo de 11px (ilegível no celular) ---- */
/* O `#` é necessário: a regra escopada do Astro vale (0,3,1) e empate perde. */
#gallery-thumbs .thumb-mais small { font-size: 0.72rem; }
main .ccr .ccr-badge { font-size: 0.7rem; }
main .niveis .nivel .tag { font-size: 0.7rem; }

/* ============================================================
   CONTA SEM LOGO (25/09/2026): o nome da imobiliária em texto.
   Antes o CSS tinha a logo da conta piloto como fundo padrão e ela aparecia
   no site de toda conta que não cadastrou a própria.
   ============================================================ */
#topo .logoviewport.sem-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: auto; min-height: 120px; padding: 16px;
  color: #fff; font: 700 clamp(28px, 5vw, 48px)/1.1 OpenSans, Arial, sans-serif;
  text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
#Linha1 #ConteudoLinha1 h2 a.sem-logo {
  text-indent: 0; width: auto; height: auto; min-height: 60px; max-width: 365px;
  display: flex; align-items: center;
  color: var(--primary, #1E3A5F); font: 700 26px/1.15 OpenSans, Arial, sans-serif; text-decoration: none;
}
.menufixo .logotipofixo-texto {
  display: inline-block; max-width: 220px; color: #fff; font: 700 17px/40px OpenSans, Arial, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Menu fixo (aparece ao rolar): o legado não tinha submenu, e o menu atual tem. Sem isto os itens
   de .Nivel1 saíam soltos, em azul, por cima da página (caso Chave de Ouro, 23/10). */
.menufixo .MenuTopo .Nivel1 {
  display: none; position: absolute; top: 100%; left: 0; min-width: 230px; margin: 0; padding: 6px 0;
  list-style: none; background: #222; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); z-index: 2;
}
.menufixo .MenuTopo li:hover > .Nivel1,
.menufixo .MenuTopo li:focus-within > .Nivel1 { display: block; }
.menufixo .MenuTopo .Nivel1 li { display: block; }
.menufixo .MenuTopo .Nivel1 a {
  display: block; padding: 9px 16px; color: #fff; text-decoration: none; font-size: 13px;
  text-transform: none; letter-spacing: 0;
}
.menufixo .MenuTopo .Nivel1 a:hover { background: rgba(255, 255, 255, .12); }
@media (min-width: 1006px) { .menufixo.aparecer { overflow: visible; } }
@media (max-width: 1005px) {
  .menufixo .MenuTopo .Nivel1 { display: block; position: static; box-shadow: none; background: transparent; padding: 0 0 6px 16px; }
  .menufixo.aparecer.click { overflow-y: auto; }
}