/* 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}}

/* ===== Blog em 12 idiomas (15/10/2026) ===== */
/* menu de idioma do topo quando a página tem mais de 3 versões: botão com a sigla e lista que abre (funciona sem JavaScript) */
.lang-menu{position:relative;flex:none}
.lang-menu__botao{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 10px;border:1px solid var(--linha);border-radius:8px;background:#fff;font-family:var(--font-m);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--tinta);cursor:pointer;list-style:none;user-select:none;white-space:nowrap}
.lang-menu__botao::-webkit-details-marker{display:none}
.lang-menu__botao::marker{content:""}
.lang-menu__botao svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.lang-menu__botao:hover,.lang-menu[open] .lang-menu__botao{border-color:var(--azul);color:var(--azul)}
.lang-menu[open] .lang-menu__seta{transform:rotate(180deg)}
.lang-menu__painel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:70;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:min(300px,calc(100vw - 32px));padding:8px;background:#fff;border:1px solid var(--linha);border-radius:12px;box-shadow:0 24px 48px -24px rgba(7,31,71,.35)}
.lang-menu__painel a{display:flex;align-items:center;min-height:42px;padding:0 12px;border-radius:8px;font-size:15px;line-height:1.2;text-decoration:none;color:var(--tinta);white-space:nowrap}
.lang-menu__painel a:hover{background:var(--azul-50);color:var(--azul)}
.lang-menu__painel a[aria-current]{background:var(--azul);color:#fff}
@media (max-width:1099px){.lang-menu{display:none}}
/* menu do celular com 12 idiomas: grade (nunca uma fila de 12 botões espremidos) */
.mob-menu__lang--grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.mob-menu__lang--grade a{flex:none;font-family:var(--font-t);font-size:15px;padding:0 8px;text-align:center}
/* rodapé: 12 idiomas em duas colunas */
.rodape ul.rodape__langs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}

/* escrita de cada idioma: fonte do sistema que mostra os caracteres (Archivo e IBM Plex Mono só têm alfabeto latino) */
:root:lang(ru){--font-t:'Archivo','Segoe UI',Roboto,'Helvetica Neue',Arial,system-ui,sans-serif}
:root:lang(zh){--font-t:'Archivo','PingFang SC','Hiragino Sans GB','Microsoft YaHei UI','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC','Source Han Sans SC',system-ui,sans-serif}
:root:lang(ja){--font-t:'Archivo','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo','Noto Sans JP','Noto Sans CJK JP',system-ui,sans-serif}
:root:lang(ko){--font-t:'Archivo','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','Noto Sans CJK KR',system-ui,sans-serif}
:root:lang(ar){--font-t:'Archivo','Segoe UI','Noto Sans Arabic','Noto Naskh Arabic','Geeza Pro',Tahoma,system-ui,sans-serif}
:root:lang(zh),:root:lang(ja),:root:lang(ko),:root:lang(ar){--font-m:'IBM Plex Mono',var(--font-t)}
/* espaçamento entre letras e caixa alta são do alfabeto latino: em árabe separariam as letras ligadas */
:lang(zh) :is(h1,h2,h3,h4,.olho,.post__meta,.cartao__tit,.migalha,.rodape__tit,thead th,.lang-menu__botao),
:lang(ja) :is(h1,h2,h3,h4,.olho,.post__meta,.cartao__tit,.migalha,.rodape__tit,thead th,.lang-menu__botao),
:lang(ko) :is(h1,h2,h3,h4,.olho,.post__meta,.cartao__tit,.migalha,.rodape__tit,thead th,.lang-menu__botao),
:lang(ar) :is(h1,h2,h3,h4,.olho,.post__meta,.cartao__tit,.migalha,.rodape__tit,thead th,.lang-menu__botao){letter-spacing:0}
:lang(zh) :is(h1,h2,h3),:lang(ja) :is(h1,h2,h3),:lang(ko) :is(h1,h2,h3),:lang(ar) :is(h1,h2,h3){line-height:1.32}
:lang(zh) .prosa,:lang(ja) .prosa,:lang(ko) .prosa{line-height:1.85}
:lang(ar) .prosa{line-height:1.9}
:lang(ja) :is(h1,h2,h3,.post__link){word-break:auto-phrase}
:root:lang(ko){word-break:keep-all;overflow-wrap:break-word}

/* árabe (dir=rtl): espelha o que o site.css escreveu com esquerda/direita */
[dir="rtl"] .topo__nav{margin-left:0;margin-right:auto}
[dir="rtl"] .topo__nav a::after{transform-origin:right}
[dir="rtl"] .pular{left:auto;right:12px}
[dir="rtl"] .seta svg{transform:scaleX(-1)}
[dir="rtl"] .seta:hover svg{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .prosa ul,[dir="rtl"] .prosa ol{padding-left:0;padding-right:22px}
[dir="rtl"] .prosa blockquote{border-left:0;border-right:4px solid var(--azul);padding:4px 18px 4px 0}
[dir="rtl"] caption,[dir="rtl"] th,[dir="rtl"] td{text-align:right}
[dir="rtl"] th.n,[dir="rtl"] td.n{text-align:left}
[dir="rtl"] .faq summary::after{margin-right:0;margin-left:6px}
[dir="rtl"] .blog-meta span+span::before{margin-right:0;margin-left:14px}
[dir="rtl"] .pag-topo .hero__malha{-webkit-mask-image:linear-gradient(270deg,#000,transparent 70%);mask-image:linear-gradient(270deg,#000,transparent 70%)}
@media (max-width:1099px){[dir="rtl"] .topo .btn{margin-left:0;margin-right:auto}}
@media (max-width:560px){[dir="rtl"] .mob-toggle{margin-left:0;margin-right:auto}}
@media (max-width:899px){
  [dir="rtl"] .blog-fatos li{border-left:0;border-right:1px solid var(--linha)}
  [dir="rtl"] .blog-fatos li:first-child{border-right:0}
}
@media (min-width:960px){[dir="rtl"] .grade-blog--indice .post--destaque .post__img{border-right:0;border-left:1px solid var(--linha)}}
@media (max-width:719px){
  [dir="rtl"] .prosa .tabela-rolar tbody th,[dir="rtl"] .prosa .tabela-rolar thead th:first-child{left:auto;right:0;box-shadow:-1px 0 0 var(--linha)}
}

/* palavras compostas longas (alemão, holandês, russo): título menor nas telas estreitas, quebra de palavra só como
   último recurso nos títulos e tabela de 7 colunas mais compacta no computador (em 1024 px ela tem de caber sem rolar) */
:lang(de) :is(h1,h2,h3),:lang(nl) :is(h1,h2,h3),:lang(ru) :is(h1,h2,h3),:lang(fr) :is(h1,h2,h3),:lang(it) :is(h1,h2,h3){overflow-wrap:break-word}
@media (max-width:400px){
  :lang(de) .pag-topo--blog h1,:lang(nl) .pag-topo--blog h1,:lang(ru) .pag-topo--blog h1{font-size:25px}
}
@media (min-width:960px){
  :lang(de) .prosa .tabela-rolar table,:lang(nl) .prosa .tabela-rolar table,:lang(ru) .prosa .tabela-rolar table{font-size:13px}
  :lang(de) .prosa .tabela-rolar :is(th,td),:lang(nl) .prosa .tabela-rolar :is(th,td),:lang(ru) .prosa .tabela-rolar :is(th,td){padding:8px}
  :lang(de) .prosa .tabela-rolar tbody th,:lang(nl) .prosa .tabela-rolar tbody th,:lang(ru) .prosa .tabela-rolar tbody th{font-size:13px}
}