@charset "UTF-8";
/* =========================================================
   Ricardinho 55550 · site de campanha
   Marca: DESIGN_SYSTEM.md desta pasta.
   Azul #164182 · Azul profundo #1C345D · Verde-lima #85BB29 · Dourado #FCC100

   ARQUITETURA
   O site tem duas zonas. O PALCO é a parte narrada: cada seção ocupa a tela
   inteira e o scroll encaixa de uma para a outra. A ZONA LIVRE é a parte densa
   (lista de obras, formulário, rodapé), que rola normalmente porque não cabe
   numa tela só.
   Atrás de tudo existe UMA camada de fundo que nunca recarrega. Ela dissolve de
   uma foto para a outra enquanto o conteúdo troca por cima. É isso que faz a
   seção seguinte parecer continuação da anterior, e não uma página nova.
   ========================================================= */

:root{
  /* ⚠️ Cores amostradas dos PNGs OFICIAIS das peças, não do DESIGN_SYSTEM.
     O documento traz valores vindos de conversão CMYK, que na tela ficam
     mais mortos, e o PNG das peças também já nasce convertido (o arquivo
     carrega `Rendering intent: Perceptual`, que é justamente o que apaga
     saturação). O verde abaixo é o RGB de origem, passado pelo Rafael. */
  --azul:#2C4480;
  --azul-fundo:#1F305A;   /* o #2C4480 escurecido, para degradê e fundo */
  --lima:#8DCC2F;   /* lima mais vivo, preservando a família cromática da campanha */
  --dourado:#EDC123;
  --verde-lockup:#46763B;
  --branco:#FFFFFF;
  --tinta:#1C345D;
  --tinta-suave:#46536E;
  --gelo:#F2F5FA;

  --display:'Baloo 2', system-ui, sans-serif;
  --corpo:'Poppins', system-ui, sans-serif;
  --manuscrita:'Caveat', 'Brush Script MT', cursive;

  --larg:1180px;
  --raio:18px;
  --sombra:0 18px 50px rgba(12,28,58,.16);
  --toque:56px;
  --diag:-43.28deg;        /* inclinação exata do elemento da marca */
  --troca:.95s;            /* tempo da dissolução entre cenas */
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--azul-fundo);
}

/* Rolagem contínua, sem o encaixe forçado entre seções. */
html{scroll-snap-type:none}
.tela,.props,.chamado,.rodape{scroll-snap-align:none;scroll-snap-stop:normal}

body{
  margin:0;
  font-family:var(--corpo);font-weight:500;font-size:19px;line-height:1.6;
  color:var(--tinta);background:var(--azul-fundo);
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}

.caixa{width:min(100% - 2.5rem, var(--larg));margin-inline:auto}

.pular{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--lima);color:var(--azul-fundo);
  padding:.9rem 1.4rem;border-radius:0 0 12px 0;font-weight:700;
}
.pular:focus{left:0}
:focus-visible{outline:3px solid var(--dourado);outline-offset:3px;border-radius:6px}

/* =========================================================
   CAMADA DE FUNDO CONTÍNUA
   ========================================================= */
.fundo{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--azul-fundo)}
/* Um dia esta camada dissolvia cinco fotos, uma por seção. Hoje cada seção
   carrega o próprio fundo (`.hero__cena`, `.cam__fundo`, `.avisos__fundo`) e
   aqui sobrou o que sempre importou: a cor de base atrás de tudo. */

/* conteúdo sempre acima do fundo */
.palco,.livre,.barra-zap,.atalho{position:relative;z-index:2}

/* =========================================================
   SEÇÃO DE TELA CHEIA
   ========================================================= */
.tela{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:5.5rem 0 6.5rem;
  scroll-snap-align:start;
}
.tela__veu{position:absolute;inset:0;z-index:0;pointer-events:none}
.tela > .caixa{position:relative;z-index:1}

/* =========================================================
   TIPOGRAFIA DE SEÇÃO
   ========================================================= */
.rotulo{
  font-family:var(--display);font-weight:800;
  font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lima);margin:0 0 .55rem;
  /* o lima é claro e some sobre foto quente; a sombra segura a leitura
     sem trocar a cor da marca */
  text-shadow:0 2px 12px rgba(8,20,45,.85), 0 0 24px rgba(8,20,45,.6);
}
.rotulo--escuro{color:var(--azul);text-shadow:none}

.titulo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,7.2vw,3.5rem);
  line-height:1.03;letter-spacing:-.015em;
  color:var(--branco);margin:0 0 1.4rem;
  text-shadow:0 4px 30px rgba(8,20,45,.45);
}
.titulo--escuro{color:var(--azul-fundo);text-shadow:none}
.apoio{color:rgba(255,255,255,.88);font-size:1.05rem;max-width:44ch;margin:0 0 1.8rem}
.apoio--escuro{color:var(--tinta-suave)}

/* =========================================================
   BOTÕES
   ========================================================= */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--toque);padding:.9rem 1.7rem;
  font-family:var(--display);font-weight:800;font-size:1.18rem;
  text-decoration:none;border:none;border-radius:999px;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.botao--lima{background:var(--lima);color:var(--azul-fundo)}
.botao--lima:hover{transform:translateY(-2px);background:#9BDB35}
.botao--lima:active{transform:translateY(0)}
.botao--linha{background:transparent;color:var(--azul);box-shadow:inset 0 0 0 2.5px var(--azul)}
.botao--linha:hover{background:var(--azul);color:var(--branco)}
.botao--pequeno{font-size:1rem;padding:.7rem 1.3rem;min-height:48px}
.ico-wa{width:1.35em;height:1.35em;fill:currentColor;flex:none}

/* =========================================================
   1 · ABERTURA
   ========================================================= */
.abertura-sequencia{position:relative}
.hero{
  --hero-person-x:calc(66% - 50px);position:sticky;top:0;z-index:1;
  min-height:100svh;justify-content:center;padding-top:6rem;padding-bottom:2rem;overflow:hidden;
}

/* A cena é uma imagem, e quem dá o movimento é o CSS: aproximação lenta de
   28 s, que é longa o bastante para ninguém ver o quadro "andar". Imagem no
   lugar de vídeo rende mais nitidez, 242 KB contra 7,4 MB, e nenhum problema
   de codec, autoplay ou economia de dados. */
.hero__cena{
  position:absolute;inset:-1.5%;z-index:0;overflow:hidden;
  transform:translate3d(var(--bg-x,0),var(--bg-y,0),0);
  will-change:transform;
}
.hero__cena picture{
  display:block;width:100%;height:100%;
  animation:cenaEntra 1.8s cubic-bezier(.2,.75,.25,1) both;
}
.hero__cena img{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;
  transform-origin:62% 40%;
  animation:cenaAnda 24s ease-in-out infinite alternate;
}
@keyframes cenaEntra{
  from{opacity:.72;transform:scale(1.065);filter:saturate(.82) brightness(.82)}
  to{opacity:1;transform:scale(1);filter:none}
}
@keyframes cenaAnda{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.08) translate3d(-1.2%,-.7%,0)}
}

/* LUZ DO OESTE · discreta de propósito.
   Os feixes descem no ângulo exato do elemento da marca, 43,28°. Como um
   linear-gradient cria faixas perpendiculares à sua direção, a direção é
   43,28 + 90 = 133,28deg.
   ⚠️ Intensidade alta aqui LAVA a imagem: o céu perde contraste e a cidade
   some. Foi reprovado uma vez. Mexer com parcimônia. */
.hero__luz{
  position:absolute;inset:-12%;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:
    linear-gradient(133.28deg,
      rgba(255,214,150,0) 27%, rgba(255,214,150,.055) 30.5%, rgba(255,214,150,0) 34%,
      rgba(255,206,136,0) 61%, rgba(255,206,136,.05) 65%, rgba(255,206,136,0) 69%),
    radial-gradient(30rem 26rem at 96% 0%,
      rgba(255,206,140,.10) 0%, rgba(255,180,90,.04) 30%, rgba(255,140,50,0) 58%);
  background-size:140% 140%, 100% 100%;
  background-position:0% 0%, 0% 0%;
  animation:luzAnda 30s ease-in-out infinite alternate;
}
@keyframes luzAnda{
  from{background-position:0% 0%, 0% 0%}
  to  {background-position:18% 12%, 0% 0%}
}

/* A CHAMADA DO VOTO · canto superior direito, uma linha só
   ⚠️ 30px da borda por pedido do Rafael, e `top` na mesma régua do menu para
      ela assentar logo abaixo dele sem disputar espaço.
   ⚠️ Sólida, sem `opacity`: a marca d'água que vivia aqui foi substituída pela
      arte cheia. Quem segura as duas peças sobre o céu claro é a sombra de
      cada uma, porque o véu do topo é fraco de propósito. */
/* A ETIQUETA sai da borda direita, como um marcador colado na lateral: ela
   encosta em `right:0` e a ponta chanfrada aponta para dentro do quadro. */
.hero__vote{
  position:absolute;right:0;left:auto;top:calc(clamp(3.1rem,7svh,4rem) + 106px);
  z-index:6;margin:0;pointer-events:none;
  display:flex;align-items:center;gap:.55rem;
  /* ⚠️ O FUNDO DA ETIQUETA NÃO É DECORAÇÃO. Este canto é o pedaço mais claro do
     quadro (o céu, onde o véu é fraco de propósito para a cidade aparecer), e
     ali toda cor da marca reprova: medido em 1440, o lima dava 1,08:1 e o
     dourado 1,29:1 contra o piso de 4,5. `text-shadow` não conta para o WCAG.
     O que conta é o fundo debaixo do glifo. Não remover sem remedir. */
  padding:.5rem 1.9rem .5rem 2.1rem;
  background:rgba(10,22,48,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  /* a ponta da esquerda é o que faz ela ler como etiqueta, e não como caixa */
  clip-path:polygon(1.4rem 0, 100% 0, 100% 100%, 1.4rem 100%, 0 50%);
  box-shadow:0 10px 30px rgba(6,16,38,.4);
}
.hero__vote-dia{
  font-family:var(--manuscrita);font-weight:700;color:var(--dourado);
  font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1;white-space:nowrap;
  text-shadow:0 2px 12px rgba(8,20,45,.95), 0 0 26px rgba(8,20,45,.8);
}
.hero__vote-num{
  display:block;width:clamp(8rem,13.5vw,12rem);height:auto;
  filter:drop-shadow(0 2px 12px rgba(8,20,45,.8));
}

/* segundo brilho, este acompanha o cursor */
.hero__sol{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(22rem 22rem at var(--mx,90%) var(--my,6%),
    rgba(255,210,130,.10) 0%, rgba(255,175,75,.04) 34%, rgba(255,140,40,0) 62%);
}

/* Poeira atmosférica: poucos pontos, lentos e sempre atrás do conteúdo. */
.hero__particulas{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.hero__particulas i{
  position:absolute;left:var(--x);top:var(--y);width:var(--tam);height:var(--tam);
  border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(242,251,255,1) 0 18%,rgba(124,221,241,.62) 42%,transparent 74%);
  box-shadow:0 0 8px rgba(151,229,246,.42),0 0 18px rgba(87,198,224,.24);
  animation:particulaFlutua var(--tempo) ease-in-out var(--atraso) infinite;
}
.hero__particulas i:nth-child(1){--x:6%;--y:31%;--tam:6px;--tempo:14s;--atraso:-3s}
.hero__particulas i:nth-child(2){--x:18%;--y:17%;--tam:5px;--tempo:18s;--atraso:-11s}
.hero__particulas i:nth-child(3){--x:31%;--y:20%;--tam:8px;--tempo:16s;--atraso:-6s}
.hero__particulas i:nth-child(4){--x:43%;--y:28%;--tam:5px;--tempo:20s;--atraso:-15s}
.hero__particulas i:nth-child(5){--x:47%;--y:39%;--tam:7px;--tempo:15s;--atraso:-8s}
.hero__particulas i:nth-child(6){--x:51%;--y:49%;--tam:8px;--tempo:19s;--atraso:-4s}
.hero__particulas i:nth-child(7){--x:46%;--y:61%;--tam:5px;--tempo:17s;--atraso:-13s}
.hero__particulas i:nth-child(8){--x:52%;--y:70%;--tam:4px;--tempo:13s;--atraso:-9s}
.hero__particulas i:nth-child(9){--x:4%;--y:76%;--tam:5px;--tempo:21s;--atraso:-17s}
.hero__particulas i:nth-child(10){--x:38%;--y:14%;--tam:4px;--tempo:17s;--atraso:-2s}
.hero__particulas i:nth-child(11){--x:48%;--y:82%;--tam:7px;--tempo:19s;--atraso:-12s}
.hero__particulas i:nth-child(12){--x:55%;--y:36%;--tam:4px;--tempo:15s;--atraso:-7s}
.hero__particulas i:nth-child(13){--x:93%;--y:26%;--tam:6px;--tempo:20s;--atraso:-14s}
.hero__particulas i:nth-child(14){--x:96%;--y:48%;--tam:5px;--tempo:16s;--atraso:-5s}
.hero__particulas i:nth-child(15){--x:92%;--y:78%;--tam:7px;--tempo:22s;--atraso:-18s}
.hero__particulas i:nth-child(16){--x:58%;--y:88%;--tam:4px;--tempo:14s;--atraso:-10s}
@keyframes particulaFlutua{
  0%,100%{opacity:0;transform:translate3d(0,18px,0) scale(.65)}
  18%{opacity:.38}
  52%{opacity:.62;transform:translate3d(10px,-14px,0) scale(1)}
  82%{opacity:.24}
}

/* O recorte permanece colado na base. O contêiner recebe a inclinação suave
   do cursor, com o pivô no rodapé para a figura não parecer flutuar. */
/* ⚠️ Dois controles, e só estes dois, mexem no tamanho e na altura da figura.
   `--fig-crescer` é o quanto ela cresce PUXANDO PARA BAIXO: o `bottom` de
   cada faixa desce na mesma proporção, então a cabeça não sobe sozinha e só
   o corpo é cortado mais embaixo. Altura e recuo saem SEMPRE da mesma
   variável; mexer em uma sem a outra move a cabeça e desalinha a composição
   com o texto. Em 17/08 foi a 1,15 e depois a 1,38, a pedido do Rafael.
   `--fig-subir` levanta a figura inteira depois de tudo pronto (40px em
   17/08). Ele entra em `translate`, e não em `transform`, porque o parallax
   do cursor no `script.js` escreve em `transform` e um sobrescreveria o
   outro. Subir a figura aproxima o recorte do texto: mexer aqui pede
   remedir o contraste do olho e do subtítulo em 390px. */
.hero{--fig-crescer:1.242;--fig-subir:40px}
.hero__figura{
  position:absolute;z-index:3;pointer-events:none;
  left:var(--hero-person-x);right:auto;
  bottom:calc(-68svh * (var(--fig-crescer) - 1));height:calc(68svh * var(--fig-crescer));
  aspect-ratio:743 / 955;
  translate:-50% calc(-1 * var(--fig-subir));
  transform-origin:50% 100%;will-change:transform;
}
.hero__figura picture{display:block;width:100%;height:100%}
.hero__figura img{
  width:100%;height:100%;max-width:none;object-fit:contain;
  transform-origin:50% 100%;
}

/* cama escura sob o texto: o recorte fica por cima do véu, então o texto
   precisa do próprio leito para continuar legível sobre ele */
.hero__base{
  position:absolute;inset:auto 0 0 0;height:44%;z-index:4;pointer-events:none;
  background:linear-gradient(to top,
    rgba(12,26,54,.97) 0%, rgba(14,30,62,.90) 22%, rgba(16,36,74,.62) 45%,
    rgba(18,42,86,.24) 72%, rgba(20,50,100,0) 100%);
}
/* CAMADAS DA ABERTURA, de trás para frente:
   0 vídeo · 1 luz · 2 véu · 3 cunha da marca · 4 cama · 5 recorte · 6 TEXTO

   ⚠️ O comentário antigo dizia que o título passava POR TRÁS do recorte. Nunca
   passou. `.hero > .caixa.hero__texto{z-index:6}` abre um contexto de
   empilhamento e prende o `z-index:4` do `.hero__titulo` dentro dele, então o
   h1 sempre esteve por cima da figura. Mantido assim de propósito: jogar o
   título para trás do recorte custaria legibilidade justamente na linha mais
   importante da página. O `z-index:4` do título fica como ordem interna. */
.hero__cunha{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  /* A aresta de um linear-gradient é perpendicular à sua direção, então a
     direção 133,28deg deixa a aresta em 43,28°, o ângulo da marca.
     ⚠️ Nesta direção o 0% cai embaixo à ESQUERDA e o 100% em cima à direita.
     O sólido tem que ficar nos percentuais BAIXOS, senão o azul vai parar em
     cima do candidato e o texto sobra sobre o vídeo. Já errei uma vez. */
  background:linear-gradient(133.28deg,
    var(--azul-fundo) 0 11%,
    rgba(22,44,84,.88) 21%,
    rgba(20,40,78,.42) 31%,
    rgba(28,52,93,0) 41%);
}
.hero__titulo{position:relative;z-index:4}
.hero__figura{z-index:5}
/* ⚠️ `.tela > .caixa{z-index:1}` tem especificidade (0,2,0) e vencia aqui,
   jogando o texto para baixo da cunha. Por isso o seletor é mais específico. */
.hero > .caixa.hero__texto{position:relative;z-index:6}
.hero__rotulo,.hero__desce{z-index:6}
.hero__olho,.hero__apoio,.hero__acao{position:relative;z-index:6}

/* O véu de baixo para cima é fraco no alto de propósito, para a cidade
   aparecer. Quem protege o título é o SEGUNDO gradiente, o da esquerda para a
   direita: ele escurece só a coluna de texto e não encosta no céu da direita
   nem no recorte. Foi reforçado porque as duas primeiras linhas do h1 caíam
   sobre os prédios claros do skyline e ficavam perto de 1,7:1, contra os 3:1
   que o WCAG pede para texto grande (text-shadow não conta para a medição). */
.hero__veu{
  background:
    linear-gradient(to top,
      rgba(14,30,60,.96) 0%, rgba(16,34,68,.88) 14%, rgba(18,42,84,.58) 30%,
      rgba(20,52,104,.20) 48%, rgba(22,65,130,.03) 68%, rgba(22,65,130,0) 100%),
    linear-gradient(to right,
      rgba(12,28,58,.76) 0%, rgba(12,28,58,.64) 22%, rgba(12,28,58,.40) 44%,
      rgba(12,28,58,.15) 60%, rgba(12,28,58,0) 74%);
}
/* o selo sai do cabeçalho e vira elemento solto sobre a foto, inclinado,
   como na referência do Rafael */
.hero__selo{
  position:absolute;z-index:6;right:12.5%;top:calc(38% + 28px);
  height:clamp(26px,3.4vw,50px);width:auto;
  transform:rotate(-7deg);
  filter:drop-shadow(0 4px 14px rgba(8,20,45,.55));
}

.hero__olho{
  font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.92);margin:0 0 .8rem;hyphens:none;line-height:1.5;
  /* o topo do véu é fraco de propósito, para a cidade aparecer; a sombra
     é o que segura estas duas linhas sobre o céu claro do vídeo */
  text-shadow:0 2px 14px rgba(8,20,45,.9), 0 0 30px rgba(8,20,45,.7);
}
.hero__olho .nome{display:block;color:var(--dourado)}
.hero__olho .cargo{display:block}

