/* =========================================================
   Nativé · Movimiento compartido (página principal y producto)
   Todo el estado inicial vive bajo .motion-ready: sin JS o con
   "reducir movimiento" activado, la página se ve completa y quieta.
   ========================================================= */

/* Barra de progreso de lectura */
.mx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--forest),var(--leaf) 60%,var(--lime))}

/* Header que gana sombra al bajar */
.header{transition:box-shadow .35s ease,background-color .35s ease}
.header.is-scrolled{box-shadow:0 8px 24px -12px rgba(22,61,37,.22)}

/* Aparición de bloques */
.motion-ready [data-mx]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);will-change:opacity,transform}
.motion-ready [data-mx="left"]{transform:translate3d(-32px,0,0)}
.motion-ready [data-mx="right"]{transform:translate3d(40px,0,0)}
.motion-ready [data-mx="zoom"]{transform:scale(.94)}
.motion-ready [data-mx].mx-in{opacity:1;transform:none}

/* Imágenes que se descubren como una cortina */
.motion-ready [data-mx="wipe"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1);transition-delay:var(--d,0s)}
.motion-ready [data-mx="wipe"] img{transform:scale(1.18);transition:transform 1.8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.motion-ready [data-mx="wipe"].mx-in{clip-path:inset(0 0 0 0)}
.motion-ready [data-mx="wipe"].mx-in img{transform:scale(1)}

/* Títulos: cada palabra sube desde una máscara */
.mx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin:0 -.02em -.12em}
.motion-ready .mx-split .mx-w > span{display:inline-block;transform:translate3d(0,110%,0) rotate(4deg);transform-origin:0 100%;transition:transform 1.05s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i) * 60ms + var(--d,0s))}
.motion-ready .mx-split.mx-in .mx-w > span{transform:none}

/* Íconos de línea que se dibujan */
.motion-ready .mx-draw svg{stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--d,0s) + .2s)}
.motion-ready .mx-draw.mx-in svg{stroke-dashoffset:0}

/* Barras (calificación, stock) que se llenan */
.motion-ready .bar__fill,.motion-ready .stock__fill{transition:width 1.6s cubic-bezier(.2,.7,.2,1) .2s}

/* Cinta en movimiento */
.marquee{position:relative;overflow:hidden;background:var(--forest);color:#eef3e8;padding:18px 0;border-block:1px solid rgba(255,255,255,.06)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--forest),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--forest),transparent)}
.marquee__track{display:flex;width:max-content;animation:mx-marquee 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,30px);white-space:nowrap}
.marquee__item svg{width:22px;height:22px;color:var(--lime);flex:none;animation:mx-spin 9s linear infinite}
@keyframes mx-marquee{to{transform:translateX(-50%)}}
@keyframes mx-spin{to{transform:rotate(360deg)}}

/* Botones: la flecha avanza y el camión "arranca" */
.btn svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg:last-child{transform:translateX(4px)}
.btn:hover svg:first-child:not(:last-child){animation:mx-drive .7s cubic-bezier(.3,0,.2,1)}
@keyframes mx-drive{0%{transform:none}40%{transform:translateX(5px)}55%{transform:translateX(3px)}100%{transform:none}}

/* Precio que "salta" al cambiar de pack */
.mx-bump{animation:mx-bump .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes mx-bump{0%{transform:scale(1)}40%{transform:scale(1.12);color:var(--leaf)}100%{transform:scale(1)}}
.mx-pick{animation:mx-pick .6s ease}
@keyframes mx-pick{0%{box-shadow:0 0 0 0 rgba(79,138,43,.35)}100%{box-shadow:0 0 0 14px rgba(79,138,43,0)}}

/* Preguntas frecuentes con apertura suave */
.faq details > p{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .marquee__track,.marquee__item svg{animation:none}
}