/* 05 Pagamentos (app e portal, desenhados em HTML) e 05b, a ponte para o Nexus. A cena (cena.js) escreve transform e opacity;
   empilhada, cada uma vira um bloco comum e o gesto dela dispara quando entra na tela */
.pg,.s5{--marca:oklch(0.64 0.19 245);--marca-suave:oklch(0.94 0.035 240);--verde:oklch(0.5 0.13 152);--tinta-3:oklch(0.58 0.02 250);--claro-3:oklch(0.66 0.02 248)}

/* texto dos dois capítulos: rótulo de máquina, título 48, apoio de uma frase, botão claro e link com seta */
.pg .rot,.s5 .rot{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--claro-3)}
.s5 .rot em{font-style:normal;color:var(--luz)}
.pg h2,.s5 .tx h2{margin-top:16px;max-width:11em}
.pg .apoio,.s5 .apoio{margin-top:20px;max-width:440px;font-size:17px;font-weight:500;line-height:1.45;color:var(--claro-2)}
.pg .btns,.s5 .btns{align-items:center;gap:12px 28px;margin-top:36px}
.pg .lk,.s5 .lk{gap:9px;font-size:16px;color:var(--claro-2)}
@media (hover:hover) and (pointer:fine){
  .pg .lk:hover,.s5 .lk:hover{color:var(--claro);text-decoration:none}
}
.frase h2{font-size:clamp(40px,6vw,64px);line-height:1.06;letter-spacing:-.03em;max-width:none}
.frase h2 > span{display:block}
.frase h2 > span + span{color:var(--claro-3)}

/* os aparelhos num palco de 800x640: o portal no notebook atrás, o app no celular na frente, à direita */
.pg-palco{position:relative;aspect-ratio:800/640;perspective:2000px}
.pg-nb{position:absolute;left:0;top:9.375%;width:80%;transform:rotateY(14deg) rotateX(4deg);transform-origin:100% 50%;filter:drop-shadow(0 40px 40px oklch(0.04 0.02 250/.6))}
.pg-cel{position:absolute;left:73.75%;top:15%;width:32.75%}
.pg-poca{position:absolute;left:-7%;top:85%;width:95%;height:19%;border-radius:50%;background:radial-gradient(closest-side,oklch(0.85 0.06 232/.22),oklch(0.7 0.08 238/.07) 60%,transparent);pointer-events:none}
.pg-poca.p2{left:57%;top:77%;width:45%;height:14%}

/* o portal de pagamentos, em unidades da largura da tela */
.pg-portal{display:flex;background:oklch(0.975 0.004 250);color:oklch(0.25 0.02 255);font-size:1.7cqw;line-height:1.3;text-align:left;letter-spacing:0}
.pt-lado{width:17cqw;flex:none;display:flex;flex-direction:column;gap:.4cqw;padding:2cqw 1.2cqw;background:oklch(0.995 0.002 250);box-shadow:1px 0 0 oklch(0.9 0.006 250)}
.pt-lado b{display:flex;align-items:center;gap:.8cqw;margin-bottom:1.6cqw;padding-left:.6cqw;font-size:2cqw;font-weight:700}
.pt-lado b img{width:2.2cqw}
.pt-lado i{padding:.8cqw 1cqw;border-radius:1cqw;font-style:normal;font-size:1.55cqw;color:var(--tinta-2)}
.pt-lado i.on{background:var(--marca-suave);color:oklch(0.45 0.17 250);font-weight:700}
.pt-miolo{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:1.8cqw;padding:2.2cqw 2.4cqw}
.pt-cab{display:flex;justify-content:space-between;align-items:baseline}
.pt-cab b{font-size:2.6cqw;font-weight:700;letter-spacing:-.02em}
.pt-cab span{font-size:1.5cqw;color:var(--tinta-3)}
.pt-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4cqw}
.pt-t,.pt-graf{border-radius:1.4cqw;background:oklch(0.995 0.002 250);box-shadow:0 1px 2px oklch(0.3 0.02 250/.1),inset 0 0 0 1px oklch(0.92 0.006 250)}
.pt-t{padding:1.4cqw 1.6cqw;transition:box-shadow .5s var(--saida)}
.pt-t small{display:block;font-size:1.45cqw;color:var(--tinta-2)}
.pt-t b{display:block;margin-top:.5cqw;font-size:2.5cqw;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-t span{display:block;margin-top:.3cqw;font-size:1.3cqw;font-weight:600;color:oklch(0.55 0.2 255)}
.pt-t.on{box-shadow:0 0 0 .35cqw var(--marca),0 0 3cqw oklch(0.64 0.19 245/.35)}
.pt-graf{flex:1;min-height:0;display:flex;flex-direction:column;padding:1.4cqw 1.6cqw}
.pt-graf p{font-size:1.6cqw;font-weight:700}
.pt-graf p span{font-weight:500;color:var(--tinta-3)}
.pt-area{position:relative;flex:1;min-height:0;margin:1cqw 0 5cqw}
.pt-area svg{position:absolute;inset:0;width:100%;height:100%}
.pt-area .ar{fill:oklch(0.64 0.19 245/.16)}
.pt-area .ln{fill:none;stroke:var(--marca);stroke-width:2;vector-effect:non-scaling-stroke}
.pt-ponto{position:absolute;left:95%;top:11.1%;width:1.4cqw;height:1.4cqw;margin:-.7cqw;border-radius:50%;background:var(--marca);box-shadow:0 0 0 .5cqw oklch(0.64 0.19 245/.25)}
.pt-aviso{position:absolute;left:24cqw;bottom:3cqw;display:flex;align-items:center;gap:1cqw;padding:1.2cqw 1.8cqw;border-radius:1.4cqw;background:oklch(0.995 0.002 250);box-shadow:0 1.4cqw 3.4cqw -1.4cqw oklch(0.2 0.03 250/.45),inset 0 0 0 1px oklch(0.9 0.006 250);font-size:1.6cqw;white-space:nowrap;color:var(--tinta-2)}
.pt-aviso i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--verde)}
.pt-aviso b{font-weight:700;color:var(--tinta)}
.pt-aviso em{font-style:normal}

