/* ==========================================================================
   NUMEN · demos — base compartida (contrato v2, NO INVASIVO)
   1) El chrome (header/sub/cierre/foot) sigue siendo NUMEN oscuro; la "app real"
      la define cada demo con su propio estilo CLARO inline dentro de .demo-main.
   2) Esta hoja NO define pantallas de app: solo tokens NUMEN, chrome y el tour.
   3) Tour: sin overlay ni dimmer; resalta el ancla con .numen-focus (outline rojo
      + glow) y muestra una tarjeta compacta minimizable a pastilla — la app queda
      100% visible e interactiva. `padding` del paso -> --numen-focus-offset.
   ========================================================================== */

:root {
  /* el mundo del sistema (pre-amanecer profundo) */
  --ground: #0B1017;
  --surface: #121A24;
  --surface-2: #16202C;
  --line: #223040;
  --ink: #E9EEF3;
  --muted: #93A1AF;
  --faint: #5E6C7A;

  /* el pulso del numen */
  --red: #E5402C;
  --red-deep: #C22A18;
  --red-glow: rgba(229, 64, 44, 0.16);

  /* el flash de luz (la garantía humana) */
  --paper: #F1F3F6;
  --paper-ink: #12161C;
  --paper-muted: #57616D;

  /* semánticos */
  --live: #35B36B;
  --live-dim: rgba(53, 179, 107, 0.14);

  --display: 'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Cascadia Code', 'Consolas', 'SFMono-Regular', ui-monospace, monospace;

  --measure: 60ch;
  --maxw: 1020px;
}

* { box-sizing: border-box; }

/* El body es el marco NUMEN oscuro; cada demo pone su app CLARA en .demo-main. */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--red); color: #fff; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }

/* ---------- la marca: el punto que late ---------- */
.pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); flex: none; position: relative;
}
.pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--red); opacity: 0;
  animation: ring 2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes ring {
  0% { transform: scale(0.5); opacity: 0.85; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- primitivas de texto compartidas (chrome) ---------- */
.cap {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  letter-spacing: 0.04em; line-height: 1.7; max-width: 72ch; margin: 0;
}
.cap b { color: var(--muted); font-weight: 600; }

.status {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 2px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.status .s-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.status.live { background: var(--live-dim); color: var(--live); border-color: var(--live); }
.status.live .s-dot { background: var(--live); }

/* ---------- botones de la landing (chrome) ---------- */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.03em;
  text-decoration: none; color: #fff; background: var(--red);
  padding: 14px 24px; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--red-deep), 0 12px 34px -14px var(--red);
  transition: transform .12s ease, background .15s ease;
}
.cta:hover { background: var(--red-deep); transform: translateY(-1px); }
.cta .arrow { font-family: var(--mono); font-weight: 400; font-size: 20px; }

.cta-sm {
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: 0.04em;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--muted); border-radius: 2px;
  padding: 8px 14px; white-space: nowrap; cursor: pointer;
  background: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cta-sm:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ==========================================================================
   Shell del demo — header, caption de honestidad, contenedor de la app
   (la app en sí la define cada demo con su propio estilo claro inline)
   ========================================================================== */

.demo-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 16, 23, 0.9);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.demo-header .row {
  max-width: 640px; margin: 0 auto; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
}
.demo-mark { display: flex; align-items: center; gap: 10px; min-width: 0; }
.demo-mark b {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.14em;
  font-size: 15px; color: var(--ink);
}
.demo-mark span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
}
.demo-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.demo-back { text-decoration: none; }

.demo-sub { max-width: 640px; margin: 0 auto; padding: 12px 14px 0; }

.demo-main { max-width: 640px; margin: 0 auto; padding: 14px 12px 40px; }

/* ==========================================================================
   Panel de cierre (oculto hasta numen:tour-fin)
   ========================================================================== */
