/* ============================================================
   NIX Membership — estilos específicos de la landing.
   Reutiliza tokens, botones, .glass-card, .section, .process-track,
   .cta-glass, .reveal y el fondo (#bg-nebula/#bg-particles) de
   ../../css/style.css. Aquí sólo viven los componentes nuevos.
   ============================================================ */

/* Nada de overflow-x:hidden en body: cuando html es visible, el overflow
   del body se propaga al viewport y el body deja de recortar, así que la
   regla no evita el scroll lateral. El glow del hero, que es lo único que
   desborda a propósito, se recorta en su propia sección (.nm-hero). */

/* ===== Foco visible por teclado =====
   El sitio principal no define ninguno (el cursor personalizado oculta el
   nativo con cursor:none, pero el outline del teclado sigue haciendo falta).
   Se limita a esta página para no alterar el resto del sitio. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--purple-light);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{border-radius:100px;}

/* ===== Logo lockup — mismo corte n-white/n-purple del loader del sitio ===== */
.nm-logo-lockup{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:0.01em;
  white-space:nowrap;
}
.footer-brand .nm-logo-lockup{font-size:1.1rem;display:block;margin-bottom:14px;}

/* El heading grande usa el mismo acento morado que el hero del sitio. */
.nm-hero-title .accent,
.section-heading .accent,
.cta-heading .accent{color:var(--purple-light);}

