/* Blog sobre a v13: só o que o blog acrescenta. Tokens, tipo, botão, barra, FAQ e fecho vêm da v13
   (design system futuro, §12 "Blog"). Sem cor crua: tudo por token ou pela cor do produto (--cor). */

/* categoria sem produto próprio: a tinta da marca faz o papel da cor */
.c-neutra { --cor: var(--tinta); --sobre: var(--sobre-acento-2); }


/* ── peças pequenas ── */
.btag {
  display: inline-flex; align-items: center; gap: var(--e-2); width: fit-content;
  margin: 0 0 var(--e-3); padding: 5px 14px;
  border-radius: 999px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--borda-controle);
  font-family: var(--fonte-mono); font-size: 0.75rem; line-height: 1.2; color: var(--texto);
}
.bmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); margin: 0 0 var(--e-3);
  font-family: var(--fonte-mono); font-size: 0.8125rem; line-height: 1.3; color: var(--texto-suave);
}
.bmeta__cat { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--texto); text-decoration: none; }
a.bmeta__cat:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.bmeta__ponto, .bcat__ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--cor, var(--texto-suave)); flex: none; }
.bler {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px;
  font-weight: 500; color: var(--texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.bler .seta { width: 18px; height: 18px; transition: transform var(--d-controle) var(--curva-saida); }
.bler:hover { text-decoration-thickness: 2px; }
.bler:hover .seta { transform: translateX(4px); }

/* ── herói da home: título em 7 colunas, apoio em 4, pelo pé; luz de canto da rampa quente ── */
.bheroi { position: relative; padding-block: clamp(48px, 7vw, 112px) var(--e-6); overflow: hidden; }
.bheroi::before {
  content: ""; position: absolute; inset: -30% -20% auto auto; width: 70vw; height: 70vw; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--l0) 45%, transparent), transparent);
}
.bheroi__grade { position: relative; display: grid; gap: var(--e-4); }
.bheroi__h1 { font-size: var(--c-h2); max-width: 22ch; }

/* ── as dores: uma linha por dor, com fio; à direita, as buscas reais que levam aos textos ── */
.bdores { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--borda); }
.bdor { display: grid; gap: var(--e-3); padding: var(--e-5) 0; border-top: 1px solid var(--borda); }
.bdor__cab { display: flex; align-items: flex-start; gap: var(--e-3); }
.bdor__cab .bfaixa__chip { flex: none; }
.bdor__t { margin: 0; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
.bdor__buscas { list-style: none; margin: 0; padding: 0; }
.bdor__buscas a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); min-height: 44px; padding: var(--e-2) 0;
  border-bottom: 1px solid var(--borda); color: var(--texto); text-decoration: none; line-height: 1.35;
}
.bdor__buscas a .seta { flex: none; width: 18px; height: 18px; transition: transform var(--d-controle) var(--curva-saida); }
.bdor__buscas a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.bdor__buscas a:hover .seta { transform: translateX(4px); }
.bdor__todos { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 1000px) {
  .bdor { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--e-7); }
  .bdor__todos { grid-column: 2; }
}
@media (min-width: 900px) {
  .bheroi__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-6); align-items: end; }
}

/* ── chips de assunto: rolam de lado no celular ── */
.bcats { border-block: 1px solid var(--borda); background: var(--fundo); }
.bcats__lista { display: flex; gap: var(--e-2); margin: 0 auto; padding-block: var(--e-3); list-style: none; overflow-x: auto; scrollbar-width: none; }
.bcats__lista::-webkit-scrollbar { display: none; }
.bcat {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-3);
  border-radius: 999px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--borda-controle);
  font-size: 0.9375rem; color: var(--texto); text-decoration: none; white-space: nowrap;
  transition: transform var(--d-controle) var(--curva-saida);
}
.bcat:hover { transform: translateY(-1px); }
.bcat[aria-current="page"] { background: var(--tinta); color: var(--sobre-acento-2); box-shadow: none; }
.bcat__n { font-family: var(--fonte-mono); font-size: 0.75rem; color: var(--texto-suave); }
.bcat[aria-current="page"] .bcat__n { color: inherit; }

/* ── destaque: a capa na janela da pílula, na moldura da cor da categoria ── */
.bdest-sec { padding-block: clamp(48px, 6vw, 96px); }
.bdest { display: grid; gap: var(--e-5); align-items: center; }
.bdest__img { width: min(100%, 300px); justify-self: center; }
.bdest__img .slot { border-radius: 999px; }
.bdest__t a { color: inherit; text-decoration: none; }
.bdest__t a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.bdest .lede { margin: var(--e-3) 0 var(--e-2); max-width: 52ch; }
@media (min-width: 900px) {
  .bdest { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--e-8); }
  .bdest__img { width: 100%; max-width: 360px; }
}

