:root {
    --primary-color: #32a1ff;
    --titulo-color: #23a7f2;
    --text-color: #dddddd;
    --muted: #9a9a9a;
    --bg-color: #1c1c1c;
    --card-bg: #242424;
    --border: #333333;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'SenticoSansDT', 'Montserrat', sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    line-height: 1.6;
}

a { color: var(--primary-color); }
img { max-width: 100%; }

/* Topo */
.topo { background: #222222; position: sticky; top: 0; z-index: 10; }
.topo nav {
    max-width: 1200px; margin: 0 auto; padding: 1rem 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
}
.logo { font-size: 1.5rem; font-weight: 700; font-style: italic; color: var(--text-color); text-decoration: none; }
.topo ul { display: flex; list-style: none; gap: .5rem; flex-wrap: wrap; }
.topo ul a {
    color: var(--text-color); text-decoration: none; font-size: .9rem;
    padding: .5rem .8rem; border-radius: 5px; transition: all .3s ease;
}
.topo ul a:hover { color: var(--primary-color); background: rgba(50, 161, 255, .1); }

main { max-width: 1200px; margin: 0 auto; padding: 3rem 20px; }

.meta { color: var(--muted); font-size: .85rem; }

/* Índice */
.indice-topo {
    display: flex; align-items: center; gap: 1.6rem;
    max-width: 820px; margin-bottom: 2.5rem;
}
.indice-topo .foto {
    width: 124px; height: 124px; border-radius: 18px; object-fit: cover;
    flex-shrink: 0; border: 2px solid var(--border);
}
.indice h1 { font-size: 3rem; font-weight: 800; line-height: 1.1; color: var(--titulo-color); }
.indice .sub { color: var(--muted); margin: .5rem 0 0; font-size: 1.1rem; }
.grade { display: flex; flex-direction: column; max-width: 820px; }
.card {
    padding: 1.6rem 0; border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
}
.card h2 {
    font-size: 1.9rem; line-height: 1.25; margin: .3rem 0 .6rem;
    color: var(--titulo-color); transition: color .3s ease;
}
.card:hover h2 { color: #6cc8ff; }
.card .resumo { color: var(--muted); font-size: 1rem; }
.vazio { color: var(--muted); }

/* Post */
.post { max-width: 760px; margin: 0 auto; }
.voltar { text-decoration: none; font-size: .9rem; }
.post h1 { font-size: 2.6rem; line-height: 1.15; margin: 1rem 0 .6rem; color: var(--titulo-color); }
.assinatura {
    margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
    color: var(--muted); font-size: .9rem;
}
.assinatura p { font-style: italic; line-height: 1.5; }
.redes {
    list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .35rem;
    margin-top: 1rem; padding: 0; font-style: normal;
}
.redes li + li::before { content: "·"; color: var(--border); margin-right: .35rem; }
.redes a { text-decoration: none; font-size: .9rem; }
.redes a:hover { text-decoration: underline; }
.video { aspect-ratio: 16 / 9; margin: 2rem 0; }
.short {
    float: right; width: 260px; aspect-ratio: 9 / 16;
    margin: .4rem 0 1.4rem 1.8rem; shape-outside: margin-box;
}
.short iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; display: block; }
.conteudo::after { content: ""; display: block; clear: both; }
.video iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; display: block; }
.conteudo { font-size: 1.15rem; margin-top: 2rem; }
.conteudo > * + * { margin-top: 1.2rem; }
.conteudo h2 { font-size: 1.7rem; margin-top: 2.5rem; color: var(--titulo-color); line-height: 1.25; }
.conteudo h3 { font-size: 1.3rem; margin-top: 2rem; color: var(--titulo-color); }
.conteudo ul, .conteudo ol { padding-left: 1.5rem; }
.conteudo li + li { margin-top: .4rem; }
.conteudo img { border-radius: 8px; display: block; margin-inline: auto; }
.conteudo figure { margin: 2.2rem 0; }
.conteudo figcaption {
    margin-top: .7rem; color: var(--muted); font-size: .92rem;
    line-height: 1.45; text-align: center;
}
.conteudo blockquote {
    border-left: 4px solid var(--primary-color); padding: .5rem 1.2rem;
    color: var(--muted); font-style: italic; background: var(--card-bg); border-radius: 0 8px 8px 0;
}
.conteudo code { background: #2d2d2d; padding: .15rem .4rem; border-radius: 4px; font-size: .9em; }
.conteudo pre {
    background: #111; border: 1px solid var(--border); border-radius: 8px;
    padding: 1rem 1.2rem; overflow-x: auto; line-height: 1.45;
}
.conteudo pre code { background: none; padding: 0; font-size: .9rem; }
.conteudo table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.conteudo th, .conteudo td { border: 1px solid var(--border); padding: .5rem .8rem; text-align: left; }
.conteudo th { background: var(--card-bg); }

/* Rodapé */
.rodape { text-align: center; padding: 3rem 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; }

@media (max-width: 600px) {
    .indice h1 { font-size: 2.2rem; }
    .post h1 { font-size: 1.9rem; }
    .conteudo { font-size: 1.05rem; }
    .card h2 { font-size: 1.5rem; }
    .short { float: none; width: 68%; margin: 1.6rem auto; }
    .indice-topo { gap: 1rem; }
    .indice-topo .foto { width: 82px; height: 82px; border-radius: 14px; }
}