/* Página /bio (link do Instagram), direção B (capa cheia no topo) + seção do canal Y2 (cinema) + pagamento da Payt abrindo logo abaixo da oferta.
   Fonte única: gerado a partir de modelo/bio.html por tools/gerar.py. Prototipos aprovados: _lab/bio-bancada (b.*, y2.*). CSP rígida: sem style= e sem script inline.
   Conteúdo visível por padrão (a animação é enfeite); prefers-reduced-motion = estado final parado. */
:root{--preto:#050505;--tinta:#f4f6f0;--suave:#a9b0a3;--linha-b:rgb(255 255 255 / .12);--lima:#c7ed1c;
  --prata-1:#dfe4ea;--prata-2:#c9d0d8;--prata-texto:#0b0d0c;--mola:cubic-bezier(.16,1,.3,1);--col:440px;--gut:20px;
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px;--gutter-bio:12px;--laranja:#ff6b2c;--laranja-rgb:255 107 44}
html{background:var(--preto)}
body{background:var(--preto);color:var(--tinta)}
img,video{display:block;max-width:100%}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:6px}
.avatar{flex:none;border-radius:50%;object-fit:cover;background:#111}
.col{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--gut)}
.bio{width:100%;margin:0;padding:0}
.produto{position:relative;margin:0}
/* o corpo da oferta recolhe quando o pagamento abre (grid-template-rows 1fr -> 0fr, transição única); sem JS fica aberto */
.cartao{position:relative}
.cartao-corpo{display:grid;grid-template-rows:1fr;transition:grid-template-rows .66s var(--mola),visibility 0s}
.corpo-int{min-height:0;overflow:hidden}
.corpo-conteudo{transition:opacity .34s ease .08s,transform .66s var(--mola)}
.produto.aberto .cartao-corpo{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .66s var(--mola),visibility 0s linear .66s}
.produto.aberto .corpo-conteudo{opacity:0;transform:translate3d(0,-12px,0);transition:opacity .24s ease,transform .5s var(--mola)}
.produto.sem-transicao .cartao-corpo,.produto.sem-transicao .corpo-conteudo{transition:none!important}
.cta[aria-expanded="true"]{background:transparent;color:var(--prata-1);border-color:rgb(223 228 234 / .5);box-shadow:none}
.cta[aria-expanded="true"] .cta-chip{background:rgb(223 228 234 / .12)}
.copia-oculta{position:fixed;left:-9999px;top:0;opacity:0}
.pag-aberto .barra{display:none!important}

/* Base comum das 3 direções da bio (protótipo de bancada). Tokens, botão prata, capa por camadas, vídeos, parcerias.
   CSP de produção: sem style= no markup, sem script inline. Conteúdo visível por padrão; animação é enfeite. */

:root{
  --preto:#050505;
  --tinta:#f4f6f0;
  --suave:#a9b0a3;
  --linha:rgb(255 255 255 / .12);
  --lima:#c7ed1c;               /* o único acento: foco, estado "Copiado", marca d'água de detalhe */
  --prata-1:#dfe4ea; --prata-2:#c9d0d8; --prata-texto:#0b0d0c;
  --fonte:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mola:cubic-bezier(.16,1,.3,1);
  --col:440px;                  /* coluna do celular */
  --gut:20px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;background:var(--preto)}
