/* A porta do sistema.
 *
 * Folha separada, e todo seletor com prefixo `.kl-`, pelo mesmo motivo da
 * landing: nesta base já aconteceu quatro vezes de uma regra nova alcançar em
 * silêncio a tela de outra pessoa. Aqui nada escapa.
 *
 * O desenho é o que a Duda mandou: duas colunas no computador, empilhadas no
 * celular. A mesma marcação serve aos dois. */

.kl {
  margin: 0;
  font-family: var(--fonte);
  color: var(--tinta);
  background: #F4F1FC;
  -webkit-font-smoothing: antialiased;
}

.kl *, .kl *::before, .kl *::after { box-sizing: border-box; }

/* ================= O recado de erro ================= */

.kl-recado {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 30;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 18px 40px -20px rgb(30 27 46 / .5);
}
.kl-recado.erro { background: #FDECEA; color: #A32A1F; border: 1px solid #F3C6C0; }
.kl-recado.ok { background: #E9F7EF; color: #1E6B42; border: 1px solid #BFE3CE; }

/* ================= A moldura =================

   No desenho NÃO existem dois painéis: é uma tela só, com um degradê contínuo,
   o camaleão sangrando pela borda esquerda e o formulário flutuando à direita.
   A versão anterior fazia duas colunas com fundos diferentes, e a emenda
   vertical no meio aparecia — era a diferença mais visível para o desenho. */

.kl-porta {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 62% at 40% 44%, #FFFFFF 0%, rgb(255 255 255 / 0) 62%),
    linear-gradient(118deg, #EFE9FB 0%, #F7F4FD 34%, #FBFAFE 58%, #F3EFFC 100%);
}

/* O disco claro atrás do bicho. No desenho ele é o que separa a foto do fundo
   sem precisar de moldura. */
.kl-porta::before {
  content: ""; position: absolute; z-index: 0;
  top: 46%; left: 41%; transform: translate(-50%, -50%);
  width: min(86vh, 760px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, rgb(255 255 255 / .62) 54%, transparent 74%);
  pointer-events: none;
}

/* A onda clara do canto de baixo à direita. */
.kl-porta::after {
  content: ""; position: absolute; z-index: 0;
  right: -16%; bottom: -34%;
  width: 62%; aspect-ratio: 1.5; border-radius: 50%;
  background: linear-gradient(200deg, rgb(255 255 255 / .85), rgb(237 233 254 / .5));
  pointer-events: none;
}

/* ================= O camaleão ================= */

.kl-arte {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}

.kl-bicho {
  position: absolute;
  /* Sangra pela esquerda, como no desenho: o rabo enrolado sai da tela. */
  left: -5%; top: 50%; transform: translateY(-50%) scaleX(-1);
  width: 54%; min-width: 620px;
  /* Espelhado: no desenho a cabeça fica à direita e o rabo à esquerda, e o
     arquivo que temos vem ao contrário. */
  /* O arquivo tem fundo branco, e não transparente. `multiply` faz o branco
     sumir no degradê; sem isso aparece o retângulo da foto. */
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 64% 58% at 50% 48%, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 64% 58% at 50% 48%, #000 40%, transparent 90%);
}

/* ================= As legendas em caixa alta ================= */

.kl-verso {
  position: relative; z-index: 2;
  margin: 0;
  font-size: 12px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  line-height: 2.2; color: #6F6A87;
}

/* Os tracinhos que abrem E fecham cada bloco. No desenho são dois, um acima e
   um abaixo — com um só, o bloco fica pendurado. */
.kl-verso::before, .kl-verso::after {
  content: ""; display: block;
  width: 38px; height: 2px;
  background: #8B7BC8; border-radius: 2px;
}
.kl-verso::before { margin-bottom: 18px; }
.kl-verso::after { margin-top: 18px; }

.kl-verso-topo { position: absolute; top: 46px; left: 52px; }
/* Fica sob o camaleão e recuada, e não colada na borda: é onde o desenho a
   põe, perto do centro da metade esquerda. */
.kl-verso-baixo { position: absolute; bottom: 58px; left: 33%; }

/* ================= O lado do formulário ================= */

.kl-lado {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  min-height: 100vh; min-height: 100dvh;
  padding: 48px clamp(24px, 5vw, 86px);
}

/* ================= A marca ================= */

.kl-marca {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 40px;
}
.kl-simbolo { width: 122px; height: auto; flex-shrink: 0; margin-left: -10px; }
.kl-marca-texto b {
  display: block;
  font-size: clamp(38px, 5vw, 62px); font-weight: 700;
  letter-spacing: -.04em; line-height: .95;
}
/* Alinhada à direita, terminando junto com o "n" do nome — é assim no desenho,
   e é o que faz o bloco parecer uma marca e não duas linhas soltas. */
.kl-marca-texto span {
  display: block; margin-top: 8px;
  font-size: 15px; color: #6F6A87; text-align: right;
}

/* ================= Os campos ================= */

/* `minmax(0, 1fr)`, e não o `1fr` implícito.
 *
 * Uma coluna `auto` de grid tem o min-content como piso, e um <input> carrega
 * largura intrínseca do atributo `size` (20 caracteres, ~300px). Resultado: o
 * campo de senha pedia 409px de min-content e esticava a coluna inteira para
 * além dos 372px disponíveis num celular de 420 — o formulário saía cortado à
 * direita, e nenhum `max-width` no pai resolvia, porque o estouro vinha de
 * dentro. */
.kl-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.kl-campo {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
  padding: 0 18px;
  background: #F7F5FC;
  border: 1px solid #E8E3F6;
  border-radius: 18px;
  transition: border-color .15s ease, background .15s ease;
}
.kl-campo:focus-within { background: #fff; border-color: var(--roxo); }

.kl-icone { display: grid; place-items: center; color: #3B3552; flex-shrink: 0; }
.kl-icone svg { width: 22px; height: 22px; }

/* `:not([type=submit])` não é preciso aqui porque o botão mora fora do campo —
   mas a regra é estreita de propósito, e não um `input` solto. */
.kl-campo input[type="email"], .kl-campo input[type="password"], .kl-campo input[type="text"] {
  flex: 1; min-width: 0;
  padding: 19px 0;
  border: 0; background: transparent; outline: 0;
  font-family: var(--fonte); font-size: 16px; color: var(--tinta);
}
.kl-campo input::placeholder { color: #8B87A0; }

.kl-olho {
  display: grid; place-items: center;
  padding: 6px; margin-right: -6px;
  border: 0; background: transparent; cursor: pointer;
  color: #3B3552; border-radius: 8px;
}
.kl-olho svg { width: 22px; height: 22px; }
.kl-olho:hover { color: var(--roxo); }
.kl-olho.aberto { color: var(--roxo); }

/* ================= Lembrar e esqueci ================= */

.kl-linha {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin: 4px 0 6px;
}

.kl-lembrar { display: flex; align-items: center; gap: 11px; cursor: pointer; font-size: 15px; }
.kl-lembrar input[type="checkbox"] {
  appearance: none;
  width: 22px; height: 22px; flex-shrink: 0;
  border: 2px solid #C7BFE4; border-radius: 7px;
  background: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.kl-lembrar input[type="checkbox"]:checked {
  background: var(--roxo-escuro); border-color: var(--roxo-escuro);
}
.kl-lembrar input[type="checkbox"]:checked::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.kl-link { font-size: 15px; font-weight: 600; color: var(--roxo-escuro); text-decoration: none; }
.kl-link:hover { text-decoration: underline; }

/* ================= Os botões ================= */

.kl-entrar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; padding: 21px 24px;
  border: 0; border-radius: 16px;
  background: linear-gradient(97deg, #6D4AE0 0%, #7C3AED 48%, #5B21B6 100%);
  color: #fff; font-family: var(--fonte); font-size: 17px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 18px 34px -16px rgb(91 33 182 / .75);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kl-entrar svg { width: 22px; height: 22px; transition: transform .15s ease; }
.kl-entrar:hover { transform: translateY(-1px); box-shadow: 0 22px 40px -16px rgb(91 33 182 / .85); }
.kl-entrar:hover svg { transform: translateX(4px); }

.kl-ou {
  display: flex; align-items: center; gap: 18px;
  margin: 10px 0; color: #8B87A0; font-size: 15px;
}
.kl-ou::before, .kl-ou::after {
  content: ""; flex: 1; height: 1px; background: #DDD6F0;
}
.kl-ou span { flex-shrink: 0; }

.kl-criar {
  display: block; padding: 20px 24px;
  border: 1.5px solid #C4B5FD; border-radius: 16px;
  background: transparent; color: var(--roxo-escuro);
  font-size: 17px; font-weight: 600; text-align: center; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.kl-criar:hover { background: #F3EEFF; border-color: var(--roxo); }

.kl-verso-rodape { margin-top: 40px; text-align: right; }
/* Os dois tracinhos acompanham o texto para a direita. Sem isto o de baixo
   fica sozinho à esquerda, e o bloco parece torto. */
.kl-verso-rodape::before, .kl-verso-rodape::after { margin-left: auto; }
.kl-verso-rodape::before { margin-bottom: 14px; }

/* ================= Celular =================

   O desenho empilha: o bicho em cima, num bloco mais baixo, e o formulário
   embaixo. As legendas laterais saem — em 390px de largura elas roubariam a
   altura que os campos precisam. */

@media (max-width: 900px) {
  /* No computador a moldura é uma tela só com o bicho posicionado de forma
     absoluta. No celular ele volta a ser um bloco no fluxo, em cima, e o
     formulário embaixo — senão a foto ficaria por trás dos campos. */
  .kl-porta { display: flex; flex-direction: column; }
  .kl-porta::before { top: 20%; left: 50%; width: 132%; }
  .kl-porta::after { display: none; }

  .kl-arte {
    position: relative; inset: auto;
    /* O topo abre espaço para a legenda, que é posicionada de forma absoluta. */
    padding: 104px 0 0;
  }
  .kl-bicho {
    position: relative; left: auto; top: auto;
    transform: scaleX(-1);
    width: 104%; min-width: 0; margin-left: -2%;
    display: block;
  }

  .kl-verso-baixo { display: none; }
  .kl-verso-topo { top: 28px; left: 26px; font-size: 11px; }
  .kl-verso-topo::after { display: none; }

  .kl-lado {
    min-height: 0;
    align-items: center;
    padding: 30px 24px 48px;
  }

  .kl-marca {
    flex-direction: column; gap: 4px; text-align: center;
    margin: -14px 0 32px;
  }
  .kl-simbolo { width: 124px; margin-left: 0; }
  .kl-marca-texto b { font-size: 48px; }
  .kl-marca-texto span { text-align: center; font-size: 14px; }

  .kl-verso-rodape { margin-top: 38px; text-align: left; }
  .kl-verso-rodape::before, .kl-verso-rodape::after { margin-left: 0; }
}

@media (max-width: 460px) {
  /* Um ponto menos para "Continuar conectado" e "Esqueci minha senha" caberem
     na mesma linha, como no desenho. Quebradas em duas, elas empurram o botão
     para fora da primeira tela do celular. */
  .kl-lembrar, .kl-link { font-size: 13.5px; }
  .kl-lembrar { gap: 9px; }
  .kl-linha { gap: 8px; flex-wrap: nowrap; }
}

@media (max-width: 420px) {
  .kl-marca-texto b { font-size: 40px; }
  .kl-campo input[type="email"], .kl-campo input[type="password"], .kl-campo input[type="text"] {
    padding: 17px 0; font-size: 15px;
  }
  .kl-entrar, .kl-criar { padding: 18px 20px; font-size: 16px; }
}