/* ============================================================
   BLOG WO Insights no site v2 (13/10). Carregado DEPOIS do wf-modelos.css e do hf-modelos.css:
   tokens, menu, rodapé e o CTA do WOBI (#cta-meio) vêm deles. O HTML é gerado por
   for-schools/Artigos BLOG/gerar-blog.py (não editar à mão); este CSS é escrito à mão.
   Sem sobretítulos: rótulos ("Resposta curta", "Neste artigo") em caixa normal, como título da caixa.
   ============================================================ */
.pular{position:absolute;left:12px;top:-80px;z-index:40;padding:12px 18px;border-radius:12px;background:#fff;color:var(--ink);
  font:600 15px/1 var(--fb);text-decoration:none;box-shadow:0 8px 24px rgba(20,24,69,.18)}
.pular:focus{top:12px}
.pg-blog main a:focus-visible{outline:2px solid var(--wo-blue);outline-offset:3px;border-radius:6px}

/* ---------- índice ---------- */
.pg-blog .intro{padding-block:clamp(56px,7vw,104px) clamp(32px,4vw,48px)}
.intro h1{font:600 clamp(44px,6vw,80px)/1 var(--fd);letter-spacing:-.035em}
.intro__desc{margin-top:18px;max-width:58ch;font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--mute)}
.pg-blog .lista{padding-block:0}

/* ---------- cards ---------- */
.grade{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px)}
@media (min-width:640px){.grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  color:var(--ink);text-decoration:none;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .2s,translate .2s}
@media (hover:hover){.card:hover{border-color:color-mix(in srgb,var(--wo-blue) 35%,var(--line));box-shadow:0 18px 36px -24px rgba(20,24,69,.35);translate:0 -2px}}
.card__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sky)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.card:hover .card__img img{transform:scale(1.03)}}
.card__selo{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:99px;background:rgba(253,250,244,.92);color:var(--ink);
  font:600 13px/1 var(--fb);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card__corpo{display:flex;flex-direction:column;flex:1;padding:22px 24px}
.card__titulo{font:600 clamp(19px,1.6vw,22px)/1.2 var(--fd);letter-spacing:-.015em}
.card__resumo{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--mute);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px;font-size:14px;color:var(--mute)}
.card__pe svg{width:20px;height:20px;flex:none;color:var(--wo-blue);transition:translate .2s}
@media (hover:hover){.card:hover .card__pe svg{translate:3px 0}}

/* ---------- artigo ---------- */
.artigo__topo{padding-top:clamp(48px,6vw,88px);text-align:center}
.artigo__topo .wrap{max-width:900px}
.migalhas{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 10px;font-size:14.5px;color:var(--mute)}
.migalhas a{text-decoration:none}
@media (hover:hover){.migalhas a:hover{color:var(--wo-blue);text-decoration:underline;text-underline-offset:3px}}
.artigo__titulo{margin-top:20px;font:600 clamp(34px,4.6vw,58px)/1.04 var(--fd);letter-spacing:-.03em}
.artigo__sub{margin:20px auto 0;max-width:58ch;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--mute)}
.artigo__meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin-top:22px;font-size:14.5px;color:var(--mute)}
.artigo__meta > * + *::before{content:"·";margin-right:10px}
.artigo__meta > :first-child{font-weight:600;color:var(--ink)}

.artigo__capa{max-width:1120px;margin:clamp(36px,4vw,56px) auto 0;padding-inline:var(--pad)}
.artigo__capa img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--r) + 6px);background:var(--sky)}