/* ── a lista de textos: a lista de setores da home, com a meta em Mono por cima ── */
.blista__t { margin-bottom: var(--e-5); }
.blista { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--borda); }
.blista__linha {
  position: relative; display: grid; gap: var(--e-2);
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta seta" "nome seta" "frase seta";
  padding: var(--e-5) 0; border-top: 1px solid var(--borda); color: var(--texto); text-decoration: none;
  transition: padding-left var(--d-controle-lento) var(--curva-saida);
}
.blista__linha .bmeta { grid-area: meta; margin: 0; }
.blista__linha > .ponto { position: absolute; left: 0; top: 50%; width: 22px; height: 24px; margin-top: -12px; --g-ponto: var(--cor); transform: scale(0); transition: transform 0.6s var(--curva-saida); }
.blista__nome { grid-area: nome; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
.blista__frase { grid-area: frase; max-width: 58ch; font-size: 1rem; line-height: 1.5; color: var(--texto-suave); }
.blista__linha > .seta { grid-area: seta; align-self: center; width: 24px; height: 24px; transition: transform 0.6s var(--curva-saida); }
@media (hover: hover) {
  .blista__linha:hover, .blista__linha:focus-visible { padding-left: 40px; }
  .blista__linha:hover > .ponto, .blista__linha:focus-visible > .ponto { transform: scale(1); }
  .blista__linha:hover > .seta { transform: translateX(8px); }
}
@media (min-width: 1100px) {
  .blista__linha { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto; grid-template-areas: "meta meta seta" "nome frase seta"; column-gap: var(--e-7); }
  .blista__frase { align-self: end; }
}

.bpag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-6); }
.bpag__n { font-family: var(--fonte-mono); font-size: 0.8125rem; color: var(--texto-suave); }

/* ── por assunto: faixas retas com a tira lateral e o chip numerado na cor do produto ── */
.bassuntos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.bfaixa {
  position: relative; display: grid; gap: var(--e-2) var(--e-4); align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "chip nome seta" "chip frase seta" "chip n seta";
  padding: var(--e-4) var(--e-4) var(--e-4) calc(14px + var(--e-4));
  background: var(--cartao); color: var(--texto); text-decoration: none;
}
.bfaixa::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; background: var(--cor); }
.bfaixa__chip, .bcab__rot .bfaixa__chip {
  grid-area: chip; display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--e-2);
  background: var(--cor); color: var(--sobre); font-family: var(--fonte-mono); font-size: 0.875rem;
}
.bfaixa__nome { grid-area: nome; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.035em; line-height: 1.1; }
.bfaixa__frase { grid-area: frase; color: var(--texto-suave); }
.bfaixa__n { grid-area: n; font-family: var(--fonte-mono); font-size: 0.75rem; color: var(--texto-suave); }
.bfaixa > .seta { grid-area: seta; width: 22px; height: 22px; transition: transform 0.6s var(--curva-saida); }
.bfaixa:hover > .seta { transform: translateX(6px); }
.bfaixa:hover .bfaixa__nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
@media (min-width: 900px) {
  .bfaixa { grid-template-columns: auto minmax(0, 4fr) minmax(0, 5fr) auto auto; grid-template-areas: "chip nome frase n seta"; }
}
.bmais { margin: var(--e-5) 0 0; color: var(--texto-suave); }
.bmais a { color: var(--texto); }

/* ── cabeça da categoria: o assunto à esquerda, o produto que resolve à direita ── */
.bcab { padding-block: clamp(48px, 7vw, 112px) var(--e-6); }
.bcab__grade { display: grid; gap: var(--e-6); }
.bcab__rot { display: flex; align-items: center; gap: var(--e-3); margin: 0 0 var(--e-4); font-family: var(--fonte-mono); font-size: 0.8125rem; color: var(--texto-suave); }
.bcab__h1 { font-size: var(--c-h1); margin-bottom: var(--e-4); }
.bdona { position: relative; padding: var(--e-5) var(--e-5) var(--e-5) calc(14px + var(--e-5)); background: var(--superficie); }
.bdona::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; background: var(--cor); }
.bdona__nome { margin: 0 0 var(--e-2); font-size: var(--c-h2m); letter-spacing: -0.04em; line-height: 1; }
.bdona__frase { margin: 0 0 var(--e-3); max-width: 40ch; color: var(--texto-suave); }
@media (min-width: 900px) {
  .bcab__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-6); align-items: end; }
}

