/* ============================ 08 · PROCESO ============================ */
#proceso .pc-recorrido{position:relative;padding-top:34px}
#proceso .pc-via{position:absolute;left:12.5%;right:12.5%;top:62px;height:1px;background:var(--line-2)}
#proceso .pc-avance{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,rgba(46,123,255,.2),var(--accent))}
#proceso .pc-pulso{position:absolute;top:-2px;left:calc(var(--p,0)*100%);width:5px;height:5px;margin-left:-2px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(46,123,255,.18);opacity:calc(var(--p,0)*10)}

#proceso .pc-etapas{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
#proceso .pc-etapa{display:flex;flex-direction:column;align-items:center;text-align:center}
#proceso .pc-nodo{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--void);border:1px solid var(--line-2);
  font-family:var(--display);font-size:.8rem;letter-spacing:.08em;color:var(--mist-2);transition:border-color .8s var(--ease),color .8s var(--ease),box-shadow .8s var(--ease)}
#proceso .pc-nodo::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(46,123,255,.0);transition:border-color .8s var(--ease)}
#proceso .pc-etapa.encendida .pc-nodo{border-color:var(--accent);color:var(--white);box-shadow:0 0 0 6px rgba(46,123,255,.08),0 12px 30px -10px rgba(46,123,255,.35)}
#proceso .pc-etapa.encendida .pc-nodo::after{border-color:rgba(46,123,255,.18)}
#proceso .pc-tarj{margin-top:26px;padding:22px 20px 24px;border-radius:var(--r-lg);background:linear-gradient(170deg,var(--graphite),var(--carbon));border:1px solid var(--line);width:100%;
  transition:border-color .8s var(--ease),transform .8s var(--ease)}

#proceso .pc-etapa.encendida .pc-tarj{border-color:var(--line-2)}
#proceso .pc-tarj h3{font-size:1.06rem}
#proceso .pc-tarj p{font-size:.85rem;color:var(--mist);margin-top:10px;line-height:1.65}
#proceso .pc-cta{display:flex;justify-content:center;margin-top:clamp(56px,6vw,80px)}

@media (max-width:900px){
  #proceso .pc-recorrido{padding-top:0;padding-left:0}
  #proceso .pc-via{left:27px;right:auto;top:28px;bottom:28px;width:1px;height:auto}
  #proceso .pc-avance{inset:0 0 auto 0;width:100%;height:calc(var(--p,0)*100%);background:linear-gradient(180deg,rgba(46,123,255,.2),var(--accent))}
  #proceso .pc-pulso{left:-2px;top:calc(var(--p,0)*100%);margin-left:0;margin-top:-2px}
  #proceso .pc-etapas{grid-template-columns:1fr;gap:18px}
  #proceso .pc-etapa{flex-direction:row;align-items:flex-start;text-align:left;gap:18px}
  #proceso .pc-nodo{flex:none}
  #proceso .pc-tarj{margin-top:0;padding:18px 18px 20px}
  #proceso .pc-etapa:nth-child(even) .pc-tarj{transform:none}
}
#proceso .pc-tarj h3 .pc-num{display:none}
@media (max-width:900px){
  #proceso .pc-nodo{width:54px;height:54px;background:var(--void)}
  #proceso .pc-tarj h3{font-size:1rem}
}
@media (max-width:560px){ #proceso .pc-cta .btn{width:100%} }

/* imagen de marca al fondo, muy velada: da profundidad sin estorbar la lectura */
#proceso .pc-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
#proceso .pc-fondo img{filter:saturate(1.2) blur(2px)}
#proceso .pc-fondo::after{background:linear-gradient(180deg,rgba(4,7,14,.94),rgba(4,7,14,.86) 45%,rgba(4,7,14,.97)),radial-gradient(60% 60% at 50% 30%,rgba(46,123,255,.22),transparent 70%)}

/* v8: sala de juntas de fondo, con parallax lento y bordes fundidos */
#proceso .pc-fondo{-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
#proceso .pc-fondo picture,#proceso .pc-fondo img{width:100%;height:100%}
#proceso .pc-fondo img{object-fit:cover;object-position:50% 30%;filter:saturate(1.05);animation:pc-zoom 34s var(--ease) infinite alternate}
@keyframes pc-zoom{from{transform:scale(1.03)}to{transform:scale(1.1) translateY(-1.5%)}}
#proceso .pc-fondo::after{background:linear-gradient(180deg,rgba(4,7,14,.9),rgba(4,7,14,.78) 45%,rgba(4,7,14,.94)),radial-gradient(60% 60% at 50% 40%,rgba(46,123,255,.2),transparent 70%)}
/* (movimiento reducido: desactivado a pedido del dueño) */
