/* peça que só existe na união: barra de avanço */
.avanco{display:none}
.viva .pi{display:block}

/* cena viva: palco de 1440x900 preso na tela; a rolagem conduz cada peça (cena.js escreve transform e opacity) */
.viva .trilho{height:890vh}
.viva .presa{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--fundo);--hzd:170px;--hz:calc(50% + var(--hzd) * var(--k,1))}
.viva .cena{position:absolute;left:50%;top:50%;width:1440px;height:900px;transform:translate(-50%,-50%) scale(var(--k,1));font-size:18px}
.viva .cam{position:absolute;inset:0;padding:0;background:none;display:block;overflow:visible;pointer-events:none;color:var(--claro)}
.viva [data-de]{pointer-events:none !important}
.viva [data-de].on{pointer-events:auto !important}
.viva [data-de] > *,.viva .mk{will-change:transform,opacity}
.viva .mk{display:block;overflow:hidden;padding:.06em .06em .14em;margin:-.06em -.06em -.14em}
.viva .avanco{display:block;position:fixed;z-index:80;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,oklch(0.872 0.102 215.4),oklch(0.676 0.181 247.7));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* a luz de cada seção: camadas inteiras que acendem por cima da anterior */
.viva .ceu{display:block;position:absolute;inset:0}
.ceu i{position:absolute;inset:0;opacity:0}
.ceu .l0{opacity:1;background:linear-gradient(180deg,oklch(0.115 0.02 252) 0,oklch(0.2 0.035 250) var(--hz),oklch(0.17 0.03 250) var(--hz),oklch(0.1 0.018 252) 100%)}
.ceu .l1{inset:-200% 0 0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%);background-repeat:no-repeat;background-position:0 100%,0 0;background-size:100% 33.334%,100% 100%;background-image:linear-gradient(180deg,oklch(0.62 0.08 238) 0,oklch(0.8 0.055 237) 38%,oklch(0.9 0.035 240) 60%,oklch(0.93 0.026 240) 100%),linear-gradient(180deg,oklch(0.2 0.035 250) 0,oklch(0.27 0.045 248) 22%,oklch(0.42 0.07 244) 46%,oklch(0.62 0.08 238) 66.6%)}
.ceu .foco,.ceu .broto{inset:auto;left:-10%;top:-20%;width:120%;height:140%;background:radial-gradient(closest-side,oklch(0.995 0.012 90/.62),oklch(0.99 0.01 90/.3) 40%,transparent 72%)}
.ceu .broto{background:radial-gradient(closest-side,oklch(0.995 0.004 230),oklch(0.98 0.02 225/.86) 5%,oklch(0.94 0.05 222/.62) 12%,oklch(0.9 0.075 220/.4) 22%,oklch(0.86 0.095 222/.24) 34%,oklch(0.82 0.11 228/.13) 48%,oklch(0.78 0.125 233/.06) 64%,oklch(0.757 0.145 235.7/.02) 82%,oklch(0.757 0.145 235.7/0))}
.ceu .l2{background:radial-gradient(ellipse 46% 62% at 78% 46%,oklch(0.995 0.004 235/.95),oklch(0.985 0.006 235/.4) 50%,transparent 76%),linear-gradient(180deg,oklch(0.9 0.035 240) 0,oklch(0.965 0.008 240) var(--hz))}
.ceu .tarde{inset:0 0 -200%;background-repeat:no-repeat;background-size:100% 33.334%,100% 100%;background-image:linear-gradient(180deg,oklch(0.19 0.022 250) 0,oklch(0.33 0.034 247) 69%,oklch(0.27 0.045 248) 100%),linear-gradient(180deg,oklch(0.27 0.045 248) 33.3%,oklch(0.42 0.07 244) 43%,oklch(0.62 0.08 238) 54%,oklch(0.8 0.055 237) 68%,oklch(0.9 0.035 240) 82%,oklch(0.965 0.008 240/0) 100%)}
/* a noite da 04 desce num degradê só, sem linha do horizonte: a única luz é a do papel, à esquerda */
.ceu .l3{background:radial-gradient(28.5% 42% at 25.7% 51.5%,oklch(0.93 0.03 230/.12),oklch(0.8 0.06 235/.045) 55%,transparent),linear-gradient(180deg,oklch(0.27 0.04 247) 0,oklch(0.2 0.03 249) 38%,oklch(0.145 0.022 251) 72%,oklch(0.115 0.018 252) 100%)}
.ceu .l4{background:linear-gradient(180deg,oklch(0.21 0.02 250) 0,oklch(0.29 0.026 250) var(--hz),oklch(0.25 0.022 250) var(--hz),oklch(0.17 0.02 252) 100%)}
.ceu .l5{background:linear-gradient(180deg,oklch(0.075 0.014 252) 0,oklch(0.1 0.018 252) var(--hz),oklch(0.115 0.02 252) var(--hz),oklch(0.065 0.012 252) 100%)}
.ceu .aurora{inset:auto 0 auto 0;top:calc(var(--hz) - 62vh);height:62vh;background:radial-gradient(ellipse 46% 100% at var(--ax,68%) 100%,oklch(0.757 0.145 235.7/.34),oklch(0.676 0.181 247.7/.1) 45%,transparent 72%)}
.ceu .fio,.ceu .corre{inset:auto 0 auto 0;top:calc(var(--hz) - 1px);height:2px;background:linear-gradient(90deg,transparent 0%,oklch(0.99 0.004 230/.5) 28%,oklch(0.99 0.004 230) 62%,oklch(0.99 0.004 230/.85) 86%,transparent 100%);box-shadow:0 0 12px 1px oklch(0.872 0.102 215.4/.9),0 0 60px 10px oklch(0.757 0.145 235.7/.4);transform-origin:66% 50%}
.ceu .corre{background:linear-gradient(90deg,transparent 0%,oklch(0.99 0.004 230) 7%,oklch(0.99 0.004 230) 97%,transparent 100%)}

