/*
 * Tema Padrão v2 — "Primeiro a resposta" (docs/CONCEITO-DOS-TEMAS.md).
 *
 * Adjetivos de auditoria: claro · calmo · exato · com assinatura.
 *
 * Como a página é construída:
 *  - PROPORÇÃO ÁUREA (1,618): a escala de letras, a escala de espaços, a entrelinha do texto e a divisão
 *    das aberturas (61,8% para o texto, 38,2% para a imagem) saem todas do mesmo número.
 *  - HIERARQUIA: cada tela tem UM ponto focal. Na inicial é o post mais recente; no post é a resposta,
 *    o único bloco em cartão da página (o que está isolado é o que o olho acha primeiro).
 *  - LEITURA EM "F": títulos e anotações alinhados à esquerda; o que é dado fica na margem.
 *  - ASSINATURA GRÁFICA: o retângulo áureo e os seus quadrados, na cor de destaque. O desenho
 *    dentro dele muda por post e por assunto (arcos, diagonais ou círculos).
 *
 * Fontes de licença aberta (SIL OFL 1.1), servidas pelo próprio blog; as licenças estão em assets/fontes.
 * Tudo sai de tokens. Um só raio de canto. Uma só cor de destaque, trocável nas Configurações do blog.
 */

@font-face { font-family: 'Bricolage Grotesque'; src: url('fontes/bricolage-grotesque.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fontes/newsreader.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('fontes/hanken-grotesk.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
    /* Cor: neutros frios e uma cor de destaque. */
    --fundo: #f6f7f9;
    --papel: #ffffff;
    --tinta: #10151f;
    --texto: #2a3140;
    --suave: #5b6472;
    --linha: #d9dde4;
    --destaque: var(--destaque-da-instalacao, #0f5c4d);
    --destaque-suave: color-mix(in oklab, var(--destaque) 8%, var(--fundo));
    --destaque-linha: color-mix(in oklab, var(--destaque) 28%, var(--fundo));
    --sobre-destaque: #ffffff;
    --sombra: color-mix(in oklab, var(--tinta) 22%, transparent);

    --fonte-titulo: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --fonte-resposta: 'Newsreader', Georgia, 'Times New Roman', serif;
    --fonte-texto: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fonte-codigo: ui-monospace, 'Cascadia Code', Consolas, Menlo, monospace;

    /* Escala de letras pela proporção áurea, a partir de 18 px (meios passos = raiz de 1,618). */
    --phi: 1.618;
    --t-nota: 0.8125rem;
    --t-pequeno: 0.9375rem;
    --t-texto: 1.125rem;                                   /* 18 */
    --t-1: 1.431rem;                                       /* × 1,272 */
    --t-2: 1.82rem;                                        /* × 1,618 */
    --t-3: clamp(1.9rem, 1.45rem + 2vw, 2.945rem);         /* × 2,618 */
    --t-4: clamp(2.2rem, 1.3rem + 4vw, 3.746rem);          /* × 3,330 */

    /* Escala de espaços pela mesma proporção. */
    --e-1: 0.5rem;
    --e-2: 0.809rem;
    --e-3: 1.309rem;
    --e-4: 2.118rem;
    --e-5: 3.427rem;
    --e-6: 5.545rem;
    --e-7: 8.972rem;

    --borda: clamp(1.25rem, 4vw, 3rem);
    --pagina: 74rem;
    --margem: 13rem;
    --coluna: 41rem;
    --raio: 6px;

    --rapido: 0.2s;
    --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/*
 * Modo escuro. Vale em dois casos: o aparelho pede escuro e o leitor não escolheu claro; ou o leitor
 * escolheu escuro no botão. A mesma cor de destaque é clareada para continuar legível.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-modo='claro']) {
        --fundo: #0e1218;
        --papel: #161c26;
        --tinta: #eef1f5;
        --texto: #c5ccd7;
        --suave: #8d97a7;
        --linha: #262e3a;
        --destaque: color-mix(in oklab, var(--destaque-da-instalacao, #0f5c4d) 46%, #ffffff);
        --destaque-suave: color-mix(in oklab, var(--destaque) 11%, var(--fundo));
        --destaque-linha: color-mix(in oklab, var(--destaque) 32%, var(--fundo));
        --sobre-destaque: #0e1218;
        --sombra: rgba(0, 0, 0, 0.55);
    }
}

:root[data-modo='escuro'] {
    --fundo: #0e1218;
    --papel: #161c26;
    --tinta: #eef1f5;
    --texto: #c5ccd7;
    --suave: #8d97a7;
    --linha: #262e3a;
    --destaque: color-mix(in oklab, var(--destaque-da-instalacao, #0f5c4d) 46%, #ffffff);
    --destaque-suave: color-mix(in oklab, var(--destaque) 11%, var(--fundo));
    --destaque-linha: color-mix(in oklab, var(--destaque) 32%, var(--fundo));
    --sobre-destaque: #0e1218;
    --sombra: rgba(0, 0, 0, 0.55);
}

:root[data-modo='claro'] { color-scheme: light; }
:root[data-modo='escuro'] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
    :root { --rapido: 0.01s; }
}

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* --topo: altura do topo fixo. Âncoras e a margem do post param logo abaixo dele. */
html { -webkit-text-size-adjust: 100%; --topo: 4.5rem; scroll-padding-top: calc(var(--topo) + var(--e-3)); }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-texto);
    font-size: var(--t-texto);
    line-height: var(--phi);
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img, picture { display: block; max-width: 100%; height: auto; }

a {
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-color: var(--destaque);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
    transition: color var(--rapido) var(--curva), text-decoration-color var(--rapido) var(--curva);
}

a:hover { color: var(--destaque); }

:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--destaque); color: var(--sobre-destaque); }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pular { position: absolute; left: -999px; }
.pular:focus { left: var(--e-2); top: var(--e-2); z-index: 30; padding: var(--e-1) var(--e-2); background: var(--papel); border-radius: var(--raio); }

