/* ====================================================================
   LOTEAMENTO BEM TE VI - Folha de estilos principal
   Organização:
   1. Variáveis e reset
   2. Utilitários (container, botões, títulos de seção)
   3. Cabeçalho e navegação
   4. Banner
   5. Seção "Sobre"
   6. Rodapé
   7. Responsividade (mobile)
   ==================================================================== */

/* ===== 1. VARIÁVEIS E RESET ===== */
:root {
  --cor-primaria: #2e7d32;      /* verde principal (logo) */
  --cor-primaria-escura: #1b5e20;
  --verde-escuro: #0f2417;      /* verde quase-preto: barras, faixas, rodapé */
  --verde-escuro-2: #16331f;    /* um tom acima, para gradientes sutis */
  --cor-secundaria: #f9a825;    /* dourado de destaque (bico do bem-te-vi) */
  --cor-secundaria-escura: #c8860a;
  --cor-texto: #2b2f2b;
  --cor-texto-claro: #ffffff;
  --cor-fundo: #ffffff;
  --cor-fundo-suave: #f4f7f4;
  --borda-suave: #e3e8e3;
  --sombra: 0 4px 12px rgba(0, 0, 0, 0.1);
  --sombra-forte: 0 14px 34px rgba(15, 36, 23, 0.16);
  --transicao: 0.3s ease;
  --largura-max: 1140px;
  --fonte-titulo: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  --fonte-corpo: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* rolagem suave ao clicar nos links de âncora */
}

body {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  line-height: 1.6;
}

h1, h2, h3, .logo,
.banner__titulo, .page-hero__titulo, .secao__titulo,
.imovel__titulo, .card__titulo, .passo__titulo, .rodape__titulo {
  font-family: var(--fonte-titulo);
}

/* ===== 2. UTILITÁRIOS ===== */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 20px;
}

.botao {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.botao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

.botao--primario {
  background-color: var(--cor-secundaria);
  color: #ffffff;
}

.botao--secundario {
  background-color: transparent;
  color: var(--cor-texto-claro);
  border: 2px solid var(--cor-texto-claro);
}

.secao__titulo {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  color: var(--verde-escuro);
  margin-bottom: 12px;
}

.secao__subtitulo {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
  color: #555;
}

/* Faixa escura de título de seção — separa grupos de imóveis (ex.: dentro
   de "Casas para Alugar", diferencia "Casas Bem Te Vi" de "Residencial Fênix"). */
.secao__titulo-barra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--verde-escuro);
  color: #fff;
  padding: 16px 26px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.secao__titulo-barra__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.secao__titulo-barra__nota {
  font-size: 0.85rem;
  color: #b9c9bd;
}

.secao__subtitulo-barra {
  text-align: left;
  margin: 14px 0 32px;
  color: #666;
  max-width: none;
}

/* ===== 3. CABEÇALHO E NAVEGAÇÃO ===== */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--cor-fundo);
  box-shadow: var(--sombra);
}

.cabecalho__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--cor-primaria);
}

.logo__icone {
  font-size: 1.8rem;
}

.logo__imagem {
  height: 66px;
  width: auto;
  display: block;
}

.navegacao__lista {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.navegacao__link {
  text-decoration: none;
  color: var(--cor-texto);
  font-weight: 500;
  transition: color var(--transicao);
}

.navegacao__link:hover {
  color: var(--cor-primaria);
}

.navegacao__link--destaque {
  background-color: var(--cor-primaria);
  color: var(--cor-texto-claro);
  padding: 10px 20px;
  border-radius: 50px;
}

.navegacao__link--destaque:hover {
  background-color: var(--cor-primaria-escura);
  color: var(--cor-texto-claro);
}

/* Botão "hambúrguer" (escondido no desktop) */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  width: 26px;
  height: 3px;
  background-color: var(--cor-primaria);
  border-radius: 2px;
  transition: var(--transicao);
}

/* ===== 4. BANNER ===== */
.banner {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  /* ================================================================
     FUNDO DO BANNER — FOTO AÉREA DO LOTEAMENTO
     SUBSTITUIR: salve a foto aérea real em  imagens/banner-aerea.jpg
     A 1ª camada (url) é exibida automaticamente assim que o arquivo
     existir. Enquanto não houver foto, aparece o gradiente verde da
     2ª camada como placeholder (espaço reservado).
     ================================================================ */
  background-image: url('../imagens/banner-aerea.jpg'),
                    linear-gradient(135deg, #2e7d32 0%, #66bb6a 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: var(--cor-texto-claro);
  text-align: center;
}

/* Camada escura semi-transparente sobre a foto, para manter o texto branco
   legível. Usa o verde-escuro da marca em vez de preto puro. */
.banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 36, 23, 0.55) 0%, rgba(15, 36, 23, 0.72) 100%);
}

