/* ============================================================
   Chapa 2 · RK NOSSA RAIZ — hotsite da campanha
   Paleta e tipografia derivadas da peca-mae aprovada
   (wind door 502:2, arquivo Figma enilPq1pWiADTP7wxMQ0mN).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Cores amostradas da arte aprovada */
  --verde: #0e5c2f;
  --verde-fundo: #0b4a26; /* um degrau abaixo, para faixas alternadas */
  --verde-claro: #166035; /* marca d agua e linhas sobre o verde */
  --verde-vivo: #2fa84f;
  --laranja: #ff7a3d; /* pilula MEU SINDICO E */
  --laranja-numero: #f26f21; /* exclusivo do numero da chapa */
  --laranja-faixa: #ff5c21; /* reguas, faixa do slogan e filetes */
  --laranja-texto: #c2410c; /* laranja legivel em corpo pequeno sobre creme */
  --creme: #f6efe2;
  --creme-linha: #e3d8c4;
  --branco: #ffffff;
  --tinta: #14261c; /* texto longo sobre creme */
  --tinta-suave: #4a5b50;

  /* Tipografia oficial da campanha, a mesma do impresso: Proxima Nova e so ela.
     A marca NAO usa Proxima Nova Condensed em aplicacao nenhuma (Alan, 08/09/2026).
     O que distingue rotulo de corpo e caixa alta + tracking, nao a largura da fonte.
     Kit Adobe Fonts wqg1xtl, carregado no <head> do index.html.
     A pilha de reserva entra se o Typekit nao responder. */
  --fonte: "proxima-nova", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-rotulo: var(--fonte);

  /* Escala tipografica — base 18px por causa do publico idoso */
  --t-corpo: 1.125rem; /* 18px */
  --t-corpo-g: 1.25rem; /* 20px */
  --t-mini: 0.9375rem; /* 15px, piso absoluto */
  --t-rotulo: 0.9375rem; /* 15px: piso de rotulo, publico idoso */
  --t-h3: clamp(1.375rem, 4.5vw, 1.75rem);
  --t-h2: clamp(1.75rem, 6.5vw, 2.75rem);
  --t-display: clamp(2.75rem, 13vw, 5.5rem);

  /* Ritmo de 4/8px */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 1rem;
  --e4: 1.5rem;
  --e5: 2rem;
  --e6: 3rem;
  --e7: 4.5rem;

  --raio: 14px;
  --raio-g: 22px;
  --largura: 62rem;
  --largura-texto: 38rem; /* ~65 caracteres por linha */

  --sombra: 0 2px 4px rgba(11, 40, 22, 0.08), 0 8px 24px rgba(11, 40, 22, 0.1);
  --sombra-alta: 0 4px 8px rgba(11, 40, 22, 0.12), 0 16px 40px rgba(11, 40, 22, 0.16);

  --transicao: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-topo: 100;
  --z-barra: 90;
  --z-folha: 200;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--creme);
  overflow-x: hidden;
}
img {
  max-width: 100%;
  /* sem isto o atributo height do HTML estica a imagem quando so a largura e definida */
  height: auto;
  display: block;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 4px;
}
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 3. Layout ---------- */
.envelope {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}
.envelope--texto {
  width: min(100% - 2.5rem, var(--largura-texto));
  margin-inline: auto;
}
.secao {
  padding-block: var(--e7);
  position: relative;
}
.secao--creme {
  background: var(--creme);
  color: var(--tinta);
}
.secao--verde {
  background: var(--verde);
  color: var(--creme);
}
.secao--verde-escuro {
  background: var(--verde-fundo);
  color: var(--creme);
}

/* Rotulo de secao: barra laranja + texto condensado */
.rotulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fonte-rotulo);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--e3);
  color: var(--laranja-texto);
}
.secao--verde .rotulo,
.secao--verde-escuro .rotulo {
  color: var(--laranja);
}
.rotulo::before {
  content: "";
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.titulo-secao {
  font-size: var(--t-h2);
  font-weight: 900;
  margin-bottom: var(--e4);
  max-width: 20ch;
}
.intro-secao {
  font-size: var(--t-corpo-g);
  max-width: var(--largura-texto);
  margin-bottom: var(--e5);
}
.secao--verde .intro-secao,
.secao--verde-escuro .intro-secao {
  color: #dbe7dd;
}

/* ---------- 4. Barra de topo ---------- */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-topo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0.625rem clamp(1rem, 4vw, 2rem);
  padding-top: max(0.625rem, env(safe-area-inset-top));
  background: rgba(11, 74, 38, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 122, 61, 0.28);
  transform: translateY(0);
  transition: transform var(--transicao);
}
.topo[data-escondido="sim"] {
  transform: translateY(-105%);
}
.topo__marca {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  min-height: 44px; /* alvo de toque */
}
.topo__marca img {
  height: 38px;
  width: auto;
}
.topo__data {
  font-family: var(--fonte-rotulo);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--creme);
  white-space: nowrap;
}
.topo__data b {
  color: var(--laranja);
}
.botao-indice {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 0 0.875rem;
  border-radius: 999px;
  border: 1.5px solid rgba(246, 239, 226, 0.4);
  color: var(--creme);
  font-weight: 700;
  font-size: var(--t-rotulo);
  transition: background var(--transicao), border-color var(--transicao);
}
.botao-indice:hover,
.botao-indice:focus-visible {
  background: rgba(246, 239, 226, 0.12);
  border-color: var(--laranja);
}

