/* Portal politicore.com.br (POL-125) · design system do Figma "politicore-web".
   Tokens com os nomes do Figma (cor/*, espaco/*, raio/*, degrade/*, sombra/*, layout/*) e componentes da página "1 · Componentes".
   Classes com prefixo pc- para não colidir com o Tailwind das páginas antigas.
   Ícones: Font Awesome Free 6.4.0 (X 6.4.2), CC BY 4.0, https://fontawesome.com/license/free (inline nas páginas).
   Breakpoints: celular até 767; tablet 768 a 1199 (sidebar a partir de 1024; menu em gaveta até 1099 para o menu de 6 itens não estourar);
   computador a partir de 1200 (container de 1200 px cabe sem margem lateral a partir de 1232). */

/* ===================== 1. Tokens ===================== */
:root {
  /* cor/* */
  --cor-navy-900: #141238;
  --cor-navy-800: #1E1B4B;
  --cor-azul-600: #2851DE;
  --cor-azul-700: #1D3FB8;
  --cor-acento-500: #4C7BF4;
  --cor-acento-400: #7FA2F9;
  --cor-acento-300: #A4B8FC;
  --cor-azul-200: #C7D6FE;
  --cor-azul-100: #E0E9FF;
  --cor-azul-50: #F0F4FF;
  --cor-branco: #FFFFFF;
  --cor-texto-suave: #55597A;

  /* espaco/* */
  --espaco-0: 0;
  --espaco-4: 4px;
  --espaco-8: 8px;
  --espaco-12: 12px;
  --espaco-16: 16px;
  --espaco-20: 20px;
  --espaco-24: 24px;
  --espaco-32: 32px;
  --espaco-40: 40px;
  --espaco-48: 48px;
  --espaco-64: 64px;
  --espaco-80: 80px;
  --espaco-96: 96px;

  /* raio/* */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 24px;
  --raio-cartao: 32px;
  --raio-print: 42px;
  --raio-foto: 48px;
  --raio-pilula: 999px;

  /* sombra/* (navy/900 com transparência) */
  --sombra-cartao: 0 8px 24px rgba(20, 18, 56, .08);
  --sombra-destaque: 0 27px 60px rgba(20, 18, 56, .22);
  --sombra-flutuante: 0 20.63px 45.84px rgba(20, 18, 56, .18);

  /* degrade/* */
  --degrade-passos: linear-gradient(90deg, #E0E9FF 0%, #2851DE 50%, #141238 100%);
  --degrade-azul-suave: linear-gradient(90deg, #F0F4FF 0%, #C7D6FE 100%);
  --degrade-navy-azul: linear-gradient(90deg, #141238 0%, #1E1B4B 60%, #2851DE 100%);
  --degrade-filete: linear-gradient(90deg, #2851DE 0%, #A4B8FC 100%);
  --degrade-sobreposicao-foto: linear-gradient(90deg, rgba(20, 18, 56, .92) 0%, rgba(20, 18, 56, .55) 100%);
  --degrade-passo-1: linear-gradient(135deg, #F0F4FF 0%, #C7D6FE 100%);
  --degrade-passo-2: linear-gradient(135deg, #4C7BF4 0%, #2851DE 100%);
  --degrade-passo-3: linear-gradient(135deg, #1E1B4B 0%, #141238 100%);

  /* layout/* (Desktop 1440; o modo Celular 390 fica nas media queries) */
  --layout-container: 1200px;
  --layout-margem: 120px;
  --layout-coluna: 78px;
  --layout-gutter: 24px;
  --layout-principal: 792px;
  --layout-sidebar: 384px;

  --fonte: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ===================== 2. Base ===================== */
.pc-pagina, .pc-pagina *, .pc-pagina *::before, .pc-pagina *::after,
.pc-cab, .pc-cab *, .pc-rod, .pc-rod *, .pc-gaveta, .pc-gaveta * { box-sizing: border-box; }
body.pc-pagina { margin: 0; background: var(--cor-branco); color: var(--cor-navy-800); font-family: var(--fonte); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.pc-pagina, .pc-cab, .pc-rod, .pc-gaveta) :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) { margin: 0; }
:where(.pc-pagina, .pc-cab, .pc-rod, .pc-gaveta) :where(ul, ol) { padding: 0; list-style: none; }
:where(.pc-pagina, .pc-cab, .pc-rod, .pc-gaveta) :where(img) { display: block; max-width: 100%; }
:where(.pc-pagina, .pc-cab, .pc-rod, .pc-gaveta) :where(a) { color: inherit; text-decoration: none; }
:where(.pc-pagina) :where(button) { font: inherit; color: inherit; }
.pc-ic { width: 1em; height: 1em; flex: none; fill: currentColor; display: inline-block; vertical-align: middle; }
.pc-so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pc-pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--cor-navy-900); color: var(--cor-branco); padding: 10px 16px; border-radius: var(--raio-sm); font: 700 15px/1 var(--fonte); }
.pc-pular:focus { top: 8px; }
/* foco visível em tudo que é clicável */
.pc-pagina a:focus-visible, .pc-pagina button:focus-visible, .pc-pagina summary:focus-visible, .pc-pagina input:focus-visible, .pc-pagina select:focus-visible, .pc-pagina textarea:focus-visible,
.pc-cab a:focus-visible, .pc-cab button:focus-visible, .pc-rod a:focus-visible, .pc-gaveta a:focus-visible, .pc-gaveta button:focus-visible {
  outline: 3px solid var(--cor-acento-500); outline-offset: 2px; border-radius: 6px;
}
.pc-rod a:focus-visible, .pc-topo a:focus-visible { outline-color: var(--cor-acento-300); }

/* ===================== 3. Estilos de texto ===================== */
.pc-t-hero { font: 800 64px/0.98 var(--fonte); letter-spacing: -0.03em; }
.pc-t-h1 { font: 800 48px/0.98 var(--fonte); letter-spacing: -0.03em; }
.pc-t-h2 { font: 800 32px/1.05 var(--fonte); letter-spacing: -0.02em; }
.pc-t-h3 { font: 700 20px/1.25 var(--fonte); letter-spacing: -0.01em; }
.pc-t-caixa { font: 800 13px/1.2 var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; }
.pc-t-sub { font: 500 22px/1.25 var(--fonte); }
.pc-t-lg { font: 500 18px/1.5 var(--fonte); }
.pc-t-md { font: 400 16px/1.55 var(--fonte); }
.pc-t-sm { font: 400 14px/1.5 var(--fonte); }
.pc-t-legenda { font: 500 12px/1.4 var(--fonte); }
.pc-t-pilula { font: 700 12px/1 var(--fonte); letter-spacing: 0.04em; text-transform: uppercase; }
.pc-t-nav { font: 600 15px/1 var(--fonte); }
.pc-t-botao { font: 700 15px/1 var(--fonte); }
.pc-t-numero { font: 800 40px/1 var(--fonte); letter-spacing: -0.03em; }
.pc-suave { color: var(--cor-texto-suave); }
.pc-azul { color: var(--cor-azul-600); }
.pc-ponto { color: var(--cor-azul-600); }           /* ponto final do título (fundo claro) */
.pc-escuro .pc-ponto { color: var(--cor-branco); }   /* frames 16:2 etc.: ponto do h1 branco sobre fundo escuro (Guia, seção 2) */

/* ===================== 4. Layout de portal ===================== */
.pc-container { width: 100%; max-width: calc(var(--layout-container) + 2 * var(--espaco-16)); margin: 0 auto; padding: 0 var(--espaco-16); }
.pc-portal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--layout-gutter); align-items: start; }
.pc-principal { min-width: 0; display: flex; flex-direction: column; gap: var(--espaco-48); }
.pc-sidebar { min-width: 0; display: flex; flex-direction: column; gap: var(--espaco-24); }
@media (min-width: 1024px) {
  .pc-container { padding: 0 var(--espaco-24); max-width: calc(var(--layout-container) + 2 * var(--espaco-24)); }
  .pc-portal { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
@media (min-width: 1232px) {
  .pc-container { padding: 0; max-width: var(--layout-container); }
  .pc-portal { grid-template-columns: var(--layout-principal) var(--layout-sidebar); }
}
/* grades: cartões da mesma linha com a mesma altura e largura */
.pc-grade { display: grid; gap: var(--layout-gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; }
.pc-grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .pc-grade { gap: var(--espaco-16); } .pc-grade-1-cel { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1200px) { .pc-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pc-grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===================== 5. Botão (Button) ===================== */
.pc-botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-8); padding: 14px 22px; border-radius: var(--raio-pilula); border: 0; font: 700 15px/1 var(--fonte); white-space: nowrap; cursor: pointer; transition: filter .15s, background-color .15s; }
.pc-botao .pc-ic { width: 16px; height: 16px; }
.pc-botao--primario { background: var(--cor-azul-600); color: var(--cor-branco); }
.pc-botao--primario:hover { background: var(--cor-azul-700); }
.pc-botao--escuro { background: var(--cor-navy-800); color: var(--cor-branco); }
.pc-botao--escuro:hover { background: var(--cor-navy-900); }
.pc-botao--secundario { background: var(--cor-branco); color: var(--cor-navy-800); border: 1.5px solid var(--cor-azul-200); }
.pc-botao--secundario:hover { background: var(--cor-azul-50); }
.pc-botao--claro { background: var(--cor-branco); color: var(--cor-navy-900); }
.pc-botao--claro:hover { background: var(--cor-azul-50); }
.pc-botao--contorno-claro { background: var(--cor-navy-900); color: var(--cor-branco); border: 1.5px solid var(--cor-acento-300); }
.pc-botao--contorno-claro:hover { background: var(--cor-navy-800); }
.pc-botao--bloco { width: 100%; }

/* ===================== 6. Etiqueta (Pill) ===================== */
.pc-etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--raio-pilula); font: 700 12px/1 var(--fonte); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.pc-etiqueta--azul { background: var(--cor-azul-600); color: var(--cor-branco); }
.pc-etiqueta--claro { background: var(--cor-azul-100); color: var(--cor-azul-700); }
.pc-etiqueta--escuro { background: var(--cor-navy-800); color: var(--cor-azul-200); }
.pc-etiqueta__ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ===================== 7. Ladrilho de ícone (Icon tile) ===================== */
.pc-ladrilho { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: var(--raio-md); background: var(--cor-azul-100); color: var(--cor-azul-600); }
.pc-ladrilho .pc-ic { width: 22px; height: 22px; }
.pc-ladrilho--sm { width: 32px; height: 32px; border-radius: var(--raio-sm); }
.pc-ladrilho--sm .pc-ic { width: 16px; height: 16px; }
.pc-ladrilho--escuro { background: var(--cor-navy-800); color: var(--cor-azul-200); }
.pc-ladrilho--azul { background: var(--cor-azul-600); color: var(--cor-branco); }

/* ===================== 8. Título de seção (Section title) ===================== */
.pc-secao-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-16); padding-bottom: var(--espaco-12); border-bottom: 1px solid var(--cor-azul-100); }
.pc-secao-titulo h2 { font: 800 32px/1.05 var(--fonte); letter-spacing: -0.02em; color: var(--cor-navy-800); }
.pc-link-ver { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--fonte); color: var(--cor-azul-600); white-space: nowrap; }   /* base alinhada à do h2, como no Figma */
.pc-link-ver .pc-ic { width: 14px; height: 14px; }
.pc-link-ver:hover { color: var(--cor-azul-700); }
@media (max-width: 767px) { .pc-secao-titulo h2 { font-size: 24px; } }

/* ===================== 9. Caixa de portal (Box + Box header) ===================== */
.pc-caixa { background: var(--cor-branco); border: 1px solid var(--cor-azul-100); border-radius: var(--raio-lg); box-shadow: var(--sombra-cartao); overflow: hidden; }
.pc-caixa__cab { position: relative; display: flex; align-items: center; gap: var(--espaco-8); padding: 17px 16px 14px; background: var(--cor-azul-50); }   /* 3 px do filete + 14 (o Figma conta o filete na altura: 47/48 px) */
.pc-caixa__cab::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--degrade-filete); }
.pc-caixa__cab .pc-ic { width: 16px; height: 16px; color: var(--cor-azul-600); }
.pc-caixa__titulo { flex: 1; min-width: 0; font: 800 13px/1.2 var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-navy-800); }
.pc-caixa__link { font: 500 12px/1.4 var(--fonte); color: var(--cor-azul-600); white-space: nowrap; }
.pc-caixa__link:hover { text-decoration: underline; }
.pc-caixa__corpo { padding: var(--espaco-16); display: flex; flex-direction: column; gap: var(--espaco-16); }

