/* KROM manual v2: sistema de movimiento.
   Entradas: añadir la clase .ent y una clase e-* al elemento; la entrada se dispara al añadir .in (IntersectionObserver).
   Escalón: style="--d:N" retrasa N x 80 ms. Botones .btn y .btn-o, enlaces .lnk, tallas .talla y .talla-off, campos .campo.
   Búho: estados .krom-respira, .krom-curioso, .krom-no, .krom-feliz, .krom-dormido; ojos .krom-ojos. */
.ent{--sal:cubic-bezier(.2,.8,.2,1);--corte:cubic-bezier(.7,0,.2,1);--reb:cubic-bezier(.3,1.4,.5,1);--esp:calc(var(--d,0) * 80ms)}
.e-sube{opacity:0;transform:translateY(46px);clip-path:inset(0 0 100% 0);transition:opacity .5s var(--sal) var(--esp),transform .8s var(--sal) var(--esp),clip-path .8s var(--sal) var(--esp)}
.e-sube.in{opacity:1;transform:none;clip-path:inset(-20px -40px -20px -40px)}
.e-desde-izq{opacity:0;transform:translateX(-60px);filter:blur(6px);transition:opacity .6s var(--sal) var(--esp),transform .8s var(--sal) var(--esp),filter .6s var(--sal) var(--esp)}
.e-desde-der{opacity:0;transform:translateX(60px);filter:blur(6px);transition:opacity .6s var(--sal) var(--esp),transform .8s var(--sal) var(--esp),filter .6s var(--sal) var(--esp)}
.e-desde-izq.in,.e-desde-der.in{opacity:1;transform:none;filter:none}
.e-barrido{position:relative}
.e-barrido:not(.in),.e-barrido:not(.in) *{color:transparent !important;text-shadow:none !important}
.e-barrido.in,.e-barrido.in *{transition:color 0s linear calc(var(--esp) + .33s)}
.e-barrido::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:#FF3B30;transform:scaleX(0);pointer-events:none}
.e-barrido.in::after{animation:k-barrido .75s var(--corte) var(--esp) both}
@keyframes k-barrido{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.e-contorno{transform:translateX(-30px);opacity:0;transition:transform .9s var(--sal) var(--esp),opacity .5s var(--sal) var(--esp),color .5s ease calc(var(--esp) + .55s),-webkit-text-stroke-color .5s ease calc(var(--esp) + .55s)}
.e-contorno,.e-contorno *{-webkit-text-stroke:1.5px rgba(245,238,229,0)}
.e-contorno:not(.in),.e-contorno:not(.in) *{color:transparent !important;-webkit-text-stroke-color:#F5EEE5;text-shadow:none !important}
.e-contorno.in{transform:none;opacity:1}
.e-contorno.in *{transition:color .5s ease calc(var(--esp) + .55s),-webkit-text-stroke-color .5s ease calc(var(--esp) + .55s)}
.e-glitch{opacity:0}
.e-glitch.in{animation:k-glitch .7s steps(1) var(--esp) both}
@keyframes k-glitch{0%{opacity:0}8%{opacity:1;transform:translate(-10px,0) skewX(-12deg);text-shadow:6px 0 rgba(255,190,40,.8),-6px 0 rgba(40,170,255,.8);clip-path:inset(10% 0 55% 0)}22%{transform:translate(8px,0);clip-path:inset(45% 0 15% 0)}36%{transform:translate(-4px,0) skewX(6deg);clip-path:inset(0 0 70% 0)}50%{transform:translate(3px,0);clip-path:inset(0);text-shadow:3px 0 rgba(255,190,40,.6),-3px 0 rgba(40,170,255,.6)}66%{transform:translate(-1px,0)}82%{transform:none}100%{opacity:1;transform:none;clip-path:inset(-40px)}}
.e-telon{clip-path:inset(100% -80px -80px -80px);transition:clip-path 1s var(--corte) var(--esp)}
.e-telon img{transform:scale(1.18);transition:transform 1.6s var(--sal) var(--esp)}
.e-telon.in{clip-path:inset(-80px -80px -80px -80px)}
.e-telon.in img{transform:none}
.e-escalon{opacity:0;transform:translateY(70px) rotate(var(--r,2deg));transition:opacity .5s var(--sal) var(--esp),transform .9s var(--reb) var(--esp)}
.e-escalon.in{opacity:1;transform:none}
.e-sello{opacity:0}
.e-sello.in{animation:k-sello .6s var(--reb) var(--esp) both}
@keyframes k-sello{0%{opacity:0;transform:scale(1.9) rotate(-28deg)}55%{opacity:1;transform:scale(.9) rotate(var(--rf,0deg))}100%{opacity:1;transform:scale(1) rotate(var(--rf,0deg))}}
.e-cae{opacity:0}
.e-cae.in{animation:k-cae 1s var(--reb) var(--esp) both}
@keyframes k-cae{0%{opacity:0;transform:translate(-50%,-140px) rotate(-14deg)}60%{opacity:1}100%{opacity:1;transform:translateX(-50%) rotate(-3deg)}}
.e-linea{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--corte) var(--esp)}
.e-linea.in{transform:scaleX(1)}
.e-barra{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--sal) calc(var(--esp) + .3s)}
.e-barra.in{transform:scaleX(1)}
.e-dec{opacity:0;transition:opacity .2s linear var(--esp)}
.e-dec.in{opacity:1}
.e-flota{opacity:0;transform:translateY(140%);transition:opacity .4s var(--sal) var(--esp),transform .9s var(--reb) var(--esp)}
.e-flota.in{opacity:1;transform:none}
.reset,.reset *,.reset::after{transition:none !important;animation:none !important}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .16s var(--sal,ease),color .25s ease;cursor:pointer}
.btn::before{content:"";position:absolute;inset:0;background:var(--hb,#0D0C0E);transform:scaleX(0);transform-origin:right;transition:transform .38s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover{color:var(--hf,#FF3B30) !important}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:hover .tx{animation:k-temblor .32s steps(2) 1}
.btn:active{transform:scale(.97)}
.btn .fl{display:inline-block;margin-left:12px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover .fl{transform:translateX(6px)}
.btn-o::before{transform:scaleY(0);transform-origin:bottom}
.btn-o:hover::before{transform:scaleY(1);transform-origin:bottom}
@keyframes k-temblor{0%{text-shadow:3px 0 rgba(255,190,40,.8),-3px 0 rgba(40,170,255,.8);transform:translateX(-2px)}50%{text-shadow:-2px 0 rgba(255,190,40,.8),2px 0 rgba(40,170,255,.8);transform:translateX(2px)}100%{text-shadow:none;transform:none}}
.lnk{text-decoration:none !important;background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;padding-bottom:3px;transition:background-size .35s cubic-bezier(.7,0,.2,1)}
.lnk:hover{background-size:100% 2px}
.talla{transition:transform .16s cubic-bezier(.2,.8,.2,1),background .2s,color .2s}
.talla:hover{transform:translateY(-3px)}
.talla:active{transform:scale(.94)}
.talla-off{position:relative}
.talla-off::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:#FF3B30;transform:scaleX(0) rotate(-14deg);transform-origin:left;transition:transform .3s cubic-bezier(.7,0,.2,1)}
.talla-off:hover::after{transform:scaleX(1) rotate(-14deg)}
.campo:focus{outline:none;box-shadow:0 0 0 3px #0D0C0E;caret-color:#0D0C0E}
@media (prefers-reduced-motion: reduce){.ent{transition:opacity .3s linear !important;animation:none !important;transform:none !important;clip-path:none !important;filter:none !important}.ent.in{opacity:1 !important}.e-barrido::after{display:none}.e-barrido *,.e-barrido,.e-contorno,.e-contorno *{color:inherit}.krom-izq,.krom-der,.krom-rapida{animation:none !important}}

/* Búho y cintas */
@keyframes krom-izq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes krom-der{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.krom-izq{animation:krom-izq 40s linear infinite;width:max-content}
.krom-der{animation:krom-der 46s linear infinite;width:max-content}
.krom-rapida{animation:krom-izq 22s linear infinite;width:max-content}
@keyframes krom-parpadeo{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(0.08)}97%{transform:scaleY(1)}}
.krom-ojos{transform-box:fill-box;transform-origin:center;animation:krom-parpadeo 5.2s infinite}
.krom-ojos-lento{transform-box:fill-box;transform-origin:center;animation:krom-parpadeo 7.4s infinite 1.3s}
@keyframes krom-respira{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}
.krom-respira{animation:krom-respira 3.6s ease-in-out infinite;transform-origin:50% 100%}
.krom-estado{transition:transform .35s cubic-bezier(.3,1.4,.5,1);transform-origin:50% 100%}
.krom-curioso{transform:rotate(-13deg)}
@keyframes krom-no{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px) rotate(-5deg)}40%{transform:translateX(9px) rotate(5deg)}60%{transform:translateX(-6px) rotate(-3deg)}80%{transform:translateX(5px) rotate(2deg)}}
.krom-no{animation:krom-no .55s ease-in-out}
@keyframes krom-salto{0%,100%{transform:translateY(0) scaleY(1)}15%{transform:translateY(0) scaleY(.9)}45%{transform:translateY(-26px) scaleY(1.05)}75%{transform:translateY(0) scaleY(.95)}}
.krom-feliz{animation:krom-salto .7s ease-out 2}
.krom-dormido{transform:rotate(6deg) translateY(4px)}
@keyframes krom-z{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(18px,-46px) scale(1.2)}}
.krom-z{animation:krom-z 2.4s ease-out infinite}
@keyframes krom-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.krom-bocadillo{animation:krom-entra .3s ease-out}
.krom-asoma{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.krom-tarjeta{transition:transform .25s ease}
.krom-rapida{animation:none !important}
.tw-cursor{animation:tw-cursor 1s steps(1) infinite}
@keyframes tw-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
.krom-vhs{background-image:url('../img/texturas/krom-vhs.webp');background-size:1440px 900px;background-repeat:repeat}