/* =============================================================================
 * demo.css — Estilos del MODO DEMO: badge flotante + tour (spotlight + tooltip)
 * ========================================================================== */

/* ----------------------------- Badge flotante --------------------------- */
.nv-demo-badge {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99990;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}
.nv-demo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: nv-demo-pulse 1.8s infinite;
}
@keyframes nv-demo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.nv-demo-label { text-transform: uppercase; color: #cbd5e1; }
.nv-demo-action {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 12px; font-weight: 700;
  color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none; border-radius: 999px; padding: 6px 12px;
  transition: transform .12s ease, filter .12s ease;
}
.nv-demo-action:hover { transform: translateY(-1px); filter: brightness(1.08); }
.nv-demo-action .material-icons { font-size: 16px; }
.nv-demo-action.ghost {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1; padding: 6px 8px;
}

/* ----------------------------- Tour overlay ----------------------------- */
#nv-tour-root { position: fixed; inset: 0; z-index: 99995; pointer-events: none; display: none; }

/* Spotlight: el "agujero" se logra con un box-shadow gigante */
.nv-tour-spot {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(8, 12, 22, 0.62);
  outline: 2px solid rgba(59, 130, 246, 0.9);
  outline-offset: 2px;
  transition: all .28s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

/* Tooltip / popover */
.nv-tour-pop {
  position: fixed;
  width: 340px;
  max-width: calc(100vw - 28px);
  background: #ffffff;
  color: #1e293b;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  padding: 18px 18px 16px;
  pointer-events: auto;
  font-family: 'Inter', system-ui, sans-serif;
  transition: left .2s ease, top .2s ease;
}
[data-theme="dark"] .nv-tour-pop { background: #1e293b; color: #e2e8f0; }

.nv-tour-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.nv-tour-pop-head-right { display: flex; align-items: center; gap: 12px; }

/* ===== Nex — el guía IA (orbe animado) ===== */
.nv-nex-wrap { display: flex; align-items: center; gap: 10px; }
.nv-nex {
  width: 42px; height: 42px; border-radius: 50%; position: relative; flex-shrink: 0;
  background: radial-gradient(circle at 35% 28%, #6ba5ff 0%, #3b82f6 45%, #16a34a 120%);
  box-shadow: 0 4px 14px rgba(37,99,235,.4), inset 0 -3px 7px rgba(0,0,0,.18), inset 0 2px 5px rgba(255,255,255,.4);
  animation: nexFloat 3.2s ease-in-out infinite;
}
.nv-nex::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(59,130,246,.45); animation: nexHalo 2.8s ease-out infinite;
}
@keyframes nexHalo { 0% { transform: scale(.92); opacity: .7; } 70% { transform: scale(1.45); opacity: 0; } 100% { opacity: 0; } }
@keyframes nexFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.nv-nex .eye {
  position: absolute; top: 15px; width: 6.5px; height: 9px; background: #fff; border-radius: 4px;
  box-shadow: 0 0 4px rgba(255,255,255,.6); animation: nexBlink 4.5s infinite;
}
.nv-nex .eye.l { left: 11px; } .nv-nex .eye.r { right: 11px; }
@keyframes nexBlink { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.12); } }
.nv-nex .mouth {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 13px; height: 6px; border-bottom: 2px solid rgba(255,255,255,.9); border-radius: 0 0 9px 9px;
}
.nv-nex-id { display: flex; flex-direction: column; line-height: 1.15; }
.nv-nex-id .nm { font-size: 14px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.nv-nex-id .tg { font-size: 10.5px; font-weight: 600; color: #64748b; }
.nv-nex-id .tg b { color: #2563eb; font-weight: 800; }
/* En contextos oscuros (por si algún slide no es claro) */
.nv-tour-pop--slide:not(.is-light) .nv-nex-id .nm { color: #fff; }
.nv-tour-pop--slide:not(.is-light) .nv-nex-id .tg { color: #94a3b8; }
.nv-tour-pop--slide:not(.is-light) .nv-nex-id .tg b { color: #60a5fa; }

/* Humores de Nex: alarma (problema) y festejo (cierre) */
.nv-nex--alarm { background: radial-gradient(circle at 35% 28%, #fca5a5 0%, #ef4444 45%, #f59e0b 120%); box-shadow: 0 4px 14px rgba(239,68,68,.42), inset 0 -3px 7px rgba(0,0,0,.18), inset 0 2px 5px rgba(255,255,255,.4); }
.nv-nex--alarm::after { border-color: rgba(239,68,68,.5); }
.nv-nex--alarm .mouth { bottom: 9px; width: 11px; height: 4px; border-bottom: none; border-top: 2px solid rgba(255,255,255,.9); border-radius: 9px 9px 0 0; }
.nv-nex--happy { background: radial-gradient(circle at 35% 28%, #6ee7b7 0%, #16a34a 50%, #0891b2 120%); box-shadow: 0 4px 14px rgba(22,163,74,.42), inset 0 -3px 7px rgba(0,0,0,.18), inset 0 2px 5px rgba(255,255,255,.4); }
.nv-nex--happy::after { border-color: rgba(22,163,74,.5); }
.nv-nex--happy .mouth { bottom: 8px; width: 16px; height: 8px; }

/* Cursor "escribiendo" mientras Nex habla */
.nv-typing::after { content: '▍'; display: inline-block; margin-left: 1px; color: #2563eb; font-weight: 400; animation: nexCaret .7s steps(1) infinite; }
@keyframes nexCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ===== Pantalla de cierre del demo ===== */
.nv-tour-end {
  position: fixed; inset: 0; z-index: 99997; display: none;
  align-items: center; justify-content: center; padding: 24px; pointer-events: auto;
  background: radial-gradient(1000px 600px at 70% -10%, rgba(37,99,235,.18), transparent 60%),
              radial-gradient(800px 500px at 0% 110%, rgba(22,163,74,.16), transparent 55%),
              rgba(7, 11, 22, 0.9);
  backdrop-filter: blur(8px);
}
.nv-end-card {
  width: 100%; max-width: 460px; text-align: center;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 22px;
  padding: 38px 34px 30px; box-shadow: 0 40px 110px rgba(0,0,0,0.5);
}
.nv-end-card .nv-nex { margin: 0 auto 18px; }
.nv-nex--lg { width: 72px !important; height: 72px !important; }
.nv-nex--lg .eye { top: 26px; width: 11px; height: 15px; }
.nv-nex--lg .eye.l { left: 19px; } .nv-nex--lg .eye.r { right: 19px; }
.nv-nex--lg .mouth { bottom: 15px; width: 26px; height: 13px; }
.nv-end-card h2 { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin: 0 0 12px; }
.nv-end-card p { font-size: 14.5px; color: #475569; line-height: 1.6; margin: 0 0 24px; }
.nv-end-cta { display: flex; flex-direction: column; gap: 10px; }
.nv-end-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 700; border-radius: 11px; padding: 13px 18px; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.nv-end-btn .material-icons { font-size: 19px; }
.nv-end-btn.primary { color: #fff; border: none; background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 10px 26px rgba(37,99,235,.35); }
.nv-end-btn.primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.nv-end-btn.ghost { color: #475569; background: #fff; border: 1px solid #cbd5e1; }
.nv-end-btn.ghost:hover { background: #f8fafc; }

.nv-tour-progress {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #3b82f6;
}
.nv-tour-skip {
  font: inherit; font-size: 12px; color: #94a3b8;
  background: none; border: none; cursor: pointer; padding: 2px 4px;
}
.nv-tour-skip:hover { color: #64748b; text-decoration: underline; }

.nv-tour-pop h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.nv-tour-pop p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #475569; }
[data-theme="dark"] .nv-tour-pop p { color: #cbd5e1; }

.nv-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nv-tour-btn {
  font: inherit; font-size: 13px; font-weight: 700;
  border-radius: 9px; padding: 9px 16px; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.nv-tour-btn.primary {
  color: #fff; border: none;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
.nv-tour-btn.primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.nv-tour-btn.ghost {
  color: #475569; background: transparent;
  border: 1px solid #cbd5e1;
}
[data-theme="dark"] .nv-tour-btn.ghost { color: #cbd5e1; border-color: #475569; }
.nv-tour-btn.ghost:hover { background: rgba(148, 163, 184, 0.12); }

/* Flecha del tooltip */
.nv-tour-pop-arrow { position: absolute; width: 0; height: 0; }
.nv-tour-pop-arrow.bottom { top: -8px; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; }
.nv-tour-pop-arrow.top    { bottom: -8px; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; }
.nv-tour-pop-arrow.right  { left: -8px; top: 50%; transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #fff; }
.nv-tour-pop-arrow.left   { right: -8px; top: 50%; transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #fff; }
[data-theme="dark"] .nv-tour-pop-arrow.bottom { border-bottom-color: #1e293b; }
[data-theme="dark"] .nv-tour-pop-arrow.top    { border-top-color: #1e293b; }
[data-theme="dark"] .nv-tour-pop-arrow.right  { border-right-color: #1e293b; }
[data-theme="dark"] .nv-tour-pop-arrow.left   { border-left-color: #1e293b; }

/* ============================================================================
 * SLIDES NARRATIVOS (storytelling) — tarjeta grande sobre backdrop
 * ========================================================================== */
.nv-tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(1200px 700px at 70% -10%, rgba(30,58,138,0.55) 0%, transparent 60%),
              radial-gradient(900px 600px at 0% 110%, rgba(14,116,144,0.45) 0%, transparent 55%),
              rgba(7, 11, 20, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}
.nv-tour-spot { z-index: 2; }
.nv-tour-pop  { z-index: 3; }

/* ===== Barra de fases del ciclo de vida ===== */
.nv-phasebar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 99996; display: none; align-items: center; gap: 0;
  background: rgba(255,255,255,0.97); border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 8px 18px; box-shadow: 0 8px 28px rgba(15,23,42,0.16);
  backdrop-filter: blur(8px); pointer-events: auto; max-width: 94vw; overflow-x: auto;
}
.nv-phase { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #94a3b8; white-space: nowrap; }
.nv-phase .dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; transition: all .25s; flex-shrink: 0; }
.nv-phase .lb { transition: color .25s; }
.nv-phase + .nv-phase { margin-left: 8px; padding-left: 8px; position: relative; }
.nv-phase + .nv-phase::before { content: ''; position: absolute; left: -8px; width: 16px; height: 2px; background: #e2e8f0; }
.nv-phase.done { color: #16a34a; } .nv-phase.done .dot { background: #16a34a; }
.nv-phase.active { color: #2563eb; } .nv-phase.active .dot { background: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
@media (max-width: 720px) { .nv-phase .lb { display: none; } .nv-phasebar { padding: 8px 12px; } }

/* La tarjeta en modo slide: grande, centrada, tema oscuro premium */
.nv-tour-pop.nv-tour-pop--slide {
  width: min(720px, 94vw);
  max-width: 94vw;
  max-height: 88vh;
  overflow-y: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(160deg, rgba(17,24,39,0.98) 0%, rgba(15,23,42,0.98) 100%);
  border: 1px solid rgba(148,163,184,0.18);
  color: #e5e7eb;
  padding: 34px 38px 28px;
  border-radius: 20px;
  box-shadow: 0 40px 110px rgba(0,0,0,0.55);
}
.nv-tour-pop--slide .nv-tour-pop-arrow { display: none !important; }
.nv-tour-pop--slide .nv-tour-progress { color: #60a5fa; }
.nv-tour-pop--slide .nv-tour-skip { color: #94a3b8; }
.nv-tour-pop--slide h3 {
  font-size: 27px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 6px 0 14px;
}
.nv-tour-pop--slide p { color: #cbd5e1; font-size: 15px; line-height: 1.6; }
.nv-tour-pop--slide .nv-tour-foot { margin-top: 22px; }
.nv-tour-pop--slide .nv-tour-btn.ghost { color: #cbd5e1; border-color: rgba(148,163,184,0.4); }
.nv-tour-pop--slide .nv-tour-btn.ghost:hover { background: rgba(148,163,184,0.14); }

/* Tonos de acento del borde superior según el beat */
.nv-tour-pop--slide[data-tone="alarm"]  { border-top: 3px solid #ef4444; }
.nv-tour-pop--slide[data-tone="reframe"]{ border-top: 3px solid #3b82f6; }
.nv-tour-pop--slide[data-tone="close"]  { border-top: 3px solid #34d399; }

/* Kicker (antetítulo) */
.nv-slide-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #93c5fd; background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.28);
  padding: 5px 11px; border-radius: 999px;
}
.nv-slide-kicker.alarm { color: #fca5a5; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); }
.nv-slide-kicker.ok    { color: #6ee7b7; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); }

/* Grid de estadísticas (números duros) */
.nv-slide-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 4px; }
.nv-slide-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 12px; padding: 14px 12px; text-align: center;
}
.nv-slide-stat .num { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.1; }
.nv-slide-stat .num.red { color: #f87171; }
.nv-slide-stat .lbl { font-size: 11.5px; color: #94a3b8; margin-top: 6px; line-height: 1.35; }
@media (max-width: 560px) { .nv-slide-stats { grid-template-columns: 1fr; } }

/* Chips de empresas afectadas */
.nv-slide-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.nv-slide-chip {
  font-size: 13px; font-weight: 600; color: #e2e8f0;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(148,163,184,0.18);
  padding: 6px 12px; border-radius: 8px;
}

/* Escala de madurez */
.nv-maturity { display: flex; align-items: stretch; gap: 8px; margin: 16px 0 4px; }
.nv-mat-step {
  flex: 1; text-align: center; padding: 12px 8px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(148,163,184,0.14);
}
.nv-mat-step .t { font-size: 13.5px; font-weight: 700; color: #cbd5e1; }
.nv-mat-step .s { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.nv-mat-step.goal { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.45); }
.nv-mat-step.goal .t { color: #6ee7b7; }
.nv-mat-arrow { align-self: center; color: #64748b; font-size: 18px; }

/* Fila de 4 pilares */
.nv-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 6px; }
.nv-pillar {
  text-align: center; padding: 14px 8px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(148,163,184,0.16);
}
.nv-pillar .material-icons { font-size: 26px; color: #60a5fa; }
.nv-pillar.tech .material-icons { color: #34d399; }
.nv-pillar .pn { font-size: 12.5px; font-weight: 700; color: #e2e8f0; margin-top: 6px; }
.nv-pillar.tech { outline: 2px solid rgba(52,211,153,0.5); outline-offset: 0; }
@media (max-width: 560px) { .nv-pillars { grid-template-columns: repeat(2, 1fr); } }

/* Cita / hilo conductor */
.nv-slide-quote {
  margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid #3b82f6;
  background: rgba(59,130,246,0.08); border-radius: 0 10px 10px 0;
  font-size: 14px; color: #dbeafe; font-style: italic;
}
.nv-slide-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.nv-slide-cta .cta {
  flex: 1; min-width: 160px; text-align: center; padding: 12px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer; border: none;
}
.nv-slide-cta .cta.primary { color: #fff; background: linear-gradient(135deg, #10b981, #059669); }
.nv-slide-cta .cta.ghost { color: #cbd5e1; background: transparent; border: 1px solid rgba(148,163,184,0.4); }

/* Lista con checks (pilares Personas/Gobierno) */
.nv-slide-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin: 16px 0 4px; }
.nv-slide-list .it { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #d1d5db; }
.nv-slide-list .it .material-icons { font-size: 18px; color: #34d399; flex-shrink: 0; }
@media (max-width: 560px) { .nv-slide-list { grid-template-columns: 1fr; } }

/* Split de roles (Gobierno: Cliente vs NV) */
.nv-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 4px; }
.nv-role { background: rgba(255,255,255,0.04); border: 1px solid rgba(148,163,184,0.16); border-radius: 12px; padding: 14px; }
.nv-role .rt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #93c5fd; }
.nv-role .rd { font-size: 14px; color: #fff; margin-top: 5px; font-weight: 700; }
.nv-role .rs { font-size: 12px; color: #94a3b8; margin-top: 4px; line-height: 1.4; }
.nv-role.nv-role--nv { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); }
.nv-role.nv-role--nv .rt { color: #6ee7b7; }
@media (max-width: 560px) { .nv-roles { grid-template-columns: 1fr; } }

/* ============================================================================
 * SLIDES "WIDE" (diseños fieles: hub de pilares + rueda del ciclo)
 * ========================================================================== */
.nv-tour-pop.nv-tour-pop--slide.is-wide { width: min(1080px, 96vw); max-width: 96vw; }
.nv-tour-pop--slide .nv-slide-head { margin-bottom: 4px; }
.nv-tour-pop--slide .nv-slide-head h2 {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 6px 0 6px;
}
.nv-tour-pop--slide .nv-slide-head h2 .accent { color: #60a5fa; }
.nv-tour-pop--slide .nv-slide-head h2 .accent.green { color: #34d399; }
.nv-tour-pop--slide .nv-slide-head .lead { font-size: 13.5px; color: #94a3b8; line-height: 1.5; }

/* ---- HUB de 4 pilares ---------------------------------------------------- */
.nv-hub {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 240px) 1fr;
  grid-template-rows: auto auto;
  gap: 14px 32px;
  align-items: center;
  margin: 16px 0 4px;
  position: relative;
}
.nv-hub::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60%; height: 70%; background: radial-gradient(circle, rgba(59,130,246,0.10), transparent 70%);
  pointer-events: none;
}
.nv-hub-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(148,163,184,0.16);
  border-radius: 14px; padding: 14px 16px; position: relative;
}
.nv-hub-card.p1 { grid-column: 1; grid-row: 1; border-top: 3px solid #8b5cf6; }
.nv-hub-card.p2 { grid-column: 3; grid-row: 1; border-top: 3px solid #06b6d4; }
.nv-hub-card.p3 { grid-column: 1; grid-row: 2; border-top: 3px solid #3b82f6; }
.nv-hub-card.p4 { grid-column: 3; grid-row: 2; border-top: 3px solid #10b981; }
.nv-hub-card .pk { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #93c5fd; }
.nv-hub-card h4 { margin: 3px 0 1px; font-size: 16px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }
.nv-hub-card h4 .material-icons { font-size: 19px; color: #93c5fd; }
.nv-hub-card .sub { font-size: 12px; color: #94a3b8; margin-bottom: 8px; }
.nv-hub-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.nv-hub-card ul li { font-size: 12.5px; color: #d1d5db; padding-left: 14px; position: relative; line-height: 1.35; }
.nv-hub-card ul li::before { content: '•'; position: absolute; left: 0; color: #60a5fa; }
.nv-hub-core {
  grid-column: 2; grid-row: 1 / span 2; justify-self: center; text-align: center;
  width: 100%; aspect-ratio: 1; max-width: 230px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(59,130,246,0.18), rgba(15,23,42,0.6));
  border: 1px solid rgba(96,165,250,0.4); box-shadow: 0 0 60px rgba(59,130,246,0.25) inset, 0 0 40px rgba(59,130,246,0.15);
  padding: 16px;
}
.nv-hub-core .badge360 { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: #60a5fa; text-transform: uppercase; }
.nv-hub-core .brand { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 4px 0; }
.nv-hub-core .brand span { color: #34d399; }
.nv-hub-core .desc { font-size: 11px; color: #94a3b8; line-height: 1.4; }
@media (max-width: 720px) {
  .nv-hub { grid-template-columns: 1fr; }
  .nv-hub-card.p1, .nv-hub-card.p2, .nv-hub-card.p3, .nv-hub-card.p4 { grid-column: 1; grid-row: auto; }
  .nv-hub-core { grid-column: 1; grid-row: auto; max-width: 160px; }
}

/* ---- RUEDA del ciclo continuo ------------------------------------------- */
.nv-cycle { position: relative; width: min(480px, 60vh); height: min(480px, 60vh); margin: 14px auto 6px; }
.nv-cycle-ring { position: absolute; inset: 13%; border: 2px dashed rgba(148,163,184,0.28); border-radius: 50%; }
.nv-cycle-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 33%; height: 33%; border-radius: 50%; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(17,24,39,0.96), rgba(15,23,42,0.96));
  border: 1px solid rgba(148,163,184,0.22); padding: 8px;
}
.nv-cycle-core .ct { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #60a5fa; }
.nv-cycle-core .cv { font-size: 14px; font-weight: 800; color: #fff; margin: 2px 0; }
.nv-cycle-core .cs { font-size: 9px; color: #94a3b8; line-height: 1.3; }
.nv-cnode { position: absolute; transform: translate(-50%, -50%); width: 96px; text-align: center; }
.nv-cnode .dot {
  width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 5px;
  display: flex; align-items: center; justify-content: center; color: #fff; position: relative;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.nv-cnode .dot .material-icons { font-size: 23px; }
.nv-cnode .dot .n { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #0f172a; border: 1px solid rgba(255,255,255,0.25); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.nv-cnode .lbl { font-size: 12px; font-weight: 700; color: #e5e7eb; line-height: 1.1; }
.nv-cnode .sub { font-size: 10px; color: #94a3b8; line-height: 1.25; margin-top: 2px; }
.nv-cnode.c1 .dot { background: #3b82f6; } .nv-cnode.c2 .dot { background: #0e7490; }
.nv-cnode.c3 .dot { background: #7c3aed; } .nv-cnode.c4 .dot { background: #ea580c; }
.nv-cnode.c5 .dot { background: #b45309; } .nv-cnode.c6 .dot { background: #be185d; }
.nv-cnode.c7 .dot { background: #059669; }

/* Matriz de decisión (Gobierno: criticidad × madurez → acción) */
.nv-matrix { margin: 14px 0 4px; }
.nv-matrix .cap { font-size: 12px; color: #94a3b8; margin-bottom: 8px; }
.nv-matrix .cap b { color: #93c5fd; }
.nv-matrix table { width: 100%; border-collapse: separate; border-spacing: 5px; }
.nv-matrix th { font-size: 11px; color: #94a3b8; font-weight: 600; padding: 3px; text-align: center; }
.nv-matrix th.row { text-align: right; white-space: nowrap; padding-right: 8px; color: #cbd5e1; }
.nv-matrix th.corner { width: 64px; }
.nv-matrix td { text-align: center; padding: 9px 6px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #fff; }
.nv-matrix td.red    { background: rgba(239,68,68,0.85); }
.nv-matrix td.orange { background: rgba(245,158,11,0.9); }
.nv-matrix td.green  { background: rgba(16,185,129,0.85); }

/* ============================================================================
 * SLIDE CLARO (is-light) + HUB RICO DE 4 PILARES (.nv-hub2) — diseño fiel
 * ========================================================================== */
.nv-tour-pop--slide.is-light {
  width: min(1280px, 96vw); max-width: 96vw;
  background:
    radial-gradient(ellipse 60% 50% at 90% 0%, rgba(37,99,235,.07), transparent 60%),
    radial-gradient(ellipse 40% 40% at 5% 100%, rgba(22,163,74,.06), transparent 60%),
    #f4f6f9;
  color: #0f172a; border: 1px solid #e2e8f0; padding: 24px 32px 20px;
}
.nv-tour-pop--slide.is-light .nv-tour-progress { color: #2563eb; }
.nv-tour-pop--slide.is-light .nv-tour-skip { color: #94a3b8; }
.nv-tour-pop--slide.is-light .nv-tour-btn.ghost { color: #475569; border-color: #cbd5e1; }
.nv-tour-pop--slide.is-light .nv-tour-foot { margin-top: 12px; }

.nv-hub2 { --c-accent:#2563eb; --c-green:#16a34a; --c-cyan:#0891b2; --c-purple:#9333ea; }
.nv-hub2 .ph { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.nv-hub2 .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:var(--c-accent); letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.nv-hub2 .eyebrow::before { content:''; width:7px; height:7px; background:var(--c-green); border-radius:50%; }
.nv-hub2 h2 { font-size:30px; font-weight:800; color:#0f172a; letter-spacing:-.02em; line-height:1.08; margin:0 0 6px; }
.nv-hub2 h2 .accent { background:linear-gradient(135deg,var(--c-accent),var(--c-green)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nv-hub2 .subtitle { font-size:13.5px; color:#475569; max-width:820px; line-height:1.45; }
.nv-hub2 .brand { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.nv-hub2 .brand .row { display:flex; align-items:center; gap:8px; }
.nv-hub2 .brand img { height:34px; width:34px; object-fit:contain; }
.nv-hub2 .brand .bn { font-size:20px; font-weight:800; color:#334155; }
.nv-hub2 .brand .bt { font-size:10px; font-weight:600; color:#64748b; letter-spacing:1.4px; text-transform:uppercase; }

/* Diagrama */
.nv-hub2 .diagram { position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:0; padding:8px 130px; margin-top:14px; min-height:520px; }
.nv-hub2 .connections { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }

/* Hub central */
.nv-hub2 .hub-wrap { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:250px; height:250px; z-index:5; display:flex; align-items:center; justify-content:center; }
.nv-hub2 .hub-pulse { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,99,235,.35); animation:nvHubPulse 3.2s ease-out infinite; opacity:0; }
.nv-hub2 .hub-pulse.p2 { animation-delay:1.05s; border-color:rgba(22,163,74,.32); }
.nv-hub2 .hub-pulse.p3 { animation-delay:2.1s; border-color:rgba(37,99,235,.30); }
@keyframes nvHubPulse { 0%{transform:scale(.85);opacity:0} 18%{opacity:.85} 100%{transform:scale(1.6);opacity:0;border-width:1px} }
.nv-hub2 .hub-ring { position:absolute; inset:-8px; border-radius:50%; background:conic-gradient(from 90deg,#9333ea,#0891b2,#2563eb,#16a34a,#9333ea); padding:3px; animation:nvRingRotate 18s linear infinite; opacity:.55; }
.nv-hub2 .hub-ring::after { content:''; position:absolute; inset:3px; border-radius:50%; background:#f4f6f9; }
@keyframes nvRingRotate { to { transform:rotate(360deg); } }
.nv-hub2 .hub { position:relative; width:224px; height:224px; border-radius:50%; background:radial-gradient(circle at 35% 32%,#fff 0%,#f0f5ff 55%,#e0eaff 100%); border:3px solid #fff; box-shadow:0 0 0 1px rgba(37,99,235,.2),0 12px 36px rgba(37,99,235,.3),0 24px 60px rgba(22,163,74,.16),inset 0 -8px 20px rgba(37,99,235,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; z-index:2; text-align:center; }
.nv-hub2 .hub img { width:54px; height:54px; object-fit:contain; margin-bottom:8px; filter:drop-shadow(0 4px 10px rgba(37,99,235,.2)); }
.nv-hub2 .hub .tl { font-size:10.5px; font-weight:700; color:var(--c-accent); letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; display:inline-flex; align-items:center; gap:6px; }
.nv-hub2 .hub .tl::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--c-green); box-shadow:0 0 6px var(--c-green); animation:nvDotPulse 1.8s ease-in-out infinite; }
@keyframes nvDotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }
.nv-hub2 .hub .nm { font-size:26px; font-weight:800; letter-spacing:-.015em; line-height:1; margin-bottom:6px; }
.nv-hub2 .hub .nm .g { background:linear-gradient(135deg,var(--c-accent),var(--c-green)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nv-hub2 .hub .sb { font-size:11.5px; color:#64748b; line-height:1.35; max-width:170px; }

/* Pilares */
.nv-hub2 .pilar { position:relative; z-index:3; background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:18px 22px; box-shadow:0 1px 3px rgba(0,0,0,.04); width:360px; display:flex; flex-direction:column; gap:6px; }
.nv-hub2 .p1 { grid-column:1; grid-row:1; justify-self:start; align-self:start; border-left:5px solid var(--c-purple); }
.nv-hub2 .p2 { grid-column:2; grid-row:1; justify-self:end; align-self:start; border-left:5px solid var(--c-cyan); }
.nv-hub2 .p3 { grid-column:1; grid-row:2; justify-self:start; align-self:end; border-left:5px solid var(--c-accent); }
.nv-hub2 .p4 { grid-column:2; grid-row:2; justify-self:end; align-self:end; border-left:5px solid var(--c-green); }
.nv-hub2 .pilar-head { display:flex; align-items:center; gap:12px; }
.nv-hub2 .pilar-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nv-hub2 .pilar-icon .material-icons { font-size:22px; }
.nv-hub2 .p1 .pilar-icon { background:rgba(147,51,234,.1); color:var(--c-purple); }
.nv-hub2 .p2 .pilar-icon { background:rgba(8,145,178,.1); color:var(--c-cyan); }
.nv-hub2 .p3 .pilar-icon { background:rgba(37,99,235,.08); color:var(--c-accent); }
.nv-hub2 .p4 .pilar-icon { background:rgba(22,163,74,.1); color:var(--c-green); }
.nv-hub2 .pilar-num { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:1px; }
.nv-hub2 .p1 .pilar-num { color:var(--c-purple); } .nv-hub2 .p2 .pilar-num { color:var(--c-cyan); }
.nv-hub2 .p3 .pilar-num { color:var(--c-accent); } .nv-hub2 .p4 .pilar-num { color:var(--c-green); }
.nv-hub2 .pilar-title { font-size:19px; font-weight:800; color:#0f172a; line-height:1.1; }
.nv-hub2 .pilar-sub { font-size:13px; color:#64748b; margin-top:2px; }
.nv-hub2 .pilar-items { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.nv-hub2 .pilar-item { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#0f172a; line-height:1.4; }
.nv-hub2 .pilar-item::before { content:''; width:5px; height:5px; border-radius:50%; margin-top:7px; flex-shrink:0; }
.nv-hub2 .p1 .pilar-item::before { background:var(--c-purple); } .nv-hub2 .p2 .pilar-item::before { background:var(--c-cyan); }
.nv-hub2 .p3 .pilar-item::before { background:var(--c-accent); } .nv-hub2 .p4 .pilar-item::before { background:var(--c-green); }
.nv-hub2 .pilar-item strong { font-weight:700; }
@media (max-width: 980px) {
  .nv-hub2 .diagram { padding:8px 0; }
  .nv-hub2 .pilar { width:auto; }
}

/* ---- Overrides de tema CLARO para el contenido de los slides ------------- */
.nv-tour-pop--slide.is-light h3 { color:#0f172a; }
.nv-tour-pop--slide.is-light p { color:#475569; }
.nv-tour-pop--slide.is-light .nv-slide-head h2 { color:#0f172a; }
.nv-tour-pop--slide.is-light .nv-slide-head .lead { color:#475569; }
.nv-tour-pop--slide.is-light .nv-slide-kicker { color:#2563eb; background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.2); }
.nv-tour-pop--slide.is-light .nv-slide-kicker.alarm { color:#dc2626; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22); }
.nv-tour-pop--slide.is-light .nv-slide-kicker.ok { color:#16a34a; background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.22); }
.nv-tour-pop--slide.is-light .nv-slide-stat { background:#fff; border-color:#e2e8f0; }
.nv-tour-pop--slide.is-light .nv-slide-stat .num { color:#0f172a; }
.nv-tour-pop--slide.is-light .nv-slide-stat .num.red { color:#dc2626; }
.nv-tour-pop--slide.is-light .nv-slide-stat .lbl { color:#64748b; }
.nv-tour-pop--slide.is-light .nv-slide-chip { background:#fff; border-color:#e2e8f0; color:#334155; }
.nv-tour-pop--slide.is-light .nv-mat-step { background:#fff; border-color:#e2e8f0; }
.nv-tour-pop--slide.is-light .nv-mat-step .t { color:#334155; }
.nv-tour-pop--slide.is-light .nv-mat-step .s { color:#64748b; }
.nv-tour-pop--slide.is-light .nv-mat-step.goal { background:rgba(22,163,74,.1); border-color:rgba(22,163,74,.42); }
.nv-tour-pop--slide.is-light .nv-mat-step.goal .t { color:#16a34a; }
.nv-tour-pop--slide.is-light .nv-mat-arrow { color:#94a3b8; }
.nv-tour-pop--slide.is-light .nv-slide-quote { background:rgba(37,99,235,.06); color:#334155; border-left-color:#2563eb; }
.nv-tour-pop--slide.is-light .nv-slide-list .it { color:#334155; }
/* Rueda del ciclo en claro */
.nv-tour-pop--slide.is-light .nv-cycle-ring { border-color:rgba(100,116,139,.25); }
.nv-tour-pop--slide.is-light .nv-cycle-core { background:#fff; border-color:#e2e8f0; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.nv-tour-pop--slide.is-light .nv-cycle-core .ct { color:#2563eb; }
.nv-tour-pop--slide.is-light .nv-cycle-core .cv { color:#0f172a; }
.nv-tour-pop--slide.is-light .nv-cycle-core .cs { color:#64748b; }
.nv-tour-pop--slide.is-light .nv-cnode .lbl { color:#0f172a; }
.nv-tour-pop--slide.is-light .nv-cnode .sub { color:#64748b; }
.nv-tour-pop--slide.is-light .nv-cnode .dot .n { background:#fff; color:#334155; border-color:rgba(0,0,0,.15); }