:root {
    --cor-principal: #00217d;
    --cor-principal-claro: #00217d;
    --cor-principal-escuro: #00217d;
    --cor-secundaria: #80D9FF;
    --cor-secundaria-claro: #80D9FF;
    --cor-secundaria-escuro: #80D9FF;
    --cor-texto: #000000;
    --cor-vermelho: #d9534f;
    --cor-cinza: #F7F9FB;
}


html {
}

    html body {
        font-size: 16px;
        font-weight: 300;
        line-height: 1.4;
        -ms-transition: background-color 0.3s, color 0.3s;
        -o-transition: background-color 0.3s, color 0.3s;
        -webkit-transition: background-color 0.3s, color 0.3s;
        transition: background-color 0.3s, color 0.3s;
        color: var(--cor-texto);
    }

p {
    font-family: 'Lato', sans-serif !important;
    color: var(--cor-texto) !important;
}

.bg-principal {
    background: var(--cor-principal) !important;
}

.bg-secundario {
    background: var(--cor-secundaria) !important;
}

.bg-whatsapp {
    background-color: #25d366 !important;
    color: #fff;
}

.cor-principal {
    color: var(--cor-principal) !important;
}

.cor-secundario {
    color: var(--cor-secundaria) !important;
}

.cor-whatsapp {
    color: #25d366 !important;
}

.bg-azul {
    background: var(--cor-principal) !important;
}

.bg-azulescuro {
    background: var(--cor-principal) !important;
}

.bg-cinzaclaro {
    background: #f4f4f4 !important;
}

.bg-verde {
    background: #25d366 !important;
}

.bg-light {
    background-color: var(--cor-cinza) !important;
}

.bg-branco {
    background-color: #ffffff !important;
}

.cor-azul {
    color: var(--cor-principal) !important;
}

.cor-cinza {
    color: #ccc !important;
}

.cor-verde {
    color: #07d576 !important;
}

.cor-amarelo {
    color: #ebee00 !important;
}

.cor-vermelho {
    color: #ff332e !important;
}

a {
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
    color: var(--cor-principal);
}

    a.link-azul {
        color: var(--cor-secundaria) !important;
    }

        a.link-azul:hover {
            color: var(--cor-principal) !important;
        }

    a.link-cinza {
        color: #888 !important;
    }

        a.link-cinza:hover {
            color: #0989bd !important;
        }

    a.link-branco {
        color: #fff !important;
    }

        a.link-branco:hover {
            color: #0989bd !important;
        }

    a:focus {
        /*background-color: initial !important;*/
    }

/* Margins */
.m-5 {
    margin: 5px !important;
}

.m-10 {
    margin: 10px !important;
}

.m-15 {
    margin: 15px !important;
}

.m-20 {
    margin: 20px !important;
}

.m-25 {
    margin: 25px !important;
}

.m-30 {
    margin: 30px !important;
}

.m-35 {
    margin: 35px !important;
}

.m-40 {
    margin: 40px !important;
}

.m-45 {
    margin: 45px !important;
}

.m-50 {
    margin: 50px !important;
}

.m-55 {
    margin: 55px !important;
}

.m-60 {
    margin: 60px !important;
}

.m-65 {
    margin: 65px !important;
}

.m-70 {
    margin: 70px !important;
}

.m-75 {
    margin: 75px !important;
}

.m-80 {
    margin: 80px !important;
}

.m-85 {
    margin: 85px !important;
}

.m-90 {
    margin: 90px !important;
}

.m-95 {
    margin: 95px !important;
}

.m-100 {
    margin: 100px !important;
}

