/* Movimiento: una sola secuencia de entrada en el héroe y, al bajar, el suaje que se corta y se dobla.
   Todo se apaga con «reducir movimiento». Sin JS el contenido se ve completo (las clases las pone movimiento.js). */
@media (prefers-reduced-motion:no-preference){

  /* 1. Entrada del héroe: el texto sube en orden, luego cae el sello (ya existía) y corre la flauta */
  .heroe h1,.heroe__sub,.heroe__acciones,.heroe__datos{animation:subir .7s cubic-bezier(.2,.7,.2,1) both}
  .heroe__sub{animation-delay:.12s}
  .heroe__acciones{animation-delay:.22s}
  .heroe__datos{animation-delay:.32s}
  .sello{animation-delay:.55s}
  @keyframes subir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  .flauta path:last-child{stroke-dasharray:var(--largo,4000);stroke-dashoffset:var(--largo,4000);animation:trazar 1.6s .5s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes trazar{to{stroke-dashoffset:0}}

  /* El sello, una vez puesto, respira muy despacio como tinta fresca */
  .sello svg{animation:tinta 7s 1.4s ease-in-out infinite}
  @keyframes tinta{0%,100%{opacity:1}50%{opacity:.86}}

  /* 2. Revelado al entrar en pantalla */
  .mov .revelar{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--retraso,0s)}
  .mov .revelar.visto{opacity:1;transform:none}

  /* 3. Suajes: primero se corta la silueta, luego aparecen los dobleces y por último el cartón */
  .mov .suaje .corte path,.mov .suaje .corte rect,.mov .suaje .corte circle{
    fill-opacity:0;stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);
    transition:stroke-dashoffset 1.3s cubic-bezier(.45,0,.2,1) var(--retraso,0s),fill-opacity .6s ease calc(var(--retraso,0s) + 1.1s)}
  .mov .suaje .doblez path,.mov .suaje .flautas path{opacity:0;transition:opacity .5s ease calc(var(--retraso,0s) + .9s)}
  .mov .visto .suaje .corte path,.mov .visto .suaje .corte rect,.mov .visto .suaje .corte circle{stroke-dashoffset:0;fill-opacity:1}
  .mov .visto .suaje .doblez path,.mov .visto .suaje .flautas path{opacity:1}
  /* Al pasar el cursor, los dobleces «caminan» como línea de corte */
  .formato:hover .suaje .doblez path{animation:marcha 1s linear infinite}
  @keyframes marcha{to{stroke-dashoffset:-18}}
  .formato .suaje{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
  .formato:hover .suaje{transform:translateY(-4px);box-shadow:0 10px 24px -14px rgba(27,42,31,.45)}

  /* 4. Pasos del pedido: la línea de cada paso se tiende en secuencia */
  .mov .pasos li{border-top-color:transparent;position:relative}
  .mov .pasos li::after{content:"";position:absolute;left:0;top:-3px;height:3px;width:100%;background:var(--lima);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.4,0,.2,1) var(--retraso,0s)}
  .mov .pasos li.visto::after{transform:scaleX(1)}

  /* 5. Respuesta a lo que hace la persona */
  .barra{transition:box-shadow .3s ease}
  .barra.con-sombra{box-shadow:0 6px 18px -12px rgba(27,42,31,.5)}
  .resultado:not([hidden]){animation:subir .45s cubic-bezier(.2,.7,.2,1) both}
  .contador.salto{animation:salto .5s cubic-bezier(.3,1.6,.5,1)}
  @keyframes salto{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
  .agregar.listo{background:var(--verde)!important;color:var(--blanco)!important}
  .boton{transition:background-color .2s ease,color .2s ease,transform .15s ease}
  .boton:active{transform:translateY(1px) scale(.99)}
  .flotante{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .flotante:hover{transform:translateY(-3px)}
}