/* .sgm-secao-animacao */
/* apenas marcador para ativar a animação de entrada da categoria */

/* ring (anel de progresso) */
.sgm-chart-container-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}

.sgm-chart-container-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.sgm-chart-value {
    font-size: 2em;
    line-height: 1;
    font-weight: 600;
    color: var(--accent);
}

.sgm-chart-ring {
    flex: 0 0 auto;
    width: 118px;
    height: 118px;
    position: relative;
}

.sgm-chart-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.sgm-chart-ring .track {
    fill: none;
    stroke: #eef0f3;
    stroke-width: var(--tr-ring-w);
}

.sgm-chart-ring .prog {
    fill: none;
    stroke: var(--accent);
    stroke-width: var(--tr-ring-w);
    stroke-linecap: round;
    stroke-dasharray: var(--circ);
    stroke-dashoffset: var(--target);
}

.sgm-secao-animacao.in .sgm-chart-ring .prog {
    animation: sgmRingGrow 1.5s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes sgmRingGrow {
    from {
        stroke-dashoffset: var(--circ);
    }
}

.sgm-chart-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 300;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.sgm-chart-text {
    flex: 1;
    min-width: 0;
}

.sgm-chart-text .rt-cap {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #52565d;
    text-wrap: pretty;
    max-width: 30ch;
}