/* ============ HackNews — "Press Sheet" ============
   Sistema visual do site inteiro (todas as páginas geradas + a home). Tema escuro por padrão, claro opcional
   (html[data-theme], aplicado por /tema.js antes da pintura). Um único acento: brasa/vermelhão.
   Fontes self-hosted em /fonts (SIL OFL): Bodoni Moda (títulos), IBM Plex Mono (dados), Source Sans 3 (texto).
   ATENÇÃO: exige font-src 'self' no CSP do Caddy (já é o caso). A home tem estilos próprios em /home.css. */

@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-italic-400-900-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-italic-400-900-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-400-900-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-400-900-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3-italic-200-900-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3-italic-200-900-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3-200-900-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3-200-900-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* fontes antigas ainda usadas pela página /wowforever/ (só baixam se alguém usar) */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/marcellus-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/marcellus-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/open-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/open-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/open-sans-latin-700.woff2") format("woff2"); }

/* ============ Tokens ============ */
:root, html[data-theme="dark"] {
  --papel: #121110;        /* tinta de jornal */
  --papel-2: #1a1816;
  --tinta: #ece5d8;
  --tinta-2: #b9b1a3;      /* 8.6:1 */
  --tinta-3: #9a9285;      /* 6.0:1 */
  --fio: #3b3732;
  --fio-forte: #ece5d8;
  --acento: #f06a43;       /* 6.1:1 sobre --papel */
  --acento-tinta: #121110;
  --pontos: rgba(0, 0, 0, .28);
  color-scheme: dark;
}
html[data-theme="light"] {
  --papel: #f2ecdf;        /* papel sem revestimento */
  --papel-2: #e9e1d1;
  --tinta: #1b1815;
  --tinta-2: #4a443c;      /* 8.9:1 */
  --tinta-3: #625b51;      /* 6.2:1 */
  --fio: #cbbfaa;
  --fio-forte: #1b1815;
  --acento: #b23c19;       /* 5.3:1 sobre --papel */
  --acento-tinta: #fff8ef;
  --pontos: rgba(27, 24, 21, .22);
  color-scheme: light;
}
:root {
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", sans-serif;
  --larg: 1320px;
  --mg: clamp(16px, 3.2vw, 40px);

  /* nomes antigos (CSS das seções: vídeos, livros, busca, consentimento…) apontam para o sistema novo */
  --fundo: var(--papel);
  --superficie: var(--papel);
  --superficie-2: var(--papel-2);
  --texto: var(--tinta);
  --suave: var(--tinta-2);
  --linha: var(--fio);
  --marca: var(--acento);
  --sobre-marca: var(--acento-tinta);
  --sombra: none;
  --sombra-alta: none;
  --topo-fundo: var(--papel);
  --filme: var(--acento); --serie: var(--acento); --anime: var(--acento); --jogo: var(--acento);
  --andamento: var(--tinta);
  --raio: 0px; --raio-p: 0px;
  --titulo: var(--serif);
  --corpo: var(--sans);
  --lateral: var(--mg);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 20px; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* tema claro: papel sem revestimento com fibra leve */
html[data-theme="light"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--acento); }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--papel); padding: 8px 12px; z-index: 50; }
.pular:focus { left: 8px; }
.suave { color: var(--tinta-2); }

/* ============ Cabeçalho (masthead) ============ */
.cabecalho { max-width: var(--larg); margin: 0 auto; padding: 0 var(--mg); }
.faixa-edicao {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font: 500 .75rem/1 var(--mono); letter-spacing: .04em; color: var(--tinta-2);
  padding: 14px 0 12px; border-bottom: 1px solid var(--fio);
}
.edicao { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-dir { display: flex; align-items: center; gap: 4px; flex: none; }
.faixa-dir a, .tema {
  font: 600 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--tinta); background: none; border: 1px solid var(--fio);
  padding: 7px 10px; border-radius: 0; cursor: pointer; display: inline-flex; gap: 7px; align-items: center;
}
.faixa-dir a:hover, .tema:hover { border-color: var(--tinta); color: var(--tinta); }

