/* ---------- fontes ---------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  /* fonte variável da identidade; usada aqui na instância padrão.
     TODO: mapear os eixos de largura/peso (Wide Bold, Extra Condensed) quando definirmos o design system completo */
  font-family: "Acumin";
  src: url("/fonts/AcuminVariableConcept.otf") format("opentype");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --azul: #27348b;
  --amarelo: #dedc00;
  /* tinta de texto azulada — substitui os cinzas crus que sobreviviam em
     algumas secoes, pra toda a pagina falar a mesma lingua de cor */
  --tinta: color-mix(in srgb, var(--azul) 82%, #000);
  --tinta-media: color-mix(in srgb, var(--azul) 60%, #000);
  /* receita unica de hover do amarelo, do hero: puxa pro dourado (ambar)
     em vez de clarear — o amarelo da marca e limao (esverdeado), e a
     mudanca de temperatura e mais visivel que a de luminosidade */
  --amarelo-hover: color-mix(in srgb, var(--amarelo) 55%, #ffb300);
  --vermelho: #df303d;
  /* vermelho oficial da logo do PT (#c4122d, conferido no SVG da marca) —
     so pro aceno da 13, nao mistura com o vermelho de aviso/erro do site */
  --vermelho-pt: #c4122d;
  --roxo: #43266c;
  --branco: #ffffff;
  --texto-claro: #f4f4f0;

  --fonte-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --fonte-texto: "Acumin", "Helvetica Neue", Arial, sans-serif;

  --largura-maxima: 1200px;
  /* blocos recuados: mesmo respiro e mesmo canto no hero, nas prioridades
     e na agenda, pra os tres lerem como a mesma familia */
  /* fundo da pagina: neutro puxado pro azul da marca, nao cinza generico.
     Blocos claros somem em branco puro — era por isso que o container das
     prioridades existia mas nao se via */
  --fundo-pagina: #d5dae6;
  --respiro-bloco: clamp(0.75rem, 2vw, 1.5rem);
  --canto-bloco: clamp(1rem, 2vw, 2rem);
  /* escala de cantos: contêiner de secao usa --canto-bloco (ate 2rem);
     abaixo dele, cartao/linha/campo — pratica que ja existia repetida
     em hex, so nao tinha nome */
  --canto-cartao: 1rem;
  --canto-linha: 0.85rem;
  --canto-campo: 0.6rem;
  /* sombra puxada pro azul em vez de preta: preto sobre fundo colorido
     acinzenta a pagina inteira */
  --sombra-bloco: 0 14px 34px -22px rgba(39, 52, 139, 0.45);
  /* sombra do modal: mesma elevacao de hoje, mas no azul-noite do rodape
     e do backdrop — a regra da casa e sombra azul, nunca preta */
  --sombra-popup: 0 30px 70px -40px rgba(22, 25, 58, 0.7);
  --espaco: clamp(1rem, 2vw, 2rem);
  --ticker-altura: 2.4rem;
}

/* ---------- reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------- componente: selo ----------
   Pilula amarelo/azul usada em varios pontos do site (categoria, dica,
   "pilar", status) — era declarada identica em 6 lugares diferentes;
   as classes especificas agora so guardam a diferenca de cada uma */
.selo {
  font-family: var(--fonte-texto);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--amarelo);
  color: var(--azul);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte-texto);
  color: var(--tinta);
  background: var(--fundo-pagina);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.faixa {
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--espaco);
}

/* ---------- acessibilidade ---------- */
.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amarelo);
  color: var(--azul);
  padding: 0.75rem 1.25rem;
  font-weight: bold;
  z-index: 100;
}

.pular-conteudo:focus {
  left: var(--espaco);
  top: var(--espaco);
}

.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- faixa rolante ---------- */
/* no desktop a faixa de 38px sumia proporcionalmente numa tela larga.
   A fonte acompanha sozinha: e calculada como metade desta altura */
@media (min-width: 900px) {
  :root {
    --ticker-altura: 3.2rem;
  }
}

.ticker {
  height: var(--ticker-altura);
  background: var(--vermelho);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.ticker__trilho {
  display: inline-flex;
  align-items: center;
  height: 100%;
  width: max-content;
  /* a duracao vem do main.js, calculada pela largura real do conteudo,
     pra velocidade ficar constante em px/s em qualquer tela */
  animation: rolar-ticker var(--ticker-duracao, 32s) linear infinite;
  /* e a unica animacao continua do site (roda sempre, nao so no reveal) —
     sem o aviso, o navegador nao promove ela a camada propria por
     heuristica, e compor esse transform em todo frame passa a competir
     com o compositor de scroll, sentido como jank sutil ao rolar */
  will-change: transform;
}

/* pausa pra quem quiser ler */
@media (hover: hover) {
  .ticker:hover .ticker__trilho {
    animation-play-state: paused;
  }
}

/* movimento infinito e gatilho de enjoo pra parte das pessoas */
@media (prefers-reduced-motion: reduce) {
  .ticker__trilho {
    animation: none;
  }
}

/* texto no lugar da antiga imagem: nitido em qualquer tela, sem download,
   e editavel — a imagem exigia refazer o PNG pra trocar uma palavra */
.ticker__item,
.ticker__sep {
  font-family: var(--fonte-display);
  font-size: calc(var(--ticker-altura) * 0.5);
  line-height: 1;
  color: var(--amarelo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.ticker__item {
  padding-inline: 1.1rem;
}

/* no desktop a fonte cresce com a faixa, mas o respiro entre frases nao
   crescia junto: com caixa alta + letter-spacing elas ficavam coladas.
   2rem ~ 1.25x a fonte (no mobile a proporcao ja e ~0.9x). Fica depois da
   regra base de proposito: na media query la de cima o cascade perdia */
@media (min-width: 900px) {
  .ticker__item {
    padding-inline: 2rem;
  }
}

.ticker__sep {
  opacity: 0.55;
}

@keyframes rolar-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__trilho {
    animation: none;
  }

  .ticker {
    overflow-x: auto;
  }
}

/* ---------- entrada suave ao rolar ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- botões ---------- */
.botao {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-weight: 700;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
  font-size: 1rem;
  /* sem isso o line-height:1.5 herdado do body deixa o texto
     visivelmente fora do centro vertical dentro do pill */
  line-height: 1;
}

.botao:hover {
  transform: translateY(-2px);
}

.botao--primario {
  background: var(--amarelo);
  color: var(--azul);
}

.botao--primario:hover {
  background: var(--amarelo-hover);
}

.botao--contorno {
  background: transparent;
  color: var(--azul);
  border-color: var(--azul);
}

/* sobre o céu claro do hero o fundo transparente sumia: virou pílula
   branca sólida, com o mesmo azul do texto do botão amarelo de cima */
.botao--fantasma {
  background: var(--branco);
  color: var(--azul);
  border-color: var(--branco);
}

/* ---------- hero ---------- */
.hero {
  /* respiro entre o bloco e a borda da janela, igual nos quatro lados */
  --hero-respiro: var(--respiro-bloco);
  /* largura real de trabalho. 100vw nao serve: inclui a barra de rolagem,
     que o bloco nao tem, e a conta passa a achar que sobram ~15px a mais —
     o suficiente pra folga ate os rostos cair pela metade em 1140px.
     100cqw mede a largura do proprio bloco, sem chute. */
  container-type: inline-size;
  --hero-largura: 100cqw;

  --hero-margem: clamp(2rem, 8vw, 3.5rem);
  /* os 15% da esquerda da arte só têm ombro/corpo — os rostos começam
     depois disso, então o texto pode avançar até lá sem cobrir ninguém */
  --hero-foto-rostos: 0.85;
  position: relative;
  display: flex;
  flex-direction: column;
  /* sem --hero-respiro no calculo: o hero agora vai rente na janela, entao
     e so o teto do ticker que precisa ser descontado */
  min-height: calc(100vh - var(--ticker-altura));
  min-height: calc(100dvh - var(--ticker-altura));
  /* container invisivel de proposito: o hero e a primeira coisa que a
     pessoa ve, rente na janela — margem, canto arredondado e sombra so
     demarcavam um espaco que a home nao quer aqui (os outros blocos, tipo
     prioridades/agenda, continuam com --respiro-bloco/--canto-bloco
     normalmente, so o hero e a excecao) */
  margin: 0;
  border-radius: 0;
  background: var(--azul);
  color: var(--texto-claro);
  /* o overflow e o que faz a foto do trio ser recortada pela borda do
     bloco em vez de vazar pra fora dele */
  overflow: hidden;
}

.hero .faixa {
  padding-inline: var(--hero-margem);
}

.hero__ceu {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* céu limpo, sem máscara escura por cima — igual à referência */
  background-image: url("/img/ceu.webp");
  background-size: cover;
  background-position: center bottom;
}

.hero__grade {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "texto" "acoes";
  padding-top: var(--hero-margem);
}

.hero__texto {
  grid-area: texto;
  text-align: center;
}

.hero__acoes {
  grid-area: acoes;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* sem isto, o align-items:stretch padrao do flex esticava os botoes
     pela altura inteira da area "acoes" da grade do hero (que pode ficar
     mais alta que o conteudo dos botoes) — o texto ficava colado no topo
     da pilula, com um vao vazio embaixo */
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* 20% menores que o botão padrão do site */
.hero__acoes .botao {
  padding: 0.68rem 1.4rem;
  font-size: 0.8rem;
}

/* fora da grade de propósito, direto como filho do .hero (flex
   column) — "desktop alinhando à base e à direita, o vertical
   alinhado à base com a largura nos dois limites".
   No mobile fica no fluxo normal (depois do texto/botões,
   margin-top:auto empurra pro final) pra nunca sobrepor os botões —
   a sobreposição com o texto é coisa só do desktop, onde a foto sai
   do fluxo (position:absolute) e ancora na borda direita real da
   seção, podendo invadir a coluna de texto de propósito. */
.hero__duo {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero__duo picture {
  display: block;
  width: 100%;
}

/* composição final dos 3 (liderança nacional, Merísio, Angela) já
   vem pronta de uma única imagem pré-montada — sem recorte/alinhamento
   via CSS, a base e a proporção entre eles já estão certas na própria
   arte. picture troca pra uma versão recomposta mais vertical no
   mobile (899px-) e a landscape no desktop. */
.hero__duo-foto {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 20px 25px rgba(39, 52, 139, 0.4));
}

/* logo oficial (imagem, não tipografia) + slogan */
.hero__logo {
  width: min(86%, 620px);
  height: auto;
  margin-bottom: 0.75rem;
  /* o reset global "img { display: block }" tira o efeito do
     text-align:center do pai — centraliza explicitamente aqui */
  margin-inline: auto;
}

.hero__slogan {
  width: min(78%, 460px);
  height: auto;
  margin-bottom: 0.75rem;
  margin-inline: auto;
}

/* a coluna dupla (texto à esquerda + foto à direita) só entra quando sobra
   largura pro texto: a foto ocupa 52vw, então abaixo de ~1140px o layout
   empilhado e centralizado (o mesmo do mobile) é o que se sustenta */
@media (min-width: 1140px) {
  /* sem teto de largura aqui: o texto precisa alinhar à direita do
     quadro (seção) inteiro, não de uma faixa centralizada mais
     estreita — mesma referência de borda que a foto (.hero__duo)
     já usa */
  .hero .faixa {
    max-width: none;
    /* item flex com margin-inline:auto (herdado de .faixa) não estica:
       encolhia pro tamanho do conteúdo e centralizava o bloco inteiro na
       tela, jogando o texto por cima da foto. Largura cheia + margem zero
       devolvem o alinhamento à esquerda que o align-items:flex-start pede. */
    width: 100%;
    margin-inline: 0;
  }

  /* texto e botões formam um bloco só: o space-between de antes grudava
     a logo no topo e os botões na base, com ~250px de vazio no meio, e
     era isso que fazia os botões parecerem soltos do resto */
  .hero__grade {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: calc(var(--hero-margem) + 3rem);
    padding-bottom: var(--hero-margem);
  }

  .hero {
    /* largura da foto — só existe no desktop, o mobile usa width:100% no
       fluxo. Cresce progressivamente: em 1140px vale os mesmos ~593px de
       antes (é onde o espaço é mais apertado) e vai ganhando corpo até
       travar em 1400px, a largura nativa da arte — passar disso borraria.
       Como a base é fixa e a proporção é travada, crescer em largura faz
       o trio subir no quadro sem descolar do chão. */
    --hero-foto: clamp(460px, calc(var(--hero-largura) * 0.74 - 251px), 1400px);

    /* nunca entra na faixa dos rostos: sobra da tela depois da foto,
       com um respiro de 2rem — o teto de 640px continua valendo nas
       telas largas, onde a foto já não alcança o texto */
    --hero-coluna: min(
      640px,
      calc(var(--hero-largura) - var(--hero-foto) * var(--hero-foto-rostos) - var(--hero-margem) - 2rem)
    );
    /* largura que a logo realmente ocupa na tela — é o eixo em que os
       botões se centralizam (a arte do png é cropada justa, então a
       caixa do elemento e a tinta visível têm o mesmo centro) */
    --hero-banner: min(560px, var(--hero-coluna));
  }

  .hero__texto {
    min-width: 260px;
    /* piso seguro: se o navegador for antigo demais pra unidade de
       container, o teto de 560px vale — e 560 nao encosta nos rostos em
       nenhuma largura de desktop */
    max-width: 560px;
    max-width: var(--hero-coluna);
    text-align: left;
  }

  /* slogan embaixo da logo (não mais ao lado), grande */
  .hero__marca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.5rem, 1.5vw, 1rem);
  }

  .hero__logo {
    width: var(--hero-banner);
    margin-bottom: 0;
    margin-inline: 0;
    flex: 0 0 auto;
  }

  .hero__slogan {
    width: min(520px, 92%);
    margin-bottom: 0;
    margin-inline: 0;
    flex: 0 0 auto;
  }

  /* no desktop o botao acompanha o crescimento do bloco: fonte fluida e
     padding em em (nao rem), pra pilula inteira escalar junto com a fonte
     em vez de a fonte crescer dentro de uma pilula do mesmo tamanho.
     Substitui a regra base, que era fixa em 0.8rem e ficava minuscula ao
     lado de uma logo de 560px */
  .hero__acoes .botao {
    font-size: clamp(0.9rem, 0.6rem + 0.68vw, 1.5rem);
    padding: 0.68em 1.6em;
    /* a transicao base cobre so transform e background; aqui o hover
       tambem troca cor, borda e sombra, entao elas entram na lista */
    transition: transform 0.18s ease, background-color 0.18s ease,
      color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }

  /* o contorno global de foco e amarelo, invisivel no botao amarelo */
  .hero__acoes .botao:focus-visible {
    outline-color: var(--azul);
  }

  /* quem navega por teclado ve o mesmo destaque de quem usa mouse */
  .hero__acoes .botao:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -8px rgba(39, 52, 139, 0.45);
  }

  .hero__acoes .botao--fantasma:focus-visible {
    background: var(--azul);
    color: var(--branco);
    border-color: var(--azul);
  }

  /* grid em vez de flex: a coluna e dimensionada pelo botao mais largo e o
     outro estica ate ela, entao os dois ficam do mesmo tamanho sem nenhum
     numero chumbado — a largura acompanha a fonte fluida. O container segue
     com --hero-banner, que e o que mantem tudo no eixo da logo */
  .hero__acoes {
    display: grid;
    width: var(--hero-banner);
    justify-content: center;
    justify-items: stretch;
    /* respiro abaixo do slogan, no lugar do antigo "colado na base" */
    margin-top: clamp(2.5rem, 15vh, 9rem);
    margin-bottom: 0;
  }

  .hero__acoes .botao {
    /* .botao herda text-align:start; sem isto o texto encostaria na
       esquerda assim que a pilula fica mais larga que o proprio texto */
    text-align: center;
  }

  /* aqui sim sai do fluxo: ancorada direto na base e na borda
     direita da seção inteira (não da faixa com padding/max-width),
     podendo invadir a coluna de texto — e crescendo com a tela até o
     teto da resolução nativa da arte (1440px) */
  .hero__duo {
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    margin-top: 0;
    width: var(--hero-foto);
    justify-content: flex-end;
  }

  .hero__duo-foto {
    width: 100%;
    height: auto;
    object-position: bottom right;
  }
}

