/*
  hub.guilhermemotta-dev.com.br: página de venda do Guilherme Motta Hub.
  A base é o v2.css do guilhermemotta-dev.com.br (copiado no publicar.sh, para
  as duas páginas andarem juntas). Aqui ficam as peças do Hub e o movimento,
  com o mesmo vocabulário dos Reels do time: grade que anda, luzes que
  passeiam, feixe de luz, losangos subindo, texto que bate e telas que voam.
  Só transform, opacity e filter animam; o que sai da tela fica parado.
*/

@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --curtidas{syntax:'<integer>';inherits:false;initial-value:0}

/* marca: o nome do site com a etiqueta Hub cortada a 45 graus */
.hub-tag{margin-left:2px;padding:5px 8px 4px;background:var(--marca);color:#fff;font:700 11px/1 var(--mono);letter-spacing:.14em;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.topo-marca svg{flex:none}
code{font:500 .92em var(--mono);color:var(--sinal)}
.parado *,.parado *::before,.parado *::after{animation-play-state:paused!important}
main{overflow-x:clip}

/* ---------- fundo vivo (fixo, atrás de tudo) ---------- */
.fundo-vivo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fundo-vivo i,.fv-pontos{position:absolute}
.fv-grade{inset:-128px;background-image:linear-gradient(var(--grade) 1px,transparent 1px),linear-gradient(90deg,var(--grade) 1px,transparent 1px);background-size:64px 64px;animation:fv-grade 18s linear infinite}
@keyframes fv-grade{to{transform:translate(64px,128px)}}
.fv-luz{border-radius:50%}
.fv-luz.l1{width:950px;height:950px;left:-380px;top:-260px;background:radial-gradient(closest-side,rgba(14,124,74,.34),transparent);animation:fv-luz 36s ease-in-out infinite alternate}
.fv-luz.l2{width:820px;height:820px;right:-320px;bottom:-300px;background:radial-gradient(closest-side,rgba(67,229,154,.13),transparent);animation:fv-luz 44s ease-in-out infinite alternate-reverse}
@keyframes fv-luz{0%{transform:translate(0,0)}33%{transform:translate(32vw,26vh)}66%{transform:translate(8vw,58vh)}100%{transform:translate(46vw,12vh)}}
.fv-feixe{inset:0;background:linear-gradient(110deg,transparent 42%,rgba(67,229,154,.06) 48%,transparent 54%);animation:fv-feixe 10s linear infinite}
@keyframes fv-feixe{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.fv-pontos{inset:0}
.fv-pontos i{left:var(--x);bottom:-12px;width:6px;height:6px;background:var(--sinal);opacity:0;animation:fv-sobe var(--t) linear var(--a) infinite}
@keyframes fv-sobe{0%{transform:translateY(0) rotate(45deg);opacity:0}12%{opacity:.45}85%{opacity:.2}100%{transform:translateY(-104vh) rotate(45deg);opacity:0}}
:root[data-tema="claro"] .fv-luz.l1{background:radial-gradient(closest-side,rgba(14,124,74,.14),transparent)}
:root[data-tema="claro"] .fv-luz.l2{background:radial-gradient(closest-side,rgba(14,124,74,.08),transparent)}

/* ---------- entradas: o herói chega como nos Reels ---------- */
.entra{animation:entra-e .8s calc(.2s + var(--e,0) * .12s) var(--curva) both}
.entra-bate{animation:bate 1s .2s var(--curva) both}
@keyframes entra-e{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes bate{from{opacity:0;transform:scale(1.14) translateY(-14px);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
.js .cabeca.surge h2{opacity:0}
.js .cabeca.surge.visivel h2{animation:bate .9s .05s var(--curva) both}

/* grupos: os filhos entram um depois do outro (o JS põe --i) */
.js [data-grupo]>*{--atr:calc(var(--i,0) * 90ms);opacity:0;translate:var(--de-t,0 44px);rotate:var(--de-r,none);scale:var(--de-s,1);
  transition:opacity .8s var(--curva) var(--atr),translate .9s var(--curva) var(--atr),rotate 1s var(--curva) var(--atr),scale .9s var(--curva) var(--atr),transform .5s var(--curva),border-color .3s}
.js [data-grupo].visivel>*{opacity:1;translate:0 0;rotate:none;scale:1}
[data-tilt]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ---------- herói ---------- */
.heroi-layout{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.heroi h1{font-size:clamp(34px,3.7vw,56px);line-height:1;margin:22px 0 22px}
.heroi .lide{max-width:500px;font-size:18px}
.provas-nota{margin-top:14px;font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}

/* palco: notebook com o time conversando e celular com a aprovação.
   Um ciclo de 18 s; tudo mede em cqw (porcentagem da largura do palco) para escalar junto. */
.palco{--ciclo:16s;--atraso:1.4s;position:relative;container-type:inline-size}
.cena{position:relative;aspect-ratio:100/80}
.cena::before{content:"";position:absolute;inset:8% 4% 0 10%;background:radial-gradient(closest-side,rgba(67,229,154,.16),transparent);pointer-events:none}

.note{position:absolute;left:0;top:2cqw;width:80cqw;transform:perspective(1800px) rotateY(9deg) rotateX(3deg);transform-origin:0 50%;animation:note-voa 1.1s .3s var(--curva) both,flutua 8s 1.4s ease-in-out infinite}
@keyframes flutua{0%,100%{translate:0 0}50%{translate:0 -1.1cqw}}
@keyframes note-voa{from{opacity:0;transform:perspective(1800px) translateX(-10cqw) rotateY(40deg) rotateX(3deg)}to{opacity:1;transform:perspective(1800px) rotateY(9deg) rotateX(3deg)}}
.note-tela{position:relative;aspect-ratio:16/10.4;padding:.9cqw;background:#08110C;border:1px solid rgba(156,228,192,.3);border-radius:1.4cqw 1.4cqw 0 0;box-shadow:0 5cqw 9cqw -3cqw rgba(0,0,0,.9),0 0 0 .6cqw rgba(67,229,154,.04);overflow:hidden}
.note-tela::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(233,255,243,.06) 47%,transparent 54%);transform:translateX(-100%);animation:reflexo 7s 2s ease-in-out infinite;pointer-events:none}
@keyframes reflexo{0%{transform:translateX(-100%)}30%,100%{transform:translateX(100%)}}
.note-barra{display:flex;align-items:center;gap:.7cqw;height:3.6cqw;padding:0 1.2cqw;background:#0F1C15;color:#7D9187;font:500 1.35cqw/1 var(--mono);letter-spacing:.06em}
.note-barra i{width:1cqw;height:1cqw;background:rgba(156,228,192,.25);transform:rotate(45deg)}
.note-barra span{margin-left:1cqw}
.note-base{position:relative;height:2.4cqw;margin:0 -4cqw;background:linear-gradient(#1A2A21,#0A130E);border-radius:0 0 2.4cqw 2.4cqw;box-shadow:0 3cqw 5cqw -2cqw rgba(0,0,0,.8)}
.note-base::before{content:"";position:absolute;left:40%;right:40%;top:0;height:.7cqw;background:#08110C;border-radius:0 0 1cqw 1cqw}

.chat{position:absolute;left:.9cqw;right:.9cqw;top:4.5cqw;bottom:.9cqw;overflow:hidden;padding:1.6cqw 13cqw 1.6cqw 1.8cqw;font-size:1.72cqw}
.chat::before{content:"";position:absolute;inset:0 0 auto;height:2.2em;background:linear-gradient(#08110C,transparent);z-index:2}
.msgs{display:grid;gap:.75em;animation:rola-chat var(--ciclo) var(--atraso) infinite both}
.msg{display:grid;grid-template-columns:2.5em minmax(0,1fr);gap:.8em;align-items:start;opacity:0}
.av{display:grid;place-items:center;width:2.5em;height:2.5em;font:800 1.05em/1 var(--display);color:#04130B;background:var(--c,#43E59A);clip-path:polygon(25% 0,100% 0,100% 75%,75% 100%,0 100%,0 25%)}
.av1{--c:#43E59A}.av2{--c:#9CE4C0}.av3{--c:#E7F0EA}.av4{--c:#F2C46D}.av5{--c:#8FD9B4}.av6{--c:#5FD3A0}
.msg b{display:block;font:700 .95em/1.2 var(--display);color:#E7F0EA}
.msg em{margin-left:.6em;font:500 .7em var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#7D9187}
.msg p{display:inline-block;margin-top:.3em;padding:.55em .85em;background:#0F1C15;border:1px solid rgba(156,228,192,.14);color:#CDE2D5;font:400 1em/1.35 var(--sans);white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .5em),calc(100% - .5em) 100%,0 100%)}
.msg img{display:block;width:3.6em;height:4.8em;margin-top:.45em;object-fit:cover;border:1px solid rgba(156,228,192,.3)}
.m1,.m2,.m3{opacity:1}
.m4{animation:m4 var(--ciclo) var(--atraso) infinite both}
.m5{animation:m5 var(--ciclo) var(--atraso) infinite both}
.m6{animation:m6 var(--ciclo) var(--atraso) infinite both}
@keyframes m4{0%,5%{opacity:0;transform:translateY(1.5em)}7%,96%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes m5{0%,13%{opacity:0;transform:translateY(1.5em)}15%,96%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes m6{0%,21%{opacity:0;transform:translateY(1.5em)}23%,96%{opacity:1;transform:none}98%,100%{opacity:0}}
.digitando{position:absolute;left:1.8cqw;bottom:.5em;display:flex;align-items:center;gap:.6em;font:500 .78em/1 var(--mono);letter-spacing:.06em;color:#7D9187;animation:digitando var(--ciclo) var(--atraso) infinite both}
.digitando span{display:flex;gap:.25em;padding:.45em .6em;background:#0F1C15;border:1px solid rgba(156,228,192,.14)}
.digitando i{width:.42em;height:.42em;border-radius:50%;background:#43E59A;animation:pulo 1.1s ease-in-out infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pulo{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-.35em);opacity:1}}
@keyframes digitando{0%,21%{opacity:1}23%,98%{opacity:0}100%{opacity:1}}
@keyframes rola-chat{0%,13%{transform:none;opacity:1}15%,21%{transform:translateY(-4.65em);opacity:1}23%,95%{transform:translateY(-9.3em);opacity:1}97.5%{transform:translateY(-9.3em);opacity:0}98.5%{transform:none;opacity:0}100%{transform:none;opacity:1}}

/* celular */
.cel{--k:31cqw;position:absolute;right:0;bottom:0;width:var(--k);font-size:calc(var(--k) / 21);aspect-ratio:9/18.5;padding:.7em;background:#0B1510;border:1.5px solid rgba(156,228,192,.38);border-radius:3.2em;
  box-shadow:0 4em 7em -2em #000,0 0 0 .5em rgba(67,229,154,.05);transform:rotate(-4deg);animation:cel-voa 1s .6s var(--curva) both,flutua 6s 1.6s ease-in-out infinite reverse}
@keyframes cel-voa{from{opacity:0;transform:translateY(40cqw) rotate(14deg)}to{opacity:1;transform:rotate(-4deg)}}
.cel::before{content:"";position:absolute;left:50%;top:1.2em;width:5em;height:1.3em;margin-left:-2.5em;background:#0B1510;border-radius:1em;z-index:5}
.cel-tela{position:relative;height:100%;overflow:hidden;border-radius:2.6em;background:#06100B}
.cs{position:absolute;inset:0}
.cs-bloqueio{display:flex;flex-direction:column;align-items:center;padding-top:4.2em;background:radial-gradient(90% 60% at 30% 20%,rgba(14,124,74,.55),transparent),radial-gradient(70% 50% at 80% 90%,rgba(67,229,154,.25),transparent),#06100B;
  animation:cs-bloqueio var(--ciclo) var(--atraso) infinite both}
.cs-hora{font:800 4.4em/1 var(--display);font-stretch:108%;color:#E7F0EA}
.cs-data{margin-top:.5em;font-size:.85em;color:#A3B5AB}
.notif{position:absolute;left:.8em;right:.8em;top:12.4em;display:grid;grid-template-columns:2.2em 1fr;gap:.7em;align-items:center;padding:.8em;background:rgba(231,240,234,.94);color:#0B1510;border-radius:1.1em;box-shadow:0 1em 2em -1em rgba(0,0,0,.6);
  animation:notif var(--ciclo) var(--atraso) infinite both}
.notif.notif-velha{animation:none;opacity:.92}
.notif.n2{top:18.4em}
.notif.n3{top:23.6em}
.notif-ic.ig{background:linear-gradient(45deg,#F2C46D,#F0605A,#C13584)}
.notif-ic.hub{background:#06100B;color:#E7F0EA}
.notif-ic{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:.6em;background:#0E7C4A;color:#fff}
.notif-ic svg{width:1.3em;height:1.3em;fill:currentColor}
.notif small{display:block;font-size:.68em;color:#4E5C57}
.notif b{display:block;font:700 .95em/1.2 var(--display)}
.notif div>span{display:block;font-size:.78em;color:#4E5C57}
.cs-revisao{padding:2.8em .9em .9em;background:#08110C;animation:cs-revisao var(--ciclo) var(--atraso) infinite both}
.cs-titulo{font:700 .95em/1.2 var(--display);color:#E7F0EA}
.cs-carrossel{margin-top:.7em;overflow:hidden;border-radius:.5em;aspect-ratio:3/4}
.cs-trilho{display:flex;width:300%;height:100%;animation:cs-trilho var(--ciclo) var(--atraso) infinite both;animation-timing-function:cubic-bezier(.7,0,.3,1)}
.cs-trilho img{width:33.3334%;height:100%;object-fit:cover;flex:none}
.cs-pontos{display:flex;justify-content:center;gap:.35em;margin-top:.6em}
.cs-pontos i{width:.42em;height:.42em;border-radius:50%;background:rgba(231,240,234,.3)}
.cs-pontos i:nth-child(1){animation:p1 var(--ciclo) var(--atraso) infinite both}
.cs-pontos i:nth-child(2){animation:p2 var(--ciclo) var(--atraso) infinite both}
.cs-pontos i:nth-child(3){animation:p3 var(--ciclo) var(--atraso) infinite both}
.cs-botoes{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin-top:.7em;font:700 .85em/1 var(--display);text-align:center}
.cs-botoes>span{position:relative;padding:.85em 0;border-radius:.5em}
.cs-ajuste{border:1px solid rgba(156,228,192,.3);color:#A3B5AB}
.cs-aprovar{background:#0E7C4A;color:#fff;overflow:hidden;animation:aprovar var(--ciclo) var(--atraso) infinite both}
.cs-aprovar .t2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.3em;color:#04130B}
.cs-aprovar .t2 svg{width:1.1em;height:1.1em}
.cs-aprovar .t1{display:inline-block;animation:t1 var(--ciclo) var(--atraso) infinite both}
.cs-aprovar .t2{animation:t2 var(--ciclo) var(--atraso) infinite both}
.toque{position:absolute;left:75%;top:50%;width:3em;height:3em;margin:-1.5em 0 0 -1.5em;border-radius:50%;background:rgba(233,255,243,.7);box-shadow:0 0 0 .4em rgba(233,255,243,.25);opacity:0;animation:toque var(--ciclo) var(--atraso) infinite both}
.cs-insta{background:#08110C;animation:cs-insta var(--ciclo) var(--atraso) infinite both}
.ig-topo{display:flex;align-items:center;gap:.6em;padding:2.8em .9em .7em}
.ig-av{width:2em;height:2em;border-radius:50%;background:conic-gradient(#F2C46D,#F0605A,#C13584,#F2C46D);box-shadow:inset 0 0 0 .2em #08110C}
.ig-topo b{display:block;font:700 .85em/1.2 var(--display);color:#E7F0EA}
.ig-topo small{display:block;font-size:.7em;color:#7D9187}
.cs-insta>img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.ig-acoes{display:flex;align-items:center;gap:.6em;padding:.7em .9em;color:#E7F0EA}
.ig-cor{width:1.6em;height:1.6em;animation:ig-cor var(--ciclo) var(--atraso) infinite both}
.ig-curtidas{font:700 .8em/1 var(--sans);animation:curtidas var(--ciclo) var(--atraso) infinite both;counter-reset:c var(--curtidas)}
.ig-curtidas::after{content:counter(c) " curtidas"}
.ig-coments{display:grid;gap:.45em;padding:0 .9em;font-size:.7em;line-height:1.3;color:#CDE2D5}
.ig-coments li{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0}
.ig-coments b{font-weight:700;color:#E7F0EA}
.ig-coments li:nth-child(1){animation:c1 var(--ciclo) var(--atraso) infinite both}
.ig-coments li:nth-child(2){animation:c2 var(--ciclo) var(--atraso) infinite both}
.ig-coments li:nth-child(3){animation:c3 var(--ciclo) var(--atraso) infinite both}
@keyframes c1{0%,63%{opacity:0;transform:translateY(.8em)}65%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes c2{0%,69%{opacity:0;transform:translateY(.8em)}71%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes c3{0%,75%{opacity:0;transform:translateY(.8em)}77%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.ig-voa{position:absolute;left:.9em;bottom:8.6em;width:3em;height:12em;pointer-events:none;opacity:0;animation:janela-ig var(--ciclo) var(--atraso) infinite both}
.ig-voa i{position:absolute;left:var(--x);bottom:0;width:1.3em;height:1.3em;color:#F0605A;opacity:0;animation:sobe-coracao 2.2s var(--a) ease-out infinite}
.ig-voa svg{width:100%;height:100%}
@keyframes sobe-coracao{0%{opacity:0;transform:none}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-10em) scale(1.2)}}
@keyframes janela-ig{0%,58%{opacity:0}60%,94%{opacity:1}97%,100%{opacity:0}}
.reacoes{position:absolute;right:28cqw;bottom:6cqw;width:24cqw;height:46cqw;font-size:1.4cqw;pointer-events:none;opacity:0;animation:janela-ig var(--ciclo) var(--atraso) infinite both}
.reacoes span{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:.5em;padding:.6em .95em;white-space:nowrap;background:rgba(9,18,13,.94);border:1px solid rgba(67,229,154,.4);font:700 1em/1 var(--display);color:#E7F0EA;box-shadow:0 1em 2em -1em #000;opacity:0;
  clip-path:polygon(.6em 0,100% 0,100% calc(100% - .6em),calc(100% - .6em) 100%,0 100%,0 .6em);animation:sobe-reacao 3.2s ease-out infinite}
.reacoes svg{width:1.15em;height:1.15em;color:#43E59A}
.reacoes .vermelho{color:#F0605A}
.reacoes .r2{right:5cqw;animation-delay:.8s}.reacoes .r3{right:1cqw;animation-delay:1.6s}.reacoes .r4{right:7cqw;animation-delay:2.4s}
@keyframes sobe-reacao{0%{opacity:0;transform:translateY(0) scale(.8)}12%{opacity:1;transform:translateY(-4cqw) scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-38cqw)}}
.ig-coracao-grande{position:absolute;left:50%;top:40%;width:6em;height:6em;margin:-3em 0 0 -3em;color:#fff;filter:drop-shadow(0 .4em 1em rgba(0,0,0,.5));opacity:0;animation:coracao var(--ciclo) var(--atraso) infinite both}
.ig-coracao-grande svg{width:100%;height:100%}

@keyframes cs-bloqueio{0%,33%{opacity:1}36%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes notif{0%,25%{opacity:0;transform:translateY(-140%)}28%,33%{opacity:1;transform:none}36%,100%{opacity:0;transform:none}}
@keyframes cs-revisao{0%,33%{opacity:0;transform:translateX(30%)}36%,52%{opacity:1;transform:none}55%,100%{opacity:0;transform:translateX(-25%)}}
@keyframes cs-trilho{0%,38%{transform:none}40%,42%{transform:translateX(-33.3333%)}44%,100%{transform:translateX(-66.6667%)}}
@keyframes p1{0%,39%{background:#E7F0EA}40%,100%{background:rgba(231,240,234,.3)}}
@keyframes p2{0%,39%{background:rgba(231,240,234,.3)}40%,43%{background:#E7F0EA}44%,100%{background:rgba(231,240,234,.3)}}
@keyframes p3{0%,43%{background:rgba(231,240,234,.3)}44%,100%{background:#E7F0EA}}
@keyframes toque{0%,46%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(.6)}50%,100%{opacity:0;transform:scale(1.7)}}
@keyframes aprovar{0%,47.5%{background:#0E7C4A}48.5%,100%{background:#43E59A}}
@keyframes t1{0%,47.5%{opacity:1}48.5%,100%{opacity:0}}
@keyframes t2{0%,47.5%{opacity:0;transform:translateY(60%)}49%,100%{opacity:1;transform:none}}
@keyframes cs-insta{0%,52%{opacity:0;transform:scale(1.08)}55%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ig-cor{0%,59%{color:#E7F0EA}60%,100%{color:#F0605A}}
@keyframes curtidas{0%,56%{--curtidas:0}92%,100%{--curtidas:128}}
@keyframes coracao{0%,58%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.18)}62%{transform:scale(.94)}64%,66%{opacity:1;transform:scale(1)}69%,100%{opacity:0;transform:scale(1)}}

/* as 4 etapas, acesas junto com a cena */
.etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:22px}
.etapas li{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--linha-2);font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.etapas b{font:800 15px/1 var(--display);color:inherit}
.etapas .e1{animation:e1 var(--ciclo) var(--atraso) infinite both}
.etapas .e2{animation:e2 var(--ciclo) var(--atraso) infinite both}
.etapas .e3{animation:e3 var(--ciclo) var(--atraso) infinite both}
.etapas .e4{animation:e4 var(--ciclo) var(--atraso) infinite both}
@keyframes e1{0%,24%{background:var(--marca);border-color:var(--marca);color:#fff}26%,100%{background:transparent;border-color:var(--linha-2);color:var(--texto-3)}}
@keyframes e2{0%,24%{background:transparent;border-color:var(--linha-2);color:var(--texto-3)}26%,34%{background:var(--marca);border-color:var(--marca);color:#fff}36%,100%{background:transparent;border-color:var(--linha-2);color:var(--texto-3)}}
@keyframes e3{0%,34%{background:transparent;border-color:var(--linha-2);color:var(--texto-3)}36%,52%{background:var(--marca);border-color:var(--marca);color:#fff}54%,100%{background:transparent;border-color:var(--linha-2);color:var(--texto-3)}}
@keyframes e4{0%,52%{background:transparent;border-color:var(--linha-2);color:var(--texto-3)}54%,97%{background:var(--marca);border-color:var(--marca);color:#fff}99%,100%{background:transparent;border-color:var(--linha-2);color:var(--texto-3)}}

/* palco estreito (celular): notebook na largura toda, celular embaixo à direita, etapas ao lado */
@container (max-width:560px){
  .cena{aspect-ratio:100/122}
  .note{width:100cqw;transform:none;animation-name:note-voa-cel,flutua}
  .chat{font-size:2.45cqw;padding-right:3cqw;padding-left:2cqw}
  .cel{--k:32cqw}
  .reacoes{right:30cqw;bottom:4cqw;font-size:2cqw}
  .etapas{position:absolute;left:0;bottom:0;width:60cqw;grid-template-columns:1fr;margin:0}
}
@keyframes note-voa-cel{from{opacity:0;transform:translateY(-6cqw)}to{opacity:1;transform:none}}

/* ---------- faixas em movimento ---------- */
.faixas{position:relative;padding:60px 0 40px;overflow:hidden}
.faixa{display:flex;overflow:hidden}
.faixa-trilho{display:flex;align-items:center;flex:none;gap:30px;padding-right:30px;animation:faixa 40s linear infinite}
@keyframes faixa{to{transform:translateX(-50%)}}
.faixa:hover .faixa-trilho{animation-play-state:paused}
.faixa-verde{position:relative;z-index:2;margin-inline:-40px;padding:11px 0;background:var(--marca);transform:rotate(-1.4deg);box-shadow:0 18px 40px -20px rgba(14,124,74,.7)}
.faixa-verde span{font:800 clamp(14px,1.45vw,20px)/1 var(--display);font-stretch:112%;letter-spacing:-.01em;text-transform:uppercase;color:#fff;white-space:nowrap}
.faixa-verde svg{flex:none;width:14px;height:16px;color:#04130B}
.faixa-posts{margin:-6px -40px 0;padding:18px 0;background:var(--fundo-2);border-block:1px solid var(--linha);transform:rotate(1.2deg)}
.faixa-posts .faixa-trilho{gap:12px;padding-right:12px;animation-duration:70s;animation-direction:reverse}
.faixa-posts img{flex:none;height:clamp(200px,22vw,300px);width:auto;border:1px solid var(--linha-2)}
.faixa-verde .faixa-trilho{gap:22px;padding-right:22px;animation-duration:34s}

/* ---------- oferta: bloco verde da marca ---------- */
.bloco-verde{--texto:#fff;--texto-2:rgba(255,255,255,.86);--texto-3:rgba(255,255,255,.7);--linha:rgba(255,255,255,.16);--linha-2:rgba(255,255,255,.3);--sinal:#B9FFDA;--selecao:rgba(3,12,7,.45);--grade:rgba(255,255,255,.07);--atras:#0A5E38;
  isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0E7C4A 0%,#0A5E38 55%,#063F25 100%)}
.bloco-verde::before{content:"";position:absolute;inset:-112px;z-index:-1;background-image:linear-gradient(var(--grade) 1px,transparent 1px),linear-gradient(90deg,var(--grade) 1px,transparent 1px);background-size:56px 56px;animation:verde-grade 14s linear infinite;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 30%,#000,transparent 80%);mask-image:radial-gradient(70% 70% at 70% 30%,#000,transparent 80%)}
@keyframes verde-grade{to{transform:translate(56px,112px)}}
.bloco-verde::after{content:"";position:absolute;z-index:-1;width:900px;height:900px;left:-200px;top:-300px;background:radial-gradient(closest-side,rgba(185,255,218,.22),transparent);animation:fv-luz 30s ease-in-out infinite alternate}
.oferta .plano{--cartao:#0B1510;--atras:#0B1510;--texto:#E7F0EA;--texto-2:#A3B5AB;--texto-3:#7D9187;--linha:rgba(156,228,192,.12);--linha-2:rgba(156,228,192,.22);--sinal:#43E59A;color:var(--texto)}
.oferta .plano-destaque{border-color:#43E59A}

/* ---------- como funciona: cada passo com a sua mini animação ---------- */
.processo{--de-t:-40px 0}
.passo.com-mini::before{display:none}
.passo.com-mini:not(:last-child)::after{top:76px}
.mini{position:relative;display:grid;place-items:center;height:124px;margin-bottom:22px;border:1px solid var(--linha);background:var(--fundo-2);overflow:hidden}
.mini::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(67,229,154,.08) 50%,transparent 60%);transform:translateX(-100%);animation:fv-feixe 6s linear infinite}
.mv-planos{display:flex;justify-content:center;align-items:center;gap:10px}
.mv-planos span{display:grid;place-items:center;width:46px;height:58px;border:1px solid var(--linha-2);background:var(--cartao);font:800 20px/1 var(--display);font-stretch:110%}
.mv-moldura{position:absolute;left:calc(50% - 82px);top:calc(50% - 32px);width:52px;height:64px;border:2px solid var(--sinal);animation:mv-sel 6s var(--curva) infinite}
@keyframes mv-sel{0%,16%{transform:none}26%,42%{transform:translateX(112px)}52%,92%{transform:translateX(56px)}100%{transform:none}}
.mv-janela{display:grid;gap:10px;width:172px;padding:12px 14px;border:1px solid var(--linha-2);background:var(--cartao)}
.mv-janela b{font:700 12px/1 var(--display)}
.mv-barra{display:block;height:6px;background:var(--linha)}
.mv-barra i{display:block;height:100%;background:var(--sinal);transform-origin:0 50%;animation:mv-enche 5s var(--curva) infinite}
.mv-janela em{display:flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--sinal);animation:mv-pronto 5s infinite}
.mv-janela em svg{width:14px;height:14px}
@keyframes mv-enche{0%{transform:scaleX(0)}60%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes mv-pronto{0%,62%{opacity:0;transform:translateY(5px)}68%,94%{opacity:1;transform:none}100%{opacity:0}}
.mv-chama{display:grid;gap:14px;justify-items:center}
.mv-campo{display:flex;align-items:center;width:160px;height:34px;padding:0 12px;border:1px solid var(--linha-2);background:var(--cartao);font:500 14px/1 var(--mono);color:var(--sinal)}
.mv-digita{display:inline-block;width:0;overflow:hidden;white-space:nowrap;border-right:2px solid var(--sinal);animation:mv-digita 5s steps(8) infinite}
@keyframes mv-digita{0%,8%{width:0}32%,92%{width:8.2ch}100%{width:0}}
.mv-avs{display:flex;gap:6px}
.mv-avs i{display:grid;place-items:center;width:26px;height:26px;font:800 11px/1 var(--display);font-style:normal;color:#04130B;background:var(--sinal);opacity:0;clip-path:polygon(25% 0,100% 0,100% 75%,75% 100%,0 100%,0 25%);animation:mv-av 5s infinite}
.mv-avs i:nth-child(2){animation-delay:.15s;background:#9CE4C0}.mv-avs i:nth-child(3){animation-delay:.3s;background:#E7F0EA}.mv-avs i:nth-child(4){animation-delay:.45s;background:#F2C46D}.mv-avs i:nth-child(5){animation-delay:.6s;background:#8FD9B4}
@keyframes mv-av{0%,36%{opacity:0;transform:scale(.3)}42%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
.mv-cel{position:relative;display:grid;gap:6px;align-content:end;width:66px;height:104px;padding:8px 7px;border:1.5px solid var(--linha-2);border-radius:12px;background:var(--cartao)}
.mv-post{display:block;height:50px;background:linear-gradient(135deg,var(--marca),#063F25);border-radius:3px}
.mv-botao{padding:6px 0;border-radius:4px;background:var(--marca);color:#fff;font:700 9px/1 var(--display);text-align:center;animation:mv-botao 5s infinite}
.mv-toque{position:absolute;left:50%;bottom:6px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:rgba(233,255,243,.6);opacity:0;animation:mv-toque 5s infinite}
@keyframes mv-toque{0%,45%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(.7)}60%,100%{opacity:0;transform:scale(1.8)}}
@keyframes mv-botao{0%,50%{background:var(--marca);color:#fff}53%,94%{background:#43E59A;color:#04130B}100%{background:var(--marca);color:#fff}}

/* ---------- um dia do time: a linha enche com a rolagem ---------- */
.dia{position:relative;border-bottom:1px solid var(--linha)}
.dia::before,.dia::after{content:"";position:absolute;left:3.5px;top:0;bottom:0;width:1px;background:var(--linha-2)}
.dia::after{left:3px;width:2px;background:linear-gradient(var(--sinal),var(--marca));transform-origin:50% 0;transform:scaleY(var(--p,0))}
.dia li{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:20px 40px;align-items:center;padding:26px 0;border-top:1px solid var(--linha);opacity:.4;transition:opacity .6s var(--curva)}
.dia li.ativo{opacity:1}
.dia time{position:relative;z-index:1;display:flex;align-items:center;gap:14px;font:800 30px/1 var(--display);font-stretch:112%;letter-spacing:-.02em;color:var(--texto-3);transition:color .5s}
.dia time::before{content:"";flex:none;width:8px;height:8px;background:var(--linha-2);transform:rotate(45deg);transition:background-color .4s,box-shadow .4s,transform .5s var(--curva)}
.dia li.ativo time{color:var(--sinal)}
.dia li.ativo time::before{background:var(--sinal);box-shadow:0 0 0 5px rgba(67,229,154,.16);transform:rotate(45deg) scale(1.3)}
.dia h3{font-size:21px;font-stretch:106%;margin-bottom:6px}
.dia p{max-width:620px;font-size:15.5px;color:var(--texto-2)}
.dia li>div{transform:translateX(-14px);transition:transform .7s var(--curva)}
.dia li.ativo>div{transform:none}
.plano-min{justify-self:end;padding:8px 12px 7px;border:1px solid var(--linha-2);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);white-space:nowrap}

/* ---------- times e preços ---------- */
.planos{--de-t:0 60px;--de-s:.96;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.plano{position:relative;display:flex;flex-direction:column;height:100%;padding:clamp(26px,2.6vw,36px);border:1px solid var(--linha);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(67,229,154,.09),transparent 60%),var(--cartao)}
.plano:hover{border-color:var(--linha-2)}
.plano-destaque{border-color:var(--marca);background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(67,229,154,.14),transparent 60%),linear-gradient(160deg,rgba(14,124,74,.24),rgba(14,124,74,0) 55%),var(--cartao);box-shadow:var(--sombra)}
/* a luz correndo pela borda, como o traço do logo */
.plano-destaque::before{content:"";position:absolute;inset:-1px;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 72%,var(--sinal) 86%,transparent 100%);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:gira 5s linear infinite}
@keyframes gira{to{--ang:360deg}}
.plano-etiqueta{position:absolute;top:-13px;left:clamp(26px,2.6vw,36px);z-index:2;padding:7px 12px 6px;background:var(--marca);color:#fff;font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.plano-qtd{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.plano-qtd b{font-weight:500;color:var(--sinal)}
.plano h3{margin:14px 0 8px;font-size:clamp(26px,2.4vw,32px);font-stretch:108%;letter-spacing:-.02em}
.plano-para{min-height:3.3em;font-size:15.5px;color:var(--texto-2)}
.plano-preco{margin:22px 0 24px;font:800 clamp(46px,4.4vw,60px)/1 var(--display);font-stretch:112%;letter-spacing:-.03em}
.plano-preco small{margin-left:6px;font:500 14px var(--mono);letter-spacing:.04em;color:var(--texto-3)}
.plano-lista{margin-bottom:30px;border-top:1px solid var(--linha)}
.plano-lista li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--linha);font-size:14.5px;line-height:1.5;color:var(--texto-2)}
.plano-lista li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;background:var(--sinal);transform:rotate(45deg)}
.plano-lista b{display:block;font-size:15px;font-weight:600;color:var(--texto)}
.plano-lista .tudo{padding-left:0;font-weight:600;color:var(--texto)}
.plano-lista .tudo::before{content:none}
.plano .botao{margin-top:auto}
.garantias{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:36px}
.garantias li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--texto-2)}
.garantias b{font-weight:600;color:var(--texto)}
.garantias svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--sinal)}

/* ---------- exemplos: carrosséis passando sozinhos e Reels tocando ---------- */
.exemplos{--de-t:60px 0;--de-r:y 28deg;--de-s:.92;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) repeat(2,minmax(0,1.5fr));gap:12px;perspective:1400px}
.exemplos .reel{grid-row:1/span 2}
.exemplos .reel-1{display:none}
.exemplos .reel-2{grid-column:4}
.exemplos .reel-3{grid-column:5}
.exemplos a{position:relative;display:block;height:100%;overflow:hidden;border:1px solid var(--linha);background:var(--cartao);transition:border-color .3s}
.exemplos a:hover{border-color:var(--sinal)}
.slides{display:block;overflow:hidden;aspect-ratio:3/4}
.slides .trilho{display:flex;width:300%;height:100%;animation:ig-desliza 9.6s var(--d,0s) infinite;animation-timing-function:cubic-bezier(.7,0,.3,1)}
.slides img{flex:none;width:33.3334%;height:100%;object-fit:cover}
.exemplos a:hover .trilho,.exemplos a:hover .pontos-ig i{animation-play-state:paused}
@keyframes ig-desliza{0%,28%{transform:none}33%,61%{transform:translateX(-33.3333%)}66%,94%{transform:translateX(-66.6667%)}100%{transform:none}}
.pontos-ig{position:absolute;top:10px;left:0;right:0;display:flex;justify-content:center;gap:5px}
.pontos-ig i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.38);animation:ig-ponto 9.6s infinite}
.pontos-ig i:nth-child(1){animation-delay:var(--d,0s)}
.pontos-ig i:nth-child(2){animation-delay:calc(var(--d,0s) + 3.2s)}
.pontos-ig i:nth-child(3){animation-delay:calc(var(--d,0s) + 6.4s)}
@keyframes ig-ponto{0%,30%{background:#fff;transform:scale(1.3)}33%,100%{background:rgba(255,255,255,.38);transform:none}}
.etq-ex{position:absolute;left:8px;bottom:8px;padding:6px 9px 5px;background:var(--topo-fundo);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--texto)}
.exemplos video{display:block;width:100%;height:100%;object-fit:cover;background:#06100B}
.cabeca-lado .botao{margin-top:4px}

/* ---------- o que você precisa ---------- */
.requisitos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.requisitos ul{display:grid;gap:16px;align-content:start}
.requisitos ul:first-child{--de-t:-40px 0}
.requisitos ul+ul{--de-t:40px 0}
.requisitos li{padding:24px 26px 26px;border:1px solid var(--linha);background:var(--cartao)}
.requisitos li:hover{border-color:var(--linha-2)}
.req-tipo{display:inline-block;padding:6px 10px 5px;background:var(--marca);color:#fff;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.req-tipo.opcional{background:var(--linha-2);color:var(--texto)}
.requisitos h3{margin:16px 0 6px;font-size:21px;font-stretch:106%}
.requisitos p{font-size:15px;color:var(--texto-2)}

/* seções com faixa de fundo própria por cima do fundo vivo */
.secao.textura-grade{background:linear-gradient(180deg,transparent,rgba(8,17,12,.6) 30%,rgba(8,17,12,.6) 70%,transparent)}
:root[data-tema="claro"] .secao.textura-grade{background:linear-gradient(180deg,transparent,rgba(237,241,238,.8) 30%,rgba(237,241,238,.8) 70%,transparent)}

/* ---------- rodapé ---------- */
.rodape-marca{font-size:clamp(18px,6.4vw,118px);line-height:.95;margin:10px 0 .12em}
.rodape-creditos{flex:1 1 360px;max-width:620px;font:500 11px/1.6 var(--mono);letter-spacing:.06em;color:var(--texto-3)}
.rodape-creditos a{text-decoration:underline;text-underline-offset:3px}

/* ---------- telas menores ---------- */
@media (max-width:1100px){
  .exemplos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .exemplos .reel{grid-row:auto;grid-column:auto}
  .exemplos .reel-1{display:block}
  .exemplos video{aspect-ratio:9/16;height:auto}
  .planos{grid-template-columns:1fr;max-width:620px}
  .plano-para{min-height:0}
}
@media (max-width:980px){
  .heroi-layout{grid-template-columns:1fr}
  .palco{width:100%;max-width:640px}
  .requisitos{grid-template-columns:1fr}
  .dia li{grid-template-columns:110px minmax(0,1fr)}
  .plano-min{grid-column:2;justify-self:start}
}
@media (max-width:700px){
  .dia li{grid-template-columns:1fr;gap:10px;padding:22px 0 22px 26px}
  .dia time{margin-left:-26px;font-size:24px}
  .plano-min{grid-column:auto}
  .exemplos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .exemplos .reel-1{display:none}
  .garantias{flex-direction:column}
  .topo-marca{font-size:12px;gap:8px}
  .hub-tag{font-size:10px;padding:4px 6px 3px}
  .topo-acoes{gap:6px}
  .faixa-posts img{height:190px}
  .etapas li{padding:8px 10px;font-size:10px}
  .etapas b{font-size:13px}
}
@media (max-width:400px){
  .tema-botao{display:none}
}

/* ---------- movimento reduzido: tudo parado no estado mais útil ---------- */
@media (prefers-reduced-motion:reduce){
  .fundo-vivo,.mini::after,.note-tela::after{display:none}
  .faixa-trilho,.msgs,.msg,.cs,.notif,.cs-trilho,.cs-pontos i,.cs-aprovar,.cs-aprovar span,.toque,.ig-cor,.ig-curtidas,.ig-coracao-grande,.etapas li,.slides .trilho,.pontos-ig i,.plano-destaque::before,
  .digitando,.digitando i,.ig-coments li,.ig-voa,.ig-voa i,.reacoes,.reacoes span,.note,.cel,.mv-moldura,.mv-barra i,.mv-janela em,.mv-digita,.mv-avs i,.mv-toque,.mv-botao,.bloco-verde::before,.bloco-verde::after{animation:none!important}
  .msg{opacity:1}
  .msgs{transform:translateY(-9.3em)}
  .cs-bloqueio,.cs-insta,.toque,.ig-coracao-grande,.digitando,.ig-voa,.reacoes{opacity:0}
  .cs-revisao{opacity:1}
  .mv-avs i,.mv-janela em{opacity:1}
  .mv-digita{width:8.2ch}
  .js [data-grupo]>*{opacity:1;translate:none;rotate:none;scale:1}
  .js .cabeca.surge h2{opacity:1}
}