/*!
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Version: 0.0.1
Text Domain: divi-child 
Description: Child Theme to edit DIVI Theme.
Author: Patropi Comunica
Author URI: http://www.patropicomunica.com.br
Tags: responsive-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Estilos do Campo de Busca */
.wrapper-filtro-indicadores {
    position: relative;
    width: 100%;
}

#input-filtro-indicadores {
	width: 100%;
	border-radius: 8px;
	background-color:transparent;
	border: 1px solid #FFF;
    color: #ffffff;
    padding: 10px 35px 10px 15px; /* Espaço na direita para o X */
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

#input-filtro-indicadores::placeholder {
    color: #ffffff;
}

#input-filtro-indicadores:focus {
    border-color: #6a748c;
}

/* Estilos do "X" de limpar */
#limpar-filtro-indicadores {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c96a8;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: color 0.2s ease;
}

#limpar-filtro-indicadores:hover {
    color: #ffffff;
}

/* Estilos básicos para a lista */
#lista-termos-indicadores {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    /* Força o alinhamento à esquerda via flexbox para combater o Divi */
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important; 
}

.item-indicador {
    margin-bottom: 10px;
    display: block !important; /* Mantém o display block para fixar o layout */
    text-align: left !important;
    width: 100%;
}

/* Nova regra que o JavaScript vai usar para esconder os itens */
.item-indicador.escondido {
    display: none !important; /* Tem maior especificidade que o bloco acima */
}

.item-indicador a {
    color: #ffffff !important; 
    text-decoration: none;
    font-size: 16px;
    transition: opacity 0.3s ease;
    display: block; 
}

.item-indicador a:hover {
    color: #E3A725 !important;
}

/* 1. Transforma o container do menu em Flexbox e aplica o Gap */
.et-menu-nav > ul.et-menu {
    display: flex;
    align-items: center;
    gap: 40px; /* Define o espaçamento exato entre os links. Ajuste conforme o Figma */
}

/* 2. Zera os paddings nativos do Divi nos itens da lista */
.et-menu-nav > ul.et-menu > li {
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: flex;
}

/* 3. Prepara a tag <a> para receber a linha com a largura exata do texto */
.et-menu-nav > ul.et-menu > li > a {
    position: relative;
    padding-bottom: 8px !important; /* Controla a distância entre o texto e a linha azul */
    display: inline-block;
}

/* 4. Cria a linha azul invisível (largura 0) aguardando o hover */
.et-menu-nav > ul.et-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0; /* Inicia oculta */
    height: 4px; /* Espessura da linha (ajuste conforme o Figma) */
    background-color: #035d8f; /* Substitua pelo HEX exato do azul do seu projeto */
    transition: width 0.3s ease-in-out; /* Animação suave de preenchimento */
}

/* 5. Aciona a linha azul no Hover e no item da Página Atual (Current Page) */
.et-menu-nav > ul.et-menu > li:hover > a::after,
.et-menu-nav > ul.et-menu > li.current-menu-item > a::after {
    width: 100%; /* A linha cresce exatamente até o limite do texto */
}

/* AJUSTANDO SETAS DOS SPINNER DOS EIXOS */
.arrows-top-right .et_pb_group_carousel_arrow_next{
  position:absolute;
  top:-45px;
  left: 60px;
  width:45px;
}

.arrows-top-right .et_pb_group_carousel_arrow_prev{
  position:absolute;
  top:-45px;
  left: 0;
  width:45px;
}

/* 1. Libera as caixas do carrossel para deixarem o 3º card aparecer */
.meu-carrossel-25 .et_pb_group_carousel_container,
.meu-carrossel-25 .et_pb_group_carousel_track {
    overflow: visible !important;
}

/* 2. A MÁSCARA: Corta o vazamento na esquerda (clones) e libera na direita (3º card) */
.meu-carrossel-25 {
    clip-path: inset(-70px -100vw -50px 0) !important;
}

