/* /plataforma — CSS só desta página (prefixo p-pla-). Clone da a referência
   Celular primeiro; a composição do computador se mantém em 360 (o que é lado a lado lá, fica lado a lado aqui).
   Movimento só com transform/opacity; "menos movimento" desliga deslocamento e carrossel automático. */

/* moldura de cartão da casa (borda degradê de 1px + fundo radial), a mesma família do .rd-borda */
.p-pla-modo-in,.p-pla-b,.p-pla-ap-c,.p-pla-car-c,.p-pla-kb-c{
  border:1px solid transparent;
  background:radial-gradient(120% 120% at 0 0,#171717 0,#0d0d0d 60%,#0a0a0a 100%) padding-box,
             linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,.1)) border-box}

.p-pla-hero-nota{display:block;margin-top:6px;font-size:.8125rem;color:var(--lp-mut)}
.p-pla-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 1. cartões grandes um sob o outro, como na a referência (os "Modos de negociação") ---------- */
.p-pla-modos{display:grid;gap:16px;margin-top:clamp(28px,4vw,48px)}
.p-pla-modo-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 36%;min-height:400px;border-radius:28px;overflow:clip;isolation:isolate}
.p-pla-modo-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:72% 0;opacity:.2;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 55%,transparent 100%)}
.p-pla-modo-in::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 82% 50%,rgba(217,45,32,.24),transparent 70%)}
.p-pla-modo-x{display:grid;grid-template-rows:auto 1fr auto;padding:24px 0 24px 20px}
.p-pla-modo-x h3{font-size:1.5rem;line-height:1.05;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-pla-modo-pe{grid-row:3;display:grid;gap:14px;justify-items:start}
.p-pla-modo-pe p{font-size:1rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
.p-pla-modo-cel{align-self:center;padding:20px 14px 20px 8px}
.p-pla-modo-cel .lp-cel{width:100%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.6))}
@media (min-width:768px){
  .p-pla-modos{gap:24px;max-width:944px;margin-inline:auto}
  .p-pla-modo-in{grid-template-columns:minmax(0,1fr) 290px;min-height:478px;border-radius:40px}
  .p-pla-modo-x{padding:44px 0 44px 48px}
  .p-pla-modo-x h3{font-size:2.5rem;line-height:1}
  .p-pla-modo-pe{max-width:24em}
  .p-pla-modo-pe p{font-size:1.125rem}
  .p-pla-modo-cel{padding:32px 64px 32px 16px}
  .p-pla-modo-bg{object-position:100% 0;opacity:.36;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 35%,#000 80%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 35%,#000 80%)}
}

/* ---------- 2. "Descubra a Rede" (o Flex): texto à esquerda, a mão no centro, barras inclinadas atrás ---------- */
.p-pla-flex-g{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:12px;isolation:isolate}
.p-pla-flex-x{display:grid;gap:14px;justify-items:start}
.p-pla-flex-x p{font-size:1.0625rem;line-height:1.4;color:var(--lp-mut);text-wrap:pretty}
.p-pla-flex-x p b{display:block;color:#fff;font-weight:600;margin-bottom:4px}
.p-pla-flex-m img{display:block;width:100%;height:auto;max-width:420px;margin-inline:auto}
.p-pla-barras{position:absolute;inset:8% 0 4% 34%;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);display:flex;align-items:flex-end;justify-content:center;gap:4%;contain:paint;pointer-events:none}
.p-pla-barras i{flex:1 1 0;height:calc(40% + var(--h,0%));border-radius:10px;transform:skewX(-14deg) scaleY(1);transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));transition:transform 1s var(--ease)}
.p-pla-barras i:nth-child(1){--h:5%}.p-pla-barras i:nth-child(2){--h:22%}.p-pla-barras i:nth-child(3){--h:12%}
.p-pla-barras i:nth-child(4){--h:38%}.p-pla-barras i:nth-child(5){--h:55%;background:linear-gradient(180deg,rgba(255,84,72,.42),rgba(217,45,32,.04))}
.p-pla-barras i:nth-child(6){--h:30%}.p-pla-barras i:nth-child(7){--h:46%}.p-pla-barras i:nth-child(8){--h:20%}.p-pla-barras i:nth-child(9){--h:34%}
.p-pla-barras i:nth-child(odd){transition-delay:.12s}
.js-ok .p-pla-flex-g:not(:has(.p-pla-flex-m.in)) .p-pla-barras i{transform:skewX(-14deg) scaleY(.25)}
@media (min-width:900px){
  .p-pla-flex-g{grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr);gap:32px}
  .p-pla-flex-x{max-width:300px}
  .p-pla-flex-x p{font-size:1.25rem}
  .p-pla-barras{inset:4% 0 0 0}
}

