:root{
  --bg:#f6f8fc; --surface:#ffffff; --surface2:#f1f5fb;
  --line:#e4e9f2; --line2:#eef2f8;
  --ink:#0f1b33; --ink2:#33415c; --muted:#6b7a99;
  --brand:#1a56db; --brand2:#2f7bff; --brand-ink:#0b3fb0;
  --ok:#16a34a; --wash:#eef4ff;
  --radius:16px; --shadow:0 1px 2px rgba(16,27,51,.04),0 8px 28px rgba(16,27,51,.06);
  --shadow-sm:0 1px 2px rgba(16,27,51,.06),0 2px 8px rgba(16,27,51,.05);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Inter,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;min-height:100vh;
  display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;color:var(--ink);letter-spacing:-.01em}
main{flex:1}

/* NAV */
header.nav{position:sticky;top:0;z-index:20;background:rgba(246,248,252,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;max-width:1140px;margin:0 auto}
.brand{font-weight:800;font-size:1.25rem;display:flex;align-items:center;gap:.4em;color:var(--ink)}
.brand .logo{color:var(--brand)}
.brand-logo{height:52px;width:auto;display:block}
@media(max-width:560px){.brand-logo{height:42px}}
.langsw{display:inline-flex;gap:2px;margin-left:6px;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:var(--surface)}
.langsw a{padding:5px 9px;font-size:.78rem;font-weight:700;color:var(--muted)}
.langsw a.on{background:var(--brand);color:#fff}
.langsw a:hover:not(.on){background:var(--surface2);color:var(--brand)}
.nav-inner nav{display:flex;align-items:center;gap:22px}
.nav-inner nav a{color:var(--ink2);font-weight:500;font-size:.96rem}
.nav-inner nav a:hover{color:var(--brand)}

/* BUTTONS */
.btn{display:inline-block;padding:10px 18px;border-radius:10px;border:1px solid transparent;
  font-weight:600;cursor:pointer;transition:.15s;font-size:.95rem;text-align:center}
.btn-primary{background:linear-gradient(180deg,var(--brand2),var(--brand));color:#fff;
  box-shadow:0 1px 2px rgba(26,86,219,.25),0 6px 16px rgba(26,86,219,.22)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--surface2);border-color:#d3dbe8}
.btn-lg{padding:14px 26px;font-size:1.05rem}
.btn-sm{padding:7px 13px;font-size:.85rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* HERO */
.hero{padding:84px 28px 48px;background:
  radial-gradient(900px 420px at 50% -60%,var(--wash),transparent 70%)}
.hero-inner{max-width:820px;margin:0 auto;text-align:center}
.hero h1{font-size:3rem;font-weight:800;letter-spacing:-.03em}
.grad{background:linear-gradient(120deg,var(--brand),var(--brand2));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.lead{font-size:1.2rem;color:var(--muted);max-width:640px;margin:20px auto 28px}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.muted{color:var(--muted)} .small{font-size:.87rem} .muted.small{margin-top:14px}

/* SECTIONS */
section.steps,section.plans,section.panel{max-width:1140px;margin:0 auto;padding:52px 28px}
section h2{text-align:center;font-size:1.9rem;margin-bottom:8px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:800px){.grid-3{grid-template-columns:1fr}.hero h1{font-size:2.1rem}.hero{padding:56px 20px 32px}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;position:relative;box-shadow:var(--shadow-sm)}
.steps .card:hover,.plan:hover{box-shadow:var(--shadow);transform:translateY(-2px);transition:.18s}
.step-n{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--brand2),var(--brand));margin-bottom:14px}
.steps h3,.plan h3{font-size:1.15rem}
.steps p,.plan+p{color:var(--muted)}

/* PLANS */
.plan .price{font-size:2.1rem;font-weight:800;margin:8px 0 16px;color:var(--ink)}
.plan .price span{font-size:.95rem;color:var(--muted);font-weight:500}
.plan ul{list-style:none;padding:0;margin:0 0 20px}
.plan li{padding:8px 0;color:var(--ink2);border-bottom:1px solid var(--line2);font-size:.95rem}
.plan li:last-child{border-bottom:none}
.plan-featured{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow)}
.badge{position:absolute;top:-12px;right:18px;background:linear-gradient(180deg,var(--brand2),var(--brand));
  color:#fff;font-size:.75rem;font-weight:700;padding:5px 12px;border-radius:20px;
  box-shadow:0 4px 12px rgba(26,86,219,.3)}

/* PANEL */
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}
.panel h1{font-size:1.9rem}
.tbl{width:100%;border-collapse:collapse;margin:14px 0 28px;font-size:.95rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;background:var(--surface2)}

.form-card{max-width:560px}
.form label{display:block;margin:14px 0;font-size:.9rem;color:var(--ink2);font-weight:500}
.form input,.form select,.form textarea{width:100%;margin-top:7px;padding:12px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1rem;
  font-family:inherit;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(26,86,219,.14)}
.form .row{display:flex;gap:12px}
.form .row label{flex:1} .form .narrow{max-width:120px}

.mini-select{padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pay-methods{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.pay-method{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface2)}

.tag{display:inline-block;padding:3px 11px;border-radius:20px;font-size:.78rem;font-weight:700}
.tag-move{background:#fdeef1;color:#c0345a;border:1px solid #f6c9d5}
.tag-copy{background:var(--wash);color:var(--brand-ink);border:1px solid #cfe0ff}

/* STATS */
.stats{margin-bottom:22px}
.stat{text-align:center}
.stat-n{font-size:2.3rem;font-weight:800;color:var(--brand)}
.stat > div:last-child{color:var(--muted);font-size:.92rem}

/* FLASH */
.flashes{max-width:1140px;margin:14px auto 0;padding:0 28px}
.flash{background:var(--wash);border:1px solid #cfe0ff;color:var(--brand-ink);
  padding:13px 16px;border-radius:12px;margin:6px 0;font-weight:500}

.foot{text-align:center;color:var(--muted);padding:34px;border-top:1px solid var(--line);
  margin-top:52px;font-size:.9rem;background:var(--surface)}

/* GUIDES (links SEO internos) */
.guides{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto}
.guide-link{padding:9px 15px;border:1px solid var(--line);border-radius:20px;background:var(--surface);
  color:var(--ink2);font-weight:600;font-size:.9rem;box-shadow:var(--shadow-sm);transition:.15s}
.guide-link:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}

/* ACCESS / CRIAR CONTA */
section.access{max-width:640px;margin:0 auto;padding:20px 28px 60px}
.access-card{padding:34px}
.access-card h2{text-align:left;margin-bottom:6px}

/* Tabelas roláveis no mobile (sem quebrar o layout) */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ===== RESPONSIVO ===== */
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}

@media(max-width:800px){
  .grid-3{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
  section.steps,section.plans,section.panel{padding:40px 18px}
}
@media(max-width:560px){
  .nav-inner{padding:12px 16px;flex-wrap:wrap;gap:10px 16px}
  .nav-inner nav{gap:14px;flex-wrap:wrap}
  .brand{font-size:1.1rem}
  .hero{padding:44px 16px 26px}
  .hero h1{font-size:1.8rem}
  .lead{font-size:1.02rem}
  .cta{flex-direction:column}
  .cta .btn{width:100%}
  section.steps,section.plans,section.panel,section.access{padding:32px 16px}
  .card{padding:20px}
  .access-card{padding:22px}
  .form .row{flex-direction:column;gap:0}
  .form .narrow{max-width:none}
  .tbl th,.tbl td{padding:11px 10px;white-space:nowrap}
  .flashes{padding:0 16px}
}