.hero__titulo{position:relative;z-index:4}
.hero__figura{z-index:5}
/* ⚠️ `.tela > .caixa{z-index:1}` tem especificidade (0,2,0) e vencia aqui,
   jogando o texto para baixo da cunha. Por isso o seletor é mais específico. */
.hero > .caixa.hero__texto{position:relative;z-index:6}
.hero__rotulo,.hero__desce{z-index:6}
.hero__olho,.hero__apoio,.hero__acao{position:relative;z-index:6}

/* O véu de baixo para cima é fraco no alto de propósito, para a cidade
   aparecer. Quem protege o título é o SEGUNDO gradiente, o da esquerda para a
   direita: ele escurece só a coluna de texto e não encosta no céu da direita
   nem no recorte. Foi reforçado porque as duas primeiras linhas do h1 caíam
   sobre os prédios claros do skyline e ficavam perto de 1,7:1, contra os 3:1
   que o WCAG pede para texto grande (text-shadow não conta para a medição). */
.hero__veu{
  background:
    linear-gradient(to top,
      rgba(14,30,60,.96) 0%, rgba(16,34,68,.88) 14%, rgba(18,42,84,.58) 30%,
      rgba(20,52,104,.20) 48%, rgba(22,65,130,.03) 68%, rgba(22,65,130,0) 100%),
    linear-gradient(to right,
      rgba(12,28,58,.76) 0%, rgba(12,28,58,.64) 22%, rgba(12,28,58,.40) 44%,
      rgba(12,28,58,.15) 60%, rgba(12,28,58,0) 74%);
}
/* o selo sai do cabeçalho e vira elemento solto sobre a foto, inclinado,
   como na referência do Rafael */
.hero__selo{
  position:absolute;z-index:6;right:12.5%;top:calc(38% + 28px);
  height:clamp(26px,3.4vw,50px);width:auto;
  transform:rotate(-7deg);
  filter:drop-shadow(0 4px 14px rgba(8,20,45,.55));
}

