:root{
  --primaria:#2E3A6B; --primaria-escura:#1F2850; --primaria-clara:#8E9CD8;
  --coral:#E8607A; --ambar:#E8A33C; --turquesa:#2E9BA8;
  --linha:#AEB6D8; --halo:#DDE3F5;
  /* Borda de CONTROLE, separada de --linha. A linha da marca é enfeite
     (traço, tracejado, régua lateral) e pode ser discreta; a borda que
     DESENHA um botão ou um campo é o que diz onde ele começa, e a WCAG
     1.4.11 pede 3:1 contra o fundo para isso. Medido: --linha dava 1,92 no
     claro e 2,43 no escuro -- o botão "Entrar" ficava com a borda quase
     invisível nos dois temas. Não é para "unificar" com --linha de novo. */
  --borda-controle:#7A80A0;
  /* Coral de BOTÃO, separado de --coral pelo mesmo motivo que --borda-controle
     é separado de --linha: o da marca é para ver, este é para ler em cima.
     Branco sobre o coral da marca #E8607A dá 3,29:1 e reprova em corpo de
     16px; este mantém o matiz e dá 4,79:1, e o de hover 6,15:1. Medido em
     15/09/2026 pela fórmula de luminância da WCAG, por três caminhos que
     chegaram ao mesmo número. Não unificar com --coral.
     O token existia sem este comentário desde que nasceu, e era o único dos
     cinco de contraste do site sem o porquê escrito: token de contraste sem
     motivo registrado é o que alguém "conserta" de volta, sem nada acusar. */
  --coral-botao:#CE3B57; --coral-botao-hover:#B32F48;
  --creme:#FCFAF8; --branco:#FFFFFF; --borda:#EAE6DF;
  --tinta:#1B1F2E; --tinta-2:#4A5066; --tinta-3:#5E6478;
  --marcador-fundo:#FEF3C7; --marcador-tinta:#92400E;
  --ok:#1F6B45; --ok-fundo:#E8F3EE;

  /* Texto sobre a primária preenchida. Era `#fff` literal; no escuro a
     primária clareia e branco sobre ela dá 2.66:1, justo no botão. */
  --tinta-sobre-primaria:#FFFFFF;

  /* Texto sobre coral, âmbar e turquesa. Esses três NÃO invertem (medidos:
     passam nos dois temas), então o que fica em cima deles também não pode
     inverter. Seguir --tinta faria o número do disco clarear junto com a
     página e sumir sobre o âmbar: 1.79:1. */
  --tinta-sobre-cor:#1B1F2E;

  /* A barra do topo é translúcida sobre o que passa por baixo. */
  --topo-fundo:rgba(255,255,255,.9);

  /* A seção de ecossistemas é uma faixa ESCURA por desenho, e continua
     escura no tema escuro -- ela NÃO inverte. Se invertesse junto com a
     primária, viraria uma faixa clara com texto branco (2.66:1), e os
     doze rgba(255,255,255,…) calibrados sobre ela deixariam de valer de
     uma vez. Faixa escura sobre página clara é contraste de seção; sobre
     página escura ela continua sendo uma superfície distinta. */
  /* ⚠ estava definido como ELE MESMO (var(--secao-escura-tinta)), o que torna
     o token inválido: toda regra que o usava caía na herança, em silêncio.
     Achado em 10/09 medindo o olho de uma seção escura em 1,51:1. */
  --secao-escura:#2E3A6B; --secao-escura-tinta:#DDE3F5;

  --raio:14px;

  /* A lista aberta do <select> e a barra de rolagem quem desenha é o sistema
     operacional, não esta folha. Sem declarar aqui, o menu do próprio seletor
     de tema abriria branco dentro da página escura. */
  color-scheme:light;
}

/* O tema escuro em dois blocos com o mesmo conteúdo: o @media atende quem
   deixou o sistema decidir, o [data-theme] atende quem escolher dentro da
   página. Ao mexer em um, mexa no outro. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --branco:#1E2128; --creme:#16181C; --borda:#2C2F36;
    --tinta:#ECEAE5; --tinta-2:#C8C7BF; --tinta-3:#A3A199;
    --primaria:#8E9CD8; --primaria-escura:#A9B5E4; --primaria-clara:#B4BFE9;
    --linha:#4A5480; --halo:#2A3355;
    --borda-controle:#7C87B8;
    --tinta-sobre-primaria:#16181C;
    --marcador-fundo:#3A2E10; --marcador-tinta:#F5C86B;
    --ok:#6EE7A8; --ok-fundo:#123122;
    --topo-fundo:rgba(22,24,28,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --branco:#1E2128; --creme:#16181C; --borda:#2C2F36;
  --tinta:#ECEAE5; --tinta-2:#C8C7BF; --tinta-3:#A3A199;
  --primaria:#8E9CD8; --primaria-escura:#A9B5E4; --primaria-clara:#B4BFE9;
  --linha:#4A5480; --halo:#2A3355;
  --borda-controle:#7C87B8;
  --tinta-sobre-primaria:#16181C;
  --marcador-fundo:#3A2E10; --marcador-tinta:#F5C86B;
  --ok:#6EE7A8; --ok-fundo:#123122;
  --topo-fundo:rgba(22,24,28,.9);
  color-scheme:dark;
}
*{box-sizing:border-box}
/* Controle de formulário NÃO herda font-family -- é regra do agente de usuário,
   não descuido de folha. Sem isto, todo <button> sai em Arial enquanto o resto
   da página está na fonte da marca, e ninguém repara até pôr um ao lado do
   outro. Só `font-family`: `font: inherit` levaria junto tamanho, peso e altura
   de linha, e cada classe de botão teria de recuperá-los. */
button,input,select,textarea,optgroup{font-family:inherit}
html{scroll-behavior:smooth}
@media print{html{scroll-behavior:auto}}
body{
  margin:0; background:var(--branco); color:var(--tinta);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.marca{font-family:"Quicksand","DM Sans",ui-rounded,sans-serif;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5.4vw,58px);font-weight:700;line-height:1.06;letter-spacing:-.025em}
/* a quebra manual só ajuda onde a linha é longa; no celular ela cria um
   "A rede já tem / os dados." que fica pior que a quebra natural */
@media(max-width:760px){.quebra-larga{display:none}}
h2{font-size:clamp(26px,3.4vw,36px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
.olho{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-3)}
.envolve{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
/* O respiro da seção mora numa regra só, mais abaixo nesta folha. Havia uma
   segunda declaração aqui, com clamp(64px,9vw,112px), que a de baixo vencia
   por ordem: valor morto, e quem lia o topo da folha tirava a medida errada. */

/* ---------- marca ---------- */
.marca{font-weight:700;letter-spacing:-.03em;color:var(--primaria);line-height:1}
.marca-nav{font-size:27px}
.marca-sub{font-family:"Quicksand",sans-serif;font-weight:500;font-size:11px;letter-spacing:.06em;color:var(--tinta-3);margin-top:2px}

/* ⚠️ SEM CABEÇALHO/RODAPÉ/HERÓI QUANDO EMBUTIDA POR IFRAME -- a classe
   entra ANTES do primeiro pixel (script em cabeça(), gerar_site.py),
   pedido dela em 22/09/2026 junto das abas Editais/Boas práticas de
   /planejamento/, revisto no mesmo dia: "é só para replicar o conteúdo",
   não a página inteira -- por isso `.heroi` (título grande, texto de
   propósito da página, "← Publicações") some junto, não só cabeçalho e
   rodapé. O que sobra é o filtro e os cartões, que é o conteúdo mesmo. */
.embutido .topo,.embutido .rodape,.embutido .heroi{display:none}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:20;background:var(--topo-fundo);backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
/* O cabeçalho cabia por 14px em 1100px de janela, e qualquer arredondamento
   o derrubava para duas linhas: marca e menu em cima, tema/Entrar/Agendar
   embaixo. Medido: uma linha só a partir de ~1280px, o que deixa metade dos
   notebooks com o cabeçalho quebrado.
   A folga vem de onde não custa informação -- espaçamento do menu, e não
   tamanho de letra nem item removido. Entre 900 e 1180 o menu aperta o
   espaçamento; abaixo de 900 ele quebra de propósito, que é o desenho
   responsivo, não um acidente de 14px. */
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:14px;flex-wrap:wrap}
/* Abaixo de 640px o par de botões não cabe ao lado da marca e empurra a
   página inteira para a direita. Some o CTA do topo -- ele reaparece no
   herói, logo abaixo, e "Entrar" é o que quem já é cliente procura aqui. */
/* Em tela estreita quem sai é o SELETOR DE TEMA, não o botão principal.
   Era o contrário: abaixo de 640px sumia "Agendar demonstração", e quem
   chegava pelo celular perdia a única ação da página enquanto continuava
   vendo uma preferência de cor. O tema tem padrão que segue o sistema
   operacional, então some sem perder função; a ação não tem substituto.
   Medido em 375px: marca em cima, "Entrar" e "Agendar demonstração"
   embaixo, sem rolagem lateral. */
/* A marca encolhe em 639. O que sai da barra de ações em tela estreita está
   declarado num bloco só, mais abaixo -- aqui ficaria longe da regra que o
   explica e viraria a segunda declaração do mesmo fato. */
@media(max-width:639px){.marca-nav{font-size:24px}}
/* Rede de proteção: se um dia entrar um quarto controle, ele quebra a
   linha em vez de empurrar a página para o lado. */
.acoes{flex-wrap:wrap}
.menu{display:flex;gap:12px;font-size:14px;flex-wrap:wrap}
.menu a{text-decoration:none;color:var(--tinta-2);padding:4px 0;border-bottom:1.5px solid transparent}
.menu a:hover{color:var(--primaria);border-bottom-color:var(--linha)}
/* MENU EM BOTÃO ABAIXO DE 1100px
   -------------------------------------------------------------------------
   Medido: com os valores atuais o cabeçalho fecha em uma linha a partir de
   1090px de janela, já descontada a barra de rolagem. Abaixo disso os cinco
   itens não cabem ao lado das ações -- não é aperto de espaçamento, é
   largura -- e a saída escolhida foi recolher o menu num botão.

   Melhoria progressiva, no mesmo padrão do componente de abas: o HTML serve
   o menu VISÍVEL e quem esconde é o script, depois de carimbar `js-menu` no
   <html>. Sem JavaScript o menu continua na tela, quebrando linha, e nada
   fica inacessível. O contrário -- esconder no CSS e revelar no script --
   deixaria a navegação inteira dependendo de um arquivo que pode não
   carregar. */
/* `.acoes` no seletor porque `.botao{display:inline-flex}` está mais
   abaixo na folha e, com a mesma especificidade, venceria por ordem --
   o botão apareceria em toda largura. */
.acoes .menu-abre{display:none}
@media(min-width:1100px){
  /* Acima do corte o menu é a própria barra e o botão não existe. */
  .js-menu .acoes .menu-abre{display:none}
}
@media(max-width:1099px){
  .js-menu .menu{display:none}
  .js-menu .acoes .menu-abre{display:inline-flex}
  .js-menu .menu.aberto{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:calc(100% - 6px);right:24px;left:24px;
    max-width:360px;margin-left:auto;
    background:var(--branco);border:1px solid var(--borda);
    border-radius:var(--raio);box-shadow:0 14px 34px rgba(31,40,80,.16);
    padding:10px;z-index:60}
  .js-menu .menu.aberto a{padding:10px 12px;border-radius:8px;border-bottom:0;
    font-size:15.5px}
  .js-menu .menu.aberto a:hover{background:var(--halo);color:var(--primaria)}
  .js-menu .menu.aberto a[aria-current="page"]{background:var(--halo);
    color:var(--primaria);font-weight:600}
  /* O cabeçalho vira a referência de posição do painel -- e precisa de
     camada própria. `.topo` tem `backdrop-filter`, e isso cria contexto
     de empilhamento por si só: sem o z-index aqui, o painel com z-index
     60 fica preso dentro do contexto do cabeçalho e some atrás da capa.
     Foi o que aconteceu na primeira tentativa: o painel abria, existia
     no DOM, e não aparecia na tela. */
  /* só a camada: a posição continua sendo a `sticky` declarada no alto
     da folha, senão o cabeçalho deixaria de acompanhar a rolagem
     justamente nas telas menores. */
  .topo{z-index:60}
  .topo-linha{position:relative}
}
.menu-abre[aria-expanded="true"]{background:var(--halo);border-color:var(--primaria)}

/* ---------- tela estreita: o que fica e em que ordem ----------
   Duas regras vindas da Marianna, 14/09/2026, e tudo aqui as serve:
     1. o Menu fica SEMPRE na direita  -- é o último da fila de ações;
     2. "Agendar demonstração" SEMPRE aparece -- nunca sai da barra.
   Então quem recolhe, quando falta largura, é o resto: o seletor de tema
   sai primeiro e depois o "Entrar", que passa para dentro do painel.
   Abaixo de 480px o rótulo do botão encurta para "Agendar", que é o que
   permite marca + ação + Menu em uma linha num telefone de 375px. */
/* Os dois rótulos do botão e o "Entrar" do painel nascem escondidos; cada
   um aparece só na faixa que o chama. Sem esta linha o "Entrar" do painel
   vazava para a barra de menu em tela larga, ao lado de Contato. */
.menu-extra{display:none}
.rotulo-curto{display:none}
@media(max-width:679px){
  .acoes .tema{display:none}
  .acoes a.entrar{display:none}
  .js-menu .menu.aberto .menu-extra{display:block;border-top:1px solid var(--borda);
    padding-top:12px;margin-top:8px}
}
@media(max-width:479px){
  .rotulo-cheio{display:none}
  .rotulo-curto{display:inline}
}

.acoes{display:flex;align-items:center;gap:8px}

/* seletor de tema, ao lado do Entrar */
.tema{display:inline-flex;align-items:center}
/* Controle menor que os botões ao lado, de propósito: é preferência, não
   ação. O recuo da direita cobre a seta desenhada abaixo; o da esquerda
   acompanha os botões vizinhos em escala menor. */
.tema select{height:36px;padding:0 26px 0 10px;border-radius:999px;
  border:1.5px solid var(--borda-controle);background:var(--branco);color:var(--tinta-3);
  font-size:13px;cursor:pointer;appearance:none;
  /* a seta é desenhada aqui porque a nativa não segue a cor do tema */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 16px, calc(100% - 9px) 16px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.tema select:hover{border-color:var(--primaria)}
.tema select:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
/* Abaixo de 900px o menu some e o cabeçalho fica só com marca e ações; o
   seletor continua, porque é justamente no celular que a pessoa costuma ter
   preferência de tema declarada. */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:10px;font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid transparent;transition:background-color .15s,border-color .15s,color .15s;cursor:pointer}
.botao-cheio{background:var(--primaria);color:var(--tinta-sobre-primaria)}
.botao-cheio:hover{background:var(--primaria-escura)}
.botao-vazado{background:transparent;color:var(--primaria);border-color:var(--borda-controle)}
.botao-vazado:hover{border-color:var(--primaria);background:#F6F7FC}
.botao-peq{height:40px;padding:0 11px;font-size:15px}
/* `summary` entra aqui porque NÃO é `a` nem `button`, e ninguém repara: o
   navegador põe o anel de foco padrão dele, que na página do acervo saía
   `1px auto laranja` -- o único elemento interativo da página sem a marca do
   bloom. Os dois cabeçalhos do acervo continuam com regra própria, de
   `outline-offset:-3px`, porque ocupam a largura inteira do cartão e um anel
   por fora vazaria para fora da borda; a especificidade de classe deles ganha
   desta. */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px}

/* ---------- herói ---------- */
.heroi{background:linear-gradient(180deg,var(--branco) 0%,var(--creme) 100%);border-bottom:1px solid var(--borda)}
.heroi-grade{display:grid;gap:48px;align-items:center;padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px)}
@media(min-width:960px){.heroi-grade{grid-template-columns:1.05fr .95fr;gap:64px}}
.heroi p.linha-fina{font-size:clamp(18px,2vw,21px);color:var(--tinta-2);margin-top:22px;max-width:52ch}
.heroi .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.heroi .selo-linha{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:30px;font-size:14px;color:var(--tinta-3)}
.heroi .selo-linha span{display:inline-flex;align-items:center;gap:7px}
.ponto{width:8px;height:8px;border-radius:50%;display:inline-block}

svg.rede{width:100%;height:auto;display:block;max-width:520px;margin:0 auto}
@media(prefers-reduced-motion:no-preference){
  svg.rede .aresta{stroke-dasharray:90;stroke-dashoffset:90;animation:traca 1.1s ease-out forwards}
  svg.rede .no{opacity:0;animation:surge .5s ease-out forwards}
  svg.rede .nucleo{opacity:0;animation:surge .6s ease-out .35s forwards}
}
@keyframes traca{to{stroke-dashoffset:0}}
@keyframes surge{to{opacity:1}}

