/* afiliatum — folha de estilo da vitrine (o site público).
 *
 * NÃO COMPARTILHA NADA COM estilo.css, e isso é a intenção. O painel é um
 * console de operação escuro, denso, feito para uma pessoa que já sabe o que
 * está olhando. Esta página é o oposto em todos os eixos: clara, larga, com
 * pouca informação por tela, para alguém que chegou de um anúncio e decide em
 * segundos. Tokens compartilhados fariam uma mudança de contraste no painel
 * vazar para a página que recebe tráfego pago.
 *
 * CLARA, SEMPRE. Não há alternância nem @media (prefers-color-scheme): o
 * criativo do anúncio é feito uma vez e precisa bater com a página que ele
 * abre, nos dois sistemas.
 *
 * Fonte do sistema, de propósito: nenhuma fonte remota, nenhum font-src no CSP,
 * nenhum salto de layout esperando um arquivo que pode não chegar. Numa página
 * cuja métrica é conversão, a primeira pintura vale mais que a tipografia.
 */

:root {
  --tinta: #10131a;
  --tinta-media: #4a5263;
  --tinta-fraca: #6b7280;
  --papel: #ffffff;
  --papel-alt: #f5f7fa;
  --borda: #e3e8ef;

  --zap: #1fa855;
  --zap-escuro: #17833f;
  --marca: #6d3fd4;

  --raio: 14px;
  --raio-g: 22px;
  --largura: 62rem;
  --largura-texto: 40rem;

  --sombra: 0 1px 2px rgb(16 19 26 / 6%), 0 8px 24px rgb(16 19 26 / 6%);
  --sombra-cta: 0 6px 18px rgb(31 168 85 / 34%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
b { font-weight: 700; }

/* O pixel de 1×1 do <noscript>. Existe como classe, e não como atributo style,
   para que o CSP da vitrine não precise de style-src-attr 'unsafe-inline'. */
.pixel-sem-script { display: none; }

/* ── Topo ─────────────────────────────────────────────────────────────────── */

.topo {
  display: flex;
  justify-content: center;
  padding: 1.25rem 1.25rem 0;
}

.marca {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--marca);
}

/* ── Herói ────────────────────────────────────────────────────────────────── */

.heroi {
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
  text-align: center;
}

.selo {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--zap) 12%, transparent);
  color: var(--zap-escuro);
  font-size: 0.82rem;
  font-weight: 600;
}

.heroi__titulo {
  font-size: clamp(2rem, 7.5vw, 3.1rem);
  font-weight: 800;
}

.heroi__sub {
  margin: 1.15rem auto 2rem;
  max-width: 34rem;
  color: var(--tinta-media);
  font-size: 1.06rem;
}

.heroi__micro {
  margin-top: 0.9rem;
  color: var(--tinta-fraca);
  font-size: 0.88rem;
}

/* ── A chamada ────────────────────────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 24rem;
  padding: 1.05rem 1.75rem;
  border-radius: var(--raio-g);
  background: var(--zap);
  box-shadow: var(--sombra-cta);
  color: #fff;
  font-size: 1.08rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cta:hover { background: var(--zap-escuro); }
.cta:active { transform: translateY(1px); box-shadow: 0 3px 10px rgb(31 168 85 / 30%); }

.cta:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 3px;
}

.cta__icone { flex: none; }

/* Sem convite configurado. Não se parece com um botão porque não é um. */
.cta--indisponivel {
  display: inline-block;
  width: 100%;
  max-width: 24rem;
  padding: 1rem 1.5rem;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  background: var(--papel-alt);
  box-shadow: none;
  color: var(--tinta-fraca);
  font-size: 0.95rem;
  font-weight: 500;
}

/* ── Seções ───────────────────────────────────────────────────────────────── */

.secao { padding: 3.25rem 1.25rem; }

.secao--alt {
  border-block: 1px solid var(--borda);
  background: var(--papel-alt);
}

.secao__titulo {
  max-width: var(--largura);
  margin: 0 auto 2rem;
  font-size: clamp(1.45rem, 4.5vw, 1.95rem);
  font-weight: 800;
  text-align: center;
}

.secao__titulo em { color: var(--marca); font-style: italic; }

/* ── Cartões ──────────────────────────────────────────────────────────────── */

.cartoes {
  display: grid;
  gap: 1rem;
  max-width: var(--largura);
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.cartao {
  padding: 1.5rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow: var(--sombra);
}

.cartao__titulo { margin-bottom: 0.55rem; font-size: 1.08rem; font-weight: 700; }
.cartao__texto { color: var(--tinta-media); font-size: 0.96rem; }

/* ── Passos ───────────────────────────────────────────────────────────────── */

.passos {
  display: grid;
  gap: 1.5rem;
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.passo { display: flex; align-items: flex-start; gap: 1rem; }

.passo__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  font-weight: 700;
}

.passo__titulo { margin-bottom: 0.2rem; font-size: 1.05rem; font-weight: 700; }
.passo__texto { color: var(--tinta-media); font-size: 0.96rem; }

/* ── A lista do que não chega ─────────────────────────────────────────────── */

.lista-nao {
  display: grid;
  gap: 0.85rem;
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.lista-nao__item {
  position: relative;
  padding-left: 2rem;
  color: var(--tinta-media);
  font-size: 0.99rem;
}

/* O traço é decorativo e não deve ser lido: um ✕ de fonte viraria "letra x"
   em leitor de tela, e a frase já carrega a negação inteira. */
.lista-nao__item::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0.35rem;
  width: 0.85rem;
  height: 2px;
  border-radius: 2px;
  background: #d64545;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq {
  display: grid;
  gap: 0.7rem;
  max-width: var(--largura-texto);
  margin: 0 auto;
}

.faq__item {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  padding: 0 1.15rem;
}

.faq__pergunta {
  padding: 1rem 0;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.faq__pergunta::-webkit-details-marker { display: none; }

.faq__pergunta::after {
  content: "+";
  float: right;
  margin-left: 1rem;
  color: var(--marca);
  font-weight: 700;
}

.faq__item[open] .faq__pergunta::after { content: "−"; }

.faq__item[open] .faq__pergunta { border-bottom: 1px solid var(--borda); }

.faq__resposta {
  padding: 0.9rem 0 1.1rem;
  color: var(--tinta-media);
  font-size: 0.96rem;
}

/* ── Fecho ────────────────────────────────────────────────────────────────── */

.fecho {
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: 3.75rem 1.25rem;
  text-align: center;
}

.fecho__titulo { font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 800; }
.fecho__sub { margin: 0.75rem 0 1.85rem; color: var(--tinta-media); }

/* ── Rodapé ───────────────────────────────────────────────────────────────── */

.rodape {
  display: grid;
  gap: 0.8rem;
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--borda);
  color: var(--tinta-fraca);
  font-size: 0.84rem;
  line-height: 1.55;
}

.rodape__marca { color: var(--marca); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}