/* =========================================================
   REDE MUNICIPAL EM NÚMEROS
   PAINEL EXECUTIVO INSTITUCIONAL
========================================================= */

#rede-numeros.semed-numbers-section {
    --numbers-navy-1000: #020d1c;
    --numbers-navy-950: #04192e;
    --numbers-navy-900: #082d4d;

    --numbers-blue: #2189ed;
    --numbers-blue-light: #8dd0ff;

    --numbers-teal: #10b6a0;
    --numbers-teal-light: #98f0e2;

    --numbers-purple: #765ad7;
    --numbers-purple-light: #c6b8ff;

    --numbers-gold: #e6b54d;

    position: relative;
    isolation: isolate;

    padding:
        clamp(5.5rem, 9vw, 9rem)
        0;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(33, 137, 237, 0.3),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(118, 90, 215, 0.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 76% 94%,
            rgba(16, 182, 160, 0.2),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            var(--numbers-navy-1000) 0%,
            var(--numbers-navy-950) 34%,
            var(--numbers-navy-900) 69%,
            #075161 100%
        );
}

#rede-numeros,
#rede-numeros *,
#rede-numeros *::before,
#rede-numeros *::after {
    box-sizing: border-box;
}

#rede-numeros a {
    text-decoration: none;
}


/* =========================================================
   FUNDO
========================================================= */

.semed-numbers-background {
    position: absolute;
    z-index: -1;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.semed-numbers-grid-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.34;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
}

.semed-numbers-orbit {
    position: absolute;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;
}

.semed-numbers-orbit.is-one {
    top: -380px;
    left: -310px;

    width: 820px;
    height: 820px;

    box-shadow:
        0 0 0 70px rgba(33, 137, 237, 0.018),
        0 0 0 140px rgba(33, 137, 237, 0.01);
}

.semed-numbers-orbit.is-two {
    right: -420px;
    bottom: -460px;

    width: 940px;
    height: 940px;

    border-color:
        rgba(16, 182, 160, 0.08);

    box-shadow:
        0 0 0 80px rgba(16, 182, 160, 0.018),
        0 0 0 160px rgba(16, 182, 160, 0.01);
}

.semed-numbers-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(105px);
}

.semed-numbers-glow.is-blue {
    top: -210px;
    left: 18%;

    width: 510px;
    height: 430px;

    background:
        rgba(33, 137, 237, 0.19);
}

.semed-numbers-glow.is-teal {
    right: 18%;
    bottom: -250px;

    width: 520px;
    height: 440px;

    background:
        rgba(16, 182, 160, 0.17);
}

.semed-numbers-glow.is-purple {
    top: 15%;
    right: -160px;

    width: 440px;
    height: 440px;

    background:
        rgba(118, 90, 215, 0.16);
}


/* =========================================================
   LINHAS DIGITAIS
========================================================= */

.semed-numbers-line {
    position: absolute;

    height: 1px;

    opacity: 0.42;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(141, 208, 255, 0.8),
            transparent
        );
}

.semed-numbers-line::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--numbers-blue-light);

    box-shadow:
        0 0 15px rgba(141, 208, 255, 0.9);

    transform: translateY(-50%);
}

.semed-numbers-line.is-one {
    top: 23%;
    right: 7%;

    width: 250px;

    transform: rotate(-19deg);
}

.semed-numbers-line.is-one::after {
    right: 0;
}

.semed-numbers-line.is-two {
    bottom: 18%;
    left: 5%;

    width: 230px;

    transform: rotate(17deg);
}

.semed-numbers-line.is-two::after {
    left: 0;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.semed-numbers-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;
    gap:
        clamp(2rem, 5vw, 5rem);

    margin-bottom:
        clamp(2.2rem, 5vw, 3.8rem);

    padding-bottom: 1.8rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.11);
}

.semed-numbers-heading-content {
    max-width: 950px;
}

