@import url("grid.css");
@import url("../../../contraste.css");

:root {
  --bg-color: #f7fdfb;
  --text-color: #1e1b16;
  --primary-color: #25528c;
  --secondary-color: #1c3a61; /* Tom de azul mais escuro para contraste */
  --accent-color: #5d87c1; /* Tom de azul mais claro para destaque */
  --card-bg-color: #fff;
  --border-color: #eee;
  --header-bg: #25528c;
  --header-text: #fff;
}

.dark-mode {
  --bg-color: #1e1b16;
  --text-color: #f0f0f0;
  --primary-color: #2a62a8;
  --secondary-color: #2a62a8;
  --accent-color: #6c93c9; /* Azul claro para destaque no modo escuro */
  --card-bg-color: #2a2a2a;
  --border-color: #3a3a3a;
  --header-bg: #151515;
  --header-text: #f0f0f0;
}

/********** Barra de Acessibilidade no Topo **********/
#top-accessibility-bar {
  background-color: var(--bg-color);
  color: #fff;
  padding: 8px 2%;
  font-size: 0.8rem;
}

#top-accessibility-bar .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 96%;
  margin: 0 auto;
}

#top-accessibility-bar a {
  color: var(--text-color);
  text-decoration: none;
  margin-right: 15px;
  transition: color 0.2s;
}
#top-accessibility-bar { display: none; }
#top-accessibility-bar a:hover {
  color: var(--accent-color);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  margin-right: auto; /* Empurra para a esquerda */
}

.dark-mode #top-accessibility-bar {
  background-color: var(--bg-color);
}

/********** Basic styles **********/
body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: 'Open Sans', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}
a:link,
a:visited,
#content a:link,
#content a:visited {
  color: #1e1b16;
}
.state-published {
  color: #1e1b16 !important;
}
a:hover {
  color: var(--accent-color);
}
#content a:hover,
dl.portlet a:hover {
  color: var(--accent-color) !important;
}
.clear {
  clear: both;
}

#content div.newsImageContainer{
    margin:0;
    float:none;  
    
    
    }
    
    #content div.newsImageContainer img{
    width: 100%;
    height: auto;
    
    padding-top: 40px;
    }
    
    #content .discreet{    
    padding-bottom: 40px;
    font-style: italic;
        
    }
    
    #content .discreet span{         
    background-color: #ffffff9c;    
    }
    
    #content{
        padding-left:5px;
        padding-right:5px;
        }
        
        
        
[href*="/institucional/noticias"]{
    
    padding-left:10px;
     padding-right:10px;
    
    }
    
    
    
/********** Main container **********/
#wrapper {
  padding: 0;
}
#main {
  margin: 0 auto;
  max-width: 92%; /* Ajustado para alinhar com a barra do topo */
  padding-top: 100px;
}
/********** Header **********/
header {
  background-color: var(--header-bg);
  color: var(--header-text);
  position: relative; /* Necessário para o posicionamento do botão mobile */
  z-index: 100; /* Garante que o header e seu conteúdo (menu) fiquem acima dos breadcrumbs */
  transition: background-color 0.3s ease;
}
#header-banner {
  background-color: var(--header-bg);
}
header a:link {
  color: #000;
}
header a:visited {
    color: var(--header-text);
    }
header a:hover {
  color: #fff;
}

#siteTitle{
    margin-top:25px;
    }

#titleHeader    {
    color:#fff;
    font-size: 0.9em;
    }
/* Logo */
#portal-logo {
  display: block;
  float: left;
  margin: 1.5em;
}

#portal-personaltools {
  position: relative;
  top: 10px;
  right: 10px;
  background:var(--secondary-color, #1c3a61);
  padding: 0.5em 1em;
  font-size: 80%;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  z-index: 102;
  display: none;  
}

#portal-personaltools a {
  color: #f9f9f9;
}

#portal-personaltools dd a:hover {
  background: #f9f9f9;
  color: #000000;
}

