/* ===========================================================================
   Stephanes 2210 · seções da home
   Ordem na página: hero → quem é → o que chegou → propostas → como votar →
   grupo da cidade → jingle e vídeo → faixa de imprensa → rodapé.
   Seções alternam papel / gelo / navy; o navy é o chão da marca, não o escuro
   genérico de site. Ritmo vertical único: clamp(64px, 8vw, 112px).
   =========================================================================== */

section { position: relative; }
.sec { padding: clamp(64px, 8vw, 112px) 0; }
.sec-papel { background: var(--papel); }
.sec-gelo { background: var(--gelo-fundo); }
.sec-navy { background: var(--azul-institucional); color: var(--gelo); }
.sec-navy h2, .sec-navy h3 { color: #fff; }
.sec-navy .lead, .sec-navy p { color: rgba(255,255,255,.84); }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--navy-fundo); color: #fff; overflow: hidden; }
.hero .foto { position: absolute; inset: 0; z-index: 0; }
.hero .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 30%; }
/* o véu navy existe só na coluna do texto e morre antes do Stephanes */
.hero .veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(270deg, rgba(11,36,80,.96) 0%, rgba(11,36,80,.92) 38%, rgba(11,36,80,.72) 50%, rgba(11,36,80,.28) 62%, rgba(11,36,80,0) 74%),
    linear-gradient(180deg, rgba(11,36,80,.35) 0%, rgba(11,36,80,0) 30%, rgba(11,36,80,0) 70%, rgba(11,36,80,.6) 100%);
}
.hero .in {
  position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 84px); min-height: calc(100svh - 70px);
  align-items: center;
}
.hero .texto { grid-column: 2; }
.hero .rot { color: var(--amarelo-civico); }
.hero .voto { margin: 20px 0 8px; }
.hero .voto .frase {
  display: block; color: #fff; font-size: clamp(26px, 3.2vw, 46px); line-height: 1; letter-spacing: 0;
}
/* o 2210 como objeto gráfico: Lemon Milk no amarelo cívico, a faixa do logotipo
   arqueando por cima, como no lockup oficial. Os quatro dígitos entram um a um,
   como quem digita na urna. */
.hero .numero {
  position: relative; display: inline-block; margin-top: 6px; line-height: .9;
  font-family: var(--fonte-titulo); font-weight: 700; color: var(--amarelo-civico);
  font-size: clamp(104px, 13.5vw, 184px); letter-spacing: -.035em;
  text-shadow: 0 8px 26px rgba(11,36,80,.34);
}
/* mesmo princípio da revelação: sem JS o número já está lá, inteiro */
.hero .numero .d { display: inline-block; }
.js .hero .numero .d { opacity: 0; transform: translateY(.18em); transition: opacity .32s var(--mola), transform .42s var(--mola); }
.js .hero .numero.digitado .d { opacity: 1; transform: none; }
.hero .numero.digitado .d:nth-child(1) { transition-delay: .15s; }
.hero .numero.digitado .d:nth-child(2) { transition-delay: .42s; }
.hero .numero.digitado .d:nth-child(3) { transition-delay: .69s; }
.hero .numero.digitado .d:nth-child(4) { transition-delay: .96s; }
.hero .sub {
  font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.6; margin: 20px 0 0; max-width: 50ch;
  color: rgba(255,255,255,.92); font-weight: 500;
}
.hero .grupo-hero {
  margin-top: 22px; padding: 16px 16px 14px; background: #fff; color: var(--tinta);
  border-radius: var(--r-m); box-shadow: 0 16px 40px rgba(11,36,80,.34);
}
.hero .grupo-hero-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--verde-araucaria); margin-bottom: 10px;
}
.hero .ctas { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; margin-top: 22px; }
/* segunda ação como link, não como segundo botão: dois botões lado a lado
   dividem a atenção e nenhum dos dois vira o caminho principal */
