/* Estilo de cartaz infográfico (páginas de políticos): fundo grafite, painéis com linhas finas, títulos condensados enormes,
   blocos de cor chapada. Cores validadas para o fundo #2b333d. Usa os tokens de base.css por cima. */
:root { --bg: #262d36; --sup: #2e3742; --sup2: #36404c; --linha: rgb(255 255 255 / .09); --linha2: rgb(255 255 255 / .18);
  --txt2: #a5b1bd; --txt3: #7d8995;
  --verde: #14a198; --amarelo: #c98500; --rosa: #e2456c; --azul: #3d8de0; --laranja: #d95926; --cinza: #7d8995;
  --amarelo-v: #f2b13a; --painel: #2b333d; --sep: #3a4450; }
body { background: var(--bg); }
.nav { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.capa { padding: 22px 0 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.capa h1 { font-stretch: 62%; font-weight: 900; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .9; text-transform: uppercase; }
.capa h1 b { color: var(--verde); font-weight: 900; }
.capa .tiras { display: flex; gap: 4px; margin-top: 10px; } .capa .tiras i { width: 26px; height: 10px; }
.capa p { text-align: right; font-stretch: 66%; font-weight: 800; font-size: 1.15rem; line-height: 1; text-transform: uppercase; color: var(--txt2); }
.cartaz { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--sep); border: 1px solid var(--sep); }
.pn { --tc: var(--verde); background: var(--painel); padding: 24px 26px 20px; min-width: 0; position: relative; scroll-margin-top: 70px; }
.s8 { grid-column: span 8; } .s7 { grid-column: span 7; } .s6 { grid-column: span 6; } .s5 { grid-column: span 5; } .s4 { grid-column: span 4; } .s12 { grid-column: 1 / -1; }
@media (max-width: 1100px) { .s8, .s7, .s6, .s5, .s4 { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pn { padding: 18px 14px 16px; } }
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 3px solid var(--tc); }
.ph h2 { font-stretch: 62%; font-weight: 900; text-transform: uppercase; line-height: .88; }
.ph h2 b { display: block; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 900; }
.ph h2 span { display: block; font-size: clamp(1.3rem, 2.2vw, 2rem); }
.ph p { text-align: right; font-stretch: 64%; font-weight: 800; text-transform: uppercase; line-height: .92; font-size: clamp(1rem, 1.6vw, 1.35rem); flex: none; }
.ph p i { color: var(--tc); font-size: 2rem; display: block; margin-left: auto; width: max-content; margin-bottom: 4px; }
.txt-p { font-size: .9rem; color: var(--txt2); max-width: 70ch; }
.txt-p b { color: var(--txt); }
.fonte { margin-top: 12px; font-size: .72rem; color: var(--txt3); }
.fonte a, .txt-p a { text-decoration: underline; text-underline-offset: 2px; }
.sub-t { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt2); margin: 4px 0 10px; }
.blocos { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
.bl { --c: var(--verde); display: flex; flex-direction: column; min-width: 0; color: #fff; }
.bl-a { background: var(--c); padding: 14px 12px 12px; text-align: center; }
.bl-a b { display: block; font-stretch: 62%; font-weight: 900; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1; white-space: nowrap; }
.bl-a span { display: block; margin-top: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bl-b { background: color-mix(in srgb, var(--c) 60%, var(--painel)); padding: 9px 12px 11px; text-align: center; font-size: .74rem; line-height: 1.3; flex: 1; }
.bl.claro { color: #1d1709; } .bl.claro .bl-b { color: #f7f2e6; }
@media (max-width: 700px) { .blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.carregando { padding: 40px; color: var(--txt2); }
footer.pe { padding: 26px 0 90px; color: var(--txt2); font-size: .84rem; }
footer.pe a { text-decoration: underline; text-underline-offset: 3px; }
/* votos: cor por tipo (só identifica; não é bom nem ruim) */
.vt { display: inline-flex; align-items: center; justify-content: center; min-width: 5.6em; padding: 4px 8px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--cinza); }
.vt.sim { background: var(--verde); } .vt.nao { background: var(--rosa); } .vt.abst { background: var(--amarelo); color: #1d1709; } .vt.obst { background: var(--laranja); } .vt.art { background: var(--cinza); }