/* Palavra gigante em contorno, decorativa, atrás do texto do banner —
   reforça a marca sem competir com a leitura do título. */
.banner__marca-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.banner__marca-fundo span {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(6rem, 22vw, 15rem);
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.banner__conteudo {
  position: relative; /* fica acima do overlay */
  z-index: 1;
}

.banner__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 2.8rem;
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.2;
}

.banner__subtitulo {
  font-size: 1.2rem;
  max-width: 650px;
  margin: 0 auto 35px;
}

.banner__acoes {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== 5. SEÇÃO SOBRE ===== */
.sobre {
  padding: 80px 0;
  background-color: var(--cor-fundo-suave);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.card {
  background-color: var(--cor-fundo);
  padding: 32px 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--sombra);
  transition: transform var(--transicao);
  /* coluna flex: permite que o botão (margin-top: auto) fique fixo na base,
     deixando os botões alinhados mesmo com textos de tamanhos diferentes */
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
}

.card__icone {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 16px;
}

.card__titulo {
  color: var(--cor-primaria-escura);
  margin-bottom: 10px;
}

.card__texto {
  color: #555;
}

/* ===== 6. RODAPÉ ===== */
.rodape {
  background-color: var(--verde-escuro);
  color: var(--cor-texto-claro);
  padding-top: 54px;
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.rodape__marca img {
  height: 44px;
  width: auto;
  /* a logo tem fundo claro; um respiro sutil evita que "flutue" no verde-escuro */
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  padding: 4px 8px;
}

.rodape__conteudo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  padding-bottom: 40px;
}

.rodape__titulo {
  margin-bottom: 14px;
  color: var(--cor-secundaria);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rodape__texto {
  color: #c3d2c7;
}

.rodape__texto a {
  color: #c3d2c7;
  transition: color var(--transicao);
}

.rodape__texto a:hover {
  color: var(--cor-secundaria);
}

.rodape__redes {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.rodape__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  transition: background var(--transicao), transform var(--transicao);
}

.rodape__redes a:hover {
  background: var(--cor-secundaria);
  transform: translateY(-3px);
}

.rodape__base {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px;
  text-align: center;
  font-size: 0.9rem;
  color: #93a897;
}

/* ===== 7. RESPONSIVIDADE (MOBILE) ===== */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  /* Menu vira uma coluna escondida que abre com a classe "ativo" */
  .navegacao {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--cor-fundo);
    box-shadow: var(--sombra);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transicao);
  }

  .navegacao.ativo {
    max-height: 300px;
  }

  .navegacao__lista {
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
  }

  .navegacao__lista li {
    width: 100%;
    text-align: center;
  }

  .navegacao__link {
    display: block;
    padding: 14px 0;
  }

  .navegacao__link--destaque {
    margin: 10px 20px;
  }

  .banner__titulo {
    font-size: 2rem;
  }

  .banner__subtitulo {
    font-size: 1.05rem;
  }
}

/* ====================================================================
   ESTILOS ADICIONAIS - PÁGINAS INTERNAS
   8. Menu: muitos itens + link ativo
   9. Cabeçalho das páginas internas (page-hero)
   10. Seções genéricas
   11. Diferenciais (lista)
   12. Cards de lotes / casas
   13. Galeria
   14. Mapa / Legenda
   15. Localização
   16. Formulário de contato
   17. Botão flutuante de WhatsApp
   18. Passo a passo (construção personalizada)
   ==================================================================== */

/* ===== 8. MENU: muitos itens + link ativo ===== */
.navegacao__lista {
  gap: 18px;
  flex-wrap: wrap;
}

.navegacao__link {
  font-size: 0.95rem;
}

.navegacao__link--ativo {
  color: var(--cor-primaria);
  font-weight: 700;
}

/* o item "Contato" é um botão; quando ativo, mantém o texto claro */
.navegacao__link--destaque.navegacao__link--ativo {
  color: var(--cor-texto-claro);
}

