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-v2.css

@@ -16,7 +16,7 @@ h1,h2,h3,h4{font-family:"Inter",sans-serif}
 html[data-rota="inicio"] :is(#passos,#foco,#qual,#prev,#carr,.checkout,#carrVazio),
 html[data-rota="produto"] :is(.hero2,.etapas2,#cards,#carr,.checkout,#carrVazio,#info),
 html[data-rota="carrinho"] :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info,.pagCab,.pagResumo){display:none!important}
-html[data-rota="pagamento"] :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info,#carr,#carrVazio,#desfazer){display:none!important}
+html:is([data-rota="pagamento"],[data-rota="pix"]) :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info,#carr,#carrVazio,#desfazer){display:none!important}
 html[data-sem-itens] #carr{display:none!important}
 html:not([data-rota="inicio"]) #envio{padding-top:0;padding-bottom:64px;min-height:70vh}
 #envio,#foco,#qual,#prev,#checkoutStatus{scroll-margin-top:var(--topo-passos,128px)}
@@ -223,22 +223,44 @@ section+section{border-top:0}
 #bMais{height:46px;border-radius:var(--raio2);font-family:"Inter",sans-serif;font-weight:600}
 .checkout{max-width:760px;margin:20px auto 0}
 .checkout #checkoutStatus:not(:empty){padding:16px 18px;border-radius:var(--raio);background:var(--verde-fundo);border:1px solid #BFE6CE;color:#14532D;font-size:15px}
-#checkoutActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
-#checkoutActions button{height:48px!important;padding:0 20px!important;margin:0!important;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:15px}
+#checkoutActions{margin-top:12px}
 #checkoutActions input{height:44px;border-radius:var(--raio2);border:1px solid #D6D6D6;padding:0 12px}
-/* The payment page */
-html[data-rota="pagamento"] .checkout{margin-top:8px}
-.pagCab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
+/* The payment pages: paying on the left, the order summary on the right */
+html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;margin-top:8px}
+html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
+.pagCab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
 .pagCab h3{font-size:26px;font-weight:800;letter-spacing:-.02em}
 .pagVolta{font-size:14px;color:var(--texto2)}
-.pagResumo{border:1px solid var(--linha);border-radius:16px;background:#fff;padding:18px 20px;margin-bottom:16px}
+.pagEsq h4{font-size:17px;font-weight:800;margin-bottom:12px}
+.pagNota{font-size:14px;color:var(--texto2);margin:4px 0 16px;line-height:1.5}
+.pagResumo{position:sticky;top:var(--topo-passos,128px);border:1px solid var(--linha);border-radius:16px;background:#fff;padding:20px 22px}
+.pagResumo h4{font-size:17px;font-weight:800;margin-bottom:10px}
 .pagResumo .l{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0}
 .pagResumo .l span{color:var(--texto2)}
 .pagResumo .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #EFEFEF;margin-top:10px;padding-top:12px}
-.pagResumo .tot b{font-size:26px}
-#checkoutActions .metodo{background:#fff;border:2px solid var(--linha);color:var(--preto);min-width:180px}
-#checkoutActions .metodo[aria-pressed="true"]{border-color:var(--laranja);background:var(--aviso-fundo)}
-#checkoutActions .area{flex-basis:100%}
+.pagResumo .tot b{font-family:"Inter",sans-serif;font-weight:900;font-size:24px}
+.metodos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}
+.metodo{height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border:2px solid var(--linha);border-radius:var(--raio2);background:#fff;color:var(--preto);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;text-align:left;cursor:pointer}
+.metodo::before{content:"";width:18px;height:18px;flex-shrink:0;border-radius:50%;border:2px solid #B5B8BD;box-sizing:border-box}
+.metodo[aria-checked="true"]{border-color:var(--laranja);background:var(--aviso-fundo)}
+.metodo[aria-checked="true"]::before{border:6px solid var(--laranja)}
+.pagBtn{height:48px;padding:0 24px;margin:0 10px 0 0;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:15px;cursor:pointer}
+.pagBtn:hover:not(:disabled){background:#FFB53D}
+.pagBtn:disabled{background:#EDEDED;color:#8A8D92;cursor:default}
+.pagBtn.sec{background:#fff;border:1px solid #D6D6D6}
+.pixBox{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
+.pixBox img{border:1px solid var(--linha);border-radius:12px;padding:8px;background:#fff}
+.pixBox .codigo{display:flex;gap:10px;width:100%}
+.pixBox .codigo input{flex:1;min-width:0;font-size:13px}
+.pixBox .aguarda{font-size:14px;color:var(--texto2)}
+.confirmado{border:1px solid #BFE6CE;background:var(--verde-fundo);border-radius:16px;padding:24px}
+.confirmado h4{font-size:22px;color:#14532D;margin-bottom:8px}
+.confirmado p{font-size:15px;color:#14532D;margin-bottom:18px;line-height:1.5}
+@media(max-width:820px){
+  html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{grid-template-columns:1fr;gap:20px}
+  .pagResumo{position:static;order:-1}
+  .metodos{grid-template-columns:1fr}
+}
 
 /* Price and benefits */
 .info2{background:var(--cinza);padding:64px 0}