/* Hoshi · animaciones con el mismo lenguaje que el panel de gestión de VisionForge */
.palabra{display:inline-block;white-space:nowrap}
.letra{display:inline-block;animation:letra .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 28ms + 80ms)}
@keyframes letra{from{opacity:0;transform:translateY(.45em);filter:blur(6px)}}
.cat__cab h2 .letra{animation-play-state:paused}
.cat__cab.visto h2 .letra{animation-play-state:running}

/* Cascada al entrar en pantalla */
.por-ver > *{opacity:0}
.por-ver.visto > *{opacity:1}
.por-ver.visto > *{animation:cascada .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--j, 0) * 70ms)}
.top__fila.por-ver.visto > *{animation-name:cascadaX}
.rejilla .plato{animation:none}
.rejilla.visto .plato{animation:cascada .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--j, 0) * 70ms)}
@keyframes cascada{from{opacity:0;transform:translateY(22px) scale(.985)}}
@keyframes cascadaX{from{opacity:0;transform:translateX(40px)}}
img{transition:opacity .5s ease}
img.cargando{opacity:0}

/* Portada: el plato del chef entra con calma */
.chef{animation:chefEntra 1s cubic-bezier(.2,.8,.2,1) both .25s}
@keyframes chefEntra{from{opacity:0;transform:translateY(24px) scale(.97)}}
.chef__info{animation:cascada .7s cubic-bezier(.2,.8,.2,1) both .9s}
.buscador{animation:cascada .7s cubic-bezier(.2,.8,.2,1) both .5s}
.portada p{animation:cascada .7s cubic-bezier(.2,.8,.2,1) both .35s}

/* Pista de bienvenida sobre el plato en 3D */
.pista{position:absolute;z-index:3;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:99px;background:var(--tinta);color:var(--papel);font-size:13.5px;font-weight:500;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);animation:pistaEntra .6s cubic-bezier(.34,1.4,.5,1) both;transition:opacity .5s,transform .5s}
.pista::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--tinta);transform:translateX(-50%) rotate(45deg)}
.pista svg{color:#F3B8A8;animation:giraIco 2.4s ease-in-out infinite}
.pista.fuera{opacity:0;transform:translate(-50%,-8px)}
@keyframes pistaEntra{from{opacity:0;transform:translate(-50%,-12px) scale(.9)}}
@keyframes giraIco{50%{transform:rotate(180deg)}}

/* Hojas: asa para arrastrar y contenido en cascada */
.hoja__asa{position:absolute;z-index:4;top:0;left:50%;transform:translateX(-50%);width:84px;height:22px;touch-action:none;cursor:grab}
.hoja__asa::after{content:"";position:absolute;left:22px;right:22px;top:8px;height:5px;border-radius:3px;background:rgba(27,24,21,.2)}
.hoja--kds .hoja__asa::after{background:rgba(237,232,223,.25)}
.hoja__h,.hoja__tit,.impr-ok,.kds__cab,.visor__ayuda{touch-action:pan-x}
@media (min-width:760px){.hoja__asa{display:none}}
#capa.abierta .hoja__txt > *,#capa.abierta .kds > *{animation:cascada .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--j, 0) * 45ms + 140ms)}
#capa .sin-subida .hoja__txt > *,#capa .sin-subida .kds > *{animation:none}
#capa .hoja--impresion .hoja__txt > *{animation:none}

/* Estado del pedido: cada paso nuevo salta */
#estado .pe.ok .pe__n,#estado .pe.actual .pe__n{animation:pop .5s cubic-bezier(.34,1.6,.6,1) both}
#estado .pe.actual .pe__n{animation:pop .5s cubic-bezier(.34,1.6,.6,1) both,pulsa 1.6s 0.5s infinite}
#estado .pe.actual:nth-child(4) .pe__n{animation:pop .5s cubic-bezier(.34,1.6,.6,1) both}
#estado.cambia .estado-t{animation:cascada .5s both}
@keyframes pop{from{transform:scale(.3)}}
.pasos-e__pista i{transition:width 1s cubic-bezier(.2,.8,.2,1)}

/* Barra del pedido */
.barra-sel b{font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.mas{transition:transform .25s cubic-bezier(.34,1.6,.6,1),background .2s}
.mas:hover{transform:rotate(90deg)}
.top__p img,.plato__foto img{will-change:auto}

@media (prefers-reduced-motion:reduce){.por-ver > *{opacity:1}}