/* ===========================================================
   MEU IMÓVEL — ZERO ENTRADA · Sistema visual compartilhado
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  --navy:#103a5e;
  --navy-2:#0a2742;
  --navy-3:#0d3050;
  --blue:#4e93c6;
  --blue-2:#7cb2dc;
  --blue-soft:#e6f0f8;
  --cream:#f5f2ea;
  --cream-2:#ece6d8;
  --paper:#fbf9f4;
  --ink:#16222e;
  --muted:#5d6b78;
  --muted-2:#8a94a0;
  --amber:#f2a23a;
  --amber-2:#e58a1e;
  --green:#1c9f63;
  --green-soft:#e4f4ec;
  --line:rgba(16,58,94,.12);
  --line-2:rgba(16,58,94,.07);
  --shadow-sm:0 1px 3px rgba(10,39,66,.06), 0 1px 2px rgba(10,39,66,.04);
  --shadow:0 18px 40px -20px rgba(10,39,66,.28), 0 6px 16px -10px rgba(10,39,66,.18);
  --shadow-lg:0 40px 80px -32px rgba(10,39,66,.40);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --maxw:1200px;
  --font:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--cream); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3,h4{margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:800}
p{margin:0}
::selection{background:var(--amber); color:#fff}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--blue); border-radius:2px}
.section{padding:96px 0}
.section-head{max-width:680px; margin:0 auto 56px; text-align:center}
.section-head h2{font-size:clamp(30px,4vw,46px); color:var(--navy); margin:14px 0 0}
.section-head p{color:var(--muted); font-size:18px; margin-top:16px}
.lead{font-size:19px; color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:16px; padding:15px 26px; border-radius:999px;
  border:none; transition:transform .18s ease, box-shadow .25s ease, background .2s ease;
  white-space:nowrap;
}
.btn svg{width:19px; height:19px}
.btn-amber{background:var(--amber); color:#3a2300; box-shadow:0 10px 24px -8px rgba(229,138,30,.6)}
.btn-amber:hover{background:var(--amber-2); transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(229,138,30,.7)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-2); transform:translateY(-2px)}
.btn-wpp{background:#25d366; color:#063d1c}
.btn-wpp:hover{background:#1ebe5a; transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(37,211,102,.6)}
.btn-ghost{background:transparent; color:var(--navy); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy); background:#fff}
.btn-lg{font-size:17px; padding:18px 32px}
.btn-block{width:100%}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px;
}
.badge-green{background:var(--green-soft); color:var(--green)}
.badge-blue{background:var(--blue-soft); color:var(--navy)}
.badge-amber{background:#fdefda; color:var(--amber-2)}
.badge-dot::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,242,234,.82); backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:78px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:46px; width:auto}
.nav-links{display:flex; align-items:center; gap:34px}
.nav-links a{font-weight:600; font-size:15.5px; color:var(--ink); opacity:.85; transition:opacity .15s}
.nav-links a:hover{opacity:1; color:var(--navy)}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav-phone{display:flex; align-items:center; gap:9px; font-weight:700; color:var(--navy); font-size:15px}
.menu-toggle{display:none; background:none; border:none; padding:8px}
.menu-toggle svg{width:26px; height:26px; color:var(--navy)}

/* ---------- Placeholder imagery ---------- */
.ph{
  position:relative; overflow:hidden; background:var(--blue-soft);
  background-image:
    linear-gradient(135deg, rgba(16,58,94,.07) 0 25%, transparent 25% 50%, rgba(16,58,94,.07) 50% 75%, transparent 75%);
  background-size:18px 18px;
  display:flex; align-items:center; justify-content:center;
}
.ph::after{
  content:attr(data-label);
  font-family:ui-monospace, 'SF Mono', Menlo, monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy); opacity:.5; font-weight:600;
  border:1.5px dashed rgba(16,58,94,.3); padding:7px 12px; border-radius:8px;
  background:rgba(255,255,255,.4);
}
.ph.hue-b{background-color:#e7eef6}
.ph.hue-c{background-color:#eef2ec}
.ph.hue-d{background-color:#f3eee6}
img.ph{object-fit:cover; width:100%; height:100%; background:none}
img.ph::after{content:none}
.gallery img.ph{width:100%; height:100%}

/* ---------- Property card ---------- */
.card{
  background:var(--paper); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid var(--line-2);
  transition:transform .22s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.card-media{position:relative; aspect-ratio:4/3}
.card-media .ph{position:absolute; inset:0}
.card-tags{position:absolute; left:14px; top:14px; display:flex; gap:8px; flex-wrap:wrap}
.card-fav{
  position:absolute; right:14px; top:14px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center;
  color:var(--navy); box-shadow:var(--shadow-sm);
}
.card-fav svg{width:18px;height:18px}
.card-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1}
.card-price{display:flex; align-items:baseline; gap:10px}
.card-price .val{font-size:25px; font-weight:800; color:var(--navy)}
.card-price .old{font-size:14px; color:var(--muted-2); text-decoration:line-through}
.card-title{font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.card-loc{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:14px}
.card-loc svg{width:15px; height:15px; color:var(--blue)}
.card-specs{
  display:flex; gap:18px; padding-top:14px; margin-top:auto;
  border-top:1px solid var(--line-2); color:var(--muted); font-size:14px; font-weight:600;
}
.card-specs span{display:flex; align-items:center; gap:6px}
.card-specs svg{width:16px; height:16px; color:var(--blue); opacity:.85}
.card-zero{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
  color:var(--green); background:var(--green-soft); padding:9px 13px; border-radius:10px;
}
.card-zero svg{width:16px;height:16px}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-2); color:#cdd8e4; padding:72px 0 32px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px}
.site-footer img.flogo{height:54px; margin-bottom:18px}
.site-footer h4{color:#fff; font-size:15px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px; font-weight:700}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.site-footer a{opacity:.82; font-size:15px; transition:opacity .15s}
.site-footer a:hover{opacity:1; color:#fff}
.foot-contact a{display:inline-flex; align-items:center; gap:10px}
.foot-contact svg{width:18px; height:18px; flex-shrink:0; opacity:.9}
.footer-bottom{
  margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  font-size:13.5px; opacity:.7; flex-wrap:wrap;
}
.foot-social{display:flex; gap:12px}
.foot-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.foot-social svg{width:19px;height:19px;color:#fff}

/* ---------- WhatsApp float ---------- */
.wpp-float{
  position:fixed; right:24px; bottom:24px; z-index:60;
  display:flex; align-items:center; gap:12px; background:#25d366; color:#fff;
  padding:14px 20px 14px 16px; border-radius:999px; font-weight:700; font-size:15.5px;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7); transition:transform .2s;
}
.wpp-float:hover{transform:translatey(-3px) scale(1.02)}
.wpp-float svg{width:26px; height:26px}
.wpp-float .pulse{position:relative}
.wpp-float .pulse::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6); animation:pulse 2s infinite;
}
@keyframes pulse{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ---------- Mobile drawer ---------- */
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:min(82vw,340px); z-index:80;
  background:var(--paper); box-shadow:-20px 0 60px -20px rgba(10,39,66,.4);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  padding:28px 26px; display:flex; flex-direction:column; gap:6px;
}
.mobile-drawer.open{transform:none}
.mobile-drawer .md-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.mobile-drawer .md-top img{height:40px}
.mobile-drawer .md-close{background:none;border:none;color:var(--navy)}
.mobile-drawer .md-close svg{width:26px;height:26px}
.mobile-drawer a{padding:14px 6px; font-size:17px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-2)}
.mobile-drawer .btn{margin-top:20px}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .section{padding:64px 0}
  .nav-links, .nav-phone{display:none}
  .menu-toggle{display:block}
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px}
  .wpp-float span{display:none}
  .wpp-float{padding:14px; border-radius:50%}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .footer-grid{grid-template-columns:1fr}
}