/*
  campaign.css
  Sistema visual do modo campanha (redesign "light").

  Direção de arte: peça de campanha transformada em experiência digital.
  Paleta do manual de marca, Archivo no display, Inter no texto, número
  22111 como elemento gráfico, faixas de cor em largura total e cortes
  diagonais entre seções. Tudo escopado em [data-site-mode="officialCampaign"].
*/

/* ===== Tokens ===== */
:root[data-site-mode="officialCampaign"] {
  --adjuto-campaign-ink: #114093;
  --adjuto-campaign-ink-deep: #0c2f6e;
  --adjuto-campaign-blue: #023ff9;
  --adjuto-campaign-accent: #6db800;
  --adjuto-campaign-surface: #e7e7e7;
  --adjuto-campaign-on-dark: #ffffff;
  --adjuto-campaign-on-dark-muted: #cddcf5;
  --adjuto-campaign-on-accent: #114093;

  --adjuto-campaign-gradient: linear-gradient(135deg, #114093 0%, #023ff9 100%);
  --adjuto-campaign-gradient-brand: linear-gradient(120deg, #023ff9 0%, #6db800 100%);

  /* corte diagonal padrão entre faixas */
  --adjuto-cut: clamp(1.5rem, 3.5vw, 3.25rem);

  --adjuto-font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --adjuto-campaign-font-display: "Archivo", "Arial Narrow", Arial, sans-serif;

  /* superfícies compartilhadas ficam neutras (menos "app") */
  --adjuto-color-offwhite: #f3f5f8;
  --adjuto-color-blue-light: #e9eef8;

  /* conteúdo interno mais largo que o institucional */
  --adjuto-container-max: 1280px;

  --adjuto-campaign-radius: 10px;

  scroll-behavior: smooth;
  overflow-anchor: none;
}

/* As seções são reordenadas depois do carregamento; sem isto o navegador
   "ancora" a rolagem no meio da página durante a montagem. */
:root[data-site-mode="officialCampaign"] body {
  overflow-anchor: none;
  font-family: var(--adjuto-font-base);
}

/* ===== Tipografia de display ===== */
:root[data-site-mode="officialCampaign"] h1,
:root[data-site-mode="officialCampaign"] h2,
:root[data-site-mode="officialCampaign"] h3,
:root[data-site-mode="officialCampaign"] .adjuto-btn,
:root[data-site-mode="officialCampaign"] .adjuto-nav__link,
:root[data-site-mode="officialCampaign"] .adjuto-mobile-menu__link,
:root[data-site-mode="officialCampaign"] .adjuto-sticky-cta {
  font-family: var(--adjuto-campaign-font-display);
}

:root[data-site-mode="officialCampaign"] .adjuto-section__title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

/*
  Headline de "Quem é Adjuto": tres credenciais, cada uma em sua linha.
  Os spans sao blocos para nenhuma credencial dividir linha com outra; no
  mobile o corpo encolhe apenas o necessario para a credencial mais larga
  ("Sec. de Assistência Social.", ~13,2ch nesta fonte) caber inteira na
  largura util (100vw menos o padding lateral de 1.5rem por lado). O
  min() devolve o tamanho padrao assim que ha espaco; desktop intocado.
*/
:root[data-site-mode="officialCampaign"] .adjuto-bio__headline span {
  display: block;
}

@media (max-width: 480px) {
  :root[data-site-mode="officialCampaign"] .adjuto-bio__headline {
    font-size: min(2rem, calc((100vw - 3rem) / 13.5));
  }
}

:root[data-site-mode="officialCampaign"] .adjuto-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--adjuto-font-base);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--adjuto-campaign-ink);
}

:root[data-site-mode="officialCampaign"] .adjuto-section__eyebrow::before {
  content: "";
  width: 2rem;
  height: 4px;
  background: var(--adjuto-campaign-accent);
}

:root[data-site-mode="officialCampaign"] .adjuto-nav__link,
:root[data-site-mode="officialCampaign"] .adjuto-mobile-menu__link {
  font-weight: 600;
  font-size: 0.95rem;
}

