/* Artigo do blog RHLIT. Tokens do rhlit.com (--abyss, --cyan, --chrome...), definidos na pagina.
   Formatos inspirados em artigo de referencia (sumario fixo, titulo com marca lateral, lista em
   cartoes, numeracao em circulo, destaque em degrade, CTA final, relacionados). Cores e
   tipografia sao as nossas. */

.art-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:20;background:transparent;pointer-events:none}
.art-progress::after{content:"";display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-hot));transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .art-progress::after{animation:art-prog linear both;animation-timeline:scroll(root)}
  @keyframes art-prog{to{transform:scaleX(1)}}
}

.art-top{padding:clamp(36px,5vw,64px) 0 clamp(30px,4vw,48px);border-bottom:1px solid var(--line);
  background:radial-gradient(110% 90% at 85% 0%,rgba(20,184,232,.16),transparent 62%)}
.art-top h1{max-width:20ch;font-size:clamp(2.1rem,4.6vw,3.5rem);letter-spacing:-.045em;line-height:1.04}
.art-top .lede{max-width:62ch}
.art-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:1.6rem 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--chrome-dim);text-transform:uppercase}
.art-meta li{display:inline-flex;align-items:center;gap:.5rem}
.art-meta li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan)}

.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(40px,5vw,84px);
  max-width:var(--maxw);margin:0 auto;padding:clamp(32px,4vw,52px) var(--pad) clamp(56px,7vw,96px)}
.art-body{min-width:0;max-width:700px;font-size:1.06rem;line-height:1.78;color:#B4C3D3}
.art-body>*{max-width:100%}
.art-body p{margin:0 0 1.25rem}
.art-body strong{color:var(--white);font-weight:600}
.art-body a{color:var(--cyan-hot);text-underline-offset:3px;text-decoration-thickness:1px}
.art-body a:hover{color:var(--white)}

/* resposta curta: o trecho que o leitor com pressa e o Google leem primeiro */
.art-resposta{margin:0 0 2.4rem;padding:1.3rem 1.5rem 1.2rem;border:1px solid rgba(20,184,232,.28);
  border-radius:12px;background:linear-gradient(135deg,rgba(11,36,71,.75),rgba(5,11,22,.4))}
.art-resposta b{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:.55rem;font-weight:500}
.art-resposta p{margin:0;color:var(--white);font-size:1.1rem;line-height:1.65}

/* titulo de secao com marca lateral */
.art-body h2{position:relative;margin:3.1rem 0 1.1rem;padding-left:1.1rem;max-width:none;
  font-size:clamp(1.5rem,2.4vw,2rem);scroll-margin-top:96px}
.art-body h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;border-radius:4px;background:var(--cyan)}
.art-body h3{margin:2rem 0 .6rem;font-size:1.2rem;color:var(--white);scroll-margin-top:96px}

/* listas em cartoes */
.art-body ul,.art-body ol{display:grid;gap:.7rem;list-style:none;margin:1.5rem 0 2rem;padding:0}
.art-body li{position:relative;padding:.85rem 1rem .85rem 3rem;border:1px solid rgba(200,212,224,.12);
  border-radius:10px;background:rgba(11,36,71,.34)}
.art-body ul li::before{content:"";position:absolute;left:1.15rem;top:1.4rem;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.art-body ol{counter-reset:passo}
.art-body ol li{counter-increment:passo}
.art-body ol li::before{content:counter(passo);position:absolute;left:.8rem;top:.85rem;width:1.65rem;height:1.65rem;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(20,184,232,.55);background:rgba(20,184,232,.14);
  font-family:var(--display);font-weight:800;font-size:.78rem;color:var(--cyan-hot)}

/* dado medido: so numero com fonte */
.art-dado{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center;margin:2rem 0;
  padding:1.2rem 1.4rem;border:1px solid var(--line);border-radius:12px;background:#081326}
.art-dado .valor{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 112;
  font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.04em;color:var(--cyan-hot);line-height:1}
.art-dado p{margin:0;font-size:.98rem;line-height:1.55}
.art-dado small{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--chrome-dim)}

/* destaque em degrade */
.art-destaque{margin:2.6rem 0;padding:.3rem 1.6rem .4rem;border:1px solid rgba(20,184,232,.18);border-radius:14px;
  background:linear-gradient(135deg,rgba(11,36,71,.7),rgba(5,11,22,.3))}
.art-destaque h3{margin-top:1.3rem}

.art-body blockquote{margin:2rem 0;padding:.4rem 0 .4rem 1.4rem;border-left:3px solid var(--cyan);
  color:var(--white);font-size:1.15rem;line-height:1.6}

/* FAQ */
.art-faq details{border-top:1px solid var(--line);padding:1rem 0}
.art-faq details:last-child{border-bottom:1px solid var(--line)}
.art-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--display);font-weight:700;color:var(--white);font-size:1.05rem}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:"+";color:var(--cyan);font-size:1.4rem;line-height:1;transition:transform .2s}
.art-faq details[open] summary::after{transform:rotate(45deg)}
.art-faq details p{margin:.8rem 0 0}

/* sumario fixo */
.art-aside{align-self:start;position:sticky;top:96px;min-width:0}
.art-toc{border-left:1px solid var(--line);padding-left:1.1rem}
.art-toc b{display:block;margin-bottom:.8rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--chrome-dim);font-weight:500}
.art-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.art-toc a{display:block;padding:.32rem 0 .32rem .7rem;margin-left:-1.1rem;border-left:2px solid transparent;
  font-size:.86rem;line-height:1.35;color:var(--chrome-dim);text-decoration:none;transition:color .15s,border-color .15s}
.art-toc a:hover{color:var(--white)}
.art-toc a[aria-current="true"]{color:var(--cyan-hot);border-left-color:var(--cyan)}

/* CTA final e relacionados */
.art-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem;margin-top:3.4rem;padding:clamp(1.4rem,3vw,2.2rem);
  border:1px solid rgba(20,184,232,.28);border-radius:14px;
  background:linear-gradient(120deg,rgba(11,36,71,.95),rgba(5,11,22,.7))}
.art-cta h2{margin:0 0 .4rem;padding:0;font-size:1.45rem}
.art-cta h2::before{display:none}
.art-cta p{margin:0;max-width:44ch}
.art-cta .btn{margin-left:auto}
.art-rel{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(56px,7vw,96px)}
.art-rel h2{font-size:1.35rem;margin:0 0 1.2rem;max-width:none}
.art-rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.art-rel-card{display:block;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:10px;background:#081326;
  text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.art-rel-card:hover{border-color:rgba(20,184,232,.5);transform:translateY(-3px)}
.art-rel-card small{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.art-rel-card h3{margin:.55rem 0 0;font-size:1rem;line-height:1.35;color:var(--white)}

@media(max-width:980px){
  .art-layout{grid-template-columns:1fr;gap:1.6rem}
  .art-aside{position:static;grid-row:1}
  .art-toc{border-left:0;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:10px;background:#081326}
  .art-toc a{margin-left:0}
  .art-rel-grid{grid-template-columns:1fr}
  .art-cta .btn{margin-left:0}
}
@media(max-width:560px){
  .art-body{font-size:1rem}
  .art-dado{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .art-rel-card,.art-toc a,.art-faq summary::after{transition:none}
  .art-rel-card:hover{transform:none}
}