/* 3. Impede barra de rolagem horizontal na página inteira */
body {
    overflow-x: hidden;
}



/* ========================================================
   1. MENU PRINCIPAL (HORIZONTAL): LAYOUT E EFEITO HOVER
   ======================================================== */

/* Transforma o container do menu em Flexbox e aplica o espaçamento */
.et-menu-nav > ul.et-menu {
    display: flex;
    align-items: center;
    gap: 40px; 
}

/* Zera os paddings nativos do Divi nos itens da lista para isolar a largura da palavra */
.et-menu-nav > ul.et-menu > li {
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: flex;
}

/* Prepara a tag <a> para receber a linha com a largura exata do texto */
.et-menu-nav > ul.et-menu > li > a {
    position: relative;
    padding-bottom: 8px !important; 
    display: inline-block;
}

/* Linha azul invisível aguardando o hover (::after) */
.et-menu-nav > ul.et-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0; 
    height: 4px; 
    background-color: #035d8f; 
    transition: width 0.3s ease-in-out;
}

/* Aciona a linha azul no Hover e no item da Página Atual */
.et-menu-nav > ul.et-menu > li:hover > a::after,
.et-menu-nav > ul.et-menu > li.current-menu-item > a::after {
    width: 100%;
}

/* ========================================================
   2. MEGA MENU: SETA DE DROPDOWN FLUTUANTE (::BEFORE)
   ======================================================== */

/* Garante zero padding lateral para a linha azul não esticar além do texto */
.et-menu-nav > ul > li.mega-menu > a {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Ícone de seta flutuando fora da caixa do link para usar o espaço do GAP */
.et-menu-nav > ul > li.mega-menu > a::before {
    content: '\33'; /* Seta do Divi */
    font-family: 'ETmodules';
    position: absolute;
    right: -22px; /* Joga a seta para fora da área que receberá a linha inferior */
    top: 0;
    bottom: 8px; 
    margin: auto;
    height: 26px; 
    font-size: 22px;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Anima a seta girando 180 graus quando ativado */
.et-menu-nav > ul > li.mega-menu.is-hovered > a::before {
    transform: rotate(180deg);
}

/* ========================================================
   3. MEGA MENU: SEÇÕES DO DIVI (ANIMAÇÃO DE DESLIZAR)
   ======================================================== */

/* Âncora no Header */
.header-mega-menu-parent {
    position: relative !important;
}

/* Prepara a âncora do header para receber a animação de forma fluida */
.header-mega-menu-parent {
    transition: box-shadow 0.3s ease-in-out !important;
		& img{
			transition:all 0.3s ease !important;
			height: 68px;
			width:auto;
		}
}

/* Classe dinâmica injetada via JS que aplica o sombreamento */
.header-mega-menu-parent.is-scrolled {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) !important;
	  height: 95px !important;	
	  transition: all 0.3s ease !important;
	
		& img{
			height:50px;
			width:auto;
		}
}

@media (max-width:768px){
	.header-mega-menu-parent.is-scrolled {
		height: 80px !important;	
	}
}

/* Estado oculto padrão das seções */
[class*="submenu-"] {
    position: absolute !important;
    top: 100%; 
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s ease-in-out;
    pointer-events: none; 
}


header.et-l--header{
	position: fixed !important;
	top:0px !important;
	left:0px !important;
	width:100% !important;
	z-index: 999999;
}

/* Ativação via JS */
[class*="submenu-"].is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); 
    pointer-events: auto;
}

/* Adiciona uma transição suave a todas as rows mobile */
[class*="mobile-menu-"] {
	margin-left:100% !important;
    transition: margin-left 0.4s ease-in-out !important;
}

@media only screen and (max-width: 767px) {
    /* O 'body' e a junção das classes garantem a vitória na especificidade */
    body .et_pb_section.recipt-menu-mobile {
        margin-left: 100% !important;
        transition: margin-left 0.4s ease-in-out !important;
    }
	/* A classe que o JavaScript injeta para trazer a row para a tela */
	body .et_pb_section.recipt-menu-mobile.menu-mobile-visivel {
		margin-left: 0% !important;
	}
}

