/* O portal (/pagar): a Estela desenhada atrás do balcão (o cartão do formulário),
   numa lojinha em traço cinza. Ela é um SVG em partes (_estela_desenho.html) e o
   estado em #portal[data-estado] diz o que cada parte faz: parada (respira e pisca),
   olhando (segue o que se digita), tapando (mãos nos olhos durante o código),
   pensando (mão no queixo), feliz (o selo verde de visto) e triste (código errado).
   Com "reduzir movimento", as poses mudam sem animação (regra no fim do cliente.css). */
:root{--cena:#f5f7fb;--chao:#e7ebf2;--traco:#ccd4e0;--bolha:#e2eafa;
  --pele:#f2b48e;--pele-sombra:#dc9670;--cabelo:#1c2340;--blazer:#2a48a6;--lapela:#1f388a;--camisa:#f7f8fc;--ouro:#f4b73f;--boca:#9c2d47}
@media (prefers-color-scheme:dark){:root{--cena:#0a1130;--chao:#0e1736;--traco:rgb(160 182 230/.17);--bolha:#273a7c}}

/* A página clara, com a lojinha atrás de tudo. */
body.portal{justify-content:flex-start;gap:0;padding:26px 16px 36px;background:var(--cena)}
body.portal::before{display:none}
.cenario{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.cenario .chao{fill:var(--chao)}
.cenario .traco{fill:none;stroke:var(--traco);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cenario .sombra{fill:var(--traco);stroke:none;opacity:.5}
.cenario .ponteiro{stroke-width:4.5;transform-origin:800px 210px}
.portal-coluna{--s:1;--x:4px;position:relative;width:100%;max-width:470px;margin:auto 0;display:flex;flex-direction:column}
.marca{align-self:center;width:148px;aspect-ratio:10/3;margin-bottom:6px;background:var(--marca);
  -webkit-mask:url(/LogoCertech.svg) center/100% auto no-repeat;mask:url(/LogoCertech.svg) center/100% auto no-repeat;animation:surgir .6s var(--mola) both}
@media (prefers-color-scheme:dark){.marca{background:#fff}}
.portal .rodape{align-self:center;margin-top:18px;color:var(--tinta-2)}

/* O palco: a Estela sai de trás do balcão e o balão fica à direita dela. */
.palco-estela{position:relative;height:calc(214px * var(--s))}
/* Um círculo claro atrás dela, como nas ilustrações: separa a Estela do fundo. */
.palco-estela::before{content:"";position:absolute;left:calc(var(--x) + 28px * var(--s));top:calc(6px * var(--s));width:calc(204px * var(--s));aspect-ratio:1;
  border-radius:50%;background:var(--bolha);animation:surgir .6s ease .1s both}
.desenho{position:absolute;left:var(--x);bottom:calc(-60px * var(--s));width:calc(260px * var(--s));height:calc(300px * var(--s));overflow:visible;
  animation:espiar .9s var(--mola) .15s both}
/* O balão fica preso embaixo, na altura do ombro dela, e cresce para cima: fala longa não
   cobre o cartão nem empurra o formulário. O bico aponta sempre para a boca. */
.balao{position:absolute;left:calc(var(--x) + 198px * var(--s));right:0;bottom:calc(40px * var(--s));padding:12px 14px 13px;border-radius:18px;
  background:var(--papel);box-shadow:0 16px 34px -20px rgb(20 40 90/.5),0 0 0 1px var(--linha);transition:box-shadow .3s;animation:falar .5s var(--mola) .75s both}
.balao::before{content:"";position:absolute;left:-7px;bottom:calc(55px * var(--s) - 7px);width:14px;height:14px;background:inherit;border:solid var(--linha);border-width:0 0 1px 1px;transform:rotate(45deg)}
.balao.nova{animation:falar .38s var(--mola) both}
.balao[data-tom=ok]{box-shadow:0 16px 34px -20px rgb(20 40 90/.5),0 0 0 1.5px color-mix(in srgb,var(--ok) 60%,transparent)}
.balao[data-tom=aviso]{box-shadow:0 16px 34px -20px rgb(20 40 90/.5),0 0 0 1.5px color-mix(in srgb,var(--atencao) 60%,transparent)}
.balao-quem{display:block;color:var(--espera);font-size:12.5px;font-weight:600}
.balao-quem small{color:var(--tinta-2);font-size:12.5px;font-weight:400}
.balao-quem small::before{content:"· "}
.balao p{margin:2px 0 0;color:var(--tinta);font-size:14.5px;line-height:1.42}

/* O balcão: o cartão do formulário, com os dedos da Estela na borda de cima. */
.balcao{position:relative;z-index:1;border-radius:26px;background:var(--papel);box-shadow:0 34px 70px -36px rgb(20 40 90/.5),0 0 0 1px var(--linha);
  animation:subir-balcao .7s var(--mola) .05s both}
.balcao .conteudo{padding:30px 30px 28px}
.dedos{position:absolute;z-index:2;left:var(--x);top:calc(-12px * var(--s));width:calc(260px * var(--s));height:calc(24px * var(--s));overflow:visible;
  animation:surgir .3s ease .85s both}
.dedos rect{fill:var(--pele);stroke:var(--pele-sombra);stroke-width:1}
.dedos g{transition:transform .35s var(--mola),opacity .2s}
#portal:is([data-estado=tapando],[data-estado=feliz]) .dedos g,#portal[data-estado=pensando] .dedos .mao-dir{opacity:0;transform:translateY(-10px)}

/* A Estela: cores chapadas, como uma ilustração. */
.desenho .cabelo{fill:var(--cabelo)}
.desenho .cabelo-brilho{fill:#2f3b78}
.desenho .pele{fill:var(--pele)}
.desenho .pele-sombra{fill:var(--pele-sombra)}
.desenho .blazer{fill:var(--blazer)}
.desenho .lapela{fill:var(--lapela)}
.desenho .camisa{fill:var(--camisa)}
.desenho .ouro{fill:var(--ouro)}
.desenho .bochecha{fill:#f0837a;opacity:.4;transition:opacity .3s}
.desenho .nariz{fill:none;stroke:var(--pele-sombra);stroke-width:2.6;stroke-linecap:round}
.desenho .cilio{fill:none;stroke:var(--cabelo);stroke-width:2.4;stroke-linecap:round}
.desenho .pupilas{fill:var(--cabelo)}
.desenho .brilho{fill:#fff}
.desenho .sobrancelha{fill:none;stroke:var(--cabelo);stroke-width:3.6;stroke-linecap:round}
.desenho .boca--sorriso,.desenho .boca--triste{fill:none;stroke:var(--boca);stroke-width:3.2;stroke-linecap:round}
.desenho .boca--aberta>path:first-child,.desenho .boca--o{fill:var(--boca)}
.desenho .dentes{fill:#fff}
.desenho .dobra{fill:none;stroke:var(--pele-sombra);stroke-width:1.6;stroke-linecap:round}
.desenho .selo{fill:#12a46b;stroke:#fff;stroke-width:4}
.desenho .selo-visto{fill:none;stroke:#fff;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
/* As mãos têm contorno: sem ele, sobre o rosto, elas somem na pele. */
.desenho .braco .pele{stroke:var(--pele-sombra);stroke-width:2}

/* As partes que mexem. Medidas em unidades do desenho. */
.desenho .cabeca{transform-origin:130px 172px;transition:transform .45s var(--mola)}
.desenho .olhos{transform-box:fill-box;transform-origin:center;transition:transform .07s}
.desenho .pupilas{transform:translate(calc(var(--ox,0) * 1px),calc(var(--oy,0) * 1px));transition:transform .2s ease-out}
.desenho .sobrancelha{transform-box:fill-box;transition:transform .3s var(--mola)}
.desenho .sobrancelha--esq{transform-origin:0 50%}
.desenho .sobrancelha--dir{transform-origin:100% 50%}
.desenho .boca{opacity:0;transition:opacity .1s}
.desenho .boca--sorriso{opacity:1}
.desenho .braco{transform:translateY(178px);transition:transform .55s var(--mola)}

#portal[data-estado=parada] .cabeca{animation:balanco 6s ease-in-out infinite}
#portal[data-estado=olhando] .cabeca{transform:rotate(var(--inclina,0deg))}
#portal.piscando .olhos{transform:scaleY(.1)}
#portal.sorrindo .boca--sorriso,#portal:is([data-estado=tapando],[data-estado=feliz]) .boca--sorriso{opacity:0}
#portal.sorrindo .boca--aberta,#portal:is([data-estado=tapando],[data-estado=feliz]) .boca--aberta{opacity:1}
/* Tapando: as duas mãos sobem até os olhos. */
#portal[data-estado=tapando] .maos-olhos{transform:none}
/* Pensando: a mão no queixo, o olhar para cima e uma sobrancelha erguida. */
#portal[data-estado=pensando] .mao-queixo{transform:none}
#portal[data-estado=pensando] .boca--sorriso{opacity:0}
#portal[data-estado=pensando] .boca--o{opacity:1}
#portal[data-estado=pensando] .pupilas{transform:translate(-3px,-4px)}
#portal[data-estado=pensando] .sobrancelha--dir{transform:translateY(-3px) rotate(-8deg)}
/* Feliz: mostra o selo verde de visto, dá um pulinho e as bochechas coram. */
#portal[data-estado=feliz] .selo-certo{transform:none}
#portal[data-estado=feliz] .sobrancelha{transform:translateY(-3px)}
#portal[data-estado=feliz] .bochecha{opacity:.75}
#portal[data-estado=feliz] .desenho{animation:pular .7s var(--mola)}
/* Triste: sobrancelhas de preocupação, boca para baixo e um "não" com a cabeça. */
#portal[data-estado=triste] .boca--sorriso{opacity:0}
#portal[data-estado=triste] .boca--triste{opacity:1}
#portal[data-estado=triste] .sobrancelha--esq{transform:rotate(12deg)}
#portal[data-estado=triste] .sobrancelha--dir{transform:rotate(-12deg)}
#portal[data-estado=triste] .pupilas{transform:translate(0,2.5px)}
#portal[data-estado=triste] .cabeca{animation:negar .65s ease-in-out}
/* Falando: a boca abre e fecha enquanto a fala nova aparece. */
#portal.falando:not([data-estado=triste]) .boca--sorriso{opacity:0}
#portal.falando:not([data-estado=triste]) .boca--o{animation:mexer-boca .26s steps(1) infinite}
#portal.falando:not([data-estado=triste]) .boca--aberta{animation:mexer-boca .26s steps(1) -.13s infinite}

/* As estrelinhas douradas (as dos brincos dela) do código certo. */
.faisca{position:fixed;z-index:50;width:var(--t);height:var(--t);margin:calc(var(--t) / -2) 0 0 calc(var(--t) / -2);pointer-events:none;background:var(--c);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* O código: seis casas sobre um campo só (o portal.js lê a conta pelo HTML). Cada número entra girando e para no lugar. */
/* O código fica no centro do cartão: rótulo, casas, tempo e as saídas, embaixo do botão largo. */
#formCodigo .campo{justify-items:center;text-align:center}
.digitos{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;width:min(100%,372px);margin-top:2px;--h:66px}
.digitos input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:transparent;
  caret-color:transparent;font-size:16px;outline:none;cursor:text;-webkit-text-fill-color:transparent}
.digitos input::selection{background:transparent}
.digito{position:relative;height:var(--h);border-radius:16px;border:1.5px solid var(--linha);background:var(--faixa);
  transition:border-color .2s,box-shadow .2s,background .3s}
.digito::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--tinta-2);opacity:.35;
  transition:opacity .2s,transform .3s var(--mola)}
.digito.cheio::before,.digito.ativo::before{opacity:0;transform:scale(0)}
.digito.ativo{border-color:var(--marca-300);box-shadow:0 0 0 4px rgb(52 120 255/.16)}
.digito.ativo::after{content:"";position:absolute;left:50%;top:28%;bottom:28%;width:2px;margin-left:-1px;border-radius:2px;background:var(--espera);animation:piscar 1s steps(1) infinite}
.janela{position:absolute;inset:0;overflow:hidden;border-radius:inherit;
  -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.rolo{display:flex;flex-direction:column;opacity:0;transform:translateY(calc(var(--i,0) * -1 * var(--h)));transition:transform .8s cubic-bezier(.2,1.2,.35,1),opacity .15s}
.digito.cheio .rolo{opacity:1}
.rolo i{display:block;flex:none;height:var(--h);line-height:var(--h);text-align:center;font-style:normal;font-size:32px;font-weight:600;color:var(--tinta);
  font-variant-numeric:tabular-nums}
.digitos.certo .digito{border-color:var(--ok);background:var(--ok-fundo);animation:saltar .55s var(--mola) both}
.digitos.certo .digito:nth-of-type(2){animation-delay:.07s}
.digitos.certo .digito:nth-of-type(3){animation-delay:.14s}
.digitos.certo .digito:nth-of-type(4){animation-delay:.21s}
.digitos.certo .digito:nth-of-type(5){animation-delay:.28s}
.digitos.certo .digito:nth-of-type(6){animation-delay:.35s}
.digitos.certo .rolo i{color:var(--ok)}
.digitos.errado .digito{border-color:var(--erro);background:var(--erro-fundo)}
.digitos.tremer{animation:tremer .45s cubic-bezier(.36,.07,.19,.97)}
.digitos.travado .digito{opacity:.45}
.digitos input:disabled{cursor:not-allowed}
/* Quanto falta para o código vencer: uma linha que encolhe e o tempo ao lado. */
.validade{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font-size:13px;font-variant-numeric:tabular-nums}
.tempo{position:relative;width:120px;height:4px;flex:none;border-radius:4px;background:var(--linha);overflow:hidden}
.tempo i{position:absolute;inset:0;border-radius:inherit;background:var(--espera);transform-origin:left;transform:scaleX(var(--resta,1));transition:transform 1s linear}
.botao[hidden],.ligacao[hidden]{display:none}
#formCodigo.travado .tempo{display:none}
.saidas{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-top:8px}
.saidas .ligacao{margin:0}

/* Cada passo entra deslizando; o balcão treme quando algo não passa. */
.conteudo section:not([hidden]){animation:entrar .45s var(--mola) both}
.balcao.tremer{animation:tremer .45s cubic-bezier(.36,.07,.19,.97)}

@keyframes espiar{from{transform:translateY(90px)}}
/* O balcão já entra opaco: é ele que esconde a Estela subindo. */
@keyframes subir-balcao{from{transform:translateY(18px)}}
@keyframes balanco{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.4deg)}}
@keyframes negar{20%{transform:rotate(-6deg)}45%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}}
@keyframes pular{40%{transform:translateY(-10px)}}
@keyframes mexer-boca{0%{opacity:1}50%{opacity:0}}
@keyframes tremer{10%,90%{translate:-1px 0}20%,80%{translate:3px 0}30%,50%,70%{translate:-6px 0}40%,60%{translate:6px 0}}
@keyframes piscar{50%{opacity:0}}
@keyframes saltar{40%{transform:translateY(-8px) scale(1.06)}}
@keyframes entrar{from{opacity:0;transform:translateX(16px)}}

/* Celular: a Estela um pouco menor, encostada à esquerda, e o balão ao lado. */
@media (max-width:520px){
  body.portal{padding:14px 12px 24px}
  .portal-coluna{--s:.8;--x:-8px}
  .marca{width:120px;margin-bottom:10px}
  .balao{padding:10px 12px 11px}
  .balao p{font-size:13.5px}
  .balcao .conteudo{padding:24px 20px 22px}
  .digitos{--h:60px;gap:10px}
}
/* Celular pequeno (iPhone SE): a Estela um pouco menor, para o balão ganhar largura. */
@media (max-width:360px){
  .portal-coluna{--s:.72}
  .balao{left:calc(var(--x) + 184px * var(--s));padding:9px 11px 10px}
  .balao-quem small{display:none}
  .balao p{font-size:13px}
}