/* Login Suavitel 3D. Todos los selectores están aislados para no modificar el panel. */
#loginScreen.login-shell{
  --login-navy:#03182c;
  --login-navy-soft:#082b46;
  --login-teal:#00a7b7;
  --login-cyan:#76e4e6;
  --login-pink:#ee2d86;
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,560px);
  overflow:hidden;
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 43% 39%,rgba(82,226,231,.24),transparent 25%),
    radial-gradient(circle at 15% 90%,rgba(0,178,189,.22),transparent 36%),
    linear-gradient(122deg,#031526 0%,#063654 47%,#0b6c7c 72%,#062a42 100%);
  box-shadow:none;
}

#loginScreen .login-ambient{
  position:absolute;
  inset:-15%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 15%,rgba(255,255,255,.09) 0 1px,transparent 2px),
    radial-gradient(circle at 65% 60%,rgba(255,255,255,.08) 0 1px,transparent 2px);
  background-size:58px 58px,76px 76px;
  animation:loginAmbientMove 28s linear infinite;
}

#loginScreen .login-ambient span{
  position:absolute;
  display:block;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 0 44px rgba(116,231,234,.035),0 0 80px rgba(0,177,189,.04);
}

#loginScreen .login-ambient span:nth-child(1){width:44vw;height:44vw;left:-17vw;top:-22vw}
#loginScreen .login-ambient span:nth-child(2){width:32vw;height:32vw;left:24vw;bottom:-22vw}
#loginScreen .login-ambient span:nth-child(3){width:24vw;height:24vw;right:3vw;top:-14vw}

#loginScreen .login-art{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  padding:clamp(28px,4vw,58px);
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(2,18,34,.38) 0%,transparent 55%,rgba(1,16,31,.24) 100%),
    radial-gradient(ellipse at 46% 48%,rgba(74,225,230,.13),transparent 42%);
}

#loginScreen .login-art::before{
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:
    linear-gradient(108deg,transparent 20%,rgba(255,255,255,.055) 44%,transparent 60%),
    radial-gradient(circle at 48% 50%,rgba(255,255,255,.08),transparent 32%);
  box-shadow:none;
  animation:loginLightDrift 9s ease-in-out infinite alternate;
}

#loginScreen .login-art::after{
  content:"";
  position:absolute;
  left:31%;
  bottom:-17%;
  width:38vw;
  height:18vw;
  border-radius:50%;
  background:rgba(0,6,18,.5);
  opacity:.7;
  filter:blur(45px);
  transform:rotate(-7deg);
}

#loginScreen .login-brand{
  position:relative;
  z-index:8;
  width:max-content;
}

#loginScreen .login-brand .brand-mark,
#loginScreen .mobile-brand .brand-mark{
  width:46px;
  height:46px;
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 10px 26px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
}

#loginScreen .login-brand strong,
#loginScreen .mobile-brand strong{font-size:16px;letter-spacing:-.02em}
#loginScreen .login-brand span,
#loginScreen .mobile-brand span{color:rgba(255,255,255,.82);opacity:1}

#loginScreen .login-copy{
  position:absolute;
  z-index:7;
  left:clamp(34px,4vw,64px);
  bottom:clamp(128px,16vh,190px);
  width:min(33vw,500px);
  margin:0;
}

#loginScreen .login-copy .kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.78);
}

#loginScreen .login-copy .kicker::before{
  content:"";
  width:25px;
  height:2px;
  border-radius:99px;
  background:var(--login-pink);
  box-shadow:0 0 14px rgba(238,45,134,.55);
}

#loginScreen .login-copy h1{
  margin:16px 0 18px;
  font-size:clamp(38px,3.45vw,58px);
  line-height:.98;
  letter-spacing:-.058em;
  text-wrap:balance;
  text-shadow:0 13px 38px rgba(0,12,26,.25);
}

#loginScreen .login-copy h1 span{
  display:block;
  white-space:nowrap;
}

#loginScreen .login-copy p{
  width:min(100%,390px);
  margin:0;
  color:rgba(229,251,253,.74);
  font-size:14px;
  line-height:1.65;
}

#loginScreen .login-pills{margin-top:24px;gap:8px}
#loginScreen .login-pills span{
  padding:9px 12px;
  border-color:rgba(191,246,248,.16);
  background:rgba(3,32,53,.28);
  color:rgba(236,253,254,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
}

/* Producto: varias capas separan flotación, inclinación X/Y y brillo. */
#loginScreen .product-stage{
  position:absolute;
  z-index:5;
  left:clamp(390px,45vw,760px);
  top:50%;
  width:clamp(330px,31vw,500px);
  height:min(88vh,900px);
  transform:translate(-50%,-50%);
  perspective:1500px;
  transform-style:preserve-3d;
  pointer-events:none;
}

#loginScreen .product-stage::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:12%;
  right:2%;
  bottom:1%;
  height:8%;
  border-radius:50%;
  background:rgba(0,6,18,.62);
  filter:blur(22px);
  transform:translateZ(-80px) rotate(-4deg);
  animation:productShadow 6s ease-in-out infinite;
}

#loginScreen .product-stage::after{
  content:"";
  position:absolute;
  z-index:-3;
  inset:15% -20% 3%;
  border-radius:48%;
  background:radial-gradient(ellipse,rgba(61,225,231,.22),rgba(0,155,174,.05) 46%,transparent 70%);
  filter:blur(18px);
  animation:productAura 5s ease-in-out infinite;
}

#loginScreen .product-float,
#loginScreen .product-y,
#loginScreen .product-model,
#loginScreen .product-breathe,
#loginScreen .product-silhouette{width:100%;height:100%;transform-style:preserve-3d}

