/* ================================
   🌐 RESET & ESTRUTURA BASE
================================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main.flex-grow-1 {
  flex-grow: 1;
}

/* ================================
   📝 TIPOGRAFIA GLOBAL
================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #212529;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

p {
  font-size: 1rem;
}


/* ================================
   🚀 HERO SECTION
================================== */
.hero {
  min-height: 85vh;
  background-color: #f8f9fa;
  padding: 4rem 0;
}

.hero p {
  font-size: 1.25rem;
  max-width: 500px;
}

.hero .btn {
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

@media (max-width: 767.98px) {
  .hero {
    min-height: auto;
  }
}

/* ================================
   ⚡️ ACESSO RÁPIDO
================================== */
.card.acesso-rapido {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.acesso-rapido {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card.acesso-rapido:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* ================================
   📰 NOTÍCIAS
================================== */
.card.noticia {
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.card.noticia img {
  object-fit: cover;
  height: 250px;
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card.noticia .card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ================================
    ANIMAÇÕES
================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade {
  animation: fadeInUp 0.8s ease forwards;
}
.animate-fade-delay {
  animation: fadeInUp 1.2s ease forwards;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }

  
}
.animate-zoom {
  animation: zoomIn 0.8s ease forwards;
}

/* ================================
   🔙 BOTÃO “Voltar ao Topo”
================================== */

#btnBackToTop{
  background-color: #fd7e14;
  border: none !important;
}
#btnBackToTop:hover {
  background-color: #d15f0a;
}

/* Quando o contraste estiver ativo, muda a cor do botão */
.contraste-ativo #btnBackToTop {
  background-color: #fd7e14 !important; /* mesma cor do botão no modo contraste */
  color: #f1f1f1 !important;
}

.contraste-ativo #btnBackToTop:hover {
  background-color: #d15f0a !important; /* cor hover do contraste */
  color: #fff !important;
}

/* ================================
   📌 UTILITÁRIOS GERAIS
================================== */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0d6efd; /* Azul Bootstrap */
  border-bottom: 3px solid #0d6efd;
  padding-bottom: 0.5rem;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  text-align: center;
}


/* ================================
   🧭 PÁGINA SOBRE - HEADER
================================== */
#pagina-sobre .header {
  background-color: #fff;
  padding: 4rem 2rem;
  text-align: center;
}

#pagina-sobre .text-wrapper-7 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0d6efd;
  margin-bottom: 1rem;
}

#pagina-sobre .o-rio-grande-conecta {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  color: #555;
}

#pagina-sobre .shared-image {
  max-width: 300px;
  margin-top: 2rem;
}

/* ================================
   🧩 PÁGINA SOBRE - MISSÃO / VISÃO / VALORES
================================== */
#pagina-sobre .group,
#pagina-sobre .overlap-wrapper,
#pagina-sobre .overlap-group-wrapper {
  background-color: #e9ecef;
  padding: 3rem 1rem;
  margin-bottom: 1rem;
}

#pagina-sobre .overlap-group {
  max-width: 800px;
  margin: 0 auto;
}

#pagina-sobre .rectangle,
#pagina-sobre .rectangle-2 {
  height: 4px;
  background-color: #0d6efd;
  width: 50px;
  margin: 10px 0;
  border-radius: 2px;
}

#pagina-sobre .text-wrapper-9,
#pagina-sobre .text-wrapper-11,
#pagina-sobre .text-wrapper-13 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #0d6efd;
}

#pagina-sobre .text-wrapper-8,
#pagina-sobre .text-wrapper-10,
#pagina-sobre .text-wrapper-12 {
  font-size: 1rem;
  color: #444;
  margin-bottom: 1rem;
}

/* ================================
   🧑‍🤝‍🧑 PÁGINA SOBRE - EQUIPE
================================== */
#pagina-sobre .text-wrapper-6 {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

#pagina-sobre .equipe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 0 2rem 3rem;
}

#pagina-sobre .team-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 280px;
  padding: 1.5rem;
  text-align: center;
}

#pagina-sobre .member-name {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

#pagina-sobre .member-title {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 1rem;
}

#pagina-sobre .supporting-text {
  font-size: 0.9rem;
  color: #555;
}

