/* /prazo-e-carencia-da-comissao — clone do "Flex" da a referência (trading/flex), com a nossa cor, fonte e mídia.
   Hero: título no alto; texto à esquerda, o celular na mão no meio e o calendário de vidro à direita (o QR code da a referência), barras ao fundo.
   Depois: 3 cartões com calendário · 2 cartões grandes com o botão entre eles · 3 cartões "por que" · faixa com o extrato.
   Celular primeiro e copiando a composição do computador (lado a lado em 360px); só transform e opacity animam;
   prefers-reduced-motion mostra o estado final sem movimento. */

/* copy resumida só no celular */
.p-pc-sm{display:none}
@media (max-width:47.99rem){.p-pc-lg{display:none}.p-pc-sm{display:inline}}
/* as partes do título do cartão que não acendem (o .rd-h3 do kit acende todo <span>) */
.rd-h3 span.p-pc-lg,.rd-h3 span.p-pc-sm{color:rgba(255,255,255,.56);animation:none!important}

/* ---------- hero ---------- */
.lp-hero--janela{gap:12px;padding-bottom:104px}
.lp-hero--janela .lp-hero-c{display:contents}
/* as barras cinza que sobem ao fundo (as da a referência), desenhadas em SVG embutido;
   a máscara as apaga antes do pé do herói: sem ela, a barra cinza termina na borda da seção e vira degrau no encontro com #travas (salto 7 em 768) */
