/* ==========================================================================
   MBSoft · Páginas de producto
   Las tres comparten estructura; el color de acento lo pone la clase
   mb-theme-* del body (ver tokens.css).
   ========================================================================== */

/* --- Fondo del hero de producto -------------------------------------------- */
/* Un círculo con el color del producto y la cuadrícula punteada, como en la
   propuesta. Los valores son los de XLSTAT; NVivo y @RISK solo cambian el
   tamaño y la posición unos píxeles, así que se unifican. */
.mb-fondo__circulo--producto {
  top: -165px;
  right: -85px;
  width: 630px;
  height: 630px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--mb-accent) 55%, transparent),
    color-mix(in srgb, var(--mb-accent) 0%, transparent) 68%);
  animation-duration: 16s;
}
.mb-fondo__reticula--producto {
  background-image: radial-gradient(color-mix(in srgb, var(--mb-accent-light) 12%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse at 42% 40%, #000 14%, transparent 69%);
          mask-image: radial-gradient(ellipse at 42% 40%, #000 14%, transparent 69%);
}

/* --- Hero: migas, píldora y estadísticas ---------------------------------- */
.mb-migas {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Natural, como en la propuesta: heredar el del cuerpo suma 4px. */
  line-height: normal;
  font-size: 13px;
  color: var(--mb-text-mute);
}
.mb-migas a { color: var(--mb-text-mute); text-decoration: none; }
.mb-migas a:hover { color: var(--mb-white); }
.mb-migas em { font-style: normal; opacity: .6; }
.mb-migas b { font-weight: 400; color: var(--mb-accent-light); }

/* Ritmo del hero de producto, medido sobre la propuesta. home.css da 26px a
   todos los widgets de texto del hero; aquí se fija uno por uno, porque en las
   páginas de producto cada pieza lleva su propia separación. Las migas van
   pegadas al borde de la sección. */
/* En producto las dos columnas van a 60px, no a los 64 de la portada. */
.mb-pagina-producto .mb-hero__inner.e-con { gap: 60px; }
.mb-pagina-producto .mb-hero__text > .mb-migas-wrap { margin-top: 0; }
.mb-pagina-producto .mb-hero__text > .mb-pildora-wrap { margin-top: 34px; }
.mb-pagina-producto .mb-hero__text > .elementor-widget-heading { margin-top: 24px; }
.mb-pagina-producto .mb-hero__text > .mb-lead { margin-top: 24px; }
.mb-pagina-producto .mb-hero__text > .mb-hero__actions { margin-top: 34px; }
.mb-pagina-producto .mb-hero__text > .mb-datos-wrap { margin-top: 38px; }
.mb-pildora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--mb-radius-pill);
  background: color-mix(in srgb, var(--mb-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--mb-accent) 50%, transparent);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-white);
}
.mb-pildora i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 13px;
  background: var(--mb-white);
  border: 1px solid var(--mb-border);
  flex-shrink: 0;
}
.mb-pildora i img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* En las páginas de producto la entradilla va en el tono claro del producto.
   En la portada va en el azul claro, así que la regla lleva la clase del body. */
.mb-pagina-producto .mb-hero .mb-lead p { color: var(--mb-accent-light); }

/* Botón principal del producto: su color, no el naranja de la portada. */
.elementor-widget-button.mb-btn--producto .elementor-button {
  background: var(--mb-accent);
  color: var(--mb-white);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--mb-accent) 40%, transparent);
}
.elementor-widget-button.mb-btn--producto .elementor-button:hover,
.elementor-widget-button.mb-btn--producto .elementor-button:focus-visible {
  color: var(--mb-white);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px color-mix(in srgb, var(--mb-accent) 55%, transparent);
}
.mb-hero .mb-btn--ghost .elementor-button {
  border-color: color-mix(in srgb, var(--mb-accent-light) 40%, transparent);
}

.mb-datos-wrap {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid color-mix(in srgb, var(--mb-accent-light) 16%, transparent);
}
.mb-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.mb-dato {
  font-size: 13.5px;
  line-height: normal;
  color: var(--mb-accent-light);
}
.mb-dato b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: 23px;
  line-height: normal;
  color: var(--mb-white);
}

/* --- Franja de logos de clientes ------------------------------------------ */
.mb-logos-franja.e-con { padding-block: 52px; }
/* En @RISK la franja va entre dos líneas y con los logos más separados; en
   XLSTAT y NVivo solo lleva la línea de abajo. Así está en la propuesta. */