/* Progresso de leitura */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--laranja);
  width: 0;
  z-index: calc(var(--z-topo) + 1);
  transition: width 90ms linear;
}

/* ---------- 5. Indice (folha lateral) ---------- */
/* Ocupa a tela inteira, em verde, com os itens grandes: o indice e uma
   tela de navegacao, nao uma gaveta. Vale para celular e para desktop. */
.indice {
  position: fixed;
  inset: 0;
  z-index: var(--z-folha);
  background: var(--verde);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao);
}
.indice[data-aberto="sim"] {
  opacity: 1;
  pointer-events: auto;
}
.indice__folha {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(var(--e4), env(safe-area-inset-top)) clamp(1.25rem, 5vw, 4rem)
    max(var(--e4), env(safe-area-inset-bottom));
  overflow-y: auto;
  transform: translateY(2%);
  transition: transform var(--transicao);
}
.indice[data-aberto="sim"] .indice__folha {
  transform: none;
}
.indice__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e3);
  margin-bottom: var(--e2);
  border-bottom: 1px solid rgba(246, 239, 226, 0.25);
  flex: none;
}
.indice__topo strong {
  font-family: var(--fonte-rotulo);
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laranja);
}
.indice__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  /* distribui os oito itens pela altura que sobrar */
  flex: 1;
  display: grid;
  grid-auto-rows: 1fr;
  align-content: stretch;
}
.indice__lista a {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.5rem);
  height: 100%;
  min-height: 56px;
  padding: 0.25rem 0;
  text-decoration: none;
  color: var(--creme);
  font-size: clamp(1.5rem, 6.5vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  border-bottom: 1px solid rgba(246, 239, 226, 0.15);
  transition: color var(--transicao), padding-left var(--transicao);
}
.indice__lista li:last-child a {
  border-bottom: 0;
}
.indice__lista a:hover,
.indice__lista a:focus-visible {
  color: var(--laranja);
  padding-left: 0.5rem;
}
.indice__lista .num {
  flex: none;
  font-size: clamp(0.875rem, 2.6vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--laranja);
  align-self: center;
  /* largura fixa para os numeros alinharem a coluna dos titulos */
  width: 2.25em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 64rem) {
  .indice__lista {
    max-width: 46rem;
    margin-inline: auto;
    width: 100%;
  }
  .indice__topo {
    max-width: 46rem;
    margin-inline: auto;
    width: 100%;
  }
}

/* ---------- 6. Capa ----------
   Replica do no 536:2 (adesivo perfurado 450x300 mm). Todas as medidas sao
   porcentagem da arte SEM sangria (5314,96 x 3543,31 px = 3:2 exato), tiradas
   direto do Figma. As fotos sao os assets oficiais do proprio no.
   Tipografia em cqw, entao tudo escala junto com a largura do palco.
   NAO recompor a olho: se precisar mexer, voltar ao no e recalcular. */
.capa {
  position: relative;
  background: var(--verde);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: 56px; /* barra fixa */
}

.palco {
  position: relative;
  container-type: inline-size;
  /* a peca inteira tem que caber: se a tela for baixa, a largura recua
     ate a arte 3:2 caber na altura, e o verde preenche o resto */
  width: min(100%, calc((100dvh - 56px) * 1.5));
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  color: var(--branco);
}

/* Marca d agua: PAULO ALVES em contorno, repetido */
.palco::before {
  content: "PAULO ALVES PAULO ALVES PAULO ALVES PAULO ALVES PAULO ALVES PAULO ALVES PAULO ALVES PAULO ALVES PAULO ALVES PAULO ALVES PAULO ALVES PAULO ALVES";
  position: absolute;
  inset: -4% -18% 12% -18%;
  z-index: 0;
  font-size: 11cqw;
  font-weight: 900;
  font-style: italic;
  line-height: 1.06;
  letter-spacing: 0.01em;
  word-spacing: 0.15em;
  color: transparent;
  -webkit-text-stroke: 0.18cqw rgba(246, 239, 226, 0.13);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}


