/* =====================================================================
   Telas de login e cadastro — layout: layouts/autenticacao
   ===================================================================== */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-lateral {
  position: relative; overflow: hidden;
  padding: var(--espaco-12); display: flex; flex-direction: column; justify-content: space-between; gap: var(--espaco-8);
  background: linear-gradient(150deg, #0B3F3B 0%, #0F766E 55%, #14B8A6 100%);
  color: #F0FDFA;
}
.auth-lateral::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -220px;
  border-radius: 50%; background: rgba(255,255,255,.07);
}
.auth-lateral .marca { color: #fff; }
.auth-lateral .marca-logo { background: rgba(255,255,255,.16); }
.auth-lateral h1 { font-size: clamp(28px, 3.2vw, 40px); font-weight: var(--peso-bold); letter-spacing: -.02em; max-width: 14ch; }
.auth-lateral p { color: #CCFBF1; max-width: 42ch; margin-top: var(--espaco-3); font-size: var(--tamanho-lg); }
.auth-beneficios { display: grid; gap: var(--espaco-3-5); position: relative; z-index: 1; }
.auth-beneficios li { display: flex; gap: var(--espaco-3); align-items: center; font-size: var(--tamanho-base); }
.auth-beneficios span { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }

.auth-principal { display: flex; align-items: center; justify-content: center; padding: var(--espaco-10) var(--espaco-6); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h2 { font-size: var(--tamanho-4xl); font-weight: var(--peso-bold); letter-spacing: -.01em; }
.auth-card .subtitulo { color: var(--texto-2); margin-top: var(--espaco-1-5); }
.auth-form { display: grid; gap: var(--espaco-4); margin-top: var(--espaco-7); }
.auth-rodape { margin-top: var(--espaco-6); text-align: center; color: var(--texto-2); font-size: var(--tamanho-md); }
.auth-marca-mobile { display: none; margin-bottom: var(--espaco-7); }
.auth-sucesso { text-align: center; }
.auth-sucesso .emoji-grande { font-size: 48px; margin-bottom: var(--espaco-3); }

@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-lateral { display: none; }
  .auth-principal { align-items: flex-start; padding: var(--espaco-8) var(--espaco-4); }
  .auth-marca-mobile { display: flex; }
}