/* Jornal de Brasilia, especial Eleicoes 2026 (SPA sem scroll vertical).
   Identidade medida no proprio site em 26/09/2026: fundo branco, amarelo #ffeb01,
   manchete em Open Sans 700 caixa mista, vermelho de editoria #d20000.

   AXIOMA DE DESIGN GLOBAL: nao existe rolagem vertical. A pagina inteira ocupa
   exatamente 100 da altura da viewport (100dvh), dividida em header fixo, uma
   tela (que cresce e nao transborda) e o rodape. Conteudo que nao cabe e paginado
   pelo JS, nunca rolado. Por isso body/html tem overflow hidden. */

:root {
  --jbr-amarelo: #ffeb01;
  --jbr-vermelho: #d20000;
  --jbr-editoria: #3561aa;
  --preto: #141414;
  --grafite: #2b2b2b;
  --cinza-texto: #4a4a4a;
  --cinza-fraco: #767676;
  --cinza-borda: #e4e4e4;
  --cinza-fundo: #f6f6f6;
  --branco: #ffffff;
  --apto: #0f7a3d;
  --inapto: var(--jbr-vermelho);
  --fonte-titulo: "Barlow Condensed", "Oswald", Impact, sans-serif;
  --fonte-texto: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --h-header: 56px;
  --h-rodape: 34px;
  --largura: 1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  /* Trava contra qualquer rolagem, vertical e horizontal (axioma global). */
  overflow: hidden;
}
body {
  font-family: var(--fonte-texto);
  color: var(--preto);
  background-color: var(--branco);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Layout mestre: header, tela elastica, rodape. A tela nunca transborda. */
  display: grid;
  grid-template-rows: var(--h-header) 1fr var(--h-rodape);
  height: 100dvh;
}
img { max-width: 100%; }
a { color: inherit; }

/* Marca d'agua de fundo: UNICO icone (Palacio do Buriti, enviado pelo cliente e
   recolorido pro amarelo #ffeb01), ocupando ~70% da altura e ~2/3 da largura,
   deslocado pra direita, opacidade 0.28. Fixo e nao clicavel, atras de tudo. */
.bg-brasilia {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image: url("../icones/buriti-amarelo.png");
  background-repeat: no-repeat;
  background-position: right 2vw center;   /* deslocado pra direita */
  /* Opcao B: mantem a proporcao do icone. Dimensiona pela LARGURA (~2/3 da tela);
     a altura acompanha a proporcao. O Buriti e largo (~1.42:1), entao dominar pela
     largura deixa ele bem maior que o 'auto 70%' anterior, que ficava pequeno. */
  background-size: 66% auto;
  opacity: .28;                             /* 0.18 dos outros + 10% */
}
/* O conteudo (header, app, rodape) fica acima da marca d'agua. */
.jbr, #app, .rodape { position: relative; z-index: 1; }

/* ---------- Header fixo ---------- */
.jbr {
  grid-row: 1;
  background: #fff; color: #000;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(.9rem, 3vw, 2rem);
  box-shadow: 0 1px 0 rgba(0,0,0,.16); z-index: 70;
}
.jbr__voltar {
  display: inline-flex; align-items: center; gap: .3rem; justify-self: start;
  text-decoration: none; color: #000; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: .95rem;
}
.jbr__voltar svg { width: 22px; height: 22px; }
.jbr__voltar[hidden] { display: none; }
.jbr__logo { justify-self: center; display: flex; align-items: center; }
.jbr__logo img { width: clamp(140px, 18vw, 190px); height: auto; display: block; }
.jbr__editoria-tag {
  justify-self: end; font-family: var(--fonte-titulo); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; white-space: nowrap;
  color: var(--preto); background: var(--jbr-amarelo); padding: 3px 10px; border-radius: 2px;
}
@media (max-width: 460px) {
  .jbr__editoria-tag { font-size: .68rem; padding: 2px 6px; letter-spacing: .02em; }
  .jbr__voltar span { display: none; }
}