/* Classes para margin-top */
.m-t-5 {
    margin-top: 5px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-20 {
    margin-top: 20px !important;
}

.m-t-25 {
    margin-top: 25px !important;
}

.m-t-30 {
    margin-top: 30px !important;
}

.m-t-35 {
    margin-top: 35px !important;
}

.m-t-40 {
    margin-top: 40px !important;
}

.m-t-45 {
    margin-top: 45px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

.m-t-55 {
    margin-top: 55px !important;
}

.m-t-60 {
    margin-top: 60px !important;
}

.m-t-65 {
    margin-top: 65px !important;
}

.m-t-70 {
    margin-top: 70px !important;
}

.m-t-75 {
    margin-top: 75px !important;
}

.m-t-80 {
    margin-top: 80px !important;
}

.m-t-85 {
    margin-top: 85px !important;
}

.m-t-90 {
    margin-top: 90px !important;
}

.m-t-95 {
    margin-top: 95px !important;
}

.m-t-100 {
    margin-top: 100px !important;
}

/* Classes para margin-bottom */
.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-15 {
    margin-bottom: 15px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-25 {
    margin-bottom: 25px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-b-35 {
    margin-bottom: 35px !important;
}

.m-b-40 {
    margin-bottom: 40px !important;
}

.m-b-45 {
    margin-bottom: 45px !important;
}

.m-b-50 {
    margin-bottom: 50px !important;
}

.m-b-55 {
    margin-bottom: 55px !important;
}

.m-b-60 {
    margin-bottom: 60px !important;
}

.m-b-65 {
    margin-bottom: 65px !important;
}

.m-b-70 {
    margin-bottom: 70px !important;
}

.m-b-75 {
    margin-bottom: 75px !important;
}

.m-b-80 {
    margin-bottom: 80px !important;
}

.m-b-85 {
    margin-bottom: 85px !important;
}

.m-b-90 {
    margin-bottom: 90px !important;
}

.m-b-95 {
    margin-bottom: 95px !important;
}

.m-b-100 {
    margin-bottom: 100px !important;
}

/* Classes para margin-left */
.m-l-5 {
    margin-left: 5px !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-15 {
    margin-left: 15px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.m-l-25 {
    margin-left: 25px !important;
}

.m-l-30 {
    margin-left: 30px !important;
}

.m-l-35 {
    margin-left: 35px !important;
}

.m-l-40 {
    margin-left: 40px !important;
}

.m-l-45 {
    margin-left: 45px !important;
}

.m-l-50 {
    margin-left: 50px !important;
}

.m-l-55 {
    margin-left: 55px !important;
}

.m-l-60 {
    margin-left: 60px !important;
}

.m-l-65 {
    margin-left: 65px !important;
}

.m-l-70 {
    margin-left: 70px !important;
}

.m-l-75 {
    margin-left: 75px !important;
}

.m-l-80 {
    margin-left: 80px !important;
}

.m-l-85 {
    margin-left: 85px !important;
}

.m-l-90 {
    margin-left: 90px !important;
}

.m-l-95 {
    margin-left: 95px !important;
}

.m-l-100 {
    margin-left: 100px !important;
}

/* Classes para margin-right */
.m-r-5 {
    margin-right: 5px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.m-r-15 {
    margin-right: 15px !important;
}

.m-r-20 {
    margin-right: 20px !important;
}

.m-r-25 {
    margin-right: 25px !important;
}

.m-r-30 {
    margin-right: 30px !important;
}

.m-r-35 {
    margin-right: 35px !important;
}

.m-r-40 {
    margin-right: 40px !important;
}

.m-r-45 {
    margin-right: 45px !important;
}

.m-r-50 {
    margin-right: 50px !important;
}

.m-r-55 {
    margin-right: 55px !important;
}

.m-r-60 {
    margin-right: 60px !important;
}

.m-r-65 {
    margin-right: 65px !important;
}

.m-r-70 {
    margin-right: 70px !important;
}

.m-r-75 {
    margin-right: 75px !important;
}

.m-r-80 {
    margin-right: 80px !important;
}

.m-r-85 {
    margin-right: 85px !important;
}

.m-r-90 {
    margin-right: 90px !important;
}

.m-r-95 {
    margin-right: 95px !important;
}

.m-r-100 {
    margin-right: 100px !important;
}
/* fim Margins */

/* Paddings */
.p-5 {
    padding: 5px !important;
}

.p-10 {
    padding: 10px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-25 {
    padding: 25px !important;
}

.p-30 {
    padding: 30px !important;
}

.p-35 {
    padding: 35px !important;
}

.p-40 {
    padding: 40px !important;
}

.p-45 {
    padding: 45px !important;
}

.p-50 {
    padding: 50px !important;
}

.p-55 {
    padding: 55px !important;
}

.p-60 {
    padding: 60px !important;
}

.p-65 {
    padding: 65px !important;
}

.p-70 {
    padding: 70px !important;
}

.p-75 {
    padding: 75px !important;
}

.p-80 {
    padding: 80px !important;
}

.p-85 {
    padding: 85px !important;
}

.p-90 {
    padding: 90px !important;
}

.p-95 {
    padding: 95px !important;
}

.p-100 {
    padding: 100px !important;
}

/* Classes para padding-top */
.p-t-5 {
    padding-top: 5px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

.p-t-15 {
    padding-top: 15px !important;
}

.p-t-20 {
    padding-top: 20px !important;
}

.p-t-25 {
    padding-top: 25px !important;
}

.p-t-30 {
    padding-top: 30px !important;
}

.p-t-35 {
    padding-top: 35px !important;
}

.p-t-40 {
    padding-top: 40px !important;
}

.p-t-45 {
    padding-top: 45px !important;
}

.p-t-50 {
    padding-top: 50px !important;
}

.p-t-55 {
    padding-top: 55px !important;
}

.p-t-60 {
    padding-top: 60px !important;
}

.p-t-65 {
    padding-top: 65px !important;
}

.p-t-70 {
    padding-top: 70px !important;
}

.p-t-75 {
    padding-top: 75px !important;
}

.p-t-80 {
    padding-top: 80px !important;
}

.p-t-85 {
    padding-top: 85px !important;
}

.p-t-90 {
    padding-top: 90px !important;
}

.p-t-95 {
    padding-top: 95px !important;
}

.p-t-100 {
    padding-top: 100px !important;
}

/* Classes para padding-bottom */
.p-b-5 {
    padding-bottom: 5px !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

.p-b-15 {
    padding-bottom: 15px !important;
}

.p-b-20 {
    padding-bottom: 20px !important;
}

.p-b-25 {
    padding-bottom: 25px !important;
}

.p-b-30 {
    padding-bottom: 30px !important;
}

.p-b-35 {
    padding-bottom: 35px !important;
}

.p-b-40 {
    padding-bottom: 40px !important;
}

.p-b-45 {
    padding-bottom: 45px !important;
}

.p-b-50 {
    padding-bottom: 50px !important;
}

.p-b-55 {
    padding-bottom: 55px !important;
}

.p-b-60 {
    padding-bottom: 60px !important;
}

.p-b-65 {
    padding-bottom: 65px !important;
}

.p-b-70 {
    padding-bottom: 70px !important;
}

.p-b-75 {
    padding-bottom: 75px !important;
}

.p-b-80 {
    padding-bottom: 80px !important;
}

.p-b-85 {
    padding-bottom: 85px !important;
}

.p-b-90 {
    padding-bottom: 90px !important;
}

.p-b-95 {
    padding-bottom: 95px !important;
}

.p-b-100 {
    padding-bottom: 100px !important;
}

/* Classes para padding-left */
.p-l-5 {
    padding-left: 5px !important;
}

.p-l-10 {
    padding-left: 10px !important;
}

.p-l-15 {
    padding-left: 15px !important;
}

.p-l-20 {
    padding-left: 20px !important;
}

.p-l-25 {
    padding-left: 25px !important;
}

.p-l-30 {
    padding-left: 30px !important;
}

.p-l-35 {
    padding-left: 35px !important;
}

.p-l-40 {
    padding-left: 40px !important;
}

.p-l-45 {
    padding-left: 45px !important;
}

.p-l-50 {
    padding-left: 50px !important;
}

.p-l-55 {
    padding-left: 55px !important;
}

.p-l-60 {
    padding-left: 60px !important;
}

.p-l-65 {
    padding-left: 65px !important;
}

.p-l-70 {
    padding-left: 70px !important;
}

.p-l-75 {
    padding-left: 75px !important;
}

.p-l-80 {
    padding-left: 80px !important;
}

.p-l-85 {
    padding-left: 85px !important;
}

.p-l-90 {
    padding-left: 90px !important;
}

.p-l-95 {
    padding-left: 95px !important;
}

.p-l-100 {
    padding-left: 100px !important;
}

/* Classes para padding-right */
.p-r-5 {
    padding-right: 5px !important;
}

.p-r-10 {
    padding-right: 10px !important;
}

.p-r-15 {
    padding-right: 15px !important;
}

.p-r-20 {
    padding-right: 20px !important;
}

.p-r-25 {
    padding-right: 25px !important;
}

.p-r-30 {
    padding-right: 30px !important;
}

.p-r-35 {
    padding-right: 35px !important;
}

.p-r-40 {
    padding-right: 40px !important;
}

.p-r-45 {
    padding-right: 45px !important;
}

.p-r-50 {
    padding-right: 50px !important;
}

.p-r-55 {
    padding-right: 55px !important;
}

.p-r-60 {
    padding-right: 60px !important;
}

.p-r-65 {
    padding-right: 65px !important;
}

.p-r-70 {
    padding-right: 70px !important;
}

.p-r-75 {
    padding-right: 75px !important;
}

.p-r-80 {
    padding-right: 80px !important;
}

.p-r-85 {
    padding-right: 85px !important;
}

.p-r-90 {
    padding-right: 90px !important;
}

.p-r-95 {
    padding-right: 95px !important;
}

.p-r-100 {
    padding-right: 100px !important;
}
/* fim Paddings */

/* Titulos e subs */
.subtitulo {
    background-color: transparent;
    color: var(--cor-secundaria-escuro);
    padding: 2px 0 2px 12px;
    border-left: 4px solid var(--cor-principal);
    font-weight: 700;
    display: inline-block;
    margin: 20px 0 16px;
    font-size: 21px;
    letter-spacing: -0.3px;
}
/* fim Titulos e subs */

/* Linhas com 3 pontinhos */
.exibe-1-linha {
    overflow: hidden; /* Esconde o conteúdo que ultrapassa as duas linhas */
    text-overflow: ellipsis; /* Adiciona reticências (...) quando o conteúdo é cortado */
    display: -webkit-box; /* Define o tipo de display como flexível */
    -webkit-line-clamp: 1; /* Limita o número de linhas a 2 */
    -webkit-box-orient: vertical; /* Orientação vertical das linhas */
    white-space: normal; /* Permite quebras de linha */
}

.exibe-2-linha {
    overflow: hidden; /* Esconde o conteúdo que ultrapassa as duas linhas */
    text-overflow: ellipsis; /* Adiciona reticências (...) quando o conteúdo é cortado */
    display: -webkit-box; /* Define o tipo de display como flexível */
    -webkit-line-clamp: 2; /* Limita o número de linhas a 2 */
    -webkit-box-orient: vertical; /* Orientação vertical das linhas */
    white-space: normal; /* Permite quebras de linha */
}

.exibe-3-linha {
    overflow: hidden; /* Esconde o conteúdo que ultrapassa as duas linhas */
    text-overflow: ellipsis; /* Adiciona reticências (...) quando o conteúdo é cortado */
    display: -webkit-box; /* Define o tipo de display como flexível */
    -webkit-line-clamp: 3; /* Limita o número de linhas a 2 */
    -webkit-box-orient: vertical; /* Orientação vertical das linhas */
    white-space: normal; /* Permite quebras de linha */
}
/* fim Linhas com 3 pontinhos */

/* Alinhamento de box pra ficar com mesma altura */
.dec-box-alinhar-vertical-pai {
    display: flex;
    flex-wrap: wrap;
}

.dec-box-alinhar-vertical-filho {
    display: flex;
}
/* fim Alinhamento de box pra ficar com mesma altura */


p {
}

.dec-show-mobile {
    display: none !important;
}

.dec-ul-server ul {
    padding-left: 20px;
}

.icoMR {
    margin-right: 5px;
}

.icoML {
    margin-left: 5px;
}

/* botões */
.btn-dec {
    border-radius: 20px !important;
    font-size: 13px !important;
    padding: 8px 15px !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.42857143 !important;
    transition: transform 0.5s ease;
}

    .btn-dec:hover {
        transform: scale(1.05);
    }

.btn-white {
    color: var(--cor-principal) !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

    .btn-white:hover {
        color: #fff !important;
        background-color: var(--cor-secundaria-escuro) !important;
        border-color: var(--cor-secundaria-escuro) !important;
    }

.btn-primary {
    color: #fff !important;
    background-color: var(--cor-principal) !important;
    border-color: var(--cor-principal) !important;
}

    .btn-primary:hover {
        color: #fff !important;
        background-color: var(--cor-secundaria-escuro) !important;
        border-color: var(--cor-secundaria-escuro) !important;
    }

.btn-info {
    color: #fff;
    background-color: var(--cor-principal-claro);
    border-color: var(--cor-principal-claro);
}

    .btn-info:hover {
        color: #fff;
        background-color: var(--cor-secundaria);
        border-color: var(--cor-secundaria);
    }

    .btn-info.focus, .btn-info:focus {
        color: #fff;
        background-color: var(--cor-principal-claro);
        border-color: var(--cor-principal-claro);
    }

/*.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 3px solid #007BFF !important;*/ /* Adiciona um contorno azul */
/*outline-offset: 2px !important;*/ /* Distância entre o contorno e o elemento */
/*border-radius: 2px !important;*/ /* Opcional: Adiciona bordas arredondadas */
/*}*/

/* Links e botões */
/*a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #007BFF !important;*/ /* Cor do contorno */
/*outline-offset: 2px !important;*/ /* Espaçamento do contorno */
/*border-radius: 3px;*/ /* Opcional: bordas arredondadas */
/*}*/

/* Imagens com links */
/*a:focus img {
    outline: 3px solid #007BFF !important;
    outline-offset: 4px;
}*/

/* Evitar que o estilo seja sobrescrito */
/**:focus {
    outline: 3px solid #007BFF !important;
    outline-offset: 2px;
}*/

.share_zap {
    background-color: #25d366;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 3px;
}

    .share_zap i {
        margin-right: 6px;
    }

.dec-bt-right {
    position: absolute;
    right: 0;
    bottom: 20px;
    text-align: right;
}
/* fim botões */

/* bgs */
.bg-dec-01 {
    background: url(../img/bg/02.png) no-repeat bottom !important;
    background-size: cover !important;
}

.bg-dec-cinza-azul {
    background: url(/img/bg/h2factsbg.jpg) no-repeat !important;
    background-size: cover !important;
}


.bg-dec-quadriculado-azul-escuro {
    background: url(/img/npatt.png) var(--cor-principal);
}

.bg-dec-quadriculado-cinza-claro {
    background: url(/img/npatt_cinza.png) #ececec;
}

.bg-dec-linear-azul {
    background: #086FB8 !important;
    background: linear-gradient(180deg, #ffffff 0%, #c7edfb 50%, #ffffff 100%) !important;
}

.main-content {
    background: transparent;
}
/* fim bgs */

.no-strong {
    font-weight: 300 !important;
}

/* Icon Box DEC */
.icon-box-dec-1 .icon-box-content {
    text-align: center;
    border: 1px solid #cccccc9c;
    padding: 20px;
    box-shadow: #ddd 0px 0px 5px;
}

.icon-box-content:hover {
    transition: 0.5s ease;
    box-shadow: rgb(190 190 190 / 33%) 0px 0px 20px;
}

.icon-box-dec-1 .icon-box-content > i {
    font-size: 25px;
}

.icon-box-dec-1 .icon-box-content h3 {
    font-size: 20px;
    color: #1f1f1f;
    font-weight: 400;
    padding: 5px 0;
}
/* fim Icon Box DEC */

/* Card DEC */
.card {
    border: 1px solid #e6e8eb;
    border-radius: 5px;
    background-color: #ffffff;
    margin-bottom: 20px;
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
}

    .card .card-header {
        background-color: #ffffff;
        border-bottom: 1px solid #e6e8eb;
        font-weight: 600;
        padding: 1.8rem 2rem;
        color: var(--cor-principal);
    }

        .card .card-header p:last-child {
            margin-bottom: 0;
        }

        .card .card-header .card-title {
            font-size: 1.35714286em;
            line-height: 1.68421053em;
            font-weight: 500;
        }

        .card .card-header .card-subtitle {
            font-size: 1rem;
            font-style: normal;
            font-weight: 400;
            color: #484848;
        }

    .card .card-header-title {
        font-size: 16px;
        line-height: 23px;
        margin-bottom: 0px;
        font-weight: 600;
    }

    .card .card-body {
        padding: 1.8rem 2rem;
    }

    .card .card-body-title {
        font-size: 18px;
        line-height: 26px;
        font-weight: 600;
    }

    .card .card-footer {
        background-color: #ffffff;
        border-top: 1px solid #e6e8eb;
    }
/* fim Card DEC */

.borderDec {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.borderDecPontilhada {
    border: 1px dotted #ccc;
}

.corWhatsapp {
    color: #25d366;
}

.icoMR {
    margin-right: 5px !important;
}

.icoML {
    margin-left: 5px !important;
}

.img-responsive, img {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-thumb {
    width: 50% !important;
}

.bg-whatsapp {
    background-color: #25d366;
    color: #fff;
}

.box-dec-success {
    border: 1px dotted #cccccc;
    background-color: #e4fff9;
    padding: 20px;
}

.box-dec-danger {
    border: 1px dotted #cccccc;
    background-color: #f2dede;
    padding: 20px;
}

.box-dec-warning {
    border: 1px dotted #cccccc;
    background-color: #fcf2c5;
    padding: 20px;
}

.box-dec-cinza {
    border: 1px dotted #cccccc;
    background-color: #f9f9f9;
    padding: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/* linhas */
.dec-linha-t {
    border-top: 1px dotted #ececec;
}
/* fim linhas */

/* table */
.box-dec table {
    background-color: #fff;
}

.box-dec h5 {
    font-size: 17px;
}
/* fim table */

/* Imagens */
img.imgs-dec {
    position: absolute;
    top: 0;
    left: 0;
    object-position: center 25%;
    transition: .35s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* fim Imagens */

.bg-img-cover {
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

/* patterns */
.dec-bg-pattern {
    background-image: url(/img/patterns/pattern01.png);
}
/* patterns */

.dec-blockquote {
    border-left: 3px solid var(--cor-principal);
    padding: 0 0 0 20px;
    margin: 0;
}

/* galeria dec */
.galeria-dec {
    position: relative;
}

    .galeria-dec a {
        margin: 0 10px 10px 0;
        display: block;
        float: left;
        width: 189px;
        height: 126px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        opacity: 0.8;
    }

        .galeria-dec a:hover {
            opacity: 1;
        }

/* A GALERIA DENTRO DA TABELA DE DOCUMENTOS   (28/08/2026)

   Mesma galeria de Noticias, ladrilho menor. Ela mora numa celula de
   tabela ao lado da coluna de anexos, e o ladrilho de 189px de la deixaria
   a tabela mais larga que a tela - com table-responsive isso vira barra de
   rolagem horizontal, e a coluna dos anexos sai de vista.

   A proporcao segue a mesma (3:2), entao a foto corta igual.

   DEPOIS do bloco .galeria-dec a, e nao antes: os dois seletores tem a
   MESMA especificidade, entao quem vence e quem vier por ultimo. Medido em
   28/08/2026 - com a regra antes, o ladrilho saia com os 189px de la. */
.dec-galeria-documento a {
    width: 110px;
    height: 74px;
    margin: 0 6px 6px 0;
}
/* fim galeria dec */

.d-flex {
    display: flex;
    align-items: center;
}

/* SubHeader */
header {
    background: transparent;
}

.header-two {
    width: 100%;
    float: left;
    box-shadow: none;
}

.subheader {
    /*background: url(../img/sub-header.jpg) no-repeat;
    background-size: cover;*/
    /*background: url(../images/h2factsbg.jpg) center no-repeat;*/
    background: none;
    /*background-color: #fff;*/
    height: auto;
    position: relative;
    margin-bottom: 30px;
    padding: 0 0 0;
}

    .subheader .txt {
        background-color: #f5f7fa;
        /*float: left;*/
        /*-webkit-box-shadow: 0 14px 18px -12px rgba(0, 0, 0, 0.18);
        -moz-box-shadow: 0 14px 18px -12px rgba(0, 0, 0, 0.18);
        box-shadow: 0 14px 10px -12px rgba(0, 0, 0, 0.18);*/
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding: 0;
        z-index: 99;
    }

.subheader-tit .txt h2 {
    color: var(--cor-texto);
    font-weight: 600;
    margin-bottom: 0;
    position: relative;
    font-size: 21px;
    margin: 20px 0;
}

.subheader .txt ul {
    text-align: left;
    padding: 10px 15px;
    margin-bottom: -25px;
}

    .subheader .txt ul li,
    .subheader .txt ul li a {
        display: inline-block;
        color: var(--cor-principal);
        font-size: 13px;
        text-align: left;
        font-weight: 300;
    }

        .subheader .txt ul li:last-child {
            font-weight: 600;
        }

        .subheader .txt ul li a:hover {
            color: #0e4a8f;
        }

        .subheader .txt ul li:after {
            content: "\f054";
            font-family: 'FontAwesome';
            padding: 0 10px 0 12px;
            color: #0e4a8f;
            font-weight: 700;
            font-size: 11px;
        }

        .subheader .txt ul li:first-child:after {
        }

.topbar ul.left-links li:after {
    content: "|";
    color: var(--cor-principal);
    line-height: 20px;
    padding: 0 5px;
}

/* Fim */

/* Modal */
.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    /*min-height: 100vh;*/
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.5);
}
/* fim Modal */

/* Organograma */
.organograma {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 20px;
    position: relative;
}

.organograma-box {
    background-color: var(--cor-cinza);
    border-radius: 10px;
    padding: 20px 10px;
    font-size: 17px;
    border: 1px dotted #ccc;
}

.organograma-pai > .children > .node > .organograma-box {
    background-color: #ccc;
    font-weight: 700;
    color: #000;
}

.node {
    text-align: center;
    padding: 0;
    border: 0 solid #ccc;
    border-radius: 8px;
    margin: 10px 5px;
    position: relative;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.children {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 10px;
    position: relative;
}

.node::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background: #ccc;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.children::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 0;
    background: #ccc;
    z-index: -1;
}

/* Remover linha do primeiro */
.children:first-child > .node::before {
    display: none;
}

/* Remover linha do último filho */
.children > .node:last-child::after {
    display: none;
}

/* fim Organograma */

/* Slider */
.slide-content-box a, .slider-caption a {
    background: var(--cor-principal);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 15px;
    display: inline-block;
    border-radius: 15px;
    padding: 15px 35px;
    letter-spacing: 1px;
}

    .slide-content-box a:hover, .slider-caption a:hover {
        background: var(--cor-principal-escuro);
        color: #fff;
    }
/* fim Slider */

.center {
    text-align: center;
}

.bordaPontilhadaPadMarg {
    border: 1px dotted #ccc;
    padding: 20px;
    margin: 20px 0;
}

.c1 {
    background: var(--cor-principal) !important;
}
/* Fim */

/* Panel */
.panel-default {
    border-color: #eee;
}

    .panel-default .panel-heading {
        color: var(--cor-principal);
        font-weight: 400;
    }

.panel-body {
    padding: 15px;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #eeeeee;
    text-align: left;
}

.panel-default .panel-body {
}
/* Fim */

/* Patrimonio */
#cidade_museu h4 {
    margin-bottom: 20px;
}

.smenu {
    border: 1px dotted #ccc;
    padding: 10px;
}

    .smenu a {
        display: block;
        background-color: #dcf0ff;
        padding: 3px 10px;
        font-size: 13px;
        margin-bottom: 2px;
        transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        -moz-transition: all 0.5s ease 0s;
        -o-transition: all 0.5s ease 0s;
        -ms-transition: all 0.5s ease 0s;
    }

    .smenu .tit {
        color: var(--cor-principal);
        display: block;
        font-weight: 400;
        margin-bottom: 10px;
    }

#geral {
    text-align: justify;
    position: relative;
    padding-bottom: 70px;
    min-height: 100%;
}
/* Turismo */

.border10 {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

.box {
    padding: 10px 16px;
    background-color: #fff;
    border: 1px solid #ccc;
}

/* Fim */

/* Telefones Uteis */

.panel-default .panel-heading {
    color: var(--cor-principal);
    font-weight: 400;
}

.panel-default > .panel-heading {
    padding: 10px;
    background: var(--cor-cinza);
}
/* Fim */

/* Acesso a Informação */
.sm-msg-esic {
    display: none;
}

.top-esic img {
    max-height: 30px;
    display: inline-block;
}

#formSic {
    font-size: 14px;
}


.lai-page {
    max-width: 1200px;
}


/* INTRO */

.lai-intro {
    padding: 15px 0 35px;
}

.lai-tag {
    display: inline-block;
    margin-bottom: 10px;
    color: #087ca1;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.lai-intro h1 {
    margin: 0 0 15px;
    font-size: 30px;
    font-weight: 700;
}

.lai-intro p {
    margin-bottom: 10px;
    color: #555;
    font-size: 16px;
    line-height: 1.7;
}


/* AÇÕES */

.lai-acoes {
    margin-bottom: 50px;
}

.lai-acoes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.lai-card-acao {
    padding: 30px;
    text-align: center;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    transition: all .25s ease;
}

    .lai-card-acao:hover {
        transform: translateY(-5px);
        border-color: #087ca1;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
    }

.lai-icone {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #edf8fb;
    color: #087ca1;
    font-size: 22px;
    transition: all .25s ease;
}

.lai-card-acao:hover .lai-icone {
    transform: scale(1.1);
}

.lai-card-acao h2 {
    margin-bottom: 10px;
    font-size: 19px;
}

.lai-card-acao p {
    min-height: 42px;
    color: #666;
}


/* ESTATÍSTICAS */

.lai-estatisticas {
    margin-bottom: 50px;
}

    .lai-estatisticas h2,
    .lai-atendimento h2,
    .lai-sobre h2 {
        margin-bottom: 25px;
        font-size: 24px;
        font-weight: 600;
    }

.lai-estatisticas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.lai-estatistica-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: #f7fafb;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    transition: all .25s ease;
}

    .lai-estatistica-card:hover {
        transform: translateY(-4px);
        border-color: #087ca1;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    }

    .lai-estatistica-card > i {
        font-size: 28px;
        color: #087ca1;
        transition: all .25s ease;
    }

    .lai-estatistica-card:hover > i {
        transform: scale(1.1);
    }

    .lai-estatistica-card div {
        display: flex;
        flex-direction: column;
    }

    .lai-estatistica-card strong {
        font-size: 27px;
        line-height: 1;
    }

    .lai-estatistica-card span {
        margin-top: 7px;
        color: #666;
    }


/* ATENDIMENTO */

.lai-atendimento {
    margin-bottom: 50px;
}

    .lai-atendimento .row {
        display: flex;
        flex-wrap: wrap;
    }

    .lai-atendimento .col-lg-6 {
        display: flex;
    }

.lai-atendimento-card {
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
}

.lai-atendimento-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 8px;
    background: #edf8fb;
    color: #087ca1;
    font-size: 20px;
}

.lai-atendimento-card h3 {
    margin-bottom: 12px;
    font-size: 19px;
}

.lai-atendimento-card > p {
    color: #666;
    line-height: 1.65;
}


/* CONTATO */

.lai-contato {
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

    .lai-contato li {
        display: flex;
        gap: 15px;
        padding: 13px 0;
        border-bottom: 1px solid #eee;
    }

        .lai-contato li:last-child {
            border-bottom: 0;
        }

        .lai-contato li > i {
            width: 18px;
            margin-top: 3px;
            color: #087ca1;
        }

    .lai-contato span {
        display: flex;
        flex-direction: column;
    }

    .lai-contato strong {
        margin-bottom: 2px;
        font-size: 13px;
    }


/* AVISO LOGIN */

.lai-login-aviso {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    padding: 18px;
    border-radius: 6px;
    background: #fff8e7;
}

    .lai-login-aviso > i {
        margin-top: 3px;
        color: #c98900;
        font-size: 18px;
    }

    .lai-login-aviso strong {
        display: block;
        margin-bottom: 5px;
    }

    .lai-login-aviso p {
        margin-bottom: 8px;
        color: #666;
    }


/* TEXTO */

.lai-sobre {
    max-width: 900px;
    padding-bottom: 30px;
}

    .lai-sobre p {
        color: #555;
        font-size: 15px;
        line-height: 1.8;
    }


/* MOBILE */

@media (max-width: 767px) {

    .lai-intro h1 {
        font-size: 27px;
    }

    .lai-acoes-grid,
    .lai-estatisticas-grid {
        grid-template-columns: 1fr;
    }

    .lai-card-acao,
    .lai-atendimento-card {
        padding: 22px;
    }
}
/* fim Acesso a Informação */


/* Ouvidoria */

.ouvidoria-page {
    max-width: 1200px;
}

.ouvidoria-intro {
    padding: 15px 0 45px;
}

.ouvidoria-tag {
    display: inline-block;
    margin-bottom: 10px;
    color: #087ca1;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ouvidoria-intro h1 {
    margin: 0 0 15px;
    font-size: 30px;
    font-weight: 700;
}

.ouvidoria-intro > p {
    margin-bottom: 30px;
    color: #555;
    font-size: 16px;
    line-height: 1.7;
}


/* AÇÕES */

.ouvidoria-acoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1200px;
}

.btn-ouvidoria {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #222;
    text-decoration: none;
    transition: .25s;
}

    .btn-ouvidoria > i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #087ca1;
        color: #fff;
        font-size: 19px;
    }

    .btn-ouvidoria span {
        display: flex;
        flex-direction: column;
    }

    .btn-ouvidoria strong {
        font-size: 16px;
    }

    .btn-ouvidoria small {
        margin-top: 3px;
        color: #777;
    }

    .btn-ouvidoria:hover {
        border-color: #087ca1;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
        transform: translateY(-2px);
    }


/* ESTATÍSTICAS */

.ouvidoria-estatisticas {
    margin-bottom: 50px;
}

    .ouvidoria-estatisticas h2 {
        margin-bottom: 25px;
        font-size: 24px;
        font-weight: 600;
    }

.estatisticas-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.estatistica-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: #f7fafb;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    transition: all 0.25s ease;
}

    .estatistica-card:hover {
        transform: translateY(-4px);
        border-color: #087ca1;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .estatistica-card > i {
        font-size: 28px;
        color: #087ca1;
    }

    .estatistica-card div {
        display: flex;
        flex-direction: column;
    }

    .estatistica-card strong {
        font-size: 27px;
        line-height: 1;
    }

    .estatistica-card span {
        margin-top: 7px;
        color: #666;
    }

@media (max-width: 767px) {
    .estatisticas-cards {
        grid-template-columns: 1fr;
    }
}


/* ATENDIMENTO */

.ouvidoria-atendimento {
    margin-bottom: 50px;
}

    .ouvidoria-atendimento > h2,
    .sobre-ouvidoria h2 {
        margin-bottom: 25px;
        font-size: 24px;
        font-weight: 600;
    }

    .ouvidoria-atendimento .row {
        display: flex;
        flex-wrap: wrap;
    }

    .ouvidoria-atendimento .col-lg-6 {
        display: flex;
    }

.atendimento-card {
    width: 100%;
    height: 100%;
    padding: 30px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fff;
}



.atendimento-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #edf8fb;
    border-radius: 8px;
    color: #087ca1;
    font-size: 20px;
}

.atendimento-card h3 {
    margin-bottom: 12px;
    font-size: 19px;
}

.atendimento-card > p {
    color: #666;
    line-height: 1.65;
}


/* CONTATO */

.dados-contato {
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

    .dados-contato li {
        display: flex;
        gap: 15px;
        padding: 13px 0;
        border-bottom: 1px solid #eee;
    }

        .dados-contato li:last-child {
            border-bottom: 0;
        }

        .dados-contato li > i {
            width: 18px;
            margin-top: 3px;
            color: #087ca1;
        }

    .dados-contato span {
        display: flex;
        flex-direction: column;
    }

    .dados-contato strong {
        margin-bottom: 2px;
        font-size: 13px;
        color: #444;
    }


/* AVISO LOGIN */

.login-aviso {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    padding: 18px;
    border-radius: 6px;
    background: #fff8e7;
}

    .login-aviso > i {
        margin-top: 3px;
        color: #c98900;
        font-size: 18px;
    }

    .login-aviso strong {
        display: block;
        margin-bottom: 5px;
    }

    .login-aviso p {
        margin-bottom: 8px;
        color: #666;
    }

    .login-aviso a {
        font-weight: 600;
    }


/* TEXTO FINAL */

.sobre-ouvidoria {
    padding-top: 10px;
    padding-bottom: 30px;
}

    .sobre-ouvidoria p {
        color: #555;
        font-size: 15px;
        line-height: 1.8;
    }


/* RESPONSIVO */

@media (max-width: 767px) {

    .ouvidoria-intro {
        padding-top: 20px;
    }

        .ouvidoria-intro h1 {
            font-size: 27px;
        }

    .ouvidoria-acoes,
    .ouvidoria-estatisticas {
        grid-template-columns: 1fr;
    }

    .btn-ouvidoria {
        padding: 18px;
    }

    .atendimento-card {
        padding: 22px;
    }
}

/* Fim Ouvidoria */


/* Ajustes no Layout */

/* top bar */
.h3-logo-row {
    /*background: url(../images/worldmap-dots.jpg) top center no-repeat;*/
    background: transparent;
}

    .h3-logo-row .h3-logo {
        text-align: center;
        padding: 12px 0;
    }



        .h3-logo-row .h3-logo a img {
            text-align: center;
            margin: 0 auto;
        }

.header-two .topbar {
    /*background: url(/img/npatt.png) var(--cor-principal);*/
    background: none;
    background-color: var(--cor-cinza);
    border-bottom: 1px dashed #eee;
    font-size: 14px;
}

.topbar ul.left-links a {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    color: var(--cor-principal);
}

    .topbar ul.left-links a:hover {
        color: var(--cor-secundaria);
    }

        .topbar ul.left-links a:hover .badge {
            color: #fff;
            background-color: var(--cor-secundaria);
        }

.topbar .badge {
    display: inline-block;
    min-width: 17px;
    padding: 3px 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--cor-principal);
    border-radius: 17px;
    margin-top: -3px;
}

a.search-icon {
    padding: 11px 20px !important;
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 17px;
}

    a.search-icon:hover {
        background-color: var(--cor-secundaria-claro) !important;
    }

a.bt-minha-conta {
    padding: 5px 10px !important;
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 13px;
    margin-top: 6px;
    border-radius: 10px;
}

    a.bt-minha-conta:hover {
        background-color: var(--cor-secundaria) !important;
        color: var(--cor-principal);
    }

    a.bt-minha-conta i {
        margin-right: 5px;
    }

.esic-topo {
    padding: 32px 0;
    /*text-align: center;*/
}

    .esic-topo a {
        display: inline-block;
    }

.busca-topo {
    padding: 42px 0;
    text-align: center;
}

.logo-rodape {
    text-align: center;
}

    .logo-rodape .logo-img {
        max-width: 180px;
        margin-bottom: 15px;
    }

.custom-logo {
    max-width: 270px;
}



/* fim top bar */


/* ============================================================
   Hierarquia de headings (SEO/acessibilidade)
   Cada regra abaixo replica o estilo do elemento que existia antes, para que a
   troca de tag (hN -> h1 com classe, ou h1 -> div) nao mude nada visualmente.
   ============================================================ */

/* O banner do subheader: <h1> nas paginas comuns, <div> nas de detalhe. */
.subheader-tit .txt .titulo-pagina {
    color: var(--cor-texto);
    font-weight: 600;
    margin-bottom: 0;
    position: relative;
    font-size: 21px;
    margin: 20px 0;
    /* line-height e font-family vinham de "body h1..h6" / bootstrap: nas paginas
       de detalhe este elemento e um <div> e nao herdaria nenhum dos dois. */
    line-height: 1.1;
    font-family: 'Montserrat', sans-serif;
}

/* Era .new-txt h4 (22px/700/25px, letter-spacing -.5px). */
.new-txt .titulo-publicacao {
    line-height: 25px;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.5px;
}

.news-detalhes .new-txt .titulo-publicacao {
    margin-bottom: 30px;
}

/* Era <h3 class="pb-0"> no detalhe da transparencia (valores do h3 do tema). */
.titulo-transparencia {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

/* Era <h5 class="p-b-20"> no detalhe da licitacao (o padding vem do .p-b-20,
   que continua na tag). */
.titulo-licitacao {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

/* .subtitulo virou <h1> no detalhe de municipios: zera o tamanho/margem de UA.
   Era um <div>, entao a fonte era a do body e nao a Montserrat que
   "body h1..h6" aplica. */
h1.subtitulo {
    font-size: 18px;
    line-height: inherit;
    font-family: inherit;
}

/* Era .vereador-detalhes .txt h2 (25px/600). */


.dec-arquivos-secretaria h5 {
    margin-bottom: 8px;
    color: var(--cor-principal);
    border-bottom: 1px solid #0031591f;
    padding-bottom: 10px;
}

.vereador-detalhes .txt .titulo-secretaria {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.1;
}

/* <h1> da home: existe para o robo, invisivel para o usuario. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Era o <span><strong> do cabecalho do diario; virou <h1>. font-family/color
   vinham de "body h1..h6" e o line-height do bootstrap: um <h1> traz os seus,
   entao os do <span> vao explicitos. */
.diario-materia-detalhes .diario-cabecalho .titulo-materia {
    font-family: inherit;
    color: inherit;
    display: block;
    background-color: #f4f4f4;
    margin: 2px 0;
    text-align: center;
    padding: 3px 0;
    font-size: 15px;
    font-weight: 700;
    /* o <span> herdava o line-height do body; o <h1> traz 1.1 do bootstrap. */
    line-height: inherit;
}


@media (max-width: 768px) {
    .redes-topo {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.redes-topo-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 44px 0
}

/* Ícones sociais */
.icon-social {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid #ddd;
}

    .icon-social:hover {
        background: var(--cor-secundaria);
        color: #fff;
        transform: translateY(-2px);
    }

/* Botão destaque */
.btn-info-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px 12px 15px;
    border-radius: 25px;
    background: var(--cor-principal);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-info-topo i {
        font-size: 20px;
    }

    .btn-info-topo:hover {
        background: var(--cor-secundaria);
        transform: translateY(-2px);
        color: #fff;
    }


/*Area Minha Conta */
.Area-MinhaConta {
    z-index: 0;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    font-weight: 700;
    color: var(--cor-principal);
    text-decoration: none;
    overflow: hidden;
    transition: color 0.3s ease;
    padding: 11px;
    box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.32);
    border: 1px solid #33333330;
}

    .Area-MinhaConta::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--cor-principal);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
        z-index: -1;
    }

    .Area-MinhaConta:hover {
        color: var(--cor-secundaria);
    }

    .Area-MinhaConta i {
        align-items: center;
        justify-items: center;
        padding: 5px;
    }

    .Area-MinhaConta:hover::before {
        transform: scaleX(1);
    }


/* menu */
.menu-principal,
.navbar-collapse.collapse {
    text-align: center;
    /*background-color: #fff;
    border: 1px dashed #eee;
    border-left: 0;*/
    /*position: relative;
    z-index: 100;*/
    height: 60px !important;
}

    .menu-principal ul {
        display: inline-block;
        float: none;
    }

        .menu-principal ul li {
        }

.h3-navbar {
    background-color: var(--cor-principal);
}

    .h3-navbar .navbar .navbar-nav > li > a {
        padding: 0 11px;
        line-height: 60px;
        position: relative;
        text-transform: none;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
    }

        .h3-navbar .nav > li > a:focus,
        .h3-navbar .nav > li > a:hover,
        .h3-navbar .nav > li > a:active,
        .h3-navbar .navbar .navbar-nav > li > a:hover {
            background: none;
            color: var(--cor-secundaria);
            font-weight: 600;
        }

    .h3-navbar .nav .open > a, .h3-navbar .nav .open > a:focus, .h3-navbar .nav .open > a:hover {
        background: none;
        color: var(--cor-secundaria);
    }

    .h3-navbar .navbar .navbar-nav > li > a:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        background: #d7d7d7;
        content: "";
    }

    .h3-navbar .navbar .navbar-nav > li.open > a:after {
        width: 0;
    }

    .h3-navbar .navbar .navbar-nav > li.active > a:after {
        width: 100%;
    }

    .h3-navbar .navbar .navbar-nav > li.active > a {
        color: var(--cor-secundaria);
    }

    .h3-navbar .dropdown-menu {
        display: none;
        min-width: auto;
        max-width: none;
        padding: 20px;
        margin: 0;
        font-size: 14px;
        background: #fff;
        border: 0;
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
        box-shadow: rgba(0, 0, 0, 0.18) 0px 14px 28px -5px;
        border-radius: 0 0 15px 15px !important;
    }

    .h3-navbar div.dropdown-menu {
        min-width: 640px;
        left: -160px;
    }

        .h3-navbar div.dropdown-menu ul {
            padding: 0;
            list-style: none;
            display: block;
        }

    .h3-navbar .dropdown-menu .titulo {
        font-weight: 700;
        font-size: 15px;
        background-color: var(--cor-cinza);
        border-radius: 0;
        padding: 5px 15px;
        border-left: 5px solid var(--cor-principal);
        border-right: 0 solid var(--cor-principal);
        text-transform: uppercase;
    }

    .h3-navbar .dropdown-menu .sub-menu a, .h3-navbar .dropdown-menu a {
        display: block;
        line-height: 25px;
        text-transform: none;
        font-weight: 500;
        font-size: 15px;
        border-bottom: 0 solid #eee;
        background: #fff;
        color: var(--cor-texto);
        padding: 0 10px;
        margin: 5px 0;
    }
        /*.h3-navbar .dropdown-menu .sub-menu a::after, .h3-navbar .dropdown-menu a::after {
                position: absolute;
                left: 0;
                top: 20px;
                width: 7px;
                height: 10px;
                background: var(--cor-principal);
                content: "";
                border-radius: 0 5px 5px 0;
                -webkit-transition: all 0.5s ease 0s;
                -moz-transition: all 0.5s ease 0s;
                -o-transition: all 0.5s ease 0s;
                -ms-transition: all 0.5s ease 0s;
                transition: all 0.5s ease 0s;
            }*/
        h3-navbar .dropdown-menu .sub-menu a::after, .h3-navbar .dropdown-menu a:hover::after {
            width: 20px;
        }

        .h3-navbar .dropdown-menu a:hover {
            background: transparent;
            color: var(--cor-secundaria);
            padding-left: 15px;
            font-weight: 700;
        }

    .h3-navbar .menu-last-li .dropdown-menu {
        right: 0;
        left: initial;
    }

#irMenu ul.nav li.openSubMenuHover:hover > ul.dropdown-menu {
    /* display: block;*/
    margin: 0;
}

.open > .dropdown-menu {
    display: block;
}

.mini_menu #irMenu {
    background-color: var(--cor-principal);
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1030;
    top: 0;
    -webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.75);
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.mini_menu .h3-navbar .navbar .navbar-nav > li > a {
}

.mini_menu .h3-navbar .navbar .navbar-nav > li.active > a {
    color: var(--cor-secundaria);
}

.dropdown-toggle::after {
    transform: translateY(0);
}

.menu-mapa {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

    .menu-mapa > li {
        background-color: var(--cor-cinza);
        border-radius: 10px;
        padding: 20px 20px;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
    }

        .menu-mapa > li,
        .menu-mapa > li > a {
            font-weight: 600;
            list-style: none;
        }

            /* TÍTULO DE GRUPO não é link: o que leva a algum lugar são os filhos, logo
   abaixo dele. Por isso ele não ganha cor nem cursor de link. */
            .menu-mapa > li > a.dropdown-toggle {
                color: var(--cor-texto);
                cursor: default;
            }

            /* ITEM SEM SUBITENS é o próprio destino, e é o único link do cartão.

   Estas duas declarações estavam na regra acima, valendo para TODO link de
   primeiro nível: o item sem subitens herdava a cara de título de grupo —
   cor de texto e cursor de seta — e ficava com jeito de texto morto mesmo
   tendo href. Foi o que o David viu em Licitações no mapa do site. */
            .menu-mapa > li > a:not(.dropdown-toggle) {
                color: var(--cor-principal);
            }

            /* .bt-home e classe desde 26/08/2026: o menu e desenhado duas
               vezes na pagina, e id repetido e HTML invalido. */
            .menu-mapa > li.bt-home {
                display: none;
            }

    .menu-mapa .dropdown-menu {
        display: block;
        background-color: transparent;
        position: relative;
        float: none;
        margin: 0;
        margin-top: 10px;
        padding: 0;
        border: 0;
        top: auto;
        box-shadow: 0 0 0 rgba(0,0,0,.175);
    }

        .menu-mapa .dropdown-menu ul {
            margin: 0;
            padding: 0;
            border: 0;
        }

            .menu-mapa .dropdown-menu ul li {
                margin-left: 20px;
                padding: 0;
                border: 0;
            }

        .menu-mapa .dropdown-menu > li {
            list-style: circle;
            margin: 0;
            padding: 0;
            margin-left: 20px;
        }

        .menu-mapa .dropdown-menu li > a {
            color: var(--cor-principal);
            display: inline-block;
            padding: 3px 0;
            font-weight: 400;
        }

        .menu-mapa .dropdown-menu li.titulo {
            list-style: none;
            margin-left: 0;
            margin-top: 20px;
            font-size: 13px;
        }
/* fim menu */

/* home */
.Mayor-video-msg {
    background: transparent;
    /*background-color: var(--cor-cinza);*/
    padding: 20px 0 60px;
}

    .Mayor-video-msg .city-tour {
        margin-top: -50px;
        box-shadow: 0 0 0 rgba(0, 0, 0, .15);
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
        border-radius: 20px;
        border: 15px solid #fff;
        background-color: #fff;
    }

        .Mayor-video-msg .city-tour a {
            position: initial;
            right: auto;
            bottom: auto;
            border-radius: 10px;
        }

            .Mayor-video-msg .city-tour a:hover img {
                opacity: 1;
            }

            .Mayor-video-msg .city-tour a img {
                border-radius: 10px;
            }

.Mayor-welcome h2 {
    font-weight: 700;
    color: #000;
    margin: 0 0 10px;
    font-size: 25px;
}

.Mayor-welcome strong {
    color: var(--cor-principal);
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.Mayor-welcome p {
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 20px;
}

.vereadores-home {
    padding: 60px 0;
}

/*Lei aldir blanc 2*/
/*.card {
    background-color: #f9f9f9;
    border-left: 5px solid var(--cor-principal);
    margin-top: 18px;
}*/

.link-custom {
    color: #f5f7fa;
    font-weight: 500;
    border: none;
    transition: all 0.3s ease;
}

    .link-custom i {
        color: var(--cor-secundaria);
        transition: transform 0.3s ease;
    }

    .link-custom:hover {
        background-color: #f5f7fa !important;
        color: #f5f7fa;
    }

        .link-custom:hover i {
            background-color: #f5f7fa !important;
            transform: translateX(5px);
        }


/* Login */
.login-account {
    background: var(--cor-principal);
    width: 100%;
    float: left;
    padding: 44px 30px 40px;
}

.register-account input[type="submit"] {
    width: 100%;
    background: var(--cor-principal);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    line-height: 53px;
    border: 0px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
}

    .register-account input[type="submit"]:hover {
        background-color: var(--cor-secundaria);
    }

.login-account input[type="submit"] {
    width: 100%;
    background: #fff;
    color: var(--cor-principal);
    text-align: center;
    text-transform: uppercase;
    line-height: 53px;
    border: 0px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
}

    .login-account input[type="submit"]:hover {
        background: var(--cor-secundaria);
        color: #fff;
    }
/* fim Login */

/* Portal transparência */
.portal-transparencia .box {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: 1px dotted var(--cor-principal);
    padding: 20px 20px;
    display: block;
    width: 100%;
    background-color: #fff !important;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}

.portal-transparencia a.box:hover {
    background-color: var(--cor-principal) !important;
    color: #fff !important;
}

.portal-transparencia .box i {
    color: var(--cor-principal);
    font-size: 25px;
    display: block;
    margin-bottom: 10px;
}

.portal-transparencia a.box:hover i {
    color: #fff;
}

.portal-transparencia .box span {
    color: #000;
}

.portal-transparencia .box:hover span {
    color: #fff;
}
/* fim Portal transparência */

.box-acesso-rapido-topo {
    margin-top: 0;
    padding: 20px 0 40px;
    position: relative;
    z-index: 9999;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin-bottom: 0 !important;
    background-color: var(--cor-secundaria) !important;
}

.box-acesso-rapido {
    margin-top: 0;
    padding: 20px 0 40px;
    position: relative;
    z-index: 9999;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin-bottom: 40px;
}

    /* O AZUL AQUI MEDIU O FUNDO ERRADO   (corrigido em 27/08/2026)

       Em 26/08 o titulo passou de branco para azul por causa de um 1.81
       de contraste calculado contra o verde da marca. So que o verde
       NAO e o que fica atras do texto: a secao tambem carrega a classe
       rs-home-02, que poe fundo02.jpg com 'cover' e, por cima dela, uma
       camada de preto a 54%. background-color e background-image sao
       propriedades diferentes - o verde pinta ATRAS da foto e nunca
       aparece.

       Medido nos 38.760 pixels que ficam sob o titulo, com a camada
       escura aplicada:

           branco -> pior pixel 5.63, medio 8.40, nenhum abaixo de 3
           azul   -> pior pixel 1.04, medio 1.58, TODOS abaixo de 3

       Ou seja: o azul nao corrigiu contraste, criou o pior contraste da
       home. O branco volta, e volta passando.

       O azul segue valendo para a OUTRA .box-acesso-rapido, a do rodape
       do _Layout: aquela nao tem rs-home-02 nem imagem, e fica sobre
       fundo claro. Por isso o branco entra so no -topo, abaixo. */
    .box-acesso-rapido h2 {
        margin: 20px 0 10px !important;
        font-weight: 700 !important;
        font-size: 31px !important;
        color: var(--cor-principal) !important;
    }

        .box-acesso-rapido h2 i {
            color: var(--cor-principal-claro);
            font-size: 25px;
            margin-left: 10px;
        }

/* Mesma especificidade da regra de cima, entao vence por vir depois.

   O branco virou fallback em 03/09/2026: a cor sai do painel quando alguem
   configura, e continua branca enquanto ninguem configurar. */
.box-acesso-rapido-topo h2 {
    color: var(--ar-titulo, #fff) !important;
}

    .box-acesso-rapido-topo h2 i {
        color: var(--ar-titulo, #fff);
    }

/* ---- Fundo do Acesso Rapido, configuravel pelo painel (03/09/2026) --------

   ANTES ESTE BLOCO USAVA rs-home-02, que e compartilhada com a secao
   recent-events da propria home. Alterar aquela classe, ou deixar de aplica-la
   aqui quando nao ha imagem, mudaria o outro bloco junto. Por isso o Acesso
   Rapido ganhou classe propria.

   O padding e o min-height ficam na classe BASE, nao na variante com imagem:
   e o que garante a mesma altura com foto e sem foto. Sem imagem o bloco nao
   encolhe nem abre espaco vazio - ele so troca a foto pela cor.

   SEM IMAGEM A CAMADA DE CONTRASTE NAO EXISTE. Ela serve para o texto
   continuar legivel sobre a foto; sobre uma cor escolhida no painel, ela
   apenas pintaria por cima e devolveria uma cor diferente da que o operador
   viu no seletor. */
.dec-ar-fundo {
    position: relative;
    padding: 50px 0 60px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--ar-fundo, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    /* Cor chapada e degrade chegam os dois em --ar-fundo, ja montados como
       linear-gradient la no servidor, entao aqui so sobra tratar a foto. */
    .dec-ar-fundo-imagem {
        background-image: var(--ar-imagem);
    }

        .dec-ar-fundo-imagem::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--ar-overlay-cor, var(--cor-principal));
            opacity: var(--ar-overlay-opacidade, 0.5);
            z-index: 1;
        }

    /* O conteudo fica acima da camada. */
    .dec-ar-fundo > * {
        position: relative;
        z-index: 2;
    }

/* SEM FUNDO PRÓPRIO: FUNDO E ESPAÇO DA LINHA (14/09/2026).

   O Acesso Rápido virou bloco repetível, e o fundo passou a ser da linha
   da grade (decisão do David). O bloco sem fundo próprio perde a cor fixa
   da .box-acesso-rapido-topo — que tem !important — e os 50px/60px de
   padding e o min-height da .dec-ar-fundo. O flex fica: é ele que dá a
   largura do conteúdo no celular. O bloco migrado com fundo próprio não
   leva esta classe e continua como sempre foi. */
.dec-ar-na-linha.box-acesso-rapido-topo {
    background-color: transparent !important;
    padding: 0;
    min-height: 0;
}


.box-acesso-rapido a.box,
.box-acesso-rapido a.box:active,
.box-acesso-rapido a.box:focus,
.box-acesso-rapido a.box:visited {
    -webkit-border-radius: 5px;
    border: 0;
    padding: 20px;
    display: block;
    width: 100%;
    background-color: var(--ar-btn-fundo, #fff);
    text-align: center;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0 22px -5px rgba(0, 0, 0, 0.18);
    -moz-box-shadow: 0 0 22px -5px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 8px 15px -1px rgb(88 84 84 / 26%);
}

    .box-acesso-rapido a.box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--ar-btn-hover-fundo, var(--cor-principal)) !important;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease-in-out;
        z-index: -1; /* Fica atrás do texto e ícone */
    }


    .box-acesso-rapido a.box i,
    .box-acesso-rapido a.box .titulo {
        position: relative;
        z-index: 2;
        transition: color 0.4s ease;
    }

    .box-acesso-rapido a.box:hover {
        color: var(--ar-btn-hover-texto, #fff) !important;
        background-color: var(--ar-btn-hover-fundo, var(--cor-principal)) !important;
        font-weight: 900;
        border: var(--cor-secundaria) !important;
    }

    .box-acesso-rapido a.box i {
        font-size: 31px;
        color: var(--ar-btn-texto, var(--cor-principal)) !important;
    }

    .box-acesso-rapido a.box:hover::before {
        transform: scaleX(1);
    }

    .box-acesso-rapido a.box:hover i {
        color: var(--ar-btn-hover-texto, #fff) !important;
    }

    .box-acesso-rapido a.box div {
        width: 100%;
    }

    .box-acesso-rapido a.box .titulo {
        display: block;
        font-weight: 500;
        color: var(--ar-btn-texto, var(--cor-principal));
        margin-top: 10px;
        line-height: 17px;
    }

    .box-acesso-rapido a.box:hover .titulo {
        font-weight: 500;
        color: var(--ar-btn-hover-texto, #fff);
    }

    .box-acesso-rapido a.box .subtitulo {
        display: block;
        font-size: 12px;
    }

/*.box-acesso-rapido .box a {
        display: inline-block;
        margin-top: 5px;
        color: var(--cor-principal);
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 10px;
    }

        .box-acesso-rapido .box a:hover {
            color: var(--cor-principal) !important;
            background-color: #fff !important;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }*/

.noticias-home .noticias-home-3pri {
    margin-top: -20px;
}

    .noticias-home .noticias-home-3pri .small-img-post {
        border-radius: 20px;
        border: solid 10px #fff;
    }

.noticias-home {
    padding-bottom: 50px;
}

    .noticias-home .event-post-full .thumb {
        width: 360px;
        min-width: 360px;
        float: none;
        position: relative;
        overflow: hidden;
        height: 254px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
    }

    .noticias-home .event-post-full .event-post-content {
        width: auto;
        float: none;
    }

    .noticias-home .event-post-txt h5 {
        margin: 0 0 15px;
        font-weight: 700;
        letter-spacing: -.5px;
        font-size: 21px;
    }

    .noticias-home .small-img-post {
        width: 100%;
        display: block;
    }

        .noticias-home .small-img-post .thumb {
            height: 200px;
        }

        .noticias-home .small-img-post h2 {
            font-size: 15px;
            text-align: left;
            line-height: 19px;
            font-weight: 700;
            margin: 0 0 15px;
            letter-spacing: -.5px;
            color: #000;
        }

.news-post-txt h2 a {
    color: #333333;
}

    .news-post-txt h2 a:hover {
        color: var(--cor-principal);
    }

.noticias-home .news-post .news-post-txt {
    width: 100%;
}

/* Redes Sociais */
.rs-home {
    padding: 50px 25px;
    border-radius: 10px;
    color: var(--cor-principal);
    text-align: center;
    position: relative;
}

    .rs-home::before {
        content: "";
        display: block;
        width: 60px;
        height: 4px;
        margin: 0 auto 20px;
        background: var(--cor-principal);
        border-radius: 2px;
    }

    .rs-home h2 {
        font-size: 27px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .rs-home p {
        color: #6b7280;
        font-size: 15px;
        margin-top: 6px;
    }

    .rs-home a {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        color: var(--cor-principal);
        margin: 30px 18px 0;
        text-decoration: none;
        transition: transform 0.25s ease;
    }

        .rs-home a:hover {
            transform: translateY(-6px);
        }

        .rs-home a i {
            font-size: 34px;
            width: 78px;
            height: 78px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 6px 16px rgba(0,0,0,0.08);
            transition: box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
        }

        .rs-home a:hover i {
            background: var(--cor-principal);
            color: #fff;
            box-shadow: 0 10px 24px rgba(0,0,0,0.16);
        }

        .rs-home a span {
            display: block;
            margin-top: 10px;
            font-size: 14px;
            font-weight: 600;
        }
/* Fim Redes Sociais */

/* Seção Nossa Historia */

/* O FUNDO SAIU DAQUI (13/09/2026). Esta seção pintava a própria faixa: cor
   principal, a foto img/fachada.jpg e uma camada preta a 70% num ::before.
   Nada disso era configurável. Agora o fundo é da LINHA — imagem, cor da
   camada e opacidade, na tela da grade —, e a migration SecoesFundoNaLinha
   gravou na linha da Nossa História exatamente estes valores (foto da fachada,
   camada preta a 70%, cor da linha #00217d por baixo), para a aparência
   continuar a mesma.

   O TEXTO CONTINUA BRANCO, porque o desenho da seção é para fundo escuro.
   Tirar a imagem da linha sem pôr uma cor escura deixa o texto branco sobre
   o claro.

   A ALTURA ACOMPANHA O TEXTO (14/09/2026, pedido do David). Havia um
   min-height de 550px com o conteúdo centralizado: texto curto boiava numa
   faixa alta, e o espaço em volta mudava com o tamanho do texto e da tela.
   Saíram o min-height e o espaço vertical fixo (25px embaixo; 40px em cima e
   embaixo no celular). O espaço agora é o padding de cima e de baixo da
   LINHA, na grade — a migration SecoesNossaHistoriaAlturaAutomatica deu
   88/113, o que a faixa tinha no computador com o texto de então. */
.rs-home-01 {
    position: relative;
    padding: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rs-home-01 > * {
        position: relative;
        z-index: 2;
    }

    .rs-home-01 p {
        color: #ffffff !important;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
    }

    .rs-home-01 h1,
    .rs-home-01 h2,
    .rs-home-01 p {
        color: #ffffff;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
    }

    .rs-home-01 .title-style-3 {
        text-align: center;
        color: #fff;
        margin: 0;
    }

        .rs-home-01 .title-style-3 h2 {
            color: #fff !important;
        }

        .rs-home-01 .title-style-3 p {
            color: #fff !important;
            font-weight: 500;
        }

            .rs-home-01 .title-style-3 p:before {
                width: 0;
                height: 0;
                content: "";
            }

    .rs-home-01 a {
        display: inline-block;
        color: #fff;
        margin: 40px 10px 0;
    }

        .rs-home-01 a i {
            font-size: 75px;
        }

        .rs-home-01 a span {
            display: block;
        }


@media (max-width: 767px) {
    .rs-home-01 {
        padding: 0 20px;
    }
}
/* Fim Seção Nossa Historia */


/* A classe .rs-home-02, do Fique por Dentro, saiu em 13/09/2026 junto com o
   tipo fixo: ele virou bloco genérico. */

.enquete-uf {
    margin-bottom: 50px;
    background-color: var(--cor-cinza);
    padding: 50px 0;
}

.box-uf span {
    display: block;
    font-size: 21px;
    font-weight: 600;
}

.enquete-uf h3 {
    font-size: 17px;
    margin-bottom: 15px;
}

.enquete-uf .uf-box {
    display: block;
    background-color: var(--cor-cinza);
    border-radius: 10px;
    padding: 10px 10px;
    margin: 8px 0;
    font-size: 13px;
    font-weight: 500;
}

    .enquete-uf .uf-box:hover {
        background-color: var(--cor-principal);
        color: #fff;
    }

.enquete-uf .box-uf {
    display: block;
    border: 1px dotted #ccc;
    padding: 15px 20px;
    border-radius: 10px;
    width: 100%;
    background-color: #fff;
}

.box-enquete {
    display: block;
    border: 0 dotted #ccc;
    padding: 15px 20px;
    border-radius: 10px;
    background-color: var(--cor-principal);
    width: 100%;
    color: #fff;
}

    .box-enquete span.titulo {
        font-size: 17px;
        margin: 0 0 10px 0;
        text-align: center;
        font-weight: 600;
        color: #fff;
        display: block;
    }

    .box-enquete span {
        margin: 20px 0;
        display: block;
    }

    .box-enquete label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 300;
        font-size: 13px;
    }

    .box-enquete a {
        margin-top: 20px;
    }

.box-agenda {
    font-size: 15px;
}

    .box-agenda .itens {
        display: block;
        margin: 20px 0;
    }

        .box-agenda .itens span,
        .box-agenda .itens strong {
            font-weight: 700;
        }





.sessoes-home {
    padding: 100px 0;
    background: none;
}

    .sessoes-home h5 {
        font-size: 17px;
        text-align: left;
    }

    .sessoes-home .event-post {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .sessoes-home .event-post-loc {
        margin-top: auto;
        padding: 0;
        text-align: right;
        background-color: var(--cor-cinza);
        color: var(--cor-principal);
        font-weight: 600;
    }

        .sessoes-home .event-post-loc a {
            margin-left: 20px;
            color: var(--cor-principal);
        }

    .sessoes-home .event-meta {
        margin: 0 0 0;
        padding: 0;
        list-style: none;
    }

.box-ultimas {
    padding-bottom: 50px;
}

    .box-ultimas .title-style-3 {
        text-align: center;
    }

        .box-ultimas .title-style-3 p:before {
            position: absolute;
            left: 0;
            right: 0;
            top: 30px;
            bottom: 0;
            margin: auto;
            width: 30px;
            height: 3px;
            background: var(--cor-principal-claro);
            content: "";
        }

.deprt-icon-box h2 {
    line-height: 22px;
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 18px;
}
/* fim home */

/* Diário Oficial */
.diariooficial .news-box-f a {
    float: none;
    border-left: 0 solid #eee;
    width: auto;
    height: auto;
    text-align: center;
    line-height: 50px;
    color: #fff;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 5px;
    font-weight: 400;
    background-color: var(--cor-principal);
    /* Os botões do rodapé do card são <a> inline: sem margem, ficam separados
       só pelo espaço do HTML, e com fundo colorido isso os deixa colados.
       A margem entra NESTA regra, e não numa nova mais abaixo, porque duas
       regras de mesma especificidade se resolvem pela ordem no arquivo — e
       essa disputa já custou caro aqui antes. */
    margin-right: 10px;
}

    /* O último não empurra nada: a folga da direita é o padding do container. */
    .diariooficial .news-box-f a:last-child {
        margin-right: 0;
    }

    .diariooficial .news-box-f a:hover {
        color: #fff;
        background-color: var(--cor-principal-escuro) !important;
    }

.diario-materia-detalhes {
}

    .diario-materia-detalhes .diario-cabecalho span {
        display: block;
        background-color: #f4f4f4;
        margin: 2px 0;
        text-align: center;
        padding: 3px 0;
        font-size: 15px;
    }
/* fim Diário Oficial */

/* Vereadores */
.vereadores .team-box {
    width: 100%;
    float: left;
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: -1px;
    box-shadow: 0 0 0 rgba(0,0,0,0.07);
    border: 1px solid #eee;
    padding: 15px;
}

    .vereadores .team-box:hover {
        background: var(--cor-cinza);
        border-left: 5px solid var(--cor-principal);
    }

    .vereadores .team-box .team-thumb {
        width: auto;
        flex: none;
        overflow: hidden;
        position: relative;
    }

    .vereadores .team-box .team-txt {
        width: auto;
        float: none;
        padding: 0;
    }

        .vereadores .team-box .team-txt span {
            background-color: var(--cor-principal);
            color: #fff;
            border-radius: 10px;
            padding: 2px 10px;
            display: inline-block;
            margin-top: 10px;
            font-size: 13px;
        }

    .vereadores .team-box .team-thumb img {
        width: 100px;
        height: auto;
        margin-right: 20px;
    }

    .vereadores .team-box .team-thumb:after,
    .vereadores .team-box:hover .team-thumb:after {
        background-color: transparent;
        width: 0;
        height: 0;
    }

    .vereadores .team-box .team-txt h3,
    .vereadores .team-box .team-txt h5 {
        font-weight: 700;
        margin: 0 0 10px 0;
        font-size: 15px;
        text-align: left;
    }

    .vereadores .team-box .team-txt p {
        font-size: 15px;
        padding: 0;
        margin: 0;
    }

/* O h3 ENTROU AQUI JUNTO DO h5   (27/08/2026)

   O nome da secretaria era <h5> e virou <h3> em 5d4ec22, para fechar a
   hierarquia de cabecalhos do eMAG - depois do <h2> da secao, um <h5>
   pulava dois niveis. A troca no HTML estava certa; o que faltou foi
   trazer o tamanho junto. Sem o h3 aqui a regra deixa de casar e o nome
   cai no 'body h3' do tema (custom.css), que e 32px: o nome da
   secretaria ficava MAIOR que o titulo da secao acima dele.

   Medido na home publicada em 27/08/2026: 32px, o mesmo tamanho do
   'Fique por dentro'. Antes da troca eram estes 13px.

   Nivel de cabecalho e tamanho de letra sao coisas separadas: o nivel
   diz a ESTRUTURA, para leitor de tela e para o sumario da pagina; o
   tamanho diz o PESO VISUAL. Rebaixar o h3 de volta para h5 so para
   ficar pequeno desfaria a correcao do eMAG. */
.mesadiretora .team-box .team-txt h3,
.mesadiretora .team-box .team-txt h5 {
    font-weight: 700;
    margin: 0 0 7px;
    font-size: 13px;
    text-align: left;
}

.mesadiretora .team-box .team-thumb {
    width: 40%;
    float: left;
    overflow: hidden;
    position: relative;
}

.mesadiretora .team-box .team-txt {
    width: 60%;
    float: left;
    padding: 10px 20px 0 20px;
}

    .mesadiretora .team-box .team-txt .dep {
        font-size: 13px;
        text-align: left;
        line-height: 15px;
        color: var(--cor-principal);
    }

.mesadiretora ul.team-social {
    margin: 10px 0 0 0;
    padding: 5px 0 0;
    list-style: none;
    border-top: 1px solid #eeeeee;
    position: relative;
}

    .mesadiretora ul.team-social a i {
        color: #bbb;
        font-size: 11px;
        margin-left: 5px;
    }


.vereador-detalhes {
    margin-top: 50px;
}

    .vereador-detalhes .dados {
        margin-bottom: 40px;
    }

    .vereador-detalhes .img img {
        width: 260px;
        margin-right: 30px;
        border: 10px solid var(--cor-cinza);
    }

    .vereador-detalhes .txt h2 {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .vereador-detalhes .txt span {
        display: block;
    }

        .vereador-detalhes .txt span i {
            color: var(--cor-principal);
        }

    .vereador-detalhes .team-details-txt .panel-body {
        padding: 20px;
    }

        .vereador-detalhes .team-details-txt .panel-body .contatos {
            margin-top: 20px;
        }

            .vereador-detalhes .team-details-txt .panel-body .contatos .titulo {
                display: block;
                font-weight: 600;
                margin-bottom: 10px;
            }

            .vereador-detalhes .team-details-txt .panel-body .contatos a {
                display: block;
                font-size: 15px;
            }
/* fim Vereadores */

/* notícias */
.news-box {
    margin-bottom: 20px !important;
    display: block;
}

.news-detalhes .new-txt {
    padding: 0;
}

    .news-detalhes .new-txt h4 {
        margin-bottom: 30px;
    }

.news-box-f span {
    display: inline-block;
    width: 60%;
    text-align: right;
    margin: 0 0 0 0;
}

.news-box-f {
    border-top: 1px solid #eeeeee;
    overflow: hidden;
    line-height: initial;
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    background-color: var(--cor-cinza);
    color: var(--cor-principal);
    padding: 10px 20px;
}

.new-txt h3 {
    line-height: 20px;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    letter-spacing: -.5px;
}

.new-txt h4 {
    line-height: 25px;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.5px;
}

.new-txt h6 {
    line-height: 30px;
    font-size: 27px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.5px;
}

.new-txt ul.news-meta li:after {
    content: "|";
    color: #cccccc;
    padding: 0 5px;
}

.news-box-dec .ementa {
    margin-bottom: 20px;
}

    .news-box-dec .ementa .tit {
        display: block;
        font-weight: 700;
        font-size: 19px;
    }

.news-box-dec .autoria {
    margin-top: 30px;
    text-align: left;
}

    .news-box-dec .autoria .tit {
        display: block;
        font-weight: 700;
        font-size: 19px;
        margin-bottom: 15px;
    }

    .news-box-dec .autoria .avulso {
        display: block;
        margin-bottom: 15px;
    }

    .news-box-dec .autoria img {
        width: 40px;
        margin-right: 10px;
    }

    .news-box-dec .autoria span {
        line-height: 15px;
        font-size: 14px;
        font-weight: 500;
    }

.news-box-dec .informacoes {
    display: flex; /* Torna o container .informacoes um container flexível */
    justify-content: space-between; /* Espaça os itens filhos igualmente */
}

    .news-box-dec .informacoes .informacoes-box {
        flex: 1; /* Permite que cada .informacoes-box cresça para ocupar o espaço disponível */
        margin: 0 5px; /* Adiciona um espaço entre as .informacoes-box */
        border: 1px solid #eee; /* Adiciona uma borda para visualização */
        padding: 10px; /* Adiciona um preenchimento interno */
        box-sizing: border-box;
        border-radius: 10px;
        font-size: 15px;
        text-align: center;
    }

        .news-box-dec .informacoes .informacoes-box span {
            display: block;
            border-radius: 10px;
            padding: 5px 10px;
            font-weight: 600;
            background-color: var(--cor-cinza);
            margin-bottom: 5px;
        }

.embed-pdf {
    margin-top: 30px;
}

.news-full .new-txt h6 {
    font-size: 19px;
    line-height: 28px;
}

.news-full .new-txt .autoria {
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
}

.news-box:hover .news-box-f a {
    background: var(--cor-principal);
    color: #fff;
}

.news-box:hover .new-txt h6 a,
.news-box:active .new-txt h6 a {
    color: var(--cor-principal-claro);
}

.title-style-3 p:before {
    background: var(--cor-principal) !important;
}

.new-thumb:after {
    background: rgba(0,75,144,.1);
    width: 100%;
    height: 0%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    z-index: 9;
    opacity: 0;
}

.news-details .new-thumb:after {
    background: none;
}

.new-thumb i {
    padding: 0 10px;
}

.widget .recent-posts h6 {
    line-height: 16px !important;
}

    .widget .recent-posts h6 a {
        color: #333;
        font-weight: 400;
        line-height: 16px !important;
        font-size: 11px;
    }
/* fim notícias */

.recent-events .event-list {
    margin: 0 0 15px;
    padding: 0 0 5px;
    list-style: none;
    width: 100%;
    float: left;
    border-bottom: 1px solid #eeeeee;
    position: relative;
}


/* LEI ALDIR BLANC */
.list-group {
    color: var(--cor-texto);
}

.img-mapa {
    display: flex !important;
    margin: 0 auto !important;
}

/* Fim Localização */


/* Dados do Município */
.tabela-municipio {
    width: 100%;
    border-collapse: collapse;
}

    .tabela-municipio th,
    .tabela-municipio td {
        padding: 8px;
        border: 1px solid #ddd;
    }

.titulo-principal {
    background-color: #288033;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    padding: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.titulo-secao {
    background-color: #288033;
    color: #ffffff;
    text-align: left;
    padding: 10px;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.rotulo {
    font-weight: bold;
    width: 35%;
}

.linha-alternada {
    background-color: #f2f6f4;
}

/* Fim Dados do Município */


/* Simbolos e Hino */
.hino {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 45px;
}


.linha {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 32px;
}

/* Fim Simbolos e Hino */


/* Diárias e Adiantamentos */
.form-busca-diarias {
    background: none;
    background-color: var(--cor-principal);
    border-radius: 3px;
    padding: 30px 30px 35px;
}

    .form-busca-diarias ul li.col-md-2,
    .form-busca-diarias ul li.col-md-4,
    .form-busca-diarias ul li.col-md-6 {
        padding: 0 6px;
    }
/* fim Diárias e Adiantamentos */


/* Form busca padrão */
.form-busca-padrao {
    background: none;
    background-color: var(--cor-cinza);
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px dashed #ccc;
}

    /* h2 e h5: os formularios de busca subiram para h2 porque vinham logo
       depois do h1 da pagina e criavam um salto de nivel (eMAG 1.3). O h5
       fica na lista para nao quebrar quem ainda nao subiu. */
    .form-busca-padrao h2,
    .form-busca-padrao h5 {
        font-size: 15px;
        color: var(--cor-principal);
        font-weight: 700;
        margin: 0 0 20px;
    }

    .form-busca-padrao .form-control {
        border: 1px solid #ccc;
        box-shadow: none;
        padding: 0 16px;
        line-height: 42px;
        height: 43px;
        margin: 0;
    }

    .form-busca-padrao button {
        float: none;
        border: 0px;
        padding: 0 20px;
        background: var(--cor-principal);
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        line-height: 42px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 400;
        display: block;
        width: 100%;
    }

        .form-busca-padrao button:hover {
            background: var(--cor-principal-escuro);
            color: #fff;
        }

    .form-busca-padrao ul li.col-md-2,
    .form-busca-padrao ul li.col-md-3,
    .form-busca-padrao ul li.col-md-4,
    .form-busca-padrao ul li.col-md-6,
    .form-busca-padrao ul li.col-md-8,
    .form-busca-padrao ul li.col-md-10,
    .form-busca-padrao ul li.col-md-12 {
        padding: 0 6px;
    }

/* EMPILHADO, os campos ficavam colados.

       O .form-control acima tem margin 0, que e o certo enquanto os campos
       dividem uma linha - margem vertical ali so engordaria o bloco. Abaixo de
       992px o col-md deixa de valer, cada campo vira uma linha inteira e o
       mesmo margin 0 gruda um no outro. Medido em 25/08/2026 a 375px: 0px
       entre todos os campos.

       A margem vai na <li> e nao no .form-control porque o botao de buscar nao
       e um .form-control e precisa do mesmo respiro. A ultima nao leva margem:
       quem separa os dois grupos e o m-t-15 do segundo <ul>. */
@media (max-width: 991px) {
    .form-busca-padrao ul li[class*="col-"] {
        margin-bottom: 10px;
    }

        .form-busca-padrao ul li[class*="col-"]:last-child {
            margin-bottom: 0;
        }
}

/* fim Form busca padrão */

/* Minha Area */
#minha-area ul.counter {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

    #minha-area ul.counter .col-md-4,
    #minha-area ul.counter .col-md-6,
    #minha-area ul.counter .col-md-12 {
        padding: 0 6px;
    }

#minha-area .fact-box {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgb(0 0 0 / 10%);
    margin-bottom: 12px;
    height: 120px;
    padding: 35px 10px 0 70px;
    position: relative;
    display: block;
}

#minha-area .counter {
    margin-top: 40px !important;
}

#minha-area .fact-box strong {
    color: var(--cor-principal-claro);
    font-size: 17px;
    font-weight: 800;
    display: block;
    line-height: 20px;
    margin: 0 0 0px;
}

#minha-area .fact-box span {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #777777;
    text-transform: initial;
}

#minha-area .fact-box:hover {
    background-color: var(--cor-principal);
    border-color: var(--cor-principal);
}

    #minha-area .fact-box:hover i,
    #minha-area .fact-box:hover strong,
    #minha-area .fact-box:hover span {
        color: #fff;
    }

#minha-area .box-menu {
    background-color: var(--cor-principal);
    padding-bottom: 20px;
    border-radius: 5px;
}

    #minha-area .box-menu h6 {
        color: #fff;
        border-bottom: 1px solid #1a569f;
        line-height: 53px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 20px;
    }

    #minha-area .box-menu a {
        background: #fff;
        color: var(--cor-principal-claro);
        display: block;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        display: block;
        border-radius: 5px;
        margin: 5px 20px;
        padding: 10px 20px;
    }

        #minha-area .box-menu a:hover {
            background: var(--cor-principal-claro);
            color: #fff;
        }

        #minha-area .box-menu a.sair {
            background: red;
            color: #fff;
            margin-top: 30px;
        }

        #minha-area .box-menu a.voltar {
            background: transparent;
            color: #fff;
            padding: 0;
            font-weight: 400;
            margin-top: 30px;
        }

            #minha-area .box-menu a.voltar:hover {
                color: var(--cor-principal-claro);
            }

        #minha-area .box-menu a i {
            margin-right: 5px;
        }
/* fim Minha Area */

.moduçe-maxline {
    overflow: hidden;
    width: 100%;
}

.maxline-3 {
    /*display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 60px;
    width: 100%;*/
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.linha-veja-mais {
    border-top: 1px dotted #ccc;
    padding-top: 20px;
    margin-top: 40px;
}

    .linha-veja-mais h6 {
        margin-bottom: 20px;
    }

    .linha-veja-mais a {
        display: block;
        font-size: 14px;
    }

        .linha-veja-mais a i {
            margin-right: 5px;
        }

/* badges */
.badge-pill {
    padding: 0.4em .8em;
    border-radius: 10rem;
}

.badge-primary {
    background-color: var(--cor-principal);
}

/* Panels DEC */
.panel-dec .panel-primary {
    border: 1px dotted #cccccc;
    margin-bottom: 3px !important;
}

    .panel-dec .panel-primary > .panel-heading {
        background-color: #f8fbfe !important;
        color: var(--cor-principal);
        border: 0 !important;
    }

        .panel-dec .panel-primary > .panel-heading + .panel-collapse > .panel-body {
            border-top: 1px dotted #cccccc;
        }

    .panel-dec .panel-primary h4 {
        font-size: 13px;
    }

        .panel-dec .panel-primary h4 i {
            color: #ffe793;
        }

.panel-dec .panel-default {
    border: 1px dotted #cccccc;
    margin-bottom: 3px !important;
}

    .panel-dec .panel-default > .panel-heading {
        background-color: #f7f7f7 !important;
        color: var(--cor-principal);
        border: 0 !important;
    }

        .panel-dec .panel-default > .panel-heading + .panel-collapse > .panel-body {
            border-top: 1px dotted #cccccc;
        }

            .panel-dec .panel-default > .panel-heading + .panel-collapse > .panel-body a {
                display: block;
            }

    .panel-dec .panel-default h4 {
        font-size: 13px;
    }

        .panel-dec .panel-default h4 i {
            color: #ffe793;
        }
/* fim Panels DEC */

/* community-box-dec */
.community-box-dec h6 {
    line-height: 18px !important;
    font-size: 12px !important;
    padding: 10px 20px !important;
}

.community-box-dec div {
    padding: 20px;
    font-size: 13px;
}

    .community-box-dec div a {
        margin: 25px 0 0 0;
    }
/* community-box-dec */

/* Timeline */
.timeline {
    list-style-type: none;
    position: relative;
}

    .timeline:before {
        content: '';
        position: absolute;
        left: 16px;
        height: 100%;
        z-index: 2;
        top: 0;
        bottom: 0;
        border-left: 3px dashed #e3e6f0;
    }

    .timeline .timeline-item {
        margin: 3rem 2rem 3rem 1rem;
    }

        .timeline .timeline-item > h4 {
            margin-bottom: 0;
            font-size: 1.1em;
            line-height: 1.2em;
            font-weight: 600;
        }

        .timeline .timeline-item .timeline-item-date {
            font-size: 1.3rem;
            margin-bottom: 30px;
        }

        .timeline .timeline-item .timeline-item-image {
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 30px;
        }

            .timeline .timeline-item .timeline-item-image img {
                width: 100%;
                height: auto;
            }

        .timeline .timeline-item .timeline-icon {
            background-color: #0a5faf;
            position: absolute;
            border-radius: 50%;
            left: 0px;
            width: 34px;
            height: 34px;
            z-index: 3;
            color: #ffffff;
            text-align: center;
            padding: 5px;
            font-size: 18px;
        }

            .timeline .timeline-item .timeline-icon i {
                margin-top: 1px;
            }
/* fim Timeline */

/* tabelas */
.table-bordered > thead > tr > th {
    border-bottom-width: 2px;
    background-color: var(--cor-cinza);
}
/* fim tabelas */

/* Acordion */
.dec-accordion .panel-group {
    margin-bottom: 20px;
}

.dec-accordion .panel-title a {
    display: block;
    position: relative;
    padding-right: 20px;
    text-align: left;
}

    .dec-accordion .panel-title a.collapsed:before {
        position: absolute;
        right: 0;
        top: 0;
        content: "\f067";
        font-family: FontAwesome;
        font-weight: 700;
        font-size: 12px;
    }

    .dec-accordion .panel-title a:before {
        position: absolute;
        right: 0;
        top: 0;
        content: "\f068";
        font-family: FontAwesome;
        font-weight: 700;
        font-size: 12px;
    }

.dec-accordion .panel-default {
    margin-bottom: 5px !important;
}

    .dec-accordion .panel-default .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 13px;
        line-height: 16px;
        font-weight: 600;
        color: inherit;
    }

.dec-accordion h6 {
    margin: 20px 0 10px;
    font-size: 17px;
    font-weight: 700;
}
/* fim Acordion */

/* Login/Cadastro */
.login-account p {
    color: #fff !important;
}

select.linput {
    padding: 16px 20px;
}
/* fim Login/Cadastro */

/* Ciptea Cadastro */
.bt-submit-form {
    display: none;
}
/* fim Ciptea Cadastro */

/* Ciptea Carteirinha */
.carteirinha-ciptea {
    width: 105mm;
    height: 148mm;
    padding: 6px;
    border: 2px dashed #ccc;
    position: relative;
}

    .carteirinha-ciptea h1 {
        font-size: 13px;
        font-weight: 800;
        line-height: 17px;
    }

    .carteirinha-ciptea h2 {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        font-style: italic;
        margin: 5px 0 10px 0;
    }

    .carteirinha-ciptea img.foto3x4 {
        width: 113px;
        height: 151px;
        position: absolute;
        right: 6px;
        top: 40px;
    }

    .carteirinha-ciptea img.icone {
        position: absolute;
        right: 119px;
        top: 90px;
        opacity: 0.15;
    }

    .carteirinha-ciptea .box-01 {
        width: 245px;
    }

    .carteirinha-ciptea .box-02 {
    }

    .carteirinha-ciptea .box-03 {
        margin-top: 11px;
    }

    .carteirinha-ciptea .box-form {
        border: 1px solid #000;
        border-radius: 5px;
        padding: 3px 3px;
    }

        .carteirinha-ciptea .box-form strong {
            display: block;
            font-weight: 400;
            font-size: 9px;
            line-height: 10px;
            color: #000;
        }

        .carteirinha-ciptea .box-form span {
            display: block;
            font-weight: 400;
            font-size: 10px;
            line-height: 11px;
        }

    .carteirinha-ciptea .box-corte {
        height: 1px;
        border: 1px dashed #ccc;
        position: absolute;
        top: 50%;
        left: 6px;
        right: 6px;
    }

    .carteirinha-ciptea .box-form-assinatura {
        border-top: 1px solid #000;
        padding: 3px 3px;
        margin: 25px 0 5px 0;
    }

        .carteirinha-ciptea .box-form-assinatura span {
            display: block;
            font-weight: 400;
            font-size: 10px;
            line-height: 11px;
            text-align: center;
        }

    .carteirinha-ciptea .box-form-validade {
        display: block;
        font-weight: 400;
        font-size: 10px;
        line-height: 11px;
        text-align: center;
    }

    .carteirinha-ciptea .img-qrcode {
        width: 102px;
        float: left;
        margin-top: 1px;
    }

    .carteirinha-ciptea .img-logo {
        width: 70px;
        float: left;
        margin-top: 15px;
    }

.carteirinhav-ciptea {
    border: 2px dashed #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-top: 20px;
}
/* fim Ciptea Carteirinha */

/* Plugin DropZone */
.dropzone {
    border: 4px dotted rgba(0,0,0,0.09);
    min-height: 150px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: rgba(0,0,0,0.03);
    padding: 20px;
}

    .dropzone .dz-default.dz-message {
        position: absolute;
        margin-top: -28px;
        top: 50%;
        text-align: center;
        width: 100%;
    }

        .dropzone .dz-default.dz-message span i {
            display: block;
        }

.form-files {
    border: 2px solid rgba(0,0,0,0.03);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
}

    .form-files h5 {
        font-size: 19px;
        margin-bottom: 20px;
    }

    .form-files .files-enviados {
        margin-top: 10px;
    }

        .form-files .files-enviados span {
            display: block;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .form-files .files-enviados a.bt-excluir {
            background-color: #00427e;
            color: #fff;
            border-radius: 3px;
            font-size: 12px;
            padding: 2px 5px;
            margin-right: 5px;
        }

.form-files-foto {
    border: 2px solid rgba(0,0,0,0.03);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
}

    .form-files-foto h5 {
        font-size: 19px;
        margin-bottom: 20px;
    }

    .form-files-foto .image-crop {
        margin: 20px auto 0 auto;
        border: 4px dotted rgba(0,0,0,0.09);
        border-radius: 5px;
        display: none;
        max-width: 350px;
        padding-top: 20px;
    }

    .form-files-foto .foto-requisito {
        margin-top: 20px;
        border: 4px dotted rgba(0,0,0,0.09);
        border-radius: 5px;
        background-color: #ffecec;
        padding: 20px;
        text-align: left;
    }

    .form-files-foto .foto-ajustes {
        margin-top: 20px;
        border: 4px dotted rgba(0,0,0,0.09);
        border-radius: 5px;
        background-color: #e1ffec;
        padding: 20px;
        text-align: left;
        display: none;
    }

    .form-files-foto .bt-continuar {
        display: none;
    }
/* fim Plugin DropZone */

.title-style-3 h1,
.title-style-3 h2,
.title-style-3 h3 {
    margin: 0 0 15px;
    color: var(--cor-texto);
    font-weight: 700;
    font-size: 31px;
}

/* Seretarias */
.deprt-icon-box .ico-sec {
    color: #ddd;
    font-size: 25px;
    padding-bottom: 20px;
}

.deprt-icon-box:hover .ico-sec {
    color: #ccc;
    font-size: 25px;
    padding-bottom: 20px;
}

.team-box .team-txt .titulo,
.team-box .team-txt h5,
.team-box .team-txt h4 {
    font-weight: 700;
    margin: 0 0 7px;
    font-size: 17px;
}

.team-grid {
    padding: 20px 0;
}

    .team-grid h3 {
        font-weight: 700;
    }

    .team-grid .container .row {
        display: flex;
        flex-wrap: wrap;
    }

        .team-grid .container .row .col-md-3 {
            display: flex;
        }

            .team-grid .container .row .col-md-3 .team-box {
                display: flex;
                flex-direction: column;
            }

                .team-grid .container .row .col-md-3 .team-box .team-txt {
                    display: grid;
                    flex: 1;
                }

                    .team-grid .container .row .col-md-3 .team-box .team-txt .team-social {
                        align-self: flex-end;
                    }

ul.team-social a {
    color: #bbb;
}

    ul.team-social a:hover {
        color: var(--cor-principal);
    }

.team-box .team-thumb a {
    color: var(--cor-principal);
}

    .team-box .team-thumb a:hover {
        background: var(--cor-principal);
        color: #fff;
    }
/* fim Seretarias */

/* Fique por dentro home */
/*.recent-events {
    background-image: linear-gradient(rgb(0 33 125 / 83%), rgb(0 33 125 / 25%)), url(../img/bg/05.jfif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0 !important;
}

    .recent-events::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--cor-principal, #000000) !important;
        opacity: 0.5;
        z-index: 1;
    }*/

    /* 3. Garante que o conteúdo (texto, etc.) fique ACIMA da camada escura */
    .recent-events > * {
        position: relative;
        z-index: 2; /* Fica acima do ::before */
    }


    .recent-events h3 {
        color: #fef3f3;
        font-weight: 700;
        margin: 0 0 10px;
    }

    .recent-events .subtitulo-recents {
        color: #fef3f3 !important;
    }

    .recent-events .nav-tabs {
        border-bottom: 0 solid #ddd;
        margin-top: 40px;
    }

        .recent-events .nav-tabs > li > a.active, .recent-events .nav-tabs > li > a.active:focus, .recent-events .nav-tabs > li > a.active:hover {
            color: #222;
            cursor: default;
            background-color: #fff;
            border: 1px solid #eee;
            border-bottom: 0;
            margin-bottom: -1px;
        }

        .recent-events .nav-tabs > li > a {
            background: var(--cor-principal);
            text-transform: uppercase;
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 600;
            padding: 0 20px;
            line-height: 51px;
            color: #fff;
            border: 0px;
            position: relative;
            border-radius: 0;
            overflow: hidden;
            margin-right: 5px;
        }

            .recent-events .nav-tabs > li > a:hover {
                background: #fff;
            }

.event-list li strong.edate {
    display: block;
    color: var(--cor-principal);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}

.recent-events .nav-tabs > li.active > a:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: var(--cor-principal);
    content: "";
}

.recent-events .tab-content {
    background: var(--cor-cinza) !important;
    border-radius: 0 5px 5px 5px;
    width: 100%;
    float: left;
    padding: 15px !important;
    border: 1px solid #eee;
}

.event-list a.joinnow {
    background: var(--cor-principal) !important;
    border: 1px solid #e1e1e1;
    line-height: 28px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    color: #ffff !important;
    padding: 0 20px;
    border-radius: 15px;
}

.recent-events .nav-tabs > li > a:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: var(--cor-cinza);
    content: "";
}

