/* Blog da Max Ideal: capa e artigos. Carregado depois de /style.css e /fim.css. Classes com prefixo blog-.
   Usa só os tokens de style.css (papel, tinta, marinho, amarelo no botão principal, mono nos rótulos). */

.blog-pagina main{display:block}
.blog-pagina main a{text-underline-offset:3px;text-decoration-thickness:1px}
.blog-pagina main a:hover{text-decoration-thickness:2px}
.topo nav a[aria-current="true"]{color:var(--tinta)}

/* largura e rótulos */
.blog-largura{width:min(100% - var(--lado)*2,var(--largura));margin-inline:auto}
.blog-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.blog-meta .blog-assunto{color:var(--tinta)}
.blog-meta .blog-assunto::before{content:"";display:inline-block;width:14px;height:1.5px;background:var(--m);vertical-align:middle;margin:-2px 8px 0 0}

/* link com seta */
.blog-seguir{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:16px;text-decoration:none!important;color:var(--tinta);background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1px no-repeat;transition:background-size .3s ease}
.blog-seguir svg{width:18px;height:18px;flex:none;transition:transform .25s ease}
.blog-seguir:hover{background-size:0 1px;background-position:100% calc(100% - 9px)}
.blog-seguir:hover svg{transform:translateX(3px)}

/* moldura de foto com marcas de registro */
.blog-moldura{position:relative;background:var(--nevoa);border-radius:var(--raio);padding:clamp(14px,2vw,26px);margin:0}
.blog-moldura .blog-foto{position:relative;overflow:hidden;border-radius:var(--raio-p);background:#E9E8E1}
.blog-moldura img{width:100%;height:100%;object-fit:cover}
.blog-moldura figcaption{margin-top:10px;font:400 11px/1.4 var(--mono);color:var(--cinza);text-align:right}

/* entrada discreta, só para quem não pediu menos movimento */
@media (prefers-reduced-motion:no-preference){
  .blog-entra{animation:blog-sobe .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--atraso,0ms)}
  html:has(body.blog-pagina){scroll-behavior:smooth}
}
@keyframes blog-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- capa do blog ---------- */
.blog-topo{padding:clamp(40px,7vw,104px) 0 clamp(40px,6vw,80px)}
.blog-topo h1{margin:18px 0 0;max-width:13em;font-weight:500;font-size:clamp(40px,5.6vw,78px);line-height:1.02;letter-spacing:-.037em;text-wrap:balance}
.blog-topo h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.blog-topo-texto{margin-top:clamp(18px,2.2vw,28px);max-width:34em;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:#363A42}

.blog-lista{border-top:1px solid var(--linha);padding:clamp(36px,5vw,72px) 0 clamp(56px,7vw,104px)}
.blog-lista-cabeca{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px}
.blog-lista-titulo{margin-top:16px;font-weight:500;font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.03em;max-width:15em;text-wrap:balance}
.blog-filtros{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;background:var(--nevoa);border-radius:28px;max-width:100%}
.blog-filtros[hidden]{display:none}
.blog-filtro{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--cinza);font:500 15px/1 var(--sans);cursor:pointer;white-space:nowrap;transition:background .25s ease,color .2s ease,box-shadow .25s ease}
.blog-filtro:hover{color:var(--tinta)}
.blog-filtro[aria-pressed="true"]{background:var(--branco);color:var(--tinta);box-shadow:0 1px 2px rgba(15,27,45,.08),0 6px 16px -8px rgba(15,27,45,.25)}
.blog-filtro b{font:500 12px var(--mono);color:var(--cinza);margin-left:6px}
.blog-filtro-status{margin-top:12px;font-size:14.5px;color:var(--cinza);min-height:1.4em}

