/* Lodo Loco's original animated branding and introductory film. */
.lodo-brand{display:block;position:relative;isolation:isolate;text-shadow:none!important;line-height:0;animation:none!important}
.lodo-brand img{display:block;width:100%;height:auto;transform-origin:50% 80%;animation:lodo-brand-bob 4.8s ease-in-out infinite;filter:drop-shadow(0 7px 0 rgba(0,0,0,.24))}
.lodo-brand::before{content:"";position:absolute;inset:28% 11% 8%;border-radius:50%;background:radial-gradient(ellipse,rgba(245,43,220,.27),transparent 72%);z-index:-1;animation:lodo-brand-glow 4.8s ease-in-out infinite}
.lodo-brand .mud-drop{position:absolute;width:8px;height:12px;border-radius:60% 40% 65% 35%;background:#ab642b;box-shadow:inset 2px 2px 0 #dda76b,1px 2px 0 #321d23;left:11%;top:63%;z-index:-1;animation:lodo-brand-drop 4.8s ease-out infinite}
.lodo-brand .mud-drop:nth-of-type(2){left:86%;top:57%;animation-delay:-2.4s;width:6px;height:9px}
.auth-logo.lodo-brand{width:190px;max-width:62%;margin:0 auto 14px}
.carga-logo.lodo-brand{width:min(390px,72vw);margin:0}
.app-header-title.lodo-brand{width:112px;flex:0 0 112px;margin:-4px 0}
.app-header{min-height:94px}
#pantalla-auth{align-items:flex-start;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#705681 #1a1a2e;overscroll-behavior:contain;background:radial-gradient(ellipse at 0 0,#00ff0014,transparent 52%),radial-gradient(ellipse at 100% 100%,#ff00ff1c,transparent 55%),#1a1a2e;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.auth-caja{padding:20px 22px;margin:auto;background:transparent;border:0;box-shadow:none;max-height:none;overflow:visible}
.auth-caja .auth-sub{margin:14px 0 18px}
.lodo-film{position:relative;margin:0 0 22px;border:4px solid #221a2b;border-radius:14px;overflow:hidden;background:#705681 url('assets/hippos-charco-poster.png') center/cover;box-shadow:6px 6px 0 rgba(0,0,0,.9);aspect-ratio:16/9}
.lodo-film video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.lodo-film--auth{margin:0;border-width:3px;border-color:#704a87;box-shadow:4px 4px 0 #0c0b16;border-radius:10px}
.lodo-motion-button{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:42px;height:42px;padding:10px;border:2px solid rgba(255,245,219,.7);border-radius:50%;background:rgba(24,19,35,.83);color:#fff5db;cursor:pointer;box-shadow:0 2px 8px #0003;transition:background .15s,transform .15s}
.lodo-motion-button:hover{background:#573e68;transform:scale(1.06)}
.lodo-motion-button:focus-visible{outline:3px solid #cdff69;outline-offset:3px}
.lodo-motion-button svg{width:18px;height:18px;fill:currentColor;display:block}
.lodo-motion-button .motion-play{display:none}
.lodo-motion-button[data-paused="true"] .motion-play{display:block}
.lodo-motion-button[data-paused="true"] .motion-pause{display:none}
.lodo-motion-button:disabled{opacity:.6;cursor:default}
@keyframes lodo-brand-bob{0%,100%{transform:translateY(0) rotate(-1.5deg) scale(1)}35%{transform:translateY(-5px) rotate(1deg) scale(1.015)}55%{transform:translateY(1px) rotate(-.7deg) scale(1.025,.98)}70%{transform:translateY(-2px) rotate(.7deg) scale(.995,1.015)}}
@keyframes lodo-brand-glow{0%,100%{opacity:.65;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes lodo-brand-drop{0%,58%,100%{opacity:0;transform:translate(0,0) scale(.5)}64%{opacity:1;transform:translate(-10px,-16px) scale(1)}82%{opacity:0;transform:translate(-22px,22px) scale(.7)}}
@media(max-width:480px){.auth-caja{padding:16px}.auth-logo.lodo-brand{width:155px;margin-bottom:10px}.app-header-title.lodo-brand{width:96px;flex-basis:96px}.app-header{min-height:82px}.lodo-film{border-radius:10px;box-shadow:4px 4px 0 #000}.lodo-film--auth{border-width:2px}.lodo-motion-button{width:40px;height:40px;right:7px;bottom:7px}}
@media(prefers-reduced-motion:reduce){.lodo-brand img,.lodo-brand::before,.lodo-brand .mud-drop{animation:none!important}.lodo-brand .mud-drop{display:none}.lodo-motion-button{transition:none}}