.hero .link-hero {
  font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  border-bottom: 2px solid var(--amarelo-civico); padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.hero .link-hero:hover { color: var(--amarelo-civico); }
.hero .chao { position: relative; z-index: 2; }

@media (max-width: 920px) {
  /* no mobile a foto vira uma faixa no topo, não o fundo inteiro:
     fundo inteiro numa seção alta dava zoom extremo no rosto */
  .hero .foto, .hero .veu { bottom: auto; height: min(132vw, 540px); }
  .hero .foto img { object-position: 26% 22%; }
  .hero .veu {
    background: linear-gradient(180deg, rgba(11,36,80,.08) 0%, rgba(11,36,80,.32) 46%, rgba(11,36,80,.86) 76%, var(--navy-fundo) 97%);
  }
  .hero .in { grid-template-columns: 1fr; min-height: 0; padding-top: min(88vw, 360px); }
  .hero .texto { grid-column: 1; }
  .hero .numero { font-size: clamp(96px, 26vw, 180px); }
  .hero .ctas { gap: 14px 22px; }
  .hero .ctas .btn { flex: 1 1 100%; }
}

/* ── quem é ─────────────────────────────────────────────────────────────── */
/* :not(.trajetoria): o grid de duas colunas é só do bloco foto + texto;
   sem a exceção, a linha do tempo cai na coluna da foto e fica espremida */
.quem .in:not(.trajetoria) { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
/* o retrato de estúdio vem com fundo cinza neutro; sem tratamento ele boia
   dentro da seção branca como recorte colado. A vinheta navy nas bordas
   transforma esse cinza em chão da marca e deixa o rosto intacto. */
.quem .retrato {
  position: relative; border-radius: var(--r-g); overflow: hidden;
  background: var(--azul-institucional); box-shadow: var(--s3); isolation: isolate;
}
.quem .retrato img { width: 100%; display: block; aspect-ratio: 4 / 4.5; object-fit: cover; object-position: 50% 12%; }
.quem .retrato::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(78% 62% at 50% 34%, rgba(18,54,107,0) 46%, rgba(18,54,107,.62) 100%);
}
.quem .retrato .selo-abrasca {
  position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 14px;
  background: rgba(11,36,80,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; border-radius: var(--r-m); padding: 14px 18px;
}
.quem .retrato .selo-abrasca b { flex: none; font-family: var(--fonte-titulo); font-size: 26px; line-height: 1; color: var(--amarelo-civico); }
.quem .retrato .selo-abrasca span { display: block; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.86); }
.quem h2 { margin-top: 0; }
.quem .lead { margin-top: 18px; color: var(--tinta-70); }
.quem .lead + .lead { margin-top: 14px; }
.quem .lead b { color: var(--azul-institucional); font-weight: 700; }
.quem .links { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 26px; }
.quem .links a { font-weight: 800; color: var(--azul-republica); text-decoration: none; border-bottom: 2px solid var(--amarelo-civico); padding-bottom: 2px; }
.quem .links a:hover { color: var(--azul-institucional); border-color: var(--azul-institucional); }
/* :not(.trajetoria) na regra base pesa mais que .quem .in; sem repetir a
   exceção aqui, o celular continuava em duas colunas e a seção quebrava */
@media (max-width: 920px) {
  .quem .in:not(.trajetoria) { grid-template-columns: 1fr; }
  .quem .retrato { max-width: 520px; }
  .quem .retrato img { aspect-ratio: 4 / 4.2; }
}

/* trajetória: uma linha do tempo de verdade, a ordem carrega informação */
.trajetoria { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--linha); }
.trajetoria ol { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.trajetoria ol::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 2px; background: var(--faixa); }
.trajetoria li { position: relative; padding-top: 30px; }
.trajetoria li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--azul-institucional); box-shadow: 0 0 0 4px var(--papel), 0 0 0 6px var(--azul-parana);
}
.trajetoria b { display: block; font-family: var(--fonte-titulo); font-size: 20px; color: var(--azul-republica); }
.trajetoria strong { display: block; font-size: 15px; margin-top: 6px; color: var(--azul-institucional); }
.trajetoria span { display: block; font-size: 13.5px; line-height: 1.45; margin-top: 4px; color: var(--tinta-50); }
@media (max-width: 920px) {
  .trajetoria ol { grid-template-columns: 1fr; gap: 22px; padding-left: 30px; }
  .trajetoria ol::before { left: 7px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .trajetoria li { padding-top: 0; }
  .trajetoria li::before { left: -30px; top: 4px; }
}

/* ── o que chegou no Paraná ─────────────────────────────────────────────── */
.chegou .cabeca { max-width: 780px; }
.chegou .cabeca h2 { margin-top: 12px; }
.chegou .topo {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 52px); align-items: start;
  margin: clamp(26px, 3.2vw, 40px) 0 clamp(28px, 3.4vw, 40px);
  padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--linha);
}
/* o texto começa na altura da maiúscula do número, não na base dele */
.chegou .topo .quali { padding-top: .35em; }
.chegou .num-gigante { font-family: var(--fonte-titulo); font-weight: 700; line-height: .95; font-size: clamp(48px, 6.2vw, 88px); letter-spacing: -.025em; color: var(--azul-republica); white-space: nowrap; }
.chegou .quali { color: var(--tinta-70); max-width: 52ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; }
.chegou .quali b { color: var(--azul-institucional); }
.obras3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.obra {
  position: relative; overflow: hidden; border-radius: var(--r-m); background: var(--azul-institucional); color: #fff;
  padding: clamp(22px, 2.4vw, 30px); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--s2); transition: transform .35s var(--mola), box-shadow .35s var(--mola); isolation: isolate;
}
.obra::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 100% 0%, rgba(46,103,184,.65), transparent 60%), linear-gradient(180deg, var(--azul-republica), var(--azul-institucional));
}
/* sem listra decorativa no topo de cada card: a faixa da marca é divisor de
   seção, e repetida três vezes em fila vira enfeite, não assinatura */