.mb-theme-risk .mb-logos-franja.e-con { border-top: 1px solid var(--mb-border); }
.mb-theme-risk .mb-logos { gap: 34px 54px; }
.mb-logos__titulo {
  margin: 0 0 28px;
  text-align: center;
  font-size: 12.5px;
  /* Natural: con el del cuerpo el título mide 20px en vez de 16 y toda la
     fila de logos baja 4px. */
  line-height: normal;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mb-text-soft);
}

/* --- Texto de "Qué es" ---------------------------------------------------- */
.mb-texto.elementor-widget-text-editor { max-width: 760px; }
.mb-texto.elementor-widget-text-editor p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--mb-text);
}

/* Etiquetas sueltas bajo el texto. */
.mb-chips.elementor-widget-icon-list .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
}
.mb-chips.elementor-widget-icon-list .elementor-icon-list-item {
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--mb-radius-pill);
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  font-size: 13.5px;
}
.mb-chips.elementor-widget-icon-list .elementor-icon-list-text { color: var(--mb-text); }
.mb-chips.elementor-widget-icon-list .elementor-icon-list-icon { display: none; }

/* --- Número de característica --------------------------------------------- */
.mb-numero .elementor-heading-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--mb-accent);
}

/* --- Precio de plan -------------------------------------------------------- */
.mb-plan__precio { font-size: 14px; color: var(--mb-text-soft); }
.mb-plan__precio b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--mb-font-head);
  font-size: 31px;
  letter-spacing: -.03em;
  color: var(--mb-accent-deep);
}

/* Cotización a medida (@RISK): lista de lo que incluye. */
.mb-cotizacion.e-con {
  margin-top: 36px;
  padding: 0;
  gap: 24px;
  align-items: flex-start;
}
.mb-checks-claro.elementor-widget-icon-list .elementor-icon-list-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px 26px;
  margin: 0;
  padding: 0;
}
.mb-checks-claro.elementor-widget-icon-list .elementor-icon-list-item {
  margin: 0;
  font-size: 15px;
}
.mb-checks-claro.elementor-widget-icon-list .elementor-icon-list-text { color: var(--mb-text); }
.mb-checks-claro.elementor-widget-icon-list .elementor-icon-list-icon svg {
  width: 15px;
  height: 15px;
  fill: var(--mb-accent);
}

/* --- Tabla comparativa ----------------------------------------------------- */
/* El contenedor permite desplazar la tabla en pantallas angostas sin que sea la
   página entera la que se desplace. */
.mb-tabla-wrap.elementor-widget-text-editor {
  margin-top: 40px;
  overflow-x: auto;
}
.mb-tabla {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}
.mb-tabla th,
.mb-tabla td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--mb-border);
}
.mb-tabla thead th {
  font-family: var(--mb-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mb-text-soft);
  border-bottom-width: 2px;
}
.mb-tabla tbody th {
  font-weight: 500;
  color: var(--mb-text);
}
/* La columna del producto propio se destaca, como en la propuesta. */
.mb-tabla .mb-tabla__destacada {
  background: color-mix(in srgb, var(--mb-accent) 6%, transparent);
  color: var(--mb-accent-deep);
  font-weight: 600;
}
.mb-tabla thead .mb-tabla__destacada { color: var(--mb-accent); }

/* --- Preguntas frecuentes --------------------------------------------------- */
/* El bloque va a 860px, no al ancho normal de 1240. */
.mb-wrap--angosto.e-con { max-width: 860px; }

.mb-faq .elementor-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 34px;
}
.mb-faq .elementor-accordion-item {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--mb-border);
  border-radius: 14px;
  background: var(--mb-surface);
  overflow: visible;
}
/* La clase del widget va incluida: Elementor da 15px 20px de relleno al título
   y con la misma especificidad gana él, sumando 30px por pregunta. */
.mb-faq.elementor-widget-accordion .elementor-tab-title {
  padding: 0;
  border: 0;
  background: transparent;
}
/* Ícono pequeño y discreto, como el marcador del diseño. */
.mb-faq .elementor-accordion-icon { width: auto; font-size: 11px; }
.mb-faq .elementor-accordion-icon-left { margin-right: 10px; }
.mb-faq .elementor-tab-title a,
.mb-faq .elementor-accordion-title {
  font-family: var(--mb-font-head);
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--mb-accent-deep);
}
.mb-faq .elementor-tab-content {
  padding: 12px 0 0;
  border: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mb-text);
}
.mb-faq .elementor-tab-content p { margin: 0; }
.mb-faq .elementor-accordion-icon { color: var(--mb-accent); }

