/* ==========================================================================
   Andréia Freitas — COMO FUNCIONA / PRIMEIRO PASSO
   Consome os tokens de system.css e reaproveita .af-wrap.
   Valores vindos do protótipo aprovado.
   ========================================================================== */

.af-passo{
  background:var(--cream);
  font-family:var(--display);
  line-height:1.2;
  padding:110px 0 120px;
  border-top:1px solid rgba(181,169,100,.3);
}

.af-passo__head{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:64px;
  align-items:end;
}
.af-passo__eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 20px;
  color:var(--gold-text);
  font-size:13px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.af-passo__eyebrow::before{
  content:"";
  width:30px;
  height:1px;
  background:var(--gold);
}
.af-passo__title{
  margin:0;
  font-weight:500;
  color:var(--ink);
  font-size:clamp(38px, 3.6vw, 54px);
  line-height:1.08;
  letter-spacing:-.01em;
}
.af-passo__title em{ color:var(--gold-text); }
.af-passo__sub{
  margin:0 0 8px;
  justify-self:end;
  max-width:36ch;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  color:var(--text);
}

/* 3 passos ligados por uma linha dourada na altura dos números */
.af-passo__steps{
  list-style:none;
  margin:72px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:56px;
  position:relative;
}
.af-passo__steps::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:38px;
  height:1px;
  background:linear-gradient(90deg, rgba(181,169,100,.7), rgba(181,169,100,.7) 85%, rgba(181,169,100,0));
}
.af-passo__steps li{ position:relative; }
/* o fundo creme do número "corta" a linha logo depois dele —
   precisa ser igual ao fundo da seção */
.af-passo__num{
  position:relative;
  display:inline-block;
  padding-right:18px;
  background:var(--cream);
  font-style:italic;
  font-weight:500;
  font-size:76px;
  line-height:1;
  color:var(--gold-text);
}
.af-passo__steps h3{
  margin:26px 0 0;
  font-weight:600;
  font-size:28px;
  line-height:1.15;
  color:var(--ink);
}
.af-passo__steps p{
  margin:14px 0 0;
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.75;
  color:var(--text);
  max-width:34ch;
}
.af-passo__tag{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
  font-style:italic;
  font-weight:500;
  font-size:19px;
  color:var(--gold-text);
}
.af-passo__tag::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--gold);
}


@media (max-width:1023px){
  .af-passo{ padding:72px 0 80px; }
  .af-passo__head{
    grid-template-columns:1fr;
    gap:18px;
  }
  .af-passo__sub{ justify-self:start; }
  .af-passo__steps{
    grid-template-columns:1fr;
    gap:40px;
    margin-top:48px;
    padding-left:0;
  }
  .af-passo__steps::before{ display:none; }
  .af-passo__steps li{
    display:grid;
    grid-template-columns:64px 1fr;
    column-gap:14px;
  }
  .af-passo__num{
    grid-row:span 4;
    font-size:60px;
    padding:0;
  }
  .af-passo__steps h3{
    margin-top:8px;
    font-size:25px;
  }
  .af-passo__steps p{ max-width:60ch; }
}