/* ===== DROPDOWN "IMÓVEIS" ===== */
.navegacao__item-dropdown {
  position: relative;
}

/* o "gatilho" Imóveis é um <button> estilizado para parecer um link do menu */
.navegacao__dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cor-texto);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  transition: color var(--transicao);
}

.navegacao__dropdown-toggle:hover {
  color: var(--cor-primaria);
}

.navegacao__dropdown-toggle--ativo {
  color: var(--cor-primaria);
  font-weight: 700;
}

.navegacao__seta {
  font-size: 0.7rem;
  transition: transform var(--transicao);
}

.navegacao__submenu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--cor-fundo);
  box-shadow: var(--sombra);
  border-radius: 8px;
  padding: 8px 0;
  /* escondido por padrão */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  z-index: 1100;
}

.navegacao__sublink {
  display: block;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--cor-texto);
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}

.navegacao__sublink:hover {
  background: var(--cor-fundo-suave);
  color: var(--cor-primaria);
}

.navegacao__sublink--ativo {
  color: var(--cor-primaria);
  font-weight: 700;
}

/* Abre o submenu quando o item recebe a classe "aberto" (clique / celular) */
.navegacao__item-dropdown.aberto .navegacao__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navegacao__item-dropdown.aberto .navegacao__seta {
  transform: rotate(180deg);
}

/* No desktop, também abre ao passar o mouse */
@media (min-width: 769px) {
  .navegacao__item-dropdown:hover .navegacao__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .navegacao__item-dropdown:hover .navegacao__seta {
    transform: rotate(180deg);
  }
}

/* ===== 9. PAGE HERO (cabeçalho das páginas internas) ===== */
.page-hero {
  background: linear-gradient(135deg, var(--verde-escuro) 0%, var(--verde-escuro-2) 100%);
  color: var(--cor-texto-claro);
  padding: 60px 0;
  text-align: center;
  border-bottom: 3px solid var(--cor-secundaria);
}

.page-hero__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.page-hero__subtitulo {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  opacity: 0.95;
}

/* ===== 10. SEÇÕES GENÉRICAS ===== */
.secao {
  padding: 70px 0;
}

.secao--suave {
  background-color: var(--cor-fundo-suave);
}

.texto-bloco {
  max-width: 800px;
  margin: 0 auto;
  color: #444;
}

.texto-bloco p {
  margin-bottom: 16px;
}

/* ===== 11. DIFERENCIAIS (lista com check) ===== */
.lista-diferenciais {
  max-width: 800px;
  margin: 0 auto;
  list-style: none;
}

.lista-diferenciais li {
  padding: 14px 0 14px 34px;
  position: relative;
  border-bottom: 1px solid #e3e8e3;
}

.lista-diferenciais li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--cor-primaria);
  font-weight: bold;
}

/* ===== 12. CARDS DE LOTES / CASAS ===== */
.grade-imoveis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

.imovel {
  background: var(--cor-fundo);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--sombra);
  border-top: 4px solid var(--cor-primaria);
  display: flex;
  flex-direction: column;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.imovel:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-forte);
}

/* Selo de status no topo do card, sem precisar editar o HTML de cada imóvel:
   a cor muda sozinha conforme a etiqueta (.tag) que o card já contém. */
