/**
 * Blog público do MestreKronos — /blog (prefixo .blg-).
 *
 * Tokens: os da landing (`landing/src/index.css`), renomeados --blg-*; mais a
 * superfície clara de leitura (D3): o chrome é escuro, o artigo é claro.
 *
 * 🔴 16/09/2026 — a 1ª versão copiou os --pkp-* de parceiro_paginas.css sem
 * ver que aquele arquivo JÁ tinha corrigido a paleta num bloco :root do fim
 * (22/08): os valores do topo dele são os antigos (v1-v3). O blog herdou o azul
 * errado — #003347 contra o #002433 real da landing — e o comentário do
 * blog_casca_inicio.php dizia "chrome escuro da landing (#003347)" como se
 * fosse dela. Os tokens abaixo vêm de landing/src/index.css, convertidos de HSL:
 *   --background hsl(198 100% 10%) = #002433   --primary   hsl(174 100% 36%) = #00b8a5
 *   --card       hsl(197 100% 13%) = #002f42   --mk-orange hsl(30 100% 49%)  = #fa7d00
 *   --mk-mid     hsl(197 100% 15%) = #00374d   container 1120px, px-6 (24px)
 *
 * ⚠️ Este arquivo também é o `content_css` do TinyMCE no /admin/blog (Etapa 5):
 * toda a tipografia de leitura vive sob `.blg-papel` (o editor usa
 * body_class: 'blg-papel'). Não mover regras de leitura para fora dela.
 */