/* 01 */
.viva .s1{display:block}
.viva .dobra{display:contents}
.viva .s1 .tx{position:absolute;left:0;right:0;top:100px}
.viva .s1 h1{font-size:60px;max-width:none;margin-top:12px}
.viva .s1 .apoio{font-size:21px;max-width:none;margin-top:18px}
/* faixa de baixo: taxas à esquerda e a ação à direita, centrada na linha dos números; o fim deixa a mesma folga do menu no topo */
.viva .s1 .btns{position:absolute;right:200px;top:815px;margin:0;justify-content:flex-end}
.viva .taxas{position:absolute;left:200px;top:776px;margin:0;text-align:left}
.viva .taxas .rot{margin-inline:0}
.viva .s1 .tira{grid-template-columns:repeat(4,auto);justify-content:start;gap:0 40px;max-width:none;margin-top:8px}
.viva .s1 .tira > div{padding:0;border-radius:0;background:none}
.viva .s1 .tira dt{font-size:14px}
.viva .s1 .tira dd{justify-content:flex-start;font-size:38px;margin-top:3px}
.viva .s1 .nota{margin:10px 0 0;max-width:none;font-size:12.5px}
/* do tamanho da home guardada (919 de 1440); o piso dos tablets pousa na linha de luz, que na abertura desce para 714px */
.viva .grupo{position:absolute;left:260.5px;top:305px;width:919px;margin:0;padding:0;container-type:normal;will-change:transform,opacity}
.viva .ha-raiz:after{display:none}
.viva .ha-raiz{width:100%}
/* na cena a maquininha da abertura é a .voa, que sai do conjunto e vira a da 02 */
.voa{display:none}
.viva .voa{display:block;position:absolute;z-index:5;left:0;top:0;width:225px;height:418.5px;max-width:none;transform-origin:0 0;pointer-events:none;will-change:transform,opacity}
.viva .ha-peca[data-id="maquininha"]{visibility:hidden}
/* a luz da abertura fica no meio da tela; nas outras seções a aurora volta ao lugar de sempre */
.viva .presa.p0{--ax:50%}
.viva .p0 .ceu .aurora{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}

/* 02 */
.viva .s2{color:var(--tinta)}
/* título e abas no eixo; embaixo, um conjunto no meio da tela: o aparelho à esquerda e o cartão de vidro à direita,
   os dois com o centro na mesma altura (586). O meio do aparelho (440), a borda do cartão (760) e a largura dele (700)
   são o CONJ do cena.js, que desloca o conjunto para centralizar cada aparelho e dá ao cartão a altura do texto */