.topo, main, .rodape { width: 100%; max-width: calc(var(--pagina) + 2 * var(--borda)); margin-inline: auto; padding-inline: var(--borda); }

/* Barra de progresso da leitura, no alto da página. Só existe onde o navegador sabe fazer por CSS. */
.progresso { display: none; }

/* Segue a rolagem do próprio leitor (não se move sozinha), por isso vale também com "reduzir movimento". */
@supports (animation-timeline: scroll()) {
    .progresso {
        display: block;
        position: fixed;
        inset: 0 0 auto 0;
        height: 3px;
        background: var(--destaque);
        transform-origin: left;
        transform: scaleX(0);
        animation: progresso linear both;
        animation-timeline: scroll(root);
        z-index: 25;
    }
}

@keyframes progresso { to { transform: scaleX(1); } }

/* Rótulo: o texto pequeno em caixa alta que orienta (onde estou, o que é isto). */
.rotulo {
    margin: 0 0 var(--e-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem var(--e-1);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: var(--t-nota);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--suave);
}

.rotulo a { color: var(--suave); text-decoration-color: transparent; display: inline-block; padding-block: 0.25rem; }
.rotulo a:hover { color: var(--destaque); text-decoration-color: var(--destaque); }
.rotulo--destaque, .rotulo__marca { color: var(--destaque); }

.rotulo__marca::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    background: var(--destaque);
    border-radius: 2px;
}

/* ---------- Topo: fica à vista durante a leitura, translúcido ---------- */

.faixa-do-topo {
    position: sticky;
    top: 0;
    z-index: 15;
    background: color-mix(in oklab, var(--fundo) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--linha);
}

.topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-1) var(--e-4);
    padding-block: var(--e-2);
}

.topo__nav { margin-left: auto; }

/* Botão de modo claro e escuro: um disco meio a meio que vira ao trocar. */
.alternar-modo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--papel);
    color: var(--texto);
    font: 500 var(--t-nota)/1 var(--fonte-texto);
    cursor: pointer;
    transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

.alternar-modo[hidden] { display: none; }
.alternar-modo:hover { border-color: var(--destaque); color: var(--tinta); }

.alternar-modo__desenho {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
    transition: transform 0.5s var(--curva);
}

.alternar-modo[data-escuro='true'] .alternar-modo__desenho { transform: rotate(180deg); }

/* Tempo de leitura: sempre à vista perto do título. */
.tempo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--destaque-linha);
    border-radius: var(--raio);
    background: var(--destaque-suave);
    color: var(--destaque);
    font: 600 var(--t-nota)/1.2 var(--fonte-titulo);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.tempo::before {
    content: '';
    width: 0.7rem;
    height: 0.7rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
}

