.btn{
          display:block;
    background-color: rgba(75, 34, 244,1.0);
    color: #FFFFFF;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 32px;
    padding-right: 32px;
    align-items: center;
    appearance: none;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    font-family: Poppins;
    font-size: 16px;
    font-weight: regular;
    fill: var(--btn-text-color);
    flex-shrink: 0;
    font-weight: 500;
    outline: none;
    padding: 1em 1.4em;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

@media(hover: hover){
  .btn:hover{
          display:block;

      background-color: rgba(156, 134, 249,1.0);
      color: #FFFFFF;
      padding-top: 16px;
      padding-bottom: 16px;
      padding-left: 32px;
      padding-right: 32px;
      align-items: center;
      appearance: none;
      border: none;
      border-radius: 10px;
      box-shadow: none;
      cursor: pointer;
      display: flex;
      font-family: Poppins;
      font-size: 16px;
      font-weight: Medium;
      fill: var(--btn-text-color);
      flex-shrink: 0;
      font-weight: 500;
      outline: none;
      padding: 1em 1.4em;
      text-decoration: none;
      transition: transition: color 1s ease 
  }
}
.blanco{
          display:block;
    background-color: rgba(255, 255, 255,1.0);
    color: #4b22f4;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 32px;
    padding-right: 32px;
    align-items: center;
    appearance: none;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    font-family: Poppins;
    font-size: 16px;
    font-weight: regular;
    fill: var(--btn-text-color);
    flex-shrink: 0;
    font-weight: 500;
    outline: none;
    padding: 1em 1.4em;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}