/* Blog do MRO Manager. Camada sobre /site/css/site.css: usa os tokens e os componentes do site (.btn, .card, .eyebrow,
   .answer, .faq, .table-wrap, .breadcrumbs, .cta-band, .tone-*, .has-grid). Nada de cor ou fonte fora do sistema.
   A marcação é identificada por data-blog; as classes abaixo são só desenho. Sem JS a página continua completa. */

:root { --blog-w: 1084px; --blog-col: 720px; --blog-side: 300px; }

/* Canto inferior direito cortado (a assinatura do site) nas peças do blog que ainda não têm a classe */
.blog-cta-lateral, .blog-cta, .blog-banner, .blog-prose [data-blog="destaque"], .blog-prose pre, .blog-bloco .bl-panel, .blog-vazio {
  position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.blog-cta-lateral::after, .blog-banner--faixa::after, .blog-prose [data-blog="destaque"]::after, .blog-bloco .bl-panel::after, .blog-vazio::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: var(--cut); height: var(--cut); pointer-events: none;
  background: linear-gradient(to top left, transparent 50%, var(--chamfer-bd, var(--c-line-2)) 50%, var(--chamfer-bd, var(--c-line-2)) calc(50% + 1.25px), transparent calc(50% + 1.25px));
}

.blog-wrap { width: 100%; max-width: calc(var(--blog-w) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* Barra de progresso de leitura (acima do cabeçalho do site, que tem z-index 100) */
.blog-progresso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 110; pointer-events: none; }
.blog-progresso__barra { height: 100%; background: var(--g-brand); transform: scaleX(0); transform-origin: 0 50%; }

/* Faixa de prévia local */
.blog-previa { padding: 10px var(--gutter); text-align: center; font-size: var(--t-small); background: var(--c-amber); color: #1a1405; }

/* Grade estrutural que some para baixo, como nos heros do site */
.blog-topo.has-grid::before, .blog-hero.has-grid::before { -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }

/* ---------- Cabeçalho do post ---------- */
.blog-topo { padding-block: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 48px); }
.breadcrumbs ol { flex-wrap: nowrap; align-items: center; }
.breadcrumbs li { flex: none; white-space: nowrap; }
.breadcrumbs li:last-child { display: flex; flex: 0 1 auto; min-width: 0; }
.breadcrumbs [aria-current="page"] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-post__categoria { margin: var(--s-6) 0 var(--s-4); }
a.blog-post__categoria:hover { border-color: var(--c-violet-400); color: var(--c-text); }
.blog-post__titulo { font-size: clamp(2.125rem, 1.45rem + 3vw, 3.5rem); line-height: 1.06; letter-spacing: -.025em; max-width: 24ch; }
.blog-post__resumo { margin-top: var(--s-4); max-width: 60ch; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--t-small); color: var(--c-text-2); }
.blog-meta__item { display: inline-flex; align-items: center; gap: 8px; }
.blog-meta__item > .i { width: 16px; height: 16px; color: var(--c-violet-400); }
.blog-meta strong { font-weight: 600; }
.blog-meta__avatar { display: grid; place-items: center; width: 30px; height: 30px; background: var(--c-brand); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%); }
.blog-meta__avatar .i { width: 18px; height: 18px; }

/* Capa 16:9 com o canto chanfrado da marca */
.blog-capa { margin: 0; }
.blog-capa__moldura { --cut: var(--cut-lg); --chamfer-bd: var(--c-line-2); position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--c-line-2); border-radius: var(--r-ui); background: var(--c-ink-3); overflow: hidden; }
.blog-capa__moldura img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Duas colunas: artigo e lateral fixa ---------- */
.blog-layout { display: grid; gap: var(--s-5); padding-block: var(--s-6) var(--s-8); }
.blog-aside { display: grid; gap: var(--s-4); align-content: start; }
.blog-principal { min-width: 0; max-width: var(--blog-col); }
@media (min-width: 1024px) {
  .blog-layout { grid-template-columns: minmax(0, var(--blog-col)) var(--blog-side); gap: var(--s-8); padding-top: var(--s-7); }
  .blog-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; gap: var(--s-5); }
  .blog-principal { grid-column: 1; grid-row: 1; }
}

