/* Tela de entrar (Paulo, 26/10/2026): o modelo do reel de login com o bloco
   que desliza entre "Entrar" e "Criar conta", nas cores da Ana (manual de
   marca) e com o fundo de cilios do story. Como o CRM so cria conta por
   convite, o outro lado explica o convite em vez de ter um cadastro aberto.
   Texto sobre o azul #38B6FF e marinho: branco em cima dele nao se le. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/public/fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/public/fonts/bodoni-moda.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/public/fonts/bodoni-moda-italico.woff2") format("woff2"); }

.tela-entrar {
  --azul: #38B6FF; --ceu: #CBE9FF; --profundo: #004AAD; --marinho: #0B2A45; --nevoa: #F4F9FD;
  --campo: #eef6fc; --t2: #4f6780;
  min-height: 100vh; margin: 0; display: grid; place-items: center; grid-template-columns: minmax(0, 1fr);
  box-sizing: border-box;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
  background: var(--nevoa); color: var(--marinho);
  font-family: Inter, system-ui, sans-serif; position: relative; overflow-x: hidden;
}
.tela-entrar::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: url("/public/cilios-padrao.svg"); background-size: 150px; opacity: .16;
}

.entrar {
  position: relative; width: min(850px, 100%); height: 550px;
  background: #fff; border-radius: 30px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(11, 42, 69, .14);
}
.entrar h1, .entrar h2 { font-family: "Bodoni Moda", Georgia, serif; font-weight: 500; margin: 0; line-height: 1.05; }
.entrar h1 { font-size: 2.6rem; }
.entrar h1 em, .entrar h2 em { font-style: italic; color: var(--profundo); }

/* Os dois lados de dentro: o de entrar (esquerda) e o do convite (direita). */
.lado {
  position: absolute; right: 0; width: 50%; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  box-sizing: border-box; padding: 40px; text-align: center; background: #fff; z-index: 0;
  transition: .6s ease-in-out 1.2s, visibility 0s 1s;
}
.lado p { margin: 0; color: var(--t2); line-height: 1.5; }
/* Os dois lados andam juntos; o do convite fica por cima quando aparece. */
.entrar.trocado .lado { right: 50%; }
.lado.do-convite { visibility: hidden; z-index: 1; }
.entrar.trocado .lado.do-convite { visibility: visible; }