.recent-events .nav-tabs > li > a.active:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    background: #fff;
    content: "";
}

.recent-events .event-list li.icone {
    font-size: 13px;
}

.recent-events .event-list li.el-title {
    width: 72%;
    line-height: 13px;
}

.event-list li.el-title a {
    color: var(--cor-texto);
    margin: 0;
    font-weight: 400;
    line-height: 13px;
    font-size: 13px;
}

.event-list:hover .el-title a {
    color: var(--cor-principal);
}

.recent-events .event-list:after {
    position: absolute;
    left: -30px;
    width: 3px;
    height: 0;
    background: var(--cor-principal);
    content: none;
    top: -4px;
}

.recent-events .event-list:hover:after {
    height: 100%;
}

.event-list a.joinnow {
    background: var(--cor-cinza);
    border: 1px solid var(--cor-cinza);
    line-height: 15px;
    display: inline-block;
    text-transform: lowercase;
    font-size: 14px;
    color: #555;
    padding: 5px 20px;
    border-radius: 15px;
}

    .event-list a.joinnow:hover {
        background: var(--cor-principal) !important;
        border: 1px solid var(--cor-principal);
        color: #fff;
    }
/* fim Fique por dentro home */


/* Banners */
.box-banner-padrao {
    border: 1px dotted #ccc;
    border-radius: 5px;
    position: relative;
}

.owl-nav {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.owl-carousel .owl-nav button.owl-prev:after {
    content: "\f104";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 24px;
}

.owl-carousel .owl-nav button.owl-next:after {
    content: "\f105";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 24px;
}

.owl-nav button.owl-prev {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    height: 60px;
    margin: auto;
    background-color: var(--cor-principal) !important;
    z-index: 99;
    color: #fff !important;
    border-radius: 0 5px 5px 0;
    font-size: 0 !important;
}

.owl-nav button.owl-next {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    height: 60px;
    margin: auto;
    background-color: var(--cor-principal) !important;
    z-index: 99;
    color: #fff !important;
    border-radius: 5px 0 0 5px;
    font-size: 0 !important;
}

    .owl-nav button.owl-prev:hover,
    .owl-nav button.owl-next:hover {
        background-color: var(--cor-principal-escuro) !important;
    }
/* fim Banners */

/* Licitações */
.box-receber-att {
    border: 1px dashed #ccc;
    text-align: center;
    padding: 20px 15px;
    margin-bottom: 20px;
    background-color: #d3fff0;
    border-radius: 10px;
}

    .box-receber-att h4 {
        font-size: 19px;
        margin-bottom: 20px;
    }

.licRet {
    display: none;
    border: 2px dashed #ccc;
    padding: 15px;
    text-align: center;
}

.licAguarde {
    background-color: #fffee2;
}

.licSuccess {
    background-color: #d3fff0;
}

.licError {
    background-color: #ffd4d3;
    margin-top: 20px;
}
/* fim Licitações */

/* Telefones Úteis */
#telefones-uteis .table {
    margin-bottom: 0;
}

    #telefones-uteis .table tr td {
        width: 50%;
    }

#telefones-uteis .panel-body {
    padding: 0;
}
/* fim Telefones Úteis */

/* Contato */
.contato {
    background-color: var(--cor-cinza);
    border-radius: 15px;
    padding: 20px 20px;
    border-top: 5px solid var(--cor-principal);
    box-shadow: rgb(170, 170, 170) 0px 0px 10px;
}

    .contato:hover {
        transition: 0.5s ease;
        box-shadow: rgb(190, 190, 190) 0px 0px 30px;
    }

    .contato .bloco {
        margin: 10px 0 15px;
        font-size: 16px;
    }

    .contato .titulo {
        color: var(--cor-texto);
        display: block;
        font-size: 21px;
        font-weight: 700;
        margin-bottom: 30px;
    }

    .contato .bloco .tit {
        color: var(--cor-texto);
        display: block;
    }

    .contato .bloco .text,
    .contato .bloco .text a {
        color: var(--cor-principal);
        font-weight: 600;
    }

        .contato .bloco .text a:hover {
            color: var(--cor-cinza);
        }
/* fim Contato */

/* Forms */
.contato-form input[type="submit"] {
    width: initial;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    line-height: 53px;
    border: 0;
    border-radius: 3px;
    font-size: 17px !important;
    font-weight: 700;
    margin-top: 10px;
    padding: 10px 20px !important;
}

.form-group label:not(.error) {
    font-size: 13px;
    letter-spacing: 0.04em;
    font-weight: 400;
    margin-bottom: 4px;
    color: #777777;
}

.form-control {
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    padding: 14px 12px;
    height: 50px;
}

.busca-topo .form-control {
    border: 1px solid #e6e8eb;
    border-radius: 20px 0 0 20px !important;
    padding: 10px 16px;
    height: 46px;
}

.busca-topo .btn {
    border-radius: 22px;
}
/* BUSCA */
.busca-moderna {
    position: relative;
    width: 100%;
}

.input-busca {
    width: 100%;
    padding: 12px 50px 12px 20px;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
}

    .input-busca:focus {
        border-color: #28a745;
        box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.32);
    }

.btn-busca {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    border: none;
    background: VAR(--cor-principal);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

    .btn-busca:hover {
        background: VAR(--cor-secundaria);
    }


/* FIM BUSCA */


#retornoajax, #retornoajaxG {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    display: none;
}

#retornoajaxG {
    font-size: 12px;
    border: 1px dotted #ccc;
}

.alert {
    padding: 15px;
    margin-bottom: 0;
    border: 1px solid transparent;
    border-radius: 4px;
}
/* fim Forms */

/* Busca */
.dec-filtro-busca {
    border: 0 dotted #d0ffe2;
    display: block;
    margin: 0 0 20px 0;
    padding: 0;
    text-align: left;
    font-size: 15px;
}

    .dec-filtro-busca a {
        border: 1px dotted var(--cor-vermelho);
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        display: inline-block;
        margin-left: 10px;
        padding: 2px 10px;
        color: var(--cor-vermelho);
        font-size: 12px;
        display: inline-block;
    }

        .dec-filtro-busca a:hover {
            border: 1px dotted var(--cor-vermelho);
            background-color: var(--cor-vermelho);
            color: #fff;
        }
/* fim Busca */

/* Rodapé */
#irRodape {
    background: transparent;
    padding: 50px 0 0 0;
}

    #irRodape .box-acesso-rapido {
        padding: 0;
        margin-top: 0;
        position: relative;
        z-index: 999;
        margin-bottom: -20px;
    }

        #irRodape .box-acesso-rapido a.box {
            height: 130px;
        }

            #irRodape .box-acesso-rapido a.box .titulo {
                display: block;
                font-weight: 300;
                color: #000;
                margin-top: 7px;
                line-height: 17px;
            }

            #irRodape .box-acesso-rapido a.box .subtitulo {
                display: block;
                font-size: 15px;
                font-weight: 700;
                margin-top: 5px;
            }

            #irRodape .box-acesso-rapido a.box:hover .titulo,
            #irRodape .box-acesso-rapido a.box:hover .subtitulo {
                color: #fff;
            }

        #irRodape .box-acesso-rapido span.btn-telefone {
            font-weight: 700;
            font-size: 21px !important;
            display: inline-block;
            padding: 10px 50px !important;
            background-color: var(--cor-principal);
            color: #fff;
        }

.footer {
    font-size: 14px;
    padding: 20px 0;
}

.home3.footer {
    background-color: var(--cor-principal);
}

    .home3.footer .container {
        padding-top: 20px;
        border-top: 1px solid #ffffff;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

.footer .bts {
    color: #fff;
    background-color: #3e85c369;
    font-size: 13px;
    padding: 4px 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

    .footer .bts:hover {
        color: var(--cor-secundaria);
        background-color: var(--cor-principal);
    }

.footer-links {
    font-size: 14px;
    padding: 80px 0 20px 0;
    background-color: var(--cor-principal);
    color: #fff;
}

    .footer-links .titulo {
        font-size: 23px;
        font-weight: 700;
        color: #fff;
        display: block;
        margin-bottom: 10px;
    }

    .footer-links ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .footer-links ul li a {
            color: #fff;
            font-size: 16px;
            line-height: 25px;
        }

            .footer-links ul li a:hover {
                color: var(--cor-secundaria);
            }

    .footer-links .bloco {
        margin: 10px 0 15px;
        font-size: 16px;
    }

        .footer-links .bloco .tit {
            color: #fff;
            display: block;
        }

        .footer-links .bloco .text,
        .footer-links .bloco .text a {
            color: #fff;
            font-weight: 700;
        }

            .footer-links .bloco .text a:hover {
                color: var(--cor-secundaria);
            }

#irRodape .e-numbers .em-box strong.em-num {
    font-size: 17px;
    font-weight: 900;
    display: block;
}

#irRodape .e-numbers .em-box strong.em-deprt {
    font-size: 13px;
}

#irRodape .e-numbers .em-box {
    height: 130px;
    text-align: center;
    padding: 20px 10px;
}

.e-numbers h3 {
    font-size: 24px;
    color: #333;
    font-weight: 700;
    margin: 0 0 8px;
}

.home3.footer p.copyr {
    color: #fff !important;
}

.previsao-tempo-uf {
    margin-top: 80px !important;
}

    .previsao-tempo-uf h2 {
        margin: 0 0 15px;
        color: var(--cor-texto);
        font-weight: 700;
        font-size: 31px;
    }

    .previsao-tempo-uf p::before {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 15px;
        height: 2px;
        background: var(--cor-principal-claro);
        content: "";
    }


    .previsao-tempo-uf p {
        position: relative;
        padding-left: 21px;
        font-size: 16px;
        font-style: italic;
        margin-bottom: 10px;
    }

.rodape-links ul li a {
    display: inline-block;
    transition: all 0.3s ease;
}

    .rodape-links ul li a:hover {
        transform: translateY(3px);
        color: var(--cor-secundaria);
    }

.titulo-linha {
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
}

    .titulo-linha::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 180px;
        height: 1px;
        background-color: #fff;
    }

.rodape-links ul li a::before {
    content: "›";
    color: #fff;
    margin-right: 8px;
}

.redes-sociais {
    background: linear-gradient(180deg, var(--cor-cinza) 0%, #eef1f4 100%);
}
/* fim Rodapé */
/* Cookies */
.rodape-cookies {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 25px;
    z-index: 9999;
    -webkit-box-align: center;
    align-items: center;
    max-width: 1230px;
    margin: 0px auto;
    background: rgb(255, 255, 255);
    padding: 20px;
    box-shadow: rgb(170, 170, 170) 0px 0px 10px;
    border-radius: 12px;
    display: none;
}

    .rodape-cookies p {
        color: #000 !important;
        margin-bottom: 0 !important;
        font-size: 13px !important;
        font-weight: 400;
    }

    .rodape-cookies .bt-cookies {
        box-sizing: border-box;
        border-radius: 8px;
        text-align: center;
        font-size: 14px;
        padding: 10px 20px;
        letter-spacing: 0px;
        cursor: pointer;
        white-space: nowrap;
        border: 1px solid var(--cor-principal);
        color: var(--cor-principal);
        text-transform: none;
        margin-left: 20px;
    }

        .rodape-cookies .bt-cookies:hover {
            background-color: var(--cor-principal);
            color: #fff;
        }
/* fim Cookies */

/* Acessibilidade */
.bts-config {
    display: inline-block;
    vertical-align: middle;
    padding: 8px 10px 0 0;
}

    .bts-config a.bt-aumentaf span,
    .bts-config a.bt-diminuirf span {
    }

    .bts-config a {
        background: var(--cor-principal);
        color: #fff;
        height: 27px;
        width: 27px;
        display: inline-block;
        line-height: 25px;
        text-align: center;
        border-radius: 100%;
        font-size: 12px;
        position: relative;
    }

        .bts-config a span {
            width: 14px;
            height: 14px;
            line-height: 14px;
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 8px;
            color: #fff;
            font-weight: 700;
            border-radius: 100%;
            text-align: center;
            background-color: #0a5faf;
            filter: none !important;
            display: none;
        }

        .bts-config a.bt-desfazeracess {
            display: none;
        }
/* fim Acessibilidade */

/* Contraste */
.dec-contraste-normal {
    background-color: white !important;
    color: black !important;
}

    .dec-contraste-normal .bts-config a:focus,
    .dec-contraste-normal .bts-config a:active {
        background: var(--cor-principal) !important;
        color: #fff;
    }

        .dec-contraste-normal .bts-config a:hover,
        .dec-contraste-normal .bts-config a:focus:hover,
        .dec-contraste-normal .bts-config a:active:hover {
            background-color: var(--cor-secundaria) !important;
            color: #fff;
        }

.dec-contraste {
    background-color: black !important;
    color: white !important;
}

/* O selo azul no canto do icone diz que AQUELE recurso esta ligado, e
       nada mais. Uma regra so, presa ao .ativo do proprio botao: enquanto
       cada recurso tinha a sua, ligar o contraste acendia tambem os selos da
       fonte para dislexia e do leitor - as regras deles tinham sido copiadas
       desta com o .dec-contraste junto (bug do David, 26/08/2026).

       O filho direto exclui o <span class="dec-hide"> de dentro do <i>, que e
       texto para leitor de tela e nao selo. */
.bts-config a.ativo > span:not(.dec-hide) {
    display: block;
}

.dec-contraste .bts-config a,
.dec-contraste .bts-config a:focus,
.dec-contraste .bts-config a:active {
    background: #1c1c1c !important;
    color: #fff;
}

.dec-contraste,
.dec-contraste div,
.dec-contraste section,
.dec-contraste nav,
.dec-contraste .btn,
.dec-contraste .bts,
.dec-contraste header,
.dec-contraste .header-two,
.dec-contraste .header-two .topbar,
.dec-contraste .home3.footer,
.dec-contraste .topbar,
.dec-contraste main,
.dec-contraste footer,
.dec-contraste ul,
.dec-contraste li,
.dec-contraste p,
.dec-contraste span,
.dec-contraste label,
.dec-contraste hr,
.dec-contraste a.search-icon,
.dec-contraste .h3-navbar .dropdown-menu,
.dec-contraste .h3-navbar .dropdown-menu a,
.dec-contraste .box-acesso-rapido .box a:hover,
.dec-contraste .panel-dec .panel-primary > .panel-heading,
.dec-contraste .panel-dec .panel-default > .panel-heading,
.dec-contraste .tp-bgimg {
    /*background: none !important;*/
    background-color: #000 !important;
    color: #fff !important;
    /*filter: grayscale(100%) !important;*/
}

    .dec-contraste .bts-config a span {
        color: #fff;
        background-color: #0a5faf !important;
    }

    .dec-contraste * {
        color: #fff !important;
        border-color: #fff !important;
        background-color: #000 !important;
    }

    .dec-contraste a {
        color: #fff !important
    }

        .dec-contraste a:hover {
            text-decoration: underline !important
        }

    .dec-contraste img {
        border: 0 !important;
        margin: 0;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%)
    }

    .dec-contraste iframe, .dec-contraste .sw_video_capa, .dec-contraste svg {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%)
    }

    .dec-contraste pre * {
        background-color: #161616 !important;
        color: #fff !important
    }

    .dec-contraste input, .dec-contraste select, .dec-contraste option {
        background: #fff !important;
        color: #000 !important
    }

        .dec-contraste input[type="submit"], .dec-contraste input[type="button"], .dec-contraste button {
            background-color: #161616 !important;
            color: #fff !important;
            border: #fff solid 1px;
        }

    .dec-contraste #logo_branca, .dec-contraste .logo_branca {
        display: block !important
    }

    .dec-contraste *::-webkit-scrollbar-track {
        background-color: #000 !important;
        border: solid 1px #fff !important
    }

    .dec-contraste *::-webkit-scrollbar {
        background-color: #000 !important;
        border: solid 1px #fff !important
    }

    .dec-contraste *::-webkit-scrollbar-thumb {
        background-color: #000 !important
    }

    .dec-contraste *:before, .dec-contraste *:after {
        filter: grayscale(1)
    }