/* numero: o frame do Figma vai de x 68,874% e sangra para cima */
.p-numero {
  position: absolute;
  /* centralizado: a logo saiu do hero e o numero passa a ser o unico
     elemento do topo. O top folgado impede o 2 de correr por baixo da
     barra fixa, que tem 56 px. */
  left: 50%;
  translate: -50% 0;
  right: auto;
  top: 4%;
  margin: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  line-height: 1;
}
.p-numero span {
  font-size: 4cqw;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--branco);
}
.p-numero b {
  /* italico com long shadow em degraus, como na peca */
  font-size: 20cqw;
  font-weight: 900;
  font-style: italic;
  line-height: 0.82;
  color: var(--laranja-numero);
  text-shadow: 0.18cqw 0.18cqw 0 rgba(9, 48, 25, 0.42), 0.36cqw 0.36cqw 0 rgba(9, 48, 25, 0.42),
    0.54cqw 0.54cqw 0 rgba(9, 48, 25, 0.41), 0.72cqw 0.72cqw 0 rgba(9, 48, 25, 0.4),
    0.9cqw 0.9cqw 0 rgba(9, 48, 25, 0.39), 1.08cqw 1.08cqw 0 rgba(9, 48, 25, 0.38),
    1.26cqw 1.26cqw 0 rgba(9, 48, 25, 0.36), 1.44cqw 1.44cqw 0 rgba(9, 48, 25, 0.34),
    1.62cqw 1.62cqw 0 rgba(9, 48, 25, 0.32), 1.8cqw 1.8cqw 0 rgba(9, 48, 25, 0.3),
    1.98cqw 1.98cqw 0 rgba(9, 48, 25, 0.28), 2.16cqw 2.16cqw 0 rgba(9, 48, 25, 0.26),
    2.34cqw 2.34cqw 0 rgba(9, 48, 25, 0.24), 2.52cqw 2.52cqw 0 rgba(9, 48, 25, 0.21),
    2.7cqw 2.7cqw 0 rgba(9, 48, 25, 0.19), 2.88cqw 2.88cqw 0 rgba(9, 48, 25, 0.17),
    3.06cqw 3.06cqw 0 rgba(9, 48, 25, 0.15), 3.24cqw 3.24cqw 0 rgba(9, 48, 25, 0.13),
    3.42cqw 3.42cqw 0 rgba(9, 48, 25, 0.11), 3.6cqw 3.6cqw 0 rgba(9, 48, 25, 0.09),
    3.78cqw 3.78cqw 0 rgba(9, 48, 25, 0.07), 3.96cqw 3.96cqw 0 rgba(9, 48, 25, 0.05);
}

/* reguas: y 32,334% e 71,667% · espessura 0,8% da altura */
.p-regua {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.53cqw;
  background: var(--laranja-faixa);
  z-index: 2;
}
.p-regua--alta {
  top: 32.334%;
}
.p-regua--baixa {
  top: 71.667%;
}

/* fotos: cada uma na caixa exata do no */
.p-fotos {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.p-fotos img {
  position: absolute;
  height: auto;
}
.p-zelia {
  left: 21.516%;
  top: 27.053%;
  width: 32.136%;
}
.p-narciso {
  /* 54,985% e nao os 75,985% que a caixa do no sugere: o fill da imagem
     dentro do retangulo tem deslocamento proprio, entao o PNG exportado nao
     casa com a caixa. Valor conferido pelo Alan no navegador, 08/09/2026. */
  left: 54.985%;
  top: 27.053%;
  width: 22.334%;
}
.p-paulo {
  left: 31.506%;
  top: 23.384%;
  width: 35.109%;
}
/* dissolve a base das figuras no verde, como o "Fade" do arquivo */
.p-fade {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  bottom: 0;
  z-index: 3;
  background: linear-gradient(to bottom, rgba(14, 92, 47, 0) 0%, rgba(14, 92, 47, 0.85) 62%, var(--verde) 88%);
  pointer-events: none;
}

/* subsindicos: Frame 1 em x 9,738% e Frame 2 em x 76,738%, ambos y 39,612% */
.p-sub {
  position: absolute;
  top: 39.612%;
  margin: 0;
  z-index: 5;
  line-height: 1;
}
.p-sub--esq {
  left: 9.738%;
  width: 12.643%;
  text-align: left;
}
.p-sub--dir {
  left: 76.738%;
  width: 18.457%;
  text-align: right;
}
.p-sub b {
  display: block;
  font-size: 4cqw;
  font-weight: 900;
  font-style: italic;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--creme);
}
.p-sub > span {
  display: block;
  margin-top: 0.5em;
  font-size: 1.5cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--creme);
}
/* regua sob o cargo: 400 de 5314,96 = 7,526% */
.p-sub::after {
  content: "";
  position: absolute;
  bottom: -1.1cqw;
  width: 7.526%;
  min-width: 3.2cqw;
  height: 0.38cqw;
  background: var(--laranja-faixa);
}
.p-sub--esq::after {
  left: 2.5%;
}
.p-sub--dir::after {
  right: 2.5%;
}

/* nome: x 17,038% · y 72,463% · w 67,583% */
.p-nome {
  position: absolute;
  left: 17.038%;
  top: 72.463%;
  width: 67.583%;
  margin: 0;
  z-index: 6;
  text-align: center;
  font-size: 9.9cqw;
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--branco);
}