#pagina-sobre .frame-5 img {
  width: 24px;
  margin: 0 8px;
  cursor: pointer;
}

/* ================================
   📱 RESPONSIVIDADE
================================== */
@media (max-width: 768px) {
  #pagina-sobre .equipe {
    flex-direction: column;
    align-items: center;
  }

  #pagina-sobre .shared-image {
    max-width: 90%;
  }
}

/* ================================
   📁 VALORES & CONTEÚDO EXTRA
================================== */
#pagina-sobre #pagina-sobre-valores .card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.06);
  background-color: #fff;
  transition: transform 0.2s ease;
}

#pagina-sobre #pagina-sobre-valores .card:hover {
  transform: translateY(-5px);
}

#pagina-sobre #pagina-sobre-valores .linha-decorativa {
  width: 50px;
  height: 4px;
  background-color: #0d6efd;
  border-radius: 2px;
}

#pagina-sobre .header {
  background-color: #f8f9fa;
}

#pagina-sobre .header h2 {
  font-size: 2.5rem;
  color: #212529;
}

#pagina-sobre .header p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #6c757d;
}

#pagina-sobre .header img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#pagina-sobre p,
#pagina-sobre .supporting-text,
#pagina-sobre .text-wrapper-8,
#pagina-sobre .text-wrapper-10,
#pagina-sobre .text-wrapper-12 {
  text-align: justify;
}

#pagina-sobre .shared-image {
  width: 510px;
  height: 510px;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ================================
   🧑‍💼 EQUIPE - CARDS
================================== */
.team-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.team-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 280px;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.team-card:hover {
  transform: translateY(-8px);
}

.team-photo {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.member-name {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.member-title {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 1rem;
}

.supporting-text {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 1rem;
}

.frame-5 {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.social-icon-link {
  font-size: 1.8rem;
  color: #0d6efd;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon-link:hover {
  color: #084298;
  transform: scale(1.2);
}

/* ================================
   🎯 PÁGINA SOBRE - PADRÕES GERAIS
================================== */
header.header {
  padding-bottom: 4rem;
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 4rem;
}

#pagina-sobre-valores {
  padding-top: 2rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 4rem;
  min-height: 800px;
}

#pagina-sobre {
  padding: 4rem 2rem;
}

#pagina-sobre, main {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}


/* ================================
   🎯 CARROSSEL PROFISSIONAL
=================================== */
#carouselVisitaCamara .carousel-item {
  height: 700px;
}

#carouselVisitaCamara .carousel-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 12px;
}

@media (max-width: 767.98px) {
  #carouselVisitaCamara,
  #carouselVisitaCamara .carousel-inner,
  #carouselVisitaCamara .carousel-item {
    height: auto !important; /* deixa altura automática pra legenda aparecer sem cortar */
  }

  #carouselVisitaCamara .carousel-item img {
    width: 350px;
    height: 350px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }

  /* Força a legenda a aparecer no mobile, no padrão do Bootstrap */
  #carouselVisitaCamara .carousel-caption {
    display: block !important;
  }

  #carouselVisitaCamara .carousel-caption h5,
  #carouselVisitaCamara .carousel-caption p {
    font-size: 0.8rem;
    margin: 0;
  }
}





/* ================================
   🎯 CONTROLES DO CARROSSEL SEMPRE VISÍVEIS
=================================== */
#carouselVisitaCamara .carousel-control-prev,
#carouselVisitaCamara .carousel-control-next {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1050 !important;
}




/* ================================
   🟠 LOGO - ALTERNÂNCIA NO MODO CONTRASTE
=================================== */
.logo-normal {
  display: inline;
}

.logo-contraste {
  display: none;
}

.contraste-ativo .logo-normal {
  display: none !important;
}

.contraste-ativo .logo-contraste {
  display: inline !important;
}

/* ================================
   🌗 MODO ALTO CONTRASTE
================================ */
.contraste-ativo,
.contraste-ativo body,
.contraste-ativo html {
  background-color: #000 !important;
  color: #fd7e14 !important;
}

