/* ═══════════════════════════════════════════════════════════
   CRIAR CONTA → PLANO → PARABÉNS
   Fluxo de cadastro no padrão da Hyros: uma pergunta por vez, tela limpa,
   sem menu e sem rodapé. Tudo que distrai sai — quem chega aqui já decidiu.
   ═══════════════════════════════════════════════════════════ */

body.conta{background:var(--off-white);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:var(--sp-10) var(--sp-5) var(--sp-16)}

/* ── o mascote no topo, no lugar do logo ── */
.conta-mrc{display:flex;justify-content:center;margin-bottom:var(--sp-8)}
.conta-mrc .msc{--px:3.4px}

/* ── o mascote carregando ──
   Duas voltas em steps(8), não rotação contínua: o mascote é um sprite de
   pixel, e giro suave denuncia que é CSS girando um retângulo. Em passos
   discretos ele lê como quadro de animação de jogo, que é a linguagem da
   marca. Os pixels do rosto somem no meio da volta e voltam no fim. */
.conta-mrc[data-carregando="true"] .msc{
  animation:msc-volta .82s steps(8,end) 2, msc-respira .82s var(--ease-out) 2}
.conta-mrc[data-carregando="true"] .msc i{animation:msc-some .82s steps(4,end) 2}

@keyframes msc-volta{ from{rotate:0deg} to{rotate:360deg} }
/* a escala é contínua enquanto a rotação é em passos: é o contraste entre as
   duas que dá a sensação de peso, em vez de girar solto no ar */
@keyframes msc-respira{ 0%,100%{scale:1} 42%{scale:.82} }
@keyframes msc-some{ 0%,14%{opacity:1} 26%,74%{opacity:0} 88%,100%{opacity:1} }

@media (prefers-reduced-motion:reduce){
  .conta-mrc[data-carregando="true"] .msc,
  .conta-mrc[data-carregando="true"] .msc i{animation:none}
  /* sem movimento, o sinal de "estou processando" passa a ser o esmaecer */
  .conta-mrc[data-carregando="true"]{opacity:.45;transition:opacity var(--d-base)}
}

/* ── headline com o cursor piscando ──
   O cursor é o que faz a tela parecer conversa em vez de formulário. */
.conta-h{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.125rem);font-weight:600;
  line-height:1.24;letter-spacing:-.02em;text-align:center;
  max-width:16ch;margin:0 auto var(--sp-3)}
/* `16ch` é a medida que deixa "Vamos criar a sua conta." em duas linhas. A
   pergunta da etapa 2 é mais longa e quebrava em três; `balance` reparte o
   texto entre as linhas em vez de encher a primeira e sobrar um resto. */
.conta-h--larga{max-width:23ch;text-wrap:balance}
.conta-h::after{content:"";display:inline-block;width:2px;height:.92em;
  margin-left:.12em;vertical-align:-.08em;background:var(--nucleo-laranja);
  animation:pisca 1.05s steps(1) infinite}
@keyframes pisca{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .conta-h::after{animation:none} }

.conta-sub{text-align:center;font-size:.9375rem;color:var(--gray-texto);
  margin-bottom:var(--sp-10)}

/* ── o formulário ── */
.conta-f{width:100%;max-width:520px}
.conta-campo{margin-bottom:var(--sp-6)}
.conta-campo > label{display:block;font-size:1rem;font-weight:600;
  color:var(--preto);margin-bottom:10px}
/* label que existe só para o leitor de tela: na etapa do e-mail a headline já
   diz o que o campo é, e repetir "Seu e-mail" acima dele polui a tela. Sai da
   vista sem sair da árvore de acessibilidade. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.conta-in,.conta-sel{width:100%;font-family:var(--font-corpo);font-size:1rem;
  padding:17px 20px;border:1px solid var(--border-forte);border-radius:var(--r-xl);
  background:#FFF;color:var(--preto);
  transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.conta-in::placeholder{color:var(--gray-deco)}
.conta-in:focus,.conta-sel:focus{outline:0;border-color:var(--nucleo-laranja);
  box-shadow:0 0 0 3px rgba(255,107,53,.14)}
.conta-in[aria-invalid="true"]{border-color:var(--error);
  box-shadow:0 0 0 3px rgba(220,38,38,.12)}

/* o select nativo, com a seta desenhada — o triângulo padrão do sistema
   destoa do resto e muda de forma em cada navegador */
.conta-sel{appearance:none;cursor:pointer;font-weight:600;
  color:var(--nucleo-laranja);padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23FF6B35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center}
.conta-sel:has(option[value=""]:checked){color:var(--nucleo-laranja)}
.conta-sel option{color:var(--preto);font-weight:400}

.conta-dica{display:block;text-align:center;font-size:.875rem;
  color:var(--gray-texto);margin-top:10px}
.conta-erro{display:block;font-size:.8125rem;color:var(--error);margin-top:8px}
/* a sugestão de domínio: um botão, não um aviso. Corrigir precisa custar um
   clique — pedir para a pessoa reescrever o e-mail é pedir o mesmo erro de
   novo. */
.conta-sug{display:block;width:100%;margin-top:8px;padding:9px 12px;
  border:1px solid rgba(255,107,53,.3);border-radius:var(--r-lg);
  background:rgba(255,107,53,.07);cursor:pointer;text-align:left;
  font-family:var(--font-corpo);font-size:.8125rem;color:var(--gray-body);
  transition:background var(--d-fast),border-color var(--d-fast)}
.conta-sug[hidden]{display:none}
.conta-sug:hover{background:rgba(255,107,53,.13);border-color:var(--nucleo-laranja)}
.conta-sug b{color:var(--preto);font-weight:600}

/* ── o botão ── */
.conta-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-corpo);font-size:1.0625rem;font-weight:600;color:#FFF;
  padding:19px 24px;border:0;border-radius:var(--r-full);cursor:pointer;
  background:linear-gradient(135deg,#FFB800,#FF6B35 52%,#FF3D7F);
  box-shadow:0 10px 26px -10px rgba(255,107,53,.7);
  transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base),filter var(--d-base)}
/* ── o brilho ──
   Uma faixa clara em diagonal que atravessa o botão no hover. `overflow:hidden`
   para ela não escapar do raio, e `pointer-events:none` para não roubar o
   clique. Sai de -75% e vai a 125%: nas duas pontas ela está fora, então não
   fica um resto de luz parado na borda. */
.conta-btn{position:relative;overflow:hidden;isolation:isolate}
.conta-btn::after{content:"";position:absolute;top:0;bottom:0;left:-75%;
  width:55%;pointer-events:none;z-index:1;opacity:0;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.conta-btn:hover:not(:disabled)::after{opacity:1;animation:btn-brilho .85s var(--ease-out)}
@keyframes btn-brilho{from{left:-75%}to{left:125%}}
@media (prefers-reduced-motion:reduce){
  .conta-btn::after{display:none}}
/* no botão apagado o brilho mentiria: sugere que dá para clicar e seguir */
.conta-btn[data-pronto="false"]::after,.conta-btn:disabled::after{display:none}

.conta-btn:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:0 14px 32px -10px rgba(255,107,53,.8)}
/* `.conta-btn{display:flex}` tem especificidade maior que o `[hidden]` da
   folha do navegador, então o atributo hidden não escondia nada: o botão de
   confirmar ficava visível durante o carregamento e no erro, onde clicar
   chamaria confirmPayment sem Element montado. */
.conta-btn[hidden],.mdl-voltar[hidden]{display:none}
/* `saturate()` sobre o gradiente devolvia um bege sujo que não é cor nenhuma
   da marca. Cinza sólido lê como "ainda não dá" sem inventar cor. */
.conta-btn:disabled{background:rgba(10,10,11,.11);color:var(--gray-texto);
  cursor:not-allowed;box-shadow:none;transform:none}
.conta-btn-2{width:100%;margin-top:12px;background:none;border:0;cursor:pointer;
  font-family:var(--font-corpo);font-size:.875rem;color:var(--gray-texto);
  padding:10px;text-decoration:underline;text-underline-offset:3px}

/* ── troca de etapa ── */
.etapa{display:none}
.etapa[data-ativa="true"]{display:block;animation:entra .42s var(--ease-out) both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .etapa[data-ativa="true"]{animation:none} }

/* ═══════════ SELEÇÃO DE PLANO ═══════════ */
body.conta--largo{max-width:none}
.pl-topo{max-width:760px;margin:0 auto var(--sp-10);text-align:center}

/* a recomendação: repete de volta o que a pessoa respondeu.
   É o que faz a sugestão soar como leitura do caso dela, e não como
   upsell — sem citar as respostas, qualquer plano "recomendado" é chute. */
.pl-rec{max-width:680px;margin:0 auto var(--sp-10);padding:20px 24px;
  border-radius:var(--r-xl);background:var(--dourado-fundo);
  border:1px solid rgba(255,184,0,.4);display:flex;gap:16px;align-items:flex-start}
.pl-rec .msc{--px:2.1px;flex:none;margin-top:2px}
.pl-rec b{display:block;font-size:.9375rem;font-weight:600;color:var(--preto);margin-bottom:4px}
.pl-rec p{font-size:.9375rem;line-height:1.6;color:var(--gray-body);margin:0}
.pl-rec em{font-style:normal;font-weight:600;color:var(--preto)}

