/* Verum Sign - telas publicas do sistema (cadastrar, entrar).
   -----------------------------------------------------------
   Estas paginas sao a continuacao do site institucional: quem clica em
   "Comece gratis" em verumsign.com.br cai aqui. Por isso elas usam a mesma
   linguagem visual do site (Inter, azul fundo, agua, muito respiro) e nao o
   mmbx.css, que e' o visual utilitario das telas de dentro. */

:root {
  --azul-fundo: #18304F;
  --azul-noite: #0B1B2B;
  --azul-meio: #205070;
  --azul-aco: #4C8FB4;
  --ciano: #38A8A8;
  --agua: #40C8A8;
  --agua-clara: #45D9AE;

  --papel: #FFFFFF;
  --papel-frio: #F4F8FA;
  --borda: #E1E9EE;
  --tinta: #10263C;
  --tinta-media: #4A6276;
  --tinta-fraca: #7C93A4;

  --erro: #B42318;
  --erro-fundo: #FDECEA;
  --ok: #0F7A4F;
  --ok-fundo: #E6F6EF;

  --transicao: 220ms cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; }

html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font: 16px/1.6 Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--papel-frio);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ o palco */

.palco {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

/* lado esquerdo: a marca e o porque confiar */
.lado-marca {
  position: relative;
  overflow: hidden;
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  background: radial-gradient(120% 130% at 12% 0%, #1D4A6B 0%, #13304F 48%, var(--azul-noite) 100%);
  color: #EAF2F6;
}
.lado-marca::after {           /* o V enorme, de marca d'agua */
  content: "";
  position: absolute; right: -14%; top: 50%;
  width: 80%; aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("/estatico/logo-sign-icone.svg") center/contain no-repeat;
  opacity: .07; pointer-events: none;
}
.lado-marca > * { position: relative; z-index: 1; }

.lado-marca__logo { display: block; width: 190px; }
.lado-marca__logo img { display: block; width: 100%; }

.lado-marca h2 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600; line-height: 1.18; letter-spacing: -0.028em;
  max-width: 14ch;
}
.lado-marca h2 b {
  font-weight: 600;
  background: linear-gradient(118deg, var(--agua-clara), var(--ciano));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lado-marca__texto { margin: 0; color: #A9C1D1; font-size: .98rem; max-width: 34ch; }

.garantias { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.garantias li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .94rem; color: #C9D6DF;
}
.garantias svg { flex: 0 0 auto; margin-top: 3px; color: var(--agua); }
.garantias b { display: block; color: #EAF2F6; font-weight: 600; }

.lado-marca__rodape { font-size: .8rem; color: #6F8AA0; line-height: 1.55; }
.lado-marca__rodape b { color: #A9C1D1; font-weight: 600; }

/* lado direito: o formulario */
.lado-forma {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 40px;
  background: var(--papel);
}
.forma { width: 100%; max-width: 430px; }

.forma h1 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.028em;
}
.forma__sub { margin: 0 0 30px; color: var(--tinta-media); font-size: .97rem; }

.campo { display: block; margin-bottom: 16px; }
.campo > span {
  display: block; margin-bottom: 7px;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--tinta-media);
}
.campo input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--borda); border-radius: 11px;
  background: var(--papel);
  font: inherit; font-size: .98rem; color: var(--tinta);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input::placeholder { color: #A9BAC6; }
.campo input:hover { border-color: #CBD9E2; }
.campo input:focus {
  outline: none; border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(56, 168, 168, .16);
}

.dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }

.botao {
  appearance: none; width: 100%;
  margin-top: 8px; padding: 15px 22px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--agua-clara), var(--ciano));
  color: #06202C; font: inherit; font-size: 1rem; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(69, 217, 174, .85);
  transition: transform var(--transicao), box-shadow var(--transicao), opacity var(--transicao);
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(69, 217, 174, .95); }
.botao:active { transform: translateY(0); }
.botao:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.botao:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

.aviso {
  margin-top: 18px; padding: 14px 16px;
  border-radius: 11px; font-size: .93rem;
  border: 1px solid transparent;
}
.aviso.oculto { display: none; }
.aviso.ok { background: var(--ok-fundo); border-color: #BFE6D4; color: var(--ok); }
.aviso.erro { background: var(--erro-fundo); border-color: #F3C9C4; color: var(--erro); }

.miudo { margin-top: 20px; font-size: .86rem; color: var(--tinta-fraca); line-height: 1.6; }
.miudo a { color: var(--azul-meio); text-underline-offset: 2px; }
.miudo a:hover { color: var(--ciano); }

.mt18 { margin-top: 18px; }
.humano { margin-top: 16px; min-height: 0; }

/* ------------------------------------------------------------ telas pequenas */

@media (max-width: 880px) {
  .palco { grid-template-columns: 1fr; min-height: 0; }
  .lado-marca {
    padding: 26px 22px 30px;
    gap: 22px;
  }
  .lado-marca::after { display: none; }
  .lado-marca h2 { font-size: 1.35rem; max-width: none; }
  .lado-marca__texto { max-width: none; }
  /* no celular as garantias e o rodape da marca so' atrapalham o cadastro */
  .garantias, .lado-marca__rodape { display: none; }
  .lado-forma { padding: 30px 22px 48px; }
  .dupla { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}