/* ==========================================================================
   CONFIGURAÇÕES GERAIS E RESET
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
    background-color: #ffffff;
    color: #333333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ==========================================================================
   FORÇAR SUBIDA DO CONTEÚDO PRINCIPAL (MATAR ESPAÇO EM BRANCO)
   ========================================================================== */

/* 1. Força o container do conteúdo a ignorar o espaçamento do topo */
main {
    margin-top: -35px !important; /* Move todo o corpo do site para cima */
}




/* ==========================================================================
   CONFIGURAÇÃO GLOBAL DE CORES PARA LINKS DO SITE (EXCETO O MENU)
   ========================================================================== */

/* 1. Força a cor vermelha em todos os links gerais do site (Fale Conosco, textos, etc.) */
a, 
a:link, 
a:visited {
    color: #b70201 !important;
    transition: color 0.2s ease-in-out;
}

/* 2. Efeito de passar o mouse (hover) nos links gerais do site */
a:hover, 
a:active, 
a:focus {
    color: #910201 !important; 
    text-decoration: underline !important; 
}

/* ==========================================================================
   BLINDAGEM TOTAL DO MENU (FORÇANDO AS CORES ORIGINAIS)
   ========================================================================== */

/* 3. Força a cor cinza escura nos links do primeiro nível do menu */
.main-navigation .menu-list .menu-item .menu-link {
    color: #333333 !important;
    text-decoration: none !important;
}

/* 4. Força o vermelho original (#b30000) no botão INÍCIO */
.main-navigation .menu-list .menu-item:first-child .menu-link {
    color: #b30000 !important;
}

/* 5. Força a cor cinza nos links dos submenus (segundo nível em diante) */
.main-navigation .submenu .submenu-item .submenu-link {
    color: #555555 !important;
    text-decoration: none !important;
}

/* 6. Força o efeito de Hover original do menu (#b30000) ao passar o mouse */
.main-navigation .menu-list .menu-item .menu-link:hover,
.main-navigation .submenu .submenu-item .submenu-link:hover,
.main-navigation .submenu-item.has-sub:hover > .submenu-link {
    color: #b30000 !important;
    text-decoration: none !important;
}

/* ==========================================================================
   CONTAINER PRINCIPAL DO TOPO (HEADER) - CORREÇÃO DE ÍCONES NATIVOS
   ========================================================================== */
.header-container {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.top-bar {
    max-width: 1200px;
    margin: 0 auto;
    /* AUMENTADO: de 20px para 35px em cima/baixo para expandir a área total do head */
    padding: 35px 20px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-area img {
    /* AUMENTADO: de 65px para 90px para deixar o logo maior e mais imponente */
    height: 90px; 
    width: auto; /* Garante que a largura se ajuste proporcionalmente sem distorcer */
    display: block;
}

/* 1. Ajusta o container principal para alinhar tudo à direita com pouco espaço */
.interaction-area {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important; /* Distância entre o campo de busca e os ícones */
}

/* 2. Impede que o <form> ocupe a largura inteira e empurre os ícones */
.interaction-area form,
#globalSearchForm {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important; /* Impede que o form ocupe 100% da largura */
}

.search-box {
    display: flex;
    align-items: center;
    position: relative;
}

/* Ícone da Lupa interno */
.search-icon {
    display: inline-block;
    width: 18px;  /* AUMENTADO: de 16px para 18px */
    height: 18px; /* AUMENTADO: de 16px para 18px */
    margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23b30000' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.search-box input[type="text"] {
    /* AUMENTADO: padding interno maior para o campo ficar mais alto e imponente */
    padding: 10px 16px; 
    border: 1px solid #cccccc;
    border-radius: 6px; /* Cantos levemente mais arredondados combinando com o tamanho */
    font-size: 14px;    /* AUMENTADO: de 13px para 14px */
    width: 260px;       /* AUMENTADO: largura de 200px para 260px */
    outline: none;
    transition: border-color 0.3s ease;
}

.search-box input[type="text"]:focus {
    border-color: #b30000;
}

/* Botões das Redes Sociais */
.social-icons {
    display: flex;
    gap: 8px; /* AUMENTADO: espaço entre os quadradinhos das redes */
}

.social-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;  /* AUMENTADO: caixa de 32px para 42px */
    height: 42px; /* AUMENTADO: caixa de 32px para 42px */
    background-color: #b30000;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px; /* AUMENTADO: o vetor interno de 16px para 20px */
}

.social-btn:hover {
    background-color: #800000;
}

/* Injeta o logo do Facebook em vetor branco */
.social-btn.facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M80 299.3V256H12v-54.7h68v-40.2c0-67.3 41.1-104 101.2-104 28.8 0 53.6 2.1 60.8 3v70.5h-41.7c-32.7 0-39 15.5-39 38.3V201.3h78.2L231 256h-68.2v174.3H80z'/%3E%3C/svg%3E");
}

/* Injeta o logo do Instagram em vetor branco */
.social-btn.instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM402.4 344.2c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

.interaction-area i {
    display: none !important;
}

/* Caso existam imagens dentro dos links das redes */
.link-rede-topo img {
    width: 34px; /* AUMENTADO: de 26px para 34px */
    height: 34px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}




/* ==========================================================================
   MENU DE NAVEGAÇÃO PRINCIPAL (ALTURA E ESTILOS)
   ========================================================================== */
.main-navigation {
    width: 100%;
    height: 46px; /* Define uma altura fixa perfeita para a barra */
    display: flex !important;
    align-items: center !important; /* Centraliza o container verticalmente */
    
    border-top: 1px solid #eeeeee;
    background-color: #ffffff;
    border-bottom: 2px solid #eeeeee !important; 
    padding: 10px !important; /* Remove paddings que empurram o conteúdo */
    
    position: relative;
    top: auto;
    left: auto;
    z-index: 999;
    transition: all 0.3s ease;
}

.menu-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    height: 100%;
    display: flex !important;
    align-items: center !important; /* Garante alinhamento central */
    background-color: #ffffff !important;
}

.menu-list {
    list-style: none;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important; /* Centraliza a lista na vertical */
    justify-content: space-between; 
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Itens do Primeiro Nível */
.menu-item {
    position: relative;
}

.menu-link {
    display: flex !important;
    align-items: center !important; /* Centraliza o texto e as setinhas */
    justify-content: center !important;
    
    padding: 0 14px !important; /* Remove o padding vertical para não deslocar */
    height: 46px; /* Mesma altura da barra para centralizar 100% */
    line-height: 1 !important;
    
    color: #333333;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

/* Destaque nativo para o botão INÍCIO */
.menu-item:first-child .menu-link {
    color: #b30000;
}

.menu-link:hover {
    color: #b30000;
}

/* Seta indicativa para itens com submenu */
.menu-link::after {
    content: '\25be';
    margin-left: 4px;
    font-size: 10px;
    color: #888888;
}

/* Oculta as setas dos botões puros (sem filhos) */
.menu-item:first-child .menu-link::after,
.menu-item.no-dropdown .menu-link::after {
    display: none;
}


/* ==========================================================================
   SUPORTE AO MENU FIXO FORA DO BODY (DARK MODE / LIGHT MODE)
   ========================================================================== */
.menu-placeholder {
    display: none;
    width: 100%;
}

/* 1. ESTADO FIXADO PADRÃO (MODO CLARO) */
html > .main-navigation.menu-fixado,
.main-navigation.menu-fixado {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999999 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border-top: none !important;
    background-color: #ffffff !important;
    animation: baixaMenu 0.25s ease-out forwards !important;
}

/* 2. INVERSÃO DO MENU FIXADO QUANDO O MODO ESCURO ESTIVER ATIVO */
body.dark-mode ~ .main-navigation.menu-fixado,
html.dark-mode > .main-navigation.menu-fixado,
body.dark-mode .main-navigation.menu-fixado {
    filter: invert(1) hue-rotate(180deg) !important;
}

@keyframes baixaMenu {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}



/* ==========================================================================
   DROPDOWN DE SEGUNDO NÍVEL
   ========================================================================== */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 340px; /* Aumentado para 330px para dar folga total aos textos */
    list-style: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid #eeeeee;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 999;
}

.submenu .submenu-item {
    position: relative;
}

.submenu .submenu-link {
    display: block;
    padding: 12px 16px;
    color: #555555;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    
    /* Configurações de quebra segura */
    white-space: normal; 
    line-height: 1.4;
    padding-right: 19px; /* Margem interna direita para proteger a setinha */
}

.submenu .submenu-item:last-child .submenu-link {
    border-bottom: none;
}

.submenu .submenu-link:hover {
    background-color: #f9f9f9;
    color: #b30000;
    padding-left: 19px; /* Reduzido de 20px para 17px para evitar empurrar palavras */
}

/* Exibe o segundo nível ao passar o mouse */
.menu-item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================================================
   SISTEMA EM CASCATA DE TERCEIRO E QUARTO NÍVEL (LATERAIS)
   ========================================================================== */
.submenu .submenu-item .submenu-sub {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #ffffff;
    min-width: 340px; /* Sincronizado em 330px também */
    list-style: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid #eeeeee;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1000;
}

.submenu-sub .submenu-item .submenu-sub {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1001;
}

.submenu-item:hover > .submenu-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.submenu-item.has-sub > .submenu-link::after {
    content: '\25b8';
    float: right;
    font-size: 10px;
    color: #999999;
    margin-top: 2px;
}

.submenu-item.has-sub:hover > .submenu-link {
    color: #b30000;
    font-weight: normal;
}






/* ==========================================================================
   SEÇÃO DE DESTAQUES (GRID DE IMAGENS ABAIXO DO BANNER)
   ========================================================================== */
.secao-destaques {
    width: 100%;
    margin-bottom: 40px;

}

/* Linha sutil superior com o título "DESTAQUES" alinhado à esquerda */
.titulo-destaques {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    text-transform: uppercase;
    border-top: 1px solid #eaeaea; /* Cria a linha divisória idêntica ao print */
    padding-top: 12px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;

}

/* Cria a estrutura de grade: 3 colunas em telas normais/grandes */
.grid-destaques {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Espaçamento uniforme entre os blocos */
}

/* Comportamento dos links/imagens dos cards */
.item-destaque {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 6px; /* Bordas levemente arredondadas como no print */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Sombra suave de acabamento */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efeito discreto de foco ao passar o mouse */
.item-destaque:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.item-destaque img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Responsividade: Transforma em 1 única coluna se o site for aberto no celular */
@media (max-width: 768px) {
    .grid-destaques {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}


/* ==========================================================================
   SEÇÃO INDEPENDENTE: GRID DE BOTÕES (AJUSTADA PARA DAR RESPIRO NO TOPO)
   ========================================================================== */
.secao-botoes-grid {
    width: 100%;
    background-color: #fcfcfc;
    
    /* ALTERADO: Aumentamos o padding-top de 40px para 80px para empurrar o conteúdo para baixo */
    padding: 60px 0 60px 0 !important; 
    
    /* ADICIONADO: Margem superior caso o elemento de cima precise de um afastamento extra externo */
    margin-top: 20px !important; 
    
    box-sizing: border-box;
}

.container-botoes-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    box-sizing: border-box;
}

.bloco-titulo-botoes {
    grid-column: span 3;
    width: 100%;
    
    /* AUMENTADO: de 20px para 35px para dar mais espaço entre o título e os cards de baixo */
    margin-bottom: 35px !important; 
}

.titulo-botoes-destaque {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    text-transform: uppercase;
    border-bottom: 1px solid #eaeaea;
    
    /* AUMENTADO: de 12px para 18px para a linha cinza de baixo não ficar colada na palavra */
    padding-bottom: 18px !important; 
    
    margin: 0;
    letter-spacing: 0.5px;
}

/* O Botão Card Individual */
.item-botao-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 145px;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease; 
}

/* Regra Geral da Imagem de Fundo: Por padrão aplica o embaçado suave (blur) */
.item-botao-card .imagem-fundo-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* EFEITO DE EMBAÇAR: Ajuste o '4px' para mais ou menos desfoque nas fotos */
    filter: blur(3px) brightness(0.9); 
    transform: scale(1.05); /* Pequeno aumento para o desfoque não criar bordas brancas */
    
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

/* EXCEÇÃO: Se for um botão de logotipo (Sigad/Redisap), a imagem fica 100% nítida e sem desfoque */
/* EXCEÇÃO: Botões de logotipo (Sigad e Redisap) ocupando a caixa inteira de ponta a ponta */
.item-botao-card.card-logotipo {
    background-color: transparent; /* Remove o fundo branco de sobra */
}

.item-botao-card.card-logotipo .imagem-fundo-card {
    filter: none !important;      /* Mantém a imagem 100% nítida */
    /* ALTERAÇÃO AQUI: 'cover' faz o logo se espalhar e preencher todo o espaço do botão */
    background-size: cover !important; 
    padding: 0 !important;        /* Remove qualquer recuo lateral */
    margin: 0 !important;
    transform: scale(1);          /* Começa no tamanho padrão, sem o corte inicial do blur */
}

/* Texto interno com sombra projetada */
.texto-card-institucional {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    padding: 0 20px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    z-index: 2;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9), 0px 0px 6px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   EFEITOS DE INTERAÇÃO (APENAS ZOOM DO FUNDO)
   ========================================================================== */
.item-botao-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Realiza o zoom suave no hover mantendo as propriedades originais de cada um */
.item-botao-card:hover .imagem-fundo-card {
    transform: scale(1.12); 
}
.item-botao-card.card-logotipo:hover .imagem-fundo-card {
    transform: scale(1.05); /* Zoom menor e controlado para os logotipos */
}

/* Responsividade */
@media (max-width: 992px) {
    .container-botoes-grid { grid-template-columns: repeat(2, 1fr); }
    .bloco-titulo-botoes { grid-column: span 2; }
}
@media (max-width: 600px) {
    .container-botoes-grid { grid-template-columns: 1fr; }
    .bloco-titulo-botoes { grid-column: span 1; }
}


/* ==========================================================================
   REMOVER SUBLINHADO VERMELHO NO HOVER DOS CARDS
   ========================================================================== */

/* Remove qualquer tipo de linha, borda ou decoração de texto ao passar o mouse nos cards */
.item-botao-card,
.item-botao-card:hover,
.item-botao-card:focus,
.item-botao-card .texto-card-institucional,
.item-botao-card:hover .texto-card-institucional {
    text-decoration: none !important; /* Remove o sublinhado padrão */
    border-bottom: none !important;   /* Caso o template use borda simulando sublinhado */
    background-image: none !important; /* Caso o template use gradiente simulando linha */
}




/* ==========================================================================
   SEÇÃO: MURAL INFORMATIVO (FUNDO DE FORA A FORA E CARD CORRIGIDO)
   ========================================================================== */
.secao-mural-informativo {
    width: 100%;
    /* ALTERAÇÃO: Cinza claro bem sutil que preenche toda a largura da tela */
    background-color: #f5f5f5; 
    padding: 50px 0 60px 0;
    box-sizing: border-box;
}

/* Container que trava o conteúdo no centro alinhado com o resto do site */
.container-mural-informativo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 65px;
    display: flex;
    gap: 70px;
    align-items: center;
    box-sizing: border-box;
}