.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  width:100%;max-width:1060px;margin:0 auto;align-items:start}
.plano{background:#FFF;border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:28px 26px;display:flex;flex-direction:column;position:relative}
.plano[data-rec="true"]{border-color:var(--nucleo-laranja);border-width:2px;
  box-shadow:0 18px 44px -22px rgba(255,107,53,.6)}
.plano-selo{position:absolute;top:-11px;left:26px;font-family:var(--font-mono);
  font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:#FFF;
  background:linear-gradient(135deg,#FF6B35,#FF3D7F);
  border-radius:999px;padding:5px 12px}
.plano h3{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.375rem;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.plano-p{font-size:.875rem;line-height:1.5;color:var(--gray-texto);
  margin-bottom:var(--sp-6);min-height:2.9em}
.plano-preco{display:flex;align-items:baseline;gap:5px;margin-bottom:4px}
.plano-preco b{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:2.25rem;font-weight:600;line-height:1;letter-spacing:-.03em}
.plano-preco span{font-size:.9375rem;color:var(--gray-texto)}
.plano-nota{font-size:.8125rem;color:var(--gray-texto);margin-bottom:var(--sp-6)}
.plano ul{list-style:none;display:flex;flex-direction:column;gap:9px;
  margin:0 0 var(--sp-8);padding:var(--sp-6) 0 0;border-top:1px solid var(--border)}
.plano li{font-size:.875rem;line-height:1.45;color:var(--gray-body);
  padding-left:22px;position:relative}
.plano li::before{content:"";position:absolute;left:0;top:.36em;width:13px;height:13px;
  border-radius:50%;background:rgba(255,107,53,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M1 3.5 3.3 5.8 8 1.1' stroke='%23FF6B35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}
.plano .conta-btn{margin-top:auto;font-size:.9375rem;padding:16px 20px}
.plano[data-rec="false"] .conta-btn{background:var(--preto);box-shadow:none}
.plano[data-rec="false"] .conta-btn:hover{background:var(--grafite);transform:translateY(-1px)}

.pl-rodape{max-width:680px;margin:var(--sp-10) auto 0;text-align:center;
  font-size:.875rem;line-height:1.6;color:var(--gray-texto)}
.pl-rodape b{color:var(--preto);font-weight:600}
@media (max-width:900px){ .planos{grid-template-columns:1fr;max-width:520px} .plano-p{min-height:0} }

/* ═══════════ PARABÉNS ═══════════ */
.ok{max-width:620px;text-align:center}
.ok .msc{--px:4.6px;margin:0 auto var(--sp-8)}
.ok-passos{list-style:none;text-align:left;margin:var(--sp-10) 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px}
.ok-passos li{display:flex;gap:14px;align-items:flex-start;background:#FFF;
  border:1px solid var(--border);border-radius:var(--r-xl);padding:18px 20px}
.ok-passos b{display:block;font-size:.9375rem;font-weight:600;margin-bottom:3px}
.ok-passos span{font-size:.875rem;line-height:1.55;color:var(--gray-texto)}
/* `.ok-passos .ok-n` e não `.ok-n`: o número é um <span>, e
   `.ok-passos span` (0,1,1) vence `.ok-n` (0,1,0) — o `color:#FFF` era
   descartado e o número saía cinza dentro do círculo laranja, praticamente
   invisível. */
.ok-passos .ok-n{flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;color:#FFF;
  background:linear-gradient(135deg,#FF6B35,#FF3D7F);
  box-shadow:0 5px 14px -6px rgba(255,107,53,.9)}

/* ═══════════ SELEÇÃO DE PLANO — duas colunas, sem rolagem ═══════════
   O argumento fica à esquerda e os planos à direita, os dois visíveis ao mesmo
   tempo: quem precisa rolar para ver o preço perde a recomendação de vista, e
   quem rola de volta para reler perde o preço. `min-height` em vez de `height`
   porque travar a altura em tela baixa esconderia o botão de assinar. */
body.conta--plano{padding:0;justify-content:center;max-width:none}
.pl-tela{display:grid;grid-template-columns:minmax(0,.56fr) minmax(0,1.44fr);
  /* `start` e não `center`: com os cards altos, centralizar empurrava o
     mascote e o título para o meio da página e a leitura começava abaixo da
     dobra. O argumento tem de estar visível no primeiro quadro. */
  gap:clamp(28px,3vw,48px);align-items:start;
  width:100%;max-width:1520px;min-height:100vh;
  padding:var(--sp-12) var(--sp-5) var(--sp-10)}
/* a coluna do argumento acompanha a rolagem: os cards são muito mais altos que
   ela, e sem isto o texto some assim que a pessoa desce para comparar */
/* O alternador de ciclo fica acima dos cards, então a coluna da direita começa
   mais abaixo. Sem esta compensação o mascote flutuava sozinho lá em cima,
   desalinhado de tudo. O valor é a altura do alternador mais a margem dele. */
.pl-lado{position:sticky;top:var(--sp-12);padding-top:76px}
@media (max-width:1080px){ .pl-lado{padding-top:0} }
@media (max-width:1080px){ .pl-lado{position:static} }

.pl-lado .conta-mrc{justify-content:flex-start;margin-bottom:var(--sp-6)}
.pl-lado .conta-h{text-align:left;margin-left:0;max-width:14ch}
.pl-lado .conta-sub{text-align:left;margin-bottom:var(--sp-8)}
.pl-gar{font-size:.875rem;line-height:1.6;color:var(--gray-texto);
  padding-top:var(--sp-6);border-top:1px solid var(--border)}
.pl-gar b{color:var(--preto);font-weight:600}

/* ── mensal × anual ── */
/* ── o alternador de ciclo ──
   Era um par de abas cinza que não pedia clique nenhum. O DataCrazy põe o
   desconto no próprio botão, e é o que faz o olho parar ali: a escolha do
   ciclo é a primeira decisão da tela, e ela tem que parecer uma oferta. */
.pl-ciclo{display:inline-flex;gap:5px;padding:5px;border-radius:var(--r-full);
  background:var(--cream);border:1px solid var(--border-forte);
  margin-bottom:var(--sp-5)}
.pl-ciclo button{position:relative;border:0;cursor:pointer;background:none;
  border-radius:var(--r-full);font-family:var(--font-corpo);font-size:.8125rem;
  font-weight:600;color:var(--gray-texto);padding:10px 18px;white-space:nowrap;
  display:flex;align-items:center;gap:8px;
  transition:background var(--d-fast),color var(--d-fast),box-shadow var(--d-fast)}
.pl-ciclo button:hover{color:var(--preto)}
/* o ativo em preto sólido: a pílula branca sobre cinza é o padrão de toggle
   que está em todo produto e não diz nada. Preto decide. */
.pl-ciclo button[aria-pressed="true"]{background:var(--preto);color:#FFF;
  box-shadow:0 6px 16px -8px rgba(10,10,11,.7)}
/* o desconto como etiqueta dentro do botão, no gradiente da marca */
.pl-ciclo .pl-eco{font-size:.6875rem;font-weight:600;letter-spacing:-.01em;
  color:#FFF;border-radius:6px;padding:3px 8px;
  background:linear-gradient(135deg,#FF6B35,#FF3D7F);
  box-shadow:0 4px 10px -4px rgba(255,107,53,.8)}
.pl-ciclo button[aria-pressed="false"] .pl-eco{
  background:rgba(10,10,11,.14);color:var(--gray-texto);box-shadow:none}

/* ── os três planos, em linha ──
   A hierarquia do card segue a ordem em que a decisão acontece: quanto custa,
   o que cabe, o que mais vem junto. Antes tudo tinha o mesmo peso e os dois
   números que de fato mudam de plano para plano — contatos e usuários — viviam
   numa lista ao lado de "suporte por chat". */
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  width:100%;align-items:stretch}
.plano{background:#FFF;border:1px solid var(--border);border-radius:var(--r-xl);
  padding:22px 20px;display:flex;flex-direction:column;position:relative;
  transition:transform var(--d-base),box-shadow var(--d-base),
             border-color var(--d-base)}
/* o card inteiro põe o plano em foco, então ele é um alvo: cursor e elevação
   no hover dizem isso antes do clique */
.plano{cursor:pointer}
.plano:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);
  border-color:var(--border-forte)}
.plano .conta-btn{cursor:pointer}

/* o recomendado tem fundo próprio: só a borda laranja fazia dele um card igual
   com uma linha diferente */
.plano[data-rec="true"]{border-color:var(--nucleo-laranja);border-width:2px;
  padding:21px 19px;
  background:linear-gradient(178deg,rgba(255,184,0,.07),#FFF 42%);
  box-shadow:0 20px 48px -26px rgba(255,107,53,.65)}
.plano[data-rec="true"]:hover{box-shadow:0 26px 56px -24px rgba(255,107,53,.7)}

/* o selo do plano. O gradiente da marca fica reservado ao recomendado — se
   os três brilhassem igual, nenhum se destacaria. */
.plano-selo{position:absolute;top:-11px;left:18px;
  font-size:.6875rem;font-weight:600;letter-spacing:-.005em;
  color:var(--gray-body);background:var(--off-white);
  border:1px solid var(--border-forte);border-radius:999px;padding:4px 11px}
/* o selo do recomendado respira: um pulso lento e curto, que chama sem
   piscar. Só ele — se os três se mexessem, viraria ruído. */
.plano-selo[data-rec="true"]{color:#FFF;border-color:transparent;
  background:linear-gradient(135deg,#FF6B35,#FF3D7F);
  animation:selo-pulsa 2.4s var(--ease-out) infinite}
@keyframes selo-pulsa{
  0%,100%{box-shadow:0 6px 16px -8px rgba(255,107,53,.9),
                     0 0 0 0 rgba(255,107,53,.42)}
  55%    {box-shadow:0 6px 16px -8px rgba(255,107,53,.9),
                     0 0 0 7px rgba(255,107,53,0)}}
@media (prefers-reduced-motion:reduce){
  .plano-selo[data-rec="true"]{animation:none;
    box-shadow:0 6px 16px -8px rgba(255,107,53,.9)}}
/* no card escuro o selo claro sumiria contra a borda preta */
.plano[data-topo="true"] .plano-selo{background:#2A2622;color:#FFD98A;
  border-color:rgba(255,184,0,.4)}
.plano h3{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.375rem;font-weight:600;letter-spacing:-.02em;margin-bottom:2px}
/* `min-height` de três linhas: a linha do Pro é mais longa e ocupava três
   enquanto as outras ocupavam duas — o card inteiro descia 18px e nada mais
   batia com os vizinhos. Reservar a altura maior custa um respiro nos cards
   curtos e alinha os três. */
.plano-p{font-size:.8125rem;line-height:1.5;color:var(--gray-texto);
  margin-bottom:0;min-height:4.5em}

/* preço: a âncora riscada na mesma linha, pequena, para o número de agora
   ficar sozinho no topo da hierarquia */
/* a âncora vai ACIMA e não ao lado: na mesma linha ela empurrava o "/mês"
   para a linha de baixo, e o preço aparecia partido em dois */
/* altura reservada para o bloco inteiro do preço. No mensal não há âncora e a
   nota perde uma linha: sem isso, trocar de ciclo empurra tudo o que vem
   abaixo para cima e para baixo, e o card inteiro treme. */
/* a reserva agora acompanha o conteúdo real: com as duas linhas de nota em
   ambos os ciclos, não sobra vão nenhum e nada treme na troca */
/* reserva a altura do ciclo mais alto (o anual, com duas linhas de nota):
   sem ela o botão e tudo abaixo pulam 19px quando se troca para o mensal */
.plano-preco-bl{display:flex;flex-direction:column;justify-content:flex-start;
  min-height:95px}
.plano-val{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
/* A âncora é IRMÃ do preço, não filha do flex. Dentro dele, com `order:-1` e
   `width:100%`, ela virava a primeira linha de um flex alinhado por baseline —
   e a linha esticava para a altura do maior item, abrindo 34px de vão acima
   dela contra 20px abaixo da nota. Fora do flex, margem é margem. */
.plano-de{display:block;font-size:.75rem;line-height:1.15;color:var(--gray-deco);
  text-decoration:line-through;text-decoration-thickness:1px;
  margin-bottom:2px;min-height:1.15em}
/* no mensal ela continua ocupando o lugar, apenas invisível */
.plano-de:empty::before{content:"\00a0";visibility:hidden}
/* `tabular-nums` trava a largura do dígito. Sem isso o 1 é mais estreito que
   o 4, o preço muda de tamanho a cada quadro da contagem e a linha inteira
   pula enquanto os números rolam. */
.plano-val b{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:2rem;font-weight:600;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.plano-val i{font-style:normal;font-size:.8125rem;color:var(--gray-texto)}
/* o desconto em porcentagem, que é como as quatro plataformas que olhamos
   exibem — e não sofre do problema do valor absoluto, verdadeiro num plano só */
/* fonte do corpo e não mono: o Geist Mono corta o zero neste tamanho */
.plano-val em{font-style:normal;margin-left:auto;align-self:center;
  font-size:.75rem;font-weight:600;letter-spacing:-.01em;
  color:#0B6B4A;background:rgba(18,128,92,.12);
  border-radius:6px;padding:3px 7px}
.plano-nota{display:block;font-size:.8125rem;line-height:1.4;
  color:var(--gray-texto);margin:4px 0 0}
.plano-nota b{font-weight:600;color:var(--preto)}
.plano[data-topo="true"] .plano-nota b{color:#FFF}
/* a economia vira selo: como texto solto, competia com a nota da cobrança */
.plano-eco{display:inline-block;margin-top:9px;padding:3px 9px;
  border-radius:999px;font-size:.6875rem;font-weight:600;
  color:#0B6B4A;background:rgba(18,128,92,.11)}

/* as duas cotas, lado a lado: é aqui que a escolha entre os planos acontece */
/* `grid` de duas colunas iguais, não `flex-wrap`: "1 milhão contatos" é mais
   largo que "50 mil contatos" e quebrava em duas linhas só nos cards de cima,
   deixando o bloco 26px mais alto e desalinhando tudo o que vem depois. Com
   colunas fixas e altura reservada, os três batem. */
.plano-cotas{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;
  margin:14px 0 0;padding:10px 14px;border-radius:var(--r-lg);
  min-height:62px;align-content:center;
  background:rgba(10,10,11,.035)}
/* número e rótulo na mesma linha: empilhados, a cota ocupava duas alturas e
   o olho lia dois blocos em vez de um valor */
.plano-cotas span{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  font-size:.75rem;color:var(--gray-texto);line-height:1.3}
/* `nowrap` e um corpo que caiba: "5 milhões" quebrava em duas linhas no
   Master e empurrava a cota inteira para baixo, desalinhando os três cards */
.plano-cotas b{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.125rem;font-weight:600;letter-spacing:-.025em;line-height:1.15;
  white-space:nowrap;color:#B4471F}

/* "Os cinco motores, sem trava" — a lista precisa de um título, senão as
   cinco linhas parecem features soltas em vez do argumento que são */
/* Sem mono, sem maiúscula, sem tracking: a combinação é o clichê visual de
   dashboard e faz a página parecer gerada. Um título pequeno na serifada da
   marca separa os blocos com o mesmo peso e sem o maneirismo. */
/* sem `border-top`: o card já é uma caixa, e cada divisor interno o retalha
   em faixas. O espaço em branco separa igual e não desenha nada. */
/* Fonte do corpo, não a serifada. O nome do plano já é serifado, e um segundo
   título na mesma família fazia o rótulo parecer subtítulo do plano em vez de
   divisão de seção. Aqui ele é etiqueta: peso alto, corpo baixo, cor recuada —
   presente sem disputar. */
.plano-cab{font-size:.8125rem;font-weight:600;letter-spacing:-.01em;
  color:var(--gray-texto);margin:20px 0 10px}
.plano-cab--bonus{color:#B4471F}
.plano[data-topo="true"] .plano-cab{color:rgba(255,255,255,.62)}
.plano-muda{margin-top:14px !important}
.plano ul{list-style:none;display:flex;flex-direction:column;gap:7px;
  margin:0;padding:0}
/* o que varia entre os planos, separado do que é igual nos três */
.plano-mais{margin-bottom:var(--sp-4) !important}
.plano li{font-size:.8125rem;line-height:1.5;color:var(--gray-body);
  padding-left:21px;position:relative}
/* ── o check: caixa CHEIA com o visto vazado dentro ──
   Vazado e não desenhado por cima: o visto é o buraco na cor de fundo, que é
   como o pixel art resolve contraste sem contorno. Mesma técnica dos adereços
   do mascote — um box-shadow por pixel, spread 0, sem curva. */
.plano li{--cpx:1.8px;--cor-box:#FF6B35;--cor-check:#FFF}
.plano li::before{content:"";position:absolute;left:0;top:.32em;
  width:var(--cpx);height:var(--cpx);background:transparent;border-radius:0;
  box-shadow:
    calc(var(--cpx) * 0) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 1) 0 0 var(--cor-check),
    calc(var(--cpx) * 6) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 2) 0 0 var(--cor-check),
    calc(var(--cpx) * 5) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 3) 0 0 var(--cor-check),
    calc(var(--cpx) * 2) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 3) 0 0 var(--cor-check),
    calc(var(--cpx) * 4) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 4) 0 0 var(--cor-check),
    calc(var(--cpx) * 3) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 6) 0 0 var(--cor-box)}

/* ── o presente dos bônus ──
   No lugar do check: bônus não é item de plano, é lembrança. */
.plano-mais li::before{--cor-laco:#FF3D7F;
  box-shadow:
    calc(var(--cpx) * 2) calc(var(--cpx) * 0) 0 0 var(--cor-laco),
    calc(var(--cpx) * 4) calc(var(--cpx) * 0) 0 0 var(--cor-laco),
    calc(var(--cpx) * 1) calc(var(--cpx) * 1) 0 0 var(--cor-laco),
    calc(var(--cpx) * 2) calc(var(--cpx) * 1) 0 0 var(--cor-laco),
    calc(var(--cpx) * 3) calc(var(--cpx) * 1) 0 0 var(--cor-laco),
    calc(var(--cpx) * 4) calc(var(--cpx) * 1) 0 0 var(--cor-laco),
    calc(var(--cpx) * 5) calc(var(--cpx) * 1) 0 0 var(--cor-laco),
    calc(var(--cpx) * 0) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 2) 0 0 var(--cor-laco),
    calc(var(--cpx) * 4) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 3) 0 0 var(--cor-laco),
    calc(var(--cpx) * 4) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 4) 0 0 var(--cor-laco),
    calc(var(--cpx) * 4) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 5) 0 0 var(--cor-laco),
    calc(var(--cpx) * 4) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 6) 0 0 var(--cor-laco),
    calc(var(--cpx) * 4) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 6) 0 0 var(--cor-box)}
