/* Checkout próprio Masogo/Starth — compartilhado por todos os produtos.
   Específico do produto (posição das peças da capa, altura do quadro): assets/<slug>/capa.css */
:root{
  /* TOKENS: este bloco é o tema padrão (/mem). Cada produto sobrescreve o que precisar em css/temas/<slug>.css. */
  --preto:#050605; --grafite:#121512; --linha:rgba(255,255,255,.09);
  --texto:#f4f6f0; --suave:#aab1a4; --suave-2:#b9c1b2; --selo-texto:#dfe5d8;
  --acento:#d1fb00; --acento-2:#abe01a; --acento-rgb:209 251 0;   /* cor de destaque (detalhes, números, ícones) */
  --luz-rgb:255 154 60;                                         /* luz ambiente quente atrás do vidro */
  --traco-rgb:var(--acento-rgb);                                /* traço de luz que acende a borda do pagamento */
  --capa-bg:#0b0c0b; --faixa-bg:rgba(255,255,255,.025);
  --esq-1:#f4f5f3; --esq-2:#e6e9e4; --esq-texto:#59604f;       /* esqueleto claro enquanto o formulário carrega */
  --raio:16px; --gutter:16px; --largura:1200px;
  --fonte:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fonte-titulo:var(--fonte); --peso-titulo:800; --track-titulo:-.015em; --escala-titulo:1;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{position:relative;overflow-x:clip;margin:0;background:var(--preto);color:var(--texto);font-family:var(--fonte);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}
.so-leitor{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- capa ---------- */
.capa{position:relative;isolation:isolate;width:100%;max-width:var(--largura);margin:0 auto}
.capa-palco{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--capa-bg);contain:paint;user-select:none;-webkit-user-select:none}
.capa-fundo{position:absolute;inset:0;display:block}
.capa-fundo img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:72% 45%;will-change:transform;animation:capa-zoom 12s cubic-bezier(.3,.1,.3,1) both}
.peca{position:absolute;display:block;pointer-events:none;-webkit-user-drag:none}

/* a animação só começa quando as peças estão decodificadas (js/checkout.js põe .capa-ok) */
.capa:not(.capa-ok) .capa-palco *{animation-play-state:paused}

.peca-mem{animation:capa-pincelada .75s cubic-bezier(.62,0,.22,1) .15s both}
.peca-sublinhado{animation:capa-traco .45s cubic-bezier(.3,.6,.3,1) .8s both}
.capa-palco{--sep:clamp(1.5px,.42vw,5px)}
/* peças pequenas: sobem com um glitch curto (fatias deslocadas + separação RGB) e assentam no quadro final */
.peca-subtitulo{animation:capa-glitch-a .5s steps(1,end) 1.15s both}
.peca-selo{animation:capa-glitch-a .56s steps(1,end) 1.65s both}

/* passada de luz sobre o MEM (só onde há máscara; some em navegador sem suporte) */
.peca-brilho{display:none}
@supports ((-webkit-mask-image:url(a)) or (mask-image:url(a))){
  .peca-brilho{display:block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    background:linear-gradient(105deg,transparent 38%,rgb(var(--acento-rgb) / .5) 50%,transparent 62%) 100% 0/300% 100% no-repeat;
    animation:capa-brilho 1s ease-in-out 2.25s both}
}

/* capa sem camadas (arte inteira, ex.: /multiplicador): a imagem toda entra com dois glitches curtos (1,15 s e 1,65 s, casados com o som)
   e um acento de luz no ponto de foco da oferta (--foco-x/--foco-y, cor do produto) */
