/* ===============================
   FUNDO PREMIUM COM ANIMAÇÃO
=================================*/

body{
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
  background: linear-gradient(135deg, #5a3a4f, #8e5c7c, #b388a3);
  background-size: 300% 300%;
  animation: gradientMove 12s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Movimento suave do degradê */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===============================
   ÍCONES FLUTUANDO PREMIUM
=================================*/

.floating-icons{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.floating-icons i{
  position:absolute;
  color:rgba(255,255,255,0.12);
  animation: floatUp linear infinite;
}

/* Animação */
@keyframes floatUp{
  from{
    transform: translateY(100vh) rotate(0deg);
    opacity:0;
  }
  15%{
    opacity:1;
  }
  85%{
    opacity:1;
  }
  to{
    transform: translateY(-10vh) rotate(360deg);
    opacity:0;
  }
}

/* CAMADA 1 (ícones pequenos - mais distantes) */
.floating-icons i:nth-child(1){ left:5%; font-size:20px; animation-duration:28s; }
.floating-icons i:nth-child(2){ left:12%; font-size:18px; animation-duration:30s; }
.floating-icons i:nth-child(3){ left:20%; font-size:22px; animation-duration:26s; }
.floating-icons i:nth-child(4){ left:28%; font-size:19px; animation-duration:32s; }
.floating-icons i:nth-child(5){ left:36%; font-size:21px; animation-duration:27s; }
.floating-icons i:nth-child(6){ left:44%; font-size:18px; animation-duration:29s; }

/* CAMADA 2 (médio) */
.floating-icons i:nth-child(7){ left:52%; font-size:26px; animation-duration:24s; }
.floating-icons i:nth-child(8){ left:60%; font-size:28px; animation-duration:22s; }
.floating-icons i:nth-child(9){ left:68%; font-size:25px; animation-duration:23s; }
.floating-icons i:nth-child(10){ left:76%; font-size:30px; animation-duration:21s; }
.floating-icons i:nth-child(11){ left:84%; font-size:27px; animation-duration:25s; }

/* CAMADA 3 (maiores - mais próximos) */
.floating-icons i:nth-child(12){ left:15%; font-size:34px; animation-duration:18s; }
.floating-icons i:nth-child(13){ left:35%; font-size:36px; animation-duration:20s; }
.floating-icons i:nth-child(14){ left:55%; font-size:38px; animation-duration:19s; }
.floating-icons i:nth-child(15){ left:75%; font-size:32px; animation-duration:17s; }
.floating-icons i:nth-child(16){ left:90%; font-size:35px; animation-duration:16s; }

/* ===============================
   CARD LOGIN
=================================*/

.login-card{
  position:relative;
  z-index:2;
  background:#ffffff;
  border-radius:22px;
  padding:45px;
  width:100%;
  max-width:420px;
  box-shadow:0 30px 80px rgba(0,0,0,0.18);
  text-align:center;
}

.brand-logo{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:15px;
}

.login-title{
  font-weight:700;
  color:#5a3a4f;
  margin-bottom:5px;
}

.btn-main{
  background:#8e5c7c;
  color:#fff;
  font-weight:600;
  border-radius:50px;
  padding:12px;
  border:none;
  transition:.3s;
}

.btn-main:hover{
  background:#5a3a4f;
  color:#fff;
}

.btn-outline-main{
  border:2px solid #8e5c7c;
  color:#8e5c7c;
  border-radius:50px;
  padding:10px;
  font-weight:600;
  transition:.3s;
}

.btn-outline-main:hover{
  background:#8e5c7c;
  color:#fff;
}

.form-control{
  border-radius:50px;
  padding-left:45px;
  height:48px;
}

.input-group-wrapper{
  position:relative;
}

.input-icon{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:#8e5c7c;
  font-size:18px;
}