/* =========================================================
   DN TECH — V33 / TRANSICIONES ENTRE PÁGINAS DE SERVICIO
   Header estable + cortina direccional + contenido deslizándose.
   Sin fundidos grises ni flashes blancos.
   ========================================================= */

:root {
  --svc-page-transition-duration:340ms;
  --svc-page-transition-distance:3.4vw;
  --svc-page-transition-ease:cubic-bezier(.22,.72,.24,1);
  --svc-curtain-color:#f7fbff;
}

.page-services .svc-main,
.page-services-list .services-list-main,
.page-services-process .services-process-main {
  will-change:transform;
  transform:translateX(0);
}

/* Cortina de transición: sólo cubre el área de contenido, no el header. */
body.page-services::after,
body.page-services-list::after,
body.page-services-process::after {
  content:"";
  position:fixed;
  z-index:900;
  top:var(--header-h);
  right:0;
  bottom:0;
  left:0;
  pointer-events:none;
  background:var(--svc-curtain-color);
  transform:translateX(110%);
  will-change:transform;
}

/* Al volver, la cortina parte desde el lado izquierdo. */
body.svc-page-leave-back::after { transform:translateX(-110%); }

/* SALIDA — página siguiente a la derecha */
body.svc-page-leave-forward .svc-main,
body.svc-page-leave-forward .services-list-main,
body.svc-page-leave-forward .services-process-main {
  animation:svcPageLeaveForward var(--svc-page-transition-duration) var(--svc-page-transition-ease) both;
}
body.svc-page-leave-forward::after {
  animation:svcCurtainInForward var(--svc-page-transition-duration) var(--svc-page-transition-ease) both;
}

/* SALIDA — volvemos a una página situada a la izquierda */
body.svc-page-leave-back .svc-main,
body.svc-page-leave-back .services-list-main,
body.svc-page-leave-back .services-process-main {
  animation:svcPageLeaveBack var(--svc-page-transition-duration) var(--svc-page-transition-ease) both;
}
body.svc-page-leave-back::after {
  animation:svcCurtainInBack var(--svc-page-transition-duration) var(--svc-page-transition-ease) both;
}

/* La clase preload cubre la página antes del primer frame útil de entrada. */
html.svc-preload-forward body::after,
html.svc-preload-back body::after {
  transform:translateX(0);
}

/* ENTRADA — desde la derecha */
body.svc-page-enter-forward .svc-main,
body.svc-page-enter-forward .services-list-main,
body.svc-page-enter-forward .services-process-main {
  animation:svcPageEnterForward var(--svc-page-transition-duration) var(--svc-page-transition-ease) both;
}
body.svc-page-enter-forward::after {
  transform:translateX(0);
  animation:svcCurtainOutForward var(--svc-page-transition-duration) var(--svc-page-transition-ease) both;
}

/* ENTRADA — desde la izquierda */
body.svc-page-enter-back .svc-main,
body.svc-page-enter-back .services-list-main,
body.svc-page-enter-back .services-process-main {
  animation:svcPageEnterBack var(--svc-page-transition-duration) var(--svc-page-transition-ease) both;
}
body.svc-page-enter-back::after {
  transform:translateX(0);
  animation:svcCurtainOutBack var(--svc-page-transition-duration) var(--svc-page-transition-ease) both;
}

@keyframes svcPageLeaveForward {
  from { transform:translateX(0); }
  to { transform:translateX(calc(var(--svc-page-transition-distance) * -1)); }
}
@keyframes svcPageEnterForward {
  from { transform:translateX(var(--svc-page-transition-distance)); }
  to { transform:translateX(0); }
}
@keyframes svcPageLeaveBack {
  from { transform:translateX(0); }
  to { transform:translateX(var(--svc-page-transition-distance)); }
}
@keyframes svcPageEnterBack {
  from { transform:translateX(calc(var(--svc-page-transition-distance) * -1)); }
  to { transform:translateX(0); }
}

@keyframes svcCurtainInForward {
  from { transform:translateX(110%); }
  to { transform:translateX(0); }
}
@keyframes svcCurtainOutForward {
  from { transform:translateX(0); }
  to { transform:translateX(-110%); }
}
@keyframes svcCurtainInBack {
  from { transform:translateX(-110%); }
  to { transform:translateX(0); }
}
@keyframes svcCurtainOutBack {
  from { transform:translateX(0); }
  to { transform:translateX(110%); }
}

body.page-services,
body.page-services-list,
body.page-services-process {
  overflow-x:hidden;
}

@media (max-width:640px) {
  :root { --svc-page-transition-distance:22px; }
}

@media (prefers-reduced-motion:reduce) {
  body.page-services::after,
  body.page-services-list::after,
  body.page-services-process::after { display:none !important; }
  body.svc-page-leave-forward .svc-main,
  body.svc-page-leave-forward .services-list-main,
  body.svc-page-leave-forward .services-process-main,
  body.svc-page-leave-back .svc-main,
  body.svc-page-leave-back .services-list-main,
  body.svc-page-leave-back .services-process-main,
  body.svc-page-enter-forward .svc-main,
  body.svc-page-enter-forward .services-list-main,
  body.svc-page-enter-forward .services-process-main,
  body.svc-page-enter-back .svc-main,
  body.svc-page-enter-back .services-list-main,
  body.svc-page-enter-back .services-process-main {
    animation:none !important;
  }
}