#loginScreen .product-float{animation:productFloat 6s ease-in-out infinite}
#loginScreen .product-y{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
#loginScreen .product-model{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
#loginScreen .product-breathe{animation:productBreathe 7s ease-in-out infinite}

#loginScreen .product-silhouette{
  position:relative;
  display:grid;
  place-items:center;
  transform:translateZ(42px);
}

#loginScreen .product-silhouette::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:#00111f;
  opacity:.6;
  filter:blur(15px);
  transform:translate3d(24px,15px,-58px) scale(.965);
  -webkit-mask:url('../images/suavitel-product.png') center/contain no-repeat;
  mask:url('../images/suavitel-product.png') center/contain no-repeat;
}

#loginScreen .product-silhouette img{
  display:block;
  width:auto;
  max-width:100%;
  height:100%;
  max-height:100%;
  object-fit:contain;
  filter:saturate(1.05) contrast(1.025) drop-shadow(0 26px 32px rgba(0,11,25,.32));
  transform:translateZ(36px);
  user-select:none;
}

#loginScreen .product-shine{
  position:absolute;
  inset:0;
  z-index:4;
  background:linear-gradient(108deg,transparent 27%,rgba(255,255,255,.03) 39%,rgba(255,255,255,.42) 48%,rgba(255,255,255,.05) 56%,transparent 67%);
  transform:translateX(-85%);
  mix-blend-mode:screen;
  -webkit-mask:url('../images/suavitel-product.png') center/contain no-repeat;
  mask:url('../images/suavitel-product.png') center/contain no-repeat;
  animation:productShine 7.5s ease-in-out infinite 1.2s;
}

#loginScreen .product-stage.tilt-left .product-model{transform:rotateY(-8deg) translateX(-5px)}
#loginScreen .product-stage.tilt-right .product-model{transform:rotateY(8deg) translateX(5px)}
#loginScreen .product-stage.tilt-up .product-y{transform:rotateX(5deg) translateY(-5px)}
#loginScreen .product-stage.tilt-down .product-y{transform:rotateX(-5deg) translateY(5px)}

#loginScreen .product-orbit{
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  display:block;
  border:1px solid rgba(154,242,245,.18);
  border-radius:50%;
  transform-style:preserve-3d;
}

#loginScreen .product-orbit::after{
  content:"";
  position:absolute;
  top:-5px;
  left:51%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#b7f6f7;
  box-shadow:0 0 18px rgba(115,230,233,.8);
}

#loginScreen .orbit-one{width:132%;height:48%;margin:-24% 0 0 -66%;transform:rotateX(70deg) rotateZ(4deg);animation:orbitOne 13s linear infinite}
#loginScreen .orbit-two{width:112%;height:66%;margin:-34% 0 0 -56%;transform:rotateY(67deg) rotateZ(14deg);opacity:.6;animation:orbitTwo 17s linear infinite reverse}

#loginScreen .fragrance-bubble{
  position:absolute;
  z-index:-1;
  display:block;
  border-radius:50%;
  background:radial-gradient(circle at 31% 27%,rgba(255,255,255,.72),rgba(119,237,239,.17) 30%,rgba(0,155,174,.05) 62%,transparent 67%);
  border:1px solid rgba(203,250,251,.2);
  box-shadow:inset -8px -10px 20px rgba(0,112,136,.1),0 10px 30px rgba(0,16,32,.12);
  backdrop-filter:blur(2px);
}

#loginScreen .bubble-one{width:54px;height:54px;left:-7%;top:21%;animation:fragranceBubble 6.8s ease-in-out infinite}
#loginScreen .bubble-two{width:27px;height:27px;right:0;top:16%;animation:fragranceBubble 5.4s ease-in-out infinite 1s}
#loginScreen .bubble-three{width:38px;height:38px;right:-9%;bottom:23%;animation:fragranceBubble 7.2s ease-in-out infinite 2s}

/* Panel y formulario glassmorphism. */
#loginScreen .login-panel{
  position:relative;
  z-index:10;
  grid-column:2;
  display:grid;
  place-items:center;
  min-width:0;
  padding:clamp(26px,4vw,62px);
  background:linear-gradient(90deg,transparent,rgba(2,20,37,.18) 24%,rgba(2,17,33,.3));
}

#loginScreen .login-card{
  position:relative;
  width:min(470px,100%);
  max-height:calc(100vh - 50px);
  max-height:calc(100dvh - 50px);
  overflow-x:hidden;
  overflow-y:auto;
  padding:clamp(28px,3.2vw,45px);
  border:1px solid rgba(191,246,248,.22);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(6,39,62,.76),rgba(2,25,45,.62));
  color:#fff;
  box-shadow:0 34px 90px rgba(0,8,21,.38),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.1);
  backdrop-filter:blur(28px) saturate(1.25);
  scrollbar-width:thin;
  scrollbar-color:rgba(133,230,233,.3) transparent;
}

#loginScreen .login-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 34%,transparent 68%,rgba(41,206,215,.07));
  pointer-events:none;
}

#loginScreen .login-card-glow{
  position:absolute;
  z-index:-1;
  right:-80px;
  top:-90px;
  width:210px;
  height:210px;
  border-radius:50%;
  background:rgba(43,217,224,.19);
  filter:blur(48px);
  pointer-events:none;
}

#loginScreen .mobile-brand{display:none;margin:0 0 28px}

#loginScreen .auth-tabs{
  display:flex;
  align-items:center;
  gap:27px;
  margin-bottom:34px;
  border-bottom:1px solid rgba(190,242,245,.13);
}

#loginScreen .auth-tab{
  position:relative;
  padding:0 1px 15px;
  border:0;
  background:transparent;
  color:rgba(221,248,250,.52);
  font-size:11px;
  font-weight:780;
  letter-spacing:.04em;
}