:root[data-site-mode="officialCampaign"] .adjuto-btn {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Seções da campanha respiram mais e o miolo alarga */
:root[data-site-mode="officialCampaign"] .adjuto-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

/* ===== Cabeçalho ===== */
:root[data-site-mode="officialCampaign"] .adjuto-header {
  border-bottom: 4px solid var(--adjuto-campaign-accent);
}

:root[data-site-mode="officialCampaign"] .adjuto-header__brand {
  display: inline-flex;
  align-items: center;
}

.adjuto-brand-logo {
  display: block;
  width: auto;
  max-width: none;
  height: 48px;
}

:root[data-site-mode="officialCampaign"] .adjuto-header__brand,
:root[data-site-mode="officialCampaign"] .adjuto-header__brand picture {
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .adjuto-brand-logo {
    height: 38px;
  }
}

:root[data-site-mode="officialCampaign"] .adjuto-nav__list {
  gap: var(--adjuto-space-5);
}

:root[data-site-mode="officialCampaign"] .adjuto-nav__link:hover,
:root[data-site-mode="officialCampaign"] .adjuto-nav__link:focus-visible {
  color: var(--adjuto-campaign-blue);
  border-bottom: 3px solid var(--adjuto-campaign-accent);
}

:root[data-site-mode="officialCampaign"] .adjuto-header__actions .adjuto-btn {
  white-space: nowrap;
}

/* selo antigo de número no cabeçalho: fora do novo desenho (a marca já o traz) */
.adjuto-header__number {
  display: none;
}

/* CTA principal (classe herdada --gold) vira o verde da marca */
:root[data-site-mode="officialCampaign"] .adjuto-btn--gold {
  background: var(--adjuto-campaign-accent);
  color: var(--adjuto-campaign-on-accent);
  border-color: var(--adjuto-campaign-accent);
}

:root[data-site-mode="officialCampaign"] .adjuto-btn--gold:hover,
:root[data-site-mode="officialCampaign"] .adjuto-btn--gold:focus-visible {
  background: var(--adjuto-campaign-ink);
  color: var(--adjuto-campaign-on-dark);
  border-color: var(--adjuto-campaign-ink);
}

.adjuto-btn--outline-light {
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  color: var(--adjuto-campaign-on-dark);
}

.adjuto-btn--outline-light:hover,
.adjuto-btn--outline-light:focus-visible {
  background: var(--adjuto-campaign-on-dark);
  color: var(--adjuto-campaign-ink);
}

/* ===== Faixa de propaganda eleitoral (todas as páginas) ===== */
.adjuto-election-banner {
  margin: 0;
  padding: 0.45rem 1rem;
  background: var(--adjuto-campaign-ink-deep, #0c2f6e);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ===== HERO ===== */
.adjuto-hero-campaign {
  position: relative;
  overflow: hidden;
  background: var(--adjuto-campaign-gradient);
  color: var(--adjuto-campaign-on-dark);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--adjuto-cut, 3rem)));
}

/* ===== Área visual do candidato =====
   O número decorativo mora só aqui dentro. A coluna de texto fica limpa,
   apenas com o degradê azul, sem grafismo atrás do slogan, do parágrafo,
   dos botões ou da placa eleitoral. */
.adjuto-hero-campaign__visual {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/*
  O número é construído com os recursos da própria fonte (eixo de largura da
  Archivo, entreletra negativa e line-height curto) e só então recebe uma
  expansão vertical moderada. Nada de esticar um texto comum.
*/
/*
  Camada de sombra gráfica do hero. O 22111 é ampliado muito além dos limites
  da seção e deslocado, de modo que só fragmentos de alguns algarismos apareçam.
  Não é para ser lido: entra como profundidade.

  A máscara em degradê é o que protege o texto: no desktop a camada quase
  desaparece sobre a coluna da esquerda e ganha corpo atrás do candidato; no
  celular o mesmo acontece de cima (texto) para baixo (fotografia).
*/
.adjuto-hero-campaign__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.adjuto-hero-campaign__bignum {
  position: absolute;
  display: block;
  white-space: nowrap;
  font-family: var(--adjuto-campaign-font-display);
  font-weight: 800;
  font-stretch: 62.5%;
  line-height: 0.74;
  color: rgba(255, 255, 255, 0.055);
  user-select: none;
  pointer-events: none;
}

/* A fotografia fica sempre acima do grafismo. */
.adjuto-hero-campaign__figure {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}

.adjuto-hero-campaign__image {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 24px 48px rgba(3, 12, 36, 0.45));
}

.adjuto-hero-campaign__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: end;
}

@media (min-width: 900px) {
  .adjuto-hero-campaign__grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.94fr);
    gap: clamp(1rem, 3vw, 3rem);
    min-height: min(78vh, 720px);
  }
}

.adjuto-hero-campaign__content {
  padding-bottom: clamp(3rem, 7vw, 6rem);
  align-self: center;
}

.adjuto-hero-campaign__eyebrow {
  margin: 0 0 var(--adjuto-space-4);
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--adjuto-campaign-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adjuto-campaign-on-dark);
}

.adjuto-hero-campaign__title {
  margin: 0 0 var(--adjuto-space-4);
  color: var(--adjuto-campaign-on-dark, #ffffff);
  font-weight: 800;
  font-stretch: 92%;
  font-size: clamp(2.5rem, 6.2vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  max-width: 14ch;
}

.adjuto-hero-campaign__text {
  margin: 0 0 var(--adjuto-space-5);
  max-width: 44ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--adjuto-campaign-on-dark-muted);
}

.adjuto-hero-campaign__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--adjuto-space-3);
  margin-bottom: var(--adjuto-space-6);
}

.adjuto-hero-campaign__actions .adjuto-btn {
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
}

/* placa de urna: nome + número em bloco gráfico */
.adjuto-hero-campaign__ballot {
  margin: 0;
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--adjuto-campaign-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(4, 16, 45, 0.35);
}