.mural-coluna-esquerda {
    flex: 1.2 !important; 
    display: flex;
    justify-content: center;
    min-width: 320px !important;
    max-width: 550px !important; /* Mantém o tamanho do card proporcional */
}

.mural-coluna-direita {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* --- CONTAINER DO CARD ESQUERDO --- */
.wrapper-card-mural {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #eef0f4 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important; /* Faz a imagem respeitar a borda arredondada do card */
    width: 100% !important;
    box-sizing: border-box !important;
}

.wrapper-card-mural img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Texto informativo superior */
.texto-superior-mural {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 15px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-weight: 600 !important;
}

/* Bloco da Imagem central (Removido box-shadow externo para não dar conflito) */
.imagem-card-mural {
    width: 100%;
    overflow: hidden;
}

.imagem-card-mural img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Bloco de links inferior */
.links-inferiores-mural {
    padding: 15px !important;
    margin: 0 !important;
    text-align: center !important;
    background-color: #fafafa !important; /* Um fundo sutil para a área dos links */
    border-top: 1px solid #f0f2f5 !important;
}


/* Estilo dos links (Facebook / Instagram) */
.link-rede-mural {
    color: #b30000;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.link-rede-mural:hover {
    color: #660000;
    text-decoration: underline;
}

.divisor-rede-mural {
    color: #555555;
    margin: 0 4px;
}

/* --- GRID DE LOGOS DIREITO (2x3) --- */
.grid-logos-parceiros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 30px 40px;
    width: 100%;
    max-width: 420px;
}

/* Botões brancos dos Logotipos */
.btn-parceiro-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    height: 150px;
    border-radius: 12px;
    padding: 18px;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-parceiro-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.btn-parceiro-logo:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Ajustes Responsivos */
@media (max-width: 900px) {
    .container-mural-informativo {
        flex-direction: column;
        gap: 40px;
    }
    .grid-logos-parceiros {
        max-width: 100%;
    }
}

/* ==========================================================================
   SEÇÃO FINAL: RODAPÉ DE FORA A FORA COMPLETO (COMPACTO E ALINHADO)
   ========================================================================== */
.rodape-siarq-contatos {
    width: 100%; /* Garante o preenchimento de uma lateral a outra da tela */
    background-color: #ffffff;
    border-top: 10px solid #b30000; /* Linha grossa vermelha de fora a fora */
    padding: 30px 0; /* REDUZIDO: Altura mais compacta nas margens superior e inferior */
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

/* Trava o conteúdo útil centralizado em 1200px (IDÊNTICO às seções de cima) */
.container-rodape-siarq {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    
    /* CENTRALIZAÇÃO HORIZONTAL: Junta os elementos no centro do monitor */
    justify-content: center; 
    
    /* CENTRALIZAÇÃO VERTICAL: Mantém o alinhamento de altura entre os blocos */
    align-items: center; 
    
    /* AUMENTO DE GAP: Define um distanciamento amplo e fixo entre o mapa e o texto */
    gap: 160px; 
    
    box-sizing: border-box;
}

/* --- AJUSTE DE LARGURA PARA FORÇAR O ALINHAMENTO CENTRAL --- */
.rodape-coluna-mapa {
    /* Em vez de flex: 1 (que estica), definimos uma largura máxima fixa para o mapa */
    flex: 0 1 450px; 
    width: 100%;
}

.rodape-coluna-informacoes {
    /* Mantém o bloco de informações compacto, sem espalhar para a direita */
    flex: 0 1 550px; 
    color: #333333;
}

/* --- MAPA COMPACTADO --- */
.wrapper-iframe-mapa {
    width: 100%;
    height: 410px; /* REDUZIDO: Menor altura para deixar a seção proporcional e sutil */
    border: 1px solid #e2e2e2;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    border-radius: 2px;
    overflow: hidden;
}

/* --- TITULOS E TEXTOS --- */
.titulo-rodape-contatos {
    font-size: 20px;
    font-weight: bold;
    color: #b30000;
    text-transform: uppercase;
    margin: 0 0 18px 0; /* REDUZIDO: Margem inferior mais curta */
    letter-spacing: 0.3px;
}

.bloco-info-grupo {
    margin-bottom: 14px; /* REDUZIDO: Espaçamento entre os grupos mais compacto */
}

.subtitulo-rodape-grupo {
    font-size: 13.5px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.texto-nota-grupo {
    font-size: 12.5px;
    font-weight: normal;
    color: #555555;
}

/* --- LISTA E ÍCONES ALINHADOS --- */
.lista-contatos-siarq {
    list-style: none;
    padding: 0;
    margin: 0;
}

.item-info-linha {
    position: relative;
    font-size: 13px;
    color: #333333;
    margin: 4px 0;
    padding-left: 24px;
    line-height: 1.5;
}

.item-info-linha a {
    color: #b30000;
    text-decoration: none;
}

.item-info-linha a:hover {
    text-decoration: underline;
}

/* Ícones vetoriais em SVG inline */
.item-info-linha::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
}

.icone-relogio::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

.icone-email::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
    top: 3px;
}

.icone-chat::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
}

.icone-telefone::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
    top: 3px;
}

.icone-home::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
    top: 1px;
}

/* Divisória do Endereço inferior */
.bloco-info-endereco {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #dddddd;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
    .container-rodape-siarq {
        flex-direction: column-reverse;
        gap: 30px;
    }
    .wrapper-iframe-mapa {
        height: 260px;
    }
}



/* ==========================================================================
   ESTRUTURA PARA PÁGINAS INTERNAS (QUEM SOMOS, ETC.)
   ========================================================================== */
.conteudo-principal-interno {
    width: 100%;
    background-color: #ffffff;
    padding: 30px 0 60px 0;
    box-sizing: border-box;
}



/* Garante o alinhamento de 1200px idêntico ao resto do site */
.container-interno-padrao {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;

}

/* --- ESTILIZAÇÃO DO CONTEÚDO DO ARTIGO (PADRÃO PRINT) --- */
/* Título Principal */
.container-interno-padrao h1, 
.container-interno-padrao .page-header h1 {
    font-size: 34px;
    font-weight: normal;
    color: #333333;
    margin: 20px 0 15px 0;
    font-family: Arial, sans-serif;
}

/* Parágrafos de Texto do SIARQ */
.container-interno-padrao p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #333333;
    margin-bottom: 22px;
    text-align: justify; /* Alinhamento justificado elegante conforme o print */
    font-family: Arial, sans-serif;
}

/* Links dentro do texto */
.container-interno-padrao p a {
    color: #b30000;
    text-decoration: none;
    font-weight: 600;
}
.container-interno-padrao p a:hover {
    text-decoration: underline;
}

/* --- TRATAMENTO NATIVO DO BREADCRUMB (VOCÊ ESTÁ AQUI) --- */
.mod-breadcrumbs, .breadcrumb {
    background-color: #e9ecef; /* Fundo cinza do print */
    padding: 12px 20px;
    border-radius: 4px;
    list-style: none;
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 25px;
}
.mod-breadcrumbs a, .breadcrumb a {
    color: #b30000;
    text-decoration: none;
}
.mod-breadcrumbs a:hover, .breadcrumb a:hover {
    text-decoration: underline;
}

/* --- BOTÕES DE COMPARTILHAMENTO (MOCKUP VISUAL) --- */
.icones-compartilhamento-interno {
    display: flex;
    gap: 8px;
    margin: 15px 0 25px 0;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 15px;
}
.btn-share-social {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-size: cover;
    transition: opacity 0.2s;
}
.btn-share-social:hover {
/* Força o menu do Joomla a ficar na horizontal e herdar seu container */
.menu-container ul.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px; /* Espaçamento entre os itens */
}

}



/* Estilo para deixar a página interna idêntica ao padrão limpo */
.card-artigo {
    max-width: 1200px;
    margin: 0 auto;
}

/* Formatação do Título Principal do Artigo */
.card-artigo h1, .card-artigo .page-header h2 {
    font-size: 2.2rem;
    color: #333333;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 0; /* Remove linhas feias que o joomla às vezes coloca */
}

/* Espaçamento dos parágrafos do texto "O Arquivo Central..." */
.card-artigo p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444444;
    text-align: justify; /* Deixa o texto alinhado quadrado e elegante */
    margin-bottom: 1.5rem;
}


/* ==========================================================================
   FORMATAÇÃO DO BREADCRUMBS (VOCÊ ESTÁ AQUI)
   ========================================================================== */
/* O SEGREDO: Adiciona a barra "/" separadora automaticamente entre os itens */
.mod-breadcrumbs li + li::before,
.breadcrumbs span + a::before,
.breadcrumbs a + span::before,
.breadcrumbs span + span::before {
    content: "/" !important;
    padding: 0 10px !important;
    color: #6c757d !important;
    font-weight: normal !important;
}

/* Deixa o último item (página atual) cinza claro e sem link */
.breadcrumbs span:last-child {
    color: #6c757d !important;
}



/* ==========================================================================
   ESTILIZAÇÃO DA PÁGINA EQUIPE (ESTÁTICO - SEM EFEITOS DE MOUSE)
   ========================================================================== */

/* Ajuste dos títulos das seções */
/* Ajuste dos títulos das seções - CENTRALIZAÇÃO EM QUALQUER CENÁRIO */
div.container2 h1,
.container2 h1,
h1 {
    display: block !important;
    text-align: center !important; /* Força o alinhamento no meio */
    clear: both !important;        /* Impede que elementos flutuantes à esquerda puxem o texto */
    float: none !important;        /* Garante que o título não herde nenhum float antigo */
    width: 100% !important;        /* Ocupa toda a extensão horizontal da página */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Mantém a sua estilização visual anterior */
    font-family: sans-serif !important;
    color: #444444 !important;
    font-size: 1.4rem !important;
    margin-top: 40px !important;
    margin-bottom: 25px !important;
    text-transform: none !important;
    font-weight: 700 !important;
}

/* Containers das linhas de funcionários */
.container2 .only, 
.container2 .team {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important; /* Espaçamento idêntico entre os cards */
    margin-bottom: 25px !important;
    width: 100% !important;
}

/* CARD DE CADA FUNCIONÁRIO (Fixo e sem efeitos ao passar o mouse) */
.container2 .team-member {
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important; /* Bordas suaves arredondadas */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* Sombra leve e fixa */
    padding: 15px !important;
    width: 210px !important; /* Largura ideal para caber até 4 ou 5 por linha */
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}




/* ==========================================================================
   CORREÇÃO DE QUEBRA DE LINHA: NOME / FUNÇÃO / TELEFONE
   ========================================================================== */

/* Força uma margem mínima e isolada abaixo do nome */
.container2 .team-member strong {
    display: block !important;
    font-family: sans-serif !important;
    font-size: 0.95rem !important;
    color: #222222 !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important; /* Espaço controlado entre o Nome e a Função */
}

/* Remove APENAS as quebras de linha fantasmas que ficam coladas no strong */
.container2 .team-member strong + br {
    display: none !important;
}

/* GARANTE QUE A FUNÇÃO E O TELEFONE FIQUEM EM LINHAS SEPARADAS */
.container2 .team-member,
.container2 .team-member span,
.container2 .team-member text {
    font-family: sans-serif !important;
    font-size: 0.85rem !important;
    color: #666663 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* Ativa o comportamento padrão do <br> para o restante do texto (como o telefone) */
.container2 .team-member br {
    display: block !important;
    content: "" !important;
    margin-top: 2px !important;
}

/* Limpa margens de parágrafos que o Joomla injeta e que desalinhavam o bloco */
.container2 .team-member p {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important; /* Transforma o bloco do e-mail/parágrafo em linha própria */
}





/* PADRONIZAÇÃO DAS FOTOS (Ajusta alturas diferentes automaticamente) */
.container2 .team-member img {
    width: 100% !important;
    max-width: 180px !important;
    height: 220px !important; /* Altura fixa para alinhar todos os rostos */
    object-fit: cover !important; /* Corta proporcionalmente sem achatar a imagem */
    border-radius: 8px !important; /* Arredondamento da foto interna */
    margin-bottom: 15px !important;
    display: block !important;
}

/* Textos internos do Card */
.container2 .team-member strong {
    display: block !important;
    font-family: sans-serif !important;
    font-size: 1rem !important;
    color: #222222 !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
}

/* Remoção de parágrafos extras criados pelo editor que quebram o alinhamento */
/* Garante que o contêiner de parágrafo <p> que envolve o link não force blocos estranhos */
.container2 .team-member p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}


/* Telefones, cargos e textos normais */
.container2 .team-member text,
.container2 .team-member span,
.container2 .team-member {
    font-family: sans-serif !important;
    font-size: 0.95rem !important;
    color: #666663 !important;
    line-height: 1.4 !important;
}

/* LINKS DE E-MAIL EM VERMELHO (Sem sublinhado ao passar o mouse) */
.container2 .team-member a {
    font-family: sans-serif !important;
    font-size: 0.8rem !important; /* Reduzido sutilmente de 0.85 para 0.8 para dar mais margem */
    color: #b81d24 !important; /* Vermelho institucional da Unicamp */
    text-decoration: none !important;
    
    /* O SEGREDO: Impede o navegador de quebrar a linha no caractere "@" */
    white-space: nowrap !important; 
    display: inline-block !important;
    
    margin-top: auto !important; /* Mantém o e-mail sempre preso na base do card */
    padding-top: 5px !important;
    font-weight: 600 !important;
}


/* Mantém o link limpo mesmo com o mouse em cima */
.container2 .team-member a:hover {
    text-decoration: none !important;
    color: #b81d24 !important;
}

