body {
        --bg-light: #911b4b;
        --bg-dark: #91224e;

         --bg-light-send: #6e659a;
        --bg-dark-send: #4c3b9e;

         --bg-light-what: #1d9605;
        --bg-dark-what: #0f4d03;

         --bg-light-download: #0317c7;
        --bg-dark-download: #020c64;

    }
    
    .btng {
        max-width: 30rem;
        width: 25rem;
        min-height: 5px;
        height: 4rem;
        background-color: #6e659a;
        padding: 1.1em 2.7em;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     
        border-top-right-radius: 25px;
    }

     .btn-send {
        max-width: 18rem;
        width: 20rem;
        min-height: 5px;
        height: 5rem;
        background-color: var(--bg-light-send);
        padding: 1.1em 2.5em;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    .btn-what {
        max-width: 18rem;
        width: 20rem;
        min-height: 5px;
        height: 5rem;
        background-color: var(--bg-light-what);
        padding: 1.1em 2.5em;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

     .btn-download {
        max-width: 18rem;
        width: 20rem;
        min-height: 5px;
        height: 3rem;
        background-color: var(--bg-light-download);
        padding: 1.1em 2.5em;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    .text {
        font-size: 18px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-align: center;
        user-select: none;
       
        z-index: 2;
        top: 0.8rem;
        left: 0.1em;
    }
       .text-guinda {
        font-size: 18px;
        color: #99124d;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-align: center;
        user-select: none;
       
        z-index: 2;
        top: 0.8rem;
        left: 0.1em;
    }

    .text-14 {
        font-size: 14px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-align: center;
        user-select: none;
       
        z-index: 2;
        top: 0.8rem;
        left: 0.1em;
    }

    .text-10 {
        font-size: 10px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-align: center;
        user-select: none;
       
        z-index: 2;
        top: 0.8rem;
        left: 0.1em;
    }

    .btng:hover{
      /*background-color: var(--bg-dark);*/
      transition: 0.5s;
        overflow: hidden;
        box-shadow: 5px 5px 5px #a1a1a1;
        content: '\00bb';
    }

    .btn-send:hover{
      background-color: var(--bg-dark-send);
      transition: 0.5s;
        overflow: hidden;
        box-shadow: 5px 5px 5px #a1a1a1;
        content: '\00bb';
    }

     .btn-what:hover{
      background-color: var(--bg-dark-what);
      transition: 0.5s;
        overflow: hidden;
        box-shadow: 5px 5px 5px #a1a1a1;
        content: '\00bb';
    }

        .btn-download:hover{
      background-color: var(--bg-dark-download);
      transition: 0.5s;
        overflow: hidden;
        box-shadow: 5px 5px 5px #a1a1a1;
        content: '\00bb';
    }
    
/******************************Un estilo ************************************/

 .button_slide {
  color: #FFF;
  border: 2px solid rgb(153, 18, 77);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  background-color: #911b4b;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
  width: 350px;
  height: 60px;
}

.slide_down:hover {
  box-shadow: inset 0 100px 0 0 #99124d;
  /*class="button_slide slide_down"*/
}





.slide_diagonal:hover {
  box-shadow: inset 400px 50px 0 0 #D80286;
  /*class="button_slide slide_diagonal"*/
}

#outer {
  width: 364px;
  margin: 50px auto 0 auto;
  text-align: center;
}

/************************************************************************************************************/
 .button_send {
  color: #FFF;
  border: 2px solid var(--bg-light-send);;
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  background-color: var(--bg-light-send);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--bg-dark-send);
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
  width: 350px;
  height: 60px;
}
.slide_send_right:hover {
  box-shadow: inset 400px 0 0 0 var(--bg-dark-send);
  /*class="button_slide slide_right"*/
}

/************************************************************************************************************/
 .button_what {
  color: #FFF;
  border: 2px solid var(--bg-light-what);;
  border-radius: 0px;
  padding: 14px 32px;
  display: inline-block;
  background-color: var(--bg-light-what);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--bg-dark-what);
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
  width: 350px;
  height: 60px;
}
.slide_what_left:hover {
  box-shadow: inset 0 0 0 50px var(--bg-dark-what);
  /*class="button_slide slide_left"*/
}