#portal-siteactions {
  text-align: right;
  margin-right: 1em;
  font-size: 100%;
  display: flex;
  gap: 1em; /* Adiciona um espaçamento entre os itens */
  justify-content: flex-end; /* Alinha os itens à direita */
}
#portal-siteactions li {
  display: flex;
  align-items: center;
}
#portal-siteactions a:before {
  font-family: FontAwesome;
  font-size: 1em;
  margin-right: 0.3em;
}
#siteaction-contact a:before {
  content: "\f0e0";
}
#siteaction-sitemap a:before {
  content: "\f0e8";
}
#siteaction-accessibility a:before {
  content: "\f118";
}
#siteaction-search a:before {
  content: "\f002";
}
#siteaction-login a:before {
  content: "\f090";
}
#siteaction-contraste a:before {
  content: "\f042";
}
#siteaction-vlibras a:before {
  content: "\f087";
}
#portal-siteactions li a{
    color: var(--header-text);
}

#siteTitle{     
    color: var(--header-text);
}
#siteDescripition{
    color:#fff;
}


#portal-siteactions li a:hover {
  color: #a3ffa6;
  transition-duration:0.3s;
}
.banner-home {
  height: 250px;
  background-image: url('../img/banner.jpg');
  background-size: cover;
  background-position: center center;
}
/* search */
#portal-searchbox {
  margin: 1.5em;
  position: relative;
  float:right;
  clear:right;
  font-size: 80%;
  display: flex; /* Usa flexbox para alinhar o campo e o botão */
}

#portal-searchbox input.searchField {
  min-width: 20em;
  width: 100%;
  height: 38px;
  text-indent: 1em;
  line-height: 38px;
  padding-right: 40px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--header-text);
  transition: all 0.3s ease;
}

#portal-searchbox input.searchField::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#portal-searchbox input.searchField:focus {
  background-color: #fff;
  color: var(--text-color);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-color);
}

#portal-searchbox .searchButton {
  font-family: FontAwesome;
  position: absolute;
  right: 0;
  top: 0;
  height: 38px;
  width: 40px;
  border: none;
  border-radius: 0 8px 8px 0 !important;
  background-color: var(--secondary-color);
  color: var(--header-text);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#portal-searchbox .searchButton:hover {
  background-color: var(--accent-color);
}

/* Navigation */
#main-navigation {
  margin: 0;
  clear: both;
  background: var(--primary-color);
  color: #fff;
  
}
#main-navigation ul {
  padding: 0.3em;
  text-align: right;
  display:none;
}
#main-navigation li {
  display: inline-block;
}

#main-navigation li::after {
  content: '';
  position: absolute;
  margin: auto;
  right: -2px;
  top: 0;
  bottom: 0;
  background-color: #fff;
  border-radius: 50%;
  width: 4px;
  height: 4px;
}

#main-navigation li:last-child::after {
  display: none;
}

#main-navigation li a:link {
  font-size: 80%;
  text-decoration: none;
  display: block;
  padding: 0 1em;
}

#main-navigation li a:link,
#main-navigation li a:visited {
  color: #fff;
}

/* Mobile Menu button colors */

.menu-button{
  background: #ffffff;
  display:none;
}

.menu-button button{
  border-color: black;
  background: none;
  color: black;
}

.menu-button > button:hover {
  background: #DDD !important;
}

.menu-button > button.menuAtivo {
  background: #DDD; 
}

/********** Content **********/
/* breadcrumb */
#portal-breadcrumbs {
  position: absolute; /* Posição abaixo do header */
  top: 230px;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  max-width: var(--max-width, 1200px); /* Garante que não fique muito largo em telas grandes */
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-color);
  padding: 0.8em 1.2em;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 0.8em;
  clear: both;
  z-index: 99;
  color: var(--text-color);
}
#portal-breadcrumbs a {
  color: var(--primary-color);
  text-decoration: none;
}
#portal-breadcrumbs a:hover {
  text-decoration: underline;
}

.section-front-page #portal-breadcrumbs {
  visibility: hidden;
}
/* text styles */
p {
  line-height: 1.4em;
}
h1 {
  color: var(--primary-color);
  border: none;
  margin-bottom: 0;
  font-size: 2.5em;
}
h2 {
  color: var(--primary-color);
}
#content {
  margin: 0;
}
#content .documentDescription,
#content #description {
  color: #4d4d4d;
  font-weight: normal;
  margin-bottom: 1em;
}