/* Linha divisória fina entre as seções */
hr {
    border: 0 !important;
    border-top: 1px solid #eeeeee !important;
    margin: 30px 0 !important;
}




/* ==========================================================================
   ESTILIZAÇÃO DO HISTÓRICO: CENTRALIZAÇÃO ABSOLUTA (FOTOS E LEGENDAS)
   ========================================================================== */

/* Alvos: parágrafos que contêm as fotos e legendas centralizadas */
p[style*="text-align: center"],
p[style*="text-align:center"] {
    display: flex !important;
    flex-direction: column !important; /* Joga a legenda para baixo da foto */
    align-items: center !important;    /* Centraliza horizontalmente na tela */
    justify-content: center !important;
    text-align: center !important;     /* Força o texto interno a ficar no centro */
    margin: 25px auto !important;      /* Distribui margens automáticas para centralizar o bloco */
    width: 100% !important;
    float: none !important;            /* Previne qualquer bug de quebra de layout */
}

/* Tratamento direto para as imagens antigas */
p[style*="text-align: center"] img,
p[style*="text-align:center"] img {
    display: block !important;
    margin: 0 auto 12px auto !important; /* Garante a foto no centro exato */
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

/* Tratamento para as legendas (spans) para acompanharem o alinhamento */
p[style*="text-align: center"] span,
p[style*="text-align:center"] span {
    display: inline-block !important;
    text-align: center !important;
    font-family: sans-serif !important;
    font-size: 0.88rem !important;
    color: #666666 !important;
    line-height: 1.4 !important;
    max-width: 460px !important; /* Previne que o texto da legenda estique mais que a foto */
    font-style: italic !important;
}

/* Garante o texto em itálico caso existam textos sem a tag span (como a lista de coordenadores) */
p[style*="text-align: center"] {
    font-family: sans-serif !important;
    font-size: 0.88rem !important;
    color: #666666 !important;
    font-style: italic !important;
}

/* Exceção: Mantém os títulos em negrito normais (sem itálico) */
p[style*="text-align: center"] strong {
    font-style: normal !important;
    font-size: 1.1rem !important;
    color: #444444 !important;
    display: inline-block !important;
}



/* ==========================================================================
   PADRONIZAÇÃO DEFINITIVA DA LINHA DO TÍTULO (SEM DUPLICAÇÕES)
   ========================================================================== */

/* 1. Aplica a linha cinza padrão do print apenas na caixa principal do título */
.secao-interna-artigo .page-header {
    margin: 0 0 20px 0 !important;
    padding: 0 0 15px 0 !important;
    border-bottom: 1px solid #eeeeee !important; 
    width: 100% !important;
    margin-top: 60px !important; /* Move todo o corpo do site para cima */
}

/* 2. Remove linhas (<hr>) que estejam coladas ou duplicadas logo abaixo do título */
.secao-interna-artigo .page-header + hr,
.secao-interna-artigo .page-header + p hr,
.secao-interna-artigo h1 + hr {
    display: none !important;
}

/* 3. Se o seu HTML do artigo começar com um <hr> isolado no topo, essa regra desativa ele */
.secao-interna-artigo .item-page > hr:first-of-type,
.secao-interna-artigo .com-content-article > hr:first-of-type {
    display: none !important;
}

/* Estilização limpa do H1 */
.secao-interna-artigo h1,
.secao-interna-artigo [itemprop="name"] h1 {
    font-family: sans-serif !important;
    font-size: 2.2rem !important;
    color: #333333 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}


/* Organização de mídias e listas em artigos estruturais */
.container-imagem-artigo {
    text-align: center;
    margin: 30px auto;
    width: 100%;
}
.imagem-responsiva {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
article blockquote {
    border-left: 3px solid #b81d24; /* Adiciona uma linha vermelha elegante ao lado das citações */
    padding-left: 15px;
    margin: 15px 0;
    color: #555555;
}



/* ==========================================================================
   ESTILIZAÇÃO DA PÁGINA DE MODELOS E FORMULÁRIOS (SISTEMA DE CARDS)
   ========================================================================== */
.subtitulo-pagina {
    font-size: 15px;
    color: #666666;
    margin-bottom: 30px;
    font-style: italic;
}

.container-modelos-downloads {
    width: 100%;
    margin-top: 20px;
}

.secao-downloads {
    margin-bottom: 40px;
}

/* Títulos das seções de downloads herdando o padrão limpo do SIARQ */
.secao-downloads h3 {
    font-size: 18px;
    color: #333333;
    border-left: 4px solid #b30000; /* Detalhe vermelho institucional nas seções */
    padding-left: 12px;
    margin-bottom: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cria o alinhamento inteligente em 3 colunas para telas de computador */
.grid-links-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

/* Layout específico para os itens mais longos ocuparem mais espaço */
.grid-links-downloads.longa-extensao {
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}

/* Design dos cards individuais de download */
.card-download {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background-color: #f9f9f9;
    border: 1px solid #eef0f2;
    border-radius: 6px;
    color: #444444 !important;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Ícone sutil simulando arquivo Word (.doc) antes do texto */
.card-download::before {
    content: "DOC";
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    background-color: #2b579a; /* Cor azul clássica padrão Microsoft Word */
    padding: 3px 6px;
    border-radius: 3px;
    margin-right: 12px;
    letter-spacing: 0.5px;
}

/* Efeito de destaque sofisticado ao passar o mouse */
.card-download:hover {
    background-color: #ffffff;
    border-color: #b30000; /* Borda vermelha Unicamp ao focar */
    color: #b30000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(179, 0, 0, 0.08);
}

/* Responsividade total para celulares e tablets */
@media (max-width: 768px) {
    .grid-links-downloads,
    .grid-links-downloads.longa-extensao {
        grid-template-columns: 1fr; /* Vira 1 coluna única em telas pequenas */
    }
}


/* ==========================================================================
   ESTILIZAÇÃO DE ROW CARDS TOTALMENTE CLICÁVEIS (NORMATIVAS)
   ========================================================================== */
.container-normativas-gestao {
    width: 100%;
    margin-top: 25px;
}

.bloco-normativas {
    margin-bottom: 40px;
}

.bloco-normativas h3 {
    font-size: 16px;
    color: #333333;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    border-bottom: 2px solid #b30000; /* Destaque Vermelho Unicamp */
    padding-bottom: 6px;
}

.lista-linhas-documentos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* O CARD TODO VIRA O LINK PRINCIPAL */
.linha-documento-card {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    background-color: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 6px;
    text-decoration: none !important; /* Desativa sublinhados nativos de links */
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.01);
    cursor: pointer; /* Garante a mãozinha de clique em qualquer ponto do card */
}

/* Efeito Hover elegante aplicado na estrutura inteira */
.linha-documento-card:hover {
    border-color: #b30000;
    background-color: #fdfdfd;
    transform: translateX(4px); /* Deslocamento sutil horizontal interativo */
    box-shadow: 0 4px 12px rgba(179, 0, 0, 0.04);
}

/* Título interno do documento */
.documento-titulo {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 6px;
    transition: color 0.15s ease;
}

/* O título assume a cor institucional apenas quando o card recebe hover */
.linha-documento-card:hover .documento-titulo {
    color: #b30000;
}

/* Emblema dinâmico para arquivos PDF */
.linha-documento-card.pdf .documento-titulo::before {
    content: "PDF";
    font-size: 8.5px;
    font-weight: 700;
    color: #ffffff;
    background-color: #b30000;
    padding: 2px 5px;
    border-radius: 2px;
    margin-right: 10px;
    line-height: 1;
}

/* Emblema dinâmico para Links Externos */
.linha-documento-card.link-externo .documento-titulo::before {
    content: "LINK";
    font-size: 8.5px;
    font-weight: 700;
    color: #ffffff;
    background-color: #777777;
    padding: 2px 5px;
    border-radius: 2px;
    margin-right: 10px;
    line-height: 1;
}

/* Descrição interna (mantida limpa e sem estilização de link) */
.documento-descricao {
    font-size: 13.5px;
    color: #666666;
    margin: 0 !important;
    line-height: 1.5;
}


/* ==========================================================================
   ÍNDICE DE LINKS ÂNCORA FLUIDO E EM ORDEM ALFABÉTICA
   ========================================================================== */
html {
    scroll-behavior: smooth; /* Faz a página deslizar suavemente até o card */
}

.container-indice-ancoras {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 20px 0 30px 0;
}

.titulo-indice {
    font-size: 14px;
    font-weight: 700;
    color: #495057;
    margin-top: 0;
    margin-bottom: 12px !important;
}

.lista-ancoras {
    display: flex;
    flex-wrap: wrap; /* Faz quebrar a linha automaticamente se faltar espaço */
    gap: 8px;
}

/* Estilo padrão de tag/chip para cada sigla */
.link-ancora {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #495057 !important;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out;
}

/* Comportamento de Hover nos links do topo */
.link-ancora:hover {
    color: #ffffff !important;
    background-color: #b30000; /* Vermelho Unicamp */
    border-color: #b30000;
}

/* Compensa o topo para o caso de haver menus fixos/headers no site */
[id^="csa-"] {
    scroll-margin-top: 30px; 
}


/* ==========================================================================
   BOTÃO FLUTUANTE CORPORATIVO (VOLTAR AO TOPO)
   ========================================================================== */
#btnTopFlutuante {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* Posicionamento Fixo na Tela */
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999; /* Garante que fique acima de qualquer conteúdo */
  
  /* Dimensões e Formato (Estilo Pílula Vertical) */
  width: 50px;
  height: 65px;
  border-radius: 25px;
  border: 1px solid #dee2e6;
  background-color: #ffffff;
  
  /* Efeitos de Transição e Sombra */
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Tipografia interna do botão */
#btnTopFlutuante .seta-topo {
  font-size: 14px;
  color: #495057;
  margin-bottom: 2px;
  transition: transform 0.2s ease;
}

#btnTopFlutuante .texto-topo {
  font-size: 9px;
  font-weight: 700;
  color: #6c757d;
  letter-spacing: 0.5px;
}

/* Classe ativada pelo JavaScript ao rolar a página */
#btnTopFlutuante.visivel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Estado inicial sutilmente deslocado para efeito de subida ao aparecer */
#btnTopFlutuante:not(.visivel) {
  transform: translateY(15px);
}




/* ==========================================================================
   COMPORTAMENTO DE HOVER (PASSAR O MOUSE) - PADRÃO UNICAMP
   ========================================================================== */
#btnTopFlutuante:hover {
  background-color: #b30000; /* Vermelho Unicamp */
  border-color: #b30000;
  box-shadow: 0 6px 16px rgba(179, 0, 0, 0.25);
}

/* Altera a cor dos textos internos para branco no Hover */
#btnTopFlutuante:hover .seta-topo,
#btnTopFlutuante:hover .texto-topo {
  color: #ffffff;
}

/* Pequena animação na seta ao passar o mouse */
#btnTopFlutuante:hover .seta-topo {
  transform: translateY(-2px);
}

.linha-documento-card.bloco-limpo {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 15px 0 !important;
    margin-bottom: 20px !important;
    transform: none !important;
    cursor: default !important;
}

.linha-documento-card.bloco-limpo:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border: none !important;
}


/* ==========================================================================
   MÓDULO: ARQUIVOS E CATÁLOGOS SIARQ
   ========================================================================== */

/* Escopo do bloco unificado */
.acervo-catalogos {
    width: 100%;
    box-sizing: border-box;
}

