/* =====================================================================
   Blog — mesmo sistema visual do portfólio
   ===================================================================== */
:root{
    --ink: #111827;
    --muted: #4b5563;
    --line: #e5e7eb;
    --soft: #f3f4f6;
    --accent: #bb244e;
    --accent-soft: #fdf2f6;
    --code-bg: #0b0f19;
    --code-ink: #e5e7eb;
    --radius: 18px;
    --maxw: 1240px;
    --prose: 820px;
    --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
    font-family: var(--font);
    color: var(--ink);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
img{ max-width: 100%; display: block; }

/* ---- barra superior ---- */
.topbar{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(8px);
    color: #fff;
    border-bottom: 1px solid #27272a;
}
.topbar__inner{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.brand{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
}
.brand img{ width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; }
.brand span{ color: #a1a1aa; font-weight: 400; }
.topbar nav{ display: flex; gap: 8px; }

/* ---- botões pílula (iguais ao portfólio) ---- */
.btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark{ background: #18181b; border-color: #3f3f46; color: #fff; }
.btn--dark:hover{ background: #fff; border-color: #fff; color: var(--ink); }
.btn--accent{ background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover{ background: #9a1d40; border-color: #9a1d40; color: #fff; }

/* ---- capa do índice ---- */
.hero{
    background: #000;
    color: #fff;
    padding: 96px 0 88px;
}
.hero__inner{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #f472a6;
    margin-bottom: 18px;
}
.hero h1{
    font-size: clamp(34px, 4.6vw, 60px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 920px;
}
.hero p{
    margin-top: 22px;
    max-width: 820px;
    font-size: 19px;
    line-height: 1.6;
    color: #a1a1aa;
    text-align: justify;
}
.hero .actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }

/* ---- lista de posts ---- */
.posts{ padding: 80px 0 100px; }
.posts__inner{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.posts h2{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.posts > .posts__inner > p{ color: var(--muted); font-size: 17px; margin-bottom: 40px; text-align: justify; }
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    align-items: stretch;
}
.post-card{
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 26px 24px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.05);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.post-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 6px 14px rgba(0,0,0,.06), 0 22px 44px rgba(0,0,0,.10);
    border-color: #d1d5db;
}
.post-card .icon{
    width: 54px; height: 54px;
    border-radius: 14px;
    background: var(--soft);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.post-card .icon svg{ width: 28px; height: 28px; }
.post-card h3{ font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.post-card p{ margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; flex: 1; text-align: justify; }
.meta{
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 18px;
    font-size: 12px; color: var(--muted);
}
.tag{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
}
.tag--accent{ background: var(--accent-soft); color: var(--accent); }
.meta .dot{ width: 3px; height: 3px; border-radius: 50%; background: #d1d5db; }

/* ---- página de artigo ---- */
.article-head{
    background: #000;
    color: #fff;
    padding: 80px 0 72px;
}
.article-head__inner{ max-width: var(--prose); margin: 0 auto; padding: 0 24px; }
.article-head h1{
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.article-head .standfirst{
    margin-top: 20px;
    font-size: 19px;
    line-height: 1.6;
    color: #a1a1aa;
    text-align: justify;
}
.article-head .meta{ margin-top: 26px; color: #a1a1aa; }
.article-head .tag{ background: #18181b; color: #e4e4e7; }
.article-head .tag--accent{ background: rgba(187,36,78,.18); color: #f472a6; }

.article{
    max-width: var(--prose);
    margin: 0 auto;
    padding: 64px 24px 80px;
    font-size: 18px;
    line-height: 1.75;
}
.article p{ margin: 0 0 22px; text-align: justify; color: #1f2937; }
.article h2{
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 56px 0 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.article h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.article h3{ font-size: 20px; font-weight: 700; margin: 34px 0 12px; }
.article ul, .article ol{ margin: 0 0 22px 22px; }
.article li{ margin-bottom: 8px; text-align: justify; color: #1f2937; }
.article li::marker{ color: var(--accent); }
.article strong{ color: var(--ink); }
.article a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(187,36,78,.35); }
.article a:hover{ border-bottom-color: var(--accent); }
.article code{
    font-family: var(--mono);
    font-size: .88em;
    background: var(--soft);
    padding: 2px 7px;
    border-radius: 6px;
}
.article pre{
    background: var(--code-bg);
    color: var(--code-ink);
    border-radius: 14px;
    padding: 22px 24px;
    overflow-x: auto;
    margin: 0 0 26px;
    font-size: 14.5px;
    line-height: 1.6;
}
.article pre code{ background: none; padding: 0; font-size: inherit; color: inherit; }
.article pre .c{ color: #6b7280; }
.article pre .k{ color: #f472a6; }
.article pre .s{ color: #86efac; }
.article pre .n{ color: #fcd34d; }

/* caixas */
.callout{
    margin: 0 0 26px;
    padding: 20px 24px;
    border-radius: 14px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--accent);
    background: #fafafa;
}
.callout .label{
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}
.callout p:last-child, .callout ul:last-child{ margin-bottom: 0; }
.callout--dark{ background: #000; color: #fff; border-color: #000; }
.callout--dark p, .callout--dark li{ color: #e4e4e7; }
.callout--dark strong{ color: #fff; }

.versus{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 0 26px;
}
.versus > div{
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    font-size: 16px;
}
.versus h4{ font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; color: var(--muted); }
.versus ul{ margin: 0 0 0 18px; }
.versus li{ margin-bottom: 6px; font-size: 15.5px; }

.tree{
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.55;
    background: var(--soft);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 0 0 26px;
    white-space: pre;
    overflow-x: auto;
    color: #1f2937;
}
.figure{ margin: 0 0 26px; }
.figure img{ border-radius: 14px; border: 1px solid var(--line); }
.figure figcaption{ margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.math{ overflow-x: auto; margin: 0 0 22px; }

/* leia também */
.related{ background: var(--soft); padding: 64px 0 80px; }
.related__inner{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.related h2{ font-size: 26px; font-weight: 700; margin-bottom: 24px; }

/* rodapé */
footer.site{
    background: #000;
    color: #a1a1aa;
    border-top: 1px solid #27272a;
    font-size: 14px;
}
footer.site .inner{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 22px 24px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
footer.site a{ color: #a1a1aa; text-decoration: none; }
footer.site a:hover{ color: #fff; }

@media (max-width: 768px){
    .hero{ padding: 64px 0 56px; }
    .hero__inner, .posts__inner, .related__inner, .topbar__inner{ padding-left: 16px; padding-right: 16px; }
    .posts{ padding: 56px 0 72px; }
    .grid{ grid-template-columns: 1fr; gap: 18px; }
    .article-head{ padding: 56px 0 48px; }
    .article-head__inner, .article{ padding-left: 16px; padding-right: 16px; }
    .article{ font-size: 17px; padding-top: 40px; }
    .article h2{ font-size: 24px; margin-top: 44px; }
    .versus{ grid-template-columns: 1fr; }
    .topbar nav .btn span{ display: none; }
}

/* tabelas dentro do artigo */
.article table{
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 28px;
    font-size: 15.5px;
    line-height: 1.5;
}
.article th, .article td{
    text-align: left;
    vertical-align: top;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    color: #1f2937;
}
.article th{
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 2px solid var(--ink);
}
.article td:first-child{ font-weight: 500; color: var(--ink); white-space: nowrap; }
@media (max-width: 640px){
    .article table{ display: block; overflow-x: auto; }
    .article td:first-child{ white-space: normal; }
}
.callout--dark code{ background: rgba(255,255,255,.14); color: #fff; }
/* figuras no artigo */
.article figure{ margin: 0 0 28px; }
.article figure img{ display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #111; }
.article figcaption{ font-size: 14px; color: var(--muted); margin-top: 10px; text-align: justify; line-height: 1.5; }

/* busca e filtros da página inicial */
.filters{ margin: 0 0 32px; }
.search{
    position: relative;
    max-width: 720px;
}
.search input{
    width: 100%;
    font: inherit;
    font-size: 17px;
    padding: 15px 52px 15px 50px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.search input:focus{ border-color: var(--ink); box-shadow: 0 0 0 4px rgba(17,24,39,.06); }
.search input::placeholder{ color: #9ca3af; }
.search svg{ position: absolute; left: 19px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; }
.search kbd{
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font: 600 11px/1 var(--mono); color: var(--muted);
    border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; background: var(--soft);
}
.search .clear{
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink);
    cursor: pointer; font-size: 18px; line-height: 1; display: none; align-items: center; justify-content: center;
}
.search.has-query kbd{ display: none; }
.search.has-query .clear{ display: flex; }
.chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip{
    font: inherit; font-size: 13.5px; font-weight: 600;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--line); background: #fff; color: var(--ink);
    transition: all .15s;
}
.chip:hover{ border-color: var(--ink); }
.chip.is-active{ background: #000; border-color: #000; color: #fff; }
.chip .n{ opacity: .55; font-weight: 500; margin-left: 4px; }
.results-bar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 18px; color: var(--muted); font-size: 14.5px; }
.results-bar .sort{ font: inherit; font-size: 14px; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px; background: #fff; color: var(--ink); }
.post-card.is-hidden{ display: none; }
.post-card mark{ background: rgba(187,36,78,.16); color: inherit; border-radius: 3px; padding: 0 2px; }
.post-card .snippet{ color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: -6px; margin-bottom: 14px; text-align: justify; }
.post-card .snippet::before{ content: "No texto: "; font-weight: 600; color: var(--ink); }
.empty{
    display: none; padding: 48px 24px; text-align: center; border: 1.5px dashed var(--line); border-radius: 18px; color: var(--muted);
}
.empty.is-visible{ display: block; }
.empty strong{ display: block; color: var(--ink); font-size: 18px; margin-bottom: 6px; }
.empty button{ margin-top: 16px; }
@media (max-width: 640px){
    .search input{ font-size: 16px; padding: 13px 44px 13px 44px; }
    .search kbd{ display: none; }
    .results-bar{ flex-direction: column; align-items: flex-start; }
}
/* tabela de ferramentas: três colunas com larguras definidas */
.article table.tools{ table-layout: fixed; }
.article table.tools td:first-child{ white-space: normal; width: 21%; }
.article table.tools td:nth-child(2), .article table.tools th:nth-child(2){ width: 24%; }
.article table.tools code{ white-space: normal; word-break: break-word; }
@media (max-width: 640px){ .article table.tools{ table-layout: auto; min-width: 640px; } }

.article td code{ white-space: normal; overflow-wrap: break-word; }
.article table.cols3{ table-layout: fixed; }
.article table.cols3 th:first-child, .article table.cols3 td:first-child{ width: 30%; }
.article table.cols3 th:nth-child(2), .article table.cols3 td:nth-child(2){ width: 38%; }
.article table.nowrap1 td:first-child, .article table.nowrap1 td:first-child code{ white-space: nowrap; }
.article table.cols3 td:first-child{ white-space: normal; }
@media (max-width: 640px){ .article table.cols3{ min-width: 560px; } .article td code{ overflow-wrap: anywhere; } }