.plano-mais li{--cor-box:#B4471F}
/* o que muda entre os planos: check em preto, para separar do que é comum */
.plano-muda li{--cor-check:var(--preto);--cor-box:rgba(10,10,11,.28)}
.plano-uso{--cor-check:var(--gray-deco) !important;--cor-box:rgba(10,10,11,.16) !important;
  color:var(--gray-texto)}

/* ── o Master é o topo de linha ──
   O ClickFunnels tira o plano de cima da paleta dos outros, e funciona: topo
   de linha se anuncia sozinho, sem precisar de selo dizendo que é o melhor. */
.plano[data-topo="true"]{background:var(--preto);border-color:var(--preto);
  color:rgba(255,255,255,.72)}
.plano[data-topo="true"] h3,
.plano[data-topo="true"] .plano-val b,
.plano[data-topo="true"] li b{color:#FFF}
.plano[data-topo="true"] .plano-cotas b{color:#FFD98A}
.plano[data-topo="true"] .plano-p,
.plano[data-topo="true"] .plano-nota,
.plano[data-topo="true"] li{color:rgba(255,255,255,.62)}

.plano[data-topo="true"] .plano-val i,
.plano[data-topo="true"] .plano-cotas span{color:rgba(255,255,255,.55)}
.plano[data-topo="true"] .plano-de{color:rgba(255,255,255,.4)}
.plano[data-topo="true"] .plano-cotas{background:rgba(255,255,255,.07)}
.plano[data-topo="true"] li{--cor-check:#FFB800;--cor-box:rgba(255,184,0,.34)}
.plano[data-topo="true"] .plano-uso{--cor-check:rgba(255,255,255,.4) !important;
  --cor-box:rgba(255,255,255,.2) !important}
/* `[data-topo][data-rec]` para ganhar de `.plano[data-rec="false"] .conta-btn`,
   que tem a mesma especificidade e vem depois no arquivo: sem isso o botão do
   Master fica preto sobre fundo preto e some. */
.plano[data-topo="true"][data-rec] .conta-btn{
  background:linear-gradient(135deg,#FFB800,#FF6B35);
  color:var(--preto);box-shadow:0 10px 24px -12px rgba(255,184,0,.9)}
.plano[data-topo="true"][data-rec] .conta-btn:hover{
  background:linear-gradient(135deg,#FFC94F,#FF8A4D);transform:translateY(-1px)}
.plano[data-topo="true"] .plano-val em{color:#FFD98A;background:rgba(255,184,0,.16)}
.plano[data-topo="true"]:hover{box-shadow:0 24px 54px -26px rgba(10,10,11,.9)}
/* recomendado E topo ao mesmo tempo: a borda quente por cima do fundo escuro */
.plano[data-topo="true"][data-rec="true"]{border-color:var(--nucleo-laranja);
  background:linear-gradient(178deg,#25211C,var(--preto) 44%)}
.plano li b{color:var(--preto);font-weight:600}

/* o Zoom com a marca: o nome sozinho no meio da frase some, e é um dos
   detalhes que separa o Pro do Lite */

/* `color` fixo some no card escuro: preto sobre preto */
.plano[data-topo="true"] .ic-zoom{color:#FFF}

/* ── as marcas dos canais ──
   Mesma caixinha do Zoom: 15px, raio 3, o glifo em branco sobre a cor da
   marca. O nome sozinho no meio da frase não é lido; o logo é. */
/* Sem `inline-flex`: com ele o navegador alinha a BORDA INFERIOR do ícone com
   a baseline do texto — o ::before é o primeiro item flex e não tem baseline
   própria —, e a marca inteira sobe. Com o ícone em `inline-block` e um
   `vertical-align` negativo, o texto flui normal e só o quadrado se posiciona.
   `-.26em` põe o centro do ícone na altura do centro da minúscula. */
.ic-marca{font-weight:600;color:var(--preto);white-space:nowrap}
.plano[data-topo="true"] .ic-marca{color:#FFF}
.ic-marca::before{content:"";display:inline-block;width:15px;height:15px;
  margin-right:4px;vertical-align:-.26em;border-radius:3px;
  background-position:center;background-repeat:no-repeat}

.ic-zap::before{background-color:#25D366;background-size:11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2m0 2a8 8 0 1 1-4.1 14.9l-.3-.2-2.6.7.7-2.5-.2-.3A8 8 0 0 1 12 4m-3.4 4c-.2 0-.5.1-.7.4-.3.3-.9.9-.9 2.1s.9 2.4 1 2.6c.2.2 1.8 2.8 4.4 3.8 2.2.9 2.6.7 3.1.6.5 0 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.6-.3-1.6-.8c-.2-.1-.4-.1-.5.1l-.7 1c-.2.2-.3.2-.5.1-.3-.1-1.2-.5-2.2-1.4-.8-.7-1.4-1.6-1.5-1.9-.2-.2 0-.4.1-.5l.4-.5.3-.5v-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4z'/%3E%3C/svg%3E")}

.ic-meet::before{background-color:#00832D;background-size:11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath fill='%23fff' d='M0 1.4C0 .9.4.5.9.5h6c.5 0 .9.4.9.9v5.9c0 .5-.4.9-.9.9h-6a.9.9 0 0 1-.9-.9zM8.6 3.3l2.6-1.9c.3-.2.8 0 .8.4v5c0 .4-.5.6-.8.4L8.6 5.3z'/%3E%3C/svg%3E")}
.ic-zoom::before{background-color:#0B5CFF;background-size:11px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M0 1.6A1.6 1.6 0 0 1 1.6 0h4A1.6 1.6 0 0 1 7.2 1.6v3.8A1.6 1.6 0 0 1 5.6 7h-4A1.6 1.6 0 0 1 0 5.4zM8 2.4l2.4-1.7c.3-.2.6 0 .6.35v5.1c0 .34-.3.53-.6.34L8 4.6z' fill='%23fff'/%3E%3C/svg%3E")}

/* o bônus do MCP: destacado porque é o item que nenhum concorrente tem */
/* o MCP tem caixa própria: é o único item que nenhum concorrente oferece, e
   perdido no meio da lista de bônus não parecia nada */
.plano-bonus{margin:0 0 8px;padding:10px 11px 10px 30px !important;
  border-radius:var(--r-lg);
  background:linear-gradient(115deg,rgba(255,184,0,.13),rgba(255,61,127,.11))}
.plano-bonus::before{left:10px !important;top:.72em !important}
.plano-bonus b{color:#B4471F !important}
/* no card escuro o gradiente claro e o texto marrom somem */
.plano[data-topo="true"] .plano-bonus{
  background:linear-gradient(115deg,rgba(255,184,0,.2),rgba(255,61,127,.16));
  color:rgba(255,255,255,.82)}
.plano[data-topo="true"] .plano-bonus b{color:#FFD98A !important}
/* o botão fica logo abaixo do preço, não no fim: com trinta linhas de lista,
   quem já decidiu teria de rolar o card inteiro para clicar. É o que a própria
   funil.ai faz hoje, e o Lovable também. */
.plano .conta-btn{margin:10px 0 0;font-size:.9375rem;padding:14px 12px;
  box-shadow:0 8px 20px -10px rgba(255,107,53,.7)}
.plano[data-rec="false"] .conta-btn{background:var(--preto);box-shadow:none}
.plano[data-rec="false"] .conta-btn:hover{background:var(--grafite);transform:translateY(-1px)}

@media (max-width:1080px){
  .pl-tela{grid-template-columns:1fr;min-height:0;padding:var(--sp-10) var(--sp-5)}
  .pl-lado .conta-mrc{justify-content:center}
  .pl-lado .conta-h,.pl-lado .conta-sub{text-align:center;margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  .planos{grid-template-columns:1fr}
  /* empilhados, os cards não precisam alinhar seção com seção: as alturas
     reservadas viram vão vazio */
  .plano-p,.plano-nota,.plano-cotas b{min-height:0}
  /* No dedo, alvo abaixo de 44px erra. Os cards são compactos no desktop
     porque dividem três colunas; empilhados, sobra largura de sobra para eles
     respirarem. */
  .plano .conta-btn{padding:16px 20px;font-size:.9375rem}
  .pl-ciclo{display:flex;width:100%;max-width:420px}
  .pl-ciclo button{flex:1;padding:13px 12px}
  .pl-ciclo .pl-eco{display:block;font-size:.6875rem;margin-top:1px}
}

/* ═══════════ CHECKOUT EMBUTIDO ═══════════
   Quando a pessoa escolhe um plano, a grade de três some e o formulário do
   Stripe toma o lugar dela. A coluna da esquerda vira o resumo do pedido: ela
   precisa continuar vendo o que está comprando enquanto digita o cartão. */
.pl-planos[data-modo="checkout"] .pl-ciclo,
.pl-planos[data-modo="checkout"] .planos,
.pl-planos[data-modo="checkout"] > .pl-gar{display:none}

.ck{display:none;animation:entra .4s var(--ease-out) both}
.pl-planos[data-modo="checkout"] .ck{display:block}

/* o iframe do Stripe tem altura própria e variável; o cartão só desenha a
   moldura em volta */
.ck-caixa{background:#FFF;border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:22px;box-shadow:var(--sh-lg);min-height:420px}
.ck-carregando{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;min-height:376px;color:var(--gray-texto);font-size:.875rem}
.ck-carregando .msc{--px:2.6px;animation:msc-volta .82s steps(8,end) infinite}

.ck-erro{background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.28);
  border-radius:var(--r-xl);padding:20px 22px;font-size:.875rem;line-height:1.6;
  color:var(--gray-body)}
.ck-erro b{display:block;color:var(--error);font-weight:600;margin-bottom:6px}
.ck-erro code{font-family:var(--font-mono);font-size:.8125rem;
  background:rgba(10,10,11,.06);border-radius:4px;padding:1px 5px}

/* ── o resumo, na coluna da esquerda ── */
.pl-resumo{display:none;margin-top:var(--sp-6);padding:20px 22px;
  border:1px solid var(--border);border-radius:var(--r-xl);background:#FFF}
body[data-modo="checkout"] .pl-resumo{display:block}
body[data-modo="checkout"] .pl-gar--principal{margin-top:var(--sp-6)}
.pl-resumo-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pl-resumo-l + .pl-resumo-l{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.pl-resumo-l span{font-size:.8125rem;color:var(--gray-texto)}
.pl-resumo-l b{font-size:1rem;font-weight:600}
.pl-resumo-l[data-total="true"] b{font-family:var(--font-voz);
  font-variation-settings:var(--voz-eixo);font-size:1.5rem;letter-spacing:-.02em}
.pl-trocar{margin-top:14px;background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--font-corpo);font-size:.8125rem;color:var(--nucleo-laranja);
  text-decoration:underline;text-underline-offset:3px}

/* a nota do resumo: quanto sai no cartão agora, sem o leitor precisar
   multiplicar por doze de cabeça */
.pl-resumo-n{margin-top:6px;font-size:.75rem;line-height:1.4;color:var(--gray-texto)}
/* a nota do card tem duas linhas no anual e precisa de altura fixa para os
   três cards continuarem alinhados */
.plano-nota{min-height:3.4em}

/* ═══════════ ESTADO 2 · os dados, antes do cartão ═══════════
   O resumo à esquerda fica visível enquanto a pessoa digita: é o que a WeSales
   faz bem, e serve para ancorar o valor no momento em que o atrito é maior. */
.pl-planos[data-modo="dados"] .pl-ciclo,
.pl-planos[data-modo="dados"] .planos,
.pl-planos[data-modo="dados"] > .pl-gar,
.pl-planos[data-modo="dados"] .ck{display:none}
.dados{display:none;animation:entra .4s var(--ease-out) both}
.pl-planos[data-modo="dados"] .dados{display:block}

.dados-cx{background:#FFF;border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:26px;box-shadow:var(--sh-lg)}
.dados-h{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.25rem;font-weight:600;letter-spacing:-.015em;margin-bottom:4px}
.dados-d{font-size:.875rem;color:var(--gray-texto);margin-bottom:var(--sp-6)}
.dados-c{margin-bottom:var(--sp-5)}
.dados-c label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:7px}
.dados-in{width:100%;font-family:var(--font-corpo);font-size:1rem;
  padding:14px 16px;border:1px solid var(--border-forte);border-radius:var(--r-lg);
  background:#FFF;color:var(--preto);
  transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.dados-in:focus{outline:0;border-color:var(--nucleo-laranja);
  box-shadow:0 0 0 3px rgba(255,107,53,.14)}
.dados-in[aria-invalid="true"]{border-color:var(--error);
  box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.dados-erro{display:block;font-size:.8125rem;color:var(--error);margin-top:6px}
.dados-nota{display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:14px;font-size:.75rem;color:var(--gray-texto)}
.dados-cad{flex:none;width:11px;height:8px;border:1.5px solid var(--gray-deco);
  border-top:0;border-radius:0 0 2px 2px;position:relative}
.dados-cad::before{content:"";position:absolute;left:1.5px;top:-5px;width:8px;height:6px;
  border:1.5px solid var(--gray-deco);border-bottom:0;border-radius:3px 3px 0 0}

/* o resumo ganha o cabeçalho com a marca, como no exemplo */
.pl-resumo-top{display:flex;align-items:center;gap:9px;padding-bottom:14px;
  margin-bottom:14px;border-bottom:1px solid var(--border)}
.pl-resumo-top .msc{--px:1.9px}
.pl-resumo-top b{font-size:.9375rem;font-weight:600}
.pl-resumo-top span{margin-left:auto;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gray-deco)}

/* os três passos do pós-clique, na coluna do argumento. Saíram do modal:
   lá competiam com o cartão, aqui ajudam a decidir. */
.pl-dep{list-style:none;counter-reset:d;margin:var(--sp-6) 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px}
/* `position:relative` e NÃO flex: com flex, o <b> vira um item e o resto da
   frase vira outro, e o texto quebra em duas colunas. Mesma armadilha do
   .mdl-eco. */
.pl-dep li{position:relative;padding-left:32px;font-size:.875rem;
  line-height:1.55;color:var(--gray-texto)}
.pl-dep li::before{counter-increment:d;content:counter(d);
  position:absolute;left:0;top:.1em;
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.625rem;
  background:linear-gradient(135deg,#FF6B35,#FF3D7F);color:#FFF;
  box-shadow:0 4px 12px -6px rgba(255,107,53,.9)}
.pl-dep b{color:var(--preto);font-weight:600}
.pl-lado .pl-gar--principal{margin-top:var(--sp-6)}

/* ── os três ícones das etapas, em pixel art ──
   Substituem os números 1-2-3: o passo se reconhece pelo desenho antes de
   qualquer leitura, e por isso o texto de cada card pôde encolher para uma
   frase. Gerados por scratchpad/gerar_icones_ok.py — não editar à mão. */
.ok-passos .ok-ic{flex:none;position:relative;--ipx:3px;
  width:42px;height:42px;border-radius:11px;
  background:rgba(255,107,53,.09)}
.ok-ic::before{content:"";position:absolute;
  width:var(--ipx);height:var(--ipx);background:transparent}

/* envelope: moldura sólida, vinco em V descendo dos cantos (8×6) */
.ok-ic--email::before{left:9px;top:12px;
  box-shadow:
    calc(var(--ipx) * 0) calc(var(--ipx) * 0) 0 0 #FF6B35,
    calc(var(--ipx) * 1) calc(var(--ipx) * 0) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 0) 0 0 #FF6B35,
    calc(var(--ipx) * 3) calc(var(--ipx) * 0) 0 0 #FF6B35,
    calc(var(--ipx) * 4) calc(var(--ipx) * 0) 0 0 #FF6B35,
    calc(var(--ipx) * 5) calc(var(--ipx) * 0) 0 0 #FF6B35,
    calc(var(--ipx) * 6) calc(var(--ipx) * 0) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 0) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 1) calc(var(--ipx) * 1) 0 0 #FFC94F,
    calc(var(--ipx) * 6) calc(var(--ipx) * 1) 0 0 #FFC94F,
    calc(var(--ipx) * 7) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 2) 0 0 #FFC94F,
    calc(var(--ipx) * 5) calc(var(--ipx) * 2) 0 0 #FFC94F,
    calc(var(--ipx) * 7) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 3) 0 0 #FF6B35,
    calc(var(--ipx) * 3) calc(var(--ipx) * 3) 0 0 #FFC94F,
    calc(var(--ipx) * 4) calc(var(--ipx) * 3) 0 0 #FFC94F,
    calc(var(--ipx) * 7) calc(var(--ipx) * 3) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 4) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 4) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 1) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 3) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 4) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 5) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 6) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 5) 0 0 #FF6B35}

/* calendário: argolas em cima, faixa do mês, dias marcados (8×7) */
.ok-ic--agenda::before{left:9px;top:10px;
  box-shadow:
    calc(var(--ipx) * 1) calc(var(--ipx) * 0) 0 0 #FFC94F,
    calc(var(--ipx) * 6) calc(var(--ipx) * 0) 0 0 #FFC94F,
    calc(var(--ipx) * 0) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 1) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 3) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 4) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 5) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 6) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 1) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 3) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 4) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 5) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 6) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 3) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 3) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 4) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 4) 0 0 #FFC94F,
    calc(var(--ipx) * 3) calc(var(--ipx) * 4) 0 0 #FFC94F,
    calc(var(--ipx) * 5) calc(var(--ipx) * 4) 0 0 #FFC94F,
    calc(var(--ipx) * 7) calc(var(--ipx) * 4) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 5) 0 0 #FFC94F,
    calc(var(--ipx) * 5) calc(var(--ipx) * 5) 0 0 #FFC94F,
    calc(var(--ipx) * 6) calc(var(--ipx) * 5) 0 0 #FFC94F,
    calc(var(--ipx) * 7) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 1) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 3) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 4) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 5) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 6) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 6) 0 0 #FF6B35}

