/* Tema v2 do Paquete — carregado por último em todas as páginas.
   Tipografia (Plus Jakarta Sans nos títulos, Inter no corpo), ícones Lucide, sombras em 3 níveis e cantos suaves. */
:root {
  --fundo: #f4f6f9;
  --painel: #ffffff;
  --borda: #e3e8ef;
  --borda-forte: #cdd5df;
  --texto: #101828;
  --suave: #5d6b82;
  --accent: #2148d1;
  --accent-esc: #1a37a3;
  --accent-claro: #eef2ff;
  --ouro: #f2b318;
  --ouro-esc: #d99a00;
  --linha-alt: #f8fafc;
  --raio: 8px;
  --raio-g: 12px;
  --s1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .06);
  --s2: 0 6px 16px -4px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .06);
  --s3: 0 24px 48px -12px rgba(16, 24, 40, .28);
  --titulo: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14.5px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .titulo-secao, .modal-titulo, .preco, .marca { font-family: var(--titulo); }
::selection { background: #c7d2fe; }

/* ícones */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic.g { width: 22px; height: 22px; }
.ic.xg { width: 34px; height: 34px; stroke-width: 1.6; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

/* marca */
.marca { gap: 9px !important; letter-spacing: -.01em; }
.marca-icone { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(145deg, var(--ouro), var(--ouro-esc));
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(242, 179, 24, .35); }
.marca-icone svg { width: 20px; height: 20px; }
.logo { display: none; }
.topo { background: #0b1220; border-bottom: 1px solid #1c2638; height: 54px; box-shadow: 0 1px 0 rgba(255,255,255,.03); }

/* botões e campos */
.btn { border-radius: var(--raio); border-color: var(--borda-forte); box-shadow: var(--s1); transition: background .15s, box-shadow .15s, transform .15s, border-color .15s; }
.btn:hover { background: #f8fafc; border-color: #b8c2cf; }
.btn:active { transform: translateY(1px); }
.btn.primario { background: var(--accent); border-color: var(--accent); box-shadow: 0 1px 2px rgba(33,72,209,.3), inset 0 1px 0 rgba(255,255,255,.12); font-weight: 600; }
.btn.primario:hover { background: var(--accent-esc); box-shadow: 0 6px 14px -4px rgba(33,72,209,.5); transform: translateY(-1px); }
.btn.mini { box-shadow: none; }
.btn.link { box-shadow: none; }
.btn:focus-visible, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(33,72,209,.16) !important; }
input[type=number], input:not([type]), input[type=email], select, textarea { border-radius: var(--raio); border-color: var(--borda-forte); transition: border-color .15s, box-shadow .15s; }
.campo label { color: #344054; }

/* app: painel lateral */
.painel, .folha { background: var(--painel); }
.painel h2, .folha h3 { display: flex; align-items: center; gap: 7px; color: #475467; }
.abas { border-radius: 10px; background: #eef1f5; border: 0; padding: 4px; gap: 4px; }
.aba { border-radius: 7px; background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, color .15s; }
.aba.ativa { background: #fff; color: var(--accent); box-shadow: var(--s1); }
.soltar { border-radius: var(--raio-g); border: 1.5px dashed #b8c2cf; background: #fafbfd; flex-direction: column; gap: 8px; transition: border-color .15s, background .15s; }
.soltar:hover { border-color: var(--accent); background: var(--accent-claro); }
.soltar .ic.xg { color: var(--accent); }
.avancado { border-radius: var(--raio); background: #fafbfd; }
.avancado summary { display: flex; align-items: center; gap: 7px; }
.proposta { border-radius: var(--raio-g); background: #fff; box-shadow: var(--s1); transition: box-shadow .15s, transform .15s; }
.proposta:hover { box-shadow: var(--s2); transform: translateY(-2px); }
.proposta img { border-radius: 8px; }

/* simulador */
.sim-barra { background: #fff; box-shadow: 0 1px 0 var(--borda); }
.tela { background: radial-gradient(circle at 50% 40%, #eceff3, #dfe3e9); }
.selo { border-radius: 99px; padding: 6px 12px; backdrop-filter: blur(6px); background: rgba(11,18,32,.78); box-shadow: var(--s2); }
.zoom .btn { border-radius: 10px; background: #fff; box-shadow: var(--s2); }
.linha-tempo input[type=range] { height: 4px; }

/* folha */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.kpis > div { border: 1px solid var(--borda); border-radius: 10px; padding: 9px 10px; background: linear-gradient(180deg, #fff, #fafbfd); }
.kpis b { display: block; font-family: var(--titulo); font-size: 18px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpis small { color: var(--suave); font-size: 11.5px; display: flex; align-items: center; gap: 4px; }
.kpis .ic { width: 13px; height: 13px; }
.tabela-kv td { border-bottom-color: #f0f2f5; }
.tabela-kv tr.destaque td { background: #fff8e6; }
.tabela .amostra { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); border: 0; height: 15px; }
.liberar { border-radius: var(--raio-g); background: linear-gradient(180deg, #f5f7ff, #eef2ff); border-color: #d5ddfb; }
.downloads .btn { box-shadow: var(--s1); }
.downloads .btn.principal { background: var(--accent); color: #fff; border-color: var(--accent); }

/* modal, menu, faixa */
.modal { border-radius: 16px; box-shadow: var(--s3); animation: surgir .18s ease-out; }
.modal-fundo { background: rgba(11, 18, 32, .55); backdrop-filter: blur(3px); animation: esmaecer .18s ease-out; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes esmaecer { from { opacity: 0; } }
.menu { border-radius: 12px; box-shadow: var(--s3); }
.menu a, .menu button { display: flex; align-items: center; gap: 9px; border-radius: 7px; }
.menu .ic { color: var(--suave); }
.saldo { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.04); }
.saldo .ic { width: 14px; height: 14px; color: var(--ouro); }
.forma { border-radius: var(--raio-g); flex-direction: row; align-items: center; gap: 12px; box-shadow: var(--s1); transition: border-color .15s, box-shadow .15s; }
.forma .ic { color: var(--accent); width: 26px; height: 26px; }
.forma span { display: flex; flex-direction: column; gap: 2px; }
.forma:hover { box-shadow: var(--s2); }
.pix img { border-radius: 12px; box-shadow: var(--s1); }

/* páginas de conteúdo */
.cartao { border-radius: var(--raio-g); box-shadow: var(--s1); border-color: var(--borda); }
.cartao-cab h2 { display: flex; align-items: center; gap: 8px; color: #475467; }
.saldos > div { border-radius: 10px; background: linear-gradient(180deg, #fff, #f8fafc); }
.saldos span { font-family: var(--titulo); }
.indicadores > div { border-radius: var(--raio-g); box-shadow: var(--s1); }
.indicadores b { font-family: var(--titulo); }
.plano { border-radius: 14px; box-shadow: var(--s1); transition: box-shadow .2s, transform .2s; }
.plano:hover { box-shadow: var(--s2); transform: translateY(-3px); }
.plano.destaque { box-shadow: 0 0 0 2px var(--accent), var(--s2); }
.plano li::before { content: none; }
.plano li { display: flex; gap: 8px; align-items: flex-start; }
.plano li .ic { color: #16a34a; width: 16px; height: 16px; margin-top: 1px; }
.etiqueta { border-radius: 99px; }

/* landing */
.landing .hero { background: radial-gradient(1100px 500px at 85% 20%, rgba(242,179,24,.12), transparent 60%),
  radial-gradient(900px 600px at 0% 100%, rgba(33,72,209,.25), transparent 60%), #0b1220; }
.sobretitulo { display: inline-flex; align-items: center; gap: 7px; background: rgba(242,179,24,.12); border: 1px solid rgba(242,179,24,.3);
  padding: 4px 11px; border-radius: 99px; color: #fcd34d; }
.btn.cta { background: var(--ouro); border-color: var(--ouro); color: #0b1220; box-shadow: 0 10px 24px -8px rgba(242,179,24,.65); }
.btn.cta:hover { background: #ffc22e; transform: translateY(-1px); }
.btn.cta-sec { box-shadow: none; }
.moldura { box-shadow: 0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); border-radius: 18px; }
.passo, .recursos > div { border-radius: 14px; background: #fff; box-shadow: var(--s1); border: 1px solid var(--borda); padding: 22px; }
.recursos > div { border-top: 1px solid var(--borda); }
.passo span.num { display: none; }
.icone-redondo { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-claro); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; }
.icone-redondo.ouro { background: #fff6dd; color: #b47d00; }
.passo h3, .recursos h3 { margin-top: 14px; }
.exemplo { border-radius: 14px; box-shadow: var(--s1); transition: box-shadow .2s, transform .2s; }
.exemplo:hover { box-shadow: var(--s2); transform: translateY(-3px); }
.faq details { background: #fff; box-shadow: var(--s1); border-radius: 12px; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .2s; color: var(--suave); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.cta-final { background: radial-gradient(800px 300px at 50% 0%, rgba(242,179,24,.18), transparent 70%), #0b1220; }

@media (max-width: 720px) {
  .kpis b { font-size: 16px; }
  .marca-icone { width: 26px; height: 26px; }
}

.soltar-txt { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.check.mini .ic { width: 15px; height: 15px; }
.zoom .btn .ic { width: 18px; height: 18px; }
.sim-barra .btn { padding: 7px 10px; }
.selo-plano { display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 4px 10px -2px rgba(33,72,209,.45); }
.selo-plano .ic { width: 12px; height: 12px; fill: currentColor; }
.topo-btn .ic { width: 16px; height: 16px; }
.btn.cta .ic, .btn.cta-sec .ic { width: 18px; height: 18px; }
