/* Login split-screen — HaceloIA. Prefijo lg2- para no chocar con auth-screen.css */

.lg2 {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: #faf6f2;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Panel izquierdo ─────────────────────────────────────────────────── */
.lg2-hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: #0b1120;
  color: #f8fafc;
  padding: 1.9rem clamp(1.5rem, 3.4vw, 3rem) 1.75rem;
}
.lg2-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* El robot vive entre el 44% y el 59% del cuadro (centro 52%). Con cover el
     video se pinta 802px más ancho que el panel, así que cada punto de este
     valor lo corre 8px, y BAJARLO lo corre a la DERECHA. 54% lo deja a ~48% del
     ancho del panel: bien a la derecha, pero todavía no centrado (52% sería el
     centro exacto, y ahí caería justo sobre la columna del claim).
     (18% 42% era el encuadre viejo; 62% el del handoff 2A; 57% un paso intermedio.) */
  object-position: 54% 30%;
  pointer-events: none;
}
/* Scrim: fuerte abajo (donde vive el texto), casi nulo arriba (donde vive el robot) */
.lg2-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg,  rgba(8,13,26,.97) 4%, rgba(8,13,26,.86) 26%, rgba(8,13,26,.20) 56%, rgba(8,13,26,0) 78%),
    linear-gradient(100deg, rgba(11,17,32,.62) 0%, rgba(11,17,32,.12) 46%, rgba(11,17,32,0) 70%);
}
.lg2-glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(70% 55% at 70% 34%, rgba(224,113,78,.24), rgba(224,113,78,0) 64%);
}

.lg2-hero-top,
.lg2-claim,
.lg2-hero-foot { position: relative; z-index: 2; }

