/* ═══════════════════════════════════════════════════════════════════════════
🐺 NEXUS TRINITY — SISTEMA DE DISEÑO DEL ECOSISTEMA (v1, 2026-08-03)
Estándar visual de todo el ecosistema. Impórtalo en cualquier web con:
Fuentes (mételas en el ):
Cinzel (épico) · Playfair Display (elegante) · Inter (cuerpo)
Clases listas: .nx-btn / .nx-btn--ghost / .nx-glass / .nx-reveal / .nx-firma
Regla: NUNCA plantilla genérica — paleta Nexus, CTAs con brillo, entradas al scroll, glass con borde dorado, 🐺 en la firma.
═══════════════════════════════════════════════════════════════════════════ */
:root{
/* Paleta Nexus Trinity */
--nexus-gold:#D4AF37; --nexus-gold-light:#F5E06E; --nexus-dark:#0A0A0F; --nexus-dark-2:#12121A;
--nexus-blue:#1A3A6E; --nexus-purple:#4A1A7E; --nexus-white:#F5F5F0;
--nexus-gold-rgb:212,175,55; --nexus-blue-rgb:26,58,110; --nexus-purple-rgb:74,26,126;
/* Tipografía */
--font-epic:'Cinzel',Georgia,serif; /* titulares épicos */
--font-elegant:'Playfair Display',Georgia,serif;/* subtítulos elegantes */
--font-body:'Inter',system-ui,-apple-system,sans-serif; /* cuerpo */
/* Efectos */
--glow-gold:0 0 20px rgba(var(--nexus-gold-rgb),.4);
--glow-blue:0 0 20px rgba(var(--nexus-blue-rgb),.6);
--glass:rgba(255,255,255,.05); --glass-border:rgba(var(--nexus-gold-rgb),.2);
--nx-ease:cubic-bezier(.2,.7,.2,1);
}
/* ── base ── */
.nx-scope,.nx-body{background:var(--nexus-dark);color:var(--nexus-white);font-family:var(--font-body);font-weight:300;line-height:1.65}
.nx-epic{font-family:var(--font-epic);font-weight:900;line-height:1.08;text-wrap:balance}
.nx-elegant{font-family:var(--font-elegant);font-style:italic}
.nx-eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.34em;font-size:11.5px;font-weight:600;color:var(--nexus-gold)}
.nx-gold-text{background:linear-gradient(180deg,#fff 10%,var(--nexus-gold-light) 70%,var(--nexus-gold) 110%);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* ── botón CTA: brillo dorado + hover scale(1.05) + glow ── */
.nx-btn{display:inline-block;padding:15px 34px;border-radius:999px;border:0;cursor:pointer;position:relative;
font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:14px;
color:#1a1405;background:linear-gradient(180deg,var(--nexus-gold-light),var(--nexus-gold));
box-shadow:0 12px 34px rgba(var(--nexus-gold-rgb),.35),var(--glow-gold);
transition:transform .16s var(--nx-ease),box-shadow .16s var(--nx-ease)}
.nx-btn:hover{transform:scale(1.05) translateY(-2px);box-shadow:0 0 28px rgba(var(--nexus-gold-rgb),.6),0 18px 42px rgba(var(--nexus-gold-rgb),.45)}
.nx-btn:focus-visible{outline:2px solid var(--nexus-gold-light);outline-offset:3px}
.nx-btn--ghost{background:transparent;color:var(--nexus-gold-light);border:1px solid rgba(var(--nexus-gold-rgb),.5);box-shadow:none}
.nx-btn--ghost:hover{background:rgba(var(--nexus-gold-rgb),.08);box-shadow:0 0 20px rgba(var(--nexus-gold-rgb),.25)}
.nx-btn--purple{background:linear-gradient(180deg,#c4b3ff,var(--nexus-purple));color:#fff;box-shadow:0 12px 34px rgba(var(--nexus-purple-rgb),.5)}
/* ── glassmorphism: blur + borde dorado sutil ── */
.nx-glass{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid var(--glass-border);border-radius:20px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.35)}
.nx-glass:hover{border-color:rgba(var(--nexus-gold-rgb),.4)}
/* ── entrada al scroll: fade-in + slide-up 0.6s (la clase .in la pone nexus-design-system.js) ── */
.nx-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--nx-ease),transform .6s var(--nx-ease)}
.nx-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.nx-reveal{opacity:1;transform:none;transition:none}}
/* ── transiciones de gradiente entre secciones ── */
.nx-t-gold-blue{height:140px;background:linear-gradient(180deg,var(--nexus-dark),var(--nexus-blue))}
.nx-t-blue-purple{height:140px;background:linear-gradient(180deg,var(--nexus-blue),var(--nexus-purple))}
/* ── firma con el lobo 🐺 ── */
.nx-firma{font-family:var(--font-epic);letter-spacing:.08em;color:var(--nexus-gold-light);text-align:center;font-size:16px}
.nx-firma::before{content:"🐺 "}
/* ── lienzo de partículas de fondo (lo rellena el .js con tsParticles o canvas propio) ── */
.nx-particles{position:absolute;inset:0;z-index:0;pointer-events:none}