.counters {
    position: absolute;
    bottom: 0;
    align-self:flex-end;
    padding-bottom: 30px;
    width: 100%;

    border-top: 1px solid rgba(255,255,255,0.5);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;

    &.active {
        opacity: 1;
        transform: translateY(0);
    }

    @media screen and (max-width: 1024px) {
        position: inherit;
    }

    @media screen and (max-width: 600px) {
        flex-direction: column;
        align-items: stretch;
        gap: 1px;
        position: initial;
    }

    .counter {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        @media screen and (max-width: 600px) {
            flex-direction: row;
            justify-content: flex-start;
            gap: 1rem;
            position: initial;
        }

        .count {
            font-size: clamp(1.8rem, 2.3vw + 0.5rem, 2.5rem);
            font-weight: 600;
            color: var(--text-color);
            align-items: baseline;

            @media screen and (max-width: 600px) {
                font-size: clamp(3rem, 4vw + 0.5rem, 4rem);
            }
        }

        .label {
            font-size: 0.8rem;
            color: var(--text-color);
            letter-spacing: 0.5px;
            opacity: 0.85;

            @media screen and (max-width: 600px) {
                font-size: 1.5rem;
                text-align: left;
            }

        }
    }
}

/* Estilo específico para el número dentro de .count */
/*.counters .counter .count span[data-value] {
    min-width: 4ch;3
    /*text-align: right;*/
/*}*/

/* Clase opcional para resaltar al terminar */
.counters .counter.finished .count {
    /*color: var(--accent-color);*/
    transition: color 0.4s ease;
}