/* Logotipo CLIOR del inicio de sesión (LOGIN-PREMIUM-03, 17 de octubre de 2026): AGENTE 2 (marca y movimiento).
   Separado de login-marca.css por el coordinador para que cada agente tenga sus archivos. Isotipo oficial sin redibujar
   (img.lgn-logo) + la palabra en HTML (Inter). Sin animaciones aquí (login-motion.css). */
/* Logotipo horizontal: isotipo a la izquierda, palabra a la derecha, centrados en lo óptico (la palabra baja un pelo
   porque el isotipo pesa más arriba). */
/* Tamaño (LOGIN-PREMIUM-03): en la referencia aprobada (1448×1086) el símbolo mide ≈ 148 px de alto y la palabra
   ≈ 84 px de cuerpo (mayúscula ≈ 60 px), separados ≈ 26 px. Ancho del símbolo y cuerpo de la palabra salen del menor
   entre el ancho y el alto de la ventana, así una pantalla baja (1280×720) lo achica más que una angosta. El símbolo
   oficial es 148 × 206,6 (ancho = 0,716 × alto). */
.lgn-lockup {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 1.8vw, 1.65rem);
  margin-bottom: clamp(1.25rem, 3.6vh, 2.25rem);
}
.lgn-mark {
  position: relative;
  display: block;
  flex: none;
  width: clamp(2.9rem, min(7.3vw, 9.8vh), 6.65rem);
}
/* Brillo teal muy suave detrás del símbolo. */
.lgn-mark::before {
  content: '';
  position: absolute;
  inset: -32%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(45, 212, 191, .24), rgba(45, 212, 191, 0));
}
.lgn-brand .lgn-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 22px rgba(4, 10, 36, .42)); }
.lgn-brand .lgn-word {
  margin: 0;
  transform: translateY(.03em);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.3rem, min(5.8vw, 7.75vh), 5.3rem);
  line-height: 1;
  letter-spacing: .015em;
  color: var(--lgn-ink);
}

@media (min-width: 901px) and (max-width: 1100px) {
  .lgn-brand .lgn-word { font-size: clamp(2.3rem, min(5.2vw, 7vh), 3.6rem); }
  .lgn-mark { width: clamp(2.6rem, min(6.4vw, 8.6vh), 4.5rem); }
}
/* Pantallas bajas (1280×720): el logotipo cede alto para que la marca entera quepa sin desplazar la página. */
@media (min-width: 901px) and (max-height: 760px) {
  .lgn-lockup { margin-bottom: 1.1rem; }
  .lgn-mark { width: clamp(2.6rem, 8.2vh, 4rem); }
  .lgn-brand .lgn-word { font-size: clamp(2.2rem, 6.6vh, 3.4rem); }
}
@media (max-width: 900px) {
  .lgn-lockup { margin-bottom: 1rem; gap: .7rem; }
  .lgn-mark { width: 2.4rem; }
  .lgn-brand .lgn-word { font-size: 2.05rem; }
}
@media (max-width: 480px) {
  .lgn-lockup { margin-bottom: .8rem; }
  .lgn-mark { width: 2.3rem; }
  .lgn-brand .lgn-word { font-size: 1.85rem; }
}