/* ------------------------------------------------------- Blog (paginas/blog.py) */

/* O topo: "Blog" e o link do RSS na mesma linha, como no blog da Profound; depois o título e a frase. */
.blog-topo { padding-bottom: 64px; }
.blog-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; align-self: stretch; }
.blog-rss { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; letter-spacing: -0.17px; color: var(--texto-3); transition: color .15s; }
.blog-rss svg { width: 12px; height: 12px; }
.blog-rss:hover { color: var(--texto); }

/* As grades: duas colunas, o cartão inteiro clicável. Enquadramento contínuo, linhas internas
   tracejadas (a regra do site). Os destaques são mais altos e têm o título maior. */
/* minmax(0, 1fr): a coluna não cresce com o conteúdo e a página não passa da tela no celular */
.blog-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--linha); }
.blog-cartao { display: flex; min-height: 248px; border-bottom: 1px dashed var(--linha); }
.blog-cartao:nth-child(odd) { border-right: 1px dashed var(--linha); }
.blog-cartao:nth-last-child(-n+2):nth-child(odd), .blog-cartao:last-child { border-bottom: 0; }
.blog-grade-destaque .blog-cartao { min-height: 360px; }
.blog-link { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; width: 100%; padding: 32px; transition: background-color .15s; }
.blog-link:hover { background: var(--superficie); }

/* A linha de cima: quem assina (fotos sobrepostas) à esquerda; a data e a categoria à direita. Quando
   não cabem lado a lado (iPad, celular, dois autores), a data desce, em vez de cortar o nome. */
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; font-size: 14px; line-height: 20px; letter-spacing: -0.17px; }
.blog-autores { display: flex; align-items: center; gap: 8px; min-width: 0; }
.blog-avs { display: flex; flex-shrink: 0; }
/* o anel tem a cor do fundo do cartão: separa as fotos sobrepostas */
.blog-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--fundo); transition: box-shadow .15s; }
.blog-av + .blog-av { margin-left: -6px; }
.blog-link:hover .blog-av { box-shadow: 0 0 0 2px var(--superficie); }
.blog-av-marca { display: flex; align-items: center; justify-content: center; background: var(--terciaria); }
.blog-av-marca img { width: 10px; height: 10px; }
.blog-nomes { overflow: hidden; color: var(--texto); white-space: nowrap; text-overflow: ellipsis; }
.blog-quando { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--texto-3); white-space: nowrap; }
.blog-barra { color: #46464B; }
.blog-cat { color: var(--texto); }

/* Embaixo: o título e o resumo, em duas linhas no máximo. */
.blog-txt { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.blog-tit { font-size: 18px; line-height: 24px; letter-spacing: -0.2px; font-weight: 500; color: var(--texto); text-wrap: balance; }
.blog-cartao-destaque .blog-tit { font-size: 24px; line-height: 32px; letter-spacing: -0.3px; }
.blog-resumo { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 24px; letter-spacing: -0.2px; color: var(--texto-2); }

/* Os filtros: uma página por categoria; a atual vai em branco. */
.blog-filtro { display: flex; flex-wrap: wrap; gap: 8px; padding: 96px 24px 24px; }
.blog-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--superficie-suave); font-size: 14px; line-height: 20px; letter-spacing: -0.17px; color: var(--texto-3); transition: background-color .15s, color .15s; }
.blog-chip:hover { background: var(--terciaria); color: var(--texto); }
.blog-chip[aria-current="page"] { background: var(--texto); color: var(--fundo); }
.blog-vazio { padding: 32px 24px; border-block: 1px solid var(--linha); font-size: 15px; line-height: 24px; color: var(--texto-2); }

/* O fim da página: receber os artigos novos por e-mail, no lugar da chamada final das outras páginas
   (o mesmo fundo e o mesmo respiro). Vai pela rota dos formulários do site (estilo/site.js). */
.blog-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; margin: 96px 0; padding: 48px 40px; border-block: 1px solid var(--linha);
  background: radial-gradient(120% 160% at 100% 100%, var(--terciaria) 0%, var(--superficie) 55%, var(--fundo) 100%); }
