/* =========================================
   1. VARIÁVEIS DE TEMA (NOVO LAYOUT)
========================================= */

:root {
  --cor-primaria: rgb(128, 160, 52);
  --cor-primaria-hover: rgb(105, 133, 40);
  --cor-secundaria: rgb(252, 200, 0);
  --cor-destaque: rgb(194, 37, 39);
  --cor-fundo-claro: #f7f6f2;
  --cor-texto-escuro: rgb(50, 50, 50);
  --cor-cinza-borda: rgb(208, 208, 214);
}

/* =========================================
   2. GERAL
========================================= */

a {
  text-decoration: none;
  color: var(--cor-primaria);
}

.logo img {
  padding:10px 0;
  height:100px;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--cor-fundo-claro);
  font-family: 'Raleway', sans-serif;
  color: var(--cor-texto-escuro);
}

/* Barra flutuante que envolve os botões */
.banner-tabs-wrapper {
  margin-top: -40px; /* Sobe a barra sobre o banner */
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 15px;
}

/* Transforma o container das abas em uma cápsula elegante */
.banner-tabs {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  padding: 8px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  gap: 5px;
}

/* Estilização dos botões (Links das Abas) */
.banner-tabs .nav-link {
  color: var(--cor-texto-escuro);
  background: transparent;
  border: none;
  border-radius: 40px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Efeito de Hover (Passar o mouse) */
.banner-tabs .nav-link:hover {
  color: var(--cor-primaria);
  background-color: rgba(128, 160, 52, 0.1);
}

/* Estado Ativo (Aba selecionada) */
.banner-tabs .nav-link.active {
  color: #fff !important;
  background-color: var(--cor-primaria) !important;
  box-shadow: 0 8px 20px rgba(128, 160, 52, 0.3);
}

/* Ajuste fino dos títulos das seções dentro das abas */
.section-title {
  color: var(--cor-texto-escuro);
  font-weight: 900;
  font-size: 2.2rem;
  margin-bottom: 35px;
  font-family: 'Raleway', sans-serif;
  position: relative;
  padding-bottom: 10px;
}

/* Linha decorativa minimalista abaixo do título */
.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 4px;
  background-color: var(--cor-secundaria);
  border-radius: 2px;
}

/*----- SCROLL PARA O TOPO -----*/
		  
.scrollTop {
  position: fixed;
  right:10px;
  bottom:40px;
  width:50px;
  height:50px;
  background-color:rgb(33, 126, 21);
  padding:6px;
  line-height:16px !important;
  text-align:center;
  border:1px solid rgba(0,0,0,.1);
  cursor:pointer;
  opacity: 0;
  border-radius:3px;
  transition: all 0.4s ease-in-out 0s;
}
  
.scrollTop a {
  font-size: 14px;
  color: #fff;
  font-weight:600;
  text-decoration:none;
  text-align:center;
  line-height:16px !important;
  padding:0;
  margin:0;
}
  
.scrollTop a:hover {
  color: #fff;
}

/* --- MODAL AVISO ----- */

.modal-header {
	position:relative;
	background-color: rgb(128,160,52);
	color:rgb(255,255,255) !important;
}
  
.modal-header button {
	position: relative;
	right:0;
	top:0;
	border:0 !important;
}
  
.modal-title {
	margin-top:0;
	width:100%;
	text-align: center;
}
  
.modal-body {
	display: flex;
	flex-direction: column;
}

.padding-busca {
  padding:15px;
  border-radius: 8px;
}

.btn-padrao-busca , .btn-voltar {
  color: #FFF !important;
  background-color: rgb(128,160,52) !important;
  padding:8px 14px !important;
  border:0 !important;
  border-radius:20px !important;
  margin:1px !important;
  font-size:15px !important;
  line-height:15px !important;
  height:35px !important;
}

.btn-padrao-busca svg {
  font-size:12px !important;
}

.btn-padrao-busca:hover, .btn-voltar:hover {
  background-color:rgb(252,200,0) !important;
  text-decoration: none !important;
  color:#FFF !important;
}