/* barras subindo: o topo de cada uma em tom claro puxa o olho para cima (8×7) */
.ok-ic--rodando::before{left:9px;top:10px;
  box-shadow:
    calc(var(--ipx) * 6) calc(var(--ipx) * 0) 0 0 #FFC94F,
    calc(var(--ipx) * 7) calc(var(--ipx) * 0) 0 0 #FFC94F,
    calc(var(--ipx) * 4) calc(var(--ipx) * 1) 0 0 #FFC94F,
    calc(var(--ipx) * 5) calc(var(--ipx) * 1) 0 0 #FFC94F,
    calc(var(--ipx) * 6) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 1) 0 0 #FF6B35,
    calc(var(--ipx) * 4) calc(var(--ipx) * 2) 0 0 #FFC94F,
    calc(var(--ipx) * 5) calc(var(--ipx) * 2) 0 0 #FFC94F,
    calc(var(--ipx) * 6) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 2) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 3) 0 0 #FFC94F,
    calc(var(--ipx) * 3) calc(var(--ipx) * 3) 0 0 #FFC94F,
    calc(var(--ipx) * 4) calc(var(--ipx) * 3) 0 0 #FF6B35,
    calc(var(--ipx) * 5) calc(var(--ipx) * 3) 0 0 #FF6B35,
    calc(var(--ipx) * 6) calc(var(--ipx) * 3) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 3) 0 0 #FF6B35,
    calc(var(--ipx) * 2) calc(var(--ipx) * 4) 0 0 #FFC94F,
    calc(var(--ipx) * 3) calc(var(--ipx) * 4) 0 0 #FFC94F,
    calc(var(--ipx) * 4) calc(var(--ipx) * 4) 0 0 #FF6B35,
    calc(var(--ipx) * 5) calc(var(--ipx) * 4) 0 0 #FF6B35,
    calc(var(--ipx) * 6) calc(var(--ipx) * 4) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 4) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 5) 0 0 #FFC94F,
    calc(var(--ipx) * 1) calc(var(--ipx) * 5) 0 0 #FFC94F,
    calc(var(--ipx) * 2) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 3) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 4) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 5) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 6) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 5) 0 0 #FF6B35,
    calc(var(--ipx) * 0) calc(var(--ipx) * 6) 0 0 #FFC94F,
    calc(var(--ipx) * 1) calc(var(--ipx) * 6) 0 0 #FFC94F,
    calc(var(--ipx) * 2) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 3) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 4) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 5) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 6) calc(var(--ipx) * 6) 0 0 #FF6B35,
    calc(var(--ipx) * 7) calc(var(--ipx) * 6) 0 0 #FF6B35}

