/*
 * COMPONENTES REUTILIZÁVEIS
 * Botões, tags, cards genéricos e outros elementos de UI compartilhados entre seções.
 */

/* ================================================
   BOTÕES
   ================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3) var(--espaco-6);
  border-radius: var(--raio-full);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.02em;
  transition: all var(--transicao-normal);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
}

/* Botão primário */
.btn--primario {
  background-color: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  border-color: var(--cor-primaria);
}

.btn--primario:hover {
  background-color: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(10, 132, 255, 0.35);
}

/* Botão contorno */
.btn--contorno {
  background-color: transparent;
  color: var(--cor-texto-invertido);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--contorno:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Botão escuro (sobre fundo claro) */
.btn--escuro {
  background-color: var(--cor-secundaria);
  color: var(--cor-texto-invertido);
  border-color: var(--cor-secundaria);
}

.btn--escuro:hover {
  background-color: #2c2c2e;
  transform: translateY(-1px);
  box-shadow: var(--sombra-md);
}

/* Botão grande */
.btn--grande {
  padding: var(--espaco-4) var(--espaco-8);
  font-size: var(--texto-base);
}

/* ================================================
   TAGS / BADGES
   ================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-full);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: rgba(10, 132, 255, 0.1);
  color: var(--cor-primaria);
}

.tag--verde {
  background-color: rgba(48, 209, 88, 0.12);
  color: #1a8a37;
}

.tag--cinza {
  background-color: var(--cor-borda);
  color: var(--cor-texto-suave);
}

/* ================================================
   TÍTULOS DE SEÇÃO
   ================================================ */

.secao-titulo {
  font-size: var(--texto-3xl);
  font-weight: var(--peso-extrabold);
  color: var(--cor-texto);
  line-height: var(--linha-apertada);
  margin-bottom: var(--espaco-4);
}

.secao-subtitulo {
  font-size: var(--texto-lg);
  color: var(--cor-texto-suave);
  line-height: var(--linha-relaxada);
  max-width: 55ch;
}

.secao-cabecalho {
  margin-bottom: var(--espaco-12);
}

.secao-cabecalho--centro {
  text-align: center;
}

.secao-cabecalho--centro .secao-subtitulo {
  margin-inline: auto;
}

/* Linha decorativa abaixo do título */
.secao-titulo::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background-color: var(--cor-primaria);
  border-radius: var(--raio-full);
  margin-top: var(--espaco-4);
}

.secao-cabecalho--centro .secao-titulo::after {
  margin-inline: auto;
}

/* ================================================
   CARDS GENÉRICOS
   ================================================ */

.card {
  background-color: var(--cor-fundo-card);
  border-radius: var(--raio-lg);
  border: 1px solid var(--cor-borda);
  padding: var(--espaco-6);
  transition: transform var(--transicao-suave), box-shadow var(--transicao-suave);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-card-hover);
}

/* ================================================
   DIVISOR
   ================================================ */

.divisor {
  border: none;
  border-top: 1px solid var(--cor-borda);
  margin: var(--espaco-16) 0;
}

/* ================================================
   SPINNER DE LOADING
   ================================================ */

.loading-spinner {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}