/* ---------- Rodape fino ---------- */
.rodape {
  grid-row: 3;
  background: var(--preto); color: #9a9a9a;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 clamp(.9rem, 3vw, 2rem); font-size: .72rem;
}
.rodape .creditos-dev { color: #6f6f6f; }
@media (max-width: 620px) { .rodape .creditos-dev { display: none; } }

/* ---------- Area do SPA: a tela ocupa a linha central inteira ---------- */
#app { grid-row: 2; min-height: 0; overflow: hidden; display: flex; }
.tela {
  flex: 1; min-height: 0; width: 100%;
  max-width: var(--largura); margin: 0 auto; padding: clamp(14px, 2.4vw, 30px) clamp(16px, 3vw, 28px);
  display: flex; flex-direction: column; overflow: hidden;
}

/* ========================================================================
   TELA 1: HOME. Dois fluxos, um do lado do outro, tudo dentro da viewport.
   ======================================================================== */
.tela-home { justify-content: flex-start; gap: clamp(10px, 1.6vh, 18px); }
/* Home com titulos e descricoes centralizados (pedido do Vitor, 30/09). */
.home-hero { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; }
.home-kicker {
  font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; font-size: clamp(.72rem, 1.4vw, .86rem); color: var(--jbr-vermelho);
  margin: 0 0 .3rem;
}
.home-titulo {
  font-family: var(--fonte-titulo); text-transform: uppercase; font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: .98; margin: 0;
}
.home-titulo::after { content: ""; display: block; width: 64px; height: 6px; background: var(--jbr-vermelho); margin: .5rem auto 0; }
.home-linha { color: var(--cinza-texto); font-size: clamp(.9rem, 1.6vw, 1.05rem); margin: .8rem auto 0; max-width: 62ch; }
/* Titulos dos dois fluxos e a ajuda tambem centralizados, pra casar com o hero. */
.fluxo__titulo, .fluxo__ajuda { text-align: center; }

/* Seletor de caminho (abas): so aparece no mobile. No desktop os dois fluxos
   convivem lado a lado, entao as abas ficam ocultas. */
.home-abas { display: none; }

/* Os dois caminhos empilhados em DUAS LINHAS (nao 2 colunas): candidato em cima,
   tema embaixo, cada um ocupando a largura toda. Flex column empilha de forma
   natural e nunca sobrepoe (grid com linhas 'auto' comprimidas colapsava). */
.home-fluxos { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 18px); }
.fluxo { min-height: 0; display: flex; flex-direction: column; }
.fluxo__titulo { font-family: var(--fonte-titulo); text-transform: uppercase; font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin: 0; }
.fluxo__titulo strong { color: var(--jbr-vermelho); }
.fluxo__ajuda { color: var(--cinza-fraco); font-size: .84rem; margin: .1rem 0 .5rem; }