.masthead {
  position: relative; text-align: center;
  padding: clamp(18px, 3vw, 34px) 0 clamp(12px, 2vw, 20px);
  border-bottom: 4px solid var(--fio-forte);
}
.masthead::after { /* fio duplo: grosso + fino */
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; border-bottom: 1px solid var(--fio-forte);
}
.marca {
  display: inline-block; text-decoration: none; color: var(--tinta);
  font: 800 clamp(3.1rem, 10.5vw, 8.4rem)/.86 var(--serif);
  font-variation-settings: "opsz" 96; letter-spacing: -.02em;
}
.marca i { font-style: italic; font-weight: 500; }
.marca:hover { color: var(--tinta); }
.marca:hover i { color: var(--acento); }
html[data-theme="light"] .marca i { color: var(--acento); }
html[data-theme="light"] .marca:hover i { color: var(--tinta); }
.lema {
  margin: 14px auto 0; max-width: 62ch; text-wrap: balance;
  font: italic 500 clamp(1rem, 1.6vw, 1.2rem)/1.35 var(--serif); color: var(--tinta-2);
}
/* páginas internas: o mesmo masthead, menor */
.masthead-compacta { padding: 16px 0 12px; }
.masthead-compacta .marca { font-size: clamp(2.3rem, 5.6vw, 3.6rem); }
.reg {
  position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -16px;
  border: 1px solid var(--tinta-3); border-radius: 50%;
}
.reg::before, .reg::after { content: ""; position: absolute; background: var(--tinta-3); }
.reg::before { left: 50%; top: -6px; bottom: -6px; width: 1px; }
.reg::after { top: 50%; left: -6px; right: -6px; height: 1px; }
.reg-e { left: 6px; } .reg-d { right: 6px; }

.secoes { margin-top: 12px; border-bottom: 1px solid var(--fio); }
.secoes-rolagem {
  display: flex; align-items: stretch; justify-content: center;
  overflow-x: auto; scrollbar-width: none;
}
.secoes-rolagem::-webkit-scrollbar { display: none; }
.secoes .aba, .aba-link {
  flex: none; background: none; border: 0; border-radius: 0; cursor: pointer;
  font: 600 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2); text-decoration: none; padding: 14px 16px 12px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.secoes .aba:hover, .aba-link:hover { color: var(--tinta); }
.secoes .aba.ativa, .aba-link[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }
.sep { flex: none; width: 1px; background: var(--fio); margin: 10px 8px; }

/* cabeçalho antigo (páginas estáticas que ainda não foram regeneradas) */
.topo { max-width: var(--larg); margin: 0 auto; padding: 0 var(--mg); border-bottom: 4px solid var(--fio-forte); }
.topo-interno { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 16px 0 10px; }
.topo .marca { font-size: 2rem; display: inline-flex; align-items: center; gap: 10px; }
.marca-icone { width: 28px; height: 28px; flex: none; }
.abas { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.abas .aba { font: 600 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); text-decoration: none; padding: 10px 12px; border-bottom: 3px solid transparent; background: none; border-radius: 0; }
.abas .aba:hover { color: var(--tinta); }
.abas .aba[aria-current="page"], .abas .aba.ativa { color: var(--tinta); border-bottom-color: var(--acento); }

/* ============ Layout ============ */
main { display: block; max-width: var(--larg); margin: 0 auto; padding: 0 var(--mg); }

/* migalhas: linha de serviço em mono */
.migalha {
  margin: 26px 0 0; font: 500 .74rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
}
.migalha a { text-decoration: none; color: var(--tinta-2); }
.migalha a:hover { color: var(--acento); text-decoration: underline; }
.migalha [aria-current] { color: var(--tinta); }

