/* ==========================================================================
   Home e House — CSS mobile-first
   Regras "base" (sem media query) valem para celular.
   Telas maiores ganham ajustes através de @media (min-width: ...).
   Breakpoints usados: 576px (celular grande), 768px (tablet), 992px (desktop)
   ========================================================================== */

:root{
  --hh-dark: #0C1524;
  --hh-dark-2: #1D1D3F;
  --hh-gold: #CDA46A;
  --hh-taupe: #B8A98D;
  --hh-cream: #EDE7DD;
  --hh-gray: #D7D9DC;
  --hh-header-bg: #F3E9D2;
  --hh-footer-bg: #0D1B2A;
  --font-title: 'Playfair Display', serif;
  --font-body: 'Montserrat', sans-serif;
}

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  font-family: var(--font-body);
  color: var(--hh-dark);
  background: #fff;
  margin:0;
  font-size: 15px;
}
@media (min-width: 768px){
  body{ font-size: 16px; }
}

h1,h2,h3,h4,.font-title{
  font-family: var(--font-title);
  color: var(--hh-dark);
}

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

img{ max-width:100%; }

/* ---------- NAVBAR ---------- */
.navbar-hh{
  background: var(--hh-header-bg);
  box-shadow: 0 2px 12px rgba(12,21,36,.08);
  padding: .5rem 0;
}
.navbar-hh .navbar-brand img{ height: 36px; }
@media (min-width: 768px){
  .navbar-hh{ padding: .6rem 0; }
  .navbar-hh .navbar-brand img{ height: 46px; }
}
.navbar-hh .nav-link{
  font-weight:500;
  color: var(--hh-dark);
  padding: .6rem .5rem;
  transition:.2s;
}
.navbar-hh .nav-link:hover{ color: var(--hh-gold); }
.navbar-hh .btn-hh-outline{
  display:block;
  text-align:center;
  margin-top:.5rem;
}
@media (min-width: 992px){
  .navbar-hh .btn-hh-outline{ display:inline-block; margin-top:0; }
}

