.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 0.2rem solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base),
    border-color var(--transition-base);
}

/* Evita que `a:hover` (Bootstrap / reset) subraye el botón o cambie su color. */
.btn:hover,
.btn:focus-visible {
  text-decoration: none;
}

/* Anula el aro azul y la sombra que Bootstrap añade a .btn en hover, foco y clic. */
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active {
  box-shadow: none;
}

.btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Tamaños */
.btn--xs { padding: 0.6rem 1.2rem; font-size: 1.2rem; }
.btn--sm { padding: 0.8rem 1.6rem; font-size: 1.3rem; }
.btn--md { padding: 0 2.4rem;   font-size: 1.4rem; height: var(--button-height); }
.btn--lg { padding: 0 3.2rem;   font-size: 1.6rem; height: var(--button-height); }

/* Estilos */
.btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-dark);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-on-dark);
}
.btn--primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--color-text-on-dark);
}

.btn--secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-on-secondary);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: var(--color-text-on-secondary);
}
.btn--secondary:active {
  background-color: var(--color-secondary-active);
  border-color: var(--color-secondary-active);
  color: var(--color-text-on-secondary);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--outline:hover,
.btn--outline:focus-visible,
.btn--outline:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.btn--outline-secondary {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-primary);
}
.btn--outline-secondary:hover,
.btn--outline-secondary:focus-visible,
.btn--outline-secondary:active {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-on-secondary);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
}
.btn--ghost:hover,
.btn--ghost:focus-visible,
.btn--ghost:active {
  background-color: rgba(107, 42, 16, 0.08);
  border-color: transparent;
  color: var(--color-primary);
}

.btn--whatsapp {
  background-color: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
  color: var(--color-text-on-dark);
}
.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  background-color: var(--color-whatsapp-hover);
  border-color: var(--color-whatsapp-hover);
  color: var(--color-text-on-dark);
}
.btn--whatsapp:active {
  background-color: var(--color-whatsapp-active);
  border-color: var(--color-whatsapp-active);
  color: var(--color-text-on-dark);
}

.btn__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}