.topo__marca { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none; }
.topo__logo img { height: 2.118rem; width: auto; }

.topo__nav ul, .rodape__coluna ul, .abertura__links, .fichas { list-style: none; margin: 0; padding: 0; }
.topo__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); }

.topo__nav a { font-size: var(--t-pequeno); font-weight: 500; color: var(--suave); text-decoration-color: transparent; padding-block: 0.6rem; display: inline-block; }
.topo__nav a:hover { color: var(--tinta); text-decoration-color: var(--destaque); }

/* ---------- Assinatura: quem escreveu ---------- */

.assinatura { margin: 0; display: flex; align-items: center; gap: var(--e-2); }

.assinatura__selo {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.618rem;
    height: 2.618rem;
    border-radius: var(--raio);
    background: var(--destaque-suave);
    border: 1px solid var(--destaque-linha);
    color: var(--destaque);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: var(--t-pequeno);
    letter-spacing: 0.02em;
}

.assinatura__selo--grande { width: 3.427rem; height: 3.427rem; font-size: var(--t-texto); }
.assinatura--grande { margin-bottom: var(--e-3); }
.assinatura--grande .assinatura__selo { width: 4.236rem; height: 4.236rem; font-size: var(--t-1); }

.assinatura__texto { display: grid; line-height: 1.35; }
.assinatura__nome { font-weight: 600; color: var(--tinta); font-size: var(--t-pequeno); }
.assinatura__dados { font-size: var(--t-nota); color: var(--suave); }

/* ---------- Botão e fichas ---------- */

.botao {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.809rem 1.309rem;
    min-height: 2.75rem;
    background: var(--destaque);
    color: var(--sobre-destaque);
    border-radius: var(--raio);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: gap var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
}

.botao:hover { color: var(--sobre-destaque); gap: 0.95rem; }

.fichas { display: flex; flex-wrap: wrap; gap: var(--e-1); }

.ficha {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--papel);
    font-size: var(--t-pequeno);
    font-weight: 500;
    color: var(--texto);
    text-decoration: none;
    transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

.ficha:hover { border-color: var(--destaque); color: var(--destaque); }

/* ---------- Espiral áurea: a assinatura gráfica ---------- */

.espiral { display: block; width: 100%; height: auto; color: var(--destaque); }
.espiral__grade { opacity: 0.22; }
.espiral__curva { opacity: 0.9; }
.espiral__cheio { opacity: 0.1; }
.espiral__cheio--forte { opacity: 0.24; }
.espiral__ponto { opacity: 0.95; }

@media (prefers-reduced-motion: no-preference) {
    .espiral__curva { stroke-dasharray: 5200; stroke-dashoffset: 5200; animation: tracar 2.4s var(--curva) 0.2s forwards; }
}

@keyframes tracar { to { stroke-dashoffset: 0; } }

/* ---------- Aberturas (categoria, tag, autor, 404) ---------- */

.abertura { padding-block: var(--e-5) var(--e-5); }
.abertura--inicial { padding-block: var(--e-4) 0; }

.abertura__lema { margin: 0; max-width: 34rem; font-family: var(--fonte-resposta); font-size: var(--t-1); line-height: 1.4; color: var(--suave); text-wrap: balance; }

.abertura__grade { display: grid; gap: var(--e-4); align-items: center; }

@media (min-width: 60rem) {
    .abertura__grade { grid-template-columns: 1.618fr 1fr; gap: var(--e-6); }
}

.abertura__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: var(--t-4);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--tinta);
    text-wrap: balance;
}

.abertura__cargo { margin: var(--e-2) 0 0; font-weight: 500; color: var(--suave); }
.abertura__descricao { margin: var(--e-3) 0 0; max-width: 36rem; font-family: var(--fonte-resposta); font-size: var(--t-1); line-height: 1.45; color: var(--texto); text-wrap: pretty; }
.abertura__links { margin-top: var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); font-size: var(--t-pequeno); }
.abertura__desenho { display: none; }

@media (min-width: 60rem) {
    .abertura__desenho { display: block; }
}

/* ---------- Índice ---------- */

.indice { list-style: none; margin: 0; padding: 0; }
.indice__vazio { padding-block: var(--e-4); border-top: 1px solid var(--linha); color: var(--suave); }

