/* Identidade: o Instagram do Bruno, em versão premium.
   Azul em campos inteiros, títulos em caixa-alta inclinada.
   Cores de apoio (decisão de 28/09/2026, com o logo novo):
   VERDE é o destaque — faixas, bairro escolhido, títulos marcados, ícones.
   AMARELO ficou reservado ao que leva para o WhatsApp: os botões de contato
   e o botão flutuante. Se um amarelo aparecer em algo que não abre o WhatsApp,
   está errado. */
:root {
  --azul: #1450d8;              /* azul vivo do Instagram: campo dominante */
  --azul-noite: #0e3aa6;
  --azul-fundo: #0a2a7a;
  --azul-vivo: #3a74ff;         /* estado: hover, foco, seleção */
  --azul-claro: #e3ebff;        /* texto secundário sobre azul */
  --amarelo: #ffc400;           /* SÓ WhatsApp: botões de contato e o flutuante */
  --verde: #00bd47;             /* destaque; medido no miolo do verde do logo */
  --verde-vivo: #00d251;        /* estado: hover do botão verde */
  --verde-claro: #34d96a;       /* verde como TEXTO sobre azul escuro, que precisa clarear */

  /* Gradientes: sempre azul sobre azul, correndo na diagonal dos títulos */
  /* Degradês de variação curta: mesma cor respirando, nunca dois tons brigando */
  --grad-abertura: linear-gradient(120deg, #1145c0 0%, #1450d8 100%);
  --grad-noite: linear-gradient(170deg, #0f3fb0 0%, #0c3192 100%);
  --grad-azul: linear-gradient(120deg, #1147c6 0%, #1554e0 100%);
  --grad-amarelo: var(--amarelo);
  --amarelo-escuro: #e6b800;
  --branco: #ffffff;
  --gelo: #eef2fb;
  --tinta: #10192e;             /* texto sobre claro */
  --tinta-suave: #47566f;
  --erro: #b3261e;

  --inclina: -8deg;
  --raio: 4px;

  --fonte: "Onest", system-ui, sans-serif;            /* texto corrido */
  --fonte-titulo: "Anybody", "Onest", sans-serif;     /* títulos, nome, botões, etiquetas */
  --gutter: clamp(16px, 4vw, 48px);
  --secao: clamp(72px, 10vw, 136px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; scrollbar-color: var(--azul) var(--gelo); }
body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font: 400 1.125rem/1.6 var(--fonte);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--azul-vivo);
}
::selection { background: var(--verde-claro); color: var(--azul-noite); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }

.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--verde); color: var(--azul-fundo); font-weight: 700;
}
.pular:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.trabalho :focus-visible, .quem :focus-visible, .form :focus-visible { outline-color: var(--azul-vivo); }

/* ---------- Voz de título: caixa-alta condensada inclinada ---------- */
/* A condensada itálica é voz de manchete: abertura, mapa, chamada do formulário e nome do bairro.
   Todo o resto usa a Onest, que é mais sóbria. */
.nome-gigante, .painel__nome, .na-rua__frase, .bairros .titulo, .fale .titulo {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
}
.trabalho .titulo, .quem .titulo, .acao h3, .fatos dt {
  font-family: var(--fonte); font-style: normal; text-transform: none; letter-spacing: -.02em;
}
.titulo {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);

}
/* O destaque do título é mudança de cor, não faixa */
.titulo mark { background: none; color: var(--azul); }
.titulo--claro { color: var(--branco); }
.titulo--claro mark { color: var(--verde-claro); }

.intro { margin-top: 24px; max-width: 52ch; font-size: 1.2rem; color: var(--tinta-suave); }
.intro--claro { color: var(--azul-claro); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 2px solid transparent; border-radius: var(--raio);
  font: 800 1rem/1 var(--fonte-titulo); letter-spacing: .02em; text-transform: uppercase; font-style: italic;
  font-variation-settings: "wdth" 85;
  text-decoration: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .2s, box-shadow .25s;
}
.btn--amarelo { background: var(--grad-amarelo); color: var(--azul-noite); box-shadow: 0 6px 16px -8px rgb(7 29 88 / .5); }
.btn--amarelo:hover { background: #ffd23d; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgb(7 29 88 / .55); }
.btn--amarelo:active { transform: translateY(0); }
/* verde: ação que não abre o WhatsApp, como "Veja as indicações" */
.btn--verde { background: var(--verde); color: var(--azul-fundo); box-shadow: 0 6px 16px -8px rgb(7 29 88 / .5); }
.btn--verde:hover { background: var(--verde-vivo); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgb(7 29 88 / .55); }
.btn--verde:active { transform: translateY(0); }
.btn--vazado { border-color: rgb(255 255 255 / .45); color: var(--branco); }
.btn--vazado:hover { border-color: var(--branco); background: rgb(255 255 255 / .08); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .9rem; }
.btn--lg { min-height: 60px; padding: 0 32px; font-size: 1.1rem; }
.btn--cheio { width: 100%; }

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 40;
  transition: background-color .3s, box-shadow .3s;
}
/* Veu escuro so no alto da pagina. O menu e a marca sao brancos e passam por
   cima do nome gigante da abertura, que tambem e branco: sem o veu eles
   desaparecem. Ele se apaga quando a barra solida entra, para nao escurecer
   duas vezes. Desce 28 px abaixo da barra para o degrade terminar no nada. */
.topo::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(10 42 122 / .72), rgb(10 42 122 / .34) 60%, rgb(10 42 122 / 0));
  transition: opacity .3s;
}
.topo.is-rolado::before { opacity: 0; }
.topo.is-rolado { background: var(--azul-fundo); box-shadow: 0 8px 24px -12px rgb(0 0 0 / .4); }
.topo__in { display: flex; align-items: center; gap: 32px; height: 72px; }
/* ---------- Marca ----------
   O logo novo, refeito em código na Anybody que o site já carrega: fica nítido
   em qualquer tamanho, não tem fundo e troca de cor conforme o campo.
   PROVISÓRIO: é uma reconstrução, não o arquivo de quem desenhou o logo. */