.tile-header h2, .tile-content h2 {
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

.documentFirstHeading {
    font-size: 2.2em;
    margin-bottom: 0.5em;
}

.tile-noticias .collection-item {
    float: left;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 1.5em;
    padding-bottom: 0.4em;
    border-bottom: 1px dotted #ccc;
}

.tile-noticias .collection-item:nth-child(odd) {
    margin-right: 0;
}

.tile-noticias .collection-item a img {
    margin: 0;
    float: none;
    width: 100%;
    height: auto;
}

.tile-noticias .collection-item > a {
    width: 100%;
    display: block;
    margin-bottom: 0.5em;
}

#content .tile-noticias .collection-item p {
    margin-bottom: 0.25em;
}

.tile-noticias .collection-item p.description {
    font-size: 1.1em;
}

#content .tile-noticias .tile-footer a {
  float: right;
  padding: 1.075em 1.2em;
  background-color: var(--primary-color);
  color: #ffffff !important;
  font-weight: bold;
  text-transform: uppercase;
  transition: all ease-out 0.1s;
}

#content .tile-noticias .tile-footer a:hover {
  background: var(--accent-color);
  color: #fff !important;
}

.tile img.right{
    margin-right:0px;
     height:250px;
     object-fit:cover;       
     max-width:100%;   
     margin: 0 -10px 0.5em 0;
    }
    
    .tile img.left{        
        height:300px;
        object-fit:cover;       
        max-width:100%;
        margin: 0 -10px 0.5em 0;
    }
    
#parent-fieldname-text p{
    font-size: 1.3em;
    padding: 10px;
    }

/*********** Portlets ***********/
/* general styles */
.portletHeader,
dl.portlet dt.portletHeader {
  border-bottom: #E6E6E6 1px solid;
  font-weight: bold;
  background-color: transparent;
  color: var(--primary-color);
}
.portletHeader a,
dl.portlet dt.portletHeader a {
  color: var(--primary-color);
  transition: all ease-out 0.1s;
}
.portlet {
  margin-bottom: 2em;
  background: var(--card-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: background-color 0.3s ease;
}
/* lists inside columns */
aside dl,
aside dd,
aside ul {
  padding: 0;
  margin: 0;
}
aside a {
  text-decoration: none;
}
/* portlet navigation */
.portletNavigationTree ul {
  margin: 0;
}
.portletNavigationTree li {
  list-style-position: inside;
}
.portlet.portletNavigationTree .navTree .navTreeItem {
  margin: 0;
}
.portlet.portletNavigationTree .navTreeLevel0 > .navTreeItem {
  padding: 0;
}
.portlet.portletNavigationTree .navTree > .navTreeItem {
  border-bottom: rgba(37, 82, 140, 0.05) 1px solid;
  list-style: none;
}
.portlet.portletNavigationTree .navTreeLevel1 .navTreeItem {
  padding-left: 1em;
}
.portlet.portletNavigationTree .navTreeLevel1 .navTreeItem:last-of-type {
  border-bottom: none;
}
.portlet.portletNavigationTree .navTree .navTreeItem a {
  display: block;
  padding: 0.8em 1em;
  transition: all ease-out 0.1s;
  line-height: initial;
}
.portlet.portletNavigationTree .navTree .navTreeItem a:hover {
  background-color: rgba(37, 82, 140, 0.05);
}
.portlet.portletNavigationTree .navTree .navTreeItem a.navTreeCurrentItem {
  background-color: rgba(37, 82, 140, 0.2);
}
dl.portlet ul.navTree .navTreeCurrentItem {
  border-left: none;
  margin: 0;
}
.navTreeLevel2 a {
  padding-left: 1em;
}
.navTreeLevel3 a {
  padding-left: 2em;
}
.navTreeLevel4 a {
  padding-left: 3em;
}
.navTreeLevel5 a {
  padding-left: 4em;
}
.navTreeLevel6 a {
  padding-left: 5em;
}
.portlet .portletHeader > a, .portlet .portletHeader > span:nth-child(2) {
  display: block;
  color: var(--primary-color);
  padding: 0.7em 0em;
  font-size: 1.2em;
}
.portlet .portletHeader > a:hover {
  background-color: initial;
  color: var(--accent-color) !important;
}
.portlet .portletHeader {
  padding: 0;
  background-color: #f7fdfb;
  border-radius: 8px 8px 0 0;
  padding: 0 1em;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/********** Footer **********/
footer {
  border-top: none;
  margin-top: 2em;
  font-size: 80%;
  background-color: var(--card-bg-color);
  color: var(--text-color);
}

.footer-address {
  padding: 2em 2%;
  background-color: var(--card-bg-color);
  text-align: center;
  line-height: 1.6;
  font-size: 1.1em;
  text-align: justify;
}

.footer-address a {
  color: var(--secondary-color) !important;
  text-decoration: none;
}

.footer-address a:hover {
  text-decoration: underline;
}

/* Garante que listas dentro do footer-info fiquem alinhadas à esquerda */
.footer-address ul, .footer-address ol {
  text-align: left;
  display: inline-block; /* Permite que a lista se centralize como um bloco, mas o texto interno fique à esquerda */
}

#footer-colophon {
  padding: 2rem 2%;
  text-align: center;
  background-color: var(--secondary-color);
  color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.colophon-item {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 400px;
  text-align: left;
}

.colophon-item a {
  color: #fff !important;
  font-weight: bold;
  text-decoration: none;
}

.colophon-item a {
  font-weight: 700;
}

.colophon-item img {
  height: 40px;
  flex-shrink: 0;
}

.colophon-info {
    font-size: 12px;
    line-height: 1.5;
}

#footer-camara {
  background: none;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  padding-bottom: 2em;
}


.colophon-logo {
  height: 40px
}

.subsection-noticias #main{    
    width:70%    
    }
