/* ---------------------------------------------------------------------------
   O campo teal do topo, nas duas telas
   --------------------------------------------------------------------------- */

/* O mesmo hero serve o índice e a página da cidade, para as duas serem da
   mesma família. O que muda entre elas é o modificador --cidade, e o que ele
   carrega é o peso do retrato: no índice a foto é a apresentação do Joel e
   trabalha; na cidade é a mesma foto nas 68 páginas, então ali ela é contexto
   e quem manda na composição é o nome da cidade.

   O campo encosta no cabeçalho do site, que é teal também, e os dois viram uma
   massa só de propósito. Nada de linha divisória: quem separa é a composição
   de dentro e o brilho de baixo. */
.jw-hero {
	position: relative;
	/* o retrato encosta na base e o que passa disso é aqui que é cortado */
	overflow: hidden;
	padding-block: clamp(20px, 3.5vw, 48px) 0;
}

/* A "variação de luz" que separa o hero do cabeçalho sem desenhar borda: um
   brilho muito de leve subindo do canto de baixo, atrás do retrato. É o que
   descola a figura do fundo chapado. Fora do fluxo e sem apanhar ponteiro. */
.jw-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(115% 78% at 76% 108%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 62%);
}

/* Duas colunas, texto à esquerda e retrato à direita. As áreas são nomeadas
   porque o arranjo do celular NÃO é o do desktop encolhido: no celular o
   número precisa da largura inteira, senão ele não cabe (é nowrap, um valor
   não se quebra ao meio), e a foto divide a faixa de baixo com o texto miúdo.
   Com áreas, os dois arranjos ficam escritos por extenso, um debaixo do outro.

   minmax(0, 1fr) e não 1fr: uma coluna 1fr nunca encolhe abaixo do conteúdo
   mais largo, e o total, que é nowrap, empurraria a grade para fora da tela.
   Este é o tipo de rolagem horizontal que só aparece em 320px. */
.jw-hero__grade {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: clamp(12px, 3.5vw, 56px);
	grid-template-areas:
		"titulo titulo"
		"intro  intro"
		"total  total"
		"resumo retrato"
		"quem   retrato";
}
.jw-hero--cidade .jw-hero__grade {
	grid-template-areas:
		"voltar voltar"
		"titulo titulo"
		"total  total"
		"resumo retrato";
}

/* Tudo começa no alto da própria faixa; só o retrato é apoiado na base. */
.jw-hero__grade > * { align-self: start; }

/* 720px, e não 900: em 768, que é a tablet de pé, o arranjo do celular deixava
   uma coluna de texto de 720px com uma foto de 190px pendurada no canto, e
   empurrava a primeira cidade da lista para 709px. Com as duas colunas de
   verdade, a mesma tela fecha o hero em pouco mais de 380px. */
@media (min-width: 720px) {
	/* Com largura, o retrato vira uma coluna inteira e o texto centraliza na
	   altura dele. As duas linhas "." de sobra, em 1fr, são o que faz essa
	   centralização: elas engolem a folga em cima e embaixo, e assim as linhas
	   de texto ficam do tamanho do texto em vez de esticarem para preencher a
	   altura da foto, o que abriria vãos irregulares entre elas. */
	.jw-hero__grade {
		grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
		grid-template-rows: 1fr auto auto auto auto auto 1fr;
		grid-template-areas:
			".      retrato"
			"titulo retrato"
			"intro  retrato"
			"total  retrato"
			"resumo retrato"
			"quem   retrato"
			".      retrato";
	}
	.jw-hero--cidade .jw-hero__grade {
		grid-template-columns: minmax(0, 1fr) minmax(0, .26fr);
		grid-template-rows: 1fr auto auto auto auto 1fr;
		grid-template-areas:
			".      retrato"
			"voltar retrato"
			"titulo retrato"
			"total  retrato"
			"resumo retrato"
			".      retrato";
	}
}

