/* /crm-de-vendas — clone do "trading_stocks" da a referência, com a nossa cor, fonte e mídia.
   Ordem da referência: título no centro e o terminal em perspectiva (com o texto no canto) · dois cartões grandes (a placa que
   vira e o gráfico com a etiqueta acesa) · cartão de foto de ponta a ponta com ladrilhos · passos com o celular · abas com
   cartões, setas e barras ao fundo · segundo terminal com os ladrilhos · FAQ.
   Celular primeiro, copiando a composição do computador (lado a lado em 360px, copy resumida); só transform e opacity animam;
   prefers-reduced-motion mostra o estado final sem movimento. Este arquivo só carrega nesta página. */

/* copy resumida só no celular */
.p-crm-sm{display:none}
@media (max-width:37.49rem){.p-crm-lg{display:none}.p-crm-sm{display:inline}}

/* ---------- hero: o Funil de vendas em perspectiva, a faixa de números saltando, o texto no canto ---------- */
.lp-hero{justify-content:flex-start;padding-bottom:56px}
.lp-hero .lp-hero-c{position:relative;width:min(100%,1120px);gap:16px}
.lp-hero .lp-lede{order:2;max-width:22em;font-size:1.125rem;line-height:1.35;color:var(--lp-mut2)}
.lp-hero .lp-lede b{color:#fff;font-weight:600}
.lp-hero .lp-sub{order:1;display:block;width:100%;margin:4px 0 0;font-size:1rem;color:var(--lp-mut)}
.p-crm-q{position:relative;display:block;height:clamp(220px,calc(100svh - 480px),560px);perspective:1200px}
.p-crm-q-in{display:block;width:min(72%,300px);height:100%;margin-inline:auto;border-radius:26px;overflow:hidden;
  transform:rotateX(12deg);transform-origin:50% 0;background:#0b0c0e;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 40px 100px -30px rgba(217,45,32,.4);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.p-crm-q-in picture,.p-crm-q-in img{display:block;width:100%;height:100%}
.p-crm-q-in img{object-fit:cover;object-position:50% 0}
/* no celular o print já traz os mesmos números (grade 2x2): a faixa só aparece onde o print não os mostra */
.p-crm-kpi{position:absolute;z-index:2;left:50%;top:146px;display:none;width:min(94%,360px);border-radius:12px;overflow:hidden;
  translate:-50% 0;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 24px 48px -12px rgba(0,0,0,.95),0 0 44px -14px rgba(255,84,72,.7)}
.p-crm-kpi img{display:block;width:100%;height:auto}
.p-crm-q-leg{position:absolute;left:0;right:0;bottom:0;display:block;font-size:.8125rem;line-height:1.3;color:var(--lp-mut)}
@media (min-width:37.5rem){
  .p-crm-q{height:clamp(320px,calc(100svh - 400px),600px);perspective:1600px}
  .p-crm-q-in{width:100%;border-radius:22px;transform:rotateX(26deg) scale(.96);
    -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 96%);mask-image:linear-gradient(180deg,#000 50%,transparent 96%)}
  /* a faixa sai do próprio lugar no print (em cima, à direita do título) e cresce para fora do quadro */
  .p-crm-kpi{display:block;left:auto;right:14%;top:1%;width:min(40%,430px);translate:none;rotate:-2deg}
  .p-crm-q-leg{left:3%;right:auto;bottom:18px;width:15em;text-align:left}
}
@media (min-width:64rem){
  .lp-hero{padding-bottom:0}
  /* o "As melhores condições…" da a referência: sobre o pé do terminal, à direita, com um escuro atrás para a leitura */
  .lp-hero .lp-lede{position:absolute;z-index:3;right:2%;bottom:72px;width:330px;max-width:none;margin:0;text-align:left;font-size:1.5rem;line-height:1.2}
  .lp-hero .lp-lede::before{content:"";position:absolute;inset:-56px -80px;z-index:-1;pointer-events:none;
    background:radial-gradient(farthest-side,rgba(0,0,0,.94) 56%,rgba(0,0,0,0))}
}
@media (prefers-reduced-motion:no-preference){
  .p-crm-kpi{animation:p-crm-boia 5.5s ease-in-out infinite}
}
@keyframes p-crm-boia{50%{transform:translateY(-8px)}}

/* ---------- 1. dois cartões grandes: a placa que vira e a fila com a etiqueta acesa ---------- */
.p-crm-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.p-crm-c .rd-borda,.p-crm-c .rd-card{border-radius:24px}
.p-crm-c .rd-card{display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;height:100%;min-height:270px;padding:20px 12px 18px;text-align:center;overflow:hidden}
.p-crm-c-t{font-size:clamp(1rem,.85rem + .8vw,1.625rem);line-height:1.12;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-crm-c-t .g{color:var(--lp-mut)}
@media (min-width:48rem){
  .p-crm-duo{gap:20px;margin-top:40px}
  .p-crm-c .rd-borda,.p-crm-c .rd-card{border-radius:40px}
  .p-crm-c .rd-card{min-height:452px;padding:48px 32px 40px}
}

/* a placa: "+" e o dígito que vira de 0 para 1 quando o cartão acende */
.p-crm-pl{display:flex;justify-content:center;align-items:center;gap:6px;align-self:center}
.p-crm-pl-t{position:relative;display:grid;place-items:center;width:clamp(58px,15vw,150px);aspect-ratio:150/190;border-radius:clamp(8px,1.4vw,14px);
  background:linear-gradient(180deg,#232323 0 50%,#2e2e2e 50% 100%);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 18px 40px -16px rgba(0,0,0,.9);
  font-size:clamp(2.75rem,10vw,8.5rem);line-height:1;font-weight:700;letter-spacing:-.04em;color:#fff;perspective:400px}
.p-crm-pl-t::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#0a0a0a}
.p-crm-pl-v b{grid-area:1/1;display:block;backface-visibility:hidden}
.p-crm-pl-a{color:var(--lp-mut)}
.p-crm-pl-b{color:var(--red-hi)}
.js-ok .p-crm-pl-b{opacity:0;transform:rotateX(90deg)}
.js-ok .rd-c.on .p-crm-pl-a{opacity:0;transform:rotateX(-90deg);transition:transform .35s .7s ease-in,opacity .01s 1.05s}
.js-ok .rd-c.on .p-crm-pl-b{opacity:1;transform:none;transition:transform .4s 1.05s cubic-bezier(.22,1,.36,1),opacity .01s 1.05s}
.p-crm-pl-a{opacity:1}
html:not(.js-ok) .p-crm-pl-a{display:none}
.p-crm-pl-rel{display:inline-flex;align-items:center;justify-self:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--lp-mut2);box-shadow:0 0 0 1px var(--line2) inset}
.p-crm-pl-rel .ic{width:14px;height:14px;color:var(--red-hi)}
.p-crm-c .rd-card:has(.p-crm-pl){grid-template-rows:auto minmax(0,1fr) auto}
@media (min-width:48rem){.p-crm-pl{gap:10px}.p-crm-pl-rel{font-size:.9375rem;padding:8px 16px}}

/* a fila: três degraus subindo até a etiqueta acesa, com a mira da referência */
.p-crm-fl{position:relative;display:grid;align-content:center;gap:10px;margin:0;padding:0;list-style:none}
.p-crm-fl::before{content:"";position:absolute;left:-12px;right:-12px;top:calc(50% - 46px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 30%,rgba(255,255,255,.4) 70%,transparent)}
.p-crm-fl li{position:relative;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:7px 10px;border-radius:10px;
  font-size:.8125rem;line-height:1.15;font-weight:600;text-align:left;color:var(--lp-mut2);background:#1a1a1a;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.p-crm-fl li b{flex:none;font-weight:700;color:#fff}
/* a etiqueta acesa: vermelho que segura o texto branco em 4,5:1 */
.p-crm-fl li.p-crm-fl-1{justify-self:end;color:#fff;background:linear-gradient(135deg,#d92d20,#b0241a);box-shadow:0 12px 34px -8px rgba(255,84,72,.7)}
.p-crm-fl-2{justify-self:center}
.p-crm-fl-3{justify-self:start}
.p-crm-fl li.p-crm-fl-3{opacity:.55}
@media (min-width:48rem){
  .p-crm-fl{gap:22px;padding-inline:8%}
  .p-crm-fl::before{top:calc(50% - 74px)}
  .p-crm-fl li{gap:10px;padding:12px 18px;border-radius:14px;font-size:1.0625rem}
  .p-crm-fl li.p-crm-fl-1{font-size:1.25rem;padding:16px 22px}
}
.js-ok .p-crm-fl li{opacity:0;transform:translateY(14px)}
.js-ok .rd-c.on .p-crm-fl li{opacity:1;transform:none;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s}
.js-ok .rd-c.on .p-crm-fl li.p-crm-fl-3{opacity:.55;transition-delay:.55s}
.js-ok .rd-c.on .p-crm-fl-2{transition-delay:.75s}
.js-ok .rd-c.on .p-crm-fl-1{transition-delay:.95s}

/* ---------- 2. cartão de foto de ponta a ponta ---------- */
.p-crm-s-ft .lp-in--l{width:min(100% - 16px,1424px)}
.p-crm-ft{position:relative;isolation:isolate;display:grid;align-content:end;justify-items:center;min-height:clamp(440px,128vw,520px);
  padding:24px 16px 28px;border-radius:24px;overflow:hidden;text-align:center;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.p-crm-ft picture{position:absolute;inset:0;z-index:-2}
.p-crm-ft-img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.p-crm-ft::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.82) 100%)}
/* os ladrilhos ficam sobre as mãos e o notebook, nunca no rosto */
.p-crm-ft-lad{position:absolute;left:50%;top:60%;display:flex;align-items:center;gap:8px;translate:-50% -50%}
.p-crm-ft-lad i{display:grid;place-items:center;width:52px;aspect-ratio:1;border-radius:14px;background:linear-gradient(160deg,#fff,#e9e9e9);
  box-shadow:0 18px 36px -10px rgba(0,0,0,.75)}
.p-crm-ft-lad i:first-child{width:68px;border-radius:18px}
.p-crm-ft-lad .ic{width:44%;height:44%;color:var(--red)}
.p-crm-ft-x{display:grid;justify-items:center;gap:16px}
.p-crm-ft-t{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem);line-height:1.08;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-crm-ft-t span{display:block;color:rgba(255,255,255,.72)}
@media (min-width:37.5rem){
  .p-crm-ft{min-height:0;aspect-ratio:16/9;max-height:800px;padding:40px 32px 56px;border-radius:32px}
  .p-crm-ft-img{object-position:50% 50%}
  .p-crm-ft-lad{top:58%;gap:14px}
  .p-crm-ft-lad i{width:clamp(64px,7vw,104px);border-radius:22px}
  .p-crm-ft-lad i:first-child{width:clamp(84px,9.5vw,148px);border-radius:28px}
}
@media (prefers-reduced-motion:no-preference){
  .p-crm-ft-lad i{animation:p-crm-boia 4.8s ease-in-out infinite}
  .p-crm-ft-lad i:nth-child(2){animation-delay:-1.2s}
  .p-crm-ft-lad i:nth-child(3){animation-delay:-2.4s}
  .p-crm-ft-lad i:nth-child(4){animation-delay:-3.6s}
}

/* ---------- 3. passos com o ativo aceso e o celular com o cartão da meta saltando ---------- */
.p-crm-ps{display:grid;gap:18px;margin-top:20px}
.p-crm-ps-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.p-crm-pb{display:grid;align-content:start;gap:4px;width:100%;min-height:72px;padding:12px 10px;border-radius:14px;text-align:left;
  color:var(--lp-mut);box-shadow:0 0 0 1px var(--line2) inset;transition:background-color .3s,color .3s}
.p-crm-pb b{font-size:.8125rem;font-weight:700;letter-spacing:.04em;color:var(--lp-mut)}
.p-crm-pb span{font-size:.9375rem;line-height:1.15;font-weight:600}
.p-crm-pi.on .p-crm-pb{color:#fff;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,84,72,.6) inset}
.p-crm-pi.on .p-crm-pb b{color:var(--red-hi)}
.p-crm-pb:active{transform:scale(.98)}
.p-crm-pd{display:none}
.p-crm-ps-v{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);align-items:center;gap:16px}
.p-crm-ps-cel{position:relative}
.p-crm-ps-cel .lp-cel{width:100%}
.lp-cel-tela .p-crm-tl{position:absolute;left:0;top:0;width:100%;opacity:0;transition:opacity .5s}
.lp-cel-tela .p-crm-tl.on{opacity:1}
.p-crm-meta{position:absolute;z-index:2;right:-18%;bottom:12%;width:88%;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 24px 48px -12px rgba(0,0,0,.95),0 0 40px -14px rgba(255,84,72,.6)}
.p-crm-meta img{display:block;width:100%;height:auto}
.p-crm-ps-d{padding-left:12%;font-size:1rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
@media (min-width:48rem){
  .p-crm-ps{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:center;gap:clamp(32px,6vw,96px)}
  .p-crm-ps-l{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px)}
  .p-crm-pb{display:flex;align-items:baseline;gap:20px;min-height:44px;padding:0;border-radius:0;box-shadow:none;background:none}
  .p-crm-pi.on .p-crm-pb{box-shadow:none;background:none}
  .p-crm-pb b{font-size:clamp(1.5rem,1rem + 1.6vw,2.5rem);font-weight:600;letter-spacing:-.02em}
  .p-crm-pb span{font-size:clamp(1.5rem,1rem + 1.6vw,2.5rem);line-height:1.05;letter-spacing:-.02em}
  .p-crm-pd{display:block;max-width:30em;margin:10px 0 0 calc(clamp(1.5rem,1rem + 1.6vw,2.5rem)*1.3 + 20px);font-size:1.0625rem;line-height:1.5;
    color:var(--lp-mut);opacity:.5;transition:opacity .3s}
  .p-crm-pi.on .p-crm-pd{opacity:1;color:var(--lp-mut2)}
  .p-crm-ps-v{grid-template-columns:minmax(0,1fr)}
  .p-crm-ps-cel{width:min(100%,320px);margin-inline:auto}
  .p-crm-meta{right:auto;left:-34%;bottom:16%;width:78%;border-radius:16px}
  .p-crm-ps-d{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .p-crm-meta{animation:p-crm-boia 5s ease-in-out infinite}
}

/* ---------- 4. abas em pílula, três cartões por aba, setas e barras desbotadas ao fundo ---------- */
.p-crm-g{position:relative;isolation:isolate;margin-top:8px}
.p-crm-g-bar{position:absolute;inset:-24px 0;z-index:-1;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 55%,transparent 30%,#000 80%);mask-image:radial-gradient(ellipse 60% 60% at 50% 55%,transparent 30%,#000 80%)}
.p-crm-g-bar i{display:block;width:10%;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#1d1d1d,#101010 70%,rgba(16,16,16,0));opacity:.8}
.p-crm-g-bar i:nth-child(1){height:38%}.p-crm-g-bar i:nth-child(2){height:62%}.p-crm-g-bar i:nth-child(3){height:30%}
.p-crm-g-bar i:nth-child(4){height:78%}.p-crm-g-bar i:nth-child(5){height:46%}.p-crm-g-bar i:nth-child(6){height:88%}.p-crm-g-bar i:nth-child(7){height:56%}
.p-crm-g-abas{gap:6px}
.p-crm-g-abas button{padding:0 13px;font-size:.9375rem;background:rgba(255,255,255,.06)}
.p-crm-g-abas button[aria-selected="true"]{background:#fff}
.p-crm-gl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.p-crm-gc{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;justify-items:center;gap:6px;min-width:0;padding:14px 8px 10px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,rgba(28,28,28,.92),rgba(14,14,14,.92));box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.p-crm-gc-ic{display:grid;place-items:center;width:40px;aspect-ratio:1;border-radius:12px;background:linear-gradient(145deg,var(--red-hi),var(--red));box-shadow:0 10px 24px -8px rgba(255,84,72,.6)}
.p-crm-gc-ic .ic{width:20px;height:20px;color:#fff}
.p-crm-gc-n{font-size:.8125rem;line-height:1.2;color:var(--lp-mut2);overflow-wrap:anywhere}
.p-crm-gc-v{font-size:1.125rem;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.p-crm-gc-d{display:none}
.p-crm-gc-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:4px;border-radius:10px;
  font-size:.9375rem;font-weight:600;color:#fff;background:#2a2a2a;transition:background-color .2s,transform .15s}
.p-crm-gc-b .ic{width:14px;height:14px}
.p-crm-gc-b:active,.p-crm-g-s:active{transform:scale(.98)}
.p-crm-g-set{display:flex;justify-content:center;gap:16px;margin-top:20px}
.p-crm-g-s{display:grid;place-items:center;width:48px;height:48px;border-radius:999px;color:#fff;box-shadow:0 0 0 1px var(--line2) inset;transition:background-color .2s,transform .15s}
.p-crm-g-s .ic{width:20px;height:20px}
.p-crm-g-s[data-d="-1"] .ic{rotate:180deg}
@media (hover:hover) and (pointer:fine){.p-crm-gc-b:hover,.p-crm-g-s:hover{background:#3a3a3a}}
@media (min-width:48rem){
  .p-crm-g-abas button{padding:0 18px;font-size:1rem}
  .p-crm-gl{gap:20px;max-width:760px;margin-inline:auto}
  .p-crm-gc{gap:10px;padding:30px 18px 18px;border-radius:24px}
  .p-crm-gc-ic{width:56px;border-radius:14px}
  .p-crm-gc-ic .ic{width:26px;height:26px}
  .p-crm-gc-n{font-size:1rem}
  .p-crm-gc-v{font-size:1.75rem;margin-top:12px}
  .p-crm-gc-d{display:block;font-size:.9375rem;line-height:1.4;color:var(--lp-mut);text-wrap:pretty}
  .p-crm-gc-b{margin-top:10px;border-radius:12px}
}
@media (prefers-reduced-motion:no-preference){
  .p-crm-g .lp-painel:not([hidden]) .p-crm-gc{animation:p-crm-entra .45s cubic-bezier(.22,1,.36,1) both}
  .p-crm-g .lp-painel:not([hidden]) .p-crm-gc:nth-child(2){animation-delay:.06s}
  .p-crm-g .lp-painel:not([hidden]) .p-crm-gc:nth-child(3){animation-delay:.12s}
}
@keyframes p-crm-entra{from{opacity:0;transform:translateY(16px)}}

/* ---------- 5. segundo terminal em perspectiva (Seu dia de vendas) com os medalhões flutuando ---------- */
.p-crm-j{display:grid;gap:8px;text-align:center}
.p-crm-j-q{position:relative;perspective:1400px}
/* a perspectiva alarga o pé do quadro (~25%): a largura de 80% deixa o pé dentro da página */
.p-crm-j-in{width:80%;margin-inline:auto;border-radius:16px;overflow:hidden;transform:rotateX(24deg) scale(.96);transform-origin:50% 0;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 92%);mask-image:linear-gradient(180deg,#000 40%,transparent 92%)}
.p-crm-j-in img{display:block;width:100%;height:auto}
.p-crm-j-m{position:absolute;z-index:2;display:block;width:30%;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
.p-crm-j-m img{display:block;width:100%;height:auto}
.p-crm-j-m1{left:6%;top:4%}
.p-crm-j-m2{left:36%;top:-10%;width:28%}
.p-crm-j-m3{right:6%;top:8%}
.p-crm-j-x{position:relative;z-index:3;display:grid;justify-items:center;gap:14px;margin-top:-14%}
.p-crm-j-x .lp-p{max-width:34em}
@media (min-width:48rem){
  .p-crm-j-in{border-radius:22px;transform:rotateX(30deg) scale(.94)}
  .p-crm-j-m1{left:20%;top:12%;width:22%}
  .p-crm-j-m2{left:39%;top:-2%;width:22%}
  .p-crm-j-m3{right:18%;top:16%;width:22%}
  .p-crm-j-x{margin-top:-22%}
}
@media (prefers-reduced-motion:no-preference){
  .p-crm-j-m{animation:p-crm-boia 5.2s ease-in-out infinite}
  .p-crm-j-m2{animation-delay:-1.7s}
  .p-crm-j-m3{animation-delay:-3.4s}
}

/* menos movimento: estado final, sem viradas nem boias */
@media (prefers-reduced-motion:reduce){
  .js-ok .p-crm-pl-a{display:none}
  .js-ok .p-crm-pl-b{opacity:1;transform:none}
  .js-ok .p-crm-fl li{opacity:1;transform:none}
  .js-ok .p-crm-fl li.p-crm-fl-3{opacity:.55}
  .lp-cel-tela .p-crm-tl{transition:none}
}

/* ---------- guia: a tabela respira depois do último parágrafo ---------- */
#guia .lp-tab-box{margin-top:clamp(28px,4vw,48px)}