/********* RESPONSIVE **********/

/********** Menu Principal Moderno **********/
#btn-mobile {
  display: none;
}

.cover-embed-tile{
    padding-bottom: 0; /* Remove o espaçamento extra abaixo dos iframes */
}
/* Desktop - Mega Menu */
.cms-menu {
  display: flex;
  justify-content: center;
  background-color: var(--primary-color);
  position: absolute;
  width: 100%;  
  height: 60px;
  align-items: center;
}

.cms-menu .cms-menu__list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.cms-menu .cms-menu__item {
  position: relative; /* Mantém o contexto para o submenu */
  transition: background-color 0.3s ease, transform 0.3s ease, border-radius 0.1s ease;
  border-radius: 8px; /* Adiciona bordas arredondadas ao item */
  margin: 0 2px; /* Adiciona um pequeno espaçamento entre os itens */
}

.cms-menu .cms-menu__item > a {
  display: block;
  padding: 18px 25px; /* Ajuste no padding para manter a altura do menu */
  color: white;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  transition: color 0.3s ease; /* A transição de background foi movida para o <li> */
  border-radius: 8px;
  position: relative; /* Para garantir que o link fique sobre o fundo do <li> */
  z-index: 1;
}

/* Efeito hover apenas em telas maiores (desktop) para evitar bug no mobile */
@media(min-width: 961px) {
  .cms-menu .cms-menu__item:hover {
    background-color: var(--accent-color);
    transform: translateY(-2px); /* Efeito de elevação sutil */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra para dar profundidade */
  }

  /* Quando o submenu está visível, ajusta o border-radius do item pai para criar um efeito contínuo */
  .cms-menu .cms-menu__item:hover:has(.cms-menu__list) {
    border-radius: 8px 8px 0 0;
  }
}

/* Estilo para links de menu que não são clicáveis */
.no-link {
  cursor: default;
}

/* Submenu */
.cms-menu .cms-menu__item .cms-menu__list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--secondary-color);
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  flex-direction: column;
  padding: 10px 0;
  border-radius: 0 0 8px 8px;
  z-index: 101; /* Garante que o submenu fique acima dos breadcrumbs (z-index: 99) */
}

/* Efeito hover apenas em telas maiores (desktop) */
@media(min-width: 961px) {
  .cms-menu .cms-menu__item:hover .cms-menu__list {
    display: flex;
  }
}

