/* Widgets vivos. So transform e opacity. Sem .w-on o que se ve e a pose final. */
.w-pausa,.w-pausa *,.w-tudo .w1,.w-tudo .w1 *,.w-tudo .rb,.w-tudo .rb *,.w-tudo .cod,.w-tudo .cod *,.w-tudo .cod-moldura,.w-tudo .faixa *,.w-tudo .rodape__i5,.w-tudo .rodape__i5 *,.w-tudo [data-w=card] *{animation-play-state:paused!important}
.w-pf{animation-play-state:paused!important}
/* W1: 11 s x 5; --fo:0 apaga no fim de cada ciclo, .w-fim deixa o ultimo na pose final */
.w1{--fo:0}.w1.w-fim{--fo:1}
.w1.w-on [class*="w1-"],.w1.w-on #w1-faisca{animation:11s cubic-bezier(.2,.7,.2,1) 5 both}
.w1.w-on .w1-b1{animation-name:b1}.w1.w-on .w1-b2{animation-name:b2}.w1.w-on .w1-b3{animation-name:b3}.w1.w-on .w1-b4{animation-name:b4}
.w1.w-on .w1-pt1{animation-name:p1}.w1.w-on .w1-pt2{animation-name:p2}.w1.w-on #w1-faisca{animation-name:fa}
.w1.w-on .w1__pt{display:flex;position:absolute;left:0}
.w1.w-on .w1__pt i{animation:pt .6s ease-in-out infinite alternate}
.w1.w-on .w1__pt i:nth-child(2){animation-delay:.15s}.w1.w-on .w1__pt i:nth-child(3){animation-delay:.3s}
.w1.w-end .w1__pt{display:none}
@keyframes b1{0%,1%{opacity:0;transform:translateY(8px)}3%,87%{opacity:1;transform:none}94%,100%{opacity:var(--fo)}}
@keyframes b2{0%,6%{opacity:0;transform:translateY(8px)}8%,87%{opacity:1;transform:none}94%,100%{opacity:var(--fo)}}
@keyframes b3{0%,9%{opacity:0;transform:translateY(8px)}11%,87%{opacity:1;transform:none}94%,100%{opacity:var(--fo)}}
@keyframes b4{0%,13%{opacity:0;transform:translateY(8px)}15%,87%{opacity:1;transform:none}94%,100%{opacity:var(--fo)}}
@keyframes p1{0%,3%{opacity:0}4%,5%{opacity:1}6%,100%{opacity:0}}
@keyframes p2{0%,9%{opacity:0}10%,11%{opacity:1}13%,100%{opacity:0}}
@keyframes fa{0%,3%,6%,9%,13%,100%{transform:none}5%,11%{transform:scale(1.2)}}
@keyframes pt{from{opacity:.3}to{opacity:1}}
/* Robots: 6 s x 3 ciclos (.rb-inf enquanto o W1 corre); repouso = pose do SVG */
.rb{--n:3}.rb.rb-inf{--n:infinite}
.rb .rb-br,.rb .rb-fe{transform-box:view-box!important;transform-origin:84px 93px!important}
.rb .rb-oe,.rb .rb-od,.rb .rb-ex{transform-box:fill-box!important;transform-origin:50% 50%!important}
.rb-on .rb-a{animation:ant 6s ease-in-out var(--n)}
.rb-on .rb-oe,.rb-on .rb-od{animation:pis 6s var(--n) var(--dl,0s)}
.rb--i .rb-a{animation:none!important}
.rb--i svg:nth-child(2){--dl:.4s}.rb--i svg:nth-child(3){--dl:.8s}
.rb--c.rb-on .rb-br,.rb--c.rb-on .rb-fe{animation:cb 6s ease-in-out var(--n)}
.rb--c.rb-on .rb-ex{animation:ce 6s ease-in-out var(--n)}
.rb--d.rb-on .rb-br,.rb--d.rb-on .rb-fe{animation:db 6s ease-in-out var(--n)}
.rb--d.rb-on .rb-ex{animation:de 6s ease-in-out var(--n)}
.rb--r.rb-on .rb-br,.rb--r.rb-on .rb-fe{animation:rb 6s ease-in-out var(--n)}
.rb--r.rb-on .rb-ex{animation:re 6s ease-in-out var(--n)}
@keyframes ant{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes pis{0%,44%,48%,100%{transform:none}46%{transform:scaleY(.1)}}
@keyframes cb{0%,8%,42%,100%{transform:none}25%{transform:rotate(8deg)}}
@keyframes ce{0%,10%,42%,100%{transform:none}30%{transform:translateY(-10px)}}
@keyframes db{0%,15%,60%,100%{transform:none}35%{transform:rotate(6deg)}}
@keyframes de{0%,10%,60%,100%{transform:none}35%{transform:translateX(12px)}}
@keyframes rb{0%,72%,100%{transform:none}20%{transform:rotate(-14deg)}55%{transform:rotate(14deg)}}
@keyframes re{0%,6%,80%,100%{opacity:1;transform:none}12%,62%{opacity:0;transform:scale(.6)}74%{opacity:1;transform:scale(1.08)}}
/* W2: cenas dos cartoes, 3,2 s, uma vez por activacao */
.cartao.w-on [id^=w2-]{animation-duration:3.2s;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:both;transform-box:fill-box;transform-origin:50% 50%}
.w-on #w2-app-toque{animation-name:a1}.w-on #w2-app-lista{animation-name:a2}.w-on #w2-app-detalhe{animation-name:a3}.w-on #w2-app-visto{animation-name:a4}
.w-on #w2-ia-pergunta{animation-name:f1}.w-on #w2-ia-faisca{animation-name:f2}.w-on #w2-ia-sugestao{animation-name:f3}
.w-on #w2-msg-recebida{animation-name:c1}.w-on #w2-msg-resposta{animation-name:c3}
.w-on #w2-msg-p1,.w-on #w2-msg-p2,.w-on #w2-msg-p3{animation-name:c2}.w-on #w2-msg-p2{animation-delay:.14s}.w-on #w2-msg-p3{animation-delay:.28s}
.w-on #w2-orc-l1{animation-name:d1}.w-on #w2-orc-l2{animation-name:d2;animation-delay:.12s}.w-on #w2-orc-l3{animation-name:d3;animation-delay:.24s}
.w-on [id$=-marca]{animation-name:d4}.w-on #w2-orc-l2-marca{animation-delay:.15s}.w-on #w2-orc-l3-marca{animation-delay:.3s}
.w-on #w2-org-caderno{animation-name:e1}.w-on #w2-org-folha{animation-name:e2;animation-delay:.14s}.w-on #w2-org-papel{animation-name:e3;animation-delay:.28s}
.w-on #w2-org-linhas rect{animation-name:e4}.w-on #w2-org-linhas rect:nth-child(2){animation-delay:.12s}.w-on #w2-org-linhas rect:nth-child(3){animation-delay:.24s}.w-on #w2-org-linhas rect:nth-child(4){animation-delay:.36s}
.w-on #w2-org-visto{animation-name:e5}
@keyframes a1{0%,18%{opacity:0;transform:scale(.4)}19%{opacity:1;transform:scale(.4)}31%,100%{opacity:0;transform:scale(1.4)}}
@keyframes a2{0%,31%{opacity:1;transform:none}47%,100%{opacity:0;transform:translateX(-100%)}}
@keyframes a3{0%,31%{opacity:0;transform:translateX(100%)}47%,100%{opacity:1;transform:none}}
@keyframes a4{0%,69%{opacity:0;transform:scale(.6)}81%,100%{opacity:1;transform:none}}
@keyframes f1{0%{opacity:0;transform:translateX(-8px)}16%,100%{opacity:1;transform:none}}
@keyframes f2{0%,25%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1.15)}44%,100%{opacity:1;transform:none}}
@keyframes f3{0%,44%{opacity:0;transform:translateY(14px)}69%,100%{opacity:1;transform:none}}
@keyframes c1{0%{opacity:0}13%,100%{opacity:1}}
@keyframes c2{0%,15%{opacity:0}20%,33%{opacity:.3}27%,40%,100%{opacity:1}}
@keyframes c3{0%,50%{opacity:0;transform:scaleX(.7)}69%,100%{opacity:1;transform:none}}
@keyframes d1{0%{opacity:0;transform:translate(24px,60px)}16%,69%{opacity:1;transform:translate(0,60px)}88%,100%{opacity:1;transform:none}}
@keyframes d2{0%{opacity:0;transform:translateX(24px)}16%,100%{opacity:1;transform:none}}
@keyframes d3{0%{opacity:0;transform:translate(24px,-60px)}16%,69%{opacity:1;transform:translate(0,-60px)}88%,100%{opacity:1;transform:none}}
@keyframes d4{0%,37%{opacity:0;transform:scale(.5)}53%,100%{opacity:1;transform:none}}
@keyframes e1{0%{opacity:.8;transform:translate(-30px,34px) rotate(-12deg)}50%,100%{opacity:1;transform:none}}
@keyframes e2{0%{opacity:.8;transform:translate(-24px,-18px) rotate(10deg)}50%,100%{opacity:1;transform:none}}
@keyframes e3{0%{opacity:.8;transform:translate(-30px,-34px) rotate(-8deg)}50%,100%{opacity:1;transform:none}}
@keyframes e4{0%,44%{opacity:0}63%,100%{opacity:1}}
@keyframes e5{0%,75%{opacity:0;transform:scale(.6)}90%,100%{opacity:1;transform:none}}
/* W3: a linha de cada passo enche aos 60% */
.passos li::after{transform-origin:50% 0;transition:transform 400ms ease-out}
.passos li.w3-pre::after{transform:scaleY(0)}
.passos li .w3-ico,.passos li .seta,.passos li .mini{transition:transform 300ms ease-out 80ms,opacity 300ms ease-out 80ms}
.passos li.w3-pre .w3-ico,.passos li.w3-pre .seta{transform:scale(.85);opacity:.5}
.passos li.w3-pre .mini{transform:scale(.6);opacity:.5}
/* Codigo: cursor a 1 Hz e deriva lenta (so a camada em foco) */
.cod__i{display:block;position:relative}
.cod .cur{position:absolute;left:0;top:0;width:1ch;height:1em;background:currentColor;animation:cu 1s steps(1) infinite}
.cod.w-dr .cod__i{animation:dr 12s ease-in-out infinite alternate}
@keyframes cu{50%{opacity:0}}
@keyframes dr{to{transform:translateY(-10px)}}
@supports (animation-timeline:view()){/* Parallax suave (curso 12 px), so em ecras largos. Os blocos com overflow hidden usam o timeline da propria seccao */@media (min-width:900px){
html{timeline-scope:--pt,--pf,--pr}
.topo{view-timeline:--pt}.faixa{view-timeline:--pf}.rodape{view-timeline:--pr}
.w1__robot,.cod--topo{animation:pa linear both;animation-timeline:--pt}
.cod-moldura{animation:pa linear both;animation-timeline:view()}
.faixa>.ia,.faixa>svg{animation:pb linear both;animation-timeline:--pf}
.rodape__i5>.ia,.rodape__i5>svg{animation:pb linear both;animation-timeline:--pr}}}
@keyframes pa{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@keyframes pb{from{transform:translateY(-6px) scale(1.04)}to{transform:translateY(6px) scale(1.04)}}
/* Texto escuro nas bolhas claras do assistente (o estilo.css deixa texto claro sobre fundo claro) */
.w1__b--a{color:var(--dd-texto-botao)}
.w1__pausa{color:var(--dd-texto-botao)}