/* Paleta oficial: Livira/LIVIRA_Brief_Programacao_e_Marca_v1.docx §5.1 */
:root {
  --green: #0F3A37;        /* Verde Urbano - marca, navegacao, fundos institucionais */
  --green-deep: #092D2B;
  --gold: #C9A66B;          /* Dourado Suave - destaques, CTA, simbolo (NUNCA texto claro em cima) */
  --gold-dark: #B08F57;
  --sand: #E9E3D5;          /* Areia - fundos secundarios/editoriais */
  --paper: #F8F7F4;         /* Off White - fundo principal */
  --paper-raised: #FFFFFF;
  --horizon: #8BA9B0;       /* Azul Horizonte - apoio, graficos, estados secundarios */
  --ink: var(--green);
  --ink-soft: #52645F;
  --line: #E4E1D8;
  --whatsapp: #25D366;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
h1, .editorial { font-family: "Lora", Georgia, serif; }
a { color: inherit; text-decoration: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- header ---------- */
/* Briefing §7.1: "header limpo" - branco, nao verde solido (o verde e pra fundos
   institucionais/hero, nao pra chrome de navegacao do dia a dia). */
.topbar { background: var(--paper-raised); color: var(--green); border-bottom: 1px solid var(--line); }
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 24px;
}
.logo { display: flex; align-items: center; }
.logo img { height: 26px; } /* logo mestre ja e verde+dourado sobre branco - sem filtro */
.tabs { display: flex; gap: 16px; }
.tabs a { font-weight: 600; color: var(--green); opacity: 0.85; }
.tabs a:hover { opacity: 1; text-decoration: underline; }
.tabs .disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.icon { width: 1em; height: 1em; vertical-align: -0.15em; }
.search-form { flex: 1; display: flex; max-width: 480px; }
.search-form input {
  flex: 1; border: 1px solid var(--line); border-right: none; border-radius: 6px 0 0 6px; padding: 9px 12px; font-size: 14px;
}
.search-form button {
  border: none; background: var(--gold); color: var(--green); padding: 9px 16px;
  border-radius: 0 6px 6px 0; font-weight: 600; cursor: pointer;
}
.search-form button:hover { background: var(--gold-dark); }
.topbar-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.topbar-actions a.disabled { color: var(--ink-soft); opacity: 0.55; cursor: default; pointer-events: none; }
.topbar-actions a.link { color: var(--green); font-weight: 600; }
.btn-outline {
  border: 1px solid var(--green); color: var(--green); padding: 6px 14px; border-radius: 6px; font-weight: 600;
}

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  color: white; padding: 96px 20px;
}
.hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.eyebrow { letter-spacing: 3px; font-size: 12px; text-transform: uppercase; opacity: 0.75; margin: 0 0 10px; }
.hero h1 { font-size: 40px; margin: 0 0 28px; text-wrap: balance; }
.hero-links a.disabled { opacity: 0.55; cursor: default; pointer-events: none; }

/* ---------- trust blocks (home) ---------- */
.features {
  max-width: 1100px; margin: 0 auto; padding: 48px 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center;
}
.f-icon { width: 40px; height: 40px; margin-bottom: 10px; }
.f h3 { font-size: 15px; margin: 0 0 4px; }
.f p { font-size: 13px; color: var(--ink-soft); margin: 0; }
@media (max-width: 700px) { .features { grid-template-columns: 1fr 1fr; } }
.hero-search { display: flex; gap: 0; margin-bottom: 16px; }
.hero-search input {
  flex: 1; border: none; padding: 14px 16px; font-size: 16px; border-radius: 8px 0 0 8px;
}
.hero-search button {
  border: none; background: var(--gold); color: var(--green); padding: 0 24px;
  border-radius: 0 8px 8px 0; font-weight: 700; cursor: pointer; font-size: 16px;
}
.hero-links { display: flex; gap: 20px; justify-content: center; font-weight: 600; }
.hero-links a { padding: 6px 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 20px; }

/* ---------- search layout ---------- */
.search-layout {
  display: grid;
  grid-template-columns: 220px 1fr 380px;
  gap: 0;
  height: calc(100vh - 60px);
}
.filters { padding: 16px; border-right: 1px solid var(--line); overflow-y: auto; background: var(--paper-raised); }
.filters label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; }
.filters select, .filters input { width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.map { height: 100%; }
#results { overflow-y: auto; border-left: 1px solid var(--line); background: var(--paper-raised); padding: 12px; }
.results-count { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.cards { display: flex; flex-direction: column; gap: 14px; }
.card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper-raised); display: block; }
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.card-photo { height: 140px; background-size: cover; background-position: center; background-color: var(--line); position: relative; }
.badge {
  display: inline-block; background: var(--gold); color: var(--ink);
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
}
.card-photo .badge { position: absolute; top: 8px; left: 8px; }
.card-body { padding: 10px 12px; }
.card-price { font-weight: 700; font-size: 16px; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.card-specs { font-size: 13px; color: var(--ink-soft); margin: 2px 0; }
.card-address { font-size: 13px; color: var(--ink-soft); }
.empty { color: var(--ink-soft); padding: 20px; text-align: center; }

/* ---------- listing detail ---------- */
.breadcrumbs { max-width: 1100px; margin: 16px auto 0; padding: 0 20px; font-size: 13px; color: var(--ink-soft); }
.listing-detail { max-width: 1100px; margin: 0 auto; padding: 16px 20px 60px; display: grid; grid-template-columns: 1fr 340px; gap: 32px; }
.gallery { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; border-radius: 10px; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; max-height: 420px; }
.listing-main { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 340px; gap: 32px; margin-top: 20px; }
.listing-detail h1 { font-size: 26px; margin: 0 0 6px; }
address { font-style: normal; color: var(--ink-soft); margin-bottom: 16px; }
.price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.price { font-size: 28px; font-weight: 700; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.specs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.description { line-height: 1.6; }
.contact-box { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--paper-raised); align-self: start; }
.contact-box h2 { font-size: 16px; margin: 0 0 12px; }
.btn-whatsapp {
  display: block; text-align: center; background: var(--whatsapp); color: white;
  padding: 12px; border-radius: 8px; font-weight: 700; margin-bottom: 16px;
}
.inquiry-form { display: flex; flex-direction: column; gap: 8px; }
.inquiry-form input, .inquiry-form textarea {
  padding: 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
}
.inquiry-form button {
  background: var(--gold); color: var(--green); border: none; padding: 11px; border-radius: 6px;
  font-weight: 700; cursor: pointer;
}
.inquiry-form button:hover { background: var(--gold-dark); }
.inquiry-sent { background: #E7F6E9; border: 1px solid #B8E6C0; padding: 16px; border-radius: 8px; color: #1E5B2C; }

@media (max-width: 900px) {
  .search-layout { grid-template-columns: 1fr; height: auto; }
  .filters { border-right: none; border-bottom: 1px solid var(--line); }
  .map { height: 320px; }
  .listing-detail, .listing-main { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
}