/* =========================================================
   PÁGINA /ARTIGOS
========================================================= */

.af-artigos {
  background: #fff;
  color: #1d1d1f;

  font-family:
    "Geist",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

/* HERO */

.af-artigos-hero {

  padding: 110px 0 84px;

  text-align: center;

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

.af-artigos-hero .af-container {
  max-width: 1180px;
}

.af-artigos-hero .af-badge {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 24px;

  color: #0071e3;

  font-size: 13px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: .08em;

  text-transform: uppercase;
}

.af-artigos-hero h1 {

  max-width: 920px;

  margin:
    0 auto
    24px;

  font-size:
    clamp(40px, 5vw, 68px);

  line-height: 1.02;

  letter-spacing: -0.07em;

  font-weight: 780;

  color: #1d1d1f;

  text-wrap: balance;
}

.af-artigos-hero p {

  max-width: 760px;

  margin:
    0 auto
    38px;

  font-size:
    clamp(18px, 1.4vw, 21px);

  line-height: 1.55;

  letter-spacing: -0.02em;

  font-weight: 400;

  color: #6e6e73;
}

/* BUSCA */

.af-artigos-search {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.af-artigos-search input {

  width: 100%;
  height: 56px;

  padding: 0 22px;

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

  border-radius: 999px;

  background: rgba(255,255,255,.92);

  color: #1d1d1f;

  font-size: 15px;

  outline: none;

  box-shadow:
    0 16px 40px rgba(0,0,0,.06);

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

.af-artigos-search input:focus {

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

  box-shadow:
    0 0 0 4px rgba(0,113,227,.10),
    0 16px 40px rgba(0,0,0,.06);
}

/* SEÇÕES */

.af-artigos-categorias {
  padding: 72px 0 36px;
}

.af-artigos-lista {
  padding: 42px 0 82px;
}

.af-section-heading {

  margin-bottom: 34px;

  text-align: center;
}

.af-section-heading span {

  display: block;

  margin-bottom: 12px;

  color: #0071e3;

  font-size: 13px;
  line-height: 1;
  font-weight: 750;

  letter-spacing: .08em;

  text-transform: uppercase;
}

.af-section-heading h2 {

  max-width: 780px;

  margin: 0 auto;

  font-size:
    clamp(34px, 4vw, 54px);

  line-height: 1.02;

  letter-spacing: -0.06em;

  font-weight: 780;

  color: #1d1d1f;

  text-wrap: balance;
}

/* CATEGORIAS */

.af-category-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}

.af-category-card {

  display: block;

  padding: 26px;

  border-radius: 26px;

  background: #f5f5f7;

  text-decoration: none;

  transition:
    transform .25s ease,
    background .25s ease;
}

.af-category-card:hover {

  transform: translateY(-3px);

  background: #eef5ff;
}

.af-category-card strong {

  display: block;

  margin-bottom: 10px;

  font-size: 24px;

  line-height: 1.08;

  letter-spacing: -0.045em;

  font-weight: 780;

  color: #1d1d1f;
}

.af-category-card span {

  color: #5f6368;

  font-size: 15px;

  line-height: 1.55;
}

/* POSTS */

.af-post-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;
}

.af-post-card a {

  display: flex;
  flex-direction: column;

  height: 100%;

  padding: 28px;

  border-radius: 28px;

  background: #f5f5f7;

  text-decoration: none;

  transition:
    transform .25s ease,
    background .25s ease;
}

.af-post-card a:hover {

  transform: translateY(-3px);

  background: #eef5ff;
}

.af-post-tag {

  display: inline-flex;

  width: fit-content;

  margin-bottom: 18px;

  padding: 7px 12px;

  border-radius: 999px;

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

  color: #0071e3;

  font-size: 11px;

  line-height: 1;

  font-weight: 750;

  letter-spacing: .05em;

  text-transform: uppercase;
}

.af-post-card h3 {

  margin: 0 0 12px;

  font-size: 28px;

  line-height: 1.08;

  letter-spacing: -0.05em;

  font-weight: 780;

  color: #1d1d1f;
}

.af-post-card p {

  margin: 0 0 22px;

  color: #5f6368;

  font-size: 15px;

  line-height: 1.6;
}

.af-post-card strong {

  margin-top: auto;

  color: #0071e3;

  font-size: 15px;

  font-weight: 750;
}

/* CTA */

.af-artigos-cta {
  padding: 0 0 96px;
}

.af-cta-box {

  padding: 54px 42px;

  border-radius: 34px;

  background:
    linear-gradient(
      180deg,
      #f5f5f7 0%,
      #ffffff 100%
    );

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

  text-align: center;

  box-shadow:
    0 20px 60px rgba(0,0,0,.05);
}

.af-cta-box h2 {

  max-width: 760px;

  margin:
    0 auto
    18px;

  font-size:
    clamp(34px, 4vw, 56px);

  line-height: 1.02;

  letter-spacing: -0.06em;

  font-weight: 780;

  color: #1d1d1f;

  text-wrap: balance;
}

.af-cta-box p {

  max-width: 620px;

  margin:
    0 auto
    28px;

  color: #6e6e73;

  font-size: 18px;

  line-height: 1.55;
}

/* RESPONSIVO */

@media (max-width: 980px) {

  .af-artigos-hero {
    padding: 92px 0 64px;
  }

  .af-artigos-hero h1 {

    font-size:
      clamp(38px, 10vw, 56px);

    line-height: .98;
  }

  .af-category-grid,
  .af-post-grid {
    grid-template-columns: 1fr;
  }

  .af-cta-box {
    padding: 40px 24px;
  }
}