/* ==========================================================================
   MBSoft · Portada
   Las clases se ponen desde Elementor (Avanzado → Clases CSS). Aquí se les da
   forma. Varias reglas llevan `.e-con` encima para ganarle por especificidad a
   los estilos que Elementor pone a sus contenedores.
   ========================================================================== */

/* --- Ancho completo ------------------------------------------------------- */
/* Astra encierra el contenido en .ast-container (máx. 1240px), así que las
   secciones a sangre completa quedaban con franjas blancas a los lados. En las
   páginas con plantilla de ancho completo de Elementor, ese límite sobra: cada
   sección se encarga de centrar su propio contenido. */
.elementor-template-full-width .ast-container {
  max-width: none;
  padding: 0;
}

/* --- Hero ---------------------------------------------------------------- */
.mb-hero.e-con {
  /* Páginas de producto: 80 y 92. La portada lo ajusta más abajo. */
  padding: 80px 0 92px;
  overflow: hidden; /* los círculos del fondo no deben crear scroll */
}

.mb-hero__inner.e-con {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px;
  align-items: center;
  max-width: var(--mb-wrap);
  margin-inline: auto;
  /* En bloque a cero: el relleno vertical lo pone la sección, y los 10px que
     Elementor da a todo contenedor estiran el hero 20px. */
  padding-block: 0;
  padding-inline: var(--mb-gutter);
}

.mb-hero__text.e-con {
  padding: 0;
  gap: 0;
}
/* Márgenes exactos del diseño en vez de un gap uniforme. */
.mb-hero__text > .elementor-widget-text-editor { margin-top: 26px; }
.mb-hero__text > .mb-hero__actions { margin-top: 36px; }

/* Mismo motivo que en components.css: el widget de título trae su tamaño y su
   altura de línea, y hay que superarlos en especificidad, no repetirlos. */
.mb-hero .elementor-widget-heading h1.elementor-heading-title {
  margin: 0;
  font-size: var(--mb-h1);
  line-height: 1.06;
  letter-spacing: -.03em;
}
.mb-accent-blue { color: var(--mb-blue-soft); }
.mb-accent-gold { color: var(--mb-gold); }

.mb-hero .mb-lead p {
  margin: 0;
  max-width: 560px;
  font-size: var(--mb-lead);
  line-height: 1.62;
  color: var(--mb-text-on-dark);
}

/* --- Botones del hero ----------------------------------------------------- */
.mb-hero__actions.e-con {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0;
  width: auto;
}
.mb-hero__actions .elementor-button {
  gap: 10px;
  font-size: 16px;
}

/* --- Lista de garantías --------------------------------------------------- */
/* Los widgets de Elementor traen color y márgenes propios desde la paleta
   global; por eso los selectores llevan también la clase del widget. */
/* Solo en el hero: en el cierre de producto la lista va sin línea y con otro
   tamaño, así que esta regla no debe alcanzarla. */
.mb-hero .mb-checks.elementor-widget-icon-list {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(168, 196, 224, .16);
}
.mb-checks.elementor-widget-icon-list .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
}
.mb-checks.elementor-widget-icon-list .elementor-icon-list-item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13.5px;
  color: var(--mb-text-on-dark);
}
.mb-checks.elementor-widget-icon-list .elementor-icon-list-text {
  color: var(--mb-text-on-dark);
  padding: 0;
}
.mb-checks.elementor-widget-icon-list .elementor-icon-list-icon svg,
.mb-checks.elementor-widget-icon-list .elementor-icon-list-icon i {
  width: 15px;
  height: 15px;
  font-size: 13px;
  color: var(--mb-gold);
  fill: var(--mb-gold);
}

/* --- Ilustración ---------------------------------------------------------- */
.mb-hero__art.e-con { padding: 0; }

/* La retícula de dos columnas interna de la ilustración portada del diseño. */
.mb-col2 { display: grid; }