.semed-numbers-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;

    min-height: 36px;

    padding:
        0.38rem
        0.82rem
        0.38rem
        0.4rem;

    border:
        1px solid rgba(152, 240, 226, 0.17);

    border-radius: 999px;

    color: var(--numbers-teal-light);

    background:
        rgba(16, 182, 160, 0.08);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.semed-numbers-eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--numbers-blue),
            var(--numbers-teal)
        );

    box-shadow:
        0 8px 18px rgba(33, 137, 237, 0.28);

    font-size: 0.52rem;
}

.semed-numbers-heading h2 {
    max-width: 980px;

    margin:
        1rem
        0
        0;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.8rem, 6vw, 5.7rem);

    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.065em;

    text-wrap: balance;
}

.semed-numbers-heading h2 strong {
    color: transparent;

    background:
        linear-gradient(
            100deg,
            var(--numbers-blue-light),
            var(--numbers-purple-light),
            var(--numbers-teal-light)
        );

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

    font-weight: 600;
}

.semed-numbers-heading p {
    max-width: 790px;

    margin:
        1.1rem
        0
        0;

    color: rgba(255, 255, 255, 0.63);

    font-size: 0.88rem;
    line-height: 1.85;
}


/* =========================================================
   ETIQUETAS
========================================================= */

.semed-numbers-heading-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;

    margin-top: 1.2rem;
}

.semed-numbers-heading-tags span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;

    min-height: 31px;

    padding:
        0.38rem
        0.65rem;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 999px;

    color: rgba(255, 255, 255, 0.71);

    background:
        rgba(255, 255, 255, 0.055);

    font-size: 0.5rem;
    font-weight: 720;
}

.semed-numbers-heading-tags i {
    color: var(--numbers-teal-light);
}


/* =========================================================
   SELO EXECUTIVO
========================================================= */

.semed-numbers-heading-badge {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 0.75rem;

    min-width: 245px;
    padding: 1rem;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.045)
        );

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
}

.semed-numbers-heading-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 15px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--numbers-blue),
            var(--numbers-purple)
        );

    box-shadow:
        0 14px 28px rgba(57, 106, 219, 0.3);

    font-size: 0.84rem;
}

.semed-numbers-heading-badge small,
.semed-numbers-heading-badge strong {
    display: block;
}

.semed-numbers-heading-badge small {
    color: var(--numbers-teal-light);

    font-size: 0.43rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.semed-numbers-heading-badge strong {
    margin-top: 0.15rem;

    color: #ffffff;

    font-size: 0.68rem;
    font-weight: 740;
}

.semed-numbers-heading-badge-check {
    color: #43d995;

    font-size: 0.82rem;
}


/* =========================================================
   PAINEL
========================================================= */

.semed-numbers-dashboard {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1rem;

    padding: 1.1rem;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.095),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        0 42px 105px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.semed-numbers-dashboard::before {
    content: "";

    position: absolute;
    z-index: 8;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--numbers-blue),
            var(--numbers-purple),
            var(--numbers-teal)
        );
}

.semed-numbers-dashboard-decoration {
    position: absolute;
    z-index: -1;
    top: -180px;
    right: -160px;

    width: 430px;
    height: 430px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 50%;

    box-shadow:
        0 0 0 50px rgba(255, 255, 255, 0.012),
        0 0 0 100px rgba(255, 255, 255, 0.008);
}


/* =========================================================
   CARD
========================================================= */

.semed-numbers-card {
    --card-primary: 33, 137, 237;
    --card-secondary: 16, 182, 160;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 385px;
    padding: 1.15rem;

    overflow: hidden;

    border:
        1px solid rgba(var(--card-primary), 0.2);

    border-radius: 24px;

    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.045)
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    transition:
        border-color 240ms ease,
        background-color 240ms ease,
        box-shadow 240ms ease,
        transform 240ms ease;
}

.semed-numbers-card.is-schools {
    --card-primary: 16, 182, 160;
    --card-secondary: 73, 215, 155;
}

.semed-numbers-card.is-professionals {
    --card-primary: 118, 90, 215;
    --card-secondary: 33, 137, 237;
}

