/* === ENTRAR (compartilhado em estilo com Cadastrar) ================ */
.auth {
  min-height: calc(100vh - var(--header-h) - var(--topstrip-h));
  padding-top: calc(var(--header-h) + var(--topstrip-h));
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .auth { grid-template-columns: 1fr 1fr; } }

/* === LADO ILUSTRADO (navy) ========================================== */
.auth__art {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #fff;
  padding: var(--sp-7) var(--sp-7);
  display: none;
  position: relative; overflow: hidden;
}
@media (min-width: 900px) { .auth__art { display: grid; place-items: center; } }

/* Glows decorativos espalhados */
.auth__art::before {
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(247,199,61,.32), transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.auth__art::after {
  content: ""; position: absolute; bottom: -120px; left: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(43,196,240,.22), transparent 70%);
  border-radius: 50%; pointer-events: none;
}

/* Composição central: stack vertical centralizado */
.auth__art-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--sp-5);
  max-width: 440px;
}

/* Eyebrow no topo (chip pequeno) */
.auth__art-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
  padding: 8px 16px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.auth__art-tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(247,199,61,.25);
}

/* Título grande */
.auth__art-inner h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.auth__art-inner h2 em { font-style: normal; color: var(--yellow); font-weight: 700; }
.auth__art-inner h2 b  { color: var(--yellow); font-weight: 700; }

.auth__art-inner p {
  color: rgba(255,255,255,.85);
  font-size: var(--fs-md);
  max-width: 36ch;
  margin: 0;
}

/* Ilustração com glow circular atrás */
.auth__art-fig {
  position: relative;
  width: 320px; height: 320px;
  display: grid; place-items: center;
  margin-top: var(--sp-3);
}
.auth__art-fig::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(247,199,61,.3) 0%, transparent 60%);
  border-radius: 50%;
}
.auth__art-fig img { width: 100%; height: 100%; object-fit: contain; position: relative; }

/* Chip de prova social abaixo da ilustração */
.auth__art-prova {
  display: flex; align-items: center; gap: var(--sp-3);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  font-size: var(--fs-sm);
}
.auth__art-prova b { color: var(--yellow); font-weight: 800; }

/* === LADO DO FORMULÁRIO ============================================== */
.auth__form { display: grid; place-items: center; padding: var(--sp-8) var(--sp-5); background: var(--bg); }
.auth__card { width: 100%; max-width: 440px; }
.auth__card h2 { margin-bottom: var(--sp-2); }
.auth__demo {
  background: var(--bg-soft); border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4); color: var(--muted);
}

@media (max-width: 720px) {
  .auth__form { padding: var(--sp-6) var(--sp-4); align-items: start; }
}