/* O destaque da inicial: texto e imagem em proporção áurea. É o maior elemento da tela. */
.principal { display: grid; gap: var(--e-4); align-items: center; padding-block: var(--e-4) var(--e-6); }

@media (min-width: 60rem) {
    .principal { grid-template-columns: 1.618fr 1fr; gap: var(--e-6); }
}

.principal__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: var(--t-4);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.principal__titulo a, .linha__pergunta a { text-decoration-color: transparent; }
.principal__titulo a:hover, .linha__pergunta a:hover { color: var(--tinta); text-decoration-color: var(--destaque); }

.principal__resposta { margin: var(--e-3) 0 var(--e-4); max-width: 36rem; font-family: var(--fonte-resposta); font-size: var(--t-1); line-height: 1.45; color: var(--texto); text-wrap: pretty; }
.principal .assinatura { margin-bottom: var(--e-4); }

/* A imagem do destaque é um retângulo áureo em pé. */
.principal__imagem { order: -1; }

@media (min-width: 60rem) {
    .principal__imagem { order: 0; }
}

.principal__imagem img, .post__capa img {
    width: 100%;
    aspect-ratio: 1.618 / 1;
    object-fit: cover;
    border-radius: var(--raio);
    background: var(--linha);
    box-shadow: 0 2.118rem 3.427rem -2.118rem var(--sombra);
}

@media (min-width: 60rem) {
    .principal__imagem img { aspect-ratio: 1 / 1.272; }
}

.indice__assuntos { padding-block: var(--e-4); border-top: 1px solid var(--linha); }

@media (min-width: 60rem) {
    .indice__assuntos { display: grid; grid-template-columns: var(--margem) 1fr; gap: var(--e-6); align-items: center; }
    .indice__assuntos .rotulo { margin: 0; }
}

.indice__linha { border-top: 1px solid var(--linha); }
.indice__linha:first-child { border-top: 0; }
.indice__linha:last-child { border-bottom: 1px solid var(--linha); }
.indice__linha:has(.principal) { border-bottom: 0; }

.linha { display: grid; gap: var(--e-2); padding-block: var(--e-4); }

@media (min-width: 60rem) {
    .linha { grid-template-columns: var(--margem) minmax(0, 1fr) 11rem; gap: var(--e-6); align-items: start; }
}

/* A mesma margem de anotações do post: data e assunto. */
.linha__nota { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-2); font-size: var(--t-pequeno); line-height: 1.5; color: var(--suave); }

@media (min-width: 60rem) {
    .linha__nota { flex-direction: column; padding-top: 0.4rem; }
}

.linha__nota a { display: inline-block; padding-block: 0.2rem; color: var(--suave); font-weight: 500; text-decoration-color: transparent; }
.linha__nota a:hover { color: var(--destaque); }

.linha__pergunta { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-2); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.linha__resposta { margin: var(--e-2) 0 0; max-width: 38rem; font-family: var(--fonte-resposta); font-size: 1.1875rem; line-height: 1.5; text-wrap: pretty; }
.linha__leitura { margin: var(--e-2) 0 0; font-size: var(--t-nota); color: var(--suave); }

.linha__miniatura { display: none; }

@media (min-width: 60rem) {
    .linha__miniatura { display: block; }
    .linha__miniatura img { width: 100%; aspect-ratio: 1.618 / 1; object-fit: cover; border-radius: var(--raio); background: var(--linha); }
}

.continuacao { margin-top: var(--e-6); }
.continuacao__titulo { margin: 0 0 var(--e-3); font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-2); letter-spacing: -0.02em; color: var(--tinta); }

.paginacao { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-2); padding-block: var(--e-4); font-size: var(--t-pequeno); font-weight: 500; }
.paginacao__atual { color: var(--suave); font-weight: 400; }
.paginacao a[rel='next'] { justify-self: end; }

/* ---------- Post ---------- */

.post__abertura { padding-block: var(--e-5) var(--e-5); }

.post__abertura-grade { display: grid; gap: var(--e-4); align-items: center; }

@media (min-width: 60rem) {
    .post__abertura-grade { grid-template-columns: 1.618fr 1fr; gap: var(--e-6); }
}

/* A pergunta. */
.post__titulo {
    margin: 0 0 var(--e-4);
    font-family: var(--fonte-titulo);
    /* Sóbrio de propósito: o ponto focal da página é a resposta, logo abaixo. */
    font-weight: 500;
    font-size: var(--t-3);
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--tinta);
    text-wrap: balance;
}

