/* ==========================================================================
   MBSoft · Componentes
   Clases que se aplican desde Elementor en Avanzado → Clases CSS.
   Nada aquí depende de Elementor Pro.
   ========================================================================== */

/* --- Base tipográfica ---------------------------------------------------- */
body {
  font-family: var(--mb-font-body);
  font-size: var(--mb-body);
  line-height: 1.62;
  color: var(--mb-text);
}

h1, h2, h3, h4, h5, h6,
.mb-display {
  font-family: var(--mb-font-head);
  color: var(--mb-navy);
  letter-spacing: -.025em;
  line-height: 1.12;
  font-weight: 700;
}

h1 { font-size: var(--mb-h1); line-height: 1.05; letter-spacing: -.03em; }
h2 { font-size: var(--mb-h2); }

/* Sobre fondo oscuro, los títulos van en blanco y el cuerpo en azul claro. */
.mb-on-dark             { color: var(--mb-text-on-dark); }
.mb-on-dark h1,
.mb-on-dark h2,
.mb-on-dark h3,
.mb-on-dark .mb-display { color: var(--mb-white); }

/* Altura de línea de los títulos. Elementor aplica 1.3 desde su paleta global
   y el diseño usa 1.05 en h1, 1.12 en h2 y 1.25 en h3. Esto solo se nota al
   medir, pero hace que cada sección crezca decenas de píxeles. */
.elementor-widget-heading h1.elementor-heading-title { line-height: 1.05; }
.elementor-widget-heading h2.elementor-heading-title { line-height: 1.12; }
.elementor-widget-heading h3.elementor-heading-title { line-height: 1.25; }

/* El widget de título de Elementor trae su propio color desde la paleta global
   y se carga después que este archivo, así que con la misma especificidad
   ganaría él. De ahí el selector más largo. Sobre fondo claro no hace falta:
   la paleta global ya quedó configurada con el azul de la marca. */
.mb-on-dark .elementor-widget-heading .elementor-heading-title { color: var(--mb-white); }
.mb-on-dark .elementor-widget-text-editor p { color: var(--mb-text-on-dark); }

/*
 * Color del antetítulo por sección. En el diseño cada una tiene el suyo.
 *
 * La clase fija una variable en vez de el color directamente. Escrito como
 * regla de color no funcionaba: sobre fondo oscuro le ganaba
 * `.mb-on-dark .mb-eyebrow…` por especificidad, y sobre fondo claro le ganaba
 * la regla base por ir después en el archivo. El resultado era que ningún
 * acento se veía y todos los antetítulos salían grises.
 *
 * Con la variable no hay pelea: quien la define manda, y cada contexto pone
 * su color de reserva para cuando no hay clase de acento.
 */
