/* ===== layout base ===== */
html, body { height: 100%; }
body.product.login{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom left, #030133, #4e024c, #030133);
}

.secao.content{
  flex: 1;
  display: flex;
  padding-top: 0;
  padding-bottom: 0;
}

.login-main{
  flex: 1;
  display: flex;
  width: 100%;
}
.login-main .grid-container{
  flex: 1;
  display: flex;
  align-items: center;      
  justify-content: center;  
  padding: 40px;
}

/* ===== hero ===== */
.login-hero{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 12px 0 16px;
}
.login-hero .logo img{ height: 56px; }
.login-hero .hero-text h2{ font-size: 1.6rem; margin: 0; }
.login-hero .hero-text h3{ font-size: 1rem; margin-top: 6px; }

/* ===== card ===== */
.login-card{
  background: #0F0F0F;
  border-radius: 16px;
  border: 1px solid rgba(158,183,249,0.35);
  padding: 28px;
  box-shadow: 0 0 20px rgba(158,183,249,0.15);
  max-width: 520px;
  width: 100%;
}
.login-title{
  font-size: 1.4rem;
  margin-bottom: 18px;
  color: #fff;
  text-align: center;
}

/* ===== form ===== */
.login-form .field{ margin-bottom: 16px; }
.login-form .field-inline{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.login-form label{ color:#FFF; font-weight:600; font-size:.9rem; margin-bottom:6px; display:block; }
.login-form input[type="email"],
.login-form input[type="password"]{
  width:100%; background:#0a0a0a; border:1px solid #2a2a2a; color:#fff;
  border-radius:10px; padding:12px 14px; outline:none; transition:border .2s, box-shadow .2s;
}
.login-form input:focus{ border-color:#9eb7f9; box-shadow:0 0 0 3px rgba(158,183,249,.18); }

/* ===== checkbox ===== */
.checkbox{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.checkbox input{ accent-color:#9eb7f9; }

/* ===== links e botão ===== */
.link-muted{ color:#B0B0B0; text-decoration:none; }
.link-muted:hover{ color:#d1b1f3; }

.btn-primary{
  width:100%;
  background-image:linear-gradient(45deg,#345dcb,#9eb7f9,#344d8f,#9eb7f9);
  background-size:400% 200%;
  color:#fff; border:none; border-radius:12px; padding:12px 16px; font-weight:700;
  cursor:pointer; transition:transform .2s ease-in-out; animation:brilho 3.4s infinite;
}
.btn-primary:hover{ transform:scale(1.02); box-shadow:0 0 20px 4px #9eb7f9; }

/* ===== alertas ===== */
.alert{ border-radius:10px; padding:10px 12px; font-size:.92rem; margin:8px 0 14px; }
.alert-error{ background:rgba(236,45,48,.12); border:1px solid #ec2d30; color:#ffd4d5; }

/* ===== rodapé do card ===== */
.login-footer{ margin-top:14px; text-align:center; }
.login-footer a{ color:#9eb7f9; font-weight:600; }
.login-footer a:hover{ color:#d1b1f3; }

.login-main .grid-x{ 
  justify-content: center;  
}

.login-main .cell{
  flex: 0 1 520px;          
  max-width: 620px;
  min-width: 520px;          
}

.login-card{ 
  width: 100%; 
}

@keyframes brilho{
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}

/* ===== responsivo ===== */
@media (max-width: 780px){
  .login-main .grid-container{ padding: 24px 16px; }

  .login-main .cell{
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }

  .login-card{
    padding: 18px;
    border-radius: 12px;
    max-width: 100%;
  }
  .login-title{ font-size: 1.2rem; }

  .login-form .field-inline{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .login-hero{
    flex-direction: row;         
    align-items: center;
    gap: 12px;
    padding: 10px 0 12px;
  }
  .login-hero .logo img{ height: 40px; }
  .login-hero .hero-text h2{ font-size: 1.25rem; }
  .login-hero .hero-text h3{ font-size: .9rem; margin-top: 4px; }
}

@media (max-width: 360px){
  .login-main .grid-container{ padding: 16px 12px; }
  .login-card{ padding: 16px; }
  .login-hero .hero-text h2{ font-size: 1.1rem; }
  .login-hero .hero-text h3{ font-size: .85rem; }
}