/* Importar a fonte Rubik se ainda não estiver fazendo isso em outro lugar */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap');


.titulo-despesa {
  text-align: center;
  font-size: 28px;
  color: #004080;
  font-weight: bold;
  margin-bottom: 40px;
  position: relative;
}

.titulo-despesa::after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  background-color: #004080;
  margin: 8px auto 0 auto;
}

.lista-arquivos-despesa {
  list-style: none;
  padding-left: 0;
  max-width: 800px;
  margin: 0 auto;
}

.lista-arquivos-despesa li {
  margin-bottom: 15px;
}

.lista-arquivos-despesa a {
  text-decoration: none;
  color: #004080;
  font-weight: bold;
}

.lista-arquivos-despesa a:hover {
  text-decoration: underline;
}



.legislacao-container {
  font-family: 'Rubik', sans-serif;
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

/* Título centralizado com barra */
.despesas-titulo {
  text-align: center;
  font-size: 26px;
  color: #004080;
  font-weight: 700;
  margin: 40px 0 30px;
  display: inline-block;
  padding-bottom: 6px;
  position: relative;
}

.despesas-titulo::after {
  content: "";
  display: block;
  width: 60px;         /* Largura da barra */
  height: 3px;         /* Espessura da barra */
  background: #004080; /* Cor da barra */
  margin: 8px auto 0;  /* Centralizado e espaçamento */
  border-radius: 2px;
}

/* Lista principal */
.despesas-lista {
  list-style: disc;
  max-width: 900px;
  margin: 0 auto 50px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #003366;
}

/* Itens da lista */
.despesas-lista li {
  margin-bottom: 8px;
}

/* Links nos itens */
.despesas-lista a {
  color: #003366;
  text-decoration: none;
}

/* Hover dos links */
.despesas-lista a:hover {
  text-decoration: underline;
  color: #004080;
}


.legislacao-titulo {
  color: #052852;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 60px;
  padding-bottom: 10px;
  border-bottom: 2px solid #036bd6;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.legislacao-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legislacao-lista li {
  margin-bottom: 30px;
}

.legislacao-link {
  color: #036bd6;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  display: block;
}

.legislacao-destaque {
  font-weight: 700;
  color: #052852;
}

.legislacao-link:hover {
  text-decoration: underline;
  color: #000080;
}

.legislacao-descricao {
  color: #232528;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 5px;
}

/* Responsividade */
@media (max-width: 768px) {
  .legislacao-container {
    padding: 0 15px;
  }
  .legislacao-titulo {
    font-size: 24px;
    margin-bottom: 40px;
  }
  .legislacao-link {
    font-size: 16px;
  }
  .legislacao-descricao {
    font-size: 14px;
  }
}


/* Contêiner principal do acordeão */
.meu-acordeao {
    width: 100%;
    max-width: 800px; /* Ajuste conforme a largura desejada no seu layout */
    margin: 50px auto; /* Centraliza e adiciona margem vertical */
}

/* Estilo de cada item do acordeão */
.acordeao-item {
    /*box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);*/
}

.acordeao-item:last-child {
    border-bottom: none; /* Remove a borda do último item para um visual mais limpo */
}

/* Estilo do cabeçalho (botão) de cada item do acordeão */
.acordeao-header {
    background-color: #003366; /* Azul escuro conforme a imagem */
    color: #ffffff; /* Texto branco */
    cursor: pointer;
    padding: 15px 25px; /* Espaçamento interno */
    width: 100%;
    text-align: left;
    border: none; /* Remove a borda padrão do botão */
    outline: none; /* Remove o contorno ao focar */
    font-size: 18px; /* Tamanho da fonte do título do acordeão */
    font-weight: 600; /* Peso da fonte para o título */
    display: flex; /* Para alinhar o texto e o ícone na mesma linha */
    justify-content: space-between; /* Espaço entre o texto e o ícone */
    align-items: center; /* Alinha verticalmente no centro */
    transition: background-color 0.3s ease; /* Transição suave para o hover */
	border-radius: 16px 16px 0px 0px;
}

/* Efeito ao passar o mouse sobre o cabeçalho */
.acordeao-header:hover {
    background-color: #004080; /* Um tom de azul ligeiramente diferente no hover */
}

/* Estilo para o ícone de chevron */
.acordeao-icon {
    font-size: 20px; /* Tamanho do ícone */
    color: #ffffff; /* Cor branca para o ícone */
    transition: transform 0.3s ease; /* Transição suave para a rotação */
    /* Usamos um caractere Unicode para o chevron direito */
    content: '\25B6'; /* Código Unicode para triângulo preto apontando para a direita */
    display: inline-block; /* Para garantir que a rotação funcione */
}

/* Estilo para o ícone quando o acordeão está ativo (aberto) */
.acordeao-header.active .acordeao-icon {
    transform: rotate(90deg); /* Gira para apontar para baixo quando ativo */
}

.acordeao-header::after {
    content: '\276F'; /* Código Unicode para triângulo preto apontando para a direita */
    font-size: 20px; /* Tamanho do ícone */
    color: #ffffff; /* Cor branca para o ícone */
    margin-left: 10px; /* Espaçamento entre o texto e o ícone */
    transition: transform 0.3s ease; /* Transição suave para a rotação */
    display: inline-block; /* Garante que a rotação funcione */
}

/* Estilo para o ícone quando o acordeão está ativo (aberto) */
.acordeao-header.active::after {
    transform: rotate(90deg); /* Gira para apontar para baixo quando ativo */
}

/* Estilo do conteúdo do acordeão */
.acordeao-content {
    background-color: #ffffff; /* Fundo branco para o conteúdo */
    color: #333333; /* Cor do texto padrão para o conteúdo */
    padding: 0 20px; /* Padding horizontal, vertical 0 inicialmente */
    max-height: 0; /* Começa escondido */
    overflow: hidden; /* Esconde o conteúdo que transborda */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Animação de altura e padding */
    font-size: 15px; /* Tamanho da fonte para o conteúdo */
    line-height: 1.6; /* Espaçamento entre linhas para melhor legibilidade */
	margin-bottom: 20px;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Estilo para itens de lista dentro do conteúdo do acordeão */
.acordeao-content ul li {
    border-bottom: 1px dotted #ccc; /* Linha pontilhada fina e cinza claro */
    padding-bottom: 10px; /* Espaço abaixo da linha */
    margin-bottom: 10px; /* Espaço entre o item e a linha inferior */
}

.acordeao-content a {
    color: inherit; /* Remove a cor azul padrão, usa a cor do texto pai */
    text-decoration: none; /* Remove o sublinhado */
}

.acordeao-content a:hover {
    text-decoration: underline; /* Opcional: Sublinha ao passar o mouse, se desejar */
}

/* Remove a linha pontilhada do último item da lista para um visual mais limpo */
.acordeao-content ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 20px;
}

/* Quando o acordeão está ativo, expande o conteúdo */
.acordeao-header.active + .acordeao-content {
    max-height: 1000px; /* Um valor grande o suficiente para a maioria dos conteúdos. Pode ajustar se precisar. */
    /* padding: 15px 25px; /* Adiciona padding vertical quando visível */
	border-left: 1px solid #004080;   /* Borda esquerda */
    border-right: 1px solid #004080;  /* Borda direita */
    border-bottom: 1px solid #004080; /* Borda inferior */
    
    /* Ajusta o raio da borda inferior para coincidir com o container principal */
    border-radius: 0 0 8px 8px; 
}

/* Estilo para listas dentro do conteúdo do acordeão (para os órgãos subordinados) */
.acordeao-content ul {
    list-style: disc; /* Adiciona marcadores de lista */
    margin-left: 20px; /* Recuo para os marcadores */
    padding-left: 0;
    margin-top: 10px; /* Espaço acima da lista */
    margin-bottom: 10px; /* Espaço abaixo da lista */
}

.acordeao-content li {
    margin-bottom: 5px; /* Espaço entre os itens da lista */
}

/* Estilo para parágrafos dentro do conteúdo (como "Órgãos subordinados:") */
.acordeao-content p {
    margin-top: 10px;
    margin-bottom: 5px;
}

/* Opcional: Estilo para "Competências da..." em negrito */
.acordeao-content p strong {
    color: #003366; /* Cor do negrito para se destacar, combinando com o cabeçalho */
}


/* Container principal */



.containerPaginas{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 20px;
	max-width: 900px; 
	margin: auto;
	text-align: justify;
}

.containerPaginas > p{
	font-family: 'Rubik', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 28px;
    color: #606a78;
	margin-bottom: 20px;
}


.containerPaginas a{
	color: #003366;
}



.meu-acordeao li a {
  margin-left: 10px;
}

.titulo{
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 35px;
    margin-bottom: 35px;
    color: #00508a;
    margint-top: 35px;
	display:flex;
	justify-content:center;
}

/* Estilização de botões nas paginas para mais de um botão */

.links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 30px auto;
  /* centraliza cada célula */
  justify-items: center;
}

