/* Portal da Transparência v4 · Câmara Municipal de Pinhão
   Tema sobre o motor scrollcraft (que não é editado). Modo worldflight: um
   palco fixo com as colagens e as viagens entre elas, que depois da abertura
   vira uma janela emoldurada viajando sobre uma mesa azul-marinho; por cima,
   os cartões de cada capítulo. Direção "Noite": serifa editorial (Newsreader)
   para títulos, grotesca atual (Inter Tight) para texto e uma mono técnica
   (JetBrains Mono) só para números e rótulos curtos. */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations"), url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-opsz-italic.woff2) format("woff2-variations"), url(fonts/newsreader-latin-opsz-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-tight-latin-wght-normal.woff2) format("woff2-variations"), url(fonts/inter-tight-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/jetbrains-mono-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }

:root {
  --papel: #FBF8F1; --papel-2: #F3EEE3;
  --tinta: #0C2550; --suave: #4A5E7E; --acento: #1F4FBF; --acento-2: #2E6BE6;
  --noite: #0B1E3F; --noite-luz: #16325F; --noite-fundo: #071530; --creme: #FBF8F1; --azul-claro: #9DB8E8;
  --brilho: rgb(46 107 230 / .55);
  --sc-canvas: var(--noite); --sc-surface: var(--papel);
  --sc-ink: var(--tinta); --sc-ink-soft: var(--suave);
  --sc-accent: var(--acento); --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sc-font-text: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sc-gutter: clamp(1rem, 4vw, 4rem);
  --barra-h: 64px;
  --trilho-w: 0px;
}
@media (min-width: 1100px) { :root { --trilho-w: 76px; } }