.blog-news-txt { display: flex; flex-direction: column; gap: 12px; }
.blog-news-linha { display: flex; align-items: stretch; gap: 8px; }
.blog-news-rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.blog-campo { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--linha); border-radius: 10px; background: #0A0A0B; font: inherit; font-size: 14px; line-height: 20px; color: var(--texto); }
.blog-campo::placeholder { color: #6B6B73; }
.blog-campo:focus { outline: none; border-color: #52525B; }
.blog-enviar { display: inline-flex; align-items: center; padding-inline: 18px; }
.blog-enviar:disabled { opacity: .6; cursor: progress; }
.blog-news-ok, .blog-news-erro { display: none; margin-top: 12px; font-size: 14px; line-height: 20px; }
.blog-news-ok { color: var(--texto); }
.blog-news-erro { color: var(--aviso); }
.blog-news-form.enviado .blog-news-ok, .blog-news-form.com-erro .blog-news-erro { display: block; }

@media (max-width: 767px) {
  .blog-topo { padding-bottom: 40px; }
  .blog-grade { grid-template-columns: minmax(0, 1fr); }
  .blog-cartao:nth-child(odd) { border-right: 0; }
  .blog-cartao:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px dashed var(--linha); }
  .blog-cartao:last-child { border-bottom: 0; }
  .blog-cartao { min-height: 0; }
  .blog-grade-destaque .blog-cartao { min-height: 260px; }
  .blog-link { gap: 24px; padding: 24px 16px; }
  .blog-cartao-destaque .blog-tit { font-size: 20px; line-height: 28px; }
  .blog-filtro { padding: 64px 16px 16px; }
  .blog-vazio { padding: 24px 16px; }
  .blog-news { grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 64px 0; padding: 40px 16px; }
}

/* "Outros artigos" no fim de cada artigo (17/10, como no blog da Profound): o título no centro e os mesmos
   cartões dos destaques do índice */
/* a linha contínua em cima fecha o artigo, como entre as seções do site (antes o título flutuava) */
.blog-outros { padding-top: 96px; border-top: 1px solid var(--linha); }
.blog-outros-tit { margin-bottom: 40px; text-align: center; font-size: 24px; line-height: 32px; letter-spacing: -0.3px; font-weight: 500; color: var(--texto); }
@media (max-width: 767px) {
  .blog-outros { padding-top: 64px; }
  .blog-outros-tit { margin-bottom: 28px; font-size: 20px; line-height: 28px; }
}

/* ---------------------------------------------------------------- as figuras dos artigos (17/10)
   HTML e SVG no próprio texto, na moldura das figuras do Guia (a legenda vem do guia.css). Cada figura de
   um tipo (números, fluxo, linha), como pede o site. Cores do site: ação para o ChatGPT, cinza para o resto
   e o laranja de atenção para o que deu errado; o nome da IA vai sempre com o ícone dela. */
.prosa > .blog-fig { max-width: none; margin: 32px 0; }
.bf-quadro { display: flex; flex-direction: column; gap: 20px; padding: 28px; border: 1px solid var(--linha); border-radius: 12px;
  background: radial-gradient(80% 120% at 50% 0%, rgba(84, 162, 255, .05), transparent 60%), var(--fundo); }
.prosa .bf-quadro p { margin: 0; }
.bf-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bf-tit, .bf-rodape { font-size: 13px; line-height: 18px; color: var(--texto-3); }
.bf-selo { padding: 2px 8px; border: 1px solid var(--linha); border-radius: 999px; font-size: 11px; line-height: 16px; color: var(--texto-2); }
.bf-ic { display: inline-flex; flex: none; width: 14px; height: 14px; color: var(--texto-3); }
.bf-ic svg { width: 100%; height: 100%; }
.bf-seta { flex: none; align-self: center; width: 32px; height: 12px; color: var(--texto-3); }
/* ícones (ChatGPT, GA4): tamanho fixo, porque o texto corrido estica as imagens para a largura toda */
.prosa .bf-quadro img { display: inline-block; flex: none; width: 18px; height: 18px; max-width: none; margin: 0; border-radius: 4px; }
.prosa .bf-quadro img[src$=".svg"] { width: 16px; height: 16px; border-radius: 0; }

/* figura de números: dois cartões e a passagem de um para o outro */
.bf-migra { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; }
.bf-stat { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); }
.bf-stat-fonte { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.bf-stat-num { margin-top: 6px !important; font-size: 44px; line-height: 48px; letter-spacing: -1.6px; font-weight: 500; color: var(--texto); font-variant-numeric: tabular-nums; }
.bf-stat-sub { font-size: 13px; line-height: 18px; color: var(--texto-3); }
.bf-stat-barra { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: var(--superficie-suave); overflow: hidden; }
.bf-stat-barra i { display: block; height: 100%; border-radius: 3px; }
.bf-cor-chat { color: var(--acao); }
.bf-fundo-chat { background: var(--acao); }
.bf-fundo-direto { background: var(--texto-2); }
.bf-v100 { width: 100%; }
.bf-v84 { width: 84%; }
.bf-migra-meio { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--texto-3); text-align: center; }
.bf-migra-meio span { max-width: 90px; }

