/* Estilos globais para o corpo da página */
body {
  font-family: "Montserrat", sans-serif; /* Define a fonte principal */
  /* Gradiente radial para o fundo, criando um efeito visual atraente */
  background-image: radial-gradient(
    circle at 70% 30%,
    #1e1c27 0%,
    #0c0a07 100%
  );
  background-size: cover; /* Garante que a imagem de fundo cubra toda a área */
  background-position: center center; /* Centraliza a imagem de fundo */
  background-repeat: no-repeat; /* Evita a repetição da imagem de fundo */
  background-attachment: fixed; /* Fixa a imagem de fundo enquanto a página rola */
  color: #7ec7f9; /* Cor padrão do texto */
}

/* Estilos para os botões de link */
.link-button {
  background-color: #292a35; /* Cor de fundo do botão */
  border-radius: 0.5rem; /* Borda arredondada */
  padding: 0.5rem 0.5rem; /* Espaçamento interno */
  display: flex; /* Usa flexbox para alinhar conteúdo */
  align-items: center; /* Alinha itens verticalmente ao centro */
  text-decoration: none; /* Remove sublinhado padrão de links */
  color: #cacaca; /* Cor do texto do link */
  font-weight: 600; /* Peso da fonte */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidade */
  /* Transições suaves para efeitos de hover */
  transition:
    transform 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

/* Efeitos de hover para os botões de link */
.link-button:hover {
  transform: translateY(
    -2px
  ); /* Move o botão ligeiramente para cima no hover */
  background-color: #372a4c; /* Altera a cor de fundo no hover */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Aumenta a sombra no hover */
}

/* Estilos para o placeholder do ícone dentro dos botões */
.icon-placeholder {
  width: 50px; /* Largura fixa */
  height: 50px; /* Altura fixa */
  margin-right: 1rem; /* Espaçamento à direita */
  border-radius: 0.25rem; /* Borda levemente arredondada */
  flex-shrink: 0; /* Impede que a imagem encolha */
  object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
}

/* Área de conteúdo dentro do botão, para o texto */
.button-content-area {
  flex-grow: 1; /* Permite que esta área ocupe o espaço disponível */
  display: flex; /* Usa flexbox para alinhar o texto */
  align-items: center; /* Alinha o texto verticalmente ao centro */
  position: relative; /* Necessário para posicionamento absoluto de elementos filhos, se houver */
  height: 100%; /* Ocupa a altura total do pai */
  min-width: 0; /* Permite que o conteúdo encolha se necessário */
}

/* Estilos para o texto dentro dos botões */
.button-text {
  white-space: nowrap; /* Impede que o texto quebre linha */
  overflow: hidden; /* Oculta o texto que excede a largura */
  text-overflow: ellipsis; /* Adiciona reticências (...) para texto cortado */
  transition: opacity 0.3s ease-in-out; /* Transição suave para opacidade */
  text-align: center; /* Centraliza o texto */
  flex-grow: 1; /* Permite que o texto ocupe o espaço disponível */
  min-width: 0; /* Permite que o texto encolha se necessário */
}

/* Estilos para os títulos das categorias */
.category-title {
  font-size: 1.5rem; /* Tamanho da fonte */
  font-weight: 700; /* Peso da fonte (negrito) */
  margin-top: 0; /* Remove margem superior padrão */
  margin-bottom: 1rem; /* Margem inferior */
  text-align: center; /* Centraliza o texto */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Sombra de texto para destaque */
}

/* Classes utilitárias para sombra de texto */
.text-shadow-strong {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra de texto mais forte */
}

.text-shadow-medium {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Sombra de texto média */
}