/* ===================== 10. Linha de lista (List row) ===================== */
.pc-lista { display: flex; flex-direction: column; }
.pc-linha { display: flex; align-items: center; gap: var(--espaco-12); padding: 12px 0; border-bottom: 1px solid var(--cor-azul-100); font: 400 14px/1.5 var(--fonte); color: var(--cor-navy-800); }
.pc-linha > .pc-ic { width: 16px; height: 16px; color: var(--cor-azul-600); }
.pc-linha__rotulo { flex: 1; min-width: 0; }
.pc-linha__seta { width: 12px !important; height: 12px !important; color: var(--cor-acento-400) !important; }
a.pc-linha:hover .pc-linha__rotulo { color: var(--cor-azul-600); }

/* ===================== 11. Cartão de função (Card) ===================== */
.pc-cartao { display: flex; flex-direction: column; gap: var(--espaco-12); padding: var(--espaco-20); background: var(--cor-branco); border: 1px solid var(--cor-azul-100); border-radius: var(--raio-xl); box-shadow: var(--sombra-cartao); min-width: 0; }
.pc-cartao--horizontal { flex-direction: row; gap: var(--espaco-16); }
.pc-cartao__texto { display: flex; flex-direction: column; gap: var(--espaco-4); min-width: 0; }
.pc-cartao__titulo { font: 700 20px/1.25 var(--fonte); letter-spacing: -0.01em; color: var(--cor-navy-800); }
.pc-cartao__desc { font: 400 14px/1.5 var(--fonte); color: var(--cor-azul-700); }
.pc-cartao__link { display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; font: 500 12px/1.4 var(--fonte); color: var(--cor-azul-600); }
.pc-cartao__link .pc-ic { width: 12px; height: 12px; }
a.pc-cartao { transition: border-color .15s, transform .15s; }
a.pc-cartao:hover { border-color: var(--cor-azul-200); }
@media (max-width: 767px) { .pc-cartao { padding: var(--espaco-16); } }

