/* BEGIN max width 1200px */
@media (max-width: 1200px) {
    .content-form-page .control-label {
        padding-left: 30px;
        padding-bottom: 5px;
    }

    .content-form-page .col-md-offset-4 {
        margin-left: 15px;
    }

    .content-form-page .pull-right {
        float: left !important;
    }

    .quote-v1 span {
        font-size: 20px;
    }
}
/* END max width 1200px */



/* BEGIN max width 992px */
@media (max-width: 992px) {
    .shop-index-carousel {
        margin-left: 0;
        margin-right: 10px;
    }

    .brands .container {
        padding-right: 25px;
    }

    .sidebar-menu a:focus {
        color: #333 !important;
        text-decoration: none;
    }

    .sale-product___removed {
        margin-bottom: 40px;
    }

    .new-arrivals___removed {
        margin-left: 15px;
        padding-left: 0;
    }

    .two-items-bottom-items {
        margin-bottom: 40px;
    }

    .carousel img {
        width: 100%;
    }

    /*.steps-block {
padding-bottom: 10px;
}
.steps-block-col {
border: 2px solid #FFF;
margin: 0 20px 20px 15px;
padding: 20px 20px 15px;
min-height: auto;
float: left;
}
.steps-block-col:last-child {
margin-right: 0;
}
.steps-block .steps-block-col div {
margin-left: 0;
margin-right: 0;
}
.steps-block h2 {
font-size: 25px;
}
.steps-block em {
text-transform: inherit;
}
.steps-block-col span,
.steps-block-col .fa {
display: none;
}
.steps-block-col:first-child em {
margin-left: 0;
}*/

    .steps-block-col {
        border: 2px solid #FFF;
        margin: 0 25px 20px 15px;
        padding: 20px 20px 15px;
        min-height: auto;
        float: none;
    }

        .steps-block-col:last-child {
            margin-right: 25px;
            margin-bottom: 0;
        }

    .steps-block .steps-block-col div {
        margin-left: 0;
        margin-right: 0;
    }

    .steps-block h2 {
        font-size: 43px;
    }

    .steps-block em {
        text-transform: uppercase;
    }

    .steps-block-col span {
        display: none;
    }

    .steps-block-col .fa {
        display: block;
    }

    .pre-footer-subscribe-box form {
        width: 100%;
    }

    .sidebar-products img {
        float: none;
        margin-bottom: 5px;
        width: 100%;
        height: auto;
    }

    .sidebar-products h3,
    .sidebar-products .price {
        margin-left: 0;
    }

    .product-page-options .pull-left {
        margin-bottom: 10px;
    }

    .product-quantity {
        margin-bottom: 10px;
    }

    /*
if you want to hide buttons on mobile view, uncomment this block
.pi-img-wrapper div {
display: none !important;
}*/
    .review .rateit {
        width: 100%;
        margin-bottom: 10px;
    }

    .list-view-sorting .pull-right {
        margin-bottom: 10px;
    }

    .service-box p, .service-box .service-box-heading em, .service-box .service-box-heading span {
        display: block;
        text-align: center;
    }

    .service-box .service-box-heading em {
        margin-bottom: 10px;
    }

    .quote-v1 {
        text-align: center;
    }

        .quote-v1 .text-right {
            text-align: center;
        }

    .recent-work .owl-carousel {
        margin-left: -10px;
    }

    .our-clients .owl-carousel {
        margin-left: -2px;
    }

    .recent-work .owl-carousel,
    .our-clients .owl-carousel {
        padding-top: 30px;
    }

    .recent-work .owl-buttons,
    .our-clients .owl-buttons {
        top: 0;
        left: -3px;
    }

    .our-clients .owl-buttons {
        left: -10px;
    }

    .testimonials-v1 {
        padding-top: 40px;
    }

    .recent-work .recent-work-item .fa {
        width: 36px;
        height: 36px;
        margin-top: -18px;
        font-size: 14px;
        padding: 12px;
    }

    .recent-news-inner {
        padding: 10px 15px 0;
    }

    .ecommerce .pre-footer-subscribe-box h2, .corporate .pre-footer-subscribe-box h2 {
        padding-top: 0;
    }

    .pre-footer .pre-footer-subscribe-box {
        padding-bottom: 25px;
    }

    .ecommerce .pre-footer-subscribe-box form {
        width: 100%;
    }

    .ecommerce .content-search h1 {
        padding-top: 0;
        margin-bottom: 3px;
    }

    .content-search form {
        margin: 0 0 6px;
    }
}
/* END max width 992px */

/* BEGIN max width 767px */
@media (max-width: 767px) {
    .pre-header .pull-right {
        float: left !important;
    }

        .pre-header .pull-right li:first-child {
            padding-left: 0;
        }

    .ecommerce .pre-footer-subscribe-box form {
        float: none;
        width: auto;
    }

    .header .header-navigation {
        margin: 0 -10px 0;
        padding: 0 10px;
    }

    .header-navigation-content {
        min-width: 100px;
    }

    .sidebar {
        margin-bottom: 40px;
    }

    .sidebar___removed {
        margin-bottom: 40px;
    }

    .sidebar-menu .fa-angle-right {
        display: inline-block;
    }

    .pre-footer .pull-right,
    .footer .pull-right {
        float: none !important;
    }

    .pre-footer .pull-right,
    .footer .pull-right {
        padding-top: 15px;
    }

    .footer .list-inline > li {
        padding-left: 0;
        margin-right: 5px;
    }


    .form-info {
        border-left: none;
        padding-left: 0;
        padding-top: 30px;
        border-top: 1px solid #E4E6E8;
        margin-bottom: 0;
    }

    .sidebar-products .item {
        float: left;
        width: 48%;
        margin-bottom: 20px;
        padding: 0 10px 10px;
    }

    .sidebar-products img {
        width: 100%;
        height: auto;
    }

    .list-view-sorting {
        /*background: #fff;*/
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px;
    }

        .list-view-sorting .col-md-10 {
            padding-right: 0;
        }

    .product-other-images {
        margin-bottom: 40px;
    }

    .product-page-options .pull-left {
        margin-bottom: 0;
    }

    .product-item .img-responsive {
        width: 100%;
    }

    .pagination {
        float: left !important;
        padding-top: 10px;
    }

        .pagination > li {
            margin-left: 0;
            margin-right: 5px;
        }

    .pre-footer .margin-bottom-40 {
        margin-bottom: 0;
    }

    .ls-layer3 .ls-price strong {
        top: -15px;
    }

    .glyphicons-demo ul li {
        width: 12.5%;
    }

    .tab-style-1 .tab-content img {
        margin: 5px 0 10px;
    }

    .testimonials-v1 {
        padding-top: 20px;
    }

    .front-steps-wrapper {
        margin-left: -10px;
        margin-right: -10px;
    }

        .front-steps-wrapper .front-step-col {
            padding-left: 15px;
            padding-right: 15px;
        }

        .front-steps-wrapper .front-step:after {
            display: none;
        }

    .blog-posts h2, .ecommerce .blog-posts h2 {
        padding-top: 15px;
    }

    .ecommerce .footer {
        padding: 10px 0 10px;
    }

        .ecommerce .footer .pull-right {
            padding-top: 10px;
        }

    .ecommerce .pre-footer address {
        margin-bottom: 15px !important;
    }

    .footer img {
        margin-bottom: 10px;
    }

    .ecommerce .pre-footer-subscribe-box h2, .corporate .pre-footer-subscribe-box h2 {
        padding-top: 7px;
    }
}
/* END max width 767px */

