/* ============================================================
   THALES GOMES · BLOG
   Índice, arquivo paginado, categorias e post individual.
   Direção (doctrine industrial): o blog lê como o índice de
   um sistema em produção. Registro numerado com hairlines,
   metadados em monospace, destaque assimétrico 7/5, um acento
   só. Tema escuro, mesmos tokens do style.css.
   ============================================================ */

:root {
    --mono: 'Cascadia Code', 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --hairline: rgba(255, 255, 255, .1);
    --hairline-strong: rgba(255, 255, 255, .22);
    /* acento clareado pra texto pequeno em fundo escuro (contraste) */
    --accent-up: #45a7dd;
    --ink-hi: rgba(255, 255, 255, .92);
    --ink-mid: rgba(255, 255, 255, .6);
    --ink-low: rgba(255, 255, 255, .42);
}

/* ---------- metadado monospace (DNA de todo o blog) ---------- */
.sl-mono-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-low);
}

.sl-meta-dot {
    margin: 0 8px;
    opacity: .45;
}

.sl-meta-cat {
    color: var(--accent-up);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

a.sl-meta-cat:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sl-statline {
    margin-top: 20px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-low);
}

/* rótulo de faixa com hairline (divisor editorial-industrial) */
.sl-strip-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 48px 0 20px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-low);
}

.sl-strip-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--hairline);
}

/* ---------- hero do blog / categoria / arquivo ---------- */
.sl-blog-hero {
    position: relative;
    padding: calc(var(--frame) + 72px) 0 48px;
}

.sl-blog-hero--slim {
    padding: calc(var(--frame) + 56px) 0 36px;
}

.sl-blog-hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(38px, 5.4vw, 64px);
    line-height: 1.06;
    color: var(--light);
    letter-spacing: -.02em;
    max-width: 860px;
}

.sl-blog-hero--slim h1 {
    font-size: clamp(30px, 4vw, 46px);
}

.sl-blog-hero h1 .tg-thin {
    font-weight: 200;
}

.sl-blog-hero .sl-blog-intro {
    margin-top: 18px;
    max-width: 640px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-mid);
}

.sl-blog-hero .sl-breadcrumb {
    margin-bottom: 26px;
}

.sl-blog-hero .tg-section-label {
    margin-bottom: 14px;
}

/* ---------- pílulas de categoria (links reais, SEO) ---------- */
.sl-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.sl-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 100px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: border-color var(--t-md), color var(--t-md), background-color var(--t-md);
}

.sl-cat-pill .sl-count {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-low);
}

.sl-cat-pill:hover {
    border-color: rgba(255, 255, 255, .45);
    color: var(--light);
}

.sl-cat-pill.is-active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.sl-cat-pill.is-active .sl-count {
    color: rgba(255, 255, 255, .75);
}

/* ---------- breadcrumb ---------- */
.sl-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--ink-low);
}

.sl-breadcrumb a {
    color: var(--ink-mid);
    text-decoration: none;
    transition: color var(--t-md);
}

.sl-breadcrumb a:hover {
    color: var(--light);
}

.sl-breadcrumb span[aria-hidden] {
    opacity: .4;
}

.sl-breadcrumb-here {
    max-width: min(480px, 52vw);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- destaque assimétrico 7/5 ---------- */
.sl-lead {
    padding: 8px 0 44px;
}

.sl-featured {
    display: grid;
    grid-template-columns: 7fr 5fr;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .02);
    text-decoration: none;
    transition: border-color var(--t-md), background-color var(--t-md);
}

.sl-featured:hover {
    border-color: var(--hairline-strong);
    background-color: rgba(255, 255, 255, .04);
}

.sl-featured-media {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--hairline);
}

.sl-featured-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(0, 0, .36, 1);
}

.sl-featured:hover .sl-featured-media img {
    transform: scale(1.03);
}

.sl-featured-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 36px 38px;
}

.sl-featured-label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-up);
}

