.login-page { min-height: 100vh; overflow: hidden; background: #12110f; }
.login-screen { position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 28px; isolation: isolate; background: radial-gradient(circle at 10% 15%,color-mix(in srgb,var(--special) 5.5%,transparent),transparent 30%),radial-gradient(circle at 88% 82%,color-mix(in srgb,var(--primary) 6.5%,transparent),transparent 30%),linear-gradient(145deg,color-mix(in srgb,#0b0d11 88%,var(--special)) 0%,#12110f 49%,color-mix(in srgb,#0b0d11 88%,var(--primary)) 100%); }
.login-screen::before,.login-screen::after { content: none; }
.login-glow { position: absolute; z-index: 0; width: 360px; height: 360px; border: 0; border-radius: 50%; filter: blur(20px); opacity: .08; pointer-events: none; }
.login-glow-one { bottom: -120px; left: -100px; background: var(--special); }
.login-glow-two { top: -110px; right: -90px; background: var(--primary); }
.login-card { position: relative; z-index: 1; width: min(100%,430px); padding: 38px 40px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--primary) 34%,transparent); border-radius: 11px; background: rgba(18,17,15,.94); box-shadow: 0 30px 90px rgba(18,17,15,.65), inset 0 1px rgba(255,255,255,.04); transition: width .6s ease, height .6s ease, border-color .5s ease, background .5s ease, box-shadow .5s ease; }
.login-brand { display: grid; justify-items: center; gap: 3px; margin-bottom: 10px; text-align: center; }
.login-logo-wrap { position: relative; display: grid; width: 106px; height: 106px; place-items: center; }
.login-logo-wrap img { position: relative; z-index: 2; width: 88px; height: 88px; filter: drop-shadow(0 0 18px color-mix(in srgb,var(--primary) 18%,transparent)); }
.login-logo-wrap > span { position: absolute; width: 82px; height: 82px; border: 1px solid color-mix(in srgb,var(--primary) 45%,transparent); border-radius: 50%; opacity: 0; animation: loginWave 4.5s ease-out infinite; }
.login-logo-wrap > span:nth-child(2) { animation-delay: .6s; }.login-logo-wrap > span:nth-child(3){animation-delay:1.2s}
.login-wordmark strong{display:block;font:400 38px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.04em}.login-wordmark strong span{color:var(--gold)}
.login-copy h1 { margin: 0 0 28px; color: var(--muted); font: 400 14px/1.4 "Poppins",sans-serif; letter-spacing:.025em; text-align:center; }
.login-form{display:grid;gap:17px}.login-field-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.login-form input{width:100%;height:52px;padding:0 15px;border:1px solid var(--line);border-radius:11px;outline:0;background:#12110f;color:var(--text);font:400 12px/1 "Poppins",sans-serif}.login-form input:focus{border-color:color-mix(in srgb,var(--primary) 75%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 8%,transparent)}
.login-password{position:relative;display:block}.login-password button{position:absolute;top:50%;right:11px;display:grid;width:34px;height:34px;place-items:center;transform:translateY(-50%);border:1px solid color-mix(in srgb,var(--primary) 32%,var(--line));border-radius:50%;background:color-mix(in srgb,var(--primary) 10%,#fff);color:var(--primary);cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}.login-password button:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--line));background:color-mix(in srgb,var(--primary) 15%,#fff)}.login-password button:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 44%,transparent);outline-offset:2px}.login-password button:active{transform:translateY(-50%) scale(.94)}.login-password input{padding-right:58px}.login-eye{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.login-eye-closed{display:none}.login-password button[aria-pressed="true"] .login-eye-open{display:none}.login-password button[aria-pressed="true"] .login-eye-closed{display:block}
.login-submit{width:100%;min-height:56px;justify-self:stretch;margin-top:4px;appearance:none;cursor:pointer;font-family:"Poppins",sans-serif}
.login-forgot{justify-self:end;margin-top:-7px;color:var(--primary);font-size:12px;font-weight:600}.login-forgot:hover{text-decoration:underline}.login-help{margin:-14px 0 5px;color:#8b857d;font-size:12px;line-height:1.55;text-align:center}.login-success{margin:0;padding:12px 14px;border:1px solid rgba(49,151,91,.28);border-radius:9px;background:rgba(49,151,91,.08);color:#357b52;font-size:12px;line-height:1.5}.login-success[hidden]{display:none}
.login-resend{justify-self:center;padding:0;border:0;background:transparent;color:var(--primary);cursor:pointer;font:600 12px/1.4 "Poppins",sans-serif;letter-spacing:.06em}.login-resend:hover{text-decoration:underline}.login-resend[hidden]{display:none}
.login-error{margin:0;padding:10px 12px;border:1px solid rgba(215,84,64,.35);border-radius:9px;background:rgba(215,84,64,.08);color:#e09b90;font-size:12px;font-weight:400;line-height:1.5}.login-back{display:block;margin-top:23px;color:#77757a;font-size:13px;font-weight:400;text-align:center}.welcome-copy{position:fixed;inset:0;z-index:10;display:flex;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;padding:24px;opacity:0;visibility:hidden;text-align:center;pointer-events:none}.welcome-logo-wrap{position:relative;display:grid;width:230px;height:230px;place-items:center;margin-bottom:38px}.welcome-logo-wrap img{position:relative;z-index:2;width:220px;height:220px;filter:drop-shadow(0 0 38px color-mix(in srgb,var(--primary) 25%,transparent))}.welcome-logo-wrap>span{position:absolute;width:216px;height:216px;border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);border-radius:50%;opacity:0}.welcome-logo-wrap>span:nth-child(2){animation-delay:.6s}.welcome-logo-wrap>span:nth-child(3){animation-delay:1.2s}.welcome-copy>span,.welcome-copy>strong{display:block}.welcome-copy>span{color:var(--gold);font-size:24px;font-weight:400;letter-spacing:.28em}.welcome-copy>strong{width:100%;max-width:1100px;margin:12px 0 0;color:#fff;font:400 132px/.88 "Bebas Neue",Impact,sans-serif;letter-spacing:.03em;overflow-wrap:anywhere}.welcome-reward{margin-top:18px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--primary) 48%,transparent);border-radius:99px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.08em}.welcome-reward[hidden]{display:none}
.login-screen.is-welcoming .login-card{width:min(92vw,820px);min-height:440px;border-color:transparent;background:transparent;box-shadow:none}.login-screen.is-welcoming .login-brand,.login-screen.is-welcoming .login-copy,.login-screen.is-welcoming .login-form,.login-screen.is-welcoming .login-back{animation:loginControlsOut .32s ease forwards}.login-screen.is-welcoming .welcome-logo-wrap{animation:welcomeLogo 1.8s cubic-bezier(.22,.85,.25,1) forwards}.login-screen.is-welcoming .welcome-logo-wrap>span{animation:welcomeOrbit 1.8s ease-out infinite}.login-screen.is-welcoming .welcome-copy{visibility:visible;animation:welcomeCopy .8s .35s ease forwards}.login-screen.is-leaving{animation:loginLeave .7s ease forwards}
@keyframes loginWave{0%{transform:scale(.75);opacity:0}8%{opacity:.7}45%,100%{transform:scale(1.9);opacity:0}}@keyframes loginControlsOut{to{opacity:0;transform:translateY(10px);visibility:hidden}}@keyframes welcomeLogo{0%{transform:scale(.55) rotate(-8deg);opacity:0}60%{transform:scale(1.08) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}@keyframes welcomeOrbit{0%{transform:scale(.65);opacity:.75}100%{transform:scale(2.2);opacity:0}}@keyframes welcomeCopy{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}@keyframes loginLeave{to{opacity:0;transform:scale(1.03)}}
@media(max-width:560px){.login-screen{padding:15px}.login-card{padding:32px 22px}.login-logo-wrap{width:96px;height:96px}.login-logo-wrap img{width:80px;height:80px}.login-logo-wrap>span{width:76px;height:76px}.welcome-logo-wrap{width:210px;height:210px;margin-bottom:32px}.welcome-logo-wrap img{width:200px;height:200px}.welcome-logo-wrap>span{width:196px;height:196px}.welcome-copy>span{font-size:20px}.welcome-copy>strong{margin-top:10px;font-size:72px;line-height:.9}}
@media(prefers-reduced-motion:reduce){.login-logo-wrap>span{animation:none;opacity:.18}.login-screen.is-welcoming *{animation-duration:.01ms!important}}

/* Tarjeta clara: misma identidad visual que el registro del home. */
.login-card {
  color-scheme: light;
  --text: #242320;
  --muted: #77726b;
  --line: #ded9d0;
  border-color: #ded9d0;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), 0 0 45px color-mix(in srgb,var(--primary) 8%,transparent);
  color: #242320;
}

.login-logo-wrap img {
  filter: drop-shadow(0 10px 24px rgba(40, 32, 20, 0.12));
}

.login-logo-wrap > span {
  border-color: color-mix(in srgb,var(--primary) 34%,transparent);
}

.login-wordmark strong {
  color: #242320;
}

.login-copy h1 {
  color: #77726b;
}

.login-form input {
  border-color: #ded9d0;
  background: #faf9f7;
  color: #242320;
}

.login-form input::placeholder {
  color: #99948b;
}

.login-password button {
  color: var(--primary);
}

.login-submit {
  border-color: color-mix(in srgb,var(--primary) 74%,#ffffff);
  background: var(--primary);
  box-shadow: 0 12px 28px color-mix(in srgb,var(--primary) 22%,transparent);
  color: #ffffff;
}

.login-submit:hover,
.login-submit:focus-visible {
  background: color-mix(in srgb,var(--primary) 88%,#11100f);
  box-shadow: 0 14px 30px color-mix(in srgb,var(--primary) 28%,transparent);
}

.login-submit .jn-header__flecha {
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.login-back {
  color: #77726b;
}

.login-error {
  border-color: rgba(181, 75, 57, 0.26);
  background: rgba(181, 75, 57, 0.07);
  color: #a54f42;
}

.login-screen.is-welcoming .login-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.login-register {
  display: grid;
  gap: 9px;
  margin-top: 19px;
  padding-top: 17px;
  border-top: 1px solid #e7e2da;
  text-align: center;
}

.login-register > span {
  color: #77726b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.login-join {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb,var(--primary) 70%,#ffffff);
  border-radius: 11px;
  background: color-mix(in srgb,var(--primary) 5%,#ffffff);
  color: var(--primary);
  font: 700 12px/1 "Poppins",sans-serif;
  letter-spacing: .065em;
  transition: background 180ms ease,color 180ms ease,box-shadow 180ms ease;
}

.login-join:hover,
.login-join:focus-visible {
  background: var(--primary);
  box-shadow: 0 10px 24px color-mix(in srgb,var(--primary) 18%,transparent);
  color: #ffffff;
}

.login-join-arrow {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.login-register + .login-back {
  margin-top: 16px;
}

.login-screen.is-welcoming .login-register {
  animation: loginControlsOut .32s ease forwards;
}

/* Mobile login: same 30px outer frame as the home cards, centered in the viewport. */
@media (max-width: 560px) {
  .login-page {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .login-screen {
    width: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    place-items: center;
    padding: 30px;
    overflow: visible;
  }

  .login-card {
    width: 100%;
    max-width: 430px;
  }
}

/* Login CTAs use the same construction as the home "UNIRME GRATIS" button. */
.login-submit,
.login-join {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  gap: 12px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb,var(--primary) 74%,#ffffff);
  border-radius: var(--radius);
  background: var(--primary);
  box-shadow: 0 12px 28px color-mix(in srgb,var(--primary) 22%,transparent);
  color: #ffffff;
  font-family: "Poppins",sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .065em;
  cursor: pointer;
  transition: border-color 180ms ease,background 180ms ease,box-shadow 180ms ease;
}

.login-submit:hover,
.login-submit:focus-visible,
.login-join:hover,
.login-join:focus-visible {
  border-color: var(--gold-light);
  background: color-mix(in srgb,var(--primary) 88%,#11100f);
  box-shadow: 0 14px 30px color-mix(in srgb,var(--primary) 28%,transparent);
  color: #ffffff;
}

.login-submit .jn-header__flecha,
.login-join .jn-header__flecha {
  display: inline-grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #ffffff;
  line-height: 0;
}

.login-submit .jn-header__flecha svg,
.login-join .jn-header__flecha svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-submit:hover .jn-header__flecha,
.login-submit:focus-visible .jn-header__flecha,
.login-join:hover .jn-header__flecha,
.login-join:focus-visible .jn-header__flecha {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--primary);
  transform: none;
}

/* Secondary variant: identical geometry, outlined to distinguish registration. */
.login-join {
  border-color: color-mix(in srgb,var(--primary) 70%,#ffffff);
  background: color-mix(in srgb,var(--primary) 5%,#ffffff);
  box-shadow: none;
  color: var(--primary);
}

.login-join .jn-header__flecha {
  border-color: currentColor;
  color: var(--primary);
}

.login-join:hover,
.login-join:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb,var(--primary) 10%,#ffffff);
  box-shadow: 0 10px 24px color-mix(in srgb,var(--primary) 18%,transparent);
  color: var(--primary);
}

.login-join:hover .jn-header__flecha,
.login-join:focus-visible .jn-header__flecha {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

/* Bring the welcome line slightly closer to the MIXINGNOISE wordmark. */
.login-brand {
  margin-bottom: 4px;
}

/* Exact vertical rhythm for the email-confirmation status card. */
.login-card:has(.login-confirmation-message) .login-copy h1 {
  margin-bottom: 20px;
}

.login-confirmation-message + .login-submit {
  margin-top: 20px;
}