.lg2-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lg2-brand { display: flex; align-items: center; gap: .75rem; }
.lg2-brand img { width: 44px; height: 44px; }
.lg2-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.lg2-name span { color: #F2926E; }
.lg2-kicker { margin-top: .2rem; font-size: .64rem; font-weight: 600; letter-spacing: .22em; color: #7d8aa0; }

/* El claim ocupa la fila 1fr pero se apoya abajo: align-self:end */
.lg2-claim {
  align-self: end;
  display: flex; flex-direction: column; gap: 1.05rem;
  max-width: 34ch;
  padding-bottom: 1.15rem;
}
.lg2-eyebrow { display: flex; align-items: center; gap: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; color: #8d9ab0; }
.lg2-eyebrow span { width: 26px; height: 2px; background: #E0714E; }
.lg2-claim h2 {
  /* color explícito a propósito: redesign.css tiene `h1..h6 { color }` y esa
     regla de elemento le gana a la herencia de .lg2-hero. */
  color: #f8fafc;
  margin: 0; font-size: clamp(2.1rem, 3.9vw, 3.2rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.02; text-wrap: balance;
  max-width: 14ch;
}
.lg2-claim h2 em { font-style: normal; color: #F2926E; }
.lg2-claim p { margin: 0; font-size: .96rem; line-height: 1.6; color: #a4b0c2; max-width: 36ch; text-wrap: pretty; }

.lg2-hero-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .7rem; letter-spacing: .06em; color: #6b7889;
  padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.09);
}
.lg2-made { font-weight: 700; letter-spacing: .18em; }

/* ── Panel derecho ───────────────────────────────────────────────────── */
.lg2-panel {
  position: relative;
  /* 2 filas (form + pie): el header con el logo se quitó. Si se dejaran las
     3 originales, .lg2-main caería en la fila `auto` y perdería el centrado. */
  display: grid; grid-template-rows: 1fr auto;
  padding: 2rem clamp(1.5rem, 3.4vw, 3rem);
  background: linear-gradient(160deg, #fdfbf8, #f4ece4);
}
.lg2-main { display: flex; align-items: center; justify-content: center; padding: 2rem 0; }
.lg2-card { width: 100%; max-width: 390px; animation: lg2In .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lg2In { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lg2-head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.9rem; text-align: center; }
.lg2-head h1 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #0f172a; }
.lg2-head h1 em { font-style: normal; color: #C25438; }
.lg2-head p { margin: 0; font-size: .94rem; line-height: 1.5; color: #64748b; }

.lg2-error {
  display: flex; gap: .55rem; align-items: flex-start;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 12px; padding: .7rem .9rem; font-size: .85rem; line-height: 1.4; margin-bottom: 1.15rem;
}

.lg2-form { display: flex; flex-direction: column; gap: 1.05rem; }
.lg2-field { display: flex; flex-direction: column; gap: .42rem; }
.lg2-field label { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: #334155; }
.lg2-field label i { color: #94a3b8; }
.lg2-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lg2-labelrow .lg-forgot { font-size: .76rem; font-weight: 600; color: #94a3b8; text-decoration: none; }
.lg2-labelrow .lg-forgot:hover { color: #C25438; }

.lg2 input[type="email"],
.lg2 input[type="password"],
.lg2 input[type="text"] {
  width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #e7ddd2; border-radius: 12px;
  padding: .85rem 1rem; font-size: .95rem; color: #0f172a; font-family: inherit;
  outline: none; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .15s, box-shadow .15s;
}
.lg2 input::placeholder { color: #a8b0bd; }
.lg2 input:hover { border-color: #d8c8b8; }
.lg2 input:focus { border-color: #E0714E; box-shadow: 0 0 0 3px rgba(224,113,78,.18); }

.lg2-pass { position: relative; display: flex; }
.lg2-pass input { padding-right: 3rem; }
.lg2-eye {
  position: absolute; top: 50%; right: .45rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; padding: 0;
  background: none; border: 0; border-radius: 9px;
  color: #94a3b8; font-size: 1rem; cursor: pointer;
  transition: color .15s, background .15s;
}
.lg2-eye:hover { color: #334155; background: rgba(15,23,42,.05); }

.lg2-remember { display: flex; align-items: center; gap: .55rem; font-size: .83rem; color: #64748b; cursor: pointer; user-select: none; }
.lg2-remember input { accent-color: #E0714E; width: 15px; height: 15px; }

.lg2-btn {
  margin-top: .15rem; border: none; border-radius: 12px; cursor: pointer;
  padding: .95rem; font-size: .97rem; font-weight: 700; letter-spacing: -.01em;
  color: #fff; font-family: inherit;
  background: linear-gradient(100deg, #C25438, #E0714E 55%, #F2926E);
  box-shadow: 0 12px 26px rgba(224,113,78,.3);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.lg2-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(224,113,78,.38); }
.lg2-btn:active { transform: none; filter: brightness(.97); }

/* ── Extras que usa /register (el login no los necesita) ───────────────────
   Variante secundaria para "Reenviar código": misma caja que el CTA pero sin
   peso visual, para que no compita con "Confirmar y crear cuenta". */
.lg2-btn--ghost {
  width: 100%; margin-top: .6rem;
  background: none; color: #C25438;
  border: 1px solid #e7ddd2; box-shadow: none;
}
.lg2-btn--ghost:hover { border-color: #d8c8b8; background: rgba(224,113,78,.05); box-shadow: none; transform: none; }

/* Aviso neutro (código reenviado, cuenta creada…). */
.lg2-info {
  background: #f0f9f4; border: 1px solid #bbe6cd; color: #166534;
  border-radius: 12px; padding: .7rem .9rem; font-size: .85rem; line-height: 1.4; margin-bottom: 1.15rem;
}

/* Nota al pie de un campo (ej. el correo de una invitación, que no se edita). */
.lg2-hint { display: block; margin-top: .35rem; font-size: .78rem; color: #a8b0bd; }

.lg2-divider { display: flex; align-items: center; gap: .85rem; margin-top: 1.3rem; color: #a8b0bd; font-size: .72rem; letter-spacing: .08em; }
.lg2-divider::before, .lg2-divider::after { content: ''; flex: 1; height: 1px; background: #e7ddd2; }

.lg2-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; box-sizing: border-box; margin-top: 1rem;
  padding: .82rem; border-radius: 12px; border: 1px solid #e7ddd2;
  background: #fff; color: #334155; font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lg2-google:hover { border-color: #d8c8b8; box-shadow: 0 8px 18px rgba(15,23,42,.08); transform: translateY(-1px); color: #334155; }

.lg2-signup { text-align: center; font-size: .88rem; color: #64748b; margin: 1.5rem 0 0; }
.lg2-signup a { color: #C25438; font-weight: 700; text-decoration: none; }
.lg2-signup a:hover { text-decoration: underline; }

.lg2-panel-foot { display: flex; align-items: center; justify-content: center; gap: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; color: #a8b0bd; }
.lg2-panel-foot span { width: 26px; height: 1px; background: #ddd0c2; }

/* ── Mobile: franja de video limpia arriba, claim abajo sobre el panel claro ── */
@media (max-width: 900px) {
  .lg2 { grid-template-columns: 1fr; }

  /* El hero deja de ser una caja oscura a pantalla partida: pasa a bloque y su
     fondo es el mismo del panel del formulario, para que el claim quede sobre
     claro y NO sobre el robot. */
  .lg2-hero {
    display: block;
    min-height: 0;
    padding: 0;
    background: linear-gradient(160deg, #fdfbf8, #f4ece4);
  }

  /* El video ya no cubre todo el hero: solo la franja superior. */
  .lg2-video { height: 250px; bottom: auto; object-position: 56% 26%; }
  .lg2-scrim {
    height: 250px; bottom: auto;
    background:
      linear-gradient(180deg, rgba(8,13,26,.72) 0%, rgba(8,13,26,0) 38%),
      linear-gradient(0deg,   rgba(8,13,26,.55) 0%, rgba(8,13,26,0) 34%);
  }
  .lg2-glow { display: none; }

  /* La marca queda sobre la franja de video (sigue en blanco). */
  .lg2-hero-top { height: 250px; box-sizing: border-box; align-items: flex-start; padding: 1.1rem 1.25rem; }
  .lg2-brand img { width: 34px; height: 34px; }
  .lg2-kicker { display: none; }

  /* En el teléfono el claim se corta a la marca de canales: el titular repetía el
     mensaje que ya da el "Bienvenido de vuelta" de dos líneas más abajo, y entre
     los dos empujaban el formulario fuera de la primera pantalla. */
  .lg2-claim {
    align-self: auto;
    max-width: none;
    gap: .6rem;
    padding: 1.25rem 1.25rem 0;
  }
  .lg2-eyebrow { font-size: .6rem; letter-spacing: .18em; color: #a08b7c; }
  .lg2-claim h2,
  .lg2-claim p { display: none; }

  .lg2-hero-foot { display: none; }
  .lg2-panel { padding-top: .5rem; }
  .lg2-main { padding: 1.25rem 0 1.5rem; }
}

/* Con animaciones reducidas no hay video, y en el teléfono la franja se apoyaba en
   el degradado CREMA del hero: la marca es blanca, así que quedaba ilegible sobre
   el claro y el scrim la dejaba a rayas. Se pinta del azul del hero, que es lo que
   el handoff daba por hecho que pasaba. Desktop no necesita esto: ahí el hero ya
   es #0b1120. */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .lg2-hero-top { background: #0b1120; }
  .lg2-scrim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg2-video { display: none; }
  .lg2-card { animation: none; }
}