:root {
    --blg-bg: #002433;
    --blg-card: #002f42;
    --blg-card-deep: #00374d;
    --blg-teal: #00b8a5;
    --blg-teal-strong: #4fe0d2;
    --blg-teal-soft: rgba(0, 184, 166, 0.18);
    --blg-teal-border: rgba(0, 184, 166, 0.35);
    --blg-laranja: #fa7d00;
    --blg-laranja-claro: #ffb066;
    --blg-texto: rgba(255, 255, 255, 0.85);
    --blg-muted: rgba(255, 255, 255, 0.62);
    --blg-fraco: rgba(255, 255, 255, 0.5);
    --blg-border: rgba(255, 255, 255, 0.08);
    --blg-fonte-titulo: 'Roboto Slab', Georgia, serif;
    --blg-fonte-corpo: 'Inter', system-ui, sans-serif;
    --blg-fonte-eyebrow: 'Pixelify Sans', system-ui, sans-serif;

    /* Superfície clara de leitura (D3) */
    --blg-papel: #F7F9FA;
    --blg-tinta: #0F2733;
    --blg-tinta-2: #3E5560;
    --blg-papel-borda: #DCE5E9;
    --blg-teal-tinta: #007f73;

    /* Barra: h-16 / md:h-20 da landing (Navbar.tsx). O token propaga sozinho
       para o padding-top do body, o scroll-margin dos títulos e a barra de
       progresso da leitura — quem mexer aqui não precisa caçar os três. */
    --blg-header-h: 64px;
    --blg-largura: 1120px;
    --blg-leitura: 68ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

.blg-body {
    margin: 0;
    background: radial-gradient(1200px 600px at 50% 0, rgba(0, 184, 166, 0.10), transparent 60%), var(--blg-bg);
    color: var(--blg-texto);
    font-family: var(--blg-fonte-corpo);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: var(--blg-header-h);
    overflow-x: hidden;
}
.blg-body a { color: var(--blg-teal-strong); text-decoration: none; }
.blg-body a:hover { color: #fff; }
img { max-width: 100%; height: auto; }

.blg-container { width: 100%; max-width: var(--blg-largura); margin: 0 auto; padding: 0 24px; }
.blg-container-leitura { width: 100%; max-width: var(--blg-leitura); margin: 0 auto; padding: 0 24px; }

/* ---------- átomos ---------- */
.blg-eyebrow {
    font-family: var(--blg-fonte-eyebrow);
    font-size: 12px; font-weight: 400;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--blg-teal);
    margin: 0 0 8px;
}
.blg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px;
    font-family: var(--blg-fonte-corpo); font-weight: 600; font-size: 15px;
    line-height: 1; white-space: nowrap; cursor: pointer; border: 0;
    transition: transform .12s ease, filter .12s ease;
}
.blg-btn:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; }
.blg-btn-laranja { background: var(--blg-laranja); color: #fff !important; }
.blg-btn-teal { background: var(--blg-teal); color: #00212e !important; }
.blg-btn-teal:hover { color: #00212e !important; }
.blg-secao-titulo { font-family: var(--blg-fonte-titulo); font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 20px; }

/* ---------- header ---------- */
.blg-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    height: var(--blg-header-h);
    /* Estado ROLADO do header da landing: ela nasce transparente sobre o herói
       e assume isto passando de 20px de rolagem. O blog abre direto em texto,
       então fica sempre neste estado — mesma cor, mesmo blur, mesma sombra. */
    background: rgba(0, 36, 51, 0.95);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--blg-border);
    box-shadow: 0 10px 15px -3px rgba(0, 36, 51, 0.5), 0 4px 6px -4px rgba(0, 36, 51, 0.5);
}
.blg-header-in {
    max-width: var(--blg-largura); margin: 0 auto; padding: 0 24px;
    height: 100%; display: flex; align-items: center; gap: 16px;
}
.blg-logo { display: flex; align-items: center; }
.blg-logo img { height: 42px; width: auto; display: block; }
.blg-rotulo {
    font-family: var(--blg-fonte-titulo); font-weight: 700; font-size: 15px;
    color: var(--blg-teal) !important; padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}
/* `flex: 1; min-width: 0; overflow: hidden` é a guarda estrutural que o menu da
   LANDING não tem: categoria a mais aqui é recortada, nunca empurra o CTA nem
   quebra a linha. Foi o que faltou lá, quando um 6º link quebrou o header entre
   1024 e 1080px (revertido em 16/09/2026). A máscara à direita transforma o
   corte em desvanecimento; com poucas categorias ela cai em espaço vazio. */
.blg-nav {
    display: none; gap: 32px; margin-left: 16px; flex: 1; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.blg-nav a {
    font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.6) !important;
    white-space: nowrap; transition: color .2s ease;
}
.blg-nav a:hover, .blg-nav a[aria-current="page"] { color: var(--blg-teal) !important; }
/* Par de CTAs do header da landing: "Entrar" contornado + laranja sólido. */
.blg-entrar {
    display: none; align-items: center; gap: 8px; margin-left: auto;
    font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap;
    color: var(--blg-teal) !important;
    border: 1px solid rgba(0, 184, 165, 0.5); border-radius: 12px; padding: 8px 16px;
    transition: border-color .2s ease, background-color .2s ease;
}
.blg-entrar:hover { border-color: var(--blg-teal); background: rgba(0, 184, 165, 0.1); color: var(--blg-teal) !important; }
.blg-entrar svg { flex: none; }
.blg-cta { display: none; margin-left: auto; }
.blg-entrar + .blg-cta { margin-left: 12px; }
/* No header o botão é o retângulo arredondado da landing (rounded-lg = .75rem),
   não a pílula que o CORPO do blog usa nas caixas de conversão. */
/* 40px de altura, como o CTA da landing: `text-sm` do Tailwind é 14/20px e o
   .blg-btn do corpo usa line-height 1 — sem reabrir a entrelinha, o mesmo
   padding daria 36px e o botão ficaria mais baixo que o "Entrar" ao lado. */
.blg-header .blg-btn { border-radius: 12px; font-weight: 700; padding: 10px 20px; font-size: 14px; line-height: 20px; }
.blg-menu { margin-left: auto; position: relative; }
.blg-menu summary {
    list-style: none; cursor: pointer; width: 40px; height: 40px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    border-radius: 8px;
}
.blg-menu summary::-webkit-details-marker { display: none; }
.blg-menu summary span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
.blg-menu[open] summary { background: rgba(255, 255, 255, 0.08); }
.blg-menu-painel {
    position: absolute; right: 0; top: 48px; min-width: 240px;
    background: var(--blg-card); border: 1px solid var(--blg-border); border-radius: 12px;
    padding: 10px; display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.blg-menu-painel a { padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--blg-texto) !important; }
.blg-menu-painel a:hover { background: rgba(255, 255, 255, 0.06); color: #fff !important; }
/* Rodapé do menu sanfona: "Entrar" contornado + CTA laranja, empilhados, como
   no menu mobile do Navbar.tsx. */
.blg-menu-entrar {
    margin-top: 10px; text-align: center; padding: 11px 12px;
    font-size: 15px; font-weight: 500; border-radius: 12px;
    color: var(--blg-teal) !important; border: 1px solid rgba(0, 184, 165, 0.5);
}
.blg-menu-entrar:hover { border-color: var(--blg-teal); background: rgba(0, 184, 165, 0.1); color: var(--blg-teal) !important; }
.blg-menu-painel .blg-btn { margin-top: 8px; justify-content: center; }

/* ---------- hub ---------- */
.blg-hero { padding: 48px 0 20px; text-align: center; }
.blg-hero h1 {
    font-family: var(--blg-fonte-titulo); font-weight: 700; color: #fff;
    font-size: clamp(28px, 4.5vw, 44px); line-height: 1.15; margin: 0 0 12px;
    max-width: 22ch; margin-left: auto; margin-right: auto;
}
.blg-hero-sub { color: var(--blg-muted); font-size: 17px; max-width: 60ch; margin: 0 auto; }

.blg-chips { padding: 12px 0 28px; }
.blg-chips .blg-container { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.blg-chip {
    display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.14); color: var(--blg-muted) !important;
}
.blg-chip:hover { color: #fff !important; border-color: rgba(255, 255, 255, 0.3); }
.blg-chip-ativo { background: var(--blg-teal); border-color: var(--blg-teal); color: #00212e !important; }

.blg-card {
    background: var(--blg-card); border: 1px solid var(--blg-border); border-radius: 12px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .15s ease, border-color .15s ease;
}
.blg-card:hover { transform: translateY(-2px); border-color: var(--blg-teal-border); }
.blg-card-capa { display: block; aspect-ratio: 1.91 / 1; background: var(--blg-card-deep); overflow: hidden; }
.blg-card-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blg-card-semcapa {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--blg-card-deep), var(--blg-teal-soft));
}
.blg-card-corpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.blg-card h3 { font-family: var(--blg-fonte-titulo); font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; }
.blg-card h3 a { color: #fff; }
.blg-card h3 a:hover { color: var(--blg-teal-strong); }
.blg-card-resumo { color: var(--blg-muted); font-size: 14px; margin: 0; }
.blg-card-meta { color: var(--blg-fraco); font-size: 12px; margin: auto 0 0; padding-top: 6px; }

.blg-destaque-area { padding: 0 0 36px; }
.blg-destaque-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.blg-destaque {
    background: var(--blg-card); border: 1px solid var(--blg-teal-border); border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
}
.blg-destaque-capa { display: block; aspect-ratio: 16 / 9; background: var(--blg-card-deep); }
.blg-destaque-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blg-destaque-corpo { padding: 22px 24px 24px; }
.blg-destaque h2 { font-family: var(--blg-fonte-titulo); font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.2; margin: 0 0 10px; }
.blg-destaque h2 a { color: #fff; }
.blg-destaque h2 a:hover { color: var(--blg-teal-strong); }
.blg-destaque-resumo { color: var(--blg-muted); font-size: 16px; margin: 0 0 10px; }
.blg-laterais { display: grid; grid-template-columns: 1fr; gap: 20px; }
.blg-card-lateral { flex-direction: row; }
.blg-card-lateral .blg-card-capa { width: 40%; flex: none; aspect-ratio: auto; }
.blg-card-lateral .blg-card-corpo { padding: 14px 16px; }
.blg-card-lateral h3 { font-size: 16px; }
.blg-card-lateral .blg-card-resumo { display: none; }

.blg-grid-area { padding: 0 0 36px; }
.blg-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

.blg-paginacao { padding: 8px 0 40px; }
.blg-paginacao .blg-container { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.blg-pag-num, .blg-pag-seta {
    min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); font-weight: 600; font-size: 14px;
    color: var(--blg-muted) !important;
}
.blg-pag-num:hover, .blg-pag-seta:hover { color: #fff !important; border-color: rgba(255, 255, 255, 0.3); }
.blg-pag-ativo { background: var(--blg-teal); border-color: var(--blg-teal); color: #00212e !important; }
.blg-pag-gap { color: var(--blg-fraco); padding: 0 4px; }

.blg-vazio { padding: 40px 0 60px; text-align: center; }
.blg-vazio h1, .blg-vazio h2 { font-family: var(--blg-fonte-titulo); color: #fff; font-size: 26px; margin: 0 0 10px; }
.blg-vazio p { color: var(--blg-muted); max-width: 48ch; margin: 0 auto 20px; }
.blg-404 { padding-top: 80px; }

.blg-conversao { padding: 24px 20px 56px; }
.blg-conversao-in {
    max-width: 760px; margin: 0 auto; text-align: center;
    background: linear-gradient(135deg, var(--blg-card-deep), var(--blg-card));
    border: 1px solid var(--blg-teal-border); border-radius: 16px; padding: 36px 24px;
}
.blg-conversao h2 { font-family: var(--blg-fonte-titulo); color: #fff; font-size: clamp(22px, 3vw, 30px); margin: 0 0 10px; }
.blg-conversao p { color: var(--blg-muted); margin: 0 auto 20px; max-width: 52ch; }

/* ---------- artigo (chrome) ---------- */
.blg-progresso {
    position: fixed; top: var(--blg-header-h); left: 0; right: 0; height: 3px; z-index: 49;
    background: var(--blg-laranja); transform-origin: 0 50%; transform: scaleX(0);
}
.blg-preview-banner {
    background: var(--blg-laranja); color: #1a1200; font-size: 14px; padding: 10px 20px; text-align: center;
}
.blg-preview-banner a { color: #1a1200 !important; text-decoration: underline; margin-left: 8px; font-weight: 600; }
.blg-arquivado-banner { background: #ffd9b3; }

.blg-artigo-cabeca { padding: 40px 0 28px; }
.blg-crumb { font-size: 13px; color: var(--blg-fraco); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.blg-crumb a { color: var(--blg-muted) !important; }
.blg-crumb a:hover { color: #fff !important; }
.blg-artigo h1 {
    font-family: var(--blg-fonte-titulo); font-weight: 700; color: #fff;
    font-size: clamp(28px, 4.5vw, 42px); line-height: 1.15; margin: 0 0 12px;
}
.blg-subtitulo { font-size: 19px; color: var(--blg-muted); margin: 0 0 22px; line-height: 1.5; }
.blg-autor { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.blg-autor-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--blg-card-deep); flex: none; }
.blg-autor-nome { margin: 0; font-weight: 600; color: #fff; font-size: 15px; }
.blg-autor-nome span { color: var(--blg-fraco); font-weight: 400; }
.blg-autor-data { margin: 2px 0 0; font-size: 13px; color: var(--blg-muted); }
.blg-share { display: flex; flex-wrap: wrap; gap: 8px; }
.blg-share-btn {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16); background: transparent;
    color: var(--blg-muted) !important; font: 500 13px var(--blg-fonte-corpo); cursor: pointer;
}
.blg-share-btn:hover { color: #fff !important; border-color: rgba(255, 255, 255, 0.35); }
.blg-share-copiado { display: none; }
.blg-copiado .blg-share-copiar { display: none; }
.blg-copiado .blg-share-copiado { display: inline; color: var(--blg-teal-strong); }

.blg-capa { margin: 0 auto 0; max-width: var(--blg-largura); padding: 0 20px; }
.blg-capa img { width: 100%; height: auto; display: block; border-radius: 14px 14px 0 0; }
.blg-capa figcaption { font-size: 13px; color: var(--blg-fraco); text-align: center; padding: 8px 0 0; }

/* ---------- artigo (superfície clara — D3) ---------- */
.blg-papel {
    background: var(--blg-papel); color: var(--blg-tinta);
    padding: 40px 0 48px; margin-top: -1px;
    border-top: 4px solid var(--blg-teal);
}
.blg-pagina-artigo .blg-capa + .blg-papel { border-top: 0; }
.blg-papel a { color: var(--blg-teal-tinta); text-decoration: underline; text-underline-offset: 2px; }
.blg-papel a:hover { color: var(--blg-tinta); }

.blg-sumario {
    background: #fff; border: 1px solid var(--blg-papel-borda); border-radius: 12px;
    padding: 16px 20px; margin: 0 0 32px;
}
.blg-sumario-titulo { margin: 0 0 8px; font: 600 13px var(--blg-fonte-corpo); letter-spacing: .06em; text-transform: uppercase; color: var(--blg-tinta-2); }
.blg-sumario ol { margin: 0; padding-left: 20px; }
.blg-sumario li { margin: 4px 0; font-size: 15px; }
.blg-sumario a { text-decoration: none; }
.blg-sumario a:hover { text-decoration: underline; }

/* Tipografia de leitura — também vale dentro do TinyMCE (body.blg-papel) */
.blg-papel, .blg-corpo { font-family: var(--blg-fonte-corpo); font-size: 17px; line-height: 1.65; }
.blg-corpo > *:first-child { margin-top: 0; }
.blg-papel p { margin: 0 0 1.25em; }
.blg-papel h2 {
    font-family: var(--blg-fonte-titulo); font-size: 1.5rem; font-weight: 700; line-height: 1.25;
    color: var(--blg-tinta); margin: 2em 0 .6em; scroll-margin-top: calc(var(--blg-header-h) + 16px);
}
.blg-papel h3 { font-family: var(--blg-fonte-titulo); font-size: 1.2rem; font-weight: 700; margin: 1.6em 0 .5em; color: var(--blg-tinta); }
.blg-papel h4, .blg-papel h5, .blg-papel h6 { font-size: 1.05rem; font-weight: 600; margin: 1.4em 0 .4em; }
.blg-papel ul, .blg-papel ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.blg-papel li { margin: .35em 0; }
.blg-papel li > ul, .blg-papel li > ol { margin-bottom: 0; }
.blg-papel strong, .blg-papel b { font-weight: 600; }
.blg-papel hr { border: 0; border-top: 1px solid var(--blg-papel-borda); margin: 2em 0; }
.blg-papel img { border-radius: 10px; display: block; margin: 0 auto; }
.blg-papel figure { margin: 1.75em 0; }
.blg-papel figcaption { font-size: .85rem; color: var(--blg-tinta-2); text-align: center; margin-top: .5em; }
.blg-papel blockquote {
    margin: 1.5em 0; padding: .75em 0 .75em 1.25em;
    border-left: 4px solid var(--blg-teal); color: var(--blg-tinta-2); font-style: italic;
}
.blg-papel blockquote p:last-child { margin-bottom: 0; }
.blg-papel code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em;
    background: #E9EFF2; padding: .1em .35em; border-radius: 4px;
}
.blg-papel pre {
    background: #0F2733; color: #DAE3E3; padding: 16px 18px; border-radius: 10px;
    overflow-x: auto; font-size: .9rem; line-height: 1.5; margin: 0 0 1.5em;
}
.blg-papel pre code { background: none; padding: 0; color: inherit; }
.blg-papel table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 0 0 1.5em; }
.blg-papel th, .blg-papel td { border: 1px solid var(--blg-papel-borda); padding: 8px 10px; text-align: left; vertical-align: top; }
.blg-papel th { background: #E9EFF2; font-weight: 600; }
.blg-corpo table { display: block; overflow-x: auto; }

.blg-cta-texto {
    margin: 2em 0; padding: 22px 24px; border-radius: 12px;
    background: #fff; border: 1px solid var(--blg-teal-border);
    box-shadow: 0 1px 2px rgba(15, 39, 51, .06), 0 8px 24px rgba(15, 39, 51, .06);
}
.blg-cta-texto-titulo { font-family: var(--blg-fonte-titulo); font-weight: 700; font-size: 1.2rem; margin: 0 0 6px; }
.blg-cta-texto-corpo { color: var(--blg-tinta-2); margin: 0 0 14px; font-size: 1rem; }
.blg-cta-texto .blg-btn { text-decoration: none; }

.blg-autor-box {
    display: flex; gap: 16px; align-items: flex-start;
    margin: 3em 0 0; padding: 20px; background: #fff; border: 1px solid var(--blg-papel-borda); border-radius: 12px;
}
.blg-autor-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; margin: 0; }
.blg-autor-box-nome { margin: 0 0 4px; font-weight: 600; }
.blg-autor-box-bio { margin: 0; font-size: .95rem; color: var(--blg-tinta-2); }

.blg-relacionados { padding: 44px 0 8px; }

/* ---------- footer ---------- */
.blg-footer { border-top: 1px solid var(--blg-border); margin-top: 16px; background: rgba(0, 0, 0, 0.12); }
.blg-footer-in {
    max-width: var(--blg-largura); margin: 0 auto; padding: 44px 20px 28px;
    display: grid; grid-template-columns: 1fr; gap: 32px;
}
.blg-footer-marca img { height: 48px; width: auto; margin-bottom: 12px; }
.blg-footer-marca p { color: var(--blg-muted); font-size: 14px; line-height: 1.6; margin: 0; }
.blg-footer-col h3 { font: 600 13px var(--blg-fonte-corpo); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.blg-footer-col ul { list-style: none; margin: 0; padding: 0; }
.blg-footer-col li { margin: 8px 0; }
.blg-footer-col a { color: var(--blg-muted) !important; font-size: 14px; }
.blg-footer-col a:hover { color: #fff !important; }
.blg-footer-base { border-top: 1px solid var(--blg-border); text-align: center; padding: 16px 20px; }
.blg-footer-base p { margin: 0; color: var(--blg-fraco); font-size: 13px; }

/* ---------- breakpoints ---------- */
@media (min-width: 640px) {
    .blg-grid { grid-template-columns: repeat(2, 1fr); }
    .blg-laterais { grid-template-columns: repeat(2, 1fr); }
    .blg-card-lateral { flex-direction: column; }
    .blg-card-lateral .blg-card-capa { width: 100%; aspect-ratio: 1.91 / 1; }
    .blg-footer-in { grid-template-columns: 1.4fr 1fr 1fr; }
    .blg-papel, .blg-corpo { font-size: 18px; line-height: 1.7; }
}
@media (min-width: 768px) {
    /* md: a landing sobe a barra de h-16 para h-20 e a logo de 42 para 63px. */
    :root { --blg-header-h: 80px; }
    .blg-logo img { height: 63px; }
}
@media (min-width: 1024px) {
    .blg-nav { display: flex; }
    .blg-cta { display: inline-flex; }
    .blg-entrar { display: inline-flex; }
    .blg-menu { display: none; }
    .blg-grid { grid-template-columns: repeat(3, 1fr); }
    .blg-destaque-grid { grid-template-columns: 2fr 1fr; align-items: stretch; }
    .blg-laterais { grid-template-columns: 1fr; }
    .blg-card-lateral { flex-direction: column; }
    .blg-hero { padding-top: 64px; }
}

/* ---------- peça própria do MK (BlogAnuncio) ----------
   Mesma cara do card do app (includes/ad_slot_card.php): paleta clara FIXA,
   rotulado "Publicidade", para a troca futura por unidade do AdSense no
   mesmo contêiner ser invisível. */
.blg-ad { margin: 2.25em 0 0; }
.blg-ad-hub { max-width: 760px; margin: 0 auto 36px; padding: 0 20px; }
.blg-ad-rotulo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a93a2; margin: 0 0 4px; }
.blg-ad-card {
    display: flex; align-items: center; gap: 16px;
    border: 1px solid #d8dee6; border-radius: 10px; padding: 16px 20px; min-height: 96px;
    background: #fff; color: #1c2530 !important; text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.blg-ad-card:hover { background: #f4f6f8; color: #1c2530 !important; }
.blg-ad-icone { flex: none; width: 52px; height: 52px; border-radius: 10px; background: #fff3e8; color: #fd7e14; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.blg-ad-conteudo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.blg-ad-titulo { font-family: var(--blg-fonte-corpo); font-weight: 700; font-size: 17px; color: #1c2530; }
.blg-ad-texto { font-size: 14px; color: #5a6472; line-height: 1.4; }
.blg-ad-btn { flex: none; background: #fd7e14; color: #fff; font-weight: 600; font-size: 14px; border-radius: 999px; padding: 9px 18px; white-space: nowrap; }
.blg-ad-card:hover .blg-ad-btn { background: #e86a00; }
.blg-ad-chevron { display: none; flex: none; color: #fd7e14; font-size: 24px; line-height: 1; }
@media (max-width: 575.98px) {
    .blg-ad-btn { display: none; }
    .blg-ad-chevron { display: flex; align-items: center; }
    .blg-ad-card { min-height: 80px; padding: 12px 16px; }
}