BUG NO MEDIA QUERIES

Oi, Hallyson! Como vai?

Agradeço por compartilhar sua dúvida com a comunidade Alura.

Conferi seu CSS e agora está funcionando direitinho! O que estava atrapalhando o sumiço dos ícones era conflito entre as regras de exibição para .opçoes e .container__imagem-transparent. O código anterior repetia essas classes com display diferente, o que confundia o navegador na hora de aplicar o estilo certo para cada tamanho de tela.

Veja como o CSS ficou mais claro agora:

/* Telas pequenas */
.opçoes {
  display: none !important;
}
.container__imagem-transparent {
  display: block;
}

/* Telas grandes (a partir de 1024px) */
@media screen and (min-width: 1024px) {
  .opçoes {
    display: flex !important;
  }
  .container__imagem-transparent {
    display: none;
  }
}

O que esse código faz:

• Esconde o menu .opçoes em telas pequenas e mostra apenas a imagem transparente.
• Em telas maiores (largura mínima de 1024px), ele inverte: mostra o menu .opçoes e esconde a imagem.

Esse uso do !important também foi decisivo pra garantir que nenhuma outra regra sobrescrevesse o que está definido nesses blocos.

Vou anexar o código completo corrigido do seu header.css no tópico abaixo pois não irá caber aqui.

O código completo do header.css para que possa copiar:

.cabecalho__menu-hamburguer{
    width: 24px; /*Largura*/
    height:24px; /*altura*/
    background-image: url("../assets/Menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block; /*Permite está tudo em altura e lagura*/
}

.cabecalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /*Isso aqui serve para manter o algo em qualquer lugar, cima, baixo, direita , esquerda.*/
}

.container {
    display: flex;
    align-items: center;
}

.container__imagem {
    padding: 1em;
}

/*Seção de edição do  Menu Oculto.*/

.lista-menu{  /*Isso aqui serve para ocultar o Menu */
    display: none;
    position: absolute; /*Segue o raciocinio da linha 15 de manter o Menu pra baixo. PARA FICAR DIFENTE DE ESTATICO*/
    top: 100%;
    width: 50vw; /*Aumentou o tamanho do menu*/
}

.container__botao:checked ~ .lista-menu{ /* prestar atenção nisso/ estudar isso. Container_botao chamou o imput. Checked é uma pseudoclasse. O ~ é combinador que vai combinar o elemento que vem em seguida com o de antes. É quase como uma incondicional.*/
    display: block;
}

.lista-menu__titulo,
.lista-menu__item{
    padding: 1em;
    background-color: var(--branco);
}

.lista-menu__titulo{
    color: var(--laranja);
    font-weight: 700;
}

.lista-menu__link{
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /*os webkit pra funcionar em outros navegadores*/
    background-clip: text; /*mantem o backgorund apenas onde tem texto*/
    text-transform: uppercase;

}

.container__botao {
    display: none; /*Vai retirar o botão de check visivelmente*/
}

.container__titulo { /*Para o titulo não aparece quando estiver no modo celular*/
    display: none;
}

/* Mostra a imagem transparente só em telas pequenas */
.container__imagem-transparent {
    display: block;
}

/* Esconde as opções em telas pequenas */
.opçoes {
    display: none !important;
}

@media screen and (min-width: 1024px) { /*Isso se chama MEDIA QUERY PARA USAR EM TAMANHO DE TELA. SCREEN É TELA. AND É PARA O MINIMO SER O QUE FOI PROPOSTO A SEGUIR(QUANDO O MINIMO DE TELA, TRADUÇÃO LITERAL. quando faz do tamanho do computador e depois diminui para o tamanho da tela usasse max-width. */
    .container__titulo, 
    .container__titulo--negrito {
        font-family: var(--fonte-secundaria);
        font-size: 30px;
    }   
    /* Mostra as opções em telas grandes */
    .opçoes {
        display: flex !important;
    }
    /* Esconde a imagem transparente em telas grandes */
    .container__imagem-transparent {
        display: none;
    }
}

.container__titulo {
    font-weight: 400;
    display: block;
}

.container__titulo--negrito{
    font-weight: 700;
}

.opçoes {
    display: flex;
}

.opçoes__item {
    padding: 0 1em;
    text-transform: uppercase;
}

.opçoes__link {
    text-decoration: none;
    color: #000000;
}

.cabecalho__menu-hamburguer{
    display: none;
}

.opçoes__botao:checked ~.lista-menu { /*Muito interessante aprender isso. SERVE PARA CLICAR NOS LINK DO MENU E  EM CADA LINK ABRIR UM MENU*/
    display: block;
    width: auto;
}

.opçoes__botao {
    display: none;
}

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!