.btn-hh{
  background: var(--hh-gold);
  border: 1px solid var(--hh-gold);
  color: #fff;
  padding: .65rem 1.4rem;
  border-radius: 6px;
  font-weight:600;
  transition:.2s;
  display:inline-block;
  text-align:center;
}
.btn-hh:hover{ background:#b8935c; color:#fff; }

.btn-hh-outline{
  border: 1px solid var(--hh-gold);
  color: var(--hh-dark);
  padding: .6rem 1.1rem;
  border-radius: 6px;
  font-weight:600;
  transition:.2s;
}
.btn-hh-outline:hover{ background: var(--hh-gold); color:#fff; }

/* ---------- HERO ---------- */
.hero-hh{
  background: linear-gradient(135deg, var(--hh-dark) 0%, var(--hh-dark-2) 100%);
  color:#fff;
  padding: 3rem 0 3.5rem;
}
@media (min-width: 768px){
  .hero-hh{ padding: 6rem 0 5rem; }
}
.hero-hh h1{
  color:#fff;
  font-size: clamp(1.7rem, 6vw, 3.2rem);
  margin-bottom: 1rem;
}
.hero-hh .highlight{ color: var(--hh-gold); }
.hero-hh p.lead{ color: var(--hh-gray); max-width: 560px; font-size: 1rem; }

.search-card{
  background:#fff;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  margin-top: 1.25rem;
  position: relative;
  z-index: 5;
}
@media (min-width: 992px){
  .search-card{
    padding: 1.5rem;
    margin-top: -3.5rem;
    box-shadow: 0 20px 40px rgba(0,0,0,.25);
  }
}
.search-card label{ font-size:.78rem; font-weight:600; color: var(--hh-dark-2); text-transform: uppercase; letter-spacing:.03em;}
.search-card .form-control, .search-card .form-select{
  border: 1px solid var(--hh-gray);
  border-radius: 6px;
  padding: .6rem .8rem;
}

/* ---------- SECTIONS ---------- */
.section{ padding: 3rem 0; }
@media (min-width: 768px){
  .section{ padding: 4.5rem 0; }
}
.section-title{ margin-bottom: .5rem; font-size: 1.6rem; }
@media (min-width: 768px){
  .section-title{ font-size: 2rem; }
}
.section-subtitle{ color:#6b7280; margin-bottom: 1.75rem; }
@media (min-width: 768px){
  .section-subtitle{ margin-bottom: 2.5rem; }
}

.badge-hh{
  display:inline-block;
  background: var(--hh-cream);
  color: var(--hh-dark-2);
  border-radius: 30px;
  padding: .3rem 1rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom: 1rem;
}

/* ---------- CARD IMÓVEL ---------- */
.card-imovel{
  border: 1px solid #eee;
  border-radius: 12px;
  overflow:hidden;
  transition: .25s;
  height:100%;
  background:#fff;
  display:flex;
  flex-direction:column;
}
.card-imovel:hover{ box-shadow: 0 18px 34px rgba(12,21,36,.14); transform: translateY(-4px); }
.card-imovel .img-wrap{ position:relative; height: 200px; overflow:hidden; background: var(--hh-cream); }
@media (min-width: 768px){
  .card-imovel .img-wrap{ height: 220px; }
}
.card-imovel .img-wrap img{ width:100%; height:100%; object-fit:cover; transition:.35s; }
.card-imovel:hover .img-wrap img{ transform: scale(1.06); }
.card-imovel .tag-finalidade{
  position:absolute; top:12px; left:12px;
  background: var(--hh-dark);
  color:#fff; font-size:.7rem; font-weight:600;
  padding:.3rem .7rem; border-radius:20px; text-transform:uppercase;
}
.card-imovel .tag-destaque{
  position:absolute; top:12px; right:12px;
  background: var(--hh-gold);
  color:#fff; font-size:.7rem; font-weight:600;
  padding:.3rem .7rem; border-radius:20px;
}
.card-imovel .body{ padding: 1rem 1.1rem 1.2rem; flex:1; }
@media (min-width: 768px){
  .card-imovel .body{ padding: 1.1rem 1.2rem 1.3rem; }
}
.card-imovel .preco{ font-family: var(--font-title); font-size:1.25rem; color: var(--hh-dark); font-weight:700; }
@media (min-width: 768px){
  .card-imovel .preco{ font-size:1.35rem; }
}
.card-imovel .local{ color:#6b7280; font-size:.85rem; margin-bottom:.5rem; }
.card-imovel .specs{ display:flex; gap:1rem; flex-wrap:wrap; color:#4b5563; font-size:.83rem; border-top:1px solid #f0f0f0; padding-top:.6rem; margin-top:.6rem;}
.card-imovel .specs span{ display:flex; align-items:center; gap:.35rem; }
.card-imovel-footer{ padding: 0 1.1rem 1.1rem; }
.card-imovel-footer .btn-hh{ padding: .5rem 1rem; font-size:.9rem; }

/* ---------- FILTROS ---------- */
.filtro-hh{
  background: var(--hh-cream);
  border-radius: 12px;
  padding: 1.1rem;
}
@media (min-width: 768px){
  .filtro-hh{ padding: 1.5rem; }
}

.filtros-especiais-toggle{
  background:#fff; border:1px solid var(--hh-gray); border-radius:8px;
  padding:.6rem 1rem; font-size:.88rem; font-weight:600; color: var(--hh-dark-2);
  display:inline-flex; align-items:center; gap:.4rem; width:100%; justify-content:center;
}
@media (min-width: 576px){
  .filtros-especiais-toggle{ width:auto; justify-content:flex-start; }
}
.filtros-especiais-toggle i.bi-stars{ color: var(--hh-gold); }
.filtros-especiais-toggle[aria-expanded="true"] .bi-chevron-down{ transform: rotate(180deg); }
.filtros-especiais-toggle .bi-chevron-down{ transition:.2s; }

.filtros-especiais-painel{
  background:#fff; border:1px solid var(--hh-gray); border-radius:10px; padding:1.1rem;
}
.filtro-especial-check{
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--hh-cream); border:1px solid transparent; border-radius:20px;
  padding:.35rem .8rem; font-size:.82rem; cursor:pointer; user-select:none;
  transition:.15s;
}
.filtro-especial-check input{ accent-color: var(--hh-gold); }
.filtro-especial-check:has(input:checked){
  background: #fff; border-color: var(--hh-gold); font-weight:600; color: var(--hh-dark);
}

/* ---------- DETALHE ---------- */
.galeria-principal{ border-radius: 10px; overflow:hidden; height: 240px; background:var(--hh-cream); }
@media (min-width: 576px){
  .galeria-principal{ height: 320px; }
}
@media (min-width: 768px){
  .galeria-principal{ border-radius: 12px; height: 460px; }
}
.galeria-principal img{ width:100%; height:100%; object-fit:cover; }
.galeria-thumbs{ display:flex; gap:.5rem; margin-top:.5rem; flex-wrap: wrap; }
.galeria-thumbs img{ width: 70px; height: 54px; object-fit:cover; border-radius:6px; cursor:pointer; opacity:.75; transition:.2s; }
@media (min-width: 768px){
  .galeria-thumbs img{ width: 90px; height: 68px; }
}
.galeria-thumbs img:hover, .galeria-thumbs img.ativo{ opacity:1; outline: 2px solid var(--hh-gold); }

.info-box{ background: var(--hh-cream); border-radius: 12px; padding: 1.25rem; }
@media (min-width: 768px){
  .info-box{ padding: 1.5rem; }
}
.spec-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 576px){
  .spec-grid{ grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 1rem; }
}
.spec-grid .item{ text-align:center; background:#fff; border-radius:10px; padding: .9rem .5rem; }
.spec-grid .item i{ font-size:1.3rem; color: var(--hh-gold); }

.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid var(--hh-gray);
  border-radius: 20px; padding:.35rem .8rem; font-size:.82rem; margin: 0 .4rem .4rem 0;
}
.chip i{ color: var(--hh-gold); }

/* ---------- SOBRE ---------- */
.valores-hh .item{ text-align:center; padding: 1.1rem; }
@media (min-width: 768px){
  .valores-hh .item{ padding: 1.5rem; }
}
.valores-hh i{ font-size: 2rem; color: var(--hh-gold); margin-bottom: .7rem; display:block; }

/* ---------- CONTATO ---------- */
.contato-hh .form-control, .contato-hh .form-select{
  border: 1px solid var(--hh-gray);
  border-radius: 8px;
  padding: .7rem .9rem;
}
.contato-info{ background: var(--hh-dark); color:#fff; border-radius: 12px; padding: 1.5rem; }
@media (min-width: 768px){
  .contato-info{ padding: 2rem; }
}
.contato-info .item{ display:flex; gap:1rem; align-items:flex-start; margin-bottom: 1.2rem; }
.contato-info i{ color: var(--hh-gold); font-size:1.2rem; }

/* ---------- ALERTS ---------- */
.alert-hh{
  background: var(--hh-cream);
  border-left: 4px solid var(--hh-gold);
  padding: .85rem 1.1rem;
  border-radius: 6px;
  color: var(--hh-dark-2);
  font-size: .92rem;
}

/* ---------- FOOTER ---------- */
.footer-hh{
  background: var(--hh-footer-bg);
  color: var(--hh-gray);
  padding: 2.5rem 0 1.25rem;
  margin-top: 2.5rem;
  text-align: center;
}
@media (min-width: 768px){
  .footer-hh{ padding: 3.5rem 0 1.5rem; margin-top: 3rem; text-align: left; }
}
.footer-hh h6{ color:#fff; text-transform:uppercase; font-size:.8rem; letter-spacing:.05em; margin-bottom:1rem; margin-top: 1.5rem; }
@media (min-width: 768px){
  .footer-hh h6{ margin-top: 0; }
}
.footer-tagline{ color: var(--hh-gray); font-size:.9rem; max-width:280px; margin-left:auto; margin-right:auto; }
@media (min-width: 768px){
  .footer-tagline{ margin-left:0; margin-right:0; }
}
.footer-logo{ height: 40px; }
@media (min-width: 768px){
  .footer-logo{ height: 50px; }
}
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.6rem; font-size:.9rem; }
.footer-links a{ color: var(--hh-gray); transition:.2s; }
.footer-links a:hover{ color: var(--hh-gold); }
.footer-social{ display:flex; justify-content:center; gap:.5rem; }
@media (min-width: 768px){
  .footer-social{ justify-content:flex-start; }
}
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  color:#fff; transition:.2s;
}
.footer-social a:hover{ background: var(--hh-gold); border-color: var(--hh-gold); }
.footer-hh hr{ border-color: rgba(255,255,255,.12); margin: 1.75rem 0 1rem; }
.footer-copy{ font-size:.78rem; color:#8b93a3; text-align:center; margin:0; }

/* ---------- PAGINAÇÃO ---------- */
.pagination{ flex-wrap: wrap; }
.pagination .page-link{ color: var(--hh-dark); border: 1px solid var(--hh-gray); }
.pagination .page-item.active .page-link{ background: var(--hh-gold); border-color: var(--hh-gold); }