.sl-featured h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.16;
    letter-spacing: -.015em;
    color: var(--light);
}

.sl-featured-desc {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-mid);
}

.sl-featured-foot {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--hairline);
}

.sl-featured-author {
    font-size: 13.5px;
    color: var(--ink-low);
}

.sl-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-up);
    white-space: nowrap;
}

.sl-featured-cta svg {
    width: 17px;
    height: 17px;
    transition: transform var(--t-md);
}

.sl-featured:hover .sl-featured-cta svg {
    transform: translateX(4px);
}

/* ---------- grid de cards (recentes / relacionados) ---------- */
.sl-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sl-post-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .02);
    text-decoration: none;
    transition: border-color var(--t-md), background-color var(--t-md);
}

.sl-post-card:hover {
    border-color: var(--hairline-strong);
    background-color: rgba(255, 255, 255, .04);
}

.sl-post-card-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
    background-color: rgba(255, 255, 255, .04);
}

.sl-post-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(0, 0, .36, 1);
}

.sl-post-card:hover .sl-post-card-img img {
    transform: scale(1.035);
}

.sl-post-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px 24px;
    flex: 1;
}

.sl-post-card h2,
.sl-post-card h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18.5px;
    line-height: 1.3;
    color: var(--ink-hi);
    letter-spacing: -.01em;
}

.sl-post-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sl-blog-empty {
    padding: 60px 0;
    text-align: center;
    color: rgba(255, 255, 255, .5);
}

/* ---------- registro com hairlines (assinatura do blog) ---------- */
.sl-ledger {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-ledger-row {
    border-top: 1px solid var(--hairline);
}

.sl-ledger-row:last-child {
    border-bottom: 1px solid var(--hairline);
}

.sl-ledger-row > a {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 22px;
    padding: 22px 4px;
    text-decoration: none;
    transition: background-color var(--t-md);
}

.sl-ledger--thumbs .sl-ledger-row > a {
    grid-template-columns: 152px minmax(0, 1fr) 44px;
}

.sl-ledger-row > a:hover {
    background-color: rgba(255, 255, 255, .025);
}

.sl-ledger-num {
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: .06em;
    color: var(--ink-low);
    transition: color var(--t-md);
}

.sl-ledger-row > a:hover .sl-ledger-num {
    color: var(--accent-up);
}

.sl-ledger-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--hairline);
    background-color: rgba(255, 255, 255, .04);
}

.sl-ledger-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(0, 0, .36, 1);
}

.sl-ledger-row > a:hover .sl-ledger-thumb img {
    transform: scale(1.04);
}

.sl-ledger-main {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.sl-ledger-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19.5px;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--ink-hi);
    transition: color var(--t-md);
}

.sl-ledger-row > a:hover .sl-ledger-title {
    color: var(--light);
}

.sl-ledger-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sl-ledger-main .sl-mono-meta {
    margin-top: 3px;
}

.sl-ledger-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--ink-low);
    transition: border-color var(--t-md), color var(--t-md), transform var(--t-md);
}

.sl-ledger-arrow svg {
    width: 17px;
    height: 17px;
}

.sl-ledger-row > a:hover .sl-ledger-arrow {
    border-color: var(--accent-up);
    color: var(--accent-up);
    transform: translateX(4px);
}

/* ---------- seções por categoria no índice ---------- */
.sl-catsec {
    padding: 30px 0;
}

/* grade 2×2 no desktop (empilha no mobile) */
.sl-catsec-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 64px;
}

@media (min-width: 1024px) {
    .sl-catsec-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sl-catsec-grid .sl-catsec {
        padding: 18px 0 26px;
    }

    .sl-catsec-grid .sl-catsec-head h2 {
        font-size: clamp(20px, 1.9vw, 26px);
    }

    /* rows mais compactos pra caber bem em meia coluna */
    .sl-catsec-grid .sl-ledger--thumbs .sl-ledger-row > a {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 16px;
        padding: 16px 2px;
    }

    .sl-catsec-grid .sl-ledger-arrow {
        display: none;
    }

    .sl-catsec-grid .sl-ledger-thumb {
        align-self: start;
    }

    .sl-catsec-grid .sl-ledger-title {
        font-size: 17px;
    }

    .sl-catsec-grid .sl-ledger-desc {
        font-size: 13.5px;
    }
}