.capa-inteira .capa-fundo{animation:capa-entra .6s cubic-bezier(.3,.6,.3,1) both,capa-glitch-inteira .5s steps(1,end) 1.15s,capa-glitch-inteira-b .34s steps(1,end) 1.65s}
.capa-inteira::after{content:"";position:absolute;left:calc(var(--foco-x,90%) - 24%);top:calc(var(--foco-y,54%) - 10%);width:48%;height:20%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(closest-side,rgb(var(--acento-rgb) / .6),transparent 72%);animation:capa-foco 1.8s cubic-bezier(.3,.6,.3,1) 2.3s both}
.capa:not(.capa-ok) .capa-inteira::after{animation-play-state:paused}
@keyframes capa-entra{from{opacity:0}to{opacity:1}}
@keyframes capa-glitch-inteira{
  0%{clip-path:inset(0 0 62% 0);transform:translate(-2.2%,0)}
  16%{clip-path:inset(30% 0 36% 0);transform:translate(2.6%,0) skewX(-3deg)}
  32%{clip-path:none;transform:translate(-1%,0);opacity:.55}
  46%{opacity:1;clip-path:inset(64% 0 0 0);transform:translate(1.8%,0)}
  60%{clip-path:none;transform:translate(.8%,0) skewX(1.5deg)}
  78%{clip-path:none;transform:translate(-.4%,0)}
  100%{clip-path:none;transform:none;opacity:1}}
@keyframes capa-glitch-inteira-b{
  0%{clip-path:inset(0 52% 0 0);transform:translateX(-1.6%)}
  34%{clip-path:inset(0 0 0 40%);transform:translateX(1.8%)}
  58%{clip-path:none;transform:translateX(-.6%);opacity:.7}
  80%{opacity:1;clip-path:none;transform:translateX(.3%)}
  100%{clip-path:none;transform:none;opacity:1}}
@keyframes capa-foco{0%{opacity:0;transform:scaleX(.4)}35%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.3)}}
@keyframes capa-zoom{from{transform:scale(1)}to{transform:scale(1.04)}}
@keyframes capa-pincelada{
  from{clip-path:polygon(-12% -2%,0% -2%,-12% 102%,-12% 102%);opacity:.4}
  to{clip-path:polygon(-12% -2%,112% -2%,100% 102%,-12% 102%);opacity:1}}
@keyframes capa-traco{
  from{clip-path:polygon(-12% -4%,0% -4%,-12% 104%,-12% 104%)}
  to{clip-path:polygon(-12% -4%,112% -4%,100% 104%,-12% 104%)}}
@keyframes capa-glitch-a{
  0%{opacity:0}
  10%{opacity:1;clip-path:inset(0 0 64% 0);transform:translate(-5%,10%);filter:drop-shadow(var(--sep) 0 0 rgba(255,32,96,.9)) drop-shadow(calc(var(--sep) * -1) 0 0 rgba(0,229,255,.9))}
  24%{opacity:1;clip-path:inset(34% 0 22% 0);transform:translate(6%,-6%);filter:drop-shadow(calc(var(--sep) * -1) 0 0 rgba(255,32,96,.9)) drop-shadow(var(--sep) 0 0 rgba(0,229,255,.9))}
  38%{opacity:.9;clip-path:inset(0 0 0 0);transform:translate(-3%,4%) skewX(-10deg);filter:drop-shadow(var(--sep) 0 0 rgba(255,32,96,.8)) drop-shadow(calc(var(--sep) * -1) 0 0 rgba(0,229,255,.8))}
  52%{opacity:1;clip-path:inset(66% 0 0 0);transform:translate(4%,0);filter:drop-shadow(var(--sep) 0 0 rgb(var(--acento-rgb) / .8))}
  66%{opacity:0}
  74%{opacity:1;clip-path:none;transform:translate(1.5%,0) skewX(4deg);filter:drop-shadow(calc(var(--sep) * .6) 0 0 rgba(255,32,96,.7)) drop-shadow(calc(var(--sep) * -.6) 0 0 rgba(0,229,255,.7))}
  88%{opacity:1;clip-path:none;transform:none;filter:drop-shadow(calc(var(--sep) * .3) 0 0 rgba(255,32,96,.5)) drop-shadow(calc(var(--sep) * -.3) 0 0 rgba(0,229,255,.5))}
  100%{opacity:1;clip-path:none;transform:none;filter:none}}