.marca {
  display: inline-grid; grid-template-columns: auto auto; align-items: center;
  gap: 0 .34em; font-size: 1.05rem; line-height: 1; text-decoration: none;
  transition: opacity .2s;
}
.marca:hover { opacity: .85; }
.marca__txt { display: grid; gap: .05em; }
.marca__acima, .marca__nome {
  font-family: var(--fonte-titulo); font-weight: 800; font-style: normal;
  font-variation-settings: "wdth" 100; text-transform: uppercase; line-height: 1;
}
.marca__acima { font-size: .42em; letter-spacing: .07em; color: var(--verde); }
.marca__nome { font-size: 1em; letter-spacing: -.03em; color: var(--azul); white-space: nowrap; }
.marca__seta { width: .6em; height: .6em; color: var(--verde); }
/* sobre campo azul, que é onde ela aparece hoje: cabeçalho e rodapé */
.marca--invertida .marca__nome { color: var(--branco); }
.marca--invertida .marca__acima, .marca--invertida .marca__seta { color: var(--verde-claro); }
.marca--grande { font-size: clamp(1.4rem, 3.2vw, 1.9rem); }
.menu-botao {
  display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1.5px solid rgb(255 255 255 / .45); border-radius: var(--raio); background: none; color: var(--branco); cursor: pointer;
}
.menu-botao svg { width: 22px; height: 22px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { color: var(--branco); text-decoration: none; font-weight: 600; font-size: 1rem; opacity: .85; }
.menu a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Abertura: sanduíche de camadas ----------
   De trás para a frente: foto da cidade (-2), nome gigante (0), recorte do
   Bruno (1), cargo/frase/botões (2). As três medidas que governam o arranjo
   estão nas variáveis abaixo; mexer nelas é o jeito de reequilibrar a cena. */
.abertura {
  --nome-largura: 68;        /* quanto da largura da tela o nome ocupa, em % */
  --recorte-altura: 84svh;   /* altura do Bruno recortado */
  --recorte-lado: 58%;       /* onde fica o eixo dele: 50% = centro */
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-abertura);
  color: var(--branco);
  padding: calc(72px + clamp(16px, 2.5vw, 36px)) 0 clamp(32px, 4vw, 56px);
  min-height: min(100svh, 940px);
  display: flex; align-items: flex-end;
}

/* 1. fundo: só aparece se o arquivo existir; o véu é ligado pelo motion.js */
.abertura__cidade {
  position: absolute; inset: 0; z-index: -2;
  background: url("assets/sao-caetano.jpg") center / cover no-repeat;
}
.abertura__cidade.tem-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(10 42 122 / .58) 0%, rgb(12 49 146 / .36) 44%, rgb(17 69 192 / .2) 78%, rgb(20 80 216 / .14) 100%),
    linear-gradient(0deg, rgb(10 42 122 / .5) 0%, transparent 48%);
}

/* 2. o nome, atravessando a tela. Os dois tamanhos são diferentes de propósito:
      "Bruno" tem 5 letras e "Vassari" tem 7, então precisam de corpos
      diferentes para terminarem na mesma largura. */
.nome-gigante {
  position: absolute; left: 0; right: 0; top: 44%; translate: 0 -50%; z-index: 0;
  margin: 0; display: grid; justify-items: center; text-align: center;
  font-weight: 900; line-height: .72; letter-spacing: -.025em;
  pointer-events: none; user-select: none;
}
.nome-gigante__l1 { color: var(--branco); font-size: calc(var(--nome-largura) * 1vw / 2.34); }
.nome-gigante__l2 {
  position: relative; color: var(--azul-fundo); padding: 0 .08em;
  font-size: calc(var(--nome-largura) * 1vw / 3.02);
}
.nome-gigante__txt { position: relative; animation: surge .8s cubic-bezier(.16,1,.3,1) .35s both; }

/* 3. o recorte, por cima das letras */
/* A proporcao do arquivo fica travada aqui. Sem isso, a figura e absoluta com
   left: 58% e o navegador espreme ela no que sobra ate a borda direita: no
   celular o Bruno virava uma fatia de 164 px de largura, esticada. Com altura
   definida + aspect-ratio a largura passa a ser calculada, nao espremida. */
.abertura__recorte {
  position: absolute; bottom: 0; left: var(--recorte-lado); translate: -50% 0; z-index: 1;
  margin: 0; height: var(--recorte-altura); aspect-ratio: 939 / 1675; pointer-events: none;
}
.abertura__recorte img {
  display: block; width: 100%; height: 100%; max-width: none;
  filter: drop-shadow(-26px 10px 46px rgb(4 18 56 / .5));
}

/* 4. cargo, frase e botões, na frente de tudo e encostados embaixo.
      O véu local atrás deles é o que garante leitura em cima das letras. */
/* o véu do canto de baixo e a caixa de texto sao camadas irmas, com z-index
   explicito: 1 = recorte, 2 = veu, 3 = texto. Pseudo-elemento com z-index
   negativo nao serve aqui, porque ele cai atras do proprio texto. */
.abertura::before {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: min(72%, 860px); height: 72%;
  background: linear-gradient(to top right, rgb(8 34 100 / .88) 0%, rgb(8 34 100 / .55) 38%, transparent 68%);
}
.abertura__in { position: relative; z-index: 3; display: grid; }
.abertura__txt { position: relative; max-width: min(40ch, 36%); }
/* na abertura o cargo fica branco: em verde ele sumiria sobre a faixa verde */
.abertura .cargo { color: var(--branco); }

.abertura::after { /* faixa inclinada na borda de baixo, fechando a abertura */
  content: ""; position: absolute; left: -2%; bottom: 0; width: 30%; height: 5px; z-index: 3;
  background: var(--verde); transform: skewX(var(--inclina)); transform-origin: bottom left;
}

.faixa {
  position: absolute; inset: .08em -.02em .04em; background: var(--verde);
  transform: skewX(var(--inclina)); transform-origin: left;
  animation: faixa 1s cubic-bezier(.16,1,.3,1) .15s both;
}
@keyframes faixa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.nome__txt { animation: surge .8s cubic-bezier(.16,1,.3,1) .35s both; }
@keyframes surge { from { opacity: .001; transform: translateX(-.15em); } to { opacity: 1; transform: none; } }