.adjuto-hero-campaign__ballot-name {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  background: #ffffff;
  color: var(--adjuto-campaign-ink);
  font-family: var(--adjuto-campaign-font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.adjuto-hero-campaign__ballot-number {
  display: flex;
  align-items: center;
  padding: 0.4rem 1.1rem;
  background: var(--adjuto-campaign-accent);
  color: var(--adjuto-campaign-on-accent);
  font-family: var(--adjuto-campaign-font-display);
  font-weight: 800;
  font-stretch: 87.5%;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.adjuto-hero-campaign__ballot-party {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.14);
  color: var(--adjuto-campaign-on-dark);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}


/* ===== Desktop: hero em duas áreas ===== */
@media (min-width: 900px) {
  /* a área visual sangra até a borda direita da tela e recorta ali */
  .adjuto-hero-campaign__visual {
    --adjuto-hero-gutter: max(0px, (100vw - var(--adjuto-container-max)) / 2);
    align-self: stretch;
    margin-right: calc(-1 * var(--adjuto-hero-gutter));
    padding-right: var(--adjuto-hero-gutter);
  }

  /*
    A foto oficial vem da agência já cortada na altura dos antebraços: não há
    mão no arquivo. Ela sangra para baixo e o término some sob a faixa verde
    e o recorte diagonal da seção seguinte.
  */
  .adjuto-hero-campaign__figure {
    margin-bottom: calc(-1 * clamp(1.75rem, 3.5vw, 3rem));
  }

  /* algarismos por volta de 70% da altura da área visual */
  /*
    Algarismos altos e estreitos, afastados entre si por entreletra positiva
    para espalhar fragmentos por todo o fundo, e maiores que o hero para
    serem cortados no topo, na base e nas duas laterais.
  */
  /*
     Ancorado à direita e embaixo. O deslocamento joga a cauda "111" para fora
     da tela: sobram os "2", que têm diagonal e curva. Se ficassem os "1", o
     resultado leria como faixa vertical, não como fragmento de algarismo.
  */
  .adjuto-hero-campaign__bignum {
    right: -3%;
    bottom: -22%;
    font-size: 54rem;
    letter-spacing: -0.02em;
    transform: scale(0.46, 1.44);
    transform-origin: right bottom;
  }

  .adjuto-hero-campaign__bg {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      transparent 34%,
      rgba(0, 0, 0, 0.3) 48%,
      rgba(0, 0, 0, 0.85) 64%,
      rgba(0, 0, 0, 1) 78%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      transparent 34%,
      rgba(0, 0, 0, 0.3) 48%,
      rgba(0, 0, 0, 0.85) 64%,
      rgba(0, 0, 0, 1) 78%
    );
  }
}

/* Entre 900 e 1200 a área visual é mais estreita: o grafismo comprime um
   pouco mais na horizontal para a sequência continuar legível. */
@media (min-width: 900px) and (max-width: 1199px) {
  .adjuto-hero-campaign__bignum {
    right: -4%;
    font-size: 39rem;
    letter-spacing: -0.02em;
    transform: scale(0.46, 1.48);
  }
}

/* ===== Tablet =====
@media (min-width: 600px) and (max-width: 899px) {
  .adjuto-hero-campaign__visual {
    min-height: 22rem;
  }

  .adjuto-hero-campaign__figure {
    margin-bottom: calc(-1 * var(--adjuto-cut, 3rem));
  }

  .adjuto-hero-campaign__bignum {
    right: -8%;
    bottom: -14%;
    font-size: 60vw;
    letter-spacing: -0.02em;
    transform: scale(0.5, 1.55);
    transform-origin: right bottom;
  }
}

/* ===== Celular: duas zonas verticais ===== */
@media (max-width: 899px) {
  .adjuto-hero-campaign {
    text-align: left;
  }

  .adjuto-hero-campaign__content {
    padding-bottom: var(--adjuto-space-3);
  }

  .adjuto-hero-campaign__eyebrow {
    margin-bottom: var(--adjuto-space-3);
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
  }

  .adjuto-hero-campaign__title {
    max-width: 12ch;
  }

  .adjuto-hero-campaign__text {
    margin-bottom: var(--adjuto-space-4);
    font-size: 1rem;
  }

  .adjuto-hero-campaign__actions {
    gap: var(--adjuto-space-2);
    margin-bottom: var(--adjuto-space-4);
  }

  .adjuto-hero-campaign__actions .adjuto-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    text-align: center;
  }

  .adjuto-hero-campaign__ballot {
    display: flex;
    max-width: 100%;
  }

  .adjuto-hero-campaign__ballot-name {
    flex: 1;
    justify-content: center;
    padding: 0.6rem 0.8rem;
  }

  .adjuto-hero-campaign__ballot-party {
    padding: 0.6rem 0.8rem;
  }

  /* zona inferior: o grafismo preenche o azul atrás do candidato e nada
     dele alcança o texto da zona de cima */
  .adjuto-hero-campaign__visual {
    margin-top: var(--adjuto-space-3);
  }

  .adjuto-hero-campaign__figure {
    margin-bottom: calc(-1 * var(--adjuto-cut, 3rem));
  }

  .adjuto-hero-campaign__image {
    width: min(84vw, 380px);
  }

  /* Celular: os fragmentos descem pelo fundo e só ganham corpo na altura da
     fotografia; sobre o texto a camada é quase imperceptível. */
  /* Celular: mesma sombra, concentrada embaixo, atrás da fotografia,
     desaparecendo antes de alcançar o texto. */
  .adjuto-hero-campaign__bignum {
    right: -10%;
    bottom: -10%;
    font-size: 112vw;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.07);
    transform: scale(0.5, 1.55);
    transform-origin: right bottom;
  }

  .adjuto-hero-campaign__bg {
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      transparent 46%,
      rgba(0, 0, 0, 0.4) 62%,
      rgba(0, 0, 0, 1) 82%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      transparent 46%,
      rgba(0, 0, 0, 0.4) 62%,
      rgba(0, 0, 0, 1) 82%
    );
  }
}

