/* Servicios v30: navegación persistente, recorrido y fondos definitivos */
html{scroll-padding-top:112px}
.site-header{position:fixed!important;top:16px!important;left:0;right:0;z-index:1000!important}
[id]{scroll-margin-top:112px}
.services-hero-v26__content{margin-left:max(12px,calc((100vw - 1600px)/2));padding-left:0}

/* Control de cadena: título en tres líneas en escritorio */
.chain-control-layout{grid-template-columns:minmax(570px,.96fr) minmax(560px,1.04fr);gap:64px}
.chain-control-copy{max-width:670px}
.chain-control-copy h2{font-size:clamp(3.45rem,4.25vw,5rem)}
.chain-control-copy h2>span,.chain-control-copy h2>strong{display:block;white-space:nowrap}

/* Recorrido del despacho */
.route-process{position:relative;isolation:isolate;overflow:hidden;min-height:690px;display:flex;align-items:center;padding:92px 0 118px;background:#eaf8fe url("ruta-despacho-fondo-v30.webp") center/cover no-repeat;color:#073454}
.route-process-inner{position:relative;z-index:2;width:min(1380px,calc(100% - 48px))}
.route-process-heading{width:min(950px,68%);max-width:none;margin:0 0 58px;text-align:center}
.route-process-heading .kicker{color:#0a9ed0;font-size:.82rem}
.route-process-heading h2{margin:12px 0 12px;color:#063353;font-size:clamp(2.8rem,4vw,4.55rem);line-height:1;letter-spacing:-.052em}
.route-process-heading h2 strong{font:inherit;color:#09c9e4}
.route-process-heading p{margin:0 auto;max-width:860px;color:#395f78;font-size:1.08rem;line-height:1.55}
.route-process-steps{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:min(950px,68%);margin:0;padding:0;opacity:1!important;transform:none!important}
.route-process-steps:before{content:"";position:absolute;z-index:0;left:9%;right:12%;top:51px;height:2px;background:linear-gradient(90deg,#064c72 0 24%,#0bc9df 34% 52%,#50c85c 64% 78%,#f3b916 90%);transform:scaleX(0);transform-origin:left;transition:transform 1.05s cubic-bezier(.2,.75,.25,1) .12s}
.route-process-steps.visible:before{transform:scaleX(1)}
.route-process-step{position:relative;z-index:1;min-width:0;opacity:0;transform:translateY(18px);transition:opacity .55s ease var(--route-delay),transform .55s ease var(--route-delay)}
.route-process-steps.visible .route-process-step{opacity:1;transform:none}
.route-process-icon{display:grid;place-items:center;width:102px;height:102px;margin:0 auto 16px;border-radius:50%;background:var(--route-accent);box-shadow:0 13px 30px color-mix(in srgb,var(--route-accent) 28%,transparent);transition:transform .3s ease,box-shadow .3s ease}
.route-process-icon svg{width:53px;height:53px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.route-process-step div{max-width:280px;margin:auto;text-align:center}
.route-process-step h3{margin:0 0 5px;color:#063353;font-size:1.24rem;line-height:1.2;transition:color .25s ease}
.route-process-step p{margin:0;color:#3d6178;font-size:.94rem;line-height:1.48}
.route-process-step:hover .route-process-icon{transform:translateY(-7px) scale(1.035);box-shadow:0 18px 38px color-mix(in srgb,var(--route-accent) 42%,transparent)}
.route-process-step:hover h3{color:var(--route-accent)}

/* Preguntas frecuentes: solo se sustituye el fondo */
.faq{position:relative;isolation:isolate;overflow:hidden;background:#031b2e url("preguntas-fondo-v30.webp") center/cover no-repeat!important;color:#fff}
.faq:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(2,20,35,.9) 0%,rgba(2,25,43,.72) 48%,rgba(3,28,47,.35) 100%)}
.faq .faq-layout{position:relative;z-index:1}
.faq .faq-intro h2,.faq .faq-intro p,.faq .kicker{color:#fff!important}
.faq .accordion details{background:rgba(255,255,255,.96)!important;color:#123b52}

@media(max-width:1220px){
  .chain-control-layout{grid-template-columns:minmax(500px,.94fr) minmax(500px,1.06fr);gap:38px}
  .chain-control-copy h2{font-size:clamp(3rem,4vw,4.2rem)}
  .route-process-inner{width:min(1180px,calc(100% - 40px))}
  .route-process-heading,.route-process-steps{width:min(850px,72%)}
  .route-process-steps{gap:16px}
  .route-process-step p{font-size:.88rem}
}
@media(max-width:980px){
  .site-header{top:8px!important}
  html{scroll-padding-top:92px}
  [id]{scroll-margin-top:92px}
  .chain-control-layout{grid-template-columns:1fr;gap:48px}
  .chain-control-copy{max-width:720px;margin:auto;text-align:center}
  .chain-control-copy h2>span,.chain-control-copy h2>strong{display:inline;white-space:normal}
  .route-process{min-height:0;padding:84px 0 105px;background-position:62% center}
  .route-process-heading{width:min(650px,74%);margin-bottom:46px}
  .route-process-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 24px;width:min(650px,74%);max-width:none;margin:0}
  .route-process-steps:before{display:none}
  .faq{background-position:64% center!important}
}
@media(max-width:720px){
  .services-hero-v26__content{margin:0}
  .route-process{padding:74px 0 90px;background-position:70% center}
  .route-process:before{content:"";position:absolute;z-index:0;inset:0;background:rgba(239,250,255,.78)}
  .route-process-inner{width:min(100% - 30px,560px)}
  .route-process-heading{width:100%;text-align:left;margin-bottom:42px}
  .route-process-heading h2{font-size:2.55rem}
  .route-process-heading p{font-size:.96rem}
  .route-process-steps{grid-template-columns:1fr;gap:26px;width:100%;padding-left:0}
  .route-process-steps:before{display:block;left:31px;right:auto;top:32px;bottom:32px;width:2px;height:auto;background:linear-gradient(#064c72,#0bc9df,#50c85c,#f3b916);transform:scaleY(0);transform-origin:top}
  .route-process-steps.visible:before{transform:scaleY(1)}
  .route-process-step{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start}
  .route-process-icon{width:64px;height:64px;margin:0}
  .route-process-icon svg{width:34px;height:34px}
  .route-process-step div{max-width:none;margin:0;text-align:left;padding-top:4px}
  .route-process-step h3{font-size:1.12rem}
  .route-process-step p{font-size:.88rem}
  .faq{background-position:72% center!important}
  .faq:before{background:rgba(2,20,35,.78)}
}
@media(prefers-reduced-motion:reduce){
  .route-process-steps:before{transform:none;transition:none}
  .route-process-step{opacity:1;transform:none;transition:none}
  .route-process-step:hover .route-process-icon{transform:none}
}
