*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  min-height: 100vh; /*“viewport height” (altura de la ventana gráfica)*/
  align-items: center;
  background: hwb(278 11% 1%);
  justify-content: center;
}
::selection{
  color: #fff;
  background: hwb(278 11% 1%);;
}
.wrapper{
  height: 270px;
  max-width: 420px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 0;
  transition: height 0.2s ease;
}
.wrapper.active{
  height: 620px;
}
.wrapper .form{
  margin: 20px 0 25px;
}
.wrapper.active .codigo-qr{
  opacity: 1;
  transition: opacity 0.5s 0.05s ease;
  pointer-events: auto;
}
header h1{
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}
header p{
  margin-top: 5px;
  color: #464646;
  font-size: 16px;
}
.form :where(input, button){
  width: 100%;
  height: 50px;
  outline: none;
  border-radius: 5px;
  transition: 0.1s ease;
}
.form input{
  font-size: 20px;
  padding: 0 20px;
  border: 1px solid #999;
}
.form input::placeholder{
  color: rgb(173, 173, 173);
}
.form input:focus{
  box-shadow: 0 6px 12px rgba(85, 85, 85, 0.13);
}
.form button{
  color: #fff;
  cursor: pointer;
  margin-top: 25px;
  font-size: 17px;
  background: #19bca6;
}
.codigo-qr{
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  opacity: 0;
  display: flex;
  padding: 33px 0;
  border-radius: 5px; 
}
.codigo-qr img{
  width: 250px;
}
/*CSS para móvil*/
@media (max-width: 430px){
  .wrapper{
    height: 255px;
    padding: 18px 20px;
  }
  .wrapper.active{
    height: 560px;
  }
  header p{
    color: #696969;
  }
  .form :where(input, button){
    height: 55px;
  }
  .codigo-qr img{
    width: 200px;
  }  
}