.mb-ey--oro       { --mb-ey: #E8A020; }
.mb-ey--azul      { --mb-ey: #2563EB; }
.mb-ey--teal      { --mb-ey: #0A6B77; }
.mb-ey--tealclaro { --mb-ey: #3FB7C4; }
.mb-ey--naranja   { --mb-ey: #B35A0F; }
.mb-ey--cielo     { --mb-ey: #8ECBF0; }
.mb-ey--azulmedio { --mb-ey: #2E7DB8; }
.mb-ey--gris      { --mb-ey: #5F6B80; }

/* Antetítulo en versalitas que precede a los h2 en casi todas las secciones.
   La segunda regla es para cuando viene del widget de título de Elementor. */
.mb-eyebrow.elementor-widget-heading .elementor-heading-title {
  font-size: var(--mb-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Sin interlineado heredado: en la propuesta el antetítulo ocupa su caja
     natural (16px), no los 20px que le da el cuerpo de texto. */
  line-height: normal;
  color: var(--mb-ey, var(--mb-text-soft));
}
.mb-on-dark .mb-eyebrow.elementor-widget-heading .elementor-heading-title { color: var(--mb-ey, var(--mb-text-on-dark)); }

.mb-eyebrow {
  font-size: var(--mb-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Sin interlineado heredado: en la propuesta el antetítulo ocupa su caja
     natural (16px), no los 20px que le da el cuerpo de texto. */
  line-height: normal;
  color: var(--mb-ey, var(--mb-text-soft));
}
.mb-on-dark .mb-eyebrow { color: var(--mb-ey, var(--mb-text-on-dark)); }

.mb-lead {
  font-size: var(--mb-lead);
  line-height: 1.62;
  color: var(--mb-text);
  max-width: 62ch;
}
.mb-on-dark .mb-lead { color: var(--mb-text-on-dark); }

/* Contenedor centrado. La versión con .e-con vive en home.css para ganarle al
   relleno de Elementor; esta es para las plantillas PHP, como el blog. */
.mb-wrap {
  max-width: var(--mb-wrap);
  margin-inline: auto;
  padding: 0 var(--mb-gutter);
}

/* --- Secciones ----------------------------------------------------------- */
/* El ancho lo controla Elementor (contenedor a 1240px). Estas clases solo
   ponen fondo y separación para no repetir estilos sección por sección. */
/* `.e-con` se añade porque Elementor da su propio padding a cada contenedor
   desde el CSS que genera por página, y ese archivo carga después de este. */
.mb-section,
.mb-section.e-con {
  padding-block: var(--mb-section-y);
  padding-inline: 0;
  background: var(--mb-white);
}

/* Cada variante repite .e-con para no perder contra la regla de arriba, que
   la necesita para ganarle al padding que Elementor da a sus contenedores. */
.mb-section--alt,  .mb-section--alt.e-con  { background: var(--mb-surface); }
.mb-section--dark, .mb-section--dark.e-con { background: var(--mb-hero-bg); }
.mb-section--azul, .mb-section--azul.e-con { background: var(--mb-dark-bg); }
.mb-section--line  { border-bottom: 1px solid var(--mb-border); }
.mb-section--borde-arriba { border-top: 1px solid var(--mb-border); }
.mb-section--bordes {
  border-top: 1px solid var(--mb-border);
  border-bottom: 1px solid var(--mb-border);
}

@media (max-width: 700px) {
  :root { --mb-section-y: 64px; }
}

/* Retícula de puntos del hero. Va como fondo de un contenedor Elementor. */
.mb-grid-bg {
  position: relative;
  isolation: isolate;
}
.mb-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  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%);
}

/* --- Botones ------------------------------------------------------------- */
/* Se aplican al widget Botón de Elementor, que ya trae la etiqueta <a>. */
.mb-btn .elementor-button,
a.mb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 12px;
  font-family: var(--mb-font-body);
  font-size: 16px;
  font-weight: 600;
  /* Natural y no 1: en la propuesta el botón mide 54px de alto; con 1 la caja
     del texto se encoge y quedan 50. */
  line-height: normal;
  transition: transform var(--mb-dur) var(--mb-ease),
              box-shadow var(--mb-dur) var(--mb-ease),
              background-color var(--mb-dur) var(--mb-ease),
              color var(--mb-dur) var(--mb-ease);
}

/* `.elementor-widget-button` se añade para ganarle al tema global de Elementor,
   que pinta `.elementor-widget-button .elementor-button` con su color de acento
   y se carga después que este archivo. Con la misma especificidad, ganaría él. */
.elementor-widget-button.mb-btn--primary .elementor-button,
a.mb-btn--primary {
  background: var(--mb-orange);
  color: var(--mb-white);
  box-shadow: var(--mb-shadow-cta);
}
.elementor-widget-button.mb-btn--primary .elementor-button:hover,
.elementor-widget-button.mb-btn--primary .elementor-button:focus-visible,
a.mb-btn--primary:hover,
a.mb-btn--primary:focus-visible {
  color: var(--mb-white);
  transform: translateY(-3px);
  box-shadow: var(--mb-shadow-cta-hi);
}

.elementor-widget-button.mb-btn--ghost .elementor-button,
a.mb-btn--ghost {
  background: transparent;
  border: 1px solid var(--mb-accent);
  color: var(--mb-accent);
}
.elementor-widget-button.mb-btn--ghost .elementor-button:hover,
a.mb-btn--ghost:hover {
  background: var(--mb-accent);
  color: var(--mb-white);
}

/* El ícono a la izquierda del texto, como en el botón de WhatsApp. */
.mb-btn--icono-izq .elementor-button-content-wrapper { flex-direction: row-reverse; }

/* Variante sobre fondo oscuro: el borde y el texto se aclaran. */
.mb-on-dark .elementor-widget-button.mb-btn--ghost .elementor-button,
.mb-on-dark a.mb-btn--ghost {
  border-color: rgba(168, 196, 224, .4);
  color: var(--mb-white);
}
.mb-on-dark .elementor-widget-button.mb-btn--ghost .elementor-button:hover,
.mb-on-dark a.mb-btn--ghost:hover {
  background: rgba(37, 99, 235, .22);
  border-color: var(--mb-blue-soft);
}

/* --- Tarjetas ------------------------------------------------------------ */
.mb-card {
  padding: 32px;
  border-radius: var(--mb-radius-lg);
  background: var(--mb-white);
  border: 1px solid var(--mb-border);
  transition: transform var(--mb-dur) var(--mb-ease),
              box-shadow var(--mb-dur) var(--mb-ease),
              border-color var(--mb-dur) var(--mb-ease);
}
.mb-card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--mb-shadow-card);
  border-color: var(--mb-accent);
}
.mb-card--flat   { background: var(--mb-surface); }
.mb-card--accent { border: 2px solid var(--mb-accent); box-shadow: var(--mb-shadow-card); }

/* Cinta superior y etiqueta "Más solicitado" de la tarjeta destacada. */
.mb-card--accent { position: relative; overflow: hidden; }
.mb-card--accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mb-accent), var(--mb-accent-light));
}
.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;
}

/* --- Migas de pan --------------------------------------------------------- */
/* El último tramo es la página actual, no un enlace: va en gris claro y en
   peso normal. Heredaba el azul de enlace de Astra en todas las portadas. */
.mb-on-dark .mb-migas b { color: #C8D8EC; font-weight: 400; }

/* --- Equilibrado de renglones --------------------------------------------- */
/* La propuesta lo aplica a todos los títulos y párrafos del sitio. Sin esto
   el navegador parte los renglones de forma codiciosa: mete todas las
   palabras que quepan y deja el último renglón casi vacío. Se nota en cada
   entradilla y en cada título de dos renglones. Los navegadores que no lo
   entienden lo ignoran y parten como hasta ahora. */
h1, h2, h3, h4,
p,
.elementor-heading-title { text-wrap: pretty; }

/* --- Párrafos dentro de widgets de texto ---------------------------------- */
/* Astra da 1,75em de margen inferior a cada <p>. En la propuesta los párrafos
   solo llevan margen superior, así que el último de cada widget deja 25-30px
   de aire que no existe en el diseño: infla cada tarjeta y, sumado, cada
   sección. El margen entre párrafos de un mismo bloque sí se conserva. */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* --- Franja de logos de clientes ----------------------------------------- */
.mb-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 50px;
  align-items: center;
  justify-content: center;
}
.mb-logos img {
  /* La altura la pone cada logo; aquí solo el valor de reserva. */
  height: 26px;
  width: auto;
  opacity: .6;
  filter: grayscale(1);
  transition: opacity var(--mb-dur) var(--mb-ease), filter var(--mb-dur) var(--mb-ease);
}
.mb-logos img:hover { opacity: 1; filter: grayscale(0); }

/* --- Contadores ---------------------------------------------------------- */
.mb-counter {
  display: block;
  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; /* evita que el ancho salte al contar */
}
.mb-on-dark .mb-counter { color: var(--mb-white); }

/* --- Animación de entrada ------------------------------------------------ */
/* El JS añade .is-visible cuando el elemento entra en pantalla. Sin JS o con
   JS fallido el contenido queda visible: la animación nunca esconde texto. */
.js-mb [data-mb-reveal],
.js-mb .mb-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--mb-ease), transform .7s var(--mb-ease);
  transition-delay: var(--mb-reveal-delay, 0ms);
}
.js-mb [data-mb-reveal].is-visible,
.js-mb .mb-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-mb [data-mb-reveal],
  .js-mb .mb-reveal { opacity: 1; transform: none; transition: none; }
}