html { scroll-behavior: auto; }
body { margin: 0; background: var(--sc-canvas); color: var(--tinta); font-family: var(--sc-font-text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
.pular { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--tinta); color: #fff; padding: .6rem 1rem; border-radius: 4px; }
.pular:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 3px; }

/* ------------------------------------------------------------- barra --
   Vidro escuro sobre a mesa, com uma linha de progresso que enche com a
   viagem (a mesma --fita do trilho, copiada pelo portal.js §5). */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--barra-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--sc-gutter);
  background: rgb(9 26 56 / .86); color: #fff;
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 -1px 0 rgb(157 184 232 / .14), 0 8px 24px -16px rgb(0 0 0 / .6);
}
.barra::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
  transform-origin: 0 50%; transform: scaleX(var(--fita, 0));
  background: linear-gradient(90deg, var(--acento), var(--acento-2) 60%, var(--azul-claro));
  box-shadow: 0 0 10px rgb(46 107 230 / .8);
}
.barra__marca { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; font-weight: 600; font-size: .98rem; line-height: 1.15; letter-spacing: -.005em; }
.barra__marca small { display: block; font: 500 .8125rem/1.3 var(--sc-font-text); letter-spacing: 0; color: var(--azul-claro); }
.barra__acoes { display: flex; gap: .5rem; }
.barra__btn {
  appearance: none; border: 1px solid rgb(157 184 232 / .28); background: rgb(255 255 255 / .04); color: #fff;
  font: 600 .88rem/1 var(--sc-font-text); padding: .72rem 1.05rem; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .55rem;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.barra__btn kbd { font: 500 .75rem/1 var(--sc-font-mono); padding: .25rem .4rem; border-radius: 5px; background: rgb(157 184 232 / .14); color: rgb(251 248 241 / .75); letter-spacing: .04em; }
.barra__btn--forte { background: linear-gradient(180deg, #FFFFFF, #E9EFFC); color: var(--tinta); border-color: transparent; box-shadow: 0 0 0 1px rgb(255 255 255 / .6), 0 6px 18px -6px rgb(46 107 230 / .7); }
@media (hover: hover) and (pointer: fine) {
  .barra__btn:hover { background: rgb(255 255 255 / .1); border-color: rgb(157 184 232 / .5); }
  .barra__btn--forte:hover { background: linear-gradient(180deg, #FFFFFF, #DCE6FB); box-shadow: 0 0 0 1px #fff, 0 8px 24px -6px rgb(46 107 230 / .9); }
}
@media (max-width: 640px) { .barra__marca span { display: none; } .barra__btn { padding: .65rem .8rem; font-size: .85rem; } .barra__btn kbd { display: none; } }
.barra__acoes { align-items: center; }

/* A busca da barra: como no site atual da Câmara, um formulário que abre a
   página de busca do portal; a lupa à direita envia. No celular o campo
   vira uma lupa, que abre a busca por cima da barra (comum.js). */
.busca-barra { position: relative; margin: 0; }
.busca-barra__rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.busca-barra__caixa {
  display: flex; align-items: center; gap: .3rem; box-sizing: border-box; width: clamp(14rem, 23vw, 21rem); height: 42px; padding: 0 .3rem 0 1.05rem;
  border-radius: 999px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(157 184 232 / .28);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.busca-barra__caixa:focus-within { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(157 184 232 / .65), 0 0 0 3px rgb(46 107 230 / .45); }
.lupa { flex: none; width: 18px; height: 18px; }
.busca-barra__campo {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--creme); font: 500 .9rem/1 var(--sc-font-text); -webkit-appearance: none; appearance: none;
}
.busca-barra__campo::placeholder { color: rgb(251 248 241 / .6); }
.busca-barra__campo::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.busca-barra__ir, .busca-barra__fechar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--azul-claro); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.busca-barra__ir:focus-visible, .busca-barra__fechar:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) { .busca-barra__ir:hover { background: rgb(255 255 255 / .12); color: #fff; } }
.busca-barra__fechar { display: none; color: var(--creme); }
.busca-barra__fechar svg { width: 15px; height: 15px; }
.barra__btn--lupa { display: none; width: 42px; height: 42px; padding: 0; justify-content: center; }
.barra__btn--lupa .lupa { width: 19px; height: 19px; color: #fff; }
@media (max-width: 760px) {
  .busca-barra { display: none; }
  .barra__btn--lupa { display: inline-flex; }
  /* aberta: o campo cobre a barra inteira, com o × para fechar */
  .barra.buscando .busca-barra { display: flex; align-items: center; position: absolute; inset: 0; z-index: 2; padding: 0 12px; background: rgb(9 26 56 / .98); }
  .barra.buscando .busca-barra__caixa { width: 100%; }
  .barra.buscando .busca-barra__fechar { display: grid; }
}

/* ------------------------------------------------- trilho de capítulos --
   Uma cápsula de vidro com um ponto por capítulo sobre um fio que acende com
   a viagem; o nome aparece ao passar o mouse. Legível sobre a mesa e sobre
   as colagens claras da abertura e do fim. */
.trilho { position: fixed; z-index: 55; left: 0; top: var(--barra-h); bottom: 0; width: var(--trilho-w); display: none; padding-left: 16px; box-sizing: border-box; }
@media (min-width: 1100px) { .trilho { display: flex; align-items: center; } }
.trilho ol {
  position: relative; list-style: none; margin: 0; padding: 14px 0; width: 44px; display: flex; flex-direction: column; gap: 2px;
  border-radius: 999px; background: rgb(7 21 48 / .82); box-shadow: inset 0 0 0 1px rgb(157 184 232 / .14);
}
.trilho ol::before, .trilho ol::after { content: ""; position: absolute; left: 21px; top: 29px; width: 2px; border-radius: 2px; }
.trilho ol::before { bottom: 29px; background: rgb(157 184 232 / .22); }
.trilho ol::after { height: calc(100% - 58px); transform-origin: 50% 0; transform: scaleY(var(--fita, 0)); background: linear-gradient(var(--azul-claro), var(--acento-2)); box-shadow: 0 0 8px rgb(46 107 230 / .9); }
.trilho li { position: relative; z-index: 1; }
.trilho__item { position: relative; display: flex; align-items: center; width: 44px; height: 30px; text-decoration: none; }
.trilho__num {
  display: block; width: 8px; height: 8px; margin-left: 18px; border-radius: 50%;
  background: var(--noite); box-shadow: inset 0 0 0 1.5px rgb(157 184 232 / .6);
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s var(--sc-ease-out);
}
.trilho__t {
  position: absolute; left: 52px; white-space: nowrap; pointer-events: none;
  font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: #DCE6F8;
  padding: .5rem .7rem; border-radius: 8px; background: rgb(7 21 48 / .94); box-shadow: inset 0 0 0 1px rgb(157 184 232 / .2);
  opacity: 0; translate: -6px 0; transition: opacity .2s ease, translate .2s var(--sc-ease-out);
}
.trilho__item:focus-visible .trilho__t { opacity: 1; translate: 0 0; }
@media (hover: hover) and (pointer: fine) { .trilho__item:hover .trilho__t { opacity: 1; translate: 0 0; } }
.trilho__item[aria-current="true"] .trilho__num { background: var(--creme); box-shadow: 0 0 0 4px rgb(46 107 230 / .35), 0 0 14px rgb(157 184 232 / .9); transform: scale(1.35); }
@media (hover: hover) and (pointer: fine) { .trilho__item:hover .trilho__num { box-shadow: inset 0 0 0 1.5px var(--creme); } }

/* ------------------------------------------------------- o palco fixo -- */
.sc-world { top: 0; transform-origin: 50% 50%; }
/* As paradas ficam imóveis no lugar do zoom padrão do motor: quem se move é
   o palco inteiro, como uma janela (portal.js §6). */
.leg--parada .sc-world__poster { transform: none !important; }
/* trechos longe do ponto atual (portal.js): fora da tela de vez, para o
   navegador soltar as imagens deles */
.leg--longe { display: none; }

/* A mesa: marinho com uma luz vinda de cima, uma grade de pontos de
   prancheta (que conversa com a rota pontilhada), um grão fino de papel e
   uma vinheta nas bordas. Tudo numa camada só, fixa e sem mistura (um grão
   misturado por cima da tela inteira custava uma camada de GPU do tamanho da
   tela, refeita a cada quadro). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgb(3 10 26 / .55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    radial-gradient(circle at 1.5px 1.5px, rgb(157 184 232 / .22) 1.1px, transparent 1.9px) 0 0 / 28px 28px,
    radial-gradient(120% 90% at 60% 38%, var(--noite-luz) 0%, var(--noite) 55%, var(--noite-fundo) 100%);
}

/* A janela vira uma gravura emoldurada que emite luz: passe-partout creme,
   um fio azul por fora, sombra funda e um brilho azul. Fixos; só o
   transform da janela anima, então nada disso é redesenhado. */
/* (o brilho azul fica com o halo, embaixo: uma sombra larga numa camada que
   se move custava memória de GPU à toa) */
.sc-world.janela {
  box-shadow: 0 0 0 22px var(--creme), 0 0 0 23px rgb(157 184 232 / .35), 0 40px 80px -30px rgb(0 0 0 / .75);
}
/* O halo: uma poça de luz azul sob a janela, que viaja com ela (portal.js
   §6 move só o transform; sem blur, o gradiente já é macio). */
.halo {
  position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0;
  width: 120vw; height: 130vh; border-radius: 50%; transform-origin: 50% 50%;
  background: radial-gradient(closest-side, rgb(46 107 230 / .6) 0%, rgb(46 107 230 / .4) 42%, rgb(46 107 230 / .14) 72%, transparent 100%);
  transition: opacity .6s ease;
}
.halo.aceso { opacity: 1; }

/* O contador técnico, acima da janela no lado livre (portal.js §6): os
   dígitos rolam como um odômetro na troca de capítulo, e um fio mostra o
   quanto da viagem já foi. */
.contador {
  position: fixed; left: 0; top: 0; z-index: 15; margin: 0; pointer-events: none; opacity: 0;
  display: flex; align-items: center; gap: .7rem; color: var(--creme);
}
.contador__num { display: inline-flex; font: 300 3.2rem/1 var(--sc-font-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.contador__dig { display: inline-block; height: 1em; overflow: hidden; }
.contador__fita { display: flex; flex-direction: column; transition: transform 420ms var(--sc-ease-out); }
.contador__dig + .contador__dig .contador__fita { transition-delay: 40ms; }
.contador__fita span { display: block; height: 1em; }
.contador__total { align-self: flex-end; margin-bottom: .35rem; font: 400 .9rem/1 var(--sc-font-mono); color: rgb(157 184 232 / .8); }
.contador__linha { width: 180px; height: 2px; border-radius: 2px; background: rgb(157 184 232 / .18); overflow: hidden; }
.contador__linha i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); transition: transform 600ms var(--sc-ease-out);
  background: linear-gradient(90deg, var(--acento-2), var(--azul-claro)); box-shadow: 0 0 8px var(--acento-2); }

/* A legenda presa embaixo da janela (portal.js §6): a régua dos capítulos
   e o que vem a seguir. */
.legenda {
  position: fixed; left: 0; top: 0; z-index: 15; margin: 0; opacity: 0; pointer-events: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  box-sizing: border-box; padding-top: .7rem; border-top: 1px solid rgb(251 248 241 / .22);
  font: 600 .75rem/1.3 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: rgb(251 248 241 / .66);
}
.legenda__regua { display: inline-flex; gap: 4px; align-self: center; }
.legenda__regua i { width: 14px; height: 2px; border-radius: 1px; background: rgb(251 248 241 / .22); }
.legenda__regua i.feito { background: rgb(157 184 232 / .6); }
.legenda__regua i.aqui { width: 28px; background: var(--creme); box-shadow: 0 0 8px rgb(157 184 232 / .8); }
.legenda__prox { display: inline-flex; align-items: center; gap: .5rem; text-align: right; }
.legenda__prox b { font: 600 .9rem/1.2 var(--sc-font-text); letter-spacing: 0; text-transform: none; color: var(--creme); }
.legenda__seta { width: 14px; height: 14px; flex-shrink: 0; color: var(--azul-claro); animation: desce 1.8s ease-in-out infinite; }
@keyframes desce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* A rota pontilhada entre as paradas, por baixo da janela (portal.js §6). */
.rota { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.rota__traco { fill: none; stroke: var(--azul-claro); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 11; opacity: .5; }
.rota__marco circle { fill: var(--noite); stroke: var(--azul-claro); stroke-width: 1.5; }
.rota__marco .rota__miolo { fill: var(--azul-claro); stroke: none; }
@media (max-width: 860px) { .rota, .legenda, .contador, .halo { display: none; } }

/* ------------------------------------------------------------- cartões --
   Papel creme com corte de precisão: cantos de 14 px, um leve degradê,
   brilho interno, contorno fino e uma sombra funda. No topo, um fio de luz
   que acende do centro para fora quando o cartão chega (.aberto, §7). */
.cartao, .abertura {
  --pad: clamp(1.4rem, 2.6vw, 2.4rem);
  position: absolute; top: calc(var(--barra-h) + 3vh); bottom: auto;
  width: min(33rem, 40vw); max-width: none; max-height: calc(100svh - var(--barra-h) - 6vh);
  /* rola por dentro só se não couber; a roda do mouse segue para a página
     quando não há o que rolar (sem overscroll-behavior: contain) */
  overflow: auto; box-sizing: border-box;
  padding: var(--pad);
  background: linear-gradient(180deg, #FDFBF6 0%, #F5F0E5 100%); color: var(--tinta);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px rgb(12 37 80 / .10), 0 2px 6px rgb(2 8 24 / .18), 0 48px 100px -36px rgb(2 8 24 / .85);
  scrollbar-width: thin;
}
.cartao::before, .abertura::before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--acento-2) 18%, var(--azul-claro) 50%, var(--acento-2) 82%, transparent);
  box-shadow: 0 0 14px 1px var(--brilho);
  transform: scaleX(0); transition: transform 500ms var(--sc-ease-out);
}
.aberto::before { transform: scaleX(1); }
.cartao--lead { left: calc(var(--trilho-w) + var(--sc-gutter)); right: auto; text-align: left; }
.cartao--trail { right: var(--sc-gutter); left: auto; text-align: left; }
/* Composição: o cartão é mais estreito, fica centrado na altura e avança
   sobre a borda da janela (que o portal.js mede sem esse avanço), para as
   duas peças se sobreporem em camadas em vez de ficarem lado a lado. */
.cartao--lead, .cartao--trail { width: min(26rem, 32vw); top: calc(var(--barra-h) + (100svh - var(--barra-h)) / 2); translate: var(--avanco) -50%; }
.cartao--lead { --avanco: 4.5vw; } .cartao--trail { --avanco: -4.5vw; }

.cartao__titulo { margin: .3rem 0 .7rem; font: 420 clamp(2rem, 3.2vw, 3rem)/1.02 var(--sc-font-display); letter-spacing: -.02em; }
/* o número da seção ("02 / 14") é só do celular, onde marca a parada da rota
   (celular.css); aqui quem mostra o número é o contador */
.secao-num { display: none; }
.cartao__desc { margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.5; color: var(--suave); max-width: 46ch; }
.cartao__todos { display: none; }
.cartao__nota { margin: 1.2rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--suave); }
.cartao__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 0; }

/* Os serviços chegam em cascata, um a um (45 ms entre eles), e somem juntos
   e depressa quando o cartão sai. */
.cartao .servicos li { opacity: 0; transform: translateY(10px); transition: opacity 150ms var(--sc-ease-out), transform 150ms var(--sc-ease-out); }
.cartao.aberto .servicos li { opacity: 1; transform: none; transition-duration: 300ms; transition-delay: calc(var(--i, 0) * 45ms + 60ms); }

/* Fichas de serviço: um ícone próprio num selo em degradê, o nome com o tema
   embaixo (em mono) e um botão de seta. Um holofote segue o cursor dentro
   da ficha (--mx/--my, portal.js §8); no hover a ficha ganha um anel azul e
   o botão acende; ao clicar, afunda de leve. */
.servicos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.servico {
  position: relative; display: flex; align-items: center; gap: .85rem; min-height: 54px; padding: .5rem .6rem .5rem .5rem;
  border-radius: 12px; border: 1px solid rgb(12 37 80 / .10); color: var(--tinta); text-decoration: none;
  background:
    radial-gradient(220px circle at var(--mx, -300px) var(--my, -300px), rgb(46 107 230 / .16), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #FAF7F0);
  box-shadow: 0 1px 2px rgb(12 37 80 / .06);
  /* a sombra troca sem animar (animá-la redesenharia a ficha a cada quadro) */
  transition: border-color 180ms ease, transform 120ms var(--sc-ease-out);
}
.servico__icone {
  flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff;
  background: linear-gradient(145deg, var(--acento-2) 0%, var(--acento) 35%, var(--tinta) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 6px 14px -6px rgb(31 79 191 / .7);
}
.servico__icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.servico__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.servico__nome { font-weight: 540; font-size: .93rem; line-height: 1.25; letter-spacing: 0; }
.servico__tipo { font: 600 .75rem/1.2 var(--sc-font-text); letter-spacing: .05em; text-transform: uppercase; color: var(--suave); }
.cartao--mesmotema .servico__tipo { display: none; }
.servico__ir {
  flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--acento);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
/* parada, a ficha mostra só a seta; o círculo cheio aparece no mouse e no foco */
.servico:focus-visible .servico__ir { background: var(--acento); border-color: var(--acento); color: #fff; }
.seta { width: 14px; height: 14px; transition: transform 180ms var(--sc-ease-out); }
.servico:active { transform: scale(.985); }
.servico:focus-visible { outline: none; border-color: rgb(46 107 230 / .6); box-shadow: 0 0 0 3px rgb(46 107 230 / .25); }
@media (hover: hover) and (pointer: fine) {
  .servico:hover { border-color: rgb(46 107 230 / .45); box-shadow: 0 0 0 3px rgb(46 107 230 / .10), 0 8px 20px -10px rgb(31 79 191 / .45); }
  .servico:hover .servico__ir { background: var(--acento); border-color: var(--acento); color: #fff; }
  .servico:hover .seta { transform: translate(2px, -2px); }
}

/* Ícones coloridos (v5): desenhos cheios, com cor e degradê suave, no
   espírito dos emojis do portal anterior. O selo fica em azul-marinho para
   as cores (dourado, verde, azul-céu, branco) saltarem. Fora de um cartão (índice,
   rodapé) o ícone já vem pronto. */
.servico__icone--cor {
  background: linear-gradient(160deg, #24498F 0%, #163668 55%, #0E2A5A 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 1px rgb(157 184 232 / .24), 0 6px 14px -6px rgb(2 8 24 / .55);
}
.servico__icone--cor svg { width: 32px; height: 32px; overflow: visible; stroke: none; filter: drop-shadow(0 1px 1px rgb(2 8 24 / .45)); }
.defs-cor { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic-saco, .ic-lapis, .ic-nota, .ic-g { transform-box: view-box; }
.ic-g { transform-origin: var(--o, 12px 12px); }
.ic-saco { transform-origin: 12px 21px; }
.ic-lapis { transform-origin: 15px 14px; }
.ic-nota { transform-origin: 11px 14px; }

/* Chegada: quando o cartão abre (.aberto, §7), cada ícone surge um pouco
   menor e inclinado e assenta no lugar, no compasso da cascata das fichas
   (--i). Quando o cartão sai, volta ao início sem animar, depois que a
   ficha já sumiu (150 ms). */
.cartao .ic-cor { opacity: 0; transform: scale(.7) rotate(-10deg); transition: opacity 0s linear 150ms, transform 0s linear 150ms; }
.cartao.aberto .ic-cor {
  opacity: 1; transform: none;
  transition: opacity 200ms ease calc(var(--i, 0) * 45ms + 140ms), transform 360ms var(--sc-ease-out) calc(var(--i, 0) * 45ms + 140ms);
}

/* Mouse: um gesto curto e próprio de cada ícone (220 ms), só com mouse de
   verdade e sem pedido de movimento reduzido. Receitas: o saco dá um pulinho.
   Emendas: o lápis risca a folha. Despesas: a nota de cima escorrega do maço.
   Nos outros, a peça marcada com .ic-g--* (src/icones-cor.mjs) pula, sobe,
   gira, balança… em torno do ponto --o. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ic-saco, .ic-lapis, .ic-nota { transition: transform 220ms var(--sc-ease-out); }
  :is(.servico, .acesso__item):hover .ic-saco { transform: translateY(-1.4px) rotate(-7deg); }
  :is(.servico, .acesso__item):hover .ic-lapis { transform: translate(-1.3px, 1.3px) rotate(-4deg); }
  :is(.servico, .acesso__item):hover .ic-nota { transform: translate(1.6px, .6px) rotate(5deg); }
  /* os demais ícones: um gesto de uma lista curta, escolhido no desenho */
  .ic-g { transition: transform 220ms var(--sc-ease-out); }
  :is(.servico, .acesso__item):hover .ic-g--pulo { transform: translateY(-1.4px) rotate(-7deg); }
  :is(.servico, .acesso__item):hover .ic-g--sobe { transform: translateY(-1.6px); }
  :is(.servico, .acesso__item):hover .ic-g--desce { transform: translateY(1.6px); }
  :is(.servico, .acesso__item):hover .ic-g--gira { transform: rotate(16deg); }
  :is(.servico, .acesso__item):hover .ic-g--balanca { transform: rotate(-9deg); }
  :is(.servico, .acesso__item):hover .ic-g--direita { transform: translateX(1.6px); }
  :is(.servico, .acesso__item):hover .ic-g--risca { transform: translate(-1.3px, 1.3px) rotate(-4deg); }
  :is(.servico, .acesso__item):hover .ic-g--sai { transform: translate(1.2px, -1.2px); }
  :is(.servico, .acesso__item):hover .ic-g--abre { transform: rotate(-20deg); }
  :is(.servico, .acesso__item):hover .ic-g--cresce { transform: scale(1.12); }
  :is(.servico, .acesso__item):hover .ic-g--estica { transform: scaleY(1.14); }
}
/* Notebook de tela baixa (1366×768 e parecidos): título menor, sem a
   descrição e fichas mais justas, para o cartão caber inteiro na tela. */
@media (min-width: 861px) and (max-height: 820px) {
  .cartao__titulo { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: .9rem; }
  .cartao:not(.cartao--fim) .cartao__desc { display: none; }
  .servicos { gap: 5px; }
  .servico { min-height: 46px; padding-block: .35rem; }
  .servico__icone { width: 32px; height: 32px; border-radius: 9px; }
  .servico__icone svg { width: 18px; height: 18px; }
  .servico__ir { width: 28px; height: 28px; }
  .cartao--longo .servico { min-height: 36px; padding-block: .2rem; }
  .cartao--longo .servico__icone { width: 26px; height: 26px; border-radius: 7px; }
  .cartao--longo .servico__icone svg { width: 15px; height: 15px; }
  .cartao--longo .servico__ir { width: 24px; height: 24px; }
  .cartao--longo .servicos { gap: 4px; }
}
/* capítulo com muitos serviços (mais de 7): fichas compactas, sem o tema e
   sem a descrição, para tudo caber na tela sem rolar dentro do cartão */
.cartao--longo .cartao__desc, .cartao--longo .servico__tipo { display: none; }
.cartao--longo .servicos { gap: 5px; }
.cartao--longo .servico { min-height: 42px; padding-block: .3rem; }
.cartao--longo .servico__icone { width: 30px; height: 30px; border-radius: 8px; }
.cartao--longo .servico__icone svg { width: 17px; height: 17px; }
.cartao--longo .servico__ir { width: 26px; height: 26px; }

.botao {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: .9rem 1.35rem;
  background: linear-gradient(180deg, var(--acento-2), var(--acento)); color: #fff; font: 600 .95rem/1 var(--sc-font-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 8px 20px -8px rgb(31 79 191 / .8);
  transition: box-shadow .2s ease, transform 120ms var(--sc-ease-out);
}
.botao:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .botao:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 10px 26px -8px rgb(46 107 230 / 1); } }
.link-corrido { color: var(--acento); font-weight: 600; text-underline-offset: .2em; }

/* ----------------------------------------------------------- abertura --
   Sem cartão: a tipografia é a protagonista, sobre o vídeo da entrada da
   cidade (§12). No alto, o selo da Câmara; o título enorme entra palavra
   por palavra; depois, o texto, os dois botões e a pílula da sessão. No
   computador fica tudo no centro (bloco "abertura centralizada", no fim). */
.abertura {
  left: calc(var(--trilho-w) + var(--sc-gutter)); right: var(--sc-gutter); top: var(--barra-h); bottom: 0;
  width: auto; max-height: none; overflow: visible; box-sizing: border-box;
  display: flex; flex-direction: column; text-align: left;
  padding: clamp(1.4rem, 6vh, 3.6rem) 0 clamp(1.2rem, 4.5vh, 2.6rem);
  background: none; box-shadow: none; border-radius: 0; color: var(--creme);
}
.abertura::before { display: none; }
.abertura__selo {
  display: flex; align-items: center; gap: .75rem; margin: 0;
  font: 600 .75rem/1.2 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: rgb(251 248 241 / .78);
}
.abertura__brasao { flex-shrink: 0; width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35)); }
.abertura__h {
  margin: clamp(1rem, 3vh, 1.8rem) 0 0; max-width: 11ch;
  font: 360 clamp(3.4rem, 6.8vw, 8.6rem)/.9 var(--sc-font-display); letter-spacing: -.045em; color: var(--creme);
  text-wrap: balance;
}
.abertura__h em { display: block; font-style: italic; font-weight: 280; letter-spacing: -.035em; color: var(--azul-claro); }
.abertura__h .pal { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .08em .1em; margin: -.14em -.08em -.1em; }
.abertura__h .pal > span { display: inline-block; animation: sobe 900ms var(--sc-ease-out) both; animation-delay: calc(var(--p, 0) * 110ms + 700ms); }
@keyframes sobe { from { transform: translateY(165%); } to { transform: none; } }
/* o resto chega depois do título, quando a colagem já recuou */
.abertura__selo, .abertura__corpo, .abertura__pe { animation: chega 700ms var(--sc-ease-out) both; }
.abertura__selo { animation-delay: 600ms; } .abertura__corpo { animation-delay: 1150ms; } .abertura__pe { animation-delay: 1350ms; }
@keyframes chega { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.abertura__corpo { max-width: min(31rem, 40vw); margin-top: clamp(1.2rem, 4vh, 2.4rem); }
.abertura__sub { margin: 0; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.55; color: rgb(251 248 241 / .74); max-width: 42ch; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 0; }
.botao { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.botao__seta { width: 14px; height: 14px; }
.botao--vidro {
  background: rgb(255 255 255 / .05); color: var(--creme);
  box-shadow: inset 0 0 0 1px rgb(157 184 232 / .35);
}
.botao--vidro kbd { font: 500 .75rem/1 var(--sc-font-mono); padding: .25rem .4rem; border-radius: 5px; background: rgb(157 184 232 / .16); color: rgb(251 248 241 / .8); }
@media (hover: hover) and (pointer: fine) {
  .botao--vidro:hover { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(157 184 232 / .6); }
  .botao:hover .botao__seta { transform: translateY(2px); }
}
.botao__seta { transition: transform 180ms var(--sc-ease-out); }
.abertura__pe {
  margin-top: auto; display: flex; align-items: flex-end; gap: 2rem;
  width: fit-content; max-width: 40vw; padding-top: 1rem; border-top: 1px solid rgb(251 248 241 / .16);
}
.dados { display: grid; grid-template-columns: repeat(3, auto); gap: 0; margin: 0; padding: 0; list-style: none; }
.dados li { padding: 0 1.4rem 0 0; }
.dados li + li { padding-left: 1.4rem; border-left: 1px solid rgb(251 248 241 / .14); }
.dados b { display: block; font: 300 2rem/1 var(--sc-font-mono); letter-spacing: -.04em; color: var(--creme); font-variant-numeric: tabular-nums; }
.dados b small { font-size: .5em; letter-spacing: 0; color: var(--azul-claro); }
.dados li > span { display: block; margin-top: .5rem; font: 600 .75rem/1.3 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--azul-claro); }
.abertura .botao__seta { animation: desce 1.8s ease-in-out infinite; }
/* Com movimento reduzido a colagem fica em tela cheia (a janela não anda):
   uma sombra marinho da esquerda garante a leitura do título sobre ela. */
@media (prefers-reduced-motion: reduce) and (min-width: 861px) {
  /* a gravura não sai pelo alto: o rodapé traz a própria mesa */
  .rodape { background: var(--noite); box-shadow: 0 0 0 100vw var(--noite); }
  .abertura { margin-left: calc(-1 * (var(--trilho-w) + var(--sc-gutter))); padding-left: calc(var(--trilho-w) + var(--sc-gutter));
    background: linear-gradient(90deg, rgb(11 30 63 / .96) 0%, rgb(11 30 63 / .88) 45%, rgb(11 30 63 / .2) 75%, transparent); }
}

/* ------------------------------------------------------------ rodapé --
   O encerramento: a gravura sai pelo alto (portal.js §6) e a mesa marinho
   fica livre. Fechamento tipográfico no tom da abertura, as ações, três
   colunas (capítulos, atendimento, sobre a prévia) e a assinatura: PINHÃO
   em contorno gigante, cortado pela borda de baixo da tela. */
.rodape {
  position: absolute; left: calc(var(--trilho-w) + var(--sc-gutter)); right: var(--sc-gutter); top: var(--barra-h); bottom: 0;
  display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; max-width: none;
  padding-top: clamp(1.4rem, 5vh, 3.2rem); color: var(--creme);
}
.rodape > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--sc-ease-out), transform 600ms var(--sc-ease-out); }
.rodape.aberto > * { opacity: 1; transform: none; }
.rodape.aberto > :nth-child(2) { transition-delay: 120ms; }
.rodape.aberto > :nth-child(3) { transition-delay: 240ms; }
.rodape__topo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.rodape__k { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--azul-claro); }
.rodape__k i { width: 2.5rem; height: 1px; background: rgb(157 184 232 / .45); }
.rodape__h { margin: 0; font: 360 clamp(2.8rem, 5.2vw, 6rem)/.92 var(--sc-font-display); letter-spacing: -.04em; text-wrap: balance; }
.rodape__h em { display: block; font-style: italic; font-weight: 280; color: var(--azul-claro); }
.rodape__sub { margin: 0; max-width: 40ch; font-size: 1rem; line-height: 1.55; color: rgb(251 248 241 / .72); }
.rodape__acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.3rem 0 0; }
.rodape__acoes .botao kbd { font: 500 .75rem/1 var(--sc-font-mono); padding: .25rem .4rem; border-radius: 5px; background: rgb(255 255 255 / .18); }
.rodape__grade {
  display: grid; grid-template-columns: 1.3fr 1fr .9fr; gap: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-top: clamp(1.4rem, 4.5vh, 3rem); padding-top: clamp(1rem, 3vh, 1.8rem); border-top: 1px solid rgb(251 248 241 / .14);
}
.rodape__rot { margin: 0 0 .9rem; font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--azul-claro); }
.rodape__col--caps ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.6rem; }
.rodape__col--caps li { break-inside: avoid; }
.rodape__col--caps a { display: flex; gap: .7rem; padding: .32rem 0; color: rgb(251 248 241 / .82); text-decoration: none; font-size: .9rem; line-height: 1.3; transition: color 150ms ease; }
.rodape__col--caps a span { flex-shrink: 0; font: 400 .75rem/1.6 var(--sc-font-mono); color: rgb(157 184 232 / .7); }
.rodape .servicos { gap: 5px; }
.rodape .servico { min-height: 40px; padding-block: .25rem; }
.rodape .servico__icone { width: 28px; height: 28px; border-radius: 8px; }
.rodape .servico__icone svg { width: 16px; height: 16px; }
.rodape .servico__tipo { display: none; }
.rodape .servico__ir { width: 26px; height: 26px; }
.rodape__col--nota p:not(.rodape__rot) { margin: 0 0 .7rem; font-size: .85rem; line-height: 1.5; color: rgb(251 248 241 / .6); }
.rodape__topo-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--creme); text-decoration: none; }
.rodape__topo-link svg { width: 14px; height: 14px; transition: transform 180ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .rodape__col--caps a:hover { color: #fff; }
  .rodape__col--caps a:hover span { color: var(--azul-claro); }
  .rodape__topo-link:hover svg { transform: translateY(-2px); }
}
.rodape__assina { position: relative; margin-top: auto; padding-top: clamp(1rem, 3vh, 2rem); }
.rodape__marca { display: flex; align-items: center; gap: .8rem; margin: 0; font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: rgb(251 248 241 / .6); }
.rodape__marca span + span::before { content: "—"; margin-right: .8rem; color: rgb(157 184 232 / .5); }
.rodape__palavra {
  margin: .2em 0 0; font: italic 300 clamp(7rem, 25vw, 26rem)/.82 var(--sc-font-display); letter-spacing: -.045em; white-space: nowrap; text-align: center;
  color: transparent; -webkit-text-stroke: 1.2px rgb(157 184 232 / .5);
  background: linear-gradient(180deg, rgb(157 184 232 / .16), transparent 70%); -webkit-background-clip: text; background-clip: text;
  margin-bottom: -.4em;
}
/* notebook de tela baixa: fecha mais justo */
@media (min-width: 861px) and (max-height: 820px) {
  .rodape__h { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
  .rodape__col--caps a { padding: .22rem 0; font-size: .85rem; }
  .rodape__col--nota p:not(.rodape__rot):nth-of-type(3) { display: none; }
  .rodape__palavra { font-size: clamp(6rem, 21vw, 19rem); }
}

/* --------------------------------------------------------- diálogos -- */
.dlg { width: min(44rem, 92vw); max-height: 84svh; border: 0; border-radius: 16px; padding: 1.5rem; background: var(--papel); color: var(--tinta); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .5); }
.dlg::backdrop { background: rgb(4 12 30 / .62); backdrop-filter: blur(4px); }
.dlg h2 { margin: 0; font: 420 1.7rem/1.1 var(--sc-font-display); }
.dlg__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dlg__fechar { appearance: none; border: 1px solid rgb(12 37 80 / .25); background: transparent; border-radius: 999px; padding: .6rem 1rem; font: 600 .88rem/1 var(--sc-font-text); color: var(--tinta); cursor: pointer; }
.dlg__rot { margin: 0 0 .4rem; font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--acento); }
.dlg--pendente { width: min(30rem, 92vw); }
.dlg__acoes { margin: 1rem 0 0; }