/* páginas sem migalhas (404) não colam o título no menu */
#conteudo + .lista-pagina, #conteudo + .pagina { padding-top: 28px; }
/* só para leitores de tela */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* título de página de lista / institucional */
.lista-pagina h1, .pagina h1 {
  margin: 14px 0 14px; font: 600 clamp(2.4rem, 5.4vw, 4.4rem)/.98 var(--serif);
  font-variation-settings: "opsz" 96; letter-spacing: -.018em; text-wrap: balance;
}
.intro { max-width: 68ch; margin: 0; font: italic 500 clamp(1.08rem, 1.5vw, 1.25rem)/1.45 var(--serif); color: var(--tinta-2); }
.intro b { font-style: normal; font-weight: 700; color: var(--tinta); }

/* cada seção abre com o fio grosso de jornal */
.pagina section, .lista-pagina section { margin-top: clamp(40px, 5vw, 60px); }
.pagina h2, .lista-pagina h2 {
  margin: 0 0 16px; padding-top: 10px; border-top: 4px solid var(--fio-forte); position: relative;
  font: 600 clamp(1.6rem, 2.8vw, 2.2rem)/1.05 var(--serif); font-variation-settings: "opsz" 96;
}
.pagina h2::before, .lista-pagina h2::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 1px solid var(--papel); }
.texto { max-width: 68ch; margin: 0 0 12px; line-height: 1.7; }
.texto a, .intro a, .lead a { color: var(--tinta); text-decoration-color: var(--acento); }
.pergunta { margin: 22px 0 6px; font: italic 600 1.25rem/1.25 var(--serif); }

/* ============ Página de título ============ */
.pagina-topo {
  position: relative; margin-top: 18px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: start;
  padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio);
}
.pagina-topo:not(:has(.pagina-capa)) { grid-template-columns: 1fr; }
/* pôster em tamanho nativo com retícula de meio-tom e placa de cor fora de registro */
.pagina-topo .moldura { position: relative; width: min(280px, 100%); }
.pagina-topo .moldura::before {
  content: ""; position: absolute; inset: 0; transform: translate(9px, 9px); background: var(--acento);
}
.pagina-topo .moldura::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--pontos) .7px, transparent 1.3px); background-size: 3px 3px; mix-blend-mode: multiply;
}
.pagina-capa { position: relative; width: 100%; max-width: 280px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: var(--papel-2); }
.pagina-info { min-width: 0; }
.pagina-info h1 { margin-top: 10px; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; }
.chip, .selo {
  font: 600 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; background: none; padding: 0; border-radius: 0;
}
.chip { color: var(--acento); display: inline-flex; align-items: center; gap: 10px; }
.chip::before { content: ""; width: 26px; height: 3px; background: var(--acento); }
.selo { color: var(--tinta-2); }
.selo::before { content: "/"; margin: 0 10px; color: var(--fio); }
.selo-breve { color: var(--tinta); }
.pagina .lead {
  margin: 0 0 22px; max-width: 46ch;
  font: italic 500 clamp(1.15rem, 1.7vw, 1.4rem)/1.38 var(--serif); color: var(--tinta-2);
}
.ficha {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0 0 18px;
  border-top: 1px solid var(--fio-forte); max-width: 62ch;
}
.ficha dt, .ficha dd { padding: 10px 0; border-bottom: 1px dashed var(--fio); }
.ficha dt { padding-right: 22px; font: 500 .7rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.ficha dd { margin: 0; font-weight: 600; }
.ficha a { color: var(--tinta); text-decoration-color: var(--acento); }
.ficha a:hover { color: var(--acento); }
.generos { display: flex; flex-wrap: wrap; margin: 0 0 18px; font: 500 .74rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.generos span + span::before { content: "/"; margin: 0 10px; color: var(--fio); }
.links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
.links a, .ver-mais a, .paginacao a {
  font: 600 .78rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--acento); padding-bottom: 3px; color: var(--tinta);
}
.links a::after { content: " →"; color: var(--acento); }
.links a:hover, .ver-mais a:hover, .paginacao a:hover { color: var(--acento); }
/* HAC-1566: aviso de link de afiliado ao lado do link da loja na ficha do título
   (só aparece quando o programa de afiliado está ativo — ID real no config.json) */
.aviso-afiliado { font: 400 .62rem/1.2 var(--mono); letter-spacing: .04em; color: var(--tinta-3); text-transform: none; }
.ver-mais { margin: 16px 0 0; }
.onde-assistir .texto:last-child { font: 500 .85rem/1.5 var(--mono); color: var(--tinta-2); }
.atualizado-em {
  margin: clamp(36px, 5vw, 56px) 0 0; padding-top: 12px; border-top: 1px solid var(--fio);
  font: 400 .74rem/1.4 var(--mono); letter-spacing: .04em; color: var(--tinta-3);
}

/* ============ Listas de títulos (grade-links) — fichas em colunas com fios, não cartões ============ */
.grade-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 36px;
}
.grade-links li { border-bottom: 1px dashed var(--fio); }
.item-link {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px 0; text-decoration: none; color: var(--tinta);
}
.item-link b { display: block; font: 600 1.08rem/1.22 var(--serif); }
.item-link small { display: block; margin-top: 4px; font: 400 .72rem/1.35 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--tinta-3); }
.item-link:hover { color: var(--tinta); }
.item-link:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.onde-cor { color: var(--tinta-2); }
.mini { width: 40px; height: 60px; object-fit: cover; background: var(--papel-2); }
.mini-vazia {
  display: grid; place-items: center; width: 40px; height: 60px;
  font: italic 600 1.3rem/1 var(--serif); color: var(--tinta-3); border: 1px solid var(--fio); background: none;
}

