/* Inicio de sesión (LOGIN-PREMIUM-02, 17 de octubre de 2026). Zona de marca (AGENTE 1).
   Fondo: índigo profundo (arriba a la izquierda) que avanza al azul corporativo, con luz teal que entra por la derecha
   y abajo, lejos del texto (el blanco sobre teal no alcanza 4,5:1). Encima, la capa decorativa .lgn-deco: dos manchas
   de luz (.lgn-glow), tres curvas finas en SVG (.lgn-curve) y seis puntos luminosos (.lgn-spark) sobre ellas.
   Jerarquía: logotipo horizontal → titular → mensaje → descripción → funciones. La captura va en login-showcase.css.
   Ubicación con top/left y `transform`; las propiedades sueltas translate/scale y las animaciones son de
   login-motion.css (agente 2), para que nunca se pisen. */

.lgn-brand {
  --lgn-ink: #fff;
  --lgn-ink-soft: rgba(255, 255, 255, .9);
  --lgn-ink-mute: #c7d6ff;
  --lgn-teal-light: #6ee7e4;
  /* Márgenes del panel (LOGIN-PREMIUM-03): los usa también login-showcase.css (agente 3) para salir al borde con
     márgenes negativos. Referencia 1448×1086: texto a ≈ 72 px del borde, logotipo a ≈ 58 px del borde superior. */
  --lgn-pad-x: clamp(1.75rem, 4.97vw, 4.75rem);
  --lgn-pad-top: clamp(1.5rem, 5.4vh, 3.75rem);
  --lgn-pad-bottom: clamp(1.25rem, 3.2vh, 2.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--lgn-pad-top) var(--lgn-pad-x) var(--lgn-pad-bottom);
  color: var(--lgn-ink);
  /* Línea fina luminosa teal en el borde con el formulario (como la referencia), con un halo que entra apenas. */
  box-shadow: inset -1px 0 0 rgba(125, 240, 235, .78), inset -14px 0 26px -16px rgba(94, 234, 212, .5);
  background:
    radial-gradient(38% 30% at 100% 22%, rgba(45, 212, 191, .36) 0%, rgba(45, 212, 191, 0) 72%),
    radial-gradient(55% 34% at 62% 86%, rgba(13, 148, 136, .3) 0%, rgba(13, 148, 136, 0) 75%),
    radial-gradient(70% 45% at 92% 100%, rgba(55, 48, 163, .5) 0%, rgba(55, 48, 163, 0) 75%),
    radial-gradient(60% 45% at 0% 0%, rgba(14, 20, 33, .75) 0%, rgba(14, 20, 33, 0) 75%),
    radial-gradient(50% 40% at 0% 100%, rgba(14, 20, 33, .55) 0%, rgba(14, 20, 33, 0) 75%),
    linear-gradient(160deg, #19243a 0%, #19243a 30%, #282a6e 62%, #3730a3 100%);
}

/* Trama de puntos casi invisible, solo hacia la esquina inferior derecha. */
.lgn-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(150deg, transparent 45%, #000 100%);
  mask-image: linear-gradient(150deg, transparent 45%, #000 100%);
}

/* ---- Capa decorativa ---- */
.lgn-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.lgn-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
}
/* Luz ambiental índigo detrás del logotipo y el titular. */
.lgn-glow--a {
  width: 72%;
  aspect-ratio: 1.3;
  top: -16%;
  left: -14%;
  background: radial-gradient(closest-side, rgba(99, 102, 241, .3), rgba(99, 102, 241, 0));
}
/* Luz teal a la derecha, donde pasan las curvas: la más viva del panel, lejos del texto. */
.lgn-glow--b {
  width: 58%;
  aspect-ratio: .9;
  top: 0;
  right: -24%;
  background: radial-gradient(closest-side, rgba(45, 212, 191, .3), rgba(45, 212, 191, 0));
}
.lgn-curves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Curvas concéntricas finas que bajan por el lado derecho (como la referencia): la principal más luminosa. */
.lgn-curve {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.lgn-curve--2 { stroke-width: 1; opacity: .55; }
.lgn-curve--3 { stroke-width: 1; opacity: .45; }
.lgn-curve--4 { stroke-width: 1; opacity: .7; }

.lgn-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #eafffd;
  box-shadow: 0 0 0 2px rgba(110, 231, 228, .22), 0 0 12px 3px rgba(110, 231, 228, .55);
}
.lgn-spark--lg { width: 8px; height: 8px; }
.lgn-spark--sm { width: 4px; height: 4px; box-shadow: 0 0 8px 1px rgba(110, 231, 228, .5); }
/* Sobre las curvas: mismos porcentajes que el viewBox 0–100 del SVG (puntos de cada Bézier, t indicado). */
.lgn-spark--p1 { left: 92.5%; top: 23.5%; }  /* curva 1, t = .5 */
.lgn-spark--p2 { left: 91%; top: 48.7%; }    /* curva 1, t = .8 */
.lgn-spark--p3 { left: 88.4%; top: 25.8%; }  /* curva 3, t = .7 */
.lgn-spark--p4 { left: 96.7%; top: 60.6%; }  /* curva 2, t = .7 */
.lgn-spark--p5 { left: 3.6%; top: 91.7%; }   /* curva 4, t = .1 */
.lgn-spark--p6 { left: 22.9%; top: 89.9%; }  /* curva 4, t = .3 */

/* ---- Contenido ----
   .lgn-copy no crece: el alto que sobra en pantallas altas va a la imagen del software (.lgn-showcase, agente 3,
   flex: 1 1 auto al final de la columna). */
.lgn-copy {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 40rem;
}

/* El logotipo (.lgn-lockup, .lgn-mark, .lgn-logo, .lgn-word) está en public/login-logo.css (agente 2). */

/* Titular: referencia 1448×1086 ≈ 64 px de cuerpo. Sale del menor entre ancho y alto de la ventana. */
.lgn-brand .lgn-headline {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.1rem, min(4.45vw, 5.9vh), 4.4rem);
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--lgn-ink);
}
.lgn-line { display: block; white-space: nowrap; }
.lgn-accent {
  color: var(--lgn-teal-light);
  background: linear-gradient(90deg, #5eead4 0%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mensaje y descripción: un bloque de lectura bajo el titular, sin competir con él. */
.lgn-brand .lgn-tagline {
  margin: clamp(.8rem, 2.2vh, 1.4rem) 0 0;
  font-size: clamp(1.08rem, min(1.55vw, 2.05vh), 1.45rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--lgn-ink-soft);
}
.lgn-brand .lgn-desc {
  margin: .4rem 0 0;
  max-width: 31rem;
  font-size: clamp(.92rem, min(1.17vw, 1.56vh), 1.08rem);
  line-height: 1.5;
  color: var(--lgn-ink-mute);
}

/* Funciones: recuadro translúcido para el ícono, título y descripción; sin tarjetas. */
.lgn-features {
  display: grid;
  gap: clamp(.65rem, 1.6vh, 1.1rem);
  margin: clamp(1.1rem, 2.9vh, 2rem) 0 0;
  padding: 0;
  max-width: 34rem;
  list-style: none;
}
.lgn-feature { display: flex; align-items: center; gap: clamp(.9rem, 1.5vw, 1.4rem); }
.lgn-feature-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(2.6rem, min(3.75vw, 5vh), 3.4rem);
  height: clamp(2.6rem, min(3.75vw, 5vh), 3.4rem);
  border-radius: 14px;
  color: #d4f7f5;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -10px rgba(4, 10, 36, .7);
}
.lgn-feature-icon .icon { width: clamp(1.25rem, min(1.66vw, 2.2vh), 1.5rem); height: clamp(1.25rem, min(1.66vw, 2.2vh), 1.5rem); }
.lgn-feature-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.lgn-feature-text strong { font-size: clamp(.95rem, min(1.17vw, 1.56vh), 1.1rem); font-weight: 620; line-height: 1.3; color: var(--lgn-ink); }
.lgn-feature-text span { font-size: clamp(.84rem, min(1.04vw, 1.4vh), .97rem); line-height: 1.4; color: var(--lgn-ink-mute);  }
/* Sobre la luz teal y la placa de vidrio el azul claro bajaba de 4,5:1 (QA): un tono más claro y una sombra mínima de texto. */
.lgn-feature-text span, .lgn-brand .lgn-desc { color: #dfe7ff; text-shadow: 0 1px 2px rgba(14, 20, 33, .55); }

/* 901–1100 px: mitad y mitad, todo un poco más contenido. */
@media (max-width: 1100px) {
  .lgn-brand { --lgn-pad-x: 2rem; }
  .lgn-brand .lgn-headline { font-size: clamp(1.9rem, min(3.6vw, 5.4vh), 2.6rem); }
}

/* Pantallas bajas de escritorio (1280 × 720): todo más apretado; la lista de funciones se va solo bajo 640 px de alto. */
@media (min-width: 901px) and (max-height: 760px) {
  .lgn-brand { --lgn-pad-top: 1.6rem; --lgn-pad-bottom: 1.25rem; }
  .lgn-features { margin-top: 1.1rem; gap: .6rem; }
}
@media (min-width: 901px) and (max-height: 640px) {
  .lgn-features { display: none; }
}

/* Tableta vertical y teléfono: cabecera compacta a sangre. Logotipo horizontal, titular más chico y el mensaje. */
@media (max-width: 900px) {
  .lgn-brand {
    --lgn-pad-x: 1.5rem; --lgn-pad-top: 1.75rem; --lgn-pad-bottom: 1.6rem;
    box-shadow: inset 0 -1px 0 rgba(125, 240, 235, .6);
    background:
      radial-gradient(50% 120% at 100% 20%, rgba(13, 148, 136, .4) 0%, rgba(13, 148, 136, 0) 70%),
      radial-gradient(60% 90% at 90% 110%, rgba(55, 48, 163, .5) 0%, rgba(55, 48, 163, 0) 75%),
      linear-gradient(155deg, #19243a 0%, #19243a 35%, #282a6e 75%, #3730a3 100%);
  }
  .lgn-copy { max-width: 40rem; }
  .lgn-brand .lgn-headline { font-size: clamp(1.55rem, 4.6vw, 2.1rem); }
  .lgn-brand .lgn-tagline { margin-top: .45rem; font-size: 1rem; }
  .lgn-brand .lgn-desc { font-size: .9rem; }
  .lgn-features { display: none; }
  .lgn-glow--a { width: 60%; top: -40%; }
  .lgn-glow--b { width: 50%; aspect-ratio: 1.4; top: -30%; right: -18%; }
  /* La curva baja y sus puntos, y los de la mitad inferior, quedan bajo el texto en la cabecera: fuera. */
  .lgn-curve--4, .lgn-spark--p2, .lgn-spark--p4, .lgn-spark--p5, .lgn-spark--p6 { display: none; }
}

@media (max-width: 600px) {
  .lgn-brand .lgn-desc { display: none; }
}
@media (max-width: 480px) {
  .lgn-brand { --lgn-pad-x: 1rem; --lgn-pad-top: 1.25rem; --lgn-pad-bottom: 1.2rem; }
  .lgn-line { white-space: normal; }
}

@media print { .lgn-brand { display: none; } }