/* Softelec · motion (versión final unificada) — solo portada.
   Se carga DESPUÉS de sx.css. Todo vive bajo @media (prefers-reduced-motion:no-preference)
   y bajo html.mo (clase que agrega motion.js solo en body.sx .sx-home). Sin JS o con
   movimiento reducido, la portada queda exactamente como hoy (salvo nada: no hay estados ocultos).
   Propiedades animadas: transform / translate / scale / opacity / filter / clip-path
   (+ stroke-dashoffset en íconos SVG, que no afecta el layout). */

:root{--mo-e:cubic-bezier(.16,1,.3,1);--mo-e2:cubic-bezier(.22,.61,.36,1);--mo-io:cubic-bezier(.65,0,.35,1);--mo-soft:cubic-bezier(.45,0,.2,1);--mo-hc:6500ms}

@media (prefers-reduced-motion:no-preference){

/* ════════ 1. Primer pantallazo: entrada coreografiada tras la pantalla de carga ════════ */
@keyframes mo-up{from{opacity:0;transform:translate3d(0,var(--mo-y,18px),0)}to{opacity:1;transform:none}}
@keyframes mo-line{from{opacity:0;transform:translate3d(0,.42em,0);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mo-card{from{opacity:0;transform:translate3d(0,22px,0) scale(.975);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* motion.js anima el hero: se neutraliza el .reveal genérico solo dentro de .fold */
html.mo body.sx .sx-home.mo-hero .fold .reveal{opacity:1;transform:none;transition:none}
html.mo body.sx .sx-home.mo-hero .hero-d .h-hero>span{display:inline-block}

html.mo body.sx .sx-home.mo-hero:not(.mo-go) :is(.hero-d .eyebrow,.hero-d .h-hero>span,.hero-d .lead,.hero-d .ctas,.hero-d .hero-search,.hero-d .hc,.hero-d .hc-th,.fold .catrow li){opacity:0}

html.mo body.sx .sx-home.mo-go .hero-d .eyebrow{--mo-y:10px;animation:mo-up .8s var(--mo-e) both}
html.mo body.sx .sx-home.mo-go .hero-d .h-hero>span{animation:mo-line 1.05s var(--mo-e) .08s both}
html.mo body.sx .sx-home.mo-go .hero-d .h-hero>span+br+span{animation-delay:.2s}
html.mo body.sx .sx-home.mo-go .hero-d .lead{animation:mo-up .9s var(--mo-e) .34s both}
html.mo body.sx .sx-home.mo-go .hero-d .ctas{animation:mo-up .9s var(--mo-e) .44s both}
html.mo body.sx .sx-home.mo-go .hero-d .hero-search{animation:mo-up .9s var(--mo-e) .52s both}
html.mo body.sx .sx-home.mo-go .hero-d .hc{animation:mo-card 1.2s var(--mo-e) .16s both}
html.mo body.sx .sx-home.mo-go .hero-d .hc-th{--mo-y:8px;animation:mo-up .7s var(--mo-e) both;animation-delay:calc(.62s + var(--mo-i,0)*55ms)}
html.mo body.sx .sx-home.mo-go .fold .catrow li{--mo-y:14px;animation:mo-up .8s var(--mo-e) both;animation-delay:calc(.5s + var(--mo-i,0)*45ms)}
/* Terminada la entrada se sueltan las animaciones: sin capas ni filtros residuales */
html.mo body.sx .sx-home.mo-ready :is(.hero-d .eyebrow,.hero-d .h-hero>span,.hero-d .lead,.hero-d .ctas,.hero-d .hero-search,.hero-d .hc,.hero-d .hc-th,.fold .catrow li){animation:none}

/* ════════ 2. Vitrina del hero (.hc): cambio de producto, pie por partes y barra de avance ════════ */
html.mo body.sx .sx-home .hc-slide{transition:opacity .9s var(--mo-e2),visibility .9s}
html.mo body.sx .sx-home .hc-slide .hc-img img{opacity:0;transform:translate3d(18px,0,0) scale(.965);
  transition:transform 1.1s var(--mo-e),opacity .7s var(--mo-e2),scale 1.2s var(--mo-e2)}
html.mo body.sx .sx-home .hc-slide.is-on .hc-img img{opacity:1;transform:none;transition-delay:.08s,.08s,0s}
/* acercamiento lento mientras el producto está activo */
html.mo body.sx .sx-home .hc.mo-run .hc-slide.is-on .hc-img img{scale:1.035;
  transition:transform 1.1s var(--mo-e) .08s,opacity .7s var(--mo-e2) .08s,scale var(--mo-hc) linear}
html.mo body.sx .sx-home .hc-slide .hero-cap>*{opacity:0;translate:0 8px;transition:opacity .35s var(--mo-e2),translate .5s var(--mo-e)}
html.mo body.sx .sx-home .hc-slide.is-on .hero-cap>*{opacity:1;translate:0 0;transition-duration:.6s,.8s}
html.mo body.sx .sx-home .hc-slide.is-on .hero-cap>:nth-child(1){transition-delay:.18s}
html.mo body.sx .sx-home .hc-slide.is-on .hero-cap>:nth-child(2){transition-delay:.24s}
html.mo body.sx .sx-home .hc-slide.is-on .hero-cap>:nth-child(3){transition-delay:.30s}
html.mo body.sx .sx-home .hc-slide.is-on .hero-cap>:nth-child(4){transition-delay:.36s}
/* barra de avance de 2 px sobre la línea superior del pie (funciona también en móvil, sin miniaturas) */
html.mo body.sx .sx-home .hc .hero-cap{position:relative}
html.mo body.sx .sx-home .hc .hero-cap::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:2px;
  background:var(--c-brand,#304f72);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
html.mo body.sx .sx-home .hc.mo-run .hc-slide.is-on .hero-cap::before{opacity:1;animation:mo-prog var(--mo-hc) linear forwards}
html.mo body.sx .sx-home .hc.mo-run.mo-hold .hc-slide.is-on .hero-cap::before{animation-play-state:paused;opacity:.35;transition:opacity .3s}
@keyframes mo-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.mo body.sx .sx-home .hero-d .hc-th img{transition:scale .5s var(--mo-e)}
html.mo body.sx .sx-home .hero-d .hc-th.is-on img{scale:1.06}

/* ════════ 3. Titulares de sección: cada palabra sube detrás de su recorte ════════ */
html.mo body.sx .sx-home .mo-w{display:inline-block;clip-path:inset(-.3em -.2em -.12em -.2em)}
html.mo body.sx .sx-home .mo-w>span{display:inline-block;translate:0 110%;opacity:0;
  transition:translate 1s var(--mo-e),opacity .55s var(--mo-e2);transition-delay:calc(var(--mo-d,0ms) + var(--w,0)*42ms)}
html.mo body.sx .sx-home .mo-in .mo-w>span{translate:0 0;opacity:1}
html.mo body.sx .sx-home .mo-done .mo-w{clip-path:none}
html.mo body.sx .sx-home .mo-done .mo-w>span{transition:none}

/* ════════ 4. Entradas escalonadas (motion.js usa la Web Animations API) ════════ */
html.mo body.sx .sx-home .mo-pre{opacity:0}

/* ════════ 5. Íconos de línea que se dibujan (IA, pasos, sectores) ════════ */
html.mo body.sx .sx-home .mo-ic .ic :is(path,circle,rect,line,polyline,polygon,ellipse){
  stroke-dasharray:1 1;stroke-dashoffset:1.002;transition:stroke-dashoffset 1s var(--mo-io) var(--mo-d,0ms)}
html.mo body.sx .sx-home .mo-ic.mo-on .ic :is(path,circle,rect,line,polyline,polygon,ellipse){stroke-dashoffset:0}
html.mo body.sx .sx-home .mo-ic.mo-fin .ic :is(path,circle,rect,line,polyline,polygon,ellipse){stroke-dasharray:none;transition:none}
html.mo body.sx .sx-home :is(.iaf-ic,.step-ic).mo-ic{scale:.88;opacity:.6;transition:scale .8s var(--mo-e) var(--mo-d,0ms),opacity .8s var(--mo-e2) var(--mo-d,0ms)}
html.mo body.sx .sx-home :is(.iaf-ic,.step-ic).mo-ic.mo-on{scale:1;opacity:1}

/* ════════ 6. Mosaico de sectores: la foto se asienta y acompaña el scroll (parallax en escritorio) ════════ */
html.mo body.sx .sx-home .sxt img{top:-8%;bottom:auto;height:116%;scale:1.1;transition:transform .9s var(--ease),scale 1.6s var(--mo-e)}
html.mo body.sx .sx-home .sxt.in img{scale:1}

/* ════════ 7. Bloque de IA: ambiente lento + flujo de datos entre los 6 servicios ════════ */
html.mo body.sx .sx-home .iaf{isolation:isolate}
html.mo body.sx .sx-home .iaf>*{position:relative;z-index:1}
html.mo body.sx .sx-home :is(.iaf,.cta-band)::before{content:"";position:absolute;inset:-35%;z-index:0;pointer-events:none;
  background:
    radial-gradient(32% 30% at 26% 34%,rgba(237,180,91,.15),rgba(237,180,91,0) 72%),
    radial-gradient(36% 34% at 74% 68%,rgba(132,170,214,.2),rgba(132,170,214,0) 72%),
    radial-gradient(28% 26% at 62% 18%,rgba(255,255,255,.06),rgba(255,255,255,0) 70%);
  animation:mo-drift 26s var(--mo-soft) infinite alternate;animation-play-state:paused}
@keyframes mo-drift{
  0%{transform:translate3d(-5%,-3%,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(4%,3%,0) rotate(6deg) scale(1.06)}
  100%{transform:translate3d(-2%,5%,0) rotate(-4deg) scale(1.02)}}
html.mo body.sx .sx-home .iaf::after{animation:mo-breathe 9s var(--mo-soft) infinite alternate;animation-play-state:paused}
@keyframes mo-breathe{from{transform:scale(1);opacity:.7}to{transform:scale(1.12);opacity:1}}
html.mo body.sx .sx-home .iaf.mo-play::before,html.mo body.sx .sx-home .cta-band.mo-play::before,html.mo body.sx .sx-home .iaf.mo-play::after{animation-play-state:running}
html.mo body.sx .sx-home .cta-band{position:relative;overflow:hidden;isolation:isolate}
html.mo body.sx .sx-home .cta-band::before{animation-duration:34s;animation-direction:alternate-reverse}
html.mo body.sx .sx-home .cta-band>.wrap{position:relative;z-index:1}

html.mo body.sx .sx-home .mo-flow{position:absolute;inset:0;pointer-events:none;z-index:2}
html.mo body.sx .sx-home .mo-tr{position:absolute;height:1px;overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(237,180,91,.32) 0 3px,rgba(237,180,91,0) 3px 7px);
  transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--mo-e)}
html.mo body.sx .sx-home .iaf.mo-seen .mo-tr{transform:none;transition-delay:calc(.9s + var(--mo-i,0)*120ms)}
html.mo body.sx .sx-home .mo-tr i{position:absolute;inset:0 auto 0 0;width:38%;height:1px;
  background:linear-gradient(90deg,rgba(243,207,148,0),#f3cf94 70%,rgba(255,255,255,.95));box-shadow:0 0 6px rgba(243,207,148,.55);
  opacity:0;transform:translate3d(-100%,0,0);animation:mo-comet var(--mo-T,7.2s) linear infinite;animation-delay:var(--mo-d,0s);animation-play-state:paused}
@keyframes mo-comet{0%{transform:translate3d(-100%,0,0);opacity:0}2%{opacity:1}13%{opacity:1}15.5%{transform:translate3d(263%,0,0);opacity:0}100%{transform:translate3d(263%,0,0);opacity:0}}
/* pulso del ícono cuando "le llega" el dato */
html.mo body.sx .sx-home .iaf-ic{position:relative}
html.mo body.sx .sx-home .iaf-ic::before,html.mo body.sx .sx-home .iaf-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
html.mo body.sx .sx-home .iaf-ic::before{background:rgba(237,180,91,.24);animation:mo-glow var(--mo-T,7.2s) var(--mo-soft) infinite;animation-delay:var(--mo-d,0s);animation-play-state:paused}
html.mo body.sx .sx-home .iaf-ic::after{border:1px solid rgba(243,207,148,.7);animation:mo-ring var(--mo-T,7.2s) cubic-bezier(.2,.6,.3,1) infinite;animation-delay:var(--mo-d,0s);animation-play-state:paused}
@keyframes mo-glow{0%{opacity:0}3%{opacity:1}16%{opacity:0}100%{opacity:0}}
@keyframes mo-ring{0%{opacity:0;transform:scale(1)}2%{opacity:.9;transform:scale(1)}14%{opacity:0;transform:scale(1.55)}100%{opacity:0;transform:scale(1.55)}}
html.mo body.sx .sx-home .iaf.mo-flowing.mo-play .mo-tr i,
html.mo body.sx .sx-home .iaf.mo-flowing.mo-play .iaf-ic::before,
html.mo body.sx .sx-home .iaf.mo-flowing.mo-play .iaf-ic::after{animation-play-state:running}
html.mo body.sx .sx-home .iaf-ic .ic{position:relative;z-index:1}

/* ════════ 8. Cómo trabajamos: la línea de cada paso se llena con el scroll ════════ */
html.mo body.sx .sx-home .steps-4.mo-steps .step{position:relative}
html.mo body.sx .sx-home .steps-4.mo-steps .step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;pointer-events:none;
  background:var(--c-brand,#304f72);transform:scaleX(var(--mo-p,0));transform-origin:left center}

/* ════════ 9. Banda de Salas: la foto (16:7 escritorio, 4:3 móvil, en flujo) se abre desde un marco y tiene parallax ════════ */
html.mo body.sx .sx-home .mo-ph{position:relative;display:block;overflow:hidden;border-radius:18px;
  clip-path:inset(7% 5% 7% 5% round 26px);transition:clip-path 1.5s var(--mo-e)}
html.mo body.sx .sx-home .mo-ph.mo-in{clip-path:inset(0 0 0 0 round 18px)}
html.mo body.sx .sx-home .mo-ph img{scale:1.14;transition:scale 1.8s var(--mo-e)}
html.mo body.sx .sx-home .mo-ph.mo-in img{scale:1.1}

/* ════════ 10. Destacado y dúo: el producto sube dentro de su tarjeta ════════ */
html.mo body.sx .sx-home .feature .feature-img img{translate:0 28px;scale:.96;opacity:0;transition:translate 1.3s var(--mo-e) .15s,scale 1.3s var(--mo-e) .15s,opacity .8s var(--mo-e2) .15s}
html.mo body.sx .sx-home .feature.in .feature-img img{translate:0 0;scale:1;opacity:1}
html.mo body.sx .sx-home .duo .tile img{translate:0 44px;transition:translate 1.4s var(--mo-e) .12s}
html.mo body.sx .sx-home .duo .tile.in img{translate:0 0}

/* ════════ 11. Marcas: marquesina continua de dos filas, pausable ════════
   La forma de dos filas se aplica desde el CSS (sin esperar al JS) para que no haya salto de diseño. */
body.sx .sx-home #marcas .brands{grid-auto-flow:column;grid-template-columns:none!important;grid-template-rows:repeat(2,96px);
  grid-auto-columns:176px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
body.sx .sx-home #marcas .brands::-webkit-scrollbar{display:none}
body.sx .sx-home #marcas .brands li{box-shadow:none}
body.sx .sx-home #marcas .brands .mk-mas{display:none}
body.sx .sx-home #marcas .brands a{height:96px;padding:0 18px}
body.sx .sx-home #marcas .mq{position:relative;overflow:hidden;border:1px solid var(--c-fill);border-radius:16px;background:#fff;contain:paint}
body.sx .sx-home #marcas .mq .brands{border:0;border-radius:0;overflow:visible;background:transparent;flex:none;transform:none;opacity:1}
body.sx .sx-home #marcas .mq-track{display:flex;width:max-content;animation:mo-mq var(--mq-dur,95s) linear infinite}
body.sx .sx-home #marcas .mq::before,body.sx .sx-home #marcas .mq::after{content:"";position:absolute;top:0;bottom:0;width:96px;z-index:1;pointer-events:none}
body.sx .sx-home #marcas .mq::before{left:0;background:linear-gradient(90deg,#fff 10%,rgba(255,255,255,0))}
body.sx .sx-home #marcas .mq::after{right:0;background:linear-gradient(270deg,#fff 10%,rgba(255,255,255,0))}
body.sx .sx-home #marcas .mq:is(.is-paused,.is-away,:focus-within) .mq-track{animation-play-state:paused}
body.sx .sx-home #marcas .mq-btn{position:absolute;right:10px;bottom:10px;z-index:2;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;padding:0;border:1px solid var(--c-fill);background:rgba(255,255,255,.92);
  color:var(--c-text-2);cursor:pointer;opacity:0;transition:opacity .25s,color .2s}
body.sx .sx-home #marcas .mq:is(:hover,.is-paused) .mq-btn,body.sx .sx-home #marcas .mq-btn:focus-visible{opacity:1}
body.sx .sx-home #marcas .mq-btn svg{width:12px;height:12px;display:block}
@keyframes mo-mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ════════ 12. Botones: leve presión al tocar ════════ */
html.mo body.sx .sx-home .btn:active{scale:.97}
html.mo body.sx .sx-home .btn{transition:background .2s,color .2s,border-color .2s,scale .18s var(--mo-e2)}

/* ════════ Escritorio con ratón ════════ */
@media (hover:hover) and (pointer:fine){
  body.sx .sx-home #marcas .mq:hover .mq-track{animation-play-state:paused}
}
@media (hover:none){body.sx .sx-home #marcas .mq-btn{opacity:.85}}

/* ════════ Móvil: recorridos más cortos, sin parallax en el mosaico, sin desenfoques ════════ */
@media (max-width:734px){
  @keyframes mo-line{from{opacity:0;transform:translate3d(0,.3em,0)}to{opacity:1;transform:none}}
  @keyframes mo-card{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
  html.mo body.sx .sx-home .sxt img{top:0;height:100%;scale:1.06}
  html.mo body.sx .sx-home :is(.iaf,.cta-band)::before{inset:-20%;animation-duration:40s}
  html.mo body.sx .sx-home .iaf::after{animation:none}
  html.mo body.sx .sx-home .mo-ph{clip-path:inset(5% 4% 5% 4% round 22px)}
  html.mo body.sx .sx-home .mo-ph.mo-in{clip-path:inset(0 0 0 0 round 18px)}
  html.mo body.sx .sx-home .mo-ph img{scale:1.08}
  html.mo body.sx .sx-home .mo-ph.mo-in img{scale:1.06}
  html.mo body.sx .sx-home .duo .tile img{translate:0 24px}
  body.sx .sx-home #marcas .brands{grid-template-rows:repeat(2,76px);grid-auto-columns:128px}
  body.sx .sx-home #marcas .brands a{height:76px;padding:0 12px}
  body.sx .sx-home #marcas .mq::before,body.sx .sx-home #marcas .mq::after{width:40px}
}

}/* fin prefers-reduced-motion:no-preference */