.hero__titulo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,9vw,3rem);line-height:1.0;letter-spacing:-.025em;
  color:var(--branco);margin:0 0 .8rem;text-shadow:0 6px 40px rgba(8,20,45,.6);
}
.hero__titulo{text-transform:uppercase}
.hero__titulo .lin{display:block;overflow:visible}
/* a cápsula da marca vira marca-texto atrás da palavra */
.hero__titulo .destaque{
  display:inline-block;font-style:normal;background:var(--lima);color:#fff;
  line-height:.88;padding:.025em .24em .065em;border-radius:999px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero__apoio{text-transform:uppercase;letter-spacing:.01em}
.hero__titulo .lin > span{display:block}
.hero__apoio{
  font-size:clamp(.98rem,3.4vw,1.15rem);font-weight:600;line-height:1.4;
  color:var(--branco);margin:0 0 1.4rem;max-width:24ch;
  text-shadow:0 2px 18px rgba(8,20,45,.7);
}
.hero__acao .botao{width:100%;max-width:26rem;white-space:nowrap}
.hero__nota{font-size:.86rem;line-height:1.4;color:rgba(255,255,255,.88);margin:.8rem 0 0;max-width:26rem}
/* Rótulo de IA. A Res.-TSE 23.610/2019 pede aviso claro e legível, então ele
   não pode ser o menor e mais apagado texto da tela. O `z-index` sai daqui:
   já está declarado como 6 na regra de camadas acima, e a segunda declaração
   em 5 anulava aquela em silêncio. */
.hero__rotulo{
  position:absolute;left:clamp(1.25rem,3.4vw,3.2rem);right:auto;bottom:1rem;
  width:auto;margin:0;
  font-size:.8rem;color:rgba(255,255,255,.56);
  text-shadow:0 1px 8px rgba(8,20,45,.9);
}
/* ⚠️ Abaixo de 901px a figura ocupa a faixa de baixo inteira e o rótulo cai
   em cima da camisa e do queixo dele: texto claro sobre azul claro. A cama
   escura não resolve, porque o recorte está em z-index 5 e ela em 4. O
   rótulo ganha a PRÓPRIA faixa, que é a única camada acima da figura
   (z-index 6) e por isso a única que protege esta linha.
   **Medido:** 1,99:1 em 390px e 1,61:1 em 768px sem a faixa, contra o piso
   de 4,5:1 do texto pequeno. A Res.-TSE 23.610/2019 pede aviso claro e
   legível, então isto não é preciosismo. Não trocar por sombra. */
@media (max-width:900px){
  .hero__rotulo{
    left:0;right:0;bottom:0;
    padding:.75rem clamp(1.25rem,3.4vw,3.2rem) calc(.6rem + env(safe-area-inset-bottom));
    font-size:.76rem;color:rgba(255,255,255,.82);text-shadow:none;
    background:linear-gradient(to top,rgba(10,22,46,.94) 0%,rgba(10,22,46,.86) 55%,rgba(10,22,46,0) 100%);
  }
}

/* No celular o recorte vira presença no canto, e não o assunto da tela:
   o vídeo já carrega a cidade. O texto ganha uma coluna própria à esquerda
   para não cair em cima dele. */
@media (max-width:700px){
  /* ⚠️ ORDEM IMPORTA AQUI. A regra base do `.hero` também declara padding, e
     as duas têm a mesma especificidade: quem vier depois vence. Esta linha
     estava escondida dentro do media query de duas seções que saíram, e sumiu
     junto; sem ela o bloco de texto desce 42px e a nota do CTA cai em cima do
     recorte do candidato, onde mede 2,4:1 contra o piso de 4,5:1.
     Regra geral não mora dentro do bloco de uma seção. */
  .tela{padding:4.2rem 0 5.4rem}
  /* ⚠️ O `max-width:15rem` daqui vinha da época em que a figura ficava POR CIMA
     da coluna de texto: ele era a única defesa geométrica do olho contra o
     rosto dele. Com a composição empilhada a figura saiu do caminho, e o que
     esse limite fazia era só quebrar "CANDIDATO A DEPUTADO ESTADUAL PELO
     PARANÁ" em duas linhas no meio da frase. Medido: o cargo parava em x=260
     em TODAS as larguras, de 320 a 430, mesmo com 390px de caixa disponível.
     ⚠️ O corpo vem de `vw` porque a frase tem 41 caracteres e a conta é de
        largura, não de gosto: medido o máximo que cabe em uma linha com 6px de
        folga, dá 12,2px em 360, 12,8 em 375, 13,4 em 390 e 14,9 em 430. O
        `3.38vw` fica logo abaixo dessa curva em toda a faixa.
     ⚠️ O `nowrap` só entra a partir de 340px: em 320 a linha única exigiria
        10,6px de corpo, abaixo do legível, e ali ela quebra mesmo. */
  .hero__olho{max-width:none;font-size:clamp(.75rem,3.38vw,.95rem)}
  .hero__olho .cargo{letter-spacing:.02em}
}
@media (min-width:340px) and (max-width:700px){
  .hero__olho .cargo{white-space:nowrap}
}
@media (max-width:700px){
  .hero{--hero-person-x:50%;--fig-subir:0px}
  /* no celular a linha inteira encolhe para caber ao lado do botão do menu */
  /* -25px pedido pelo Rafael em 20/08: a etiqueta assenta mais perto do menu e
     abre respiro entre ela e o nome do candidato. */
  .hero__vote{right:0;top:calc(3.4rem + 76px - 25px);gap:.4rem;padding:.42rem 1.2rem .42rem 1.5rem}
  .hero__vote-dia{font-size:.9rem}
  .hero__vote-num{width:6rem}
  /* A COMPOSIÇÃO DO CELULAR, versão de 20/08 (pedido do Rafael).
     De cima para baixo: texto CENTRALIZADO · a etiqueta do voto e o selo Ficha
     Limpa flanqueando a cabeça · a figura grande · e o botão ancorado na BASE,
     com a figura passando POR TRÁS dele.
     ⚠️ A figura passar por trás do botão é o efeito, e ele sai de graça: o
        recorte está em z-index 5 e a coluna de texto (com o botão) em 6.
        Inverter essas camadas mata a composição.
     ⚠️ O `justify-content:flex-start` continua sendo o que impede o texto de
        flutuar para o meio e reencontrar a figura em tela baixa. */
  .hero{
    justify-content:flex-start;
    padding-top:calc(3.4rem + 76px + .4rem);
    /* ⚠️ O `.tela` do celular declara `padding:4.2rem 0 5.4rem` e vence por vir
       depois. Aqueles 5,4rem de base seguravam o botão 86px acima do chão. */
    padding-bottom:1rem;
    /* ⚠️ A base da figura é declarada AQUI, e não no `.hero__figura`, porque a
       etiqueta do voto e o selo se posicionam em relação à cabeça dele e
       precisam da mesma medida. Variável em elemento irmão não é herdada. */
    --fig-base:clamp(180px, calc(100svh - 75vw - 150px), min(56svh, 96vw));
    --fig-mais:.3;
  }
  /* ⚠️ O `flex:1` NÃO é enfeite: o botão é `position:absolute` e se ancora no
     ancestral posicionado mais próximo, que é ESTA caixa. Sem ela ocupar a
     altura do hero, o `bottom` do botão era medido a partir do fim do texto e
     ele parava no meio da tela. Medido: ficou em 237px de uma tela de 734. */
  .hero > .caixa.hero__texto{flex:1;display:flex;flex-direction:column}
  .hero__bloco{text-align:center}
  .hero__olho .nome,.hero__olho .cargo{display:block}
  .hero__apoio,.hero__nota{margin-inline:auto}

  /* O BOTÃO ANCORADO NA BASE, acima da faixa do aviso de IA. Ele sai do fluxo
     do bloco de texto para que a figura possa crescer no espaço entre os dois. */
  .hero__acao{
    position:absolute;left:0;right:0;
    /* logo acima da faixa do aviso de IA, que ocupa os 41px de baixo */
    bottom:calc(2.2rem + env(safe-area-inset-bottom));
    z-index:6;margin:0;
    width:min(100% - 2.5rem, var(--larg));margin-inline:auto;
  }
  .hero__acao .botao{max-width:none}
  .hero__nota{display:none}

  /* ⚠️ A FIGURA CRESCE ATÉ O BOTÃO e passa por trás dele. O topo dela é o que
     não pode invadir o texto, e como o crescimento puxa para baixo, o topo é
     `100svh - bottom - altura`. Aqui a base entra POR BAIXO do botão de
     propósito, então a altura pode ser bem maior que na versão anterior. */
  .hero__figura{
    z-index:5;
    height:calc(var(--fig-base) * (1 + var(--fig-mais)));
    bottom:calc(1.2rem + env(safe-area-inset-bottom) - var(--fig-base) * var(--fig-mais));
    translate:-50% 0;
  }
  .hero > .caixa{padding-right:0}

  /* ⚠️ A CAMA VIRA VÉU DE PONTA A PONTA NO CELULAR, e os stops de 20% a 46%
     são a faixa do TEXTO. Com o texto centralizado, o nome e o cargo se
     espalham na largura toda e chegam às bordas, onde o céu é o pedaço mais
     claro do quadro: medido sem o véu, o olho fica em **2,74:1 em 390 e 2,85
     em 430**, contra o piso de 4,5. `text-shadow` não conta para o WCAG; o que
     conta é o fundo debaixo do glifo.
     ⚠️ Escurecer aqui NÃO apaga o candidato: a cama está em z-index 4 e o
        recorte em 5, então ela passa por TRÁS dele. Foi só quando a figura
        desceu para trás da cama que ela virou sombra, e isso foi desfeito.
     ⚠️ Esta regra já sumiu uma vez numa reescrita do bloco, e o efeito é
        silencioso: nada quebra na tela, só o contraste despenca. */
  .hero__base{
    inset:0;height:auto;
    background:linear-gradient(to bottom,
      rgba(10,22,46,.66) 0%, rgba(10,22,46,.62) 20%, rgba(12,26,54,.58) 34%,
      rgba(12,26,54,.46) 46%, rgba(12,26,54,.26) 58%, rgba(12,26,54,.52) 76%,
      rgba(12,26,54,.86) 90%, rgba(12,26,54,.96) 100%);
  }
  .hero__olho{margin-bottom:.5rem}
  .hero__titulo{font-size:clamp(1.75rem,7.8vw,2.2rem);line-height:.98}
  /* ⚠️ DUAS LINHAS NO CELULAR, não três: "A NOSSA CAMINHADA" em cima e "JÁ
     COMEÇOU" embaixo. As duas primeiras `.lin` deixam de ser blocos e passam a
     dividir a mesma linha; a terceira continua bloco e cai sozinha.
     `inline-block` e não `inline` porque a entrada escalonada anima os spans
     com `translateY`, e transform não vale em caixa inline. */
  .hero__titulo .lin:nth-child(-n+2){display:inline-block}
  .hero__titulo .lin:nth-child(-n+2) > span{display:inline-block}
  .hero__apoio{font-size:clamp(.9rem,4vw,1.05rem);max-width:26ch;margin-bottom:1rem}

  /* A ETIQUETA DO VOTO DESCE e vira placa EMPILHADA ao lado da cabeça dele:
     "Dia 04 de Outubro" em cima, o número embaixo. Ela sai da borda direita,
     onde era um marcador colado na lateral, então o `clip-path` de ponta
     chanfrada perde o sentido e dá lugar a um canto arredondado.
     ⚠️ O FUNDO ESCURO CONTINUA SENDO A DEFESA DELA. Ali é céu, o pedaço mais
        claro do quadro, e sem a placa o dourado mede 1,29:1. Não remover. */
  .hero__vote{
    left:1.1rem;right:auto;top:auto;
    bottom:calc(1.2rem + var(--fig-base) - 54px);
    flex-direction:column;align-items:center;gap:.1rem;
    padding:.45rem .8rem .5rem;
    clip-path:none;border-radius:14px;
  }
  .hero__vote-dia{font-size:.78rem;line-height:1.1}
  .hero__vote-num{width:4.6rem}

  /* O SELO FICHA LIMPA VOLTA, do outro lado da etiqueta, na mesma altura. */
  .hero__selo{
    display:block;
    left:auto;right:1.1rem;top:auto;
    bottom:calc(1.2rem + var(--fig-base) - 48px);
    height:auto;width:clamp(78px,23vw,104px);
  }
  .hero__particulas i{display:none}
  .hero__particulas i:nth-child(1),
  .hero__particulas i:nth-child(2),
  .hero__particulas i:nth-child(9),
  .hero__particulas i:nth-child(13),
  .hero__particulas i:nth-child(14){display:block}
  /* O gradiente lateral do véu está calibrado para duas colunas e apaga aos
     74%, que no computador é onde a coluna de texto acaba. No retrato a coluna
     de texto é a tela inteira, então ele apagava bem no meio do olho e a última
     linha do cargo caía sobre os prédios claros. Aqui ele atravessa. */
  .hero__veu{
    background:
      linear-gradient(to top,
        rgba(14,30,60,.96) 0%, rgba(16,34,68,.88) 14%, rgba(18,42,84,.58) 30%,
        rgba(20,52,104,.20) 48%, rgba(22,65,130,.03) 68%, rgba(22,65,130,0) 100%),
      linear-gradient(to right,
        rgba(12,28,58,.72) 0%, rgba(12,28,58,.62) 45%,
        rgba(12,28,58,.46) 75%, rgba(12,28,58,.32) 100%);
  }
  /* sobe o enquadramento do vídeo para a cidade entrar e sobrar menos céu */
  .hero__cena img{object-position:center 52%}
}

/* CELULAR DE TELA BAIXA · o texto não pode subir em cima da etiqueta do voto
   ⚠️ A etiqueta é ancorada em `top` FIXO (130px), e o bloco de texto é
      centralizado na altura. Em tela alta os dois nunca se encontram; em
      360x640 e 320x568 o texto sobe e o nome do candidato passa POR CIMA da
      chamada do voto: "CANDIDATO A DEPUTADO" e "Dia 04 de Outubro Vote:"
      viravam um borrão, e as duas informações mais importantes da abertura se
      destruíam. Medido: o olho caía para 1,66:1 e a chamada para 1,48:1.
   A correção é ancorar o bloco no TOPO, abaixo da etiqueta, em vez de
   centralizar, e encolher o corpo o suficiente para o conjunto caber junto
   com a figura e a faixa do aviso de IA.
   ⚠️ A régua aqui é a ALTURA da tela, não a largura: um 390x844 não tem o
      problema e um 360x640 tem. */
@media (max-width:700px) and (max-height:760px){
  /* Aqui só o que depende da ALTURA. A composição empilhada (texto em cima,
     figura na base) já vale para todo celular, no bloco acima.
     ⚠️ Era aqui que se resolvia o texto caindo em cima da etiqueta do voto em
        360x640 e 320x568: a etiqueta tem `top` FIXO e o bloco de texto era
        centralizado na altura, então em tela baixa os dois se encontravam e
        "CANDIDATO A DEPUTADO" virava um borrão sobre "Dia 04 de Outubro Vote:".
        Hoje quem impede isso é a âncora no topo, que vale sempre; o que sobrou
        aqui é o encolhimento para caber junto com a figura e a faixa do aviso. */
  .hero__titulo{font-size:clamp(1.6rem,7.2vw,2rem)}
  .hero__apoio{font-size:.9rem;margin-bottom:.85rem}
  .hero__acao .botao{min-height:50px;font-size:1.02rem}
  .hero__nota{font-size:.8rem;margin-top:.45rem}
  /* ⚠️ ABAIXO DE 760px DE ALTURA A FIGURA SAI. Não é preguiça: nessa faixa
     (320x568, 360x640, 375x667) não sobra tela para texto e figura sem que um
     invada o outro. Testadas as duas alternativas antes de decidir:
     · lado a lado, o texto cai para 140px de largura, "RICARDO ALVES /
       NASCIMENTO" quebra no meio e a figura passa POR CIMA do botão;
     · empilhado, a figura fica com 85px de largura, menor que o próprio botão.
     Sem ela a abertura fica com o texto inteiro, o CTA inteiro e a cidade ao
     fundo, que é o melhor uso de 640px de altura. Aparelho moderno de 360px de
     largura (Galaxy A/S) tem 800px de altura e NÃO cai aqui: continua com a
     figura. Quem cai aqui é aparelho pequeno e antigo. */
  /* ⚠️ A FIGURA NÃO SOME MAIS EM TELA CURTA. Ela sumia porque não cabia junto
     com o texto; agora quem cede é o texto, que compacta o suficiente para os
     dois conviverem. Pedido do Rafael em 20/08: o candidato aparece em TODO
     modelo. Em 553px de viewport (iPhone SE no Safari) sobram ~60px entre o
     texto e o aviso na régua antiga; com o texto compactado aqui, sobram os
     ~170px que a figura precisa. */
  /* ⚠️ Em tela curta a figura não cabe ABAIXO do texto, então ela sai de baixo
     dele e vai para a DIREITA, na faixa que a coluna de texto não usa. Aqui a
     conta deixa de ser vertical e passa a ser horizontal: o subtítulo e a nota
     encolhem para 13rem e a figura ocupa o que sobra, sem que os retângulos se
     cruzem. É o mesmo princípio do computador, onde texto e figura dividem a
     tela em duas colunas. */
  .hero{padding-top:calc(3.4rem + 76px + 40px + .2rem)}
  .hero__olho{margin-bottom:.35rem}
  .hero__acao{margin-top:.2rem}
}

/* TELA CURTA · abaixo de 660px de viewport
   A composição é a MESMA (texto centralizado em cima, figura no meio, botão na
   base): aqui só encolhem os corpos e a figura, para os três caberem.
   ⚠️ A versão anterior jogava a figura para a direita e estreitava o texto,
      porque naquela composição eles brigavam pela mesma faixa. Com o botão
      ancorado na base e a figura passando por trás dele, essa briga acabou, e
      manter a figura fora do centro só a deixava cortada na borda. */
@media (max-width:700px) and (max-height:660px){
  .hero{--fig-base:clamp(130px, calc(100svh - 75vw - 105px), 40svh)}
  .hero__titulo{font-size:clamp(1.5rem,6.8vw,1.9rem)}
  .hero__olho{font-size:clamp(.68rem,3vw,.8rem);margin-bottom:.3rem}
  .hero__apoio{font-size:.86rem;margin-bottom:.6rem;max-width:24ch}
  .hero__acao .botao{min-height:48px;font-size:1.02rem}
  .hero__vote{padding:.35rem .7rem .4rem}
  .hero__vote-dia{font-size:.7rem}
  .hero__vote-num{width:3.9rem}
  .hero__selo{width:clamp(66px,19vw,88px)}
}

/* entrada escalonada */
.hero__olho,.hero__titulo .lin > span,.hero__apoio,.hero__acao,.hero__selo{
  opacity:0;transform:translateY(26px);animation:sobe .9s cubic-bezier(.2,.75,.25,1) forwards;
}
.hero__selo{animation-delay:.15s}
.hero__olho{animation-delay:.25s}
.hero__titulo .lin:nth-child(1) > span{animation-delay:.35s}
.hero__titulo .lin:nth-child(2) > span{animation-delay:.45s}
.hero__titulo .lin:nth-child(3) > span{animation-delay:.57s}
.hero__apoio{animation-delay:.62s}
.hero__acao{animation-delay:.74s}
@keyframes sobe{to{opacity:1;transform:none}}

/* indicador de rolagem: uma linha que desce, e não uma setinha genérica */
.hero__desce{
  position:absolute;right:0;bottom:0;left:0;
  width:min(100% - 2.5rem, var(--larg));margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.55rem;
  padding-bottom:1.6rem;text-decoration:none;
  font-family:var(--display);font-weight:800;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  opacity:0;animation:sobe .9s cubic-bezier(.2,.75,.25,1) .95s forwards;
}
.hero__desce:hover{color:var(--dourado)}
.hero__desce-linha{
  display:block;width:2px;height:2.1rem;background:linear-gradient(var(--lima),rgba(145,187,70,0));
  transform-origin:top;animation:desceLinha 2.1s ease-in-out infinite;
}
@keyframes desceLinha{
  0%,100%{transform:scaleY(.35);opacity:.45}
  50%    {transform:scaleY(1);  opacity:1}
}

/* ⚠️ ESTE BLOCO MORA DEPOIS DA REGRA BASE DE PROPÓSITO. Ele já esteve acima
   dela, com a mesma especificidade, e perdia por ordem: o `display:none` não
   surtia efeito nenhum e a colisão continuava lá, sem erro nenhum no DevTools.
   É a mesma armadilha do padding do `.tela` que o README registra.

   ⚠️ NO CELULAR O INDICADOR DE ROLAGEM NÃO EXISTE, porque a figura ocupa a base
   da tela em TODOS os modelos (pedido do Rafael em 20/08). Medido em cima
   dela: **1,60:1 em 375, 1,97 em 390, 2,14 em 393 e 2,47 em 360**, contra o
   piso de 4,5, porque o texto cai no punho e na camisa. Ele já teve uma faixa
   de alturas em que sobrevivia, quando a figura sumia nas telas curtas; essa
   faixa acabou. Se um dia a figura sair de alguma tela de novo, ele pode
   voltar SÓ lá, e medindo. */
@media (max-width:700px){
  .hero__desce{display:none}
}

/* =========================================================
   2 · QUEM É · o retrato de família
   ⚠️ Esta seção já foi uma pausa cinética de 250svh: a família abria e o
   número 55550 entrava por cima dela na mesma rolagem. O número saiu daqui
   em 17/08 e virou seção própria depois da linha do tempo (`.numero`),
   porque pedir voto antes de contar a história chegava cedo demais. O que
   sobrou é uma tela só, sem sticky e sem percurso.
   ========================================================= */
.quem{
  --quem-glow:1;
  position:relative;isolation:isolate;display:block;height:auto;min-height:100svh;margin:0;padding:0;
  overflow:visible;text-align:center;background:#fff;
}
.quem::before,.quem::after{content:none}
.quem__fixo{
  position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center;
  background:#fff;
}
.quem__fixo::before,.quem__fixo::after{content:'';position:absolute;pointer-events:none;z-index:0}
.quem__fixo::before{
  width:min(90vw,76rem);height:min(72vw,54rem);left:50%;top:67%;border-radius:50%;opacity:var(--quem-glow);
  background:radial-gradient(circle,rgba(255,244,188,.96) 0%,rgba(255,207,75,.44) 22%,rgba(255,255,255,0) 68%);
  filter:blur(18px);transform:translate(-50%,-50%) scale(.72);mix-blend-mode:screen;
  animation:brilhoFamilia 2.8s cubic-bezier(.2,.75,.25,1) infinite alternate;
}
.quem__fixo::after{
  inset:0;background:radial-gradient(circle at 50% 68%,rgba(255,235,155,.13),transparent 43%);opacity:var(--quem-glow);
}
@keyframes brilhoFamilia{from{transform:translate(-50%,-50%) scale(.72);opacity:.52}to{transform:translate(-50%,-50%) scale(1.04);opacity:1}}
.quem__foto,.quem__foto-veu{position:absolute;inset:0;z-index:1;pointer-events:none}
/* ⚠️ A parada branca da máscara é o que segura a legibilidade do bloco de
   texto. Em 21% o cursivo dourado caía em cima da árvore de Natal, que é
   dourada também, e o contraste sumia. Em 30% a foto começa abaixo da última
   linha do texto e o cursivo fica sobre branco puro. Mexer aqui exige olhar
   o cursivo de novo, nas duas larguras. */
.quem__foto{
  top:auto;height:76%;
  transform:translateY(0) scale(1.015);transform-origin:center bottom;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 100%);
}
.quem__foto img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.quem__foto-veu{
  z-index:2;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.98) 18%,transparent 44%,rgba(57,43,24,.11) 100%);
}
.quem__momento{
  grid-area:1/1;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;
}
.quem__momento--um{align-self:start;margin-top:clamp(5.8rem,10vh,8rem)}
.quem .rotulo{margin-bottom:.65rem;color:var(--azul-fundo);text-shadow:none}
.quem .titulo{font-size:clamp(2.6rem,6vw,5.4rem);line-height:.96;margin:0;max-width:14ch}
.quem__momento--um .titulo{color:var(--azul-fundo);font-size:clamp(2.5rem,4.6vw,4.65rem);max-width:none;text-shadow:none}
.quem__momento--um .titulo span{display:block;white-space:nowrap}
.quem__saida{margin:1.4rem 0 0}
/* fundo claro aqui: o botão de linha usa o azul da marca, que é o que se lê */
.quem__saida .botao--linha{background:rgba(255,255,255,.72);backdrop-filter:blur(6px)}
/* ⚠️ O dourado do design system (#FCC100) é claro demais para texto sobre
   branco. Este é o mesmo dourado rebaixado até passar dos 3:1 de texto
   grande, e ele só vale porque a máscara acima mantém branco atrás dele. */
.quem__familia{
  margin:.35rem 0 0;color:#8A5A12;font-family:'SignPainter','Brush Script MT','Segoe Script',cursive;
  font-size:clamp(2.35rem,4.4vw,4.6rem);font-weight:600;line-height:1;letter-spacing:.01em;
  text-shadow:none;transform:rotate(-2deg);
}
/* ⚠️ Sobre a cortina clara da foto, o azul em opacidade .52 sumia: o
   indicador ficava invisível justamente onde precisa ser lido. A defesa aqui
   é o inverso da do resto do site: como o fundo é claro, quem segura o texto
   é um halo BRANCO, e não a sombra escura de sempre. Placa sólida foi
   testada e pesa demais no meio da foto. */