/* ===================== 12. Número (Stat) ===================== */
.pc-numero { display: flex; flex-direction: column; gap: var(--espaco-4); min-width: 0; }
.pc-numero__valor { font: 800 40px/1 var(--fonte); letter-spacing: -0.03em; color: var(--cor-navy-800); }
.pc-numero__legenda { font: 400 14px/1.5 var(--fonte); color: var(--cor-texto-suave); }

/* ===================== 13. Campo (Field) ===================== */
.pc-campo { display: flex; flex-direction: column; gap: var(--espaco-8); }
.pc-campo label, .pc-campo__rotulo { font: 700 15px/1 var(--fonte); color: var(--cor-navy-800); }
.pc-campo input, .pc-campo select, .pc-campo textarea { width: 100%; min-height: 56px; padding: 14px 16px; border: 1.5px solid var(--cor-azul-200); border-radius: var(--raio-md); background: var(--cor-branco); color: var(--cor-navy-800); font: 400 16px/1.55 var(--fonte); appearance: none; -webkit-appearance: none; }
.pc-campo textarea { min-height: 140px; resize: vertical; }
.pc-campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2355597A' d='M12 17.4 3.3 8.7l1.8-1.8 6.9 6.9 6.9-6.9 1.8 1.8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; padding-right: 44px; }
.pc-campo input::placeholder, .pc-campo textarea::placeholder { color: var(--cor-texto-suave); opacity: 1; }
.pc-campo input:focus, .pc-campo select:focus, .pc-campo textarea:focus { border-color: var(--cor-azul-600); outline: none; box-shadow: 0 0 0 3px rgba(40, 81, 222, .18); }
.pc-campo [aria-invalid="true"] { border-color: #B42318; }
.pc-campo__erro { font: 500 12px/1.4 var(--fonte); color: #B42318; }
.pc-campo__ajuda { font: 500 12px/1.4 var(--fonte); color: var(--cor-texto-suave); }

/* ===================== 14. Cabeçalho (Header) ===================== */
.pc-topo { background: var(--cor-navy-900); color: var(--cor-azul-200); font: 500 12px/1.4 var(--fonte); }
.pc-topo__conteudo { display: flex; align-items: center; gap: var(--espaco-24); min-height: 33px; padding-top: 8px; padding-bottom: 8px; }
.pc-topo__slogan { flex: 1; min-width: 0; }
.pc-topo__links { display: flex; align-items: center; gap: var(--espaco-24); }
.pc-topo__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--cor-azul-200); }
.pc-topo__links a:hover { color: var(--cor-branco); }
.pc-topo__links .pc-ic { width: 12px; height: 12px; }
.pc-topo__links a.pc-topo__vivo { color: var(--cor-branco); }
.pc-topo__links a.pc-topo__vivo .pc-ic { color: var(--cor-acento-300); }
.pc-cab { position: relative; z-index: 30; background: var(--cor-branco); font-family: var(--fonte); }
.pc-barra { border-bottom: 1px solid var(--cor-azul-100); }
.pc-barra__conteudo { display: flex; align-items: center; gap: var(--espaco-32); min-height: 82px; padding-top: 18px; padding-bottom: 18px; }
.pc-logo { display: inline-flex; flex: none; }
.pc-logo img { width: 178px; height: 36px; }
.pc-nav { flex: 1; min-width: 0; }
.pc-nav ul { display: flex; align-items: center; gap: var(--espaco-24); }
.pc-nav a { display: flex; flex-direction: column; gap: var(--espaco-8); padding: 10px 4px 0; font: 600 15px/1 var(--fonte); color: var(--cor-navy-800); white-space: nowrap; }
.pc-nav a::after { content: ''; height: 3px; border-radius: 2px; background: var(--cor-azul-600); opacity: 0; transition: opacity .15s; }
.pc-nav a:hover::after { opacity: .35; }
.pc-nav a[aria-current="page"] { color: var(--cor-azul-600); }
.pc-nav a[aria-current="page"]::after { opacity: 1; }
.pc-acoes { display: flex; align-items: center; gap: var(--espaco-12); flex: none; }
.pc-busca, .pc-menu-botao { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--raio-pilula); border: 1px solid var(--cor-azul-200); background: var(--cor-branco); color: var(--cor-navy-800); cursor: pointer; padding: 0; }
.pc-busca .pc-ic, .pc-menu-botao .pc-ic { width: 16px; height: 16px; }
.pc-busca:hover { background: var(--cor-azul-50); }
.pc-menu-botao { display: none; background: var(--cor-navy-800); border-color: var(--cor-navy-800); color: var(--cor-branco); }
.pc-cab .pc-botao--secundario .pc-ic { display: none; }   /* no cabeçalho os botões não mostram seta (ícone oculto no Figma) */
.pc-cab .pc-botao--primario .pc-ic { display: none; }
@media (max-width: 1199px) {
  .pc-barra__conteudo { gap: var(--espaco-20); }
  .pc-nav ul { gap: var(--espaco-16); }
}
@media (max-width: 1099px) {
  .pc-nav, .pc-acoes .pc-botao { display: none; }
  .pc-menu-botao { display: inline-flex; }
  .pc-barra__conteudo { justify-content: space-between; }
}
@media (max-width: 767px) {
  .pc-topo__conteudo { justify-content: center; }
  .pc-topo__slogan, .pc-topo__links a:not(.pc-topo__vivo) { display: none; }
  .pc-barra__conteudo { padding-top: 14px; padding-bottom: 14px; gap: var(--espaco-12); }
  .pc-logo img { width: 142px; height: 29px; }
}
/* gaveta do menu (celular e tablet) */
.pc-gaveta { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; background: rgba(20, 18, 56, .55); font-family: var(--fonte); }
.pc-gaveta[hidden] { display: none; }
.pc-gaveta__painel { width: min(360px, 100%); height: 100%; overflow-y: auto; background: var(--cor-branco); padding: var(--espaco-16) var(--espaco-20) var(--espaco-32); display: flex; flex-direction: column; gap: var(--espaco-20); box-shadow: var(--sombra-destaque); }
.pc-gaveta__topo { display: flex; align-items: center; justify-content: space-between; }
.pc-gaveta__topo img { width: 142px; height: 29px; }
.pc-gaveta__fechar { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; width: 40px; height: 40px; border-radius: var(--raio-pilula); border: 1px solid var(--cor-azul-200); background: var(--cor-branco); color: var(--cor-navy-800); font: 700 18px/1 var(--fonte); cursor: pointer; }
.pc-gaveta nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--cor-azul-100); font: 600 15px/1 var(--fonte); color: var(--cor-navy-800); }
.pc-gaveta nav a[aria-current="page"] { color: var(--cor-azul-600); }
.pc-gaveta nav a .pc-ic { width: 12px; height: 12px; color: var(--cor-acento-400); }
.pc-gaveta__botoes { display: flex; flex-direction: column; gap: var(--espaco-12); }
body.pc-gaveta-aberta { overflow: hidden; }