.temas-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.tema-item {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; background: var(--cinza-fundo); border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--jbr-amarelo); border-radius: 3px;
  padding: clamp(9px, 1.4vw, 14px) 13px; transition: border-color .15s, background .15s, transform .15s;
}
.tema-item__ico { flex: 0 0 auto; display: inline-flex; color: var(--jbr-vermelho); }
.tema-item__ico svg { width: clamp(22px, 2.4vw, 28px); height: clamp(22px, 2.4vw, 28px); display: block; }
.tema-item__nome { flex: 1 1 auto; font-family: var(--fonte-titulo); text-transform: uppercase; font-weight: 600; font-size: clamp(.95rem, 1.7vw, 1.15rem); line-height: 1.05; }
.tema-item__seta { flex: 0 0 auto; color: var(--jbr-vermelho); font-weight: 700; }
.tema-item:hover { background: #fffdf0; border-left-color: var(--jbr-vermelho); transform: translateX(2px); }

.cands-lista { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-content: start; }
/* Candidato como card vertical: foto grande em cima, nome embaixo. E o fluxo
   principal (aparece primeiro e maior). O numero fica num badge sobre a foto,
   dentro da area visivel (a foto NAO tem overflow hidden, pra nao cortar o badge). */
.cand-chip {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  text-decoration: none; background: var(--branco); border: 1px solid var(--cinza-borda);
  border-radius: 6px; padding: clamp(12px, 1.6vw, 18px) 10px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cand-chip:hover { border-color: var(--preto); box-shadow: 0 6px 16px rgba(0,0,0,.1); transform: translateY(-2px); }
.cand-chip__foto {
  position: relative; flex: 0 0 auto;
  width: clamp(72px, 8vw, 104px); height: clamp(72px, 8vw, 104px);
  border-radius: 50%; background: var(--grafite);
}
.cand-chip__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center top; }
.cand-chip__num {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  background: var(--preto); color: var(--jbr-amarelo); font-family: var(--fonte-titulo);
  font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.25; padding: 2px 12px; border-radius: 3px;
  white-space: nowrap;
}
.cand-chip__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.cand-chip__num-inline { display: none; }
.cand-chip__nome { font-family: var(--fonte-titulo); text-transform: uppercase; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.02; }
.cand-chip__pt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--jbr-vermelho); }
.cand-chip--fora { opacity: .72; }
.cand-chip--fora .cand-chip__pt { color: var(--cinza-fraco); }

/* ========================================================================
   TELAS 2 e 3: DETALHE (tema ou candidato). Topo fixo + cartoes + paginacao.
   ======================================================================== */

/* --- DETALHE REESCRITO (30/09): header fixo + corpo que ROLA com blocos
   empilhados. O axioma no-scroll segue valendo na HOME; nas telas de detalhe a
   rolagem e interna ao .detalhe-corpo (topo e barra de filtro ficam fixos, o
   conteudo rola por baixo). Pedido do Vitor/JBR. --- */
.detalhe-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--cinza-borda) transparent;
  padding-right: 6px; display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 30px);
}
.detalhe-corpo::-webkit-scrollbar { width: 8px; }
.detalhe-corpo::-webkit-scrollbar-thumb { background: var(--cinza-borda); border-radius: 4px; }

/* Cada bloco: um candidato (tela de tema) ou um tema (tela de candidato). */
.bloco { scroll-margin-top: 8px; }
.bloco__cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(10px, 1.4vh, 14px); padding-bottom: 8px; border-bottom: 2px solid var(--jbr-amarelo); }
.bloco__cabeca--tema { gap: 10px; }
.bloco__ico { flex: 0 0 auto; display: inline-flex; color: var(--jbr-vermelho); }
.bloco__ico svg { width: clamp(26px, 3vw, 34px); height: clamp(26px, 3vw, 34px); display: block; }
.bloco__foto { position: relative; flex: 0 0 auto; width: clamp(46px, 6vw, 60px); height: clamp(46px, 6vw, 60px); border-radius: 50%; overflow: hidden; background: var(--grafite); }
.bloco__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bloco__num { position: absolute; bottom: 0; right: 0; background: var(--preto); color: var(--jbr-amarelo); font-family: var(--fonte-titulo); font-weight: 700; font-size: .82rem; padding: 0 6px; border-radius: 2px; }
.bloco__id { display: flex; flex-direction: column; min-width: 0; }
.bloco__nome { font-family: var(--fonte-titulo); text-transform: uppercase; font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.05; }
.bloco__pt { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--jbr-vermelho); }
.bloco--fora { opacity: .82; }
.bloco--fora .bloco__foto img { filter: grayscale(1); }
.bloco--fora .bloco__pt { color: var(--cinza-fraco); }

/* WEB: propostas do bloco em LISTA (empilhadas, largura toda). */
.bloco__cartoes { display: flex; flex-direction: column; gap: clamp(10px, 1.4vh, 16px); }
/* No corpo que rola, o card mostra o texto INTEIRO (sem corte por altura). */
.detalhe-corpo .cartao { max-height: none; overflow: visible; }
.detalhe-corpo .cartao__resumo,
.detalhe-corpo .cartao__cita,
.detalhe-corpo .cartao__corpo,
.detalhe-corpo .cartao--destaque .cartao__resumo { overflow: visible; -webkit-mask-image: none; mask-image: none; }

