:root{ --bg:#0b1220; --brand:#19b394; --text:#0e1730; --muted:#6b7280; --surface:#f4f7fb }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text) }
.container{ max-width:1100px; margin:0 auto; padding:0 18px }
.topbar{ position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px); background:#ffffffd9; border-bottom:1px solid #eef1f6; z-index:10 }
.topbar .container{ display:flex; align-items:center; gap:18px; padding:12px 18px }
.brand{ font-weight:700; letter-spacing:.3px }
.nav{ display:flex; gap:14px; margin-left:auto }
.nav a{ text-decoration:none; color:#334155; font-weight:500 }
.phone .btn-call{ background:#eefbf7; color:#0d6e63; border:1px solid #bff0e4 }
.hero{ background:linear-gradient(180deg,#f7fbff, #fff); padding:48px 0 }
.hero .lead{ color:#475569; max-width:820px }
.badges{ display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 8px }
.badges span{ background:#fff; border:1px solid #e5e7eb; padding:6px 10px; border-radius:20px; font-size:14px; color:#475569 }
.hero-img{ width:100%; max-height:420px; object-fit:cover; border-radius:14px; border:1px solid #e5e7eb; margin-top:16px }
.btn{ border:1px solid #e5e7eb; background:#fff; color:#0f172a; font-weight:600; box-shadow:0 1px 2px rgba(16,24,40,.04); transition:.2s }
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:var(--brand); color:#fff; border-color:#12a789 }
.btn-wa{ background:#e9f6ff; border-color:#d1e9ff }
.section{ padding:56px 0 }
.section.alt{ background:var(--surface) }
h1{ font-size:36px; margin:0 0 10px }
h2{ font-size:28px; margin:0 0 12px }
h3{ margin:0 0 8px }
.lead{ font-size:18px; line-height:1.65 }
.list{ padding-left:18px }
.list li{ margin:8px 0 }
.grid2{ display:grid; grid-template-columns:1fr; gap:26px }
@media(min-width:900px){ .grid2{ grid-template-columns:1fr 1fr } }
.cards{ display:grid; grid-template-columns:1fr; gap:16px }
@media(min-width:900px){ .cards{ grid-template-columns:repeat(3,1fr) } }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px }
.price{ font-size:20px; font-weight:700; margin:4px 0 8px }
.muted{ color:#6b7280 }
.gallery{ display:grid; grid-template-columns:1fr; gap:12px }
@media(min-width:900px){ .gallery{ grid-template-columns:repeat(3,1fr) } }
.gallery img{ width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid #e5e7eb }
.map{ width:100%; height:280px; border:1px solid #e5e7eb; border-radius:12px }
.footer{ background:#0b1220; color:#c6d0e0; padding:18px 0; }
.footer .small{ font-size:14px; text-align:center }