/* ===================== 15. Cabeçalho de página (Page header) ===================== */
.pc-cab-pagina { position: relative; overflow: hidden; background: var(--cor-navy-900); color: var(--cor-branco); isolation: isolate; }
.pc-cab-pagina__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pc-cab-pagina::before { content: ''; position: absolute; inset: 0; background: var(--degrade-sobreposicao-foto); z-index: -1; }
.pc-cab-pagina__textura { position: absolute; z-index: -1; pointer-events: none; }
.pc-cab-pagina__conteudo { position: relative; display: flex; flex-direction: column; gap: var(--espaco-12); padding-top: var(--espaco-80); padding-bottom: var(--espaco-80); }
.pc-trilha { font: 500 12px/1.4 var(--fonte); color: var(--cor-azul-200); }
.pc-trilha ol { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-trilha li + li::before { content: '/'; margin-right: 4px; }
.pc-trilha a:hover { color: var(--cor-branco); text-decoration: underline; }
.pc-cab-pagina h1 { max-width: 800px; font: 800 48px/0.98 var(--fonte); letter-spacing: -0.03em; color: var(--cor-branco); }
.pc-cab-pagina h1 .pc-ponto { color: var(--cor-branco); }
.pc-cab-pagina__sub { max-width: 720px; font: 500 22px/1.25 var(--fonte); color: var(--cor-azul-200); }
.pc-credito { font: 500 12px/1.4 var(--fonte); color: var(--cor-branco); }
.pc-cab-pagina__credito { position: absolute; right: max(var(--espaco-16), calc((100% - var(--layout-container)) / 2 - 70px)); bottom: 12px; text-align: right; opacity: .85; }
@media (max-width: 767px) {
  .pc-cab-pagina__conteudo { padding-top: var(--espaco-40); padding-bottom: var(--espaco-40); }
  .pc-cab-pagina h1 { font-size: 36px; }
  .pc-cab-pagina__credito { position: static; padding: 0 var(--espaco-16) var(--espaco-12); margin-top: calc(-1 * var(--espaco-24)); }   /* crédito longo não cobre o subtítulo */
  .pc-cab-pagina__sub { font-size: 18px; }
}

/* ===================== 16. Faixa de chamada (CTA band) ===================== */
.pc-chamada-area { padding: var(--espaco-64) 0; }
.pc-chamada { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--raio-cartao); background: var(--degrade-navy-azul); padding: var(--espaco-48) 56px; color: var(--cor-branco); }
.pc-chamada__textura { position: absolute; z-index: -1; width: 504px; height: 504px; right: -105px; top: -126px; pointer-events: none; }
.pc-chamada__texto { display: flex; flex-direction: column; gap: var(--espaco-12); }
.pc-chamada h2 { font: 800 32px/1.05 var(--fonte); letter-spacing: -0.02em; }
.pc-chamada__sub { font: 500 22px/1.25 var(--fonte); color: var(--cor-azul-200); }
.pc-chamada__botoes { display: flex; flex-wrap: wrap; gap: var(--espaco-12); padding-top: var(--espaco-8); }
@media (max-width: 767px) {
  .pc-chamada-area { padding: var(--espaco-40) 0; }
  .pc-chamada { padding: var(--espaco-32) var(--espaco-24); }
  .pc-chamada__texto { gap: var(--espaco-16); }
  .pc-chamada__sub { font-size: 16px; line-height: 1.25; }
  .pc-chamada__botoes { flex-direction: column; align-items: flex-start; }
  .pc-chamada__textura { width: 360px; height: 360px; right: -204px; top: 116px; }
}

