.autonomiza-progress-title {
    position: relative;
    display: block;
}

.autonomiza-progress-title-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Container do título: só herda a tipografia/alinhamento do Elementor */
.autonomiza-progress-title .apt-text {
    display: block;
}

/* Cada "linha" vira seu próprio bloco, para forçar quebra individual
   e permitir que text-align (herdado) centralize/alinhe cada uma   */
.autonomiza-progress-title .apt-line-row {
    display: block;
    text-align: inherit;
    line-height: inherit;
}

/* O preenchimento em si acontece aqui, por linha.
   Técnica: gradiente com corte duro (50%/50%) num fundo 2x mais largo
   que o texto (background-size: 200%). Ao animar a POSIÇÃO desse fundo
   de 100% -> 0%, a linha de corte desliza da direita pra esquerda,
   revelando a progress-color por cima da base-color.                 */
.autonomiza-progress-title .apt-line {
    display: inline-block;
    max-width: 100%;

    /* evita cortar rabicho de letras como g, j, p, q, y */
    padding-bottom: 0.08em;

    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 100% 0;
    background-image: linear-gradient(
        to right,
        var(--progress-color, #fff) 50%,
        var(--base-color, #ccc) 50%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    will-change: background-position;
}

/* Compensa o padding-bottom extra entre linhas para manter o
   espaçamento visual igual ao original                              */
.autonomiza-progress-title .apt-line-row:not(:first-child) {
    margin-top: -0.08em;
}

/* Enquanto o JS ainda não quebrou o texto em linhas (primeiro frame,
   JS desabilitado, etc.) mostra o texto normal na base-color em vez
   de sumir/ficar transparente.                                      */
.autonomiza-progress-title .apt-text:not(.apt-ready) {
    color: var(--base-color, #ccc);
}