/* selo: x 39,127% · y 62,048% · w 25,400% */
.p-selo {
  position: absolute;
  left: 39.127%;
  top: 62.048%;
  width: 25.4%;
  z-index: 7;
  /* flex em linha, nao grade: com grade cada letra da animacao virava uma linha */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  background: var(--laranja);
  color: var(--branco);
  border-radius: 999px;
  padding: 1.1cqw 0;
  font-size: 2.6cqw;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* faixa do slogan: y 91% · h 10% */
.p-slogan {
  position: absolute;
  /* a tarja atravessa a tela inteira em qualquer dispositivo, mesmo quando o
     palco recua para caber na altura */
  left: calc(50% - 50vw);
  right: auto;
  width: 100vw;
  top: 91%;
  bottom: -1%;
  margin: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: var(--laranja-faixa);
  color: #12291b;
  text-align: center;
  font-size: 1.85cqw;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- 6b. Capa em retrato ----------
   A peca e paisagem. Num celular em pe, escalar 3:2 para a tela inteira
   cortaria os nomes das pontas. Entao a mesma peca se reorganiza numa coluna
   que preenche a altura: topo, regua, cena e faixa do slogan.

   Na cena tudo divide a mesma area de grade. As fotos ancoram na BASE, os
   nomes dos subsindicos ancoram no TOPO (ficam acima das cabecas) e o selo
   com o nome do sindico fecham por baixo, sobre as figuras.
   Corpos de texto conferidos pelo Alan no iPhone SE, 08/09/2026. */
@media (max-aspect-ratio: 1/1) {
  .capa {
    padding-top: 0;
  }
  .palco {
    aspect-ratio: auto;
    width: 100%;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "topo"
      "regua"
      "cena"
      "slogan";
    padding-top: 56px;
  }
  .palco::before {
    inset: 0;
    font-size: 20cqw;
    -webkit-text-stroke-width: 0.3cqw;
  }
  .p-numero,
  .p-regua,
  .p-fotos,
  .p-sub,
  .p-nome,
  .p-selo,
  .p-slogan {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
  }

  .p-numero {
    grid-area: topo;
    justify-self: center;
    align-self: start;
    translate: none;
    margin: 6cqw 0 0;
    gap: 1.5cqw;
  }
  .p-numero span {
    font-size: 8cqw;
  }
  .p-numero b {
    font-size: 34cqw;
  }
  .p-regua--alta {
    grid-area: regua;
    height: 0.9cqw;
    margin-top: 2cqw;
  }
  .p-regua--baixa {
    display: none;
  }

  /* --- cena: fotos na base, nomes no topo --- */
  .p-fotos {
    grid-area: cena;
    position: relative;
    display: block;
    min-height: 58cqw;
  }
  .p-fotos img {
    position: absolute;
    /* o top da regra de paisagem continuava valendo e anulava o bottom:
       sem zerar aqui, as figuras nao desciam ate a base */
    top: auto;
    bottom: 0;
  }
  .p-zelia {
    /* conferido pelo Alan no iPhone SE, 08/09/2026 */
    left: 0;
    width: 63%;
  }
  .p-narciso {
    /* conferido pelo Alan no iPhone SE, 08/09/2026 */
    left: 56%;
    width: 42%;
  }
  .p-paulo {
    /* 55 px em 375 = 14,7%. Medido pelo Alan no iPhone SE, 08/09/2026. */
    left: 14.7%;
    width: 70%;
    z-index: 2;
  }
  .p-fade {
    top: 46%;
  }

  /* nomes dos subsindicos: topo da cena, acima das cabecas */
  .p-sub {
    grid-area: cena;
    /* ancorado na base e empurrado para cima pela altura da propria figura,
       para o nome ficar logo acima da cabeca de cada um */
    align-self: end;
    z-index: 4;
    padding: 0 5cqw;
  }
  .p-sub--esq {
    justify-self: start;
    text-align: left;
    margin-bottom: 88cqw;
  }
  .p-sub--dir {
    justify-self: end;
    text-align: right;
    margin-bottom: 86cqw;
  }
  .p-sub b {
    font-size: 4.6cqw;
  }
  .p-sub > span {
    font-size: 2.9cqw;
  }
  .p-sub::after {
    bottom: -1.8cqw;
    width: 10cqw;
    height: 0.7cqw;
  }
  .p-sub--esq::after {
    left: 5cqw;
  }
  .p-sub--dir::after {
    right: 5cqw;
  }

  /* selo e nome fecham a cena por baixo, sobre as figuras */
  .p-selo {
    grid-area: cena;
    align-self: end;
    justify-self: center;
    z-index: 5;
    width: 62cqw;
    padding: 0.4cqw 0.4cqw;
    font-size: 3.6cqw;
    margin-bottom: 12cqw;
  }
  .p-nome {
    grid-area: cena;
    align-self: end;
    z-index: 6;
    width: 100%;
    font-size: 10cqw;
  }

  .p-slogan {
    grid-area: slogan;
    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    bottom: auto;
    padding: 3.6cqw 4cqw;
    font-size: 4.2cqw;
  }
}

/* ---------- 7. Faixas de secao ---------- */
.faixa-slogan {
  margin: 0;
  background: var(--laranja-faixa);
  color: #12291b;
  text-align: center;
  padding: clamp(0.75rem, 2.4vw, 1.25rem) 1rem;
  font-size: clamp(0.9375rem, 3.4vw, 1.625rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- 8. Cartoes genericos ---------- */
.cartao {
  background: var(--branco);
  border-radius: var(--raio-g);
  padding: var(--e4);
  box-shadow: var(--sombra);
}
.secao--verde .cartao,
.secao--verde-escuro .cartao {
  background: rgba(246, 239, 226, 0.07);
  border: 1px solid rgba(246, 239, 226, 0.16);
  box-shadow: none;
  color: var(--creme);
}

/* ---------- 9. Trio (secao A chapa) ---------- */
.trio {
  display: grid;
  gap: var(--e4);
  grid-template-columns: 1fr;
}
.candidato {
  background: var(--branco);
  border-radius: var(--raio-g);
  padding: var(--e4);
  box-shadow: var(--sombra);
  border-left: 6px solid var(--laranja);
}
.candidato--principal {
  grid-column: 1 / -1;
}
/* Foto ao lado do nome, bio na largura inteira do cartao:
   com a bio na coluna estreita a linha caia para ~25 caracteres. */
.candidato__topo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e3);
}
.candidato__foto {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid var(--laranja);
  background: var(--creme-linha);
}
.candidato__cargo {
  font-family: var(--fonte-rotulo);
  font-weight: 700;
  font-size: var(--t-rotulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laranja-texto);
  margin-bottom: 2px;
}
.candidato__nome {
  font-size: var(--t-h3);
  font-weight: 900;
  margin-bottom: 0;
}
.candidato__desde {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
}
/* Marcos da trajetoria, mandados pelo proprio candidato depois da ingestao.
   Ficam fora da bio, que e verbatim do documento da chapa. Tres linhas, cada
   uma com o icone do marco correspondente na secao 03. */
.candidato__marcos {
  list-style: none;
  margin: 0 0 var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--creme);
  border-radius: var(--raio);
}
.candidato__marcos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--t-mini);
  font-weight: 700;
  line-height: 1.45;
  color: var(--tinta);
}
.candidato__marcos li + li {
  border-top: 1px solid var(--creme-linha);
}
.candidato__marcos svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--laranja-texto);
}
.candidato__bio {
  font-size: var(--t-corpo);
  color: var(--tinta);
}

