/* /comissao-por-venda — só o que o kit (lp.css) não cobre. Clone da fixed-time-trades da a referência:
   cartões de etapa (os "ativos"), 2×2 do "por que", anel de medalhões e a faixa com foto.
   Celular primeiro; só transform e opacity animam; prefers-reduced-motion desliga o movimento. */

.p-cv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 1. etapas: 2 colunas no celular (2×3), 3 no tablet, 6 no computador ---------- */
.p-cv-et{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:768px){.p-cv-et{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:1100px){.p-cv-et{grid-template-columns:repeat(6,minmax(0,1fr))}}
.p-cv-c{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 14px;border-radius:24px;
  background:radial-gradient(120% 140% at 15% 0%,#171717 0%,#0e0e0e 70%);box-shadow:0 0 0 1px var(--line) inset}
@media (min-width:768px){.p-cv-c{padding:20px 18px 18px;border-radius:28px;gap:10px}}
.p-cv-n{position:absolute;top:16px;right:16px;font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.62)}
.p-cv-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;margin-bottom:4px}
.p-cv-ic .ic{width:22px;height:22px}
.p-cv-ic--n{background:rgba(255,255,255,.08);color:#fff}
.p-cv-ic--w{background:rgba(245,165,36,.14);color:#f7b955}
.p-cv-ic--ok{background:rgba(53,208,127,.14);color:#4fdc93}
.p-cv-ic--r{background:rgba(217,45,32,.2);color:#ff7b70}
.p-cv-t{margin:0;min-height:2.5em;font-size:1rem;line-height:1.25;font-weight:600;color:#fff;text-wrap:balance}
.p-cv-v{margin:0;font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem);line-height:1.05;font-weight:600;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.p-cv-d{display:none;margin:0;font-size:1rem;line-height:1.4;color:var(--lp-mut2);text-wrap:pretty}
@media (min-width:768px){.p-cv-d{display:block}}
.p-cv-bar{display:block;height:4px;margin-top:auto;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.p-cv-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red-d),var(--red-hi));transform-origin:left center;transform:scaleX(var(--p))}
.p-cv-st{align-self:flex-start;display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border-radius:10px;font-size:.875rem;line-height:1.2;font-weight:600;text-wrap:balance}
.p-cv-st--n{background:rgba(255,255,255,.08);color:rgba(255,255,255,.86)}
.p-cv-st--w{background:rgba(245,165,36,.14);color:#f7b955}
.p-cv-st--ok{background:rgba(53,208,127,.14);color:#4fdc93}
.p-cv-st--r{background:rgba(217,45,32,.2);color:#ff8a80}

/* entrada: o painel aparece e os cartões sobem em sequência; a barra corre até o ponto da etapa */
.js-ok .p-cv-et .p-cv-c{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .2s;transition-delay:calc(var(--i) * 60ms)}
.js-ok .p-cv-et.in .p-cv-c{opacity:1;transform:none}
.js-ok .p-cv-et .p-cv-bar i{transform:scaleX(0);transition:transform .9s var(--ease);transition-delay:calc(var(--i) * 90ms + .25s)}
.js-ok .p-cv-et.in .p-cv-bar i{transform:scaleX(var(--p))}
@media (hover:hover) and (pointer:fine){.p-cv-c:hover{box-shadow:0 0 0 1px var(--line2) inset}}

/* ---------- 2. por que: 2×2 em toda largura (o celular copia a grade do computador) ---------- */
.p-cv-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:940px;margin-inline:auto}
@media (min-width:768px){.p-cv-bento{gap:16px}}
.p-cv-b .rd-card{display:flex;flex-direction:column;overflow:hidden;min-height:clamp(250px,36vw,436px);padding:20px 12px 0;text-align:center}
@media (min-width:768px){.p-cv-b .rd-card{padding:40px 32px 0}}
.p-cv-b .rd-h3{margin:0;font-size:clamp(1.0625rem,.85rem + .9vw,1.5rem);line-height:1.1}
.p-cv-bm{position:relative;flex:1;display:grid;place-items:center;margin-top:12px;min-height:0}
.p-cv-bm--moeda img{display:block;width:calc(100% + 24px);max-width:440px;height:auto;margin-inline:-12px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.p-cv-bm--rel{padding-bottom:16px}
.p-cv-rel{display:block;width:min(100%,250px);height:auto;overflow:visible}
.p-cv-rel-m rect{fill:rgba(255,255,255,.2)}
.p-cv-rel-m rect.z{fill:var(--red-hi)}
.p-cv-rel-p{fill:var(--red-hi);transform-box:view-box;transform-origin:120px 120px}
.p-cv-rel-n{fill:#fff;font-size:54px;font-weight:600;letter-spacing:-.03em;text-anchor:middle}
.p-cv-rel-u{fill:rgba(255,255,255,.66);font-size:15px;font-weight:500;text-anchor:middle}
.p-cv-bm--cel{place-items:start center;padding-top:6px}
/* o celular sai pela borda de baixo; a tela já começa na lista do extrato (sem o cabeçalho de filtros) */
.p-cv-celw{position:relative;width:min(74%,250px);margin-bottom:-62%}
.p-cv-celw .lp-cel-tela img{margin-top:-74%}
.p-cv-bolha{position:absolute;right:58%;top:31%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--red-d);color:#fff;font-size:.875rem;line-height:1.2;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.45);white-space:nowrap}
@media (max-width:47.99rem){.p-cv-bolha{right:auto;left:50%;translate:-50% 0;top:30%;padding:5px 8px;border-radius:10px;font-size:.75rem}}
@media (prefers-reduced-motion:no-preference){
  .p-cv-rel-p{animation:p-cv-volta 7s var(--ease) infinite}
  .p-cv-bolha{animation:p-cv-boia 4s ease-in-out infinite}
}
@keyframes p-cv-volta{0%{transform:rotate(0)}70%,88%{transform:rotate(348deg)}100%{transform:rotate(360deg)}}
@keyframes p-cv-boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- 3. anel de medalhões com o texto no meio (a roda gira devagar; o contêiner corta a pintura) ---------- */
.p-cv-anel-s{--D:clamp(560px,86vw,1120px);--T:clamp(80px,10.5vw,150px);display:grid;place-items:center;min-height:calc(var(--D) + var(--T) * .4);padding-block:0}
.p-cv-anel{position:absolute;inset:0;contain:paint;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.p-cv-roda{position:absolute;left:50%;top:50%;width:var(--D);height:var(--D);margin:calc(var(--D) / -2) 0 0 calc(var(--D) / -2)}
.p-cv-roda span{position:absolute;left:50%;top:50%;width:var(--T);height:var(--T);margin:calc(var(--T) / -2) 0 0 calc(var(--T) / -2);
  transform:rotate(var(--a)) translateY(calc((var(--D) - var(--T)) / -2)) rotate(calc(var(--a) * -1))}
.p-cv-roda img{display:block;width:100%;height:100%;object-fit:cover;border-radius:26%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px rgba(0,0,0,.6);
  transform:perspective(500px) rotateX(14deg) rotateY(-12deg)}
.p-cv-roda span:nth-child(even) img{transform:perspective(500px) rotateX(-10deg) rotateY(14deg)}
/* a roda gira e cada medalhão gira ao contrário (propriedade rotate, separada do transform): ficam de pé */
@media (prefers-reduced-motion:no-preference){
  .p-cv-roda{animation:p-cv-gira 140s linear infinite}
  .p-cv-roda img{animation:p-cv-gira 140s linear infinite reverse}
}
@keyframes p-cv-gira{from{rotate:0deg}to{rotate:360deg}}
.p-cv-anel-tx{position:relative;z-index:1;display:grid;justify-items:center;gap:16px;width:min(100% - var(--pad) * 2,calc(var(--D) - var(--T) * 2 - 48px),460px);text-align:center}
.p-cv-anel-tx .lp-h2{margin:0}
.p-cv-anel-tx .lp-p{margin:0;max-width:40ch}
.p-cv-anel-tx .rd-link{transform:none}

/* ---------- 4. faixa com foto: mão + texto lado a lado também no celular ---------- */
.p-cv-ban{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:stretch;overflow:hidden;border-radius:28px;
  background:radial-gradient(100% 160% at 15% 0%,#171717 0%,#0e0e0e 66%);box-shadow:0 0 0 1px var(--line) inset}
@media (min-width:768px){.p-cv-ban{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:440px;border-radius:40px}}
.p-cv-ban-m{position:relative;align-self:end;padding-top:20px}
.p-cv-ban-m img{display:block;width:100%;max-width:400px;height:auto;margin:0 auto -14%}
.p-cv-ban-tx{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;padding:24px 14px 24px 4px}
@media (min-width:768px){.p-cv-ban-tx{gap:24px;padding:48px 48px 48px 8px}}
.p-cv-ban-t{margin:0;font-size:clamp(1.25rem,.95rem + 1.2vw,2rem);line-height:1.08;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-cv-ban-t span{display:block;color:var(--lp-mut)}
.p-cv-ban-tx .btn{max-width:100%}
.p-cv-ban-tx .rd-link{transform:none;margin-block:-8px}
@media (max-width:47.99rem){
  .p-cv-lg{display:none}
  .p-cv-ban-tx .btn-lg{min-height:48px;padding-inline:16px}
}

@media (prefers-reduced-motion:reduce){
  .js-ok .p-cv-et .p-cv-c{transform:none;transition:opacity .2s}
  .js-ok .p-cv-et .p-cv-bar i{transition:none;transform:scaleX(var(--p))}
}

/* a janela em perspectiva não passa da largura da tela (medição de 19/10/2026): inclinada, a borda de baixo dela
   abre ~1,1× (768) a ~1,24× (1440) a largura da caixa e saía da tela entre 700 e 1366px (-8→776 em 768, -57→1081
   em 1024). A caixa encolhe só o necessário entre 600 e 1439; em 1440 continua com os 1120 de antes. */
@media (min-width:600px) and (max-width:1439px){.lp-hero--janela .lp-persp{width:min(100%,1120px,calc(70vw + 116px))}}