.post__capa { margin: 0; }

/* A resposta: o ponto focal. O único cartão da página, com a cor de destaque no topo. */
.post__resposta {
    position: relative;
    margin-top: var(--e-5);
    max-width: calc(var(--margem) + var(--e-6) + var(--coluna));
    padding: var(--e-4) var(--e-4) var(--e-4);
    background: var(--papel);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--destaque);
    border-radius: var(--raio);
    box-shadow: 0 2.118rem 3.427rem -2.618rem var(--sombra);
    font-family: var(--fonte-resposta);
    font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.2rem);
    line-height: 1.42;
    color: var(--tinta);
    text-wrap: pretty;
}

.post__resposta p { margin: 0; }
.post__resposta .rotulo { margin-bottom: var(--e-2); }

.post__grade { display: grid; gap: var(--e-4); border-top: 1px solid var(--linha); padding-top: var(--e-5); }

@media (min-width: 60rem) {
    .post__grade { grid-template-columns: var(--margem) minmax(0, var(--coluna)); gap: var(--e-6); }
    .post__margem { position: sticky; top: calc(var(--topo) + var(--e-3)); align-self: start; max-height: calc(100dvh - var(--topo) - 2 * var(--e-3)); overflow-y: auto; }
}

/* Margem de anotações. */
.post__margem { font-size: var(--t-pequeno); line-height: 1.45; }

.sumario { margin-bottom: var(--e-4); padding-bottom: var(--e-3); border-bottom: 1px solid var(--linha); }
.sumario ol { margin: 0; padding: 0; list-style: none; counter-reset: secao; }
.sumario li { counter-increment: secao; display: grid; grid-template-columns: 2rem 1fr; padding-block: 0.35rem; }
.sumario li::before { content: counter(secao, decimal-leading-zero); font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-nota); color: var(--destaque); padding-top: 0.1rem; }
.sumario a { color: var(--texto); text-decoration-color: transparent; }
.sumario a:hover { color: var(--destaque); text-decoration-color: var(--destaque); }

.notas { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--e-2) var(--e-3); }

@media (min-width: 60rem) {
    .notas { grid-template-columns: 1fr; }
}

.notas dt { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-nota); letter-spacing: 0.07em; text-transform: uppercase; color: var(--suave); }
.notas dd { margin: 0.15rem 0 0; color: var(--tinta); }
.notas dd a { text-decoration-color: transparent; }
.notas dd a:hover { text-decoration-color: var(--destaque); }

/* ---------- Corpo do post ---------- */

.post__corpo { counter-reset: secao; }
.post__corpo > :first-child { margin-top: 0; }

.post__corpo p, .post__corpo ul, .post__corpo ol { margin: 0 0 var(--e-3); text-wrap: pretty; }

/* Cada seção é numerada: o leitor sabe onde está e quanto falta. */
.post__corpo h2 {
    counter-increment: secao;
    margin: var(--e-6) 0 var(--e-3);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: var(--t-2);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--tinta);
    text-wrap: balance;
}

.post__corpo h2::before {
    content: counter(secao, decimal-leading-zero);
    display: block;
    margin-bottom: var(--e-1);
    font-size: var(--t-nota);
    letter-spacing: 0.07em;
    color: var(--destaque);
}

.post__corpo h3 { margin: var(--e-4) 0 var(--e-1); font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-1); line-height: 1.25; letter-spacing: -0.01em; color: var(--tinta); }
.post__corpo h4 { margin: var(--e-3) 0 var(--e-1); font-size: 1rem; font-weight: 600; color: var(--tinta); }

.post__corpo ul, .post__corpo ol { padding-left: 1.4rem; }
.post__corpo li { margin-bottom: 0.4rem; }
.post__corpo li::marker { color: var(--destaque); }
.post__corpo li > p { margin-bottom: 0.4rem; }
.post__corpo strong { font-weight: 600; color: var(--tinta); }

.post__corpo blockquote {
    margin: var(--e-5) 0;
    padding-left: var(--e-3);
    border-left: 3px solid var(--destaque);
    font-family: var(--fonte-resposta);
    font-size: var(--t-1);
    line-height: 1.45;
    color: var(--tinta);
}

