/* ============================================================================
   login.css · pantalla de acceso de growth — namespace .lg-*
   Usa solo tokens --fd-* y componentes .fd-*. Sin hardcodes cromáticos.
   ============================================================================ */

.lg-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--fd-space-5);
  background:
    var(--fd-grad-hero),
    var(--fd-bg-shell);
  color: var(--fd-text);
}

.lg-wrap {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--fd-space-4);
}

.lg-card {
  padding: var(--fd-space-6) var(--fd-space-5);
  box-shadow: var(--fd-shadow-3);
}

.lg-head {
  text-align: center;
  margin-bottom: var(--fd-space-5);
}

/* El isotipo real, no un glifo. El SVG trae su propia placa con degradado:
   sin fondo aquí, o se pintaría uno debajo del suyo. */
.lg-glyph {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--fd-space-3);
  display: block;
  border-radius: var(--fd-radius-lg);
  box-shadow: var(--fd-shadow-glow);
}

.lg-brand { margin: 0; }
.lg-tagline { margin-top: var(--fd-space-1); }

.lg-alert { margin-bottom: var(--fd-space-4); }

.lg-form { gap: var(--fd-space-4); }

/* honeypot — invisible para humanos, sin display:none (los bots lo rellenan).
   Patrón visually-hidden (clip) en su posición natural: NO usar left:-9999px,
   porque los gestores de contraseñas anclan su ícono al campo y saltaría fuera
   de pantalla al hacer hover. */
.lg-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lg-error { margin-top: calc(var(--fd-space-2) * -1); }

.lg-foot {
  text-align: center;
  font-size: var(--fd-font-size-sm);
}



.lg-form {
  display: flex;
  flex-direction: column;
}

/* Marca con el color de texto de la marca (el token es plano). */
.lg-brand--grad {
  background: var(--fd-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Tarjeta con glass sutil sobre el hero. */
.lg-card {
  background: var(--fd-glass-bg);
  border: 1px solid var(--fd-glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Glyph con respiración suave (se apaga si el usuario pide menos movimiento). */
@media (prefers-reduced-motion: no-preference) {
  .lg-glyph { animation: lg-breathe 4s ease-in-out infinite; }
  @keyframes lg-breathe {
    0%, 100% { transform: translateY(0); box-shadow: var(--fd-shadow-glow); }
    50% { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--fd-primary), 0 6px 26px var(--fd-primary-glow); }
  }
}

.lg-submit { margin-top: var(--fd-space-2); }