.obra:hover { transform: translateY(-4px); box-shadow: var(--s3); }
.obra .area { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--amarelo-civico); }
.obra h3 { color: #fff; margin-top: 10px; font-size: clamp(22px, 2.1vw, 30px); }
.obra .objeto { margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.82); }
.obra .valor { margin-top: 18px; font-family: var(--fonte-titulo); font-size: clamp(28px, 2.6vw, 36px); color: var(--amarelo-civico); line-height: 1; }
.obra .ano { font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 6px; }
@media (max-width: 920px) { .chegou .topo { grid-template-columns: 1fr; align-items: start; gap: 14px; } .obras3 { grid-template-columns: 1fr; } .obra { min-height: 0; } }

.tabela-emendas { margin-top: clamp(24px, 3vw, 36px); border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--papel); overflow: hidden; }
.tabela-emendas summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 800; color: var(--azul-institucional);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tabela-emendas summary::-webkit-details-marker { display: none; }
.tabela-emendas summary::after { content: "+"; font-family: var(--fonte-titulo); font-size: 22px; color: var(--azul-republica); }
.tabela-emendas[open] summary::after { content: "–"; }
.tabela-emendas .rolagem { overflow-x: auto; }
.tabela-emendas table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.tabela-emendas th { text-align: left; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-50); padding: 10px 22px; border-top: 1px solid var(--linha); background: var(--gelo-fundo); }
.tabela-emendas td { padding: 11px 22px; border-top: 1px solid var(--linha); color: var(--tinta); }
.tabela-emendas td.v { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; text-align: right; }
.tabela-emendas th.v { text-align: right; }
.tabela-emendas .fonte { padding: 14px 22px 18px; font-size: 12.5px; color: var(--tinta-50); line-height: 1.5; border-top: 1px solid var(--linha); }
.cta-linha { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── propostas ──────────────────────────────────────────────────────────── */
/* título à esquerda, promessa de conferência à direita: usa a largura toda
   em vez de deixar meia seção vazia ao lado de um bloco de 760px */
.propostas .cabeca {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(16px, 3vw, 56px); align-items: end;
  padding-bottom: clamp(22px, 2.6vw, 32px); border-bottom: 1px solid var(--linha);
}
.propostas h2 { margin-top: 0; max-width: 14ch; }
.propostas .lead { margin: 0; color: var(--tinta-70); max-width: 46ch; }
@media (max-width: 820px) { .propostas .cabeca { grid-template-columns: 1fr; align-items: start; } .propostas h2 { max-width: none; } }
.propostas .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(28px, 3.6vw, 44px); }
.proposta {
  background: var(--papel); border-radius: var(--r-m); padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--s1);
  border: 1px solid var(--linha); display: flex; flex-direction: column; gap: 10px; transition: transform .35s var(--mola), box-shadow .35s var(--mola);
}
.proposta:hover { transform: translateY(-4px); box-shadow: var(--s3); }
.proposta .pl { font-family: var(--fonte-titulo); font-size: 13px; letter-spacing: .08em; color: var(--azul-republica); display: inline-flex; align-items: center; gap: 8px; }
.proposta .pl::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--amarelo-civico); }
.proposta h3 { font-size: clamp(18px, 1.6vw, 22px); }
.proposta p { font-size: 15px; line-height: 1.55; color: var(--tinta-70); }
.proposta .status { margin-top: auto; padding-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--verde-araucaria); display: inline-flex; gap: 8px; align-items: center; }
.proposta .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-brasil); }
/* card de fechamento: são 8 cards, e a última linha de três ficaria com um item
   só e dois terços de vão ao lado. O último ocupa duas colunas e vira faixa
   horizontal, com rótulo e título à esquerda e o texto à direita, fechando a
   linha exata. Em duas colunas e no celular volta a ser card comum, porque ali
   a contagem par já fecha sozinha. */