.post__corpo blockquote p:last-child { margin-bottom: 0; }

.post__corpo hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e-5) 0; }

.post__corpo code { font-family: var(--fonte-codigo); font-size: 0.875em; background: var(--destaque-suave); padding: 0.1em 0.35em; border-radius: 4px; }

.post__corpo pre { margin: 0 0 var(--e-3); padding: var(--e-3); overflow-x: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); font-size: 0.9375rem; line-height: 1.55; }
.post__corpo pre code { background: none; padding: 0; font-size: inherit; }

.post__corpo table { width: 100%; margin: 0 0 var(--e-3); border-collapse: collapse; font-size: var(--t-pequeno); }

/* Em tela estreita a tabela rola de lado em vez de estourar a página. */
@media (max-width: 40rem) {
    .post__corpo table { display: block; overflow-x: auto; }
}

.post__corpo th, .post__corpo td { padding: 0.75rem 1rem 0.75rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.post__corpo th { font-family: var(--fonte-titulo); font-weight: 600; color: var(--tinta); border-bottom: 2px solid var(--tinta); }
.post__corpo th p, .post__corpo td p { margin: 0; }

.imagem { margin: var(--e-5) 0; }
.imagem img { border-radius: var(--raio); background: var(--linha); }
.imagem figcaption { margin-top: var(--e-1); font-size: var(--t-nota); color: var(--suave); }

/* Blocos próprios do blog. */
.destaque { margin: var(--e-4) 0; padding: var(--e-3); background: var(--destaque-suave); border-left: 3px solid var(--destaque); border-radius: 0 var(--raio) var(--raio) 0; }
.destaque__titulo { margin: 0 0 var(--e-1); font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-nota); letter-spacing: 0.07em; text-transform: uppercase; color: var(--destaque); }
.destaque p:last-child { margin-bottom: 0; }

/* Perguntas frequentes: cada pergunta numerada, com a resposta alinhada a ela. */
.faq { margin-top: var(--e-6); counter-reset: pergunta; }
.faq > h2 { margin-top: 0; }

.faq__item {
    counter-increment: pergunta;
    display: grid;
    grid-template-columns: 2.618rem 1fr;
    gap: 0 var(--e-2);
    padding: var(--e-3) 0;
    border-top: 1px solid var(--linha);
}

.faq__item:last-child { border-bottom: 1px solid var(--linha); }

.faq__item::before {
    content: counter(pergunta, decimal-leading-zero);
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    align-self: start;
    width: 2.118rem;
    height: 2.118rem;
    border-radius: var(--raio);
    background: var(--destaque-suave);
    border: 1px solid var(--destaque-linha);
    color: var(--destaque);
    font: 700 var(--t-nota)/1 var(--fonte-titulo);
}

.faq__item h3 { margin: 0.2rem 0 var(--e-1); }
.faq__item p { margin: 0; grid-column: 2; }

/* Uma resposta direta que tenha ficado no meio do texto. */
.resposta-direta { margin: 0 0 var(--e-3); font-family: var(--fonte-resposta); font-size: var(--t-1); color: var(--tinta); }

.post__tags { margin-top: var(--e-5); }

.autores { margin-top: var(--e-5); display: grid; gap: var(--e-3); }
.autor { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); padding: var(--e-3); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
.autor p { margin: 0; }
.autor__nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-1); line-height: 1.2; }
.autor__nome a { text-decoration-color: transparent; }
.autor__nome a:hover { text-decoration-color: var(--destaque); }
.autor__cargo { font-size: var(--t-pequeno); color: var(--suave); }
.autor .autor__bio { margin-top: var(--e-1); font-size: var(--t-pequeno); line-height: 1.55; }

.aviso-de-previa { margin: var(--e-2) 0 0; padding: var(--e-1) var(--e-2); border: 1px dashed var(--suave); border-radius: var(--raio); font-size: var(--t-pequeno); }

/* ---------- Rodapé ---------- */

.rodape { margin-top: var(--e-7); padding-block: var(--e-5) var(--e-4); border-top: 1px solid var(--linha); font-size: var(--t-pequeno); color: var(--suave); }

.rodape__grade { display: grid; gap: var(--e-4); }

@media (min-width: 48rem) {
    .rodape__grade { grid-template-columns: 1.618fr 1fr 1fr; gap: var(--e-5); }
}