/* ---------- 10. Linha do tempo (realizacoes e escritura) ---------- */
.linha {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--e4);
}
.linha::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--laranja), rgba(255, 122, 61, 0.15));
}
.linha__item {
  position: relative;
  padding-left: 3.5rem;
}
.linha__marca {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--laranja);
  color: #3d1504;
  box-shadow: 0 0 0 6px var(--creme);
}
.secao--verde .linha__marca,
.secao--verde-escuro .linha__marca {
  box-shadow: 0 0 0 6px var(--verde);
}
.secao--verde-escuro .linha__marca {
  box-shadow: 0 0 0 6px var(--verde-fundo);
}
.linha__marca svg {
  width: 22px;
  height: 22px;
}
.linha__ano {
  font-family: var(--fonte-rotulo);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  color: var(--laranja-texto);
  text-transform: uppercase;
}
.secao--verde .linha__ano,
.secao--verde-escuro .linha__ano {
  color: var(--laranja);
}
.linha__titulo {
  font-size: var(--t-h3);
  font-weight: 900;
  margin-bottom: var(--e2);
}

/* ---------- 11. Numeros (contagem animada) ---------- */
.numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
  margin-bottom: var(--e6);
}
.numero {
  background: rgba(246, 239, 226, 0.07);
  border: 1px solid rgba(246, 239, 226, 0.18);
  border-radius: var(--raio-g);
  padding: var(--e4) var(--e3);
  text-align: center;
}
.numero__valor {
  display: block;
  font-size: clamp(2.5rem, 11vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
  color: var(--laranja);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.numero__rotulo {
  display: block;
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--creme);
  margin-top: var(--e2);
  text-wrap: balance;
}

/* ---------- 12. Propostas ---------- */
/* Sem rolagem lateral: o chip escondido fora da tela nao se anuncia, e o
   publico nao vai adivinhar que arrasta. As cinco frentes quebram em linhas
   e ficam todas visiveis de uma vez. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.chip {
  min-height: 48px;
  padding: 0 1.125rem;
  border-radius: 999px;
  border: 2px solid var(--creme-linha);
  background: var(--branco);
  font-weight: 700;
  font-size: var(--t-rotulo);
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.chip[aria-pressed="true"] {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--creme);
}
.grade-propostas {
  display: grid;
  gap: var(--e3);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
.proposta {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--e3);
  align-items: center;
  background: var(--branco);
  border-radius: var(--raio);
  padding: var(--e3);
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.proposta[hidden] {
  display: none;
}
.proposta__icone {
  width: 56px;
  height: 56px;
  border-radius: var(--raio);
  display: grid;
  place-items: center;
  background: var(--verde);
  color: var(--laranja);
  flex: none;
}
.proposta__icone svg {
  width: 30px;
  height: 30px;
}
.proposta__texto {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}
.grupo-propostas {
  font-family: var(--fonte-rotulo);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--laranja-texto);
  margin: var(--e5) 0 var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.grupo-propostas::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--creme-linha);
}
.grupo-propostas[hidden] {
  display: none;
}

/* ---------- 13. Citacao ---------- */
/* Faixa de largura total: sangra os dois lados da tela, sem margem lateral
   nem inferior. So o topo respira, para separar do texto que vem antes.
   O conteudo interno continua limitado a coluna de leitura e centrado, senao
   a linha estica demais em tela grande. */
.citacao {
  position: relative;
  background: var(--verde);
  color: var(--creme);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: var(--e5) 0;
  border-radius: 0;
  border-left: 0;
  border-top: 6px solid var(--laranja);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--e5) 1.25rem;
}
/* Fora do celular a faixa fica centrada. No celular segue alinhada a esquerda,
   porque texto longo centrado perde a regua de leitura. */