/* Botão Padrão para Conteúdo de Páginas */
.btn-padrao {
    display: inline-block;
    padding: 12px 28px;
    background-color: rgb(128, 160, 52);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 8px;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

.btn-padrao:hover {
    background-color: rgb(105, 133, 40);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    color: #ffffff !important;
}

/* =========================================
   3. CARDS E COMPONENTES (NOVO LAYOUT)
========================================= */

/* Cards de Experiência (Fundo Verde) */
.card-experiencia {
  background-color: var(--cor-primaria);
  color: #fff;
  border-radius: 20px;
  padding: 40px 20px;
  text-align: center;
  transition: transform 0.2s ease-in-out;
  height: 100%;
}
.card-experiencia:hover { transform: translateY(-5px); }
.card-experiencia h4 { font-size: 1.2rem; margin-top: 15px; font-weight: bold; }

/* Cards Planeje sua Viagem (Verticais) */
.card-planeje {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  height: 450px;
}
.card-planeje img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;
}
.card-planeje:hover img { transform: scale(1.05); }
.card-planeje .overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  padding: 40px 20px 20px 20px;
  text-align: center;
}
.card-planeje .overlay h4 { color: #fff; font-weight: bold; font-size: 1.5rem; text-transform: uppercase; }

/* Notícias */
.card-noticia-principal {
  position: relative; border-radius: 20px; overflow: hidden; height: 100%; min-height: 400px;
}
.card-noticia-principal img { width: 100%; height: 100%; object-fit: cover; }
.card-noticia-principal .overlay {
  position: absolute; bottom: 0; width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 30px;
}
.card-noticia-principal h3 { color: #fff; font-weight: bold; }

.noticia-lateral-item {
  display: flex; align-items: center; gap: 20px; margin-bottom: 25px; position: relative;
}
.noticia-lateral-item img {
  width: 150px; height: 120px; object-fit: cover; border-radius: 20px; border: 3px solid var(--cor-primaria);
}
.noticia-lateral-item h5 { font-size: 1.1rem; font-weight: bold; color: var(--cor-texto-escuro); margin:0;}

/* =========================================
   4. HEADER
========================================= */

/* =========================================
   MENU PRINCIPAL (DESKTOP) - ESTRUTURA ROBUSTA
========================================= */

.dynamika-menu-nav-forest ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* --- Itens Principais (Raiz - 1º Nível) --- */
.dynamika-menu-li-root {
    padding: 0 16px !important; 
    height: 100px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    z-index: 10 !important;
    background-color: transparent !important;
    border: none !important;
}

.dynamika-menu-a-root {
    color: rgba(50, 50, 50, 0.6) !important; /* Cinza suave neutro */
    font-weight: 700 !important; 
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: color 0.3s ease !important;
}

/* Linha verde animada sob o texto no 1º Nível */
.dynamika-menu-a-root::after {
    content: '' !important;
    position: absolute !important;
    bottom: 30px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 2px !important;
    background-color: var(--cor-primaria) !important;
    border-radius: 2px !important;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.dynamika-menu-a-root:hover,
.dynamika-menu-li-root:hover .dynamika-menu-a-root {
    color: var(--cor-texto-escuro) !important; /* Escurece o texto */
}

.dynamika-menu-li-root:hover .dynamika-menu-a-root::after {
    width: 100% !important; /* A linha cresce */
}


/* --- Submenus (Dropdowns - 2º Nível - Filhos) --- */
.dynamika-menu-span-items {
    display: none !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 85px !important; /* Mais colado no menu */
    left: 0 !important;
    width: 250px !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    border-top: 3px solid var(--cor-primaria) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    z-index: 999 !important;
}

/* Ponte invisível para o mouse não "cair" do menu */
.dynamika-menu-span-items::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    left: 0 !important;
    width: 100% !important;
    height: 15px !important;
    background: transparent !important;
}

.dynamika-menu-li-root:hover .dynamika-menu-span-items {
    display: flex !important;
}

.dynamika-menu-li-link {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.dynamika-menu-a-link {
    display: block !important;
    color: var(--cor-texto-escuro) !important;
    font-size: 13px !important;
    line-height: 16px !important;
    text-align: left !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.dynamika-menu-li-link:last-child .dynamika-menu-a-link {
    border-bottom: none !important;
}

.dynamika-menu-a-link:hover {
    color: var(--cor-primaria) !important;
    padding-left: 28px !important; /* Empurra o texto levemente */
    background-color: rgba(128, 160, 52, 0.03) !important; /* Fundo esverdeado */
}


/* --- Submenus (Dropdowns - 3º Nível - Netos) --- */
.dynamika-menu-span-sub {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.dynamika-menu-span-sub a {
    display: block !important;
    text-decoration: none !important;
}

/* Título que abre o 3º nível */
.dynamika-menu-span-sub h3 {
    display: block !important;
    color: var(--cor-texto-escuro) !important;
    text-align: left !important;
    font-size: 12px !important;
    line-height: 14px !important;
    font-weight: bold !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.dynamika-menu-span-sub h3:hover {
    color: var(--cor-primaria) !important;
    padding-left: 25px !important;
    background-color: rgba(128, 160, 52, 0.03) !important;
}

/* O Dropdown do Neto */
.dynamika-menu-span-sub a + ul {
    display: none !important;
    flex-direction: column !important;
    position: absolute !important;
    top: -3px !important; 
    left: 100% !important; /* Abre para a direita */
    width: 250px !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    border-top: 3px solid var(--cor-primaria) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    z-index: 1000 !important;
}

/* Ponte invisível lateral para não perder o hover do Neto */
.dynamika-menu-span-sub a + ul::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -15px !important;
    width: 15px !important;
    height: 100% !important;
    background: transparent !important;
}

.dynamika-menu-span-sub:hover a + ul {
    display: flex !important;
}

.dynamika-menu-span-sub ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.menu-fechado {
  display: none;
}

/* =========================================
   7. PÁGINAS INTERNAS (INSTITUCIONAL / NOTÍCIAS)
========================================= */

/* Banner Interno - Imagem de fundo com overlay escuro para o título brilhar */
#banner-interno-moderno {
    width: 100vw;
    height: 300px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url('../images/fundo-bc.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.titulo-interno-moderno {
    color: #fff;
    font-weight: 900;
    font-family: "Raleway", sans-serif;
    font-size: 2.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Card Principal de Conteúdo - Efeito "Overlapping" (Sobreposição) */
.card-institucional {
    background-color: #ffffff;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    margin-top: -80px; /* Faz o card subir por cima do banner */
    position: relative;
    z-index: 10;
}

/* Título da Página / Notícia */
.titulo-pagina {
    color: var(--cor-texto-escuro);
    font-weight: 900;
    font-family: "Raleway", sans-serif;
    font-size: 2.2rem;
    line-height: 1.3;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}

.titulo-pagina::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 5px;
    background-color: var(--cor-secundaria); /* Detalhe em amarelo/dourado */
    border-radius: 3px;
}

/* Formatação da área de leitura */
.conteudo-texto {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(50, 50, 50, 0.85);
}

.conteudo-texto p {
    margin-bottom: 1.5rem;
}

/* Slider Interno */
.slider-institucional .slide-item-moderno img {
    object-fit: cover;
    max-height: 450px;
    width: 100%;
}

/* Caixa de Anexos e Documentos */
.box-anexos {
    background-color: rgba(128, 160, 52, 0.05); /* Fundo verde super claro */
    border: 1px solid rgba(128, 160, 52, 0.15);
    border-radius: 20px;
    padding: 30px;
}

.titulo-secao-pequeno {
    color: var(--cor-primaria);
    font-weight: 800;
    font-family: "Raleway", sans-serif;
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Modernização dos itens da View _list_anexo (afeta as tags "a" renderizadas) */
.lista-anexos-moderna a.anexo,
.lista-anexos-moderna a {
    display: block;
    padding: 15px 20px;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 12px;
    text-decoration: none;
    color: var(--cor-texto-escuro);
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.05);
    border-left: 5px solid var(--cor-cinza-borda);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.lista-anexos-moderna a.anexo:hover,
.lista-anexos-moderna a:hover {
    border-left-color: var(--cor-primaria);
    color: var(--cor-primaria);
    transform: translateX(6px); /* Efeito de deslizar ao passar o mouse */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Sidebar / Barra Lateral */
.widget-lateral {
    background: #ffffff;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

/* =========================================
   8. BOTÕES DE AÇÃO E COMPARTILHAMENTO
========================================= */

/* Agrupamento */
.rotulo-compartilhar {
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--cor-cinza-borda);
    letter-spacing: 1px;
}

.separador-vertical {
    width: 2px;
    height: 24px;
    background-color: rgba(0,0,0,0.08);
}

/* Botões Circulares de Ícone */
.btn-icone-moderno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #f5f5f5; /* Cinza super claro */
    color: var(--cor-texto-escuro);
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animação elástica sutil */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.btn-icone-moderno i {
    font-size: 1.1rem;
}

/* Hover Global */
.btn-icone-moderno:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    background-color: var(--cor-primaria);
    color: #fff;
}

/* Cores específicas de marca no Hover (Opcional, dá um charme extra) */
.btn-icone-moderno.wpp:hover { background-color: #25D366; }
.btn-icone-moderno.face:hover { background-color: #1877F2; }
.btn-icone-moderno.in:hover { background-color: #0A66C2; }
.btn-icone-moderno.x-twitter:hover { background-color: #000000; }

/* Botão Voltar (Estilo Pílula) */
.btn-voltar-moderno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    border-radius: 50px;
    background-color: transparent;
    border: 2px solid rgba(0,0,0,0.1);
    color: var(--cor-texto-escuro);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.btn-voltar-moderno i {
    transition: transform 0.3s ease;
}

.btn-voltar-moderno:hover {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
    box-shadow: 0 8px 20px rgba(128, 160, 52, 0.3);
}

/* Efeito da seta deslizando pra trás no hover */
.btn-voltar-moderno:hover i {
    transform: translateX(-5px);
}

/* =========================================
   9. CALENDÁRIO E EVENTOS (ESTILO AGENDA)
========================================= */

/* Toolbar de Navegação (Mês/Ano) */
.toolbar-calendario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
}

.btn-navegacao-cal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: rgba(128, 160, 52, 0.1);
    color: var(--cor-primaria);
    border-radius: 12px;
    font-size: 1.2rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.btn-navegacao-cal:hover {
    background-color: var(--cor-primaria);
    color: #fff;
}

.filtro-mes {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

/* Evita que o select do Yii quebre o layout da toolbar */
.filtro-mes select, .filtro-mes input {
    margin: 0 10px;
    border: none;
    background: transparent;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--cor-texto-escuro);
    outline: none;
    cursor: pointer;
}

/* Card do Evento */
.card-evento-moderno {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    gap: 20px;
}

.card-evento-moderno:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(128, 160, 52, 0.15);
    border-color: rgba(128, 160, 52, 0.3);
}

/* O Badge de Data (Folhinha do Calendário) */
.data-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cor-primaria), rgb(105, 133, 40));
    color: #fff;
    min-width: 80px;
    height: 80px;
    border-radius: 16px;
    box-shadow: 0 8px 15px rgba(128, 160, 52, 0.3);
}

.data-badge .dia {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    font-family: 'Raleway', sans-serif;
}

.data-badge .mes {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 3px;
    opacity: 0.9;
}

/* Textos do Evento */
.titulo-evento {
    color: var(--cor-texto-escuro);
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 8px;
    font-family: 'Raleway', sans-serif;
    transition: color 0.2s ease;
}

.card-evento-moderno:hover .titulo-evento {
    color: var(--cor-primaria);
}

.detalhes-evento {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.detalhe-item {
    color: var(--cor-texto-escuro);
    opacity: 0.7;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detalhe-item i {
    color: var(--cor-secundaria); /* Ícones em amarelo/dourado */
}

/* Seta de Ação (Direita) */
.seta-acao {
    color: var(--cor-cinza-borda);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    padding-left: 10px;
}

.card-evento-moderno:hover .seta-acao {
    color: var(--cor-primaria);
    transform: translateX(5px);
}

/* =========================================
   10. DETALHES DO EVENTO (INFO BOX)
========================================= */

/* Painel superior com metadados do evento */
.info-box-evento {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background-color: var(--cor-fundo-claro); /* Fundo contrastante sutil */
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.03);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1; /* Permite que os itens dividam o espaço igualmente */
    min-width: 200px; /* Garante que não esmaguem muito no mobile */
}

.info-item .icone-destaque {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: rgba(128, 160, 52, 0.15); /* Verde com transparência */
    color: var(--cor-primaria);
    border-radius: 12px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-item small {
    display: block;
    color: var(--cor-texto-escuro);
    opacity: 0.6;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.info-item strong {
    display: block;
    color: var(--cor-texto-escuro);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
}

/* =========================================
   12. ESTILOS DE NOTÍCIA (DETALHES)
========================================= */

.noticia-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
    padding: 10px 0;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.noticia-meta-bar span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-primaria);
    display: flex;
    align-items: center;
    gap: 8px;
}

.noticia-creditos {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #555;
    border-left: 4px solid var(--cor-cinza-borda);
}

.noticia-creditos p {
    margin: 5px 0;
}

.noticia-creditos strong {
    color: var(--cor-texto-escuro);
}

/* =========================================
   14. GRID DE EXPERIÊNCIAS (MODERNO)
========================================= */

.card-experiencia-moderno {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0,0,0,0.05);
}

.card-experiencia-moderno:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(128, 160, 52, 0.2);
}

.imagem-wrapper {
    height: 250px;
    overflow: hidden;
}

.imagem-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card-experiencia-moderno:hover .imagem-wrapper img {
    transform: scale(1.1);
}

.conteudo-experiencia {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.conteudo-experiencia h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--cor-texto-escuro);
    margin-bottom: 15px;
}

.conteudo-experiencia p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
}

.btn-leia-mais {
    margin-top: auto;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--cor-primaria);
    letter-spacing: 1px;
}

/* =========================================
   15. LAYOUT EDITORIAL (ESTILO REFERÊNCIA)
========================================= */

.card-experiencia-editorial {
    display: block;
    width: 100%;
    height: 350px; /* Altura fixa para um grid uniforme */
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: transform 0.4s ease;
}

.card-experiencia-editorial:hover {
    transform: scale(1.03);
}

.fundo-imagem {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.overlay-gradiente {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente suave de preto para transparente */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
    display: flex;
    align-items: flex-end;
    padding: 25px;
}

.conteudo-overlay h3 {
    color: #ffffff !important;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.btn-ver-mais {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--cor-secundaria);
    padding-bottom: 2px;
}

/* =========================================
   16. GRID DE MUNICÍPIOS
========================================= */

.card-municipio-moderno {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.card-municipio-moderno:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(128, 160, 52, 0.15);
}

.foto-capa {
    position: relative;
    height: 200px;
    width: 100%;
}

.foto-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* O Brasão flutuando sobre a foto */
.brasao-overlay {
    position: absolute;
    bottom: -30px; /* Metade para fora, metade para dentro */
    left: 20px;
    width: 70px;
    height: 70px;
    background: #fff;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brasao-overlay img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.conteudo-card {
    padding: 40px 20px 20px 20px; /* Padding extra no topo por causa do brasão */
}

.conteudo-card h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--cor-texto-escuro);
    margin-bottom: 10px;
}