[class*="mobile-menu-"].menu-mobile-visivel {
    margin-left: 0% !important;
}



/* 1. Gavetas escondidas fora da tela (Regra Base) */
body .et_pb_section.recipt-menu-mobile{
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 999999 !important; /* Cobre o cabeçalho sticky */
    overflow-y: auto !important;
    background-color: #ffffff;
    
    transform: translateX(115%) !important;
    margin-left: 0 !important; 
    transition: transform 0.4s ease-in-out !important;
}

body .et_pb_section.recipt-menu-mobile ul{
    gap:0px !important;
}

body .et_pb_section.recipt-menu-mobile li{
    border-bottom:1px solid #ddd;
}

body .et_pb_section.recipt-menu-mobile li a{
    width:95%;
    text-align: left;
    padding-top:3px;
    padding-bottom:13px !important;
}

body .et_pb_section.mobile-menu{
    position: fixed !important;
    top: 0px !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 999999 !important; /* Cobre o cabeçalho sticky */
    overflow-y: auto !important;
    background-color: #ffffff;
    
    transform: translateX(100%) !important;
    margin-left: 0 !important; 
    transition: transform 0.4s ease-in-out !important;
}

/* 1. Gavetas escondidas fora da tela (Regra Base) */
body .et_pb_row[class*="mobile-menu-"] {
    position: fixed !important;
    top: 0px !important;
    left: 0 !important;
    z-index: 999999 !important; /* Cobre o cabeçalho sticky */
    overflow-y: auto !important;
    background-color: #ffffff;
    height: auto !important;
    transform: translateX(100%) !important;
    margin-left: 0 !important; 
    transition: transform 0.4s ease-in-out !important;
}


/* 2. Estado Visível (Agora com a mesma especificidade da regra base!) */
body .et_pb_section.recipt-menu-mobile.menu-mobile-visivel,
body .et_pb_section.mobile-menu.menu-mobile-visivel,
body .et_pb_row[class*="mobile-menu-"].menu-mobile-visivel {
    transform: translateX(0) !important;
}

/* 3. Trava do scroll do fundo */
body.travar-scroll-mobile {
    overflow: hidden !important;
}


/* ========================================================
   4. AJUSTANDO MENUS VERTICAIS (Regras de Comportamento)
   * Atenção: Regras mantidas integralmente e intocadas.
   ======================================================== */

/* 1. Força largura total na cadeia de containers do Divi */
.menu-vertical-divi5 .et_pb_menu_inner_container,
.menu-vertical-divi5 .et_pb_menu__wrap,
.menu-vertical-divi5 .et_pb_menu__menu,
.menu-vertical-divi5 .et-menu-nav,
.menu-vertical-divi5 .et-menu.nav,
.menu-vertical-divi5 a,
.menu-vertical-divi5 li{
    width: 100% !important;
    display: flex !important;
}

/* 2. Empilha a lista principal no Desktop e Mobile */
.menu-vertical-divi5 .et_pb_menu__menu ul.et-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Alinhamento dos itens (left) */
    width: 100% !important;
    padding: 0 !important;
}

/* 3. Limpa o padding lateral nativo do Divi nos itens */
.menu-vertical-divi5 .et_pb_menu__menu ul.et-menu > li {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
    padding-bottom: 10px !important; /* Espaço entre os links */
}

/* 4. Comportamento no Mobile (Até 980px) */
@media (max-width: 980px) {
    /* Mata a estrutura inteira do menu mobile (hambúrguer) */
    .menu-vertical-divi5 .et_mobile_nav_menu {
        display: none !important;
    }
    
    /* Ressuscita o menu desktop para aparecer nas telas pequenas */
    .menu-vertical-divi5 .et_pb_menu__menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}



