/* /link-rastreavel — CSS só desta página (prefixo p-lr-). Clone da a referência
   Celular primeiro; a composição do computador se mantém em 360 (três cartões lado a lado, celular ao lado dos passos,
   texto ao lado da mão no cartão do CTA), com a copy resumida. Movimento só com transform/opacity; "menos movimento"
   desliga a troca automática dos passos (no script) e encurta as transições. */

/* moldura de cartão da casa (borda degradê de 1px + fundo radial), a mesma família do .rd-borda */
.p-lr-t,.p-lr-cta,.p-lr-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}

/* ---------- hero (o do Quickler): texto em cima, a grade com o ladrilho aceso embaixo, a frase no canto ---------- */
.lp-hero--img{justify-content:flex-start;padding-top:104px;padding-bottom:0;
  /* o fundo do herói: a mesma luz do topo das outras páginas (lp.css), que se apaga muito antes do pé do herói, então
     a fronteira com a seção de baixo continua preto sobre preto (sem degrau); o resto é o preto único da página */
  background:radial-gradient(60% 42% at 50% 0,rgba(217,45,32,.13) 0,transparent 72%)}
.lp-hero--img::before{inset:auto 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7) 62%,rgba(0,0,0,.86))}
.lp-hero--img .lp-hero-bg{inset:auto auto 0 50%;width:auto;height:min(60svh,560px);aspect-ratio:3/2;translate:-50% 0;object-fit:cover;
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 52%,#000 58%,#0000 100%);mask:radial-gradient(ellipse 50% 50% at 50% 52%,#000 58%,#0000 100%)}
.lp-hero--img .lp-hero-c{gap:clamp(14px,2vw,22px)}
.lp-hero--img .lp-h1 .line:last-child{color:var(--lp-mut)}
.lp-hero--img .hero-cta{flex-direction:column;align-items:center;gap:6px}
.lp-hero--img .hero-cta>a{flex:0 0 auto;max-width:none}
.lp-hero--img .hero-cta .btn{min-width:min(100%,220px)}
/* o segundo botão vira o link de texto vermelho ("Testar na conta demo >") */
.lp-hero--img .hero-cta .btn-dk{min-height:44px;padding:0 8px;background:none;box-shadow:none;color:var(--red-hi);font-size:1rem;font-weight:600;gap:.3em;text-shadow:0 0 14px #000,0 0 4px #000}
.lp-hero--img .hero-cta .btn-dk .ic{width:1.1em;height:1.1em}
/* a frase do canto: centrada sobre a base no celular, à direita embaixo no computador */
.lp-hero--img .lp-lede{position:absolute;left:var(--pad);right:var(--pad);bottom:78px;max-width:24em;margin-inline:auto;
  font-size:1rem;line-height:1.35;font-weight:500;color:var(--lp-mut2);text-wrap:balance}
.lp-hero--img .lp-lede b{color:#fff;font-weight:600}
@media (min-width:768px){
  .lp-hero--img{padding-top:112px}
  .lp-hero--img .lp-hero-bg{height:min(72svh,700px);bottom:calc(min(72svh,700px)*-.12)}
  .lp-hero--img .lp-h1 .line{display:block}
  .lp-hero--img .lp-lede{left:auto;right:max(var(--pad),calc(50% - 600px));bottom:56px;width:min(300px,34vw);margin:0;
    font-size:1.375rem;line-height:1.15;text-align:left}
}
@media (max-height:640px) and (max-width:767px){.lp-hero--img .lp-lede{display:none}}
/* tela de computador baixa (1024×768, 1280×800): a grade subia até o "Ver como funciona" e o ladrilho vermelho
   ficava atrás do link vermelho (1,08:1, medição de 19/10/2026). A arte desce 8% da própria altura, e o ladrilho
   aceso passa a nascer abaixo do link; a arte é a mesma, só a posição muda */
@media (min-width:768px) and (max-height:820px){.lp-hero--img .lp-hero-bg{bottom:calc(min(72svh,700px)*-.2)}}

/* ---------- 1. "Por que…?": três cartões lado a lado, o objeto 3D embaixo ---------- */
.p-lr-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:clamp(24px,4vw,40px)}
.p-lr-t{position:relative;display:grid;grid-template-rows:auto 1fr;justify-items:center;padding:16px 8px 0;border-radius:20px;contain:paint;isolation:isolate;text-align:center}
.p-lr-t h3{font-size:1rem;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p-lr-t h3 span{display:none;color:var(--lp-mut)}
.p-lr-t-m{align-self:end;width:132%;margin:6px 0 -8%;pointer-events:none}
.p-lr-t-m img{display:block;width:100%;height:auto;mix-blend-mode:lighten;
  -webkit-mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%);mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%)}
.p-lr-t:nth-child(2) .p-lr-t-m{width:96%;margin-bottom:4%}
@media (min-width:768px){
  .p-lr-tri{gap:16px}
  .p-lr-t{min-height:380px;padding:40px 28px 0;border-radius:40px}
  .p-lr-t h3{font-size:1.5rem;line-height:1.1}
  .p-lr-t h3 span{display:inline}
  .p-lr-t-m{width:100%;margin-bottom:-6%}
  .p-lr-t:nth-child(2) .p-lr-t-m{width:72%;margin-bottom:6%}
}

/* ---------- 2. "Como faço…?": celular à esquerda, passos à direita (o título por cima no celular) ---------- */
.p-lr-como{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);grid-template-areas:"t t" "m s";align-items:center;gap:24px 16px}
.p-lr-como-t{grid-area:t;text-align:center}
.p-lr-cel{grid-area:m;position:relative;isolation:isolate}
.p-lr-cel::before{content:"";position:absolute;inset:10% -20%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(217,45,32,.28),transparent);pointer-events:none}
.p-lr-cel .lp-cel-tela .p-lr-tl{position:absolute;top:0;left:0;opacity:0;transition:opacity .5s var(--ease)}
.p-lr-cel .lp-cel-tela .p-lr-tl:first-child{position:relative}
.p-lr-cel .lp-cel-tela .p-lr-tl.on{opacity:1}
.p-lr-ps{grid-area:s;list-style:none;margin:0;padding:0;display:grid;gap:4px}
.p-lr-p{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:10px;width:100%;min-height:44px;padding:8px 0;border:0;background:none;
  font:inherit;font-size:1rem;line-height:1.25;font-weight:500;text-align:left;color:var(--lp-mut);cursor:pointer;transition:color .3s}