@media (max-width: 1024px) {
  .mb-hero__inner.e-con {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  /* En pantallas medianas la ilustración va después del texto y más chica. */
  .mb-hero__art { max-width: 560px; }
}

@media (max-width: 760px) {
  .mb-grid-2.e-con { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .mb-hero__art { display: none; } /* decorativa: en móvil solo estorba */
  .mb-hero__actions.e-con { flex-direction: column; align-items: stretch; }
  .mb-hero__actions .elementor-widget-button { width: 100%; }
  .mb-hero__actions .elementor-button { justify-content: center; }
}

/* ==========================================================================
   Secciones de contenido
   ========================================================================== */

/* Centrado del contenido. Va aquí y no en cada sección para no repetirlo. */
.mb-wrap.e-con {
  max-width: var(--mb-wrap);
  margin-inline: auto;
  /* Sin relleno vertical: Elementor da 10px arriba y abajo a sus contenedores
     y el diseño no los tiene. */
  padding: 0 var(--mb-gutter);
  gap: 0;
}

/* --- Encabezado de sección ------------------------------------------------ */
.mb-head.e-con {
  max-width: 760px;
  gap: 14px;
  padding: 0;
}
.mb-head .elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--mb-h2);
  line-height: 1.12;
}
.mb-head .mb-lead p { margin: 0; font-size: 17px; }

/* --- Retículas ------------------------------------------------------------ */
.mb-grid-2.e-con,
.mb-grid-3.e-con,
.mb-grid-4.e-con {
  display: grid;
  gap: 22px;
  margin-top: 44px;
  padding: 0;
}
/* Dos columnas fijas: con auto-fit, cuatro tarjetas quedaban 3+1. */
.mb-grid-2.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* min(Npx, 100%) y no Npx a secas: con el mínimo fijo, en pantallas de 320px
   la columna pedía más de lo que cabía y la página se desplazaba en
   horizontal. Con min() el mínimo nunca supera el ancho disponible. */
.mb-grid-3.e-con { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.mb-grid-4.e-con { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* --- Tarjetas ------------------------------------------------------------- */
.mb-card.e-con {
  padding: 32px;
  border-radius: var(--mb-radius-lg);
  background: var(--mb-white);
  border: 1px solid var(--mb-border);
  gap: 14px;
  align-content: start;
}
.mb-card .elementor-widget-heading .elementor-heading-title {
  font-size: 19px;
  line-height: 1.25;
}
.mb-card .elementor-widget-text-editor p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mb-text);
}

/* Tarjeta sobre fondo oscuro: vidrio en vez de blanco. */
.mb-card--glass.e-con {
  background: rgba(168, 196, 224, .07);
  border-color: rgba(168, 196, 224, .18);
}
.mb-on-dark .mb-card .elementor-widget-text-editor p { color: var(--mb-text-on-dark); }

/* --- Tarjetas de producto del catálogo ------------------------------------ */
/* Valores del diseño: 34px de relleno, gris claro, y un pie con el precio a la
   izquierda y el enlace a la derecha, separados por una línea. */
/* El color de cada tarjeta es el de su categoría, que no coincide con el
   acento del producto: en el diseño son azul, verde azulado y naranja. */
.mb-producto.mb-theme-xlstat { --mb-cat: var(--mb-blue); }
.mb-producto.mb-theme-nvivo  { --mb-cat: var(--mb-teal); }
.mb-producto.mb-theme-risk   { --mb-cat: var(--mb-orange-dark); }

.mb-producto.e-con {
  padding: 34px;
  border-radius: 18px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  gap: 0;
  align-content: start;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease, border-color .3s ease;
}
.mb-producto.e-con:hover {
  transform: translateY(-6px);
  box-shadow: var(--mb-shadow-card);
  border-color: var(--mb-cat);
}

