/* Registro: composición de referencia CelebraTodo */
:root{--reg-navy:#031630;--reg-blue:#08274f;--reg-gold:#d6a141;--reg-cream:#fbf7ef;--reg-copy:#161a20}
body{min-height:100svh;color:var(--reg-copy);background:radial-gradient(circle at 70% 38%,#fff,transparent 31%),linear-gradient(115deg,#fff,#fbf6ed)}
.login-page{grid-template-columns:minmax(620px,45.7%) 1fr}
.hero-panel{min-height:100svh;background:radial-gradient(ellipse at 51% 86%,rgba(17,64,111,.48),transparent 25%),radial-gradient(circle at 64% 39%,rgba(16,55,98,.28),transparent 34%),linear-gradient(145deg,#020f24,#041a37 53%,#061f40);box-shadow:inset -1px 0 rgba(255,255,255,.12)}
.hero-panel::before{opacity:.78;background:radial-gradient(ellipse at 50% 92%,rgba(213,154,57,.68) 0 1px,transparent 2px) 0 0/17px 15px,radial-gradient(ellipse at 50% 93%,rgba(241,180,75,.5) 0 2px,transparent 3px) 8px 4px/29px 23px;mask-image:linear-gradient(to bottom,transparent 48%,#000 74%);filter:none}
.hero-panel::after{background:radial-gradient(circle at 3% 22%,rgba(225,164,57,.9) 0 3px,transparent 5px),radial-gradient(circle at 6% 28%,rgba(225,164,57,.56) 0 2px,transparent 4px),radial-gradient(circle at 2% 38%,rgba(225,164,57,.48) 0 2px,transparent 4px),radial-gradient(circle at 78% 57%,rgba(225,164,57,.65) 0 3px,transparent 6px),radial-gradient(circle at 89% 63%,rgba(225,164,57,.7) 0 4px,transparent 7px)}
.hero-content{position:relative;display:block;min-height:100svh;padding:0}
.hero-copy{position:absolute;z-index:4;top:38px;left:46px;width:calc(100% - 92px);max-width:none;color:#fff}
.hero-mark{display:flex;align-items:center;gap:12px;margin:0;font-size:0;color:#e0aa4a}
.hero-mark::before{content:"✳";font:400 3.15rem Georgia,serif;text-shadow:0 0 16px rgba(224,170,74,.22)}
.hero-mark::after{content:"CelebraTodo";font:600 2.55rem/1 "Cormorant Garamond",serif;letter-spacing:-.035em}
.hero-copy h2{position:absolute;top:158px;left:28px;width:355px;max-width:none;font-size:3.35rem;line-height:1.02;font-weight:600;letter-spacing:-.025em}
.hero-copy h2 em{display:block;margin-top:8px;color:#dda745;font-style:normal;white-space:normal}
.hero-copy p{position:absolute;top:337px;left:31px;width:250px;margin:0;color:rgba(255,255,255,.88);font-size:1rem;line-height:1.7}
.hero-copy p::before{width:98px;margin-bottom:25px;background:linear-gradient(90deg,#dda745 0 45%,transparent 45% 58%,#dda745 58% 62%,transparent 62%)}
.device-wrap{position:absolute;z-index:3;right:42px;bottom:104px;margin:0;padding:0;transform:rotate(8deg);animation:regDevice 5.8s ease-in-out infinite}
.device-wrap::after{content:"";position:absolute;z-index:-2;left:50%;bottom:-64px;width:390px;height:74px;transform:translateX(-50%) rotate(-8deg);border-radius:50%;border-bottom:2px solid rgba(215,164,73,.95);background:linear-gradient(180deg,#112b50,#06152c);box-shadow:0 25px 38px rgba(0,0,0,.45),inset 0 -14px 22px rgba(0,0,0,.38)}
.phone{width:300px}.phone-screen{min-height:520px;background:radial-gradient(circle at 30% 17%,rgba(221,169,76,.12),transparent 19%),linear-gradient(180deg,#061b39,#06152d)}
.phone-body{padding:62px 17px 17px}.phone-hero{min-height:255px}.phone-hero h3::before{content:"Acompáñanos a celebrar\A Mis XV Años";display:block;margin-bottom:20px;white-space:pre;color:#f5ead8;font:400 .72rem/1.55 Manrope,sans-serif}.phone-hero h3{color:#e8b95d;font-size:2.25rem;font-style:italic}.phone-hero p{margin-top:18px}.gift-card{display:none}.phone-actions{margin-top:17px}
@keyframes regDevice{0%,100%{transform:rotate(8deg) translate3d(0,0,0)}50%{transform:rotate(9deg) translate3d(4px,-10px,0)}}
.auth-panel{min-height:100svh;padding:clamp(34px,7.2vh,70px) clamp(28px,7.2vw,120px);background:radial-gradient(circle at 44% 38%,rgba(255,255,255,.98),transparent 35%),linear-gradient(115deg,#fff,#fbf6ee)}
.auth-card{width:min(100%,646px);min-height:800px;padding:46px 62px 28px;border:1px solid #eadfce;border-radius:28px;background:rgba(255,255,255,.52);box-shadow:0 22px 45px rgba(74,50,19,.12);backdrop-filter:blur(12px)}
.auth-brand{display:none}.register-steps{grid-template-columns:auto minmax(76px,1fr) auto;gap:12px;margin:0 24px 27px}.register-step{gap:10px;color:#68707a;font-size:.93rem}.register-step b{width:39px;height:39px;border:1.5px solid #7c838b;background:transparent;color:#69717a;font-size:1rem}.register-step.is-active{color:#bc7d14;font-weight:500}.register-step.is-active b{border:0;color:#fff;background:linear-gradient(145deg,#dcb157,#b87917);box-shadow:0 5px 11px rgba(178,116,20,.22)}.register-steps>i{background:linear-gradient(90deg,#bd7d16 0 55%,#aab0b4 55%)}
.auth-card h1{color:#17191d;font-size:2.75rem;font-weight:600;line-height:1}.auth-sub{margin:10px auto 28px;color:#68707a;font-size:.92rem}.register-form-step{gap:19px}.field label{margin-bottom:8px;color:#15191e;font-size:.91rem;font-weight:500}
.field input[type="text"],.field input[type="email"],.field input[type="password"]{height:50px;padding:0 45px;border:1px solid #adb1b4;border-radius:7px;color:#17191d;background-color:rgba(255,255,255,.4);background-position:15px center;background-repeat:no-repeat;background-size:20px}
#name{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236f747a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5 21v-2a7 7 0 0 1 14 0v2'/%3E%3C/svg%3E")}
#email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236f747a' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E")}
#password,#password_confirm{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236f747a' stroke-width='1.8'%3E%3Crect x='5' y='10' width='14' height='11' rx='1'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14v3'/%3E%3C/svg%3E")}
.password-input-row{position:relative;display:block}.password-toggle{position:absolute;top:0;right:0;width:52px;height:50px;padding:0;font-size:0;cursor:pointer}.password-toggle input{position:absolute;width:1px;height:1px;opacity:0}.password-toggle::before{content:"";width:23px;height:23px;margin:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236f747a' stroke-width='1.8'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat}.password-input-row input{padding-right:54px!important}.password-strength{margin-top:7px}.strength-bar{display:none}.strength-text{color:#7e858d!important;font-size:.74rem}
.auth-submit{min-height:61px;margin-top:4px;border:1px solid #d1a14c;border-radius:7px;color:#fff;font-size:1.02rem;background:linear-gradient(100deg,#062452,#011936);box-shadow:0 8px 15px rgba(8,35,73,.21),0 0 18px rgba(214,161,65,.14)}.auth-submit::after{margin-left:auto;font-size:1.7rem;font-weight:300}.register-protected{margin-top:19px;padding:0 0 18px;border-bottom:1px solid #d9dcdd;border-top:0;color:#242a30;font-size:.8rem}.auth-links{margin-top:18px;color:#15191e;font-size:.82rem}.auth-links a::before{content:"¿Ya tienes una cuenta? ";color:#15191e}.auth-links a{color:#073e94;font-weight:600}
@media(max-width:1280px){.login-page{grid-template-columns:minmax(500px,44%) 1fr}.hero-copy h2{left:0;font-size:3rem}.hero-copy p{left:0}.device-wrap{right:5px;opacity:.82}.auth-panel{padding-left:36px;padding-right:36px}}
@media(max-width:980px){.login-page{grid-template-columns:1fr}.hero-panel,.hero-content{min-height:430px}.hero-copy{left:34px;width:calc(100% - 68px)}.hero-copy h2{top:115px}.hero-copy p{top:245px}.device-wrap{right:8%;bottom:35px;transform:rotate(8deg) scale(.68);transform-origin:bottom right}.auth-panel{min-height:auto;padding:28px 18px 42px}.auth-card{min-height:0}}
@media(max-width:640px){.hero-panel,.hero-content{min-height:350px}.hero-copy{top:25px;left:22px;width:calc(100% - 44px);text-align:left}.hero-mark::before{font-size:2.5rem}.hero-mark::after{font-size:2.05rem}.hero-copy h2{top:92px;left:0;width:100%;margin:0;font-size:2.55rem}.hero-copy p{top:205px;left:0;width:75%;margin:0;font-size:.88rem}.hero-copy p::before{margin:0 0 16px}.device-wrap{display:none}.auth-panel{padding:18px 10px 28px}.auth-card{padding:28px 18px 22px;border-radius:20px}.register-steps{margin-left:0;margin-right:0}.register-step{font-size:.72rem}.auth-card h1{font-size:2.35rem}.register-step-actions{grid-template-columns:84px 1fr}}
@media(prefers-reduced-motion:reduce){.device-wrap{animation:none}}

/* Ajuste de escala basado en captura real a 1920 px */
@media(min-width:981px){
  .hero-copy{top:42px;left:55px;width:calc(100% - 110px)}
  .hero-mark::before{font-size:3.7rem}.hero-mark::after{font-size:3rem}
  .hero-copy h2{top:205px;left:28px;width:430px;font-size:4.25rem;line-height:.98}
  .hero-copy p{top:430px;left:31px;width:290px;font-size:1.15rem;line-height:1.7}
  .hero-copy p::before{width:115px;margin-bottom:28px}
  .device-wrap{top:19%;right:auto;bottom:auto;left:45%;transform:rotate(8deg);animation:regDeviceLarge 5.8s ease-in-out infinite}
  .phone{width:390px}.phone-screen{min-height:680px}.phone-body{padding:78px 22px 22px}.phone-hero{min-height:335px}.phone-hero h3{font-size:2.85rem}.phone-actions{gap:13px}.phone-chip{height:50px;font-size:.95rem}
  .device-wrap::after{bottom:-78px;width:500px;height:96px}
  .auth-panel{padding:50px 58px}
  .auth-card{width:min(100%,760px);min-height:900px;padding:55px 72px 34px;border-radius:32px}
  .register-steps{margin:0 26px 31px;gap:15px}.register-step{font-size:1.06rem}.register-step b{width:46px;height:46px;font-size:1.1rem}
  .auth-card h1{font-size:3.55rem}.auth-sub{margin:13px auto 31px;font-size:1.05rem}
  .register-form-step{gap:22px}.field label{margin-bottom:9px;font-size:1.03rem}
  .field input[type="text"],.field input[type="email"],.field input[type="password"]{height:62px;padding-left:52px;background-position:18px center;background-size:22px;font-size:1.05rem}
  .password-toggle{height:62px;width:60px}.password-strength{margin-top:8px}.strength-text{font-size:.84rem}
  .auth-submit{min-height:72px;font-size:1.16rem}.register-protected{margin-top:23px;padding-bottom:21px;font-size:.9rem}.auth-links{margin-top:20px;font-size:.94rem}
}
@keyframes regDeviceLarge{0%,100%{transform:rotate(8deg) translate3d(0,0,0)}50%{transform:rotate(9deg) translate3d(5px,-12px,0)}}
.register-form-step[data-register-step="1"] .field:has(#password_confirm){display:none}
.register-legal{margin:14px 0 0;color:#777f86;font-size:.72rem;line-height:1.45;text-align:center}.register-legal a{color:#0751a7}.register-protected{border-bottom:0}.auth-links{padding-top:20px;border-top:1px solid #d9dcdd}
@media(min-width:981px){.register-legal{font-size:.79rem}.auth-links{padding-top:22px}}

/* Referencia final: 1536 × 922 */
@media(min-width:981px){
  .login-page{grid-template-columns:45.7vw 54.3vw}
  .hero-panel{min-height:100vh;background-color:#031630;background-image:url('../img/register-hero-final.png');background-repeat:no-repeat;background-size:100% auto;background-position:center -5vh}
  .hero-panel::before,.hero-panel::after,.hero-lights,.device-wrap{display:none!important}
  .hero-content{min-height:100vh}
  .hero-copy{inset:0;width:100%;max-width:none}
  .hero-mark{position:absolute;top:5.8%;left:6.1%;gap:10px}
  .hero-mark::before{font-size:3.35rem}.hero-mark::after{font-size:2.7rem}
  .hero-copy h2{top:22.8%;left:9.6%;width:330px;margin:0;font-size:3.2rem;line-height:1.01;letter-spacing:-.025em}
  .hero-copy h2 em{margin-top:6px}
  .hero-copy p{top:42.3%;left:9.8%;width:245px;margin:0;font-size:1rem;line-height:1.65}
  .hero-copy p::before{width:94px;margin-bottom:25px}
  .auth-panel{min-height:100vh;padding:0;align-items:center;justify-content:center}
  .auth-card{box-sizing:border-box;width:38.3vw;min-height:79.3vh;padding:4.6vh 3.75vw 2.8vh;border-radius:25px}
  .register-steps{margin:0 1.55vw 3.1vh;gap:.8vw;grid-template-columns:auto minmax(74px,1fr) auto}
  .register-step{font-size:1rem;gap:.65vw}.register-step b{width:40px;height:40px;font-size:1rem}
  .auth-card h1{font-size:2.85rem}.auth-sub{margin:9px auto 2.8vh;font-size:.98rem}
  .register-form-step{gap:2.1vh}.field label{margin-bottom:8px;font-size:.98rem}
  .field input[type="text"],.field input[type="email"],.field input[type="password"]{height:47px;padding-left:44px;background-position:14px center;background-size:20px;font-size:.98rem}
  .password-toggle{height:47px;width:52px}.strength-text{font-size:.78rem}
  .auth-submit{min-height:55px;margin-top:.4vh;font-size:1.05rem}
  .register-protected{margin-top:1.7vh;padding:0;font-size:.83rem}
  .auth-links{margin-top:1.8vh;padding-top:1.8vh;font-size:.88rem}
  .register-legal{margin-top:1.2vh;font-size:.72rem;white-space:nowrap}
}

/* Animación sutil del registro */
.hero-panel{animation:registerHeroBreath 12s ease-in-out infinite alternate}
.hero-lights{display:block!important;z-index:2;opacity:.65}
.hero-lights i{animation-name:registerGoldFloat!important;animation-timing-function:ease-in-out!important;will-change:transform,opacity}
.hero-copy .hero-mark{animation:registerRevealDown .8s cubic-bezier(.22,.8,.25,1) both}
.hero-copy h2{animation:registerRevealRight .9s .12s cubic-bezier(.22,.8,.25,1) both}
.hero-copy p{animation:registerRevealRight .9s .25s cubic-bezier(.22,.8,.25,1) both}
.auth-card{animation:registerCardReveal .85s .08s cubic-bezier(.2,.78,.2,1) both}
.register-step.is-active b{animation:registerStepPulse 2.8s ease-in-out infinite}
.auth-submit{position:relative;overflow:hidden}
.auth-submit::before{content:"";position:absolute;inset:-40% auto -40% -35%;width:20%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:registerButtonShine 4.8s 1.5s ease-in-out infinite;pointer-events:none}
.field input{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease!important}
.field input:focus{transform:translateY(-1px);border-color:#c79235!important;box-shadow:0 0 0 4px rgba(205,154,61,.12)!important}
@keyframes registerHeroBreath{from{background-size:100% auto;background-position:center -5vh}to{background-size:101.8% auto;background-position:center -5.6vh}}
@keyframes registerGoldFloat{0%,100%{transform:translate3d(0,8px,0) scale(.75);opacity:.18}45%{transform:translate3d(9px,-22px,0) scale(1.15);opacity:.75}70%{transform:translate3d(-5px,-10px,0) scale(.95);opacity:.42}}
@keyframes registerRevealDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes registerRevealRight{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
@keyframes registerCardReveal{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes registerStepPulse{0%,100%{box-shadow:0 5px 11px rgba(178,116,20,.2),0 0 0 0 rgba(214,161,65,.2)}50%{box-shadow:0 7px 15px rgba(178,116,20,.3),0 0 0 7px rgba(214,161,65,0)}}
@keyframes registerButtonShine{0%,58%{left:-35%;opacity:0}65%{opacity:1}82%,100%{left:120%;opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-panel,.hero-lights i,.hero-copy .hero-mark,.hero-copy h2,.hero-copy p,.auth-card,.register-step.is-active b,.auth-submit::before{animation:none!important}.field input{transition:none!important}}

/* Panel izquierdo animado: arte, profundidad y destellos */
@media(min-width:981px){
  .hero-panel{--hero-x:0px;--hero-y:0px;--glow-x:58%;--glow-y:44%;background:#031630!important;animation:none;perspective:1200px}
  .hero-panel::before{content:"";display:block!important;position:absolute;z-index:0;inset:-3%;opacity:1;mask-image:none;filter:none;background:url('../img/register-hero-final.png') center/100% auto no-repeat;transform:translate3d(var(--hero-x),var(--hero-y),0) scale(1.035);transform-origin:center;transition:transform .35s cubic-bezier(.2,.7,.2,1);animation:registerHeroArtFloat 7s ease-in-out infinite;will-change:transform}
  .hero-panel::after{content:"";display:block!important;position:absolute;z-index:1;inset:0;opacity:.75;filter:none;background:radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(255,198,92,.13),transparent 18%);transition:background-position .25s ease;pointer-events:none}
  .hero-content{position:relative;z-index:2}
  .hero-lights{z-index:3}
  .hero-lights i{box-shadow:0 0 12px #f5bd57,0 0 28px rgba(245,189,87,.8)}
  .hero-copy{z-index:4}
}
@keyframes registerHeroArtFloat{
  0%,100%{transform:translate3d(var(--hero-x),calc(var(--hero-y) + 3px),0) scale(1.035) rotate(.04deg)}
  50%{transform:translate3d(var(--hero-x),calc(var(--hero-y) - 8px),0) scale(1.052) rotate(-.08deg)}
}
@media(prefers-reduced-motion:reduce){.hero-panel::before{animation:none!important;transform:none!important;transition:none!important}.hero-panel::after{display:none!important}}

/* Control mostrar/ocultar contraseña */
.field label.password-toggle{display:flex!important;align-items:center;justify-content:center;top:0;right:0;width:52px;height:100%;margin:0!important;padding:0!important;color:transparent!important;font-size:0!important;line-height:0!important;letter-spacing:0!important;text-transform:none!important;overflow:hidden;cursor:pointer}
.field label.password-toggle::before{display:block;flex:0 0 23px;width:23px;height:23px;margin:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236f747a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E") center/23px 23px no-repeat;opacity:.9;transition:opacity .18s ease,transform .18s ease}
.field label.password-toggle:has(input:checked)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236f747a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 3 18 18'/%3E%3Cpath d='M10.6 6.1A10.8 10.8 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-2.1 2.8M6.6 6.6C3.6 8.4 2 12 2 12s3.5 6 10 6a10.4 10.4 0 0 0 4.1-.8'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");transform:scale(.96)}
.field label.password-toggle:hover::before{opacity:1;transform:scale(1.08)}
.field label.password-toggle input{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;opacity:0!important;pointer-events:none}
#password{padding-right:58px!important}