/* Elemento-Card individualizado via Flexbox */
.acervo-catalogos__item {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    margin-bottom: 24px;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Área da Capa com restrição fixa de largura */
.acervo-catalogos__capa-container {
    flex-shrink: 0;
    margin-right: 24px;
}

/* Link de proteção e acionamento */
.acervo-catalogos__link-capa {
    display: block;
    text-decoration: none;
}

/* Tratamento técnico de tratamento de imagem */
.acervo-catalogos__imagem {
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    object-fit: cover;
    transition: transform 0.25s ease-in-out;
}

/* Sutil feedback de profundidade no hover da imagem */
.acervo-catalogos__link-capa:hover .acervo-catalogos__imagem {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Container de fluxos textuais */
.acervo-catalogos__conteudo {
    flex-grow: 1;
}

/* Títulos hierárquicos institucionais */
.acervo-catalogos__titulo {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.acervo-catalogos__titulo a {
    color: #00427c; /* Identidade de Links Unicamp */
    text-decoration: none;
    transition: color 0.2s ease;
}

.acervo-catalogos__titulo a:hover {
    color: #b30000; /* Destaque Governamental / Unicamp */
    text-decoration: underline;
}

/* Parágrafos de metadados e resumos */
.acervo-catalogos__metadado,
.acervo-catalogos__descricao {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #495057;
}

.acervo-catalogos__descricao {
    margin-bottom: 0; /* Último elemento zera o recuo inferior */
}

/* Marcadores negritados internos */
.acervo-catalogos__rotulo {
    color: #212529;
    font-weight: 600;
}

/* ==========================================================================
   BREAKPOINTS DE RESPONSIVIDADE (MOBILE-FIRST ADAPTIVE)
   ========================================================================== */
@media (max-width: 640px) {
    .acervo-catalogos__item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    .acervo-catalogos__capa-container {
        margin-right: 0;
        margin-bottom: 20px;
    }
}






/* ==========================================================================
   ESTILIZAÇÃO GERAL: MEMÓRIA E DIFUSÃO AC/SIARQ
   ========================================================================== */

/* 1. Cabeçalho da Página */
.memoria-intro {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 3px solid #eeeff1;
}

.memoria-intro__texto {
    font-size: 16px;
    line-height: 1.7;
    color: #333333;
    margin-bottom: 12px;
}

.memoria-intro__chamada {
    font-size: 15px;
    font-weight: 600;
    color: #00427c;
}

/* 2. Arquitetura dos Cards (Timeline) */
.memoria-timeline {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 60px;
}

.memoria-card {
    background-color: #ffffff;
    border: 1px solid #e3e6ec;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    overflow: hidden;
}

.memoria-card__header {
    background-color: #f8f9fa;
    padding: 16px 24px;
    border-bottom: 1px solid #e3e6ec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.memoria-card__titulo {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.memoria-card__tag {
    background-color: #b30000;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.memoria-card__corpo {
    padding: 24px;
}

.memoria-card__corpo--centralizado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 3. Imagens e Links Pró */
.memoria-card__link-imagem {
    display: inline-block;
    text-decoration: none;
    outline: none;
}

.memoria-card__img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

.memoria-card__link-imagem:hover .memoria-card__img {
    transform: scale(1.015);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.memoria-card__img--banner {
    width: 100%;
    max-width: 535px;
}

.memoria-card__legenda {
    font-size: 13px;
    color: #6c757d;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
    font-style: italic;
}

/* 4. Layout Multimídia Interno (Grid e Flex) */
.memoria-card__midia-dupla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    align-items: start;
}

.memoria-card__item-midia {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.memoria-card__grid-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .memoria-card__grid-conteudo {
        grid-template-columns: auto 1fr;
        align-items: start;
    }
}

.memoria-card__imagens-grupo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.memoria-card__texto p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #495057;
    margin-top: 0;
    margin-bottom: 14px;
}

.memoria-card__texto p:last-child {
    margin-bottom: 0;
}

.memoria-card__flex-centro {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Containers de Vídeos e Iframes Responsivos */
.memoria-card__video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 560px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.memoria-card__video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.memoria-card__video-container {
    width: 100%;
    max-width: 560px;
    margin-top: 10px;
}

.memoria-card__video-player {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #000000;
}

/* 5. Subestruturas da Seção de 35 anos */
.memoria-card__bloco-destaque {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px dashed #dee2e6;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

@media (min-width: 992px) {
    .memoria-card__bloco-destaque {
        flex-direction: row;
        align-items: start;
    }
}

.memoria-card__sub-itens {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.memoria-card__sub-item h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: #00427c;
    margin-top: 0;
    margin-bottom: 6px;
}

.memoria-card__sub-item p {
    font-size: 14px;
    line-height: 1.5;
    color: #495057;
    margin: 0;
}

.memoria-card__link-interno {
    font-weight: 600;
    color: #b30000;
    text-decoration: none;
}

.memoria-card__link-interno:hover {
    text-decoration: underline;
}

/* ==========================================================================
   SEÇÃO: GALERIA DE SELOS (GRID SYSTEM ALTERNATIVO À TABELA MÓVEL)
   ========================================================================== */
.memoria-galeria {
    margin-bottom: 60px;
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 6px;
    border: 1px solid #e3e6ec;
}

.memoria-galeria__header {
    text-align: center;
    margin-bottom: 30px;
}

.memoria-galeria__titulo {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px 0;
}

.memoria-galeria__subtitulo {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.memoria-galeria__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    justify-items: center;
}

.memoria-galeria__item {
    background-color: #ffffff;
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 220px;
    box-sizing: border-box;
}

.memoria-galeria__img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.memoria-galeria__legenda {
    font-size: 13.5px;
    font-weight: 600;
    color: #495057;
    margin-top: 12px;
}

/* ==========================================================================
   SEÇÃO: APOIO E PARCERIAS (PROJETOS EXTRAS)
   ========================================================================== */
.memoria-projetos__header {
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid #00427c;
}

.memoria-projetos__titulo {
    font-size: 20px;
    font-weight: 700;
    color: #00427c;
    margin: 0;
}

.memoria-projetos__lista {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.memoria-projeto-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 30px;
}

.memoria-projeto-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .memoria-projeto-item {
        grid-template-columns: minmax(200px, 300px) 1fr;
        align-items: start;
    }
}

.memoria-projeto-item__imagem-bloco {
    display: flex;
    justify-content: center;
}

.memoria-projeto-item__img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.memoria-projeto-item__titulo {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 0;
    margin-bottom: 12px;
}

.memoria-projeto-item__conteudo p {
    font-size: 14.2px;
    line-height: 1.6;
    color: #495057;
    margin-top: 0;
    margin-bottom: 12px;
}

.memoria-projeto-item__conteudo p:last-child {
    margin-bottom: 0;
}




/* ==========================================================================
    Unicamp de Portas Abertas, 20 edições e um pouco mais
   ========================================================================== */

/* Container Geral da Página */
.upa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #333333;
    -webkit-font-smoothing: antialiased; /* Garante renderização mais limpa em Webkit */
}

/* Banner Principal */
.upa-banner {
    width: 100%;
    margin-bottom: 30px;
}

.upa-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Título Apresentação */
.upa-title {
    text-align: center;
    font-size: 38px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 25px;
    color: #222222;
}

/* Corpo do Texto */
.upa-content p {
    text-align: justify;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Força a centralização absoluta do container da grade */
.upa-container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
}

/* Transforma a grade em um flexbox centralizado */
.upa-container .upa-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Alinha horizontalmente no centro */
    align-items: center !important;
    gap: 20px !important;
    margin: 40px auto 0 auto !important;
    width: 100% !important;
    max-width: 960px !important; /* Limita a largura para os 4 cards não espalharem */
    text-align: center !important;
}

/* Corrige o comportamento do link <a> para se comportar como um bloco/card */
.upa-container .upa-card {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    flex: 1 1 200px !important; /* Permite que cresçam e encolham igualmente */
    max-width: 220px !important;  /* Largura máxima de cada card */
    min-width: 180px !important;  /* Largura mínima para telas menores */
    margin: 0 !important;
}

/* Garante que a imagem do card ocupe 100% da largura dele */
.upa-container .upa-card-image {
    width: 100% !important;
    height: 150px !important; /* Ajuste a altura se necessário */
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px !important; /* Mantém as bordas arredondadas */
}

/* Card Individual (Link) */
.upa-card {
    position: relative;
    display: block;
    height: 150px; /* Define uma altura fixa para os cards funcionarem como botões de background */
    border-radius: 10px;
    overflow: hidden; /* Mantém os efeitos dentro do card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 1; /* Cria um novo contexto de empilhamento */
}

/* Contêiner de Imagem com Pseudo-elemento para Efeitos */
.upa-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.4s ease, transform 0.4s ease; /* Transições para zoom e blur */
    will-change: filter, transform; /* Otimização para o navegador */
    
    /* EFEITO INICIAL: Embaçado */
    filter: blur(5px) brightness(0.65); /* Adiciona blur e escurece um pouco para o texto aparecer */
    transform: scale(1.02); /* Escala ligeiramente para evitar bordas vazias causadas pelo blur */
    
    z-index: -1; /* Coloca a imagem atrás do texto */
}

/* HOVER EFFECT NO CARD (Passar o mouse) */
.upa-card:hover {
    transform: translateY(-4px); /* Card levanta um pouco */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra mais profunda */
}

.upa-card:hover .upa-card-image {
    /* EFEITO HOVER: Nítido e com Zoom */
    filter: blur(0px) brightness(0.8); /* Remove o blur e clareia um pouco (mas ainda mantém contraste) */
    transform: scale(1.1); /* Dá um zoom suave de 10% */
}

/* Texto sobreposto na imagem */
.upa-card-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;     /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding: 15px;
    box-sizing: border-box;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Sombra para garantir legibilidade do texto nítido */
    pointer-events: none; /* Garante que o texto não intercepte cliques, o card inteiro é o link */
}

/* Responsividade para celulares e tablets */
@media (max-width: 900px) {
    .upa-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 em tablets */
    }
}

@media (max-width: 600px) {
    .upa-grid {
        grid-template-columns: 1fr; /* Lista única no celular */
    }
    .upa-card {
        height: 120px; /* Reduz a altura em telas pequenas */
    }
    .upa-title {
        font-size: 22px;
    }
    .upa-content p {
        font-size: 15px;
    }
    .upa-card-text {
        font-size: 16px;
    }
}



/* ==========================================================================
    Unicamp de Portas Abertas, 20 edições e um pouco mais - FICHA TÉCNICA
   ========================================================================== */
/* Container Principal */
.ficha-tecnica-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background-color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333333;
}

/* Título Principal */
.ft-main-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #111111;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

/* Linha decorativa abaixo do título */
.ft-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #cc0000; /* Vermelho institucional Unicamp, mude se preferir */
}

/* Estrutura das Linhas da Ficha */
.ft-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ft-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide em duas colunas perfeitas */
    padding: 18px 10px;
    border-bottom: 1px solid #eeeeee; /* Linha sutil separadora */
    align-items: baseline;
}

/* Remove a borda da última linha */
.ft-row:last-child {
    border-bottom: none;
}

/* Estilo da Função / Cargo (Coluna Esquerda) */
.ft-role {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    color: #555555;
    text-align: right;
    padding-right: 30px;
}

/* Estilo dos Nomes (Coluna Direita) */
.ft-names {
    font-size: 15px;
    line-height: 1.6;
    color: #222222;
    text-align: left;
    padding-left: 10px;
}

/* Estilo para termos como "(estagiária)" */
.ft-obs {
    font-size: 13px;
    color: #777777;
    font-style: italic;
}

/* Destaque sutil para a área de Agradecimentos */
.ft-thanks {
    background-color: #f9f9f9;
    margin-top: 15px;
    border-radius: 6px;
    border-bottom: none;
}

/* RESPONSIVIDADE: Em telas menores (celulares), vira uma coluna só */
@media (max-width: 600px) {
    .ft-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 8px;
        padding: 20px 0;
    }
    
    .ft-role {
        text-align: center;
        padding-right: 0;
        font-size: 12px;
        color: #cc0000; /* Destaca o cargo no mobile */
    }
    
    .ft-names {
        text-align: center;
        padding-left: 0;
    }
}




/* ==========================================================================
    A Unicamp e o enfrentamento das mudanças climáticas
========================================================================== */
.expo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #333333;
}
.expo-banner {
    width: 100%;
    margin-bottom: 35px;
}
.expo-banner img {
    width: 100%;
    height: auto;
    display: block;
}
.expo-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 25px;
    color: #222222;
}
.expo-content p {
    text-align: justify;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.expo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 45px;
}
.expo-card {
    position: relative;
    display: block;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}
.expo-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.4s ease, transform 0.4s ease;
    will-change: filter, transform;
    filter: blur(4px) brightness(0.65);
    transform: scale(1.03);
    z-index: -1;
}
.expo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.expo-card:hover .expo-card-image {
    filter: blur(0px) brightness(0.75);
    transform: scale(1.12);
}
.expo-card-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    padding: 10px;
    box-sizing: border-box;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

@media (max-width: 992px) {
    .expo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .expo-grid { grid-template-columns: repeat(2, 1fr); }
    .expo-title { font-size: 24px; }
}
@media (max-width: 400px) {
    .expo-grid { grid-template-columns: 1fr; }
}



/* ==========================================================================
   ESTRUTURA COMPLEMENTAR - LAYOUT DA PÁGINA ENSINO (LADO A LADO)
   ========================================================================== */
/* Layout Geral da Página Ensino */
.eixo-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #333333;
}

.eixo-bloco {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
    margin-top: 20px;
}

.eixo-texto {
    flex: 1;
}

