/* auth.css — Login y registro: tarjeta sobre un tajo diagonal rojo. */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  position: relative;
  overflow: hidden;
}

/* Banda roja diagonal cruzando el fondo, con línea de tinta. */
.auth-page::before {
  content: '';
  position: fixed;
  inset: -30% -10%;
  background: linear-gradient(
    115deg,
    transparent 0 38%,
    var(--ink) 38% 39%,
    var(--brand) 39% 62%,
    var(--ink) 62% 63%,
    transparent 63%
  );
  z-index: -1;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  display: grid;
  gap: var(--space-2);
  transform: rotate(var(--tilt));
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
}
.auth-brand .brand-mark {
  color: var(--brand);
  font-style: normal;
  font-size: 1.5rem;
  transform: rotate(-12deg);
}

.auth-card h1 {
  font-size: var(--fs-2xl);
  text-shadow: 3px 3px 0 var(--brand-glow);
}
.auth-sub {
  margin-bottom: var(--space-4);
}

.auth-card .form {
  margin-top: var(--space-2);
}

.auth-alt {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .auth-card {
    transform: none;
  }
}