#loginScreen .auth-tab.active{color:#fff}
#loginScreen .auth-tab.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  border-radius:99px 99px 0 0;
  background:var(--login-pink);
  box-shadow:0 0 15px rgba(238,45,134,.6);
}

#loginScreen .auth-tab:not(.active):hover{color:rgba(239,253,254,.86)}

#loginScreen .auth-form{
  animation:authFormIn .26s ease both;
}

#loginScreen .auth-form>.kicker{
  display:block;
  color:#72dce0;
  font-size:9px;
  letter-spacing:.18em;
}

#loginScreen .auth-form h2{
  margin:8px 0 8px;
  color:#fff;
  font-size:clamp(36px,4vw,48px);
  letter-spacing:-.05em;
}

#loginScreen .auth-form>p.muted{
  margin:0 0 27px;
  color:rgba(219,246,248,.62);
  font-size:12px;
  line-height:1.55;
}


#loginScreen .user-only-badge{
  display:flex;
  align-items:center;
  gap:10px;
  margin:-6px 0 15px;
  padding:10px 12px;
  border:1px solid rgba(98,214,162,.18);
  border-radius:13px;
  background:rgba(29,121,88,.12);
  color:rgba(225,252,242,.86);
}

#loginScreen .user-only-badge>span{
  width:23px;
  height:23px;
  flex:0 0 23px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(98,214,162,.14);
  color:#7ee0b3;
  font-size:11px;
  font-weight:900;
}

#loginScreen .user-only-badge b{display:block;font-size:10px;letter-spacing:.02em}
#loginScreen .user-only-badge small{display:block;margin-top:2px;color:rgba(211,244,234,.48);font-size:8px;line-height:1.4}

#loginScreen .login-field{
  position:relative;
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  min-height:66px;
  margin-bottom:13px;
  padding:9px 12px 8px 14px;
  border:1px solid rgba(186,239,242,.15);
  border-radius:16px;
  background:rgba(2,22,40,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .2s,box-shadow .2s,background .2s,transform .2s;
}

#loginScreen .login-field:focus-within{
  border-color:rgba(96,225,230,.58);
  background:rgba(2,28,48,.48);
  box-shadow:0 0 0 4px rgba(54,207,216,.08),inset 0 1px 0 rgba(255,255,255,.04);
  transform:translateY(-1px);
}

#loginScreen .field-icon{
  position:relative;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#80dfe3;
  background:rgba(58,208,216,.1);
  font-size:12px;
  font-weight:800;
}

#loginScreen .lock-icon::before{
  content:"";
  width:8px;
  height:7px;
  margin-top:5px;
  border:1.5px solid currentColor;
  border-radius:2px;
}

#loginScreen .lock-icon::after{
  content:"";
  position:absolute;
  width:6px;
  height:7px;
  margin-top:-7px;
  border:1.5px solid currentColor;
  border-bottom:0;
  border-radius:5px 5px 0 0;
}

#loginScreen .field-control{min-width:0}

#loginScreen .field-control label{
  display:block;
  margin:0 0 3px;
  color:rgba(213,245,247,.55);
  font-size:8px;
  font-weight:760;
  letter-spacing:.075em;
  text-transform:uppercase;
}

#loginScreen .field-control input,
#loginScreen .login-card .field-control input[type=email],
#loginScreen .login-card .field-control input[type=password],
#loginScreen .login-card .field-control input[type=text]{
  display:block;
  width:100%;
  min-width:0;
  padding:2px 0 1px;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  color:#f5ffff;
  font-size:12px;
  font-weight:540;
}

#loginScreen .field-control input::placeholder{color:rgba(211,245,247,.3)}
#loginScreen .field-control input:-webkit-autofill,
#loginScreen .field-control input:-webkit-autofill:hover,
#loginScreen .field-control input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
  caret-color:#fff;
}

#loginScreen .password-toggle{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:rgba(204,242,244,.5);
  transition:color .2s,background .2s;
}

#loginScreen .password-toggle:hover,
#loginScreen .password-toggle:focus-visible{color:#fff;background:rgba(255,255,255,.07);outline:0}

#loginScreen .password-toggle span{
  position:relative;
  width:18px;
  height:11px;
  border:1.5px solid currentColor;
  border-radius:50% 50% 45% 45%;
}

#loginScreen .password-toggle span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  border:1.5px solid currentColor;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

#loginScreen .password-toggle[aria-pressed="true"] span::before{
  content:"";
  position:absolute;
  left:-3px;
  top:4px;
  width:23px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transform:rotate(-42deg);
}

#loginScreen .login-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:7px 0 21px;
}

#loginScreen .login-remember{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:rgba(224,248,249,.66);
  cursor:pointer;
}

#loginScreen .login-remember input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}

#loginScreen .check-mark{
  position:relative;
  width:17px;
  height:17px;
  flex:0 0 17px;
  border:1px solid rgba(178,234,237,.32);
  border-radius:5px;
  background:rgba(1,20,36,.24);
  transition:.2s;
}

#loginScreen .login-remember input:checked+.check-mark{
  border-color:var(--login-pink);
  background:var(--login-pink);
  box-shadow:0 0 15px rgba(238,45,134,.24);
}

#loginScreen .login-remember input:checked+.check-mark::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:4px;
  height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

#loginScreen .login-remember input:focus-visible+.check-mark{outline:2px solid rgba(114,220,224,.6);outline-offset:2px}

#loginScreen .protected-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:rgba(205,242,244,.43);
  font-size:9px;
}

