/* Blog da Terads (DESIGN.md 13BM): só o que o site.css não tem. Mesmos tokens e padrões do site (variação site do guia oficial).
   Corpo claro para leitura longa; cabeçalho da página e chamada final em verde-escuro, como as seções escuras do site. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.menu a[aria-current=page]{background:var(--bege-a8);color:var(--verde-escuro-0)}

/* Categorias no menu: abre sob o item no computador e em sequência dentro do menu do celular */
.menu-cat{position:relative}
.menu-cat summary{list-style:none;display:flex;align-items:center;gap:var(--e8);white-space:nowrap;cursor:pointer;font-size:var(--tx);padding:var(--e8) var(--e12);border-radius:var(--r-md);color:var(--verde-escuro-20);transition:background-color var(--t-rapido) var(--ease)}
.menu-cat summary::-webkit-details-marker{display:none}
.menu-cat summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t-rapido) var(--ease)}
.menu-cat[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.menu-cat summary:hover,.menu-cat[open] summary{background:var(--bege-a8);color:var(--verde-escuro-0)}
.menu-cat-lista{position:absolute;top:calc(100% + var(--e8));left:0;z-index:5;min-width:260px;display:grid;padding:var(--e8);background:var(--verde-escuro-100);border:1px solid var(--verde-escuro-85);border-radius:var(--r-md)}
.menu .menu-cat-lista a{white-space:normal}
@media (max-width:1120px){
  .menu-cat summary{min-height:44px;padding:var(--e12)}
  .menu-cat-lista{position:static;min-width:0;padding:0 0 0 var(--e12);background:none;border:0}
}

/* cabeçalho da página: escuro só no início do blog (com a folhagem e a luz da abertura do site); categorias, autores e busca usam o claro */
.blog-cab.escuro{position:relative;overflow:hidden;isolation:isolate}
.blog-cab.escuro::before{content:"";position:absolute;inset:0;background:url(/assets/folhagem.webp) center/cover no-repeat;opacity:var(--folhagem-login-opacidade);mix-blend-mode:soft-light;z-index:-2}
.blog-cab.escuro::after{content:"";position:absolute;inset:0;background:var(--sombra-fundo);z-index:-1}
.blog-cab.escuro .luz{left:-50vw;top:-90vh}
.blog-cab.escuro>.caixa{position:relative}
.blog-cab.escuro .blog-sub{font-size:var(--tx);line-height:var(--lh-texto)}
.blog-cab.claro{padding-bottom:0}
.blog-cab{padding:calc(var(--barra-h) + var(--e56)) 0 var(--e56)}
.blog-cab h1{font:400 var(--h1)/1.12 var(--display);color:var(--titulo);letter-spacing:-.01em;max-width:24ch;text-wrap:balance}
.blog-sub{margin-top:var(--e16);max-width:var(--medida);color:var(--texto);font-size:var(--h4);line-height:var(--lh-h4)}
.blog-trilha{display:flex;flex-wrap:wrap;gap:var(--e8);margin-bottom:var(--e24);font-size:var(--sm);color:var(--apoio)}
.blog-trilha a{color:var(--apoio);text-decoration:none}
.blog-trilha a:hover{color:var(--titulo)}
.blog-trilha [aria-current]{color:var(--texto);overflow-wrap:anywhere}

/* grade: conteúdo e lateral */
.blog-grade{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--e56);align-items:start;padding-top:var(--e56);padding-bottom:var(--e96)}
.blog-principal{min-width:0}
.blog-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--e40) var(--e32)}
.blog-vazio{color:var(--apoio)}

/* cartão de post: imagem, "Categoria · Data", título e descrição */
.blog-cartao{display:grid;gap:var(--e16);align-content:start}
.blog-cartao-img{display:block;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--bloco)}
.blog-cartao-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-medio) var(--ease)}
.blog-cartao:hover .blog-cartao-img img{transform:scale(1.03)}
.blog-cartao-txt{display:grid;gap:var(--e8)}
.blog-cartao h2,.blog-cartao h3{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo);text-wrap:balance}
.blog-cartao h2 a,.blog-cartao h3 a{color:inherit;text-decoration:none}
.blog-cartao h2 a:hover,.blog-cartao h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.blog-cartao p:last-child{color:var(--apoio);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* destaque: imagem do mesmo tamanho dos outros cartões, com o texto ao lado; título no mesmo tamanho dos demais */
.blog-cartao.destaque{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e32);align-items:center}
.blog-meta{font-size:var(--sm);color:var(--apoio)}
.blog-meta a{color:var(--apoio);text-decoration:none;font-weight:500}
.blog-meta a:hover{color:var(--titulo)}
.blog-paginas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e16);margin-top:var(--e56)}
.blog-paginas span{color:var(--apoio);font-size:var(--sm)}
.blog-paginas .i{width:17px;height:17px}

