/* Link Affiliattes — camada que eleva #painel, #faq e o rodapé ao nível da hero e do fechamento.
   Mobile-first, só transform/opacity em movimento (o rodapé ainda desenha o elo por @property);
   hover só com mouse; "menos movimento" vira um fade curto. Os tokens são os do la.css. */

@property --mx{syntax:"<length>";inherits:true;initial-value:-999px}
@property --my{syntax:"<length>";inherits:true;initial-value:-999px}
@property --dr{syntax:"<number>";inherits:true;initial-value:0}
@property --pv-sx{syntax:"<percentage>";inherits:false;initial-value:130%}

/* ================= PAINEL: a seção ================= */
/* o que sai da caixa para os lados (luz, chips, grade de pontos) fica preso aqui dentro: zero rolagem lateral.
   Para baixo, não: o halo da janela atravessa a fronteira e se apaga já dentro do FAQ (recortado ali, virava degrau) */
#painel{--pe:cubic-bezier(.16,1,.3,1);position:relative;isolation:isolate;contain:paint}
@supports (overflow:clip){#painel{contain:none;overflow-x:clip;overflow-y:visible}}
/* sem fundo próprio (o brilho branco do topo e o grão da caixa faziam a faixa cinza e o degrau nas duas fronteiras): o fundo e o grão são os da página */
.pnl-fundo{display:none}
#painel .pnl-head{justify-items:center;text-align:center;margin-inline:auto}
.pnl-sub{display:none;max-width:38rem;color:var(--mut);font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.55}
@media (min-width:600px){.pnl-sub{display:block}}

/* ================= PAINEL: vitrine das telas reais ================= */
#painel .pv{gap:clamp(14px,2vw,20px);margin-bottom:clamp(22px,3.4vw,44px)}
.pv-bar{display:flex;flex-direction:column;align-items:center;gap:10px}
.pv-bar figcaption{font-size:.88rem;color:var(--mut);text-align:center}

/* abas num trilho só, com o indicador vermelho que desliza (transform) e a barra do avanço automático */
.pv-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,22rem);padding:4px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset}
.pv-tabs button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:0;padding:0 12px;border-radius:999px;font-weight:600;font-size:.95rem;white-space:nowrap;color:var(--mut);transition:color .35s var(--pe),transform .18s var(--pe)}
.pv-tabs button .ic{width:18px;height:18px}
.pv-tabs button[aria-selected="true"]{color:#fff}
.pv-tabs button:active{transform:scale(.98)}
.pv-ind{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#dc2f22,var(--red) 55%,var(--red-d));box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 8px 18px -8px rgba(0,0,0,.8);transition:transform .6s var(--pe)}
.pv[data-on="b"] .pv-ind{transform:translateX(100%)}
.pv-prog{position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.6);transform:scaleX(0);transform-origin:left;opacity:0}
.pv-ind.roda .pv-prog{opacity:1;animation:pv-prog 6.5s linear both}
.pv.pausa .pv-prog{animation-play-state:paused}
@keyframes pv-prog{to{transform:scaleX(1)}}
@media (hover:hover) and (pointer:fine){.pv-tabs button[aria-selected="false"]:hover{color:var(--tx)}}

/* a cena: grade de pontos, luz volumétrica que nasce da borda de baixo da janela, cantos de mira e chips em profundidade */
.pv-cena{--fora:-2%;--mo:8px;--pb:clamp(34px,6vw,76px);position:relative;isolation:isolate;perspective:1800px;padding:clamp(22px,3.4vw,46px) 0 var(--pb)}
.pv-cena::before{content:"";position:absolute;z-index:-2;inset:-4% -30% 0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1.5px) 50% 50%/22px 22px;
  -webkit-mask-image:radial-gradient(52% 58% at 50% 46%,#000 20%,transparent 78%);mask-image:radial-gradient(52% 58% at 50% 46%,#000 20%,transparent 78%)}
.pv-luz{position:absolute;z-index:-1;left:0;right:0;top:0;bottom:var(--pb);pointer-events:none}
/* o halo: o centro mora na borda de baixo da janela (o fim desta caixa) e se espalha para os lados e para baixo */
.pv-luz::before{content:"";position:absolute;inset:0 -38% -42%;
  background:radial-gradient(16% 13% at 50% 70.4%,rgba(255,170,150,.34),transparent 72%),
    radial-gradient(42% 30% at 50% 70.4%,rgba(217,45,32,.5),rgba(217,45,32,.14) 52%,transparent 80%),
    radial-gradient(closest-side at 50% 70.4%,rgba(217,45,32,.12),transparent 92%)}
/* no celular a janela é alta e o halo descia até 280px abaixo dela, por cima do começo do FAQ: ali ele se apaga em 150px,
   atravessando a fronteira sem corte (o #painel não recorta para baixo) */
@media (max-width:599px){.pv-luz::before{-webkit-mask:linear-gradient(#000 70.4%,rgba(0,0,0,.5) calc(70.4% + 56px),transparent calc(70.4% + 150px));mask:linear-gradient(#000 70.4%,rgba(0,0,0,.5) calc(70.4% + 56px),transparent calc(70.4% + 150px))}}
/* feixes parados que sobem da borda (volume), apagando antes das pontas; um a cada 8deg, sem gradiente repetido */
.pv-raios{position:absolute;left:-30%;right:-30%;top:-8%;bottom:0;opacity:.9;
  background:conic-gradient(from -90deg at 50% 100%,transparent 0deg,transparent 3deg,rgba(255,120,100,.075) 3.6deg,rgba(255,120,100,.075) 4.4deg,transparent 5deg,transparent 11deg,rgba(255,120,100,.075) 11.6deg,rgba(255,120,100,.075) 12.4deg,transparent 13deg,transparent 19deg,rgba(255,120,100,.075) 19.6deg,rgba(255,120,100,.075) 20.4deg,transparent 21deg,transparent 27deg,rgba(255,120,100,.075) 27.6deg,rgba(255,120,100,.075) 28.4deg,transparent 29deg,transparent 35deg,rgba(255,120,100,.075) 35.6deg,rgba(255,120,100,.075) 36.4deg,transparent 37deg,transparent 43deg,rgba(255,120,100,.075) 43.6deg,rgba(255,120,100,.075) 44.4deg,transparent 45deg,transparent 51deg,rgba(255,120,100,.075) 51.6deg,rgba(255,120,100,.075) 52.4deg,transparent 53deg,transparent 59deg,rgba(255,120,100,.075) 59.6deg,rgba(255,120,100,.075) 60.4deg,transparent 61deg,transparent 67deg,rgba(255,120,100,.075) 67.6deg,rgba(255,120,100,.075) 68.4deg,transparent 69deg,transparent 75deg,rgba(255,120,100,.075) 75.6deg,rgba(255,120,100,.075) 76.4deg,transparent 77deg,transparent 83deg,rgba(255,120,100,.075) 83.6deg,rgba(255,120,100,.075) 84.4deg,transparent 85deg,transparent 91deg,rgba(255,120,100,.075) 91.6deg,rgba(255,120,100,.075) 92.4deg,transparent 93deg,transparent 99deg,rgba(255,120,100,.075) 99.6deg,rgba(255,120,100,.075) 100.4deg,transparent 101deg,transparent 107deg,rgba(255,120,100,.075) 107.6deg,rgba(255,120,100,.075) 108.4deg,transparent 109deg,transparent 115deg,rgba(255,120,100,.075) 115.6deg,rgba(255,120,100,.075) 116.4deg,transparent 117deg,transparent 123deg,rgba(255,120,100,.075) 123.6deg,rgba(255,120,100,.075) 124.4deg,transparent 125deg,transparent 131deg,rgba(255,120,100,.075) 131.6deg,rgba(255,120,100,.075) 132.4deg,transparent 133deg,transparent 139deg,rgba(255,120,100,.075) 139.6deg,rgba(255,120,100,.075) 140.4deg,transparent 141deg,transparent 147deg,rgba(255,120,100,.075) 147.6deg,rgba(255,120,100,.075) 148.4deg,transparent 149deg,transparent 155deg,rgba(255,120,100,.075) 155.6deg,rgba(255,120,100,.075) 156.4deg,transparent 157deg,transparent 163deg,rgba(255,120,100,.075) 163.6deg,rgba(255,120,100,.075) 164.4deg,transparent 165deg,transparent 171deg,rgba(255,120,100,.075) 171.6deg,rgba(255,120,100,.075) 172.4deg,transparent 173deg,transparent 179deg,rgba(255,120,100,.075) 179.6deg,rgba(255,120,100,.075) 180.4deg,transparent 181deg,transparent 180deg);
  -webkit-mask-image:radial-gradient(48% 92% at 50% 100%,#000 8%,transparent 74%);mask-image:radial-gradient(48% 92% at 50% 100%,#000 8%,transparent 74%)}
/* o horizonte: uma linha acesa na borda de baixo, visível dos dois lados da janela */
.pv-horiz{position:absolute;left:-6%;right:-6%;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(255,84,72,0),rgba(255,84,72,.85) 22%,#ffd6cf 50%,rgba(255,84,72,.85) 78%,rgba(255,84,72,0))}
.pv-palco{position:relative;transform-style:preserve-3d;margin-inline:auto}
.pv-giro{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1.2s var(--pe)}
.pv-win{position:relative;padding:1px;border-radius:calc(var(--r) + 1px);
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08) 22%,rgba(255,255,255,.06) 68%,rgba(255,84,72,.75));
  box-shadow:0 60px 110px -50px rgba(0,0,0,.95),0 30px 60px -30px rgba(0,0,0,.8)}
.pv-in{border-radius:var(--r);overflow:hidden;background:#0a0b0d}
.pv-top{position:relative;display:flex;align-items:center;gap:7px;height:34px;padding:8px 14px;background:linear-gradient(#15181d,#0f1215);border-bottom:1px solid var(--line)}
.pv-top>i{display:none;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.pv-url{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.05);font-size:.76rem;color:#c3c9d1;white-space:nowrap}
.pv-url .ic{width:12px;height:12px;color:var(--ok)}
/* celular: a tela do app inteira, como ela é (barra de baixo inclusive), nada cortado */
.pv-tela{position:relative;display:grid;aspect-ratio:780/1688;overflow:hidden;background:#0a0b0d}
.pv-shot{grid-area:1/1;display:block;min-width:0}
.pv-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pv-varre{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 40%,rgba(255,120,110,.16) 50%,transparent 60%) var(--pv-sx) 0/260% 100% no-repeat}
.pv-tela.troca .pv-varre{animation:pv-varre 1s var(--pe)}
@keyframes pv-varre{0%{opacity:1;--pv-sx:130%}100%{opacity:0;--pv-sx:-30%}}
/* com o script, as duas telas ficam no mesmo lugar e trocam por esmaecimento */
.lc-js .pv-shot{opacity:0;transform:scale(.985);transition:opacity .6s var(--pe),transform .9s var(--pe)}
.lc-js .pv-shot.on{opacity:1;transform:none}

/* cantos de mira: chegam de fora e travam na janela */
.pv-mira{position:absolute;inset:calc(-1 * var(--mo));pointer-events:none}
.pv-mira i{position:absolute;width:clamp(14px,2vw,26px);aspect-ratio:1;border:0 solid rgba(255,84,72,.85)}
.pv-mira i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px;border-top-left-radius:6px;--ox:-12px;--oy:-12px}
.pv-mira i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0;border-top-right-radius:6px;--ox:12px;--oy:-12px}
.pv-mira i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px;border-bottom-left-radius:6px;--ox:-12px;--oy:12px}
.pv-mira i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0;border-bottom-right-radius:6px;--ox:12px;--oy:12px}
.lc-js .pv-mira i{opacity:0;transform:translate(var(--ox),var(--oy)) scale(1.25);transition:opacity .7s var(--pe),transform 1.2s var(--pe)}
.lc-js .pv-cena.in .pv-mira i{opacity:1;transform:none}

/* chips da interface: vidro fosco, borda fina, em profundidade (translateZ) para a paralaxe sair do 3D */
.pv-chips{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}
.pv-chip{position:absolute;display:flex;align-items:center;gap:.65em;padding:.6em .85em;border-radius:1em;font-size:12px;line-height:1.2;white-space:nowrap;color:var(--tx);
  background:rgba(14,16,20,.8);-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 44px -20px rgba(0,0,0,.95);
  transform:translateZ(var(--z,46px))}
.pc-1{display:none;left:var(--fora);top:16%;--z:60px}
.pc-2{right:var(--fora);top:46%;--z:80px}
.pc-3{left:calc(var(--fora) + 6%);bottom:-3%;--z:52px}
.pc-4{display:none;right:calc(var(--fora) + 8%);top:-4%;--z:40px;padding:.4em}
.pc-tx{display:grid;gap:.15em;min-width:0}
.pc-tx b{font-weight:600;font-size:1.1em;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pc-tx small{color:var(--mut);font-size:max(12px,.86em)}
.pc-tx small:first-child{font-weight:600}
.pc-ic{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:50%;border:1px solid rgba(255,255,255,.18);color:var(--red-hi)}
.pc-ic .ic{width:1.15em;height:1.15em}
.pc-ic.ok{color:var(--ok);border-color:rgba(53,208,127,.4)}
.pc-val{margin-left:.3em;font-style:normal;font-weight:700;font-size:1.05em;color:var(--red-hi);font-variant-numeric:tabular-nums}
.pc-spark{width:4.4em;height:1.7em;fill:none;stroke:var(--ok);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pc-btn{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.05em;border-radius:999px;font-weight:600;color:#fff;background:linear-gradient(180deg,#dc2f22,var(--red) 55%,var(--red-d));box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.pc-busca{display:inline-flex;align-items:center;gap:.6em;min-width:15em;padding:.55em .9em;border-radius:.7em;border:1px solid rgba(255,255,255,.14);color:var(--mut)}
.pc-btn .ic,.pc-busca .ic{width:1.15em;height:1.15em}
/* um conjunto de chips por aba; sem o script, ficam os da primeira tela */
.pv-chip[data-tela="b"]{opacity:0}
.lc-js .pv-chip{opacity:0;scale:.9;transition:opacity .7s var(--pe),scale 1s var(--pe);transition-delay:calc(var(--k) * 110ms + 150ms)}
.lc-js .pv-cena.in .pv-chip[data-tela="a"]{opacity:1;scale:1}
.lc-js .pv[data-on="b"] .pv-cena.in .pv-chip[data-tela="a"]{opacity:0;scale:.9;transition-delay:0s}
.lc-js .pv[data-on="b"] .pv-cena.in .pv-chip[data-tela="b"]{opacity:1;scale:1}

@media (min-width:600px){
  .pv-cena{--fora:-2.5%;--mo:12px}
  .pv-top{height:38px}
  .pv-top>i{display:block}
  .pv-url{font-size:.8rem;height:24px}
  /* computador: recorte no vão entre dois blocos: no início, logo abaixo da jornada e do "Copiar link", antes do "Resumo em números"; no financeiro, antes dos títulos do extrato */
  .pv-tela{aspect-ratio:2880/1612}
  .pv-tela::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.5%;z-index:1;pointer-events:none;background:linear-gradient(rgba(10,11,13,0),#0a0b0d)}
  .pv-chip{font-size:12px}
  .pc-1,.pc-4{display:flex}
  .pc-3{bottom:-6%;left:calc(var(--fora) + 9%)}
}
@media (min-width:1024px){
  .pv-cena{--fora:-5.5%;--mo:16px}
  .pv-palco{width:90%}
  .pv-chip{font-size:clamp(12.5px,.55rem + .45vw,14.5px)}
}

/* a janela chega inclinada e se endireita com a rolagem; os chips andam em velocidades diferentes (paralaxe) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .pv-palco{animation:pv-ergue linear both;animation-timeline:view();animation-range:cover 0% cover 32%}
    .pv-luz{animation:pv-acende linear both;animation-timeline:view();animation-range:cover 0% cover 42%}
    .pv-chip{animation:pc-paralaxe linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
  @supports not (animation-timeline:view()){
    .lc-js .pv-palco{transition:transform 1.1s var(--pe)}
    .lc-js .pv:not(.in) .pv-palco{transform:rotateX(16deg) scale(.93) translateY(36px)}
  }
}
@keyframes pv-ergue{from{transform:rotateX(18deg) scale(.92) translateY(40px)}to{transform:none}}
@keyframes pv-acende{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes pc-paralaxe{from{translate:0 calc(var(--d,24) * 1px)}to{translate:0 calc(var(--d,24) * -1px)}}

/* entrada do rodapé: as colunas sobem e o elo se desenha */
@keyframes bt-entra{to{opacity:1;translate:none}}
@keyframes bt-desenha{from{--dr:100}to{--dr:0}}

/* ================= FAQ ================= */
.fq{position:relative;isolation:isolate;interpolate-size:allow-keywords}
/* a luz quente mora no bloco do título e anda com ele quando ele acompanha a rolagem */
.fq .faq-l{isolation:isolate}
@media (max-width:899px){.fq .faq-l{position:relative}}
.fq .faq-l::before{content:"";position:absolute;z-index:-1;inset:-35% 0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,45,32,.14),transparent)}
.fq details{position:relative;background:linear-gradient(180deg,#121519,var(--card));transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.fq details[open]{background:linear-gradient(180deg,#191114,#121417 70%);box-shadow:0 0 0 1px rgba(255,84,72,.42) inset,0 24px 44px -30px rgba(0,0,0,.9)}
.fq summary{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:12px 14px 12px 18px;transition:transform .18s var(--ease)}
.fq summary:active{transform:scale(.99)}
.fq summary:focus-visible{outline-offset:-3px}
.ft .nav-logo{min-height:44px;align-items:center}
.fq-n{font-size:.82rem;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--dim);transition:color .3s}
.fq details[open] .fq-n{color:var(--red-hi)}
.fq-q{min-width:0}
.fq-x{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1px var(--line2) inset}
.fq-x::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .4s var(--ease)}
.fq summary .fq-x .ic{position:relative;width:18px;height:18px;color:var(--red-hi);transition:transform .45s var(--ease),color .3s}
.fq details[open] .fq-x::before{transform:scale(1)}
.fq details[open] summary .fq-x .ic{transform:rotate(135deg);color:#fff}
.fq details p{padding:0 18px 20px 52px;color:#b7bec7;line-height:1.6}
.fq details[open] p{animation:fq-resp .55s var(--ease) both .06s}
@keyframes fq-resp{from{opacity:0;transform:translateY(-6px)}}
/* abertura com altura suave onde o navegador sabe animar o conteúdo do <details> */
@supports selector(::details-content){
  .fq details::details-content{block-size:0;overflow-y:clip;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
  .fq details[open]::details-content{block-size:auto}
}
/* "ver mais": a mesma borda de luz que gira do selo da hero */
.fq .fq-mais{min-height:48px;margin-top:6px;border:1px solid transparent;box-shadow:0 12px 26px -16px rgba(0,0,0,.9);
  background:linear-gradient(#121418,#121418) padding-box,
    conic-gradient(from var(--sa),transparent 0 62%,rgba(255,84,72,.9) 74%,#fff 78%,rgba(255,84,72,.9) 82%,transparent 94%) border-box,
    linear-gradient(var(--line2),var(--line2)) border-box;
  animation:selo 5s linear 2 both;transition:transform .18s var(--ease)}
.fq .fq-mais .ic{color:var(--red-hi);transition:transform .35s var(--ease)}
.fq .fq-mais:active{transform:scale(.98)}
.faq-r.open .more-q{animation:fq-entra .55s var(--ease) both}
.faq-r.open .more-q:nth-of-type(7){animation-delay:.07s}
.faq-r.open .more-q:nth-of-type(8){animation-delay:.14s}
/* aberto, o "+" do botão vira "×" e o botão fecha a lista */
.fq .fq-mais[aria-expanded="true"] .ic{transform:rotate(45deg)}
@keyframes fq-entra{from{opacity:0;transform:translateY(12px)}}
@media (min-width:600px){.fq summary{padding-inline:22px 16px;gap:18px}.fq details p{padding:0 22px 22px 60px}}
@media (max-width:599px){.fq details p{padding-left:18px}}
@media (hover:hover) and (pointer:fine){
  .fq details:not([open]):hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 18px 36px -26px rgba(0,0,0,.9)}
  .fq details:not([open]):hover .fq-n{color:var(--mut)}
  .fq .fq-mais:hover{transform:translateY(-2px)}
  .fq .fq-mais:hover .ic{transform:rotate(90deg)}
}

/* ================= RODAPÉ ================= */
.ft{position:relative;isolation:isolate;border-top:0;padding-top:clamp(32px,4vw,48px)}
.ft-hz{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;transform-origin:50% 50%;
  background:linear-gradient(90deg,rgba(255,84,72,0),rgba(255,84,72,.75) 50%,rgba(255,84,72,0)),var(--line)}
.ft-hz::after{content:"";position:absolute;left:10%;right:10%;top:0;height:90px;background:radial-gradient(50% 100% at 50% 0,rgba(217,45,32,.16),transparent 72%)}
.ft-hz::before{content:"";position:absolute;left:0;top:-1px;width:16%;height:3px;border-radius:3px;opacity:0;transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(255,140,120,0),rgba(255,140,120,.9) 70%,#fff6f2)}
.ft-elo{display:none;position:absolute;z-index:-1;right:0;bottom:78px;width:clamp(150px,15vw,210px);height:auto;fill:none;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;--dr:0}
.ft-elo path{stroke-dasharray:100;stroke-dashoffset:var(--dr)}
.ft-elo .r{stroke:rgba(255,59,48,.26)}
.ft-elo .b{stroke:rgba(246,245,242,.09)}
.ft .foot-cols h3{color:var(--tx)}
.ft .foot-cols a{position:relative;transition:color .25s}
.ft .foot-cols a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--red-hi);transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)}
.ft .foot-cols a:active{transform:scale(.98)}
.ft .foot-bot{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px}
.ft .foot-bot>span{grid-column:2}
.ft-topo{grid-column:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--tx);box-shadow:0 0 0 1px var(--line2) inset;transition:transform .25s var(--ease)}
.ft-topo .ic{width:18px;height:18px;transform:rotate(-90deg);color:var(--red-hi)}
.ft-topo:active{transform:scale(.96)}
@media (min-width:700px){.ft-elo{display:block}}
/* entrada: a linha acende do centro, a faísca corre o horizonte uma vez, as colunas sobem e o elo se desenha */
.lc-js .ft .ft-hz{transform:scaleX(0)}
.lc-js .ft.in .ft-hz{animation:ft-acende 1.2s var(--ease) both}
.lc-js .ft.in .ft-hz::before{animation:ft-faisca 2.4s cubic-bezier(.45,0,.25,1) .7s both}
.lc-js .ft .foot-top,.lc-js .ft .foot-cols>div,.lc-js .ft .foot-bot{opacity:0;translate:0 14px}
.lc-js .ft.in .foot-top,.lc-js .ft.in .foot-cols>div,.lc-js .ft.in .foot-bot{animation:bt-entra .7s var(--ease) both}
.lc-js .ft.in .foot-cols>div:nth-child(1){animation-delay:.12s}
.lc-js .ft.in .foot-cols>div:nth-child(2){animation-delay:.2s}
.lc-js .ft.in .foot-cols>div:nth-child(3){animation-delay:.28s}
.lc-js .ft.in .foot-bot{animation-delay:.36s}
.lc-js .ft .ft-elo{--dr:100}
.lc-js .ft.in .ft-elo{animation:bt-desenha 2.2s var(--ease) .3s both}
@keyframes ft-acende{from{transform:scaleX(0)}to{transform:none}}
@keyframes ft-faisca{0%{opacity:0;transform:translateX(-100%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(625%)}}
@media (hover:hover) and (pointer:fine){
  .ft .foot-cols a:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .ft-topo:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,84,72,.6) inset}
}

/* ================= menos movimento: nada se desloca, nada em laço; só um esmaecimento curto ================= */
@media (prefers-reduced-motion:reduce){
  .fq .fq-mais{animation:none!important}
  .lc-js .pv-shot,.lc-js .pv-shot.on{transform:none!important;transition:opacity .25s linear!important}
  .pv-ind,.pv-giro{transition:none!important}
  .pv-giro{transform:none!important}
  .lc-js .pv-mira i,.lc-js .pv-chip{transform:none;scale:1;transition:opacity .3s linear!important;transition-delay:0s!important}
  .pv-chip{transform:none}
  .lc-js .ft .foot-top,.lc-js .ft .foot-cols>div,.lc-js .ft .foot-bot{translate:none}
  .lc-js .ft.in .foot-top,.lc-js .ft.in .foot-cols>div,.lc-js .ft.in .foot-bot{animation:lc-fade .3s linear both!important}
  .lc-js .ft .ft-elo{--dr:0}
  .lc-js .ft .ft-hz{transform:none}
  .lc-js .ft.in .ft-hz,.lc-js .ft.in .ft-hz::before,.lc-js .ft.in .ft-elo,.fq details[open] p,.faq-r.open .more-q,.pv-tela.troca .pv-varre{animation:none!important}
  .fq details::details-content{transition:none!important}
}
@keyframes lc-fade{from{opacity:0}to{opacity:1}}
.fq.off .fq-mais{animation-play-state:paused}