/* ==========================================================================
   Mariona Agency 2028 · Fichas de servicio centradas (.sx.sx-c) — 28/10/26, leer antes de tocar.
   Variante de ma-servicio.css y ma-servicio-vis.css: el mismo contenido, todo en el eje
   central, como la portada de Servicios (Jacinto, 28/10: «al estilo Apple», que la vista no
   tenga que ir de izquierda a derecha; «todo muy aesthetic y fluido»).
   La clase sx-c y este fichero los pone mu-plugins/ma-servicio-centro.php en las fichas de su
   lista; sin ella, la ficha se ve como siempre. Los selectores van con .sx.sx-c para mandar
   sobre la versión de dos columnas sin tocarla.
   · Textos centrados con medida corta; cada bloque, de arriba abajo: rótulo, titular, texto.
   · Imágenes a 1080 px como máximo, centradas; las de los casos, encima de su texto.
   · Preguntas: columna centrada, con la pregunta alineada en ella (se lee mejor que centrada).
   · Movimiento: el mismo que la portada de Servicios; la apertura entra por capas y se enfoca; estado
     final siempre nítido (filter:none). El dibujo de «cómo entendemos» va en el centro, entre el
     rótulo y la frase (assets/js/ma-servicio-vis.js mira si la sección está dentro de .sx-c).
   · Orden de la ficha centrada (en el contenido de cada página): apertura, «cómo entendemos»,
     argumento, primera imagen, Clear Flow y Human First, alcance, criterio, proceso, casos,
     preguntas, relacionados y cierre.
   ========================================================================== */

.sx.sx-c{text-align:center;--rv:cubic-bezier(.19,1,.22,1)}
.sx.sx-c .sx-p{margin-inline:auto;max-width:54ch}
.sx.sx-c .sx-h2{margin-inline:auto;max-width:18ch}

/* ---------- Apertura ---------- */
.sx.sx-c .sx-hero{display:flex;flex-direction:column;align-items:center}
.sx.sx-c .sx-ed{margin-left:0;max-width:14ch}
.sx.sx-c .sx-heroB{display:block;width:100%;border-top:0;padding-top:0;margin-top:clamp(34px,4.4vw,64px)}
.sx.sx-c .sx-heroB::before{content:"";display:block;width:48px;height:1px;margin:0 auto clamp(26px,3vw,40px);background:var(--orange)}
.sx.sx-c .sx-heroB .sx-p{max-width:52ch;margin-inline:auto}
/* Entra por capas y se enfoca; la línea naranja se dibuja desde el centro */
@keyframes sx-cin{from{opacity:0;transform:translate3d(0,26px,0);filter:blur(8px)}}
@keyframes sx-ced{from{opacity:0;transform:translate3d(0,.3em,0);filter:blur(12px)}}
@keyframes sx-cline{from{transform:scaleX(0)}}
.sx.sx-c .sx-hero>*{animation:sx-cin 1.4s var(--rv) both}
.sx.sx-c .sx-hero>.sx-h1{animation-delay:.08s}
.sx.sx-c .sx-hero>.sx-ed{animation:sx-ced 1.7s var(--rv) .16s both}
.sx.sx-c .sx-hero>.sx-heroB{animation-delay:.42s}
.sx.sx-c .sx-heroB::before{animation:sx-cline 1.4s var(--rv) .56s both}

/* ---------- Argumento, criterio y cierre: de arriba abajo ---------- */
.sx.sx-c .sx-arg,.sx.sx-c .sx-crit,.sx.sx-c .sx-close{display:flex;flex-direction:column;align-items:center}
.sx.sx-c .sx-arg .sx-txt{padding-top:0;margin-top:clamp(26px,3vw,40px)}
.sx.sx-c .sx-crit .sx-h2,.sx.sx-c .sx-close .sx-h2{max-width:16ch}
.sx.sx-c .sx-crit .sx-p,.sx.sx-c .sx-close .sx-p{margin-inline:auto}

/* ---------- Primera prueba visual ---------- */
.sx.sx-c .sx-wide{max-width:1080px;margin-inline:auto}

/* ---------- Cómo entendemos el servicio: rótulo arriba, dibujo en el centro, frase abajo ----------
   Va justo después de la apertura y con protagonismo (Jacinto, 28/10: estas animaciones son lo que más
   le gusta; que enganchen nada más empezar). El dibujo ocupa el 76 % de la cápsula (ma-servicio-vis.js)
   y crece hasta su sitio mientras el escenario entra, con la línea de tiempo del scroll donde el
   navegador la tiene; donde no, aparece ya a su tamaño. Las frases, en dos líneas, dejan sitio al dibujo. */
.sx.sx-c .sx-vis-ui{align-items:center;text-align:center}
.sx.sx-c .sx-vis-k{margin-inline:auto;max-width:none}
.sx.sx-c .sx-vis-bs{justify-items:center}
.sx.sx-c .sx-vis-b{margin-inline:auto;max-width:24ch}
@supports (animation-timeline:view()){
  /* la línea de tiempo es la de la sección (no la del lienzo, que va dentro de un escenario fijo):
     su entrada va desde que asoma por abajo hasta poco antes de que el escenario se fije, para que se fije
     ya a tamaño real y nítido */
  @keyframes sx-cvin{from{opacity:.2;transform:scale(.86)}}
  .sx.sx-c .sx-vis-on{view-timeline-name:--sx-vis}
  .sx.sx-c .sx-vis-on .sx-vis-cv{animation:sx-cvin linear both;animation-timeline:--sx-vis;animation-range:entry 0% entry 90%}
}

