/* Linha do tempo: passos alternando esquerda/direita em torno de uma linha central */
.process-timeline{
  position:relative;
  width:min(980px,100%);
  margin:0 auto;
  display:grid;
  gap:34px;
}

.process-timeline::before{
  content:'';
  position:absolute;
  top:34px;
  bottom:34px;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(200,169,90,.42) 10%,
    rgba(200,169,90,.42) 90%,
    transparent
  );
}

.process-step{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr);
  align-items:center;
  column-gap:24px;
}

.process-step::before,
.process-step::after{
  content:'';
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,169,90,.42));
  align-self:center;
}
.process-step::before{grid-column:1;grid-row:1}
.process-step::after{
  grid-column:3;
  grid-row:1;
  background:linear-gradient(90deg,rgba(200,169,90,.42),transparent);
}

.process-step:nth-child(odd) .process-content{
  grid-column:3;
  text-align:left;
}
.process-step:nth-child(even) .process-content{
  grid-column:1;
  text-align:right;
}

.process-step:nth-child(odd)::before,
.process-step:nth-child(even)::after{opacity:0}

.process-number{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  align-self:center;
  width:82px;
  height:82px;
  border-radius:50%;
  border:1px solid rgba(200,169,90,.58);
  background:
    radial-gradient(circle at center, rgba(200,169,90,.24), transparent 60%),
    #171717;
  box-shadow:
    0 0 0 11px rgba(200,169,90,.05),
    0 18px 38px rgba(0,0,0,.38);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.process-number::before{
  content:'';
  position:absolute;
  inset:9px;
  border-radius:50%;
  border:1px solid rgba(200,169,90,.26);
}
.process-number span{
  position:relative;
  z-index:1;
  font-family:'Outfit',sans-serif;
  font-size:36px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--gold);
}

.process-content{
  grid-row:1;
  min-height:126px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  padding:25px 30px;
  box-shadow:0 18px 46px rgba(0,0,0,.18);
  transition:.25s ease;
}
.process-content:hover{
  transform:translateY(-4px);
  border-color:rgba(200,169,90,.44);
  background:rgba(200,169,90,.075);
}
.process-content h3{
  font-family:'Outfit',sans-serif;
  font-size:19px;
  line-height:1.25;
  color:#fff;
  margin-bottom:8px;
}
.process-content p{
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.68);
}

/* Mobile: linha à esquerda, todos os cartões à direita dela */
@media(max-width:720px){
  .process-timeline{gap:26px}
  .process-timeline::before{
    left:34px;
    top:28px;
    bottom:28px;
  }

  .process-step{
    grid-template-columns:78px minmax(0,1fr);
    column-gap:18px;
  }
  .process-step::before,
  .process-step::after{display:none}

  .process-number{
    grid-column:1;
    width:66px;
    height:66px;
  }
  .process-number span{font-size:32px}

  .process-step:nth-child(odd) .process-content,
  .process-step:nth-child(even) .process-content{
    grid-column:2;
    text-align:left;
  }

  .process-content{
    min-height:auto;
    padding:22px;
  }
}