.quem__role{
  position:absolute;z-index:5;left:50%;bottom:1.7rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:var(--azul-fundo);transform:translateX(-50%);pointer-events:none;
  text-shadow:0 1px 10px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.85);
}
.quem__role span{position:relative;width:1.25rem;height:2rem;border:2px solid currentColor;border-radius:999px;opacity:.72;box-shadow:0 0 12px rgba(255,255,255,.9)}
.quem__role span::after{content:'';position:absolute;left:50%;top:.35rem;width:3px;height:6px;border-radius:999px;background:#5F8C15;transform:translateX(-50%);animation:rolePonto 1.55s ease-in-out infinite}
.quem__role small{font-family:var(--corpo);font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;animation:roleTexto 1.55s ease-in-out infinite}
@keyframes rolePonto{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}
@keyframes roleTexto{0%,100%{opacity:.72}50%{opacity:1}}
.quem__pilares{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.65rem 1.35rem;margin-top:2rem;color:var(--branco);
  font-family:var(--display);font-size:clamp(1rem,1.5vw,1.3rem);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
.quem__pilares li{display:flex;align-items:center;gap:1.35rem}
.quem__pilares li:not(:last-child)::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--lima);box-shadow:0 0 14px rgba(141,204,47,.65)}
@media (max-width:700px){
  .quem{min-height:100svh}
  /* mesma razão da regra do computador: a foto só pode começar depois da
     última linha de texto, senão o cursivo cai em cima da árvore */
  .quem__foto{height:72%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%);mask-image:linear-gradient(to bottom,transparent,#000 26%)}
  .quem__foto img{object-position:48% center}
  .quem__momento--um{margin-top:clamp(5rem,8vh,6.5rem);padding-inline:1rem}
  .quem__momento--um .titulo{font-size:clamp(2.1rem,9.6vw,3rem)}
  .quem__momento--um .titulo span{font-size:clamp(1.65rem,7.4vw,2.35rem)}
  /* ⚠️ Em 390px o cursivo quebrava em duas linhas e a segunda caía dentro da
     foto, em cima da árvore. O `nowrap` é o que garante a linha única; sem
     ele, qualquer aumento de corpo traz a quebra de volta. */
  .quem__familia{font-size:clamp(1.45rem,7vw,2.5rem);white-space:nowrap}
  .quem .titulo{font-size:clamp(2.35rem,11vw,3.3rem)}
  .quem__pilares{max-width:19rem;gap:.55rem 1rem;margin-top:1.6rem}
  .quem__pilares li{gap:1rem}
}

/* =========================================================
   4 · A CAMINHADA · slides de tela cheia
   ========================================================= */
.cam{position:relative;background:var(--azul-fundo);scroll-snap-align:start;padding:0}
.cam__fixo{position:sticky;top:0;height:100svh;overflow:hidden}

.cam__janela{height:100%;overflow:hidden}
.cam__trilha{display:flex;height:100%;width:max-content;will-change:transform}

.slide{
  position:relative;flex:none;
  /* 100vw inclui a barra de rolagem e cria transbordo lateral no computador.
     O JS mede a janela de verdade e escreve em --slide-w. */
  width:var(--slide-w, 100vw);height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.slide__foto{position:absolute;inset:0;z-index:0}
.slide__foto img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
/* o degradê dissolve a foto até o azul, em vez de cortá-la numa moldura */
.slide__veu{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    var(--azul-fundo) 0%, rgba(28,52,93,.97) 16%, rgba(28,52,93,.80) 30%,
    rgba(28,52,93,.36) 50%, rgba(28,52,93,.08) 72%, rgba(28,52,93,0) 100%);
}
.slide__txt{
  position:relative;z-index:2;
  width:min(100% - 2.5rem, var(--larg));margin-inline:auto;
  padding-bottom:5.5rem;
}
.slide__ano{
  display:inline-block;font-family:var(--display);font-weight:800;
  font-size:1.15rem;background:rgba(145,187,70,.16);color:var(--lima);
  border:1.5px solid rgba(145,187,70,.5);
  padding:.25rem .9rem;border-radius:999px;margin-bottom:.7rem;
}
.slide__titulo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,8vw,3.4rem);line-height:1.02;letter-spacing:-.02em;
  color:var(--branco);margin:0 0 .7rem;text-shadow:0 4px 26px rgba(8,20,45,.5);
}
.slide p{
  color:rgba(255,255,255,.92);font-size:clamp(1rem,3.6vw,1.2rem);
  line-height:1.45;margin:0 0 .5rem;max-width:34ch;
  text-shadow:0 2px 14px rgba(8,20,45,.55);
}
/* slide de abertura de ato, sem foto, funciona como cartela de título */
.slide--cartela{justify-content:center;background:linear-gradient(150deg,var(--azul) 0%,var(--azul-fundo) 70%)}
.slide--cartela .slide__txt{padding-bottom:0}
.slide--cartela .slide__ano{font-size:clamp(3.5rem,16vw,7rem);background:none;border:0;padding:0;color:var(--dourado);line-height:.9;margin-bottom:.4rem}
.slide--cartela::after{
  content:'';position:absolute;right:-14%;top:-25%;width:52%;height:150%;
  border-radius:999px;background:var(--lima);opacity:.12;
  transform:rotate(var(--diag));pointer-events:none;
}
.slide--fim .botao{margin-top:1rem}

/* barra de progresso sobreposta */
.cam__hud{
  position:absolute;left:0;right:0;top:0;z-index:3;
  padding:1.6rem 0 0;pointer-events:none;
}
.cam__hud .caixa{pointer-events:auto}
.cam__atos{display:flex;gap:1.3rem;margin-bottom:.6rem}
.cam__ato{
  font-family:var(--display);font-weight:800;font-size:.88rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.42);transition:color .35s ease;
}
.cam__ato.on{color:var(--dourado)}
.cam__trilho{height:3px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.cam__preenche{height:100%;width:8%;background:var(--lima);border-radius:999px;transition:width .15s linear}

.cam__dica{
  position:absolute;left:0;right:0;bottom:1.2rem;z-index:3;
  width:min(100% - 2.5rem, var(--larg));margin-inline:auto;
  display:flex;align-items:center;gap:.5rem;
  font-size:.88rem;color:rgba(255,255,255,.6);transition:opacity .4s ease;
}
.cam__dica-seta{width:22px;height:2px;background:var(--lima);position:relative;animation:puxa 1.8s ease-in-out infinite}
.cam__dica-seta::after{
  content:'';position:absolute;right:-1px;top:-3px;width:8px;height:8px;
  border-top:2px solid var(--lima);border-right:2px solid var(--lima);transform:rotate(45deg);
}
@keyframes puxa{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(7px);opacity:1}}
.cam__dica.some{opacity:0}

/* CAMINHADA VERTICAL · um único palco imersivo */
/* ⚠️ A caminhada NÃO sobe por baixo da família: ela já está montada e parada
   atrás dela, e quem se move é a família, que sai de cena e revela.
   Três peças fazem isso, e as três precisam andar juntas:
   1. `margin-top:-100svh` põe a seção atrás da família em vez de depois dela;
   2. `z-index:2` a coloca acima do hero (que é sticky em z-index 1 e está
      logo atrás) e abaixo da família (z-index 8), que cobre os dois;
   3. o `colchao()` do script.js devolve essa tela ao percurso da linha do
      tempo, senão a revelação come ~15% dele e o primeiro slide passa batido.
   O encaixe de scroll sai da família de propósito: com `mandatory` no
   computador, ela viraria uma parede contra a seção grudada no topo. */
/* posição, camada e revelação vêm do padrão PAINÉIS, no fim do arquivo. */
.cam{height:900svh;background:var(--azul-fundo)}
.quem{scroll-snap-align:none}
.cam__fixo{isolation:isolate}
.cam__fundo{position:absolute;inset:0;z-index:0;display:block}
.cam__fundo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,28,61,.93),rgba(7,28,61,.68) 38%,rgba(7,28,61,.2) 68%,rgba(7,28,61,.58))}
.cam__fundo img{width:100%;height:100%;object-fit:cover}
.cam__janela{position:absolute;inset:0;z-index:2}
.cam__trilha{position:relative;display:block;width:100%;height:100%;transform:none!important}
.slide{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .75s ease,visibility .75s step-end}
.slide.ativo{opacity:1;visibility:visible;transition:opacity .75s ease,visibility 0s}
.slide__foto{inset:8% 8% 0 40%;z-index:0;opacity:0;transform:none;transition:opacity .72s ease;-webkit-mask-image:none;mask-image:none}
.slide.ativo .slide__foto{opacity:1;transform:none}
.slide__foto img{object-position:center 30%;filter:saturate(.92) contrast(1.03)}
.slide__foto--recorte{inset:13% 12% 0 43%;-webkit-mask-image:none;mask-image:none}
.slide__foto--recorte img{object-fit:contain;object-position:center bottom;filter:none}
.slide__veu{inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,29,62,.28),transparent 62%)}
.slide__txt,.slide--cartela .slide__txt{position:absolute;z-index:2;left:max(4rem,calc((100vw - var(--larg))/2));top:35%;width:min(34vw,31rem);margin:0;padding:0;opacity:0;transform:translateY(52px);transition:opacity .6s ease .1s,transform .8s cubic-bezier(.2,.75,.25,1) .1s}
.slide.ativo .slide__txt{opacity:1;transform:translateY(0)}
.slide.passou .slide__txt{transform:translateY(-48px)}
.slide--cartela{background:transparent}.slide--cartela::after{content:none}
.slide--cartela .slide__ano,.slide__ano{font-size:.95rem;background:none;border:0;padding:0;color:var(--dourado);letter-spacing:.14em;text-transform:uppercase}
.slide__titulo{font-size:clamp(2.7rem,4.6vw,4.8rem);text-shadow:none}.slide p{font-size:clamp(1rem,1.35vw,1.22rem);text-shadow:none}
.cam__hud{left:auto;right:max(1.3rem,calc((100vw - var(--larg))/2));top:50%;width:10rem;padding:0;transform:translateY(-50%)}
.cam__hud .caixa{width:100%;display:grid;grid-template-columns:1fr 4px;column-gap:1rem;padding:0}.cam__hud .rotulo{grid-column:1/-1;text-align:right;margin-bottom:1rem}
.cam__atos{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:3.4rem;margin:0}.cam__ato{font-size:.72rem;text-align:right}
.cam__trilho{grid-column:2;grid-row:2;height:100%;min-height:9rem;width:3px}.cam__preenche{width:100%;height:6%;transition:height .18s linear}.cam__dica{left:max(2rem,calc((100vw - var(--larg))/2));right:auto;width:auto}
@media (max-width:700px){.cam__numero-fixo{top:8%;font-size:28vw}.slide__foto{inset:20% 0 0 16%;-webkit-mask-image:linear-gradient(0deg,#000,#000 78%,transparent);mask-image:linear-gradient(0deg,#000,#000 78%,transparent)}.slide__txt,.slide--cartela .slide__txt{left:1.25rem;right:3.8rem;top:auto;bottom:10%;width:auto;padding:1.2rem;border-radius:16px;background:rgba(8,29,62,.72);backdrop-filter:blur(8px)}.slide__titulo{font-size:clamp(2rem,10vw,3rem)}.cam__hud{right:.65rem;width:2.6rem}.cam__hud .caixa{grid-template-columns:1fr 3px;column-gap:.35rem}.cam__hud .rotulo,.cam__ato{font-size:0;color:transparent}.cam__atos{gap:3rem}.cam__ato::after{content:'';display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}.cam__ato.on::after{background:var(--lima)}}

/* =========================================================
   ZONA LIVRE · rola normalmente
   ========================================================= */
.livre{background:var(--branco)}

/* ⚠️ A zona livre TAMBÉM precisa de pontos de encaixe.
   Sem nenhum ponto depois da última seção do palco, o `scroll-snap-type: mandatory`
   não encontra destino para onde ir e devolve a pessoa para a seção anterior:
   o site trava e não passa das bandeiras.
   Como estas seções são bem mais altas que a tela, o encaixe não prende ninguém,
   só marca o começo de cada uma. Não remover. */
.props,.chamado,.rodape{scroll-snap-align:start;scroll-snap-stop:normal}

/* ⚠️ position+z-index NÃO são decoração. O `.rodape` fica FORA do `.livre` e
   sem eles a camada `.fundo` (fixed, z-index:0) pinta por cima do rodapé
   inteiro: some o CNPJ e o aviso de propaganda eleitoral, que são obrigatórios
   (Lei 9.504/97). Medido: o rodapé ocupava a tela com opacidade 1 e mesmo
   assim só aparecia a foto de fundo. Não remover. */
.rodape{position:relative;z-index:2;background:var(--azul-fundo);color:rgba(255,255,255,.8);padding:3.2rem 0 2.4rem}
.rodape__marca{width:200px;margin-bottom:1.1rem}
.rodape__frase{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--dourado);margin:0 0 1.8rem;max-width:22ch;line-height:1.15}
.rodape__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-bottom:1.8rem}
.rodape__nav a{color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:.98rem;min-height:44px;display:inline-flex;align-items:center}
.rodape__nav a:hover{color:var(--lima)}
.rodape__legal{border-top:1px solid rgba(255,255,255,.16);padding-top:1.4rem;font-size:.8rem;line-height:1.55;color:rgba(255,255,255,.6)}
.rodape__legal p{margin:0 0 .2rem}

/* =========================================================
   ATALHO FIXO DE WHATSAPP · em toda tela, sempre
   ========================================================= */
.atalho{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(28,52,93,.99) 55%, rgba(28,52,93,0));
  transform:translateY(120%);transition:transform .4s cubic-bezier(.2,.75,.25,1);
}
.atalho.aparece{transform:none}
.atalho .botao{width:100%;font-size:1.08rem}
/* ⚠️ No celular a barra do atalho é sólida e cobre ~5rem da base. Sem esta
   folga ela corta o último card das listas longas, e no rodapé ela tampava
   justamente o CNPJ e o aviso de propaganda eleitoral, que são obrigatórios.
   Seção longa nova depois do palco precisa entrar nesta lista. */
@media (max-width:700px){
  .props,.chamado,.rodape{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}
}

/* =========================================================
   REVELAÇÃO
   ========================================================= */
.rev{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.75,.25,1)}
.rev.vis{opacity:1;transform:none}

/* =========================================================
   TABLET
   ========================================================= */
