.gestao-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 100px;
	background-color: #f8f8f8;
}

.ouvidoria-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 60px 0px;
	background-color: #ffffff;
}

.info-container {
	max-width: 1540px;
	margin: 0 auto;
	padding: 60px 200px;
	background-color: #f8f8f8;
}

.menu-content {
    max-height: 0; /* Começa "espremido" (escondido) */
    overflow: hidden; /* Esconde o conteúdo que transborda */
    background-color: #ffffff; /* Fundo branco para os itens do menu */
    padding: 0 15px; /* Padding vertical 0 inicial, horizontal de 15px */
	box-shadow: inset 1px -1px 5px rgba(0, 0, 0, 0.2);
    
    /* Transições suaves para altura, padding e cor da borda */
    transition: max-height 0.4s ease-out, 
                padding 0.4s ease-out, 
                border-color 0.4s ease-out;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
}

/* Estilos para o container das colunas do menu (NOVO) */
.menu-columns-container {
	width: 100%;
    display: flex; /* Ativa o Flexbox para o layout em colunas */
    justify-content: center; /* Centraliza as colunas horizontalmente */
    align-items: flex-start; /* Alinha os itens no topo (os títulos das colunas) */
    padding: 15px 0; /* Adiciona um pouco de espaçamento interno ao container das colunas, horizontal 0 */
	justify-self: center;
}

/* Estilos para cada coluna do menu (NOVO) */
.menu-column {
    flex: 1; /* Faz com que cada coluna ocupe a mesma largura disponível */
    text-align: center; /* Centraliza o conteúdo dentro de cada coluna (título e links) */
    padding: 0 50px; /* Adiciona um pouco de espaçamento horizontal dentro de cada coluna */
}

/* Estilo para os títulos das colunas (NOVO) */
.menu-column h3 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 0; /* Remove a margem superior padrão dos h3 */
    margin-bottom: 10px; /* Adiciona espaço abaixo do título */
    color: #003366; /* Cor do título (opcional, para combinar com o cabeçalho) */
}

/* Estilos para as listas de links dentro de cada coluna */
.menu-content ul { /* Mantido para garantir que as listas dentro do .menu-content funcionem */
    list-style: none; /* Remove os marcadores de lista */
    padding: 0;
    margin: 0;
}

/* Estilos para as listas de links DENTRO das COLUNAS do menu (NOVO) */
.menu-column ul {
    list-style: none; /* Remove os marcadores de lista */
    padding: 0;
    margin: 0;
}

.menu-column ul li {
    margin-bottom: 5px; /* Adiciona um pouco de espaço entre os links */
}

.menu-column ul li a {
	font-size: 13px;
    display: block; /* Faz o link ocupar a largura da coluna */
    padding: 2px 0; /* Espaçamento vertical nos links */
    color: #010101; /* Cor dos links */
    text-decoration: none;
    transition: color 0.2s ease;
}

.menu-column ul li a:hover {
    color: #004080; /* Cor ao passar o mouse (opcional) */
}

/* Remover as bordas inferiores dos links que estavam no estilo anterior do menu, 
   aplicando-as aos links dentro de QUALQUER lista no menu-content */
.menu-content ul li a {
    border-bottom: none;
}

/* Remover a margem inferior da última lista de links que estava no estilo anterior */
.menu-content ul li:last-child a {
    margin-bottom: 0;
}


/* Conteúdo do menu quando está no estado expandido */
.menu-content.expanded {
    max-height: 500px; /* Um valor suficientemente grande para o conteúdo do seu menu */
    padding: 15px; /* Adiciona padding quando expandido (isso afeta o container das colunas) */
	/* background-color: #f9f9f9; */
	background-color: #ffffff;
	box-shadow: inset 1px -1px 5px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------------Gestão-------------------------------------------------------------------------------- */

.recursos-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    justify-content: center;
    transition: margin-bottom 0.7s ease-out;
    margin-bottom: -70px;
}

/* Regra para quando o container está expandido */
.recursos-grid-container.show-all {
    margin-bottom: 0px !important;
}

/* Cards individuais do 6º em diante (escondidos por padrão) */
.recursos-grid-container .recursos-card:nth-child(n + 6) {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative; 
}

/* Cards individuais do 6º em diante (visíveis quando o container tem 'show-all') */
.recursos-grid-container.show-all .recursos-card:nth-child(n + 6) {
    max-height: 250px;
    opacity: 1;
    margin-top: 0px !important;
    padding-top: initial !important;
    padding-bottom: initial !important;
}

.recursos-card {
  /* Garante que a div pai seja a 'referência' para o posicionamento absoluto */
  position: relative !important;
  border-radius: 16px;
  display: inline-block !important; 
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  /* Ou block, se preferir cada card em linha separada */
  overflow: hidden;
	transition: max-height 0.7s ease-out,
                opacity 0.7s ease-out,
                margin-top 0.7s ease-out,
                padding-top 0.7s ease-out,
                padding-bottom 0.7s ease-out;
}

.recursos-card:hover{
		  transform: scale(1.1);
			transition: 0.5s
}

.recursos-card .overlay {
  /* Faz a div ficar por cima, sem alterar o tamanho da div pai */
  font-size: small;
  position: absolute !important;
  pointer-events: none;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 10px;
  border-radius 2px
  /* Se quiser um plano de fundo e texto centralizado: */
  background: rgba(0, 0, 0, 0.5) !important;
  background-color: #052852;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 2 !important; /* Caso precise ficar acima da imagem */
}