.h3-navbar .navbar-toggle .icon-bar {
    background: #ffffff !important;
}
/* fim Contraste */

/* O TEXTO QUE SO O LEITOR DE TELA LE.

   Era display:none, e display:none NAO esconde so dos olhos: tira o
   elemento da arvore de acessibilidade tambem. Ou seja, cada
   <span class="dec-hide"> do portal - o rotulo do campo de busca, os
   nomes dos botoes da barra de acessibilidade, o rotulo oculto dos itens
   de menu, o titulo do modal - estava invisivel para TODO MUNDO, inclusive
   para quem a classe existia para atender. Eram rotulos que nao rotulavam
   nada (eMAG 6.2 e 3.5).

   O recorte de 1px e o padrao consagrado (o .sr-only do Bootstrap faz
   igual): fica fora da vista, nao ocupa espaco no layout por ser
   absoluto, e continua sendo lido.

   O display:block precisa do !important porque ha regra de contexto
   mandando display:none em span (ver .bts-config a span). */
.dec-hide {
    position: absolute !important;
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 1 !important;
}

/*Celular*/
@media (max-width: 767px) {
    /*body { font-size: 14px !important }*/
    body h2 {
        font-size: 23px !important;
    }

    body h3 {
        font-size: 19px !important;
    }

    body h4 {
        font-size: 18px !important;
    }

    body h5 {
        font-size: 18px !important;
    }

    .main-content {
        padding: 20px 0;
    }

    .p75 {
        padding: 27px 0 27px;
    }

    .p80 {
        padding: 27px 0;
    }

    .p75-50 {
        padding: 27px 0 15px;
    }

    .p-t-mobile-0 {
        padding-top: 0 !important;
    }

    .p-tb-mobile-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .dec-hidden-mobile {
        display: none !important;
    }

    .dec-show-mobile {
        display: inline-block !important;
    }

    .dec-mobile-center {
        text-align: center !important;
    }

    .h3-logo-row .h3-logo {
        padding: 8px 0;
    }


    .bts-config {
        text-align: center;
        padding: 15px 0;
        display: block !important;
        border-top: 1px solid #eee;
    }
        /* Era .bts-config h1: o <h1>Acessibilidade</h1> virou <div>. O bloco so
       aparece no mobile (.dec-show-mobile), entao esta e a unica regra dele. */
        .bts-config .titulo-acessibilidade {
            padding-bottom: 10px;
            margin: 0;
            font-size: 12px;
            font-weight: 700;
            /* line-height (bootstrap), font-family e color (body h1..h6) vinham da
           tag <h1>: um <div> nao herda nenhum dos tres. */
            line-height: 1.1;
            font-family: 'Montserrat', sans-serif;
            color: #333;
        }

    .navbar-right {
        float: right;
    }

    .topbar ul.left-links {
        padding: 5px 0 0 0 !important;
        margin: 0;
    }

        .topbar ul.left-links a {
            text-transform: none;
            font-size: 12px;
        }

    a.search-icon {
        font-size: 14px;
    }

        a.search-icon i {
            font-size: 13px;
            margin-right: 8px !important;
        }

    .open > .dropdown-menu {
        display: block;
        margin: 0 20px;
    }

    .navbar-nav .open .dropdown-menu > li > a {
        line-height: 25px;
        padding: 5px 0;
        font-weight: 400;
        font-size: 11px;
    }

    .h3-navbar .dropdown-menu .sub-menu li a {
        background: #f9f9f9;
        padding: 0 15px;
        line-height: 30px;
        font-weight: 400;
        font-size: 11px;
        color: #444;
    }

    .h3-navbar .navbar {
        margin-right: -15px !important;
        margin-left: -15px !important;
    }

    .h3-navbar .navbar-header {
        padding: 0 15px;
    }

    .h3-navbar .txt {
        margin: 10px 0 0 0;
        display: block;
        color: #ccc;
    }

    .mini_menu .h3-navbar .txt {
        color: #fff;
    }

    .mini_menu .h3-navbar .navbar-toggle {
        background-color: var(--cor-principal-claro);
        color: #12498a;
    }

    .navbar-toggle {
        float: left;
    }

    .h3-navbar .navbar .navbar-nav > li > a:hover:after {
        width: 0;
    }

    .h3-navbar .navbar .navbar-nav > li.active > a:after {
        width: 0;
    }

    .h3-navbar .navbar .navbar-nav > li > a {
        margin: 0 15px 2px 15px;
        padding: 3px 15px;
        line-height: 30px;
        font-size: 13px;
        font-weight: 400;
        color: #333333;
        background-color: #f4f4f4;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    .mini_menu .h3-navbar .navbar .navbar-nav > li > a {
        margin: 0 15px 2px 15px;
        padding: 3px 15px;
        line-height: 30px;
        font-size: 13px;
        font-weight: 400;
        color: #333333;
        background-color: #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    .mini_menu .h3-navbar .dropdown-menu .sub-menu a, .mini_menu .h3-navbar .dropdown-menu a {
        border-bottom: 1px solid #00427e;
        background: transparent;
        color: #fff;
    }

    .mini_menu .h3-navbar .dropdown-menu .sub-menu li a {
        background: #00427e;
        padding: 0 15px;
        line-height: 30px;
        font-weight: 400;
        font-size: 11px;
        color: #fff;
    }

    .h3-navbar .nav > li.open > a:focus, .h3-navbar .nav > li.open > a:hover, .h3-navbar .navbar .navbar-nav > li.open > a:hover {
        background-color: var(--cor-principal-claro);
        color: #fff;
    }

    .h3-navbar .nav > li > a:focus, .h3-navbar .nav > li > a:hover, .h3-navbar .navbar .navbar-nav > li > a:hover {
        background-color: #f4f4f4;
        color: #333333;
    }

    header .navbar-nav {
        margin-bottom: 10px;
    }

    header .navbar-right {
        margin: 0;
    }

    .h3-logo-row .h3-logo a {
        display: inline-block;
    }

    .subheader .txt {
        background-color: #fff;
        border-radius: 20px;
        padding: 10px 0;
        position: absolute;
        z-index: 99;
        bottom: -25px;
        right: 10px;
        left: 10px;
    }

        .subheader .txt ul {
            text-align: left;
            padding: 0 15px;
            margin-bottom: 0;
        }

    .subheader-tit .txt h2 {
        color: var(--cor-texto);
        font-weight: 600;
        margin-bottom: 0;
        position: relative;
        font-size: 21px !important;
        margin: 20px 0;
        text-align: center;
    }

    /* Hierarquia de headings (SEO): os antigos h2/h3/h4/h5 viraram <h1> com
       classe, e as regras "body hN" acima nao alcancam <h1>. Repetidas aqui
       para o mobile ficar identico ao que era.
       Nao criar um "body h1" generico com !important: o tema nao tem um, e ele
       sobrescreveria o titulo da materia do diario. */
    .subheader-tit .txt .titulo-pagina {
        font-size: 21px !important;
        text-align: center;
    }

    .new-txt .titulo-publicacao {
        font-size: 18px !important;
    }

    .titulo-transparencia {
        font-size: 19px !important;
    }

    .titulo-licitacao {
        font-size: 18px !important;
    }

    h1.subtitulo {
        font-size: 18px !important;
    }

    .vereador-detalhes .txt .titulo-secretaria {
        font-size: 19px !important;
        font-weight: 600;
        margin-bottom: 0 !important;
    }

    .diario-materia-detalhes .diario-cabecalho .titulo-materia {
        font-size: 15px !important;
    }

    .owl-carousel .owl-nav button.owl-prev:after {
        font-size: 12px;
    }

    .owl-carousel .owl-nav button.owl-next:after {
        font-size: 12px;
    }

    .owl-nav button.owl-prev {
        width: 15px;
        height: 20px;
    }

    .owl-nav button.owl-next {
        width: 15px;
        height: 20px;
    }

    .team-grid .container .form-busca-padrao .row {
        display: initial;
        flex-wrap: initial;
    }

    .slide-content-box a, .slider-caption a {
        font-size: 7px !important;
        font-weight: 600 !important;
        line-height: 10px !important;
        border-radius: 12px !important;
        padding: 3px 11px !important;
    }

    .slide-content-box p {
        display: none;
        font-size: 11px !important;
    }

    .Mayor-video-msg .city-tour {
        margin: 0 0 10px;
        margin-top: -10px;
        border-radius: 20px;
        border: 0 solid #fff;
        background-color: #fff;
    }

    .box-acesso-rapido {
        padding: 0 0 35px 0;
        margin-top: 0;
    }

        .box-acesso-rapido a.box, .box-acesso-rapido a.box:active, .box-acesso-rapido a.box:focus, .box-acesso-rapido a.box:visited {
            height: auto;
            padding: 10px 20px;
            margin-bottom: 5px;
        }

            .box-acesso-rapido a.box div {
                text-align: left;
            }

            .box-acesso-rapido a.box .titulo {
                font-size: 15px;
                display: initial;
            }

        .box-acesso-rapido .box .subtitulo {
            font-size: 10px;
        }

        .box-acesso-rapido a.box i {
            font-size: 15px;
            margin-right: 10px;
        }


    .form-busca-padrao {
        padding: 10px;
        margin-bottom: 10px;
    }

        .form-busca-padrao h5 {
            font-size: 14px !important;
            color: var(--cor-principal);
            margin-bottom: 10px;
        }

        .form-busca-padrao .form-control {
            margin: 2px 0;
        }

    .noticias-home .title-style-3 h1,
    .noticias-home .title-style-3 h2,
    .noticias-home .title-style-3 h3,
    .vereadores-home .title-style-3 h1,
    .vereadores-home .title-style-3 h2,
    .vereadores-home .title-style-3 h3,
    .sessoes-home .title-style-3 h1,
    .sessoes-home .title-style-3 h2,
    .sessoes-home .title-style-3 h3 {
        text-align: center;
        margin: 0;
    }

    .noticias-home .title-style-3 p,
    .vereadores-home .title-style-3 p,
    .sessoes-home .title-style-3 p {
        text-align: center;
        font-size: 15px;
        padding: 0;
    }

        .noticias-home .title-style-3 p:before,
        .sessoes-home .title-style-3 p:before {
            width: 0;
            height: 0;
        }

    .noticias-home .event-post-full {
        display: block;
    }

    .noticias-home .news-post .news-post-txt {
        padding: 10px;
    }

    .noticias-home .small-img-post h2 {
        font-size: 15px !important;
        text-align: left;
    }

    .noticias-home .event-post-full .event-post-txt {
        padding: 10px 15px 0;
        width: 100%;
        text-align: left;
    }

    .vereadores-home {
        padding: 50px 0;
    }

        .vereadores-home .team-box,
        .mesadiretora .team-box {
            margin: 0 0 10px;
        }

            .vereadores-home .team-box .team-txt,
            .mesadiretora .team-box .team-txt {
                padding: 10px;
            }

                /* mesmo motivo da regra la de cima: o h3 acompanha o h5. */
                .mesadiretora .team-box .team-txt h3,
                .mesadiretora .team-box .team-txt h5 {
                    font-weight: 600;
                    font-size: 14px !important;
                }

    .mesadiretora ul.team-social {
        padding: 5px 0 0;
    }

    .sessoes-home {
        padding: 50px 0;
    }

        .sessoes-home h5 {
            font-size: 15px !important;
            text-align: left;
        }

    .sessoes .new-txt h6 {
        font-size: 14px !important;
        text-align: left;
        line-height: 20px;
    }

    .sessoes .new-txt p {
        font-size: 14px !important;
        line-height: 20px;
    }

    .vereador-detalhes .team-details-txt .panel-body .contatos a {
        display: block;
        font-size: 12px;
    }

    .vereador-detalhes .dados {
        margin-bottom: 40px;
        display: block;
    }

    .vereador-detalhes .img img {
        width: 100%;
        margin-right: 0;
        border: 10px solid var(--cor-cinza);
    }

    .vereador-detalhes .txt {
        text-align: center;
    }

        .vereador-detalhes .txt h2 {
            font-size: 19px !important;
            font-weight: 600;
            margin-bottom: 0;
        }

    .news-box-dec .informacoes {
        display: block;
    }

        .news-box-dec .informacoes .informacoes-box {
            margin-bottom: 5px;
        }


    .subheader {
        padding: 15px 0 !important;
        background-position-x: center;
    }

        .subheader h2 {
            font-size: 19px !important;
            margin: 0 !important;
        }

        .subheader ul li {
            font-size: 14px;
        }

            .subheader ul li:after {
                content: "/";
                padding: 0 5px;
            }

    .new-txt h3 {
        font-size: 15px;
    }

    .news-meta {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: left;
    }

    .Mayor-welcome h2 {
        margin: 0 0 5px;
        text-align: left;
        font-size: 15px !important;
    }

    .Mayor-welcome p {
        font-size: 14px;
        line-height: 18px;
        margin: 0 0 10px;
        text-align: left;
    }

    .event-list li.el-title h6 {
        font-weight: 500;
        line-height: 18px;
        font-size: 13px;
    }

    .event-list li strong.edate {
        font-size: 14px;
    }

    .event-list li.el-title {
        margin: 10px 0;
    }


    .nav nav-tabs {
        margin-top: 30px;
    }

    .recent-events {
        /*text-align: center;*/
        margin-top: 20px;
    }

        .recent-events .tab-content {
            padding: 10px;
        }

        .recent-events .event-list:after {
            position: absolute;
            left: -20px;
            width: 3px;
            top: 0;
            bottom: 0;
            background: var(--cor-principal-claro);
            content: "";
        }

    .btn-default {
        color: #fff;
        background-color: var(--cor-principal);
        border-color: var(--cor-principal-claro);
    }


    .event-list a.joinnow {
        background: var(--cor-principal) !important;
        border: 1px solid var(--cor-cinza) !important;
        line-height: 28px;
        display: inline-block;
        text-transform: uppercase;
        font-size: 12px;
        color: #fff;
        padding: 0 22px !important;
        border-radius: 15px;
    }

    .nav-tabs > li {
        float: none;
    }

    .recent-events .event-list li.el-title {
        width: 100%;
    }

    .recent-events .event-list li:last-child {
        float: left;
        margin: 0px;
    }

    .box-receber-att h4 {
        font-size: 15px;
    }

    .team-heading {
        text-align: center;
    }

    .team-grid {
        padding: 10px 0;
    }

    .vereadores .team-box {
        width: calc(100vw - 30px);
    }

        .vereadores .team-box .team-txt h3,
        .vereadores .team-box .team-txt h5 {
            font-weight: 700;
            margin: 0;
            font-size: 14px !important;
            text-align: left;
        }

    .previsao-tempo-uf {
        text-align: center;
    }

        .previsao-tempo-uf p {
            font-size: 13px;
        }

    .enquete-uf .box-uf {
        width: 100%;
        min-width: 100%;
        margin: 20px 0;
    }

    .footer {
        padding: 20px 0 70px;
    }

    .footer-links .titulo {
        font-size: 19px;
        margin-top: 20px;
    }

    .footer-social {
        text-align: center !important;
        margin-top: 15px;
    }

    #irRodape {
        background-color: var(--cor-principal);
        background: transparent;
        padding: 20px 0 0 0;
    }

        #irRodape .box-acesso-rapido a.box {
        }

        #irRodape .e-numbers .em-box {
            height: 105px;
            text-align: center;
            padding: 10px 10px;
        }

        #irRodape .e-numbers .em-box {
            margin: 0 0 10px;
        }

            #irRodape .e-numbers .em-box strong.em-num {
                font-size: 15px;
                font-weight: 700;
            }

            #irRodape .e-numbers .em-box strong.em-deprt {
                font-size: 12px;
            }

    .footer-links {
        padding: 20px 0 20px 0;
    }

    .depart-info .deprt-icon-box {
        height: 169px;
        margin: 0 0 10px;
        padding: 10px;
    }

    .deprt-icon-box .ico-sec {
        padding-bottom: 8px;
    }

    .deprt-icon-box h6 {
        line-height: 15px;
        margin: 0 0 8px;
        font-weight: 500;
        font-size: 13px;
    }

    .deprt-icon-box a.rm {
        opacity: 1;
    }

    .emergency-numbers {
        padding: 0;
    }

    /* Menu Mobile */
    .overHide {
        overflow: hidden !important;
    }

    #menu-tab {
        height: 55px;
        background: #fff;
        display: none;
        position: fixed;
        bottom: 0;
        z-index: 99999;
        width: 100%;
        left: 0;
        border-top: 0px solid #ccc;
        -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20);
        -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20);
    }

        #menu-tab .menu-tab-container {
            display: table;
            width: 100%;
            height: 100%;
        }

            #menu-tab .menu-tab-container ul {
                display: table-row;
            }

                #menu-tab .menu-tab-container ul li {
                    display: table-cell;
                    text-align: center;
                    position: relative;
                    vertical-align: middle;
                }

                    #menu-tab .menu-tab-container ul li a {
                        font-size: 21px;
                    }

                        #menu-tab .menu-tab-container ul li a i {
                            color: #333;
                        }

                        #menu-tab .menu-tab-container ul li a span {
                            display: block;
                            color: #000;
                            font-size: 12px;
                            margin-top: -3px;
                        }

                        #menu-tab .menu-tab-container ul li a.active i {
                            color: var(--cor-principal);
                        }

    #contato-tab img {
        width: 70%;
        margin-bottom: 50px;
    }

    #contato-tab .bloco {
        margin: 10px 0 15px;
        font-size: 16px;
    }

        #contato-tab .bloco .tit {
            color: var(--cor-principal);
            display: block;
        }

        #contato-tab .bloco .text,
        #contato-tab .bloco .text a {
            color: var(--cor-principal);
            font-weight: 700;
        }

            #contato-tab .bloco .text a:hover {
                color: var(--cor-secundaria);
            }

    .tabs-padrao {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        background-color: #fff;
        height: 100%;
        width: 100%;
        z-index: 100;
    }

        .tabs-padrao .tabs-header {
            padding: 15px 20px;
            text-align: left;
            background-color: var(--cor-principal);
            color: #ffffff;
            font-weight: 700;
            font-size: 19px;
            -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20);
            -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20);
        }

            .tabs-padrao .tabs-header i {
                top: 20px;
                right: 20px;
                position: absolute;
            }

            .tabs-padrao .tabs-header img.img-avatar {
                margin-right: auto;
                width: 100px;
                height: 100px;
                margin-bottom: 10px;
                border: 2px solid #ccc;
            }

        .tabs-padrao .tabs-container {
            height: 100%;
            width: 100%;
            overflow: hidden;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            padding: 20px 20px 110px 20px;
        }

    menu {
        padding: 0 !important;
        margin: 0 !important;
        color: #888888;
    }

        menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        menu > ul > li > a {
            display: block;
            padding: 8px 10px;
            background-color: var(--cor-cinza);
            border: 1px solid #f4f4f4;
            border-left: 2px solid var(--cor-principal);
            margin-bottom: 8px;
            border-radius: 15px;
            font-size: 15px;
            font-weight: 600;
            color: var(--cor-texto);
            position: relative;
        }

            menu > ul > li > a .caret {
                position: absolute;
                right: 10px;
                top: 49%;
                border-top: 5px dashed;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
            }

        menu li a:hover,
        menu li a:focus,
        menu li a:active {
            display: block;
            padding: 8px 10px;
            background-color: var(--cor-principal);
            border: 1px solid var(--cor-principal);
            border-left: 3px solid var(--cor-principal);
            margin-bottom: 2px;
            border-radius: 15px;
            font-size: 15px;
            font-weight: 700;
            color: var(--cor-principal-escuro);
            color: #fff;
        }

        menu li a i {
            color: #282828;
            text-align: right;
            width: 10px;
        }

        menu ul li .dropdown-menu.show {
            position: relative !important;
            top: 100% !important;
            left: 0 !important;
            z-index: 1000;
            float: none;
            min-width: 100%;
            padding: 0 0 0 10px;
            margin: 0 0 10px 0 !important;
            font-size: 14px;
            text-align: left;
            list-style: none;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 0 solid #ccc;
            border: 0 solid rgba(0, 0, 0, .15);
            border-radius: 0;
            -webkit-box-shadow: 0 0 0 rgba(0,0,0,.175);
            box-shadow: 0 0 0 rgba(0,0,0,.175);
            transform: none !important;
        }

            menu ul li .dropdown-menu.show > li > a,
            menu ul li .dropdown-menu.show li > a {
                display: block;
                padding: 3px 10px;
                clear: both;
                font-weight: 400;
                line-height: 1.42857143;
                color: var(--cor-principal);
                white-space: nowrap;
                margin: 2px 0;
            }

                menu ul li .dropdown-menu.show > li > a:before,
                menu ul li .dropdown-menu.show li > a:before {
                    content: "\f054";
                    font-family: 'FontAwesome';
                    padding: 0 10px 0 0;
                    color: #ccc;
                    font-weight: 700;
                    font-size: 11px;
                }

            menu ul li .dropdown-menu.show > li.titulo,
            menu ul li .dropdown-menu.show li.titulo {
                font-weight: 600;
                margin-top: 10px;
            }

    .menu-active, .menu-active body {
        overflow: hidden !important;
    }
    /* fim Menu Mobile */
}
/*TABLET*/
@media (min-width: 768px) and (max-width: 1023px) {
}
/*DESKTOP MENORES*/
@media (min-width: 1024px) and (max-width: 1199px) {
}


/* Fonte para dislexia ####################################################### */
/* OpenDyslexic, licenca SIL Open Font License 1.1 (wwwroot/fonts/opendyslexic/
   LICENSE-OFL.txt). Servida do proprio dominio: nenhum CDN externo, para nao
   depender de rede na demonstracao. TR 4.1.6. */

@font-face {
    font-family: 'OpenDyslexic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/opendyslexic/opendyslexic-latin-400-normal.woff2') format('woff2'), url('../fonts/opendyslexic/opendyslexic-latin-400-normal.woff') format('woff');
}

@font-face {
    font-family: 'OpenDyslexic';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/opendyslexic/opendyslexic-latin-400-italic.woff2') format('woff2'), url('../fonts/opendyslexic/opendyslexic-latin-400-italic.woff') format('woff');
}

@font-face {
    font-family: 'OpenDyslexic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/opendyslexic/opendyslexic-latin-700-normal.woff2') format('woff2'), url('../fonts/opendyslexic/opendyslexic-latin-700-normal.woff') format('woff');
}

@font-face {
    font-family: 'OpenDyslexic';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/opendyslexic/opendyslexic-latin-700-italic.woff2') format('woff2'), url('../fonts/opendyslexic/opendyslexic-latin-700-italic.woff') format('woff');
}

.dec-dislexia {
    font-family: 'OpenDyslexic', Verdana, Arial, sans-serif !important;
}

    /* Herda para todo o conteudo textual. Os <i> ficam de fora porque sao os
   icones do Font Awesome: trocar a familia deles apagaria os simbolos. */
    .dec-dislexia *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.glyphicon) {
        font-family: inherit !important;
    }

    /* Widgets de terceiros voltam a usar a fonte propria. */
    .dec-dislexia [vw],
    .dec-dislexia [vw] *,
    .dec-dislexia [class*="cke_"] {
        font-family: initial !important;
    }

/* fim Fonte para dislexia ################################################### */


/* Leitor de texto ########################################################### */
/* Enquanto le, o icone pulsa: indicacao visual de que a leitura esta ativa. */
.bts-config a.bt-leitor.ativo i {
    animation: dec-leitor-pulsa 1.2s ease-in-out infinite;
}

.bts-config a.bt-leitor.pausado i {
    animation: none;
    opacity: .55;
}

@keyframes dec-leitor-pulsa {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }

    100% {
        opacity: 1;
    }
}
/* fim Leitor de texto ####################################################### */


/* Rotulo dos campos de periodo na busca do Diario Oficial (TR 4.2.9.4 V).
   O formulario de busca nao tinha rotulo em campo nenhum, porque placeholder
   dava conta. Com <input type="date"> nao da: o campo mostra "dd/mm/aaaa" e
   nada diz qual das duas pontas do periodo ele e. */
.dec-rotulo-filtro {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: .8;
}


/* ------------------------------------------------------------------
   Calendario mensal do Diario Oficial (TR 4.2.9 I).

   Grade de sete colunas, renderizada no servidor. O dia com edicao vira
   link e ganha uma marca; o dia sem edicao continua legivel, mas sem
   convidar ao clique.
   ------------------------------------------------------------------ */
.dec-calendario-diario {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    margin-bottom: 25px;
    overflow: hidden;
}

.dec-calendario-cabecalho {
    align-items: center;
    background: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
}

    .dec-calendario-cabecalho strong {
        font-size: 15px;
    }

.dec-calendario-navega {
    display: inline-block;
    line-height: 1;
    padding: 6px 10px;
    text-decoration: none;
}

    .dec-calendario-navega:hover,
    .dec-calendario-navega:focus {
        background: rgba(0, 0, 0, .06);
        border-radius: 3px;
    }

.dec-calendario-grade {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

    .dec-calendario-grade th {
        font-size: 11px;
        font-weight: 600;
        opacity: .6;
        padding: 8px 0;
        text-align: center;
    }

        .dec-calendario-grade th abbr {
            border: 0;
            cursor: default;
            text-decoration: none;
        }

.dec-calendario-dia,
.dec-calendario-vazio {
    height: 40px;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
}

    .dec-calendario-dia span {
        font-size: 13px;
        opacity: .45;
    }

/* Dia com edicao: o unico clicavel, e PREENCHIDO (TR 4.2.9 I.c).

   Antes era so a cor do numero mais uma barrinha de 4px embaixo. A
   identificacao existia, mas nao se lia de relance: batendo o olho na grade,
   dia com edicao e dia sem edicao pareciam a mesma coisa, e o requisito pede
   justamente que se distingam. Agora o dia com edicao e um bloco cheio.

   Isso tambem melhora a pista para quem nao distingue cores: a diferenca
   passou a ser de LUMINOSIDADE (bloco escuro x celula clara), e nao de matiz.

   Branco sobre #004b90 da 8,85:1 - bem acima dos 4,5:1 que a WCAG pede para
   texto normal. */
.dec-calendario-com-edicao a {
    background: #004b90; /* mesma cor institucional do color.css */
    border-radius: 3px;
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 34px;
    position: relative;
    text-decoration: none;
}

    /* Escurece, e nao clareia: sobre um bloco cheio, o veu preto de antes
       deixava o azul sujo em vez de responder ao ponteiro. */
    .dec-calendario-com-edicao a:hover,
    .dec-calendario-com-edicao a:focus {
        background: #00396e;
        color: #fff;
    }

/* Marca do dia com edicao — hoje ela vive SOBRE o bloco azul, entao virou
   clara. Azul sobre azul sumiria.

   Com o dia preenchido, ela deixou de ser a pista de "tem edicao" (o proprio
   bloco e essa pista) e passou a servir so ao dia com MAIS DE UMA edicao, que
   e quando ela carrega o numero. Vazia, fica como um tracinho discreto sob o
   dia — nao atrapalha, e some junto se um dia alguem quiser tira-la. */
.dec-calendario-marca {
    background: rgba(255, 255, 255, .85);
    bottom: 3px;
    color: #004b90;
    border-radius: 4px;
    display: block;
    font-size: 9px;
    font-weight: 700;
    height: 4px;
    left: 50%;
    line-height: 4px;
    margin-left: -8px;
    min-width: 16px;
    position: absolute;
}

/* HOJE: uma marca discreta, e não uma borda tracejada.

   O tracejado escuro num dia sem edição parecia defeito — foi lido como isso,
   e com razão: em quase toda interface, contorno pontilhado quer dizer campo
   por preencher ou elemento quebrado. Aqui é só "você está neste dia".

   Um fundo cinza claro diz a mesma coisa sem competir com o azul: o dia com
   edição continua sendo o único elemento forte da grade, que é o que o TR
   4.2.9 I.c pede. Quando hoje TAMBÉM tem edição, o bloco azul cobre o cinza —
   e está certo, porque a informação que importa ali é a edição. */
.dec-calendario-hoje {
    background: #eef1f4;
    border-radius: 3px;
}

/* Enquanto o mês novo não chega. Discreto de propósito: a troca leva
   milissegundos, e um efeito forte piscaria a cada clique na seta. */
.dec-calendario-carregando {
    opacity: .55;
    pointer-events: none;
    transition: opacity .12s ease-out;
}

.dec-calendario-rodape {
    font-size: 12px;
    margin: 0;
    opacity: .75;
    padding: 8px 14px 12px;
}

@media (max-width: 480px) {
    .dec-calendario-dia,
    .dec-calendario-vazio {
        height: 34px;
    }

    .dec-calendario-com-edicao a {
        line-height: 30px;
    }
}


/* Contador de visualizacoes da edicao do Diario (TR 4.2.9.15). Fica ao lado
   dos botoes, discreto: e informacao, nao acao. */
.dec-contador-visualizacoes {
    display: inline-block;
    font-size: 13px;
    margin-bottom: 5px;
    margin-left: 8px;
    opacity: .7;
    vertical-align: middle;
}

    .dec-contador-visualizacoes i {
        margin-right: 4px;
    }

/* ===================================================================
   ARQUIVOS E DOCUMENTOS NA PAGINA DA SECRETARIA   (26/08/2026)

   Um RESUMO por pasta, no fim da pagina. Tudo que carrega a marca -
   borda de topo, icones, contagem, links - sai de --cor-principal, entao
   trocar a cor do municipio pinta este bloco junto, sem tocar aqui. Os
   cinzas (fundo, divisorias, datas) sao fixos de proposito: sao neutros,
   e amarra-los a cor do tema deixaria o cartao sujo em municipio de cor
   forte.
   =================================================================== */
.dec-arquivos-secretaria {
    padding: 40px 0 50px;
    background: #f7f9fa;
}

    /* As colunas do Bootstrap 3 sao FLUTUANTES, e height:100% num float nao faz
   nada: os cartoes saiam com 191, 153, 280 e 116px, deixando buracos na
   grade de duas colunas. Com a linha em flex, os da mesma fileira esticam
   ate a altura do mais alto. O wrap mantem duas por fileira. */
    .dec-arquivos-secretaria .row {
        display: flex;
        flex-wrap: wrap;
    }

.dec-pasta-card {
    background: #fff;
    border: 1px solid #e6ebee;
    border-radius: 6px;
    border-top: 3px solid var(--cor-principal);
    padding: 18px 20px 14px;
    width: 100%;
    /* A linha em flex estica a COLUNA; o cartao ainda precisa preencher a
       coluna esticada. Sem esta altura, os cartoes voltam a ficar cada um
       do seu tamanho dentro de colunas do mesmo tamanho. */
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease;
}

    /* Empurra o "ver os N documentos" para o rodape do cartao, para os links
       ficarem alinhados entre cartoes de tamanhos diferentes. */
    .dec-pasta-card .dec-pasta-lista {
        flex: 1;
    }

    .dec-pasta-card:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    }

.dec-pasta-topo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #e6ebee;
    color: var(--cor-principal);
    font-size: 16px;
}

    .dec-pasta-topo strong {
        flex: 1;
    }

/* A contagem fica no cabecalho, e nao so no link do rodape: quem bate o
   olho precisa saber o tamanho da pasta antes de decidir abrir. */
.dec-pasta-contagem {
    background: var(--cor-principal);
    color: #fff;
    border-radius: 12px;
    padding: 1px 10px;
    font-size: 12px;
    font-weight: 600;
}

.dec-pasta-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .dec-pasta-lista li {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 7px 0;
        border-bottom: 1px solid #f2f5f7;
        /* Item de flex nao encolhe abaixo do conteudo sem isto. Sem o
           min-width, o titulo com nowrap empurrava a linha para 443px dentro
           de um cartao de 301px - as reticencias nunca apareciam porque nao
           havia o que cortar. */
        min-width: 0;
        overflow: hidden;
    }

        .dec-pasta-lista li:last-child {
            border-bottom: 0;
        }

    .dec-pasta-lista a {
        flex: 1;
        color: var(--cor-texto);
        min-width: 0;
    }

        .dec-pasta-lista a:hover {
            color: var(--cor-principal);
        }

/* O titulo pode ser longo. Uma linha com reticencias mantem o cartao do
   mesmo tamanho dos vizinhos - varias alturas diferentes numa grade de
   duas colunas fica visualmente quebrado. */
.dec-doc-titulo {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.dec-doc-data,
.dec-doc-anexos {
    font-size: 12px;
    color: #69767f;
    white-space: nowrap;
}

.dec-pasta-mais {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-principal);
}

@media (max-width: 767px) {
    .dec-pasta-card {
        margin-bottom: 15px;
    }

    .dec-doc-data {
        display: none;
    }
}

/* ===================================================================
   A PORTA DE ARQUIVOS E DOCUMENTOS   (26/08/2026)

   Grade azulejada: os cartoes se encostam separados por um fio de 2px,
   sem sombra e sem canto redondo. O fio e o FUNDO da grade aparecendo
   pelo gap - um pseudo-elemento por cartao daria linha dupla no meio e
   linha faltando na borda.

   Como no resto do projeto, o que carrega a marca sai de --cor-principal
   e os cinzas sao fixos: trocar a cor do municipio pinta a tela junto,
   e amarrar os neutros ao tema sujaria o cartao em cor forte.
   =================================================================== */
.dec-vitrine {
    padding-bottom: 50px;
}

/* ---------------------------------------------------- numeros do acervo */
.dec-vitrine-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 10px 20px;
    border-bottom: 1px solid #e6ebee;
    margin-bottom: 22px;
    background: var(--cor-cinza);
}

    .dec-vitrine-numeros div {
        display: flex;
        flex-direction: column;
    }

    .dec-vitrine-numeros strong {
        font-size: 30px;
        font-weight: 900;
        line-height: 1.1;
        color: var(--cor-principal);
        /* Algarismo de mesma largura: numeros empilhados em coluna que
           dancam de linha para linha parecem desalinhados. */
        font-variant-numeric: tabular-nums;
    }

    .dec-vitrine-numeros span {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #69767f;
        margin-top: 2px;
    }

