:root {
  --fundo: #fbfaf8;
  --texto: #1d1c1a;
  --suave: #6a6660;
  --linha: #e4e1db;
  --destaque: #f1eee8;
  --link: #1f5fa8;
  --largura: 42rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #161615;
    --texto: #ebe9e4;
    --suave: #a29e96;
    --linha: #2e2d2a;
    --destaque: #22211f;
    --link: #8cb8ec;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 1.125rem/1.7 Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* capa e apresentação de ponta a ponta não criam rolagem lateral */
}
a { color: var(--link); text-underline-offset: 0.15em; }
img { max-width: 100%; height: auto; display: block; }

.topo, main, .rodape { max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }
/* Cabeçalho e rodapé chegam pelo /moldura.js: a altura reservada evita a página pular quando eles aparecem. */
.topo { padding-top: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.5rem; }

/* Menus da barra (Categorias e língua): abrem e fecham só no clique de quem lê. */
.menus { display: flex; align-items: center; gap: 0.5rem; }
.idiomas, .categorias { position: relative; margin: 0; font: 0.9rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.idiomas summary, .categorias summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border: 1px solid var(--linha); border-radius: 6px; color: var(--texto); font-weight: 600; white-space: nowrap; }
.idiomas summary::-webkit-details-marker, .categorias summary::-webkit-details-marker { display: none; }
.idiomas summary::after, .categorias summary::after { content: "▾"; font-size: 0.8em; }
.idiomas ul, .categorias ul { position: absolute; right: 0; top: calc(100% + 0.35rem); margin: 0; padding: 0.35rem 0; list-style: none; background: var(--fundo); border: 1px solid var(--linha); border-radius: 6px; min-width: 11rem; z-index: 10; box-shadow: 0 6px 20px rgb(0 0 0 / 0.12); }
.idiomas li a, .categorias li a { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; color: var(--texto); text-decoration: none; white-space: nowrap; }
.idiomas li a:hover, .categorias li a:hover { background: var(--destaque); }
.idiomas a[aria-current], .categorias a[aria-current] { font-weight: 700; }
.bandeira { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18); }
.marca {
  display: flex; align-items: center; gap: 0.45rem; min-width: 0;
  font: 700 1.35rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.marca .casa { flex: none; }
/* Celular estreito: casinha, Categorias e língua não cabem com o nome do blog; o nome sai, a casinha fica. */
@media (max-width: 420px) {
  .topo { padding-left: 0.75rem; padding-right: 0.75rem; gap: 0.5rem; }
  .marca span { display: none; }
  .menus { gap: 0.35rem; }
  .idiomas summary, .categorias summary { padding: 0.35rem 0.55rem; }
}
main { padding-top: 2.5rem; padding-bottom: 3rem; }

h1, h2, h3, h4 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.25; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 7.5vw, 2.9rem); font-weight: 800; line-height: 1.15; margin: 0 0 1rem; }
.texto h2 { font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
.texto h3 { font-size: 1.3rem; margin: 2rem 0 0.5rem; }
.texto h4 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; }

.meta { font: 0.9rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--suave); margin: 0 0 1.5rem; }
.meta .revisado { white-space: nowrap; }

/* Post: a capa abre a página, colada no cabeçalho, de ponta a ponta da tela, antes do título. */
.texto .capa { width: 100vw; max-width: 100vw; margin: -2.5rem calc(50% - 50vw) 1.75rem; aspect-ratio: 16 / 9; max-height: 30rem; object-fit: cover; border-radius: 0; }
figure { margin: 2rem auto; max-width: 34rem; padding: 0.5rem; background: var(--destaque); border-radius: 8px; }
figure img { border-radius: 4px; width: 100%; }
figcaption { font: 0.85rem/1.5 system-ui, sans-serif; color: var(--suave); margin: 0.5rem 0.25rem 0.15rem; text-align: left; }

