/* ==========================================================================
   ROCHA IMOBILIÁRIA — AJUSTES EXTRAS DA PÁGINA INICIAL E DO CATÁLOGO
   Complementa o site.css só com o que as telas "home" e "imóveis" precisam.
   ========================================================================== */

/* Abas "À venda / Para alugar": botões em pílula com a cor de marca no ativo. */
.home-tabs { gap: .4rem; background: var(--stone-100); padding: 4px; border-radius: var(--radius-sm); flex-wrap: nowrap; }
.home-tabs .nav-link { color: var(--ink); font-weight: 650; border-radius: 4px; padding: .45rem 1.1rem; }
.home-tabs .nav-link:hover { color: var(--brand); }
.home-tabs .nav-link.active { background: var(--brand); color: #fff; }

/* Texto do "Sobre" sobre fundo escuro. */
.about-text { color: #d5dfdc; font-size: 1.05rem; max-width: 60ch; }

/* Lista de contatos ao lado do formulário: ícone em quadrado + rótulo + valor. */
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; }
.contact-list i {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand); border-radius: var(--radius-sm); font-size: 1.2rem;
}
.contact-list span { display: block; font-size: .85rem; color: var(--stone-500); }

/* Botão de destaque (latão) usado no hero. */
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--brand-dark); font-weight: 650; }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* Catálogo: botão que abre os filtros no celular e blocos recolhíveis de filtros. */
.filter-details summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.filter-details summary::-webkit-details-marker { display: none; }
.filter-details summary::after { content: "\F282"; font-family: "bootstrap-icons"; transition: transform .2s; }
.filter-details[open] summary::after { transform: rotate(180deg); }
.amenity-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; }
@media (min-width: 992px) { .amenity-checks--aside { grid-template-columns: 1fr; } }