@media (max-width: 600px) {
  .mb-tabla { font-size: 14px; }
  .mb-tabla th,
  .mb-tabla td { padding: 12px 14px; }
}

/* ==========================================================================
   "Qué es": texto a la izquierda, video a la derecha
   ========================================================================== */

.mb-quees__inner.e-con {
  display: grid;
  /* Mitades iguales y 60px de calle, como la propuesta. Con 1,05/0,95 la
     columna de texto era más ancha y el primer párrafo perdía un renglón. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.mb-quees__texto.e-con,
.mb-quees__video.e-con { padding: 0; }
/* Sin separación del contenedor: el ritmo lo dan los márgenes de cada pieza,
   como en el diseño. Con las dos cosas el hueco se duplicaba. */
.mb-quees__texto.e-con { gap: 0; }

/* Cabecera con el logo del producto y su descriptor. */
.mb-marca {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.mb-marca > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 9px;
  border-radius: 15px;
  background: var(--mb-white);
  border: 1px solid var(--mb-border);
  box-shadow: 0 8px 22px rgba(22, 36, 80, .1);
  flex-shrink: 0;
}
.mb-marca > i img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mb-marca b {
  display: block;
  font-family: var(--mb-font-head);
  line-height: normal;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--mb-accent-deep);
}
.mb-marca em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  line-height: normal;
  font-size: 13px;
  color: var(--mb-accent);
}

.mb-quees__texto .mb-eyebrow .elementor-heading-title {
  letter-spacing: .18em;
  color: var(--mb-accent);
}
.mb-quees__texto .elementor-widget-heading h2.elementor-heading-title { margin-top: 14px; }
.mb-quees__texto .mb-texto p { margin: 18px 0 0; }
.mb-quees__texto .mb-texto p + p { margin-top: 14px; }

/* Frases destacadas. 600 y no 700: sobre IBM Plex Sans el 700 pesa demasiado
   dentro de un párrafo y parece un título suelto. */
.mb-quees__texto .mb-texto strong {
  font-weight: 600;
  color: var(--mb-destacado, var(--mb-accent-deep));
}
/* El naranja de marca (#E67E22) sobre blanco da 2,85:1 y no se puede usar
   como texto. El tono oscuro da 5,9:1 y se sigue leyendo naranja. */
.mb-quees__texto .mb-texto strong.mb-dest--naranja { color: var(--mb-orange-dark); }

.mb-chips-wrap { margin-top: 28px; }
.mb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mb-chips i {
  font-style: normal;
  line-height: normal;
  padding: 8px 13px;
  border-radius: 8px;
  /* Se probaron teñidos con el color del producto y el cliente los prefiere
     neutros: el gris deja que el color lo pongan solo el logo y el título. */
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  font-size: 13.5px;
  color: var(--mb-text);
}

