/* 2026-10-19 (pedido do dono): páginas de conteúdo no visual novo (como comprar, vender, trade seguro, guia da arena) */
.artigo .embrulho { max-width: 920px; }
.migalha { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.migalha a { color: var(--muted); text-decoration: none; } .migalha a:hover { color: var(--primary); }
.selo-pg { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #946200; background: #FFF0C7; padding: 4px 10px; border-radius: 99px; margin-bottom: 10px; }
.artigo .pg-cab h1 b { color: var(--primary); }
.artigo .pg-cab .btn { margin-top: 16px; }
.art-sec { margin-top: 36px; }
.art-sec h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 16px; }
.art-passos { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 10px; }
.art-passos li { counter-increment: p; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.art-passos li::before { content: counter(p); grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.art-passos b { font-size: 16px; } .art-passos span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.art-ok { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.art-ok li { position: relative; padding-left: 30px; line-height: 1.5; }
.art-ok li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.art-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.art-card { padding: 18px; } .art-card h3 { margin: 0 0 6px; font-size: 16px; } .art-card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.art-cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; background: linear-gradient(135deg, var(--primary-soft), #fff); }
.art-cta b { display: block; font-size: 18px; } .art-cta span { color: var(--muted); }
.artigo .faq { margin: 0; max-width: none; }
@media (max-width: 560px) { .art-cta .btn { width: 100%; } .art-passos li { padding: 14px; } }

/* ── 2026-10-19: página do pedido (/pedido/CODIGO) ── */
.ped { padding: 40px 0 64px; }
.ped .embrulho { max-width: 620px; }
.ped-caixa { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sombra); padding: 24px; display: grid; gap: 20px; }
.ped-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ped-cab small { display: block; color: var(--muted); font-weight: 700; font-size: 13px; }
.ped-cab b { font-size: 26px; letter-spacing: .02em; }
.ped-resumo { display: flex; align-items: center; gap: 12px; background: var(--soft); border-radius: 14px; padding: 14px 16px; font-weight: 700; }
.ped-resumo img { width: 28px; height: 28px; flex-shrink: 0; }
.ped-resumo span { color: var(--muted); font-weight: 600; }
.ped-passos { list-style: none; margin: 0; padding: 0; display: grid; }
.ped-passos li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding-bottom: 22px; }
.ped-passos li:last-child { padding-bottom: 0; }
.ped-passos li::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.ped-passos li:last-child::before { display: none; }
.ped-passos li.feito::before { background: var(--ok); }
.ped-bola { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--soft); color: var(--muted); border: 2px solid var(--line); position: relative; z-index: 1; }
.ped-passos li.feito .ped-bola { background: var(--ok); border-color: var(--ok); color: #fff; }
.ped-passos li.agora .ped-bola { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 6px var(--primary-soft); }
.ped-passos li > div > b { display: block; font-size: 16px; line-height: 32px; }
.ped-passos li:not(.feito):not(.agora) > div > b { color: var(--muted); }
.ped-passos li > div > p { margin: 0; color: var(--muted); font-size: 14.5px; }
.ped-passos li.agora > div > p { color: var(--ink); }
.ped-acao { display: grid; gap: 10px; }
.ped-acao:empty { display: none; }
.ped-acao .btn { width: 100%; justify-content: center; }
.ped-pix { display: grid; justify-items: center; gap: 10px; }
.ped-pix img { width: 200px; height: 200px; border-radius: 12px; border: 1px solid var(--line); }
.ped-pix textarea { width: 100%; height: 64px; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: 12px/1.4 monospace; color: var(--ink); background: var(--soft); }
.ped-erro { margin: 0; color: #B42318; font-weight: 600; }
.ped-ajuda { text-align: center; color: var(--muted); margin-top: 18px; font-size: 14.5px; }
.ped-ajuda a { color: var(--primary); font-weight: 700; }
@media (max-width: 480px) { .ped { padding-top: 24px; } .ped-caixa { padding: 18px; border-radius: 16px; } .ped-cab b { font-size: 22px; } }
/* 2026-10-19 (pedido do dono): "algo girando" — a etapa atual tem um anel girando (o cliente vê que está andando) */
.ped-passos li.agora .ped-bola::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid transparent;
  border-top-color: var(--primary); border-right-color: var(--primary); animation: pedGira 1s linear infinite; }
@keyframes pedGira { to { transform: rotate(360deg); } }
@keyframes pedPontos { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.ped-passos li.ped-carrega { display: flex; grid-template-columns: none; padding-bottom: 0; align-items: center; gap: 12px; color: var(--muted); font-weight: 600; padding: 8px 0; }
.ped-passos li.ped-carrega::before { position: static; display: block; background: none; content: ''; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: pedGira .9s linear infinite; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .ped-passos li.agora .ped-bola::after, .ped-passos li.ped-carrega::before { animation-duration: 3s; } }
/* 2026-10-20: pedido novo no cartão (login pelo WhatsApp e CPF na própria página do pedido) */
.ped-codigo { display: grid; justify-items: center; gap: 4px; padding: 16px; border-radius: 16px; border: 2px solid #25D366; background: #F4FFF8; animation: pedCodGlow 1.8s ease-in-out infinite; }
.ped-codigo small { color: #0B6E3A; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ped-codigo strong { font-size: 30px; letter-spacing: .12em; color: #075E54; font-weight: 800; }
@keyframes pedCodGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5), 0 0 10px rgba(37, 211, 102, .3); } 50% { box-shadow: 0 0 0 6px rgba(37, 211, 102, .15), 0 0 24px rgba(37, 211, 102, .55); } }
.ped-dica { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.ped-cpf { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; font: 700 18px var(--fonte); letter-spacing: .06em; color: var(--ink); background: #fff; }
.ped-cpf:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.ped-carrega-txt { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-weight: 600; padding: 10px 0; }
.ped-carrega-txt::before { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: pedGira .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ped-codigo { animation: none; } }
/* 2026-10-20: pedido de teste (#teste no personagem) */
.ped-teste { background: repeating-linear-gradient(135deg, #FFF6E0 0 14px, #FFEFC7 14px 28px); border: 2px dashed #E9A100; color: #6B4A00; font-weight: 800; text-align: center; padding: 12px 14px; border-radius: 14px; }
/* 2026-10-20: QR com o logo da Dash no meio + anel azul girando enquanto espera o pagamento */
.ped-qr { position: relative; width: 210px; height: 210px; }
.ped-qr > img { width: 210px; height: 210px; border-radius: 12px; border: 1px solid var(--line); display: block; }
.ped-qr-logo { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 0 0 3px #fff; }
.ped-qr-logo img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
.ped-qr-logo.gira::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--primary); border-right-color: var(--primary); animation: pedGira 1s linear infinite; }
.ped-auto { margin: 0; background: var(--primary-soft); color: #1A3FB8; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; text-align: left; }
@media (prefers-reduced-motion: reduce) { .ped-qr-logo.gira::after { animation-duration: 3s; } }
/* 2026-10-20: a ação (código, e-mail, CPF, QR, pagar) mora dentro do passo atual */
.ped-passos li .ped-acao { margin-top: 14px; }
.ped-passos li .ped-acao .ped-pix { justify-items: start; }
@media (max-width: 420px) { .ped-passos li { gap: 10px; } .ped-passos li .ped-acao .ped-pix { justify-items: center; } }
/* 2026-10-21: venda pelo site — personagem banqueiro e envio do print */
.ped-banco { display: grid; gap: 8px; justify-items: start; padding: 16px; border-radius: 16px; border: 2px solid var(--primary); background: var(--primary-soft); }
.ped-banco small { color: #1A3FB8; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ped-banco strong { font-size: 24px; color: var(--ink); }
.ped-dicas { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink); font-size: 14px; }
.ped-arquivo { width: 100%; padding: 14px; border: 2px dashed var(--line); border-radius: 12px; background: var(--soft); font: 600 14px var(--fonte); color: var(--ink); }
.ped-acao .btn, .ped-acao input { scroll-margin: 96px 0 24px; }   /* 2026-10-21: o cabeçalho fixo não cobre o botão ao rolar */