/* Hero "haz de luz": título centrado, haz zafiro diagonal, fantasma 3D asomándose detrás de la ventana de Kirux. */
.nh { position: relative; overflow: hidden; isolation: isolate; padding-top: 64px; padding-bottom: clamp(48px, 9vh, 110px); --nh-ease: cubic-bezier(0.16, 1, 0.3, 1); --nh-x: clamp(16px, 4vw, 64px); }

/* ---------- Haz ---------- */
.nh-beam { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.nh-beam i {
  position: absolute; left: 50%; top: 58%; width: 190vmax;
  transform: translate(-50%, -50%) rotate(-24deg);
  animation: nh-beam-in 2s var(--nh-ease) both, nh-sway 16s ease-in-out 2s infinite alternate;
}
.nh-beam .b1 { height: 46vmin; background: linear-gradient(180deg, transparent, rgba(21,87,166,.55) 45%, rgba(21,87,166,.55) 55%, transparent); filter: blur(60px); }
.nh-beam .b2 { height: 16vmin; background: linear-gradient(180deg, transparent, rgba(100,163,255,.7) 50%, transparent); filter: blur(22px); animation-delay: .15s, 2s; }
.nh-beam .b3 {
  height: 3.4vmin; filter: blur(6px);
  background: linear-gradient(90deg, transparent 8%, rgba(200,225,255,.5) 30%, #fff 50%, rgba(200,225,255,.5) 70%, transparent 92%);
  background-size: 200% 100%;
  animation: nh-beam-in 2s var(--nh-ease) .3s both, nh-shimmer 7s linear 2s infinite;
}
.nh-beam .b4 { height: .6vmin; margin-top: 3.2vmin; background: linear-gradient(90deg, transparent 20%, #9cc3ff 45%, #64A3FF 55%, transparent 80%); filter: blur(2px); opacity: .8; animation-delay: .45s, 2s; }
.nh-beam::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 45% at 25% 30%, rgba(2,3,6,.72), transparent 70%),
              linear-gradient(180deg, rgba(2,3,6,.2), transparent 30%, transparent 70%, var(--bg, #020306));
}

/* ---------- Copy ---------- */
.nh-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--nh-x) 0; }
.nh-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.nh-emblem { position: relative; z-index: 4; min-width: 0; }
.nh-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(100,163,255,.25); background: rgba(21,87,166,.14); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: #bcd3ee; }
.nh-eyebrow .pulse-dot { margin: 0; }
.nh h1 { font-family: var(--sans, Inter, sans-serif); font-size: clamp(38px, 4.1vw, 72px); font-weight: 700; letter-spacing: -.05em; line-height: 1.02; color: #fff; }
.nh h1 .l { display: block; overflow: hidden; padding: .04em .1em .1em 0; }
.nh h1 .l > span { display: inline-block; }
.nh h1 .grad {
  background: linear-gradient(95deg, #fff 0%, #cfe2ff 35%, #64A3FF 70%, #3d86e8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: nh-mask 1.1s var(--nh-ease) .45s both, nh-grad 9s ease-in-out 1.6s infinite alternate;
}
.nh-sub { max-width: 500px; margin-top: 22px; color: #A5B6C9; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; }
.nh-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.nh-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px;
  border-radius: 999px; font-family: var(--sans, Inter, sans-serif); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; color: #fff;
  transition: box-shadow .35s, background .35s, border-color .35s, transform .35s var(--nh-ease);
}
.nh-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) 48%, transparent 76%); transform: translateX(-130%); transition: transform .7s ease; }
.nh-btn:hover::after { transform: translateX(130%); }
.nh-btn:hover { transform: translateY(-1px); }
.nh-btn svg { width: 16px; height: 13px; flex: none; }
.nh-btn .arrow { transition: transform .3s var(--nh-ease); }
.nh-btn:hover .arrow { transform: translateX(3px); }
.nh-btn-primary { background: linear-gradient(180deg, #2a6fc4, #1557A6 55%, #0f4585); border: 1px solid #3a7fd4; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 24px rgba(21,87,166,.35); }
.nh-btn-primary:hover { border-color: #64A3FF; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 28px rgba(100,163,255,.45), 0 10px 26px rgba(21,87,166,.4); }
.nh-btn-ghost { background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(2,3,6,.5) 46%, rgba(100,163,255,.1)); border: 1px solid rgba(165,182,201,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nh-btn-ghost:hover { border-color: rgba(100,163,255,.8); box-shadow: 0 0 24px rgba(100,163,255,.25); }
.nh-trust { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8ea0b6; text-shadow: 0 1px 8px #020306; }

/* ---------- Escena ---------- */
.nh-scene { position: relative; z-index: 4; margin: clamp(16px, 4vh, 48px) auto 0; width: min(1120px, calc(100% - 2 * var(--nh-x))); perspective: 1600px; }

.nh-device { position: relative; z-index: 2; transform-origin: 50% 0; transform: translateY(calc((1 - var(--p, 0)) * 90px)) rotateX(calc((1 - var(--p, 0)) * 14deg)) scale(calc(.94 + var(--p, 0) * .06)); animation: nh-device-in 1.4s var(--nh-ease) .9s both; }
.nh-menubar { display: flex; align-items: center; gap: 18px; height: 30px; padding: 0 14px; border-radius: 10px 10px 0 0; background: rgba(16,25,37,.72); border: 1px solid rgba(165,182,201,.14); border-bottom: 0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-family: var(--sans, Inter, sans-serif); font-size: 12px; color: #A5B6C9; }
.nh-menubar img { width: 15px; height: auto; }
.nh-menubar b { color: #fff; font-weight: 600; }
.nh-menubar .right { margin-left: auto; font-family: var(--mono); font-size: 11px; }
.nh-window { display: grid; grid-template-columns: 210px 1fr; background: #fff; color: #12294D; border-radius: 0 0 14px 14px; overflow: hidden; font-family: var(--sans, Inter, sans-serif); box-shadow: 0 40px 120px rgba(21,87,166,.35), 0 20px 50px rgba(0,0,0,.5); }
.nh-side { background: #f4f7fb; border-right: 1px solid #e3e9f1; padding: 16px 12px; font-size: 13px; }
.nh-dots { display: flex; gap: 7px; margin: 2px 4px 20px; }
.nh-dots i { width: 11px; height: 11px; border-radius: 50%; background: #d5dde8; }
.nh-side span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 7px; color: #4a5d78; }
.nh-side span.on { background: #fff; color: #12294D; font-weight: 600; box-shadow: 0 1px 2px rgba(18,41,77,.08); }
.nh-main { padding: 18px 22px; min-width: 0; }
.nh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nh-head strong { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.nh-head small { font-family: var(--mono); font-size: 10.5px; color: #53657f; text-transform: uppercase; letter-spacing: .06em; margin-left: 8px; }
.nh-search { display: flex; align-items: center; gap: 8px; width: 200px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #e3e9f1; color: #9aa9bd; font-size: 12.5px; }
.nh-row { display: grid; grid-template-columns: 14px 1fr 70px 110px 110px; align-items: center; gap: 12px; padding: 11px 6px; border-top: 1px solid #edf1f6; font-size: 13px; animation: nh-row 0.7s var(--nh-ease) both; animation-delay: calc(1.6s + var(--i) * .12s); }
.nh-row .dot { width: 7px; height: 7px; border-radius: 50%; background: #1557A6; }
.nh-row .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-row .src, .nh-row .ev { color: #4f6280; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-row .ev { font-family: var(--mono); font-size: 11px; }
.nh-sev { justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 3px 7px; border-radius: 5px; }
.nh-sev.c { background: #ffe8ec; color: #a8102c; }
.nh-sev.h { background: #fff6cc; color: #664c00; }
.nh-sev.m { background: #eef3fa; color: #2e4566; }

/* ---------- Entrada (espera al loader: html.is-loaded) ---------- */
.nh-in { animation: nh-rise 1.1s var(--nh-ease) both; animation-delay: var(--d, 0s); }
.nh-mask { animation: nh-mask 1.1s var(--nh-ease) both; animation-delay: var(--d, 0s); }
html.js:not(.is-loaded) .nh *, html.js:not(.is-loaded) .nh-beam i { animation-play-state: paused !important; }

@keyframes nh-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes nh-mask { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
@keyframes nh-beam-in { from { opacity: 0; transform: translate(-60%, -50%) rotate(-24deg) scaleX(.4); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-24deg); } }
@keyframes nh-sway { from { transform: translate(-50%, -50%) rotate(-24deg); } to { transform: translate(-48%, -46%) rotate(-21deg); } }
@keyframes nh-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes nh-grad { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes nh-device-in { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@keyframes nh-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Terminal reubicada en "Cómo funciona" */
.hiw-top { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 56px; align-items: center; margin-bottom: 72px; }
.hiw-top .hiw-header { margin-bottom: 0; }
.hiw-top .terminal-body { min-height: 280px; }

@media (max-width: 1024px) {
  .nh-top { grid-template-columns: 1fr; }
  .nh-emblem { display: none; }
}
@media (max-width: 900px) {
  .nh-window { grid-template-columns: 1fr; min-height: 0; }
  .nh-side, .nh-search, .nh-menubar .opt { display: none; }
    .nh-row { grid-template-columns: 10px 1fr 60px; }
  .nh-row .src, .nh-row .ev { display: none; }
    .nh-menubar .right { display: none; }
    .hiw-top { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
}
@media (max-width: 560px) {
  .nh-actions { flex-direction: column; width: 100%; }
  .nh-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nh *, .nh-beam i { animation: none !important; transition: none !important; }
}