/* Sumário: <details> no celular, lista fixa no desktop */
.blog-toc { border: 1px solid var(--c-line-2); border-radius: var(--r-ui); background: var(--c-ink-2); }
.blog-toc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); cursor: pointer; font-family: var(--f-display); font-weight: 500; }
.blog-toc summary::-webkit-details-marker { display: none; }
.blog-toc summary:focus-visible { outline-offset: -3px; }
.blog-toc__seta { width: 18px; height: 18px; color: var(--c-violet-400); transition: transform var(--d-med) var(--ease-out); }
.blog-toc[open] .blog-toc__seta { transform: rotate(180deg); }
.blog-toc nav { padding: 0 var(--s-4) var(--s-3); }
.blog-toc ol { list-style: none; border-left: 1px solid var(--c-line); }
.blog-toc a { display: flex; align-items: center; min-height: 44px; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: var(--t-small); line-height: 1.35; color: var(--c-text-2); transition: color var(--d-fast), border-color var(--d-fast); }
.blog-toc ol ol a { padding-left: 28px; font-size: .8125rem; }
.blog-toc a:hover { color: var(--c-text); }
.blog-toc a[aria-current="true"] { color: var(--c-text); border-left-color: var(--c-violet-400); font-weight: 500; }
@media (min-width: 1024px) {
  .blog-toc { border: 0; background: none; }
  .blog-toc::details-content { content-visibility: visible; display: block; height: auto; }
  .blog-toc summary { pointer-events: none; min-height: 0; padding: 0 0 var(--s-3); font-size: var(--t-label); color: var(--c-text-3); }
  .blog-toc__seta { display: none; }
  .blog-toc nav { padding: 0; max-height: max(160px, calc(100vh - var(--header-h) - 360px)); overflow-y: auto; }
  .blog-toc a { min-height: 0; }
}

