:root {
  --blanco: #FFF;
  --cafeBase: #BB854B;
  --cafeClaro:#ecdcca;
  
  --gris: #E6E6E6;
  --grisOscuro: #0B0E0D;
  --grisClaro: #FAFAFA;
  --mainText: #252B42;
  --secondText: #737373;
  --price: #23856D;
  --cafeFuerte: #211413;
  --mutted: #BDBDBD;
  --text-button-second: #2A2B2C;
  --title-second: #252B42;
  --frase: #5E0808;
  --cafeBackground: #bb854bc5;
  --grisNav: #0b0e0db2;
  --grisCaption: #C0C0C0;
  --rojoMain: #E20611;
  --grisMain: #D4DADE;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body {
  background: #ecdcca52;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
form {
  width: 100%;
}

a:hover {
  color: var(--cafeFuerte) !important;
}

input:hover,
input:focus {
  border-color: var(--cafeBase) !important;
}

#btn-iniciar {
  background-color: black !important;
}

#btn-iniciar:hover {
  background-color: var(--cafeBase)!important;
  cursor: pointer;
  transform: scale(1.1);
  transition: 0.2s ease-in-out 0s;
  color: var(--blanco);
}

@media (max-width: 868px) {
  form {
    width: 80% !important;
  }
}


.form-container{
  width: 75%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.wrapper{
  display:flex;
  justify-content: center;
width: 60%;
box-shadow: 0px 0px 13px 0px #2d1c0766;
border-radius: 10px;
background-color: var(--blanco);
padding-top: 3rem;
padding-bottom: 3rem;
}