blockquote { margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 3px solid var(--texto); font-style: italic; }
.destaque { display: flex; gap: 0.75rem; background: var(--destaque); padding: 1rem 1.25rem; border-radius: 6px; margin: 1.75rem 0; }
.destaque p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--linha); margin: 2.5rem 0; }
code { font: 0.9em ui-monospace, Consolas, monospace; background: var(--destaque); padding: 0.1em 0.3em; border-radius: 3px; }
pre { background: var(--destaque); padding: 1rem; border-radius: 6px; overflow-x: auto; }
pre code { background: none; padding: 0; }
details { margin: 1.25rem 0; }
summary { cursor: pointer; font-weight: 600; }
.tabela { overflow-x: auto; margin: 1.75rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { border: 1px solid var(--linha); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 2rem 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }

.lista { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .lista { grid-template-columns: 1fr 1fr; } .lista > .cartao:first-child { grid-column: 1 / -1; } }
.cartao { border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; background: var(--fundo); display: flex; flex-direction: column; }
.cartao img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.cartao > div { padding: 0.9rem 1rem 1.1rem; }
.cartao h2 { font-size: 1.2rem; margin: 0 0 0.4rem; }
.lista > .cartao:first-child h2 { font-size: 1.5rem; }
.cartao h2 a { color: var(--texto); text-decoration: none; }
.cartao h2 a::after { content: ""; position: absolute; inset: 0; } /* o cartão inteiro é clicável */
.cartao { position: relative; }
.cartao .meta a.categoria { position: relative; z-index: 1; }
.cartao:hover { border-color: var(--suave); }
.cartao .meta { margin-bottom: 0.35rem; }
.cartao p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.rodape {
  border-top: 1px solid var(--linha);
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  font: 0.9rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--suave);
}
.rodape { text-align: center; }
.rodape nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin-bottom: 0.75rem; }
.rodape a { color: var(--suave); }