/* ------------------------------------------------------------- a barra */
.dec-vitrine-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--cor-principal);
    margin-bottom: 2px;
    margin-top: 20px;
}

.dec-vitrine-busca {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Cresce e encolhe: e o campo que cede espaco quando a barra aperta,
       nao os botoes de modo, que tem largura de conteudo. */
    flex: 1 1 320px;
    min-width: 0;
    background: #fff;
    border: 1px solid #dfe6ea;
    padding: 0 12px;
}

    .dec-vitrine-busca i {
        color: var(--cor-principal);
    }

    .dec-vitrine-busca input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        padding: 11px 0;
        font-size: 15px;
    }

.dec-vitrine-buscar {
    border: 0;
    background: var(--cor-principal);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 8px 16px;
    margin: 5px 0;
}

.dec-vitrine-modos {
    display: flex;
}

.dec-vitrine-modo {
    border: 1px solid #dfe6ea;
    background: #fff;
    color: var(--cor-principal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 14px;
}

    .dec-vitrine-modo + .dec-vitrine-modo {
        border-left: 0;
    }

    .dec-vitrine-modo.ativo {
        background: var(--cor-principal);
        border-color: var(--cor-principal);
        color: #fff;
    }

.dec-vitrine-contagem {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #69767f;
    margin-left: auto;
}

/* ------------------------------------------------------------- a grade */
.dec-vitrine-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    /* O fio entre os azulejos: e este fundo que aparece pelo gap. */
    background: #dfe6ea;
    border: 1px solid #dfe6ea;
}

    .dec-vitrine-grade.dec-vitrine-lista {
        grid-template-columns: 1fr;
    }

.dec-vitrine-cartao {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 24px 24px 20px;
    /* Transparente em repouso, e nao ausente: a borda entrando so no hover
       empurraria o conteudo 5px para baixo a cada passada do mouse. */
    border-top: 5px solid transparent;
    transition: border-color .18s ease;
}

    .dec-vitrine-cartao:hover {
        border-top-color: var(--cor-principal);
    }

.dec-vitrine-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 6px;
}

.dec-vitrine-numero {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.8px;
    color: #69767f;
    font-variant-numeric: tabular-nums;
}

.dec-vitrine-topo i {
    font-size: 26px;
    color: var(--cor-principal);
}

.dec-vitrine-titulo {
    display: block;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: var(--cor-texto);
    margin-bottom: 14px;
    text-wrap: balance;
}

    .dec-vitrine-titulo:hover,
    .dec-vitrine-titulo:focus {
        color: var(--cor-principal);
    }

.dec-vitrine-resumo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #69767f;
    margin-bottom: 6px;
}

    /* O filete come o resto da linha depois do rotulo. */
    .dec-vitrine-resumo .dec-vitrine-filete {
        flex: 1;
        height: 1px;
        background: #e6ebee;
    }

    .dec-vitrine-resumo .dec-vitrine-ponto {
        color: #69767f;
        margin: 0 2px;
    }

/* ------------------------------------------------- as pastas do cartao */
.dec-vitrine-pastas {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Empurra o "abrir pasta" para o rodape: com cartoes de alturas
       diferentes na mesma fileira, os links ficam alinhados. */
    flex: 1;
}

    .dec-vitrine-pastas li + li {
        border-top: 1px solid #f2f5f7;
    }

    .dec-vitrine-pastas a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 8px 10px 0;
        color: var(--cor-texto);
        /* Item de flex nao encolhe abaixo do conteudo sem isto, e o nome
           longo empurraria a linha para fora do cartao em vez de cortar. */
        min-width: 0;
    }

        .dec-vitrine-pastas a:hover,
        .dec-vitrine-pastas a:focus {
            color: var(--cor-principal);
        }

        .dec-vitrine-pastas a i {
            color: #69767f;
        }

        .dec-vitrine-pastas a:hover i {
            color: var(--cor-principal);
        }