/* --- Tarjeta de video ----------------------------------------------------- */
.mb-video {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--mb-border);
  background: var(--mb-hero-bg);
  transition: transform .4s ease, box-shadow .4s ease;
}
.mb-video:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(22, 36, 80, .22);
}
.mb-video img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .82;
}
.mb-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-video__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mb-accent) 95%, transparent);
  box-shadow: 0 14px 34px rgba(11, 24, 56, .5);
}
.mb-video__texto {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 22px;
  background: linear-gradient(transparent, rgba(11, 24, 56, .92));
  color: var(--mb-white);
  font-family: var(--mb-font-head);
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 1000px) {
  .mb-quees__inner.e-con { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-video:hover { transform: none; }
}

/* ==========================================================================
   Secciones de producto · valores tomados de la propuesta
   ========================================================================== */

/* Antetítulo: en producto va con el color del producto; en la sección de
   resultados, en dorado. Todo acotado a las páginas de producto: sin la clase
   del body estas reglas se filtraban a la portada y le cambiaban los colores. */
.mb-pagina-producto .mb-section .mb-eyebrow .elementor-heading-title {
  color: var(--mb-accent);
  letter-spacing: .18em;
}
.mb-pagina-producto .mb-eyebrow--oro .elementor-heading-title { color: var(--mb-gold); }
.mb-pagina-producto .mb-section h2.elementor-heading-title { color: var(--mb-navy); }
.mb-pagina-producto .mb-on-dark h2.elementor-heading-title { color: var(--mb-white); }

/* Sobre fondo oscuro, en producto el texto va en el tono claro del producto,
   no en el azul claro genérico. */
.mb-pagina-producto .mb-on-dark .elementor-widget-text-editor p,
.mb-pagina-producto .mb-on-dark .mb-lead p { color: var(--mb-accent-light); }

/* Entradilla del hero: 18px en producto. */
/* 560px como la propuesta, no 62ch: con la medida en caracteres el párrafo
   se estiraba y rompía en otros puntos. */
.mb-pagina-producto .mb-hero .mb-lead { max-width: 560px; }
.mb-pagina-producto .mb-hero .mb-lead p { font-size: 18px; line-height: 1.62; }

/* Antetítulos que no usan el color del producto. */
.mb-pagina-producto .mb-head--problema .mb-eyebrow .elementor-heading-title { color: var(--mb-orange-dark); }
.mb-pagina-producto .mb-eyebrow--oro.elementor-widget-heading .elementor-heading-title { color: var(--mb-gold); }

/* Entradilla de planes y textos de las tarjetas de resultados. */


/* --- El problema: barra superior de color ---------------------------------- */
.mb-card--barra.e-con {
  padding: 30px;
  border-radius: 16px;
  /* El color de la barra no es siempre el naranja: en NVivo es su morado. */
  border-top: 3px solid var(--mb-barra, var(--mb-orange));
}
.mb-card--barra .elementor-widget-heading .elementor-heading-title { color: var(--mb-accent-deep); }

/* --- Características: número y texto en fila ------------------------------- */
.mb-caracteristica.e-con {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 26px;
  border-radius: 14px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  transition: transform .35s ease, box-shadow .35s ease;
}
.mb-caracteristica.e-con:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(22, 36, 80, .12);
}
.mb-caracteristica__texto.e-con { padding: 0; gap: 0; }
.mb-numero.elementor-widget-heading .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--mb-accent);
  color: var(--mb-white);
  font-family: var(--mb-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
}
.mb-caracteristica .elementor-widget-heading h3.elementor-heading-title {
  font-size: 18px;
  color: var(--mb-accent-deep);
}
.mb-caracteristica .elementor-widget-text-editor p { margin-top: 8px; font-size: 14.5px; }

/* --- Resultados: texto a la izquierda, tarjetas a la derecha --------------- */
.mb-resultados__inner.e-con {
  display: grid;
  /* .95/1.05 como la propuesta: a mitades iguales la columna de tarjetas se
     queda corta y los títulos rompen en dos renglones. */
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
/* Sin separación del contenedor: el ritmo lo dan los márgenes de cada pieza,
   como en la propuesta. Con el gap de 20px de Elementor la columna quedaba
   33px más alta y era ella la que marcaba el alto de la sección. */
.mb-resultados__texto.e-con { padding: 0; gap: 0; }
.mb-resultados__texto .mb-eyebrow + .elementor-widget-heading { margin-top: 14px; }
.mb-resultados__texto .elementor-widget-heading + .mb-lead { margin-top: 18px; }
.mb-resultados__texto .mb-lead p { font-size: 17px; line-height: 1.62; }
.mb-resultados__casos.e-con {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
}
/* Estas tarjetas son más compactas que las del resto del sitio: 26px de
   relleno, título de 16,5 y 8px hasta el texto, como en la propuesta. */
.mb-resultados__casos .mb-card.e-con {
  padding: 26px;
  gap: 8px;
}
.mb-resultados__casos .mb-card .elementor-widget-heading .elementor-heading-title {
  font-size: 16.5px;
  line-height: normal;
}
.mb-resultados__casos .mb-card .elementor-widget-text-editor p {
  font-size: 14px;
  line-height: 1.55;
}
.mb-puntos-wrap { margin-top: 26px; }
.mb-puntos { display: flex; flex-direction: column; gap: 14px; }
.mb-punto {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  color: var(--mb-accent-light);
}
/* Palomita dentro de un círculo: el círculo en ::before y el trazo en ::after,
   girado 45 grados. Dibujarla con un degradado daba un símbolo de prohibido. */
.mb-punto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--mb-gold);
}
.mb-punto::after {
  content: "";
  position: absolute;
  left: 6.4px;
  top: 6px;
  width: 4px;
  height: 8px;
  border: solid var(--mb-gold);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* --- Planes ---------------------------------------------------------------- */
.mb-plan.e-con {
  position: relative;
  padding: 32px;
  border-radius: 18px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  gap: 0;
}
.mb-plan--destacado.e-con {
  background: var(--mb-white);
  border: 2px solid var(--mb-accent);
  box-shadow: 0 24px 54px color-mix(in srgb, var(--mb-accent) 18%, transparent);
  overflow: hidden;
}
.mb-plan--destacado.e-con::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mb-accent), var(--mb-accent-light));
}
/* La clase del widget va incluida: Elementor pone position:relative a todos
   sus widgets y con la misma especificidad gana él, dejando la etiqueta en el
   flujo, encima del título. El width:auto evita que ocupe todo el ancho. */