/* Chip de ancora ativo (scroll-spy). */
.detalhe-topo .filtro-chip.is-ativo { background: var(--preto); color: var(--jbr-amarelo); border-color: var(--preto); }

.tela-detalhe { gap: clamp(10px, 1.6vh, 18px); }
.detalhe-topo { flex: 0 0 auto; }
.detalhe-kicker {
  font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; font-size: .74rem; color: var(--jbr-vermelho); margin: 0;
}
.detalhe-titulo {
  font-family: var(--fonte-titulo); text-transform: uppercase; font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; margin: .1rem 0 0;
  display: flex; align-items: center; gap: .5rem;
}
.detalhe-ico { flex: 0 0 auto; display: inline-flex; color: var(--jbr-vermelho); }
.detalhe-ico svg { width: clamp(28px, 3.2vw, 40px); height: clamp(28px, 3.2vw, 40px); display: block; }
.detalhe-sub {
  font-family: var(--fonte-titulo); text-transform: uppercase; font-weight: 600;
  font-size: 1rem; color: var(--grafite); margin: .5rem 0 0; letter-spacing: .02em;
}

/* Cabeca do candidato (tela 3) */
.cand-cabeca { display: flex; align-items: center; gap: 14px; }
/* Numero na urna em destaque no header FIXO: pilula amarela ao lado do nome,
   sempre visivel enquanto rola as propostas (pedido do Lucas, 30/09). */
.cand-cabeca__numero {
  display: inline-flex; align-items: center; margin-left: .6rem;
  background: var(--jbr-amarelo); color: var(--preto);
  font-family: var(--fonte-titulo); font-weight: 700; line-height: 1;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem); padding: .12em .4em; border-radius: 4px;
  vertical-align: middle;
}
.cand-cabeca__foto { position: relative; flex: 0 0 auto; width: clamp(52px, 8vw, 74px); height: clamp(52px, 8vw, 74px); border-radius: 50%; overflow: hidden; background: var(--grafite); }
.cand-cabeca__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cand-cabeca__pt { font-size: .82rem; color: var(--cinza-texto); margin: .25rem 0 0; }
.cand-cabeca__aviso { font-size: .74rem; font-weight: 700; color: var(--jbr-vermelho); margin: .2rem 0 0; }
.cand-cabeca--fora .cand-cabeca__foto { filter: grayscale(1); }

/* Barra de filtro (chips) */
.filtro-barra { display: flex; align-items: center; gap: 10px; margin-top: clamp(8px, 1.4vh, 14px); min-width: 0; }
.filtro-rotulo { font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; font-weight: 700; color: var(--cinza-fraco); flex: 0 0 auto; }
/* Os chips podem passar da largura: aqui rolam SO na horizontal (nao fere o axioma
   de nao-scroll vertical), numa unica linha, sem barra visivel. */
.filtro-chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filtro-chips::-webkit-scrollbar { display: none; }
.filtro-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fonte-texto); font-size: .8rem; font-weight: 600; cursor: pointer;
  background: var(--branco); border: 1px solid var(--cinza-borda); color: var(--grafite);
  padding: 6px 12px; border-radius: 999px; transition: all .15s ease; white-space: nowrap;
}
.filtro-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: center top; }
/* Icone de tema dentro do chip (tela do candidato): SVG em currentColor, herda a
   cor do chip (grafite normal, amarelo quando ativo). */