/* ── o artigo ── */
.bprog { position: fixed; z-index: 70; inset: 0 0 auto 0; height: 2px; background: transparent; pointer-events: none; }
.bprog__barra { display: block; height: 100%; width: 100%; background: var(--acento-texto); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.bart__cab { display: grid; gap: var(--e-5); padding-block: clamp(40px, 6vw, 96px) var(--e-6); }
.bart__h1 { font-size: clamp(2.25rem, 1rem + 3vw, 4rem); max-width: 20ch; margin-bottom: var(--e-4); }
.bart__autor { margin: 0; color: var(--texto-suave); }
.bart__autor a { color: var(--texto); }
.bart__data { display: block; margin-top: var(--e-1); font-family: var(--fonte-mono); font-size: 0.8125rem; }
.bart__img { margin: 0; width: min(44vw, 180px); }
.bart__img .slot { border-radius: 999px; }
@media (min-width: 900px) {
  .bart__cab { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); column-gap: var(--e-7); align-items: end; }
  .bart__img { width: 100%; max-width: 300px; justify-self: end; }
}

/* o resumo direto: a resposta que um assistente citaria. Tira lateral na cor, nunca caixa colorida */
.bart__resumo { position: relative; max-width: 68ch; margin: var(--e-6) auto 0; padding: var(--e-1) 0 var(--e-1) calc(14px + var(--e-4)); }
.bart__resumo::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; background: var(--cor); }
.bart__resumo p:last-child { margin: 0; font-size: var(--c-lede); line-height: 1.5; }

.bart__grade { display: grid; gap: var(--e-6); padding-block: var(--e-7) var(--sec-y); }
/* coluna do texto no centro; o sumário fica à esquerda, fora dela */
@media (min-width: 1100px) {
  .bart__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 68ch) minmax(0, 1fr); column-gap: var(--e-7); }
  .bart__grade > .bsum { grid-column: 1; justify-self: end; width: 220px; }
  .bart__grade > .bprosa { grid-column: 2; }
}

/* o sumário: fixo ao lado no desktop, uma lista curta no celular; a linha de 2 px marca onde se está */
.bsum { font-size: 0.9375rem; }
.bsum__t { margin: 0 0 var(--e-3); font-family: var(--fonte-mono); font-size: 0.75rem; color: var(--texto-suave); }
.bsum ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borda); }
.bsum a { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2); padding: var(--e-2) 0 var(--e-2) var(--e-3); margin-left: -2px; border-left: 2px solid transparent; color: var(--texto-suave); text-decoration: none; line-height: 1.35; }
.bsum a:hover { color: var(--texto); }
.bsum a[aria-current="true"] { color: var(--texto); border-left-color: var(--acento-texto); }
.bsum__n { font-family: var(--fonte-mono); font-size: 0.75rem; padding-top: 0.15em; }
@media (min-width: 1100px) { .bsum { position: sticky; top: var(--e-8); align-self: start; } }

/* a prosa: Geist 400, medida de 62 a 68 caracteres, entrelinha 1,6 */
.bprosa { font-size: var(--t-corpo); line-height: 1.6; }
.bprosa > * { max-width: 68ch; }
.bprosa h2 { margin: var(--e-7) 0 var(--e-4); font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; scroll-margin-top: var(--e-7); text-wrap: balance; }
.bprosa h2:first-child { margin-top: 0; }
.bprosa h3 { margin: var(--e-6) 0 var(--e-3); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.bprosa p, .bprosa ul, .bprosa ol { margin: 0 0 var(--e-4); }
.bprosa strong { font-weight: 600; }
.bprosa a { color: var(--texto); text-decoration: underline; text-decoration-color: var(--acento-texto); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.bprosa a:hover { text-decoration-thickness: 2px; }
.bprosa ul { list-style: none; padding: 0; }
.bprosa ul > li { position: relative; padding-left: var(--e-5); margin-bottom: var(--e-2); }
.bprosa ul > li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 9px; height: 9px; border-radius: 50%; background: var(--cor); }
.bprosa ol { counter-reset: n; list-style: none; padding: 0; border-bottom: 1px solid var(--borda); }
/* número posicionado, não grid: com grid, cada pedaço do item (negrito, texto solto) virava uma célula */
.bprosa ol > li { counter-increment: n; position: relative; padding: var(--e-3) 0 var(--e-3) 48px; border-top: 1px solid var(--borda); }
.bprosa ol > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: var(--e-3); font-family: var(--fonte-mono); font-size: 0.8125rem; line-height: 1.6rem; color: var(--texto-suave); }
.bprosa blockquote { margin: var(--e-6) 0; padding: var(--e-4) 0; border-block: 1px solid var(--borda-controle); }
.bprosa blockquote p { margin: 0; font-size: var(--c-h2m); letter-spacing: -0.04em; line-height: 1.1; }
.bdona--faixa { margin-top: var(--e-7); }

