:root{
  --primary:#2563eb; --alt:#f6f7fb; --ink:#0b1220; --text:#1b2430; --muted:#64748b;
  --radius:18px; --shadow:0 6px 24px rgba(13,27,42,.08);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter; color:var(--text); background:#fff; line-height:1.6}
a{color:var(--primary);text-decoration:none} .container{max-width:1060px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e8edf4;z-index:20}
.nav{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink)}
.brand img{border-radius:8px}
.menu{display:flex;gap:16px;margin-left:auto}
.hamburger{display:none;margin-left:8px;padding:8px 10px;border:1px solid #e5e9f1;border-radius:10px;background:#fff}
.btn{display:inline-block;padding:11px 16px;border-radius:12px;border:1px solid #cfd8e6;background:#fff;font-weight:700}
.btn:hover{box-shadow:var(--shadow)} .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-outline{background:#fff;border-color:#cbd5e1;color:#0b1b2a} .btn-row{display:flex;gap:12px;margin:18px 0 10px}
.cta{margin-left:8px}
.hero{padding:48px 0 16px;background:linear-gradient(180deg,#f7fbff 0%, #fff 50%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.badge{display:inline-block;background:#eaf2ff;color:#194aeb;border:1px solid #d7e6ff;border-radius:14px;padding:6px 10px;font-weight:800;margin-bottom:8px}
.hero h1{font-size:34px;line-height:1.16;margin:0 0 10px}
.lede{color:#334155}
.hero-figure img{width:100%;border-radius:20px;box-shadow:var(--shadow)} .hero-figure figcaption{font-size:12px;color:#64748b;margin-top:6px}
.section{padding:56px 0} .section.alt{background:var(--alt)} .section h2{font-size:28px;margin:0 0 18px}
.cards{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid #e7edf6;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card .price{font-size:20px;font-weight:800;margin:6px 0 10px}
.card .rec{font-size:12px;font-weight:800;color:#fff;background:#10b981;padding:4px 8px;border-radius:999px;display:inline-block;margin-bottom:6px}
.card.recommended{border-color:#9ae6b4}
.list{margin:8px 0 12px;padding-left:18px} .muted{color:#64748b}
.contact{background:#0f172a;color:#e2e8f0} .contact .btn{border-color:#40506a;background:#111827;color:#e5e7eb}
.btn-whatsapp{background:#22c55e;color:#fff;border-color:#22c55e}
.site-footer{border-top:1px solid #e8edf4;padding:18px 0;background:#fff}
.foot{display:flex;justify-content:space-between;gap:16px;align-items:center} .small{font-size:12px;color:#94a3b8}
@media (max-width: 900px){ .menu{display:none} .hamburger{display:inline-block} .cta{display:none}
  .hero-grid{grid-template-columns:1fr} .grid-2,.grid-3{grid-template-columns:1fr} }