/* ==========================================================================
   Botões 3D (--btn-*) e botão de download do app
   ========================================================================== */

.bgs-button,
.bgs-button-orange-black,
.bgs-button-black-blue,
.btn-orange-black,
.btn-white-orange,
.btn-white-black {
  --btn-shadow-start: 8px;
  --btn-shadow-end: -8px;
  --btn-border-width: 3px;
  --btn-text-hover: var(--btn-text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-min, 50px);
  min-height: var(--btn-min, 50px);
  background: transparent;
  color: var(--btn-color, var(--btn-text));
  text-decoration: none;
  transform: skewX(-5deg);
}

.bgs-button::before,
.bgs-button-orange-black::before,
.bgs-button-black-blue::before,
.btn-orange-black::before,
.btn-white-orange::before,
.btn-white-black::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--btn-face);
  border: var(--btn-border-width) solid var(--btn-edge);
  z-index: -1;
}

.bgs-button::after,
.bgs-button-orange-black::after,
.bgs-button-black-blue::after,
.btn-orange-black::after,
.btn-white-orange::after,
.btn-white-black::after {
  content: '';
  position: absolute;
  top: var(--btn-shadow-start);
  left: var(--btn-shadow-start);
  right: var(--btn-shadow-end);
  bottom: var(--btn-shadow-end);
  background-color: var(--btn-shadow);
  z-index: -2;
}

/* Conteúdo do botão (cada variante usa um conjunto de filhos) */
.bgs-button i,
.bgs-button svg,
.bgs-button span,
.bgs-button-orange-black h2,
.bgs-button-orange-black h5,
.bgs-button-black-blue h2,
.bgs-button-black-blue h5,
.bgs-button-black-blue span,
.btn-orange-black span,
.btn-white-orange span,
.btn-white-black span {
  position: relative;
  z-index: 1;
  transform: skewX(5deg);
}

.bgs-button i,
.bgs-button span,
.bgs-button-orange-black h2,
.bgs-button-orange-black h5,
.bgs-button-black-blue h2,
.bgs-button-black-blue h5,
.bgs-button-black-blue span,
.btn-orange-black span,
.btn-white-orange span,
.btn-white-black span {
  color: var(--btn-text);
}

.bgs-button svg {
  fill: var(--btn-text);
}

.bgs-button span,
.bgs-button-black-blue span {
  padding: 0.4375rem 0.9375rem;
  font-size: 1.5625rem;
  font-weight: bold;
}

.bgs-button-orange-black h2,
.bgs-button-orange-black h5,
.bgs-button-black-blue h2,
.bgs-button-black-blue h5 {
  margin: 0;
}

/* Hover: face e sombra trocam de cor */
.bgs-button:hover,
.bgs-button-orange-black:hover,
.bgs-button-black-blue:hover {
  text-decoration: none;
}

.bgs-button:hover::before,
.bgs-button-orange-black:hover::before,
.bgs-button-black-blue:hover::before,
.btn-orange-black:hover::before,
.btn-white-orange:hover::before,
.btn-white-black:hover::before {
  background-color: var(--btn-face-hover);
}

.bgs-button:hover::after,
.bgs-button-orange-black:hover::after,
.bgs-button-black-blue:hover::after,
.btn-orange-black:hover::after,
.btn-white-orange:hover::after,
.btn-white-black:hover::after {
  background-color: var(--btn-shadow-hover);
}

.bgs-button:hover i,
.bgs-button:hover span,
.bgs-button-orange-black:hover h2,
.bgs-button-orange-black:hover h5,
.bgs-button-black-blue:hover h2,
.bgs-button-black-blue:hover h5,
.bgs-button-black-blue:hover span,
.btn-orange-black:hover span,
.btn-white-orange:hover span,
.btn-white-black:hover span {
  color: var(--btn-text-hover);
}

.bgs-button:hover svg {
  fill: var(--btn-text-hover);
}

/* Active: a face "afunda" até a posição da sombra */
.bgs-button:active::before,
.bgs-button-orange-black:active::before,
.bgs-button-black-blue:active::before,
.btn-orange-black:active::before,
.btn-white-orange:active::before,
.btn-white-black:active::before {
  top: var(--btn-shadow-start);
  left: var(--btn-shadow-start);
  right: var(--btn-shadow-end);
  bottom: var(--btn-shadow-end);
  background-color: var(--btn-face-hover);
}