/* hover so em aparelho com mouse (media query combinada em vez de
   aninhada, que CSS puro nao aceita). No celular o :hover fica preso
   depois do toque e o botao parece travado no estado apertado */
@media (min-width: 1140px) and (hover: hover) {
  .hero__acoes .botao:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -8px rgba(39, 52, 139, 0.45);
  }

  /* acende puxando pro ouro, nao pro claro: o amarelo da marca e limao
     (esverdeado), e misturado com ambar vira dourado — a mudanca de
     temperatura e mais visivel que a de luminosidade, e o branco de baixo
     inverte pro azul, entao este precisa de sinal igualmente forte */
  .hero__acoes .botao--primario:hover {
    background: color-mix(in srgb, var(--amarelo) 55%, #ffb300);
    box-shadow: 0 10px 20px -8px rgba(39, 52, 139, 0.45),
      0 0 0 7px color-mix(in srgb, #ffb300 40%, transparent);
  }

  /* o branco inverte pro azul da marca: e a mudanca mais legivel das
     duas, sem inventar cor nova */
  .hero__acoes .botao--fantasma:hover {
    background: var(--azul);
    color: var(--branco);
    border-color: var(--azul);
  }
}

/* quem pediu menos movimento recebe so a troca de cor */
@media (prefers-reduced-motion: reduce) {
  .hero__acoes .botao,
  .hero__acoes .botao:hover,
  .hero__acoes .botao:focus-visible {
    transform: none;
    transition: background-color 0.18s ease, color 0.18s ease,
      border-color 0.18s ease;
  }
}

/* ---------- títulos de seção ---------- */
.titulo-secao {
  font-family: var(--fonte-display);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--azul);
  margin-bottom: 1rem;
}

.titulo-secao--claro {
  color: var(--branco);
}

/* ---------- cadastro ---------- */
.cadastro {
  padding-block: clamp(3rem, 7vw, 6rem);
  /* mesmo papel azulado dos outros blocos recuados, nao cinza generico */
  background: color-mix(in srgb, var(--azul) 3%, var(--branco));
  margin: var(--respiro-bloco);
  border-radius: var(--canto-bloco);
  /* mesmo fio de aresta + sombra da agenda/prioridades */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--azul) 16%, transparent),
    var(--sombra-bloco);
}

/* mesma correcao de foco das demais secoes claras: o amarelo global
   quase some neste fundo */
.cadastro :focus-visible {
  outline-color: var(--azul);
}

/* sem o formulario, a secao vira convite: uma coluna so, centralizada */
.cadastro__grade {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  justify-items: center;
  text-align: center;
}


/* chamada acima do botao: convite, nao legenda. A primeira frase vira
   titulo em Bebas — com o slogan "Coragem para mudar" em vermelho, como
   na faixa do topo — e a segunda fica em Acumin, menor e mais leve.
   A hierarquia da acao segue com o botao: a chamada para em 2.25rem
   enquanto o botao vai a 3rem sobre a pilula amarela */
.cadastro__chamada {
  margin-inline: auto;
  text-align: center;
}

.cadastro__chamada-abre {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(1.8rem, 1rem + 2.1vw, 2.85rem);
  letter-spacing: 0.03em;
  line-height: 1.12;
  color: var(--azul);
  /* duas linhas parecidas quando quebra no celular: o balance corta
     entre o slogan e o resto da frase */
  text-wrap: balance;
}

.cadastro__chamada-slogan {
  font-style: normal;
  color: var(--vermelho);
}

.cadastro__chamada-detalhe {
  display: block;
  font-family: var(--fonte-texto);
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.45rem);
  line-height: 1.6;
  color: var(--tinta-media);
  max-width: 46ch;
  margin-inline: auto;
  margin-top: clamp(0.5rem, 1.2vw, 0.75rem);
  text-align: center;
  text-wrap: balance;
}

/* T2: a frase para, o travessao vira pausa visual e a promessa fica
   isolada embaixo — deixa de ser rabicho de frase e vira remate */
.cadastro__chamada-frase {
  display: block;
}

.cadastro__chamada-pausa {
  display: block;
  /* a caixa acompanha o traco, nao a largura toda: com o bloco inteiro,
     o scaleX(1.5) esticava 343px pra 515px e criava barra horizontal */
  width: max-content;
  margin-inline: auto;
  color: var(--vermelho);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1;
  margin-block: 0.3rem 0.4rem;
  transform: scaleX(1.5);
}

/* a promessa e o conceito da secao, entao fala na voz de manchete da marca
   e fica maior que a frase que a antecede — inverte a hierarquia interna do
   fecho de proposito */