/* ===================== 17. Bloco Pix (Apoie a ideia) ===================== */
.pc-pix-area { padding: 0 0 var(--espaco-64); }
.pc-pix-area:first-child, :not(.pc-chamada-area) + .pc-pix-area { padding-top: var(--espaco-64); }
.pc-pix { display: flex; align-items: center; gap: var(--espaco-40); padding: var(--espaco-32) var(--espaco-40); background: var(--cor-branco); border: 1px solid var(--cor-azul-100); border-radius: var(--raio-lg); box-shadow: var(--sombra-cartao); }
.pc-pix[hidden] { display: none; }
.pc-pix-area:has(.pc-pix[hidden]) { display: none; }   /* sem JS ou com payload inválido o bloco inteiro some (o pix.js mostra o #apoie) */
.pc-pix__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-pix__rotulo { font: 700 12px/1 var(--fonte); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-texto-suave); }
.pc-pix h2 { font: 800 32px/1.05 var(--fonte); letter-spacing: -0.02em; color: var(--cor-navy-800); }
.pc-pix__desc { font: 400 16px/1.55 var(--fonte); color: var(--cor-texto-suave); }
.pc-pix__botoes { display: flex; flex-wrap: wrap; gap: var(--espaco-8); }
.pc-pix__botoes .pc-ic { display: none; }   /* ícone oculto no Figma */
.pc-pix__chave { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-8); font: 500 12px/1.4 var(--fonte); color: var(--cor-texto-suave); }
.pc-pix__chave code { padding: 4px 8px; border-radius: var(--raio-sm); background: var(--cor-azul-50); color: var(--cor-navy-800); font: 600 12px/1.4 var(--fonte); word-break: break-all; }
.pc-pix__rec { font: 500 12px/1.4 var(--fonte); color: var(--cor-texto-suave); }
.pc-pix__aviso { font: 700 14px/1.5 var(--fonte); color: var(--cor-navy-800); }
.pc-pix__campo, .pix-campo { width: 100%; font: 400 13px/1.4 ui-monospace, monospace; padding: 8px; border: 1.5px solid var(--cor-azul-200); border-radius: var(--raio-sm); }
.pc-pix__qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--espaco-8); width: 190px; }
.pc-pix__moldura { width: 190px; height: 190px; padding: var(--espaco-8); border: 1px solid var(--cor-azul-100); border-radius: var(--raio-lg); background: var(--cor-branco); display: flex; align-items: center; justify-content: center; font: 500 12px/1.4 var(--fonte); color: var(--cor-texto-suave); text-align: center; }
.pc-pix__moldura svg { display: block; width: 172px; height: 172px; }
.pc-pix__leg { font: 500 12px/1.4 var(--fonte); color: var(--cor-texto-suave); }
@media (max-width: 767px) {
  .pc-pix-area { padding: 0 0 var(--espaco-40); }
  :not(.pc-chamada-area) + .pc-pix-area { padding-top: var(--espaco-40); }
  .pc-pix { flex-direction: column; align-items: stretch; gap: var(--espaco-20); padding: var(--espaco-24) var(--espaco-20); }
  .pc-pix__botoes { flex-direction: column; }
  .pc-pix__botoes .pc-botao { width: 100%; }
  .pc-pix__qr { align-self: center; }
}

