:root {
    --progress-value: 316; /* Valor inicial */
    --wh-grafico: 140px;
    --dasharray: 316;
}

.circle-big {
    position: relative;
    width: var(--wh-grafico);
    height: var(--wh-grafico);
}

.circle-big svg {
    width: var(--wh-grafico);
    height: var(--wh-grafico);
}

.circle-big .bg {
    fill: none;
    stroke-width: 20px;
    stroke: #ff3131;
}

.circle-big .progress {
    fill: none;
    stroke-width: 20px;
    stroke: #18b27f;
    stroke-linecap: round;
    stroke-dasharray: var(--dasharray);
    stroke-dashoffset: var(--progress-value);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: big 1.5s ease-in-out;
}

.circle-big .text {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes big {
    from {
        stroke-dashoffset: var(--dasharray);
    }
    to {
        stroke-dashoffset: var(--progress-value);
    }
}