.cadastro__chamada-promessa {
  display: block;
  font-family: var(--fonte-display);
  /* a Bebas so tem regular: 600 forjaria um bold sintetico */
  font-weight: 400;
  font-size: clamp(1.4rem, 1.02rem + 1.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: 0.055em;
  color: var(--azul);
  /* redundante na Bebas, mas cobre a fonte de reserva */
  text-transform: uppercase;
}

/* sem isto, em 320px o bloco passava de 129px — mais que o dobro do
   botao, e a promessa deixava de ser remate pra virar paragrafo */
@media (max-width: 420px) {
  .cadastro__chamada-pausa {
    font-size: 1em;
    margin-block: 0.2rem 0.3rem;
  }

}


/* botao grande de propósito: e a unica acao desta secao e precisa
   competir com o hero em peso visual */
.cadastro__convite {
  font-family: var(--fonte-display);
  font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--azul);
  background: var(--amarelo);
  border: 3px solid transparent;
  border-radius: 999px;
  padding: 0.55em 1.5em;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease;
}

@media (hover: hover) {
  .cadastro__convite:hover {
    background: var(--amarelo-hover);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -20px rgba(39, 52, 139, 0.6);
  }
}

.cadastro__convite:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cadastro__convite,
  .cadastro__convite:hover {
    transform: none;
  }
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--azul);
}

.campo input {
  font: inherit;
  padding: 0.75rem 1rem;
  border: 2px solid color-mix(in srgb, var(--azul) 16%, var(--branco));
  /* mesmo raio da .agenda__busca-entrada */
  border-radius: var(--canto-campo);
}

.campo input:focus {
  border-color: var(--azul);
}

/* ---------- redes ---------- */
.redes {
  background: var(--roxo);
  color: var(--branco);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.redes__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
}

/* pequenos o bastante pra caber numa linha só mesmo no mobile mais
   estreito (~360px) com os 4 juntos — vale ate 899px; do desktop em
   diante eles crescem junto com o resto da pagina (regra mais abaixo) */
.redes__link {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.65rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--roxo);
  transition: transform 0.15s ease;
}

.redes__link:hover {
  transform: translateY(-2px);
}

/* no desktop os links ficavam travados em 10,4px enquanto o resto da pagina
   escalava — a pilula ficava menor que o texto legal do rodape. Breakpoint em
   vez de clamp unico porque abaixo de 900px os quatro precisam caber numa
   linha so num aparelho de 360px, e qualquer aumento ali estoura */
@media (min-width: 900px) {
  .redes__link {
    font-size: clamp(0.95rem, 0.55rem + 0.55vw, 1.35rem);
    /* padding em em: a pilula cresce junto com a fonte */
    padding: 0.7em 1.6em;
  }

  .redes__lista {
    gap: 0.75rem;
    margin-top: 1.5rem;
  }
}

/* ---------- rodapé ---------- */
/* fecho da pagina: mantem o azul-noite que o rodape ja tinha — mais escuro
   que o roxo da secao de redes logo acima, pra ler como fim de pagina e nao
   como mais um bloco colorido */
.rodape {
  --rodape-fundo: #16193a;
  --rodape-linha: rgba(244, 244, 240, 0.18);
  background: var(--rodape-fundo);
  color: var(--texto-claro);
  /* o pe cresceu junto com a assinatura: ela fecha a pagina e nao pode
     ficar encostada na borda de baixo */
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.75rem, 5vw, 4rem);
}

/* quatro frentes: marca, navegacao, transparencia, comite.
   Uma coluna no celular; no tablet a marca atravessa a primeira linha e as
   tres listas dividem a de baixo; no desktop as quatro lado a lado */
.rodape__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem var(--espaco);
  align-items: start;
  text-align: left;
}

@media (min-width: 640px) {
  .rodape__grade {
    grid-template-columns: repeat(3, 1fr);
  }

  .rodape__marca {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .rodape__grade {
    grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  }

  .rodape__marca {
    grid-column: auto;
    padding-right: var(--espaco);
  }
}

.rodape__logo {
  height: 72px;
  width: auto;
  /* mesmo valor de 10px, so em rem — unico canto do arquivo que ainda
     estava em pixel fixo */
  border-radius: 0.625rem;
  filter: brightness(1.08);
}

.rodape__slogan {
  font-family: var(--fonte-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--amarelo);
  margin-top: 1rem;
}

.rodape__chapa {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: rgba(244, 244, 240, 0.82);
  max-width: 36ch;
}

.rodape__titulo {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--amarelo);
  margin-bottom: 0.35rem;
}

.rodape__lista {
  list-style: none;
}

/* padding em vez de margem entre itens: cada link vira um alvo de toque
   de ~44px sem abrir buraco visual entre as linhas */
.rodape__lista a,
.rodape__contato a {
  display: inline-block;
  padding-block: 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto-claro);
  text-decoration: none;
}

.rodape__lista a:hover,
.rodape__contato a:hover {
  color: var(--amarelo);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rodape__contato {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(244, 244, 240, 0.82);
}

.rodape__contato p + p {
  margin-top: 0.5rem;
}

/* identificacao legal da propaganda (Lei 9.504/1997 e Res. TSE 23.610/2019) */
.rodape__legal {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rodape-linha);
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(244, 244, 240, 0.78);
}

.rodape__legal p + p {
  margin-top: 0.5rem;
}

.rodape__legal strong {
  color: var(--texto-claro);
}

/* o Entrar abre o rodape: primeira coisa depois do fim do conteudo, antes
   da grade de informacao, centrado no eixo da pagina */
/* barra final: a assinatura da marca fecha a pagina, centrada no eixo */
.rodape__fecho {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rodape-linha);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem 1.5rem;
}

/* ultima palavra da pagina: cresce com a tela e ganha o respiro entre
   letras que a Bebas em caixa alta pede pra ler como assinatura */
.rodape__assinatura {
  font-family: var(--fonte-display);
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0.09em;
  color: var(--texto-claro);
}

.rodape__assinatura-numero {
  color: var(--amarelo);
}

/* no celular a assinatura fecha centrada */
@media (max-width: 639px) {
  .rodape__fecho {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ---------- prioridades ---------- */
.prioridades {
  /* papel da casa: entra branco na portada e ganha o azul da marca
     conforme a lista desce — era o unico bloco flutuante sem corpo */
  background: linear-gradient(
    180deg,
    var(--branco) 0%,
    var(--branco) 22%,
    color-mix(in srgb, var(--azul) 4.5%, var(--branco)) 62%,
    color-mix(in srgb, var(--azul) 9%, var(--branco)) 100%
  );
  padding-block: clamp(3rem, 7vw, 6rem);
  margin: var(--respiro-bloco);
  border-radius: var(--canto-bloco);
  /* fio de aresta no anel da sombra: a borda do bloco claro media 1,4:1
     contra a pagina (o azul mede 7,7:1) — mesma lingua do fio da agenda */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--azul) 16%, transparent),
    var(--sombra-bloco);
}

/* o contorno de foco global e amarelo e mede 1,25:1 neste fundo claro;
   dentro da secao ele vira azul (9,2:1) — mesma correcao do hero */
.prioridades :focus-visible {
  outline-color: var(--azul);
}

