/* BR Robotics · blog (carregado só nas páginas /blog/, depois de site.css; usa os tokens de lá) */

/* ===== Topo do índice e do artigo ===== */
.pag-topo--blog h1{max-width:24ch}
.pag-topo--blog .migalha a{min-width:44px}
.blog-topo{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,27vw,370px);gap:clamp(24px,4vw,64px);align-items:center}
.blog-topo>*{min-width:0}
.blog-topo__img{position:relative;aspect-ratio:1/1;border-radius:18px;background:linear-gradient(180deg,#F8FAFD 0%,#E3EAF4 100%);border:1px solid var(--linha);overflow:hidden}
.blog-topo__img img{position:absolute;left:8%;top:8%;width:84%;height:84%;object-fit:contain}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:18px;font-size:15px;line-height:1.4;color:var(--muted)}
.blog-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--linha-forte);margin-right:14px;vertical-align:middle}
@media (max-width:599px){
  .blog-meta{gap:4px 16px}
  .blog-meta span+span::before{display:none}
}
/* índice: os números do blog (contados do conteúdo), em coluna ao lado do título e em fileira de 3 no celular */
.blog-fatos{list-style:none;display:grid;border:1px solid var(--linha);border-radius:16px;background:#fff;overflow:hidden}
.blog-fatos li{min-width:0;padding:clamp(14px,1.8vw,24px) clamp(14px,1.8vw,26px);border-top:1px solid var(--linha)}
.blog-fatos li:first-child{border-top:0}
.blog-fatos strong{display:block;font-stretch:120%;font-weight:800;font-size:clamp(28px,3.2vw,44px);line-height:1;color:var(--azul);font-variant-numeric:tabular-nums}
.blog-fatos span{display:block;font-size:15px;line-height:1.35;color:var(--muted);margin-top:8px}
@media (max-width:899px){
  .blog-topo{grid-template-columns:minmax(0,1fr)}
  .blog-topo__img{display:none}
  .blog-fatos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .blog-fatos li{border-top:0;border-left:1px solid var(--linha);padding:14px 12px}
  .blog-fatos li:first-child{border-left:0}
}

/* ===== Artigo: texto de um lado, apoio do outro ===== */
.blog-corpo{padding-top:clamp(28px,4vw,56px)}
.artigo--blog{grid-template-columns:minmax(0,1fr) clamp(270px,26vw,380px);align-items:stretch}
.artigo__principal{min-width:0}
.artigo--blog .artigo__lado{position:static;align-content:start}
.cartao--fixo{position:sticky;top:calc(var(--header-h) + 20px)}
.cartao--azul .cartao__tit{color:#D7E4F8}
.cartao--azul .btn{width:100%;padding:0 14px;font-size:15px}
@media (max-width:959px){
  .artigo--blog{grid-template-columns:minmax(0,1fr)}
  .artigo--blog .artigo__lado{display:none}
}

/* sumário do celular: trilho de fichas no começo do texto */
.sumario-mob{display:none}
@media (max-width:959px){
  .sumario-mob{display:block;margin-bottom:28px}
  .trilho-chips{list-style:none;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);padding:2px var(--pad) 10px;margin-inline:calc(-1*var(--pad));scrollbar-width:none}
  .trilho-chips::-webkit-scrollbar{display:none}
  .trilho-chips li{flex:none;scroll-snap-align:start}
  .trilho-chips a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border:1px solid var(--azul-100);border-radius:999px;background:var(--azul-50);color:var(--azul);font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;white-space:nowrap}
  .trilho-chips a:hover{border-color:var(--azul)}
}

