1 - Criando um botão estilizado com CSS

HTML:

<a href = "https://www.alura.com.br/planos-cursos-online?srsltid=AfmBOoo-m84tkwMqN2n67LQ5c40liQMXnIen2h1UN_sjE2QFtYPzyZUR" class = "container__botao"> Assine por 12x de R$ 120,00* </a>

CSS:

.container__botao {

    background-color: var(--cor-destaque-botao);
    border-radius: 8px;
    padding: 1em;
    font-size: 16px;
    text-decoration: none;
    color: var(--cor-primaria);
}

Dúvida: Na correção da professora, ela usou "display: block" Como funciona esse comando?

2 - Ajustando o layout do botão

CSS:

.container__botao {

    display: block;
}

HTML:

<div> </div> na section

Dúvida: Usar "display: flex" também funcionaria?

3 - Ajustando o layout com grid CSS

CSS:

.container {

    height: 100vh;
    display: grid;
    grid-template-columns: 45%;
}

4 - Criando um botão secundário com CSS

CSS:

.container__botao {

   [...]
   
    text-align: center;
}

.botao__secundario {

    background-color: transparent;
    border: 2px solid var(--cor-primaria);
}

HTML:

                    <a href = "https://www.alura.com.br/planos-cursos-online?srsltid=AfmBOoo-m84tkwMqN2n67LQ5c40liQMXnIen2h1UN_sjE2QFtYPzyZUR" class = "container__botao botao__secundario"> Assinar somente o Alura+ </a>

5 - Personalizando fontes e estilos no CSS

HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

CSS:

.body {

    background-color: var(--cor-fundo);
    color: var(--cor-primaria);
    font-family: var(--fonte-principal);
    font-weight: 400;
}

.container__aviso {

    color: var(--cor-secundaria);
    font-size: 12px;
}

6 - Estilizando títulos e botões

CSS:

.container__titulo {

    font-size: 28px;
    font-weight: 700;
}

HTML:

<h1 class = "container__titulo"> Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único. </h1>

Victor, seu código está bem organizado e fácil de acompanhar.

Gostei do cuidado com estilos, cores e tipografia, e da forma como você criou botões reutilizáveis e variações como o secundário. O uso de variáveis CSS deixa tudo mais consistente.

Sobre os display, <a> é inline por padrão, então não aceita padding e margens como você espera. Por isso usar display: block faz o botão ocupar a largura completa e facilita o alinhamento. flex também funciona, mas só é necessário se quiser alinhar elementos internos, como ícone e texto, dentro do botão.

Um ponto a ajustar é a classe .body: ela não vai estilizar a tag <body> corretamente, então o ideal é usar body { ... }. Quanto ao grid, definir grid-template-columns: 45% funciona, mas pode causar problemas de responsividade em telas menores, porque sobra espaço vazio ou pode quebrar o layout. É bom testar com diferentes tamanhos de tela ou usar unidades relativas e fr para distribuir melhor o espaço.

No geral, seu código está limpo e funcional, só pequenos ajustes para deixar mais robusto!