/* Importação da fonte Roboto (Google Fonts) */ 
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');  
 
/* Reset de estilos para garantir uniformidade entre navegadores */ 
* {  
  margin: auto; 
  padding: 0; 
  box-sizing: border-box; 
}

 /* Paleta de Cores - Sintonia Vibrante  */ 
:root {  
   --cor-fundo:  #DAE0E6;  
   --cor-texto-principal:  #033603; 
   --cor-destaque:  #FFC107; 
   --cor-secundaria:  #293845;  
   --cor-detalhe:  #006400; 
 }

body {
  font-family: 'Roboto', sans-serif; 
  background-color: var(--cor-fundo);  
  color: var(--cor-texto-principal); 
  line-height: 1.6;
} 

 /*  Container principal  - controla a largura máxima do conteúdo */  
 .container { 
    max-width: 1200px; 
    margin: 0 auto;
    padding: 20px;
 }

 /* Header  */ 
 header { 
  background-color: var(--cor-destaque); 
  color: var(--cor-secundaria);  
  padding: 20px 0;
  text-align: center; 
}

.header-content {  
   display: flex; 
   flex-direction: column;  /* Logo e texto na vertical */ 
   align-items: center; 
 } 

 .logo {  
    display: block;
    margin: 0 auto 20px auto;  
    max-width: 300px;
 }

h1, 
h2 { 
  margin: 0;  /*  Removendo margem padrão */  
}

/* ... Outros estilos  ...  */ 

/* ... Outros estilos (reset, cores, etc) ...  */

/*  ======== Menu  (Adaptado para Responsividade) ======== */

nav { 
   background-color: #333; 
   color: #fff;  
 }  
 
 nav ul { 
    list-style-type: none;  
    margin: 0; 
    padding: 0;  
    display: flex; 
 }
 
 nav li {  
     position: relative;
 } 
 
 nav li a { 
   display: block;  
   color: #fff;
   text-decoration: none;
   padding: 10px 20px; 
 }
 
 nav li:hover > .submenu {  
   display: block; 
 } 
 
 .submenu { 
   display: none;  
   position: absolute; 
   background-color: #333;  
   width: 200px;  
   z-index: 1;
 }
 
 .submenu li a { 
   padding: 10px;
 }  
 
 /*  ======== Botão do Menu Hambúrguer ======== */
 
 .btn-hamburguer {  
   display: none;   /* Oculta o botão em telas grandes  */  
   position: relative;  
   z-index: 10;  
   background: none;  
   border: none;  
   cursor: pointer;  
   font-size: 1.5em; 
   color: white; 
 }
 
 @media (max-width: 768px) {
   /* Exibe o botão em telas menores */
   .btn-hamburguer {
       display: block;
   }

   /* Oculta o menu original */
   nav ul {
       display: none;
       flex-direction: column;
       position: absolute;
       top: 60px;
       left: 0;
       width: 100%;
       background-color: #333;
       box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
       z-index: 1000;
   }

   /* Exibe o menu quando o botão é clicado */
   nav ul.aberto {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 60px;
      left: 0;
      width: 100%;
      background-color: #333;
      padding: 10px 0;
      height: auto; /* Define altura automática para não ocupar a tela toda */
      z-index: 1000;
  }

  /* Melhorando os itens do menu */
  nav ul li {
        position: relative;
    }

    nav ul .submenu {
        display: none; /* Esconde os submenus por padrão */
        position: relative; /* Mantém dentro do fluxo do menu */
        width: 100%; /* Faz o submenu ocupar toda a largura do menu */
        background-color: #444; /* Ajusta cor de fundo para destacar */
        padding: 10px 0;
        text-align: center;
    }

    /* Exibe o submenu quando o item pai tem a classe .ativo */
    nav ul li.ativo .submenu {
        display: block;
    }

    /* Ajuste no espaçamento */
    .submenu li {
        width: 100%;
        padding: 8px 0;
    }

    .submenu li a {
        color: white;
        text-decoration: none;
        display: block;
        padding: 10px;
    }
}

  /* Esconder o botão hambúrguer quando o menu estiver aberto */
  .btn-hamburguer.ativo {
      display: none;
  }
  


