/* ===================================================================
   LOGIN / CADASTRO — split screen
   =================================================================== */

.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* lado visual */
.auth__visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px; }
.auth__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.auth__visual::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(13,13,13,.72), rgba(13,13,13,.94));
}
.auth__visual > * { position: relative; z-index: 2; }
.auth__quote { max-width: 440px; }
.auth__quote .eyebrow { margin-bottom: 14px; display: block; }
.auth__quote h2 { font-family: var(--f-display); font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -1px; }
.auth__quote h2 .gold { color: var(--ouro); }
.auth__quote p { color: var(--texto-2); margin-top: 16px; font-size: 15px; line-height: 1.6; }
.auth__stats { display: flex; gap: 34px; }
.auth__stats div b { font-family: var(--f-display); font-size: 28px; font-weight: 800; color: var(--ouro); }
.auth__stats div span { display: block; font-size: 12px; color: var(--texto-2); }

/* lado do formulário */
.auth__form { display: flex; align-items: center; justify-content: center; padding: 44px; background: var(--preto); }
.auth__box { width: 100%; max-width: 400px; }
.auth__box .logo { margin-bottom: 30px; }
.auth__box h1 { font-family: var(--f-display); font-size: 26px; font-weight: 800; }
.auth__box .lead { font-size: 14px; color: var(--texto-2); margin: 6px 0 26px; }

.tabs { display: flex; background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 4px; margin-bottom: 22px; }
.tabs button { flex: 1; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); transition: .15s; }
.tabs button.is-active { background: var(--ouro); color: #000; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--texto-2); margin-bottom: 7px; }
.field__wrap { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--linha); border-radius: 11px; padding: 0 14px; transition: .15s; }
.field__wrap:focus-within { border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-soft); }
.field__wrap svg { width: 18px; height: 18px; color: var(--texto-3); flex-shrink: 0; }
.field__wrap input { flex: 1; background: none; border: none; outline: none; color: var(--texto); font-size: 14px; height: 48px; }
.field__wrap input::placeholder { color: var(--texto-3); }
.field__wrap .toggle-pass { color: var(--texto-3); }
.field__wrap .toggle-pass:hover { color: var(--texto); }

.auth__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: 13px; }
.checkbox { display: flex; align-items: center; gap: 8px; color: var(--texto-2); cursor: pointer; }
.checkbox input { accent-color: var(--ouro); width: 15px; height: 15px; }
.auth__row a { color: var(--ouro); font-weight: 600; }

.auth__divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--texto-3); font-size: 12px; }
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--linha); }

.social-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-auth button {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px;
  background: var(--card); border: 1px solid var(--linha); border-radius: 11px; font-size: 13px; font-weight: 600; transition: .15s;
}
.social-auth button:hover { border-color: var(--linha-2); background: rgba(255,255,255,.04); }
.social-auth svg { width: 18px; height: 18px; }

.auth__foot { text-align: center; margin-top: 24px; font-size: 13px; color: var(--texto-2); }
.auth__foot a { color: var(--ouro); font-weight: 600; }
.auth__back { position: absolute; top: 28px; left: 44px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.auth__back:hover { color: var(--branco); }
.auth__back svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__visual { display: none; }
  .auth__form { padding: 32px 24px; }
}