.semed-numbers-card.is-modalities {
    --card-primary: 230, 181, 77;
    --card-secondary: 16, 182, 160;
}

.semed-numbers-card::before {
    content: "";

    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            rgb(var(--card-primary)),
            rgb(var(--card-secondary))
        );
}

.semed-numbers-card::after {
    content: "";

    position: absolute;
    z-index: -1;
    right: -85px;
    bottom: -105px;

    width: 215px;
    height: 215px;

    border:
        1px solid rgba(var(--card-primary), 0.22);

    border-radius: 50%;

    box-shadow:
        0 0 0 30px rgba(var(--card-primary), 0.035),
        0 0 0 60px rgba(var(--card-primary), 0.018);
}

.semed-numbers-card:hover {
    border-color:
        rgba(var(--card-primary), 0.46);

    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.065)
        );

    box-shadow:
        0 30px 64px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(var(--card-primary), 0.08);

    transform: translateY(-8px);
}


/* =========================================================
   TOPO
========================================================= */

.semed-numbers-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.semed-numbers-card-label {
    color: rgba(255, 255, 255, 0.42);

    font-size: 0.42rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.semed-numbers-card-status {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;

    min-height: 28px;
    padding:
        0.32rem
        0.5rem;

    border:
        1px solid rgba(65, 217, 149, 0.15);

    border-radius: 999px;

    color: #83efb8;

    background:
        rgba(65, 217, 149, 0.075);

    font-size: 0.39rem;
    font-weight: 850;
    text-transform: uppercase;
}

.semed-numbers-card-status > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #43d995;

    box-shadow:
        0 0 11px rgba(67, 217, 149, 0.85);
}


/* =========================================================
   ÍCONE E NÚMERO
========================================================= */

.semed-numbers-card-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;

    margin-top: 1.7rem;
}

.semed-numbers-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 19px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgb(var(--card-primary)),
            rgb(var(--card-secondary))
        );

    box-shadow:
        0 18px 36px rgba(var(--card-primary), 0.31);

    font-size: 1.05rem;

    transition:
        box-shadow 240ms ease,
        transform 240ms ease;
}

.semed-numbers-card:hover
.semed-numbers-card-icon {
    box-shadow:
        0 23px 43px rgba(var(--card-primary), 0.4);

    transform:
        translateY(-4px)
        rotate(-4deg);
}

.semed-numbers-card-value {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.semed-numbers-card-value strong {
    color: transparent;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            rgba(var(--card-primary), 0.95),
            rgb(var(--card-secondary))
        );

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

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(3.6rem, 5vw, 5.3rem);

    font-weight: 700;
    line-height: 0.78;
    letter-spacing: -0.065em;
}

.semed-numbers-card-value > span {
    margin-left: 0.2rem;

    color: rgb(var(--card-secondary));

    font-size: 1.3rem;
    font-weight: 800;
}


/* =========================================================
   TEXTO
========================================================= */

.semed-numbers-card-content {
    margin-top: 1.6rem;
}

.semed-numbers-card-content > span {
    display: block;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.1;
}

.semed-numbers-card-content p {
    margin:
        0.65rem
        0
        0;

    color: rgba(255, 255, 255, 0.52);

    font-size: 0.62rem;
    line-height: 1.7;
}


/* =========================================================
   RODAPÉ DO CARD
========================================================= */

.semed-numbers-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;

    margin-top: auto;
    padding-top: 1rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.09);
}

.semed-numbers-card-footer > span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;

    color: rgba(255, 255, 255, 0.56);

    font-size: 0.46rem;
    font-weight: 730;
}

.semed-numbers-card-footer > span i {
    color: rgb(var(--card-secondary));
}

.semed-numbers-card-footer > i {
    color: rgb(var(--card-secondary));

    font-size: 0.65rem;
}


/* =========================================================
   RODAPÉ INSTITUCIONAL
========================================================= */

