/* Gerado a partir dos `<style>` que viviam dentro do HTML (29/09/2026).
   Arquivo .css em /styles E SERVIDO pela plataforma, e ao contrario do CSS inline ele
   tem ETag, entao a segunda visita revalida com 304 em vez de baixar tudo de novo.
   NAO passa pela compiladora: sem `@apply`, e `rgb(a b c / d)` aqui funciona.
   A ORDEM DOS BLOCOS ABAIXO E A ORDEM QUE ELES TINHAM NO DOCUMENTO. Nao reordenar. */

.how-cf{
  --cf-violeta:rgb(var(--how-violeta));
  --cf-menta:rgb(var(--how-menta));
  --cf-superficie:rgb(var(--how-grafite) / .55);
  --cf-superficie2:rgb(var(--how-noite) / .6);
  /* ladrilho do icone de pagamento e fundo do hover: mesmo problema de tema das outras
     duas, por isso tambem viraram token. */
  --cf-ladrilho:rgb(var(--how-noite));
  --cf-hover:rgb(var(--how-grafite));
  --cf-linha:rgb(var(--foreground) / .09);
  --cf-mola:cubic-bezier(.34,1.5,.64,1);
  padding-bottom:16px;
}
/* Os dois tokens de superficie saem de `--how-grafite` e `--how-noite`, que sao ESCUROS
   NOS DOIS TEMAS (o tema claro troca `--background` e `--foreground`, nao cor de marca).
   Sem este bloco, no tema claro os quadros viram cinza medio com texto #555 em cima:
   1,76:1, ilegivel. **Vale procurar o mesmo padrao em outras paginas.** */
html[data-how-theme=light] .how-cf{
  --cf-superficie:rgb(255 255 255);
  --cf-superficie2:rgb(255 255 255 / .75);
  --cf-ladrilho:rgb(245 245 245);
  --cf-hover:rgb(245 245 245);
}

/* ===================== topo ===================== */
/* Dentro da faixa roxa tudo usa COR FIXA, nao token: ela e roxa nos dois temas, e um
   `--foreground` claro sumiria no tema claro.
   O arco vai a .55 e nao mais: a .8 o subtitulo (#dad7ff) cai para 3,98:1 sobre ele,
   abaixo do minimo de 4,5. A .55 da 4,89:1. */