/* Card lateral de conversão (só no desktop; no celular vale o CTA fixo do rodapé) */
.blog-cta-lateral { --cut: var(--cut-md); --chamfer-bd: var(--c-violet-400); display: none; padding: var(--s-5); border: 1px solid var(--c-violet-400); border-radius: var(--r-ui); background: linear-gradient(180deg, rgba(136, 0, 255, .2), rgba(136, 0, 255, .04)), var(--c-ink-1); }
.blog-cta-lateral__icone { display: grid; place-items: center; width: 36px; height: 36px; background: var(--c-brand); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.blog-cta-lateral__icone .i { width: 18px; height: 18px; }
.blog-cta-lateral__titulo { margin-top: var(--s-4); font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; }
.blog-cta-lateral__texto { margin: var(--s-2) 0 var(--s-5); color: var(--c-text-2); font-size: var(--t-small); }
.blog-cta-lateral__nota { margin-top: var(--s-3); text-align: center; font-size: var(--t-label); color: var(--c-text-3); }
@media (min-width: 1024px) { .blog-cta-lateral { display: block; } }

/* ---------- Corpo do artigo ---------- */
.blog-principal > * + * { margin-top: var(--s-7); }
.blog-principal > .blog-banner, .blog-principal > .blog-cta, .blog-principal > .blog-share { margin-top: var(--s-7); }
.blog-prose { font-size: 1.0625rem; line-height: 1.7; color: var(--c-text-2); overflow-wrap: anywhere; }
@media (min-width: 720px) { .blog-prose { font-size: 1.125rem; } }
.blog-prose p { line-height: 1.7; }
.blog-prose > * + * { margin-top: 1.15em; }
.blog-prose h2 { margin-top: 2.4em; font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem); line-height: 1.15; color: var(--c-text); }
.blog-prose h2::before { content: ''; display: block; width: 28px; height: 3px; margin-bottom: 14px; background: var(--c-violet-400); }
.blog-prose h2:first-child { margin-top: 0; }
.blog-prose h3 { margin-top: 1.9em; font-size: var(--t-h3); line-height: 1.25; color: var(--c-text); }
.blog-prose h2 + *, .blog-prose h3 + * { margin-top: .8em; }
.blog-prose strong { color: var(--c-text); }
.blog-prose a:not(.btn) { color: var(--c-violet-300); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-prose a:not(.btn):hover { color: var(--c-text); }
.blog-prose ul, .blog-prose ol { padding-left: 1.45em; }
.blog-prose li { padding-left: .25em; }
.blog-prose li + li { margin-top: .5em; }
.blog-prose li::marker { color: var(--c-violet-400); font-weight: 600; }
.blog-prose hr { border: 0; height: 1px; background: var(--c-line); margin-block: 2.4em; }
.blog-prose blockquote { margin-block: 1.8em; padding: 4px 0 4px var(--s-5); border-left: 2px solid var(--c-violet-400); font-family: var(--f-display); font-weight: 500; font-size: 1.3em; line-height: 1.45; letter-spacing: -.01em; color: var(--c-text); }
.blog-prose blockquote p { line-height: inherit; }
.blog-prose code { font-family: var(--f-code); font-size: .875em; padding: 2px 6px; background: var(--c-ink-3); border: 1px solid var(--c-line); border-radius: var(--r-xs); color: var(--c-text); overflow-wrap: anywhere; }
.blog-prose pre { --cut: var(--cut-sm); --chamfer-bd: var(--c-line-2); margin-block: 1.8em; overflow-x: auto; padding: var(--s-4) var(--s-5); background: var(--c-ink-0); border: 1px solid var(--c-line-2); border-radius: var(--r-ui); font-size: .875rem; line-height: 1.7; color: #d8d4f5; }
.blog-prose pre code { padding: 0; background: none; border: 0; font-size: inherit; color: inherit; overflow-wrap: normal; }

/* Figuras com legenda */
.blog-prose figure { margin-block: 2em; }
.blog-prose figure > img { width: 100%; height: auto; border: 1px solid var(--c-line-2); border-radius: var(--r-ui); background: var(--c-ink-3); }
.blog-prose figcaption { margin-top: var(--s-3); padding-left: var(--s-3); border-left: 2px solid var(--c-line-2); font-size: var(--t-small); line-height: 1.5; color: var(--c-text-3); }

/* Tabelas: rolam dentro do contêiner */
.blog-prose [data-blog="tabela"] { margin-block: 2em; }
.blog-prose .table { min-width: 540px; font-size: .9375rem; line-height: 1.5; }
.blog-prose .table th, .blog-prose .table td { padding: 12px 16px; }

/* Caixas de destaque (dica, atenção, nota) */
.blog-prose [data-blog="destaque"] { --cut: var(--cut-sm); --tom: var(--c-blue-400); --chamfer-bd: var(--tom); margin-block: 2em; padding: var(--s-4) var(--s-5) var(--s-5); border: 1px solid var(--tom); border-left-width: 3px; border-radius: var(--r-ui); background: color-mix(in srgb, var(--tom) 9%, var(--c-ink-1)); font-size: 1rem; line-height: 1.65; color: var(--c-text); }
.blog-prose [data-blog="destaque"][data-tipo="dica"] { --tom: var(--c-mint); }
.blog-prose [data-blog="destaque"][data-tipo="atencao"] { --tom: var(--c-amber); }
.blog-prose [data-blog="destaque"][data-tipo="nota"] { --tom: var(--c-blue-400); }
.blog-prose [data-blog="destaque"] > * + * { margin-top: .7em; }
.blog-prose [data-blog="destaque"] p { line-height: 1.65; }
.blog-prose [data-blog="destaque-titulo"] { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600; font-size: var(--t-small); letter-spacing: .01em; color: var(--tom); }
.blog-prose [data-blog="destaque-titulo"] .i { width: 18px; height: 18px; }

/* ---------- Banners de conversão intercalados ---------- */
.blog-banner { --cut: var(--cut-md); overflow: hidden; overflow: clip; --chamfer-bd: var(--c-line-2); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4) var(--s-4); padding: var(--s-5); border: 1px solid var(--c-line-2); border-radius: var(--r-ui); font-size: 1rem; line-height: 1.5; }
.blog-prose > .blog-banner { margin-block: 2.6em; }
.blog-banner__icone { display: grid; place-items: center; width: 44px; height: 44px; background: var(--c-brand); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.blog-banner__icone .i { width: 22px; height: 22px; }
.blog-banner__titulo { font-family: var(--f-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.015em; color: var(--c-text); text-wrap: balance; }
.blog-banner__texto { margin-top: 6px; font-size: var(--t-small); line-height: 1.55; color: var(--c-text-2); }
.blog-banner > .btn { grid-column: 1 / -1; width: 100%; }
/* Faixa: linha discreta, parece parte do produto, não anúncio */
.blog-banner--faixa { background: linear-gradient(100deg, rgba(136, 0, 255, .22), rgba(60, 133, 255, .07) 72%), var(--c-ink-2); box-shadow: inset 3px 0 0 var(--c-violet-400); }
@media (min-width: 700px) {
  .blog-banner--faixa { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-4); padding: var(--s-5); }
  .blog-banner--faixa > .btn { grid-column: auto; width: auto; }
}
/* Cartão: bloco de marca com grade, maior, o ponto de atenção do texto */
.blog-banner--cartao { --cut: var(--cut-lg); grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s-4); padding: clamp(24px, 4vw, 40px); border: 0; }
.blog-banner--cartao::after { display: none; }
.blog-banner--cartao .blog-banner__icone { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.blog-banner--cartao .blog-banner__titulo { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); line-height: 1.12; max-width: 22ch; }
.blog-banner--cartao .blog-banner__texto { max-width: 52ch; margin-top: var(--s-3); font-size: 1.0625rem; color: var(--c-text-2); }
.blog-banner--cartao > .btn { grid-column: auto; width: auto; margin-top: var(--s-2); }
@media (max-width: 480px) { .blog-banner--cartao > .btn { width: 100%; } }

/* ---------- Perguntas frequentes ---------- */
.blog-faq h2, .blog-relacionados h2 { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem); line-height: 1.15; }
.blog-faq h2 { margin-bottom: var(--s-4); }
.blog-faq .faq__q { min-height: 56px; }
@media (max-width: 640px) { .blog-faq .faq__a { padding: 0 0 22px; } }

