/* Post do blog (template novo) — só o que é desta página.
   Os componentes comuns (pg-topo, migalhas, com-indice, indice, artigo, cta-caixa, autor, meta-post,
   progresso-leitura, faq, posts, conta, soma, hoje) vêm do previa.css e não são redefinidos aqui, só ajustados. */

/* ---------- topo do post: trilha, H1, linha fina (o resumo) logo abaixo do título, autoria e imagem de destaque (uma coluna, a ordem de leitura comum em artigo) ---------- */
.post-topo .caixa{
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"mig" "cab" "res" "aut" "img";
  grid-template-rows:none;
  row-gap:0;
  padding-block:clamp(24px,3.5vw,40px) clamp(40px,5vw,64px);
}
.post-topo .migalhas{grid-area:mig;margin-bottom:clamp(22px,3vw,36px)}
/* separador no fim de cada item (e não no começo do seguinte): quando a trilha quebra, a linha nova não começa com "/" */
.post-topo .migalhas li + li::before{content:none}
.post-topo .migalhas li:not(:last-child)::after{content:"/";margin:0 8px;opacity:.5}
.post-cab{grid-area:cab}
.post-cab .sobre{margin-bottom:12px}
.post-cab .sobre a{text-decoration:none}
.post-cab .sobre a:hover{text-decoration:underline;text-underline-offset:3px}
.post-topo h1{font-size:clamp(1.95rem,3.5vw,2.95rem);line-height:1.1;max-width:20em}
.post-topo .linha-fina{grid-area:res;align-self:start}
.autoria{grid-area:aut;margin-top:24px;display:grid;gap:6px;align-content:start}
.autoria .meta-post{margin-top:0}
.autoria .compartilhar{margin-top:12px}
.meta-post a{color:inherit;font-weight:600}
.post-img{grid-area:img;margin-top:clamp(28px,4vw,48px)}
.post-img img{width:100%;height:auto;aspect-ratio:1224/512;object-fit:cover;border-radius:var(--raio);box-shadow:var(--sombra);background:var(--roxo-900)}


