/* =============================================================================
 *  LEITURA DO ARTIGO — barra de progresso + anúncio nativo no meio do texto
 *  (Sérgio/Henrique, 28/07/2026)
 * =============================================================================
 *  Duas peças que só existem na página de artigo:
 *   1. .art-prog  — fio de progresso no topo, mede o CORPO do artigo (não a página)
 *   2. .art-ad    — unidade de produto entre parágrafos, no formato do G1, mas com
 *                   produto NOSSO e escolhido pelo tema do texto (js/artigo-leitura.js)
 * ========================================================================== */

/* ---- 1) BARRA DE PROGRESSO ------------------------------------------------
 * z-index 70: o header do site é 60 e precisa ficar por baixo; o popup de leads
 * e o FAB são 9999 e continuam por cima (a barra não pode cruzar modal).
 * Anima por TRANSFORM, não por width: width refaz layout a cada quadro de
 * rolagem; scaleX sobe pro compositor. Mesma lição que tirou o backdrop-filter
 * do HUD da timeline e do botão de WhatsApp. */
.art-prog{position:fixed;left:0;top:0;width:100%;height:3px;z-index:70;
  pointer-events:none;background:rgba(11,61,44,.07)}
.art-prog span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
  background:linear-gradient(90deg,var(--verde),var(--lima) 62%,var(--lima-soft));
  box-shadow:0 0 10px rgba(169,207,91,.55)}
/* fora do artigo a barra some — fio cheio parado no topo de outra seção é ruído */
.art-prog{opacity:0;transition:opacity .25s var(--ease)}
.art-prog.on{opacity:1}

/* ---- 2) ANÚNCIO NATIVO ---------------------------------------------------
 * Formato do G1: bloco delimitado por fios, largura do texto, claramente
 * separado da leitura. A diferença é que o produto é nosso e casa com o tema,
 * então ele se comporta como recomendação, não como banner alugado.
 * O rótulo fica VISÍVEL de propósito: é peça promocional dentro de conteúdo
 * editorial e o leitor tem que conseguir ver isso num relance. */
.art-ad{max-width:720px;margin:40px auto;padding:20px 0;
  border-top:1px solid rgba(114,159,40,.28);border-bottom:1px solid rgba(114,159,40,.28)}