.semed-numbers-footer {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;

    align-items: center;
    gap: 1.3rem;

    margin-top: 1.3rem;
    padding: 1rem;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.045);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.semed-numbers-footer > div:first-child {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);

    align-items: center;
    gap: 0.7rem;
}

.semed-numbers-footer > div:first-child > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    border-radius: 14px;

    color: var(--numbers-teal-light);

    background:
        rgba(16, 182, 160, 0.1);

    font-size: 0.7rem;
}

.semed-numbers-footer p {
    margin: 0;
}

.semed-numbers-footer small,
.semed-numbers-footer strong {
    display: block;
}

.semed-numbers-footer small {
    color: var(--numbers-teal-light);

    font-size: 0.39rem;
    font-weight: 850;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.semed-numbers-footer strong {
    margin-top: 0.13rem;

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.57rem;
    font-weight: 710;
}

.semed-numbers-footer-center {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.semed-numbers-footer-center span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    min-height: 32px;

    padding:
        0.38rem
        0.6rem;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 999px;

    color: rgba(255, 255, 255, 0.58);

    background:
        rgba(255, 255, 255, 0.04);

    font-size: 0.43rem;
    font-weight: 720;
}

.semed-numbers-footer-center i {
    color: var(--numbers-teal-light);
}

.semed-numbers-footer > a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;

    min-width: 210px;
    min-height: 49px;

    padding:
        0.55rem
        0.65rem
        0.55rem
        0.9rem;

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            105deg,
            var(--numbers-blue),
            var(--numbers-purple),
            var(--numbers-teal)
        );

    box-shadow:
        0 15px 31px rgba(40, 105, 190, 0.25);

    font-size: 0.56rem;
    font-weight: 820;

    transition:
        box-shadow 220ms ease,
        transform 220ms ease;
}

.semed-numbers-footer > a:hover {
    color: #ffffff;

    box-shadow:
        0 22px 41px rgba(40, 105, 190, 0.34);

    transform: translateY(-3px);
}


/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 1299.98px) {
    .semed-numbers-dashboard {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .semed-numbers-card {
        min-height: 355px;
    }
}


@media (max-width: 991.98px) {
    .semed-numbers-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .semed-numbers-heading-badge {
        justify-self: start;
    }

    .semed-numbers-footer {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .semed-numbers-footer-center {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}


@media (max-width: 767.98px) {
    #rede-numeros.semed-numbers-section {
        padding:
            4.5rem
            0;
    }

    .semed-numbers-dashboard {
        grid-template-columns: 1fr;

        border-radius: 27px;
    }

    .semed-numbers-card {
        min-height: 330px;
    }

    .semed-numbers-footer {
        grid-template-columns: 1fr;
    }

    .semed-numbers-footer-center {
        grid-column: auto;
        grid-row: auto;
    }

    .semed-numbers-footer > a {
        width: 100%;
    }
}


@media (max-width: 575.98px) {
    .semed-numbers-heading h2 {
        font-size:
            clamp(2.5rem, 14vw, 4rem);
    }

    .semed-numbers-heading-badge {
        width: 100%;
        min-width: 0;
    }

    .semed-numbers-heading-tags {
        align-items: stretch;
        flex-direction: column;
    }

    .semed-numbers-heading-tags span {
        width: 100%;
    }

    .semed-numbers-dashboard {
        padding: 0.8rem;

        border-radius: 23px;
    }

    .semed-numbers-card {
        min-height: 315px;
        padding: 1rem;

        border-radius: 21px;
    }

    .semed-numbers-card-main {
        align-items: center;
    }

    .semed-numbers-card-value strong {
        font-size: 3.8rem;
    }

    .semed-numbers-footer-center {
        align-items: stretch;
        flex-direction: column;
    }

    .semed-numbers-footer-center span {
        width: 100%;
    }
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

#rede-numeros a:focus-visible {
    outline:
        4px solid rgba(141, 208, 255, 0.34);

    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .semed-numbers-card,
    .semed-numbers-card-icon,
    .semed-numbers-footer > a {
        transition: none !important;
    }
}