/* Do pampa ao Brasil: um atlas claro, fios que saem de casa. Estilo comum a todas as páginas. */
@view-transition { navigation: auto; }

:root {
  --oceano: #8BADBF;
  --oceano-claro: #D6E3E8;
  --terra: #EEF0EA;
  --rs: #CFE0B5;
  --trabalho: #1F5FAF;
  --trabalho-claro: #DCE7F5;
  --evento: #D2482E;
  --evento-texto: #A9381F;
  --casa: #2E7D32;
  --premio: #C8A24A;
  --premio-escuro: #7A5F17;
  --tinta: #1D2733;
  --sec: #566273;
  --terc: #6E7A87;
  --papel: #FFFFFF;
  --fundo: #F3F5F1;
  --fio: #D7DDD5;
  --display: 'Bitter', Georgia, 'Times New Roman', serif;
  --corpo: 'Encode Sans', 'Segoe UI', Roboto, system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mapa-x: 480px;
  --menu-h: 60px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #9FB4BF var(--fundo); scrollbar-width: thin; scroll-padding-top: calc(var(--menu-h) + 16px); }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--corpo); font-variation-settings: 'wdth' 100;
  caret-color: var(--trabalho); -webkit-font-smoothing: antialiased;
}
::selection { background: #F3CFC4; color: var(--tinta); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fundo); }
::-webkit-scrollbar-thumb { background: #A9BCC6; border-radius: 6px; border: 2px solid var(--fundo); }
a { color: var(--trabalho); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--evento); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--display); text-wrap: balance; margin: 0; }
p, li, dd, blockquote { text-wrap: pretty; }
.estat b, .regua, time, .contagem { font-variant-numeric: tabular-nums lining-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -80px; z-index: 60; background: var(--papel); padding: 8px 12px; border-radius: 4px; }
.pular:focus { top: 12px; }
main:focus { outline: none; }
.sem-js { padding: 24px; max-width: 60ch; }

