Haga lo que hicimos: refactorización y manipulación de elementos

const html = document.querySelector('html');
const botonCorto = document.querySelector('.app__card-button--corto');
const botonEnfoque = document.querySelector('.app__card-button--enfoque');
const botonLargo = document.querySelector('.app__card-button--largo');

const banner = document.querySelector('.app__image');
const titulo = document.querySelector('.app__title');

/* Empezar a Escuchar un evento que vaya a ocurrir, es este caso un click */
/* () => {} Arrow Funtion en JavaScript */

/* Cambiar el color del atributo data-contexto del html con el color establecido en css para el descansp-corto */
botonCorto.addEventListener('click', () => {
    /* html.setAttribute('data-contexto', 'descanso-corto'); */
    /* banner.setAttribute('src','/imagenes/descanso-corto.png'); */
    cambiarContexto('descanso-corto');
});

/* Cambiar el color del atributo data-contexto del html con el color establecido en css para el enfoque*/
botonEnfoque.addEventListener('click', () => {
    /* html.setAttribute('data-contexto', 'enfoque'); */
    /* banner.setAttribute('src','/imagenes/enfoque.png'); */
    cambiarContexto('enfoque');
});

/* Cambiar el color del atributo data-contexto del html con el color establecido en css para el decansp-largo*/
botonLargo.addEventListener('click', () => {
    /* html.setAttribute('data-contexto', 'descanso-largo'); */
    /* banner.setAttribute('src','/imagenes/descanso-largo.png'); */
    cambiarContexto('descanso-largo');
});


/* Optimizar codigo con la funcion, parametro contexto: descanso-corto, enfoque, descanso-largo */
function cambiarContexto(contexto) {
    html.setAttribute('data-contexto', contexto);
    banner.setAttribute('src', `/imagenes/${contexto}.png`);

    switch (contexto) {
        case "enfoque":
            /* El metodo innerHTML se usa para cambiar el texto mostrado en la pantalla segun el contexto */ 
            /* seleccionado (Foco, descanso-corto, descanso-largo) */
            titulo.innerHTML = `
            Optimiza tu productividad,<br>
                <strong class="app__title-strong">sumérgete en lo que importa.</strong>
            `;
            break;
        case "descanso-corto":
            titulo.innerHTML = `
            ¿Qué tal tomar un respiro? <strong class="app__title-strong">¡Haz una pausa corta!</strong>
            `;
            break;
        case "descanso-largo":
            titulo.innerHTML = `
            Hora de volver a la superficie.<strong class="app__title-strong"> Haz una pausa larga.</strong>
            `;
            break;
        default:
            break;
    }
}