O texto da página não está alterando.

Alguém consegue ver se tem algo errado? A página não está alterando o texto.

const html = document.querySelector('html');
const banner = document.querySelector('.app__image');
const titulo = document.querySelector('app__title');
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');

focoBt.addEventListener('click', ()=>{
    alterarContexto('foco');
})


curtoBt.addEventListener('click', ()=>{
    alterarContexto('descanso-curto');
})

longoBt.addEventListener('click', ()=>{
    alterarContexto('descanso-longo');
})

function alterarContexto(contexto){
    html.setAttribute('data-contexto',contexto);
    banner.setAttribute('src',`/imagens/${contexto}.png`);
    switch (contexto) {
        case 'foco':
            titulo.innerHTML = `Otimize sua produtividade,<br><strong class="app__title-strong">mergulhe no que importa.</strong>`
            
            break;

        case 'descanso-curto':
            titulo.innerHTML = `vai por favor`

            break

        case 'descanso-longo':
            titulo.innerHTML = `chorando já`

            break

        default:
            break;
    }
}