.artigo__corpo{max-width:calc(700px + 2 * var(--pad));margin:clamp(40px,5vw,64px) auto 0;padding-inline:var(--pad);
  font-size:clamp(17px,1.3vw,18.5px);line-height:1.72;color:#2E3152}
.artigo__corpo > *{margin:0}
.artigo__corpo > * + *{margin-top:1.15em}
.artigo__corpo > * + :is(h2,h3){margin-top:2em}
.artigo__corpo > :is(h2,h3) + *{margin-top:.6em}
.artigo__corpo h2{font:600 clamp(25px,2.4vw,31px)/1.15 var(--fd);letter-spacing:-.02em;color:var(--ink)}
.artigo__corpo h3{font:600 clamp(19px,1.6vw,21px)/1.3 var(--fd);letter-spacing:-.01em;color:var(--ink)}
.artigo__corpo :is(ul,ol){padding-left:1.3em}
.artigo__corpo li + li{margin-top:.45em}
.artigo__corpo li::marker{color:var(--wo-blue)}
.artigo__corpo a{color:var(--wo-blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.artigo__corpo strong{font-weight:600;color:var(--ink)}
.artigo__corpo blockquote{padding-block:24px;border-block:1px solid var(--line);
  font:500 clamp(21px,2vw,25px)/1.4 var(--fd);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.artigo__corpo :is(h2,section)[id]{scroll-margin-top:96px}  /* menu fixo de 68 px + folga */

/* resposta curta e sumário: as duas primeiras caixas */
.resumo{padding:24px 28px;border-radius:var(--r);background:var(--sky)}
.resumo > *{margin:0}
.resumo > * + *{margin-top:.8em}
.resumo__rotulo{font:600 16px/1.2 var(--fd);color:var(--wo-blue)}
.resumo > .resumo__rotulo + p{margin-top:.5em;color:var(--ink)}
.sumario{padding:22px 28px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.sumario__rotulo{font:600 16px/1.2 var(--fd);color:var(--ink)}
.artigo__corpo .sumario ol{margin:.7em 0 0;padding-left:1.4em;font-size:16px;line-height:1.5}
.artigo__corpo .sumario li + li{margin-top:.4em}
.artigo__corpo .sumario li::marker{color:var(--mute)}
.artigo__corpo .sumario a{color:inherit;text-decoration:none}
@media (hover:hover){.artigo__corpo .sumario a:hover{color:var(--wo-blue);text-decoration:underline}}

/* "Na prática" (branca) e "Como a WO trabalha isso" (azul profundo, a cor do rodapé) */
.artigo__corpo > * + :is(.nota,.proxima,.faq){margin-top:2.2em}
.artigo__corpo .nota{padding:28px 32px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.nota > *{margin:0}
.nota > * + *{margin-top:.9em}
.artigo__corpo .nota h2{font-size:clamp(20px,1.8vw,23px);line-height:1.2;letter-spacing:-.015em}
.nota > h2 + *{margin-top:.7em}
.artigo__corpo .nota h3{font-size:18px}
.nota > * + h3{margin-top:1.4em}
.nota > h3 + *{margin-top:.5em}
.artigo__corpo .nota--wo{border-color:transparent;background:var(--wo-blue-deep);color:rgba(255,255,255,.86)}
.artigo__corpo .nota--wo :is(h2,h3,strong,a){color:#fff}
.artigo__corpo .nota--wo li::marker{color:#9FB0FF}

.artigo__corpo .proxima{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:22px 26px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .2s}
@media (hover:hover){.artigo__corpo .proxima:hover{border-color:var(--wo-blue)}}
.proxima__rotulo{flex:1 0 100%;font-size:14.5px;color:var(--mute)}
.proxima__titulo{flex:1;font:600 clamp(18px,1.6vw,21px)/1.3 var(--fd);letter-spacing:-.01em;text-wrap:balance}
.proxima svg{width:22px;height:22px;flex:none;color:var(--wo-blue)}

/* perguntas frequentes do artigo: lista simples (o .faq do site é a grade de duas colunas da home) */
.artigo__corpo .faq{display:block;padding:0}
.faq__item{padding-block:20px;border-bottom:1px solid var(--line)}
.faq > h2 + .faq__item{margin-top:14px;border-top:1px solid var(--line)}
.faq__item > *{margin:0}
.faq__item > * + *{margin-top:.5em}
.artigo__corpo .faq__item h3{font-size:clamp(18px,1.5vw,20px);line-height:1.35}

/* CTA do WOBI (= 07 da home) e "Leia também" */
.pg-blog #cta-meio:not(:last-child){padding-bottom:0}
.pg-blog #cta-meio:last-child{padding-bottom:clamp(24px,3vw,40px)}
.pg-blog .relacionados{padding-block:clamp(64px,7vw,104px) clamp(24px,3vw,40px)}
.relacionados h2{font:600 clamp(28px,3vw,40px)/1.1 var(--fd);letter-spacing:-.025em}
.relacionados .grade{margin-top:clamp(24px,3vw,36px)}

@media (max-width:640px){
  .artigo__topo{text-align:left}
  .migalhas,.artigo__meta{justify-content:flex-start}
  .artigo__meta time{order:3;flex-basis:100%}  /* "Edição 13 · 7 min de leitura" e a data embaixo: o "·" não começa linha */
  .artigo__meta time::before{content:none}
  .artigo__sub{margin-inline:0}
  .resumo,.sumario,.artigo__corpo .nota,.artigo__corpo .proxima{padding:20px}
}

/* ---------- entrada dos cards (sem JS, sem IntersectionObserver ou com reduced-motion, já estão no lugar) ---------- */
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  .card,.card *{transition:none!important}
  .card:hover{translate:none}
  .card:hover .card__img img{transform:none}
}
@media print{.js .rv{opacity:1;transform:none}}