/*==============================================================================
  MSM ACADEMY — DESIGN TOKENS & PRIMITIVAS
  ------------------------------------------------------------------------------
  Extraído de bkp_home/css/style.css SIN modificar el home.
  Este archivo es la única fuente de verdad del look MSM para las páginas
  de WordPress (BuddyBoss + Tutor LMS).

  Todo va cercado en `body.msm-ui` para:
    1. Ganar especificidad sobre el <style> inline de BuddyBoss/Tutor sin !important
    2. No tocar jamás wp-admin ni el home standalone

  Orden de carga: msm-tokens → msm-dark → msm-shell → [msm-auth|msm-tutor|msm-community]
==============================================================================*/

/*------------------------------------------------------------------------------
  1. TOKENS
------------------------------------------------------------------------------*/
body.msm-ui {
  /* --- Superficies (escala oscura) --- */
  --msm-bg:            #1a1d1a;  /* fondo base, igual que el home */
  --msm-surface-1:     #16180f;  /* panel elevado nivel 1 */
  --msm-surface-2:     #131009;  /* card sólida — mismo tono que .price-card */
  --msm-surface-3:     #0E0C09;  /* panel más profundo — mismo tono que .mega-panel */
  --msm-surface-hover: #1f2118;

  /* --- Texto --- */
  --msm-fg:        #F6F1E6;
  --msm-muted:     rgba(246, 241, 230, .60);
  --msm-muted-2:   rgba(246, 241, 230, .45);
  --msm-muted-3:   rgba(246, 241, 230, .30);

  /* --- Acento --- */
  --msm-gold:       #d26e23;
  --msm-gold-hover: #fb8b36;
  --msm-gold-soft:  #eb761b;   /* el accent que ya tenía configurado BuddyBoss */
  --msm-gold-rgb:   210, 110, 35;

  /* --- Bordes --- */
  --msm-line:   rgba(246, 241, 230, .12);
  --msm-line-2: rgba(246, 241, 230, .16);
  --msm-line-3: rgba(246, 241, 230, .24);

  /* --- Violetas de los orbes --- */
  --msm-orb-1: rgba(94, 44, 201, .45);
  --msm-orb-2: rgba(127, 75, 241, .35);
  --msm-orb-3: rgba(75, 81, 233, .30);

  /* --- Estado --- */
  --msm-success: #3fbf6a;
  --msm-danger:  #e05252;
  --msm-warning: #edb100;

  /* --- Tipografía --- */
  --msm-serif:   'Playfair Display', Georgia, serif;
  --msm-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --msm-mono:    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Radios --- */
  --msm-r-sm:   8px;
  --msm-r-md:   12px;
  --msm-r-lg:   16px;
  --msm-r-xl:   20px;
  --msm-r-pill: 99px;

  /* --- Sombras --- */
  --msm-shadow-card:  0 18px 44px rgba(0, 0, 0, .42);
  --msm-shadow-lift:  0 26px 60px rgba(0, 0, 0, .55);
  --msm-shadow-glow:  0 10px 34px rgba(var(--msm-gold-rgb), .30);

  /* --- Ritmo --- */
  --msm-gutter: 48px;
  --msm-ease:   cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 800px) {
  body.msm-ui { --msm-gutter: 20px; }
}

/*------------------------------------------------------------------------------
  2. BASE
------------------------------------------------------------------------------*/
body.msm-ui {
  background: var(--msm-bg);
  color: var(--msm-fg);
  font-family: var(--msm-display);
}

body.msm-ui ::selection {
  background: rgba(var(--msm-gold-rgb), .35);
  color: #fff;
}

/* Scrollbar en tono MSM (WebKit + Firefox) */
body.msm-ui { scrollbar-color: rgba(var(--msm-gold-rgb), .55) var(--msm-surface-3); }
body.msm-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
body.msm-ui ::-webkit-scrollbar-track { background: var(--msm-surface-3); }
body.msm-ui ::-webkit-scrollbar-thumb {
  background: rgba(var(--msm-gold-rgb), .45);
  border-radius: var(--msm-r-pill);
  border: 2px solid var(--msm-surface-3);
}
body.msm-ui ::-webkit-scrollbar-thumb:hover { background: rgba(var(--msm-gold-rgb), .75); }

/*------------------------------------------------------------------------------
  3. BLUR ORBS
  Idéntico al home. `.msm-orbs` se inyecta por JS o por PHP en las secciones
  que lo piden; siempre aria-hidden y detrás del contenido.
------------------------------------------------------------------------------*/
.msm-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.msm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.msm-orb--1 {
  width: 560px; height: 560px;
  top: -180px; right: -140px;
  background: radial-gradient(circle, var(--msm-orb-1), transparent 70%);
  animation: msmOrbFloat1 24s ease-in-out infinite;
}