.filtro-chip__ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; color: var(--jbr-vermelho); }
.filtro-chip__ico svg { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.filtro-chip.is-ativo .filtro-chip__ico { color: var(--jbr-amarelo); }
.filtro-chip:hover { border-color: var(--preto); }
.filtro-chip.is-ativo { background: var(--preto); color: var(--jbr-amarelo); border-color: var(--preto); }
.filtro-chip--fora { opacity: .7; }

/* ---------- Area de cartoes: cresce e ocupa o espaco, sem transbordar ----------
   Uma coluna quando ha 1 cartao; senao, colunas iguais lado a lado (isto e grade
   de CARTOES INDEPENDENTES, cada um de um candidato/proposta, nao 2 colunas de um
   mesmo conteudo comparado, que era o que a redacao reprovou). */
/* Uma linha de cards cuja altura E a area disponivel (minmax(0,1fr)): o card
   tem altura natural, mas nunca passa dessa area (max-height:100% no .cartao). */
.cartoes { flex: 1 1 auto; min-height: 0; display: grid; gap: clamp(10px, 1.4vw, 16px);
  grid-template-rows: minmax(0, 1fr); align-items: start; }
.cartoes--1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.cartoes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartoes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartoes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartoes--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.cartao {
  min-height: 0; background: var(--branco); border: 1px solid var(--cinza-borda);
  border-radius: 5px; padding: clamp(14px, 1.8vw, 22px);
  display: flex; flex-direction: column; overflow: hidden; max-height: 100%;
}
/* Dentro do card: cabecalho, selo, referencia e botao tem tamanho fixo; so os
   blocos de texto encolhem quando falta altura. Nada sai da borda do card. */
.cartao > * { flex: none; }

/* HIERARQUIA TIPOGRAFICA POR IMPORTANCIA:
   1) resumo = a informacao principal, grande e pesada.
   2) citacao = suporte, menor, recuada, com cor mais fraca.
   3) referencia = metadado, o menor de todos. */
.cartao__resumo {
  font-weight: 600; font-size: clamp(1.02rem, 1.7vw, 1.3rem); line-height: 1.28;
  color: var(--preto); margin: 0;
}
.cartao__cita {
  margin: clamp(9px, 1.3vh, 14px) 0 0; padding: 8px 0 8px 14px;
  border-left: 3px solid var(--jbr-amarelo);
  font-size: clamp(.8rem, 1.2vw, .9rem); line-height: 1.45; color: var(--cinza-texto);
  font-style: italic;
}
/* Blocos de texto: encolhem ate caber no card. No card de proposta, a citacao
   encolhe primeiro (o resumo, mais importante, fica inteiro). */
.cartao__resumo, .cartao__cita { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.cartao:not(.cartao--destaque):not(.cartao--resumo) .cartao__resumo { flex-shrink: 0; }
/* Texto que nao coube (marcado pelo JS): termina esmaecido, sem cortar a linha
   seca. O texto integral esta no link do plano, logo abaixo. */
.is-truncado {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent);
}
/* Destaques da redacao (tela por tema e tela do candidato): o texto rola por
   dentro do proprio bloco, sem esmaecer. A pagina continua sem scroll. */
.cartao__corpo, .cartao--destaque .cartao__resumo {
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--cinza-borda) transparent;
  padding-right: 6px;
}
.cartao__corpo.is-truncado, .cartao--destaque .cartao__resumo.is-truncado {
  -webkit-mask-image: none; mask-image: none;
}
.cartao__corpo:focus-visible, .cartao--destaque .cartao__resumo:focus-visible {
  outline: 2px solid var(--jbr-vermelho); outline-offset: 2px;
}
.cartao__pag { display: block; margin-top: auto; padding-top: 10px; font-size: .72rem; color: var(--cinza-fraco); }
a.cartao__pag { text-decoration: underline; text-decoration-color: var(--cinza-borda); }
a.cartao__pag:hover { color: var(--preto); text-decoration-color: var(--jbr-vermelho); }

