/* Página do post do blog: carregado só em is_singular('post'). Depende de refino.css. */

/* ---------- estrutura: faixa, capa e grade (texto 680 + lado 260 + vão 56 = 996) ---------- */
.post-leitura .wrap{max-width:1016px}
.post-leitura .post-cat{display:inline-block;margin-bottom:10px;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:#9BE38A}
.post-leitura .post-cat:hover{color:#fff}
.post-leitura .post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:15px;line-height:1.3;color:#B9D3D4}
.post-leitura .artigo-capa img{width:996px}
.post-leitura .post-grade{padding-block:10px 24px}
.post-leitura .post-texto{min-width:0}
.post-leitura .post-lado{display:none}
.post-leitura .post-sumario-movel{margin:0 0 2em;padding:12px 16px;border:1px solid #DDE8E3;border-radius:12px;font-family:var(--fonte);font-size:16px;line-height:1.4}
.post-leitura .post-sumario-movel summary{cursor:pointer;font-weight:700;color:var(--texto)}
.post-leitura .entry .post-sumario-movel ol{margin:10px 0 0;padding-left:22px;list-style:decimal outside}
.post-leitura .entry .post-sumario-movel li{margin:6px 0;padding-left:0}
.post-leitura .entry .post-sumario-movel a{color:var(--texto);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#9FC9A8;text-underline-offset:3px}
.post-leitura .entry .post-sumario-movel a:hover{background:none;text-decoration-color:var(--texto)}

/* ---------- celular e tablet: uma coluna, sumário recolhível e barra de demonstração ---------- */
.post-leitura .post-barra-movel{position:fixed;left:12px;right:88px;bottom:0;z-index:65;padding-bottom:calc(12px + env(safe-area-inset-bottom));visibility:hidden;pointer-events:none;transform:translateY(120%);transition:transform .4s var(--mola),visibility 0s .4s}
.post-leitura .post-barra-movel.mostrar{visibility:visible;transform:none;transition:transform .4s var(--mola),visibility 0s}
.post-leitura .post-barra-movel .cta-demo{display:flex;align-items:center;gap:8px;pointer-events:auto;padding:7px 7px 7px 12px;border-radius:14px;background:var(--escuro-3);color:#fff;box-shadow:0 12px 32px -8px rgba(12,50,53,.55)}

/* O WhatsApp só encolhe para 64px abaixo de 768px; de 768 a 1023 ele tem 89px a 21px da borda: 21 + 89 + 12 de respiro */
@media (min-width:768px){
  .post-leitura .post-barra-movel{right:calc(21px + 89px + 12px)}
}

/* ---------- computador: duas colunas, lado que acompanha a rolagem ---------- */
@media (min-width:1024px){
  .post-leitura .post-grade{display:grid;grid-template-columns:minmax(0,680px) 260px;gap:56px;justify-content:center}
  /* A lateral não rola: em tela baixa (notebook de 657px) quem rola é o sumário e o card fica sempre à vista */
  .post-leitura .post-lado{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px;align-self:start;max-height:calc(100vh - 104px)}
  .post-leitura .post-lado .post-sumario{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .post-leitura .post-lado .cta-demo{flex:none}
  .post-leitura .post-sumario-movel,.post-leitura .post-barra-movel{display:none}
}
.post-leitura .post-sumario{padding:14px 16px;border:1px solid #DDE8E3;border-radius:12px;font-size:15px;line-height:1.35}
.post-leitura .post-sumario-t{margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto)}
.post-leitura .post-sumario ol{list-style:none}
.post-leitura .post-sumario li{margin:2px 0}
.post-leitura .post-sumario a{display:block;padding:5px 0 5px 10px;border-left:2px solid transparent;color:var(--texto-corpo)}
.post-leitura .post-sumario a:hover{color:var(--texto)}
/* Anel por dentro: o sumário rola e cortaria um anel por fora */
.post-leitura .post-sumario a:focus-visible{outline:2px solid #144448;outline-offset:-2px;border-radius:4px}
.post-leitura .post-sumario a[aria-current="true"]{border-left-color:var(--verde);font-weight:700;color:var(--texto)}

/* ---------- progresso de leitura: barra fixa de 3px, escala por rolagem (CSS) ou por --progresso (JS) ---------- */
.post-leitura .post-progresso{position:fixed;top:0;left:0;right:0;z-index:75;height:3px;background:#2FC70D;transform-origin:0 50%;transform:scaleX(var(--progresso,0));pointer-events:none}
@keyframes post-progresso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Com movimento reduzido o site.css zera as animações: a barra fica com o --progresso do post.js */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .post-leitura .post-progresso{transform:scaleX(0);animation:post-progresso linear both;animation-timeline:scroll(root)}
  }
}

/* ---------- tipografia do texto (padrão Medium): serifa no corpo, Obliqua Sans nos títulos e nos elementos de interface ---------- */
/* Tudo sob .post-leitura .entry: ganha do .entry do site.css sem !important e não toca o .entry das páginas. */
.post-leitura .entry{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:20px;line-height:1.6;color:#242424;font-optical-sizing:auto;font-kerning:normal;overflow-wrap:break-word}
.post-leitura .entry ::selection{background:rgba(47,199,13,.22)}
.post-leitura .entry p{margin:0 0 1.1em;text-wrap:pretty}
.post-leitura .entry > :first-child,.post-leitura .entry > .post-sumario-movel:first-child + *{margin-top:0}
.post-leitura .entry > :last-child{margin-bottom:0}
.post-leitura .entry strong,.post-leitura .entry b{font-weight:600;color:#111}
.post-leitura .entry em,.post-leitura .entry i{font-style:italic}

/* Títulos: o espaço de cima (seção nova) é bem maior que o de baixo (cola no texto que abre) */
.post-leitura .entry :is(h2,h3,h4,h5,h6){font-family:var(--fonte);font-weight:700;letter-spacing:-.01em;color:#1a2b2c;text-wrap:balance}
.post-leitura .entry h2{margin:2.2em 0 .55em;font-size:30px;line-height:1.22;scroll-margin-top:96px}
.post-leitura .entry h3{margin:1.8em 0 .5em;font-size:24px;line-height:1.28;scroll-margin-top:96px}
.post-leitura .entry h4{margin:1.7em 0 .45em;font-size:20px;line-height:1.3}
.post-leitura .entry h5{margin:1.6em 0 .4em;font-size:18px;line-height:1.35}
.post-leitura .entry h6{margin:1.6em 0 .4em;font-size:16px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}
.post-leitura .entry :is(h2,h3,h4,h5,h6) :is(strong,b){font-weight:inherit;color:inherit}
/* O H2 recebe o foco quando o sumário leva até ele (post.js): anel só para quem chegou pelo teclado */
.post-leitura .entry h2:focus{outline:none}
.post-leitura .entry h2:focus-visible{outline:2px solid #0f6b3e;outline-offset:4px;border-radius:4px}
/* Dois títulos seguidos são um bloco só; depois de uma caixa ou figura, a seção já está separada */
.post-leitura .entry :is(h2,h3,h4,h5,h6) + :is(h3,h4,h5,h6){margin-top:.6em}
.post-leitura .entry :is(.resposta-rapida,.post-sumario-movel,.nota-atualizacao,.cta-demo,.tabela-rolagem,.wp-block-table,figure,hr) + :is(h2,h3){margin-top:1.4em}

/* Links: verde da marca com sublinhado leve, que fica cheio e ganha fundo no hover */
.post-leitura .entry a:where(:not(.cta-demo)){color:#0f6b3e;text-decoration:underline;text-decoration-thickness:.08em;text-decoration-color:rgba(15,107,62,.45);text-underline-offset:.18em;border-radius:2px;transition:background-color .2s,text-decoration-color .2s}
.post-leitura .entry a:where(:not(.cta-demo)):hover{color:#0f6b3e;text-decoration-color:#0f6b3e;background:rgba(47,199,13,.10)}
.post-leitura .entry a:where(:not(.cta-demo)):focus-visible{outline:2px solid #0f6b3e;outline-offset:2px}
.post-leitura .entry a :is(strong,b){color:inherit}
.post-leitura .entry a:where(:not(.cta-demo)):has(> img):hover{background:none}

/* Listas */
.post-leitura .entry :is(ul,ol){margin:0 0 1.1em;padding-left:1.3em;list-style:disc outside}
.post-leitura .entry ol{list-style:decimal outside}
.post-leitura .entry li{margin:0 0 .5em;padding-left:.2em}
.post-leitura .entry li:last-child{margin-bottom:0}
.post-leitura .entry li::marker{color:#62A570}
.post-leitura .entry ol > li::marker{font-family:var(--fonte);font-weight:700;font-size:.9em}
.post-leitura .entry li :is(ul,ol){margin:.5em 0}
.post-leitura .entry li > p{margin-bottom:.5em}
.post-leitura .entry li > p:last-child{margin-bottom:0}

/* Citações */
.post-leitura .entry :is(blockquote,.wp-block-quote,.wp-block-pullquote){margin:1.6em 0;padding:2px 0 2px 22px;border:0;border-left:3px solid #242424;font-style:italic;text-align:left}
.post-leitura .entry .wp-block-pullquote{font-size:1.2em;line-height:1.5}
.post-leitura .entry .wp-block-pullquote blockquote{margin:0;padding:0;border:0}
.post-leitura .entry :is(blockquote,.wp-block-pullquote) p{margin-bottom:.6em}
.post-leitura .entry :is(blockquote,.wp-block-pullquote) p:last-child{margin-bottom:0}
.post-leitura .entry :is(blockquote,.wp-block-pullquote) cite{display:block;margin-top:.7em;font-family:var(--fonte);font-size:15px;font-style:normal;line-height:1.4;color:#5b6b6c}

/* Caixas: resposta rápida com barra verde; chamada do fim, nota e grupo com fundo no mesmo tom, sem a barra */
.post-leitura .entry .resposta-rapida{margin:0 0 2em;padding:20px 24px 22px;border-left:4px solid #62A570;border-radius:12px;background:#F4FAF5}
.post-leitura .entry .resposta-rapida-t{margin:0 0 6px;font-family:var(--fonte);font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:#144448}
.post-leitura .entry .resposta-rapida p:last-child{margin-bottom:0}
/* :where() deixa a caixa em (0,2,0): o margin-top:0 da nota e o primeiro/último filho do texto ganham dela */
.post-leitura .entry :where(.cta-post,.nota-atualizacao),.post-leitura .entry .wp-block-group:where(.has-background){margin:2em 0;padding:22px 24px;border:0;border-radius:12px;background:#F4FAF5}
.post-leitura .entry :is(.cta-post,.nota-atualizacao,.wp-block-group.has-background) > :last-child{margin-bottom:0}
.post-leitura .entry .cta-post p{margin:0 0 14px}
.post-leitura .entry .cta-post a{display:inline-block;margin:0;padding:12px 22px;border-radius:999px;background:#2FC70D;font-family:var(--fonte);font-size:16px;font-weight:700;line-height:1.2;color:#0d2f31;text-decoration:none;transition:background-color .2s}
.post-leitura .entry .cta-post a:hover{background:#28BB05;color:#0d2f31}
.post-leitura .entry .cta-post a:focus-visible{outline:2px solid #144448;outline-offset:3px}
.post-leitura .entry .nota-atualizacao{margin-top:0;font-size:17px;line-height:1.55}
.post-leitura .entry .nota-atualizacao p{margin-bottom:.6em}
.post-leitura .entry > .wp-block-group:first-child{margin-top:0}
.post-leitura .entry > .wp-block-group:last-child{margin-bottom:0}

/* Tabelas: números alinhados, cabeçalho no tom claro com linha forte e listras leves */
.post-leitura .entry :is(.tabela-rolagem,.wp-block-table){margin:2em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.post-leitura .entry table{width:100%;margin:0;border-collapse:collapse;font-family:var(--fonte);font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums;color:#242424}
.post-leitura .entry :is(.wp-block-table,.tabela-rolagem) :is(thead,tfoot){border:0}
.post-leitura .entry :is(th,td){padding:12px 14px;border:0;text-align:left;vertical-align:top}
.post-leitura .entry th{border-bottom:2px solid #144448;background:#F4FAF5;font-weight:700;color:#144448;vertical-align:bottom}
.post-leitura .entry tbody th{border-bottom:1px solid rgba(20,68,72,.12);vertical-align:top}
.post-leitura .entry td{border-bottom:1px solid rgba(20,68,72,.12)}
.post-leitura .entry tbody tr:nth-child(even){background:rgba(20,68,72,.03)}
.post-leitura .entry table strong{font-weight:700;color:inherit}
.post-leitura .entry .wp-block-table figcaption{margin-top:.8em}

/* Imagens, figuras e vídeos */
.post-leitura .entry img{max-width:100%;height:auto;border-radius:14px}
.post-leitura .entry figure{margin:2em 0}
.post-leitura .entry figure img{display:block;margin-inline:auto}
.post-leitura .entry figcaption{margin:.75em 0 0;font-family:var(--fonte);font-size:15px;line-height:1.45;color:#5b6b6c;text-align:center;text-wrap:balance}
.post-leitura .entry .alignleft{float:left;max-width:50%;margin:.3em 1.5em 1em 0}
.post-leitura .entry .alignright{float:right;max-width:50%;margin:.3em 0 1em 1.5em}
.post-leitura .entry .aligncenter{margin-inline:auto}
.post-leitura .entry .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0d2f31}
.post-leitura .entry .wp-block-embed__wrapper::before{content:none}
.post-leitura .entry .wp-block-embed__wrapper iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:14px}

/* Código e separador */
.post-leitura .entry code{padding:.12em .35em;border-radius:4px;background:rgba(20,68,72,.06);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}
.post-leitura .entry pre{margin:2em 0;padding:16px 18px;overflow-x:auto;border-radius:12px;background:rgba(20,68,72,.06);font-size:15px;line-height:1.55;white-space:pre}
.post-leitura .entry pre code{padding:0;background:none;font-size:inherit}
.post-leitura .entry hr{height:0;margin:2.5em 0;border:0;border-top:1px solid rgba(20,68,72,.15)}

/* Imagem pendente: só o editor logado vê, para lembrar de trocar */
.post-leitura .entry .marcador-editor{margin:2em 0;padding:14px 16px;border:2px dashed #D99A00;border-radius:12px;background:#FFF8E1;font-family:var(--fonte);font-size:15px;font-weight:700;line-height:1.4;color:#7A5200;text-align:center}
.post-leitura .entry .marcador-editor::after{content:"Visível só para editores logados";display:block;margin-top:4px;font-size:13px;font-weight:400;color:#8F6A1A}

/* "Leia também": é interface, então Obliqua Sans (o sumário do celular fica lá em cima, na estrutura) */
.post-leitura .entry .leia-tambem{margin:3em 0 0;padding-top:24px;border-top:1px solid rgba(20,68,72,.15);font-family:var(--fonte)}
.post-leitura .entry .leia-tambem-t{margin:0 0 6px;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:#144448}
.post-leitura .entry .leia-tambem ul{margin:0;padding:0;list-style:none}
.post-leitura .entry .leia-tambem li{margin:0;padding:0;border-bottom:1px solid rgba(20,68,72,.1)}
.post-leitura .entry .leia-tambem a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-radius:0;font-size:18px;font-weight:700;line-height:1.35;color:#1a2b2c;text-decoration:none}
.post-leitura .entry .leia-tambem a::after{content:"→";flex:none;color:#62A570;transition:transform .2s}
.post-leitura .entry .leia-tambem a:hover{background:none;color:#0f6b3e}
.post-leitura .entry .leia-tambem a:hover::after{transform:translateX(3px)}

/* ---------- chamadas de demonstração ---------- */
/* Teste A/B/C: só o título da variante sorteada aparece; sem JS (sem data-sv-var) fica o "dor"; com a variante fixa só existe um */
.post-leitura .cta-v{display:none}
html[data-sv-var="dor"] .post-leitura .cta-v[data-v="dor"],html[data-sv-var="pergunta"] .post-leitura .cta-v[data-v="pergunta"],html[data-sv-var="saida"] .post-leitura .cta-v[data-v="saida"],html:not([data-sv-var]) .post-leitura .cta-v[data-v="dor"],.post-leitura .cta-v:only-child{display:inline}
.post-leitura .cta-demo{display:block;font-family:var(--fonte);color:#fff;text-decoration:none}
.post-leitura .cta-demo-titulo{display:block;font-weight:700;color:#fff}
.post-leitura .cta-demo-texto{display:block;color:#B9D3D4}
.post-leitura .cta-demo-botao{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#2FC70D;font-weight:700;line-height:1.2;color:#0d2f31;white-space:nowrap;transition:background-color .2s}
.post-leitura .cta-demo:hover .cta-demo-botao{background:#28BB05}

/* Meio do texto: o destaque visual, com a tela do sistema à direita */
.post-leitura .entry .cta-demo--blog-meio{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);grid-template-areas:"titulo tela" "texto tela" "botao tela";align-items:center;column-gap:20px;margin:48px 0;padding:30px 0 30px 32px;overflow:hidden;border-radius:16px;background:radial-gradient(70% 90% at 100% 0%,rgba(98,165,112,.24),transparent 70%),linear-gradient(135deg,#144448,#0d2f31);box-shadow:0 24px 48px -28px rgba(12,50,53,.6);transition:transform .3s var(--mola),box-shadow .3s var(--mola)}
.post-leitura .entry .cta-demo--blog-meio:hover{transform:translateY(-2px);box-shadow:0 30px 56px -26px rgba(12,50,53,.7)}
.post-leitura .entry .cta-demo--blog-meio .cta-demo-titulo{grid-area:titulo;align-self:end;font-size:22px;font-weight:700;line-height:1.22;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.post-leitura .entry .cta-demo--blog-meio .cta-demo-texto{grid-area:texto;margin-top:10px;font-size:16px;line-height:1.5}
.post-leitura .entry .cta-demo--blog-meio img{grid-area:tela;align-self:end;justify-self:end;width:calc(100% + 24px);max-width:none;margin:0 -24px -30px 0;border-radius:0;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.post-leitura .entry .cta-demo--blog-meio .cta-demo-botao{grid-area:botao;align-self:start;justify-self:start;margin-top:20px;padding:13px 24px;font-size:16px}
@media (max-width:559px){
  .post-leitura .entry .cta-demo--blog-meio{grid-template-columns:1fr;grid-template-areas:"titulo" "texto" "botao";padding:26px 22px}
  .post-leitura .entry .cta-demo--blog-meio img{display:none}
  .post-leitura .entry .cta-demo--blog-meio .cta-demo-titulo{font-size:21px}
  .post-leitura .entry .cta-demo--blog-meio .cta-demo-botao{justify-self:stretch}
}

/* Lateral: card escuro e compacto, só título e botão */
.post-leitura .cta-demo--blog-lateral{padding:18px;border-radius:14px;background:radial-gradient(90% 70% at 100% 0%,rgba(98,165,112,.22),transparent 70%),#144448;box-shadow:0 16px 32px -20px rgba(12,50,53,.6)}
.post-leitura .cta-demo--blog-lateral .cta-demo-titulo{font-size:17px;line-height:1.3;text-wrap:balance}
.post-leitura .cta-demo--blog-lateral .cta-demo-texto{display:none}
.post-leitura .cta-demo--blog-lateral .cta-demo-botao{display:flex;margin-top:14px;padding:11px 16px;font-size:15px}

/* Barra do celular (caixa definida na estrutura, lá em cima): título em até duas linhas ao lado do botão */
.post-leitura .post-barra-movel .cta-demo-titulo{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:14px;line-height:1.3}
.post-leitura .post-barra-movel .cta-demo-texto{display:none}
.post-leitura .post-barra-movel .cta-demo-botao{flex:none;padding:10px 12px;font-size:13px}
/* Abaixo de 600px ao lado do botão o título teria menos de 120px: vai para cima, na largura toda, e o botão desce */
@media (max-width:599px){
  .post-leitura .post-barra-movel .cta-demo{flex-wrap:wrap;gap:8px;padding:10px 12px 12px}
  .post-leitura .post-barra-movel .cta-demo-titulo{flex:1 1 100%;line-height:1.25}
  .post-leitura .post-barra-movel .cta-demo-botao{flex:1 1 100%}
}
/* Abaixo de 400px a linha tem uns 250px: 13px faz os títulos mais longos (uns 75 caracteres) caberem nas duas linhas */
@media (max-width:399px){
  .post-leitura .post-barra-movel .cta-demo-titulo{font-size:13px}
}

/* Foco das chamadas: anel escuro por fora (contraste com a página clara) e claro por dentro (contraste com o card escuro) */
.post-leitura .cta-demo:focus-visible,.post-leitura .entry .cta-demo--blog-meio:focus-visible,.post-leitura .post-barra-movel .cta-demo:focus-visible{outline:2px solid #144448;outline-offset:2px;box-shadow:0 0 0 2px #fff}

/* ---------- texto no celular: 18px e margem lateral de 20px no total ---------- */
@media (max-width:767px){
  .post-leitura .post-texto{padding-inline:10px}
  .post-leitura .entry{font-size:18px}
  .post-leitura .entry h2{font-size:26px}
  .post-leitura .entry h3{font-size:21px}
  .post-leitura .entry h4{font-size:19px}
  .post-leitura .entry :is(.resposta-rapida,.cta-post,.nota-atualizacao,.wp-block-group.has-background){padding:18px 18px 20px}
  .post-leitura .entry table{font-size:15px}
  .post-leitura .entry :is(th,td){padding:10px 12px}
  .post-leitura .entry :is(.alignleft,.alignright){float:none;width:100%;max-width:100%;margin:2em 0}
  .post-leitura .entry :is(.alignleft,.alignright) img{width:100%}
}

/* Movimento reduzido: o site.css já zera animações com !important, mas este bloco deixa a regra explícita no post
   e tira o deslocamento do hover, que não é animação e continuaria valendo */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .post-leitura .cta-demo,.post-leitura .cta-demo-botao,.post-leitura .entry .cta-post a{transition:none}
  .post-leitura .entry .cta-demo--blog-meio:hover{transform:none}
}