/* ---------- ciclo ---------- */
.ciclo{background:var(--branco)}
.ciclo-trilha{display:grid;gap:14px;margin-top:44px;position:relative}
@media(min-width:860px){.ciclo-trilha{grid-template-columns:repeat(4,1fr);gap:0}}
.etapa{position:relative;display:flex;gap:16px;align-items:flex-start;padding:0 0 6px}
/* ⚠️ O NÚMERO FICA AO LADO DO TÍTULO, e não acima dele. Pedido da Marianna em
   21/09/2026. Até aqui, no computador a etapa virava coluna (o disco em cima, o
   título embaixo) e no celular já era linha: eram dois desenhos para a mesma
   coisa, e o de cima gastava uma linha inteira com um número de dois dígitos.
   Agora é linha nas duas larguras, e o título quebra em duas linhas quando
   precisa, que é o que ela pediu.
   O `margin-top` do título centra a PRIMEIRA linha dele contra o disco de 46px;
   se o título quebrar, ele cresce para baixo e o disco continua no topo, que é
   onde o número deve estar. */
@media(min-width:860px){.etapa{text-align:left;padding:0 20px 0 0}}
@media(min-width:860px){.etapa h3{margin-top:10px}}
/* O traço de ligação entre as etapas saiu por pedido da Marianna (10/09).
   Ele estava posicionado como se o disco fosse centrado na coluna
   (left:calc(50% + 30px)), e o disco é alinhado à esquerda: centro em 43px,
   não em 50%. O resultado era um traço torto que terminava em cima do
   número seguinte. A numeração 01..04 já diz que é sequência; o traço
   repetia essa informação e era ele que estava errado.
       .etapa:not(:last-child)::after{...left:calc(50% + 30px)...}
   Se um dia voltar, tem que sair da borda direita de um disco para a borda
   esquerda do próximo: left:calc(20px + 46px + 10px), right:calc(-100% + 30px). */
.disco{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:var(--tinta-sobre-cor);font-family:"DM Sans",sans-serif;font-size:14px;font-weight:600;position:relative;z-index:1}
.etapa h3{margin-top:0}

.etapa p{color:var(--tinta-2);font-size:15.5px;margin-top:6px}
.retorno{margin-top:26px;padding:16px 20px;border:1.5px dashed var(--linha);border-radius:var(--raio);background:var(--creme);color:var(--tinta-2);font-size:15.5px}
.retorno strong{color:var(--tinta)}