.how-cf-topo{position:relative;display:flex;align-items:center;min-height:176px;margin:0 0 30px;border-radius:24px;background:#33299e;overflow:hidden}
.how-cf-topo-arco{position:absolute;left:-210px;top:-180px;width:560px;height:560px;opacity:.55}
.how-cf-topo-pontos{position:absolute;right:0;bottom:0;width:260px;height:150px;background-image:radial-gradient(#645cfa 2px,transparent 2.1px);background-size:12px 12px;opacity:.45}
.how-cf-topo-texto{position:relative;display:flex;flex-direction:column;gap:10px;padding:30px 48px}
.how-cf-topo h1{margin:0;font-size:clamp(28px,4.4vw,40px);line-height:1.15;font-weight:900;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.how-cf-topo p{margin:0;font-size:16px;line-height:24px;color:#dad7ff}

/* ===================== passos ===================== */
/* O texto e preso em largura para nao correr por baixo do mascote. A conta que manda:
   mascote de 150 num cartao de 403 comeca em x=263, e o texto de 222 termina em 248.
   **Mexer numa das duas medidas obriga a refazer a conta.** */
.how-cf-passos{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.how-cf-passo{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 26px 22px;border:1px solid var(--cf-linha);border-radius:20px;background:var(--cf-superficie);overflow:hidden}
/* O digito e `aria-hidden`: quem numera e o `<ol>` da pagina. */
.how-cf-passo-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgb(var(--how-violeta) / .16);color:#9a94fd;font-size:15px;font-weight:800}
/* O violeta cheio (#645cfa) sobre o distintivo escuro da 3,39:1, abaixo de 4,5. Estes dois
   tons, medidos, dao 6,1:1 no escuro e 6,14:1 no claro. */
html[data-how-theme=light] .how-cf-passo-num{color:#4338ca}
.how-cf-passo h3{margin:0;font-size:19px;font-weight:700;line-height:1.3}
.how-cf-passo p{margin:0;max-width:222px;color:rgb(var(--muted-foreground));font-size:14.5px;line-height:24px}
.how-cf-passo-mascote{position:absolute;right:-10px;bottom:-14px;width:150px;height:auto;pointer-events:none;user-select:none}

/* ===================== caixa larga ===================== */
.how-cf-caixa{padding:26px;border:1px solid var(--cf-linha);border-radius:16px;background:var(--cf-superficie2);margin-bottom:20px}
.how-cf-caixa-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:20px}
.how-cf-caixa h2{margin:0 0 5px;font-size:clamp(22px,2.6vw,29px);font-weight:700;letter-spacing:-.025em}
.how-cf-caixa-topo p{margin:0;color:rgb(var(--muted-foreground));font-size:15px}

/* ===================== tipos de produto ===================== */
@keyframes cf-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.how-cf-tipos-secao{margin-bottom:28px}
.how-cf-tipos-topo{margin-bottom:16px}
.how-cf-tipos-topo h2{margin:0 0 5px;font-size:clamp(22px,2.6vw,29px);font-weight:700;letter-spacing:-.025em}
.how-cf-tipos-topo p{margin:0;color:rgb(var(--muted-foreground));font-size:15px}
.how-cf-tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.how-cf-tipo{display:flex;flex-direction:column;gap:11px;padding:24px 26px;border:1px solid var(--cf-linha);border-radius:18px;background:var(--cf-superficie)}
.how-cf-tipo-topo{display:flex;align-items:center;gap:11px}
.how-cf-tipo-topo svg{width:20px;height:20px;flex:none}
.how-cf-tipo h3{margin:0;font-size:16.5px;font-weight:700;line-height:1.3}
.how-cf-tipo p{margin:0;color:rgb(var(--muted-foreground));font-size:14px;line-height:24px}
/* ESPECIFICIDADE: `.how-cf-tipo p` vale (0,1,1) e classe sozinha vale (0,1,0), entao
   `.how-cf-tipo-aviso{font-size:13px}` PERDIA. O que engana e que `display`, `border` e
   `padding` passavam, porque o paragrafo nao as declara, e so o tamanho da letra saia
   errado. **Classe de variacao de `p` aqui precisa carregar o `p` junto.** */
.how-cf-tipo p.how-cf-tipo-aviso{display:flex;align-items:flex-start;gap:8px;margin-top:2px;padding-top:11px;border-top:1px solid var(--cf-linha);font-size:13px;line-height:20px}
.how-cf-tipo-aviso svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--cf-violeta)}
/* Rodape do cartao: a mesma frase nos tres, a pedido do usuario. Vai SEM sinal e menor
   que o aviso de proposito, senao vira um terceiro bloco disputando atencao com os dois
   que importam. E nota de rodape, e tem de parecer nota de rodape. */
.how-cf-tipo p.how-cf-tipo-leia{margin-top:auto;padding-top:2px;font-size:12.5px;line-height:18px;opacity:.75}

/* ===================== pagamento ===================== */
.how-cf-pgto{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.how-cf-gw{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--cf-linha);border-radius:12px;background:var(--cf-superficie);transition:border-color .25s ease,transform .4s var(--cf-mola)}
.how-cf-gw:hover{border-color:rgb(var(--how-violeta) / .5);transform:translateY(-2px)}
.how-cf-gw-icone{display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid var(--cf-linha);border-radius:12px;background:var(--cf-ladrilho);color:rgb(var(--foreground))}
/* mesma medida para logo oficial (img) e simbolo desenhado (svg): eram 22 e 24, e a fileira ficava torta */
.how-cf-gw-icone img,.how-cf-gw-icone svg{width:24px;height:24px;display:block}
.how-cf-gw b{display:block;font-size:14.5px;font-weight:650}
/* so os spans do bloco de texto: se mirar em `.how-cf-gw span` pega tambem a
   caixa do icone, que e um <span>, e mata o display:grid dela */
.how-cf-gw > div > span{display:block;margin-top:2px;color:rgb(var(--muted-foreground));font-size:12.5px}
.how-cf-gw .how-cf-gw-marca{display:inline-flex;width:fit-content;align-items:center;gap:5px;margin-top:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600}
.how-cf-gw-marca svg{width:12px;height:12px}
.how-cf-gw-marca[data-tom=rapido]{background:rgb(var(--how-menta) / .14);color:var(--cf-menta)}
.how-cf-gw-marca[data-tom=lento]{background:rgb(var(--foreground) / .08);color:rgb(var(--muted-foreground))}

/* ===================== duvidas ===================== */
/* Abaixo de 560px a largura do texto deixa de ser teto e vira coluna reservada
   (`padding-right`), senao o texto encosta no mascote no cartao estreito. */
.how-cf-ajuda{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:26px;padding:24px 32px;border-radius:20px;background:#33299e;overflow:hidden}
.how-cf-ajuda-arco{position:absolute;right:-150px;top:-140px;width:420px;height:420px;opacity:.55}
/* Tudo que vem depois do arco precisa de `position:relative`, senao o arco cobre. */
.how-cf-ajuda-mascote{position:relative;flex:none;width:100px;height:auto;user-select:none}
.how-cf-ajuda-txt{position:relative;flex:1 1 240px;min-width:0}
.how-cf-ajuda-txt h2{margin:0 0 5px;font-size:18px;font-weight:700;color:#fff}
.how-cf-ajuda-txt p{margin:0;font-size:14px;line-height:21px;color:#dad7ff}
.how-cf-ajuda-botoes{position:relative;display:flex;flex-wrap:wrap;gap:10px}
/* O principal e cheio e branco; os outros dois sao contorno. A diferenca e de peso, nao
   de cor nova: e a unica coisa que diz qual dos tres resolve problema. */
.how-cf-ajuda-botao{display:inline-flex;align-items:center;height:46px;padding:0 20px;border:1px solid rgb(255 255 255 / .3);border-radius:11px;color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background-color .2s ease,border-color .2s ease}
.how-cf-ajuda-botao:hover{border-color:rgb(255 255 255 / .55);background:rgb(255 255 255 / .12)}
.how-cf-ajuda-botao.is-principal{border-color:#fafafa;background:#fafafa;color:#0a0a0a;font-size:14.5px;font-weight:700}
.how-cf-ajuda-botao.is-principal:hover{border-color:#fff;background:#fff}
.how-cf-ajuda-botao:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ===================== entrada ===================== */
.how-cf-anim{animation:cf-entra .5s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--cf-d,0ms)}

/* Tres cartoes nao partem em dois sem deixar um orfao, entao vao direto para uma coluna. */
@media(max-width:900px){
  .how-cf-passos{grid-template-columns:minmax(0,1fr);gap:14px}
  .how-cf-tipos{grid-template-columns:minmax(0,1fr);gap:14px}
  /* Cartao de uma coluna so e largo (ate ~880px): a 150px o mascote sumia nele. */
  .how-cf-passo-mascote{width:168px}
}
/* Num cartao estreito o `max-width:250px` nao basta: o texto chega no mascote pela
   direita (medido, o passo 3 encostava). Aqui a largura deixa de ser teto e vira uma
   coluna reservada com `padding-right`, do tamanho do mascote mais folga. */
@media(max-width:560px){
  .how-cf-passo p{max-width:none;padding-right:124px}
  .how-cf-passo-mascote{width:116px}
  /* Na faixa de ajuda os tres botoes vao para linhas separadas de qualquer jeito no
     celular (o maior tem 189px e so sobram 279). Se e para empilhar, que empilhem iguais
     e de ponta a ponta, em vez de tres larguras em escadinha. */
  .how-cf-ajuda{padding:22px;gap:18px}
  .how-cf-ajuda-mascote{width:76px}
  .how-cf-ajuda-txt{flex:1 1 150px}
  .how-cf-ajuda-botoes{width:100%;gap:8px}
  .how-cf-ajuda-botao{flex:1 1 100%;justify-content:center}
}
@media(max-width:820px){
  .how-cf-topo{min-height:0;margin-bottom:24px}
  .how-cf-topo-texto{padding:26px 24px}
  /* A reticula encolhe junto: a 260px ela ficava atras do texto no celular. A 150px a
     linha de apoio ainda encostava nela por um fio (medido), dai os 120. */
  .how-cf-topo-pontos{width:120px;height:80px}
}
@media(max-width:620px){
  .how-cf-caixa{padding:18px}
}
@media(prefers-reduced-motion:reduce){
  .how-cf-anim{animation:none}
  .how-cf-gw,.how-cf-ajuda-botao{transition:none}
}