:root {
    --navy: #242c73;
    --navy-dark: #141a4a;
    --navy-soft: #eef0f8;
    --bronze: #9b6334;
    --gold: #d9b85f;
    --ink: #252936;
    --muted: #626878;
    --line: #d9dce5;
    --paper: #ffffff;
    --warm: #f7f5ef;
    --container: 1180px;
    --sans: 'Source Sans 3', Arial, sans-serif;
    --serif: 'Source Serif 4', Georgia, serif;
    --shadow: 0 12px 34px rgba(20, 26, 74, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 180px; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: #f0f1f4; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
::selection { color: #fff; background: var(--navy); }
:focus-visible { outline: 3px solid #c58c32; outline-offset: 2px; }
.container { width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }
.skip-link { position: fixed; left: 18px; top: -60px; z-index: 1000; padding: 10px 16px; color: #fff; background: var(--navy-dark); text-decoration: none; }
.skip-link:focus { top: 0; }

/* Cabeçalho */
.site-header { position: relative; z-index: 106; background: #fff; }
.site-header.is-sticky { padding-bottom: 50px; }
.utility-bar { color: rgba(255,255,255,.88); background: var(--navy-dark); font-size: .74rem; }
.utility-inner { display: flex; align-items: center; min-height: 35px; }
.utility-inner a { text-decoration: none; }
.utility-inner > a { font-weight: 600; }
.utility-inner > a i { margin-left: 6px; color: var(--gold); font-size: .58rem; }
.utility-inner nav { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.utility-inner nav span { color: rgba(255,255,255,.5); }
.utility-inner nav a + a::before { content: ''; display: inline-block; width: 1px; height: 9px; margin-right: 12px; background: rgba(255,255,255,.28); }
.utility-actions { display: flex; gap: 16px; margin-left: 28px; padding-left: 25px; border-left: 1px solid rgba(255,255,255,.22); }
.utility-inner a:hover { color: var(--gold); }
.brand-inner { display: flex; align-items: center; justify-content: space-between; min-height: 104px; gap: 40px; }
.brand { width: min(455px, 46vw); }
.brand img { width: 100%; height: auto; max-height: 72px; object-fit: contain; object-position: left center; }
.site-search { width: 390px; }
.site-search label { display: block; margin-bottom: 5px; color: var(--muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .08em; }
.site-search div { display: flex; height: 40px; }
.site-search input { flex: 1; min-width: 0; padding: 0 13px; border: 1px solid #c9cdd8; border-right: 0; color: var(--ink); background: #fff; }
.site-search button { width: 45px; border: 0; color: #fff; background: var(--navy); cursor: pointer; }
.site-search button:hover { background: var(--bronze); }
.menu-toggle { display: none; align-items: center; gap: 9px; min-height: 42px; padding: 0 14px; border: 0; color: #fff; background: var(--navy); cursor: pointer; }
.navigation-bar { position: relative; border-top: 1px solid var(--line); border-bottom: 3px solid var(--navy); background: #fff; }
.site-header.is-sticky .navigation-bar { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 8px 24px rgba(20,26,74,.14); }
.main-navigation { display: flex; align-items: stretch; min-height: 50px; }
.nav-group { position: relative; }
.nav-home, .nav-trigger, .nav-direct { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 13px; border: 0; color: #3e4350; background: transparent; font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
/* Início: quadrado da altura da barra, com o ícone no centro. */
.nav-home { justify-content: center; width: 50px; padding: 0; color: var(--navy); }
.nav-home:hover { background: var(--navy-soft); }
/* Cada item da barra tem um ícone à esquerda (leitura visual da linha) e a
 * seta de menu à direita. As duas usam <i>, então cada uma tem sua classe —
 * sem isso a regra da seta encolheria e giraria o ícone junto. */
.nav-icon { width: 16px; color: var(--bronze); font-size: .92rem; text-align: center; }
.nav-caret { font-size: .55rem; transition: transform 180ms ease; }
.nav-trigger:hover, .nav-direct:hover, .nav-group.is-open > .nav-trigger { color: var(--navy); background: var(--navy-soft); }
.nav-group.is-open > .nav-trigger .nav-caret { transform: rotate(180deg); }
/* Serviços leva para fora do IME: fica à direita, com um contorno fino. O
 * bloco navy de antes chamava mais atenção que o próprio menu. */
.nav-services { display: flex; align-items: center; margin-left: auto; }
.nav-services > .nav-trigger { min-height: 34px; padding-inline: 14px; color: var(--navy); border: 1px solid #cdd1dc; }
.nav-services > .nav-trigger:hover, .nav-services.is-open > .nav-trigger { color: var(--navy); border-color: var(--navy); background: var(--navy-soft); }
/* Duas colunas curtas (sistemas e serviços): mais estreito que o mega menu padrão. */
.mega-menu-services { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 420px; gap: 28px; }
.mega-menu { position: absolute; top: 100%; left: 0; display: grid; grid-template-columns: repeat(2,minmax(210px,1fr)); gap: 30px; width: 570px; padding: 30px; visibility: hidden; opacity: 0; transform: translateY(8px); border-top: 3px solid var(--gold); background: #fff; box-shadow: var(--shadow); transition: 180ms ease; }
.nav-group.is-open .mega-menu { visibility: visible; opacity: 1; transform: none; }
.mega-menu-wide { grid-template-columns: 1.2fr 1fr 1fr 1fr; width: min(1035px, calc(100vw - 80px)); }
/* "O IME": apresentação + duas colunas (Institucional e Governança). */
.mega-menu-cols-2 { grid-template-columns: 1.1fr 1fr 1.1fr; width: min(840px, calc(100vw - 80px)); }
/* Portas com poucos links (Pesquisa, Extensão, Serviços) não precisam da
 * grade de 2 colunas — isso deixaria metade do menu vazia. */
.mega-menu-narrow { grid-template-columns: minmax(230px,1fr); width: 264px; gap: 0; }
.mega-menu-right { right: 0; left: auto; }
.mega-intro { padding-right: 24px; border-right: 1px solid var(--line); }
.mega-intro > span, .mega-column h3 { display: block; margin: 0 0 12px; color: var(--bronze); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mega-intro h2 { margin: 0 0 10px; color: var(--navy-dark); font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; }
.mega-intro p { margin: 0 0 18px; color: var(--muted); font-size: .79rem; line-height: 1.5; }
.mega-intro a { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: .76rem; font-weight: 700; text-decoration: none; }
.mega-column { display: flex; flex-direction: column; }
.mega-column > a { padding: 7px 0; color: #464b58; border-bottom: 1px solid #eceef3; font-size: .8rem; line-height: 1.35; text-decoration: none; }
.mega-column > a:hover { color: var(--bronze); }
.menu-overlay { position: fixed; inset: 0; z-index: 105; display: none; border: 0; background: rgba(10,14,42,.6); }
.menu-overlay.is-visible { display: block; }

/* Home compacta */
.home-main { padding: 16px 0 28px; }
.home-shell { padding: 0; background: #fff; box-shadow: 0 0 0 1px rgba(20,26,74,.04), 0 12px 38px rgba(20,26,74,.08); }
.lead-banner { position: relative; min-height: 318px; overflow: hidden; background: var(--navy-dark); }
.lead-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .78; }
.lead-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,20,59,.97) 0%, rgba(21,27,72,.84) 38%, rgba(21,27,72,.08) 76%); }
.lead-panel { position: relative; z-index: 2; width: 57%; padding: 46px 48px; color: #fff; }
.lead-panel > p { margin: 0 0 12px; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lead-panel h1 { margin: 0 0 14px; max-width: 650px; font-family: var(--serif); font-size: clamp(2rem,3.5vw,3.15rem); line-height: 1.05; }
.lead-panel > span { display: block; color: rgba(255,255,255,.74); font-size: .88rem; }
.lead-panel > a { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding-bottom: 4px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.65); font-size: .78rem; font-weight: 700; text-decoration: none; }

.academic-areas { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; padding: 24px 28px 0; }
.academic-areas a { position: relative; height: 170px; overflow: hidden; background: var(--navy); text-decoration: none; }
.academic-areas img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.academic-areas a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(11,15,45,.85) 100%); }
.academic-areas span { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 12px 14px; color: #fff; border-bottom: 5px solid var(--bronze); font-size: .88rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.academic-areas a:hover img { transform: scale(1.04); }

.home-content-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(285px,.75fr); gap: 26px; padding: 24px 28px 34px; }
.block-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 9px; border-bottom: 2px solid var(--navy); }
.block-heading h2 { margin: 0; color: var(--navy-dark); font-family: var(--serif); font-size: 1.65rem; }
.block-heading a { color: var(--bronze); font-size: .72rem; font-weight: 700; text-decoration: none; }
.news-loading, .news-empty { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 180px; color: var(--muted); font-size: .82rem; }
.content-origin-tag { display: inline-flex; align-items: center; align-self: flex-start; width: fit-content; padding: 4px 9px; color: var(--navy); border: 1px solid rgba(36,44,115,.18); background: var(--navy-soft); font-size: .62rem; font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.content-origin-tag--dest { color: #17624f; border-color: rgba(23,98,79,.2); background: #e8f5f0; }
.content-origin-tag--dmat { color: #7b4a23; border-color: rgba(155,99,52,.24); background: #f7eee5; }
/* Na home e no arquivo a origem vive dentro da linha de meta (no lugar do
 * autor, que era sempre "Comunica IME"). Só a cor distingue a unidade — o
 * resto da formatação é herdado da própria linha, para não destoar da data. */
.content-origin-inline { color: var(--navy); }
.content-origin-inline--dest { color: #17624f; }
.content-origin-inline--dmat { color: #7b4a23; }
/* Destaque em largura total + trilho de 3 colunas. Como cada coluna do trilho
 * fica em torno de 240px, o título e o resumo dos cards secundários são um
 * pouco menores que os do destaque — que mantém o corpo de texto original. */
.home-news-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 20px; }
.home-news-card { display: flex; flex-direction: column; min-height: 168px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.home-news-card:first-child { grid-column: 1 / -1; min-height: 190px; padding: 22px 0; }
.home-news-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; color: var(--bronze); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.home-news-card h3 { margin: 0 0 8px; color: var(--navy-dark); font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; overflow-wrap: break-word; }
.home-news-card:first-child h3 { max-width: 700px; font-size: 1.55rem; }
.home-news-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: .79rem; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.home-news-card:first-child p { font-size: .83rem; -webkit-line-clamp: 2; }
.home-news-card:hover h3 { color: var(--bronze); }
.home-news-card .read-more { margin-top: auto; padding-top: 10px; color: var(--navy); font-size: .68rem; font-weight: 700; text-transform: uppercase; }

/* Só o destaque (primeiro card) ganha imagem: layout de duas colunas em vez
 * da coluna única dos demais. Recorte quadrado, ~200px (a retangular de
 * antes tinha ~225px de altura no maior tamanho; isto é uns 10% menor),
 * encostado à esquerda da célula em vez de esticar/centralizar. */
.home-news-card.has-media { display: grid; grid-template-columns: minmax(0,200px) minmax(0,1fr); align-items: center; gap: 26px; }
.home-news-media { width: 200px; max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 3px; background: var(--navy-soft); justify-self: start; }
.home-news-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-news-media-fallback { display: grid; place-items: center; color: var(--navy); opacity: .5; font-size: 2rem; }
.home-news-content { display: flex; flex-direction: column; min-width: 0; }

/* Miniatura dos cards do trilho (todos menos o destaque): a mesma imagem da
 * notícia, no topo do card, recortada em 3:2. O recorte puxa pelo topo da
 * foto - em foto de gente o centro corta a cabeça. */
.home-news-thumb { display: block; width: 100%; aspect-ratio: 3 / 2; margin-bottom: 12px; overflow: hidden; border-radius: 3px; background: var(--navy-soft); }
.home-news-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .35s ease; }
.home-news-thumb-fallback { display: grid; place-items: center; color: var(--navy); opacity: .35; font-size: 1.5rem; }
.home-news-card:hover .home-news-thumb img { transform: scale(1.04); }

/* Notícias e coluna lateral nunca podem ser mais largas que a própria
 * coluna: sem o min-width, o carrossel de eventos (uma fileira com todos os
 * cards lado a lado) empurrava a grade inteira para fora da tela no celular. */
.news-block, .side-column { min-width: 0; }
.side-column { display: flex; flex-direction: column; gap: 24px; }
.side-panel { border: 1px solid var(--line); }
.side-panel .block-heading { padding: 11px 13px 8px; }
.side-panel .block-heading h2 { font-size: 1.3rem; }
/* ===== Eventos e cursos: carrossel do painel lateral =====================
 * Card retrato 4:5 (formato de post): imagem no topo, e origem + categoria,
 * título e data/local no corpo. Só entram os que estão acontecendo ou ainda
 * vão acontecer — o histórico fica em eventos.html. Mesma mecânica do
 * carrossel da capa do DMAT, adaptada à moldura reta e à paleta do IME. */
.events-panel { overflow: hidden; }
.events-carousel { position: relative; max-width: 400px; margin-inline: auto; padding: 12px 13px 14px; }
.events-carousel-viewport { width: 100%; overflow: hidden; }
.events-track { position: relative; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.events-track::-webkit-scrollbar { display: none; }
.event-slide-wrap { position: relative; flex: 0 0 100%; min-width: 0; max-width: 100%; scroll-snap-align: start; }
.event-slide { display: flex; flex-direction: column; height: 100%; color: inherit; border: 1px solid var(--line); background: #fff; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.event-slide:hover, .event-slide:focus-visible { border-color: var(--bronze); box-shadow: 0 12px 26px rgba(20,26,74,.12); transform: translateY(-2px); }
.event-slide-media { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy-soft); }
.event-slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-slide-media-fallback { display: grid; place-items: center; color: var(--navy); opacity: .4; font-size: 2rem; }
.event-slide-body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.event-slide-kicker { color: var(--bronze); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.event-slide-kicker--dest { color: #17624f; }
.event-slide-kicker--dmat { color: #7b4a23; }
.event-slide-title { display: -webkit-box; margin: 0; overflow: hidden; color: var(--navy-dark); font-family: var(--serif); font-size: 1.05rem; line-height: 1.22; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.event-slide:hover .event-slide-title, .event-slide:focus-visible .event-slide-title { color: var(--bronze); }
.event-slide-meta { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--muted); font-size: .7rem; font-weight: 600; }
.event-slide-meta i { width: 12px; margin-right: 5px; color: var(--bronze); }
.event-slide-cta { margin-top: auto; padding-top: 4px; color: var(--navy); font-size: .67rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.events-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 12px; }
.events-nav { display: grid; place-items: center; width: 32px; height: 32px; color: var(--navy); border: 1px solid var(--line); background: #fff; font-size: .75rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.events-nav:hover, .events-nav:focus-visible { border-color: var(--bronze); background: var(--warm); }
.events-dots { display: flex; gap: 6px; }
.events-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.events-dot.is-active { background: var(--bronze); transform: scale(1.3); }
/* .event-slide já pode ser um <a>; o botão de agenda é um <a> irmão dentro
 * do invólucro, nunca um filho (link dentro de link é inválido). */
.event-add-calendar { position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; color: var(--navy); border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 3px 9px rgba(20,26,74,.22); font-size: .78rem; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.event-add-calendar:hover, .event-add-calendar:focus-visible { background: #fff; transform: scale(1.08); }
.events-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 26px 16px; color: var(--muted); text-align: center; }
.events-empty i { margin-bottom: 4px; font-size: 1.6rem; opacity: .5; }
.events-empty p { margin: 0; color: var(--navy-dark); font-size: .82rem; font-weight: 600; line-height: 1.4; }
.events-empty span { font-size: .74rem; }

/* Chamada da galeria na coluna lateral: mosaico 2x2 da sessão mais recente.
 * Os <span> em vez de <div> são de propósito — o painel inteiro é um <a>, e
 * div dentro de link inline quebra a validação do HTML. */
.gallery-preview { padding: 13px; }
.gallery-preview-link { display: block; text-decoration: none; }
.gallery-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gallery-preview-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--navy-soft); }
.gallery-preview-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.gallery-preview-link:hover img { transform: scale(1.05); }
.gallery-preview-more { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(15,20,59,.62); font-size: 1.1rem; font-weight: 700; }
.gallery-preview-caption { display: block; margin-top: 10px; }
.gallery-preview-caption strong { display: block; color: var(--navy-dark); font-family: var(--serif); font-size: .95rem; line-height: 1.25; }
.gallery-preview-caption span { display: block; margin-top: 3px; color: var(--muted); font-size: .66rem; }
.gallery-preview-link:hover strong { color: var(--bronze); }
.gallery-preview-empty { display: flex; align-items: center; gap: 10px; min-height: 92px; color: var(--muted); font-size: .75rem; }
.gallery-preview-empty p { margin: 0; }

.about-strip { display: grid; grid-template-columns: 1.25fr .75fr; gap: 38px; margin: 0 28px; padding: 28px 0; border-top: 1px solid var(--line); }
/* Chamada "Faça parte do Instituto!": foto à esquerda e painel navy à direita,
 * com o mesmo tratamento de texto do painel do topo da home. */
.about-feature { display: grid; grid-template-columns: 45fr 55fr; background: var(--navy-dark); }
.about-feature > img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; object-position: 30% center; }
.about-feature > div { padding: 28px 30px 30px; color: #fff; }
.about-feature > div > p { margin: 0 0 8px; color: var(--gold); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.about-strip h2 { margin: 0 0 12px; color: #fff; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.about-feature > div > span { display: block; color: rgba(255,255,255,.8); font-size: .83rem; line-height: 1.55; }
.about-feature > div > a { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding-bottom: 4px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.65); font-size: .72rem; font-weight: 700; text-decoration: none; }
.about-strip nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Os cards acompanham a altura do bloco ao lado e o logo fica numa caixa de
 * altura fixa, então os nomes dos dois departamentos caem na mesma linha. */
.about-strip nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 136px; padding: 14px; border: 1px solid var(--line); text-decoration: none; }
.about-strip nav img { width: auto; height: 80px; max-width: 150px; object-fit: contain; }
.about-strip nav span { color: var(--navy); font-size: .67rem; font-weight: 700; text-align: center; }
@media (max-width: 620px) {
    .about-feature { grid-template-columns: 1fr; }
    .about-feature > img { height: auto; min-height: 0; aspect-ratio: 660 / 482; }
    .about-feature > div { padding: 24px 22px 26px; }
    .about-strip nav img { height: 64px; max-width: 120px; }
}

/* Rodapé */
.site-footer { color: rgba(255,255,255,.74); background: var(--navy-dark); }
/* O rodapé é o mapa do site: marca + uma coluna por grupo do menu. */
.footer-main { display: grid; grid-template-columns: 1.35fr repeat(5, 1fr); gap: 32px; padding: 46px 0 38px; }
.footer-brand img { width: auto; height: 48px; }
.footer-brand p { margin: 14px 0 0; font-size: .74rem; line-height: 1.55; }
.footer-brand a { text-decoration: none; }
.footer-main nav { display: flex; flex-direction: column; gap: 8px; }
.footer-main nav h2 { margin: 0 0 7px; color: var(--gold); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.footer-main nav a { width: fit-content; font-size: .76rem; text-decoration: none; }
.footer-main nav a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); background: #0c1033; }
.footer-bottom .container { display: flex; align-items: center; min-height: 64px; gap: 20px; font-size: .66rem; }
.footer-bottom div div { display: flex; gap: 9px; margin-left: auto; }
.footer-bottom div div a { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.2); text-decoration: none; }
.footer-bottom img { width: auto; height: 36px; margin-left: 12px; opacity: .8; }
/* Barra de logos das instituições parceiras e de fomento, no topo do rodapé.
 * Faixa clara porque os logos são coloridos e sumiriam no fundo navy. */
.footer-partners { background: var(--paper); border-top: 1px solid var(--line); }
.footer-partners ul { display: flex; align-items: center; justify-content: space-between; gap: 26px 40px; margin: 0; padding: 30px 0; list-style: none; }
.footer-partners li { display: flex; justify-content: center; }
.footer-partners img { width: auto; height: 52px; max-width: 140px; object-fit: contain; }
@media (max-width: 900px) {
    .footer-partners ul { flex-wrap: wrap; justify-content: center; gap: 26px 48px; }
}
@media (max-width: 620px) {
    .footer-partners ul { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 26px 12px; padding: 26px 0; }
    .footer-partners img { height: 42px; max-width: 100%; }
}

@media (max-width: 1180px) {
    html { scroll-padding-top: 100px; }
    .site-header.is-sticky { padding-bottom: 0; }
    .site-header.is-sticky .navigation-bar { position: relative; box-shadow: none; }
    .utility-inner nav { display: none; }
    .utility-actions { margin-left: auto; }
    .site-search { width: 330px; }
    .menu-toggle { position: relative; z-index: 120; display: inline-flex; }
    body.menu-open .menu-toggle { position: fixed; top: 24px; right: 24px; }
    body.menu-open .menu-toggle span { display: none; }
    .navigation-bar { border-top: 0; }
    .main-navigation { position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; display: block; width: min(430px,92vw); padding: 86px 24px 28px; overflow-y: auto; visibility: hidden; pointer-events: none; background: #fff; box-shadow: -20px 0 50px rgba(10,14,42,.25); transform: scaleX(0); transform-origin: right center; transition: transform 240ms ease, visibility 0s linear 240ms; }
    .main-navigation::before { content: 'Navegação'; position: absolute; top: 31px; left: 24px; color: var(--navy-dark); font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
    .main-navigation.is-open { visibility: visible; pointer-events: auto; transform: scaleX(1); transition-delay: 0s; }
    .nav-home { display: none; }
    /* No menu lateral o item ocupa a linha inteira: ícone e rótulo ficam
     * juntos à esquerda e só a seta é empurrada para a direita. */
    .nav-trigger, .nav-direct { width: 100%; min-height: 49px; justify-content: flex-start; padding: 0 3px; border-bottom: 1px solid var(--line); font-size: .9rem; }
    .nav-trigger .nav-caret { margin-left: auto; }
    .nav-services { display: block; margin: 0; }
    .nav-services > .nav-trigger { min-height: 49px; padding: 0 3px; color: #3e4350; border: 0; border-bottom: 1px solid var(--line); }
    .nav-services > .nav-trigger:hover, .nav-services.is-open > .nav-trigger { border-color: var(--line); }
    .mega-menu, .mega-menu-wide, .mega-menu-narrow, .mega-menu-right { position: static; display: none; grid-template-columns: 1fr; width: auto; padding: 18px 8px 18px 18px; visibility: visible; opacity: 1; transform: none; border: 0; box-shadow: none; }
    .nav-group.is-open .mega-menu { display: grid; }
    .mega-intro { display: none; }
    .mega-column > a { padding: 8px 0; }
}

@media (max-width: 900px) {
    .brand-inner { min-height: 88px; gap: 22px; }
    .site-search { display: none; }
    .brand { width: min(390px,70vw); }
    .home-main { padding-top: 10px; }
    .lead-panel { width: 68%; padding-inline: 35px; }
    .academic-areas { grid-template-columns: 1fr 1fr; }
    .home-content-grid { grid-template-columns: minmax(0,1fr); }
    .about-strip { grid-template-columns: minmax(0,1fr); }
    .footer-main { grid-template-columns: repeat(3, 1fr); }
    .footer-brand { grid-column: 1 / -1; }
}

/* Abaixo de ~780px as três colunas do trilho de notícias ficam estreitas
 * demais para o título caber em duas linhas; cai para duas. */
@media (max-width: 780px) {
    .home-news-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Painel de eventos em coluna única (a partir de 900px o trilho já colapsou):
   o carrossel ocupa a largura toda em vez de ficar preso a 400px no meio. */
@media (max-width: 900px) {
    .events-carousel { max-width: none; }
}

@media (max-width: 620px) {
    .container { width: min(var(--container), calc(100% - 20px)); }
    .utility-bar { display: none; }
    .brand-inner { min-height: 72px; }
    /* Logo 20% menor que antes (270px de largura e 72px de altura). */
    .brand { width: min(216px,60vw); }
    .brand img { max-height: 58px; }
    .menu-toggle { width: 42px; padding: 0; justify-content: center; }
    .menu-toggle span { display: none; }
    .home-main { padding: 0; }
    .home-main > .container { width: 100%; }
    .home-shell { box-shadow: none; }
    .lead-banner > img { object-position: 63% center; }
    .lead-banner::after { background: linear-gradient(180deg,rgba(16,21,63,.88),rgba(16,21,63,.65)); }
    .lead-panel { width: 100%; padding: 34px 24px 38px; }
    .lead-panel h1 { font-size: 2.05rem; }
    .academic-areas { gap: 3px; padding: 14px 18px 0; }
    .academic-areas a { height: 145px; }
    .academic-areas span { padding: 10px 5px; font-size: .77rem; }
    .home-content-grid { padding: 18px 18px 28px; }
    .home-news-list { grid-template-columns: minmax(0,1fr); }
    .home-news-card:first-child { grid-column: auto; min-height: 170px; }
    .home-news-card:first-child h3 { font-size: 1.3rem; }
    /* Em coluna única a foto quadrada de 200px deixava metade da linha vazia:
     * no celular ela passa a ocupar a largura toda, em 16:9, com o texto
     * logo abaixo. */
    .home-news-card.has-media { grid-template-columns: minmax(0,1fr); gap: 14px; }
    .home-news-media { width: 100%; aspect-ratio: 16 / 9; justify-self: stretch; }
    /* Notícias simples (todas menos o destaque): foto à esquerda em retrato
     * 4:5, recortada pelo topo, e o texto à direita, em colunas de 1 para 2.
     * A foto ocupa as quatro linhas do texto (data, título, resumo e "Ler
     * notícia"); a última linha absorve a sobra quando a foto é mais alta. */
    .home-news-card:not(.has-media) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); grid-template-rows: auto auto auto 1fr; column-gap: 14px; align-items: start; min-height: 0; padding: 14px 0; }
    .home-news-card:not(.has-media) > * { grid-column: 2; }
    .home-news-card:not(.has-media) > .home-news-thumb { grid-column: 1; grid-row: 1 / -1; aspect-ratio: 4 / 5; margin-bottom: 0; }
    .home-news-card.is-placeholder:not(.has-media) { gap: 9px 14px; }
    .about-strip { margin: 0 18px; gap: 24px; }
    .about-strip nav a { min-height: 115px; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: 28px 24px; padding-block: 38px 30px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom .container { flex-wrap: wrap; padding-block: 14px; }
    .footer-bottom div div { margin-left: 0; }
    .footer-bottom img { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===========================================================================
   Espaço reservado enquanto os dados chegam do Firebase.

   Antes, cada lista nascia como uma linha de "Carregando..." e virava vários
   cartões de uma vez: a página dava um pulo e empurrava o que estava abaixo.
   Agora o espaço já nasce com a altura que vai ter, desenhado como uma
   silhueta discreta — o lugar da foto e linhas finas no lugar do texto.

   As silhuetas reusam as classes dos cartões de verdade (.home-news-card,
   .home-news-media, .home-news-thumb), então as medidas batem por construção.

   O bloco de prefers-reduced-motion no topo deste arquivo já neutraliza estas
   animações para quem pediu menos movimento.
   =========================================================================== */
@keyframes placeholder-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

.is-placeholder { pointer-events: none; cursor: default; }

/* Silhuetas respiram juntas (mesma duração e fase) para não virar um festival
   de piscadas fora de compasso. */
.placeholder-block,
.placeholder-line { animation: placeholder-breathe 1.7s ease-in-out infinite; }

.placeholder-line { height: 8px; border-radius: 999px; background: var(--line); }
.placeholder-line.is-short { width: 58%; }
.placeholder-line.is-tiny { width: 34%; }

.home-news-card.is-placeholder { gap: 9px; }
.home-news-card.is-placeholder .home-news-content { gap: 9px; justify-content: center; }

/* Entrada suave da foto e pulso enquanto ela não chegou. O main.js marca
   .is-loaded quando a imagem termina de carregar; sem suporte a :has(), o
   navegador só não anima — o fundo liso de hoje continua valendo. */
.media-fade { opacity: 0; transition: opacity .45s ease; }
.media-fade.is-loaded { opacity: 1; }

.home-news-media:has(> img.media-fade:not(.is-loaded)),
.home-news-thumb:has(> img.media-fade:not(.is-loaded)),
.event-media:has(> img.media-fade:not(.is-loaded)),
.event-slide-media:has(> img.media-fade:not(.is-loaded)),
.news-archive-media:has(> img.media-fade:not(.is-loaded)),
.gallery-preview-tile:has(> img.media-fade:not(.is-loaded)) {
    animation: placeholder-breathe 1.7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .media-fade { opacity: 1; }
}