.p-lr-p b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--lp-mut);transition:color .3s}
.p-lr-pi.on .p-lr-p{color:#fff}
.p-lr-pi.on .p-lr-p b{color:var(--red-hi)}
.p-lr-p:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px;border-radius:8px}
.p-lr-p:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.p-lr-p:hover{color:#fff}}
@media (min-width:768px){
  .p-lr-como{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"m t" "m s";align-items:end;gap:32px 56px}
  .p-lr-como-t{align-self:end;text-align:left}
  .p-lr-cel{width:min(100%,270px);justify-self:center}
  .p-lr-ps{align-self:start;gap:14px}
  .p-lr-p{font-size:1.375rem;line-height:1.15;gap:16px}
}

/* ---------- 3. cartão grande do CTA: texto, a mão com o Desempenho e o cartão de vidro com o link ---------- */
.p-lr-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);grid-template-areas:"x m" "v v";align-items:center;
  padding:22px 14px 16px;border-radius:24px;contain:paint;isolation:isolate}
.p-lr-cta::before{content:"";position:absolute;right:-10%;top:10%;width:70%;aspect-ratio:1;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(217,45,32,.3),transparent);pointer-events:none}
.p-lr-cta-x{grid-area:x;display:grid;justify-items:start;gap:14px}
.p-lr-cta-t{font-size:1.375rem;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-lr-cta-t span{color:var(--lp-mut)}
.p-lr-cta-btn{min-width:0;width:100%;justify-content:center}
.p-lr-cta .rd-link{transform:none;margin-block:-6px}
.p-lr-mao{grid-area:m;align-self:start;margin:-22px -14px 0 0;pointer-events:none}
.p-lr-mao img{display:block;width:100%;height:auto;
  -webkit-mask:linear-gradient(180deg,#000 72%,#0000);mask:linear-gradient(180deg,#000 72%,#0000)}
.p-lr-vidro{grid-area:v;justify-self:end;width:min(100%,340px);margin:16px 0 0;padding:8px;border-radius:18px;
  background:rgba(30,30,30,.55);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 24px 60px -20px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-lr-vidro img{display:block;width:100%;height:auto;border-radius:12px}
@media (min-width:768px){
  .p-lr-cta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"x m";min-height:440px;padding:0 0 0 clamp(32px,5vw,64px);border-radius:40px}
  .p-lr-cta-x{justify-items:center;text-align:center;gap:18px}
  .p-lr-cta-t{font-size:1.75rem;max-width:12em}
  .p-lr-cta-btn{width:auto;padding-inline:1.7em}
  .p-lr-mao{align-self:end;justify-self:start;width:min(100%,400px);margin:28px 0 -60px}
  .p-lr-vidro{position:absolute;right:28px;top:50%;width:min(36%,320px);margin:0;translate:0 -50%;rotate:3deg}
}

/* os três cartões debaixo: o funil, a grade de ícones com o link aceso e o escudo com o interruptor no título */
.p-lr-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.p-lr-c{position:relative;display:grid;grid-template-rows:auto auto 1fr;justify-items:center;align-content:start;gap:6px;min-height:230px;padding:16px 8px 0;
  border-radius:20px;contain:paint;isolation:isolate;text-align:center}
.p-lr-c h3{grid-row:1;font-size:1rem;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p-lr-g{color:var(--lp-mut)}
/* link com seta: no celular só a seta, e o toque vale o cartão inteiro */
.p-lr-lk{grid-row:2;transform:none;margin-block:-8px}
.p-lr-lk span{display:none}
.p-lr-lk::after{content:"";position:absolute;inset:0;border-radius:inherit}
.p-lr-sw{display:inline-block;vertical-align:-.12em;width:1.9em;height:1.05em;margin-left:.2em;border-radius:99px;background:var(--red);position:relative;box-shadow:0 0 14px rgba(255,84,72,.5)}
.p-lr-sw::after{content:"";position:absolute;right:.12em;top:50%;width:.8em;height:.8em;translate:0 -50%;border-radius:50%;background:#fff}
/* funil: o print sai pela borda, como o gráfico de velas */
.p-lr-funil{grid-row:3;align-self:end;justify-self:start;width:300%;margin:10px 0 0;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,#000 70%,#0000 98%);mask:linear-gradient(90deg,#000 70%,#0000 98%)}
.p-lr-funil img{display:block;width:100%;height:auto;border-radius:10px 0 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
/* grade de ladrilhos (a das estratégias), o do link aceso */
.p-lr-lad{grid-row:3;align-self:end;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:150%;margin:10px 0 -10%;padding:0;list-style:none;rotate:-8deg;pointer-events:none;
  -webkit-mask:radial-gradient(farthest-side at 50% 40%,#000 55%,#0000 100%);mask:radial-gradient(farthest-side at 50% 40%,#000 55%,#0000 100%)}
.p-lr-lad li{display:grid;place-items:center;aspect-ratio:1;border-radius:28%;background:linear-gradient(160deg,#222,#0e0e0e);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 6px 14px rgba(0,0,0,.6);color:rgba(255,255,255,.42)}
.p-lr-lad li:nth-child(4n+2),.p-lr-lad li:nth-child(4n+4){translate:0 30%}
.p-lr-lad .ic{width:44%;height:44%}
.p-lr-lad li.on{background:linear-gradient(160deg,var(--red-hi),#a8180e);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 28px rgba(255,84,72,.55)}
.p-lr-esc{grid-row:3;align-self:end;width:130%;margin:6px 0 -8%;pointer-events:none}
.p-lr-esc img{display:block;width:100%;height:auto;mix-blend-mode:lighten;
  -webkit-mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%);mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%)}
@media (min-width:768px){
  .p-lr-tres{gap:16px;margin-top:16px}
  .p-lr-c{min-height:360px;padding:40px 24px 0;gap:14px;border-radius:40px}
  .p-lr-c h3{font-size:1.5rem;line-height:1.1}
  .p-lr-lk span{display:inline}
  .p-lr-funil{width:230%}
  .p-lr-lad{width:120%;gap:10px}
  .p-lr-esc{width:110%}
}
@media (hover:hover) and (pointer:fine){
  .p-lr-esc img,.p-lr-funil img{transition:transform .5s var(--ease)}
  .p-lr-c:hover .p-lr-esc img,.p-lr-c:hover .p-lr-funil img{transform:scale(1.04)}
}

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

@media (prefers-reduced-motion:reduce){
  .p-lr-cel .lp-cel-tela .p-lr-tl,.p-lr-p,.p-lr-p b,.p-lr-c img{transition:opacity .15s linear}
}