.bgs-button:active i,
.bgs-button:active span,
.bgs-button-orange-black:active h2,
.bgs-button-orange-black:active h5,
.bgs-button-black-blue:active h2,
.bgs-button-black-blue:active h5,
.bgs-button-black-blue:active span,
.btn-orange-black:active span,
.btn-white-orange:active span,
.btn-white-black:active span {
  color: var(--btn-text-hover);
  transform: skewX(5deg) translate(var(--btn-shadow-start), var(--btn-shadow-start));
}

.bgs-button:active svg {
  fill: var(--btn-text-hover);
  transform: skewX(5deg) translate(var(--btn-shadow-start), var(--btn-shadow-start));
}

/* Tamanho P: ícone (rodapé, redes sociais) */
.bgs-button {
  --btn-min: 45px;
  --btn-shadow-start: 5px;
  --btn-shadow-end: -5px;
  --btn-border-width: 0;
  --btn-color: var(--color-orange);
  --btn-face: var(--color-white);
  --btn-shadow: var(--color-orange);
  --btn-text: var(--color-black-pure);
  --btn-face-hover: var(--color-orange);
  --btn-shadow-hover: var(--color-white);
  --btn-text-hover: var(--color-white);
  font-size: 1.75rem;
}

.bgs-button--sm {
  --btn-min: 36px;
  font-size: 1.1rem;
}

/* Tamanho G: títulos h2/h5 */
.bgs-button-orange-black,
.bgs-button-black-blue {
  --btn-shadow-start: 10px;
  --btn-shadow-end: -5px;
  --btn-edge: var(--color-black-pure);
  --btn-text: var(--color-white);
  font-size: 1.75rem;
}

.bgs-button-orange-black {
  --btn-face: var(--color-orange);
  --btn-shadow: var(--color-black-pure);
  --btn-face-hover: var(--color-black-pure);
  --btn-shadow-hover: var(--color-orange);
  padding: 1rem 2rem;
}

.bgs-button-black-blue {
  --btn-face: var(--color-black-pure);
  --btn-shadow: var(--color-blue);
  --btn-face-hover: var(--color-blue);
  --btn-shadow-hover: var(--color-black-pure);
}

/* Tamanho M: botões de ação padrão do site */
.btn-orange-black,
.btn-white-orange,
.btn-white-black {
  padding: 0.75rem 2rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.btn-orange-black {
  --btn-face: var(--color-orange);
  --btn-edge: var(--color-black);
  --btn-shadow: var(--color-black);
  --btn-text: var(--color-white);
  --btn-face-hover: var(--color-black-pure);
  --btn-shadow-hover: var(--color-orange);
  border: none;
  outline: none;
  cursor: pointer;
}

.btn-white-orange {
  --btn-face: var(--color-white);
  --btn-edge: var(--color-black-pure);
  --btn-shadow: var(--color-orange);
  --btn-text: var(--color-black-pure);
  --btn-face-hover: var(--color-orange);
  --btn-shadow-hover: var(--color-white);
  --btn-text-hover: var(--color-white);
}

.btn-white-black {
  --btn-face: var(--color-white);
  --btn-edge: var(--color-black-pure);
  --btn-shadow: var(--color-black-pure);
  --btn-text: var(--color-black-pure);
  --btn-face-hover: var(--color-black-pure);
  --btn-shadow-hover: var(--color-white);
  --btn-text-hover: var(--color-white);
}

/* Botão desabilitado (qualquer variante) */
.bgs-btn-disable,
.btn-disabled {
  --btn-face: var(--color-disabled);
  --btn-face-hover: var(--color-disabled);
  --btn-text: var(--color-gray);
  --btn-text-hover: var(--color-gray);
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

@media (max-width: 768px) {
    .bgs-button {
        font-size: 1.3rem;
        min-width: 40px;
        min-height: 40px;
      }
}

/* App Download Button - Efeito similar ao bgs-button sem inclinação e sem troca de cor */
.app-download-button {
    position: relative;
    display: inline-block;
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.app-download-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 0;
    transition: all 0.3s ease;
}

.app-download-button::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: -5px;
    bottom: -5px;
    background-color: var(--color-orange);
    z-index: -1;
}

.app-download-button img {
    position: relative;
    z-index: 1;
    display: block;
    transition: transform 0.3s ease;
}

.app-download-button:hover::after {
    text-decoration: none;
    background-color: var(--color-blue);
}

.app-download-button:active::before,
.app-download-button:active::after {
    top: 5px;
    left: 5px;
    right: -5px;
    bottom: -5px;
}

.app-download-button:active img {
    transform: translate(5px, 5px);
}

.app-download-img {
    max-width: 200px;
    width: 100%;
}