.eixo-texto p {
    text-align: justify;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.eixo-subtitulo {
    font-size: 18px;
    font-weight: bold;
    color: #111111;
    margin-top: 0;
    margin-bottom: 15px;
}

.eixo-divisor {
    border: 0;
    border-top: 1px solid #dddddd;
    margin: 40px 0;
}

/* ==========================================================================
   CARROSSEL: MOLDURA E ADAPTAÇÃO DAS IMAGENS MENORES
   ========================================================================== */
.eixo-carrossel-moldura {
    position: relative;
    flex: 0 0 380px; 
    max-width: 100%;
    /* ADAPTAÇÃO: Removida a borda institucional institucional */
    border: none; /* Borda removida */
    border-radius: 4.5px;
    /* ADAPTAÇÃO: Removido o padding interno */
    padding: 0; /* Padding removido */
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    aspect-ratio: 3 / 4; 
    overflow: hidden;
}

.eixo-carrossel-moldura .carrossel-slides {
    width: 100%;
    height: 100%;
    position: relative;
}

.eixo-carrossel-moldura .slide {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.eixo-carrossel-moldura .slide.active {
    display: block;
}

/* Animações sincronizadas herdadas da página principal */
.eixo-carrossel-moldura .slide.slide-entrada {
    display: block;
    animation: esteiraEntrada 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.eixo-carrossel-moldura .slide.slide-fuga {
    display: block;
    animation: esteiraFuga 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.eixo-carrossel-moldura .slide img {
    width: 100%;
    height: 100%;
    /* ADAPTAÇÃO: Imagem preenche todo o espaço (Cover) */
    object-fit: contain; 
    background-color: #fcfcfc;
    display: block;
    cursor: pointer; /* Indica que a imagem é clicável */
}

/* SETAS LATERAIS: Invisíveis por padrão, surgem no hover */
.eixo-carrossel-moldura .carrossel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 11px;
    background-color: rgba(0, 0, 0, 0.2); 
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
}

.eixo-carrossel-moldura:hover .carrossel-btn {
    opacity: 1;
    visibility: visible;
}

.eixo-carrossel-moldura .carrossel-btn:hover { 
    background-color: #b30000; 
}

.eixo-carrossel-moldura .carrossel-btn.prev { left: 10px; }
.eixo-carrossel-moldura .carrossel-btn.next { right: 10px; }

/* CÁPSULA INDICADORA (Estilo idêntico ao quadrado verde do exemplo) */
.eixo-carrossel-moldura .carrossel-indicadores {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    background-color: #dbdbdb; /* Fundo cinza claro idêntico ao print */
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.eixo-carrossel-moldura:hover .carrossel-indicadores {
    opacity: 1;
    visibility: visible;
}

.eixo-carrossel-moldura .carrossel-indicadores .bolinha {
    display: inline-block; 
    width: 6px;
    height: 6px;
    background-color: #aaaaaa; /* Cinza médio para os pontos inativos */
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.eixo-carrossel-moldura .carrossel-indicadores .bolinha.active,
.eixo-carrossel-moldura .carrossel-indicadores .bolinha:hover { 
    background-color: #cc0000; /* Vermelho vivo em destaque */
    transform: none;
}

/* ==========================================================================
   ESTILOS DO LIGHTBOX (MODAL AMPLIAÇÃO)
   ========================================================================== */
.lightbox {
    display: none; /* Escondido por padrão */
    position: fixed; /* Fixo na tela */
    z-index: 9999; /* Sobrepõe tudo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite rolagem se necessário */
    background-color: rgb(0,0,0); /* Cor de fundo de segurança */
    background-color: rgba(0,0,0,0.9); /* Preto com opacidade */
    padding-top: 50px;
    cursor: pointer; /* Clicar fora para fechar */
}

.lightbox-content {
    margin: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 80%; /* Limita a largura máxima da imagem ampliada */
    max-height: 80vh; /* Limita a altura máxima a 80% da altura da viewport */
    border-radius: 4px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    
    /* Animação suave de surgimento */
    animation-name: zoomIn;
    animation-duration: 0.4s;
    cursor: default; /* Impede cursor de link ao sobrepor a imagem */
}

@keyframes zoomIn {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* Botão de Fechar '×' */
.close-lightbox {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-lightbox:hover,
.close-lightbox:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* ==========================================================================
   ANIMAÇÕES DE ESTEIRA HERDADAS DA HOME
   ========================================================================== */
@keyframes esteiraEntrada {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes esteiraFuga {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ==========================================================================
   RESPONSIVIDADE COMPLEMENTAR
   ========================================================================== */
@media (max-width: 900px) {
    .eixo-bloco {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .eixo-carrossel-moldura {
        flex: none;
        width: 100%;
        max-width: 380px;
    }
    .eixo-carrossel-moldura .carrossel-btn,
    .eixo-carrossel-moldura .carrossel-indicadores {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .lightbox-content {
        max-width: 95%;
    }
}




/* ==========================================================================
   ESTRUTURA COMPLEMENTAR - LAYOUT DA PÁGINA PESQUISA (LADO A LADO)
   ========================================================================== */
.eixo-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #333333;
}

.eixo-introducao p {
    text-align: justify;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.eixo-bloco {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
    margin-top: 20px;
}

.eixo-texto {
    flex: 1;
}

.eixo-texto p {
    text-align: justify;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.eixo-subtitulo {
    font-size: 18px;
    font-weight: bold;
    color: #111111;
    margin-top: 0;
    margin-bottom: 15px;
}

.eixo-divisor {
    border: 0;
    border-top: 1px solid #dddddd;
    margin: 40px 0;
}

/* CONTAINER DA IMAGEM ESTÁTICA (MANTÉM PROPORÇÕES DO LAYOUT ANTERIOR) */
.eixo-imagem-moldura {
    position: relative;
    flex: 0 0 380px; 
    max-width: 100%;
    border: none; /* Sem bordas institucionais */
    padding: 0; 
    background-color: #ffffff; /* Fundo branco para acoplar sobras do contain */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    aspect-ratio: 3 / 4; 
    overflow: hidden;
    border-radius: 4px;
}

/* EXIBIÇÃO DA IMAGEM COMPLETA SEM NENHUM CORTE LATERAL */
.eixo-imagem-moldura img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mostra o documento 100% visível, adaptando largura/altura */
    background-color: #ffffff; 
    display: block;
    cursor: pointer; /* Feedback visual indicando que é ampliável */
    transition: transform 0.2s ease;
}

/* Leve efeito hover para ressaltar que a imagem é clicável */
.eixo-imagem-moldura:hover img {
    transform: scale(1.02);
}

/* ESTILOS INTERNOS DO BOX DE AMPLIAÇÃO (LIGHTBOX) */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding-top: 50px;
    cursor: pointer;
}

.lightbox-content {
    margin: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: 82vh;
    border-radius: 4px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.6);
    animation-name: zoomIn;
    animation-duration: 0.3s;
    cursor: default;
}

@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.close-lightbox {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-lightbox:hover { color: #bbb; }

/* RESPONSIVIDADE MOBILE */
@media (max-width: 900px) {
    .eixo-bloco {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .eixo-imagem-moldura {
        flex: none;
        width: 100%;
        max-width: 380px;
    }
    .lightbox-content { max-width: 95%; }
}




/* ==========================================================================
   ESTRUTURA COMPLEMENTAR - LAYOUT DA PÁGINA FICHA TÉCNICA Climaticas
   ========================================================================== */
.ficha-tecnica-container {
    max-width: 1000px;
    margin: 60px auto;
    padding: 30px;
    background-color: #fafafa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    font-family: Arial, sans-serif;
    color: #333333;
}

.ficha-titulo {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111111;
    margin-bottom: 40px;
    position: relative;
}

.ficha-titulo::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #666666;
    margin: 12px auto 0 auto;
}

.secao-principal {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

/* Estrutura de Grid para duas colunas no Desktop */
.ficha-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
}

.ficha-item {
    flex: 1 1 calc(50% - 20px); /* Ocupa metade da largura menos o espaçamento */
    min-width: 280px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.ficha-cargo {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #666666;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ficha-nome {
    font-size: 16px;
    color: #222222;
    line-height: 1.4;
}

.ficha-nome.destaque {
    font-size: 18px;
    font-weight: bold;
    color: #111111;
}

/* Ajuste Responsivo para Celulares */
@media (max-width: 768px) {
    .ficha-grid {
        flex-direction: column;
        gap: 25px;
    }
    .ficha-item {
        flex: 1 1 100%;
        text-align: center; /* Centraliza no mobile para manter a elegância */
    }
    .ficha-tecnica-container {
        padding: 20px;
        margin: 30px 15px;
    }
}




/* ==========================================================================
    Exposição: Publicações Estudantis da Unicamp (SNA 2022)
========================================================================== */

/* Container Principal */
.upa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #333333;
}

/* Banner de Capa */
.upa-banner {
    width: 100%;
    margin-bottom: 35px;
}
.upa-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Título da Seção (Apresentação) */
.upa-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 25px;
    color: #222222;
}

/* Parágrafos de Texto */
.upa-content p {
    text-align: justify;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Grade de Botões (6 Elementos no total) */
.upa-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 colunas para alinhar as décadas e a ficha técnica */
    gap: 12px;
    margin-top: 45px;
}

/* Estrutura do Cartão / Botão */
.upa-card {
    position: relative;
    display: block;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

/* Imagem interna com efeitos de foco e desfoque no Hover */
.upa-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.4s ease, transform 0.4s ease;
    will-change: filter, transform;
    filter: blur(4px) brightness(0.65); /* Entrega legibilidade inicial ao texto */
    transform: scale(1.03);
    z-index: -1;
}

/* Interações ao passar o mouse (Hover) */
.upa-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.upa-card:hover .upa-card-image {
    filter: blur(0px) brightness(0.75); /* Revela a imagem original nitidamente */
    transform: scale(1.12);
}

/* Texto centralizado sobre a imagem */
.upa-card-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    padding: 10px;
    box-sizing: border-box;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* ==========================================================================
    Responsividade (Media Queries)
========================================================================== */

/* Telas médias (Tablets em modo paisagem) */
@media (max-width: 1024px) {
    .upa-grid { 
        grid-template-columns: repeat(3, 1fr); /* Quebra para 2 linhas com 3 cartões cada */
    }
}

/* Telas pequenas (Smartphones e Tablets em modo retrato) */
@media (max-width: 600px) {
    .upa-grid { 
        grid-template-columns: repeat(2, 1fr); /* Quebra para 3 linhas com 2 cartões cada */
    }
    .upa-title { 
        font-size: 24px; 
    }
}

/* Telas muito pequenas (Celulares antigos ou compactos) */
@media (max-width: 400px) {
    .upa-grid { 
        grid-template-columns: 1fr; /* Lista de uma única coluna vertical */
    }
}




/* ==========================================================================
    PAGINA TEMAS GERAIS
========================================================================== */
/* Estilização para deixar a lista de links moderna */
.menu-ancoragem-difusao {
    list-style: none;
    padding: 0;
    margin: 20px 0 30px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.menu-ancoragem-difusao li a {
    display: inline-block;
    background: #f5f5f5;
    color: #cc0000;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}

.menu-ancoragem-difusao li a:hover {
    background: #cc0000;
    color: #ffffff;
    border-color: #cc0000;
}

/* Espaçamento e formatação interna do bloco de citações acadêmicas */
.card-lista-academicos p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eaeaea;
    text-align: justify;
}

.card-lista-academicos p:last-child {
    border-bottom: none;
}

.card-lista-academicos p a {
    color: #cc0000;
    text-decoration: underline;
    font-weight: 500;
}



/* CONTAINER E DIVISÃO DA GRADE */
.container-grade-pesquisas {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1140px;
    margin: 30px auto;
    padding: 0 15px;
}

/* O primeiro bloco (Destaque) ocupa sempre 100% */
.bloco-artigo-destaque {
    width: 100%;
}

/* O segundo bloco quebra em exatamente 2 colunas simétricas em telas médias/grandes */
@media (min-width: 768px) {
    .bloco-artigos-colunas {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
        width: 100%;
    }
}


/* ==========================================================================
    PAGINA EVENTOS DIFUSÃO (LISTAGEM DE ARTIGOS)
========================================================================= */

/* Reseta e organiza o espaçamento nativo do Joomla para a lista de artigos */
.com-content-category-blog__items {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1140px;
    margin: 30px auto;
    padding: 0 15px;
}

/* O Bloco do Cartão com efeito flutuante sutil */
.card-evento-wrapper {
    position: relative; /* OBRIGATÓRIO: Define o limite para o clique expandido */
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Comportamento de elevação suave ao passar o mouse */
.card-evento-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.10);
    cursor: pointer;
}

/* Oculta qualquer bloco estrutural do Joomla que tenha ficado totalmente vazio após a paginação ser movida */
.com-content-category-blog__item:empty,
.com-content-category-blog__items > div:empty,
.blog-items > div:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    height: 0 !important;
}

/* Caixa e comportamento da Imagem do Banner */
.card-evento-imagem-box {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.card-evento-imagem-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Espaçamento do Texto Interno */
.card-evento-corpo {
    padding: 30px 25px;
}

/* Título do Artigo */
.card-evento-titulo {
    margin: 0 0 15px 0 !important;
    font-size: 22px !important;
    color: #333333 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    font-family: inherit;
}

/* Resumo de texto alinhado */
.card-evento-resumo {
    font-size: 15px !important;
    color: #333333 !important;
    line-height: 1.6 !important;
    text-align: justify;
}

/* Trata as palavras em destaque criadas via editor (ex: links e textos vermelhos) */
.card-evento-resumo span[style*="color"],
.card-evento-resumo a {
    color: #cc0000 !important;
    font-weight: 500;
    position: relative;
    z-index: 2; /* Mantém links internos clicáveis por cima da película global */
}

/* Box do botão inferior */
.card-evento-leia-mais-box {
    text-align: left;
    margin-top: 15px;
}

/* Elemento do Link Real "Leia mais..." CORRIGIDO E FORÇADO */
.card-evento-leia-mais,
.card-evento-wrapper .card-evento-leia-mais {
    color: #cc0000 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* A MÁGICA DO CLIQUE TOTAL DUPLO:
   Se o artigo tiver o botão "Leia mais", ele ativa o clique total.
   Se o botão NÃO existir (como no Podcast), o link do Título assume o clique total!
*/
.card-evento-leia-mais::after,
.card-evento-titulo a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1 !important; /* Cobre o card inteiro */
}

/* Garante que o hover funcione igual em qualquer um dos dois cenários */
.card-evento-wrapper:hover .card-evento-leia-mais,
.card-evento-wrapper:hover .card-evento-titulo a {
    text-decoration: underline !important;
}

/* Neutraliza qualquer .card-evento-wrapper acidentalmente aninhado dentro de outro */
.card-evento-wrapper .card-evento-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transform: none !important;
}

/* ==========================================================================
    ALINHAMENTO E RESET VISUAL DA PAGINAÇÃO (RODAPÉ)
========================================================================== */

/* Container geral da paginação: Limpa heranças visuais de card e forças sombras pra fora */
.custom-paginacao-footer-wrapper,
.com-content-category-blog__items > .custom-paginacao-footer-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1140px !important;
    width: 100% !important;
    margin: 40px auto 20px auto !important;
    padding: 20px 15px 0 15px !important;
    box-sizing: border-box !important;
    clear: both !important;
    grid-column: 1 / -1 !important; /* Força a paginação a ocupar a base da grid inteira */
    
    /* Remove completamente heranças de sombra ou fundo do card nativo */
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid #eeeeee !important; /* Linha sutil divisória */
    border-radius: 0 !important;
    transform: none !important;
}

/* Evita que animações de hover de cards afetem a paginação */
.custom-paginacao-footer-wrapper:hover,
.com-content-category-blog__items > .custom-paginacao-footer-wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Alinha a lista de botões horizontalmente */
.custom-paginacao-botoes ul,
.pagination ul {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
    background: transparent !important;
}

/* Formato básico dos botões numéricos e de navegação */
.custom-paginacao-botoes li a,
.custom-paginacao-botoes li span,
.pagination li a,
.pagination li span {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 36px !important;
    height: 34px !important;
    padding: 0 10px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    text-decoration: none !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 2px !important;
    font-size: 15px !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Limpa sub-elementos internos duplicados gerados por frameworks */
.custom-paginacao-botoes li a *,
.custom-paginacao-botoes li span *,
.pagination li a *,
.pagination li span * {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline !important;
    color: #333333 !important;
}

/* Efeito Hover nos botões numéricos */
.custom-paginacao-botoes li a:hover,
.pagination li a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}

.custom-paginacao-botoes li a:hover *,
.pagination li a:hover * {
    color: #000000 !important;
}

/* Página ativa/selecionada */
.custom-paginacao-botoes li.active span,
.pagination li.active span,
.pagination li .active {
    background-color: #404040 !important;
    color: #ffffff !important;
    border-color: #404040 !important;
    font-weight: bold !important;
}

/* Texto informativo da contagem "Página X de Y" */
.custom-paginacao-contador,
.counter {
    color: #333333 !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    background: transparent !important;
}

/* Remove seletores vazios residuais */
.custom-paginacao-botoes li:empty {
    display: none !important;
}

/* ==========================================================================
    CORREÇÃO PARA A PÁGINA DO ARTIGO COMPLETO (SINGLE ARTICLE)
========================================================================== */
/* Bloco de segurança para impedir que páginas internas herdem layouts de colunas */
.com-content-article,
.article-details {
    display: block !important;
    clear: both !important;
    margin-bottom: 60px !important; 
}

/* ==========================================================================
    REGRAS DE MEDIA QUERIES (RESPONSIVIDADE UNIFICADA)
========================================================================== */

/* Telas Maiores (Tablets e Desktops): Ativa as 2 colunas apenas no layout Blog de Origem */
@media (min-width: 768px) {
    .com-content-category-blog .com-content-category-blog__items,
    .com-content-category-blog .blog-items {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 30px !important;
    }

    .com-content-category-blog .com-content-category-blog__items > .row,
    .com-content-category-blog .blog-items > .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
        width: 100% !important;
    }

    /* O SEGREDO DO DESTAQUE: Força apenas o primeiro card real da listagem a ocupar o topo */
    .com-content-category-blog .com-content-category-blog__items > .card-evento-wrapper:first-of-type,
    .com-content-category-blog .com-content-category-blog__items > div:first-child:not(.custom-paginacao-footer-wrapper) {
        grid-column: 1 / -1 !important;
    }
}

/* Telas Pequenas (Celulares) */
@media (max-width: 576px) {
    .custom-paginacao-footer-wrapper {
        flex-direction: column-reverse !important;
        gap: 15px !important;
        text-align: center !important;
    }
}


/* ==========================================================================
    FALE CONOSCO
========================================================================== */

/* Container Principal */
.siarq-contact-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 1140px;
    margin: 20px auto;
    padding: 0 15px;
    color: #333333;
}

/* Cabeçalho e Alinhamento do Logo */
.siarq-contact-header {
    margin-bottom: 40px;
    border-bottom: 2px solid #eeeeee;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.siarq-header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Garante que o logo quebre para baixo em telas pequenas */
}

.siarq-contact-header h2 {
    color: #0056b3;
    font-size: 26px;
    margin: 0;
    font-weight: 700;
    text-align: center;
}

.siarq-logo {
    max-width: 100%;
    height: auto;
    display: block;
}

.siarq-hours {
    background-color: #f8f9fa;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 15px;
    border: 1px solid #e9ecef;
    text-align: center;
}

.siarq-hours strong {
    color: #495057;
}

/* Grid de Cards */
.siarq-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

/* Estilo Individual dos Cards */
.siarq-contact-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.siarq-contact-card h3 {
    color: #2d3748;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid #edf2f7;
    padding-bottom: 8px;
}

.card-subtitle {
    font-size: 14px;
    color: #718096;
    line-height: 1.4;
    margin-bottom: 20px;
    min-height: 40px;
}

/* Lista de Contatos */
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-list li {
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.5;
    color: #4a5568;
}

.contact-list li:last-child {
    margin-bottom: 0;
}

.contact-list a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 500;
}

/* Rodapé / Endereço Corrigido */
.siarq-contact-footer {
    background: #2d3748;
    color: #ffffff !important; /* Força o texto geral para branco */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.siarq-contact-footer p {
    margin: 0;
    color: #ffffff !important; /* Garante que os parágrafos herdem o branco puro */
}

.siarq-contact-footer strong {
    color: #ffffff !important; /* Garante que o texto em negrito também mude */
}

/* Responsividade para Celulares */
@media (max-width: 768px) {
    .siarq-header-content {
        flex-direction: column;
        gap: 15px;
    }
    .siarq-contact-header h2 {
        font-size: 22px;
    }
    .siarq-contact-grid {
        grid-template-columns: 1fr;
    }
    .card-subtitle {
        min-height: auto;
    }
}




/* ==========================================================================
    Dúvidas Frequentes
========================================================================== */
/* Container Geral */
.faq-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    max-width: 900px;
    margin: 30px auto;
    padding: 0 15px;
    color: #2d3748;
}

/* Área de Cabeçalho e Busca */
.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-header h2 {
    color: #b70201; /* Cor alterada para Vermelho */
    font-size: 28px;
    margin-bottom: 8px;
    font-weight: 700;
}

.faq-header p {
    color: #718096;
    font-size: 15px;
    margin-bottom: 25px;
}

.faq-search-box {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
}

.faq-search-box .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #a0aec0;
}

#faqSearchInput {
    width: 100%;
    padding: 14px 15px 14px 45px;
    font-size: 16px;
    border: 2px solid #cbd5e0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#faqSearchInput:focus {
    border-color: #b70201; /* Cor alterada para Vermelho ao focar na busca */
    box-shadow: 0 4px 12px rgba(183, 2, 1, 0.15);
}

/* Seções de Categorias */
.faq-section {
    margin-bottom: 35px;
}

.section-title {
    font-size: 20px;
    color: #1a202c;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 8px;
    margin-bottom: 18px;
    font-weight: 600;
}

.faq-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Estrutura Expansível (details / summary) */
.faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: border-color 0.2s ease;
}

/* Remove a setinha nativa feia em navegadores antigos */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-question {
    list-style: none; /* Esconde a seta padrão */
    padding: 16px 40px 16px 18px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #2d3748;
    cursor: pointer;
    position: relative;
    user-select: none;
    outline: none;
    background-color: #ffffff;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-question:hover {
    background-color: #fcf1f1; /* Fundo levemente avermelhado no hover */
    color: #b70201; /* Cor alterada para Vermelho no hover */
}

/* Adiciona um ícone de "+" e "-" à direita */
.faq-question::after {
    content: "＋";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #a0aec0;
    font-weight: bold;
    transition: transform 0.2s ease;
}

/* Ajustes visuais para quando o card estiver aberto */
.faq-item[open] {
    border-color: #b70201; /* Bordas vermelhas ao abrir */
}

.faq-item[open] .faq-question {
    background-color: #fdf2f2; /* Fundo sutil vermelho institucional */
    color: #b70201; /* Texto vermelho quando aberto */
    border-bottom: 1px solid #f9dbdb;
    font-weight: 600;
}

.faq-item[open] .faq-question::after {
    content: "－";
    color: #b70201;
}

/* Estilo do bloco de resposta */
.faq-answer {
    padding: 18px;
    background-color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
}

.faq-answer p {
    margin: 0 0 12px 0;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer a {
    color: #b70201; /* Links internos em Vermelho */
    text-decoration: none;
    word-break: break-all;
}

.faq-answer a:hover {
    text-decoration: underline;
}

/* Estilo do aviso de nenhum resultado */
.faq-no-results {
    text-align: center;
    padding: 30px;
    background: #fff5f5;
    color: #cbd5e0;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
}

/* Ajuste Responsivo */
@media (max-width: 600px) {
    .faq-header h2 { font-size: 24px; }
    .section-title { font-size: 18px; }
    .faq-question { font-size: 14px; padding-right: 35px; }
    #faqSearchInput { font-size: 14px; padding-top: 12px; padding-bottom: 12px; }
}








/* ==========================================================================
   RESET DE SEGURANÇA PARA MÍDIAS RESPONSIVAS (FORÇA BRUTA)
   ========================================================================== */

/* Garante que NENHUMA imagem ultrapasse o limite da tela do celular */
.memoria-timeline img,
.memoria-projetos img,
.memoria-galeria img {
    max-width: 100% !important;
    height: auto !important; /* Mantém a proporção e evita que a imagem fique esticada */
    width: auto; /* Desfaz larguras fixas como width="535" em telas menores */
}

/* Força os players de vídeo nativos (<video>) a se ajustarem */
.memoria-card__video-player {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Corrige o container de iframes (YouTube) para garantir que ele seja fluido */
.memoria-card__video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    padding-top: 25px;
    height: 0;
    width: 100% !important;
    max-width: 100% !important;
}

.memoria-card__video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


/* ==========================================================================
   MÓDULO DE NOTÍCIAS - PADRÃO PROFISSIONAL AC/SIARQ
   ========================================================================== */

/* Container Principal */
.noticias-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Cabeçalho da Página */
.noticias-header {
    margin-bottom: 35px;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 15px;
}

.noticias-header__titulo {
    font-size: 28px;
    color: #1a1a1a;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.noticias-header__subtitulo {
    font-size: 15px;
    color: #6c757d;
    margin: 0;
    line-height: 1.5;
}

/* Lista de Cards */
.noticias-lista {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Estrutura do Card Individual */
.noticia-card {
    display: flex;
    flex-direction: column; /* Padrão Mobile-First */
    background-color: #ffffff;
    border: 1px solid #e3e6ec;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.noticia-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Área de Mídia (Imagem) */
.noticia-card__midia {
    width: 100%;
    flex-shrink: 0;
    background-color: #f8f9fa;
}

.noticia-card__link {
    display: block;
    width: 100%;
    height: 100%;
}

.noticia-card__img {
    display: block;
    width: 100% !important;
    height: 220px !important;
    object-fit: cover; /* Recorta e ajusta a imagem sem distorcer */
    transition: opacity 0.2s ease;
}

.noticia-card__link:hover .noticia-card__img {
    opacity: 0.9;
}

/* Bloco de Conteúdo Textual */
.noticia-card__conteudo {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
}

/* Metadados (Data e Categoria) */
.noticia-card__meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12.5px;
}

.noticia-card__data {
    color: #6c757d;
}

.noticia-card__categoria {
    color: #b30000; /* Vermelho institucional */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Títulos das Notícias */
.noticia-card__titulo {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.noticia-card__titulo a {
    color: #00427c; /* Azul Unicamp */
    text-decoration: none;
}

.noticia-card__titulo a:hover {
    color: #b30000;
    text-decoration: underline;
}

/* Resumo do Texto */
.noticia-card__resumo {
    font-size: 14.5px;
    line-height: 1.6;
    color: #495057;
    margin: 0 0 16px 0;
    flex-grow: 1;
}

/* Botão Leia Mais estilo Link/Botão limpo */
.noticia-card__btn-ler {
    align-self: flex-start;
    font-size: 14px;
    font-weight: 600;
    color: #00427c;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}

.noticia-card__btn-ler:hover {
    color: #b30000;
    border-color: #b30000;
}

/* ==========================================================================
   REGRAS DE RESPONSIVIDADE E ADAPTAÇÃO AUTOMÁTICA
   ========================================================================== */

/* Computadores e Notebooks (Telas a partir de 768px) */
@media (min-width: 768px) {
    .noticia-card {
        flex-direction: row; /* Coloca imagem na esquerda e texto na direita */
    }

    .noticia-card__midia {
        width: 280px; /* Largura fixa da imagem no computador */
    }

    .noticia-card__img {
        height: 100% !important; /* Faz a imagem ocupar toda a altura do card */
    }
    
    .noticia-card__conteudo {
        padding: 24px;
    }
}

@media (min-width: 992px) {
    .noticia-card__midia {
        width: 340px; /* Dá um pouco mais de destaque para a imagem em telas grandes */
    }
    .noticia-card__titulo {
        font-size: 22px;
    }
}







/* ==========================================================================
   SEÇÃO COMPATÍVEL: ARQUIVO DE NOTÍCIAS DOS ANOS ANTERIORES
   ========================================================================== */
.arquivo-noticias {
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px 15px;
    background-color: #f5f5f5 !important; /* Força o fundo cinza claro */
    font-family: Arial, sans-serif !important;
    display: block !important;
    clear: both;
}

.arquivo-noticias__titulo {
    font-size: 22px !important;
    color: #333333 !important;
    margin-bottom: 25px !important;
    font-weight: bold !important;
    text-align: left !important;
}

/* Força a grade horizontal de 5 colunas */
.arquivo-noticias__grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 15px !important;
}

.arquivo-card {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

/* Container da Imagem (com fundo escuro caso a imagem quebre) */
.arquivo-card__midia {
    position: relative !important;
    width: 100% !important;
    height: 110px !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    background: linear-gradient(135deg, #b70201, #333333) !important; /* Lindo degradê caso a imagem não exista */
}

.arquivo-card__midia img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Texto do Ano sobre a foto */
.arquivo-card__ano {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important; /* Película escura */
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 1px !important;
    z-index: 2;
}

/* Resumo do texto abaixo do ano */
.arquivo-card__resumo {
    font-size: 13px !important;
    color: #444444 !important;
    line-height: 1.4 !important;
    margin: 12px 0 15px 0 !important;
    text-align: left !important;
    flex-grow: 1 !important; /* Empurra o botão para alinhar na base */
}

/* Botão Vermelho */
.arquivo-card__btn {
    display: block !important;
    width: 100% !important;
    background-color: #b70201 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 3px !important;
    transition: background-color 0.2s ease !important;
}

.arquivo-card__btn:hover {
    background-color: #910201 !important;
    color: #ffffff !important;
}

/* Responsividade */
@media (max-width: 992px) {
    .arquivo-noticias__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .arquivo-noticias__grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
}

/* ==========================================================================
   CORREÇÃO CIRÚRGICA DE QUEBRA DO MENU (EXCLUSIVA PARA FIREFOX)
   ========================================================================== */

/* 1. Regra Global de Segurança: Impede que o menu quebre de qualquer forma */
.main-navigation ul, 
.sp-megamenu-parent,
#sp-menu ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* 2. Aplica ajustes finos de tamanho e espaço APENAS dentro do navegador Firefox */
@-moz-document url-prefix() {
    
    /* Reduz o tamanho da fonte sutilmente para ganhar espaço físico */
    .main-navigation ul li a,
    .sp-megamenu-parent > li > a,
    #sp-menu ul li a {
        font-size: 12px !important; /* Ajuste milimétrico de 14px/13px para 12px */
        padding-left: 7px !important;  /* Encolhe o espaço lateral esquerdo */
        padding-right: 7px !important; /* Encolhe o espaço lateral direito */
        letter-spacing: -0.3px !important; /* Compacta as letras ligeiramente */
    }

    /* Força as colunas do template a cederem mais espaço para o menu */
    #sp-menu, 
    .sp-column,
    .header-navigation {
        width: auto !important;
        max-width: 100% !important;
        flex: 1 1 auto !important; /* Faz o bloco do menu esticar e ocupar a linha toda */
    }
    
    /* Se houver uma coluna de logotipo muito larga ao lado, reduz o espaço dela no Firefox */
    #sp-logo,
    .logo-outer-container {
        flex: 0 0 auto !important;
    }
}

/* ==========================================================================
   SUBMENUS E DROPDOWNS (VERTICAIS - NÍVEL 2 EM DIANTE)
   ========================================================================== */

/* Seleciona qualquer ul que esteja dentro de outro li (ou seja, submenus) */
ul.sp-megamenu-parent li ul,
.main-navigation ul li ul,
#sp-menu ul li ul,
.dropdown-menu,
.sp-dropdown {
    display: none; /* Mantém o comportamento nativo de esconder/mostrar do Joomla */
    position: absolute !important;
    flex-direction: column !important; /* Força os itens a ficarem um abaixo do outro */
    flex-wrap: wrap !important;
    white-space: normal !important;
    background-color: #ffffff !important;
    min-width: 230px !important; /* Largura confortável para os textos do submenu */
    width: auto !important;
    padding: 10px 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    z-index: 99999 !important;
}

/* Mostra o submenu vertical no hover */
ul.sp-megamenu-parent li:hover > ul,
.main-navigation ul li:hover > ul,
#sp-menu ul li:hover > ul,
ul.sp-megamenu-parent li:hover > .sp-dropdown,
.dropdown:hover .dropdown-menu {
    display: flex !important; /* Ativa como flex vertical */
}

/* Itens de lista dos submenus */
ul.sp-megamenu-parent ul li,
.main-navigation ul ul li,
#sp-menu ul ul li,
.sp-dropdown ul li {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

/* Links dentro dos submenus */
ul.sp-megamenu-parent ul li a,
.main-navigation ul ul li a,
#sp-menu ul ul li a,
.sp-dropdown ul li a {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 8px 15px !important;
    white-space: normal !important; /* Permite que submenus longos dobrem linha de forma elegante */
    text-align: left !important;
}




/* ==========================================================================
   Direitos Humanos na Unicamp
   ========================================================================== */

/* Container Geral */
.expo-container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
}

/* Força a centralização horizontal absoluta dos 2 cards */
.expo-container .expo-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Centraliza os cards no meio da página */
    align-items: center !important;
    gap: 20px !important;
    margin: 40px auto 50px auto !important;
    width: 100% !important;
    max-width: 500px !important; /* Limita a largura para os 2 cards ficarem juntos e alinhados */
    box-sizing: border-box !important;
}

/* Estrutura de cada um dos 2 cards */
.expo-container .expo-card {
    position: relative !important;
    display: block !important;
    height: 140px !important;
    
    /* Permite que os dois cards dividam o espaço de forma igual e proporcional */
    flex: 1 1 200px !important; 
    max-width: 220px !important; /* Define uma largura máxima elegante */
    min-width: 180px !important;
    
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    z-index: 1 !important;
}

/* Imagens dos cards */
.expo-container .expo-card-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: filter 0.4s ease, transform 0.4s ease !important;
    filter: blur(4px) brightness(0.65) !important;
    transform: scale(1.03) !important;
    z-index: -1 !important;
}

/* Hover nos cards */
.expo-container .expo-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}
.expo-container .expo-card:hover .expo-card-image {
    filter: blur(0px) brightness(0.75) !important;
    transform: scale(1.12) !important;
}

/* Texto dos cards */
.expo-container .expo-card-text {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Mudanças Climáticas na Unicamp - Ajustado para 5 Cards em Linha Única
   ========================================================================== */

/* Container Geral */
.expo-container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
}

/* Força a centralização horizontal absoluta dos 5 cards lado a lado */
.expo-container .expo-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Impede a quebra de linha para ficarem na mesma fileira */
    justify-content: center !important; 
    align-items: center !important;
    gap: 15px !important; /* Espaçamento entre os 5 cards */
    margin: 40px auto 50px auto !important;
    width: 100% !important;
    max-width: 1140px !important; /* Expandido para acomodar os 5 cards na horizontal */
    box-sizing: border-box !important;
}

/* Estrutura de cada um dos 5 cards */
.expo-container .expo-card {
    position: relative !important;
    display: block !important;
    height: 140px !important;
    
    /* Distribui os 5 cards igualmente na fileira */
    flex: 1 1 0px !important; 
    max-width: 210px !important; 
    min-width: 140px !important; /* Ajustado para telas ligeiramente menores */
    
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    z-index: 1 !important;
}

/* Imagens dos cards */
.expo-container .expo-card-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: filter 0.4s ease, transform 0.4s ease !important;
    filter: blur(4px) brightness(0.65) !important;
    transform: scale(1.03) !important;
    z-index: -1 !important;
}

/* Hover nos cards */
.expo-container .expo-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}
.expo-container .expo-card:hover .expo-card-image {
    filter: blur(0px) brightness(0.75) !important;
    transform: scale(1.12) !important;
}

