/* ============================================================
   JIEPE 2026 — identidade visual
   Paleta derivada do tema "Mulheres na Ciência", com todos os
   contrastes medidos pela fórmula da WCAG 2.1 (valores nos
   comentários, contra o papel #FBFAFE salvo indicação).
   ============================================================ */

:root {
  --papel:       #FBFAFE;  /* branco com viés violeta */
  --superficie:  #F3F1FA;
  --tinta:       #12122B;  /* 17,62:1 */
  --cinza:       #5C5775;  /*  6,57:1 */
  --cinza-fraco: #8B86A3;  /*  3,35:1 — só rótulos grandes */
  --borda:       #DFDCEC;

  --indigo-900:  #171A4F;  /* 15,58:1 — fundo profundo */
  --indigo-700:  #2E35A8;  /*  9,22:1 — cor de ação */
  --magenta-700: #A6156F;  /*  6,83:1 — acento em texto */
  --magenta-500: #E5359C;  /*  3,80:1 — só gráfico */
  --magenta-400: #F55FB4;  /*  5,53:1 sobre índigo-900 */

  --ok: #1D6B3F;  --alerta: #8A5B00;

  /* Cores oficiais dos ODS, as mesmas de public/data/ods-resumo.json. Só as
     quatro em uso; o número no nome é o do objetivo, para não virar palpite
     quando alguém trocar. */
  --ods-3:  #4C9F38;   /* Saúde e Bem-Estar */
  --ods-9:  #FD6925;   /* Indústria, Inovação e Infraestrutura */
  --ods-10: #DD1367;   /* Redução das Desigualdades */
  --ods-16: #00689D;   /* Paz, Justiça e Instituições Eficazes */

  --sans: "Plus Jakarta Sans", "Avenir Next", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-sm: 0.875rem;  --fs-xs: 0.75rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--sans); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 800;
                 letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; }

.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
:focus-visible { outline: 3px solid var(--magenta-500); outline-offset: 3px; }
.pular {
  position: absolute; left: -9999px; top: 0; background: var(--magenta-500);
  color: #12122B; padding: 0.7rem 1rem; font-weight: 800; z-index: 100;
}
.pular:focus { left: 0; }

.eyebrow { font-size: var(--fs-xs); text-transform: uppercase;
           letter-spacing: 0.14em; font-weight: 700; color: var(--cinza); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Texto que só o leitor de tela recebe. Não é display:none nem
   visibility:hidden — os dois tiram o elemento também da leitura, que é
   justamente o contrário do que se quer aqui. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Aviso de que o link sai do site. Abrir aba nova sem avisar é falha
   conhecida de acessibilidade (WCAG 3.2.5): quem usa leitor de tela ou
   amplia muito perde o contexto sem entender por quê.
   O aviso vem em dois canais, porque nenhum dos dois serve sozinho: a seta
   para quem enxerga, e o «abre em nova aba» do .so-leitor para quem ouve —
   conteúdo gerado por CSS não é anunciado de forma confiável.
   O seletor é o próprio target, e não uma classe: assim vale para qualquer
   link externo futuro sem depender de alguém lembrar de marcá-lo.
   Ficam de fora os links cujo conteúdo é imagem ou painel inteiro: neles a
   seta grudaria num canto sem relação com texto nenhum, e o .so-leitor já
   faz o trabalho. */
a[target="_blank"]:not(.apoio-marca, .hub-porta, .dest, .btn, .reg-acao)::after {
  content: "\2197"; margin-left: 0.25em; font-size: 0.85em;
  line-height: 1; display: inline-block; text-decoration: none;
  vertical-align: baseline;
}

/* ---------- assinatura institucional ----------
   Fundo mais escuro e peso menor: é assinatura, não navegação. Antes as duas
   barras tinham a mesma cor e o mesmo peso, e disputavam a primeira leitura.
   Contraste do texto sobre o novo fundo: 6,27:1. */
/* Sem cor no cromo: a malha logo abaixo é a única declaração de cor do
   cabeçalho. A assinatura recua no quase-preto e o menu vem no índigo —
   a página escurece até a malha, e só então a cor acontece. */
.topo-inst { background: #0E1030; color: #8E93C4; }   /* 6,27:1 */
.inst-linha {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  flex-wrap: wrap; padding-block: 0.55rem; font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  text-align: center;
}
.inst-linha .sep { opacity: 0.45; }
.inst-curta { display: none; }
.inst-curta .sep { margin-inline: 0.12em; }
/* a linha longa mede ~875 px; abaixo de 1080 ela quebraria em duas */
@media (max-width: 1079px) {
  .inst-longa { display: none; }
  .inst-curta { display: flex; }
}

/* ---------- navegação ----------
   A barra clara das duas: é aqui que se age. */
.navbar {
  position: sticky; top: 0; z-index: 40; background: var(--indigo-900);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10);
}
/* centralizado, mas com recuo automático quando os itens não cabem: em tela
   estreita o menu rola, e centralizar ali esconderia o primeiro item. */
.nav-linha { display: flex; gap: 0.1rem; align-items: stretch;
             justify-content: safe center; }
.nav-linha a, .nav-grupo > button {
  font: inherit; font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #C9CBF2; text-decoration: none; white-space: nowrap;
  padding: 1.05rem 0.9rem 1rem; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem;
  position: relative;
}
/* Entre a sanfona e o desktop folgado o menu não cabe: com nove itens os
   rótulos somam ~970px, e a 980px sobram ~900px úteis depois do recuo da
   página. Aperta o item nessa faixa em vez de deixar a barra rolar — menu que
   rola esconde justamente os últimos, que ninguém sabe que existem. */
@media (min-width: 980px) and (max-width: 1180px) {
  .nav-linha a, .nav-grupo > button {
    font-size: 0.74rem; padding-inline: 0.55rem; letter-spacing: 0.05em;
  }
  .nav-linha a.ativo::after { left: 0.55rem; right: 0.55rem; }
}

.nav-linha a:hover, .nav-grupo > button:hover { color: #fff; }
.nav-linha a.ativo { color: #fff; }
/* O marcador fica DENTRO da barra, com recuo lateral e afastado da borda —
   antes era um border-bottom que encostava na malha e parecia defeito. */
.nav-linha a.ativo::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.55rem;
  height: 3px; background: var(--magenta-500);
}
.nav-casa.ativo::after { left: 0.75rem; right: 0.75rem; }

/* O submenu de edições: no desktop é um dropdown que flutua sobre a página,
   então desce com fade e um passo curto, sem mexer na altura de nada. Fica
   sempre no display: flex e some por visibility — assim há estado para
   interpolar, e o atraso de 160ms no fechar impede que ele desapareça no
   meio do próprio movimento. */
.nav-grupo { position: relative; display: flex; }
.nav-menu {
  position: absolute; top: 100%; left: 0; min-width: 8rem;
  background: var(--indigo-900); border: 1px solid rgba(255,255,255,0.18);
  border-top: 0; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-0.3rem);
  transition: opacity 140ms ease, transform 160ms ease,
              visibility 0s linear 160ms;
}
.nav-grupo[data-aberto="true"] .nav-menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 160ms ease, transform 180ms ease, visibility 0s;
}
.nav-menu a { padding: 0.65rem 0.85rem; }

/* ---- sanfona: só existe abaixo de 980px ---- */
.nav-barra-mobile { display: none; align-items: center; justify-content: space-between;
                    padding-block: 0.6rem; }
