@font-face { font-family: "NotoSans-Black"; src: url("fonts/NotoSans-Black.woff"); font-display: swap; }
@font-face { font-family: "NotoSans-Regular"; src: url("fonts/NotoSans-Regular.woff"); font-display: swap; }
:root {
  --paper: #F5F0E1; --yellow: #FFD60A; --red: #D62828; --ink: #1A1A1A;
  --bg: #2b2a27; --bg-2: #3a3833; --bg-3: #47443d; --muted: #cfc8b4; --ink-soft: #6b6556;
  --tape: rgba(200, 190, 160, .55); --line: rgba(245, 240, 225, .12);
  --gutter: 16px; --pad: 20px;
}
@media (min-width: 640px) { :root { --gutter: 24px; --pad: 28px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--paper);
  font: 17px/1.55 "NotoSans-Regular", system-ui, sans-serif;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* barra fixa com o botão de voltar */
.bar { position: sticky; top: 0; z-index: 10; padding: 10px var(--gutter);
  background: rgba(43, 42, 39, .92); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bar { display: flex; align-items: flex-start; gap: 22px; height: 63px; }
@media (min-width: 1148px) { .bar { padding-inline: calc((100% - 1100px) / 2 + var(--gutter)); } }
.back { position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  font: 900 15px/1 "NotoSans-Black", sans-serif; padding: 12px 18px 12px 14px;
  transform: rotate(-1.2deg); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.back { flex: none; }
.back > span[aria-hidden] { font-size: 22px; line-height: 0; margin-top: -2px; }
.back::before { content: ""; position: absolute; top: -6px; left: 50%; width: 46px; height: 14px;
  margin-left: -23px; background: var(--tape); transform: rotate(3deg); }
.back:hover { background: var(--yellow); }
.back:focus-visible { outline-offset: 4px; }

/* ícones dos temas na barra: aparecem quando os atalhos do topo saem da tela */
.bar-themes { display: flex; align-items: flex-start; gap: 8px; padding-top: 7px;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity .25s, transform .25s, visibility 0s .25s; }
.bar.show-themes .bar-themes { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .25s; }
.bar-themes a { position: relative; flex: none; display: block; text-decoration: none; }
.bar-icon { display: grid; place-items: center; width: 28px; height: 28px; background: var(--c); color: var(--fg);
  box-shadow: 0 2px 0 rgba(0,0,0,.35); transform-origin: 50% 0;
  transition: width .3s cubic-bezier(.65, 0, .35, 1), height .3s cubic-bezier(.65, 0, .35, 1), transform .2s; }
.bar-icon svg { width: 60%; height: 60%; }
/* o atual dobra de tamanho, preso pelo topo: cresce para baixo, para fora da barra */
.bar-themes a[aria-current] .bar-icon { width: 56px; height: 56px; box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.bar-themes a:hover .bar-icon, .bar-themes a:focus-visible .bar-icon { transform: translateY(-2px) rotate(-6deg); }
.bar-themes a:nth-child(even):hover .bar-icon, .bar-themes a:nth-child(even):focus-visible .bar-icon {
  transform: translateY(-2px) rotate(5deg); }
.bar-themes a:focus-visible { outline: none; }
.bar-themes a:focus-visible .bar-icon { outline: 3px solid var(--yellow); outline-offset: 3px; }
/* nome do tema numa etiqueta de papel, abaixo do ícone */
.bar-themes a::after { content: attr(data-title); position: absolute; top: calc(100% + 10px); left: 50%;
  translate: -50% 0; padding: 6px 10px; background: var(--paper); color: var(--ink); white-space: nowrap;
  font: 900 13px/1.2 "NotoSans-Black", sans-serif; box-shadow: 0 3px 0 rgba(0,0,0,.35);
  rotate: -1.5deg; opacity: 0; pointer-events: none; transition: opacity .15s; }
.bar-themes a:nth-last-child(-n+3)::after { left: auto; right: 0; translate: none; }
.bar-themes a:hover::after, .bar-themes a:focus-visible::after { opacity: 1; }
@media (hover: none) { .bar-themes a::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .bar-themes, .bar-icon { transition: none; } }
/* mobile: a faixa de ícones não cabe; o voltar vira só a seta e entra o botão do tema atual */
.bar-pick, .bar-panel { display: none; }
@media (max-width: 759px) {
  .bar { gap: 14px; }
  .bar-themes { display: none; }
  /* botão do tema atual: entra junto com a barra de temas */
  .bar-pick { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; height: 44px;
    padding: 0 12px 0 8px; border: 0; border-radius: 3px; background: var(--bg-2); color: var(--paper);
    font: 900 14px/1.15 "NotoSans-Black", sans-serif; text-transform: uppercase; cursor: pointer;
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
  .bar.show-themes .bar-pick { opacity: 1; visibility: visible; transition: opacity .25s; }
  .bar-pick-icon:empty { display: none; }
  .bar-pick-icon .theme-icon { width: 28px; height: 28px; box-shadow: none; }
  .bar-pick-icon .theme-icon svg { width: 17px; height: 17px; }
  .bar-pick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
  .bar-pick-caret { flex: none; width: 9px; height: 9px; margin: -4px 2px 0 auto; border: solid var(--yellow);
    border-width: 0 3px 3px 0; transform: rotate(45deg); transition: transform .2s; }
  .bar-pick[aria-expanded="true"] .bar-pick-caret { transform: translateY(5px) rotate(-135deg); }
  .bar-panel:not([hidden]) { display: block; position: absolute; inset: 100% 0 auto; padding: 14px var(--gutter) 16px;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,.45);
    max-height: calc(100vh - 80px); overflow-y: auto; }
  .bar-panel a[aria-current] { background: var(--paper); color: var(--ink); }
  .bar.show-themes .back-label { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
  .bar.show-themes .back { padding-inline: 14px; }
  .bar.show-themes .back::before { width: 30px; margin-left: -15px; }
}

/* cabeçalho */
.top { max-width: 1100px; margin: 0 auto; padding: 44px var(--gutter) 32px; }
.top.small { padding-top: 32px; padding-bottom: 28px; }
.top h1 { margin: 0; font: 900 clamp(30px, 8vw, 64px)/1.05 "NotoSans-Black", sans-serif;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.top.small h1 { font-size: clamp(24px, 6vw, 40px); }
.blk { color: var(--ink); padding: 10px 18px; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.blk.yellow { background: var(--yellow); transform: rotate(-2deg); }
.blk.paper { background: var(--paper); transform: rotate(1deg); margin-left: 14px; }
.top.small .blk.paper { transform: rotate(-1deg); margin-left: 0; }
/* selo de contagem ao lado do "DIA 25": a conta usa a largura do texto na Noto Black (3,33 × corpo) */
.home-top { position: relative; }
.countdown { position: absolute; top: calc(44px + (clamp(30px, 8vw, 64px) * 1.05 + 20px) / 2);
  left: calc(var(--gutter) + clamp(30px, 8vw, 64px) * 3.33 + 36px + 22px); margin: 0; padding: 8px 12px;
  background: var(--paper); color: var(--ink); font: 900 clamp(13px, 3.4vw, 20px)/1.1 "NotoSans-Black", sans-serif;
  transform: translateY(-50%) rotate(2.5deg); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.countdown::before { content: ""; position: absolute; top: -7px; left: 50%; width: 40px; height: 12px;
  margin-left: -20px; background: var(--tape); transform: rotate(-4deg); }
.lede { max-width: 38em; color: var(--muted); margin: 26px 0 0; }

/* grade de posts */
.grid { max-width: 1100px; margin: 0 auto; padding: 8px var(--gutter) 56px;
  display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 339px) { .grid { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.card { position: relative; text-decoration: none; background: var(--bg-2);
  border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.card:hover { background: var(--bg-3); }
.card-media { position: relative; display: block; }
.card img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.card .card-alt { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .25s ease; }
@media (hover: hover) {
  .card:hover .card-alt, .card:focus-visible .card-alt { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .card .card-alt { transition: none; } }
.card-num { display: inline-block; background: var(--yellow); color: var(--ink);
  font-size: 13px; padding: 3px 6px; margin-right: 8px; vertical-align: 1px; }
.card-title { padding: 14px 16px 18px; font: 900 16px/1.3 "NotoSans-Black", sans-serif; }

/* página do post */
.post { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) 56px; }
.slides { display: grid; gap: 24px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.slide { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.slide img { border-radius: 3px; }
.dots { display: none; }
/* celular: slides passam de lado, como no Instagram (o slide 1 diz "arraste pro lado");
   o próximo aparece na borda, convidando o gesto */
@media (max-width: 759px) {
  .slides { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none; }
  .slides::-webkit-scrollbar { display: none; }
  .slides:focus-visible { outline-offset: -3px; }
  .slide { flex: 0 0 86%; scroll-snap-align: start; }
  .dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .dots:has(span:only-child) { display: none; }
  .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-3); }
  .dots span.on { background: var(--yellow); }
  .btn.small { display: inline-flex; align-items: center; min-height: 44px; }
}
/* tela larga: ações numa coluna fixa ao lado dos slides, à vista sem rolar */
@media (min-width: 1100px) {
  .post { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 48px; align-items: start; }
  .post > .slides { grid-column: 1; grid-row: 1; }
  .post > .actions { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 88px; margin: 0; }
  .post > .caption, .post > .cmp-link { grid-column: 1; }
  .post > .caption { margin-top: 48px; }
  .post > .pager { grid-column: 1 / -1; }
}

.actions { margin: 40px 0; display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.row, .links { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { appearance: none; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--paper); color: var(--ink); padding: 13px 18px; border-radius: 3px;
  font: 900 15px/1.2 "NotoSans-Black", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.btn:hover { filter: brightness(.95); }
.btn.primary { background: var(--yellow); font-size: 18px; padding: 17px 22px; }
.btn.small { align-self: flex-start; font-size: 13px; padding: 9px 13px; background: var(--bg-2); color: var(--paper); }
.btn.small:hover { background: var(--bg-3); filter: none; }
/* botões das redes: ícone + cor da marca */
.btn.net { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn.net svg { width: 20px; height: 20px; flex: none; }
.btn.wa { background: #25D366; color: var(--ink); }
.btn.tg { background: #2AABEE; color: var(--ink); }
.btn.x { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(245, 240, 225, .25); }
.btn.fb { background: #0866FF; color: #fff; }
.hint, .status { margin: 0; color: var(--muted); font-size: 15px; }
/* rodapé fixo de compartilhar: só no celular, onde os botões ficam a duas telas do topo */
.share-bar { display: none; }
@media (max-width: 759px) {
  .share-bar { position: fixed; inset: auto 0 0; z-index: 10; display: flex; gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(43, 42, 39, .94);
    border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transform: translateY(100%); visibility: hidden; transition: transform .25s, visibility 0s .25s; }
  .share-bar.on { transform: none; visibility: visible; transition: transform .25s; }
  .share-bar .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 12px 14px; font-size: 16px; }
  body:has(.share-bar) .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .share-bar, .share-bar.on { transition: none; } }
.status:empty { display: none; }

.caption { max-width: 720px; }
.caption .sec-title { margin-bottom: 26px; }
/* legenda = bilhete colado com fita, como as propostas do comparativo (não uma caixa de texto) */
.caption-note { position: relative; background: var(--paper); color: var(--ink);
  padding: 30px var(--pad) var(--pad); box-shadow: 0 4px 0 rgba(0,0,0,.35); transform: rotate(-.5deg); }
.caption-note::before { content: ""; position: absolute; top: -9px; left: 50%; width: 84px; height: 18px;
  margin-left: -42px; background: var(--tape); transform: rotate(-2deg); }
.caption-note p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 16px; line-height: 1.6; }
.btn.copy-cap { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; background: var(--yellow); }
.btn.copy-cap svg { width: 18px; height: 18px; flex: none; }
.btn.copy-cap.done { background: #7BC67E; color: var(--ink); }

.cmp-link { margin: 32px 0 0; max-width: 720px; }
.cmp-link a { color: var(--yellow); font-weight: 700; text-underline-offset: 3px; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px;
  padding-top: 28px; border-top: 1px solid var(--line); }
.pager a { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 3px;
  background: var(--bg-2); text-decoration: none; font: 900 15px/1.3 "NotoSans-Black", sans-serif; }
.pager a:hover { background: var(--bg-3); }
.pager small { font: 400 13px/1 "NotoSans-Regular", sans-serif; color: var(--muted); }
.pager .next { text-align: right; align-items: flex-end; }
@media (min-width: 640px) { .pager { max-width: 720px; } }

/* comparativo */
.cmp-cta { display: inline-block; margin-top: 28px; }
.compare { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) 56px; }
.cmp-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.chip-grid a { position: relative; display: inline-flex; align-items: stretch; background: var(--bg-2); color: var(--paper);
  text-decoration: none; font-size: 14px; border-radius: 3px; overflow: hidden; }
.chip-icon { margin: 6px 0 6px 6px; }
.chip-title { align-self: center; padding: 0 12px 0 8px; }
.chip-count { display: grid; place-items: center; min-width: 34px; padding: 0 9px;
  background: var(--bg-3); color: var(--yellow); font: 900 13px/1 "NotoSans-Black", sans-serif;
  font-variant-numeric: tabular-nums; }
.chip-grid a:hover .chip-count { background: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chip-grid a:hover { background: var(--paper); color: var(--ink); }
.chip-icon { display: grid; place-items: center; width: 24px; height: 24px; background: var(--c); color: var(--fg); }
.chip-icon svg { width: 15px; height: 15px; }
.chip-short { display: none; }
/* celular: grade de duas colunas com o nome curto, tudo à vista (nada de arrastar para o lado) */
@media (max-width: 639px) {
  .chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chip-grid a { min-height: 44px; }
  .chip-grid .chip-title { display: none; }
  .chip-grid .chip-short { display: block; flex: 1; align-self: center; padding: 0 6px 0 8px; font-size: 14px;
    line-height: 1.2; }
  .chip-grid .chip-count { min-width: 30px; padding: 0 6px; }
  .chip-grid .chip-icon { margin: 10px 0 10px 8px; }
}

.theme { background: var(--bg-2); border-radius: 4px; margin: 0 0 16px; }
.theme summary { cursor: pointer; list-style: none; display: grid; align-items: center;
  grid-template-columns: auto 1fr auto; gap: 16px; padding: 18px var(--pad);
  font: 900 clamp(18px, 4.5vw, 24px)/1.2 "NotoSans-Black", sans-serif; text-transform: uppercase; }
.theme summary::-webkit-details-marker { display: none; }
/* + que vira – : a barra vertical gira até deitar */
.toggle { position: relative; width: 18px; height: 18px; }
.toggle::before, .toggle::after { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 4px;
  background: var(--yellow); transition: transform .32s cubic-bezier(.65, 0, .35, 1); }
.toggle::after { transform: rotate(90deg); }
.theme[open] .toggle::after { transform: rotate(180deg); }
.theme.is-closing .toggle::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .toggle::before, .toggle::after { transition: none; } }
.theme summary:hover .theme-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.theme summary:focus-visible { outline-offset: -3px; }
.theme-icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--c); color: var(--fg);
  box-shadow: 0 3px 0 rgba(0,0,0,.35); transform: rotate(-2.5deg); }
.theme-icon svg { width: 26px; height: 26px; }
.theme:nth-of-type(even) .theme-icon { transform: rotate(2deg); }
@media (max-width: 639px) { .theme-icon { width: 38px; height: 38px; } .theme-icon svg { width: 22px; height: 22px; } }
.theme-body { padding: 4px var(--pad) var(--pad); }
.compare { overflow-anchor: none; } /* a rolagem durante a animação é feita no script */
.theme-body > :last-child { margin-bottom: 0; }

.cmp-head, .cmp-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cmp-head { display: none; }
.cmp-row { padding: 20px 0; border-top: 1px solid var(--line); }
.cmp-row:last-child { padding-bottom: 0; }
.cmp-row h3 { margin: 0; font: 900 16px/1.3 "NotoSans-Black", sans-serif; color: var(--yellow); }
/* proposta = recorte de papel colado: leve rotação alternada, sombra e fita no topo */
.cmp-cell { position: relative; background: var(--paper); color: var(--ink); padding: 18px 18px 16px;
  margin-top: 6px; box-shadow: 0 3px 0 rgba(0,0,0,.35); transform: rotate(-.8deg); }
.cmp-cell:nth-of-type(2) { transform: rotate(.7deg); }
.cmp-cell::before { content: ""; position: absolute; top: -8px; left: 50%; width: 64px; height: 16px;
  margin-left: -32px; background: var(--tape); transform: rotate(-3deg); }
.cmp-cell:nth-of-type(2)::before { transform: rotate(4deg); left: 40%; }
.cmp-cell p { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.who { display: block; font: 900 12px/1 "NotoSans-Black", sans-serif; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 8px; }
.ref { white-space: nowrap; font-size: 13px; color: var(--ink-soft); }
@media (min-width: 760px) {
  .cmp-head, .cmp-row { grid-template-columns: 200px 1fr 1fr; gap: 16px; }
  .cmp-head { display: grid; padding-bottom: 10px; color: var(--muted);
    font: 900 14px/1.2 "NotoSans-Black", sans-serif; text-transform: uppercase; }
  .cmp-head small { font: 400 12px "NotoSans-Regular", sans-serif; text-transform: none; margin-left: 4px; }
  .who { display: none; }
  .cmp-row h3 { padding-top: 14px; }
}
.cmp-list { margin: 8px 0 0; padding-left: 22px; max-width: 46em; }
.cmp-list li { margin-bottom: 12px; padding-left: 4px; }
.cmp-list li::marker { color: var(--yellow); }
.cmp-list .ref, .cmp-source a { color: var(--muted); }
.cmp-posts { margin: 24px 0 0; padding: 14px 16px; border-radius: 3px; background: var(--bg);
  font-size: 15px; color: var(--muted); }
.cmp-posts a { color: var(--yellow); text-underline-offset: 3px; }
.cmp-source { margin-top: 40px; max-width: 720px; color: var(--muted); font-size: 15px; }
.cmp-source p { margin: 0 0 12px; }
.compare .links { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }

.theme-share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.theme-share .btn { font-size: 13px; padding: 10px 14px; }
.theme-share .btn svg { width: 17px; height: 17px; }

/* home: índice na primeira tela */
.home-index { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
@media (min-width: 900px) { .home-index { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.home-index a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 14px;
  background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 3px 0 rgba(0,0,0,.35);
  transform: rotate(-1deg); transition: transform .15s; }
.home-index a:nth-child(even) { transform: rotate(1deg); }
.home-index a:first-child { background: var(--yellow); }
.home-index a::before { content: ""; position: absolute; top: -6px; left: 50%; width: 40px; height: 12px;
  margin-left: -20px; background: var(--tape); transform: rotate(3deg); }
.home-index a:hover { transform: translateY(-2px) rotate(-1.5deg); }
.home-index a:focus-visible { outline-offset: 4px; }
.ix-icon svg { width: 26px; height: 26px; margin-bottom: 4px; }
.ix-label { font: 900 16px/1.15 "NotoSans-Black", sans-serif; text-transform: uppercase; }
.home-index small { font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
.home-index a:first-child small { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .home-index a { transition: none; } }

/* home: barra fixa com os mesmos atalhos, só depois que o índice sai da tela */
.home-bar { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; justify-content: center; gap: 4px;
  padding: 6px var(--gutter); background: rgba(43, 42, 39, .92); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: translateY(-100%); visibility: hidden; transition: transform .25s, visibility 0s .25s; }
.home-bar.on { transform: none; visibility: visible; transition: transform .25s; }
.home-bar a { flex: 1 1 0; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px; border-radius: 3px; color: var(--paper); text-decoration: none;
  font: 900 12px/1.1 "NotoSans-Black", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.home-bar svg { width: 20px; height: 20px; }
.home-bar a:first-child { color: var(--yellow); }
.home-bar a:hover { background: var(--bg-2); }
.home-bar a[aria-current] { background: var(--paper); color: var(--ink); }
@media (min-width: 640px) {
  .home-bar a { flex-direction: row; justify-content: center; gap: 8px; font-size: 13px; padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) { .home-bar, .home-bar.on { transition: none; } }

/* home */
.home { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) 56px; }
.home-sec { margin: 0 0 56px; }
.sec-title { display: inline-block; margin: 0 0 22px; padding: 8px 14px; background: var(--paper); color: var(--ink);
  font: 900 clamp(18px, 4.5vw, 24px)/1.2 "NotoSans-Black", sans-serif; text-transform: uppercase;
  transform: rotate(-1deg); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.sec-lede { margin: -6px 0 20px; color: var(--muted); max-width: 38em; }
.hl-list { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .hl-list { grid-template-columns: repeat(2, 1fr); }
  /* número ímpar de cartões: o último ocupa a linha inteira, com Lula e Flávio lado a lado */
  .hl:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .hl:last-child:nth-child(odd) h3, .hl:last-child:nth-child(odd) .hl-more { grid-column: 1 / -1; }
}
.hl { background: var(--bg-2); border-radius: 4px; padding: var(--pad); display: flex; flex-direction: column; gap: 10px; }
.hl h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; color: var(--yellow);
  font: 900 18px/1.25 "NotoSans-Black", sans-serif; text-transform: uppercase; }
.hl .chip-icon { flex: none; width: 28px; height: 28px; }
.hl .who { display: block; }
.hl-more { margin-top: auto; padding-top: 6px; color: var(--yellow); font-weight: 700; text-underline-offset: 3px; }
.theme-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.theme-grid a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg-2);
  border-radius: 4px; text-decoration: none; font: 900 15px/1.25 "NotoSans-Black", sans-serif; }
.theme-grid a:hover { background: var(--bg-3); }
.theme-grid .theme-icon { flex: none; width: 38px; height: 38px; }
.theme-grid .theme-icon svg { width: 22px; height: 22px; }
.theme-grid a:nth-child(even) .theme-icon { transform: rotate(2deg); }
@media (max-width: 639px) {
  .theme-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .theme-grid a { gap: 10px; padding: 8px 10px 8px 8px; font-size: 14px; }
  .theme-grid .theme-icon { width: 32px; height: 32px; }
  .theme-grid .theme-icon svg { width: 18px; height: 18px; }
  .theme-grid .chip-title { display: none; }
  .theme-grid .chip-short { display: block; }
}
.vote-info { margin: 0; max-width: 720px; background: var(--paper); color: var(--ink); border-radius: 3px;
  padding: var(--pad); display: grid; gap: 4px 20px; }
.vote-info dt { font: 900 15px/1.3 "NotoSans-Black", sans-serif; text-transform: uppercase; }
.vote-info dd { margin: 0 0 14px; }
.vote-info dd:last-child { margin-bottom: 0; }
.vote-info a { font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .vote-info { grid-template-columns: 200px 1fr; }
  .vote-info dt { padding-top: 2px; }
  .vote-info dd { margin: 0 0 10px; }
}
.vote-info dt:first-of-type, .vote-info dt:first-of-type + dd { color: var(--ink); }
.vote-info dt:first-of-type { background: var(--yellow); justify-self: start; align-self: start; padding: 2px 8px; transform: rotate(-1deg); }
.grid.strip { padding: 0 0 24px; max-width: none; }
@media (min-width: 900px) { .grid.strip { grid-template-columns: repeat(4, 1fr); } }

.foot { max-width: 1100px; margin: 0 auto; padding: 28px var(--gutter) 48px; color: var(--muted); font-size: 14px;
  border-top: 1px solid var(--bg-2); }