.viva .s2 .cab{position:absolute;left:0;right:0;top:83px;text-align:center}
.viva .s2 .cab h2{font-size:56px;max-width:none}
.viva .abas{position:absolute;left:0;right:0;top:228px;width:fit-content;margin:0 auto;padding:4px;overflow:visible}
.viva .abas button{min-height:48px;padding:0 15px;font-size:15px}
.viva .ests{display:block;margin:0;overflow:visible}
.viva .est{display:block;padding:0}
.vidro{display:none}
.viva .vidro{display:block;position:absolute;z-index:1;left:760px;top:321px;width:700px;height:510px;border-radius:34px;opacity:0;visibility:hidden;will-change:transform,opacity}
/* o texto fica no meio do cartão, qualquer que seja a altura dele; a esquerda de cada um vem do cena.js */
.viva .est-tx{position:absolute;z-index:2;left:800px;top:586px;translate:0 -50%;width:620px}
.viva .est-tx h3{font-size:30px;max-width:none}
.viva .est-tx .sub{font-size:16px}
.viva .est-tx .ok{max-width:none}
.viva .est-tx .ok li{font-size:15px}
/* lista longa em duas colunas, para caber na tela de 768 de altura sem rolar dentro do cartão */
.viva .est-tx .ok.duas{columns:2;column-gap:28px}
.viva .est-tx .ok.duas li{break-inside:avoid}
.viva .fa{display:none}
.viva .face{position:absolute;z-index:2;left:calc(440px - var(--w) / 2);top:calc(586px - var(--h) / 2);width:var(--w);height:var(--h);aspect-ratio:auto;transform-origin:50% 100%;opacity:0;visibility:hidden;filter:none;pointer-events:none;will-change:transform,opacity}
/* os seis aparelhos com a mesma altura (430, o ALT do cena.js); o celular tem o corpo 3D medido em 236x480, por isso encolhe por escala */
.viva .f0{--w:231.2px;--h:430px;z-index:3}
.viva .f1{--w:211.4px;--h:430px}
.viva .f1 .cel{width:236px;transform:scale(.8958);transform-origin:0 0}
.viva .f2{--w:612.5px;--h:430px}
.viva .f3{--w:675px;--h:430px;padding:10.8px;border-radius:15px}
.viva .f3 .jt{border-radius:6px}
.viva .f3 .jt img{height:100%;aspect-ratio:16/10;object-fit:cover;object-position:0 0}
.esp,.lt,.vu{display:none}
/* will-change:opacity achataria o 3D destes dois: a opacidade deles só liga e desliga */
.viva .f0,.viva .f1{will-change:transform}
.viva .f0,.viva .f1,.viva .f1 .cel,.viva .esp{transform-style:preserve-3d}
.viva .esp{display:block;position:absolute;inset:0;pointer-events:none}
.viva .esp i{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.viva .esp .vu{display:block;background:oklch(0.16 0.03 250);transform:translateZ(.6px);opacity:0}
.viva .f1 .cel:before,.viva .f1 .cel:after{transform:translateZ(-15px)}
.viva .lt.cam,.viva .lt.cam b{border-radius:4px;background:oklch(0.12 0.02 250)}
.viva .lt.cam b{background:linear-gradient(180deg,oklch(0.3 0.02 250),oklch(0.5 0.018 250))}
.viva .lt{display:block;position:absolute;backface-visibility:hidden;background:linear-gradient(180deg,oklch(0.13 0.02 250),oklch(0.26 0.022 250) 42%,oklch(0.2 0.02 250) 86%,oklch(0.09 0.02 250) 88%)}
.viva .lt b{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,oklch(0.46 0.018 250),oklch(0.8 0.012 250) 26%,oklch(0.97 0.005 250) 46%,oklch(0.78 0.014 250) 70%,oklch(0.6 0.016 250) 86%,oklch(0.14 0.02 250) 88%)}
.viva .lt.lado b{background:linear-gradient(90deg,transparent 0,transparent 5.6%,oklch(0.3 0.02 250/.7) 5.7%,oklch(0.3 0.02 250/.7) 6.4%,transparent 6.5%,transparent 93.5%,oklch(0.3 0.02 250/.7) 93.6%,oklch(0.3 0.02 250/.7) 94.3%,transparent 94.4%),linear-gradient(180deg,oklch(0.46 0.018 250),oklch(0.8 0.012 250) 26%,oklch(0.97 0.005 250) 46%,oklch(0.78 0.014 250) 70%,oklch(0.6 0.016 250) 86%,oklch(0.14 0.02 250) 88%)}
.viva .lt.bt{border-radius:4px;background:oklch(0.3 0.02 250)}
.viva .lt.bt b{border-radius:4px;background:linear-gradient(180deg,oklch(0.62 0.016 250),oklch(0.92 0.008 250) 45%,oklch(0.7 0.014 250))}
.viva .f1 .vu{display:block;position:absolute;inset:-2px;border-radius:37px;background:oklch(0.14 0.03 250);transform:translateZ(.6px);opacity:0;pointer-events:none}
.viva .vem{display:block;position:absolute;inset:0;will-change:transform}
.viva .f2 .base{will-change:transform}
.viva .f4{--w:700px;--h:430px;padding:10px}
.viva .la{display:none}
.viva .lb{display:block}
.viva .cartao{left:17.2%}
.viva .contato{display:block;position:absolute;left:140px;top:775px;width:600px;height:52px;border-radius:50%;background:radial-gradient(ellipse 50% 50% at 50% 50%,oklch(0.3 0.04 250/.34),oklch(0.3 0.04 250/.12) 45%,transparent 70%);opacity:0}
.viva .selo{right:-12px;bottom:64px;font-size:13px}