.prioridades__intro {
  max-width: 60ch;
  font-size: 1.05rem;
  color: var(--tinta-media);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* colunas fixas em vez de auto-fit: com 6 itens, o auto-fit escolhia 4
   colunas nas telas largas e deixava a segunda fileira pela metade.
   1 no celular, 2 no tablet, 3 no desktop — 3 e 3. */
/* pilares: flex com quebra em vez de grade — com 3 itens fecha em 3 colunas
   no desktop, e com qualquer outra contagem a ultima fileira estica e
   preenche a linha: nunca sobra celula vazia */
/* blocos "pilares" e "demais": mesmo respiro entre blocos da agenda */
.prioridades__bloco + .prioridades__bloco {
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* subtitulo no desenho do da agenda, azul porque aqui o fundo e claro */
.prioridades__subtitulo {
  font-family: var(--fonte-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--azul);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1rem;
}

/* grade fixa 1/2/3 como a agenda; o JS garante no maximo 3 cards */
.prioridades__pilares {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .prioridades__pilares {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3 cards em 2 colunas: o ultimo estica e nao sobra celula vazia */
  .prioridades__pilar:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .prioridades__pilares {
    grid-template-columns: repeat(3, 1fr);
  }

  .prioridades__pilar:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

.prioridades__pilar {
  /* luz e sombra dentro do proprio azul — profundidade sem cor nova */
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--azul) 86%, var(--branco)) 0%,
    var(--azul) 48%,
    color-mix(in srgb, var(--azul) 88%, #000) 100%
  );
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
  color: var(--texto-claro);
  border-radius: var(--canto-cartao);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
}

/* numeral fantasma: da ordem de leitura sem virar infografico */
.prioridades__pilar-num {
  position: absolute;
  top: 0.25rem;
  right: 1rem;
  font-family: var(--fonte-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--amarelo);
  opacity: 0.18;
  pointer-events: none;
}

.prioridades__pilar-area {
  font-family: var(--fonte-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--branco);
  margin-bottom: 0.75rem;
}

/* a entrega concreta e o que a pessoa leva da secao: amarelo sobre o azul,
   contraste 7,3:1 */
/* linha de medida: o traco amarelo do remate da abertura vira a regua de
   cada card, entre a area e a entrega concreta */
.prioridades__pilar-medida::before {
  content: "";
  display: block;
  width: 2.3rem;
  height: 0.24rem;
  border-radius: 999px;
  background: var(--amarelo);
  margin-bottom: 0.55rem;
}

.prioridades__pilar-medida {
  font-weight: 700;
  color: var(--amarelo);
  font-size: 1.08rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.prioridades__pilar-texto {
  font-size: 0.98rem;
  opacity: 0.88;
}

/* demais prioridades: linhas compactas — presentes, sem disputar com os
   pilares */
/* as colunas moram na ul e cada linha herda por subgrid: sem isso, cada
   linha calcularia a propria coluna de tema e os textos desalinhariam */
.prioridades__mais {
  list-style: none;
  display: grid;
  gap: 0.6rem 1.5rem;
  grid-template-columns: max-content minmax(150px, max-content) 1fr;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.prioridades__linha {
  /* superficie branca sobre o papel azulado — a inversao das noticias */
  background: var(--branco);
  border: 1px solid color-mix(in srgb, var(--azul) 16%, var(--branco));
  border-radius: var(--canto-linha);
  padding: 0.9rem 1.25rem;
  display: grid;
  gap: 0.1rem 1.5rem;
  align-items: baseline;
  grid-column: 1 / -1;
  /* fallback pra navegador sem subgrid: mesma ideia, largura fixa */
  grid-template-columns: 2.5rem minmax(150px, 215px) 1fr;
  grid-template-columns: subgrid;
  grid-template-areas: "num tema texto";
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.prioridades__linha > .prioridades__linha-num { grid-area: num; justify-self: end; }
.prioridades__linha > .prioridades__linha-titulo { grid-area: tema; }
.prioridades__linha > .prioridades__linha-texto { grid-area: texto; }

/* continua a contagem dos cards (4 a 13) sem virar infografico */
/* regua da contagem: o numero cresce pro corpo dos titulos e senta na
   mesma tarja amarela do "tres pilares" da abertura */
.prioridades__linha-num {
  font-family: var(--fonte-display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--azul);
  background: linear-gradient(180deg, transparent 58%, var(--amarelo) 58%);
  padding-inline: 0.18em;
  border-radius: 0.09em;
}

.prioridades__linha-titulo {
  font-family: var(--fonte-display);
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--azul);
}

.prioridades__linha-texto {
  font-size: 0.95rem;
  color: var(--tinta-media);
  margin: 0;
}

/* celular: empilha por dentro. Trilho fixo pro numero — com max-content o
   tema comecava em x diferente nas linhas de 1 e de 2 digitos */
@media (max-width: 760px) {
  .prioridades__mais {
    grid-template-columns: 1fr;
  }

  .prioridades__linha {
    grid-template-columns: 1.4rem 1fr;
    grid-template-areas:
      "num  tema"
      "texto texto";
    gap: 0.35rem 0.6rem;
  }
}

/* mesma lingua de mouse da agenda e das noticias, no fundo claro */
@media (hover: hover) {
  .prioridades__pilar:hover {
    translate: 0 -3px;
    /* o fio de luz entra junto pra aresta do card nao piscar no hover */
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
      0 14px 26px -16px rgba(39, 52, 139, 0.55);
    transition: translate 0.18s ease, box-shadow 0.18s ease;
    /* vence o delay em linha do reveal, que atrasaria a resposta ao mouse */
    transition-delay: 0s !important;
  }

  /* filete por box-shadow inset, nunca border-left: a borda roubaria
     largura e desalinharia as colunas do subgrid */
  .prioridades__linha:hover {
    background: var(--branco);
    border-color: color-mix(in srgb, var(--azul) 34%, var(--branco));
    box-shadow: inset 4px 0 0 0 var(--azul);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prioridades__pilar:hover {
    translate: none;
    transition: none;
  }
}

/* chamada de acao separada da lista — nao e "mais uma prioridade", entao
   nao carrega numero nem a moldura tracejada das linhas: fundo solido
   pra ler como bloco proprio, tipo banner de convite, com o botao real
   no centro (nao mais texto sublinhado dentro da frase) */
.prioridades__convite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem);
  border-radius: 0;
  /* border-top (linha que dividia do ranking acima) comentada junto do
     ranking em index.html — sem ele sendo o unico filho do wrapper, essa
     linha ficava solta perto do topo. Devolver os dois juntos. */
  /* border-top: 1px solid color-mix(in srgb, var(--branco) 12%, transparent); */
  background: linear-gradient(160deg, var(--azul), color-mix(in srgb, var(--azul) 82%, #000));
  box-shadow: none;
  color: var(--branco);
}

.prioridades__convite strong {
  font-family: var(--fonte-display);
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  line-height: 1.15;
  color: var(--branco);
}

/* o botao de verdade da secao: mesma pilula da .botao, so que maior —
   e o convite principal da secao inteira, precisa pesar mais que os
   "Quero acompanhar" do resto do site */
.prioridades__convite-botao {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  padding: 1rem 2.25rem;
  box-shadow: 0 14px 30px -14px rgba(39, 52, 139, 0.45);
}

.prioridades__convite-botao:hover {
  background: var(--amarelo-hover);
}

.prioridades__convite-fecho {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--branco) 80%, transparent);
}

/* ranking de exemplo — sem agregacao real entre visitantes, dado fixo
   no HTML como o resto dos numeros de exemplo do site. Cartao azul-escuro
   da mesma familia dos pilares: fecha o arco "isto o governo propoe / isto
   o povo esta dizendo" no mesmo material, depois de uma tela inteira de
   linhas brancas. */
/* wrapper novo: dono do contorno externo (cantos + sombra) do par
   ranking + convite, que agora precisam ler como um cartao so — os
   dois filhos perderam border-radius/box-shadow proprios pra emenda
   entre eles ficar lisa, sem "mordida" nos cantos internos */
.prioridades__ranking-convite {
  margin-top: 1.75rem;
  border-radius: var(--canto-cartao);
  box-shadow: var(--sombra-bloco);
  overflow: hidden;
}

.prioridades__ranking {
  padding: clamp(1.5rem, 4vw, 2rem);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--azul) 86%, var(--branco)) 0%,
    var(--azul) 48%,
    color-mix(in srgb, var(--azul) 88%, #000) 100%
  );
  box-shadow: none;
  border-radius: 0;
  color: var(--texto-claro);
}

.prioridades__ranking-cabeca {
  text-align: center;
}

.prioridades__ranking-cabeca::before {
  content: "";
  display: block;
  width: 2.3rem;
  height: 0.24rem;
  border-radius: 999px;
  background: var(--amarelo);
  margin: 0 auto 0.55rem;
}

.prioridades__ranking-titulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--fonte-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--branco);
}

.prioridades__ranking-legenda {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--branco) 72%, transparent);
}

/* linha-trilha estilo enquete: uma linha por tema, sem coluna de valor
   separada — o preenchimento e o fundo da propria linha e o numero mora
   na ponta dela. Sem numero de posicao: numa lista ordenada por tamanho
   de barra, a ordem ja e o rank (o <ol> continua por semantica/leitor
   de tela, so nao desenha o marcador) */
.prioridades__ranking-lista {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.prioridades__ranking-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 2.5rem;
  padding-inline: 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--branco) 14%, transparent);
  overflow: hidden;
}

/* so o 1o lugar ganha cor — uma cor de dado, nao cinco tons de gradiente
   competindo por atencao */
.prioridades__ranking-item--lider {
  height: 3.1rem;
}

.prioridades__ranking-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  /* transform em vez de width: width e propriedade de layout, forca reflow
     a cada frame da transicao; scaleX e so composicao (GPU), a mesma
     familia de custo do .reveal/.reveal--visivel do resto do site */
  transform-origin: left;
  transform: scaleX(calc(var(--valor) / 100));
  border-radius: inherit;
  background: color-mix(in srgb, var(--branco) 22%, transparent);
}

.prioridades__ranking-item--lider .prioridades__ranking-fill {
  background: var(--amarelo);
}

.prioridades__ranking-nome,
.prioridades__ranking-valor {
  position: relative;
  color: var(--branco);
}

.prioridades__ranking-nome {
  font-weight: 700;
  font-size: 0.95rem;
}

.prioridades__ranking-valor {
  font-family: var(--fonte-display);
  font-size: 1rem;
}

.prioridades__ranking-item--lider .prioridades__ranking-nome,
.prioridades__ranking-item--lider .prioridades__ranking-valor {
  color: var(--azul);
}