.mb-badge-wrap.elementor-widget-text-editor {
  position: absolute;
  top: 18px;
  right: 20px;
  width: auto;
  z-index: 1;
}
.mb-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--mb-radius-pill);
  background: var(--mb-accent);
  color: var(--mb-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mb-plan .elementor-widget-heading h3.elementor-heading-title {
  font-size: 19px;
  color: var(--mb-accent-deep);
}
.mb-plan .elementor-widget-text-editor p { margin-top: 8px; font-size: 14.5px; color: var(--mb-text-soft); }
.mb-plan .mb-plan__precio { margin-top: 22px; }
.mb-plan__precio b {
  /* En línea: una regla anterior lo ponía en bloque y "/año" bajaba solo. */
  display: inline;
  font-family: var(--mb-font-head);
  font-size: 40px;
  letter-spacing: -.03em;
  color: var(--mb-accent-deep);
}
/* Con cuatro planes (NVivo) la tarjeta es más compacta en la propuesta:
   28/26 de relleno, precio más chico y líneas ajustadas. Con los valores de
   tres planes la sección salía 25px más alta. */
.mb-grid-4 .mb-plan.e-con { padding: 28px 26px; }
.mb-grid-4 .mb-plan .elementor-widget-text-editor p { line-height: normal; }
.mb-grid-4 .mb-plan .mb-plan__precio { margin-top: 20px; line-height: normal; }
.mb-grid-4 .mb-plan__precio b { font-size: 31px; line-height: normal; }
/* El "MXN" va en línea y pequeño, no como parte del número. */
.mb-plan__precio b i {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--mb-text-soft);
}
/* El título deja hueco para la etiqueta de la tarjeta destacada. */
.mb-plan--destacado .elementor-widget-heading h3.elementor-heading-title { padding-right: 96px; }

/*
 * Los precios, a la misma altura en todas las tarjetas.
 *
 * El título de la destacada cede 96px a la etiqueta y además suele ser el
 * nombre más largo, así que se parte en una línea más que el resto y empujaba
 * su precio hacia abajo. Igualar alturas a mano no sirve: depende del texto,
 * del ancho de la columna y del idioma.
 *
 * Con subgrid cada tarjeta reutiliza las filas de la retícula en vez de crear
 * las suyas, y título, descripción, precio, lista y botón quedan alineados
 * entre columnas diga lo que diga el texto. La fila de la lista es la que
 * crece (1fr), de modo que los botones caen todos al mismo ras.
 *
 * La etiqueta no cuenta: va en posición absoluta y no ocupa fila.
 */
@supports (grid-template-rows: subgrid) {
  .mb-planes .mb-grid-3.e-con,
  .mb-planes .mb-grid-4.e-con {
    grid-template-rows: auto auto auto 1fr auto;
  }
  .mb-planes .mb-plan.e-con {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    /* El ritmo lo siguen dando los márgenes de cada pieza. Con gap además del
       margen, los huecos se sumaban. */
    gap: 0;
  }
  /* En rejilla el flex:1 de la lista queda inerte; lo sustituye la fila 1fr. */
}

.elementor-widget-button.mb-plan__cta { margin-top: 24px; width: 100%; }
.elementor-widget-button.mb-plan__cta .elementor-button {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  background: transparent;
  border: 1px solid var(--mb-accent);
  color: var(--mb-accent);
  font-weight: 600;
  font-size: 15px;
  box-shadow: none;
}
.elementor-widget-button.mb-plan__cta .elementor-button:hover {
  background: var(--mb-accent);
  color: var(--mb-white);
  transform: none;
}
.elementor-widget-button.mb-plan__cta--lleno .elementor-button {
  background: var(--mb-accent);
  color: var(--mb-white);
}
.elementor-widget-button.mb-plan__cta--lleno .elementor-button:hover {
  background: var(--mb-accent-deep);
}

