/* ============================================================
   PLENIT NODE · Sistema de diseño compartido (HUD premium)
   Usado por todas las páginas: registro, calculadora, referidos…
   ============================================================ */

/* Fuente de marca: Unbounded (se carga desde Google Fonts en cada página) */

:root{
    --navy-0:#04070f;
    --navy-1:#070c18;
    --navy-2:#0b1224;
    --panel:#0a1120;
    --gold:#d4a64a;
    --gold-soft:#f4d488;
    --gold-deep:#a9781f;
    --blue:#1b9df0;
    --blue-soft:#5bc8ff;
    --blue-deep:#0a4b86;
    --text:#e8eefc;
    --muted:#92a0c0;
    --ok:#37d67a;
    --danger:#ff6b6b;
    --line:rgba(120,160,220,.14);
    --cut:16px; /* esquina recortada HUD */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;padding:0;
    font-family:'Unbounded','Inter',system-ui,Segoe UI,Arial,sans-serif;
    color:var(--text);
    background:var(--navy-0);
    min-height:100vh;overflow-x:hidden;position:relative;
    -webkit-font-smoothing:antialiased;
}

/* ---------- Fondo: circuito + constelación ---------- */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-base{
    position:absolute;inset:0;
    background:
        radial-gradient(1100px 700px at 50% -8%, #16243f 0%, transparent 60%),
        radial-gradient(900px 600px at 12% 8%, rgba(27,157,240,.12) 0%, transparent 55%),
        radial-gradient(900px 600px at 88% 12%, rgba(212,166,74,.10) 0%, transparent 55%),
        linear-gradient(180deg,var(--navy-1),var(--navy-0));
}
.fx-grid{
    position:absolute;inset:0;opacity:.45;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),
                     linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 50% 16%, #000 0%, transparent 72%);
    -webkit-mask-image:radial-gradient(circle at 50% 16%, #000 0%, transparent 72%);
}
.fx canvas{position:absolute;inset:0;width:100%;height:100%}
.fx-glow{position:absolute;border-radius:50%;filter:blur(130px)}
.fx-glow.g1{width:520px;height:520px;background:#1b6df0;top:-140px;left:-160px;opacity:.4;animation:floatA 16s ease-in-out infinite}
.fx-glow.g2{width:460px;height:460px;background:var(--gold);bottom:-180px;right:-140px;opacity:.22;animation:floatB 18s ease-in-out infinite}
@keyframes floatA{50%{transform:translate(70px,50px)}}
@keyframes floatB{50%{transform:translate(-60px,-40px)}}

.page{position:relative;z-index:1}

/* ---------- Tipografía ---------- */
.display{font-family:'Unbounded','Cinzel',serif;font-weight:700;letter-spacing:.06em}
.section-title{
    font-family:'Unbounded','Cinzel',serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    font-size:clamp(1.3rem,3.2vw,1.9rem);text-align:center;margin:0 0 6px;
    background:linear-gradient(95deg,var(--gold-soft),var(--gold) 45%,var(--blue-soft));
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-sub{text-align:center;color:var(--muted);margin:0 auto 30px;max-width:560px;font-size:.95rem}

/* ---------- Header / Nav ---------- */
.nav-bar{
    position:sticky;top:0;z-index:30;
    display:flex;align-items:center;justify-content:space-between;
    padding:12px clamp(20px,5vw,48px);
    background:linear-gradient(180deg,rgba(7,12,24,.92),rgba(7,12,24,.55));
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-brand img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(212,166,74,.4))}
.nav-brand span{font-family:'Unbounded','Cinzel',serif;font-weight:700;letter-spacing:.18em;color:#fff;font-size:1rem}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
    color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:600;letter-spacing:.04em;
    padding:8px 14px;border-radius:10px;transition:.2s;
}
.nav-links a:hover{color:#fff;background:rgba(120,160,220,.08)}
.nav-links a.active{color:var(--gold-soft)}
.nav-links a.soon{opacity:.5;pointer-events:none}
.nav-links a.soon::after{content:" ·";color:var(--gold)}
@media(max-width:640px){.nav-brand span{display:none}.nav-links a{padding:7px 9px;font-size:.78rem}}

/* ---------- Marco HUD (esquinas recortadas + borde luminoso) ---------- */
.hud{
    position:relative;border-radius:4px;
    clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.hud-border{
    position:relative;padding:1.5px;
    background:linear-gradient(150deg,rgba(120,170,230,.5),rgba(120,170,230,.06) 38%,rgba(212,166,74,.06) 62%,rgba(212,166,74,.5));
    clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.hud-border > .hud-fill{
    background:linear-gradient(180deg,rgba(13,20,38,.92),rgba(8,13,26,.96));
    clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
/* acentos de esquina */
.hud-border.accent-n3{background:linear-gradient(150deg,var(--blue-soft),rgba(27,157,240,.12) 50%,rgba(27,157,240,.4))}
.hud-border.accent-n6{background:linear-gradient(150deg,var(--gold-soft),rgba(212,166,74,.12) 50%,rgba(212,166,74,.4))}

/* ---------- Iconos hexagonales ---------- */
.hex{
    width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
    background:linear-gradient(160deg,rgba(27,157,240,.25),rgba(7,12,24,.6));
    color:var(--blue-soft);font-size:1rem;
    box-shadow:inset 0 0 0 1px rgba(120,170,230,.3);
}
.hex.gold{background:linear-gradient(160deg,rgba(212,166,74,.28),rgba(7,12,24,.6));color:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(212,166,74,.35)}

/* divisor con diamante */
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--line)}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.divider b{width:7px;height:7px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* ============================================================
   BOTONES (recreados en CSS, look metálico de la marca)
   ============================================================ */
.btn-node{
    --c-hi:#2a3a55;--c-lo:#0d1830;--glow:rgba(27,157,240,.35);--edge:rgba(120,170,230,.7);--ink:#dbe9ff;
    display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;
    padding:15px 26px;border:none;cursor:pointer;position:relative;
    font-family:'Unbounded','Inter',sans-serif;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.95rem;
    color:var(--ink);border-radius:40px;text-decoration:none;
    background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%),
               linear-gradient(180deg,var(--c-hi),var(--c-lo));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 8px rgba(0,0,0,.55),
               0 8px 22px var(--glow);
    transition:transform .18s ease,box-shadow .25s ease,filter .25s ease;
    overflow:hidden;
}
.btn-node::before{ /* anillo metálico */
    content:"";position:absolute;inset:0;border-radius:40px;padding:1.5px;
    background:linear-gradient(180deg,var(--edge),rgba(255,255,255,.05) 45%,rgba(0,0,0,.4));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.btn-node::after{ /* brillo deslizante */
    content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);transition:left .5s ease;
}
.btn-node:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(0,0,0,.55),0 12px 30px var(--glow)}
.btn-node:hover:not(:disabled)::after{left:120%}
.btn-node:active:not(:disabled){transform:translateY(0)}
.btn-node:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.btn-node .chev{margin-left:2px;font-size:1.05em;opacity:.9}
.btn-node .coin{width:26px;height:26px;border-radius:50%;object-fit:cover;margin:-4px 0}

/* variantes */
.btn-node.n3{--c-hi:#1d4f86;--c-lo:#08203c;--glow:rgba(27,157,240,.45);--edge:rgba(91,200,255,.85);--ink:#eaf6ff}
.btn-node.n6{--c-hi:#7c5a18;--c-lo:#2a1c05;--glow:rgba(212,166,74,.45);--edge:rgba(244,212,136,.9);--ink:#fff6e2}
.btn-node.wallet{--c-hi:#143a63;--c-lo:#08182e;--glow:rgba(27,157,240,.4);--edge:rgba(91,200,255,.8);--ink:#eaf6ff}
.btn-node.wallet .chev{color:var(--gold-soft)}
.btn-node.ghost{--c-hi:#16203a;--c-lo:#0a1220;--glow:rgba(27,157,240,.18);--edge:rgba(120,170,230,.45);--ink:#c7d6f5;font-weight:700}
.btn-node.connected{--c-hi:#0f3a2a;--c-lo:#06170f;--glow:rgba(55,214,122,.35);--edge:rgba(55,214,122,.7);--ink:#bdf5d6}

/* ---------- Footer ---------- */
.site-foot{position:relative;z-index:1;text-align:center;padding:40px 16px 30px;border-top:1px solid var(--line);margin-top:50px}
.site-foot img{height:54px;object-fit:contain;opacity:.92;filter:drop-shadow(0 0 14px rgba(212,166,74,.35))}
.site-foot .tag{color:var(--gold-soft);letter-spacing:.3em;font-size:.7rem;font-weight:600;margin:10px 0 4px}
.site-foot small{color:#566083;font-size:.78rem}

/* ---------- Utilidades ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.fx-glow{animation:none}}