.art-ad-lb{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#7C9A6B;margin-bottom:14px}
.art-ad-in{display:flex;align-items:center;gap:20px;text-decoration:none;
  border-radius:14px;padding:12px;margin:-12px;
  transition:background .28s var(--ease),transform .28s var(--ease)}
.art-ad-in:hover{background:rgba(114,159,40,.055);transform:translateY(-2px)}
.art-ad-in:focus-visible{outline:2px solid var(--lima);outline-offset:2px}

/* a arte é o MESMO render 3D dos cards de produto (alfa), então funciona sobre
   o papel do artigo sem precisar de segunda arte. */
.art-ad-fig{flex:0 0 auto;width:150px;height:104px;display:grid;place-items:center;
  border-radius:12px;background:linear-gradient(160deg,#F3F8F1,#E8F1E4)}
.art-ad-fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(8,42,30,.22))}

/* a unidade inteira é <a> + <span> (link não pode conter <div>/<p> e continuar
   válido), então os spans precisam ser blocados na mão — só .art-ad-fig e
   .art-ad-tx ganham isso de graça, por serem filhos do flex. */
.art-ad-tx{min-width:0}
.art-ad-h{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:19px;
  line-height:1.2;color:var(--verde);margin:0}
.art-ad-p{display:block;font-family:'Poppins',sans-serif;font-size:14px;line-height:1.55;
  color:#5a7568;margin:7px 0 0}
.art-ad-cta{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--lima-ink)}
.art-ad-cta i{transition:transform .28s var(--ease)}
.art-ad-in:hover .art-ad-cta i{transform:translateX(4px)}

/* Unidade de newsletter (2º bloco dos artigos longos): mesma moldura do produto,
   com o ícone da rede no lugar do render 3D. O azul do LinkedIn aparece só no
   ícone — pintar o bloco inteiro de azul quebraria a paleta do artigo. */
.art-ad-fig.is-icon{background:radial-gradient(120% 120% at 30% 20%,#1d6e4e,#0f4c37);
  border-radius:14px;color:var(--lima-soft);font-size:40px}
.art-ad.is-news .art-ad-fig.is-icon{background:radial-gradient(120% 120% at 30% 20%,#0a66c2,#004182);
  color:#fff}
.art-ad.is-news .art-ad-cta i{font-size:12px}

@media(max-width:600px){
  .art-ad-in{flex-direction:column;align-items:flex-start;gap:14px}
  .art-ad-fig{width:100%;height:150px}
  .art-ad-h{font-size:17.5px}
}

/* Sem animação para quem pediu menos movimento — a barra continua marcando
   posição (é informação), só perde o embelezamento. */
@media(prefers-reduced-motion:reduce){
  .art-prog{transition:none}
  .art-ad-in,.art-ad-cta i{transition:none}
  .art-ad-in:hover{transform:none}
}

/* ---- 3) LINHA DE APOIO DO HERO (data · tempo de leitura) ------------------ */
.art-meta{font-family:'Poppins',sans-serif;font-size:13px;color:rgba(255,255,255,.62);
  letter-spacing:.03em;margin-top:10px}

/* Post sem imagem destacada — 1 em 460 hoje, todos de antes de 2019. Sem isto
   sobraria a moldura com sombra e sem foto dentro. :has() e não :empty porque a
   casca do WordPress deixa quebra de linha em volta do slot, e espaço em branco
   já não conta como vazio. */
.art-capa:not(:has(img)){display:none}

/* ---- 4) CORPO VINDO DO WORDPRESS ----------------------------------------
 * O artigo de exemplo (site/artigo.html) traz estilo inline em cada parágrafo —
 * inline sempre ganha, então estas regras NÃO o alteram. Elas existem para o
 * conteúdo real, que chega cru do editor do WordPress: <p>, <h2>, <ul>, <figure>,
 * <blockquote>, <table>. Sem isso o texto herda o corpo 16px do navegador e o
 * artigo publicado fica com cara de rascunho ao lado do resto do site.
 *
 * Escopo em .art-wp (classe que o template do plugin põe no wrapper) e não em
 * [data-artigo-corpo]: o mesmo atributo existe no arquivo estático, e reaproveitar
 * o seletor faria as duas versões brigarem a cada ajuste. */
.art-wp{max-width:720px;margin:48px auto 0;font-family:'Poppins',sans-serif;
  color:#2c4a3c;line-height:1.85;font-size:17px}
.art-wp > *:first-child{margin-top:0}
.art-wp p{margin:0 0 20px}
.art-wp a{color:var(--lima-ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.art-wp a:hover{color:var(--verde)}
.art-wp strong,.art-wp b{color:var(--verde);font-weight:600}

/* Título de seção com o mesmo traço lima das <h2 class="sec"> do site. O ::before
   é posicionado no fluxo do próprio h2 (position:relative aqui embaixo) — em vez
   de repetir o <span> que o HTML estático usa, que o editor do WP não emite. */
.art-wp h2,.art-wp h3,.art-wp h4{font-family:'Montserrat',sans-serif;color:var(--verde);
  line-height:1.25;position:relative}
.art-wp h2{font-size:28px;font-weight:800;margin:44px 0 12px;padding-top:18px}
.art-wp h2::before{content:"";position:absolute;top:0;left:0;width:54px;height:4px;
  border-radius:3px;background:var(--lima)}
.art-wp h3{font-size:21px;font-weight:700;margin:34px 0 10px}
.art-wp h4{font-size:18px;font-weight:700;margin:28px 0 8px}

.art-wp ul,.art-wp ol{margin:0 0 22px;padding-left:22px}
.art-wp li{margin:0 0 9px}
.art-wp ul li::marker{color:var(--lima-ink)}

/* Citação: fio à esquerda em vez de aspas gigantes — o site inteiro marca hierarquia
   com barra lima, e aspas decorativas competem com o traço dos <h2>. */
.art-wp blockquote{margin:30px 0;padding:4px 0 4px 22px;border-left:4px solid var(--lima);
  font-size:19px;line-height:1.7;color:var(--verde);font-style:italic}
.art-wp blockquote p:last-child{margin-bottom:0}

/* Imagem sangra um pouco além do texto (720 → 860) como a foto de capa, mas nunca
   além do container; o WP manda width/height cravados no <img> e por isso o
   height:auto é obrigatório, senão a foto distorce em telas estreitas. */
.art-wp figure,.art-wp .wp-block-image{margin:32px 0}
.art-wp img{display:block;max-width:100%;height:auto;border-radius:14px;
  box-shadow:0 14px 40px rgba(8,42,30,.12)}
.art-wp figure.alignwide,.art-wp figure.alignfull{max-width:860px;margin-left:auto;margin-right:auto}
.art-wp figcaption,.art-wp .wp-caption-text{font-size:13.5px;color:#6a8478;margin-top:9px;
  text-align:center;font-style:italic}
.art-wp .aligncenter{margin-left:auto;margin-right:auto}

/* Vídeo/mapa embutido: proporção 16:9 sem depender do width/height do iframe. */
.art-wp iframe,.art-wp video{display:block;width:100%;aspect-ratio:16/9;height:auto;
  border:0;border-radius:14px;margin:30px 0}

.art-wp table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.art-wp th,.art-wp td{border:1px solid rgba(11,61,44,.14);padding:10px 12px;text-align:left}
.art-wp th{background:rgba(114,159,40,.09);font-family:'Montserrat',sans-serif;
  font-weight:700;color:var(--verde)}

.art-wp hr{border:0;height:1px;background:rgba(11,61,44,.12);margin:38px 0}
.art-wp code{background:rgba(11,61,44,.06);padding:2px 6px;border-radius:5px;font-size:15px}

@media(max-width:600px){
  .art-wp{font-size:16.5px;line-height:1.8}
  .art-wp h2{font-size:24px}
  .art-wp h3{font-size:19px}
  .art-wp blockquote{font-size:17.5px}
}