.sl-catsec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 18px;
    padding-bottom: 20px;
}

.sl-catsec-num {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: .1em;
    color: var(--accent-up);
}

.sl-catsec-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 30px);
    letter-spacing: -.015em;
    color: var(--light);
}

.sl-catsec-head h2 a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-md);
}

.sl-catsec-head h2 a:hover {
    color: var(--accent-up);
}

.sl-catsec-count {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-low);
}

.sl-catsec-all {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-mid);
    text-decoration: none;
    transition: color var(--t-md);
}

.sl-catsec-all svg {
    width: 16px;
    height: 16px;
    transition: transform var(--t-md);
}

.sl-catsec-all:hover {
    color: var(--accent-up);
}

.sl-catsec-all:hover svg {
    transform: translateX(4px);
}

/* ---------- arquivo (todos os artigos) ---------- */
.sl-archive {
    padding: 40px 0 96px;
}

.sl-archive--page {
    padding-top: 16px;
}

.sl-archive-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
}

.sl-archive-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: -.02em;
    color: var(--light);
}

.sl-archive-head h2 .tg-thin {
    font-weight: 200;
}

.sl-archive-meta {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-low);
}

/* ---------- paginação ---------- */
.sl-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 36px;
}

.sl-page-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mid);
    text-decoration: none;
    transition: color var(--t-md);
}

.sl-page-arrow svg {
    width: 16px;
    height: 16px;
    transition: transform var(--t-md);
}

.sl-page-prev svg {
    transform: rotate(180deg);
}

a.sl-page-arrow:hover {
    color: var(--light);
}

a.sl-page-next:hover svg {
    transform: translateX(4px);
}

a.sl-page-prev:hover svg {
    transform: rotate(180deg) translateX(4px);
}

.sl-page-arrow.is-off {
    opacity: .28;
}

.sl-page-nums {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sl-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border: 1px solid var(--hairline);
    border-radius: 9px;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--ink-mid);
    text-decoration: none;
    transition: border-color var(--t-md), color var(--t-md), background-color var(--t-md);
}

a.sl-page-num:hover {
    border-color: var(--hairline-strong);
    color: var(--light);
}

.sl-page-num.is-current {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ---------- faixa de CTA (índice e categorias) ---------- */
.sl-cta-band {
    padding: 52px 0;
    margin: 26px 0;
}

.sl-cta-band-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.sl-cta-band-copy {
    max-width: 640px;
}

.sl-cta-band h2 {
    margin-top: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.015em;
    color: var(--light);
}

.sl-cta-band h2 .tg-thin {
    font-weight: 200;
}

.sl-cta-band-sub {
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-mid);
}

/* ---------- anúncios dos cursos (índice, arquivo, categorias, post) ---------- */
.sl-course-ads {
    padding: 56px 0;
    border-top: 1px solid var(--hairline);
}

.sl-course-ads-head {
    max-width: 640px;
    margin-bottom: 30px;
}

.sl-course-ads h2 {
    margin-top: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.015em;
    color: var(--light);
}

.sl-course-ads h2 .tg-thin {
    font-weight: 200;
}

.sl-course-ads-sub {
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-mid);
}

.sl-course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sl-course-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background-color: rgba(255, 255, 255, .02);
    text-decoration: none;
    transition: border-color var(--t-md), background-color var(--t-md), transform var(--t-md);
}

.sl-course-card:hover {
    border-color: var(--hairline-strong);
    background-color: rgba(255, 255, 255, .04);
    transform: translateY(-2px);
}