/* O índice como paleta de comando: vidro escuro, busca grande, uma coluna
   que rola por dentro, o capítulo de cada serviço num selo mono e atalhos de
   teclado no rodapé (setas, Enter, Esc; Ctrl/⌘+K abre de qualquer ponto). */
.dlg--indice {
  width: min(40rem, 94vw); max-height: min(78svh, 46rem); padding: 0; overflow: hidden; display: none; flex-direction: column;
  color: var(--creme); border-radius: 18px;
  background: linear-gradient(180deg, rgb(19 42 84 / .94), rgb(9 24 52 / .96));
  box-shadow: inset 0 0 0 1px rgb(157 184 232 / .18), 0 40px 100px -20px rgb(0 0 0 / .7), 0 0 80px -20px rgb(46 107 230 / .5);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.dlg--indice[open] { display: flex; }
.dlg--indice .dlg__topo { margin: 0; padding: 1rem 1.2rem 0; }
.dlg--indice h2 { font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--azul-claro); }
.dlg--indice .dlg__fechar { border-color: rgb(157 184 232 / .25); color: var(--creme); padding: .45rem .75rem; font: 500 .75rem/1 var(--sc-font-mono); letter-spacing: .06em; }
.dlg--indice .busca { margin: 0; padding: .4rem 1.2rem 1rem; border-bottom: 1px solid rgb(157 184 232 / .14); }
.dlg--indice .busca__rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dlg--indice .busca__campo { border: 0; background: transparent; padding: .3rem 0; color: var(--creme); font: 400 1.6rem/1.2 var(--sc-font-display); outline: none; }
.dlg--indice .busca__campo::placeholder { color: rgb(251 248 241 / .35); }
.dlg--indice .busca__campo { width: 100%; -webkit-appearance: none; appearance: none; }
.dlg--indice .busca__campo::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.dlg--indice .rem-lista { columns: 1; flex: 1; overflow: auto; overscroll-behavior: contain; padding: .5rem .6rem .8rem; scrollbar-width: thin; scrollbar-color: rgb(157 184 232 / .3) transparent; }
.dlg--indice .rem-grupo { margin: 0 0 .3rem; }
.dlg--indice .rem-letra { margin: .6rem .6rem .25rem; font: 500 .75rem/1 var(--sc-font-mono); letter-spacing: .12em; color: rgb(157 184 232 / .7); }
.dlg--indice .rem-item { align-items: center; padding: .6rem .6rem; border-radius: 10px; color: var(--creme); font-size: .95rem; }
.dlg--indice .rem-item:focus-visible { outline: none; background: rgb(46 107 230 / .22); box-shadow: inset 0 0 0 1px rgb(157 184 232 / .35); }
.dlg--indice .rem-cap { font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .05em; text-transform: uppercase; color: var(--azul-claro); background: rgb(157 184 232 / .1); padding: .35rem .5rem; border-radius: 6px; }
.dlg--indice .rem-vazio { margin: 1rem .6rem; color: rgb(251 248 241 / .6); }
.dlg__atalhos { display: flex; gap: 1.2rem; margin: 0; padding: .7rem 1.2rem; border-top: 1px solid rgb(157 184 232 / .14); font: 500 .75rem/1 var(--sc-font-mono); letter-spacing: .05em; text-transform: uppercase; color: rgb(251 248 241 / .5); }
.dlg__atalhos kbd { font: inherit; padding: .2rem .35rem; margin-right: .3rem; border-radius: 4px; background: rgb(157 184 232 / .14); color: var(--creme); }
@media (hover: hover) and (pointer: fine) { .dlg--indice .rem-item:hover { background: rgb(157 184 232 / .08); } }
.rem-grupo { break-inside: avoid; margin-bottom: .9rem; }
.rem-grupo ul { list-style: none; margin: 0; padding: 0; }
.rem-letra { margin: 0 0 .2rem; font: 420 1.3rem/1 var(--sc-font-display); color: var(--acento); }
.rem-item { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; color: var(--tinta); text-decoration: none; font-size: .93rem; }
.rem-cap { color: var(--suave); font-size: .8rem; white-space: nowrap; }
.noscript { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; z-index: 80; background: var(--papel); padding: 1rem; border-radius: 6px; }