.mb-producto__cabecera.e-con {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  gap: 12px;
}
.mb-producto__icono {
  width: 52px;
  height: 52px;
  padding: 7px;
  border-radius: 13px;
  background: var(--mb-white);
  border: 1px solid var(--mb-border);
  flex-shrink: 0;
}
.mb-producto__icono img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mb-producto__tipo .elementor-heading-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mb-cat);
}

.mb-producto .mb-producto__nombre .elementor-heading-title {
  margin-top: 24px;
  font-size: 27px;
  letter-spacing: -.02em;
  color: var(--mb-navy);
}
.mb-producto__texto p {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mb-text);
}

.mb-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.mb-etiquetas i {
  font-style: normal;
  padding: 6px 11px;
  border-radius: 7px;
  background: var(--mb-white);
  border: 1px solid var(--mb-border);
  font-size: 12.5px;
  color: var(--mb-text);
}

.mb-producto__pie.e-con {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--mb-border);
  width: 100%;
}
.mb-producto__precio p {
  margin: 0;
  font-size: 14px;
  color: var(--mb-text-soft);
}
.mb-producto__precio b {
  font-family: var(--mb-font-head);
  font-size: 19px;
  color: var(--mb-navy);
}
/* La clase del widget va incluida para ganarle al fondo que Elementor da a
   todos sus botones; si no, el enlace sale como un botón naranja. */
.elementor-widget-button.mb-producto__enlace .elementor-button {
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--mb-cat);
  fill: var(--mb-cat);
}
.elementor-widget-button.mb-producto__enlace .elementor-button:hover,
.elementor-widget-button.mb-producto__enlace .elementor-button:focus-visible {
  background: none;
  transform: none;
  color: var(--mb-navy);
  fill: var(--mb-navy);
}

/* --- Métricas ------------------------------------------------------------- */
.mb-metricas.e-con { padding-block: 76px; }
/* El diseño usa 210px de mínimo y 34px de separación, no los de las otras
   retículas: con cuatro métricas caben en una sola línea hasta tablet. */
.mb-metricas .mb-grid-4.e-con {
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 34px;
}
/* La clase del widget va incluida: Elementor fija el tamaño del contador desde
   su propia hoja, que carga después de esta. Sin ella salía a 69px, no a 54. */
.mb-metric.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: var(--mb-font-head);
  font-size: clamp(38px, 4.4vw, 54px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--mb-navy);
  font-variant-numeric: tabular-nums;
}
.mb-metric.elementor-widget-counter .elementor-counter-title {
  margin-top: 8px;
  font-family: var(--mb-font-body);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--mb-text);
  text-align: left;
}

/* --- Perfiles ------------------------------------------------------------- */
/* La clase del widget va incluida: si no, el título toma el azul de la paleta
   global de Elementor y la letra queda ilegible sobre el recuadro de color. */
.mb-letra.elementor-widget-heading .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  font-size: 18px;
  color: var(--mb-blue);
}

/* --- Íconos de los diferenciales ------------------------------------------ */
.mb-icono.elementor-widget-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
}
.mb-icono.elementor-widget-image img { width: 22px; height: 22px; }
.mb-icono--oro     { background: rgba(232, 160, 32, .16); }
.mb-icono--azul    { background: rgba(37, 99, 235, .2); }
.mb-icono--verde   { background: rgba(13, 126, 140, .24); }
.mb-icono--naranja { background: rgba(230, 126, 34, .2); }

.mb-diferencia .mb-card .elementor-widget-heading .elementor-heading-title { margin-top: 20px; }
.mb-diferencia .mb-card .elementor-widget-text-editor p { margin-top: 10px; font-size: 15px; }

/* --- Proceso -------------------------------------------------------------- */
/* Tarjetas blancas con borde, como el diseño; antes eran una línea lateral. */
.mb-paso.e-con {
  padding: 30px;
  border-radius: 16px;
  gap: 0;
}
.mb-paso .mb-eyebrow .elementor-heading-title { font-family: var(--mb-font-head); }
.mb-paso .elementor-widget-heading h3.elementor-heading-title { margin-top: 14px; font-size: 19px; }
.mb-paso .elementor-widget-text-editor p { margin-top: 10px; }
.mb-paso .mb-eyebrow .elementor-heading-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--mb-text-soft);
}
.mb-paso .elementor-widget-text-editor p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mb-text);
}