/* ===== Hero ===== */
.nm-hero{
  position:relative;
  z-index:1;
  /* Recorta el glow (130vw) para que nunca genere scroll horizontal. */
  overflow:hidden;
  padding:clamp(140px, 16vw, 190px) 0 40px;
  text-align:center;
}
.nm-hero-glow{
  position:absolute;
  top:-10%;left:50%;
  transform:translateX(-50%);
  width:min(1100px, 130vw);
  height:760px;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, rgba(177,76,250,0.20), transparent 62%);
  will-change:transform;
}
.nm-hero-inner{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:0 6vw;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.nm-hero-title{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.05;
  font-size:clamp(2.3rem, 5.4vw, 4.4rem);
  color:var(--text);
  text-shadow:0 4px 40px rgba(0,0,0,0.55);
  max-width:14em;
}
.nm-hero .hero-sub{margin-top:26px;}
.nm-hero .hero-eyebrow{margin-bottom:20px;}

/* CTA principal: brillo controlado + desplazamiento breve del icono. */
.nm-cta-arrow{
  display:inline-block;
  margin-left:2px;
  transition:transform 260ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nm-cta-shine:hover .nm-cta-arrow{transform:translateX(5px);}
}
.nm-cta-shine{position:relative;overflow:hidden;}
.nm-cta-shine::after{
  content:'';
  position:absolute;
  top:0;bottom:0;left:-60%;
  width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
  transform:skewX(-18deg);
  animation:nmShine 4.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes nmShine{
  0%,72%{left:-60%;}
  100%{left:130%;}
}

/* ===== Mockup del producto — ventana estilo macOS con capturas reales ===== */
.nm-dash-wrap{
  position:relative;
  margin-top:clamp(48px, 6vw, 76px);
  /* deja aire a la derecha/abajo para el móvil flotante */
  padding-bottom:clamp(24px, 5vw, 56px);
}
.nm-window{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03) 60%);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 50px 110px -40px rgba(0,0,0,0.85), 0 0 80px -30px rgba(177,76,250,0.45), inset 0 1px 0 rgba(255,255,255,0.16);
  will-change:transform;
}
@supports not (backdrop-filter: blur(1px)){
  .nm-window{background:var(--charcoal-2);}
}
/* Barra superior tipo ventana macOS */
.nm-window-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
}
.nm-window-dots{display:flex;gap:8px;}
.nm-window-dots span{
  width:12px;height:12px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);
}
.nm-window-dots span:nth-child(1){background:#ff5f57;}
.nm-window-dots span:nth-child(2){background:#febc2e;}
.nm-window-dots span:nth-child(3){background:#28c840;}
.nm-window-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:0.74rem;
  letter-spacing:0.02em;
  color:var(--text-faint);
  white-space:nowrap;
  pointer-events:none;
}
.nm-window-body{
  position:relative;
  line-height:0;
}
.nm-shot-desktop{
  width:100%;
  height:auto;
  display:block;
}
/* Móvil flotante superpuesto, esquina inferior derecha */
.nm-shot-mobile{
  position:absolute;
  right:clamp(-8px, 1.5vw, 24px);
  bottom:clamp(-40px, -4vw, -20px);
  width:clamp(96px, 15%, 190px);
  height:auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 30px 60px -18px rgba(0,0,0,0.85), 0 0 44px -14px rgba(177,76,250,0.55);
  background:var(--bg);
}
.nm-dash-note{
  margin-top:26px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--text-faint);
}

@media (prefers-reduced-motion: reduce){
  .nm-cta-shine::after{animation:none;display:none;}
}

@media (max-width:640px){
  .nm-shot-mobile{
    width:26%;
    right:-6px;
    bottom:-26px;
    border-radius:12px;
  }
  .nm-window-title{display:none;}
}

/* ===== Problema — cabecera a dos columnas ===== */
.nm-split-header{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:end;
  margin-bottom:56px;
}
.nm-split-header .section-header{margin-bottom:0;}
.nm-split-header .section-body{margin-bottom:0;}
.nm-badge-danger{background:linear-gradient(145deg, #ff6f85, #d9364f 85%);box-shadow:0 10px 24px -8px rgba(255,111,133,0.55);}
.nm-badge-warn{background:linear-gradient(145deg, #ffcd7a, #e08a1e 85%);box-shadow:0 10px 24px -8px rgba(255,196,107,0.5);}
@media (max-width:900px){
  .nm-split-header{grid-template-columns:1fr;gap:20px;align-items:start;margin-bottom:44px;}
}

/* ===== Bento de funciones ===== */
.nm-bento{
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:auto;
  align-items:stretch;
}
.nm-bento-main{grid-column:span 2;}
.nm-bento-main h3{font-size:1.6rem;}
.nm-bento .glass-card{display:flex;flex-direction:column;}
.nm-bento .check-list{margin:20px 0 0;}
.nm-bento .feature-tags{margin:auto 0 0;padding-top:22px;}

.nm-chip{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:100px;
  margin-bottom:20px;
  color:var(--purple-light);
  border:1px solid rgba(177,76,250,0.4);
  background:rgba(177,76,250,0.13);
}
.nm-chip-sm{margin:14px 0 0;font-size:0.62rem;padding:6px 12px;}

.nm-validate{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  margin-top:28px;
  position:relative;
  z-index:1;
}
.nm-validate-code{
  display:flex;
  flex-direction:column;
  padding:22px;
  border-radius:var(--radius-sm);
  border:1px dashed rgba(192,97,255,0.4);
  background:rgba(0,0,0,0.28);
}
.nm-validate-label{
  font-family:var(--font-mono);
  font-size:0.64rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:8px;
}
.nm-validate-code strong{
  font-family:var(--font-mono);
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:0.06em;
  color:var(--text);
}
.nm-validate-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:0.82rem;
  color:var(--text-dim);
  text-align:center;
}
.nm-validate-state svg{width:90px;height:90px;}
.nm-check{
  stroke-dasharray:60;
  stroke-dashoffset:60;
}
.nm-validate-state.is-live .nm-check{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 620ms cubic-bezier(.22,1,.36,1) 150ms;
}
@media (prefers-reduced-motion: reduce){
  .nm-check{stroke-dashoffset:0;}
}

.nm-mini-alert{
  margin:auto 0 0;
  padding:16px 18px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,196,107,0.28);
  background:rgba(255,196,107,0.07);
}
.nm-mini-alert-label{
  display:block;
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#FFC46B;
  margin-bottom:6px;
}
.nm-mini-alert strong{
  font-family:var(--font-display);
  font-size:0.98rem;
  font-weight:600;
  color:var(--text);
}

@media (max-width:1080px){
  .nm-bento{grid-template-columns:repeat(2,1fr);}
  .nm-bento-main{grid-column:span 2;}
}
@media (max-width:768px){
  .nm-validate{grid-template-columns:1fr;justify-items:center;}
  .nm-validate-code{width:100%;}
}
@media (max-width:640px){
  .nm-bento{grid-template-columns:1fr;}
  .nm-bento-main{grid-column:span 1;}
  .nm-bento-main h3{font-size:1.25rem;}
  .nm-bento .glass-card{padding:24px 20px;}
  .nm-validate-code strong{font-size:1.1rem;}
}

/* ===== Cómo funciona (reutiliza .process-track) ===== */
.nm-steps .process-badge{
  font-family:var(--font-mono);
  font-size:0.85rem;
  font-weight:700;
}
.nm-steps .process-card{text-align:center;padding-left:24px;padding-right:24px;}

/* ===== Seguridad ===== */
.nm-security-glass{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  padding:clamp(36px, 5vw, 64px);
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025) 60%);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
}
@supports not (backdrop-filter: blur(1px)){
  .nm-security-glass{background:var(--charcoal-2);}
}
.nm-security-copy .check-list{margin-bottom:0;}

.nm-security-diagram{
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 auto;
  aspect-ratio:420 / 320;
  min-height:320px;
}
.nm-node-links{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.nm-node-links line{
  stroke:rgba(192,97,255,0.4);
  stroke-width:1.5;
  stroke-dasharray:5 6;
}
.nm-node{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  font-family:var(--font-display);
  font-size:0.85rem;
  font-weight:600;
  color:var(--text);
  text-align:center;
  white-space:nowrap;
  background:linear-gradient(155deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--border-glass-strong);
  box-shadow:0 14px 30px -14px rgba(0,0,0,0.7);
}
.nm-node small{
  font-family:var(--font-mono);
  font-size:0.62rem;
  font-weight:400;
  color:var(--text-faint);
  letter-spacing:0.02em;
}
.nm-node-tl{top:0;left:0;}
.nm-node-tr{top:0;right:0;}
.nm-node-bl{bottom:0;left:0;}
.nm-node-br{bottom:0;right:0;}
.nm-node-core{
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  padding:22px 26px;
  border-radius:50%;
  aspect-ratio:1;
  width:132px;
  align-items:center;
  justify-content:center;
  font-size:0.92rem;
  border-color:rgba(192,97,255,0.6);
  background:linear-gradient(155deg, rgba(177,76,250,0.34), rgba(177,76,250,0.08));
  box-shadow:0 0 60px -12px rgba(192,97,255,0.75), inset 0 1px 0 rgba(255,255,255,0.2);
}
.nm-node-core small{white-space:normal;line-height:1.25;}

@media (max-width:1080px){
  .nm-security-glass{grid-template-columns:1fr;gap:52px;}
}
@media (max-width:560px){
  .nm-security-diagram{min-height:280px;}
  .nm-node{font-size:0.74rem;padding:9px 11px;}
  .nm-node small{font-size:0.56rem;}
  .nm-node-core{width:112px;font-size:0.8rem;padding:14px;}
}

/* ===== CTA final ===== */
.cta-final .hero-ctas{margin-top:0;}

/* ===== Footer: etiquetas legales sin página propia (no son enlaces falsos) ===== */
.footer-legal-pending{
  color:var(--text-faint);
  font-size:0.94rem;
  cursor:default;
}
.footer-legal-pending em{font-style:normal;opacity:0.65;font-size:0.85em;}

/* El menú móvil del sitio principal oculta el CTA del navbar; aquí la
   demo es la única acción, así que se mantiene visible dentro del panel. */
@media (max-width:968px){
  .nm-hero{padding-top:130px;}
}