#loginScreen .protected-label i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#62d6a2;
  box-shadow:0 0 0 4px rgba(98,214,162,.08),0 0 12px rgba(98,214,162,.35);
}

#loginScreen .login-feedback{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:-5px 0 15px!important;
  padding:10px 12px;
  border:1px solid rgba(255,155,173,.18);
  border-radius:12px;
  background:rgba(135,22,52,.22);
  color:#ffd5dd;
  font-size:10px!important;
  line-height:1.5;
}

#loginScreen .login-feedback::before{content:"!";display:grid;place-items:center;width:17px;height:17px;flex:0 0 17px;border-radius:50%;background:rgba(255,255,255,.13);font-size:9px;font-weight:850}

#loginScreen .login-submit{
  position:relative;
  min-height:52px;
  padding:15px 19px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:15px;
  background:linear-gradient(115deg,#e82c81,#f43e91 54%,#ff569d);
  box-shadow:0 15px 34px rgba(226,28,116,.27),inset 0 1px 0 rgba(255,255,255,.2);
  color:#fff;
}

#loginScreen .login-submit::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.22) 45%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .7s;
}

#loginScreen .login-submit:hover{transform:translateY(-2px);box-shadow:0 19px 42px rgba(226,28,116,.34),inset 0 1px 0 rgba(255,255,255,.22)}
#loginScreen .login-submit:hover::before{transform:translateX(120%)}
#loginScreen .login-submit:focus-visible{outline:3px solid rgba(115,226,230,.46);outline-offset:3px}
#loginScreen .login-submit:disabled{cursor:wait;opacity:.78;transform:none}
#loginScreen .submit-label{position:relative;font-size:12px;letter-spacing:.015em}
#loginScreen .submit-arrow{position:relative;margin-left:auto;font-size:18px;transition:transform .2s}
#loginScreen .login-submit:hover .submit-arrow{transform:translateX(3px)}

#loginScreen .submit-loader{
  display:none;
  width:18px;
  height:18px;
  margin-left:auto;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:loginSpin .7s linear infinite;
}

#loginScreen .login-submit.loading .submit-arrow{display:none}
#loginScreen .login-submit.loading .submit-loader{display:block}

#loginScreen .text-btn{
  color:#7fe0e3;
  padding:14px 8px 7px;
  font-size:10px;
}

#loginScreen .text-btn:hover{color:#fff}

#loginScreen .security-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:18px 0 0!important;
  padding:12px 0 0;
  border-top:1px solid rgba(185,239,242,.11);
  border-radius:0;
  background:transparent;
  color:rgba(211,244,246,.43);
  font-size:9px!important;
}

#loginScreen .security-note>span{color:#64d4d9;font-size:13px;line-height:1}

