/* ===========================
   SEUIMOV - STYLE.CSS
   Hero branco · logo laranja/preto/roxo
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Open+Sans:wght@400;500;600&display=swap');

:root {
  --laranja:      #E8600A;
  --laranja-hover:#cc5208;
  --laranja-light:#fff3ec;
  --azul:         #2a7fc1;
  --azul-hover:   #1f6aa3;
  --azul-light:   #e8f3fb;
  --branco:       #ffffff;
  --cinza-bg:     #f5f6f8;
  --cinza-borda:  #e0e3e8;
  --cinza-texto:  #666;
  --texto:        #222;
  --sombra:       0 2px 10px rgba(0,0,0,.08);
  --sombra-card:  0 2px 12px rgba(0,0,0,.10);
  --radius:       6px;
  --radius-lg:    10px;
  --t:            .18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', sans-serif;
  background: var(--cinza-bg);
  color: var(--texto);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a  { text-decoration: none; color: inherit; }
ul { list-style: none; }

img {
  max-width: 100%; height: auto; display: block;
  background: var(--cinza-bg);
  transition: opacity var(--t);
}
img:not([src]) { opacity: 0; }

/* ── HEADER ─────────────────────────────────────── */
header {
  background: var(--branco);
  border-bottom: 3px solid var(--laranja);
  box-shadow: var(--sombra);
  position: sticky; top: 0; z-index: 100;
  will-change: transform;
}

.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  height: 76px; display: flex; align-items: center; justify-content: space-between;
}

/* Logo imagem */
.logo { display: flex; align-items: center; gap: 0; }
.logo img { height: 62px; width: auto; display: block; background: transparent; }

/* Logo texto fallback (caso sem imagem) */
.logo-text {
  font-family: 'Nunito', sans-serif;
  font-size: 26px; font-weight: 800;
  color: var(--laranja); letter-spacing: -.5px;
}
.logo-text span { color: var(--azul); }

.header-contato {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--cinza-texto);
}
.header-contato strong { color: var(--texto); }
.header-contato a { color: var(--laranja); font-weight: 700; font-size: 15px; }
.header-contato .sep { color: var(--cinza-borda); margin: 0 6px; }

.btn-admin {
  background: var(--azul); color: var(--branco);
  padding: 7px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600;
  transition: background var(--t);
}
.btn-admin:hover { background: var(--azul-hover); }

/* ── HERO / BUSCA — FUNDO BRANCO ─────────────────── */
.hero {
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  padding: 32px 20px 36px;
}

.hero-title {
  text-align: center;
  color: var(--texto);
  font-family: 'Nunito', sans-serif;
  font-size: 22px; font-weight: 800;
  margin-bottom: 24px; letter-spacing: .2px;
}
.hero-title span { color: var(--laranja); }

/* Abas modalidade */
.modalidade-tabs {
  display: flex; justify-content: center;
  max-width: 900px; margin: 0 auto;
}

.tab-btn {
  background: var(--cinza-bg);
  color: var(--cinza-texto);
  border: 1.5px solid var(--cinza-borda);
  border-bottom: none;
  padding: 10px 30px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  letter-spacing: .3px;
}
.tab-btn:first-child { border-radius: var(--radius) 0 0 0; }
.tab-btn:last-child  { border-radius: 0 var(--radius) 0 0; }
.tab-btn.ativo {
  background: var(--laranja); color: var(--branco);
  border-color: var(--laranja);
}
.tab-btn:hover:not(.ativo) {
  background: var(--laranja-light);
  color: var(--laranja);
  border-color: var(--laranja);
}

/* Caixa busca */
.busca-box {
  background: var(--branco);
  border: 1.5px solid var(--cinza-borda);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: 24px;
  max-width: 900px; margin: 0 auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.07);
}

.busca-grid       { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.busca-grupo      { display: flex; flex-direction: column; gap: 5px; }
.busca-grupo label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--cinza-texto);
}

.busca-grupo select,
.busca-grupo input {
  border: 1.5px solid var(--cinza-borda);
  border-radius: var(--radius);
  padding: 9px 12px; font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  color: var(--texto); background: var(--branco);
  transition: border-color var(--t); width: 100%;
}
.busca-grupo select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
.busca-grupo select:focus,
.busca-grupo input:focus { outline: none; border-color: var(--laranja); }