/* o app de pagamentos no celular, em unidades da largura do celular */
.pg-cel .cel-b{position:relative;z-index:2;color:oklch(0.99 0 0)}
.pg-cel .cel-b i{background:currentColor}
.pg-app{flex:1;display:flex;flex-direction:column;min-height:0;margin-top:-14.4cqw;background:oklch(0.965 0.006 250);letter-spacing:0}
.pa-topo{padding:15cqw 5cqw 4cqw;background:oklch(0.58 0.2 255);color:oklch(0.99 0 0)}
.pa-topo .t{text-align:center;font-size:5cqw;font-weight:700}
.pa-topo .emp{display:flex;justify-content:space-between;margin-top:4cqw;font-size:3.7cqw;font-weight:600;letter-spacing:.02em;opacity:.92}
.pa-corpo{flex:1;display:flex;flex-direction:column;gap:3cqw;min-height:0;padding:4cqw 4.5cqw 0}
.pa-saldo small,.pa-bloco small{display:block;font-size:3.5cqw;color:var(--tinta-2)}
.pa-saldo b{font-size:7.4cqw;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pa-bloco{padding:3.4cqw 4cqw;border-radius:3.5cqw;background:oklch(0.995 0.002 250);box-shadow:0 1px 2px oklch(0.3 0.02 250/.1)}
.pa-bloco .lin{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.4cqw}
.pa-bloco .lin b{font-size:5.2cqw;font-weight:700;font-variant-numeric:tabular-nums}
.pa-bloco .lin span{font-size:3.7cqw;font-weight:700;color:oklch(0.55 0.2 255)}
.pa-mais{display:inline-flex;margin-top:2cqw;padding:1cqw 2.6cqw;border-radius:99cqw;background:var(--marca-suave);color:oklch(0.45 0.17 250);font-size:3.4cqw;font-weight:700;box-shadow:0 0 0 .5cqw oklch(0.64 0.19 245/.35);transform-origin:0 50%}
.pa-dois{display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw}
.pa-dois .pa-bloco{padding:3cqw}
.pa-dois b{display:block;margin-top:1cqw;font-size:4.3cqw;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pa-dois .up{font-size:3.3cqw;font-weight:700;color:var(--verde)}
.pa-vendas{flex:1;display:flex;flex-direction:column;min-height:0}
.pa-vendas h5{margin:0 0 1.6cqw;font-size:4.2cqw;font-weight:700}
.pa-lista{flex:1;min-height:0;overflow:hidden}
.pa-venda{position:relative;display:grid;grid-template-columns:1fr auto;align-content:center;height:15cqw;padding:0 3cqw;font-size:3.6cqw;line-height:1.3}
.pa-venda + .pa-venda{box-shadow:inset 0 1px 0 oklch(0.9 0.006 250)}
.pa-venda b,.pa-venda .v{font-weight:700;font-size:3.9cqw}
.pa-venda .v,.pa-venda .ok{text-align:right}
.pa-venda .v{font-variant-numeric:tabular-nums}
.pa-venda .s{color:var(--tinta-3)}
.pa-venda .ok{font-weight:600;color:var(--verde)}
.pa-venda.nova{border-radius:3cqw;background:var(--marca-suave);box-shadow:inset 0 0 0 .5cqw oklch(0.64 0.19 245/.45)}
.pa-venda.nova + .pa-venda{box-shadow:none}
/* o brilho de quem acabou de chegar: acende e assenta */
.pa-venda i{position:absolute;inset:0;border-radius:3cqw;background:oklch(0.64 0.19 245/.22);box-shadow:0 0 0 .6cqw oklch(0.64 0.19 245/.7),0 0 6cqw oklch(0.64 0.19 245/.45);opacity:0;pointer-events:none}
.pa-abas{display:flex;justify-content:space-around;padding:2.6cqw 0 4.4cqw;background:oklch(0.995 0.002 250);box-shadow:0 -1px 0 oklch(0.9 0.006 250);font-size:3.2cqw;color:var(--tinta-3)}
.pa-abas span:first-child{font-weight:700;color:oklch(0.55 0.2 255)}

/* os números do dia que sobem dentro da tela do Nexus, no lugar deles na foto (1100x661) */
.nx-tela{position:relative;container-type:inline-size}
.nx-n{position:absolute;left:calc(var(--x) / 1100 * 100%);top:calc(var(--y) / 661 * 100%);translate:-50% -50%;padding:.2em .5em;border-radius:.35em;background:oklch(0.17 0.006 250);box-shadow:0 0 0 1.5px var(--marca),0 0 18px oklch(0.64 0.19 245/.5);font:700 1.9cqw/1.2 Satoshi,sans-serif;white-space:nowrap;color:var(--claro);font-variant-numeric:tabular-nums;opacity:0;pointer-events:none}
.nx-luz,.nx-poca{display:none}

/* empilhada: blocos comuns. A 05 tem os aparelhos à esquerda e o texto à direita; a ponte é a frase e o bloco do Nexus */
.pg{display:grid;gap:44px;background:var(--chumbo)}
.s5{background:var(--noite)}
.s5 .frase{grid-column:1/-1;padding-bottom:clamp(24px,6vw,72px);text-align:center}
html:not(.viva) .pg-palco{width:min(100%,640px);justify-self:center}
@media (min-width:860px){
  .pg{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
  html:not(.viva) .pg-palco{width:calc(100% / 1.065);justify-self:start}
}
@media (max-width:859px){
  .pg .tx{order:-1}
  .s5 .frase h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.02em}
  .pg .apoio,.s5 .apoio{font-size:16px}
  .pg .btn,.s5 .btn{font-size:16px}
}
/* no celular o celular vem na frente e maior; o notebook fica atrás, à esquerda */
@media (max-width:599px){
  html:not(.viva) .pg-palco{aspect-ratio:1/.9}
  html:not(.viva) .pg-nb{top:8%;width:86%}
  html:not(.viva) .pg-cel{left:54%;top:12%;width:46%}
  html:not(.viva) .pg-poca{top:80%;height:20%}
  html:not(.viva) .pg-poca.p2{left:50%;top:84%;width:50%}
}

/* na cena: o palco preso de 1440x900 */
.viva .pg-palco{position:absolute;left:56px;top:150px;width:800px;height:640px;aspect-ratio:auto;transform-origin:0 100%;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
.viva .pg .tx{position:absolute;left:950px;top:300px;width:420px}
.viva .pg h2{font-size:48px;max-width:none}
.viva .pa-linhas,.viva .pa-venda,.viva .pa-venda i,.viva .pa-mais,.viva .pt-aviso,.viva .nx-n{will-change:transform,opacity}
.viva .s5 .frase{position:absolute;left:0;right:0;top:300px}
.viva .s5 .frase h2{margin-top:26px;font-size:64px}
.viva .s5 .tx{left:100px;top:250px;width:600px}
.viva .boca.voa{clip-path:none}
.viva .s5 .tx h2{max-width:none}
/* a borda de cima da tela do Nexus acende antes de ela subir */
.viva .nx-luz{display:block;position:absolute;left:220px;right:220px;top:640px;height:260px;background:radial-gradient(ellipse 50% 60% at 50% 100%,oklch(0.75 0.08 235/.3),oklch(0.7 0.08 238/.08) 55%,transparent 75%);opacity:0;pointer-events:none}
/* a poça de luz no chão, embaixo da tela assentada, como a dos outros aparelhos */
.viva .nx-poca{display:block;position:absolute;left:675px;top:650px;width:760px;height:90px;border-radius:50%;background:radial-gradient(closest-side,oklch(0.85 0.06 232/.5),oklch(0.7 0.08 238/.16) 60%,transparent);opacity:0;pointer-events:none;will-change:transform,opacity}
/* o céu da 05: o caixa fechando, com uma luz baixa onde estão os aparelhos */
.ceu .l4{background:radial-gradient(32% 40% at 34% 58%,oklch(0.9 0.04 232/.1),oklch(0.75 0.06 238/.035) 60%,transparent),linear-gradient(180deg,oklch(0.24 0.035 248) 0,oklch(0.18 0.026 250) 40%,oklch(0.13 0.02 252) 78%,oklch(0.11 0.018 252) 100%)}