/* ==========================================================================
   MBSoft · Páginas internas y formulario
   ========================================================================== */

/* --- Hero corto ----------------------------------------------------------- */
.mb-hero-simple.e-con { padding-block: clamp(56px, 6vw, 88px); }
/* Alineado a la izquierda, no centrado: en la propuesta la caja de 820px se
   apoya en el margen del contenido. Centrada, el título arrancaba 210px más
   a la derecha que en el diseño. */
/* Resplandor azul arriba a la derecha, como la propuesta. Va como
   pseudoelemento y no como etiqueta suelta: es pura decoración y así no
   depende de que el generador vuelva a escribir la página. */
.mb-hero-simple.e-con { position: relative; overflow: hidden; }
.mb-hero-simple.e-con::after {
  content: "";
  position: absolute;
  top: -150px;
  /* Lado y color los pone cada página: en Nosotros va a la derecha y azul,
     en Soporte a la izquierda y en verde azulado. */
  right: var(--mb-glow-right, -80px);
  left: var(--mb-glow-left, auto);
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mb-glow, rgba(37, 99, 235, .45)), transparent 70%);
  animation: mb-float 17s ease-in-out infinite;
  pointer-events: none;
}
.mb-pagina-soporte {
  --mb-glow: rgba(13, 126, 140, .45);
  --mb-glow-left: -60px;
  --mb-glow-right: auto;
}

/* El cierre de Nosotros lleva su propio resplandor abajo a la derecha;
   el de Soporte no lleva ninguno. */
.mb-pagina-nosotros .mb-cierre.e-con { position: relative; overflow: hidden; }
.mb-pagina-nosotros .mb-cierre.e-con::after {
  content: "";
  position: absolute;
  bottom: -200px;
  right: -80px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .42), transparent 70%);
  pointer-events: none;
}
.mb-pagina-nosotros .mb-cierre__inner.e-con { position: relative; z-index: 1; }
/* El contenido va por encima del resplandor. */
.mb-hero-simple > .e-con { position: relative; z-index: 1; }

.mb-hero-simple__wrap.e-con { gap: 0; }
/* La caja de texto va a 820px pegada al margen, no centrada. */
.mb-hero-simple__inner.e-con {
  max-width: 820px;
  padding: 0;
  margin: 34px 0 0;
  /* Ritmo por márgenes, como la propuesta, no por separación uniforme. */
  gap: 0;
}
.mb-hero-simple__inner > .mb-eyebrow + .elementor-widget-heading { margin-top: 18px; }
.mb-hero-simple__inner > .elementor-widget-heading + .mb-lead { margin-top: 24px; }
.mb-hero-simple .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -.03em;
}
.mb-hero-simple .mb-lead p { font-size: 18.5px; line-height: 1.62; }

/* --- Contacto: datos + formulario ----------------------------------------- */
.mb-contacto__inner.e-con {
  display: grid;
  /* .9/1.1 y 60px de calle, como la propuesta. */
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: start;
  /* Sin el relleno vertical que Elementor da a todo contenedor: son 20px que
     el diseño no tiene y que empujan la sección entera. */
  padding-block: 0;
}
.mb-contacto__datos.e-con,
.mb-contacto__texto.e-con,
.mb-contacto__form.e-con { padding: 0; }
/* Ritmo por márgenes: el antetítulo, el título, la entradilla y la lista de
   datos llevan los suyos, no la separación uniforme de Elementor. */
.mb-contacto__texto.e-con { gap: 0; }
.mb-contacto__texto .mb-eyebrow + .elementor-widget-heading { margin-top: 18px; }
.mb-contacto__texto .elementor-widget-heading + .mb-lead { margin-top: 20px; }
.mb-contacto__texto .mb-punto-lista:first-of-type { margin-top: 34px; }
.mb-contacto__texto .mb-punto-lista + .mb-punto-lista { margin-top: 20px; }
.mb-contacto__datos .mb-grid-2.e-con { margin-top: 0; }
/*
 * El formulario de Contacto es la versión grande: 40px de relleno, campos de
 * 13 y 16 de separación, frente a los 36/12/14 del formulario corto de las
 * páginas de producto. Con los valores del corto la tarjeta quedaba 93px más
 * baja que en la propuesta.
 */
