/* ==========================================================================
   Mariona Agency 2028 · Fichas de servicio: cómo entendemos cada servicio.
   Dos bloques que la ficha enlaza detrás de la primera prueba visual:
   · .sx-vis: escena en lienzo que avanza con el scroll, sin secuestrarlo
     (mismo mecanismo que Clear Flow). La sección mide 300svh, el escenario se
     queda fijo mientras dura y assets/js/ma-servicio-vis.js escribe --p (0 → 1);
     con ella se funden las tres frases (--a entrada, --z salida).
   · .sx-pri: Clear Flow y Human First aplicados al servicio.
   Sin JavaScript: solo el texto, una frase tras otra. Con movimiento reducido:
   el dibujo en su estado final, entre el rótulo y las frases. Retícula: textos
   en la medida de la cápsula; el lienzo va a sangre, como una imagen.
   ========================================================================== */
.sx-vis{position:relative;margin-top:var(--sec)}
.sx-vis-st{position:relative}
.sx-vis-cv{display:none;pointer-events:none}
.sx-vis-ui{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(26px,3.4vw,44px)}
.sx-vis-k{max-width:34ch}
.sx-vis-bs{display:grid;gap:clamp(18px,2.4vw,28px)}
.sx-vis-b{font-family:var(--fx);font-weight:200;font-size:clamp(30px,3.8vw,58px);line-height:1.08;letter-spacing:-.025em;color:var(--t1);max-width:17ch;text-wrap:balance}

/* Movimiento reducido: rótulo, dibujo en su estado final y frases, uno tras otro. */
.sx-vis-js:not(.sx-vis-on) .sx-vis-st{display:flex;flex-direction:column}
.sx-vis-js:not(.sx-vis-on) .sx-vis-ui{display:contents}
.sx-vis-js:not(.sx-vis-on) .sx-vis-k,.sx-vis-js:not(.sx-vis-on) .sx-vis-bs{width:min(90%,1280px);margin-inline:auto}
.sx-vis-js:not(.sx-vis-on) .sx-vis-cv{display:block;order:1;width:100%;height:min(64svh,620px);margin-block:clamp(18px,3vw,36px)}
.sx-vis-js:not(.sx-vis-on) .sx-vis-bs{order:2}

/* Con movimiento: la sección es alta y el escenario se queda fijo mientras dura. */
.sx-vis-on{height:300svh}
.sx-vis-on .sx-vis-st{position:sticky;top:0;height:100svh;overflow:hidden}
.sx-vis-on .sx-vis-cv{display:block;position:absolute;inset:0;width:100%;height:100%}
.sx-vis-on .sx-vis-ui{height:100svh;justify-content:space-between;padding:calc(24px + 55px + clamp(22px,4.5svh,48px)) 0 clamp(34px,7svh,78px)}
.sx-vis-on .sx-vis-bs{gap:0}
.sx-vis-on .sx-vis-b{grid-area:1/1;align-self:end;--o:clamp(0,min(calc((var(--p,0) - var(--a)) / .05),calc((var(--z) - var(--p,0)) / .05)),1);opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 18px))}

/* ---------- Clear Flow y Human First, aplicados al servicio ---------- */
.sx-pri{padding-top:var(--sec);align-items:start}
.sx-pri .sx-h2{grid-column:1/6}
.sx-pri-l{grid-column:7/13;display:grid;gap:clamp(34px,3.6vw,52px);padding-top:.5em}
.sx-pri-c{padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line)}
.sx-pri-c .sx-p{margin-top:clamp(12px,1.4vw,18px)}

@media (max-width:1024px){
  .sx-pri .sx-h2,.sx-pri-l{grid-column:1/-1}
  .sx-pri-l{padding-top:0;margin-top:clamp(26px,3.4vw,40px)}
}
@media (max-width:900px){
  .sx-vis-on .sx-vis-ui{padding-top:calc(16px + 55px + clamp(18px,4svh,36px))}
}
@media (max-width:760px){
  .sx-vis-b{font-size:clamp(27px,7.4vw,40px);max-width:none}
  .sx-vis-js:not(.sx-vis-on) .sx-vis-cv{height:min(52svh,440px)}
}
@media print{
  .sx-vis-cv{display:none!important}
  .sx-vis-on{height:auto}
  .sx-vis-on .sx-vis-st{position:static;height:auto}
  .sx-vis-on .sx-vis-ui{height:auto}
  .sx-vis-on .sx-vis-b{opacity:1;transform:none;grid-area:auto}
}