/* Estilo para o título TAGS (usando a nova classe para maior especificidade) */
h4.custom-tags-title { /* Alterado para h4.custom-tags-title */
    font-size: 2em; /* Ou o tamanho que preferir para "TAGS" */
    font-weight: bold;
    text-align: center; /* Centraliza o título, se desejar */
    margin-bottom: 20px; /* Espaço abaixo do título */
    text-transform: uppercase; /* Deixa em maiúsculas */
}

/* Estilo para a lista de tags */
.keywords-tags {
    list-style: none; /* Remove os marcadores padrão da lista */
    padding: 0; /* Remove o padding padrão da lista */
    margin: 0; /* Remove a margem padrão da lista */
    display: flex; /* Transforma a lista em um container flexbox */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha se não houver espaço */
    justify-content: center; /* Centraliza as pílulas na linha, se houver espaço sobrando */
}

/* Estilo para cada item da lista (cada pílula) */
.keywords-tags li {
    background-color: #f8f8f8; /* Cor de fundo da pílula (cinza claro/branco) */
    border: 1px solid #ddd; /* Borda fina e clara */
    border-radius: 20px; /* Arredonda as bordas para criar o formato de pílula */
    padding: 8px 15px; /* Espaçamento interno dentro de cada pílula (vertical horizontal) */
    display: inline-block; /* Garante que o padding e border-radius funcionem bem */
    white-space: nowrap; /* Impede que o texto da tag quebre em várias linhas dentro da pílula */
    margin-right: 10px; /* Espaço à direita de cada pílula */
    margin-bottom: 10px; /* Espaço abaixo de cada pílula (importante para o wrap) */
}

/* Estilo para o link dentro da pílula */
.keywords-tags li a {
    text-decoration: none; /* Remove o sublinhado do link */
    color: #333; /* Cor do texto (cinza escuro) */
    font-size: 1em; /* Tamanho da fonte do texto da tag */
    font-weight: normal; /* Garante que o texto não seja negrito, a menos que deseje */
}

/* Efeito ao passar o mouse (opcional) */
.keywords-tags li:hover {
    background-color: #e0e0e0; /* Fundo mais escuro ao passar o mouse */
    border-color: #bbb; /* Borda mais escura ao passar o mouse */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
}

.keywords-tags li a:hover {
    color: #000; /* Texto mais escuro ao passar o mouse */
}