/* =========================================================
   Prefeitura de Saquarema — prévia do novo site
   Identidade: Faixa Institucional · Fonte: Gilroy
   ========================================================= */

@font-face { font-family: 'Gilroy'; src: url('../fontes/gilroy-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fontes/gilroy-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fontes/gilroy-bold.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fontes/gilroy-heavy.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

:root {
  --azul: #1F4E8C;
  --azul-noite: #143563;
  --azul-logo: #3470B0;
  --azul-claro: #E7EEF7;
  --verde: #1E7A45;
  --verde-claro: #E4F2EA;
  --amarelo: #ECD90C;
  --amarelo-claro: #FBF6C9;
  --amarelo-texto: #5E5600;
  --coral: #B4441E;
  --coral-claro: #FCE6DC;
  --nevoa: #F3F5F8;
  --tinta: #142033;
  --tinta-suave: #4B5869;
  --linha: #DCE2EA;
  --branco: #FFFFFF;
  --foco: #ECD90C;
  --raio: 10px;
  --largura: 1240px;
  --sombra: 0 1px 2px rgba(20,53,99,.06), 0 8px 24px rgba(20,53,99,.08);
  --escala-fonte: 1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: calc(100% * var(--escala-fonte)); scroll-behavior: smooth; }
body { font-family: 'Gilroy', 'Segoe UI', system-ui, sans-serif; font-size: 1.125rem; line-height: 1.6; color: var(--tinta); background: var(--branco); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.15; color: var(--azul-noite); }
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }
a { color: var(--azul); text-underline-offset: 3px; }
a:hover { color: var(--azul-noite); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.ic { width: 1.5rem; height: 1.5rem; flex: none; }
.ic-p { width: 1.125rem; height: 1.125rem; flex: none; }
.container { width: min(var(--largura), 100% - 2rem); margin-inline: auto; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* foco sempre visível */
:focus-visible { outline: 4px solid var(--foco); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 7px var(--azul-noite); }
/* com mouse ou toque o contorno some; pelo teclado ele volta (js/acessibilidade.js) */
html.usando-mouse :focus-visible { outline: none; box-shadow: none; }
html.usando-mouse .busca:focus-within form { box-shadow: 0 18px 40px rgba(9,26,52,.28); }

/* faixa tricolor (assinatura da identidade) */
.faixa-tricolor { display: flex; height: 6px; }
.faixa-tricolor span:nth-child(1) { flex: 55; background: var(--verde); }
.faixa-tricolor span:nth-child(2) { flex: 18; background: var(--amarelo); }
.faixa-tricolor span:nth-child(3) { flex: 27; background: var(--azul-logo); }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 8px; padding: .75rem 1.25rem; font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; min-height: 48px; white-space: nowrap; transition: background .15s, transform .15s; }
.botao-verde { background: var(--verde); color: #fff; }
.botao-verde:hover { background: #17633A; color: #fff; }
.botao-azul { background: var(--azul-noite); color: #fff; }
.botao-azul:hover { background: #0E2748; color: #fff; }
.botao-linha { border-color: var(--azul); color: var(--azul); background: #fff; }
.botao-linha:hover { background: var(--azul-claro); }
.botao-amarelo { background: var(--amarelo); color: var(--tinta); }

/* =========================================================
   Barra de acessibilidade
   ========================================================= */
.barra-acessibilidade { background: var(--azul-noite); color: #fff; font-size: .9rem; }
.barra-acessibilidade .container { display: flex; justify-content: space-between; align-items: center; min-height: 42px; gap: 1rem; flex-wrap: wrap; }
.atalhos, .ferramentas { display: flex; align-items: center; gap: 1rem; list-style: none; flex-wrap: wrap; }
.barra-acessibilidade a, .barra-acessibilidade button { color: #fff; text-decoration: none; background: none; border: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem 0; font-size: .9rem; }
.barra-acessibilidade a:hover, .barra-acessibilidade button:hover { text-decoration: underline; }
.atalhos kbd { font-family: inherit; font-size: .75rem; background: rgba(255,255,255,.18); border-radius: 4px; padding: 0 .35rem; }
.botao-fonte { border: 1px solid rgba(255,255,255,.45) !important; border-radius: 6px; padding: .1rem .5rem !important; font-weight: 700; }
.divisor { width: 1px; height: 18px; background: rgba(255,255,255,.3); }

/* atalhos escondidos: aparecem no alto da tela quando a pessoa usa o Tab */
.pular-links a { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--amarelo); color: var(--tinta); font-weight: 700; padding: .7rem 1.1rem; border-radius: 8px; text-decoration: none; }
.pular-links a:focus { top: 1rem; }

/* =========================================================
   Botão flutuante de acessibilidade (canto inferior direito)
   ========================================================= */
.acessibilidade-flutuante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.botao-acessibilidade { width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff; background: var(--azul-noite); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(20,53,99,.35); transition: transform .15s; }
.botao-acessibilidade .ic { width: 1.9rem; height: 1.9rem; }
.botao-acessibilidade:hover { transform: scale(1.06); }
.botao-acessibilidade[aria-expanded="true"] { background: var(--azul); }
.painel-acessibilidade { width: 320px; background: #fff; border-radius: 14px; border: 1px solid var(--linha); box-shadow: 0 20px 50px rgba(20,53,99,.25); padding: 1.1rem 1.2rem 1rem; position: relative; overflow: hidden; }
.painel-acessibilidade::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--verde) 0 55%, var(--amarelo) 55% 73%, var(--azul-logo) 73% 100%); }
.painel-acessibilidade[hidden] { display: none; }
.titulo-painel { font-weight: 800; font-size: 1.1rem; color: var(--azul-noite); margin: .2rem 0 .6rem; }
.linha-ajuste > span:first-child { white-space: nowrap; }
.linha-ajuste { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--linha); font-size: .98rem; }
.controle-fonte { display: inline-flex; align-items: center; gap: .35rem; }
.controle-fonte button { width: 40px; height: 36px; border-radius: 8px; border: 2px solid var(--azul); background: #fff; color: var(--azul); font-weight: 800; }
.controle-fonte button:hover { background: var(--azul-claro); }
.controle-fonte output { min-width: 3.2rem; text-align: center; font-weight: 700; font-size: .92rem; color: var(--tinta-suave); }
.chave { width: 52px; height: 30px; border-radius: 99px; border: 0; background: #C5CFDB; position: relative; flex: none; }
.bolinha-chave { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.chave[aria-pressed="true"] { background: var(--verde); }
.chave[aria-pressed="true"] .bolinha-chave { left: 25px; }
.painel-acessibilidade { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.opcao-acesso { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: .75rem; width: 100%; padding: .6rem .75rem; margin: .1rem 0 .35rem; border: 1px solid var(--linha); border-radius: 10px; background: #fff; text-align: left; color: var(--azul-noite); }
.opcao-acesso[hidden] { display: none; }
.opcao-acesso .icone-opcao { width: 40px; height: 40px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; }
.opcao-acesso strong { display: block; font-size: 1rem; }
.opcao-acesso small { display: block; font-size: .8rem; color: var(--tinta-suave); line-height: 1.35; }
.opcao-acesso:hover { border-color: var(--azul); background: var(--azul-claro); }
.opcao-acesso:hover .icone-opcao { background: #fff; }

/* ouvir esta página, dentro do menu */
.ouvir { display: grid; gap: .55rem; padding: .8rem 0 .2rem; border-bottom: 1px solid var(--linha); }
.ouvir[hidden] { display: none; }
.ouvir-titulo { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--azul-noite); }
.ouvir-titulo .ic-p { color: var(--azul); }
.ouvir-estado { font-size: .82rem; color: var(--tinta-suave); line-height: 1.4; }
.ouvir-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ouvir-acao { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 42px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--azul-noite); font-weight: 700; font-size: .9rem; }
.ouvir-acao:hover:not(:disabled) { border-color: var(--azul); background: var(--azul-claro); }
.ouvir-acao:disabled { opacity: .45; cursor: not-allowed; }
.ouvir-velocidade { display: grid; gap: .25rem; font-size: .82rem; font-weight: 700; color: var(--tinta-suave); padding-bottom: .6rem; }
.ouvir-velocidade select { min-height: 40px; padding: .35rem .6rem; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--azul-noite); font-size: .9rem; }

/* lendo em voz alta: o botão redondo fica amarelo */
.botao-acessibilidade.ativo { background: var(--amarelo); color: var(--tinta); border-color: var(--azul-noite); }

/* recolhido: alguns segundos depois de abrir a página, o botão desliza para a
   borda e fica só uma ponta à mostra; volta inteiro com o mouse, o Tab ou ao abrir */
.botao-acessibilidade { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, background-color .15s; }
.acessibilidade-flutuante.recolhido .botao-acessibilidade { transform: translateX(calc(100% + 1.25rem - 12px)); opacity: .92; transition: transform .7s cubic-bezier(.65, 0, .35, 1), opacity .5s ease, background-color .15s; }
.acessibilidade-flutuante.recolhido .botao-acessibilidade:hover,
.acessibilidade-flutuante.recolhido .botao-acessibilidade:focus-visible { transform: none; opacity: 1; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, background-color .15s; }

/* o botão próprio do VLibras fica escondido: quem abre é a opção "Libras" do menu */
#vlibras-access-wrapper, [vw-access-button] { display: none !important; }

.dica-painel { font-size: .85rem; color: var(--tinta-suave); margin-top: .7rem; line-height: 1.45; }
.link-painel { display: inline-block; margin-top: .55rem; font-weight: 700; font-size: .95rem; }

/* =========================================================
   Cabeçalho
   ========================================================= */
.cabecalho { background: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--linha); }
/* Os links do menu (#transparencia, #prefeitura...) param logo abaixo do cabeçalho fixo, e não escondidos atrás dele.
   --altura-cabecalho é atualizada pelo app.js quando o cabeçalho muda de tamanho (tela, fonte maior). */
main > section[id] { scroll-margin-top: var(--altura-cabecalho, 90px); }
.cabecalho-linha { display: flex; align-items: center; gap: 1.25rem; min-height: 84px; }
.marca img { height: 54px; width: auto; }
.menu-principal { margin-left: auto; }
.menu-principal > ul { display: flex; gap: .25rem; list-style: none; }
.menu-principal a, .menu-principal button.abre-sub { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: 1rem; text-decoration: none; color: var(--tinta); padding: .6rem .8rem; border-radius: 8px; background: none; border: 0; }
.menu-principal a:hover, .menu-principal button.abre-sub:hover, .menu-principal button.abre-sub[aria-expanded="true"] { background: var(--azul-claro); color: var(--azul); }
.menu-principal .ic-p { transition: transform .2s; }
.menu-principal button[aria-expanded="true"] .ic-p { transform: rotate(180deg); }
.item-com-sub { position: relative; }
.submenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-30%); width: 680px; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(20,53,99,.18); border: 1px solid var(--linha); padding: 1.25rem; display: none; }
.submenu.aberto { display: block; }
.submenu-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; list-style: none; }
.submenu-grade a { display: flex; gap: .6rem; align-items: center; font-weight: 500; padding: .55rem .6rem; }
.submenu-grade a .ic { color: var(--verde); width: 1.3rem; height: 1.3rem; }
.submenu-rodape { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--linha); display: flex; justify-content: space-between; font-size: .95rem; }
.botao-menu-celular { display: none; margin-left: auto; background: var(--azul-noite); color: #fff; border: 0; border-radius: 10px; width: 48px; height: 48px; place-items: center; }

/* =========================================================
   Topo (hero) com a paisagem
   ========================================================= */
.hero { position: relative; background: var(--azul); color: #fff; }
.hero:focus-within { z-index: 6; }
.busca input:focus-visible { outline: none; box-shadow: none; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 420px at 85% 10%, rgba(255,255,255,.10), transparent 60%); pointer-events: none; }
/* a paisagem tem proporção 1440 x 300: a altura cresce com a largura da tela para o desenho não ser cortado em cima
   (até 460px, que cobre telas de até ~2200px). Os 60px de cima do quadro são céu e podem ficar atrás do texto. */
.hero { --altura-paisagem: clamp(260px, 20.84vw, 460px); }
.hero .container { position: relative; z-index: 3; padding: 3.5rem 0 max(15rem, calc(var(--altura-paisagem) - 60px)); }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 24ch; }
.hero .apoio { font-size: 1.2rem; color: #DCE6F3; margin-top: .75rem; max-width: 46ch; }
.busca { margin-top: 1.75rem; position: relative; max-width: 700px; }
.busca form { display: flex; align-items: center; background: #fff; border-radius: 10px; padding: .4rem .4rem .4rem 1.1rem; gap: .75rem; box-shadow: 0 18px 40px rgba(9,26,52,.28); }
.busca form .ic { color: var(--verde); }
.busca input { flex: 1; border: 0; outline: 0; font-size: 1.2rem; color: var(--tinta); background: transparent; min-width: 0; padding: .55rem 0; }
.busca input::placeholder { color: #6A7584; font-style: italic; }
.busca:focus-within form { box-shadow: 0 0 0 4px var(--foco), 0 18px 40px rgba(9,26,52,.28); }
.mais-acessados { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .95rem; }
.mais-acessados strong { color: #DCE6F3; margin-right: .25rem; }
.mais-acessados a { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; padding: .3rem .85rem; font-weight: 700; }
.mais-acessados a:hover { background: rgba(255,255,255,.14); color: #fff; }

/* sugestões da busca */
.sugestoes { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; color: var(--tinta); border-radius: 12px; box-shadow: 0 24px 60px rgba(9,26,52,.3); overflow: hidden; z-index: 20; display: none; }
.sugestoes.aberta { display: block; }
.resposta-rapida { background: var(--verde-claro); padding: 1rem 1.25rem; border-bottom: 1px solid var(--linha); }
.resposta-rapida .rotulo { display: inline-flex; gap: .35rem; align-items: center; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.resposta-rapida h3 { font-size: 1.2rem; margin: .35rem 0 .25rem; }
.resposta-rapida p { font-size: 1rem; color: var(--tinta-suave); }
.resposta-rapida .botao { margin-top: .75rem; min-height: 42px; padding: .5rem 1rem; }
.lista-sugestoes { list-style: none; max-height: 320px; overflow: auto; }
.lista-sugestoes a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1.25rem; text-decoration: none; color: var(--tinta); border-bottom: 1px solid var(--linha); }
.lista-sugestoes a:hover, .lista-sugestoes a.selecionada { background: var(--azul-claro); }
.lista-sugestoes small { display: block; color: var(--tinta-suave); font-size: .85rem; }
.lista-sugestoes mark { background: #FFF1A8; color: inherit; border-radius: 3px; }
.sem-resultado { padding: 1rem 1.25rem; color: var(--tinta-suave); font-size: 1rem; }

/* paisagem calma */
.paisagem { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--altura-paisagem); pointer-events: none; overflow: hidden; }
.paisagem svg { width: 100%; height: 100%; display: block; }
/* vida na paisagem: tudo devagar; com "reduzir movimento" a regra geral abaixo deixa a cena parada */
.paisagem .nuvem, .paisagem .coqueiro, .paisagem .sol-brilho { transform-box: fill-box; }
.nuvem { animation: nuvem-anda 38s ease-in-out infinite alternate; }
.nuvem-2 { animation-duration: 52s; animation-direction: alternate-reverse; }
.nuvem-3 { animation-duration: 64s; }
.coqueiro { animation: coqueiro-balanca 6s ease-in-out infinite; transform-origin: 0% 100%; }
.coqueiro-2 { animation-duration: 7.5s; animation-delay: -2s; transform-origin: 100% 100%; }
.sol-brilho { animation: sol-pulsa 6s ease-in-out infinite; transform-origin: center; }
.brilho-mar { animation: brilha 3.2s ease-in-out infinite; }
.espuma { animation: brilha 2.6s ease-in-out infinite; }
@keyframes nuvem-anda { from { transform: translateX(0); } to { transform: translateX(-46px); } }
@keyframes coqueiro-balanca { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.8deg); } }
@keyframes sol-pulsa { 0%, 100% { transform: scale(1); opacity: .14; } 50% { transform: scale(1.08); opacity: .22; } }
@keyframes brilha { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.onda-lenta { animation: deriva 26s ease-in-out infinite alternate; }
.onda-lenta-2 { animation: deriva 34s ease-in-out infinite alternate-reverse; }
.gaivota { animation: planar 9s ease-in-out infinite; }
.veleiro { animation: balancar 7s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; }
@keyframes deriva { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes planar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes balancar { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
/* movimento reduzido: vale quando o aparelho pede "reduzir movimento" ou quando a pessoa desliga
   as animações no painel de acessibilidade (classe colocada pelo acessibilidade.js) */
html.movimento-reduzido *, html.movimento-reduzido *::before, html.movimento-reduzido *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* o quadro do assunto ainda avisa a troca, só que sem deslizar: a borda brilha, a faixa se desenha e os serviços aparecem um por um */
html.movimento-reduzido .painel-assunto.destacado { animation: painel-brilha 1s ease-out !important; }
html.movimento-reduzido .painel-assunto.destacado::before { animation: faixa-desenha .6s ease-out both !important; }
html.movimento-reduzido .painel-assunto.destacado h3, html.movimento-reduzido .painel-assunto.destacado li { animation: so-aparece .45s ease-out both !important; }
html.movimento-reduzido .painel-assunto.destacado li { animation-delay: calc(.12s + var(--ordem, 0) * 70ms) !important; }
/* o botão de acessibilidade continua indo para o canto, só que devagar e sem mola */
html.movimento-reduzido .botao-acessibilidade, html.movimento-reduzido .acessibilidade-flutuante.recolhido .botao-acessibilidade,
html.movimento-reduzido .acessibilidade-flutuante.recolhido .botao-acessibilidade:hover,
html.movimento-reduzido .acessibilidade-flutuante.recolhido .botao-acessibilidade:focus-visible { transition: transform .6s ease-in-out, opacity .4s ease-in-out !important; }
/* esmaecer não é movimento: os blocos continuam aparecendo devagar e as cores mudam suave ao passar o mouse */
html.movimento-reduzido .revelar { transform: none !important; transition: opacity .7s ease !important; transition-delay: calc(var(--ordem, 0) * 70ms) !important; }
html.movimento-reduzido .hero .container > * { animation: so-aparece .7s ease both !important; }
html.movimento-reduzido a, html.movimento-reduzido button { transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s !important; }

/* =========================================================
   Avisos
   ========================================================= */
.avisos { margin-top: -1.5rem; position: relative; z-index: 4; }
.avisos-grade { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1.25rem; }
.aviso { background: #fff; border-radius: 12px; padding: 1.4rem 1.5rem; box-shadow: var(--sombra); border: 1px solid var(--linha); border-top: 5px solid var(--cor-aviso, var(--azul)); }
.aviso-tipo { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
.aviso h3 { font-size: 1.25rem; margin: .5rem 0 .35rem; }
.aviso p { font-size: 1rem; color: var(--tinta-suave); }
.aviso .acoes { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.aviso .botao { min-height: 42px; padding: .45rem 1rem; font-size: .95rem; }
/* cartão da Agenda Saquarema: semana atual, dois atalhos e o botão no pé do cartão */
.aviso-agenda { --cor-agenda: #F6B829; --cor-agenda-clara: #FEF3D4; --cor-agenda-escura: #8A5D00; --cor-aviso: var(--cor-agenda); display: flex; flex-direction: column; }
.aviso-agenda .aviso-tipo .ic-p { color: var(--cor-agenda-escura); }
.semana-agenda { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; margin-top: 1.1rem; }
.semana-agenda li { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem 0 .5rem; border-radius: 8px; background: var(--cor-agenda-clara); color: var(--cor-agenda-escura); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.semana-agenda b { font-size: 1.05rem; color: var(--azul-noite); letter-spacing: 0; }
.semana-agenda li.hoje { background: var(--cor-agenda); color: var(--azul-noite); box-shadow: 0 6px 14px rgba(246,184,41,.45); }
.semana-agenda li.hoje b { color: var(--azul-noite); }
.atalhos-agenda { list-style: none; display: grid; gap: .15rem; margin: 1rem 0 1.25rem; }
.atalhos-agenda a { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; font-weight: 700; color: var(--azul); text-decoration: none; }
.atalhos-agenda a:hover { text-decoration: underline; }
.atalhos-agenda .ic-p { color: var(--cor-agenda-escura); }
.aviso .botao-agenda { margin-top: auto; align-self: flex-start; background: var(--cor-agenda); color: var(--azul-noite); }
.aviso .botao-agenda:hover { background: #E9A814; color: var(--azul-noite); }
html.alto-contraste .semana-agenda li { background: #000 !important; color: #fff !important; border: 1px solid #fff; }
html.alto-contraste .semana-agenda li.hoje { background: #FFFF00 !important; color: #000 !important; }
html.alto-contraste .semana-agenda b { color: inherit !important; }
.aviso-alerta { background: var(--amarelo-claro); border-color: #E6DA8A; border-top-color: var(--amarelo); }
.aviso-alerta h3 { color: #3D3800; }
.praias { display: flex; gap: .5rem; margin-top: .75rem; }
.praia { flex: 1; border-radius: 8px; padding: .5rem .65rem; background: var(--verde-claro); font-size: .9rem; }
.praia strong { display: block; }
.praia span { display: inline-flex; align-items: center; gap: .25rem; color: var(--verde); font-weight: 700; }
.praia.impropria { background: var(--coral-claro); }
.praia.impropria span { color: var(--coral); }
/* quadro das praias com os elementos do programa Bandeira Azul */
.cabeca-praias { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.selo-bandeira-azul { display: inline-flex; align-items: center; gap: .35rem; background: #E3EEF9; color: #0B4F8A; border: 1px solid #BCD4EC; border-radius: 99px; padding: .2rem .7rem .2rem .45rem; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.bandeira-azul { width: 1.25rem; height: 1.25rem; color: #143563; }
.guarda-vidas { display: flex; gap: .5rem; align-items: flex-start; margin-top: .9rem; padding: .65rem .8rem; border-radius: 10px; background: #E3EEF9; color: #12385F; font-size: .88rem !important; line-height: 1.45; }
.guarda-vidas .ic-p { color: #0B5FA5; margin-top: .15rem; }
.guarda-vidas strong { color: #0B4F8A; }
.cuidados-praia { list-style: none; display: grid; gap: .35rem; margin-top: .75rem; font-size: .88rem; color: var(--tinta-suave); }
.cuidados-praia li { display: flex; gap: .5rem; align-items: center; }
.cuidados-praia .ic-p { color: #0B5FA5; }
.links-praias { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .85rem; font-size: .95rem !important; }
.links-praias a { font-weight: 700; }
.campo-cep { display: flex; gap: .5rem; margin-top: 1rem; }
.campo-cep input { flex: 1; min-width: 0; border: 2px solid var(--linha); border-radius: 8px; padding: .55rem .8rem; font-size: 1rem; }
.campo-cep input:focus { border-color: var(--azul); outline: none; }
.resultado-cep { margin-top: .75rem; font-size: .95rem; display: none; }
.resultado-cep.visivel { display: block; }
.resultado-cep li { list-style: none; display: flex; gap: .5rem; padding: .25rem 0; }
.resultado-cep .ic-p { color: var(--verde); margin-top: .2rem; }

/* =========================================================
   Seções
   ========================================================= */
.secao { padding: 4.5rem 0; }
.secao-cinza { background: var(--nevoa); }
.cabeca-secao { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.cabeca-secao h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.cabeca-secao p { color: var(--tinta-suave); margin-top: .35rem; }
.link-seta { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }

/* serviços mais acessados */
.grade-servicos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; }
.cartao-servico { display: flex; flex-direction: column; gap: .5rem; height: 100%; background: #fff; border: 1px solid var(--linha); border-top: 4px solid var(--cor-cartao, var(--verde)); border-radius: var(--raio); padding: 1.25rem; text-decoration: none; color: var(--tinta); transition: box-shadow .15s, transform .15s; }
.cartao-servico:hover { box-shadow: var(--sombra); transform: translateY(-2px); color: var(--tinta); }
.cartao-servico .caixa-icone { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: var(--fundo-icone, var(--azul-claro)); color: var(--cor-icone, var(--azul)); margin-bottom: .25rem; }
.cartao-servico strong { font-size: 1.1rem; line-height: 1.3; }
.cartao-servico span.descricao { font-size: .95rem; color: var(--tinta-suave); line-height: 1.4; }
.selo-online { margin-top: auto; padding-top: .5rem; display: inline-flex; gap: .3rem; align-items: center; font-size: .82rem; font-weight: 700; color: var(--verde); }

/* assuntos */
.assuntos-layout { display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; align-items: start; }
.grade-assuntos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; list-style: none; }
.botao-assunto { width: 100%; height: 100%; text-align: left; background: #fff; border: 2px solid var(--linha); border-radius: var(--raio); padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-height: 132px; color: var(--tinta); }
.botao-assunto .ic { color: var(--azul); width: 1.9rem; height: 1.9rem; }
.botao-assunto strong { font-size: 1.02rem; line-height: 1.25; }
.botao-assunto small { margin-top: auto; color: var(--tinta-suave); font-size: .85rem; }
.botao-assunto:hover { border-color: var(--azul); }
.botao-assunto[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: #fff; }
.botao-assunto[aria-pressed="true"] .ic, .botao-assunto[aria-pressed="true"] small { color: #fff; }
.painel-assunto { background: #fff; border-radius: 12px; border: 2px solid var(--azul); padding: 1.75rem 1.5rem 1.5rem; position: sticky; top: 110px; overflow: hidden; box-shadow: var(--sombra); scroll-margin-top: 104px; }
/* faixa tricolor no alto do quadro */
.painel-assunto::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; transform-origin: left;
  background: linear-gradient(90deg, var(--verde) 0 55%, var(--amarelo) 55% 73%, var(--azul-logo) 73% 100%); }

/* ao trocar de assunto o quadro chama atenção de leve: desliza um pouco, acende a borda,
   a faixa se desenha, o ícone dá um pulinho e os serviços entram um por um */
.painel-assunto.destacado { animation: painel-chama .75s cubic-bezier(.2, .8, .2, 1); }
.painel-assunto.destacado::before { animation: faixa-desenha .6s ease-out both; }
.painel-assunto.destacado h3 { animation: titulo-entra .45s ease-out both; }
.painel-assunto.destacado h3 .ic { animation: icone-pula .6s cubic-bezier(.34, 1.56, .64, 1) .08s both; }
.painel-assunto.destacado li { animation: item-entra .45s ease-out both; animation-delay: calc(.14s + var(--ordem, 0) * 60ms); }
@keyframes painel-chama {
  0% { transform: translateX(14px); box-shadow: 0 0 0 0 rgba(31, 78, 140, 0); }
  45% { transform: translateX(0); box-shadow: 0 0 0 7px rgba(31, 78, 140, .16), 0 14px 34px rgba(20, 53, 99, .16); }
  100% { transform: translateX(0); box-shadow: var(--sombra); }
}
@keyframes faixa-desenha { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes titulo-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes icone-pula { from { transform: scale(.5) rotate(-12deg); } to { transform: none; } }
@keyframes item-entra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes painel-brilha {
  0% { box-shadow: 0 0 0 0 rgba(31, 78, 140, 0); background: #fff; }
  30% { box-shadow: 0 0 0 8px rgba(31, 78, 140, .2); background: #F2F6FC; }
  100% { box-shadow: var(--sombra); background: #fff; }
}
@keyframes so-aparece { from { opacity: 0; } to { opacity: 1; } }
.painel-assunto h3 { font-size: 1.4rem; display: flex; gap: .6rem; align-items: center; }
.painel-assunto h3 .ic { color: var(--verde); }
.painel-assunto ul { list-style: none; margin-top: 1rem; }
.painel-assunto li a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); font-weight: 500; }
.painel-assunto li a:hover { color: var(--azul); }
.painel-assunto li small { display: block; color: var(--tinta-suave); font-size: .82rem; font-weight: 400; }

/* meu saquarema */
.meu { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3.5rem; align-items: center; }
.meu h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: .75rem 0 1rem; }
.meu p { color: var(--tinta-suave); font-size: 1.15rem; }
.etiqueta { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 6px; }
.etiqueta-verde { background: var(--verde-claro); color: var(--verde); }
.etiqueta-azul { background: var(--azul-claro); color: var(--azul); }
.etiqueta-amarela { background: var(--amarelo-claro); color: var(--amarelo-texto); }
.vantagens { list-style: none; margin: 1.5rem 0 2rem; display: grid; gap: .75rem; }
.vantagens li { display: flex; gap: .75rem; align-items: center; }
.vantagens .ic { color: var(--verde); }
.painel-pessoal { background: var(--azul-noite); border-radius: 16px; padding: 1.75rem; color: #fff; box-shadow: 0 24px 50px rgba(20,53,99,.25); position: relative; overflow: hidden; }
.painel-pessoal .faixa-tricolor { position: absolute; left: 0; right: 0; top: 0; }
.painel-pessoal .ola { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.painel-pessoal .ola strong { font-size: 1.4rem; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--amarelo); color: var(--tinta); display: grid; place-items: center; font-weight: 800; }
.painel-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.bloco { background: #fff; color: var(--tinta); border-radius: 10px; padding: 1rem 1.1rem; }
.bloco .rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); font-weight: 700; }
.bloco strong { display: block; font-size: 1.15rem; margin-top: .2rem; }
.bloco small { color: var(--tinta-suave); font-size: .85rem; }
.bloco-largo { grid-column: 1 / -1; }
.progresso { height: 8px; background: var(--linha); border-radius: 99px; margin-top: .75rem; overflow: hidden; }
.progresso i { display: block; height: 100%; width: 66%; background: var(--verde); border-radius: 99px; }
.etapas { display: flex; justify-content: space-between; font-size: .75rem; color: var(--tinta-suave); margin-top: .35rem; }
.etapas b { color: var(--verde); }

/* notícias */
/* notícias: destaque grande com a foto de fundo (2 colunas x 2 linhas), 2 cartões ao lado e 3 embaixo */
.noticias-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.noticias-grade a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--tinta); }
.noticia-card a { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--linha); transition: transform .2s, box-shadow .2s; }
.noticia-card a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(9,26,52,.12); }
.noticias-grade a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.foto-noticia { position: relative; overflow: hidden; background: var(--azul-claro); }
.foto-noticia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.noticias-grade a:hover .foto-noticia img { transform: scale(1.04); }
.noticia-card .foto-noticia { aspect-ratio: 16 / 9; }
.noticia-card .texto-noticia { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.noticia-card h3 { font-size: 1.08rem; line-height: 1.35; color: var(--azul-noite); }
.noticia-card .data { margin-top: auto; }
.noticia-card .etiqueta { align-self: flex-start; }
.noticia-principal { grid-column: span 2; grid-row: span 2; }
.noticia-principal a { position: relative; min-height: 460px; border-radius: 16px; overflow: hidden; justify-content: flex-end; color: #fff; }
.noticia-principal .foto-noticia { position: absolute; inset: 0; }
.noticia-principal .foto-noticia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,26,52,0) 30%, rgba(9,26,52,.55) 58%, rgba(9,26,52,.92) 100%); }
.noticia-principal .texto-noticia { position: relative; padding: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.noticia-principal h3 { color: #fff; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.2; max-width: 32ch; }
.noticia-principal .resumo { color: #DCE6F3; font-size: 1.05rem; max-width: 60ch; }
.noticia-principal .data { color: #C6D4E6; }
.noticia-principal .etiqueta-verde { background: var(--verde); color: #fff; }
.data { font-size: .88rem; color: var(--tinta-suave); }

/* transparência (a faixa do hino, em A Cidade, usa o mesmo azul) */
.faixa-transparencia, .faixa-hino { background: var(--azul-noite); color: #fff; padding: 3rem 0; position: relative; }
.faixa-transparencia > .faixa-tricolor { position: absolute; top: 0; left: 0; right: 0; }
/* onda embaixo da faixa do hino: o azul "escorre" para a seção branca e se move devagar, como o mar do rodapé.
   A faixa da Transparência ficou reta, sem onda. */
.faixa-hino { overflow-x: clip; z-index: 1; }
.faixa-hino::after {
  content: ''; position: absolute; top: calc(100% - 1px); left: -80px; width: calc(100% + 160px); height: 22px; background: var(--azul-noite); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 22'%3E%3Cpath d='M0 0v12c10 0 10 10 20 10s10-10 20-10 10 10 20 10 10-10 20-10V0z'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 22px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 22'%3E%3Cpath d='M0 0v12c10 0 10 10 20 10s10-10 20-10 10 10 20 10 10-10 20-10V0z'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 22px;
  animation: mar-da-transparencia 9s linear infinite;
}
@keyframes mar-da-transparencia { from { transform: translateX(80px); } to { transform: translateX(0); } }
/* texto e selo na coluna estreita da esquerda, lista de links ocupando a direita inteira */
/* minmax(0, ...) nos dois lados: sem isso a lista de links não encolhe e vaza do container em telas médias */
.faixa-transparencia .container { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "texto links" "selo links"; column-gap: 2.5rem; row-gap: 1rem; align-items: center; }
.texto-transparencia { grid-area: texto; }
.faixa-transparencia h2 { color: #fff; font-size: 2rem; }
.faixa-transparencia p { color: #C9D6E7; margin-top: .5rem; }
/* as duas fileiras de links esticam até a altura da coluna da esquerda, para os blocos terminarem juntos */
.links-transparencia { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: .75rem; list-style: none; grid-area: links; align-self: stretch; }
.links-transparencia a { display: flex; align-items: center; gap: .75rem; height: 100%; min-height: 64px; line-height: 1.25; padding: .9rem 1rem; border-radius: 10px; color: #fff; text-decoration: none; font-weight: 700; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); }
.links-transparencia a:hover { background: rgba(255,255,255,.14); color: #fff; }
.links-transparencia .ic { color: var(--amarelo); }
/* selo do Programa Nacional de Transparência Pública, logo abaixo do texto da faixa */
.selo-transparencia { grid-area: selo; display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem .8rem .8rem; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); }
.selo-transparencia img { width: 84px; height: 84px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.selo-transparencia figcaption { font-size: .82rem; line-height: 1.35; color: #fff; }
.selo-transparencia figcaption strong { display: block; font-size: .95rem; color: var(--amarelo); margin-bottom: .15rem; }
.selo-transparencia figcaption span { display: block; margin-top: .3rem; font-size: .74rem; color: #C9D6E7; }

/* atendimento */
.grade-canais { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; }
.canal { border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.4rem; }
.canal .ic { color: var(--azul); width: 1.9rem; height: 1.9rem; }
.canal strong { display: block; font-size: 1.15rem; margin: .75rem 0 .25rem; }
.canal span { color: var(--tinta-suave); font-size: 1rem; }

/* onde fica a Prefeitura: o mapa ocupa a faixa toda e o painel azul entra pela direita com o canto arredondado.
   O mapa vai até um pouco por baixo do painel para o pino ficar no meio da parte que aparece. */
.secao-local { position: relative; min-height: 480px; margin: 3rem 0 calc(38px + 1.5rem); background: var(--azul-claro); overflow: hidden; }
/* o mapa é 30px mais alto que a faixa: a barra de links do próprio mapa fica cortada embaixo, e o crédito exigido pela licença vai no cantinho (.credito-mapa) */
.mapa-local { position: absolute; top: 0; left: 0; width: calc(62% + 120px); height: calc(100% + 30px); border: 0; display: block; }
.credito-mapa { position: absolute; left: 8px; bottom: 8px; z-index: 2; background: rgba(255,255,255,.88); color: var(--tinta-suave); font-size: .72rem; line-height: 1.2; padding: .15rem .45rem; border-radius: 4px; text-decoration: none; }
.credito-mapa:hover { color: var(--azul); text-decoration: underline; }
.painel-local { position: absolute; top: 0; right: 0; bottom: 0; width: 38%; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right;
  padding: 3rem max(1rem, calc((100% - var(--largura)) / 2)) 3rem 3rem; background: var(--azul); color: #fff; border-radius: 120px 0 0 120px; box-shadow: -10px 0 30px rgba(9,26,52,.18); }
.painel-local::before { content: ''; position: absolute; top: 0; right: 0; width: 60%; height: 6px;
  background: linear-gradient(90deg, var(--verde) 0 55%, var(--amarelo) 55% 73%, var(--azul-logo) 73% 100%); }
.painel-local h2 { color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.08; max-width: 12ch; }
.painel-local address { font-style: normal; font-size: 1.2rem; line-height: 1.6; color: #DCE6F3; margin-top: 1.5rem; }
.botao-mapa { margin-top: 2rem; background: var(--amarelo); color: var(--azul-noite); border-radius: 99px; padding: .95rem 2rem; font-size: 1.15rem; font-weight: 800; }
.botao-mapa:hover { background: #F4E54A; color: var(--azul-noite); transform: translateY(-2px); }
.botao-mapa .ic { width: 1.25rem; height: 1.25rem; }
html.alto-contraste .painel-local { background: #000 !important; border: 2px solid #fff; }
html.alto-contraste .botao-mapa { background: #FFFF00 !important; color: #000 !important; }
/* no celular vira um cartão dentro das margens da página: endereço em cima, mapa embaixo */
@media (max-width: 900px) {
  .secao-local { display: flex; flex-direction: column; min-height: 0; margin: 2.5rem 1rem calc(38px + 1.5rem); border-radius: 20px; overflow: hidden; background: var(--azul); border: 1px solid var(--linha); }
  .painel-local { order: -1; position: relative; width: auto; align-items: stretch; text-align: left; padding: 1.9rem 1.25rem 1.5rem; border-radius: 0; box-shadow: none; }
  .painel-local::before { left: 0; width: 100%; height: 5px; }
  .painel-local h2 { max-width: none; font-size: 1.55rem; }
  .painel-local address { font-size: 1.05rem; line-height: 1.5; margin-top: .9rem; }
  .botao-mapa { margin-top: 1.25rem; padding: .8rem 1.25rem; font-size: 1.05rem; }
  .botao-mapa:hover { transform: none; }
  .mapa-local { position: static; width: 100%; height: 290px; margin-bottom: -30px; }
}

/* rodapé: mar em movimento no alto e o slogan "Aqui se vive melhor!" em cartaz
   (mesmo jeito do rodapé da Agenda Saquarema, nas cores da Faixa Institucional) */
/* céu estrelado de Saquarema: fundo alguns tons mais escuro que o azul-noite, com estrelas paradas
   e uma segunda camada de estrelas maiores que pisca devagar (para quem não pediu menos movimento) */
.rodape { --ceu-do-rodape: #0D2547; position: relative; margin-top: 38px; color: #DCE6F3; font-size: 1rem; overflow-x: clip;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300'%3E%3Ccircle cx='137' cy='48' r='0.9' fill='%23FFF6C2' fill-opacity='0.28'/%3E%3Ccircle cx='225' cy='111' r='0.5' fill='%23FFFFFF' fill-opacity='0.43'/%3E%3Ccircle cx='19' cy='131' r='0.5' fill='%23FFFFFF' fill-opacity='0.28'/%3E%3Ccircle cx='179' cy='245' r='0.6' fill='%23FFFFFF' fill-opacity='0.33'/%3E%3Ccircle cx='263' cy='281' r='0.8' fill='%23FFFFFF' fill-opacity='0.39'/%3E%3Ccircle cx='406' cy='18' r='1.0' fill='%23FFFFFF' fill-opacity='0.35'/%3E%3Ccircle cx='63' cy='38' r='0.7' fill='%23FFFFFF' fill-opacity='0.54'/%3E%3Ccircle cx='78' cy='174' r='0.9' fill='%23FFF6C2' fill-opacity='0.38'/%3E%3Ccircle cx='230' cy='22' r='0.5' fill='%23FFFFFF' fill-opacity='0.32'/%3E%3Ccircle cx='284' cy='129' r='0.7' fill='%23FFFFFF' fill-opacity='0.45'/%3E%3Ccircle cx='191' cy='92' r='1.0' fill='%23FFFFFF' fill-opacity='0.49'/%3E%3Ccircle cx='105' cy='172' r='0.8' fill='%23FFFFFF' fill-opacity='0.56'/%3E%3Ccircle cx='305' cy='88' r='1.1' fill='%23FFFFFF' fill-opacity='0.29'/%3E%3Ccircle cx='176' cy='225' r='0.6' fill='%23FFFFFF' fill-opacity='0.42'/%3E%3Ccircle cx='20' cy='199' r='1.0' fill='%23FFF6C2' fill-opacity='0.45'/%3E%3Ccircle cx='365' cy='96' r='0.9' fill='%23FFFFFF' fill-opacity='0.46'/%3E%3Ccircle cx='243' cy='137' r='1.0' fill='%23FFFFFF' fill-opacity='0.58'/%3E%3Ccircle cx='199' cy='198' r='0.5' fill='%23FFFFFF' fill-opacity='0.50'/%3E%3Ccircle cx='271' cy='294' r='1.0' fill='%23FFFFFF' fill-opacity='0.35'/%3E%3Ccircle cx='163' cy='199' r='0.5' fill='%23FFFFFF' fill-opacity='0.41'/%3E%3Ccircle cx='73' cy='38' r='0.5' fill='%23FFFFFF' fill-opacity='0.52'/%3E%3Ccircle cx='57' cy='76' r='0.7' fill='%23FFF6C2' fill-opacity='0.55'/%3E%3Ccircle cx='37' cy='135' r='0.8' fill='%23FFFFFF' fill-opacity='0.56'/%3E%3Ccircle cx='342' cy='256' r='0.7' fill='%23FFFFFF' fill-opacity='0.40'/%3E%3Ccircle cx='152' cy='262' r='1.1' fill='%23FFFFFF' fill-opacity='0.30'/%3E%3Ccircle cx='77' cy='72' r='0.6' fill='%23FFFFFF' fill-opacity='0.42'/%3E%3C/svg%3E") 0 0 / 420px 300px, var(--ceu-do-rodape); }
.rodape::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='380'%3E%3Ccircle cx='95' cy='261' r='1.4' fill='%23FFF6C2' fill-opacity='0.84'/%3E%3Ccircle cx='123' cy='299' r='1.6' fill='%23FFFFFF' fill-opacity='0.85'/%3E%3Ccircle cx='283' cy='92' r='1.0' fill='%23FFFFFF' fill-opacity='0.81'/%3E%3Ccircle cx='327' cy='30' r='1.6' fill='%23FFFFFF' fill-opacity='0.77'/%3E%3Ccircle cx='132' cy='20' r='1.7' fill='%23FFFFFF' fill-opacity='0.92'/%3E%3Ccircle cx='487' cy='233' r='1.0' fill='%23FFFFFF' fill-opacity='0.80'/%3E%3Ccircle cx='279' cy='47' r='1.7' fill='%23FFFFFF' fill-opacity='0.81'/%3E%3Ccircle cx='89' cy='308' r='1.1' fill='%23FFF6C2' fill-opacity='0.98'/%3E%3Ccircle cx='254' cy='209' r='1.2' fill='%23FFFFFF' fill-opacity='0.85'/%3E%3C/svg%3E") 130px 60px / 560px 380px; animation: estrelas-piscam 5s ease-in-out infinite alternate; }
@keyframes estrelas-piscam { from { opacity: .25; } to { opacity: 1; } }
.rodape > .container { position: relative; z-index: 1; }
html.alto-contraste .rodape::after { display: none; }
/* mar no alto do rodapé: duas ondas suaves que andam devagar em sentidos opostos.
   As ondas são desenhadas com #0D2547 (= --ceu-do-rodape); se a cor do rodapé mudar, mude nos dois SVGs. */
.rodape::before {
  content: ''; position: absolute; top: -38px; left: 0; right: 0; height: 40px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath d='M0 24 C40 12 80 12 120 24 S200 36 240 24 V40 H0Z' fill='%230D2547' fill-opacity='1'/%3E%3C/svg%3E") 0 100% / 240px 40px repeat-x,
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='40' viewBox='0 0 360 40'%3E%3Cpath d='M0 16 C60 0 120 0 180 16 S300 32 360 16 V40 H0Z' fill='%230D2547' fill-opacity='0.35'/%3E%3C/svg%3E") 0 100% / 360px 40px repeat-x;
  animation: mar-do-rodape 30s linear infinite;
}
/* em 30 s a onda da frente anda uma volta (240 px) para a direita e a de trás uma volta (360 px) para a esquerda */
@keyframes mar-do-rodape { from { background-position: 0 100%, 0 100%; } to { background-position: 240px 100%, -360px 100%; } }
.rodape .container { padding: 3.25rem 0 1.5rem; }
.rodape a { color: #fff; }
/* linha de cima: contatos da Prefeitura à esquerda, slogan à direita */
.rodape-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; flex-wrap: wrap; }
.rodape-prefeitura { flex: 1 1 420px; max-width: 620px; }
.rodape .logo-rodape { background: #fff; border-radius: 12px; padding: .65rem 1rem; display: inline-block; }
.rodape .logo-rodape img { height: 52px; }
.rodape .titulo-rodape { font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: 0; text-transform: none; margin: 0; }
.contatos-rodape { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2rem; margin-top: 1.4rem; }
.contatos-rodape li { display: flex; gap: .8rem; align-items: flex-start; font-size: .92rem; color: #B9C8DA; line-height: 1.45; }
.contatos-rodape .ic { flex: none; width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 10px; background: rgba(255,255,255,.08); color: var(--amarelo); }
.contatos-rodape strong { display: block; color: #fff; font-size: 1.02rem; font-weight: 700; margin-bottom: .1rem; }
.contatos-rodape strong a { text-decoration: none; }
.contatos-rodape a { color: #fff; }
/* canais oficiais: e-mail em destaque e redes sociais em botões arredondados */
.rodape .titulo-rodape { font-size: 1.6rem; }
.subtitulo-rodape { color: #B9C8DA; margin-top: .3rem; font-size: 1rem; }
.canal-email { display: flex; width: 100%; max-width: 600px; align-items: center; gap: .9rem; margin-top: 1.4rem; padding: .7rem 1.1rem .7rem .7rem; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); text-decoration: none; color: #fff; transition: background .15s, border-color .15s; min-height: 74px; }
.canal-email:hover { background: rgba(255,255,255,.12); border-color: var(--amarelo); color: #fff; }
.icone-canal { width: 46px; height: 46px; border-radius: 12px; background: var(--amarelo); color: var(--azul-noite); display: grid; place-items: center; flex: none; }
.canal-email small { display: block; font-size: .8rem; color: #B9C8DA; letter-spacing: .02em; }
.canal-email strong { display: block; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.seta-canal { color: var(--amarelo); margin-left: auto; transition: transform .15s; }
.canal-email:hover .seta-canal { transform: translateX(3px); }
.rotulo-redes { margin-top: 1.6rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #AFC0D4; }
.redes-rodape { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; max-width: 600px; margin-top: .65rem; }
.redes-rodape a { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 74px; padding: .7rem 1rem .7rem .7rem; border-radius: 14px; border-color: rgba(255,255,255,.16); font-size: 1.1rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); color: #fff; text-decoration: none; font-weight: 700; font-size: .98rem; transition: background .15s, border-color .15s, transform .15s; }
.redes-rodape .ic { width: 46px; height: 46px; padding: 11px; box-sizing: border-box; border-radius: 12px; background: var(--amarelo); color: var(--azul-noite); }
.redes-rodape a:hover { background: rgba(255,255,255,.12); border-color: var(--amarelo); transform: translateY(-2px); color: #fff; }

/* faixa de emergência: botões grandes de ligar, bons para tocar no celular */
.emergencia { margin-top: 2.75rem; padding: 1.4rem 1.5rem; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.emergencia h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; color: #fff; font-weight: 700; margin: 0; flex: 0 0 auto; }
.emergencia h2 .ic { color: var(--amarelo); }
.lista-emergencia { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; flex: 1 1 100%; }
/* Todos os cartões da fileira têm a mesma altura e o número fica na mesma linha em todos,
   mesmo quando um nome é mais longo (ex.: "Centro de Valorização da Vida" quebra em duas linhas). */
.lista-emergencia > li { display: flex; }
.numero-emergencia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .1rem; min-height: 84px; padding: .7rem .5rem; border-radius: 12px; background: var(--azul); border: 1px solid rgba(255,255,255,.14); text-decoration: none; text-align: center; transition: background .15s, transform .15s; }
.numero-emergencia b { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--amarelo); letter-spacing: -0.01em; }
.numero-emergencia span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: .85rem; line-height: 1.25; color: #DCE6F3; font-weight: 500; text-wrap: balance; }
.numero-emergencia:hover { background: #2A5C9E; transform: translateY(-2px); }

/* slogan empilhado: AQUI, SE pequeno com a faixa tricolor, VIVE e MELHOR! em amarelo com relevo verde */
.rodape-slogan { display: grid; justify-items: start; align-self: end; font-weight: 800; font-size: clamp(2.8rem, 5.4vw, 4.4rem); line-height: .86; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; margin: 0; }
.slogan-linha { display: block; }
.slogan-se { display: flex; align-items: center; gap: .3em; justify-self: stretch; margin: .22em 0 .26em; font-size: .38em; letter-spacing: .24em; color: var(--amarelo); }
.slogan-se::after { content: ''; flex: 1; height: .2em; min-height: 4px; border-radius: 3px; transform-origin: left;
  background: linear-gradient(90deg, var(--verde) 0 55%, var(--amarelo) 55% 73%, var(--azul-logo) 73% 100%); }
.slogan-melhor { color: var(--amarelo); text-shadow: .045em .05em 0 var(--verde); }
.rodape-slogan.vai-entrar:not(.entrou) .slogan-linha { opacity: 0; }
.rodape-slogan.entrou .slogan-linha { animation: slogan-sobe .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.rodape-slogan.entrou .slogan-se { animation-delay: .12s; }
.rodape-slogan.entrou .slogan-se::after { animation: slogan-traco .6s ease .35s both; }
.rodape-slogan.entrou .slogan-vive { animation-delay: .24s; }
.rodape-slogan.entrou .slogan-melhor { animation: slogan-melhor .8s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
@keyframes slogan-sobe { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes slogan-traco { from { transform: scaleX(0); } to { transform: none; } }
@keyframes slogan-melhor { from { opacity: 0; transform: translateY(.4em) scale(.8) rotate(-6deg); } to { opacity: 1; transform: none; } }

.rodape-base { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; color: #AFC0D4; }
.rodape-base nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.aviso-previa { background: var(--amarelo); color: var(--tinta); text-align: center; font-size: .9rem; padding: .5rem 1rem; font-weight: 500; }

/* barra inferior no celular */
.barra-inferior { display: none; }

/* =========================================================
   Página de serviço
   ========================================================= */
.trilha { background: var(--nevoa); border-bottom: 1px solid var(--linha); font-size: .95rem; }
.trilha ol { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; list-style: none; min-height: 50px; padding: .5rem 0; }
.trilha li { display: flex; align-items: center; gap: .5rem; color: var(--tinta-suave); }
.trilha li + li::before { content: '›'; color: var(--tinta-suave); }
.topo-servico { background: var(--nevoa); padding: 2.5rem 0 2rem; }
.topo-servico .grade { display: grid; grid-template-columns: 1fr 360px; gap: 3rem; align-items: end; }
.topo-servico h1 { font-size: clamp(2rem, 4vw, 3rem); margin: .9rem 0 .75rem; }
.topo-servico .resumo { font-size: 1.25rem; max-width: 60ch; }
.acao-principal { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 1.4rem; box-shadow: var(--sombra); display: grid; gap: .6rem; }
.acao-principal .botao { width: 100%; }
.acao-principal small { display: flex; justify-content: center; align-items: center; gap: .35rem; color: var(--tinta-suave); font-size: .9rem; }
.fatos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; list-style: none; }
.fato { background: #fff; border-radius: 10px; border: 1px solid var(--linha); padding: 1rem 1.1rem; display: flex; gap: .85rem; align-items: center; }
.fato .ic { color: var(--verde); width: 1.9rem; height: 1.9rem; }
.fato span { display: block; font-size: .85rem; color: var(--tinta-suave); }
.fato strong { font-size: 1.08rem; }
.corpo-servico { padding: 3rem 0 4rem; }
.corpo-servico .grade { display: grid; grid-template-columns: 240px 1fr 320px; gap: 3rem; align-items: start; }
.indice { position: sticky; top: 110px; }
.indice .titulo-indice { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--tinta-suave); }
.indice ol { list-style: none; margin-top: .75rem; border-left: 3px solid var(--linha); }
.indice a { display: block; padding: .45rem 1rem; margin-left: -3px; border-left: 3px solid transparent; text-decoration: none; color: var(--tinta); font-size: 1rem; }
.indice a.atual { border-color: var(--azul); color: var(--azul); font-weight: 700; }
.indice .botao { width: 100%; margin-top: .75rem; justify-content: flex-start; }
.conteudo-servico section { scroll-margin-top: 110px; }
.conteudo-servico section + section { margin-top: 3rem; }
.conteudo-servico h2 { font-size: 1.75rem; margin-bottom: 1rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.tabela th { text-align: left; background: var(--azul-claro); color: var(--azul-noite); padding: .8rem 1rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.tabela td { padding: .9rem 1rem; border-bottom: 1px solid var(--linha); }
.tabela td strong { color: var(--verde); font-size: 1.2rem; }
.passos { list-style: none; counter-reset: passo; display: grid; gap: .9rem; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; border: 1px solid var(--linha); border-radius: 10px; padding: 1rem 1.1rem; }
.passos li::before { content: counter(passo); width: 44px; height: 44px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.passos strong { display: block; font-size: 1.15rem; }
.passos span { color: var(--tinta-suave); }
.documentos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.documentos li { display: flex; gap: .6rem; align-items: center; background: var(--verde-claro); border-radius: 10px; padding: .8rem 1rem; }
.documentos .ic { color: var(--verde); }
.duvidas details { border-bottom: 1px solid var(--linha); }
.duvidas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0; font-weight: 700; font-size: 1.1rem; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary .ic-p { transition: transform .2s; }
.duvidas details[open] summary .ic-p { transform: rotate(180deg); }
.duvidas details p { padding-bottom: 1rem; color: var(--tinta-suave); }
.revisao { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linha); font-size: .9rem; color: var(--tinta-suave); }
.lateral { display: grid; gap: 1.1rem; }
.caixa-lateral { border: 1px solid var(--linha); border-radius: 12px; padding: 1.25rem; }
.caixa-lateral h2 { font-size: 1.15rem; margin-bottom: .75rem; }
.contato { display: flex; gap: .75rem; padding: .5rem 0; font-size: 1rem; }
.contato .ic { color: var(--azul); margin-top: .15rem; }
.avaliacao { background: var(--azul-noite); color: #fff; border: 0; }
.avaliacao h2 { color: #fff; }
.avaliacao .botoes { display: flex; gap: .6rem; }
.avaliacao .botoes button { flex: 1; background: transparent; border: 2px solid rgba(255,255,255,.5); color: #fff; border-radius: 8px; padding: .6rem; font-weight: 700; min-height: 48px; }
.avaliacao .botoes button:hover { background: rgba(255,255,255,.12); }
.avaliacao .obrigado { display: none; }
.avaliacao.respondida .botoes { display: none; }
.avaliacao.respondida .obrigado { display: block; }
.relacionados a { display: flex; gap: .5rem; align-items: center; padding: .4rem 0; }

/* =========================================================
   Alto contraste
   ========================================================= */
html.alto-contraste body, html.alto-contraste .cabecalho, html.alto-contraste .submenu, html.alto-contraste .hero, html.alto-contraste .aviso,
html.alto-contraste .secao, html.alto-contraste .cartao-servico, html.alto-contraste .botao-assunto, html.alto-contraste .painel-assunto,
html.alto-contraste .painel-pessoal, html.alto-contraste .bloco, html.alto-contraste .faixa-transparencia, html.alto-contraste .canal,
html.alto-contraste .faixa-hino, html.alto-contraste .letra-hino, html.alto-contraste .atalhos-cidade a, html.alto-contraste .video-cidade, html.alto-contraste .video-destaque .titulo-video, html.alto-contraste .video-hino .titulo-video, html.alto-contraste .janela, html.alto-contraste .fecha-janela,
html.alto-contraste .rodape, html.alto-contraste .barra-acessibilidade, html.alto-contraste .sugestoes, html.alto-contraste .resposta-rapida,
html.alto-contraste .trilha, html.alto-contraste .topo-servico, html.alto-contraste .acao-principal, html.alto-contraste .fato,
html.alto-contraste .caixa-lateral, html.alto-contraste .documentos li, html.alto-contraste .praia, html.alto-contraste .barra-inferior,
html.alto-contraste .tabela th, html.alto-contraste .busca form, html.alto-contraste .aviso-previa, html.alto-contraste .etiqueta,
html.alto-contraste .cartao-servico .caixa-icone, html.alto-contraste .avatar, html.alto-contraste .foto-noticia, html.alto-contraste .campo-cep input, html.alto-contraste .links-transparencia a, html.alto-contraste .selo-transparencia, html.alto-contraste .numero-emergencia, html.alto-contraste .emergencia, html.alto-contraste .painel-acessibilidade, html.alto-contraste .botao-acessibilidade, html.alto-contraste .controle-fonte button, html.alto-contraste .contatos-rodape .ic {
  background: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important;
}
html.alto-contraste * { color: #fff !important; }
html.alto-contraste a, html.alto-contraste a * , html.alto-contraste .mais-acessados a { color: #FFFF00 !important; }
html.alto-contraste .botao, html.alto-contraste .botao-assunto, html.alto-contraste .cartao-servico, html.alto-contraste .aviso, html.alto-contraste .busca form { border: 2px solid #FFFF00 !important; background: #000 !important; }
html.alto-contraste .botao * , html.alto-contraste .botao { color: #FFFF00 !important; }
html.alto-contraste .paisagem, html.alto-contraste .hero::before { display: none; }
html.alto-contraste .hero .container { padding-bottom: 4rem; }
html.alto-contraste .marca img, html.alto-contraste .logo-rodape img { filter: grayscale(1) contrast(1.4); background: #fff; border-radius: 6px; }
html.alto-contraste :focus-visible { outline-color: #FFFF00; box-shadow: none; }
html.alto-contraste .caixa-icone { background: #000 !important; border: 1px solid #fff; }

/* =========================================================
   A Cidade (a-cidade.html)
   ========================================================= */
.topo-cidade { padding-bottom: 2.25rem; }
/* os quatro atalhos do topo: mesma pílula do "mais acessados" da home, em fundo claro */
.atalhos-cidade { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.atalhos-cidade a { border: 1px solid var(--linha); background: #fff; border-radius: 99px; padding: .45rem 1.1rem; font-weight: 700; font-size: .95rem; color: var(--azul); text-decoration: none; }
.atalhos-cidade a:hover { background: var(--azul-claro); color: var(--azul-noite); }

/* "Ler a história completa" é botão, não link: o texto abre aqui mesmo */
.abre-janela { background: none; border: 0; padding: 0; font-size: 1rem; color: var(--azul); }
.abre-janela:hover { color: var(--azul-noite); }
.abre-janela:hover svg { transform: none; }
/* o display só vale com [open], senão ele vence a regra do navegador que esconde a janela fechada */
/* margin: auto centraliza a janela; o reset `* { margin: 0 }` lá de cima tira o do navegador */
.janela { margin: auto; width: min(760px, calc(100% - 2rem)); max-height: min(82vh, 820px); padding: 0; border: 0; border-radius: 14px; background: #fff; color: var(--tinta); box-shadow: 0 24px 60px rgba(9, 26, 52, .35); overflow: hidden; }
.janela[open] { display: flex; flex-direction: column; }
.janela::backdrop { background: rgba(9, 26, 52, .6); }
.topo-janela { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid var(--linha); }
.topo-janela h2 { font-size: 1.5rem; }
.fecha-janela { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); background: var(--nevoa); color: var(--azul-noite); display: grid; place-items: center; }
.fecha-janela:hover { background: var(--azul-claro); }
.corpo-janela { min-height: 0; overflow-y: auto; padding: 1.4rem 1.5rem; display: grid; gap: 1.1rem; }
.corpo-janela p { line-height: 1.7; }
.pe-janela { padding: 1rem 1.5rem 1.3rem; border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; }
/* com a janela aberta a página atrás não rola */
html.janela-aberta { overflow: hidden; }

.grade-historia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 3rem; align-items: start; }
.texto-historia p + p { margin-top: 1rem; }
.linha-tempo { list-style: none; display: grid; gap: 1.1rem; border-left: 3px solid var(--azul-claro); padding-left: 1.4rem; }
.linha-tempo li { position: relative; }
.linha-tempo li::before { content: ''; position: absolute; left: calc(-1.4rem - 1.5px); top: .5rem; width: 11px; height: 11px; border-radius: 50%; background: var(--amarelo); border: 2px solid var(--azul-noite); transform: translateX(-50%); }
.linha-tempo b { display: block; color: var(--azul); font-size: 1.15rem; }
.linha-tempo span { display: block; color: var(--tinta-suave); font-size: .98rem; line-height: 1.45; }

.faixa-hino .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 2.5rem; row-gap: 1.25rem; align-items: center; }
.faixa-hino h2 { color: #fff; font-size: 2rem; }
.texto-hino > p { color: #C9D6E7; margin-top: .5rem; max-width: 52ch; }
.letra-hino { margin-top: 1.4rem; max-width: 52ch; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 1rem 1.25rem; }
.letra-hino summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; font-weight: 700; color: #fff; list-style: none; }
.letra-hino summary::-webkit-details-marker { display: none; }
.letra-hino summary .ic-p { color: var(--amarelo); transition: transform .15s; }
.letra-hino[open] summary .ic-p { transform: rotate(180deg); }
.versos-hino { margin-top: 1.1rem; display: grid; gap: 1rem; }
.versos-hino p { color: #EAF0F8; line-height: 1.65; }
.fonte-letra { margin-top: 1.1rem; font-size: .9rem; color: #C9D6E7; }
.letra-hino a { color: var(--amarelo); }

/* TV Saquarema: capa primeiro, player do YouTube só depois do clique (js/a-cidade.js) */
.grade-tv { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
.video-cidade { display: block; width: 100%; position: relative; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--azul-claro); text-align: left; color: var(--tinta); transition: box-shadow .15s, transform .15s; }
.video-cidade:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
/* height: auto anula o atributo height do <img>; sem isso o aspect-ratio é ignorado */
.video-cidade img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.titulo-video { display: block; font-weight: 700; line-height: 1.3; }
.video-destaque .titulo-video, .video-hino .titulo-video { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(20, 53, 99, .88); color: #fff; padding: .85rem 1.1rem; font-size: 1.05rem; }
.marca-tocar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--azul-noite); color: #fff; display: grid; place-items: center; border: 3px solid #fff; }
.marca-tocar .ic { width: 1.8rem; height: 1.8rem; }
.lista-tv { list-style: none; display: grid; gap: 1rem; align-content: space-between; }
.lista-tv .video-cidade { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: .9rem; background: #fff; }
.lista-tv .titulo-video { padding: .2rem .9rem .2rem 0; font-size: .98rem; }
.lista-tv .video-cidade:hover .titulo-video { color: var(--azul); }
.video-aberto { border-radius: var(--raio); overflow: hidden; background: var(--tinta); }
.player-cidade { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.fatos-cidade { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.fatos-cidade strong { font-size: 1rem; line-height: 1.3; }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 1100px) {
  .grade-servicos { grid-template-columns: repeat(2, 1fr); }
  .assuntos-layout { grid-template-columns: 1fr; }
  .painel-assunto { position: relative; top: auto; }
  .lista-emergencia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .corpo-servico .grade { grid-template-columns: 1fr 300px; }
  .indice { display: none; }
}
@media (max-width: 900px) {
  .atalhos { display: none; }
  .barra-acessibilidade .container { justify-content: center; }
  .ferramentas .so-grande { display: none; }
  .botao-menu-celular { display: grid; }
  .menu-principal { display: none; position: fixed; inset: 84px 0 0 0; background: var(--azul-noite); overflow: auto; padding: 1rem; margin: 0; }
  .menu-principal.aberto { display: block; }
  .menu-principal > ul { flex-direction: column; gap: 0; }
  .menu-principal a, .menu-principal button.abre-sub { color: #fff; font-size: 1.2rem; width: 100%; justify-content: space-between; padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0; }
  .menu-principal a:hover, .menu-principal button.abre-sub:hover, .menu-principal button.abre-sub[aria-expanded="true"] { background: rgba(255,255,255,.06); color: #fff; }
  .submenu { position: static; transform: none; width: auto; box-shadow: none; border: 0; border-radius: 0; background: rgba(255,255,255,.05); padding: .5rem; }
  .submenu-grade { grid-template-columns: 1fr; }
  .menu-principal .submenu-grade a { color: #DCE6F3; font-size: 1.05rem; border: 0; padding: .7rem 1rem; justify-content: flex-start; }
  .submenu-grade a .ic { color: var(--amarelo); }
  .submenu-rodape { display: none; }
  .marca img { height: 44px; }
  .cabecalho-linha { min-height: 72px; }
  .menu-principal { inset: 72px 0 0 0; }
  .hero { --altura-paisagem: 195px; }
  .hero .container { padding: 2.25rem 0 11rem; }
  .avisos-grade { grid-template-columns: 1fr; }
  .meu { grid-template-columns: 1fr; gap: 2rem; }
  .noticias-grade { grid-template-columns: 1fr 1fr; }
  .noticia-principal { grid-column: 1 / -1; grid-row: auto; }
  .noticia-principal a { min-height: 380px; }
  .faixa-transparencia .container { grid-template-columns: 1fr; grid-template-areas: "texto" "links" "selo"; row-gap: 2rem; }
  .grade-historia { grid-template-columns: 1fr; gap: 2rem; }
  .faixa-hino .container { grid-template-columns: 1fr; }
  .grade-tv { grid-template-columns: 1fr; }
  .links-transparencia { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  /* no celular o selo vai para o fim da faixa, centralizado e com a legenda embaixo da medalha */
  .selo-transparencia { flex-direction: column; text-align: center; gap: .7rem; width: fit-content; max-width: 100%; margin-inline: auto; padding: 1.1rem 1.4rem; }
  .selo-transparencia img { width: 100px; height: 100px; }
  .grade-canais { grid-template-columns: 1fr 1fr; }
  .grade-assuntos { grid-template-columns: repeat(2, 1fr); }
  .topo-servico .grade, .corpo-servico .grade { grid-template-columns: 1fr; gap: 1.5rem; }
  .fatos { grid-template-columns: 1fr 1fr; }
  .secao { padding: 3rem 0; }
  body { padding-bottom: 76px; }
  .acessibilidade-flutuante { right: 1rem; bottom: calc(76px + 1rem + env(safe-area-inset-bottom)); }
  .painel-acessibilidade { width: min(320px, calc(100vw - 2rem)); }
  .barra-inferior { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--linha); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); }
  .barra-inferior a { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .75rem; font-weight: 700; color: var(--tinta-suave); text-decoration: none; padding: .3rem; }
  .barra-inferior a[aria-current="page"] { color: var(--azul); }
  .barra-inferior a[aria-current="page"] .ic { background: var(--azul-claro); border-radius: 99px; width: 3.2rem; }
}
@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  .grade-servicos { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .cartao-servico { padding: 1rem; }
  .cartao-servico span.descricao { display: none; }
  .busca input { font-size: 1.05rem; }
  .mais-acessados { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: none; }
  .mais-acessados strong { display: none; }
  .canal-email { gap: .7rem; padding-right: .8rem; }
  .canal-email strong { font-size: .98rem; overflow-wrap: normal; }
  /* no celular o "Aqui se vive melhor!" fica por último, depois dos telefones de emergência */
  .rodape .container { display: flex; flex-direction: column; }
  .rodape-topo { display: contents; }
  .rodape-prefeitura { order: 1; flex: none; }
  .emergencia { order: 2; }
  .rodape-slogan { order: 3; margin-top: 2.5rem; align-self: flex-start; }
  .rodape-base { order: 4; }
  .redes-rodape { grid-template-columns: 1fr; }
  .seta-canal { margin-left: 0; }
  .mais-acessados a { white-space: nowrap; }
  .hero { --altura-paisagem: 165px; }
  .hero .container { padding-bottom: 9rem; }
  .busca .botao { padding: .6rem .9rem; }
  .praias { flex-wrap: wrap; }
  /* no celular: destaque em cima e as outras como lista com miniatura à esquerda */
  .noticias-grade { grid-template-columns: 1fr; gap: 1rem; }
  .noticia-principal a { min-height: 340px; }
  .noticia-principal .texto-noticia { padding: 1.25rem; }
  .noticia-principal .resumo { display: none; }
  .noticia-card a { flex-direction: row; align-items: stretch; }
  .noticia-card .foto-noticia { flex: 0 0 112px; aspect-ratio: auto; min-height: 112px; }
  .noticia-card .texto-noticia { padding: .8rem .9rem; gap: .35rem; }
  .noticia-card h3 { font-size: 1rem; }
  .links-transparencia, .grade-canais, .contatos-rodape, .documentos, .fatos, .fatos-cidade { grid-template-columns: 1fr; }
  .lista-tv .video-cidade { grid-template-columns: 120px minmax(0, 1fr); }
  .faixa-hino h2 { font-size: 1.6rem; }
  .lista-emergencia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-grade { grid-template-columns: 1fr; }
  .ferramentas { gap: .75rem; }
}

html.alto-contraste .chave { background: #000; border: 2px solid #FFFF00; }
html.alto-contraste .chave .bolinha-chave { background: #FFFF00; top: 1px; }
html.alto-contraste .chave[aria-pressed="true"] .bolinha-chave { left: 23px; }

/* =========================================================
   Vida na página: entrada do topo, blocos que aparecem ao rolar e botões que respondem
   ========================================================= */
.busca { z-index: 5; }
.hero .container > * { animation: entra-de-baixo .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero .container > :nth-child(2) { animation-delay: .1s; }
.hero .container > :nth-child(3) { animation-delay: .2s; }
.hero .container > :nth-child(4) { animation-delay: .3s; }
.mais-acessados a { transition: background .2s, transform .2s, border-color .2s; }
.mais-acessados a:hover { transform: translateY(-2px); border-color: #fff; }
@keyframes entra-de-baixo { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--ordem, 0) * 80ms); }
.revelar.revelado { opacity: 1; transform: none; }

.botao { transition: background .15s, transform .15s, box-shadow .2s, color .15s; }
.botao:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(9, 26, 52, .16); }
.botao:active { transform: translateY(0) scale(.98); box-shadow: none; }
.link-seta .ic-p, .link-seta svg { transition: transform .2s; }
.link-seta:hover .ic-p, .link-seta:hover svg { transform: translateX(4px); }
.numero-emergencia b { transition: transform .2s; }
.numero-emergencia:hover b { transform: scale(1.08); }
@media print { .revelar { opacity: 1 !important; transform: none !important; } }

/* =========================================================
   Página "Obras em andamento" (obras.html)
   ========================================================= */
.topo-obras .fatos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.topo-obras .fato .ic { color: var(--azul); }
.topo-obras .fato strong { font-size: 1.5rem; line-height: 1.1; }
.topo-obras .fato strong span { display: inline; font-size: inherit; color: inherit; }

.filtros-obras { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linha); padding: 1rem 0; }
.filtros-obras .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; }
.abas-obras { display: inline-flex; background: var(--nevoa); border: 1px solid var(--linha); border-radius: 12px; padding: .25rem; gap: .25rem; }
.abas-obras button { border: 0; background: transparent; border-radius: 9px; padding: .55rem 1rem; font-weight: 700; font-size: 1rem; color: var(--tinta-suave); min-height: 44px; display: inline-flex; gap: .5rem; align-items: center; }
.abas-obras button b { font-weight: 800; font-size: .82rem; background: #fff; color: var(--azul-noite); border: 1px solid var(--linha); border-radius: 99px; padding: 0 .5rem; line-height: 1.5; }
.abas-obras button[aria-pressed="true"] { background: var(--azul-noite); color: #fff; }
.abas-obras button[aria-pressed="true"] b { background: var(--amarelo); color: var(--tinta); border-color: var(--amarelo); }
.busca-obras { position: relative; flex: 1 1 280px; max-width: 420px; }
.busca-obras .ic { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--tinta-suave); width: 1.25rem; height: 1.25rem; }
.busca-obras input { width: 100%; min-height: 48px; border: 2px solid var(--linha); border-radius: 10px; padding: .6rem .9rem .6rem 2.7rem; background: #fff; }
.busca-obras input:focus { border-color: var(--azul); outline: none; }
.assuntos-obras { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.assuntos-obras button { display: inline-flex; align-items: center; gap: .45rem; border: 2px solid var(--linha); background: #fff; border-radius: 99px; padding: .3rem .9rem .3rem .7rem; font-weight: 600; font-size: .95rem; min-height: 40px; color: var(--tinta); }
.assuntos-obras button .ic-p { color: var(--azul); }
.assuntos-obras button:hover { border-color: var(--azul); }
.assuntos-obras button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.assuntos-obras button[aria-pressed="true"] .ic-p { color: #fff; }

.lista-obras { padding: 2rem 0 3rem; }
.linha-resultado { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: baseline; margin-bottom: 1.25rem; color: var(--tinta-suave); font-size: .98rem; }
.linha-resultado strong { color: var(--azul-noite); }
.como-ler { display: inline-flex; align-items: center; gap: .6rem; }
.como-ler i { display: inline-block; width: 70px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--azul) 0 62%, #E3E9F1 62%); }
.grade-obras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; align-items: start; }
.cartao-obra { display: flex; flex-direction: column; gap: .85rem; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 1.25rem; box-shadow: var(--sombra); }
.cartao-obra-topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cartao-obra-topo .etiqueta { font-size: .72rem; }
.cartao-obra .contrato { font-size: .82rem; color: var(--tinta-suave); white-space: nowrap; }
.cartao-obra h3 { font-size: 1.28rem; line-height: 1.2; min-height: 2.4em; }
.cartao-obra .onde { display: flex; gap: .4rem; align-items: center; color: var(--tinta-suave); font-size: .98rem; margin-top: -.4rem; }
.cartao-obra .onde .ic-p { color: var(--azul); }
.progresso-obra { display: grid; gap: .4rem; }
.progresso-obra-texto { display: flex; align-items: baseline; gap: .5rem; }
.progresso-obra-texto b { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--azul-noite); letter-spacing: -.02em; }
.progresso-obra-texto span { color: var(--tinta-suave); font-size: .92rem; }
.barra-obra { height: 12px; border-radius: 99px; background: #E3E9F1; overflow: hidden; }
.barra-obra i { display: block; height: 100%; width: var(--feito, 0%); border-radius: 99px; background: linear-gradient(90deg, var(--azul), var(--azul-logo)); }
.cartao-obra.concluida .barra-obra i { background: linear-gradient(90deg, var(--verde), #2C9A5C); }
.cartao-obra.concluida .progresso-obra-texto b { color: var(--verde); }
.fase-obra { min-height: 4.2rem; background: var(--nevoa); border-radius: 10px; padding: .65rem .85rem; font-size: .95rem; line-height: 1.35; }
.fase-obra small { display: block; text-transform: uppercase; letter-spacing: .07em; font-size: .7rem; font-weight: 700; color: var(--tinta-suave); }
.fase-obra strong { color: var(--azul-noite); }
.datas-obra { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: auto; }
.datas-obra div { border-top: 3px solid var(--linha); padding-top: .4rem; }
.datas-obra div:last-child { border-top-color: var(--amarelo); }
.cartao-obra.concluida .datas-obra div:last-child { border-top-color: var(--verde); }
.datas-obra small { display: block; font-size: .78rem; color: var(--tinta-suave); }
.datas-obra strong { font-size: 1.05rem; color: var(--azul-noite); }
.detalhes-obra { border-top: 1px solid var(--linha); padding-top: .65rem; }
.detalhes-obra summary { cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--azul); list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.detalhes-obra summary::-webkit-details-marker { display: none; }
.detalhes-obra summary .ic-p { transition: transform .2s; }
.detalhes-obra[open] summary .ic-p { transform: rotate(180deg); }
.detalhes-obra dl { display: grid; gap: .6rem; margin-top: .6rem; font-size: .92rem; }
.detalhes-obra dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--tinta-suave); }
.detalhes-obra dd { line-height: 1.4; }
.sem-obras { padding: 2.5rem 1rem; text-align: center; color: var(--tinta-suave); border: 2px dashed var(--linha); border-radius: 14px; }
.rodape-obras { background: var(--azul-claro); padding: 2rem 0; }
.rodape-obras .container { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.rodape-obras h2 { font-size: 1.4rem; }
.rodape-obras p { color: var(--tinta-suave); margin-top: .25rem; max-width: 62ch; }
.rodape-obras .acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 1100px) {
  .grade-obras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topo-obras .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .filtros-obras { position: static; }
}
@media (max-width: 600px) {
  .grade-obras { grid-template-columns: 1fr; }
  .abas-obras { width: 100%; display: flex; }
  .abas-obras button { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .35rem; gap: .3rem; font-size: .88rem; }
  .abas-obras button { flex-direction: column; gap: .15rem; padding: .4rem .25rem; font-size: .88rem; line-height: 1.15; text-align: center; }
  .topo-obras .fato { padding: .8rem; gap: .6rem; }
  .topo-obras .fato strong { font-size: 1.15rem; }
  .busca-obras { max-width: none; flex-basis: 100%; }
  .assuntos-obras { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: thin; }
  .assuntos-obras button { white-space: nowrap; }
}
html.alto-contraste .cartao-obra, html.alto-contraste html.alto-contraste .abas-obras, html.alto-contraste .abas-obras button, html.alto-contraste .assuntos-obras button, html.alto-contraste .busca-obras input {
  background: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important;
}
html.alto-contraste .barra-obra { background: #333 !important; }
html.alto-contraste .barra-obra i { background: #FFFF00 !important; }
html.alto-contraste .abas-obras button[aria-pressed="true"], html.alto-contraste .assuntos-obras button[aria-pressed="true"] { border: 2px solid #FFFF00 !important; }

/* =========================================================
   Página "Seus dados (LGPD)" (lgpd.html)
   ========================================================= */
.acoes-topo { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.atalhos-lgpd { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linha); }
.atalhos-lgpd ul { display: flex; gap: .5rem; list-style: none; overflow-x: auto; padding: .75rem 0; scrollbar-width: thin; }
.atalhos-lgpd a { display: inline-flex; align-items: center; min-height: 42px; padding: .3rem 1rem; border: 2px solid var(--linha); border-radius: 99px; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--tinta); background: #fff; white-space: nowrap; }
.atalhos-lgpd a:hover { border-color: var(--azul); color: var(--azul); }

.secao-lgpd { padding: 3.5rem 0; }
.secao-clara { background: var(--nevoa); }
.container-estreito { max-width: 900px; margin-left: max(1rem, calc((100% - var(--largura)) / 2)); margin-right: auto; }
.sobretitulo { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); margin-bottom: .4rem; }
.secao-lgpd h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.introducao-secao { max-width: 75ch; color: var(--tinta-suave); margin-bottom: 1.75rem; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.texto-lgpd p + p { margin-top: 1rem; }
.cartao-escuro { position: relative; background: var(--azul-noite); color: #fff; border-radius: 16px; padding: 1.75rem; display: grid; gap: .8rem; overflow: hidden; }
.cartao-escuro::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--verde) 0 55%, var(--amarelo) 55% 73%, var(--azul-logo) 73%); }
.cartao-escuro h3 { color: #fff; font-size: 1.4rem; }
.cartao-escuro p { color: #DCE6F3; }
.icone-escuro { width: 3.2rem; height: 3.2rem; border-radius: 12px; background: var(--amarelo); color: var(--azul-noite); display: grid; place-items: center; }

.perguntas { display: grid; gap: .75rem; }
.pergunta { background: #fff; border: 1px solid var(--linha); border-radius: 12px; }
.pergunta summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; font-weight: 700; color: var(--azul-noite); line-height: 1.3; min-height: 60px; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary > span:nth-child(2) { flex: 1; }
.pergunta summary .ic-p { color: var(--azul); transition: transform .2s; }
.pergunta[open] summary .ic-p { transform: rotate(180deg); }
.pergunta[open] { border-color: var(--azul); box-shadow: var(--sombra); }
.numero-pergunta { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; font-size: .95rem; font-weight: 800; }
.pergunta[open] .numero-pergunta { background: var(--azul); color: #fff; }
.pergunta p { padding: 0 1.1rem 1.15rem 4rem; color: var(--tinta); }

.grade-secretarias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; list-style: none; }
.grade-secretarias li { display: flex; gap: .8rem; align-items: center; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: .9rem 1rem; font-weight: 600; line-height: 1.3; color: var(--azul-noite); }
.grade-secretarias .ic { color: var(--azul); }

.grade-cursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; list-style: none; }
.grade-cursos a { display: flex; align-items: center; gap: .9rem; height: 100%; background: #fff; border: 2px solid var(--linha); border-radius: 12px; padding: 1rem; text-decoration: none; color: var(--tinta); }
.grade-cursos a:hover { border-color: var(--azul); }
.icone-curso { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 10px; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; }
.texto-curso { flex: 1; display: grid; gap: .15rem; }
.texto-curso strong { color: var(--azul-noite); line-height: 1.3; }
.texto-curso small { color: var(--tinta-suave); font-size: .85rem; }
.seta-curso { color: var(--azul); }

.encarregado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.cartao-encarregado { background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 1.75rem; box-shadow: var(--sombra); display: grid; gap: 1rem; }
.avatar-encarregado { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--verde-claro); color: var(--verde); display: grid; place-items: center; }
.cartao-encarregado dl { display: grid; gap: .8rem; }
.cartao-encarregado dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--tinta-suave); }
.cartao-encarregado dd { font-size: 1.05rem; word-break: break-word; }
.cartao-encarregado .nome-encarregado { font-size: 1.35rem; font-weight: 800; color: var(--azul-noite); line-height: 1.25; }
.cartao-encarregado .botao { justify-self: start; }
/* no computador o e-mail escrito basta (muita gente não tem programa de e-mail configurado); o botão fica só no celular e no tablet */
@media (hover: hover) and (pointer: fine) { .botao-email-encarregado { display: none; } }
.atividades-encarregado h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.atividades-encarregado ul { display: grid; gap: .75rem; list-style: none; }
.atividades-encarregado li { display: flex; gap: .75rem; align-items: flex-start; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: .9rem 1rem; line-height: 1.4; }
.atividades-encarregado li .ic { color: var(--verde); margin-top: .1rem; }
.nota-atividades { margin-top: 1.25rem; color: var(--tinta-suave); }

.grade-legislacao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.bloco-lei { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 1.4rem; display: grid; gap: 1rem; align-content: start; }
.bloco-lei h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; }
.bloco-lei h3 .ic { color: var(--azul); }
.link-lei { display: flex; align-items: center; gap: .8rem; text-decoration: none; background: var(--azul-claro); border-radius: 10px; padding: .85rem 1rem; font-weight: 700; color: var(--azul-noite); line-height: 1.3; }
.link-lei:hover { background: #D6E2F2; }
.link-lei span:nth-child(2) { flex: 1; }
.selo-pdf { flex: none; background: var(--coral-claro); color: var(--coral); font-size: .72rem; font-weight: 800; letter-spacing: .04em; border-radius: 6px; padding: .35rem .5rem; }
.selo-lista { background: var(--azul-claro); color: var(--azul); }
.lista-atos { display: grid; gap: .6rem; list-style: none; }
.lista-atos li { display: grid; gap: .15rem; background: var(--azul-claro); border-radius: 10px; padding: .85rem 1rem; line-height: 1.35; }
.lista-atos strong { color: var(--azul-noite); }
.lista-atos span { color: var(--tinta-suave); font-size: .95rem; }
.aguardando { color: var(--tinta-suave); border: 2px dashed var(--linha); border-radius: 10px; padding: .9rem 1rem; }

@media (max-width: 1100px) {
  .grade-secretarias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-legislacao { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .duas-colunas, .encarregado { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .atalhos-lgpd { position: static; }
}
@media (max-width: 600px) {
  .secao-lgpd { padding: 2.5rem 0; }
  .grade-secretarias, .grade-cursos { grid-template-columns: minmax(0, 1fr); }
  .pergunta p { padding-left: 1.1rem; }
  .acoes-topo .botao { width: 100%; }
}
html.alto-contraste .cartao-escuro, html.alto-contraste .pergunta, html.alto-contraste .grade-secretarias li, html.alto-contraste .grade-cursos a, html.alto-contraste .cartao-encarregado,
html.alto-contraste .atividades-encarregado li, html.alto-contraste .bloco-lei, html.alto-contraste .link-lei, html.alto-contraste .atalhos-lgpd, html.alto-contraste .atalhos-lgpd a, html.alto-contraste .secao-clara {
  background: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important;
}

/* =========================================================
   Página "Calendário da coleta de lixo" (coleta-de-lixo.html)
   ========================================================= */
.busca-coleta { position: relative; max-width: 640px; margin-top: 1.5rem; }
.busca-coleta .ic { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--azul); }
.busca-coleta input { width: 100%; min-height: 60px; border: 2px solid var(--linha); border-radius: 14px; padding: .8rem 1.1rem .8rem 3.4rem; background: #fff; font-size: 1.1rem; box-shadow: var(--sombra); }
.busca-coleta input:focus { border-color: var(--azul); outline: none; }
.aviso-hoje { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.25rem; background: var(--amarelo-claro); border: 1px solid #E6D84A; border-radius: 12px; padding: .7rem 1.1rem .7rem .8rem; }
.aviso-hoje p { display: grid; line-height: 1.25; }
.aviso-hoje small { color: var(--amarelo-texto); font-size: .85rem; }
.aviso-hoje strong { color: var(--tinta); }
.icone-hoje { width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--amarelo); color: var(--tinta); display: grid; place-items: center; }

.corpo-coleta { padding: 2rem 0 3.5rem; }
.abas-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 1.6fr; gap: .6rem; transition: opacity .2s; }
.abas-dias.esmaecidas { opacity: .55; }
.abas-dias button { display: grid; justify-items: center; align-content: center; gap: .1rem; min-height: 72px; border: 2px solid var(--linha); background: #fff; border-radius: 14px; padding: .5rem; color: var(--tinta); }
.abas-dias button:hover { border-color: var(--azul); }
.aba-dia-nome { font-weight: 800; font-size: 1.15rem; color: var(--azul-noite); }
.aba-dia-total { font-size: .8rem; color: var(--tinta-suave); }
.aba-dia-hoje { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--amarelo); color: var(--tinta); border-radius: 99px; padding: 0 .5rem; }
.abas-dias .aba-semana { font-weight: 700; font-size: 1rem; color: var(--azul); }
.abas-dias button[aria-pressed="true"] { background: var(--azul-noite); border-color: var(--azul-noite); }
.abas-dias button[aria-pressed="true"] .aba-dia-nome, .abas-dias button[aria-pressed="true"] .aba-dia-total, .abas-dias .aba-semana[aria-pressed="true"] { color: #fff; }

.painel-coleta { margin-top: 1.75rem; background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 1.75rem; box-shadow: var(--sombra); min-height: 200px; }
.cabeca-dia { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 3px solid var(--azul-claro); }
.cabeca-dia h2, .cabeca-dia h3 { font-size: 1.7rem; display: flex; align-items: center; gap: .75rem; }
.cabeca-dia p { color: var(--tinta-suave); }
.locais-do-dia { columns: 3 240px; column-gap: 1.5rem; list-style: none; }
.locais-do-dia li { display: flex; align-items: flex-start; gap: .55rem; break-inside: avoid; padding: .45rem 0; border-bottom: 1px dashed var(--linha); line-height: 1.35; }
.locais-do-dia .ic-p { color: var(--azul); margin-top: .2rem; }

.grade-semana { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cartao-semana { border: 1px solid var(--linha); border-radius: 12px; padding: 1rem 1.1rem; background: var(--nevoa); }
.cartao-semana.e-hoje { border-color: var(--amarelo); background: var(--amarelo-claro); }
.cartao-semana h3 { font-size: 1.2rem; display: flex; align-items: center; gap: .6rem; }
.total-semana { color: var(--tinta-suave); font-size: .88rem; margin-bottom: .5rem; }
.cartao-semana ul { list-style: none; max-height: 260px; overflow-y: auto; font-size: .95rem; line-height: 1.35; padding-right: .4rem; }
.cartao-semana li { padding: .25rem 0; border-bottom: 1px dashed var(--linha); }

.resultados-busca { list-style: none; display: grid; gap: .6rem; }
.resultados-busca li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding: .85rem 1rem; border: 1px solid var(--linha); border-radius: 12px; background: var(--nevoa); }
.nome-do-local { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--azul-noite); }
.nome-do-local .ic-p { color: var(--azul); }
.dias-do-local { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dias-do-local small { color: var(--tinta-suave); margin-right: .2rem; }
.selo-dia { display: inline-grid; place-items: center; min-width: 3rem; height: 2.1rem; border-radius: 8px; background: var(--azul); color: #fff; font-weight: 800; font-size: .92rem; padding: 0 .5rem; }
.selo-dia.e-hoje { background: var(--amarelo); color: var(--tinta); }
.sem-resultado { display: grid; justify-items: center; text-align: center; gap: .4rem; padding: 1.5rem 1rem; color: var(--tinta-suave); }
.sem-resultado .ic { color: var(--azul); width: 2.2rem; height: 2.2rem; }
.sem-resultado strong { color: var(--tinta); }

.ajuda-coleta { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2rem; background: var(--azul-claro); border-radius: 14px; padding: 1.4rem 1.5rem; }
.icone-ajuda { flex: none; width: 3rem; height: 3rem; border-radius: 12px; background: var(--azul); color: #fff; display: grid; place-items: center; }
.ajuda-coleta h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.ajuda-coleta p { color: var(--tinta); max-width: 70ch; }
.fonte-coleta { margin-top: .5rem; font-size: .92rem; color: var(--tinta-suave) !important; }

@media (max-width: 1000px) {
  .grade-semana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .abas-dias { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
  .abas-dias button { min-height: 62px; padding: .35rem .1rem; border-radius: 10px; }
  .aba-dia-nome { font-size: .95rem; }
  .abas-dias .aba-semana { grid-column: 1 / -1; min-height: 48px; }
  .painel-coleta { padding: 1.1rem; }
  .cabeca-dia h2, .cabeca-dia h3 { font-size: 1.35rem; }
  .grade-semana { grid-template-columns: minmax(0, 1fr); }
  .aviso-hoje { display: flex; }
  .ajuda-coleta { flex-direction: column; }
}
html.alto-contraste .busca-coleta input, html.alto-contraste .aviso-hoje, html.alto-contraste .abas-dias button, html.alto-contraste .painel-coleta, html.alto-contraste .cartao-semana,
html.alto-contraste .resultados-busca li, html.alto-contraste .ajuda-coleta, html.alto-contraste .selo-dia {
  background: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important;
}
html.alto-contraste .abas-dias button[aria-pressed="true"], html.alto-contraste .selo-dia.e-hoje, html.alto-contraste .cartao-semana.e-hoje { border: 2px solid #FFFF00 !important; }

/* =========================================================
   Página "Como usar o Colab" (como-usar-o-colab.html)
   ========================================================= */
.secao-colab { padding: 3.5rem 0; }
.secao-colab h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.25rem; }
.secao-colab.secao-clara { background: var(--nevoa); }
.colab-apresentacao { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.texto-colab p + p { margin-top: 1rem; }
.data-colab { display: inline-flex; align-items: center; gap: .5rem; background: var(--verde-claro); color: var(--verde); font-weight: 700; border-radius: 10px; padding: .55rem .9rem; margin-top: 1.5rem !important; }
.cartaz-colab { justify-self: center; max-width: 420px; }
.cartaz-colab img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--sombra); }
.cartaz-colab figcaption { margin-top: .6rem; font-size: .88rem; color: var(--tinta-suave); text-align: center; }

.recursos-colab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; list-style: none; }
.recursos-colab li { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 1.4rem; display: grid; gap: .6rem; align-content: start; box-shadow: var(--sombra); }
.icone-recurso { width: 3rem; height: 3rem; border-radius: 12px; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; }
.recursos-colab h3 { font-size: 1.2rem; line-height: 1.2; }
.recursos-colab p { color: var(--tinta); font-size: 1rem; line-height: 1.5; }

.beneficios-colab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; list-style: none; }
.beneficios-colab li { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--linha); border-left: 6px solid var(--verde); border-radius: 12px; padding: 1.25rem; background: #fff; }
.beneficios-colab .ic { color: var(--verde); width: 2rem; height: 2rem; margin-top: .1rem; }
.beneficios-colab h3 { font-size: 1.2rem; margin-bottom: .3rem; }

.secao-colab.secao-escura { background: var(--azul-noite); color: #fff; }
.secao-escura h2 { color: #fff; }
.fala-colab { position: relative; display: grid; gap: 1rem; padding-left: 1.5rem; border-left: 6px solid var(--amarelo); }
.fala-colab p { font-size: 1.3rem; line-height: 1.55; color: #fff; }
.fala-colab footer { color: var(--amarelo); font-weight: 700; }
.fecho-colab { margin-top: 2rem; color: #DCE6F3; max-width: 70ch; }

.baixar-colab { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; background: var(--azul-claro); border-radius: 16px; padding: 1.75rem 2rem; }
.baixar-colab h2 { margin-bottom: .3rem; }
.baixar-colab p { color: var(--tinta-suave); }
.fonte-colab { margin-top: 1.5rem; font-size: .92rem; color: var(--tinta-suave); }

@media (max-width: 1100px) {
  .recursos-colab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beneficios-colab { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .colab-apresentacao { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 600px) {
  .secao-colab { padding: 2.5rem 0; }
  .recursos-colab { grid-template-columns: minmax(0, 1fr); }
  .fala-colab p { font-size: 1.1rem; }
  .baixar-colab { padding: 1.4rem; }
}
html.alto-contraste .recursos-colab li, html.alto-contraste .beneficios-colab li, html.alto-contraste .baixar-colab, html.alto-contraste .secao-colab.secao-clara, html.alto-contraste .data-colab {
  background: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important;
}

/* =========================================================
   Página "Plano de Mobilidade Urbana" (plano-de-mobilidade-urbana.html)
   ========================================================= */
.secao-plano { padding: 3.5rem 0; }
.secao-plano h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.introducao-plano { max-width: 78ch; color: var(--tinta-suave); margin-bottom: 1.75rem; }
.texto-plano p + p, .secao-plano.secao-clara .container-estreito p + p { margin-top: 1rem; }
.plano-duas-colunas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.painel-numeros { position: sticky; top: 90px; background: var(--azul-noite); color: #fff; border-radius: 16px; padding: 1.6rem; display: grid; gap: 1.1rem; overflow: hidden; }
.painel-numeros::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--verde) 0 55%, var(--amarelo) 55% 73%, var(--azul-logo) 73%); }
.painel-numeros h3 { color: #fff; font-size: 1.25rem; margin-top: .3rem; }
.numero-grande { display: grid; gap: .25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.numero-grande b { font-size: 2.4rem; line-height: 1; font-weight: 800; color: var(--amarelo); letter-spacing: -.02em; }
.numero-grande span { color: #DCE6F3; font-size: .98rem; line-height: 1.45; }
.quem-tem { color: #DCE6F3; font-size: .95rem; line-height: 1.45; }
.quem-tem strong { color: #fff; }

.cartoes-participar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.cartao-participar { background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 1.6rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .8rem; }
.cartao-participar .link-seta { margin-top: auto; padding-top: .4rem; }
.cartao-participar h3 { font-size: 1.4rem; }
.cartao-participar .etiqueta { align-self: flex-start; }

.etapas-plano { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; counter-reset: etapa; }
.etapas-plano li { position: relative; display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 1.1rem 1.2rem; }
.numero-etapa { flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--azul-noite); color: var(--amarelo); display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; }
.etapas-plano h3 { font-size: 1.1rem; line-height: 1.25; }

.eixos-plano { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; list-style: none; }
.eixos-plano > li { background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 1.5rem; display: grid; gap: .7rem; align-content: start; box-shadow: var(--sombra); }
.eixos-plano > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.icone-eixo { width: 3rem; height: 3rem; border-radius: 12px; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; }
.eixos-plano h3 { font-size: 1.35rem; }
.quem-representa { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--tinta-suave); margin-top: .3rem; }
.chips-eixo { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; }
.chips-eixo li { background: var(--verde-claro); color: var(--verde); font-weight: 600; font-size: .92rem; line-height: 1.3; border-radius: 99px; padding: .3rem .85rem; }

.barra-documentos { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-bottom: 1.25rem; }
.busca-documentos { margin-top: 0; flex: 1 1 340px; max-width: 560px; }
.resumo-documentos { color: var(--tinta-suave); }
.grupos-documentos { display: grid; gap: .8rem; }
.grupo-documentos { background: #fff; border: 1px solid var(--linha); border-radius: 14px; }
.grupo-documentos[open] { border-color: var(--azul); box-shadow: var(--sombra); }
.grupo-documentos summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; min-height: 68px; }
.grupo-documentos summary::-webkit-details-marker { display: none; }
.numero-grupo { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; font-weight: 800; }
.grupo-documentos[open] .numero-grupo { background: var(--azul); color: #fff; }
.texto-grupo { flex: 1; display: grid; line-height: 1.3; }
.texto-grupo strong { color: var(--azul-noite); font-size: 1.1rem; }
.texto-grupo small { color: var(--tinta-suave); font-size: .88rem; }
.contagem-grupo { color: var(--tinta-suave); font-size: .9rem; white-space: nowrap; }
.seta-grupo { color: var(--azul); transition: transform .2s; }
.grupo-documentos[open] .seta-grupo { transform: rotate(180deg); }
.lista-documentos { list-style: none; border-top: 1px solid var(--linha); columns: 2 340px; column-gap: 0; }
.lista-documentos li { break-inside: avoid; }
.lista-documentos a { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.2rem; text-decoration: none; color: var(--tinta); border-bottom: 1px solid var(--linha); line-height: 1.3; min-height: 52px; }
.lista-documentos a:hover { background: var(--azul-claro); }
.lista-documentos .ic-p { color: var(--azul); }
.titulo-documento { flex: 1; font-size: .98rem; }
.selo-arquivo { flex: none; background: var(--coral-claro); color: var(--coral); font-size: .7rem; font-weight: 800; letter-spacing: .04em; border-radius: 6px; padding: .3rem .45rem; }
.selo-arquivo.e-pagina { background: var(--azul-claro); color: var(--azul); }
.sem-documentos { padding: 1.5rem; text-align: center; color: var(--tinta-suave); border: 2px dashed var(--linha); border-radius: 14px; background: #fff; }
.redes-plano { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; }

@media (max-width: 1100px) {
  .etapas-plano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .plano-duas-colunas, .cartoes-participar, .eixos-plano { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .painel-numeros { position: static; }
}
@media (max-width: 600px) {
  .secao-plano { padding: 2.5rem 0; }
  .etapas-plano { grid-template-columns: minmax(0, 1fr); }
  .grupo-documentos summary { flex-wrap: wrap; gap: .5rem .8rem; padding: .9rem 1rem; }
  .contagem-grupo { order: 4; margin-left: 3.1rem; }
  .lista-documentos { columns: 1; }
}
html.alto-contraste .painel-numeros, html.alto-contraste .cartao-participar, html.alto-contraste .etapas-plano li, html.alto-contraste .eixos-plano > li, html.alto-contraste .grupo-documentos,
html.alto-contraste .lista-documentos a, html.alto-contraste .chips-eixo li, html.alto-contraste .sem-documentos {
  background: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important;
}

/* "Ler mais" do cartão da Equipe de Acompanhamento */
.ler-mais { display: grid; gap: .8rem; }
.ler-mais summary { justify-self: start; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1.1rem; border: 2px solid var(--azul); border-radius: 8px; color: var(--azul); font-weight: 700; background: #fff; }
.ler-mais summary::-webkit-details-marker { display: none; }
.ler-mais summary:hover { background: var(--azul-claro); }
.ler-mais summary .ic-p { transition: transform .2s; }
.ler-mais[open] summary .ic-p { transform: rotate(180deg); }
.ler-mais[open] summary { margin-bottom: .2rem; }
.ler-mais:not([open]) .rotulo-aberto, .ler-mais[open] .rotulo-fechado { display: none; }
.ler-mais p + p { margin-top: 0; }

/* =========================================================
   Linha fina de onda do mar entre as seções das páginas internas (a página inicial não usa)
   Vale para as páginas com <body class="pagina-interna">
   ========================================================= */
.pagina-interna main > section,
.pagina-interna main > .corpo-servico { position: relative; }
.pagina-interna main > section.filtros-obras { position: sticky; }
.pagina-interna main > section + section::before,
.pagina-interna main > .topo-servico + .corpo-servico::before {
  content: ''; position: absolute; left: 0; right: 0; top: -7px; height: 14px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'%3E%3Cpath d='M0 7Q20 0 40 7T80 7' fill='none' stroke='%238FADD3' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 80px 14px;
  animation: onda-divisoria 18s linear infinite;
}
@keyframes onda-divisoria { from { background-position: 0 50%; } to { background-position: 80px 50%; } }
/* sem linha onde já existe onda própria ou uma barra fixa */
.pagina-interna main > .faixa-hino + section::before,
.pagina-interna main > .filtros-obras + section::before,
.pagina-interna main > .faixa-hino::before { display: none; }
html.alto-contraste .pagina-interna main > section + section::before,
html.alto-contraste .pagina-interna main > .topo-servico + .corpo-servico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'%3E%3Cpath d='M0 7Q20 0 40 7T80 7' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Socó, ave nativa da lagoa (o nome Saquarema vem de "socó-rema", bando de socós), pousado em cima de uma palavra do título */
.poleiro { position: relative; display: inline-block; }
.poleiro::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% - var(--pouso, .3em)); width: .68em; height: .8em; transform: translateX(-50%);
  background: url('../imagens/soco.svg') no-repeat center bottom / contain; pointer-events: none;
}
/* o socó fica atrás das letras vizinhas (ex.: o acento do "í" de Município passa na frente da cauda) */
.poleiro::before { z-index: -1; }
.pagina-interna main > section.topo-servico { z-index: 0; }
html.alto-contraste .poleiro::before { filter: brightness(0) invert(1); }
@media (max-width: 600px) { .poleiro::before { width: .6em; height: .71em; } }

/* letras com haste alta (b, d, l) ficam um pouco acima das maiúsculas */
.poleiro.alto { --pouso: .2em; }
/* nas páginas de serviço (IPTU, Acessibilidade) a onda também separa os blocos de texto */
.pagina-interna .conteudo-servico > section + section { position: relative; }
.pagina-interna .conteudo-servico > section + section::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(-1.5rem - 7px); height: 14px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'%3E%3Cpath d='M0 7Q20 0 40 7T80 7' fill='none' stroke='%238FADD3' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 80px 14px; animation: onda-divisoria 18s linear infinite;
}
html.alto-contraste .pagina-interna .conteudo-servico > section + section::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'%3E%3Cpath d='M0 7Q20 0 40 7T80 7' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* letras sem haste (a, e, o, p...) têm o topo no meio da altura: o socó pousa mais baixo */
.poleiro.baixo { --pouso: .6em; }
/* socó SENTADO: para letreiros em que não há letra plana onde ele fique em pé (letras redondas ou pontudas).
   O corpo "senta" na letra e as pernas ficam escondidas atrás dela (o socó já fica atrás das letras). */
.poleiro.sentado { --pouso: .36em; }
.poleiro.sentado.alto { --pouso: .26em; }
.poleiro.sentado.baixo { --pouso: .66em; }