Checkout Sanar con Sabor v2

Checkout Sanar con Sabor, versão 2

Todo o conteúdo do checkout atual está aqui, palavra por palavra: título, mensagem da Mary, benefícios, cupom com contador, campos, selos, garantia, tabela con/sin, avaliações, depoimentos e as 7 dúvidas. O que mudou foi só o design e o layout.

Pagar antes de rolarNo celular, logo depois do título vem a oferta com o formulário. A mensagem da Mary, os benefícios e toda a prova descem para baixo do pagamento, sem cortar nada.

Oferta com pesoPreço em destaque com o selo do cupom em formato de cupom, total em faixa própria e um botão maior, com ícone desenhado no lugar do emoji.

Desktop em duas colunasArgumento à esquerda, pagamento fixo à direita, sempre visível enquanto ela lê depoimentos e dúvidas.

Confiança agrupadaBandeiras, selo Stripe e as três garantias organizados em blocos, em vez de linhas soltas de texto pequeno.

O que mudou no design

Elemento	Hoje	Na v2	Por quê
Topo	Header, faixa vermelha e barra de passos somam três faixas altas antes do título.	Header mais baixo; contador vira faixa fina que gruda no topo ao rolar; passos em linha compacta.	O contador continua sempre visível, ocupando menos altura
Ordem no celular	Título, mensagem da Mary e benefícios antes do preço; o formulário só aparece depois de quase duas telas.	Título, depois oferta e formulário; mensagem da Mary e benefícios logo abaixo do pagamento. No desktop a ordem de leitura continua a original, com o pagamento fixo ao lado.	Quem chega do quiz já decidiu; o checkout é tarefa, não página de vendas
Bloco de oferta	Preço, selo do cupom e "pago único" em linhas separadas dentro do card.	Faixa de oferta no topo do card de pagamento: preço riscado, cupom com recorte de ticket, preço grande e "pago único".	Uma leitura só: de quanto, por quanto, por quê
Total e botão	Total em linha simples; botão com emoji ✅.	Total em faixa própria; botão mais alto com o mesmo texto e um check desenhado.	Emoji renderiza diferente em cada aparelho; ícone desenhado fica igual em todos
Selos	Bandeiras, selo Stripe e três garantias em texto corrido pequeno.	Bandeiras em linha, selo Stripe em pílula, garantias em três blocos com ícone.	Leitura de confiança em um olhar, perto do botão
Garantia	Caixa com borda verde lateral grossa.	Selo redondo "7 días" com o mesmo texto.	Selo comunica garantia antes da leitura
Avaliações	Nota e depoimentos num card único.	Mesmo conteúdo, nota em destaque e cada depoimento com cabeçalho alinhado (iniciais, estado, Verificada).	Ritmo de leitura uniforme entre os quatro
Desktop	Coluna única de 440 px no centro.	Duas colunas, pagamento fixo à direita.	Padrão Stripe Checkout e Shopify; o botão nunca sai da tela
Order bump	Não existe.	Opcional, no toggle acima. Desligado por padrão.	monetizacao-de-checkout, camada 3 opcional

Movimento e 3D

Momento	O que acontece	Por quê
Livro do recetario	Capa em 3D feita em CSS acima do preço. No desktop, inclina levemente com o mouse; no celular fica parada.	Mostra que existe um produto de verdade, sem pesar a página. Three.js somaria mais de 600 KB de JavaScript no checkout e atrasaria o carregamento no 4G; o mesmo efeito em CSS custa zero
Desconto aplicado	Quando a oferta aparece: o risco vermelho passa sobre R$ 109, o selo do cupom entra e o preço desce de 109 até 49. Roda uma vez só.	É o único momento de impacto da página e conta a história da oferta. Momento raro, então pode ser expressivo (Jakub)
Correo e cartão	Check verde quando o correo está válido; número do cartão separado em blocos de 4.	Feedback de que ela está fazendo certo, sem animação longa
Botão	Encolhe 3% no toque; ao pagar, mostra "Procesando tu pago" com indicador girando e trava clique duplo.	Resposta física ao toque e proteção contra cobrança duplicada
Order bump	Ao marcar, a borda fica sólida verde e o total sobe contando.	Confirma a escolha e mostra o novo valor
Contador	Os números trocam sem animação; no último minuto o fundo do tempo fica branco.	Muda a cada segundo, então animar cansaria. Sem pulsar: pisca-pisca vira ruído (Emil)
Dúvidas e barra fixa	Respostas abrem com altura suave; a barra fixa entra em 320 ms e sai mais rápido.	Continuidade sem chamar atenção
Sem movimento	Título, mensagem da Mary, depoimentos e tabela não animam ao rolar.	Conteúdo que é lido não deve se mexer. Quem usa "reduzir movimento" no celular vê tudo parado

Pontos pra você decidir (não mexi no mockup)

Recomendações das skills, mantidas fora do layout

Depoimentos e nota "4,9 · 3.070 compradoras". Se vierem de clientes reais com autorização, ótimo. Se não, a skill de checkout e a de prova recomendam trocar por prova real, porque prova inventada é motivo de reprovação na Meta.
Glicose. "Mi glucosa no se movió" e "mantener tu azúcar estable" são claims de saúde que a Meta e a Stripe costumam barrar. A dúvida sobre diabetes já tem a ressalva certa ("no reemplaza lo que te indique tu médico").
Moeda. Daqui do Brasil o checkout aparece em reais. Vale confirmar o que o público do México, Chile e Espanha enxerga.
Contador. A skill de checkout registra que no LATAM o checkout limpo costuma converter melhor. Vale um A/B com e sem a faixa.

Notas para o Kaynan implementar

Stripe

Componentes

Express Checkout Element no lugar do botão de carteira: mostra Apple Pay ou Google Pay conforme o aparelho.
Card de pagamento com position: sticky no desktop.
Manter setup_future_usage: off_session e o aviso de cartão salvo.

Bump

Se ligar o bump

Com o fluxo de intent diferido, o checkbox chama elements.update({ amount }) e o servidor cria o PaymentIntent com o valor final.
Total, botão, barra fixa e aviso legal leem do mesmo estado.

Detalhes

Acabamento

Inputs com font-size: 16px (o iOS não dá zoom).
Header: "Chef. Mary" tem um ponto sobrando.
Bandeiras e foto da Mary já usam os arquivos de /static/img do próprio checkout.