:root {
    --senado-200: #0095da;
    --senado-300: #007db8;
    --senado-400: #005b9e;
    --senado-500: #00315c;
    --destaque: #faa631;
    --page: #ffffff;
    --ink: #333333;
    --ink-soft: #666666;
    --rule: #e4e4e4;
    /* ---------- variáveis de tweak: Ritmo (densidade) + Traço (peso dos gráficos) ---------- */
    --rt-cat-gap: 74px;
    --rt-sgm-grid-gap: 20px;
    --rt-panel-pad: 24px 24px 26px;
    --rt-num: 62px;
    --rt-mini: 40px;
    --rt-intro-pad: 34px 48px;
    --tr-ring-w: 11;
    --tr-donut-w: 26;
    --tr-bar-h: 9px;
    --tr-accent: 3px;
}

[data-ritmo="compacto"] {
    --rt-cat-gap: 46px;
    --rt-sgm-grid-gap: 14px;
    --rt-panel-pad: 17px 18px 18px;
    --rt-num: 48px;
    --rt-mini: 33px;
    --rt-intro-pad: 24px 32px;
}

[data-ritmo="sereno"] {
    --rt-cat-gap: 108px;
    --rt-sgm-grid-gap: 30px;
    --rt-panel-pad: 34px 34px 36px;
    --rt-num: 80px;
    --rt-mini: 52px;
    --rt-intro-pad: 48px 62px;
}

[data-traco="fino"] {
    --tr-ring-w: 6;
    --tr-donut-w: 13;
    --tr-bar-h: 4px;
    --tr-accent: 1px;
}

.sgm-font-size-4x {
    font-size: 4rem;
}

.sgm-font-size-3x {
    font-size: 3rem;
}

.sgm-font-size-2x {
    font-size: 2rem;
}

.sgm-text-center {
    text-align: center;
}

.sgm-foot-note {
    padding-left: 10px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
    font-style: italic;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.sgm-foot-note .src {
    color: var(--senado-400);
    font-style: normal;
    font-weight: 700;
}

/* ---------- grade de painéis ---------- */
.sgm-grid {
    display: grid;
    gap: var(--rt-sgm-grid-gap);
}

.sgm-grid--cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

.sgm-grid--cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.sgm-grid--span-4 {
    grid-column: span 4;
}

.sgm-grid--span-5 {
    grid-column: span 5;
}

.sgm-grid--span-6 {
    grid-column: span 6;
}

.sgm-grid--span-7 {
    grid-column: span 7;
}

.sgm-grid--span-8 {
    grid-column: span 8;
}

.sgm-grid--span-12 {
    grid-column: span 12;
}

/* evitar estilos genéricos do bootstrap */
.sgm-grid--span-4, .sgm-grid--span-5, .sgm-grid--span-6, .sgm-grid--span-7, .sgm-grid--span-8, .sgm-grid--span-12 {
    margin-left: 0;
    float: unset;
}

@media(max-width:991px) {
    .sgm-grid.sgm-grid--cols-12 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sgm-grid--span-4,
    .sgm-grid--span-5,
    .sgm-grid--span-6,
    .sgm-grid--span-7,
    .sgm-grid--span-8,
    .sgm-grid--span-12 {
        grid-column: span 2;
    }
}

@media(max-width:560px) {
    .sgm-grid.sgm-grid--cols-12 {
        grid-template-columns: 1fr;
    }

    .sgm-grid--span-4,
    .sgm-grid--span-5,
    .sgm-grid--span-6,
    .sgm-grid--span-7,
    .sgm-grid--span-8,
    .sgm-grid--span-12 {
        grid-column: span 1;
    }
}

.sgm-section-head {
    font-size: 22px;
    margin-top: 35px;
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.sgm-section-head h1,
.sgm-section-head h2 {
    font-family: inherit;
    font-weight: normal;
    line-height: 1.1;
    letter-spacing: .005em;
    margin: 0;
}
.sgm-section-head h1 {
    font-size: 28px;
}
.sgm-section-head h2 {
    font-size: 22px;
}

.sgm-pull-right {
    float: right;
}

.sgm-explicacao-pagina {
    font-size: 17px;
    font-style: italic;
    padding: 35px 10%;
    text-align: center;
    margin-bottom: 35px;
    background-color: #FaFaFa;
    border-radius: 10px;
    position: relative;
}

.sgm-explicacao-pagina--saiba-mais {
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 0.9em;
}