.af-cst-page {
  background: #f5f7fb;
  color: #1d1d1f;
}

.af-cst-hero {
  padding: 90px 20px 50px;

  text-align: center;

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #f5f7fb 100%
    );
}

.af-cst-hero h1 {
  margin: 18px auto 14px;

  max-width: 900px;

  font-size:
    clamp(36px, 5vw, 60px);

  line-height: 1.05;

  letter-spacing: -.05em;
}

.af-cst-hero p {
  max-width: 760px;

  margin: 0 auto;

  color: #6e6e73;

  font-size: 18px;

  line-height: 1.7;
}

.af-cst-conteudo {
  padding: 40px 20px 90px;
}

.af-relacionados-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap: 20px;
}

.af-relacionado-card {
  display: flex;
  flex-direction: column;

  gap: 14px;

  padding: 24px;

  border-radius: 24px;

  background: #fff;

  border:
    1px solid rgba(0,0,0,.06);

  text-decoration: none;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.af-relacionado-card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(0,113,227,.16);

  box-shadow:
    0 20px 40px rgba(0,0,0,.08);

}

.af-relacionado-card strong {

  color: #1d1d1f;

  font-size: 17px;

  line-height: 1.5;

}

.af-relacionado-card span {

  color: #6e6e73;

  font-size: 14px;

}

.af-auditoria-badge {

  display: inline-flex;

  padding: 8px 14px;

  border-radius: 999px;

  background:
    rgba(0,113,227,.08);

  color: #0071e3;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: .08em;

}

.af-auditoria-bloco {

  padding: 28px;

  border-radius: 24px;

  background: #fff;

  border:
    1px solid rgba(0,0,0,.06);

  box-shadow:
    0 12px 30px rgba(0,0,0,.04);

}

.af-auditoria-bloco p {

  color: #475569;

  line-height: 1.8;

  margin: 0;

}