/* TEXTO GERAL */
.contraste-ativo *,
.contraste-ativo h1,
.contraste-ativo h2,
.contraste-ativo h3,
.contraste-ativo h4,
.contraste-ativo h5,
.contraste-ativo h6,
.contraste-ativo p,
.contraste-ativo span,
.contraste-ativo small,
.contraste-ativo strong,
.contraste-ativo .text-dark,
.contraste-ativo .text-muted,
.contraste-ativo .text-secondary,
.contraste-ativo .nav-link {
  color: #fd7e14 !important;
}

/* LINKS */
.contraste-ativo a,
.contraste-ativo a:hover {
  color: #90caf9 !important;
}

/* BOTÕES */
.contraste-ativo .btn {
  color: #f1f1f1 !important;
  background-color: #1e88e5 !important;
  border-color: #1e88e5 !important;
}

.contraste-ativo .btn-outline-primary {
  color: #90caf9 !important;
  background-color: transparent !important;
  border-color: #90caf9 !important;
}

.contraste-ativo .btn-outline-primary:hover {
  background-color: #1565c0 !important;
  color: #fff !important;
}

/* FUNDO PADRÃO PARA ÁREAS */
.contraste-ativo section,
.contraste-ativo header,
.contraste-ativo nav,
.contraste-ativo .navbar,
.contraste-ativo .section,
.contraste-ativo .card,
.contraste-ativo .card-body,
.contraste-ativo .container,
.contraste-ativo .bg-light,
.contraste-ativo .bg-white,
.contraste-ativo .noticia {
  background-color: #1C1C1C !important;
  color: #fd7e14 !important;
  border-color: #333 !important;
}

/* ÍCONES */
.contraste-ativo i {
  color: #f1f1f1 !important;
}

/* PLACEHOLDERS */
.contraste-ativo input::placeholder,
.contraste-ativo textarea::placeholder {
  color: #ccc !important;
}

/* ❌ NÃO DEIXAR FOOTER SER AFETADO PELO CONTRASTE */
body.contraste-ativo footer.footer,
body.contraste-ativo .footer,
html.contraste-ativo footer.footer,
html.contraste-ativo .footer {
  background-color: #000000 !important; /* cor original do seu footer */
  color: #f8f9fa !important;
  border-color: transparent !important;
}

body.contraste-ativo .footer a,
html.contraste-ativo .footer a {
  color: #f8f9fa !important;
}

/* ======================================
   🚫 BLOQUEAR MODO CONTRASTE NO FOOTER
====================================== */
body.contraste-ativo footer,
body.contraste-ativo footer *,
body.contraste-ativo .footer,
body.contraste-ativo .footer * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #444 !important;
}

body.contraste-ativo .footer a,
body.contraste-ativo .footer a:hover,
body.contraste-ativo .footer .privacy-link,
body.contraste-ativo .footer .privacy-link:hover {
  color: #ccc !important;
}

body.contraste-ativo .footer a:hover,
body.contraste-ativo .footer .privacy-link:hover {
  color: #fff !important;
  text-decoration: underline !important;
}



/* ================================
   🎨 Contraste ativo - Pagina Sobre
=================================== */

.contraste-ativo .card.acesso-rapido {
  background-color: #121212 !important;
  color: #fd7e14 !important;
  border-color: #fd7e14 !important;
  box-shadow: 0 0 10px #fd7e14 !important;
}

/* ================================
   🔵 FOCO VISÍVEL (TECLADO)
=================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
  box-shadow: 0 0 8px rgba(13, 110, 253, 0.6);
}

:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
  box-shadow: 0 0 8px rgba(13, 110, 253, 0.6);
}

/* Remove outline para elementos que não recebem foco por teclado */
:focus:not(:focus-visible) {
  outline: none;
}