/* --- Blog ----------------------------------------------------------------- */
/* Encabezado y enlace en la misma fila, alineados abajo, como el diseño. */
.mb-blog__cabecera.e-con {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
}
.elementor-widget-button.mb-enlace-simple .elementor-button {
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--mb-blue);
  fill: var(--mb-blue);
}
.elementor-widget-button.mb-enlace-simple .elementor-button:hover {
  background: none;
  transform: none;
  color: var(--mb-orange);
  fill: var(--mb-orange);
}

.mb-blog .mb-grid-3.e-con {
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 26px;
}

.mb-articulo.e-con {
  padding: 0;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--mb-border);
  background: var(--mb-white);
  align-content: start;
  transition: transform .4s ease, box-shadow .4s ease;
}
.mb-articulo.e-con:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 56px rgba(22, 36, 80, .12);
}

/* La clase del widget va incluida: Elementor fija el ancho de sus imágenes y
   si no se le gana, el marcador sale reducido a su tamaño intrínseco. */
.elementor-widget-image.mb-articulo__imagen,
.elementor-widget-image.mb-articulo__imagen .elementor-widget-container,
.elementor-widget-image.mb-articulo__imagen a { display: block; width: 100%; }
/* Elementor asume que un SVG dentro de un enlace es un ícono y lo fija a 48px
   (.elementor-widget-image a img[src$=".svg"]). Aquí es la imagen del
   artículo, así que hay que igualar ese selector para ganarle. */
.elementor-widget-image.mb-articulo__imagen img,
.elementor-widget-image.mb-articulo__imagen a img[src$=".svg"] {
  display: block;
  width: 100%;
  height: 182px;
  object-fit: cover;
}

.mb-articulo__cuerpo.e-con { padding: 26px; gap: 0; }
.mb-articulo__categoria .elementor-heading-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mb-cat--verde   .elementor-heading-title { color: var(--mb-teal); }
.mb-cat--azul    .elementor-heading-title { color: var(--mb-blue); }
.mb-cat--naranja .elementor-heading-title { color: var(--mb-orange-dark); }

.mb-articulo .mb-articulo__titulo .elementor-heading-title {
  margin-top: 12px;
  font-size: 19.5px;
  line-height: 1.3;
  color: var(--mb-navy);
}
.mb-articulo .elementor-widget-text-editor p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mb-text);
}

/* --- Las mismas tarjetas, en HTML plano ------------------------------------
   La sección de blog de la portada ya no son widgets de Elementor: las pinta
   [mbsoft_blog_destacados] para que muestre siempre las tres entradas más
   recientes con su imagen destacada. Necesita sus propias reglas porque las
   de arriba van contra contenedores de Elementor (.e-con) y aquí no los hay. */
/* 44px bajo la cabecera, como la propuesta. El bloque es un widget de
   shortcode, así que el margen va en su envoltorio. */
