/* ===========================================================================
   A TELA DE ENTRAR

   Folha propria, separada do app.css: a tela de login nao tem menu, tabela nem
   cartao do painel, e carregar 2.000 linhas de CSS para desenhar um formulario
   e o que deixava ela parecida com uma tela de configuracao.

   A COR CONTA A HISTORIA DO FUNIL: lilas e o clique que chega frio, rosa e
   coral sao o lead que sai quente. O fundo e a ameixa-noite da lateral do
   painel - entrar e sair da tela de login nao troca de mundo.
   =========================================================================== */

/* A TIPOGRAFIA E A DO SITE criattus.com.br: Ubuntu em tudo, nos tres pesos que
   o site usa, com os mesmos arquivos. Titulo 700 apertado (-.02em, entrelinha
   1.06), sobrancelha 500 espacejada (.18em) e botao 500 - as medidas vieram do
   CSS do site, para o painel e o site parecerem da mesma casa. */
@font-face { font-family: Ubuntu; src: url(fonts/Ubuntu-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Ubuntu; src: url(fonts/Ubuntu-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Ubuntu; src: url(fonts/Ubuntu-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --noite:    #0d0a16;
  --ameixa:   #161029;
  --ameixa-2: #201838;
  --linha:    rgba(255, 255, 255, .09);
  --criattus: #ed145b;
  --rosa:     #ff5c8a;
  --brasa:    #ff7a45;
  --frio:     #8b8cff;
  --nevoa:    #f4effc;
  --apagado:  #a99fc2;
  --ok:       #3ddc97;

  --f-titulo: 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  --f-texto:  'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  /* Sem fonte mono: o site nao tem uma. Os rotulos pequenos usam a Ubuntu 500. */
  --f-mono:   'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  --mola:     cubic-bezier(.2, .9, .25, 1.15);
  --suave:    cubic-bezier(.3, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--noite); }
body {
  color: var(--nevoa);
  font: 400 16px/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
a:focus-visible, button:focus-visible { outline: 2px solid #ff8db1; outline-offset: 3px; }

.login-palco {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(400px, 540px);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ================================================================ a vitrine */
.vitrine {
  position: relative;
  overflow: hidden;
  background: var(--noite);
  isolation: isolate;
}
.funil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }

/* ---------------------------------------------------------------- o leao */
.leao-nucleo {
  position: absolute;
  left: 56%; top: 43%;
  width: clamp(120px, 14vw, 196px);
  aspect-ratio: 400 / 448;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.leao {
  position: relative; display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 22px rgba(237, 20, 91, .55)) drop-shadow(0 0 60px rgba(237, 20, 91, .25));
  animation: respirar 5s ease-in-out 1.8s infinite;
}
.peca {
  fill: url(#leao-tinta);
  transform-box: fill-box;
  transform-origin: center;
  /* backwards, e nao both: terminada a montagem a peca volta ao transform do
     CSS, e e isso que deixa o hover afastar as pecas depois. */
  animation: montar 1.15s var(--mola) backwards;
  animation-delay: calc(var(--i) * 75ms + 200ms);
  transition: transform .55s cubic-bezier(.3, 1.6, .5, 1);
}
.leao-nucleo:hover .peca { transform: translate(var(--ox, 0), var(--oy, 0)) scale(.96); }

@keyframes montar {
  from { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.3); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes respirar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* As ondas que saem do nucleo: o pulso do funil. */
.leao-onda {
  position: absolute; inset: -18%;
  border-radius: 50%;
  border: 1px solid rgba(237, 20, 91, .55);
  opacity: 0;
  animation: onda 3.4s ease-out 1.4s infinite;
  pointer-events: none;
}
.leao-onda-2 { animation-delay: 3.1s; border-color: rgba(255, 122, 69, .45); }
@keyframes onda {
  0%   { transform: scale(.55); opacity: .8; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* ------------------------------------------------- os sinais que flutuam */
.sinais {
  position: absolute; top: 0; bottom: 0; right: 3%;
  width: 34%; margin: 0; padding: 0; list-style: none;
  pointer-events: none;
}
.sinais li {
  position: absolute; left: var(--x, 0); top: var(--y, 50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 10px;
  font: 500 12.5px/1 var(--f-mono);
  letter-spacing: 0; white-space: nowrap;
  color: var(--nevoa);
  background: rgba(22, 16, 41, .72);
  border: 1px solid var(--linha);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  opacity: 0;
}
.sinais li::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rosa); box-shadow: 0 0 10px currentColor;
}
.sinais li[data-cor="lead"]::before { background: #ff3d7f; color: #ff3d7f; }
.sinais li[data-cor="ok"]::before   { background: var(--ok); color: var(--ok); }
.sinais li[data-cor="nota"]::before { background: var(--frio); color: var(--frio); }
.sinais li.vivo { animation: sinal 4.4s var(--suave) both; }
@keyframes sinal {
  0%   { opacity: 0; transform: translateY(16px) scale(.94); }
  12%  { opacity: 1; transform: none; }
  72%  { opacity: 1; transform: translateY(-16px); }
  100% { opacity: 0; transform: translateY(-30px) scale(.98); }
}

/* ------------------------------------------------------------ o titulo */
.vitrine-texto {
  position: absolute;
  left: clamp(24px, 5vw, 76px);
  bottom: clamp(28px, 8vh, 80px);
  max-width: min(640px, 70%);
  pointer-events: none;
}
/* A sobrancelha do site: Ubuntu 500, .72rem, .18em, maiuscula, rosa, com o
   pontinho na frente. */
.sobrancelha {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px;
  font: 500 .72rem/1 var(--f-titulo);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rosa);
  animation: subir .8s var(--suave) 1s both;
}
.sobrancelha::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor; box-shadow: 0 0 10px currentColor;
}
.sobrancelha sup { font-size: .7em; letter-spacing: 0; }
/* O titulo do site (.hero__title): 700, -.028em, entrelinha 1.06. */
.vitrine-texto h1 {
  margin: 0;
  font: 700 clamp(2.4rem, 1.1rem + 3.6vw, 4.5rem)/1.06 var(--f-titulo);
  letter-spacing: -.028em;
  text-wrap: balance;
  color: var(--nevoa);
  animation: subir .9s var(--suave) 1.12s both;
}
.vitrine-texto h1 span {
  display: block;
  background: linear-gradient(92deg, var(--rosa) 0%, var(--criattus) 42%, var(--brasa) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: subir .9s var(--suave) 1.24s both;
}
/* O .lead do site. */
.linha-fina {
  margin: 22px 0 0; max-width: 46ch;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem); line-height: 1.6;
  color: var(--apagado);
  animation: subir .9s var(--suave) 1.36s both;
}
@keyframes subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================ o balcao */
.balcao {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(237, 20, 91, .14), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(139, 140, 255, .08), transparent 60%),
    var(--ameixa);
  border-left: 1px solid var(--linha);
}
.cartao {
  position: relative;
  width: 100%; max-width: 400px;
  display: grid;
  transform-style: preserve-3d;
  transition: transform .7s var(--suave);
  /* backwards, e nao both: animacao que segura o estado final vence o
     transform do .virado, e o cartao nao girava - as duas faces sumiam. */
  animation: chegar .8s var(--suave) .15s backwards;
}
@keyframes chegar {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}

/* As duas faces ocupam a mesma celula; o cartao gira para trocar. */
.face {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: visibility 0s linear .35s;
}
.face-recuperar { transform: rotateY(180deg); visibility: hidden; }
.cartao.virado,
.cartao:has(.face-recuperar:target) { transform: rotateY(180deg); }
.cartao.virado .face-recuperar,
.cartao:has(.face-recuperar:target) .face-recuperar { visibility: visible; }
.cartao.virado .face-entrar,
.cartao:has(.face-recuperar:target) .face-entrar { visibility: hidden; }

.cartao-topo { margin-bottom: 26px; }
/* Os h2 do site: 700, -.02em, entrelinha 1.06. */
.cartao-topo h2 {
  margin: 0 0 10px;
  font: 700 30px/1.06 var(--f-titulo);
  letter-spacing: -.02em;
}
.cartao-topo p { margin: 0; color: var(--apagado); font-size: 15px; line-height: 1.5; }

/* ---------------------------------------------------------------- avisos */
.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 18px; padding: 12px 14px;
  border-radius: 12px; font-size: 14px; line-height: 1.45;
}
.aviso svg { flex: 0 0 18px; margin-top: 1px; }
.aviso-erro {
  background: rgba(255, 77, 109, .12); border: 1px solid rgba(255, 77, 109, .38); color: #ffb8c7;
  animation: tremer .45s ease-in-out;
}
.aviso-espera { background: rgba(255, 170, 60, .1); border: 1px solid rgba(255, 170, 60, .35); color: #ffd59a; }
.aviso-espera strong { font-family: var(--f-mono); }

/* ---------------------------------------------------------------- campos */
.campo { position: relative; margin-bottom: 14px; }
.campo input {
  width: 100%; height: 58px;
  padding: 22px 48px 8px 48px;
  font: 500 16px/1 var(--f-texto);
  color: var(--nevoa);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  outline: none;
  caret-color: var(--rosa);
  transition: border-color .2s, box-shadow .25s, background-color .2s;
  -webkit-appearance: none; appearance: none;
}
.campo input:hover { border-color: rgba(255, 255, 255, .24); }
.campo input:focus {
  background: rgba(255, 255, 255, .07);
  border-color: transparent;
  box-shadow:
    0 0 0 1.5px var(--criattus),
    0 0 0 6px rgba(237, 20, 91, .16),
    0 12px 34px -12px rgba(237, 20, 91, .55);
}
.campo label {
  position: absolute; left: 48px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px; color: var(--apagado);
  pointer-events: none;
  transition: top .2s var(--suave), font-size .2s var(--suave), color .2s, letter-spacing .2s;
}
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo input:autofill + label,
.campo input:-webkit-autofill + label {
  top: 15px; font-size: 11px; letter-spacing: .05em; color: #ff8db1;
}
.campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--nevoa);
  box-shadow: inset 0 0 0 100px #231a3c;
  transition: background-color 9999s;
}
.campo-icone {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--apagado); pointer-events: none;
  transition: color .2s, transform .3s var(--mola);
}
.campo:focus-within .campo-icone { color: var(--rosa); transform: translateY(-50%) scale(1.08); }

/* O visto verde quando o e-mail ja tem cara de e-mail. */
.campo-ok {
  position: absolute; right: 16px; top: 50%;
  display: flex; color: var(--ok);
  transform: translateY(-50%) scale(.4); opacity: 0;
  transition: opacity .2s, transform .35s var(--mola);
  pointer-events: none;
}
.campo input:valid:not(:placeholder-shown) ~ .campo-ok { opacity: 1; transform: translateY(-50%) scale(1); }

.ver-senha {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 10px;
  color: var(--apagado); cursor: pointer;
  transition: color .2s, background-color .2s;
}
.ver-senha:hover { color: var(--nevoa); background: rgba(255, 255, 255, .06); }
.ver-senha span { display: flex; }
.ver-senha .olho-fechado,
.ver-senha[aria-pressed="true"] .olho-aberto { display: none; }
.ver-senha[aria-pressed="true"] .olho-fechado { display: flex; }

.campo.tremendo { animation: tremer .42s ease-in-out; }
@keyframes tremer {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* ------------------------------------------------- o codigo de seguranca */
.desafio { margin: 4px 0 4px; }
.desafio-bilhete { display: flex; gap: 10px; margin-bottom: 12px; }
/* A imagem num bilhete claro, com os dois "picotes" nas laterais: o desenho
   do codigo e claro, e solto no fundo escuro ele parecia um erro de tela. */
.desafio-imagem {
  flex: 1 1 auto; min-width: 0;
  height: 64px; width: 100%;
  object-fit: contain;
  background: #f5f6fa;
  border-radius: 14px;
  -webkit-mask: radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 8px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 8px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.desafio-trocar {
  flex: 0 0 58px; height: 64px; padding: 0;
  display: grid; place-items: center;
  color: var(--nevoa); cursor: pointer;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  transition: border-color .2s, background-color .2s;
}
.desafio-trocar:hover { border-color: rgba(237, 20, 91, .6); background: rgba(237, 20, 91, .1); }
.desafio-trocar.girando svg { animation: girar .6s var(--suave); }
@keyframes girar { to { transform: rotate(360deg); } }
.campo-codigo input {
  font: 700 18px/1 var(--f-mono);
  letter-spacing: .35em;
  text-transform: uppercase;
}
.desafio-ajuda { margin: -6px 0 16px 4px; font-size: 12px; color: var(--apagado); }

/* ---------------------------------------------------- confiar (a chave) */
.confiar {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 6px 0 22px; cursor: pointer;
}
.confiar input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chave {
  position: relative; flex: 0 0 40px; height: 24px; margin-top: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  transition: background .25s;
}
.chave::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform .35s var(--mola);
}
.confiar input:checked + .chave { background: linear-gradient(90deg, var(--criattus), var(--brasa)); }
.confiar input:checked + .chave::after { transform: translateX(16px); }
.confiar input:focus-visible + .chave { outline: 2px solid #ff8db1; outline-offset: 3px; }
.confiar-texto strong { display: block; font-size: 14px; font-weight: 600; }
.confiar-texto small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--apagado); }

/* ------------------------------------------------------- o botao entrar */
.entrar {
  position: relative; overflow: hidden;
  width: 100%; height: 60px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  /* O .btn do site: pilula, Ubuntu 500, .94rem, -.01em. */
  border: 0; border-radius: 999px; cursor: pointer;
  font: 500 1rem/1 var(--f-titulo);
  letter-spacing: -.01em;
  color: #fff;
  background: linear-gradient(110deg, var(--criattus) 0%, #ff3d7f 45%, var(--brasa) 100%);
  background-size: 180% 100%; background-position: 0% 0;
  box-shadow: 0 16px 36px -14px rgba(237, 20, 91, .85), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .25s var(--mola), box-shadow .3s, background-position .6s var(--suave);
}
.entrar:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -14px rgba(237, 20, 91, .95), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.entrar:active { transform: translateY(0) scale(.985); }
.entrar-seta {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .2);
  transition: transform .35s var(--mola);
}
.entrar:hover .entrar-seta { transform: translateX(5px); }
/* O brilho que atravessa o botao de tempos em tempos: chama o olho para ele
   sem piscar. */
.entrar-brilho {
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  animation: varrer 4s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes varrer {
  0%, 62% { left: -60%; }
  100%    { left: 130%; }
}
.entrar.enviando { pointer-events: none; }
.entrar.enviando .entrar-seta {
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  background: none; animation: girar .8s linear infinite;
}
.entrar.enviando .entrar-seta svg { display: none; }
.entrar:disabled {
  cursor: not-allowed; filter: grayscale(.7); opacity: .55; transform: none; box-shadow: none;
}
.entrar:disabled .entrar-brilho { display: none; }

.esqueci, .voltar {
  display: block; width: fit-content; margin: 20px auto 0;
  font-size: 14px; font-weight: 600; color: #ff8db1;
  text-decoration: underline; text-decoration-color: rgba(255, 141, 177, .35);
  text-underline-offset: 5px;
  transition: color .2s, text-decoration-color .2s, text-underline-offset .2s;
}
.esqueci:hover, .voltar:hover { color: #fff; text-decoration-color: currentColor; text-underline-offset: 7px; }

/* ----------------------------------------------- recuperar: os dois canais */
.canal {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px; padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--linha);
  color: var(--nevoa); text-decoration: none;
  transition: transform .3s var(--mola), border-color .2s, background-color .2s;
}
.canal:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .07); }
.canal-zap:hover   { border-color: rgba(37, 211, 102, .55); }
.canal-email:hover { border-color: rgba(237, 20, 91, .55); }
.canal-icone {
  flex: 0 0 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
}
.canal-zap .canal-icone   { background: rgba(37, 211, 102, .16); color: #4be38a; }
.canal-email .canal-icone { background: rgba(237, 20, 91, .16); color: var(--rosa); }
.canal-icone svg { width: 22px; height: 22px; }
.canal-texto { flex: 1; min-width: 0; }
.canal-texto strong { display: block; font-size: 15px; font-weight: 600; }
.canal-texto small {
  display: block; margin-top: 3px;
  font: 500 12.5px/1.3 var(--f-mono); color: var(--apagado);
  overflow-wrap: anywhere;
}
.canal-seta { font-size: 18px; color: var(--apagado); transition: transform .3s var(--mola), color .2s; }
.canal:hover .canal-seta { transform: translateX(4px); color: var(--nevoa); }
.recuperar-nota { margin: 16px 0 0; font-size: 12.5px; color: var(--apagado); text-align: center; }

.rodape {
  margin: 34px 0 0;
  font-size: 12px; color: rgba(169, 159, 194, .7);
  text-align: center;
}

/* ================================================================ celular */
@media (max-width: 991px) {
  .login-palco { grid-template-columns: 1fr; }
  .vitrine { height: clamp(360px, 54vh, 480px); }
  .leao-nucleo { left: 50%; top: 33%; width: clamp(112px, 30vw, 156px); }
  /* Na faixa estreita os avisos caem em cima do leao: saem. */
  .sinais { display: none; }
  .vitrine-texto { left: 20px; right: 20px; bottom: 50px; max-width: none; }
  .sobrancelha { margin-bottom: 12px; }
  .vitrine-texto h1 { font-size: clamp(30px, 8.6vw, 48px); }
  .linha-fina { margin-top: 10px; font-size: 14px; }
  .balcao {
    margin-top: -28px; z-index: 2;
    border-left: 0; border-radius: 28px 28px 0 0;
    padding: 34px 20px calc(28px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linha);
  }
  .cartao { animation-name: chegar-baixo; }
}
@keyframes chegar-baixo {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 420px) {
  .linha-fina { display: none; }
  .vitrine { height: clamp(320px, 48vh, 400px); }
  .vitrine-texto { bottom: 46px; }
  .cartao-topo h2 { font-size: 26px; }
}

/* ======================================================= movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
  .entrar-brilho, .leao-onda { display: none; }
  /* Sem giro: a outra face aparece no lugar. */
  .cartao.virado, .cartao:has(.face-recuperar:target) { transform: none; }
  .face-recuperar { transform: none; }
}