/* Padrão Kael, estrutura em abas. Dois temas: Papel (claro, padrão) e Noite (escuro), trocados pelo botão do menu.
   Azul é a cor de destaque; o laranja aparece só no ponto da etiqueta "em destaque".
   Sem sombras, sem cantos arredondados, sem animação de hover (regras do David para os sites dele). */
:root { --titulo: "Young Serif", Georgia, serif; --italico: Fraunces, Georgia, serif; }
:root, [data-tema="papel"] {
  --bg: #F5F8FD; --sup: #FFFFFF; --linha: #1F2A5C1F; --txt: #1F2A5C; --suave: #4D5576;
  --dest: #4A5FE0; --dest2: #3B4FC4; --chip: #1F2A5C33; --chipfundo: #E1EBFF; --chiptxt: #3B4FC4;
  --btn: #4A5FE0; --btntxt: #FFFFFF; --quente: #F28C28; --listra: #4A5FE00F; --img: #1F2A5C1F; --grafite: #4A5FE0; --grafite-forca: .16;
  color-scheme: light;
}
[data-tema="noite"] {
  --bg: #121833; --sup: #1A2246; --linha: #9CC2FF2E; --txt: #F3F1EA; --suave: #B9C0DA;
  --dest: #9CC2FF; --dest2: #B8D3FF; --chip: #9CC2FF55; --chipfundo: #9CC2FF1F; --chiptxt: #B8D3FF;
  --btn: #9CC2FF; --btntxt: #121833; --quente: #F28C28; --listra: #9CC2FF12; --img: #9CC2FF2E; --grafite: #9CC2FF; --grafite-forca: .12;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--txt); font-family: Quicksand, system-ui, sans-serif; font-size: 16px; line-height: 1.6; font-weight: 500; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--dest); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
/* fundo grafite: desenhos de marcador repetidos, na cor do tema e bem apagados */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--grafite); opacity: var(--grafite-forca);
  -webkit-mask: url(/fundo.svg) 40px 30px / 900px repeat; mask: url(/fundo.svg) 40px 30px / 900px repeat; }
.abas, .wrap, .rodape { position: relative; z-index: 1; }
.abas { z-index: 5; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 8px; background: var(--btn); color: var(--btntxt); padding: 4px 12px; z-index: 9; }

/* menu em abas */
.abas { position: sticky; top: 16px; z-index: 5; display: flex; justify-content: center; padding: 18px 16px 0; }
.abas nav { display: flex; align-items: center; gap: 2px; background: var(--sup); border: 1px solid var(--linha); padding: 5px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.abas nav::-webkit-scrollbar { display: none; }
.abas a, .tema { flex: none; padding: 8px 15px; font: inherit; font-size: 14px; font-weight: 700; color: var(--suave); white-space: nowrap; }
.abas a.on { background: var(--txt); color: var(--bg); }
.ctl { display: flex; align-items: center; }
.ctl-card { display: none; }
.abas a.lang { color: var(--dest2); }
.abas .sep { flex: none; width: 1px; height: 20px; background: var(--linha); margin: 0 6px; }
.tema { display: flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; }
.tema svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tema .i-lua { display: inline-flex; }
.tema .i-sol, .tema .t-papel { display: none; }
[data-tema="noite"] .tema .i-sol { display: inline-flex; }
[data-tema="noite"] .tema .t-papel { display: inline; }
[data-tema="noite"] .tema .i-lua, [data-tema="noite"] .tema .t-noite { display: none; }

/* moldura */
.wrap { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 72px; padding: 52px 24px 80px; }
.card { position: sticky; top: 92px; align-self: start; background: var(--sup); border: 1px solid var(--linha); padding: 18px 18px 20px; }
.retrato { position: relative; aspect-ratio: 4 / 5; background: var(--chipfundo); display: grid; place-items: center; overflow: hidden; color: var(--dest); }
.retrato span { font-family: var(--titulo); font-style: italic; font-weight: 700; font-size: 92px; letter-spacing: -.04em; }
.retrato svg { position: absolute; right: 18px; bottom: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.card-nome { font-family: var(--titulo); font-weight: 700; font-size: 29px; line-height: 1.05; margin: 18px 0 6px; letter-spacing: -.01em; }
.card-papel { font-size: 14px; font-weight: 700; color: var(--dest2); }
.card-pitch { font-size: 14px; color: var(--suave); margin-top: 10px; line-height: 1.55; }
.card-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); font-size: 13px; font-weight: 700; color: var(--dest2); }
.card-links a:hover, .sec-h a:hover, .texto a:hover { text-decoration: underline; text-underline-offset: 3px; }
main { position: relative; min-width: 0; }