.dec-vitrine-pasta-nome {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dec-vitrine-pasta-qtd {
    font-size: 12px;
    font-weight: 600;
    color: #69767f;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dec-vitrine-sobra,
.dec-vitrine-sempasta {
    padding: 10px 0;
    font-size: 13px;
    color: #69767f;
    font-style: italic;
}

.dec-vitrine-sempasta {
    flex: 1;
    margin: 0;
}

.dec-vitrine-abrir {
    display: inline-block;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cor-principal);
    background-color: var(--cor-cinza);
    padding: 10px;
}

/* -------------------------------------------------- vazio e rodape LAI */
.dec-vitrine-vazio {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #dfe6ea;
}

    .dec-vitrine-vazio i {
        display: block;
        font-size: 40px;
        color: #69767f;
        margin-bottom: 14px;
    }

    .dec-vitrine-vazio p {
        font-size: 17px;
        color: #627079;
        margin-bottom: 18px;
    }

.dec-vitrine-lai {
    text-align: center;
    padding: 34px 20px 0;
}

    .dec-vitrine-lai p {
        font-size: 16px;
        color: #627079;
        margin-bottom: 14px;
    }

    .dec-vitrine-lai small {
        display: block;
        margin-top: 16px;
        font-size: 12px;
        color: #69767f;
    }

/* --------------------------------------------------------- outras telas */
@media (max-width: 991px) {
    .dec-vitrine-grade {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .dec-vitrine-grade {
        grid-template-columns: 1fr;
    }

    /* Empilhada, a barra vira tres linhas: nao ha canto direito para o
       contador ocupar. */
    .dec-vitrine-contagem {
        margin-left: 0;
    }

    .dec-vitrine-numeros {
        gap: 22px;
    }

        .dec-vitrine-numeros strong {
            font-size: 24px;
        }

    .dec-vitrine-titulo {
        font-size: 21px;
    }
}



/* Tabela geral */
.news-section .table {
    border-collapse: separate;
    border-spacing: 0;
    border-left: 2px solid var(--cor-principal-escuro);
    background: var(--cor-cinza);
}

    .news-section .table thead th {
        border-bottom: 2px solid #e0e0e0;
        font-weight: 700;
        color: var(--cor-principal);
        padding: 12px 15px;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .news-section .table tbody td {
        padding: 18px 15px;
        vertical-align: middle;
        border-top: 1px solid #f0f0f0;
    }

.news-section .table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafafa;
}

.news-section .table tbody tr {
    transition: background 0.15s ease;
}

    .news-section .table tbody tr:hover {
        background-color: #f2f6fb;
    }

/* Badge de data */
.news-section .badge-primary {
    background: var(--cor-principal, #0d3b66);
    font-weight: 500;
    font-size: 12px;
    padding: 6px 12px;
    white-space: nowrap;
}

/* Miniatura de imagem na galeria */
.dec-galeria-documento {
    margin-top: 10px !important;
}

    .dec-galeria-documento a {
        display: inline-block;
        width: 64px;
        height: 64px;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
        margin-right: 8px;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

        .dec-galeria-documento a:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

/* Coluna Anexos - quando vazia */
.news-section .table td > .text-muted {
    color: #b5b5b5 !important;
    font-style: italic;
    font-size: 13px;
}

/* Links de anexo (PDFs etc) */
.news-section .table td a.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--cor-principal);
    text-decoration: none;
    white-space: nowrap;
    margin: 0 0 6px 0;
    transition: all 0.15s ease;
}

    .news-section .table td a.btn:hover {
        background: var(--cor-principal, #0d3b66);
        border-color: var(--cor-principal, #0d3b66);
        color: #fff;
    }
    /* Troca o ícone de nuvem por um ícone de documento visualmente mais claro */
    .news-section .table td a.btn .fa-cloud-download-alt::before {
        content: "\f1c1"; /* fa-file-pdf */
    }
/* remove os <br> forçando quebra e usa flex-wrap no lugar */
.news-section .table td br {
    display: none;
}

/* Empilha os botões de anexo com espaçamento consistente */
.news-section .table td {
    display: table-cell;
}

.news-section .table tbody tr td:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 14px;
}

/* Documento: título + subtítulo */
.news-section .table td strong {
    color: #222;
    font-size: 14.5px;
}

.news-section .table td small.text-muted {
    border-radius: 15px;
    color: #999 !important;
    font-size: 11px;
    margin: 0px 10px;
    border: 1px solid #9ba6b0;
    padding: 6px;
}


/* ===================================================================
   O FOCO DO TECLADO PRECISA APARECER   (26/08/2026)

   O tema traz `body :focus { outline: none }` (custom.css), que apaga o
   indicador de foco do site INTEIRO. Quem navega por Tab - e quem depende
   disso e justamente quem nao usa mouse - ficava sem saber onde estava:
   medido em cinco tipos de controle (link de menu, botao da barra, campo
   de busca, botao de busca, link de rodape), todos devolviam outline:none.
   E falha de WCAG 2.4.7, e o avaliador do governo pontua.

   Usa :focus-visible, e nao :focus: o anel aparece para quem navega pelo
   teclado e nao aparece no clique de mouse, entao o desenho da tela nao
   muda para quem ja enxergava onde clicou.

   O dec.css e a ultima folha carregada, entao esta regra ganha da do tema
   sem precisar de !important.
   =================================================================== */
/* Propriedades separadas, e nao o atalho `outline`: com var() dentro do
   atalho a cor nao pegou (o anel saia preto, herdado do currentColor) e so
   a espessura e o estilo valeram. Em longhand o var() resolve. */
body :focus-visible {
    outline-style: solid;
    outline-width: 3px;
    outline-color: var(--cor-principal, #003159);
    outline-offset: 2px;
}

/* No alto contraste o azul do tema desaparece no fundo preto. O amarelo
       e a convencao para indicador de foco em tema escuro. */
.dec-contraste :focus-visible {
    outline-color: #ffbf47;
}

/* ===================================================================
   EDICAO EXTRA DO DIARIO   (26/08/2026)

   A extra sai com o MESMO numero da edicao de origem, entao sem uma
   marca duas linhas da listagem ficam identicas. O selo precisa ser
   legivel, e nao decorativo: e ele que distingue um documento oficial
   de outro.

   Contraste conferido: #7a4a00 sobre #fff3e0 da 6.1:1.
   =================================================================== */
.dec-selo-extra {
    display: inline-block;
    background: #fff3e0;
    color: #7a4a00;
    border: 1px solid #f0d3a8;
    border-radius: 3px;
    padding: 1px 8px;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ===================================================================
   O TOPO DO DIARIO E O LEITOR   (26/08/2026)

   Card da ultima edicao ao lado do calendario, faixa de numeros
   embaixo, e a pagina de leitura com PDF.js. Cores do tema; os
   cinzas sao os mesmos ja usados no resto do projeto, todos acima
   de 4.5:1 sobre branco.
   =================================================================== */

/* -------------------------------------------- topo: card + calendario */
.dec-diario-topo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 20px;
    /* stretch, e nao start: com start cada caixa ficava com a propria
       altura e sobrava um vazio desigual embaixo da mais baixa - o
       calendario, quase sempre. Esticadas, as duas terminam na mesma
       linha. */
    align-items: stretch;
    margin-bottom: 20px;
}

    /* A celula estica, mas quem pinta o fundo e a borda e o filho: sem
       altura cheia nele, a caixa continuaria curta dentro de uma celula
       alta - o vazio so mudaria de lugar. */
    .dec-diario-topo > * {
        min-height: 100%;
    }

.dec-ultima {
    background: #fff;
    border: 1px solid #dfe6ea;
    border-top: 4px solid var(--cor-principal);
    padding: 18px 20px;
    /* Coluna em flex para os botoes irem para o rodape do cartao: com as
       duas caixas da mesma altura, botao colado no conteudo deixaria um
       buraco embaixo dele. */
    display: flex;
    flex-direction: column;
}

    .dec-ultima .dec-ultima-corpo {
        flex: 1;
    }

.dec-ultima-titulo {
    margin: 0 0 14px;
}

.dec-ultima-corpo {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.dec-capa-edicao {
    position: relative;
    flex: 0 0 150px;
    max-width: 150px;
    min-height: 190px;
    background: #f2f5f7;
    border: 1px solid #dfe6ea;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dec-capa-canvas {
    display: block;
    width: 100%;
    height: auto;
}

    /* Nasce transparente e so aparece quando o desenho termina: canvas
       vazio piscando em branco antes da capa e pior que o icone. */
    .dec-capa-canvas:not(.pronta) {
        opacity: 0;
        position: absolute;
    }

.dec-capa-reserva {
    color: #b9c4cb;
    font-size: 46px;
}

.dec-ultima-dados {
    flex: 1;
    min-width: 0;
    margin: 0;
}

    .dec-ultima-dados dt {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #69767f;
        margin-top: 8px;
    }

        .dec-ultima-dados dt:first-child {
            margin-top: 0;
        }

    .dec-ultima-dados dd {
        margin: 0 0 2px;
        font-size: 14px;
        color: var(--cor-texto);
        word-break: break-word;
    }

.dec-ultima-documento {
    font-family: monospace;
    letter-spacing: .5px;
}

.dec-ultima-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* COMPARTILHAR A EDIÇÃO (29/08/2026).

   Só layout: os botões são os btn-dec de sempre, então o modo de alto
   contraste e o tema já valem sem regra nova aqui. */
.dec-compartilhar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dec-compartilhar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* O [hidden] do HTML vale display:none por padrão do navegador, mas as duas
   regras acima declaram display e ganhariam dele. */
.dec-compartilhar [hidden] {
    display: none !important;
}

/* O aviso ("Link copiado") ocupa a linha inteira: no meio dos botões ele
   empurraria os de trás a cada vez que aparecesse e sumisse. Sem cor
   própria, herda a do texto ao redor e acompanha o alto contraste. */
.dec-compartilhar-aviso {
    flex-basis: 100%;
    margin: 0;
    font-size: .875rem;
}

.dec-diario-calendario {
    display: flex;
    flex-direction: column;
}

    .dec-diario-calendario .dec-calendario-diario {
        margin: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* A grade do calendario cresce para ocupar a sobra: sem isto o mes
           com quatro semanas deixaria a caixa mais curta que o cartao. */
    .dec-diario-calendario .dec-calendario-grade {
        flex: 1;
    }

/* ----------------------------------------------- o Diario em numeros */
.dec-diario-numeros {
    background: #f7f9fa;
    border: 1px solid #dfe6ea;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.dec-diario-numeros-titulo {
    margin: 0 0 12px;
}

.dec-diario-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .dec-diario-badges li {
        flex: 1 1 150px;
        background: #fff;
        border: 1px solid #dfe6ea;
        border-radius: 4px;
        padding: 10px 14px;
        text-align: center;
    }

    .dec-diario-badges strong {
        display: block;
        font-size: 22px;
        font-weight: 900;
        color: var(--cor-principal);
        font-variant-numeric: tabular-nums;
        line-height: 1.2;
    }

    .dec-diario-badges span {
        display: block;
        font-size: 12px;
        color: #69767f;
        margin-top: 2px;
    }

.dec-diario-premissa {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #627079;
}

/* ===================================================================
   O SELO ICP-BRASIL   (27/08/2026)

   Marca da Infraestrutura de Chaves Publicas Brasileira, ao lado do
   rotulo de assinatura - no cartao da ultima edicao, na ficha do leitor e
   na pagina de autenticidade.

   COLADO NO ROTULO, em tamanho de icone. Grande e solto no fim do bloco,
   como nasceu, ele nao dizia de que era selo: ficava um retangulo verde
   embaixo de tudo. Ao lado da palavra "Assinatura" ele vira legenda.
   =================================================================== */
.dec-selo-icp {
    display: inline-block;
    /* 22px, e nao a altura da linha do rotulo. Testei com 17: as menores
       formas da marca tem um terco da altura dela, e a 17px isso vira
       menos de 6px - o simbolo virava um borrao verde. Um logotipo
       ilegivel e pior do que nenhum. */
    height: 22px;
    width: auto;
    max-width: 100%;
    /* middle alinharia pelo meio da minuscula e deixaria o selo alto
       demais ao lado de um rotulo em CAIXA ALTA. */
    vertical-align: -6px;
    margin-right: 6px;
}

/* Logotipo esta fora da regra de contraste (WCAG 1.4.11), e mudar a cor
   descaracterizaria a marca - entao o alto contraste tambem nao a inverte.
   So garante fundo claro atras, para o verde nao sumir no preto. */
.dec-contraste .dec-selo-icp {
    background: #fff;
    padding: 2px 3px;
    border-radius: 2px;
}

/* ===================================================================
   TITULOS DAS SECOES DO DIARIO   (27/08/2026)

   A pagina de autenticidade usava <h2> e <h3> crus: 40px e 32px, o padrao
   do Bootstrap - MAIORES que o proprio titulo da pagina, que tem 21px. A
   hierarquia ficava de cabeca para baixo.

   O rotulo em caixa alta ja era a convencao do modulo (era o que
   .dec-ultima-titulo e .dec-diario-numeros-titulo faziam, cada um com sua
   copia da mesma regra). Agora e uma regra so.
   =================================================================== */
.dec-titulo-secao,
.dec-ultima-titulo,
.dec-diario-numeros-titulo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--cor-principal);
    line-height: 1.5;
}

.dec-titulo-secao {
    margin: 0 0 12px;
}

/* Qual edicao esta sendo conferida. Abaixo do titulo da pagina (21px), e
   acima dos rotulos de secao: e ele que diz do que a pagina trata. */
.dec-titulo-edicao {
    font-size: 20px;
    font-weight: 600;
    color: var(--cor-principal);
    margin: 0 0 10px;
    line-height: 1.35;
}

@media (max-width: 767px) {
    /* NO CELULAR ISTO E OBRIGATORIO, e nao ajuste fino.
       Ha, mais abaixo neste arquivo, um "body h2/h3 { font-size: ... !important }"
       para telas estreitas. Sem repetir aqui com !important, ele devolveria
       estes rotulos a 23px e 19px - e um rotulo em CAIXA ALTA com 1.4px de
       espacamento nesse tamanho ocupa duas linhas e some com a informacao ao
       lado. Era o que ja acontecia com "ULTIMA EDICAO" e "DIARIO OFICIAL EM
       NUMEROS" desde que o cartao nasceu; so apareceu quando os quatro
       titulos passaram a dividir a mesma regra. */
    .dec-titulo-secao,
    .dec-ultima-titulo,
    .dec-diario-numeros-titulo {
        font-size: 13px !important;
    }

    .dec-titulo-edicao {
        font-size: 20px !important;
    }
}

/* ===================================================================
   O LEITOR DA EDICAO, EM TELA CHEIA   (27/08/2026)

   Pagina PROPRIA, sem o layout do portal. Nao e preferencia estetica:
   e uma tela de leitura, e cabecalho, menu e rodape do site roubariam
   a altura de que o visor precisa - no celular sobraria uma faixa de
   PDF espremida entre duas barras.

   A janela inteira e a tela: barra fina em cima, visor ocupando o
   grosso e painel de dados fixo a direita. Estrutura da referencia de
   Penapolis; a paleta e a do municipio, vinda do proprio dec.css.
   =================================================================== */
/* Esta pagina NAO carrega o Bootstrap - e o Bootstrap e quem punha
   box-sizing: border-box em tudo no resto do site. Sem este reset, o
   padding do painel somava POR FORA da largura: 340 + 40 de padding + 1
   de borda davam 381px, e o visor perdia 41px sem ninguem pedir. */
.dec-app,
.dec-app *,
.dec-app *::before,
.dec-app *::after {
    box-sizing: border-box;
}

.dec-app {
    /* A pagina nao rola: quem rola e o visor. Sem isto o painel lateral
       subiria junto com o PDF e sairia da vista. */
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #52565c;
    font-family: 'Montserrat', Arial, sans-serif;
}

/* ------------------------------------------------------------- topo */
.dec-app-topo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    height: 54px;
    background: var(--cor-principal);
    color: #fff;
}

.dec-app-voltar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 6px 10px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .35);
    white-space: nowrap;
}

    .dec-app-voltar:hover,
    .dec-app-voltar:focus {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

.dec-app-titulo {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .dec-app-titulo small {
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, .8);
        margin-left: 10px;
    }

.dec-app-acoes {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ------------------------------------------------------------ corpo */
.dec-app-corpo {
    flex: 1;
    min-height: 0;
    display: flex;
}

.dec-app-visor {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #52565c;
}

.dec-app-barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #3f4348;
    border-bottom: 1px solid #2e3135;
}

.dec-app-vao {
    flex: 1;
}

.dec-app-bt {
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: 3px;
    padding: 6px 11px;
    line-height: 1;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

    .dec-app-bt:hover,
    .dec-app-bt:focus {
        background: rgba(255, 255, 255, .2);
        color: #fff;
    }

.dec-app-topo .dec-app-bt {
    border-color: rgba(255, 255, 255, .35);
}

.dec-app-conta {
    color: #e6e9ec;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    padding: 0 4px;
    white-space: nowrap;
}

.dec-app-paginas {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px 12px;
    text-align: center;
}

.dec-leitor-pagina {
    display: block;
    margin: 0 auto 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    max-width: 100%;
}

.dec-app-carregando {
    color: #e6e9ec;
    padding: 50px 0;
}

.dec-app-aviso {
    margin: 16px;
    padding: 14px 16px;
    background: #fff3e0;
    border: 1px solid #f0d3a8;
    color: #7a4a00;
}

/* -------------------------------------------------- painel lateral */
.dec-app-lado {
    /* Largura fixa: o painel e uma ficha, nao um bloco de texto - se ele
       crescesse com a janela, o PDF encolheria sem motivo. */
    flex: 0 0 340px;
    width: 340px;
    background: #fff;
    border-left: 1px solid #2e3135;
    overflow: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
}

    .dec-app-lado section + section {
        margin-top: 24px;
    }

    .dec-app-lado h2 {
        margin: 0 0 12px;
        padding-bottom: 8px;
        border-bottom: 1px dashed #e6ebee;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--cor-principal);
    }

        .dec-app-lado h2 i {
            margin-right: 5px;
        }

    .dec-app-lado dl {
        margin: 0;
    }

    .dec-app-lado dt {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #69767f;
        margin-top: 12px;
    }

        .dec-app-lado dt:first-child {
            margin-top: 0;
        }

    .dec-app-lado dd {
        margin: 0;
        font-size: 14px;
        color: var(--cor-texto);
        word-break: break-word;
    }

.dec-app-mono {
    font-family: monospace;
    letter-spacing: .5px;
}

.dec-app-nota,
.dec-app-ok,
.dec-app-alerta {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.dec-app-nota {
    color: #627079;
}

.dec-app-ok {
    color: #1c6b33;
}

.dec-app-alerta {
    color: #8a4b00;
}

    .dec-app-ok i,
    .dec-app-alerta i {
        margin-right: 5px;
    }

.dec-app-lado-pe {
    /* Empurra o botao para o fim do painel: com poucos dados ele ficaria
       colado no texto e sobraria um vazio embaixo. */
    margin-top: auto;
    padding-top: 20px;
}

.dec-app-bt-largo {
    display: block;
    text-align: center;
    background: var(--cor-principal);
    color: #fff;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}

    .dec-app-bt-largo:hover,
    .dec-app-bt-largo:focus {
        background: var(--cor-secundaria-escuro);
        color: #fff;
    }

.dec-app .dec-selo-extra {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}

/* ------------------------------------------------------ celular */
.dec-app-so-mobile {
    display: none;
}

@media (max-width: 900px) {
    /* A tela nao comporta 340px de ficha ao lado de um PDF legivel. O
       painel vira gaveta, aberta pelo botao da barra de cima. */
    .dec-app-so-mobile {
        display: inline-flex;
    }

    .dec-app-lado {
        position: fixed;
        top: 54px;
        right: 0;
        bottom: 0;
        z-index: 20;
        transform: translateX(100%);
        transition: transform .22s ease;
        box-shadow: -4px 0 16px rgba(0, 0, 0, .3);
        max-width: 90vw;
    }

    .dec-app-painel-aberto .dec-app-lado {
        transform: translateX(0);
    }

    .dec-app-rotulo {
        display: none;
    }

    .dec-app-titulo {
        font-size: 14px;
    }

        .dec-app-titulo small {
            display: none;
        }
}

@media (prefers-reduced-motion: reduce) {
    .dec-app-lado {
        transition: none;
    }
}

/* ------------------------------------------------------ outras telas */
@media (max-width: 991px) {
    .dec-diario-topo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .dec-ultima-corpo {
        flex-direction: column;
    }

    .dec-capa-edicao {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    .dec-diario-badges li {
        flex: 1 1 100%;
    }
}

/* Combos de mes e ano do calendario do Diario (26/08/2026). As setas andam
   de um em um; para chegar a uma edicao de dois anos atras isso custava
   dezenas de cliques. */
.dec-calendario-escolha {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.dec-calendario-select {
    border: 1px solid #dfe6ea;
    border-radius: 3px;
    background: #fff;
    color: var(--cor-texto);
    font-size: 13px;
    padding: 4px 6px;
    max-width: 110px;
}

.dec-calendario-ir {
    border: 1px solid var(--cor-principal);
    background: var(--cor-principal);
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 5px 10px;
    border-radius: 3px;
}

/* ===================================================================
   O FILTRO DE BUSCA DO DIARIO   (27/08/2026)

   Eram duas <ul class="row"> do Bootstrap com larguras diferentes
   (4+2+2 numa, 3+3+2 na outra): as colunas nao se alinhavam entre as
   linhas e a segunda parecia encolhida.

   Agora e uma grade de QUATRO colunas iguais. O termo ocupa duas, o
   botao ocupa duas, o resto uma cada - entao as bordas dos campos caem
   exatamente no mesmo lugar nas duas linhas.
   =================================================================== */
.dec-filtro-diario {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    /* end: o botao nao tem rotulo em cima, entao sem isto ele subiria e
       ficaria desalinhado dos campos ao lado. */
    align-items: end;
}

    .dec-filtro-diario > li {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

.dec-filtro-largo {
    grid-column: span 2;
}

.dec-filtro-diario label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-principal);
    margin-bottom: 4px;
    /* Rotulo de uma linha so: "Publicadas a partir de" quebrando em duas
       empurraria o campo para baixo e desalinharia a fileira. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dec-filtro-diario .form-control {
    width: 100%;
}

.dec-filtro-diario button {
    width: 100%;
    border: 0;
    background: var(--cor-principal);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 3px;
    /* MESMA caixa do .form-control desta tela (padding 0 16px, line-height
       42, altura 43, umas linhas acima). Com padding proprio o botao saia
       15px mais alto que os campos ao lado: os fundos alinhavam, mas o topo
       sobrava e a fileira parecia torta. */
    padding: 0 16px;
    line-height: 42px;
    height: 43px;
}

    .dec-filtro-diario button:hover {
        background: var(--cor-secundaria-escuro);
    }

@media (max-width: 991px) {
    .dec-filtro-diario {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .dec-filtro-diario {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Numa coluna so, "ocupar duas" nao quer dizer nada e quebraria a
       grade. */
    .dec-filtro-largo {
        grid-column: span 1;
    }
}

/* ==========================================================================
   A SEÇÃO DO DIÁRIO OFICIAL NA PÁGINA INICIAL (TR 4.2.9)

   Duas colunas no desktop — calendário à esquerda, última edição à direita —
   e uma lista curta embaixo. Em telas estreitas vira uma coluna só, na ordem
   em que a marcação está: calendário, destaque, lista.

   As classes do calendário NÃO são redefinidas aqui: ele é o mesmo arquivo da
   página do Diário e continua com o estilo dele. O que esta folha faz é dar
   o espaço em volta.
   ========================================================================== */
.dec-home-diario {
    padding: 60px 0;
}

.dec-home-diario-cabecalho {
    align-items: baseline;
    border-bottom: 2px solid var(--cor-principal, #004b90);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 10px;
}

    .dec-home-diario-cabecalho h2 {
        font-size: 26px;
        font-weight: 700;
        margin: 0;
    }

.dec-home-diario-todas {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.dec-home-diario-corpo {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.dec-home-diario-calendario {
    flex: 1 1 320px;
    max-width: 420px;
}

.dec-home-diario-destaque {
    background: #f7f9fa;
    border-radius: 4px;
    flex: 1 1 320px;
    padding: 20px 24px;
}

/* AS DUAS CAIXAS TÊM A MESMA ALTURA (29/08/2026).

   Os dois contêineres já esticavam (align-items padrão do flex), mas o
   cartão do calendário parava na altura do conteúdo dele e o box da direita
   sobrava vazio embaixo. Agora o cartão estica junto, e a capa da edição
   preenche o que faltava do lado direito. */
.dec-home-diario-calendario > .dec-calendario-diario {
    height: 100%;
}

.dec-home-diario-destaque {
    display: flex;
    flex-direction: column;
}

/* A ficha: capa à esquerda, identificação e botões à direita. Abaixo de
   560px a capa vai para cima do texto, senão sobra uma coluna de texto
   estreita demais para o nome da edição. */
.dec-home-diario-ficha {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 18px;
}

.dec-home-diario-ficha-texto {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    min-width: 0;
}

    /* Os botões descem para o pé do cartão: com a capa ao lado, deixá-los
   colados no texto abria um vão entre eles e a base da capa. */
    .dec-home-diario-ficha-texto .dec-home-diario-botoes {
        margin-top: auto;
        padding-top: 14px;
    }

/* A capa manda na altura do cartão: ela é a única coisa aqui que cresce
   sozinha, e a caixa precisa acompanhar a do calendário ao lado. A 160px a
   capa saía com 223px de altura e sobrava um vão embaixo; a 200px ela chega
   a ~283px e o cartão fecha junto com o calendário. */
.dec-home-diario-ficha > .dec-capa-edicao {
    flex: 0 0 200px;
    max-width: 200px;
}

/* O RÓTULO acima do número, como na referência: ele diz o que o cartão é,
   e o número diz qual edição. */
.dec-home-diario-rotulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 4px;
    opacity: .7;
    text-transform: uppercase;
}

/* A FICHA: um dado por linha, com o ícone numa coluna fixa para os textos
   alinharem entre si. Sem a largura fixa, cada linha começava num lugar. */
.dec-home-diario-meta {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

    .dec-home-diario-meta > li {
        align-items: center;
        display: flex;
        gap: 8px;
        line-height: 1.5;
        padding: 3px 0;
    }

        .dec-home-diario-meta > li > i {
            flex: 0 0 16px;
            opacity: .65;
            text-align: center;
        }

/* Verde de "confere", e não a cor principal: aqui a cor É a informação —
   diz que o documento tem assinatura válida. */
.dec-home-diario-assinado {
    color: #1c7c3e;
    font-weight: 600;
}

    .dec-home-diario-assinado > i {
        opacity: 1 !important;
    }

/* No alto contraste a cor sozinha não vale: o verde perde para o fundo
   preto, e a informação ia junto. */
.dec-contraste .dec-home-diario-assinado {
    color: inherit;
}

.dec-selo-icp-pequeno {
    height: 15px;
    width: auto;
}

/* Botão de largura cheia, empilhado. O btn-dec é inline-block com padding
   próprio; sem o flex o ícone e o texto não centralizavam juntos. */
.dec-bt-bloco {
    align-items: center;
    display: flex !important;
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* O compartilhar é ação de terceira ordem: não vira botão de largura cheia
   junto com "ler" e "baixar", mas centraliza, senão fica pendurado à
   esquerda embaixo de dois botões centrados. */
.dec-home-diario-botoes .dec-compartilhar {
    justify-content: center;
}

@media (max-width: 560px) {
    .dec-home-diario-ficha > .dec-capa-edicao {
        flex-basis: 140px;
        max-width: 140px;
    }
}

.dec-home-diario-subtitulo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.dec-home-diario-numero {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.dec-home-diario-nome {
    margin: 0 0 14px;
}

.dec-home-diario-botoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 6px;
}

.dec-home-diario-vazio {
    margin: 0;
    opacity: .75;
}

.dec-home-diario-anteriores-titulo {
    margin-top: 28px;
}

.dec-home-diario-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cada linha é data, identificação e um caminho de acesso — os três mínimos
   do TR 4.2.9 II, na ordem em que se lê. */
.dec-home-diario-item {
    align-items: center;
    border-bottom: 1px solid #e8ecef;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 12px 4px;
}

    .dec-home-diario-item:last-child {
        border-bottom: 0;
    }
/* A linha e uma coluna de texto (titulo + nome) e o link, lado a lado. */
.dec-home-diario-item-texto {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    min-width: 0;
}

.dec-home-diario-item-numero {
    line-height: 1.4;
}

/* Linha secundaria: menor e mais apagada que o titulo, para nao disputar
   com o numero e a data, que sao a identidade da edicao. */
.dec-home-diario-item-nome {
    font-size: .9375em;
    opacity: .75;
}

.dec-home-diario-item-bt {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .dec-home-diario {
        padding: 36px 0;
    }

    .dec-home-diario-calendario {
        max-width: none;
    }

    /* A data sozinha numa linha e o resto embaixo: espremer os três numa
       largura de celular deixaria o número quebrando no meio. */
    .dec-home-diario-item-data {
        min-width: 100%;
    }
}

/* =========================================================================
   ENQUETES (30/08/2026)

   Portado do Ponto Chique, onde o modulo foi construido. As classes de tema
   que a secao da home usa - official-members, team-heading,
   dec-mobile-center - ja existem neste portal, nos arquivos do tema.

   As regras .enquete-uf que ja estavam aqui NAO sao deste modulo: vem do
   tema e desenham a caixa de UF. Por isso ficaram de fora.
   ========================================================================= */

.enquete-uf {
    margin-bottom: 50px;
    background-color: var(--cor-cinza);
    padding: 50px 0;
}

/* ==========================================================================
   Enquetes
   ==========================================================================
   As barras do resultado são <span> com width em porcentagem — sem biblioteca
   de gráfico, que o portal não carrega. A barra é aria-hidden na view: o número
   aparece escrito ao lado, e é dele que a informação vem.
   ========================================================================== */

.enquete-box {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 20px;
}

.enquete-box-home {
    border-left: 4px solid var(--cor-principal);
}

.enquete-capa {
    margin: -25px -25px 20px -25px;
}

    .enquete-capa img {
        width: 100%;
        height: auto;
        border-radius: 6px 6px 0 0;
        display: block;
    }

.enquete-etiqueta {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cor-principal);
    margin-bottom: 8px;
}

.enquete-pergunta {
    font-size: 22px;
    line-height: 1.35;
    margin: 0 0 10px 0;
}

.enquete-periodo, .enquete-nota, .enquete-total {
    font-size: 13px;
    color: #666;
}

.enquete-descricao {
    margin: 15px 0;
}

.enquete-nota {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #e6e6e6;
    font-style: italic;
}

/* Situação: só a cor muda, o texto continua escrito por extenso — cor sozinha
   não informa quem não a distingue. */
.enquete-situacao {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 12px;
    color: #fff;
    background: #999;
}

.enquete-situacao-emvotacao {
    background: #2e7d32;
}

.enquete-situacao-encerrada {
    background: #6c757d;
}

.enquete-situacao-agendada {
    background: #b9770e;
}

/* Urna */
.enquete-urna {
    margin: 20px 0 10px 0;
}

    .enquete-urna fieldset {
        border: 0;
        padding: 0;
        margin: 0;
    }

.enquete-opcoes {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

    .enquete-opcoes li {
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        margin-bottom: 8px;
        transition: border-color .15s;
    }

        .enquete-opcoes li:hover {
            border-color: var(--cor-principal);
        }

    .enquete-opcoes label {
        display: block;
        /* O padding é do label, e não do li: assim a linha inteira é área de
       clique, que é o que se espera no celular. */
        padding: 12px 15px 12px 40px;
        margin: 0;
        cursor: pointer;
        font-weight: 400;
    }

    .enquete-opcoes input[type="radio"] {
        /* Posicionado, e não display:none: escondido de verdade ele sai da ordem de
       tabulação e a urna deixa de ser navegável pelo teclado. */
        position: absolute;
        margin: 14px 0 0 15px;
    }

        .enquete-opcoes input[type="radio"]:focus + label {
            outline: 2px solid var(--cor-principal);
            outline-offset: 2px;
        }

.enquete-botao {
    background: var(--cor-principal);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 10px 25px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
}

    .enquete-botao:hover {
        opacity: .9;
    }

.enquete-aviso-login, .enquete-resultado-fechado, .enquete-ja-votou, .enquete-encerrada {
    font-size: 13px;
    color: #555;
    margin-top: 12px;
}

.enquete-ja-votou {
    color: #2e7d32;
    font-weight: 600;
}

/* Resultado */
.enquete-titulo-resultado {
    font-size: 16px;
    text-transform: uppercase;
    margin: 25px 0 15px 0;
}

.enquete-resultado ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.enquete-resultado li {
    margin-bottom: 15px;
}

.enquete-resultado-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.enquete-resultado-texto {
    flex: 1;
}

.enquete-resultado-numero {
    font-weight: 700;
    white-space: nowrap;
    color: var(--cor-principal);
}

    .enquete-resultado-numero small {
        font-weight: 400;
        color: #666;
    }

.enquete-barra {
    background: #eceff1;
    border-radius: 4px;
    height: 14px;
    overflow: hidden;
}

    .enquete-barra span {
        display: block;
        height: 100%;
        background: var(--cor-principal);
        border-radius: 4px;
    }

/* Listagem */
.enquete-filtros {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

    .enquete-filtros li {
        display: inline-block;
        margin-right: 8px;
    }

    .enquete-filtros a {
        display: inline-block;
        padding: 7px 16px;
        border: 1px solid #e6e6e6;
        border-radius: 20px;
        font-size: 13px;
        color: #555;
    }

        .enquete-filtros a.ativo, .enquete-filtros a:hover {
            background: var(--cor-principal);
            border-color: var(--cor-principal);
            color: #fff;
        }

.enquete-card-capa {
    max-height: 160px;
    overflow: hidden;
}

    .enquete-card-capa img {
        width: 100%;
        height: auto;
    }

.enquete-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
}

@media (max-width: 767px) {

    .enquete-box {
        padding: 18px;
    }

    .enquete-capa {
        margin: -18px -18px 15px -18px;
    }

    .enquete-pergunta {
        font-size: 18px;
    }

    .enquete-resultado-topo {
        flex-direction: column;
        gap: 0;
    }
}

/* CPF na urna e aviso de navegador (voto único sem login) */
.enquete-cpf {
    margin: 0 0 15px 0;
}

    .enquete-cpf label {
        display: block;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .enquete-cpf input {
        max-width: 220px;
        padding: 10px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 15px;
    }

        .enquete-cpf input:focus {
            outline: 2px solid var(--cor-principal);
            outline-offset: 1px;
        }

    .enquete-cpf small {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: #666;
        max-width: 480px;
    }

.enquete-aviso-navegador {
    background: #fff8e1;
    border-left: 3px solid #b9770e;
    padding: 10px 14px;
    font-size: 13px;
    color: #5d4a12;
    margin: 15px 0;
}

.enquete-alerta {
    margin-bottom: 20px;
    font-size: 15px;
}

/* ==========================================================================
   Cards de enquete em destaque na home
   ==========================================================================
   Nao ha formulario aqui: o card leva para a pagina da enquete, onde fica o
   voto. Dois lado a lado em telas largas, empilhados no celular.
   ========================================================================== */

.enquete-destaques .row {
    display: flex;
    flex-wrap: wrap;
}

/* So as colunas DOS CARDS esticam. A regra ja foi [class^="col-"], que pegava
   tambem a coluna de titulo e esmagava o .team-heading. */
.enquete-destaque-col {
    display: flex;
    margin-bottom: 20px;
}

/* O .team-heading do tema nasce com padding-top de 100px, para alinhar com os
   cards altos de noticia. Os cards de enquete sao mais baixos, e aquele
   empurrao deixava o titulo flutuando no meio da secao. */
.enquete-destaques-titulo {
    padding: 0;
}

/* O bloco de texto centraliza VERTICALMENTE em relacao aos cards ao lado.
   A coluna do titulo e sempre a primeira da linha.

   align-self NA COLUNA, e nao align-items na .row: centralizar a linha inteira
   tiraria o stretch das colunas dos cards, e eles voltariam a ter alturas
   diferentes um do outro - que foi justamente o que o
   ".enquete-destaque-col { display: flex }

" resolveu.

   No celular nao muda nada, e nao precisa de media query: ali as colunas
   quebram para 100% e cada linha do flex tem um item so, entao a altura da
   linha e a altura do proprio bloco e nao ha o que centralizar. */
.enquete-destaques .row > div:first-child {
    align-self: center;
    /* A MESMA margem inferior das colunas dos cards, e nao enfeite: align-self
       centraliza a CAIXA DE MARGEM. Sem esta linha a caixa dos cards fica 20px
       mais alta que a parte visivel deles, e o texto para 10px - metade da
       margem - abaixo do centro. Medido. */
    margin-bottom: 20px;
}

.enquete-destaques-titulo h2 {
    line-height: 1.2;
}

.enquete-card-home {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-left: 4px solid var(--cor-principal);
    border-radius: 6px;
    overflow: hidden;
}

.enquete-card-home-capa {
    max-height: 150px;
    overflow: hidden;
}

    .enquete-card-home-capa img {
        width: 100%;
        height: auto;
        display: block;
    }

.enquete-card-home-corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.enquete-card-home-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.enquete-card-home-pergunta {
    font-size: 18px;
    line-height: 1.35;
    margin: 0 0 12px 0;
}

.enquete-card-home-opcoes {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

    .enquete-card-home-opcoes li {
        font-size: 14px;
        color: #444;
        padding: 5px 0 5px 18px;
        position: relative;
        border-bottom: 1px dashed #f0f0f0;
    }

        .enquete-card-home-opcoes li:before {
            content: "\f111";
            font-family: "Font Awesome 5 Free";
            font-weight: 400;
            font-size: 7px;
            color: var(--cor-principal);
            position: absolute;
            left: 0;
            top: 10px;
        }

.enquete-card-home-mais {
    font-style: italic;
    color: #888;
    border-bottom: 0 !important;
}

    .enquete-card-home-mais:before {
        content: "" !important;
    }

.enquete-card-home-periodo {
    font-size: 13px;
    color: #666;
    /* Empurra o botao para o rodape do card, alinhando os dois botoes na
       mesma linha mesmo com perguntas de tamanhos diferentes. */
    margin: auto 0 12px 0;
}

.enquete-botao-card {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    align-self: flex-start;
}

    .enquete-botao-card:hover, .enquete-botao-card:focus {
        color: #fff;
    }

@media (max-width: 767px) {

    .enquete-card-home-pergunta {
        font-size: 16px;
    }

    .enquete-card-home-corpo {
        padding: 16px;
    }
}

/* Aviso no lugar dos cards quando nao ha enquete em destaque. Ocupa a mesma
   area da direita que os cards ocupariam, para a secao nao encolher. */
.enquete-sem-destaque {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 25px;
    background: var(--cor-cinza);
    border: 1px dashed #d6d6d6;
    border-radius: 6px;
    color: #666;
    font-size: 15px;
    text-align: center;
}

/* Aviso na pagina da enquete que ainda nao abriu. Mesma familia visual do
   selo "Aguardando votacao" do card. */
.enquete-agendada {
    background: #fff8e1;
    border-left: 3px solid #b9770e;
    padding: 12px 15px;
    color: #5d4a12;
    margin: 15px 0;
}


/* ============================================================
   ATALHOS AGRUPADOS  (31/08/2026)

   O titulo de cada grupo, na home e no Portal da Transparencia.
   So aparece quando o municipio criou grupos - sem grupo, a
   grade sai unica e nenhum destes seletores casa com nada.

   Herda o alinhamento e a cor do titulo da secao: e um subtitulo
   dela, e nao um bloco novo. No -topo, que fica sobre a imagem
   de fundo, vale o branco pelo mesmo motivo do h2.
   ============================================================ */
.dec-atalhos-grupo {
    margin: 26px 0 6px;
    font-weight: 700;
    text-align: center;
    font-size: 20px;
    color: var(--cor-principal);
}

    .dec-atalhos-grupo i {
        margin-right: 8px;
        color: var(--cor-principal-claro);
    }

.box-acesso-rapido-topo .dec-atalhos-grupo,
.box-acesso-rapido-topo .dec-atalhos-grupo i {
    color: #fff;
}

/* Na transparencia o titulo fica sobre fundo claro e alinhado a
   esquerda, junto com o resto do texto da pagina. */
.portal-transparencia .dec-atalhos-grupo {
    text-align: left;
    border-bottom: 1px solid #e7eaec;
    padding-bottom: 8px;
}


/* ============================================================
   ABAS DO ACESSO RAPIDO  (01/09/2026)

   So aparecem quando o municipio criou grupos. Antes cada grupo
   virava uma faixa com titulo centralizado em cima, e com poucos
   atalhos por grupo sobrava muito espaco vazio entre eles.

   A faixa fica sobre a imagem de fundo do -topo, entao o texto e
   branco, como o h2 da secao. A aba aberta ganha um sublinhado
   grosso e opacidade cheia; as demais ficam esmaecidas - contraste
   suficiente para nao depender so da cor, que e o que o eMAG pede.
   ============================================================ */
.dec-abas-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
    margin: 0px 0 23px;
}

    .dec-abas-lista .dec-aba {
        background: transparent;
        border: 0;
        border-bottom: 3px solid transparent;
        color: #fff;
        opacity: .72;
        font-size: 15px;
        font-weight: 600;
        padding: 8px 16px;
        line-height: 1.3;
        cursor: pointer;
    }

        .dec-abas-lista .dec-aba i {
            margin-right: 7px;
        }

        .dec-abas-lista .dec-aba:hover {
            opacity: 1;
        }

        /* O ESTADO ABERTO NAO E SO COR. Sublinhado e peso mudam junto,
       para quem nao distingue o contraste continuar vendo qual e. */
        .dec-abas-lista .dec-aba[aria-selected="true"] {
            opacity: 1;
            border-bottom-color: #fff;
        }

        /* Foco visivel e obrigatorio: sem isto, quem navega por teclado
       nao sabe onde esta. */
        .dec-abas-lista .dec-aba:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
            opacity: 1;
        }

        /* Navegadores sem :focus-visible caem aqui. */
        .dec-abas-lista .dec-aba:focus {
            opacity: 1;
        }

/* No celular a faixa vira uma coluna: com quatro ou cinco grupos, as
   abas lado a lado ficariam com duas letras cada. */
@media (max-width: 767px) {
    .dec-abas-lista {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

        .dec-abas-lista .dec-aba {
            border-bottom-width: 2px;
        }
}


/* ---------------------------------------------------------------------------
   GRADE 2D DAS SECOES DA HOME (10/09/2026)

   Quando uma linha tem mais de uma secao - ou uma secao estreitada - a Index
   embrulha a faixa em .container > .row e poe cada secao num
   .col-md-{Largura}. As secoes nasceram como faixas de largura total, com
   .container proprio; dentro de uma coluna esse .container precisa virar
   fluido, senao a largura fixa dele estoura a coluna.

   LINHA DE LARGURA CHEIA NAO PASSA POR AQUI: ela cai no caminho rapido da
   Index e sai sem embrulho nenhum, exatamente como o markup antigo. E por isso
   que a refatoracao nao muda a home enquanto ninguem mexer no painel.

   .dec-home-faixa e .dec-home-card CONTEM OS FLOATS, e isso nao e cosmetico.

   As secoes do portal usam .wf100, que e width:100% MAIS float:left. Filho
   flutuante nao conta para a altura do pai, entao a faixa nasceria com altura
   ZERO - e uma faixa de altura zero nao pinta fundo, nao aplica padding e nao
   respeita margem. Ou seja: sem isto, metade do que o painel configura por
   linha simplesmente nao apareceria, sem erro nenhum para denunciar.

   display:flow-root cria um contexto de formatacao que contem os floats sem os
   efeitos colaterais do overflow:hidden (que cortaria dropdown e sombra) nem o
   ::after do clearfix classico.

   Medido no navegador antes da correcao: 11 das 12 faixas com altura 0.
   --------------------------------------------------------------------------- */
.dec-home-faixa,
.dec-home-card { display: flow-root; }

.dec-home-coluna > section.wf100 { width: 100%; }

.dec-home-coluna .container {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}


/* ---------------------------------------------------------------------------
   LARGURA TOTAL DA LINHA E DO BLOCO (13/09/2026)

   Dois controles independentes. O da LINHA vale só para a caixa da faixa (o
   fundo); o conteúdo da linha segue o container. O do BLOCO estica a caixa E
   o conteúdo do bloco até a borda da página — decisão do David em
   13/09/2026, que substituiu a versão em que só o fundo esticava. Ver o
   comentário na Index.

   A FAIXA CONTIDA mora dentro de um .container sem recuo lateral: a caixa
   dela fica exatamente do tamanho do container. A grade de dentro vira
   automática para caber mesmo quando o padding da faixa a aperta — o
   .container do Bootstrap 3 tem largura FIXA e estouraria.
   --------------------------------------------------------------------------- */
.dec-home-faixa-limite {
    padding-left: 0;
    padding-right: 0;
}

    .dec-home-faixa-limite .dec-home-linha-wrap {
        width: auto;
    }

/* O RESPIRO LATERAL DA GRADE VEM DA LINHA (14/09/2026). Eram os 15px do
   .container do Bootstrap; agora é o padding esquerdo e direito configurado na
   linha, que a Index põe em --dec-linha-pad-esq/-dir. O espaço ENTRE blocos
   lado a lado continua o do Bootstrap (15px de cada coluna), por decisão do
   David. */
.container.dec-home-linha-wrap {
    padding-left: var(--dec-linha-pad-esq, 0px);
    padding-right: var(--dec-linha-pad-dir, 0px);
}

/* A SANGRIA DO BLOCO.

   Estica a caixa até a borda da página com margem negativa. A distância até a
   borda é (largura da janela − largura do container) / 2 + o recuo da coluna.

   A LARGURA DO CONTAINER É A DO BOOTSTRAP 3 do portal (bootstrap.min.css):
   750px a partir de 768, 970 a partir de 992, 1170 a partir de 1200, e a
   janela inteira abaixo de 768. Se esse arquivo mudar, mudam estes números.
   O padding da faixa contida entra por --dec-linha-pad, que a Index põe no
   style dela.

   100vw conta a barra de rolagem; clientWidth não. A caixa passa meia barra
   de cada lado, e o .dec-home-grade corta. O conteúdo, que agora vai junto até
   a borda, desconta essa meia barra pelo --dec-barra, medido pela Index; sem
   o script ele fica a 7,5px da borda em vez de 15, e nada quebra.

   overflow-x: clip, e não hidden: clip não cria contexto de rolagem nem de
   formatação, então não trava position:sticky nem muda o colapso de margem —
   e a margem negativa de uma faixa que sobe por cima da anterior continua
   aparecendo, porque o eixo vertical fica visível. */
.dec-home-grade {
    overflow-x: clip;
    --dec-grade-w: 100vw;
    --dec-sangria: calc((100vw - var(--dec-grade-w)) / 2);
}

@media (min-width: 768px) {
    .dec-home-grade { --dec-grade-w: 750px; }
}

@media (min-width: 992px) {
    .dec-home-grade { --dec-grade-w: 970px; }
}

@media (min-width: 1200px) {
    .dec-home-grade { --dec-grade-w: 1170px; }
}

/* A distância até a borda é a sobra da página em volta da grade MAIS o
   respiro lateral da linha — que é onde a coluna começa (14/09/2026; antes eram
   os 15px fixos e, na faixa contida, o padding dela). */
.dec-bloco-sangra {
    display: flow-root;
    --dec-sangria-esq: calc(var(--dec-sangria) + var(--dec-linha-pad-esq, 0px));
    --dec-sangria-dir: calc(var(--dec-sangria) + var(--dec-linha-pad-dir, 0px));
}

/* A MARGEM NEGATIVA vai no invólucro, que é quem cresce — e com ele o card e
   a seção, que ocupam a largura dele: os dois fundos chegam à borda.

   O CONTEÚDO VAI JUNTO (13/09/2026). O container de dentro do bloco já é
   fluido na coluna (.dec-home-coluna .container), então basta dar a ele, do
   lado que estica, o respiro de 15px do Bootstrap — mais a meia barra de
   rolagem que o 100vw passou. O lado de dentro, o do vizinho, não muda.

   A versão anterior punha ali um padding igual à sangria, para o conteúdo
   ficar onde estava. Isso foi trocado a pedido do David: bloco em largura
   total estica o conteúdo também.

   O recuo vai no PRIMEIRO .container de dentro do bloco, e não na seção:
   várias seções nativas têm recuo lateral próprio (a Nossa História usa 20px
   no celular), e padding na seção o substituiria.

   O ":not(...)" pega só o container mais de fora DENTRO DO BLOCO: seção com
   um container dentro de outro receberia o recuo duas vezes. O invólucro tem
   de estar no seletor — o container da grade fica acima dele, e
   ":not(.container .container)" sozinho excluiria todos.

   Tela larga: colunas lado a lado, estica só o lado que encosta na borda. */
@media (min-width: 992px) {
    .dec-bloco-sangra-esq {
        margin-left: calc(-1 * var(--dec-sangria-esq));
    }

        .dec-bloco-sangra-esq .container:not(.dec-bloco-sangra .container .container) {
            padding-left: calc(var(--dec-linha-pad-esq, 0px) + var(--dec-barra, 0px));
        }

    .dec-bloco-sangra-dir {
        margin-right: calc(-1 * var(--dec-sangria-dir));
    }

        .dec-bloco-sangra-dir .container:not(.dec-bloco-sangra .container .container) {
            padding-right: calc(var(--dec-linha-pad-dir, 0px) + var(--dec-barra, 0px));
        }
}

/* Tela estreita: as colunas empilham e cada bloco fica sozinho na sua altura
   — todo bloco marcado tem os dois lados "de fora". */
@media (max-width: 991.98px) {
    .dec-bloco-sangra {
        margin-left: calc(-1 * var(--dec-sangria-esq));
        margin-right: calc(-1 * var(--dec-sangria-dir));
    }

        .dec-bloco-sangra .container:not(.dec-bloco-sangra .container .container) {
            padding-left: calc(var(--dec-linha-pad-esq, 0px) + var(--dec-barra, 0px));
            padding-right: calc(var(--dec-linha-pad-dir, 0px) + var(--dec-barra, 0px));
        }
}

/* O CAMINHO RÁPIDO — bloco sozinho, linha e bloco totais — não tem invólucro
   de sangria: a seção já vai de borda a borda sozinha. Só o conteúdo precisa
   soltar: o .container do Bootstrap 3 tem largura FIXA (970/1170), e aqui ele
   passa a ocupar a seção inteira, com o respiro lateral da linha (eram 15px
   fixos até 14/09/2026). Sem 100vw, sem barra de rolagem para descontar. */
.dec-home-faixa-bloco-total .container:not(.dec-home-faixa-bloco-total .container .container) {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--dec-linha-pad-esq, 0px);
    padding-right: var(--dec-linha-pad-dir, 0px);
}


/* ---------------------------------------------------------------------------
   BLOCO GENERICO DE NOTICIAS (10/09/2026)

   Cards, carrossel e abas reaproveitam classes que ja existem no portal
   (_boxNoticias, owl-carousel, dec-abas). A LISTA e a unica que precisa de
   estilo proprio, e o card sem imagem precisa do selo que substitui o que
   ficava sobre a foto.
   --------------------------------------------------------------------------- */

/* SEM ESPAÇO FIXO EMBAIXO (14/09/2026). O bloco usa a classe noticias-home das
   Últimas notícias, pelos estilos de card e carrossel, e herdava com ela os
   50px de padding embaixo. No bloco o espaço vem do padding da linha; as
   Últimas notícias continuam com os delas. */
.noticias-home.dec-bloco-noticias {
    padding-bottom: 0;
}

.dec-bloco-lista {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.dec-bloco-lista-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e7e7e7;
}

.dec-bloco-lista-titulo {
    font-weight: 600;
    text-decoration: none;
}

.dec-bloco-lista-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.dec-bloco-lista-selo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--cor-principal);
    color: #fff;
    border-radius: 3px;
    padding: 2px 8px;
}

.dec-bloco-lista-data {
    font-size: 13px;
    color: #6b6b6b;
}

.dec-bloco-carrossel .dec-bloco-carrossel-item { margin: 0 2px; }

/* O SELO DA CATEGORIA QUANDO NAO HA FOTO. Com a imagem ligada ele fica por
   cima dela (.ecat); sem a imagem nao haveria onde poe-lo, e a categoria
   sumiria do card. */
.dec-ecat-inline {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--cor-principal);
    color: #fff;
    border-radius: 3px;
    padding: 2px 8px;
    margin-bottom: 8px;
}

.news-post-sem-imagem .news-post-txt { padding-top: 4px; }


/* =========================================================================
   TERCEIRO NIVEL DO MENU - as subcategorias da categoria de um item.

   O TEMA JA TRAZ QUASE TUDO, e por isso este bloco e curto. O custom.css ja
   poe o li em position:relative, a .sub-menu em left:100% escondida, e a abre
   no :hover. O responsive.css ja resolve as duas telas menores: de 768 a 991
   o flyout abre para a esquerda (left:inherit; right:0), para nao sair da
   tela, e abaixo de 768 ele vira lista aberta e recuada no lugar.

   O QUE FALTAVA:

   1. :focus-within. O unico gatilho era o :hover, entao o terceiro nivel
      existia so para quem usa mouse - quem navega por teclado chegava ao
      item e a lista nunca abria (eMAG 3). O portal e auditado, e um menu que
      so responde ao ponteiro e a falha classica desse recurso.

   2. A seta que avisa que ha mais coisa ali. Sem ela o item parece igual aos
      outros e ninguem descobre o flyout.

   3. O ULTIMO grupo da barra abre o dropdown encostado a direita (regra
      .menu-last-li). Ali o flyout em left:100% sairia da tela, entao ele
      abre para o outro lado.
   ========================================================================= */

.tem-subcategorias > a > .seta-subcategorias {
    float: right;
    margin-left: 8px;
    line-height: inherit;
    opacity: .6;
}

@media (min-width: 992px) {

    /* (1) o teclado abre o mesmo flyout que o mouse. O seletor acompanha o do
       custom.css para valer a mesma especificidade. */
    .navbar-nav > li > .dropdown-menu li.tem-subcategorias:focus-within .sub-menu {
        display: block;
    }

    /* (3) */
    .h3-navbar .menu-last-li .dropdown-menu li.tem-subcategorias > .sub-menu {
        left: auto;
        right: 100%;
    }
}

/* ---- Motor de listas, etapa 2 (13/09/2026) -------------------------------

   Imagem por item, linha de detalhe, cartão atrás dos itens. Tudo só entra
   quando a aba ou a seção configura: sem configuração, nenhuma destas classes
   aparece na marcação, e a lista e a grade saem como antes. */

/* A linha de detalhe fica embaixo do título, menor e mais apagada. */
.dec-secao-abas .dec-item-detalhe {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #777777;
}

/* Lista com imagem: a miniatura à esquerda, o texto ao lado. */
.dec-secao-abas .event-list.dec-item-com-imagem {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    list-style: none;
    padding-left: 0;
}

    .dec-secao-abas .event-list.dec-item-com-imagem .el-thumb {
        flex: 0 0 96px;
    }

    .dec-secao-abas .event-list.dec-item-com-imagem .el-thumb img {
        display: block;
        width: 96px;
        height: 72px;
        object-fit: cover;
        border-radius: 3px;
    }

/* Grade com imagem: a foto no topo do cartão, sempre na mesma proporção, para
   a fileira não ficar em escada com fotos de tamanhos diferentes. */
.dec-secao-abas .dec-item-imagem img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* O cartão atrás dos itens: legibilidade sobre faixa escura com foto. A cor
   vem da seção. */
.dec-secao-abas .dec-itens-com-fundo {
    /* O cabeçalho da seção vem num .wf100, que FLUTUA: sem o clear, o cartão
       começava atrás do título, no topo da seção. O flow-root faz o cartão
       conter também o que flutua dentro dele. */
    clear: both;
    display: flow-root;
    background: var(--dec-itens-fundo, #ffffff);
    padding: 20px 25px;
    border-radius: 5px;
}

/* ---- Motor de listas, etapa 3 (13/09/2026) -------------------------------

   O botão de cada item e o "veja todos" no fim da aba. Os dois usam classes
   que o tema já desenha (joinnow, btn-dec), as do Fique por Dentro. */

.dec-secao-abas .event-list.dec-item-com-botao {
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
    padding-left: 0;
}

    .dec-secao-abas .event-list.dec-item-com-botao .el-title {
        flex: 1 1 auto;
    }

    .dec-secao-abas .event-list.dec-item-com-botao .el-botao {
        flex: 0 0 auto;
    }

.dec-secao-abas .event-list.dec-item-com-imagem .el-title {
    flex: 1 1 auto;
}

.dec-secao-abas .dec-item-botao {
    margin-top: 12px;
}

    /* Na grade o botão fica fora do .event-list, onde o tema desenha o
       joinnow; esta regra repete o resultado final das regras dele (a cor
       principal com !important vencendo o cinza), para os dois formatos
       mostrarem o mesmo botão. */
    .dec-secao-abas .dec-item-botao a.joinnow {
        display: inline-block;
        padding: 5px 20px;
        border: 1px solid var(--cor-cinza);
        border-radius: 15px;
        background: var(--cor-principal);
        color: #ffffff;
        font-size: 14px;
        line-height: 15px;
        text-transform: lowercase;
    }

.dec-secao-abas .dec-veja-todos {
    clear: both;
    margin: 20px 0 0;
}

/* ---- A lista genérica com o desenho do Fique por Dentro (13/09/2026) ------

   Aprovado pelo David: "pode usar a aparência da lista que tinha em Fique por
   dentro". Até aqui a lista genérica herdava do tema um `.event-list
   li.el-title { width: 40% }` e as bolinhas de lista — os títulos saíam
   espremidos na metade esquerda. Agora ela usa o mesmo desenho que as regras
   `.recent-events` davam ao Fique por Dentro, que deixou de ser tipo fixo:

     - as linguetas em caixa com a cor principal, a ativa em branco;
     - o painel dos itens no cinza-claro do tema, com borda;
     - cada item em largura cheia, separado por uma linha, sem bolinha;
     - a data em destaque, na cor principal;
     - o botão de cada item à direita (no celular, embaixo).

   As linguetas valem para lista e grade; o painel e os itens, só para a lista
   (a grade continua com os cartões dela). Copiado, e não herdado da classe
   .recent-events, porque ela carrega também o fundo escuro com foto e é usada
   nas páginas de detalhe de licitação e documento. */

.dec-secao-abas .nav-tabs {
    clear: both;
    border-bottom: 0;
    margin-top: 20px;
}

    .dec-secao-abas .nav-tabs > li > a {
        position: relative;
        overflow: hidden;
        margin-right: 5px;
        padding: 0 20px;
        border: 0;
        border-radius: 0;
        background: var(--cor-principal);
        color: #ffffff;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        line-height: 51px;
        text-transform: uppercase;
    }

        .dec-secao-abas .nav-tabs > li > a.active,
        .dec-secao-abas .nav-tabs > li > a.active:focus,
        .dec-secao-abas .nav-tabs > li > a:hover {
            margin-bottom: -1px;
            border: 1px solid #eeeeee;
            border-bottom: 0;
            background: #ffffff;
            color: #222222;
        }

/* O cabeçalho .wf100 flutua. Sem o clear, o painel da lista começava atrás do
   título — branco sobre o cinza-claro numa faixa escura — e, na grade, o
   primeiro cartão ficava espremido ao lado do título no celular (medido: 0px
   de largura). Vale para os dois formatos. */
.dec-secao-abas .tab-content {
    clear: both;
}

.dec-secao-abas.dec-formato-lista .tab-content {
    width: 100%;
    padding: 15px;
    border: 1px solid #eeeeee;
    border-radius: 0 5px 5px 5px;
    background: var(--cor-cinza);
}

.dec-secao-abas.dec-formato-lista .event-list {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin: 0 0 15px;
    padding: 0 0 15px;
    border-bottom: 1px solid #eeeeee;
    list-style: none;
}

    .dec-secao-abas.dec-formato-lista .event-list:last-child {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .dec-secao-abas.dec-formato-lista .event-list li.el-title {
        flex: 1 1 auto;
        width: auto;
        line-height: 1.5;
    }

    .dec-secao-abas.dec-formato-lista .event-list .el-campo-data {
        color: var(--cor-principal);
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
    }

@media (max-width: 767px) {
    .dec-secao-abas .nav-tabs > li > a {
        margin: 0 0 5px;
    }

    .dec-secao-abas.dec-formato-lista .event-list {
        flex-wrap: wrap;
    }
}

/* A grade com a imagem AO LADO do texto (13/09/2026) — o cartão da diretoria
   que o Conselheiros tinha: foto à esquerda, nome e cargo à direita. Com a foto
   em cima, a seção passava do dobro da altura. */
.dec-secao-abas .dec-grade-imagem-ao-lado .news-box {
    display: flex;
    align-items: stretch;
}

    .dec-secao-abas .dec-grade-imagem-ao-lado .news-box .dec-item-imagem {
        flex: 0 0 38%;
    }

        .dec-secao-abas .dec-grade-imagem-ao-lado .news-box .dec-item-imagem img {
            height: 100%;
            min-height: 150px;
            aspect-ratio: auto;
        }

    .dec-secao-abas .dec-grade-imagem-ao-lado .news-box .new-txt {
        flex: 1 1 auto;
        align-self: center;
        /* O tema justifica o texto do cartão; numa coluna estreita ao lado da
           foto, um nome longo sai com os espaços esticados. */
        text-align: left;
    }

/* ===================================================================
   BLOCO DE PREVISÃO DO TEMPO (14/09/2026)

   As cores vêm do painel como variáveis no style do .dec-clima; sem
   escolha, cartão branco, texto escuro e a cor principal do tema.

   O LAYOUT SE AJEITA PELA LARGURA DO BLOCO (container query), e não pela
   da tela: numa coluna estreita da home, o "completo" empilha mesmo num
   monitor grande. Sem suporte a container query, fica o empilhado.
   =================================================================== */
.dec-clima {
    --clima-fundo: #ffffff;
    --clima-texto: #1f2a37;
    --clima-destaque: var(--cor-principal);
    container-type: inline-size;
    clear: both;
    /* Sem os 50px fixos embaixo (14/09/2026): o espaço vem do padding da
       linha. A migration SecoesBlocosSemEspacoFixoEmbaixo somou os 50 ao
       padding de baixo das linhas que já tinham o bloco. */
    color: var(--clima-texto);
}

    .dec-clima ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

.dec-clima-cartao {
    background: var(--clima-fundo);
    color: var(--clima-texto);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    padding: 20px;
}

.dec-clima-corpo {
    display: grid;
    gap: 16px;
}

    /* Sem isto, a faixa de horas (que rola por dentro) alarga a coluna da
       grade até caber tudo, e o bloco vaza para fora da página. */
    .dec-clima-corpo > * {
        min-width: 0;
    }

.dec-clima-icone,
.dec-clima-icone-grande,
.dec-clima-detalhes i,
.dec-clima-maxmin i,
.dec-clima-horas-agora i {
    color: var(--clima-destaque);
}

.dec-clima-cidade {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
}

/* ------------------------------------------------------------ o agora */
.dec-clima-agora-principal {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dec-clima-icone-grande {
    flex: 0 0 auto;
    font-size: 64px;
    line-height: 1;
}

.dec-clima-temperatura {
    color: var(--clima-destaque);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.05;
}

    .dec-clima-temperatura span {
        font-size: 22px;
        font-weight: 600;
        vertical-align: top;
        position: relative;
        top: 6px;
        margin-left: 2px;
    }

.dec-clima-condicao {
    font-size: 16px;
    font-weight: 600;
}

.dec-clima-maxmin {
    display: flex;
    gap: 14px;
    margin-top: 4px;
    font-weight: 600;
}

    .dec-clima-maxmin i {
        margin-right: 4px;
        font-size: 12px;
    }

.dec-clima .dec-clima-detalhes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(127, 127, 127, .25);
}

    .dec-clima-detalhes li {
        display: grid;
        grid-template-columns: 22px 1fr;
        align-items: center;
        column-gap: 8px;
        line-height: 1.3;
    }

        .dec-clima-detalhes li i {
            grid-row: span 2;
            font-size: 17px;
            text-align: center;
        }

        .dec-clima-detalhes li span {
            font-size: 12px;
            opacity: .75;
        }

        .dec-clima-detalhes li small {
            font-size: 11px;
            font-weight: 400;
            opacity: .8;
        }

@container (min-width: 640px) {
    .dec-clima-layout-agora .dec-clima-agora {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 30px;
    }

    .dec-clima.dec-clima-layout-agora .dec-clima-detalhes {
        margin: 0;
        padding: 0 0 0 30px;
        border-top: 0;
        border-left: 1px solid rgba(127, 127, 127, .25);
    }
}

/* ------------------------------------------------------- os próximos dias */
.dec-clima .dec-clima-dias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 12px;
}

.dec-clima-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    text-align: center;
    line-height: 1.3;
}

.dec-clima-dia-nome {
    font-weight: 700;
    text-transform: capitalize;
}

.dec-clima-dia-data {
    font-size: 12px;
    opacity: .7;
}

.dec-clima-dia .dec-clima-icone {
    margin: 10px 0 8px;
    font-size: 30px;
}

.dec-clima-dia-temps strong {
    font-size: 18px;
}

.dec-clima-dia-temps span {
    margin-left: 6px;
    opacity: .7;
}

.dec-clima-chuva {
    margin-top: 4px;
    font-size: 12px;
    opacity: .85;
    white-space: nowrap;
}

    .dec-clima-chuva i {
        margin-right: 3px;
    }

/* No completo, os dias viram LINHAS dentro de um cartão só, ao lado do
   agora: em colunas, os cartões esticavam até a altura do agora e ficavam
   vazios no meio. */
.dec-clima.dec-clima-layout-completo .dec-clima-dias {
    display: block;
    padding: 6px 20px;
    border-radius: 10px;
    background: var(--clima-fundo);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.dec-clima-layout-completo .dec-clima-dia {
    display: grid;
    grid-template-columns: minmax(64px, auto) 44px 1fr auto 56px;
    align-items: center;
    column-gap: 10px;
    padding: 10px 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

    .dec-clima-layout-completo .dec-clima-dia + .dec-clima-dia {
        border-top: 1px solid rgba(127, 127, 127, .2);
    }

    .dec-clima-layout-completo .dec-clima-dia .dec-clima-icone {
        margin: 0;
        font-size: 22px;
        text-align: center;
    }

    .dec-clima-layout-completo .dec-clima-dia .dec-clima-chuva {
        margin: 0;
        text-align: right;
    }

.dec-clima-dia-temps {
    white-space: nowrap;
}

/* NO CELULAR (ou numa coluna estreita), os próximos dias também viram
   linhas: em cartões, sete dias davam três fileiras e mais de uma tela de
   altura. Mesmo desenho das linhas do completo. */
@container (max-width: 520px) {
    .dec-clima.dec-clima-layout-dias .dec-clima-dias {
        display: block;
        padding: 6px 20px;
        border-radius: 10px;
        background: var(--clima-fundo);
        box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    }

    .dec-clima-layout-dias .dec-clima-dia {
        display: grid;
        grid-template-columns: minmax(64px, auto) 44px 1fr auto 56px;
        align-items: center;
        column-gap: 10px;
        padding: 10px 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        text-align: left;
    }

        .dec-clima-layout-dias .dec-clima-dia + .dec-clima-dia {
            border-top: 1px solid rgba(127, 127, 127, .2);
        }

        .dec-clima-layout-dias .dec-clima-dia .dec-clima-icone {
            margin: 0;
            font-size: 22px;
            text-align: center;
        }

        .dec-clima-layout-dias .dec-clima-dia .dec-clima-chuva {
            margin: 0;
            text-align: right;
        }
}

/* Numa coluna estreita, a data sai da linha do dia: sem ela, máxima e
   mínima cabem lado a lado. */
@container (max-width: 400px) {
    .dec-clima-layout-completo .dec-clima-dia,
    .dec-clima-layout-dias .dec-clima-dia {
        grid-template-columns: minmax(64px, auto) 1fr auto 48px;
    }

    .dec-clima-layout-completo .dec-clima-dia-data,
    .dec-clima-layout-dias .dec-clima-dia-data {
        display: none;
    }
}

@container (min-width: 760px) {
    .dec-clima-layout-completo .dec-clima-corpo {
        grid-template-columns: minmax(280px, 1fr) 1.4fr;
        align-items: stretch;
    }

    .dec-clima.dec-clima-layout-completo .dec-clima-dias {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
}

/* ------------------------------------------------------ as próximas horas */
.dec-clima-horas-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 8px;
}

.dec-clima-horas-agora {
    font-weight: 600;
}

    .dec-clima-horas-agora i {
        margin-right: 4px;
    }

.dec-clima .dec-clima-horas {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 2px 6px;
    scrollbar-width: thin;
}

    .dec-clima-horas:focus-visible {
        outline: 2px solid var(--clima-destaque);
        outline-offset: 2px;
    }

.dec-clima-hora {
    display: flex;
    flex: 1 0 62px;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 8px;
    background: rgba(127, 127, 127, .07);
    line-height: 1.3;
    text-align: center;
}

.dec-clima-hora-rotulo {
    font-size: 13px;
    opacity: .75;
}

.dec-clima-hora .dec-clima-icone {
    margin: 6px 0;
    font-size: 22px;
}

.dec-clima-hora strong {
    font-size: 16px;
}

/* ----------------------------------------------- rodapé e indisponível */
/* O rodapé fica FORA dos cartões (o layout de dias não tem um cartão só),
   então ganha o fundo do cartão: numa faixa escura, continua legível. */
.dec-clima-rodape {
    margin: 10px 0 0;
    text-align: right;
}

    .dec-clima-rodape > span {
        display: inline-block;
        padding: 3px 12px;
        border-radius: 20px;
        background: var(--clima-fundo);
        color: var(--clima-texto);
        font-size: 12px;
        opacity: .9;
    }

    .dec-clima-rodape a {
        color: inherit;
        text-decoration: underline;
    }

.dec-clima-indisponivel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 20px;
    font-size: 16px;
}

    .dec-clima-indisponivel i {
        color: var(--clima-destaque);
        font-size: 28px;
        opacity: .6;
    }

@media (max-width: 480px) {
    .dec-clima-icone-grande {
        font-size: 48px;
    }

    .dec-clima-temperatura {
        font-size: 42px;
    }
}

/* ===================================================================
   BOTÃO COM CORES ESCOLHIDAS NO PAINEL (14/09/2026)

   Hoje só o da Nossa história. As cores chegam como variáveis no style do
   botão; a que não foi escolhida fica no padrão do btn-primary (fundo na cor
   principal, texto branco). Sem cor nenhuma o botão nem recebe esta classe e
   continua o btn-primary de sempre, com o hover do tema.

   NO HOVER, FUNDO E TEXTO TROCAM DE LUGAR — decisão do David. A borda fica na
   cor do fundo, para o botão não sumir quando a cor do texto é a mesma da
   faixa atrás dele. O foco por teclado mostra o mesmo que o hover.
   =================================================================== */
.btn.btn-dec.dec-botao-cores {
    --dec-botao-fundo: var(--cor-principal);
    --dec-botao-texto: #ffffff;
    color: var(--dec-botao-texto) !important;
    background-color: var(--dec-botao-fundo) !important;
    border-color: var(--dec-botao-fundo) !important;
}

    .btn.btn-dec.dec-botao-cores:hover,
    .btn.btn-dec.dec-botao-cores:focus-visible,
    .btn.btn-dec.dec-botao-cores:active {
        color: var(--dec-botao-fundo) !important;
        background-color: var(--dec-botao-texto) !important;
        border-color: var(--dec-botao-fundo) !important;
    }


/* ===================================================================
   ACESSO RÁPIDO: GRADE, ALINHAMENTO, ÍCONE E TEXTO CURTO (14/09/2026)

   Pedido do David. As escolhas vêm da tela "Aparência do bloco no site"
   (classes e variáveis no style da seção, montadas pelo
   AparenciaAcessoRapido). Sem escolha nenhuma, o computador fica como
   sempre foi: 6 por linha, centralizado, ícone acima, sem pastilha.

   BOTÕES POR LINHA. O número escolhido vale a partir de 992px; no tablet,
   até 3; no celular, até 2 (antes era 1 abaixo de 992px — mudança aceita
   pelo David). As alturas de cada linha se igualam pelo flex que o
   .dec-box-alinhar-vertical-pai já tinha. Tudo escopado em .dec-ar-grade:
   o Portal da Transparência usa o mesmo botão e não muda.
   =================================================================== */
.dec-ar-grade .dec-box-alinhar-vertical-pai > .dec-box-alinhar-vertical-filho {
    width: calc(100% / min(var(--ar-por-linha, 6), 2));
}

@media (min-width: 768px) {
    .dec-ar-grade .dec-box-alinhar-vertical-pai > .dec-box-alinhar-vertical-filho {
        width: calc(100% / min(var(--ar-por-linha, 6), 3));
    }
}

@media (min-width: 992px) {
    .dec-ar-grade .dec-box-alinhar-vertical-pai > .dec-box-alinhar-vertical-filho {
        width: calc(100% / var(--ar-por-linha, 6));
    }
}

/* ALINHAMENTO do ícone e dos textos dentro do botão. Centro é o padrão. */
.dec-ar-alinha-esquerda.box-acesso-rapido a.box {
    text-align: left;
}

.dec-ar-alinha-direita.box-acesso-rapido a.box {
    text-align: right;
}

/* ÍCONE À ESQUERDA DO TEXTO. O ícone ocupa a primeira coluna, alto como o
   nome e o texto curto juntos; o alinhamento escolhido move o conjunto. */
.dec-ar-icone-esquerda.box-acesso-rapido a.box > div {
    display: grid;
    grid-template-columns: auto minmax(0, max-content);
    column-gap: 12px;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.dec-ar-icone-esquerda.dec-ar-alinha-esquerda.box-acesso-rapido a.box > div {
    justify-content: start;
}

.dec-ar-icone-esquerda.dec-ar-alinha-direita.box-acesso-rapido a.box > div {
    justify-content: end;
}

    .dec-ar-icone-esquerda.box-acesso-rapido a.box > div > i {
        grid-column: 1;
        grid-row: 1;
    }

    /* Com texto curto, o ícone fica ao lado do nome E do texto. Sem ele, só
       ao lado do nome — ocupar duas linhas empurrava o nome para o alto do
       cartão (visto no teste). Navegador sem :has fica com o nome no alto. */
    .dec-ar-icone-esquerda.box-acesso-rapido a.box > div:has(> .dec-atalho-texto) > i {
        grid-row: 1 / span 2;
    }

    .dec-ar-icone-esquerda.box-acesso-rapido a.box .titulo,
    .dec-ar-icone-esquerda.box-acesso-rapido a.box .dec-atalho-texto {
        grid-column: 2;
        margin-top: 0;
    }

/* COR SÓ DO ÍCONE. Sem pastilha, sob o cursor ele segue o texto do botão,
   como antes — a cor escolhida poderia sumir no preenchimento do hover. */
.dec-ar-icone-cor.box-acesso-rapido a.box i {
    color: var(--ar-icone-cor) !important;
}

.dec-ar-icone-cor.box-acesso-rapido a.box:hover i {
    color: var(--ar-btn-hover-texto, #fff) !important;
}

/* A PASTILHA: um fundo só do ícone, com cantos em px. Mantém as próprias
   cores sob o cursor (decisão do David), por cima do preenchimento. */
.dec-ar-icone-pastilha.box-acesso-rapido a.box i,
.dec-ar-icone-pastilha.box-acesso-rapido a.box:hover i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: var(--ar-icone-raio, 0px);
    background-color: var(--ar-icone-fundo);
    color: var(--ar-icone-cor, var(--ar-btn-texto, var(--cor-principal))) !important;
}

/* NO CELULAR O TEMA DESENHA O BOTÃO COMPACTO: ícone pequeno à esquerda e o
   nome ao lado (bloco "max-width: 767px" mais acima). Com 2 botões por linha,
   o nome quebrava para baixo do ícone; aqui ícone e textos ficam em colunas,
   com o texto curto embaixo do nome. */
@media (max-width: 767px) {
    .dec-ar-grade.box-acesso-rapido a.box > div {
        display: grid;
        grid-template-columns: auto minmax(0, max-content);
        column-gap: 10px;
        align-items: center;
        justify-content: start;
        text-align: left;
    }

    .dec-ar-alinha-direita.dec-ar-grade.box-acesso-rapido a.box > div {
        justify-content: end;
    }

        .dec-ar-grade.box-acesso-rapido a.box > div > i {
            grid-column: 1;
            grid-row: 1;
            margin-right: 0;
        }

        .dec-ar-grade.box-acesso-rapido a.box > div:has(> .dec-atalho-texto) > i {
            grid-row: 1 / span 2;
        }

        .dec-ar-grade.box-acesso-rapido a.box .titulo,
        .dec-ar-grade.box-acesso-rapido a.box .dec-atalho-texto {
            grid-column: 2;
            margin-top: 0;
        }
}

/* O TEXTO CURTO do atalho, abaixo do nome, nas duas telas. */
.box-acesso-rapido a.box .dec-atalho-texto {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ar-btn-texto, var(--cor-principal));
    opacity: .85;
    transition: color 0.4s ease;
}

.box-acesso-rapido a.box:hover .dec-atalho-texto {
    color: var(--ar-btn-hover-texto, #fff);
}

.portal-transparencia .box .dec-atalho-texto {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: #555;
}

.portal-transparencia a.box:hover .dec-atalho-texto {
    color: #fff;
}


/* ===================================================================
   ACESSO RÁPIDO: BORDA, CANTOS E SOMBRA DO BOTÃO (14/09/2026)

   Pedido do David, na mesma tela "Aparência do bloco no site". É o cartão
   inteiro, não a pastilha do ícone. Cada escolha liga uma classe na seção
   (AparenciaAcessoRapido) e manda o valor por variável; sem classe vale o
   de sempre — sem borda, 5px de cantos, a sombra do tema. Escopo na home
   (.dec-ar-grade), como a grade: a Transparência não muda.
   =================================================================== */

/* A BORDA fica igual sob o cursor. O hover do tema escreve "border" com
   !important (e sem estilo, o que apagaria qualquer borda), por isso o
   !important aqui também. Sem cor escolhida, a do texto do botão. */
.dec-ar-grade.dec-ar-btn-borda.box-acesso-rapido a.box,
.dec-ar-grade.dec-ar-btn-borda.box-acesso-rapido a.box:hover {
    border: var(--ar-btn-borda) var(--ar-btn-borda-cor, var(--ar-btn-texto, var(--cor-principal))) !important;
}

.dec-ar-grade.dec-ar-btn-cantos.box-acesso-rapido a.box {
    -webkit-border-radius: var(--ar-btn-raio);
    border-radius: var(--ar-btn-raio);
}

.dec-ar-grade.dec-ar-btn-sem-sombra.box-acesso-rapido a.box {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


/* ============================================================================
   ESTILO DAS ABAS POR SEÇÃO (15/09/2026, pedido do David)

   Só vale para seção com estilo gravado (HomeSecaoAbasEstilo): o parcial põe a
   classe dec-abas-cfg, a do modelo e as variáveis --a-* do que foi ajustado.
   Seção sem estilo não tem nenhuma dessas classes e continua com as regras do
   bloco "AS ABAS DA SEÇÃO" acima, intocadas.

   CADA var() TRAZ O PADRÃO DO MODELO DEPOIS DA VÍRGULA. Campo nulo no painel
   não gera variável, e vale o padrão. No clássico, o padrão é exatamente o valor
   das regras de cima — um clássico gravado sem nenhum ajuste desenha igual ao
   de sempre.

   Modelos: classico, sublinhado, pilulas, cartoes, lateral, sanfona, seletor e
   faixa; e a busca (dec-abas-com-busca), que vale em qualquer um.
   ============================================================================ */

/* ---------- comuns ---------- */

/* O CSS DO TEMA É O DO BOOTSTRAP 3: as linguetas flutuam (li float:left). Para
   alinhar e espaçar, a faixa vira flex — nos modelos novos sempre; no clássico,
   só se alinhamento ou espaço foram ajustados, para o resto ficar como sempre.
   O clearfix do Bootstrap 3 (::before/::after) sai, senão vira item da faixa. */
.dec-secao-abas.dec-abas-cfg:not(.dec-abas-classico) .nav-tabs,
.dec-secao-abas.dec-abas-classico.dec-abas-alinhar-centro .nav-tabs,
.dec-secao-abas.dec-abas-classico.dec-abas-alinhar-direita .nav-tabs,
.dec-secao-abas.dec-abas-classico.dec-abas-espaco .nav-tabs {
    display: flex;
    flex-wrap: wrap;
}

    .dec-secao-abas.dec-abas-cfg:not(.dec-abas-classico) .nav-tabs::before,
    .dec-secao-abas.dec-abas-cfg:not(.dec-abas-classico) .nav-tabs::after,
    .dec-secao-abas.dec-abas-classico.dec-abas-alinhar-centro .nav-tabs::before,
    .dec-secao-abas.dec-abas-classico.dec-abas-alinhar-centro .nav-tabs::after,
    .dec-secao-abas.dec-abas-classico.dec-abas-alinhar-direita .nav-tabs::before,
    .dec-secao-abas.dec-abas-classico.dec-abas-alinhar-direita .nav-tabs::after,
    .dec-secao-abas.dec-abas-classico.dec-abas-espaco .nav-tabs::before,
    .dec-secao-abas.dec-abas-classico.dec-abas-espaco .nav-tabs::after {
        display: none;
    }

    .dec-secao-abas.dec-abas-cfg:not(.dec-abas-classico) .nav-tabs > li,
    .dec-secao-abas.dec-abas-classico.dec-abas-alinhar-centro .nav-tabs > li,
    .dec-secao-abas.dec-abas-classico.dec-abas-alinhar-direita .nav-tabs > li,
    .dec-secao-abas.dec-abas-classico.dec-abas-espaco .nav-tabs > li {
        float: none;
    }

.dec-secao-abas.dec-abas-cfg:not(.dec-abas-classico) .nav-tabs > li { margin-bottom: 0; }

.dec-secao-abas.dec-abas-alinhar-centro .nav-tabs { justify-content: center; }
.dec-secao-abas.dec-abas-alinhar-direita .nav-tabs { justify-content: flex-end; }

/* A caixa da lista só encosta na primeira lingueta do clássico à esquerda. */
.dec-secao-abas.dec-abas-cfg.dec-formato-lista .tab-content { border-radius: 5px; }
.dec-secao-abas.dec-abas-classico.dec-formato-lista .tab-content { border-radius: 0 5px 5px 5px; }
.dec-secao-abas.dec-abas-classico.dec-abas-alinhar-centro.dec-formato-lista .tab-content { border-radius: 5px; }
.dec-secao-abas.dec-abas-classico.dec-abas-alinhar-direita.dec-formato-lista .tab-content { border-radius: 5px 0 5px 5px; }

/* ---------- 0. Clássico: as regras de sempre, com as variáveis ---------- */
.dec-secao-abas.dec-abas-classico .nav-tabs > li > a {
    padding: var(--a-pad, 0 20px);
    border: var(--a-borda, 0);
    border-radius: var(--a-cantos, 0);
    background: var(--a-fundo, var(--cor-principal));
    color: var(--a-texto, #ffffff);
    font-size: var(--a-fonte, 13px);
    line-height: var(--a-altura, 51px);
    box-shadow: var(--a-sombra, none);
}

    .dec-secao-abas.dec-abas-classico .nav-tabs > li > a.active,
    .dec-secao-abas.dec-abas-classico .nav-tabs > li > a.active:focus,
    .dec-secao-abas.dec-abas-classico .nav-tabs > li > a:hover {
        border: var(--a-borda-ativa, 1px solid #eeeeee);
        border-color: var(--a-borda-ativa-cor, #eeeeee);
        border-bottom: 0;
        background: var(--a-fundo-ativa, #ffffff);
        color: var(--a-texto-ativa, #222222);
    }

.dec-secao-abas.dec-abas-classico.dec-abas-espaco .nav-tabs { gap: var(--a-espaco, 5px); }
.dec-secao-abas.dec-abas-classico.dec-abas-espaco .nav-tabs > li > a { margin-right: 0; }

/* ---------- linguetas dos modelos novos: o ponto de partida comum ---------- */
.dec-secao-abas.dec-abas-sublinhado .nav-tabs > li > a,
.dec-secao-abas.dec-abas-pilulas .nav-tabs > li > a,
.dec-secao-abas.dec-abas-cartoes .nav-tabs > li > a,
.dec-secao-abas.dec-abas-lateral .nav-tabs > li > a {
    overflow: visible;
    margin: 0;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
}

    .dec-secao-abas.dec-abas-sublinhado .nav-tabs > li > a i,
    .dec-secao-abas.dec-abas-pilulas .nav-tabs > li > a i,
    .dec-secao-abas.dec-abas-lateral .nav-tabs > li > a i {
        margin-right: 8px;
    }

/* Maiúsculas escolhidas no painel (depois do ponto de partida, para valer). */
.dec-secao-abas.dec-abas-caixa-alta .nav-tabs > li > a,
.dec-secao-abas.dec-abas-caixa-alta .dec-sanfona-cabeca,
.dec-secao-abas.dec-abas-caixa-alta .dec-abas-selecao select { text-transform: uppercase; }
.dec-secao-abas.dec-abas-caixa-normal .nav-tabs > li > a,
.dec-secao-abas.dec-abas-caixa-normal .dec-sanfona-cabeca,
.dec-secao-abas.dec-abas-caixa-normal .dec-abas-selecao select { text-transform: none; }

/* ---------- 1. Sublinhado ---------- */
.dec-secao-abas.dec-abas-sublinhado .nav-tabs {
    gap: var(--a-espaco, 4px);
    margin-bottom: 20px;
}

.dec-secao-abas.dec-abas-sublinhado.dec-abas-linha-base .nav-tabs { box-shadow: inset 0 -1px 0 var(--a-sobre-linha, #e6e9ef); }

.dec-secao-abas.dec-abas-sublinhado .nav-tabs > li > a {
    padding: var(--a-pad, 12px 18px);
    border: var(--a-borda, 0);
    border-radius: var(--a-cantos, 0);
    background: var(--a-fundo, transparent);
    color: var(--a-texto, var(--a-sobre-suave, #5a6173));
    font-size: var(--a-fonte, 14px);
    box-shadow: var(--a-sombra, none);
}

    .dec-secao-abas.dec-abas-sublinhado .nav-tabs > li > a::after {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        height: var(--a-espessura, 3px);
        border-radius: 3px 3px 0 0;
        background: transparent;
        content: "";
    }

    .dec-secao-abas.dec-abas-sublinhado .nav-tabs > li > a:hover {
        background: var(--a-fundo, transparent);
        color: var(--a-texto-ativa, var(--a-sobre, var(--cor-principal)));
    }

    .dec-secao-abas.dec-abas-sublinhado .nav-tabs > li > a.active,
    .dec-secao-abas.dec-abas-sublinhado .nav-tabs > li > a.active:focus {
        border: var(--a-borda-ativa, 0);
        border-color: var(--a-borda-ativa-cor, transparent);
        background: var(--a-fundo-ativa, transparent);
        color: var(--a-texto-ativa, var(--a-sobre, var(--cor-principal)));
    }

        .dec-secao-abas.dec-abas-sublinhado .nav-tabs > li > a.active::after {
            background: var(--a-destaque, var(--a-sobre, var(--cor-principal)));
        }

/* ---------- 2. Pílulas ---------- */
.dec-secao-abas.dec-abas-pilulas .nav-tabs {
    gap: var(--a-espaco, 8px);
    margin-bottom: 20px;
}

.dec-secao-abas.dec-abas-pilulas .nav-tabs > li > a {
    padding: var(--a-pad, 9px 18px);
    border: var(--a-borda, 1px solid transparent);
    border-radius: var(--a-cantos, 999px);
    background: var(--a-fundo, #eef1f6);
    color: var(--a-texto, #33405c);
    font-size: var(--a-fonte, 13px);
    box-shadow: var(--a-sombra, none);
}

.dec-secao-abas.dec-abas-pilulas.dec-abas-contorno .nav-tabs > li > a {
    border: var(--a-borda, 1px solid var(--cor-principal-claro));
    background: var(--a-fundo, transparent);
    color: var(--a-texto, var(--cor-principal));
}

    .dec-secao-abas.dec-abas-pilulas .nav-tabs > li > a:hover {
        filter: brightness(.95);
    }

    .dec-secao-abas.dec-abas-pilulas .nav-tabs > li > a.active,
    .dec-secao-abas.dec-abas-pilulas .nav-tabs > li > a.active:focus {
        border: var(--a-borda-ativa, 1px solid var(--cor-principal));
        border-color: var(--a-borda-ativa-cor, var(--cor-principal));
        background: var(--a-fundo-ativa, var(--cor-principal));
        color: var(--a-texto-ativa, #ffffff);
        filter: none;
    }

/* Segmentado: as pílulas coladas numa barra só. */
.dec-secao-abas.dec-abas-pilulas.dec-abas-segmentado .nav-tabs {
    width: fit-content;
    max-width: 100%;
    gap: var(--a-espaco, 2px);
    padding: 4px;
    background: #eef1f6;
    border-radius: calc(min(var(--a-cantos, 999px), 22px) + 4px);
}

.dec-secao-abas.dec-abas-pilulas.dec-abas-segmentado.dec-abas-alinhar-centro .nav-tabs { margin-left: auto; margin-right: auto; }
.dec-secao-abas.dec-abas-pilulas.dec-abas-segmentado.dec-abas-alinhar-direita .nav-tabs { margin-left: auto; }
.dec-secao-abas.dec-abas-pilulas.dec-abas-segmentado .nav-tabs > li > a:not(.active) { background: var(--a-fundo, transparent); }

/* ---------- 3. Cartões com ícone ---------- */
.dec-secao-abas.dec-abas-cartoes .nav-tabs {
    gap: var(--a-espaco, 12px);
    margin-bottom: 22px;
}

    .dec-secao-abas.dec-abas-cartoes .nav-tabs > li {
        display: flex;
        flex: 0 1 150px;
        min-width: 116px;
    }

.dec-secao-abas.dec-abas-cartoes .nav-tabs > li > a {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 10px;
    width: 100%;
    padding: var(--a-pad, 18px 12px 16px);
    border: var(--a-borda, 1px solid #e3e8f0);
    border-radius: var(--a-cantos, 10px);
    background: var(--a-fundo, #ffffff);
    color: var(--a-texto, #333333);
    font-size: var(--a-fonte, 13px);
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    box-shadow: var(--a-sombra, none);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .dec-secao-abas.dec-abas-cartoes .nav-tabs > li > a i {
        margin: 0;
        font-size: var(--a-icone, 28px);
        color: var(--a-destaque, var(--cor-principal));
    }

    .dec-secao-abas.dec-abas-cartoes .nav-tabs > li > a:hover {
        border: var(--a-borda, 1px solid #e3e8f0);
        border-color: var(--a-borda-ativa-cor, var(--cor-principal-claro));
        background: var(--a-fundo, #ffffff);
        color: var(--a-texto, #333333);
    }

    .dec-secao-abas.dec-abas-cartoes .nav-tabs > li > a.active,
    .dec-secao-abas.dec-abas-cartoes .nav-tabs > li > a.active:focus {
        border: var(--a-borda-ativa, 1px solid var(--cor-principal));
        border-color: var(--a-borda-ativa-cor, var(--cor-principal));
        background: var(--a-fundo-ativa, #ffffff);
        color: var(--a-texto-ativa, var(--cor-principal));
        box-shadow: var(--a-sombra, 0 10px 22px color-mix(in srgb, var(--cor-principal) 16%, transparent)), inset 0 3px 0 var(--a-destaque, var(--cor-principal));
        transform: translateY(-3px);
    }

.dec-secao-abas.dec-abas-cartoes.dec-abas-preenchido .nav-tabs > li > a.active,
.dec-secao-abas.dec-abas-cartoes.dec-abas-preenchido .nav-tabs > li > a.active:focus {
    background: var(--a-fundo-ativa, var(--cor-principal));
    color: var(--a-texto-ativa, #ffffff);
    box-shadow: var(--a-sombra, 0 10px 22px color-mix(in srgb, var(--cor-principal) 22%, transparent));
}

    .dec-secao-abas.dec-abas-cartoes.dec-abas-preenchido .nav-tabs > li > a.active i {
        color: var(--a-texto-ativa, #ffffff);
    }

@media (max-width: 767px) {
    .dec-secao-abas.dec-abas-cfg.dec-abas-cartoes .nav-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--a-espaco, 8px);
    }

        .dec-secao-abas.dec-abas-cartoes .nav-tabs > li { min-width: 0; }
}

/* ---------- 4. Lateral ---------- */
.dec-abas-coluna {
    clear: both;
    container-type: inline-size;
    margin-top: 20px;
}

.dec-abas-coluna-corpo {
    display: grid;
    grid-template-columns: var(--a-coluna, 26%) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.dec-secao-abas.dec-abas-lado-direita .dec-abas-coluna-corpo { grid-template-columns: minmax(0, 1fr) var(--a-coluna, 26%); }
.dec-secao-abas.dec-abas-lado-direita .dec-abas-coluna-corpo > .nav-tabs { order: 2; }

.dec-secao-abas.dec-abas-lateral .nav-tabs {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--a-espaco, 2px);
    margin-top: 0;
}

.dec-secao-abas.dec-abas-lateral .nav-tabs > li > a {
    --a-marca: 3px 0 0;
    display: flex;
    align-items: center;
    padding: var(--a-pad, 13px 16px);
    border: var(--a-borda, 0);
    border-radius: var(--a-cantos, 0);
    background: var(--a-fundo, transparent);
    color: var(--a-texto, var(--a-sobre-suave, #4a5266));
    font-size: var(--a-fonte, 14px);
    text-align: left;
    white-space: normal;
    box-shadow: var(--a-sombra, none);
}

.dec-secao-abas.dec-abas-lateral.dec-abas-lado-direita .nav-tabs > li > a { --a-marca: -3px 0 0; }
.dec-secao-abas.dec-abas-lateral.dec-abas-fundo .nav-tabs > li > a { border-radius: var(--a-cantos, 6px); }

    .dec-secao-abas.dec-abas-lateral .nav-tabs > li > a:hover {
        border: var(--a-borda, 0);
        background: color-mix(in srgb, var(--cor-principal) 8%, #ffffff);
        color: var(--a-texto-ativa, var(--cor-principal));
    }

    .dec-secao-abas.dec-abas-lateral .nav-tabs > li > a.active,
    .dec-secao-abas.dec-abas-lateral .nav-tabs > li > a.active:focus {
        border: var(--a-borda-ativa, 0);
        border-color: var(--a-borda-ativa-cor, transparent);
        background: var(--a-fundo-ativa, color-mix(in srgb, var(--cor-principal) 10%, #ffffff));
        color: var(--a-texto-ativa, var(--cor-principal));
        box-shadow: var(--a-sombra, 0 0 0 transparent), inset var(--a-marca) var(--a-destaque, var(--cor-principal));
    }

.dec-secao-abas.dec-abas-lateral.dec-abas-fundo .nav-tabs > li > a.active,
.dec-secao-abas.dec-abas-lateral.dec-abas-fundo .nav-tabs > li > a.active:focus {
    background: var(--a-fundo-ativa, var(--cor-principal));
    color: var(--a-texto-ativa, #ffffff);
    box-shadow: var(--a-sombra, none);
}

/* Estreita (meia linha ou celular): as abas sobem para uma faixa que rola de lado. */
@container (max-width: 620px) {
    .dec-abas-coluna-corpo,
    .dec-secao-abas.dec-abas-lado-direita .dec-abas-coluna-corpo {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .dec-secao-abas.dec-abas-lado-direita .dec-abas-coluna-corpo > .nav-tabs { order: 0; }

    .dec-secao-abas.dec-abas-lateral .nav-tabs {
        flex-direction: row;
        overflow-x: auto;
        gap: var(--a-espaco, 4px);
    }

        .dec-secao-abas.dec-abas-lateral .nav-tabs > li > a,
        .dec-secao-abas.dec-abas-lateral.dec-abas-lado-direita .nav-tabs > li > a {
            --a-marca: 0 -3px 0;
            white-space: nowrap;
        }
}

/* NO ACESSO RÁPIDO (15/09/2026) o .container é item de um flex centralizado e
   encolhe até a largura do conteúdo. A lateral mede a própria largura (container
   query) e, sem largura definida, fazia o contêiner colapsar: com ela escolhida,
   o contêiner ocupa a largura normal da página. */
.box-acesso-rapido > .container:has(> .dec-abas-no-bloco.dec-abas-lateral) {
    flex: 1 1 auto;
    max-width: 1170px;
}

/* ---------- 5. Sanfona ---------- */
.dec-sanfona {
    clear: both;
    display: grid;
    gap: var(--a-espaco, 8px);
    margin-top: 20px;
}

.dec-sanfona-item {
    overflow: hidden;
    border: var(--a-borda, 1px solid #e3e8f0);
    border-radius: var(--a-cantos, 6px);
    background: var(--a-fundo, #ffffff);
    box-shadow: var(--a-sombra, none);
}

    .dec-sanfona-item[open] { border-color: var(--a-borda-ativa-cor, #e3e8f0); }

.dec-sanfona-cabeca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--a-pad, 16px 18px);
    color: var(--a-texto, #2c3346);
    font-family: 'Montserrat', sans-serif;
    font-size: var(--a-fonte, 15px);
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

    .dec-sanfona-cabeca::-webkit-details-marker { display: none; }
    .dec-sanfona-cabeca::marker { content: ""; }

    .dec-sanfona-cabeca:hover { color: var(--a-texto-ativa, var(--cor-principal)); }

    .dec-sanfona-cabeca:focus-visible {
        outline: 3px solid var(--cor-principal);
        outline-offset: -3px;
    }

.dec-sanfona-item[open] > .dec-sanfona-cabeca {
    background: var(--a-fundo-ativa, color-mix(in srgb, var(--cor-principal) 10%, #ffffff));
    color: var(--a-texto-ativa, var(--cor-principal));
    box-shadow: inset 3px 0 0 var(--a-destaque, var(--cor-principal));
}

.dec-sanfona-rotulo { flex: 1 1 auto; }

.dec-sanfona-indicador {
    flex: none;
    width: 9px;
    height: 9px;
    margin: 0 4px 3px 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.dec-sanfona-item[open] .dec-sanfona-indicador {
    margin-bottom: -3px;
    transform: rotate(225deg);
}

/* "Mais / menos" no lugar da seta. */
.dec-secao-abas.dec-abas-mais .dec-sanfona-indicador,
.dec-secao-abas.dec-abas-mais .dec-sanfona-item[open] .dec-sanfona-indicador {
    position: relative;
    width: 14px;
    height: 14px;
    margin: 0 2px 0 0;
    border: 0;
    transform: none;
}

    .dec-secao-abas.dec-abas-mais .dec-sanfona-indicador::before,
    .dec-secao-abas.dec-abas-mais .dec-sanfona-indicador::after {
        position: absolute;
        left: 0;
        top: 6px;
        width: 14px;
        height: 2px;
        background: currentColor;
        content: "";
    }

    .dec-secao-abas.dec-abas-mais .dec-sanfona-indicador::after { transform: rotate(90deg); }
    .dec-secao-abas.dec-abas-mais .dec-sanfona-item[open] .dec-sanfona-indicador::after { display: none; }

.dec-sanfona-corpo {
    padding: 16px 18px 18px;
    border-top: 1px solid #eef1f5;
    background: #ffffff;
}

/* ---------- 6. Seletor (e a troca automática no celular) ---------- */
/* Especificidade acima da regra do flex, lá em cima. */
.dec-secao-abas.dec-abas-cfg.dec-abas-seletor .nav-tabs { display: none; }

.dec-abas-selecao {
    clear: both;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 20px 0;
}

.dec-abas-selecao-principal { display: flex; }
.dec-secao-abas.dec-abas-alinhar-centro .dec-abas-selecao-principal { justify-content: center; }
.dec-secao-abas.dec-abas-alinhar-direita .dec-abas-selecao-principal { justify-content: flex-end; }

.dec-abas-selecao-rotulo {
    margin: 0;
    color: var(--a-sobre, #333333);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.dec-abas-selecao-caixa {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

    /* A seta desenhada em CSS, e não numa imagem data:, que a CSP do site não aceita. */
    .dec-abas-selecao-caixa::after {
        position: absolute;
        right: 17px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--cor-principal);
        border-bottom: 2px solid var(--cor-principal);
        transform: translateY(-70%) rotate(45deg);
        pointer-events: none;
        content: "";
    }

.dec-abas-selecao select {
    -webkit-appearance: none;
    appearance: none;
    min-width: 240px;
    max-width: 100%;
    padding: var(--a-pad, 11px 14px);
    padding-right: calc(var(--a-pad-dir, 14px) + 28px);
    border: var(--a-borda, 2px solid #c9d2e3);
    border-radius: var(--a-cantos, 6px);
    background-color: var(--a-fundo, #ffffff);
    color: var(--a-texto, #222a3d);
    font-family: 'Montserrat', sans-serif;
    font-size: var(--a-fonte, 14px);
    font-weight: 600;
    line-height: 1.3;
    box-shadow: var(--a-sombra, none);
    cursor: pointer;
}

    .dec-abas-selecao select:focus-visible {
        outline: 3px solid var(--cor-principal);
        outline-offset: 2px;
    }

/* A caixa automática do celular não herda as cores das linguetas do modelo. */
.dec-abas-selecao-celular select {
    padding: 11px 42px 11px 14px;
    border: 2px solid #c9d2e3;
    border-radius: 6px;
    background-color: #ffffff;
    color: #222a3d;
    font-size: 14px;
    box-shadow: none;
}

.dec-secao-abas.dec-abas-seletor-cheio .dec-abas-selecao-principal .dec-abas-selecao-caixa { flex: 1 1 auto; }
.dec-secao-abas.dec-abas-seletor-cheio .dec-abas-selecao-principal select { width: 100%; }

@media (max-width: 767px) {
    .dec-abas-selecao .dec-abas-selecao-caixa { flex: 1 1 100%; }
    .dec-abas-selecao select { width: 100%; min-width: 0; }

    .dec-secao-abas.dec-abas-cfg.dec-abas-seletor-no-celular .nav-tabs { display: none; }
    .dec-secao-abas.dec-abas-seletor-no-celular .dec-abas-selecao-celular { display: flex; }
    .dec-secao-abas.dec-abas-seletor-no-celular.dec-formato-lista .tab-content { border-radius: 5px; }
}

/* ---------- 7. Faixa: as abas numa faixa com fundo próprio (15/09/2026) ---------- */
/* A faixa é a .dec-abas-barra, que junta as linguetas (e a busca, ao lado). O fundo
   é a cor principal do tema, ou a do painel (--a-faixa). As abas são claras sobre
   ela; a aberta vira um botão branco com o texto na cor principal. */
.dec-secao-abas.dec-abas-faixa .dec-abas-barra {
    padding: 8px;
    border-radius: 12px;
    background: var(--a-faixa, var(--cor-principal));
}

.dec-secao-abas.dec-abas-faixa .nav-tabs { gap: var(--a-espaco, 4px); }

.dec-secao-abas.dec-abas-faixa .nav-tabs > li > a {
    overflow: visible;
    margin: 0;
    padding: var(--a-pad, 10px 18px);
    border: var(--a-borda, 1px solid transparent);
    border-radius: var(--a-cantos, 8px);
    background: var(--a-fundo, transparent);
    color: var(--a-texto, rgba(255, 255, 255, .86));
    font-size: var(--a-fonte, 14px);
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
    box-shadow: var(--a-sombra, none);
}

    .dec-secao-abas.dec-abas-faixa .nav-tabs > li > a i { margin-right: 8px; }

    .dec-secao-abas.dec-abas-faixa .nav-tabs > li > a:hover {
        margin: 0;
        border: var(--a-borda, 1px solid transparent);
        background: var(--a-fundo, rgba(255, 255, 255, .14));
        color: var(--a-texto-ativa, #ffffff);
    }

    .dec-secao-abas.dec-abas-faixa .nav-tabs > li > a.active,
    .dec-secao-abas.dec-abas-faixa .nav-tabs > li > a.active:focus {
        margin: 0;
        border: var(--a-borda-ativa, 1px solid transparent);
        border-color: var(--a-borda-ativa-cor, transparent);
        background: var(--a-fundo-ativa, #ffffff);
        color: var(--a-texto-ativa, var(--cor-principal));
    }

/* ---------- a barra: linguetas e busca na mesma linha ---------- */
/* Só existe com a busca "ao lado" ou no modelo faixa. As margens das linguetas e
   do seletor passam para a barra, para a busca alinhar pelo meio delas. */
.dec-abas-barra {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 20px 0;
}

    .dec-abas-barra > .nav-tabs,
    .dec-abas-barra > .dec-abas-selecao { margin-top: 0; margin-bottom: 0; }

    .dec-abas-barra > .nav-tabs { flex: 1 1 auto; min-width: 0; }
    .dec-abas-barra > .dec-abas-selecao { flex: 1 1 auto; }

.dec-secao-abas.dec-abas-classico .dec-abas-barra { align-items: flex-end; margin-bottom: 0; }
.dec-secao-abas.dec-abas-classico .dec-abas-barra > .dec-busca { margin-bottom: 8px; }
.dec-secao-abas.dec-abas-cartoes .dec-abas-barra { margin-bottom: 22px; }
.dec-secao-abas.dec-abas-pilulas.dec-abas-segmentado .dec-abas-barra > .nav-tabs { flex: 0 1 auto; }

/* ---------- a caixa de busca ---------- */
.dec-busca {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 16px 0;
}

/* Acima: o respiro vem das linguetas logo abaixo. Abaixo: encosta nas linguetas
   (o clássico, que cola no conteúdo, ganha um respiro) e afasta o conteúdo. */
.dec-busca-acima { margin: 20px 0 0; }
.dec-busca-abaixo { margin: 0 0 20px; }
.dec-secao-abas.dec-abas-classico .dec-busca-abaixo { margin-top: 14px; }

.dec-busca-centro { justify-content: center; }
.dec-busca-direita { justify-content: flex-end; }

.dec-abas-barra > .dec-busca { flex: 0 1 300px; margin: 0 0 0 auto; }

.dec-busca-caixa {
    position: relative;
    display: flex;
    flex: 0 1 320px;
    align-items: center;
    min-width: 200px;
    margin: 0;
    font-weight: 400;
}

.dec-abas-barra > .dec-busca .dec-busca-caixa { flex: 1 1 auto; }

    .dec-busca-caixa i {
        position: absolute;
        left: 13px;
        color: #7a8499;
        font-size: 14px;
        pointer-events: none;
    }

.dec-busca-campo {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    border: 1px solid #d5dbe6;
    border-radius: 8px;
    background: #ffffff;
    color: #222222;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
}

    .dec-busca-campo::placeholder { color: #8a93a6; opacity: 1; }

    .dec-busca-campo:focus-visible {
        outline: 2px solid var(--cor-principal);
        outline-offset: 1px;
    }

    .dec-busca-campo::-webkit-search-cancel-button { cursor: pointer; }

.dec-secao-abas.dec-abas-faixa .dec-abas-barra .dec-busca-campo { border-color: transparent; }
.dec-secao-abas.dec-abas-faixa .dec-abas-barra .dec-busca-campo:focus-visible { outline-color: #ffffff; }

/* O resumo ("5 resultados em 2 abas") num selo claro, legível sobre qualquer faixa. */
.dec-busca-status {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #3d4555;
    font-size: 13px;
    line-height: 1.4;
}

    .dec-busca-status:empty { display: none; }

/* Na barra não há lugar para o resumo: o número vai nas linguetas, e o texto fica
   só para o leitor de tela. */
.dec-abas-barra .dec-busca-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* O número de itens encontrados em cada aba, e a aba sem nenhum, apagada. */
.dec-busca-contagem {
    display: inline-block;
    min-width: 20px;
    margin-left: 7px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .22);
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: 1px;
}

.dec-secao-abas .nav-tabs > li > a.dec-busca-zero,
.dec-sanfona-cabeca.dec-busca-zero { opacity: .5; }

.dec-busca-fora { display: none !important; }

/* Nada em nenhuma aba: some o conteúdo, fica o aviso. */
.dec-secao-abas.dec-busca-nada .tab-content,
.dec-secao-abas.dec-busca-nada .dec-sanfona { display: none !important; }

.dec-busca-vazio {
    clear: both;
    margin: 0 0 20px;
    padding: 28px 20px;
    border: 1px dashed #cfd6e2;
    border-radius: 10px;
    background: #ffffff;
    color: #4a5263;
    text-align: center;
}

    .dec-busca-vazio p { margin: 0 0 14px; font-size: 16px; }

.dec-busca-limpar {
    padding: 8px 20px;
    border: 1px solid var(--cor-principal);
    border-radius: 6px;
    background: transparent;
    color: var(--cor-principal);
    font-weight: 600;
    cursor: pointer;
}

    .dec-busca-limpar:hover,
    .dec-busca-limpar:focus-visible {
        background: var(--cor-principal);
        color: #ffffff;
    }

@media (max-width: 767px) {
    .dec-abas-barra > .dec-busca,
    .dec-abas-barra > .dec-abas-selecao { flex: 1 1 100%; margin-left: 0; }
    .dec-busca-caixa { flex: 1 1 100%; }
    .dec-secao-abas.dec-abas-classico .dec-abas-barra > .dec-busca { order: -1; margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .dec-secao-abas.dec-abas-cartoes .nav-tabs > li > a,
    .dec-sanfona-indicador { transition: none; }

    .dec-secao-abas.dec-abas-cartoes .nav-tabs > li > a.active { transform: none; }
}

/* O TÍTULO DA LINHA (15/09/2026): o cabeçalho que cobre a faixa inteira. O recuo
   de 15px é o das colunas da grade, para o título alinhar com o conteúdo dos
   blocos; o flow-root segura o .title-style-3, que flutua. */
.dec-home-linha-titulo {
    display: flow-root;
    padding-left: 15px;
    padding-right: 15px;
}
/* =========================================================================
   LISTA DE DUAS COLUNAS NO GRUPO DO MENU (16/09/2026)

   O grupo escolhe no painel ("Formato da lista") abrir a lista em duas colunas
   - o desenho que a Acaiaca sempre teve em Legislativo e Leis e Normas, e que
   virou opcao dos tres portais. O tema ja traz o dropdown largo
   (.h3-navbar div.dropdown-menu, 640px, com as listas sem padding).

   O QUE FALTAVA:

   1. O recuo da arvore de subcategorias. O ".h3-navbar div.dropdown-menu ul
      { padding: 0 }" do tema alcanca a .dec-menu-sub tambem, e pesa mais que a
      regra do custom.css: os niveis desenhariam colados, como irmaos.

   2. O cascata dentro de uma lista de duas colunas: o flyout nasce da linha,
      que fica dentro de uma coluna estreita, e abriria por cima da outra
      coluna. Ancorado no dropdown inteiro, ele abre ao lado da lista toda -
      mesma solucao da Acaiaca.
   ========================================================================= */
.h3-navbar .dropdown-menu ul.dec-menu-sub {
    padding-left: 14px;
}

@media (min-width: 992px) {
    .h3-navbar .tem-terceiro-nivel div.dropdown-menu .row,
    .h3-navbar .tem-terceiro-nivel div.dropdown-menu [class*="col-"],
    .h3-navbar div.dropdown-menu li.tem-subcategorias {
        position: static;
    }

    .h3-navbar div.dropdown-menu li.tem-subcategorias > .sub-menu {
        left: 100%;
        top: 0;
    }

    .h3-navbar .menu-last-li div.dropdown-menu li.tem-subcategorias > .sub-menu {
        left: auto;
        right: 100%;
    }
}
/* =========================================================================
   FORMATOS DA LISTA DO GRUPO: TRÊS COLUNAS E MEGA MENU (16/09/2026)

   O formato é escolhido no grupo, no painel ("Formato da lista"): uma coluna,
   duas, três ou mega menu. O MESMO BLOCO NOS TRÊS PORTAIS.

   TRÊS COLUNAS: a caixa de duas colunas do tema (.h3-navbar div.dropdown-menu,
   640px) com mais largura.

   MEGA MENU: um painel da largura inteira da tela, logo abaixo da barra, sem
   borda colorida no topo (pedido do David). O dropdown normal se posiciona pelo
   item (li relative); aqui o item e a <nav class="navbar"> (relative no
   Bootstrap 3) ficam static, e o painel se ancora na barra inteira
   (.h3-navbar), que ocupa a largura da tela. Só na barra que tem um mega menu:
   os outros grupos continuam abrindo debaixo do próprio item, porque o li deles
   segue relative. As colunas ficam dentro do .container, alinhadas ao conteúdo
   da página.

   No celular (abaixo de 992px) o tema empilha as listas; o mega menu vira uma
   lista só, uma coluna depois da outra.
   ========================================================================= */
@media (min-width: 992px) {
    /* A caixa de três colunas (900px) é larga demais para abrir a partir do
       item: num grupo mais à direita ela sairia da tela. Ela abre CENTRADA na
       barra, logo abaixo dela, como o mega menu. */
    .h3-navbar .navbar-nav > li:has(> div.dropdown-menu.dec-lista-3-colunas) {
        position: static;
    }

    .h3-navbar .navbar-nav > li > div.dropdown-menu.dec-lista-3-colunas {
        min-width: 900px;
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .h3-navbar:has(li.dec-mega-menu) {
        position: relative;
    }

        .h3-navbar:has(li.dec-mega-menu) .navbar,
        .h3-navbar .navbar-nav > li.dec-mega-menu {
            position: static;
        }

    .h3-navbar .navbar-nav > li.dec-mega-menu > div.dropdown-menu.dec-mega-painel {
        left: 0;
        right: 0;
        top: 100%;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 24px 0 28px;
        border-radius: 0 0 15px 15px;
        overflow: visible;
    }

    .dec-mega-colunas {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 32px;
    }

    .dec-mega-colunas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dec-mega-colunas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dec-mega-colunas-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .dec-mega-colunas-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    .h3-navbar div.dropdown-menu ul.dec-mega-coluna {
        min-width: 0;
        padding: 0 16px 0 0;
        border-right: 1px solid #eef0f4;
    }

        .h3-navbar div.dropdown-menu ul.dec-mega-coluna:last-child {
            border-right: 0;
        }
}

@media (max-width: 991px) {
    .dec-mega-colunas {
        display: block;
    }

    .dec-mega-painel > .container {
        width: auto;
        padding: 0;
    }

    ul.dec-mega-coluna {
        list-style: none;
        padding: 0;
        margin: 0;
    }
}


/* ============================================================================
   O LAYOUT DA BARRA DO MENU  (17/09/2026, pedido do David)

   A faixa que envolve os itens do menu (.dec-barra, dentro do .h3-navbar) e o
   painel que abre embaixo deles. Os VALORES vêm do /tema.css, escritos pela tela
   "Layout do menu" do painel (Domain/Services/LayoutDaBarraDoMenu); aqui estão as
   REGRAS.

   NADA AQUI VALE SEM A CLASSE .dec-barra-on, que só sai no HTML com o layout
   ligado. Enquanto a tela não for salva, o portal desenha como sempre desenhou.

   TUDO DE 992px PARA CIMA: abaixo disso o menu é o botão de sempre, e a barra não
   tem formato próprio.
   ============================================================================ */

/* Sem o layout ligado, a .dec-barra é só uma caixa transparente em volta do
   container — o cabeçalho fica idêntico ao de antes. */
.dec-barra {
    position: relative;
}

@media (min-width: 992px) {

    .h3-navbar.dec-barra-on {
        background-color: transparent; /* quem pinta agora é a .dec-barra */
        --dec-larg-container: 970px;

        /* A LINHA CINZA DO TEMA SAI (visto em produção, 17/09/2026). O custom.css
           desenha um border-top de 1px em #eee no .h3-navbar; com a barra ligada
           ela aparece como um risco claro atravessando a página por cima da
           faixa colorida. Quem quiser uma linha ali tem a borda, da tela. */
        border-top: 0;

        /* ACIMA DO CONTEÚDO DA PÁGINA (visto em produção, 17/09/2026). O
           .main-content tem z-index 99: com a barra num z-index menor, ela e
           TUDO o que está dentro dela — inclusive o submenu, que pede 1000 —
           ficavam presos atrás do banner. A barra fixa ao rolar tem regra
           própria (.mini_menu #irMenu, z-index 1030) e continua por cima desta. */
        position: relative;
        z-index: 100;
    }

    .h3-navbar.dec-barra-on .dec-barra {
        width: 100%;
        height: var(--dec-barra-altura, 60px);
        margin: 0 auto;
        border-radius: var(--dec-barra-r1, 0) var(--dec-barra-r2, 0) var(--dec-barra-r3, 0) var(--dec-barra-r4, 0);
    }

    /* O FUNDO É UMA CAMADA PRÓPRIA. Assim a opacidade e o recorte diagonal valem
       só para ele: recortar a barra inteira cortaria o submenu, que é filho dela. */
    .h3-navbar.dec-barra-on .dec-barra::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: var(--dec-barra-fundo, var(--cor-principal));
        opacity: var(--dec-barra-opacidade, 1);
        box-shadow: var(--dec-barra-sombra, none);
        clip-path: var(--dec-barra-recorte, none);
        /* A BORDA MORA AQUI, no fundo, e não na barra: assim ela acompanha os
           cantos e o corte diagonal, fica por dentro da altura escolhida (em vez
           de somar dois pixels na altura da barra) e não encosta no submenu, que
           é filho da barra. Nos lados em que a barra sangra para fora da tela o
           serviço manda uma borda de zero. */
        border-top: var(--dec-barra-borda, 0 none transparent);
        border-bottom: var(--dec-barra-borda, 0 none transparent);
        border-left: var(--dec-barra-borda-esq, 0 none transparent);
        border-right: var(--dec-barra-borda-dir, 0 none transparent);
    }

    .h3-navbar.dec-barra-on.dec-barra-vidro .dec-barra::before {
        -webkit-backdrop-filter: blur(10px) saturate(1.2);
        backdrop-filter: blur(10px) saturate(1.2);
    }

    /* A linha de destaque embaixo, na cor secundária. */
    .h3-navbar.dec-barra-on .dec-barra::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--dec-barra-acento, 0);
        background: var(--cor-secundaria);
        border-radius: 0 0 var(--dec-barra-r3, 0) var(--dec-barra-r4, 0);
        pointer-events: none;
    }

    .h3-navbar.dec-barra-on .dec-barra > .container {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* -------------------------------------------------------------- larguras */

    .h3-navbar.dec-barra-on.dec-barra-larg-container .dec-barra {
        min-width: var(--dec-larg-container, 970px);
    }

    .h3-navbar.dec-barra-on.dec-barra-larg-centro .dec-barra {
        min-width: calc(var(--dec-larg-container, 970px) * var(--dec-barra-prop, 1));
    }

    /* Colada numa borda: sangra até a borda da tela e termina onde a proporção
       mandar, contada a partir do meio da página. */
    .h3-navbar.dec-barra-on.dec-barra-larg-esquerda .dec-barra,
    .h3-navbar.dec-barra-on.dec-barra-larg-direita .dec-barra {
        min-width: calc(50% - (var(--dec-larg-container, 970px) / 2) + (var(--dec-larg-container, 970px) * var(--dec-barra-prop, 1)));
    }

    .h3-navbar.dec-barra-on.dec-barra-larg-esquerda .dec-barra {
        margin-left: 0;
        margin-right: auto;
    }

    .h3-navbar.dec-barra-on.dec-barra-larg-direita .dec-barra {
        margin-left: auto;
        margin-right: 0;
    }

    /* A barra nunca fica mais estreita que o próprio menu: se a proporção
       escolhida não couber os itens, ela cresce até caber — no limite, a largura
       da tela. Sem isso, um menu com muitos itens (ou com nomes longos) vazava
       para fora da barra em telas menores. */
    .h3-navbar.dec-barra-on:not(.dec-barra-larg-total) .dec-barra {
        width: -webkit-fit-content;
        width: fit-content;
        max-width: 100%;
    }

    /* Fora do borda a borda os itens acompanham a barra, e não o container da
       página: o recuo vem do raio dos cantos. */
    .h3-navbar.dec-barra-on:not(.dec-barra-larg-total) .dec-barra > .container {
        width: 100%;
        padding-left: var(--dec-barra-pad, 4px);
        padding-right: var(--dec-barra-pad, 4px);
    }

    /* -------------------------------------------------------------- posição */

    .h3-navbar.dec-barra-on.dec-barra-pos-meio {
        margin-bottom: calc(var(--dec-barra-altura, 60px) / -2);
    }

    /* Flutuando dentro do banner: a barra sai do fluxo e cai sobre o que vem
       logo abaixo do cabeçalho. Só a home tem banner no topo — quem decide é o
       _Layout, que nas outras páginas troca a classe por dec-barra-pos-abaixo. */
    .header-two:has(.dec-barra-pos-sobre) {
        position: relative;
        z-index: 100;
    }

    .h3-navbar.dec-barra-on.dec-barra-pos-sobre {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 22px);
    }

    /* ---------------------------------------------------------------- itens */

    .h3-navbar.dec-barra-on .navbar,
    .h3-navbar.dec-barra-on .navbar-collapse,
    .h3-navbar.dec-barra-on .navbar-nav {
        height: 100%;
    }

    /* A <nav> é um item flex dentro da barra, e item flex não encolhe abaixo do
       próprio conteúdo sem isto. É o que deixa os itens apertarem quando o menu
       é grande demais para a largura disponível. */
    .h3-navbar.dec-barra-on .dec-barra > .container > .navbar,
    .h3-navbar.dec-barra-on .navbar-collapse {
        min-width: 0;
        max-width: 100%;
    }

    .h3-navbar.dec-barra-on .navbar .navbar-nav {
        display: flex;
        align-items: stretch;
        width: 100%;
        float: none;
    }

    .h3-navbar.dec-barra-on .navbar .navbar-nav > li {
        float: none;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    /* Item que o “Mais” tirou da barra. Sem isto o display:flex de cima vence o
       [hidden] do navegador e o item continuaria aparecendo. */
    .h3-navbar .navbar .navbar-nav > li[hidden] {
        display: none !important;
    }

    /* O espaçamento entre os itens acompanha a tela, e num menu grande demais
       para a largura disponível o rótulo corta com reticências. É o último
       recurso: sem isso os itens escapam da barra e a página ganha uma rolagem
       lateral (medido num menu de 10 itens com a faixa diagonal, em ~1200px). */
    .h3-navbar.dec-barra-on .navbar .navbar-nav > li > a {
        line-height: var(--dec-barra-altura, 60px);
        color: var(--dec-barra-texto, #fff);
        white-space: nowrap;
        padding: 0 clamp(5px, 0.7vw, 11px);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .h3-navbar.dec-barra-on .nav > li > a:focus,
    .h3-navbar.dec-barra-on .nav > li > a:hover,
    .h3-navbar.dec-barra-on .nav .open > a,
    .h3-navbar.dec-barra-on .nav .open > a:focus,
    .h3-navbar.dec-barra-on .nav .open > a:hover,
    .h3-navbar.dec-barra-on .navbar .navbar-nav > li > a:hover,
    .h3-navbar.dec-barra-on .navbar .navbar-nav > li.active > a {
        color: var(--dec-barra-realce, var(--cor-secundaria));
    }

    .h3-navbar.dec-barra-on.dec-barra-alinha-centro .navbar .navbar-nav { justify-content: center; }
    .h3-navbar.dec-barra-on.dec-barra-alinha-direita .navbar .navbar-nav { justify-content: flex-end; }
    .h3-navbar.dec-barra-on.dec-barra-alinha-distribuido .navbar .navbar-nav { justify-content: space-between; }

    /* Maiúsculas custam quase 20% de largura. O espaçamento entre letras fica no
       mínimo que ainda separa as palavras, e o espaço dos lados acompanha a tela
       — com os dez itens do Ímpar, isso é o que faz o menu caber em 1200px. */
    .h3-navbar.dec-barra-on.dec-barra-maiusculas .navbar .navbar-nav > li > a {
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: .03em;
        padding: 0 clamp(3px, 0.5vw, 9px);
    }

    .h3-navbar.dec-barra-on.dec-barra-separadores .navbar .navbar-nav > li + li::before {
        content: "";
        width: 1px;
        height: 38%;
        background: currentColor;
        opacity: .3;
    }

    /* ------------------------------------------------- destaque do item atual
       O padrão do portal é o traço no topo (dest-topo), que já está no CSS
       antigo; os outros o substituem. */

    .h3-navbar.dec-barra-on.dec-barra-dest-cor .navbar .navbar-nav > li.active > a:after {
        display: none;
    }

    .h3-navbar.dec-barra-on.dec-barra-dest-sublinhado .navbar .navbar-nav > li.active > a:after {
        top: auto;
        bottom: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        height: 3px;
        border-radius: 2px;
        background: var(--dec-barra-realce, var(--cor-secundaria));
    }

    .h3-navbar.dec-barra-on.dec-barra-dest-pilula .navbar .navbar-nav > li.active > a {
        background: var(--dec-barra-pilula, rgba(255, 255, 255, .16));
        border-radius: 999px;
        line-height: calc(var(--dec-barra-altura, 60px) - 20px);
    }

    .h3-navbar.dec-barra-on.dec-barra-dest-pilula .navbar .navbar-nav > li.active > a:after {
        display: none;
    }

    /* ----------------------------------------------------------- decorações */

    /* As faixas diagonais da ponta direita, na cor secundária. */
    .h3-navbar.dec-barra-on.dec-barra-deco-faixa-diagonal .dec-barra > .container::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 34px;
        width: 90px;
        background: var(--cor-secundaria);
        opacity: .9;
        clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
        pointer-events: none;
    }

    .h3-navbar.dec-barra-on.dec-barra-deco-faixa-diagonal .navbar {
        padding-right: clamp(70px, 9vw, 130px);
    }

    /* O painel do mega menu tem a largura da barra (é nela que ele se ancora).
       O .container de dentro dele é fixo no Bootstrap — 970 ou 1170px — e numa
       barra mais estreita passava do painel, empurrando uma rolagem lateral na
       página. Aqui ele acompanha o painel. */
    .h3-navbar.dec-barra-on:not(.dec-barra-larg-total) .navbar-nav > li.dec-mega-menu > div.dropdown-menu.dec-mega-painel > .container {
        width: 100%;
        max-width: 100%;
    }

    /* COM O “MAIS” LIGADO A BARRA PARA DE CRESCER (decisão do David em
       17/09/2026): a largura escolhida passa a mandar, e o que não couber vai
       para o painel em vez de esticar a barra. O crescimento da Etapa 4 continua
       valendo quando o modo é “apertar”. */
    .h3-navbar.dec-barra-on.dec-mais-on.dec-barra-larg-container .dec-barra {
        width: var(--dec-larg-container, 970px);
    }

    .h3-navbar.dec-barra-on.dec-mais-on.dec-barra-larg-centro .dec-barra {
        width: calc(var(--dec-larg-container, 970px) * var(--dec-barra-prop, 1));
    }

    .h3-navbar.dec-barra-on.dec-mais-on.dec-barra-larg-esquerda .dec-barra,
    .h3-navbar.dec-barra-on.dec-mais-on.dec-barra-larg-direita .dec-barra {
        width: calc(50% - (var(--dec-larg-container, 970px) / 2) + (var(--dec-larg-container, 970px) * var(--dec-barra-prop, 1)));
    }

    /* A BARRA MEDINDO. Durante a conta do “Mais” os itens voltam ao tamanho
       natural: com o aperto da Etapa 4 ligado eles encolhem para caber, e a
       pergunta “cabe?” responderia sempre que sim — com os rótulos cortados.
       A classe dura o instante da medida, posta e tirada pelo dec_menu_mais.js. */
    .h3-navbar.dec-barra-on.dec-medindo .navbar .navbar-nav > li,
    .h3-navbar.dec-barra-on.dec-medindo .navbar .navbar-nav > li > a {
        flex: 0 0 auto;
        min-width: auto;
        overflow: visible;
        text-overflow: clip;
    }

    /* =========================================================================
       O “MAIS” DA BARRA  (17/09/2026)

       O botão do fim da barra e o painel que abre nele, com o que não coube. O
       painel usa as MESMAS variáveis do submenu (cor, cantos, sombra, distância):
       ele é o submenu do “Mais”, e acompanha o desenho que o administrador
       escolheu para os outros. Quem mede e move os itens é o dec_menu_mais.js.
       ========================================================================= */
    .h3-navbar.dec-barra-on .navbar .navbar-nav > li.dec-mais > a .caret {
        margin-left: 6px;
    }

    .h3-navbar.dec-barra-on .dec-mais-painel {
        background: var(--dec-sub-fundo, #fff);
        color: var(--dec-sub-texto, var(--cor-texto));
        box-shadow: var(--dec-sub-sombra, 0 10px 24px rgba(0,20,60,.18));
        border-radius: var(--dec-sub-r1, 0) var(--dec-sub-r2, 0) var(--dec-sub-r3, 15px) var(--dec-sub-r4, 15px);
        margin-top: var(--dec-sub-dist, 0);
        padding: 10px 0;
        /* Com muita coisa dentro o painel rola para baixo em vez de passar da
           tela — vale nos três desenhos. */
        max-height: 70vh;
        overflow-y: auto;
    }

    .h3-navbar.dec-barra-on .dec-mais-itens {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .h3-navbar.dec-barra-on .dec-mais-raiz > a,
    .h3-navbar.dec-barra-on .dec-mais-raiz > span {
        display: block;
        padding: 9px 20px;
        font-weight: 700;
        color: inherit;
    }

    /* Os filhos entram RECUADOS embaixo do pai — o mesmo desenho do “nível de
       dentro” que o portal já usa no terceiro nível do menu. */
    .h3-navbar.dec-barra-on .dec-mais-raiz .dec-menu-sub {
        list-style: none;
        margin: 0 0 6px;
        padding: 0;
    }

    .h3-navbar.dec-barra-on .dec-mais-raiz .dec-menu-sub > li > a {
        display: block;
        padding: 7px 20px 7px 34px;
        font-size: 13px;
        color: inherit;
        opacity: .85;
    }

    .h3-navbar.dec-barra-on .dec-mais-raiz .dec-menu-sub > li > a:hover,
    .h3-navbar.dec-barra-on .dec-mais-raiz .dec-menu-sub > li > a:focus,
    .h3-navbar.dec-barra-on .dec-mais-raiz > a:hover,
    .h3-navbar.dec-barra-on .dec-mais-raiz > a:focus {
        background: var(--dec-sub-hover-fundo, transparent);
        color: var(--dec-sub-hover-texto, var(--cor-secundaria));
        opacity: 1;
    }

    /* ------------------------------------------------- o desenho do painel */

    /* LISTA: uma embaixo da outra, largura do conteúdo, alinhada pela direita do
       botão — é o dropdown de sempre. */
    .h3-navbar.dec-barra-on.dec-mais-lista .dec-mais-painel {
        min-width: 250px;
        left: auto;
        right: 0;
    }

    /* COLUNAS: o painel ocupa a largura da barra, como o mega menu, e as raízes
       viram colunas que descem de linha quando acabam. Nunca rola para o lado. */
    .h3-navbar.dec-barra-on.dec-mais-colunas .navbar,
    .h3-navbar.dec-barra-on.dec-mais-colunas .navbar-nav > li.dec-mais,
    .h3-navbar.dec-barra-on.dec-mais-colunas-rolagem .navbar,
    .h3-navbar.dec-barra-on.dec-mais-colunas-rolagem .navbar-nav > li.dec-mais {
        position: static;
    }

    .h3-navbar.dec-barra-on.dec-mais-colunas .dec-mais-painel,
    .h3-navbar.dec-barra-on.dec-mais-colunas-rolagem .dec-mais-painel {
        left: 0;
        right: 0;
        width: auto;
        padding: 14px 20px 18px;
    }

    .h3-navbar.dec-barra-on.dec-mais-colunas .dec-mais-itens {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 4px 20px;
        align-items: start;
    }

    /* COLUNAS COM ROLAGEM LATERAL: colunas de largura fixa; o que passar da barra
       só aparece rolando para o lado (escolha do administrador — a barra de
       rolagem fica visível para avisar que há mais coisa). */
    .h3-navbar.dec-barra-on.dec-mais-colunas-rolagem .dec-mais-itens {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 210px;
        gap: 4px 20px;
        align-items: start;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }

    .h3-navbar.dec-barra-on.dec-mais-colunas-rolagem .dec-mais-itens::-webkit-scrollbar {
        height: 8px;
    }

    .h3-navbar.dec-barra-on.dec-mais-colunas-rolagem .dec-mais-itens::-webkit-scrollbar-thumb {
        background: currentColor;
        opacity: .4;
        border-radius: 4px;
    }

    .h3-navbar.dec-barra-on.dec-mais-colunas .dec-mais-raiz > a,
    .h3-navbar.dec-barra-on.dec-mais-colunas .dec-mais-raiz > span,
    .h3-navbar.dec-barra-on.dec-mais-colunas-rolagem .dec-mais-raiz > a,
    .h3-navbar.dec-barra-on.dec-mais-colunas-rolagem .dec-mais-raiz > span {
        padding-left: 0;
        padding-right: 0;
    }

    .h3-navbar.dec-barra-on.dec-mais-colunas .dec-mais-raiz .dec-menu-sub > li > a,
    .h3-navbar.dec-barra-on.dec-mais-colunas-rolagem .dec-mais-raiz .dec-menu-sub > li > a {
        padding-left: 14px;
        padding-right: 0;
    }

    /* ------------------------------------------------------------- a busca */

    .h3-navbar.dec-barra-on .dec-mais-busca {
        padding: 4px 20px 10px;
        position: sticky;
        top: 0;
        background: var(--dec-sub-fundo, #fff);
        z-index: 1;
    }

    .h3-navbar.dec-barra-on .dec-mais-busca input {
        width: 100%;
        height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid currentColor;
        background: transparent;
        color: inherit;
        font-size: 13px;
    }

    .h3-navbar.dec-barra-on .dec-mais-vazio {
        margin: 0;
        padding: 8px 20px 4px;
        font-size: 13px;
        opacity: .75;
    }

    /* O botão da ponta (o rótulo e o endereço vêm do painel). */
    .h3-navbar.dec-barra-on .dec-barra-botao {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        height: calc(var(--dec-barra-altura, 60px) - 22px);
        padding: 0 18px;
        border-radius: 999px;
        background: var(--cor-secundaria);
        color: #06122e;
        font-weight: 700;
        font-size: 13px;
        white-space: nowrap;
    }

    .h3-navbar.dec-barra-on .dec-barra-botao:hover,
    .h3-navbar.dec-barra-on .dec-barra-botao:focus {
        background: var(--cor-secundaria-escuro);
        color: #06122e;
    }

    /* ------------------------------------------------------------- submenu */

    .h3-navbar.dec-barra-on .dropdown-menu {
        background: var(--dec-sub-fundo, #fff);
        color: var(--dec-sub-texto, var(--cor-texto));
        border-radius: var(--dec-sub-r1, 0) var(--dec-sub-r2, 0) var(--dec-sub-r3, 15px) var(--dec-sub-r4, 15px) !important;
        box-shadow: var(--dec-sub-sombra, 0 10px 24px rgba(0, 20, 60, .18));
        margin-top: var(--dec-sub-dist, 0);
    }

    .h3-navbar.dec-barra-on .dropdown-menu .sub-menu a,
    .h3-navbar.dec-barra-on .dropdown-menu a {
        background: transparent;
        color: var(--dec-sub-texto, var(--cor-texto));
    }

    .h3-navbar.dec-barra-on .dropdown-menu li + li > a {
        border-top: 1px solid var(--dec-sub-divisor, transparent);
    }

    .h3-navbar.dec-barra-on .dropdown-menu a:hover,
    .h3-navbar.dec-barra-on .dropdown-menu a:focus {
        background: var(--dec-sub-hover-fundo, transparent);
        color: var(--dec-sub-hover-texto, var(--cor-secundaria));
    }

    /* ------------------------------------------------ mega menu e 3 colunas
       O painel do mega menu se ancorava no .h3-navbar, que é sempre da largura
       da tela. Com o layout ligado ele passa a se ancorar na .dec-barra, então
       ACOMPANHA A LARGURA DA BARRA (decisão do David, 17/09/2026). */

    .h3-navbar.dec-barra-on:has(li.dec-mega-menu) {
        position: static;
    }

    .h3-navbar.dec-barra-on .dec-barra:has(li.dec-mega-menu) {
        position: relative;
    }

    .h3-navbar.dec-barra-on.dec-barra-pos-sobre:has(li.dec-mega-menu) {
        position: absolute;
    }

    /* ------------------------------------------------------------- ao rolar
       Com o menu fixo no topo, "vira borda a borda" tira o formato e usa o fundo
       sólido: barra estreita, transparente ou de vidro sobre o conteúdo da
       página ficaria ilegível. */

    body.mini_menu .h3-navbar.dec-barra-on.dec-barra-rolagem-total .dec-barra {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    body.mini_menu .h3-navbar.dec-barra-on.dec-barra-rolagem-total .dec-barra::before {
        background: var(--dec-barra-fundo-fixo, var(--cor-principal));
        opacity: 1;
        clip-path: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        /* Fixa e de borda a borda, a barra fica sem as linhas dos lados — mesma
           razão da largura "de borda a borda": linha contra a borda da tela não
           aparece. As de cima e de baixo continuam. */
        border-left: 0 none transparent;
        border-right: 0 none transparent;
    }

    body.mini_menu .h3-navbar.dec-barra-on.dec-barra-rolagem-total .dec-barra > .container {
        width: var(--dec-larg-container, 970px);
        padding-left: 15px;
        padding-right: 15px;
    }

    body.mini_menu .h3-navbar.dec-barra-on.dec-barra-pos-sobre,
    body.mini_menu .h3-navbar.dec-barra-on.dec-barra-pos-meio {
        position: static;
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .h3-navbar.dec-barra-on {
        --dec-larg-container: 1170px;
    }
}

/* ----------------------------------------------------------------------------
   TELA DE 992 A 1199px  (17/09/2026)

   Aqui o conteúdo tem 970px, e o menu do Ímpar (dez itens, com nomes longos)
   não cabe numa linha com a letra e o espaçamento cheios — hoje, sem o layout,
   o tema empurra o último item para uma segunda fila. Letra e espaçamento
   menores fazem o menu inteiro caber, e valem só nesta faixa: de 1200px para
   cima nada muda, e abaixo de 992 o menu já é o botão de sempre.
   ---------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
    .h3-navbar.dec-barra-on .navbar .navbar-nav > li > a {
        padding: 0 7px;
        font-size: 13px;
    }

    /* Nesta faixa nem as maiúsculas cabem: com elas, o menu do Ímpar pede ~125px
       a mais do que a linha tem, e os rótulos sairiam cortados. Aqui elas
       cedem — o texto volta ao normal e o menu inteiro aparece. De 1200px para
       cima as maiúsculas valem como o administrador escolheu. */
    .h3-navbar.dec-barra-on.dec-barra-maiusculas .navbar .navbar-nav > li > a {
        text-transform: none;
        font-size: 13px;
        letter-spacing: 0;
        padding: 0 7px;
    }

    /* O botão da ponta também encolhe, senão empurra os itens. */
    .h3-navbar.dec-barra-on .dec-barra-botao {
        padding: 0 12px;
        font-size: 12px;
    }
}