/* ==========================================================================
   06 How a project runs (dono: FOTOS). Linha do tempo: a linha se desenha com a rolagem e cada etapa acende quando a linha chega nela.
   Referencia de movimento: a frase que acende da TopLine Pro (tecnica 6, app.js "Scroll-filled text"), aplicada a uma linha e a quatro nos.
   Cada etapa carrega o trecho de linha que sai dela ate a proxima (li::before = trilho, li::after = preenchimento, escala por --s de 0 a 1).
   Padrao (sem JS, movimento reduzido): tudo aceso. O s-process.js poe .prc--anim na lista e passa a acender por etapa.
   ========================================================================== */
.prc__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 clamp(20px,2.6vw,40px); counter-reset:prc }
.prc__step{ position:relative; padding-top:96px; --s:1 }
.prc__node{
  position:absolute; top:0; left:0; z-index:2; display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:var(--grafite); color:#fff; border:2px solid var(--grafite);
  transition:background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out), transform .6s var(--ease-out);
}
.prc__node svg{ width:26px; height:26px }
.prc__step:not(:last-child)::before,.prc__step:not(:last-child)::after{
  content:""; position:absolute; top:31px; left:32px; width:calc(100% + var(--prc-gap,clamp(20px,2.6vw,40px))); height:2px;
}
.prc__step:not(:last-child)::before{ background:var(--pedra) }
.prc__step:not(:last-child)::after{ background:var(--grafite); transform:scaleX(var(--s,1)); transform-origin:left }
.prc__n{ display:block; margin-bottom:10px; font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--texto2) }
.prc__step .h3{ font-size:clamp(21px,1.9vw,26px) }
.prc__step p{ margin-top:10px; max-width:30ch; color:var(--texto2); font-size:16.5px }
.prc__step .h3,.prc__step p,.prc__n{ transition:color .6s var(--ease-out), transform .7s var(--ease-out) }

/* animacao: so existe com JS e sem movimento reduzido */
.prc--anim .prc__step .prc__node{ background:var(--papel); color:var(--texto2); border-color:var(--rejunte) }
/* etapa apagada: so desce 10px e o titulo fica no cinza do texto (contraste >= 4.5:1; nada de opacidade, que reprova no Lighthouse) */
.prc--anim .prc__step .h3,.prc--anim .prc__step p,.prc--anim .prc__step .prc__n{ transform:translateY(10px) }
.prc--anim .prc__step .h3{ color:var(--texto2) }
.prc--anim .prc__step.is-lit .prc__node{ background:var(--grafite); color:#fff; border-color:var(--grafite); animation:prcPop .7s var(--ease-out) }
.prc--anim .prc__step.is-lit .h3,.prc--anim .prc__step.is-lit p,.prc--anim .prc__step.is-lit .prc__n{ transform:none }
.prc--anim .prc__step.is-lit .h3{ color:var(--grafite) }
.prc--anim .prc__step:not(:last-child)::after{ transition:transform .12s linear }
@keyframes prcPop{ 0%{ transform:scale(.86) } 55%{ transform:scale(1.12) } 100%{ transform:scale(1) } }

.prc__cta{ display:flex; justify-content:center; margin-top:clamp(40px,5vw,72px) }

/* vertical no celular e no tablet estreito */
@media (max-width:860px){
  .prc__list{ grid-template-columns:1fr; gap:0 }
  .prc__step{ padding:4px 0 44px 88px; min-height:64px }
  .prc__step:last-child{ padding-bottom:0 }
  .prc__node{ width:56px; height:56px }
  .prc__node svg{ width:24px; height:24px }
  .prc__step:not(:last-child)::before,.prc__step:not(:last-child)::after{ top:56px; left:27px; width:2px; height:calc(100% - 56px) }
  .prc__step:not(:last-child)::after{ transform:scaleY(var(--s,1)); transform-origin:top }
  .prc__step p{ max-width:34ch }
}
@media (max-width:520px){
  .prc__cta .btn{ width:100%; justify-content:space-between }
}
@media (prefers-reduced-motion:reduce){
  .prc--anim .prc__step .h3,.prc--anim .prc__step p,.prc--anim .prc__step .prc__n{ transform:none }
}