/* Telas estreitas e baixas: alguns pixels a mais para o rosto ficar
   inteiro acima do CTA fixo. */
@media (max-width: 400px) {
  .adjuto-hero-campaign {
    padding-top: var(--adjuto-space-5);
  }

  .adjuto-hero-campaign__eyebrow {
    margin-bottom: var(--adjuto-space-2);
  }

  .adjuto-hero-campaign__title {
    font-size: clamp(2.1rem, 10.5vw, 2.6rem);
  }

  .adjuto-hero-campaign__text,
  .adjuto-hero-campaign__actions {
    margin-bottom: var(--adjuto-space-3);
  }

  .adjuto-hero-campaign__visual {
    margin-top: var(--adjuto-space-2);
  }
}

/* ===== RESULTADOS: faixa verde com números gigantes ===== */
/*
  LETREIRO. A faixa verde deixou de ser um bloco de conteúdo e virou pura
  divisão visual: uma fita de identidade correndo entre o hero e a área
  clara. Ela não informa nada que a página já não diga — nome, número e
  slogan — e é exatamente por isso que pode ser só grafismo.

  A diagonal aqui é deliberadamente menor que a do resto do site (o corte
  local substitui o --adjuto-cut global): a fita precisa ler como uma linha
  horizontal de separação, não como mais uma superfície inclinada.
*/
.adjuto-results {
  --adjuto-cut: clamp(0.6rem, 1vw, 0.85rem);
  position: relative;
  background: var(--adjuto-campaign-accent);
  color: var(--adjuto-campaign-on-accent);
  padding: 0;
  margin-top: calc(-1 * var(--adjuto-cut));
  clip-path: polygon(0 var(--adjuto-cut) , 100% 0, 100% calc(100% - var(--adjuto-cut)), 0 100%);
}

/* A janela do letreiro. O padding define a altura da fita: ~66px no desktop,
   ~52px no celular, contando o respiro que o corte diagonal consome. */
.adjuto-marquee__viewport {
  position: relative;
  overflow: hidden;
  padding: calc(var(--adjuto-cut) + 0.65rem) 0;
}

@media (max-width: 759px) {
  .adjuto-marquee__viewport {
    padding: calc(var(--adjuto-cut) + 0.45rem) 0;
  }
}

/*
  Máscara das extremidades: dois véus do próprio verde da faixa, para que as
  letras não surjam nem sumam num corte seco na borda. Curtos de propósito —
  não chegam nem perto do centro e não comprometem a leitura.
*/
.adjuto-marquee__viewport::before,
.adjuto-marquee__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.adjuto-marquee__viewport::before {
  left: 0;
  width: clamp(20px, 2.5vw, 36px);
  background: linear-gradient(90deg, var(--adjuto-campaign-accent), rgba(109, 184, 0, 0));
}

/* O véu direito é maior que o esquerdo de propósito: além de suavizar a
   borda, ele é o fundo limpo sobre o qual o botão de pausa se apoia — o
   texto se dissolve antes de passar por baixo do controle. */
.adjuto-marquee__viewport::after {
  right: 0;
  width: clamp(56px, 6vw, 72px);
  background: linear-gradient(270deg, var(--adjuto-campaign-accent) 55%, rgba(109, 184, 0, 0));
}

/*
  O trilho: duas metades idênticas, animação até -50%, loop sem emenda.
  width: max-content impede qualquer quebra; a fita nunca dobra de linha, o
  que também garante que ADJUTO DIAS e 22111 jamais se separem.

  Velocidade: alvo de ~50px/s, medido. Com 10 repetições por metade, a metade
  mede ~3.650px — mais larga que um viewport ultrawide de 3.440px, então o
  fim do ciclo não abre vão em nenhuma tela. 73s dá 50,0px/s. Se a tipografia
  ou o número de repetições da fita mudar, meça a metade de novo e recalibre
  a duração — a velocidade é o compromisso, não o número de segundos.
*/
.adjuto-marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: adjuto-marquee 73s linear infinite;
}

.adjuto-marquee__half {
  display: block;
  font-family: var(--adjuto-campaign-font-display);
  font-weight: 700;
  font-stretch: 87.5%;
  font-size: clamp(0.93rem, 1.3vw, 1.12rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--adjuto-campaign-ink);
}

@keyframes adjuto-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Pausa persistente: acionada pelo botão, sobrevive à navegação da página. */
.adjuto-marquee.is-paused .adjuto-marquee__track {
  animation-play-state: paused;
}

/* Cortesia complementar: parar enquanto o cursor está sobre a fita. */
.adjuto-marquee__viewport:hover .adjuto-marquee__track {
  animation-play-state: paused;
}

/*
  O controle real de pausa. Nasce hidden no HTML e só aparece via JavaScript;
  encostado na extremidade direita, sobre o véu verde, sem cobrir a leitura
  (o véu já reserva esse respiro). Área de toque de 44px.
*/
.adjuto-marquee__toggle {
  position: absolute;
  right: clamp(0.35rem, 1vw, 0.9rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--adjuto-campaign-ink);
  cursor: pointer;
}

.adjuto-marquee__toggle:hover {
  background: rgba(17, 64, 147, 0.14);
}

