/* =========================
   🌊 FONDO
========================= */
.background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* 🔝 PARTE SUPERIOR */
.top-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 69vh;
  background: var(--top-bg-color);
  overflow: hidden;
  position: relative;
}

 /* 🔽 PARTE INFERIOR */
.bottom-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 31vh;
  background:  var(--bottom-bg-color);
}

/* 🌊 ONDA BASE (DESKTOP) */
.wave {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  
  width: 360%;
  max-width: 3400px;
}

/* SVG */
.wave img,
.wave svg {
  display: block;
  width: 100%;
  height: auto;
}

.login-container {
  position: relative;
  z-index: 10;
}

/* =========================
   📱 MOBILE FIX (CLAVE 🔥)
========================= */
@media (max-width: 768px) {
  .top-bg {
    height: 70vh;
  }

  .bottom-bg {
    height: 30vh;
  }

  .wave {
    width: 220%;       /* 🔥 menos exagerado que 360% */
    bottom: -30px;     /* 🔥 sube la curva */
  }
}

/* =========================
   📱 MÓVILES PEQUEÑOS
========================= */
@media (max-width: 480px) {
  .wave {
    width: 250%;
    bottom: -20px;
  }
}

/* =========================
   🖼 LOGO
========================= */
.logo {
  width: var(--size-logo);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto var(--space-xs);
}

/* =========================
   🔤 TEXTO
========================= */
.login-container h2 {
  color: var(--text-primary);
  font-size: 22px;
  margin-bottom: var(--space-sm);
  font-weight: 500;
}

.divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: var(--space-sm) 0 var(--space-lg);
}