/* Checkboxes */
.busca-caracteristicas {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--cinza-borda);
}
.busca-caracteristicas label.titulo-sec {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--cinza-texto);
  display: block; margin-bottom: 10px;
}
.checkboxes-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.check-item      { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; user-select: none; }
.check-item input { width: 15px; height: 15px; accent-color: var(--laranja); cursor: pointer; }

/* Linha valor/área */
.busca-linha-extra {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-top: 14px;
}

/* Botão buscar */
.busca-footer { margin-top: 18px; display: flex; justify-content: flex-end; }
.btn-buscar {
  background: var(--laranja); color: var(--branco);
  border: none; padding: 12px 40px; border-radius: var(--radius);
  font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800;
  cursor: pointer; transition: background var(--t); letter-spacing: .3px;
}
.btn-buscar:hover { background: var(--laranja-hover); }

/* ── CONTAINER PRINCIPAL ─────────────────────────── */
.main-container { max-width: 1200px; margin: 30px auto; padding: 0 20px; }

.resultados-barra {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.resultados-barra h2 { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 700; }
.resultados-barra span { font-size: 13px; color: var(--cinza-texto); }

.ordenar-select {
  border: 1.5px solid var(--cinza-borda); border-radius: var(--radius);
  padding: 7px 12px; font-size: 13px; font-family: 'Open Sans', sans-serif;
  color: var(--texto); background: var(--branco); cursor: pointer;
}

/* ── GRID DE IMÓVEIS ─────────────────────────────── */
.imoveis-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

/* ── CARD ────────────────────────────────────────── */
.card-imovel {
  background: var(--branco);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-card);
  overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  will-change: transform;
  transition: transform var(--t), box-shadow var(--t);
  contain: layout style;
}
.card-imovel:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.13);
}
.card-imovel:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

.card-foto {
  position: relative; height: 180px;
  background: var(--cinza-bg); overflow: hidden; flex-shrink: 0;
}
.card-img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .3s ease; will-change: opacity;
}
.card-img.loaded,
.card-img[src]:not([src=""]) { opacity: 1; }

.card-foto-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; color: #bbb; font-size: 12px;
}
.card-foto-placeholder svg { opacity: .4; }

.badge-modalidade {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.badge-venda   { background: var(--laranja);  color: #fff; }
.badge-locacao { background: var(--azul);     color: #fff; }
.badge-compra  { background: #27a06b;         color: #fff; }

.badge-destaque {
  position: absolute; top: 10px; right: 10px;
  background: #f0c040; color: #7a5500;
  padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
}

.card-info { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }

.card-tipo {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--laranja); margin-bottom: 4px;
}
.card-titulo {
  font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--texto); line-height: 1.3; margin-bottom: 6px;
}
.card-localizacao {
  font-size: 12px; color: var(--cinza-texto);
  margin-bottom: 10px; display: flex; align-items: center; gap: 4px;
}
.card-detalhes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.detalhe-item  { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--cinza-texto); }
.detalhe-item svg { flex-shrink: 0; color: var(--laranja); }

.card-preco { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 800; color: var(--laranja); margin-top: auto; }
.card-preco .preco-label { font-size: 11px; font-weight: 600; color: var(--cinza-texto); display: block; margin-bottom: 2px; }

/* ── SEM RESULTADOS ──────────────────────────────── */
.sem-resultados { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--cinza-texto); }
.sem-resultados svg { margin-bottom: 16px; opacity: .3; }
.sem-resultados h3  { font-family: 'Nunito', sans-serif; font-size: 18px; margin-bottom: 8px; color: var(--texto); }

/* ── FOOTER ──────────────────────────────────────── */
footer {
  background: #1a1a1a; color: #aaa;
  text-align: center; padding: 28px 20px;
  margin-top: 50px; font-size: 13px;
}
footer strong { color: var(--branco); }
footer a      { color: var(--laranja); }

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) {
  .busca-grid        { grid-template-columns: repeat(2,1fr); }
  .busca-linha-extra { grid-template-columns: repeat(2,1fr); }
  .imoveis-grid      { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 600px) {
  .header-inner { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .header-contato .sep { display: none; }
  .busca-grid        { grid-template-columns: 1fr; }
  .busca-linha-extra { grid-template-columns: 1fr 1fr; }
  .imoveis-grid      { grid-template-columns: 1fr; }
  .modalidade-tabs   { width: 100%; }
  .tab-btn           { flex: 1; padding: 10px 8px; font-size: 12px; }
  .hero              { padding: 20px 12px 24px; }
  .busca-box         { padding: 16px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .logo img          { height: 50px; }
}