/* ============================================================ GUIAS POR CIDADE — complemento de css/styles.css + cidades-seo.css Todas as regras deste arquivo são escopadas em `.page-cidade` (classe no das 6 páginas municipais e do hub cidades.html). Nenhum token é redefinido e nenhuma regra global é sobrescrita: as demais páginas do site não são afetadas por este arquivo. Direção: a mesma já validada em Goiânia e na home — navy #0b1320 / latão #b8960c / osso #f0ebe2, Cormorant + DM Sans. Sem cores novas, sem fontes novas. O eixo desta família de páginas é diferente do de Goiânia. Ali o assunto era "qual é o meu caso"; aqui é "em que ponto do processo municipal eu estou" e "de quando é esse número". Por isso as duas decisões estruturais deste arquivo: o índice do hero triado por etapa do processo, e o tratamento dos dados locais como registro datado — não como painel de indicadores. ============================================================ */ /* ============================================================ 0. DESTINO DAS ÂNCORAS O cabeçalho é fixo (72px) e nada no site define scroll-margin. Todo link interno — o índice "Nesta página", as chamadas de fonte [1] [2] [3], o botão "Ver canais oficiais" — aterrissava atrás do cabeçalho. Correção escopada nestas páginas. ============================================================ */ .page-cidade [id] { scroll-margin-top: 96px } /* ============================================================ 1. MEDIDA DE LEITURA O split 1fr/1fr padrão deixa o artigo com ~60 caracteres por linha e a coluna lateral larga demais para o que ela carrega. O artigo passa a ~74 caracteres e a lateral vira um trilho. `1fr` equivale a `minmax(auto,1fr)`: a coluna não encolhe abaixo do min-content do que está dentro dela. O `minmax(0,…)` somado ao `min-width:0` abaixo é a trava que impede qualquer conteúdo largo (tabela, bloco de código, palavra sem quebra) de gerar rolagem horizontal no celular. ============================================================ */ .page-cidade .content-split { grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; } .page-cidade .article-content { min-width: 0 } .page-cidade .article-content .table-wrap { max-width: 100% } /* ============================================================ 2. HERO — índice por etapa do processo O hero interno é uma coluna só, o que deixa metade da tela vazia no desktop, e o par hero + primeira seção somava ~190px de ar morto. A segunda coluna recebe a pergunta que a família realmente faz ao chegar numa página municipal: não "qual é o meu direito", mas "em que ponto eu estou". Cadastro, espera, oferta inviável e ausência de resposta são as quatro etapas do procedimento, e cada linha leva direto ao trecho que trata dela. ============================================================ */ .page-cidade .page-hero { padding-bottom: 52px } .page-cidade .page-hero + .section { padding-top: 72px } .page-cidade .hero-cidade-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; align-items: start; } .page-cidade .hero-cidade-text { animation: fadeUp .8s ease both } .page-cidade .hero-cidade-text .lead { max-width: 560px } .page-cidade .stage-card { background: var(--bg-card); border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: 28px 30px 8px; animation: fadeIn 1s ease both; animation-delay: .25s; } .page-cidade .stage-label { font-family: var(--body); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 500; color: var(--gold); margin: 0 0 4px; } .page-cidade .stage-list { display: block; margin: 0; padding: 0; list-style: none } .page-cidade .stage-list li { border-top: 1px solid var(--line) } .page-cidade .stage-list li:first-child { border-top: 0 } .page-cidade .stage-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 15px 0; font-size: 15px; line-height: 1.45; color: var(--text-2); transition: color .2s; } .page-cidade .stage-list a::after { content: "→"; color: var(--gold); flex-shrink: 0; transform: translateX(0); transition: transform .2s; } .page-cidade .stage-list a:hover { color: var(--text) } .page-cidade .stage-list a:hover::after { transform: translateX(4px) } /* ============================================================ 3. RESPOSTA CURTA É o parágrafo que responde à pergunta do título e o único que parte do público lê inteiro. Estava em corpo de 16px, igual ao resto. Recebe a face de display e contraste cheio — nenhum outro ornamento. ============================================================ */ .page-cidade .article-content .answer-box { padding: 30px 34px; border-left: 2px solid var(--gold); } .page-cidade .article-content .answer-box .answer-label { margin-bottom: 14px } .page-cidade .article-content .answer-box p:not(.answer-label) { font-family: var(--head); font-size: clamp(19px, 1.85vw, 23px); line-height: 1.45; font-weight: 500; color: var(--text); } /* ============================================================ 4. ÍNDICE DA PÁGINA Seis itens sublinhados viravam uma faixa cinza. Viram marcadores discretos, com o tique em latão no lugar do sublinhado. ============================================================ */ .page-cidade .article-index { gap: 6px 22px; padding: 18px 0; margin-bottom: 44px; } .page-cidade .article-index strong { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--gold); margin-bottom: 10px; } .page-cidade .article-index a { text-decoration: none; position: relative; padding-left: 13px; color: var(--text-2); transition: color .2s; } .page-cidade .article-index a::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--gold); transition: width .2s; } .page-cidade .article-index a:hover { color: var(--text) } .page-cidade .article-index a:hover::before { width: 9px } /* ============================================================ 5. DADOS LOCAIS — o elemento-assinatura da família Três números municipais em caixas iguais, com o número grande em latão, é o painel de indicadores padrão: comemora a cifra e esconde a procedência. Só que nestas páginas o número não é uma conquista — é um retrato de uma data, atribuído a uma fonte, e a ressalva que vem logo abaixo diz exatamente isso. As caixas caem. Cada dado vira uma linha de registro: a cifra à direita da própria coluna, o que ela mede e de quando é ao lado, filete embaixo. A nota de atualização deixa de ser um aviso solto e passa a fechar o registro, encostada nele. ============================================================ */ .page-cidade .article-content .local-stats { display: block; margin: 30px 0 0; border-top: 1px solid var(--line-2); } .page-cidade .article-content .local-stat { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: baseline; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 17px 0; transition: background .25s; } .page-cidade .article-content .local-stat:hover { background: rgba(184,150,12,.04) } .page-cidade .article-content .local-stat strong { font-family: var(--head); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; color: var(--gold); line-height: 1; text-align: right; letter-spacing: -.01em; } .page-cidade .article-content .local-stat span { font-size: 15px; color: var(--text-2); line-height: 1.6; } .page-cidade .article-content .data-warning { margin: 0 0 14px; padding: 14px 0 0; background: none; border: 0; font-size: 13px; line-height: 1.75; } /* ============================================================ 6. NOTAS LOCAIS (renovação, rede contratada, regionais…) Não são "features" nem passos: são termos e ressalvas que a família vai encontrar nos canais do município e precisa decodificar. Tratadas como verbete — termo, filete, definição. ============================================================ */ .page-cidade .article-content .local-cards { display: block; margin-top: 30px; border-top: 1px solid var(--line-2); } .page-cidade .article-content .local-card { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 30px; align-items: start; background: none; border-top: 0; border-bottom: 1px solid var(--line); padding: 20px 0; transition: background .25s; } .page-cidade .article-content .local-card:hover { background: rgba(184,150,12,.04) } .page-cidade .article-content .local-card h3 { margin: 0; font-size: 20px; color: var(--text); line-height: 1.25; position: relative; padding-left: 17px; } .page-cidade .article-content .local-card h3::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 1px; background: var(--gold); } .page-cidade .article-content .local-card p { margin: 0; padding-top: 2px; font-size: 15px } /* ============================================================ 7. PASSOS DO PROCEDIMENTO Aqui a numeração não é decorativa: cadastro, preenchimento, preferências e convocação acontecem nessa ordem, e a ordem é informação. O que muda é só o peso do marcador. ============================================================ */ .page-cidade .steps-list { padding-left: 26px; gap: 12px } .page-cidade .steps-list li::marker { color: var(--gold); font-family: var(--head); font-size: 18px; font-weight: 600; } /* ============================================================ 8. CHAMADAS DE FONTE E LISTA DE FONTES Bug real: as chamadas no texto são [1] [2] [3] e apontam para #fonte-1, #fonte-2, #fonte-3 — mas a lista de destino estava com `list-style:none`, então chegava sem número nenhum. Quem clicava em [2] caía numa lista sem como conferir qual item era o 2. A numeração é restituída, o marcador vai para o latão e o item alvo se acende ao receber o foco da âncora. ============================================================ */ .page-cidade .article-content sup a { text-decoration: none; font-size: 11px; letter-spacing: .03em; border-bottom: 1px solid var(--gold-soft); transition: border-color .2s; } .page-cidade .article-content sup a:hover { border-bottom-color: var(--gold) } .page-cidade .sources-section { margin-top: 56px; padding-top: 32px; border-top-color: var(--line-2); } .page-cidade .source-list { list-style: decimal; padding-left: 24px; margin-top: 18px; gap: 14px; } .page-cidade .source-list li { display: list-item; padding: 2px 0; color: var(--text-2); line-height: 1.7; } .page-cidade .source-list li::marker { color: var(--gold); font-weight: 500 } .page-cidade .source-list li > span { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mut); } .page-cidade .source-list li:target { background: var(--bg-card-2); box-shadow: 0 0 0 8px var(--bg-card-2); } /* ============================================================ 9. AUTORIA Segundo bug real: o rótulo "Autoria e revisão jurídica" usa a classe .answer-label, mas o estilo dela está escopado em `.answer-box` no cidades-seo.css — dentro do .author-box o rótulo caía como texto corrido. E o

do bloco herdava o tamanho de título de seção (até 34px), competindo com os h2 reais da página. ============================================================ / .page-cidade .author-box { border-left-width: 2px } .page-cidade .author-box .answer-label { text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 500; color: var(--gold); margin: 0 0 8px; } .page-cidade .author-box h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; } / ============================================================ 10. AVISOS E LIMITES ============================================================ / .page-cidade .callout { padding: 24px 28px; border-left-width: 2px } / ============================================================ 11. FAQ O mecanismo de abrir/fechar é o mesmo (js/main.js alterna apenas a classe .open). Muda só a superfície: pergunta maior, respiro maior, e uma barra em latão marcando o item aberto. ============================================================ / .page-cidade .faq-item { border-top-color: var(--line-2); padding-left: 0; border-left: 2px solid transparent; transition: border-color .25s, padding-left .25s; } .page-cidade .faq-item.open { border-left-color: var(--gold); padding-left: 22px; } .page-cidade .faq-question { padding: 26px 0 } .page-cidade .faq-question > span:first-child { font-size: 21px; line-height: 1.28; transition: color .2s; } .page-cidade .faq-question:hover > span:first-child { color: var(--gold) } .page-cidade .faq-item.open .faq-question > span:first-child { color: var(--text) } .page-cidade .faq-answer { padding-bottom: 28px; max-width: 62ch } .page-cidade .faq-answer p { font-size: 15px } .page-cidade .faq-item.open .faq-answer { animation: cidFaqIn .28s ease both } @keyframes cidFaqIn { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } } / ============================================================ 12. TRILHO LATERAL ============================================================ / .page-cidade .side-box { padding: 30px 28px } .page-cidade .side-box h3 { font-size: 12px; font-family: var(--body); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .page-cidade .side-box hr { margin: 26px 0 } .page-cidade .official-links a { display: inline-block; border-bottom: 1px solid transparent; transition: border-color .2s; } .page-cidade .official-links a:hover { border-bottom-color: var(--gold) } / ============================================================ 13. HUB (cidades.html) A página é curta e só tem um trabalho: levar a família à cidade certa. Os cartões perdem a moldura invisível (fundo igual ao da página) e passam a ser separados por filete, como as áreas da home. Dentro de cada um, o dado municipal com data assume o mesmo tratamento de registro usado nas páginas de cidade — é o que diferencia um guia local de um texto genérico. ============================================================ / .page-cidade .narrow-intro .answer-box { border-left: 2px solid var(--gold); padding: 26px 30px; } .page-cidade .narrow-intro .answer-box p:not(.answer-label) { font-size: 15px } .page-cidade .city-guides-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--gold-line); margin-top: 44px; } .page-cidade .city-guide-card { position: relative; background: var(--bg); border-top: 0; padding: 34px 30px 30px; } .page-cidade .city-guide-card::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--gold); transition: width .35s ease; } .page-cidade .city-guide-card:hover::before { width: 100% } .page-cidade .city-guide-card .eyebrow { font-size: 10px; letter-spacing: .16em; margin-bottom: 14px; } .page-cidade .city-guide-card .eyebrow::before { width: 20px } .page-cidade .city-guide-card h2 { font-size: 30px; margin: 0 0 10px } .page-cidade .city-card-fact { margin: 18px 0 18px !important; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-mut); line-height: 1.6; } .page-cidade .city-card-fact strong { display: block; font-family: var(--head); font-size: 32px; font-weight: 600; color: var(--gold); line-height: 1; margin-bottom: 6px; letter-spacing: -.01em; } .page-cidade .text-link { text-decoration: none; border-bottom: 1px solid var(--gold-soft); transition: border-color .2s, color .2s; } .page-cidade .text-link:hover { border-bottom-color: var(--gold) } / Critério editorial — três colunas separadas por filete, na largura cheia do container, onde a medida comporta. / .page-cidade .city-method .local-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 34px; border-top: 1px solid var(--gold-line); } .page-cidade .city-method .local-card { background: none; border-top: 0; border-left: 1px solid var(--line); padding: 26px 34px 4px; } .page-cidade .city-method .local-card:first-child { border-left: 0; padding-left: 0 } .page-cidade .city-method .local-card h3 { font-size: 21px; margin-bottom: 12px; color: var(--text); line-height: 1.25; } .page-cidade .city-method .local-card p { font-size: 15px; line-height: 1.75 } / ============================================================ 14. RESPONSIVO ============================================================ / @media (max-width: 1024px) { .page-cidade .hero-cidade-grid { grid-template-columns: 1fr; gap: 44px } .page-cidade .stage-card { max-width: 520px } .page-cidade .content-split { grid-template-columns: minmax(0, 1fr); gap: 56px } .page-cidade .city-method .local-cards { grid-template-columns: 1fr 1fr } .page-cidade .city-method .local-card:nth-child(odd) { border-left: 0; padding-left: 0 } } @media (max-width: 760px) { .page-cidade .article-content .local-stat { grid-template-columns: 118px minmax(0, 1fr); gap: 20px } } @media (max-width: 640px) { .page-cidade .article-content .answer-box { padding: 24px 22px } .page-cidade .narrow-intro .answer-box { padding: 22px 20px } .page-cidade .article-index { gap: 4px 18px } .page-cidade .faq-item.open { padding-left: 16px } .page-cidade .faq-question > span:first-child { font-size: 19px } / Registro de dados e verbetes empilham: a cifra passa a abrir a linha, o rótulo vem embaixo. O público destas páginas é majoritariamente móvel. */ .page-cidade .article-content .local-stat { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; } .page-cidade .article-content .local-stat strong { text-align: left } .page-cidade .article-content .local-card { grid-template-columns: 1fr; gap: 8px } .page-cidade .city-guide-card { padding: 28px 22px 26px } .page-cidade .city-method .local-cards { grid-template-columns: 1fr; border-top: 0 } .page-cidade .city-method .local-card, .page-cidade .city-method .local-card:first-child, .page-cidade .city-method .local-card:nth-child(odd) { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 4px; } } @media (prefers-reduced-motion: reduce) { .page-cidade .hero-cidade-text, .page-cidade .stage-card { animation: none } }