.prioridades__ranking-item--lider .prioridades__ranking-nome {
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.prioridades__ranking-item--lider .prioridades__ranking-valor {
  font-size: 1.7rem;
}

/* preenchimento entra no scroll-reveal (mesmo .reveal/.reveal--visivel do
   resto do site, so acrescentando a largura) — apuracao acontecendo, nunca
   dado ao vivo: e animacao de entrada, nao promessa de tempo real */
.prioridades__ranking-item.reveal .prioridades__ranking-fill {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.prioridades__ranking-item.reveal--visivel .prioridades__ranking-fill {
  transform: scaleX(calc(var(--valor) / 100));
}

@media (prefers-reduced-motion: reduce) {
  .prioridades__ranking-item.reveal .prioridades__ranking-fill {
    transform: scaleX(calc(var(--valor) / 100));
    transition: none;
  }
}

/* ---------- agenda ---------- */
.agenda {
  background: var(--azul);
  color: var(--texto-claro);
  padding-block: clamp(3rem, 7vw, 6rem);
  margin: var(--respiro-bloco);
  border-radius: var(--canto-bloco);
  box-shadow: var(--sombra-bloco);
}

/* destaques lado a lado: tres cards na mesma linha no desktop */
.agenda__lista {
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .agenda__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .agenda__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* card de destaque: o conteudo empilha dentro dele, e os cards ficam
   lado a lado — ao contrario da lista de baixo, que e o inverso */
.agenda__item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--canto-cartao);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  position: relative;
}

.agenda__data { grid-area: data; align-self: center; }
.agenda__data {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--amarelo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.agenda__titulo {
  font-family: var(--fonte-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.15;
}

.agenda__local {
  font-weight: 700;
  margin-bottom: 0;
  opacity: 0.9;
}

/* ---------- agenda: blocos e trilha da agenda completa ---------- */
.agenda__bloco + .agenda__bloco {
  margin-top: clamp(2rem, 5vw, 3rem);
}

.agenda__subtitulo {
  font-family: var(--fonte-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--amarelo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* lista vertical: um compromisso embaixo do outro, cada um ocupando a
   largura inteira do bloco */
/* as colunas moram aqui, na lista, e nao em cada linha: se cada uma
   calculasse a propria largura, a coluna da data sairia com 202px numa e
   213px noutra, e os titulos ficariam desalinhados entre si */
.agenda__trilha {
  list-style: none;
  display: grid;
  gap: 0.6rem 1.5rem;
  grid-template-columns: minmax(150px, max-content) 1fr fit-content(220px);
}

/* dentro da linha as partes se distribuem na horizontal: data a esquerda,
   compromisso e cidade a direita. O HTML e uma lista plana de filhos, entao
   cada um e colocado pela area — sem wrapper extra */
.agenda__realizado {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--canto-linha);
  padding: 0.9rem 1.25rem;
  display: grid;
  gap: 0.1rem 1.5rem;
  align-items: baseline;
  grid-column: 1 / -1;
  /* fallback pra navegador sem subgrid: mesma ideia, largura fixa */
  grid-template-columns: minmax(150px, 215px) 1fr minmax(0, 160px);
  grid-template-columns: subgrid;
  grid-template-areas: "data titulo local";
  /* peso menor que os destaques: aqui e listagem, la e convite */
  opacity: 0.92;
  /* hover acende a linha (ver bloco de efeitos de mouse no fim da secao);
     aqui so a transicao — estas linhas nao tem .reveal, entao nao ha
     transition-delay em linha pra atrapalhar */
  transition: opacity 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.agenda__realizado > .agenda__data { grid-area: data; align-self: baseline; }
.agenda__realizado > .agenda__realizado-titulo { grid-area: titulo; }
.agenda__realizado > .agenda__local { grid-area: local; }

/* no celular a linha nao cabe: empilha por dentro */
/* 760 e nao 720: com tres colunas, a folga do titulo mais longo cai pra
   8px na faixa dos 721-760, e qualquer titulo novo um pouco maior quebraria
   em duas linhas, entortando a linha inteira */
@media (max-width: 760px) {
  .agenda__trilha {
    grid-template-columns: 1fr;
  }

  .agenda__realizado {
    grid-template-columns: 1fr;
    grid-template-areas:
      "data"
      "titulo"
      "local";
  }

  .agenda__realizado > .agenda__data {
    align-self: start;
  }
}

.agenda__realizado-titulo {
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  margin-bottom: 0;
}


/* ---------- agenda: painel de busca ---------- */
.agenda__busca {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--canto-cartao);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.agenda__busca .agenda__busca-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: end;
}

.agenda__busca-campo {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.agenda__busca-rotulo {
  font-weight: 700;
  font-size: 0.95rem;
}

.agenda__busca-entrada {
  font: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 2px solid transparent;
  border-radius: var(--canto-campo);
  background: var(--branco);
  color: var(--tinta);
  width: 100%;
  transition: border-color 0.15s ease;
}

.agenda__busca-entrada:focus {
  border-color: var(--amarelo);
}

.agenda__busca-botao {
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  min-height: 44px;
  padding: 0.55rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--amarelo);
  background: var(--amarelo);
  color: var(--azul);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

/* o :hover dos botoes mora no bloco "efeitos de mouse" no fim da secao,
   atras de (hover: hover) — fora dele o estado gruda depois do toque */

/* outline amarelo global some sobre o botao amarelo: aqui o foco e branco */
.agenda__busca-botao:focus-visible {
  outline: 3px solid var(--branco);
  outline-offset: 2px;
}

.agenda__busca-botao--vazado {
  background: transparent;
  color: var(--texto-claro);
  border-color: rgba(255, 255, 255, 0.65);
}

.agenda__busca-contador {
  font-weight: 700;
  color: var(--amarelo);
}

/* o paragrafo fica sempre no DOM por causa do aria-live; o respiro so
   existe quando ha texto */
.agenda__busca-contador:not(:empty) {
  margin-bottom: 0.9rem;
}

.agenda__busca-vazio {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--canto-linha);
  padding: 1.25rem;
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

/* o display:grid acima vence o [hidden] da folha do navegador; sem esta
   regra o bloco vazio apareceria o tempo todo */
.agenda__busca-vazio[hidden] {
  display: none;
}

/* celular: campos e botoes empilhados, cada um na largura inteira */
@media (max-width: 720px) {
  /* seletor composto de proposito: a regra base e .agenda__busca
     .agenda__busca-form, e media query nao soma especificidade — com o
     seletor simples aqui, a base vencia e os dois campos ficavam
     espremidos lado a lado em 127px no celular */
  .agenda__busca .agenda__busca-form {
    grid-template-columns: 1fr;
  }

  }

/* ---------- agenda: efeitos de mouse ---------- */
/* tres tratamentos, um por papel: o card de destaque e vitrine (levanta e
   clareia), a linha da lista e registro (acende no lugar, com filete
   amarelo de marcador), e as listas suspensas da busca ecoam o proprio
   estado de foco. Tudo pintura — translate e box-shadow, nunca borda ou
   padding: as 10 linhas dividem colunas por subgrid e, com
   box-sizing:border-box, uma borda a mais roubaria largura do conteudo e
   entortaria a lista inteira. So onde ha mouse de verdade: no toque o
   :hover gruda depois do dedo (mesma licao dos botoes do hero). */
@media (hover: hover) {
  .agenda__item:hover {
    /* translate, e nao transform: o reveal de entrada anima transform, e
       as duas propriedades nao podem brigar pela mesma mao */
    translate: 0 -3px;
    background: rgba(255, 255, 255, 0.14);
    /* fio interno pra aresta ficar nitida + sombra azul-noite (a sombra
       preta acinzentaria o bloco azul) */
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      0 14px 26px -16px rgba(10, 14, 45, 0.55);
    /* a transicao mora no proprio :hover, com delay !important: o main.js
       escalona o reveal com transition-delay em linha (90ms por card) e,
       sem isto, o 2o e o 3o card reagiriam ao mouse com atraso. Na saida
       volta seco — resposta imediata, e o escalonamento de entrada fica
       intacto. */
    transition: translate 0.18s ease, background-color 0.18s ease,
      box-shadow 0.18s ease;
    transition-delay: 0s !important;
  }

  /* linha e registro, nao vitrine: nao levanta — acende. Opacidade cheia,
     fundo um degrau acima e filete amarelo encostado na borda esquerda,
     como marcador de regua sobre a linha que o olho esta lendo */
  .agenda__realizado:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 4px 0 0 0 var(--amarelo);
  }

  /* a lista suspensa anuncia no hover o mesmo fio amarelo que ja ganha no
     foco do teclado: um unico vocabulario pra "este controle responde" */
  .agenda__busca-entrada:hover {
    border-color: var(--amarelo);
  }

  /* botoes da busca (hoje so o "Limpar busca" do estado vazio): mesmas
     declaracoes que ja existiam, agora atras de (hover: hover) */
  .agenda__busca-botao:hover {
    transform: translateY(-2px);
    background: var(--amarelo-hover);
  }

  .agenda__busca-botao--vazado:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* movimento reduzido: cai o deslocamento, ficam as mudancas de cor — a
   pessoa continua vendo onde o cursor esta, sem nada saltando */
@media (prefers-reduced-motion: reduce) {
  .agenda__item:hover {
    translate: none;
    transition: none;
  }

  .agenda__busca-botao:hover {
    transform: none;
  }
}

/* ---------- popup do convite ---------- */
.convite {
  /* o reset global (* { margin: 0 }) mata o margin:auto que o navegador
     aplica no dialog modal — sem isto ele gruda no canto superior esquerdo
     em vez de centralizar */
  margin: auto;
  width: min(860px, calc(100vw - 2 * var(--respiro-bloco)));
  max-height: calc(100dvh - 2 * var(--respiro-bloco));
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 0;
  border-radius: var(--canto-bloco);
  background: var(--branco);
  color: color-mix(in srgb, var(--azul) 82%, #000);
  box-shadow: var(--sombra-popup);
  /* o stylesheet do navegador limita dialog a calc(100% - 6px - 2em):
     em 320px isso dava 282px, contra 296px das secoes */
  max-inline-size: calc(100vw - 2 * var(--respiro-bloco));
  overflow: auto;
  overscroll-behavior: contain;
}

/* o contorno de foco global e amarelo e mede 1,46:1 sobre o popup branco;
   aqui dentro o anel e azul (10,8:1) */
.convite :focus-visible {
  outline-color: var(--azul);
}

.convite::backdrop {
  background: rgba(22, 25, 58, 0.65);
}

.convite__fechar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  /* 2,75rem = 44px, o alvo minimo de toque */
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--azul);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.convite__fechar:hover {
  background: color-mix(in srgb, var(--azul) 8%, var(--branco));
}

/* cabeca do popup no eixo central das secoes, que agora sao todas
   centradas, e o titulo na escala do .titulo-secao */
.convite__passo,
.convite__titulo,
.convite__linha-fina {
  text-align: center;
}

.convite__titulo {
  font-family: var(--fonte-display);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--azul);
  line-height: 1;
  text-wrap: balance;
}

.convite__linha-fina {
  margin-top: 0.4rem;
  color: color-mix(in srgb, var(--azul) 50%, #000);
  max-width: 46ch;
  margin-inline: auto;
}

.convite__grade {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.convite__form {
  border-radius: var(--canto-bloco);
  padding: 1.25rem;
  background: color-mix(in srgb, var(--azul) 9%, var(--branco));
  border: 1px solid color-mix(in srgb, var(--azul) 24%, var(--branco));
  box-shadow: var(--sombra-bloco);
}

/* endereco de exemplo + confirmacao, mesmo cartao padrao e mesmo selo
   pilula amarelo/azul do resto do fluxo de popups */
.convite__endereco {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: 1.25rem;
  border-radius: var(--canto-bloco);
  background: color-mix(in srgb, var(--azul) 5%, var(--branco));
  border: 1px solid color-mix(in srgb, var(--azul) 16%, var(--branco));
  text-align: center;
}

.convite__endereco-selo {
  display: inline-block;
}

.convite__endereco-texto {
  margin-top: 0.6rem;
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  color: var(--azul);
}

.convite__endereco-pergunta {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--azul) 50%, #000);
}

.convite__endereco-botoes {
  margin-top: 0.85rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.convite__endereco-botoes .botao {
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
}

/* select segue o mesmo tratamento do input dentro de .campo */
.campo select {
  font: inherit;
  padding: 0.75rem 1rem;
  border: 2px solid color-mix(in srgb, var(--azul) 16%, var(--branco));
  border-radius: var(--canto-campo);
  background: var(--branco);
  color: color-mix(in srgb, var(--azul) 82%, #000);
}

.campo select:focus {
  border-color: var(--azul);
}

.convite__cidade {
  margin-top: 1.25rem;
}

/* atalho pra quem nao e de SC: link-botao discreto, mesmo tom de apoio
   da pergunta do endereco logo acima */
.convite__trocar-uf {
  align-self: center;
  margin-top: 0.25rem;
  padding: 0.25rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--azul);
  text-decoration: underline;
  cursor: pointer;
}

.convite__trocar-uf:hover {
  color: color-mix(in srgb, var(--azul) 82%, #000);
}

/* o display:flex de .campo vence o [hidden] da folha do navegador; sem
   esta regra o card de cidade aparece mesmo antes de clicar "Nao" */
.convite__cidade[hidden] {
  display: none;
}

/* combobox de cidade: input de texto + lista de sugestoes filtrada,
   mesmo cartao-padrao (borda azul-tingida, cantos arredondados) do
   resto do fluxo de popups */
.campo__combo {
  position: relative;
}

.campo__combo input {
  width: 100%;
  font: inherit;
  padding: 0.75rem 1rem;
  border: 2px solid color-mix(in srgb, var(--azul) 16%, var(--branco));
  border-radius: var(--canto-campo);
  background: var(--branco);
  color: color-mix(in srgb, var(--azul) 82%, #000);
}

.campo__combo input:focus {
  border-color: var(--azul);
}

.campo__combo-lista {
  position: absolute;
  z-index: 1;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 14rem;
  overflow-y: auto;
  list-style: none;
  background: var(--branco);
  border: 1px solid color-mix(in srgb, var(--azul) 16%, var(--branco));
  border-radius: var(--canto-campo);
  box-shadow: var(--sombra-popup);
}

.campo__combo-lista [role="option"] {
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: color-mix(in srgb, var(--azul) 82%, #000);
}

.campo__combo-lista [role="option"][aria-selected="true"] {
  background: color-mix(in srgb, var(--azul) 10%, var(--branco));
}

.convite__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

/* 48px de altura e 16px de fonte: abaixo disso o iPhone da zoom
   automatico ao tocar no campo */
.convite__form input {
  min-height: 48px;
  font-size: 1rem;
}

.campo textarea {
  font: inherit;
  padding: 0.75rem 1rem;
  border: 2px solid color-mix(in srgb, var(--azul) 16%, var(--branco));
  border-radius: var(--canto-campo);
  resize: vertical;
}

.campo textarea:focus {
  border-color: var(--azul);
}

.convite__enviar {
  min-height: 48px;
  width: 100%;
  grid-column: 1 / -1;
  justify-self: stretch;
}

.convite__legal {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--azul) 45%, #000);
}

.convite__legal a {
  color: var(--azul);
  font-weight: 700;
}

/* ---------- passo 2: votacao nas prioridades ----------
   Terceiro irmao dos popups: herda .convite* e diverge no esqueleto.
   Cabeca e rodape ficam sempre a vista e so a lista rola — com 13
   itens, rolar o popup inteiro afundaria o titulo e o botao. */
.convite--votacao {
  width: min(680px, calc(100vw - 2 * var(--respiro-bloco)));
  padding: 0;
  overflow: hidden;
}

/* dialog fechado tem display:none do navegador; o flex so pode valer
   com ele aberto, senao o popup apareceria direto na pagina */
.convite--votacao[open] {
  display: flex;
  flex-direction: column;
}

/* ---------- popup de confirmacao do cadastro ----------
   Irmao mais curto dos popups: um recado so e um botao. Moldura,
   backdrop e fechar vem inteiros de .convite; aqui so estreita a caixa
   pro tamanho do recado e centra o botao. */
.convite--confirmacao {
  width: min(520px, calc(100vw - 2 * var(--respiro-bloco)));
  text-align: center;
}

.convite__entendi {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  min-width: 12rem;
  min-height: 48px;
}

/* selo de passo: o fluxo do cadastro agora tem dois tempos e o selo
   situa a pessoa nos dois popups */
.convite__passo {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--azul) 50%, #000);
  margin-bottom: 0.5rem;
}

.votacao__cabeca {
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.25rem) 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--azul) 14%, var(--branco));
}

.votacao__lista {
  list-style: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem clamp(1.25rem, 4vw, 2.25rem);
  /* chao do arrasto: o item pego posiciona-se em absoluto aqui dentro
     (e o overflow ja corta o que passar) */
  position: relative;
}

/* a lista rola sem ter filho focavel, entao ela mesma recebe tabindex
   no HTML; o anel marca onde o teclado esta */
.votacao__lista:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: -3px;
  border-radius: 0.5rem;
}

/* duas colunas: numero e conteudo. O item inteiro e o controle de
   ordenar — pega-se em qualquer ponto da linha (dai o cursor de pegar
   e o alvo de toque de 44px+) e ele proprio e focavel pro teclado */
.votacao__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  align-items: start;
  padding-block: 0.8rem;
  min-height: 44px;
  cursor: grab;
  /* segurar aqui e o gesto de pegar, nao o de abrir o balao do iOS */
  -webkit-touch-callout: none;
}

.votacao__item:active {
  cursor: grabbing;
}

/* anel azul, como o da propria lista: o amarelo global some no fundo
   branco do popup */
.votacao__item:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: -3px;
  border-radius: 0.5rem;
}

.votacao__item + .votacao__item {
  border-top: 1px solid color-mix(in srgb, var(--azul) 10%, var(--branco));
}

.votacao__numero {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--fonte-display);
  font-size: 1rem;
}