.blog-cartoes{list-style:none;padding:0;display:grid;gap:16px;margin-top:clamp(28px,4vw,48px)}
.blog-cartao{position:relative;display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;transition:border-color .25s ease,box-shadow .35s ease,transform .35s ease}
.blog-cartao[hidden]{display:none}
.blog-cartao-foto{aspect-ratio:16/10;overflow:hidden;background:var(--nevoa)}
.blog-cartao-foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.blog-cartao-corpo{display:flex;flex-direction:column;flex:1;padding:20px 22px 20px}
.blog-cartao-titulo{margin:12px 0 8px;font-weight:500;font-size:clamp(20px,1.6vw,23px);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.blog-cartao-titulo a{text-decoration:none!important}
.blog-cartao-titulo a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--raio)}
.blog-cartao-titulo a:focus-visible{outline:none}
.blog-cartao:has(a:focus-visible){outline:2px solid var(--marinho);outline-offset:3px}
.blog-cartao-resumo{font-size:15.5px;line-height:1.5;color:var(--cinza)}
.blog-cartao-ler{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:20px;font-weight:600;font-size:15px}
.blog-cartao-ler i{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--linha);transition:background .25s ease,border-color .25s ease}
.blog-cartao-ler i::before{content:"";position:absolute;left:12px;top:19.25px;width:15px;height:1.5px;background:currentColor}
.blog-cartao-ler i::after{content:"";position:absolute;left:19px;top:15px;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
@media (hover:hover){
  .blog-cartao:hover{border-color:#D3D2CA;box-shadow:0 24px 50px -30px rgba(15,27,45,.35);transform:translateY(-3px)}
  .blog-cartao:hover .blog-cartao-foto img{transform:scale(1.04)}
  .blog-cartao:hover .blog-cartao-ler i{background:var(--amarelo);border-color:var(--amarelo)}
}
@media (min-width:640px){.blog-cartoes{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1180px){.blog-cartoes{grid-template-columns:repeat(4,minmax(0,1fr))}.blog-cartoes--tres,.blog-cartoes--capa{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* cartão de destaque: primeiro da lista da capa, ocupa a linha inteira */
.blog-selo{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);border:1px solid var(--tinta);border-radius:999px;padding:5px 9px 4px}
.blog-cartao--destaque .blog-cartao-titulo{font-size:clamp(26px,3vw,44px);line-height:1.06;letter-spacing:-.03em;margin:14px 0 12px}
.blog-cartao--destaque .blog-cartao-resumo{font-size:clamp(16px,1.25vw,18px);color:#363A42;max-width:34em}
.blog-cartao--destaque .blog-meta{align-items:center}
@media (min-width:640px){.blog-cartao--destaque{grid-column:1/-1}}
@media (min-width:900px){
  .blog-cartao--destaque{flex-direction:row}
  .blog-cartao--destaque .blog-cartao-foto{flex:0 0 52%;aspect-ratio:auto;min-height:340px}
  .blog-cartao--destaque .blog-cartao-corpo{padding:clamp(28px,3.4vw,52px)}
}

/* painel escuro de chamada (capa e meio do artigo) */
.blog-painel{position:relative;display:grid;gap:22px 48px;align-items:center;padding:clamp(30px,4vw,56px) clamp(22px,4vw,56px);border-radius:var(--raio);overflow:hidden}
.blog-painel-titulo{font-weight:500;font-size:clamp(25px,2.6vw,38px);line-height:1.1;letter-spacing:-.025em;max-width:17em;text-wrap:balance;color:#fff}
.blog-painel-texto{margin-top:12px;max-width:34em;font-size:17px;line-height:1.5;color:#C9D3E1}
.blog-botoes{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.blog-painel .barra-cor{position:absolute;right:clamp(18px,2vw,28px);top:clamp(16px,2vw,24px);width:48px}
@media (min-width:1000px){.blog-chamada .blog-painel{grid-template-columns:minmax(0,1fr) auto}}
.blog-chamada{padding-bottom:clamp(56px,7vw,104px)}

/* perguntas (capa e artigos): texto aberto, sem sanfona */
.blog-faq{border-top:1px solid var(--linha);padding:clamp(48px,6vw,88px) 0}
.blog-faq-grade{display:grid;gap:24px}
.blog-faq-titulo{margin-top:16px;font-weight:500;font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.03em}
.blog-pergunta{padding:22px 0;border-bottom:1px solid var(--linha)}
.blog-pergunta:first-child{padding-top:0}
.blog-pergunta h3{font-weight:500;font-size:clamp(18.5px,1.5vw,21px);line-height:1.3;letter-spacing:-.015em}
.blog-pergunta p{margin-top:8px;max-width:38em;font-size:17px;line-height:1.55;color:#363A42}
@media (min-width:1000px){.blog-faq-grade{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px)}}

/* ---------- artigo ---------- */
.blog-capa{padding:clamp(28px,5vw,72px) 0 clamp(36px,5vw,64px);border-bottom:1px solid var(--linha)}
.blog-capa-grade{display:grid;gap:32px;align-items:end}
.blog-trilha ol{display:flex;flex-wrap:wrap;gap:4px 10px;list-style:none;padding:0;font:400 12.5px/1.3 var(--mono);color:var(--cinza)}
.blog-trilha li+li::before{content:"/";margin-right:10px;color:var(--cinza)}
.blog-trilha a{color:var(--cinza);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.blog-trilha a:hover{color:var(--tinta);text-decoration:underline}
.blog-trilha li[aria-current]{display:inline-flex;align-items:center;min-height:44px}
.blog-capa .blog-meta{margin-top:10px}
.blog-capa h1{margin:16px 0 0;max-width:16em;font-weight:500;font-size:clamp(34px,4.3vw,60px);line-height:1.04;letter-spacing:-.034em;text-wrap:balance}
.blog-resposta{margin-top:clamp(20px,2.4vw,30px);max-width:32em;padding-left:18px;border-left:2px solid var(--marinho);font-size:clamp(18px,1.55vw,21.5px);line-height:1.45;letter-spacing:-.01em;color:var(--tinta)}
.blog-autoria{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:clamp(20px,2.4vw,30px);font:400 12.5px/1.4 var(--mono);color:var(--cinza)}
.blog-autoria b{font-weight:500;color:var(--tinta)}
.blog-capa .blog-foto{aspect-ratio:4/3}
@media (min-width:900px){.blog-capa-grade{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,88px)}}

.blog-corpo{display:grid;grid-template-columns:minmax(0,1fr);padding:clamp(28px,5vw,80px) 0 clamp(56px,7vw,104px)}

/* índice: no computador fica fixo ao lado. No celular vira uma barra presa sob o topo (com JS) */
.blog-indice summary{display:none}
.blog-indice-titulo{margin-bottom:12px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
.blog-indice ol{list-style:none;padding:0;border-left:1px solid var(--linha)}
.blog-indice a{display:block;margin-left:-1px;padding:9px 0 9px 16px;border-left:2px solid transparent;color:var(--cinza);font-size:15px;line-height:1.35;text-decoration:none;transition:color .2s ease,border-color .2s ease}
.blog-indice a:hover{color:var(--tinta)}
.blog-indice a[aria-current="true"]{color:var(--tinta);border-left-color:var(--m);font-weight:500}

@media (min-width:1100px){
  .blog-corpo{grid-template-columns:minmax(0,250px) minmax(0,700px);column-gap:clamp(48px,7vw,112px)}
  .blog-indice{position:sticky;top:calc(var(--topo-altura) + 32px);max-height:calc(100vh - var(--topo-altura) - 56px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
@media (max-width:1099px){
  .blog-corpo{justify-content:center;grid-template-columns:minmax(0,720px)}
  .blog-indice{margin-bottom:clamp(28px,5vw,44px);border-block:1px solid var(--linha)}
  .blog-indice-titulo{display:none}
  .blog-indice summary{display:flex;align-items:center;gap:12px;min-height:54px;list-style:none;cursor:pointer;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
  .blog-indice summary::-webkit-details-marker{display:none}
  .blog-indice summary::after{content:"";flex:none;width:9px;height:9px;margin:0 6px 0 auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s ease}
  .blog-indice details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .blog-indice-atual{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 14px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--cinza)}
  .blog-indice-atual:empty{display:none}
  .blog-indice ol{margin-bottom:16px}
  /* com JS: barra presa logo abaixo do topo, de ponta a ponta */
  .blog-js .blog-indice{position:sticky;top:var(--topo-altura);z-index:20;margin-inline:calc(var(--lado)*-1);padding-inline:var(--lado);background:rgba(250,250,247,.96);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
  .blog-js .blog-indice ol{max-height:min(60vh,420px);overflow:auto;overscroll-behavior:contain}
  html.blog-js:has(.blog-indice){scroll-padding-top:calc(var(--topo-altura) + 72px)}
}

/* texto do artigo */
.blog-texto{min-width:0}
.blog-texto>*+*{margin-top:clamp(48px,5.4vw,76px)}
.blog-texto section>*+*{margin-top:1em}
.blog-texto section>h2+*{margin-top:.7em}
.blog-texto h2{font-weight:500;font-size:clamp(26px,2.4vw,36px);line-height:1.12;letter-spacing:-.026em;max-width:19em;text-wrap:balance}
.blog-texto :where(p,li){max-width:620px;font-size:18.5px;line-height:1.65;color:#2C3038}
.blog-texto strong{font-weight:600;color:var(--tinta)}
.blog-texto a:not(.btn):not(.blog-seguir){color:var(--marinho)}
.blog-pontos{list-style:none;padding:0}
.blog-pontos li{position:relative;padding-left:28px}
.blog-pontos li+li{margin-top:.65em}
.blog-pontos li::before{content:"";position:absolute;left:3px;top:.68em;width:8px;height:8px;background:var(--marinho);border-radius:1px}
.blog-passos{list-style:none;padding:0;counter-reset:passo}
.blog-passos li{position:relative;padding-left:46px;counter-increment:passo}
.blog-passos li+li{margin-top:.8em}
.blog-passos li::before{content:counter(passo,decimal-leading-zero);position:absolute;left:0;top:.28em;font:500 13px/1.4 var(--mono);color:var(--marinho);border:1px solid var(--linha);border-radius:6px;padding:1px 6px;background:var(--branco)}

/* lista de conferência com quadradinho */
.blog-confere{list-style:none;padding:0;border-top:1px solid var(--linha);max-width:640px}
.blog-confere li{position:relative;max-width:none;padding:14px 0 14px 40px;border-bottom:1px solid var(--linha)}
.blog-confere li::before{content:"";position:absolute;left:2px;top:19px;width:18px;height:18px;border:1.5px solid var(--tinta);border-radius:4px;background:var(--branco)}
.blog-confere b{display:block;font-weight:600;color:var(--tinta)}

/* modelo de mensagem e exemplos em mono */
.blog-modelo{position:relative;max-width:620px;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-p);padding:22px 20px 18px}
.blog-modelo p{font:400 15px/1.6 var(--mono);color:var(--tinta);max-width:none}
.blog-modelo .blog-modelo-rotulo{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza);margin-bottom:8px}
.blog-modelo .blog-modelo-nota{margin-top:10px;font-size:12px;color:var(--cinza)}

/* linha digitável desenhada por campo (exemplo fictício) */
.blog-linha{max-width:660px;margin-inline:0;background:var(--nevoa);border-radius:var(--raio-p);padding:22px 18px 16px}
.blog-linha-campos{display:flex;flex-wrap:wrap;gap:10px 8px;font:500 clamp(13px,1.6vw,16px)/1.3 var(--mono);letter-spacing:.02em}
.blog-linha-campos span{display:flex;flex-direction:column;gap:6px;background:var(--branco);border:1px solid var(--linha);border-radius:8px;padding:8px 10px 7px}
.blog-linha-campos small{font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.blog-linha-barras{height:34px;margin-top:16px;background:repeating-linear-gradient(90deg,#14161A 0 2px,transparent 2px 3px,#14161A 3px 4px,transparent 4px 7px,#14161A 7px 10px,transparent 10px 11px,#14161A 11px 12px,transparent 12px 15px)}
.blog-linha figcaption{margin-top:10px;font:400 11.5px/1.45 var(--mono);color:var(--cinza)}

/* tabelas em texto */
.blog-tabela-caixa{max-width:680px}
.blog-tabela{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;color:#2C3038}
.blog-tabela caption{padding-bottom:12px;text-align:left;font-weight:600;font-size:16.5px;color:var(--tinta)}
.blog-tabela :is(th,td){padding:13px 16px 13px 0;border-top:1px solid var(--linha);text-align:left;vertical-align:top}
.blog-tabela :is(th,td):last-child{padding-right:0}
.blog-tabela thead th{padding-top:0;padding-bottom:9px;border-top:0;font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cinza)}
.blog-tabela tbody tr:last-child :is(th,td){border-bottom:1px solid var(--linha)}
.blog-tabela tbody th{font-weight:600;color:var(--tinta)}
.blog-num{font-family:var(--mono);font-size:.92em;white-space:nowrap}
.blog-tabela-nota{margin-top:10px;font-size:14px!important;line-height:1.5!important;color:var(--cinza)!important}

/* painel dentro do texto */
.blog-texto .blog-painel{grid-template-columns:minmax(0,1fr)}
.blog-texto .blog-painel p{color:#C9D3E1;max-width:34em}
.blog-texto .blog-painel .blog-painel-titulo{color:#fff;font-size:clamp(24px,2.3vw,32px);line-height:1.12;max-width:17em}
.blog-texto .blog-painel .blog-painel-texto{font-size:17px;line-height:1.5}

/* perguntas, fontes e nota do artigo */
.blog-perguntas .blog-pergunta:first-child{padding-top:10px}
.blog-fontes ol{padding-left:1.3em}
.blog-fontes li{padding-left:4px;font-size:15.5px!important;line-height:1.55!important;color:var(--cinza)!important}
.blog-fontes li+li{margin-top:12px}
.blog-fontes li::marker{font:500 13px var(--mono);color:var(--tinta)}
.blog-fontes a{overflow-wrap:anywhere}
.blog-sobre{margin-top:32px;padding-top:18px;border-top:1px solid var(--linha)}
.blog-sobre p{font-size:15px!important;line-height:1.55!important;color:var(--cinza)!important}

/* rótulo mono da folha de chamada (fim.css) no mínimo em 11 px e cinza */
.blog-pagina .fim-folha-slug{font-size:11px;color:var(--cinza)}

/* leia também */
.blog-relacionados{border-top:1px solid var(--linha);padding:clamp(48px,6vw,88px) 0 0}

/* ---------- telas pequenas ---------- */
@media (max-width:640px){
  .blog-texto :where(p,li){font-size:17.5px;line-height:1.62}
  .blog-pergunta p{font-size:16.5px}
  .blog-filtro{padding:0 14px;font-size:14.5px}
  .blog-botoes .btn{width:100%;white-space:normal;text-align:center;padding:12px 18px;line-height:1.2}
  .blog-modelo p{font-size:14px}
  /* tabelas largas viram blocos: cada linha vira um cartão com o rótulo das colunas */
  .blog-tabela--blocos thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .blog-tabela--blocos,.blog-tabela--blocos tbody,.blog-tabela--blocos tr,.blog-tabela--blocos th,.blog-tabela--blocos td{display:block}
  .blog-tabela--blocos caption{display:block}
  .blog-tabela--blocos tr{padding:14px 0 16px;border-top:1px solid var(--linha)}
  .blog-tabela--blocos tbody tr:last-child{border-bottom:1px solid var(--linha)}
  .blog-tabela--blocos :is(th,td),.blog-tabela--blocos tbody tr:last-child :is(th,td){padding:0;border:0}
  .blog-tabela--blocos td{display:grid;grid-template-columns:minmax(0,7.6em) minmax(0,1fr);column-gap:12px;margin-top:7px}
  .blog-tabela--blocos td::before{content:attr(data-rotulo);padding-top:3px;font:500 11px/1.35 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--cinza)}
  .blog-tabela--blocos .blog-num{white-space:normal}
}
@media (max-width:479px){
  .blog-lista-cabeca>div{flex:1 1 100%}
  .blog-filtros{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:24px}
  .blog-filtro{padding:0 10px}
}

@media (prefers-reduced-motion:reduce){
  .blog-pagina *,.blog-pagina *::before,.blog-pagina *::after{animation:none!important;transition:none!important}
  .blog-cartao,.blog-cartao-foto img{transform:none!important}
}