/* BEGIN max width 600px */
@media (max-width: 600px) {
    .ls-layer3 .ls-price strong {
        top: -5px;
    }
}
/* END max width 600px */

/* BEGIN max width 480px */
@media (max-width: 480px) {
    .pre-header .list-inline li {
        display: block;
        border: none;
        margin-bottom: 10px;
        padding: 0;
    }

    .pre-header .col-md-6 {
        float: left;
    }

    .pre-header .additional-nav {
        float: right;
        text-align: right;
    }

    .nav-catalogue .pi-price {
        margin-bottom: 10px;
    }

    .nav-catalogue .pi-price,
    .nav-catalogue .product-item .add2cart {
        float: none;
    }

    .top-cart-block {
        clear: both;
        float: left;
        padding-top: 0;
        margin: 0 0 29px;
        width: 100%;
    }

    .top-cart-info {
        float: none;
    }

    .top-cart-block .fa-shopping-cart {
        top: 0;
    }

    .top-cart-content-wrapper {
        left: 0;
        right: auto;
    }

    .top-cart-content:after {
        left: 15px;
    }

    .ls-fullwidth .ls-nav-prev, .ls-fullwidth .ls-nav-next {
        display: none;
    }

    .checkout-content {
        padding: 0 0 40px;
    }

    .checkout-page h2 a {
        padding: 9px 10px 8px;
    }

    .table-wrapper-responsive {
        overflow-x: scroll;
    }

    .shopping-cart-page .btn-default {
        float: right;
    }

    .shopping-cart-page .btn-primary {
        clear: both;
        margin-top: 10px;
    }

    .checkout-page .btn-default {
        clear: both;
        margin-top: 10px;
        margin-right: 0 !important;
    }

    .product-item:hover > .pi-img-wrapper > div {
        display: none;
    }

    .steps-block-simple h2 {
        font-size: 21px;
    }

    .steps-block-simple em {
        font-size: 14px;
        text-transform: inherit;
    }

    .ecommerce .pre-footer-subscribe-box h2,
    .corporate .pre-footer-subscribe-box h2 {
        float: none;
    }

    .list-view-sorting .pull-right {
        float: left !important;
        margin: 0 30px 10px 0;
    }

    .header .top-cart-block {
        margin-top: 0;
    }

    .reduce-header .top-cart-block {
        margin-top: 0;
        margin-bottom: 19px;
    }
}
/* END max width 480px */

/* BEGIN max width 450px */
@media (max-width: 450px) {
    .ecommerce .steps-block h2 {
        font-size: 33px;
    }
}
/* END max width 450px */

/* BEGIN max width 405px */
@media (max-width: 405px) {
    .top-cart-content {
        width: 100%;
    }

    .top-cart-block img,
    .top-cart-block .cart-content-count {
        display: none;
    }
}
/* END max width 405px */

/* BEGIN max width 390px */
@media (max-width: 390px) {
    .steps-block .fa-truck, .steps-block .fa-gift, .steps-block .fa-phone {
        border: 2px solid #FFFFFF;
        border-radius: 30px !important;
        float: left;
        font-size: 20px;
        width: 40px;
        height: 40px;
        margin-right: 11px;
        padding-top: 12px;
        text-align: center;
        vertical-align: middle;
    }

    .ecommerce .steps-block h2 {
        font-size: 25px;
        padding-top: 2px;
    }

    .ecommerce .steps-block em {
        text-transform: inherit;
    }

    .mix-block .tab-content .col-md-3 {
        padding-right: 15px;
    }
}
/* END max width 390px */

/* BEGIN max width 330px */
@media (max-width: 330px) {
    .top-cart-content {
        width: 280px;
    }
}
/* END max width 330px */

/* BEGIN max width 320px */
@media (max-width: 320px) {
    .site-logo {
        margin-right: 0;
    }

    .content-form-page .btn-default {
        margin-top: 10px;
    }

    .price-availability-block .availability {
        clear: left;
        float: left;
    }

    .product-page-options .pull-left {
        margin-bottom: 10px;
    }
}

/* ==========================================================================
CSS RESPONSIVO (MOBILE) - Tudo Centralizado e Empilhado
========================================================================== */

@media (max-width: 768px) {
    .topo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 15px 0;
        margin: 10px 0;
        gap: 20px;
    }

    .logo-principal {
        height: 80px;
        width: auto;
        margin: 0 auto;
    }

    .banners-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: none;
        border-right: none;
        padding: 15px 0;
        width: 100%;
    }

    .banners {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

        .banners img {
            height: 50px;
            width: auto;
        }

    .tracovertical {
        display: none;
    }

    .titulo-plataformas {
        width: auto;
        max-width: 90%;
        font-size: 11px;
        margin-bottom: 15px;
    }

    .social-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 8px;
    }

    .redes {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
    }

        .redes img {
            height: 35px;
            margin: 0 6px;
        }

    .data {
        font-size: 11px;
        margin-bottom: 0;
    }

    .footer-banners {
        flex-direction: column;
        align-items: center;
        height: auto !important;
        padding: 20px 0 !important;
        gap: 15px;
    }

        .footer-banners img {
            height: 50px;
            width: auto;
        }

    .footer-green {
        height: 65px !important;
        padding: 5px 0;
        overflow: hidden;
    }

        .footer-green .container {
            width: 100% !important;
            padding-left: 5px !important;
            padding-right: 5px !important;
        }

        .footer-green .row {
            flex-wrap: nowrap !important;
            justify-content: space-around;
        }

        .footer-green .col-lg-2 {
            flex: 1 1 auto !important;
            max-width: 25% !important;
            padding: 0 4px !important;
        }

    .bloco-info h1 {
        font-size: 20px !important;
    }

    .bloco-info h5 {
        font-size: 10px !important;
        letter-spacing: -0.3px;
    }
}



