/* /comissao-recorrente-o-que-e — clone do "Forex" da a referência (trading/forex), com a nossa cor, fonte e mídia.
   Ordem da referência: título no centro e a plataforma em perspectiva (com o texto no canto) · bento 2×2 com o número que vira
   e o relógio · faixa com a figura e o cartão de contas · "Por que" com o cartão largo de ícones e três cartões · carrossel ·
   dois cartões e o botão · sanfona com o celular e as barras ao fundo · FAQ.
   Celular primeiro, 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-cr-sm{display:none}
@media (max-width:47.99rem){.p-cr-lg{display:none}.p-cr-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-cr-lg,.rd-h3 span.p-cr-sm{color:rgba(255,255,255,.56);animation:none!important}
.p-cr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* as medalhas vêm em fundo preto: a máscara radial apaga a caixa (o mesmo trato das outras páginas) */
.p-cr-med{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-cr-medw{display:grid;place-items:center;width:100%}

/* ---------- hero: a plataforma em perspectiva e o texto no canto dela ---------- */
.lp-hero .lp-lede b{color:#fff;font-weight:600}
.p-cr-hs{display:block;font-size:1rem;line-height:1.4;color:var(--lp-mut2)}
.p-cr-hs b{color:#fff;font-weight:600}
.p-cr-hs-n{display:block;margin-top:4px;font-size:.875rem;line-height:1.35;color:var(--lp-mut)}
@media (min-width:64rem){
  /* o "Capitalize na mudança…" da a referência: sobre o pé da plataforma, à direita */
  /* preso à dobra (não ao pé do herói, que passa de uma tela): fica à vista na primeira tela, como na referência */
  .lp-hero--janela .lp-sub{position:absolute;z-index:2;right:max(var(--pad),calc((100% - 1120px)/2 + 32px));top:max(calc(100svh - 200px),640px);
    width:300px;margin:0;text-align:left}
  .lp-hero--janela .lp-sub::before{content:"";position:absolute;inset:-64px -96px;z-index:-1;pointer-events:none;
    background:radial-gradient(farthest-side,rgba(0,0,0,.95) 58%,rgba(0,0,0,0))}
  .p-cr-hs{font-size:1.125rem}
}

/* ---------- 1. bento 2×2: o número que vira, o relógio, as duas filas, a carteira ---------- */
.p-cr-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.p-cr-b .rd-card{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;height:100%;padding:18px 14px;overflow:hidden}
.p-cr-b .rd-h3{margin:0;font-size:clamp(1rem,.8rem + .9vw,1.75rem)}
.p-cr-bm{display:grid;place-items:center;min-width:0;min-height:128px}
@media (min-width:48rem){
  /* a grade estreita da referência (944px), com o título centrado em cada cartão */
  .p-cr-bento{gap:16px;width:min(100%,944px);margin:28px auto 0}
  .p-cr-b .rd-card{gap:24px;padding:36px 32px;min-height:420px;text-align:center}
  .p-cr-bm{min-height:240px}
}
/* o número que vira: 12 (mensalidades) vira 01 (comissão) */
.p-cr-flips{display:grid;justify-items:center;gap:10px}
.p-cr-flip-l{display:flex;gap:6px;perspective:600px}
.p-cr-flip{position:relative;display:grid;width:clamp(52px,14vw,120px);aspect-ratio:3/4;border-radius:clamp(10px,2vw,18px);
  background:linear-gradient(180deg,#232323 0 49.6%,#111 50.4% 100%);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 24px 50px -20px rgba(0,0,0,.9)}
.p-cr-flip>span{grid-area:1/1;display:grid;place-items:center;font-size:clamp(2.75rem,1.4rem + 6vw,6rem);font-weight:700;line-height:1;letter-spacing:-.04em;color:#fff;backface-visibility:hidden}
.p-cr-flip-de{opacity:0}
.p-cr-flip:last-child .p-cr-flip-pa{color:var(--red-hi);text-shadow:0 0 30px rgba(255,84,72,.45)}
.p-cr-flip-u{position:relative;display:grid;font-style:normal;font-size:.875rem;font-weight:600;letter-spacing:.04em;color:var(--lp-mut2)}
.p-cr-flip-u>span{grid-area:1/1;text-align:center}
.p-cr-flip-u1{opacity:0}
/* o relógio dos 12 meses: só o 1º mês aceso, o ponteiro gira como as mensalidades */
.p-cr-rel{display:block;width:min(100%,230px);height:auto;overflow:visible}
.p-cr-rel-m rect{fill:rgba(255,255,255,.16)}
.p-cr-rel-m rect.z{fill:var(--red-hi)}
.p-cr-rel-h rect{fill:rgba(255,255,255,.5)}
.p-cr-rel-p rect{fill:#fff}
.p-cr-rel-p{transform-box:view-box;transform-origin:120px 120px;transform:rotate(18deg)}
.p-cr-rel-c{fill:var(--red-hi)}
/* cobrança × comissão: duas filas de seis pontos */
.p-cr-cob{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;width:100%;max-width:320px}
.p-cr-cob b{font-size:.875rem;font-weight:600;color:var(--lp-mut2)}
.p-cr-cob b+.p-cr-fila{margin-bottom:8px}
.p-cr-fila{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.p-cr-fila i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.p-cr-fila--c i.z{background:rgba(255,255,255,.4);box-shadow:none}
.p-cr-fila--r i.z{background:var(--red-hi);box-shadow:0 0 14px rgba(255,84,72,.6)}

/* ---------- 2. faixa com a figura e o cartão de vidro ---------- */
.p-cr-fig{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px;text-align:center}
.p-cr-fig-m{position:relative;width:100%;max-width:420px}
.p-cr-fig-m::before{content:"";position:absolute;left:28%;top:12%;width:80%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(217,45,32,.32),transparent);pointer-events:none}
.p-cr-fig-m img{position:relative;display:block;width:62%;height:auto;margin-left:6%;
  -webkit-mask:linear-gradient(#000 70%,#0000);mask:linear-gradient(#000 70%,#0000)}
.p-cr-lista{position:absolute;right:0;bottom:14%;z-index:1;display:grid;gap:4px;width:min(58%,260px);padding:8px;border-radius:18px;text-align:left;
  background:rgba(18,18,18,.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-cr-li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 10px;border-radius:12px}
.p-cr-li>i{grid-row:1/3;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.3) inset}
.p-cr-li b{font-size:.875rem;line-height:1.2;font-weight:600;color:#fff}
.p-cr-li em{grid-column:2;font-style:normal;font-size:.8125rem;line-height:1.25;color:var(--lp-mut)}
.p-cr-li svg{grid-column:3;grid-row:1/3;width:16px;height:16px;color:var(--red-hi)}
.p-cr-li--on{background:rgba(217,45,32,.14);box-shadow:0 0 0 1px rgba(255,84,72,.45) inset}
.p-cr-li--on>i{background:var(--red-hi);box-shadow:0 0 10px rgba(255,84,72,.7)}
.p-cr-li--on em{color:var(--red-hi)}
.p-cr-fig-tx{display:grid;justify-items:center;gap:16px}
.p-cr-fig-t{margin:0;font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem);line-height:1.02;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-cr-fig-t span{display:block;color:var(--lp-mut)}
@media (min-width:48rem){
  .p-cr-fig{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);text-align:left}
  .p-cr-fig-m{max-width:none}
  .p-cr-fig-m img{width:min(78%,560px);margin-left:auto;margin-right:0}
  .p-cr-fig-m::before{left:62%}
  .p-cr-lista{left:0;right:auto;bottom:auto;top:30%;width:min(50%,300px);padding:10px;border-radius:24px}
  .p-cr-li{padding:12px 14px}
  .p-cr-li b{font-size:1rem}
  .p-cr-li em{font-size:.875rem}
  .p-cr-fig-tx{gap:24px;text-align:center}
  .p-cr-fig-t{font-size:clamp(1.75rem,1.2rem + 1.2vw,2.5rem)}
}

/* ---------- 3. "Por que": o cartão largo com os ícones e três cartões ---------- */
.p-cr-pq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p-cr-pq>.rd-c:nth-child(-n+2){grid-column:1/-1}
.p-cr-pq .rd-card{display:grid;grid-template-rows:auto auto minmax(0,1fr);align-content:start;gap:12px;height:100%;padding:18px 14px;overflow:hidden}
.p-cr-pq .rd-h3{margin:0;font-size:clamp(1rem,.8rem + .9vw,1.75rem)}
.p-cr-pq .rd-link{justify-self:start}
.p-cr-pq-w .rd-card{grid-template-rows:auto auto auto}
@media (min-width:48rem){
  .p-cr-pq{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .p-cr-pq>.rd-c:nth-child(-n+2){grid-column:auto}
  .p-cr-pq>.rd-c:first-child{grid-column:1/-1}
  .p-cr-pq .rd-card{gap:20px;padding:36px 32px;min-height:400px}
  .p-cr-pq-w .rd-card{min-height:0;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr);column-gap:32px}
  .p-cr-pq-w .rd-h3{grid-column:1}
  .p-cr-pq-w .rd-link{grid-column:1;align-self:start}
  .p-cr-pq-w .p-cr-ics{grid-column:2;grid-row:1/3}
}
/* os ícones dos produtos em ladrilhos, deitados em perspectiva */
.p-cr-ics{perspective:900px;padding:4px 0 8px;-webkit-mask:linear-gradient(90deg,#0000,#000 12% 88%,#0000);mask:linear-gradient(90deg,#0000,#000 12% 88%,#0000)}
.p-cr-ics-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;transform:rotateX(24deg) rotateZ(-5deg) scale(.9);transform-origin:50% 50%}
.p-cr-ics span{display:block;aspect-ratio:1;border-radius:16px;background:linear-gradient(160deg,#1d1d1d,#0f0f0f);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 16px 30px -14px rgba(0,0,0,.9);overflow:hidden}
.p-cr-ics span.z{box-shadow:0 0 0 1.5px rgba(255,84,72,.75) inset,0 0 32px rgba(217,45,32,.4)}
.p-cr-ics img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:48rem){.p-cr-ics-in{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;transform:rotateX(28deg) rotateZ(-8deg) scale(1.02)}.p-cr-ics span{border-radius:20px}}
/* a linha do tempo: três avisos em vidro */
.p-cr-not{display:grid;gap:8px;align-self:center;width:100%}
.p-cr-not-i{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.p-cr-not-i>i{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff}
.p-cr-not-i>i svg{width:16px;height:16px}
.p-cr-not-i b{font-size:1rem;line-height:1.2;font-weight:600;color:#fff}
.p-cr-not-i em{font-style:normal;font-size:.875rem;line-height:1.3;color:var(--lp-mut)}
.p-cr-not-i--x>i{color:var(--lp-mut2)}
.p-cr-not-i--ok{background:rgba(217,45,32,.12);box-shadow:0 0 0 1px rgba(255,84,72,.45) inset}
.p-cr-not-i--ok>i{background:linear-gradient(160deg,#e23428,#a81a12)}
/* o medidor: o ponteiro vai do percentual ao valor fixo */
.p-cr-gau{display:block;width:min(100%,240px);height:auto;align-self:center;justify-self:center;overflow:visible}
.p-cr-gau-a,.p-cr-gau-b{fill:none;stroke-width:16;stroke-linecap:round}
.p-cr-gau-a{stroke:rgba(255,255,255,.3)}
.p-cr-gau-b{stroke:var(--red-hi);filter:drop-shadow(0 0 8px rgba(255,84,72,.5))}
.p-cr-gau-t{fill:#fff;font-size:24px;font-weight:700;text-anchor:middle}
.p-cr-gau-p rect{fill:#fff}
.p-cr-gau-p{transform-box:view-box;transform-origin:120px 130px;transform:rotate(-40deg)}
.p-cr-gau-c{fill:#1b1b1b;stroke:rgba(255,255,255,.3);stroke-width:2}
@media (max-width:47.99rem){.p-cr-not-i{padding:10px 12px}.p-cr-not-i>i{width:32px;height:32px}}

/* ---------- 4. carrossel: o cartão do meio grande, os vizinhos atrás dele, aparecendo nas bordas (sem sair da largura) ---------- */
.p-cr-car{position:relative}
.p-cr-car-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.p-cr-car-l{list-style:none;margin:0;padding:8px 0;display:grid;contain:paint;
  -webkit-mask:linear-gradient(90deg,#0000,#000 8% 92%,#0000);mask:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}
.p-cr-cc{grid-area:1/1;justify-self:center;width:78%;--x:0;--a:0;z-index:calc(3 - var(--a));
  transform:translateX(calc(var(--x)*var(--sh,30%))) scale(calc(1 - var(--a)*.16));opacity:calc(1 - var(--a)*.5);transition:transform .6s var(--ease),opacity .6s var(--ease)}
.p-cr-cc a{display:grid;gap:12px;height:100%;padding:16px;border-radius:24px;color:#fff;
  background:radial-gradient(100% 190% at 15% 0,#171717,#101010 66%);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.p-cr-cc-t{font-size:clamp(1.25rem,.9rem + 1.6vw,2.5rem);line-height:1.04;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.p-cr-cc-m{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.p-cr-cc-m img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.p-cr-cc-d{display:inline-flex;align-items:center;min-height:44px;margin-block:-8px;font-size:1rem;font-weight:600;color:var(--red-hi)}
.p-cr-car:has(#p-cr-car-0:checked) .p-cr-cc:nth-child(2),.p-cr-car:has(#p-cr-car-1:checked) .p-cr-cc:nth-child(3){--x:1;--a:1}
.p-cr-car:has(#p-cr-car-1:checked) .p-cr-cc:nth-child(1),.p-cr-car:has(#p-cr-car-2:checked) .p-cr-cc:nth-child(2){--x:-1;--a:1}
.p-cr-car:has(#p-cr-car-0:checked) .p-cr-cc:nth-child(3){--x:2;--a:2}
.p-cr-car:has(#p-cr-car-2:checked) .p-cr-cc:nth-child(1){--x:-2;--a:2}
.p-cr-car:has(#p-cr-car-0:checked) .p-cr-cc:nth-child(3),.p-cr-car:has(#p-cr-car-2:checked) .p-cr-cc:nth-child(1){opacity:0;visibility:hidden}
.p-cr-car-p{display:flex;justify-content:center;gap:4px;margin-top:12px}
.p-cr-car-p label{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;border-radius:50%}
.p-cr-car-p label::before{content:"";width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.3);transition:transform .3s var(--ease),background-color .3s}
.p-cr-car:has(#p-cr-car-0:checked) label[for="p-cr-car-0"]::before,.p-cr-car:has(#p-cr-car-1:checked) label[for="p-cr-car-1"]::before,
.p-cr-car:has(#p-cr-car-2:checked) label[for="p-cr-car-2"]::before{background:var(--red-hi);transform:scaleX(2.5)}
.p-cr-car:has(#p-cr-car-0:focus-visible) label[for="p-cr-car-0"],.p-cr-car:has(#p-cr-car-1:focus-visible) label[for="p-cr-car-1"],
.p-cr-car:has(#p-cr-car-2:focus-visible) label[for="p-cr-car-2"]{outline:2px solid var(--red-hi);outline-offset:-4px}
@media (min-width:48rem){
  .p-cr-cc{width:62%;--sh:36%}
  .p-cr-cc a{gap:20px;padding:32px;border-radius:36px}
  .p-cr-cc-m{border-radius:20px}
  .p-cr-car-p{margin-top:20px}
}

/* ---------- 5. dois cartões e o botão embaixo ---------- */
.p-cr-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.p-cr-duo .rd-card{display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;height:100%;padding:18px 14px;overflow:hidden}
.p-cr-duo .rd-h3{margin:0;font-size:clamp(1rem,.6rem + 1.9vw,2.5rem)}
.p-cr-duo-cta{display:flex;justify-content:center;margin-top:24px}
@media (min-width:48rem){
  .p-cr-duo{gap:16px}
  .p-cr-duo .rd-card{gap:28px;padding:40px 36px;min-height:520px}
  .p-cr-duo-cta{margin-top:32px}
}
.p-cr-graf{position:relative;align-self:end;width:100%;aspect-ratio:4/5}
@media (min-width:48rem){.p-cr-graf{aspect-ratio:400/280}}
.p-cr-graf svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-cr-gb{fill:rgba(255,255,255,.1)}
.p-cr-gf{fill:var(--red-hi)}
.p-cr-gf--1{filter:drop-shadow(0 0 14px rgba(255,84,72,.5))}
.p-cr-gv{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.p-cr-gx{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.5;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.p-cr-tag{position:absolute;padding:6px 10px;border-radius:999px;font-size:.875rem;font-weight:600;line-height:1.1;white-space:nowrap;color:#fff;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.p-cr-tag--r{left:0;top:4%;padding:8px 14px;font-size:1rem;background:linear-gradient(160deg,#e23428,#a81a12);box-shadow:0 12px 30px -10px rgba(217,45,32,.7)}
.p-cr-tag--x{left:59%;top:18%;translate:-50% 0}
@media (max-width:47.99rem){.p-cr-tag--r{padding:6px 10px;font-size:.875rem}.p-cr-tag--x{left:auto;right:0;top:20%;translate:none}}
/* o vidro com o status do extrato, sobre as barras apagadas */
.p-cr-vid{position:absolute;right:0;top:0;z-index:1;display:grid;justify-items:start;gap:2px;width:min(80%,320px);padding:10px 12px;border-radius:16px;
  background:rgba(20,20,20,.72);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-cr-vid-st,.p-cr-vid-d{font-size:.875rem;line-height:1.3;color:var(--lp-mut2)}
.p-cr-vid b{font-size:clamp(1rem,.8rem + 1.4vw,2rem);line-height:1.05;font-weight:700;color:#fff;letter-spacing:-.02em}
@media (min-width:48rem){.p-cr-vid{padding:16px 20px;border-radius:18px}}

/* ---------- 6. sanfona com o celular e as barras ao fundo ---------- */
.p-cr-acc{display:grid;grid-template-columns:minmax(0,1fr) 36%;grid-template-areas:"h h" "p p" "l m";gap:14px 12px;align-items:start}
.p-cr-acc-tx{display:contents}
.p-cr-acc .lp-h2{grid-area:h;margin:0}
.p-cr-acc .lp-p{grid-area:p;margin:0}
.p-cr-acc-l{grid-area:l;display:grid;align-self:center}
.p-cr-acc-l details{border-bottom:1px solid var(--line)}
.p-cr-acc-l summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px;padding:10px 0;cursor:pointer;list-style:none;
  font-size:1rem;line-height:1.25;font-weight:600;color:#fff}
.p-cr-acc-l summary::-webkit-details-marker{display:none}
.p-cr-acc-l summary svg{width:16px;height:16px;color:var(--red-hi);transition:transform .3s var(--ease)}
.p-cr-acc-l details[open] summary svg{transform:rotate(45deg)}
.p-cr-acc-l summary:focus-visible{outline:2px solid var(--red-hi);outline-offset:2px}
.p-cr-acc-l p{margin:0;padding:0 0 14px;font-size:1rem;line-height:1.45;color:var(--lp-mut2)}
.p-cr-acc-m{grid-area:m;position:relative;display:grid;justify-items:center;padding:12% 0 0}
/* as 12 mensalidades ao fundo do celular: barras iguais, a 1ª acesa em vermelho (SVG embutido) */
.p-cr-acc-m::before{content:"";position:absolute;left:0;right:0;bottom:6%;z-index:-1;height:70%;pointer-events:none;
  -webkit-mask:linear-gradient(#0000,#000 30%,#000 70%,#0000);mask:linear-gradient(#0000,#000 30%,#000 70%,#0000);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.09'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.01'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff5448' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23d92d20' stop-opacity='.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='18' y='120' width='84' height='300' rx='18' fill='url(%23r)'/%3E%3Cg fill='url(%23g)'%3E%3Crect x='138' y='120' width='84' height='300' rx='18'/%3E%3Crect x='258' y='120' width='84' height='300' rx='18'/%3E%3Crect x='378' y='120' width='84' height='300' rx='18'/%3E%3Crect x='498' y='120' width='84' height='300' rx='18'/%3E%3Crect x='618' y='120' width='84' height='300' rx='18'/%3E%3Crect x='738' y='120' width='84' height='300' rx='18'/%3E%3Crect x='858' y='120' width='84' height='300' rx='18'/%3E%3Crect x='978' y='120' width='84' height='300' rx='18'/%3E%3Crect x='1098' y='120' width='84' height='300' rx='18'/%3E%3Crect x='1218' y='120' width='84' height='300' rx='18'/%3E%3Crect x='1338' y='120' width='84' height='300' rx='18'/%3E%3C/g%3E%3C/svg%3E") 50% 100%/100% 100% no-repeat}
.p-cr-acc-m .lp-cel{width:100%;max-width:320px}
.p-cr-acc-s .lp-in{isolation:isolate}
@media (min-width:48rem){
  .p-cr-acc{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"h m" "p m" "l m";grid-template-rows:auto auto minmax(0,1fr);column-gap:clamp(32px,6vw,96px);row-gap:20px}
  .p-cr-acc-l{align-self:start;margin-top:8px}
  .p-cr-acc-l summary{min-height:64px;font-size:1.25rem}
  .p-cr-acc-m{padding:0;align-self:center}
  .p-cr-acc-m::before{left:-24%}
}

/* ---------- movimento (só com JS e sem pedido de menos movimento) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* o número vira e volta, como o 0.6 da a referência */
  .js-ok .rd-c.on .p-cr-flip-de{animation:p-cr-vira-de 6s var(--ease) .6s infinite}
  .js-ok .rd-c.on .p-cr-flip-pa{animation:p-cr-vira-pa 6s var(--ease) .6s infinite}
  .js-ok .rd-c.on .p-cr-flip:last-child>span{animation-delay:.75s}
  .js-ok .rd-c.on .p-cr-flip-u1{animation:p-cr-troca-a 6s var(--ease) .6s infinite}
  .js-ok .rd-c.on .p-cr-flip-u2{animation:p-cr-troca-b 6s var(--ease) .6s infinite}
  .js-ok .rd-c.on .p-cr-rel-p{animation:p-cr-gira 6s linear .6s infinite}
  .js-ok .rd-c:not(.on) :is(.p-cr-fila i.z,.p-cr-rel-m rect.z){opacity:0}
  .js-ok .rd-c.on .p-cr-rel-m rect.z{animation:p-cr-surge .4s var(--ease) .5s both}
  .js-ok .rd-c.on .p-cr-fila--c i.z{animation:p-cr-surge .35s var(--ease) both;animation-delay:calc(var(--i)*90ms + .3s)}
  .js-ok .rd-c.on .p-cr-fila--r i.z{animation:p-cr-surge .35s var(--ease) .3s both,p-cr-pulsa 2.4s ease-in-out 1.4s infinite}
  .js-ok .rd-c:not(.on) :is(.p-cr-ics span,.p-cr-not-i){opacity:0}
  .js-ok .rd-c.on .p-cr-ics span{animation:p-cr-sobe .5s var(--ease) both;animation-delay:calc(var(--i)*50ms + .3s)}
  .js-ok .rd-c.on .p-cr-not-i{animation:p-cr-sobe .5s var(--ease) both}
  .js-ok .rd-c.on .p-cr-not-i:nth-child(2){animation-delay:.45s}
  .js-ok .rd-c.on .p-cr-not-i:nth-child(3){animation-delay:.9s}
  .js-ok .rd-c.on .p-cr-gau-p{animation:p-cr-mede 4s ease-in-out .6s infinite}
  .js-ok .rd-c:not(.on) :is(.p-cr-gb,.p-cr-gf,.p-cr-gv,.p-cr-gx,.p-cr-tag,.p-cr-vid){opacity:0}
  .js-ok .rd-c.on :is(.p-cr-gb,.p-cr-gv){animation:p-cr-surge .4s var(--ease) both;animation-delay:calc(var(--i)*60ms + .3s)}
  .js-ok .rd-c.on .p-cr-gf{animation:p-cr-surge .4s var(--ease) both;animation-delay:calc(var(--i)*60ms + .5s)}
  .js-ok .rd-c.on :is(.p-cr-gx,.p-cr-tag--x){animation:p-cr-surge .5s var(--ease) 1.1s both}
  .js-ok .rd-c.on .p-cr-tag--r{animation:p-cr-sobe .6s var(--ease) .5s both}
  .js-ok .rd-c.on .p-cr-vid{animation:p-cr-sobe .7s var(--ease) .9s both}
  .js-ok .p-cr-fig:not(.in) :is(.p-cr-lista,.p-cr-fig-m img){opacity:0}
  .js-ok .p-cr-fig.in .p-cr-fig-m img{animation:p-cr-sobe .8s var(--ease) both}
  .js-ok .p-cr-fig.in .p-cr-lista{animation:p-cr-sobe .7s var(--ease) .35s both}
}
@media (prefers-reduced-motion:reduce){.p-cr-cc,.p-cr-car-p label::before,.p-cr-acc-l summary svg{transition:none}}
@keyframes p-cr-surge{from{opacity:0}to{opacity:1}}
@keyframes p-cr-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes p-cr-pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes p-cr-gira{from{transform:rotate(18deg)}to{transform:rotate(378deg)}}
@keyframes p-cr-mede{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(40deg)}}
/* 0–40%: 12 · 45–50%: vira · 50–90%: 01 · 95–100%: volta */
@keyframes p-cr-vira-de{0%,40%{opacity:1;transform:none}48%,92%{opacity:0;transform:rotateX(-90deg)}100%{opacity:1;transform:none}}
@keyframes p-cr-vira-pa{0%,40%{opacity:0;transform:rotateX(90deg)}48%,92%{opacity:1;transform:none}100%{opacity:0;transform:rotateX(90deg)}}
@keyframes p-cr-troca-a{0%,40%{opacity:1}48%,92%{opacity:0}100%{opacity:1}}
@keyframes p-cr-troca-b{0%,40%{opacity:0}48%,92%{opacity:1}100%{opacity:0}}

/* 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))}}

/* carrossel: o rótulo vermelho do cartão de trás (opacidade .5) caía para 2,28:1 sobre o fundo dele (medição de
   19/10/2026: #ff5448 a 50% sobre #101010 vira #87322c). Atrás, o rótulo fica branco, que a 50% dá 5,3:1 e lê como
   "inativo"; o cartão da frente (--a:0) continua com o vermelho, e a troca acompanha os .6s do cartão. */
.p-cr-cc-d{color:color-mix(in srgb,var(--red-hi) clamp(0%,(1 - var(--a))*100%,100%),#fff);transition:color .6s var(--ease)}
@media (prefers-reduced-motion:reduce){.p-cr-cc-d{transition:none}}