/* Nartea — Portal de acceso (Lunara + esfera oro). Estilos del mockup aprobado auth-portal-nartea.html. */
*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --rx:0deg; --ry:0deg;
  --gold:#C9A55A; --gold-lt:#e6c883; --gold-txt:#d9b877;
  --ink:#efe7d6; --muted:#b3a687; --err:#e88a7d;
}
html{ height:100%; }
body{
  min-height:100vh; overflow:hidden;
  font-family:'Inter',-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);
  background:
    radial-gradient(120% 90% at 62% 8%, #241d12 0%, #17110a 42%, #0b0805 76%, #060402 100%);
  display:grid; place-items:center;
}

/* estrellas / polvo */
.stars{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.3px 1.3px at 14% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 44%, #f0e2c4, transparent),
    radial-gradient(1.4px 1.4px at 44% 14%, #fff, transparent),
    radial-gradient(1px 1px at 68% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 80% 18%, #ecd8a8, transparent),
    radial-gradient(1px 1px at 90% 42%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 57% 10%, #fff, transparent),
    radial-gradient(1px 1px at 36% 64%, #fff, transparent);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.35} to{opacity:.7} }

/* esfera de partículas (reemplaza la luna) */
.orb-wrap{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,880px); aspect-ratio:1; z-index:0; pointer-events:none; }
.orb-wrap::before{ content:""; position:absolute; inset:12%; border-radius:50%;
  background:radial-gradient(circle at 50% 48%, rgba(201,165,90,.22), transparent 60%); filter:blur(10px); }
#orb{ width:100%; height:100%; display:block; }

.scene{ position:relative; z-index:2; perspective:1100px; }

.login{
  width:min(384px,92vw); padding:30px 30px 26px; border-radius:26px;
  background:rgba(26,21,13,.5);
  backdrop-filter:blur(24px) saturate(1.25); -webkit-backdrop-filter:blur(24px) saturate(1.25);
  border:1px solid rgba(230,200,131,.20);
  box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(230,200,131,.16);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .2s ease-out; transform-style:preserve-3d;
}
.brand{ display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:5px; color:var(--gold-txt); margin-bottom:18px; font-weight:600; }
.brand svg{ width:16px; height:16px; }
.login h1{ font-family:'DM Serif Display',Georgia,"Times New Roman",serif; font-size:28px; font-weight:400; letter-spacing:-.3px; color:#f6efe0; }
.login .sub{ color:var(--muted); font-size:13px; margin:6px 0 22px; }

.field{ position:relative; margin-bottom:14px; }
.field input{
  width:100%; padding:20px 42px 8px 14px; font-size:14px; color:#f4ecdb;
  background:rgba(255,255,255,.045); border:1px solid rgba(230,200,131,.18);
  border-radius:13px; outline:none; transition:border-color .2s, background .2s;
}
.field input:focus{ border-color:var(--gold); background:rgba(255,255,255,.07); }
.field label{ position:absolute; left:14px; top:14px; font-size:14px; color:var(--muted); pointer-events:none; transition:.18s ease; }
.field input:focus + label,
.field input:not(:placeholder-shown) + label{ top:7px; font-size:10px; letter-spacing:.3px; color:var(--gold-txt); }
.field .eye{ position:absolute; right:12px; top:15px; width:18px; height:18px; color:var(--muted); cursor:pointer; }

/* honeypot anti-bots (oculto) */
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }

.row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 18px; font-size:13px; }
.row label{ display:flex; align-items:center; gap:8px; color:#d6cbb0; cursor:pointer; }
.row input{ accent-color:var(--gold); width:15px; height:15px; }
.row a{ color:var(--gold-txt); text-decoration:none; }
.row a:hover{ text-decoration:underline; }

.btn{
  position:relative; width:100%; border:none; cursor:pointer; overflow:hidden;
  padding:14px; border-radius:13px; font-size:15px; font-weight:700; color:#1c1610;
  background:linear-gradient(120deg,#C9A55A,#e6c883);
  box-shadow:0 12px 30px rgba(201,165,90,.35);
  transition:background .4s, box-shadow .3s; display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn:hover{ box-shadow:0 16px 40px rgba(201,165,90,.5); }
.btn:active{ transform:scale(.99); }
.btn[disabled]{ cursor:default; }
.btn .txt{ transition:opacity .3s; }

.scene3d{ position:absolute; inset:0; pointer-events:none; }
.doorway{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:20px; height:26px; border:2px solid rgba(28,22,16,.7); border-radius:3px; background:rgba(0,0,0,.25); overflow:hidden; }
.doorpanel{ position:absolute; inset:0; background:rgba(28,22,16,.35); transform-origin:left center; transition:transform .45s ease; }
.cat{ position:absolute; left:26%; top:52%; width:26px; height:20px; transform:translate(-50%,-50%); opacity:0; }
.cat svg{ width:100%; height:100%; display:block; }
.cat-idle{ position:absolute; right:42px; top:50%; transform:translateY(-50%); width:24px; height:18px; opacity:.95; transition:opacity .2s; }
.cat-idle svg{ width:100%; height:100%; display:block; }
.cat-idle .tail{ transform-origin:6px 13px; animation:tailidle 2.4s ease-in-out infinite; }
@keyframes tailidle{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-12deg); } }
.btn.loading .cat-idle,.btn.success .cat-idle{ opacity:0; }

.btn.loading .txt{ opacity:0; }
.btn.loading .doorpanel{ transform:perspective(30px) rotateY(-82deg); }
.btn.loading .cat{ animation:catwalk 1.5s ease-in forwards; }
.btn.loading .cat svg{ animation:catbob .28s steps(2) infinite; }
.btn.loading .cat .leg{ animation:legstep .28s linear infinite; transform-origin:top center; }
.btn.loading .cat .l2,.btn.loading .cat .l4{ animation-delay:.14s; }
.btn.loading .cat .tail{ animation:tailwag .5s ease-in-out infinite; transform-origin:6px 13px; }
@keyframes catwalk{ 0%{ left:24%; opacity:0; } 12%{ opacity:1; } 82%{ left:calc(100% - 42px); opacity:1; } 100%{ left:calc(100% - 26px); opacity:0; } }
@keyframes catbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes legstep{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(22deg); } }
@keyframes tailwag{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-18deg); } }
.btn.success{ background:linear-gradient(120deg,#12b981,#0fa06f); color:#fff; box-shadow:0 12px 30px rgba(15,160,111,.5); }
.btn.success .scene3d{ display:none; }

.hint{ text-align:center; font-size:12px; color:var(--gold-txt); min-height:16px; margin-top:10px; line-height:1.4; }
.hint.err{ color:var(--err); }

.or{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:16px 0; }
.or::before,.or::after{ content:""; flex:1; height:1px; background:rgba(230,200,131,.16); }

.social{ display:flex; gap:12px; }
.social button{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:12px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(230,200,131,.16); transition:background .2s; position:relative; }
.social button:hover{ background:rgba(255,255,255,.1); }
.social button[data-soon]::after{ content:"Próximamente"; position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  font-size:9px; letter-spacing:.5px; color:var(--muted); opacity:0; transition:opacity .2s; white-space:nowrap; }
.social button[data-soon]:hover::after{ opacity:1; }
.social svg{ width:17px; height:17px; }

.foot{ text-align:center; font-size:13px; color:var(--muted); margin-top:18px; }
.foot a{ color:var(--gold-txt); text-decoration:none; font-weight:600; }
.foot a:hover{ text-decoration:underline; }
.backlink{ position:fixed; left:20px; top:18px; z-index:5; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:7px; transition:color .2s; }
.backlink:hover{ color:var(--gold-txt); }
.backlink svg{ width:14px; height:14px; }

.login[data-mode="signin"] .only-signup{ display:none; }
.login[data-mode="signup"] .only-signin{ display:none; }
.foot-signup{ display:none; }
.login[data-mode="signup"] .foot-signin{ display:none; }
.login[data-mode="signup"] .foot-signup{ display:block; }
.login.swap{ animation:fadeSwap .32s ease; }
@keyframes fadeSwap{ from{ opacity:.25; } to{ opacity:1; } }
@media(prefers-reduced-motion:reduce){ .stars,.cat-idle .tail{ animation:none; } }

/* ===================================================================
   Pantalla de verificación de correo (OTP 6, órbita hex, paleta oro)
   Se muestra tras el registro: .scene.verify oculta .login y muestra .otp
   =================================================================== */
.scene .otp{ display:none; }
.scene.verify .login{ display:none; }
.scene.verify .otp{ display:block; }
.otp{
  width:min(384px,92vw); padding:30px 24px 22px; border-radius:26px;
  background:rgba(26,21,13,.5);
  backdrop-filter:blur(24px) saturate(1.25); -webkit-backdrop-filter:blur(24px) saturate(1.25);
  border:1px solid rgba(230,200,131,.20);
  box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(230,200,131,.16);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .2s ease-out; transform-style:preserve-3d;
  animation:fadeSwap .32s ease;
}
.otp h1{ font-family:'DM Serif Display',Georgia,"Times New Roman",serif; font-size:26px; font-weight:400; letter-spacing:-.3px; color:#f6efe0; }
.otp .sub{ color:var(--muted); font-size:13px; margin:6px 0 4px; line-height:1.45; }
.otp .sub b{ color:var(--gold-txt); font-weight:600; }

.otp-stage{ position:relative; height:196px; display:grid; place-items:center; margin:6px 0 2px; }
.otp-orbit{ position:relative; height:120px; display:flex; gap:clamp(6px,1.8vw,9px); align-items:center; justify-content:center; transform-origin:50% 50%; }
.otp-orbit.orbiting{ width:172px; height:172px; }
.otp-hub{ position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:var(--gold); opacity:0; transition:opacity .3s; }
.otp-ring{ position:absolute; left:50%; top:50%; width:172px; height:172px; margin:-86px; border-radius:50%; border:1px solid rgba(230,200,131,.24); opacity:0; transition:opacity .35s; pointer-events:none; }
.otp-orbit.ring-on .otp-ring{ opacity:1; }
.otp-orbit.ring-on .otp-hub{ opacity:1; }

.otp-slot{
  width:clamp(38px,10vw,44px); height:clamp(48px,13vw,54px); border-radius:13px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(230,200,131,.20);
  display:grid; place-items:center; font-size:clamp(20px,5.5vw,25px); font-weight:700; color:#f4ecdb;
  transition:border-color .28s, box-shadow .28s; position:relative;
}
.otp-slot > *{ grid-area:1/1; }
.otp-orbit.morph .otp-slot{ transition:transform .42s cubic-bezier(.5,.05,.2,1), border-color .28s, box-shadow .28s; }
.otp-orbit.spinning .otp-slot{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(201,165,90,.55), 0 0 14px rgba(201,165,90,.32); }
.otp-slot.active{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,165,90,.20); }
.otp-slot .dig{ line-height:1; }
.otp-slot .car{ width:2px; height:24px; background:var(--gold); border-radius:2px; opacity:0; }
.otp-slot.active.empty .car{ animation:otpblink 1s step-end infinite; }
@keyframes otpblink{ 0%{opacity:1} 50%{opacity:0} 100%{opacity:1} }
.otp-slot .beam{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; opacity:0; pointer-events:none; }
.otp-slot .beam rect{ fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:20 80; stroke-dashoffset:100;
  filter:drop-shadow(0 0 5px var(--gold)) drop-shadow(0 0 2px var(--gold)); }
.otp-slot.just .beam{ animation:otpbeamfade .6s ease-out; }
.otp-slot.just .beam rect{ animation:otpbeamrun .6s cubic-bezier(.35,0,.2,1); }
@keyframes otpbeamfade{ 0%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
@keyframes otpbeamrun{ from{stroke-dashoffset:100} to{stroke-dashoffset:0} }
.otp-slot.just .dig{ animation:otppop .24s cubic-bezier(.2,1.5,.3,1); }
@keyframes otppop{ 0%{transform:scale(.5);opacity:0} 55%{opacity:1} 100%{transform:scale(1)} }

.otp-orbit.ok .otp-slot{ border-color:#12b981; box-shadow:0 0 0 3px rgba(18,185,129,.22); color:#eafff6; }
.otp-orbit.bad .otp-slot{ border-color:var(--err); box-shadow:0 0 0 3px rgba(232,138,125,.22); }
.otp-orbit.bad{ animation:otpshake .4s; }
@keyframes otpshake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }

.otp-hint{ text-align:center; font-size:12px; color:var(--gold-txt); min-height:16px; margin-top:2px; line-height:1.4; }
.otp-hint.err{ color:var(--err); }
.otp-resend{ text-align:center; font-size:12px; color:var(--muted); margin-top:8px; min-height:16px; }
.otp-resend a{ color:var(--gold-txt); text-decoration:none; cursor:pointer; }
.otp-resend a:hover{ text-decoration:underline; }
.otp-back{ text-align:center; font-size:13px; color:var(--muted); margin-top:14px; }
.otp-back a{ color:var(--gold-txt); text-decoration:none; cursor:pointer; font-weight:600; }
.otp-back a:hover{ text-decoration:underline; }
.otp-input{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
@media(prefers-reduced-motion:reduce){ .otp{ animation:none; } }