/* ============================================================
   ESTILOS DA PÁGINA INICIAL (index.html)
   ============================================================ */

/* ---------------- Hero ---------------- */
.hero { padding: 48px 0 0; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr 0.95fr; gap: 50px; align-items: center; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cor-destaque-suave); padding: 7px 16px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--cor-destaque); margin-bottom: 22px;
}
.hero-tag .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--cor-destaque); }

.hero h1 { font-size: 2.7rem; line-height: 1.18; margin-bottom: 20px; color: var(--cor-primaria); }
.hero h1 .destaque-texto { color: var(--cor-destaque); }
.hero-desc { color: var(--cor-texto-suave); max-width: 480px; margin-bottom: 28px; font-size: 1.02rem; }

.hero-features { display: flex; flex-direction: column; gap: 16px; }
.hero-features li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--cor-primaria); font-size: 1rem; }
.hero-features .icone { display: flex; align-items: center; justify-content: center; color: var(--cor-destaque); flex-shrink: 0; }

/* Ilustração da fachada da loja, à direita do hero */
.hero-image { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-image::before {
  content: ""; position: absolute; inset: -6%;
  background:
    radial-gradient(circle at 25% 20%, rgba(244,168,16,0.16), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(47,111,237,0.10), transparent 55%);
  z-index: 0; border-radius: 50%; filter: blur(6px);
}
.hero-image img { position: relative; z-index: 1; width: 100%; max-width: 480px; }

/* ---------------- Caixa de busca ---------------- */
.busca-box { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); margin-top: 44px; padding: 28px 30px; }
.busca-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--cor-borda); margin-bottom: 24px; }
.busca-tab { padding-bottom: 14px; font-weight: 700; color: var(--cor-texto-suave); background: none; border: none; cursor: pointer; border-bottom: 2.5px solid transparent; font-size: 0.95rem; }
.busca-tab.ativo { color: var(--cor-destaque); border-color: var(--cor-destaque); }
.busca-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 16px; align-items: end; }
.busca-grid label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: var(--cor-texto-suave); text-transform: uppercase; display: block; margin-bottom: 6px; }
.busca-grid .campo { margin-bottom: 0; }
.busca-grid select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno);
  font-family: inherit; font-size: 0.92rem; background: #fffdf8; color: var(--cor-texto); appearance: auto;
}
.busca-grid select:focus { outline: 2px solid var(--cor-destaque); }
.input-com-icone { position: relative; display: flex; align-items: center; }
.input-com-icone svg { position: absolute; left: 13px; pointer-events: none; }
.input-com-icone select { padding-left: 36px; }
.busca-grid button[type="submit"] { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
@media (max-width: 900px) { .busca-grid { grid-template-columns: 1fr 1fr; } }

/* Grade de filtros da página de listagem (imoveis.html): tem um campo
   a mais (Faixa de preço) além dos da home, então usa colunas próprias. */
.busca-grid-listagem { grid-template-columns: repeat(5, 1fr) auto; }
@media (max-width: 1100px) { .busca-grid-listagem { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .busca-grid-listagem { grid-template-columns: 1fr 1fr; } }

/* ---------------- Mapa + CTA "Chama o Meneses" ---------------- */
.mapa-cta-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; margin: 48px 0; align-items: stretch; }

.mapa-preview { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; }
.mapa-preview-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mapa-preview-topo h3 { font-size: 1.05rem; }
.contagem-pill { background: #eef2ff; color: var(--cor-primaria); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
#mapa-home { position: relative; z-index: 0; height: 260px; border-radius: var(--raio-pequeno); overflow: hidden; background: #eee; }

/* Popup de prévia ao clicar em um pin do mapa */
.popup-imovel-wrapper .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--raio-pequeno); overflow: hidden; }
.popup-imovel-wrapper .leaflet-popup-content { margin: 0 !important; width: 200px !important; }
.popup-imovel { display: block; text-decoration: none; color: inherit; }
.popup-imovel-img { height: 100px; background-size: cover; background-position: center; background-color: #f3ead6; }
.popup-imovel-icone { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #c7bda3; background: linear-gradient(135deg,#f3ead6,#e8f0fb); }
.popup-imovel-corpo { padding: 10px 12px; }
.popup-badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 0.65rem; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 6px; }
.popup-badge.badge-venda { background: var(--cor-venda); }
.popup-badge.badge-aluguel { background: var(--cor-aluguel); }
.popup-imovel-corpo strong { display: block; font-size: 0.95rem; color: var(--cor-primaria); }
.popup-imovel-titulo { font-size: 0.82rem; font-weight: 600; margin-top: 2px; }
.popup-imovel-local { font-size: 0.75rem; color: var(--cor-texto-suave); margin-top: 2px; }
.popup-imovel-ver { font-size: 0.75rem; font-weight: 700; color: var(--cor-destaque); margin-top: 6px; }

/* Caixa de destaque "Quer alugar? Quer comprar?" */
.cta-box {
  background: linear-gradient(150deg, var(--cor-destaque-suave), #fdf6ea);
  border-radius: var(--raio); padding: 36px 32px; display: flex; flex-direction: column; justify-content: center;
}
.cta-box h2 { font-size: 1.55rem; line-height: 1.3; }
.cta-box h2 .destaque-texto { color: var(--cor-destaque); display: block; margin-top: 4px; }
.cta-box p { color: var(--cor-texto-suave); margin-top: 12px; }
.cta-linha { display: block; width: 46px; height: 4px; border-radius: 4px; background: var(--cor-destaque); margin-top: 20px; }

@media (max-width: 900px) {
  .mapa-cta-grid { grid-template-columns: 1fr; }
}

/* ---------------- Imóveis em destaque ---------------- */
.destaques-topo { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.destaques-topo p { color: var(--cor-texto-suave); margin-top: 4px; }
.link-ver-todos { font-weight: 700; color: var(--cor-primaria); white-space: nowrap; }
.link-ver-todos:hover { color: var(--cor-destaque); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-image { order: -1; }
  .hero-image img { max-width: 340px; }
}