.adjuto-marquee__toggle:focus-visible {
  outline: 3px solid var(--adjuto-campaign-ink);
  outline-offset: 2px;
}

.adjuto-marquee__toggle-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Um ícone de cada vez: pausa enquanto roda, play enquanto pausado. */
.adjuto-marquee__toggle-icon--play {
  display: none;
}

.adjuto-marquee.is-paused .adjuto-marquee__toggle-icon--play {
  display: block;
}

.adjuto-marquee.is-paused .adjuto-marquee__toggle-icon--pause {
  display: none;
}

/*
  Com menos movimento, a fita fica parada: vira uma faixa impressa com a
  sequência visível a partir da esquerda. Nenhuma informação se perde — o
  conteúdo real para leitores está no parágrafo visualmente oculto.
*/
@media (prefers-reduced-motion: reduce) {
  .adjuto-marquee__track {
    animation: none;
  }

  /* Fita parada não precisa de botão de pausa. O JavaScript também não o
     exibe nesse estado; esta regra é a rede de segurança em CSS puro. */
  .adjuto-marquee__toggle {
    display: none;
  }
}

/* ===== APRESENTAÇÃO (quem-e-adjuto) ===== */
:root[data-site-mode="officialCampaign"] #quem-e-adjuto {
  background: #ffffff;
  /* O respiro grande daqui era para receber a antiga faixa alta de conteúdo.
     Com a fita fina de letreiro acima, o mesmo valor virava um vazio; a
     apresentação agora começa logo depois da passagem. */
  padding-top: clamp(2.75rem, 5vw, 4.25rem);
}

:root[data-site-mode="officialCampaign"] .adjuto-bio__image-wrap {
  position: relative;
}

:root[data-site-mode="officialCampaign"] .adjuto-bio__image {
  border-radius: var(--adjuto-campaign-radius);
  box-shadow: 14px 14px 0 var(--adjuto-campaign-accent);
}

:root[data-site-mode="officialCampaign"] .adjuto-bio__tags .adjuto-badge {
  background: transparent;
  border: 2px solid var(--adjuto-campaign-ink);
  color: var(--adjuto-campaign-ink);
  font-weight: 700;
  border-radius: 999px;
}

:root[data-site-mode="officialCampaign"] #quem-e-adjuto p {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 58ch;
}

/* ===== ATUAÇÃO: faixa azul escura, lista numerada ===== */
:root[data-site-mode="officialCampaign"] #atuacao {
  position: relative;
  background:
    radial-gradient(120% 120% at 85% 10%, rgba(2, 63, 249, 0.5) 0%, rgba(2, 63, 249, 0) 55%),
    var(--adjuto-campaign-ink);
  color: var(--adjuto-campaign-on-dark);
  clip-path: polygon(0 var(--adjuto-cut, 3rem), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(3.5rem, 7vw, 6rem) + var(--adjuto-cut, 3rem));
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-section__eyebrow,
:root[data-site-mode="officialCampaign"] #atuacao .adjuto-section__title,
:root[data-site-mode="officialCampaign"] #atuacao .adjuto-section__lead {
  color: var(--adjuto-campaign-on-dark);
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-section__eyebrow::before {
  background: var(--adjuto-campaign-accent);
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-grid--4 {
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: atuacao;
  margin-top: var(--adjuto-space-6);
}

@media (min-width: 760px) {
  :root[data-site-mode="officialCampaign"] #atuacao .adjuto-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-card {
  counter-increment: atuacao;
  position: relative;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  box-shadow: none;
  padding: var(--adjuto-space-5) 0 var(--adjuto-space-5) 4.6rem;
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-card::before {
  content: "0" counter(atuacao);
  position: absolute;
  left: 0;
  top: var(--adjuto-space-5);
  font-family: var(--adjuto-campaign-font-display);
  font-weight: 800;
  font-stretch: 87.5%;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--adjuto-campaign-accent);
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-card__body {
  padding: 0;
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-card__title {
  color: var(--adjuto-campaign-on-dark);
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-card__text {
  color: var(--adjuto-campaign-on-dark-muted);
  max-width: 46ch;
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-btn--ghost {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--adjuto-campaign-on-dark);
  background: transparent;
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-btn--ghost:hover,
:root[data-site-mode="officialCampaign"] #atuacao .adjuto-btn--ghost:focus-visible {
  background: var(--adjuto-campaign-accent);
  border-color: var(--adjuto-campaign-accent);
  color: var(--adjuto-campaign-on-accent);
}

:root[data-site-mode="officialCampaign"] #atuacao .adjuto-areas__secondary .adjuto-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--adjuto-campaign-on-dark);
  border-radius: 999px;
}

/* ===== MUNICÍPIOS ===== */
:root[data-site-mode="officialCampaign"] #municipios {
  background: #ffffff;
}

:root[data-site-mode="officialCampaign"] .adjuto-municipality-picker {
  background: var(--adjuto-color-offwhite);
  border: 0;
  border-left: 5px solid var(--adjuto-campaign-accent);
  border-radius: var(--adjuto-campaign-radius);
  padding: var(--adjuto-space-5);
  box-shadow: none;
}

:root[data-site-mode="officialCampaign"] .adjuto-record-card {
  border: 0;
  border-left: 4px solid var(--adjuto-campaign-blue);
  border-radius: 0;
  box-shadow: none;
  background: var(--adjuto-color-offwhite);
}

/* ===== REGISTROS (destaque): fundo claro, linhas editoriais ===== */
:root[data-site-mode="officialCampaign"] #destaque {
  background: var(--adjuto-campaign-surface);
  /* Sobravam 112px entre o CTA "Ver todas as notícias" e o início de
     Materiais — o padding padrão da seção (96px em 1440) somado à margem do
     próprio parágrafo do botão. Lido como bloco cinza vazio. Só o rodapé da
     seção encolhe; o topo, os cards e o CTA não se movem. */
  padding-bottom: clamp(2.5rem, 4.4vw, 3.8rem);
}

:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-grid {
  gap: var(--adjuto-space-5);
}

/* Sem fotos repetidas de estúdio nos registros: cards editoriais, só texto */
:root[data-site-mode="officialCampaign"] #destaque .adjuto-card__image-wrap {
  display: none;
}