/* Cartao de destaque da redacao: amarelo, tipografia editorial, o mais importante. */
.cartao--destaque { border-color: var(--jbr-amarelo); border-width: 2px; background: #fffdf0; }
.cartao__selo {
  align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; background: var(--jbr-amarelo); color: var(--preto);
  padding: 3px 9px; border-radius: 2px; margin-bottom: clamp(8px, 1.2vh, 12px);
}
.cartao--destaque .cartao__resumo {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.16; text-transform: none;
}

/* Cartao-resumo (home do tema): identifica o candidato no topo. */
.cartao__cand { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(9px, 1.3vh, 13px); }
.cartao__foto { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--grafite); }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cartao__num { position: absolute; bottom: -2px; right: -2px; background: var(--preto); color: var(--jbr-amarelo); font-family: var(--fonte-titulo); font-weight: 700; font-size: .64rem; padding: 0 4px; border-radius: 2px; }
.cartao__id { display: flex; flex-direction: column; min-width: 0; }
.cartao__nome { font-family: var(--fonte-titulo); text-transform: uppercase; font-weight: 600; font-size: 1.15rem; line-height: 1; }
.cartao__pt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--jbr-vermelho); }
/* Na visao de tema, o resumo e curto e padronizado (~100 chars), entao cabe
   inteiro sem clamp agressivo e os cards ficam com altura parecida. */
.cartao--resumo .cartao__resumo { font-size: clamp(.95rem, 1.4vw, 1.1rem); font-weight: 500; line-height: 1.45; }

/* Visao de tema: todos os cards com a MESMA altura, igual a area disponivel da
   tela (a linha do grid e minmax(0,1fr)). Botao preso na base; o texto escala com
   a altura da viewport pra nao sobrar vazio grande em tela alta. */
.cartoes--tema { align-items: stretch; }
.cartoes--tema > .cartao { height: 100%; }
/* Titulo curto padronizado: peso de manchete, nunca encolhe. */
.cartoes--tema .cartao__resumo {
  font-size: clamp(1rem, 2.1vh, 1.3rem); font-weight: 600; line-height: 1.3;
  flex-shrink: 0; margin-bottom: 12px;
}
/* Texto da redacao: ocupa todo o espaco que sobra e esmaece no fim se nao couber. */
.cartao__rotulo {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cinza-fraco); margin-bottom: 6px; padding-top: 10px; border-top: 1px solid var(--cinza-borda);
}
.cartao__corpo {
  flex: 1 1 0; min-height: 0; margin: 0;
  font-size: clamp(.82rem, 1.7vh, 1rem); line-height: 1.5; color: var(--cinza-texto);
}
.cartoes--tema .cartao__abrir { margin-top: auto; flex-shrink: 0; }
.cartoes--tema .cartao__corpo + .cartao__abrir { margin-top: 14px; }
.cartao__abrir {
  margin-top: 14px; padding: 9px 12px; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--preto);
  background: var(--jbr-amarelo); border-radius: 3px;
  text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  transition: background .15s, color .15s;
}
.cartao__abrir:hover { background: var(--preto); color: var(--jbr-amarelo); }
.cartao__abrir::after { content: "\2192"; font-weight: 700; }
.cartao--fora { opacity: .82; }
.cartao--fora .cartao__foto img { filter: grayscale(1); }
.cartao--fora .cartao__pt { color: var(--cinza-fraco); }
.cartao__vazio { color: var(--cinza-fraco); font-style: italic; font-size: .92rem; margin: 0; }

/* ---------- Paginacao interna (substituto do scroll) ---------- */
.paginacao { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: clamp(6px, 1vh, 10px); }
.paginacao--unica { min-height: 4px; padding: 0; }
.paginacao__btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cinza-borda);
  background: var(--branco); color: var(--preto); font-size: 1.1rem; cursor: pointer;
  transition: all .15s ease; display: inline-flex; align-items: center; justify-content: center;
}
.paginacao__btn:hover:not(:disabled) { background: var(--preto); color: var(--jbr-amarelo); border-color: var(--preto); }
.paginacao__btn:disabled { opacity: .35; cursor: default; }
.paginacao__pontos { display: inline-flex; gap: 6px; }
.paginacao__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-borda); transition: background .15s; }
.paginacao__ponto.is-ativo { background: var(--jbr-vermelho); }
.paginacao__contador { font-family: var(--fonte-titulo); font-weight: 600; font-size: .82rem; color: var(--cinza-fraco); text-transform: uppercase; letter-spacing: .04em; }