@media (min-width:701px){
  .mosaico{grid-template-columns:repeat(4,1fr)}
  .bandeiras__grade{grid-template-columns:repeat(2,1fr);gap:1rem}
  .entrar__grade{grid-template-columns:repeat(3,1fr);align-items:start}
  .hero__acao{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
  .hero__acao .botao{width:auto}
  .hero__nota{margin:0;max-width:22rem}
  /* a partir do tablet o recorte fica inteiro na direita e o texto ocupa a esquerda */
  /* ⚠️ O recorte novo (743x974, proporção 0,76) já vem cortado na cintura.
     A conta antiga de empurrar o excesso para fora da base valia para o
     recorte de corpo inteiro (proporção 0,53) e aqui deixa a figura gigante. */
  /* ⚠️ Altura sozinha não serve: em tela alta e estreita (iPad 1024x1366) os
     86svh davam 1175px de altura e 893px de largura, 87% da janela, e o texto
     ficava com 66px. O `min` com vw põe um teto de largura.
     A reserva do texto sai da MESMA variável, senão as duas contas divergem. */
  .hero{--figA:min(82svh, 60vw)}
  .hero__figura{height:calc(var(--figA) * var(--fig-crescer));bottom:calc(-8svh - var(--figA) * (var(--fig-crescer) - 1))}
  /* ⚠️ Esta cama cobria 44% da altura. Numa tela de 950px isso dá ~418px, e o
     bloco de texto sobe ~590px a partir da base: sobravam ~170px do h1, ou
     seja as duas primeiras linhas, apoiados só no véu (alpha entre .20 e .03)
     e no text-shadow, bem em cima dos prédios claros do skyline. Subiu para
     60% com uma parada a mais na rampa, para o topo do degradê não virar uma
     linha visível no céu. Valor validado por medição, não a olho. */
  /* leve: o fundo tratado já entrega o lado esquerdo escuro */
  .hero__base{height:38%;background:linear-gradient(to top,
    rgba(12,26,54,.55) 0%, rgba(14,30,62,.30) 34%, rgba(20,50,100,0) 100%)}
  .hero > .caixa{max-width:none}
  /* o título estoura a caixa e encosta na borda: é ele que carrega a tela */
  .hero__titulo{
    /* ⚠️ Já esteve em 7,6vw (109px em 1440) e roubava a cena: o texto ficava
       com 60% do quadro e a cidade e o candidato viravam textura de fundo.
       Numa abertura de campanha quem carrega o reconhecimento é o rosto e o
       número; a frase apoia. */
    font-size:clamp(2.4rem,3.9vw,4rem);line-height:.98;letter-spacing:-.02em;
    margin-left:-.03em;max-width:16ch;
  }
  .hero__olho,.hero__apoio,.hero__acao{max-width:32rem}
  .hero__apoio{font-size:clamp(1rem,1.15vw,1.18rem);max-width:30ch}

  /* o atalho vira pílula no canto, sem tampar a tela */
  .atalho{
    left:auto;right:1.5rem;bottom:1.5rem;width:auto;padding:0;background:none;
    transform:translateY(180%);
  }
  .atalho .botao{width:auto;box-shadow:0 14px 40px rgba(12,28,58,.4), 0 10px 26px rgba(145,187,70,.34)}
  /* a pílula fica exatamente sobre a última legenda do mosaico, então ela sobe */
}

/* =========================================================
   TABLET EM RETRATO · 701 a 900px
   Esta faixa não tinha tratamento nenhum e era o pior enquadramento do site.
   Ela pega o layout de tablet inteiro (recorte alto na direita) sem herdar o
   `padding-right` do celular, que é justamente o que impede o texto de cair em
   cima da figura. Em 768 e 810px, que são iPad em retrato, sobra pouca largura
   para as duas colunas conviverem. Aqui o recorte recua e o texto ganha guarda.
   ========================================================= */
@media (min-width:701px) and (max-width:900px){
  .hero{--figA:min(120svh, 86vw);--hero-person-x:calc(72% - 50px)}
  .hero__vote{top:calc(4rem + 96px)}
  .hero__figura{height:calc(var(--figA) * var(--fig-crescer));bottom:calc(-2svh - var(--figA) * (var(--fig-crescer) - 1))}
  .hero > .caixa{padding-right:calc(var(--figA) * .74 + .5rem)}
  .hero__titulo{font-size:clamp(2rem,4.8vw,2.7rem);line-height:.98;max-width:15ch}
  /* 22rem e não 26rem: em 768px o olho ia até x=436 e o recorte começava em
     x=427, então a última palavra do cargo caía no ombro dele */
  .hero__olho,.hero__apoio,.hero__acao{max-width:22rem}
  .hero__base{height:46%}
  .hero__selo{left:calc(var(--hero-person-x) + 11% - 50px);right:auto;top:calc(43% + 20px)}
  .hero__acao .botao{font-size:1rem;padding:.75rem 1.05rem}
}

/* =========================================================
   COMPUTADOR
   ========================================================= */
@media (min-width:901px){
  .hero__selo{left:calc(var(--hero-person-x) + 11% - 50px);right:auto}
  /* TEXTO CENTRALIZADO na faixa livre, à esquerda da figura.
     Centralizar na largura inteira da tela jogaria as linhas longas em cima do
     corpo dele, que é foto recortada e não tem contraste de fundo. Então a
     coluna de texto ocupa o espaço que sobra e fica centralizada dentro dele. */
  /* O BLOCO é que fica centralizado na faixa livre, à esquerda da figura.
     O texto continua alinhado à esquerda DENTRO dele: por isso existe o
     invólucro `.hero__bloco` com largura de conteúdo e margem automática.
     Sem o invólucro, cada linha se centraria sozinha e as bordas esquerdas
     ficariam desalinhadas. */
  /* ⚠️ MEDIDO EM 16/08: centralizar o bloco no eixo da hero NÃO cabe.
     Centro da hero em 1440px = 720. O bloco tem ~460px, então ocupa de 490 a
     950. A figura, dimensionada para a cintura encostar na base, começa em
     570. O texto cai em cima do corpo dele, que é foto recortada e não segura
     contraste. Tentado e reprovado. Só volta se a figura encolher muito, e aí
     perde o corte na cintura.
     Portanto: bloco alinhado à esquerda do container, figura à direita. */
  /* ⚠️ NUNCA usar porcentagem aqui. Padding em % resolve contra a largura da
     HERO, não do container: numa tela 2539x926 os 44% viravam 1117px dentro de
     um container de 1180 e sobravam 63px para o texto, uma palavra por linha.
     A figura tem 86svh de altura e proporção 0,76, logo ocupa 65svh de largura.
     A reserva acompanha isso e não a largura da janela. */
  .hero > .caixa.hero__texto{padding-right:min(calc(var(--figA) * .78 + 1rem),46rem);text-align:left}
  .hero__bloco{width:max-content;max-width:100%;margin-inline:auto;translate:3vw 0}
  .hero__titulo{max-width:none}

  /* ⚠️ A figura alinhada à borda direita do CONTAINER, não à da janela.
     Com `right:5%` ela ficava a 72px da borda da tela num viewport de 1440,
     enquanto o container de 1180px termina a 130px: ela furava a grade e
     encostava no canto. `max()` protege as telas entre 901 e 1180px, onde a
     conta daria negativo. */
  .titulo{font-size:clamp(2.4rem,3.6vw,3.5rem)}

  /* o slide passa a ter a foto de um lado e o texto do outro */
  .slide{justify-content:center}
  .slide__foto img{object-position:32% center}
  .slide__veu{
    background:linear-gradient(to right,
      rgba(28,52,93,.30) 0%, rgba(28,52,93,.42) 26%, rgba(28,52,93,.86) 52%,
      rgba(28,52,93,.98) 68%, var(--azul-fundo) 82%);
  }
  /* Empurrar a coluna de texto com padding é mais seguro que alinhar cada filho:
     o `margin` próprio do parágrafo vence um `margin-left:auto` genérico e o
     texto acaba caindo em cima da foto. */
  .slide__txt{padding-bottom:0;padding-left:52%}
  .slide__txt > *{max-width:32rem}
  .slide p{max-width:32rem}
  .slide--cartela .slide__txt{padding-left:0}
}

/* =========================================================
   MOVIMENTO REDUZIDO
   Sem encaixe e sem travamento. A história continua inteira.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;scroll-snap-type:none!important}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .tela{scroll-snap-align:none;scroll-snap-stop:normal}
    .quem{height:auto;min-height:100svh}
  .quem__fixo{position:relative;min-height:100svh}
  .hero__olho,.hero__titulo .lin > span,.hero__apoio,.hero__acao,.hero__selo{opacity:1;transform:none}
  .rev{opacity:1;transform:none}
  /* o vídeo não é carregado, e nada flutua nem segue o mouse */
  .hero__cena,.hero__cena picture,.hero__cena img{animation:none;transform:none;filter:none}
  .hero__particulas{display:none}
  .hero__figura,.hero__figura img{transform:none!important;animation:none}
  .hero__luz,.hero__desce-linha{animation:none}
  .hero__desce{opacity:1}
  .hero__sol{background:radial-gradient(24rem 24rem at 88% 10%, rgba(255,206,120,.24), rgba(255,140,40,0) 62%)}

  /* linha do tempo empilhada */
  .cam__fixo{position:static;height:auto;overflow:visible}
  .cam__janela{height:auto;overflow:visible}
  .cam__trilha{flex-direction:column;width:auto;height:auto;transform:none!important}
  .slide{width:auto;height:auto;min-height:62svh}
  .cam__hud{position:static;padding:1.6rem 0 .5rem}
  .cam__dica{display:none}
  .atalho{transform:none}
  .mosaico{min-height:0}
  /* ⚠️ `.tela` genérico aqui pegava o hero junto e punha `min-height:0` nele.
     Como `.hero__figura` continua em svh e o `.hero` tem `overflow:hidden`, o
     recorte ficava maior que o próprio contêiner e era cortado pelo topo: quem
     usa movimento reduzido via o candidato decapitado. A abertura é composta,
     e composição não colapsa; quem colapsa é o resto. */
  .tela:not(.hero){min-height:0;padding:3.5rem 0}
  .hero{padding-top:6rem;padding-bottom:2rem}
}


/* =========================================================
   MENU · largura cheia, encostando nas duas bordas
   ========================================================= */
.menu{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.1rem clamp(1.25rem,3.4vw,3.2rem);
}

/* =========================================================
   CAMINHADA · palco realmente fixo
   Este bloco fica por último de propósito: neutraliza o antigo layout
   horizontal que, no desktop, ainda mandava os textos pares para a direita.
   ========================================================= */
.cam .slide{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  opacity:1;visibility:visible;background:transparent;
  transition:none;pointer-events:none;
}
.cam .slide__veu{display:none}
.cam .slide__txt,
.cam .slide--cartela .slide__txt{
  position:absolute;left:max(4rem,calc((100vw - var(--larg))/2));right:auto;
  top:35%;width:min(34vw,31rem);margin:0;padding:0;
  opacity:0;transform:translate3d(0,72px,0);
  transition:opacity .44s ease,transform .78s cubic-bezier(.22,.72,.2,1);
  will-change:opacity,transform;
}
.cam .slide__txt > *,.cam .slide p{max-width:32rem}
.cam .slide.ativo .slide__txt{
  opacity:1;transform:translate3d(0,0,0);pointer-events:auto;
  transition-delay:.13s;
}
.cam .slide.passou .slide__txt{
  opacity:0;transform:translate3d(0,-72px,0);transition-delay:0s;
}
.cam .slide__foto{
  opacity:0;transform:none;transition:opacity .72s ease;will-change:opacity;
}
.cam .slide.ativo .slide__foto{opacity:1;transform:none}
.cam .slide__foto--moldura{
  inset:20% 16% 14% 51%;padding:7px;
  border:2px solid var(--lima);border-radius:26px;
  background:var(--lima);overflow:hidden;
  box-shadow:0 16px 38px rgba(3,16,39,.24);
}
.cam .slide__foto--moldura img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  border-radius:18px;filter:saturate(1.04) contrast(1.02);
}
.cam .slide__foto--moldura.slide__foto--paisagem{
  inset:29% 11% 29% 47%;
}
.cam .slide__foto--paisagem img{object-position:center}
.cam .slide__foto--moldura.slide__foto--quadrada{inset:20% 14% 17% 49%}
.cam .slide__foto--quadrada img{object-position:center}

/* ⚠️ O quadro não pode ser medido em % da tela. O container do site tem
   largura FIXA (`--larg`, 1180px) e a trilha de atos fica ancorada perto da
   borda, então uma borda direita em 11% da tela cabe em 1440 e estoura
   depois disso. **Medido:** em 1710px, que é a tela do Rafael, as paisagens
   passavam 77px da margem do container e entravam 51px por baixo da trilha;
   em 1920 eram 159px e 133px; em 2560 o quadro tinha 1075px de largura.
   A borda direita agora é o MAIOR entre a margem do container e o espaço da
   trilha, e a largura para de crescer junto com a tela.
   As três variantes precisam repetir o `right`: a regra de `.paisagem` e a
   de `.quadrada` têm dois nomes de classe e venceriam a base por
   especificidade, devolvendo o valor do `inset`. */
@media (min-width:901px){
  .cam .slide__foto--moldura,
  .cam .slide__foto--moldura.slide__foto--paisagem,
  .cam .slide__foto--moldura.slide__foto--quadrada{
    --recuo-trilha:calc(max(1rem, (100vw - 1200px)/2 - 9rem) + 8rem + 1.5rem);
    right:max(var(--recuo-trilha), calc((100vw - var(--larg)) / 2));
    left:auto;
  }
  /* ⚠️ A PROPORÇÃO do quadro vinha da tela, e por isso o enquadramento mudava
     de máquina para máquina: a mesma paisagem dava 1,78:1 em 1920 e 1,31:1
     em 1710, e o `cover` comia as laterais em quem tem a tela mais baixa.
     Agora cada quadro tem a proporção da foto que vive nele, e o corte é o
     mesmo em qualquer tela. O terceiro termo do `min()` é o teto de altura,
     para tela baixa não empurrar o quadro para fora.
     Trocar a foto de um slide pede conferir a proporção aqui. */
  .cam .slide__foto--moldura,
  .cam .slide__foto--moldura.slide__foto--paisagem,
  .cam .slide__foto--moldura.slide__foto--quadrada{
    top:50%;bottom:auto;height:auto;translate:0 -50%;
  }
  /* retrato 3:4 (multidão de jovens) */
  .cam .slide__foto--moldura{aspect-ratio:4/5;width:min(40vw, calc(var(--larg) * .42), calc(66svh * .8))}
  /* paisagem 3:2 (Jesus no Litoral, Sentinelas, família) */
  .cam .slide__foto--moldura.slide__foto--paisagem{aspect-ratio:3/2;width:min(48vw, calc(var(--larg) * .52), calc(56svh * 1.5))}
  /* quadrada 1:1 (governador) */
  .cam .slide__foto--moldura.slide__foto--quadrada{aspect-ratio:1/1;width:min(42vw, calc(var(--larg) * .45), 62svh)}
  /* 4:3 (a foto de família, que é a única nessa proporção) */
  .cam .slide__foto--moldura.slide__foto--43{aspect-ratio:4/3;width:min(46vw, calc(var(--larg) * .5), calc(58svh * 1.334))}
}
.cam .slide__proxima{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem!important;
  color:var(--lima)!important;font-family:var(--display);font-weight:800;
  font-size:.88rem!important;letter-spacing:.04em;
}
.cam .slide__proxima::after{content:'↓';animation:pulaProxima 1.5s ease-in-out infinite}
@keyframes pulaProxima{50%{transform:translateY(5px)}}

@media (min-width:901px){
  .cam .cam__hud{
    right:max(1rem,calc((100vw - 1200px)/2 - 9rem));
    width:8rem;
  }
  .cam .cam__atos{gap:7rem}
  .cam .cam__trilho{height:100%;min-height:22rem}
}

@media (max-width:700px){
  .cam .slide__txt,.cam .slide--cartela .slide__txt{
    left:1.25rem;right:3.8rem;top:auto;bottom:10%;width:auto;
    padding:1.2rem;border-radius:16px;background:rgba(8,29,62,.72);
    backdrop-filter:blur(8px);
  }
  .cam .slide__foto--moldura{
    inset:15% 3.8rem 40% 1.25rem;padding:4px;border-radius:18px;
  }
  .cam .slide__foto--moldura img{border-radius:12px;object-position:center 60%}
  .cam .slide__foto--moldura.slide__foto--paisagem{
    inset:17% 3.8rem 48% 1.25rem;
  }
  .cam .slide__foto--paisagem img{object-position:center}
  .cam .slide__foto--moldura.slide__foto--quadrada{inset:14% 3.8rem 45% 1.25rem}
}
.menu__marca{display:flex;align-items:center;flex:none;min-height:44px}
.menu__marca img{height:clamp(38px,4.4vw,54px);width:auto;filter:drop-shadow(0 3px 14px rgba(0,0,0,.5))}