/* ═══════════ PÓDIO DA TELA DE OBRIGADO ═══════════
   O mascote sobe no primeiro degrau com um troféu. É a única tela do fluxo em
   que a pessoa não tem nada a decidir — pode ser puro alívio. */
.ok-podio{position:relative;display:flex;flex-direction:column;align-items:center;
  margin-bottom:var(--sp-8)}
.ok-podio .msc-cena{--px:4.5px;position:relative;z-index:2;margin-bottom:-2px}

/* o troféu, erguido ao lado da cabeça. Sprite 7×7 em box-shadow, como os
   outros adereços: cada sombra é um pixel, spread 0, sem raio. */
.msc-item--trofeu{
  --ipx:calc(var(--px) * .9);
  left:calc(100% + var(--px) * .6);top:calc(var(--px) * 4);
  width:var(--ipx);height:var(--ipx);background:transparent;
  box-shadow:
    /* taça */
    calc(var(--ipx) * 1) 0 0 0 #FFC94F, calc(var(--ipx) * 2) 0 0 0 #FFC94F,
    calc(var(--ipx) * 3) 0 0 0 #FFC94F, calc(var(--ipx) * 4) 0 0 0 #FFC94F,
    calc(var(--ipx) * 5) 0 0 0 #FFC94F,
    /* alças */
    0 calc(var(--ipx) * 1) 0 0 #E8B93A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 1) 0 0 #FFC94F,
    calc(var(--ipx) * 2) calc(var(--ipx) * 1) 0 0 #FFC94F,
    calc(var(--ipx) * 3) calc(var(--ipx) * 1) 0 0 #FFC94F,
    calc(var(--ipx) * 4) calc(var(--ipx) * 1) 0 0 #FFC94F,
    calc(var(--ipx) * 5) calc(var(--ipx) * 1) 0 0 #FFC94F,
    calc(var(--ipx) * 6) calc(var(--ipx) * 1) 0 0 #E8B93A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 2) 0 0 #FFC94F,
    calc(var(--ipx) * 2) calc(var(--ipx) * 2) 0 0 #FFC94F,
    calc(var(--ipx) * 3) calc(var(--ipx) * 2) 0 0 #FFC94F,
    calc(var(--ipx) * 4) calc(var(--ipx) * 2) 0 0 #FFC94F,
    calc(var(--ipx) * 5) calc(var(--ipx) * 2) 0 0 #FFC94F,
    /* afunila */
    calc(var(--ipx) * 2) calc(var(--ipx) * 3) 0 0 #E8B93A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 3) 0 0 #FFC94F,
    calc(var(--ipx) * 4) calc(var(--ipx) * 3) 0 0 #E8B93A,
    /* haste */
    calc(var(--ipx) * 3) calc(var(--ipx) * 4) 0 0 #E8B93A,
    /* base */
    calc(var(--ipx) * 2) calc(var(--ipx) * 5) 0 0 #B07A00,
    calc(var(--ipx) * 3) calc(var(--ipx) * 5) 0 0 #E8B93A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 5) 0 0 #B07A00,
    calc(var(--ipx) * 1) calc(var(--ipx) * 6) 0 0 #B07A00,
    calc(var(--ipx) * 2) calc(var(--ipx) * 6) 0 0 #B07A00,
    calc(var(--ipx) * 3) calc(var(--ipx) * 6) 0 0 #B07A00,
    calc(var(--ipx) * 4) calc(var(--ipx) * 6) 0 0 #B07A00,
    calc(var(--ipx) * 5) calc(var(--ipx) * 6) 0 0 #B07A00;
  animation:trof-ergue 2.6s var(--ease-out) infinite}
@keyframes trof-ergue{
  0%,72%,100%{transform:translateY(0)}
  80%{transform:translateY(calc(var(--ipx) * -1.4))}
  88%{transform:translateY(0)}}

/* os três degraus. O primeiro é mais alto e leva o gradiente da marca. */
.ok-degraus{display:flex;align-items:flex-end;justify-content:center;gap:3px}
.ok-deg{display:grid;place-items:end center;padding-bottom:7px;
  width:62px;font-family:var(--font-mono);font-size:.6875rem;
  border-radius:4px 4px 0 0;color:rgba(255,255,255,.75)}