.votacao__nome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--azul);
}

/* mesmo par amarelo/azul dos selos da home: 8:1 de contraste */
/* a 13 e fixa: nao arrasta, nao move por teclado. Um unico sinal forte —
   o circulo do numero, maior e no vermelho oficial do PT — em vez de
   repetir vermelho em varios lugares. Layout tambem muda: numero em
   cima, conteudo centralizado embaixo, em vez das duas colunas dos
   outros itens — reforca que este e diferente, um fecho, nao uma linha */
.votacao__item--travado {
  cursor: default;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  row-gap: 0.5rem;
}

.votacao__item--travado:active {
  cursor: default;
}

.votacao__item--travado .votacao__numero {
  width: 3rem;
  height: 3rem;
  background: var(--vermelho-pt);
  color: var(--branco);
  font-size: 1.4rem;
}

.votacao__item--travado .votacao__nome {
  justify-content: center;
}

.votacao__base {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--vermelho-pt);
}

.votacao__texto {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--azul) 55%, #000);
  max-width: 52ch;
}

.votacao__rodape {
  padding: 1rem clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 1.75rem);
  border-top: 1px solid color-mix(in srgb, var(--azul) 14%, var(--branco));
  background: var(--branco);
}

.votacao__concluir {
  width: 100%;
  min-height: 48px;
}

/* botao de largura total: o translate do hover herdado fica estranho */
.votacao__concluir:hover {
  transform: none;
  background: var(--amarelo-hover);
}

/* ---------- reordenacao: item pego, vaga, dica ----------
   O gesto e por Pointer Events (a API nativa de drag nao dispara em
   toque). Os itens NAO levam touch-action:none — a lista precisa rolar
   com o dedo; o desempate entre rolar e pegar e por tempo, no JS. */

/* mesmo gesto do separador entre hero e secoes, em escala menor — assina
   o popup com a identidade da home em vez de cabecalho generico */
.votacao__separador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
  width: min(220px, 60%);
  margin-inline: auto;
}

.votacao__separador-risco {
  flex: 1 1 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--azul) 45%, transparent));
}

.votacao__separador-risco:last-child {
  background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--azul) 45%, transparent));
}

.votacao__separador-trio {
  width: 0.26rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--amarelo);
  box-shadow: -0.6rem 0 0 var(--azul), 0.6rem 0 0 var(--azul);
  margin-inline: 0.6rem;
}

/* instrucao curta de uso, abaixo da linha-fina — dica ganha o mesmo selo
   amarelo/azul da .votacao__pilar, que ja vive dentro da lista deste
   mesmo popup */
.votacao__dica {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--azul);
}

.votacao__dica-selo {
  flex: none;
}

/* ---------- passo 4: resposta normalizada ----------
   Cartao que devolve a leitura organizada do texto livre do passo 3.
   Mesmo par amarelo/azul do selo .votacao__pilar, pra ler como a mesma
   familia de componente */
.resposta__cartao {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: 1.25rem 1.5rem;
  border-radius: var(--canto-linha);
  background: color-mix(in srgb, var(--azul) 6%, var(--branco));
  border: 2px solid color-mix(in srgb, var(--azul) 16%, var(--branco));
  text-align: left;
}

.resposta__categoria {
  display: inline-block;
}

.resposta__resumo {
  margin-top: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--azul) 82%, #000);
}

/* no toque, segurar o item e o gesto de pegar — o mesmo que iniciaria
   a selecao de texto; em tela de toque a selecao dentro da lista sai
   de cena pra nao disputar o dedo com o arrasto */
@media (hover: none) {
  .votacao__item {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* durante o arrasto os filetes separadores somem: o item esta
   viajando e as linhas fixas so confundiriam o olho */
.votacao__lista--arrastando .votacao__item + .votacao__item,
.votacao__lista--arrastando .votacao__vaga + .votacao__item {
  border-top-color: transparent;
}

/* selecionar texto sem querer no meio do gesto */
.votacao__lista--arrastando {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* item pego: cartao branco que levanta com a sombra azulada da casa,
   canto da familia dos blocos, e o numeral acende em amarelo — a mesma
   pilula invertida dos selos */
.votacao__item--pega {
  position: absolute;
  z-index: 5;
  margin: 0;
  background: var(--branco);
  border-radius: 0.75rem;
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--azul) 65%, transparent);
  padding-inline: 0.6rem;
  cursor: grabbing;
}

.votacao__item--pega .votacao__numero {
  background: var(--amarelo);
  color: var(--azul);
}

/* o buraco que o item deixa: filete tracejado azul, fundo com um
   sopro de azul */
.votacao__vaga {
  list-style: none;
  border: 2px dashed color-mix(in srgb, var(--azul) 35%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--azul) 5%, transparent);
}

/* vizinhos abrindo espaco (FLIP): so a transicao; o transform quem
   poe e tira e o JS */
.votacao__item--desliza {
  transition: transform 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .votacao__item--desliza {
    transition: none;
  }
}

/* ---------- linha de corte (desligada: CORTE = 0 no JS) ----------
   Mesmo desenho do "ou" do convite: filete dos dois lados e uma pilula
   amarela no meio. Abaixo dela e fila de espera: o numeral desbota */
.votacao__corte {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.55rem;
}

.votacao__corte::before,
.votacao__corte::after {
  content: "";
  flex: 1;
  border-top: 2px solid var(--azul);
}

.votacao__corte span {
  padding: 0.25rem 0.7rem;
  text-align: center;
  /* em 320px o rotulo inteiro nao cabe numa linha: quebra em duas
     dentro da pilula em vez de estourar a lista */
  max-width: 100%;
}

.votacao__item--fila .votacao__numero {
  background: color-mix(in srgb, var(--azul) 12%, var(--branco));
  color: var(--azul);
}

/* ---------- noticias da campanha ----------
   Mesmo trio de tokens dos blocos recuados (respiro, canto, sombra), como
   prioridades e agenda. O fundo e o vermelho da marca: na sequencia da
   pagina (hero azul → prioridades claro → agenda azul → noticias →
   faca parte claro → redes roxo), repetir azul colaria dois blocos azuis
   e repetir claro colaria dois claros — o vermelho fecha o ritmo e so
   aparecia na faixa fina do topo. Os cards sao brancos por cima, pra o
   texto corrido nao ficar sobre o vermelho. */
.noticias {
  background: var(--vermelho);
  color: var(--texto-claro);
  padding-block: clamp(3rem, 7vw, 6rem);
  margin: var(--respiro-bloco);
  border-radius: var(--canto-bloco);
  box-shadow: var(--sombra-bloco);
}

/* blocos "Em destaque" e "Mais notícias": mesmo respiro entre blocos
   que a agenda usa */