/* ----------------------------------------------------------- celular --
   Até 860 px a página é outra, sem a viagem: as regras ficam em celular.css
   (carregado só nessa largura). Aqui, só o que some no computador. */
.transito, .chips, .cartao__img, .cartao__abrir { display: none; }
/* celular bem estreito (320 px): botões mais justos, para a lupa e o
   "Portal da Transparência" caberem ao lado do brasão sem cortar */
@media (max-width: 400px) {
  .barra { padding: 0 12px; gap: .5rem; }
  .barra__acoes { gap: .35rem; }
  .barra__btn { padding: .6rem .65rem; font-size: .8rem; }
  .barra__btn--lupa { width: 38px; height: 38px; padding: 0; }
}

/* Movimento reduzido: menos e mais suave, nunca nada. Some o que desloca;
   fica o que só aparece. */
@media (prefers-reduced-motion: reduce) {
  .cartao .servicos li, .cartao.aberto .servicos li { transform: none; transition-delay: 0s; }
  .cartao .ic-cor, .cartao.aberto .ic-cor { transform: none; transition: opacity 200ms ease; }
  .cartao::before, .abertura::before { transform: none; transition: none; }
  .abertura__h .pal > span { animation: none; }
  .abertura__selo, .abertura__corpo, .abertura__pe { animation: none; }
  .rodape > * { transform: none; transition: opacity 300ms ease; }
  .abertura .botao__seta { animation: none; }
  .legenda__seta { animation: none; }
  .contador__fita, .contador__linha i { transition: none; }
  .transito__t { transform: none; }
  .trilho__num, .trilho__t { transition: none; }
}