@media (min-width: 769px) and (max-width: 1300px) {

    /* Opcional: Define proporções inteligentes para as colunas não ficarem esmagadas */
    .table-publicacoes th:nth-child(1) {
        width: 20%;
    }
    /* Título da Publicação */
    .table-publicacoes th:nth-child(2) {
        width: 10%;
    }
    /* Data */
    .table-publicacoes th:nth-child(3) {
        width: 55%;
    }
    /* Descrição (ganha mais espaço) */
    .table-publicacoes th:nth-child(4) {
        width: 15%;
    }

    .topo {
        background: #fff;
        padding: 15px 0;
        margin: 20px 0 10px 0;
    }

    .logo-principal {
        height: 110px;
        width: auto;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: 25%;
        margin-bottom: 20px;
    }

    .banners-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #FFF;
        border-right: 1px solid #FFF;
        padding: 0 15px;
        margin-bottom: 20px;
    }

    .titulo-plataformas {
        background: #03B80C;
        color: white;
        font-size: 12px;
        width: 90%;
        padding: 3px 20px;
        border-radius: 15px !important;
        margin-bottom: 12px;
        font-weight: bold;
        text-align: center;
        display: table;
    }

    .banners {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

        .banners img {
            height: 55px;
        }

    .tracovertical {
        width: 1px;
        height: 30px;
        background-color: #ccc;
    }

    .social-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .redes {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
    }

        .redes img {
            height: 35px;
            margin: 0 4px;
        }

    .data {
        font-size: 10px;
        color: #666;
        margin-bottom: 5px;
    }

    #google_translate_element {
        display: flex;
        justify-content: center;
    }

    .footer-banners {
        display: flex;
        align-items: center;
        height: auto !important;
        padding: 20px 0 !important;
        gap: 17px;
    }

        .footer-banners img {
            height: 35px;
            width: auto;
        }
}

/* ================================================================= HEADER ====================================================================================================================================*/