/* --- Comparativa ----------------------------------------------------------- */
.mb-tabla-wrap.elementor-widget-text-editor { margin-top: 36px; }
/* La caja es la que se desplaza; el recuadro y las esquinas viven aquí para
   que la tabla quede recortada dentro y la pista de abajo se quede fuera. */
.mb-tabla-caja {
  border-radius: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--mb-border);
  background: var(--mb-white);
  -webkit-overflow-scrolling: touch;
}
/* Solo cuando la tabla no cabe. Por encima de ese ancho entra entera y la
   pista sobra. */
.mb-tabla__pista {
  display: none;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--mb-text-soft);
}
@media (max-width: 860px) {
  .mb-tabla__pista { display: block; }
}

/* La maqueta reparte las columnas 1.4fr / 1fr / 1fr / 1fr. Con table-layout
   fijo basta con dar el ancho de la primera: el resto se divide solo. Sin esto
   el navegador mide por contenido y las filas rompen en distinto sitio.
   El margen inferior es de Astra: sin quitarlo la sección queda 22px más alta.
   El interlineado normal es el de la maqueta; heredar el del cuerpo suma 4px
   por fila. */
.mb-tabla {
  table-layout: fixed;
  min-width: 760px;
  margin: 0;
  line-height: normal;
}
.mb-tabla th:first-child,
.mb-tabla td:first-child { width: 31.8%; }

.mb-tabla th,
.mb-tabla td { border-bottom: 0; padding: 18px 22px; }
.mb-tabla thead tr { background: var(--mb-accent-deep); }
/* Las cabeceras de la competencia van en texto normal; solo "Criterio" lleva
   versalitas y solo la columna propia va en la tipografía de títulos. */
.mb-tabla thead th {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mb-accent-light);
  border: 0;
}
.mb-tabla thead th:first-child {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mb-tabla thead th.mb-tabla__destacada {
  font-family: var(--mb-font-head);
  font-weight: 700;
  color: var(--mb-white);
  background: transparent;
}
.mb-tabla tbody tr:nth-child(even) { background: color-mix(in srgb, var(--mb-accent) 4%, transparent); }
/* Línea entre filas, salvo en la última: el borde del recuadro ya la cierra. */
.mb-tabla tbody tr:not(:last-child) th,
.mb-tabla tbody tr:not(:last-child) td { border-bottom: 1px solid var(--mb-border); }
.mb-tabla tbody td,
.mb-tabla tbody th { font-size: 14.5px; color: var(--mb-text-soft); font-weight: 400; }
.mb-tabla tbody th { color: var(--mb-text); }
.mb-tabla tbody .mb-tabla__destacada {
  background: transparent;
  color: var(--mb-accent);
  font-weight: 600;
}

/* --- Acompañamiento -------------------------------------------------------- */
/* Tono y alto propios: 88px y un cuarto color, distinto al de las otras
   secciones oscuras del producto. */
.mb-acomp.e-con {
  background: var(--mb-acomp-bg);
  padding-block: 88px;
}
.mb-acomp__cabecera.e-con {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
}
/* Título más chico que el de las demás secciones y acotado a 520px. */
.mb-acomp .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 520px;
}
.mb-acomp .mb-grid-4.e-con {
  margin-top: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 18px;
}
.mb-acomp .mb-card.e-con {
  padding: 24px;
  border-radius: 14px;
  gap: 0;
}
.mb-acomp .mb-card .elementor-widget-heading h3.elementor-heading-title { font-size: 16.5px; }
.mb-acomp .mb-card .elementor-widget-text-editor p { margin-top: 8px; font-size: 14px; }
.elementor-widget-button.mb-enlace-oro .elementor-button {
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--mb-gold);
  fill: var(--mb-gold);
}
.elementor-widget-button.mb-enlace-oro .elementor-button:hover {
  background: none;
  transform: none;
  color: var(--mb-white);
  fill: var(--mb-white);
}

/* --- Preguntas frecuentes -------------------------------------------------- */
.mb-faq .elementor-tab-title { padding: 22px 24px; }
.mb-faq .elementor-tab-title a,
.mb-faq .elementor-accordion-title { color: var(--mb-accent-deep); }
.mb-faq .elementor-accordion-icon { color: var(--mb-accent); }

