Meu footer está errado

acrescente no seu css o codigo abaixo

.lista__link a{
    text-decoration: none;
    color: var(--branco-principal);
    margin-left: 1em;
}

text-decoration: none;: Remove a decoração padrão de link, que geralmente é um sublinhado. Com esta regra, os links dentro de elementos com a classe .lista__link não terão sublinhado.

color: var(--branco-principal);: Define a cor do texto dos links. Neste caso, a cor é obtida a partir de uma variável chamada --branco-principal. O uso de variáveis CSS (custom properties) é uma prática comum para tornar o código mais flexível e fácil de manter.

margin-left: 1em;: Adiciona uma margem à esquerda dos links. Isso cria um espaço entre o conteúdo à esquerda dos links e o próprio link. A unidade "em" é relativa ao tamanho da fonte do elemento pai, proporcionando um espaçamento relativo e responsivo.

Rafael,

Por que o text-decoration funciona quando o código está assim:

.lista__link a{
    text-decoration: none;
    color: var(--branco-principal);
    margin-left: 1em;
}

E não funciona quando está assim:

.lista__link {
    text-decoration: none;
    color: var(--branco-principal);
    margin-left: 1em;
}

No primeiro exemplo, o seletor .lista__link a especifica os links dentro de elementos com a classe .lista__link, garantindo que a propriedade text-decoration: none; afete diretamente os links. No segundo exemplo, apenas os elementos com a classe .lista__link são selecionados, então os links dentro deles não são afetados pela propriedade text-decoration: none;.

Obrigada pela explicação, Rafael.