// Seleciona todos os elementos com a classe .figure-caption dentro do elemento com id quarto-document-content
    const captions = document.querySelectorAll('#quarto-document-content .figure-caption');
    
    //seleciona todas as tags que se chamam caption
    const captionsTag = document.getElementsByTagName("caption");
    
    // Converte a coleção HTMLCollection em um array
    const captionsArray = Array.from(captionsTag);

    // Itera sobre todos os elementos .figure-caption
    captions.forEach(caption => {
        
        // Obtém o texto dentro do elemento .figure-caption
        const texto = caption.innerHTML;

        // Divide o texto em partes separadas por ":"
        const partes = texto.split(':');
        
        const primeiraParte = partes.shift();

        // Recria o texto com <span> em torno de cada caractere até o primeiro ":"
        const novoTexto = "<span class='contador-figura'>"+primeiraParte+"</span>: "+partes.join(' ');

        // Define o novo HTML no elemento .figure-caption
        caption.innerHTML = novoTexto;
        
    });
    
     // Itera sobre todas as tags caption
    captionsArray.forEach(caption => {
        
        // Obtém o texto dentro da tag caption
        const texto = caption.innerHTML;

        // Divide o texto em partes separadas por ":"
        const partes = texto.split(':');
        
        const primeiraParte = partes.shift();

        // Recria o texto com <span> em torno de cada caractere até o primeiro ":"
        const novoTexto = "<span class='contador-figura'>"+primeiraParte+"</span>: "+partes.join(' ');

        // Define a nova tag HTML caption
        caption.innerHTML = novoTexto;
        
    });