@font-face{font-family:"Satoshi";src:url(../paginas/img/satoshi-400-500.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../paginas/img/satoshi-600-900.woff2) format("woff2");font-weight:600 900;font-display:swap}


:root{
  --fundo:oklch(0.135 0.02 255);
  --chumbo:oklch(0.2 0.02 250);
  --chumbo-2:oklch(0.27 0.022 250);
  --noite:oklch(0.1 0.018 252);
  --azul:oklch(0.676 0.181 247.7);
  --chumbo-3:oklch(0.33 0.03 249);
  --luz:oklch(0.872 0.102 215.4);
  --nevoa:oklch(0.965 0.008 240);
  --nevoa-2:oklch(0.925 0.012 240);
  --tinta:oklch(0.22 0.025 250);
  --tinta-2:oklch(0.43 0.03 250);
  --claro:oklch(0.97 0.006 240);
  --claro-2:oklch(0.8 0.02 245);
  --ambar:oklch(0.83 0.13 78);
  --ambar-tinta:oklch(0.45 0.1 70);
  --papel:oklch(0.975 0.012 88);
  --saida:cubic-bezier(.16,1,.3,1);
  --mono:"Geist Mono",ui-monospace,monospace;
  --gut:max(20px,6vw);
  --ciano:oklch(0.872 0.102 215.4);
  --apoio-2:oklch(0.56 0.02 250);
  --linha:oklch(1 0 0/.08);
  --fio:linear-gradient(90deg,oklch(0.872 0.102 215.4) 0%,oklch(0.757 0.145 235.7) 45%,oklch(0.676 0.181 247.7) 100%);
  --foco:var(--luz);
}
*{box-sizing:border-box}
html{background:var(--fundo);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* controles respondem no toque sem esperar o duplo toque e não selecionam o rótulo quando o dedo demora */
a,button{touch-action:manipulation}
button,.btn,[role="tab"]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{margin:0;background:var(--fundo);color:var(--claro);font-family:Satoshi,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

h1,h2{font-weight:800;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(40px,9.6vw,76px)}
h2{font-size:clamp(34px,6.6vw,60px)}
h3{font-size:clamp(22px,3.2vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.rot{font:500 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tbd{display:inline-block;font:500 12px/1.5 var(--mono);letter-spacing:0;padding:0 7px;border-radius:5px;border:1px dashed currentColor;opacity:.78;white-space:nowrap;vertical-align:middle}

.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap;transition:transform .35s var(--saida),box-shadow .35s var(--saida),background-color .25s}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:translateY(1px);transition-duration:.1s}
.btn.pri{background:linear-gradient(180deg,oklch(0.99 0.004 240),oklch(0.9 0.014 240));color:var(--tinta);box-shadow:inset 0 1px 0 oklch(0.99 0.004 230),inset 0 -2px 0 oklch(0.2 0.03 250/.16),0 14px 26px -14px oklch(0.1 0.03 250/.7)}
.btn.fan{box-shadow:inset 0 0 0 1.5px color-mix(in oklch,currentColor 38%,transparent)}
@media (hover:hover) and (pointer:fine){.btn.fan:hover{box-shadow:inset 0 0 0 1.5px currentColor}}
.lk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;box-shadow:inset 0 -2px 0 color-mix(in oklch,currentColor 30%,transparent);transition:box-shadow .3s}
.lk:after{content:"";width:9px;height:9px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);transition:transform .35s var(--saida)}
@media (hover:hover) and (pointer:fine){.lk:hover{box-shadow:inset 0 -2px 0 currentColor}}
@media (hover:hover) and (pointer:fine){.lk:hover:after{transform:translateX(4px) rotate(45deg)}}

.cam,.sec{position:relative;padding:clamp(72px,11vh,128px) var(--gut)}
.ceu,.contato,.balcao,.clarao{display:none}

/* 01 */
.s1{padding-top:clamp(84px,11svh,112px);background:linear-gradient(180deg,var(--fundo) 0%,var(--chumbo) 78%,oklch(0.24 0.03 248) 100%);overflow:hidden;text-align:center}
.s1 .rot{color:var(--luz)}
/* empilhada, a primeira dobra é título com subtítulo, aparelhos, taxas e por fim a ação; os aparelhos ficam com a sobra da altura */
/* o fim desconta a pílula do relógio, que fica presa no canto de baixo */
.dobra{display:grid;grid-template-rows:auto minmax(110px,1fr) auto auto;min-height:calc(100svh - clamp(84px,11svh,112px) - 64px)}
.s1 h1{margin:12px auto 0;max-width:11.5em;font-size:clamp(30px,min(9.6vw,7svh),76px)}
.s1 .apoio{margin:16px auto 0;max-width:26em;text-wrap:balance;font-size:clamp(15px,min(2.3vw,2.4svh),22px);line-height:1.45;color:var(--claro-2)}
.s1 .btns{justify-content:center;margin-top:clamp(16px,2.6svh,28px)}
.s1 .taxas{margin-top:clamp(12px,2.2svh,32px)}
.taxas .rot{width:fit-content;margin-inline:auto;background:linear-gradient(100deg,#7FE6FF 0%,#38BDFF 45%,#009CFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tira{margin:12px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:720px}
/* cada taxa numa caixinha: separa por tom, não por linha */
.tira > div{padding:10px 8px 12px;border-radius:16px;background:oklch(1 0 0/.055)}
.tira dt{font-size:13px;font-weight:500;line-height:1.3;color:var(--claro-2)}
.tira dd{display:flex;justify-content:center;align-items:baseline;gap:.1em;margin-top:4px;font-size:clamp(28px,min(7.6vw,4.4svh),40px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--claro)}
.tira dd small{font-size:.5em;letter-spacing:0;color:var(--claro-2)}
@media (max-width:599px){.tira{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* aviso legal: letra miúda, abaixo do ritmo do texto */
.nota{margin:10px auto 0;max-width:36em;font-size:11.5px;line-height:1.45;color:var(--apoio-2);text-wrap:balance}
.nota small{margin-left:.3em;font-size:.85em;opacity:.82}
.grupo{position:relative;display:flex;align-items:center;justify-content:center;container-type:size;margin-top:clamp(12px,3svh,36px)}
.s1 .sob{display:flex;flex-direction:column;align-items:center}
/* as peças do A2 sobem até 16cqw acima do palco e a maquininha desce até 35cqw: a caixa abraça isso,
   e a largura sai da altura que sobrou (0,515 da largura); a linha de luz fica no piso dos tablets, 28cqw */
.ha-raiz{position:relative;container-type:inline-size;width:min(100%,760px,100cqh / .515)}
.ha-raiz:after{content:"";position:absolute;left:-50vw;right:-50vw;bottom:13.6%;height:2px;background:linear-gradient(90deg,transparent,oklch(1 0 0/.9) 30%,oklch(0.99 0.004 230) 50%,oklch(1 0 0/.9) 70%,transparent);box-shadow:0 0 12px 1px oklch(0.872 0.102 215.4/.8),0 0 60px 8px oklch(0.757 0.145 235.7/.35)}
.ha-palco{position:relative;z-index:1;width:100%;height:35cqw;margin-top:16.5cqw;transform:translateX(calc(var(--ponteiro,0)*-3cqw)) perspective(400px) rotateY(calc(var(--ponteiro,0)*4deg));transition:transform .4s ease-out}
.ha-peca{position:absolute;left:var(--x);top:var(--y);width:var(--largura);height:var(--altura);transform-origin:50% var(--horizonte,50%);transform:translateX(calc(var(--ponteiro,0)*var(--deriva)*-100cqw)) perspective(400px) translateZ(var(--profundidade,0px)) rotateY(var(--giro,0deg));transition:transform .4s ease-out}
.ha-img{display:block;width:100%;height:100%;object-fit:cover}
.ha-corpo{position:absolute;inset:0}
.ha-tablet:before{content:"";position:absolute;inset:0;border-radius:var(--raio);background:linear-gradient(180deg,#3e3e3e,#676767 50%,#3e3e3e);transform:translate(var(--espessura-x),var(--espessura-y))}
.ha-moldura,.ha-tampa{position:absolute;background:#0b0b0b;box-shadow:inset 0 0 0 var(--aro-largura) var(--aro-cor)}
.ha-moldura{inset:0;border-radius:var(--raio)}
.ha-tela{position:absolute;inset:var(--borda);overflow:hidden;border-radius:var(--raio-tela)}
.ha-tampa{top:0;left:9.52%;width:80.93%;height:96.6%;border-radius:var(--raio) var(--raio) 0 0;background:linear-gradient(to top,#1b222b .76cqw,#0b0b0b .76cqw)}
.ha-notebook .ha-tela{border-radius:0 0 var(--raio-tela) var(--raio-tela)}
.ha-barra{position:absolute;top:.81cqw;left:.6cqw;right:.6cqw;height:.67cqw;border-radius:var(--raio-tela) var(--raio-tela) 0 0;background:radial-gradient(circle at .55cqw 50%,#ff5f57 .11cqw,transparent .13cqw),radial-gradient(circle at .95cqw 50%,#febc2e .11cqw,transparent .13cqw),radial-gradient(circle at 1.35cqw 50%,#28c840 .11cqw,transparent .13cqw),linear-gradient(#5a5a5c,#444446)}
.ha-base{position:absolute;left:0;right:0;bottom:0;height:3.4%;border-radius:0 0 8% 8%/0 0 100% 100%;background:linear-gradient(180deg,#c3c9d0 0%,#98a0a8 30%,#5c6268 60%,#1d2023 100%)}
.ha-base:after{content:"";position:absolute;top:0;left:43%;width:14%;height:38%;border-radius:0 0 .4cqw .4cqw;background:linear-gradient(180deg,#4f555c,#7b828a)}
.ha-reflexo{position:absolute;top:100%;left:0;right:0;height:var(--reflexo);overflow:hidden;opacity:.5;filter:blur(.15cqw);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.ha-reflexo .ha-corpo{inset:0 0 auto;height:var(--altura);transform:scaleY(-1)}
.ha-notebook .ha-tampa{background:none;box-shadow:none}
.ha-notebook .ha-tampa:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top,#1b222b .76cqw,#0b0b0b .76cqw);box-shadow:inset 0 0 0 var(--aro-largura) var(--aro-cor);opacity:var(--moldura,1)}
.ha-notebook .ha-barra,.ha-notebook .ha-base,.ha-notebook > .ha-reflexo{opacity:var(--moldura,1)}
.ha-notebook > .ha-corpo .ha-tela{overflow:visible;background:transparent}
.ha-peca[data-id="painel-escuro"] > .ha-reflexo{opacity:.9;filter:blur(.12cqw) brightness(1.5)}

/* 02 */
.s2{padding-top:clamp(250px,34vh,330px);background:linear-gradient(180deg,oklch(0.24 0.03 248) 0,oklch(0.34 0.045 246) 80px,oklch(0.52 0.075 241) 160px,oklch(0.62 0.08 238) 230px,oklch(0.8 0.055 237) 46%,oklch(0.9 0.035 240) 74%,var(--nevoa) 100%);color:var(--tinta);--foco:var(--tinta)}
.s2 .cab h2{max-width:13em}
.abas{display:flex;gap:6px;margin:32px calc(var(--gut) * -1) 0;padding:4px var(--gut);overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas button{flex:none;min-height:46px;padding:0 18px;border:0;border-radius:999px;background:oklch(0.99 0.004 240/.55);color:var(--tinta);font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;transition:background-color .3s,color .3s,box-shadow .3s}
@media (hover:hover) and (pointer:fine){.abas button:hover{background:oklch(0.99 0.004 240/.8)}}
.abas button[aria-selected="true"]{background:var(--tinta);color:var(--claro);box-shadow:inset 0 1px 0 oklch(1 0 0/.18),0 10px 18px -10px oklch(0.2 0.03 250/.7)}
.ests{display:flex;margin:28px calc(var(--gut) * -1) 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ests::-webkit-scrollbar{display:none}
.est{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:0 var(--gut);align-content:start}
.face{position:relative;justify-self:center;align-self:end;filter:drop-shadow(0 26px 22px oklch(0.3 0.04 250/.28))}
.est-tx .rot{color:oklch(0.45 0.14 250)}
.est-tx h3{margin-top:10px;max-width:17em}
.est-tx ul{margin-top:18px;max-width:520px}
.est-tx li{padding:11px 0;box-shadow:inset 0 1px 0 oklch(0.22 0.025 250/.12);color:var(--tinta-2);font-size:16px}
.est-tx li b{display:inline-block;min-width:11.4em;color:var(--tinta);font-weight:700}
.est-tx .lk{margin-top:14px}
.f0{width:min(46vw,190px);aspect-ratio:1094/2035}
.lado{position:absolute;inset:0}
.lb{display:none}
.f0 img{width:100%;height:100%}
.visor{position:absolute;left:0;top:0;width:118px;height:252px;transform-origin:0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:var(--claro);background:radial-gradient(ellipse 90% 60% at 50% 45%,oklch(0.3 0.03 250/.9),oklch(0.14 0.02 250/.2) 80%);visibility:hidden}
.visor.ok{visibility:visible}
.visor small{font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ambar)}
.visor b{font-size:18px;letter-spacing:-.03em}
.visor span{font-size:8.5px;color:var(--claro-2)}
.anima .f0 .visor small{opacity:0;transform:translateY(40%);transition:opacity .3s,transform .5s var(--saida)}
.anima .f0.apr .visor small{opacity:1;transform:none}
.cartao{position:absolute;z-index:4;left:12%;top:.3%;width:60%;aspect-ratio:150/95;border-radius:6.6%/10.4%;background:linear-gradient(135deg,oklch(0.36 0.03 250),oklch(0.2 0.022 250) 55%,oklch(0.15 0.018 250));box-shadow:inset 0 0 0 1px oklch(1 0 0/.16),0 26px 34px -16px oklch(0.2 0.03 250/.6);opacity:0;visibility:hidden;will-change:transform,opacity}
.cartao:before{content:"";position:absolute;left:9%;top:46%;width:14%;height:20%;border-radius:18%;background:linear-gradient(135deg,oklch(0.88 0.08 90),oklch(0.68 0.1 85))}
.f0 .cartao img{position:absolute;left:9%;top:13%;width:auto;height:22%}
.f0 .cartao img + img{left:23%;top:16.5%;height:15%}
.f1,.fa{width:min(50vw,200px)}
.f2{width:min(72vw,480px)}
.tampa{position:relative;padding:5.22% 2.12% 2.68%;border-radius:1.98% 1.98% 0 0 / 2.92% 2.92% 0 0;background:linear-gradient(to top,oklch(0.25 0.018 250) 3.96%,oklch(0.15 0.005 250) 3.96%);box-shadow:inset 0 0 0 1px oklch(0.44 0.03 255);container-type:inline-size}
.tampa:before{content:"";position:absolute;left:2.12%;right:2.12%;top:2.99cqw;height:2.47cqw;border-radius:.5cqw .5cqw 0 0;background:radial-gradient(circle at 2.03cqw 50%,oklch(0.7 0.19 26) .4cqw,transparent .48cqw),radial-gradient(circle at 3.5cqw 50%,oklch(0.84 0.16 84) .4cqw,transparent .48cqw),radial-gradient(circle at 4.97cqw 50%,oklch(0.73 0.21 145) .4cqw,transparent .48cqw),linear-gradient(oklch(0.47 0.004 250),oklch(0.39 0.004 250))}
.tampa > img,.tela > img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:0 0;border-radius:0 0 .5% .5% / 0 0 .8% .8%}
.tela{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:0 0 .5% .5% / 0 0 .8% .8%;container-type:size}
.tela > img{height:100%;border-radius:0}
.base{position:relative;display:block;height:0;padding-top:2.39%;margin:0 -11.8%;border-radius:0 0 8% 8% / 0 0 100% 100%;background:linear-gradient(180deg,oklch(0.83 0.01 250),oklch(0.69 0.013 250) 30%,oklch(0.49 0.01 250) 60%,oklch(0.24 0.006 250))}
.base:before{content:"";position:absolute;left:43%;width:14%;top:0;height:38%;border-radius:0 0 4px 4px;background:linear-gradient(180deg,oklch(0.45 0.012 250),oklch(0.6 0.012 250))}
.janela{width:min(88vw,560px);padding:8px;border-radius:14px;background:linear-gradient(160deg,oklch(0.36 0.02 250),oklch(0.17 0.02 250));box-shadow:inset 0 1px 0 oklch(1 0 0/.25),0 0 0 1px oklch(0.09 0.02 250)}
.jt{position:relative;overflow:hidden;border-radius:7px;container-type:inline-size}
.jt img{width:100%}
.vem{display:none}
/* as telas do sistema ganham vida com recortes da própria imagem, medidos nos pixels dela (--u é um pixel da imagem) */
.f3 .jt{--u:calc(100cqw / 1992);--img:url(../paginas-imersivas/img/tela-conversas-clara.webp)}
.vivo{position:absolute;inset:0}
.loc{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.rec{background:var(--img) calc(var(--sx,var(--x)) * var(--u) * -1) calc(var(--sy,var(--y)) * var(--u) * -1)/100cqw auto no-repeat}
.f3 .tapa{background:rgb(250 250 252)}
.passa{position:absolute;left:calc(var(--u) * 1361);top:calc(var(--u) * 800);translate:-50% 0;padding:calc(var(--u) * 12) calc(var(--u) * 32);border-radius:99px;background:var(--tinta);color:var(--claro);font-weight:700;font-size:calc(var(--u) * 40);line-height:1.2;white-space:nowrap}
.anima .f3 .dig{display:flex;position:absolute;right:calc(var(--u) * 30);top:calc(var(--u) * 632);gap:calc(var(--u) * 12);padding:calc(var(--u) * 26) calc(var(--u) * 30);border-radius:calc(var(--u) * 26);background:oklch(0.995 0.002 240);box-shadow:0 0 0 1px oklch(0.22 0.025 250/.1);--pula:calc(var(--u) * -10)}
.f3 .dig i{width:calc(var(--u) * 15);height:calc(var(--u) * 15)}
.anima .vivo > .m{opacity:0;transform:translateY(calc(var(--u) * 26)) scale(.97);transform-origin:0 100%;transition:opacity .25s,transform .25s}
.anima .vivo > .eu,.anima .vivo > .dig{transform-origin:100% 100%}
.anima .vivo > .on{opacity:1;transform:none;transition:opacity .4s,transform .65s var(--saida)}
.f4 .jt{--u:calc(100cqw / 1740);--img:url(../paginas/img/tela-funil.webp)}
.n{padding-left:calc(var(--u) * 6);background:rgb(254 255 255);color:rgb(118 128 143);font:400 calc(var(--u) * 17)/calc(var(--u) * 26) Inter,system-ui,sans-serif;white-space:nowrap}
.n.bola{padding:0;border-radius:50%;background:rgb(220 222 224);color:rgb(91 96 104);font-weight:600;font-size:calc(var(--u) * 15);line-height:calc(var(--u) * 30);text-align:center}
.anima .vivo > .n{opacity:0;transition:opacity .3s}
.anima .vivo > .n.on{opacity:1}
.leva{will-change:transform}
.leva .rec,.leva b{position:absolute;inset:0;border-radius:calc(var(--u) * 12)}
.leva b{box-shadow:0 calc(var(--u) * 24) calc(var(--u) * 40) calc(var(--u) * -8) oklch(0.2 0.03 250/.5);opacity:0}
.anima .selo{opacity:0;transform:translateY(14px) scale(.9);transform-origin:100% 100%;transition:opacity .3s,transform .6s var(--saida)}
.anima .selo.on{opacity:1;transform:none}

.ed{display:none;position:absolute;inset:0;background:oklch(0.17 0.012 250);font-style:normal}
.anima .ed{display:block}
.ed > i{position:absolute;transition:transform .9s var(--saida)}
.ed-t{left:0;right:0;top:0;height:9cqh;background:oklch(0.22 0.014 250);box-shadow:inset 0 -1px 0 oklch(1 0 0/.08)}
.ed-t:before{content:"";position:absolute;left:2.2cqw;top:50%;width:1.3cqw;height:1.3cqw;margin-top:-.65cqw;border-radius:50%;background:oklch(0.46 0.02 250);box-shadow:2.1cqw 0 0 oklch(0.46 0.02 250),4.2cqw 0 0 oklch(0.46 0.02 250)}
.ed-t b{position:absolute;right:2cqw;top:1.7cqh;height:5.6cqh;padding:0 2.4cqw;border-radius:99px;background:var(--claro);color:var(--tinta);font:700 2.7cqh/5.6cqh Satoshi,sans-serif;transition:transform .18s,background-color .3s}
.ed.toca .ed-t b{transform:scale(.92)}
.ed.ok .ed-t b{background:var(--ambar);color:oklch(0.26 0.06 70)}
.ed-e,.ed-d{top:9cqh;bottom:0;width:17cqw;background:oklch(0.2 0.013 250)}
.ed-e{left:0;box-shadow:inset -1px 0 0 oklch(1 0 0/.08)}
.ed-d{right:0;box-shadow:inset 1px 0 0 oklch(1 0 0/.08)}
.ed-e:before,.ed-d:before{content:"";position:absolute;left:14%;right:22%;top:7%;height:52%;background:repeating-linear-gradient(180deg,oklch(1 0 0/.16) 0 5%,transparent 5% 15%)}
.ed-d:before{right:14%;height:70%;background:repeating-linear-gradient(180deg,oklch(1 0 0/.1) 0 16%,transparent 16% 25%)}
.ed.vai .ed-t{transform:translateY(-110%)}
.ed.vai .ed-e{transform:translateX(-110%)}
.ed.vai .ed-d{transform:translateX(110%)}
.ab{position:absolute;left:20cqw;top:23cqh;width:60cqw;height:60cqh;background:oklch(0.955 0.014 70);box-shadow:0 0 0 1px oklch(1 0 0/.12),0 3cqh 5cqh -2cqh oklch(0 0 0/.6);transform-origin:0 0;transition:transform 1.1s var(--saida)}
.ed.vai .ab{transform:translate(-20cqw,-23cqh) scale(1.6667)}
.ed.vit .ab{transform:translate(-12.7cqw,-15.5cqh) scale(.5)}
.ab > img,.vt{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:0 0}
.vt{opacity:0;transition:opacity .4s}
.ed.vit .vt{opacity:1}
.tit{position:absolute;left:9.4%;top:25.6%;width:41%;height:28.4%;padding:.62cqw 0 0 .94cqw;background:#f4ece5;color:#2E211D;font:500 4.9cqw/.93 "Cormorant Garamond",Georgia,serif;letter-spacing:-.01em;white-space:nowrap;opacity:0}
.tit b,.tit em{display:block;font-weight:500}
.tit em{color:#B0654C}
.ed.nova .tit,.vem .tit{opacity:1}
.ed.cor .tit b,.vem .tit b{color:#7A2E3B}
.vem .tit{padding:1.033cqw 0 0 1.567cqw;font-size:8.167cqw}
.sl{position:absolute;left:9.4%;top:25.6%;width:41%;height:28.4%;opacity:0;box-shadow:inset 0 0 0 .3cqw var(--luz);transition:opacity .2s}
.ed.sel .sl{opacity:1}
.sw{position:absolute;left:50%;top:84%;width:2.2cqw;height:2.2cqw;margin-left:-1.1cqw;border-radius:50%;background:#7A2E3B;box-shadow:-3.6cqw 0 0 #2E211D,3.6cqw 0 0 #B0654C}
.sw:after{content:"";position:absolute;inset:-.7cqw;border-radius:50%;box-shadow:inset 0 0 0 .3cqw var(--claro);opacity:0;transition:opacity .2s}
.ed.cor .sw:after{opacity:1}
.cur{left:0;top:0;width:4.6cqw;height:4.6cqw;background:var(--claro);clip-path:polygon(0 0,0 80%,24% 61%,40% 98%,55% 91%,39% 56%,70% 56%);filter:drop-shadow(0 .3cqw .3cqw oklch(0.1 0.02 250/.8));opacity:0;transition:opacity .25s !important;will-change:transform}
.ed.mao .cur{opacity:1}
.selo{position:absolute;right:-10px;bottom:18%;padding:9px 14px;border-radius:12px 12px 4px 12px;background:var(--tinta);color:var(--claro);font:500 12px var(--mono);box-shadow:0 14px 22px -10px oklch(0.2 0.03 250/.6)}

.cel{position:relative;width:100%;aspect-ratio:236/480;container-type:inline-size}
.cel:before,.cel:after{content:"";position:absolute;top:24%;right:-1.5cqw;width:1.5cqw;height:13cqw;border-radius:0 1cqw 1cqw 0;background:linear-gradient(90deg,oklch(0.5 0.016 250),oklch(0.72 0.012 250))}
.cel:after{top:19%;right:auto;left:-1.5cqw;height:8cqw;border-radius:1cqw 0 0 1cqw;background:linear-gradient(270deg,oklch(0.5 0.016 250),oklch(0.72 0.012 250));box-shadow:0 11cqw 0 oklch(0.6 0.014 250)}
.cel-c{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border:3.2cqw solid oklch(0.17 0.02 250);border-radius:15cqw;background:oklch(0.955 0.01 240);color:var(--tinta);font-size:4.5cqw;line-height:1.32;box-shadow:0 0 0 .45cqw oklch(0.8 0.01 250),0 0 0 1cqw oklch(0.46 0.018 250),inset 0 0 0 .3cqw oklch(0.08 0.02 250/.6)}
.cel-c:before{content:"";position:absolute;z-index:1;left:50%;top:2.6cqw;width:24cqw;height:6.4cqw;margin-left:-12cqw;border-radius:99cqw;background:oklch(0.14 0.02 250)}
.cel-b{display:flex;align-items:center;justify-content:space-between;padding:4cqw 8cqw 1cqw;font-size:4cqw;font-weight:700}
.cel-b i{width:8cqw;height:3.6cqw;border-radius:1.2cqw;background:var(--tinta)}
.cel-cab{display:flex;align-items:center;gap:3cqw;padding:2.4cqw 5cqw 3.4cqw;box-shadow:0 1px 0 oklch(0.22 0.025 250/.1)}
.cel-cab .av{display:grid;place-items:center;width:11cqw;height:11cqw;border-radius:50%;background:oklch(0.5 0.13 20);color:oklch(0.98 0.01 20);font-size:4.6cqw}
.cel-cab strong{display:block;font-size:4.8cqw;line-height:1.15}
.cel-cab span{font-size:3.6cqw;color:var(--tinta-2)}
.cel-chat{flex:1;display:flex;flex-direction:column;gap:2.6cqw;padding:4cqw 4cqw 5cqw}
.bl{align-self:flex-start;max-width:86%;padding:2.8cqw 3.6cqw;border-radius:5cqw 5cqw 5cqw 1.6cqw;background:oklch(0.99 0.004 230);box-shadow:0 1px 1px oklch(0.22 0.025 250/.1)}
.bl.eu{align-self:flex-end;border-radius:5cqw 5cqw 1.6cqw 5cqw;background:oklch(0.9 0.05 235)}
.bl time{display:block;margin-top:.8cqw;font-size:3.2cqw;color:var(--tinta-2);text-align:right}
.cob small{display:block;font:500 3.1cqw var(--mono);letter-spacing:.06em;text-transform:uppercase;color:oklch(0.4 0.12 250)}
.cob b{display:block;font-size:7cqw;letter-spacing:-.03em;line-height:1.15}
.cob span{font-size:3.5cqw;color:var(--tinta-2)}
.pago{align-self:flex-start;padding:2cqw 3.6cqw;border-radius:99cqw;background:var(--ambar);color:oklch(0.26 0.06 70);font-weight:700;font-size:4.2cqw}
.dig{display:none}
.folha{display:none;position:absolute;z-index:2;left:0;right:0;bottom:0;padding:6cqw 6cqw 7cqw;border-radius:8cqw 8cqw 0 0;background:oklch(0.99 0.004 230);box-shadow:0 -6cqw 12cqw -5cqw oklch(0.2 0.03 250/.4);transform:translateY(130%);transition:transform .65s var(--saida)}
.anima .folha{display:block}
.folha.on{transform:none}
.folha small{display:block;font:500 3.1cqw var(--mono);letter-spacing:.06em;text-transform:uppercase;color:oklch(0.4 0.12 250)}
.folha b{display:block;margin-top:1cqw;font-size:12cqw;font-weight:800;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.folha span{font-size:3.6cqw;color:var(--tinta-2)}
.folha i{display:block;margin-top:5cqw;height:12.5cqw;border-radius:99cqw;background:var(--tinta);color:var(--claro);font:700 4.3cqw/12.5cqw Satoshi,sans-serif;text-align:center;transition:transform .15s}
.folha.toca i{transform:scale(.94)}
.anima .dig.cl{display:flex;align-self:flex-start;gap:1.4cqw;padding:3.4cqw 4cqw;margin-bottom:-11.3cqw;border-radius:5cqw 5cqw 5cqw 1.6cqw;background:oklch(0.99 0.004 230)}
.anima .f1 .cel-chat > *{opacity:0;transform:translateY(3cqw) scale(.96);transform-origin:0 100%;transition:opacity .25s,transform .25s}
.anima .f1 .cel-chat > .eu{transform-origin:100% 100%}
.anima .f1 .cel-chat > .on{opacity:1;transform:none;transition:opacity .4s,transform .65s var(--saida)}

/* 03 */
.s3{padding-top:clamp(120px,15vh,150px);background:linear-gradient(180deg,var(--nevoa) calc(100% - 130px),oklch(0.9 0.035 240) calc(100% - 80px),oklch(0.8 0.055 237) calc(100% - 36px),oklch(0.62 0.08 238) 100%);color:var(--tinta);--foco:var(--tinta)}
.s3 .rot{color:var(--tinta-2)}
.s3 h2{margin-top:16px;max-width:9.5em}
.mq{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:16px}
.mq svg{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 24px oklch(0.25 0.03 250/.4));-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.mod-tx h3{font-size:clamp(19px,2.4vw,24px)}
.mod-tx p{margin:8px 0 12px;font-size:16px;line-height:1.4;color:var(--tinta-2);max-width:17em;text-wrap:balance}
.preco{display:grid;justify-items:start;gap:3px;font-variant-numeric:tabular-nums}
.preco .de,.preco .av{font-size:14px;color:color-mix(in oklch,currentColor 72%,transparent)}
.preco .off{margin-left:6px;padding:2px 8px;border-radius:99px;background:var(--ambar);color:oklch(0.26 0.06 70);font:500 11.5px/1.5 var(--mono);white-space:nowrap}
.preco strong{font-size:clamp(21px,2.4vw,24px);font-weight:800;letter-spacing:-.03em;line-height:1.15}

/* 04: o texto e a conta de uma venda num comprovante; a cena (cena.css) só põe o papel na boca da impressora */
.s4{display:grid;gap:44px;background:linear-gradient(180deg,oklch(0.62 0.08 238) 0,oklch(0.42 0.07 244) 44px,var(--chumbo-3) 110px,oklch(0.24 0.024 250) 100%);color:var(--claro);--foco:var(--claro)}
.s4 .rot{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:oklch(0.66 0.02 248)}
.s4 h2{margin-top:16px;max-width:11.5em}
.s4 .apoio{margin-top:20px;max-width:440px;font-size:17px;font-weight:500;line-height:1.45;color:var(--claro-2)}
@media (max-width:599px){.s4 .apoio{font-size:16px}}
.s4 .btns{align-items:center;gap:12px 28px;margin-top:36px}
.s4 .lk{gap:9px;font-size:16px;color:var(--claro-2)}
@media (hover:hover) and (pointer:fine){.s4 .lk:hover{color:var(--claro);text-decoration:none}}
.boca{justify-self:center;width:min(100%,380px)}
.papel-s{filter:drop-shadow(0 30px 30px oklch(0.06 0.02 250/.55))}
/* papel térmico: picote fino em cima, letra de máquina nos rótulos e o valor recebido como o maior número */
.papel{padding:30px 24px 26px;background:linear-gradient(180deg,var(--papel),oklch(0.95 0.016 86));color:var(--tinta);--foco:var(--tinta);font-size:16px;line-height:1.45;-webkit-mask:radial-gradient(circle at 50% 0,#0000 3.2px,#000 3.8px) 0 0/10px 5px repeat-x,linear-gradient(#000 0 0) 0 5px/100% calc(100% - 5px) no-repeat;mask:radial-gradient(circle at 50% 0,#0000 3.2px,#000 3.8px) 0 0/10px 5px repeat-x,linear-gradient(#000 0 0) 0 5px/100% calc(100% - 5px) no-repeat}
.p-m{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.p-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.p-cab + .p-cab{margin-top:6px}
.p-cab b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.p-linhas{margin-top:18px;border-top:1.5px dashed oklch(0.22 0.025 250/.3)}
.p-linhas div{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;font-weight:500;font-variant-numeric:tabular-nums}
.p-linhas div + div{border-top:1px solid oklch(0.22 0.025 250/.1)}
.p-linhas dd{margin:0;font-weight:600;white-space:nowrap}
.p-recebe{padding:18px 0 16px;border-top:1.5px solid var(--tinta)}
.p-recebe strong{display:block;margin-top:4px;font-size:clamp(44px,13vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.p-recebe small{display:block;margin-top:8px;font-size:15px;font-weight:500;color:var(--tinta-2)}
.p-outras{padding-top:14px;border-top:1.5px dashed oklch(0.22 0.025 250/.3)}
.p-outras ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:8px;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.p-outras b{font-weight:700}
.p-fim{margin-top:14px;font-size:12.5px;line-height:1.4;color:var(--tinta-2)}

/* 05 */
.s5{display:grid;gap:44px;background:linear-gradient(180deg,oklch(0.24 0.024 250) 0,var(--chumbo-2) 200px,oklch(0.22 0.02 250) 100%)}
.s5 .rot{color:var(--luz)}
.s5 h2{margin-top:16px;max-width:11em}
.s5 .btns{margin-top:30px}
.s5 .painel{margin:0;box-shadow:inset 0 1px 0 oklch(1 0 0/.3),0 0 0 1px oklch(0.09 0.02 250),36px 60px 70px -34px oklch(0.06 0.02 255/.9)}

/* 06 */
.s6{display:grid;gap:48px;background:linear-gradient(180deg,oklch(0.22 0.02 250) 0,var(--noite) 220px);overflow:hidden}
.s6 .rot{color:var(--luz)}
.s6 h2{margin-top:16px;max-width:9em;line-height:1.02}

/* seções em bloco, da 07 ao fim */
.sec .in{max-width:1240px;margin:0 auto}
.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .9s var(--saida)}
.js [data-rv].on{opacity:1;transform:none}
.prancha{padding:1.5%;border-radius:2.4% / 3.9%;background:linear-gradient(160deg,oklch(0.42 0.02 250),oklch(0.2 0.02 250));box-shadow:inset 0 1px 0 oklch(1 0 0/.3),0 0 0 1px oklch(0.09 0.02 250)}
.prancha img{width:100%;border-radius:1.1% / 1.8%}


@media (min-width:860px){
  .est{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px}
  .est .face{order:2}
  .f0{width:210px}
  .f1,.fa{width:230px}
  .s4,.s5,.s6{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
}
@media (max-width:859px){
  .btns .btn{flex:1 1 auto}
  /* no celular a ação principal vem larga depois das taxas e o teste grátis vira link embaixo */
  .s1 .btns{flex-direction:column;align-items:stretch;gap:4px;width:100%;max-width:420px;margin-inline:auto}
  .s1 .btn.fan{min-height:40px;box-shadow:none}
  .est-tx li b{display:block;min-width:0}
}