.links a {
  display: block;
  width: 100%;
  max-width: 260px;   /* ajusta se quiser */
  box-sizing: border-box;
  text-align: center;

  font-family: 'Rubik', sans-serif;
  font-weight: 300; 
  font-size: 15px;
  line-height: 23px;
  color: #002352;
  background-color: #ffffff;
  padding: 8px 16px;
  border-radius: 9999px;
  text-decoration: none;
  border: 2px solid #002352;
  cursor: pointer;
  transition: background-color 1s, color 1s;
}


/* Estilização de botoes nas paginas para menos botões */

.link{
	margin: 30px auto;
	gap: 20px;
	display: flex;
	justify-content:center;
}



.containerPaginas a.link {
   font-family: 'Rubik', sans-serif;
  font-weight: 300; 
  font-size: 15px;
  line-height: 23px;
  color: #002352;
  background-color: #ffffff;
  padding: 8px 16px;
  border-radius: 9999px;
  text-decoration: none;
  border: 2px solid #002352;
  cursor: pointer;
  transition: background-color 1s, color 1s;
  width: 100%;
}

.containerPaginas a.link:hover {
  background-color: #002352;
   color: #ffffff
}



/* se for o único na última linha (índice = 3n+1), joga pro meio */
.links a:last-child:nth-child(3n+1) {
  grid-column: 2;
}