@keyframes authFormIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes loginAmbientMove{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(4%,3%,0) rotate(3deg)}}
@keyframes loginLightDrift{0%{opacity:.55;transform:translateX(-2%)}100%{opacity:1;transform:translateX(3%)}}
@keyframes productFloat{0%,100%{transform:translate3d(0,-7px,0)}50%{transform:translate3d(0,13px,0)}}
@keyframes productBreathe{0%,100%{transform:rotateZ(-.7deg) scale(.995)}50%{transform:rotateZ(.8deg) scale(1.01)}}
@keyframes productShadow{0%,100%{opacity:.58;transform:translateZ(-80px) rotate(-4deg) scale(.93)}50%{opacity:.74;transform:translateZ(-80px) rotate(-4deg) scale(1.04)}}
@keyframes productAura{0%,100%{opacity:.65;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes productShine{0%,18%{transform:translateX(-95%);opacity:0}34%{opacity:.68}50%{transform:translateX(95%);opacity:0}100%{transform:translateX(95%);opacity:0}}
@keyframes orbitOne{from{transform:rotateX(70deg) rotateZ(4deg)}to{transform:rotateX(70deg) rotateZ(364deg)}}
@keyframes orbitTwo{from{transform:rotateY(67deg) rotateZ(14deg)}to{transform:rotateY(67deg) rotateZ(374deg)}}
@keyframes fragranceBubble{0%,100%{transform:translate3d(0,8px,0) scale(.94);opacity:.5}50%{transform:translate3d(9px,-13px,45px) scale(1.08);opacity:.92}}
@keyframes loginSpin{to{transform:rotate(360deg)}}

@media (max-width:1180px){
  #loginScreen.login-shell{grid-template-columns:minmax(0,1fr) minmax(400px,500px)}
  #loginScreen .product-stage{left:43vw;width:clamp(300px,34vw,420px);height:min(82vh,780px)}
  #loginScreen .login-copy{width:30vw}
  #loginScreen .login-copy h1{font-size:clamp(37px,4vw,55px)}
  #loginScreen .login-pills span:nth-child(3){display:none}
}

@media (max-width:900px){
  #loginScreen.login-shell{grid-template-columns:1fr}
  #loginScreen .login-panel{grid-column:1;padding:26px;justify-items:end}
  #loginScreen .login-card{width:min(440px,58vw)}
  #loginScreen .product-stage{left:27vw;width:38vw;height:min(83vh,760px);opacity:.9}
  #loginScreen .login-copy{display:none}
  #loginScreen .login-bottom{display:none}
}

@media (max-width:680px){
  #loginScreen.login-shell{min-height:100svh}
  #loginScreen .login-art{display:block;padding:20px}
  #loginScreen .login-brand{display:none}
  #loginScreen .login-panel{grid-column:1;place-items:center;padding:18px}
  #loginScreen .login-card{width:min(100%,430px);max-height:calc(100svh - 36px);padding:26px 23px;border-radius:25px;background:linear-gradient(145deg,rgba(4,35,57,.88),rgba(2,22,40,.82))}
  #loginScreen .mobile-brand{display:flex}
  #loginScreen .auth-tabs{margin-bottom:26px}
  #loginScreen .product-stage{left:72%;top:46%;width:58vw;height:82vh;opacity:.26;filter:blur(.2px)}
  #loginScreen .product-orbit,#loginScreen .fragrance-bubble{opacity:.35}
  #loginScreen .auth-form h2{font-size:37px}
}

@media (max-width:420px){
  #loginScreen .login-panel{padding:10px}
  #loginScreen .login-card{max-height:calc(100svh - 20px);padding:22px 18px;border-radius:22px}
  #loginScreen .mobile-brand{margin-bottom:21px}
  #loginScreen .auth-tabs{margin-bottom:22px}
  #loginScreen .auth-form>p.muted{margin-bottom:20px}
  #loginScreen .login-field{min-height:61px}
  #loginScreen .protected-label{display:none}
}

@media (max-height:730px) and (min-width:681px){
  #loginScreen .login-card{padding:26px 32px}
  #loginScreen .auth-tabs{margin-bottom:22px}
  #loginScreen .auth-form h2{font-size:35px}
  #loginScreen .auth-form>p.muted{margin-bottom:18px}
  #loginScreen .login-field{min-height:59px;margin-bottom:10px}
  #loginScreen .login-options{margin-bottom:16px}
  #loginScreen .security-note{display:none}
}

@media (prefers-reduced-motion:reduce){
  #loginScreen .login-ambient,
  #loginScreen .login-art::before,
  #loginScreen .product-float,
  #loginScreen .product-breathe,
  #loginScreen .product-stage::before,
  #loginScreen .product-stage::after,
  #loginScreen .product-shine,
  #loginScreen .product-orbit,
  #loginScreen .fragrance-bubble,
  #loginScreen .submit-loader{animation:none!important}
  #loginScreen .product-y,
  #loginScreen .product-model{transform:none!important;transition:none}
}

/* Ajuste final del producto: la botella completa siempre queda dentro del viewport. */
#loginScreen .product-stage{
  left:clamp(500px,42vw,760px);
  top:50%;
  width:clamp(260px,17vw,310px);
  height:min(68vh,620px);
  max-height:calc(100dvh - 150px);
  overflow:visible;
}

#loginScreen .product-silhouette img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}

#loginScreen .product-stage::before{left:9%;right:9%;bottom:0;height:6%}
#loginScreen .login-copy{width:min(32vw,460px)}
#loginScreen .login-copy h1{font-size:clamp(38px,3.15vw,52px)}
#loginScreen .login-card{width:min(450px,100%)}

@media (max-width:1320px) and (min-width:901px){
  #loginScreen.login-shell{grid-template-columns:minmax(0,1fr) minmax(400px,480px)}
  #loginScreen .product-stage{
    left:42vw;
    width:clamp(235px,18vw,275px);
    height:min(65vh,550px);
    max-height:calc(100dvh - 150px);
  }
  #loginScreen .login-copy{width:min(28vw,350px)}
  #loginScreen .login-copy h1{font-size:clamp(36px,3.6vw,50px)}
}

@media (max-width:900px) and (min-width:681px){
  #loginScreen .product-stage{
    left:24vw;
    width:clamp(210px,29vw,260px);
    height:min(62vh,520px);
    max-height:calc(100dvh - 130px);
    opacity:.8;
  }
}

@media (max-width:680px){
  #loginScreen .product-stage{
    left:76%;
    top:50%;
    width:clamp(190px,52vw,245px);
    height:min(66vh,500px);
    max-height:calc(100svh - 120px);
    opacity:.22;
  }
}
/* Escaparate 3D de la familia Suavitel. */
#loginScreen.login-shell{perspective:1800px}
#loginScreen .login-panel{perspective:1600px}
#loginScreen .login-card{
  transform:translateZ(18px) rotateY(-1.15deg);
  transform-origin:center right;
  box-shadow:
    -18px 30px 80px rgba(0,8,21,.42),
    0 8px 24px rgba(29,205,214,.08),
    inset 1px 1px 0 rgba(255,255,255,.16),
    inset -1px -1px 0 rgba(0,0,0,.14);
  transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .5s;
}
#loginScreen .login-card:hover,
#loginScreen .login-card:focus-within{
  transform:translateZ(28px) rotateY(0);
  box-shadow:
    -10px 34px 90px rgba(0,8,21,.46),
    0 12px 34px rgba(29,205,214,.12),
    inset 1px 1px 0 rgba(255,255,255,.18),
    inset -1px -1px 0 rgba(0,0,0,.14);
}
#loginScreen .login-card::after{
  content:"";
  position:absolute;
  inset:10px;
  z-index:-1;
  border:1px solid rgba(164,238,241,.055);
  border-radius:22px;
  pointer-events:none;
}
#loginScreen .login-field,
#loginScreen .login-submit{transform:translateZ(12px)}
#loginScreen .login-field:focus-within{transform:translate3d(0,-1px,18px)}
#loginScreen .login-submit:hover{transform:translate3d(0,-2px,18px)}