.imovel:has(.tag--vendida) { border-top-color: #78909c; }
.imovel:has(.tag--alugada) { border-top-color: #78909c; }
.imovel:has(.tag--fenix) { border-top-color: var(--cor-secundaria); }

/* "Foto" placeholder do imóvel (gradiente) */
.imovel__imagem {
  position: relative;
  overflow: hidden;
  height: 180px;
  background: linear-gradient(135deg, #a5d6a7, #66bb6a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.5rem;
}

/* fotos reais aparecem inteiras (sem corte); o espaço que sobra fica branco,
   igual ao fundo do card, então não aparece faixa colorida */
.imovel__imagem:has(img):not(.imovel__imagem--lote) {
  height: auto;
  aspect-ratio: 4 / 5;
  background: #fff;
}

.imovel__imagem:has(img):not(.imovel__imagem--lote) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* página do imóvel: a foto principal aparece inteira no formato original,
   a caixa se ajusta ao tamanho da foto (sem faixa, sem corte) */
.produto__imagem-principal:has(img) {
  height: auto;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.produto__imagem-principal:has(img) img {
  position: static;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 520px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.imovel__imagem:has(img) {
  height: auto;
  background: none;
}

.imovel__imagem:has(img) img {
  position: static;
  display: block;
  height: auto;
}

/* Card de lote: a imagem é uma arte com dimensões/legenda (não uma
   foto), então usa a proporção real do arquivo (4:3) em vez de altura
   fixa - assim nada do texto da arte fica cortado. */
.imovel__imagem--lote {
  height: auto;
  aspect-ratio: 4 / 3;
}

/* Foto real do imóvel: some sozinha se o arquivo ainda não existir
   (ver onerror="this.remove()" no HTML) e cobre o ícone de placeholder
   assim que a foto for adicionada na pasta (ver onload no HTML). */
.imovel__imagem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.imovel__corpo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.imovel__titulo {
  color: var(--verde-escuro);
  margin-bottom: 8px;
}

/* Card inteiro clicável: a foto e o título levam para a página de
   produto do imóvel (galeria completa, estilo marketplace). */
.imovel__imagem-link {
  display: block;
}

.imovel__titulo a {
  color: inherit;
  text-decoration: none;
}

.imovel__titulo a:hover {
  text-decoration: underline;
}

.imovel__dados {
  list-style: none;
  margin-bottom: 16px;
  color: #555;
}

.imovel__dados li {
  padding: 3px 0;
}

/* texto convidativo dos cards de lote (entre os dados e o botão) */
.imovel__texto {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.imovel__preco {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--cor-primaria);
  margin-bottom: 4px;
}

/* Bloco de valor do lote: rótulo pequeno + preço grande, seguido de uma
   faixa "Entrada / Parcelas" em duas colunas (bem mais fácil de escanear
   do que uma frase corrida tipo "Restante: R$X em 80x de R$Y"). */
.imovel__preco-rotulo {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a988a;
  margin-bottom: 2px;
}

.imovel__preco-bloco .imovel__preco {
  font-size: 1.6rem;
  color: var(--cor-primaria-escura);
  margin-bottom: 14px;
  line-height: 1.15;
}

.imovel__parcelamento {
  display: flex;
  background: #f4f7f4;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.imovel__parcelamento-item {
  flex: 1;
  padding: 10px 8px;
  text-align: center;
}

.imovel__parcelamento-item + .imovel__parcelamento-item {
  border-left: 1px solid #e2e8e2;
}

.imovel__parcelamento-valor {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--verde-escuro);
  white-space: nowrap;
}

.imovel__parcelamento-rotulo {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #7c8c7c;
  margin-top: 3px;
}

.imovel__disclaimer {
  font-size: 0.72rem;
  color: #9aa39a;
  margin: 0 0 14px;
}

/* "/mês" depois do valor do aluguel: mesma linha do preço, mas discreto */
.imovel__preco-sufixo {
  font-size: 0.85rem;
  font-weight: 500;
  color: #8a988a;
  margin-left: 2px;
}

.tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.tag--disponivel {
  background: var(--cor-primaria);
  color: #fff;
}

.tag--aluguel {
  background: var(--verde-escuro);
  color: #fff;
}

.tag--vendida {
  background: #78909c;
  color: #fff;
}

.tag--alugada {
  background: #78909c;
  color: #fff;
}

.tag--fenix {
  background: var(--cor-secundaria);
  color: #3a2a00;
}

.imovel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.imovel__tags .tag {
  margin-bottom: 0;
}

/* Card de imóvel já vendido ou alugado: mostrado como prova social, sem destaque de "disponível" */
.imovel--vendido .imovel__imagem,
.imovel--alugado .imovel__imagem {
  filter: grayscale(35%);
}

/* botão que ocupa a largura do card e gruda no rodapé do card */
.botao--bloco {
  width: 100%;
  text-align: center;
  margin-top: auto;
}

/* agrupa os botões do card de imóvel (ver fotos + falar no whatsapp)
   com espaçamento entre eles, empurrado para o fim do card */
.imovel__acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.imovel__acoes .botao--bloco {
  margin-top: 0;
}

.botao--whatsapp {
  background-color: #25d366;
  color: #fff;
}

.botao--outline {
  background-color: transparent;
  color: var(--cor-primaria);
  border: 2px solid var(--cor-primaria);
  padding: 12px 28px;
}

.botao--outline:hover {
  background-color: var(--cor-primaria);
  color: #fff;
}

/* selo sobre a foto avisando que dá pra clicar para ver mais fotos */
.imovel__imagem-selo {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  background: rgba(15, 36, 23, 0.8);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 20px;
  pointer-events: none;
}

/* ===== 13. GALERIA ===== */
.galeria-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.galeria-item {
  position: relative;
  overflow: hidden;
  height: 200px;
  border-radius: 10px;
  background: linear-gradient(135deg, #c8e6c9, #81c784);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2e7d32;
  font-weight: 500;
  box-shadow: var(--sombra);
  text-align: center;
  padding: 10px;
}

/* Foto real da galeria: mesmo comportamento automático dos imóveis. */
.galeria-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-destaque img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: var(--sombra);
}

/* ===== 14. MAPA / LEGENDA ===== */
.mapa-placeholder {
  position: relative;
  overflow: hidden;
  height: 420px;
  border-radius: 12px;
  border: 2px dashed var(--cor-primaria);
  background: var(--cor-fundo-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #777;
  text-align: center;
  gap: 10px;
  padding: 20px;
}

.mapa-placeholder__icone {
  font-size: 3rem;
}

.mapa-placeholder__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mapa-incorporado {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.mapa-incorporado iframe {
  display: block;
}

/* Mapa real: some sozinho se o arquivo ainda não existir e cobre o
   placeholder (inclusive a borda tracejada) assim que for adicionado. */
.mapa-placeholder img {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: contain;
  background: var(--cor-fundo-suave);
}

.legenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.legenda__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legenda__cor {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
}

/* ===== 15. LOCALIZAÇÃO ===== */
.referencias {
  list-style: none;
  max-width: 600px;
  margin: 30px auto 0;
}

.referencias li {
  padding: 12px 0 12px 30px;
  position: relative;
  border-bottom: 1px solid #e3e8e3;
}

.referencias li::before {
  content: "📍";
  position: absolute;
  left: 0;
}

/* ===== 16. FORMULÁRIO ===== */
.formulario {
  max-width: 640px;
  margin: 0 auto;
}

.campo {
  margin-bottom: 18px;
}

.campo label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccd5cc;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

.campo textarea {
  resize: vertical;
  min-height: 120px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
}

.form-aviso {
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  background: #e8f5e9;
  color: var(--cor-primaria-escura);
  display: none; /* aparece só após o envio */
}

.form-aviso.visivel {
  display: block;
}

/* ===== 17. BOTÃO FLUTUANTE WHATSAPP ===== */
.whatsapp-flutuante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #25d366;
  color: #fff;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 50px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  font-weight: bold;
  transition: transform var(--transicao);
}

.whatsapp-flutuante:hover {
  transform: scale(1.05);
}

.whatsapp-flutuante__icone {
  font-size: 1.3rem;
}

/* Botões flutuantes de Instagram e Facebook, centralizados na lateral
   direita da tela (independentes do botão de WhatsApp, que fica no
   canto inferior direito). */
.redes-flutuantes {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 1400;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.redes-flutuantes__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform var(--transicao);
}

.redes-flutuantes__botao:hover {
  transform: scale(1.08);
}

.redes-flutuantes__botao--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.redes-flutuantes__botao--facebook {
  background-color: #1877f2;
}

@media (max-width: 768px) {
  .redes-flutuantes {
    right: 12px;
    gap: 10px;
  }

  .redes-flutuantes__botao {
    width: 42px;
    height: 42px;
  }
}

/* ===== 18. PASSO A PASSO (CONSTRUÇÃO PERSONALIZADA) ===== */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.passo {
  background: var(--cor-fundo);
  border-radius: 12px;
  padding: 28px 22px;
  box-shadow: var(--sombra);
}

.passo__numero {
  width: 44px;
  height: 44px;
  background: var(--cor-primaria);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 14px;
}

.passo__titulo {
  color: var(--cor-primaria-escura);
  margin-bottom: 8px;
}

.passo__texto {
  color: #555;
}

.centralizado {
  text-align: center;
  margin-top: 40px;
}

/* ===== RESPONSIVIDADE EXTRA (páginas internas) ===== */
@media (max-width: 768px) {
  .navegacao.ativo {
    max-height: 900px; /* cabe o menu, inclusive com o dropdown aberto */
  }

  /* Dropdown "Imóveis" no celular: vira lista expansível por clique */
  .navegacao__dropdown-toggle {
    width: 100%;
    justify-content: center;
    padding: 14px 0;
  }

  .navegacao__submenu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: var(--cor-fundo-suave);
    transform: none;
    opacity: 1;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transicao);
  }

  .navegacao__item-dropdown.aberto .navegacao__submenu {
    visibility: visible;
    max-height: 360px;
  }

  .navegacao__sublink {
    text-align: center;
    padding: 12px 0;
  }

  .whatsapp-flutuante__texto {
    display: none; /* no celular, mostra só o ícone */
  }

  .whatsapp-flutuante {
    padding: 16px;
  }

  .page-hero__titulo {
    font-size: 1.8rem;
  }

  /* Ritmo vertical mais enxuto no celular: as mesmas seções, com menos
     espaço em branco entre elas. */
  .page-hero {
    padding: 40px 0;
  }

  .secao {
    padding: 48px 0;
  }

  .sobre {
    padding: 48px 0;
  }

  .banner {
    min-height: 70vh;
  }

  .container {
    padding: 0 16px;
  }

  .grade-imoveis,
  .cards,
  .galeria-grade {
    gap: 20px;
  }

  .secao__titulo-barra {
    justify-content: center;
    text-align: center;
  }

  /* Rodapé centralizado no celular: fica mais equilibrado que colunas
     alinhadas à esquerda quando empilhadas em largura total. */
  .rodape__conteudo {
    text-align: center;
  }

  .rodape__marca,
  .rodape__redes {
    justify-content: center;
  }
}

/* ===== 19. PÁGINA DE PRODUTO (galeria estilo marketplace) ===== */
.produto__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 44px;
  align-items: start;
}

.produto__galeria {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 20px;
}

.produto__imagem-principal {
  position: relative;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #a5d6a7, #66bb6a);
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3rem;
}

.produto__imagem-principal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.produto__miniaturas {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.produto__miniatura {
  flex: 0 0 84px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  background: #fff;
  opacity: 0.7;
  transition: opacity var(--transicao), border-color var(--transicao);
}

.produto__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.produto__miniatura:hover {
  opacity: 1;
}

.produto__miniatura--ativa {
  border-color: var(--cor-secundaria);
  opacity: 1;
}

.produto__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.produto__info .tag {
  margin-bottom: 0;
}

.produto__titulo {
  font-size: 1.9rem;
  color: var(--verde-escuro);
}

.produto__nota {
  color: #777;
  font-size: 0.95rem;
  margin-top: -10px;
}

.produto__descricao {
  color: #555;
  line-height: 1.6;
}

.produto__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #444;
}

.produto__lista li::before {
  content: "✓ ";
  color: var(--cor-primaria);
  font-weight: bold;
}

.produto__cta {
  margin-top: 8px;
}

.produto__voltar {
  margin-top: 10px;
  display: inline-block;
  color: var(--cor-primaria-escura);
  font-weight: 600;
  text-decoration: none;
}

.produto__voltar:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .produto__grade {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .produto__galeria {
    position: static;
  }

  .produto__imagem-principal {
    height: 280px;
  }

  .produto__titulo {
    font-size: 1.6rem;
  }
}

/* ===== 18. MODAL DE CONTATO (formulário flutuante antes do WhatsApp) ===== */
.modal-contato {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
}

.modal-contato[hidden] {
  display: none;
}

.modal-contato__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* Balão de fala saindo do botão flutuante de WhatsApp (bottom/right: 22px). */
.modal-contato__caixa {
  position: relative;
  background: var(--cor-fundo);
  border-radius: 22px;
  padding: 28px 24px 24px;
  max-width: 340px;
  width: 100%;
  margin: 0 2px 92px 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.modal-contato__caixa::after {
  content: "";
  position: absolute;
  bottom: -14px;
  right: 36px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 4px solid transparent;
  border-top: 18px solid var(--cor-fundo);
  filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.12));
}

.modal-contato__fechar {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--cor-texto);
  padding: 6px;
}

.modal-contato__titulo {
  font-family: var(--fonte-titulo);
  margin-bottom: 6px;
  padding-right: 20px;
}

@media (max-width: 420px) {
  .modal-contato {
    padding: 12px;
  }

  .modal-contato__caixa {
    max-width: none;
    margin: 0 0 84px 0;
  }
}

.modal-contato__subtitulo {
  color: #666;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.modal-contato__formulario .campo:last-of-type {
  margin-bottom: 0;
}