
.article-hero{padding:84px 0 56px;background:radial-gradient(circle at 86% 12%,rgba(22,137,255,.17),transparent 30%),linear-gradient(180deg,#071a33,#041020)}
.article-hero h1{max-width:980px;margin-bottom:16px}.article-hero .lead{max-width:880px}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.article-meta span{padding:7px 11px;border-radius:999px;background:rgba(22,137,255,.12);color:#cae8ff;font-size:.76rem;font-weight:700}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.article-body{max-width:850px}.article-body h2{scroll-margin-top:110px;margin:44px 0 14px;font-size:1.65rem}.article-body h2:first-child{margin-top:0}.article-body p,.article-body li{color:#b7c8dc;line-height:1.75}.article-body ul{padding-left:20px}
.article-intro{padding:24px;border:1px solid rgba(54,215,255,.19);border-left:3px solid var(--cyan);border-radius:0 14px 14px 0;background:rgba(8,26,51,.68)}
.article-toc{position:sticky;top:100px;padding:22px;border:1px solid rgba(106,184,255,.16);border-radius:15px;background:rgba(5,19,38,.88)}.article-toc strong{display:block;color:#fff;margin-bottom:12px}.article-toc a{display:block;padding:7px 0;color:#9fb2ca;font-size:.84rem}.article-toc a:hover{color:var(--cyan)}
.article-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}.article-checklist div{padding:14px 14px 14px 34px;position:relative;border:1px solid rgba(106,184,255,.13);border-radius:10px;background:rgba(8,26,51,.60);color:#d6e3f2;font-size:.86rem}.article-checklist div:before{content:"✓";position:absolute;left:13px;color:var(--cyan);font-weight:900}
.article-warning{margin:28px 0;padding:22px;border:1px solid rgba(255,171,64,.24);border-left:3px solid #ffab40;border-radius:0 14px 14px 0;background:rgba(56,35,8,.24)}.article-warning strong{display:block;color:#ffd9a1}.article-warning p{margin:7px 0 0}
.related-articles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.related-articles a{padding:20px;border:1px solid rgba(106,184,255,.16);border-radius:13px;background:rgba(8,26,51,.65);color:#eaf7ff;font-weight:800}
.article-cta{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:28px;border:1px solid rgba(54,215,255,.20);border-radius:18px;background:linear-gradient(140deg,#0d2a50,#07172d)}
.article-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.article-index-card{display:flex;flex-direction:column;padding:24px;border:1px solid rgba(106,184,255,.16);border-radius:16px;background:linear-gradient(155deg,rgba(14,40,76,.93),rgba(6,22,43,.98))}.article-index-card h2{font-size:1.25rem;margin:12px 0 10px}.article-index-card p{color:#aebfd5;font-size:.9rem}.article-index-card a{margin-top:auto;color:#dff7ff;font-weight:800}
@media(max-width:920px){.article-layout{grid-template-columns:1fr}.article-toc{position:relative;top:auto;order:-1}.article-index-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.article-checklist,.related-articles,.article-index-grid{grid-template-columns:1fr}.article-cta{flex-direction:column;align-items:flex-start}.article-cta .btn{width:100%}}


/* =========================================================
   CORREÇÕES DA AUDITORIA FINAL
   ========================================================= */

/* 1) O estilo dos links do sumário não deve afetar os botões */
.article-toc a:not(.btn) {
  display: block;
  padding: 7px 0;
  color: #9fb2ca;
  font-size: .84rem;
  text-decoration: none;
}

.article-toc a:not(.btn):hover {
  color: var(--cyan);
}

/* 2) Melhor separação visual no card lateral */
.article-toc hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 18px 0 16px;
}

/* 3) Botões laterais com contraste, largura e hierarquia adequados */
.article-toc .btn,
.article-toc .btn-outline {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  margin-top: 12px;
  padding: 0 16px;
  text-align: center;
  line-height: 1.2;
  font-weight: 800;
  border-radius: 12px;
}

.article-toc .btn {
  color: #041020 !important;
}

.article-toc .btn-outline {
  color: #e8f6ff !important;
  border: 1px solid rgba(54, 215, 255, .32);
  background: rgba(6, 22, 43, .55);
}

.article-toc .btn-outline:hover {
  color: #ffffff !important;
  border-color: rgba(54, 215, 255, .55);
  background: rgba(9, 31, 57, .82);
}

/* 4) Melhor leitura do sumário em telas pequenas */
@media (max-width: 920px) {
  .article-toc {
    margin-bottom: 18px;
  }
}

@media (max-width: 650px) {
  .article-toc {
    padding: 20px;
  }

  .article-toc .btn,
  .article-toc .btn-outline {
    min-height: 54px;
    margin-top: 10px;
  }
}