/* ---------- Clear Flow y Human First: uno debajo del otro ---------- */
.sx.sx-c .sx-pri{display:flex;flex-direction:column;align-items:center}
.sx.sx-c .sx-pri-l{width:100%;max-width:62ch;margin-top:clamp(36px,4vw,56px);padding-top:0;gap:clamp(40px,4.4vw,64px)}
.sx.sx-c .sx-pri-c{border-top:0;padding-top:0}
.sx.sx-c .sx-pri-c::before{content:"";display:block;width:40px;height:1px;margin:0 auto clamp(18px,2vw,26px);background:var(--line)}

/* ---------- Alcance y proceso: cada fila en el eje ---------- */
.sx.sx-c .sx-scope .sx-h2{max-width:20ch}
.sx.sx-c .sx-rows,.sx.sx-c .sx-steps{max-width:860px;margin-inline:auto}
.sx.sx-c .sx-row,.sx.sx-c .sx-step{display:flex;flex-direction:column;align-items:center;gap:12px}
.sx.sx-c .sx-row::before{transform-origin:50% 50%}
.sx.sx-c .sx-row h3{padding-right:0;max-width:24ch;text-wrap:balance}
.sx.sx-c .sx-row p,.sx.sx-c .sx-step p{max-width:54ch}
.sx.sx-c .sx-n{margin:0}
.sx.sx-c .sx-sheet .sx-h2{max-width:20ch}

/* ---------- Casos: la imagen encima de su texto ---------- */
.sx.sx-c .sx-case,.sx.sx-c .sx-case.sx-rev{display:flex;flex-direction:column;align-items:center}
.sx.sx-c .sx-cimg,.sx.sx-c .sx-case.sx-rev .sx-cimg{order:0;width:min(100%,1080px)}
.sx.sx-c .sx-ctx,.sx.sx-c .sx-case.sx-rev .sx-ctx{order:1;max-width:58ch;margin-top:clamp(26px,3vw,40px)}

/* ---------- Preguntas: columna centrada ---------- */
.sx.sx-c .sx-faq{display:flex;flex-direction:column;align-items:center}
.sx.sx-c .sx-faq .sx-h2{max-width:20ch}
.sx.sx-c .sx-faql{width:100%;max-width:820px;margin-top:clamp(30px,3.4vw,48px);text-align:left}

/* ---------- Servicios relacionados: una nube centrada ---------- */
.sx.sx-c .sx-rel ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin-inline:auto}
.sx.sx-c .sx-rel a{display:inline-flex;gap:10px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;font-size:clamp(15px,1.15vw,17.5px);transition:border-color .3s,color .3s}
.sx.sx-c .sx-rel a::after{content:none}
.sx.sx-c .sx-rel a:hover{border-color:var(--orange)}

/* ---------- Cierre ---------- */
.sx.sx-c .sx-btn{justify-self:auto}

/* ---------- Movimiento: el de la portada de Servicios ---------- */
.sx.sx-c.sx-js .sx-rv{opacity:0;transform:translate3d(0,34px,0);filter:blur(6px)}
.sx.sx-c.sx-js .sx-rv.sx-in{opacity:1;transform:none;filter:none;
  transition:opacity 1.1s var(--rv) var(--d,0s),transform 1.4s var(--rv) var(--d,0s),filter 1.1s var(--rv) var(--d,0s)}
/* Imágenes de los casos y primera prueba: se abren desde dentro */
.sx.sx-c.sx-js .sx-case.sx-rv{filter:none}
.sx.sx-c.sx-js .sx-fv .sx-wide.sx-rv,.sx.sx-c.sx-js .sx-case.sx-rv .sx-cimg{clip-path:inset(6% 6% 6% 6% round var(--r))}
.sx.sx-c.sx-js .sx-fv .sx-wide.sx-rv{opacity:1;transform:none;filter:none}
.sx.sx-c.sx-js .sx-fv .sx-wide.sx-rv img,.sx.sx-c.sx-js .sx-case.sx-rv .sx-cimg img{transform:scale(1.1)}
.sx.sx-c.sx-js .sx-fv .sx-wide.sx-in,.sx.sx-c.sx-js .sx-case.sx-in .sx-cimg{clip-path:inset(0 0 0 0 round var(--r));transition:clip-path 1.6s var(--rv)}
.sx.sx-c.sx-js .sx-fv .sx-wide.sx-in img,.sx.sx-c.sx-js .sx-case.sx-in .sx-cimg img{transform:none;transition:transform 2s var(--rv)}
.sx.sx-c.sx-js .sx-case.sx-in .sx-cimg:hover img{transform:scale(1.02);transition:transform 1.2s var(--ease)}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .sx.sx-c .sx-n{margin:0}
  .sx.sx-c .sx-row p,.sx.sx-c .sx-step p{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .sx.sx-c .sx-hero>*,.sx.sx-c .sx-heroB::before{animation:none}
  .sx.sx-c .sx-cimg img,.sx.sx-c .sx-wide img{transition:none}
}