.sl-course-card.is-featured {
    border-color: var(--accent);
}

.sl-course-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-up);
}

.sl-course-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--light);
}

.sl-course-desc {
    flex: 1 0 auto;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-mid);
}

.sl-course-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--light);
}

.sl-course-cta svg {
    width: 15px;
    height: 15px;
    transition: transform var(--t-md);
}

.sl-course-card:hover .sl-course-cta {
    color: var(--accent-up);
}

.sl-course-card:hover .sl-course-cta svg {
    transform: translateX(4px);
}

@media (max-width: 820px) {
    .sl-course-ads {
        padding: 40px 0;
    }

    .sl-course-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- post individual ---------- */
.sl-post {
    position: relative;
    padding: calc(var(--frame) + 104px) 0 60px;
}

.sl-post .sl-breadcrumb {
    margin-bottom: 30px;
}

.sl-post-head {
    max-width: 880px;
}

.sl-post-head h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--light);
}

.sl-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
}

.sl-post-dek {
    margin-top: 18px;
    max-width: 760px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink-mid);
}

.sl-post-author {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    color: var(--ink-low);
}

.sl-post-author strong {
    color: var(--ink-hi);
    font-weight: 600;
}

.sl-post-figure {
    margin: 36px 0 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--hairline);
}

.sl-post-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* layout de leitura: coluna medida + TOC fixa */
.sl-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 64px;
    margin-top: 48px;
}

.sl-post-body {
    min-width: 0;
    max-width: 740px;
}

.sl-post-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sl-toc {
    position: sticky;
    top: calc(var(--frame) + 40px);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 22px 22px 24px;
}

.sl-toc-label {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-low);
    margin-bottom: 14px;
}

.sl-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: sl-toc;
    display: flex;
    flex-direction: column;
}

.sl-toc-list li {
    counter-increment: sl-toc;
}

.sl-toc-list a {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 7px 0 7px 14px;
    border-left: 2px solid transparent;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-mid);
    text-decoration: none;
    transition: color var(--t-md), border-color var(--t-md);
}

.sl-toc-list a::before {
    content: counter(sl-toc, decimal-leading-zero);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--ink-low);
    padding-top: 2px;
    transition: color var(--t-md);
}

.sl-toc-list a:hover {
    color: var(--light);
}

.sl-toc-list a.is-active {
    color: var(--light);
    border-left-color: var(--accent-up);
}

.sl-toc-list a.is-active::before {
    color: var(--accent-up);
}

/* TOC mobile: colapsável antes do conteúdo */
.sl-toc-mobile {
    display: none;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 4px 20px;
    margin-bottom: 30px;
}

.sl-toc-mobile summary {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-mid);
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sl-toc-mobile summary::-webkit-details-marker {
    display: none;
}

.sl-toc-mobile summary::after {
    content: '+';
    font-size: 16px;
    color: var(--ink-low);
}

.sl-toc-mobile[open] summary::after {
    content: '−';
}

.sl-toc-mobile .sl-toc-list {
    padding-bottom: 14px;
}

/* mini CTA da lateral */
.sl-aside-cta {
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 20px 22px 22px;
}

.sl-aside-cta-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--light);
}

.sl-aside-cta-text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-mid);
}

.sl-aside-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-up);
    text-decoration: none;
}

.sl-aside-cta a svg {
    width: 15px;
    height: 15px;
    transition: transform var(--t-md);
}

.sl-aside-cta a:hover svg {
    transform: translateX(4px);
}

/* tipografia do conteúdo vindo do WordPress */
.sl-post-content {
    font-size: 17.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .74);
    counter-reset: sl-sec;
}

.sl-post-content > * + * {
    margin-top: 1.15em;
}

/* parágrafo de abertura maior (lead) */
.sl-post-content > p:first-child {
    font-size: 19px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .84);
}

.sl-post-content h2,
.sl-post-content h3,
.sl-post-content h4 {
    scroll-margin-top: calc(var(--frame) + 40px);
}