@media (min-width: 769px) and (max-width: 991px) {


    .header {
        box-shadow: 0 1px 3px #ddd;
        border-radius: 0;
        padding-bottom: 10px;
        z-index: 999;
        position: relative;
        background: linear-gradient(to left, #2a1a6c, #940341);
        color: #fff;
        height: 40px;
        text-decoration: none !important;
    }

        .header .container {
            position: relative;
        }

    .ie8 .header {
        border-bottom: 1px solid #eee;
    }



    .header .mobi-toggler {
        float: right;
        color: #D8D8D8;
        border: 1px solid #D8D8D8;
        border-radius: 100% !important;
        width: 32px;
        height: 32px;
        display: none;
        margin: 25px 0 0 30px;
        position: relative;
        background: #fff url(../img/icons/toggler.png) no-repeat 6px 8px;
    }

        .header .mobi-toggler i {
            display: none;
        }

        .header .mobi-toggler:hover {
            background: #e34f00 url(../img/icons/toggler.png) no-repeat 6px -28px;
            border-color: #e34f00;
            color: #fff;
        }


    .page-header-fixed .header .mobi-toggler {
        transition: margin 0.3s ease;
        -o-transition: margin 0.3s ease;
        -ms-transition: margin 0.3s ease;
        -moz-transition: margin 0.3s ease;
        -webkit-transition: margin 0.3s ease;
    }

    .header-navigation ul li a:hover,
    .header-navigation ul li a:focus,
    .header-navigation ul li.active a {
        text-decoration: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .header-navigation > ul > li::after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        height: 0px; /* 👈 altura da área extra */
        border: none !important;
    }

    /* força o menu principal ativo (inclusive dropdown) */
    .header-navigation > ul > li.active > a,
    .header-navigation > ul > li.active > a.dropdown-toggle {
        color: #ffdb3D !important;
        font-weight: bold !important;
    }

    /* Navigation */
    .header-navigation {
        font: 13px "Open Sans", sans-serif !important;
        text-decoration: none !important;
        padding-left: 0;
        text-transform: uppercase;
    }

        .header-navigation ul {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none !important;
        }

            .header-navigation ul:active {
                color: #ffdb3d !important;
            }

        .header-navigation > ul > li {
            position: relative;
            float: left;
        }

            .header-navigation > ul > li > a {
                color: #fff !important;
                display: block;
                padding-right: 7px !important;
                padding-left: 7px !important;
                /* Ajustado: padding-top diminuiu para centralizar o texto no height de 60px */
                padding-top: 10px;
                padding-bottom: 14px;
                font-size: 12px !important;
                line-height: 15px;
            }

    .page-header-fixed .header-navigation > ul > li > a {
        color: #fff !important;
        display: block;
        padding-right: 7px !important;
        padding-left: 7px !important;
        /* Ajustado: padding-top diminuiu para centralizar o texto no height de 60px */
        padding-top: 10px;
        padding-bottom: 14px;
        font-size: 12px !important;
        line-height: 15px;
    }

    .header-navigation ul > li.active > a {
        color: #ffdb3d !important;
        font-weight: bold !important;
        text-decoration: none;
    }

    .header-navigation DepartamentoMenu:active > a {
        color: #ffdb3d !important;
        font-weight: bold !important;
    }


    .header-navigation ul > li > a:hover {
        text-decoration: none;
        color: #ffdb3d !important;
    }

    .header-navigation,
    .header-navigation .dropdown {
        position: relative;
    }

        .header-navigation .dropdown-fix-left,
        .header-navigation .dropdown-fix-right {
            position: relative;
        }
    /*=========================================================================================================================*/

    /* 1. Ajusta APENAS o menu principal que cai do header */
    .page-header-fixed .header-navigation > ul > li > .dropdown-menu {
        top: calc(100% + 0px) !important; /* Aqui ele desce os pixels que você queria */
    }

    /* 2. Reseta o SUBMENU (o menu que abre para o lado) */
    .page-header-fixed .header-navigation .dropdown-menu .dropdown-menu {
        top: -2px !important; /* Alinha o topo do submenu com o item pai */
        left: 100% !important; /* Garante que ele abra para o lado */
        margin-top: 0 !important;
        margin-left: 1px;
    }
    /*==========================================================================================================================*/

    /* Mantém o restante das suas propriedades exatamente como estavam */
    .header-navigation .dropdown-menu {
        left: auto;
        top: 100%;
        border: none;
        position: absolute;
        box-shadow: 0 5px 5px 0 #5f6d7b !important;
        text-transform: none;
        color: #fff;
        font: 13px "Open Sans", sans-serif;
        letter-spacing: 0;
        border-radius: 0;
        z-index: 9999;
        width: 270px;
    }

    .dropdown-fix-left .dropdown-menu {
        left: 0;
        width: 700px;
    }

    .dropdown-fix-right .dropdown-menu {
        right: 0;
        width: 700px;
    }

    .header-navigation .dropdown100 > .dropdown-menu {
        left: 15px;
        right: 15px;
    }

    .header-navigation > ul > li.dropdown:hover > a:after {
        display: none !important;
    }

    .ie8 .header-navigation > ul > li.dropdown:hover > a:after {
        display: none !important;
    }

    .header-navigation li.dropdown100 > .dropdown-menu:after {
        display: none !important;
    }

    .header-navigation .dropdown-menu > li:first-child {
        border-top: solid 2px #ea4c1d;
    }

    .header-navigation .dropdown-menu li {
        padding: 0;
        margin: 0;
        border-bottom: solid 1px #efefef;
        position: relative;
        float: none;
    }

        .header-navigation .dropdown-menu li:last-child {
            border: none;
        }


        .header-navigation .dropdown-menu li > a {
            padding: 20px 15px;
            font-weight: 400;
            background-color: #EDEFF1;
            color: #000;
        }

    .header-navigation .dropdown-menu > li > a:hover,
    .header-navigation .header-navigation-content .header-navigation-col li > a:hover {
        background-color: #640D54 !important;
        color: #fff !important;
    }

    .header-navigation .dropdown-menu > li.active > a,
    .header-navigation .header-navigation-content .header-navigation-col li.active > a {
        background-color: #640D54 !important;
        color: #ffdb3d !important;
        font-weight: bold !important;
    }

    .dropdown-submenu > a:after {
        display: none;
    }

    .dropdown-toggle > a {
        color: #ffdb3d !important;
        font-weight: bold !important;
        margin-top: -20px !important;
    }

    /* navigation content */
    .header-navigation-content {
        padding: 20px 30px;
        min-width: 600px;
    }

        .header-navigation-content .header-navigation-col {
            padding: 0;
        }

        .header-navigation-content h4,
        .ecommerce .header-navigation-content h4 {
            font: bold 15px 'Open Sans', Arial, sans-serif;
            margin: 0 0 6px;
            padding: 10px 10px 5px;
            border-bottom: solid 1px #f0f0f0;
        }

        .header-navigation-content ul {
            padding: 0;
            margin: 0 0 10px;
            list-style: none;
        }

        .header-navigation-content li {
            padding: 0;
            border: none !important;
        }

            .header-navigation-content li > a {
                display: block;
            }

    /* header navigation description */
    .header-navigation-content-ext {
        padding: 20px 30px 2px;
        background: #fff;
    }

    .header-navigation-description {
        background: #fcfafb;
        margin: -20px 0 -2px -30px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(91, 91, 91, 0.2) inset;
    }

    .header-navigation-content-ext h4,
    .ecommerce .header-navigation-content-ext h4 {
        border: none;
        padding: 10px 0 0;
    }

    .header-navigation .dropdown-menu .header-navigation-content-ext li {
        border: none;
    }

        .header-navigation .dropdown-menu .header-navigation-content-ext li > a {
            padding: 0 0 10px;
            color: #767f88;
            display: inline-block;
        }

            .header-navigation .dropdown-menu .header-navigation-content-ext li > a:hover,
            .header-navigation .dropdown-menu .header-navigation-content-ext li.active > a {
                background: #fff;
                color: #e6400c;
            }

    /* n-level submenu //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
    .header-navigation .dropdown-menu .dropdown-menu {
        left: 101%;
        right: auto;
        top: 4px;
        position: absolute !important;
        box-shadow: 5px 5px #5f6d7b !important;
        width: 370px; /* largura fixa que funciona para o conteúdo */
    }

    .header-navigation .dropdown-menu a {
        position: relative;
    }

    .header-navigation .dropdown-menu .fa {
        position: absolute;
        top: 10px;
        right: 15px;
    }


    /* Quando a página desce e o header fica fixo */
    .page-header-fixed .header-navigation li.menu-search {
        top: 30px !important; /* Reseta o deslocamento */
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }



    /* destaca o submenu pai quando tiver item ativo dentro */
    .dropdown-submenu.active > a,
    .dropdown-submenu:has(.active) > a {
        background-color: #6A236c !important;
        color: #ffdb3d !important;
        font-weight: bold;
    }

    .header-navigation .dropdown-menu > li.active > a,
    .header-navigation .header-navigation-content .header-navigation-col li.active > a {
        background-color: #d7d7d7 !important;
        color: #000 !important;
        font-weight: bold !important;
    }


    /* Pai ativo do submenu */
    .header-navigation .dropdown-menu > li.dropdown-submenu.active > a,
    .header-navigation .dropdown-menu > li.dropdown-submenu:has(.active) > a {
        background-color: #d7d7d7 !important;
        color: #000 !important;
        font-weight: bold !important;
    }

    /*============================== HEADER FIXO ==============================================================================================================================================================*/

    .header {
        position: -webkit-sticky; /* Suporte para Safari */
        position: sticky; /* Faz a mágica de prender no topo */
        top: 0;
        z-index: 9999;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* IMPORTANTE: Remova o padding-top do body! */
    body {
        padding-top: 0 !important;
    }

    /*//////////////////////////////////////////// LUPA ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

    /* Container que vai dentro da <li> para garantir o alinhamento */
    .custom-search-item {
        display: flex;
        height: 100%; /* Garante que ocupe a altura do menu */
        list-style: none;
        padding-top: 0 0px;
        margin: 10px 0 0 50px;
    }

    .custom-search-container {
        background-color: #FFF;
        border: 1px solid #cccccc;
        border-radius: 15px !important; /* Formato de pílula da imagem */
        padding: 0px 15px;
        display: flex;
        align-content: center !important;
        width: 120px; /* Largura fixa */
        height: 20px;
    }

    .custom-search-form {
        display: flex;
        width: 100%;
        align-items: center;
        margin: 0; /* Remove margens padrões de formulários */
    }

    /* Input com fonte preta e sem bordas internas */
    .custom-search-input {
        border: none !important;
        background: transparent !important;
        outline: none !important;
        color: #000000 !important; /* Fonte preta */
        font-size: 12px;
        width: 100%;
        padding: 3px 0;
        align-content: center !important;
    }

        /* Placeholder cinza para contraste */
        .custom-search-input::placeholder {
            color: #666666;
        }

    /* Botão da Lupa */
    .custom-search-btn {
        background: none !important;
        border: none !important;
        cursor: pointer;
        color: #000;
        padding: 0;
        margin-left: 8px;
        font-size: 18px;
        display: flex;
        align-items: center;
        transition: transform 0.2s;
    }

        .custom-search-btn:hover {
            transform: scale(1.3); /* Efeito sutil ao passar o mouse na lupa */
        }


    /* Remove o fundo azul/amarelo do preenchimento automático */
    input.custom-search-input:-webkit-autofill,
    input.custom-search-input:-webkit-autofill:hover,
    input.custom-search-input:-webkit-autofill:focus,
    input.custom-search-input:-webkit-autofill:active {
        /* Isso cria uma sombra interna gigante que "tapa" a cor do navegador com branco */
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
        /* Define a cor do texto para preto */
        -webkit-text-fill-color: #000000 !important;
        /* Mantém a transição de cor suave ou inexistente */
        transition: background-color 5000s ease-in-out 0s;
        height: 20px;
    }

    /* Para navegadores que não são Webkit (Firefox moderno) */
    input.custom-search-input {
        filter: none;
    }
}

/* ================================================================= HEADER ====================================================================================================================================*/

@media (min-width: 992px) and (max-width: 1300px) {


    .header {
        box-shadow: 0 1px 3px #ddd;
        border-radius: 0;
        padding-bottom: 10px;
        z-index: 999;
        position: relative;
        background: linear-gradient(to left, #2a1a6c, #940341);
        color: #fff;
        height: 40px;
        text-decoration: none !important;
    }

        .header .container {
            position: relative;
        }

    .ie8 .header {
        border-bottom: 1px solid #eee;
    }



    .header .mobi-toggler {
        float: right;
        color: #D8D8D8;
        border: 1px solid #D8D8D8;
        border-radius: 100% !important;
        width: 32px;
        height: 32px;
        display: none;
        margin: 25px 0 0 30px;
        position: relative;
        background: #fff url(../img/icons/toggler.png) no-repeat 6px 8px;
    }

        .header .mobi-toggler i {
            display: none;
        }

        .header .mobi-toggler:hover {
            background: #e34f00 url(../img/icons/toggler.png) no-repeat 6px -28px;
            border-color: #e34f00;
            color: #fff;
        }


    .page-header-fixed .header .mobi-toggler {
        transition: margin 0.3s ease;
        -o-transition: margin 0.3s ease;
        -ms-transition: margin 0.3s ease;
        -moz-transition: margin 0.3s ease;
        -webkit-transition: margin 0.3s ease;
    }

    .header-navigation ul li a:hover,
    .header-navigation ul li a:focus,
    .header-navigation ul li.active a {
        text-decoration: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .header-navigation > ul > li::after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        height: 0px;
        border: none !important;
    }

    /* força o menu principal ativo (inclusive dropdown) */
    .header-navigation > ul > li.active > a,
    .header-navigation > ul > li.active > a.dropdown-toggle {
        color: #ffdb3D !important;
        font-weight: bold !important;
    }

    /* Navigation */
    .header-navigation {
        font: 13px "Open Sans", sans-serif !important;
        text-decoration: none !important;
        padding-left: 0;
        text-transform: uppercase;
    }

        .header-navigation ul {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none !important;
        }

            .header-navigation ul:active {
                color: #ffdb3d !important;
            }

        .header-navigation > ul > li {
            position: relative;
            float: left;
        }

            .header-navigation > ul > li > a {
                color: #fff !important;
                display: block;
                padding-right: 11px !important;
                padding-left: 11px !important;
                /* Ajustado: padding-top diminuiu para centralizar o texto no height de 60px */
                padding-top: 10px;
                padding-bottom: 14px;
                font-size: 14px !important;
                line-height: 15px;
            }

    .page-header-fixed .header-navigation > ul > li > a {
        color: #fff !important;
        display: block;
        padding-right: 11px !important;
        padding-left: 11px !important;
        /* Ajustado: padding-top diminuiu para centralizar o texto no height de 60px */
        padding-top: 10px;
        padding-bottom: 14px;
        font-size: 14px !important;
        line-height: 15px;
    }

    .header-navigation ul > li.active > a {
        color: #ffdb3d !important;
        font-weight: bold !important;
        text-decoration: none;
    }

    .header-navigation DepartamentoMenu:active > a {
        color: #ffdb3d !important;
        font-weight: bold !important;
    }


    .header-navigation ul > li > a:hover {
        text-decoration: none;
        color: #ffdb3d !important;
    }

    .header-navigation,
    .header-navigation .dropdown {
        position: relative;
    }

        .header-navigation .dropdown-fix-left,
        .header-navigation .dropdown-fix-right {
            position: relative;
        }
    /*=========================================================================================================================*/

    /* 1. Ajusta APENAS o menu principal que cai do header */
    .page-header-fixed .header-navigation > ul > li > .dropdown-menu {
        top: calc(100% + 0px) !important; /* Aqui ele desce os pixels que você queria */
    }

    /* 2. Reseta o SUBMENU (o menu que abre para o lado) */
    .page-header-fixed .header-navigation .dropdown-menu .dropdown-menu {
        top: -2px !important; /* Alinha o topo do submenu com o item pai */
        left: 100% !important; /* Garante que ele abra para o lado */
        margin-top: 0 !important;
        margin-left: 1px;
    }
    /*==========================================================================================================================*/

    /* Mantém o restante das suas propriedades exatamente como estavam */
    .header-navigation .dropdown-menu {
        left: auto;
        top: 100%;
        border: none;
        position: absolute;
        box-shadow: 0 5px 5px 0 #5f6d7b !important;
        text-transform: none;
        color: #fff;
        font: 13px "Open Sans", sans-serif;
        letter-spacing: 0;
        border-radius: 0;
        z-index: 9999;
        width: 270px;
    }

    .dropdown-fix-left .dropdown-menu {
        left: 0;
        width: 700px;
    }

    .dropdown-fix-right .dropdown-menu {
        right: 0;
        width: 700px;
    }

    .header-navigation .dropdown100 > .dropdown-menu {
        left: 15px;
        right: 15px;
    }

    .header-navigation > ul > li.dropdown:hover > a:after {
        display: none !important;
    }

    .ie8 .header-navigation > ul > li.dropdown:hover > a:after {
        display: none !important;
    }

    .header-navigation li.dropdown100 > .dropdown-menu:after {
        display: none !important;
    }

    .header-navigation .dropdown-menu > li:first-child {
        border-top: solid 2px #ea4c1d;
    }

    .header-navigation .dropdown-menu li {
        padding: 0;
        margin: 0;
        border-bottom: solid 1px #efefef;
        position: relative;
        float: none;
    }

        .header-navigation .dropdown-menu li:last-child {
            border: none;
        }


        .header-navigation .dropdown-menu li > a {
            padding: 20px 15px;
            font-weight: 400;
            background-color: #EDEFF1;
            color: #000;
        }

    .header-navigation .dropdown-menu > li > a:hover,
    .header-navigation .header-navigation-content .header-navigation-col li > a:hover {
        background-color: #640D54 !important;
        color: #fff !important;
    }

    .header-navigation .dropdown-menu > li.active > a,
    .header-navigation .header-navigation-content .header-navigation-col li.active > a {
        background-color: #640D54 !important;
        color: #ffdb3d !important;
        font-weight: bold !important;
    }

    .dropdown-submenu > a:after {
        display: none;
    }

    .dropdown-toggle > a {
        color: #ffdb3d !important;
        font-weight: bold !important;
        margin-top: -20px !important;
    }

    /* navigation content */
    .header-navigation-content {
        padding: 20px 30px;
        min-width: 600px;
    }

        .header-navigation-content .header-navigation-col {
            padding: 0;
        }

        .header-navigation-content h4,
        .ecommerce .header-navigation-content h4 {
            font: bold 15px 'Open Sans', Arial, sans-serif;
            margin: 0 0 6px;
            padding: 10px 10px 5px;
            border-bottom: solid 1px #f0f0f0;
        }

        .header-navigation-content ul {
            padding: 0;
            margin: 0 0 10px;
            list-style: none;
        }

        .header-navigation-content li {
            padding: 0;
            border: none !important;
        }

            .header-navigation-content li > a {
                display: block;
            }

    /* header navigation description */
    .header-navigation-content-ext {
        padding: 20px 30px 2px;
        background: #fff;
    }

    .header-navigation-description {
        background: #fcfafb;
        margin: -20px 0 -2px -30px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(91, 91, 91, 0.2) inset;
    }

    .header-navigation-content-ext h4,
    .ecommerce .header-navigation-content-ext h4 {
        border: none;
        padding: 10px 0 0;
    }

    .header-navigation .dropdown-menu .header-navigation-content-ext li {
        border: none;
    }

        .header-navigation .dropdown-menu .header-navigation-content-ext li > a {
            padding: 0 0 10px;
            color: #767f88;
            display: inline-block;
        }

            .header-navigation .dropdown-menu .header-navigation-content-ext li > a:hover,
            .header-navigation .dropdown-menu .header-navigation-content-ext li.active > a {
                background: #fff;
                color: #e6400c;
            }

    /* n-level submenu //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
    .header-navigation .dropdown-menu .dropdown-menu {
        left: 101%;
        right: auto;
        top: 4px;
        position: absolute !important;
        box-shadow: 5px 5px #5f6d7b !important;
        width: 370px; /* largura fixa que funciona para o conteúdo */
    }

    .header-navigation .dropdown-menu a {
        position: relative;
    }

    .header-navigation .dropdown-menu .fa {
        position: absolute;
        top: 10px;
        right: 15px;
    }


    /* Quando a página desce e o header fica fixo */
    .page-header-fixed .header-navigation li.menu-search {
        top: 30px !important; /* Reseta o deslocamento */
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }



    /* destaca o submenu pai quando tiver item ativo dentro */
    .dropdown-submenu.active > a,
    .dropdown-submenu:has(.active) > a {
        background-color: #6A236c !important;
        color: #ffdb3d !important;
        font-weight: bold;
    }

    .header-navigation .dropdown-menu > li.active > a,
    .header-navigation .header-navigation-content .header-navigation-col li.active > a {
        background-color: #d7d7d7 !important;
        color: #000 !important;
        font-weight: bold !important;
    }


    /* Pai ativo do submenu */
    .header-navigation .dropdown-menu > li.dropdown-submenu.active > a,
    .header-navigation .dropdown-menu > li.dropdown-submenu:has(.active) > a {
        background-color: #d7d7d7 !important;
        color: #000 !important;
        font-weight: bold !important;
    }

    /*============================== HEADER FIXO ==============================================================================================================================================================*/

    .header {
        position: -webkit-sticky; /* Suporte para Safari */
        position: sticky; /* Faz a mágica de prender no topo */
        top: 0;
        z-index: 9999;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* IMPORTANTE: Remova o padding-top do body! */
    body {
        padding-top: 0 !important;
    }

    /*//////////////////////////////////////////// LUPA ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

    /* Container que vai dentro da <li> para garantir o alinhamento */
    .custom-search-item {
        display: flex;
        height: 100%; /* Garante que ocupe a altura do menu */
        list-style: none;
        padding-top: 0 0px;
        margin: 10px 0 0 60px;
    }

    .custom-search-container {
        background-color: #FFF;
        border: 1px solid #cccccc;
        border-radius: 15px !important; /* Formato de pílula da imagem */
        padding: 0px 15px;
        display: flex;
        align-content: center !important;
        width: 120px; /* Largura fixa */
        height: 20px;
    }

    .custom-search-form {
        display: flex;
        width: 100%;
        align-items: center;
        margin: 0; /* Remove margens padrões de formulários */
    }

    /* Input com fonte preta e sem bordas internas */
    .custom-search-input {
        border: none !important;
        background: transparent !important;
        outline: none !important;
        color: #000000 !important; /* Fonte preta */
        font-size: 12px;
        width: 100%;
        padding: 3px 0;
        align-content: center !important;
    }

        /* Placeholder cinza para contraste */
        .custom-search-input::placeholder {
            color: #666666;
        }

    /* Botão da Lupa */
    .custom-search-btn {
        background: none !important;
        border: none !important;
        cursor: pointer;
        color: #000;
        padding: 0;
        margin-left: 8px;
        font-size: 18px;
        display: flex;
        align-items: center;
        transition: transform 0.2s;
    }

        .custom-search-btn:hover {
            transform: scale(1.3); /* Efeito sutil ao passar o mouse na lupa */
        }


    /* Remove o fundo azul/amarelo do preenchimento automático */
    input.custom-search-input:-webkit-autofill,
    input.custom-search-input:-webkit-autofill:hover,
    input.custom-search-input:-webkit-autofill:focus,
    input.custom-search-input:-webkit-autofill:active {
        /* Isso cria uma sombra interna gigante que "tapa" a cor do navegador com branco */
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
        /* Define a cor do texto para preto */
        -webkit-text-fill-color: #000000 !important;
        /* Mantém a transição de cor suave ou inexistente */
        transition: background-color 5000s ease-in-out 0s;
        height: 20px;
    }

    /* Para navegadores que não são Webkit (Firefox moderno) */
    input.custom-search-input {
        filter: none;
    }

    .topo {
        background: #fff;
        padding: 15px 0;
        margin: 20px 0 10px -80px;
    }

    .logo-principal {
        height: 80px;
        width: auto;
    }

    .banners-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        padding: 0 15px;
    }

    .titulo-plataformas {
        background: #03B80C;
        color: white;
        font-size: 11px;
        width: 70%;
        padding: 3px 20px;
        border-radius: 15px !important;
        margin-bottom: 12px;
        font-weight: bold;
        text-align: center;
        display: table;
    }

    .banners {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

        .banners img {
            height: 40px;
        }

    .tracovertical {
        width: 1px;
        height: 30px;
        background-color: #ccc;
    }

    /* Centralização do 3º Espaço (Redes Sociais) */
    .social-box {
        display: flex;
        flex-direction: column; /* Empilha redes, data e tradutor */
        align-items: center; /* Centraliza tudo no meio do 3º bloco */
        justify-content: center;
    }

    .redes {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
    }

        .redes img {
            height: 25px;
            margin: 0 4px;
        }

    .data {
        font-size: 8px;
        color: #666;
        margin-bottom: 5px;
    }

    /* Ajuste do Google Translate */
    #google_translate_element {
        display: flex;
        justify-content: center;
    }
}

/* ==========================================================================
VERSÃO MOBILE DO MENU (MANTER CORES E DEGRADÊ ORIGINAIS) - 350px a 768px
========================================================================== */
@media (min-width: 350px) and (max-width: 768px) {

    /* 1. Base do Header Mobile (Fundo 100% invisível, mantém apenas o clique do botão) */
    .header {
        position: fixed !important; /* Mantém o botão preso no topo ao rolar a página */
        top: 10px !important; /* Afasta um pouquinho do topo da tela se quiser */
        left: 0 !important;
        width: 100% !important;
        height: 45px !important; /* Altura suficiente para abrigar o botão do menu */
        background: transparent !important; /* MÁGICA: Remove qualquer cor de fundo */
        box-shadow: none !important; /* Remove a sombra cinza antiga */
        z-index: 99999 !important; /* Mantém por cima de tudo para aceitar o clique */
        border: none !important; /* Garante que nenhuma borda apareça */
        margin: 0 !important;
    }

        /* Alinha o botão do menu.png perfeitamente à direita de forma invisível */
        .header .container {
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
            height: 100% !important;
            padding: 0 10px !important; /* Margem da direita para o botão não colar na borda física do celular */
            background: transparent !important;
            box-shadow: none !important;
        }

    /* Oculta logos ou restos que possam vazar para o mobile */
    .site-logo {
        display: none !important;
    }

    /* 2. Estilização do Botão (menu.png) */
    .img-menu-mobi {
        display: inline-block !important;
        height: 36px !important;
        width: auto !important;
        margin-top: 20px;
    }

    .header .mobi-toggler {
        display: inline-block !important;
        float: none !important;
        margin: 0 !important;
        padding: 4px !important;
        border: none !important;
        background: transparent !important; /* Remove o ícone padrão antigo */
        border-radius: 0 !important;
        width: auto !important;
        height: 100% !important;
        cursor: pointer !important;
    }

        .header .mobi-toggler:hover {
            background: transparent !important;
        }

    /* 3. Caixa do Menu Aberto (Vertical caindo do topo) */
    .header-navigation {
        display: none; /* Fechado por padrão */
        position: fixed !important;
        top: 75px !important; /* Abre colado abaixo da barra de 60px */
        left: 0 !important;
        width: 93% !important;
        height: 70% !important;
        margin-left: 3% !important;
        /*overflow-y: auto !important; /* Permite rolar os links se a tela for pequena */
        background: linear-gradient(to left, #2a1a6c, #940341) !important;
        padding: 10px 0 40px 0 !important;
        border-radius: 5px !important;
    }

        /* Injetado pelo JavaScript ao clicar no botão */
        .header-navigation.open-menu {
            display: block !important;
        }

        /* Transforma a lista horizontal em uma coluna vertical limpa */
        .header-navigation ul,
        .header-navigation > ul {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            list-style: none !important;
        }

            /* Alinha cada linha do menu ocupando 100% da largura */
            .header-navigation > ul > li {
                width: 100% !important;
                float: none !important;
                position: relative !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Divisor sutil transparente */
            }

                /* 4. BLINDAGEM DA COR DO TEXTO (Evita que o scroll mude a cor para branco invisível) */
                .header-navigation > ul > li > a,
                .page-header-fixed .header-navigation > ul > li > a,
                .header-navigation ul li a {
                    display: block !important;
                    width: 100% !important;
                    padding: 15px 25px !important;
                    color: #ffffff !important; /* Texto branco padrão sobre o fundo roxo */
                    font-size: 14px !important;
                    font-weight: normal !important;
                    line-height: 20px !important;
                    box-sizing: border-box !important;
                    text-transform: uppercase !important;
                }

                /* Efeito de Hover / Itens Ativos (Mantém o amarelo do seu CSS original) */
                .header-navigation ul > li > a:hover,
                .header-navigation > ul > li.active > a,
                .header-navigation > ul > li.active > a.dropdown-toggle,
                .header-navigation ul > li.active > a {
                    color: #ffdb3d !important; /* Amarelo ouro original */
                    font-weight: bold !important;
                    background-color: rgba(255, 255, 255, 0.05) !important; /* Sutil destaque ao tocar */
                }

        /* 5. Submenus Dropdowns (Secretaria e Departamentos na Vertical) */
        .header-navigation .dropdown-menu {
            position: static !important; /* Remove o comportamento flutuante de desktop */
            float: none !important;
            display: none !important; /* O Bootstrap controla a abertura adicionando a classe .open */
            width: 100% !important;
            background-color: rgba(0, 0, 0, 0.15) !important; /* Fundo levemente mais escuro para diferenciar */
            padding-left: 20px !important;
            box-shadow: none !important;
            border: none !important;
        }

        /* Garante o empurrado vertical quando o item do submenu abre */
        .header-navigation .dropdown.open .dropdown-menu,
        .header-navigation .dropdown-submenu.open .dropdown-menu {
            display: block !important;
        }

        .header-navigation .dropdown-menu li {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

            .header-navigation .dropdown-menu li > a {
                background-color: transparent !important;
                color: #ffffff !important;
                padding: 12px 20px !important;
                font-size: 14px !important;
            }

    /* ==========================================================================
6. RESET AGRESSIVO DA BUSCA - ANULA REGRAS EXTERNAS
========================================================================== */
    .custom-search-item {
        border-bottom: none !important;
        width: 70% !important;
        box-sizing: border-box !important;
        float: none !important; /* Anula floats antigos */
        margin: 12px 0 0 20px !important;
    }

    .custom-search-container {
        width: 70% !important;
        float: none !important;
    }

    .custom-search-form {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        float: none !important;
        position: relative !important;
    }

    .custom-search-input {
        border: none !important;
        background: transparent !important;
        outline: none !important;
        color: #000000 !important;
        font-size: 14px;
        width: 100%;
        padding: 5px 0;
        align-content: center !important;
    }

    .custom-search-btn {
        background: none !important;
        border: none !important;
        cursor: pointer;
        color: #000;
        padding: 0;
        margin-left: 8px;
        font-size: 18px;
        display: flex;
        align-items: center;
        transition: transform 0.2s;
    }

        .custom-search-btn:hover {
            transform: scale(1.3);
        }

    #scrollToTopBtn {
        right: 15px;
    }

    /* Suporte para Bootstrap moderno */
    .header-navigation .dropdown.show > .dropdown-menu,
    .header-navigation .dropdown-submenu.show > .dropdown-menu {
        display: block !important;
    }
}


/* ==========================================================================
FORÇAR APERTURA DOS DROPDOWNS AO PASSAR O MOUSE (DESKTOP)
========================================================================== */
@media (min-width: 769px) {
    /* Quando passar o mouse no item da lista, mostra o menu dropdown */
    .header-navigation ul li.dropdown:hover > .dropdown-menu,
    .header-navigation ul li.dropdown-submenu:hover > .dropdown-menu {
        display: block !important;
        margin-top: 0; /* Garante alinhamento perfeito */
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Opcional: Se o seu tema usa uma animação de fade do Bootstrap, isso garante que ela apareça */
    .header-navigation .dropdown-menu {
        transition: all 0.2s ease;
    }
}

/* DESKTOP */
.header-mobile {
    display: none;
}

/* MOBILE */
@media (max-width: 768px) {

    .header {
        display: none !important; /* esconde o menu antigo */
    }

    .header-mobile {
        display: block;
        position: fixed;
        top: 20px;
        width: 100%;
        z-index: 9999;
        justify-content: flex-end !important; /* joga tudo pra direita */
    }


    .mobi-toggler {
        margin-left: auto;
        display: block;
        justify-content: flex-end !important; /* joga tudo pra direita */
    }

    .mobile-navigation {
        display: none;
        background: linear-gradient(to left, #2a1a6c, #940341);
        margin-top: 0px;
        padding: 20px;
        border-radius: 10px !important;
    }

        .mobile-navigation.open {
            display: block;
        }

        .mobile-navigation ul {
            list-style: none;
            padding: 0;
        }

        .mobile-navigation li {
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .mobile-navigation a {
            color: #fff;
            text-decoration: none;
        }

        .mobile-navigation li.active > a {
            color: #ffdb3d;
            font-weight: bold;
        }

    .custom-search-item {
        border-bottom: none !important;
        width: 70% !important;
        box-sizing: border-box !important;
        float: none !important; /* Anula floats antigos */
        margin: 12px 0 0 0px !important;
    }

    .custom-search-container {
        width: 70% !important;
        float: none !important;
    }

    .custom-search-form {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        float: none !important;
        position: relative !important;
    }

    .custom-search-input {
        border: none !important;
        background: transparent !important;
        outline: none !important;
        color: #000000 !important;
        font-size: 14px;
        width: 100%;
        padding: 5px 0;
        align-content: center !important;
    }

    .custom-search-btn {
        background: none !important;
        border: none !important;
        cursor: pointer;
        color: #000;
        padding: 0;
        margin-left: 8px;
        font-size: 18px;
        display: flex;
        align-items: center;
        transition: transform 0.2s;
    }

    /* MOBILE ALTERAÇÕES - Adicione dentro do @media (max-width: 768px) */

    /* Remove a flutuação absoluta nativa do bootstrap no mobile */
    .mobile-navigation .dropdown-menu {
        display: none; /* Escondido por padrão */
        position: relative !important;
        float: none !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.15) !important; /* Um fundo sutil para diferenciar os submenus */
        border: none !important;
        box-shadow: none !important;
        padding-left: 15px !important; /* Recuo para a direita para dar o efeito de hierarquia */
        margin: 5px 0 0 0 !important;
    }

    /* Quando o pai ganhar a classe .open, exibe o submenu empurrando o conteúdo */
    .mobile-navigation .dropdown.open .dropdown-menu {
        display: block !important;
    }

    /* Ajuste nos links internos do submenu mobile */
    .mobile-navigation .dropdown-menu li {
        border-bottom: none !important; /* Remove as bordas internas para ficar mais limpo */
        padding: 8px 0 !important;
    }

        .mobile-navigation .dropdown-menu li a {
            font-size: 14px !important;
            color: rgba(255, 255, 255, 0.85) !important;
        }


    .breadcrumb-dep li {
        display: inline-flex; /* Mantém o li flexível na horizontal */
        align-items: center; /* Centraliza verticalmente o ponto e o link */
        line-height: 1 !important; /* Reseta alturas de linha que possam empurrar o texto */
    }

        /* Ajuste fino exclusivo no caractere do pontinho */
        .breadcrumb-dep li::first-letter {
            display: inline-block;
            vertical-align: middle;
            margin-top: -2px; /* Empurra levemente o ponto para baixo se ele estiver subindo */
            /* Se no seu layout o ponto estiver muito BAIXO, mude para: margin-top: 2px; */
        }

        .breadcrumb-dep li a {
            margin-left: 6px;
            white-space: normal;
            display: inline-block;
            vertical-align: middle;
        }

    .titulo-departamento {
        font-size: 25px;
    }

    .pagination {
        float: left !important;
        padding-top: 10px;
        margin-bottom: 10px !important
    }

    .tiles {
        display: flex; /* Transforma o container em Flexbox */
        flex-direction: column; /* Alinha os itens em formato de lista (um embaixo do outro) */
        align-items: center; /* CORREÇÃO: Centraliza todos os itens horizontalmente */
        justify-content: center; /* Garante o alinhamento central */
        gap: 15px; /* Cria um espaçamento vertical idêntico entre as tiles */
        width: 100%; /* Garante que o container ocupe toda a largura disponível */
        box-sizing: border-box;
    }

        /* Caso os seus 'TileDouble' tenham propriedades antigas de float, nós as limpamos */
        .tiles > div,
        .tiles > a,
        .tiles .tile {
            float: none !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

    
        .table-publicacoes {
            table-layout: auto !important; /* No celular, deixa ela fluida com a rolagem lateral da div */
            min-width: 600px; /* Garante que os dados fiquem legíveis na rolagem do celular */
        }
    

}