Update style.css

[gabbiihv1]

const avanca = document.querySelectorAll('.btn-proximo');

avanca.forEach(button => {
button.addEventListener('click', function(){
const atual = document.querySelector('.ativo');
const proximoPasso = 'passo-' + this.getAttribute('data-proximo');

    atual.classList.remove('ativo');
    document.getElementById(proximoPasso).classList.add('ativo');
})

})

[gabbiihv1]

<title>Em busca da cidade perdida</title>

Um dia desses, dentro de um livro da biblioteca da escola, eu descobri uma carta antiga sobre uma cidade perdida, escondida por riquezas e belezas naturais. Nessa carta, a autora deixa algumas pistas para encontrar essa cidade e eu decidi segui-las!

Rio de Janeiro Pernambuco

Você começa sua jornada no Rio de Janeiro, subindo o Pico da Tijuca ao amanhecer para encontrar a primeira pista.

Procurar a pista no topo do pico Desistir e voltar para casa

Em Pernambuco, você visita a histórica cidade de Olinda. Na carta, uma das pistas indica que para localizar a entrada para a cidade perdida você deve procurar a próxima pista em um dos pontos turísticos da cidade. Por qual você começa?

Investigar as igrejas antigas Explorar as praias próximas

No topo do Pico da Tijuca, você encontra uma antiga inscrição apontando que a próxima pista está localizada no Amazonas.

Seguir para o Amazonas

    <div class="passo" id="passo-4">
        <img src="img/cenario-passo4-voltar-casa.png" alt="imagem voltando para casa e desitindo da aventura">
        <p>Você decide que a aventura é grande demais e volta para casa, mas sempre se pergunta o que teria
            encontrado.</p>
    </div>

    <div class="passo" id="passo-5">
        <p>Nas igrejas de Olinda, você descobre um mapa antigo escondido atrás de um altar, apontando que a próxima
            pista está no Amazonas.</p>
        <button class="btn-proximo" data-proximo="7">Viajar para o Amazonas</button>
    </div>

    <div class="passo" id="passo-6">
        <p>Explorando as praias, você encontra uma caverna escondida, mas ela leva a um beco sem saída.</p>
        <button class="btn-proximo" data-proximo="8">Voltar e explorar as igrejas</button>
    </div>

    <div class="passo" id="passo-7">
        <p>No Amazonas, a busca pela cidade perdida se intensifica. Você se depara com um rio bifurcado.</p>
        <button class="btn-proximo" data-proximo="9">Seguir pelo rio à esquerda</button>
        <button class="btn-proximo" data-proximo="10">Seguir pelo rio à direita</button>
    </div>

    <div class="passo" id="passo-8">
        <p>De volta às igrejas, você finalmente encontra o mapa antigo. Agora, para o Amazonas!</p>
        <button class="btn-proximo" data-proximo="7">Seguir para o Amazonas</button>
    </div>

    <div class="passo" id="passo-9">
        <p>O rio à esquerda leva você a uma cachoeira escondida com inscrições antigas que revelam a entrada da
            cidade perdida.</p>
        <button class="btn-proximo" data-proximo="11">Explorar a cidade perdida</button>
    </div>

    <div class="passo" id="passo-10">
        <p>O rio à direita termina em uma área pantanosa. Apesar de belas vistas, não há sinais da cidade perdida
            aqui.</p>
        <button class="btn-proximo" data-proximo="12">Retornar e tentar o outro rio</button>
    </div>

    <div class="passo" id="passo-11">
        <img src="img/cenario-passo11-cidade-perdida.png" alt="encontrando uma cidade maravilhosa perdida no Amazonas">
        <p>Dentro da cidade perdida, você descobre tesouros inimagináveis e decide se dedicar a estudar e preservar
            este lugar</p>
    </div>

    <div class="passo" id="passo-12">
        <p>Retornando e escolhendo o rio à esquerda, você finalmente encontra a cachoeira escondida e as inscrições
            que levam à cidade perdida.</p>
        <button class="btn-proximo" data-proximo="11">Explorar a cidade perdida</button>
    </div>
</main>
<script src="script.js"></script>