.cargo {
  margin-top: 28px; font-family: var(--fonte-titulo); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-variation-settings: "wdth" 80; letter-spacing: .06em; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--verde-claro);
}
.mote { margin-top: 12px; max-width: 30ch; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.45; color: var(--azul-claro); }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.moldura img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ---------- O trabalho ---------- */
.trabalho { padding: clamp(56px, 7vw, 96px) 0; background: var(--branco); }
.acoes-lista { margin-top: clamp(40px, 6vw, 72px); border-top: 2px solid var(--azul); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filtro {
  min-height: 44px; padding: 0 18px; border: 1.5px solid #c6d1ea; border-radius: var(--raio);
  background: var(--branco); color: var(--tinta-suave);
  font: 600 .98rem var(--fonte); cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.filtro:hover { border-color: var(--azul); color: var(--azul); }
.filtro.is-ativo { background: var(--azul); border-color: var(--azul); color: var(--branco); }

.acoes-lista { display: grid; gap: 16px; }
/* Pé cortado na diagonal, canto quadrado, fio fino e régua azul no topo.
   É o mesmo desenho dos blocos de notícia e de inscrição: um bloco só,
   três lugares. O corte de 26 px é o mesmo em todos. */
.acao {
  padding: clamp(24px, 3vw, 34px);
  padding-bottom: calc(clamp(24px, 3vw, 34px) + 26px);
  background: var(--branco); border: 0; border-radius: 0;
  border-top: 2px solid var(--azul); box-shadow: inset 0 0 0 1px #dde4f3;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 26px));
}
.acao__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.status {
  padding: 5px 11px 4px; border-radius: var(--raio); background: var(--gelo); color: var(--azul-fundo);
  font-size: .85rem; font-weight: 600;
}
.acao__onde {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: .98rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums;
}
.acao__onde .ico { width: 1.1em; height: 1.1em; color: var(--azul); vertical-align: 0; }
.vinculo-bairro {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 600 .98rem var(--fonte); color: var(--azul); text-decoration: underline; text-underline-offset: .18em;
}
.vinculo-bairro:hover { color: var(--azul-vivo); }
.acao__detalhe { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 28px; margin: 20px 0 0; }
.acao__detalhe dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul);
}
.acao__detalhe dd { margin: 6px 0 0; color: var(--tinta-suave); font-size: 1rem; line-height: 1.55; }
.tema {
  justify-self: start; padding: 5px 12px 4px; background: var(--azul); color: var(--branco);
  font-family: var(--fonte-titulo); font-weight: 800; font-style: italic; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  transform: skewX(var(--inclina));
}
.onde { font-size: .98rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.acao h3 { margin: 14px 0 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.12; color: var(--tinta); max-width: 26ch; }

.rodape-secao { margin-top: 32px; color: var(--tinta-suave); font-size: 1rem; }
.rodape-secao a { color: var(--azul); font-weight: 700; }

/* ---------- Na rua ---------- */
.na-rua { background: var(--branco); overflow: hidden; }
.na-rua__faixa {
  display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; gap: clamp(20px, 3vw, 40px);
  width: min(1400px, 100%); margin-inline: auto; padding: clamp(48px, 7vw, 88px) var(--gutter);
}
.quadro { margin: 0; overflow: hidden; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); aspect-ratio: 4 / 4.4; }
.quadro img { width: 100%; height: 100%; object-fit: cover; }
.quadro--b { aspect-ratio: 1; width: min(100%, 230px); justify-self: center; }
.na-rua__frase {
  text-align: center; font-weight: 900; line-height: .95; color: var(--azul-fundo);
  font-size: clamp(2rem, 4.2vw, 3.6rem); text-wrap: balance;
}
.na-rua__frase span { color: var(--azul); }