/* 03, a ficha no balcão: a escolhida grande no meio com a luz do balcão embaixo dela; as outras duas, menores, são o seletor.
   Tudo o que decide a compra mora numa faixa só, no balcão. As três maquininhas partem da caixa do meio e a cena.js as põe no lugar */
.s3 .ficha,.s3 .poca{display:none}
html:not(.viva) .s2 .cab .rot{display:none}
.viva .s3{padding:0;background:none;--claro-3:oklch(0.66 0.02 248)}
.viva .s3 .tx{position:absolute;left:96px;top:212px;width:440px;color:var(--tinta)}
.viva .s2 .rot,.viva .s3 .rot{margin-bottom:18px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.viva .s3 h2{max-width:none}
.viva .balcao{display:block;position:absolute;z-index:6;left:-100vw;right:-100vw;top:580px;height:120vh;background:linear-gradient(180deg,oklch(0.31 0.03 249),oklch(0.18 0.022 250) 300px);box-shadow:inset 0 2px 0 oklch(0.872 0.102 215.4),inset 0 24px 30px -22px oklch(0.757 0.145 235.7/.4),0 -1px 26px 2px oklch(0.676 0.181 247.7/.45),0 -34px 50px -28px oklch(0.25 0.03 250/.5);opacity:0;will-change:transform}
.viva .modelos{display:block;margin:0}
.viva .mod{display:block}
/* o botão é só o corpo da maquininha e o desenho sobra dos lados: o mouse na sobra não acende a vizinha */
.viva .mq{position:absolute;z-index:2;left:825px;top:168px;width:270px;height:430px;opacity:0;transform-origin:50% 100%;pointer-events:none;will-change:opacity}
.viva .mq.on{pointer-events:auto}
.viva .mq svg{width:430px;height:430px;max-width:none;margin-left:-80px;overflow:visible;pointer-events:none;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 28px 24px oklch(0.25 0.03 250/.4)) saturate(calc(1 - var(--imp,0) * .2)) brightness(calc(1 - var(--imp,0) * .55));transition:filter .3s}
/* virando a impressora da 04, a escolhida escurece e some por baixo numa máscara que sobe com --imp (cena.js) até logo abaixo da fenda */
.viva .mq.imp svg{transition:none;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--imp) * 88%),transparent calc(100% - var(--imp) * 74%));mask-image:linear-gradient(180deg,#000 calc(100% - var(--imp) * 88%),transparent calc(100% - var(--imp) * 74%))}
.viva .mod:not(.sel) .mq svg{filter:drop-shadow(0 28px 24px oklch(0.25 0.03 250/.4)) saturate(.85) brightness(.97)}
.viva .mod:not(.sel):has(.mq:focus-visible) .mq svg{filter:drop-shadow(0 28px 24px oklch(0.25 0.03 250/.4)) saturate(1) brightness(1.04)}
@media (hover:hover) and (pointer:fine){.viva .mod:not(.sel):has(.mq:hover,.mod-tx:hover) .mq svg{filter:drop-shadow(0 28px 24px oklch(0.25 0.03 250/.4)) saturate(1) brightness(1.04)}}
.viva .s3 .poca{display:block;position:absolute;z-index:7;left:740px;top:572px;width:440px;height:60px;background:radial-gradient(50% 40% at 50% 14%,oklch(0.872 0.102 215.4/.55),transparent 70%);opacity:0;pointer-events:none;will-change:transform,opacity}
/* embaixo de cada lateral, só nome e parcela; a da escolhida some e volta quando ela chega ao lado */
.viva .mod-tx{position:absolute;z-index:8;left:850px;top:598px;width:220px;text-align:center;font-size:14px;line-height:1.45;color:var(--claro-3);cursor:pointer;transition:opacity .35s .45s,visibility 0s .45s}
.viva .mod.sel .mod-tx{opacity:0;visibility:hidden;transition:opacity .12s,visibility 0s .12s}
.viva .mod-tx h3{font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1.45;color:var(--claro-2);transition:color .25s}
.viva .mod:has(.mq:focus-visible) .mod-tx h3{color:var(--claro)}
@media (hover:hover) and (pointer:fine){.viva .mod:has(.mq:hover,.mod-tx:hover) .mod-tx h3{color:var(--claro)}}
.viva .mod-tx .preco{gap:0}
.viva .mod-tx .preco strong{font-size:14px;font-weight:400;letter-spacing:0;line-height:1.45}
.viva .mod-tx .de,.viva .mod-tx .av{display:none}
/* a ficha: nome e preço, os benefícios em duas colunas e a ação ao lado do preço. Só o que muda entre os modelos troca, esmaecendo
   na mesma célula, que guarda a altura do maior e não deixa a faixa pular */
.viva .s3 .ficha{display:grid;position:absolute;z-index:8;left:96px;right:96px;top:676px;grid-template-columns:300px minmax(0,1fr) 300px;column-gap:56px;font-size:15px;line-height:1.45;color:var(--claro);--foco:var(--luz)}
.viva .s3 .vez{display:grid}
.viva .s3 .vez > *{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s,transform .14s,visibility 0s .14s}
.viva .s3[data-ver="0"] .vez > :nth-child(1),
.viva .s3[data-ver="1"] .vez > :nth-child(2),
.viva .s3[data-ver="2"] .vez > :nth-child(3){opacity:1;visibility:visible;transform:none;transition:opacity .3s .12s,transform .5s .12s var(--saida),visibility 0s}
.viva .s3 .ficha h3{font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.viva .s3 .sub{margin-top:2px;color:var(--claro-3)}
.viva .s3 .ficha .de{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;font-weight:500;color:var(--claro-2)}
.viva .s3 .ficha .de s{text-decoration-thickness:1px}
.viva .s3 .ficha .off{padding:2px 7px;border-radius:6px;background:var(--luz);color:var(--fundo);font:600 12px/1.45 Satoshi,sans-serif;letter-spacing:.02em}
.viva .s3 .parc{margin-top:6px;font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.viva .s3 .ficha .av{margin-top:2px;font-weight:500;color:var(--claro-2)}
.viva .s3 .ficha .de,.viva .s3 .parc,.viva .s3 .ficha .av{font-variant-numeric:tabular-nums}
.viva .s3 .f-bens{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-content:start;padding-top:6px;color:var(--claro-2)}
.viva .s3 .f-bens ul{display:grid;row-gap:12px;align-content:start}
.viva .s3 .f-bens .vez{margin-top:12px}
.viva .s3 .f-bens li{display:flex;gap:10px;align-items:flex-start;font-weight:500;line-height:1.35}
.viva .s3 .f-bens svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--luz)}
.viva .s3 .f-acao{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-top:66px}
/* a ação é o .btn.pri da casa (apple.css), com o nome do modelo */
.viva .s3 .pedir{gap:10px}
.viva .s3 .pedir .chev{color:inherit}
.viva .s3 .chev{width:9px;height:9px;flex:none;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.viva .s3 .f-lk{display:inline-flex;align-items:center;gap:9px;padding-left:8px;font-size:16px;font-weight:600;color:var(--claro-2);transition:color .2s}
@media (hover:hover) and (pointer:fine){.viva .s3 .f-lk:hover{color:var(--claro)}}
.viva .s3 .f-lk .chev{width:7px;height:7px;border-width:1.75px 1.75px 0 0}

/* 04: o papel tem a boca da impressora como chão (o recorte de baixo da .boca); o meio dele é o BOCA.x do cena.js e o pé, a fenda */
.viva .s4 .tx{position:absolute;left:704px;top:300px;width:620px}
.viva .s4 h2{max-width:none}
.viva .boca{position:absolute;z-index:7;left:190px;top:190px;width:348px;height:488px;clip-path:inset(-300px -1400px 0 -300px);pointer-events:none}
.fenda{display:none}
.viva .fenda{display:block;position:absolute;left:-10px;right:-10px;bottom:0;height:12px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,oklch(0.06 0.02 250/0),oklch(0.06 0.02 250/.75));opacity:0}
.viva .papel-s{height:100%;transform:translateY(104%);will-change:transform,opacity}
.viva .papel{height:100%;padding-bottom:0}
.viva .p-recebe strong{font-size:52px}

/* 05b, a ponte: a tela do Nexus (o resto da 05 e da ponte mora em pagamentos.css) */
.viva .s5 .tx{position:absolute}
.viva .painel-3d{position:absolute;left:700px;top:232px;width:680px;perspective:1700px;perspective-origin:20% 40%;pointer-events:none}
.viva .painel{opacity:0;visibility:hidden;will-change:transform,opacity}

.dig i{width:1.9cqw;height:1.9cqw;border-radius:50%;background:oklch(0.45 0.12 250);animation:ponto 1.1s infinite ease-in-out}
.dig i:nth-child(2){animation-delay:.15s}
.dig i:nth-child(3){animation-delay:.3s}
@keyframes ponto{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(var(--pula,-1.2cqw));opacity:1}}