/* ================================
   🟠 BOTÃO DE ACESSIBILIDADE FIXO
=================================== */
.btn-acessibilidade {
  position: fixed;
  left: 20px;
  bottom: 30px;
  z-index: 9999;
  background-color: #fd7e14; /* laranja bootstrap */
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  font-size: 24px; /* TAMANHO FIXO */
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-acessibilidade * {
  font-size: inherit !important;
}

/* ================================
   ⚙️ MENU DE ACESSIBILIDADE FLUTUANTE
=================================== */
.menu-acessibilidade {
  position: fixed;
  left: 20px;
  bottom: 90px;
  z-index: 9998;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
  
}

.menu-acessibilidade button {
  background-color: #0d6efd;
  color: #fff;
  border: none;
  padding: 8px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.menu-acessibilidade button:hover {
  background-color: #084298;
}

/* ================================
   🔠 GRUPO DE BOTÕES DE TAMANHO DE FONTE
=================================== */
.grupo-fonte {
  display: flex;
  gap: 8px;
}

.grupo-fonte button {
  flex: 1;
  background-color: #0d6efd; /* Azul vibrante */
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 10px;
  border: none;
  border-radius: 6px;
  margin: 0 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.grupo-fonte button:hover {
  background-color: #084298; /* Azul escuro no hover */
}

.grupo-fonte button:nth-child(1) { background-color: #28a745; } /* A+ */
.grupo-fonte button:nth-child(2) { background-color: #dc3545; } /* A- */
.grupo-fonte button:nth-child(3) { background-color: #ffc107; color: black; } /* A */


/* ================================
   🔒 Privacy Policy
================================ */

main.container.my-5 {
  background-color: #ffffff;
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.8;
  color: #333;
}

main h1 {
  font-size: 2.2rem;
  font-weight: bold;
  color: #0d6efd;
  border-bottom: 2px solid #dee2e6;
  padding-bottom: 0.5rem;
}

main h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  color: #0d6efd;
  border-left: 4px solid #0d6efd;
  padding-left: 10px;
}

main ul {
  list-style: disc;
  padding-left: 1.5rem;
}

main ul li {
  margin-bottom: 0.5rem;
}

main a {
  color: #0d6efd;
  text-decoration: underline;
}

main a:hover {
  text-decoration: none;
}

@media (max-width: 576px) {
  main.container.my-5 {
    padding: 2rem 1rem;
  }

  main h1 {
    font-size: 1.6rem;
  }

  main h2 {
    font-size: 1.3rem;
  }
}

/* ================================
   🎨 Estilo para Contraste Ativo Geral
================================ */
body.contraste-ativo {
  background-color: #1C1C1C !important;
  color: #ffffff !important;
}

/* ================================
   📄 Estilo para área política-privacidade
================================ */
body.contraste-ativo .politica-privacidade {
  background-color: #000;
  color: #fff;
}

body.contraste-ativo .politica-privacidade h1,
body.contraste-ativo .politica-privacidade h2 {
  color: #ff0;
}

body.contraste-ativo .politica-privacidade a {
  color: #0ff;
  text-decoration: underline;
}

/* ================================
   🚦 Contraste na seção Acesso Rápido
================================ */
.contraste-ativo .acesso-rapido-section {
  width: 100%;
  background-color: #1C1C1C !important;
  color: #fd7e14 !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

.acesso-rapido-section .container {
  max-width: 1140px;
  margin: 0 auto;
}

/* ================================
   📝 Estilização de textos comuns
================================ */
body.contraste-ativo p,
body.contraste-ativo h1,
body.contraste-ativo h2,
body.contraste-ativo h3,
body.contraste-ativo h4,
body.contraste-ativo h5,
body.contraste-ativo h6,
body.contraste-ativo .text-dark,
body.contraste-ativo .text-muted,
body.contraste-ativo .section-title,
body.contraste-ativo .team-content,
body.contraste-ativo .carousel-caption,
body.contraste-ativo .card-body,
body.contraste-ativo .supporting-text {
  color: #ffffff !important;
}

/* ================================
   🃏 Cartões (cards) e bordas
================================ */
body.contraste-ativo .card {
  background-color: #2A2A2A !important;
  border: 1px solid #ffffff33;
}

/* ================================
   🔘 Botões estilizados no contraste
================================ */
body.contraste-ativo .btn,
body.contraste-ativo .btn-outline-primary {
  background-color: #2A2A2A !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.contraste-ativo .btn-primary {
  background-color: #444 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ================================
   ✨ Ícones com cor ajustada
================================ */
body.contraste-ativo i {
  color: #ffffff !important;
}

/* ================================
   🏢 Seção “Sobre Valores” com cores invertidas
================================ */
body.contraste-ativo #pagina-sobre-valores,
body.contraste-ativo #pagina-sobre-valores .team-content,
body.contraste-ativo #pagina-sobre-valores .team-content p,
body.contraste-ativo #pagina-sobre-valores .team-content .member-name,
body.contraste-ativo #pagina-sobre-valores .team-content .member-title,
body.contraste-ativo #pagina-sobre-valores .team-content a,
body.contraste-ativo #pagina-sobre-valores .team-content a i {
  color: #000 !important;
  fill: #000 !important;
}

/* ================================
   🎛️ Menu de acessibilidade
================================ */
.contraste-ativo .menu-acessibilidade {
  background-color: #333 !important;
  color: white !important;
}

.contraste-ativo .menu-acessibilidade button {
  background-color: #555 !important;
  color: white !important;
}

.contraste-ativo .menu-acessibilidade button:hover {
  background-color: #777 !important;
}


/* ================================
   🍪 Banner de Cookies
================================ */
.cookie-banner {
  animation: slideIn 0.6s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

/* ================================
   Pagina Acompanhar
================================ 




/* ================================
   Parte notícia e trasparencia
================================*/

.noticias-transparencia {
  padding: 2rem 0;
}

.noticias-transparencia .section-title {
  color: #0d6efd;
  border-bottom: 2.5px solid #0d6efd;
  max-width: 680px;
}

.btn-container {
  display: flex;
  flex-wrap: wrap; /* Permite que os botões quebrem a linha se necessário */
  justify-content: center;
  gap: 50px; /* Espaço entre os botões */
  margin-top: 30px;
}

.column-group {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espaço entre Notícias e Diário Oficial */
}

.btn-item {
  display: block;
  width: 250px; /* Largura padrão dos botões Notícias e Transparência */
  height: 250px; /* Altura padrão dos botões Notícias e Transparência */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  text-decoration: none;
  /* Adicionando a borda azul externa que parece estar na imagem de referência */
  border: 4px solid #0d6efd; 
}

.btn-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.btn-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Alterado para 'contain' para evitar cortes e mostrar a imagem inteira */
  background-color: white; /* Garante que o fundo da imagem seja branco, se a imagem tiver transparência */
  padding: 10px; /* Adiciona um pequeno padding para simular a borda interna branca */
  box-sizing: border-box; /* Inclui o padding na dimensão total */
}

/* Ajuste para os botões Notícias e Transparência */
.btn-item:not(.new-button) {
  width: 250px;
  height: 250px;
  border: 1px solid #0b0c0e; /* Borda azul externa */
  padding: 0; /* Remove o padding do botão */
}

.btn-item:not(.new-button) img {
  padding: 10px; /* Mantém o padding na imagem para a borda branca interna */
  object-fit: contain;
}

/* Estilo para o NOVO BOTÃO DIÁRIO OFICIAL */
.btn-item.new-button {
  /* O novo botão deve ter a mesma largura que o Notícias, mas altura menor */
  width: 250px; /* Mesma largura do Notícias */
  height: auto; /* Altura automática para se ajustar à imagem */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  text-decoration: none;
  border: none; /* Remove a borda do contêiner */
  padding: 0;
}

.btn-item.new-button img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Garante que a imagem inteira seja visível */
  padding: 0; /* Remove o padding interno da imagem */
  border-radius: 12px; /* Adiciona o border-radius para acompanhar o botão */
  border: 1px solid #0d6efd; /* Adiciona a borda azul diretamente na imagem */
}

/* Media query para responsividade */
@media (max-width: 600px) {
  .btn-container {
    flex-direction: column;
    align-items: center;
  }

  .btn-item {
    width: 90%; /* Ocupa quase toda a largura em telas pequenas */
    max-width: 300px;
    height: auto; /* Altura ajustável */
  }

  .btn-item.new-button {
    width: 90%; /* Ocupa quase toda a largura em telas pequenas */
    max-width: 300px;
    height: auto; /* Altura ajustável */
  }

  .column-group {
    width: 90%;
    max-width: 300px;
  }
}















/* NAVBAR DO SOBRE */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}
nav.navbar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#btn-voltar-topo {
  color: #F09C20 !important; /* cor da seta laranja */
}

#btn-voltar-topo:hover {
  color: #d17e10 !important; /* tom mais escuro ao passar o mouse */
}
/* Diminui o espaço entre o fluxograma e a seção de notícias */
/* Ajuste global de espaçamento entre seções */