.menu__lista{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.4rem)}
.menu__lista a{
  font-family:var(--display);font-weight:800;font-size:.98rem;
  color:rgba(255,255,255,.9);text-decoration:none;
  padding:.6rem 0;display:inline-flex;align-items:center;min-height:44px;
  border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.menu__lista a:hover{color:var(--dourado);border-bottom-color:var(--dourado)}
/* ⚠️ SEM BRILHO VERDE. O Rafael mandou tirar o halo lima dos botões em 19/08 e
   a regra global do `.botao--lima` foi limpa, mas esta aqui escapou: o CTA do
   menu continuava com `box-shadow` lima e acendia um halo em volta dele,
   visível toda vez que o menu abria no celular. */
.menu__cta{
  background:var(--lima);color:var(--azul-fundo)!important;
  padding:.55rem 1.2rem!important;border-radius:999px;border-bottom:0!important;
}
.menu__cta:hover{filter:brightness(1.06)}

/* ⚠️ As três barrinhas têm 20px de largura e o botão herdava isso: 26px de
   alvo, contra o piso de 44. O padding lateral é o que dá a área de toque
   sem mudar o desenho. */
.menu__botao{
  display:none;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;
  color:#fff;font-family:var(--display);font-weight:800;font-size:.95rem;
  min-height:44px;min-width:44px;padding:.4rem .75rem;margin-right:-.55rem;
}
.menu__botao span:not(.menu__botao-txt){display:block;width:20px;height:2px;background:#fff;transition:transform .25s ease,opacity .25s ease}
.menu__botao[aria-expanded=true] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu__botao[aria-expanded=true] span:nth-child(2){opacity:0}
.menu__botao[aria-expanded=true] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:900px){
  .menu{padding:.9rem 1.25rem}
  .menu__botao{display:inline-flex;flex-direction:column;gap:4px;align-items:flex-start}
  .menu__botao-txt{display:none}
  .menu__lista{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(16,32,66,.97);backdrop-filter:blur(10px);
    padding:.5rem 1.25rem 1.1rem;
    display:none;
  }
  .menu__lista.aberto{display:flex}
  .menu__lista a{min-height:52px;border-bottom:1px solid rgba(255,255,255,.1)}
  .menu__cta{margin-top:.7rem;justify-content:center}
  /* ⚠️ O TEXTO VOLTOU. Escondê-lo no celular deixava só a linha animada de 2px
     de largura, que caía em cima da figura e lia como defeito de renderização,
     não como convite para rolar. Numa travessia de 11 telas, o primeiro
     "role" é a peça que decide se a pessoa vê o resto. */
  .hero__desce > span:first-child{display:block;font-size:.78rem}
  /* a linha que desce precisa parar ACIMA da faixa do rótulo de IA, senão
     ela termina dentro do texto do aviso */
  .hero__desce{padding-bottom:3.4rem;gap:.4rem}
  .hero__desce > span:first-child{letter-spacing:.1em}
  .hero__desce-linha{height:1.5rem}
}

@media (min-width:901px){
  .hero__desce{translate:none}
}

/* =========================================================
   PAINÉIS · a física da travessia, declarada uma vez

   O site inteiro empilha seções que se cobrem e se revelam sem empurrar
   nada. Antes isso era feito à mão em cada seção, com `margin-top` negativo
   e `z-index` chumbado, e um comentário longo explicando por que as peças
   precisavam andar juntas. Agora são duas classes e uma variável.

   O TRUQUE É UM SÓ, e o que muda é quem tem a camada maior:
   · `painel--atras` puxa a seção 100svh para cima, fazendo ela COMEÇAR onde
     a anterior ainda está na tela;
   · se a `--camada` dela for MENOR que a da vizinha, ela fica parada atrás e
     é REVELADA quando a de cima sai (é assim que a família revela a
     caminhada);
   · se for MAIOR, ela desliza POR CIMA e COBRE a vizinha, que fica parada no
     sticky (é assim que o número cobre a caminhada).

   ⚠️ A ordem de empilhamento mora no HTML, em `style="--camada:N"`. Mexer
      nela sem olhar as vizinhas quebra a travessia inteira.
   ⚠️ Quem come uma tela na cobertura precisa devolvê-la ao percurso, senão a
      história começa antes de a pessoa ver o primeiro quadro. Quem faz isso é
      o `percurso()` do script.js, pelas opções `antes` e `depois`.
   ========================================================= */
/* ⚠️ A `--camada` só é lida por quem carrega `.painel`. A `.quem` já teve
   `--camada:8` sem a classe, ficou sem z-index nenhum, e a linha do tempo
   passou por cima: a seção da família SUMIU da página, sem erro de console,
   sem 404, sem nada no DevTools. Seção de painel leva a classe. */
.painel,.cam{position:relative;z-index:var(--camada,2)}
.painel--atras,.cam{margin-top:-100svh}
.painel__fixo{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.cam{--camada:2}
.quem{--camada:8}

/* sem movimento não existe cobertura: as seções voltam a se empilhar */
@media (prefers-reduced-motion:reduce){
  .painel--atras,.cam{margin-top:0}
  .painel__fixo{position:relative;height:auto;min-height:100svh}
}

/* ⚠️ Quem centraliza numa seção de painel é o `.painel__fixo`, e por isso
   essas seções NÃO levam a classe `.tela`: ela centraliza o filho direto da
   seção e ainda traz padding próprio, e as duas regras juntas empurravam o
   texto para o topo com meia tela vazia embaixo. */
.painel__fixo > .caixa{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:5.5rem 6.5rem;
}

/* =========================================================
   SAÍDA DISCRETA DA CAMINHADA
   Fica no canto oposto ao "Continue rolando" para não disputar com ele.
   ========================================================= */
.cam__saiba{
  position:absolute;z-index:4;bottom:2.1rem;
  right:max(1.3rem,calc((100vw - var(--larg))/2));
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.72);text-decoration:none;
  padding:.5rem .1rem;border-bottom:1px solid rgba(255,255,255,.28);
  transition:color .25s ease,border-color .25s ease;
}
.cam__saiba:hover{color:var(--lima);border-color:var(--lima)}
.cam__saiba-seta{width:16px;height:1px;background:currentColor;position:relative;flex:none}
.cam__saiba-seta::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* =========================================================
   O NÚMERO · fecho da linha do tempo
   A cena de fundo `numero` não tem foto: o azul da marca fica sozinho para o
   contador em lima ser a única coisa acesa na tela.
   ========================================================= */
.numero{height:220svh;text-align:center}
.numero__fixo{background:var(--azul-fundo)}
.numero .rotulo{margin-bottom:.7rem}
.numero__titulo{
  font-family:var(--display);font-weight:800;color:var(--branco);
  font-size:clamp(2.35rem,4.8vw,4.5rem);line-height:.96;margin:0;
  text-shadow:0 6px 40px rgba(8,20,45,.5);
}

/* O CONTADOR.
   ⚠️ O 55550 daqui é o ÚNICO número digitado do site. Ele é contador, não
      assinatura: onde o número é identidade ele sai da arte oficial
      (`numero-solido-v2.webp`), como manda o DESIGN_SYSTEM.
   ⚠️ Cada dígito é um `<i>` próprio porque eles travam um a um, da esquerda
      para a direita. `tabular-nums` mais a largura em `ch` são o que impedem
      a linha de dançar enquanto os algarismos rodam. */
.numero__digitos{
  display:block;margin:1.1rem auto .5rem;color:var(--lima);font-family:var(--display);
  font-size:clamp(7rem,16vw,14rem);font-weight:800;line-height:.78;letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
  /* ⚠️ O NÚMERO NÃO PODE QUEBRAR, NUNCA. O piso do clamp acima trava em 7rem
     (112px) e cinco algarismos a esse corpo pedem ~320px de linha: em 320,
     344, 360 e 375px eles NÃO cabiam e o 55550 saía em DUAS LINHAS, com a
     animação chegando a mostrar coisas como "5290 / 0". Medido nas sete
     larguras. Quem resolve é o teto por `vw` do media de celular, logo
     abaixo; o `nowrap` aqui é só a trava de segurança, para uma regressão
     futura aparecer como corte na borda (visível em captura) em vez de um
     número partido que ninguém percebe. */
  white-space:nowrap;
  opacity:0;transform:scale(.88);
  transition:opacity .7s ease, transform .9s cubic-bezier(.2,.75,.25,1);
  text-shadow:0 10px 60px rgba(141,204,47,.28);
}
.numero.acesa .numero__digitos{opacity:1;transform:scale(1)}
.numero__digitos i{
  display:inline-block;font-style:normal;min-width:.62em;text-align:center;
  transition:color .3s ease,text-shadow .3s ease;
}
/* enquanto roda, o algarismo é apagado; ao travar, acende */
.numero__digitos i:not(.travou){color:rgba(141,204,47,.42);text-shadow:none}
.numero__digitos i.travou{animation:travaDigito .5s cubic-bezier(.2,.75,.25,1)}
@keyframes travaDigito{0%{transform:translateY(-.06em) scale(1.12)}100%{transform:none}}

.numero__apoio{color:var(--branco);max-width:47ch;margin:.35rem auto 0;font-size:1.1rem}
.numero__apoio strong{color:var(--lima);font-family:var(--display);font-size:1.25em}
.numero__apoio em{font-style:italic}
.numero__apoio b{font-weight:800}

/* CELULAR · o número tem que caber numa linha em qualquer aparelho.
   ⚠️ 7rem é o PISO do clamp lá em cima, não o teto: abaixo de 700px o `16vw`
      já é menor que ele, então todo celular recebia 112px fixos e o 55550
      quebrava em duas linhas de 320 a 375px. Aqui o corpo volta a andar com a
      largura e só para de crescer em 7rem, que é o valor de hoje e cabe a
      partir de 390px. Régua: cinco algarismos ocupam ~2,86em de linha, e a
      caixa tem `100vw - 2.5rem`, então o teto seguro é 0,35 x (100vw - 40px);
      os 28vw abaixo ficam com folga dentro disso.
   ⚠️ Mexer no `letter-spacing` ou no `min-width` dos `<i>` muda essa conta.
      Conferir de novo em 320, 344, 360 e 375. */
@media (max-width:700px){
  .numero__digitos{font-size:min(28vw,7rem)}
}

/* =========================================================
   O QUE ELE TROUXE PARA FOZ · o mural
   Fundo e 55550 apagado repetem a posição da linha do tempo de propósito:
   é o que faz o olho entender que continua o mesmo palco.
   ========================================================= */
.avisos{height:560svh;--camada:3}
.avisos__fundo{position:absolute;inset:0;z-index:0;display:block}
.avisos__fundo img{width:100%;height:100%;object-fit:cover}
.avisos__fundo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,28,61,.94),rgba(7,28,61,.78) 42%,rgba(7,28,61,.86))}

/* mesma régua do `.cam__numero-fixo`: mesma posição, mesmo peso */
.cam__numero-fixo,.avisos__numero{
  position:absolute;z-index:1;left:50%;top:5.5%;transform:translateX(-50%);
  color:rgba(255,255,255,.18);font-family:var(--display);
  font-size:clamp(6rem,13vw,12rem);font-weight:800;line-height:1;
  letter-spacing:-.06em;pointer-events:none;
}

.avisos__grade{
  position:relative;z-index:2;height:100%;
  width:min(100% - 2.5rem, var(--larg));margin-inline:auto;
  display:grid;grid-template-columns:1fr;align-content:end;
}
.avisos__figura{display:none}
.avisos__coluna{display:flex;flex-direction:column;justify-content:center;height:100%;padding:7.5rem 0 6rem}
.avisos__titulo{
  font-size:clamp(1.75rem,5.4vw,2.5rem);line-height:1.04;color:var(--branco);
  margin:0 0 1.3rem;text-shadow:0 4px 26px rgba(8,20,45,.5);
}

/* A JANELA
   ⚠️ A máscara é o que faz o card sumir ao sair, em vez de ser cortado numa
      linha reta. Sem ela a pilha parece um `overflow:hidden` qualquer. */
.avisos__janela{
  position:relative;overflow:hidden;margin-top:.4rem;
  height:clamp(15rem,42svh,20rem);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 97%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 97%,transparent 100%);
}
.avisos__pilha{
  list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
  transition:transform .5s cubic-bezier(.2,.75,.25,1);will-change:transform;
}
.aviso{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-left:4px solid var(--lima);
  border-radius:14px;padding:.85rem 1.1rem;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;transform:translateY(26px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.75,.25,1);
}
.aviso.on{opacity:1;transform:none}
/* o que ainda está a caminho carrega o status na própria cor */
.aviso--vem{border-left-color:var(--dourado)}
.aviso h3{
  font-family:var(--display);font-weight:800;font-size:1.12rem;line-height:1.14;
  color:var(--branco);margin:0 0 .2rem;
}
.aviso p{margin:0;color:rgba(255,255,255,.82);font-size:.94rem;line-height:1.4}
.aviso strong{color:var(--branco)}

/* ⚠️ A pilha e o botão dividem a MESMA caixa, em position:absolute. No fim do
   percurso ela sai e ele entra no lugar dela, sem somar altura à página. Por
   isso os dois são absolutos: em fluxo normal, um empurraria o outro. */
.avisos__pilha,.avisos__saida{position:absolute;left:0;right:0;top:0}
.avisos__saida{
  inset:0;display:grid;gap:1.2rem;place-content:center;justify-items:center;text-align:center;
  opacity:0;transform:translateY(22px) scale(.96);pointer-events:none;
  transition:opacity .55s ease,transform .65s cubic-bezier(.2,.75,.25,1);
}
.avisos__saida.on{opacity:1;transform:none;pointer-events:auto}
.avisos__saida-txt{
  margin:0;font-family:var(--display);font-weight:800;color:var(--branco);
  font-size:clamp(1.15rem,3.4vw,1.6rem);line-height:1.14;max-width:22ch;
  text-shadow:0 4px 26px rgba(8,20,45,.5);
}
/* a pilha some quando o botão entra */
.avisos__janela.entregou .avisos__pilha{opacity:0;transform:translate3d(0,-42px,0)!important;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.75,.25,1)}

/* O popup do menu usa o MESMO formulário da seção final, clonado pelo JS.
   Sobre fundo claro o texto do formulário troca de cor, e só isso. */
.popup--grupo .grupo{max-width:none;padding-bottom:clamp(1.6rem,4vw,2.4rem)}
.popup--grupo .grupo__campo span{color:var(--azul-fundo)}
.popup--grupo .grupo__campo input{border-color:#C9D3E3}
.popup--grupo .grupo__campo input:focus{border-color:var(--azul)}
.popup--grupo .grupo__aviso{color:var(--tinta-suave)}
.popup--grupo .grupo__aviso.ok{color:#2C7A3F}
.popup--grupo .grupo__aviso.erro{color:#C0392B}
.popup--grupo .grupo__lgpd{color:var(--tinta-suave)}
.popup--grupo .grupo__lgpd a{color:var(--azul)}
.popup--grupo .grupo__botao[disabled]{background:#DDE4EF;color:#8A97AC}

/* o botão do menu é <button> e precisa parecer o mesmo item da lista */
.menu__cta{font:inherit;border:none;cursor:pointer}

/* PÁGINA DE FUNDO CLARO · o menu inteiro nasce branco
   ⚠️ A marca, o texto e as três barras do botão são brancos fixos. Em
      `propostas.html`, que tem miolo branco, isso media CONTRASTE 1:1: o
      hambúrguer ficava INVISÍVEL e o celular ficava sem navegação nenhuma,
      sem erro de console e sem nada no DevTools. A marca só não sumia junto
      por causa do `drop-shadow`. Medido em 390px antes da correção.
   ⚠️ A cor dos ITENS só muda no computador: no celular a lista abre dentro
      de um painel escuro próprio (`.menu__lista` em ≤900px), onde branco é o
      certo. Trocar a cor lá deixaria azul sobre azul, que é o mesmo bug ao
      contrário.
   A logo vira a arte AZUL (`logo-oficial-azul-v1.webp`), trocada no HTML da
   página; o nome do arquivo é novo de propósito, porque conteúdo novo em nome
   velho não chega em quem já visitou (cache immutable da Hostinger). */
.pagina--clara .menu__botao{color:var(--azul-fundo)}
.pagina--clara .menu__botao span:not(.menu__botao-txt){background:var(--azul-fundo)}
.pagina--clara .menu__marca img{filter:drop-shadow(0 2px 10px rgba(28,52,93,.14))}
@media (min-width:901px){
  .pagina--clara .menu__lista a{color:var(--azul-fundo)}
  .pagina--clara .menu__lista a:hover{color:var(--azul)}
}

/* CELULAR · o mural sem a figura
   ⚠️ `.avisos__figura` é `display:none` aqui, e o espaço dela virava ar: com
      7,5rem de padding no topo, o bloco só começava aos 309px de uma tela de
      844 e a janela terminava aos 748, ou seja **metade de cima vazia**.
      Medido com o painel travado, em 390x844.
   A janela de cartões cresce junto: com 42svh cabiam dois cartões e meio, e o
   percurso passava cartão em janela pequena. Com 52svh cabem três inteiros,
   que é o que a pilha precisa para o movimento ser lido.
   ⚠️ A FOLGA DE BAIXO É A BARRA DO WHATSAPP. Ela é fixa, sólida e cobre ~5rem
      da base: sem esta reserva ela comia 33 a 46px do último cartão. A régua é
      a mesma da `.rodape` (6rem + safe-area), e vale para toda seção do palco. */
@media (max-width:700px){
  .avisos__coluna{padding:4rem 0 calc(5.5rem + env(safe-area-inset-bottom))}
  .avisos__janela{height:clamp(15rem,52svh,26rem)}
}
/* ⚠️ Em tela curta (320x568) a coluna ainda somava 595px numa caixa de 568 e
   os 27px que sobravam eram cortados pelo `overflow:hidden`. O piso de 15rem
   da janela é o que travava: ele não deixava ela encolher junto com a tela. */
@media (max-width:700px) and (max-height:660px){
  .avisos__coluna{padding:2.6rem 0 calc(5rem + env(safe-area-inset-bottom))}
  .avisos__janela{height:clamp(11rem,44svh,26rem)}
}

/* =========================================================
   VEM FAZER PARTE · fecho da travessia
   Mesmo fundo do mural de propósito: é o que faz o olho entender que continua
   o mesmo palco. A foto é a MESMA do mural, aqui sem espelhar.
   ========================================================= */
.junto{height:200svh}
.junto__fixo{background:var(--azul-fundo)}
.junto__grade{
  position:relative;z-index:2;height:100%;
  width:min(100% - 2.5rem, var(--larg));margin-inline:auto;
  display:grid;grid-template-columns:1fr;align-content:center;
  padding:5.5rem 0 6rem;
}
.junto__titulo{font-size:clamp(2rem,5.6vw,3.9rem);line-height:.99;color:var(--branco);margin:0 0 .8rem}
.junto__apoio{color:rgba(255,255,255,.9);font-size:clamp(1rem,2.1vw,1.2rem);max-width:36ch;margin:0 0 1.6rem;line-height:1.45}
.junto__saida{margin:1.2rem 0 0}
.junto__saida .botao--linha{color:var(--branco);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.junto__saida .botao--linha:hover{background:var(--branco);color:var(--azul-fundo)}
.junto__figura{display:none}

/* CELULAR · a seção do fecho é a mais cheia do site (título, apoio, dois
   campos, botão, dois avisos e mais um botão) dentro de uma caixa de altura
   TRAVADA em 100svh com `overflow:hidden`.
   ⚠️ O que passa disso é CORTADO EM SILÊNCIO, sem scroll para recuperar.
      Medido antes: 72px cortados em 320x568 e 81px com o celular deitado.
      Quem comia a altura era o padding de 5,5rem + 6rem desta grade.
   ⚠️ A folga de baixo é a barra do WhatsApp, que chegava a ficar POR CIMA de
      um campo do formulário e do botão de propostas: confirmado por
      `elementFromPoint`, o toque não chegava no elemento. */
@media (max-width:700px){
  .junto{height:150svh}
  .junto__grade{padding:3.5rem 0 calc(5.5rem + env(safe-area-inset-bottom))}
  .junto__apoio{margin-bottom:1.2rem}

  /* O NÚMERO, de 220svh para 150svh. O contador é disparado por
     IntersectionObserver no `.numero__fixo`, e não pelo percurso: ele acende
     na entrada e terminava com mais de uma tela ainda por rolar. Medido:
     cinco pontos de rolagem a 186px de distância devolviam quadros IDÊNTICOS. */
  .numero{height:150svh}
  .numero__fixo .caixa{padding-block:4rem calc(5.5rem + env(safe-area-inset-bottom))}
}

/* =========================================================
   PÁGINAS COM CONTEÚDO · O Ricardinho e Propostas
   ========================================================= */
.pagina__miolo{flex:1;padding:6.5rem 0 0;background:var(--azul-fundo)}
/* no celular 6,5rem depois de um menu de 73px deixavam ~250px de nada antes do
   primeiro rótulo, e a página abria com um buraco */
@media (max-width:700px){.pagina__miolo{padding-top:4.2rem}}
.pagina__miolo--claro{background:var(--branco);padding-bottom:1rem}
.pagina__intro{padding-bottom:2.6rem}
.pagina__titulo{font-size:clamp(2.1rem,5.6vw,4rem);line-height:1;color:var(--branco);margin:.3rem 0 .9rem;max-width:18ch}
.titulo--escuro.pagina__titulo{color:var(--azul-fundo)}
.pagina__apoio{color:rgba(255,255,255,.82);font-size:clamp(1rem,2.1vw,1.18rem);max-width:48ch;margin:0;line-height:1.5}
.pagina__apoio--escuro{color:var(--tinta-suave)}
.pagina__saida{padding:3rem 0 4rem;text-align:center}
.pagina--clara .pagina__saida{background:var(--branco)}

/* ⚠️ Na página nada cobre a linha do tempo, então ela não é `painel--atras` e
   o percurso não reserva tela para cobertura (`data-antes`/`data-depois` em 0
   no HTML). Sem isso sobram duas telas mortas de rolagem. */
.cam--pagina{margin-top:0;z-index:auto}

/* =========================================================
   AS BANDEIRAS · cada card abre um <dialog>
   ⚠️ Toda bandeira aqui é matéria ESTADUAL. É esse filtro que impede a
      candidatura de prometer obra federal ou serviço municipal.
   ========================================================= */
.props{padding:4.5rem 0 3.5rem;background:var(--branco)}
.props__grade{display:grid;gap:.9rem;margin-top:2rem}
.prop{
  display:grid;gap:.35rem;text-align:left;cursor:pointer;
  background:var(--gelo);border:1px solid #DCE3EE;border-left:5px solid var(--azul);
  border-radius:var(--raio);padding:1.4rem 1.3rem;font:inherit;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.prop:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-left-color:var(--lima)}
.prop:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.prop__num{font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--lima);letter-spacing:.06em}
/* ⚠️ lima sobre branco dá 2,3:1 e reprova. O número acima é decorativo e
   `aria-hidden`; todo texto que precisa ser lido fica em azul. */
.prop__nome{font-family:var(--display);font-weight:800;font-size:1.55rem;color:var(--azul-fundo);line-height:1.1}
.prop__linha{color:var(--tinta-suave);font-size:1rem;line-height:1.42}
.prop__mais{
  margin-top:.5rem;font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--azul);
  display:inline-flex;align-items:center;gap:.4rem;
}
.prop__mais::after{content:'';width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.props__saida{margin:2.2rem 0 0}

/* O POPUP
   `<dialog>` nativo de propósito: ele já entrega foco preso, fechar no Esc,
   ::backdrop e devolução de foco ao botão. Um modal à mão custaria cinco
   vezes mais código para fazer pior. */
.popup{
  width:min(92vw,40rem);max-height:86svh;padding:0;border:none;border-radius:var(--raio);
  background:var(--branco);color:var(--tinta);box-shadow:0 30px 80px rgba(10,24,52,.35);
  overflow:auto;overscroll-behavior:contain;
}
.popup::backdrop{background:rgba(10,22,48,.62);backdrop-filter:blur(3px)}
.popup > *:not(form){padding-inline:clamp(1.3rem,4vw,2.4rem)}
.popup > form{margin:0;position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:.6rem .6rem 0}
.popup__x{
  width:44px;height:44px;border:none;border-radius:50%;cursor:pointer;
  background:var(--gelo);color:var(--tinta);font-size:1.7rem;line-height:1;
}
.popup__x:hover{background:#E3E9F3}
.popup .rotulo--escuro{margin:0 0 .3rem}
.popup__titulo{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5vw,2.7rem);color:var(--azul-fundo);margin:0 0 .6rem;line-height:1.04}
.popup__linha{font-size:1.08rem;color:var(--tinta-suave);margin:0 0 1.5rem}
.popup h4{
  font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--azul);
  margin:1.4rem 0 .4rem;
}
.popup p{margin:0;color:var(--tinta-suave);line-height:1.55;font-size:1rem}
.popup ul{margin:.4rem 0 0;padding-block:0;list-style:none}
.popup li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;color:var(--tinta-suave);line-height:1.45;font-size:1rem}
.popup li::before{content:'';position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--lima)}
.popup li:last-child{margin-bottom:clamp(1.6rem,4vw,2.4rem)}

/* =========================================================
   VEM FAZER PARTE
   ========================================================= */
.chamado{padding:4.5rem 0;background:linear-gradient(150deg,var(--azul) 0%,var(--azul-fundo) 100%);text-align:center}
.chamado .rotulo{justify-content:center}
.chamado__titulo{font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.02;color:var(--branco);margin:0 auto .8rem;max-width:20ch}
.chamado__apoio{color:rgba(255,255,255,.9);font-size:1.15rem;margin:0 0 2rem}

/* =========================================================
   RODAPÉ · cadastro, colinha e a informação obrigatória
   ========================================================= */
.rodape__topo{display:grid;gap:2.6rem;padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.14)}
.rodape__chamada{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4.4vw,2.2rem);line-height:1.06;color:var(--branco);margin:.2rem 0 1.3rem}