.sl-post-content h2 {
    counter-increment: sl-sec;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(23px, 3vw, 30px);
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--light);
    margin-top: 2.1em;
}

/* numeração de seção: espelha a TOC (assinatura industrial) */
.sl-post-content h2::before {
    content: counter(sl-sec, decimal-leading-zero);
    display: block;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .12em;
    color: var(--accent-up);
    margin-bottom: 10px;
}

.sl-post-content h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(19px, 2.4vw, 23px);
    line-height: 1.3;
    color: var(--light);
    margin-top: 1.7em;
}

.sl-post-content h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--light);
    margin-top: 1.5em;
}

.sl-post-content a {
    color: var(--accent-up);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(69, 167, 221, .45);
    transition: text-decoration-color var(--t-md);
}

.sl-post-content a:hover {
    text-decoration-color: var(--accent-up);
}

.sl-post-content strong {
    color: rgba(255, 255, 255, .92);
}

.sl-post-content ul,
.sl-post-content ol {
    padding-left: 26px;
    display: flex;
    flex-direction: column;
    gap: .55em;
}

.sl-post-content ul {
    list-style: disc;
}

.sl-post-content li::marker {
    color: var(--accent-up);
}

.sl-post-content blockquote {
    border-left: 3px solid var(--accent);
    padding: 6px 0 6px 22px;
    color: rgba(255, 255, 255, .82);
    font-style: italic;
}

.sl-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--hairline);
}

.sl-post-content figure {
    margin: 1.8em 0;
}

.sl-post-content figcaption {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-low);
    text-align: center;
}

/* código: essencial num blog técnico */
.sl-post-content code {
    font-family: var(--mono);
    font-size: .88em;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 2px 7px;
    color: #9ed2f0;
    word-break: break-word;
}

.sl-post-content pre {
    position: relative;
    background-color: #090909;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: 22px 24px;
    overflow-x: auto;
}

.sl-post-content pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #d7e6f0;
    word-break: normal;
}

/* botão "copiar" injetado pelo js/blog.js */
.sl-code-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mid);
    background-color: #0d0d0d;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    transition: color var(--t-md), border-color var(--t-md);
}

.sl-code-copy:hover {
    color: var(--light);
    border-color: var(--hairline-strong);
}

.sl-code-copy.is-done {
    color: var(--accent-up);
    border-color: var(--accent-up);
}

.sl-post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    display: block;
    overflow-x: auto;
}

.sl-post-content th,
.sl-post-content td {
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 10px 14px;
    text-align: left;
}

.sl-post-content th {
    color: var(--light);
    background-color: rgba(255, 255, 255, .05);
    font-family: var(--font-display);
    font-weight: 600;
}

/* ---------- compartilhar ---------- */
.sl-post-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--hairline);
}

.sl-post-share .sl-share-label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-low);
}

.sl-post-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: rgba(255, 255, 255, .7);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--t-md), color var(--t-md), background-color var(--t-md);
}

.sl-post-share a:hover {
    border-color: var(--accent);
    color: #fff;
    background-color: var(--accent);
}

.sl-copy-link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 100px;
    background: none;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: border-color var(--t-md), color var(--t-md);
}

.sl-copy-link:hover {
    border-color: var(--hairline-strong);
    color: var(--light);
}

.sl-copy-link.is-done {
    border-color: var(--accent-up);
    color: var(--accent-up);
}

/* ---------- autor (E-E-A-T) ---------- */
.sl-author {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    margin-top: 40px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 26px 28px;
}

.sl-author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--hairline);
}

.sl-author-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-low);
}

.sl-author-name {
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--light);
}

.sl-author-bio {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-mid);
}

/* ---------- CTA dentro do post ---------- */
.sl-post-cta {
    margin-top: 44px;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent);
    border-radius: 14px;
    padding: 34px 36px;
    background-color: rgba(255, 255, 255, .02);
}