body{margin:0;background:var(--preto);color:var(--tinta);font:400 16px/1.5 var(--fonte);-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:6px}
.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}
.avatar{flex:none;border-radius:50%;object-fit:cover;background:#111}
.col{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- botão prata (receita aprovada da bio atual, sem varredura de luz) ---------- */
.cta{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;padding:14px 20px;border:1px solid transparent;border-radius:15px;
  background:linear-gradient(180deg,var(--prata-1),var(--prata-2));color:var(--prata-texto);text-decoration:none;font:800 17.5px/1.15 var(--fonte);letter-spacing:.005em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 14px 28px -18px rgb(0 0 0 / .9),inset 0 1px 0 rgb(255 255 255 / .6);
  transition:transform .35s var(--mola),box-shadow .35s var(--mola)}
.cta:active{transform:scale(.985)}
@media (hover:hover){.cta:hover{transform:translateY(-1px)}}
.cta-chip{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:-4px -8px -4px 0;border-radius:50%;background:var(--prata-texto);color:var(--prata-1);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18)}
.cta-chip svg{display:block}
.confianca{margin-top:var(--s2);font-size:14px;line-height:1.4;color:var(--suave);text-align:center}

/* ---------- oferta: texto e preço ---------- */
.oferta-texto{font-size:18px;line-height:1.5;font-weight:500;letter-spacing:-.005em}
.oferta-preco{margin-top:12px;font-size:15px;color:var(--suave);font-variant-numeric:tabular-nums}
.oferta-preco b{color:var(--tinta);font-weight:700}
.oferta .cta{margin-top:var(--s3)}

/* ---------- parcerias: o e-mail é o elemento ---------- */
.parc-t{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--suave)}
.parc-l{margin-top:var(--s1);font-size:16px;color:var(--suave)}
.email{display:inline-flex;align-items:center;gap:14px;min-height:56px;margin-top:var(--s2);padding:0;border:0;background:none;color:var(--tinta);font:700 clamp(19px,5.6vw,24px)/1.2 var(--fonte);letter-spacing:-.01em;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;max-width:100%}
.email-t{overflow-wrap:anywhere;border-bottom:1px solid var(--linha);padding-bottom:3px;transition:border-color .3s}
@media (hover:hover){.email:hover .email-t{border-color:var(--lima)}}
.email-est{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--linha);border-radius:999px;font:600 13px/1 var(--fonte);letter-spacing:.01em;color:var(--suave);transition:color .3s,border-color .3s}
.email.copiado .email-est{color:var(--lima);border-color:var(--lima)}
.escrever{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:var(--s1);font-size:15px;font-weight:600;color:var(--suave);text-decoration:none}
@media (hover:hover){.escrever:hover{color:var(--tinta)}}


/* Direção B · Capa cheia. CELULAR (< 960 px): UMA coluna em 100svh = [faixa da foto, flex:1, é ela que ENCOLHE] + [título] + [oferta, altura natural].
   A foto é dimensionada pelo ROSTO: a altura do rosto+boné (0,429 da altura da imagem) é a altura da faixa menos o respiro do topo e a "zona do peito" (c) abaixo do queixo.
   Assim em tela baixa a foto diminui (rosto inteiro sempre visível) em vez de o texto subir em cima dela; o título só encosta no peito, nunca no rosto.
   Medidas da arte (fração da imagem 2752x1536): caixa do rosto+boné x 0,670-0,842, y 0,088-0,517; centro do rosto em x = 0,756. Escala fluida por altura (svh): ver clamp() abaixo. */