/* Cinturón y tirantes para el editor: si Elementor alcanzara a poner su clase
   antes de que pinte el navegador, esta regla garantiza que el contenido se
   vea igual. Sin ella el cliente abre el constructor y encuentra contenedores
   vacíos. */
.elementor-editor-active [data-mb-reveal],
.elementor-editor-active .mb-reveal,
.elementor-editor-preview [data-mb-reveal],
.elementor-editor-preview .mb-reveal {
  opacity: 1;
  transform: none;
  transition: none;
  .mb-btn .elementor-button,
  .mb-card,
  .mb-logos img { transition: none; }
  .mb-btn--primary .elementor-button:hover,
  .mb-card--lift:hover { transform: none; }
}

/* --- Accesibilidad ------------------------------------------------------- */
/*
 * Contorno de foco.
 *
 * Astra trae `a:focus { outline: dotted thin }`, y `:focus` también salta al
 * hacer clic con el ratón: al pulsar un filtro del blog aparecía un contorno
 * punteado alrededor de la pastilla. El contorno es imprescindible para quien
 * navega con teclado, pero no debe verse al hacer clic.
 *
 * Se apaga el de ratón y se deja uno propio, limpio, solo para teclado.
 * `:where()` no suma especificidad, así que estos selectores van desnudos
 * para poder ganarle a Astra.
 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.elementor-button:focus:not(:focus-visible),
.ast-button:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--mb-blue);
  outline-offset: 3px;
  border-radius: var(--mb-radius-sm);
}

/* Sobre fondo oscuro el azul apenas se distingue: ahí el contorno va en oro,
   que contrasta con el azul marino y con el naranja de la pastilla activa. */
.mb-on-dark a:focus-visible,
.mb-on-dark button:focus-visible,
.mb-header a:focus-visible,
.mb-filtros a:focus-visible,
.mb-footer a:focus-visible {
  outline-color: var(--mb-gold);
}

.mb-skip-link {
  position: absolute;
  left: -9999px;
}
.mb-skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--mb-white);
  border-radius: var(--mb-radius-sm);
}