.sl-post-cta h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px, 3vw, 28px);
    color: var(--light);
    letter-spacing: -.015em;
}

.sl-post-cta p {
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-mid);
    max-width: 560px;
}

.sl-post-cta .tg-button {
    margin-top: 22px;
}

/* ---------- anterior / próximo ---------- */
.sl-pnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 56px;
}

.sl-pnav-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 20px 24px;
    text-decoration: none;
    transition: border-color var(--t-md), background-color var(--t-md);
}

.sl-pnav-item.is-off {
    visibility: hidden;
}

a.sl-pnav-item:hover {
    border-color: var(--hairline-strong);
    background-color: rgba(255, 255, 255, .025);
}

.sl-pnav-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-low);
}

.sl-pnav-label svg {
    width: 15px;
    height: 15px;
}

.sl-pnav-prev .sl-pnav-label svg {
    transform: rotate(180deg);
}

.sl-pnav-next {
    text-align: right;
}

.sl-pnav-next .sl-pnav-label {
    justify-content: flex-end;
}

.sl-pnav-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
    color: var(--ink-hi);
}

/* ---------- relacionados ---------- */
.sl-related {
    padding: 30px 0 110px;
}

.sl-related-head {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 3.4vw, 34px);
    color: var(--light);
    letter-spacing: -.015em;
    margin-bottom: 32px;
}

.sl-related-head .tg-thin {
    font-weight: 200;
}

/* ---------- acessibilidade ---------- */
.sl-featured:focus-visible,
.sl-post-card:focus-visible,
.sl-ledger-row > a:focus-visible,
.sl-cat-pill:focus-visible,
.sl-page-num:focus-visible,
.sl-page-arrow:focus-visible,
.sl-pnav-item:focus-visible,
.sl-copy-link:focus-visible,
.sl-code-copy:focus-visible,
.sl-toc-list a:focus-visible {
    outline: 2px solid var(--accent-up);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .sl-featured-media img,
    .sl-post-card-img img,
    .sl-ledger-thumb img,
    .sl-featured-cta svg,
    .sl-catsec-all svg,
    .sl-ledger-arrow,
    .sl-aside-cta a svg,
    .sl-page-arrow svg {
        transition: none;
    }
}

/* ---------- responsivo ---------- */
@media (max-width: 1099px) {
    .sl-post-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sl-post-aside {
        display: none;
    }

    .sl-toc-mobile {
        display: block;
    }

    .sl-post-body {
        max-width: 760px;
    }
}

@media (max-width: 1023px) {
    .sl-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sl-featured {
        grid-template-columns: 1fr;
    }

    .sl-featured-media {
        aspect-ratio: 16 / 9;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
    }

    .sl-featured-media img {
        position: static;
    }

    .sl-featured-body {
        padding: 26px 26px 30px;
    }
}

