/* ============================================
   BOTÕES — Componente reutilizável
   ============================================ */

.giss-btn {
  font-family: var(--fonte-principal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--peso-semibold);
  line-height: 1;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  transition: var(--transicao);
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid transparent;
}

/* ---------- BOTÃO PRIMÁRIO (azul preenchido) ---------- */
.giss-btn--primario {
  background-color: var(--giss-azul);
  color: var(--giss-branco);
  border-color: var(--giss-azul);
}

.giss-btn--primario:hover {
  background-color: var(--giss-azul-escuro);
  border-color: var(--giss-azul-escuro);
  transform: translateY(-1px);
  box-shadow: var(--sombra-forte);
}

/* ---------- BOTÃO OUTLINE (borda azul) ---------- */
.giss-btn--outline {
  background-color: transparent;
  color: var(--giss-azul);
  border-color: var(--giss-azul);
}

.giss-btn--outline:hover {
  background-color: var(--giss-azul);
  color: var(--giss-branco);
}

/* ---------- BOTÃO OUTLINE BRANCO (fundo escuro) ---------- */
.giss-btn--outline-branco {
  background-color: transparent;
  color: var(--giss-branco);
  border-color: var(--giss-branco);
}

.giss-btn--outline-branco:hover {
  background-color: var(--giss-branco);
  color: var(--giss-azul);
}

/* ---------- BOTÃO BRANCO SÓLIDO ---------- */
.giss-btn--branco {
  background-color: var(--giss-branco);
  color: var(--giss-azul);
  border-color: var(--giss-branco);
}

.giss-btn--branco:hover {
  background-color: var(--giss-cinza-claro);
  transform: translateY(-1px);
}

/* ---------- TAMANHOS ---------- */
.giss-btn--sm {
  padding: 10px 20px;
  font-size: var(--fs-xs);
}

.giss-btn--lg {
  padding: 18px 36px;
  font-size: var(--fs-body);
}

.giss-btn--block {
  width: 100%;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 768px) {
  .giss-btn {
    padding: 12px 22px;
  }

  .giss-btn--lg {
    padding: 16px 28px;
  }
}