/* ==========================================================================
   Iniciativas — matriz de quatro
   ==========================================================================
   A tentativa anterior só igualava a ALTURA EXTERNA dos cartões, e isso não
   bastava: por dentro, título de 17 caracteres e título de 91 empurravam
   resumo, situação e botões para alturas diferentes. Quatro cartões do mesmo
   tamanho, montados individualmente.

   Agora as cinco zonas — meta, título, resumo, situação, ações — são FAIXAS
   da mesma grade. O contêiner declara as cinco linhas uma vez; cada cartão
   usa subgrid e ocupa as cinco. Assim o título mais alto define a faixa de
   título para os quatro, e a base dos botões é a mesma em todos.

   Uma fileira só de quatro colunas é o que permite isso. Em duas fileiras o
   subgrid alinharia cada dupla separadamente, que era exatamente a limitação
   apontada.

   IMAGEM: saiu dos cartões da Home. Só 3 das 4 iniciativas têm imagem no
   artefato, então a zona quebraria a matriz na quarta por construção — e não
   há imagem a inventar. A capa continua no modal e na notícia relacionada. */
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-grid {
  /* CARROSSEL. grid-auto-flow:column mantém UMA linha: quantas iniciativas
     existam, elas nunca criam segunda fileira nem aumentam a altura da seção.
     E, por continuar sendo grid com linhas definidas, o subgrid que alinha as
     cinco zonas dos cartões segue funcionando — era ele que fazia título,
     resumo, situação e ações caírem na mesma faixa em todos. */
  --adjuto-carro-gap: var(--adjuto-space-5);
  --adjuto-carro-cols: 4;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: calc(
    (100% - (var(--adjuto-carro-cols) - 1) * var(--adjuto-carro-gap)) / var(--adjuto-carro-cols)
  );
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--adjuto-carro-gap);
  align-items: stretch;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* proximity, não mandatory. Com mandatory o trilho não consegue repousar no
     fim real do scroll quando o último cartão não começa exatamente num ponto
     de snap: ele volta para o ponto anterior, e a última iniciativa nunca fica
     inteira na tela. Medido: parava em 942px em vez dos 1256px do fim. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* A rolagem é do trilho, nunca da página. */
  scrollbar-width: none;
  padding-bottom: 2px;
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-grid::-webkit-scrollbar { display: none; }
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card { scroll-snap-align: start; }
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-grid:focus-visible {
  outline: 2px solid var(--adjuto-color-primary, #114093);
  outline-offset: 4px;
}

/* Controles: atalho de mouse. O swipe do dedo e a rolagem do trackpad já
   funcionam sem eles, e por isso somem quando tudo já cabe na tela. */
:root[data-site-mode="officialCampaign"] #destaque .adjuto-carrossel__ctrls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-carrossel__ctrl {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--adjuto-color-line, rgba(12, 47, 110, 0.16));
  border-radius: 999px;
  background: #fff;
  color: var(--adjuto-color-primary, #114093);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-carrossel__ctrl:hover:not(:disabled) {
  border-color: var(--adjuto-color-primary, #114093);
  background: rgba(17, 64, 147, 0.06);
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-carrossel__ctrl:focus-visible {
  outline: 2px solid var(--adjuto-color-primary, #114093);
  outline-offset: 2px;
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-carrossel__ctrl:disabled { opacity: 0.35; cursor: default; }
:root[data-site-mode="officialCampaign"] #destaque .adjuto-carrossel__seta {
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-carrossel__ctrl--ant .adjuto-carrossel__seta { transform: translateX(2px) rotate(45deg); }
:root[data-site-mode="officialCampaign"] #destaque .adjuto-carrossel__ctrl--prox .adjuto-carrossel__seta { transform: translateX(-2px) rotate(-135deg); }
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  gap: 0.55rem;
  padding: 1.25rem 1.3rem 1.35rem;
  height: auto;
}

/* Meta: município e tema, a informação que situa antes do título. */
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__meta {
  margin: 0;
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--adjuto-campaign-accent-ink, #4d8a00);
}

/* Título: é o que o visitante deve ler primeiro. */
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__titulo {
  margin: 0;
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--adjuto-campaign-ink, #114093);
  text-wrap: balance;
}

:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__resumo {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--adjuto-color-muted, #5f6b80);
}

/* Situação: era uma pill azul chapada que competia com o título e roubava a
   leitura para a etapa administrativa. Vira metadado com rótulo — mesma
   informação oficial, sem o peso visual de um selo. */
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__status {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--adjuto-color-border, #dfe6ec);
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__status-rotulo {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--adjuto-color-muted, #5f6b80);
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__status-valor {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--adjuto-color-text, #101f39);
}

/* Ações: um botão e, quando existe cobertura 1:1, um link de texto. A
   hierarquia é deliberada — dois botões lado a lado disputariam o clique. */
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.9rem;
  flex-wrap: wrap;
  align-content: end;
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__cobertura {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--adjuto-campaign-ink, #114093);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
:root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__cobertura:hover {
  text-decoration-thickness: 2px;
}

/* Abaixo de 1100px quatro colunas espremem o título; duas ainda mantêm o
   subgrid alinhando cada dupla. Em coluna única a altura natural lê melhor,
   e aí o subgrid sai de cena. */
/* Só a quantidade de colunas VISÍVEIS muda por faixa. O trilho, o snap e o
   subgrid continuam os mesmos — no mobile o cartão passa a ocupar quase toda a
   largura, e a sobra deixa a borda do próximo à mostra, que é o que informa
   que há mais para o lado. */
@media (max-width: 1100px) {
  :root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-grid { --adjuto-carro-cols: 2; }
}
@media (max-width: 640px) {
  :root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-grid {
    --adjuto-carro-cols: 1;
    grid-auto-columns: min(86%, 340px);
  }

  /* Área de toque dos dois CTAs do card, só no mobile.

     Em 375/430 o "Entenda a iniciativa" tinha 34px de altura e o "Ver
     cobertura", por ser link de texto, 20px — abaixo do que o dedo alcança
     com segurança. O alvo cresce; o desenho não: o primário continua botão
     pill, o secundário continua link sublinhado, e a hierarquia entre os dois
     fica como está. A largura é a intrínseca de cada um, então o card não
     muda de largura — só ganha alguns pixels de altura na faixa de ações. */
  :root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__acoes > .adjuto-btn,
  :root[data-site-mode="officialCampaign"] #destaque .adjuto-featured-card__cobertura {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

:root[data-site-mode="officialCampaign"] #destaque .adjuto-card {
  background: #ffffff;
  border: 0;
  border-radius: var(--adjuto-campaign-radius);
  box-shadow: none;
  border-bottom: 5px solid var(--adjuto-campaign-accent);
}

:root[data-site-mode="officialCampaign"] #destaque .adjuto-card__eyebrow {
  color: var(--adjuto-campaign-blue);
  font-weight: 700;
}

:root[data-site-mode="officialCampaign"] #destaque .adjuto-badge--status {
  background: var(--adjuto-campaign-ink);
  color: #ffffff;
  border-radius: 4px;
}

/* ===== INSTAGRAM ===== */
.adjuto-instagram {
  position: relative;
  background: var(--adjuto-campaign-gradient-brand);
  color: var(--adjuto-campaign-on-dark);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  clip-path: polygon(0 var(--adjuto-cut, 3rem), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * var(--adjuto-cut, 3rem));
}

.adjuto-instagram__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--adjuto-space-5);
  align-items: center;
  padding-top: var(--adjuto-cut, 3rem);
}

@media (min-width: 860px) {
  .adjuto-instagram__inner {
    grid-template-columns: 1.4fr auto;
  }
}

.adjuto-instagram__handle {
  margin: 0 0 var(--adjuto-space-2);
  font-family: var(--adjuto-campaign-font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.02em;
}

.adjuto-instagram__title {
  margin: 0 0 var(--adjuto-space-2);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.02;
  color: #ffffff;
}

.adjuto-instagram__text {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
}

.adjuto-instagram__action {
  margin: 0;
}

.adjuto-btn--instagram {
  background: #ffffff;
  color: var(--adjuto-campaign-ink);
  border: 2px solid #ffffff;
  padding: 1rem 1.8rem;
  font-size: 1.05rem;
}

.adjuto-btn--instagram:hover,
.adjuto-btn--instagram:focus-visible {
  background: transparent;
  color: #ffffff;
}

/* ===== CTA fixo no celular ===== */
.adjuto-sticky-cta {
  display: none;
}

@media (max-width: 899px) {
  :root[data-site-mode="officialCampaign"] .adjuto-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: block;
    padding: 0.95rem 1rem;
    background: var(--adjuto-campaign-accent);
    color: var(--adjuto-campaign-on-accent);
    font-weight: 800;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 -6px 18px rgba(7, 29, 51, 0.25);
  }

  body.adjuto-has-sticky-cta {
    padding-bottom: 4.25rem;
  }
}

/* ===== RODAPÉ ELEITORAL ===== */
.adjuto-footer--electoral {
  background: var(--adjuto-campaign-ink-deep, #0c2f6e);
  border-top: 5px solid var(--adjuto-campaign-accent);
}

.adjuto-footer-electoral {
  display: grid;
  gap: var(--adjuto-space-6);
  padding: var(--adjuto-space-6) 0 var(--adjuto-space-5);
}

.adjuto-footer-electoral__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--adjuto-space-5);
}

.adjuto-footer-electoral__logo {
  display: block;
  width: auto;
  height: 72px;
}

.adjuto-footer-electoral__name {
  margin: 0;
  font-family: var(--adjuto-campaign-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
}

.adjuto-footer-electoral__number {
  margin: 0;
  padding: 0.35rem 1rem;
  border-radius: 6px;
  background: var(--adjuto-campaign-accent);
  color: var(--adjuto-campaign-on-accent);
  font-family: var(--adjuto-campaign-font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.2;
}

.adjuto-footer-electoral__propaganda {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.adjuto-footer-electoral__fields {
  display: grid;
  gap: var(--adjuto-space-4) var(--adjuto-space-6);
}

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

@media (min-width: 1024px) {
  .adjuto-footer-electoral__fields {
    grid-template-columns: repeat(4, 1fr);
  }
}

.adjuto-footer-electoral__field {
  display: grid;
  gap: 0.3rem;
}

.adjuto-footer-electoral__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.adjuto-footer-electoral__value {
  color: #ffffff;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.adjuto-footer-electoral__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--adjuto-space-4) var(--adjuto-space-5);
  margin: 0;
  padding: var(--adjuto-space-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
}

.adjuto-footer-electoral__links a {
  color: #ffffff;
  font-weight: 600;
}

:root[data-site-mode="officialCampaign"] .adjuto-footer__note {
  color: rgba(255, 255, 255, 0.75);
}

/* ===== Páginas internas (listagens, legais) ===== */
:root[data-site-mode="officialCampaign"] .adjuto-listing-header,
:root[data-site-mode="officialCampaign"] .adjuto-materials-header,
:root[data-site-mode="officialCampaign"] .adjuto-detail-header {
  background: var(--adjuto-campaign-gradient);
  color: #ffffff;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1.5rem));
}

:root[data-site-mode="officialCampaign"] .adjuto-listing-header h1,
:root[data-site-mode="officialCampaign"] .adjuto-materials-header h1 {
  color: #ffffff;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  text-transform: uppercase;
  font-stretch: 92%;
}

/* A matéria tem título de comprimento livre — houve um de 132 caracteres em
   produção, que a 3.4rem ocupava sete linhas e a tela inteira antes de o
   texto começar. Listagem e materiais têm títulos curtos e ficam como
   estavam; só a página de notícia recebe uma escala menor e uma medida. */
:root[data-site-mode="officialCampaign"] .adjuto-detail-header h1 {
  /* o branco vem do bloco acima, de onde esta regra saiu; sem repeti-lo aqui o
     título volta ao azul-marinho herdado e fica em 1,50:1 sobre a faixa */
  color: #ffffff;
  font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.35rem);
  font-stretch: 92%;
  line-height: 1.14;
  letter-spacing: -0.02em;
  /* caixa-alta fica para listagem e materiais, que têm títulos curtos; a
     manchete de uma matéria é lida como frase e ganha altura em versal */
  text-transform: none;
  max-width: 34ch;
  text-wrap: balance;
}

:root[data-site-mode="officialCampaign"] .adjuto-listing-header .adjuto-section__lead,
:root[data-site-mode="officialCampaign"] .adjuto-materials-header .adjuto-section__lead,
:root[data-site-mode="officialCampaign"] .adjuto-detail-header__meta,
:root[data-site-mode="officialCampaign"] .adjuto-detail-header__eyebrow {
  color: rgba(255, 255, 255, 0.88);
}

:root[data-site-mode="officialCampaign"] .adjuto-detail-header .adjuto-back-home,
:root[data-site-mode="officialCampaign"] .adjuto-listing-header .adjuto-back-home {
  color: #ffffff;
}

:root[data-site-mode="officialCampaign"] .adjuto-legal h1 {
  color: var(--adjuto-campaign-ink);
}

:root[data-site-mode="officialCampaign"] .adjuto-legal__pending {
  border-left: 4px solid var(--adjuto-campaign-accent);
  background: var(--adjuto-color-offwhite);
}

/* ===== Tela de acesso segue neutra; marcador de pendência interno ===== */
.adjuto-pending {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 1px dashed var(--adjuto-color-border-strong, #c3ccd4);
  border-radius: 6px;
  color: var(--adjuto-color-text-muted, #55636f);
  font-size: 0.9em;
  font-weight: 600;
}

/* ===== Movimento reduzido ===== */
@media (prefers-reduced-motion: reduce) {
  :root[data-site-mode="officialCampaign"] {
    scroll-behavior: auto;
  }
}

/* Crédito técnico no rodapé.
   Abaixo dos links legais e separado deles por um filete, em corpo menor e
   opacidade reduzida: as informações eleitorais obrigatórias — cargo, partido,
   CNPJ, nome jurídico e propaganda — continuam sendo o que se lê primeiro. */
.adjuto-footer-electoral__credito {
  grid-column: 1 / -1;
  /* Espaçamento enxuto: com 1,1rem de margem e 0,9rem de padding a linha
     ganhava 32px de respiro e lia como uma subseção do rodapé. Assinatura
     ocupa menos. */
  margin: 0.7rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}
/* O @ é o único trecho clicável, e herda o tom apagado do crédito: sublinhado
   discreto em vez de cor de link, para a assinatura não virar chamada. */
.adjuto-footer-electoral__credito a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.adjuto-footer-electoral__credito a:hover {
  color: #ffffff;
}
.adjuto-footer-electoral__credito a:focus-visible {
  outline: 2px solid var(--adjuto-campaign-accent, #6db800);
  outline-offset: 2px;
  border-radius: 2px;
}