/* ==========================================================================
   MBSoft · Tokens del sistema de diseño
   Extraídos de la propuesta aprobada (index.html). Cualquier color, sombra o
   tipografía que se use en el sitio debe salir de aquí, no escribirse a mano.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --mb-navy:           #162450; /* títulos sobre fondo claro y secciones azules */
  --mb-navy-deep:      #052E5C; /* fondo oscuro del hero de @RISK */
  --mb-ink:            #0B1838; /* fondo del hero de portada y del cierre */
  --mb-ink-2:          #0F1F45; /* franja de productos y paneles oscuros */
  --mb-blue:           #2563EB; /* azul de acción: menú, enlaces, foco */
  --mb-blue-soft:      #7AA7FF; /* acento sobre fondo oscuro */
  --mb-sky:            #8ECBF0; /* acento claro (@RISK) */
  --mb-teal:           #0A6B77; /* antetítulos de las secciones de público */

  /* --- Llamados a la acción --------------------------------------------- */
  --mb-orange:         #E67E22;
  --mb-orange-dark:    #B35A0F; /* hover / texto naranja sobre blanco */
  --mb-orange-light:   #F6A15E;
  --mb-gold:           #E8A020; /* detalles, puntos, destacados */

  /* --- Texto ------------------------------------------------------------ */
  --mb-text:           #2C3E50; /* cuerpo sobre fondo claro */
  --mb-text-soft:      #5F6B80; /* secundario sobre fondo claro */
  --mb-text-mute:      #9FB0C6; /* terciario, usar con cuidado (contraste bajo) */
  --mb-text-on-dark:   #A8C4E0; /* cuerpo sobre fondo oscuro */
  --mb-text-on-dark-2: #C8D8EC; /* navegación sobre fondo oscuro */

  /* --- Superficies ------------------------------------------------------ */
  --mb-white:          #FFFFFF;
  --mb-surface:        #F4F6FA; /* gris de sección alterna */
  --mb-border:         #DDE3EF;

  /* --- Acentos por producto --------------------------------------------- */
  --mb-xlstat:         #8F179E;
  --mb-xlstat-deep:    #3F1359;
  --mb-xlstat-light:   #E3C9EC;

  --mb-nvivo:          #A32FB4;
  --mb-nvivo-deep:     #4A0F55;
  --mb-nvivo-light:    #E7CDEF;

  --mb-risk:           #E67E22;
  --mb-risk-deep:      #052E5C;
  --mb-risk-light:     #8ECBF0;

  /* --- Tipografía ------------------------------------------------------- */
  --mb-font-logo:      'Montserrat', system-ui, sans-serif;
  --mb-font-head:      'Space Grotesk', system-ui, sans-serif;
  --mb-font-body:      'IBM Plex Sans', system-ui, sans-serif;

  /* Escalas fluidas: mismos clamp() de la propuesta */
  --mb-h1:             clamp(34px, 4.4vw, 58px);
  --mb-h2:             clamp(30px, 3.4vw, 42px);
  --mb-h3:             19px;
  --mb-lead:           18.5px;
  --mb-body:           16.5px;
  --mb-small:          14px;
  --mb-eyebrow:        12.5px;

  /* --- Ritmo y forma ---------------------------------------------------- */
  --mb-wrap:           1240px; /* ancho máximo de contenido */
  --mb-gutter:         28px;   /* padding lateral del contenedor */
  --mb-section-y:      104px;  /* padding vertical de sección, como el diseño */

  --mb-radius-sm:      8px;
  --mb-radius:         14px;
  --mb-radius-lg:      18px;
  --mb-radius-pill:    999px;

  --mb-shadow-card:    0 24px 54px rgba(11, 24, 56, .10);
  --mb-shadow-pop:     0 26px 60px rgba(11, 24, 56, .26);
  --mb-shadow-cta:     0 14px 34px rgba(230, 126, 34, .40);
  --mb-shadow-cta-hi:  0 22px 46px rgba(230, 126, 34, .55);

  --mb-ease:           cubic-bezier(.22, .61, .36, 1);
  --mb-dur:            .3s;
}

/* Fondos oscuros por página. El diseño usa un tono propio por producto, más
   oscuro en el hero y el cierre que en las secciones invertidas intermedias. */
body {
  --mb-hero-bg: var(--mb-ink);
  --mb-dark-bg: var(--mb-navy);
}
/* Tres tonos oscuros por producto: el del hero y el cierre, el de las
   secciones invertidas y el de la franja de acompañamiento, que en el diseño
   es un cuarto tono distinto. */
.mb-theme-xlstat { --mb-hero-bg: #26093C; --mb-dark-bg: #3F1359; --mb-acomp-bg: #34114F; --mb-barra: var(--mb-xlstat); --mb-tabla-col: #8F179E; --mb-section-y: 96px; }
.mb-theme-nvivo  { --mb-hero-bg: #2B0733; --mb-dark-bg: #4A0F55; --mb-acomp-bg: #4A0F55; --mb-barra: #A32FB4; --mb-tabla-col: #A32FB4; --mb-section-y: 96px; }
.mb-theme-risk   { --mb-hero-bg: #052E5C; --mb-dark-bg: #052E5C; --mb-acomp-bg: #06375F; --mb-barra: #E67E22; --mb-tabla-col: #2E7DB8; --mb-section-y: 96px; }

/* Página de producto: se pone la clase en el <body> (Elementor → Configuración
   de página → clases CSS, o la clase de plantilla de Astra) y todos los
   componentes toman el acento correcto sin duplicar CSS. */
.mb-theme-xlstat { --mb-accent: var(--mb-xlstat); --mb-accent-deep: var(--mb-xlstat-deep); --mb-accent-light: var(--mb-xlstat-light); }
.mb-theme-nvivo  { --mb-accent: var(--mb-nvivo);  --mb-accent-deep: var(--mb-nvivo-deep);  --mb-accent-light: var(--mb-nvivo-light); }
.mb-theme-risk   { --mb-accent: var(--mb-risk);   --mb-accent-deep: var(--mb-risk-deep);   --mb-accent-light: var(--mb-risk-light); }
body             { --mb-accent: var(--mb-blue);   --mb-accent-deep: var(--mb-navy);        --mb-accent-light: var(--mb-blue-soft); }

/* Color de las frases que van en negrita dentro del "Qué es".
   No sirve --mb-accent: en @RISK el acento es el naranja #E67E22, que sobre
   blanco da 2,85:1 y no se puede usar como texto. Por eso cada producto
   declara el suyo, y en @RISK es el azul (5,2:1). */
.mb-theme-xlstat { --mb-destacado: var(--mb-xlstat); }
.mb-theme-nvivo  { --mb-destacado: var(--mb-nvivo); }
.mb-theme-risk   { --mb-destacado: var(--mb-blue); }
body             { --mb-destacado: var(--mb-blue); }