@media (min-width: 48rem) {
  .citacao {
    align-items: center;
    text-align: center;
  }
  /* corpo grande e centrado pede linha curta: em 34ch a citacao da TERRACAP
     fecha em 3 linhas e a do fecho em 2, sem virar bloco largo */
  .citacao p,
  .citacao cite {
    max-width: 34ch;
  }
}
.citacao p {
  font-size: clamp(1.25rem, 4.5vw, 1.625rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}
.citacao cite {
  display: block;
  margin-top: var(--e3);
  font-size: var(--t-mini);
  font-style: normal;
  color: #c9dbcd;
}
.destaque-creme {
  background: var(--branco);
  color: var(--tinta);
  border-radius: var(--raio-g);
  padding: var(--e4);
  border-left: 6px solid var(--laranja);
  box-shadow: var(--sombra);
  margin-block: var(--e4);
}

/* ---------- 14. Texto longo ---------- */
.texto-longo {
  font-size: var(--t-corpo-g);
  line-height: 1.7;
}
.texto-longo h3 {
  font-size: var(--t-h3);
  margin: var(--e5) 0 var(--e3);
}
.assinatura {
  font-family: var(--fonte-rotulo);
  font-size: 1.375rem;
  font-weight: 700;
  font-style: italic;
  color: var(--laranja-texto);
  margin-top: var(--e4);
}
.secao--verde .assinatura {
  color: var(--laranja);
}

/* ---------- 15. Pessoas (conselhos) ---------- */
.abas {
  display: flex;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.aba {
  flex: 1;
  min-height: 52px;
  border-radius: var(--raio);
  border: 2px solid rgba(246, 239, 226, 0.28);
  color: var(--creme);
  font-weight: 700;
  font-size: var(--t-rotulo);
  transition: background var(--transicao), border-color var(--transicao);
}
.aba[aria-selected="true"] {
  background: var(--laranja);
  border-color: var(--laranja);
  color: #3d1504;
}
.grade-pessoas {
  display: grid;
  gap: var(--e3);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pessoa {
  background: rgba(246, 239, 226, 0.07);
  border: 1px solid rgba(246, 239, 226, 0.16);
  border-radius: var(--raio-g);
  padding: var(--e4);
}
.pessoa__topo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e3);
}
.pessoa__foto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--laranja);
  background: var(--verde-claro);
  flex: none;
}
.pessoa__nome {
  font-size: 1.1875rem;
  font-weight: 900;
  line-height: 1.2;
  /* e um <p> e herdava 1em de margem, abrindo um vao ate o "condomino desde" */
  margin-bottom: 0;
}
.pessoa__desde {
  font-size: var(--t-mini);
  color: #c9dbcd;
  margin-top: 2px;
}
.pessoa__bio {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #e7efe8;
}
.selo-presidente {
  display: inline-block;
  background: var(--laranja);
  color: #3d1504;
  font-family: var(--fonte-rotulo);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}

/* ---------- 16. Documentos ---------- */
.documentos {
  display: grid;
  gap: var(--e3);
  grid-template-columns: 1fr;
}
/* No celular a acao (PDF ou "em breve") desce para baixo do texto; a 3a coluna
   so existe de 600 px para cima. Antes disso o texto ficava numa coluna de
   ~10 caracteres. */
.documento {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas:
    "icone texto"
    "icone acao";
  gap: var(--e2) var(--e3);
  align-items: center;
  background: var(--branco);
  border-radius: var(--raio);
  padding: var(--e3);
  box-shadow: var(--sombra);
  text-decoration: none;
  min-height: 76px;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.documento[aria-disabled="true"] {
  opacity: 0.62;
  box-shadow: none;
  border: 1px dashed var(--creme-linha);
  background: transparent;
  cursor: default;
}
.documento__icone {
  grid-area: icone;
  width: 52px;
  height: 52px;
  border-radius: var(--raio);
  background: var(--verde);
  color: var(--laranja);
  display: grid;
  place-items: center;
}
.documento__icone svg {
  /* a cor vai no svg, nao na caixa: `.documento span` (cinza do texto) pesa
     mais que `.documento__icone` e deixava o icone quase invisivel no verde */
  color: var(--laranja);
  width: 26px;
  height: 26px;
}
.documento b {
  display: block;
  font-size: 1.0625rem;
}
.documento span {
  font-size: var(--t-mini);
  color: var(--tinta-suave);
}
.documento__texto {
  grid-area: texto;
}
.documento__abrir,
.etiqueta-pendente {
  grid-area: acao;
  justify-self: start;
}
@media (min-width: 600px) {
  .documento {
    grid-template-columns: 52px 1fr auto;
    grid-template-areas: "icone texto acao";
    gap: var(--e3);
  }
  .documento__abrir,
  .etiqueta-pendente {
    justify-self: end;
  }
}
.documento__abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-rotulo);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verde);
  white-space: nowrap;
}
.documento__abrir svg {
  width: 18px;
  height: 18px;
}
.etiqueta-pendente {
  font-family: var(--fonte-rotulo);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laranja-texto);
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* ---------- 17. Eleicao ---------- */
.eleicao {
  display: grid;
  gap: var(--e3);
  grid-template-columns: 1fr;
}
.eleicao__item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--e3);
  align-items: center;
  background: rgba(246, 239, 226, 0.07);
  border: 1px solid rgba(246, 239, 226, 0.18);
  border-radius: var(--raio);
  padding: var(--e3);
  min-height: 84px;
}
.eleicao__item svg {
  width: 28px;
  height: 28px;
  color: var(--laranja);
}
/* Rotulo em linha propria: com os dados da comissao preenchidos, o valor ficou
   longo e correr colado no rotulo atrapalhava a leitura. */