/* ---------- Caixa final ---------- */
.blog-cta { --cut: var(--cut-lg); overflow: hidden; overflow: clip; padding: clamp(28px, 5vw, 52px); border-radius: var(--r-ui); }
.blog-cta .cta-band__art svg { transform: translateX(24%) scale(1.15); }
.blog-cta__selo { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--c-line-2); font-family: var(--f-display); font-size: .6875rem; font-weight: 500; color: #fff; }
.blog-cta__selo .i { width: 13px; height: 13px; }
.blog-cta__titulo { margin-top: var(--s-4); max-width: 18ch; font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); line-height: 1.08; letter-spacing: -.025em; color: var(--c-text); }
.blog-cta__texto { margin: var(--s-4) 0 var(--s-6); max-width: 46ch; font-size: var(--t-lead); color: var(--c-text-2); }
.blog-cta .btn-row { justify-content: flex-start; }
.blog-cta__nota { display: flex; align-items: center; gap: 8px; margin-top: var(--s-4); font-size: var(--t-small); color: var(--c-text-2); }
.blog-cta__nota .i { width: 16px; height: 16px; color: #fff; }
@media (max-width: 480px) { .blog-cta .btn--lg { width: 100%; } }

/* ---------- Compartilhar ---------- */
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.blog-share__rotulo { font-family: var(--f-display); font-weight: 500; }
.blog-share__acoes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.blog-share .btn { gap: 8px; }
.blog-share .btn svg { width: 14px; height: 14px; }
.blog-share__aviso { font-size: var(--t-small); color: var(--c-mint); }
.blog-share__aviso[hidden] { display: none; }

/* ---------- Leia também ---------- */
.blog-relacionados { margin-top: 0; padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--c-line); }
.blog-relacionados .eyebrow { margin-bottom: var(--s-3); }
.blog-relacionados h2 { margin-bottom: var(--s-6); }