.cierre { max-width: 640px; margin: 0 auto; padding: 26px 14px 8px; display: none; }
.cierre.is-on { display: block; }
.cierre .kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red); margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
}
.cierre .kicker::before { content: ""; width: 22px; height: 1px; background: var(--red); }
.cierre h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(22px, 5vw, 30px);
  line-height: 1.12; margin: 0 0 14px; max-width: 22ch; text-wrap: balance;
}
.cierre h2 .hl { color: var(--red); }
.cierre p.sub { color: var(--muted); font-size: 15px; max-width: 52ch; margin: 0 0 22px; line-height: 1.55; }
.cierre .cierre-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cierre .links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.cierre .links a {
  font-family: var(--mono); font-size: 13px; color: var(--muted); text-decoration: none;
  letter-spacing: 0.02em; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.cierre .links a:hover { color: var(--red); border-bottom-color: var(--red); }

.demo-foot {
  max-width: 640px; margin: 0 auto; padding: 26px 14px 40px;
  font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.04em;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* ==========================================================================
   Motor de tour v2 — resaltado del ancla + tarjeta compacta del numen
   Sin overlay, sin dimmer, sin bloqueo: la app queda 100% operable.
   ========================================================================== */

/* --- el resaltado se pinta SOBRE el propio elemento ancla --- */
.numen-focus {
  outline: 2px solid var(--red);
  outline-offset: var(--numen-focus-offset, 3px);
  /* el glow y el outline siguen el border-radius propio del elemento (heredado) */
  box-shadow: 0 0 0 4px rgba(229, 64, 44, 0.15);
  animation: numenFocusIn 0.85s ease-out 2;
}
@keyframes numenFocusIn {
  0%   { box-shadow: 0 0 0 4px rgba(229, 64, 44, 0.15), 0 0 0 2px rgba(229, 64, 44, 0.45); }
  100% { box-shadow: 0 0 0 4px rgba(229, 64, 44, 0.15), 0 0 0 12px rgba(229, 64, 44, 0); }
}

/* --- la raíz NO bloquea: solo la tarjeta / pastilla reciben clics --- */
.numen-tour-root { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.numen-tour-root[hidden] { display: none; }

/* --- la tarjeta compacta (móvil: franja fija abajo) --- */
.numen-tour-card {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column;
  max-height: 32vh;
  pointer-events: auto;
  background: var(--ground); color: var(--ink);
  border-top: 1px solid var(--line);
  padding: 12px 15px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  box-shadow: 0 -20px 55px -30px rgba(0, 0, 0, 0.9);
}

/* barra de progreso — hairline roja en el borde superior */
.numen-tour-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(229, 64, 44, 0.14); overflow: hidden;
}
.numen-tour-bar {
  display: block; height: 100%; width: 0; background: var(--red);
  transition: width .35s ease;
}

/* header de la tarjeta */
.numen-tour-head { display: flex; align-items: center; gap: 8px; flex: none; }
.numen-tour-head .pulse { width: 8px; height: 8px; }
.numen-tour-name {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.22em; font-size: 11px; color: var(--ink);
}
.numen-tour-paso {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.numen-tour-tools { margin-left: auto; display: inline-flex; gap: 6px; flex: none; }
.numen-tour-icon {
  appearance: none; width: 30px; height: 30px; border-radius: 5px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.numen-tour-icon:hover { color: var(--ink); border-color: var(--muted); background: var(--surface-2); }

/* cuerpo — scrollea dentro si no cabe */
.numen-tour-body { flex: 1 1 auto; overflow-y: auto; margin-top: 9px; -webkit-overflow-scrolling: touch; }
.numen-tour-titulo {
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; margin: 0; color: var(--ink);
}
.numen-tour-texto {
  font-family: var(--body); font-size: 14px; line-height: 1.5; color: var(--muted); margin: 6px 0 0;
}

/* footer — Anterior (ghost) + Siguiente (rojo) / hint de acción */
.numen-tour-foot { flex: none; display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.numen-tour-btn {
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  border-radius: 4px; padding: 0 15px; min-height: 40px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.numen-tour-btn.is-prev { border-color: var(--line); }
.numen-tour-btn.is-prev:hover { color: var(--ink); border-color: var(--muted); }
.numen-tour-btn.is-next {
  margin-left: auto; background: var(--red); color: #fff; border-color: var(--red-deep); padding: 0 20px;
}
.numen-tour-btn.is-next:hover { background: var(--red-deep); }
.numen-tour-btn[hidden] { display: none; }

.numen-tour-hint {
  margin: 0 0 0 auto;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--red);
  animation: numenHint 1.6s ease-in-out infinite;
}
.numen-tour-hint[hidden] { display: none; }
@keyframes numenHint { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* --- la pastilla minimizada (la app queda totalmente despejada) --- */
.numen-tour-pill {
  position: fixed; right: 14px; bottom: 14px;
  display: none; align-items: center; gap: 8px;
  pointer-events: auto; cursor: pointer;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 15px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.9);
  transition: border-color .15s ease, transform .15s ease;
}
.numen-tour-pill:hover { border-color: var(--muted); }
.numen-tour-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.numen-tour-pill-name {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.18em; font-size: 11px; color: var(--ink);
}
.numen-tour-pill-sep { color: var(--faint); }
.numen-tour-pill-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.numen-tour-pill.is-pulsing { animation: numenPill .45s ease; }
@keyframes numenPill { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* --- estados: minimizado oculta la tarjeta y muestra la pastilla --- */
.numen-tour-root.is-min .numen-tour-card { display: none; }
.numen-tour-root.is-min .numen-tour-pill { display: inline-flex; }

/* ==========================================================================
   Desktop (≥820px) — tarjeta flotante abajo-derecha (no franja)
   ========================================================================== */
@media (min-width: 820px) {
  body { font-size: 17px; }
  .demo-main { padding-top: 18px; }

  .numen-tour-card {
    left: auto; right: 18px; bottom: 18px;
    width: 360px; max-width: calc(100vw - 36px);
    max-height: 40vh;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .numen-tour-progress { border-radius: 8px 8px 0 0; }
}

/* ==========================================================================
   prefers-reduced-motion — todo funcional sin animaciones
   (el resaltado conserva el outline + glow estáticos; sin pulsos)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .numen-tour-bar { transition: none !important; }
}