.mb-contacto__form.e-con {
  padding: 40px;
  gap: 0;
  border-radius: 20px;
}
.mb-contacto__form .mb-form__titulo .elementor-heading-title { font-size: 23px; letter-spacing: -.02em; }
.mb-contacto__form .mb-form__nota { margin-top: 10px; }
.mb-contacto__form .fluentform form > fieldset { gap: 0 16px; }
.mb-contacto__form .fluentform .ff-el-group { margin-bottom: 16px; }
.mb-contacto__form .fluentform .ff-el-input--label { margin-bottom: 7px; }
.mb-contacto__form .fluentform .ff-el-input--label label { font-size: 13px; }
.mb-contacto__form .fluentform .ff-el-form-control { padding: 13px 15px; font-size: 15.5px; }
.mb-contacto__form .fluentform textarea.ff-el-form-control { min-height: 108px; }
.mb-contacto__form .fluentform .ff-btn-submit { padding: 16px 28px; font-size: 16.5px; }
/* Naranja, como en la propuesta. Contacto no es página de producto, así que
   --mb-accent no está definido y caía al azul por omisión. */
.mb-contacto__form .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
  background: var(--mb-orange);
  box-shadow: 0 12px 30px rgba(230, 126, 34, .34);
}
.mb-contacto__form .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover {
  background: var(--mb-orange-dark);
}
/* El bloque del formulario arranca 28px bajo la nota. */
.mb-contacto__form .elementor-widget-shortcode { margin-top: 18px; }
.mb-form__nota p {
  margin: 0 0 6px;
  /* 14.5px y gris medio: en gris claro no se alcanzaba a leer. */
  font-size: 14.5px;
  color: var(--mb-text-soft);
}

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

/* --- Formulario de Fluent Forms -------------------------------------------- */
/* Fluent Forms trae su propia hoja; aquí solo se alinea con el sistema de
   diseño. Los selectores llevan .fluentform para ganarle sin !important. */
/* 14px entre campos: con 16 la tarjeta quedaba más alta que en el diseño. */
.fluentform .ff-el-group { margin-bottom: 14px; }

/* Etiqueta: 12.5px en negrita, 6px de separación, como el diseño.
   En bloque y no en línea: como elemento en línea hereda la caja de texto del
   grupo (16.5px) y la etiqueta acaba midiendo 25px en vez de 22. */
.fluentform .ff-el-input--label {
  display: block;
  /* El margen va aquí y no en el <label>: siendo los dos de bloque, el del
     hijo se colapsaría hacia fuera y la separación se perdería. */
  margin-bottom: 6px;
  line-height: normal;
}
.fluentform .ff-el-input--label label {
  display: block;
  font-size: 12.5px;
  line-height: normal;
  font-weight: 600;
  color: var(--mb-text);
}

.fluentform .ff-el-form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--mb-border);
  border-radius: 10px;
  /* Fondo gris, no blanco: es lo que distingue el campo dentro de la tarjeta. */
  background: var(--mb-surface);
  font-family: var(--mb-font-body);
  font-size: 15px;
  /* Astra fija height:40px a los campos de texto y Fluent Forms les pone
     altura de línea 1. Con las dos cosas el campo queda 6px más bajo que en
     el diseño. */
  height: auto;
  /* Normal y no 1.5: con 1.5 el campo mide 48,5px y el diseño usa 46. */
  line-height: normal;
  color: var(--mb-text);
  transition: border-color var(--mb-dur) var(--mb-ease), box-shadow var(--mb-dur) var(--mb-ease);
}
.fluentform .ff-el-form-control:focus {
  border-color: var(--mb-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
  outline: none;
}

/* Dos columnas para los campos cortos, como en la propuesta. */
.fluentform .ff-t-container { gap: 18px; }

/* En flex, como el diseño: en línea el texto rodeaba la casilla y rompía en
   dos renglones, y el grupo pasaba de 20px a 53. */
.fluentform .ff-el-form-check .ff-el-form-check-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mb-text-soft);
}
.fluentform .ff-el-form-check input[type="checkbox"] {
  flex-shrink: 0;
  margin: 3px 0 0;
}
.fluentform .ff-el-form-check a { color: var(--mb-blue); }