@keyframes capa-brilho{from{background-position:100% 0}to{background-position:0% 0}}

@media (prefers-reduced-motion:reduce){
  .capa-palco *,.capa-inteira::after{animation:none!important}
  .capa-inteira::after{display:none}
  .peca-brilho{display:none!important}
  .rev,.rev.rev-pre{opacity:1!important;transform:none!important;transition:none!important}
  .garantia .g-escudo,.garantia .g-check{animation:none!important}
}

/* ---------- linha de acesso ---------- */
.acesso{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:13px var(--gutter);background:var(--faixa-bg);border-bottom:1px solid var(--linha);font-size:15px;font-weight:600;line-height:1.3;text-align:center;letter-spacing:.005em}
.acesso svg{flex:none;color:var(--acento)}

/* ---------- miolo ---------- */
.miolo{display:grid;gap:22px;width:100%;max-width:var(--largura);margin:0 auto;padding:14px 12px 36px}
.pagamento{width:100%;max-width:560px;margin:0 auto}
.pag-cartao{background:var(--grafite);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.pag-topo{display:flex;align-items:center;gap:7px;margin:0;padding:9px 14px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--suave)}
.pag-topo svg{color:var(--acento)}
.pag-quadro{position:relative;height:var(--altura-quadro,1500px);background:#f4f6f8}
.pag-quadro iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#f4f6f8}
.pag-esqueleto{position:absolute;left:0;right:0;top:0;z-index:1;height:min(100%,620px);background:linear-gradient(180deg,var(--esq-1),var(--esq-2));transition:opacity .25s;pointer-events:none}
.pag-esqueleto::after{content:"Carregando o pagamento…";position:absolute;left:0;right:0;top:48px;text-align:center;font-size:14px;font-weight:600;color:var(--esq-texto)}
.pag-quadro[data-estado="espera"] .pag-esqueleto,.pag-quadro[data-estado="carregando"] .pag-esqueleto{animation:pag-espera 1.6s ease-in-out infinite}
.pag-quadro[data-estado="pronto"] .pag-esqueleto{opacity:0;visibility:hidden}
@keyframes pag-espera{0%,100%{opacity:.7}50%{opacity:1}}
.pag-aviso{position:relative;z-index:2;margin:0;padding:24px;text-align:center;color:#111}
/* selos de confiança (só fatos) encostados na área de pagamento */
.selos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:12px 12px 14px;list-style:none}
.selos li{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));font-size:12.5px;font-weight:600;line-height:1.2;color:var(--selo-texto);white-space:nowrap}
.selos svg{flex:none;color:var(--acento)}
.pag-saida{margin:0;padding:0 14px 14px;font-size:13px;text-align:center}
.pag-saida a{color:var(--acento);text-underline-offset:3px}

/* ---------- garantia e perguntas: painéis de vidro (translúcidos, sem backdrop-filter) ---------- */
.garantia,.faq{position:relative;isolation:isolate;border-radius:20px;
  background:linear-gradient(160deg,rgb(255 255 255 / .085),rgb(255 255 255 / .02) 55%,rgb(255 255 255 / .05));
  box-shadow:0 26px 54px -34px rgb(0 0 0 / .9),inset 0 1px 0 rgb(255 255 255 / .14)}
