:root{
  --navy:#0b1b2b;
  --navy2:#163a5f;
  --gold:#c9b98f;
}

/* ===== BODY ===== */
body{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: 'Segoe UI', sans-serif;

  background:
    linear-gradient(135deg, rgba(11,27,43,.88), rgba(22,58,95,.82)),
    url("./cosmos.jpg") center/cover no-repeat fixed;
}

/* ===== CONTENEDOR ===== */
.login-wrap{
  width:100%;
  max-width:1000px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  border-radius:20px;
  overflow:hidden;
  box-shadow: 0 20px 70px rgba(0,0,0,.5);
  background:#ffffff;
}

/* ===== LADO IZQUIERDO ===== */
.brand-side{
  padding:60px 50px;
  background: linear-gradient(135deg, rgba(11,27,43,.92), rgba(22,58,95,.92));
  color:white;
}

.brand-top{
  display:flex;
  align-items:center;
  gap:20px;
}

.brand-top img{
  width:120px;
  height:auto;
  background: transparent; /* SIN fondo blanco */
}

.brand-title{
  font-weight:900;
  letter-spacing:1px;
  font-size:18px;
}

.brand-sub{
  opacity:.8;
  font-size:14px;
}

.gold-line{
  margin:30px 0;
  height:3px;
  width:100px;
  background:var(--gold);
}

.brand-big h2{
  font-size:34px;
  font-weight:900;
}

.brand-big p{
  font-size:15px;
  opacity:.85;
  line-height:1.6;
}

/* ===== FORMULARIO ===== */
.form-side{
  padding:60px 50px;
  background:white;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.card-title{
  font-weight:900;
  font-size:22px;
  margin-bottom:10px;
}

.card-sub{
  font-size:14px;
  color:#6c757d;
  margin-bottom:25px;
}

.form-control{
  border-radius:12px;
  padding:14px;
  margin-bottom:18px;
}

.btn-advatia{
  border-radius:12px;
  padding:14px;
  font-weight:900;
  letter-spacing:.3px;
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  border:0;
  color:white;
}

.btn-advatia:hover{
  opacity:.95;
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .login-wrap{
    grid-template-columns:1fr;
  }
}