/* Emusys Academy — botões/CTA canônicos. Um único lugar para altura, padding, cor e
   hover de cada variante, usado pelo componente <Button> (src/components/ui/Button.astro)
   e também aplicável via classe direta em componentes React. */

.emu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 48px;
  padding: 0 28px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease, background .18s, border-color .18s, color .18s, box-shadow .18s;
}

.emu-btn--primary {
  background: linear-gradient(100deg, var(--gold), var(--gold-200));
  color: var(--text-on-brand);
  box-shadow: 0 18px 38px -18px rgba(207, 152, 55, .9);
}
.emu-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.emu-btn--primary:active { filter: brightness(0.94); transform: translateY(0); }

.emu-btn--secondary {
  background: var(--surface-card);
  color: var(--gold);
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.emu-btn--secondary:hover { background: var(--surface-brand-subtle); }

.emu-btn--outline {
  background: var(--surface-card);
  color: var(--text-heading);
  border-color: var(--border-strong);
  padding: 0 26px;
}
.emu-btn--outline:hover { border-color: var(--gold); color: var(--gold); }

.emu-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
  padding: 0 26px;
}
.emu-btn--ghost:hover { background: rgba(255, 255, 255, .1); }

/* Modificador de tamanho — usado em CTAs embutidos em cards/banners menores
   (ex: bloco "Case real"), em vez de cada página inventar sua própria altura. */
.emu-btn--compact {
  height: 44px;
  padding: 0 24px;
  font-size: 14px;
}

/* Modificador de tamanho — CTA principal de destaque (ex: hero). */
.emu-btn--lg {
  height: 60px;
  padding: 0 40px;
  font-size: 18px;
  border-radius: 14px;
}

/* Card-botão grande, usado quando a escolha em si é o conteúdo principal da
   tela (ex: /comprar) — título + subtexto dentro do próprio botão, em vez de
   um botão pequeno ao lado de uma explicação separada. */
.emu-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 28px 24px;
  border-radius: 18px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, border-color .18s;
}
.emu-choice-card-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.emu-choice-card-sub { font-size: 13.5px; font-weight: 500; line-height: 1.4; }

.emu-choice-card--primary {
  background: linear-gradient(100deg, var(--gold), var(--gold-200));
  box-shadow: 0 18px 38px -18px rgba(207, 152, 55, .9);
}
.emu-choice-card--primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.emu-choice-card--primary:active { filter: brightness(0.94); transform: translateY(0); }
.emu-choice-card--primary .emu-choice-card-title { color: var(--text-on-brand); }
.emu-choice-card--primary .emu-choice-card-sub { color: var(--text-on-brand); opacity: .72; }

.emu-choice-card--secondary {
  background: linear-gradient(160deg, var(--navy-700), var(--ink));
  border-color: var(--border-strong);
}
.emu-choice-card--secondary:hover { border-color: var(--gold); transform: translateY(-2px); }
.emu-choice-card--secondary:active { transform: translateY(0); }
.emu-choice-card--secondary .emu-choice-card-title { color: var(--text-heading); }
.emu-choice-card--secondary .emu-choice-card-sub { color: var(--text-muted); }

/* Card-botão de método de pagamento — ao contrário do .emu-choice-card, os
   dois lados (à vista / cartão) têm exatamente o mesmo visual, só o texto
   muda, porque nenhuma das opções é "melhor" que a outra. */
.emu-price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 28px 24px;
  border-radius: 18px;
  border: 1px solid var(--border-default);
  background: linear-gradient(160deg, var(--navy-700), var(--ink));
  font-family: var(--font-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, border-color .18s;
}
.emu-price-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.emu-price-card:active { transform: translateY(0); }
.emu-price-card-title { font-size: 16.5px; font-weight: 700; color: var(--text-heading); }
.emu-price-card-strike { font-size: 14px; color: var(--text-muted); text-decoration: line-through; }
.emu-price-card-value { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--gold); }

/* Link de texto com seta, usado no rodapé de cards ("Ver mais →").
   Sem chrome de botão — herda o hover de sublinhado já usado no site. */
.emu-btn-link {
  display: inline-block;
  color: var(--gold);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
}
.emu-btn-link:hover { text-decoration: underline; }