/* Landing motion system · estilos de los módulos de motion.js.
   Tokens que debe definir el sitio en :root:
   --accent, --accent-hi, --accent-glow (rgba), --accent-dim (rgba), --wait (color de «en espera»),
   --text, --bg-3, --line-2, --ease (cubic-bezier(.2,.7,.2,1)), --ease-io (cubic-bezier(.65,0,.35,1)).
   Todo lo que oculta contenido vive bajo .js-motion: sin JS o con movimiento reducido, todo se ve. */

/* Transiciones entre páginas (View Transitions entre documentos) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  [data-vt-header]{view-transition-name:site-header}
  ::view-transition-old(root){animation:m-vt-out .2s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:m-vt-in .45s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes m-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes m-vt-in{from{opacity:0;transform:translateY(12px)}}

/* Progreso de lectura: el header (posicionado) lleva data-readbar */
@supports (animation-timeline:scroll()){
  .js-motion [data-readbar]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transform:scaleX(0);transform-origin:left;animation:m-readbar linear both;animation-timeline:scroll(root)}
  @keyframes m-readbar{to{transform:scaleX(1)}}
}

/* Titulares palabra por palabra */
.js-motion [data-split="load"]:not(.is-split){opacity:0;animation:m-show .01s 1.2s forwards}   /* fallo seguro si el JS no corre */
@keyframes m-show{to{opacity:1}}
.js-motion .is-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.js-motion .is-split .w > *{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.js-motion .is-split.in .w > *{transform:none}

/* Entradas al hacer scroll */
.js-motion .rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i,0) * 55ms)}
.js-motion .rv.in{opacity:1;transform:none}

/* Coreografías: translate no pisa los transform propios de cada pieza */
.js-motion .chor-wait .c-item{opacity:0;translate:0 12px}
.js-motion .chor-go .c-item{animation:m-c-in .7s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes m-c-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:none}}
@keyframes m-c-in-x{from{opacity:0;translate:18px 0}to{opacity:1;translate:none}}
@keyframes m-c-pop{0%{opacity:0;scale:.4}60%{opacity:1;scale:1.12}100%{scale:1}}
.js-motion .chor-go .c-pop.c-item{animation-name:m-c-pop}
.js-motion .chor-go .c-x.c-item{animation-name:m-c-in-x}

/* Consolas en vivo */
.feed li.enter{animation:m-rowin .7s var(--ease) both}
.js .feed li.enter{animation:none}
@keyframes m-rowin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.feed li.leave{height:0!important;padding-block:0!important;opacity:0;border-top-color:transparent!important;overflow:hidden;transition:height .55s var(--ease),padding .55s var(--ease),opacity .3s}
.feed li.fresh{background:var(--accent-dim)}
.js-motion .live-dot{animation:m-livepulse 2.2s ease-in-out infinite}
.js-motion .is-typing .live-dot{animation-duration:.7s}
.is-typing .live-label::after{content:"...";display:inline-block;overflow:hidden;vertical-align:bottom;width:0;animation:m-dots 1s steps(4,end) infinite}
@keyframes m-livepulse{50%{box-shadow:0 0 0 4px var(--accent-dim),0 0 12px var(--accent-glow)}}
@keyframes m-dots{to{width:4ch}}
[data-kpi]{display:inline-block;transform-origin:left bottom}
[data-kpi].bump{animation:m-bump .9s var(--ease)}
@keyframes m-bump{0%{scale:1}25%{scale:1.14;color:var(--accent-hi)}100%{scale:1;color:var(--text)}}

/* Recorrido por pestañas: la barra de cada pestaña se llena mientras avanza solo */
[data-walkthrough] [role="tab"] .bar{position:relative;display:block;height:2px;overflow:hidden;background:var(--line-2)}
[data-walkthrough] [role="tab"] .bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
[data-walkthrough] [role="tab"][aria-selected="true"] .bar::after{transform:scaleX(1)}
.js-motion [data-walkthrough].is-auto [role="tab"][aria-selected="true"] .bar::after{animation:m-fill var(--wt-dur) linear forwards}
.js-motion [data-walkthrough].is-paused [role="tab"][aria-selected="true"] .bar::after{animation-play-state:paused}
@keyframes m-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js-motion [data-walkthrough] [role="tabpanel"]:not([hidden]){animation:m-panelin .6s var(--ease) both}
@keyframes m-panelin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Selector segmentado con indicador deslizante (el .seg debe tener position:relative) */
.seg-ind{display:none}
.seg.has-ind .seg-ind{display:block;position:absolute;left:0;top:0;border-radius:999px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);pointer-events:none;transition:transform .5s cubic-bezier(.34,1.35,.5,1),width .45s var(--ease),height .45s var(--ease)}
.seg.has-ind label{position:relative;z-index:1}
.seg.has-ind input:checked + span{background:transparent;box-shadow:none}

/* Estados que esperan aprobación: respiran (color de espera, nunca el acento) */
.js-motion [data-wait-pulse]::before{animation:m-waitpulse 2.4s ease-in-out infinite}
@keyframes m-waitpulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--wait) 14%,transparent)}}

/* Ciclo: el paso actual se enciende, los recorridos quedan hechos */
[data-cycle] > li{transition:color .45s}
[data-cycle] > li.lit{color:var(--text)}

/* Líneas que se dibujan */
svg[data-draw] .draw-dot{transform-box:fill-box;transform-origin:center}
.js-motion svg.draw-wait .draw-line{stroke-dasharray:1;stroke-dashoffset:1}
.js-motion svg.draw-wait .draw-area,.js-motion svg.draw-wait .draw-dot{opacity:0}
.js-motion svg.draw .draw-line{stroke-dasharray:1;animation:m-draw 1.6s var(--ease-io) both}
.js-motion svg.draw .draw-area{animation:m-fade .9s .9s var(--ease) both}
.js-motion svg.draw .draw-dot{animation:m-c-pop .6s 1.45s var(--ease) both}
@keyframes m-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes m-fade{from{opacity:0}}

/* Luz bajo el puntero */
[data-glow]{position:relative}
[data-glow]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx,-999px) var(--my,-999px),var(--accent-dim),transparent 60%);opacity:0;transition:opacity .35s}
.js-motion [data-glow]:hover::after{opacity:1}

/* Botón magnético y brillo (agregar «translate» a la transición propia del botón) */
.js-motion [data-magnetic]{translate:var(--tx,0px) var(--ty,0px)}
.btn-sheen{position:relative;overflow:hidden}
.btn-sheen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);translate:-130% 0}
.js-motion .btn-sheen:hover::after{translate:130% 0;transition:translate .85s var(--ease)}

/* Campo de símbolos: el canvas ocupa su contenedor; el SVG estático queda de respaldo sin JS */
canvas[data-symbol-field]{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.field-on [data-field-fallback]{visibility:hidden}

/* Movimiento reducido: todo quieto y visible */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}