/* títulos */
.big { font-family: var(--titulo); font-weight: 400; font-size: 46px; line-height: 1.1; letter-spacing: -.015em; }
.big span { display: block; color: var(--dest); }
.big.m { font-size: 44px; }
.lede { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dest2); margin-top: 18px; }
.intro { font-size: 18px; color: var(--suave); max-width: 640px; margin-top: 18px; }
.intro + .intro { margin-top: 12px; }
.doodle { position: absolute; right: 0; top: 0; color: var(--dest); opacity: .7; pointer-events: none; }
.doodle svg { display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.topo { position: relative; padding-right: 90px; }

/* seções */
.sec { margin-top: 68px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--linha); padding-bottom: 12px; margin-bottom: 26px; }
.sec-h h2 { font-family: var(--titulo); font-weight: 700; font-size: 29px; letter-spacing: -.01em; line-height: 1.15; }
.sec-h a { flex: none; font-size: 14px; font-weight: 700; color: var(--dest2); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 12px; font-weight: 700; padding: 2px 8px; border: 1px solid var(--chip); color: var(--suave); line-height: 1.6; }
.chip.d { border-color: transparent; background: var(--chipfundo); color: var(--chiptxt); }
.chip.q::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--quente); margin-right: 6px; vertical-align: 1px; }

/* cartões de obra */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; }
.obra img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--img); background: var(--sup); }
.obra h3 { font-family: var(--titulo); font-size: 23px; font-weight: 700; margin: 14px 0 6px; line-height: 1.2; }
.obra p { font-size: 15px; color: var(--suave); }
.obra:hover h3 { color: var(--dest2); }

/* linhas (edições, jogos, trajetória) */
.linhas { list-style: none; }
.linhas li { border-bottom: 1px solid var(--linha); }
.linhas li > a, .linhas li > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 24px; gap: 24px; padding: 22px 0; }
.linhas.sem-img li > a, .linhas.sem-img li > div { grid-template-columns: minmax(0, 1fr) 24px; }
.linhas img { width: 150px; aspect-ratio: 315 / 250; object-fit: cover; border: 1px solid var(--img); background: var(--sup); }
.linhas h3 { font-family: var(--titulo); font-size: 22px; font-weight: 700; line-height: 1.2; }
.linhas p { font-size: 15px; color: var(--suave); margin-top: 6px; }
.linhas .seta { color: var(--dest2); font-size: 20px; font-weight: 700; text-align: right; }
.linhas a:hover h3 { color: var(--dest2); }