/* lateral: busca, categorias e mais lidos */
.blog-lateral{display:grid;gap:var(--e40);position:sticky;top:calc(var(--barra-h) + var(--e24))}
.blog-busca{position:relative;display:flex}
.blog-busca input{width:100%;height:48px;padding:0 var(--e56) 0 var(--e20);border:1px solid var(--card-borda);border-radius:var(--r-pilula);background:var(--superficie);color:var(--titulo);font:inherit;font-size:16px}
.blog-busca input:focus-visible{outline:none;border-color:var(--foco);box-shadow:0 0 0 1px var(--foco)}
.blog-busca button{position:absolute;right:var(--e4);top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--apoio);cursor:pointer}
.blog-busca button:hover{color:var(--titulo)}
.blog-busca .i{width:20px;height:20px;fill:none;stroke:currentColor}
.blog-busca.grande input{height:56px;font-size:var(--h4)}
.blog-busca-status{margin:var(--e24) 0;color:var(--apoio)}
.blog-busca-status:empty{display:none}
.blog-bloco h2{font:500 var(--sm)/var(--lh-ui) var(--corpo);color:var(--suave);letter-spacing:.02em;margin-bottom:var(--e12)}
.blog-cats{list-style:none;padding:0;margin:0}
.blog-cats a{display:flex;align-items:center;justify-content:space-between;gap:var(--e12);min-height:44px;border-bottom:1px solid var(--contorno);color:var(--titulo);text-decoration:none}
.blog-cats a:hover{color:var(--texto)}
.blog-cats span{color:var(--apoio);font-size:var(--sm);font-variant-numeric:tabular-nums}
.blog-top{list-style:none;padding:0;margin:0;display:grid;gap:var(--e20);counter-reset:top}
.blog-top li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--e4) var(--e12);counter-increment:top}
.blog-top li::before{content:counter(top);grid-row:span 2;font:400 var(--h3)/1 var(--display);color:var(--suave)}
.blog-top a{color:var(--titulo);text-decoration:none;font-weight:500;line-height:var(--lh-ui)}
.blog-top a:hover{text-decoration:underline;text-underline-offset:3px}
.blog-compartilhar .i{width:17px;height:17px}

