/* 06 Agentes: o texto à esquerda e o celular com a conversa da madrugada à direita. A conversa tem tempo próprio
   (cena.js, gesto agentes); empilhada, ela toca quando o celular entra na tela */
.s6 .rot{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--claro-3,oklch(0.66 0.02 248))}
.s6 h2{margin-top:16px;max-width:11em}
.s6 .apoio{margin-top:20px;max-width:470px;font-size:17px;font-weight:500;line-height:1.45;color:var(--claro-2)}
.s6 .btns{margin-top:36px}
.aparelho{position:relative;justify-self:center;width:min(78vw,300px)}
.aparelho:before{content:"";position:absolute;inset:-60% -90%;background:radial-gradient(ellipse 50% 50% at 50% 50%,oklch(0.9 0.04 235/.2),oklch(0.7 0.06 240/.07) 45%,transparent 70%);pointer-events:none}
@media (max-width:859px){
  .s6 .apoio,.s6 .btn{font-size:16px}
}

/* a conversa: a cliente à esquerda, o agente à direita, o Pix como selo verde e a passagem para a equipe em tinta,
   a mensagem mais marcada, porque é o que só esta seção mostra */
.s6 .cel-cab .av{background:oklch(0.55 0.11 300)}
.s6 .cel-chat{gap:2.2cqw;padding-bottom:4cqw}
.s6 .bl{max-width:84%}
.quem{align-self:flex-end;margin:0 1cqw -1.2cqw 0;font-size:3.1cqw;color:var(--tinta-2)}
.s6 .pago{align-self:flex-end;padding:1.6cqw 3.4cqw;background:oklch(0.93 0.06 152);color:oklch(0.35 0.1 152);font-size:3.8cqw}
.dia{align-self:center;margin:1.6cqw 0 .4cqw;padding:1cqw 3cqw;border-radius:99cqw;background:oklch(0.9 0.008 240);font:500 3.1cqw var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.passou{padding:3.4cqw 4cqw;border-radius:4cqw;background:var(--tinta);color:var(--claro);box-shadow:0 2cqw 5cqw -2cqw oklch(0.2 0.03 250/.5)}
.passou small{display:block;font:500 3cqw var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--luz)}
.passou b{display:block;margin-top:1cqw;font-size:4.3cqw}
.passou p{margin-top:1.2cqw;font-size:3.8cqw;line-height:1.35;color:var(--claro-2)}
/* a noite dentro do celular, que some quando o relógio chega à manhã, e a luz que nasce no lugar dela */
.madruga,.amanhece{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}
.madruga{background:oklch(0.16 0.05 262/.26)}
.amanhece{background:radial-gradient(130% 55% at 50% 0,oklch(0.96 0.06 85/.42),oklch(0.95 0.04 80/.12) 55%,transparent 80%)}
.anima .madruga,.anima .amanhece{will-change:opacity}

/* cada fala entra no seu tempo; os pontinhos ficam no lugar da resposta que vem */
.anima .s6 .dig{display:flex;align-self:flex-end;gap:1.4cqw;margin-bottom:-10.9cqw;padding:3.4cqw 4cqw;border-radius:5cqw 5cqw 1.6cqw 5cqw;background:oklch(0.9 0.05 235)}
.anima .s6 .cel-chat > *{opacity:0;transform:translateY(3cqw) scale(.96);transform-origin:0 100%;transition:opacity .25s,transform .25s}
.anima .s6 .cel-chat > :is(.eu,.dig,.quem,.pago){transform-origin:100% 100%}
.anima .s6 .cel-chat > .on{opacity:1;transform:none;transition:opacity .4s,transform .65s var(--saida)}

/* na cena: o celular é o maior elemento, à direita; o texto à esquerda, na altura do meio dele */
.viva .s6 .tx{position:absolute;left:100px;top:292px;width:540px}
.viva .s6 h2{max-width:none}
.viva .aparelho{position:absolute;left:900px;top:104px;width:340px;transform-origin:50% 50%;opacity:0;visibility:hidden;will-change:transform,opacity}
.viva .aparelho:before{display:none}
.viva .clarao{display:block;position:absolute;left:520px;top:-120px;width:1100px;height:1140px;background:radial-gradient(ellipse 50% 50% at 50% 50%,oklch(0.9 0.04 235/.2),oklch(0.75 0.07 240/.08) 38%,transparent 68%);opacity:0}
.viva .clarao:after{content:"";position:absolute;left:230px;top:905px;width:640px;height:130px;border-radius:50%;background:radial-gradient(ellipse 50% 50% at 50% 50%,oklch(0.92 0.03 235/.2),transparent 70%)}