/* ================  Seção de Destaque  (Carrossel)  ===================== */
.destaque { 
   position: relative;
   overflow: hidden; 
}  
 
.carrossel {  
   display: flex;  
   transition: transform 0.5s ease-in-out; 
   
}

.carrossel img {  
   width: 100%;
   height: auto;  
   object-fit: cover;
} 

.banner-botao {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0056b3;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.banner-botao:hover {
    background-color: #003d80;
}

@media (max-width: 768px) {
   .banner-botao {
       opacity: 0; /* Torna o botão invisível */
       pointer-events: none; /* Impede cliques acidentais */
       transition: opacity 0.3s ease;
   }

   /* Quando o usuário toca/clica no banner, o botão aparece */
   .carrossel:hover .banner-botao,
   .carrossel:focus-within .banner-botao {
       opacity: 1;
       pointer-events: auto; /* Habilita a interação */
   }
}


/* Navegação do Carrossel  (botões) */
.seta-carrossel {  
   position: absolute;  
   top: 50%;
   transform: translateY(-50%); 
   background-color: rgba(0,  0, 0,  0.3);
   color: #fff; 
   padding: 10px 15px;  
   border: none; 
   cursor: pointer;  
}

.seta-carrossel:hover {
    background-color: rgba(0,  0,  0, 0.5);  
} 
  
.seta-esquerda {  
    left: 20px; 
}

.seta-direita { 
    right: 20px;  
} 


.noticias h2  {
   color: var(--cor-texto-principal);
    margin-bottom: 20px; 
    font-size: 2.5em;  
}

.sobre p {  
  color: var(--cor-secundaria);  
   font-size: 1.2em;
   line-height: 1.6; 
}

/*  ================= Cards de Benefícios - Estilo Responsivo ================= */  

.lista-beneficios {  
   display: grid;  
   grid-template-columns: repeat(3, 1fr); 
   grid-gap: 20px;  
}
 
.beneficio {  
   /*  Remove as propriedades  width  e  height  */  
   background-color: #fff; 
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
   overflow: hidden;
   transition: transform 0.3s ease;  
   color: white;  
   text-align: center; 
  /*   Adiciona  flexbox  ao card */ 
   display: flex; 
   flex-direction: column;  
   justify-content: center;  /*  Centraliza o conteúdo verticalmente  */ 
   width: 300px;
   height: 200px;
   text-decoration:wavy;
   color: inherit;
}


.beneficio:hover { 
  transform: translateY(-5px);
}

.beneficio i {
    font-size: 3em; 
    margin-bottom: 15px;  
    display: block;
} 

.beneficio h3 { 
  font-size: 1.3em; 
  margin-bottom: 10px; 
}  

.beneficio p {
   font-size: 1em; 
   line-height: 1.4; 
   padding: 0 20px;
}  

.beneficio a {  
   display: inline-block; 
   margin: 20px 0;
   padding: 8px 16px; 
   background-color: var(--cor-destaque);
   color: var(--cor-secundaria); 
   text-decoration: none; 
   border-radius: 4px;
   transition: background-color 0.3s ease; 
} 

.beneficio a:hover {  
   background-color: var(--cor-detalhe); 
   color: white;  
} 

 
/* =================  Media Queries - Responsivos - Responsividade!  ===================  */ 
@media  (max-width: 992px) { 
  .lista-beneficios { 
      grid-template-columns: repeat(2,  1fr); /* 2 colunas em telas médias  */  
   } 
}

@media  (max-width: 768px)  { 
.lista-beneficios { 
      grid-template-columns: 1fr; /* 1 coluna em telas pequenas */  
   }
}

/* Ajuste para os links em cards de benefícios */
.beneficio-link {
   text-decoration: none !important; /* Remove o sublinhado dos links */
   color: inherit; /* Mantém a cor original */
   display: block; /* Faz o link envolver todo o card */
}

.beneficio {
   text-decoration: none; /* Remove sublinhado direto no card */
}

.beneficio:hover {
   transform: translateY(-5px);
   cursor: pointer; /* Indica que o card é clicável */
}

.beneficio h3,
.beneficio p {
   text-decoration: none !important; /* Garante que não há sublinhado nos textos */
   color: inherit; /* Herdar cor do card */
}

.beneficio i {
   font-size: 3em; 
   margin-bottom: 15px;  
   display: block;
}

/* =================  Cards de Notícias  =================== */ 
.lista-noticias {
   display: grid;
   grid-template-columns: repeat(3,  1fr);  
   grid-gap: 30px;  
   display: flex; /* Add this */
   justify-content: center; /* Add this */
}

.noticia {
   background-color: white;
   border-radius: 8px;
    overflow: hidden; 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;  
}

.noticia:hover {  
    transform: translateY(-8px);  
 }  
 
 .noticia img {
    width: 100%; 
    height: 200px;
    object-fit: cover;  
 } 
 
 .noticia .conteudo {  
    padding: 20px;  
}

.noticia h3 { 
    color: var(--cor-texto-principal);  
    margin-bottom: 10px;
    font-size: 1.5em;  
    font-weight: bold; 
}  

.noticia p { 
   color: var(--cor-secundaria); 
    line-height: 1.5;
   margin-bottom: 15px;
 }

.noticia .ler-mais {
    display: inline-block; 
    padding: 10px 20px;
   background-color: var(--cor-destaque);
   color: var(--cor-secundaria);  
    text-decoration: none;  
    border-radius: 4px;
   transition: background-color 0.3s ease; 
}
  
.noticia .ler-mais:hover {  
   background-color: var(--cor-detalhe);  
    color: white;
} 

/*  =========================  Toques Artísticos =========================== */

 /*  Ícones (Font Awesome)  */  
.beneficios i, 
 .noticias i, 
 .contato i  { 
     font-size: 4em; 
    margin-bottom: 10px; 
    color: var(--cor-detalhe); 
 }
 
/*  ===================== Paginação  (Opcional) ======================  */ 
.paginacao {  
    margin-top: 30px;
    display: flex;
    justify-content: center;  
 } 

 .paginacao .btn-pagina {
     background-color: #f2f2f2;
    color: var(--cor-secundaria); 
    border: none;
    padding: 8px 12px;  
    margin: 0 5px;  
    border-radius: 4px;
    cursor: pointer;  
    transition: background-color 0.3s ease; 
 }

 .paginacao .btn-pagina:hover {
   background-color: var(--cor-destaque);
    color: white;  
} 
  
.paginacao .btn-pagina.ativo { /* Botão da página atual  */ 
  background-color: var(--cor-destaque);
    color: white;
}

/* =================  Media Queries - Responsividade!  ===================  */ 
@media  (max-width: 992px) { 
   .lista-noticias { 
       grid-template-columns: repeat(2,  1fr); /* 2 colunas em telas médias  */  
    } 
 }
 
 @media  (max-width: 768px)  { 
   .lista-noticias { 
       grid-template-columns: 1fr; /* 1 coluna em telas pequenas */  
    }
 }
 
/* =================  MODAL NOTÍCIAS  ===================  */ 
 .modal {
   display: none;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
   padding-top: 60px;
 }
 
 .modal-conteudo {
   background-color: #fefefe;
   margin: 15% auto;
   padding: 20px;
   border: 1px solid #888;
   width: 80%;
   max-width: 600px;
 }
 
 .close-modal {
   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
 }
 
 .close-modal:hover,
 .close-modal:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
 }