.recursos-card:hover .overlay {
  opacity: 1 !important;

}

/* Para escurecer a imagem no hover */
.recursos-card img {
  transition: filter 0.3s ease !important;
}

/*Deixar mais escuro ou mais claro*/
.recursos-card:hover img {
  filter: brightness(0.5) !important;

}

/* --------------------------------------------------------------------------------Mais informações-------------------------------------------------------------------------------- */

.recursos-grid-container-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    justify-content: center;
    transition: margin-bottom 0.7s ease-out;
    margin-bottom: 70px;
}

.container-informacoes-v2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centraliza os cards */
    gap: 20px; /* espaço entre os cards, ajuste como quiser */
    margin-bottom: 80px; /* ou o valor que preferir */
}

.recursos-card-v2 {
    position: relative !important;
    border-radius: 16px;
    display: inline-block !important;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: 
        max-height 0.7s ease-out,
        opacity 0.7s ease-out,
        margin-top 0.7s ease-out,
        padding-top 0.7s ease-out,
        padding-bottom 0.7s ease-out;
}

.recursos-card-v2:hover {
    transform: scale(1.1);
    transition: 0.5s;
}

.recursos-card-v2 .overlay-v2 {
    font-size: small;
    position: absolute !important;
    pointer-events: none;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 10px;
    border-radius: 2px;
    background-color: #052852;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 2 !important;
}

.recursos-card-v2:hover .overlay-v2 {
    opacity: 1 !important;
}

.recursos-card-v2 img {
    transition: filter 0.3s ease !important;
}

.recursos-card-v2:hover img {
    filter: brightness(0.5) !important;
}

/* --------------------------------------------------------------------------------Ouvidoria-------------------------------------------------------------------------------- */
	

.card-ouvidoria {
 	width: 180px;
	height: 180px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	border: 2px solid #ff4d4f;
	text-align: center;
	border-radius: 12px;
	font-family: 'Rubik', sans-serif;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	transition: all 0.3s ease-in-out; 
	transition: background-color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}

/* Border */
.card-denuncia{
	border: 2px solid #FF4350;
}

.card-elogio{
	border: 2px solid #00D24F;
}

.card-reclamacao{
	border: 2px solid #e66a2c;
}

.card-solicitacao{
	border: 2px solid #6c5da3;
}

.card-sugestao{
	border: 2px solid #11aec9;
}

.card-informacao{
	border: 2px solid #f0c800;
}


.card-ouvidoria h3{
	margin: 0;
	color: #0d285f;
	font-family: 'Rubik', sans-serif;
	transition: color 0.3s ease-in-out;
}

.card-ouvidoria p {
  	font-size: 12px;
  	margin-top: 4px;
	font-family: 'Rubik', sans-serif;
	margin: 4px 0 0;
	color: #757575; 
	transition: color 0.3s ease-in-out;

}

.card-ouvidoria img {
	transition: filter 0.3s ease-in-out;
}


.card-ouvidoria{
	transition: filter 0.3s ease-in-out;
}



/* Animações dentro do background do card*/

.card-denuncia:hover {
	transition: 0.3s ease-in-out;
	/*background-color: #FF4350;*/
	background-color: #002352;
	border-color: #002352 !important;
}

.card-elogio:hover{
	transition: 0.4s ease-in-out;
	/*background-color: #00D24F;*/
	background-color: #002352;
	border-color: #002352 !important;
}

.card-reclamacao:hover{
	transition: 0.4s ease-in-out;
	/*background-color: #e66a2c;*/
	background-color: #002352;
	border-color: #002352 !important;
}

.card-solicitacao:hover{
	transition: 0.4s ease-in-out;
	/*background-color: #6c5da3;*/
	background-color: #002352;
	border-color: #002352 !important;
}

.card-sugestao:hover{
	transition: 0.4s ease-in-out;
	/*background-color: #11aec9;*/
	background-color: #002352;
	border-color: #002352 !important;
}

.card-informacao:hover{
	transition: 0.4s ease-in-out;
	/*background-color: #f0c800;*/
	background-color: #002352;
	border-color: #002352 !important;
}
.card-simplifique:hover{
	transition: 0.4s ease-in-out;
	/*background-color: #267aab;*/
	background-color: #052852;
	border-color: #052852 !important;
}

.card-ouvidoria:hover h3,
.card-ouvidoria:hover p{
	color: white;
}

.card-ouvidoria:hover img{
	filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------------Nossos Sistemas-------------------------------------------------------------------------------- */
	

/* CONTAINER */
.container_portais {
	min-height: 350px; display: flex; flex-direction: column; flex-wrap: wrap;}
.container .title {text-align: center; margin-bottom: 70px; color:#34502E;}
.container .title span {display: block; width: 40%; margin: 10px auto;}
.title h1 {font-size: 2em; text-transform: uppercase;}

.container_not_found {
	margin: 80px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------------Ouvidoria-------------------------------------------------------------------------------- */

.containerCard{
  display: flex; 
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  overflow-x: auto;
  padding: 0 20px;
  width: 1000px;
}



/*-------------------------------------------------------------------------------Mais Informações----------------------------------------------------------------------------*/


.container-informacoes{
	display: flex;
	flex-wrap: wrap; gap: 30px;
	row-gap: 40px;
	justify-content: center;
}