/* Texto dos cards */
.expo-container .expo-card-text {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 15px !important; /* Leve redução para caber termos longos como "Institucionalização" */
    font-weight: bold !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) !important;
    pointer-events: none !important;
}

/* Responsividade: caso a tela seja muito pequena (mobile), ativa o scroll horizontal suave */
@media (max-width: 768px) {
    .expo-container .expo-grid {
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 15px !important;
    }
    .expo-container .expo-card {
        flex: 0 0 160px !important;
    }
}


/* ==========================================================================
   PÁGINA DO LOGOTIPO
   ========================================================================== */

.brand-container {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    font-family: sans-serif !important;
    color: #333333 !important;
}

/* Apresentação do Logotipo Principal */
.brand-intro {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 30px !important;
    background: #f9f9f9 !important;
    padding: 25px !important;
    border-radius: 12px !important;
    margin-bottom: 40px !important;
    border: 1px solid #eeeeee !important;
}

.brand-intro-text {
    flex: 1 1 400px !important;
}

.brand-intro-text p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 0 15px 0 !important;
}

.brand-intro-img {
    flex: 0 0 200px !important;
    text-align: center !important;
}

.brand-intro-img img {
    max-width: 100% !important;
    height: auto !important;
}

/* BOTÃO DO LOGOBOOK: Vermelho do site com texto branco absoluto em todos os estados */
.btn-logobook,
.btn-logobook:link,
.btn-logobook:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important; /* Espaço perfeito entre o ícone e o texto */
    background: #cc0000 !important; /* Vermelho padrão do site/institucional */
    color: #ffffff !important; /* Texto Branco Absoluto (mesmo se já clicado) */
    text-decoration: none !important;
    padding: 12px 24px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Estado de Hover, Ativo e Foco do Botão */
