
:root{
  --brand:#1DAC4A;
  --brand-2:#128C7E;
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --danger:#ef4444;
  --ok:#16a34a;
  --radius:16px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, Noto Sans, "Helvetica Neue", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
.container{width:min(1120px, 92vw); margin-inline:auto}
.grid{display:grid; gap:24px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:14px 20px; border-radius:14px; border:0;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff; font-weight:700; font-size:16px; text-decoration:none;
  box-shadow: var(--shadow); transition: transform .08s ease, filter .1s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0); filter:saturate(1.1)}
.btn-outline{
  background:#fff; color:var(--brand-2);
  border:2px solid var(--brand-2);
}
.badge{display:inline-flex; gap:8px; align-items:center; font-size:12px; padding:6px 10px;
  background:var(--bg-soft); border-radius:999px; color:var(--muted)
}
.kpis{display:flex; flex-wrap:wrap; gap:16px}
.kpi{background:var(--bg-soft); border-radius:14px; padding:14px 16px; flex:1; min-width:180px}
.kpi b{font-size:20px}
.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.section{padding:60px 0}
.section.light{background:var(--bg-soft)}
.h1{font-size: clamp(30px, 4vw, 44px); line-height:1.1; margin:0 0 16px}
.h2{font-size: clamp(24px, 3vw, 34px); line-height:1.2; margin:0 0 10px}
.p-lg{font-size:18px; color:var(--muted)}
.list{display:grid; gap:10px; padding:0; margin:0; list-style:none}
.list li{display:flex; gap:10px; align-items:flex-start}
.list svg{flex:0 0 20px; margin-top:3px}
.header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eef2f7;
  backdrop-filter:saturate(1.5) blur(6px)
}
.header .row{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.logo{display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--text); font-weight:800}
.logo .dot{width:10px; height:10px; background:var(--brand); border-radius:50%}
.nav{display:none; gap:18px; align-items:center}
@media(min-width:840px){ .nav{display:flex} }
.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.hero{padding:40px 0 20px}
.hero .wrap{display:grid; gap:30px; grid-template-columns:1fr}
@media(min-width:980px){ .hero .wrap{grid-template-columns: 1.25fr .75fr; align-items:center} }
.hero .cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.hero .illustration{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
.proofbar{display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:center; margin:22px 0}
.steps{grid-template-columns: repeat(auto-fit, minmax(240px,1fr))}
.testimonials{grid-template-columns: repeat(auto-fit, minmax(280px,1fr))}
.faq details{background:#fff; border-radius:14px; padding:16px; box-shadow:var(--shadow)}
.faq summary{font-weight:700; cursor:pointer}
.footer{background:#0b1220; color:#cbd5e1; padding:40px 0}
.footer a{color:#e2e8f0; text-decoration:none}
.footer .grid{grid-template-columns:1fr; gap:18px}
@media(min-width:800px){ .footer .grid{grid-template-columns:2fr 1fr 1fr} }

/* Floating WhatsApp */
.whatsapp-float{
  position:fixed; right:18px; bottom:18px; width:64px; height:64px;
  display:inline-block; background: url('../vetores/whatsapp.svg') center/contain no-repeat;
  z-index:9999; filter: drop-shadow(0 10px 20px rgba(2,6,23,.25));
}
.whatsapp-float:focus{outline: 3px solid rgba(29,172,74,.35); outline-offset:4px}

/* Forms (quiz) */
.input{width:100%; padding:12px 14px; border:1px solid #e2e8f0; border-radius:12px; font-size:16px}
.label{font-weight:700; margin-bottom:6px; display:block}
.inline{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.radio{display:flex; gap:10px; align-items:center; background:#fff; border:1px solid #e2e8f0;
  padding:10px 12px; border-radius:999px; cursor:pointer}
.radio input{accent-color: var(--brand)}
.progress{height:10px; background:#e2e8f0; border-radius:999px; overflow:hidden}
.progress > div{height:100%; background: linear-gradient(90deg,var(--brand), var(--brand-2)); width:0%}
.helper{font-size:12px; color:var(--muted)}

.badge img, .check img, .selo img { width:16px; height:16px; flex:0 0 16px; }
