/* Blog do Criba: só o ARTIGO (/blog/<slug>/). Separado do blog.css na rodada 25 para a home, o índice, a privacidade e
   a 404 não baixarem estas regras. Depende de blog.css (cartões, .bprosa, .bcta__acoes) e de styles.css. */
/* artigo (rodada 25): coluna de leitura de 720 px à esquerda, sumário e compartilhar numa coluna de 260 px à DIREITA
   (sticky a partir de 1100 px); abaixo disso, uma coluna só com o sumário recolhível entre o título e o texto.
   Escala menor que a da rodada 24 (H1 52→42, corpo 18→17, H2 31→28, H3 21→20, capa 1056→720 px de largura). */
.btrilha{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--muted)}
.btrilha a{color:var(--muted);text-decoration:none}.btrilha a:hover{color:var(--roxo-esc);text-decoration:underline}
.bart__grade{display:grid;grid-template-columns:minmax(0,720px) 260px;grid-template-areas:"head lado" "corpo lado";justify-content:center;column-gap:64px;max-width:1108px;padding-top:100px}
.bart__head{grid-area:head;min-width:0}
.bart__head h1{margin:14px 0 0;font:700 clamp(28px,1.6vw + 19px,42px)/1.14 var(--f-d);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.bart__lead{margin:14px 0 0;font-size:18px;line-height:1.55;color:#4A4A4A;text-wrap:pretty}
.bart__autor{display:flex;align-items:center;gap:12px;margin-top:20px}
.bart__autor img{width:36px;height:36px;border-radius:50%;background:var(--tint);padding:6px}
.bart__nome{margin:0 0 1px;font-weight:600;font-size:14.5px}
.bart__autor .bmeta{font-size:13.5px}
.bart__capa{margin:28px 0 36px}
.bart__capa picture{display:block;border-radius:var(--r-l);overflow:hidden;aspect-ratio:1200/630;background:var(--surf2);box-shadow:var(--sh-md,0 8px 24px rgba(36,17,94,.08))}
.bart__corpo{grid-area:corpo;min-width:0}
.bart__lado{grid-area:lado;grid-row:1 / span 2;position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 120px);overflow-y:auto;padding-top:6px}
.btoc{padding:16px 16px 14px;border:1px solid var(--linha);border-radius:var(--r-m);background:var(--surf)}
.btoc__tit{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font:700 12px/1.2 var(--f-t);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);list-style:none;cursor:pointer}
.btoc__tit::-webkit-details-marker{display:none}
.btoc__tit::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.btoc[open] .btoc__tit::after{transform:rotate(-135deg) translate(-2px,0)}
.btoc__n{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none;font-size:12.5px}
.btoc ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:t;display:flex;flex-direction:column;gap:2px}
.btoc li{counter-increment:t;display:flex;gap:6px;font-size:13.5px;line-height:1.4}
.btoc li::before{content:counter(t);flex:none;width:18px;padding-top:5px;color:var(--lilas);font-weight:700;font-size:12.5px}
.btoc a{display:block;flex:1;padding:4px 8px;border-radius:8px;color:var(--ink2);text-decoration:none}
.btoc a:hover{color:var(--roxo-esc);background:var(--tint)}
.btoc a[aria-current="true"]{color:var(--roxo-esc);background:var(--tint);font-weight:600}
.bshare{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted)}
.bshare>span:first-child{width:100%;font-weight:600}
.bshare a,.bshare button{padding:5px 11px;border:1px solid var(--linha2);border-radius:999px;background:#fff;color:var(--ink2);font:500 12.5px/1.2 var(--f-t);text-decoration:none;cursor:pointer}
.bshare a:hover,.bshare button:hover{border-color:var(--lilas);background:var(--tint)}
@media (min-width:1100px){.btoc__tit{cursor:default;pointer-events:none}.btoc__tit::after,.btoc__n{display:none}}
@media (max-width:1099px){
  .bart__grade{grid-template-columns:minmax(0,720px);grid-template-areas:"head" "lado" "corpo";padding-top:96px}
  .bart__lado{grid-row:auto;position:static;max-height:none;overflow:visible;margin:0 0 32px;padding-top:0;gap:16px}
  .bart__capa{margin:24px 0 28px}
  .btoc{padding:14px 16px}
  .btoc ol{margin-top:10px}
}
.bresumo{margin:0 0 32px;padding:20px 22px;border-radius:var(--r-m);background:var(--tint);border:1px solid var(--lilas2)}
.bresumo__tit{margin:0 0 10px;font:700 12px/1 var(--f-t);letter-spacing:.06em;text-transform:uppercase;color:var(--roxo-esc)}
.bresumo ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.bresumo li{font-size:15.5px;line-height:1.55;color:var(--ink2)}
.bcta{margin:48px 0 0;padding:30px 30px 26px;border-radius:var(--r-l);background:var(--grad);color:#fff;box-shadow:var(--sh-prod)}
.bcta__rot{margin:0;font:700 12px/1 var(--f-t);letter-spacing:.08em;text-transform:uppercase;color:var(--lilas2)}
.bcta h2{margin:10px 0 10px;font:700 clamp(21px,.8vw + 14px,25px)/1.22 var(--f-d);letter-spacing:-.02em;color:#fff}
.bcta p{margin:0;color:rgba(255,255,255,.84);font-size:15.5px;line-height:1.6}
.bcta .btn--roxo{background:#fff;color:var(--roxo-prof);border-color:#fff}
.bcta .btn--roxo:hover{background:var(--tint);border-color:var(--tint)}
.btags{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0}
.btags span{padding:4px 10px;border-radius:6px;background:var(--surf2);color:var(--muted);font-size:13px}
.bautorbox{display:flex;gap:20px;align-items:flex-start;margin-top:40px;padding-top:32px;border-top:1px solid var(--linha)}
.bautorbox img{width:64px;height:64px;border-radius:50%;flex:none;background:var(--tint)}
.bautorbox__nome{margin:0 0 4px;font:700 18px/1.2 var(--f-d)}
.bautorbox p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.bmais{margin:80px auto 104px;padding-top:48px;border-top:1px solid var(--linha)}
.bmais__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:32px}
.bmais__head h2{margin:0;font:700 26px/1.2 var(--f-d);letter-spacing:-.02em}
@media (max-width:640px){
  .bart__lead{font-size:16.5px}
  .bart__grade{padding-top:88px}
  .bcta{padding:24px 20px}
}