/* compartilhar: LinkedIn, WhatsApp e copiar link (este só com JS) */
.compartilhar{display:flex;flex-wrap:wrap;gap:8px}
.compartilhar a,.compartilhar button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--linha);background:transparent;color:var(--fg);font:inherit;font-size:14px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.compartilhar a:hover,.compartilhar button:hover{border-color:var(--acento);color:var(--acento)}
html[data-dir="a"] .post-topo .compartilhar a,html[data-dir="a"] .post-topo .compartilhar button{background:rgba(255,255,255,.7);border-color:#DAD8CC}
.ic{width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic-in{--ic:url(../assets-marca/icones/linkedin.svg)}
.ic-wa{--ic:url(../assets-marca/icones/whatsapp.svg)}
.ic-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.5a4.5 4.5 0 0 0 6.4.4l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.3 1.3'/%3E%3Cpath d='M14 10.5a4.5 4.5 0 0 0-6.4-.4l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.3-1.3'/%3E%3C/svg%3E")}

/* ---------- texto com índice lateral ---------- */
.post-corpo{padding-block:clamp(36px,4.5vw,60px) clamp(56px,7vw,88px)}
.post-corpo .com-indice{grid-template-columns:minmax(0,296px) minmax(0,1fr)}
.post-col{min-width:0}
/* grade: índice na coluna 1 (linha 1, que estica até o fim do texto menos o serviço), texto na coluna 2 (as duas linhas)
   e o serviço relacionado no pé da coluna 1. No DOM o serviço vem depois do texto. */
.post-corpo .com-indice{grid-template-rows:minmax(0,1fr) auto;row-gap:32px}
.lateral{grid-column:1;grid-row:1;align-self:stretch}
.post-col{grid-column:2;grid-row:1/span 2}
.post-corpo .servico-rel{grid-column:1;grid-row:2;align-self:end}
/* lateral: o índice acompanha a leitura; o rótulo fica parado e só a lista rola quando não cabe na tela */
.lateral .indice{position:sticky;top:96px}
.lateral .indice-rola{max-height:calc(100vh - 96px - 16px - 30px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:6px;margin:-6px}
.lateral .indice-rola.mais-abaixo{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}
.lateral .indice-rola.mais-acima{-webkit-mask-image:linear-gradient(transparent,#000 36px);mask-image:linear-gradient(transparent,#000 36px)}
.lateral .indice-rola.mais-acima.mais-abaixo{-webkit-mask-image:linear-gradient(transparent,#000 36px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(transparent,#000 36px,#000 calc(100% - 56px),transparent)}
.indice summary{list-style:none;display:flex;align-items:baseline;gap:10px;font-size:12px;line-height:18px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--fg2);margin-bottom:12px}
.indice summary::-webkit-details-marker{display:none}
.indice summary small{font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:none}
.indice ol{counter-reset:topico}
.indice li{counter-increment:topico}
.indice a{display:grid;grid-template-columns:24px minmax(0,1fr);font-size:13.5px;line-height:1.38;padding:5px 0 5px 12px}
/* número do tópico: --fg2 puro (contraste AA); o leitor de tela não lê o número (a lista já é numerada) */
.indice a::before{content:counter(topico,decimal-leading-zero);content:counter(topico,decimal-leading-zero) / "";font-family:var(--fonte);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.7;color:var(--fg2)}
.indice a.atual::before{color:var(--acento)}
@media (min-width:981px){.indice summary{pointer-events:none}}
/* notebook e telas baixas: índice mais compacto para caber sem rolar */
@media (min-width:981px) and (max-height:860px){
  .indice a{padding-block:3px;font-size:13px;line-height:1.3}
  .indice a::before{line-height:1.6}
}

/* serviço relacionado (só no desktop) */
.servico-rel{padding:18px 18px 20px;border-radius:var(--raio);background:var(--chip);border:1px solid var(--linha)}
.servico-rel .sobre{margin-bottom:6px;font-size:11.5px}
.servico-t{font-size:1.12rem;font-weight:800;line-height:1.25;color:var(--titulo)}
.servico-t a{text-decoration:none}
.servico-t a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--oliva)}
.servico-d{margin-top:6px;font-size:14px;line-height:1.45;color:var(--fg2)}
.servico-rel .btn{margin-top:14px;width:100%;justify-content:center;font-size:15px;padding:.72em 1em}

/* ---------- o texto do post ---------- */
.post-corpo .artigo{max-width:70ch}
.post-corpo .artigo > h2:first-of-type{margin-top:1.8em}
/* "Leia também": chamada com a borda oliva (só apresentação; o texto é o do post) */
.artigo .leia{padding:12px 16px;border-left:3px solid var(--oliva);background:var(--chip);border-radius:0 var(--raio-s) var(--raio-s) 0}
/* os três cenários viram cartões numerados pelo próprio texto */
.artigo .cenario{padding:16px 20px 17px;border:1px solid var(--linha);border-left:4px solid var(--acento);border-radius:var(--raio-s);background:var(--chip)}
.artigo .cenario + .cenario{margin-top:12px}
.artigo .cenario strong{color:var(--acento)}
/* a pergunta ao fornecedor vira citação de destaque */
.artigo .destaque{margin-block:1.5em;padding:4px 0 4px 22px;border-left:4px solid var(--oliva);font-size:clamp(1.2rem,1.8vw,1.42rem);line-height:1.38}
/* link externo: seta ↗ só visual (texto alternativo vazio); o " (abre em nova aba)" do .sr é o que o leitor de tela lê */
.artigo a[target="_blank"]::after{content:"↗";content:"↗" / "";display:inline-block;margin-left:3px;font-size:.8em}
/* valor em reais: a moeda não se separa do número ("R$ 80 mil") */

/* CTA do meio: cartão roxo da largura do texto */
.artigo .cta-caixa{grid-template-columns:minmax(0,1fr);gap:18px;margin-block:2.4em;padding:26px 28px 28px}
.cta-caixa .sobre{margin-bottom:8px;color:var(--oliva)}
.cta-caixa b{font-size:clamp(1.15rem,1.6vw,1.32rem);line-height:1.3;color:#fff}
.artigo .cta-caixa p{margin-top:8px;font-size:15.5px;line-height:1.55;max-width:58ch}
.cta-caixa .link-seta{justify-self:start;color:var(--oliva)}
.cta-caixa .link-seta:hover{color:#fff;border-bottom-color:#fff}

/* caixa do autor */
.post-col .autor{max-width:70ch;margin-top:clamp(44px,5vw,60px);gap:18px;padding:22px 24px}
.autor .avatar-autor{background:var(--roxo-claro);color:var(--roxo)}
.sobre-olivas .avatar-autor{background:#fff;border:1px solid var(--linha)}
.sobre-olivas .avatar-autor img{width:34px;height:34px;border-radius:0;object-fit:contain;background:none}
.sobre-olivas .autor-org{margin-top:6px;font-size:15px;color:var(--fg)}
.autor-rot{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--acento)}
.autor .autor-rot{margin-top:0;color:var(--acento);font-size:12px}
.autor .autor-nome{margin-top:4px;font-size:1.08rem;font-weight:700;color:var(--titulo)}
.autor .autor-bio{margin-top:6px;font-size:15px;color:var(--fg)}
.autor .autor-org{margin-top:10px;font-size:14px}
.autor .autor-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:14px;font-size:14px}
.autor .link-seta{font-size:14.5px}

/* ---------- perguntas frequentes ---------- */
.post-faq .faq{margin-top:36px}
/* a pergunta é um H3 (outline de títulos), com a aparência do summary */
.faq summary h3{display:inline;font:inherit;margin:0;color:inherit;letter-spacing:0}
.faq details > div a{color:var(--acento);font-weight:600;text-underline-offset:3px}
.faq-rod{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:34px;max-width:860px}
.faq-rod p{font-size:1.08rem;font-weight:700;color:var(--titulo)}

/* ---------- newsletter (componente no previa.css): no post ela fica em fundo claro (data-surf="claro"), entre as perguntas (papel) e o case (roxo).
   Duas seções vizinhas nunca repetem o mesmo fundo, então o fio que separava as duas saiu (01/10/2026). ---------- */

/* ---------- case relacionado ---------- */
.post-case .caixa{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.post-case .lead{margin-top:20px}
.case-fluxo{margin-top:14px;color:var(--fg2);max-width:62ch}
.acoes-case{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:30px}
.post-case .conta{display:block;grid-row:auto}
.post-case .conta .hoje{margin-top:18px}

/* ---------- responsivo ---------- */
@media (max-width:1100px) and (min-width:981px){
  .post-corpo .com-indice{grid-template-columns:minmax(0,252px) minmax(0,1fr);gap:44px}
  .servico-rel{padding-inline:16px}
  .servico-rel .btn{font-size:14.5px;padding-inline:.6em}
}
@media (max-width:980px){
  /* índice vira uma caixa que abre e fecha, entre a imagem e o texto */
  .post-corpo .com-indice{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:28px}
  .lateral,.post-col{grid-column:auto;grid-row:auto}
  .lateral .indice{position:static;margin:0;padding:0}
  .lateral .indice-rola{max-height:none;overflow:visible;margin:0;padding:0;-webkit-mask-image:none;mask-image:none}
  .indice summary{position:relative;align-items:center;min-height:52px;margin:0;padding:12px 48px 12px 16px;cursor:pointer;font-size:12.5px}
  .indice summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
  .indice details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  .indice details[open] summary{border-bottom:1px solid var(--linha)}
  .indice ol{margin:10px 16px 14px 14px}
  .indice a{font-size:14.5px;padding-block:8px}
  .servico-rel{display:none}
  .post-case .caixa{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  /* trilha: o título do post fica numa linha só, com reticências (o texto inteiro continua no HTML) */
  .post-topo .migalhas li:last-child{flex:1 1 150px;min-width:0}
  .post-topo .migalhas [aria-current]{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .post-topo h1{font-size:1.75rem;line-height:1.14}
  .compartilhar a,.compartilhar button{min-height:44px;padding:0 11px;gap:6px;font-size:13.5px}
  .post-img img{border-radius:var(--raio-s)}
  /* sem os pontos entre os itens da meta: no celular a linha quebra e o ponto ficaria no começo */
  .meta-post{column-gap:16px}
  .meta-post > :not(:last-child)::after{content:none}
  .artigo .cta-caixa{padding:22px 20px 24px}
  /* o link quebra em duas linhas: o sublinhado acompanha o texto, em vez de virar um traço da largura da caixa sob a segunda linha */
  .cta-caixa .link-seta{padding-bottom:0;border-bottom:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
  .artigo .cenario{padding:14px 16px 15px}
  .artigo .destaque{padding-left:16px}
  .post-col .autor{flex-direction:column;gap:12px;padding:20px}
  .faq-rod{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .indice summary::after{transition:none}
}

/* linha de meta: até 1100px a coluna do título é estreita e a linha pode quebrar; sem os "·" nenhum separador fica solto */
@media (max-width:1100px){
  .meta-post{column-gap:16px}
  .meta-post > :not(:last-child)::after{content:none}
}