/* ---------------------------------------------------------------------------
   blog.css — folha única do blog do aprumo (/blog/*)
   ---------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE
   O site estiliza por atributo style="" inline (175 atributos, ~18 KB por
   página). Isso funciona em 16 landing pages distintas. Em 50 posts visualmente
   idênticos seria 18 KB não-cacheável por post — custo direto de LCP, e o
   SEO.md exige Lighthouse >= 90. Aqui o CSS é baixado UMA vez e vale para todos.

   Paleta e fontes são as mesmas do site (extraídas de aprovacao-de-compras.html):
     texto #1A1C22 · corpo #33302A · secundário #55524C · suave #6F695E/#8B857A
     fundo #FAF6EF · cartão #FFFFFF · preenchimento #F3EEE3
     borda #E7E0D3 / #D6D0C4 · verde #0E8A5A (hover #0B6E48) · rodapé #131418
     títulos: Poppins · corpo: Hanken Grotesk

   CACHE: versionado pela query ?v= na tag <link> dos posts. Ao alterar este
   arquivo, bump o ?v= no _template-post.html e nos posts publicados.
--------------------------------------------------------------------------- */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#FAF6EF;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-family:'Hanken Grotesk',sans-serif;
  color:#1A1C22;
  overflow-x:hidden;
}
::selection{background:#0E8A5A;color:#fff}
a{color:inherit}
img{max-width:100%}

/* ============================ HEADER (igual ao site) ====================== */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(251,252,253,0.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid #E7E0D3;
}
.hdr-in{
  max-width:1080px;margin:0 auto;
  padding:14px clamp(20px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hdr-logo{display:inline-flex;align-items:center;text-decoration:none}
.hdr-logo img{display:block;height:26px;width:auto}
.hdr-nav{display:flex;align-items:center;gap:clamp(14px,3vw,22px)}
.hdr-link{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;
  color:#1A1C22;text-decoration:none;white-space:nowrap;
}
.btn-primary{
  background:#0E8A5A;color:#fff;border:none;border-radius:10px;
  padding:11px 18px;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:14px;text-decoration:none;white-space:nowrap;
  transition:background .15s ease;
}
.btn-primary:hover{background:#0B6E48}

.menu{position:relative}
.menu summary{
  list-style:none;cursor:pointer;font-family:'Poppins',sans-serif;
  font-weight:700;font-size:14px;color:#1A1C22;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.menu summary::-webkit-details-marker{display:none}
.menu .chev{transition:transform .15s ease;font-size:11px;color:#8B857A}
.menu[open] .chev{transform:rotate(180deg)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 12px);
  background:#FFFFFF;border:1px solid #E7E0D3;border-radius:12px;
  padding:8px;min-width:240px;display:flex;flex-direction:column;gap:2px;z-index:60;
}
.menu-panel a{
  font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:#1A1C22;
  text-decoration:none;padding:10px 12px;border-radius:8px;
}
.menu-panel a:hover{background:#F3EEE3;color:#0E8A5A}
@media (max-width:680px){.menu{display:none}}

/* ============================== SHELL / WRAPPER ========================== */
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
/* max-width inclui o padding (box-sizing:border-box): 840 - 56 = ~784px de
   texto útil. A ~19.5px isso dá ~78 caracteres por linha — dentro da faixa
   confortável de leitura (60–80) sem deixar a página com cara de vazia. */
.post{max-width:840px;margin:0 auto;padding:0 clamp(20px,4vw,28px)}

/* ============================== BREADCRUMB =============================== */
.crumb{
  font-size:14.5px;color:#6F695E;
  padding:22px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.crumb a{color:#6F695E;text-decoration:none}
.crumb a:hover{color:#0E8A5A}
.crumb span[aria-current]{color:#1A1C22}
.crumb .sep{color:#C9C3B7}

/* ============================== CABEÇALHO DO POST ======================== */
.eyebrow{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#0E8A5A;font-family:'Poppins',sans-serif;font-weight:700;
  margin:26px 0 12px;
}
h1{
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:clamp(30px,5vw,44px);line-height:1.14;letter-spacing:-.015em;
  margin:0 0 16px;color:#1A1C22;
}
.lede{
  font-size:clamp(18.5px,2.4vw,21.5px);line-height:1.65;color:#55524C;margin:0 0 26px;
}
.byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:16px 0;border-top:1px solid #E7E0D3;border-bottom:1px solid #E7E0D3;
  font-size:15px;color:#6F695E;margin-bottom:34px;
}
.byline a{color:#1A1C22;text-decoration:none;font-weight:700}
.byline a:hover{color:#0E8A5A}
.byline .dot{color:#C9C3B7}

/* ============================== TIPOGRAFIA DO CORPO ====================== */
.post h2{
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:clamp(25px,3.4vw,32px);line-height:1.24;letter-spacing:-.01em;
  margin:52px 0 16px;color:#1A1C22;
  scroll-margin-top:84px; /* compensa o header sticky nos links do sumário */
}
.post h3{
  font-family:'Poppins',sans-serif;font-weight:600;
  font-size:clamp(19.5px,2.6vw,22.5px);line-height:1.35;
  margin:34px 0 10px;color:#1A1C22;scroll-margin-top:84px;
}
.post p{font-size:19.5px;line-height:1.72;color:#33302A;margin:0 0 20px}
.post ul,.post ol{font-size:19.5px;line-height:1.72;color:#33302A;padding-left:22px;margin:0 0 22px}
.post li{margin-bottom:10px}
.post li::marker{color:#8B857A}
.post strong{color:#1A1C22;font-weight:700}
.post a{color:#0E8A5A;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post a:hover{color:#0B6E48}
.post hr{border:none;border-top:1px solid #E7E0D3;margin:44px 0}

/* IMPORTANTE — a regra `.post a` acima tem especificidade (0,1,1) e vence
   qualquer componente definido com uma classe só, como `.btn-cta` (0,1,0).
   Sem estes overrides o texto do botão de CTA fica VERDE SOBRE VERDE e o
   botão aparece vazio: conversão perdida sem nenhum erro visível no console.
   Só os links de prosa devem herdar o estilo de link. */
.post a.btn-cta{color:#fff;text-decoration:none}
.post a.btn-cta:hover{color:#fff}
.post a.btn-primary{color:#fff;text-decoration:none}
.post a.card,.post a.tile{color:inherit;text-decoration:none}
.post .crumb a{color:#6F695E;text-decoration:none}
.post .crumb a:hover{color:#0E8A5A}
.post .byline a{color:#1A1C22;text-decoration:none;font-weight:700}
.post .byline a:hover{color:#0E8A5A}

/* ============================== CAPA DO POST ============================= */
/* O aspect-ratio reserva a altura exata ANTES de existir imagem. Quando o
   <img> definitivo entrar no lugar do placeholder, o layout não se move —
   zero CLS, que é métrica de Core Web Vitals. Não remover o aspect-ratio. */
.post-cover{
  margin:0 0 38px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#F1EADE;border:1px dashed #D6D0C4;
  display:flex;align-items:center;justify-content:center;
}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* A borda tracejada é o sinal de "espaço reservado". Com imagem de verdade
   dentro, vira borda sólida — sem precisar trocar classe no HTML. */
.post-cover:has(img),.tile-thumb:has(img){border-style:solid;border-color:#E7E0D3}
.post-cover .ph{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:#A8A196;
}

/* ============================== TAGS ===================================== */
/* Rótulos, NÃO links: páginas de arquivo por tag seriam conteúdo raso e
   voltariam a disputar termo com as páginas de caso de uso. Ver PLANO. */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.tag{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;
  color:#0E8A5A;background:#EAF3EE;border:1px solid #D5E7DD;
  padding:5px 12px;border-radius:999px;white-space:nowrap;
}

/* ============================== TILES DE POST ============================ */
/* auto-FILL, não auto-fit: com auto-fit as trilhas vazias colapsam e um post
   sozinho esticaria pela largura inteira, quebrando a grade de 2 colunas.
   auto-fill preserva as trilhas, então o tile ocupa sempre metade da linha. */
.post-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));
  gap:34px 40px;
}
.tile{
  display:grid;grid-template-columns:190px 1fr;gap:20px;
  align-items:start;text-decoration:none;
}
.tile-thumb{
  position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:#F1EADE;border:1px dashed #D6D0C4;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease;
}
.tile-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tile-thumb .ph{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#A8A196;
}
/* Barra de acento no topo da miniatura — mesma ideia do modelo de referência,
   com o verde da marca. Fica sobre a imagem quando ela existir. */
.tile-thumb::after{
  content:"";position:absolute;top:0;left:14px;width:52px;height:5px;
  background:#0E8A5A;border-radius:0 0 4px 4px;
}
.tile:hover .tile-thumb{border-color:#0E8A5A}
.tile-tag{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;
  color:#0E8A5A;margin-bottom:8px;
}
.tile-title{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;
  line-height:1.38;color:#1A1C22;margin-bottom:10px;
}
.tile:hover .tile-title{color:#0E8A5A}
.tile-meta{font-size:14.5px;color:#8B857A}
.tile-meta .sep{margin:0 6px}

@media (max-width:520px){
  .tile{grid-template-columns:1fr;gap:14px}
  .tile-thumb{aspect-ratio:16/9}
}

/* ============================== CARROSSEL POR TAG ======================== */
/* Grade de 2 linhas que FLUI EM COLUNAS: 4 tiles visíveis (2x2) e o resto
   alcançável rolando na horizontal. Assim não é preciso fatiar os posts em
   "páginas" na mão — basta acrescentar mais um <a class="tile"> ao final do
   grupo e o carrossel se ajusta sozinho. Com 50 posts e edição manual, isso
   é o que impede erro de paginação.
   Todos os tiles ficam no DOM e são rastreáveis: nada é escondido do Google. */
.carousel{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);
  grid-auto-columns:calc(50% - 20px);
  gap:34px 40px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  align-content:start;
  padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel > .tile{scroll-snap-align:start}

.car-nav{display:flex;gap:8px;margin-left:auto}
.car-btn{
  width:34px;height:34px;border-radius:999px;
  border:1px solid #D6D0C4;background:#FFFFFF;color:#1A1C22;
  font-size:15px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s ease,color .15s ease;
}
.car-btn:hover:not(:disabled){border-color:#0E8A5A;color:#0E8A5A}
.car-btn:disabled{opacity:.35;cursor:default}

@media (max-width:860px){ .carousel{grid-auto-columns:100%} }
@media (max-width:520px){ .carousel{grid-template-rows:auto;grid-auto-columns:88%} }

/* ===================== FAIXA "POR CASO DE USO" (índice) ================== */
/* Com o agrupamento por tag, os links do hub para as páginas de caso de uso
   sairiam do índice. Esta faixa os mantém — é por eles que a autoridade do
   blog chega nas páginas que convertem. Não remover. */
.uc-strip{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:26px 0 6px;
}
.uc-chip{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;
  color:#1A1C22;background:#FFFFFF;border:1px solid #E7E0D3;
  padding:9px 16px;border-radius:999px;text-decoration:none;
  transition:border-color .15s ease,color .15s ease;
}
.uc-chip:hover{border-color:#0E8A5A;color:#0E8A5A}
.uc-strip-label{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#8B857A;font-family:'Poppins',sans-serif;font-weight:700;
  width:100%;margin-bottom:-2px;
}

/* ============================== SUMÁRIO ================================== */
.toc{
  background:#FFFFFF;border:1px solid #E7E0D3;border-radius:14px;
  padding:22px 24px;margin:0 0 40px;
}
.toc-title{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:#6F695E;margin-bottom:14px;
}
.toc ol{margin:0;padding-left:20px;font-size:17.5px;line-height:1.6}
.toc li{margin-bottom:9px}
.toc a{color:#1A1C22;text-decoration:none}
.toc a:hover{color:#0E8A5A;text-decoration:underline;text-underline-offset:3px}

/* ============================== CALLOUT ================================== */
.callout{
  background:#F3EEE3;border-left:3px solid #0E8A5A;border-radius:0 12px 12px 0;
  padding:20px 24px;margin:30px 0;
}
.callout p{margin:0;font-size:18.5px;color:#33302A}
.callout p + p{margin-top:12px}

/* ============================== ARTEFATO ================================= */
.artifact{
  background:#FFFFFF;border:1px solid #D6D0C4;border-radius:16px;
  padding:26px clamp(20px,4vw,30px);margin:34px 0;
}
.artifact-tag{
  display:inline-block;background:#F3EEE3;color:#0E8A5A;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;margin-bottom:14px;
}
.artifact h3{margin-top:0}
.artifact p:last-child,.artifact ul:last-child,.artifact ol:last-child{margin-bottom:0}

/* ============================== TABELA =================================== */
.tbl-wrap{overflow-x:auto;margin:26px 0;border:1px solid #E7E0D3;border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:15.5px}
caption{
  text-align:left;font-size:13.5px;color:#6F695E;padding:14px 14px 0;caption-side:top;
}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #E7E0D3;vertical-align:top}
/* Sem nowrap no cabeçalho: com 7 colunas ele forçava a tabela para além da
   coluna de texto e cortava a última no desktop. Deixando o header quebrar,
   a tabela cabe; o overflow-x do .tbl-wrap segue valendo no mobile. */
th{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;
  line-height:1.3;color:#1A1C22;background:#FAF6EF;
}
tr:last-child td{border-bottom:none}

/* ============================== CTAs ===================================== */
/* 1. Contextual, após a introdução — leva ao caso de uso, não ao signup. */
.cta-soft{
  background:#FFFFFF;border:1px solid #E7E0D3;border-radius:14px;
  padding:20px 24px;margin:30px 0;font-size:18px;line-height:1.6;color:#55524C;
}
.cta-soft a{font-weight:700}

/* CASO DE USO RELACIONADO — o link do post para a página que converte.
   Vai no primeiro terço do texto de propósito: o primeiro link para uma URL
   é o de maior peso, e é por ele que a autoridade do post chega na página
   de caso de uso. Obrigatório em todo post. */
.uc-related{
  background:#FFFFFF;border:1px solid #E7E0D3;border-left:3px solid #0E8A5A;
  border-radius:0 14px 14px 0;padding:20px 24px;margin:34px 0;
}
.uc-related-label{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#8B857A;margin-bottom:10px;
}
.post .uc-related a{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:19px;
  color:#0E8A5A;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
}
.post .uc-related a:hover{color:#0B6E48;text-decoration:underline;text-underline-offset:4px}
.post .uc-related p{font-size:16.5px;color:#55524C;margin:9px 0 0;line-height:1.6}

/* 2 e 3. Conversão — botão verde para o signup. */
.cta-box{
  background:#FFFFFF;border:1px solid #D6D0C4;border-radius:18px;
  padding:clamp(26px,4vw,34px);margin:40px 0;text-align:center;
}
.cta-box h3{
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:clamp(20px,2.8vw,24px);line-height:1.3;margin:0 0 10px;color:#1A1C22;
}
.cta-box p{font-size:18px;color:#55524C;margin:0 0 20px;line-height:1.6}
.btn-cta{
  display:inline-block;background:#0E8A5A;color:#fff;border-radius:11px;
  padding:15px 30px;font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;
  text-decoration:none;transition:background .15s ease;
}
.btn-cta:hover{background:#0B6E48}
.cta-fine{font-size:13.5px;color:#8B857A;margin:14px 0 0}

/* ============================== FAQ ====================================== */
.faq{margin:44px 0 0}
.faq-item{border-top:1px solid #E7E0D3;padding:22px 0}
.faq-item:last-child{border-bottom:1px solid #E7E0D3}
.faq-item h3{
  margin:0 0 10px;font-size:19.5px;font-family:'Poppins',sans-serif;font-weight:600;
}
.faq-item p{margin:0;font-size:18px;color:#33302A;line-height:1.7}

/* ============================== AUTOR ==================================== */
.author-card{
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  background:#FFFFFF;border:1px solid #E7E0D3;border-radius:16px;
  padding:24px;margin:46px 0 0;
}
.author-card .a-name{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:17px;margin:0 0 6px;
}
.author-card .a-name a{color:#1A1C22;text-decoration:none}
.author-card .a-name a:hover{color:#0E8A5A}
.author-card p{font-size:16.5px;color:#55524C;line-height:1.65;margin:0}
.author-card .a-link{font-size:14px;margin-top:10px}
.author-card .a-link a{color:#0E8A5A}

/* ============================== RELACIONADOS / CARDS ===================== */
.sec-title{
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:clamp(19px,2.6vw,22px);margin:0 0 18px;color:#1A1C22;
}
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;
}
.card{
  display:block;background:#FFFFFF;border:1px solid #E7E0D3;border-radius:14px;
  padding:20px 22px;text-decoration:none;transition:border-color .15s ease;
}
.card:hover{border-color:#0E8A5A}
.card .c-tag{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#0E8A5A;
  font-family:'Poppins',sans-serif;font-weight:700;margin-bottom:8px;
}
.card .c-title{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:16.5px;
  line-height:1.4;color:#1A1C22;margin-bottom:8px;
}
.card .c-desc{font-size:15.5px;color:#55524C;line-height:1.55}
.related{margin:52px 0 0;padding-top:44px;border-top:1px solid #E7E0D3}

/* ============================== ÍNDICE /blog ============================= */
.blog-hero{padding:34px 0 12px;max-width:720px}
.blog-hero h1{margin-bottom:14px}
.blog-hero p{font-size:clamp(17px,2.2vw,19.5px);line-height:1.65;color:#55524C;margin:0}
.line-block{margin:48px 0 0}
.line-head{
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid #E7E0D3;
}
.line-head h2{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:22px;margin:0;color:#1A1C22;
}
.line-head .l-desc{font-size:15px;color:#6F695E}
.line-head .l-desc a{color:#0E8A5A;text-decoration:none}
.line-head .l-desc a:hover{text-decoration:underline;text-underline-offset:3px}
.soon{
  font-size:14.5px;color:#8B857A;background:#F3EEE3;border-radius:12px;
  padding:16px 20px;
}

/* ============================== RODAPÉ (igual ao site) =================== */
.ftr{background:#131418;padding:clamp(44px,6vw,68px) clamp(20px,5vw,40px) 40px;margin-top:70px}
.ftr-in{
  max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;
  justify-content:space-between;align-items:flex-start;
}
.ftr-logo{display:inline-flex;align-items:center;text-decoration:none}
.ftr-logo img{display:block;height:26px;width:auto}
.ftr-tag{font-size:14px;color:#9A948A;margin-top:14px;max-width:24em}
.ftr-cols{display:flex;gap:48px;flex-wrap:wrap}
.ftr-h{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#6F695E;margin-bottom:12px;
}
.ftr-col a{display:block;font-size:14px;color:#D6D0C4;text-decoration:none;margin-bottom:8px}
.ftr-col a:last-child{margin-bottom:0}
.ftr-col a:hover{color:#fff}
.ftr-base{
  max-width:1080px;margin:36px auto 0;border-top:1px solid #242320;
  padding-top:20px;font-size:12.5px;color:#6F695E;
}

/* ============================== RESPONSIVO =============================== */
@media (max-width:640px){
  .btn-cta{display:block;width:100%;text-align:center}
  .byline{gap:6px}
  .author-card{padding:20px}
}