.erro-carga { color: #7a1616; background: #fff4f4; border-left: 3px solid var(--jbr-vermelho); padding: 14px 16px; margin: auto; border-radius: 3px; }

/* ========================================================================
   RESPONSIVO. O axioma (sem scroll) vale em toda largura. Em telas estreitas,
   os cartoes empilham menos por pagina (o JS ja pagina 2 por vez) e os dois
   fluxos da home passam a ser empilhados, mas ainda dentro da viewport.
   ======================================================================== */
/* Ate ~5 cartoes numa tela so, sem paginacao. Em telas largas cabem lado a lado
   (2 a 5 colunas). Quando a largura aperta, em vez de empilhar em varias linhas
   (que traria scroll vertical, proibido), os cartoes viram uma FAIXA horizontal
   de uma linha, com swipe lateral: mantem o axioma sem-scroll-vertical e sem paginacao. */
@media (max-width: 1024px) {
  .cartoes {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; gap: 12px;
    align-items: flex-start;
  }
  .cartoes > .cartao {
    flex: 0 0 min(78%, 320px); scroll-snap-align: start; max-height: 100%;
  }
  /* Na faixa do celular, os cards por tema tambem ocupam a altura toda e iguais. */
  .cartoes.cartoes--tema { align-items: stretch; }
  .cartoes.cartoes--tema > .cartao { height: auto; }
  .cartoes .cartao__cita { font-size: .8rem; line-height: 1.4; }
  .cartoes .cartao__resumo { font-size: 1rem; }
  .cartoes--1 { justify-content: center; }
  .cartoes--1 > .cartao { flex-basis: min(100%, 640px); }
}
@media (max-width: 720px) {
  /* MOBILE, TELAS DE DETALHE: solta a trava de altura (100dvh + overflow hidden)
     que vale no desktop. No celular a PAGINA rola: os blocos (tema ou candidato)
     empilham com altura natural e as propostas de cada bloco viram carrossel
     horizontal. O header (.detalhe-topo) fica fixo no topo via sticky.
     Seletor por data-tela (setado pelo router), mais robusto que :has(). */
  body[data-tela="tema"], body[data-tela="candidato"] { height: auto; min-height: 100dvh; overflow: visible; display: block; }
  html[data-tela="tema"], html[data-tela="candidato"] { height: auto; overflow: visible; overflow-y: auto; }
  body[data-tela="tema"] #app, body[data-tela="candidato"] #app { overflow: visible; display: block; min-height: 0; }
  body[data-tela="tema"] .tela-detalhe, body[data-tela="candidato"] .tela-detalhe { overflow: visible; height: auto; display: block; }
  body[data-tela="tema"] .detalhe-topo, body[data-tela="candidato"] .detalhe-topo {
    position: sticky; top: 0; z-index: 5; background: var(--branco);
    padding: 8px 0 10px; box-shadow: 0 6px 10px -8px rgba(0,0,0,.25);
  }
  body[data-tela="tema"] .detalhe-corpo, body[data-tela="candidato"] .detalhe-corpo {
    overflow: visible; min-height: 0; display: block; padding-right: 0;
  }
  body[data-tela="tema"] .detalhe-corpo > .bloco, body[data-tela="candidato"] .detalhe-corpo > .bloco { margin-bottom: clamp(18px, 4vw, 26px); scroll-margin-top: 148px; }

  /* MOBILE: as propostas de cada bloco viram CARROSSEL horizontal (swipe); os
     blocos seguem empilhados verticalmente e a PAGINA rola. */
  .bloco__cartoes {
    display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px; padding-bottom: 6px; scrollbar-width: none;
  }
  .bloco__cartoes::-webkit-scrollbar { display: none; }
  .bloco__cartoes > .cartao { flex: 0 0 min(84%, 300px); scroll-snap-align: start; max-height: none; }
  /* Cabeca do candidato no header sticky: compacta pra sobrar tela pro conteudo. */
  .tela-detalhe .cand-cabeca__foto { width: 48px; height: 48px; }
  .tela-detalhe .cand-cabeca__pt { font-size: .74rem; }

  .tela-home { justify-content: flex-start; gap: 12px; }
  .home-hero { flex: 0 0 auto; }
  .home-linha { display: none; }

  /* Abas visiveis: alternam qual caminho aparece, um por vez, sem rolagem. */
  .home-abas { display: flex; gap: 8px; flex: 0 0 auto; }
  .home-aba {
    flex: 1; padding: 10px; cursor: pointer; font-family: var(--fonte-titulo);
    text-transform: uppercase; font-weight: 600; font-size: .92rem; letter-spacing: .03em;
    background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 3px; color: var(--grafite);
  }
  .home-aba.is-ativo { background: var(--preto); color: var(--jbr-amarelo); border-color: var(--preto); }

  /* So um fluxo por vez. O selecionado ocupa o resto da tela; sua lista rola por
     dentro se nao couber (rolagem local de uma lista, nao da pagina). */
  /* flex:1 limita o bloco ao espaco que sobra na tela (antes crescia livre e a
     lista de candidatos passava da borda). */
  .home-fluxos { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .home-fluxos .fluxo { display: none; height: 100%; min-height: 0; flex-direction: column; }
  .home-fluxos[data-fluxo="tema"] .fluxo--tema { display: flex; }
  .home-fluxos[data-fluxo="cand"] .fluxo--cand { display: flex; }
  .fluxo__titulo { display: none; }
  .fluxo__ajuda { margin: 0 0 8px; }
  .temas-lista, .cands-lista { overflow-y: auto; min-height: 0; scrollbar-width: none; }
  .temas-lista { grid-template-columns: 1fr 1fr; }
  .temas-lista::-webkit-scrollbar, .cands-lista::-webkit-scrollbar { display: none; }

  /* Candidatos no celular: uma coluna de chips deitados (foto a esquerda), pra
     os 5 caberem na altura e sem celula orfa (5 em 2 colunas deixaria 1 sozinho). */
  .cands-lista { grid-template-columns: 1fr; gap: 8px; }
  .cand-chip { flex-direction: row; text-align: left; gap: 12px; padding: 7px 12px; }
  .cand-chip__foto { width: 46px; height: 46px; }
  .cand-chip__num { display: none; }
  .cand-chip__txt { gap: 0; }
  .cand-chip__nome { font-size: 1.05rem; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
  .cand-chip__num-inline {
    display: inline-block; background: var(--preto); color: var(--jbr-amarelo);
    font-family: var(--fonte-titulo); font-weight: 700; font-size: .82rem;
    line-height: 1.2; padding: 1px 6px; border-radius: 3px; flex: 0 0 auto;
  }
}
@media (max-width: 460px) {
  .temas-lista { grid-template-columns: 1fr; }
}

/* Viewport nao muito alta (laptops ~768/700): a home com candidatos grandes +
   os dois blocos empilhados nao cabe com o hero cheio. Compacta o hero e some
   com os textos de apoio (o axioma sem-scroll vem antes do texto auxiliar). */
@media (max-height: 860px) {
  .home-linha { display: none; }
  .home-fluxos .fluxo__ajuda { display: none; }
  .home-titulo { font-size: clamp(1.7rem, 4vw, 2.6rem); }
}

/* Telas muito baixas (paisagem no celular): encolhe o hero pra nunca cortar. */
@media (max-height: 520px) {
  .home-titulo { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .home-linha { display: none; }
  .cartao__cita { -webkit-line-clamp: 2; }
}