/* Lote 1 do redesenho: arte do palco, cabeçalho no celular, acesso aos painéis e confirmação do Pix. */

/* Emblema inteiro e centralizado; as bordas se fundem ao fundo do palco. */
.stage .stage-art img{-webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 58%,transparent 100%)}

/* Visitante no celular: Entrar fica ao lado do logo em vez de cair para a linha de baixo. */
@media(max-width:420px){.store-page #accountArea:has(>[data-auth]:only-child){flex-basis:auto;max-width:none;margin-left:auto}}

/* Páginas de guia: atalho para os dois painéis fora da rolagem do menu. */
.header-actions{display:flex;align-items:center;gap:10px;margin-left:16px;flex-shrink:0}
.panels-toggle{min-height:40px;padding:7px 14px;border:1px solid #345777;border-radius:11px;background:#101c2b;color:#f3f7ff;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:background-color .18s,border-color .18s}
.panels-toggle:hover{border-color:#548fc2;background:#172b42}
.panels-toggle:focus-visible{outline:2px solid #8bd6ff;outline-offset:3px}
.panels-menu{position:fixed;inset:auto;top:84px;right:max(16px,calc((100vw - 1160px)/2));margin:0;width:min(300px,calc(100vw - 32px));padding:8px;border:1px solid #345777;border-radius:14px;background:#0d1724;color:#f3f7ff;box-shadow:0 24px 60px #000a}
.panels-menu:popover-open{display:grid;gap:4px}
.panels-menu a{display:grid;gap:2px;padding:12px 14px;border-radius:10px;color:inherit;text-decoration:none}
.panels-menu a:hover,.panels-menu a:focus-visible{background:#172b42;outline:none}
.panels-menu b{font-size:15px}
.panels-menu small{color:#a9bbd1;font-size:12px}
@media(max-width:900px){header .header-actions{margin-left:auto}header{flex-wrap:wrap}.guide-page header nav{order:3}}
@media(max-width:480px){.header-actions .nav-cta{display:none}.panels-menu{top:72px}}

/* Confirmação do Pix com o painel certo a um clique. */
.store-page .payment-confirmed{display:grid;justify-items:center;gap:10px;padding:20px 16px}
.store-page .payment-confirmed b{color:#f3f7ff;font-size:18px}
.store-page .payment-confirmed p{margin:0;color:#a9bbd1;max-width:340px;line-height:1.6}
.payment-check{width:64px;height:64px}
.payment-check circle{fill:none;stroke:#6ce4ba;stroke-width:3;stroke-dasharray:150;stroke-dashoffset:150;animation:pay-draw .6s cubic-bezier(.2,.8,.2,1) forwards}
.payment-check path{fill:none;stroke:#6ce4ba;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:pay-draw .35s .45s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pay-draw{to{stroke-dashoffset:0}}
.store-page .payment-next{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-top:6px}
.store-page .payment-next button{flex:none;width:100%;min-height:46px}

/* Histórico: cada compra paga leva direto ao painel do serviço. */
.order-panel{width:auto;padding:.55rem .8rem;font-size:.78rem;background:#176ff2;color:#fff;border:0;border-radius:10px;font-weight:700}
.order-panel:hover{background:#0e5fd8}

@media(prefers-reduced-motion:reduce){.payment-check circle,.payment-check path{animation:none;stroke-dashoffset:0}.panels-toggle{transition:none}}