.mb-blog__lista.elementor-widget-shortcode { margin-top: 44px; }
.mb-articulos-portada {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 26px;
}
.mb-articulos-portada .mb-articulo {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--mb-border);
  background: var(--mb-white);
  transition: transform .4s ease, box-shadow .4s ease;
}
.mb-articulos-portada .mb-articulo:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 56px rgba(22, 36, 80, .12);
}
.mb-articulos-portada .mb-articulo__imagen { display: block; }
.mb-articulos-portada .mb-articulo__imagen img {
  display: block;
  width: 100%;
  height: 182px;
  object-fit: cover;
}
.mb-articulos-portada .mb-articulo__cuerpo { padding: 26px; }
.mb-articulos-portada .mb-articulo__categoria {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: normal;
}
.mb-articulos-portada .mb-cat--verde   { color: var(--mb-teal); }
.mb-articulos-portada .mb-cat--azul    { color: var(--mb-blue); }
.mb-articulos-portada .mb-cat--naranja { color: var(--mb-orange-dark); }
.mb-articulos-portada .mb-articulo__titulo {
  margin: 12px 0 0;
  font-size: 19.5px;
  line-height: 1.3;
}
.mb-articulos-portada .mb-articulo__titulo a { color: var(--mb-navy); text-decoration: none; }
.mb-articulos-portada .mb-articulo__titulo a:hover { color: var(--mb-blue); }
.mb-articulos-portada .mb-articulo__cuerpo > p:last-child {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mb-text);
}

@media (prefers-reduced-motion: reduce) {
  .mb-articulos-portada .mb-articulo:hover { transform: none; }
}

/* --- Cierre --------------------------------------------------------------- */
.mb-cierre__inner.e-con {
  max-width: 900px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.mb-cierre .mb-lead p { margin-inline: auto; }
.mb-cierre .mb-hero__actions.e-con { justify-content: center; }

/* ==========================================================================
   Decoraciones del hero
   Valores copiados de la propuesta: dos círculos con degradado radial que
   flotan, y la cuadrícula difuminada por una máscara elíptica.
   ========================================================================== */

/* El widget que contiene el fondo no debe ocupar espacio ni capturar clics. */
.mb-fondo-widget.elementor-widget-shortcode {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: auto;
}
.mb-fondo-widget .elementor-shortcode { display: contents; }

.mb-fondo { display: block; }

.mb-fondo__circulo {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation: mb-float 14s ease-in-out infinite;
}
.mb-fondo__circulo--azul {
  top: -140px;
  right: -120px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle at 35% 35%, rgba(37, 99, 235, .55), rgba(37, 99, 235, 0) 68%);
}
.mb-fondo__circulo--cierre {
  top: -180px;
  right: -100px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(230, 126, 34, .4), rgba(230, 126, 34, 0) 70%);
  animation-duration: 16s;
}
.mb-fondo__circulo--naranja {
  bottom: -200px;
  left: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 50% 50%, rgba(230, 126, 34, .38), rgba(230, 126, 34, 0) 70%);
  animation-duration: 18s;
  animation-delay: 2s;
}

.mb-fondo__reticula {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    linear-gradient(rgba(168, 196, 224, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 196, 224, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 72%);
}

/* Toda sección con círculos debe recortarlos: si no, asoman fuera de la
   ventana y aparece barra de desplazamiento horizontal. */
.mb-cierre.e-con,
.mb-hero.e-con {
  position: relative;
  overflow: hidden;
}

/* El contenido va por encima de las tres capas. */
.mb-hero__inner.e-con,
.mb-cierre__inner.e-con { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .mb-fondo__circulo { animation: none; }
}

/* ==========================================================================
   Franja de productos bajo el hero
   ========================================================================== */

.mb-franja-seccion.e-con {
  padding-block: 26px;
  background: var(--mb-ink-2);
  border-top: 1px solid rgba(168, 196, 224, .12);
  border-bottom: 1px solid rgba(168, 196, 224, .12);
}
.mb-franja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px 44px;
}
.mb-franja__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 44px;
  border-right: 1px solid rgba(168, 196, 224, .16);
}
.mb-franja__marca i {
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-text-mute);
}
.mb-franja__lumivero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--mb-white);
}
.mb-franja__lumivero img { display: block; width: 100px; height: auto; }

.mb-franja__producto {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}
.mb-franja__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 7px;
  border-radius: 12px;
  background: var(--mb-white);
  flex-shrink: 0;
}
.mb-franja__icono img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mb-franja__producto b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--mb-white);
}
.mb-franja__producto i {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  margin-top: 2px;
}
.mb-franja__producto:hover b { color: var(--mb-white); }

