/* ==========================================================================
   COMPONENTE: BOTÕES
   --------------------------------------------------------------------------
   - Padrão de design system: Conteúdo centrado como bloco único (label + ícone).
   - Efeito de hover a 45°: Portas oblíquas suaves e simétricas (500ms).
   - Mobile: Largura tátil confortável com centralização coesa, sem vazios centrais.
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6875rem var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  overflow: hidden;   /* contém as portas dentro dos limites do botão */
  isolation: isolate; /* cria contexto de empilhamento local para o z-index */
  text-align: center;
}

.btn--primary {
  color: var(--color-white);
  background-color: var(--color-blue-primary);
  border: 1px solid var(--color-blue-primary);
  border-radius: 999px; /* formato pill */
  gap: var(--space-3);
  justify-content: center; /* Garante que texto + ícone fiquem sempre agrupados no centro */
  padding: 0.6875rem var(--space-3) 0.6875rem var(--space-5);
  transition:
    color 350ms ease,
    border-color 350ms ease;
}

/* --------------------------------------------------------------------
   RESPONSIVO — MOBILE (<768px)
   --------------------------------------------------------------------
   Garante bloco único centrado no mobile, evitando o efeito de label
   colado à esquerda e ícone empurrado à direita com espaço vazio.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .btn--primary,
  .btn--primary.menu-drawer__cta {
    width: 100%;
    max-width: 100%;
    justify-content: center; /* Bloco único centrado (NN/g & Material Design) */
    gap: var(--space-3);
    padding: 0.6875rem var(--space-3) 0.6875rem var(--space-4);
  }
}

/* --------------------------------------------------------------------
   PORTAS A 45 GRAUS (ABERTURA E FECHO 100% VISÍVEIS)
   -------------------------------------------------------------------- */
.btn--primary::before,
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: calc(50% + 45px);
  background-color: var(--color-gold-dark);
  transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
  z-index: -1;
  pointer-events: none;
}

/* Porta esquerda: ancorada no centro oblíquo a 45° */
.btn--primary::before {
  right: calc(50% - 1px);
  transform-origin: right center;
  transform: skewX(-45deg) scaleX(0);
}

/* Porta direita: ancorada no centro oblíquo a 45° */
.btn--primary::after {
  left: 50%;
  transform-origin: left center;
  transform: skewX(-45deg) scaleX(0);
}

/* No hover: escala até 1.0 (exatamente até aos bordos do botão) */
.btn--primary:hover::before,
.btn--primary:hover::after,
.btn--primary:focus-visible::before,
.btn--primary:focus-visible::after {
  transform: skewX(-45deg) scaleX(1);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--color-navy-deep);
  border-color: var(--color-gold-dark);
}

/* --------------------------------------------------------------------
   BADGE DE ÍCONE DENTRO DO BOTÃO PRIMÁRIO
   -------------------------------------------------------------------- */
.btn__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;  /* 34px */
  height: 2.125rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-cream);
  overflow: hidden;
}

.btn__icon-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem; /* 16px */
  height: 1rem;
  stroke: var(--color-navy-deep);
  transition: transform 450ms cubic-bezier(0.35, 0, 0.25, 1);
}

.btn__icon-arrow--default {
  transform: translate(-50%, -50%);
}

.btn__icon-arrow--in {
  transform: translate(-240%, 240%);
}

.btn--primary:hover .btn__icon-arrow--default,
.btn--primary:focus-visible .btn__icon-arrow--default {
  transform: translate(240%, -240%);
}

.btn--primary:hover .btn__icon-arrow--in,
.btn--primary:focus-visible .btn__icon-arrow--in {
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------
   VARIANTE SECUNDÁRIA
   -------------------------------------------------------------------- */
.btn--secondary {
  color: var(--color-navy-deep);
  background-color: transparent;
  border: 1px solid var(--color-navy-deep);
  transition:
    color 350ms ease,
    border-color 350ms ease;
}

.btn--secondary::before,
.btn--secondary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: calc(50% + 45px);
  background-color: var(--color-navy-deep);
  transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
  z-index: -1;
  pointer-events: none;
}

.btn--secondary::before {
  right: calc(50% - 1px);
  transform-origin: right center;
  transform: skewX(-45deg) scaleX(0);
}

.btn--secondary::after {
  left: 50%;
  transform-origin: left center;
  transform: skewX(-45deg) scaleX(0);
}

.btn--secondary:hover::before,
.btn--secondary:hover::after,
.btn--secondary:focus-visible::before,
.btn--secondary:focus-visible::after {
  transform: skewX(-45deg) scaleX(1);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  color: var(--color-white);
}

/* --------------------------------------------------------------------
   ACESSIBILIDADE: PREFERS REDUCED MOTION
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn__icon-arrow,
  .btn--primary::before,
  .btn--primary::after,
  .btn--secondary::before,
  .btn--secondary::after {
    transition: none !important;
  }
}