.viva .prancha{width:min(100%,98vh)}

/* a chegada: a linha acende e os aparelhos saem dela */
@keyframes sobe{from{opacity:0;transform:translateY(46px)}}
@keyframes acende{from{opacity:0;transform:scaleX(.04)}}
@keyframes emerge{from{opacity:0;transform:translateY(90px)}}
.intro .fio{animation:acende 1.5s var(--saida) .1s both}
.intro .aurora{animation:sobe 2s var(--saida) .5s both}
.intro .grupo{animation:emerge 1.3s var(--saida) .7s both}
/* translate à parte: o transform da .voa é a posição dela, escrita pela cena */
@keyframes emerge-voa{from{opacity:0;translate:0 90px}}
.intro .voa{animation:emerge-voa 1.3s var(--saida) .7s both}
.intro .s1 .rot,.intro .s1 h1 .mk,.intro .s1 .apoio,.intro .s1 .btns,.intro .tira > div,.intro .nota{animation:sobe 1.1s var(--saida) both;animation-delay:calc(.35s + var(--n,0) * .09s)}
.intro .s1 h1 .mk:nth-child(1){--n:1}
.intro .s1 h1 .mk:nth-child(2){--n:2}
.intro .s1 .apoio{--n:5}
.intro .s1 .btns{--n:6}
.intro .tira > div:nth-child(1){--n:8}
.intro .tira > div:nth-child(2){--n:9}
.intro .tira > div:nth-child(3){--n:10}
.intro .tira > div:nth-child(4){--n:11}
.intro .nota{--n:13}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .js [data-rv]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* o app da Gestão de vendas: na cena ele sobe por cima da conversa do link; empilhado, tem o seu celular */
.app{position:absolute;inset:0;z-index:3;background:oklch(0.97 0.005 240);container-type:inline-size}
.app img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.app.sobre{display:none}
.viva .app.sobre{display:block;transform:translateY(104%);will-change:transform}
.realce{position:absolute;left:3%;width:94%;top:var(--t,30%);height:var(--a,10%);border-radius:4cqw;box-shadow:0 0 0 .7cqw oklch(0.62 0.17 250),0 0 6cqw oklch(0.62 0.17 250/.35);opacity:0;transition:top .55s var(--saida),height .55s var(--saida),opacity .3s}
.app[data-passo="1"] .realce{opacity:1;--t:18.5%;--a:8%}
.app[data-passo="2"] .realce{opacity:1;--t:28%;--a:11.5%}
.app[data-passo="3"] .realce{opacity:1;--t:41%;--a:17%}
.app[data-passo="4"] .realce{opacity:1;--t:59%;--a:30%}
.toque{position:absolute;left:79%;top:34.5%;width:14cqw;height:14cqw;margin:-7cqw 0 0 -7cqw;border-radius:50%;background:oklch(0.62 0.17 250/.35);opacity:0;transform:scale(.4)}
.app.toca .toque{animation:toque .5s var(--saida)}
@keyframes toque{30%{opacity:1}to{opacity:0;transform:scale(1.6)}}