/* página do post */
.blog-autoria{display:grid;gap:var(--e4);margin-bottom:var(--e32);font-size:var(--sm);color:var(--apoio)}
.blog-autoria a{color:var(--titulo);text-decoration:none;font-weight:500}
.blog-autoria a:hover{text-decoration:underline;text-underline-offset:3px}
.blog-capa{margin:0 0 var(--e40)}
.blog-capa img{width:100%;height:auto;display:block;border-radius:var(--r-lg);background:var(--bloco)}
/* crédito da imagem ("Reprodução: Internet"): pequeno, logo abaixo da capa */
.blog-capa figcaption{margin-top:var(--e8);font-size:12px;line-height:var(--lh-ui);color:var(--apoio)}
/* topo do post (claro): trilha, título e subtítulo menor, na coluna do texto, acima dos dados e da capa */
.blog-grade.sem-cab{padding-top:calc(var(--barra-h) + var(--e48))}
.blog-post-cab{margin-bottom:var(--e24)}
.blog-post-cab h1{font:400 var(--h1)/1.15 var(--display);color:var(--titulo);letter-spacing:-.01em;text-wrap:balance}
.blog-post-cab .blog-sub{margin-top:var(--e12);font-size:var(--tx);line-height:var(--lh-texto);color:var(--apoio)}
.blog-post .blog-autoria{margin-bottom:var(--e24)}
/* resumo no topo do post: o trecho que o leitor e as IAs leem primeiro */
.blog-resumo{max-width:var(--medida);margin:0 0 var(--e40);padding:var(--e20) var(--e24);border-left:2px solid var(--verde-claro);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--bloco);color:var(--texto)}
.blog-resumo-t{margin-bottom:var(--e8);font-size:var(--sm);font-weight:500;color:var(--titulo)}
.blog-resumo p+p{margin-top:var(--e8)}
.blog-sumario{margin:0 0 var(--e40);padding:var(--e24);border:1px solid var(--contorno);border-radius:var(--r-lg);background:var(--bloco);max-width:var(--medida)}
.blog-sumario p{font:500 var(--sm)/var(--lh-ui) var(--corpo);color:var(--suave);margin-bottom:var(--e12)}
.blog-sumario ol{display:grid;gap:var(--e8);margin:0;padding-left:var(--e20)}
.blog-sumario a{color:var(--titulo);text-decoration:none}
.blog-sumario a:hover{text-decoration:underline;text-underline-offset:3px}
/* texto do post: um degrau acima do texto do site (--tx × 1,125) para leitura longa */
.blog-texto{max-width:var(--medida);font-size:calc(var(--tx) * 1.125);line-height:var(--lh-texto);color:var(--texto)}
.blog-texto>*+*{margin-top:var(--e20)}
.blog-texto h2{font:500 var(--h3)/var(--lh-h3) var(--display);color:var(--titulo);margin-top:var(--e56);scroll-margin-top:calc(var(--barra-h) + var(--e24));text-wrap:balance}
.blog-texto h3{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo);margin-top:var(--e40);scroll-margin-top:calc(var(--barra-h) + var(--e24))}
.blog-texto h2+*,.blog-texto h3+*{margin-top:var(--e16)}
.blog-texto ul,.blog-texto ol{display:grid;gap:var(--e8);padding-left:var(--e24)}
.blog-texto ul{list-style:disc}.blog-texto ol{list-style:decimal}
.blog-texto li::marker{color:var(--apoio)}
.blog-texto a{color:var(--titulo);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.blog-texto a:hover{text-decoration-thickness:2px}
.blog-texto strong{font-weight:500;color:var(--titulo)}
.blog-texto code{font-size:.9em;padding:2px var(--e4);border-radius:var(--r-xs);background:var(--bloco)}
.blog-texto blockquote{padding:var(--e4) 0 var(--e4) var(--e24);border-left:2px solid var(--verde-claro);color:var(--titulo);font-size:var(--h4);line-height:var(--lh-h4)}
.blog-texto figure{margin:var(--e40) 0}
.blog-texto figure img{width:100%;height:auto;border-radius:var(--r-md);display:block}
.blog-texto hr{border:0;border-top:1px solid var(--contorno);margin:var(--e40) 0}
.blog-faq{max-width:var(--medida);margin-top:var(--e56)}
.blog-faq h2{font:500 var(--h3)/var(--lh-h3) var(--display);color:var(--titulo);margin-bottom:var(--e16);scroll-margin-top:calc(var(--barra-h) + var(--e24))}
.blog-faq details{border-bottom:1px solid var(--contorno)}
.blog-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--e16);min-height:56px;padding:var(--e12) 0;cursor:pointer;color:var(--titulo);font-weight:500}
.blog-faq summary::-webkit-details-marker{display:none}
.blog-faq summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--t-rapido) var(--ease)}
.blog-faq details[open] summary::after{transform:rotate(-135deg)}
.blog-faq details p{padding-bottom:var(--e20);color:var(--texto)}
.blog-autor{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e20);align-items:start;max-width:var(--medida);margin-top:var(--e56);padding:var(--e24);border:1px solid var(--contorno);border-radius:var(--r-lg);background:var(--bloco)}
.blog-autor-foto{width:72px;height:72px;border-radius:50%;object-fit:cover}
.blog-autor-nome a{color:var(--titulo);font-weight:500;text-decoration:none}
.blog-autor-nome a:hover{text-decoration:underline;text-underline-offset:3px}
.blog-autor-cred{font-size:var(--sm);color:var(--apoio);margin-bottom:var(--e8)}
.blog-autor p:last-child{color:var(--texto)}
.blog-compartilhar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e8);margin-top:var(--e40)}
.blog-compartilhar p{font-size:var(--sm);color:var(--apoio);margin-right:var(--e8)}
.blog-compartilhar a,.blog-compartilhar button{display:inline-flex;align-items:center;gap:var(--e8);min-height:44px;padding:0 var(--e16);border:1px solid var(--card-borda);border-radius:var(--r-pilula);background:none;color:var(--titulo);font:inherit;font-size:var(--sm);text-decoration:none;cursor:pointer}
.blog-compartilhar a:hover,.blog-compartilhar button:hover{background:var(--bloco)}
.blog-compartilhar .i{fill:none;stroke:currentColor}
.blog-compartilhar a:first-of-type .i{fill:currentColor;stroke:none}
.blog-cta{margin-top:var(--e56);padding:var(--e48) var(--e40);border-radius:var(--r-lg)}
.blog-cta h2{font:400 var(--h2)/var(--lh-h2) var(--display);color:var(--titulo);max-width:22ch;text-wrap:balance}
.blog-cta p{margin:var(--e16) 0 var(--e24);max-width:var(--medida);color:var(--texto)}
.blog-cta-acoes{display:flex;flex-wrap:wrap;gap:var(--e12)}
.blog-cta .btn .i{fill:currentColor;stroke:none}
.blog-relacionados{margin-top:var(--e72)}
.blog-relacionados>h2{font:500 var(--h3)/var(--lh-h3) var(--display);color:var(--titulo);margin-bottom:var(--e24)}