/* ---------- Bairros ---------- */
.bairros { background: var(--grad-noite); color: var(--branco); padding: var(--secao) 0; overflow: hidden; }
.bairros__in {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 96px);
  grid-template-areas: "txt mapa" "painel mapa"; grid-template-rows: auto 1fr; align-items: end;
}
.bairros__txt { grid-area: txt; }
.mapa { grid-area: mapa; align-self: center; }
.bairros__painel { grid-area: painel; align-self: start; }
.painel { margin-top: 36px; min-height: 132px; padding: 24px 0; border-top: 1px solid rgb(227 235 255 / .3); border-bottom: 1px solid rgb(227 235 255 / .3); }
.painel__vazio { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; color: var(--azul-claro); font-size: 1rem; }
.painel__vazio .ico { grid-row: span 2; width: 1.9em; height: 1.9em; color: var(--verde-claro); vertical-align: 0; }
.painel__vazio strong { font-size: 1.15rem; color: var(--branco); }
.tema--mini { font-size: .72rem; padding: 3px 8px 2px; }
.painel__nome { font-weight: 900; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--verde-claro); margin-bottom: 18px; }
.seletor { display: grid; gap: 8px; margin-top: 24px; max-width: 360px; font-size: .95rem; color: var(--azul-claro); }
.seletor select {
  min-height: 52px; padding: 0 44px 0 16px; border-radius: var(--raio);
  border: 1.5px solid rgb(227 235 255 / .5); background: rgb(255 255 255 / .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234ade80' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--branco); font: 600 1.05rem var(--fonte); appearance: none;
}

.seletor select option { color: var(--tinta); background: var(--branco); }
.seletor select option:checked { color: var(--azul-fundo); background: var(--gelo); }
.mapa { position: relative; }
.mapa__dica {
  display: flex; justify-content: center; margin-bottom: 8px;
  font: 800 .95rem var(--fonte-titulo); font-style: italic; text-transform: uppercase;
  letter-spacing: .06em; color: var(--verde-claro); min-height: 1.4em;
}
.mapa path.is-sobre { fill: rgb(255 255 255 / .28); stroke: var(--branco); }
.mapa__rotulos text.is-sobre { fill: var(--branco); font-size: 30px; }
@media (max-width: 600px) { .mapa__rotulos text { font-size: 38px; } }
.mapa svg { width: 100%; max-height: 78vh; overflow: visible; }
.mapa path {
  fill: rgb(255 255 255 / var(--peso, .09)); stroke: rgb(227 235 255 / .45); stroke-width: 3; stroke-linejoin: round;
  cursor: pointer; transition: fill .25s, transform .35s cubic-bezier(.16,1,.3,1);
  outline: none;
}
.mapa path:hover { fill: rgb(255 255 255 / .2); }
.mapa path:focus-visible { fill: rgb(255 255 255 / .2); stroke: var(--verde); stroke-width: 6; }
.mapa path.is-ativo { fill: var(--verde); stroke: var(--verde); }
.mapa__rotulos text {
  font: italic 800 24px var(--fonte-titulo); font-variation-settings: "wdth" 70; text-transform: uppercase; letter-spacing: .02em;
  fill: var(--azul-claro); text-anchor: middle; pointer-events: none; transition: fill .25s;
}
.mapa__rotulos text.is-ativo { fill: var(--azul-fundo); }
.mapa__credito { margin-top: 8px; font-size: .75rem; color: rgb(227 235 255 / .75); text-align: right; }

/* Chamada da home: texto de um lado, números do outro */
.trabalho__in {
  display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 80px); align-items: center;
  justify-items: center; text-align: center;
}
.trabalho__txt { display: grid; justify-items: center; }
.trabalho .titulo { max-width: 18ch; }
.trabalho .intro { max-width: 58ch; }
/* volta a duas colunas e alinhado à esquerda se o cartão de resumo for religado */
.trabalho__in:has([data-numeros]:not([hidden])) {
  grid-template-columns: 1.05fr .95fr; justify-items: stretch; text-align: left;
}
.trabalho__in:has([data-numeros]:not([hidden])) .trabalho__txt { justify-items: start; }
.trabalho__txt { max-width: 46ch; }
.trabalho__txt .btn { margin-top: 32px; }
.numeros__in { padding: clamp(24px, 3vw, 32px); background: var(--gelo); }
.resumo__titulo { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.barras { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.barras li { display: grid; grid-template-columns: 8.5rem 1fr 2.5rem; align-items: center; gap: 12px; }
.barras__nome { font-size: 1rem; color: var(--tinta); }
.barras__trilho { height: 10px; border-radius: 999px; background: #dbe3f4; overflow: hidden; }
.barras__cheio { display: block; height: 100%; width: var(--p, 0); border-radius: 999px; background: var(--azul); }
.barras__n { font-weight: 700; color: var(--azul); text-align: right; font-variant-numeric: tabular-nums; }
.resumo__pe { margin-top: 18px; padding-top: 16px; border-top: 1px solid #d5ddf0; color: var(--tinta-suave); font-size: 1rem; }
.resumo__pe strong { color: var(--tinta); }
.numero { display: grid; gap: 4px; padding: 18px 0 0; border-top: 2px solid var(--azul); }
.numero strong { font: 700 clamp(2.2rem, 5vw, 3.4rem)/1 var(--fonte); color: var(--azul); font-variant-numeric: tabular-nums; }
.numero span { color: var(--tinta-suave); font-size: 1rem; }

.fonte-dados { margin-top: 16px; font-size: .92rem; color: var(--tinta-suave); }
.acao__texto { margin-top: 12px; color: var(--tinta-suave); font-size: 1rem; line-height: 1.55; }
.acao__link { display: inline-block; margin-top: 14px; color: var(--azul); font-weight: 600; font-size: .95rem; }
.btn--linha-azul {
  margin-top: 20px; border-color: var(--azul); color: var(--azul); background: var(--branco);
}
.btn--linha-azul:hover { background: var(--gelo); }

/* Página "Pedidos do mandato" */
.pagina-interna { padding-top: 72px; }
.pedidos { padding: clamp(40px, 6vw, 72px) 0 0; }
.pedidos .titulo { max-width: 22ch; }
.busca { display: grid; gap: 8px; margin-top: 32px; max-width: 520px; }
.busca label { font-weight: 600; font-size: .95rem; color: var(--azul); }
.busca input {
  min-height: 52px; padding: 12px 16px; border: 1.5px solid #b9c6e6; border-radius: var(--raio);
  font: 400 1.05rem var(--fonte); color: var(--tinta); background: var(--branco);
}
.busca input:focus { outline: none; border-color: var(--azul-vivo); box-shadow: 0 0 0 3px rgb(58 116 255 / .22); }
.filtros--bairro { margin-top: 10px; }
.filtros--bairro .filtro { font-size: .92rem; min-height: 40px; padding: 0 14px; }
.resultado { margin: 22px 0 16px; font-weight: 600; color: var(--tinta-suave); }
.pedidos .acoes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.chamada-bairro {
  margin: clamp(48px, 7vw, 88px) 0 0; padding: clamp(32px, 5vw, 56px);
  background: var(--grad-noite); color: var(--branco);
}
.chamada-bairro .intro { margin-bottom: 28px; }

/* Página "Na imprensa": cada notícia em seu bloco */
.noticias-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; align-items: start; }
.noticia { display: flex; }
.noticia__link {
  display: flex; flex-direction: column; width: 100%; overflow: hidden; padding-bottom: 26px;
  background: var(--branco); border: 0; border-radius: 0; text-decoration: none;
  border-top: 2px solid var(--azul); box-shadow: inset 0 0 0 1px #dde4f3;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 26px));
  transition: background-color .2s, border-top-color .2s;
}
/* sem salto nem sombra no hover: o bloco é quadrado, então quem responde é a
   cor do fundo e a régua do topo */
.noticia__link:hover { background: #f7f9fe; border-top-color: var(--azul-vivo); }
.noticia__capa { display: block; aspect-ratio: 16 / 9; background: var(--gelo); overflow: hidden; }
.noticia__capa img { width: 100%; height: 100%; object-fit: cover; }
/* bloco sem foto: fio verde no topo e mais respiro no texto */
.noticia__link.sem-capa { border-top-color: var(--verde); }
.noticia__link.sem-capa .noticia__capa { display: none; }
.noticia__link.sem-capa .noticia__corpo { padding-top: 26px; }
.noticia__link.sem-capa .noticia__titulo { font-size: 1.22rem; }
.noticia__corpo { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.noticia__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.noticia__veiculo { font-size: .82rem; font-weight: 700; color: var(--azul); }
.noticia__data { font-size: .82rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.noticia__titulo { font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--tinta); }
.noticia__resumo { font-size: .98rem; line-height: 1.5; color: var(--tinta-suave); }
.noticia__ler { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding-top: 6px; font-size: .92rem; font-weight: 600; color: var(--azul); }
.noticia__ico { width: 1.05em; height: 1.05em; vertical-align: 0; }

/* ---------- Quem é ---------- */
.quem { background: var(--gelo); padding: var(--secao) 0; border-top: 1px solid #dbe3f4; }
.quem__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.quem__in--texto { grid-template-columns: 1fr; }
.quem__in--texto .quem__txt { max-width: 70ch; }
.quem__foto { margin: 0; position: relative; }
.quem__foto::after {
  content: ""; position: absolute; right: -4%; top: 8%; width: 40%; height: 84%;
  background: var(--azul); transform: skewX(var(--inclina)); z-index: 0;
}
.quem__foto img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 75% 40%;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
/* Esteira de fotos: a tira anda devagar e sem parar, e as fotos reaparecem do
   outro lado. O JS duplica a lista e calcula a duração pela largura. */
.carrossel { position: relative; margin-top: clamp(36px, 5vw, 64px); overflow: hidden; }
.carrossel::before, .carrossel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 7vw, 110px); z-index: 2;
  pointer-events: none;
}
.carrossel::before { left: 0; background: linear-gradient(90deg, var(--gelo), transparent); }
.carrossel::after { right: 0; background: linear-gradient(270deg, var(--gelo), transparent); }
.carrossel__tira {
  display: flex; gap: 16px; width: max-content;
  animation: esteira var(--dur, 30s) linear infinite;
}
.carrossel:hover .carrossel__tira { animation-play-state: paused; }
@keyframes esteira { to { transform: translateX(calc(-50% - 8px)); } }
.carrossel__tira figure { flex: 0 0 clamp(230px, 26vw, 330px); margin: 0; }
.carrossel__tira img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%;
  box-shadow: 0 18px 36px -28px rgb(10 42 122 / .7);
}

.quem__txt > p { margin-top: 20px; max-width: 60ch; color: var(--tinta-suave); }
.quem__txt > .titulo + p { margin-top: 28px; }
.fatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 40px 0 0; border-top: 2px solid var(--azul); }
.fatos div { padding: 18px 16px 0 0; }
.fatos dt { font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.1; color: var(--azul); }
.fatos dd { margin: 6px 0 0; font-size: .95rem; color: var(--tinta-suave); line-height: 1.4; }

/* Instagram: chamada e botão. Os posts incorporados saíram em 27/10/2026. */
.insta { background: var(--branco); padding: var(--secao) 0; border-top: 1px solid #dbe3f4; }
.insta .btn { margin-top: clamp(28px, 3vw, 40px); }

/* ---------- Fale ---------- */
.fale { background: var(--gelo); color: var(--tinta); padding: var(--secao) 0; position: relative; }
.fale__in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
/* a caixa amarela de recado e a lista de telefones saíram daqui em 25/09/2026:
   os contatos ficam no rodapé, e o formulário fala por si */

.form {
  display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px);
  background: var(--branco); color: var(--tinta);
  border: 1px solid #dbe3f4; box-shadow: 0 24px 50px -34px rgb(10 42 122 / .55);
}
.form__ok { font-size: 1rem; color: var(--azul); }
.form__ok a { font-weight: 700; }
.campo { display: grid; gap: 7px; }
.campo label { font-weight: 700; font-size: .95rem; color: var(--azul); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid #b9c6e6; border-radius: var(--raio); background: var(--branco);
  font: 400 1.08rem/1.4 var(--fonte); color: var(--tinta);
  transition: border-color .2s, box-shadow .2s;
}
.form select { appearance: none; padding-right: 44px; background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230a2e86' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; }
.form textarea { resize: vertical; min-height: 120px; }
.form ::placeholder { color: #5d6a8a; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--azul); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--azul-vivo); box-shadow: 0 0 0 3px rgb(23 71 196 / .22); }
.form [aria-invalid="true"] { border-color: var(--erro); }
.form__erro { color: var(--erro); font-weight: 600; font-size: .98rem; }

/* ---------- Rodapé ----------
   Quatro blocos: marca, navegação, contato e institucional. Vira duas colunas
   no tablet e uma só no celular. O endereço é o da Câmara, onde fica o gabinete. */
.rodape { background: var(--azul-fundo); color: var(--azul-claro); padding: clamp(56px, 7vw, 88px) 0 32px; }
.rodape__in {
  display: grid; align-items: start;
  grid-template-columns: 1.25fr 1fr 1.1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
}
.rodape__marca { display: grid; justify-items: start; gap: 14px; }
.rodape__nota { max-width: 36ch; font-size: .92rem; line-height: 1.5; color: rgb(227 235 255 / .78); }
.rodape__marca .btn { margin-top: 4px; }

.rodape__col { display: grid; align-content: start; gap: 14px; }
/* sem caixa-alta: o verde e o peso já separam o título da lista */
.rodape__titulo {
  margin: 0; font-family: var(--fonte); font-weight: 700;
  font-size: .95rem; letter-spacing: .01em; color: var(--verde-claro);
}
.rodape__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape__col a { color: var(--branco); font-size: 1rem; text-decoration: none; }
.rodape__col a:hover { color: var(--verde-claro); text-decoration: underline; }

.rodape__contato li { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 9px; }
.rodape__contato .ico { color: var(--verde-claro); vertical-align: 0; }
.rodape__contato a { font-weight: 700; font-variant-numeric: tabular-nums; }
.rodape__contato span { width: 100%; padding-left: 2.1em; font-size: .85rem; color: rgb(227 235 255 / .7); }
.rodape__endereco { font-style: normal; font-size: .92rem; line-height: 1.55; color: rgb(227 235 255 / .78); }

.rodape__fim {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; margin-top: 10px; padding-top: 22px;
  border-top: 1px solid rgb(227 235 255 / .2); font-size: .9rem;
}
.rodape__topo {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--branco); font-weight: 700; text-decoration: none;
}
.rodape__topo svg { width: 1.05em; height: 1.05em; }
.rodape__topo:hover { color: var(--verde-claro); }

/* ---------- Páginas de texto corrido, como a de privacidade ---------- */
.texto { max-width: 68ch; margin-top: clamp(28px, 4vw, 40px); }
.texto h2 {
  margin: clamp(34px, 4.5vw, 52px) 0 0; scroll-margin-top: 96px;
  font-family: var(--fonte); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.2; color: var(--tinta);
}
.texto p, .texto ul { margin-top: 14px; color: var(--tinta-suave); font-size: 1.05rem; line-height: 1.6; }
.texto ul { padding-left: 1.2em; display: grid; gap: 10px; }
.texto strong { color: var(--tinta); font-weight: 700; }
.texto a { color: var(--azul); font-weight: 600; }
.texto code { font-size: .95em; color: var(--azul-noite); }
.texto__data { margin-top: clamp(36px, 5vw, 56px); font-size: .9rem; }
.destaque {
  margin-top: 8px; padding: 20px 22px; background: var(--gelo);
  border-left: 4px solid var(--azul);
}
.destaque p { margin-top: 0; color: var(--tinta); font-size: 1.1rem; }

/* ---------- Área de inscrições ----------
   Páginas escritas prontas por ferramentas/gerar-inscricoes.js. O painel do
   alto responde a única pergunta que traz alguém até aqui: tem algo aberto
   hoje? Por isso ele é campo azul inteiro, como as seções de peso do site.
   Verde é o destaque de "aberto"; amarelo continua só no WhatsApp. */
.agora {
  margin-top: clamp(28px, 4vw, 40px); padding: clamp(24px, 3.4vw, 36px);
  background: var(--grad-noite); color: var(--branco);
}
.agora__rotulo {
  font-family: var(--fonte-titulo); font-weight: 800; font-style: italic;
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-claro);
}
.agora__frase { margin-top: 10px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 700; line-height: 1.2; }
.agora__extra { margin-top: 12px; max-width: 56ch; color: var(--azul-claro); font-size: 1.05rem; }
.agora__extra a { color: var(--verde-claro); font-weight: 700; }
.agora__lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.agora__lista a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 14px 16px; background: rgb(255 255 255 / .1);
  text-decoration: none; transition: background-color .2s;
}
.agora__lista a:hover { background: rgb(255 255 255 / .18); }
.agora__lista strong { font-size: 1.2rem; font-weight: 700; }
.agora__lista span { color: var(--verde-claro); font-weight: 600; font-size: .95rem; }

/* O site não recebe inscrição nenhuma. Isso não é letra miúda de rodapé:
   é o que evita alguém achar que se inscreveu aqui. Fica logo abaixo do painel. */
.aviso {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  margin-top: 18px; padding: 16px 18px;
  background: var(--gelo); border-left: 4px solid var(--verde);
  color: var(--tinta-suave); font-size: .98rem; line-height: 1.55;
}
.aviso .ico { width: 1.4em; height: 1.4em; color: var(--azul); vertical-align: 0; }

/* ---------- Guia da cidade na página principal ----------
   Fica entre o mapa (campo escuro) e o trabalho (branco), então o fundo é o
   gelo: assim os cartões brancos continuam se destacando. Os cartões em si são
   os mesmos da página do guia, sem CSS novo. */
.guia { padding: clamp(56px, 7vw, 96px) 0; background: var(--gelo); }
.guia .insc-grade { margin-top: clamp(32px, 4vw, 48px); }
.guia > .wrap > .btn { margin-top: clamp(28px, 3vw, 40px); }

.insc-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 16px; align-items: start;
}
.insc { display: flex; }
.insc__link {
  display: flex; flex-direction: column; gap: 12px; flex: 1;
  padding: clamp(22px, 2.6vw, 30px);
  padding-bottom: calc(clamp(22px, 2.6vw, 30px) + 26px);
  background: var(--branco); border: 0; border-radius: 0;
  border-top: 2px solid var(--azul); box-shadow: inset 0 0 0 1px #dde4f3;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 26px));
  color: inherit; text-decoration: none;
  transition: background-color .2s, border-top-color .2s;
}
.insc__link:hover { background: #f7f9fe; border-top-color: var(--azul-vivo); }
/* inscrição aberta: a régua do topo acende em verde, que é o destaque do site */
.insc:has(.insc__chip--aberto) .insc__link { border-top-color: var(--verde); }
.insc__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Dentro do cartão o tema deixa de ser etiqueta inclinada e vira letreiro,
   empurrado para a direita, no mesmo desenho dos rótulos pequenos do site
   (Onest, caixa-alta, espaçada). A etiqueta inclinada continua no painel do
   mapa, que é campo azul: lá ela é o único destaque. */
.insc__cabeca .tema, .acao__cabeca .tema {
  margin-left: auto; padding: 0; background: none; transform: none;
  font-family: var(--fonte); font-style: normal; font-weight: 700;
  font-size: .74rem; letter-spacing: .12em; color: var(--azul);
}
.insc__cabeca--pagina { margin-top: clamp(20px, 3vw, 28px); }
/* A pílula sai de cena: a situação vira texto com um quadradinho de cor na
   frente. Verde quando está aberto, azul quando abre em breve, cinza quando
   já encerrou. */
.insc__chip {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--tinta-suave); font: 600 .9rem var(--fonte); white-space: nowrap;
}
.insc__chip::before { content: ""; width: .62em; height: .62em; flex: none; background: #b9c4dc; }
.insc__chip--aberto { color: var(--azul-fundo); font-weight: 700; }
.insc__chip--aberto::before { background: var(--verde); }
.insc__chip--em-breve { color: var(--azul); }
.insc__chip--em-breve::before { background: var(--azul); }
.insc__titulo { font-size: 1.22rem; font-weight: 700; line-height: 1.25; color: var(--tinta); }
.insc__resumo { color: var(--tinta-suave); font-size: 1rem; line-height: 1.5; }
.insc__pe { display: grid; gap: 10px; margin: 2px 0 0; padding-top: 14px; border-top: 1px solid #e4eaf7; }
.insc__pe dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.insc__pe dd { margin: 4px 0 0; font-size: .96rem; color: var(--tinta-suave); line-height: 1.45; }
.insc__ver {
  margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px;
  font-size: .94rem; font-weight: 600; color: var(--azul);
}
.insc__ico { width: 1.1em; height: 1.1em; transition: transform .2s; }
.insc__link:hover .insc__ico { transform: translateX(3px); }

/* ---------- Página de um programa ---------- */
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .92rem; color: var(--tinta-suave); }
.migalhas a { color: var(--azul); font-weight: 600; }
.migalhas > span[aria-hidden] { color: #a9b6d2; }

.titulo--pagina { margin-top: 14px; max-width: 30ch; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.1; }
.titulo--secao {
  margin-top: clamp(44px, 5.5vw, 72px); scroll-margin-top: 96px;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 20px 32px; margin: clamp(28px, 4vw, 40px) 0 0;
  padding-top: clamp(24px, 3vw, 32px); border-top: 2px solid var(--azul);
}
.ficha dt { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.ficha dd { margin: 7px 0 0; color: var(--tinta-suave); font-size: 1rem; line-height: 1.55; }

.insc__acao { display: grid; justify-items: start; gap: 12px; margin-top: clamp(28px, 4vw, 40px); }
.insc__acao-nota { max-width: 48ch; color: var(--tinta-suave); font-size: .95rem; }

.docs { margin: 18px 0 0; padding-left: 1.3em; display: grid; gap: 10px; color: var(--tinta-suave); font-size: 1.05rem; }
.docs li::marker { color: var(--verde); }
.docs__nota { margin-top: 14px; font-size: .95rem; color: var(--tinta-suave); }

.etapas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.etapas li {
  display: grid; grid-template-columns: 12.5rem 1fr; gap: 6px 20px;
  padding: 16px 0; border-bottom: 1px solid #e4eaf7;
}
.etapas li:first-child { border-top: 1px solid #e4eaf7; }
.etapas time { font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
.etapas span { color: var(--tinta-suave); font-size: 1.02rem; line-height: 1.5; }

.corpo { max-width: 68ch; }
.corpo--largo { max-width: 72ch; }
.corpo p { margin-top: 16px; color: var(--tinta-suave); font-size: 1.08rem; line-height: 1.65; }

.fontes { margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 3vw, 30px); background: var(--gelo); }
.fontes__titulo { font-family: var(--fonte); font-weight: 700; font-size: 1.05rem; color: var(--tinta); }
.fontes ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.fontes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fontes li a { color: var(--azul); font-weight: 600; }
.fontes li span { font-size: .9rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.fontes__pe { margin-top: 16px; padding-top: 14px; border-top: 1px solid #d5ddf0; font-size: .95rem; color: var(--tinta-suave); line-height: 1.55; }
.fontes__pe a { color: var(--azul); font-weight: 600; }

.relacionados { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.relacionados a {
  display: grid; gap: 3px; padding: 16px 0; border-bottom: 1px solid #e4eaf7;
  color: inherit; text-decoration: none;
}
.relacionados a:hover strong { color: var(--azul); }
.relacionados strong { font-size: 1.08rem; font-weight: 700; }
.relacionados span { font-size: .95rem; color: var(--tinta-suave); }
.relacionados__pe { margin-top: 26px; }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--grad-amarelo); color: var(--azul-fundo);
  box-shadow: 0 10px 24px -8px rgb(7 29 88 / .6);
  transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .25s;
}
.flutuante svg { width: 30px; height: 30px; }
.flutuante:hover { transform: scale(1.06); }
.flutuante.is-oculto,
.flutuante.is-no-rodape { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .rodape__in { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .rodape__in { grid-template-columns: 1fr; gap: 32px; }
  .rodape__fim { justify-content: flex-start; }
  /* data e descrição deixam de ser duas colunas e viram duas linhas */
  .etapas li { grid-template-columns: 1fr; }
  .aviso { grid-template-columns: 1fr; }
}
/* Entre o hambúrguer e o desktop largo o menu fica no limite: seis itens,
   a marca e o botão do WhatsApp na mesma linha. Aqui ele aperta em vez de
   quebrar em duas linhas, que é o que acontecia antes. */
@media (max-width: 1200px) {
  .topo__in { gap: 20px; }
  .menu { gap: clamp(14px, 1.9vw, 26px); }
  .menu a { font-size: .95rem; }
}
@media (max-width: 1000px) {
  .menu-botao { display: flex; }
  .menu {
    position: absolute; top: 72px; left: 0; right: 0; display: grid; gap: 0; margin: 0;
    background: var(--azul-fundo); padding: 8px 0; visibility: hidden; opacity: 0;
    transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .menu.is-aberto { visibility: visible; opacity: 1; transform: none; }
  .menu a { padding: 14px var(--gutter); font-size: 1.05rem; opacity: 1; }
  .topo .btn--sm { margin-left: 0; }
  .fale__in { grid-template-columns: 1fr; }
  .bairros__in { grid-template-columns: 1fr; grid-template-areas: "txt" "mapa" "painel"; row-gap: 32px; }
  .painel { margin-top: 0; }
  .mapa svg { max-height: 70vh; margin-inline: auto; display: block; }
}
@media (max-width: 820px) {
  /* celular: o nome ocupa a largura toda e sobe; o recorte cresce para o rosto
     ficar ACIMA do véu, e o véu passa a ser uma faixa no pé, em toda a largura */
  .abertura {
    --nome-largura: 52; --recorte-altura: 78svh; --recorte-lado: 54%;
    min-height: 100svh; padding: 84px 0 32px;
  }
  /* O nome deixa de ser um % da tela e passa a ser medido a partir do recorte,
     que e ancorado embaixo. Assim o VASSARI cruza a cabeca em 2.6rem exatos em
     qualquer celular, alto ou baixo, em vez de sumir atras dela num e sobrar
     no outro. */
  .nome-gigante {
    top: auto; bottom: calc(var(--recorte-altura) - 1.3rem); translate: 0 0;
  }
  .abertura__txt { max-width: none; }
  .abertura::before {
    width: 100%; height: 58%;
    background: linear-gradient(to top, rgb(8 34 100 / .96) 0%, rgb(8 34 100 / .8) 36%, transparent 78%);
  }
  .abertura::after { width: 70%; height: 8px; }
  .trabalho__in { grid-template-columns: 1fr; gap: 36px; }
  .barras li { grid-template-columns: 7rem 1fr 2.2rem; gap: 8px; }
  .acao { grid-template-columns: 1fr; row-gap: 14px; }
  .acao__meta { grid-row: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .na-rua__faixa { grid-template-columns: 1fr 1fr; }
  .na-rua__frase { grid-column: 1 / -1; grid-row: 1; }
  .quem__in { grid-template-columns: 1fr; }
  .quem__foto { width: min(80%, 360px); }
  .fatos { grid-template-columns: 1fr; }
  .fatos div { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid #cfd8ee; }
  .fatos dt { min-width: 5.2ch; }
  .fale::before { inset: 0 30% 60% -40%; }
}
/* Celular de tela curta (Android antigo, 640 px de altura). O recorte ocupa
   78% da altura, e no que sobra nao cabem as duas linhas do nome: o BRUNO
   subia por cima do cabecalho. Aqui o recorte cede um pouco e o nome encolhe. */
@media (max-width: 820px) and (max-height: 700px) {
  .abertura { --nome-largura: 44; --recorte-altura: 70svh; }
}
@media (max-width: 520px) {
  .topo__in { gap: 10px; }
  .topo .btn--sm span { display: none; }
  .topo .btn--sm { width: 44px; padding: 0; }
  .acoes .btn { flex: 1 1 100%; }
  .mote { font-size: 1.15rem; }
}

/* ---------- Movimento ----------
   Uma gramática só: a faixa amarela inclinada é "riscada" da esquerda para a direita,
   como marca-texto. Abertura, títulos e o bairro escolhido usam o mesmo gesto.
   O estado escondido só existe com .js-motion; sem JS, tudo aparece pronto. */
.titulo mark::before { clip-path: inset(0 0 0 0); transition: clip-path .75s cubic-bezier(.16,1,.3,1) .12s; }
.titulo mark { transition: color .35s ease .3s; }
.js-motion .titulo:not(.is-visto) mark::before { clip-path: inset(0 100% 0 0); }
.js-motion .titulo--claro:not(.is-visto) mark { color: var(--branco); }

/* Mapa: a cidade se desenha de norte a sul, bairro por bairro, uma vez */
.mapa path { transform-box: fill-box; transform-origin: center; }
.js-motion .mapa:not(.is-visto) path { opacity: 0; transform: translateY(14px) scale(.97); }
.js-motion .mapa path {
  transition: fill .25s, stroke .25s, opacity .45s ease calc(var(--i, 0) * 38ms),
              transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 38ms);
}
.mapa.is-pronto path { transition: fill .25s, stroke .25s, transform .35s cubic-bezier(.16,1,.3,1); }
.js-motion .mapa:not(.is-visto) .mapa__rotulos { opacity: 0; }
.mapa__rotulos { transition: opacity .5s ease .7s; }

/* Nome do bairro escolhido entra riscado, no mesmo gesto da faixa */
.painel__nome.is-novo { animation: risca .5s cubic-bezier(.16,1,.3,1); }
@keyframes risca { from { clip-path: inset(0 100% 0 0); transform: translateX(-.2em); } to { clip-path: inset(0 0 0 0); transform: none; } }
.painel__cheio .btn { animation: surge .45s cubic-bezier(.16,1,.3,1) .08s both; }

/* Retorno ao enviar */
.btn:active { transform: scale(.98); }
.btn.is-enviando { pointer-events: none; }
.btn.is-enviando .ico { animation: pulso 1s ease-in-out infinite; }
@keyframes pulso { 50% { transform: scale(.82); opacity: .6; } }

/* Entrada do conteúdo: cada bloco sobe 20 px e aparece quando chega à tela.
   Quem marca os blocos e calcula o --atraso é o motion.js; o --base é a espera
   inicial de um trecho inteiro, usada na abertura para o nome vir primeiro. */
.js-motion [data-entra] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1) calc(var(--base, 0ms) + var(--atraso, 0ms)),
              transform .8s cubic-bezier(.16,1,.3,1) calc(var(--base, 0ms) + var(--atraso, 0ms));
}
.js-motion [data-entra].is-visto { opacity: 1; transform: none; }
/* a abertura espera o nome terminar de se montar antes de trazer o resto */
.js-motion .abertura__txt [data-entra] { --base: 520ms; }
/* Botão: aparece junto com o bloco, mas o afundar do toque continua imediato,
   senão o clique parece atrasado. O --atraso some sozinho quando a entrada acaba. */
.js-motion .btn[data-entra] {
  transition: opacity .7s cubic-bezier(.16,1,.3,1) calc(var(--base, 0ms) + var(--atraso, 0ms)),
              transform .3s cubic-bezier(.16,1,.3,1) calc(var(--base, 0ms) + var(--atraso, 0ms)),
              background-color .2s, box-shadow .25s;
}

/* Rolagem suave: regras que a biblioteca pede, inclusive desligar a do navegador */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Troca de página: em vez do piscar branco, a página sai e a seguinte entra.
   O cabeçalho é igual nas três páginas, então atravessa a troca sem sumir.
   Navegador que não conhece a regra simplesmente troca a página como antes. */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
::view-transition-old(root) { animation: vt-sai .3s ease both; }
::view-transition-new(root) { animation: vt-entra .36s cubic-bezier(.16,1,.3,1) both; }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* sem deslocamento; cor, opacidade e estado continuam legíveis */
  .faixa, .nome__txt, .painel__cheio .btn { animation: none; }
  .carrossel__tira { animation: none; }
  .titulo mark::before { transition: none; }
  .js-motion .mapa:not(.is-visto) path { transform: none; }
  .js-motion .mapa path, .mapa.is-pronto path { transition: fill .2s, stroke .2s, opacity .3s ease; }
  .painel__nome.is-novo { animation: aparece .2s ease; }
  .btn, .flutuante { transition: background-color .2s, opacity .2s; }
  .btn:hover, .btn:active, .flutuante:hover { transform: none; }
  .btn.is-enviando .ico { animation: none; opacity: .6; }
  /* nada sobe nem desliza: o conteúdo já nasce no lugar */
  .js-motion [data-entra] { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
  .abertura__txt { transform: none !important; opacity: 1 !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@keyframes aparece { from { opacity: 0; } }