/* ============================================================
   75 · COMO FUNCIONA — três passos e a linha que se desenha
   ============================================================ */
.como__passos{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:clamp(1.5rem,4vw,3rem) 0 2.4rem;padding-top:.5rem}
.como__linha{position:absolute;left:0;right:0;top:0;width:100%;height:120px;pointer-events:none}
.como__passo{position:relative;text-align:center;padding:0 .8rem}
.como__circulo{display:grid;place-items:center;width:64px;height:72px;margin:0 auto 1.1rem;border-radius:999px 999px 10px 10px;background:var(--marfim);
  border:1px solid rgba(210,190,90,.55);color:var(--verde-600);font-family:var(--fonte-display);font-weight:400;font-size:1rem;letter-spacing:.08em;
  transition:background .5s,color .5s,box-shadow .5s,transform .5s var(--ease-elastico,cubic-bezier(.34,1.56,.64,1))}
.como__passo.is-aceso .como__circulo{background:linear-gradient(180deg,var(--ouro-brilho),var(--ouro));color:var(--verde-950);box-shadow:0 14px 30px -14px rgba(210,190,90,.8);transform:translateY(-4px)}
.como__passo .h3{font-size:.86rem;letter-spacing:.12em;color:var(--verde-900);margin-bottom:.5rem}
.como__passo p{margin:0 auto;max-width:22rem;font-size:.94rem;line-height:1.6;color:var(--texto-suave)}
@media (max-width:760px){
  .como__passos{grid-template-columns:1fr;gap:2rem;padding-left:.5rem}
  .como__linha{display:none}
  .como__passo{text-align:left;display:grid;grid-template-columns:64px 1fr;column-gap:1rem;padding:0}
  .como__circulo{grid-row:1/3;margin:0}
  .como__passo p{margin:0}
}