@media (max-width:960px){
  .blog-grade{grid-template-columns:minmax(0,1fr);gap:var(--e72)}
  .blog-lateral{position:static}
  .blog-cartao.destaque{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .blog-cab{padding:calc(var(--barra-h) + var(--e32)) 0 var(--e40)}
  .blog-sub{font-size:var(--tx);line-height:var(--lh-texto)}
  .blog-grade{padding-top:var(--e40);padding-bottom:var(--e72)}
  .blog-grade.sem-cab{padding-top:calc(var(--barra-h) + var(--e32))}
  .blog-post-cab h1{font-size:var(--h2);line-height:var(--lh-h2)}
  .blog-lista{grid-template-columns:minmax(0,1fr);gap:var(--e40)}
  .blog-cta{padding:var(--e32) var(--e24)}
  .blog-autor{grid-template-columns:minmax(0,1fr)}
  /* celular: a trilha não repete o título do post (ele vem logo abaixo, no h1) */
  .blog-post-cab .blog-trilha [aria-current]{display:none}
  .blog-post-cab .blog-trilha span[aria-hidden]:has(+ [aria-current]){display:none}
  .blog-compartilhar p{flex-basis:100%;margin:0}
  .blog-cta-acoes .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.blog-cartao-img img{transition:none}.blog-cartao:hover .blog-cartao-img img{transform:none}}
/* tabela do texto: rola na horizontal dentro do bloco no celular, nunca a página */
.blog-texto .blog-tabela{overflow-x:auto;border:1px solid var(--contorno);border-radius:var(--r-md)}
.blog-tabela table{width:100%;border-collapse:collapse;font-size:var(--tx);line-height:var(--lh-ui)}
.blog-tabela th,.blog-tabela td{padding:var(--e12) var(--e16);text-align:left;vertical-align:top;border-top:1px solid var(--contorno)}
.blog-tabela th{border-top:0;font-weight:500;color:var(--titulo);background:var(--bloco)}
.blog-tabela td{color:var(--texto);min-width:140px}
/* Quem somos (/blog/quem-somos): texto, cartões dos fundadores e dados da empresa */
.blog-sobre{padding-top:var(--e56);padding-bottom:var(--e96)}
.blog-sobre .blog-texto+.blog-fundadores,.blog-fundadores+.blog-texto{margin-top:var(--e32)}
.blog-fundadores{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e20)}
.blog-fundador{display:grid;gap:var(--e8);align-content:start;padding:var(--e32) var(--e24);border:1px solid var(--contorno);border-radius:var(--r-lg);text-align:center;justify-items:center;color:var(--apoio)}
.blog-fundador img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:var(--e8)}
.blog-fundador h3{font:500 var(--tx)/1.3 var(--corpo);color:var(--titulo)}
.blog-fundador-cargo{font-size:var(--sm);color:var(--suave)}
.blog-revisado{font-size:var(--sm);color:var(--suave)}
@media (max-width:760px){.blog-fundadores{grid-template-columns:minmax(0,1fr)}.blog-sobre{padding-top:var(--e40);padding-bottom:var(--e72)}}