/* ===== Tabelas do texto: deslizam no celular, com a 1ª coluna parada; cabem inteiras no computador ===== */
.prosa .tabela-rolar{max-width:none;margin-top:22px;border:1px solid var(--linha);border-radius:12px;background:#fff;overflow-x:auto;overscroll-behavior-x:contain}
.prosa .tabela-rolar table{display:table;width:100%;margin:0;border:0;border-radius:0;overflow:visible;font-size:15px}
.prosa .tabela-rolar th,.prosa .tabela-rolar td{padding:10px 14px;line-height:1.4}
.prosa .tabela-rolar thead th{font-size:11.5px}
.prosa .tabela-rolar tbody th{font-size:15px;font-stretch:104%}
.prosa .tabela-rolar tbody th a{white-space:nowrap}
@media (max-width:959px){.prosa .tabela-rolar th,.prosa .tabela-rolar td{vertical-align:middle}}
@media (max-width:899px){
  .prosa thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .prosa tbody tr{display:table-row;padding:0;border-bottom:0}
  .prosa tbody th{display:table-cell;padding:10px 14px;border-bottom:1px solid var(--linha);white-space:normal}
  .prosa td{display:table-cell;padding:10px 14px;border-bottom:1px solid var(--linha)}
  .prosa td::before{content:none}
  .prosa tbody tr:last-child>*{border-bottom:0}
}
@media (max-width:719px){
  .prosa .tabela-rolar th,.prosa .tabela-rolar td{min-width:9em}
  .prosa .tabela-rolar th.n,.prosa .tabela-rolar td.n{min-width:0}
  .prosa .tabela-rolar tbody th,.prosa .tabela-rolar thead th:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--linha)}
  .prosa .tabela-rolar thead th:first-child{background:var(--bg-2)}
}
@media (min-width:960px){
  .prosa .tabela-rolar table{font-size:14px}
  .prosa .tabela-rolar th,.prosa .tabela-rolar td{padding:9px 10px}
  .prosa .tabela-rolar tbody th{font-size:14px}
  .prosa .tabela-rolar tbody th a{display:inline;min-height:0}
}
.prosa .faq p{margin-top:0}
.prosa .faq{max-width:74ch}

/* ===== Cartões de artigo ===== */
.post--img{padding:0;overflow:hidden}
.post__img{position:relative;aspect-ratio:16/10;background:linear-gradient(180deg,#F8FAFD 0%,#E7EDF6 100%);border-bottom:1px solid var(--linha)}
.post__img img{position:absolute;left:10%;top:8%;width:80%;height:84%;object-fit:contain}
.post__corpo{display:flex;flex-direction:column;flex:1;padding:18px clamp(16px,1.6vw,22px) 6px}
.post__corpo .seta{margin-top:auto}
.post__link{text-decoration:none}
.post__link::after{content:"";position:absolute;inset:0;border-radius:12px}
.post:hover .post__link,.post:focus-within .post__link{color:var(--azul)}
.post:focus-within{border-color:var(--azul)}
.blog-lista{padding-top:clamp(28px,4vw,52px)}
@media (min-width:960px){
  .grade-blog--indice .post--destaque{grid-column:span 2;flex-direction:row}
  .grade-blog--indice .post--destaque .post__img{flex:0 0 46%;aspect-ratio:auto;min-height:300px;border-bottom:0;border-right:1px solid var(--linha)}
  .grade-blog--indice .post--destaque .post__corpo{padding:clamp(22px,2.4vw,36px)}
  .grade-blog--indice .post--destaque h2{font-size:clamp(23px,2.2vw,30px)}
}

/* trilho do celular (índice e "Leia também"): o próximo cartão aparece pela metade */
@media (max-width:719px){
  .trilho{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(84%,340px);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:4px var(--pad) 14px;margin-inline:calc(-1*var(--pad));scrollbar-width:none}
  .trilho::-webkit-scrollbar{display:none}
  .trilho>*{scroll-snap-align:start}
  .trilho-pontos{display:flex;justify-content:center;gap:6px;margin-top:4px}
  .trilho-pontos span{width:8px;height:8px;border-radius:999px;background:var(--linha-forte);transition:width .25s ease,background .25s ease}
  .trilho-pontos span.is-on{width:22px;background:var(--azul)}
}
@media (min-width:720px){.trilho-pontos{display:none}}