.gb-btn.btc-purple {
  --base1: #A79BDB !important; 
  --base2: #8477BC !important;
  --brilho: #a493f7 !important;
  --borda: #a38be4 !important;

}

.gb-btn.btc-darkpurple {
  --base1: #9288c0 !important;
  --base2: #62598f !important;
  --brilho: #857cb3 !important;
  --borda: #a39dc2 !important;
}

.gb-btn.btc-green {
  --base1: #91A667!important; 
  --base2: #758552 !important;
  --brilho: #97ac6c !important;
  --borda: #d1dabb !important;
}

.gb-btn.btc-lightblue {
  --base1: #72A5D3!important; 
  --base2: #4d7191 !important;
  --brilho: #6a9ac4 !important;
  --borda: #d1dabb !important;
}

.gb-btn.btc-red {
  --base1: #DB6767 !important; 
  --base2: #833131 !important;
  --brilho: #b35454 !important;
  --borda: #d1dabb !important;
}

.gb-btn {
  --base1: #1b65d8;    /* azul médio */
  --base2: #103d8c;    /* azul escuro */
  /*--borda: #d1dabb; */   /* dourado quente */
  --borda: #66b3ff;
  --brilho: #66b3ff;   /* luz do hover */

  display: inline-block;
  position: relative;
  padding: 14px 15px;
  font-family: "Trebuchet MS", "Orbitron", sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to bottom, var(--base1), var(--base2));
  border: 2px solid var(--borda);
  border-radius: 8px;
  box-shadow: 0 0 1px #bdc5a9;
  cursor: pointer;
  transition: all .15s ease;
  overflow: hidden;
}


/* brilho superior */
.gb-btn::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5%;
  width: 90%;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  border-radius: 8px;
  pointer-events: none;
}

/* interações */
.gb-btn:hover {
  background: linear-gradient(to bottom, var(--brilho), var(--base1));
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.11);
  /*transform: translateY(-2px);
  box-shadow:
    0 6px 0 #8a5a00,
    0 10px 16px rgba(0,0,0,0.4),
    inset 0 3px 6px rgba(255,255,255,0.4);*/
}

.gb-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 #919781,
    inset 0 1px 2px rgba(0,0,0,0.4);
}