.grupo{display:grid;gap:.9rem;max-width:26rem}
.grupo__campos{display:grid;gap:.9rem}
@media (min-width:520px){.grupo__campos{grid-template-columns:1fr 1fr}}
.grupo__campo{display:grid;gap:.3rem}
.grupo__campo span{font-family:var(--display);font-weight:800;font-size:.98rem;color:var(--branco)}
.grupo__campo input{
  font-family:var(--corpo);font-size:1.05rem;font-weight:500;color:var(--tinta);
  min-height:var(--toque);padding:.8rem 1rem;
  border:2px solid rgba(255,255,255,.28);border-radius:12px;background:#fff;
}
.grupo__campo input::placeholder{color:#8A97AC}
.grupo__campo input:focus{border-color:var(--lima);outline:none}
.grupo__campo input[aria-invalid=true]{border-color:#FF8B7A}

/* ⚠️ O botão nasce `disabled` de verdade, não só apagado: teclado e leitor de
   tela precisam saber que ele ainda não leva a lugar nenhum. */
.grupo__botao{width:100%}
.grupo__botao[disabled]{
  background:rgba(255,255,255,.16);color:rgba(255,255,255,.55);
  box-shadow:none;cursor:not-allowed;transform:none;
}
.grupo__aviso{margin:0;font-size:.92rem;font-weight:600;color:rgba(255,255,255,.6);min-height:1.3em}
.grupo__aviso.ok{color:var(--lima)}
.grupo__aviso.erro{color:#FF8B7A}
.grupo__lgpd{margin:0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.55)}
.grupo__lgpd a{color:rgba(255,255,255,.8);display:inline-block;padding:.8rem 0}
/* ⚠️ "Entrar no grupo exclusivo" não cabe numa linha abaixo de ~380px: o texto
   quebrava em duas e o ícone do WhatsApp ficava sozinho no meio da altura,
   com cara de peça desalinhada. Este é o botão que fecha o cadastro, então
   ele encolhe o corpo em vez de quebrar. */
@media (max-width:380px){
  .grupo__botao{font-size:1rem;padding-inline:1.1rem;gap:.45rem}
  .grupo__botao .ico-wa{width:1.2em;height:1.2em}
  /* ⚠️ Dentro do popup sobra menos largura que na seção (o <dialog> tem padding
     próprio), então o mesmo texto volta a quebrar lá se o corpo não cair mais
     um degrau. O popup recebe um clone deste formulário, e é fácil corrigir só
     um dos dois e achar que acabou. */
  .popup--grupo .grupo__botao{font-size:.92rem;padding-inline:.8rem}
  /* o placeholder "Como podemos te chamar" era cortado no meio da palavra */
  .grupo__campo input{font-size:.95rem}
}

/* A COLINHA
   ⚠️ Versão DIGITAL: sai sem a faixa lateral da ficha técnica da gráfica, que
      traz [GRÁFICA], [CNPJ] e [QUANTIDADE] como texto de preenchimento. Ficha
      técnica é obrigação de peça impressa; aqui quem identifica é o
      `.rodape__legal` logo abaixo. */
.colinha{
  display:inline-grid;gap:.9rem;justify-items:start;text-decoration:none;
  transition:transform .2s ease;
}
.colinha:hover{transform:translateY(-3px)}
.colinha img{
  width:min(11rem,44vw);height:auto;border-radius:12px;
  box-shadow:0 16px 40px rgba(6,16,38,.5);background:#fff;
}
.colinha__acao{
  display:inline-flex;align-items:center;gap:.5rem;min-height:48px;
  font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--lima);
}
.colinha__acao::before{content:'';width:9px;height:9px;border-bottom:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}

.rodape__meio{display:grid;gap:1.8rem;padding:2.4rem 0}
.rodape__bloco h3{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--branco);margin:0 0 .5rem}
.rodape__bloco p{margin:0 0 .4rem;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.72)}
.rodape__bloco a{color:rgba(255,255,255,.9)}
.rodape__bloco a:hover{color:var(--lima)}
.rodape__pendente{color:rgba(255,255,255,.5)!important;font-style:italic}
.rodape__meio .rodape__nav{flex-direction:column;gap:0;margin:0}
/* ⚠️ 44px é o piso de alvo de toque, e este menu do rodapé estava em 38.
   Os contatos (e-mail e Instagram) eram pior: 21px de altura, porque o link
   só tinha a caixa do texto. No celular o rodapé é a única navegação que
   sobra depois que o menu do topo sai de cena. */
.rodape__meio .rodape__nav a{min-height:44px;font-weight:500;font-size:.95rem}
.rodape__bloco p a{display:inline-flex;align-items:center;min-height:44px}

/* =========================================================
   TABLET E ACIMA · o mural abre em duas colunas
   ========================================================= */
@media (min-width:701px){
  .props__grade{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .rodape__topo{grid-template-columns:1.35fr 1fr;align-items:start;gap:3rem}
  .rodape__meio{grid-template-columns:repeat(3,1fr);gap:2.2rem}
}

@media (min-width:901px){
  /* ⚠️ A figura só entra da largura em que sobra corredor para ela. Abaixo
     disso a coluna de cards ocupa a tela inteira, que é o que importa. */
  .avisos__grade{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:2.5rem;align-content:center}
  .avisos__coluna{grid-column:2}
  /* ⚠️ A figura sai do grid e vira absoluta no painel. A primeira coluna do
     grid continua ali, vazia, só reservando o espaço para o texto não se
     mover. É o que permite ela ENCOSTAR NA BASE da seção e transbordar para a
     esquerda do container, coisa que dentro da célula do grid não dava.
     `bottom:0` e `height` andam juntos: a altura define onde fica o TOPO, e
     mexer nela sozinha sobe ou desce a cabeça dele. */
  .avisos__figura{
    display:block;position:absolute;z-index:1;
    /* ⚠️ Ancorada pela DIREITA, e não pela esquerda: o que precisa ser fixo é a
       folga de 50 px até a coluna de texto, em qualquer largura de tela.
       Os 76px saem da conta do grid: a coluna 2 começa em `50% - 26px` (metade
       do container de 1180, mais a coluna 1 de .85fr e o gap de 2.5rem), então
       a borda da figura fica em `50% - 66px` e sobram 40 de respiro.
       Mexer em `--larg`, no gap ou na proporção das colunas pede refazer esta
       conta, senão a folga muda sem ninguém perceber. */
    right:calc(50% + 66px);
    bottom:0;width:min(44rem,50vw);height:82%;
    -webkit-mask-image:none;mask-image:none;
    /* ⚠️ CRESCE com o TOPO e a ESQUERDA travados, então quem avança é o canto
       inferior direito: a figura desce até passar da base da seção, e o
       `overflow:hidden` do painel corta o excesso. O `scale` vai no CONTAINER
       e o `scaleX(-1)` do espelhamento fica na <img>: os dois no mesmo
       elemento brigariam pela mesma `transform-origin`, e o espelhamento em
       torno da borda esquerda jogaria a figura para fora da tela.
       A origem é `right top`: o topo e a borda direita ficam parados, e quem
       avança é a base e o lado esquerdo. Mexer no fator não mexe na cabeça. */
    transform:scale(1.18);transform-origin:right top;
  }
  /* ⚠️ ESPELHADA aqui, e só aqui. O arquivo é o MESMO da seção final, onde ele
     entra sem espelhar: no mural ele fica à esquerda e as mãos precisam abrir
     para a direita, na direção das notificações que sobem; na seção final ele
     fica à direita e abre para a esquerda, na direção do texto e do
     formulário. Um arquivo, dois sentidos de leitura. */
  .avisos__figura img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:scaleX(-1)}
  .avisos__coluna{padding:24svh 0 4svh}
  .avisos__janela{height:clamp(17rem,46svh,24rem)}

  /* A seção final espelha a grade do mural, com a figura do outro lado.
     ⚠️ Mesma solução do mural: a figura SAI do grid e vira absoluta no painel,
     e a segunda coluna fica ali vazia só reservando espaço para o texto não se
     mover. É o que permite ela ENCOSTAR NA BASE e transbordar para a direita
     do container. `bottom:0` e `height` andam juntos: a altura define onde
     fica o topo, então mexer nela sobe ou desce a cabeça dele. */
  .junto__grade{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:2.5rem;align-items:center;padding:4svh 0 2svh}
  .junto__texto{grid-column:1}
  /* Mesma solução do mural, espelhada de lado: aqui a figura fica à DIREITA e
     o texto à esquerda, então ela é ancorada pela ESQUERDA e cresce pelo canto
     inferior direito.
     ⚠️ Os 90px saem da conta do grid: a coluna 1 (texto) termina em
     `50% + 50px` (metade do container de 1180, mais a coluna de 1fr contra a
     de .78fr), então a borda da figura fica em `50% + 70px` e sobram 20 de
     respiro. Mexer em `--larg`, no gap ou na proporção das colunas pede
     refazer esta conta. */
  .junto__figura{
    display:block;position:absolute;z-index:1;
    left:calc(50% + 70px);right:auto;
    bottom:0;width:min(42rem,48vw);height:84%;
    -webkit-mask-image:none;mask-image:none;
    transform:scale(1.18);transform-origin:left top;
  }
  .junto__figura img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
  .aviso h3{font-size:1.25rem}
  .aviso p{font-size:1rem}
  .junto__apoio{max-width:40ch}
}

@media (min-width:1101px){
  .props__grade{grid-template-columns:repeat(4,1fr)}
  .prop__nome{font-size:1.45rem}
}

/* =========================================================
   TELA BAIXA · o celular deitado
   ⚠️ Deitado, o celular tem MAIS de 700px de largura e cai no layout de
      tablet, mas a altura é de ~390px. Os painéis têm altura travada em
      100svh com `overflow:hidden`, então o que não cabe some sem aviso:
      medido em 844x390, o mural estourava **209px** e o fecho **81px**.
      Nenhum media de LARGURA pega este caso; a régua aqui é a altura.
   ========================================================= */
/* ⚠️ O FECHO NÃO CABE EM TELA CURTA, e nenhum ajuste de padding resolve: só o
   conteúdo do `.junto__texto` mede 713px em 320x568 e 549px deitado, contra
   424px e 339px de caixa útil. Aqui ele SAI do painel travado e vira seção
   normal, que rola: é exatamente o que o bloco de `prefers-reduced-motion` já
   faz com todos os painéis, e o mesmo caminho testado. A travessia continua
   inteira nas telas onde ela cabe.
   ⚠️ A margem negativa tem que sair junto. Sem isso a seção continua puxada
      100svh para cima e nasce por baixo do número, que tem camada maior. */
@media (max-height:660px){
  .junto{height:auto;margin-top:0}
  .junto .painel__fixo{position:relative;height:auto;min-height:100svh;overflow:visible}
  .junto__grade{padding:3rem 0 calc(5rem + env(safe-area-inset-bottom))}
}

@media (max-height:620px) and (orientation:landscape){
  .painel__fixo > .caixa{padding-block:2rem 2rem}
  .avisos__coluna{padding:1.8rem 0 1.8rem}
  .avisos__janela{height:clamp(8rem,44svh,15rem)}
  .avisos__titulo{margin-bottom:.7rem}
  .junto__grade{padding:1.6rem 0 1.6rem}
  .junto__apoio{margin-bottom:.9rem}
  .numero__fixo .caixa{padding-block:1.6rem 1.6rem}
  .numero__digitos{margin:.5rem auto .3rem}
}