.lp-hero--janela::before{content:"";position:absolute;inset:auto 0 0;z-index:-1;height:78%;pointer-events:none;opacity:.8;
  -webkit-mask:linear-gradient(#000 55%,#0000 96%);mask:linear-gradient(#000 55%,#0000 96%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 700'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.1'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.015'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' transform='skewY(-9)'%3E%3Crect x='40' y='720' width='84' height='300' rx='22'/%3E%3Crect x='160' y='640' width='84' height='400' rx='22'/%3E%3Crect x='280' y='560' width='84' height='500' rx='22'/%3E%3Crect x='1040' y='520' width='84' height='700' rx='22'/%3E%3Crect x='1160' y='420' width='84' height='800' rx='22'/%3E%3Crect x='1280' y='300' width='84' height='900' rx='22'/%3E%3C/g%3E%3C/svg%3E") 50% 100%/max(100%,900px) auto no-repeat}
.lp-hero--janela .lp-persp{order:0;position:relative;flex:1 0 300px;width:100%;margin:0;perspective:none;
  -webkit-mask:linear-gradient(#000 55%,#0000 100%);mask:linear-gradient(#000 55%,#0000 100%)}
.lp-hero--janela .lp-persp::before{content:"";position:absolute;left:50%;top:6%;width:min(90%,420px);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(217,45,32,.32),transparent);pointer-events:none}
.lp-hero--janela .lp-persp-in{position:absolute;inset:0;transform:none;border-radius:0;overflow:hidden;box-shadow:none}
/* a foto já vem recortada com o aparelho no centro; o que passa da altura da coluna some na máscara de baixo */
.lp-hero--janela .lp-persp-in img{display:block;width:min(100%,340px);max-width:100%;height:auto;margin-inline:auto}
.lp-hero--janela .lp-sub{order:1;position:relative;z-index:1;width:min(100%,380px);margin-top:-88px;font-size:inherit;color:inherit}
.p-pc-cal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:12px 14px;border-radius:20px;text-align:center;
  background:rgba(14,14,14,.72);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 24px 60px -24px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-pc-cal-t{grid-column:1/-1;font-size:.875rem;font-weight:500;color:var(--lp-mut2);letter-spacing:.02em}
.p-pc-cal-l{display:grid;gap:2px;padding-top:6px}
.p-pc-cal-l b{font-size:1rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.p-pc-cal-l i{font-style:normal;font-size:.875rem;line-height:1.25;color:var(--lp-mut2)}
.p-pc-cal-l--a b{color:var(--red-hi)}
.p-pc-hero-nota{display:block;margin-top:8px;font-size:.875rem;line-height:1.35;color:var(--lp-mut)}
@media (min-width:64rem){
  .lp-hero--janela{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto auto minmax(0,1fr);
    grid-template-areas:"bc bc bc" "selo selo selo" "h1 h1 h1" ". mao ." "lede mao cal" "cta mao cal" ". mao .";
    column-gap:clamp(24px,3vw,56px);row-gap:14px;align-items:center;justify-content:stretch;text-align:left;
    padding:112px max(var(--pad),calc((100% - 1200px)/2)) 0}
  .lp-hero--janela .lp-hero-c>nav{grid-area:bc;justify-self:center}
  .lp-hero--janela .selo{grid-area:selo;justify-self:center}
  .lp-hero--janela .lp-h1{grid-area:h1;justify-self:center;text-align:center}
  .lp-hero--janela .lp-h1 .line{display:inline}
  .lp-hero--janela .lp-lede{grid-area:lede;align-self:end;max-width:21em;margin:0}
  .lp-hero--janela .hero-cta{grid-area:cta;align-self:start;justify-content:flex-start;flex-wrap:nowrap;width:auto}
  /* coluna de texto estreita (a da a referência): os rótulos curtos cabem lado a lado */
  .lp-hero--janela .hero-cta .lg{display:none}.lp-hero--janela .hero-cta .sm{display:inline}
  .lp-hero--janela .lp-persp{grid-area:mao;align-self:stretch;height:100%;min-height:440px;margin-top:20px}
  .lp-hero--janela .lp-persp-in img{width:100%}
  .lp-hero--janela .lp-sub{grid-area:cal;align-self:center;justify-self:end;width:min(100%,260px);margin:0}
  .p-pc-cal{grid-template-columns:minmax(0,1fr);gap:0;padding:18px 20px;text-align:left}
  .p-pc-cal-t{padding-bottom:6px}
  .p-pc-cal-l{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
  .p-pc-cal-l b{min-width:4.2em}
  .p-pc-hero-nota{text-align:left}
}

/* ---------- cartões (seções 1 e 3): 3 lado a lado; no celular, 1 largo + 2 lado a lado ---------- */
.p-pc-tri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p-pc-tri--casos>.rd-c:first-child{grid-column:1/-1}
.p-pc-tri--pq>.rd-c:last-child{grid-column:1/-1}
.p-pc-tri .rd-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:20px 16px;overflow:hidden}
.p-pc-tri .rd-h3{margin:0;font-size:clamp(1.0625rem,.85rem + .9vw,1.75rem)}
@media (min-width:48rem){
  .p-pc-tri{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .p-pc-tri--casos>.rd-c:first-child,.p-pc-tri--pq>.rd-c:last-child{grid-column:auto}
  .p-pc-tri .rd-card{gap:20px;padding:32px 28px;min-height:400px}
}
.p-pc-m{display:grid;place-items:center;min-width:0}
.p-pc-leg{margin:0;font-size:.875rem;line-height:1.35;color:var(--lp-mut2)}
.p-pc-leg b{color:#fff;font-weight:600}

/* plano mensal: 30 dias que acendem um a um até o dia 30 */
.p-pc-mes{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;width:100%}
.p-pc-mes i,.p-pc-ano i{position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:1;border-radius:7px;background:rgba(255,255,255,.06);font-style:normal;font-size:.875rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.p-pc-mes i::before,.p-pc-ano i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,84,72,.26)}
.p-pc-mes i.z::before,.p-pc-ano i.z::before{background:var(--red);box-shadow:0 0 18px rgba(255,84,72,.55)}
/* plano anual: 12 meses; o 1º com a carência marcada, o 12º aceso */
.p-pc-ano{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:100%}
.p-pc-ano i::before{opacity:0}
.p-pc-ano i.c::before,.p-pc-ano i.z::before{opacity:1}
@media (min-width:48rem){.p-pc-ano{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* carência maior: duas barras, a do produto é a mais longa */
.p-pc-cmp{display:grid;gap:14px;width:100%}
.p-pc-bar{display:grid;gap:6px}
.p-pc-bar em{font-style:normal;font-size:.875rem;color:var(--lp-mut2)}
.p-pc-bar i{position:relative;display:block;height:14px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.p-pc-bar i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.34);transform:scaleX(var(--w));transform-origin:0 50%}
.p-pc-bar--r i::before{background:linear-gradient(90deg,var(--red-d),var(--red-hi))}
.p-pc-bar--r em{color:#fff}

/* ---------- dois cartões grandes com o botão no meio ---------- */
.p-pc-duo{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p-pc-duo .rd-card{display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:20px 16px;overflow:hidden}
.p-pc-duo .rd-h3{margin:0;font-size:clamp(1.0625rem,.6rem + 1.9vw,2.5rem)}
.p-pc-meio{grid-column:1/-1;justify-self:center;margin-top:6px}
@media (min-width:48rem){
  .p-pc-duo{gap:16px}
  .p-pc-duo .rd-card{gap:28px;padding:40px 36px;min-height:520px}
  .p-pc-meio{position:absolute;left:50%;top:50%;z-index:2;margin:0;translate:-50% -50%;box-shadow:0 18px 50px -12px rgba(0,0,0,.9)}
}
/* os 80%: a linha parada em carência até o dia 30 e o salto para "Já liberada" */
.p-pc-graf{position:relative;align-self:end;width:100%;aspect-ratio:4/5}
@media (min-width:48rem){.p-pc-graf{aspect-ratio:400/280}}
.p-pc-graf svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-pc-graf path{fill:none;vector-effect:non-scaling-stroke}
.p-pc-graf-g{stroke:rgba(255,255,255,.07);stroke-width:1}
.p-pc-graf-w{stroke:#e9a23b;stroke-width:3;stroke-dasharray:6 6;stroke-linecap:round}
.p-pc-graf-r{stroke:var(--red-hi);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.p-pc-graf-v{position:absolute;left:62.5%;top:26.67%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red-hi);box-shadow:0 0 0 6px rgba(255,84,72,.2)}
.p-pc-tag{position:absolute;padding:6px 10px;border-radius:999px;font-size:.875rem;font-weight:600;line-height:1.1;white-space:nowrap;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;color:#fff}
.p-pc-tag--a{left:0;top:88%}
.p-pc-tag--w{left:8%;top:62%;color:#f3c27a;background:rgba(233,162,59,.12);box-shadow:0 0 0 1px rgba(233,162,59,.3) inset}
.p-pc-tag--b{right:0;top:2%;padding:8px 14px;font-size:1rem;background:linear-gradient(160deg,#e23428,#a81a12);box-shadow:0 12px 30px -10px rgba(217,45,32,.7)}
.p-pc-graf-x{position:absolute;left:62.5%;top:88%;translate:-50% 0;font-size:.875rem;font-weight:600;color:var(--lp-mut2);white-space:nowrap}
@media (max-width:47.99rem){.p-pc-tag--a,.p-pc-tag--w{display:none}.p-pc-tag--b{padding:6px 10px;font-size:.875rem}}
/* os 20%: o cadeado e o vidro com a data */
.p-pc-res{position:relative;align-self:end;display:grid;justify-items:center}
.p-pc-res-m img{display:block;width:100%;height:auto}
.p-pc-vid{position:relative;z-index:1;display:grid;justify-items:start;gap:2px;width:100%;margin-top:-18%;padding:12px 14px;border-radius:18px;
  background:rgba(20,20,20,.7);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-pc-vid-st,.p-pc-vid-d{font-size:.875rem;line-height:1.3;color:var(--lp-mut2)}
/* o vermelho-claro do kit (#ff5448) dava 4,06:1 no vidro; um tom mais claro da mesma família passa de 4,5:1 */
.p-pc-vid b{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);line-height:1;font-weight:700;color:#ff6a5e;letter-spacing:-.02em}
@media (min-width:48rem){.p-pc-vid{width:min(100%,300px);padding:16px 20px;justify-self:end}}

/* ---------- "por que": ampulheta, ciclo das cobranças e o 20% grande ---------- */
/* as medalhas vêm em fundo preto: a máscara radial apaga a caixa (o mesmo trato de /comissao-por-venda) */
.p-pc-m--med img,.p-pc-res-m img{-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-pc-m--med img{display:block;width:calc(100% + 24px);max-width:440px;height:auto;margin-inline:-12px}
.p-pc-ciclo{display:block;width:min(100%,220px);height:auto;overflow:visible}
.p-pc-ciclo-m rect{fill:rgba(255,255,255,.2)}
.p-pc-ciclo-a{fill:none;stroke:rgba(255,84,72,.35);stroke-width:2}
.p-pc-ciclo-p circle{fill:var(--red-hi)}
.p-pc-ciclo-p{transform-box:view-box;transform-origin:120px 120px}
.p-pc-ciclo-n{fill:#fff;font-size:56px;font-weight:700;text-anchor:middle;letter-spacing:-.02em}
.p-pc-vinte{margin:0;display:flex;align-items:flex-start;line-height:.85;font-weight:800;letter-spacing:-.05em;color:var(--red-hi);
  text-shadow:0 1px 0 #c8281d,0 2px 0 #b9211a,0 3px 0 #a81d17,0 4px 0 #961a14,0 5px 0 #841611,0 14px 30px rgba(217,45,32,.45)}
.p-pc-vinte span{font-size:clamp(5rem,3.4rem + 6vw,9rem)}
.p-pc-vinte small{font-size:clamp(2.5rem,1.8rem + 3vw,4.5rem);margin-top:.1em}

/* ---------- faixa com o extrato (o banner do suporte da a referência) ---------- */
.p-pc-ban-s .lp-in{width:min(100% - var(--pad)*2,1200px)}
.p-pc-ban{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:stretch;overflow:hidden;border-radius:28px;
  background:radial-gradient(100% 160% at 0 0,#191919,#0f0f0f 70%);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.p-pc-ban-m{position:relative;min-height:300px}
.p-pc-ban-m picture,.p-pc-ban-m img{position:absolute;inset:0;width:100%;height:100%}
.p-pc-ban-m img{object-fit:cover;object-position:0 0;-webkit-mask:linear-gradient(90deg,#000 55%,#0000),linear-gradient(#000 70%,#0000);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 55%,#0000) intersect,linear-gradient(#000 70%,#0000)}
.p-pc-ban-tx{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:24px 14px 24px 6px}
.p-pc-ban-t{margin:0;font-size:clamp(1.25rem,.95rem + 1.3vw,2.25rem);line-height:1.08;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-pc-ban-t span{color:var(--lp-mut)}
@media (min-width:48rem){
  .p-pc-ban{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:440px;border-radius:40px}
  .p-pc-ban-tx{gap:22px;padding:48px 48px 48px 12px}
}

/* ---------- movimento (só com JS e sem pedido de menos movimento) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-ok .rd-c:not(.on) .p-pc-mes i::before{opacity:0}
  .js-ok .rd-c.on .p-pc-mes i::before{animation:p-pc-surge .35s var(--ease) both;animation-delay:calc(var(--i)*45ms + .3s)}
  .js-ok .rd-c:not(.on) .p-pc-ano i.z::before{opacity:0}
  .js-ok .rd-c.on .p-pc-ano i.z::before{animation:p-pc-surge .5s var(--ease) 1.1s both}
  .js-ok .rd-c.on .p-pc-ano i:not(.z){animation:p-pc-pisca .5s var(--ease) both;animation-delay:calc(var(--i)*70ms + .3s)}
  .js-ok .rd-c:not(.on) .p-pc-bar i::before{transform:scaleX(0)}
  .js-ok .rd-c.on .p-pc-bar i::before{animation:p-pc-enche 1.1s var(--ease) .4s both}
  .js-ok .rd-c.on .p-pc-bar--r i::before{animation-delay:.7s}
  .js-ok .rd-c:not(.on) :is(.p-pc-graf-w,.p-pc-graf-r,.p-pc-tag,.p-pc-graf-v,.p-pc-graf-x){opacity:0}
  .js-ok .rd-c.on :is(.p-pc-graf-w,.p-pc-tag--a,.p-pc-tag--w,.p-pc-graf-x){animation:p-pc-surge .6s var(--ease) .35s both}
  .js-ok .rd-c.on .p-pc-graf-r{animation:p-pc-surge .6s var(--ease) .9s both}
  .js-ok .rd-c.on .p-pc-graf-v{animation:p-pc-surge .6s var(--ease) .9s both,p-pc-pulsa 2.4s ease-in-out 1.6s infinite}
  .js-ok .rd-c.on .p-pc-tag--b{animation:p-pc-sobe .6s var(--ease) 1.2s both}
  .js-ok .rd-c:not(.on) .p-pc-vid{opacity:0}
  .js-ok .rd-c.on .p-pc-vid{animation:p-pc-sobe .7s var(--ease) .6s both}
  .p-pc-ciclo-p{animation:p-pc-gira 9s linear infinite}
  .js-ok .rd-c:not(.on) .p-pc-vinte{opacity:0}
  .js-ok .rd-c.on .p-pc-vinte{animation:p-pc-sobe .8s var(--ease) .4s both}
}
@keyframes p-pc-pisca{0%{opacity:.3}100%{opacity:1}}
@keyframes p-pc-enche{from{transform:scaleX(0)}}
@keyframes p-pc-surge{from{opacity:0}to{opacity:1}}
@keyframes p-pc-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes p-pc-pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes p-pc-gira{to{transform:rotate(360deg)}}