/* ============================================================================ MDC — Escolha de rota e legenda do mapa (infovia.css) ---------------------------------------------------------------------------- Reescrito em 18/09/2026, depois das duas queixas de 17/09. O QUE MUDOU E POR QUÊ A linha das rotas era um segundo nível de filtro: chips de 11,5px numa fileira secundária, dentro da moldura do mapa. Duas consequências: · dentro da moldura, ela empurrava o desenho para baixo. Como a moldura tem proporção fixa e corta o que sobra, quem saía era o norte — Roraima inteira, que é a Infovia 04. Foi a carta do Cel. Lustosa: "o mapa interativo não abre completamente, então há cidades que não aparecem, por exemplo, infovia 04". · sendo secundária e miúda, ninguém escolhia rota. E sem escolher rota o mapa tem 55 pontos de uma vez: medido, só 9 conseguiam mostrar o nome. Agora a escolha de rota é o assunto da seção. Fica ACIMA do mapa, fora da moldura, em botões de 15px — o piso de legibilidade que o CEO cobra. Com 4 a 27 pontos por vez em lugar de 55, todo nome cabe sem ninguém precisar aproximar, e o mapa se aproxima sozinho da rota escolhida (assets/js/zoom.js, enquadra()). Embaixo do mapa entra a legenda em texto, que NOMEIA as localidades da seleção. Duas cidades vizinhas nunca cabem as duas com etiqueta no desenho — Santa Maria do Boiaçu e Vila de Moura são o caso — mas cabem sempre escritas. Carregar depois do /assets/css/mapa.css. ========================================================================== */ /* a barra de programas é flex; a fileira de rotas é irmã dela e ocupa a largura toda para cair embaixo */ .pr-bar{flex-wrap:wrap} /* ── a fileira de rotas ──────────────────────────────────────────────────── */ .pr-ivchips{ width:100%;flex:0 0 100%; display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center; margin-top:16px; } /* Os botões moram num .pr-ivscroll, e não soltos na fileira. No computador isso não muda nada — ele é um flex que quebra linha igual a antes. No celular ele vira uma fileira só, rolável, e o rótulo fica de fora dela. */ /* `flex: 1 1 0` e não `1 1 auto`: com base automática o navegador mede a largura de todos os botões somados, conclui que não cabem ao lado do rótulo e joga a caixa inteira para a linha de baixo — o "POR ROTA" ficava sozinho e centralizado numa linha só dele. Com base zero ele fica onde deve, à esquerda, e a quebra acontece dentro da caixa. */ .pr-ivscroll{ display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center; flex:1 1 0;min-width:0; } .pr-chips > .pr-ivscroll{gap:8px} /* fio separando os dois níveis */ .pr-ivchips::before{ content:'';flex:0 0 100%;height:1px;margin-bottom:15px; background:linear-gradient(90deg,transparent 22%,rgba(255,255,255,.14) 50%,transparent 78%); } .pr-ivlabel{ flex:0 0 100%;text-align:center; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.6rem;font-weight:600;letter-spacing:2.6px;text-transform:uppercase; color:rgba(226,232,240,.34);margin:0 0 10px; } /* O botão de rota, em 15px. O `!important` é necessário: o legibilidade.css carrega depois e trava .pr-chip em 12px — o certo para os chips de programa, que são pequenos e secundários, e o errado aqui, onde está a navegação principal da seção. */ /* gap:0 e os respiros dados um a um. O botão é um flex container, e num flex container cada filho é um item: o espaço que existe no texto " · Rio Branco" some, e um `gap` valeria igual para a bolinha, para o nome do rio e para o número — três distâncias que precisam ser diferentes. */ .pr-ivchips .pr-chip{ display:inline-flex;align-items:center;gap:0; padding:11px 17px;border-radius:12px; font-size:.9375rem!important;font-weight:600;line-height:1.25; transition:background .28s ease,border-color .28s ease,color .28s ease,opacity .28s ease; } .pr-ivchips .pr-chip::before{margin-right:9px} .pr-ivchips .pr-chip .pr-chip-t, .pr-ivchips .pr-chip .pr-chip-r{font-size:.9375rem!important} .pr-ivchips .pr-chip .pr-chip-r{margin-left:.32em} .pr-chip .pr-chip-n{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.8125rem!important;font-weight:700;margin-left:10px; padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.1); color:rgba(226,232,240,.66);line-height:1.5; } .pr-chip.active .pr-chip-n{background:rgba(255,255,255,.2);color:#fff} /* rota de outro programa: apagada, mas continua clicável — e clicar troca o programa junto */ .pr-ivchips .pr-chip.pr-fora{opacity:.42} .pr-ivchips .pr-chip.pr-fora:hover, .pr-ivchips .pr-chip.pr-fora:focus-visible{opacity:1} /* nas páginas de projeto a fileira é a única: não precisa do fio */ .pr-ivchips.pr-ivsolo{margin-top:0;margin-bottom:20px} .pr-ivchips.pr-ivsolo::before{display:none} /* ── a legenda em texto, embaixo do mapa ─────────────────────────────────── */ /* largura cheia e não encolhida ao texto: o .container da seção é flex, e sem isto a caixa mudava de largura a cada rota escolhida — o bloco pulava de tamanho a cada clique */ .pr-ivcap{ width:100%;align-self:stretch;box-sizing:border-box; margin:16px auto 0;padding:15px 20px;border-radius:14px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); } .pr-ivcap em{ display:block;font-style:normal; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.8125rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase; color:rgba(191,219,254,.74);margin-bottom:5px; } .pr-ivcap p{ margin:0;font-size:.9375rem;line-height:1.6; color:rgba(226,232,240,.8); } .pr-ivcap p b{color:#fff;font-weight:700} /* ── celular ───────────────────────────────────────────────────────────── Medido em 18/09/2026 num telefone de 390x844: os quinze botões, quebrando linha, ocupavam 438px e o mapa só começava a 655px do topo da seção. Ou seja: a pessoa abria a seção "Onde estamos presentes" e via uma parede de botões, tendo de rolar para chegar no mapa. Cada nível passa a ser UMA fileira que rola na horizontal, com o rótulo acima dela. O corte do último botão na borda direita é o que avisa que há mais para o lado — por isso o respiro à direita é menor que o da esquerda, e por isso o gradiente de sumiço na borda. O nome do rio sai do botão: "Infovia 03 · Foz do Rio Amazonas" sozinho é mais largo que a tela. Ele continua no `title` e, o que importa de fato, na legenda embaixo do mapa. */ @media (max-width:768px){ /* O seletor precisa ser longo: o