:root{
  --bg:#ffffff; --text:#0f172a; --muted:#475569;
  --primary:#0B5ED7; --primary-700:#094aa9; --accent:#E10600;
  --surface:#f8fafc; --border:#e2e8f0; --ring:#0B5ED733;
  --radius:14px; --shadow:0 10px 30px rgba(11,94,215,.18);
  /* safe-areas (iOS/Android notch) */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

*{box-sizing:border-box}
html,body{height:100%}
html, body { min-height: 100svh; } /* segura altura no mobile moderno */

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  padding-bottom: var(--safe-bottom); /* afasta conteúdo do notch inferior */
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
picture { display: block; }

/* links */
a{color:var(--primary);text-decoration:none}
@media (hover: hover){
  a:hover{text-decoration:underline}
}

/* ====== HEADER / TOPBAR ====== */
.topbar{
  background:linear-gradient(90deg,var(--primary),#1f78ff);
  color:#fff; padding:14px 0;
  position:sticky; top:0; z-index:10;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  padding-top: calc(14px + var(--safe-top)); /* safe-area top */
}
.topbar .wrap{
  max-width:none; width:100%;
  margin:0; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}

.brand{font-weight:900;letter-spacing:.2px;font-size:18px; display:flex; align-items:center; gap:12px; color:inherit}
.brand .accent{color:var(--accent)}
.brand-logo{ max-width: 96px; height:auto; border-radius:12px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.15)) }

/* antes estava nowrap/ellipsis e cortava em telas muito pequenas */
.brand-name{
  color:#fff;
  font-weight:900;
  letter-spacing:.3px;
  font-size:clamp(16px,2vw,28px);
  line-height:1.1;
  white-space:normal;             /* permite quebrar */
  overflow:visible;               /* não corta com ellipsis */
  word-break:break-word;          /* quebra segura em nomes longos */
}

/* ====== NAV ====== */
.nav{ display:flex; align-items:center; gap: clamp(14px,3vw,40px); }
.nav a{ color:#e9f2ff; font-size:clamp(14px,1.3vw,18px); font-weight:700; text-underline-offset:6px }

/* Botão hamburguer (escondido no desktop) */
.nav-toggle{
  display:none; background:transparent; border:0; padding:8px;
  font-size:24px; line-height:1; color:#fff; cursor:pointer;
}

/* Menu mobile */
@media (max-width: 760px){
  .nav{
    position: fixed; top: calc(56px + var(--safe-top)); right: 12px; left: 12px;
    z-index: 999; /* garante que fica acima de tudo */
    background: #0b5bd3; /* mesma cor da topbar */
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    padding: 10px 12px;
    display: grid; gap: 10px;
    transform: translateY(-16px) scale(0.98);
    opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav.is-open{
    transform: translateY(0) scale(1);
    opacity: 1; pointer-events: auto;
  }
  .nav a{ display:block; padding:8px 6px; color:#fff; }
  .nav-toggle{ display:inline-block; }
}

/* ====== HERO ====== */
.hero{max-width:1000px;margin:28px auto 12px;padding:0 16px;text-align:center}
.hero h1{margin:0 0 8px;font-size:clamp(22px,4vw,32px);line-height:1.2}
.hero p{margin:0;color:var(--muted)}

/* ====== CONTAINERS / CARDS ====== */
.container{max-width:900px;margin:24px auto 64px;padding:0 16px}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)
}
.grid{display:grid;gap:14px}

/* linhas em 2 colunas no desktop */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.row{grid-template-columns:1fr}}

/* títulos de seção */
.section-title{margin:6px 0 0;font-weight:900;color:#0a2c87}

/* ====== FORM ELEMENTS ====== */
label{display:block;font-weight:600;margin:0 0 6px}
input,select,textarea{
  width:100%; padding:14px 12px;
  border:1px solid var(--border); border-radius:12px; background:#fff; font:inherit;
  outline:none; transition:border .2s,box-shadow .2s
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
textarea{min-height:130px;resize:vertical}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
.counter{font-size:12px;color:var(--muted);text-align:right;margin-top:6px}

/* validação */
.checkbox{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--border);padding:10px 8px;border-radius:10px}
.error{color:#b91c1c;font-size:12px;display:none;margin-top:6px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#b91c1c}
.field.invalid .error{display:block}

/* ====== AÇÕES (botões) ====== */
.actions{
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:flex-end; margin-top:10px
}
/* Centraliza SOMENTE os CTAs no card da home (index tem .center-col) */
.center-col .card .actions{ justify-content:center }

/* botões */
.btn{
  appearance:none; border:0; border-radius:12px;
  padding:14px 18px; font-weight:800; cursor:pointer;
  background:var(--primary); color:#fff;
  box-shadow:0 8px 20px rgba(11,94,215,.25);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease
}
@media (hover: hover){
  .btn:hover{ background:var(--primary-700); transform:translateY(-1px); box-shadow:0 10px 22px rgba(11,94,215,.25) }
}
.btn:active{ transform:translateY(0) }
.btn.light{background:#eef2ff;color:#133979;box-shadow:none}

/* ====== SUMÁRIO / KV ====== */
.summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.summary div{padding:10px 12px;border-radius:10px;background:#fff;border:1px solid var(--border)}
.kv{display:flex;justify-content:space-between;gap:8px}
.kv b{color:#111827}

/* ====== TOAST ====== */
.toast{
  position:fixed; right:16px; bottom:16px; background:#0f172a; color:#fff;
  padding:12px 14px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:.25s; max-width:92vw
}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* ====== FOOTER ====== */
footer{
  text-align:center; color:#64748b; font-size:12px; margin:24px 0 40px;
  padding-bottom: var(--safe-bottom); /* reforço para safe-area */
}

/* ====== TIPOS / BADGES / PREÇO ====== */
.price{font-size:28px;font-weight:900;color:#0a2c87}
.badge{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#fff; border:1px solid var(--border); font-size:12px; margin:2px
}

/* grupo de badges (confiança) */
.badges{display:flex;flex-wrap:wrap;gap:12px 20px}
.center-col .badges{justify-content:center}
.badges li{
  list-style:none; background:#f6f8ff; border:1px solid #e7ecff;
  padding:8px 12px; border-radius:10px; font-weight:600
}

/* stepper "Como funciona?" */
.steps{counter-reset:s;display:grid;gap:12px;margin:0;padding-left:0}
.steps li{
  list-style:none; counter-increment:s; position:relative; padding-left:42px
}
.steps li::before{
  content:counter(s);
  position:absolute; left:0; top:0; width:28px; height:28px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--primary); color:#fff; font-weight:800;
  box-shadow:0 6px 14px rgba(0,0,0,.08)
}

/* ====== PREÇO CENTRALIZADO (HOME) ====== */
.price-line{
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; margin:0 0 8px; text-align:center;
}
.price-line .badge{ margin:0; }
.price-line .price{ font-size:clamp(28px,4vw,40px); line-height:1; color:#0a2c87; }
.price-line .per{ color:var(--muted); font-weight:600; }