/* ============================================================
   COLUNA CENTRAL INICIAL - Layout de notícias dinâmicas
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.menu-mobile{
  display: none;
}

.btn-toggle-filtros-eventos,
.btn-toggle-filtros-noticias,
.btn-toggle-filtros-analises,
.btn-toggle-filtros-lancamentos{
  display: none;
}
   
.grid-linha1,
.grid-linha2 {
  display: flex;
  grid-template-columns: repeat(4, 1fr); /* mantém as 4 colunas */
  gap: 20px;
  width: 100%;
}   


   /* Linha 1 - Layout com 4 colunas */
.grid-linha1 {
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  width: 100%;
  margin-bottom: 30px;
}

/* ============================================================
   CONTAINER PRINCIPAL COM COLUNAS LADO A LADO
   ============================================================ */
.container-principal {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.coluna-2 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-600px); /* metade da largura da coluna 2 (1200px) */
  width: 1200px;
  height: 100%;
  /*box-sizing: border-box;*/
  overflow: hidden;
}

/* Cartão de manchete ocupando 3 colunas */
.card-manchete {
  min-height: 220px;
  background-color: #f2cbbd22;
  padding: 40px 20px;
  border-radius: 10px;
  text-align: center;
  color: var(--vermelho-escuro);
}

/* Linha 2 - 4 colunas com scroll interno */
.grid-linha2 {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
  padding-top: 20px; /* mantido */
  padding-bottom: 0; /* retira o espaço que “afunda” a linha */
  min-height: 100%;
}

/* Cada coluna com scroll interno e cards empilhados */
.coluna-scroll {
  /*height: 100%; /* o tamanho do grid-linha2 está aqui */
  overflow-y: auto;
  padding-right: 6px; /* espaço pro scroller */
}

/* Cartões internos da segunda linha */
.coluna-scroll .card {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Títulos */
.card-titulo {
  font-family: var(--fonte-titulo-padrao);
  font-size: 16px;
  font-weight: bold;
  color: var(--vermelho-escuro);
  margin-bottom: 8px;
}

/* Texto */
.card-texto {
  font-family: var(--fonte-corpo-padrao);
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}


/* ============================================================
   CARD MANCHETE
   ============================================================ */

.card-manchete {
  position: relative;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* Retícula escura */
.manchete-overlay {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  display: flex;
  align-items: flex-end;
  margin-bottom: -40px;
  padding: 16px 24px;
  padding-bottom: 30px;
  box-sizing: border-box;
}

/* Área de texto da manchete */
.manchete-conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* garante alinhamento à esquerda */
  color: #ffffff;
  max-width: 80%;
}

/* Título forte, Cinzel */
.manchete-titulo {
  font-family: var(--fonte-titulo-padrao);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 4px 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.manchete-texto {
  font-family: var(--fonte-corpo-padrao);
  font-size: 14px;
  margin: 0;
  color: #f0f0f0;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* === ESTILOS NOVOS PARA O CARROSSEL DE MANCHETES === */

.carrossel-manchetes {
  position: relative;
  width: 100%;
  height: 220px; /* altura correta conforme sua estrutura */
  overflow: hidden;
  display: flex;
  align-items: center;
}

.container-manchetes {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slides-manchetes {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}

.card-manchete {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  border-radius: 12px;
  overflow: hidden;
}

/* === BOTÕES DO CARROSSEL AJUSTADOS === */

.btn-carrossel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background-color: rgba(0, 0, 0, 1);
  border: none;
  color: white;
  font-size: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.btn-carrossel:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.btn-carrossel.prev {
  left: -5px;
}

.btn-carrossel.next {
  right: -5px;
}


/* === DOTS (INDICADORES) === */
.dots-container {
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: rgba(255, 255, 255, 1);
}


/*---------cards--------*/

.manchete-01 {
  background-image: url('../imagens/MANCHETE_01.jpg');
}

.manchete-02 {
  background-image: url('../imagens/MANCHETE_02.jpg');
}

.manchete-03 {
  background-image: url('../imagens/MANCHETE_03.jpg');
}

.manchete-04 {
  background-image: url('../imagens/MANCHETE_04.jpg');
}

.manchete-05 {
  background-image: url('../imagens/MANCHETE_05.jpg');
}

.manchete-06 {
  background-image: url('../imagens/MANCHETE_06.jpg');
}

.manchete-07 {
  background-image: url('../imagens/MANCHETE_07.jpg');
}

.manchete-08 {
  background-image: url('../imagens/MANCHETE_08.jpg');
}

.manchete-09 {
  background-image: url('../imagens/MANCHETE_09.jpg');
}

.manchete-10 {
  background-image: url('../imagens/MANCHETE_10.jpg');
}



/* Grifo animado abaixo do item ativo */
.grifo-animado {
  height: 4px;
  width: 80px;
  background-color: var(--cor-primaria, #033E8C);
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease;
}

.menu-superior {
  position: relative;
}

/* Ocultação e exibição suave */
.oculto {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.visivel {
  display: block;
}

.oculto {
  display: none !important;
}

#conteudo-inicial {
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   SISTEMA DE LAZY LOADING - Coluna 2
   ============================================================ */

/* Container do conteúdo dinâmico */
.conteudo-dinamico {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
  transition: opacity 0.3s ease;
  min-height: 100vh;
}

/* Placeholder inicial */
.conteudo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60%;
  color: #999;
  text-align: center;
}

.conteudo-placeholder i {
  font-size: 64px;
  margin-bottom: 20px;
  color: var(--azul-claro);
}

.conteudo-placeholder p {
  font-size: 18px;
  font-family: var(--fonte-corpo-padrao);
}

/* Loading spinner */
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.spinner-icon {
  font-size: 40px;
  color: var(--azul-medio);
  animation: spin 1s linear infinite;
}

.loading-spinner p {
  margin: 0;
  font-family: var(--fonte-corpo-padrao);
  color: #666;
  font-size: 14px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Classe utilitária para ocultar elementos */
.oculto {
  display: none !important;
}

/* Estilos para conteúdo carregado */
.conteudo-carregado {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}