.fluentform .ff-btn-submit {
  padding: 15px 28px;
  border: 0;
  border-radius: 12px;
  background: var(--mb-orange);
  color: var(--mb-white);
  font-family: var(--mb-font-body);
  font-size: 16px;
  line-height: normal;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--mb-shadow-cta);
  transition: transform var(--mb-dur) var(--mb-ease), box-shadow var(--mb-dur) var(--mb-ease);
}
.fluentform .ff-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--mb-shadow-cta-hi);
}

.fluentform .ff-el-is-error .ff-el-form-control { border-color: #C0392B; }
.fluentform .error-text { font-size: 13px; color: #C0392B; }

@media (prefers-reduced-motion: reduce) {
  .fluentform .ff-btn-submit:hover { transform: none; }
}

/* --- Blog ------------------------------------------------------------------ */
.mb-blog-archivo .ast-article-post {
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-lg);
  background: var(--mb-white);
  transition: transform var(--mb-dur) var(--mb-ease), box-shadow var(--mb-dur) var(--mb-ease);
}
.mb-blog-archivo .ast-article-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--mb-shadow-card);
}
.mb-blog-archivo .entry-title a { color: var(--mb-navy); }
.mb-blog-archivo .entry-title a:hover { color: var(--mb-blue); }

/* ==========================================================================
   Formulario en dos columnas
   Fluent Forms free apila todos los campos. El diseño los pone de a dos, así
   que la retícula se arma aquí en vez de con contenedores del plugin.
   ========================================================================== */

/* Fluent Forms mete todos los campos dentro de un <fieldset>, así que la
   retícula va ahí y no en el <form>. */
.mb-cierre__form .fluentform form > fieldset,
.mb-contacto__form .fluentform form > fieldset {
  display: grid;
  border: 0;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

/* Los campos largos ocupan el ancho completo. */
.mb-cierre__form .fluentform .ff-el-group:has(textarea),
.mb-cierre__form .fluentform .ff-el-group:has(.ff-el-form-check),
.mb-cierre__form .fluentform .ff_submit_btn_wrapper,
.mb-contacto__form .fluentform .ff-el-group:has(textarea),
.mb-contacto__form .fluentform .ff-el-group:has(.ff-el-form-check),
.mb-contacto__form .fluentform .ff_submit_btn_wrapper {
  grid-column: 1 / -1;
}

/* En las páginas de producto el botón toma el color del producto.
   El selector incluye :not(.ff_btn_no_style) porque Fluent Forms genera una
   regla con esa forma a partir del color configurado en el formulario, y con
   menos especificidad ganaría ella. */
/* :not(.mb-contacto__form) porque la tarjeta de Contacto lleva las dos clases
   y esta regla, al ir después, le ganaba: su botón salía del color del
   producto en vez del naranja de la propuesta. */
.mb-cierre__form:not(.mb-contacto__form) .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
  width: 100%;
  background: var(--mb-accent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--mb-accent) 35%, transparent);
}
.mb-cierre__form:not(.mb-contacto__form) .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover {
  background: var(--mb-accent-deep);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--mb-accent) 45%, transparent);
}

/* Palomitas en el color del producto y texto en blanco, como el diseño. */
.mb-cierre__texto .mb-checks.elementor-widget-icon-list .elementor-icon-list-icon svg,
.mb-cierre__texto .mb-checks.elementor-widget-icon-list .elementor-icon-list-icon i {
  fill: var(--mb-accent);
  color: var(--mb-accent);
}
.mb-cierre__texto .mb-checks.elementor-widget-icon-list .elementor-icon-list-text {
  color: var(--mb-white);
  font-size: 15.5px;
}