.noticias__bloco + .noticias__bloco {
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* mesmo desenho do subtitulo da agenda, mas branco em vez de amarelo:
   sobre o vermelho o amarelo mede 3.10:1 — passa como texto grande, mas
   este clamp desce a 1.2rem (19.2px) no celular, abaixo do limiar de
   texto grande, e ali 3.10 reprova. O branco mede 4.54:1 e passa em
   qualquer corpo */
.noticias__subtitulo {
  font-family: var(--fonte-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--branco);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* colunas fixas como nas prioridades: 1 / 2 / 3 por faixa de largura.
   auto-fit deixava a ultima fileira pela metade e foi banido de proposito.
   O bloco em destaque mostra 3 noticias: fileira unica no desktop, como
   os destaques da agenda */
.noticias__lista {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .noticias__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .noticias__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* sem foto de proposito: nao existe banco de imagens de noticia no
   projeto, e repetir as fotos do trio em todo card viraria papel de
   parede. O card e tipografico: data em destaque, titulo em Bebas,
   resumo em Acumin — mesmo desenho dos cards da agenda, invertido
   (branco sobre vermelho em vez de vidro sobre azul) */
.noticias__item {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--canto-cartao);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* mesmo desenho da data da agenda; o tom e um vermelho mais fechado que o
   do fundo porque o vermelho da marca sobre branco fica no limite de
   4.5:1 neste corpo pequeno — derivado do --vermelho generico, nao do
   --vermelho-pt (esse fica exclusivo da 13 travada na votacao) */
.noticias__data {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--vermelho) 85%, #000);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.noticias__titulo {
  font-family: var(--fonte-display);
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  line-height: 1.15;
  color: var(--azul);
  margin-bottom: 0.5rem;
}

/* sem "leia mais": nao existe pagina de noticia individual, e link que
   nao leva a lugar nenhum e pior que nenhum link. O resumo inteiro mora
   no card */
.noticias__resumo {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--tinta-media);
}

/* ---------- noticias: trilha "Mais notícias" ----------
   Mesmo desenho da trilha da agenda: as colunas moram na ul e cada linha
   herda os trilhos por subgrid — sem isso cada linha calcularia a propria
   largura da coluna de data e os titulos desalinhariam entre si.
   Duas colunas, e nao tres: o resumo tem em media ~150 caracteres de
   Acumin 0.98rem (~940px sozinho) e nao cabe numa linha nem com o resto
   da largura toda; truncado a ~40 caracteres viraria ruido. O resumo
   inteiro mora nos 3 cards de destaque; a linha e indice: data + titulo */
.noticias__trilha {
  list-style: none;
  display: grid;
  gap: 0.6rem 1.5rem;
  grid-template-columns: minmax(150px, max-content) 1fr;
}

/* linha branca como os cards, mas com opacity .92: o vermelho vaza de
   leve e rebaixa a linha a registro, como o .92 da trilha da agenda.
   Com o rebaixo o titulo azul mede 9.45:1 e a data 5.10:1 — folga */
.noticias__linha {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--canto-linha);
  padding: 0.9rem 1.25rem;
  display: grid;
  gap: 0.1rem 1.5rem;
  align-items: baseline;
  grid-column: 1 / -1;
  /* fallback pra navegador sem subgrid: mesma ideia, largura fixa */
  grid-template-columns: minmax(150px, 215px) 1fr;
  grid-template-columns: subgrid;
  grid-template-areas: "data titulo";
  opacity: 0.92;
  /* hover acende no lugar (bloco de efeitos de mouse abaixo); estas
     linhas nao tem .reveal, entao nao ha transition-delay em linha */
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

/* a data herda .noticias__data do card; na linha o margin-bottom de card
   sairia da conta do baseline — zera */
.noticias__linha > .noticias__data {
  grid-area: data;
  align-self: baseline;
  margin-bottom: 0;
}

.noticias__linha > .noticias__linha-titulo { grid-area: titulo; }

.noticias__linha-titulo {
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--azul);
  margin-bottom: 0;
}

/* no celular a linha nao cabe: empilha por dentro. 760 como na agenda:
   as duas trilhas viram lista empilhada juntas, e a medicao (maior
   titulo + coluna de data + gaps + paddings) fecha com folga em 761 —
   numeros no relatorio da mudanca */
@media (max-width: 760px) {
  .noticias__trilha {
    grid-template-columns: 1fr;
  }

  .noticias__linha {
    grid-template-columns: 1fr;
    grid-template-areas:
      "data"
      "titulo";
  }

  .noticias__linha > .noticias__data {
    align-self: start;
  }
}

/* ---------- noticias: efeitos de mouse ----------
   Mesma lingua da agenda, adaptada ao fundo vermelho: o card de destaque
   levanta 3px — clarear nao da, ele ja e branco, entao quem responde e a
   sombra, avermelhada e nao preta (preto acinzentaria o bloco vermelho).
   A linha acende no lugar: opacity .92 -> 1 (o fundo efetivo sobe de
   (252,238,239) pra branco puro) + filete de 4px por box-shadow inset —
   nunca border-left, que roubaria largura e desalinharia as colunas do
   subgrid. O filete e azul, nao amarelo como na agenda: amarelo sobre a
   linha branca mede 1.46:1 (invisivel); o azul mede 10.77:1 e e a cor do
   proprio titulo da linha. Tudo pintura e translate: nada muda de
   tamanho, as linhas dividem colunas e alturas */
@media (hover: hover) {
  .noticias__item:hover {
    /* translate, e nao transform: o reveal de entrada anima transform */
    translate: 0 -3px;
    box-shadow: 0 14px 26px -16px rgba(94, 12, 19, 0.6);
    /* o revelar() do main.js poe transition-delay em linha (90ms por
       card); sem o delay 0s !important o 2o e o 3o card reagiriam ao
       mouse com atraso. Na saida volta seco, como na agenda */
    transition: translate 0.18s ease, box-shadow 0.18s ease;
    transition-delay: 0s !important;
  }

  .noticias__linha:hover {
    opacity: 1;
    box-shadow: inset 4px 0 0 0 var(--azul);
  }
}

/* movimento reduzido: cai o deslocamento, fica a sombra — a pessoa
   continua vendo onde o cursor esta, sem nada saltando */
@media (prefers-reduced-motion: reduce) {
  .noticias__item:hover {
    translate: none;
    transition: none;
  }
}

/* botoes do hero em proporcao com a logo: razao 0,72 constante.
   Bloco separado e no fim do arquivo de proposito — o font-size empata em
   especificidade com a regra la de cima e precisa vencer pela ordem */
@media (min-width: 1140px) {
  .hero__acoes {
    /* trilha a 72% do eixo da logo: os dois botoes esticam ate ela e
       escalam junto com --hero-banner, sem pixel chumbado. O max-content
       e o piso, caso algum rotulo futuro nao caiba nos 72% */
    grid-template-columns: minmax(max-content, 72%);
  }

  .hero__acoes .botao {
    font-size: clamp(0.95rem, 0.55rem + 0.8vw, 1.6rem);
  }
}

/* ---------- agenda e noticias: virador de paginas ----------
   Mesmo miolo da paginação da tabela de inscritos do painel da equipe
   (Anterior / "Página X de Y" / Próxima, desabilitado no limite com
   opacity .4), com a roupa dos botões vazados da busca da agenda — pílula
   com contorno branco translúcido, que já fala com os fundos escuros das
   duas seções. */
.agenda__paginacao,
.noticias__paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

/* o display:flex acima venceria o [hidden] da folha do navegador; sem esta
   regra o virador de página única apareceria vazio */
.agenda__paginacao[hidden],
.noticias__paginacao[hidden] {
  display: none;
}

/* mesma receita do .agenda__busca-botao--vazado: pílula, 44px de alvo de
   toque, contorno branco a 65% sobre o fundo escuro */
.agenda__paginacao-botao,
.noticias__paginacao-botao {
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  min-height: 44px;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  background: transparent;
  color: var(--texto-claro);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* desabilitado no limite fica no lugar, apagado — sumir mudaria a largura
   do virador a cada virada (mesmo .4 do painel da equipe) */
.agenda__paginacao-botao:disabled,
.noticias__paginacao-botao:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* sobre o vermelho o foco amarelo global mede 3.10:1, no limite; branco
   mede 4.54:1 — mesma conta do subtítulo das notícias. No azul da agenda
   o amarelo global já serve */
.noticias__paginacao-botao:focus-visible {
  outline-color: var(--branco);
}

/* "Página X de Y": peso e cor do contador da busca na agenda (amarelo
   sobre azul); nas notícias branco, pela mesma conta de contraste do
   subtítulo */
.agenda__paginacao-estado,
.noticias__paginacao-estado {
  font-weight: 700;
  font-size: 0.95rem;
}

.agenda__paginacao-estado {
  color: var(--amarelo);
}

.noticias__paginacao-estado {
  color: var(--branco);
}

/* hover atrás de (hover: hover) como o resto da seção — fora dele o estado
   gruda depois do toque; :not(:disabled) pra não acender botão no limite */
@media (hover: hover) {
  .agenda__paginacao-botao:not(:disabled):hover,
  .noticias__paginacao-botao:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--branco);
  }
}

/* celular estreito: os três na mesma linha não cabem — o nav tem 334px
   úteis num viewport de 390 (24px de margem da seção + 32px de padding da
   faixa) e o trio pede ~336px; em aparelhos de 360 seria pior. Em vez de
   deixar o flex-wrap derrubar o "Próxima" sozinho pra baixo, o estado
   sobe pra uma linha própria e os dois botões ficam lado a lado embaixo
   (235px, cabe até em 360). Seletores simples como na regra base: não há
   composto pra media query repetir */
@media (max-width: 480px) {
  .agenda__paginacao-estado,
  .noticias__paginacao-estado {
    order: -1;
    flex-basis: 100%;
    text-align: center;
  }
}


/* ---------- prioridades: abertura centrada e selos de contagem ---------- */
/* a abertura vira portada no eixo do site; os blocos abaixo seguem
   construidos a esquerda, como coluna de conteudo */
.prioridades__abertura {
  text-align: center;
  margin-bottom: clamp(1.9rem, 4.2vw, 2.75rem);
}

/* escala de portada: so aqui o titulo passa do clamp global — agenda e
   noticias continuam no .titulo-secao padrao. Entrelinha apertada pra
   Bebas em caixa alta: quando quebra em duas no celular, fecham em bloco */
.prioridades__abertura .titulo-secao {
  font-size: clamp(2.5rem, 1.75rem + 3.3vw, 4.1rem);
  line-height: 1.04;
  text-wrap: balance;
  margin-bottom: clamp(0.7rem, 1.6vw, 1.1rem);
}