/* ---------------- menu fixo ---------------- */
.menu { position: fixed; inset: 0 0 auto 0; z-index: 40; view-transition-name: menu; }
.menu-faixa {
  height: var(--menu-h); display: flex; align-items: center; gap: 28px;
  padding: 0 clamp(16px, 3.4vw, 48px);
  background: rgba(247,249,246,.97);
  border-bottom: 1px solid rgba(29,39,51,.1);
}
.marca { display: inline-flex; align-items: center; gap: 10px; font: 750 1.08rem/1 var(--display); color: var(--tinta); text-decoration: none; white-space: nowrap; }
.marca-ponto { display: block; width: 28px; height: 28px; margin: -4px -2px -4px -4px; }
/* destinos com ícone e nome; a página atual fica num pílula escura, para saber sempre onde se está */
.nav { margin-left: auto; }
.nav-lista { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav-lista a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: var(--tinta); text-decoration: none; font: 600 1rem/1 var(--corpo); white-space: nowrap; transition: background-color .15s, color .15s; }
.nav-lista a .ic-lucide { flex: none; color: var(--sec); transition: color .15s; }
.nav-lista a:hover { background: rgba(31,95,175,.1); color: var(--trabalho); }
.nav-lista a:hover .ic-lucide { color: var(--trabalho); }
.nav-lista a[aria-current="page"], .colab-aberta .nav-lista a[data-id="colaboradores"] { background: var(--tinta); color: #fff; }
.nav-lista a[aria-current="page"] .ic-lucide, .colab-aberta .nav-lista a[data-id="colaboradores"] .ic-lucide { color: #fff; }
.colab-aberta .nav-lista a[data-id="inicio"][aria-current="page"] { background: none; color: var(--tinta); }
.colab-aberta .nav-lista a[data-id="inicio"][aria-current="page"] .ic-lucide { color: var(--sec); }
.nav-lista a.no-ar:not([aria-current="page"]) { background: #E8F4EC; color: #1E6B3E; box-shadow: inset 0 0 0 1px #C3DFCB; }
.nav-lista a.no-ar:not([aria-current="page"]) .ic-lucide { color: #237A47; }
.nav-lista a.no-ar:not([aria-current="page"]):hover { background: #DCEFE2; color: #17583A; }
.nav-lista a.no-ar[aria-current="page"] .ponto-no-ar { box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.bt-contato { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 1.5px solid var(--trabalho); border-radius: 999px; color: var(--trabalho); text-decoration: none; font: 650 1rem/1 var(--corpo); white-space: nowrap; transition: background-color .15s, color .15s; }
.bt-contato:hover { background: var(--trabalho); color: #fff; }
.bt-contato .icone { width: 18px; height: 18px; }
/* barra de baixo, só no celular */
.barra-nav { display: none; }
/* com Em produção são seis destinos: entre 1241 e 1399 px o menu aperta e o Contato fica só no ícone */
@media (max-width: 1399px) {
  .menu-faixa { gap: 14px; }
  .nav-lista { gap: 2px; }
  .nav-lista a { padding: 8px 10px; }
  .bt-contato { padding: 8px 10px; }
  .bt-contato span { display: none; }
}
@media (max-width: 960px) {
  .marca { font-size: 0; gap: 0; }
}
@media (max-width: 1240px) {
  .menu-faixa { gap: 14px; }
  .nav-lista a { padding: 8px 10px; font-size: .95rem; }
  .nav-lista a .ic-lucide { display: none; }
  .bt-contato { padding: 8px 10px; }
  .bt-contato span { display: none; }
}
@media (max-width: 1020px) {
  .menu-faixa { gap: 10px; padding: 0 14px; }
  .nav-lista { gap: 0; }
  .nav-lista a { padding: 8px 8px; font-size: .9rem; }
  .idioma { padding: 6px 7px; }
}
@media (min-width: 1800px) {
  :root { --menu-h: 70px; }
  .marca { font-size: 1.22rem; }
  .marca-ponto { width: 34px; height: 34px; }
  .nav-lista a, .bt-contato { font-size: 1.1rem; padding: 11px 17px; }
  .nav-lista a .ic-lucide, .bt-contato .icone { width: 20px; height: 20px; }
}
.idiomas { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #CBD4CD; border-radius: 999px; background: #fff; }
.idioma { font: 600 .8rem/1 var(--corpo); letter-spacing: .04em; color: var(--sec); background: none; border: 0; padding: 6px 9px; border-radius: 999px; cursor: pointer; }
.idioma[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.idioma:not([aria-pressed="true"]):hover { color: var(--tinta); background: rgba(29,39,51,.06); }
.idioma:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- páginas: seções ---------------- */
main { padding-top: var(--menu-h); }
.pagina-inicio main { padding-top: 0; }
.secao { max-width: 1160px; margin: 0 auto; padding: 96px clamp(16px, 5vw, 48px) 8px; }
.secao.sem-topo { padding-top: 12px; }
.secao > h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 750; letter-spacing: -0.012em; line-height: 1.08; }
.secao h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.22; }
.intro { color: var(--sec); max-width: 66ch; margin: 10px 0 34px; }
.mais { margin-top: 18px; }
.cabecalho-pagina { padding-top: 64px; }
.cabecalho-pagina h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
.chip { display: inline-block; width: 10px; height: 17px; border-radius: 2px; margin-right: 12px; vertical-align: -1px; }

/* ---------------- início: palco do mapa ---------------- */
.historia { display: grid; position: relative; }
.palco, .passos { grid-area: 1 / 1; }
.palco { position: sticky; top: 0; height: 100vh; height: 100svh; align-self: start; overflow: hidden; background: var(--oceano); }
#geo-canvas, #mapa { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* papel: grão fino por cima do relevo (gerado por ruído, ver fontes.md) */
.grao-papel { position: absolute; inset: 0; background: url(relevo/papel.png) repeat; background-size: 512px 512px; mix-blend-mode: multiply; opacity: .6; pointer-events: none; }
/* rótulos de atlas: versal espaçado só para país e estado (convenção de mapa), itálico azul para a água */
.rot-uf, .rot-estado, .rot-pais, .rot-oceano, .rot-agua, .rot-rio, .capital, .rot-linha { pointer-events: none; }
.rot-uf { font: 600 10px var(--corpo); letter-spacing: .2em; fill: #505B53; paint-order: stroke; stroke: rgba(255,255,255,.5); stroke-width: 2.4px; }
.rot-estado { font: 600 12.5px var(--display); letter-spacing: .36em; text-transform: uppercase; fill: #24502A; paint-order: stroke; stroke: rgba(250,252,246,.62); stroke-width: 3px; }
.rot-pais { font: 600 10.5px var(--display); letter-spacing: .34em; text-transform: uppercase; fill: #6B675C; paint-order: stroke; stroke: rgba(250,250,246,.6); stroke-width: 2.6px; }
.rot-oceano text { font: italic 500 14.5px var(--display); letter-spacing: .44em; text-transform: uppercase; fill: #2B5873; fill-opacity: .82; }
.rot-agua text { font: italic 500 11px var(--display); letter-spacing: .05em; fill: #255A78; paint-order: stroke; stroke: rgba(226,238,243,.75); stroke-width: 2.6px; }
.rot-rio { font: italic 500 10.5px var(--display); letter-spacing: .08em; fill: #1F5677; paint-order: stroke; stroke: rgba(244,246,238,.72); stroke-width: 2.6px; }
.capital circle { fill: #FFFFFF; stroke: #36414C; stroke-width: 1.1px; }
.capital .miolo { fill: #36414C; stroke: none; }
.capital.federal path { fill: #36414C; stroke: #FFFFFF; stroke-width: .8px; }
.capital text { font: 500 10.5px var(--corpo); font-variation-settings: 'wdth' 84; fill: #36414C; paint-order: stroke; stroke: rgba(255,255,255,.82); stroke-width: 2.6px; }
.rot-linha { font: italic 500 11px var(--display); fill: #2E5468; paint-order: stroke; stroke: rgba(225,235,240,.6); stroke-width: 2.4px; }
.fio { fill: none; stroke-linecap: round; transition: stroke-opacity .35s var(--ease); }
.fio.trabalho { stroke: var(--trabalho); stroke-width: 2.6px; }
.fio.trabalho.acabou { stroke-width: 1.4px; stroke-opacity: .5; }
.fio.casa { stroke: var(--casa); stroke-width: 2.6px; }
.fio.evento { stroke: var(--evento); stroke-width: 1.35px; stroke-opacity: .92; }
.fio.foco { stroke-width: 3.6px; }
.fio.evento.foco { stroke-width: 2px; }
.fio.apagado { stroke-opacity: .08; }
/* hover e toque: alvo largo e invisível sobre cada fio; o fio apontado fica forte e o resto esmaece */
.alvo-fio { fill: none; stroke: transparent; stroke-width: 14px; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.com-destaque .fio { stroke-opacity: .14; }
.com-destaque .fio.destaque { stroke-opacity: 1; stroke-width: 3.6px; }
.com-destaque .fio.evento.destaque { stroke-width: 2.8px; }
.pub-pilha { cursor: pointer; }
.pub-pilha:hover { filter: brightness(1.08) drop-shadow(0 0 2px rgba(255,255,255,.9)); }
/* régua pequena de 2024 a 2026, nos cartões e na dica */
.regua-p { display: block; margin: -6px 0 12px; overflow: visible; }
.rp-eixo { stroke: #8EA2AE; stroke-width: 1px; }
.rp-tique { stroke: #8EA2AE; stroke-width: 1px; }
.rp-ano { font: 600 9.5px var(--corpo); fill: var(--sec); letter-spacing: .03em; }
.rp-hoje { stroke: var(--tinta); stroke-width: 1px; stroke-dasharray: 2 2; }
.dica .regua-p { margin: 6px 0 2px; }
.dica-titulo { display: block; margin: 6px 0 3px; font-size: .9rem; line-height: 1.28; }
.dica-tema { margin: 4px 0 0; display: flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--sec); }
.dica-tema .q { margin-top: 0; }
.dica-premio { display: flex; gap: 6px; align-items: center; color: var(--premio-escuro); font-weight: 600; }
.dica-cargo { font: 600 .84rem var(--corpo); }
.dica-vinculos li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; margin: 7px 0; }
.dica-vinculos .logo { height: 18px; width: auto; margin-top: 1px; }
.dica-pilha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
rect.apagado { opacity: .14; transition: opacity .35s var(--ease); }
.cabeca { fill: #FFFFFF; stroke-width: 2px; }
.ondinha { fill: none; stroke-width: 1.5px; }
.corredor { fill: var(--trabalho); stroke: #FFFFFF; stroke-width: 1.5px; }
.lugar { cursor: pointer; opacity: 0; transition: opacity .6s var(--ease); }
.lugar.visivel { opacity: 1; }
.lugar:focus { outline: none; }
.lugar:focus-visible .marca-foco { stroke: var(--evento); stroke-width: 2.5px; }
.marca-foco { fill: none; stroke: none; }
.rot-cidade { font: 700 13px var(--display); fill: var(--tinta); paint-order: stroke; stroke: rgba(255,255,255,.94); stroke-width: 4px; stroke-linejoin: round; }
.rot-org { font: 600 11.5px var(--corpo); font-variation-settings: 'wdth' 82; fill: var(--sec); paint-order: stroke; stroke: rgba(255,255,255,.94); stroke-width: 3.5px; stroke-linejoin: round; }
.rot-org .velho { fill: #8E98A3; }
/* logos no mapa: recortados, sem caixa; o halo claro acompanha o desenho do logo, nunca em cima do marcador nem do fio */
.logo-mapa { filter: drop-shadow(0 0 .5px #fff) drop-shadow(0 0 .5px #fff) drop-shadow(0 0 .7px rgba(255,255,255,.9)); }
.placa.velho { opacity: .55; }
/* gravuras dos marcos: no mapa com halo claro em volta do traço; nos cartões como vinheta com legenda */
.marco-mapa { filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 2.6px rgba(255,255,255,.75)); transition: opacity .45s var(--ease); pointer-events: none; }
.marco { margin: 0; display: grid; justify-items: end; gap: 3px; }
.marco img { display: block; height: auto; max-width: 100%; }
.marco figcaption { font: italic 500 .74rem/1.2 var(--display); color: var(--sec); text-align: right; max-width: 15ch; text-wrap: balance; }
.cabeca-cartao { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: -4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--fio); }
.cabeca-cartao .logos.no-cartao { margin: 0; padding: 0; border: 0; flex: 1; }
.cabeca-cartao.no-bloco { margin: 14px 0 10px; padding-bottom: 8px; }
.onde-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 6px; }
.onde-linha .onde { margin: 0; }
.marco.no-inicio figcaption { max-width: 21ch; font-size: .7rem; }
.dica-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.marco.na-dica figcaption { font-size: .68rem; }
/* logos fora do mapa: cartão, dica, Agora, trajetória */
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.logos .logo { display: block; max-width: 100%; height: auto; }
.logo-papel { margin: 0; display: grid; gap: 3px; justify-items: start; }
.logo-grupo { display: flex; align-items: center; gap: 10px; }
.logo-papel figcaption { font-size: .74rem; line-height: 1.2; color: var(--sec); }
.logos.no-cartao { margin: -2px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--fio); }
.caixa > div > .logos.no-cartao { margin: 16px 0 10px; padding-bottom: 0; border-bottom: 0; }
.logos.na-dica { margin: 0 0 8px; gap: 8px 12px; }
.logos.na-traj { margin: 0 0 10px; }
.guia { stroke: #5F6E7D; stroke-width: .8px; stroke-opacity: .7; }
.lugar.so-marca .rot, .lugar.so-marca .guia { display: none; }

.passos { position: relative; z-index: 3; pointer-events: none; }
.passo { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: var(--menu-h) 0 0 clamp(16px, 4vw, 64px); }
.passo.ultimo { min-height: 115vh; min-height: 115svh; }
/* cartão de atlas: papel com grão fino e filete duplo por dentro, como a cártula de uma prancha */
.caixa, .dica {
  background-color: #FDFDFA;
  border: 1px solid #C3CCC5;
  box-shadow: inset 0 0 0 4px #FDFDFA, inset 0 0 0 5px rgba(29,39,51,.13), 0 12px 30px -14px rgba(29,39,51,.36);
}
.caixa::before, .dica::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url(relevo/papel.png) repeat; background-size: 512px 512px; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.caixa { position: relative; pointer-events: auto; width: min(400px, 31vw); border-radius: 4px; padding: 24px 26px 22px; }
.caixa h2 { font-size: 1.75rem; line-height: 1.12; font-weight: 750; letter-spacing: -0.005em; }
.caixa .quando { margin: 6px 0 14px; color: var(--sec); font-size: .95rem; }
.caixa .quando b { color: var(--tinta); font-weight: 600; }
.caixa p { margin: 0 0 10px; }
.caixa .cargo { font-weight: 600; }
.caixa .nota { color: var(--sec); font-size: .95rem; }
.caixa .outro-vinculo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fio); }
.longe { color: var(--sec); font-size: .9rem; display: flex; gap: 8px; align-items: center; margin-top: 12px !important; }
.longe svg { flex: none; }
.inicio .caixa { width: min(520px, 40vw); padding: 30px 32px 26px; }
.inicio h1 { font-size: clamp(2.6rem, 4.2vw, 4.1rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; }
.inicio .papel { font-size: 1.2rem; margin: 12px 0 18px; font-weight: 500; }
.inicio .onde { margin: 0 0 6px; color: var(--sec); }
.inicio .onde b { color: var(--tinta); font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.inicio .coord { display: block; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: .92rem; }
.inicio .modo { color: var(--sec); margin-bottom: 16px; }
/* portas do cartão inicial: as outras partes do site, grandes e com cor, logo abaixo do nome */
.portas { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; }
.porta { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 12px; background: #fff; border: 1px solid #C9D2CB; border-radius: 10px; color: var(--tinta); text-decoration: none; box-shadow: 0 1px 0 rgba(29,39,51,.05); transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); }
.porta .ic-porta { grid-row: 1 / span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--cor); background: color-mix(in srgb, var(--cor) 13%, #FFFFFF); }
.porta b { font: 700 1.04rem/1.15 var(--display); }
.porta small { color: var(--sec); font-size: .8rem; line-height: 1.25; }
.porta:hover, .porta:focus-visible { border-color: var(--cor); box-shadow: 0 8px 18px -12px rgba(29,39,51,.55), inset 0 0 0 1px var(--cor); transform: translateY(-1px); }
.porta:hover b { color: var(--cor); }
.porta-producao { grid-column: 1 / -1; grid-template-columns: 36px minmax(0, 1fr) auto; background: var(--tinta); border-color: var(--tinta); color: #fff; }
.porta-producao .ic-porta { color: #fff; background: rgba(255,255,255,.14); }
.porta-producao b { display: inline-flex; align-items: center; gap: 9px; }
.porta-producao small { color: #CBD5DE; }
.porta-producao:hover, .porta-producao:focus-visible { border-color: var(--tinta); box-shadow: 0 10px 22px -12px rgba(29,39,51,.75); }
.porta-producao:hover b { color: #fff; }
.porta-marcas { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.porta-marcas img { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; background: #fff; padding: 2px; }
.siga { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--fio); color: var(--sec); font-size: .92rem; display: flex; gap: 10px; align-items: center; }

.links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.lk { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.lk .lk-txt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(31,95,175,.45); }
.lk:hover .lk-txt { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.lk .icone { flex: none; display: block; }
.links-abertura { gap: 8px 18px; }

.estat { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 8px; padding: 0; list-style: none; }
.estat li { margin: 0; color: var(--sec); font-size: .9rem; max-width: 22ch; }
.estat b { display: block; font: 700 1.35rem/1.15 var(--display); color: var(--tinta); }
.pilha { display: inline-flex; gap: 3px; flex-wrap: wrap; vertical-align: middle; }
.pilha i { width: 8px; height: 13px; border-radius: 1.5px; display: block; }
.pilha i.co { background: transparent !important; box-shadow: inset 0 0 0 1.6px currentColor; }
.pubs { list-style: none; padding: 0; margin: 8px 0 6px; font-size: .92rem; }
.pubs li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; margin: 0 0 7px; line-height: 1.35; }
.q { width: 9px; height: 14px; border-radius: 1.5px; margin-top: 3px; display: block; }
.q.co { background: transparent !important; box-shadow: inset 0 0 0 1.6px currentColor; }
.pubs .meta { color: var(--sec); font-size: .84rem; }
.premio-linha { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .92rem; }
.premio-linha svg { flex: none; }

/* régua do tempo */
.regua { position: absolute; left: var(--mapa-x); right: 28px; bottom: 16px; height: 82px; z-index: 2; }
.regua svg { width: 100%; height: 100%; overflow: visible; display: block; }
.regua .eixo { stroke: #6F8390; stroke-width: 1px; }
.regua .tique { stroke: #8EA2AE; stroke-width: 1px; }
.regua .ano { font: 600 11px var(--corpo); fill: #4E6270; letter-spacing: .04em; }
.regua .barra, .regua .alvo { cursor: pointer; }
.regua .agulha line { stroke: var(--tinta); stroke-width: 1.5px; }
.regua .agulha text { font: 700 12px var(--display); fill: var(--tinta); paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 4px; }
.regua .fundo { fill: rgba(255,255,255,.55); }

/* legenda e escala */
.legenda {
  position: absolute; left: var(--mapa-x); right: 28px; bottom: 106px; z-index: 2;
  display: flex; flex-direction: row; align-items: baseline; gap: 4px 14px;
  background: rgba(255,255,255,.9); border: 1px solid #D3DBD4; border-radius: 6px;
  padding: 8px 12px 7px; font-size: .76rem; line-height: 1.25; color: var(--tinta); transition: opacity .5s var(--ease);
}
.legenda .linha1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; flex: 1; }
.legenda h2 { font: 700 .8rem var(--display); margin: 0; flex: none; }
.legenda ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.legenda li { display: inline-flex; align-items: center; gap: 6px; }
.legenda li svg { flex: none; }
.legenda .temas { display: flex; flex-wrap: wrap; gap: 3px 14px; color: var(--sec); }
.legenda .temas span { display: inline-flex; align-items: center; gap: 5px; }
.legenda .temas i { width: 7px; height: 11px; border-radius: 1.5px; display: inline-block; }
.bt-legenda { display: none; }
.escala { position: absolute; left: calc(var(--mapa-x) + 4px); top: calc(var(--menu-h) + 16px); z-index: 2; font: 600 11px var(--corpo); color: #3F5361; }
.escala svg { display: block; overflow: visible; }
.dica {
  position: absolute; z-index: 6; width: max-content; max-width: 300px; pointer-events: none;
  border-radius: 4px; padding: 12px 14px 11px;
  font-size: .82rem; line-height: 1.38;
}
.dica b { font-family: var(--display); font-size: .95rem; }
.dica ul { margin: 4px 0 0; padding: 0; list-style: none; }
.dica li { margin: 2px 0; }

.projeto-item figure { margin: 0 0 14px; border: 1px solid #C9D6DC; border-radius: 4px; overflow: hidden; background: var(--oceano); transition: border-color .25s var(--ease); }
.mini-mapa { display: block; width: 100%; height: auto; aspect-ratio: 1 / .92; }
.projeto-item .pergunta { margin: 8px 0 10px; color: var(--sec); }
.ver { color: var(--trabalho); font-weight: 600; font-size: .95rem; text-decoration: underline; text-decoration-color: rgba(31,95,175,.4); text-underline-offset: .22em; }
.projeto-item:hover figure { border-color: var(--trabalho); }
.projeto-item:hover .ver { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* portas de cada passo da história: a parte do site que continua o assunto do cartão */
.portas-cap { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--fio); }
.porta-cap { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 9px 5px 7px; background: #fff; border: 1px solid color-mix(in srgb, var(--cor) 38%, #C9D2CB); border-radius: 999px; color: var(--tinta); font-size: .84rem; font-weight: 650; line-height: 1.2; text-decoration: none; transition: border-color .15s, background-color .15s; }
.porta-cap .ic-cap { flex: none; display: inline-flex; color: var(--cor); }
.porta-cap .ic-cap svg, .porta-cap .ic-cap img { display: block; }
.porta-cap > .ic-lucide { flex: none; color: var(--cor); }
.porta-cap:hover, .porta-cap:focus-visible { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 9%, #fff); }
.pictos-cap { display: inline-flex; }
.pictos-cap > * + * { margin-left: -3px; }

/* fim da página inicial: para onde agora, um cartão por parte do site com a prévia do que tem lá */
.continuar { max-width: 1240px; padding-top: 88px; padding-bottom: 24px; }
.continuar > .intro { margin: 10px 0 0; color: var(--sec); max-width: 62ch; font-size: 1.08rem; }
.portas-grandes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.portas-grandes > li { display: flex; min-width: 0; }
.porta-grande {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 12px 18px;
  background-color: #FDFDFA; border: 1px solid #C3CCC5; border-radius: 6px; color: var(--tinta); text-decoration: none;
  box-shadow: inset 0 0 0 4px #FDFDFA, inset 0 0 0 5px rgba(29,39,51,.13), 0 14px 30px -20px rgba(29,39,51,.45);
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.porta-grande::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url(relevo/papel.png) repeat; background-size: 512px 512px; mix-blend-mode: multiply; opacity: .45; pointer-events: none; }
.porta-grande > * { position: relative; }
.pg-previa { aspect-ratio: 2 / 1; overflow: hidden; display: grid; border-radius: 4px; border: 1px solid #C9D6DC; background: var(--fundo); pointer-events: none; transition: border-color .2s; }
.pg-previa > * { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.pg-corpo { flex: 1; display: flex; flex-direction: column; padding: 14px 8px 0; }
.porta-grande h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.3rem, 1.5vw, 1.6rem); }
.porta-grande .ic-porta { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--cor); background: color-mix(in srgb, var(--cor) 13%, #fff); }
.porta-grande p { flex: 1; margin: 8px 0 14px; color: var(--sec); }
.pg-ir { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--cor); font-weight: 700; }
.pg-ir span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--cor) 40%, transparent); }
.porta-grande:hover, .porta-grande:focus-visible { border-color: var(--cor); transform: translateY(-2px); box-shadow: inset 0 0 0 4px #FDFDFA, inset 0 0 0 5px color-mix(in srgb, var(--cor) 50%, transparent), 0 20px 36px -20px rgba(29,39,51,.55); }
.porta-grande:hover .pg-previa, .porta-grande:focus-visible .pg-previa { border-color: color-mix(in srgb, var(--cor) 60%, #C9D6DC); }
.porta-grande:hover .pg-ir span, .porta-grande:focus-visible .pg-ir span { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
/* prévia de Projetos: os nove cartões, cada um com o pictograma e a cor do tema */
.pv-projetos ul { margin: 0; padding: 10px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pv-projetos li { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 3px 8px; background: #fff; border: 1px solid #D5DCD6; border-top: 3px solid var(--c); border-radius: 4px; }
.pv-projetos .pv-picto { flex: none; display: grid; }
.pv-projetos .pv-picto svg, .pv-projetos .pv-picto img { width: 22px; height: 22px; display: block; }
.pv-projetos .pv-nome { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 650 .74rem/1.15 var(--display); color: var(--tinta); }
/* prévia estreita (quatro cartões numa linha, celular): o nome não cabe, fica só o pictograma, maior */
.pg-previa { container-type: inline-size; }
@container (max-width: 460px) {
  .pv-projetos li { justify-content: center; padding: 0; background: color-mix(in srgb, var(--c) 8%, #fff); }
  .pv-projetos .pv-nome { display: none; }
  .pv-projetos .pv-picto svg, .pv-projetos .pv-picto img { width: 28px; height: 28px; }
}
/* prévia de Pesquisa: as ilhas da página, inteiras */
.pv-pesquisa { background: #D3E2E8; }
.pv-pesquisa .arquipelago { width: 100%; height: 100%; }
/* prévia de Sobre: o retrato e a trajetória */
.pv-sobre > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 7%; padding: 6% 7%; }
.pv-sobre img { height: 100%; width: auto; aspect-ratio: 1; object-fit: cover; display: block; border: 4px solid #fff; border-radius: 3px; box-shadow: 0 6px 16px -10px rgba(29,39,51,.55); }
.pv-gantt { width: 100%; height: auto; max-height: 100%; display: block; }
.pv-gantt .pv-hoje { stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
/* prévia de Colaboradores: os fios de casa até cada cidade, com o número de pessoas */
.pv-colaboradores { background: var(--oceano); }
.pv-mapa { display: block; }
.pv-conta { font-family: var(--display); font-weight: 700; fill: var(--tinta); }
.pv-fora { font-family: var(--corpo); font-weight: 650; fill: var(--tinta); paint-order: stroke; stroke: rgba(255,255,255,.88); stroke-width: 3px; }

/* ---------------- em produção: os sistemas no ar, com a demonstração, os números, a IA e o pipeline */
.producao { max-width: 1240px; padding-top: 88px; padding-bottom: 8px; }
.producao > .intro { margin: 10px 0 0; color: var(--sec); max-width: 64ch; font-size: 1.08rem; }
.prods { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.prod { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 12px 12px 18px;
  background-color: #FDFDFA; border: 1px solid #C3CCC5; border-top: 4px solid var(--cor); border-radius: 6px;
  box-shadow: inset 0 0 0 4px #FDFDFA, inset 0 0 0 5px rgba(29,39,51,.13), 0 14px 30px -20px rgba(29,39,51,.45); }
.prod::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url(relevo/papel.png) repeat; background-size: 512px 512px; mix-blend-mode: multiply; opacity: .45; pointer-events: none; }
.prod > * { position: relative; }
.prod-midia { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #0E1018; cursor: pointer; }
.prod-midia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease), filter .3s; }
.prod-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: var(--cor); box-shadow: 0 0 0 7px color-mix(in srgb, var(--cor) 28%, transparent), 0 12px 26px -8px rgba(0,0,0,.6); transition: transform .25s var(--ease); }
.prod-play .ic-lucide { margin-left: 3px; fill: currentColor; }
.prod-dur { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(14,16,24,.82); color: #fff; font: 600 .78rem/1.3 var(--corpo); }
.prod-midia:hover img, .prod-midia:focus-visible img { transform: scale(1.03); filter: brightness(.92); }
.prod-midia:hover .prod-play, .prod-midia:focus-visible .prod-play { transform: scale(1.08); }
.prod-midia:focus-visible { outline: 3px solid var(--cor); outline-offset: 3px; }
.prod-corpo { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px 8px 0; }
.prod-cab { display: flex; align-items: center; gap: 12px; }
.prod-marca { flex: none; width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.prod-cab h3 { margin: 0; font-size: clamp(1.3rem, 1.5vw, 1.55rem); line-height: 1.1; }
.prod-noar { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--sec); font-size: .86rem; text-decoration: none; overflow-wrap: anywhere; }
.prod-noar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 4px rgba(46,158,91,.18); }
.prod-noar .rotulo { color: #237A47; font-weight: 700; }
.prod-noar:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: .2em; }
.prod-frase { margin: 0; color: var(--sec); }
.prod-numeros { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.prod-numeros > div { padding: 8px 10px 9px; border-radius: 6px; background: color-mix(in srgb, var(--cor) 7%, #fff); border: 1px solid color-mix(in srgb, var(--cor) 18%, #fff); }
.prod-numeros dt { font: 750 1.55rem/1.05 var(--display); color: var(--cor); letter-spacing: -.01em; }
.prod-numeros dd { margin: 3px 0 0; color: var(--sec); font-size: .8rem; line-height: 1.3; }
.prod-uso { padding: 10px 12px 11px; border-radius: 6px; background: #EEF6F1; border: 1px solid #CFE5D7; }
.prod-uso-rot { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font: 700 .74rem var(--corpo); letter-spacing: .06em; text-transform: uppercase; color: #237A47; }
.prod-uso dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px 12px; }
.prod-uso dt { font: 750 1.3rem/1.1 var(--display); color: #1E6B3E; }
.prod-uso dd { margin: 2px 0 0; color: var(--sec); font-size: .78rem; line-height: 1.3; }
.prod-fichas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prod-fichas li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 11px; border-radius: 6px; font-size: .86rem; line-height: 1.35; }
.prod-fichas .ic-lucide { flex: none; margin-top: 1px; }
.prod-fichas .selo { background: #FBF3DC; color: var(--premio-escuro); font-weight: 650; }
.prod-fichas .ia { background: color-mix(in srgb, var(--cor) 10%, #fff); color: color-mix(in srgb, var(--cor) 78%, #1D2733); }
.prod-pipe { margin-top: auto; padding-top: 12px; border-top: 1px solid #DDE3DC; }
.prod-pipe-rot { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 700 .78rem var(--corpo); letter-spacing: .06em; text-transform: uppercase; color: var(--sec); }
.prod-pipe ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prod-pipe li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; background: #EAF5EE; color: #1E6B3E; font-size: .8rem; font-weight: 600; }
.prod-pipe li .ic-lucide { flex: none; padding: 2px; border-radius: 50%; background: #2E9E5B; color: #fff; stroke-width: 3.2; width: 15px; height: 15px; }
.prod-links { display: flex; flex-wrap: wrap; gap: 8px; }
.prod-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--cor) 45%, #fff); color: var(--cor); font-weight: 700; font-size: .9rem; text-decoration: none; background: #fff; }
.prod-link.forte { background: var(--cor); border-color: var(--cor); color: #fff; }
.prod-link:hover, .prod-link:focus-visible { border-color: var(--cor); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--cor) 70%, transparent); }
/* o vídeo abre num diálogo por cima de tudo */
.video-prod { width: min(94vw, calc((100vh - 48px) * 16 / 9), 1600px); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.video-prod::backdrop { background: rgba(10,12,18,.84); backdrop-filter: blur(3px); }
.video-moldura { position: relative; }
.video-moldura video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.video-fechar { position: absolute; right: -14px; top: -14px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--tinta); box-shadow: 0 6px 18px rgba(0,0,0,.4); cursor: pointer; }
.video-fechar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ponto verde "no ar": no menu, na porta do cartão inicial, na seção e na página Em produção */
.ponto-no-ar { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46,158,91,.22); }
@media (prefers-reduced-motion: no-preference) { .ponto-no-ar { animation: pulso-no-ar 2.4s ease-in-out infinite; } }
@keyframes pulso-no-ar { 0%, 100% { box-shadow: 0 0 0 2px rgba(46,158,91,.3); } 50% { box-shadow: 0 0 0 6px rgba(46,158,91,0); } }
.prod-ver-pagina { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 700; text-decoration: none; }
.prod-ver-pagina:hover, .prod-ver-pagina:focus-visible { background: #2C3B4C; }
.prod-ver-pagina .ponto-no-ar { box-shadow: 0 0 0 3px rgba(46,158,91,.35); }

/* página Em produção: cabeçalho com atalhos para os três sistemas e um cartão largo por sistema */
.pagina-producao .producao-cab { max-width: 1240px; padding-top: 36px; padding-bottom: 8px; }
.pagina-producao .producao-cab h1 { font-size: clamp(2.5rem, 4.5vw, 3.5rem); }
.pagina-producao .producao-cab .intro { margin: 8px 0 18px; max-width: 66ch; color: var(--sec); font-size: 1.08rem; }
.prod-saltos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.prod-saltos a { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid #CBD4CD; color: var(--tinta); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.prod-saltos a:hover, .prod-saltos a:focus-visible { border-color: var(--cor); box-shadow: inset 0 0 0 1px var(--cor); }
.prod-saltos img { flex: none; width: 30px; height: 30px; object-fit: contain; border-radius: 7px; }
.prod-saltos b { display: block; font: 700 .98rem/1.15 var(--display); }
.prod-saltos small { display: flex; align-items: center; gap: 6px; color: var(--sec); font-size: .8rem; line-height: 1.3; }
.prod-nota { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--sec); font-size: .88rem; }
.prod-nota .ic-lucide { flex: none; fill: currentColor; }
.producao-pagina { max-width: 1240px; }
.prods-pagina { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 10px; }
.prod-largo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0 28px; align-items: start; padding: 14px 14px 20px; }
.prod-largo > .prod-midia { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--menu-h) + 16px); }
.prod-largo > .prod-corpo { grid-column: 2; grid-row: 1; padding: 6px 4px 0; }
.prod-largo:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.prod-largo:nth-child(even) > .prod-midia { grid-column: 2; }
.prod-largo:nth-child(even) > .prod-corpo { grid-column: 1; }
.prod-largo .prod-cab h2 { margin: 0; font-size: clamp(1.5rem, 2vw, 1.95rem); line-height: 1.1; }
.prod-largo .prod-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.prod-largo .prod-dur { font-size: .86rem; padding: 5px 12px; }
video.prod-midia { object-fit: contain; cursor: auto; }

@media (min-width: 1800px) {
  .continuar { max-width: 1720px; }
  .portas-grandes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .producao { max-width: 1720px; }
  .pagina-producao .producao-cab, .producao-pagina { max-width: 1600px; }
}
@media (max-width: 1100px) {
  .prods { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .prods-pagina { max-width: 860px; }
  .prod-largo, .prod-largo:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .prod-largo > .prod-midia, .prod-largo:nth-child(even) > .prod-midia { grid-column: auto; grid-row: auto; position: relative; top: auto; }
  .prod-largo > .prod-corpo, .prod-largo:nth-child(even) > .prod-corpo { grid-column: auto; grid-row: auto; padding: 16px 8px 0; }
}
@media (max-width: 700px) {
  .continuar { padding-top: 64px; }
  .portas-grandes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .producao { padding-top: 64px; }
  .prods { gap: 16px; }
  .video-fechar { right: 6px; top: -52px; }
}

/* projetos */
.lista-projetos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 52px 36px; }
.projeto-item { display: block; color: var(--tinta); text-decoration: none; }
.projeto-item h2 { font-size: 1.4rem; display: flex; align-items: center; line-height: 1.15; }
.estat-p { margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.estat-p li { max-width: none; }
.estat-p b { font-size: 1.15rem; }
.tema-txt { color: var(--sec); font-size: .9rem; margin: 0 0 12px; }

/* projeto: estudo de caso */
.cabecalho-projeto { padding-top: 56px; }
.migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--sec); font-size: .95rem; margin: 0 0 18px; }
.barra-migalha { color: #A2ACB6; }
.volta-lista, .tema-migalha { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border: 1px solid #C9D2CB; border-radius: 999px; background: #fff; color: var(--tinta); font-weight: 600; text-decoration: none; }
.volta-lista:hover { border-color: var(--trabalho); color: var(--trabalho); }
.tema-migalha { padding-left: 10px; font-weight: 500; color: var(--sec); }
.tema-migalha svg { color: var(--cor); }
.tema-migalha:hover { border-color: var(--cor); color: var(--tinta); }
.cabecalho-projeto h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; display: flex; align-items: center; }
.cabecalho-projeto h1 .chip { width: 13px; height: 30px; }
.papel-caso { color: var(--sec); margin: 12px 0 0; }
.pergunta-grande { margin: 30px 0 0; padding: 0; max-width: 980px; }
.pergunta-grande p { margin: 0; font: italic 600 clamp(1.4rem, 2.5vw, 1.95rem)/1.3 var(--display); color: var(--tinta); max-width: 46ch; }
.pergunta-grande p::before { content: '\201C'; color: var(--evento); margin-right: .06em; }
.pergunta-grande p::after { content: '\201D'; color: var(--evento); margin-left: .04em; }
.figura-mapa { max-width: 1160px; margin: 40px auto 0; padding: 0 clamp(16px, 5vw, 48px); }
.mapa-estatico { position: relative; height: clamp(320px, 52vw, 560px); border: 1px solid #C9D6DC; border-radius: 6px; overflow: hidden; background: var(--oceano); }
.mapa-estatico > canvas, .mapa-estatico > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.figura-mapa figcaption { color: var(--sec); font-size: .9rem; margin-top: 10px; max-width: 80ch; }
.figura-mapa .fora { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.caso { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; padding-top: 64px; }
.bloco-caso h2 { font-size: 1.5rem; font-weight: 750; margin-bottom: 12px; }
.bloco-caso > p { margin: 0 0 10px; max-width: 62ch; }
.bloco-caso.largo { grid-column: 1 / -1; }
.resultado-txt { font-size: 1.12rem; }
.stack-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stack-lista li { border: 1px solid #C9D2CB; border-radius: 999px; padding: 4px 12px; font-size: .9rem; background: #fff; }
.lnk { display: flex; gap: 16px; flex-wrap: wrap; font-size: .95rem; }
.lk-ic { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.lk-ic span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.lk-ic:hover span { text-decoration-thickness: 2px; }
.lk-ic svg { flex: none; color: var(--sec); }

/* diagrama "como funciona": rota com estações */
.diagrama { overflow-x: auto; padding: 6px 2px 4px; }
.rota { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(150px, 1fr)); gap: 0; position: relative; counter-reset: passo; }
.estacao { position: relative; padding: 46px 18px 0 0; }
.estacao::before { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 6px; background: var(--cor); border-radius: 3px; }
.estacao:first-child::before { left: 16px; }
.estacao:last-child::before { right: calc(100% - 16px); }
.estacao:not(:last-child)::after { content: ''; position: absolute; top: 9px; right: 6px; width: 12px; height: 12px; border-top: 3px solid var(--cor); border-right: 3px solid var(--cor); transform: rotate(45deg); background: transparent; }
.estacao .no { position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 4px solid var(--cor); display: grid; place-items: center; font: 800 .95rem/1 var(--display); color: var(--tinta); }
.estacao h3 { font-size: 1.08rem; margin: 0 0 6px; }
.estacao p { margin: 0; color: var(--sec); font-size: .95rem; max-width: 28ch; }

/* resultado: blocos de tempo e quadrados em escala */
.blocos-tempo { margin: 14px 0 6px; }
.faixa-blocos { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; margin-bottom: 14px; }
.faixa-blocos .rot { font-size: .95rem; color: var(--sec); }
.faixa-blocos .rot b { display: block; font: 700 1.3rem/1.1 var(--display); color: var(--tinta); }
.grade-blocos { display: flex; flex-wrap: wrap; gap: 2px; }
.grade-blocos i { width: 7px; height: 11px; background: #A9B7C3; border-radius: 1px; display: block; }
.grade-blocos.depois i { background: var(--casa); }
.nota-figura { color: var(--sec); font-size: .92rem; margin: 6px 0 16px; max-width: 70ch; }
.quadrados { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin: 16px 0 6px; }
.quad .area { background: #E2632B; border-radius: 1px; }
.quad.rep .area { background: #A9B7C3; }
.quad.esc .area { background: var(--tinta); }
.quad p { margin: 8px 0 0; max-width: 18ch; color: var(--sec); font-size: .9rem; }
.quad p b { display: block; font: 700 1.2rem/1.1 var(--display); color: var(--tinta); }
.numeros-grandes .estat b { font-size: 1.8rem; }
.numeros-grandes .estat { gap: 14px 40px; }

.nav-casos { display: flex; justify-content: space-between; gap: 24px; padding-top: 72px; padding-bottom: 24px; }
.nav-casos a { display: grid; gap: 4px; text-decoration: none; color: var(--tinta); max-width: 46%; }
.nav-casos a b { font: 700 1.2rem/1.2 var(--display); text-decoration: underline; text-decoration-color: rgba(31,95,175,.35); text-underline-offset: .2em; }
.nav-casos .dir { color: var(--sec); font-size: .9rem; }
.nav-casos .prox { text-align: right; margin-left: auto; }

/* pesquisa: filtros e lista */
.filtros { padding-top: 34px; }
.rotulo-filtro { margin: 0 0 8px; font-weight: 600; font-size: .92rem; }
.chips-tema { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-tema { display: inline-flex; align-items: center; gap: 8px; font: 500 .92rem var(--corpo); color: var(--tinta); background: #fff; border: 1px solid #C9D2CB; border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.chip-tema i { width: 8px; height: 13px; border-radius: 1.5px; }
.chip-tema[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); font-weight: 650; }
.selects { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.filtro { display: grid; gap: 4px; font-size: .88rem; color: var(--sec); }
.filtro select { font: 500 .95rem var(--corpo); color: var(--tinta); background: #fff; border: 1px solid #B9C4BC; border-radius: 6px; padding: 8px 30px 8px 10px; min-width: 150px; }
.limpar { font: 600 .9rem var(--corpo); background: none; border: 0; color: var(--trabalho); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; padding: 10px 4px; }
.contagem { margin: 16px 0 0; color: var(--sec); font-size: .95rem; }
.lista-pub { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lista-pub > li:not(.sep-evento) { display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
.lista-pub .q { height: 15px; margin-top: 5px; }
.lista-pub .titulo { font-weight: 600; line-height: 1.32; }
.lista-pub .meta { color: var(--sec); font-size: .88rem; margin-top: 2px; }
.lista-pub .resumo { font-size: .93rem; margin: 4px 0 2px; max-width: 80ch; }
.lista-pub .lnk { font-size: .88rem; gap: 14px; }
.lista-pub .pr { display: inline-flex; align-items: center; gap: 6px; color: var(--premio-escuro); font-weight: 600; margin: 4px 0; font-size: .9rem; }
.sep-evento { padding-top: 26px; border-top: 1px solid var(--fio); margin-top: 8px; }
.sep-evento h2 { font-size: 1.35rem; }
.sep-evento p { margin: 2px 0 0; color: var(--sec); font-size: .92rem; }
.vazio { color: var(--sec); padding: 20px 0; }
.lista-pub.curta { gap: 16px; }
.premios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px 40px; }
.premios li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.premios h3 { font-size: 1.12rem; }
.premios p { margin: 2px 0 0; color: var(--sec); font-size: .92rem; }
.premios .lugarz { font-size: .84rem; color: var(--terc); margin-top: 4px; }

/* pesquisa por tema: topo em uma faixa, arquipélago + painel, lista compacta por tema */
.pesq-topo { padding-top: 36px; padding-bottom: 0; }
.pesq-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pesq-titulo h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.caixas-num { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.caixas-num li { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; row-gap: 1px; align-items: center; padding: 8px 14px 7px 12px; border: 1px solid #CBD4CD; border-top: 3px solid var(--cor); border-radius: 4px; background: #FDFDFA; min-width: 112px; }
.caixas-num b { font: 750 1.55rem/1 var(--display); color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; }
.caixas-num .rot-caixa { font-size: .8rem; color: var(--sec); line-height: 1.2; grid-column: 2; }
.caixas-num .ic-caixa { grid-row: 1 / span 2; display: grid; place-items: center; color: color-mix(in srgb, var(--cor) 82%, #1D2733); }
.caixas-num .ic-caixa svg { display: block; }
.seis-temas { display: grid; grid-template-columns: repeat(3, 13px); gap: 3px 4px; }
.seis-temas > span { color: color-mix(in srgb, var(--cor) 80%, #1D2733); display: block; line-height: 0; }
.pesq-controles { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
.vistas { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #C3CCC5; border-radius: 999px; background: #fff; }
.bt-vista { font: 600 .86rem var(--corpo); color: var(--sec); background: none; border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.bt-vista[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.bt-vista:not([aria-pressed="true"]):hover { color: var(--tinta); background: rgba(29,39,51,.06); }
.pesq-controles .selects { gap: 8px; }
.pesq-controles .filtro select { min-width: 0; padding: 6px 28px 6px 10px; font-size: .88rem; }
.pesq-controles .contagem { margin: 0 0 0 auto; font-size: .88rem; }
.pesq-palco { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: 22px; padding-top: 14px; align-items: start; }
.vista-pesq { margin: 0; position: relative; border: 1px solid #B9CAD2; border-radius: 6px; overflow: hidden; background: #D3E2E8; }
.vista-pesq.vista-geo { padding: 0; border: 0; background: none; overflow: visible; }
.vista-geo .mapa-estatico { height: clamp(360px, 40vw, 520px); }
.vista-geo figcaption { display: none; }
.arquipelago { display: block; width: 100%; height: auto; }
.mar-esquema { fill: #D3E2E8; }
.linha-agua { fill: none; stroke: #7FA6B8; stroke-width: 1.1px; vector-effect: non-scaling-stroke; }
.terra-ilha { fill: color-mix(in srgb, var(--cor) 15%, #F3F1E6); }
.costa-ilha { fill: none; stroke: #45677A; stroke-width: 1.3px; }
.ilha { cursor: pointer; }
.ilha:focus { outline: none; }
.ilha:focus-visible .costa-ilha, .ilha:hover .costa-ilha, .ilha.realce .costa-ilha { stroke: var(--tinta); stroke-width: 2.2px; }
.nome-ilha { font: 700 19px var(--display); letter-spacing: .15em; text-transform: uppercase; fill: color-mix(in srgb, var(--cor) 70%, #1D2733); paint-order: stroke; stroke: rgba(214,229,234,.9); stroke-width: 3px; pointer-events: none; }
/* brasão do tema: escudo de papel com filete, o pictograma do kit e a contagem num selo */
.brasao { cursor: pointer; }
.brasao .escudo { fill: #FDFDFA; stroke: color-mix(in srgb, var(--cor) 78%, #1D2733); stroke-width: 2.2px; }
.brasao .escudo-filete { fill: none; stroke: color-mix(in srgb, var(--cor) 55%, #FDFDFA); stroke-width: 1.1px; }
.brasao svg { color: color-mix(in srgb, var(--cor) 80%, #1D2733); }
.conta-brasao circle { fill: color-mix(in srgb, var(--cor) 80%, #1D2733); stroke: #FDFDFA; stroke-width: 2px; }
.conta-brasao text { font: 750 13px var(--display); fill: #fff; font-variant-numeric: tabular-nums; }
.brasao:hover .escudo, .brasao.realce .escudo { stroke: var(--tinta); stroke-width: 2.8px; }
.estrada-borda { fill: none; stroke: #FDFDFA; stroke-width: 5px; stroke-linecap: round; }
.estrada-traco { fill: none; stroke: #8A4E2E; stroke-width: 1.8px; stroke-linecap: round; stroke-dasharray: 7 3; }
.estrada.realce .estrada-traco { stroke-width: 3px; stroke-dasharray: none; }
.cidade { cursor: pointer; }
.cidade:focus { outline: none; }
/* marcador de publicação (mapa, legenda e listas): cheio = primeiro autor, vazado = coautor, pictograma dentro */
.ponto-cidade { fill: #FDFDFA; stroke: color-mix(in srgb, var(--cor) 80%, #1D2733); stroke-width: 2.2px; }
.ponto-cidade.cheio { fill: color-mix(in srgb, var(--cor) 76%, #1D2733); stroke: #FDFDFA; stroke-width: 2px; }
.ponto-cidade.minicurso, .ponto-cidade.preprint { stroke-dasharray: 3 2.2; }
.picto-cidade { color: color-mix(in srgb, var(--cor) 80%, #1D2733); pointer-events: none; stroke-width: 2.4; }
.picto-cidade.no-cheio { color: #fff; stroke-width: 2.1; }
.anel-premio { fill: none; stroke: var(--premio); stroke-width: 3px; }
.marcador { display: block; flex: none; overflow: visible; }
.nome-cidade { font: 600 15px var(--corpo); font-variation-settings: 'wdth' 86; fill: var(--tinta); paint-order: stroke; stroke: rgba(250,250,244,.92); stroke-width: 3px; }
.cidade:hover .ponto-cidade, .cidade:focus-visible .ponto-cidade, .cidade.realce .ponto-cidade { stroke: var(--tinta); stroke-width: 2.8px; }
.cidade:focus-visible .nome-cidade, .cidade.realce .nome-cidade { font-weight: 750; }
.arquipelago.com-realce .cidade:not(.realce) { opacity: .45; }
.cidade.apagada { opacity: .12 !important; pointer-events: none; }
.carimbo-esquema { font: italic 500 15px var(--display); fill: #3D5E70; }
.painel-pesq { position: sticky; top: calc(var(--menu-h) + 14px); border: 1px solid #C3CCC5; border-radius: 4px; background: #FDFDFA; padding: 14px 16px; max-height: calc(100vh - var(--menu-h) - 28px); overflow: auto; box-shadow: inset 0 0 0 4px #FDFDFA, inset 0 0 0 5px rgba(29,39,51,.1); }
.painel-pesq h2 { font-size: 1.1rem; margin: 2px 0 8px; }
.leg-esquema, .premios-p, .lista-tema { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; font-size: .84rem; line-height: 1.35; }
.leg-esquema li { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; color: var(--sec); }
.leg-esquema li > svg { justify-self: center; }
.premios-p li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; color: var(--sec); }
.logos-premio { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.logos-premio .logo, .lista-tema .logo, .lista-compacta .logo, .projeto-painel .logo { display: block; height: auto; max-height: 24px; }
.lista-tema .logo { max-height: 20px; }
.premios-p b { color: var(--tinta); }
.link-pub { font: inherit; color: var(--trabalho); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(31,95,175,.4); text-underline-offset: .18em; }
.link-pub:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.premios-p .link-pub { font-weight: 600; }
.fechar-painel { font: 600 .82rem var(--corpo); color: var(--sec); background: none; border: 1px solid #CBD4CD; border-radius: 999px; padding: 4px 11px; cursor: pointer; margin-bottom: 10px; }
.fechar-painel:hover { color: var(--tinta); border-color: var(--tinta); }
.tema-painel, .tema-linha { display: flex; align-items: center; gap: 9px; color: color-mix(in srgb, var(--cor) 75%, #1D2733); }
.tema-linha { margin: 0 0 6px; font-weight: 600; font-size: .86rem; }
.titulo-painel { font-size: 1.2rem !important; line-height: 1.25; }
.meta-painel { color: var(--sec); font-size: .9rem; margin: 0 0 10px; }
.premio-painel { display: flex; gap: 8px; align-items: center; color: var(--premio-escuro); font-weight: 650; margin: 0 0 10px; }
.resumo-painel { font-size: .95rem; margin: 0 0 12px; }
.projeto-painel { font-size: .92rem; color: var(--sec); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--fio); padding-top: 10px; }
.projeto-painel .picto-proj { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--cor) 80%, #1D2733); color: color-mix(in srgb, var(--cor) 80%, #1D2733); background: #FDFDFA; }
.projeto-painel .rot-proj { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--terc); }
.projeto-painel a { font-weight: 650; }
.cabeca-pub { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.cabeca-pub .tema-linha { margin: 0 0 4px; }
.cabeca-pub .logos { display: flex; align-items: center; gap: 10px; }
.cabeca-pub .logos .logo { height: 28px; width: auto; }
.lista-tema li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; }
.lista-tema .meta { color: var(--sec); font-size: .84rem; }
.pesq-lista { padding-top: 30px; }
.pesq-lista > h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem) !important; }
.pesq-lista .intro { margin: 6px 0 14px; }
.grupo-tema { border-top: 1px solid var(--fio); }
.grupo-tema:last-of-type { border-bottom: 1px solid var(--fio); }
.grupo-tema summary { display: flex; align-items: center; gap: 12px; padding: 10px 4px; cursor: pointer; list-style: none; color: color-mix(in srgb, var(--cor) 72%, #1D2733); }
.grupo-tema summary::-webkit-details-marker { display: none; }
.grupo-tema summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--sec); border-bottom: 2px solid var(--sec); transform: rotate(45deg); margin-left: 6px; transition: transform .2s var(--ease); }
.grupo-tema[open] summary::after { transform: rotate(225deg); }
.grupo-tema summary .nome { font: 700 1.05rem var(--display); color: var(--tinta); }
.grupo-tema summary .conta { font: 750 .95rem var(--display); color: var(--sec); font-variant-numeric: tabular-nums; }
.grupo-tema summary .pilha, .grupo-tema summary .mini-marcas { margin-left: auto; }
.mini-marcas { display: flex; align-items: center; gap: 1px; }
.brasao-svg { display: block; flex: none; overflow: visible; }
.grupo-tema summary:hover .nome { text-decoration: underline; text-underline-offset: .2em; }
.lista-compacta { list-style: none; margin: 0 0 14px; padding: 0 4px 0 38px; display: grid; gap: 12px; }
.lista-compacta li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; }
.lista-compacta li > .logo { margin-top: 4px; }
.lista-compacta .titulo-lista { color: var(--tinta); font-weight: 600; text-decoration-color: rgba(29,39,51,.25); }
.lista-compacta .meta { display: block; color: var(--sec); font-size: .85rem; }
.lista-compacta .lnk { font-size: .85rem; gap: 12px; }
@media (min-width: 1000px) { .lista-compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
/* destaque nos textos corridos (comum/destaque.js) */
.dq { font-weight: 650; color: var(--tinta); }
.dq-ico { height: 1em; width: auto; vertical-align: -.14em; margin-right: .22em; display: inline-block; }
.dq-ico svg { width: 1em; height: 1em; }

/* sobre */
.sobre-topo { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 48px; align-items: start; padding-top: 64px; }
.retrato { margin: 0; }
.retrato img { width: 100%; height: auto; display: block; border-radius: 4px; border: 6px solid #fff; box-shadow: 0 10px 30px -16px rgba(29,39,51,.45); }
.retrato figcaption { margin-top: 12px; color: var(--sec); font-size: .9rem; display: grid; }
.retrato figcaption b { color: var(--tinta); font-family: var(--display); }
.bio h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
.bio .papel { font-size: 1.2rem; font-weight: 500; margin: 10px 0 18px; }
.bio p { max-width: 66ch; }
.gantt { width: 100%; overflow: hidden; margin: 8px 0 30px; }
.gantt svg { display: block; }
.g-ano { font: 600 12px var(--corpo); fill: var(--sec); }
.g-ano-linha { stroke: #C9D2CB; stroke-dasharray: 3 4; }
.g-org { font: 700 13px var(--display); fill: var(--tinta); }
.g-cargo { font: 500 11px var(--corpo); fill: var(--sec); }
.g-eixo { stroke: #8EA2AE; }
.g-hoje { stroke: var(--tinta); stroke-width: 1.2px; stroke-dasharray: 2 3; }
.g-hoje-t { font: 600 11px var(--corpo); fill: var(--tinta); }
.lista-traj { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px 40px; }
.lista-traj h3 { font-size: 1.08rem; }
.lista-traj .quando { color: var(--sec); margin: 4px 0 6px; font-size: .92rem; }
.lista-traj p { margin: 0 0 6px; }
.lista-traj ul { margin: 0; padding-left: 1.1em; color: var(--sec); font-size: .93rem; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 56px; }
.duas h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 18px; }
.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.itens h3 { font-size: 1.08rem; }
.itens p { margin: 4px 0 0; color: var(--sec); font-size: .95rem; }
.stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px 40px; margin: 22px 0 0; }
.stack dt { font: 700 1rem var(--display); }
.stack dd { margin: 4px 0 0; color: var(--sec); font-size: .93rem; }

/* rodapé */
.rodape { margin-top: 48px; background: #E9EEE8; border-top: 1px solid var(--fio); }
.rodape-dentro { max-width: 1160px; margin: 0 auto; padding: 36px clamp(16px, 5vw, 48px) 32px; }
.rodape h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 750; }
.rodape .email { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; font: 750 clamp(1.4rem, 4.4vw, 2.8rem)/1.1 var(--display); margin: 4px 0 20px; word-break: break-word; }
.rodape .email span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; text-decoration-color: rgba(31,95,175,.4); }
.rodape .email .icone { flex: none; }
.links-rodape { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 28px; font-size: 1rem; }
.links-rodape .lk { gap: 12px; }
.links-rodape .icone { color: var(--tinta); }
.creditos { margin-top: 28px; padding-top: 18px; border-top: 1px solid #D2D9D1; color: var(--terc); font-size: .85rem; }
.creditos p { margin: 0 0 4px; }

/* transições entre páginas */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------------- celular ---------------- */
@media (max-width: 900px) {
  :root { --barra-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .nav, .bt-contato { display: none; }
  .menu-faixa > .idiomas { margin-left: auto; }
  .barra-nav { display: block; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: var(--barra-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(247,249,246,.98); border-top: 1px solid rgba(29,39,51,.14); box-shadow: 0 -6px 18px -12px rgba(29,39,51,.45); }
  .barra-nav ul { list-style: none; margin: 0; padding: 0 2px; height: 60px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .barra-nav a.no-ar { color: #1E6B3E; }
  .barra-nav a.no-ar .ponto-no-ar { position: absolute; top: 8px; left: calc(50% + 9px); width: 7px; height: 7px; }
  .barra-nav a { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--sec); text-decoration: none; font: 600 .72rem/1 var(--corpo); font-stretch: 78%; white-space: nowrap; }
  .barra-nav a .ic-lucide, .barra-nav a .icone { width: 22px; height: 22px; }
  .barra-nav a[aria-current="page"] { color: var(--tinta); }
  .barra-nav a[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--tinta); }
  .barra-nav a[aria-current="page"] .ic-lucide { color: var(--trabalho); }
  body { padding-bottom: var(--barra-h); }
  .pagina-inicio .palco { height: calc(100svh - var(--barra-h)); }
  .caso { grid-template-columns: 1fr; gap: 40px; }
  .sobre-topo { grid-template-columns: 1fr; gap: 28px; }
  .retrato { max-width: 260px; }
  .duas { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .passo { align-items: flex-end; padding: 0 12px calc(var(--barra-h) + 3svh); }
  .caixa, .inicio .caixa { width: 100%; padding: 16px 16px 14px; }
  .caixa h2 { font-size: 1.4rem; }
  .inicio h1 { font-size: 2.35rem; }
  .inicio .papel { font-size: 1.05rem; margin: 8px 0 10px; }
  .portas { gap: 6px; margin-bottom: 12px; }
  .porta { grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; padding: 7px 9px; border-radius: 8px; }
  .porta .ic-porta { grid-row: auto; width: 30px; height: 30px; }
  .porta b { font-size: .95rem; }
  .porta small { display: none; }
  .portas-cap { gap: 5px; margin-top: 10px; padding-top: 9px; }
  .porta-cap { gap: 5px; padding: 4px 8px 4px 6px; font-size: .8rem; }
  .links-abertura { gap: 2px 4px; }
  .links-abertura .lk-txt { display: none; }
  .links-abertura .lk { padding: 9px; margin: -4px 0; }
  .links-abertura .icone { width: 22px; height: 22px; }
  .legenda { display: none; bottom: auto; top: calc(var(--menu-h) + 54px); right: 12px; left: 12px; width: auto; opacity: 1 !important; z-index: 7; padding: 12px 14px; font-size: .8rem; flex-direction: column; }
  .legenda ul { flex-direction: column; gap: 7px; }
  .legenda.aberta { display: flex; }
  .bt-legenda { display: block; position: absolute; top: calc(var(--menu-h) + 10px); right: 12px; z-index: 7; font: 600 .85rem var(--corpo); color: var(--tinta); background: rgba(255,255,255,.95); border: 1px solid #C9D2CB; border-radius: 999px; padding: 7px 14px; }
  .regua { left: 12px; right: 12px; bottom: auto; top: calc(56svh - 6px); height: 66px; }
  .escala { left: 14px; top: calc(var(--menu-h) + 14px); }
  .secao { padding-top: 72px; }
  .faixa-blocos { grid-template-columns: 1fr; gap: 6px; }
  .rota { grid-template-columns: 1fr; }
  .estacao { padding: 0 0 26px 56px; min-height: 64px; }
  .estacao::before { top: 0; bottom: 0; left: 15px; right: auto; width: 6px; height: auto; }
  .estacao:first-child::before { top: 18px; left: 15px; }
  .estacao:last-child::before { bottom: auto; height: 18px; right: auto; }
  .estacao:not(:last-child)::after { top: auto; bottom: 6px; right: auto; left: 12px; transform: rotate(135deg); }
  .estacao h3 { padding-top: 6px; }
  .nav-casos { flex-direction: column; }
  .nav-casos a { max-width: none; }
  .nav-casos .prox { text-align: left; margin-left: 0; }
  .mapa-estatico { height: 520px; }
  .mapa-estatico .rot-cidade { font-size: 12px; }
  .mapa-estatico .rot-org { font-size: 10.5px; }
  .mini-mapa { aspect-ratio: 1 / .62; }
  .marca { font-size: 1rem; }
}
@media (max-width: 760px) and (max-height: 700px) { .regua { display: none; } }
/* pesquisa no celular: uma coluna; a legenda fica embaixo do esquema e a ficha escolhida sobe de baixo como folha */
@media (max-width: 900px) {
  .pesq-palco { grid-template-columns: 1fr; padding-top: 14px; }
  .pesq-lista { padding-top: 30px; }
  .pesq-topo { padding-top: 40px; }
  .painel-pesq { position: static; max-height: none; }
  .painel-pesq.aberto { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 45; max-height: 70vh; border-radius: 14px 14px 0 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px -12px rgba(29,39,51,.5); }
  .pesq-controles .contagem { margin-left: 0; width: 100%; }
  .caixas-num { width: 100%; }
  .caixas-num li { min-width: 0; flex: 1 1 40%; }
}

/* ---------------- Sobre compacto e interativo ---------------- */
.pagina-sobre .sobre-topo { grid-template-columns: minmax(170px,210px) 1fr; gap: 34px; align-items: center; padding-top: 32px; padding-bottom: 24px; }
.pagina-sobre .retrato img { border-width: 4px; }
.pagina-sobre .bio h1 { font-size: clamp(2.3rem,4.4vw,3.5rem); }
.pagina-sobre .bio .papel { margin: 7px 0 10px; }
.pagina-sobre .bio > p { margin: 7px 0; }
.mais-bio { margin: 5px 0 10px; }
.mais-bio summary { width: max-content; padding: 6px 0; cursor: pointer; color: var(--trabalho); font-weight: 650; font-size: .9rem; }
.mais-bio summary:focus-visible, .aba:focus-visible { outline: 2px solid var(--trabalho); outline-offset: 3px; }
.mais-bio p { margin: 8px 0 0; max-width: 70ch; }
.pagina-sobre .trajetoria { padding-top: 28px; padding-bottom: 18px; }
.pagina-sobre .trajetoria .intro { margin: 6px 0 10px; font-size: .92rem; }
.traj-grade { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.8fr); gap: 20px; align-items: start; }
.pagina-sobre .gantt { margin: 0; }
.g-linha { cursor: pointer; outline: none; }
.g-faixa { fill: transparent; }
.g-linha:hover .g-faixa, .g-linha:focus-visible .g-faixa, .g-linha.escolhida .g-faixa { fill: #E4EAE2; }
.g-linha.escolhida .g-org { fill: var(--trabalho); }
.traj-lado { min-width: 0; display: grid; gap: 10px; }
.mapinha-vinc { margin: 0; border: 1px solid #C9D2CB; border-radius: 4px; overflow: hidden; background: var(--oceano); }
.mini-vinculos { display: block; width: 100%; height: 140px; }
.mini-vinculos .fio-vinc { transition: opacity .2s; }
.mini-vinculos.com-escolha .fio-vinc { opacity: .18; }
.mini-vinculos.com-escolha .fio-vinc.escolhido { opacity: 1; }
.ficha-vinculo { padding: 12px 14px; border: 1px solid #C3CCC5; border-radius: 4px; background: #FDFDFA; box-shadow: inset 0 0 0 3px #FDFDFA, inset 0 0 0 4px rgba(29,39,51,.1); }
.ficha-vinculo[hidden] { display: none; }
.ficha-vinculo .cabeca-cartao { margin: 0 0 7px; padding-bottom: 6px; }
.ficha-vinculo h3 { margin: 4px 0; font-size: 1.08rem; }
.cargo-ficha { display: block; margin-top: 3px; font: 600 .8rem var(--corpo); color: var(--sec); }
.ficha-vinculo .regua-p { margin: 4px 0 6px; }
.ficha-vinculo .meta-painel, .contexto-ficha { margin: 5px 0; color: var(--sec); font-size: .78rem; line-height: 1.35; }
.itens-ficha { margin: 7px 0 0; padding-left: 17px; font-size: .78rem; line-height: 1.35; }
.itens-ficha li { margin: 4px 0; }
.sobre-abas { padding-top: 20px; padding-bottom: 0; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid #BAC7C1; }
.aba { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 0; border-bottom: 3px solid transparent; padding: 8px 15px; background: transparent; color: var(--sec); font: 650 .92rem var(--corpo); cursor: pointer; }
.ic-aba { display: inline-flex; flex: none; }
.aba:hover { color: var(--trabalho); }
.aba[aria-selected="true"] { color: var(--trabalho); border-bottom-color: var(--trabalho); }
.painel-aba { padding-top: 12px; }
.grade-sobre { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 24px; }
.grade-sobre li { min-width: 0; display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #DDE2DA; }
.grade-sobre h3 { margin: 0; font-size: .98rem; }
.grade-sobre p { margin: 3px 0 0; font-size: .82rem; line-height: 1.35; color: var(--sec); }
.picto-inline { display: inline-flex; margin-right: 6px; color: var(--trabalho); vertical-align: -2px; }
.ic-sobre { width: 78px; min-height: 38px; display: flex; align-items: center; justify-content: center; color: var(--trabalho); }
.ic-sobre .logo { width: auto; max-width: 78px; height: 32px; object-fit: contain; }
.ic-sobre > svg { width: 28px; height: 28px; }
.grupos-stack { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px 24px; }
.grupo-stack h3 { margin: 0 0 5px; font-size: .95rem; }
.grupo-stack ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.grupo-stack li { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; background: transparent; font-size: .75rem; }
.grupo-stack li svg, .grupo-stack li img { width: 18px; height: 18px; flex: none; }
.pagina-sobre .rodape { margin-top: 28px; }
.pagina-sobre .rodape-dentro { padding-top: 28px; padding-bottom: 24px; }
.pagina-sobre .rodape h2 { font-size: 2.2rem; }
.pagina-sobre .rodape .email { font-size: clamp(1.4rem,4vw,2.4rem); margin-bottom: 16px; }
.pagina-sobre .links-rodape { font-size: .9rem; gap: 9px 24px; }
.pagina-sobre .creditos { margin-top: 20px; padding-top: 13px; font-size: .78rem; }
.dq { font-weight: 700; color: var(--tinta); }
.dq-ico { display: inline-block; width: auto; height: 1em; max-width: 1.4em; margin-right: .18em; vertical-align: -.12em; object-fit: contain; }

@media (max-width: 900px) {
  .pagina-sobre .sobre-topo { grid-template-columns: 130px 1fr; gap: 20px; padding-top: 30px; }
  .traj-grade { grid-template-columns: 1fr; gap: 14px; }
  .traj-lado { grid-template-columns: minmax(180px,.7fr) 1fr; align-items: start; }
  .mini-vinculos { height: 100%; min-height: 190px; }
}
@media (max-width: 600px) {
  .pagina-sobre .sobre-topo { grid-template-columns: 96px 1fr; gap: 16px; align-items: start; padding-top: 24px; padding-bottom: 18px; }
  .pagina-sobre .retrato figcaption { font-size: .68rem; }
  .pagina-sobre .bio h1 { font-size: 2rem; }
  .pagina-sobre .bio .papel { font-size: .95rem; margin: 6px 0 8px; }
  .pagina-sobre .bio > p { font-size: .85rem; line-height: 1.4; }
  .mais-bio { margin: 3px 0 7px; }
  .mais-bio summary { font-size: .82rem; }
  .links-sobre .lk-txt { display: none; }
  .links-sobre { gap: 5px 12px; }
  .pagina-sobre .trajetoria { padding-top: 26px; }
  .pagina-sobre .trajetoria .intro { font-size: .82rem; line-height: 1.4; }
  .traj-lado { grid-template-columns: 1fr; }
  .ficha-vinculo { order: 1; }
  .mapinha-vinc { order: 2; }
  .mini-vinculos { height: 110px; min-height: 0; }
  .grade-sobre { grid-template-columns: 1fr; gap: 2px; }
  .grade-sobre li { grid-template-columns: 62px 1fr; padding: 7px 0; }
  .ic-sobre { width: 62px; min-height: 32px; }
  .ic-sobre .logo { max-width: 62px; height: 28px; }
  .abas { gap: 0; }
  .aba { flex: 1; gap: 5px; min-height: 42px; padding: 7px 5px; font-size: .75rem; }
  .ic-aba svg { width: 15px; height: 15px; }
  .grupos-stack { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .grupo-stack ul { gap: 2px 8px; }
  .grupo-stack li { font-size: .7rem; }
  .pagina-sobre .rodape { margin-top: 22px; }
  .pagina-sobre .rodape-dentro { padding-top: 24px; padding-bottom: 20px; }
  .pagina-sobre .rodape h2 { font-size: 1.8rem; }
  .pagina-sobre .rodape-dentro > p { margin: 5px 0 10px; font-size: .82rem; }
  .pagina-sobre .rodape .email { gap: 9px; font-size: 1.35rem; margin: 4px 0 15px; }
  .pagina-sobre .links-rodape { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 14px; font-size: .68rem; }
  .pagina-sobre .links-rodape .lk { min-width: 0; align-items: flex-start; gap: 7px; }
  .pagina-sobre .links-rodape li:nth-child(1), .pagina-sobre .links-rodape li:nth-child(4) { grid-column: 1 / -1; }
  .pagina-sobre .links-rodape .lk-txt { overflow-wrap: anywhere; }
  .pagina-sobre .links-rodape .icone { width: 16px; height: 16px; flex: none; }
  .pagina-sobre .creditos { margin-top: 18px; padding-top: 12px; font-size: .68rem; line-height: 1.4; }
}

/* ---------------- rede de colaboradores: camada do mesmo atlas ---------------- */
:root { --colab: #0F6A6E; --colab-escuro: #0A4C50; --colab-claro: #E1EFEC; }
.colab { position: fixed; inset: 0; z-index: 30; background: var(--oceano); overflow: hidden; color: var(--tinta); }
.colab[hidden] { display: none; }
.colab-geo { position: absolute; inset: 0; width: 100%; height: 100%; }
.colab-mapa { position: absolute; inset: 0; cursor: grab; touch-action: none; outline: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.colab-mapa:focus-visible { box-shadow: inset 0 0 0 3px rgba(15,106,110,.55); }
.colab-mapa.arrastando { cursor: grabbing; }
.colab-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* fios */
.colab-fio { fill: none; stroke: var(--colab); stroke-linecap: round; stroke-opacity: .82; transition: stroke-opacity .25s var(--ease); }
.colab-halo { fill: none; stroke: #FFFFFF; stroke-linecap: round; stroke-opacity: .5; transition: stroke-opacity .25s var(--ease); }
.com-foco .colab-fio { stroke-opacity: .12; }
.com-foco .colab-halo { stroke-opacity: .1; }
.com-foco .colab-fio.ativo { stroke-opacity: 1; }
.com-foco .colab-halo.ativo { stroke-opacity: .85; }

/* pessoas: medalha com as iniciais, nome ao lado; tamanho da medalha pelas publicações em comum */
.colab-med { cursor: pointer; outline: none; opacity: 0; transition: opacity .45s var(--ease); }
.colab-med.chegou { opacity: 1; }
.colab-med .anel { fill: #FDFDFA; stroke: var(--colab); stroke-width: 2.2px; filter: drop-shadow(0 1.5px 2px rgba(29,39,51,.28)); transition: fill .2s; }
.colab-med .ini { font-family: var(--display); font-weight: 750; fill: var(--colab-escuro); text-anchor: middle; dominant-baseline: central; pointer-events: none; letter-spacing: .02em; }
.colab-med .foco { fill: none; stroke: none; }
.colab-med:hover .anel, .colab-med.ativo .anel { fill: var(--colab); }
.colab-med:hover .ini, .colab-med.ativo .ini { fill: #FFFFFF; }
.colab-med:focus-visible .foco { stroke: var(--evento); stroke-width: 2.5px; }
.colab-nome { font: 600 12.5px var(--corpo); fill: var(--tinta); paint-order: stroke; stroke: rgba(255,255,255,.93); stroke-width: 3.6px; stroke-linejoin: round; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease); }
.colab-nome.chegou { opacity: 1; }
.com-foco .colab-med:not(.ativo) { opacity: .5; }
.com-foco .colab-nome.chegou:not(.ativo) { opacity: .45; }
.colab-nome.ativo { font-weight: 700; }
.colab-ponto { fill: #FFFFFF; stroke: var(--colab-escuro); stroke-width: 1.6px; }
.colab-cab { cursor: pointer; outline: none; }
.colab-cid-nome { font: 700 13px var(--display); fill: var(--tinta); paint-order: stroke; stroke: rgba(255,255,255,.94); stroke-width: 4px; stroke-linejoin: round; }
.colab-cab:hover .colab-cid-nome, .colab-cab:focus-visible .colab-cid-nome, .colab-cidade.ativa .colab-cid-nome { fill: var(--colab-escuro); text-decoration: underline; text-underline-offset: 3px; }
.colab-logo-mapa { filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 2.6px rgba(255,255,255,.8)); }
.colab-selo { cursor: pointer; outline: none; }
.colab-selo .disco { fill: var(--colab); stroke: #FFFFFF; stroke-width: 2px; filter: drop-shadow(0 2px 3px rgba(29,39,51,.3)); }
.colab-selo .num, .colab-leg .num { font: 750 13px var(--display); fill: #FFFFFF; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.colab-selo .foco { fill: none; stroke: none; }
.colab-selo:hover .disco, .colab-cidade.ativa .colab-selo .disco { fill: var(--colab-escuro); }
.colab-selo:focus-visible .foco { stroke: var(--evento); stroke-width: 2.5px; }
.colab-casa .rot-cidade { font-size: 13px; }

/* encarte da França */
.colab-enc-sombra { fill: #FDFDFA; filter: drop-shadow(0 10px 18px rgba(29,39,51,.32)); }
.colab-enc-relevo { filter: saturate(1.35) contrast(1.12); }
.colab-enc-costa { fill: none; stroke: rgba(52,86,104,.62); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.colab-enc-fronteira { fill: none; stroke: rgba(70,62,52,.6); stroke-width: .9px; stroke-dasharray: 5 2 1.2 2; vector-effect: non-scaling-stroke; }
.colab-enc-moldura { fill: none; stroke: #3F5361; stroke-width: 1px; }
.colab-enc-filete { fill: none; stroke: rgba(253,253,250,.85); stroke-width: 1.5px; }
.colab-enc-km { font: italic 600 11px var(--display); fill: #2B4A5C; paint-order: stroke; stroke: rgba(230,238,242,.85); stroke-width: 3px; }

/* escala, zoom e ajuda */
.colab-escala { position: absolute; left: calc(var(--colab-mapa-x) + 6px); top: calc(var(--menu-h) + 16px); font: 600 11px var(--corpo); pointer-events: none; }
.colab-zoom { position: absolute; right: 22px; bottom: 22px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.colab-zoom button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid #B6C4C6; border-radius: 4px; background: rgba(253,253,250,.95); color: var(--tinta); font: 650 .78rem var(--corpo); box-shadow: 0 6px 16px -10px rgba(29,39,51,.55); }
.colab-zoom button:hover, .colab-zoom button:focus-visible { border-color: var(--colab); color: var(--colab); }
.colab-ajuda { position: absolute; left: calc((100% + var(--colab-mapa-x)) / 2); bottom: 22px; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(29,39,51,.72); color: #FFFFFF; font: 600 .76rem var(--corpo); pointer-events: none; transition: opacity .6s var(--ease); }
.colab-ajuda.lida { opacity: 0; }
.colab-dica { min-width: 170px; }
.colab-dica-topo { display: flex; align-items: center; gap: 8px; }
.colab-dica-topo .logo { height: 20px; width: auto; max-width: 64px; object-fit: contain; }
.colab-dica-topo b { font: 700 .92rem var(--display); }
.colab-dica p { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--sec); font-size: .78rem; }
.colab-dica p svg { color: var(--colab); flex: none; }

/* cartão: o mesmo cartão de atlas dos capítulos, à esquerda */
.colab-cartao { position: absolute; z-index: 3; left: clamp(16px, 4vw, 64px); top: calc(var(--menu-h) + 16px); bottom: 16px; width: min(400px, 31vw); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px 24px 20px; }
.colab-cartao > * { position: relative; }
.colab-topo-cartao { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.colab-sobretitulo { display: inline-flex; align-items: center; gap: 7px; color: var(--colab); font: 700 .72rem var(--corpo); letter-spacing: .14em; text-transform: uppercase; }
.colab-fechar { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #C3CCC5; border-radius: 999px; padding: 6px 11px; background: #FDFDFA; color: var(--tinta); font: 650 .76rem var(--corpo); }
.colab-fechar:hover, .colab-fechar:focus-visible { border-color: var(--colab); color: var(--colab); }
.colab-cartao h2 { margin: 0 0 8px; font: 750 1.6rem/1.12 var(--display); letter-spacing: -.005em; }
.colab-numeros { display: flex; flex-wrap: wrap; gap: 4px 13px; list-style: none; margin: 0 0 10px; padding: 0; }
.colab-numeros li { display: flex; align-items: baseline; gap: 4px; }
.colab-numeros svg { color: var(--colab); align-self: center; }
.colab-numeros b { font: 750 1.2rem/1.1 var(--display); color: var(--colab-escuro); font-variant-numeric: lining-nums; }
.colab-numeros span { color: var(--sec); font-size: .8rem; }
.colab-leg { list-style: none; margin: 0 0 8px; padding: 8px 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.colab-leg li { display: flex; gap: 8px; align-items: center; color: var(--sec); font-size: .74rem; line-height: 1.25; }
.colab-leg li svg { flex: none; }
.colab-grupos { display: grid; gap: 0; }
.colab-grupo { padding: 6px 0 6px; border-bottom: 1px solid #E6E9E2; }
.colab-grupo-cab { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; padding: 2px 0 6px; background: none; color: var(--tinta); text-align: left; }
.colab-grupo-cab .logo { height: 22px; width: auto; max-width: 72px; object-fit: contain; }
.colab-grupo-cab b { font: 700 .9rem var(--display); }
.colab-grupo-cab .conta, .colab-cartao h3 .conta { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--colab-claro); color: var(--colab-escuro); font: 700 .74rem/1.5 var(--corpo); text-align: center; }
.colab-grupo-cab:hover b, .colab-grupo-cab:focus-visible b { color: var(--colab); text-decoration: underline; text-underline-offset: 3px; }
.colab-grupo.um { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; }
.colab-grupo.um .colab-grupo-cab { width: auto; padding: 0; flex: none; }
.colab-grupo.um .colab-chips { display: flex; min-width: 0; }
.colab-cartao:focus { outline: none; }
.colab .rot-estado { display: none; }
.colab-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.colab-chip { display: flex; align-items: center; gap: 7px; min-width: 0; border: 0; border-radius: 4px; padding: 2px 4px; background: none; color: var(--tinta); font: 600 .8rem/1.2 var(--corpo); text-align: left; }
.colab-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colab-chip:hover, .colab-chip:focus-visible, .colab-chip.ativo { background: var(--colab-claro); }
.colab-med-html { flex: none; overflow: visible; }
.colab-med-html circle { fill: #FDFDFA; stroke: var(--colab); stroke-width: 2.4px; }
.colab-med-html text { font-family: var(--display); font-weight: 750; fill: var(--colab-escuro); text-anchor: middle; dominant-baseline: central; }
.colab-chip:hover .colab-med-html circle, .colab-chip.ativo .colab-med-html circle, .colab-lista button:hover .colab-med-html circle { fill: var(--colab); }
.colab-chip:hover .colab-med-html text, .colab-chip.ativo .colab-med-html text, .colab-lista button:hover .colab-med-html text { fill: #FFFFFF; }
.colab-nota { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--sec); font-size: .74rem; }
.colab-nota svg { flex: none; color: var(--colab); }
.colab-voltar { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--colab); font: 650 .8rem var(--corpo); }
.colab-voltar:hover { text-decoration: underline; text-underline-offset: 3px; }
.colab-cartao .cabeca-cartao .logo { height: 36px; width: auto; max-width: 150px; object-fit: contain; }
.colab-cartao .quando { margin: 0 0 6px; color: var(--sec); }
.colab-cartao .quando b { color: var(--tinta); }
.colab-cartao .longe { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; color: var(--sec); font-size: .86rem; }
.colab-pessoa { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.colab-pessoa h2 { margin: 0; }
.colab-onde { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--sec); font-size: .88rem; }
.colab-onde svg { color: var(--colab); flex: none; }
.colab-cartao h3 { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font: 700 .95rem var(--display); }
.colab-perfis { display: flex; flex-wrap: wrap; gap: 6px; }
.colab-perfil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #CDD6D0; border-radius: 4px; color: var(--tinta); text-decoration: none; font: 600 .76rem var(--corpo); }
.colab-perfil svg { color: var(--colab-escuro); }
.colab-perfil:hover, .colab-perfil:focus-visible { border-color: var(--colab); background: var(--colab-claro); }
.colab-artigos { list-style: none; margin: 0; padding: 0; }
.colab-artigos li { border-bottom: 1px solid #E6E9E2; }
.colab-artigos a, .colab-artigos li > div { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; color: var(--tinta); text-decoration: none; }
.colab-artigos a > svg:last-child { color: var(--sec); }
.colab-artigos a:hover b { color: var(--colab); text-decoration: underline; text-underline-offset: 2px; }
.colab-artigos b { display: block; font: 650 .82rem/1.25 var(--corpo); }
.colab-artigos small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--sec); font-size: .7rem; }
.colab-artigos small .logo { height: 15px; width: auto; max-width: 52px; object-fit: contain; }
.colab-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.colab-lista li { border-bottom: 1px solid #E6E9E2; }
.colab-lista button { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px 2px; border: 0; background: none; color: var(--tinta); text-align: left; }
.colab-lista button:hover b, .colab-lista button.ativo b { color: var(--colab); }
.colab-lista b { display: block; font: 650 .86rem/1.25 var(--corpo); }
.colab-lista small { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--sec); font-size: .74rem; }

@media (max-width: 760px) {
  .colab-cartao { left: 0; right: 0; top: 60%; bottom: 0; width: auto; border-radius: 14px 14px 0 0; padding: 14px 16px calc(22px + var(--barra-h, 0px)); box-shadow: inset 0 0 0 4px #FDFDFA, inset 0 0 0 5px rgba(29,39,51,.13), 0 -10px 26px -14px rgba(29,39,51,.5); }
  .colab-cartao h2 { font-size: 1.35rem; }
  .colab-zoom { left: 8px; right: auto; bottom: auto; top: calc(var(--menu-h) + 34px); align-items: flex-start; gap: 5px; }
  .colab-zoom button { min-width: 38px; width: 38px; height: 38px; padding: 0; }
  .colab-zoom .tudo span { display: none; }
  .colab-ajuda { bottom: auto; top: calc(var(--colab-base) - 30px); left: 50%; transform: translateX(-50%); font-size: .7rem; padding: 4px 10px; white-space: nowrap; }
  .colab-escala { left: 10px; top: calc(var(--menu-h) + 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .colab-med, .colab-nome, .colab-fio, .colab-halo, .colab-ajuda { transition: none; }
}
/* telas grandes: cartão, escala, zoom, aviso e dica crescem com a tela (fator E calculado no JS) */
.colab-cartao, .colab-zoom, .colab-ajuda, .colab-escala, .colab-dica { zoom: var(--colab-e, 1); }

@media (prefers-reduced-motion: reduce) {
  .lugar, .fio, rect.apagado { transition: none; }
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------------- Projetos e estudos de caso, pranchas compactas do atlas ---------------- */
.pagina-projetos .projetos-cab { padding-top: 36px; padding-bottom: 10px; }
.pagina-projetos .projetos-cab h1 { font-size: clamp(2.5rem, 4.5vw, 3.5rem); }
.pagina-projetos .projetos-cab .intro { margin: 8px 0 16px; }
.temas-projetos { list-style: none; display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 0; padding: 0; }
.temas-projetos li { display: inline-flex; align-items: center; gap: 6px; color: var(--sec); font-size: .82rem; }
.tema-projeto { display: inline-flex; align-items: center; gap: 7px; width: 100%; padding: 7px 10px; color: var(--tinta); background: rgba(255,255,255,.65); border: 1px solid #CBD4CD; border-radius: 5px; font: 500 .82rem/1.25 var(--corpo); text-align: left; cursor: pointer; }
.tema-projeto svg { color: var(--cor); flex: none; }
.tema-projeto b { margin-left: auto; font: 700 .9rem var(--display); color: var(--cor); }
.tema-projeto[aria-pressed="true"] { border-color: var(--cor); box-shadow: inset 0 -3px 0 var(--cor); background: #FFFFFF; }
.tema-projeto:hover { border-color: var(--cor); }
.temas-projetos li svg { color: var(--cor); flex: none; }
.pagina-projetos .territorios-projetos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; padding-top: 12px; }
.grupo-projetos { min-width: 0; padding: 14px; background-color: #FDFDFA; background-image: url(relevo/papel.png); background-blend-mode: multiply; border: 1px solid #C9D2CB; border-top: 4px solid var(--cor); border-radius: 5px; }
.grupo-projetos-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-bottom: 12px; }
.picto-grupo { width: 46px; height: 46px; display: grid; place-items: center; color: var(--cor); border: 1px solid color-mix(in srgb, var(--cor) 45%, #C9D2CB); border-radius: 50%; background: rgba(255,255,255,.72); }
.grupo-projetos-topo h2 { font-size: 1.2rem; line-height: 1.15; margin-top: 1px; }
.grupo-projetos-topo p { margin: 4px 0 0; color: var(--sec); font-size: .82rem; line-height: 1.35; }
.conta-projetos { display: inline-flex; align-items: center; gap: 5px; color: var(--cor); font: 700 1rem var(--display); padding-top: 4px; }
.pagina-projetos .lista-projetos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pagina-projetos .projeto-item { min-width: 0; display: grid; grid-template-columns: 146px minmax(0, 1fr); gap: 14px; padding: 12px; background: rgba(255,255,255,.94); border: 1px solid #CED7D0; border-radius: 4px; color: var(--tinta); text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pagina-projetos .projeto-item:hover { border-color: var(--cor); box-shadow: inset 0 0 0 1px var(--cor); }
.projeto-visual { position: relative; min-width: 0; align-self: stretch; }
.pagina-projetos .projeto-item figure { height: 100%; min-height: 152px; margin: 0; border-radius: 3px; }
.pagina-projetos .projeto-item .mini-mapa { height: 100%; min-height: 152px; aspect-ratio: auto; }
.picto-card-projeto { position: absolute; z-index: 2; top: 7px; left: 7px; width: 56px; height: 56px; display: grid; place-items: center; color: var(--cor); background: rgba(255,255,255,.9); border: 1px solid color-mix(in srgb, var(--cor) 52%, #FFFFFF); border-radius: 50%; }
.projeto-visual > .logo-proj { position: absolute; z-index: 2; right: 7px; bottom: 7px; width: auto; height: 30px; max-width: 94px; max-height: 30px; object-fit: contain; filter: drop-shadow(0 0 2px #FFFFFF); }
.pagina-projetos .projeto-txt { min-width: 0; display: flex; flex-direction: column; }
.pagina-projetos .projeto-txt h2 { display: block; font-size: 1.12rem; line-height: 1.16; }
.pagina-projetos .projeto-item .pergunta { margin: 6px 0 8px; color: var(--sec); font-size: .92rem; line-height: 1.38; }
.pagina-projetos .metricas-projeto { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: auto 0 9px; }
.metricas-projeto li { min-width: 0; flex: 1 1 82px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: start; max-width: none; }
.metricas-projeto .ic-metrica { color: var(--cor); line-height: 0; padding-top: 2px; }
.metricas-projeto .ic-metrica img { width: auto; height: 18px; max-width: 22px; object-fit: contain; }
.metricas-projeto .metrica-texto { min-width: 0; }
.metricas-projeto b { display: block; font-size: 1rem; line-height: 1.1; white-space: nowrap; }
.metricas-projeto small { display: block; margin-top: 2px; color: var(--sec); font-size: .7rem; line-height: 1.2; }
/* índice de Projetos no desktop: o tema à esquerda, como legenda de atlas, e os projetos dele em duas colunas */
.tema-projeto.todos svg { color: var(--tinta); }
.tema-projeto.todos b { color: var(--tinta); }
@media (min-width: 1000px) {
  .grupo-projetos { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
  .grupo-projetos-topo { grid-template-columns: auto minmax(0, 1fr); margin: 0; position: sticky; top: calc(var(--menu-h) + 14px); }
  .grupo-projetos-topo .conta-projetos { display: none; }
  .pagina-projetos .lista-projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-projetos .lista-projetos > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pagina-projetos .projeto-item { height: 100%; grid-template-columns: 118px minmax(0, 1fr); }
}
.pagina-projetos .ver { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: .88rem; }
.pagina-projetos .ver svg { flex: none; }
.pagina-projetos .rodape, .pagina-projeto .rodape { margin-top: 30px; }
.pagina-projetos .dq, .pagina-projeto .dq { color: var(--tinta); font-weight: 700; }
.pagina-projetos .dq-ico, .pagina-projeto .dq-ico { display: inline-block; vertical-align: -.13em; margin-right: .2em; line-height: 0; }
.pagina-projetos img.dq-ico, .pagina-projeto img.dq-ico { width: auto; height: 1em; max-width: 1.5em; object-fit: contain; }
.pagina-projetos span.dq-ico svg, .pagina-projeto span.dq-ico svg { width: 1em; height: 1em; }

.pagina-projeto .caso-abertura { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: 36px; align-items: center; padding-top: 32px; }
.caso-identidade { min-width: 0; }
.pagina-projeto .caso-abertura .migalha { margin-bottom: 14px; }
.titulo-caso-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.picto-caso { width: 66px; height: 66px; flex: none; display: grid; place-items: center; color: var(--cor); border: 2px solid var(--cor); border-radius: 50%; background: #FDFDFA; }
.pagina-projeto .titulo-caso-linha h1 { min-width: 0; flex: 1 1 240px; display: block; font-size: clamp(2.1rem, 3.8vw, 3.25rem); line-height: 1.04; }
.titulo-caso-linha > .logo-proj { flex: none; width: auto; height: 48px; max-width: 180px; max-height: 48px; object-fit: contain; }
.pagina-projeto .papel-caso { margin: 10px 0 0; font-size: .92rem; }
.pagina-projeto .pergunta-grande { margin-top: 20px; }
.pagina-projeto .pergunta-grande p { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; }
.pagina-projeto .caso-abertura .figura-mapa { min-width: 0; width: 100%; margin: 0; padding: 0; }
.pagina-projeto .caso-abertura .mapa-estatico { height: 240px; }
.pagina-projeto .caso-abertura .figura-mapa figcaption { margin-top: 7px; font-size: .84rem; }
.pagina-projeto .caso { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 28px; padding-top: 24px; }
.pagina-projeto .bloco-caso { min-width: 0; grid-column: span 6; padding-top: 14px; border-top: 1px solid var(--fio); }
.pagina-projeto .bloco-caso.largo { grid-column: 1 / -1; }
.pagina-projeto .bloco-caso h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 1.25rem; }
.icone-secao-caso { display: inline-grid; place-items: center; flex: none; color: var(--sec); line-height: 0; }
.icone-secao-caso img { width: auto; height: 22px; max-width: 26px; object-fit: contain; }
.pagina-projeto .bloco-caso > p { max-width: 68ch; font-size: .98rem; }
.pagina-projeto .caso-como .diagrama { padding-top: 2px; }
.pagina-projeto .estacao p { font-size: .9rem; }
.resultado-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: start; }
.pagina-projeto .resultado-txt { margin: 0; max-width: 66ch; font-size: 1rem; }
.caso-resultado .estat { gap: 10px 24px; }
.caso-resultado .estat li { position: relative; max-width: none; padding-left: 26px; }
.caso-resultado .estat .ic-metrica { position: absolute; left: 0; top: 2px; color: var(--sec); line-height: 0; }
.caso-resultado .metricas-projeto { display: flex; margin: 0; }
.caso-resultado .metricas-projeto li { display: grid; padding-left: 0; }
.caso-resultado .metricas-projeto .ic-metrica { position: static; }
.caso-resultado .metricas-projeto small { font-size: .8rem; }
.caso-resultado .quadrados { margin-top: 4px; gap: 22px; }
.caso-resultado .blocos-tempo { margin-top: 0; }
.caso-resultado .nota-figura { font-size: .85rem; }
.pagina-projeto .caso-stack { grid-column: span 4; }
.pagina-projeto .caso-artigos { grid-column: span 4; }
.pagina-projeto .caso-links { grid-column: span 4; }
.pagina-projeto .dobravel-caso { padding-top: 0; }
.sumario-caso { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.sumario-caso::-webkit-details-marker { display: none; }
.sumario-caso h2 { margin: 0 !important; }
.abre-caso { flex: none; display: grid; place-items: center; color: var(--sec); transition: transform .2s var(--ease); }
.caso-stack[open], .caso-artigos[open], .caso-links[open] { grid-column: 1 / -1; }
.dobravel-caso[open] .abre-caso { transform: rotate(180deg); }
.dobravel-caso > :not(summary) { margin-top: 12px; }
.pagina-projeto .stack-lista { gap: 6px; }
.pagina-projeto .stack-lista li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-size: .85rem; }
.pagina-projeto .stack-lista svg { flex: none; }
.pagina-projeto .stack-lista img { width: auto; height: 19px; max-width: 24px; object-fit: contain; }
.pagina-projeto .lista-pub.curta { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; }
.pagina-projeto .lista-pub.curta > li:not(.sep-evento) { min-width: 0; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid #E0E5DE; }
.pagina-projeto .lista-pub.curta > li:first-child { padding-top: 9px; }
.pub-caso-corpo { min-width: 0; }
.pagina-projeto .lista-pub .titulo { font-size: .94rem; line-height: 1.3; }
.pagina-projeto .lista-pub .meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: .8rem; line-height: 1.3; }
.pagina-projeto .lista-pub .meta .logo { flex: none; width: auto; height: 22px; max-width: 72px; object-fit: contain; }
.detalhe-pub { margin-top: 4px; }
.detalhe-pub summary { width: max-content; display: flex; align-items: center; gap: 4px; color: var(--trabalho); cursor: pointer; font-size: .8rem; font-weight: 600; }
.detalhe-pub[open] summary svg { transform: rotate(45deg); }
.pagina-projeto .lista-pub .detalhe-pub .resumo { margin: 6px 0 2px; font-size: .9rem; }
.pagina-projeto .lista-pub .lnk { margin-top: 4px; }
.pagina-projeto .caso-links .lnk { gap: 9px 14px; }
.pagina-projeto .caso-links .lk-ic { font-size: .9rem; }
.pagina-projeto .nav-casos { padding-top: 32px; padding-bottom: 8px; }
.pagina-projeto .nav-casos .dir { display: flex; align-items: center; gap: 6px; }
.pagina-projeto .nav-casos b { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.pagina-projeto .nav-casos .prox b { justify-content: flex-end; }
.pagina-projeto .nav-casos b svg { flex: none; }

@media (max-width: 1100px) {
  .pagina-projetos .projeto-item { grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
  .picto-card-projeto { width: 48px; height: 48px; }
  .picto-card-projeto svg { width: 44px; height: 44px; }
  .pagina-projeto .caso-abertura { grid-template-columns: minmax(0, .85fr) minmax(390px, 1.15fr); gap: 24px; }
}
@media (max-width: 900px) {
  .pagina-projetos .territorios-projetos { grid-template-columns: minmax(0, 1fr); }
  .pagina-projetos .projeto-item { grid-template-columns: 170px minmax(0, 1fr); }
  .pagina-projeto .caso-abertura { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pagina-projeto .caso-abertura .mapa-estatico { height: 340px; }
  .pagina-projeto .caso-stack, .pagina-projeto .caso-artigos, .pagina-projeto .caso-links { grid-column: 1 / -1; }
  .resultado-grade { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
  .pagina-projetos .projetos-cab { padding-top: 28px; }
  .pagina-projetos .projetos-cab h1 { font-size: 2.5rem; }
  .pagina-projetos .projetos-cab .intro { font-size: .94rem; }
  .temas-projetos { flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .temas-projetos li { flex: none; }
  .tema-projeto { min-height: 40px; padding: 6px 10px; white-space: nowrap; }
  .pagina-projetos .territorios-projetos { gap: 14px; padding-left: 12px; padding-right: 12px; }
  .grupo-projetos { padding: 10px; }
  .grupo-projetos-topo { gap: 8px; }
  .picto-grupo { width: 40px; height: 40px; }
  .picto-grupo svg { width: 29px; height: 29px; }
  .grupo-projetos-topo h2 { font-size: 1.06rem; }
  .grupo-projetos-topo p { font-size: .78rem; }
  .pagina-projetos .projeto-item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
  .pagina-projetos .projeto-visual { height: 104px; }
  .pagina-projetos .projeto-item figure, .pagina-projetos .projeto-item .mini-mapa { height: 104px; min-height: 0; }
  .picto-card-projeto { top: 5px; left: 5px; width: 42px; height: 42px; }
  .picto-card-projeto svg { width: 36px; height: 36px; }
  .projeto-visual > .logo-proj { right: 5px; bottom: 5px; height: 24px; max-width: 70px; }
  .pagina-projetos .projeto-txt h2 { font-size: 1.04rem; }
  .pagina-projetos .projeto-item .pergunta { font-size: .9rem; }
  .pagina-projetos .metricas-projeto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pagina-projetos .metricas-projeto li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px; align-items: start; }
  .pagina-projetos .metricas-projeto .metrica-texto { display: block; }
  .pagina-projetos .metricas-projeto b { grid-column: auto; font-size: .92rem; }
  .pagina-projetos .metricas-projeto small { grid-column: auto; margin-top: 2px; font-size: .68rem; }
  .pagina-projetos .ver { font-size: .84rem; }
  .pagina-projeto .caso-abertura { padding-top: 22px; gap: 18px; }
  .titulo-caso-linha { gap: 10px; }
  .picto-caso { width: 50px; height: 50px; }
  .picto-caso svg { width: 43px; height: 43px; }
  .pagina-projeto .titulo-caso-linha h1 { flex-basis: 210px; font-size: 2.15rem; }
  .titulo-caso-linha > .logo-proj { height: 36px; max-width: 130px; }
  .pagina-projeto .pergunta-grande { margin-top: 16px; }
  .pagina-projeto .pergunta-grande p { font-size: 1.2rem; }
  .pagina-projeto .caso-abertura .mapa-estatico { height: 150px; }
  .pagina-projeto .caso { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 18px; }
  .pagina-projeto .bloco-caso, .pagina-projeto .bloco-caso.largo, .pagina-projeto .caso-stack, .pagina-projeto .caso-artigos, .pagina-projeto .caso-links { grid-column: 1; }
  .pagina-projeto .bloco-caso > p { font-size: .95rem; }
  .caso-como .diagrama { overflow-x: auto; padding: 6px 2px 8px; }
  .caso-como .rota { width: max-content; grid-template-columns: repeat(var(--n), 150px); }
  .caso-como .estacao { min-height: 0; padding: 46px 18px 0 0; }
  .caso-como .estacao::before { top: 15px; bottom: auto; left: 0; right: 0; width: auto; height: 6px; }
  .caso-como .estacao:first-child::before { top: 15px; left: 16px; }
  .caso-como .estacao:last-child::before { top: 15px; right: calc(100% - 16px); bottom: auto; height: 6px; }
  .caso-como .estacao:not(:last-child)::after { top: 9px; right: 6px; bottom: auto; left: auto; transform: rotate(45deg); }
  .caso-como .estacao h3 { padding-top: 0; }
  .caso-resultado .quadrados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
  .caso-resultado .quad { min-width: 0; }
  .caso-resultado .quad .area { max-width: 100%; }
  .pagina-projeto .nav-casos { flex-direction: row; gap: 12px; padding-top: 24px; }
  .pagina-projeto .nav-casos a { max-width: 50%; }
  .pagina-projeto .nav-casos .prox { text-align: right; margin-left: auto; }
  .pagina-projeto .nav-casos b { font-size: 1rem; }
  .pagina-projeto .nav-casos .prox b { justify-content: flex-end; }
  .pagina-projetos .rodape-dentro, .pagina-projeto .rodape-dentro { padding: 24px 16px; }
  .pagina-projetos .links-rodape, .pagina-projeto .links-rodape { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .pagina-projetos .links-rodape .lk, .pagina-projeto .links-rodape .lk { min-width: 0; overflow-wrap: anywhere; }
  .pagina-projetos .creditos, .pagina-projeto .creditos { margin-top: 18px; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pagina-projetos .projeto-item { transition: none; }
  .detalhe-pub summary svg { transform: none !important; }
}