/* ---------- módulos ---------- */
.modulos{background:var(--creme);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.grade-mod{display:grid;gap:18px;margin-top:40px}
@media(min-width:700px){.grade-mod{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grade-mod{grid-template-columns:repeat(3,1fr)}}
.mod{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:24px;display:flex;flex-direction:column;gap:10px;position:relative}
.mod-topo{display:flex;align-items:center;gap:10px}
.mod p{color:var(--tinta-2);font-size:15.5px}
.pilula{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.09em;padding:4px 9px;border-radius:999px;white-space:nowrap}
.p-pronto{background:var(--ok-fundo);color:var(--ok)}
.p-dev{background:#F0EFF6;color:#5B5A78}
/* O que a pessoa recebe, por tipo. Mesma família das outras pílulas, para o
   cartão não ganhar um dispositivo visual novo a cada campo. */
.p-dinheiro{background:var(--halo);color:var(--primaria-escura)}
.p-apoio{background:#DDF0F2;color:#1F5F68}
.p-reconhecimento{background:#FBF0DC;color:#7A5209}
.futuros{margin-top:34px;background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:24px}
.futuros ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
@media(min-width:760px){.futuros ul{grid-template-columns:repeat(2,1fr);gap:10px 28px}}
.futuros li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--tinta-2)}
.futuros li b{color:var(--tinta);font-weight:600}
/* Etiqueta de recurso que ainda não existe. Fica no TÍTULO do bloco, não em
   cada item: são oito e nove itens, e repetir a pílula em cada linha faria a
   lista inteira parecer aviso. No título ela qualifica o bloco todo, que é o
   que a promessa exige. */
.pilula-futuro{display:inline-block;margin-left:10px;vertical-align:2px;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:500;
  padding:4px 9px;border-radius:999px;
  background:var(--marcador-fundo);color:var(--marcador-tinta)}
.tracinho{width:14px;height:1.5px;background:var(--linha);margin-top:12px;flex:none}

/* ---------- dados ---------- */
.dados-grade{display:grid;gap:20px;margin-top:40px}
@media(min-width:820px){.dados-grade{grid-template-columns:repeat(2,1fr)}}
.dado{border-left:2.5px solid var(--linha);padding:2px 0 2px 20px}
.dado h3{font-size:17.5px}
.dado p{color:var(--tinta-2);font-size:15.5px;margin-top:7px}

/* ---------- público ---------- */
.publico{background:var(--secao-escura);color:#fff}
.publico h2{color:#fff}
/* Sem teto de caractere: são duas frases curtas abrindo a seção, não
   texto corrido. Com 60ch a segunda quebrava em duas linhas numa faixa
   larga e meio vazia. O contêiner de 1140px já é o limite; em tela
   estreita ela quebra sozinha. */
.publico .envolve>p{color:var(--secao-escura-tinta);max-width:none;margin-top:16px}
.publico-grade{display:grid;gap:20px;margin-top:40px}
@media(min-width:820px){.publico-grade{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.publico-grade-3{grid-template-columns:repeat(3,1fr)}}
.cartao-publico{display:flex;flex-direction:column;gap:12px;min-width:0}
.cartao-publico .mod-topo{gap:12px}
.ponto-g{width:11px;height:11px;flex:none}
.link-cartao{margin-top:auto;padding-top:6px;color:#fff;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.45);align-self:flex-start}
.link-cartao:hover{border-bottom-color:#fff}
.cartao-publico .pilula{margin:0}
.p-eco{background:rgba(255,255,255,.18);color:#fff;margin-left:auto}
.cartao-publico{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--raio);padding:26px}
.cartao-publico h3{color:#fff}
.cartao-publico p{color:var(--secao-escura-tinta);font-size:15.5px;margin-top:10px}

/* ---------- contato ---------- */
.contato{background:var(--creme)}
.contato-caixa{background:var(--branco);border:1px solid var(--borda);border-radius:18px;padding:clamp(28px,5vw,52px);display:grid;gap:32px;align-items:center}
@media(min-width:880px){.contato-caixa{grid-template-columns:1.1fr .9fr}}
.contato p{color:var(--tinta-2);margin-top:14px;max-width:46ch}
.lista-contato{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:15.5px}
.lista-contato li{display:grid;gap:2px}
.lista-contato .rotulo{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-3)}

.marcador{background:var(--marcador-fundo);color:var(--marcador-tinta);padding:2px 7px;border-radius:5px;font-family:"DM Sans",sans-serif;font-weight:600;font-size:12.5px;line-height:1.5}

/* ---------- rodapé ---------- */
.rodape{background:var(--branco);border-top:1px solid var(--borda);padding:40px 0 56px}
.rodape-linha{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.rodape a{color:var(--tinta-2);text-decoration:none;font-size:15px}
.rodape a:hover{color:var(--primaria)}
.rodape-links{display:flex;flex-wrap:wrap;gap:18px}
.rodape-fim{margin-top:28px;padding-top:20px;border-top:1px solid var(--borda);font-size:13.5px;color:var(--tinta-3);display:flex;flex-wrap:wrap;gap:10px 22px}

/* ---------- páginas de detalhe ---------- */
.voltar{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--tinta-3);text-decoration:none}
.voltar:hover{color:var(--primaria)}
.heroi-detalhe{padding-block:clamp(44px,6vw,76px) clamp(44px,6vw,72px)}
.heroi-detalhe h1{font-size:clamp(30px,4.4vw,46px);margin-top:16px}
/* AQUI HAVIA `.heroi-detalhe .linha-fina{font-size:clamp(17px,1.8vw,20px);
   color:var(--tinta-2);margin-top:20px;max-width:56ch}`, e as QUATRO
   declarações eram mortas. Duas classes, (0,2,0), contra `.heroi p.linha-fina`
   que tem uma classe e um elemento, (0,2,1). Conferido no navegador, na página
   publicada, propriedade por propriedade:

     font-size   `.heroi p.linha-fina` vence      -> clamp(18px,2vw,21px)
     color       `.heroi p.linha-fina,.heroi .linha-fina` vence, e mais tarde
     margin-top  `.heroi-detalhe p.linha-fina` vence -> 26px
     max-width   `.heroi-detalhe p.linha-fina` vence -> 56ch (a linha abaixo)

   A Marianna escolheu APAGAR em vez de fazer os 20px valerem: o subtítulo dos
   heróis internos é 21px há tempo, ninguém reclamou, e encolher mudaria cinco
   páginas no ar sem ganho. Zero mudança visual nesta remoção; o que sai é uma
   regra que mentia para quem lê a folha.

   ⚠️ A linha abaixo repete o seletor COM o elemento de propósito: sem o `p`
   ela perde para a linha 260 e o teto de 56ch volta a não valer. Foi assim que
   a frase da /boas-praticas/ saía em 4 linhas onde cabia em 3. */
.heroi-detalhe p.linha-fina{max-width:56ch}
.faixa-eco{height:5px;width:64px;border-radius:99px;display:block}
.publico-claro{display:grid;gap:18px;margin-top:36px}
/* Cartão sozinho ocupa a linha inteira, em vez de deixar meia seção vazia
   ao lado. Aconteceu ao sair o cartão do ICMS de "em preparação": ele
   prometia como futuro uma página estado a estado que já está no ar. */
.publico-claro .cartao-claro:only-child{grid-column:1/-1}
@media(min-width:780px){.publico-claro{grid-template-columns:repeat(2,1fr)}}
.cartao-claro{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:24px}
.cartao-claro p{color:var(--tinta-2);font-size:15.5px;margin-top:8px}
/* `.botao` é `inline-flex` e não traz margem: sem esta regra ele encosta no
   parágrafo. 16 e não 18 para a folga fazer escada com o resto do cartão:
   8px do título ao texto, 16 do texto à ação, 24 até a borda, que é o
   `padding` do próprio cartão. E o número tem de ficar MENOR que os 24 de
   baixo -- se empatasse, o botão soltaria do texto e pareceria colado na
   borda inferior, que é a regra de sempre: a distância diz a quem a coisa
   pertence. */
.cartao-claro .botao{margin-top:16px}
.vazio{border:1.5px dashed var(--linha);border-radius:var(--raio);padding:24px;background:var(--creme);display:grid;gap:12px}
/* ⚠️ NÃO ESCONDA A CAIXA `.vazio` POR CSS. Em 14/09/2026 eu pus aqui um
   `section[id^="setor-"]:has(> .envolve > .vazio){display:none}` para atender
   ao pedido da Marianna de não mostrar setor sem chamada exclusiva. Durou
   pouco, e a razão vale mais que a regra: o gerador dos editais passou a não
   emitir a seção nesse caso, e a ÚNICA caixa `.vazio` de seção que ele ainda
   emite é o outro caso -- setor varrido em que não há nada, nem exclusivo nem
   multissetorial. Essa precisa aparecer: sem ela, quem filtra por aquela área
   vê tela branca sem explicação. A regra teria disparado exatamente na vez em
   que não podia. Quem decide o que existe é o gerador; o CSS não tem como
   distinguir "vazio porque há multissetorial" de "vazio porque não há nada". */
.vazio h3{color:var(--tinta)}

/* cartão inteiro clicável na home */
.cartao-link{text-decoration:none;transition:background-color .15s,border-color .15s,transform .15s}
.cartao-link:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.cartao-link .link-cartao{margin-top:auto}

/* ---------- quem somos ---------- */
.quem{background:var(--branco);border-top:1px solid var(--borda)}
.quem-grade{display:grid;gap:40px}
@media(min-width:900px){.quem-grade{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.quem-texto{color:var(--tinta-2);margin-top:18px;max-width:52ch}
.quem-principios{display:grid;gap:22px}
.principio{border-left:2.5px solid var(--coral);padding-left:20px}
.principio:nth-child(2){border-left-color:var(--ambar)}
.principio:nth-child(3){border-left-color:var(--turquesa)}
.principio p{color:var(--tinta-2);font-size:15.5px;margin-top:7px}

/* ---------- quem somos: equipe ---------- */
.equipe{display:grid;gap:22px;margin-top:38px}
@media(min-width:700px){.equipe{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.equipe{grid-template-columns:repeat(3,1fr)}}
.pessoa{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:24px;display:flex;flex-direction:column;gap:8px}
.pessoa h3{margin-top:6px}
.pessoa .cargo{font-size:14px;color:var(--tinta-3)}
.pessoa .bio{color:var(--tinta-2);font-size:15px}
.foto,.foto-vazia{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block}
.foto-vazia{background:var(--creme);border:2px dashed var(--cor-foto,var(--linha));display:flex;align-items:center;justify-content:center;text-align:center}
.foto-vazia span{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;line-height:1.35;color:var(--marcador-tinta)}
.numeros{display:grid;gap:18px;margin-top:36px}
@media(min-width:700px){.numeros{grid-template-columns:repeat(3,1fr)}}
.numero{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:22px;display:grid;gap:8px}
.numero strong{font-family:"Quicksand",sans-serif;font-size:34px;line-height:1;color:var(--primaria)}
.numero span{font-size:14.5px;color:var(--tinta-2)}

/* ---------- capturas de tela ---------- */
.telas{display:grid;gap:22px;margin-top:38px}
/* Uma coluna, não duas. Em duas, cada print de 1400px cabe em 535 e o texto
   dentro da tela vira borrão -- e print de sistema que não se lê não prova
   nada. A seção fica mais longa; é o preço de a imagem ser legível. */
.tela-print{margin:0;background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column}
.tela-print img{width:100%;height:auto;display:block;border-bottom:1px solid var(--borda)}
.tela-print figcaption{padding:16px 20px;font-size:14.5px;color:var(--tinta-2)}
.tela-print figcaption b{display:block;color:var(--tinta);font-weight:600;margin-bottom:3px;font-size:15.5px}

/* ---------- papéis ---------- */
.papeis{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
@media(min-width:820px){.papeis{grid-template-columns:repeat(2,1fr);gap:10px 28px}}
.papeis li{font-size:15.5px;color:var(--tinta-2);border-left:2px solid var(--linha);padding-left:14px}
.papeis b{color:var(--tinta);font-weight:600}

/* ---------- painéis de detalhe (expansão dos ecossistemas) ---------- */
.detalhe{border-top:1px solid var(--borda);background:var(--branco)}
.detalhe-topo{background:var(--creme);border-bottom:1px solid var(--borda);padding-block:clamp(36px,5vw,60px)}
.detalhe-titulo{margin-top:14px;font-size:clamp(26px,3.4vw,38px)}
.detalhe-intro{color:var(--tinta-2);margin-top:16px;max-width:58ch;font-size:clamp(16.5px,1.7vw,19px)}
.detalhe-topo .botao{margin-top:26px}
.detalhe .secao:first-of-type{padding-top:clamp(48px,6vw,80px)}
button.link-cartao{background:none;border:none;padding:0;font:inherit;font-weight:600;font-size:15px;color:#fff;cursor:pointer;border-bottom:1.5px solid rgba(255,255,255,.45);align-self:flex-start;margin-top:auto}
button.link-cartao:hover{border-bottom-color:#fff}
.cartao-link{transition:background-color .15s,border-color .15s}
.cartao-link:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28)}

/* ---------- canais de contato ---------- */
.canais{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.botao-zap{background:#25D366;color:#0B2E18}
.botao-zap:hover{background:#1EBE5A}
.botao-zap svg{flex:none}
.aviso-canal{margin-top:14px;font-size:13.5px;color:var(--tinta-3);max-width:46ch}
.lista-contato a{color:var(--tinta);text-decoration:none}
.lista-contato a:hover .marcador{outline:1.5px solid var(--marcador-tinta)}
.lista-contato .marcador,.lista-contato a{justify-self:start}

/* ---------- citação ---------- */
.citacao-secao{background:var(--branco);border-top:1px solid var(--borda)}
.citacao{margin:0;max-width:34ch}
.citacao p{font-family:"Quicksand",sans-serif;font-weight:600;font-size:clamp(24px,3.2vw,34px);line-height:1.25;letter-spacing:-.015em;color:var(--primaria);text-wrap:balance}
.citacao footer{margin-top:18px;font-size:14.5px;color:var(--tinta-3)}
@media(min-width:900px){.citacao{max-width:44ch}}

/* quatro ecossistemas: 2x2 no médio, quatro em linha no largo */
@media(min-width:700px){.publico-grade-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.publico-grade-4{grid-template-columns:repeat(4,1fr)}}
/* selo de ecossistema ainda em construção, sobre a faixa índigo */
.p-eco-dev{background:rgba(255,255,255,.10);color:var(--secao-escura-tinta);border:1px solid rgba(255,255,255,.24);margin-left:auto}

/* ---------- publicações ---------- */
.publicacoes{background:var(--creme);border-top:1px solid var(--borda)}
.lista-pub{list-style:none;margin:38px 0 0;padding:0;display:grid;gap:16px}
@media(min-width:820px){.lista-pub{grid-template-columns:repeat(2,1fr)}}

/* ---------- carrossel de publicações, só na home ----------
   Na página de Publicações a lista é o índice de tudo e continua empilhada:
   quem chega lá quer ver o acervo inteiro. Na home ela é vitrine, e a cada
   publicação nova a seção crescia uma fileira, empurrando o resto da página
   para baixo. Aqui ela vira trilho horizontal.

   Rolagem nativa com scroll-snap, não biblioteca: funciona sem JavaScript,
   funciona com dedo no celular e com roda do mouse, e o teclado navega
   porque os cartões continuam sendo links numa lista. O JS só acrescenta as
   setas, e some com elas quando não há o que rolar. */
/* `proximity`, não `mandatory`. Com encaixe obrigatório e trilho curto o
   carrossel simplesmente NÃO ROLA: com três cartões de 420px num trilho de
   1092, o máximo rolável é 200px, e o ponto de encaixe do segundo cartão
   fica em 436 -- fora do alcance. O navegador então volta para o ponto
   válido mais próximo, que é zero, e a seta parece quebrada. Medido em
   10/09/2026; teria ido ao ar assim se eu tivesse confiado no CSS.
   `proximity` encaixa quando dá e sai do caminho quando não dá. */
#p-home .lista-pub{display:flex;grid-template-columns:none;gap:16px;
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:thin}
/* Cartão um pouco mais estreito que a metade: o terceiro fica espiando na
   borda, que é o que diz "tem mais coisa aqui" sem precisar de legenda. */
#p-home .lista-pub > .pub{scroll-snap-align:start;flex:0 0 clamp(270px,44%,430px)}
#p-home .lista-pub > .pub > a{height:100%}
.trilho{position:relative}
.trilho-setas{display:flex;gap:8px;margin-top:14px}
.trilho-seta{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--borda-controle);
  background:var(--branco);color:var(--primaria);font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:border-color .15s,background-color .15s}
.trilho-seta:hover:not(:disabled){border-color:var(--primaria);background:var(--halo)}
/* Seta desabilitada continua visível e legível: sumir move o botão vizinho
   debaixo do cursor no meio do clique. */
.trilho-seta:disabled{opacity:.45;cursor:default}
@media(prefers-reduced-motion:reduce){#p-home .lista-pub{scroll-behavior:auto}}
.pub{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio)}
.pub a{display:flex;flex-direction:column;gap:8px;padding:24px;text-decoration:none;height:100%}
.pub h3{color:var(--tinta)}
.pub p{color:var(--tinta-2);font-size:15.5px}
.pub:hover{border-color:var(--linha)}
.pub a:hover h3{color:var(--primaria)}
.pub-tipo{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--tinta-3)}
.pub-meta{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;
  align-items:center;font-size:13.5px;color:var(--tinta-3)}
.pub-abrir{color:var(--primaria);font-weight:600;border-bottom:1.5px solid var(--linha)}
.pub-vazia{border-style:dashed;background:transparent;padding:24px;display:flex;
  flex-direction:column;gap:8px}

/* ---------- sob demanda ---------- */
.sob-demanda{background:var(--branco)}
.sob-caixa{border:1.5px solid var(--borda);border-radius:18px;padding:clamp(26px,4vw,40px);
  display:grid;gap:24px;align-items:center}
@media(min-width:880px){.sob-caixa{grid-template-columns:1fr auto;gap:40px}}
/* ciclo com cinco etapas: duas linhas no médio, cinco colunas no largo */
@media(min-width:860px){.ciclo-cinco{grid-template-columns:repeat(3,1fr);gap:32px 0}}
@media(min-width:1100px){.ciclo-cinco{grid-template-columns:repeat(5,1fr);gap:0}}
/* seis etapas: duas colunas no médio, três no largo */
.ciclo-seis{gap:30px 28px}
@media(min-width:700px){.ciclo-seis{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ciclo-seis{grid-template-columns:repeat(3,1fr)}}
@media(min-width:860px){.ciclo-seis .etapa{padding:0 12px 0 0}}

/* ---------- formulário de contato ---------- */
.formulario{display:flex;flex-direction:column;gap:6px}
.form-titulo{font-family:"Quicksand",sans-serif;font-weight:700;font-size:18px;margin-bottom:8px}
.formulario label{font-size:13.5px;color:var(--tinta-2);margin-top:10px}
.formulario .opcional{color:var(--tinta-3);font-size:12px}
/* --borda-controle pelo mesmo motivo do .botao-vazado: o fundo do campo é
   --creme, que é o fundo da página, então não sobra distinção de
   preenchimento e a borda é o único sinal de que existe um campo ali. Com
   --borda dava 1,24:1. São os campos do formulário de contato. */
.campo{height:48px;border-radius:10px;border:1px solid var(--borda-controle);background:var(--creme);
  padding:0 14px;font-size:15.5px;font-family:inherit;color:var(--tinta);width:100%}
.campo-area{height:auto;padding:12px 14px;resize:vertical;line-height:1.5}
/* FOCO DO CAMPO É O MESMO DO RESTO DO SITE: 3px turquesa, `:focus-visible`.
   Era `:focus` com um anel de 1px na primária, metade da presença que links,
   botões e `summary` já têm, com a identidade pedindo 3px.
   A borda continua trocando para `--primaria` no `:focus` simples: ela diz
   qual campo está ativo. O contorno diz que o foco está visível. Dois sinais
   para duas coisas.
   ⚠️ `:focus-visible` NÃO quer dizer "só no teclado", e eu escrevi isso errado
   aqui antes de medir. Conferido no navegador, campo por campo: em `input` de
   texto e em `textarea` ele casa TAMBÉM no clique de mouse, porque o navegador
   assume que quem clica ali vai digitar. Em `select` ele casa só pelo teclado.
   Então a mudança de `:focus` para `:focus-visible` quase não altera o campo
   de texto, e tira o anel do select no clique. Quem for ajustar isso, meça em
   vez de deduzir. */
.campo:focus{border-color:var(--primaria)}
.campo:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
.formulario .botao{margin-top:18px;width:100%}
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-aviso{margin-top:10px;font-size:14px;min-height:1px}
.form-aviso[data-estado="ok"]{color:var(--ok)}
.form-aviso[data-estado="erro"]{color:#991B1B}
.form-lgpd{margin-top:12px;font-size:12.5px;color:var(--tinta-3);line-height:1.5}

/* branco só sobre a primária, onde ele passa com folga */
.disco-claro{color:var(--tinta-sobre-primaria)}

/* Alvo de toque. Fica NO FIM do arquivo de propósito: media query não
   acrescenta especificidade, então um bloco igual colocado antes das regras
   de componente perde para elas e não tem efeito nenhum -- e o sintoma é
   nenhum, o que já custou uma volta. Ao acrescentar regra de componente
   depois deste bloco, confira a altura medida, não o código. */
@media(pointer:coarse){
  .tema select{height:40px;background-position:calc(100% - 14px) 18px,calc(100% - 9px) 18px}
  .botao-peq{height:44px}
}


/* ===========================================================================
   REVISÃO COMERCIAL -- migrada do mock aprovado pela Marianna em 10/09/2026
   (docs/marketing/mock-site-revisado-fonte.html na Plataforma Integrada).

   Esta camada é do MOCK, não minha. Ela vem depois de tudo de propósito: as
   regras que ela precisa vencer estão acima, e na primeira tentativa eu
   inseri sobrescritas ANTES delas e perdi cinco vezes seguidas para a cascata.

   O que foi tirado do mock ao migrar: a barra "MOCK · SITE REVISADO", as abas
   de navegação entre páginas, a chave "mostrar o que mudou", os 30 blocos
   .nota e as caixas .mantida. Tudo isso é anotação de revisão.

   O que foi trocado: os fundos de abertura estavam embutidos em base64 (5
   ocorrências, ~107 KB de CSS); viraram arquivo em site/img/, gerados por
   gerar-fundo.py com semente fixa.

   O QUE NÃO FOI TROCADO, e por quê: os seletores escopados por página
   (#p-home, #p-edu, #p-obz, #p-man, #p-pub, #p-conf) continuam exatamente
   como no mock. São as regras escopadas por página -- a capa de
   abertura de cada ecossistema, o véu colorido por cima dela e o ritmo de
   claro/creme/escuro das seções --
   e o id que elas procuram é carimbado no <body> por cabeca(). Traduzi-las
   para classe foi a primeira tentativa e deu errado da pior forma: converti
   4, esqueci 13, e as 13 continuaram no arquivo apontando para um id que
   não existia em página nenhuma. Regra de CSS que não casa não avisa; as
   seis páginas ficaram com a capa da home e o ritmo de cor sumiu, e isso
   passou por uma revisão minha sem ser visto. Se um dia mudar o mecanismo,
   mude as 17 de uma vez ou nenhuma.
   =========================================================================== */


/* A barra de revisão do mock (.revisor) e o `.topo{position:static}` que ela
   exigia saíram em 14/09/2026. Eram código morto: `.revisor` não existe em
   nenhuma página gerada há meses, e o `position:static` continuava valendo --
   vencia por ordem o `position:sticky` declarado no alto desta folha. Duas
   consequências que ninguém ligou ao mock: o cabeçalho do site NÃO era fixo,
   ao contrário do que a regra do alto diz, e o painel do menu recolhido
   sumia atrás da capa, porque sem posição o z-index do cabeçalho não vale. */
.faixa-numeros{border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  background:var(--branco)}
.faixa-numeros .envolve{display:grid;gap:22px;padding-top:30px;padding-bottom:30px}
@media(min-width:760px){.faixa-numeros .envolve{grid-template-columns:repeat(3,1fr)}}
.fn strong{display:block;font-family:"Quicksand",sans-serif;font-weight:700;
  font-size:34px;line-height:1;color:var(--primaria)}
.fn span{display:block;margin-top:7px;font-size:14px;color:var(--tinta-2)}
/* A rotação tem TRÊS cores porque são as três que passam em texto
   grande sobre branco: primária 9,7:1, coral 4,8:1, turquesa 3,3:1. O
   âmbar saiu daqui -- 2,16:1, abaixo do mínimo de 3:1 -- e é o que o
   próprio design system já dizia ao marcar `--ambar` como cor de área,
   não de texto. Um quarto número pede decisão nova, não o âmbar de
   volta nem a repetição de uma das três. */
.fn:nth-child(2) strong{color:var(--coral)}
.fn:nth-child(3) strong{color:var(--turquesa)}
.publico-alvo{display:grid;gap:16px;margin-top:32px}
@media(min-width:860px){.publico-alvo{grid-template-columns:repeat(2,1fr)}}
.pa{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:22px}
.pa h3{font-size:17px;display:flex;align-items:center;gap:9px}
.pa .dor{margin-top:12px;font-size:15.5px;color:var(--tinta);font-style:italic}
.pa .resposta{margin-top:10px;font-size:15.5px;color:var(--tinta-2)}
.pa .rotulo-pa{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--primaria);display:inline-block;margin-top:16px;
  text-decoration:none;border-bottom:1px solid var(--linha);padding-bottom:3px}
.pa .rotulo-pa:hover{border-bottom-color:var(--primaria)}
.oferta{background:var(--halo);border:1px solid var(--linha);border-radius:var(--raio);
  padding:28px;display:grid;gap:16px;margin-top:34px}
@media(min-width:820px){.oferta{grid-template-columns:1.4fr auto;align-items:center}}
/* Dentro da caixa de contato a oferta ocupa a coluna estreita (.9fr de 1140).
   A regra acima dispara pela largura da JANELA, não pela do pai: em desktop
   ela partia ~430px em 1.4fr + auto, o título caía uma palavra por linha e o
   botão encostava no texto. Aqui ela fica em coluna única sempre. */
.contato-caixa .oferta{grid-template-columns:1fr}
.contato-caixa .oferta .botao{justify-self:start}
.oferta h3{font-size:21px;color:var(--primaria-escura)}
.oferta p{color:var(--primaria-escura);opacity:.85;font-size:15.5px;margin-top:8px;max-width:56ch}
/* imagem do produto logo abaixo da abertura: mostrar antes de explicar */
.vitrine{margin-top:38px;border-radius:var(--raio);overflow:hidden;
  border:1px solid var(--borda);background:var(--superficie-2, #F7F4EF);
  box-shadow:0 18px 46px rgba(31,40,80,.10)}
.vitrine img{display:block;width:100%;height:auto}
.vitrine-legenda{padding:14px 20px;font-size:13.5px;color:var(--tinta-3);
  border-top:1px solid var(--borda);background:var(--branco)}
/* publicação com capa */
.pub-capa{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--borda);margin-bottom:6px}
/* O símbolo sozinho definia a altura da abertura. Com o texto curto,
   sobrava um vazio enorme abaixo dele e a primeira tela virava enfeite. */
.heroi svg.rede{max-width:360px}
.heroi-grade{padding-block:clamp(36px,4.5vw,60px) clamp(40px,5vw,64px)}
/* Duas colunas para as capturas. O CSS do site trava em uma coluna porque
   as imagens publicadas têm 1400px e ficavam ilegíveis em 535px. Com os
   originais de 2320px essa trava deixa de fazer sentido: em duas colunas
   cada print aparece a mais de 4x, e a página encurta pela metade. */
@media(min-width:900px){
  .telas{grid-template-columns:repeat(2,1fr);gap:26px 24px}
}
.tela-print figcaption{font-size:14px;line-height:1.5}
.vitrine{max-width:760px}
/* Ícones de traço, no desenho da marca. Sprite inline: nenhuma requisição
   externa, e a cor vem do token de cada cartão. */
.ico{width:42px;height:42px;border-radius:13px;display:inline-grid;place-items:center;flex:none}
.ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ico-coral{background:rgba(232,96,122,.12);color:#C4405C}
.ico-ambar{background:rgba(232,163,60,.14);color:#96650F}
.ico-turq{background:rgba(46,155,168,.13);color:#1F7A85}
.ico-lilas{background:rgba(142,156,216,.18);color:var(--primaria)}
/* ⚠️ `:root:not([data-theme="light"])` TEM de ficar dentro do @media. Solto no
   topo, ele casa sempre que o atributo está AUSENTE -- e ausente é o padrão,
   porque o seletor de tema em "sistema" APAGA o atributo (gerar_site.py). Foi
   assim que estes quatro ícones passaram a pintar a tinta do ESCURO no tema
   claro, em 32 ícones de quatro páginas no ar.
   Medido no navegador, com o disco composto, antes do conserto: coral 2,09 ·
   âmbar 1,95 · turquesa 1,88 · lilás 1,56, contra os 3:1 que a WCAG 1.4.11
   pede de elemento gráfico. Os dois blocos repetem o conteúdo de propósito: o
   @media atende quem deixou o sistema decidir, o [data-theme] atende quem
   escolheu na página. Mexeu em um, mexa no outro. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ico-coral{color:#F0899E}
  :root:not([data-theme="light"]) .ico-ambar{color:#E8A33C}
  :root:not([data-theme="light"]) .ico-turq {color:#4FC0CD}
  :root:not([data-theme="light"]) .ico-lilas{color:#B4BFE9}
}
:root[data-theme="dark"] .ico-coral{color:#F0899E}
:root[data-theme="dark"] .ico-ambar{color:#E8A33C}
:root[data-theme="dark"] .ico-turq {color:#4FC0CD}
:root[data-theme="dark"] .ico-lilas{color:#B4BFE9}
/* cartão de problema: ícone acima do título, sem régua lateral */
.dado{border-left:0;padding:0}
.dado .dado-topo{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.dado h3{font-size:17px}
/* cartão de público e de módulo com ícone */
.pa h3,.mod .mod-topo{display:flex;align-items:center;gap:12px}
.mod .mod-topo h3{margin:0}
.heroi .selo-linha span{display:inline-flex;align-items:center;gap:9px;line-height:1}
.selo-linha .ico{width:28px;height:28px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.selo-linha .ico svg{width:15px;height:15px;display:block}
/* Passo a passo das telas. Abas nomeadas pela etapa, e não setas anônimas:
   em carrossel comum quase ninguém passa do primeiro quadro, porque a seta
   não diz o que vem depois. O nome da etapa diz. */
.passo{margin-top:30px}
/* MELHORIA PROGRESSIVA. O conteúdo é servido VISÍVEL; quem esconde é o
   script, depois de ligar a classe `js` no componente. Antes era o
   contrário -- servia escondido e dependia do script para revelar --, e por
   isso, sem JavaScript, 5 das 6 telas do Educacional não existiam na página
   no ar. Abas e setas também só aparecem com `js`, porque sem ele não fazem
   nada, e botão morto é pior que botão ausente. */
.passo-abas{display:none;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.passo.js .passo-abas{display:flex}
.passo-nav{display:none}
.passo.js .passo-nav{display:flex}
/* sem `js`, um bloco embaixo do outro, com respiro para não colarem */
.passo-slide + .passo-slide{margin-top:22px}
.passo.js .passo-slide + .passo-slide{margin-top:0}
.passo-aba{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.04em;
  padding:9px 14px;border-radius:999px;border:1px solid var(--borda-controle);
  background:transparent;color:var(--tinta-2);cursor:pointer;transition:.15s}
.passo-aba b{color:var(--tinta-3);margin-right:5px;font-weight:500}
.passo-aba:hover{border-color:var(--primaria);color:var(--primaria)}
.passo-aba[aria-selected="true"]{background:var(--primaria);border-color:var(--primaria);
  color:var(--tinta-sobre-primaria)}
.passo-aba[aria-selected="true"] b{color:var(--tinta-sobre-primaria);opacity:.7}
.passo-aba:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
.passo-palco{position:relative;border:1px solid var(--borda);border-radius:var(--raio);
  background:var(--superficie-2,#F7F4EF);overflow:hidden}
.passo-slide{margin:0}
.passo.js .passo-slide{display:none}
.passo.js .passo-slide.ativo{display:block}
.passo-slide img{display:block;width:100%;height:auto}
.passo-slide figcaption{padding:16px 22px;background:var(--branco);
  border-top:1px solid var(--borda);font-size:14.5px;color:var(--tinta-2);line-height:1.55}
.passo-slide figcaption b{display:block;color:var(--tinta);font-size:15.5px;margin-bottom:3px}
/* sem `display` aqui de propósito: quem concede é `.passo.js .passo-nav`,
   lá em cima. Devolver `display:flex` a esta linha faz as setas
   reaparecerem sem JavaScript, sem nada para comandar. */
.passo-nav{align-items:center;gap:14px;margin-top:16px}
.passo-seta{width:38px;height:38px;border-radius:50%;border:1px solid var(--borda-controle);
  background:transparent;color:var(--primaria);font-size:16px;cursor:pointer;line-height:1}
.passo-seta:hover{background:var(--primaria);color:var(--tinta-sobre-primaria);border-color:var(--primaria)}
.passo-seta:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
.passo-conta{font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;color:var(--tinta-3)}
.passo-conta b{color:var(--tinta);font-weight:500}
/* Abertura sobre fundo de rede. O desenho é gerado por scripts/gerar-fundo.py,
   determinístico: mesma semente, mesmo arquivo. Nada de foto, por duas razões:
   licença, e porque foto de gente sorrindo só funciona quando é a sua gente. */
.heroi{position:relative;border-bottom:0;
  background-image:url("img/fundo-home.svg");
  background-size:cover;background-position:center right}
.heroi .envolve{position:relative;z-index:1}
/* Véu em CSS, por cima do fundo. O véu que vem dentro do SVG é escalado junto
   com a imagem pelo background-size:cover, então em telas largas ele desliza
   para fora da coluna de texto. Este aqui é ancorado no elemento, não na
   imagem, e por isso o contraste do subtítulo para de depender do recorte. */
.heroi::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(27,34,71,.97) 0%, rgba(27,34,71,.94) 34%,
    rgba(27,34,71,.72) 52%, rgba(27,34,71,.28) 72%, rgba(27,34,71,0) 88%)}
#p-edu .heroi::before{background:linear-gradient(100deg,
  rgba(42,26,51,.97) 0%, rgba(42,26,51,.94) 34%,
  rgba(42,26,51,.72) 52%, rgba(42,26,51,.28) 72%, rgba(42,26,51,0) 88%)}
#p-obz .heroi::before{background:linear-gradient(100deg,
  rgba(15,42,49,.97) 0%, rgba(15,42,49,.94) 34%,
  rgba(15,42,49,.74) 52%, rgba(15,42,49,.30) 72%, rgba(15,42,49,0) 88%)}
#p-man .heroi::before{background:linear-gradient(100deg,
  rgba(20,28,36,.97) 0%, rgba(20,28,36,.94) 34%,
  rgba(20,28,36,.72) 52%, rgba(20,28,36,.28) 72%, rgba(20,28,36,0) 88%)}
.heroi h1,.heroi .marca{color:#fff}
.heroi .olho{color:#F7C2CD}
.heroi p.linha-fina,.heroi .linha-fina{color:#EDF0FB}
.heroi .selo-linha{color:#D2D9F2}
.heroi .voltar{color:#B4BFE9}
.heroi .voltar:hover{color:#fff}
/* CORAL DE BOTÃO, separado do --coral da marca. Texto branco sobre
   --coral (#E8607A) dá 3,29:1, e a WCAG pede 4,5:1 para texto de 16px --
   este é o botão principal do site inteiro, então era o pior lugar para
   ficar devendo. O token --coral NÃO mudou: ele é borda de acento e cor de
   número, onde não carrega texto por cima e o valor da marca vale.
   #CE3B57 mantém o matiz (348,5°) e baixa a claridade de 64% para 52%:
   4,78:1 com branco, medido. Se um dia alguém "unificar" os dois de volta,
   o botão volta a reprovar sem nada avisar. */
.heroi .botao-cheio{background:var(--coral-botao);color:#fff;border-color:var(--coral-botao)}
.heroi .botao-cheio:hover{background:var(--coral-botao-hover);border-color:var(--coral-botao-hover)}
.heroi .botao-vazado{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.heroi .botao-vazado:hover{background:rgba(255,255,255,.12);border-color:#fff}
.heroi .ico-turq,.heroi .ico-ambar,.heroi .ico-coral{background:rgba(255,255,255,.14);color:#E4E9FA}
.heroi-grade{grid-template-columns:1fr;padding-block:clamp(44px,5.5vw,72px) clamp(48px,6vw,76px)}
/* A abertura da home ficava em quatro linhas: a coluna tinha 60ch e o h1 ia a
   58px, então cada frase quebrava no meio. Coluna mais larga e h1 no mesmo
   tamanho da página de ecossistema deixam uma frase por linha, e a capa
   encolhe junto. */
.heroi-grade > div{max-width:none}
#p-home .heroi h1{font-size:clamp(30px,4.4vw,46px);max-width:22ch}
#p-home .heroi p.linha-fina{max-width:56ch}
#p-edu .heroi{background-image:url("img/fundo-edu.svg")}
#p-obz .heroi{background-image:url("img/fundo-obz.svg")}
#p-man .heroi{background-image:url("img/fundo-man.svg")}
#p-pub .heroi,#p-conf .heroi{background-image:url("img/fundo-home.svg")}
.faixa-eco{opacity:.9}
/* Ritmo de cor das seções. Regra: nunca dois blocos escuros seguidos, e a
   faixa escura marca o argumento que precisa de peso, não o que vem primeiro. */
.faixa-clara{background:var(--branco);color:var(--tinta)}
.faixa-clara h2,.faixa-clara h3{color:var(--tinta)}
.faixa-clara .envolve>p{color:var(--tinta-2)}
.faixa-clara .cartao-publico{background:var(--creme);border:1px solid var(--borda)}
.faixa-clara .cartao-publico p{color:var(--tinta-2)}
.faixa-clara .link-cartao{color:var(--primaria)}
.faixa-clara .cartao-link:hover{border-color:var(--primaria)}
.faixa-escura{background:var(--secao-escura);color:#fff}
.faixa-escura h2,.faixa-escura h3{color:#fff}
.faixa-escura p,.faixa-escura .envolve>p{color:#DDE3F5}
.faixa-escura .olho{color:#F7C2CD}
.faixa-escura .botao-cheio{background:var(--coral-botao);border-color:var(--coral-botao);color:#fff}
.faixa-escura .botao-cheio:hover{background:var(--coral-botao-hover);border-color:var(--coral-botao-hover)}
.faixa-creme{background:var(--creme)}
.faixa-branca{background:var(--branco)}
/* home: claro, creme, claro, creme, ESCURO, creme -- a sequência continua
   sendo esta, mas quem a aplica agora é ritmo_de_cor(), no gerador, igual
   às outras cinco páginas. Ficava aqui, presa ao id, e o resultado era que
   a home tinha ritmo e as migradas não: a regra existia num lugar que as
   outras páginas não alcançavam. Os fios do .ciclo continuam. */
#p-home .ciclo{border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
/* educacional: a faixa de números fica clara logo abaixo do herói. O resto
   do ritmo saiu daqui: quem alterna agora é ritmo_de_cor(), no gerador, que
   marca cada seção com .faixa-branca ou .faixa-creme e garante que duas
   vizinhas nunca empatem. Estas três regras diziam o contrário dela e, por
   serem escopadas por id, ganhavam da classe em silêncio:
       #p-edu .faixa-numeros + .secao{background:var(--branco)}
       #p-edu .ciclo{background:var(--branco)}
       #p-edu .contato{background:var(--branco)}
   Eram elas que faziam a faixa de números e a seção seguinte saírem brancas
   uma na outra. */
#p-edu .faixa-numeros{background:var(--branco)}
/* Moldura de janela nas capturas. Print solto parece captura de suporte;
   dentro de uma janela, com sombra e fundo tingido, lê-se como produto. */
.passo-palco{background:linear-gradient(150deg,#EDEFF8 0%,#F7F4EF 55%,#F2E9EC 100%);
  border-color:var(--linha);padding:26px 26px 0}
/* Mesmo defeito dos `.ico-*`, na mesma folha: solto no topo, o
   `:root:not([data-theme="light"])` fazia o palco das capturas receber o
   gradiente ESCURO dentro da página clara. Conferido por DOM na /educacional/
   em tema claro, antes do conserto: o palco computava
   `rgb(36,44,78) → rgb(46,58,107) → rgb(58,48,80)`. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .passo-palco{
    background:linear-gradient(150deg,#242C4E 0%,#2E3A6B 55%,#3A3050 100%)}
}
:root[data-theme="dark"] .passo-palco{
  background:linear-gradient(150deg,#242C4E 0%,#2E3A6B 55%,#3A3050 100%)}
.passo-slide img{border-radius:0}
.passo-janela{border-radius:12px 12px 0 0;overflow:hidden;
  box-shadow:0 26px 60px rgba(27,34,71,.28),0 4px 12px rgba(27,34,71,.14)}
.passo-barra{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#F2F3F8;
  border-bottom:1px solid var(--borda)}
.passo-barra i{width:10px;height:10px;border-radius:50%;display:block}
/* ⚠️ COR FIXA, NÃO TOKEN, DE PROPÓSITO. .passo-barra imita a barra de um
   navegador de verdade numa captura de tela -- o fundo já é #F2F3F8 fixo,
   sempre claro, em qualquer tema do site. Mas o texto usava var(--primaria)
   e var(--tinta-3), que CLAREIAM no tema escuro (são pensados para fundo
   escuro) -- contra o fundo que não escurece junto, dava 2,40:1 e 2,34:1,
   abaixo do 4,5:1 da WCAG. Mesmo defeito em /manutencao/, que usa o mesmo
   componente. Os valores abaixo são os mesmos de --primaria/--tinta-3 no
   tema claro, fixados: certos nos dois temas, porque a barra nunca muda. */
.passo-barra .passo-marca{margin-left:14px;font-family:"Quicksand",sans-serif;font-weight:700;
  font-size:14px;color:#2E3A6B;letter-spacing:-.01em}
.passo-barra span{margin-left:10px;padding-left:11px;border-left:1px solid var(--borda);
  font-family:"DM Sans",sans-serif;font-size:12.5px;color:#5E6478}
.passo-slide figcaption{margin:0 -26px;border-radius:0}
/* Respiro das seções, declarado UMA vez -- aqui. A medida anterior,
   clamp(64px,9vw,112px), dava 224px entre um bloco e outro em tela larga:
   fazia sentido com os parágrafos longos de antes e, com o texto encurtado,
   virou vazio. */
.secao{padding:clamp(40px,4.6vw,64px) 0}
.faixa-numeros .envolve{padding-top:26px;padding-bottom:26px}
/* Parágrafo depois dos números atravessa a grade.
   Ele pertence à FAIXA, não a uma coluna: entrando como quarto item de
   `repeat(3,1fr)`, herdava 306px sem querer e a frase de 165 caracteres saía
   em 5 linhas de 33 -- um filete estreito ao lado de uma página larga.

   O teto é medida de LINHA, não largura de contêiner. Medido nesta frase, de
   165 caracteres: de 40ch a 58ch dá 3 linhas de 55; 64ch dá 2 linhas de 83, e
   daí para cima nada muda -- 72ch e sem teto nenhum dão o mesmo. 64ch é o
   degrau, e o valor MAIS ESTREITO que chega em 2 linhas.

   83 caracteres passa do conforto de leitura, que fica entre 75 e 80, e para
   prosa corrida isto seria erro. Aqui não é: são DUAS linhas, e o custo da
   medida longa é o olho procurar o começo da linha seguinte muitas vezes
   seguidas. Aqui ele volta uma vez. Decisão da Marianna, 14/09/2026.

   E é melhor do que tirar o teto: mesmo resultado visual, mas com limite --
   num monitor mais largo, ou com um texto maior amanhã, a linha não dispara. */
.faixa-numeros .linha-fina{grid-column:1 / -1;max-width:64ch}
/* o primeiro bloco depois da capa não precisa do respiro cheio em cima */
.heroi + .secao{padding-top:clamp(32px,3.6vw,48px)}
/* A FAIXA DE NÚMEROS SAIU DESTA REGRA em 14/09/2026. Ela não é uma seção de
   conteúdo, é uma tira de três números entre duas linhas, e o respiro dela é o
   do próprio `.envolve`: 26 em cima, 26 embaixo.
   O padding de seção somava só de um lado, porque a faixa nunca teve
   `padding-bottom`. Enquanto havia um segundo `.envolve` embaixo dos números
   isso não aparecia. Quando ele saiu, virou o que a Marianna fotografou:
   medido a 1280px, 73px acima dos números e 27 abaixo, dentro de uma tira de
   163px. Com a faixa fora da regra fica 27 e 27.
   A capa continua separada: ela tem 72px de respiro próprio embaixo, então
   sobram 98px entre o texto da capa e os números. Espaçamento separa; aqui já
   havia quem separasse. */
.dados-grade{margin-top:30px}
.publico-alvo{margin-top:26px}
.grade-mod{margin-top:28px}
.ciclo-trilha{margin-top:30px}
.telas,.passo{margin-top:26px}
.lista-pub{margin-top:30px}
.oferta{margin-top:28px}
.futuros{margin-top:28px}
.rodape{padding:32px 0 40px}
/* Símbolo ao lado do wordmark. No tamanho do cabeçalho o "b" do núcleo fica
   ilegível, então ele sai: o wordmark ao lado já diz o nome. */
.marca{display:inline-flex;align-items:center;gap:9px}
.simbolo{width:26px;height:22px;flex:none;display:block}
.simbolo-g{width:31px;height:26px}
/* ⚠️ O HERÓI REDEFINE OS TOKENS DO SÍMBOLO, e não repinta o desenho.
   Até 21/09/2026 esta linha era `.heroi .simbolo circle[fill="#2E3A6B"]{fill:#8E9CD8}`:
   achava o círculo pelo VALOR do preenchimento e o trocava. Funcionava, e tinha
   dois defeitos. Dependia de o hexadecimal continuar exatamente aquele, então
   mudar o token da primária quebraria o remendo em silêncio. E alcançava só o
   herói: o topo, que aparece em toda página, ficava com o núcleo em 1,64:1 no
   tema escuro, enquanto o halo subia a 13,86:1.
   Agora o símbolo lê os tokens, e quem está sobre fundo escuro dentro de página
   clara só precisa dizer quais valem ali. São os mesmos valores do tema escuro. */
.heroi .simbolo{--primaria:#8E9CD8;--primaria-clara:#B4BFE9;--halo:#2A3355;--linha:#4A5480}

/* ---------- página de editais (captação) ----------
   Cartão de edital é o cartão .mod da página do Educacional com quatro
   campos rotulados dentro. Não tem cartão próprio de propósito: a primeira
   versão desta página tinha CSS inteiro só dela e ficou parecida com o
   site sem ser o site. */
/* Faixa com dois números, não três. Só entra numeral aqui: a data de
   conferência já esteve neste lugar como <strong> e, além de não ser
   número, saía em âmbar sobre branco a 2,16:1. Ela virou linha de apoio. */
@media(min-width:760px){.faixa-numeros-duas .envolve{grid-template-columns:repeat(2,1fr)}}
/* O título ocupa a linha inteira do cartão. Nome de edital tem dez palavras,
   e enquanto a pílula de prazo dividia a linha com ele dentro do .mod-topo o
   título quebrava a cada duas. A pílula foi para junto do prazo, que é o dado
   que ela qualifica. */
/* Duas colunas, não três. A grade de módulos do Educacional tem três porque
   lá o cartão carrega um título curto e uma frase; aqui carrega um nome de
   edital de sessenta caracteres e quatro campos rotulados. Com três colunas
   sobra 214px para o título e ele sai em quatro linhas. */
@media(min-width:1060px){.passo-slide .grade-mod{grid-template-columns:repeat(2,1fr)}}
/* Todas as caixas do mesmo tamanho, inclusive entre linhas. Dentro da linha
   a grade já igualava; entre linhas não, e a página ficava com cartões de
   626, 602, 533 e 671px. `1fr` em grid-auto-rows faz toda linha ter a altura
   da mais alta. Escopado à página de captação: na do Educacional o cartão de
   módulo é curto e igualar criaria vazio. */
#p-pub .grade-mod{grid-auto-rows:1fr}
/* Áreas logo abaixo do título, não no rodapé do cartão: é ali que o leitor
   decide se o item é para ele. */
.areas-cartao{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.titulo-edital{min-width:0}
.mod .titulo-edital h3{font-size:17.5px;line-height:1.3}
.mod-topo:has(.titulo-edital){align-items:flex-start}
.promotor-edital{margin:4px 0 0;font-size:14px;color:var(--tinta-3)}
/* A marca de multissetorial precisa de CHIP, não de texto. Ela existe para
   o leitor RECONHECER o cartão na segunda vez que o encontra: o Fundo Social
   do Sicoob financia seis áreas, então aparece em seis seções. Em caixa alta
   sem fundo ela se perde no meio do nome do promotor, e a repetição volta a
   se ler como defeito da página.
   Estilizada pelo lugar, não por classe nova: o gerador emite `.pilula` sem
   variante, e pedir mudança lá para uma questão de forma seria trabalho de
   duas pontas por nada. */
.promotor-edital .pilula{background:var(--halo);color:var(--primaria-escura);
  font-weight:600;margin-left:6px;vertical-align:1px}
/* NÃO EXISTE MAIS uma pílula de "sem recurso financeiro". Ela marcava a
   AUSÊNCIA de dinheiro, e ausência obriga o leitor a inferir o resto. O que
   ele precisa é saber o que RECEBE, e isso virou dois campos do cartão --
   "Tipo de apoio" e "O que você recebe" -- na mesma posição em todos, para
   dar para varrer a coluna sem ler o detalhe de cada um. Decisão da
   Marianna, 12/09/2026. Se alguém recriar a pílula, está desfazendo isso. */
/* A contagem de dias sai do arranjo da .pilula comum. Mono a 10,5px, em
   caixa alta e com .1em de espaçamento, é o pior arranjo possível para um
   número: "FALTAM 16 DIAS" fica pequeno, largo e difícil de bater o olho.
   Aqui a letra é a do texto, sem caixa alta, e quem manda é o número --
   ele é o dado, "dias" é a unidade. tabular-nums para os cartões não
   dançarem entre 7 e 16 dias. */
/* `.campo-edital span` (0,1,1) ganha de `.pilula-prazo` (0,1,0): a pílula
   vive dentro dele e herdava 14,5px em vez dos 12,5 daqui. Medido, não
   suposto. Por isso o seletor abaixo carrega o pai. */
.campo-edital .pilula-prazo{margin-left:8px;vertical-align:1px;
  font-family:inherit;font-size:12.5px;text-transform:none;letter-spacing:0;
  padding:3px 10px;font-variant-numeric:tabular-nums}
.campo-edital .pilula-prazo b{font-weight:700;font-size:13.5px}
/* Vencido entre uma varredura e outra: o cartão não some, fica marcado.
   Some na varredura seguinte, que é quem tem autoridade para tirá-lo. */
.p-vencido{background:#F3F0EC;color:#6B6257;border:1px dashed #9A8F80;font-weight:600}
.mod-vencido{opacity:.62}
.mod-vencido .rotulo-pa{border-bottom-style:dashed}
.campo-edital{margin:0;display:grid;gap:2px}
.campo-edital b{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-3)}
.campo-edital span{font-size:14.5px;color:var(--tinta)}
/* Campo que a fonte não informa fica visível e marcado, em vez de sumir.
   Sumir faria o projeto parecer completa quando não está, e é justamente onde
   o leitor precisa saber que tem de abrir o edital. */
.campo-edital span.ausente{color:var(--tinta-2);font-style:italic}
.carimbo-edital{margin:0;font-size:12px;color:var(--tinta-3)}
.mod .rotulo-pa{margin-top:auto;padding-top:4px}
.triagem{margin:14px 0 0;padding-left:20px;color:var(--tinta-2);font-size:15px}
.triagem li{margin-bottom:10px}
.triagem b{color:var(--tinta)}

/* ---------- sumário de áreas, na página de captação ----------
   Faixa de atalhos em UMA linha. Chip é pequeno de propósito: é navegação,
   não conteúdo, e não pode competir com os cartões abaixo. Em tela estreita
   a faixa rola na horizontal em vez de quebrar em três linhas e empurrar a
   página inteira para baixo.

   Some com menos de duas áreas: seletor de uma opção não é navegação, é
   ruído que parece defeito. Quem emite decide não imprimir a lista; aqui
   fica a rede, para o caso de vir com um item só. */
.indice-setores{list-style:none;margin:22px 0 0;padding:0;display:flex;gap:8px;
  overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.indice-setores:has(li:only-child){display:none}
.indice-setores li{flex:none}
.indice-setores a,.indice-setores button{display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px 7px 8px;border:1px solid var(--borda);border-radius:999px;
  background:var(--branco);text-decoration:none;color:var(--tinta);
  font-size:14.5px;white-space:nowrap;transition:border-color .15s}
.indice-setores a:hover,.indice-setores button:hover{border-color:var(--primaria)}
.indice-setores .ico{width:26px;height:26px;border-radius:50%;padding:0}
.indice-setores .ico svg{width:16px;height:16px}
.indice-setores b{font-weight:600}
/* O sumário também serve de filtro: então aceita <button>, com um estado
   aceso. Antes eu inventava uma classe .chip no mock em vez de estender o
   componente que já existe -- vocabulário paralelo é como a página deixa de
   parecer o site sem ninguém mudar o site. */
.indice-setores button{font:inherit;font-size:14.5px;cursor:pointer}
.indice-setores .ativo{background:var(--primaria);border-color:var(--primaria);color:#fff}
.indice-setores .ativo > span{background:rgba(255,255,255,.22);color:#fff}
/* a contagem vem em <span>: número em destaque, ausência em tom baixo, para
   "8 abertas" e "nenhuma aberta" não terem o mesmo peso visual */
.indice-setores a > span,.indice-setores button > span:last-child{font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:11.5px;font-weight:700;background:var(--halo);
  color:var(--primaria-escura);padding:2px 8px;border-radius:999px}
.indice-setores button > span:last-child{margin-left:2px}

/* ---------- estado da área, dito uma vez no cabeçalho da seção ---------- */
.selo-setor{display:inline-block;margin-top:14px;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.04em;padding:5px 12px;border-radius:999px}
.selo-setor.tem{background:var(--halo);color:var(--primaria-escura)}
.selo-setor.vazio{background:var(--creme);border:1px solid var(--borda-controle);
  color:var(--tinta-2)}
/* Caixa de área varrida e sem nada aberto. Borda cheia, de propósito: o
   tracejado ficou reservado para "ninguém olhou ainda", e as duas coisas não
   podem se parecer. */
.setor-vazio{margin-top:26px;border:1.5px solid var(--borda);background:var(--branco);
  border-radius:var(--raio);padding:26px}
.setor-vazio h3{font-size:18px}
.setor-vazio p{color:var(--tinta-2);margin-top:10px;max-width:62ch;font-size:15.5px}
.setor-topo{display:flex;align-items:center;gap:14px}
.setor-topo .ico{width:42px;height:42px}

/* ---------- abas de tipo na página de captação ----------
   Na página do Educacional a aba é pílula pequena em mono, e funciona: lá
   ela rotula uma tela dentro de um passo a passo, e é controle secundário.

   Aqui ela carrega a divisão principal da lista, editais contra programas,
   que são atos diferentes. Em pílula de 11,5px ela ficava idêntica ao selo
   de conferência logo acima -- três pílulas iguais empilhadas, e a do meio
   não parecia clicável. Aqui vira aba de verdade: sublinhado no selecionado,
   corpo de texto legível, e um fio embaixo que agrupa as duas.

   Escopado por #p-pub para não mexer no Educacional. */
#p-pub .passo-abas{gap:0;margin-top:26px;margin-bottom:26px;
  border-bottom:1px solid var(--borda);padding-bottom:0}
#p-pub .passo-aba{font-family:inherit;font-size:15.5px;font-weight:600;
  letter-spacing:0;text-transform:none;background:transparent;border:0;
  border-bottom:2.5px solid transparent;border-radius:0;color:var(--tinta-3);
  padding:10px 20px;height:auto;cursor:pointer;
  transition:color .15s,border-color .15s}
#p-pub .passo-aba:hover{color:var(--tinta)}
#p-pub .passo-aba[aria-selected="true"]{color:var(--primaria);
  border-bottom-color:var(--coral-botao)}
/* o número da ordem sai: com duas abas nomeadas, "01" e "02" só ocupam
   espaço. Ele continua no HTML, para o Educacional seguir usando. */
#p-pub .passo-aba b{display:none}

/* A faixa de mídia que apertava o cabeçalho entre 1020 e 1180 saiu: os
   valores dela viraram os valores-base, porque com a DM Sans não existe
   largura em que os folgados coubessem. Duas faixas aninhadas foi o defeito
   de 12/09 e uma faixa sozinha virou código morto em 13/09 -- as duas vezes
   pela mesma causa, medida tirada numa largura e generalizada para todas. */
  .acoes{gap:8px}
  .acoes .botao-peq{padding:0 11px}
}

/* ---------- ponte entre a área e a seção do fim ----------
   Linha, não caixa. `.retorno` traz fundo creme, e esta linha aparece dentro
   de seções que já são creme -- caixa creme sobre faixa creme some. Um filete
   à esquerda lê igual nas duas faixas, e não inventa um dispositivo novo.
   Dentro da caixa de vazio ela perde o filete: ali já existe borda em volta,
   e dois contornos aninhados brigam. */
.ponte-multi{margin:16px 0 0;padding-left:14px;max-width:64ch;
  border-left:3px solid var(--primaria);color:var(--tinta-2);font-size:15.5px}
.ponte-multi strong{color:var(--tinta);font-weight:600}
.vazio .ponte-multi{border-left:0;padding-left:0;margin-top:10px}

/* ============================================================
   Convergência com o design system, 13/09/2026

   A troca de família, peso, corpo e tracking foi feita NA REGRA DE ORIGEM,
   acima nesta folha -- não aqui. O que sobra neste bloco é o que não tem
   regra de origem: alinhamento de dígito, respiro entre título e subtítulo,
   âncora sob o cabeçalho fixo e a moldura das capas.

   Cor, raio, largura e ritmo de faixa não mudaram: já coincidiam com o
   sistema. A DM Sans entra pelo <link> que cabeca() escreve em toda página;
   @import no fim da folha seria descartado em silêncio pelo navegador.
   ============================================================ */

/* Número em coluna: a DM Sans traz tabular-nums, então a coluna alinha sem
   monoespaçada. */
.num,
.campo-edital .pilula-prazo,
.disco,
.numero strong,
.fn strong{font-variant-numeric:tabular-nums}

/* Subtítulo de setor e de página: o teto de caracteres quebrava frase curta
   em duas linhas e deixava metade da faixa vazia. Onde o bloco é de coluna
   única o teto sobe; onde quem limita é a grade de duas colunas (.heroi,
   .quem-grade), o teto de 52ch continua certo e não é tocado. */
.ponte-multi{max-width:none;text-wrap:pretty}
/* Os tetos de caractere NÃO subiram, e o motivo é a troca de fonte.
   A conta do patch (75ch a 20px ≈ 750px) valia para a Source Sans 3. Em
   DM Sans a unidade `ch` -- a largura do algarismo zero -- é bem maior:
   medido, 14,36px a 20px. Com ela, 75ch dá 1077px, que é a coluna inteira,
   e a linha passa a ter ~101 caracteres, acima do limite legível de ~75.
   Os tetos originais, com a fonte nova, já dão 804px e ~67 caracteres por
   linha: o bloco de 4 linhas curtas que motivou o ajuste virou 3 linhas
   cheias sozinho, pela troca de família. Mexer aqui pioraria. */
.heroi-detalhe p.linha-fina,
.detalhe-intro,
.publico .envolve>p{text-wrap:pretty}

/* Âncora sob o cabeçalho fixo. `.topo` é sticky e não havia
   scroll-padding-top: o navegador parava a rolagem no topo exato da seção e
   o cabeçalho cobria a faixa da altura dele. Em /#contato o que sobrava na
   tela era a faixa escura anterior, e o formulário parecia sumido.
   Medido com o cabeçalho em uma linha (68px) mais 20px de folga. */
html{scroll-padding-top:88px}
@media(max-width:639px){html{scroll-padding-top:76px}}

/* Capa de publicação: a regra sempre foi a mesma, as artes é que não são --
   duas trazem margem branca em volta do conteúdo e mapa-icms.webp vai até a
   borda, então uma parecia embutida e a outra sangrada; e as proporções
   diferentes desalinhavam o texto de um cartão para o outro na mesma linha.
   A moldura dá a mesma margem a todas e a proporção fixa iguala a altura.
   O conserto de verdade é reexportar mapa-icms.webp com a mesma margem. */
.pub-capa{box-sizing:border-box;padding:8px;background:var(--branco);
  aspect-ratio:2/1;object-fit:cover;object-position:center top}

/* Espaço entre título e subtítulo. Os valores anteriores foram medidos com o
   subtítulo ocupando duas ou três linhas: bloco alto precisa de pouco respiro
   acima, senão descola do título. Depois que a frase passou a caber em uma
   linha, o mesmo respiro deixou ela encostada -- uma linha só tem menos massa
   e precisa de mais ar para se ler como subtítulo, e não como continuação do
   título. Sobe junto o espaço ABAIXO do par, que precisa ser maior que o de
   dentro dele, senão o subtítulo se agrupa com o conteúdo que vem depois. */
.ponte-multi{margin-top:22px}
.heroi-detalhe h1{margin-top:14px}
/* O elemento entra no seletor porque `.heroi p.linha-fina` (linha 181)
   tem duas classes MAIS o elemento: sem o `p` aqui, o respiro de 22px
   de lá vencia por especificidade e esta regra não tinha efeito. */
.heroi-detalhe p.linha-fina{margin-top:26px}
.detalhe-intro{margin-top:26px}
.publico .envolve>p{margin-top:24px}
/* O olho que abre a seção é um `p`, então esta regra também o alcançava: 24px
   somados ao padding da faixa, dando 70px acima de um rótulo que não tem
   vizinho em cima. O respiro de 24 vale entre os parágrafos, não antes do
   primeiro. */
.publico .envolve>p:first-child{margin-top:0}

/* As seções recolhíveis (<details class="area">) foram canceladas em
   14/09/2026: a página de projetos passou a ser montada em cascata pelo
   gerador do acervo. O CSS delas saiu daqui junto -- regra que descreve
   elemento que não existe mais é a armadilha de sempre. */

/* ---------- o atributo `hidden` tem de vencer ----------
   A folha do navegador declara `[hidden]{display:none}` com a menor
   especificidade que existe. Qualquer `.classe{display:flex}` passa por cima,
   e o elemento fica na tela COM o atributo marcado -- o script acha que
   escondeu, a contagem bate, e a pessoa continua vendo tudo.

   Aconteceu duas vezes nesta folha: nos cartões do acervo (`.mod` é flex) e
   no filtro de áreas da página de editais, que esconde cartão do mesmo jeito.
   Uma linha resolve as duas e qualquer próxima. */
[hidden]{display:none !important}

/* O estilo da busca do acervo mora com a cascata, mais abaixo, junto do
   resto de `.ac-*`. As regras de `.busca-acervo`, `.busca-conta` e
   `.busca-vazio` saíram em 14/09/2026 com o layout que foi cancelado. */

/* ============================================================================
   ACERVO DE BOAS PRÁTICAS — duas dobras verticais
   A marcação é gerada por Bloom Publicações/boas-praticas-setor-publico/
   scripts/gerar_pagina_site.py. Substituiu, em 14/09/2026, a cascata
   horizontal de três colunas: a Marianna viu no navegador e pediu lista.

   NÍVEL 1  segmento, como seção recolhida
   NÍVEL 2  uma linha por projeto: nome e órgão executor
   NÍVEL 3  a linha expande e mostra o detalhamento

   AS DUAS DOBRAS SÃO <details> NATIVO. Abrem e fecham, respondem a teclado e
   são anunciadas como expansíveis sem uma linha de script. O JS só filtra.
   ========================================================================= */

.ac-controles{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 18px}
/* Os 26px de cima separam o formulário do que vier acima dele. Quando ele é o
   PRIMEIRO filho da faixa não há nada acima, e a margem só soma ao padding da
   seção: eram 85px de vazio (58,88 + 26) a 1280px, sobre um formulário que não
   estava separado de coisa nenhuma. */
.envolve > .ac-controles:first-child{margin-top:0}
.ac-controles[hidden]{display:none}
.ac-controle{flex:1 1 260px;min-width:0}
.ac-controles .campo{width:100%}
.ac-conta{flex:0 0 auto;font-weight:600;color:var(--tinta-2);font-size:14.5px}

.ac-areas{display:grid;gap:10px;margin-top:6px}

/* <summary> é CONTROLE: borda --borda-controle, não --linha. */
.ac-area{border:1px solid var(--borda-controle);border-radius:var(--raio);
  background:var(--branco);overflow:hidden}
.ac-area[hidden]{display:none}
.ac-area-cabeca{display:flex;align-items:center;gap:12px;padding:14px 16px;
  cursor:pointer;list-style:none;user-select:none}
.ac-area-cabeca::-webkit-details-marker{display:none}
.ac-area-cabeca h2{font-family:Quicksand,sans-serif;font-size:18px;margin:0;flex:1;min-width:0}
.ac-area-conta{font-weight:600;font-size:13.5px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* O marcador padrão do summary sai e entra um sinal próprio, que gira. */
.ac-area-cabeca::after{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);
  transform:rotate(45deg);margin-left:4px;transition:transform .15s}
.ac-area[open]>.ac-area-cabeca::after{transform:rotate(-135deg)}
.ac-area-cabeca:hover{background:var(--creme)}
.ac-area-cabeca:focus-visible{outline:3px solid var(--turquesa);outline-offset:-3px}

.ac-projetos{list-style:none;margin:0;padding:0 10px 10px;display:grid;gap:6px}
.ac-item[hidden]{display:none}
.ac-proj{border:1px solid var(--linha);border-radius:var(--raio);background:var(--branco)}
/* A LINHA DO PROJETO PRECISA DIZER QUE ABRE.
   O cabeçalho do segmento já tinha o sinal; a linha do projeto não tinha
   nenhum, e sem affordance ninguém descobre que ela expande -- foi o que a
   Marianna reparou olhando a lista.

   O sinal é o mesmo do segmento, desenhado com borda e `content:""`: sem
   texto, não é lido por leitor de tela, e o `<summary>` já anuncia sozinho
   se está aberto ou fechado. Chevron com caractere duplicaria o anúncio.

   A rotação vem de `[open]`, que é estado do elemento nativo -- nada de
   classe posta por script.

   `list-style:none` sozinho não basta: o Safari desenha o triângulo por
   `::-webkit-details-marker`, e sem a regra abaixo sobrariam dois sinais. */
/* A COLUNA 3 GUARDA A ESTRELA EM CIMA DA SETINHA, e não ao lado dela.
   Decisão da Marianna em 21/09/2026: "com a estrela de salvar em cima da
   setinha para detalhar a prática". Quem empilha os dois é esta grade: a
   estrela na linha 1, a setinha na linha 2, as duas na mesma coluna.
   ⚠️ `minmax(0,1fr)` e não `1fr`: em grade, `1fr` tem mínimo `auto`, e o nome
   comprido de uma prática empurraria a coluna da estrela para fora da tela. */
.ac-proj-cabeca{display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 40px;gap:4px 16px;
  padding:11px 14px;cursor:pointer;list-style:none;align-items:baseline}
.ac-proj-cabeca::-webkit-details-marker{display:none}
.ac-proj-cabeca::after{content:"";width:8px;height:8px;justify-self:center;
  grid-column:3;grid-row:2;align-self:start;margin-top:2px;
  border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);
  transform:rotate(45deg);transition:transform .15s}
.ac-proj[open]>.ac-proj-cabeca::after{transform:rotate(-135deg) translate(-2px,-2px)}
/* Quem pediu menos movimento não recebe a rotação animada -- o sinal continua
   girando, só sem o caminho entre um estado e outro. */
@media(prefers-reduced-motion:reduce){
  .ac-area-cabeca::after,.ac-proj-cabeca::after{transition:none}
}
.ac-proj-cabeca:hover{background:var(--creme)}
.ac-proj-cabeca:focus-visible{outline:3px solid var(--turquesa);outline-offset:-3px}
.ac-proj[open]{border-color:var(--borda-controle)}
.ac-nome{font-family:Quicksand,sans-serif;font-weight:600;font-size:15.5px;
  line-height:1.3;grid-column:1;grid-row:1 / span 2}
.ac-org{font-size:13px;color:var(--tinta-3);grid-column:2;grid-row:1 / span 2}
.ac-proj-cabeca .estrela{position:static;grid-column:3;grid-row:1;
  justify-self:center;width:30px;height:30px}
.ac-proj-cabeca .estrela svg{width:19px;height:19px}
/* Estreito: nome e órgão voltam a empilhar, e a coluna da estrela vira a 2. */
@media(max-width:640px){
  .ac-proj-cabeca{grid-template-columns:minmax(0,1fr) 40px}
  .ac-nome{grid-column:1;grid-row:1}
  .ac-org{grid-column:1;grid-row:2}
  .ac-proj-cabeca .estrela{grid-column:2;grid-row:1}
  .ac-proj-cabeca::after{grid-column:2;grid-row:2}
}

.ac-det{padding:4px 14px 14px;display:grid;gap:10px;border-top:1px solid var(--linha);
  margin:0 14px 12px}
/* DENTRO DO PAINEL, RÓTULO E TEXTO TÊM O MESMO TAMANHO: 14,5px.
   Havia duas escalas de corpo aqui (14,5 nos campos, 17 nas seções de prosa),
   com 17% de salto na mesma coluna. Unifiquei primeiro em 17, o corpo de página
   do site, e estava errado: com o rótulo em 11px, o texto ficava 55% MAIOR que
   o título que o governa. A Marianna: "a letra do texto tem que ser menor ou
   igual a do que a do subtítulo". A regra dela é "menor ou igual"; o valor veio
   da medição.
   17 é o corpo de uma PÁGINA de prosa. Isto é um painel denso de campos
   rotulados, e aqui o rótulo é que manda no teto.
   Igual e não menor porque rótulo está em 11px, e 11px de texto corrido não se
   lê. O que separa os dois continua sendo o que a identidade já manda: peso
   600, versalete, tracking e `--tinta-3`. Fazer o TAMANHO repetir essa
   distinção era redundante, e foi a redundância que produziu a inversão.
   Medido no painel do RONDADH: 14,5 não quebra nenhum rótulo em duas linhas
   nem a 1280px nem a 430px -- o mais longo, "Quem apura o resultado", ocupa
   222px de uma faixa de 302 no celular. Testei 13,5 e 13 também: nenhum quebra,
   então 14,5 fica por ser o maior que cabe. O painel encolhe: 826 → 775 a
   1280px, 1626 → 1333 a 430px. Contraste do rótulo sobre o painel: 5,88:1.
   ESCOPADO EM `.ac-det`: `.campo-edital` é compartilhada com a página de
   editais, que está no ar, e mexer na classe mudaria as duas. `> b` e `> span`
   e não `b`/`span`, para não alcançar nada aninhado. A altura de linha não vem
   escrita: é herdada como razão (1,6) e segue o tamanho sozinha. */
.ac-det .ac-texto{font-size:14.5px}
/* A prosa do painel vem de markdown convertido, e o que a conversão emite não
   tem classe: `h4`, `ul`, `ol`, `blockquote` caíam no padrão do agente de
   usuário. Não era regra errada, era regra AUSENTE.
   O `display:grid;gap:9px` está repetido aqui de propósito: hoje ele chega por
   `style=` embutido em cada um dos 520 blocos, emitido pelo gerador do acervo.
   Estilo embutido ganha de qualquer folha, então enquanto ele estiver lá esta
   linha não faz nada -- e no dia em que sair, o bloco não desmonta. */
.ac-det .ac-texto{display:grid;gap:9px}
/* TÍTULO PERTENCE AO QUE VEM DEPOIS DELE. O padrão do navegador para `h4` é
   `margin:1.33em 0`, simétrico: medido, dava 28px acima e 28 abaixo (os 9 do
   `gap` mais 19,285 de margem dos dois lados). Distância igual dos dois lados
   quer dizer que o subtítulo não pertence a nenhum dos dois blocos: ele
   flutuava no meio. Foi o que a Marianna viu em "Medido (com fonte)".
   Medido no painel, com o subtítulo entre um `p` e uma `ul`:
     hoje ............ 28 acima · 28 abaixo
     margem 9px ...... 18 · 9
     margem 13px ..... 22 · 9
     margem 17px ..... 26 · 9   ← fica esta
     margem 21px ..... 30 · 9
   17px porque mantém a separação do bloco ANTERIOR praticamente como estava
   (28 → 26) e ainda assim deixa o vínculo com o que vem abaixo três vezes mais
   curto. Abaixo fica só o `gap`, sem margem nenhuma.
   `:first-child` pelo mesmo motivo de sempre: título que abre o bloco não tem
   vizinho acima, e a margem só somaria ao respiro do painel.
   O peso vem escrito como 600 porque é o mais pesado que a folha CARREGA
   (DM Sans 400;500;600). O padrão do navegador pede 700, e hoje o navegador
   entrega 600 na marra -- medi: a mesma frase tem largura idêntica em 600, 700
   e 900. Deixar 700 escrito é uma armadilha: no dia em que alguém acrescentar
   o peso 700 ao link da fonte, 263 subtítulos e 3.570 `strong` mudam sozinhos. */
.ac-det .ac-texto h3,
.ac-det .ac-texto h4,
.ac-det .ac-texto h5{margin:17px 0 0;font-weight:600;font-size:14.5px}
.ac-det .ac-texto h3:first-child,
.ac-det .ac-texto h4:first-child,
.ac-det .ac-texto h5:first-child{margin-top:0}
/* A GLOSA pertence ao subtítulo, não à lista. São 258 parágrafos
   `p.ac-glosa` emitidos pelo gerador do acervo com TODA a forma dentro de um
   `style=` embutido: `margin-top:-7px;font-size:13px;color:var(--tinta-3);
   font-style:italic`. Aquele -7px era um puxão para vencer o `gap:9px` do
   bloco, e estava calibrado contra a margem simétrica de 19,285 que o `h4`
   tinha: 19,285 + 9 - 7 dava 21px, que não é caption, é parágrafo comum.
   Ao zerar a margem de baixo do `h4` eu deixei esses 21px virarem 2px, e a
   glosa passou a encostar no subtítulo. O conserto não é devolver a margem:
   é dizer a que a glosa pertence.
   `!important` porque estilo EMBUTIDO ganha de folha, e a margem de cima dela
   está embutida. É dívida, não solução: o lugar de `.ac-glosa` é aqui, e
   enquanto o gerador emitir a forma no atributo esta é a única maneira de
   corrigir do lado do CSS. O `margin-bottom` não precisa de `!important`
   porque o atributo não o declara.
   Medido: 26 acima do subtítulo · 9 dele até a glosa · 17 da glosa até a
   lista. O par subtítulo+glosa lê como um bloco só, e a lista se separa. */
.ac-det .ac-texto h4 + .ac-glosa,
.ac-det .ac-texto h3 + .ac-glosa,
.ac-det .ac-texto h5 + .ac-glosa{margin-top:0 !important}
.ac-det .ac-texto .ac-glosa{margin-bottom:8px}
/* CITAÇÃO PRECISA PARECER CITAÇÃO. São 63 blockquotes, e todos caíam no padrão
   do navegador: `margin:1em 40px`, sem régua, sem cor própria. O que os marcava
   era o recuo mais o itálico do `<em>` de dentro. Não basta: dos 75 `<em>` do
   painel, 12 são ênfase comum, então itálico recuado quer dizer duas coisas na
   mesma coluna.
   A régua à esquerda é o que diz "esta voz não é nossa" sem depender do
   itálico, e é neutra de propósito: `--linha` é enfeite estrutural, e cor de
   marca aqui diria ecossistema, que é outra coisa (regra 1 da identidade).

   A MEDIDA NÃO PODE PIORAR, e por isso a régua entra a 24px em vez de colar na
   margem: o texto continua começando exatamente onde começava, a 40px, com a
   mesma largura de linha de antes (801px, 97 caracteres). Trocar o recuo pela
   régua teria alargado a linha para 104 caracteres -- o marcador de citação
   pagando com legibilidade.

   Vertical: 8px de margem mais os 9 do `gap` dão 17px, o mesmo respiro de
   "mudança de bloco" que a glosa usa até a lista. Antes de um subtítulo a
   margem cai para 9, senão 8+9+17 daria 34 onde o resto da página dá 26. */
.ac-det .ac-texto blockquote{margin:8px 40px 8px 24px;padding-left:16px;
  border-left:2px solid var(--linha);color:var(--tinta-2)}
.ac-det .ac-texto blockquote + h3,
.ac-det .ac-texto blockquote + h4,
.ac-det .ac-texto blockquote + h5{margin-top:9px}
.ac-det .campo-edital > b,
.ac-det .ac-temas-bloco > b{font-size:14.5px}
/* Rodapé do detalhamento: temas à esquerda, fonte à direita.
   A base é a linha comum -- o bloco de temas tem rótulo e pílulas, o botão
   tem uma linha só, e alinhar pelo topo deixaria o botão flutuando acima das
   pílulas. `align-items:flex-end` põe os dois na mesma base.
   Em tela estreita eles empilham, e aí a fonte vai para baixo dos temas, que
   é a ordem de leitura certa: primeiro do que trata, depois onde conferir. */
/* Os botões ficam juntos e numa linha só deles, em todos os cartões, alinhados
   à esquerda.

   DUAS coisas os desalinhavam, e a segunda quase passou por cima da primeira:

   1. `space-between` alinhava a borda DIREITA e deixava a ESQUERDA andar com a
      quantidade de botões: 716px com um, 548px com dois, 427px com três. O olho
      procura o começo, não o fim.

   2. O crédito da fonte (`> p`, largura inteira) sai do gerador ENTRE o segundo
      e o terceiro botão dos registros da Enap, e empurrava "Ver o programa" para
      a linha seguinte. `order` o manda para depois de todos os botões.

   ⚠️ Esta sessão mediu 622px de botões contra 605px de espaço e concluiu que não
   cabiam. A medição estava certa e a conclusão era falsa: somam 593px e cabem
   folgados. O que quebrava a linha era o elemento de largura inteira no meio,
   não a falta de espaço. Antes de apertar padding para "fazer caber", olhe a
   ORDEM dos filhos.

   ⚠️ `order` muda o que se vê, não a ordem de tabulação: quem navega por teclado
   ainda alcança o link do crédito entre o segundo e o terceiro botão. O conserto
   de verdade é o gerador emitir o crédito por último, e está em
   `docs/pendencias.md`. */
.ac-rodape{display:flex;align-items:flex-end;justify-content:flex-start;
  gap:16px;flex-wrap:wrap;margin-top:12px}
.ac-rodape .ac-temas-bloco{order:0;flex:0 0 100%;min-width:0}
.ac-rodape .ac-fonte{order:1}
.ac-rodape > p{order:2}
/* `margin-top` sai: quem dá o respiro agora é o rodapé, e somar os dois
   empurraria o botão para baixo da base das pílulas. */
.ac-fonte{flex:none}
/* Pílula de TEMA é categoria, não estado: não empresta .p-ok nem .p-dev, que
   no vocabulário do site querem dizer situação. */
.ac-temas-bloco > b{display:block;font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:6px}
.ac-temas{display:flex;flex-wrap:wrap;gap:6px}
.ac-temas .pilula{background:var(--creme);color:var(--tinta-2);border:1px solid var(--linha)}
/* Eco de cor do tema. São 24 temas para 4 cores, seis por cor: a cor
   RECONHECE (a pessoa já viu aquele tom no ícone do segmento), não
   identifica. Por isso as quatro não precisam ter a mesma força entre si --
   só precisam ser legíveis.
   Atributo e não `.ico-*`: aquelas classes são o DISCO do ícone e carregam
   tamanho, raio e padding, que numa pílula sairiam errados.
   Fundo claro com tinta escura, o desenho que a folha já usa em
   `.promotor-edital .pilula` -- e não a cor cheia. Preencher com a cor
   reprovaria: o texto aqui tem 11px em versalete, que é onde o contraste
   quebra.
   ⚠️ As TINTAS CLARAS NÃO SÃO as do `.ico-*`. Sobre o fundo composto, as do
   ícone davam 4,34 (coral), 4,55 (âmbar) e 4,38 (turquesa) -- duas reprovam o
   4,5:1 que texto pequeno exige e a terceira passa raspando. Foram escurecidas
   na mesma matiz até 5,0. Ao mexer, MEÇA sobre o fundo composto (a pílula fica
   sobre `--branco` do `.ac-proj`), não sobre o token puro. */
.ac-temas .pilula[data-cor="coral"]{background:rgba(232,96,122,.12);color:#B53852;border-color:rgba(232,96,122,.34)}
.ac-temas .pilula[data-cor="ambar"]{background:rgba(232,163,60,.14);color:#8D5F0E;border-color:rgba(232,163,60,.38)}
.ac-temas .pilula[data-cor="turq"] {background:rgba(46,155,168,.13);color:#1C6F79;border-color:rgba(46,155,168,.34)}
.ac-temas .pilula[data-cor="lilas"]{background:rgba(142,156,216,.18);color:#2E3A6B;border-color:rgba(142,156,216,.44)}
/* No escuro o fundo translúcido compõe sobre `--branco` escuro (#1E2128) e a
   tinta clareia. Medido: 5,77 · 5,77 · 6,25 · 6,52.
   ⚠️ `:root:not([data-theme="light"])` PRECISA ficar dentro do
   `@media(prefers-color-scheme:dark)`. Solto no topo ele casa sempre que o
   atributo está AUSENTE -- e ausente é o padrão, porque o seletor de tema em
   "sistema" APAGA o atributo. Foi assim que o `.ico-*` acabou pintando a
   tinta do escuro no tema claro. Os dois blocos repetem o conteúdo de
   propósito: o @media atende quem deixou o sistema decidir, o [data-theme]
   atende quem escolheu na página. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ac-temas .pilula[data-cor="coral"]{color:#F0899E}
  :root:not([data-theme="light"]) .ac-temas .pilula[data-cor="ambar"]{color:#E8A33C}
  :root:not([data-theme="light"]) .ac-temas .pilula[data-cor="turq"] {color:#4FC0CD}
  :root:not([data-theme="light"]) .ac-temas .pilula[data-cor="lilas"]{color:#B4BFE9}
}
:root[data-theme="dark"] .ac-temas .pilula[data-cor="coral"]{color:#F0899E}
:root[data-theme="dark"] .ac-temas .pilula[data-cor="ambar"]{color:#E8A33C}
:root[data-theme="dark"] .ac-temas .pilula[data-cor="turq"] {color:#4FC0CD}
:root[data-theme="dark"] .ac-temas .pilula[data-cor="lilas"]{color:#B4BFE9}
/* `.ac-leitura` foi APAGADO em 14/09/2026, com o bloco "Leitura de conjunto".
   Diferente da `leitura_de_conjunto()` do gerador do acervo, que ficou parada
   de propósito: ali o que se preserva é a EXTRAÇÃO, que lê uma convenção de
   markdown e custa caro para reescrever. Aqui eram três declarações de forma,
   e a própria sessão do acervo registrou que a leitura pode voltar "em outro
   formato" -- ou seja, quem a trouxer de volta vai redesenhar o bloco de
   qualquer jeito. Regra que não casa com nada faz o próximo leitor procurar
   na página um bloco que não existe. */
.ac-vazio{padding:26px 0;margin:0}
.ac-vazio-seg{padding:4px 16px 14px;color:var(--tinta-3);font-size:14px}

@media(min-width:820px){
  .ac-proj-cabeca{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:16px;
    align-items:baseline}
  .ac-proj-cabeca::after{grid-column:3;align-self:center}
  .ac-det{margin:0 14px 14px}
}

/* ---------- o cartão de ecossistema, na forma de 21/09/2026 ----------
   ⚠️ A seção mudou de FORMA, e não só de texto. Cada cartão passou de um
   parágrafo único para: uma frase de entrada que diz QUANDO aquilo acontece,
   três situações, e o que a bloom faz. É a forma que a Marianna escreveu, e ela
   é melhor porque a pessoa se reconhece na entrada antes de ler a lista. */
.cartao-publico .eco-abertura{font-weight:600;color:var(--tinta);margin-top:12px}
.cartao-publico .eco-itens{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:7px}
.cartao-publico .eco-itens li{position:relative;padding-left:15px;font-size:14.5px;
  color:var(--tinta-2);line-height:1.45}
/* O marcador é desenhado, e não um caractere: caractere de lista entra na
   leitura em voz alta como conteúdo, e ele não é conteúdo. */
.cartao-publico .eco-itens li::before{content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--borda-controle)}
.cartao-publico .eco-fecho{margin-top:14px;padding-top:12px;font-size:14.5px;
  color:var(--tinta-2);border-top:1px solid var(--linha)}

/* ---------- a estrela de salvar, e o contador do topo ----------
   Desenho aprovado na mock de 21/09/2026.

   ⚠️ A ESTRELA É UM BOTÃO, não um enfeite. Precisa de alvo de toque e de
   estado lido em voz alta: estrela desenhada num span some para quem navega
   por teclado, e ninguém descobre que o cartão guarda.

   ⚠️ O ÂMBAR AQUI É EXCEÇÃO À REGRA DE COR DA MARCA, e vale escrever por quê.
   A regra diz que coral, âmbar e turquesa distinguem ECOSSISTEMA, e que estado
   usa --ok, --atencao e --erro. Salvo não é estado de sistema, é escolha de
   quem lê, e nenhum dos três de estado serve: verde diria "deu certo", âmbar de
   --atencao diria "cuidado". A cor foi escolhida na mock, olhando, e aprovada.
   ⇒ O que a regra continua proibindo é âmbar dizendo ecossistema e salvo NA
     MESMA TELA. Não acontece: as duas páginas de acervo não trazem os cartões
     de ecossistema. */
.estrela{position:absolute;top:12px;right:12px;width:36px;height:36px;
  display:grid;place-items:center;border-radius:10px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--tinta-3)}
.estrela svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.estrela:hover{background:var(--superficie-2);color:var(--tinta-2)}
.estrela:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
.estrela[aria-pressed="true"]{color:var(--ambar)}
.estrela[aria-pressed="true"] svg{fill:var(--ambar)}
/* Quem pediu menos movimento não recebe o preenchimento animado. */
.estrela svg{transition:fill .12s}
@media(prefers-reduced-motion:reduce){.estrela svg{transition:none}}

/* ⚠️ O cartão de edital tem `padding:24px` e o título começa no canto de cima.
   Sem esta folga, o nome do edital passa POR BAIXO da estrela em vez de parar
   antes dela, e some justamente no cartão de nome comprido. */
.mod .titulo-edital{padding-right:34px}

/* O contador. Nasce escondido e só aparece quando há o que contar: botão que
   mostra zero ocupa a barra sem dizer nada, e ensina a ignorá-lo.
   ⚠️ `[hidden]{display:none !important}` já está declarado nesta folha, e é ele
   que vence o `display:inline-flex` do .botao. Sem aquela linha, `hidden` aqui
   não esconderia nada. */
.conta-salvos{gap:6px;padding-inline:12px}
.conta-salvos .ico-estrela{width:17px;height:17px;flex:none;
  fill:var(--ambar);stroke:var(--ambar);stroke-width:1.6;stroke-linejoin:round}
.conta-salvos-num{font-variant-numeric:tabular-nums}

/* ---------- /planejamento/, a área de quem salvou ---------- */
/* ⚠️ Esta regra existe para o `conferir_escopo_de_pagina` ter as duas pontas:
   a página carimba #p-plan e a folha precisa conhecê-lo, senão a guarda
   reprova. Passou a ficar sobre a tela dividida (.entrar-cisao) depois que
   o .heroi saiu da página em 22/09/2026 -- a regra em si não muda nada
   visualmente (.entrar-cisao já é única desta página por nome de classe);
   é só o que mantém o id conhecido da folha. */
#p-plan .entrar-cisao{min-height:calc(100dvh - 65px)}

/* ⚠️ SEM "Entrar" E SEM "Agendar demonstração" no cabeçalho, pedido dela em
   22/09/2026: quem está nesta página já entrou (o "Entrar" do cabeçalho é
   para outro sistema, app.bloomecossistemas.com.br) ou está bem no meio do
   formulário de entrada -- ter os dois na mesma tela era redundância, não
   ajuda. "Agendar demonstração" também sai: quem chegou aqui já está
   usando um módulo, não precisa ser convencida a conhecer um. O pedido de
   demonstração de OUTRO ecossistema mudou de lugar, para dentro de
   "Solicitar a bloom" (ver SERVICOS em corpo-planejamento.html). */
#p-plan .topo .entrar,
#p-plan .topo .agendar{display:none}

/* ⚠️ `.cartao` NÃO EXISTE nesta folha, e é fácil cair nessa: ela existe no
   espelho que o OBZ usa, e o manual da identidade a lista entre os
   componentes prontos. O cartão claro DO SITE é `.cartao-claro`. Escrito
   porque a primeira versão desta tela usou `.cartao` e os dois cartões
   saíram sem moldura nenhuma, sem erro em lugar nenhum. */
.form-plan{display:grid;gap:8px;margin-top:22px}
.form-plan label{font-size:14px;font-weight:600}
.form-plan .botao{margin-top:12px;width:100%}
#plan-resumo-rotulo{margin-top:16px}
.plan-resumo{margin-top:6px;padding:12px 14px;border-radius:var(--raio-botao);
  background:var(--superficie-2)}
/* Nome de cada item, um por linha. Marcador desenhado, não caractere: o
   mesmo motivo já registrado para .eco-itens -- caractere de lista entra na
   leitura em voz alta como conteúdo, e o marcador não é conteúdo. */
.plan-resumo-lista{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.plan-resumo-lista li{position:relative;padding-left:14px;font-size:14.5px;
  color:var(--tinta-2);line-height:1.4;overflow-wrap:anywhere}
.plan-resumo-lista li::before{content:"";position:absolute;left:0;top:7px;
  width:4px;height:4px;border-radius:50%;background:var(--borda-controle)}
.plan-resumo-resto{margin:6px 0 0;font-size:13px;color:var(--tinta-3)}
.plan-resumo-fecho{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--linha);
  font-size:14px;font-weight:600;color:var(--tinta)}
.plan-erro{margin-top:14px;color:var(--erro);font-size:14.5px}
/* O aviso de coleta é miúdo mas não apagado: ele precisa ser LIDO antes do
   envio, e cinza sobre creme em 12px seria enfeite jurídico. */
.aviso-coleta{margin-top:20px;padding-top:16px;border-top:1px solid var(--linha);
  font-size:13px;color:var(--tinta-2);line-height:1.5}


.abas-u{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--linha)}
.aba-u{font-family:inherit;font-size:15px;font-weight:600;padding:10px 16px;
  border:0;background:transparent;color:var(--tinta-3);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.aba-u.ativo{color:var(--primaria);border-bottom-color:var(--primaria)}
.aba-u:focus-visible{outline:3px solid var(--turquesa);outline-offset:-3px}
.painel-u{display:none;padding-top:24px}
.painel-u.ativo{display:block}
.titulo-col{font-size:18px}
.vazio-conta{margin-top:16px;color:var(--tinta-3);font-size:15px}

.lista-salvos{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.item-salvo{background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);padding:14px 16px}
.item-salvo-cabeca{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.item-salvo-texto{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.item-salvo-titulo{font-weight:600;color:var(--tinta)}
/* ⚠️ SÓ A SETINHA EXPANDE, desde 22/09/2026: a primeira versão abria o
   resumo ao clicar no título, e ela leu isso como navegação para a página
   original. Título e pílula deixaram de ser clicáveis; .item-salvo-expande
   é o único jeito de ver a descrição, alternando .item-salvo-detalhe no
   lugar -- nunca modal, nunca outra página. */
.item-salvo-expande{flex:none;width:28px;height:28px;border-radius:8px;
  border:0;background:transparent;color:var(--tinta-3);cursor:pointer;
  display:grid;place-items:center}
.item-salvo-expande:hover{background:var(--superficie-2);color:var(--tinta-2)}
.item-salvo-expande:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}
.item-salvo-expande .seta{transition:transform .15s}
.item-salvo-expande[aria-expanded="true"] .seta{transform:rotate(225deg) translate(2px,2px)}
.item-salvo-detalhe{margin-top:12px;padding-top:12px;border-top:1px solid var(--linha);
  font-size:14px;color:var(--tinta-2);line-height:1.5}
/* ⚠️ TODO CAMPO DO CARTÃO, NÃO SÓ UM -- pedido dela em 22/09/2026:
   "está vindo só o resumo, e não a informação completa do card".
   `.09em` no rótulo é o mesmo espaçamento dos outros rótulos em versalete
   da folha (regra 9 da identidade), não o `.12em` do olho -- este rótulo
   nunca abre seção sozinho.
   ⚠️ `c.t` VIROU HTML (negrito, lista), não mais texto com `\n\n` --
   mesmo pedido, revisto: "o card continua diferente". `<p>`/`<ol>`/`<li>`
   entram diretos, então o espaçamento vem deles (o reset global é
   `p{margin:0}`, regra 10 da identidade -- por isso os parágrafos
   internos precisam de margem própria aqui, não herdada). */
.item-salvo-campo{margin:0 0 12px}
.item-salvo-campo:last-of-type{margin-bottom:0}
.item-salvo-campo b{display:block;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-3);margin-bottom:3px}
.item-salvo-campo p{margin-top:8px}
.item-salvo-campo p:first-of-type{margin-top:0}
.item-salvo-campo ol,.item-salvo-campo ul{margin:8px 0 0;padding-left:20px}
.item-salvo-campo li{margin-bottom:6px}
.item-salvo-campo li:last-child{margin-bottom:0}
.item-salvo-org{margin:2px 0 0;font-size:13px;color:var(--tinta-3)}
/* ⚠️ `.ac-temas` (a classe de VERDADE, não só a nossa) faz o flex/gap E
   destrava a cor por `data-cor` -- a regra mora em `.ac-temas
   .pilula[data-cor]`, escopada por essa classe. Sem ela, pedido dela em
   22/09/2026: "as tags não estão coloridas que nem a página original".
   `.item-salvo-temas` some do lado de `.ac-temas` só para dar o
   espaçamento próprio deste contexto. */
.item-salvo-temas{margin-top:12px}
/* ⚠️ BOTÃO DE VERDADE, NÃO LINK SUBLINHADO -- pedido dela em 22/09/2026:
   "aqui não deveria ser o link e sim o botão igual o da página
   original". `.item-salvo-detalhe a` continua `display:block` para o
   carimbo/link avulso de itens salvos antes desta mudança; `.botao`
   dentro de `.item-salvo-fontes` cancela isso, porque botão empilhado
   em largura total não é o mesmo botão do cartão de origem. */
.item-salvo-detalhe a{margin-top:8px;display:block}
.item-salvo-detalhe a:hover{text-decoration:underline}
.item-salvo-fontes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.item-salvo-fontes .botao{margin-top:0;display:inline-flex}
.item-salvo-fontes .botao:hover{text-decoration:none}
.item-salvo-detalhe .carimbo-edital{margin-top:4px}

/* ⚠️ `minmax(0,1fr)` outra vez: com `1fr`, o título de um projeto comprido
   empurra a coluna e o quadro passa a rolar de lado inteiro em vez de a
   palavra quebrar. */
.quadro{display:grid;gap:12px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.coluna{background:var(--superficie-2);border-radius:var(--raio);padding:12px;
  display:grid;gap:10px;align-content:start}
.coluna h4{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);display:flex;justify-content:space-between;gap:8px}
.coluna-conta{font-variant-numeric:tabular-nums}
/* Cor de categoria só nas quatro que a têm. ⚠️ Atrasada e Concluída usam
   --erro e --ok, e NÃO ganham cor de categoria: no ecossistema, vermelho diz
   uma coisa só. */
.coluna-backlog h4{color:var(--cat-backlog)}
.coluna-nao-iniciada h4{color:var(--cat-nao-iniciada)}
.coluna-em-andamento h4{color:var(--cat-em-andamento)}
.coluna-cancelada h4{color:var(--cat-cancelada)}
/* ⚠️ `--erro-texto`, não `--erro`. Conferido contra o Educacional
   (statusPlanoAcao.ts + tailwind.config): a classe `bg-erro` do quadro de
   lá resolve para `--color-erro-text` (#991B1B claro / #FCA5A5 escuro), a
   variante mais escura, pensada para texto -- não o `--erro` puro
   (#DC2626), que é vermelho de ação (botão, alerta). `--ok` já batia certo
   sem ajuste: o `bg-ok` de lá resolve para `--color-ok-text`, que é
   exatamente o nosso `--ok`. */
.coluna-atrasada h4{color:var(--erro-texto)}
.coluna-concluida h4{color:var(--ok)}

.cartao-proj{background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-botao);padding:12px 14px;display:grid;gap:8px}
.cartao-proj h5{font-family:Quicksand,sans-serif;font-size:15px;margin:0;
  overflow-wrap:anywhere}
.tarefas{list-style:none;padding:0;margin:0;display:grid;gap:5px;font-size:14px}
.tarefas li{display:flex;gap:8px;align-items:flex-start}
.tarefas input{margin-top:3px;flex:none}
.tarefas label{color:var(--tinta-2);cursor:pointer}
.cartao-proj-pe{font-size:12.5px;color:var(--tinta-3)}
/* Mesmo lugar e formato do "Tarefas 2/8" do Educacional (PlanoAcao.tsx):
   pequeno, caixa alta, antes da lista -- diz o que já está feito antes de
   a pessoa ler a lista inteira. */
.cartao-proj-tarefas-rotulo{font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3)}

.grade-serv{display:grid;gap:12px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* ⚠️ COLUNA, NÃO GRID, desde 22/09/2026: com `align-content:start` o botão
   seguia direto depois do texto, então cartão com título ou texto mais
   curto deixava o botão mais alto que o dos vizinhos -- ela reparou vendo
   os quatro cartões lado a lado. `margin-top:auto` no botão empurra ele
   para o fim do cartão sempre, os quatro cartões já vêm com a mesma
   altura porque `.grade-serv` é grid (esticamento é o padrão do grid). */
.cartao-serv{display:flex;flex-direction:column;gap:10px;padding:20px}
/* ⚠️ `min-height` DE DUAS LINHAS NO TÍTULO, desde 22/09/2026: o botão já
   ficava no rodapé (commit anterior), mas o texto abaixo do título
   começava mais alto ou mais baixo conforme o título tinha uma linha ou
   duas -- ela reparou vendo os quatro cartões lado a lado de novo. Reserva
   a altura de duas linhas sempre, então o texto começa na mesma altura
   nos quatro, tenha o título uma linha ou duas. */
.cartao-serv h4{font-family:Quicksand,sans-serif;font-size:17px;line-height:1.3;
  min-height:calc(1.3em * 2);margin:0}
.cartao-serv p{font-size:14.5px;color:var(--tinta-2)}
.cartao-serv .botao{align-self:flex-start;margin-top:auto}

.quadro-barra{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- o modal do planejamento ----------
   Substitui os três window.prompt() que existiam até 21/09/2026: a caixinha
   nativa do navegador não tem estilo, não cabe mais de um campo, e não
   parece bloom. A Marianna reparou pelo "pedir orçamento"; o mesmo defeito
   estava em "planejar projeto" e "nova tarefa". */
.modal-fundo{position:fixed;inset:0;background:rgba(27,31,46,.5);
  display:grid;place-items:center;padding:20px;z-index:60}
.modal-fundo[hidden]{display:none}
.modal-caixa{background:var(--branco);border-radius:var(--raio);
  padding:30px 26px 26px;max-width:420px;width:100%;max-height:88vh;
  overflow-y:auto;position:relative}
.modal-caixa h3{font-size:19px;letter-spacing:-.01em;margin:0 0 4px;padding-right:28px}
.modal-caixa .linha-fina{margin-top:0;margin-bottom:6px}
.modal-fecha{position:absolute;top:14px;right:14px;width:32px;height:32px;
  border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--tinta-3);cursor:pointer;display:grid;place-items:center}
.modal-fecha svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round}
.modal-fecha:hover{background:var(--superficie-2);color:var(--tinta-2)}
.modal-fecha:focus-visible{outline:3px solid var(--turquesa);outline-offset:1px}
.modal-campo{display:grid;gap:6px;margin-top:16px}
.modal-campo label{font-size:13.5px;font-weight:600;color:var(--tinta-2)}
.modal-campo .campo-area{min-height:84px}
.modal-erro{color:var(--erro);font-size:14px;margin-top:14px}
.modal-acoes{display:flex;gap:10px;margin-top:24px}
.modal-acoes .botao{flex:1}

/* ---------- o cadastro de ação, pareado com o Educacional ----------
   PlanoAcao.tsx (NovoPlanoDialog / TarefasNovoPlano), a pedido da Marianna
   em 21/09/2026. */
.modal-caixa{max-width:520px}
/* ⚠️ SÓ "planejar projeto"/"novo projeto" pede isto -- pedido dela em
   22/09/2026, depois do campo de nova tarefa vir cortado: junto do prazo
   e do botão "Adicionar" na mesma linha, 520px não sobrava espaço. Os
   outros três formulários deste modal cabem nos 520px padrão. */
.modal-caixa.grande{max-width:680px}
.modal-duas{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-top:16px}
@media(max-width:480px){.modal-duas{grid-template-columns:1fr}}
/* Rótulo da dica: mesmo espírito do DicaCampo de lá -- texto pequeno, cinza,
   sempre visível embaixo do campo, nunca escondido atrás de um ícone de
   ajuda. */
.dica-campo{margin-top:5px;font-size:12.5px;color:var(--tinta-3);line-height:1.4}
.modal-prazo-calc{margin:0;height:48px;display:flex;align-items:center;
  padding:0 14px;border-radius:10px;border:1px dashed var(--linha);
  background:var(--creme);font-size:14.5px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}

.modal-tarefas{margin-top:16px;border:1px solid var(--linha);
  border-radius:var(--raio-botao);padding:14px}
.modal-tarefas>label{font-size:13.5px;font-weight:600;color:var(--tinta-2);
  display:flex;align-items:center;gap:6px}
.modal-tarefas-conta{font-size:12px;color:var(--tinta-3);font-weight:600}
.modal-tarefas-vazio{margin:8px 0 0;font-size:13px;color:var(--tinta-3)}
.modal-tarefas-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.modal-tarefa-item{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 10px;border-radius:8px;background:var(--superficie-2);
  font-size:14px;color:var(--tinta)}
.modal-tarefa-item span{overflow-wrap:anywhere}
.modal-tarefa-remover{flex:none;width:24px;height:24px;border-radius:7px;
  border:0;background:transparent;color:var(--tinta-3);cursor:pointer;
  display:grid;place-items:center}
.modal-tarefa-remover svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round}
.modal-tarefa-remover:hover{background:var(--branco);color:var(--erro)}
/* ⚠️ O CAMPO DE TAREFA TEM LINHA PRÓPRIA, desde 22/09/2026: dividindo
   espaço com o prazo e o botão "Adicionar" na mesma linha, mesmo nos
   680px de .modal-caixa.grande, ainda ficava pequeno -- ela reparou duas
   vezes. `flex:1 1 100%` garante a largura inteira da caixa de tarefas,
   não importa o quanto sobra depois do prazo e do botão. */
.modal-tarefas-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--linha)}
.modal-tarefas-add #m-nova-tarefa{flex:1 1 100%}
.modal-tarefas-add #m-nova-prazo{flex:1 1 150px}
.modal-tarefas-add #m-add-tarefa{flex:0 0 auto}

/* ---------- anexos ---------- */
/* ⚠️ O CARTÃO ABRE UMA TELA, não expande no lugar -- pedido dela em
   22/09/2026, depois de ver os botões aparecendo dentro do próprio cartão.
   "Nova tarefa" e "Anexar arquivo" moraram para o modal de detalhe
   (abrirDetalheProjeto); o cartão só marca/desmarca tarefa e, clicado em
   qualquer outro ponto, abre o detalhe. `cursor:pointer` é o affordance
   disso -- sem ele, "clicar no card" não tem pista nenhuma. */
.cartao-proj{cursor:pointer}
.anexos-lista{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.anexo-item{display:flex;align-items:center;gap:7px;width:100%;
  padding:6px 8px;border-radius:8px;border:0;background:var(--superficie-2);
  color:var(--tinta-2);font-family:inherit;font-size:13px;cursor:pointer;
  text-align:left;overflow-wrap:anywhere}
.anexo-item svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.anexo-item:hover{background:var(--branco);color:var(--tinta)}

/* ---------- /planejamento/, entrada em tela dividida ----------
   Mesmo padrão do bloom-admin (painel.css, .entrar/.entrar-marca/
   .entrar-lado), pedido da Marianna em 22/09/2026, com a imagem do lado
   direito em vez do esquerdo -- é o espelho do original, não uma cópia. */
.entrar-cisao{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.entrar-cisao{grid-template-columns:.95fr 1.05fr}}

.entrar-lado{display:grid;align-content:center;padding:36px 24px}
.entrar-lado .voltar{margin-bottom:8px}
.entrar-caixa{width:100%;max-width:420px;margin-inline:auto}

/* ⚠️ NÃO INVERTE COM O TEMA, de propósito -- mesma regra do bloom-admin: é
   escura por desenho, como a faixa de ecossistemas do site. Cor literal,
   nunca var(--primaria): var() mudaria com o tema, e os valores calibrados
   sobre ela (texto branco, texto em #C3CCEA) deixariam de valer. */
.entrar-marca{position:relative;background:#2E3A6B;color:#DDE3F5;
  background-image:url("/img/fundo-home.svg");background-size:cover;background-position:center right;
  display:grid;align-items:center;padding:44px 32px}
@media(min-width:900px){.entrar-marca{padding:56px 60px}}
.entrar-marca-dentro{max-width:420px;margin-inline:auto;width:100%}
.entrar-marca .simbolo{width:72px;height:auto;display:block}
/* ⚠️ REPINTADO PARA FUNDO ESCURO -- mesmos quatro valores de .heroi
   .simbolo, a mesma situação (símbolo sobre fundo que não segue o tema da
   página) em outra tela. Sem isto o símbolo desapareceria ou viraria um
   disco sem contraste, dependendo do tema que a pessoa tiver escolhido. */
.entrar-marca .simbolo{--primaria:#8E9CD8;--primaria-clara:#B4BFE9;--halo:#2A3355;--linha:#4A5480}
.entrar-marca-nome{font-family:Quicksand,sans-serif;font-weight:700;
  font-size:26px;letter-spacing:-.02em;color:#FFFFFF;margin-top:14px}
.entrar-marca-t{font-family:Quicksand,sans-serif;font-weight:600;
  font-size:clamp(22px,2.6vw,29px);line-height:1.2;letter-spacing:-.02em;
  color:#FFFFFF;margin-top:20px;text-wrap:balance}
.entrar-marca-p{color:#C3CCEA;font-size:15.5px;margin-top:14px;max-width:44ch}

/* ---------- o menu de conta, no cabeçalho global ----------
   Pedido da Marianna em 22/09/2026: "no lugar onde fica a estrelinha".
   Padrão aprovado no mock (mock-planejamento/estilo.css, "a conta da
   pessoa"), portado aqui igual -- não é componente novo, é o mesmo que já
   foi decidido, agora no site de verdade. */
.menu-conta{position:relative}
.quem-botao{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid transparent;border-radius:999px;padding:4px 10px 4px 4px;
  background:transparent;color:inherit;font:inherit}
.quem-botao:hover{background:var(--superficie-2);border-color:var(--linha)}
.quem-botao:focus-visible{outline:3px solid var(--turquesa);outline-offset:1px}
.avatar{width:32px;height:32px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--primaria-10);color:var(--primaria);
  font-family:Quicksand,sans-serif;font-weight:700;font-size:12.5px;
  background-size:cover;background-position:center}
.avatar.com-foto{color:transparent}
.avatar.grande{width:64px;height:64px;font-size:22px}
/* A setinha é a mesma do acervo: borda girada, sem caractere, para o leitor
   de tela não anunciar um símbolo que não é conteúdo. */
.seta{width:7px;height:7px;flex:none;border-right:2px solid var(--tinta-3);
  border-bottom:2px solid var(--tinta-3);transform:rotate(45deg) translate(-2px,-2px)}
.menu-caido{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:196px;
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra-dialogo);padding:6px;display:grid;gap:2px}
.menu-caido-quem{padding:8px 12px 10px;font-size:12.5px;color:var(--tinta-3);
  border-bottom:1px solid var(--linha);margin-bottom:4px;overflow-wrap:anywhere}
.menu-caido a,.menu-caido button{text-align:left;border:0;background:transparent;
  cursor:pointer;font:inherit;font-size:14.5px;color:var(--tinta);
  padding:9px 12px;border-radius:10px;text-decoration:none;display:block}
.menu-caido a:hover,.menu-caido button:hover{background:var(--superficie-2)}

/* O pequeno modal de conta (trocar foto / alterar senha), criado pelo
   próprio script -- reaproveita as mesmas classes .modal-* do planejamento,
   que já existem nesta folha e valem para qualquer página. */
.linha-foto{display:flex;gap:16px;align-items:flex-start;margin-top:6px}
.linha-foto input[type="file"]{font-size:13.5px}
.linha-foto input[type="file"]::file-selector-button{font-family:inherit;font-size:14px;
  height:36px;padding:0 14px;border-radius:var(--raio-botao);cursor:pointer;
  border:1px solid var(--borda-controle);background:var(--branco);color:var(--primaria);
  margin-right:10px}

/* O resumo capturado no clique da estrela, mostrado como contexto -- na
   tela de "Planejar projeto" e no modal de detalhe do item salvo. Bloco
   levemente destacado, para diferenciar da explicação da própria bloom
   (linha-fina comum) do que a fonte original disse. */
.modal-contexto{background:var(--superficie-2);border-radius:var(--raio-botao);
  padding:12px 14px;margin-top:6px}

/* ⚠️ IFRAME, NÃO CATÁLOGO DUPLICADO -- pedido dela em 22/09/2026, ver o
   comentário em corpo-planejamento.html junto das abas u-editais/u-
   praticas. Altura fixa com rolagem própria porque as duas páginas de
   origem são compridas (172 práticas, 19 editais com filtro): sem altura
   fixa, o iframe cresceria para caber o conteúdo inteiro e a aba de
   "Itens salvos"/"Quadro" ficaria longe do topo ao trocar de aba. */
.iframe-topo{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px}
/* ⚠️ ALTURA PELO CONTEÚDO, NÃO FIXA -- revisão dela em 22/09/2026: uma
   caixa de 70vh com rolagem própria "está embutindo a página", não
   replicando o conteúdo no fluxo natural da aba. corpo-planejamento.html
   mede `scrollHeight` do documento carregado (mesma origem, então lê
   direto, sem postMessage) e ajusta `height` aqui -- o `min-height`
   embaixo é só o placeholder até a primeira medição chegar. */
.iframe-catalogo{width:100%;min-height:300px;border:0;display:block}

/* ================= GESTÃO DE INOVAÇÃO ================= */
/* O que a Gestão de Inovação acrescenta à folha do site.
   Isto é o DIFF a aplicar quando a página for aprovada, e está separado por isso:

   · `tokens-bloom.css` (a folha canônica do ecossistema) ganha --violeta;
   · `estilo.css` ganha o bloco do herói, com o seletor `#p-inov` na frente de
     cada regra, como já acontece com #p-edu, #p-obz e #p-man;
   · `site/img/` ganha o `fundo-inov.svg`, gerado por `gerar-fundo.py`.

   ⚠️ Aqui as regras do herói vão SEM o `#p-inov`, porque o mock mostra uma
   página só e não tem o id no body. No site elas precisam do prefixo: sem ele,
   a abertura de todas as outras páginas vira roxa. */

:root{  /* o token canônico está em tokens-bloom.css */
  /* A cor do ecossistema. Matiz 272, fora das quatro da marca e longe das três
     já usadas (coral 349, âmbar 36, turquesa 186, primária-clara 229).
     Medido: 4,90:1 com a tinta escura, que é a mesma faixa do coral (4,98) e do
     turquesa (4,97), então o número dentro do disco e o texto sobre a cor leem
     igual aos outros ecossistemas. 3,35:1 sobre branco e 5,31:1 sobre o fundo
     escuro do tema noturno, onde ela também precisa aparecer.
     ⚠️ Roxo e não verde de propósito: verde é cor de ESTADO neste ecossistema
     (--ok), e cor de marca não pode dizer duas coisas na mesma tela. */
  --violeta:#A977D4;
}

/* A abertura. O fundo é o mesmo gerador dos outros, com semente própria (1906)
   e cena própria: conversa, engrenagem, indicador, gestor, prédio, prancheta. */
#p-inov .heroi{background-image:url("img/fundo-inov.svg")}
#p-inov .heroi::before{background:linear-gradient(100deg,
  rgba(36,20,51,.97) 0%, rgba(36,20,51,.94) 34%,
  rgba(36,20,51,.72) 52%, rgba(36,20,51,.28) 72%, rgba(36,20,51,0) 88%)}

/* A fileira de telas reusa o componente .passo da página de Manutenção, que já
   está na folha. Nada novo aqui: só a nota de que ele é compartilhado, para
   quem mexer num não quebrar o outro. */

/* O ícone na cor do ecossistema, para os cartões desta página.
   ⚠️ OS DOIS BLOCOS ESCUROS REPETEM O CONTEÚDO DE PROPÓSITO, pela mesma razão
   escrita ao lado dos quatro ícones que já existem em estilo.css: o @media
   atende quem deixou o sistema decidir, o [data-theme] atende quem escolheu na
   página, e `:root:not([data-theme="light"])` solto fora do @media casaria no
   tema claro também, porque o atributo AUSENTE é o padrão. Mexeu em um, mexa
   no outro.
   Medido sobre o disco composto (o roxo a 18% sobre o fundo de cada tema):
   4,46:1 no claro e 6,11:1 no escuro, contra os 3:1 que a WCAG 1.4.11 pede.
   Fica na mesma faixa dos outros: coral 4,34 · âmbar 4,55 · turquesa 4,38. */
.ico-violeta{background:rgba(169,119,212,.18);color:#8851B8}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ico-violeta{color:#C9A8E8}
}
:root[data-theme="dark"] .ico-violeta{color:#C9A8E8}

/* A Confiança em duas colunas. Antes o texto ocupava a metade esquerda e a
   direita ficava vazia na faixa escura, que é a mais alta da página: meia tela
   de azul sem nada. A lista da direita é a do documento, que eu tinha achatado
   numa frase corrida dentro do parágrafo. */
.confianca-grade{display:grid;gap:34px;margin-top:22px;align-items:start}
@media(min-width:880px){.confianca-grade{grid-template-columns:1.05fr .95fr;gap:54px}}
.confianca-grade p{max-width:60ch}
.lista-confianca{border-left:1px solid rgba(255,255,255,.22);padding-left:26px}
@media(max-width:879px){.lista-confianca{border-left:0;border-top:1px solid rgba(255,255,255,.22);
  padding-left:0;padding-top:22px}}
.lista-confianca ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.lista-confianca li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.lista-confianca .tracinho{background:var(--violeta);margin-top:11px}

/* O título da abertura em UMA linha também em janela estreita.
   ⚠️ Medido: com o tamanho padrão da folha (46px no máximo) "Gestão de Inovação
   sem burocracias" ocupa 784px e cabe de 900px de janela para cima. Abaixo
   disso ele quebra em duas linhas pela metade, por causa do `text-wrap:balance`
   que a folha usa em todo título. Com o teto em 42px ele passa a caber bem mais
   abaixo, e nas janelas largas a diferença de 4px não se nota ao lado dos
   outros heróis. Em celular ele quebra, e está certo que quebre. */
#p-inov .heroi-detalhe h1{font-size:clamp(30px,4.1vw,42px)}

/* Loop de vídeo no herói da página inicial e das três páginas de ecossistema
   (16/10/2026, aprovado pela Marianna numa prévia). Duas colunas a partir de
   960px; no celular o vídeo fica abaixo dos botões. Na página inicial a grade
   só volta a ter duas colunas quando há vídeo (.com-loop): sem ele, a regra
   `.heroi-grade{grid-template-columns:1fr}` mais acima continua valendo. */
.heroi-loop{display:grid;gap:40px;align-items:center}
@media(min-width:960px){
  .heroi-loop{grid-template-columns:.9fr 1.1fr;gap:56px}
  .heroi-grade.com-loop{grid-template-columns:.9fr 1.1fr;gap:56px}
}
.heroi-video{width:100%;aspect-ratio:16/9;display:block;border-radius:18px;border:1px solid var(--borda);
  box-shadow:0 30px 60px -30px rgba(31,40,80,.45);background:var(--creme)}