.btn-logobook:hover,
.btn-logobook:active,
.btn-logobook:focus {
    background: #990000 !important; /* Vermelho ligeiramente mais escuro */
    color: #ffffff !important; /* Garante o texto branco no hover/clique */
    text-decoration: none !important;
}

/* Títulos das Seções */
.brand-section-title {
    font-size: 20px !important;
    color: #111111 !important;
    border-bottom: 2px solid #cc0000 !important; /* Linha divisória vermelha combinando */
    padding-bottom: 8px !important;
    margin: 40px 0 20px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Grade de Exibição dos Logotipos */
.brand-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

/* Cartão do Logotipo */
.brand-card {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.brand-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.08) !important;
}

/* Área de Visualização do Logo */
.brand-preview-box {
    height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    position: relative !important;
}

/* Classe para fundos claros/positivos */
.bg-light-grid {
    background-color: #f5f5f5 !important;
    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), 
                      linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #e0e0e0 75%), 
                      linear-gradient(-45deg, transparent 75%, #e0e0e0 75%) !important;
    background-size: 20px 20px !important;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px !important;
}

/* Classe para fundos escuros/negativos */
.bg-dark-grid {
    background-color: #222222 !important;
    background-image: linear-gradient(45deg, #151515 25%, transparent 25%), 
                      linear-gradient(-45deg, #151515 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #151515 75%), 
                      linear-gradient(-45deg, transparent 75%, #151515 75%) !important;
    background-size: 20px 20px !important;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px !important;
}

.brand-preview-box img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
}

/* Informações do Cartão */
.brand-info-box {
    padding: 15px !important;
    background: #ffffff !important;
    border-top: 1px solid #eeeeee !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-grow: 1 !important;
}

.brand-logo-name {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333333 !important;
    margin: 0 !important;
}

/* Links de Download */
.brand-download-link {
    font-size: 13px !important;
    color: #cc0000 !important; /* Links de download em vermelho combinando com a identidade */
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.brand-download-link:hover {
    text-decoration: underline !important;
}





/* ==========================================================================
   PAGINA ESTRUTURA SIARQ
   ========================================================================== */

.siarq-struct {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: #333333 !important;
    line-height: 1.6 !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
}

/* Títulos Principais */
.siarq-struct h2 {
    font-size: 24px !important;
    color: #111111 !important;
    border-left: 4px solid #cc0000 !important;
    padding-left: 12px !important;
    margin: 45px 0 20px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
}

/* Subtítulos */
.siarq-struct h3 {
    font-size: 18px !important;
    color: #444444 !important;
    margin: 30px 0 15px 0 !important;
    font-weight: 600 !important;
}

/* Parágrafos gerais */
.siarq-struct p {
    font-size: 15px !important;
    margin-bottom: 20px !important;
    color: #555555 !important;
    text-align: justify !important;
}

/* Card de Introdução */
.struct-intro-box {
    background: #fdfdfd !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 8px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
}

/* Grid das Áreas (Organograma) */
.areas-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 15px !important;
    margin: 25px 0 !important;
}

.area-badge {
    background: #f4f6f8 !important;
    border-left: 3px solid #cc0000 !important;
    padding: 12px 15px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #2c3e50 !important;
    border-radius: 0 6px 6px 0 !important;
}

/* Moldura do Organograma */
.organograma-wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin: 30px 0 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
    text-align: center !important;
}

.organograma-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
}

/* Blocos de Competências */
.competencia-box {
    background: #fafafa !important;
    border-left: 4px solid #cc0000 !important;
    border-top: 1px solid #eaeaea !important;
    border-right: 1px solid #eaeaea !important;
    border-bottom: 1px solid #eaeaea !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 20px 25px !important;
    margin: 20px 0 30px 0 !important;
    counter-reset: roman-counter !important;
}

.competencia-box p {
    font-weight: bold !important;
    color: #222222 !important;
    margin-top: 0 !important;
}

/* Listas com numeração Romana em CSS */
.list-competencia {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.list-competencia li {
    position: relative !important;
    padding-left: 38px !important;
    margin-bottom: 12px !important;
    font-size: 14.5px !important;
    color: #444444 !important;
    line-height: 1.5 !important;
    counter-increment: roman-counter !important;
}

.list-competencia li::before {
    content: counter(roman-counter, upper-roman) "." !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #cc0000 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    width: 30px !important;
    text-align: left !important;
}

/* ==========================================================================
   ESTILIZAÇÃO DOS LINKS TEXTUAIS SIMPLES
   ========================================================================== */

.text-link {
    font-weight: 600 !important;
    color: #0056b3 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.text-link:hover {
    color: #003d80 !important;
    text-decoration: underline !important;
}

/* Grid de Duas Colunas para os Protocolos */
.protocolo-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

@media (max-width: 768px) {
    .protocolo-grid {
        grid-template-columns: 1fr !important;
    }
}




/* ==========================================================================
   BUSCA PRINCIPAL
   ========================================================================== */

#resultado-busca-container {
        margin: 20px 0;
    }
    .modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.5); z-index: 9999;
        display: flex; justify-content: center; align-items: center;
    }
    .modal-box {
        background: #fff; padding: 30px; border-radius: 8px;
        max-width: 400px; width: 90%; text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .modal-btn {
        background-color: #b30000; color: #fff; border: none;
        padding: 10px 24px; border-radius: 4px; cursor: pointer; font-weight: bold;
    }
    .item-busca { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
    .item-busca a { color: #b30000; font-weight: bold; font-size: 16px; text-decoration: none; }
    .item-busca a:hover { text-decoration: underline; }

    
/* Pinta de vermelho o termo pesquisado no título de resultados */
#termo-buscado {
    color: #b30000; /* Vermelho padrão do SIARQ */
    font-weight: bold;
}


/* Container pai da busca deve ser relativo */
.busca-container, form[action*="search"], .search-box {
    position: relative;
}

/* Lista suspensa de autocomplete em tempo real */
#autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    max-height: 350px;
    overflow-y: auto;
    display: none;
}

#autocomplete-results .item-dropdown {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

#autocomplete-results .item-dropdown:last-child {
    border-bottom: none;
}

#autocomplete-results .item-dropdown:hover {
    background-color: #f8f9fa;
}

#autocomplete-results .item-title {
    font-size: 14px;
    font-weight: bold;
    color: #b30000;
    text-decoration: none;
    display: block;
}

#autocomplete-results .item-snippet {
    font-size: 12px;
    color: #666;
    margin-top: 3px;
    line-height: 1.3;
}


/* ==========================================================================
   PAGINA CONTATOS
   ========================================================================== */

 /* --- Centralização da Logo do SIGAD abaixo do Subtítulo --- */
.sigad-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0 16px 0; /* Espaçamento: acima do texto e abaixo dos contatos */
}

.sigad-logo-header {
    max-height: 32px !important; /* Ajuste o tamanho da logo se necessário */
    width: auto;
    object-fit: contain;
}




/* ==========================================================================
   1. CARROSSEL PRINCIPAL (FULL-WIDTH / HOMEPAGE)
   ========================================================================== */