/* painel grande com a arte da obra (estilo Black Hole) */
.painel { position: relative; min-height: 380px; overflow: hidden; border: 1px solid var(--img); display: flex; align-items: flex-end; background: #0C1024; }
.painel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.painel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,16,36,.94) 0, rgba(12,16,36,.72) 48%, rgba(12,16,36,0) 78%); }
.painel .tx { position: relative; z-index: 1; padding: 34px; max-width: 480px; color: #F3F1EA; }
.painel h3 { font-family: var(--titulo); font-size: 46px; font-weight: 800; line-height: 1; margin-top: 12px; }
.painel p { color: #D3D8EA; margin-top: 10px; font-size: 15px; }
.painel .chip { color: #D3D8EA; border-color: #9CC2FF55; }
.painel .chip.d { background: #9CC2FF33; color: #E1EBFF; }
.painel.alto { min-height: 460px; }
.btn { display: inline-block; margin-top: 18px; background: var(--btn); color: var(--btntxt); font-weight: 700; font-size: 14px; padding: 10px 18px; }
.painel .btn { background: #9CC2FF; color: #121833; }
.btn.o { background: transparent; color: var(--dest2); border: 1px solid var(--dest2); }

/* fala comigo */
.fala { margin-top: 84px; position: relative; padding-right: 120px; }
.fala .big { font-size: 42px; }
.fala .btn { word-break: break-all; }

/* leitura (edição e conto) */
.texto { max-width: 680px; font-size: 18px; line-height: 1.75; margin-top: 36px; }
.texto p, .texto ul, .texto ol, .texto blockquote, .texto figure { margin-bottom: 1.1em; }
.texto h1, .texto h2, .texto h3, .texto h4 { font-family: var(--titulo); line-height: 1.25; margin: 1.6em 0 .5em; }
.texto h2 { font-size: 28px; } .texto h3 { font-size: 24px; } .texto h4 { font-size: 20px; }
.texto a { color: var(--dest2); text-decoration: underline; text-decoration-color: var(--chip); text-underline-offset: 3px; }
.texto ul, .texto ol { padding-left: 1.4em; }
.texto blockquote { border-left: 2px solid var(--dest); padding-left: 18px; font-family: var(--titulo); font-style: italic; color: var(--suave); }
.texto img { margin: 1.2em 0; border: 1px solid var(--img); }
.texto figcaption { font-size: 14px; color: var(--suave); line-height: 1.5; }
.texto hr { border: 0; border-top: 1px solid var(--linha); margin: 2em 0; }
.texto .fonte { margin-top: 2.4em; padding-top: 1em; border-top: 1px solid var(--linha); font-size: 15px; color: var(--suave); }
.linha-fina { font-family: var(--titulo); font-size: 22px; line-height: 1.4; color: var(--suave); margin-top: 14px; max-width: 680px; }
.aviso { background: var(--chipfundo); border-left: 3px solid var(--dest); padding: 12px 16px; color: var(--txt); }
.capa-conto { margin-top: 30px; border: 1px solid var(--img); aspect-ratio: 21 / 9; width: 100%; object-fit: cover; }
.credito { font-size: 13px; color: var(--suave); margin-top: 8px; }
.conto p { text-indent: 1.4em; }
.conto p.aviso, .conto p.assinatura, .conto p.fonte { text-indent: 0; }
.assinatura { font-family: var(--titulo); font-style: italic; margin-top: 1.6em; }

/* leitor de HQ */
.leitor-palco { display: grid; gap: 28px; justify-items: center; }
.leitor-palco figure { width: 100%; max-width: 720px; }
.leitor-palco img { width: 100%; border: 1px solid var(--img); background: #fff; }
.leitor-palco figcaption { font-size: 13px; font-weight: 700; color: var(--suave); margin-top: 6px; }

.rodape { max-width: 1160px; margin: 0 auto; padding: 22px 24px 34px; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13px; color: var(--suave); }
.rodape nav { display: flex; gap: 18px; }
.rodape a:hover { color: var(--dest2); }

/* tela de acesso enquanto o site está fechado */
.porta-wrap { max-width: 560px; margin: 0 auto; padding: 18vh 24px 40px; }
.porta { display: flex; gap: 10px; margin-top: 28px; }
.porta input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--chip); background: var(--sup); font: inherit; color: var(--txt); padding: 0 12px; }
.porta input:focus { outline: 2px solid var(--dest); outline-offset: 1px; }
.porta button { height: 44px; border: 0; background: var(--btn); color: var(--btntxt); font: inherit; font-weight: 700; padding: 0 18px; cursor: pointer; }

/* tablet */
@media (max-width: 1060px) {
  .wrap { grid-template-columns: 240px minmax(0, 1fr); gap: 44px; }
  .big { font-size: 44px; } .big.m, .fala .big { font-size: 38px; }
}

/* celular: o cartão vira uma faixa compacta no topo e tudo fica em uma coluna */
@media (max-width: 820px) {
  .abas { top: 8px; padding: 10px 8px 0; }
  .abas a, .tema { padding: 7px 9px; font-size: 13px; }
  .ctl-nav { display: none; }
  .ctl-card { display: flex; grid-column: 1 / -1; justify-content: space-between; border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 2px; }
  .ctl-card .tema { padding: 4px 0; font-size: 13px; color: var(--suave); }
  .ctl-card .lang { font-size: 13px; font-weight: 700; color: var(--dest2); padding: 4px 0; }
  .abas nav { justify-content: center; }
  .wrap { grid-template-columns: 1fr; gap: 36px; padding: 28px 16px 56px; }
  .card { position: static; display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 14px; align-items: start; }
  .retrato span { font-size: 40px; }
  .retrato svg { display: none; }
  .card-nome { font-size: 22px; margin: 0 0 2px; }
  .card-papel { font-size: 13px; }
  .card-pitch { display: none; }
  .card-links { margin-top: 10px; padding-top: 10px; gap: 4px 12px; }
  .big { font-size: 34px; } .big.m, .fala .big { font-size: 32px; }
  .topo, .fala { padding-right: 0; }
  .doodle { display: none; }
  .intro { font-size: 17px; }
  .sec { margin-top: 52px; }
  .sec-h h2 { font-size: 24px; }
  .grid2 { grid-template-columns: 1fr; gap: 30px; }
  .linhas li > a, .linhas li > div { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
  .linhas.sem-img li > a, .linhas.sem-img li > div { grid-template-columns: 1fr; }
  .linhas img { width: 96px; }
  .linhas .seta { display: none; }
  .linhas h3 { font-size: 19px; }
  .painel, .painel.alto { min-height: 0; flex-direction: column; align-items: stretch; }
  .painel > img { position: static; height: 190px; }
  .painel::after { display: none; }
  .painel .tx { padding: 20px; max-width: none; }
  .painel h3 { font-size: 34px; }
  .texto { font-size: 17px; }
  .linha-fina { font-size: 19px; }
  .rodape { padding: 18px 16px 28px; }
}

/* utilitários (o site não usa estilo inline por causa da regra de segurança) */
.p22 { object-position: 50% 22%; }
.p30 { object-position: 50% 30%; }
.mt { margin-top: 16px; }
.voltar { text-align: center; max-width: none; margin-top: 32px; }
.voltar a { color: var(--dest2); font-weight: 700; }
.linhas p.forte { margin: 0; color: var(--txt); font-size: 16px; }

/* Young Serif só tem um peso: os títulos ficam no 400, e o itálico continua em Fraunces */
.sec-h h2, .obra h3, .linhas h3, .painel h3, .card-nome, .texto h1, .texto h2, .texto h3, .texto h4 { font-weight: 400; }
.retrato span, .linha-fina, .texto blockquote, .assinatura { font-family: var(--italico); }

/* painéis empilhados (Jogos) */
.painel + .painel { margin-top: 24px; }
.painel .btn + .btn { margin-left: 8px; }
.painel .btn.o { color: #DCE8FF; border-color: #9CC2FF; background: transparent; }

/* livro (Escrita) */
.livro { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; background: var(--sup); border: 1px solid var(--linha); padding: 20px; }
.livro img { width: 100%; border: 1px solid var(--img); }
.livro h3 { font-family: var(--titulo); font-weight: 400; font-size: 30px; line-height: 1.15; margin-top: 12px; }
.livro p { color: var(--suave); margin-top: 8px; max-width: 520px; }

/* leitor de HQ: com JavaScript vira uma página por vez */
.leitor { margin-top: 32px; }
.leitor-barra { display: none; }
.leitor.ativo .leitor-palco { position: relative; cursor: pointer; display: flex; justify-content: center; }
.leitor.ativo figure { display: none; max-width: 640px; width: 100%; }
.leitor.ativo figure.on { display: block; }
.leitor.ativo figcaption { display: none; }
.leitor.ativo .leitor-barra { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.leitor-barra button { display: inline-flex; align-items: center; gap: 8px; height: 42px; min-width: 42px; justify-content: center; border: 1px solid var(--chip); background: var(--sup); color: var(--txt); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0 12px; }
.leitor-barra button:disabled { opacity: .35; cursor: default; }
.leitor-barra svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.leitor-cont { min-width: 70px; text-align: center; font-weight: 700; font-size: 14px; color: var(--suave); }
.leitor-cheia { margin-left: 12px; }
.leitor:fullscreen { background: #0C1024; display: flex; flex-direction: column; justify-content: center; padding: 16px; margin: 0; }
.leitor:fullscreen figure { max-width: none; width: auto; }
.leitor:fullscreen img { max-height: calc(100vh - 92px); width: auto; margin: 0 auto; border: 0; }
.leitor:fullscreen .leitor-barra button { background: #1A2246; color: #F3F1EA; border-color: #9CC2FF55; }
.leitor:fullscreen .leitor-cont { color: #B9C0DA; }
@media (max-width: 820px) {
  .livro { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .livro h3 { font-size: 22px; }
  .leitor-cheia span { display: none; }
  .leitor-cheia { margin-left: 4px; }
}

/* ===== Cápsulas (escolha do David, 19/10): todo conteúdo em superfície sólida, para o grafite ficar só no fundo.
   Cartões com canto de 6px; menu, etiquetas, botões e títulos de seção em formato de cápsula. ===== */
:root { --raio: 6px; }
.abas nav { border-radius: 999px; padding: 5px 6px; }
.abas a.on { border-radius: 999px; }
.abas a, .tema { border-radius: 999px; }
.card { border-radius: var(--raio); }
.retrato { border-radius: 4px; }
.chip { border-radius: 999px; padding: 2px 10px; background: var(--sup); }
.chip.d { background: var(--chipfundo); }
.btn { border-radius: 999px; padding: 10px 20px; }

/* capa de cada página numa caixa azul-clara */
.topo { background: var(--chipfundo); padding: 36px 120px 36px 36px; border-radius: var(--raio); }
.topo .doodle { right: 32px; top: 28px; }
.topo .intro { color: var(--txt); opacity: .85; }

/* títulos de seção em cápsula preenchida */
.sec-h { border-bottom: 0; margin-bottom: 18px; padding-bottom: 0; align-items: center; }
.sec-h h2 { display: inline-block; background: var(--txt); color: var(--bg); font-size: 19px; line-height: 1.3; padding: 6px 18px 7px; border-radius: 999px; }
.sec-h a { background: var(--sup); border: 1px solid var(--linha); border-radius: 999px; padding: 5px 14px; }

/* cartões */
.obra { display: block; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; padding-bottom: 18px; }
.obra img { border: 0; border-bottom: 1px solid var(--linha); }
.obra h3, .obra p, .obra .chips { margin-left: 18px; margin-right: 18px; }
.linhas li { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 12px; }
.linhas li:last-child { margin-bottom: 0; }
.linhas li > a, .linhas li > div { padding: 16px 18px; }
.linhas img { border-radius: 4px; }
.painel { border-radius: var(--raio); }
.livro { border-radius: var(--raio); }
.livro img { border-radius: 4px; }

/* fala comigo em caixa */
.fala { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 36px 120px 40px 36px; }
.fala .doodle { right: 32px; top: 30px; }

/* páginas de leitura: o texto numa folha sólida */
.texto { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 36px 44px; max-width: 780px; margin-top: 24px; }
.capa-conto { border-radius: var(--raio); margin-top: 24px; }
.credito { background: var(--sup); display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--linha); }

/* leitor da HQ */
.leitor { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; margin-top: 24px; }
.leitor-palco img { border-radius: 2px; }
.leitor-barra button { border-radius: 999px; }
.leitor:fullscreen { border-radius: 0; border: 0; }

/* tela de acesso */
.porta-wrap { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); margin-top: 14vh; padding: 40px; }
.porta input { border-radius: 999px; padding: 0 18px; }
.porta button { border-radius: 999px; }

.rodape { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 20px; max-width: 1112px; }

@media (max-width: 820px) {
  .topo { padding: 24px 20px; }
  .fala { padding: 26px 20px 28px; }
  .texto { padding: 22px 18px; }
  .leitor { padding: 12px; }
  .linhas li > a, .linhas li > div { padding: 12px; }
  .obra h3, .obra p, .obra .chips { margin-left: 14px; margin-right: 14px; }
  .sec-h h2 { font-size: 17px; }
  .rodape { margin: 0 16px 16px; }
  .porta-wrap { margin: 10vh 16px 0; padding: 24px; }
}
.painel .chip { background: transparent; }
.painel .chip.d { background: #9CC2FF33; }
.caixa { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.caixa .chips { margin-top: 0; }
/* caixa da capa sempre sólida (no Noite o azul-claro de fundo é translúcido e deixava o grafite aparecer) */
:root, [data-tema="papel"] { --capa: #E1EBFF; }
[data-tema="noite"] { --capa: #1F2950; }
.topo { background: var(--capa); }
/* retrato do David no cartão (foto em preto e branco) */
.retrato { background: #222; }
.retrato picture, .retrato img { display: block; width: 100%; height: 100%; }
.retrato img { object-fit: cover; }
@media (max-width: 820px) { .retrato { aspect-ratio: 1; } }
.linhas.sem-img .btn { margin-top: 12px; }
.topo .btn + .leitor { margin-top: 24px; }

/* cartão: descrição equilibrada e redes como ícones */
.card-papel { font-size: 13.5px; line-height: 1.45; text-wrap: balance; }
.card-links { gap: 8px; }
.card-links a { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--linha); border-radius: 999px; color: var(--dest2); background: var(--sup); }
.card-links a:hover { background: var(--chipfundo); text-decoration: none; }
.card-links svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-links svg.cheio { fill: currentColor; stroke: none; }
@media (max-width: 820px) { .card-links a { width: 34px; height: 34px; } .card-links svg { width: 16px; height: 16px; } }
/* quebras de linha mais bonitas: títulos equilibrados, parágrafos sem palavra sozinha na última linha */
h1, h2, h3, .big, .card-nome { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* tradução das páginas com texto (O Coveiro no modo inglês) */
.nota-trad { max-width: 640px; margin: 12px auto 0; font-size: 14px; line-height: 1.6; color: var(--suave); background: var(--chipfundo); border-radius: var(--raio); padding: 10px 14px; text-align: left; }

/* ===== Contraste (20/10): cápsulas de destaque preenchidas, bordas das comuns e dos cartões mais fortes,
   fundo do Papel um pouco mais escuro para os cartões brancos se destacarem. Medido em WCAG: cápsulas ≥ 3,4:1. ===== */
:root, [data-tema="papel"] {
  --bg: #E6ECF7; --linha: #1F2A5C40; --chip: #1F2A5C8C; --chipfundo: #3B4FC4; --chiptxt: #FFFFFF;
  --capa: #D6E2FB; --img: #1F2A5C33; --suave: #444C6B;
}
[data-tema="noite"] {
  --bg: #0D1230; --sup: #1C2550; --linha: #9CC2FF4D; --chip: #9CC2FFA6; --chipfundo: #9CC2FF; --chiptxt: #121833;
  --capa: #232E5E;
}
.chip { color: var(--txt); }
.chip.d { font-weight: 700; }
/* cápsula do título de seção e dos links continuam no tom do texto */
.sec-h a { border-color: var(--chip); }
/* nos painéis escuros, as cápsulas seguem claras e legíveis */
.painel .chip { color: #E6ECFF; border-color: #9CC2FFA6; }
.painel .chip.d { background: #9CC2FF; color: #121833; }
/* a capa (caixa do topo) precisa de fundo próprio no Noite */
.retrato { background: var(--capa); }
/* tom claro para avisos e notas (o --chipfundo agora é o azul cheio das cápsulas) */
:root, [data-tema="papel"] { --claro: #DCE6FB; }
[data-tema="noite"] { --claro: #9CC2FF26; }
.aviso, .nota-trad { background: var(--claro); }
.nota-trad { color: var(--txt); }
.card-links a:hover { background: var(--claro); }
.texto-caixa { padding: 22px 26px; font-size: 17px; line-height: 1.7; color: var(--suave); }
.texto-caixa p + p { margin-top: 12px; }
.texto-caixa strong { color: var(--txt); font-weight: 700; }
/* o bloco do Papel acima também vale para :root; o Noite precisa repetir as cores que ele redefine */
[data-tema="noite"] { --suave: #B9C0DA; --img: #9CC2FF2E; }
/* no celular, título de seção e link do lado quebram em duas linhas quando não cabem */
@media (max-width: 820px) { .sec-h { flex-wrap: wrap; row-gap: 10px; } .sec-h a { flex: 0 1 auto; } }