#loginScreen .product-stage{
  left:clamp(720px,46vw,865px);
  width:clamp(650px,42vw,820px);
  height:min(70vh,650px);
  max-height:calc(100dvh - 115px);
  perspective:1900px;
}
#loginScreen .product-stage::before{
  left:5%;
  right:3%;
  bottom:-1%;
  height:9%;
  background:radial-gradient(ellipse,rgba(0,5,18,.78),rgba(0,10,22,.42) 48%,transparent 72%);
  filter:blur(18px);
}
#loginScreen .product-stage::after{
  inset:4% -8% -4%;
  background:radial-gradient(ellipse,rgba(83,229,233,.25),rgba(0,155,174,.075) 45%,transparent 70%);
}
#loginScreen .product-ensemble{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  isolation:isolate;
}
#loginScreen .product-ensemble::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:3%;
  right:0;
  bottom:0;
  height:35%;
  border:1px solid rgba(126,236,239,.26);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(73,220,226,.16),rgba(1,57,78,.05) 48%,transparent 70%);
  box-shadow:0 0 55px rgba(42,207,216,.1),inset 0 0 35px rgba(82,225,230,.08);
  transform:translateZ(-120px) rotateX(72deg);
  animation:ensemblePlatform 9s ease-in-out infinite;
}
#loginScreen .product-ensemble::after{
  content:"";
  position:absolute;
  z-index:-3;
  left:15%;
  right:10%;
  top:5%;
  bottom:7%;
  border-radius:46%;
  background:radial-gradient(ellipse,rgba(92,229,233,.17),transparent 67%);
  filter:blur(18px);
  transform:translateZ(-150px);
}
#loginScreen .product-unit{
  position:absolute;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
}
#loginScreen .product-unit img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
  user-select:none;
  filter:saturate(1.08) contrast(1.035) drop-shadow(0 26px 28px rgba(0,8,22,.42));
}
#loginScreen .product-unit::before{
  content:"";
  position:absolute;
  z-index:0;
  left:12%;
  right:9%;
  bottom:-3%;
  height:7%;
  border-radius:50%;
  background:rgba(0,5,16,.72);
  filter:blur(13px);
  transform:translateZ(-55px) rotateX(68deg);
}
#loginScreen .product-glint{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.8;
  background:linear-gradient(105deg,transparent 22%,rgba(255,255,255,.03) 36%,rgba(255,255,255,.46) 47%,rgba(255,255,255,.05) 57%,transparent 70%);
  transform:translateX(-110%);
  mix-blend-mode:screen;
  animation:ensembleGlint 8s ease-in-out infinite;
}
#loginScreen .product-jug{
  z-index:1;
  left:0;
  top:6%;
  width:34%;
  animation:jugDepth 7.4s ease-in-out infinite;
}
#loginScreen .product-jug .product-glint{
  -webkit-mask:url('../images/suavitel-complete-jug-v2.png') center/contain no-repeat;
  mask:url('../images/suavitel-complete-jug-v2.png') center/contain no-repeat;
  animation-delay:1.2s;
}
#loginScreen .product-original{
  z-index:6;
  left:41%;
  top:21%;
  width:20%;
  animation:originalDepth 6.2s ease-in-out infinite;
}
#loginScreen .product-original .product-glint{
  -webkit-mask:url('../images/suavitel-product-clean-v5.png') center/contain no-repeat;
  mask:url('../images/suavitel-product-clean-v5.png') center/contain no-repeat;
  animation-delay:2.6s;
}
#loginScreen .product-magic{
  z-index:2;
  right:4%;
  top:25%;
  width:33%;
  animation:magicDepth 6.8s ease-in-out infinite;
}
#loginScreen .product-magic .product-glint{
  -webkit-mask:url('../images/suavitel-momentos-3d.png') center/contain no-repeat;
  mask:url('../images/suavitel-momentos-3d.png') center/contain no-repeat;
  animation-delay:4.1s;
}
#loginScreen .product-yellow{
  z-index:1;
  left:30%;
  top:6%;
  width:22%;
  animation:yellowDepth 7.1s ease-in-out infinite;
}
#loginScreen .product-yellow .product-glint{
  -webkit-mask:url('../images/suavitel-amarillo-clean.png') center/contain no-repeat;
  mask:url('../images/suavitel-amarillo-clean.png') center/contain no-repeat;
  animation-delay:3.2s;
}
#loginScreen .product-pink{
  z-index:4;
  left:22%;
  top:18%;
  width:18%;
  animation:pinkDepth 6.6s ease-in-out infinite;
}
#loginScreen .product-pink .product-glint{
  -webkit-mask:url('../images/suavitel-rosa-clean.png') center/contain no-repeat;
  mask:url('../images/suavitel-rosa-clean.png') center/contain no-repeat;
  animation-delay:1.9s;
}
#loginScreen .product-green{
  z-index:5;
  right:18%;
  top:38%;
  width:22%;
  animation:greenDepth 6.9s ease-in-out infinite;
}
#loginScreen .product-green .product-glint{
  -webkit-mask:url('../images/suavitel-manzana-clean2.png') center/contain no-repeat;
  mask:url('../images/suavitel-manzana-clean2.png') center/contain no-repeat;
  animation-delay:5s;
}
#loginScreen .orbit-one{width:105%;height:46%;margin:-23% 0 0 -52.5%}
#loginScreen .orbit-two{width:82%;height:64%;margin:-32% 0 0 -41%}
#loginScreen .bubble-one{left:3%;top:18%}
#loginScreen .bubble-two{right:5%;top:9%}
#loginScreen .bubble-three{right:4%;bottom:19%}
#loginScreen .product-stage.tilt-left .product-model{transform:rotateY(-12deg) translateX(-8px)}
#loginScreen .product-stage.tilt-right .product-model{transform:rotateY(12deg) translateX(8px)}
#loginScreen .product-stage.tilt-up .product-y{transform:rotateX(7deg) translateY(-7px)}
#loginScreen .product-stage.tilt-down .product-y{transform:rotateX(-7deg) translateY(7px)}