@media (max-width: 767px) {
    .sl-blog-hero {
        padding-top: calc(var(--frame) + 80px);
    }

    .sl-blog-hero--slim {
        padding-top: calc(var(--frame) + 64px);
    }

    .sl-post {
        padding-top: calc(var(--frame) + 70px);
    }

    .sl-post-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sl-ledger-row > a {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 14px;
        padding: 18px 2px;
    }

    .sl-ledger--thumbs .sl-ledger-row > a {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .sl-ledger-num {
        font-size: 13px;
        padding-top: 4px;
        align-self: start;
    }

    .sl-ledger-thumb {
        align-self: start;
    }

    .sl-ledger-arrow {
        display: none;
    }

    .sl-ledger-title {
        font-size: 17px;
    }

    .sl-ledger-desc {
        font-size: 13.5px;
    }

    .sl-catsec-head {
        gap: 12px;
    }

    .sl-catsec-all {
        margin-left: 0;
        flex-basis: 100%;
    }

    .sl-cta-band-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .sl-pagination {
        justify-content: center;
    }

    .sl-page-arrow span {
        display: none;
    }

    .sl-pnav {
        grid-template-columns: 1fr;
    }

    .sl-pnav-item.is-off {
        display: none;
    }

    .sl-pnav-next {
        text-align: left;
    }

    .sl-pnav-next .sl-pnav-label {
        justify-content: flex-start;
    }

    .sl-author {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 16px;
        padding: 22px;
    }

    .sl-author-avatar {
        width: 48px;
        height: 48px;
    }

    .sl-post-cta {
        padding: 26px 22px;
    }

    .sl-post-content {
        font-size: 16.5px;
    }

    .sl-post-content > p:first-child {
        font-size: 18px;
    }

    .sl-post-content pre {
        padding: 42px 16px 16px;
        border-radius: 10px;
    }
}

/* ============================================================
   BANDA CLARA COM TRAMA
   Quebra o full preto do blog: fundo claro com quadriculado
   sutil. Os componentes flipam via custom properties, então
   registro, destaque, cards e paginação funcionam nos dois
   fundos sem markup novo.
   ============================================================ */
.sl-band-light {
    --hairline: rgba(13, 13, 13, .12);
    --hairline-strong: rgba(13, 13, 13, .32);
    --accent-up: #0b6da8;
    --ink-hi: rgba(13, 13, 13, .92);
    --ink-mid: rgba(13, 13, 13, .62);
    --ink-low: rgba(13, 13, 13, .46);
    /* profundidade do corte diagonal das bordas */
    --cut: clamp(22px, 3.5vw, 48px);
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(13, 13, 13, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 13, 13, .02) 1px, transparent 1px);
    background-size: 44px 44px;
    /* quebra geométrica: nível baixo, rampa, nível alto à direita
       (topo e rodapé em cortes paralelos; o escuro da página aparece no vão) */
    clip-path: polygon(
        0 var(--cut),
        54% var(--cut),
        60% 0,
        100% 0,
        100% calc(100% - var(--cut)),
        60% calc(100% - var(--cut)),
        54% 100%,
        0 100%
    );
}

/* wrapper das seções por categoria no índice (compensa o corte + 20px de respiro) */
div.sl-band-light {
    padding: calc(50px + var(--cut)) 0 calc(64px + var(--cut));
}

/* arquivo e categoria: mesmo ajuste de respiro por causa do corte */
.sl-archive.sl-band-light {
    padding: calc(60px + var(--cut)) 0 calc(116px + var(--cut));
}

.sl-archive--page.sl-band-light {
    padding-top: calc(36px + var(--cut));
}

.sl-band-light .sl-archive-head h2,
.sl-band-light .sl-catsec-head h2 {
    color: var(--dark);
}

.sl-band-light .sl-archive-head h2 .tg-thin {
    color: var(--soft);
}

.sl-band-light .sl-ledger-desc,
.sl-band-light .sl-post-card p {
    color: rgba(13, 13, 13, .55);
}

.sl-band-light .sl-ledger-row > a:hover {
    background-color: rgba(13, 13, 13, .035);
}

.sl-band-light .sl-ledger-row > a:hover .sl-ledger-title {
    color: var(--dark);
}

.sl-band-light .sl-ledger-thumb,
.sl-band-light .sl-post-card-img {
    background-color: #fff;
}

.sl-band-light .sl-featured,
.sl-band-light .sl-post-card {
    background-color: #fff;
}

.sl-band-light .sl-featured:hover,
.sl-band-light .sl-post-card:hover {
    background-color: #fff;
}

.sl-band-light .sl-featured h2,
.sl-band-light .sl-post-card h3 {
    color: var(--dark);
}

.sl-band-light .sl-featured-desc {
    color: var(--soft);
}

.sl-band-light a.sl-page-arrow:hover,
.sl-band-light a.sl-page-num:hover {
    color: var(--dark);
}

.sl-band-light .sl-blog-empty {
    color: var(--soft);
}