/* Páginas de texto (termos, privacidade). A página de vendas pode reaproveitar as variáveis. */
:root {
  --fundo: #ffffff;
  --texto: #1f2328;
  --suave: #59636e;
  --destaque: #0b6bcb;
  --borda: #d1d9e0;
  --aviso: #fff4ce;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #0d1117; --texto: #e6edf3; --suave: #9198a1; --destaque: #4493f8; --borda: #3d444d; --aviso: #3b2e00; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 .25rem; }
h2 { font-size: 1.2rem; margin: 2.2rem 0 .5rem; }
a { color: var(--destaque); }
.data { color: var(--suave); margin: 0 0 2rem; }
footer { border-top: 1px solid var(--borda); margin-top: 3rem; padding-top: 1rem; color: var(--suave); font-size: .95rem; }

/* ---------------------------------------------------------------- página de vendas */
:root { --cartao: #f6f8fa; --tg: #e7f4e1; --sucesso: #1a7f37; }
@media (prefers-color-scheme: dark) { :root { --cartao: #161b22; --tg: #1f3324; --sucesso: #3fb950; } }

.vendas main { max-width: none; padding: 0; }
.largura { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.vendas section { margin: 4rem auto; }
.vendas h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; margin: 0 0 1rem; }
.vendas h2 { font-size: 1.6rem; margin: 0 0 1rem; }
.vendas h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.cor { color: var(--sucesso); }
.sub { font-size: 1.15rem; color: var(--suave); }
.nota, .pequeno { color: var(--suave); font-size: .9rem; }
code { background: var(--cartao); border: 1px solid var(--borda); border-radius: 4px; padding: 0 .3em; font-size: .9em; }

.topo { border-bottom: 1px solid var(--borda); }
.topo-linha { display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; padding-bottom: .75rem; }
.marca { font-weight: 700; color: var(--texto); text-decoration: none; }

.botao { display: inline-block; background: var(--destaque); color: #fff; font-weight: 600; text-decoration: none;
  padding: .8rem 1.3rem; border-radius: 10px; border: 1px solid var(--destaque); text-align: center; }
.botao:hover { filter: brightness(1.08); }
.botao-claro { background: transparent; color: var(--destaque); }
.botao-pequeno { padding: .45rem .9rem; font-size: .95rem; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 .75rem; }

.heroi { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; margin-top: 3rem !important; }
.telegram { margin: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 1.25rem; }
.bolha { background: var(--tg); border-radius: 14px 14px 14px 4px; padding: .9rem 1rem; font-size: .95rem; line-height: 1.5; }
.bolha p { margin: 0 0 .6rem; }
.bolha p:last-child { margin: 0; }
.bolha .link { color: var(--destaque); text-decoration: underline; }
.telegram figcaption { color: var(--suave); font-size: .85rem; margin-top: .6rem; text-align: center; }

.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; padding: 0; list-style: none; counter-reset: passo; }
.passos li { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 1.25rem; counter-increment: passo; }
.passos li::before { content: counter(passo); display: block; font-size: 1.6rem; font-weight: 700; color: var(--destaque); }
.passos code { display: inline-block; margin-top: .5rem; }

.cartoes, .planos { display: grid; gap: 1.25rem; }
.cartoes { grid-template-columns: repeat(3, 1fr); }
.planos { grid-template-columns: repeat(4, 1fr); }
.cartao, .plano { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 1.25rem; }
.cartao p { margin: .25rem 0; }
.desconto { color: var(--sucesso); font-weight: 700; font-size: 1.25rem; }
.plano { display: flex; flex-direction: column; }
.plano ul { padding-left: 1.1rem; margin: .5rem 0 1.25rem; flex: 1; }
.plano.destaque { border: 2px solid var(--destaque); }
.preco { font-size: 1.8rem; font-weight: 700; margin: 0; }
.preco span { font-size: 1rem; font-weight: 400; color: var(--suave); }

.transparente { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 2rem !important; }
details { border-bottom: 1px solid var(--borda); padding: .9rem 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: .6rem 0 0; }
.final { text-align: center; }
.rodape { border-top: 1px solid var(--borda); padding-top: 1.5rem; padding-bottom: 2.5rem; color: var(--suave); font-size: .9rem; }
.rodape p { margin: .3rem 0; }

@media (max-width: 860px) {
  .heroi, .cartoes, .passos { grid-template-columns: 1fr; }
  .planos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .planos { grid-template-columns: 1fr; } }
.heroi > *, .passos > *, .cartoes > *, .planos > * { min-width: 0; }
code { overflow-wrap: anywhere; }
.bolha { overflow-wrap: anywhere; }