.btg[hidden] { display: none; }
.btg {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px;
  background: var(--ok); color: #06301a;
  font-family: var(--fonte); font-weight: 800; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  cursor: pointer; user-select: none; flex: none;
  transition: transform .12s, box-shadow .12s, filter .16s;
}





.btg[hidden] { display: none; }

.btg svg { flex: none; }
.btg:hover { filter: brightness(1.06); }
.btg:focus-visible { outline: 2px solid var(--txt); outline-offset: 3px; }





.btg-aba {
  height: 40px; padding: 0 22px; gap: 8px; border-radius: 12px;
  font-size: 14px; letter-spacing: 1.2px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ok) 45%, #000),
              0 0 20px -2px color-mix(in srgb, var(--ok) 55%, transparent);
  animation: btg-resp 2.6s ease-in-out infinite;
}
.btg-aba svg { width: 18px; height: 18px; }
.btg-aba:hover { transform: translateY(-1px); }
.btg-aba:active { transform: translateY(4px);
                  box-shadow: 0 0 0 color-mix(in srgb, var(--ok) 45%, #000); }




.btg-topo {
  height: 30px; padding: 0 13px; gap: 7px; border-radius: 9px;
  font-size: 12px; letter-spacing: 1px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ok) 45%, #000),
              0 0 16px -2px color-mix(in srgb, var(--ok) 55%, transparent);
  animation: btg-resp-topo 2.6s ease-in-out infinite;
}
.btg-topo svg { width: 15px; height: 15px; }
.btg-topo:active { transform: translateY(3px);
                   box-shadow: 0 0 0 color-mix(in srgb, var(--ok) 45%, #000); }






@media (max-width: 1399px) {
  .btg-topo { width: 30px; padding: 0; gap: 0; }
  .btg-topo .btg-rot { display: none; }
}










@keyframes btg-resp {
  0%, 100% { box-shadow: 0 4px 0 color-mix(in srgb, var(--ok) 45%, #000),
                         0 0 10px -3px color-mix(in srgb, var(--ok) 45%, transparent); }
  50%      { box-shadow: 0 4px 0 color-mix(in srgb, var(--ok) 45%, #000),
                         0 0 26px 2px color-mix(in srgb, var(--ok) 60%, transparent); }
}
@keyframes btg-resp-topo {
  0%, 100% { box-shadow: 0 3px 0 color-mix(in srgb, var(--ok) 45%, #000),
                         0 0 8px -3px color-mix(in srgb, var(--ok) 45%, transparent); }
  50%      { box-shadow: 0 3px 0 color-mix(in srgb, var(--ok) 45%, #000),
                         0 0 22px 1px color-mix(in srgb, var(--ok) 60%, transparent); }
}




.btg::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  animation: btg-varre 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btg-varre {
  0%, 62% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

.btg svg { animation: btg-pula 3s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes btg-pula {
  0%, 72%, 100% { transform: translateY(0) rotate(0); }
  78% { transform: translateY(-4px) rotate(-7deg); }
  86% { transform: translateY(0) rotate(0); }
  91% { transform: translateY(-2px); }
}




@media (prefers-reduced-motion: reduce) {
  .btg { transition: none; }
  .btg-aba { animation: none;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--ok) 45%, #000),
                0 0 20px -2px color-mix(in srgb, var(--ok) 55%, transparent); }
  .btg-topo { animation: none;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--ok) 45%, #000),
                0 0 16px -2px color-mix(in srgb, var(--ok) 55%, transparent); }
  .btg::after { animation: none; opacity: 0; }
  .btg svg { animation: none; }
  .btg-aba:hover { transform: none; }
}