/* SISTEMA DE CORES E CLASSES */

.eixo1-cor{
	&.font-color *{color: #778995 !important;}
    &.button-color{color: #778995 !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #778995 !important;      
        text-align: center;
        color:#fff !important; 
    }
}
.eixo2-cor{
	&.font-color *{color: #778995 !important;}
    &.button-color{color: #778995 !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #778995 !important;      
        text-align: center;
        color:#fff !important; 
    }
}
.eixo3-cor{
	&.font-color *{color: #CD366C !important;}
    &.button-color{color: #CD366C !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #CD366C !important;      
        text-align: center;
        color:#fff !important; 
    }
}
.eixo4-cor{
	&.font-color *{color: #E3A725 !important;}
    &.button-color{color: #E3A725 !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #E3A725 !important;      
        text-align: center;
        color:#fff !important; 
    }
}
.eixo5-cor{
	&.font-color *{color: #88241C !important;}
    &.button-color{color: #88241C !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #88241C !important;      
        text-align: center;
        color:#fff !important; 
    }
}
.eixo6-cor{
	&.font-color *{color: #128769 !important;}
    &.button-color{color: #128769 !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #128769 !important;      
        text-align: center;
        color:#fff !important; 
    }
}
.eixo7-cor{
	&.font-color *{color: #D35641 !important;}
    &.button-color{color: #D35641 !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #D35641 !important;      
        text-align: center;
        color:#fff !important; 
    }
}
.eixo8-cor{
	&.font-color *{color: #084F5D !important;}
    &.button-color{color: #084F5D !important; }	
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #084F5D !important;      
        text-align: center;
        color:#fff !important; 
    }
}
.eixo9-cor{
	&.font-color *{color: #035D8F !important;}
    &.button-color{color: #035D8F !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #035D8F !important;      
        text-align: center;
        color:#fff !important; 
    }
}
.eixo10-cor{
	&.font-color *{color: #778995 !important;}
    &.button-color{color: #778995 !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #778995 !important;      
        text-align: center;
        color:#fff !important; 
    }
}

.eixoInativo-cor{
	&.font-color *{color: #404040 !important;}
    &.button-color{color: #404040 !important; }
	&.background-color p{
        display:flex; 
		width: fit-content;
        padding:5px 10px 5px 10px !important;
        border-radius:7px;
        background-color: #404040 !important;      
        text-align: center;
        color:#fff !important; 
    }
}


/* 1. WRAPPER: A única borda externa real */
.devwppro-tabela-wrapper {
    max-width: 1500px !important;
    margin: 0 auto;
    border-radius: 15px;
    border: 2px solid #D0D0D0; /* Borda externa da tabela */
    overflow: hidden;
    background-color: #fff;
    /* Correção do gap inferior: obriga o wrapper a abraçar a tabela sem sobras */
    display: flex; 
}

/* 2. TABELA BASE: Remoção de margens fantasmas do tema */
.devwppro-tabela-fontes {
    width: 100%;
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 !important; /* Zera a margem que causa o fundo branco no rodapé */
}

/* 3. TRANSIÇÕES E HOVER */
.devwppro-tabela-fontes tr,
.devwppro-tabela-fontes td,
.devwppro-tabela-fontes th {
    transition: 0.3s all ease;
}

.devwppro-tabela-fontes tbody tr:hover {
    background-color: #F4F4F4;
}

.devwppro-tabela-fontes tbody tr:hover td {
    font-weight: 500;
}

/* 4. ESTILOS INTERNOS DAS CÉLULAS */
.devwppro-tabela-fontes td {
    border: 2px solid #D0D0D0 !important; /* Sua borda de teste */
    font-weight: 400;
    padding: 20px 25px !important;
}

.devwppro-tabela-fontes th {
    border: 2px solid #D0D0D0 !important;
    background-color: #F4F4F4;
    text-align: center;
    padding: 20px 25px !important;
}

.devwppro-tabela-fontes td:last-child {
    text-align: center;
}

.devwppro-tabela-fontes th:nth-child(1),
.devwppro-tabela-fontes th:nth-child(2) {
    width: 45% !important;
}

/* 5. RESPONSIVIDADE MOBILE: Rolagem Horizontal */
@media (max-width: 768px) {
    /* Altera o wrapper para permitir rolagem e desativa o flex que trava a largura */
    .devwppro-tabela-wrapper {
        display: block !important; 
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch; /* Suaviza a rolagem no iOS */
    }

    /* Força a tabela a expandir de acordo com o conteúdo, ignorando o limite da tela */
    .devwppro-tabela-fontes {
        width: max-content !important; 
    }

    /* Cancela a regra de 45% do desktop para liberar as colunas */
    .devwppro-tabela-fontes th:nth-child(1),
    .devwppro-tabela-fontes th:nth-child(2) {
        width: auto !important;
    }

    /* Define uma largura mínima amigável para as células não espremerem o texto */
    .devwppro-tabela-fontes th,
    .devwppro-tabela-fontes td {
			  max-width:220px !important;
        min-width: 100px !important; /* Você pode aumentar este valor se quiser colunas mais largas */
    }
}

/* 5. A MÁGICA: Remoção das bordas nas extremidades 
   Isso impede que as bordas quadradas da tabela conflitem com o arredondamento do wrapper.
*/

/* Apaga a borda superior do cabeçalho */
.devwppro-tabela-fontes tr:first-child th {
    border-top: none !important;
}

/* Apaga a borda inferior da última linha */
.devwppro-tabela-fontes tr:last-child td {
    border-bottom: none !important;
}

/* Apaga a borda esquerda da primeira coluna inteira */
.devwppro-tabela-fontes th:first-child,
.devwppro-tabela-fontes td:first-child {
    border-left: none !important;
}

/* Apaga a borda direita da última coluna inteira */
.devwppro-tabela-fontes th:last-child,
.devwppro-tabela-fontes td:last-child {
    border-right: none !important;
}

/* Container Principal: Loop grid de indicadores */
.divi-custom-loop-grid {
    display: flex !important;
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    justify-content: center; /* CENTRALIZA os itens da última linha */
    gap: 30px; 
    align-items: stretch; /* Força os cards da mesma linha a terem a mesma altura */
}

/* Opcional: Garante que o card ocupe 100% da altura da sua célula no grid */
.divi-custom-loop-grid .divi-loop-item-card {
    display: flex;
    width: calc(33.333% - 20px);
}

/* Responsividade: Tablet (2 colunas) */
@media (max-width: 980px) {
    .divi-custom-loop-grid > .divi-loop-item-card {
        width: calc(50% - 15px);
    }
}

/* Responsividade: Mobile (1 coluna) */
@media (max-width: 768px) {
    .divi-custom-loop-grid > .divi-loop-item-card {
        width: 100%;
    }
}

/* Container que alinha as pills horizontalmente */
.loop-categorias-wrapper {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar a linha se houver muitas categorias */
    gap: 8px; /* Espaço entre as pills */
    align-items: center;
    margin: 0px 0; /* Margem superior e inferior para afastar de outros textos */
}

/* O design da Pill */
.cat-pill {
    background-color: #D35641;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 8px; /* Define o formato arredondado (Pill) */
    text-decoration: none;
    line-height: 1.2;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Efeito Hover na Pill */
.cat-pill:hover {
    background-color: #092027;
    color: #8CF871;
}

/* Container que engloba as Pills e a Pesquisa */
.pills-bar-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    width: 100%;
}

/* Container apenas das Pills */
.pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Estilo Individual das Pills */
.pill-item {
    background-color: #D35641;
    color: #ffffff !important;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    padding: 8px 22px;
    border-radius: 30px;
    text-decoration: none;
    line-height: 1.2;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover e Pill Ativa */
.pill-item:hover,
.pill-item.active {
    background-color: #035D8F;
    color: #ffffff !important;
}

/* Container do Input de Pesquisa */
.pills-search {
    flex-grow: 1; /* Faz a barra de pesquisa esticar para ocupar o espaço livre, como na imagem */
    min-width: 280px; 
}

/* O Formulário de Pesquisa Customizado */
.pills-search-form {
    display: flex;
    align-items: center;
    border: 2px solid #035D8F;
    border-radius: 30px;
    padding: 2px 15px 2px 20px;
    background-color: transparent;
    height: 42px; /* Alinhado com a altura média das pills */
    box-sizing: border-box;
}

.pills-search-input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333333;
    width: 100%;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Cor e estilo da lupa */
.pills-search-submit {
    background: transparent;
    border: none;
    color: #035D8F;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/* Container Principal */
.mobile-nav-wrapper {
    width: 100%;
    margin: 15px 0;
    font-family: 'Roboto', sans-serif;
    position: relative;
}

/* Linha do Hamburger + Search */
.mobile-nav-top {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Estilo do Botão Hamburger */
.mobile-hamburger-btn {
    background: transparent;
    border: 2px solid #D35641;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    width: 48px;
    flex-shrink: 0;
    transition: background 0.3s;
}

.mobile-hamburger-btn:active {
    background-color: #fcebe8;
}

/* Formulário de Pesquisa Mobile */
.mobile-search-form {
    display: flex;
    align-items: center;
    border: 2px solid #035D8F;
    border-radius: 30px;
    padding: 2px 15px 2px 20px;
    background-color: transparent;
    height: 42px;
    flex-grow: 1; /* Faz a barra expandir */
    box-sizing: border-box;
}

.mobile-search-input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333333;
    width: 100%;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-search-submit {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/* Dropdown da Lista de Categorias */
.mobile-cat-dropdown {
    display: none; /* Oculto por padrão */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-top: 10px;
    padding: 10px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: absolute; /* Sobrepõe os posts abaixo em vez de empurrá-los */
    width: 100%;
    z-index: 100;
}

.mobile-cat-dropdown.show {
    display: block; /* Classe injetada pelo JS */
    animation: fadeInDown 0.3s ease;
}
/* Reseta o espaçamento e remove as bolinhas que o Divi força nas listas */
.mobile-cat-list {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mobile-cat-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-cat-list li:last-child {
    border-bottom: none;
}

.mobile-cat-link {
    display: block;
    padding: 12px 20px; /* Ajuste aqui o espaçamento interno do link */
    color: #333333;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    transition: all 0.2s;
    text-align: left; /* Garante que o texto fique encostado na esquerda */
}

/* Mantém o estilo da Categoria Ativa e do Hover que já estava funcionando */
.mobile-cat-link:hover,
.mobile-cat-link.active {
    color: #035D8F;
    font-weight: 700;
    background-color: #f5f9fc;
}

/* Animação suave para abrir o menu */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Configuração do Grid Masonry */
.grid-personalizado {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 40px !important; /* Espaçamento entre colunas fica mantido */
    
    /* A SOLUÇÃO: Zera o gap vertical para impedir a explosão matemática */
    row-gap: 0px !important; 
    
    grid-auto-rows: 5px !important; 
    grid-auto-flow: dense !important;
    align-items: start !important;
    align-content: start !important;
}

/* Força os grupos a ignorarem a posição absoluta do Divi */
.grid-personalizado > .et_pb_group {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important; 
}

/* Itens que ocupam 2 colunas */
.grid-personalizado > .span-duas-colunas {
    grid-column: span 2 !important;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 980px) {
    .grid-personalizado { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-personalizado > .span-duas-colunas { grid-column: span 2 !important; }
}

@media (max-width: 767px) {
    .grid-personalizado { grid-template-columns: 1fr !important; }
    .grid-personalizado > .span-duas-colunas { grid-column: span 1 !important; }
}