/* meses / plataformas */
.grade-meses {
  list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--fio-forte);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.grade-meses li { border-bottom: 1px solid var(--fio); border-right: 1px dashed var(--fio); }
.grade-meses a {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 16px 0; height: 100%; text-decoration: none;
  font: 600 1.35rem/1.1 var(--serif); text-transform: capitalize; color: var(--tinta);
}
.grade-meses li:not(:first-child) a { padding-left: 18px; }
.grade-meses a:hover { color: var(--acento); }
.grade-meses small { font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.chips-links { display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.chip-link {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; text-decoration: none;
  font: 600 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta);
  border-right: 1px dashed var(--fio);
}
.chip-link:hover { color: var(--acento); }
.chip-link small { font-weight: 400; color: var(--tinta-3); }
.paginacao { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--fio); }

/* ============ Chamadas e botões ============ */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; text-decoration: none;
  padding: 12px 18px; border: 1px solid var(--tinta); border-radius: 0; background: none; cursor: pointer;
  font: 600 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta);
}
.botao:hover { background: var(--tinta); color: var(--papel); }
.botao-acento, .botao-apoio { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.botao-acento:hover, .botao-apoio:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.botao-menor { padding: 10px 14px; font-size: .74rem; }
.cta-videos { margin: 36px 0 0; }
.cta-discord, .cta-apoio {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 28px;
  margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--fio-forte); border-bottom: 1px solid var(--fio);
}
.cta-apoio { margin-top: 0; border-top: 0; }
.cta-discord p, .cta-apoio p { margin: 0; max-width: 62ch; color: var(--tinta-2); }
.cta-discord b, .cta-apoio b { display: block; margin-bottom: 4px; font: italic 600 1.35rem/1.2 var(--serif); color: var(--tinta); }