.topo{position:absolute;z-index:5;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 18px) var(--gut) 0;pointer-events:none}
.assina{font:800 17px/1 var(--fonte);letter-spacing:-.02em}
.hero{--ov:clamp(0px,calc((100svh - 600px) * .12),24px);position:relative;isolation:isolate;container-type:inline-size;display:flex;flex-direction:column;min-height:520px;min-height:max(520px,100vh);min-height:max(520px,100svh);background:var(--preto)}
.hero-foto{position:relative;z-index:-1;flex:1 1 0;min-height:150px;overflow:hidden;container-type:size;container-name:foto}
.hero-foto-in{position:absolute;inset:0;--topo:clamp(8px,3cqh,36px);--c:clamp(12px,16cqh,90px);--fh:min(calc(100cqh - var(--topo) - var(--c)),82cqw);--ih:calc(var(--fh) / .429)}
.hero-fundo{position:absolute;max-width:none;width:auto;height:var(--ih);top:calc(var(--topo) - var(--ih) * .088);left:50%;translate:-75.6% 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* o fundo da foto se funde no preto a partir do queixo (a zona do peito escurece) */
.hero-foto-in::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(5 5 5 / 0) calc(100% - var(--c) - 6px),rgb(5 5 5 / .3) calc(100% - var(--c) * .72 - 4px),rgb(5 5 5 / .68) calc(100% - var(--c) * .4),rgb(5 5 5 / .92) calc(100% - var(--c) * .12),var(--preto) 100%);pointer-events:none}
.hero .p-selo{display:none;position:absolute;z-index:1;left:6cqw;bottom:calc(var(--ov) + 10px);width:20.7cqw;height:auto}
@container foto (min-height:260px){.hero .p-selo{display:block}}
/* título: largura fluida por altura, nunca abaixo de ~70% da largura anterior (73,8cqw -> mínimo 51,7cqw) */
.hero-titulo{position:relative;flex:none;width:clamp(51.7cqw,34svh,73.8cqw);aspect-ratio:73.8/39;margin:calc(var(--ov) * -1) auto 0}
.hero .peca{position:absolute;height:auto}
.hero .p-mem{left:0;top:0;width:100%}
.hero .p-sub{left:.7%;top:52.1%;width:96.9%}
.hero .p-tit{left:6.9%;top:69.2%;width:86%}
@media (prefers-reduced-motion:no-preference){
  /* foco que chega: a capa sai do desfoque e assenta; um movimento só */
  .hero-fundo{animation:foco 1.6s var(--mola) both}
  .hero .p-mem{animation:c-sobe .9s var(--mola) .5s both}
  .hero .p-sub{animation:c-traco .8s cubic-bezier(.5,0,.2,1) .95s both}
  .hero .p-tit{animation:c-sobe .8s var(--mola) 1.2s both}
  .hero .p-selo{animation:c-fade .8s ease-out .6s both}
}
@keyframes foco{from{opacity:.4;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes c-sobe{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes c-fade{from{opacity:0}to{opacity:1}}
@keyframes c-traco{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* oferta: respiros mínimos garantidos e crescendo com a altura da tela (título->destaque 20-32, destaque->descrição 8-12, descrição->preço 14-20, preço->botão 12-16, botão->confiança 10-14, confiança->fundo 12-20) */
.oferta .corpo-conteudo{padding-top:clamp(20px,3.8svh,32px);padding-bottom:calc(clamp(12px,2svh,20px) + env(safe-area-inset-bottom))}
.oferta-texto{margin:0}
.oferta-destaque{display:block;font-size:clamp(19px,3.1svh,22px);line-height:1.2;font-weight:800;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.oferta-sub{display:block;margin-top:clamp(8px,1.1svh,12px);font-size:clamp(13px,1.9svh,14.5px);line-height:1.35;font-weight:500;color:#c3c9bd}
.oferta-preco{margin-top:clamp(14px,1.9svh,20px);font-size:15px;line-height:1.5}
.oferta .cta-fluxo{margin-top:clamp(12px,1.6svh,16px);min-height:clamp(52px,6.6svh,58px)}
.oferta .confianca{margin-top:clamp(10px,1.4svh,14px);font-size:12.5px;line-height:1.35}
@media (max-height:560px){
  .hero-foto-in{--topo:8px;--c:12px}
  .oferta-destaque{font-size:18px}
  .oferta-sub{font-size:12.5px;line-height:1.3}
  .oferta-preco{font-size:14px;line-height:1.4}
  .oferta .cta-fluxo{min-height:48px}
}
.fecho{margin-top:var(--s5)}

/* CTA fixo na base: só existe com JS e só aparece enquanto o herói está visível */
.barra{display:none}
.js .barra{display:block;position:fixed;z-index:20;left:0;right:0;bottom:0;padding:28px 0 calc(env(safe-area-inset-bottom) + 24px);background:linear-gradient(180deg,rgb(5 5 5 / 0),rgb(5 5 5 / .94) 46%);transform:translate3d(0,110%,0);transition:transform .5s var(--mola);pointer-events:none}
.js .barra.ve{transform:none;pointer-events:auto}

@media (max-width:959px){.barra{display:none!important}}   /* celular: o botão está sempre na primeira tela; uma barra fixa só cobriria texto (Safari com barra de endereço) */
@media (min-width:600px) and (max-width:959px){
  .hero{max-width:520px;margin-inline:auto}
  .hero-foto{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
}
@media (min-width:960px){
  .topo{padding:32px 48px 0;text-align:center}
  .assina{font-size:20px}
  .hero{display:block;min-height:0;container-type:normal;width:min(100%,calc(88svh * 1.7917));margin:0 auto var(--s4);aspect-ratio:2752/1536}
  .hero{--ov:0px}
  .hero-foto{position:absolute;inset:0;z-index:-1;flex:none;min-height:0;container-type:normal;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .hero-foto-in::after{inset:auto 0 0 0;height:12%;background:linear-gradient(180deg,rgb(5 5 5 / 0),var(--preto))}
  /* na tela larga volta a arte original, na posição aprovada */
  .hero-fundo{translate:none;left:0;top:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:none;mask-image:none}
  .hero-titulo{position:absolute;inset:0;width:auto;aspect-ratio:auto;margin:0}
  .hero .p-mem{left:5.087%;top:26.562%;width:46.512%;height:28.255%}
  .hero .p-sub{left:5.451%;top:49.414%;width:45.058%;height:6.38%}
  .hero .p-tit{left:8.34%;top:56.9%;width:40%;height:13.55%}
  .hero .p-selo{display:block;left:7%;top:8%;bottom:auto;width:12.5%;height:6.253%}
  /* a oferta fica sobre o espaço escuro da capa, na coluna esquerda sob "EM DÓLAR" (a partir de 73% da altura da capa) */
  .oferta{position:absolute;z-index:2;left:0;top:73%;width:100%}
  .produto.aberto .painel{margin-top:var(--s3)}
  .oferta .corpo-conteudo{max-width:46%;margin:0;padding:0 0 0 6%;text-align:left}
  .oferta .cta-fluxo{max-width:420px;margin-top:18px;min-height:60px}
  .oferta .confianca{margin-top:16px;font-size:14px;text-align:left}
  .oferta-texto{font-size:20px;line-height:1.5;font-weight:500;letter-spacing:-.005em}
  .oferta-destaque,.oferta-sub{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:inherit;text-wrap:wrap}
  .oferta-preco{margin-top:12px}
  .fecho{max-width:1160px;padding-inline:48px;margin-top:var(--s6)}
  .rod-col{max-width:1160px;padding-inline:48px}
}

/* Seção do canal, base comum das variantes Y1/Y2/Y3. O vermelho/branco do botão é exceção funcional da marca YouTube, só aqui. */
:root{--yt-vermelho:#e60000;--yt-vermelho-hover:#ff1a1a;--yt-branco:#fff;--yt-preto:#0f0f0f}
.canal{margin-top:var(--s5)}
.canal h2,.canal h3{margin:0}
.yid{display:flex;align-items:center;gap:12px}
.yid .avatar{width:48px;height:48px}
.yid-txt{min-width:0;flex:1}
.yid-nome{font:800 21px/1.15 var(--fonte);letter-spacing:-.02em}
.yid-ins{margin-top:2px;font-size:14px;line-height:1.3;color:var(--suave)}
.yt-sub{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;background:var(--yt-vermelho);color:var(--yt-branco);font:700 15px/1 var(--fonte);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .25s,transform .35s var(--mola)}
.yt-sub svg{display:block;flex:none}
.yt-sub:active{transform:scale(.97)}
@media (hover:hover){.yt-sub:hover{background:var(--yt-vermelho-hover)}}
.yt-sub:focus-visible{outline-color:var(--tinta)}
.y-meta{display:block;font-size:14px;line-height:1.35;color:var(--suave);font-variant-numeric:tabular-nums}
.y-tit{display:block;font-weight:700;letter-spacing:-.01em;color:var(--tinta);text-wrap:balance}
.y-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#111}
.y-thumb img{width:100%;height:100%;object-fit:cover}
.y-dur{position:absolute;right:3px;bottom:3px;padding:0 4px;border-radius:3px;background:rgb(0 0 0 / .8);font-size:10.5px;line-height:1.5;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.y-link{display:block;text-decoration:none;color:inherit}
@media (hover:hover){.y-link:hover .y-thumb img{transform:scale(1.03)}}
.y-thumb img{transition:transform .6s var(--mola)}
@media (prefers-reduced-motion:reduce){.y-thumb img{transition:none}.y-link:hover .y-thumb img{transform:none}}

/* Y2 · Cinema: a seção vira uma sala de borda a borda; o fundo é a thumb mais recente desfocada como ASSET. */
.canal.y2{position:relative;isolation:isolate;margin-top:var(--s5);padding:var(--s6) 0 var(--s5);overflow:hidden}
.yt-marca{display:flex;align-items:center;gap:8px;margin-bottom:var(--s2)}
.yt-ic{display:block;flex:none;width:29px;height:auto}
.yt-ic-fundo{fill:#f00}
.yt-ic-seta{fill:#fff}
.yt-palavra{font:700 18px/1 var(--fonte);letter-spacing:-.045em;color:var(--tinta)}
.y2-fundo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.y2 .yid{margin-bottom:var(--s4)}
.y2 .yt-sub{background:var(--yt-branco);color:var(--yt-preto)}
@media (hover:hover){.y2 .yt-sub:hover{background:#e6e6e6}}
.y2-tela .y-thumb{border-radius:10px;box-shadow:0 0 0 1px rgb(255 255 255 / .14),0 30px 60px -28px rgb(0 0 0 / .9)}
.y2-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgb(0 0 0 / .62);color:#fff}
.y2-play svg{display:block;margin-left:3px}
.y2-tela .y-tit{margin-top:18px;font-size:22px;line-height:1.22}
.y2-tela .y-meta{margin-top:6px;color:#c4cabf}
.y2-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;margin-top:var(--s4)}
.y2-grade .y-thumb{border-radius:8px}
.y2-grade .y-tit{margin-top:8px;font-size:14px;line-height:1.28;font-weight:600}
.y2-todos{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:var(--s3);font-size:16px;font-weight:700;text-decoration:none;color:var(--tinta);border-bottom:1px solid var(--linha)}
.y2-todos .seta{transition:transform .35s var(--mola)}
@media (hover:hover){.y2-todos:hover{border-color:var(--tinta)}.y2-todos:hover .seta{transform:translate(2px,-2px)}}
@media (min-width:960px){
  .canal.y2{margin-top:var(--s6);padding:140px 0 var(--s6)}
  .y2 .col{max-width:1160px;padding-inline:48px}
  .y2 .yt-marca{justify-content:center;margin-bottom:var(--s3)}
  .y2 .yid{justify-content:center;flex-direction:column;text-align:center;gap:14px;margin-bottom:var(--s4)}
  .y2 .yid-txt{flex:none}
  .y2 .yid .avatar{width:72px;height:72px}
  .y2 .yid-nome{font-size:32px}
  .y2 .yt-sub{min-height:52px;padding:0 26px 0 20px;font-size:17px;margin-top:4px}
  .y2-tela{max-width:880px;margin-inline:auto}
  .y2-tela .y-tit{font-size:30px;margin-top:22px;text-align:center}
  .y2-tela .y-meta{text-align:center}
  .y2-grade{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:var(--s5)}
  .y2-grade .y-tit{font-size:15px}
  .y2-fim{text-align:center;margin-top:var(--s3)}
}

/* ---------- painel do pagamento: abre logo abaixo do cartão ----------
   A altura anima por grid-template-rows (transição única de ~0,7 s; o quadro do formulário tem altura fixa e não é remedido a cada quadro).
   O miolo é recortado nos lados com folga (margem negativa + padding) para o brilho da moldura e do traço de luz não ser cortado. */
.painel{--linha:rgba(255,255,255,.09);width:100%;max-width:560px;margin-inline:auto;padding-inline:var(--gutter-bio);display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .72s var(--mola),visibility 0s linear .72s}
.painel.aberto{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .72s var(--mola),visibility 0s}
.painel.sem-transicao,.painel.sem-transicao *{transition:none!important}
.painel-int{min-height:0;overflow:hidden;margin:0 calc(var(--gutter-bio) * -1);padding:0 var(--gutter-bio)}   /* celular: a folga vai até a borda da tela, sem estourar */
@media (min-width:600px){.painel-int{margin:0 -22px;padding:0 22px}}
.painel-ajuste{padding:14px 0 24px}
.produto .pagamento{max-width:none;opacity:0;transform:translate3d(0,16px,0) scale(.985);transform-origin:50% 0;transition:opacity .45s ease,transform .8s var(--mola)}
.painel.aberto .pagamento{opacity:1;transform:none;transition-delay:.14s}
/* ---------- painel: barra fixa com miniatura + formulário + selos no fim (rodada bio6) ----------
   Não há segunda capa: a capa animada do cartão (acima) é a capa fixa e o painel vem logo abaixo dela. A barra fixa leva a miniatura da capa (104x58), o nome curto,
   o 12x e o Fechar, e cola no topo quando a capa sai da tela. O recorte do painel e do cartão usa overflow:clip (não cria área de rolagem, então o sticky funciona);
   sem suporte, volta a hidden e a barra só deixa de grudar. Os 3 selos de confiança moram no fim do painel, logo abaixo do botão do cartão da Payt. */
@supports (overflow:clip){
  .painel-int{overflow:clip}
  .produto .pag-cartao{overflow:clip}
}
.produto-mem{--barra-bg:#1a1d1c;--barra-linha:rgb(223 228 234 / .2);--barra-nome:#f4f6f8;--barra-nome-fonte:var(--fonte-titulo);--barra-nome-peso:800;--barra-nome-tam:16.5px;--barra-preco:#c2c7cd}
.pag-barra{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;padding:8px 10px 8px 12px;
  background:var(--barra-bg);border-top:1px solid var(--barra-linha);border-bottom:1px solid var(--barra-linha);box-shadow:inset 3px 0 0 var(--acento),0 14px 26px -18px #000}
.pag-mini{flex:none;display:block;width:104px;height:58px;object-fit:cover;border-radius:8px;background:var(--capa-bg,#0b0c0b);box-shadow:0 0 0 1px var(--barra-linha),0 6px 14px -8px #000}
.pag-info{flex:1;min-width:0}
.pag-nome{margin:0;font-family:var(--barra-nome-fonte);font-size:var(--barra-nome-tam);font-weight:var(--barra-nome-peso);line-height:1.12;letter-spacing:.005em;color:var(--barra-nome);text-wrap:balance;
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}
.pag-preco{margin:3px 0 0;font-size:13px;line-height:1.2;font-weight:600;color:var(--barra-preco);font-variant-numeric:tabular-nums;white-space:nowrap}
.fechar{flex:none;min-width:76px;min-height:44px;padding:0 16px;border:1px solid var(--barra-linha);border-radius:999px;background:rgb(255 255 255 / .07);color:var(--barra-nome);font:700 13.5px/1 var(--fonte);letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fechar:active{background:rgb(255 255 255 / .16)}
@media (hover:hover){.fechar:hover{background:rgb(255 255 255 / .13)}}
@media (max-width:389px){
  .pag-barra{gap:10px;padding-left:10px;padding-right:8px}
  .pag-mini{width:96px;height:54px}
  .fechar{min-width:68px;padding:0 12px}
  .pag-nome{--barra-nome-tam:16px}
}
.pag-quadro[data-estado="fechado"] .pag-esqueleto{animation:none}

/* ---------- selos de confiança: três fatos paralelos, cada um em UMA linha, ícone em laranja vivo com brilho suave (o laranja do ponto do selo Starth) ---------- */
.seguro{display:flex;justify-content:space-evenly;align-items:flex-start;gap:6px;margin:0;padding:0;list-style:none}
.seguro li{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;font-size:clamp(10.5px,3.05vw,12.5px);line-height:1.2;font-weight:700;letter-spacing:0;color:var(--suave-2);white-space:nowrap}
.seguro-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--laranja);
  background:radial-gradient(circle at 50% 28%,rgb(var(--laranja-rgb) / .42),rgb(var(--laranja-rgb) / .12) 74%);
  box-shadow:inset 0 0 0 1px rgb(var(--laranja-rgb) / .6),0 0 20px -2px rgb(var(--laranja-rgb) / .62),0 0 5px rgb(var(--laranja-rgb) / .22)}
.seguro-ic svg{display:block;filter:drop-shadow(0 0 5px rgb(var(--laranja-rgb) / .9))}
.seguro-painel{padding:20px 8px 18px;border-top:1px solid var(--linha);background:rgb(255 255 255 / .02)}

.fecho .parc{text-align:left}
.rodape{padding:var(--s5) 0 var(--s4);border-top:0;text-align:left;font-size:13px;line-height:1.6;color:var(--suave)}
.rodape p{margin:0}
.rodape a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:var(--linha-b);text-underline-offset:4px}
.rod-col{max-width:var(--col)}
.y2 .yt-sub svg path{fill:#fff}
@media (min-width:960px){
  .fecho .parc{text-align:center}
  .fecho .parc .email{margin-inline:auto}
  .rodape{text-align:center}
  .rod-col{max-width:1160px;padding-inline:48px}
}
@media (prefers-reduced-motion:reduce){
  .painel,.painel.aberto,.produto .pagamento,.cta,.cartao-corpo,.corpo-conteudo{transition:none!important}
  .pag-esqueleto{animation:none!important}
}