@keyframes jugDepth{
  0%,100%{transform:translate3d(0,6px,12px) rotateY(11deg) rotateZ(-1.2deg)}
  50%{transform:translate3d(-5px,-8px,25px) rotateY(7deg) rotateZ(-.3deg)}
}
@keyframes originalDepth{
  0%,100%{transform:translate3d(0,-2px,140px) rotateY(-1deg)}
  50%{transform:translate3d(0,-14px,165px) rotateY(2deg) scale(1.015)}
}
@keyframes magicDepth{
  0%,100%{transform:translate3d(0,8px,32px) rotateY(-10deg) rotateZ(1deg)}
  50%{transform:translate3d(6px,-7px,55px) rotateY(-7deg) rotateZ(.3deg)}
}
@keyframes yellowDepth{
  0%,100%{transform:translate3d(0,7px,18px) rotateY(4deg) rotateZ(-.4deg)}
  50%{transform:translate3d(-3px,-7px,34px) rotateY(1deg) rotateZ(.4deg)}
}
@keyframes pinkDepth{
  0%,100%{transform:translate3d(0,5px,88px) rotateY(8deg) rotateZ(-.7deg)}
  50%{transform:translate3d(-4px,-10px,108px) rotateY(4deg) rotateZ(.2deg)}
}
@keyframes greenDepth{
  0%,100%{transform:translate3d(0,7px,104px) rotateY(-7deg) rotateZ(.8deg)}
  50%{transform:translate3d(4px,-9px,125px) rotateY(-3deg) rotateZ(-.2deg)}
}
@keyframes ensembleGlint{
  0%,24%{transform:translateX(-115%);opacity:0}
  38%{opacity:.78}
  53%{transform:translateX(115%);opacity:0}
  100%{transform:translateX(115%);opacity:0}
}
@keyframes ensemblePlatform{
  0%,100%{opacity:.68;transform:translateZ(-120px) rotateX(72deg) scale(.96)}
  50%{opacity:1;transform:translateZ(-105px) rotateX(72deg) scale(1.03)}
}

@media (max-width:1450px) and (min-width:1181px){
  #loginScreen .login-copy,
  #loginScreen .login-bottom{display:none}
  #loginScreen .product-stage{left:31vw;width:clamp(470px,38vw,560px);height:min(66vh,580px)}
}
@media (max-width:1180px) and (min-width:901px){
  #loginScreen .login-copy,
  #loginScreen .login-bottom{display:none}
  #loginScreen .product-stage{left:27vw;width:clamp(400px,42vw,450px);height:min(64vh,550px);opacity:1}
}
@media (max-width:900px) and (min-width:681px){
  #loginScreen .product-stage{left:23vw;width:clamp(350px,46vw,410px);height:min(60vh,510px);opacity:.66}
}
@media (max-width:680px){
  #loginScreen .login-card{transform:none}
  #loginScreen .login-card:hover,
  #loginScreen .login-card:focus-within{transform:none}
  #loginScreen .product-stage{left:73%;top:50%;width:clamp(310px,78vw,370px);height:min(61vh,490px);opacity:.16}
}
@media (prefers-reduced-motion:reduce){
  #loginScreen .product-unit,
  #loginScreen .product-glint,
  #loginScreen .product-ensemble::before{animation:none!important}
  #loginScreen .product-jug{transform:translate3d(0,0,12px) rotateY(8deg)}
  #loginScreen .product-yellow{transform:translate3d(0,0,18px) rotateY(3deg)}
  #loginScreen .product-magic{transform:translate3d(0,0,32px) rotateY(-7deg)}
  #loginScreen .product-pink{transform:translate3d(0,0,88px) rotateY(5deg)}
  #loginScreen .product-original{transform:translate3d(0,0,140px)}
  #loginScreen .product-green{transform:translate3d(0,0,104px) rotateY(-4deg)}
}

