/**
 * MRN - Customizações CSS
 * Ajustes para aproximar a versão preview da versão original
 * Arquivo: templates/mrn4/css/user.css
 */

/* ==========================================================================
   SCROLL SUAVE
   - Ativa scroll suave nativo do navegador
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   0. BREADCRUMBS
   - Navegação de trilha
   ========================================================================== */

.breadcrumbs-wrapper {
    background-color: #f5f5f5;
    padding: 10px 0;
    width: 100%;
    text-align: right;
    margin-top: 80px;
}

.breadcrumbs-wrapper .mod-breadcrumbs__wrapper {
    margin: 0;
}

.breadcrumbs-wrapper .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.breadcrumbs-wrapper .breadcrumb-item {
    font-size: 13px;
    color: #666;
}

.breadcrumbs-wrapper .breadcrumb-item a {
    color: #006129;
    text-decoration: none;
}

.breadcrumbs-wrapper .breadcrumb-item a:hover {
    color: #ff9e5a;
    text-decoration: underline;
}

.breadcrumbs-wrapper .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #999;
    padding: 0 8px;
}

.breadcrumbs-wrapper .breadcrumb-item.active {
    color: #333;
}

.breadcrumbs-wrapper .mod-breadcrumbs__here {
    color: #666;
    font-size: 13px;
}

/* Breadcrumbs inline (dentro de páginas de categoria) */
.breadcrumbs-inline {
    padding: 10px 0;
}

.breadcrumbs-inline .mod-breadcrumbs__wrapper {
    display: inline-block;
}

.breadcrumbs-inline .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.breadcrumbs-inline .breadcrumb-item {
    font-size: 13px;
    color: #666;
}

.breadcrumbs-inline .breadcrumb-item a {
    color: #006129;
}

/* ==========================================================================
   0.1 BANNER FULL-WIDTH DO ARTIGO (TOPO)
   - Imagem de destaque do artigo como banner no topo da página
   ========================================================================== */

.article-banner-fullwidth {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    overflow: hidden;
    max-height: 500px;
}

.article-banner-fullwidth .article-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
    max-height: 520px;
}

/* Ajuste para quando o artigo tem banner - espaçamento do conteúdo */
.com-content-article.item-page {
    padding-top: 40px;
}

/* Quando há breadcrumb antes do artigo, garantir espaçamento */
.breadcrumbs-wrapper + main#content .com-content-article.item-page,
.breadcrumbs-wrapper + main#content .container {
    padding-top: 20px;
}

/* Container do artigo - garantir que fique dentro do container */
.com-content-article .container,
.com-content-article__body {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px 30px;
}

.com-content-article__body iframe {
    border: none;
}

/* Título do artigo após o banner */
.com-content-article .page-header {
    margin-top: 15px;
    padding: 0 15px;
}

.com-content-article .page-header h1,
.com-content-article .page-header h2 {
    color: #212a2f;
    font-size: 42px;
    line-height: 1.2;
}

/* Corpo do artigo */
.com-content-article__body {
    font-size: 18px;
    line-height: 27px;
    color: #212a2f;
    overflow: hidden;
    padding-bottom: 30px;
}

.com-content-article__body p {
    margin-bottom: 20px;
}

.com-content-article__body h2 {
    font-size: 36px;
    color: #212a2f;
    margin-top: 40px;
    margin-bottom: 20px;
}