.rodape__marca { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--t-1); letter-spacing: -0.02em; color: var(--tinta); }
.rodape__lema { margin: var(--e-1) 0 0; max-width: 24rem; font-family: var(--fonte-resposta); font-size: var(--t-texto); line-height: 1.45; }

.rodape__coluna li { margin: 0; }
.rodape__coluna a { display: inline-block; padding-block: 0.3rem; color: var(--texto); text-decoration-color: transparent; }
.rodape__coluna a:hover { color: var(--destaque); text-decoration-color: var(--destaque); }

.rodape__organizacao { margin: var(--e-5) 0 0; padding-top: var(--e-3); border-top: 1px solid var(--linha); font-size: var(--t-nota); }
.rodape__organizacao a { display: inline-block; padding-block: 0.2rem; color: var(--tinta); }

/* ---------- Aviso de consentimento das ferramentas de medição ---------- */

.aviso-de-cookies {
    position: fixed;
    left: var(--borda);
    right: var(--borda);
    bottom: var(--e-3);
    z-index: 20;
    max-width: 38rem;
    margin-inline: auto;
    padding: var(--e-3);
    background: var(--papel);
    color: var(--texto);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--destaque);
    border-radius: var(--raio);
    box-shadow: 0 2.118rem 3.427rem -1.309rem var(--sombra);
    font-size: var(--t-pequeno);
    line-height: 1.5;
}

.aviso-de-cookies__texto { margin: 0 0 var(--e-2); }
.aviso-de-cookies__botoes { display: flex; flex-wrap: wrap; gap: var(--e-1); justify-content: flex-end; }

.aviso-de-cookies__botao {
    font: 600 var(--t-pequeno)/1 var(--fonte-titulo);
    padding: 0.5rem 1.25rem;
    min-height: 2.75rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: transparent;
    color: var(--tinta);
    cursor: pointer;
}

.aviso-de-cookies__botao--principal { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }

@media print {
    .progresso, .topo__nav, .rodape__grade, .continuacao, .aviso-de-cookies, .sumario, .espiral { display: none; }
    body { background: #fff; color: #000; }
    .post__resposta { box-shadow: none; }
    a { text-decoration: none; }
}

/* ---------- Tela estreita: a resposta vem antes da imagem ---------- */

@media (max-width: 59.99rem) {
    .post__abertura { display: flex; flex-direction: column; }
    .post__abertura-grade { display: contents; }
    .post__resposta { order: 2; margin-top: var(--e-4); }
    .post__imagem { order: 3; margin-top: var(--e-4); }
    .post__imagem .espiral { display: none; }
    .post__titulo { margin-bottom: var(--e-3); }
}

/* Área de toque confortável nos links pequenos da margem. */
.sumario a, .notas dd a { display: inline-block; padding-block: 0.25rem; }
.abertura__links a { display: inline-block; padding-block: 0.4rem; }

/* No escuro, a cor de destaque clareia sem perder a cor (antes virava cinza). */
@supports (color: oklch(from red l c h)) {
    @media (prefers-color-scheme: dark) {
        :root:not([data-modo='claro']) { --destaque: oklch(from var(--destaque-da-instalacao, #0f5c4d) 0.8 calc(c * 1.3) h); }
    }

    :root[data-modo='escuro'] { --destaque: oklch(from var(--destaque-da-instalacao, #0f5c4d) 0.8 calc(c * 1.3) h); }
}

/* Topo no celular: marca e botão numa linha, categorias na linha de baixo (rolam de lado se forem muitas). */
@media (max-width: 47.99rem) {
    .topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--e-2); }
    .topo__marca { grid-area: 1 / 1; }
    .alternar-modo { grid-area: 1 / 2; }
    .topo__nav { grid-area: 2 / 1 / 3 / 3; margin: 0; min-width: 0; }
    .topo__nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
    .topo__nav li { flex: none; }
    .alternar-modo [data-rotulo] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 47.99rem) {
    /* No celular o topo não fica preso: a tela é do texto. */
    html { --topo: 0rem; }
    .faixa-do-topo { position: static; }
}

/* Tela estreita: o desenho decorativo não passa na frente do título. */
@media (max-width: 59.99rem) {
    .principal__imagem:has(.espiral) { display: none; }
}

/* Cor de destaque desta instalação (Configurações do blog). */
:root { --destaque-da-instalacao: #661010; }