/* =========================================================
   MOVIMENTO REDUZIDO · a história continua inteira, sem percurso
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .numero,.avisos,.junto{height:auto}
  .numero__fixo,.junto__fixo{padding:4rem 0}
  .avisos__janela{height:auto;-webkit-mask-image:none;mask-image:none}
  /* ⚠️ Sem percurso não existe troca: a pilha e o botão dividem a mesma caixa
     em `absolute` e ficariam um em cima do outro. Aqui os dois voltam ao fluxo
     e empilham, que é o que a leitura sem movimento precisa. */
  .avisos__pilha,.avisos__saida{position:static;transform:none!important}
  .avisos__saida{margin-top:1.4rem}
  .aviso,.avisos__saida{opacity:1;transform:none}
  .junto{height:auto}
  .junto__figura{display:none}
  .numero__digitos i:not(.travou){color:var(--lima)}
  .avisos__coluna{padding:4rem 0}
  .avisos__figura{display:none}
}

/* =========================================================
   PÁGINAS DE APOIO · história, realizações, propostas, faça parte
   Conteúdo sendo escrito por outro parceiro. Estes arquivos existem para que
   os botões do site funcionem desde o primeiro dia; quando o texto chegar,
   troca-se o miolo <main> e o resto continua de pé.
   ========================================================= */
.pagina{background:var(--azul-fundo);display:flex;flex-direction:column;min-height:100svh}
.pagina--clara{background:var(--branco)}
.pagina .menu--solto{background:transparent}
.menu--solto{position:relative;padding-top:1.6rem}
.embreve{flex:1;display:flex;align-items:center;padding:5rem 0 4rem}
.embreve .rotulo{margin-bottom:.6rem}
.embreve__titulo{font-size:clamp(2.2rem,6vw,4rem);line-height:1;color:var(--branco);margin:0 0 1.1rem;max-width:16ch}
.embreve__texto{color:rgba(255,255,255,.82);font-size:clamp(1.02rem,2.2vw,1.2rem);line-height:1.55;max-width:46ch;margin:0 0 2.2rem}
.embreve__acoes{margin:0}
.pagina .rodape{margin-top:auto}

/* =========================================================
   BIO · a página de links (links.html)

   O destino do link na bio do Instagram. Não é uma tela do palco: ela rola
   normal, é curta e existe para uma coisa só, que é entregar o toque no botão
   do grupo. Por isso não tem menu: cada item de navegação a mais na tela é um
   toque a menos no que importa.

   ⚠️ O lockup JÁ TRAZ nome, cargo e número, então nada disso é digitado aqui
      (DESIGN_SYSTEM, "nome e número nunca são digitados"). A única frase é a
      assinatura verbal da campanha.
   ⚠️ No COMPUTADOR a página vira uma coluna estreita centralizada, e não um
      layout que se espalha. Link de bio é tráfego de celular; espalhar o topo
      em 1440px deixava um vazio no meio da tela com a marca num canto e a foto
      no outro. Medido em captura antes de mudar.
   ========================================================= */
.bio{background:var(--azul-fundo);display:flex;flex-direction:column;min-height:100svh}
.bio__miolo{flex:1}

/* ---- O TOPO
   Mesma linguagem da abertura do site: foto tratada ao fundo, a cápsula da
   marca cortada pela borda e o recorte do candidato sangrando na base. A foto
   é a `aponta`, sem espelhar, porque o dedo já aponta para o bloco da marca,
   à esquerda. Mesmo raciocínio da seção final da home. */
.bio__topo{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(292px,44svh,376px);
  display:flex;align-items:flex-end;
  padding:1.5rem 0 0;
}
.bio__cena{position:absolute;inset:0;z-index:0}
.bio__cena img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

/* ⚠️ A CÁPSULA DA MARCA NÃO ENTRA NESTA PÁGINA, e isso foi medido em captura.
   Girada 43,28°, a borda longa dela vira uma reta que atravessa o quadro
   inteiro: sobre o céu do fundo lê como emenda de render, e atrás da lista
   vira uma faixa diagonal que não comunica nada. Testada na frente do véu,
   atrás dele e sobre a cor chapada. Não reintroduzir sem conferir em captura.
   A marca aqui é o lockup, o lima do botão e o dourado da frase. */
/* Véu duplo: a base escura segura a leitura da marca e faz a emenda com a
   lista, que continua no mesmo azul. Sem ele a foto termina numa linha dura. */
.bio__veu{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,34,68,.58) 0%, rgba(20,34,68,.18) 30%, rgba(31,48,90,.88) 80%, var(--azul-fundo) 100%),
    linear-gradient(90deg, rgba(20,34,68,.86) 0%, rgba(20,34,68,.34) 56%, transparent 86%);
}
.bio__figura{
  position:absolute;z-index:3;right:-5%;bottom:0;
  width:min(53%,290px);
  filter:drop-shadow(0 18px 40px rgba(8,20,45,.5));
}
.bio__figura img{width:100%;height:auto}

.bio__marca{position:relative;z-index:4;padding-bottom:1.6rem}
.bio__logo{width:min(60%,224px);height:auto}
.bio__frase{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.22rem,5.2vw,1.55rem);line-height:1.08;
  color:var(--branco);margin:.8rem 0 0;max-width:11ch;
  text-shadow:0 4px 26px rgba(8,20,45,.7);
}
.bio__frase em{font-style:normal;color:var(--dourado)}
.bio__selo{width:100px;margin-top:.85rem;opacity:.95}

/* ---- A LISTA
   Cor chapada e nada mais atrás dos cartões. A cápsula da marca foi testada
   aqui em três opacidades e saiu: girada 43,28° ela é uma reta longa, e atrás
   de uma lista ela vira uma emenda diagonal que não comunica nada. Brilho
   atrás do CTA também está fora, porque o `.botao--lima` perdeu o brilho verde
   em 19/08 a pedido do Rafael, e a regra é global. */
.bio__lista{padding:1.4rem 0 1.6rem}
.bio__acao{display:block;width:100%;font-size:1.14rem}
.bio__nota{
  margin:.7rem 0 1.4rem;text-align:center;
  font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.74);
}
.bio__links{display:grid;gap:.7rem}

/* Cartão de link: vidro sobre o azul. A seta é o que separa isto de uma pilha
   de botões iguais, e ela anda no toque para confirmar que levou. */
.elo{
  position:relative;display:grid;
  grid-template-columns:2.4rem 1fr auto;align-items:center;gap:.95rem;
  min-height:var(--toque);padding:.85rem 1.1rem;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;text-decoration:none;color:var(--branco);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.elo:hover,.elo:focus-visible{
  background:rgba(255,255,255,.1);border-color:rgba(141,204,47,.55);transform:translateY(-2px);
}
.elo__ico{
  width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border-radius:11px;background:rgba(255,255,255,.09);
  color:var(--lima);
}
.elo__ico svg{width:1.28rem;height:1.28rem;fill:currentColor;display:block}
.elo__txt{min-width:0}
.elo__nome{display:block;font-family:var(--display);font-weight:800;font-size:1.06rem;line-height:1.2}
.elo__linha{
  display:block;font-size:.83rem;line-height:1.35;color:rgba(255,255,255,.74);
  margin-top:.1rem;
}
.elo__seta{
  width:1.1rem;height:1.1rem;fill:none;stroke:rgba(255,255,255,.5);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
  transition:transform .2s ease, stroke .2s ease;
}
.elo:hover .elo__seta,.elo:focus-visible .elo__seta{transform:translateX(4px);stroke:var(--lima)}
/* O item de destaque: o pack é o único que leva a pessoa a produzir alguma
   coisa, então ganha a borda da marca. */
.elo--destaque{background:rgba(141,204,47,.1);border-color:rgba(141,204,47,.42)}
.elo--destaque .elo__ico{background:rgba(141,204,47,.18)}

/* ---- RODAPÉ CURTO
   A bio não repete a logo do topo nem a colinha da home. Fica só o que a lei
   exige, mais o link da privacidade que a LGPD pede. */
.rodape--curto{padding:1.6rem 0 1.8rem}
.rodape--curto .rodape__nav{margin-bottom:1rem;justify-content:center}
.rodape--curto .rodape__legal{text-align:center;font-size:.76rem}

/* ---- COMPUTADOR E TABLET
   A página inteira vira uma coluna centralizada, o topo ganha canto
   arredondado e o conjunto lê como um cartão. */
@media (min-width:620px){
  .bio__miolo{width:min(100%,560px);margin-inline:auto;padding:2.2rem 1.2rem 0}
  .bio__topo{min-height:322px;border-radius:24px;padding-top:2rem}
  .bio__figura{width:min(46%,240px);right:-2%}
  .bio__logo{width:230px}
  .bio__frase{font-size:1.62rem;max-width:13ch}
  .bio__lista{padding-top:1.7rem}
  .elo{padding:.95rem 1.25rem}
  /* dentro da coluna a caixa já tem a margem do miolo */
  .bio__lista.caixa,.bio__marca.caixa{width:min(100% - 2.2rem, var(--larg))}
}

/* =========================================================
   PACK DO APOIADOR · pack.html

   Três blocos: o gerador de moldura (a pessoa sobe a foto, ajusta e baixa),
   as figurinhas de WhatsApp e a colinha. O gerador é o que importa: cada foto
   de perfil com a marca é exposição gratuita e recorrente no círculo social
   do apoiador.

   ⚠️ Nenhuma foto sai do aparelho. Tudo roda em canvas no navegador, e a
      página diz isso em voz alta: é verdade e derruba a hesitação de subir
      foto pessoal em site de campanha.
   ========================================================= */
.pk{padding:1rem 0 0}
/* ⚠️ `hidden` NÃO esconde nada aqui sem esta linha. O atributo vale por uma
   regra `display:none` da folha do navegador, e QUALQUER classe que declare
   `display` ganha dela por especificidade. Sem isto, o convite de enviar a
   foto (`display:flex`) continuava aparecendo por cima da foto já enviada, e
   os controles (`display:grid`) apareciam antes de existir foto. Foi o Rafael
   que viu, em captura de tela.
   ⚠️ Testar isso pede `getComputedStyle`, e não `elemento.hidden`: a
      propriedade fica `true` e o elemento continua na tela. */
.pk [hidden]{display:none!important}
.pk__bloco{padding:0 0 3.2rem}
.pk__bloco + .pk__bloco{border-top:1px solid rgba(255,255,255,.12);padding-top:2.6rem}
.pk__titulo{font-size:clamp(1.5rem,4.6vw,2.1rem);line-height:1.08;margin:.2rem 0 .5rem}
.pk__linha{color:rgba(255,255,255,.8);font-size:1rem;line-height:1.5;max-width:52ch;margin:0 0 1.3rem}
.pk__aviso{
  display:flex;align-items:center;gap:.55rem;
  color:rgba(255,255,255,.72);font-size:.85rem;line-height:1.4;margin:.9rem 0 0;
}
.pk__aviso svg{width:1.05rem;height:1.05rem;fill:var(--lima);flex:none}

/* ---- ESCOLHA DO FORMATO */
.pk__formatos{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem;padding:0}
.pk__fmt{
  display:flex;flex-direction:column;gap:.1rem;
  min-height:52px;padding:.55rem 1rem;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:13px;color:var(--branco);cursor:pointer;font-family:var(--corpo);
  transition:background-color .18s ease, border-color .18s ease;
}
.pk__fmt strong{font-family:var(--display);font-weight:800;font-size:.98rem;line-height:1.2}
.pk__fmt span{font-size:.76rem;color:rgba(255,255,255,.7);line-height:1.25}
.pk__fmt:hover{background:rgba(255,255,255,.1)}
.pk__fmt[aria-pressed=true]{background:rgba(141,204,47,.16);border-color:var(--lima)}
.pk__fmt[aria-pressed=true] span{color:rgba(255,255,255,.86)}

/* ---- O PALCO
   ⚠️ `touch-action:none` NÃO é opcional. Sem ele o navegador entende o arrasto
      como rolagem da página e a foto não anda no celular. */
.pk__palco{
  position:relative;width:100%;max-width:440px;margin:0 auto;
  aspect-ratio:var(--prop, 1);
  background:var(--azul-fundo);border-radius:16px;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.pk__palco canvas{display:block;width:100%;height:100%;cursor:grab}
.pk__palco canvas:active{cursor:grabbing}
.pk__palco--vazio{border:2px dashed rgba(255,255,255,.24)}
.pk__palco--arrastando{border-color:var(--lima);background:rgba(141,204,47,.08)}

/* estado sem foto: o convite ocupa o palco inteiro e é o alvo de toque */
.pk__convite{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.7rem;padding:1.5rem;
  text-align:center;color:rgba(255,255,255,.86);cursor:pointer;
}
.pk__convite svg{width:2.6rem;height:2.6rem;fill:var(--lima)}
.pk__convite strong{font-family:var(--display);font-weight:800;font-size:1.14rem}
.pk__convite span{font-size:.87rem;color:rgba(255,255,255,.66);max-width:26ch;line-height:1.4}
.pk__arquivo{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---- CONTROLES */
.pk__controles{max-width:440px;margin:1rem auto 0;display:grid;gap:.85rem}
.pk__zoom{display:flex;align-items:center;gap:.8rem}
.pk__zoom label{font-size:.85rem;color:rgba(255,255,255,.78);white-space:nowrap}
.pk__zoom input[type=range]{flex:1;min-height:44px;accent-color:var(--lima);cursor:pointer}
.pk__botoes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.pk__botoes .botao{width:100%;font-size:1rem;padding:.8rem 1rem}
.pk__trocar{
  min-height:44px;padding:.5rem .9rem;background:none;border:none;
  color:rgba(255,255,255,.72);font-family:var(--corpo);font-size:.87rem;
  text-decoration:underline;cursor:pointer;justify-self:center;
}
.pk__trocar:hover{color:var(--lima)}

/* ---- RESULTADO
   ⚠️ O navegador embutido do Instagram no iPhone engole download com
      frequência, sem erro nenhum. Por isso o resultado também aparece como
      imagem grande com a instrução de segurar para salvar, que funciona
      sempre. No iOS essa instrução vem primeiro. */
.pk__saida{max-width:440px;margin:1rem auto 0;display:none}
.pk__saida[data-aberta]{display:block}
.pk__saida img{width:100%;border-radius:16px;box-shadow:var(--sombra)}
.pk__saida-nota{
  margin:.75rem 0 0;padding:.8rem 1rem;text-align:center;
  background:rgba(237,193,35,.13);border:1px solid rgba(237,193,35,.4);
  border-radius:13px;color:var(--branco);font-size:.88rem;line-height:1.45;
}
.pk__saida-nota strong{color:var(--dourado)}

/* ---- FIGURINHAS */
.pk__figs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:.7rem;margin:0 0 1.3rem;
}
.pk__fig{
  aspect-ratio:1;display:grid;place-items:center;padding:.5rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;transition:background-color .18s ease, border-color .18s ease;
}
.pk__fig:hover{background:rgba(255,255,255,.11);border-color:rgba(141,204,47,.5)}
.pk__fig img{width:100%;height:100%;object-fit:contain}
.pk__acoes-fig{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
/* ⚠️ O `.botao--linha` base é AZUL sobre transparente, feito para página de
   fundo claro. Nesta página, que é escura, ele fica azul sobre azul e some.
   A mesma armadilha já derrubou o menu da `propostas.html` em 20/08. */
.pk .botao--linha{color:var(--branco);box-shadow:inset 0 0 0 2px rgba(255,255,255,.34)}
.pk .botao--linha:hover{background:var(--branco);color:var(--azul-fundo)}
.pk__passos{margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem;counter-reset:passo}
.pk__passos li{
  position:relative;padding-left:2.1rem;font-size:.9rem;line-height:1.45;
  color:rgba(255,255,255,.8);
}
.pk__passos li::before{
  counter-increment:passo;content:counter(passo);
  position:absolute;left:0;top:-1px;width:1.5rem;height:1.5rem;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(141,204,47,.2);color:var(--lima);
  font-family:var(--display);font-weight:800;font-size:.82rem;
}

/* ---- COLINHA */
.pk__colinha{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem}
.pk__colinha img{width:150px;border-radius:10px;box-shadow:var(--sombra)}

@media (min-width:620px){
  .pk__botoes{grid-template-columns:1fr 1fr}
  .pk__figs{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
}