.prioridades__abertura .prioridades__intro {
  max-width: none;
  margin-inline: auto;
  margin-bottom: 0;
}

.prioridades__intro-abre {
  display: block;
  font-size: clamp(1.35rem, 1.08rem + 1.25vw, 1.85rem);
  line-height: 1.35;
  font-weight: 650;
  color: var(--azul);
  /* quebra gulosa em vez de balance: quando a linha nao cabe, a primeira
     enche ("No centro do governo,") e a tarja cai inteira na segunda —
     o balance partia em "No centro do / governo, tres pilares" */
  text-wrap: wrap;
}

/* tarja de marca-texto: pincelada atras da metade de baixo das letras,
   pontas levemente arredondadas — o amarelo dos numerais e das medidas
   dos cards. Sempre fundo, nunca cor de letra (amarelo sobre branco nao
   le); o texto azul por cima mede 7,4:1 */
.prioridades__intro-pilares {
  font-style: normal;
  white-space: nowrap;
  position: relative;
  /* stacking context proprio: o ::before vai pra tras do texto sem cair
     atras do fundo branco da secao */
  isolation: isolate;
}

.prioridades__intro-pilares::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* um fio maior que o original: a mascara de pincelada come ~0.05em das
     bordas; isto devolve a cobertura aprovada */
  left: -0.2em;
  right: -0.2em;
  bottom: -0.06em;
  height: 0.62em;
  background: var(--amarelo);
  border-radius: 0.09em;
  /* pincelada: mascara SVG estatica (turbulencia deslocando um retangulo)
     — pinta uma vez; o scaleX da entrada anima por cima */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-10%25' y='-30%25' width='120%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09 0.35' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Crect x='2.5' y='2.5' width='115' height='19' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-10%25' y='-30%25' width='120%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09 0.35' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Crect x='2.5' y='2.5' width='115' height='19' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.prioridades__intro-fecho {
  display: block;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--tinta-media);
  max-width: 52ch;
  margin-inline: auto;
  margin-top: clamp(0.4rem, 1vw, 0.6rem);
  text-wrap: balance;
}

/* remate: tres tracinhos verticais — os tres pilares em miniatura, o do
   meio no amarelo da tarja (um elemento + dois box-shadow, sem markup).
   E o degrau entre a frase e os tres cards: o olho desce por ele em vez
   de saltar o vao */
.prioridades__intro::after {
  content: "";
  display: block;
  width: 0.3rem;
  height: 1.35rem;
  margin: clamp(1.15rem, 2.4vw, 1.6rem) auto 0;
  border-radius: 999px;
  background: var(--amarelo);
  box-shadow: -0.95rem 0 0 var(--azul), 0.95rem 0 0 var(--azul);
}

/* entrada orquestrada (so com movimento permitido): a chamada chega, a
   tarja se desenha da esquerda pra direita, os pilares acendem depois */
@media (prefers-reduced-motion: no-preference) {
  .prioridades__intro.reveal .prioridades__intro-pilares::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
  }

  .prioridades__intro.reveal--visivel .prioridades__intro-pilares::before {
    transform: scaleX(1);
  }

  /* remate: os tres pilares se erguem da propria base e assentam com um
     leve passar do ponto — os dois box-shadow acompanham o transform,
     entao os tres tracinhos sobem juntos, da mesma linha de chao */
  .prioridades__intro.reveal::after {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center bottom;
    transition:
      opacity 0.28s ease 0.85s,
      transform 0.62s cubic-bezier(0.34, 1.35, 0.64, 1) 0.85s;
  }

  .prioridades__intro.reveal--visivel::after {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* a portada recua ao sair de cena: enquanto a abertura cruza o topo do
   viewport, fica ~26px atras da rolagem e perde presenca — o plano do
   titulo e mais fundo que o dos cards. Rolagem dirigindo a animacao em
   CSS puro: roda no compositor, sem listener; sem suporte, nada acontece */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .prioridades__abertura {
      animation: prioridades-abertura-recua linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes prioridades-abertura-recua {
  to {
    transform: translateY(26px);
    opacity: 0.65;
  }
}

/* selo de contagem: torna visivel o que o <ol start> ja faz por baixo —
   uma lista so, de 1 a 13 */
.prioridades__contagem {
  font-family: var(--fonte-display);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  background: var(--azul);
  color: var(--amarelo);
  padding: 0.18em 0.6em 0.08em;
  border-radius: 999px;
  margin-left: 0.45rem;
  vertical-align: 0.18em;
  white-space: nowrap;
}

.prioridades__contagem[hidden] {
  display: none;
}

/* no segundo bloco o selo e vazado: mesma familia, hierarquia menor —
   cheio = topo da lista, vazado = continuacao */
#prioridades-bloco-mais .prioridades__contagem {
  background: transparent;
  color: var(--azul);
  box-shadow: inset 0 0 0 1.5px currentColor;
}


/* ---------- agenda e noticias: titulos centrados ---------- */
/* mesmo eixo do titulo de #redes e da abertura de prioridades: cada titulo
   e subtitulo centrado dentro do proprio container */
#agenda .titulo-secao,
#noticias .titulo-secao,
.agenda__subtitulo,
.noticias__subtitulo {
  text-align: center;
}


/* ---------- separador entre secoes ---------- */
/* emenda entre o hero e as prioridades: dois riscos azuis que morrem nas
   pontas e o 40 da campanha no meio, dentro da tarja amarela que ja e o
   gesto da casa (a mesma do "tres pilares" e da regua de numeros) */
.separador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: min(var(--largura-maxima), calc(100% - 2 * var(--espaco)));
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.separador__risco {
  flex: 1 1 0;
  height: 2px;
  max-width: 22rem;
  border-radius: 999px;
  /* o risco nasce transparente na ponta e ganha corpo em direcao ao 40 */
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--azul) 45%, transparent));
}

.separador__risco:last-child {
  background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--azul) 45%, transparent));
}

/* o mesmo trio que remata a abertura das prioridades: um elemento e dois
   box-shadow. A margem lateral abre espaco pros dois tracos de fora, que
   vivem na sombra e nao ocupam largura no layout */
.separador__trio {
  width: 0.34rem;
  height: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  border-radius: 999px;
  background: var(--amarelo);
  box-shadow: -1.05rem 0 0 var(--azul), 1.05rem 0 0 var(--azul);
  margin-inline: 1.05rem;
}

/* ---------- auditoria final: alvos de toque ----------
   As pilulas de redes (71x27) ficavam abaixo dos 44px de alvo minimo de
   toque. O desenho aprovado nao muda: uma area de toque invisivel
   (pseudo-elemento) completa a altura ate 44px. So vertical — na
   horizontal todos ja passam de 44px e a expansao invadiria o vizinho. */
.redes__link {
  position: relative;
}

.redes__link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}


/* ---------- espaco reservado das secoes que montam depois ---------- */
/* prioridades e agenda nasciam ocultas e, ao montar, empurravam ate 5.116px
   pra baixo do ponto onde a pessoa estava lendo — no celular isso lia como
   "o site desconfigurou sozinho". Agora elas ja ocupam a altura que vao ter,
   e nada se move quando o conteudo chega.
   As alturas sao as medidas de cada faixa de largura; se a quantidade de
   itens mudar (13 prioridades, 30 compromissos), remedir e atualizar. */
.prioridades[data-carregando],
.agenda[data-carregando] {
  /* o miolo ja nasce oculto; o que aparece e a moldura do bloco */
  contain: layout;
}

.prioridades[data-carregando] { min-height: 3055px; }
.agenda[data-carregando] { min-height: 2441px; }

@media (min-width: 360px) {
  .prioridades[data-carregando] { min-height: 2822px; }
  .agenda[data-carregando] { min-height: 2386px; }
}

@media (min-width: 390px) {
  .prioridades[data-carregando] { min-height: 2754px; }
  .agenda[data-carregando] { min-height: 2338px; }
}

@media (min-width: 430px) {
  .prioridades[data-carregando] { min-height: 2521px; }
  .agenda[data-carregando] { min-height: 2314px; }
}

@media (min-width: 560px) {
  .prioridades[data-carregando] { min-height: 2363px; }
  .agenda[data-carregando] { min-height: 2279px; }
}

@media (min-width: 640px) {
  .prioridades[data-carregando] { min-height: 2138px; }
  .agenda[data-carregando] { min-height: 2152px; }
}

@media (min-width: 720px) {
  .prioridades[data-carregando] { min-height: 1975px; }
  .agenda[data-carregando] { min-height: 2189px; }
}

@media (min-width: 768px) {
  .prioridades[data-carregando] { min-height: 1898px; }
  .agenda[data-carregando] { min-height: 1583px; }
}

@media (min-width: 900px) {
  .prioridades[data-carregando] { min-height: 1801px; }
  .agenda[data-carregando] { min-height: 1516px; }
}

@media (min-width: 1000px) {
  .prioridades[data-carregando] { min-height: 1659px; }
  .agenda[data-carregando] { min-height: 1552px; }
}

@media (min-width: 1140px) {
  .prioridades[data-carregando] { min-height: 1576px; }
  .agenda[data-carregando] { min-height: 1548px; }
}

@media (min-width: 1280px) {
  .prioridades[data-carregando] { min-height: 1596px; }
  .agenda[data-carregando] { min-height: 1543px; }
}

@media (min-width: 1440px) {
  .prioridades[data-carregando] { min-height: 1609px; }
  .agenda[data-carregando] { min-height: 1556px; }
}

/* FIX: Scroll anchor para seção #redes (botão Seguir nas redes) */
html {
  scroll-behavior: smooth;
}


#redes {
  scroll-margin-top: 280px;
}

/* Mobile: scroll-margin reduzido */
@media (max-width: 767px) {
  #redes {
    scroll-margin-top: 100px;
  }
}

/* ===== MODAL REDES ===== */
.modal-redes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-content h2 {
  color: #27348b;
  font-size: 24px;
  margin: 0 0 10px 0;
}

.modal-content p {
  color: #666;
  margin: 0 0 20px 0;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #27348b;
}

.redes-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
}

.rede-btn {
  background: #ffcc00;
  color: #27348b;
  padding: 15px 10px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
  border: none;
  cursor: pointer;
}

.rede-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3);
}

.rede-btn .icon {
  font-size: 24px;
}

@media (max-width: 767px) {
  .modal-content {
    padding: 30px 20px;
    max-width: 85vw;
  }
  
  .modal-content h2 {
    font-size: 20px;
  }
  
  .redes-buttons {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .rede-btn {
    padding: 12px 8px;
    font-size: 14px;
  }
}