/* Sorte Ideal: animações e estilos da landing */
:root{
  --si-petroleo:#0f1722; --si-superficie:#172331; --si-papel:#f6f7f4;
  --si-apagado:#8a97a3; --si-linha:rgba(246,247,244,.12);
  --si-verde:#2fbf71; --si-ouro:#d8a24a;
  /* corpo claro da página */
  --si-tinta:#15201b; --si-tinta-2:#4a5a52; --si-linha-clara:#d9ddd6;
  --si-floresta:#1f7a4d; --si-alerta:#a2541b;
  interpolate-size:allow-keywords;
}
[class^="si-"],[class*=" si-"],[class*=" si-"]::before,[class*=" si-"]::after{box-sizing:border-box}

/* 1. Abertura */
.si-abertura{display:block;width:100%;height:auto;overflow:visible;color:var(--si-papel);cursor:pointer;-webkit-tap-highlight-color:transparent}
.si-abertura:focus-visible{outline:2px solid var(--si-ouro);outline-offset:8px;border-radius:6px}
.si-ab-dot{fill:var(--si-verde)}
.si-abertura:not(.is-anim) .si-ab-win,.si-ab-dot.is-ouro,.si-ab-pingo{fill:var(--si-ouro)}

/* 2. Grade de cotas */
.si-grade{display:grid;gap:18px}
.si-grade-pontos{padding-top:30px;display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(6px,1.6vw,12px);touch-action:pan-y;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.si-cota{--luz:0;aspect-ratio:1;border-radius:50%;background:var(--si-verde);opacity:calc(.38 + .62*var(--luz));transform:scale(calc(.82 + .3*var(--luz)));transition:transform .35s ease,opacity .35s ease,background-color .2s;position:relative}
.si-cota.is-livre{background:transparent;box-shadow:inset 0 0 0 2px var(--si-verde)}
.si-cota.is-roleta{background:var(--si-ouro);box-shadow:none;opacity:1;transition:none}
.si-cota.is-ganhadora{background:var(--si-ouro);box-shadow:0 0 0 6px rgba(216,162,74,.22);opacity:1;transform:scale(1.15);animation:si-pulso 1.2s ease-out}
.si-cota.is-ganhadora::after{content:attr(data-n);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--si-ouro);color:var(--si-petroleo);font:700 12px/1 Sora,system-ui,sans-serif;padding:5px 8px;border-radius:6px;white-space:nowrap}
@keyframes si-pulso{0%{box-shadow:0 0 0 0 rgba(216,162,74,.7)}100%{box-shadow:0 0 0 6px rgba(216,162,74,.22)}}
.si-grade-rodape{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.si-grade-botao{font:600 15px/1 Sora,system-ui,sans-serif;color:var(--si-petroleo);background:var(--si-ouro);border:0;border-radius:999px;padding:13px 22px;cursor:pointer}
.si-grade-botao:focus-visible{outline:2px solid var(--si-papel);outline-offset:3px}
.si-grade-botao:disabled{opacity:.6;cursor:default}
.si-grade-saida{font:500 15px/1.4 Sora,system-ui,sans-serif;color:var(--si-apagado)}
.si-grade-saida b{color:var(--si-ouro)}
.si-grade-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 13px/1.4 Sora,system-ui,sans-serif;color:var(--si-apagado)}
.si-grade-legenda i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--si-verde)}
.si-grade-legenda i.livre{background:transparent;box-shadow:inset 0 0 0 2px var(--si-verde)}