/* Ícones coloridos nos selos compactos (tela baixa, capítulo longo, celular):
   o desenho cheio precisa de mais área que o de traço para continuar legível. */
.cartao--longo .servico__icone.servico__icone--cor svg { width: 27px; height: 27px; }
@media (min-width: 861px) and (max-height: 820px) {
  .servico__icone.servico__icone--cor svg { width: 28px; height: 28px; }
  .cartao--longo .servico__icone.servico__icone--cor svg { width: 24px; height: 24px; }
}
@media (max-width: 860px) {
  .cartao .servico__icone.servico__icone--cor svg { width: 27px; height: 27px; }
}
.rodape .servico__icone.servico__icone--cor svg { width: 25px; height: 25px; }

/* O que é cada serviço: a dica que aparece ao lado do cartão, virada para a
   janela, quando o mouse para sobre a ficha ou ela recebe o foco (portal.js
   §11). Fica fora do cartão e entra deslizando 6 px a partir da ficha. */
.dicas { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.dica-servico {
  position: fixed; z-index: 70; top: 0; left: 0; width: max-content; max-width: min(18rem, calc(100vw - 32px)); box-sizing: border-box;
  padding: .75rem .95rem .8rem; border-radius: 12px; background: var(--tinta); color: var(--creme);
  font: 400 .9rem/1.5 var(--sc-font-text); letter-spacing: .005em; text-wrap: pretty;
  box-shadow: 0 16px 34px -12px rgb(2 8 24 / .7), 0 0 0 1px rgb(157 184 232 / .2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out), visibility 0s linear 160ms;
}
.dica-servico[data-lado="esquerda"] { transform: translateX(6px); }
.dica-servico[data-lado="direita"] { transform: translateX(-6px); }
.dica-servico[data-lado="baixo"] { transform: translateY(-4px); }
.dica-servico.visivel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.dica-servico__rot { display: block; margin-bottom: .35rem; font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--azul-claro); }
@media (prefers-reduced-motion: reduce) { .dica-servico, .dica-servico[data-lado] { transform: none; } }
/* texto corrido pequeno: a Inter Tight já é justa, então nada de apertar
   mais; o espaçamento negativo fica só nos títulos grandes */
