/* Portal da Transparência v5 · Câmara Municipal de Pinhão
   Celular "Rota" (até 860 px; o index.html só aplica este arquivo nessa
   largura). Rodada 20, projeto em docs/2026-10-25-celular-rota-design.md.
   Uma página corrida: nada fica preso na tela. A abertura com o vídeo da
   cidade ocupa a tela inteira, com a marca e a lupa no alto, que sobem
   junto. Depois, as paradas da rota (notícias, acesso rápido e os 13
   capítulos), ligadas pela linha pontilhada que acende o que já passou e
   leva uma luz onde a pessoa está (portal.js §13). Nada aqui vale no
   computador.                                                            */

:root { --coluna: 560px; --leitura: .62; --curva: cubic-bezier(.2, .75, .2, 1); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* a viagem não existe aqui */
[data-sc-world], [data-sc-spacer], .trilho, .rota, .legenda, .contador, .halo, .transito { display: none !important; }

/* cada bloco da viagem vira uma seção no fluxo da página; o contêiner é a
   referência da rota (portal.js §13) */
[data-sc-world-copy] { position: relative; }
/* o que ainda vai entrar pelo lado (32 px fora do lugar) não pode alargar a
   página: o navegador afastaria o zoom ou a deixaria escorregar de lado */
html.celular [data-sc-world-copy] { overflow-x: clip; }
[data-sc-world-copy] > [data-sc-copy] {
  position: relative; inset: auto; translate: none; transform: none; z-index: auto;
  width: auto; max-width: none; height: auto; max-height: none;
  opacity: 1; pointer-events: auto; will-change: auto;
}

/* ------------------------------------------------------------ barra --
   Não fica presa: mora no alto da abertura, transparente sobre o vídeo, e
   sobe com a página. Só a marca e a lupa; o "Portal da Transparência" já
   está nos botões da abertura. Aberta, a busca cobre a barra (comum.js). */
.barra { position: absolute; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.barra::after { display: none; }
.barra__marca span { display: block; text-shadow: 0 1px 10px rgb(0 0 0 / .45); }
.barra__btn--forte { display: none; }
.barra__btn--lupa { width: 44px; height: 44px; padding: 0; justify-content: center; background: rgb(7 21 48 / .4); }

/* ------------------------------------------------------- abertura --
   O vídeo cobre a tela inteira e sobe com a abertura; escuro no alto (a
   marca), mais claro no meio e, no pé, a cor da página. O texto fica
   centralizado e encostado embaixo. Com movimento reduzido ou economia de
   dados, só o pôster. */
.heroi-video { position: absolute; inset: 0 0 auto 0; height: 100svh; z-index: 0; }
.heroi-video::after { background: linear-gradient(180deg, rgb(7 21 48 / .7) 0, rgb(7 21 48 / .15) 20%, rgb(7 21 48 / .5) 48%, rgb(11 30 63 / .92) 78%, var(--noite) 100%); }
@media (prefers-reduced-motion: reduce) { .heroi-video { display: block; } }
.abertura {
  z-index: 1; box-sizing: border-box; min-height: 100svh; margin: 0; overflow: visible;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center;
  padding: 5.5rem 1.25rem 34px; background: none; box-shadow: none; border-radius: 0; color: var(--creme);
}
.abertura__selo, .abertura__rolar, .so-pc { display: none; }
/* tudo já chega com a página: o título não sobe palavra por palavra, e os
   botões e a pílula não esperam (pedido do usuário depois da prévia) */
.abertura__corpo, .abertura__h .pal > span { animation: none; }
.abertura__h { max-width: none; margin: 0; font-size: clamp(2.3rem, 10.5vw, 3.1rem); line-height: 1.02; letter-spacing: -.03em; text-shadow: 0 2px 24px rgb(0 0 0 / .4); text-wrap: balance; }
.abertura__corpo { display: flex; flex-direction: column; align-items: center; max-width: none; width: 100%; margin-top: .9rem; }
.abertura__sub { max-width: 30ch; font-size: 1rem; line-height: 1.5; color: rgb(251 248 241 / .86); text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
.abertura__acoes { flex-direction: column; align-items: stretch; width: min(100%, 24rem); gap: .6rem; margin-top: 1.4rem; }
.abertura__acoes .botao { justify-content: center; min-height: 52px; }
.abertura .botao--vidro { background: rgb(6 14 30 / .5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
/* A pílula da sessão: um cartão centralizado, como o resto da abertura,
   em três linhas (o selo; o nome com a data e a duração; o botão). O lugar
   fica reservado, para nada pular quando ela chega (noticias.js a monta
   depois de ler o sessao.json). */
.abertura .sessao-aviso { display: flex; justify-content: center; align-items: flex-start; width: min(100%, 24rem); min-height: 98px; margin-top: 1rem; }
.abertura .sessao-aviso__pilula {
  display: grid; grid-template-columns: auto auto; grid-template-areas: "selo selo" "nome dur" "botao botao";
  justify-content: center; justify-items: center; align-items: baseline; gap: 6px 8px;
  box-sizing: border-box; width: 100%; padding: 12px 16px 14px; border-radius: 18px;
  background: rgb(6 14 30 / .6); text-align: center; animation: none;
}
.abertura .sessao-aviso__selo { grid-area: selo; }
.abertura .sessao-aviso__nome { grid-area: nome; }
.abertura .sessao-aviso__dur { grid-area: dur; }
.abertura .sessao-aviso__botao { grid-area: botao; margin-top: 4px; padding: .5rem .9rem; }
.abertura .sessao-aviso--vivo .sessao-aviso__nome { grid-area: auto; grid-row: 2; grid-column: 1 / -1; }

/* ------------------------------------------------ paradas da rota --
   Notícias, acesso rápido e os 13 capítulos: cada um é uma parada, sem
   fundo, numa coluna de até 560 px. Acima da rota (z-index 1), que passa
   por trás; por isso os cartões são opacos. Cabeçalho: o número da seção
   (ou o rótulo "Acesso rápido") e o título; depois a lista, e por fim o
   link "Ver todas" (order). */
html.celular [data-sc-world-copy] > :is(.noticias-painel, .acesso-painel, .cartao) {
  z-index: 1; box-sizing: border-box; width: auto; max-width: var(--coluna); max-height: none; margin: 0 auto;
  padding: 64px 20px 0; overflow: visible; display: flex; flex-direction: column; gap: 0;
  background: none; box-shadow: none; border-radius: 0; color: var(--creme); text-align: left;
}
.cartao::before { display: none; }
.secao-num { display: block; margin: 0; font: 300 46px/1 var(--sc-font-mono); letter-spacing: -.03em; color: #fff; }
.secao-num small { margin-left: 6px; font-size: 13px; letter-spacing: 0; color: var(--azul-claro); }
.noticias__topo { display: contents; }
.noticias-painel .noticias__k { display: none; }
.acesso-painel .noticias__k { margin: 0; }
.noticias__t, .cartao__titulo { margin: 6px 0 18px; font: 400 30px/1.06 var(--sc-font-display); letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.noticias-lista, .noticias__falha, .acesso__grade, .cartao .servicos { order: 2; }
.noticias__acoes { order: 3; margin-top: 16px; }
.noticias__todas { min-height: 44px; padding: 0 18px; font-size: .9rem; }
.cartao .cartao__desc, .cartao .cartao__todos, .servico__tipo, .acesso__cap { display: none; }

/* ------------------------------------------------------------ a rota --
   A linha pontilhada (o traço do computador) atrás das seções, do pé da
   abertura ao alto do rodapé (portal.js §13). O trecho já percorrido
   acende em azul; cada parada tem um marco, alternando os lados, na altura
   do número da seção. O cabeçalho se alinha ao lado do marco. */
.rota-cel { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.rota-cel path { fill: none; stroke-linecap: round; stroke-width: 3; stroke-dasharray: .1 11; }
.rota-cel__trilha { stroke: var(--azul-claro); opacity: .32; }
.rota-cel__feito { stroke: #5A90F5; opacity: 0; transition: opacity .5s ease; }
.rota-cel__feito.aceso { opacity: 1; }
.marco-cel {
  position: absolute; top: 0; width: 20px; height: 20px; margin-top: -10px; box-sizing: border-box; border-radius: 50%;
  background: var(--noite); border: 2px solid var(--azul-claro); transition: border-color .4s, box-shadow .4s;
}
.marco-cel::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--azul-claro); transition: background-color .4s; }
.marco-cel--esq { left: 14px; } .marco-cel--dir { right: 14px; }
.marco-cel.aceso { border-color: #fff; box-shadow: 0 0 0 6px rgb(90 144 245 / .2), 0 0 18px rgb(46 107 230 / .9); }
.marco-cel.aceso::after { background: #fff; }
[data-lado="esq"] :is(.secao-num, .cartao__titulo), [data-lado="esq"] .noticias__topo > div { padding-left: 36px; }
[data-lado="dir"] :is(.secao-num, .cartao__titulo), [data-lado="dir"] .noticias__topo > div { padding-right: 36px; text-align: right; }
[data-lado="dir"] .noticias__acoes { align-self: flex-end; }
@media (prefers-reduced-motion: reduce) { .rota-cel__feito, .marco-cel, .marco-cel::after { transition: none; } }

/* -------------------------------------------- a luz e o toque --
   A luz anda sobre a linha, na altura de leitura, atrás de tudo. Quando
   passa por trás de um cartão, ele reage como no mouse do computador: o
   neon (o brilho e o aro que seguem a bolinha) e o ícone faz o seu gesto.
   A seta fica quieta, para a atenção ir ao ícone (pedido do usuário). Um
   cartão por vez (portal.js §13).
   Com movimento reduzido, não há luz, e o cartão só acende. */
.luz-cel {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; z-index: 0; pointer-events: none;
  opacity: 0; background: #fff; box-shadow: 0 0 0 5px rgb(90 144 245 / .28), 0 0 22px 6px rgb(46 107 230 / .85); will-change: transform;
}
/* O neon (portal.js §13): no cartão tocado, um brilho em degradê por
   baixo do conteúdo, mais forte no ponto da bolinha, e um aro de luz na
   borda, mais forte perto dela (o aro é o mesmo degradê recortado na
   borda pela máscara). As peças andam só por transform; entram e saem
   pela opacidade. A borda azul e o halo de fora trocam sem animar, como no
   computador (animar a sombra redesenharia o cartão a cada quadro). */
.cartao .servico, .noticias-linha, .acesso__item { position: relative; isolation: isolate; }
/* as fichas dos capítulos têm o mesmo vidro escuro do acesso rápido (um
   reflexo claro no alto e o fio azul por dentro); opaco, para a linha da rota
   não aparecer através delas */
.noticias-linha, .acesso__item, .cartao .servico { background: #17294A; }
.brilho-cel, .aro-cel {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.brilho-cel { z-index: -1; }
.aro-cel {
  z-index: 2; padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.brilho-cel.on, .aro-cel.on { opacity: 1; }
.brilho-cel__miolo, .aro-cel__miolo { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.brilho-cel__miolo { width: 240px; height: 240px; margin: -120px 0 0 -120px; background: radial-gradient(closest-side, rgb(110 160 255 / .5), rgb(90 144 245 / .22) 45%, transparent); }
:is(.noticias-linha, .acesso__item, .cartao .servico) .brilho-cel__miolo { background: radial-gradient(closest-side, rgb(140 180 255 / .55), rgb(90 144 245 / .25) 45%, transparent); }
.aro-cel__miolo { width: 200px; height: 200px; margin: -100px 0 0 -100px; background: radial-gradient(closest-side, #fff, #8DB4FF 30%, rgb(46 107 230 / .7) 60%, transparent); }
:is(.noticias-linha, .acesso__item, .cartao .servico).tocado { box-shadow: inset 0 0 0 1px rgb(157 184 232 / .4), 0 0 22px rgb(46 107 230 / .45); }
/* O gesto do ícone: o mesmo do mouse no computador (pulo, giro, balanço…),
   mas feito pelo ícone inteiro, que o navegador anima sem recalcular nada;
   mover a peça dentro do desenho custava um layout do svg a cada quadro.
   A direção vem da peça marcada no desenho (.ic-g--*, src/icones-cor.mjs). */
@media (prefers-reduced-motion: no-preference) {
  html.celular :is(.cartao, .acesso__item) .ic-cor { transition: transform 300ms var(--curva); transition-delay: 0s; }
  html.celular .tocado .ic-cor { transform: translateY(-2px) rotate(-8deg) scale(1.08); }
  html.celular .tocado .ic-cor:has(.ic-g--sobe) { transform: translateY(-3px) scale(1.06); }
  html.celular .tocado .ic-cor:has(.ic-g--desce) { transform: translateY(3px) scale(1.06); }
  html.celular .tocado .ic-cor:has(.ic-g--gira) { transform: rotate(16deg) scale(1.06); }
  html.celular .tocado .ic-cor:has(.ic-g--balanca) { transform: rotate(-11deg) scale(1.06); }
  html.celular .tocado .ic-cor:has(.ic-g--direita) { transform: translateX(3px) scale(1.06); }
  html.celular .tocado .ic-cor:has(.ic-g--risca) { transform: translate(-2px, 2px) rotate(-6deg) scale(1.06); }
  html.celular .tocado .ic-cor:has(.ic-g--sai) { transform: translate(2px, -2px) scale(1.06); }
  html.celular .tocado .ic-cor:has(.ic-g--abre) { transform: rotate(-12deg) scale(1.06); }
  html.celular .tocado .ic-cor:has(.ic-g--cresce) { transform: scale(1.16); }
  html.celular .tocado .ic-cor:has(.ic-g--estica) { transform: scaleY(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .luz-cel { display: none; }
  .cartao .servico, .servico__ir, html.celular :is(.cartao, .acesso__item) .ic-cor { transition: none; }
}

/* --------------------------------------------------------- notícias --
   As 3 mais recentes em linhas (noticias.js, montarLista): a foto pequena,
   a etiqueta, o título e a data. Nada gira nem desliza para o lado. */
.noticias-capa { display: none !important; }
.noticias__falha { margin: 0; }
.noticias-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.noticias-linha {
  display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 16px; text-decoration: none; color: var(--creme);
  box-shadow: inset 0 0 0 1px rgb(157 184 232 / .16);
}
.noticias-linha:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
.noticias-linha__img { flex: none; width: 76px; height: 76px; overflow: hidden; border-radius: 11px; background: #0E2A5A; }
.noticias-linha__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.noticias-linha__corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.noticias-linha__t { font: 500 15.5px/1.3 var(--sc-font-text); }

/* ---------------------------------------------------- acesso rápido --
   Duas colunas de cartões opacos: o ícone no alto e o nome. */
.acesso__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acesso__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 108px; padding: 14px; border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgb(157 184 232 / .16);
}
.acesso__icone { width: 46px; height: 46px; border-radius: 12px; }
.acesso__icone svg { width: 31px; height: 31px; }
.acesso__nome { align-self: auto; font: 540 15.5px/1.2 var(--sc-font-text); letter-spacing: 0; }

/* -------------------------------------------------------- capítulos --
   O número, o título e todas as fichas, sempre à vista: fichas de papel,
   com o ícone colorido no selo e a seta. */
.cartao .servicos { display: grid; gap: 8px; margin: 0; }
.cartao .servico {
  min-height: 60px; gap: 12px; padding: 9px 10px 9px 9px; border: 0; border-radius: 14px; color: var(--creme);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / .015) 55%, transparent 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px rgb(157 184 232 / .16);
}
.cartao .servico__icone { width: 42px; height: 42px; border-radius: 11px; }
.cartao .servico__nome { font-size: 15px; color: var(--creme); }
.cartao .servico__ir { background: transparent; border-color: rgb(157 184 232 / .3); color: var(--azul-claro); }

/* os estados de chegada do computador (cascata, ícones que surgem) não
   valem aqui: tudo começa pronto, e quem desliza é o .entra (§13) */
html.celular :is(.cartao .servicos li, .acesso-painel .acesso__grade li, .rodape > *):not(.entra) { opacity: 1; transform: none; translate: none; transition: none; }
html.celular .cartao .ic-cor { opacity: 1; }

/* ------------------------------------------- entradas pelos lados --
   O cabeçalho de cada parada (número e título) chega do lado do marco,
   32 px, uma vez só (.entra → .visto, portal.js §13); os que entram
   juntos, um depois do outro (--i). Os cartões já estão no lugar. Com
   movimento reduzido, nada desliza. */
html.celular [data-sc-world-copy] .entra {
  opacity: 0; transform: translate3d(-32px, 0, 0); translate: none;
  transition: opacity .5s var(--curva), transform .6s var(--curva); transition-delay: calc(var(--i, 0) * 70ms);
}
html.celular [data-sc-world-copy] .entra--dir { transform: translate3d(32px, 0, 0); }
html.celular [data-sc-world-copy] .entra.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.celular [data-sc-world-copy] .entra { opacity: 1; transform: none; transition: none; }
}

/* sem JavaScript (nem a classe .celular): tudo à vista, listas abertas */
html:not(.celular) .cartao .servicos { display: grid; }
html:not(.celular) .cartao .servicos li, html:not(.celular) .acesso__grade li, html:not(.celular) .rodape > * { opacity: 1; transform: none; translate: none; }
html:not(.celular) .cartao .ic-cor { opacity: 1; transform: none; }

/* ----------------------------------------------------------- rodapé -- */
.rodape {
  display: block; margin-top: 1.4rem; overflow: visible; padding: 2.4rem 1.25rem calc(1.6rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--noite-luz), var(--noite) 60%, var(--noite-fundo));
}
.rodape__topo, .rodape__grade { grid-template-columns: 1fr; }
.rodape__lado { margin-top: 1rem; }
.rodape__h { font-size: clamp(2.3rem, 10vw, 3.2rem); }
.rodape__col--caps ol { columns: 1; }
.rodape__palavra { font-size: 30vw; margin-bottom: 0; }
.rodape__marca { flex-wrap: wrap; row-gap: .4rem; }