.links a:hover {
    background-color: #002352;
    color: #ffffff
}

.lgpd-governo-container {

font-family: 'Rubik', Arial, sans-serif;

max-width: 100%;

margin: 0 auto;

padding: 20px;

border-radius: 8px;

}

/* Títulos principais */

.lgpd-governo-titulo {

color: #2c3e50;

font-size: 1.8em;

margin-bottom: 25px;

padding-bottom: 10px;

display: flex;

justify-content: center;

position: relative; /* Adicione isso para o ::after posicionar corretamente */

}

.lgpd-governo-titulo::after {

content: "";

position: absolute;

left: 50%; /* Centraliza o início da borda */

transform: translateX(-50%); /* Ajusta a centralização */

bottom: 0;

width:330px; /* Largura da borda (ajuste conforme necessário) */

height: 2px;

background: #3498db;

}

/* Subtítulos */

.lgpd-governo-subtitulo {

color: #2c3e50;

font-size: 1.4em;

margin: 25px 0 15px 0;

}

/* Lista de itens */

.lgpd-governo-lista {

list-style-type: none;

padding-left: 0;

margin: 0;

}

/* Itens da lista */

.lgpd-governo-item {

margin-bottom: 20px;

padding: 15px;

background: #fff;

border-left: 4px solid #3498db;

border-radius: 0 4px 4px 0;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

/* Links */

.lgpd-governo-link {

color: #3498db;

font-weight: 600;

font-size: 1.1em;

text-decoration: none;

transition: color 0.3s;

}

.lgpd-governo-link:hover {

color: #2980b9;

text-decoration: underline;

}

/* Texto de destaque */

.lgpd-governo-destaque {

font-weight: 700;

color: #2c3e50;

}

/* Descrição */

.lgpd-governo-descricao {

color: #555;

margin-top: 8px;

line-height: 1.5;

font-size: 0.95em;

}

.faq-titulo{
margin-top:40px;
color: #2c3e50;

font-size: 1.8em;

margin-bottom: 25px;

padding-bottom: 10px;

display: flex;

justify-content: center;

position: relative; /* Adicione isso para o ::after posicionar corretamente */
}

.faq-titulo:after{
content: "";

position: absolute;

left: 50%; /* Centraliza o início da borda */

transform: translateX(-50%); /* Ajusta a centralização */

bottom: 0;

width:330px; /* Largura da borda (ajuste conforme necessário) */

height: 2px;

background: #3498db;
}



.lgpd-governo-container {
  font-family: 'Rubik', Arial, sans-serif;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
}

.lgpd-governo-titulo {
  color: #2c3e50;
  font-size: 1.8em;
  margin-bottom: 25px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
  position: relative;
}
.lgpd-governo-titulo::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 330px;
  height: 2px;
  background: #3498db;
}

.lgpd-governo-subtitulo {
  color: #2c3e50;
  font-size: 1.4em;
  margin: 25px 0 15px;
}

.lgpd-governo-descricao {
  color: #555;
  margin-top: 8px;
  margin-bottom: 20px;
  line-height: 1.5;
  font-size: 0.95em;
}

.lgpd-governo-destaque {
  font-weight: 700;
  color: #2c3e50;
}


.portal-container {
  font-family: 'Rubik', sans-serif;
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.portal-titulo {
  color: #2c3e50;
  font-size: 1.8em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}
.portal-titulo::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 200px;
  height: 2px;
  background: #3498db;
}

.portal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;            /* Distribui em duas colunas */
  column-gap: 40px;      /* Espaço entre colunas */
}

.portal-item {
  margin-bottom: 15px;
  font-size: 1em;
  line-height: 1.6;
  color: #555;
}