.eleicao__rotulo {
  display: block;
  margin-bottom: 2px;
  font-family: var(--fonte-rotulo);
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9dbcd;
}
.eleicao__valor {
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.2;
}
.eleicao__valor.pendente {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #b9cbbd;
  font-style: italic;
}

/* ---------- 18. Compartilhar ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 56px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.botao svg {
  width: 24px;
  height: 24px;
  flex: none;
}
.botao--zap {
  background: #1faa53;
  color: #fff;
  box-shadow: var(--sombra);
}
.botao--zap:hover {
  background: #1a9448;
}
.botao--contorno {
  border: 2px solid currentColor;
  color: var(--creme);
}
.botao--contorno:hover {
  background: rgba(246, 239, 226, 0.12);
}
.botao:active {
  transform: scale(0.97);
}

.barra-zap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-barra);
  padding: 0.625rem clamp(1rem, 4vw, 2rem);
  padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
  background: rgba(11, 74, 38, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 122, 61, 0.3);
  transform: translateY(120%);
  transition: transform var(--transicao);
}
.barra-zap[data-visivel="sim"] {
  transform: translateY(0);
}
.barra-zap .botao {
  width: 100%;
}

/* ---------- 19. Rodape ---------- */
.rodape {
  background: var(--verde-fundo);
  color: var(--creme);
  text-align: center;
  padding-block: var(--e6);
  padding-bottom: calc(var(--e6) + 84px); /* espaco da barra fixa */
}
.rodape__arvore {
  font-family: var(--fonte-rotulo);
  font-size: clamp(1.125rem, 4.5vw, 1.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  max-width: 30rem;
  margin: 0 auto var(--e5);
  color: var(--creme);
  text-wrap: balance;
}
/* Fecho do site: a assinatura da chapa e a arvore da lamina 4 do folder.
   Entrou no lugar do lockup em 10/09/2026, a pedido do Dr. Paulo Alves. */
.rodape__assinatura {
  font-weight: 900;
  font-size: clamp(1.25rem, 5.5vw, 1.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--creme);
  margin: 0 auto var(--e4);
  padding-top: var(--e4);
  width: fit-content;
  max-width: 100%;
  border-top: 3px solid var(--laranja-faixa);
  text-wrap: balance;
}
.rodape__raiz {
  margin: 0 auto var(--e5);
  width: min(100%, 26rem);
}
.rodape__raiz img {
  width: 100%;
  height: auto;
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
.rodape__raiz figcaption {
  margin-top: var(--e3);
  font-size: var(--t-mini);
  font-weight: 700;
  font-style: italic;
  color: #b9cbbd;
}
.rodape__meta {
  font-size: var(--t-mini);
  color: #b9cbbd;
  line-height: 1.7;
}

/* ---------- 20. Movimento ---------- */
/* Escondido so quando o JS confirmou que esta rodando. Se o script falhar,
   quebrar ou for bloqueado, .com-js nunca entra e a pagina abre inteira. */
.com-js .revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.com-js .revelar[data-visto="sim"] {
  opacity: 1;
  transform: none;
}
/* A capa e uma imagem unica: entra com um fade simples, sem coreografia. */
.capa__arte {
  animation: surgir 620ms ease-out both;
}
@keyframes surgir {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revelar {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 21. Telas maiores ---------- */
@media (min-width: 40rem) {
  .trio {
    grid-template-columns: 1fr 1fr;
  }
  .grade-propostas {
    grid-template-columns: 1fr 1fr;
  }
  .grade-pessoas {
    grid-template-columns: 1fr 1fr;
  }
  .documentos {
    grid-template-columns: 1fr 1fr;
  }
  .numeros {
    grid-template-columns: repeat(4, 1fr);
  }
  .eleicao {
    grid-template-columns: 1fr 1fr;
  }
  .candidato__foto {
    width: 104px;
    height: 104px;
  }
}
@media (min-width: 64rem) {
  .secao {
    padding-block: 6rem;
  }
  .grade-pessoas {
    grid-template-columns: repeat(3, 1fr);
  }
  .barra-zap {
    display: none;
  }
  .rodape {
    padding-bottom: var(--e6);
  }
  .proposta:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
  }
  .documento:not([aria-disabled="true"]):hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
  }
}

/* ---------- 22. Impressao ---------- */
@media print {
  .topo,
  .barra-zap,
  .indice,
  .progresso,
  .filtros,
  .abas {
    display: none !important;
  }
  .secao--verde,
  .secao--verde-escuro,
  .capa {
    background: #fff !important;
    color: #000 !important;
  }
  .revelar {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- 23. Abertura ----------
   Só existe quando o <html> recebe a classe "abrindo", decidida no head.
   Sem JS, a classe nunca entra e o site abre direto: a abertura não pode
   virar uma porta trancada. */
.abertura {
  display: none;
}
.abrindo .abertura {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--verde);
  /* rede de seguranca: se o JS morrer no meio, a abertura sai sozinha */
  animation: abertura-escape 0s 6s forwards;
}
@keyframes abertura-escape {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.abertura[data-saindo="sim"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 520ms ease, visibility 0s 520ms;
}
.abertura__miolo {
  text-align: center;
  padding-inline: 1.5rem;
}
.abertura__marca {
  width: min(56vw, 260px);
  margin: 0 auto clamp(1.5rem, 5vw, 2.5rem);
  opacity: 0.95;
}
/* Número gigante com máscara: o preenchimento laranja sobe conforme carrega */
.abertura__num {
  margin: 0;
  font-size: clamp(5rem, 30vw, 16rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.abertura__num span {
  background-image: linear-gradient(
    to top,
    var(--laranja-numero) var(--preenchido, 0%),
    rgba(246, 239, 226, 0.26) var(--preenchido, 0%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.abertura__num i {
  font-style: italic;
  font-size: 0.34em;
  color: var(--laranja);
  vertical-align: super;
  margin-left: 0.08em;
}
.abertura__msg {
  margin: clamp(1rem, 4vw, 1.75rem) 0 0;
  font-size: clamp(0.9375rem, 3.6vw, 1.375rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--creme);
}
/* Barra de carregamento ocupando a largura inteira da tela */
.abertura__barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: rgba(246, 239, 226, 0.16);
}
.abertura__barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--laranja-faixa);
  transition: width 120ms linear;
}

/* ---------- 24. Entrada do hero ----------
   Sequencia: Paulo, depois Zelia, depois Narciso. Cada bloco de texto sobe
   caractere a caractere. Só roda quando o JS marca "hero-anima": sem JS o
   hero aparece inteiro e parado, como deve. */
.hero-anima .p-paulo,
.hero-anima .p-zelia,
.hero-anima .p-narciso {
  opacity: 0;
  animation: figura-sobe 720ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-anima .p-paulo {
  animation-delay: 60ms;
}
.hero-anima .p-zelia {
  animation-delay: 620ms;
}
.hero-anima .p-narciso {
  animation-delay: 1180ms;
}
@keyframes figura-sobe {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.letra {
  display: inline-block;
  white-space: pre;
}
.hero-anima .letra {
  opacity: 0;
  transform: translateY(0.7em);
  animation: letra-sobe 460ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--base, 0ms) + var(--i, 0) * 28ms);
}
@keyframes letra-sobe {
  to {
    opacity: 1;
    transform: none;
  }
}
/* o selo e uma pilula: ela cresce inteira, as letras sobem dentro */
.hero-anima .p-selo {
  opacity: 0;
  animation: figura-sobe 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 260ms forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-anima .p-paulo,
  .hero-anima .p-zelia,
  .hero-anima .p-narciso,
  .hero-anima .p-selo,
  .hero-anima .letra {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 25. Chamada do Conselho Fiscal ----------
   Marinho e dourado de propósito: o Conselho Fiscal é órgão independente,
   com eleição própria, e não pode ser lido como parte da Chapa 02. */
.fiscal-chamada {
  background: #0a2c5e;
  color: #dbe5f0;
}
.fiscal-chamada .rotulo {
  color: #c6912f;
}
.fiscal-chamada .titulo-secao {
  color: #fff;
}
.fiscal-chamada .intro-secao {
  color: #dbe5f0;
}
.fiscal-chamada .intro-secao strong {
  color: #fff;
}
.botao--fiscal {
  background: #c6912f;
  color: #0a2c5e;
  box-shadow: var(--sombra);
}
.botao--fiscal:hover {
  background: #b3822a;
}

/* A animacao quebra o texto em letras inline-block. Sem isto o navegador passa
   a poder quebrar linha ENTRE letras, e "ZÉLIA LIMA" desce uma letra por linha.
   O espaco entre as palavras continua fora do span, entao a quebra certa
   (entre Zélia e Lima) segue funcionando. */
/* Só a palavra leva nowrap. Aplicar nas letras colapsava o span do espaco
   e o texto saia grudado ("PAULOALVES"). O espaco vive num .letra com
   white-space: pre, que preserva a largura dele. */
/* A animacao quebra o nome em letras inline-block, e sem isto o navegador
   pode quebrar linha ENTRE letras ("SANTA" / "NA"). Quem quebra a linha e o
   <br> do markup, entao o nowrap nao gruda as duas linhas.
   NAO mexer no display: o espacamento dos titulos ja esta aprovado. */
.p-sub b {
  white-space: nowrap;
}

/* Os cargos nao sao quebrados em letras: entram inteiros, em fade up, logo
   depois do nome de cada um. */
.hero-anima .p-sub > span {
  opacity: 0;
  animation: figura-sobe 520ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-anima .p-sub--esq > span {
  animation-delay: 1240ms;
}
.hero-anima .p-sub--dir > span {
  animation-delay: 1800ms;
}