/* 3. Simulação do Pix: tela do pedido da plataforma (390px de largura, escalada por --k) */
.si-pix{width:min(300px,100%);aspect-ratio:9/18.5;margin-inline:auto;border-radius:40px;padding:9px;background:linear-gradient(145deg,#343740,#1b1d22 42%,#111318);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 30px 60px rgba(0,0,0,.45);position:relative}
.si-pix-tela{height:100%;border-radius:32px;background:#f1f1f1;overflow:hidden;position:relative}
.si-pix-ilha{position:absolute;z-index:3;top:9px;left:50%;width:82px;height:22px;margin-left:-41px;border-radius:999px;background:#050608}
.si-pix-app{position:absolute;top:0;left:0;width:390px;height:calc(100% / var(--k,.718));transform:scale(var(--k,.718));transform-origin:0 0;display:flex;flex-direction:column;gap:12px;color:#323232;font:500 14px/1.35 Montserrat,system-ui,sans-serif}
.si-pix-app *{margin:0;box-sizing:border-box}
.si-pix-topo{position:relative;flex:none;height:104px;padding:44px 18px 0 16px;background:#151515;display:flex;align-items:center;justify-content:space-between}
.si-pix-marca{display:flex;align-items:center;gap:8px;color:#fff;font-size:16px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.si-pix-marca svg{width:30px;height:30px;color:var(--si-ouro)}
.si-pix-topo i{width:22px;height:2.5px;border-radius:2px;background:#fff;box-shadow:0 -6.5px #fff,0 6.5px #fff}
.si-pix-hora{position:absolute;top:13px;left:34px;color:#fff;font-size:14px;font-weight:700}
.si-pix-bat{position:absolute;top:15px;right:28px;width:24px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);padding:2px}
.si-pix-bat::before{content:"";display:block;height:100%;width:80%;border-radius:1.5px;background:#fff}
.si-pix-heroi{flex:none;margin-top:-12px;height:170px;border-radius:0 0 20px 20px;position:relative;overflow:hidden;color:#fff;text-align:center}
.si-pix-heroi .camada{position:absolute;inset:0;padding:22px 20px 0}
.si-pix-heroi .espera{background:linear-gradient(135deg,#f59e0b,#d97706)}
.si-pix-heroi .ok{background:linear-gradient(135deg,#22c55e,#16a34a);clip-path:circle(0% at 50% 50px);transition:clip-path .7s cubic-bezier(.3,.7,.2,1)}
.si-pix-heroi .ic{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;border:3px solid rgba(255,255,255,.5);background:rgba(255,255,255,.25);display:grid;place-items:center}
.si-pix-heroi .espera .ic svg{animation:si-gira-relogio 2.4s linear infinite}
@keyframes si-gira-relogio{to{transform:rotate(360deg)}}
.si-pix-heroi h3{font-size:21.6px;font-weight:800;letter-spacing:-.01em}
.si-pix-heroi p{font-size:14.4px;opacity:.88;margin-top:4px}
.si-pix-cartao{margin-inline:12px;background:#fff;border-radius:12px;box-shadow:rgba(0,0,0,.08) 0 4px 3px}
.si-pix-camp{flex:none;padding:10px;display:flex;gap:10px;align-items:center}
.si-pix-foto{flex:none;width:50px;height:50px;border-radius:8px;background:radial-gradient(circle at 50% 35%,#24364a,var(--si-petroleo));display:grid;place-items:center;color:var(--si-ouro)}
.si-pix-foto svg{width:28px;height:28px}
.si-pix-camp h4{font-size:13.5px;font-weight:700}
.si-pix-selos{display:grid;margin-top:5px}
.si-pix-selo{grid-area:1/1;justify-self:start;font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;transition:opacity .3s,transform .3s}
.si-pix-selo.espera{background:#ffc107;color:#000}
.si-pix-selo.ok{background:#198754;color:#fff;opacity:0;transform:scale(.8)}
.si-pix-troca{display:grid;align-items:start}
.si-pix-troca>*{grid-area:1/1;transition:opacity .4s,transform .4s}
.si-pix-pagar{border-radius:16px;box-shadow:0 2px 16px rgba(0,0,0,.07);overflow:hidden;opacity:0;transform:translateY(8px);pointer-events:none}
.si-pix-pagar-h{height:42px;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:14.4px;font-weight:700;color:#374151}
.si-pix-pagar-b{padding:12px 14px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.si-pix-timer{background:#fefce8;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:9px 12px 10px;font-size:13px;font-weight:600;text-align:center}
.si-pix-timer b{font-size:17.6px;font-weight:800;color:#d97706;font-variant-numeric:tabular-nums;margin:0 3px}
.si-pix-timer>i{display:block;height:6px;background:#e5e7eb;border-radius:3px;margin-top:7px;overflow:hidden}
.si-pix-timer>i::before{content:"";display:block;height:100%;background:linear-gradient(90deg,#22c55e,#84cc16);transform-origin:0 50%;transform:scaleX(.97)}
.si-pix-passos{display:grid;gap:8px;font-size:12.5px;color:#374151;list-style:none;padding:0;counter-reset:p}
.si-pix-passos li{display:flex;gap:9px;align-items:flex-start;counter-increment:p}
.si-pix-passos li::before{content:counter(p);flex:none;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.76);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.si-pix-copia{display:flex;height:44px}
.si-pix-codigo{flex:1;min-width:0;line-height:42px;border:1px solid #d1d5db;border-right:0;border-radius:10px 0 0 10px;font:12px ui-monospace,Menlo,monospace;color:#6b7280;padding:0 11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.si-pix-copiar{position:relative;flex:none;width:104px;border-radius:0 10px 10px 0;background:rgba(0,0,0,.76);color:#fff;font-size:13.5px;font-weight:700;display:grid}
.si-pix-copiar span{grid-area:1/1;display:flex;align-items:center;justify-content:center;border-radius:inherit;transition:opacity .25s}
.si-pix-copiar .feito{background:#16a34a;opacity:0}
.si-pix-qr{justify-self:center;width:136px;aspect-ratio:1;display:grid;grid-template-columns:repeat(21,1fr);background:#fff;padding:6px}
.si-pix-qr i{background:#111}
.si-pix-qr i.b{background:transparent}
.si-pix-pedido{padding:14px;border-radius:16px}
.si-pix-linhas{display:grid;gap:6px;font-size:12.5px;color:#6b7280;padding-bottom:12px;border-bottom:1px solid #eef0f2}
.si-pix-linhas div{display:flex;justify-content:space-between}
.si-pix-linhas b{color:#111827;font-weight:700;font-variant-numeric:tabular-nums}
.si-pix-pedido h5{font-size:13px;font-weight:800;margin:12px 0 8px}
.si-pix-cotas{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.si-pix-cotas span{height:34px;border-radius:6px;background:#d1e7dd;border:1px solid #badbcc;color:#0f5132;font-size:13.5px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums;transform:scale(0);transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.si-pix-acoes{display:grid;gap:9px;margin:12px 12px 0}
.si-pix-acoes span{height:50px;border-radius:12px;background:rgba(0,0,0,.76);color:#fff;font-size:14.5px;font-weight:700;display:grid;place-items:center}
.si-pix-acoes span+span{height:46px;background:#fff;box-shadow:inset 0 0 0 1px #d1d5db;color:#374151;font-size:14px}
.si-pix-fim{opacity:0;transform:translateY(8px);pointer-events:none}
.si-pix:is([data-estado="aguardando"],[data-estado="copiado"],[data-estado="pago"]) .si-pix-pagar{opacity:1;transform:none}
.si-pix:is([data-estado="aguardando"],[data-estado="copiado"]) .si-pix-timer>i::before{transform:scaleX(.88);transition:transform 4s linear}
.si-pix[data-estado="copiado"] .si-pix-copiar .feito{opacity:1}
.si-pix:is([data-estado="pago"],[data-estado="cotas"]) .si-pix-heroi .ok{clip-path:circle(150% at 50% 50px)}
.si-pix:is([data-estado="pago"],[data-estado="cotas"]) .si-pix-selo.espera{opacity:0}
.si-pix:is([data-estado="pago"],[data-estado="cotas"]) .si-pix-selo.ok{opacity:1;transform:none}
.si-pix[data-estado="cotas"] .si-pix-fim{opacity:1;transform:none}
.si-pix[data-estado="cotas"] .si-pix-cotas span{transform:scale(1);transition-delay:calc(.25s + var(--i)*70ms)}

/* 4. Fundo de pontos com luz (seções escuras) */
.si-pontos{position:relative;isolation:isolate}
.si-pontos::before,.si-pontos::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:28px 28px;background-position:14px 14px}
.si-pontos::before{background-image:radial-gradient(rgba(246,247,244,.08) 1.4px,transparent 1.6px);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.si-pontos::after{background-image:radial-gradient(rgba(47,191,113,.7) 1.6px,transparent 1.8px);-webkit-mask-image:radial-gradient(240px circle at var(--x,50%) var(--y,-400px),#000,transparent);mask-image:radial-gradient(240px circle at var(--x,50%) var(--y,-400px),#000,transparent)}

/* 5. Palavra rotativa do hero */
.si-gira{position:relative;display:inline-block;vertical-align:bottom;height:1.12em;overflow:hidden;color:var(--si-verde);transition:width .4s cubic-bezier(.3,.8,.3,1)}
.si-gira>span{display:inline-block;white-space:nowrap;line-height:1.12}
.si-gira>span.sai{position:absolute;left:0;top:0;animation:si-sai .42s cubic-bezier(.5,0,.8,.4) forwards}
.si-gira>span.entra{animation:si-entra .52s cubic-bezier(.2,.9,.3,1.15)}
.si-gira::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.08em;border-radius:1em;background:currentColor;transform-origin:left;animation:si-risco .6s .1s cubic-bezier(.3,.8,.3,1) both}
.si-gira.troca::after{animation:none;transform:scaleX(0)}
@keyframes si-sai{to{transform:translateY(-105%);opacity:0}}
@keyframes si-entra{from{transform:translateY(105%)}}
@keyframes si-risco{from{transform:scaleX(0)}}
.si-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 6. Botão do WhatsApp: a mini grade sorteia no hover */
.si-cta{--fundo:var(--si-verde);--texto:var(--si-petroleo);position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 26px 16px 20px;border-radius:999px;background:var(--fundo);color:var(--texto);font:600 16px/1.2 Sora,system-ui,sans-serif;text-decoration:none;overflow:hidden;max-width:100%;transition:transform .2s,box-shadow .25s;box-shadow:0 8px 24px rgba(47,191,113,.22)}
.si-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(47,191,113,.32)}
.si-cta:active{transform:translateY(0) scale(.98)}
.si-cta:focus-visible{outline:2px solid var(--si-papel);outline-offset:3px}
.si-cta.claro{--fundo:var(--si-floresta);--texto:#fff;box-shadow:0 8px 24px rgba(31,122,77,.2)}
.si-cta.claro:focus-visible{outline-color:var(--si-tinta)}
.si-cta-grade{display:grid;grid-template-columns:repeat(3,5px);gap:3px;flex:none}
.si-cta-grade i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;transition:opacity .15s calc(var(--i)*35ms),background-color .2s}
.si-cta:hover .si-cta-grade i,.si-cta:focus-visible .si-cta-grade i{opacity:1}
.si-cta:hover .si-cta-grade i:nth-child(3),.si-cta:focus-visible .si-cta-grade i:nth-child(3){background:var(--si-ouro);transition-delay:.33s;animation:si-pinga .4s .33s}
@keyframes si-pinga{50%{transform:scale(1.6)}}
.si-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-110%)}
.si-cta:hover::after{transform:translateX(110%);transition:transform .7s ease}
.si-cta-seta{transition:transform .2s}
.si-cta:hover .si-cta-seta{transform:translateX(3px)}

/* 7. Entrada na rolagem (só para o que nasce abaixo da dobra) */
.is-espera>*{opacity:0;transform:translateY(18px)}
.is-visto>*{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1);transition-delay:calc(var(--i,0)*90ms)}

/* 8. Ícones de linha que se desenham + contador */
.si-traco{width:30px;height:30px;fill:none;stroke:var(--si-verde);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.si-traco *{stroke-dasharray:1;stroke-dashoffset:0}
.is-espera .si-traco *{stroke-dashoffset:1}
.is-visto .si-traco *{transition:stroke-dashoffset 1s cubic-bezier(.4,.1,.2,1);transition-delay:calc(var(--i,0)*90ms + .2s)}
.si-conta{font-variant-numeric:tabular-nums}

/* 9. Cartões de dor e frase de virada (corpo claro) */
.si-dor{position:relative;background:#fff;border-radius:10px;padding:20px 20px 20px 24px;color:var(--si-tinta-2);box-shadow:0 0 0 1px var(--si-linha-clara)}
.si-dor::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--si-alerta);transform-origin:top}
.si-dor b{display:block;font-family:Sora,system-ui,sans-serif;color:var(--si-tinta);margin-bottom:6px}
.is-espera .si-dor::before{transform:scaleY(0)}
.is-visto .si-dor::before{transition:transform .7s cubic-bezier(.3,.8,.3,1);transition-delay:calc(var(--i,0)*90ms + .35s)}
.si-virada mark{color:inherit;background:linear-gradient(rgba(31,122,77,.18),rgba(31,122,77,.18)) no-repeat 0 85%/100% .45em;padding-inline:2px}
.is-espera .si-virada mark{background-size:0 .45em}
.is-visto .si-virada mark{transition:background-size .8s .5s cubic-bezier(.3,.8,.3,1)}

/* 10. Como funciona: trilho que enche com a rolagem */
.si-passos{--p:1;position:relative;list-style:none;margin:0;padding:0 0 0 52px;display:grid;gap:30px;color:var(--si-tinta-2)}
.si-passos::before,.si-passos::after{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;border-radius:2px;background:var(--si-linha-clara)}
.si-passos::after{background:var(--si-floresta);transform-origin:top;transform:scaleY(var(--p))}
.si-passos li{position:relative}
.si-passos li::before{content:attr(data-n);position:absolute;left:-52px;top:-4px;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 15px/1 Sora,system-ui,sans-serif;background:#fff;color:var(--si-tinta-2);box-shadow:inset 0 0 0 2px var(--si-linha-clara);transition:background-color .3s,color .3s,box-shadow .3s}
.si-passos li.is-aceso::before{background:var(--si-floresta);color:#fff;box-shadow:0 0 0 5px rgba(31,122,77,.14)}
.si-passos b{display:block;font-family:Sora,system-ui,sans-serif;color:var(--si-tinta);margin-bottom:4px}

/* 11. Fluxo do dinheiro: o Pix anda do cliente até a sua conta */
.si-fluxo{display:grid;gap:18px;font-family:Sora,system-ui,sans-serif;color:var(--si-tinta)}
.si-fluxo-trilha{display:grid;grid-template-columns:1fr minmax(28px,64px) 1fr minmax(28px,64px) 1fr;align-items:center}
.si-fluxo-caixa{background:#fff;border-radius:12px;padding:16px 12px;text-align:center;font-size:14px;font-weight:600;box-shadow:0 0 0 1px var(--si-linha-clara);display:grid;gap:4px}
.si-fluxo-caixa small{font-weight:400;font-size:12px;color:var(--si-tinta-2)}
.si-fluxo-caixa.fim{box-shadow:0 0 0 2px var(--si-floresta)}
.si-fluxo-linha{position:relative;height:2px;background:var(--si-linha-clara)}
.si-fluxo-linha::after{content:"";position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--si-verde);box-shadow:0 0 0 4px rgba(47,191,113,.2);opacity:0}
.si-fluxo.is-ativo .si-fluxo-linha::after{animation:si-anda-x 3.2s infinite}
.si-fluxo.is-ativo .si-fluxo-linha+.si-fluxo-caixa+.si-fluxo-linha::after{animation-delay:.8s}
.si-fluxo.is-ativo .si-fluxo-caixa.fim{animation:si-chega 3.2s infinite}
@keyframes si-anda-x{0%{left:0;opacity:0}5%{opacity:1}25%{left:100%;opacity:1}30%,100%{left:100%;opacity:0}}
@keyframes si-chega{0%,48%,70%,100%{transform:none}55%{transform:scale(1.05)}}
.si-fluxo-fora{justify-self:center;display:flex;gap:10px;align-items:center;font-size:13px;color:var(--si-tinta-2);border:1px dashed var(--si-linha-clara);border-radius:999px;padding:8px 14px}
.si-fluxo-fora .si-cta-grade i{opacity:1;color:var(--si-floresta)}
.si-fluxo-fora .si-cta-grade i:nth-child(3){background:var(--si-ouro)}
@media (max-width:560px){
  .si-fluxo-trilha{grid-template-columns:1fr;grid-template-rows:auto 34px auto 34px auto;justify-items:center}
  .si-fluxo-caixa{width:100%}
  .si-fluxo-linha{width:2px;height:100%}
  .si-fluxo-linha::after{left:50%;top:0;margin:-6px 0 0 -6px}
  .si-fluxo.is-ativo .si-fluxo-linha::after{animation-name:si-anda-y}
  @keyframes si-anda-y{0%{top:0;opacity:0}5%{opacity:1}25%{top:100%;opacity:1}30%,100%{top:100%;opacity:0}}
}

/* 12. Dúvidas: acordeão nativo que abre suave, uma por vez */
.si-faq{display:grid;gap:10px;font-family:Sora,system-ui,sans-serif}
.si-faq details{background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--si-linha-clara);transition:box-shadow .2s}
.si-faq details[open]{box-shadow:0 0 0 1.5px var(--si-floresta)}
.si-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;font-weight:600;color:var(--si-tinta)}
.si-faq summary::-webkit-details-marker{display:none}
.si-faq summary:focus-visible{outline:2px solid var(--si-floresta);outline-offset:2px;border-radius:12px}
.si-faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;color:var(--si-floresta);transition:transform .3s}
.si-faq details[open] summary::after{transform:rotate(135deg)}
.si-faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
.si-faq details[open]::details-content{block-size:auto}
.si-faq details p{padding:0 20px 18px;color:var(--si-tinta-2);font-size:15px;line-height:1.6;max-width:62ch}

/* 13. Barra que ganha fundo ao rolar e CTA fixo no celular */
.si-barra{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;transition:background-color .3s,box-shadow .3s,padding .3s}
.si-barra.is-solida{background:rgba(15,23,34,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--si-linha),0 10px 30px rgba(0,0,0,.25);padding-block:calc(10px + env(safe-area-inset-top,0px)) 10px}
.si-barra img{height:28px;width:auto;display:block}
.si-barra .si-cta{padding:12px 18px 12px 14px;font-size:14px}
.si-cta-fixo{position:fixed;inset:auto 0 0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(15,23,34,.94);box-shadow:0 -1px 0 var(--si-linha);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.3,1);display:none}
.si-cta-fixo .si-cta{width:100%;justify-content:center;min-height:56px}
.si-cta-fixo.is-visivel{transform:none}
@media (max-width:760px){.si-cta-fixo{display:block}.si-barra .si-cta{display:none}}

@media (prefers-reduced-motion:reduce){
  .si-cota,.si-pix *{transition:none!important}
  .si-cota.is-ganhadora,.si-pix *{animation:none!important}
  .si-pontos::after{display:none}
  .si-gira,.si-cta,.si-cta *,.si-cta::after,.si-barra,.si-cta-fixo,.si-faq *,.si-faq details::details-content,.si-passos li::before{transition:none!important;animation:none!important}
  .si-fluxo.is-ativo .si-fluxo-linha::after,.si-fluxo.is-ativo .si-fluxo-caixa.fim{animation:none}
}

/* 10. Antes e depois: a tarefa manual sai de cena, um ponto verde corre pela seta e a versão automática chega com a prova funcionando */
.si-ad{display:grid;gap:16px}
.si-ad-cab,.si-ad-par{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch}
.si-ad-cab{font:600 12px/1 Sora,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--si-tinta-2)}
.si-ad-cab span{display:flex;align-items:center;gap:8px}
.si-ad-cab span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--si-alerta)}
.si-ad-cab span:last-child{grid-column:3;color:var(--si-floresta)}
.si-ad-cab span:last-child::before{background:var(--si-verde)}
.si-ad-antes,.si-ad-depois{position:relative;border-radius:14px;padding:20px 22px 20px 26px;display:grid;gap:6px;align-content:start;font:400 15px/1.55 Sora,system-ui,sans-serif}
.si-ad-antes{background:#eceee8;color:#56645d}
.si-ad-antes b,.si-ad-depois b{font-weight:600;font-size:16.5px;line-height:1.35}
.si-ad-antes b{color:#3c4943}
.si-ad-antes::before,.si-ad-depois::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--si-alerta);transform-origin:top}
.si-ad-ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.si-ad-antes .si-ad-ico{color:var(--si-alerta)}
.si-ad-depois{background:#fff;color:var(--si-tinta-2);box-shadow:0 0 0 1px var(--si-linha-clara),0 14px 30px rgba(21,32,27,.07)}
.si-ad-depois::before{background:var(--si-verde)}
.si-ad-depois b{color:var(--si-tinta)}
.si-ad-depois .si-ad-ico{color:var(--si-floresta)}
.si-ad-ico *{stroke-dasharray:1;stroke-dashoffset:0}
.si-ad-liga{position:relative;display:grid;place-items:center}
.si-ad-liga svg{width:44px;height:14px;overflow:visible;fill:none;stroke:var(--si-floresta);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.si-ad-liga svg *{stroke-dasharray:1;stroke-dashoffset:0}
.si-ad-liga i{position:absolute;left:10px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--si-verde);box-shadow:0 0 0 4px rgba(47,191,113,.18);opacity:0}

/* provas dentro do cartão "depois" */
.si-ad-prova{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:34px}
.si-ad-bdg{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font:600 12.5px/1 Sora,system-ui,sans-serif;background:#def7ec;color:#03543f;transition:background-color .3s,color .3s}
.si-ad-bdg.pend{background:#feecdc;color:#8a2c0d}
.si-ad-bdg.vira{animation:si-ad-vira .5s cubic-bezier(.3,.8,.3,1)}
@keyframes si-ad-vira{40%{transform:rotateX(90deg)}}
.si-ad-cotas{display:flex;gap:5px}
.si-ad-cotas i{font:800 12px/1 Montserrat,system-ui,sans-serif;font-style:normal;font-variant-numeric:tabular-nums;color:#0f5132;background:#d1e7dd;border:1px solid #badbcc;border-radius:6px;padding:6px 7px;transition:transform .35s cubic-bezier(.2,.9,.3,1.4);transition-delay:calc(var(--i,0)*80ms)}
.si-ad-zap{max-width:100%;background:#d9fdd3;color:#111b21;border-radius:10px 10px 10px 2px;padding:7px 10px 6px;font:400 13.5px/1.4 system-ui,sans-serif;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.si-ad-zap small{display:block;text-align:right;font-size:11px;color:#667781;margin-top:2px}
.si-ad-zap small b{font:inherit;color:#53bdeb}
.si-ad-digita{display:none;gap:4px;background:#fff;box-shadow:0 0 0 1px var(--si-linha-clara);border-radius:10px 10px 10px 2px;padding:11px 12px}
.si-ad-digita i{width:6px;height:6px;border-radius:50%;background:#8a97a3;animation:si-ad-pula 1s infinite;animation-delay:calc(var(--i,0)*.15s)}
@keyframes si-ad-pula{30%{transform:translateY(-4px);opacity:.6}}
.si-ad-prova.is-digitando .si-ad-zap{display:none}
.si-ad-prova.is-digitando .si-ad-digita{display:flex}
.si-ad-seg{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;font:600 12.5px/1 Sora,system-ui,sans-serif;background:#f3f4f6;color:#4b5563;transition:box-shadow .3s,transform .3s}
.si-ad-seg.fiel{background:#def7ec;color:#03543f}
.si-ad-seg.esfriando{background:#fef3c7;color:#8a5a00;box-shadow:0 0 0 2px #e3a008}
.si-ad-pronta{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:var(--si-floresta);color:#fff;font:600 12.5px/1 Sora,system-ui,sans-serif;transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.3,1)}
.si-ad-pronta svg{width:14px;height:14px;fill:currentColor}
.si-ad-com{flex:1;min-width:180px;display:grid;gap:6px;font:500 13px/1.3 Sora,system-ui,sans-serif;color:var(--si-tinta-2)}
.si-ad-com span{display:flex;justify-content:space-between;gap:10px}
.si-ad-com b{font-size:15px;color:var(--si-floresta);font-variant-numeric:tabular-nums}
.si-ad-com i{height:6px;border-radius:6px;background:#e5e8e2;overflow:hidden}
.si-ad-com i::after{content:"";display:block;height:100%;width:var(--p,72%);background:var(--si-verde);border-radius:6px;transition:width 1.2s cubic-bezier(.3,.8,.3,1)}

/* estado de espera (só para o que nasce abaixo da dobra) e a sequência */
.si-ad-par.is-espera .si-ad-antes{opacity:0;transform:translateY(14px);background:#fff;color:var(--si-tinta-2);box-shadow:0 0 0 1px var(--si-linha-clara)}
.si-ad-par.is-espera .si-ad-antes b{color:var(--si-tinta)}
.si-ad-par.is-espera .si-ad-antes::before{transform:scaleY(0)}
.si-ad-par.is-espera .si-ad-liga svg *{stroke-dashoffset:1}
.si-ad-par.is-espera .si-ad-depois{opacity:0;transform:translateX(-18px) scale(.98)}
.si-ad-par.is-espera .si-ad-depois::before{transform:scaleY(0)}
.si-ad-par.is-espera .si-ad-depois .si-ad-ico *{stroke-dashoffset:1}
.si-ad-par.is-espera .si-ad-cotas i{transform:scale(0)}
.si-ad-par.is-espera .si-ad-pronta{opacity:0;transform:translateX(-10px)}
.si-ad-par.is-espera .si-ad-seg.esfriando{box-shadow:none}
.si-ad-par.is-espera .si-ad-com i::after{width:0}
.si-ad-par.is-visto .si-ad-antes{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1),background-color .7s .95s,color .7s .95s,box-shadow .7s .95s}
.si-ad-par.is-visto .si-ad-antes b{transition:color .7s .95s}
.si-ad-par.is-visto .si-ad-antes::before{transition:transform .6s cubic-bezier(.3,.8,.3,1) .3s}
.si-ad-par.is-visto .si-ad-liga svg *{transition:stroke-dashoffset .5s cubic-bezier(.4,.1,.2,1) .7s}
.si-ad-par.is-visto .si-ad-liga i{animation:si-ad-corre .7s cubic-bezier(.5,0,.3,1) .75s}
@keyframes si-ad-corre{0%{opacity:0;transform:none}20%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(30px) scale(1.6)}}
.si-ad-par.is-visto .si-ad-depois{transition:opacity .55s ease 1.2s,transform .6s cubic-bezier(.2,.8,.3,1) 1.2s}
.si-ad-par.is-visto .si-ad-depois::before{transition:transform .6s cubic-bezier(.3,.8,.3,1) 1.45s}
.si-ad-par.is-visto .si-ad-depois .si-ad-ico *{transition:stroke-dashoffset .8s cubic-bezier(.4,.1,.2,1) 1.45s}

@media (max-width:760px){
  .si-ad-cab{display:none}
  .si-ad{gap:28px}
  .si-ad-par{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 40px auto}
  .si-ad-antes::after{content:"Antes";position:absolute;right:16px;top:16px;font:600 11px/1 Sora,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--si-alerta)}
  .si-ad-depois::after{content:"Com a Sorte Ideal";position:absolute;right:16px;top:16px;font:600 11px/1 Sora,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--si-floresta)}
  .si-ad-liga svg{transform:rotate(90deg)}
  .si-ad-liga i{left:50%;top:6px;margin:0 0 0 -4px}
  @keyframes si-ad-corre{0%{opacity:0;transform:none}20%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(26px) scale(1.6)}}
  .si-ad-par.is-espera .si-ad-depois{transform:translateY(-12px) scale(.98)}
}
@media (prefers-reduced-motion:reduce){.si-ad *{transition:none!important;animation:none!important}}