/* ===================== 18. Rodapé (Footer) ===================== */
.pc-rod { background: var(--cor-navy-900); color: var(--cor-branco); font-family: var(--fonte); }
.pc-rod__conteudo { display: flex; flex-direction: column; gap: var(--espaco-48); padding-top: var(--espaco-64); padding-bottom: var(--espaco-40); }
.pc-rod__colunas { display: flex; gap: var(--espaco-48); }
.pc-rod__marca { width: 384px; flex: none; display: flex; flex-direction: column; gap: var(--espaco-16); }
.pc-rod__marca img { width: 178px; height: 36px; }
.pc-rod__slogan { font: 500 22px/1.25 var(--fonte); color: var(--cor-branco); }
.pc-rod__neutro { font: 400 14px/1.5 var(--fonte); color: var(--cor-azul-200); }
.pc-rod__redes { display: flex; gap: var(--espaco-12); }
.pc-rod__redes a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--raio-pilula); background: var(--cor-navy-800); color: var(--cor-azul-200); }
.pc-rod__redes a:hover { background: var(--cor-azul-600); color: var(--cor-branco); }
.pc-rod__redes .pc-ic { width: 16px; height: 16px; }
.pc-rod__links { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espaco-32); }
.pc-rod__col { display: flex; flex-direction: column; gap: var(--espaco-12); }
.pc-rod__col h2 { font: 800 13px/1.2 var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-acento-300); }
.pc-rod__col ul { display: flex; flex-direction: column; gap: var(--espaco-12); }
.pc-rod__col a { font: 400 14px/1.5 var(--fonte); color: var(--cor-branco); }
.pc-rod__col a:hover { color: var(--cor-azul-200); text-decoration: underline; }
.pc-rod__base { display: flex; align-items: center; gap: var(--espaco-24); padding-top: var(--espaco-24); border-top: 1px solid var(--cor-navy-800); font: 500 12px/1.4 var(--fonte); }
.pc-rod__copy { flex: 1; color: var(--cor-azul-200); }
.pc-rod__email { display: inline-flex; align-items: center; gap: 6px; color: var(--cor-branco); }
.pc-rod__email .pc-ic { width: 12px; height: 12px; color: var(--cor-acento-300); }
.pc-rod__email:hover { text-decoration: underline; }
@media (max-width: 1099px) {
  .pc-rod__colunas { flex-direction: column; gap: var(--espaco-32); }
  .pc-rod__marca { width: auto; }
}
@media (max-width: 767px) {
  .pc-rod__conteudo { gap: var(--espaco-32); padding-top: var(--espaco-40); padding-bottom: var(--espaco-32); }
  .pc-rod__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espaco-24); row-gap: var(--espaco-24); }
  .pc-rod__base { flex-direction: column; align-items: flex-start; gap: var(--espaco-12); }
}

