/* =============================================================
   NOVA — estilos propios de la página.
   Usa exclusivamente los tokens de WEBEXPRES (styles.css) para
   que la experiencia sea indistinguible del resto del sitio.
   ============================================================= */

/* ---------- Escenario 3D de fondo ---------- */
.nova-stage {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.nova-stage.is-ready { opacity: 1; }
.nova-stage canvas { display: block; width: 100%; height: 100%; }

/* Viñeta: funde la esfera con el fondo de la marca */
.nova-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(4,6,13,0.55) 72%, var(--bg) 100%);
}

/* El contenido siempre por encima del lienzo */
.nav, .nav-mobile, main, .footer, .progress { position: relative; z-index: 5; }

/* ---------- Hero ---------- */
.nova-hero {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + 3rem) 0 4rem;
  text-align: center;
}
.nova-hero-inner { display: flex; flex-direction: column; align-items: center; }

/* Título principal. El acabado metálico lo aporta .nova-word (styles.css),
   la fuente única del efecto en toda la web; acá sólo la escala. */
.nova-title {
  font-size: clamp(4.2rem, 15vw, 12rem);
  line-height: .9;
  letter-spacing: -0.045em;
  margin-top: 1.4rem;
  filter: drop-shadow(0 8px 44px rgba(47, 123, 255, 0.26));
}

.nova-sub {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--ink);
  opacity: .82;
  margin-top: 1.4rem;
  max-width: 34ch;
}
.nova-cta {
  margin-top: 2.4rem;
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
}

/* ---------- Nota destacada ---------- */
.nova-note {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panel-brd);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.nova-note svg { width: 26px; height: 26px; color: var(--blue-bright); flex: 0 0 auto; margin-top: 2px; }
.nova-note p { color: var(--muted); font-size: .98rem; }
.nova-note strong { color: var(--ink); font-weight: 600; }

/* ---------- Marco de demostración ---------- */
.nova-demo {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(13,20,40,0.82), rgba(6,10,22,0.82));
  border: 1px solid var(--panel-brd);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px -40px rgba(11, 58, 168, 0.55);
}
.nova-demo-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--panel-brd);
  background: rgba(255,255,255,0.02);
}
.nova-demo-bar > span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(120,165,255,0.28);
}
.nova-demo-url {
  margin-left: .6rem; padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--panel-brd);
  color: var(--muted-2); font-size: .8rem;
}
.nova-demo-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  padding: clamp(2.6rem, 7vw, 4.6rem) 1.2rem;
  text-align: center;
}
.nova-demo-logo {
  width: 54px; height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 16px rgba(90,160,255,.55));
}
.nova-demo-status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--muted);
}
.nova-demo-status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.75);
}
.nova-demo-open { margin-top: .4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .nova-hero { min-height: 92svh; }
  .nova-cta { width: 100%; flex-direction: column; }
  .nova-cta .btn { width: 100%; justify-content: center; }
  .nova-note { flex-direction: column; gap: .7rem; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .nova-stage { transition: none; }
}