/* ===============  Seção ""Sobre" do Sindicato"  ================  */ 
 /*  =================  Seção  "Sobre o Sindicato" - Estilo Card  ================= */

.sobre { 
   background-color: var(--cor-fundo); 
  padding: 40px 0;  
 }  
 
 .card-sobre { 
   display: flex;
   flex-direction: row;
   justify-content: space-between; /* Distribui o espaço entre texto e imagem */
   align-items: center; /* Alinha verticalmente no centro */
   background-color: var(--cor-secundaria);
   color: white;
   border-radius: 8px;
   padding: 20px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
 
 .conteudo-sobre {  
  flex: 1;
 /*  A "conteudo-sobre" ocupará o espaço disponível  */  
  padding: 50px; 
  text-align: left;
 /*  Alinha o texto à esquerda */  
}
  
.conteudo-sobre h2 {
   color: #FFC107; 
  /* Título em amarelo vibrante */ 
   margin-bottom: 20px;
} 

 .conteudo-sobre p {  
   font-size: 1em;
    line-height: 1.6;
    color: #FFC107;
} 
  
 .imagem-sobre {
   display: flex; /* Garante que o conteúdo interno siga flex */
   justify-content: flex-end; /* Move a imagem para o canto direito */
   align-items: center; /* Centraliza verticalmente */
   width: 50%; /* Limita a largura para evitar que ocupe muito espaço */
}

.imagem-sobre img {
   width: 400px; /* Define um tamanho fixo para a largura */
   height: 450px; /* Define um tamanho fixo para a altura */
   object-fit: cover; /* Mantém a proporção da imagem e corta o excesso, se necessário */
   border-radius: 8px;
   object-fit: fill; /* Mostra a imagem inteira sem cortar */
}


/* Ajustes para responsividade */
@media (max-width: 768px) {
   .card-sobre {
     flex-direction: column; /* Alinha na vertical em telas pequenas */
     align-items: center; /* Centraliza os itens horizontalmente */
   }
 
   .conteudo-sobre {
     text-align: center; /* Centraliza o texto */
     padding: 20px; /* Reduz o espaçamento interno */
     order: 2; /* Move o texto para baixo da imagem */
   }
 
   .imagem-sobre {
     width: 100%; /* Faz a imagem ocupar toda a largura */
     max-width: 300px; /* Limita o tamanho máximo */
     margin-bottom: 20px; /* Espaçamento entre imagem e texto */
     order: 1; /* Move a imagem para cima */
   }
 }

/*  ======================== Seção de Contato  ========================  */  

/* ======================== Seção de Contato ======================== */

.contato { 
   padding: 40px 0; 
   background-color: var(--cor-fundo); 
} 

.contato-conteudo {
   display: flex;
   flex-direction: row; /* Mantém lado a lado em telas grandes */
   align-items: center;
   justify-content: space-between; /* Espaço igual entre os itens */
   gap: 20px; /* Melhora espaçamento entre os elementos */
}

/* 🔹 Ajuste para as informações de contato */
.contato-info {  
   width: 48%;
   color: var(--cor-texto-principal); 
   text-align: left;
   font-size: 1.2rem;
}

.contato-info p {  
   font-size: 1.4rem;
   margin-bottom: 15px; /* Melhor espaçamento */
}  

.contato-info h2 {  
   font-size: 3rem;
   color: #007bff;
   margin-bottom: 20px;
   text-align: center;
}

.contato-info h3 {  
   font-size: 2rem;
   color: #007bff;
   margin-bottom: 10px;
}

/* 🔹 Links e efeitos */
.contato-info a {
   color: var(--cor-secundaria);
   text-decoration: none;
   font-weight: bold;
   transition: color 0.3s ease; 
   font-size: 1.4rem;
   color: #007bff;
}

.contato-info a:hover {
   color: var(--cor-destaque);
}

/* 🔹 Ícones sociais */
.social-icons {
   margin-top: 15px;
   display: flex;
   gap: 15px;
   justify-content: center; /* Centraliza os ícones sociais */
}

.social-icons a {
   display: inline-block;
   font-size: 1.5rem; /* Reduzido de 2rem para 1.5rem */
   color: var(--cor-secundaria);
   transition: color 0.3s ease;
}

.social-icons a:hover {
   color: var(--cor-destaque);
}

/* 🔹 Ajuste para o mapa */
.contato-mapa {
   flex: 1;
   max-width: 48%;
}

.contato-mapa iframe {  
   width: 100%;
   border: none;
   border-radius: 8px;
}

/* 🔹 Responsividade - Empilhar os itens no celular */
@media (max-width: 1024px) {
   .contato-mapa {
       max-width: 100%;
   }
}

@media (max-width: 768px) {
   .contato-conteudo {
       flex-direction: column;
       align-items: center;
       text-align: center;
   }

   .contato-info {
       width: 100%;
       text-align: center;
   }

   .social-icons {
       justify-content: center;
   }

   .contato-mapa {
       width: 100%;
       max-width: 400px;
   }

   .contato-info h2 {
       font-size: 2.5rem;
   }

   .contato-info h3 {
       font-size: 1.8rem;
   }
}
 /* === Botão de Login === */

.btn-login { 
   display: inline-block; 
   padding: 12px 24px;
   background-color: var(--cor-secundaria);  
   color: var(--cor-detalhe); 
   text-decoration: none;  
   border-radius: 4px;  
   transition: background-color 0.3s ease; 
}

.btn-login:hover {
    background-color: var(--cor-secundaria); 
   color: rgb(19, 233,  169);
 } 

 .login {
    padding: 60px 0; 
    background-color: var(--cor-fundo); 
   text-align: center;  
 }  
 
 .login h2 {  
 color: var(--cor-texto-principal); 
   margin-bottom: 20px;
 }

.login p { 
   color: var(--cor-secundaria);  
   margin-bottom: 30px; 
}

.login form { 
  max-width: 400px; 
   margin: 0 auto;
   background-color: white;  
  padding: 30px;
  border-radius: 8px;
   box-shadow: 0px 2px 4px rgba(0,  0, 0, 0.1);
 } 

.login .form-group {  
   margin-bottom: 15px; 
 } 
  
 .login label { 
   display: block; 
   text-align: left;
    margin-bottom: 5px; 
   color: var(--cor-secundaria); 
} 

.login input[type="text"], 
.login input[type="password"] {
   width: 100%;
   padding: 10px;  
   border: 1px solid #ddd;  
   border-radius: 4px; 
}
 
 .login button[type="submit"] {  
   width: 100%; 
  padding: 12px;
  background-color: var(--cor-destaque);  
  color: var(--cor-secundaria);
   border: none;
    border-radius: 4px; 
   cursor: pointer;  
    transition: background-color 0.3s ease;  
 }

 .login button[type="submit"]:hover {
    background-color: var(--cor-detalhe); 
   color: white; 
 }

 /* ===================== Seção de Denúncias ===================== */

.denuncias-section {
   padding: 40px 0;
   background-color: var(--cor-fundo);
 }
 
 .denuncias-section h2 {
   color: var(--cor-texto-principal);
   font-size: 2.5em;
   margin-bottom: 30px;
   text-align: center;
 }
 
 /* Conteúdo centralizado e responsivo */
 .denuncias-conteudo {
   width: 80%;
   max-width: 600px;
   margin: 40px auto;
   background-color: white;
   padding: 30px;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 /* Ajustando o formulário para preencher toda a largura disponível */
 .denuncias-conteudo form {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
 /* Grupo de Formulários */
 .form-group {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 /* Alteração: Cor do rótulo */
 .form-group label {
   color: var(--cor-secundaria);
   font-weight: bold;
   text-align: left;
 }
 
 /* Alteração: Inputs, Textareas e Selects - Maior largura e consistência */
 .form-group input,
 .form-group textarea,
 .form-group select {
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   background-color: #f8f8f8;
   font-size: 16px;
 }
 
 .form-group textarea {
   resize: vertical;
   min-height: 100px;
 }
 
 .denuncias-conteudo button[type="submit"] {
   align-self: center;
   padding: 12px 24px;
   background-color: #ffc107;
   color: #333;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 16px;
   font-weight: bold;
   transition: background-color 0.3s ease;
 }
 
 /* Alteração: Botão de Envio ao passar o mouse */
 .denuncias-conteudo button[type="submit"]:hover {
   background-color: #ffca2c;
 }
 
 /* Responsividade */
 @media (max-width: 768px) {
   .denuncias-conteudo {
     width: 90%;
     padding: 20px;
   }
 }

/*  ====================== Seção "Documentos e Legislação" - Página Dedicada ======================  */ 

.documentos-section {
  padding: 40px 0;
  background-color: var(--cor-fundo);  
  text-align: center;
}

.documentos-section h2 {
  color: var(--cor-texto-principal);  
  font-size: 2.5em; 
  margin-bottom: 30px;
} 

.lista-documentos {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    grid-gap: 20px;  
} 

.documento { 
    background-color: white;  
    padding: 30px; 
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
    transition: transform 0.3s ease; 
}

.documento:hover { 
  transform: translateY(-5px);  
}  

.documento i {
    font-size: 3em; 
    color: var(--cor-detalhe);   
    margin-bottom: 15px;
}  

.documento h3 {  
    color: var(--cor-secundaria); 
    margin-bottom: 10px; 
}

.documento a {   
    display: inline-block;  
    padding: 10px 20px; 
    background-color: var(--cor-destaque);
    color: var(--cor-secundaria);  
    text-decoration: none; 
    border-radius: 4px; 
    transition: background-color 0.3s ease;  
} 

.documento a:hover {
    background-color: var(--cor-detalhe);
    color: white;  
}

/*  ====================  Página de Notícias  ===================== */

.noticias-section {  
  padding: 40px 0;
  background-color: var(--cor-fundo);  
  text-align: center;
  display: flex; /* Add this */
  justify-content: center; /* Add this */
 }
 
 .noticias-section h2 { 
    color: var(--cor-texto-principal);   
    font-size: 2.5em;
    margin-bottom: 30px;  
 } 
 
 /*  Layout da Grade de Notícias  */ 
 .lista-noticias {  
  display: grid; 
  grid-template-columns: repeat(3, 1fr);  /* Responsivo!  */
  grid-gap: 20px;
 }
 
 /*  Estilo dos Cards de Notícias  */  
 .noticia {
    width: 400px;
    background-color: white;  
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;  /*  Organiza os elementos em uma coluna  */  
 }
 
 
 .noticia:hover {  
    transform: translateY(-5px);
 }
 
 .noticia img {
   width: 100%;
   height: 200px; /* Define altura fixa para a imagem */
   object-fit: cover;
}
 
.noticia .conteudo {
   padding: 20px;
   flex-grow: 1;  /* Permite que o conteúdo se expanda e ocupe o espaço restante */
}
 
 .noticia h3 { 
  color: var(--cor-texto-principal); 
  font-size: 1.6em;  
  margin: auto;
  object-fit: cover;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limita a 2 linhas */
  -webkit-box-orient: vertical;
 }  
 
 .noticia p { 
    color: var(--cor-secundaria); 
    line-height: 1.5; 
     margin: auto;
 } 
 
 .noticia .data {
  color: #777;  
  font-size: 0.9em;  
  margin-bottom: 15px; 
 }
 
 .noticia .ler-mais { 
    display: block;
    padding: 8px 16px; 
    background-color: var(--cor-destaque);
    color: var(--cor-secundaria);
    text-decoration: none;  
    border-radius: 4px;  
    transition: background-color 0.3s ease;
    margin: 10px;  
 }
 
 .noticia .ler-mais:hover {
    background-color: var(--cor-detalhe);  
    color: white;
 }

 @media (max-width: 768px) {
   .lista-noticias {
      grid-template-columns: 1fr;
  }
}
   .noticia-section {
   display: grid; 
   grid-template-columns: repeat(1, 1fr);
     flex-direction: column; /* Altera o layout para uma coluna */
     display: flex; /* Add this */
     justify-content: center; /* Add this */
   }   
   .noticia {
     width: 100%; /* Ocupa toda a largura da tela */
     height: auto; /* Altura automática */
     margin-bottom: 20px; /* Adiciona um espaço entre as notícias */
   }
   
   .noticia img {
     width: 100%; /* Ocupa toda a largura da tela */
    
     object-fit: cover; /* Mantém a proporção da imagem */
   }
 

   @media (max-width: 962px) {
      .lista-noticias {
         grid-template-columns: 1fr;
     }
   }
      .noticia-section {
      display: grid; 
      grid-template-columns: repeat(1, 1fr);
        flex-direction: column; /* Altera o layout para uma coluna */
        display: flex; /* Add this */
        justify-content: center; /* Add this */
      }   
      .noticia {
        width: 100%; /* Ocupa toda a largura da tela */
        height: auto; /* Altura automática */
        margin-bottom: 20px; /* Adiciona um espaço entre as notícias */
      }
      
      .noticia img {
        width: 100%; /* Ocupa toda a largura da tela */
       
        object-fit: cover; /* Mantém a proporção da imagem */
      }
 
 /*  ===================== Paginação (Opcional)  ======================  */ 
 .paginacao { 
    margin-top: 30px;  
    display: flex;  
    justify-content: center;  
 } 
 
 .paginacao .btn-pagina {
    background-color: #f2f2f2;
    color: var(--cor-secundaria);  
    border: none; 
    padding: 8px 12px; 
    margin: 0 5px;  
    border-radius: 4px;  
    cursor: pointer;
    transition: background-color 0.3s ease; 
 }  
 
 .paginacao .btn-pagina:hover {  
    background-color: var(--cor-destaque);  
    color: white;
 } 
 
 .paginacao .btn-pagina.ativo { /*  Botão da página atual  */ 
  background-color: var(--cor-destaque);  
  color: white; 
 }

/*  ... (Outros Estilos)  ...  */



 /* ===============  Rodapé - Alinhamento Perfeito!  ===============  */  

 footer {
   font-size: 14px;
}

/* Parte superior do footer */
.footer-superior {
   background-color: var(--cor-detalhe);
   padding: 20px 0;
   color: white;
}

.footer-logos-contato {
    display: flex;
    flex-direction: row; /* Mantém os itens lado a lado em telas grandes */
    align-items: center;
    justify-content: space-between; /* Distribui os itens igualmente */
    text-align: left;
    width: 100%;
}

.footer-logos {
    margin: 0 auto; /* Centraliza a logo */
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logos img {
   max-width: 100px;
   height: auto;
}

.footer-contato {
    flex: 1; /* Permite que o bloco de contato ocupe espaço proporcional */
    text-align: left;
}

.footer-contato p {
   margin-bottom: 5px;
}

/* 🔹 Mapa ao lado */
.footer-mapa {
   flex: 1; /* Ocupa o espaço disponível */
   max-width: 400px;
}

.social-icons-footer {
    display: flex;
    gap: 15px;
}

.social-icons-footer a {
   font-size: 1.2em; /* Reduzido de 1.4em para 1.2em */
   color: white;
   transition: color 0.3s ease;
}

.social-icons-footer a:hover {
   color: var(--cor-destaque);
}

/* Parte inferior do footer */
.footer-inferior {
   background-color: var(--cor-destaque);
   padding: 10px 0;
   color: var(--cor-detalhe);
   text-align: center; /* Centraliza o texto na parte inferior */
}



/* 🔹 Ajuste para telas menores (Responsividade) */
@media (max-width: 768px) {
    .footer-logos-contato {
        flex-direction: column; /* Empilha os itens no celular */
        align-items: center; /* Centraliza os elementos */
        text-align: center;
        gap: 20px; /* Espaçamento entre os itens */
    }

    .footer-contato {
        text-align: center;
    }

    .social-icons-footer {
        justify-content: center;
    }

    .footer-mapa {
        width: 100%; /* Faz o mapa ocupar toda a largura */
    }
}


/* ===============  Ícone Flutuante do WhatsApp =============== */
/* Estilo para o botão fixo do WhatsApp */
.whatsapp-button {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background-color: #25d366;
   color: white;
   width: 60px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   text-decoration: none;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-button:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.whatsapp-button i {
   font-size: 24px;
}