/* NWL 360 — escenario "Outback dawn" de las páginas de acceso (login, enlace mágico, contraseña
   inicial). Una sola copia: el marcado decorativo lo inyecta /auth-stage.js. */
:root{--navy:#0B224E;--night:#071638;--gold:#CB8606;--gold-hi:#E3990F;--gold-lo:#B0750A;--paper:#F4EEE2;--muted:rgba(244,238,226,.62);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden;color:var(--paper);font-family:Gabarito,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 45% at 50% 104%,rgba(203,134,6,.36),rgba(203,134,6,0) 58%),linear-gradient(180deg,#04081A 0%,#071638 55%,#0A1F49 100%);background-color:#04081A;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px 120px}
.mono{font-family:"Spline Sans Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.22em}
.sky{position:fixed;inset:0;pointer-events:none}
.sky i{position:absolute;border-radius:50%;background:var(--paper);opacity:.18;animation:tw 5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.12}50%{opacity:.55}}
.cross{position:fixed;top:28px;right:32px;width:84px;opacity:.55;pointer-events:none;overflow:visible}
.cross path{fill:var(--gold);transform-box:fill-box;transform-origin:center;opacity:0;animation:pop .7s var(--ease) forwards,glint 6s ease-in-out infinite}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes glint{0%,100%{filter:none}50%{filter:drop-shadow(0 0 4px rgba(227,153,15,.9))}}
.horizon{position:fixed;left:0;right:0;bottom:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(227,153,15,.75) 20%,rgba(227,153,15,.75) 80%,transparent);box-shadow:0 0 24px 2px rgba(227,153,15,.35);transform:scaleX(0);animation:draw 1.6s var(--ease) .2s forwards;pointer-events:none}
@keyframes draw{to{transform:scaleX(1)}}
.roo{position:fixed;bottom:64px;left:0;width:46px;pointer-events:none;transform:translateX(-80px);animation:run 3.4s cubic-bezier(.45,.05,.4,1) .9s forwards}
.roo img{display:block;width:100%;transform-origin:50% 100%;animation:hop .68s cubic-bezier(.3,0,.4,1) .9s 5}
@keyframes run{to{transform:translateX(calc(100vw - 130px))}}
@keyframes hop{0%,100%{transform:translateY(0) scaleY(.94)}12%{transform:translateY(-2px) scaleY(1.04)}50%{transform:translateY(-22px) rotate(-6deg)}88%{transform:translateY(0) scaleY(1)}}
.coords{position:fixed;left:0;right:0;bottom:22px;text-align:center;font-size:10px;color:rgba(244,238,226,.42);pointer-events:none}
.stage{position:relative;width:100%;max-width:420px;text-align:center}
.rise{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.logo{height:34px;width:auto;opacity:.92}
.emblem{position:relative;width:min(240px,62vw);aspect-ratio:1;margin:26px auto 22px}
.dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tk{stroke:rgba(244,238,226,.22);stroke-width:1.2;stroke-linecap:round}
.tk.m{stroke:rgba(244,238,226,.5)}
.tk.n{stroke:var(--gold);stroke-width:2}
.ticks{transform-origin:120px 120px;animation:spinin 1.8s var(--ease) .15s both}
@keyframes spinin{from{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:none}}
.track{fill:none;stroke:rgba(244,238,226,.08);stroke-width:2}
.arc{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:360;stroke-dashoffset:360;transform:rotate(-90deg);transform-origin:120px 120px;animation:arc 1.9s var(--ease) .35s forwards;filter:drop-shadow(0 0 6px rgba(227,153,15,.55))}
@keyframes arc{to{stroke-dashoffset:0}}
.orbit{transform-origin:120px 120px;opacity:0;animation:fade .4s ease 2.1s forwards,orbit 18s linear 2.1s infinite}
.dot{fill:var(--gold-hi);filter:drop-shadow(0 0 6px rgba(227,153,15,.9))}
@keyframes fade{to{opacity:1}}
@keyframes orbit{to{transform:rotate(360deg)}}
.num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.num small{font-size:10px;color:var(--muted);margin-bottom:2px}
.num b{font-weight:500;font-size:clamp(56px,17vw,78px);line-height:.9;letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums}
.num b sup{font-size:.36em;color:var(--gold);vertical-align:top;position:relative;top:.12em;margin-left:2px;letter-spacing:0}
h1{font-weight:500;font-size:clamp(26px,6.4vw,34px);line-height:1.08;letter-spacing:-.02em;margin:0 auto 10px;max-width:18ch;text-wrap:balance}
h1 em{font-style:italic;color:var(--gold-hi);white-space:nowrap}
.lede{font-size:16px;line-height:1.55;color:var(--muted);margin:0 auto 28px;max-width:34ch;text-wrap:pretty}
.lede strong{color:var(--paper);font-weight:600}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:340px;padding:16px 24px;border:0;border-radius:999px;background:var(--gold);color:#1C0F00;font:700 16px/1 Gabarito,system-ui,sans-serif;cursor:pointer;overflow:hidden;
  box-shadow:0 0 0 1px rgba(227,153,15,.45),0 14px 34px -10px rgba(203,134,6,.75);transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,244,214,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 1.2s var(--ease) 2.4s}
@keyframes sheen{to{transform:translateX(120%)}}
.btn:hover{background:var(--gold-hi);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(227,153,15,.6),0 20px 40px -10px rgba(227,153,15,.8)}
.btn:active{background:var(--gold-lo);transform:none}
.btn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn[disabled]{cursor:default;transform:none;opacity:.85}
.spin{display:none;width:18px;height:18px;border:2px solid rgba(28,15,0,.25);border-top-color:#1C0F00;border-radius:50%;animation:orbit .8s linear infinite}
.btn.busy .spin{display:inline-block}.btn.busy svg{display:none}
.fine{margin:18px 0 0;font-size:10px;color:rgba(244,238,226,.45)}
.fine svg{width:11px;height:11px;vertical-align:-1px;margin-right:6px}
body.go .orbit{animation-duration:.4s,1.1s}
.card{background:var(--paper);color:var(--navy);border-radius:16px;padding:28px 24px;text-align:left;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 10px 24px -12px rgba(11,34,78,.4)}
.card label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.card input{width:100%;padding:12px 14px;border:1px solid rgba(11,34,78,.18);border-radius:10px;background:#fff;color:var(--navy);font:16px Gabarito,system-ui,sans-serif;margin:0 0 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.card input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(203,134,6,.25)}
.card .err{font-size:13px;color:#8A1C1C;margin:0 0 12px;min-height:18px}
.card .btn{max-width:none}
.card .hint{font-size:10px;color:#6E7689;margin:14px 0 0;text-align:center}
.emblem.sm{width:min(150px,40vw);margin:20px auto 18px}
.emblem.sm .num b{font-size:46px}
@media (max-width:480px){.cross{width:60px;top:20px;right:18px}}
@media (max-height:700px){.emblem{width:min(190px,50vw);margin:16px auto 14px}.emblem .num b{font-size:58px}body{padding-bottom:104px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.cross path,.orbit,.ticks{opacity:1;transform:none}.arc{stroke-dashoffset:0}.horizon{transform:none}.roo{transform:translateX(calc(100vw - 130px))}}
.card .eyebrow{font-size:10px;color:#6E7689;margin:0 0 16px;text-align:center}
.card .alert{background:#F6E3E1;color:#8A1C1C;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45;margin:0 0 14px}
.card .alert[hidden]{display:none}
.card .note{font-size:13px;line-height:1.55;color:#6E7689;margin:18px 0 0;text-align:center}
.card .note strong{color:var(--navy)}