/* =========================================================================
   MINDORBIT IA — KINETIC THEME (capa global) v1.2
   Refactor del bundle "design_handoff_mindorbit_kinetic" (inline → clases).
   Instalar en: wp-content/themes/mindorbit/assets/kinetic/kinetic.css
   Encolar vía functions.php (ver functions-enqueue-snippet.php).
   Reemplaza la paleta Orbital V3 (#8b5cf6) por la paleta Kinetic (#9A00FF).
   ========================================================================= */

:root{
  --k-bg:#08060E;          /* fondo casi-negro */
  --k-panel:#0E0A1A;       /* cards sólidas (stats/program) */
  --k-ink:#F4F1FA;         /* texto primario */
  --k-muted:#A99FBE;       /* texto secundario / labels mono */
  --k-line:rgba(255,255,255,.12);
  --k-accent:#9A00FF;      /* PÚRPURA DE MARCA (nuevo estándar) */
  --k-accent2:#B65CFF;     /* púrpura claro: headlines accent, números, nodos */
  --k-cream:#F4F1FA;
  --k-font:'Space Grotesk',system-ui,sans-serif;
  --k-mono:'JetBrains Mono',ui-monospace,monospace;
  --k-radius:24px;
}

/* ---------- Base global (re-skinea el sitio sin tocar contenido) ---------- */
body.k-theme{ background:var(--k-bg); color:var(--k-ink); font-family:var(--k-font);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.k-theme ::selection{ background:var(--k-accent); color:#fff; }

/* Star field fijo detrás de todo el contenido */
#k-stars{ position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; filter:blur(.5px); }
/* Grain overlay (no duplica si la página ya trae .mo-grain) */
.k-grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* El contenido del tema debe quedar por encima del star field */
body.k-theme [data-k-layer]{ position:relative; z-index:2; }

/* ---------- Tipografía ---------- */
.k-eyebrow{ display:inline-block; font-family:var(--k-mono); font-size:12px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--k-panel); border:1px solid var(--k-line); color:var(--k-accent2);
  padding:7px 14px; border-radius:100px; }
.k-mono{ font-family:var(--k-mono); letter-spacing:.06em; text-transform:uppercase; }
.k-accent2{ color:var(--k-accent2); }

/* ---------- Botones ---------- */
.k-btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:600; border-radius:100px; padding:14px 24px; cursor:pointer;
  background:var(--k-accent); color:#fff; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease; }
.k-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--k-accent2); }
.k-btn:active{ transform:translate(0,0); box-shadow:0 0 0 var(--k-accent2); }
.k-btn--ghost{ background:transparent; color:var(--k-ink); border:1px solid var(--k-line); }

/* ---------- Cards (sólidas + tilt) ---------- */
.k-card{ background:var(--k-panel); border:1px solid var(--k-line);
  border-radius:var(--k-radius); padding:30px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.k-card:hover{ transform:rotate(0deg) translateY(-6px) !important;
  box-shadow:8px 12px 0 rgba(182,92,255,.45); }
.k-tilt-1{ transform:rotate(-1.5deg);} .k-tilt-2{ transform:rotate(1.2deg);}
.k-tilt-3{ transform:rotate(-1deg);}  .k-tilt-4{ transform:rotate(1.6deg);}

/* ---------- Glass cards (frosted) ---------- */
.k-glass{ background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--k-radius); padding:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10); }
.k-glass--purple{ background:linear-gradient(155deg,rgba(154,0,255,.48),rgba(154,0,255,.28));
  color:#fff; border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }

/* ---------- CTA panel (glass púrpura grande) ---------- */
.k-cta{ background:linear-gradient(150deg,rgba(154,0,255,.26),rgba(154,0,255,.12));
  -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2);
  color:#fff; border:1px solid rgba(182,92,255,.38); border-radius:36px;
  padding:80px 56px; position:relative; overflow:hidden; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px -40px rgba(154,0,255,.55); }

/* ---------- Service rows (Aprende / Explora / Implementa) ---------- */
.k-srv{ display:flex; align-items:center; gap:20px; padding:24px 0;
  border-top:1px solid var(--k-line);
  transition:padding-left .3s cubic-bezier(.2,.8,.2,1), color .3s ease; }
.k-srv:hover{ padding-left:28px; color:var(--k-accent2); }
.k-srv:hover .k-arrow{ opacity:1; transform:translateX(0); }
.k-arrow{ opacity:0; transform:translateX(-12px); transition:all .3s ease; }