.msm-orb--2 {
  width: 440px; height: 440px;
  bottom: -160px; left: -120px;
  background: radial-gradient(circle, var(--msm-orb-2), transparent 70%);
  animation: msmOrbFloat2 28s ease-in-out infinite;
}

.msm-orb--3 {
  width: 360px; height: 360px;
  top: 35%; left: 52%;
  background: radial-gradient(circle, var(--msm-orb-3), transparent 70%);
  animation: msmOrbFloat3 20s ease-in-out infinite;
}

/* Variante cálida: para bloques donde el violeta competiría con el gold */
.msm-orbs--warm .msm-orb--1 { background: radial-gradient(circle, rgba(210, 110, 35, .32), transparent 70%); }
.msm-orbs--warm .msm-orb--2 { background: radial-gradient(circle, rgba(251, 139, 54, .22), transparent 70%); }
.msm-orbs--warm .msm-orb--3 { background: radial-gradient(circle, var(--msm-orb-2), transparent 70%); }

@keyframes msmOrbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 60px) scale(1.12); }
}
@keyframes msmOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, -40px) scale(1.08); }
}
@keyframes msmOrbFloat3 {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-50%, -50px) scale(.92); }
}

@media (max-width: 800px) {
  .msm-orb--1 { width: 320px; height: 320px; }
  .msm-orb--2 { width: 260px; height: 260px; }
  .msm-orb--3 { width: 220px; height: 220px; }
}

/*------------------------------------------------------------------------------
  4. PARTÍCULAS
  El canvas lo pinta msm-fx.js reutilizando el algoritmo de bkp_home/js/main.js
------------------------------------------------------------------------------*/
.msm-particles {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: clamp(220px, 32vw, 420px);
  height: clamp(160px, 26vw, 280px);
}
.msm-particles--tl { top: 0;    left: 0; }
.msm-particles--tr { top: 0;    right: 0; }
.msm-particles--bl { bottom: 0; left: 0; }
.msm-particles--br { bottom: 0; right: 0; }

@media (max-width: 800px) {
  .msm-particles { width: 60vw; height: 140px; }
  .msm-particles--tr, .msm-particles--bl { display: none; }
}

/*------------------------------------------------------------------------------
  5. PRIMITIVAS TIPOGRÁFICAS
------------------------------------------------------------------------------*/

/* Eyebrow / kicker — el patrón mono+tracking que usa todo el home */
.msm-eyebrow {
  display: inline-block;
  font: 700 11px var(--msm-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--msm-gold);
}

/* Título de sección con la itálica serif en gold */
.msm-title {
  margin: 0;
  font: 800 clamp(30px, 4.2vw, 54px)/1.06 var(--msm-display);
  letter-spacing: -.02em;
  color: var(--msm-fg);
}
.msm-title em {
  font: italic 500 1em var(--msm-serif);
  color: var(--msm-gold);
}

.msm-lede {
  margin: 18px 0 0;
  font: 300 17px/1.65 var(--msm-display);
  color: var(--msm-muted);
  max-width: 56ch;
}

/*------------------------------------------------------------------------------
  6. BOTONES
------------------------------------------------------------------------------*/
.msm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 700 13px var(--msm-display);
  padding: 12px 22px;
  border-radius: var(--msm-r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s var(--msm-ease), color .25s var(--msm-ease),
              border-color .25s var(--msm-ease), transform .25s var(--msm-ease),
              box-shadow .25s var(--msm-ease);
}
.msm-btn:hover { transform: translateY(-2px); }
.msm-btn:focus-visible {
  outline: 2px solid var(--msm-gold);
  outline-offset: 3px;
}

.msm-btn--gold {
  background: var(--msm-gold);
  border-color: var(--msm-gold);
  color: #fff !important;
}
.msm-btn--gold:hover {
  background: var(--msm-gold-hover);
  border-color: var(--msm-gold-hover);
  color: #fff !important;
  box-shadow: var(--msm-shadow-glow);
}

.msm-btn--ghost {
  background: transparent;
  border-color: var(--msm-line-3);
  color: var(--msm-fg);
}
.msm-btn--ghost:hover {
  border-color: var(--msm-gold);
  color: var(--msm-gold);
}

.msm-btn--lg { font-size: 15px; padding: 17px 34px; }

/*------------------------------------------------------------------------------
  7. SUPERFICIES
------------------------------------------------------------------------------*/
.msm-card {
  background: var(--msm-surface-2);
  border: 1px solid var(--msm-line);
  border-radius: var(--msm-r-xl);
  position: relative;
  overflow: hidden;
}

/* Hairline de gradiente en el borde superior — el detalle del footer del home */
.msm-card--edge::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--msm-gold), var(--msm-gold-hover), var(--msm-orb-1));
}

/* Sección que hospeda orbes/partículas: necesita contexto de apilamiento */
.msm-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.msm-stage > *:not(.msm-orbs):not(.msm-particles) { position: relative; z-index: 1; }

