*{box-sizing:border-box}html{background:#171b24}body{margin:0;min-height:100vh;min-height:100svh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f5ee;background:radial-gradient(ellipse at 25% 45%,#343844,#171b24 70%)}button,input{font:inherit}button{cursor:pointer}.access{max-width:1100px;margin:auto;padding:40px 36px 24px}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:750;letter-spacing:2px}.brand small{display:block;font-size:9px;letter-spacing:2.5px;font-weight:500;color:#bbb9b1;margin-top:5px}.brand-mark{display:grid;place-items:center;width:40px;height:44px;border:1px solid #ccad64;border-radius:10px;color:#f0d99e;font-size:25px;letter-spacing:0}.scene{display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center;min-height:620px}.bag-panel{height:420px;position:relative;display:flex;align-items:center;justify-content:center}.scene-glow{position:absolute;inset:0;background:radial-gradient(ellipse,#d5b46720,transparent 65%)}.character{position:absolute;left:8%;bottom:85px;width:180px;animation:arrive 1.3s ease-out both}.character svg{width:100%;overflow:visible}.wave{transform-origin:120px 108px;animation:wave 2s ease-in-out 1.3s 2}.briefcase{position:absolute;left:58%;bottom:97px;width:135px;height:95px;padding:0;border:0;background:none;perspective:500px;filter:drop-shadow(0 16px 15px #0005);animation:bag-arrive 1.3s ease-out both}.bag-handle{position:absolute;top:-14px;left:46px;width:43px;height:22px;border:5px solid #b89560;border-radius:10px 10px 0 0}.bag-body{position:absolute;inset:0;background:#785239;border:2px solid #ad8459;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center}.bag-lid{position:absolute;inset:0 0 auto;height:39px;background:#986e48;border:2px solid #c19a66;border-radius:9px 9px 3px 3px;z-index:2;transform-origin:top;transition:transform .7s}.case-open .bag-lid{transform:rotateX(-145deg)}.bag-logo{font-size:26px;color:#f5dcaa;font-weight:700}.bag-name{font-size:9px;letter-spacing:1px;color:#f5dcaa}.bag-lock{position:absolute;top:28px;width:10px;height:15px;border-radius:3px;background:#e5c581;z-index:3}.bag-hint{position:absolute;bottom:32px;font-size:12px;color:#c8c3b7;text-align:center}.skip{position:absolute;bottom:0;background:none;border:0;color:#e9cb83;font-size:12px;padding:9px}.briefcase:focus-visible,.skip:focus-visible{outline:2px solid #e9cb83;outline-offset:8px;border-radius:10px}.login-card{position:relative;border:1px solid #e9d7a82e;border-radius:28px;padding:40px;background:#b9a87512;box-shadow:0 25px 60px #0003;transform-origin:bottom left;transition:opacity .6s,transform .6s,visibility .6s}body:not(.case-open) .login-card{opacity:0;visibility:hidden;transform:translate(-40px,50px) scale(.8);pointer-events:none}
.eyebrow{font-size:10px;letter-spacing:2.3px;color:#d6bd81;margin:0 0 15px}h1{font-size:34px;letter-spacing:-1px;margin:0 0 10px;font-weight:600}.intro{font-size:14px;color:#ccc7ba;margin:0 0 30px}label{display:block;font-size:13px;margin:20px 0 9px;color:#dedace}input{display:block;width:100%;min-height:50px;padding:12px 15px;background:#ffffff09;color:#fff;border:1px solid #ffffff24;border-radius:12px;font-size:16px;outline:none}input:focus{border-color:#e9cb83;box-shadow:0 0 0 3px #e9cb831c}.submit{margin-top:28px;width:100%;min-height:51px;border:0;border-radius:12px;background:linear-gradient(120deg,#c3a354,#f8e6a7 45%,#d5b467);color:#252218;font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;box-shadow:0 5px 18px #0002}.submit:hover{filter:brightness(1.08)}.submit:focus-visible{outline:2px solid #fff;outline-offset:4px}.card-footer{text-align:center;font-size:11px;letter-spacing:.5px;color:#c8c3b7;margin:26px 0 0}.page-footer{text-align:center;color:#bdb6a8;font-size:12px}.alert{padding:12px 14px;border:1px solid #e6ac89;border-radius:10px;background:#73382160;color:#ffdcc5;font-size:13px;line-height:1.5;margin-bottom:14px}
@keyframes arrive{from{transform:translateX(-130px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes bag-arrive{from{transform:translateX(-130px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}@media(max-width:760px){.access{padding:25px 22px}.brand{font-size:18px}.scene{grid-template-columns:1fr;gap:18px;min-height:auto}.bag-panel{height:235px;max-width:360px;width:100%;margin:12px auto 0}.character{width:115px;bottom:57px;left:12%}.briefcase{width:105px;height:74px;bottom:65px;left:57%}.bag-handle{left:34px;width:36px}.bag-hint{bottom:22px;font-size:11px}.skip{bottom:-8px}.login-card{width:100%;max-width:420px;margin:auto;padding:28px 25px;border-radius:24px}h1{font-size:29px}.intro{margin-bottom:22px}.page-footer{margin-top:28px}body:not(.case-open) .login-card{transform:translateY(20px) scale(.95)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Saludo articulado: la palma gira desde la muñeca. */
.wave-hand{transform-origin:160px 108px;animation:hand-wave .55s ease-in-out 1.4s 6}
@keyframes hand-wave{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(12deg)}}
@media(prefers-reduced-motion:reduce){.wave-hand{animation:none}}

/* Maletín de aluminio: superficies cepilladas y herrajes dorados. */
.briefcase{filter:drop-shadow(0 16px 15px #0006)}
.bag-handle{border-color:#c4cbd3;background:linear-gradient(90deg,#7b8591,#edf2f7 45%,#929ca8);box-shadow:inset 0 1px 0 #fff9,0 1px 2px #0005}
.bag-body{background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 3px),linear-gradient(115deg,#64707e,#bcc5cf 35%,#e3e8ee 50%,#8e9aa7 78%,#677482);border-color:#c9d1d9;box-shadow:inset 0 0 0 3px #4a5665,inset 0 0 0 4px #dce3eb80,inset 0 -8px 16px #25344935}
.bag-lid{background:repeating-linear-gradient(0deg,#ffffff0c 0 1px,transparent 1px 3px),linear-gradient(115deg,#8693a1,#edf2f7 43%,#b1bdc9 65%,#6b7888);border-color:#dce3eb;box-shadow:inset 0 2px 0 #ffffffa0,inset 0 -3px 0 #536171}
.bag-body::before,.bag-body::after{content:"";position:absolute;top:6px;bottom:6px;width:9px;border:1px solid #dbe3ed;background:linear-gradient(90deg,#73808e,#e5eaf0 45%,#8592a1);border-radius:3px;box-shadow:1px 0 2px #0003}
.bag-body::before{left:7px}.bag-body::after{right:7px}
.bag-logo{color:#29374a;text-shadow:0 1px 0 #ffffffb0}
.bag-name{color:#2c3b4e;font-weight:700;text-shadow:0 1px 0 #ffffff70}
.bag-lock{background:linear-gradient(90deg,#ad8643,#f5df9b 45%,#c3a05b);border:1px solid #a07e43;box-shadow:0 2px 3px #0004,inset 0 1px 0 #fff7}

/* Secuencia ilustrada del video: entrada, depósito y presentación. */
.character{left:19%;bottom:85px;animation:none;z-index:2}
.briefcase{left:calc(19% + 145px);bottom:97px;animation:none;z-index:3}
.character .wave,.character .wave-hand{animation:none}
.character .wave{transform:rotate(105deg);transform-origin:119px 108px}
.person{transform-origin:90px 250px}
.intro-playing .character{animation:nexo-walk-in 3.9s both}
.intro-playing .person{animation:nexo-deposit 3.9s both}
.intro-playing .briefcase{animation:nexo-carry 3.9s both}
.intro-playing .bag-hint{opacity:0}
.intro-complete .wave,body:not(.intro-playing) .wave{animation:nexo-present 1.2s ease-out both}
.scene{overflow:hidden}
@keyframes nexo-walk-in{0%{transform:translate(-230px,0);opacity:0}10%{opacity:1}20%{transform:translate(-160px,-7px)}30%{transform:translate(-100px,0)}40%{transform:translate(-45px,-7px)}50%,100%{transform:none;opacity:1}}
@keyframes nexo-deposit{0%,50%,85%,100%{transform:none}65%,72%{transform:translateY(10px) rotate(18deg)}}
@keyframes nexo-carry{0%{transform:translate(-230px,-62px) rotate(-8deg);opacity:0}10%{opacity:1}25%{transform:translate(-115px,-58px) rotate(7deg)}50%{transform:translate(0,-62px) rotate(-5deg)}65%{transform:none}70%{transform:translateY(-3px)}76%,100%{transform:none;opacity:1}}
@keyframes nexo-present{from{transform:rotate(105deg)}to{transform:rotate(0deg)}}
@media(max-width:760px){.character{left:16%;bottom:57px}.briefcase{left:calc(16% + 94px);bottom:65px}.scene{gap:12px}.bag-panel{height:245px}.intro-playing .briefcase{animation-name:nexo-carry-mobile}}
@keyframes nexo-carry-mobile{0%{transform:translate(-230px,-40px) rotate(-8deg);opacity:0}10%{opacity:1}25%{transform:translate(-115px,-37px) rotate(7deg)}50%{transform:translate(0,-40px) rotate(-5deg)}65%{transform:none}70%{transform:translateY(-3px)}76%,100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.character,.briefcase,.person,.wave{animation:none!important}.bag-hint{opacity:1!important}}

/* Identidad Nexo Pro */
html{background:#081c3b}body{background:radial-gradient(ellipse at 25% 45%,#1b3559,#081c3b 70%)}.brand-mark{border-color:#247bcc}.scene-glow{background:radial-gradient(ellipse,#37c7e825,transparent 65%)}.login-card{border-color:#2d4b70}.submit{background:linear-gradient(120deg,#2185df,#37c9ea);border-color:#2185df;color:#061a36}.eyebrow,.skip{color:#75cde8}