:root {

  --rosa: #8b004a;

  --rosa-escuro: #4b0129;

  --amarelo: #ffd000;

  --branco: #ffffff;

}

body.entrar {

    display: block;

    min-height: 100vh;

    background-color: var(--rosa);

}

.container-entrar {

  display: flex ;

  justify-content: center ;

  align-items: center ;

  padding: 40px 20px;

  box-sizing: border-box;

  min-height: calc(100vh - 137px); 

}

.caixa-entrar {

  background-color: var(--rosa-escuro); 

  padding: 40px 30px;

  border-radius: 12px;       

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); 

  width: 100%;

  max-width: 400px; 

  box-sizing: border-box;

}

.caixa-entrar h1 {

  font-family: Arial, sans-serif;

  text-align: center;

  color: var(--amarelo); 

  font-size: 32px;

  margin: 0 0 5px 0;

  font-weight: bold;

}

.caixa-entrar .subtitulo-cadastro {

  font-family: Arial, sans-serif;

  text-align: center;

  color: var(--branco);

  font-size: 15px;

  opacity: 0.9;

  margin: 0 0 20px 0;

}

.caixa-entrar form {

  display: flex ;

  flex-direction: column ;    

  gap: 15px ;                 

}

.caixa-entrar .campo label {

  color: var(--branco);

}

.caixa-entrar input {

  width: 100% ;

  padding: 14px ;

  border: 2px solid transparent ;

  border-radius: 6px ;

  font-size: 15px ;

  font-family: Arial, sans-serif;

  outline: none;

  background-color: var(--branco) ;

  color: #333333 ;

  box-sizing: border-box;

}

.caixa-entrar input:focus {

  border-color: var(--amarelo) ;

}

.caixa-entrar .custom-btn {

  width: 100% ;

  padding: 14px ;

  background-color: var(--amarelo) ; 

  color: var(--rosa-escuro) ; 

  border: none ;

  border-radius: 6px ;

  font-family: Arial, sans-serif;

  font-size: 16px;

  font-weight: bold;

  cursor: pointer;

  margin: 0 ; 

  transition: 0.2s;

}

.caixa-entrar .custom-btn:hover {

  background-color: #ffe45c ; 

  transform: translateY(-2px);

}

.caixa-entrar .texto-entrar {

  font-family: Arial, sans-serif;

  text-align: center;

  margin-top: 15px;

  font-size: 14px;

  color: var(--branco);

}

.caixa-entrar .texto-entrar a {

  color: var(--amarelo) ;

  font-weight: bold;

  text-decoration: none;

}

.caixa-entrar .texto-entrar a:hover {

  text-decoration: underline;

}

@media (max-width: 600px) {

  .container-entrar {

    padding: 20px 15px;

    min-height: calc(100vh - 137px);

  }

  .caixa-entrar {

    padding: 30px 20px;

    max-width: 100%;

  }

  .caixa-entrar h1 {

    font-size: 28px;

  }

  .caixa-entrar input,

  .caixa-entrar .custom-btn {

    padding: 13px;

  }

}