/* Velo degradado sobre imágenes — el patrón de .mega-preview-overlay */
.msm-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(14, 12, 9, .96) 8%,
              rgba(14, 12, 9, .55) 52%,
              transparent 100%);
  pointer-events: none;
}

/*------------------------------------------------------------------------------
  8. ACCESIBILIDAD
------------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .msm-orb { animation: none; }
  body.msm-ui *,
  body.msm-ui *::before,
  body.msm-ui *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* El JS de partículas ya respeta prefers-reduced-motion y no dibuja el canvas */

/*==============================================================================
  9. BANDAS DE SECCIÓN
  ------------------------------------------------------------------------------
  El home alterna bloques oscuros con bloques BLANCOS que llevan los mismos
  orbes violeta difuminados por debajo (`.blk_amigos`, `.footer`). Ese respiro
  es lo que impide que el dark se vuelva monótono.

  Se replica aquí como utilidad para poder intercalarlo en cualquier pantalla,
  respetando el ritmo del home:  dark → BLANCO → dark → footer blanco.
==============================================================================*/
.msm-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 104px var(--msm-gutter);
}
.msm-band > .msm-band-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
}

/* --- Banda clara --- */
.msm-band--light {
  background: #fff;
  color: #14110a;
}
/* Los orbes violeta quedan muy tenues sobre blanco: es lo que da el lavado sutil */
.msm-band--light .msm-orb { filter: blur(110px); opacity: .42; }
.msm-band--light .msm-orb--1 { background: radial-gradient(circle, rgba(94, 44, 201, .38), transparent 70%); }
.msm-band--light .msm-orb--2 { background: radial-gradient(circle, rgba(127, 75, 241, .30), transparent 70%); }
.msm-band--light .msm-orb--3 { background: radial-gradient(circle, rgba(210, 110, 35, .22), transparent 70%); }

.msm-band--light .msm-eyebrow { color: var(--msm-gold); }
.msm-band--light .msm-title   { color: #14110a; }
.msm-band--light .msm-title em{ color: var(--msm-gold); }
.msm-band--light .msm-lede    { color: rgba(0, 0, 0, .58); }

/* Filo de gradiente arriba, el mismo gesto que abre el footer del home */
.msm-band--light::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--msm-gold), var(--msm-gold-hover), rgba(94, 44, 201, .15));
}

/* --- Rejilla de propuestas de valor --- */
.msm-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 54px;
}
.msm-prop-num {
  display: block;
  font: 400 12px var(--msm-mono);
  letter-spacing: .14em;
  color: var(--msm-gold);
  margin-bottom: 16px;
}
.msm-prop-title {
  margin: 0 0 10px;
  font: 700 21px/1.25 var(--msm-display);
  letter-spacing: -.015em !important;
  color: #14110a !important;
}
.msm-prop-text {
  margin: 0;
  font: 300 14.5px/1.7 var(--msm-display);
  color: rgba(0, 0, 0, .58);
}

/* --- Banda oscura de cierre, antes del footer --- */
.msm-band--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  background: url(../../bkp_home/img/bgbann_unete.png) center/cover no-repeat, var(--msm-bg);
  color: var(--msm-fg);
  text-align: center;
  padding: 92px var(--msm-gutter);
  border-top: 1px solid var(--msm-line);
}
.msm-band--cta > .msm-band-inner { z-index: 2; width: 100%; }
/* Mosaico en loop — calcado de `.cta-strip` del home */
.msm-cta-strip {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  pointer-events: none;
}
.msm-cta-strip-track { display: flex; animation: msmCtaMarquee 32s linear infinite; }
.msm-cta-strip-track img { height: 240px; width: auto; max-width: none; flex: none; display: block; }
@keyframes msmCtaMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Resplandor gold central — calcado de `.cta-glow` del home */
.msm-band--cta::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 460px; height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              rgba(var(--msm-gold-rgb), .45) 0%,
              rgba(var(--msm-gold-rgb), 0) 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 1;
}
.msm-band--cta .msm-cta-title {
  margin: 0;
  font: 800 clamp(28px, 4vw, 48px)/1.1 var(--msm-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
}
.msm-band--cta .msm-cta-title em { font: italic 500 1em var(--msm-serif); color: var(--msm-gold-hover); text-transform: none; }
.msm-band--cta .msm-btn { margin-top: 26px; }

@media (max-width: 900px) {
  .msm-band { padding: 68px var(--msm-gutter); }
  .msm-props { grid-template-columns: 1fr; gap: 34px; margin-top: 38px; }
  .msm-band--cta { padding: 64px var(--msm-gutter); min-height: 280px; }
  .msm-cta-strip-track img { height: 170px; }
  .msm-band--cta::after { width: 300px; height: 200px; }
}