/* Una columna en el teléfono. La retícula vive en el <fieldset>, no en el
   <form>: apuntando al <form> la regla no casaba con nada y los campos se
   quedaban en dos columnas de 150px, con los textos cortados. */
@media (max-width: 620px) {
  .mb-cierre__form .fluentform form > fieldset,
  .mb-contacto__form .fluentform form > fieldset { grid-template-columns: minmax(0, 1fr); }
}

/* --- Espaciado y fondos de las páginas internas --------------------------- */
/* El diseño usa 96px en internas y 104px solo en la portada. */
.mb-interna { --mb-section-y: 96px; }
.mb-interna .mb-hero-simple.e-con { padding: 80px 0 88px; }
.mb-interna .mb-cierre.e-con { padding-block: 96px; }
/* Cierre de las páginas internas, con los valores de la propuesta: la
   entradilla a 560px centrada, 32px hasta los botones y el botón algo más
   grande que el estándar (17/32 y 16,5px). */
.mb-interna .mb-cierre__inner.e-con { gap: 0; }
.mb-interna .mb-cierre .mb-lead { margin-top: 18px; }
.mb-interna .mb-cierre .mb-lead p { font-size: 17.5px; line-height: 1.6; max-width: 560px; }
.mb-interna .mb-cierre .mb-hero__actions { margin-top: 32px; }
.mb-interna .mb-cierre .mb-btn .elementor-button { padding: 17px 32px; font-size: 16.5px; }
.mb-interna .mb-cierre .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
}

/* Canales de soporte: verde oscuro propio, no el azul de las demás. */
.mb-canales.e-con { background: #0A2C36; --mb-foto-alto: 520px; }

/* Nota bajo el formulario de producto: indica de qué software es la solicitud,
   que en ese formulario ya no se pregunta. */
.mb-form__pie {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--mb-text-soft);
}
.mb-form__pie b { color: var(--mb-accent-deep); }

/* La tarjeta del formulario vive dentro de una sección oscura pero tiene fondo
   blanco: su texto debe volver a la paleta normal. Si no, hereda el color
   claro de la sección y queda ilegible. */
.mb-cierre__form.e-con .elementor-widget-text-editor p,
.mb-cierre__form.e-con .mb-form__nota p { color: var(--mb-text-soft); }
.mb-cierre__form.e-con .elementor-widget-heading .elementor-heading-title { color: var(--mb-navy); }
.mb-cierre__form.e-con label,
.mb-cierre__form.e-con .ff-el-input--label label { color: var(--mb-text); }

