*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#faf7fb}

#app{display:flex;height:100vh;width:100vw;overflow:hidden}

/* ── PANEL IZQUIERDO ── */
.gm-left{width:52%;position:relative;overflow:hidden;background:#3a1049;cursor:default}
.gm-bg{position:absolute;inset:0;background:url('/media/misc/back-nav.png') center/cover no-repeat;opacity:.92;z-index:0;transition:opacity .5s}
.gm-left:hover .gm-bg{opacity:1}
.gm-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#1e0830 0%,#4d1965 55%,#7b2fa0 100%);z-index:1;opacity:.58}

.gm-orbs{position:absolute;inset:0;z-index:2;pointer-events:none}
.orb{position:absolute;border-radius:50%;animation:orbFloat ease-in-out infinite}
.orb:nth-child(1){width:320px;height:320px;top:-100px;left:-80px;background:radial-gradient(circle,rgba(212,168,67,.2) 0%,transparent 70%);animation-duration:16s}
.orb:nth-child(2){width:200px;height:200px;bottom:30px;left:20px;background:radial-gradient(circle,rgba(123,47,160,.5) 0%,transparent 70%);animation-duration:12s;animation-delay:-5s}
.orb:nth-child(3){width:140px;height:140px;top:40%;right:-30px;background:radial-gradient(circle,rgba(212,168,67,.18) 0%,transparent 70%);animation-duration:18s;animation-delay:-9s}
.orb:nth-child(4){width:80px;height:80px;bottom:25%;right:60px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation-duration:10s;animation-delay:-3s}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.07)}}

/* ── NUBES SUTILES ── */
.gm-clouds{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.cloud{position:absolute;border-radius:50%;filter:blur(22px);animation:cloudFloat ease-in-out infinite}
.cl1{width:220px;height:55px;background:rgba(255,255,255,.08);top:6%;left:5%;animation-duration:24s;animation-delay:0s}
.cl2{width:340px;height:72px;background:rgba(255,255,255,.06);top:18%;left:10%;animation-duration:30s;animation-delay:-9s}
.cl3{width:180px;height:48px;background:rgba(255,255,255,.09);top:46%;left:8%;animation-duration:26s;animation-delay:-13s}
.cl4{width:260px;height:62px;background:rgba(255,255,255,.055);top:66%;left:16%;animation-duration:35s;animation-delay:-20s}
.cl5{width:200px;height:50px;background:rgba(255,255,255,.07);top:32%;left:38%;animation-duration:27s;animation-delay:-6s}
.cl6{width:150px;height:38px;background:rgba(255,255,255,.08);top:80%;left:26%;animation-duration:32s;animation-delay:-16s}
@keyframes cloudFloat{
  0%,100%{transform:translateX(0) translateY(0);opacity:.72}
  30%{transform:translateX(24px) translateY(-10px);opacity:.95}
  65%{transform:translateX(40px) translateY(5px);opacity:.78}
}

.gm-sparks{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
@keyframes sparkUp{0%{opacity:0;transform:translateY(0) scale(0)}10%{opacity:1;transform:translateY(-10px) scale(1.5)}90%{opacity:.4}100%{opacity:0;transform:translateY(-80px) scale(0)}}

.gm-left-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:22px;padding:40px 32px;text-align:center;animation:slideInLeft .9s cubic-bezier(.22,1,.36,1) both}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}

.gm-logo img{height:48px;filter:drop-shadow(0 4px 18px rgba(0,0,0,.5));transition:transform .3s}
.gm-logo img:hover{transform:scale(1.05)}