/* ---------- Índice e categoria ---------- */
.blog-hero { padding-block: clamp(20px, 3vw, 40px) clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--c-line); }
.blog-hero__titulo { margin-top: var(--s-6); font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.025em; }
.blog-hero__texto { margin-top: var(--s-4); max-width: 58ch; }
.blog-filtro-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); }
.blog-filtro ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.blog-filtro li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-line-2); background: rgba(167, 146, 255, .04); font-family: var(--f-display); font-size: .8125rem; font-weight: 500; color: var(--c-text-2); transition: border-color var(--d-fast), color var(--d-fast), background-color var(--d-fast); }
.blog-filtro li a:hover { border-color: var(--c-violet-400); color: var(--c-text); background: rgba(167, 146, 255, .09); }
.blog-filtro li a[aria-current="page"] { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.blog-filtro__rss { min-height: 44px; }

.blog-destaque { padding-top: var(--s-7); }
.blog-lista { padding-block: var(--s-6) var(--s-8); }
.blog-destaque + .blog-lista { padding-top: var(--s-5); }
.blog-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }

/* Cards */
.blog-card { padding: 0; gap: 0; --chamfer-bd: var(--c-line-2); }
.blog-card__media { display: block; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-bottom: 1px solid var(--c-line); background: var(--c-ink-3); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease-out); }
@media (hover: hover) { .blog-card:hover .blog-card__media img { transform: scale(1.04); } }
.blog-card__corpo { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); }
.blog-card__topo { display: flex; align-items: center; gap: var(--s-3); }
.blog-card__categoria { position: relative; z-index: 2; margin-block: -12px; padding-block: 12px; font-family: var(--f-display); font-size: .75rem; font-weight: 600; color: var(--c-violet-300); }
.blog-card__categoria:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.blog-card__titulo { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.015em; }
.blog-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.blog-card__link:focus-visible { outline: none; }
.blog-card__link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--c-violet-400); }
.blog-card:hover .blog-card__link { color: var(--c-violet-300); }
.blog-card__resumo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-text-2); font-size: .9375rem; line-height: 1.55; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); font-size: .8125rem; color: var(--c-text-3); }
.blog-card__ler { margin-top: var(--s-3); }
.blog-card--destaque .blog-card__titulo { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; }
.blog-card--destaque .blog-card__resumo { font-size: 1.0625rem; -webkit-line-clamp: 4; }
@media (min-width: 900px) {
  .blog-card--destaque { --cut: var(--cut-lg); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .blog-card--destaque .blog-card__media { border-bottom: 0; border-right: 1px solid var(--c-line); aspect-ratio: auto; min-height: 100%; }
  .blog-card--destaque .blog-card__corpo { justify-content: center; padding: clamp(28px, 3.5vw, 48px); gap: var(--s-4); }
  .blog-card--destaque .blog-card__meta { margin-top: 0; }
}

.blog-vazio { --cut: var(--cut-md); display: grid; justify-items: center; gap: var(--s-4); max-width: 640px; margin: var(--s-8) auto; padding: var(--s-7) var(--s-5); border: 1px dashed var(--c-line-2); color: var(--c-text-2); text-align: center; }
.blog-vazio::after { display: none; }
.blog-vazio > .i { width: 32px; height: 32px; color: var(--c-violet-400); }
.blog-vazio a { color: var(--c-violet-300); text-decoration: underline; text-underline-offset: 3px; }

.blog-paginacao { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: 0 var(--s-8); color: var(--c-text-3); font-size: var(--t-small); }
.blog-paginacao .btn { gap: 12px; }
.blog-paginacao .i-voltar { transform: scaleX(-1); }
.blog-paginacao .btn:hover .i-voltar { transform: scaleX(-1) translateX(3px); }

/* Ícones do sprite dentro de botões e links */
.btn .i, .link-arrow .i { width: 14px; height: 14px; }

/* ---------- Telas ilustrativas do produto (blocos) ---------- */
.blog-bloco { container: bloco / inline-size; margin-block: 2.2em; --m-line: #232326; --m-mute: #a1a1aa; --m-dim: #71717a; --m-ok: #34d399; }
.blog-bloco .bl { font-family: var(--f-body); font-size: .8125rem; line-height: 1.4; color: #fafafa; text-align: left; user-select: none; }
.blog-bloco .bl p { line-height: 1.4; text-wrap: pretty; }
.blog-bloco .bl b { font-weight: 500; }
.blog-bloco .bl small { font-size: .75rem; color: var(--m-mute); }
.blog-bloco .bl ul { list-style: none; padding: 0; }
.blog-bloco .bl li + li { margin-top: 0; }
.bl-i { width: 14px; height: 14px; flex: none; }
.bl--duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.bl-panel { --cut: var(--cut-sm); --chamfer-bd: var(--c-line-2); min-width: 0; overflow: hidden; border: 1px solid var(--c-line-2); border-radius: var(--r-ui); background: #09090b; }
.bl-bar { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border-bottom: 1px solid var(--m-line); background: rgba(167, 146, 255, .05); font-family: var(--f-display); font-size: .75rem; color: var(--m-mute); }
.bl-dots { display: inline-flex; gap: 6px; flex: none; }
.bl-dots i { width: 6px; height: 6px; background: var(--c-line-2); }
.bl-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d4d4d8; }
.bl-tag { flex: none; margin-left: auto; padding: 2px 8px; border: 1px solid var(--c-line-2); font-family: var(--f-display); font-size: .6875rem; font-weight: 600; color: var(--c-text-2); background: rgba(167, 146, 255, .08); white-space: nowrap; }
.bl-tag--wait { color: var(--c-amber); border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .1); }
.bl-tag--ok { color: #b8f5dc; border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .12); }
.bl-body { display: grid; gap: 12px; padding: 14px; }
.bl-av { display: grid; place-items: center; flex: none; width: 26px; height: 26px; background: #27272a; color: var(--m-mute); font-size: .6875rem; font-weight: 600; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.bl-av--brand { background: var(--c-brand); color: #fff; }
.bl-thumb { flex: none; width: 36px; height: 36px; background: var(--g-card-a); clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.bl-thumb--b { background: var(--g-card-b); }
.bl-thumb--c { background: var(--g-card-c); }
.bl-thumb--d { background: linear-gradient(160deg, #a300e3, #3c85ff); }

/* Comentário e direct */
.bl-post { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--m-line); }
.bl-post__tx, .bl-comment__tx { display: grid; min-width: 0; gap: 2px; }
.bl-comment { display: flex; align-items: flex-start; gap: 10px; }
.bl-comment--reply { margin-left: 22px; padding-left: 12px; border-left: 1px solid var(--m-line); }
.bl-text { color: #e4e4e7; font-size: .875rem; }
.bl-hit { padding: 1px 6px; background: rgba(122, 28, 255, .35); box-shadow: inset 0 0 0 1px var(--c-violet-400); font-weight: 600; color: #fff; }
.bl-note { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .1); color: #b8f5dc; font-size: .75rem; }
.bl-link { display: grid; place-items: center; height: 28px; color: var(--c-violet-400); }
.bl-link .bl-i { width: 20px; height: 20px; transform: rotate(90deg); }
.bl-body--chat { align-content: start; }
.bl-who { display: flex; align-items: center; gap: 8px; }
.bl-who small { margin-left: auto; }
.bl-bubble { max-width: 88%; padding: 10px 14px; font-size: .875rem; line-height: 1.45; border-radius: var(--r-ui); }
.bl-bubble--in { justify-self: start; background: var(--c-ink-3); border: 1px solid var(--c-line); box-shadow: inset 2px 0 0 var(--c-violet-400); }
.bl-bubble--out { justify-self: end; background: var(--c-brand); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.bl-status { display: flex; align-items: center; gap: 8px; justify-self: end; font-size: .6875rem; color: var(--m-mute); }

/* Rascunho da IA */
.bl-draft { padding: 12px 14px; border: 1px dashed var(--c-violet-400); border-radius: var(--r-ui); background: rgba(122, 28, 255, .12); }
.bl-draft__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-family: var(--f-display); font-size: .6875rem; color: var(--c-violet-300); }
.bl-draft__head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.bl-draft__tx { font-size: .875rem; line-height: 1.5; color: #fafafa; }
.bl-draft__meta { margin-top: 8px; font-size: .6875rem; color: var(--m-mute); }
.bl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--c-line-2); font-family: var(--f-display); font-size: .75rem; font-weight: 600; color: #e4e4e7; }
.bl-btn--ok { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .55); color: #b8f5dc; }
.bl-btn--ghost { border-color: transparent; color: var(--m-mute); }
.bl-facts { display: grid; }
.blog-bloco .bl-facts li { display: grid; gap: 2px; padding: 12px 14px; border-top: 1px solid var(--m-line); }
.blog-bloco .bl-facts li:first-child { border-top: 0; }
.bl-facts b { font-size: .8125rem; }

/* Pasta do Drive e planilha */
.blog-bloco .bl-files li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--m-line); }
.blog-bloco .bl-files li:first-child { border-top: 0; }
.bl-file__tx { display: grid; min-width: 0; }
.bl-file__tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-sheet { display: grid; }
.bl-row { display: grid; grid-template-columns: minmax(0, 2fr) 44px 48px; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--m-line); font-variant-numeric: tabular-nums; color: #d4d4d8; }
.bl-row > :first-child { display: none; }
.bl-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-row--head { border-top: 0; background: rgba(167, 146, 255, .05); }
.bl-row--head b { font-family: var(--f-display); font-size: .6875rem; color: var(--m-mute); }

/* Semana com os horários de publicação recorrente */
.bl-week { display: grid; }
.blog-bloco .bl-week li { display: grid; grid-template-columns: 38px 28px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--m-line); }
.blog-bloco .bl-week li small { font-family: var(--f-display); font-weight: 500; }
.blog-bloco .bl-week li b { font-family: var(--f-display); font-size: 1rem; color: var(--m-dim); }
.blog-bloco .bl-week li.is-on b { color: #fff; }
.bl-slot { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--c-violet-400); background: rgba(122, 28, 255, .2); font-size: .75rem; font-weight: 600; color: #fff; }
.bl-slot i { font-style: normal; font-weight: 500; color: var(--c-violet-300); font-variant-numeric: tabular-nums; }
.bl-slot--off { border-style: dashed; border-color: var(--m-line); background: none; font-weight: 400; color: var(--m-dim); }
.bl-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--m-line); font-size: .75rem; color: var(--m-mute); }

@container bloco (min-width: 600px) {
  .bl-link .bl-i { transform: none; }
  .bl--gatilho { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; }
  .bl-link { height: auto; }
  .bl--aprovacao { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
  .bl--planilha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
  .bl-row { grid-template-columns: minmax(0, .9fr) minmax(0, 2fr) 44px 48px; }
  .bl-row > :first-child { display: block; }
  .bl-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .blog-bloco .bl-week li { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px; padding: 12px 10px; border-top: 0; border-left: 1px solid var(--m-line); }
  .blog-bloco .bl-week li:first-child { border-left: 0; }
  .blog-bloco .bl-week li b { margin-bottom: 6px; }
  .bl-slot { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) { .blog-progresso__barra, .blog-card__media img { transition: none; } .blog-card:hover .blog-card__media img { transform: none; } }
@media (max-width: 900px) { .blog-share .btn { min-height: 44px; } }
.blog-destaque { padding-bottom: var(--s-5); }
.blog-destaque:has(+ .blog-paginacao, + .cta-band) { padding-bottom: var(--s-8); }
.blog-destaque + .blog-lista { padding-top: 0; }