/* ===========================================================================
   O PIX NA TELA — o desenho do checkout do COMPRADOR.

   Nasceu para ser compartilhado com `assinar.html`, o checkout do plano, e
   deixou de ser: são duas vendas diferentes e elas não podem se parecer. Em
   `pagar.html` quem vende é o CLIENTE e a Soan.ia só processa — a página é
   clara e neutra de propósito, para não roubar a marca de quem vende. No
   `assinar.html` quem vende é a Soan.ia, e ele veste o que o login e o
   cadastro vestem.

   O arquivo fica separado mesmo servindo a uma página só: o desenho do
   pagamento é a parte desta tela que mais muda, e mexer nele sem abrir as 700
   linhas do checkout é o que ele compra.
   =========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
body{background:#eceeea;font-family:"Inter",system-ui,sans-serif;color:#171717;
  -webkit-font-smoothing:antialiased;padding:26px 16px 60px}
/* Sem a linha de marca no topo, o bilhete precisa do respiro que ela ocupava. */
.palco{max-width:640px;margin:0 auto;padding-top:8px}

.etapa{display:none}
.etapa.on{display:block}

/* ------------------------------------------------------------------- pix */
.pix-topo{text-align:center;padding:26px 22px 4px}
.pix-topo h1{font-size:19px;font-weight:700;letter-spacing:-.02em}
.pix-topo p{margin-top:6px;font-size:13.5px;color:#8a8a8a;line-height:1.5}

.pix-relogio{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  padding:6px 13px;border-radius:999px;background:#fff5e6;color:#9a6a00;
  font-size:12.5px;font-weight:600}
.pix-relogio.acabando{background:#fdecec;color:#c0392b}
.pix-relogio b{font-variant-numeric:tabular-nums}

/* O lugar do QR. Fica marcado como o que é: o código vem do banco no momento
   do pagamento, com a chave do recebedor e o txid da transação. Desenhar um
   quadriculado decorativo aqui seria pior que o espaço vazio — ninguém aponta
   a câmera para um protótipo, e o erro atravessaria até o dia em que alguém
   apontasse. */
.qr-lugar{width:212px;height:212px;margin:20px auto 0;border-radius:14px;
  border:1.5px dashed #cfd2cb;background:#fafbf9;
  display:grid;place-items:center;text-align:center;padding:20px;gap:9px}
.qr-lugar svg{width:34px;height:34px;stroke:#a9aca4;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.qr-lugar span{font-size:12px;color:#8a8a8a;line-height:1.45}

.copia{margin-top:20px}
.copia .rot{font-size:12.5px;font-weight:600;color:#3d3d3d;margin-bottom:7px;display:block}
.copia .campo{display:flex;gap:8px}
.copia code{flex:1;min-width:0;padding:12px 13px;border:1px solid #e6e6e6;border-radius:10px;
  background:#f7f7f8;font-family:ui-monospace,"SF Mono",monospace;font-size:12px;
  color:#3d3d3d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copia button{flex:none;padding:0 18px;border:none;border-radius:10px;background:#12181b;
  color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.14s}
.copia button:hover{filter:brightness(1.25)}
.copia button.feito{background:#12b914}

.aguardando{display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:22px;padding:14px;border-radius:12px;background:#f7f7f8;
  font-size:13.5px;color:#3d3d3d}
.girando{width:15px;height:15px;flex:none;border:2px solid #d8dbd4;
  border-top-color:#12b914;border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.girando{animation-duration:2.4s}}

.demo{margin-top:14px;padding:11px 14px;border-radius:10px;background:#fff8e6;
  border:1px solid #f0e0b8;font-size:12px;color:#6b4f22;line-height:1.5}