/* ---------- 3. bento "Por que" ---------- */
.p-pla-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.p-pla-b{position:relative;display:grid;align-content:start;gap:12px;padding:18px 16px;border-radius:24px;overflow:clip;isolation:isolate}
.p-pla-b h3{font-size:1.0625rem;line-height:1.25;font-weight:500;color:var(--lp-mut);text-wrap:balance}
.p-pla-b h3 b{color:#fff;font-weight:600}
.p-pla-b .rd-link{justify-self:start}
.p-pla-b>h3,.p-pla-b>.rd-link,.p-pla-ap-c>h3,.p-pla-ap-c>.p-pla-chips,.p-pla-ap-c>.rd-link,.p-pla-ap-cel{position:relative;z-index:1}
.p-pla-b-med{position:absolute;right:-14%;bottom:-6%;width:90%;pointer-events:none;mix-blend-mode:lighten}
.p-pla-b-med img,.p-pla-b-moeda img,.p-pla-b-escada img{display:block;width:100%;height:auto;mix-blend-mode:lighten}
.p-pla-b-cel{position:absolute;left:12%;right:12%;top:54%;z-index:-1}
.p-pla-b-cel .lp-cel{width:100%}
.p-pla-b--a,.p-pla-b--b{min-height:300px}
.p-pla-b--c{grid-column:span 2;grid-template-columns:minmax(0,1fr) 36%;align-items:center;column-gap:8px;padding:22px 16px}
.p-pla-b-gr{grid-column:1;font-size:1.5rem!important;line-height:1.05!important;font-weight:600!important;color:#fff!important;letter-spacing:-.02em}
.p-pla-b-gr span{display:block;color:var(--red-hi)}
.p-pla-b-sub{grid-column:1;font-size:1rem;line-height:1.4;color:var(--lp-mut)}
.p-pla-b-moeda{grid-column:2;grid-row:1 / span 2}
.p-pla-b--d{grid-row:span 2;min-height:360px}
.p-pla-b-med--alto{right:-20%;bottom:0;width:124%}
.p-pla-b-escada{margin-top:auto}
.p-pla-b-barra{display:block;height:8px;margin-top:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:clip}
.p-pla-b-barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red-d),var(--red-hi));transform-origin:0 50%;transform:scaleX(.62);transition:transform 1.4s var(--ease) .2s}
.js-ok .p-pla-b--e:not(.in) .p-pla-b-barra i{transform:scaleX(0)}
.p-pla-b--f{align-content:center;border:0;background:linear-gradient(150deg,#c8261b,#8f140d)}
.p-pla-b--f p{font-size:1.0625rem;line-height:1.3;font-weight:600;color:#fff;text-wrap:balance}
@media (min-width:768px){
  .p-pla-bento{gap:20px}
  .p-pla-b{padding:32px;border-radius:40px;gap:16px}
  .p-pla-b h3{font-size:1.5rem;line-height:1.15}
  .p-pla-b--a,.p-pla-b--b{min-height:400px}
  .p-pla-b--c{padding:36px 40px;grid-template-columns:minmax(0,1fr) 280px}
  .p-pla-b-gr{font-size:2.75rem!important}
  .p-pla-b-sub{font-size:1.125rem;max-width:28em}
  .p-pla-b--d{min-height:520px}
  .p-pla-b-med{width:72%;right:-6%}
  .p-pla-b-med--alto{width:104%;right:-10%}
  .p-pla-b-cel{left:26%;right:26%;top:44%}
  .p-pla-b--f p{font-size:1.75rem;line-height:1.15}
}

/* ---------- 4. conta de demonstração: o aparelho com o cartão de vidro por cima e o texto com o botão ---------- */
.p-pla-demo-g{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
.p-pla-demo-m{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;isolation:isolate}
.p-pla-demo-m::before{content:"";position:absolute;inset:6% 14%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(217,45,32,.4),transparent);pointer-events:none}
.p-pla-demo-cel{grid-column:1;grid-row:1;width:min(100%,250px);justify-self:end}
.p-pla-demo-cel .lp-cel{width:100%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7))}
.p-pla-vidro{grid-column:2;grid-row:1;position:relative;z-index:1;display:grid;gap:4px;padding:8px;border-radius:20px;margin-left:-22%;
  background:rgba(22,22,24,.74);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 30px 60px -20px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-pla-vidro li{display:grid;gap:2px;padding:9px 10px;border-radius:12px;font-size:1rem;line-height:1.25;color:var(--lp-mut2)}
.p-pla-vidro li b{font-weight:600}
.p-pla-vidro li span{font-size:.875rem;color:var(--lp-mut2)}
.p-pla-vidro li.on{background:rgba(255,255,255,.08);color:#fff;box-shadow:0 0 0 1px rgba(255,84,72,.45) inset}
.p-pla-demo-x{display:grid;gap:18px;justify-items:center;text-align:center}
.p-pla-demo-h span{display:block;color:var(--lp-mut)}
@media (min-width:900px){
  .p-pla-demo-g{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .p-pla-vidro{grid-column:1;margin:0 -18% 0 0;padding:12px}
  .p-pla-demo-cel{grid-column:2;justify-self:center}
  .p-pla-demo-x{justify-items:start;text-align:left}
}

/* ---------- 5. "Venda de qualquer aparelho" ---------- */
.p-pla-ap-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.p-pla-ap-c{position:relative;display:grid;align-content:start;gap:10px;min-height:400px;padding:18px 14px 0;border-radius:24px;overflow:clip;isolation:isolate}
.p-pla-ap-c h3{font-size:1.375rem;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:#fff}
.p-pla-ap-c .rd-link{justify-self:start}
.p-pla-chips{display:flex;flex-wrap:wrap;gap:6px}
.p-pla-chips li{padding:5px 10px;border-radius:99px;font-size:.8125rem;line-height:1.3;color:#fff;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px var(--line) inset}
.p-pla-ap-qr{position:absolute;right:-20%;top:34%;width:72%;pointer-events:none;mix-blend-mode:lighten}
.p-pla-ap-qr img{display:block;width:100%;height:auto}
.p-pla-ap-c--cel{grid-template-rows:auto auto auto 1fr;align-content:stretch}
.p-pla-ap-cel{align-self:end;width:66%;margin:8px 0 -30% 4%}
.p-pla-ap-cel .lp-cel{width:100%}
.p-pla-ap-c--pc{grid-template-rows:auto auto 1fr auto}
/* o print sangra pela borda direita: quem recorta é o próprio cartão, não uma caixa em volta do print */
.p-pla-ap-tela{align-self:end;min-width:0;margin:6px -14px 0 0}
.p-pla-ap-tela img{display:block;width:190%;max-width:none;height:auto;border-radius:12px 0 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.p-pla-ap-btn{justify-self:start;margin:14px 0 18px;min-height:48px;padding-inline:1em;background:#fff;color:#000}
.p-pla-ap-btn .ic{display:none}
.p-pla-ap .lp-head .lp-p{color:var(--lp-mut)}
@media (min-width:768px){
  .p-pla-ap-g{gap:20px}
  .p-pla-ap-c{min-height:540px;padding:36px 36px 0;border-radius:40px;gap:16px}
  .p-pla-ap-c h3{font-size:2rem}
  .p-pla-chips li{font-size:.9375rem;padding:6px 14px}
  .p-pla-ap-qr{right:-4%;top:26%;width:46%}
  .p-pla-ap-cel{width:52%;margin:16px 0 -20% 8%}
  .p-pla-ap-tela{margin-right:-36px}
  .p-pla-ap-tela img{width:150%}
  .p-pla-ap-btn{margin-bottom:36px;padding-inline:1.35em}
  .p-pla-ap-btn .ic{display:inline-block}
}

/* ---------- 6. carrossel em leque (sem depoimento: as outras telas) ---------- */
.p-pla-car-vp{overflow:clip;padding-block:8px}
.p-pla-car-trk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.p-pla-car-c{display:grid;align-content:start;gap:10px;padding:22px 18px;border-radius:28px}
.p-pla-car-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--red-hi);background:rgba(217,45,32,.14);box-shadow:0 0 0 1px rgba(255,84,72,.3) inset}
.p-pla-car-ic .ic{width:22px;height:22px}
.p-pla-car-tela{font-size:.875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--lp-mut)}
.p-pla-car-c h3{font-size:1.25rem;line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p-pla-car-c p{font-size:1rem;line-height:1.5;color:var(--lp-mut2)}
.p-pla-car-c .rd-link{justify-self:start;margin-top:4px}
.p-pla-car-dots{display:none}
.p-pla-car--on .p-pla-car-trk{display:flex;gap:16px;transition:transform .7s var(--ease)}
.p-pla-car--on .p-pla-car-c{flex:0 0 min(80%,400px);opacity:.4;transform:scale(.9);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.p-pla-car--on .p-pla-car-c.on{opacity:1;transform:none}
.p-pla-car--on .p-pla-car-dots{display:flex;justify-content:center;margin-top:8px}
.p-pla-car-dots button{display:grid;place-items:center;width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer}
.p-pla-car-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.3;transition:opacity .3s,transform .3s var(--ease)}
.p-pla-car-dots [aria-pressed="true"] i{opacity:1;transform:scale(1.4)}
@media (min-width:900px){
  .p-pla-car-trk{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-pla-car-c{padding:32px;border-radius:40px;gap:14px}
  .p-pla-car-c h3{font-size:1.5rem}
}

/* ---------- 7. as 12 áreas: o 12 em metal e a fila de selos que desliza (o "12 anos de excelência") ---------- */
.p-pla-12 .lp-head{position:relative;z-index:1;margin-bottom:0}
.p-pla-12 .lp-h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.p-pla-doze-img{max-width:1100px;margin:-4px auto 0;-webkit-mask-image:radial-gradient(50% 50% at 50% 46%,#000 62%,transparent 100%);mask-image:radial-gradient(50% 50% at 50% 46%,#000 62%,transparent 100%)}
.p-pla-doze-img img{display:block;width:100%;height:auto}
.p-pla-doze-vp{position:relative;margin-top:-7%;overflow:clip;padding-block:4px}
.p-pla-doze-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
.p-pla-doze-l li{display:grid;justify-items:center;align-content:start;gap:8px;text-align:center}
.p-pla-doze-l button{position:relative;display:inline-grid;place-items:center;min-height:44px;padding:0 16px;border:0;border-radius:99px;cursor:pointer;isolation:isolate;
  font:600 1rem/1 inherit;font-family:inherit;color:#d9d9d9;background:rgba(255,255,255,.12)}
.p-pla-doze-l button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff;opacity:0;transition:opacity .35s var(--ease)}
.p-pla-doze-l li.on button{color:#000}
.p-pla-doze-l li.on button::before{opacity:1}
.p-pla-doze-l p{font-size:.9375rem;line-height:1.3;color:var(--lp-mut);max-width:14em;text-wrap:balance}
.p-pla-doze-l li.on p{color:#fff}
.p-pla-doze--on .p-pla-doze-l{display:flex;gap:0;transition:transform .7s var(--ease)}
.p-pla-doze--on .p-pla-doze-l li{flex:0 0 46%}
@media (min-width:768px){
  .p-pla-doze-l{grid-template-columns:repeat(6,minmax(0,1fr))}
  .p-pla-doze--on .p-pla-doze-l li{flex-basis:196px}
  .p-pla-doze-vp{max-width:980px;margin:-6% auto 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
}

/* ---------- 9. base de conhecimento: cartões largos, texto à esquerda e mídia à direita ---------- */
.p-pla-kb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.p-pla-kb-c{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:24px;overflow:clip}
.p-pla-kb-x{grid-row:2;display:grid;align-content:start;gap:8px;padding:12px 14px 14px}
.p-pla-kb-x h3{font-size:1.0625rem;line-height:1.2;font-weight:600;color:#fff;text-wrap:balance}
.p-pla-kb-x p{display:none;font-size:1rem;line-height:1.5;color:var(--lp-mut2)}
.p-pla-kb-x .rd-link{justify-self:start;margin-top:2px;transform:none}
.p-pla-kb-x .rd-link::after{content:"";position:absolute;inset:0;z-index:2}
.p-pla-kb-m{grid-row:1;display:block;aspect-ratio:3/2;overflow:clip;background:#0b0b0b}
.p-pla-kb-m img{display:block;width:100%;height:100%;object-fit:cover}
.p-pla-kb-m--print img{object-position:0 0}
@media (min-width:900px){
  .p-pla-kb{gap:20px}
  .p-pla-kb-c{grid-template-columns:minmax(0,1fr) 46%;grid-template-rows:none;min-height:230px;border-radius:32px}
  .p-pla-kb-x{grid-row:1;padding:28px 8px 28px 28px;align-content:center}
  .p-pla-kb-x h3{font-size:1.5rem}
  .p-pla-kb-x p{display:block}
  .p-pla-kb-m{position:relative;grid-row:1;grid-column:2;aspect-ratio:auto;margin:16px 16px 16px 0;border-radius:20px}
  .p-pla-kb-m img{position:absolute;inset:0}
  .p-pla-kb-m--print{margin:28px 0 0;border-radius:16px 0 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
}
@media (hover:hover) and (pointer:fine){
  .p-pla-kb-m img{transition:transform .6s var(--ease)}
  .p-pla-kb-c:hover .p-pla-kb-m img{transform:scale(1.04)}
  .p-pla-doze-l button:hover::before{opacity:.25}
  .p-pla-doze-l li.on button:hover::before{opacity:1}
}
.p-pla-doze-l button:active,.p-pla-car-dots button:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .p-pla-barras i,.p-pla-b-barra i,.p-pla-car-trk,.p-pla-car-c,.p-pla-doze-l,.p-pla-kb-m img{transition:opacity .2s linear!important}
  .js-ok .p-pla-flex-g .p-pla-barras i{transform:skewX(-14deg) scaleY(1)!important}
  .js-ok .p-pla-b--e .p-pla-b-barra i{transform:scaleX(.62)!important}
}