# Diretrizes para o Agente

Leia também `README.md` ao abrir este repositório (local ou VPS). Trabalhe **somente** em `painel-ecommerce`. Não edite o projeto `mercadopago`.

## PDP do produto

A página pública do produto é apenas **`cliente/checkout/produto.html`** (dados via `admin/api/produtos-public.php`).

No espelho desktop **`cliente/desktop/teste-versao-desktop.html`**, dentro de `.teste-buy-card`, os botões **«Comprar agora»** e **«Adicionar ao carrinho»** ficam com **`width/max-width: 100%`** da caixa de conteúdo do card (alinhados ao bloco de quantidade), **sem padding lateral nos botões**, **sem margens negativas** (não devem vazar para fora do `.teste-buy-card`). Detalhe em `cliente/desktop/css/teste-versao-desktop.css`.

---

## Fluxo de Checkout (PIX vs Cartão)

O checkout tem **dois fluxos distintos** com telas e loading diferentes:

### PIX – `revisao-pagamento.html`
- Fluxo de loading com **cor verde** (#00A650)
- Overlays: spinner → progresso 0–100% com círculo verde, texto "Já é quase sua!", 3 pontos brancos
- Redirecionamento para **checkout-pix.html**

### Cartão – `revisao-pagamentocard.html`
- Fluxo de loading com **cor laranja** (#FF6B00)
- Overlays: spinner → progresso com **stroke azul** (#3483fa), ícone **"!"** em círculo laranja (não 3 pontos)
- Animação do ícone: fade-in (sem scale que gera halo); `box-shadow: none`
- Redirecionamento para **card-recusado.html**

### Páginas de destino
| Método | Página destino |
|--------|----------------|
| PIX | `cliente/checkout/checkout-pix.html` |
| Cartão | `cliente/checkout/card-recusado.html` |

### Arquivos principais
- `cliente/checkout/revisao-pagamento.html` – Revisão e confirmação PIX
- `cliente/checkout/revisao-pagamentocard.html` – Revisão e confirmação cartão
- `cliente/checkout/checkout-pix.html` – Destino após confirmação PIX
- `cliente/checkout/card-recusado.html` – Destino após confirmação cartão

### Mobile freeze (não alterar mobile sem pedido explícito)

Regras em `.cursor/rules/*-mobile-freeze.mdc`. Desktop (≥ 992px) usa CSS dedicado e o chrome `#seguro-desktop-chrome` + `#seguro-desktop-site-footer` alinhados a `forma-entrega.html`.