.ok-deg--1{height:52px;color:#FFF;
  background:linear-gradient(180deg,#FF8A4D,#FF6B35 55%,#E85307)}
.ok-deg--2{height:36px;background:linear-gradient(180deg,#CFC9BE,#B5AFA4)}
.ok-deg--3{height:28px;background:linear-gradient(180deg,#D9B48F,#C09468)}

/* ═══════════ CONFETE ═══════════
   Vive numa camada `fixed` com `pointer-events:none`: nada dele intercepta
   clique. Some sozinho quando a animação acaba — o JS remove a camada. */
.confete{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.confete i{position:absolute;top:-16px;width:8px;height:14px;
  animation:cf-cai linear forwards}
@keyframes cf-cai{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  85%{opacity:1}
  100%{transform:translateY(105vh) rotate(var(--giro,540deg));opacity:0}}
@media (prefers-reduced-motion:reduce){
  .confete{display:none}
  .msc-item--trofeu{animation:none}}

/* ═══════════ MODAL DE ASSINATURA ═══════════
   Clicar num plano não troca a página: abre por cima dela, com o resto
   desfocado. Uma coluna, e só duas coisas dentro — confirmar os dados e pagar.
   Argumento de venda não mora aqui: quem chegou neste ponto já decidiu, e cada
   bloco a mais é uma chance de repensar. O que convence fica na tela de
   planos, atrás do desfoque. */
.mdl{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  padding:24px;overflow-y:auto}
.mdl[hidden]{display:none}

.mdl-fundo{position:fixed;inset:0;background:rgba(20,18,15,.34);
  backdrop-filter:blur(14px) saturate(.9);-webkit-backdrop-filter:blur(14px) saturate(.9);
  animation:mdl-fundo .32s var(--ease-out) both}
@keyframes mdl-fundo{from{opacity:0}to{opacity:1}}

.mdl-cx{position:relative;width:100%;max-width:428px;background:#FFF;
  border-radius:var(--r-2xl);box-shadow:var(--sh-tela);overflow:hidden;
  /* cresce de onde o card estava: a origem vem do JS, então o modal parece o
     próprio plano se abrindo, não uma caixa vinda do nada */
  transform-origin:var(--org, 50% 50%);
  animation:mdl-entra .42s var(--ease-out) both}
@keyframes mdl-entra{
  from{opacity:0;transform:scale(.86) translateY(12px)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .mdl-fundo,.mdl-cx{animation:none} }

.mdl-x{position:absolute;top:13px;right:13px;z-index:3;width:28px;height:28px;
  border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;
  display:grid;place-items:center;transition:background var(--d-fast)}
.mdl-x:hover{background:rgba(255,255,255,.9)}
.mdl-x::before,.mdl-x::after{content:"";position:absolute;width:11px;height:1.6px;
  background:var(--preto);border-radius:1px}
.mdl-x::before{transform:rotate(45deg)} .mdl-x::after{transform:rotate(-45deg)}

/* ── o topo: o mascote, o plano e o valor. Nada além disso ──
   O que o plano inclui já foi lido na tela de planos; repetir aqui só ocupa
   espaço acima do formulário. */
.mdl-topo{padding:20px 22px 16px;text-align:center;
  background:linear-gradient(135deg,
    rgba(255,184,0,.12),rgba(255,107,53,.13) 48%,rgba(255,61,127,.11));
  border-bottom:1px solid rgba(255,107,53,.18)}
.mdl-marca{display:flex;justify-content:center;
  padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid rgba(255,107,53,.16)}
/* o mascote é desenhado em pixels e cada peça é um múltiplo de --px: valor
   fracionário (1.8px) faz o navegador arredondar cada uma por conta própria e
   o bicho sai torto. Só inteiros aqui. */
.mdl-marca .msc{--px:3px}

/* ═══ O MASCOTE REAGE AO FORMULÁRIO ═══
   Vale para qualquer mascote com a classe `.msc--reage`: o do modal e o do
   cadastro. `_mascote.css` é gerado por script e não se edita à mão — tudo
   aqui são estados novos por cima, nunca reescrita.

   Três coisas acontecem: a pupila acompanha o que está sendo escrito, a boca
   abre conforme os campos fecham, e no passo do cartão ele venda os olhos. A
   venda é piada e é argumento ao mesmo tempo: o cartão é digitado dentro de um
   iframe do Stripe, e nem nós vemos o número. */

/* olhar — --ox e --oy vêm do JS, em unidades de pixel do mascote. A pupila tem
   3px de folga dentro do olho de 4px, então o alcance útil é -1 a +2. */
.msc--reage .msc-pup{
  left:calc((4 + var(--ox, 0)) * var(--px));
  top:calc((11 + var(--oy, 0)) * var(--px));
  transition:left .34s var(--ease-out),top .34s var(--ease-out)}

/* sorriso — as pontas sobem uma linha, que é como um sorriso se desenha nesta
   grade. `overflow:visible` porque as pontas caem fora da caixa da boca. */
.msc--reage .msc-boca{overflow:visible;
  transition:width .3s var(--ease-out),left .3s var(--ease-out)}
.msc--reage .msc-boca::before,.msc--reage .msc-boca::after{
  content:"";position:absolute;width:var(--px);height:var(--px);
  background:var(--tinta);top:calc(-1 * var(--px));
  opacity:0;transform:scale(.5);
  transition:opacity .26s var(--ease-out),transform .26s var(--ease-out)}
.msc--reage .msc-boca::before{left:calc(-1 * var(--px))}
.msc--reage .msc-boca::after{right:calc(-1 * var(--px))}

.msc--reage[data-humor="leve"] .msc-boca::before,
.msc--reage[data-humor="leve"] .msc-boca::after,
.msc--reage[data-humor="feliz"] .msc-boca::before,
.msc--reage[data-humor="feliz"] .msc-boca::after{opacity:1;transform:none}
/* sorriso cheio: a boca alarga um pixel para cada lado */
.msc--reage[data-humor="feliz"] .msc-boca{
  left:calc(7 * var(--px));width:calc(6 * var(--px))}

/* venda — desce da testa. O clip-path do mascote recorta o que sobra, então
   ela nasce de dentro da silhueta em vez de aparecer flutuando. */
.msc--reage{overflow:hidden}
/* os olhos ocupam as linhas 10 a 13; a faixa vai de 9 a 13 e para antes da
   boca (linha 15). Mais alta que isso e ela engole o sorriso. */
.msc-venda{position:absolute;left:0;right:0;
  top:calc(9 * var(--px));height:calc(5 * var(--px));
  background:#1C1915;
  transform:translateY(-190%);opacity:0;
  transition:transform .42s var(--ease-out),opacity .2s linear}
/* uma linha mais clara no meio: em pixel art é o que dá textura de tecido em
   vez de um retângulo chapado. Nada de nó saindo pela lateral — o clip-path do
   mascote corta o que passa da silhueta e sobra uma ponta solta. */
.msc-venda::after{content:"";position:absolute;left:0;right:0;
  top:calc(2 * var(--px));height:var(--px);background:#332E28}
/* ── a cena do cartão ──
   Ele lê os números antes de se vendar. A pupila varre da esquerda para a
   direita como quem acompanha a digitação, e a faixa cai logo atrás — fechada
   por volta do tempo de digitar o sexto dígito.

   É temporizado e não dígito a dígito porque o Stripe não expõe isso: os 16
   números do cartão emitem um único evento `change`, e os campos vivem dentro
   do iframe dele. */
.msc--reage[data-venda="true"] .msc-pup{
  animation:msc-le 1.5s var(--ease-out) both}
@keyframes msc-le{
  0%  {left:calc(3.4 * var(--px));top:calc(12.3 * var(--px))}
  20% {left:calc(4.2 * var(--px));top:calc(12.3 * var(--px))}
  45% {left:calc(5.2 * var(--px));top:calc(12.3 * var(--px))}
  70%,100%{left:calc(6 * var(--px));top:calc(12.3 * var(--px))}}

.msc--reage[data-venda="true"] .msc-venda{
  opacity:1;animation:msc-venda 1s var(--ease-out) .42s both}
@keyframes msc-venda{
  from{transform:translateY(-190%)}
  to{transform:none}}

/* a faixa subindo quando a pessoa esvazia o formulário. Vive num estado
   próprio ("saindo") porque o modal já abre em "false": animar a saída ali
   faria a venda descer e subir sozinha a cada abertura. */
.msc--reage[data-venda="saindo"] .msc-venda{
  opacity:1;animation:msc-venda-sai .46s var(--ease-out) both}
@keyframes msc-venda-sai{
  from{transform:none}
  to{transform:translateY(-190%)}}
/* De olhos vendados ninguém sorri de canto: a boca vira um "o" de espera.
   O seletor precisa do `.mdl-marca` na frente para empatar com as regras de
   humor — sem ele, `.msc--reage[data-humor="feliz"] .msc-boca` (0,3,1)
   ganha de `.msc[data-venda="true"] .msc-boca` (0,2,1) e o sorriso continua
   desenhado embaixo da venda. */
.msc--reage[data-venda="true"] .msc-boca{
  left:calc(9 * var(--px));width:calc(2 * var(--px));
  transition-delay:1.05s}
.msc--reage[data-venda="true"] .msc-boca::before,
.msc--reage[data-venda="true"] .msc-boca::after{opacity:0;transform:scale(.5)}

@media (prefers-reduced-motion:reduce){
  .msc--reage .msc-pup,.msc--reage .msc-boca,
  .msc--reage .msc-boca::before,.msc--reage .msc-boca::after,
  .msc-venda{transition:none}
  .msc--reage[data-venda="true"] .msc-pup,
  .msc--reage[data-venda="true"] .msc-venda,
  .msc--reage[data-venda="saindo"] .msc-venda{animation:none}
  .msc--reage[data-venda="true"] .msc-venda{transform:none}}

.mdl-linha{display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;text-align:left}
.mdl-plano > b{display:block;font-family:var(--font-voz);
  font-variation-settings:var(--voz-eixo);font-size:1.5rem;font-weight:600;
  letter-spacing:-.025em;line-height:1.05}
.mdl-plano em{display:block;font-style:normal;font-size:.75rem;
  color:var(--gray-texto);margin-top:3px}
.mdl-preco{text-align:right;flex:none}
.mdl-preco > b{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.mdl-preco s{font-size:.75rem;color:var(--gray-deco);margin-right:5px}
.mdl-preco i{font-style:normal;font-size:.75rem;color:var(--gray-texto)}
.mdl-nota{display:block;font-size:.75rem;color:var(--gray-texto);margin-top:3px}

/* ── a trilha: dois passos, a linha enchendo no gradiente ── */
.mdl-corpo{padding:20px 22px 22px}
.mdl-trilha{list-style:none;display:flex;align-items:center;
  margin:0 0 20px;padding:0;counter-reset:t}
.mdl-trilha li{display:flex;align-items:center;gap:8px;font-size:.75rem;
  font-weight:600;color:var(--gray-deco);transition:color var(--d-base)}
.mdl-trilha li::before{counter-increment:t;content:counter(t);
  flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.5625rem;
  background:rgba(10,10,11,.06);color:var(--gray-deco);
  transition:background var(--d-base),color var(--d-base)}
.mdl-tr-linha{flex:1;height:2px;margin:0 10px;border-radius:2px;
  background:rgba(10,10,11,.08);position:relative;overflow:hidden}
.mdl-tr-linha::before{content:"";position:absolute;inset:0;width:0;
  background:linear-gradient(90deg,#FFB800,#FF6B35 55%,#FF3D7F);
  transition:width .5s var(--ease-out)}
.mdl-trilha[data-passo="2"] .mdl-tr-linha::before{width:100%}
.mdl-trilha li[data-on="true"]{color:var(--preto)}
.mdl-trilha li[data-on="true"]::before{
  background:linear-gradient(135deg,#FF6B35,#FF3D7F);color:#FFF;
  box-shadow:0 4px 12px -4px rgba(255,107,53,.8)}
.mdl-trilha li[data-ok="true"]{color:var(--gray-body)}
.mdl-trilha li[data-ok="true"]::before{content:"";
  background:var(--preto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M1 3.5 3.3 5.8 8 1.1' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat;
  box-shadow:none}
@media (prefers-reduced-motion:reduce){ .mdl-tr-linha::before{transition:none} }

/* os dois painéis internos */
.mdl-p{display:none}
.mdl-p[data-on="true"]{display:block;animation:entra .32s var(--ease-out) both}
.mdl-h{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin-bottom:2px}
.mdl-d{font-size:.75rem;color:var(--gray-texto);margin-bottom:18px}
.mdl-pe{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:12px;font-size:.6875rem;color:var(--gray-texto);text-align:center}
.mdl-pe b{font-weight:600;color:var(--gray-body);letter-spacing:-.005em}
.mdl-pe--fina{margin-top:5px;font-size:.6875rem;color:var(--gray-texto)}
.mdl-pe--fina b{color:var(--preto);font-weight:600}

/* ── campos com confirmação viva ──
   O check acende no instante em que o campo fica válido. Em formulário de
   pagamento a pessoa quer saber que está indo bem antes de entregar o cartão;
   o silêncio até o clique é o que faz desistir. */
.dados-c{margin-bottom:14px;position:relative}
.dados-c > label{display:block;font-size:.75rem;font-weight:600;margin-bottom:6px}
.dados-in{width:100%;font-family:var(--font-corpo);font-size:.9375rem;
  padding:12px 38px 12px 14px;border:1px solid var(--border-forte);
  border-radius:var(--r-lg);background:#FFF;color:var(--preto);
  transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.dados-in:focus{outline:0;border-color:var(--nucleo-laranja);
  box-shadow:0 0 0 3px rgba(255,107,53,.14)}
.dados-in[aria-invalid="true"]{border-color:var(--error);
  box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.dados-erro{display:block;font-size:.75rem;color:var(--error);margin-top:5px}
.dados-c::after{content:"";position:absolute;right:13px;top:31px;
  width:17px;height:17px;border-radius:50%;
  background:var(--sucesso,#12805C) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M1 3.5 3.3 5.8 8 1.1' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
  opacity:0;transform:scale(.4);pointer-events:none;
  transition:opacity var(--d-fast),transform .3s var(--ease-out)}
.dados-c[data-ok="true"]::after{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){ .dados-c::after{transition:none} }

.mdl-carregando{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:40px 0;color:var(--gray-texto);font-size:.8125rem}
.mdl-carregando .msc{--px:2.4px;animation:msc-volta .82s steps(8,end) infinite}

@media (max-width:520px){
  .mdl{padding:0;place-items:stretch}
  /* `100dvh` e não `100vh`: no Safari do iPhone o `vh` conta a barra de
     endereço como se ela não existisse, e o rodapé do modal fica escondido
     atrás dela. O `100vh` antes é o fallback para quem não tem `dvh`. */
  .mdl-cx{max-width:none;border-radius:0;min-height:100vh;min-height:100dvh}
  /* 28px é alvo de mouse. No dedo, o X precisa dos 44. */
  .mdl-x{top:10px;right:10px;width:44px;height:44px}
  .mdl-voltar{padding:14px}
}

/* ═══════════ PAYMENT ELEMENT ═══════════
   Só os campos de cartão vêm do Stripe; título, resumo e botão são nossos.
   O `appearance` no JS herda estes tokens, então o formulário nasce com a
   tipografia e as cores da marca em vez do azul padrão. */
#pagamento{min-height:172px}
/* enquanto o Element não desenhou, não existe campo nem botão: só o mascote
   girando. Um botão de pagar sobre um formulário vazio parece quebrado, e no
   celular o iframe demora o bastante para isso aparecer. */
#p-cartao[data-carregando="true"] #pagamento{min-height:0;height:0;overflow:hidden}
#p-cartao[data-carregando="true"] .conta-btn,
#p-cartao[data-carregando="true"] .mdl-voltar,
#p-cartao[data-carregando="true"] .mdl-pe{display:none}
.pg-erro{margin-top:12px;padding:11px 13px;border-radius:var(--r-lg);
  background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.25);
  font-size:.8125rem;line-height:1.5;color:var(--error)}
.pg-erro[hidden]{display:none}
.mdl-voltar{width:100%;margin-top:8px;background:none;border:0;cursor:pointer;
  padding:8px;font-family:var(--font-corpo);font-size:.8125rem;color:var(--gray-texto);
  text-decoration:underline;text-underline-offset:3px}
.mdl-voltar[hidden]{display:none}
/* o botão precisa de estado ocupado: dois cliques criariam duas cobranças */
.conta-btn[data-ocupado="true"]{filter:saturate(.4);pointer-events:none}
/* ── o botão que enche ──
   O gradiente avança um terço a cada campo válido. Duas camadas no mesmo
   `background`: o gradiente por cima, limitado por `background-size`, e o
   cinza sólido embaixo aparecendo no que sobra. `--p` vem do JS.

   Enquanto incompleto o gradiente entra pálido e o texto fica escuro. Em cor
   cheia, a palavra que cai em cima da fronteira fica ilegível: metade dela
   sobre laranja saturado, metade sobre cinza claro, e nenhuma cor de texto
   serve para as duas. A cor plena só chega quando a barra enche — e aí o
   texto vira branco de uma vez. */
.conta-btn[data-pronto]{
  background:linear-gradient(135deg,rgba(255,184,0,.42),
             rgba(255,107,53,.48) 42%,rgba(255,61,127,.42)) no-repeat,
             rgba(10,10,11,.1);
  background-size:var(--p,0%) 100%;
  color:var(--preto);box-shadow:none;
  transition:background-size .45s var(--ease-out),color var(--d-base),
             box-shadow var(--d-base)}
.conta-btn[data-pronto="true"]{
  background:linear-gradient(135deg,#FFB800 0%,#FF6B35 42%,#FF3D7F 100%) no-repeat,
             transparent;
  background-size:100% 100%;
  color:#FFF;box-shadow:0 10px 26px -12px rgba(255,107,53,.9)}
.conta-btn[data-pronto="false"]:hover{transform:none}
@media (prefers-reduced-motion:reduce){ .conta-btn[data-pronto]{transition:none} }
/* `.conta-btn{display:flex}` tem especificidade maior que o `[hidden]` da
   folha do navegador, então o atributo não escondia nada: o botão de confirmar
   ficava visível durante o carregamento e no erro, onde clicar chamaria
   confirmPayment sem Element montado. */
.conta-btn[hidden]{display:none}

/* ═══════════ A CONTA DO STACK SEPARADO ═══════════
   Ancoragem, embaixo da grade. Quem chega nesta tela já foi convencido pela
   página de segmento — não precisa ser vendido de novo, precisa que o preço
   pareça barato. E o que faz um preço parecer barato é outro preço do lado. */
.pl-conta{margin-top:var(--sp-8);padding:20px 22px;
  border:1px solid var(--border);border-radius:var(--r-xl);background:#FFF}
.pl-conta-h{font-size:.8125rem;color:var(--gray-body);margin-bottom:14px}
.pl-conta-h b{font-weight:600;color:var(--preto)}

/* `flex` e não `grid`: são onze ferramentas e a grade fechava a última linha
   com células vazias, que apareciam como blocos cinza porque o fundo do
   container é que desenhava as divisórias. */
.pl-conta-g{display:flex;flex-wrap:wrap;gap:8px}
.pl-conta-g span{display:flex;flex-direction:column;gap:1px;
  flex:1 1 118px;padding:9px 11px;background:var(--off-white);
  border:1px solid var(--border);border-radius:var(--r-lg)}
.pl-conta-g b{font-size:.75rem;font-weight:600;color:var(--preto)}
.pl-conta-g em{font-style:normal;font-size:.625rem;color:var(--gray-deco);
  line-height:1.3}
.pl-conta-g i{font-style:normal;font-size:.6875rem;
  color:var(--gray-texto);margin-top:2px}

/* o confronto: os dois números, o segundo com o gradiente da marca */
.pl-conta-p{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin-top:16px;font-size:.8125rem;color:var(--gray-texto)}
.pl-conta-p span{display:flex;align-items:baseline;gap:7px}
.pl-conta-p b{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:1.375rem;font-weight:600;letter-spacing:-.025em;color:var(--gray-body);
  text-decoration:line-through;text-decoration-thickness:1.5px}
.pl-conta-p span:last-child b{text-decoration:none;
  background:linear-gradient(115deg,#FFB800 0%,#FF6B35 44%,#FF3D7F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.1em}
.pl-conta-vs{font-size:.75rem;color:var(--gray-deco)}
.pl-conta-n{margin-top:12px;text-align:center;font-size:.6875rem;
  line-height:1.5;color:var(--gray-deco)}

@media (max-width:760px){
  .pl-conta{padding:16px 14px}
  .pl-conta-g{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .pl-conta-p{gap:8px}
}


/* ═══════════ A SAÍDA PARA OPERAÇÃO GRANDE ═══════════
   Toma o lugar da grade quando o cadastro indica time ou base acima do que o
   Master cobre. Deliberadamente sem preço: o que se oferece aqui é uma
   conversa, e pôr número ao lado convidaria a comparar com os planos que
   acabaram de sumir da tela. */
.pl-call{width:100%;max-width:620px;background:#FFF;
  border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:34px 36px;box-shadow:var(--sh-lg)}
.pl-call[hidden]{display:none}
.pl-call-selo{display:inline-block;margin-bottom:14px;padding:5px 11px;
  border-radius:999px;font-size:.6875rem;font-weight:600;color:#FFF;
  background:linear-gradient(135deg,#FF6B35,#FF3D7F);
  box-shadow:0 6px 16px -8px rgba(255,107,53,.9)}
.pl-call-h{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-size:clamp(1.5rem,1.1rem + 1.2vw,1.875rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.2;margin-bottom:10px}
.pl-call-p{font-size:.9375rem;line-height:1.65;color:var(--gray-body);
  margin-bottom:var(--sp-6)}

.pl-call-bx{padding:20px 22px;border-radius:var(--r-xl);
  background:var(--off-white);border:1px solid var(--border)}
.pl-call-cab{font-size:.8125rem;font-weight:600;color:var(--gray-texto);
  margin-bottom:11px}
.pl-call-bx ul{list-style:none;display:flex;flex-direction:column;gap:9px;
  margin:0;padding:0}
.pl-call-bx li{position:relative;padding-left:24px;font-size:.9375rem;
  line-height:1.5;color:var(--gray-body);
  --cpx:2px;--cor-box:#FF6B35;--cor-check:#FFF}
/* o mesmo check em pixel dos cards, um pouco maior */
.pl-call-bx li::before{content:"";position:absolute;left:0;top:.36em;
  width:var(--cpx);height:var(--cpx);background:transparent;
  box-shadow:
    calc(var(--cpx) * 0) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 0) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 1) 0 0 var(--cor-check),
    calc(var(--cpx) * 6) calc(var(--cpx) * 1) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 2) 0 0 var(--cor-check),
    calc(var(--cpx) * 5) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 2) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 3) 0 0 var(--cor-check),
    calc(var(--cpx) * 2) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 3) 0 0 var(--cor-check),
    calc(var(--cpx) * 4) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 3) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 4) 0 0 var(--cor-check),
    calc(var(--cpx) * 3) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 4) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 5) 0 0 var(--cor-box),
    calc(var(--cpx) * 0) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 1) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 2) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 3) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 4) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 5) calc(var(--cpx) * 6) 0 0 var(--cor-box),
    calc(var(--cpx) * 6) calc(var(--cpx) * 6) 0 0 var(--cor-box)}

.pl-call-n{margin:var(--sp-6) 0 12px;font-size:.8125rem;color:var(--gray-texto)}
@media (max-width:760px){ .pl-call{padding:24px 20px} }


/* ═══════════ AGENDAR NA PRÓPRIA TELA ═══════════
   Sem popup: esta tela já é só sobre marcar a call, e abrir uma janela por
   cima empilharia moldura sem ganhar foco nenhum. As três etapas se revezam
   dentro da mesma caixa. */
.cl-et{display:none}
.cl-et[data-on="true"]{display:block;animation:entra .34s var(--ease-out) both}

.cl-fuso{font-size:.8125rem;color:var(--gray-texto);margin:-4px 0 var(--sp-6)}
.cl-cab{font-size:.8125rem;font-weight:600;color:#B4471F;margin:18px 0 9px}
.cl-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.cl-campos .dados-c:first-child{grid-column:1/-1}

.cl-carregando{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:40px 0;color:var(--gray-texto);font-size:.8125rem}
.cl-carregando .msc{--px:2px;animation:msc-volta .82s steps(8,end) infinite}

/* os dias em fila rolável: numa semana cheia não cabem lado a lado, e quebrar
   em duas linhas faz a fila parecer grade */
/* `overflow-x:auto` (preciso, para rolar os dias) obriga o eixo Y a clipar
   junto — o CSS não deixa um eixo visível e o outro contido. Sem folga aqui, o
   `translateY(-1px)` do hover e a sombra do dia escolhido eram decepados. O
   padding abre o espaço por dentro e a margem negativa devolve a posição, para
   o respiro não virar um degrau abaixo do rótulo "Dia". */
.cl-dias{display:flex;gap:8px;overflow-x:auto;
  padding:6px 2px 8px;margin:-6px -2px -4px;
  scrollbar-width:thin}
/* O calendário era preto e branco no meio de uma página que é toda quente. O
   dia livre já nasce com um fundo levemente laranja — mostra que há vaga antes
   de qualquer clique — e o dia escolhido leva o gradiente da marca. */
.cl-dia{flex:none;min-width:86px;padding:10px 12px;cursor:pointer;
  border:1px solid rgba(255,107,53,.28);border-radius:var(--r-lg);
  background:rgba(255,107,53,.05);
  font-family:var(--font-corpo);line-height:1.3;text-align:center;
  transition:border-color var(--d-fast),background var(--d-fast),
             transform var(--d-fast),box-shadow var(--d-fast)}
.cl-dia em{display:block;font-style:normal;font-size:.75rem;color:#B4471F}
.cl-dia b{display:block;font-size:.9375rem;font-weight:600;color:var(--preto);
  margin-top:1px}
.cl-dia:hover{border-color:var(--nucleo-laranja);
  background:rgba(255,107,53,.12);transform:translateY(-1px)}
.cl-dia[data-on="true"]{border-color:transparent;
  background:linear-gradient(135deg,#FF6B35,#FF3D7F);
  box-shadow:0 8px 20px -10px rgba(255,107,53,.9)}
.cl-dia[data-on="true"] em{color:rgba(255,255,255,.78)}
.cl-dia[data-on="true"] b{color:#FFF}

/* horários em grade de três: em coluna única a lista alongava a página e
   empurrava o botão de confirmar para fora da tela */
.cl-horas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cl-hora{position:relative;padding:12px 8px 12px 26px;cursor:pointer;
  border:1px solid rgba(255,107,53,.26);border-radius:var(--r-lg);
  background:rgba(255,107,53,.045);
  font-family:var(--font-corpo);font-size:.9375rem;font-weight:600;color:var(--preto);
  transition:border-color var(--d-fast),background var(--d-fast),
             color var(--d-fast),transform var(--d-fast)}
/* um ponto à esquerda de cada horário: livre em laranja, escolhido em branco.
   Sem ele, os botões vazios pareciam campo desabilitado. */
.cl-hora::before{content:"";position:absolute;left:11px;top:50%;
  width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--nucleo-laranja);transition:background var(--d-fast)}
.cl-hora:hover{border-color:var(--nucleo-laranja);
  background:rgba(255,107,53,.12);transform:translateY(-1px)}
.cl-hora[data-on="true"]::before{background:#FFF}
.cl-hora[data-on="true"]{color:#FFF;border-color:transparent;
  background:linear-gradient(135deg,#FF6B35,#FF3D7F);
  box-shadow:0 8px 20px -10px rgba(255,107,53,.9)}
.cl-vazio{grid-column:1/-1;font-size:.8125rem;color:var(--gray-texto);padding:10px 0}

.cl-et .conta-btn{margin-top:var(--sp-6)}
.cl-ok{text-align:center}
.cl-ok .conta-mrc{margin-bottom:var(--sp-5)}
.cl-ok .conta-mrc .msc{--px:4px}
.cl-ok-quando{font-size:1rem;font-weight:600;color:var(--preto);
  margin:8px 0 14px}

@media (max-width:640px){
  .cl-campos{grid-template-columns:1fr}
  .cl-horas{grid-template-columns:repeat(2,1fr)}
  /* no dedo, alvo abaixo de 44px erra — e aqui errar significa marcar a call
     no horário de baixo */
  .cl-hora{padding:14px 8px}
  .cl-dia{padding:12px 14px;min-width:92px}
}

/* ── o rodapé legal ──
   Mesmo desenho do rodapé da home (`.rod-base`): faixa da página inteira,
   borda em cima, itens nas pontas. Dentro da coluna dos planos ele parecia
   nota de card; aqui é o que é — o pé da página.

   Recuado de propósito: a função dele é existir e estar a um clique, não
   competir com a decisão. */
/* `align-self:stretch` porque o `body.conta` é um flex coluna com
   `align-items:center`: sem isso o rodapé nasce com a largura do conteúdo, e
   não da página. Sem margem negativa — nesta tela o body não tem padding
   lateral, e compensar um recuo que não existe empurra a faixa para fora e
   cria rolagem horizontal. */
.pl-legal{align-self:stretch;width:100%;margin-top:var(--sp-8);
  border-top:1px solid var(--border);padding:var(--sp-5) 0}
.pl-legal-in{width:100%;max-width:1520px;margin:0 auto;padding:0 var(--sp-5);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;
  font-size:.6875rem;line-height:1.6;color:var(--gray-deco)}
.pl-legal a{color:var(--gray-texto);text-decoration:underline;
  text-underline-offset:2px;transition:color var(--d-fast)}
.pl-legal a:hover{color:var(--nucleo-laranja)}
@media (max-width:760px){
  .pl-legal-in{flex-direction:column;text-align:center;gap:6px}
}

/* ── o escudo da garantia ──
   Três tons, e é isso que faz a forma ler como escudo: com uma cor só o
   contorno some e o desenho vira um coração. A borda escura fecha a silhueta,
   o corpo preenche e o brilho no canto superior esquerdo é a convenção de
   pixel art para volume — a mesma que o mascote usa na pupila.

   Azul de propósito: a página inteira é quente, e o escudo tem de parecer um
   selo à parte, não mais um elemento da marca. Sprite 7×9.

   `inline-block` com `vertical-align` negativo, e não flex: o texto ao lado
   precisa fluir normal, e num flex o ::before sem baseline própria empurraria
   a frase inteira para cima. */
.ic-escudo{position:relative;display:inline-block;
  width:14px;height:18px;
  margin-right:7px;vertical-align:-3px;--epx:2px;
  --esc-borda:#1A47B8; --esc-corpo:#2F6BF0; --esc-brilho:#8FB4FF}
.ic-escudo::before{content:"";position:absolute;left:0;top:0;
  width:var(--epx);height:var(--epx);
  box-shadow:
    calc(var(--epx) * 0) calc(var(--epx) * 0) 0 0 var(--esc-borda),
    calc(var(--epx) * 1) calc(var(--epx) * 0) 0 0 var(--esc-borda),
    calc(var(--epx) * 2) calc(var(--epx) * 0) 0 0 var(--esc-borda),
    calc(var(--epx) * 3) calc(var(--epx) * 0) 0 0 var(--esc-borda),
    calc(var(--epx) * 4) calc(var(--epx) * 0) 0 0 var(--esc-borda),
    calc(var(--epx) * 5) calc(var(--epx) * 0) 0 0 var(--esc-borda),
    calc(var(--epx) * 6) calc(var(--epx) * 0) 0 0 var(--esc-borda),
    calc(var(--epx) * 0) calc(var(--epx) * 1) 0 0 var(--esc-borda),
    calc(var(--epx) * 1) calc(var(--epx) * 1) 0 0 var(--esc-brilho),
    calc(var(--epx) * 2) calc(var(--epx) * 1) 0 0 var(--esc-brilho),
    calc(var(--epx) * 3) calc(var(--epx) * 1) 0 0 var(--esc-corpo),
    calc(var(--epx) * 4) calc(var(--epx) * 1) 0 0 var(--esc-corpo),
    calc(var(--epx) * 5) calc(var(--epx) * 1) 0 0 var(--esc-corpo),
    calc(var(--epx) * 6) calc(var(--epx) * 1) 0 0 var(--esc-borda),
    calc(var(--epx) * 0) calc(var(--epx) * 2) 0 0 var(--esc-borda),
    calc(var(--epx) * 1) calc(var(--epx) * 2) 0 0 var(--esc-brilho),
    calc(var(--epx) * 2) calc(var(--epx) * 2) 0 0 var(--esc-corpo),
    calc(var(--epx) * 3) calc(var(--epx) * 2) 0 0 var(--esc-corpo),
    calc(var(--epx) * 4) calc(var(--epx) * 2) 0 0 var(--esc-corpo),
    calc(var(--epx) * 5) calc(var(--epx) * 2) 0 0 var(--esc-corpo),
    calc(var(--epx) * 6) calc(var(--epx) * 2) 0 0 var(--esc-borda),
    calc(var(--epx) * 0) calc(var(--epx) * 3) 0 0 var(--esc-borda),
    calc(var(--epx) * 1) calc(var(--epx) * 3) 0 0 var(--esc-corpo),
    calc(var(--epx) * 2) calc(var(--epx) * 3) 0 0 var(--esc-corpo),
    calc(var(--epx) * 3) calc(var(--epx) * 3) 0 0 var(--esc-corpo),
    calc(var(--epx) * 4) calc(var(--epx) * 3) 0 0 var(--esc-corpo),
    calc(var(--epx) * 5) calc(var(--epx) * 3) 0 0 var(--esc-corpo),
    calc(var(--epx) * 6) calc(var(--epx) * 3) 0 0 var(--esc-borda),
    calc(var(--epx) * 0) calc(var(--epx) * 4) 0 0 var(--esc-borda),
    calc(var(--epx) * 1) calc(var(--epx) * 4) 0 0 var(--esc-corpo),
    calc(var(--epx) * 2) calc(var(--epx) * 4) 0 0 var(--esc-corpo),
    calc(var(--epx) * 3) calc(var(--epx) * 4) 0 0 var(--esc-corpo),
    calc(var(--epx) * 4) calc(var(--epx) * 4) 0 0 var(--esc-corpo),
    calc(var(--epx) * 5) calc(var(--epx) * 4) 0 0 var(--esc-corpo),
    calc(var(--epx) * 6) calc(var(--epx) * 4) 0 0 var(--esc-borda),
    calc(var(--epx) * 0) calc(var(--epx) * 5) 0 0 var(--esc-borda),
    calc(var(--epx) * 1) calc(var(--epx) * 5) 0 0 var(--esc-corpo),
    calc(var(--epx) * 2) calc(var(--epx) * 5) 0 0 var(--esc-corpo),
    calc(var(--epx) * 3) calc(var(--epx) * 5) 0 0 var(--esc-corpo),
    calc(var(--epx) * 4) calc(var(--epx) * 5) 0 0 var(--esc-corpo),
    calc(var(--epx) * 5) calc(var(--epx) * 5) 0 0 var(--esc-corpo),
    calc(var(--epx) * 6) calc(var(--epx) * 5) 0 0 var(--esc-borda),
    calc(var(--epx) * 1) calc(var(--epx) * 6) 0 0 var(--esc-borda),
    calc(var(--epx) * 2) calc(var(--epx) * 6) 0 0 var(--esc-corpo),
    calc(var(--epx) * 3) calc(var(--epx) * 6) 0 0 var(--esc-corpo),
    calc(var(--epx) * 4) calc(var(--epx) * 6) 0 0 var(--esc-corpo),
    calc(var(--epx) * 5) calc(var(--epx) * 6) 0 0 var(--esc-borda),
    calc(var(--epx) * 2) calc(var(--epx) * 7) 0 0 var(--esc-borda),
    calc(var(--epx) * 3) calc(var(--epx) * 7) 0 0 var(--esc-corpo),
    calc(var(--epx) * 4) calc(var(--epx) * 7) 0 0 var(--esc-borda),
    calc(var(--epx) * 3) calc(var(--epx) * 8) 0 0 var(--esc-borda)}

/* ── o pixel que ronda por dentro ──
   Um quadrado claro percorrendo o anel logo DENTRO da borda, devagar. No
   contorno escuro o brilho quase sumia — o azul da borda é fundo demais para
   um pixel claro se destacar; contra o corpo ele aparece.

   O caminho é montado a partir do próprio desenho (o miolo que encosta na
   borda, em sentido horário), para a rota nunca descolar da forma se o sprite
   mudar.

   `steps(1)` em cada quadro: o pixel tem de SALTAR de casa em casa.
   Interpolar entre posições daria um borrão deslizando, que é o oposto de
   pixel art. */
.ic-escudo::after{content:"";position:absolute;width:var(--epx);height:var(--epx);
  background:#EAF2FF;box-shadow:0 0 5px rgba(220,233,255,.95);
  animation:esc-ronda 4.4s steps(1,end) infinite}
@keyframes esc-ronda{
  0.00%{left:calc(var(--epx) * 1);top:calc(var(--epx) * 1)}
  6.25%{left:calc(var(--epx) * 2);top:calc(var(--epx) * 1)}
  12.50%{left:calc(var(--epx) * 3);top:calc(var(--epx) * 1)}
  18.75%{left:calc(var(--epx) * 4);top:calc(var(--epx) * 1)}
  25.00%{left:calc(var(--epx) * 5);top:calc(var(--epx) * 1)}
  31.25%{left:calc(var(--epx) * 5);top:calc(var(--epx) * 2)}
  37.50%{left:calc(var(--epx) * 5);top:calc(var(--epx) * 3)}
  43.75%{left:calc(var(--epx) * 5);top:calc(var(--epx) * 4)}
  50.00%{left:calc(var(--epx) * 5);top:calc(var(--epx) * 5)}
  56.25%{left:calc(var(--epx) * 4);top:calc(var(--epx) * 6)}
  62.50%{left:calc(var(--epx) * 3);top:calc(var(--epx) * 7)}
  68.75%{left:calc(var(--epx) * 2);top:calc(var(--epx) * 6)}
  75.00%{left:calc(var(--epx) * 1);top:calc(var(--epx) * 5)}
  81.25%{left:calc(var(--epx) * 1);top:calc(var(--epx) * 4)}
  87.50%{left:calc(var(--epx) * 1);top:calc(var(--epx) * 3)}
  93.75%{left:calc(var(--epx) * 1);top:calc(var(--epx) * 2)}
  100%{left:calc(var(--epx) * 1);top:calc(var(--epx) * 1)}}
@media (prefers-reduced-motion:reduce){ .ic-escudo::after{display:none} }

/* ══════════════════════════════════════════════════════════════
   AGENDAR O ONBOARDING NA TELA DE PARABÉNS  (v34)
   O passo 2 deixa de ser um aviso ("o gerente chama") e vira a ação.
   O calendário abre dentro do próprio item da lista — sem popup, porque
   a pessoa acabou de sair de um e voltar a abrir janela cansa.
   ══════════════════════════════════════════════════════════════ */
.ok-abrir{margin-top:11px;font-family:var(--font-corpo);font-size:.8125rem;
  font-weight:600;color:#B4471F;background:#FFF3EC;border:1px solid #FBD9C6;
  border-radius:var(--r-lg);padding:8px 14px;cursor:pointer;
  transition:background .16s,border-color .16s,transform .16s}
.ok-abrir:hover{background:#FFE8DA;border-color:#F6C3A6}
.ok-abrir:active{transform:translateY(1px)}
.ok-abrir[hidden]{display:none}

.ok-cal{margin-top:14px;padding-top:15px;border-top:1px solid var(--border);
  animation:entra .3s var(--ease-out) both}
.ok-cal[hidden]{display:none}
.ok-cal .cl-cab:first-of-type{margin-top:0}
.ok-cal .conta-btn{margin-top:14px}

/* marcado: o item inteiro esverdeia e o ícone vira um check */
#ok-passo2[data-feito="true"]{border-color:#B8E0CE;background:#F4FBF8}
#ok-passo2[data-feito="true"] .ok-ic{filter:hue-rotate(108deg) saturate(.85)}

@media (max-width:520px){
  .ok-abrir{width:100%;padding:11px 14px;font-size:.875rem}
}