.com-content-article__body h3 {
    font-size: 28px;
    color: #212a2f;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Imagens dentro do artigo - NÃO full-width */
.com-content-article__body img {
    max-width: 100vw;
    height: auto;
    margin: 20px 0;
}

.com-content-article p {
    margin-bottom: 0;
}

.com-content-article table {
    border-bottom: 1px solid #ddd;
    width: 100% !important;
}

.com-content-article table a {
    color: #006129;
}

.com-content-article table a:hover {
    color: #ff9e5a;
}

/* ==========================================================================
   1. SEÇÃO DO MAPA DOS DESTINOS DA BAUXITA
   - Fundo verde escuro conforme versão original
   ========================================================================== */

/* Container da seção do mapa - seletor genérico para capturar a imagem bauxita-mapa */
.mapa-destinos-section,
.destinos-bauxita {
    background-color: #006129 !important;
    padding: 60px 0;
}

/* Seletor para a imagem do mapa bauxita */
img[src*="bauxita-mapa"] {
    display: block;
    margin: 30px auto;
    max-width: 100%;
    height: auto;
}

/* Container pai da imagem do mapa - aplicar fundo verde */
img[src*="bauxita-mapa"]:not([src*="_old"]) {
    background-color: transparent;
}

/* Classe aplicada via JavaScript ao wrapper do mapa */
.map-destinos-wrapper {
    background-color: #006129 !important;
    padding: 40px 20px !important;
    text-align: center !important;
    margin: 30px 0;
}

.map-destinos-section {
    background-color: #fff;
}

/* Wrapper/section que contém o mapa - fundo verde escuro (CSS :has para navegadores modernos) */
.text-article p:has(img[src*="bauxita-mapa"]),
p:has(img[src*="bauxita-mapa"]),
div:has(> img[src*="bauxita-mapa"]) {
    background-color: transparent !important;
    padding: 40px 20px;
    text-align: center;
}

/* Área do mapa com fundo verde escuro */
.mapa-area,
.mapa-container {
    background-color: #006129;
    padding: 40px 0;
}

/* Container do mapa dos destinos da bauxita */
.map-destinos-wrapper {
    background-color: #006129;
    padding: 40px 0;
    margin: 30px 0;
}

/* Imagem do mapa centralizada */
.mapa-area img,
.mapa-container img,
.destinos-bauxita img,
.map-destinos-wrapper img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Título da seção dos destinos */
.destinos-bauxita h2,
.mapa-destinos-section h2 {
    color: #212a2f;
    font-size: 36px;
    margin-bottom: 20px;
}

/* Texto da seção dos destinos */
.destinos-bauxita p,
.mapa-destinos-section p {
    color: #212a2f;
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 30px;
}

/* ==========================================================================
   2. SEÇÃO SLIDE-LINKS (OPERAÇÃO SEGURA, RECUPERAÇÃO, ETC.)
   - Estilos para a seção verde escura com abas
   ========================================================================== */

.slide-links {
    height: auto;
    min-height: 600px;
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #006129;
}

.slide-links .slider-links-bg {
    background-color: #006129;
}

.holder-slide-links {
    background-color: rgba(33, 42, 47, 0.9);
    min-height: 480px;
    padding: 40px;
}

.holder-slide-links h3 {
    font-size: 28px;
    color: white;
    padding: 20px 26px;
    margin-bottom: 20px;
}

.holder-slide-links .links li a {
    color: #879199;
    font-size: 17px;
    border-bottom: 4px solid transparent;
    padding: 10px 0 10px 43px;
    display: block;
    transition: all 0.3s ease;
}

.holder-slide-links .links li a:hover,
.holder-slide-links .links li a.active {
    color: #fff;
    border-bottom: 4px solid #ff9e5a;
}

.holder-slide-links .description {
    color: white;
    font-size: 16px;
    line-height: 1.6;
    padding: 20px;
}

.holder-slide-links .description p {
    margin-bottom: 20px;
}

.holder-slide-links .btn-saiba-mais,
.holder-slide-links .saiba-como-card {
    background-color: #ff9e5a;
    color: #212a2f;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.holder-slide-links .btn-saiba-mais:hover,
.holder-slide-links .saiba-como-card:hover {
    background-color: #e88a4a;
    color: #fff;
}

/* ==========================================================================
   3. LINK-BOX (LINKS RÁPIDOS)
   - Box lateral verde escuro com links
   ========================================================================== */

.link-box {
    background-color: #212a2f;
    width: 100%;
    color: white;
    text-align: left;
    padding: 20px;
    margin-top: 24px;
    display: block;
    padding-bottom: 20px;
    max-width: 282px;
    float: right;
}

.link-box-title {
    color: #ff9e5a;
    text-transform: uppercase;
    font-size: 10px;
    width: 100%;
    display: block;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ff9e5a;
}

.link-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-box ul li {
    margin-bottom: 12px;
    padding-left: 15px;
    position: relative;
}

.link-box ul li::before {
    content: "•";
    color: #ff9e5a;
    position: absolute;
    left: 0;
}

.link-box a {
    color: white;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-box a:hover {
    color: #ff9e5a;
}

/* ==========================================================================
   4. PRIMEIRA SEÇÃO - AJUSTES DE LAYOUT
   ========================================================================== */

/* Layout com Links Rápidos à direita */
.content-with-sidebar {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.content-with-sidebar .content-main {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    padding: 0 15px;
}

.content-with-sidebar .sidebar-links-rapidos {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 15px;
}

/* Container principal da primeira seção */
.intro-section {
    padding: 60px 0;
}

.intro-section .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.intro-section .content-left {
    flex: 0 0 65%;
    max-width: 65%;
}

.intro-section .content-right {
    flex: 0 0 30%;
    max-width: 30%;
}

/* Título principal */
.intro-section h1,
.page-header h1 {
    color: #212a2f;
    font-size: 42px;
    line-height: 1.2;
}

/* Texto introdutório */
.intro-section p,
.text-article p {
    font-size: 18px;
    line-height: 27px;
    color: #212a2f;
}

/* ==========================================================================
   5. RESPONSIVIDADE
   ========================================================================== */

@media screen and (max-width: 992px) {
    .intro-section .content-left,
    .intro-section .content-right {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .intro-section .content-right {
        margin-top: 30px;
    }
    
    .holder-slide-links {
        min-height: auto;
        padding: 20px;
    }
    
    .slide-links {
        min-height: auto;
    }
    
    /* Layout com sidebar responsivo */
    .content-with-sidebar .content-main,
    .content-with-sidebar .sidebar-links-rapidos {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .content-with-sidebar .sidebar-links-rapidos {
        margin-top: 30px;
    }
}

@media screen and (max-width: 768px) {
    .intro-section h1,
    .page-header h1 {
        font-size: 32px;
    }
    
    .destinos-bauxita h2,
    .mapa-destinos-section h2 {
        font-size: 28px;
    }
    
    /* Banner responsivo */
    .article-banner-fullwidth {
        margin-top: 100px;
        max-height: 300px;
    }
    
    .article-banner-fullwidth .article-banner-image {
        max-height: 300px;
    }
}

/* ==========================================================================
   6. AJUSTES GERAIS DE LAYOUT - APROXIMAR DO ORIGINAL
   ========================================================================== */

/* Espaçamento do main content após header fixo */
/*#content {*/
/*    padding-top: 30px;*/
/*}*/

/* Container do conteúdo principal */
main#content .container {
    padding: 0 15px;
}

main#content .container.pos-padding-1 {
    padding: 50px 20px;
}

/* Títulos das seções */
.section-title,
.mod-articles-category-title {
    font-size: 36px;
    color: #212a2f;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Seções de conteúdo */
.content-section {
    padding: 60px 0;
}

.content-section.bg-white {
    background-color: #fff;
}

.content-section.bg-gray {
    background-color: #f5f5f5;
}

.content-section.bg-dark-green {
    background-color: #006129;
    color: #fff;
}

/* Cards de artigos */
.cards-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.card-item {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 0 15px;
    margin-bottom: 30px;
}

@media (max-width: 992px) {
    .card-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    .card-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Botões */
.btn-mrn {
    background-color: transparent;
    border: 1px solid #212a2f;
    color: #212a2f;
    padding: 12px 30px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-mrn:hover {
    background-color: #212a2f;
    color: #fff;
}

.btn-mrn-orange {
    background-color: #ff9e5a;
    border: 1px solid #ff9e5a;
    color: #212a2f;
}

.btn-mrn-orange:hover {
    background-color: #e88a4a;
    border-color: #e88a4a;
    color: #fff;
}

/* Seção "O valor da bauxita" e "Como trabalhamos" */
.valor-bauxita-section,
.como-trabalhamos-section {
    padding: 60px 0;
}

.valor-bauxita-section .row,
.como-trabalhamos-section .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.valor-bauxita-section .image-col,
.como-trabalhamos-section .image-col {
    flex: 0 0 50%;
    max-width: 50%;
}

.valor-bauxita-section .content-col,
.como-trabalhamos-section .content-col {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 30px;
}

@media (max-width: 768px) {
    .valor-bauxita-section .image-col,
    .valor-bauxita-section .content-col,
    .como-trabalhamos-section .image-col,
    .como-trabalhamos-section .content-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Seção "Como trabalhamos" - estilo com imagem à direita e texto à esquerda */
.como-trabalhamos-section {
    background-color: #006129;
    color: #fff;
}

.como-trabalhamos-section h2,
.como-trabalhamos-section p {
    color: #fff;
}

/* Seção slide-links / abas */
.slide-links-section {
    background-color: #006129;
    padding: 0;
    position: relative;
}

.slide-links-section .slide-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.slide-links-section .slide-content {
    width: 50%;
    padding: 60px;
    background-color: rgba(33, 42, 47, 0.95);
}

.slide-links-section .tabs-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.slide-links-section .tabs-nav li {
    margin-bottom: 15px;
}

.slide-links-section .tabs-nav li a {
    color: #879199;
    font-size: 17px;
    text-decoration: none;
    display: block;
    padding: 10px 20px;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.slide-links-section .tabs-nav li a:hover,
.slide-links-section .tabs-nav li a.active {
    color: #fff;
    border-left-color: #ff9e5a;
}

.slide-links-section .tab-content {
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 992px) {
    .slide-links-section .slide-image {
        position: relative;
        width: 100%;
        height: 300px;
    }
    
    .slide-links-section .slide-content {
        width: 100%;
    }
}

/* ==========================================================================
   7. FIXES PARA JOOMLA 4 - CLASSES BOOTSTRAP
   ========================================================================== */

/* Garantir que clearfix funcione */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Ajuste para row dentro de containers */
.row {
    margin-left: -15px;
    margin-right: -15px;
}

/* Float classes */
.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

/* Ajuste de espaçamento do conteúdo */
main#content {
    margin-top: 0; /* Altura do header + top-bar */
}

/* Quando há banner do artigo, remover margin-top extra */
.article-banner-fullwidth + .com-content-article {
    margin-top: 0;
}

/* Ajustes para página que NÃO tem banner (artigo comum) */
body.view-article main#content .com-content-article:first-child:not(.has-banner) {
    padding-top: 20px;
}

.map-destinos-section {
    max-width: 1140px;
    margin: 0 auto;
}

.mod-custom.custom {
    margin-bottom: 50px;
}

.nav-tabs .nav-link.active {
    background-color: transparent!important;
    border-color: transparent!important;
}

#mod-custom162 {
    background-image: url(/images/bgquemsomos.jpg);
    padding: 95px 0px;
    color: white;
    font-size: 18px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
}

#mod-custom162 h2 {
    color: white;
    border-bottom: 4px solid #ff9e5a;
    float: left;
    padding-right: 50px;
}

#mod-custom162 p {
    clear: both;
    margin-top: 31px;
    background-color: rgba(0, 0, 0, 0.5);
}

#mod-custom208, #mod-custom177 {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1140px;
    display: block;
    min-height: 540px;
}

#mod-custom177 {
    margin-top: 50px;
}

main#content .container.card-img-left-bg-gray {
    padding-top: 30px;
    padding-bottom: 30px;
}

body.itemid-119 .article-banner-fullwidth .article-banner-image {
    object-position: 0 -85px;
}

.card-img-left h1 {
    margin-left: 70px;
    margin-top: 43px;
}

body.itemid-119 .owl-slider-area-relacionadas {
    display: none;
}

/* Ocultar campos personalizados (Custom Fields) em todas as páginas de artigos */
.fields-container,
.com-content-article .fields-container,
dl.fields-container,
.com-content-article dl.article-info,
.com-content-article .article-info dt,
.com-content-article .article-info dd {
    display: none !important;
}

.category-module.mod-list {
    padding: 0;
    clear: both;
}

.category-module.mod-list + .mod-list {
    padding-top: 40px;
    display: flex;
}

.holder-home .mod-list:nth-child(3) {
    padding-bottom: 40px;
}

footer.footer {
    clear: both;
    margin-top: 0;
}

/* ==========================================================================
   8. FIX RESPONSIVO - CAIXA DE BUSCA
   - Corrige largura fixa de 1112px que causava scroll horizontal em mobile
   ========================================================================== */

@media (max-width: 992px) {
    .busca {
        width: 100% !important;
        max-width: 100%;
        position: relative;
        margin-top: 0;
    }

    .box-busca {
        width: 100%;
        max-width: 360px;
        margin-right: 0;
        margin: 0 auto;
    }
}

/* ==========================================================================
   9. MENU MOBILE (SIDEBAR) - MELHORIAS DE UX
   - z-index acima do header
   - Logo centralizada no topo
   - Largura de 80% da tela
   - Cada link em uma linha separada
   ========================================================================== */

/* Sidebar container */
.sidebar {
    z-index: 99999 !important;
    background-color: rgba(8, 52, 13, 0.97) !important; /* Verde escuro com leve transparência */
    padding-top: 0 !important;
    overflow-y: auto;
    max-width: 80% !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Header do sidebar com logo */
.sidebar .sidebar-header {
    background-color: rgba(0, 97, 41, 0.95);
    padding: 20px;
    text-align: center;
    border-bottom: 3px solid #ff9e5a;
    position: relative;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo dentro do sidebar */
.sidebar .sidebar-logo {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.sidebar .sidebar-logo:hover {
    background: none !important;
}

.sidebar .sidebar-logo img {
    width: 140px;
    height: 50px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Botão fechar */
.sidebar .closebtn {
    position: absolute !important;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 28px;
    color: #fff !important;
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    padding: 0 !important;
    border: none !important;
    line-height: 1;
}

.sidebar .closebtn:hover {
    background-color: #ff9e5a !important;
    color: #08340d !important;
}

/* Container do menu */
.sidebar .sidebar-menu {
    padding: 10px 0;
}

/* Forçar cada item em linha separada */
.sidebar .sidebar-menu ul,
.sidebar .sidebar-menu #menuPrincipal,
.sidebar .sidebar-menu .nav {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    width: 100%;
}

.sidebar .sidebar-menu li,
.sidebar .sidebar-menu #menuPrincipal li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Links do menu - cada um em sua linha */
.sidebar .sidebar-menu a,
.sidebar .sidebar-menu #menuPrincipal a,
.sidebar .sidebar-menu .nav-link,
.sidebar .sidebar-menu li a {
    display: block !important;
    width: 100% !important;
    padding: 15px 25px !important;
    font-size: 17px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
    font-weight: 400;
    box-sizing: border-box;
    position: relative;
}

/* Efeito hover nos links */
.sidebar .sidebar-menu a:hover,
.sidebar .sidebar-menu #menuPrincipal a:hover,
.sidebar .sidebar-menu li a:hover {
    background-color: rgba(255, 158, 90, 0.2) !important;
    color: #ff9e5a !important;
    padding-left: 32px !important;
    border-left: 3px solid #ff9e5a;
}

/* Indicador visual no hover */
.sidebar .sidebar-menu li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: #ff9e5a;
    transition: width 0.25s ease;
}

.sidebar .sidebar-menu li a:hover::before {
    width: 3px;
}

/* Item ativo */
.sidebar .sidebar-menu .current.active a,
.sidebar .sidebar-menu li.active a {
    background-color: rgba(255, 158, 90, 0.2) !important;
    color: #ff9e5a !important;
    border-left: 4px solid #ff9e5a;
}

/* Submenus */
.sidebar .sidebar-menu .dropdown-menu,
.sidebar .sidebar-menu ul ul {
    background-color: rgba(0, 0, 0, 0.2);
    display: flex !important;
    flex-direction: column !important;
}

.sidebar .sidebar-menu .dropdown-menu a,
.sidebar .sidebar-menu ul ul a {
    padding-left: 40px !important;
    font-size: 15px !important;
}

/* Botão hambúrguer */
.openbtn1 {
    font-size: 28px !important;
    color: #fff !important;
    margin-top: 28px !important;
    margin-right: 10px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.openbtn1:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Animação suave */
.sidebar {
    transition: width 0.3s ease-in-out !important;
}

/* Overlay com blur quando menu aberto */
body.sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99998;
    animation: fadeInBlur 0.3s ease forwards;
}

/* Impedir scroll quando menu aberto */
body.sidebar-open {
    overflow: hidden;
}

@keyframes fadeInBlur {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* Ajustes para telas pequenas */
@media (max-width: 576px) {
    .sidebar .sidebar-menu a,
    .sidebar .sidebar-menu li a {
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    .sidebar .sidebar-logo img {
        max-width: 120px;
    }

    .openbtn1 {
        margin-top: 25px !important;
        font-size: 26px !important;
    }
}

/* ==========================================================================
   10. BANNER HOME - RESPONSIVO MOBILE
   - Ajustar altura do banner
   - Ocultar dots no mobile
   - Estilizar setas de navegação
   ========================================================================== */

/* Container do banner da home */
.mod_jo_slideshow,
.mod_djimageslider,
#home-full-banner,
[class*="slideshow"],
.flexslider {
    margin-top: 0 !important;
}

/* Banner abaixo do header fixo - Responsivo para tablets e mobile */

/* Tablets grandes e landscape (769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    body {
        padding-top: 120px !important;
    }

    header.header, .top-bar {
        top: 0 !important;
    }
}

/* Tablets portrait / iPad (577px - 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    body {
        padding-top: 115px !important;
    }

    header.header, .top-bar {
        top: 0 !important;
    }
}

/* Mobile (até 576px) */
@media (max-width: 576px) {
    body {
        padding-top: 110px !important;
    }

    header.header, .top-bar {
        top: 0 !important;
    }
}

/* Responsivo do banner */
@media (max-width: 768px) {
    /* Containers principais */
    .owl-slider-area,
    .mod_jo_slideshow,
    .mod_djimageslider,
    #home-full-banner,
    #home-full-banner .mod_jo_slideshow,
    .flexslider,
    .jo-slideshow-wrap,
    #flexslider-95,
    .jslider-image,
    .flexslider .slides,
    .flexslider .slides > li,
    .slides li,
    .slide,
    /* Swiper containers (usado por mod_jo_slideshow) */
    .swiper-container,
    .swiper-wrapper,
    .swiper-slide,
    .mod_jo_slideshow .swiper-container,
    .mod_jo_slideshow .swiper-wrapper,
    .mod_jo_slideshow .swiper-slide,
    /* DJ-ImageSlider containers */
    .djslider-loader,
    .djslider,
    .slider-container,
    .djslider-in,
    .djslider-in li,
    [id^="djslider"],
    [id^="slider-container"] {
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        overflow: visible !important;
        background-color: transparent !important;
    }

    /* Imagens do slider - largura 100% e altura automática */
    .owl-slider-area img,
    .mod_jo_slideshow img,
    .mod_djimageslider img,
    .flexslider img,
    .jo-slideshow-wrap img,
    .slide img,
    .jslider-image img,
    #flexslider-95 img,
    .slides img,
    /* Swiper images */
    .swiper-slide img,
    .swiper-container img,
    .mod_jo_slideshow .swiper-slide img,
    /* DJ-ImageSlider images */
    .djslider img,
    .djslider-in img,
    .dj-image,
    [id^="djslider"] img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
        object-position: center;
        display: block !important;
    }

    /* DJ-ImageSlider navigation */
    .djslider .prev-button,
    .djslider .next-button {
        width: 40px !important;
        height: 40px !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
    }

    /* Ocultar dots do DJ-ImageSlider */
    .navigation-container-custom,
    .navigation-numbers {
        display: none !important;
    }

    /* Swiper navigation para mobile */
    .swiper-button-next,
    .swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        color: #08340d !important;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 16px !important;
        font-weight: bold;
    }

    /* Ocultar paginação Swiper */
    .swiper-pagination {
        display: none !important;
    }

    /* Ocultar dots no mobile */
    .owl-dots,
    .owl-theme .owl-dots,
    .flex-control-nav,
    .flex-control-paging,
    .jo-slideshow-pager,
    .slider-dots,
    .slides-pagination {
        display: none !important;
    }

    /* Setas de navegação - estilo mobile */
    .owl-nav,
    .flex-direction-nav,
    .jo-slideshow-nav {
        display: flex !important;
    }

    button.owl-prev,
    button.owl-next,
    .owl-nav button,
    .flex-prev,
    .flex-next,
    .jo-slideshow-prev,
    .jo-slideshow-next {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%);
        width: 40px !important;
        height: 40px !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        color: #08340d !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 100;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }

    button.owl-prev,
    .flex-prev,
    .jo-slideshow-prev {
        left: 10px !important;
    }

    button.owl-next,
    .flex-next,
    .jo-slideshow-next {
        right: 10px !important;
    }

    button.owl-prev:hover,
    button.owl-next:hover {
        background-color: #ff9e5a !important;
        color: #fff !important;
    }

    /* Ajustar texto do slide */
    .slide-desc-box,
    .slide-title,
    .slide-desc {
        padding: 10px 15px !important;
    }

    .slide-title,
    .span-js-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .slide-desc span {
        font-size: 14px !important;
    }

    .read-more-slider {
        margin-top: 15px !important;
    }

    .read-more-slider a {
        padding: 8px 20px !important;
        font-size: 11px !important;
    }
}

/* Telas muito pequenas */
@media (max-width: 480px) {
    button.owl-prev,
    button.owl-next {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }

    button.owl-prev {
        left: 5px !important;
    }

    button.owl-next {
        right: 5px !important;
    }

    .slide-title,
    .span-js-title {
        font-size: 18px !important;
    }
}