/* ============ Rodapé ============ */
.rodape { max-width: var(--larg); margin: clamp(64px, 8vw, 104px) auto 0; padding: 0 var(--mg) 28px; }
.rodape-grade {
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 28px 44px; align-items: start;
  border-top: 4px solid var(--fio-forte); padding-top: 22px;
  font-size: .92rem; color: var(--tinta-2);
}
.marca-pe { margin: 0 0 10px; font: 800 2.2rem/1 var(--serif); color: var(--tinta); letter-spacing: -.02em; }
.marca-pe i { font-weight: 500; }
.rodape-marca p:not(.marca-pe) { margin: 0 0 6px; }
.rodape-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; align-content: start; }
.rodape-links a { font: 500 .78rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); text-decoration: none; }
.rodape-links a:hover { color: var(--acento); text-decoration: underline; }
.rodape-apoio { display: flex; flex-direction: column; gap: 10px; }
.tmdb { margin: 26px 0 0; padding-top: 12px; border-top: 1px solid var(--fio); font: 400 .74rem/1.4 var(--mono); color: var(--tinta-3); }
/* rodapé antigo (páginas estáticas): texto centrado em mono */
.rodape > nav:not(.rodape-links) { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 12px; padding-top: 18px; border-top: 4px solid var(--fio-forte); }
.rodape > nav:not(.rodape-links) a { font: 500 .76rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.rodape > p:not(.tmdb) { margin: 4px 0; text-align: center; font: 400 .74rem/1.5 var(--mono); color: var(--tinta-3); }

/* ============ Responsivo ============ */
@media (max-width: 1100px) {
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-apoio { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .reg { display: none; }
  .faixa-edicao { font-size: .68rem; }
  .secoes-rolagem { justify-content: flex-start; }
  .secoes .aba, .aba-link { padding: 13px 11px 11px; }
  .pagina-topo { grid-template-columns: 1fr; }
  .pagina-topo .moldura { width: 150px; }
  .pagina-topo .moldura::before { transform: translate(6px, 6px); }
  .cta-discord, .cta-apoio { grid-template-columns: 1fr; }
  .cta-discord .botao, .cta-apoio .botao { justify-self: start; }
  .grade-meses li { border-right: 0; }
  .grade-meses li:not(:first-child) a { padding-left: 0; }
  .rodape-grade { grid-template-columns: 1fr; }
  .rodape-apoio { grid-column: auto; }
  .ficha { grid-template-columns: 1fr; }
  .ficha dt { padding-bottom: 0; border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ============ Tema Night Blue (2026-10-16) ============
   Mesmo visual do live.hackbatista.com: azul-marinho que desce para azul, um azul vivo para ações,
   cartões e botões arredondados, pílulas, Outfit (SIL OFL, self-hosted em /fonts) em tudo.
   Só cores, fontes e acabamento: o layout das páginas continua o do "Press Sheet" acima.
   Tema anterior (AION, 2026-10-14): ~/deploy-backups/tema-nightblue-*/style.css */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root, html[data-theme="dark"] {
  --papel: #08081c;
  --papel-2: #191d24;
  --papel-3: #232834;
  --tinta: #fcfcfc;
  --tinta-2: #c4c9d4;
  --tinta-3: #8b93a3;
  --fio: #2c3240;
  --fio-forte: #3a4152;
  --acento: #2b8cff;
  --acento-forte: #0070d1;
  --acento-tinta: #ffffff;
  --pontos: transparent;
  --brilho: linear-gradient(180deg, #08081c 0%, #08081c 30%, #0a2a5a 72%, #08081c 100%);
  --sombra-nb: 0 10px 30px rgb(0 0 0 / .35);
  color-scheme: dark;
}
html[data-theme="light"] {
  --papel: #fcfcfc;
  --papel-2: #ffffff;
  --papel-3: #f1f4f9;
  --tinta: #1d1f24;
  --tinta-2: #363636;
  --tinta-3: #6b7280;
  --fio: #ebebeb;
  --fio-forte: #d5d9e0;
  --acento: #0a7fe6;
  --acento-forte: #0070d1;
  --acento-tinta: #ffffff;
  --pontos: transparent;
  --brilho: linear-gradient(180deg, #eef4fc 0%, #fcfcfc 70%);
  --sombra-nb: 0 10px 30px rgb(16 40 80 / .08);
  color-scheme: light;
}
:root {
  --sans: "Outfit", "Segoe UI", system-ui, sans-serif;
  --serif: var(--sans);
  --mono: var(--sans);
  --larg: 1220px;
  --mg: clamp(16px, 3.2vw, 32px);
  --r: 10px;
  --r-card: 20px;
  --raio: 20px; --raio-p: 10px;
  --superficie: var(--papel-2);
}
::selection { background: #0070d1; color: #fff; }

/* fundo: azul-marinho que acende em azul (igual à home do live) */
body, html[data-theme="light"] body {
  background: var(--brilho) no-repeat, var(--papel); background-size: 100% 900px, auto;
}
h1, h2, h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -.02em; }
.pular { border-radius: var(--r); }

/* ---------- Cabeçalho: marca à esquerda, botões à direita, seções em pílulas embaixo ---------- */
.cabecalho {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
}
.faixa-edicao { grid-column: 2; grid-row: 1; padding: 18px 0; border: 0; font: 400 .9rem/1 var(--sans); letter-spacing: 0; color: var(--tinta-2); }
.edicao { display: none; }
.faixa-dir { gap: 8px; }
.faixa-dir a, .tema {
  font: 500 .9rem/1 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--tinta); background: transparent; border: 1px solid var(--fio-forte);
  padding: 10px 16px; border-radius: 999px; gap: 8px;
}
.faixa-dir a:hover, .tema:hover { background: var(--papel-3); border-color: var(--fio-forte); color: var(--tinta); }
.masthead, .masthead-compacta {
  grid-column: 1; grid-row: 1; text-align: left; padding: 18px 0; border: 0;
}
.masthead::after { display: none; }
.reg, .lema { display: none; }
.marca, .masthead-compacta .marca, .topo .marca {
  display: inline-flex; align-items: center; text-decoration: none; color: var(--tinta);
  font: 700 1.6rem/1 var(--sans); letter-spacing: -.03em; font-variation-settings: normal;
}
/* chip da marca: quadrado azul com "play" branco, como no HackLive */
.marca::before {
  content: ""; width: 34px; height: 34px; margin-right: 10px; border-radius: 10px; flex: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5v9l7.5-4.5z' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat,
    linear-gradient(135deg, #2b8cff, #0070d1 55%, #3b2fd9);
  box-shadow: 0 6px 16px rgb(0 112 209 / .35);
}
.marca i, html[data-theme="light"] .marca i { font-style: normal; font-weight: 400; color: var(--acento); }
.marca:hover, .marca:hover i, html[data-theme="light"] .marca:hover i { color: var(--tinta); }
.marca:hover i { color: var(--acento); }
.marca-icone { display: none; }

.secoes { grid-column: 1 / -1; margin: 4px 0 0; border: 0; }
.secoes-rolagem { justify-content: flex-start; gap: 6px; padding: 4px 0; }
.secoes .aba, .aba-link, .abas .aba {
  font: 500 .92rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tinta-2);
  padding: 10px 16px; margin: 0; border: 1px solid transparent; border-radius: 999px; background: none;
}
.secoes .aba:hover, .aba-link:hover, .abas .aba:hover { color: var(--tinta); background: var(--papel-3); }
.secoes .aba.ativa, .aba-link[aria-current="page"], .abas .aba[aria-current="page"], .abas .aba.ativa {
  color: #fff; background: var(--acento-forte); border-color: var(--acento-forte);
}
.sep { margin: 8px 6px; }
.topo { border-bottom: 1px solid var(--fio); }

/* ---------- Títulos e textos ---------- */
.migalha, .ficha dt, .chip, .selo, .generos, .item-link small, .grade-meses small, .chip-link,
.links a, .ver-mais a, .paginacao a, .atualizado-em, .tmdb, .rodape-links a, .onde-assistir .texto:last-child {
  font-family: var(--sans); letter-spacing: 0; text-transform: none;
}
.lista-pagina h1, .pagina h1 { font-weight: 500; letter-spacing: -.035em; font-variation-settings: normal; }
.intro, .pagina .lead { font: 400 clamp(1.05rem, 1.5vw, 1.2rem)/1.5 var(--sans); }
.pagina h2, .lista-pagina h2 { border-top: 1px solid var(--fio); padding-top: 16px; font-weight: 500; font-variation-settings: normal; }
.pagina h2::before, .lista-pagina h2::before { display: none; }
.pergunta { font: 600 1.15rem/1.3 var(--sans); }
.item-link b, .grade-meses a { font-family: var(--sans); font-weight: 500; }
.chip { color: var(--acento); }
.chip::before { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.mini, .mini-vazia { border-radius: 6px; }

/* pôster: cantos arredondados e sombra azul, sem placa fora de registro */
.pagina-topo { border-color: var(--fio); }
.pagina-topo .moldura::before { transform: none; inset: 10px; background: rgb(43 140 255 / .5); filter: blur(22px); opacity: .6; }
.pagina-topo .moldura::after { display: none; }
.pagina-capa { border-radius: 16px; border: 1px solid var(--fio); }
.ficha { border-top-color: var(--fio-forte); }

/* chips de links: pílulas */
.chips-links { gap: 8px; border: 0; padding: 4px 0; }
.chip-link {
  padding: 9px 14px; border: 1px solid var(--fio-forte); border-radius: 999px; font-weight: 500; font-size: .9rem;
}
.chip-link:hover { background: var(--papel-3); color: var(--tinta); }
.grade-meses { gap: 10px; border: 0; }
.grade-meses li { border: 1px solid var(--fio); border-radius: var(--r-card); background: var(--papel-2); }
.grade-meses a, .grade-meses li:not(:first-child) a { padding: 16px 18px; }
.links a, .ver-mais a, .paginacao a { font-size: .95rem; font-weight: 600; color: var(--acento); border-bottom: 0; }
.links a:hover, .ver-mais a:hover, .paginacao a:hover { color: var(--tinta); }

/* ---------- Botões: retângulo arredondado azul (primário) e branco (secundário), como no live ---------- */
.botao, .agenda-mais button {
  padding: 13px 22px; border: 1px solid #fcfcfc; border-radius: var(--r);
  background: #fcfcfc; color: #0070d1; box-shadow: none;
  font: 700 .95rem/1 var(--sans); letter-spacing: 0; text-transform: none;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.botao:hover { background: #fff; border-color: #fff; color: #005fb3; }
html[data-theme="light"] .botao, html[data-theme="light"] .agenda-mais button { background: #fff; border-color: #0070d1; }
html[data-theme="light"] .botao:hover { background: #eef4fc; color: #005fb3; }
.botao-acento, .botao-apoio, html[data-theme="light"] .botao-acento, html[data-theme="light"] .botao-apoio {
  background: var(--acento-forte); border-color: var(--acento-forte); color: #fff;
}
.botao-acento:hover, .botao-apoio:hover, html[data-theme="light"] .botao-acento:hover, html[data-theme="light"] .botao-apoio:hover {
  background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 6px 18px rgb(0 112 209 / .3);
}

/* chamadas: cartões */
.cta-discord, .cta-apoio {
  padding: clamp(20px, 3vw, 28px); background: var(--papel-2); border: 1px solid var(--fio);
  border-radius: 30px; box-shadow: var(--sombra-nb);
}
.cta-apoio { margin-top: 16px; border-top: 1px solid var(--fio); }
.cta-discord b, .cta-apoio b { font: 600 1.3rem/1.25 var(--sans); }

/* ---------- Rodapé ---------- */
.rodape-grade { border-top: 1px solid var(--fio); }
.marca-pe { font: 700 1.6rem/1 var(--sans); letter-spacing: -.03em; }
.marca-pe i { font-style: normal; font-weight: 400; color: var(--acento); }
.rodape-links a { font-size: .92rem; font-weight: 400; color: var(--tinta-2); }
.rodape-links a:hover { color: var(--acento); text-decoration: none; }
.rodape > nav:not(.rodape-links) { border-top: 1px solid var(--fio); }

@media (max-width: 760px) {
  .faixa-dir a { padding: 9px 12px; }
  .marca, .masthead-compacta .marca { font-size: 1.4rem; }
  .marca::before { width: 30px; height: 30px; }
}