.cartao__desc, .abertura__sub, .rodape__sub, .rodape__col--caps a, .rodape__col--nota p { letter-spacing: .005em; }
/* Paradas obrigatórias (portal.js §4): enquanto o código leva a página ao
   ponto de chegada, o html fica preso (.rolagem-presa), o que corta também
   a inércia do touchpad e do dedo. O espaço da barra de rolagem fica
   reservado, para nada pular de lado nesse instante. */
html { scrollbar-gutter: stable; }
html.rolagem-presa { overflow: hidden; }

/* --------------------------------------------- vídeo de fundo da abertura --
   A entrada da cidade, atrás do título (portal.js §12), com a cor e o
   enquadramento do vídeo original: começa abaixo da barra (mostra quase a
   largura toda do quadro) e não recebe zoom. Uma sombra neutra, só à
   esquerda (onde está o texto) e embaixo (os números), garante a leitura; o
   resto fica com a cor natural. Ao rolar, ele se apaga enquanto as notícias
   entram por cima. No celular ocupa a metade de cima, como as colagens. */
.heroi-video { position: fixed; inset: var(--barra-h) 0 0 0; z-index: 2; overflow: hidden; pointer-events: none; background: #05080D; }
.heroi-video.apagado { visibility: hidden; }
.heroi-video video { display: block; width: 100%; height: 100%; object-fit: cover; animation: heroi-entra 1.2s ease both; }
@keyframes heroi-entra { from { opacity: 0; } to { opacity: 1; } }
.heroi-video::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 64% at 50% 50%, rgb(0 0 0 / .56) 0%, rgb(0 0 0 / .44) 52%, rgb(0 0 0 / .18) 84%, rgb(0 0 0 / .1) 100%),
    linear-gradient(0deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 26%);
}
/* a seta para baixo: leva às notícias */
.abertura__rolar {
  position: absolute; left: 50%; bottom: clamp(1.2rem, 4.5vh, 2.6rem); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 10px;
  color: rgb(251 248 241 / .82); text-decoration: none; font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase;
  animation: chega 700ms var(--sc-ease-out) 1500ms both; transition: color 160ms ease;
}
.abertura__rolar i { position: relative; width: 24px; height: 38px; border-radius: 13px; box-shadow: inset 0 0 0 1.5px rgb(251 248 241 / .7); }
.abertura__rolar i::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--azul-claro); animation: heroi-rola 1.8s ease-in-out infinite; }
@keyframes heroi-rola { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .abertura__rolar:hover { color: #fff; } }
@media (prefers-reduced-motion: reduce) {
  .heroi-video { display: none; }
  .abertura__rolar { animation: none; }
  .abertura__rolar i::after { animation: none; }
}

/* ---------------------------------------------------- acesso rápido --
   A parada logo depois das notícias (src/build.mjs; a lista fica em
   ACESSO_RAPIDO, content.mjs): os serviços mais procurados em fichas
   grandes, numa grade sobre a mesa, com os ícones coloridos dos capítulos.
   Embaixo sobra uma faixa livre para o marcador da rota (portal.js §6). As
   fichas chegam em cascata quando o painel abre (.aberto, §7). */
.acesso-painel {
  position: absolute; left: calc(var(--trilho-w) + var(--sc-gutter)); right: var(--sc-gutter); top: var(--barra-h); bottom: 0;
  width: auto; max-width: none; max-height: none; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(1.2rem, 3.4vh, 2rem);
  padding: clamp(1rem, 4vh, 2.4rem) 0 clamp(4rem, 14vh, 8rem);
  background: none; box-shadow: none; border-radius: 0; color: var(--creme); text-align: left;
}
.acesso__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.acesso__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 1rem; row-gap: .35rem; align-items: center;
  box-sizing: border-box; min-height: clamp(88px, 12.5vh, 116px); padding: .95rem 1.1rem; border-radius: 14px;
  color: var(--creme); text-decoration: none;
  background: rgb(255 255 255 / .045); box-shadow: inset 0 0 0 1px rgb(157 184 232 / .16);
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--sc-ease-out);
}
.acesso__icone {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 15px;
  background: linear-gradient(160deg, #24498F 0%, #163668 55%, #0E2A5A 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 1px rgb(157 184 232 / .24), 0 8px 18px -8px rgb(2 8 24 / .6);
}
.acesso__icone svg { width: 38px; height: 38px; overflow: visible; filter: drop-shadow(0 1px 1px rgb(2 8 24 / .45)); }
.acesso__nome { align-self: end; font: 440 clamp(1.1rem, 1.35vw, 1.35rem)/1.12 var(--sc-font-display); letter-spacing: -.01em; }
.acesso__cap { align-self: start; font: 600 .75rem/1 var(--sc-font-text); letter-spacing: .07em; text-transform: uppercase; color: var(--azul-claro); }
.acesso__item:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; }
.acesso__item:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .acesso__item:hover { background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1px rgb(157 184 232 / .45), 0 18px 34px -20px rgb(2 8 24 / .9); transform: translateY(-3px); }
}
/* chegada: as fichas sobem em cascata quando o painel abre */
.acesso-painel .acesso__grade li { opacity: 0; translate: 0 14px; transition: opacity 0s linear 150ms, translate 0s linear 150ms; }
.acesso-painel.aberto .acesso__grade li { opacity: 1; translate: 0 0; transition: opacity 420ms ease calc(var(--i) * 60ms + 120ms), translate 600ms var(--sc-ease-out) calc(var(--i) * 60ms + 120ms); }
@media (min-width: 861px) and (max-height: 820px) {
  .acesso__item { min-height: 80px; padding: .8rem .95rem; }
  .acesso__icone { width: 50px; height: 50px; border-radius: 13px; }
  .acesso__icone svg { width: 33px; height: 33px; }
}
@media (min-width: 861px) and (max-width: 1100px) { .acesso__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) and (min-width: 861px) {
  /* a gravura não sai pelo alto: o painel traz a própria mesa */
  .acesso-painel { background: var(--noite); box-shadow: 0 0 0 100vw var(--noite); }
}
@media (prefers-reduced-motion: reduce) {
  .acesso-painel .acesso__grade li, .acesso-painel.aberto .acesso__grade li { translate: none; transition: opacity 200ms ease; }
}