.cms-menu .cms-menu__item .cms-menu__list .cms-menu__item {
  width: 100%;
}

.cms-menu .cms-menu__item .cms-menu__list .cms-menu__item a {
  padding: 12px 20px;
  width: 100%;
  box-sizing: border-box;
}

.cms-menu .cms-menu__item .cms-menu__list .cms-menu__item a:hover {
  background-color: var(--accent-color);
}


/********** Controles de Acessibilidade (Fonte) **********/
#fonteAjuste {
    display: flex;
    align-items: center;
    gap: 5px;
    float: right;
    margin: 1.9em 1em 0 0; /* Alinha verticalmente com a busca */
}

#fonteAjuste button {
  font-size: 11px;
  padding: 6px 10px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background-color: var(--secondary-color);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

#fonteAjuste button:hover {
   background-color: var(--accent-color);
}

.dark-mode #fonteAjuste button {
    background-color: var(--primary-color);
}

/* Dark Mode Toggle Switch */
.dark-mode-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.dark-mode-label {
  cursor: pointer;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--header-text);
  transition: color 0.3s ease;
}

.dark-mode-label:hover {
  color: var(--accent-color);
}

.dark-mode-label::before {
  content: '\f185'; /* Ícone de sol */
}

.dark-mode-input:checked + .dark-mode-label::before {
  content: '\f186'; /* Ícone de lua */
}

.dark-mode .dark-mode-label:hover {
  color: var(--accent-color);
}

/********** Media Queries para Menu e outros ajustes **********/
@media(max-width: 960px) {
    #fonteAjuste {
        display: none;
    }

    #iframeservicos { padding: 1em 0; }

    /* Menu Mobile - Off-canvas */
    #btn-mobile {
      display: block;
      position: absolute; 
      top: 25px;
      right: 20px;
      z-index: 101;
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px;
      color: var(--header-text); /* Garante que o ícone do menu seja branco */
    }
    /* O botão de fechar (X) fica fixo na tela quando o menu está ativo */
    #btn-mobile.active {
      position: fixed;
      top: 25px;
      right: 20px;
    }
    #btn-mobile::before {
      content: '\f0c9'; /* Ícone de hambúrguer (bars) do Font Awesome */
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      font-size: 1.8rem;
    }
    #btn-mobile.active::before {
      content: '\f00d'; /* Ícone de fechar (times) */
    }
    
    .cms-menu {
      display: block;
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%; /* Ocupa a tela inteira */
      height: 100vh;
      background-image: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
      transition: right 0.4s ease-in-out;
      overflow-y: auto;
      padding-top: 80px;
    }
    .cms-menu.active {
      right: 0;
    }
    .cms-menu .cms-menu__list {
      flex-direction: column;
      align-items: flex-start;
    }
    .cms-menu .cms-menu__item {
      width: 100%;
    }
    .cms-menu .cms-menu__item > a {
      padding: 15px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .cms-menu .cms-menu__item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .cms-menu .cms-menu__item > a {
      flex-grow: 1;
    }
    .cms-menu .cms-menu__item .cms-menu__list {
      display: block;
      position: static;
      background-color: transparent;
      box-shadow: none;
      padding: 0;
      width: 100%;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .cms-menu .cms-menu__item .cms-menu__list .cms-menu__item a {
      padding-left: 40px;
    }
    .submenu-toggle {
      display: none;
    }

    .submenu-toggle {
      display: block;
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 1.2rem;
      padding: 15px; 
      /* Alinha o ícone com o texto do menu */
      margin-left: auto; /* Empurra o botão para a direita */
    }
    .submenu-toggle::before {
      content: '\f078'; /* Seta para baixo do Font Awesome */
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      transition: transform 0.3s ease;
    }
    .submenu-toggle.active::before {
      transform: rotate(-180deg);
    }
}

/* Landscape phones and down */
@media (max-width: 767px) {
    
   .subsection-noticias #main{    
    width:92%    
    }
    
    #main {      
      padding-top:0px;
   }
    
    #main-navigation ul {
        display: none;
        }
    
     #content{
        padding-left:0;
        padding-right:0;
        }    
    #iframeservicos { padding: 1em 0; }
    
    #portal-logo {
      display: inline-block;
      font-size: 90%;
    }

    #portal-logo.has-title img {
      display: grid;
      width:55px;
      height:auto;
    }
    
    #siteTitle{
        margin-top:15px;
        font-size:1.2em;
        
        
        }

    #main-navigation ul {
      box-sizing: border-box;
      padding: 0;
      padding-right: 0.5em;
      text-align: center;
      float: none;
      width: 100%;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden; 
      -webkit-overflow-scrolling: touch;
  }

    #main-navigation ul::after {
      content: '';
      
      height: 43px;
      position: absolute;
      pointer-events: none;
      right: 0;
      top: 0;
      width: 2.2em;
      z-index: 10;
    }

    #main-navigation li {
      float: none;
    }

    #main-navigation li a:link {
      padding: 1.2em 1.5em;
      line-height: 1;
    }

    #portal-searchbox {
      margin: 1em auto; /* Centraliza e adiciona margem vertical */
      float: none;
      clear: both;
      font-size: 80%;
      width: 90%; /* Define uma largura para o container da busca */
      position: relative; /* Necessário para o posicionamento absoluto do botão */
      max-width: 400px; /* Limita a largura máxima */
      padding-bottom: 2em;
    }

    #portal-searchbox .searchButton {
      width: 45px;
      border-radius: 8px !important; /* Aplica borda arredondada em todos os lados */
      position: absolute; /* Remove o posicionamento absoluto para alinhar com o flex */
    }

    .colophon-item {
      max-width: 96%;
      margin: 1.5rem 2%;
    }
    #footer-colophon {
      flex-direction: column;
      gap: 25px;
      padding: 1.5rem 5%;
    }
    
     .cover-richtext-tile .tile-content {
        padding-left:25px;
        }

}


