/* ==========================================================================
   07 PROCESSO — 4 etapas com trilho de progresso ligado ao scroll
   (js/modules/rails.js define --p na .proc e .on em cada .pr)
   ========================================================================== */
#processo .sec-hd{margin-bottom:clamp(32px,4vw,54px);row-gap:18px}

.proc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);position:relative}
.proc-p{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--interactive);transform-origin:left;transform:scaleX(var(--p,0))}
.pr{padding:26px 26px 30px 0;border-right:1px solid var(--border)}
.pr:last-child{border-right:none;padding-right:0}
.pr em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);font-weight:600;color:var(--text-3);display:block;margin-bottom:16px;transition:color var(--t-base)}
.pr.on em{color:var(--interactive)}
.pr h3{font-size:var(--f-20);letter-spacing:-.026em;margin-bottom:7px;font-stretch:106%}
.pr p{font-size:var(--f-14);color:var(--text-2);max-width:30ch}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .proc{grid-template-columns:repeat(2,1fr)}
  .pr{border-bottom:1px solid var(--border);padding-right:22px}
  .pr:nth-child(2n){border-right:none;padding-right:0}
}
@media (max-width:600px){
  .proc{grid-template-columns:1fr}
  .pr{border-right:none;padding-right:0}
}