/* Container Principal: Rompe limites e ocupa 100% da largura da tela */
.carrossel-container {
    position: relative;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    height: 450px; 
    max-height: 450px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.carrossel-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Estrutura dos Slides */
.carrossel-container .slide {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.carrossel-container .slide a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.carrossel-container .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Estados e Transições */
.carrossel-container .slide.active {
    display: block;
}

.carrossel-container .slide.slide-entrada {
    display: block;
    animation: esteiraEntrada 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.carrossel-container .slide.slide-fuga {
    display: block;
    animation: esteiraFuga 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Controles: Setas e Indicadores Globais */
.carrossel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    border: none;
    font-size: 26px;
    padding: 14px 18px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10;
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
}

.carrossel-container:hover .carrossel-btn {
    opacity: 1;
    visibility: visible;
}

.carrossel-btn:hover { 
    background-color: #b30000; 
}

.carrossel-btn.prev { left: 25px; }
.carrossel-btn.next { right: 25px; }

.carrossel-indicadores {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 6px 12px;
    border-radius: 20px;
}

.carrossel-indicadores .bolinha {
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.carrossel-indicadores .bolinha.active,
.carrossel-indicadores .bolinha:hover { 
    background-color: #b30000;
    transform: scale(1.2);
}


/* ==========================================================================
   2. CARROSSEL MOLDURA (INTERNO / PÁGINAS DE ENSINO E PESQUISA)
   ========================================================================== */

.eixo-carrossel-moldura {
    position: relative;
    flex: 0 0 380px; 
    max-width: 100%;
    border: none;
    border-radius: 4.5px;
    padding: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    aspect-ratio: 3 / 4; 
    overflow: hidden;
}

.eixo-carrossel-moldura .carrossel-slides {
    width: 100%;
    height: 100%;
    position: relative;
}

.eixo-carrossel-moldura .slide {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.eixo-carrossel-moldura .slide.active {
    display: block;
}

.eixo-carrossel-moldura .slide.slide-entrada {
    display: block;
    animation: esteiraEntrada 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.eixo-carrossel-moldura .slide.slide-fuga {
    display: block;
    animation: esteiraFuga 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.eixo-carrossel-moldura .slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    background-color: #fcfcfc;
    display: block;
    cursor: pointer;
}

/* Setas de Navegação Reduzidas */
.eixo-carrossel-moldura .carrossel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 11px;
    background-color: rgba(0, 0, 0, 0.2); 
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
}

.eixo-carrossel-moldura:hover .carrossel-btn {
    opacity: 1;
    visibility: visible;
}

.eixo-carrossel-moldura .carrossel-btn:hover { 
    background-color: #b30000; 
}

.eixo-carrossel-moldura .carrossel-btn.prev { left: 10px; }
.eixo-carrossel-moldura .carrossel-btn.next { right: 10px; }

/* Cápsula Indicadora (Compacta) */
.eixo-carrossel-moldura .carrossel-indicadores {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    background-color: #dbdbdb;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.eixo-carrossel-moldura:hover .carrossel-indicadores {
    opacity: 1;
    visibility: visible;
}

.eixo-carrossel-moldura .carrossel-indicadores .bolinha {
    display: inline-block; 
    width: 6px;
    height: 6px;
    background-color: #aaaaaa;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.eixo-carrossel-moldura .carrossel-indicadores .bolinha.active,
.eixo-carrossel-moldura .carrossel-indicadores .bolinha:hover { 
    background-color: #cc0000;
    transform: none;
}


/* ==========================================================================
   3. ANIMAÇÕES DE ESTEIRA COMPARTILHADAS & LIGHTBOX DO CARROSSEL
   ========================================================================== */

@keyframes esteiraEntrada {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes esteiraFuga {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}




/* ==========================================================================
   4. AJUSTES RESPONSIVOS DOS CARROSSEIS
   ========================================================================== */

@media (max-width: 768px) {
    .carrossel-container {
        height: 280px;
        max-height: 280px;
    }
}

@media (max-width: 900px) {
    .eixo-carrossel-moldura {
        flex: none;
        width: 100%;
        max-width: 380px;
    }
    .eixo-carrossel-moldura .carrossel-btn,
    .eixo-carrossel-moldura .carrossel-indicadores {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .lightbox-content {
        max-width: 95%;
    }
}

/* Estilização Geral e Layout */
    .publicacoes-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
      color: #333;
    }

    .publicacao-item {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 25px 0;
      border-bottom: 1px solid #ddd;
    }

    .publicacao-item:last-child {
      border-bottom: none;
    }

    @media (min-width: 650px) {
      .publicacao-item {
        flex-direction: row;
        align-items: flex-start;
      }
    }

    /* Imagem Clicável */
    .publicacao-img-link {
      flex-shrink: 0;
      display: inline-block;
      cursor: pointer;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      width: 100%;
      max-width: 300px;
      position: relative;
    }

    .publicacao-img-link:hover {
      transform: scale(1.02);
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    .publicacao-img-link img {
      width: 100%;
      height: auto;
      display: block;
    }

    .publicacao-texto {
      flex: 1;
      line-height: 1.6;
      margin: 0;
    }

    .publicacao-texto strong {
      font-size: 1.1em;
      color: #111;
    }

    /* Lightbox Modal */
    .pdf-lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      z-index: 99999;
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .pdf-lightbox.active {
      display: flex;
    }

    .pdf-lightbox-header {
      width: 100%;
      max-width: 1000px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .pdf-lightbox-close {
      background: #ffffff;
      border: none;
      color: #000;
      font-size: 24px;
      font-weight: bold;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    .pdf-lightbox-close:hover {
      background: #ff4d4d;
      color: #fff;
    }

    .pdf-fallback-btn {
      color: #fff;
      text-decoration: underline;
      font-size: 0.9em;
    }

    .pdf-lightbox-content {
      width: 100%;
      max-width: 1000px;
      height: 85vh;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    }

    .pdf-lightbox-content iframe {
      width: 100%;
      height: 100%;
      border: none;
    }




   /* ==========================================================================
   BOTAO VOLTAR AO TOPO
   ========================================================================== */
#btnTopo {
  position: fixed !important;   /* Força ficar fixo na tela */
  bottom: 20px !important;     /* Distância do fundo */
  right: 20px !important;      /* Distância da direita */
  z-index: 999999 !important;  /* Fica sempre por cima de tudo */
  border: none !important;
  outline: none !important;
  background-color: #cc0000 !important; /* Vermelho original */
  color: #ffffff !important;   /* Cor da seta/texto */
  cursor: pointer !important;
  padding: 12px 16px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3) !important;
  
  display: none;
  transition: transform 0.3s ease !important;
}

/* Efeito de passar o mouse */
#btnTopo:hover {
  background-color: #e60000 !important;
  transform: scale(1.1) !important;
}

/* Esconde o botão se o modal da imagem abrir */
body.modal-aberto #btnTopo,
html.modal-aberto #btnTopo {
  display: none !important;
}



/* ==========================================================================
   1. MODO ESCURO GERAL (INVERSÃO INTELIGENTE DO SITE)
   ========================================================================== */
body.dark-mode {
  filter: invert(1) hue-rotate(180deg);
  background-color: #3b3535 !important;
}

/* Protege imagens e vídeos do site de ficarem em "negativo" */
body.dark-mode img,
body.dark-mode video {
  filter: invert(1) hue-rotate(180deg);
}

/* ESCONDE O BOTÃO DO SOL QUANDO O LIGHTBOX TIVER ABERTO */
body.modal-aberto #btnTema,
html.modal-aberto #btnTema {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   2. LIGHTBOX / MODAL (ISOLADO DO FILTRO E CENTRALIZADO)
   ========================================================================== */
#eixo-modal,
.eixo-modal,
.lightbox,
.pdf-lightbox {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.95) !important;
  z-index: 999999999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Exibição ativa com alinhamento ao centro */
#eixo-modal.ativo,
.eixo-modal.ativo,
.lightbox.ativo,
.pdf-lightbox.active {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* IMAGEM DO MODAL (CORES 100% NATURAIS SEM INVERSÃO) */
#eixo-modal-img,
.eixo-modal-conteudo,
.lightbox-content {
  position: relative !important;
  max-width: 85vw !important;
  max-height: 80vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: auto !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
  z-index: 9999999999 !important;
}

/* BOTÃO DE FECHAR (X) */
#eixo-modal-fechar,
.eixo-modal-fechar,
.close-lightbox,
.pdf-lightbox-close {
  position: fixed !important;
  top: 25px !important;
  right: 30px !important;
  color: #ffffff !important;
  font-size: 40px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  z-index: 9999999999 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* TRAVA DE ROLAGEM LIMPA DA PÁGINA */
html.modal-aberto,
body.modal-aberto {
  overflow: hidden !important;
}

/* ==========================================================================
   3. DOTS E SETAS DO MODAL
   ========================================================================== */
#eixo-modal-dots {
  position: fixed !important;
  bottom: 25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 10px !important;
  z-index: 9999999999 !important;
}

.eixo-modal-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.eixo-modal-dot.ativo {
  background-color: #ffffff !important;
  transform: scale(1.3) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

#eixo-modal-prev,
#eixo-modal-next {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #ffffff !important;
  font-size: 35px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  padding: 15px !important;
  user-select: none !important;
  z-index: 9999999999 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7) !important;
}

#eixo-modal-prev { left: 20px !important; }
#eixo-modal-next { right: 20px !important; }



/* ==========================================================================
   AJUSTES MOBILE DEFINITIVOS (CABEÇALHO, PESQUISA E CARROSSEL)
   ========================================================================== */

@media (max-width: 768px) {

  /* 1. ORGANIZA O CABEÇALHO EM COLUNA (LOGO ACIMA, PESQUISA ABAIXO) */
  header, 
  .header,
  #sp-header,
  .site-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    width: 100% !important;
  }

  /* Garante que a logo fique centralizada e não estoure */
  #logoSiarq,
  header img,
  .logo img {
    max-width: 220px !important;
    height: auto !important;
    margin: 0 auto 10px auto !important;
    display: block !important;
  }

  /* FORÇA A PESQUISA A DESCER PARA ABAIXO DA LOGO */
  .search,
  .mod-search,
  #searchform,
  form[action*="search"],
  div[class*="search"] {
    position: static !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 5px auto 15px auto !important;
    display: flex !important;
    justify-content: center !important;
    float: none !important;
  }

  .search input,
  .mod-search input,
  input[type="text"][placeholder*="Pesquisar"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. BOTÃO DAS 3 BARRINHAS (HAMBÚRGUER) */
  #btnMenuMobile {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    width: 40px !important;
    height: 38px !important;
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    padding: 7px !important;
    margin: 8px auto !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  }

  #btnMenuMobile span {
    width: 100% !important;
    height: 3px !important;
    background-color: #b30000 !important; /* Vermelho Unicamp */
    border-radius: 2px !important;
    display: block !important;
    transition: all 0.3s ease !important;
  }

  /* Animação do botão ao abrir (Virar X) */
  #btnMenuMobile.ativo span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  #btnMenuMobile.ativo span:nth-child(2) { opacity: 0; }
  #btnMenuMobile.ativo span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

  /* 3. EXIBIÇÃO E ESCONDER O MENU */
  .main-navigation .menu-list {
    display: none !important; /* Oculto por padrão no celular */
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #ffffff !important;
  }

  /* Exibe a lista completa quando o menu estiver aberto */
  .main-navigation.menu-aberto .menu-list {
    display: flex !important;
  }

  .main-navigation .menu-item {
    width: 100% !important;
    border-bottom: 1px solid #eeeeee !important;
  }

  .main-navigation .menu-link {
    display: block !important;
    padding: 12px 15px !important;
    text-align: center !important;
  }

  /* 4. AJUSTE RESPONSIVO DO CARROSSEL (SLIDER) */
  /* Força a imagem central do carrossel a encaixar na tela sem cortar as fotos das pontas */
  #sp-slider,
  .slider-wrapper,
  .carousel,
  div[class*="slider"] {
    width: 100% !important;
    overflow: hidden !important;
  }

  #sp-slider img,
  .carousel img,
  div[class*="slider"] img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


/* ==========================================================================
   CORREÇÃO DO PLAYER DO YOUTUBE (PREVINE ERRO DE EXECUÇÃO / DARK MODE)
   ========================================================================== */

/* 1. Impede a inversão de cores no player do YouTube */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
.youtube-player,
.video-container iframe {
    filter: none !important;
    -webkit-filter: none !important;
    isolation: isolate !important; /* Cria um contexto de renderização próprio */
    transform: translateZ(0) !important; /* Força renderização limpa na GPU */
}

/* 2. Garante que se o Dark Mode estiver ativo, o iframe permaneça intacto */
body.dark-mode iframe[src*="youtube.com"],
html.dark-mode iframe[src*="youtube-nocookie.com"] {
    filter: none !important;
    -webkit-filter: none !important;
}



/* ==========================================================================
   CONTAINER DE VÍDEO COMPACTO E CENTRALIZADO
   ========================================================================== */

.video-responsive,
.embed-responsive {
    position: relative;
    width: 100%;
    
    /* DEFINA O TAMANHO DESEJADO AQUI: */
    max-width: 650px !important; /* Ajuste para 500px se quiser ainda menor */
    
    margin: 20px auto !important; /* Centraliza na página */
    aspect-ratio: 16 / 9;        /* Mantém a proporção sem distorcer no celular */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Sombra elegante nas bordas */
    border-radius: 8px;           /* Bordas levemente arredondadas */
    overflow: hidden;
}

.video-responsive iframe,
.embed-responsive iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
}


/* ==========================================================================
   DESATIVAR MODO ESCURO / INVERSÃO EM VÍDEOS (YOUTUBE, VIMEO, IFRAMES E TAGS VIDEO)
   ========================================================================== */

/* 1. Remove o efeito negativo dos players e containers de vídeo quando o dark mode estiver ativo */
body.dark-mode iframe,
body.dark-mode video,
body.dark-mode .video-responsive,
body.dark-mode .embed-responsive,
html.dark-mode iframe,
html.dark-mode video,
html.dark-mode .video-responsive,
html.dark-mode .embed-responsive {
    filter: invert(1) hue-rotate(180deg) !important;
    -webkit-filter: invert(1) hue-rotate(180deg) !important;
}

/* 2. Caso a sua classe do modo escuro esteja no body/html com outro nome ou o filtro seja direto no iframe */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="vimeo.com"],
video {
    /* Força o iframe a 'des-inverter' mantendo as cores reais do vídeo */
    isolation: isolate;
}





/* ==========================================================================
   TEMAS LIGADOS A UNICAMP
   ========================================================================== */


/* Navegação por links rápidos */
.anchor-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.anchor-nav a {
  display: inline-block;
  padding: 6px 12px;
  background-color: #f1f3f5;
  color: #0056b3;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.anchor-nav a:hover {
  background-color: #e2e8f0;
}

/* Card e lista de documentos */
.gestaoDocumentosCard {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
}

.academic-list {
  list-style-type: disc;
  padding-left: 1.25rem;
}

.academic-list li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.academic-list a {
  color: #0056b3;
  font-weight: 500;
  text-decoration: underline;
}





/* Oculta metadados (Details, Hits, Autor, etc.) em qualquer artigo do site */
        .article-info, .aside, .entry-meta, .published, .hits, .category-name, .author-name,
        dd.hits, dd.category, dd.published, dd.createdby, dl.article-info { 
            display: none !important; 
        }
        
        /* Formata os títulos principais de todas as páginas internas */
        .secao-interna-artigo h1, 
        .secao-interna-artigo h2, 
        .secao-interna-artigo .page-header h1, 
        .secao-interna-artigo .page-header h2 {
            font-family: sans-serif !important;
            font-size: 2.2rem !important;
            color: #333333 !important;
            margin-top: 0 !important;
            margin-bottom: 20px !important;
            border-bottom: none !important;
        }

        /* Padroniza a leitura dos parágrafos de texto interno */
        .secao-interna-artigo main p,
        .secao-interna-artigo article p {
            font-family: sans-serif !important;
            font-size: 1rem !important;
            line-height: 1.6 !important;
            color: #333333 !important;
            text-align: justify !important;
            margin-bottom: 1.5rem !important;
        }




.btn-paginacao {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    color: #333333;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-paginacao:hover {
    background-color: #eeeeee;
    border-color: #999999;
}

mark.busca-destaque {
    background-color: #ffeb3b;
    color: #000000;
    padding: 0 2px;
    border-radius: 2px;
}