/* Serveis v1 - efecte serveis home + detall 3 zones + com treballem */
.page-hero{position:relative;padding:clamp(60px,9vw,130px) var(--pad) clamp(30px,5vw,60px)}
.page-hero .micro{color:var(--blue)}
.page-hero h1{font-size:clamp(58px,11vw,170px);font-weight:500;line-height:.95;letter-spacing:-.075em;color:var(--blue);margin:26px 0 35px}
.page-sub{font-size:14px;max-width:460px;line-height:1.7}

/* --- serveis: sticky esquerra (efecte home) + desc mig + específics dreta --- */
.services .services-list{margin-left:0}
.services .services-stage{grid-template-columns:minmax(300px,.85fr) 1.35fr;gap:4vw}
.svc{min-height:60vh;display:grid;grid-template-columns:1.25fr .75fr;gap:4vw;align-content:center;padding:60px 0;border-bottom:1px solid #17171740;opacity:.35;transition:opacity .5s,color .5s}
.svc.active{opacity:1}
.svc-name{display:none;font-size:clamp(24px,3vw,40px);font-weight:500;letter-spacing:-.05em;color:var(--blue);margin:0 0 18px}
.svc-desc{font-size:clamp(15px,1.35vw,19px);line-height:1.75;margin:0}
.svc-spec{list-style:none;margin:0;padding:0}
.svc-spec li{font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.5;padding:12px 0;border-bottom:1px solid #17171740;color:var(--blue)}
.svc-spec li:first-child{padding-top:0}
.svc-spec li::before{content:"— "}


/* --- com treballem: timeline horitzontal (ref. 21st.dev timeline, adaptada Hommu) --- */
.workflow{padding:0 var(--pad) 60px;background:var(--blue);color:#fff}
.workflow .section-head{border-top-color:#ffffff40;color:#fff}
.workflow .section-head h2{color:#fff}
.workflow .wf-scroll{margin-top:60px}
.wf-intro h2{font-size:clamp(40px,6.5vw,96px);font-weight:500;line-height:1;letter-spacing:-.06em;color:#fff;margin:45px 0 35px;max-width:900px}
.wf-intro p{font-size:16px;max-width:560px;line-height:1.7;margin:0 0 14px;color:#fff}
.wf-scroll{height:420vh;position:relative;margin-top:60px}
.wf-pin{position:sticky;top:78px;height:calc(100vh - 78px);display:flex;align-items:center;overflow:hidden}
.wf-track{display:flex;gap:5vw;padding:0 var(--pad);position:relative;height:100%;will-change:transform}
.wf-track::before{content:"";position:absolute;left:-100vw;right:-100vw;top:50%;height:1px;background:#ffffff59}
.wf-track .fase:last-child{margin-right:var(--pad)}
.fase{flex:0 0 340px;min-width:0;position:relative;display:flex;flex-direction:column;background:none;border-radius:0;padding:0;color:#fff;opacity:.32;transform:translateY(8px);transition:opacity .55s ease,transform .55s ease}
.fase.in-focus{opacity:1;transform:none}
.fase:nth-child(even).in-focus{transform:none}
.fase-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.fase:nth-child(odd){align-self:flex-start;justify-content:flex-end;height:calc(50% - 24px)}
.fase:nth-child(even){align-self:flex-end;justify-content:flex-start;height:calc(50% - 24px);transform:translateY(-8px)}
.fase::after{content:"";position:absolute;left:0;width:1px;height:24px;background:#ffffffa6;transform:scaleY(0);transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.fase:nth-child(odd)::after{bottom:-24px;transform-origin:bottom}
.fase:nth-child(even)::after{top:-24px;transform-origin:top}
.fase::before{content:"";position:absolute;left:-4.5px;width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .45s cubic-bezier(.2,.6,.2,1) .15s}
.fase:nth-child(odd)::before{bottom:-29px}
.fase:nth-child(even)::before{top:-29px}
.fase.in-focus::after{transform:scaleY(1)}
.fase.in-focus::before{transform:scale(1)}
.fase-num{font-size:clamp(40px,6.5vw,96px);font-weight:500;letter-spacing:-.06em;color:#fff;display:block;line-height:1}
.fase h3{font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;margin:8px 0 8px;color:#fff}
.fase-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:none;border:1px solid #ffffff59;border-radius:999px;padding:5px 12px;margin:0;white-space:nowrap;flex:none}
.fase ul{list-style:none;margin:0;padding:0}
.fase ul li{font-size:15px;line-height:1.5;color:#ffffffd9;padding:3px 0;border-bottom:1px solid #ffffff2e}

@media (min-width:761px) and (max-height:860px){
  .wf-track::before{top:50%}
  .fase:nth-child(odd){height:calc(50% - 16px)}
  .fase:nth-child(even){height:calc(50% - 16px)}
  .fase::after{height:16px}
  .fase:nth-child(odd)::after{bottom:-16px}
  .fase:nth-child(even)::after{top:-16px}
  .fase:nth-child(odd)::before{bottom:-21px}
  .fase:nth-child(even)::before{top:-21px}
  .fase-head{margin-bottom:4px}
  .fase h3{font-size:14.5px;margin:4px 0 3px}
  .fase-tag{font-size:11px;padding:3px 10px}
  .fase ul li{font-size:14px;line-height:1.35;padding:1px 0}
}

@media (max-width:760px){
  .services .services-stage{display:block}
  .page-hero{padding-top:60px}
  .page-hero h1{font-size:clamp(52px,15vw,80px)}
  .svc{display:block;min-height:0;padding:45px 0;opacity:1}
  .svc-name{display:block}
  .svc-desc{margin-bottom:25px}
  .wf-scroll{height:auto;margin-top:50px}
  .wf-pin{position:static;height:auto;overflow:visible}
  .wf-track{flex-direction:column;transform:none!important;height:auto;width:auto;padding:0 0 0 30px;gap:38px}
  .wf-track::before{left:5px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
  .fase{min-width:0;flex:none;height:auto!important;align-self:stretch;justify-content:flex-start;opacity:1;transform:none;padding:0}
  .wf-track .fase:last-child{margin-right:0}
  .fase:nth-child(odd),.fase:nth-child(even){transform:none}
  .fase:nth-child(odd)::after,.fase:nth-child(even)::after{top:19px;bottom:auto;left:-25px;width:25px;height:1px;transform:none}
  .fase:nth-child(odd)::before,.fase:nth-child(even)::before{top:14px;bottom:auto;left:-30px;transform:none}
  .wf-intro p{font-size:16px;max-width:none}
  .fase-head{margin-bottom:6px}
  .fase h3{font-size:17px;margin:8px 0 8px}
  .fase-tag{font-size:12px;padding:5px 12px}
  .fase ul li{font-size:15.5px;line-height:1.55;padding:5px 0}
}


@media (min-width:761px) and (max-height:700px){
  .wf-scroll{height:auto;margin-top:50px}
  .wf-pin{position:static;height:auto;overflow:visible}
  .wf-track{flex-direction:column;transform:none!important;height:auto;width:auto;padding:0 0 0 30px;gap:38px}
  .wf-track::before{left:5px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
  .fase{min-width:0;flex:none;height:auto!important;align-self:stretch;justify-content:flex-start;opacity:1;transform:none;padding:0}
  .fase:nth-child(odd),.fase:nth-child(even){transform:none}
  .wf-track .fase:last-child{margin-right:0}
  .fase:nth-child(odd)::after,.fase:nth-child(even)::after{top:19px;bottom:auto;left:-25px;width:25px;height:1px;transform:none}
  .fase:nth-child(odd)::before,.fase:nth-child(even)::before{top:14px;bottom:auto;left:-30px;transform:none}
  .wf-intro p{font-size:16px;max-width:none}
  .fase-head{margin-bottom:6px}
  .fase h3{font-size:17px;margin:8px 0 8px}
  .fase-tag{font-size:12px;padding:5px 12px}
  .fase ul li{font-size:15.5px;line-height:1.55;padding:5px 0}
}

@media (prefers-reduced-motion:reduce){
  .wf-scroll{height:auto}
  .wf-pin{position:static;height:auto;overflow:visible}
  .wf-track{flex-wrap:wrap;transform:none!important;height:auto;width:auto;row-gap:60px}
  .wf-track::before{display:none}
  .fase{opacity:1;transform:none;height:auto!important;align-self:auto;flex:1 1 340px}
  .fase:nth-child(odd),.fase:nth-child(even){transform:none}
  .fase::before,.fase::after{display:none}
}