.privacidade-container {
  font-family: 'Rubik', sans-serif;
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.privacidade-titulo {
  color: #2c3e50;
  font-size: 1.8em;
  font-weight: 500;
  text-align: center;
  margin: 60px 0 30px;
  position: relative;
}
.privacidade-titulo::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 200px;
  height: 2px;
  background: #3498db;
}

.privacidade-descricao {
  color: #555;
  font-size: 0.95em;
  line-height: 1.6;
  margin-bottom: 20px;
}

.privacidade-tutorial {
  font-weight: 700;
  color: #2c3e50;
}

.privacidade-link {
  color: #036bd6;
  text-decoration: none;
}
.privacidade-link:hover {
  text-decoration: underline;
}


.classificacao-container {
  font-family: 'Rubik', sans-serif;
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.classificacao-titulo {
  color: #2c3e50;
  font-size: 1.8em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.classificacao-titulo::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 200px;
  height: 2px;
  background: #3498db;
}

.classificacao-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.classificacao-link {
  color: #036bd6;
  text-decoration: none;
  font-size: 1em;
  line-height: 1.6;
  transition: color 0.3s, text-decoration 0.3s;
}
.classificacao-link:hover {
  color: #2980b9;
  text-decoration: underline;
}




/* ================================================
   1) Regras Globais de Grid/Flex
   ================================================ */
.row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 -10px;
  row-gap: 20px;
  padding-bottom: 50px;
}

.col-4 {
  width: 33.3333%;
  padding: 0 10px;
  box-sizing: border-box;
}

.row .col-4:only-child {
  width: 100%;
  display: flex;
  justify-content: center;
}

.row .col-4 {
  text-align: center;
  white-space: nowrap;
}

/* ================================================
   2) Override para a seção Saúde
   ================================================ */
#saude .row .col-4,
#saude .row .col-4.offset-4 {
  flex: 0 0 auto;
  width: auto;
  margin-left: 0;
}

#saude .row .btn {
  display: inline-block;
  white-space: nowrap;
  padding: .5rem 1.25rem;
}

/* ================================================
   3) Override para a seção Fundos
   ================================================ */
#fundos .row .col-4,
#fundos .row .col-4.offset-4 {
  flex: 0 0 auto;
  width: auto;
  margin-left: 0;
}

#fundos .row .btn {
  display: inline-block;
  white-space: nowrap;
  padding: .5rem 1.25rem;
}

/* ================================================
   4) Override para a seção Educação
   ================================================ */
#educacao .row .col-4,
#educacao .row .col-4.offset-4 {
  flex: 0 0 auto;
  width: auto;
  margin-left: 0;
}

#educacao .row .btn {
  display: inline-block;
  white-space: nowrap;
  padding: .5rem 1.25rem;
}


/* =================================================
   Override genérico para TODOS os outros blocos de
   botões (exceto Saúde, pois o ID tem prioridade)
   ================================================= */
/*
.containerPaginas + .row > .col-4,
.containerPaginas + .row > .col-4.offset-4 {
  flex: 0 0 auto;
  width: auto;
  margin-left: 0;
}

.containerPaginas + .row .btn {
  display: inline-block;
  white-space: nowrap;
  padding: .5rem 1.25rem;
}*/


.btn {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 23px;
  color: #002352;
  background: #fff;
  padding: 8px 16px;
  border-radius: 9999px;
  text-decoration: none;
  border: 2px solid #002352;
  transition: background-color .3s, color .3s;
}

.btn:hover {
  background-color: #002352;
  color: #fff;
}




/* Wrapper full‑width para o fundo cinza */
.pagpo-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  background-color: #f5f5f5;
  padding: 60px 0;
  z-index: 0;
}

/* Container centralizado e limitado a 900px */
.pagpo-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  font-family: 'Rubik', sans-serif;
}

/* Título e texto */
.pagpo-title {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #00508a;
}

.pagpo-container p {
  color: #606a78;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* Grid de cards: 4 colunas */
.pagpo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.pagpo-col {
  flex: 0 1 calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);
  min-width: 100px;
  box-sizing: border-box;
}

/* Responsivo: 2 colunas abaixo de 768px */
@media (max-width: 768px) {
  .pagpo-col {
    flex: 0 1 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}

/* Responsivo: 1 coluna abaixo de 480px */
@media (max-width: 480px) {
  .pagpo-col {
    flex: 0 1 100%;
    max-width: 100%;
  }
}

/* Estilo dos botões/cards */
.pagpo-card-link {
  /* Propriedades de alinhamento */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Propriedades de dimensionamento */
  height: 100px;
  padding: 0px 10px;
  box-sizing: border-box;
  
  /* Estilos visuais */
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: #00508a;
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  font-weight: bold;
  transition: background-color .3s, color .3s, box-shadow .3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pagpo-card-link:hover {
  background-color: #e6f0ff;
  color: #004080;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}