/* figura de fluxo: o caminho de uma visita, normal e na semana do erro */
.bf-caminho { display: flex; flex-direction: column; gap: 12px; }
.bf-caminho + .bf-caminho { padding-top: 20px; border-top: 1px dashed var(--linha); }
.bf-rot { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--texto-2); }
.bf-rot-aviso { color: var(--aviso); }
.bf-passos { display: flex; align-items: stretch; gap: 10px; }
.bf-no { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); }
.bf-no-tit { font-size: 11px; line-height: 16px; letter-spacing: .02em; color: var(--texto-3); }
.bf-no-corpo { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.bf-url { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 999px; background: var(--terciaria); font: 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--texto-2); word-break: break-all; }
.bf-url .bf-ic { width: 10px; height: 18px; }
.bf-url mark { padding: 0 2px; border-radius: 3px; background: rgba(84, 162, 255, .22); color: var(--texto); }
.bf-falta { font-size: 12px; line-height: 16px; color: var(--aviso); }
.bf-chip { padding: 3px 10px; border-radius: 999px; font: 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace; }
.bf-chip-ok { border: 1px solid rgba(84, 162, 255, .45); background: var(--acao-fundo); color: var(--texto); }
.bf-chip-ruim { border: 1px solid rgba(255, 139, 26, .45); background: var(--aviso-fundo); color: var(--texto); }

/* figura de linha: o desenho no relatório (ilustração) */
.bf-legenda { display: none; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.bf-leg { display: inline-flex; align-items: center; gap: 8px; }
.bf-leg::before { content: ""; width: 16px; height: 2px; border-radius: 1px; }
.bf-leg-chat::before { background: var(--acao); }
.bf-leg-direto::before { background: var(--texto-2); }
.bf-grafico { display: block; width: 100%; height: auto; overflow: visible; }
.bf-grade { stroke: var(--linha); stroke-dasharray: 2 6; }
.bf-banda { fill: rgba(255, 139, 26, .06); stroke: rgba(255, 139, 26, .35); stroke-dasharray: 4 4; }
.bf-banda-txt { fill: var(--aviso); font-size: 12px; font-weight: 500; }
.bf-eixo { stroke: var(--linha); }
.bf-marco { stroke: rgba(255, 255, 255, .22); stroke-dasharray: 2 4; }
.bf-marco-bola { fill: var(--superficie-suave); stroke: var(--linha); }
.bf-marco-num { fill: var(--texto); font-size: 11px; font-weight: 500; text-anchor: middle; }
.bf-l-chat, .bf-l-direto { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bf-l-chat { stroke: var(--acao); }
.bf-l-direto { stroke: var(--texto-2); }
.bf-p-chat { fill: var(--acao); }
.bf-p-direto { fill: var(--texto-2); }
.bf-ponta { font-size: 12px; font-weight: 500; }
.bf-ponta-chat { fill: var(--acao); }
.bf-ponta-direto { fill: var(--texto-2); }
.bf-tick { fill: var(--texto-3); font-size: 12px; text-anchor: middle; }
.prosa .bf-marcos { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.prosa .bf-marcos li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.bf-marcos b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--linha); border-radius: 50%; background: var(--superficie-suave); font-size: 11px; font-weight: 500; color: var(--texto); }

@media (max-width: 767px) {
  .bf-quadro { padding: 16px; gap: 16px; }
  .bf-migra { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bf-migra-meio { flex-direction: row; justify-content: center; }
  .bf-migra-meio span { max-width: none; }
  .bf-migra-meio .bf-seta, .bf-passos .bf-seta { transform: rotate(90deg); }
  .bf-stat { padding: 16px; }
  .bf-stat-num { font-size: 36px; line-height: 40px; }
  .bf-passos { flex-direction: column; gap: 6px; }
  /* no celular o SVG encolhe à metade: os nomes da ponta saem (a legenda em HTML aparece) e o resto do texto
     dele cresce na mesma proporção para continuar legível */
  .bf-legenda { display: flex; }
  .bf-ponta { display: none; }
  .bf-tick { font-size: 22px; }
  .bf-banda-txt { font-size: 20px; }
  .bf-marco-num { font-size: 16px; }
  .bf-marco-bola { r: 14px; }
  .prosa .bf-marcos { flex-direction: column; }
}