feat: two-column payment page with card by default and PIX on its own page

The payment page puts paying on the left and the order summary on the
right (above it on phones). Card is preselected and paid on the page with
Mercado Pago's form, in the Site's colours and with the order's e-mail;
choosing PIX shows a Pagar button that opens /pagamento/pix with the QR code
and copy-and-paste code, waiting there for the confirmation. A confirmed
payment shows "Pagamento confirmado" with the order number and a button to
the customer's orders. The payment buttons no longer restyle every button
inside the form.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/site-steps.js

@@ -12,6 +12,7 @@ function tituloPagina(){
   const p=paginaDe(location.pathname);
   if(p.pagina==='carrinho') return 'Carrinho · DTF Dropstar';
   if(p.pagina==='pagamento') return 'Pagamento · DTF Dropstar';
+  if(p.pagina==='pix') return 'Pagamento com PIX · DTF Dropstar';
   if(p.pagina==='produto') return MODOS[p.modo].tit+' · DTF Dropstar';
   return TITULO_INICIO;
 }
@@ -92,7 +93,7 @@ function vaiPara(url){
     passos.hidden = r==='inicio' || carrinhoVazio;
     alturas();
     if(!passos.hidden){
-      const atual = r==='produto' ? 1 : r==='pagamento' ? 3 : 2;
+      const atual = r==='produto' ? 1 : r==='pagamento' || r==='pix' ? 3 : 2;
       passos.querySelectorAll('[data-passo]').forEach(a=>{
         const n=Number(a.dataset.passo);
         a.classList.toggle('atual',n===atual); a.classList.toggle('feito',n<atual);