.nav-marca { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.02em; color: #fff; }
.nav-toggle {
  font: inherit; font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: #fff; background: none; border: 1px solid rgba(255,255,255,0.3);
  padding: 0.5rem 0.75rem; cursor: pointer; display: inline-flex; align-items: center;
  gap: 0.5rem; min-height: 44px;   /* alvo de toque */
}
.nav-toggle-barras { display: flex; flex-direction: column; gap: 3px; width: 16px; }
.nav-toggle-barras i { height: 2px; background: currentColor; display: block;
                       transition: transform 160ms ease, opacity 120ms ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-barras i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-barras i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-barras i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 979px) {
  .nav-barra-mobile { display: flex; }
  /* A sanfona abre por max-height, não por display: display não interpola, e
     o salto seco fazia o painel aparecer de uma vez em vez de deslizar. As
     40rem são só um teto folgado — cabe a lista inteira com o submenu de
     edições aberto; o que manda no tempo é a duração, não a altura.
     O padding-bottom entra na conta porque box-sizing é border-box: sem
     zerá-lo junto sobraria um filete de 0.6rem com o menu fechado.
     visibility tira os links do foco quando fechado, mas só depois que a
     animação termina — daí o atraso no fechar e o 0s no abrir. */
  .nav-linha { display: flex; flex-direction: column; align-items: stretch;
               max-height: 0; padding-bottom: 0; overflow: hidden;
               opacity: 0; visibility: hidden;
               transition: max-height 260ms ease, padding-bottom 260ms ease,
                           opacity 140ms ease, visibility 0s linear 260ms; }
  .nav-linha[data-aberto="true"] {
    max-height: 40rem; padding-bottom: 0.6rem; opacity: 1; visibility: visible;
    transition: max-height 300ms ease, padding-bottom 300ms ease,
                opacity 200ms ease 60ms, visibility 0s;
  }
  .nav-linha a, .nav-grupo > button {
    padding: 0.9rem 0.25rem; min-height: 44px; width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  /* no painel o marcador vira filete à esquerda: sublinhado embaixo de um
     item de lista se confunde com a divisória da linha seguinte */
  .nav-linha a.ativo::after { left: 0; right: auto; top: 0.7rem; bottom: 0.7rem;
                              width: 3px; height: auto; }
  .nav-linha a.ativo { padding-left: 0.85rem; }
  .nav-casa { border-right: 0; margin-right: 0; padding-inline: 0.25rem; }
  .nav-casa.ativo { padding-left: 0.85rem; }
  .nav-grupo { flex-direction: column; }
  .nav-grupo > button { justify-content: space-between; }
  /* dentro do painel o submenu deixa de flutuar e vira um bloco da própria
     lista: aí ele recolhe por max-height, como a sanfona, porque precisa
     empurrar os itens de baixo em vez de passar por cima deles. As 14rem
     cobrem as três edições com folga. */
  .nav-menu { position: static; border: 0; background: rgba(0,0,0,0.22);
              min-width: 0; transform: none; max-height: 0; overflow: hidden;
              transition: max-height 240ms ease, opacity 140ms ease,
                          visibility 0s linear 240ms; }
  .nav-grupo[data-aberto="true"] .nav-menu {
    max-height: 14rem; transform: none;
    transition: max-height 260ms ease, opacity 180ms ease 40ms, visibility 0s;
  }
  .nav-menu a { padding-left: 1.5rem; }
}
/* quem pediu menos movimento continua tendo os menus — só sem o deslize */
@media (prefers-reduced-motion: reduce) {
  .nav-linha, .nav-linha[data-aberto="true"],
  .nav-menu, .nav-grupo[data-aberto="true"] .nav-menu { transition: none; }
}

/* ---------- a malha ---------- */
.malha-zona { background: var(--indigo-900); }
canvas.malha { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------
   A régua dos 17 e o objetivo em exibição.

   O segmento cresce para os dois lados, a partir do próprio centro. A faixa
   tem folga reservada acima e abaixo, então o crescimento nunca alcança a
   malha nem o texto do painel — foi o que quebrou nas versões anteriores.
   --------------------------------------------------------------- */
/* Faixa de largura cheia: o JS dá à régua a largura da palavra e a centra.
   Sem JS ou sem palavra formada, o padding devolve as margens do miolo.

   A margem negativa sobe a faixa 22px — metade dos 26px do segmento mais os
   9px de folga do topo — de modo que a régua fique montada na borda da malha:
   metade sobre os quadradinhos, metade sobre o índigo liso. O segmento
   pertence às duas zonas, e é isso que o costura à malha. */
.regua-zona {
  position: relative; padding-inline: var(--gutter);
  margin-top: -22px; z-index: 2;
  max-width: 1180px; margin-inline: auto;   /* base, antes de o JS medir */
}
.regua-zona .regua { width: 100%; }
/* o texto do painel mantém medida de leitura mesmo com o contêiner largo */
.regua-zona .painel-nome, .regua-zona .painel-meta { max-width: 74ch; }

/* 26px de segmento + 9px de folga de cada lado */
.regua {
  display: flex; gap: 2px; list-style: none; margin: 0;
  /* padding-inline: 0 é obrigatório: sem ele o <ul> guarda os 40px que o
     navegador dá por padrão e o primeiro retângulo desalinha do selo */
  padding: 9px 0; align-items: center; height: 44px;
}
.regua li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.regua button {
  width: 100%; height: 26px; border: 0; padding: 0; cursor: pointer; display: block;
  /* a partir do centro: cresce igual para cima e para baixo */
  transform-origin: center;
  transition: transform 380ms cubic-bezier(.22,.61,.36,1);
}

/* em exibição — 1,55 x 26 = 40px, dentro dos 44 disponíveis */
.regua button[data-ativo="true"] { transform: scaleY(1.55); }

/* sob o cursor: menor e mais rápido, para o toque parecer imediato */
.regua button:hover, .regua button:focus-visible {
  transform: scaleY(1.3); transition-duration: 150ms;
}

/* fixado por clique: mesma altura do ativo, com filete claro na base */
.regua button[aria-pressed="true"] {
  transform: scaleY(1.55);
  box-shadow: inset 0 -3px 0 rgba(255,255,255,0.9);
}

.regua-marca { display: none; }

@media (prefers-reduced-motion: reduce) {
  .regua button { transition: none; }
}

/* minmax(0, 1fr), não 1fr: uma trilha 1fr tem min-width auto e não encolhe
   abaixo do próprio conteúdo, então o título do exemplo esticava o painel
   para fora da tela em vez de ser cortado — e as reticências do .ex-txt
   nunca chegavam a agir. O min-width no filho vale pelo mesmo motivo. */
.painel {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem;
  align-items: center; padding-block: 1.4rem 0.5rem; color: #fff;
  transition: opacity 260ms ease;
}
.painel > div { min-width: 0; }
.painel.trocando { opacity: 0; }
/* o selo recebe a largura MEDIDA de um retângulo da régua (ver 2026.js) */
.painel-selo { flex: none; display: block; }
.painel-selo img { width: 100%; height: 100%; display: block; }
.painel-nome { font-weight: 800; font-size: 1rem; letter-spacing: -0.015em; }
.painel-meta { font-family: var(--mono); font-size: 0.68rem;
               color: #A8ABE0; letter-spacing: 0.04em; }
.painel-ex { display: flex; align-items: baseline; gap: 0.5rem;
             font-size: 0.74rem; color: #C9CBF2; margin-top: 0.25rem; min-width: 0; }
.ex-txt { flex: 1 1 auto; min-width: 0; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.ex-txt span { color: #8F93C8; }

/* em repouso: uma afirmação, e nada mais */
/* Sem slot vazio no repouso: o selo escondido ainda ocupava altura e era
   ele que abria o vão entre a régua e a frase. */
.painel.ocioso { grid-template-columns: 1fr; padding-block: 1.5rem 0.7rem; }
.painel.ocioso .painel-selo { display: none; }
/* Lilás em vez de branco: a frase precisa ficar abaixo do nome do evento,
   que é branco puro, sem cair no nível do texto de apoio. 10,26:1 sobre o
   índigo — folga de sobra sobre o mínimo de 4,5:1. */
/* Uma linha só, centralizada. O corpo acompanha a largura da tela (2,1vw
   é a maior fonte em que os 70 caracteres cabem, com margem de segurança),
   com teto para não estourar em monitor largo. */
.painel.ocioso { justify-items: center; }
.painel.ocioso .painel-nome {
  font-size: clamp(0.85rem, 1.95vw, 1.7rem);
  letter-spacing: -0.03em; line-height: 1.2; color: #C9CBF2;
  white-space: nowrap; text-align: center;
}
.frase-curta { display: none; }
/* abaixo de 620px a versão longa cairia para menos de 15px numa linha */
@media (max-width: 619px) {
  .frase-longa { display: none; }
  .frase-curta { display: inline; }
  /* sem piso: a fonte acompanha a tela até o fim, senão a linha estoura
     nos aparelhos de 320px */
  .painel.ocioso .painel-nome { font-size: min(2.9vw, 1.2rem); }
}
/* "A UFTM trabalha em todos" é a parte que afirma — fica em magenta */
.painel.ocioso .painel-nome b { color: var(--magenta-400); font-weight: 800; }
.painel.ocioso .painel-meta, .painel.ocioso .painel-ex { display: none; }

/* ---------- faixa de conteúdo da home ---------- */
.head-zona { background: var(--indigo-900); color: #fff; }
.head-info {
  padding-block: clamp(1.5rem, 3.5vw, 2.4rem) clamp(2rem, 5vw, 3rem);
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr; align-items: end;
}
@media (min-width: 860px) {
  .head-info { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
}
/* O nome do evento é a marca permanente e leva o corpo maior; o tema muda
   a cada edição e entra como subtítulo. Sem caixa-alta no nome: a versaleta
   forçada em corpo grande custa legibilidade e não sobra presença. */
.edicao {
  display: block; font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1;
  color: #fff; text-wrap: balance; max-width: 20ch;
}
.head-tema {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: clamp(1rem, 1.7vw, 1.2rem); font-weight: 700;
  line-height: 1.3; letter-spacing: -0.01em;
  color: var(--magenta-400); text-wrap: balance; max-width: 30ch;
}
.head-tema em { font-style: normal; color: #C9CBF2; font-weight: 500; }
.head-sub { margin-top: 0.9rem; color: #C9CBF2;
            font-size: clamp(0.95rem, 1.3vw, 1.05rem); max-width: 42ch; line-height: 1.5; }
.head-lado { display: flex; flex-direction: column; gap: 1rem; }
.quando { display: flex; flex-direction: column; gap: 0.15rem;
          padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.18); }
.quando .d { font-family: var(--mono); font-size: clamp(1.3rem, 2.2vw, 1.7rem);
             font-weight: 700; letter-spacing: -0.02em; }
.quando .l { font-size: var(--fs-xs); color: #A8ABE0; text-transform: uppercase;
             letter-spacing: 0.12em; font-weight: 700; }
.acoes { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn { font: inherit; font-size: var(--fs-sm); font-weight: 800;
       padding: 0.7rem 1.15rem; border: 2px solid transparent; cursor: pointer;
       text-decoration: none; display: inline-flex; align-items: center; }
.btn-p { background: var(--magenta-500); color: #12122B; }
.btn-p:hover { background: var(--magenta-400); }
.btn-g { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-g:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
/* o .btn-g é para fundo escuro; este é o contorno que se vê sobre o papel */
.btn-n { background: transparent; color: var(--tinta); border-color: var(--borda); }
.btn-n:hover { border-color: var(--cinza-fraco); background: var(--superficie); }
.chancela { font-size: var(--fs-xs); color: #A8ABE0; line-height: 1.45; max-width: 34ch; }
.chancela strong { color: #fff; font-weight: 700; }

/* ---------- destaques (no lugar do carrossel) ---------- */
.destaques { border-bottom: 1px solid var(--borda); }
.dest-topo { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
             padding-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-bottom: 0.9rem; }
.dest-fase { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
             letter-spacing: 0.12em; color: var(--magenta-700); }
.dest-nota { font-size: var(--fs-xs); color: var(--cinza); }
.dest-grade { display: grid; gap: 0.7rem; grid-template-columns: 1fr;
              padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (min-width: 620px) { .dest-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .dest-grade { grid-template-columns: repeat(4,1fr); } }
.dest { border: 1px solid var(--borda); background: var(--superficie);
        padding: 0.95rem 1.05rem 1.1rem; display: flex; flex-direction: column;
        gap: 0.3rem; text-decoration: none; color: inherit; }
.dest:hover { border-color: var(--indigo-700); }
.dest-t { font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.dest-d { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.4; }
.dest-p { margin-top: auto; padding-top: 0.5rem; font-family: var(--mono);
          font-size: 0.66rem; display: flex; align-items: center; gap: 0.35rem; }
.pastilha { width: 0.4rem; height: 0.4rem; display: block; flex: none; }
.p-ok { color: var(--ok); }        .p-ok .pastilha { background: var(--ok); }
.p-al { color: var(--alerta); }    .p-al .pastilha { background: var(--alerta); }
.p-nt { color: var(--cinza); }     .p-nt .pastilha { background: var(--cinza-fraco); }

/* ---------- blocos de conteúdo ---------- */
section.bloco { padding-block: clamp(2.5rem, 5vw, 4rem);
                border-bottom: 1px solid var(--borda); }
.sec-head { display: flex; flex-direction: column; gap: 0.6rem;
            margin-bottom: 1.75rem; max-width: 62ch; }
.sec-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.sec-head p { color: var(--cinza); }
.numeros { display: grid; gap: 0.7rem; grid-template-columns: repeat(2,1fr); }
@media (min-width: 760px) { .numeros { grid-template-columns: repeat(4,1fr); } }
.numero { border: 1px solid var(--borda); padding: 1.1rem;
          display: flex; flex-direction: column; gap: 0.2rem; }
.numero b { font-family: var(--mono); font-size: clamp(1.6rem, 3vw, 2.1rem);
            font-weight: 800; letter-spacing: -0.03em; color: var(--indigo-700); line-height: 1; }
.numero span { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.35; }
.modalidades { display: grid; gap: 0.7rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .modalidades { grid-template-columns: repeat(2,1fr); } }
.modal { border: 1px solid var(--borda); background: var(--superficie);
         padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.modal h3 { font-size: 1rem; }
.modal p { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; }

.faixa-snct { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.snct-linha { padding-block: clamp(1.5rem, 3vw, 2.2rem); display: grid;
              gap: 1.25rem; grid-template-columns: 1fr; }
/* A coluna da assinatura pede max-content, isto é, exatamente a largura de
   uma linha de marcas. Com fração fixa ela vinha estreita demais e a última
   marca caía para a segunda linha; assim quem cede é o texto, que tem para
   onde crescer em altura. */
@media (min-width: 900px) {
  .snct-linha { grid-template-columns: 1fr max-content; gap: 1rem 2rem;
                align-items: center; }
}
.snct-linha h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.snct-linha p { font-size: var(--fs-sm); color: var(--cinza); margin-top: 0.3rem; max-width: 52ch; }
/* O objetivo que traduz o tema nacional. Leva o selo oficial e a cor do
   próprio ODS no filete, e não no texto: em 0.8rem o vermelho do 5 não
   alcança o contraste de leitura contra o papel. */
.snct-ods { display: inline-flex; align-items: center; gap: 0.75rem;
            margin-top: 1rem; color: var(--tinta);
            background: var(--papel); border: 1px solid var(--borda);
            border-left: 3px solid var(--c);
            padding: 0.6rem 0.9rem 0.6rem 0.6rem; max-width: 46ch; }
.snct-ods-selo { width: 40px; height: 40px; flex: none; display: block;
                 align-self: start; }
.snct-ods-t { font-size: var(--fs-sm); font-weight: 800;
              letter-spacing: -0.01em; line-height: 1.25; }
/* a meta é a linha que responde "por que este objetivo": fica na tinta cheia,
   e não no cinza da nota, porque é ela que faz o argumento */
.snct-ods-meta { font-size: var(--fs-xs); line-height: 1.45; margin-top: 0.2rem; }
.snct-ods-d { font-size: var(--fs-xs); color: var(--cinza-fraco);
              line-height: 1.4; margin-top: 0.25rem; }
.snct-ods a { color: inherit; text-decoration: underline;
              text-decoration-color: var(--cinza-fraco);
              text-underline-offset: 2px;
              transition: text-decoration-color 180ms ease; }
.snct-ods a:hover { text-decoration-color: currentColor; }
/* a UFTM em cima, sozinha e maior; SNCT e MCTI embaixo — tudo centralizado */
.assinaturas { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.assinaturas-linha { display: flex; flex-wrap: wrap; align-items: center;
                     justify-content: center; gap: 0.7rem 1.4rem; }
/* Linha de assinatura: marcas pequenas, igualadas pela altura, numa linha só.
   Quem dita o teto é o MCTI, quase cinco vezes mais largo que alto: passar
   muito daqui e a linha quebra de novo. */
.marca { height: 26px; width: auto; }
@media (min-width: 820px) { .marca { height: 32px; } }
/* Os modificadores ficam todos DEPOIS da regra base: têm a mesma
   especificidade que ela, então quem vier antes perde a altura. */
/* marca quadrada pesa menos na mesma altura: sobe um pouco */
.marca--empilhada { height: 30px; }
@media (min-width: 820px) { .marca--empilhada { height: 36px; } }
/* a marca da casa abre a assinatura sozinha, e por isso vem maior */
.marca--uftm { height: 40px; }
@media (min-width: 820px) { .marca--uftm { height: 48px; } }
.marca-slot { font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
              letter-spacing: 0.08em; color: var(--cinza);
              border: 1px dashed var(--cinza-fraco); padding: 0.4rem 0.55rem;
              line-height: 1.2; text-align: center; }

/* ---------- páginas internas ---------- */
.pag-head { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) 1.25rem;
            border-bottom: 1px solid var(--borda); }
.pag-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: 0.5rem; }
.pag-head p { color: var(--cinza); margin-top: 0.7rem; max-width: 58ch; }

.filtros { position: sticky; top: 44px; z-index: 30;
           background: var(--papel); border-bottom: 1px solid var(--borda); }
.filtro-bloco { padding-block: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; }
.filtro-linha { display: flex; gap: 0.35rem; align-items: flex-start; flex-wrap: wrap; }
.filtro-rot { font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
              letter-spacing: 0.1em; color: var(--cinza); width: 4.5rem;
              flex: none; padding-top: 0.35rem; }
.filtro-caixa { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.chip { font: inherit; font-size: var(--fs-xs); font-weight: 700;
        padding: 0.3rem 0.6rem; border: 1px solid var(--borda);
        background: var(--papel); color: var(--tinta); cursor: pointer;
        display: inline-flex; gap: 0.3rem; align-items: center; }
.chip[aria-pressed="true"] { background: var(--indigo-700); color: #fff;
                             border-color: var(--indigo-700); }
.chip .cn { font-family: var(--mono); font-weight: 800; }
.chip-ods[aria-pressed="true"] { border-color: transparent; }

.resultado-conta { padding-block: 1rem 0.5rem; font-size: var(--fs-sm);
                   color: var(--cinza); font-family: var(--mono); }
.sessoes { display: flex; flex-direction: column; gap: 0.7rem; padding-bottom: 3rem; }
.sessao { border: 1px solid var(--borda); display: flex; flex-direction: column; }
.sessao-faixa { height: 5px; display: flex; }
.sessao-faixa i { flex: 1; }
.sessao-corpo { padding: 1rem 1.15rem 1.15rem; display: grid; gap: 0.5rem;
                grid-template-columns: 1fr; }
@media (min-width: 780px) { .sessao-corpo { grid-template-columns: 1fr auto;
                                            align-items: start; } }
.sessao-t { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.sessao-selos { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.4rem; }
.selo-min { font-family: var(--mono); font-size: 0.62rem; font-weight: 800;
            padding: 0.15rem 0.35rem; }
.sessao-aberto { font-size: 0.7rem; color: var(--magenta-700);
                 font-weight: 700; margin-top: 0.4rem; }
.sessao-meta { font-family: var(--mono); font-size: 0.7rem; color: var(--cinza);
               display: flex; flex-direction: column; gap: 0.15rem; }
@media (min-width: 780px) { .sessao-meta { text-align: right; } }
.sessao-campus { font-weight: 700; color: var(--tinta); }
.vazio-msg { border: 1px dashed var(--borda); padding: 2rem; text-align: center;
             color: var(--cinza); font-size: var(--fs-sm); }

/* ---------- rodapé ---------- */
footer.rodape { background: var(--indigo-900); color: #A8ABE0; padding-block: 2.5rem 3rem; }
.rodape-grade { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 2fr 1fr 1fr; } }
.rodape h4 { color: #fff; font-size: 0.8rem; text-transform: uppercase;
             letter-spacing: 0.12em; margin-bottom: 0.6rem; }
.rodape a { color: #C9CBF2; text-decoration: none; font-size: var(--fs-sm);
            display: block; padding: 0.15rem 0; }
.rodape a:hover { color: #fff; }
.rodape-nota { font-size: var(--fs-xs); line-height: 1.5; max-width: 44ch; }
/* Na tela estreita a assinatura é uma coluna de três linhas centralizadas:
   a UFTM, depois as três agências, depois o MCTI. Quebrar sozinha por
   flex-wrap deixava a última fila com uma marca órfã à esquerda. */
.rodape-assin { margin-top: 2rem; padding-top: 1.25rem;
                border-top: 1px solid rgba(255,255,255,0.15);
                display: flex; flex-direction: column;
                align-items: center; gap: 1.4rem; }
.rodape-assin-meio { display: flex; flex-wrap: wrap; align-items: center;
                     justify-content: center; gap: 1rem 1.8rem; }
.rodape-assin .marca { height: 34px; }
.rodape-assin .marca--empilhada { height: 40px; }
/* Na tela larga as cinco voltam a ser uma linha só, abertas de ponta a ponta:
   o display:contents dissolve o agrupamento do meio, e as cinco viram filhas
   diretas do flex de novo — sem marcação duplicada para os dois arranjos.
   O space-between só entra aqui, onde a linha cabe inteira; embaixo ele
   empurraria as marcas para os cantos. */
@media (min-width: 820px) {
  .rodape-assin { flex-direction: row; flex-wrap: wrap;
                  justify-content: space-between; gap: 1rem 1.6rem; }
  .rodape-assin-meio { display: contents; }
  .rodape-assin .marca { height: 42px; }
  .rodape-assin .marca--empilhada { height: 48px; }
}
/* Pílulas discretas sobre o índigo, com o mesmo peso visual entre link e
   botão — quem lê não precisa saber que um navega e o outro executa, só que
   ambos são a mesma família de assunto.
   Sem filete: elas vivem dentro da coluna do evento, e não como faixa
   própria, então o traço as separaria do texto a que pertencem. */
.rodape-legal { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rodape-legal a, .rodape-legal button {
  font: inherit; font-size: var(--fs-xs); font-weight: 700;
  color: #C9CBF2; background: transparent; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
  padding: 0.45rem 1rem; text-decoration: none; display: inline-block;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.rodape-legal a:hover, .rodape-legal button:hover {
  color: #fff; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06);
}

/* Chapa a marca inteira em branco: brightness(0) leva tudo ao preto sem mexer
   no alfa, invert(1) devolve tudo branco. Vale para as marcas que vão inteiras
   em branco — a UFTM e o MCTI têm arquivo próprio, porque nelas só o texto
   muda de cor. */
.marca--branca { filter: brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- datas importantes ---------- */

/* O calendário visual: uma linha do tempo. As quatro cores das barras
   passaram no validador de paleta contra o papel #FBFAFE — banda de
   luminosidade, piso de croma, ΔE de daltonismo (pior par 10,4 em
   protanopia) e contraste. Duas já são tokens do site: o magenta que a
   paleta reserva para gráfico e o âmbar de alerta. Cor não é o único
   canal — cada barra tem nome à esquerda e datas à direita. */
.cal-visual { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) 0.5rem; }

/* ---- a linha do tempo ----
   Duração pede eixo contínuo. Na grade do mês a semana quebra a cada sete
   dias, e uma janela de 36 dias viraria seis pedaços soltos em alturas
   diferentes — o desenho dizia menos que a lista. Aqui cada etapa é uma
   barra numa régua só, e o que se sobrepõe na vertical acontece junto.

   Só existe de 900px para cima. Barra horizontal precisa de largura: num
   telefone a mais curta vira um toco de 15px, o rótulo não cabe ao lado dela
   e a comparação entre linhas — que é o motivo do desenho — não sobrevive.
   Foram tentados o rótulo acima da barra e as divisas desenhadas dentro da
   trilha; melhoraram o sintoma, não a leitura.

   Esconder não custa informação: a lista acima traz os mesmos marcos, com
   data, duração e descrição, e as datas únicas aparecem lá também. Ela é a
   fonte; o gráfico é a segunda leitura, para quem tem tela para ela. */
.cal-visual { display: none; }
@media (min-width: 900px) { .cal-visual { display: block; } }

.cal-tempo  { margin-bottom: 0.5rem;
              /* uma medida só para os três lugares que precisam concordar: a
                 grade da linha, o recuo da régua de meses e o da camada de
                 réguas. Escritos à mão, bastava mexer num para o desenho sair
                 do lugar sem ninguém ver. */
              --cal-rot: 10rem; --cal-dat: 6.5rem; --cal-gap: 1rem; }
/* onde há largura de sobra o rótulo cresce e ganha títulos em uma linha só */
@media (min-width: 1100px) { .cal-tempo { --cal-rot: 13rem; --cal-dat: 7.5rem; } }

/* A régua de meses gruda no topo, abaixo da barra de navegação: com dez
   linhas ela saía da tela justo quando se olha as últimas, e sem ela a barra
   não diz em que mês cai.
   980px é onde o menu deixa de ser sanfona e a barra encolhe de 63px para
   52–54px. O recuo usa o MENOR da faixa: assim a régua no máximo se enfia
   2px sob a barra, que é opaca e tem z-index maior. Com o maior, sobrava
   fresta e o conteúdo passava por ela. */
.cal-eixo   { display: flex; font-size: var(--fs-xs);
              color: var(--cinza-fraco); text-transform: capitalize;
              font-weight: 700; letter-spacing: 0.04em;
              position: sticky; top: 63px; z-index: 5;
              background: var(--papel); padding-top: 0.45rem;
              margin-left: calc(var(--cal-rot) + var(--cal-gap));
              margin-right: calc(var(--cal-dat) + var(--cal-gap)); }
@media (min-width: 980px) { .cal-eixo { top: 52px; } }
.cal-eixo span { border-left: 1px solid var(--borda); padding: 0 0 0.3rem 0.4rem; }

/* o respiro no topo é onde o dia e a setinha de cada risco tracejado se
   apoiam: sem ele os dois cairiam sobre a barra da primeira linha */
.cal-etapas { list-style: none; margin: 0; padding: 19px 0 0;
              display: flex; flex-direction: column; }
.cal-etapa  { display: grid; align-items: center; gap: 0.15rem var(--cal-gap);
              grid-template-columns: var(--cal-rot) 1fr var(--cal-dat);
              padding-block: 0.42rem; }
.cal-etapa + .cal-etapa { border-top: 1px solid rgba(0,0,0,0.045); }
/* O rótulo reserva sempre duas linhas, mesmo com uma só: senão «Envio de
   resumos» faz uma linha baixa e «Propostas de atividades formativas» faz
   uma alta, e a régua perde o compasso. O align-items: center da linha
   acomoda o título curto no meio da caixa reservada.
   A unidade lh é a altura de uma linha; o 2.6em antes é o mesmo valor
   calculado à mão (2 × line-height), para quem ainda não a suporta. */
.cal-etapa-n { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
               min-height: 2.6em; min-height: 2lh;
               display: flex; align-items: center; }
.cal-etapa-q { font-size: var(--fs-xs); color: var(--cinza-fraco);
               font-variant-numeric: tabular-nums; white-space: nowrap;
               line-height: 1.4; text-align: right; }
/* a duração desce para a segunda linha: ao lado do intervalo estouraria a
   coluna, e a caixa de duas linhas do rótulo já reservou a altura */
.cal-etapa-q b { display: block; font-weight: 600; color: var(--cinza); }
.cal-etapa-t { position: relative; height: 10px; display: block; }

/* A cor da barra é a do grupo, a mesma do título da lista acima — é dele que
   ela tira o sentido, e por isso não faz falta legenda aqui. */
.cal-barra   { position: absolute; top: 0; height: 10px; border-radius: 5px;
               background: var(--c, #E5359C); display: block; min-width: 6px; }

/* As réguas atravessam o quadro inteiro, numa camada só por cima de todas as
   etapas. Antes cada linha desenhava as suas: um traço de 24px numa linha de
   50 deixava três colunas picotadas, e tracinho solto não é régua — é ela que
   leva a data do topo até a barra lá embaixo, e para isso precisa ser inteira.
   A camada fica antes da lista no HTML, então a barra passa por cima da régua:
   a linha é referência, a barra é o dado.
   O recuo lateral é o que a mantém dentro da faixa das barras: sem ele, ela
   desceria cortando o rótulo e as datas. */
.cal-quadro { position: relative; }
.cal-grade  { position: absolute; inset: 0; pointer-events: none;
              left: calc(var(--cal-rot) + var(--cal-gap));
              right: calc(var(--cal-dat) + var(--cal-gap)); }

/* hoje é mais forte que as réguas de divulgação: é a única linha que o leitor
   usa para se situar, e precisa ganhar delas — e da barra — na primeira olhada */
.cal-agora { position: absolute; top: 0; bottom: 0; width: 2px;
             background: var(--tinta); display: block; z-index: 2; }

/* Três famílias de risco vertical, e cada uma precisa se anunciar como sua.
   A divisa de mês desce na mesma tinta do tracinho que fica ao lado do nome
   do mês, no topo: é a mesma linha, agora inteira. Antes ela parava no
   cabeçalho, e no corpo só existiam as réguas das datas — sem nada com que
   se alinhar, elas pareciam divisas de mês fora de lugar. */
.cal-regua-mes { position: absolute; top: 0; bottom: 0; width: 1px;
                 background: var(--borda); display: block; }
/* A data marcada é anotação sobre a grade, não grade: tracejada para não se
   confundir com a divisa, e com o dia na cabeça — é ele que amarra o risco à
   lista embaixo, sem passar por um número de legenda. */
.cal-regua { position: absolute; top: 0; bottom: 0; width: 0; display: block;
             border-left: 1px dashed #B3ACD2; }
.cal-regua::before {
  content: attr(data-dia); position: absolute; top: -1px; left: 0;
  transform: translateX(-50%);
  font-size: 0.6rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--cinza);
  /* o fundo abre espaço na divisa de mês quando as duas caem perto; o recuo
     lateral fica no mínimo porque 16 e 19 de outubro são três dias, e em
     900px isso é tudo o que há entre os dois números */
  background: var(--papel); padding: 1px;
}
/* a setinha embaixo do dia: dá ponta ao risco e diz para que lado ele corre.
   É mais estreita que o número, então não cria encosto novo entre vizinhos. */
.cal-regua::after {
  content: ""; position: absolute; top: 12px; left: 0;
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid #B3ACD2;
}

/* a legenda amarra a lista aos tracejados: repete o risco em miniatura e diz
   o que ele é, para as duas coisas pararem de ser duas coisas */
.cal-marcos-r { display: flex; align-items: center; gap: 0.45rem;
                margin: 1.1rem 0 0; font-size: 0.62rem; font-weight: 800;
                text-transform: uppercase; letter-spacing: 0.12em;
                color: var(--cinza); }
.cal-marcos-chave { width: 1.1rem; height: 0; flex: none;
                    border-top: 1px dashed #B3ACD2; }
.cal-marcos-eixo {
  list-style: none; margin: 0.5rem 0 0; padding: 0;
  font-size: var(--fs-xs); color: var(--cinza);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.cal-marcos-eixo li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.5rem; }
.cal-marcos-eixo b  { color: var(--tinta); font-weight: 800; }

.grupo-datas { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) 0.5rem; }
.grupo-titulo {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 800; color: var(--magenta-700); margin-bottom: 0.9rem;
}
/* o título carrega a cor do grupo num filete, não na letra: em caixa alta e
   0.75rem, várias das cores dos ODS não alcançam o contraste de texto */
.grupo-titulo--ods {
  display: flex; align-items: center; gap: 0.5rem; color: var(--tinta);
}
.grupo-titulo--ods::before {
  content: ""; width: 1.6rem; height: 4px; border-radius: 2px;
  background: var(--c); flex: none;
}
.linha-datas { list-style: none; margin: 0; padding: 0;
               display: flex; flex-direction: column; }

.marco {
  display: grid; gap: 0.35rem 1.1rem; align-items: start;
  grid-template-columns: 1fr auto;
  padding: 1rem 0 1rem 1.1rem;
  border-left: 3px solid var(--borda);
  position: relative;
}
@media (min-width: 700px) {
  .marco { grid-template-columns: 9.5rem 1fr auto; align-items: baseline; }
}

.marco-quando { grid-column: 1; }
.marco-data {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--tinta);
  display: inline-block; line-height: 1.5;
}
.marco-data .ate { color: var(--cinza-fraco); font-weight: 400; }

.marco-corpo { grid-column: 1; }
@media (min-width: 700px) { .marco-corpo { grid-column: 2; } }
.marco-t { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.marco-d { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; margin-top: 0.2rem; }

.marco-estado {
  grid-column: 2; grid-row: 1;
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; white-space: nowrap; padding: 0.25rem 0.5rem;
  align-self: start;
}
@media (min-width: 700px) { .marco-estado { grid-column: 3; } }

/* O estado vem da data corrente, e a cor da borda esquerda repete a
   informação do rótulo — quem não distingue as cores lê a palavra. */
.marco--futuro     { border-left-color: var(--borda); }
.marco--futuro .marco-estado { background: var(--superficie); color: var(--cinza); }

.marco--aberto     { border-left-color: var(--ok); }
.marco--aberto .marco-estado { background: var(--ok); color: #fff; }

.marco--urgente    { border-left-color: var(--alerta); }
.marco--urgente .marco-estado { background: var(--alerta); color: #fff; }

.marco--encerrado  { border-left-color: var(--borda); }
.marco--encerrado .marco-t,
.marco--encerrado .marco-data { color: var(--cinza-fraco); }
.marco--encerrado .marco-d { color: var(--cinza-fraco); }
.marco--encerrado .marco-estado { background: transparent; color: var(--cinza-fraco);
                                  border: 1px solid var(--borda); }

.marco--chave { border-left-color: var(--magenta-500); border-left-width: 5px; }
.marco--chave .marco-t { font-size: 1.1rem; }

.datas-nota {
  font-size: var(--fs-xs); color: var(--cinza); line-height: 1.5;
  padding-block: 2rem 3rem; max-width: 60ch;
}

/* ---------- regulamento ---------- */
.reg-aviso {
  background: #FFF4D6; border-bottom: 1px solid #E8D9A8; color: #4A3A00;
  font-size: var(--fs-sm); padding-block: 0.75rem; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  .reg-aviso { background: #3A2F0A; border-bottom-color: #5C4C15; color: #F0DFA8; }
}

.reg-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) {
  .reg-layout { grid-template-columns: 15rem 1fr; gap: 3rem; }
  .reg-indice { position: sticky; top: 68px; }
}
/* O índice vira painel: solto sobre o papel ele lia como uma lista qualquer
   perdida na margem, e não como o mapa de uma página longa. */
.reg-indice { padding-top: 2rem; }
@media (min-width: 940px) {
  .reg-indice { padding: 1.2rem 1rem 1.2rem 0.6rem;
                background: var(--superficie); border-radius: 4px; }
}

/* as duas portas de entrada, no fim do índice */
.reg-acoes { margin-top: 1.4rem; padding-top: 1.2rem;
             border-top: 1px solid var(--borda); padding-left: 0.7rem; }
.reg-acao {
  display: block; text-decoration: none; margin-bottom: 0.5rem;
  background: var(--indigo-900); color: #fff; border-radius: 4px;
  padding: 0.7rem 0.85rem;
  transition: background 140ms ease, transform 140ms ease;
}
.reg-acao:last-of-type { background: var(--papel); color: var(--tinta);
                         border: 1px solid var(--borda); }
.reg-acao:hover { background: var(--indigo-700); color: #fff; transform: translateY(-1px); }
.reg-acao:last-of-type:hover { border-color: var(--indigo-700); }
.reg-acao-t { display: block; font-size: var(--fs-sm); font-weight: 800;
              letter-spacing: -0.01em; line-height: 1.25; }
.reg-acao-d { display: block; font-size: var(--fs-xs); line-height: 1.35;
              margin-top: 0.2rem; opacity: 0.8; }
.reg-acao-prazo { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.4;
                  margin-top: 0.7rem; }
.reg-acao-prazo b { color: var(--tinta); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .reg-acao { transition: none; } }
.reg-indice-t { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em;
                font-weight: 800; color: var(--cinza); margin-bottom: 0.6rem; }
/* Índice de página longa: o número em coluna própria, para as linhas que
   quebram alinharem com o texto e não com o número. O item da seção em
   leitura é marcado pelo 2026.js. */
.indice-l { list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; }
.indice-l a {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem;
  align-items: baseline; text-decoration: none; color: var(--cinza);
  font-size: var(--fs-sm); line-height: 1.35;
  padding: 0.4rem 0.6rem 0.4rem 0;
  border-left: 2px solid transparent; padding-left: 0.7rem;
  transition: color 140ms ease, border-color 140ms ease;
}
.indice-n { font-size: 0.68rem; font-weight: 700; color: var(--cinza-fraco);
            text-align: right; }
.indice-t { text-wrap: pretty; }
.indice-l a:hover { color: var(--tinta); }
.indice-l a:hover .indice-n { color: var(--indigo-700); }

/* seção em leitura */
.indice-l a[aria-current="true"] {
  color: var(--tinta); font-weight: 700; border-left-color: var(--magenta-500);
}
.indice-l a[aria-current="true"] .indice-n { color: var(--magenta-700); }

/* na organização a coluna do número vira o ponto colorido */
.indice-l--org a { grid-template-columns: auto 1fr auto; }
.indice-l--org .indice-n { text-align: right; }

.reg-corpo { min-width: 0; padding-bottom: 3rem; }

.reg-sec { padding-block: 2.25rem; border-bottom: 1px solid var(--borda); position: relative; }
.reg-sec:last-child { border-bottom: 0; }
.reg-num {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem; font-weight: 800;
  color: #fff; background: var(--indigo-700); padding: 0.15rem 0.5rem; margin-bottom: 0.6rem;
}
.reg-sec h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.reg-sec h3 { font-size: 1rem; margin-top: 1.5rem; margin-bottom: 0.4rem; }
.reg-sec > p { max-width: 68ch; line-height: 1.6; margin-top: 0.8rem; color: var(--tinta); }
.reg-sec ul, .reg-sec ol { line-height: 1.6; }
/* lista solta dentro da seção: as demais moram em caixas que já dão o recuo */
.reg-lista { max-width: 68ch; margin-top: 0.8rem; padding-left: 1.2rem; }
.reg-lista li { margin-bottom: 0.35rem; }

.reg-nota-inline { font-size: var(--fs-sm); color: var(--cinza); max-width: 66ch;
                   line-height: 1.55; margin-top: 0.9rem; }

/* áreas */
.reg-areas { display: grid; gap: 0.7rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 700px) { .reg-areas { grid-template-columns: 1fr 1fr; } }
.reg-area { border: 1px solid var(--borda); background: var(--superficie);
            padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.reg-area-n { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; }
.reg-area-o { font-family: var(--mono); font-size: 0.62rem; color: var(--cinza);
              letter-spacing: 0.08em; text-transform: uppercase; }
.reg-area p { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; margin-top: 0.35rem; }

/* passos numerados: contador próprio, para o número virar marcador visual */
.reg-passos { list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: passo;
              display: flex; flex-direction: column; gap: 1.2rem; }
.reg-passos li { counter-increment: passo; padding-left: 2.6rem; position: relative; }
.reg-passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0;
  width: 1.85rem; height: 1.85rem; display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.8rem; font-weight: 800;
  background: var(--superficie); border: 1px solid var(--borda); color: var(--indigo-700);
}
.reg-passos h3 { margin: 0.15rem 0 0.25rem; font-size: 1rem; }
.reg-passos p { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.55; max-width: 62ch; }
.reg-passos--compacto { gap: 0.9rem; }

/* estrutura obrigatória do resumo */
.reg-estrutura { list-style: none; margin: 1.1rem 0 0; padding: 0;
                 display: flex; flex-direction: column; gap: 0; }
.reg-estrutura li { display: grid; gap: 0.15rem 1rem; grid-template-columns: 1fr;
                    padding: 0.7rem 0; border-bottom: 1px solid var(--borda);
                    font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; }
@media (min-width: 620px) { .reg-estrutura li { grid-template-columns: 11rem 1fr; align-items: baseline; } }
.reg-estrutura li:last-child { border-bottom: 0; }
.reg-estrutura b { font-size: 0.95rem; color: var(--tinta); font-weight: 800; letter-spacing: -0.01em; }

/* O orçamento de palavras é sugestão de distribuição, não limite de campo — a
   regra é o total. Por isso fica em cinza fraco e afastado do nome da parte,
   que é onde o olho o leria como exigência.
   Ele só vira coluna própria quando sobra largura: espremido entre o rótulo de
   11rem e as 7rem dele, «Estado atual do conhecimento…» caía para 120px e seis
   linhas na faixa dos 620px. Abaixo de 1000px ele desce para a linha seguinte,
   alinhado à descrição, e no estreito acompanha a coluna única. */
.reg-est-n { font-size: var(--fs-xs); color: var(--cinza-fraco);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 620px)  { .reg-est-n { grid-column: 2; } }
@media (min-width: 1000px) {
  .reg-estrutura li { grid-template-columns: 11rem 1fr 7rem; }
  .reg-est-n { grid-column: 3; grid-row: 1; text-align: right; }
}

/* alertas: o filete à esquerda repete a informação do título */
.reg-alerta { border-left: 3px solid var(--indigo-700); background: var(--superficie);
              padding: 1rem 1.1rem; margin-top: 1.4rem; }
.reg-alerta-t { font-size: 0.9rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.reg-alerta p { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.55; max-width: 66ch; }
.reg-alerta ul { margin: 0.4rem 0 0; padding-left: 1.1rem; display: flex;
                 flex-direction: column; gap: 0.35rem; }
.reg-alerta li { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; max-width: 64ch; }
.reg-alerta strong { color: var(--tinta); }
.reg-alerta--nao { border-left-color: #C5192D; }
.reg-alerta--forte { border-left-color: var(--magenta-500); }

/* obrigatoriedade por área */
.reg-obrig { margin: 1.1rem 0 0; display: flex; flex-direction: column; gap: 1.2rem; }
.reg-obrig-area h4 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
                     font-size: 0.95rem; font-weight: 800; }
.reg-obrig-pend { font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
                  letter-spacing: 0.08em; color: #8A5B00; background: #FFF4D6;
                  padding: 0.15rem 0.4rem; }
@media (prefers-color-scheme: dark) {
  .reg-obrig-pend { color: #F0DFA8; background: #3A2F0A; }
}
.reg-obrig-area ul { margin: 0.45rem 0 0; padding-left: 1.1rem;
                     display: flex; flex-direction: column; gap: 0.35rem; }
.reg-obrig-area li { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5;
                     max-width: 70ch; }

/* contatos */
.reg-contatos { display: grid; gap: 0.7rem; grid-template-columns: 1fr; margin-top: 1.1rem; }
@media (min-width: 700px) { .reg-contatos { grid-template-columns: 1fr 1fr; } }
.reg-contato { border: 1px solid var(--borda); padding: 0.9rem 1rem;
               display: flex; flex-direction: column; gap: 0.1rem; }
.reg-contato-a { font-size: var(--fs-xs); color: var(--cinza); text-transform: uppercase;
                 letter-spacing: 0.08em; font-weight: 700; }
.reg-contato-t { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.reg-contato-o { font-family: var(--mono); font-size: 0.62rem; color: var(--cinza-fraco);
                 letter-spacing: 0.08em; }

/* ---------- organização ---------- */
.org-aviso {
  background: #FFF4D6; border-bottom: 1px solid #E8D9A8; color: #4A3A00;
  font-size: var(--fs-sm); padding-block: 0.75rem; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  .org-aviso { background: #3A2F0A; border-bottom-color: #5C4C15; color: #F0DFA8; }
}

.org-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) {
  .org-layout { grid-template-columns: 15rem 1fr; gap: 3rem; }
  .org-layout .reg-indice { position: sticky; top: 68px; }
}
.org-corpo { min-width: 0; padding-bottom: 3rem; }

.org-sec { padding-block: 2rem; border-bottom: 1px solid var(--borda); }
.org-sec:last-of-type { border-bottom: 0; }
.org-sec-topo { display: flex; align-items: baseline; gap: 0.6rem; }
.org-sec h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.org-conta { font-size: 0.75rem; color: var(--cinza-fraco); font-weight: 700; }
.org-faz { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.55;
           max-width: 62ch; margin-top: 0.4rem; }

.org-gente { list-style: none; margin: 1.2rem 0 0; padding: 0;
             display: grid; gap: 1rem 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .org-gente { grid-template-columns: 1fr 1fr; } }
/* sem filete por pessoa: ao lado do filete da comissão viravam dois traços
   paralelos repetidos 37 vezes. O espaçamento já separa os nomes. */
.org-pessoa { padding: 0.15rem 0; display: flex; flex-direction: column; gap: 0.1rem; }
.org-nome { font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em;
            line-height: 1.3; }
.org-cargo { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.4; }
.org-unidade { font-family: var(--mono); font-size: 0.6rem; color: var(--cinza-fraco);
               letter-spacing: 0.08em; margin-top: 0.15rem; }
/* marcador de quem atua em mais de uma comissão: um ponto na cor de acento,
   colado ao nome. A informação exata fica no title e no aria-label. */
.org-multi { color: var(--magenta-500); font-weight: 800; cursor: help;
             margin-left: 0.15rem; }
.org-nota { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.55;
            padding-block: 2rem 0; max-width: 60ch; }

/* casinha: separada do resto por um filete, porque é atalho e não seção */
.nav-casa { padding-inline: 0.75rem; margin-right: 0.35rem;
            border-right: 1px solid rgba(255,255,255,0.14); }
.nav-casa svg { display: block; }

/* ---------- página "A JIEPE" ---------- */
.sobre { padding-bottom: 3rem; }
.sobre-bloco { padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
               border-bottom: 1px solid var(--borda); }
.sobre-bloco:last-child { border-bottom: 0; }
.sobre-bloco h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.sobre-bloco > p { max-width: 68ch; line-height: 1.65; margin-top: 0.9rem; }

.sobre-lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.5;
              font-weight: 500; max-width: 62ch; margin-top: 0 !important; }

.sobre-fatos { display: grid; gap: 0.7rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 700px) { .sobre-fatos { grid-template-columns: repeat(3, 1fr); } }
.sobre-fato { border-left: 3px solid var(--magenta-500); padding: 0.5rem 0 0.5rem 0.85rem;
              display: flex; flex-direction: column; gap: 0.1rem; }
.sobre-fato-r { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em;
                font-weight: 800; color: var(--cinza); }
.sobre-fato-v { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

.sobre-intro { font-size: var(--fs-sm); color: var(--cinza); max-width: 62ch;
               line-height: 1.55; margin-top: 0.6rem !important; }

.sobre-areas { display: grid; gap: 0.8rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 760px) { .sobre-areas { grid-template-columns: 1fr 1fr; } }
.sobre-area { border: 1px solid var(--borda); background: var(--superficie);
              padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sobre-area h3 { font-size: 1.05rem; }
.sobre-area p { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.55; }
.sobre-obrig { border-left: 2px solid var(--magenta-500); padding-left: 0.75rem;
               margin-top: 0.15rem; }
.sobre-obrig strong { color: var(--tinta); }

.sobre-bloco--fecho > p { color: var(--cinza); }

/* tema e ODS na página "A JIEPE" */
.sobre-tema-frase {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.25; max-width: 26ch;
  margin-top: 0.9rem !important;
}
.sobre-tema-frase em { font-style: normal; font-weight: 500; color: var(--cinza); display: block; }

.sobre-ods-dado {
  display: grid; gap: 0.4rem 1.2rem; grid-template-columns: 1fr;
  align-items: start; margin-top: 1.5rem;
  border-left: 3px solid var(--magenta-500); padding: 0.9rem 0 0.9rem 1.1rem;
}
@media (min-width: 620px) { .sobre-ods-dado { grid-template-columns: auto 1fr; } }
.sobre-ods-n { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800;
               letter-spacing: -0.04em; line-height: 0.9; color: var(--indigo-700); }
.sobre-ods-dado p:last-child { font-size: var(--fs-sm); color: var(--cinza);
                               line-height: 1.55; max-width: 56ch; }
.sobre-nota { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.55;
              max-width: 62ch; margin-top: 1.2rem !important; }

/* ---------- anais ---------- */
.anais-panorama { background: var(--indigo-900); color: #fff;
                  padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.anais-resumo { display: grid; gap: 0.75rem 2rem; grid-template-columns: 1fr;
                align-items: end; margin-bottom: 1.6rem; }
@media (min-width: 700px) { .anais-resumo { grid-template-columns: auto 1fr; } }
.anais-grande { display: flex; flex-direction: column; gap: 0.1rem; }
.anais-n { font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 800;
           letter-spacing: -0.045em; line-height: 0.9; color: #fff; }
.anais-n-r { font-size: var(--fs-sm); color: #C9CBF2; }
.anais-legenda { font-size: var(--fs-xs); color: #A8ABE0; line-height: 1.5; max-width: 40ch; }
.anais-legenda strong { color: #fff; }

/* o gráfico é a própria malha: um quadrado = 20 trabalhos */
.anais-linhas { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: 0.3rem; }
.anais-linha { display: grid; grid-template-columns: 3rem 1fr 2.6rem;
               gap: 0.75rem; align-items: center; }
.anais-ano { font-size: 0.72rem; font-weight: 700; color: #A8ABE0; }
.anais-barra { display: flex; gap: 2px; flex-wrap: nowrap; overflow: hidden; }
.anais-barra i { width: 11px; height: 11px; flex: none; display: block; }
.anais-qtd { font-size: 0.7rem; color: #C9CBF2; text-align: right; }
@media (max-width: 560px) {
  .anais-barra i { width: 7px; height: 7px; }
  .anais-linha { grid-template-columns: 2.6rem 1fr 2.2rem; gap: 0.5rem; }
}

.anais-sec { padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--borda); }
.anais-sec:last-child { border-bottom: 0; }
.anais-sec h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.anais-intro { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.55;
               max-width: 62ch; margin-top: 0.5rem; }

.anais-grade { list-style: none; margin: 1.4rem 0 0; padding: 0;
               display: grid; gap: 0.7rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .anais-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .anais-grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .anais-grade { grid-template-columns: repeat(4, 1fr); } }
.anais-card { border: 1px solid var(--borda); padding: 1rem 1.1rem 1.1rem;
              display: flex; flex-direction: column; gap: 0.25rem; }
.anais-card-topo { display: flex; align-items: baseline; gap: 0.5rem; }
.anais-card-ano { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; }
.anais-card-ed { font-size: var(--fs-xs); color: var(--cinza); font-weight: 700;
                 text-transform: uppercase; letter-spacing: 0.08em; }
.anais-card-n { font-size: var(--fs-sm); color: var(--cinza); }
.anais-card-n .num { font-weight: 700; color: var(--tinta); }
.anais-acesso {
  margin-top: 0.7rem; align-self: flex-start; font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
  color: var(--indigo-700); border-bottom: 2px solid var(--indigo-700); padding-bottom: 1px;
}
.anais-acesso:hover { color: var(--magenta-700); border-bottom-color: var(--magenta-700); }
.anais-acesso--pdf { color: var(--cinza); border-bottom-color: var(--cinza-fraco); }

.anais-citacao { border-left: 3px solid var(--magenta-500); background: var(--superficie);
                 padding: 0.9rem 1.1rem; margin-top: 1.1rem; }
.anais-cit-r { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em;
               font-weight: 800; color: var(--cinza); margin-bottom: 0.3rem; }
.anais-cit-t { font-size: var(--fs-sm); line-height: 1.6; max-width: 74ch; }
.anais-cit-t em { font-style: italic; }
.anais-nota { font-size: var(--fs-xs); color: var(--cinza); margin-top: 0.9rem; }

.anais-proxima { display: grid; gap: 1.1rem; grid-template-columns: 1fr; align-items: center;
                 border: 1px solid var(--borda); background: var(--superficie);
                 padding: 1.4rem 1.5rem; }
@media (min-width: 760px) { .anais-proxima { grid-template-columns: 1fr auto; gap: 2rem; } }
.anais-proxima p { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.55;
                   max-width: 58ch; margin-top: 0.5rem; }
.anais-sec--proxima { border-bottom: 0; }

/* menu de edições: número da edição em destaque, ano como referência */
.nav-menu a { display: flex; align-items: baseline; gap: 0.3rem; white-space: nowrap; }
.nav-menu a b { font-weight: 800; }
.nav-menu a span { font-family: var(--mono); font-size: 0.9em; opacity: 0.6; }
.nav-menu-todas { border-top: 1px solid rgba(255,255,255,0.18);
                  font-size: 0.64rem !important; opacity: 0.85; }

/* ---------- faixa de apoiadores (rodapé de todas as páginas) ---------- */
/* branco, e não o lilás das outras faixas: é aqui que as marcas dos apoiadores
   vivem, e marca institucional pede fundo claro e neutro pelos manuais de uso */
.apoio { background: #fff; border-top: 1px solid var(--borda); }
.apoio-r { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em;
           font-weight: 800; color: var(--cinza); }

/* A faixa é vitrine: título e marcas centralizados, nada de texto corrido.
   O convite com as cotas saiu daqui — vive na página de patrocínio. */
.apoio-marcas { padding-block: clamp(1.75rem, 3.5vw, 2.6rem); text-align: center; }
.apoio-fau { height: 64px; width: auto; margin-top: 1.1rem; }
@media (min-width: 620px) { .apoio-fau { height: 88px; } }

/* com apoiadores: duas linhas, tamanho pela cota */
.apoio-linha { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex;
               flex-wrap: wrap; gap: 1.75rem 2.5rem; align-items: center;
               justify-content: center; }
.apoio-linha--destaque { gap: 2rem 3rem; }
.apoio-marca { display: inline-flex; align-items: center; text-decoration: none; }
.apoio-marca img { max-height: 44px; width: auto; }
.apoio-linha--destaque .apoio-marca img { max-height: 68px; }
.apoio-nome { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em;
              color: var(--tinta); }
.apoio-linha--destaque .apoio-nome { font-size: 1.3rem; }

/* ---------- página de patrocínio ---------- */
.pat-sec { padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--borda); }
.pat-sec--fim { border-bottom: 0; }
.pat-sec h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.pat-intro { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.6;
             max-width: 66ch; margin-top: 0.6rem; }
.pat-intro strong { color: var(--tinta); }

.pat-destino { display: grid; gap: 0.8rem; grid-template-columns: 1fr; margin-top: 1.2rem; }
@media (min-width: 760px) { .pat-destino { grid-template-columns: 1fr 1fr; } }
.pat-destino-c { border-left: 3px solid var(--magenta-500); padding: 0.6rem 0 0.6rem 1rem; }
.pat-destino-c h3 { font-size: 1rem; }
.pat-destino-c p { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.55;
                   margin-top: 0.3rem; }

.pat-grade { display: grid; gap: 0.8rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 700px) { .pat-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .pat-grade { grid-template-columns: repeat(4, 1fr); } }
.pat-grade--dupla { grid-template-columns: 1fr; }
@media (min-width: 700px) { .pat-grade--dupla { grid-template-columns: 1fr 1fr; } }

.pat-cota { border: 1px solid var(--borda); padding: 1.2rem 1.3rem 1.3rem;
            display: flex; flex-direction: column; gap: 0.3rem; position: relative; }
.pat-cota--max { border-color: var(--magenta-500); border-width: 2px; }
.pat-selo { position: absolute; top: -0.62rem; left: 1.2rem;
            background: var(--magenta-500); color: #12122B; font-size: 0.58rem;
            font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
            padding: 0.2rem 0.5rem; }
.pat-cota h3 { font-size: 1rem; line-height: 1.25; }
.pat-valor { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em;
             color: var(--indigo-700); }
.pat-resumo { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.5; }
.pat-itens { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex;
             flex-direction: column; gap: 0.3rem; }
.pat-itens li { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.4;
                padding-left: 0.85rem; position: relative; }
.pat-itens li::before { content: ""; position: absolute; left: 0; top: 0.42em;
                        width: 5px; height: 5px; background: var(--cinza-fraco); }
.pat-site--max  { color: var(--magenta-700) !important; font-weight: 700; }
.pat-site--max::before  { background: var(--magenta-500) !important; }
.pat-site--sim::before  { background: var(--indigo-700) !important; }
.pat-site--prog::before { background: var(--cinza) !important; }
.pat-site--nao  { color: var(--cinza-fraco) !important; }

.pat-visib { margin: 1.2rem 0 0; padding-left: 1.1rem; display: flex;
             flex-direction: column; gap: 0.45rem; }
.pat-visib li { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; }
.pat-visib strong { color: var(--tinta); }

.pat-contato { border-left: 3px solid var(--indigo-700); background: var(--superficie);
               padding: 1rem 1.2rem; margin-top: 1.6rem; }
.pat-contato-r { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em;
                 font-weight: 800; color: var(--cinza); }
.pat-contato-v { font-size: 1.05rem; font-weight: 700; margin-top: 0.15rem; }
.pat-contato-v--pendente { font-size: var(--fs-sm); font-weight: 400; color: var(--cinza); }
.pat-contato-a { font-size: var(--fs-xs); color: var(--cinza); margin-top: 0.5rem; }

.rodape-acervo { font-size: var(--fs-xs); color: #A8ABE0; line-height: 1.45;
                 max-width: 20ch; margin-bottom: 0.7rem; }
.rodape-acervo .num { display: block; font-size: 1.6rem; font-weight: 800;
                      letter-spacing: -0.03em; color: #fff; line-height: 1; }

/* ---------- programação, enquanto a grade não existe ---------- */
.prog-quadro { display: grid; gap: 0.8rem; grid-template-columns: 1fr;
               padding-block: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
@media (min-width: 760px) { .prog-quadro { grid-template-columns: repeat(3, 1fr); } }
.prog-bloco { border-top: 3px solid var(--magenta-500); padding-top: 0.9rem; }
.prog-rot { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em;
            font-weight: 800; color: var(--cinza); }
.prog-forte { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800;
              letter-spacing: -0.025em; line-height: 1.15; margin-top: 0.3rem; }
.prog-d { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5;
          margin-top: 0.35rem; max-width: 34ch; }

.prog-espera { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }

/* A faixa da espera: as vagas acendendo, na estética da malha do topo. Ocupa
   a largura inteira porque é peça de página, não ilustração ao lado de um
   texto — e porque dentro de uma coluna «auto» o width em porcentagem
   resolvia contra largura indefinida e a faixa sumia.
   A ordem de entrada é embaralhada: preenchimento em varredura pareceria
   distribuição automática, e a grade nasce de escolhas independentes. */
.prog-grade {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; width: 100%;
}
@media (max-width: 700px) { .prog-grade { grid-template-columns: repeat(12, 1fr); } }
/* a vaga vazia precisa se ver: em --borda sobre o papel ela sumia, e a peça
   deixava de ler como grade antes mesmo de acender */
.prog-grade i {
  aspect-ratio: 1; display: block; border-radius: 2px;
  background: #D9D5EC;
  animation: prog-vaga 9s ease-in-out infinite;
}
/* acende na cor do Selo ODS que a vaga recebeu, do mesmo arquivo que dá cor à
   malha e à régua — a faixa é a paleta dos 17, como o resto do site */
@keyframes prog-vaga {
  0%, 6%    { background: #D9D5EC; transform: scale(0.82); }
  14%, 62%  { background: var(--c, var(--indigo-700)); transform: scale(1); }
  78%, 100% { background: #D9D5EC; transform: scale(0.82); }
}
/* quem pediu menos movimento vê a grade cheia, que é o estado final */
@media (prefers-reduced-motion: reduce) {
  .prog-grade i { animation: none; background: var(--c, var(--indigo-700)); transform: none; }
}

/* ---------- a página dos ODS ---------- */
.ods-texto { max-width: 64ch; }
.ods-texto p { margin-bottom: 0.9rem; }
.ods-texto-nota { font-size: var(--fs-sm); color: var(--cinza); }
/* o aviso sobre a origem dos números: é ressalva, não corpo de texto, mas
   precisa ser lido antes das fichas — daí a caixa em vez de nota de rodapé */
.ods-aviso {
  font-size: var(--fs-sm); line-height: 1.55; margin-top: 1rem;
  background: var(--superficie); border-left: 3px solid var(--indigo-700);
  padding: 0.9rem 1rem;
}
.ods-aviso b { font-weight: 800; }

/* os cinco eixos: cartões largos, porque a leitura aqui é de orientação —
   a pessoa está procurando por onde entrar, não comparando */
.ods-eixos { list-style: none; margin: 1.2rem 0 0; padding: 0;
             display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .ods-eixos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .ods-eixos { grid-template-columns: repeat(3, 1fr); } }
.ods-eixo { border: 1px solid var(--borda); background: var(--papel);
            padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.ods-eixo h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.ods-eixo p  { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; }
.ods-eixo-selos { list-style: none; margin: 0.9rem 0 0; padding: 0;
                  display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ods-eixo-selos img { width: 42px; height: 42px; display: block; }
.ods-eixo-selos a { display: block; border-radius: 2px; }
.ods-eixo-selos a:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }

/* as fichas: uma por objetivo, com o selo à esquerda e o filete na cor dele */
.ods-fichas { list-style: none; margin: 1.2rem 0 0; padding: 0;
              display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ods-fichas { grid-template-columns: 1fr 1fr; } }
.ods-ficha {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  align-items: start; border: 1px solid var(--borda);
  border-top: 3px solid var(--c, var(--borda));
  background: var(--papel); padding: 1.1rem 1.2rem;
  scroll-margin-top: 5rem;   /* o menu fica fixo no topo */
}
.ods-ficha-selo img { width: 64px; height: 64px; display: block; }
.ods-ficha h3 { font-size: 1.05rem; line-height: 1.25; margin-bottom: 0.4rem; }
/* o número na cor do objetivo, já no tom escurecido que passa em texto */
.ods-ficha-n { display: block; font-size: var(--fs-xs); font-weight: 800;
               letter-spacing: 0.06em; text-transform: uppercase;
               color: var(--ct, var(--cinza)); }
.ods-ficha-e { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; }
/* a frase que faz a página existir ganha fundo: é o que a pessoa veio ler */
.ods-ficha-cabe {
  font-size: var(--fs-sm); line-height: 1.5; margin-top: 0.7rem;
  background: var(--superficie); padding: 0.7rem 0.8rem; border-radius: 3px;
}
.ods-ficha-cabe b { font-weight: 800; }
.ods-ficha-dado { font-size: var(--fs-xs); color: var(--cinza); margin-top: 0.7rem; }
.ods-ficha-dado b { color: var(--tinta); font-weight: 800; }
.ods-ficha-dado span { margin: 0 0.4rem; color: var(--cinza-fraco); }
.ods-ficha-ex { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.45;
                margin-top: 0.35rem; }
.ods-ficha-ex span { display: block; font-weight: 800; color: var(--cinza-fraco);
                     text-transform: uppercase; letter-spacing: 0.08em;
                     font-size: 0.62rem; margin-bottom: 0.1rem; }
/* Vocabulário: quadro para bater o olho, não texto para ler. Em duas colunas
   a partir de 640px — quatro definições curtas empilhadas viravam uma lista
   comprida, que é justamente o que este bloco existe para evitar. */
.ods-vocab { margin: 1.1rem 0 0; display: grid; gap: 0.75rem 1.6rem;
             grid-template-columns: 1fr; }
@media (min-width: 640px) { .ods-vocab { grid-template-columns: 1fr 1fr; } }
.ods-vocab > div { border-left: 3px solid var(--borda); padding-left: 0.8rem; }
.ods-vocab dt { font-size: var(--fs-sm); font-weight: 800; letter-spacing: -0.01em; }
.ods-vocab dt span { font-weight: 600; color: var(--cinza-fraco); }
.ods-vocab dd { margin: 0.15rem 0 0; font-size: var(--fs-xs);
                color: var(--cinza); line-height: 1.45; }

/* saída para as metas do objetivo, no rodapé da ficha: fica depois do exemplo
   porque é referência, não parte de escolher o ODS do próprio trabalho */
.ods-ficha-metas { margin-top: 0.6rem; font-size: var(--fs-xs); }
.ods-ficha-metas a { color: var(--indigo-700); text-decoration: underline;
                     text-decoration-color: var(--borda);
                     text-underline-offset: 2px; font-weight: 700;
                     transition: text-decoration-color 180ms ease; }
.ods-ficha-metas a:hover { text-decoration-color: currentColor; }


.ods-fontes { list-style: none; margin: 1rem 0 0; padding: 0;
              display: flex; flex-direction: column; gap: 0.7rem; max-width: 70ch; }
.ods-fontes a { font-weight: 700; }
.ods-fontes span { display: block; font-size: var(--fs-sm); color: var(--cinza);
                   line-height: 1.45; }

/* ---------- explicação dos ODS na home ---------- */
.ods-ponte { font-size: clamp(1rem, 1.8vw, 1.15rem); font-weight: 600;
             line-height: 1.5; max-width: 54ch; margin-bottom: 1.4rem; }

/* grid-auto-rows: 1fr iguala as duas fileiras da página, e os clamps abaixo
   igualam os cartões entre si — sem isso cada página fica com a altura do seu
   cartão mais alto, o trilho assume a da página mais alta, e as demais deixam
   um vão embaixo. */
.ods-pares { list-style: none; margin: 0; padding: 0;
             display: grid; gap: 0.8rem; grid-template-columns: 1fr;
             grid-auto-rows: 1fr; }
@media (min-width: 680px)  { .ods-pares { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .ods-pares { grid-template-columns: repeat(3, 1fr); } }

.ods-par { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
           align-items: start; border: 1px solid var(--borda);
           padding: 1rem 1.1rem; background: var(--papel); }
/* o filete superior repete a cor do objetivo: liga o cartão à régua do topo */
/* o filete superior repete a cor do objetivo, que vem na variável --c
   definida no próprio cartão */
.ods-par { border-top: 3px solid var(--c, var(--borda)); }
.ods-par-selo { width: 52px; height: 52px; flex: none; display: block; }
.ods-par-selo img { width: 100%; height: 100%; display: block; }

/* o problema vem primeiro, em linguagem comum; o título acadêmico depois, e a
   autoria por último. Os títulos reais têm tamanho irregular, e o clamp
   mantém a grade no compasso sem cortar nenhum no meio de uma palavra. */
/* Cada bloco com um número fixo de linhas: é o que faz todos os cartões terem
   a mesma altura, e todas as páginas do carrossel também.
   A manchete desceu de 0,95 para 0,82rem para o título caber inteiro embaixo:
   ele vai a 182 caracteres, e cortá-lo perdia o fim, que é justamente onde o
   trabalho costuma dizer onde foi feito e com quem. */
.ods-par-p { font-size: 0.82rem; font-weight: 800; letter-spacing: -0.015em;
             line-height: 1.3; min-height: 2.6em;
             display: -webkit-box; -webkit-line-clamp: 2;
             -webkit-box-orient: vertical; overflow: hidden; }
/* o objetivo, na cor dele. A cor oficial do selo é feita para preencher um
   quadrado, não para escrever: em letra pequena o amarelo do ODS 7 dá 1,6:1 e
   some. O --ct é a mesma cor escurecida até 4,5:1 — mantém o matiz, que é o
   que faz reconhecer o objetivo, e fica legível. */
.ods-par-o { font-size: 0.68rem; font-weight: 800; line-height: 1.3;
             letter-spacing: 0.02em; color: var(--ct, var(--cinza));
             margin-top: 0.2rem; min-height: 2.6em;
             display: -webkit-box; -webkit-line-clamp: 2;
             -webkit-box-orient: vertical; overflow: hidden; }
/* cinco linhas cobrem o título mais longo da vitrine, 182 caracteres, com
   folga — o clamp fica como rede de segurança para quando a base mudar */
.ods-par-t { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.45;
             margin-top: 0.3rem; min-height: 7.25em;
             display: -webkit-box; -webkit-line-clamp: 5;
             -webkit-box-orient: vertical; overflow: hidden; }
/* a autoria fica colada no rodapé do cartão: com o auto no topo, títulos
   curtos e longos terminam na mesma linha de base */
.ods-par-a { font-size: var(--fs-xs); color: var(--tinta); line-height: 1.4;
             margin-top: auto; padding-top: 0.5rem; font-weight: 600; }
.ods-par > div { display: flex; flex-direction: column; height: 100%; }
.ods-par-a span { display: block; font-weight: 400; color: var(--cinza-fraco); }

/* ---- a vitrine ----
   Seis trabalhos por página, e as páginas rolam na horizontal com encaixe.
   Sem JS ainda dá para arrastar; os botões só somam controle a quem usa
   teclado ou não pensa em arrastar. */
.vitrine { position: relative; }
.vitrine-trilho {
  list-style: none; margin: 0; padding: 0; display: flex;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; gap: 1.5rem;
}
.vitrine-trilho::-webkit-scrollbar { display: none; }
.vitrine-trilho:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 3px; }
.vitrine-pagina { flex: 0 0 100%; scroll-snap-align: start; }

.vitrine-nav { display: flex; align-items: center; gap: 0.6rem;
               margin-top: 1rem; justify-content: flex-end; }
.vitrine-b {
  font: inherit; font-size: 1rem; line-height: 1; width: 44px; height: 44px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--tinta);
  cursor: pointer; border-radius: 50%;
}
.vitrine-b:hover:not(:disabled) { border-color: var(--indigo-700); color: var(--indigo-700); }
.vitrine-b:disabled { opacity: 0.35; cursor: default; }
.vitrine-pos { font-size: var(--fs-xs); color: var(--cinza);
               font-variant-numeric: tabular-nums; min-width: 5ch; text-align: center; }

@media (prefers-reduced-motion: reduce) { .vitrine-trilho { scroll-behavior: auto; } }

/* ---- a faixa de assuntos ----
   Corre em linha, como uma frase, na ordem da frequência nos títulos — não é
   nuvem embaralhada, e o embaralhamento das nuvens é enfeite que atrapalha
   ler. O corpo de cada palavra vem da frequência (1 a 2rem, em raiz, porque a
   área do texto cresce com o quadrado do corpo). */
/* a legenda que dá nome à faixa: sem ela as palavras não dizem de onde vêm */
.ods-nuvem-r { margin-top: 1.3rem; font-size: 0.62rem; font-weight: 800;
               text-transform: uppercase; letter-spacing: 0.14em; color: var(--cinza); }
.ods-nuvem {
  list-style: none; margin: 0.55rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.2rem 0.9rem; line-height: 1.4;
  font-weight: 800; letter-spacing: -0.02em;
}
/* Rampa do índigo ao magenta da marca, na ordem da frequência — as duas cores
   que a identidade já usa, atravessando o violeta no meio.
   Não é a cor do ODS de cada palavra: medida a liderança, oito das dezoito
   empatam entre dois objetivos, «saúde» lidera por só 1,6x, e o corpus é tão
   concentrado em educação e saúde que a paleta colapsaria em duas cores com
   um terço da faixa em cinza.
   O contraste se resolve sozinho porque corpo e cor sobem juntos: o magenta
   vivo (3,8:1) só alcança as palavras grandes, onde em negrito acima de
   18,66px vale o limite de texto grande, 3:1. As pequenas ficam perto do
   índigo, que dá 9,2:1. */
.ods-nuvem li {
  color: var(--indigo-700);
  color: color-mix(in oklab, var(--magenta-500) var(--m, 0%), var(--indigo-700));
}
/* o ponto separa sem virar pontuação de frase */
.ods-nuvem li + li::before {
  content: "·"; color: var(--borda); margin-right: 0.9rem;
  font-weight: 400;
}

.ods-fecho { display: grid; gap: 0.8rem 1.5rem; grid-template-columns: 1fr;
             align-items: start; margin-top: 1.6rem;
             border-left: 3px solid var(--magenta-500); padding: 1.1rem 0 1.1rem 1.2rem; }
@media (min-width: 620px) { .ods-fecho { grid-template-columns: auto 1fr; } }
.ods-fecho-n { font-size: clamp(2.4rem, 5.5vw, 3.4rem); font-weight: 800;
               letter-spacing: -0.045em; line-height: 0.85; color: var(--indigo-700); }
.ods-fecho-t { font-size: 1.05rem; font-weight: 600; line-height: 1.4; max-width: 46ch; }
.ods-fecho-d { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.55;
               max-width: 60ch; margin-top: 0.5rem; }
.ods-fecho-l { display: inline-block; margin-top: 1.3rem; font-size: var(--fs-xs);
               font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
               color: var(--indigo-700); text-decoration: none;
               border-bottom: 2px solid currentColor; padding-bottom: 1px; }

/* cor do objetivo como marcador da comissão */
.org-ponto { width: 9px; height: 9px; display: block; flex: none; align-self: center; }

.org-sec { position: relative; padding-left: 1.1rem; }
.org-faixa { position: absolute; left: 0; top: 2rem; bottom: 2rem; width: 4px;
             background: var(--c, var(--borda)); display: block; }
.org-sec-topo h2 { color: var(--tinta); }

/* ---------- bloco do Hub JIEPE ---------- */
.hub { background: var(--indigo-900); color: #fff;
       border-bottom: 1px solid rgba(255,255,255,0.12); }
.hub-linha { padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
             display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 820px) { .hub-linha { grid-template-columns: 1.6fr minmax(15rem, 20rem);
                                         gap: 2.5rem; } }
.hub-r { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em;
         font-weight: 800; color: var(--magenta-400); }
.hub-t { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-top: 0.3rem; }
.hub-d { font-size: var(--fs-sm); color: #C9CBF2; line-height: 1.6;
         max-width: 60ch; margin-top: 0.6rem; }
.hub-itens { list-style: none; margin: 1rem 0 0; padding: 0;
             display: grid; gap: 0.35rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .hub-itens { grid-template-columns: 1fr 1fr; } }
.hub-itens li { font-size: var(--fs-xs); color: #A8ABE0; line-height: 1.4;
                padding-left: 0.9rem; position: relative; }
.hub-itens li::before { content: ""; position: absolute; left: 0; top: 0.45em;
                        width: 5px; height: 5px; background: var(--magenta-500); }
/* A porta: painel magenta ocupando a coluna inteira. A seta avança no
   hover — o único movimento do bloco, e ele diz "leva para fora daqui". */
.hub-porta {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.15rem; text-decoration: none; color: #12122B;
  background: var(--magenta-500);
  padding: 1.4rem 1.5rem 1.3rem; min-height: 11rem;
  transition: background 180ms ease;
}
.hub-porta:hover { background: var(--magenta-400); }
.hub-porta-r { font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
               letter-spacing: 0.16em; opacity: 0.7; }
.hub-porta-t { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800;
               letter-spacing: -0.035em; line-height: 1; margin-top: 0.2rem; }
.hub-porta-d { font-size: var(--fs-xs); line-height: 1.4; margin-top: 0.5rem;
               max-width: 24ch; opacity: 0.82; }
.hub-porta-seta { display: block; margin-top: 1rem;
                  transition: transform 220ms cubic-bezier(.22,.61,.36,1); }
.hub-porta:hover .hub-porta-seta { transform: translateX(8px); }
@media (prefers-reduced-motion: reduce) { .hub-porta-seta { transition: none; } }
.hub-alerta { font-size: var(--fs-xs); color: #C9CBF2; line-height: 1.5;
              max-width: 56ch; margin-top: 1rem; padding-left: 0.85rem;
              border-left: 2px solid var(--magenta-500); }
.hub-alerta strong { color: #fff; }

/* ---------- a série do acervo no tempo (página de anais) ----------
   Uma linha, uma cor: a --magenta-500, que a paleta reserva para gráfico e
   passa no validador contra o papel (banda de luminosidade, piso de croma,
   contraste ≥ 3:1). Série única não leva legenda — o título já diz o que
   está plotado — e o rótulo direto aparece só no recorde e no menor ano.
   Marcas finas, grade em fio sólido de 1px: o dado é a única coisa forte. */
.serie { margin: 1.2rem 0 0; position: relative; }
.serie-rolo { overflow-x: auto; overflow-y: hidden; }
/* a largura mínima é o que salva os rótulos: abaixo dela o texto do SVG
   encolhe junto com o desenho e deixa de ser legível */
.serie-svg { display: block; width: 100%; min-width: 720px; height: auto; }

.serie-grade line { stroke: var(--borda); stroke-width: 1; }
.serie-tick { fill: var(--cinza-fraco); font-family: var(--mono); font-size: 13px;
              font-variant-numeric: tabular-nums; text-anchor: end; }
.serie-ano  { fill: var(--cinza); font-family: var(--mono); font-size: 13px;
              font-variant-numeric: tabular-nums; }
/* texto nunca veste a cor do dado: o valor fica na tinta, e a cor está na marca */
.serie-marca { fill: var(--tinta); font-family: var(--mono); font-size: 15px;
               font-weight: 800; font-variant-numeric: tabular-nums; }

.serie-linha { fill: none; stroke: var(--magenta-500); stroke-width: 2;
               stroke-linejoin: round; stroke-linecap: round; }
/* o lavado vive no fill-opacity, que também é o atributo do SVG e por isso
   sobrevive sem CSS; o opacity fica livre para a animação, senão os dois se
   multiplicam e a área some */
.serie-area  { fill: var(--magenta-500); }
/* anel de 2px na cor do papel: o ponto continua legível onde cruza a linha */
.serie-ponto { fill: var(--magenta-500); stroke: var(--papel); stroke-width: 2; }

.serie-cruz  { stroke: var(--cinza-fraco); stroke-width: 1; opacity: 0; }
.serie.ativa .serie-cruz { opacity: 1; }

.serie-alvo { fill: transparent; cursor: pointer; }
.serie-alvo:focus { outline: none; }
.serie-alvo:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; }
.serie-ponto.destaque { r: 6; }

/* A entrada: a linha se desenha da esquerda para a direita e os pontos pousam
   em sequência. É o gesto que a série descreve — o tempo passando — e não
   enfeite. Só dispara quando o gráfico entra na tela, uma vez. */
.serie-linha { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); }
.serie-area, .serie-ponto, .serie-marca { opacity: 0; }
.serie.desenhando .serie-linha { transition: stroke-dashoffset 1.5s cubic-bezier(.22,.61,.36,1);
                                 stroke-dashoffset: 0; }
.serie.desenhando .serie-area  { transition: opacity .6s ease .9s; opacity: 1; }
.serie.desenhando .serie-ponto { transition: opacity .35s ease calc(0.25s + var(--i) * 0.11s);
                                 opacity: 1; }
.serie.desenhando .serie-marca { transition: opacity .5s ease 1.5s; opacity: 1; }

/* Sem animação, o gráfico já nasce pronto: quem pede menos movimento recebe o
   mesmo dado, não uma versão pela metade. */
@media (prefers-reduced-motion: reduce) {
  .serie-linha { stroke-dashoffset: 0 !important; }
  .serie-area  { opacity: 1 !important; }
  .serie-ponto, .serie-marca { opacity: 1 !important; }
  .serie.desenhando .serie-linha,
  .serie.desenhando .serie-area,
  .serie.desenhando .serie-ponto,
  .serie.desenhando .serie-marca { transition: none; }
}

/* a dica: o valor manda, o rótulo acompanha */
.serie-dica { position: absolute; top: 0; left: 0; pointer-events: none;
              background: var(--tinta); color: var(--papel);
              padding: 0.45rem 0.7rem; border-radius: 3px;
              transform: translate(-50%, -125%); white-space: nowrap; z-index: 2; }
.serie-dica[hidden] { display: none; }
.serie-dica-n { font-size: 1.05rem; font-weight: 800; line-height: 1.1;
                font-variant-numeric: tabular-nums; }
.serie-dica-r { font-size: var(--fs-xs); opacity: 0.75; margin-top: 0.1rem; }

.serie-legenda { font-size: var(--fs-xs); color: var(--cinza-fraco); margin-top: 0.7rem; }

/* ---------- aviso de cookies ----------
   Fica no rodapé da janela e sobre tudo, mas com z-index abaixo do painel
   sanfonado do menu (40), para não cobrir a navegação em tela estreita.
   O filete magenta no topo é o mesmo gesto do resto do site: a cor marca,
   não escreve. */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 35;
  background: var(--papel); border-top: 3px solid var(--magenta-500);
  box-shadow: 0 -8px 24px rgba(18,18,43,0.10);
}
.cookies-linha {
  padding-block: 0.9rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem;
}
.cookies-txt { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5;
               max-width: 62ch; }
.cookies-txt strong { color: var(--tinta); font-weight: 800; }
.cookies-txt a { color: var(--indigo-700); font-weight: 700;
                 text-underline-offset: 2px; }
/* os botões não quebram entre si: decidir é uma escolha só, em duas opções */
.cookies-acoes { display: flex; gap: 0.6rem; flex: none; }
@media (max-width: 40rem) {
  .cookies-acoes { width: 100%; }
  .cookies-acoes .btn { flex: 1; justify-content: center; }
}