/* links internos: trilha da categoria, Leia também e páginas numeradas */
.trilha { font: 600 0.8rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.5rem; }
.trilha a, .meta a.categoria { color: var(--suave); }
.trilha span { color: var(--suave); margin: 0 0.15rem; }
.meta a.categoria { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 0.8rem; }
.relacionados { border-top: 1px solid var(--linha, #ddd); margin: 3rem 0 0; padding-top: 1.5rem; }
.relacionados h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.relacionados ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.relacionados li a { display: flex; align-items: center; gap: 0.9rem; padding: 0.5rem; border: 1px solid var(--linha); border-radius: 10px; color: var(--texto); text-decoration: none; font: 600 1rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
.relacionados li a:hover { border-color: var(--suave); }
.relacionados img { flex: none; width: 6.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
/* Fontes no fim do post, mais discretas: quem lê já passou pelo Leia também; o Google lê igual. */
/* Botão de volta ao início no fim do post (moldura.js): cheio, com a casinha, impossível de passar batido. */
.voltar { margin: 2.5rem 0 0; text-align: center; }
.voltar a { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3rem; padding: 0.85rem 1.75rem; border-radius: 999px; background: var(--texto); color: var(--fundo); text-decoration: none; font: 600 1.05rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; }
.voltar a:hover { opacity: 0.85; }
@media (max-width: 40rem) { .voltar a { display: flex; } }
.fontes { margin-top: 3rem; font-size: 0.95rem; color: var(--suave); }
.fontes h2 { font-size: 1.25rem; }
.paginas { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0; font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.paginas a { padding: 0.6rem 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Início e categoria: apresentação grande no topo (o post não tem) e lista compacta. */
.apresentacao { margin: -2.5rem calc(50% - 50vw) 2rem; padding: 2.75rem 1.25rem 2.5rem; background: var(--destaque); border-bottom: 1px solid var(--linha); text-align: center; }
.apresentacao h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); margin: 0 auto; max-width: 40rem; }
.apresentacao p { margin: 0.75rem auto 0; max-width: 32rem; color: var(--suave); font-size: 1.05rem; line-height: 1.55; }
@media (max-width: 639px) {
  /* no celular, do segundo cartão em diante: miniatura quadrada à esquerda, texto à direita */
  .lista > .cartao:not(:first-child) { flex-direction: row; align-items: stretch; }
  .lista > .cartao:not(:first-child) > a { flex: 0 0 7rem; }
  .lista > .cartao:not(:first-child) img { aspect-ratio: auto; height: 100%; min-height: 7rem; }
  .lista > .cartao:not(:first-child) > div { padding: 0.7rem 0.85rem; }
  .lista > .cartao:not(:first-child) h2 { font-size: 1.05rem; }
  .lista > .cartao:not(:first-child) p { -webkit-line-clamp: 2; font-size: 0.92rem; }
}

/* Início: o nome do blog aparece uma vez só, grande na apresentação; a barra de cima esconde o dela. */
body:has(.apresentacao.inicio) .marca { visibility: hidden; }
/* Com banner (início) ou capa (post): a barra fica por cima da foto, sem faixa só dela. */
body:has(.com-banner, .heroi) .topo { position: absolute; left: 0; right: 0; z-index: 2; border-bottom: 0; }
body:has(.com-banner, .heroi) .marca { color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
body:has(.com-banner, .heroi) .busca input { color: #fff; border-color: rgb(255 255 255 / 0.55); background: rgb(0 0 0 / 0.35); }
body:has(.com-banner, .heroi) .busca input::placeholder { color: rgb(255 255 255 / 0.8); }
body:has(.com-banner, .heroi) :is(.idiomas, .categorias) summary { color: #fff; border-color: rgb(255 255 255 / 0.55); background: rgb(0 0 0 / 0.35); }

/* Post com capa: a foto abre a página e a categoria e o título ficam sobre a parte de baixo dela. */
.heroi { position: relative; margin: -2.5rem calc(50% - 50vw) 1.75rem; min-height: min(34rem, 88svh); display: flex; align-items: flex-end; background: #161615; color: #fff; overflow: hidden; }
.texto .heroi .capa { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; aspect-ratio: auto; object-fit: cover; }
.heroi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0) 28%, rgb(0 0 0 / 0) 42%, rgb(0 0 0 / 0.8)); }
.heroi > div { position: relative; z-index: 1; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 7rem 1rem 1.75rem; }
.heroi h1 { color: #fff; margin: 0; font-size: clamp(1.75rem, 6.5vw, 2.9rem); text-shadow: 0 1px 14px rgb(0 0 0 / 0.55); }
.heroi .trilha a { color: rgb(255 255 255 / 0.9); }
@media (min-width: 900px) {
  /* tela larga: a foto fica numa faixa central de até 64rem em 2:1 (de ponta a ponta cortava a foto) e as laterais escuras */
  .heroi { min-height: 32rem; }
  .texto .heroi .capa { left: 50%; width: min(100vw, 64rem); transform: translateX(-50%); }
  .heroi::after { left: 50%; width: min(100vw, 64rem); transform: translateX(-50%); }
}
.com-banner { position: relative; margin-top: -2.5rem; min-height: 24rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 6rem 1.25rem 2.5rem; color: #fff; background: #222; border-bottom: 0; overflow: hidden; }
.com-banner .banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.com-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.15) 40%, rgb(0 0 0 / 0.7)); }
.com-banner h1, .com-banner p { position: relative; z-index: 1; color: #fff; text-shadow: 0 1px 12px rgb(0 0 0 / 0.5); }
.com-banner p { color: rgb(255 255 255 / 0.9); }
@media (min-width: 700px) { .com-banner { min-height: 28rem; } }

/* Computador (24/10/2026, defeitos vistos nos prints de 1366 px):
   - a capa do post de ponta a ponta cortava a foto (só o focinho): na tela larga fica numa faixa central de até
     64rem, em 2:1, mostrando quase a foto inteira;
   - a lista do início era uma coluna estreita embaixo de um banner largo: páginas de lista ficam com até 72rem,
     três colunas, e o post mais novo vira um destaque deitado (foto à esquerda, texto à direita). */
@media (min-width: 900px) {
  .texto .capa { width: min(100vw, 64rem); max-width: none; margin-left: calc(50% - min(50vw, 32rem)); margin-right: 0; aspect-ratio: 2 / 1; max-height: none; }
}
body:has(.lista) main, body:has(.lista) .topo, body:has(.lista) .rodape { max-width: 72rem; }
@media (min-width: 1000px) {
  .lista { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .lista > .cartao:first-child { flex-direction: row; }
  .lista > .cartao:first-child > a { flex: 0 0 60%; }
  .lista > .cartao:first-child img { aspect-ratio: auto; height: 100%; min-height: 20rem; }
  .lista > .cartao:first-child > div { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
  .lista > .cartao:first-child h2 { font-size: 1.9rem; }
  .lista > .cartao:first-child p { -webkit-line-clamp: 5; font-size: 1.05rem; }
}

/* Caixa de busca da barra de cima: o índice é um arquivo por língua e a busca roda no navegador de quem lê. */
.busca { position: relative; margin: 0; }
.busca input { width: 11rem; max-width: 40vw; padding: 0.35rem 0.7rem; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); color: var(--texto); font: 0.9rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.busca input:focus-visible { outline: 2px solid var(--suave); outline-offset: 1px; }
.busca ul { position: absolute; right: 0; top: calc(100% + 0.35rem); margin: 0; padding: 0.35rem 0; list-style: none; background: var(--fundo); border: 1px solid var(--linha); border-radius: 6px; min-width: 18rem; max-width: 80vw; z-index: 10; box-shadow: 0 6px 20px rgb(0 0 0 / 0.12); }
.busca li a { display: block; padding: 0.45rem 0.9rem; color: var(--texto); text-decoration: none; }
.busca li a:hover { background: var(--destaque); }
.busca li.nada { padding: 0.45rem 0.9rem; color: var(--suave); }
@media (max-width: 640px) { .busca input { width: 7.5rem; } }