.conteudo-card p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}



/* =========================================
   17. PÁGINA INICIAL (INDEX) - CUSTOM LAYOUT
========================================= */

/* Títulos Gerais da Home */
.section-title-home {
    font-family: 'Raleway', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* 1. Planeje sua visita */
.card-planeje-home {
    display: block;
    position: relative;
    width: 100%;
    height: 480px; /* Cards altos */
    border-radius: 40px; /* Bordas bem redondas */
    overflow: hidden;
    transition: transform 0.4s ease;
}

.card-planeje-home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card-planeje-home:hover { transform: translateY(-10px); }
.card-planeje-home:hover img { transform: scale(1.05); }

.card-planeje-home .overlay-texto {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Gradiente sobe até o meio da foto */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 30px;
}

.card-planeje-home .overlay-texto h3 {
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* 2. Experiências (Ícones) */
.card-icon-verde {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-primaria, #80a034);
    color: #ffffff;
    height: 180px;
    border-radius: 30px;
    transition: all 0.3s ease;
    padding: 20px;
}

.card-icon-verde:hover {
    background-color: var(--cor-secundaria, #fcc800);
    color: #333;
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card-icon-verde h4 {
    font-weight: 800;
    font-size: 1.1rem;
    margin: 0;
}

/* 3. Destinos */
.card-destino-home {
    text-align: center;
}

.card-destino-home img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 40px; /* Formato pílula deitada */
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.card-destino-home:hover img {
    transform: scale(1.03);
}

.card-destino-home h4 {
    color: var(--cor-primaria, #80a034);
    font-weight: 900;
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.card-destino-home p {
    color: var(--cor-texto-escuro);
    font-size: 0.95rem;
}

/* 4. Notícias (O Layout Complexo) */

/* Destaque Grande (Esquerda) */
.card-noticia-destaque {
    display: block;
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    height: 480px; /* Alinha a altura com as laterais */
}

.card-noticia-destaque img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-noticia-destaque .overlay-gradiente {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 80px 40px 40px 40px; /* Padding generoso */
}

.card-noticia-destaque h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.4;
}

/* Lista Lateral com Linha (Direita) */
.item-noticia-linha {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 20px; /* Espaço para o texto respirar */
}

.item-noticia-linha .foto-redonda {
    width: 130px;
    height: 130px;
    border-radius: 30px;
    border: 4px solid var(--cor-primaria, #80a034);
    overflow: hidden;
    flex-shrink: 0;
    z-index: 2; /* Fica acima da linha */
    background: #fff;
}

.item-noticia-linha .foto-redonda img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.item-noticia-linha:hover .foto-redonda img {
    transform: scale(1.1);
}

/* A Mágica da Linha Conectora do Layout */
.item-noticia-linha .linha-conectora {
    width: 30px; /* Tamanho da linha */
    height: 4px;
    background-color: var(--cor-primaria, #80a034);
    z-index: 1;
    transition: width 0.3s ease;
}

.item-noticia-linha .texto-noticia {
    flex-grow: 1;
    color: #000;
    font-weight: 800;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    padding-left: 15px; /* Afasta o texto da linha */
}

/* Efeito ao passar o mouse: a linha cresce e empurra o texto levemente */
.item-noticia-linha:hover .linha-conectora {
    width: 45px; 
}
.item-noticia-linha:hover .texto-noticia {
    color: var(--cor-primaria);
}

/* =========================================
   CARDS DE NOTÍCIA DINÂMICOS
========================================= */

/* Notícia Principal */
.card-noticia-principal img {
    transition: transform 0.6s ease;
}

.card-noticia-principal:hover img {
    transform: scale(1.05); /* Leve zoom in na imagem de fundo */
}

.card-noticia-principal .overlay {
    transition: padding-bottom 0.4s ease;
}

.card-noticia-principal:hover .overlay {
    padding-bottom: 2rem !important; /* Levanta o texto um pouquinho ao focar */
}

/* Notícias Laterais Menores */
.noticia-lateral-item {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.noticia-lateral-item:hover {
    transform: translateX(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    border-color: rgba(128, 160, 52, 0.2);
}

.noticia-lateral-item:hover h5 {
    color: var(--cor-primaria) !important;
}

.foto-capa {
    background-color: #f0f2f5;
}

.brasao-overlay {
    background-color: #ffffff;
}

.letter-spacing-1 {
    letter-spacing: 1px;
}

/* =========================================
   18. MUNICÍPIOS (VIEW) - COMPONENTES EXTRAS
========================================= */

/* Aproveitando a Info Box para informações gerais (Prefeitura, etc) */
.info-box-moderna {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background-color: #f7f6f2; /* Fundo bege clarinho */
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.03);
}

/* Brasão do Município flutuando ao lado do texto */
.brasao-float-left {
    float: left;
    max-width: 150px;
    height: auto;
    margin: 0 30px 15px 0;
    border-radius: 16px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Container do Google Maps */
.mapa-container-moderno {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
}

.mapa-container-moderno iframe {
    display: block; /* Remove o espaço fantasma abaixo do iframe */
    border: none;
}

/* Mini Cards para os Roteiros (Turismo) dentro do Município */
.card-roteiro-mini {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    transition: all 0.3s ease;
}

.card-roteiro-mini:hover {
    border-color: var(--cor-primaria);
    box-shadow: 0 10px 25px rgba(128, 160, 52, 0.1);
    transform: translateY(-4px);
}

.card-roteiro-mini h5 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--cor-texto-escuro);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.card-roteiro-mini:hover h5 {
    color: var(--cor-primaria);
}

.card-roteiro-mini p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
    flex-grow: 1; /* Empurra o botão pra baixo */
}

.btn-link-sm {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--cor-secundaria);
    transition: all 0.3s ease;
}

.card-roteiro-mini:hover .btn-link-sm {
    color: var(--cor-primaria);
}

/* Limpeza de Float para evitar que textos pequenos fiquem grudados no Brasão */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* =========================================
   19. GALERIA DE VÍDEOS
========================================= */

/* Card da Listagem */
.card-video-moderno {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%;
}

.card-video-moderno:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(128, 160, 52, 0.15);
    border-color: rgba(128, 160, 52, 0.2);
}

.thumb-video-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #000;
}

.thumb-video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* Dá uma leve escurecida para o ícone brilhar */
    transition: all 0.4s ease;
}

.card-video-moderno:hover .thumb-video-wrapper img {
    transform: scale(1.05);
    opacity: 0.6; /* Escurece mais no hover */
}

/* O ícone de Play sobreposto */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(194, 37, 39, 0.9); /* O vermelho da sua paleta, típico de vídeo */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    padding-left: 5px; /* Compensa o ícone de play para parecer centralizado */
    box-shadow: 0 4px 15px rgba(194, 37, 39, 0.4);
    transition: all 0.3s ease;
}

.card-video-moderno:hover .play-overlay {
    transform: translate(-50%, -50%) scale(1.15);
    background: var(--cor-primaria); /* Muda pra verde no hover */
    box-shadow: 0 5px 20px rgba(128, 160, 52, 0.5);
}

/* Textos do Card */
.conteudo-video {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.titulo-video {
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cor-texto-escuro);
    line-height: 1.3;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.card-video-moderno:hover .titulo-video {
    color: var(--cor-primaria);
}

.meta-video {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-video span {
    font-size: 0.8rem;
    color: #777;
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-video i {
    color: var(--cor-primaria);
}

/* Player de Vídeo na View */
.player-video-moderno {
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(0,0,0,0.1);
}

.player-video-moderno iframe {
    display: block;
}

/* =========================================
   20. GALERIA DE FOTOS (LISTAGEM)
========================================= */

.card-galeria-moderno {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%;
}

.card-galeria-moderno:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(128, 160, 52, 0.12);
    border-color: rgba(128, 160, 52, 0.2);
}

.thumb-galeria-wrapper {
    position: relative;
    width: 100%;
    height: 180px; /* Um pouco mais baixo que o vídeo para formato mais retangular */
    overflow: hidden;
    background-color: #f8f9fa;
}

.thumb-galeria-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card-galeria-moderno:hover .thumb-galeria-wrapper img {
    transform: scale(1.08); /* Efeito de zoom no hover */
}

/* Ícone de câmera flutuante que aparece no hover */
.icone-album-overlay {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--cor-primaria);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.card-galeria-moderno:hover .icone-album-overlay {
    opacity: 1;
    transform: translateY(0);
}

.conteudo-galeria {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.titulo-galeria {
    font-family: 'Raleway', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cor-texto-escuro);
    line-height: 1.3;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.card-galeria-moderno:hover .titulo-galeria {
    color: var(--cor-primaria);
}

.meta-galeria {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meta-galeria span {
    font-size: 0.8rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-galeria i {
    color: var(--cor-secundaria);
}

/* =========================================
   22. LISTAGEM DE DOCUMENTOS
========================================= */

.card-documento-moderno {
    display: block;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 25px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.card-documento-moderno:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(128, 160, 52, 0.12);
    border-color: rgba(128, 160, 52, 0.2);
}

/* Ícone grande à esquerda */
.icone-documento {
    width: 60px;
    height: 60px;
    background-color: rgba(128, 160, 52, 0.1);
    color: var(--cor-primaria);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: all 0.3s ease;
}

.card-documento-moderno:hover .icone-documento {
    background-color: var(--cor-primaria);
    color: #ffffff;
}

/* Tipografia */
.titulo-documento {
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cor-texto-escuro);
    margin-bottom: 8px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.card-documento-moderno:hover .titulo-documento {
    color: var(--cor-primaria);
}

.resumo-documento {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* Metadados (Data, Categoria) */
.meta-documento {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.meta-documento span {
    font-size: 0.75rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.meta-documento i {
    color: var(--cor-secundaria);
    font-size: 0.85rem;
}

/* Seta direcional à direita */
.acao-documento {
    width: 40px;
    height: 100%;
    color: #ccc;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.card-documento-moderno:hover .acao-documento {
    color: var(--cor-primaria);
    transform: translateX(5px);
}

/* =========================================
   23. MÓDULO DE FORMULÁRIOS & CAMPOS
========================================= */

/* Card de Item na Listagem */
.card-formulario-lista {
    display: block;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 20px 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01);
}

.card-formulario-lista:hover {
    transform: translateX(5px);
    border-color: var(--cor-primaria);
    box-shadow: 0 10px 25px rgba(128, 160, 52, 0.1);
}

.icone-form-wrapper {
    width: 45px;
    height: 45px;
    background-color: rgba(128,160,52,0.1);
    color: var(--cor-primaria);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.titulo-form-item {
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cor-texto-escuro);
    margin: 0 0 4px 0;
}

.resumo-form-item {
    font-size: 0.85rem;
    color: #666;
}

.seta-form-item {
    color: #ccc;
    transition: transform 0.3s ease, color 0.3s ease;
}

.card-formulario-lista:hover .seta-form-item {
    color: var(--cor-primaria);
    transform: translateX(3px);
}

/* Estilização Geral de Inputs Dinâmicos */
.formulario-dinamico-moderno .form-label {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--cor-texto-escuro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.input-moderno {
    border: 2px solid #eef0f2 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    color: var(--cor-texto-escuro) !important;
    background-color: #fdfdfd !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.input-moderno:focus {
    background-color: #ffffff !important;
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 5px 15px rgba(128, 160, 52, 0.08) !important;
}

/* Customização para caixas de Checkbox e Radio Inline */
.formulario-dinamico-moderno .form-check-input:checked {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.formulario-dinamico-moderno .form-check-label {
    font-size: 0.95rem;
    color: var(--cor-texto-escuro);
    font-weight: 600;
    margin-left: 4px;
}

/* =========================================
   24. ACOMPANHAMENTO DE PROTOCOLO
========================================= */

/* Miniaturas de Imagens Enviadas pelo Usuário */
.card-imagem-anexa {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Garante que sejam sempre quadradas, independente da foto original */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    background: #f8f9fa;
}

.card-imagem-anexa img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta o excesso para preencher o quadrado perfeitamente */
    transition: transform 0.4s ease;
}

/* Lupa de Zoom no Hover */
.overlay-zoom {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(128,160,52,0.85); /* Fundo Verde Translúcido */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-imagem-anexa:hover img {
    transform: scale(1.1);
}

.card-imagem-anexa:hover .overlay-zoom {
    opacity: 1;
}

/* Estilo adicional para o badge do protocolo */
.badge.bg-success {
    background-color: var(--cor-primaria) !important;
}

/* =========================================
   25. BOX DE ACOMPANHAMENTO DE PROTOCOLO
========================================= */

.box-acompanhamento {
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: sticky;
    top: 30px; /* Faz a caixinha acompanhar o scroll se o formulário principal for muito longo */
}

.box-acompanhamento-header {
    background-color: var(--cor-primaria, rgb(128,160,52));
    padding: 30px 20px 20px;
    text-align: center;
    position: relative;
}

.icone-header {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    color: var(--cor-primaria);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.box-acompanhamento-header h3 {
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.box-acompanhamento-body {
    padding: 25px;
    background-color: #fcfcfc;
}

.box-acompanhamento-body p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 25px;
}

/* Input exclusivo para o protocolo (Monospace para facilitar leitura de códigos) */
.input-protocolo {
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    border: 2px solid #e1e4e8 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    background-color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.input-protocolo:focus {
    border-color: var(--cor-secundaria) !important;
    box-shadow: 0 0 0 4px rgba(252, 200, 0, 0.15) !important;
}

.input-protocolo::placeholder {
    font-family: sans-serif !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    color: #bbb !important;
}

/* Botão de Consulta */
.btn-consultar-protocolo, .btn-enviar {
    background-color: var(--cor-secundaria, rgb(252,200,0));
    color: #333333;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(252,200,0,0.3);
}

.btn-consultar-protocolo:hover, .btn-enviar:hover {
    background-color: #e6b600; /* Um tom um pouco mais escuro do amarelo */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(252,200,0,0.4);
    color: #000;
}

/* =========================================
   26. MÓDULO DE ENQUETES (VOTAÇÃO E GRIDS)
========================================= */

/* Abas (Tabs) no formato Pill Moderno */
.custom-pills-enquete {
    border-bottom: none !important;
    gap: 10px;
}

.custom-pills-enquete .nav-link {
    background: #f1f3f5 !important;
    color: var(--cor-texto-escuro) !important;
    border-radius: 30px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    border: none !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-pills-enquete .nav-link.active {
    background-color: var(--cor-primaria, rgb(128,160,52)) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(128,160,52,0.25) !important;
}

.status-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 30px;
    letter-spacing: 0.5px;
}
.badge-aberta {
    background-color: rgba(128,160,52,0.12);
    color: var(--cor-primaria);
}
.badge-encerrada {
    background-color: #f1f3f5;
    color: #6c757d;
}

.pergunta-enquete-titulo {
    font-family: 'Raleway', sans-serif;
    color: var(--cor-texto-escuro);
    font-size: 1.3rem;
    line-height: 1.4;
}

.opcao-voto-item {
    border: 2px solid #eef0f2;
    border-radius: 14px;
    background-color: #fdfdfd;
    transition: all 0.25s ease;
    position: relative;
}

.label-opcao-voto {
    padding: 16px 20px;
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor-texto-escuro);
}

.circulo-indicador {
    width: 20px;
    height: 20px;
    border: 2px solid #ced4da;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    background: #fff;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.hidden-radio-voto {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.opcao-voto-item.opcao-selecionada {
    border-color: var(--cor-primaria);
    background-color: rgba(128,160,52,0.02);
}

.opcao-voto-item.opcao-selecionada .circulo-indicador {
    border-color: var(--cor-primaria);
    background-color: var(--cor-primaria);
}

.opcao-voto-item.opcao-selecionada .circulo-indicador::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
}

.grid-votos-modernizado .table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.grid-votos-modernizado th {
    background-color: #f8f9fa !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #6c757d;
    border: none !important;
    padding: 12px 20px !important;
}

.grid-votos-modernizado td {
    background-color: #fdfdfd;
    border-top: 1px solid #eef0f2 !important;
    border-bottom: 1px solid #eef0f2 !important;
    padding: 16px 20px !important;
    font-weight: 600;
}

.grid-votos-modernizado td:first-child {
    border-left: 1px solid #eef0f2 !important;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.grid-votos-modernizado td:last-child {
    border-right: 1px solid #eef0f2 !important;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* =========================================
   27. CARDS HÍBRIDOS (HOME - EXPERIÊNCIAS)
========================================= */

.card-categoria-hibrido {
    display: block;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 250px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.card-categoria-hibrido img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card-categoria-hibrido .overlay-hibrido {
    position: absolute;
    inset: 0; /* Estica em todas as direções (top, bottom, left, right = 0) */
    background: rgba(0, 0, 0, 0.45); /* Overlay preto semi-transparente por padrão */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background 0.4s ease;
}

/* O QUE ACONTECE QUANDO PASSA O MOUSE: */
.card-categoria-hibrido:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(128, 160, 52, 0.25);
}

.card-categoria-hibrido:hover img {
    transform: scale(1.1); /* Zoom na foto interna */
}

.card-categoria-hibrido:hover .overlay-hibrido {
    background: rgba(34, 54, 20, 0.705); /* Fundo muda do Preto pro Verde translúcido */
}

/* O Ícone ganha vida */
.icone-categoria {
    font-size: 3rem;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}

.icone-categoria .material-symbols-outlined {
    font-size: 1.1em;
}

.card-categoria-hibrido:hover .icone-categoria {
    transform: scale(1.15) rotate(5deg); /* Leve balanço e zoom no ícone */
}

/* O Texto do botão */
.card-categoria-hibrido h4 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

/* =========================================
   ESTILO DOS TÍTULOS GLOBAIS (HOME E INTERNAS)
========================================= */

.titulo-global-lg {
    font-family: 'Raleway', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--cor-texto-escuro, rgb(50, 50, 50));
    position: relative;
    padding-bottom: 12px; /* Espaço de respiro para a linha não colar no texto */
    text-transform: none; /* Mantém como você digitou, mas pode trocar para uppercase se preferir */
}

/* O traço amarelo/dourado decorativo */
.titulo-global-lg::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px; /* Largura do traço */
    height: 4px; /* Espessura do traço */
    background-color: var(--cor-secundaria, rgb(252, 200, 0)); /* Puxa o amarelo do tema */
    border-radius: 2px;
}

.text-center .titulo-global-lg::after {
    left: 50%;
    transform: translateX(-50%);
}

.titulo-global-lg.texto-verde {
    color: var(--cor-primaria, rgb(128, 160, 52));
}


/* =========================================
   28. FOOTER ULTRA MODERNO E DISRUPTIVO
========================================= */

/* A Caixa de Call to Action (Metade pra fora, Metade pra dentro) */
.cta-footer-wrapper {
    position: relative;
    z-index: 10;
    margin-bottom: -50px; /* Puxa o footer pra cima dessa caixa */
}

.cta-footer-box {
    background: linear-gradient(135deg, var(--cor-primaria), rgb(90, 115, 35));
    border-radius: 24px;
    padding: 25px 50px;
    box-shadow: 0 20px 40px rgba(128, 160, 52, 0.3);
}

.btn-cta-footer {
    display: inline-block;
    background-color: var(--cor-secundaria);
    color: #333 !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    padding: 16px 32px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(252, 200, 0, 0.3);
}

.btn-cta-footer:hover {
    background-color: #fff;
    color: var(--cor-primaria) !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(255, 255, 255, 0.2);
}

/* Estrutura do Footer */
.footer-ultra-moderno {
    background-color: #1a1a1a; /* Quase preto, muito mais elegante que cinza */
    background-image: radial-gradient(circle at top right, #2a2a2a 0%, #1a1a1a 50%);
    padding-top: 100px; /* Espaço para o CTA flutuante encaixar */
    color: #a0a0a0;
    font-family: 'Raleway', sans-serif;
}

/* Coluna 1: Logo e Texto */
.logo-footer-img {
    max-width: 140px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.footer-descricao {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 15px;
}

/* Redes Sociais Modernas (Estilo Pill/Hover Colorido) */
.footer-social-moderno {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-social-moderno a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 12px; /* Quadrado arredondado é mais moderno que bolinha */
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.footer-social-moderno a:hover {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(128, 160, 52, 0.4);
}

/* Coluna 2: Títulos e Lista de Contatos */
.footer-titulo {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-titulo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: var(--cor-secundaria);
    border-radius: 2px;
}

.footer-lista-contato {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-lista-contato li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.icone-contato {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(128, 160, 52, 0.15);
    color: var(--cor-primaria);
    border-radius: 10px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.texto-contato {
    display: flex;
    flex-direction: column;
}

.texto-contato strong {
    color: #ffffff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.texto-contato span {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Coluna 3: Widget do Google Maps */
.footer-mapa-box {
    width: 100%;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.05);
    position: relative;
}

/* Força o iframe a preencher o cardzinho do mapa perfeitamente */
.footer-mapa-box iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block;
    filter: grayscale(20%) contrast(110%); /* Dá um tom mais cinematográfico ao mapa */
}

.footer-mapa-placeholder {
    width: 100%;
    height: 200px;
    border-radius: 16px;
    background-color: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Linha Final Inferior */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
    padding-bottom: 25px;
}

/* Ícone de Bússola Gigante na lateral da caixa */
.icone-suporte-cta {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--cor-secundaria, rgb(252, 200, 0));
    flex-shrink: 0;
}

/* Botão do WhatsApp no Rodapé */
.btn-whatsapp-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    color: #25D366 !important; /* Verde oficial do Whats */
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    padding: 14px 28px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none !important;
}

.btn-whatsapp-cta:hover {
    background-color: #f8f9fa;
    color: #1ebe57 !important;
    transform: translateY(-4px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.25);
}

/* =========================================
   PAGINAÇÃO MODERNA E DINÂMICA
========================================= */

/* Remove o estilo padrão da lista e alinha os itens */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    gap: 8px; /* Espaçamento elegante entre os botões */
    flex-wrap: wrap; /* Garante que quebre a linha no celular se tiver muitas páginas */
    justify-content: center;
    margin-bottom: 0;
}

/* Estilo base dos botões (Links e Spans) */
.pagination li a,
.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px; /* Garante que seja um quadrado perfeito */
    height: 42px;
    padding: 0 10px; /* Padding para números maiores, ex: 100 */
    border-radius: 12px; /* Cantos arredondados modernos (Squircle) */
    background-color: #ffffff;
    color: var(--cor-texto-escuro);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none !important;
    border: 1px solid var(--cor-cinza-borda);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Efeito Hover nos links disponíveis */
.pagination li:not(.active):not(.disabled) a:hover {
    background-color: rgba(128, 160, 52, 0.08); /* Fundo levemente verde */
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    transform: translateY(-3px); /* Leve pulinho tátil */
    box-shadow: 0 6px 15px rgba(128, 160, 52, 0.15); /* Sombra verde difusa */
}

/* Página Atual (Active) */
.pagination li.active a,
.pagination li.active span {
    background-color: var(--cor-primaria);
    color: #ffffff !important;
    border-color: var(--cor-primaria);
    box-shadow: 0 6px 15px rgba(128, 160, 52, 0.3);
    pointer-events: none; /* Desativa clique na página que já estamos */
}

/* Botões Desativados (Primeira ou Última página) */
.pagination li.disabled span,
.pagination li.disabled a {
    background-color: var(--cor-fundo-claro);
    color: #a0a0a0;
    border-color: rgba(208, 208, 214, 0.5);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}