@media (max-width: 480px) {
  .tile-noticias .collection-item {
    width: 100%;
    margin-right: 0;
  }       
   #content{
        padding-left:0;
        padding-right:0;
        }
}

/********** Início: Estilos para Galeria de Lista (List Gallery) **********/
.list-gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-height: 350px; /* Altura mínima para evitar colapso */
}

.list-gallery__slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.list-gallery__slide {
  min-width: 100%;
  box-sizing: border-box;
  position: relative; /* Mantido para o posicionamento da legenda */
  height: 100%;
  padding-bottom: 100%; /* Proporção 1:1 para um quadrado perfeito */
}

.list-gallery__slide a {
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.list-gallery__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem cubra todo o espaço */
  transition: transform 0.5s ease;  
}

.list-gallery__slide:hover .list-gallery__image {
  transform: scale(1.05);
}

.list-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 20px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  transition: background 0.3s ease;
}

.list-gallery__title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #fff;
}

.list-gallery__description {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.list-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  background-color: rgba(255, 255, 255, 0.9);
  color: white;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.8rem;
  z-index: 10;
  transition: all 0.3s ease;
  opacity: 0;
  color: #333;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.list-gallery:hover .list-gallery__nav {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.list-gallery__nav:hover {
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.list-gallery__nav--prev {
  left: 15px;
}

.list-gallery__nav--next {
  right: 15px;
}

@media (max-width: 767px) {
  .list-gallery__slide { padding-bottom: 100%; }
  .list-gallery__title { font-size: 1.4rem; }
  .list-gallery__description { display: none; }

  #portal-breadcrumbs {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin: 1em 0;
  }
}
/********** Fim: Estilos para Galeria de Lista **********/

/* Estilos da galeria para Desktop (Grid) */
@media (min-width: 768px) {
  .list-gallery {
    box-shadow: none;
    border-radius: 0;
    min-height: unset;
  }
  .list-gallery__slides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    transform: none !important; /* Impede a translação do JS */
  }
  .list-gallery__slide {
    border-radius: 8px;
    overflow: hidden; /* Garante que a imagem arredondada não vaze */
  }
  .list-gallery__nav {
    display: none; /* Oculta os botões de navegação no desktop */
  }
}