/* ------------------------------------------- abertura centralizada --
   No computador, como no site atual da Câmara: o selo, a frase "Orgulho de
   nossa terra, compromisso com nossa gente", o texto, os botões e a pílula
   da sessão, tudo no centro, sobre a sombra central do vídeo. A caixa fica
   simétrica (desconta o trilho dos dois lados) para o centro dela ser o da
   tela; a pílula tem lugar reservado, para nada pular quando ela chega. */
@media (min-width: 861px) {
  .abertura {
    right: calc(var(--trilho-w) + var(--sc-gutter)); align-items: center; justify-content: center; text-align: center;
    padding: clamp(1rem, 4vh, 2.4rem) 0 clamp(5.5rem, 15vh, 8.5rem);
  }
  .abertura__selo {
    display: inline-flex; gap: .6rem; padding: .32rem 1rem .32rem .36rem; border-radius: 999px;
    background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); color: var(--creme); letter-spacing: .08em;
  }
  .abertura__selo .abertura__brasao { width: 28px; height: 28px; }
  .abertura__h {
    max-width: none; margin-top: clamp(1rem, 3vh, 1.7rem);
    font-size: clamp(2.8rem, 5.1vw, 6.2rem); line-height: .98; letter-spacing: -.035em;
    text-shadow: 0 2px 30px rgb(0 0 0 / .35);
  }
  .abertura__corpo { display: flex; flex-direction: column; align-items: center; max-width: 46rem; }
  .abertura__sub { max-width: 54ch; font-size: clamp(1.02rem, 1.25vw, 1.25rem); color: rgb(251 248 241 / .86); text-shadow: 0 1px 14px rgb(0 0 0 / .45); }
  .abertura__acoes { justify-content: center; }
  .abertura .sessao-aviso { display: flex; justify-content: center; min-height: 2.5rem; margin-top: 1.4rem; }
  /* sobre as letras brancas do vídeo, o vidro precisa ser escuro para ler */
  .abertura .botao--vidro { background: rgb(6 14 30 / .5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
  .abertura .sessao-aviso__pilula { background: rgb(6 14 30 / .6); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .abertura .botao--vidro:hover { background: rgb(6 14 30 / .66); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
  .abertura .sessao-aviso__pilula:hover { background: rgb(6 14 30 / .74); }
}
@media (min-width: 861px) and (max-height: 800px) {
  .abertura__h { font-size: clamp(2.6rem, 4.6vw, 5rem); }
  .abertura__acoes { margin-top: 1.2rem; }
  .abertura .sessao-aviso { margin-top: 1rem; }
}
.botao__fora { width: 14px; height: 14px; transition: transform 180ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .botao:hover .botao__fora { transform: translate(1px, -1px); } }