/* ===================== 19. Linha do placar (Score row) ===================== */
.pc-placar { display: flex; flex-direction: column; gap: var(--espaco-8); }
.pc-placar__linha { display: flex; align-items: center; gap: var(--espaco-12); }
.pc-placar__foto { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--cor-azul-100); color: var(--cor-acento-400); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pc-placar__foto .pc-ic { width: 18px; height: 18px; }
.pc-placar__foto img { width: 100%; height: 100%; object-fit: cover; }
.pc-placar__nome { flex: 1; min-width: 0; font: 700 15px/1 var(--fonte); color: var(--cor-navy-800); }
.pc-placar__pct { font: 700 20px/1.25 var(--fonte); letter-spacing: -0.01em; color: var(--cor-navy-800); }
.pc-placar__barra { position: relative; height: 8px; border-radius: var(--raio-pilula); background: var(--cor-azul-100); overflow: hidden; }
.pc-placar__preenchido { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--cor-acento-500); }
.pc-placar__metade { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--cor-navy-800); }
.pc-placar__votos { font: 500 12px/1.4 var(--fonte); color: var(--cor-texto-suave); }
.pc-urnas { display: flex; align-items: center; gap: var(--espaco-8); padding: 10px 12px; border-radius: var(--raio-md); background: var(--cor-azul-50); font: 400 14px/1.5 var(--fonte); color: var(--cor-navy-800); }
.pc-urnas .pc-ic { width: 16px; height: 16px; color: var(--cor-azul-600); }
.pc-urnas__rot { flex: 1; }
.pc-urnas__pct { font: 700 15px/1 var(--fonte); }
.pc-aviso-claro { display: flex; align-items: flex-start; gap: var(--espaco-8); padding: 12px 16px; border-radius: var(--raio-md); background: var(--cor-azul-50); font: 400 14px/1.5 var(--fonte); color: var(--cor-navy-800); }
.pc-aviso-claro > .pc-ic { width: 16px; height: 16px; margin-top: 2.5px; color: var(--cor-azul-600); }