.garantia{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 16px;padding:20px 18px 18px}
.garantia-icone{color:var(--acento);filter:drop-shadow(0 0 14px rgb(var(--acento-rgb) / .32))}
.garantia-rotulo{margin:0 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgb(255 255 255 / .62)}
.garantia-destaque{margin:0;font-family:var(--fonte-titulo);font-size:calc(clamp(22px,6.3vw,28px) * var(--escala-titulo));font-weight:var(--peso-titulo);line-height:1.1;letter-spacing:var(--track-titulo)}
.g-num{color:var(--acento)}
.garantia-detalhe{grid-column:1/-1;margin:2px 0 0;padding-top:14px;border-top:1px solid rgb(255 255 255 / .14);font-size:14.5px;line-height:1.55;color:var(--suave-2)}
.garantia.is-in .g-escudo{animation:g-traco .9s cubic-bezier(.3,.6,.3,1) .1s both}
.garantia.is-in .g-check{animation:g-traco .5s cubic-bezier(.3,.6,.3,1) .8s both}
.g-escudo,.g-check{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes g-traco{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* entrada suave de blocos abaixo da dobra (JS só esconde o que ainda não está na tela) */
.rev.rev-pre{opacity:0;transform:translateY(16px)}
.rev{transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}

/* ---------- FAQ ---------- */
.faq{margin-top:22px;padding:18px 18px 4px}
.faq h2{margin:0 0 4px;font-family:var(--fonte-titulo);font-size:calc(18px * var(--escala-titulo));font-weight:var(--peso-titulo);letter-spacing:var(--track-titulo)}
.faq details{border-bottom:1px solid rgb(255 255 255 / .1)}
.faq details:last-of-type{border-bottom:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:10px 2px;font-size:16px;font-weight:600;line-height:1.3;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-1px)}
.faq details p{margin:0;padding:0 2px 16px;font-size:15px;line-height:1.55;color:var(--suave)}

/* ---------- rodapé ---------- */
.rodape{padding:26px var(--gutter) calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--linha);text-align:center;font-size:13px;color:var(--suave)}
.rodape p{margin:0 0 6px}
.rodape-marca{font-weight:800;color:var(--texto);font-size:14px}
.rodape a{text-underline-offset:3px}

/* ---------- saída (modal) ---------- */
.voltar{border:0;padding:0;background:transparent;color:var(--texto);width:min(92vw,420px);max-width:none;margin:auto}
.voltar::backdrop{background:rgba(5,6,5,.8)}
.voltar-caixa{padding:26px 22px 18px;background:var(--grafite);border:1px solid rgb(var(--acento-rgb) / .4);border-radius:20px;text-align:center}
.voltar h2{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--suave)}
.voltar-destaque{margin:0 0 8px;font-family:var(--fonte-titulo);font-size:calc(26px * var(--escala-titulo));font-weight:var(--peso-titulo);line-height:1.15;letter-spacing:var(--track-titulo)}
.voltar-detalhe{margin:0 0 22px;font-size:14px;line-height:1.5;color:var(--suave)}
.botao{display:block;width:100%;min-height:54px;padding:14px 18px;border:0;border-radius:12px;background:var(--acento);color:var(--preto);font:800 17px/1.2 var(--fonte);cursor:pointer}
.botao:active{background:var(--acento-2)}
.botao-texto{display:block;width:100%;min-height:48px;margin-top:6px;padding:10px;border:0;background:none;color:var(--suave);font:500 14px/1.2 var(--fonte);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- computador ---------- */
@media (min-width:960px){
  .miolo{grid-template-columns:minmax(0,1fr) minmax(480px,520px);gap:40px;padding:36px 24px 56px;align-items:start}
  .pagamento{grid-column:2;grid-row:1;max-width:none;margin:0}
  .lateral{grid-column:1;grid-row:1;position:sticky;top:24px;padding-top:2px}
  .faq{margin-top:28px}
  .acesso{font-size:16px;padding:15px 24px}
}
@media (min-width:960px) and (max-height:700px){.lateral{position:static}}
@media (min-width:1232px){
  .capa{margin-top:24px}
  .capa-palco{border-radius:20px;outline:1px solid var(--linha)}
  .acesso{background:none;border-bottom:0;padding-top:20px;padding-bottom:0;font-size:17px}
}