.lado form { display: grid; gap: 14px; margin-top: 4px; text-align: left; }
.lado.de-entrar { gap: 12px; }
.campo { position: relative; display: block; }
.campo input {
  width: 100%; box-sizing: border-box; padding: 14px 48px 14px 18px;
  background: var(--campo); border: 1.5px solid transparent; border-radius: 10px;
  font: inherit; font-size: 1rem; color: var(--marinho); outline: none;
}
.campo input:focus { border-color: var(--azul); background: #fff; }
.campo input::placeholder { color: #7f97ad; }
.campo svg { position: absolute; right: 18px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: var(--t2); }
.erro-entrar { padding: 10px 14px; border-radius: 10px; background: #feebec; color: #b4232a; font-size: .92rem; text-align: left; }

.botao {
  width: 100%; height: 48px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--azul); color: var(--marinho); font: inherit; font-weight: 700; font-size: 1rem;
  box-shadow: 0 6px 16px rgba(56, 182, 255, .35);
}
.botao:hover { background: #26a8f5; }
.botao:focus-visible, .botao-linha:focus-visible { outline: 3px solid var(--profundo); outline-offset: 3px; }
.botao-linha {
  width: 170px; height: 46px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 2px solid var(--marinho); color: var(--marinho);
  font: inherit; font-weight: 700;
}

.convite-passos { display: grid; gap: 10px; text-align: left; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: p; }
.convite-passos li { counter-increment: p; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; color: var(--t2); line-height: 1.45; }
.convite-passos li::before {
  content: counter(p); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ceu); color: var(--profundo); font-weight: 700; font-size: .85rem;
}
.marca-entrar { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--profundo);
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; }
.marca-entrar img { width: 44px; height: auto; }

/* O bloco azul que desliza (o "efeito" do reel): um circulo enorme que
   cobre metade do cartao e troca de lado. */
.cortina { position: absolute; inset: 0; pointer-events: none; }
.cortina::before {
  content: ""; position: absolute; left: -250%; width: 300%; height: 100%;
  border-radius: 150px; background: var(--azul); z-index: 2;
  transition: 1.8s ease-in-out;
}
.entrar.trocado .cortina::before { left: 50%; }
.painel {
  position: absolute; width: 50%; height: 100%; z-index: 2; pointer-events: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px;
  box-sizing: border-box; padding: 40px; text-align: center; color: var(--marinho); transition: .6s ease-in-out;
}
.painel h2 { font-size: 2.3rem; }
.painel h2 em { color: #fff; }
.painel p { margin: 0 0 6px; line-height: 1.5; }
.painel img { width: 92px; height: auto; filter: brightness(0) invert(1); opacity: .95; }
.painel.esquerda { left: 0; transition-delay: 1.2s; }
.entrar.trocado .painel.esquerda { left: -50%; transition-delay: .6s; }
.painel.direita { right: -50%; transition-delay: .6s; }
.entrar.trocado .painel.direita { right: 0; transition-delay: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .lado, .painel, .cortina::before { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* Celular: o bloco azul fica em cima/embaixo, como no reel. */
@media (max-width: 650px) {
  .entrar { height: calc(100vh - 48px); min-height: 620px; }
  .lado { bottom: 0; width: 100%; height: 70%; padding: 28px 24px; }
  .entrar.trocado .lado { right: 0; bottom: 30%; }
  .cortina::before { left: 0; top: -270%; width: 100%; height: 300%; }
  .entrar.trocado .cortina::before { top: 70%; left: 0; }
  .painel { width: 100%; height: 30%; padding: 18px 24px; gap: 8px; }
  .painel img { display: none; }
  .painel h2 { font-size: 1.8rem; }
  .painel.esquerda { top: 0; }
  .entrar.trocado .painel.esquerda { left: 0; top: -30%; }
  .painel.direita { right: 0; bottom: -30%; }
  .entrar.trocado .painel.direita { bottom: 0; }
  .entrar h1 { font-size: 2.1rem; }
}

/* Celular como app (30/10/2026, desenho "00 · Entrar" do Penpot): sem cartao
   nem cortina; marca no meio, "Continuar com o Google" embaixo, e o e-mail e
   senha so aparecem ao tocar em "Entrar com e-mail" (ou se deu erro). */
.app-topo, .app-email { display: none; }
@media (max-width: 650px) {
  .tela-entrar { display: block; padding: 0; background: #fff; }
  .tela-entrar::before { opacity: .07; }
  .entrar { width: 100%; height: auto; min-height: 100dvh; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
  .cortina, .lado.do-convite { display: none; }
  .lado.de-entrar {
    position: static; width: 100%; height: auto; min-height: 100dvh; background: transparent;
    padding: max(24px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); gap: 12px;
    justify-content: flex-end;
    background: radial-gradient(circle at 30% 18%, #eaf3ff 0, #eaf3ff 38%, transparent 38.2%),
                radial-gradient(circle at 85% 42%, #dcecff 0, #dcecff 24%, transparent 24.2%);
  }
  .lado.de-entrar .marca-entrar, .lado.de-entrar h1, .lado .ou-google { display: none; }
  .app-topo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: auto 0; order: -1; }
  .app-logo { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 30px; background: #fff;
    box-shadow: 0 12px 30px rgba(25, 97, 237, .18); }
  .app-logo img { width: 60px; height: auto; }
  .app-topo strong { margin-top: 18px; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; color: #1c1c1e; }
  .app-topo p { max-width: 280px; font-size: 1rem; color: #6b7079; }
  .lado.de-entrar form { display: none; order: 2; }
  .lado.de-entrar .erro-entrar { order: 1; }
  .lado .botao-google { order: 3; height: 54px; border-radius: 27px; border-color: #e6e8ec; }
  .app-email { display: block; order: 4; margin: 4px auto 0; padding: 10px; border: 0; background: none;
    color: #1961ed; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; }
  .lado.com-email form { display: grid; }
  .lado.com-email .app-email { display: none; }
  .lado.com-email .app-topo { margin: auto 0 12px; }
  .botao { height: 54px; border-radius: 27px; }
}