.bautor-sec { padding-block: var(--e-8); }
.bautor { max-width: calc(68ch + 2 * var(--margem)); }
.bautor__nome { margin: 0 0 var(--e-2); font-size: var(--c-h2m); letter-spacing: -0.04em; line-height: 1; }
.bautor__bio { margin: 0 0 var(--e-2); max-width: 58ch; color: var(--texto-suave); }
.bautor { margin-inline: auto; text-align: center; }
.bautor .btag { margin-inline: auto; }
.bautor__bio { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .blista__linha, .blista__linha > .ponto, .blista__linha > .seta, .bfaixa > .seta, .bler .seta, .bcat { transition: none; }
}

/* ── capa do artigo (31/10): a faixa fina do banner no topo, e o título num painel branco que entra
   sobre ela; tudo centralizado ── */
.bcapa { position: relative; }
.bcapa__faixa { height: clamp(140px, 18vw, 260px); overflow: hidden; background: var(--superficie); }
.bcapa__faixa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bcapa__painel {
  position: relative; max-width: 960px; margin: calc(-1 * clamp(56px, 7vw, 120px)) auto 0;
  padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 64px) clamp(28px, 3vw, 40px);
  background: var(--cartao); text-align: center;
}
.bcapa__painel .bmeta { justify-content: center; }
.bcapa__painel .bart__h1 { margin-inline: auto; }

/* ── imagem no meio do texto ── */
.bprosa .bfig { max-width: none; margin: var(--e-6) 0; }
.bfig img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--superficie); }

/* ── o GIF: meme ou imagem que representa a cena, em vídeo curto em loop (bem mais leve que GIF) ── */
.bprosa .bgif { max-width: none; margin: var(--e-6) auto; text-align: center; }
.bgif video { display: block; max-width: min(100%, 540px); height: auto; margin: 0 auto; background: var(--superficie); }
.bgif figcaption { margin-top: var(--e-2); font-family: var(--fonte-mono); font-size: 0.75rem; line-height: 1.4; color: var(--texto-suave); }
.bgif figcaption a { color: inherit; }

/* ── o próximo passo: o texto da etapa seguinte no mesmo assunto, ou a página do produto ── */
.bprosa .bprox { max-width: none; margin-top: var(--e-7); }
.bprox__link { position: relative; display: grid; gap: var(--e-2); grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--e-5) var(--e-5) var(--e-5) calc(14px + var(--e-5)); background: var(--tinta); color: var(--sobre-acento-2); text-decoration: none; }
.bprox__link::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; background: var(--cor, var(--l5)); }
.bprox__rot { grid-column: 1; font-family: var(--fonte-mono); font-size: 0.75rem; color: var(--l0); }
.bprox__t { grid-column: 1; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.15; }
.bprox__link > .seta { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; transition: transform var(--d-controle) var(--curva-saida); }
.bprox__link:hover > .seta { transform: translateX(6px); }
.bprox__link:hover .bprox__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.noite .bprox__link:focus-visible, .bprox__link:focus-visible { outline: 3px solid var(--acento-texto); outline-offset: 3px; }

/* ── calendário do lote: a etapa do funil ao lado da semana ── */
/* o link do texto (.bprosa a) pinta de escuro e sublinha; dentro do próximo passo, o fundo é a tinta */
.bprosa .bprox__link { color: var(--sobre-acento-2); text-decoration: none; }
.bprosa .bprox__link:hover .bprox__t { text-decoration: underline; }
/* o gancho de conversão no meio do texto médio e longo: leva ao WhatsApp ou à reunião de 45 minutos */
.bprosa .bgancho { max-width: none; margin: var(--e-6) 0; padding: var(--e-5); background: var(--cartao); box-shadow: inset 0 0 0 1px var(--borda); }
.bgancho__rot { margin: 0 0 var(--e-2); font-family: var(--fonte-mono); font-size: 0.75rem; color: var(--acento-texto); }
.bprosa .bgancho__t { margin: 0 0 var(--e-2); font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--texto); }
.bprosa .bgancho__x { margin: 0 0 var(--e-4); color: var(--texto-suave); }
.bgancho__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.bprosa .bgancho a.botao { color: var(--bt-fg); text-decoration: none; }
/* produção: a foto do destaque é o banner do texto, recortado em pílula como a janela da v13 */
.bdest__foto { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px; }
.bdest--texto { grid-template-columns: minmax(0, 1fr); }