@media (min-width: 921px) {
  .propostas .grade > .proposta.larga {
    grid-column: span 2;
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap: clamp(24px, 3vw, 44px); row-gap: 10px; align-items: start;
  }
  .propostas .proposta.larga .pl { grid-column: 1; grid-row: 1; }
  .propostas .proposta.larga h3 { grid-column: 1; grid-row: 2; max-width: 15ch; }
  .propostas .proposta.larga p:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; font-size: 16px; max-width: 56ch; }
  .propostas .proposta.larga .status { grid-column: 2; grid-row: 3; margin-top: 0; padding-top: 6px; }
}
/* rede de segurança se a contagem de cards mudar e sobrar um item na última linha */
.propostas .grade > .proposta:last-child:nth-child(3n + 1):not(.larga) { grid-column: 2 / 3; }
@media (max-width: 920px) {
  .propostas .grade { grid-template-columns: 1fr 1fr; }
  .propostas .grade > .proposta:last-child:nth-child(3n + 1):not(.larga) { grid-column: auto; }
  .propostas .grade > .proposta:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .propostas .grade { grid-template-columns: 1fr; }
  .propostas .grade > .proposta:last-child:nth-child(odd) { grid-column: auto; }
}

/* ── grupo da cidade ────────────────────────────────────────────────────── */
.grupos .in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.grupos h2 { margin-top: 12px; max-width: 16ch; }
.grupos .lead { color: var(--tinta-70); margin-top: 14px; max-width: 46ch; line-height: 1.6; }
.grupos .seletor-grupo { margin-top: 22px; }
.grupos .regioes { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.grupos .regioes a {
  font-size: 13px; font-weight: 700; text-decoration: none; color: var(--azul-institucional);
  background: var(--gelo-fundo); border: 1px solid var(--linha); border-radius: 999px; padding: 8px 14px; transition: background-color .2s, color .2s;
}
.grupos .regioes a:hover { background: var(--azul-institucional); color: #fff; }
.grupos .santinho { position: relative; justify-self: end; width: min(38vw, 430px); }
.grupos .santinho img { border-radius: 18px; box-shadow: var(--s3); }
.grupos .santinho figcaption { margin-top: 14px; font-size: 14px; color: var(--tinta-70); line-height: 1.55; }
.grupos .santinho figcaption a { display: inline-block; font-weight: 800; color: var(--azul-republica); white-space: nowrap; }
@media (max-width: 920px) { .grupos .in { grid-template-columns: 1fr; } .grupos .santinho { justify-self: start; width: min(100%, 430px); } }

/* ── jingle e vídeo ─────────────────────────────────────────────────────── */
.jingle .in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.jingle h2 { margin-top: 0; }
.jingle .lead { margin-top: 14px; color: var(--tinta-70); max-width: 40ch; }
.jingle .player { margin-top: 24px; }
.jingle .video { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--s3); background: var(--navy-fundo); aspect-ratio: 16 / 9; }
.jingle .video video, .jingle .video img { width: 100%; height: 100%; object-fit: cover; }
.jingle .video picture { display: block; width: 100%; height: 100%; }
.jingle .video .capa { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; padding: 0; }
.jingle .video .capa img { transition: transform .6s var(--mola); }
.jingle .video .capa:hover img { transform: scale(1.03); }
.jingle .video .capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,36,80,0) 40%, rgba(11,36,80,.7) 100%); }
.jingle .video .play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: var(--amarelo-civico); display: grid; place-items: center; box-shadow: var(--glow-forte);
}
.jingle .video .play::before { content: ""; margin-left: 6px; width: 26px; height: 32px; background: var(--azul-institucional); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.jingle .video .legenda { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; color: #fff; font-weight: 700; font-size: 15px; text-align: left; }
.jingle .video .legenda small { display: block; font-weight: 500; font-size: 12.5px; color: rgba(255,255,255,.74); margin-top: 2px; }
@media (max-width: 920px) { .jingle .in { grid-template-columns: 1fr; } }

/* ── faixa de imprensa ──────────────────────────────────────────────────── */
.faixa-imp { background: var(--gelo-fundo); padding: 22px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.faixa-imp .in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.faixa-imp p { font-size: 15px; color: var(--tinta-70); }
.faixa-imp p b { color: var(--azul-institucional); }
.faixa-imp a { font-weight: 800; color: var(--azul-republica); text-decoration: none; white-space: nowrap; border-bottom: 2px solid var(--amarelo-civico); }

/* ── vozes: o que dizem nos comentários ─────────────────────────────────── */
/* Duas esteiras que correm em sentidos opostos, o padrão de marquee de prova
   social. O cabeçalho fica dentro do .in, as esteiras sangram até a borda
   porque o corte na lateral é o que diz "tem mais, isso é uma amostra".
   Sem JS a esteira vira uma faixa rolável no dedo, nunca uma fila parada
   com buraco no meio: a animação só é autorizada sob .js, do mesmo jeito
   que a revelação ao rolar. */
.vozes { overflow: hidden; }
.vozes .cabeca { max-width: 720px; }
.vozes .cabeca h2 { margin-top: 12px; }
.vozes .cabeca .lead { margin-top: 14px; color: var(--tinta-70); }
.vozes .esteiras { margin-top: clamp(26px, 3.4vw, 40px); display: grid; gap: 16px; }
.vozes .esteira {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vozes .esteira::-webkit-scrollbar { display: none; }
.vozes .pista { display: flex; width: max-content; }
.vozes .fita { display: flex; gap: 16px; padding-right: 16px; flex: none; }
.js .vozes .esteira { overflow: hidden; }
.js .vozes .pista { animation: vozes-correr var(--dur, 64s) linear infinite; }
.js .vozes .esteira.inverso .pista { animation-direction: reverse; }
/* a fita é duplicada pelo JS, então metade da pista é uma cópia: andar 50%
   devolve o quadro exatamente igual ao de partida e o laço não tem emenda */
@keyframes vozes-correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* parar embaixo do dedo ou do foco: quem quer ler precisa poder ler */
.js .vozes .esteira:hover .pista,
.js .vozes .esteira:focus-within .pista { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .js .vozes .esteira { overflow-x: auto; }
  .js .vozes .pista { animation: none; }
}

.voz {
  flex: none; width: 316px; background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r-m); box-shadow: var(--s1); padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.voz .topo { display: flex; align-items: center; gap: 11px; }
/* monograma no lugar do avatar: a foto de perfil do Instagram vem de uma URL
   assinada que expira em horas, e a cara de um apoiador não é nossa para
   hospedar. A inicial resolve o reconhecimento sem nenhum dos dois problemas */
.voz .ini {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-size: 15px; line-height: 1; color: #fff; background: var(--azul-republica);
}
.voz .quem { min-width: 0; }
.voz .quem b { display: block; font-size: 13.5px; font-weight: 800; color: var(--azul-institucional); display: flex; align-items: center; gap: 5px; }
.voz .quem span { display: block; font-size: 12px; color: var(--tinta-50); }
.voz .selo { flex: none; width: 13px; height: 13px; color: var(--azul-parana); }
.voz p { font-size: 14.5px; line-height: 1.5; color: var(--tinta-70); }
.voz .fonte { margin-top: auto; padding-top: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-50); text-decoration: none; }
a.voz { text-decoration: none; transition: transform .3s var(--mola), box-shadow .3s var(--mola), border-color .2s; }
a.voz:hover { transform: translateY(-3px); box-shadow: var(--s2); border-color: rgba(24,74,147,.28); }
a.voz:hover .fonte { color: var(--azul-republica); }
a.voz:focus-visible { outline: 3px solid var(--azul-republica); outline-offset: 3px; }
.vozes .nota { margin-top: clamp(20px, 2.4vw, 28px); font-size: 12.5px; line-height: 1.55; color: var(--tinta-50); max-width: 62ch; }
@media (max-width: 600px) { .voz { width: 268px; } }