/* --- Cierre con formulario ------------------------------------------------- */
.mb-fondo__circulo--cierre-producto {
  top: -160px;
  left: -60px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--mb-accent) 45%, transparent),
    color-mix(in srgb, var(--mb-accent) 0%, transparent) 70%);
  animation-duration: 17s;
}
.mb-cierre__inner--producto.e-con {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  max-width: var(--mb-wrap);
  text-align: left;
}
/* Sin separación del contenedor: cada pieza lleva su margen (18 bajo el
   título, 28 antes de las palomitas, 26 antes de WhatsApp). Con el gap de
   20px de Elementor la columna se iba 60px de largo. */
.mb-cierre__texto.e-con { padding: 0; gap: 0; }
.mb-cierre--producto .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.mb-cierre__texto .mb-lead p {
  margin-top: 18px;
  font-size: 17.5px;
  line-height: 1.6;
  max-width: 520px;
}
/* Sin línea superior: esa es del hero. */
.mb-cierre__texto .mb-checks.elementor-widget-icon-list {
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}
.mb-cierre__texto .mb-checks.elementor-widget-icon-list .elementor-icon-list-items {
  flex-direction: column;
  gap: 13px;
}
.mb-cierre__texto .mb-checks.elementor-widget-icon-list .elementor-icon-list-item {
  gap: 12px;
  font-size: 15.5px;
  /* Natural: heredado del cuerpo cada palomita mide 25px en vez de 20 y las
     tres suman 15px de más. */
  line-height: normal;
}
.mb-wa-wrap { margin-top: 26px; }
.mb-wa { font-size: 15px; font-weight: 600; color: var(--mb-white); }
.mb-wa a { color: var(--mb-white); text-decoration: none; }
.mb-wa a:hover { color: var(--mb-accent-light); }

.mb-cierre__form.e-con {
  padding: 36px;
  border-radius: 20px;
  background: var(--mb-white);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .4);
  gap: 0;
}
.mb-cierre__form .mb-form__titulo .elementor-heading-title {
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--mb-navy);
}

@media (max-width: 1000px) {
  .mb-resultados__inner.e-con,
  .mb-cierre__inner--producto.e-con { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 620px) {
  .mb-resultados__casos.e-con { grid-template-columns: minmax(0, 1fr); }
}

/* Lista de lo que incluye cada plan (NVivo). */
.mb-plan__incluye.elementor-widget-icon-list {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--mb-border);
  flex: 1;
}
.mb-plan__incluye.elementor-widget-icon-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
}
.mb-plan__incluye.elementor-widget-icon-list .elementor-icon-list-item {
  gap: 9px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.mb-plan__incluye.elementor-widget-icon-list .elementor-icon-list-text { color: var(--mb-text); }
.mb-plan__incluye.elementor-widget-icon-list .elementor-icon-list-icon svg {
  width: 15px;
  height: 15px;
  fill: var(--mb-accent);
}

/* "Suscripción anual" bajo el precio, en los planes de NVivo. */
.mb-plan__precio em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 13.5px;
  color: var(--mb-text-soft);
}

/* Leyenda bajo las tarjetas de precio. */
.mb-planes__nota p {
  margin: 26px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mb-text);
}
/* Con cuatro planes la etiqueta es un punto más chica, como el diseño. */
.mb-grid-4 .mb-badge { font-size: 10.5px; padding: 5px 11px; }

/* Retícula de planes: 240px de mínimo y 20px de separación, como el diseño.
   Con 220/22 las tarjetas salían más angostas y el título destacado se partía
   en tres líneas en vez de dos. */
.mb-planes .mb-grid-3.e-con,
.mb-planes .mb-grid-4.e-con {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
}

/* Retícula de la sección "El problema": 280px de mínimo, o 255 cuando son
   cuatro tarjetas, para que entren en una sola fila como en el diseño. */
.mb-pagina-producto .mb-grid-3.e-con { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* Lleva la clase de página para ganarle a la regla de 280px de arriba. */
.mb-pagina-producto .mb-problemas--4.e-con { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }

/* --- Galería de capturas (@RISK) ------------------------------------------ */
.mb-capturas.e-con { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; }
.mb-captura.e-con {
  padding: 0;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  align-content: start;
}
.elementor-widget-image.mb-captura__imagen img { display: block; width: 100%; height: auto; }
.mb-captura__texto.e-con { padding: 24px; gap: 0; }
.mb-captura .elementor-widget-heading h3.elementor-heading-title {
  font-size: 18px;
  color: var(--mb-accent-deep);
}
.mb-captura .elementor-widget-text-editor p {
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mb-text);
}
.mb-captura__pie p {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--mb-text-soft);
}