.jw-hero__titulo,
.jw-cidade__cabecalho { grid-area: titulo; margin: 0; color: #FFFFFF; }

/* Peso 400 dito na mão: a Anton só tem esse desenho, e o negrito que um h1
   herdaria sairia falsificado pelo navegador, lavado e com contorno sujo. */
.jw-hero__titulo {
	font-family: var(--wp--preset--font-family--display); font-weight: 400;
	font-size: clamp(1.85rem, 6.6vw, 4rem); line-height: 1.02;
}

.jw-hero__intro {
	grid-area: intro; margin: 14px 0 0; color: #FFFFFF;
	font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; max-width: 46ch;
}

/* Apresentação do Joel, para quem chegou pelo QR Code do impresso e não sabe
   de quem é o site. Vive aqui em cima porque no fim da página ela só era
   encontrada depois das 68 cidades, ou seja, nunca. É a informação mais miúda
   da peça de propósito: quem veio ver quanto chegou na cidade não veio ler
   biografia. */
.jw-hero__quem {
	grid-area: quem; margin: 14px 0 0; max-width: 52ch;
	font-size: .85rem; line-height: 1.5; color: #C8E6E4;
}
.jw-hero__quem strong { color: #FFFFFF; font-weight: 600; }
/* Lime, e não o azul-link do site: sobre o teal o azul some. */
.jw-hero__quem a { color: #85E234; text-underline-offset: .25em; }

/* Contorno branco no foco, pelo mesmo motivo: o azul do foco do site não
   aparece sobre o teal. */
.jw-hero a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* O retrato é um recorte de fundo transparente. Sem moldura, sem cartão branco
   atrás, sem canto arredondado: recorte com borda retangular dentro de um
   campo colorido parece foto colada, que é justamente o que se está evitando.
   Ele fica apoiado na base do campo e sangra por ali. */
.jw-hero__retrato { grid-area: retrato; align-self: end; }
.jw-hero__retrato img { display: block; width: 100%; height: auto; }

/* No celular a coluna da foto é estreita e medida em vw, e é essa largura que
   sobra para o texto miúdo ao lado. É por isso que o piso do clamp é baixo: em
   320px cada pixel que a foto toma é um pixel a menos para a apresentação do
   Joel ao lado dela, que já quebra em cinco linhas ali. A da cidade é bem
   menor: lá a foto é contexto, e o nome da cidade é que tem de dominar. */
.jw-hero__retrato { width: clamp(96px, 30vw, 190px); }
.jw-hero--cidade .jw-hero__retrato { width: clamp(76px, 22vw, 130px); }
@media (min-width: 720px) {
	/* Com duas colunas de verdade, quem dá a largura é a coluna. */
	.jw-hero__retrato,
	.jw-hero--cidade .jw-hero__retrato { width: auto; }
}

/* As duas telas usam recorte de fundo transparente, e não fotografia.
   Fotografia dentro de um campo de cor é sempre um retângulo, e retângulo aqui
   lê como imagem colada; o recorte sangra na base e some no fundo. Foi testado
   com foto de plenário e o retângulo aparecia mesmo tratado como painel.
   A da cidade é um retrato diferente do índice, e bem menor: lá ela é a
   apresentação do Joel e trabalha, aqui é contexto, e quem manda na composição
   é o nome da cidade. */

/* ---------------------------------------------------------------------------
   Índice das cidades
   --------------------------------------------------------------------------- */

.jw-indice { padding-block: clamp(18px, 3vw, 36px) clamp(28px, 5vw, 56px); }

/* Este tema não tem reset de box-sizing. Sem border-box, o padding se soma à
   largura de 100% e o campo de busca fica mais largo que a lista, saltando
   para fora dela à direita. */
.jw-indice__busca input { box-sizing: border-box; }

/* O número da região, o motivo de a página existir. nowrap porque é um valor,
   não uma frase: quebrado, ele aparece por um instante sem o "R$" ou sem os
   centavos. Peso 400 pelo mesmo motivo do título. */
.jw-indice__total {
	grid-area: total; margin: 18px 0 0;
	font-family: var(--wp--preset--font-family--display); font-weight: 400;
	font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1;
	color: #85E234; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Os fatos do resumo, cada um em um bloco que não quebra por dentro, e os
   separadores desenhados no vão à esquerda do fato seguinte, fora do fluxo.
   Serve o resumo do índice, de três fatos, e o da cidade, de dois.

   Como texto corrido a linha quebrava em dois lugares ruins entre 320 e 390px:
   em 320 o "·" sobrava sozinho no fim da primeira linha, e em 360 e 390 a
   quebra caía dentro de "de 2023 a 2026", que virava "de" em cima e o resto
   embaixo. Os dois tinham cara de corte, não de escolha.

   Com os fatos inteiros, a quebra só pode cair entre eles. E como o separador é
   um pseudo-elemento posicionado à esquerda do fato, quando esse fato abre uma
   linha o "·" nasce antes da borda do parágrafo e o overflow o recorta. Ele
   some junto com a quebra, em qualquer largura, sem breakpoint para acertar. */
.jw-indice__resumo,
.jw-cidade__resumo {
	grid-area: resumo;
	display: flex; flex-wrap: wrap; column-gap: .9em;
	margin: 10px 0 0; font-size: .95rem; overflow: hidden;
	color: #C8E6E4;
}
.jw-indice__resumo > span,
.jw-cidade__resumo > span { position: relative; white-space: nowrap; }
.jw-indice__resumo > span + span::before,
.jw-cidade__resumo > span + span::before {
	/* fora do fluxo, centrado no vão: o ponto mede perto de .3em */
	content: "·"; position: absolute; right: calc(100% + .3em);
}

/* Sem JavaScript o campo não filtraria nada, então some. Quem esconde é esta
   regra, e não o atributo hidden no HTML com o script tirando depois: o script
   tirava o hidden uns 160ms após a primeira pintura e empurrava a lista 99px
   para baixo, um salto medido de CLS que sozinho comia quase todo o orçamento.
   A classe .js é escrita pelo wp_head de prioridade 1, antes da pintura, então
   aqui a decisão já está tomada quando o navegador desenha. */
html:not(.js) .jw-indice__busca { display: none; }

.jw-indice__busca { margin-bottom: 18px; }
.jw-indice__busca label { display: block; font-size: .85rem; color: #3B4C52; margin-bottom: 6px; }
.jw-indice__busca input {
	width: 100%; font: inherit; padding: .7rem .9rem;
	border: 2px solid #D9E2E6; border-radius: 4px; background: #FFFFFF; color: #004F5F;
}
.jw-indice__busca input:focus-visible { outline: 3px solid #0369A6; outline-offset: 2px; border-color: #0369A6; }
/* O cinza que o navegador dá de graça ao placeholder fica perto do limite de
   4.5:1 e varia de navegador para navegador. Dito aqui, é o mesmo tom suave do
   resto do texto de apoio, e mede 8,9:1 sobre o branco do campo. */
.jw-indice__busca input::placeholder { color: #3B4C52; opacity: 1; }
.jw-indice__vazio { margin: 12px 0 0; color: #3B4C52; }

/* Os filetes: um no topo de cada linha, e o de baixo na lista inteira.

   Estavam ao contrário, com o de baixo em cada linha e o de cima preso ao
   :first-child. Filtrando, o primeiro <li> quase sempre é um dos escondidos, e
   a única linha que sobrava aparecia só com o filete de baixo, com cara de
   palavra sublinhada em vez de item de lista. Agora toda linha visível traz o
   próprio filete de cima, seja ela a primeira do documento ou não, e o de baixo
   fecha a lista onde ela de fato termina, porque linha escondida não ocupa
   altura. Sem resultado nenhum, o script esconde a <ul> e o filete vai junto. */
.jw-indice__lista { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #E5EBEE; }
.jw-indice__cidade { border-top: 1px solid #E5EBEE; }
/* a linha inteira é o alvo, com 44px de altura mínima para o dedo */
.jw-indice__cidade a {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 13px 4px; min-height: 44px; text-decoration: none; color: #004F5F;
}
.jw-indice__cidade a:hover { background: #F4F7F9; }
.jw-indice__nome { font-size: 1rem; }
.jw-indice__valor {
	font-family: var(--wp--preset--font-family--display); font-size: 1.15rem;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* A nota do repasse dividido. Corpo menor que a lista de propósito: ela explica
   a diferença entre o total da faixa e a soma das 68 linhas, e é ressalva, não
   manchete. Fica logo abaixo da lista, que é onde a conta é feita. */
.jw-indice__nota {
	margin: 14px 0 0; font-size: .85rem; line-height: 1.5;
	color: #3B4C52; max-width: 68ch;
}

/* O CTA do fim da página, no lugar do botão flutuante do resto do site.

   É um bloco no fluxo, e não uma barra fixa no rodapé da janela: barra fixa
   voltaria a fazer exatamente o que tirou o flutuante daqui, cobrir as linhas
   de baixo da lista, só que por inteiro. Aqui embaixo ele não tem número
   nenhum para cobrir.

   O retângulo teal que ficava em volta saiu. Ele repetia o campo do topo no pé
   da página e transformava um convite de uma linha numa faixa do tamanho de uma
   dobra. Sobrou o botão, que já é lime, já é redondo e já é diferente de tudo o
   que existe na página: sobre o branco ele fica mais nítido do que ficava
   dentro do próprio bloco de cor.

   O que separa o convite do resto agora é o vão. Ele é grande de propósito: na
   página da cidade o "Compartilhar no WhatsApp" fica logo acima, e os dois
   ficavam a 70px um do outro, quase idênticos. Agora são 84px no celular, e a
   distância é só a metade do conserto: a outra metade é a forma, o alinhamento
   e o preenchimento, todos diferentes. */
.jw-investimentos__cta {
	display: flex; justify-content: center;
	margin-top: clamp(84px, 13vw, 128px);
	margin-bottom: clamp(4px, 1vw, 12px);
}
/* A sombra é a mesma solução que o botão flutuante do site usa para o mesmo
   problema: lime chapado sobre fundo claro mede 1,6:1 contra o branco, ou seja,
   a borda da pílula quase não existe para quem enxerga pouco. Dentro da faixa
   teal que saiu daqui isso não acontecia. Ela é discreta, e o canto redondo e o
   lime continuam sendo os mesmos do convite do resto do site. */
.jw-investimentos__cta a {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 22px; border-radius: 999px;
	background: #85E234; color: #004F5F;
	font-weight: 600; line-height: 1; text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 30, 36, .24);
	transition: background .18s ease;
}
.jw-investimentos__cta a:hover { background: #9BEB57; }
/* Azul do foco do site: aqui o fundo é o branco da página, e não mais o teal
   da faixa que sumiu. Com o contorno branco de antes, o foco desapareceria. */
.jw-investimentos__cta a:focus-visible { outline: 3px solid #0369A6; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .jw-investimentos__cta a { transition: none; } }


/* A página de uma cidade.

   É o destino do QR Code do impresso: alguém em pé na rua, no 4G, querendo
   saber quanto chegou na cidade dele. A ordem responde nessa sequência, quanto,
   em quê e item por item.

   O gabarito é um só para as duas pontas da região. Igrejinha tem 57 repasses e
   R$ 63,2 milhões; Vale Real tem um repasse de R$ 50 mil; a mediana são sete
   repasses. Por isso nada aqui depende de a lista ser longa: o que muda entre
   uma cidade e outra é a quantidade de linhas, não o desenho. */
.jw-cidade { padding-block: clamp(20px, 3.5vw, 44px) clamp(24px, 4vw, 48px); }

/* A saída para o índice, no topo do banner. Lime, e não o azul-link do site,
   porque aqui o fundo é teal e o azul sumiria dentro dele.

   O padding não é respiro, é alvo: só a linha de texto media 23px de altura, um
   pixel abaixo do mínimo de 24px, e este é um link que se toca com o polegar.
   inline-flex para o min-height valer, e justify-self para o alvo terminar onde
   o texto termina, em vez de atravessar a coluna inteira. */
.jw-cidade__voltar {
	grid-area: voltar; justify-self: start;
	display: inline-flex; align-items: center; gap: 7px; min-height: 24px;
	padding: 4px 0; margin-bottom: 10px;
	font-size: .9rem; color: #85E234; text-decoration: none;
	text-underline-offset: .25em;
}
.jw-cidade__voltar:hover { text-decoration: underline; }
/* A seta recua no hover, na direção para onde o link leva. É o único movimento
   do banner, e por isso ele pode existir: um gesto só, que diz para onde vai. */
.jw-cidade__voltar-seta { flex: none; transition: transform .18s ease; }
.jw-cidade__voltar:hover .jw-cidade__voltar-seta { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) {
	.jw-cidade__voltar-seta { transition: none; }
	.jw-cidade__voltar:hover .jw-cidade__voltar-seta { transform: none; }
}

/* O cabeçalho é uma frase só, "Investimentos em <cidade>", com o nome da cidade
   em linha própria embaixo da entrada. Inline e alinhados pela base, a entrada
   ficava pendurada na base de uma letra de 60px, com um vão enorme por cima
   dela: lia como duas coisas soltas, não como uma frase.

   Empilhado NÃO é a sobrelinha proibida. Sobrelinha é rótulo decorativo em
   caixa alta e tracking largo; aqui são as três primeiras palavras da frase, em
   caixa e fonte de texto, e a frase continua sendo lida de cima para baixo sem
   perder nada. Quem manda na composição segue sendo o nome da cidade.

   Peso 400 dito na mão porque a Anton só tem esse desenho e o negrito de um h1
   sairia falsificado pelo navegador. */
.jw-cidade__cabecalho {
	margin: 0;
	font-family: var(--wp--preset--font-family--display); font-weight: 400;
	font-size: clamp(2rem, 6.6vw, 3.8rem); line-height: 1.02;
	/* "São Francisco de Paula" quebra em duas linhas no celular, e sem isto
	   sobra "Paula" sozinha embaixo. O balance reparte as linhas por igual;
	   navegador que não conhece a propriedade quebra como quebrava. */
	text-wrap: balance;
}
/* Corpo próprio, e não uma fração do título: em 320px uma fração deixaria o
   "Investimentos em" com 11px, ilegível. nowrap para as duas palavras nunca se
   separarem uma da outra, que é o que faria a frase parecer partida.

   Na fonte de corpo, e não na display herdada do h1. A Anton é condensada e
   desenhada para corpo grande: aos 22px que sobram aqui ela vira um rótulo
   apertado, exatamente a sobrelinha em caixa alta que este desenho existe para
   matar, só que agora deitada. Em Sora a frase lê como entrada e o nome da
   cidade fica sendo a única voz display do banner, que é quem tem de mandar. */
.jw-cidade__prefixo {
	display: block;
	font-family: var(--wp--preset--font-family--corpo); font-weight: 400;
	font-size: clamp(.85rem, 1.6vw, 1.15rem); line-height: 1.4; letter-spacing: 0;
	color: #C8E6E4; white-space: nowrap;
	margin-bottom: .2em;
}
.jw-cidade__nome { display: block; color: #FFFFFF; }

/* O número grande, o motivo de a página existir. nowrap porque é um valor, não
   uma frase: quebrado, ele aparece por um instante sem o "R$" ou sem os
   centavos. Lime sobre o teal, como o do índice: são o mesmo tipo de número em
   duas telas da mesma família. O menor corpo do clamp mantém o maior total da
   região dentro da coluna em 320px, que é a tela mais estreita que o site
   atende. */
.jw-cidade__total {
	grid-area: total;
	font-family: var(--wp--preset--font-family--display); font-weight: 400;
	font-size: clamp(1.8rem, 5.6vw, 2.8rem); line-height: 1; color: #85E234;
	margin: 12px 0 0; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.jw-cidade__titulo {
	font-family: var(--wp--preset--font-family--display); font-weight: 400;
	font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.2; color: #004F5F;
	margin: clamp(36px, 5vw, 56px) 0 18px;
}
/* O primeiro título abre a ficha logo abaixo do banner, e ali a margem de cima
   seria um vão duplicado: o banner já traz o próprio respiro. */
.jw-cidade__ficha > .jw-cidade__titulo:first-child { margin-top: 0; }

/* Os repasses, do maior para o menor. O filete de cima é da lista e o de baixo
   é de cada linha, então a lista fecha exatamente onde termina. */
.jw-repasses { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E5EBEE; }
.jw-repasse {
	display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
	align-items: baseline; padding: 13px 0; border-bottom: 1px solid #E5EBEE;
}
/* O objeto ocupa a linha inteira e a data divide a de baixo com o valor.
   Em duas colunas no celular, um objeto longo como o de Barão ficava com 160px
   de largura e a linha virava um parágrafo estreito de uma dúzia de linhas. */
.jw-repasse__objeto { grid-column: 1 / -1; color: #004F5F; overflow-wrap: break-word; }
.jw-repasse__data { font-size: .8rem; color: #3B4C52; }
.jw-repasse__valor {
	justify-self: end;
	font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.2rem;
	color: #004F5F; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Com largura para as duas colunas, o valor sobe e passa a alinhar com o
   objeto, que é onde o olho compara uma linha com a outra. */
@media (min-width: 560px) {
	.jw-repasse__objeto { grid-column: 1; }
	.jw-repasse__data { grid-column: 1; grid-row: 2; }
	.jw-repasse__valor { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* A dobra dos repasses é o mesmo <details> da trajetória da home (ver
   areas.css), sem o cartão cinza em volta: o que abre aqui é a continuação da
   mesma lista, e fundo e recuo próprios a fariam parecer outra coisa. */
.jw-cidade .jw-trajetoria { margin: 20px 0 0; }
.jw-cidade .jw-trajetoria__conteudo { margin: 0; padding: 0; background: none; }

/* O repasse dividido com a cidade vizinha, em duas páginas das 68.

   Aqui o fundo cinza é que faz o trabalho: ele tira o bloco da lista e diz, sem
   palavra nenhuma, que este valor é de outra natureza. O que a nota escreve por
   extenso é o porquê, que é o dado NÃO estar somado no número grande lá de
   cima. Um bloco igual às linhas da lista seria lido como a 9ª linha de
   Gravataí, e aí a soma do eleitor deixaria de fechar.

   O valor sai no corpo do valor de UMA linha, não no do número grande. Ele é um
   repasse, não um segundo total: em corpo de manchete disputaria com o total do
   topo e produziria exatamente a leitura que a nota abaixo dele desmente. */
.jw-compartilhado__caixa {
	/* Este tema não tem reset de box-sizing. Sem border-box, o padding se soma
	   ao max-width e a caixa cresce além da coluna que a lista de repasses
	   ocupa, saltando para fora dela à direita. */
	box-sizing: border-box;
	background: #F4F7F9; padding: clamp(16px, 3vw, 22px); max-width: 62ch;
}
/* Hoje é um repasse só. Se a planilha trouxer dois, eles não se encostam. */
.jw-compartilhado__caixa + .jw-compartilhado__caixa { margin-top: 12px; }
.jw-compartilhado__valor {
	margin: 0;
	font-family: var(--wp--preset--font-family--display); font-weight: 400;
	font-size: 1.4rem; line-height: 1; color: #004F5F;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jw-compartilhado__fato { margin: 6px 0 0; font-size: .8rem; color: #3B4C52; overflow-wrap: break-word; }
.jw-compartilhado__nota { margin: 14px 0 0; font-size: .9rem; line-height: 1.6; color: #3B4C52; }
/* O link é a única saída daqui para a página da outra cidade, e sobre o cinza
   claro ele precisa continuar parecendo link. Mesmo azul do "Todas as cidades". */
.jw-compartilhado__nota a { color: #0369A6; }

/* O botão de compartilhar, no fim do conteúdo da cidade.

   Ele e o "Mande Mensagem" eram dois botões verdes quase iguais a 70px um do
   outro, e a essa distância ninguém lê rótulo, lê forma. Só que são intenções
   diferentes: compartilhar é o leitor passando a página adiante, mandar mensagem
   é falar com a campanha. Agora a forma diz isso.

   Este é o SECUNDÁRIO: contorno em vez de preenchimento, canto reto, corpo
   menor, encostado na lista que ele compartilha, alinhado à esquerda como o
   resto do conteúdo. O convite é o principal: pílula lime cheia, centralizada,
   e bem mais abaixo. Forma, cor, alinhamento e distância, os quatro diferentes.

   O ícone e o rótulo herdam a cor do contorno, e no hover a peça inteira vira
   um bloco chapado teal. É a mesma pele do site, sem cor nova nenhuma.

   Nada aqui é position: fixed, e não é descuido. O botão flutuante saiu destas
   páginas justamente porque cobria a coluna dos valores, e no celular cortava os
   últimos dígitos, o que não se lê como valor escondido, se lê como número
   menor. Este fica no fluxo, depois da lista, sem nada embaixo para cobrir. */
.jw-compartilhar {
	/* Este tema não tem reset de box-sizing, e aqui há padding e borda dos dois
	   lados: sem border-box, o max-width abaixo deixaria de segurar o botão
	   dentro da coluna em 320px. */
	box-sizing: border-box; max-width: 100%;
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: clamp(18px, 2.5vw, 26px);
	padding: 11px 18px;
	background: none; color: #004F5F; border: 2px solid #004F5F;
	font-size: .95rem; font-weight: 600; line-height: 1.25;
	text-decoration: none; border-radius: 4px;
	transition: background-color .18s ease, color .18s ease;
}
/* O ícone não encolhe: em flex ele é o primeiro a ceder, e no celular vira um
   losango achatado ao lado de um rótulo de três palavras. */
.jw-compartilhar .jw-icone { flex: 0 0 auto; }
.jw-compartilhar:hover { background: #004F5F; color: #FFFFFF; }
/* Azul do foco do site, que aqui é sobre o branco da página. */
.jw-compartilhar:focus-visible { outline: 3px solid #0369A6; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .jw-compartilhar { transition: none; } }