@media (max-width: 700px) {
  .mb-franja__marca { padding-right: 0; border-right: 0; }
}

/* ==========================================================================
   Tipografía exacta de la portada
   En la propuesta cada sección tiene su propio color de antetítulo y su propio
   tamaño de título. No es un descuido del diseño: marca el cambio de tema.
   ========================================================================== */

/* El hero de portada es un punto más chico que el de las páginas de producto. */
/* Solo en la portada el acento del hero es el azul claro: en las páginas de
   producto tiene que seguir siendo el color del producto. */
.home .mb-hero.e-con {
  --mb-accent: var(--mb-blue-soft);
  padding: 104px 0 96px;
}
.home .mb-hero .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(34px, 4vw, 54px);
}

.home .mb-head .mb-eyebrow .elementor-heading-title { letter-spacing: .18em; }

/* La clase del widget va incluida para ganarle a la regla de components.css
   que aclara los antetítulos sobre fondo oscuro. */
.mb-catalogo   .mb-eyebrow.elementor-widget-heading .elementor-heading-title { color: var(--mb-blue); }
.mb-diferencia .mb-eyebrow.elementor-widget-heading .elementor-heading-title { color: var(--mb-gold); }
.mb-publico    .mb-eyebrow.elementor-widget-heading .elementor-heading-title { color: var(--mb-teal); }
.mb-proceso    .mb-eyebrow.elementor-widget-heading .elementor-heading-title { color: var(--mb-orange-dark); }
.mb-blog       .mb-eyebrow.elementor-widget-heading .elementor-heading-title { color: var(--mb-blue); }

/* Tamaño de entradilla por sección, como en el diseño. */
.mb-catalogo   .mb-head .mb-lead p,
.mb-diferencia .mb-head .mb-lead p { font-size: 17.5px; }
.mb-publico    .mb-head .mb-lead p { font-size: 17px; }
.mb-cierre .mb-lead p { font-size: 18px; }

.mb-catalogo   .mb-head h2.elementor-heading-title,
.mb-diferencia .mb-head h2.elementor-heading-title { font-size: clamp(32px, 3.8vw, 48px); }
.mb-publico    .mb-head h2.elementor-heading-title,
.mb-proceso    .mb-head h2.elementor-heading-title { font-size: clamp(32px, 3.8vw, 46px); }
.mb-cierre .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(34px, 4.2vw, 52px); }

/* ==========================================================================
   Perfiles · dos columnas con el panel de métodos mixtos
   ========================================================================== */

.mb-publico__inner.e-con {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.mb-publico__texto.e-con,
.mb-publico__panel.e-con { padding: 0; }

.mb-perfiles.e-con {
  margin-top: 30px;
  padding: 0;
  gap: 16px;
}
.mb-perfil.e-con {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border-radius: 14px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  transition: transform .4s var(--mb-ease), border-color var(--mb-dur) var(--mb-ease);
}
.mb-perfil.e-con:hover {
  transform: translateX(4px);
  border-color: var(--mb-blue);
}
.mb-perfil__texto.e-con { padding: 0; gap: 0; }

/* La clase del widget va incluida: si no, el título toma el azul de la paleta
   global de Elementor y la letra queda ilegible sobre el recuadro de color. */
.mb-letra.elementor-widget-heading .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--mb-white);
  font-size: 16px;
}
.mb-letra--verde.elementor-widget-heading   .elementor-heading-title { background: #0D7E8C; }
.mb-letra--azul.elementor-widget-heading    .elementor-heading-title { background: var(--mb-blue); }
.mb-letra--naranja.elementor-widget-heading .elementor-heading-title { background: var(--mb-orange); }

.mb-perfil .elementor-widget-heading h3.elementor-heading-title { font-size: 17.5px; }
.mb-perfil .elementor-widget-text-editor p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .mb-publico__inner.e-con { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}