.sistema{
  --recorrido:170vh;        --paso-x:5%;              --paso-y:-6%;             --achique:.06;            --oscuro:.16;             padding:0;overflow:clip}
:where(.sistema) :is(p,ol,dl,dt,dd,figure){margin:0;padding:0}

.sistema-cabeza{max-width:1600px;margin:0 auto;padding:var(--sec) var(--m) 8px}
.sistema h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(36px,5vw,72px);
  line-height:1.04;letter-spacing:-.025em;font-variation-settings:'opsz' 72;
  max-width:12em;text-wrap:balance}
.sistema-bajada{max-width:34em;margin-top:24px;font-size:20px;line-height:1.5;color:var(--tinta-2-osc)}

.caso{position:relative}
.escenario{position:relative;max-width:1600px;margin:0 auto;padding:72px var(--m);
  display:grid;grid-template-columns:minmax(0,27em) minmax(0,1fr);gap:72px;align-items:center}
.caso + .caso .escenario{border-top:1px solid var(--linea-osc)}
.caso:last-child .escenario{padding-bottom:var(--sec)}

.texto h3{font-family:var(--font-serif);font-weight:500;font-size:clamp(30px,3.2vw,46px);
  line-height:1.08;letter-spacing:-.02em;text-wrap:balance}

.ficha{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:18px;font-size:14px;line-height:1.4}
.ficha dt{color:var(--tinta-2-osc)}
.ficha dd{color:var(--papel);font-weight:500}
.estado{display:inline-flex;align-items:center;gap:8px}
.estado::before{content:"";width:8px;height:8px;flex:none;border:1px solid var(--tinta-2-osc)}
.ficha .estado-vivo{color:var(--acento-400)}
.estado-vivo::before{background:var(--acento-400);border-color:var(--acento-400)}

.resumen{margin-top:22px;font-size:18px;line-height:1.5;color:var(--papel)}
.sistema .resumen{margin-top:22px}

.pasos{list-style:none;counter-reset:paso;border-top:1px solid var(--linea-osc)}
.sistema .pasos{margin-top:28px}
.pasos li{counter-increment:paso;position:relative;display:grid;grid-template-columns:2.2em 1fr;
  padding:12px 0 12px 16px;border-bottom:1px solid var(--linea-osc);
  font-size:15px;line-height:1.45;color:var(--tinta-2-osc);
  transition:color .42s var(--curva)}
.pasos li::before{content:counter(paso);font-family:var(--font-serif);font-size:17px;
  font-feature-settings:'tnum' 1;color:var(--tinta-2-osc);transition:color .42s var(--curva)}
.pasos li::after{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
  background:var(--acento-400);transform:scaleY(0);transform-origin:top;
  transition:transform .42s var(--curva)}

.pila{position:relative;aspect-ratio:16/10;margin:4% 6% 6% 0}
.capa{position:absolute;left:0;top:0;width:100%;height:auto;display:block;
  transform-origin:50% 50%;
  z-index:calc(10 - var(--i));
  transform:translate3d(calc(var(--i) * var(--paso-x)),calc(var(--i) * var(--paso-y)),0)
            scale(calc(1 - var(--i) * var(--achique)));
  filter:brightness(calc(1 - var(--i) * var(--oscuro)))
         drop-shadow(0 28px 36px color-mix(in oklab,var(--carbon-profundo) 85%,transparent))}
.capa.cel{width:27%;left:auto;right:-5%;top:14%;z-index:20;transform:none;
  filter:drop-shadow(0 30px 40px color-mix(in oklab,var(--carbon-profundo) 90%,transparent))}
.pila figcaption{position:absolute;left:0;top:calc(100% + 18px);font-size:13px;color:var(--tinta-2-osc)}

.vivo .pila{perspective:1800px;perspective-origin:30% 40%}
.vivo .capa{will-change:transform,opacity}
.vivo .pasos li.activo{color:var(--papel)}
.vivo .pasos li.activo::before{color:var(--acento-400)}
.vivo .pasos li.activo::after{transform:scaleY(1)}
.vivo .pasos li.hecho::after{transform:scaleY(1);background:var(--linea-osc)}

.fijo .caso{height:calc(100vh + var(--recorrido))}
.fijo .escenario{position:sticky;top:0;height:100vh;padding-top:calc(var(--altura-nav) + 24px);padding-bottom:48px}
.fijo .caso + .caso .escenario{border-top:0}
.fijo .caso + .caso{border-top:1px solid var(--linea-osc)}
.fijo .escenario::after{content:"";position:absolute;left:var(--m);right:var(--m);bottom:28px;
  height:2px;background:var(--acento-400);transform-origin:left;transform:scaleX(var(--avance,0))}
.fijo .escenario::before{content:"";position:absolute;left:var(--m);right:var(--m);bottom:28px;
  height:2px;background:var(--linea-osc)}
.fijo .pila{margin-right:7%}

@media (max-width:1023px){
  .escenario{grid-template-columns:1fr;gap:40px;padding-top:64px;padding-bottom:80px}
  .pila{margin:6% 8% 4% 0}
}
@media (max-width:767px){
  .sistema-bajada{font-size:18px}
  .escenario{padding-top:48px;padding-bottom:64px;gap:28px}
  .resumen{font-size:17px}
  .pila{margin:9% 10% 2% 0}
  .capa.cel{width:30%;right:-9%;top:10%}
  .pila figcaption{top:calc(100% + 12px)}
  .texto{display:contents}
  .texto h3{order:1}.ficha{order:2;margin-top:-12px}.sistema .resumen{order:3;margin-top:-6px}
  .pila{order:4}.sistema .pasos{order:5;margin-top:24px}
}

@media (prefers-reduced-motion:reduce){
  .capa{transition:none!important}
  .pasos li,.pasos li::before,.pasos li::after{transition:none}
}