/* ---------- Marquees (full-bleed, rotados) ---------- */
.k-marquee{ width:104%; margin-left:-2%; overflow:hidden; white-space:nowrap; }
.k-marquee--cream{ background:var(--k-cream); color:#0E0A1A; transform:rotate(-1deg); }
.k-marquee--purple{ background:var(--k-accent); color:#fff; transform:rotate(1deg); }
.k-marquee__track{ display:inline-flex; animation:k-mq 26s linear infinite; }
.k-marquee--rev .k-marquee__track{ animation-direction:reverse; }

/* ---------- Keyframes ---------- */
@keyframes k-mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes k-spinSlow{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes k-nodePulse{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* ---------- Hero orbital instrument ---------- */
.k-instrument{ position:relative; width:100%; max-width:600px; aspect-ratio:1/1; margin:auto; }
.k-instrument .k-mark{ position:absolute; inset:0; margin:auto; width:32%; height:auto;
  filter:drop-shadow(0 0 22px rgba(154,0,255,.55)); }

/* ---------- Accesibilidad / rendimiento ---------- */
@media (prefers-reduced-motion: reduce){
  #k-stars{ display:none; }
  .k-marquee__track,[class*="k-spin"],[style*="nodePulse"]{ animation:none !important; }
}

/* =========================================================================
   BRIDGE — Orbital V3 → KINETIC (Sesión 11)
   Re-skin tipográfico/cromático de las clases .mo-* existentes, GLOBAL,
   sin tocar el markup de cada página. Carga después de main.css (prio 20).
   ========================================================================= */

/* Red de seguridad: variables del tema → Kinetic (para páginas que usan var(--mo-*)) */
:root{
  --mo-violet:#9A00FF; --mo-violet-dim:#7A00CC;
  --mo-gray-900:#08060E; --mo-dark-card:#0E0A1A; --mo-dark-card-2:#141022;
  --mo-font-display:'Space Grotesk',sans-serif;
}

/* Títulos: serif → Space Grotesk Kinetic */
body.k-theme .mo-h1,
body.k-theme .mo-h2,
body.k-theme .mo-cta-h2,
body.k-theme .mo-card-title{
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.02em;
}
body.k-theme .mo-h1{ font-weight:700 !important; letter-spacing:-.03em; }

/* Cuerpo / subtítulos en Space Grotesk */
body.k-theme .mo-hero-sub,
body.k-theme .mo-section-sub,
body.k-theme .mo-card-text,
body.k-theme .mo-testi-quote,
body.k-theme .mo-faq-answer{
  font-family:'Space Grotesk',sans-serif !important;
}

/* Labels / eyebrows / tags → JetBrains Mono */
body.k-theme .mo-eyebrow-badge,
body.k-theme .mo-section-eyebrow,
body.k-theme .mo-card-label,
body.k-theme .mo-card-badge,
body.k-theme .mo-card-accent,
body.k-theme .mo-stat-label,
body.k-theme .mo-program-includes-label,
body.k-theme .mo-cred-label,
body.k-theme .mo-testi-attr{
  font-family:'JetBrains Mono',monospace !important;
}

/* Números de stats grandes en Space Grotesk bold */
body.k-theme .mo-stat-num{
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:700 !important; letter-spacing:-.03em;
}

/* =========================================================================
   COMPONENT BRIDGE — interacciones/estilos Kinetic sobre .mo-* (v1.2)
   Las clases .mo-btn-*/.mo-card/.mo-cta-inner NO tienen estilos inline,
   así que se re-skinnean limpio por CSS. Carga después de main.css (prio 20).
   ========================================================================= */

/* Botones: agregar el hover Kinetic (lift + sombra dura). Base ya es pill+#9A00FF. */
body.k-theme .mo-btn-fill,
body.k-theme .mo-btn-outline{
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
body.k-theme .mo-btn-fill:hover,
body.k-theme .mo-btn-outline:hover{
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 var(--k-accent2);
}
body.k-theme .mo-btn-outline:hover{ border-color: var(--k-accent2); }
body.k-theme .mo-btn-fill:active,
body.k-theme .mo-btn-outline:active{ transform: translate(0,0); box-shadow: 0 0 0 var(--k-accent2); }

/* Cards: lift + sombra dura en hover */
body.k-theme .mo-card{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease;
}
body.k-theme .mo-card:hover{
  transform: translateY(-6px);
  box-shadow: 8px 12px 0 rgba(182,92,255,.45);
  border-color: rgba(182,92,255,.5);
}

/* Card destacada → glass púrpura "winner" */
body.k-theme .mo-card.highlight{
  background: linear-gradient(155deg, rgba(154,0,255,.30), rgba(154,0,255,.14)) !important;
  border: 1px solid rgba(182,92,255,.45) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}

/* CTA final → panel glass púrpura contenido (en .mo-cta-inner) */
body.k-theme .mo-cta-inner{
  background: linear-gradient(150deg, rgba(154,0,255,.26), rgba(154,0,255,.12));
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(182,92,255,.38);
  border-radius: 36px;
  padding: 56px 40px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px -40px rgba(154,0,255,.55);
}

/* Eyebrows → pill Kinetic con marcador */
body.k-theme .mo-section-eyebrow,
body.k-theme .mo-eyebrow-badge{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--k-panel); border: 1px solid var(--k-line);
  color: var(--k-accent2) !important;
  padding: 7px 14px; border-radius: 100px; font-size: .7rem;
}