/* --- Secciones a dos columnas con foto ------------------------------------ */
.mb-doscol.e-con {
  display: grid;
  /* Mitades iguales y 56px de calle, como todas las secciones a dos columnas
     de la propuesta. El apilado en móvil lo hace la consulta de abajo. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.mb-doscol__foto.e-con,
.mb-doscol__texto.e-con { padding: 0; gap: 0; }
/* La foto recorta a una altura fija: en la propuesta la columna de la imagen
   es más alta que la del texto y es ella la que marca el alto de la sección.
   Cada página fija la suya con --mb-foto-alto. */
.elementor-widget-image.mb-foto img,
.elementor-widget-image.mb-foto a img[src$=".svg"] {
  display: block;
  width: 100%;
  height: var(--mb-foto-alto, 480px);
  object-fit: cover;
  border-radius: 18px;
  /* El borde cambia según el fondo: gris claro sobre blanco, translúcido
     sobre oscuro. Con uno solo, en Nosotros se veía un marco azulado que la
     propuesta no tiene. */
  border: 1px solid var(--mb-border);
}
.mb-on-dark .elementor-widget-image.mb-foto img,
.mb-on-dark .elementor-widget-image.mb-foto a img[src$=".svg"] {
  border-color: rgba(168, 196, 224, .22);
}

@media (max-width: 860px) {
  .mb-doscol.e-con {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .elementor-widget-image.mb-foto img,
  .elementor-widget-image.mb-foto a img[src$=".svg"] { height: auto; }
}
.mb-doscol__texto .elementor-widget-heading h2.elementor-heading-title { margin-top: 14px; }
/* La entradilla lleva 18px bajo el título y va a 17px, como la propuesta.
   Sin el margen quedaba pegada al título. */
.mb-doscol__texto .elementor-widget-heading + .mb-lead { margin-top: 18px; }
.mb-doscol__texto .mb-lead p { font-size: 17px; line-height: 1.62; }

.mb-lista-puntos.e-con {
  margin-top: 26px;
  padding: 0;
  gap: 18px;
}
.mb-punto-lista.e-con { padding: 0; gap: 0; }
.mb-punto-lista .elementor-widget-heading h3.elementor-heading-title {
  font-size: 17.5px;
  color: var(--mb-navy);
}
.mb-punto-lista .elementor-widget-text-editor p {
  margin-top: 7px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mb-text);
}

/* Migas de pan en los heroes de las páginas internas. */

/* Tarjetas de "qué incluye" en Soporte: barra superior en verde azulado. */
.mb-soporte-incluye .mb-card--barra.e-con {
  padding: 34px;
  border-top-color: #0D7E8C;
}
.mb-soporte-incluye .mb-card .elementor-widget-heading h3.elementor-heading-title { font-size: 20px; }
.mb-soporte-incluye .mb-card .elementor-widget-text-editor p { margin-top: 12px; font-size: 15.5px; line-height: 1.62; }

/* Sobre el verde oscuro de canales, la lista va en claro. */
.mb-canales .mb-punto-lista .elementor-widget-heading h3.elementor-heading-title { color: var(--mb-white); }
.mb-canales .mb-punto-lista .elementor-widget-text-editor p { color: var(--mb-text-on-dark); }

/* --- Contacto -------------------------------------------------------------- */
.mb-hero-contacto.e-con {
  position: relative;
  overflow: hidden;
  padding: 80px 0 96px;
}
.mb-hero-contacto .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.mb-hero-contacto .mb-lead p { margin-top: 0; font-size: 17.5px; line-height: 1.6; }
.mb-hero-contacto .mb-contacto__inner.e-con { margin-top: 34px; }

/* --- Datos de contacto, con icono ------------------------------------------ */
/* Cuatro filas: cuadrado de color con el icono a la izquierda, título y valor
   a la derecha. Cada dato lleva su color, como en la propuesta. */
.mb-datos-contacto-wrap.elementor-widget-text-editor { margin-top: 34px; }
.mb-datos-contacto {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mb-dato-contacto {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mb-dato-contacto__icono {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* El color del trazo lo hereda el SVG con currentColor. */
.mb-dato-contacto__icono--wa      { background: rgba(13, 126, 140, .24); color: #3FB7C4; }
.mb-dato-contacto__icono--correo  { background: rgba(37, 99, 235, .24);  color: #7AA7FF; }
.mb-dato-contacto__icono--oficina { background: rgba(230, 126, 34, .22); color: #F6A15E; }
.mb-dato-contacto__icono--horario { background: rgba(232, 160, 32, .2);  color: #E8A020; }

.mb-dato-contacto__texto b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: 15.5px;
  line-height: normal;
  color: var(--mb-white);
}
.mb-dato-contacto__texto a,
.mb-dato-contacto__texto i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mb-text-on-dark);
  text-decoration: none;
}
.mb-dato-contacto__texto a:hover,
.mb-dato-contacto__texto a:focus-visible { color: var(--mb-orange); }

/* --- Mapa ------------------------------------------------------------------ */
.mb-mapa-seccion.e-con { padding: 0; background: var(--mb-white); }
/* El widget de mapa de Elementor trae su propia altura; aquí solo la línea
   inferior que lo separa del pie, como en la propuesta. */
.mb-mapa { border-bottom: 1px solid var(--mb-border); }
.mb-mapa .elementor-custom-embed,
.mb-mapa iframe { display: block; width: 100%; border: 0; }

/* --- Canales de soporte ---------------------------------------------------- */
/* Tres tarjetas con icono: WhatsApp, correo y el chat del sitio. Las dos
   primeras son enlaces y se desplazan al pasar el mouse; la del chat no,
   porque la abre el widget flotante. */
.mb-canales-lista.elementor-widget-text-editor { margin-top: 28px; }
.mb-canales__lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mb-canal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: 14px;
  background: rgba(168, 196, 224, .08);
  border: 1px solid rgba(168, 196, 224, .2);
  text-decoration: none;
  transition: transform var(--mb-dur) var(--mb-ease), background-color var(--mb-dur) var(--mb-ease);
}
a.mb-canal:hover {
  transform: translateX(6px);
  background: rgba(168, 196, 224, .14);
}
.mb-canal__icono {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-canal__icono--wa     { background: var(--mb-teal); }
.mb-canal__icono--correo { background: var(--mb-blue); }
.mb-canal__icono--chat   { background: var(--mb-orange); }
.mb-canal__texto b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: 16.5px;
  line-height: normal;
  color: var(--mb-white);
}
.mb-canal__texto i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 14px;
  line-height: normal;
  color: var(--mb-text-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  a.mb-canal:hover { transform: none; }
}

/* --- Páginas legales -------------------------------------------------------
   Aviso de privacidad y Términos: texto corrido, sin maquetar con Elementor.
   Se les da el mismo ancho de lectura y la misma escala tipográfica que al
   artículo del blog, que es el otro sitio del proyecto donde se lee seguido. */
.mb-legal .site-content .ast-container,
.mb-legal .entry-content {
  max-width: 820px;
  margin-inline: auto;
}
.mb-legal .site-content { padding-block: 72px 96px; }
.mb-legal .entry-title {
  font-size: clamp(32px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 8px;
}
.mb-legal .entry-content h2 {
  margin: 44px 0 0;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.mb-legal .entry-content p {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--mb-text);
}
.mb-legal .entry-content ul {
  margin: 16px 0 0;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--mb-text);
}
.mb-legal .entry-content li + li { margin-top: 8px; }
.mb-legal .entry-content a { color: var(--mb-blue); }
/* La fecha de actualización, en gris y algo más pequeña. */
.mb-legal .entry-content > p:first-child em {
  font-style: normal;
  font-size: 14.5px;
  color: var(--mb-text-soft);
}

/* --- Misión y visión -------------------------------------------------------
   Dos tarjetas de vidrio sobre el azul marino, con su etiqueta en versalitas
   y el texto en blanco, no en el gris claro del resto de fondos oscuros. */
.mb-mision.e-con {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 26px;
}
.mb-mision .mb-card.e-con {
  padding: 36px;
  border-radius: 18px;
  gap: 0;
}
/* Sin los 44px que .mb-grid-* da a las retículas de sección: aquí la
   retícula es el contenido entero, no va debajo de una cabecera. */
.mb-mision.mb-grid-2.e-con { margin-top: 0; }
/* El selector baja por .mb-card porque la regla de título de tarjeta
   (.mb-card .elementor-widget-heading .elementor-heading-title, 19px) tiene la
   misma especificidad que la del antetítulo y va después: sin esto la etiqueta
   salía a 19px en vez de 12,5. */
.mb-mision .mb-card .mb-eyebrow.elementor-widget-heading { margin-bottom: 16px; }
.mb-mision .mb-card .mb-eyebrow.elementor-widget-heading .elementor-heading-title {
  font-size: var(--mb-eyebrow);
  line-height: normal;
}
.mb-mision .mb-card .elementor-widget-text-editor p {
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--mb-white);
}