/* --- Testimonios (@RISK) --------------------------------------------------- */
.mb-testimonios.e-con { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.mb-testimonio.e-con {
  padding: 28px;
  border-radius: 16px;
  background: rgba(168, 196, 224, .07);
  border: 1px solid rgba(168, 196, 224, .18);
  gap: 0;
  align-content: start;
}
.mb-testimonio .mb-cita {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--mb-white);
}
.mb-cita__autor { margin: 20px 0 0; }
.mb-cita__autor b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: 14.5px;
  color: var(--mb-white);
}
.mb-cita__autor i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 13.5px;
  color: var(--mb-text-on-dark);
}
.mb-testimonios-seccion .mb-captura__pie p { color: var(--mb-text-on-dark); }

/* La columna del producto en la comparativa no siempre usa su acento: en
   @RISK el naranja no se lee sobre blanco y el diseño usa un azul. */
.mb-tabla tbody .mb-tabla__destacada { color: var(--mb-tabla-col, var(--mb-accent)); }

/* --- Cotización a dos columnas (@RISK) ------------------------------------ */
.mb-cotizacion.e-con {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  /* Centradas, como en la propuesta: la tarjeta es más corta que el texto y
     debe quedar a media altura, no alineada arriba. */
  align-items: center;
  margin-top: 0;
  padding: 0;
}
/* La cabecera y el botón comparten columna: el ritmo es el del diseño. */
.mb-cotizacion__accion.e-con { padding: 0; gap: 0; }
.mb-cotizacion__accion .mb-head.e-con { padding: 0; gap: 0; }
.mb-cotizacion__accion .mb-head .mb-eyebrow + .elementor-widget-heading { margin-top: 14px; }
.mb-cotizacion__accion .mb-head .elementor-widget-heading + .mb-lead { margin-top: 18px; }
.mb-cotizacion__accion .mb-head .mb-lead + .mb-lead { margin-top: 14px; }
.mb-cotizacion__accion > .elementor-widget-button { margin-top: 28px; }

@media (max-width: 860px) {
  /* Apilada: a dos columnas la tarjeta se quedaba en 124px y la lista de
     palomitas se salía de la pantalla. */
  .mb-cotizacion.e-con {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}
.mb-cotizacion__tarjeta.e-con {
  padding: 34px;
  border-radius: 18px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  gap: 0;
}
.mb-cotizacion__tarjeta .elementor-widget-heading h3.elementor-heading-title {
  font-size: 19px;
  color: var(--mb-accent-deep);
}
.mb-cotizacion__tarjeta .mb-checks-claro.elementor-widget-icon-list { margin-top: 20px; }
.mb-cotizacion__tarjeta .mb-checks-claro.elementor-widget-icon-list .elementor-icon-list-items {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* --- Caja destacada en casos de uso --------------------------------------- */
.mb-caja-destacada.elementor-widget-text-editor { margin-top: 26px; }
.mb-caja-destacada p {
  margin: 0;
  padding: 22px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--mb-accent-light) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mb-accent-light) 35%, transparent);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mb-white);
}
.mb-caja-destacada b { font-family: var(--mb-font-head); }

/* --- Comilla de los testimonios ------------------------------------------- */
.mb-comilla {
  display: block;
  margin-bottom: 14px;
  color: var(--mb-accent-light);
}
.mb-comilla svg { display: block; }

/* --- Precios --------------------------------------------------------------- */
/* La cabecera va a 660px, como en la propuesta: a todo lo ancho el pie cabía
   en un renglón y la sección quedaba 27px más baja. El selector baja por
   .mb-wrap para no alcanzar a la cabecera de la cotización a medida, que vive
   dentro de una columna y lleva su propio ritmo. */
.mb-planes .mb-wrap > .mb-head.e-con { max-width: 660px; gap: 0; }
.mb-planes .mb-wrap > .mb-head .mb-eyebrow + .elementor-widget-heading { margin-top: 14px; }
.mb-planes .mb-wrap > .mb-head .elementor-widget-heading + .mb-lead { margin-top: 16px; }
.mb-planes .mb-wrap > .mb-head .mb-lead p { font-size: 16.5px; line-height: 1.6; }