.hero-frame{position:relative;display:inline-block;perspective:800px;width:fit-content;align-self:center}
.hero-frame::before,.hero-frame::after{content:'';position:absolute;border:2px solid #d4a843;border-radius:18px;pointer-events:none}
.hero-frame::before{inset:-8px;opacity:.65;animation:framePulse 3.5s ease-in-out infinite alternate}
.hero-frame::after{inset:-16px;opacity:.3;animation:framePulse 3.5s ease-in-out infinite alternate-reverse;animation-delay:.5s}
@keyframes framePulse{from{opacity:.25;border-color:#d4a843}to{opacity:.85;border-color:#f0c55a}}

.hero-img{width:min(290px,55vw);border-radius:16px;display:block;box-shadow:0 24px 70px rgba(0,0,0,.7);animation:heroBreath 5s ease-in-out infinite;transition:transform .5s ease;transform-style:preserve-3d}
@keyframes heroBreath{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.013) translateY(-6px)}}

.gm-divider{width:56px;height:2px;background:linear-gradient(90deg,transparent,#d4a843,transparent);border:none;border-radius:2px;animation:divShimmer 2.8s ease-in-out infinite}
@keyframes divShimmer{0%,100%{width:56px;opacity:.6}50%{width:88px;opacity:1}}

.gm-tagline h2{font-size:clamp(1rem,1.8vw,1.4rem);color:#fff;letter-spacing:.06em;text-shadow:0 2px 16px rgba(0,0,0,.5);margin-bottom:8px;transition:opacity .3s}
.gm-tagline p{font-size:.85rem;color:rgba(255,255,255,.65);line-height:1.7;max-width:300px;transition:opacity .3s}

.gm-dots{display:flex;gap:8px}
.gm-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .4s cubic-bezier(.22,1,.36,1);cursor:pointer}
.gm-dot.active{background:#d4a843;box-shadow:0 0 10px #d4a843;width:22px;border-radius:4px}
.gm-dot:hover:not(.active){background:rgba(255,255,255,.45);transform:scale(1.2)}

/* ── PANEL DERECHO ── */
.gm-right{flex:1;background:#faf7fb;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gm-right::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 25% 85%,rgba(77,25,101,.07) 0%,transparent 55%),radial-gradient(ellipse 40% 35% at 85% 15%,rgba(212,168,67,.05) 0%,transparent 55%);z-index:0}
.gm-right::after{content:'';position:absolute;left:0;top:12%;height:76%;width:3px;background:linear-gradient(to bottom,transparent,#4d1965,#d4a843,#4d1965,transparent);opacity:.28;border-radius:0 2px 2px 0}

.r-particle{position:absolute;border-radius:50%;animation:pDrift linear infinite;pointer-events:none}
.rp1{width:7px;height:7px;background:rgba(77,25,101,.2);left:12%;top:22%;animation-duration:14s}
.rp2{width:5px;height:5px;background:rgba(212,168,67,.22);left:80%;top:65%;animation-duration:11s;animation-delay:-6s}
.rp3{width:9px;height:9px;background:rgba(77,25,101,.12);left:58%;top:16%;animation-duration:17s;animation-delay:-9s}
.rp4{width:4px;height:4px;background:rgba(212,168,67,.18);left:38%;top:80%;animation-duration:13s;animation-delay:-4s}
.rp5{width:6px;height:6px;background:rgba(123,47,160,.15);left:70%;top:40%;animation-duration:9s;animation-delay:-2s}
@keyframes pDrift{0%{transform:translateY(0) rotate(0);opacity:.5}50%{opacity:1}100%{transform:translateY(-80px) rotate(180deg);opacity:0}}

/* Toast */
.gm-toast{position:absolute;top:20px;right:20px;background:#fff;border-radius:10px;padding:11px 16px;font-size:.82rem;color:#280b33;box-shadow:0 6px 24px rgba(77,25,101,.18);border-left:3px solid #4d1965;transform:translateX(160%);transition:transform .4s cubic-bezier(.22,1,.36,1);z-index:20;max-width:230px;line-height:1.45;display:flex;align-items:center;gap:8px}
.gm-toast.show{transform:translateX(0)}
.gm-toast.error{border-left-color:#e24b4a}
.gm-toast.success{border-left-color:#3b6d11}
.gm-toast i{font-size:15px;flex-shrink:0}
.gm-toast.error i{color:#e24b4a}
.gm-toast.success i{color:#3b6d11}
.gm-toast:not(.error):not(.success) i{color:#4d1965}

/* ── FORM CARD ── */
.gm-form-card{position:relative;z-index:1;width:min(400px,90%);animation:slideInRight .85s cubic-bezier(.22,1,.36,1) .12s both}
@keyframes slideInRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.shake{animation:shake .4s ease!important}

.fh-wrap{text-align:center;margin-bottom:30px}
.fh-icon{width:62px;height:62px;background:linear-gradient(135deg,#4d1965,#7b2fa0);border-radius:17px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 12px 30px rgba(77,25,101,.38);animation:iconIn .85s cubic-bezier(.22,1,.36,1) .3s both;transition:transform .3s,box-shadow .3s,background .5s}
.fh-icon:hover{transform:scale(1.1) rotate(-6deg);box-shadow:0 16px 40px rgba(77,25,101,.5)}
@keyframes iconIn{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.fh-icon i{font-size:26px;color:#fff;transition:color .3s}
.fh-title{font-size:1.65rem;font-weight:700;color:#1e0830;letter-spacing:.04em;margin-bottom:5px}
.fh-sub{font-size:.83rem;color:#aaa;font-weight:300}

.gm-error{font-size:.72rem;color:#e24b4a;margin-top:4px}

.gm-field{margin-bottom:16px}
.gm-field label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4d1965;margin-bottom:6px}

.gm-input-wrap{position:relative}
.gm-inp-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#ccc;transition:color .22s;z-index:2;font-size:16px;pointer-events:none}
.gm-input-wrap:focus-within .gm-inp-icon{color:#4d1965}

.gm-inp{width:100%;height:50px;padding:0 46px;border:1.5px solid #e4d8ee;border-radius:12px;font-size:.95rem;color:#1e0830;background:#fff;outline:none;transition:border-color .25s,box-shadow .25s,transform .2s}
.gm-inp:focus{border-color:#4d1965;box-shadow:0 0 0 4px rgba(77,25,101,.1);transform:translateY(-1px)}
.gm-inp.valid{border-color:#3b6d11}
.gm-inp.invalid{border-color:#e24b4a}

.gm-eye-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:#ccc;cursor:pointer;padding:0;z-index:2;font-size:16px;transition:color .22s}
.gm-eye-btn:hover{color:#4d1965}

.gm-bar{height:2px;border-radius:2px;background:#eee;margin-top:5px;overflow:hidden}
.gm-bar-fill{height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#4d1965,#7b2fa0);transition:width .4s cubic-bezier(.22,1,.36,1)}

.gm-forgot{text-align:right;margin:-4px 0 20px}
.gm-forgot a,.gm-forgot-link{font-size:.82rem;color:#4d1965!important;text-decoration:none;font-weight:500;transition:color .2s,letter-spacing .2s}
.gm-forgot a:hover,.gm-forgot-link:hover{color:#7b2fa0!important;letter-spacing:.02em}

.gm-btn{width:100%;height:52px;background:linear-gradient(135deg,#4d1965 0%,#7b2fa0 100%);border:none;border-radius:14px;font-size:1rem;font-weight:600;color:#fff;letter-spacing:.05em;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 26px rgba(77,25,101,.4);display:flex;align-items:center;justify-content:center;gap:10px}
.gm-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-100%);transition:transform .6s ease}
.gm-btn:hover::before{transform:translateX(100%)}
.gm-btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(77,25,101,.55)}
.gm-btn:active{transform:translateY(0);box-shadow:0 6px 18px rgba(77,25,101,.35)}
.gm-btn:disabled{opacity:.78;pointer-events:none}
.gm-spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.gm-btn.loading .btn-label{display:none}
.gm-btn.loading .gm-spin{display:block}

.ripple-el{position:absolute;border-radius:50%;background:rgba(255,255,255,.25);transform:scale(0);animation:rippleAnim .65s linear;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(5);opacity:0}}

.gm-form-footer{text-align:center;margin-top:22px;font-size:.76rem;color:#ccc}
.gm-form-footer strong{color:#4d1965}

.gm-btn-group{display:flex;flex-direction:column;gap:10px}
.gm-btn-cancel{background:#fff!important;border:1.5px solid #e4d8ee!important;color:#4d1965!important;text-decoration:none!important}
.gm-btn-cancel:hover{background:#f5eefc!important}

#app-inner,#app{display:flex;height:100vh;width:100vw;overflow:hidden}

@media(max-width:991px){
  #app,#app-inner{flex-direction:column;overflow-y:auto;height:auto}
  .gm-left{width:100%;min-height:300px}
  .gm-right{min-height:520px;padding:32px 20px}
  .hero-img{width:180px}
  .gm-tagline{display:none}
}