/* ===================== 20. Item de blog (Blog item) ===================== */
.pc-blog-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--cor-azul-100); }
.pc-blog-item__meta { display: flex; align-items: center; gap: var(--espaco-8); font: 500 12px/1.4 var(--fonte); color: var(--cor-texto-suave); }
.pc-blog-item__cat { font: 700 12px/1 var(--fonte); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-azul-600); }
.pc-blog-item__titulo { font: 700 16px/1.55 var(--fonte); color: var(--cor-navy-800); }
a.pc-blog-item:hover .pc-blog-item__titulo { color: var(--cor-azul-600); }
.pc-blog-item__resumo { font: 400 14px/1.5 var(--fonte); color: var(--cor-texto-suave); }
.pc-blog-item--destaque { flex-direction: row; gap: var(--espaco-24); padding: var(--espaco-20) 0; }
.pc-blog-item--destaque .pc-blog-item__mini { flex: none; width: 200px; height: 124px; border-radius: var(--raio-lg); background: var(--cor-azul-50); display: flex; align-items: center; justify-content: center; }
.pc-blog-item--destaque .pc-blog-item__texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-blog-item--destaque .pc-blog-item__titulo { font: 700 20px/1.25 var(--fonte); letter-spacing: -0.01em; }
@media (max-width: 767px) {
  .pc-blog-item--destaque { flex-direction: column; gap: var(--espaco-12); }
  .pc-blog-item--destaque .pc-blog-item__mini { width: 100%; }
}

/* ===================== 21. Movimento reduzido ===================== */
@media (prefers-reduced-motion: reduce) { .pc-pagina *, .pc-cab *, .pc-rod * { transition: none !important; scroll-behavior: auto !important; } }