Checkout Pix

Tenho o modelo "Checkout Pix" da Modelos Prontos na pasta checkout-pix/ (index.html, estilo.css, script.js e LEIAME.md). Quero adaptá-lo à minha marca.

Minha marca:
- Nome: [nome]
- Cor principal: [hex] · cor de apoio: [hex]
- Fonte: [nome da fonte ou "manter"]
- Tom dos textos: [ex.: direto e amigável]

O que fazer:
1. Leia o LEIAME.md e o estilo.css; troque as cores e fontes pelas variáveis do :root (não espalhe cores soltas pelo CSS).
2. Troque os textos de exemplo pelos meus, em português do Brasil.
3. Coloque meu logo: [cole o SVG aqui ou diga o arquivo].
4. Mantenha animações, acessibilidade (contraste AA, foco visível) e prefers-reduced-motion.
5. Abra o index.html no navegador e confira em 1440px e 390px, sem rolagem horizontal.
Me mostre um resumo do que mudou.

Quero colocar o modelo "Checkout Pix" (pasta checkout-pix/: index.html, estilo.css, script.js) dentro do meu projeto.

Meu projeto usa: [React + Vite / Next.js (App Router) / Vue / WordPress / HTML puro] e [Tailwind / CSS Modules / CSS comum].
Onde colocar: [página ou componente, ex.: src/pages/Login.tsx].

O que fazer:
1. Leia o LEIAME.md e entenda HTML, CSS e JS do modelo.
2. Transforme em componente(s) do meu framework, mantendo o mesmo visual e TODO o comportamento (animações, teclado, toque).
3. Mantenha o CSS com as classes prefixadas (evita conflito) ou converta para o padrão do meu projeto, sem perder nada.
4. Troque manipulação direta do DOM por estado/efeitos do framework quando fizer sentido; limpe listeners e timers ao desmontar.
5. Rode o projeto, abra a página e confira no desktop e no celular.
Liste os arquivos criados e alterados.

Quero usar o "Checkout Pix" na minha loja de verdade.

Meus produtos vêm de: [API / Supabase / planilha / lista fixa]. Pagamento por: [Asaas / Mercado Pago / Stripe / ainda não sei].

O que fazer:
1. Leia o LEIAME.md e o script.js e localize os dados de exemplo e os pontos marcados para integração.
2. Carregue os produtos reais mantendo as animações e os valores em pt-BR.
3. Prepare o envio do pedido para um endpoint de backend (nunca calcule preço final só no navegador).
4. Se eu escolhi um gateway, crie o endpoint de checkout (Edge Function ou rota de API) e explique o webhook para confirmar o pagamento.
Ao final, liste os arquivos alterados e o passo a passo para testar.

Revise o modelo "Checkout Pix" que adaptei (pasta checkout-pix/) antes de eu publicar:
1. Abra no navegador em 1440px, 768px e 390px: nada cortado, sobreposto ou com rolagem horizontal.
2. Navegue só pelo teclado (Tab, Enter, Esc, setas): tudo alcançável e com foco visível.
3. Contraste AA nos textos e botões; aria-label nos ícones; mensagens de erro anunciadas.
4. Console sem erros; sem console.log esquecido; sem recursos externos além das fontes.
5. Com "reduzir movimento" ligado no sistema, a tela continua bonita e usável.
Corrija o que encontrar e me diga o que foi corrigido.