/* Portada final: cinco recortes reales en un carrusel tridimensional. */
#loginScreen .product-stage{
  left:clamp(650px,44vw,820px);
  width:clamp(600px,40vw,770px);
  height:min(68vh,650px);
  max-height:calc(100dvh - 104px);
  --login-tilt-x:0deg;
  --login-tilt-y:0deg;
  pointer-events:auto;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
}
#loginScreen .product-stage.dragging{cursor:grabbing}
#loginScreen .product-model{
  transform:rotateX(var(--login-tilt-x)) rotateY(var(--login-tilt-y));
  transition:transform .24s cubic-bezier(.2,.75,.2,1);
}
#loginScreen .product-stage.tilt-left .product-model,
#loginScreen .product-stage.tilt-right .product-model{transform:rotateX(var(--login-tilt-x)) rotateY(var(--login-tilt-y))}
#loginScreen .product-stage.tilt-up .product-y,
#loginScreen .product-stage.tilt-down .product-y{transform:none}
#loginScreen .product-ensemble{
  display:block;
  animation:none;
}
#loginScreen .bottle-carousel{
  position:absolute;
  inset:-1% -2% 2%;
  transform-style:preserve-3d;
  perspective:1800px;
  perspective-origin:50% 46%;
}
#loginScreen .bottle-3d{
  --bottle-mask:none;
  --asset-trim:5%;
  --bottle-scale:1;
  position:absolute;
  left:50%;
  top:49%;
  width:clamp(126px,21%,184px);
  height:91%;
  transform-origin:50% 55%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,filter,opacity;
  transition:filter .18s linear,opacity .18s linear;
}
#loginScreen .bottle-3d:nth-child(1){--bottle-mask:url('../images/code-bottle-vr47.png?v=20260819-sidebar-purple-final-2');--asset-trim:11.5%;--bottle-scale:1.15}
#loginScreen .bottle-3d:nth-child(2){--bottle-mask:url('../images/code-bottle-jg15.png?v=20260819-sidebar-purple-final-2');--asset-trim:3.7%}
#loginScreen .bottle-3d:nth-child(3){--bottle-mask:url('../images/code-bottle-bw82.png?v=20260819-sidebar-purple-final-2');--asset-trim:6.2%}
#loginScreen .bottle-3d:nth-child(4){--bottle-mask:url('../images/code-bottle-mh91.png?v=20260819-sidebar-purple-final-2');--asset-trim:7.2%}
#loginScreen .bottle-3d:nth-child(5){--bottle-mask:url('../images/code-bottle-tx26.png?v=20260819-sidebar-purple-final-2');--asset-trim:4.5%}
#loginScreen .bottle-body{
  position:relative;
  width:100%;
  height:100%;
  transform:scale(var(--bottle-scale));
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  animation:bottleLevitate 4.8s ease-in-out infinite;
}
#loginScreen .bottle-3d:nth-child(2) .bottle-body{animation-delay:-1.1s}
#loginScreen .bottle-3d:nth-child(3) .bottle-body{animation-delay:-2.4s}
#loginScreen .bottle-3d:nth-child(4) .bottle-body{animation-delay:-3.2s}
#loginScreen .bottle-3d:nth-child(5) .bottle-body{animation-delay:-4.1s}
#loginScreen .bottle-body::after{
  content:"";
  position:absolute;
  z-index:-4;
  left:-8%;
  right:-8%;
  bottom:-1.5%;
  height:6.5%;
  border-radius:50%;
  background:rgba(0,5,18,.68);
  filter:blur(9px);
  transform:translateZ(-38px) rotateX(70deg);
}
#loginScreen .bottle-3d img,
#loginScreen .bottle-depth,
#loginScreen .bottle-highlight{
  position:absolute;
  display:block;
  height:100%;
  pointer-events:none;
  clip-path:inset(0 0 var(--asset-trim) 0);
}
#loginScreen .bottle-3d img{
  z-index:2;
  top:0;
  bottom:0;
  left:50%;
  right:auto;
  width:auto;
  max-width:none;
  object-fit:unset;
  filter:drop-shadow(0 25px 22px rgba(0,7,20,.42)) saturate(1.12) contrast(1.045);
  transform:translateX(-50%) translateZ(18px);
  backface-visibility:hidden;
}
#loginScreen .bottle-depth{
  z-index:-2;
  inset:0 -125%;
  width:auto;
  background:linear-gradient(90deg,#00101e,#06354b 45%,#00111e);
  opacity:.82;
  filter:blur(2.2px);
  transform:translate3d(12px,8px,-30px) scale(.985);
  -webkit-mask:var(--bottle-mask) center/auto 100% no-repeat;
  mask:var(--bottle-mask) center/auto 100% no-repeat;
}
#loginScreen .bottle-highlight{
  z-index:3;
  inset:0 -125%;
  width:auto;
  opacity:.68;
  background:linear-gradient(108deg,transparent 30%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.72) 49%,rgba(255,255,255,.06) 57%,transparent 69%);
  background-size:230% 100%;
  background-position:150% 0;
  mix-blend-mode:screen;
  transform:translateZ(22px);
  -webkit-mask:var(--bottle-mask) center/auto 100% no-repeat;
  mask:var(--bottle-mask) center/auto 100% no-repeat;
  animation:bottleGlint 6.8s ease-in-out infinite;
}
#loginScreen .bottle-3d:nth-child(2) .bottle-highlight{animation-delay:-1.4s}
#loginScreen .bottle-3d:nth-child(3) .bottle-highlight{animation-delay:-2.8s}
#loginScreen .bottle-3d:nth-child(4) .bottle-highlight{animation-delay:-4.2s}
#loginScreen .bottle-3d:nth-child(5) .bottle-highlight{animation-delay:-5.6s}
#loginScreen .product-stage::before{left:5%;right:4%;bottom:3%;height:9%}

@keyframes bottleLevitate{
  0%,100%{transform:translate3d(0,2px,0) rotateZ(-.25deg) scale(var(--bottle-scale))}
  50%{transform:translate3d(0,-8px,12px) rotateZ(.35deg) scale(var(--bottle-scale))}
}
@keyframes bottleGlint{
  0%,24%{background-position:155% 0;opacity:0}
  38%{opacity:.72}
  54%{background-position:-55% 0;opacity:0}
  100%{background-position:-55% 0;opacity:0}
}

@media (max-width:1450px) and (min-width:1181px){
  #loginScreen .product-stage{left:31vw;width:clamp(520px,43vw,640px);height:min(63vh,575px)}
  #loginScreen .bottle-3d{width:clamp(112px,21%,150px)}
}
@media (max-width:1180px) and (min-width:901px){
  #loginScreen .product-stage{left:27vw;width:clamp(440px,46vw,530px);height:min(59vh,510px)}
  #loginScreen .bottle-3d{width:clamp(98px,21%,128px)}
}
@media (max-width:900px) and (min-width:681px){
  #loginScreen .product-stage{left:24vw;width:clamp(390px,50vw,460px);height:min(55vh,470px);opacity:.68}
  #loginScreen .bottle-3d{width:clamp(88px,21%,112px)}
}
@media (max-width:680px){
  #loginScreen .product-stage{left:70%;top:50%;width:clamp(360px,94vw,440px);height:min(54vh,450px);opacity:.2;pointer-events:none}
  #loginScreen .bottle-3d{width:clamp(82px,21%,106px)}
}
@media (prefers-reduced-motion:reduce){
  #loginScreen .bottle-body,
  #loginScreen .bottle-highlight{animation:none!important}
  #loginScreen .product-model{transform:none!important;transition:none}
  #loginScreen .bottle-body{transform:scale(var(--bottle-scale))!important}
}