/* Sistema de diseño — Dra. Mireille Blan
   Fuente de verdad: /sistema-de-diseno.md
   Estas variables y clases se pueden usar en cualquier widget de Elementor
   agregando el nombre de la clase en la pestaña Avanzado > CSS Classes. */

:root {
  --brand: #6E4B88;
  --brand-hover: #57396D;
  --brand-tint: #F1ECF6;
  --ink: #2B2530;
  --ink-muted: #6B6470;
  --bg: #FBF9F4;
  --bg-alt: #EAE3D6;
  --surface: #FFFFFF;
  --border: #D2CAD5;

  /* Colores de categoría — FONDO / swatch / tinte.
     Son los hex del brief, sin modificar. Contrastan entre 1.4 y 2.9 contra
     --bg, así que sirven como fondo pero NO como color de texto ni de trazo. */
  --cat-bioecologia: #CD75E6;
  --cat-pnl: #CF8319;
  --cat-trayectoria: #B27DE6;
  --cat-talleres: #D9CBFA;
  --cat-cocrear: #FDC066;
  --cat-nacer: #58AB38;
  --cat-nutricion: #3F692C;

  /* Colores de categoría — PRIMER PLANO (texto, trazo de ícono, links,
     subrayado activo del menú, texto en arco del sello). Misma familia
     cromática, oscurecidos hasta pasar WCAG AA (4.5:1) sobre --bg.
     El ratio real medido va en el comentario. */
  --cat-bioecologia-fg: #8E3AAE; /* 5.93 */
  --cat-pnl-fg:         #8A5410; /* 5.95 */
  --cat-trayectoria-fg: #7B45B0; /* 6.01 */
  --cat-talleres-fg:    #6E5A9E; /* 5.51 */
  --cat-cocrear-fg:     #8A5A10; /* 5.62 */
  --cat-nacer-fg:       #3A7522; /* 5.33 */
  --cat-nutricion-fg:   #3F692C; /* 6.11 — el único que ya pasaba sin ajuste */

  --radius: 12px;      /* botones, tarjetas */
  --radius-sm: 8px;    /* chips, inputs */
  --radius-lg: 24px;   /* cajas de imagen, módulos grandes */

  /* Elevación — 3 niveles. Dos capas cada uno: una nítida que apoya el
     elemento en el papel, y una difusa y ancha que lo despega. */
  --shadow-1: 0 1px 2px rgba(43, 37, 48, 0.05);
  --shadow-2: 0 1px 2px rgba(43, 37, 48, 0.05), 0 6px 18px -6px rgba(43, 37, 48, 0.14);
  --shadow-3: 0 2px 4px rgba(43, 37, 48, 0.06), 0 18px 36px -12px rgba(43, 37, 48, 0.22);

  /* Escala tipográfica — 7 pasos. No agregar tamaños intermedios. */
  --text-display: clamp(30px, 3.6vw, 46px);
  --text-h1: clamp(28px, 3vw, 36px);
  --text-h2: 34px;
  --text-h3: 20px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-eyebrow: 13px;
}

:where(body) {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  font-size: var(--text-body);
  line-height: 1.6;
}

/* :where() = especificidad 0. Es un DEFAULT, no una imposición: el estilo que
   trae cada widget de Elementor tiene que poder ganarle. Sin esto, un heading
   configurado en Bricolage salía igual en Fraunces, porque este archivo se
   encola después del CSS de Elementor. */
:where(h1, h2, h3, h4, .elementor-heading-title) {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
}

/* ---------- Accesibilidad base ----------
   Foco visible en todo lo interactivo. Elementor y Hello Elementor no lo
   garantizan, y sin esto la web es inusable con teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Respetar la preferencia de sistema de movimiento reducido. Cubre también
   los reveal-on-scroll embebidos en los widgets HTML: los deja en su estado
   final en vez de animarlos. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    /* el delay también: una cascada escalonada con la duración en 0.01ms pero el
       retardo intacto deja el último elemento invisible medio segundo */
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Los 7 módulos con reveal-on-scroll arrancan en opacity:0 dentro de su
     propio widget HTML. Sin esto quedarían invisibles para quien pidió no ver
     movimiento. La lista es explícita a propósito: un [class*="mb-"] genérico
     también anularía transforms que sí comunican estado (la rotación del
     chevron del acordeón, por ejemplo). */
  .mb-acc, .mb-big, .mb-causas, .mb-chip, .mb-pop-item, .mb-tl-item, .mb-vs {
    opacity: 1 !important;
    transform: none !important;
  }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Eyebrow / etiqueta ----------
   Igual que con los botones: si se aplica como Clase CSS de un widget Encabezado
   de Elementor, el texto real vive adentro en .elementor-heading-title, por eso
   el selector cubre los dos casos (clase puesta directo, o en el contenedor). */
.mb-eyebrow,
.mb-eyebrow .elementor-heading-title {
  display: inline-block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ---------- Botones ----------
   Aplicar como CSS Class del widget Botón de Elementor.
   Nota: Elementor pone la "Clase CSS" en el contenedor del widget, no en el
   <a class="elementor-button"> de adentro — por eso el selector lleva espacio
   (descendiente), no va pegado.
   min-height 44px = mínimo de target táctil accesible. */
.btn-primary .elementor-button,
.btn-outline .elementor-button,
.btn-whatsapp .elementor-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--text-small);
  transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.btn-primary .elementor-button {
  background-color: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-1);
}
.btn-primary .elementor-button:hover {
  background-color: var(--brand-hover);
  color: #fff;
  box-shadow: var(--shadow-2);
}

.btn-outline .elementor-button {
  background-color: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}
.btn-outline .elementor-button:hover { background-color: var(--brand-tint); }

/* Texto oscuro sobre el verde de WhatsApp: #FFF sobre #25D366 da 1.98
   (ilegible), #0B3D22 da 6.21. */
.btn-whatsapp .elementor-button {
  background-color: #25D366;
  color: #0B3D22;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-1);
}
.btn-whatsapp .elementor-button:hover {
  background-color: #1FBE5A;
  color: #0B3D22;
  box-shadow: var(--shadow-2);
}

/* Botón compacto (barra superior del header). Mantiene los 44px de alto
   táctil aunque el texto sea chico. */
.btn-sm .elementor-button {
  padding: 10px 18px;
  font-size: var(--text-eyebrow);
}

/* ---------- Tarjetas ---------- */
.mb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.mb-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
}

/* Tintes de categoría — usar junto a .mb-card para la tarjeta de esa sección */
.mb-tint-bioecologia   { background: color-mix(in srgb, var(--cat-bioecologia) 12%, var(--surface)); }
.mb-tint-pnl           { background: color-mix(in srgb, var(--cat-pnl) 12%, var(--surface)); }
.mb-tint-trayectoria   { background: color-mix(in srgb, var(--cat-trayectoria) 12%, var(--surface)); }
.mb-tint-talleres      { background: color-mix(in srgb, var(--cat-talleres) 12%, var(--surface)); }
.mb-tint-cocrear       { background: color-mix(in srgb, var(--cat-cocrear) 12%, var(--surface)); }
.mb-tint-nacer         { background: color-mix(in srgb, var(--cat-nacer) 12%, var(--surface)); }
.mb-tint-nutricion     { background: color-mix(in srgb, var(--cat-nutricion) 12%, var(--surface)); }

/* ---------- Banda alterna de sección ---------- */
.mb-band-alt { background: var(--bg-alt); }

/* ---------- Nav: subrayado activo por categoría ----------
   Agregar la clase correspondiente al item de menú activo.
   Usa el color -fg: un subrayado de 2px en el hex claro del brief no se ve. */
.mb-nav-active-bioecologia { border-bottom: 2px solid var(--cat-bioecologia-fg); }
.mb-nav-active-pnl         { border-bottom: 2px solid var(--cat-pnl-fg); }
.mb-nav-active-trayectoria { border-bottom: 2px solid var(--cat-trayectoria-fg); }
.mb-nav-active-talleres    { border-bottom: 2px solid var(--cat-talleres-fg); }
.mb-nav-active-cocrear     { border-bottom: 2px solid var(--cat-cocrear-fg); }
.mb-nav-active-nacer       { border-bottom: 2px solid var(--cat-nacer-fg); }
.mb-nav-active-nutricion   { border-bottom: 2px solid var(--cat-nutricion-fg); }

/* ---------- Sello circular (ver inc/icon-seals.php) ---------- */
.mb-seal { display: inline-block; text-align: center; }
.mb-seal .mb-seal-name {
  margin-top: 8px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Íconos sociales del header ----------
   El widget queda con targets de ~26px; los llevamos a 44px sin agrandar
   el ícono en sí. */
.elementor-social-icons-wrapper .elementor-social-icon {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   HOME — detalles que no tienen setting nativo en Elementor
   ============================================================
   El layout NO está acá: los anchos, bordes, sombras y radios de la home van en
   los settings nativos de cada contenedor (tools/build-home.py), porque son los
   únicos que sobreviven a la importación. Elementor descarta las Clases CSS y
   el ID CSS de la pestaña Avanzado.

   Lo que queda acá cuelga de clases escritas DENTRO del HTML de un widget, que
   sí viajan intactas. Si este archivo no llegara, la home se sigue viendo bien:
   pierde estos detalles y nada más. */

/* --- círculo detrás del ícono de las tarjetas de servicio --- */
.mb-svg.mb-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- disco blanco detrás del sello de las tarjetas de área --- */
.mb-svg.mb-seal-disc {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.mb-svg.mb-seal-disc svg { width: 52px; height: 52px; }

/* --- listas de credenciales con tilde (hero y bio) --- */
.mb-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mb-checks-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.mb-checks li { display: flex; align-items: flex-start; gap: 8px; }
.mb-checks li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  background: var(--brand);
  /* el tilde va como máscara CSS: evita un SVG por ítem */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,12 9,17 20,6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,12 9,17 20,6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- arte provisorio del hero y de la bio --- */
.mb-svg.mb-l-art {
  background: var(--brand-tint);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.mb-svg.mb-l-art svg { width: 100%; height: auto; max-width: 200px; }

/* --- marco de video pendiente --- */
.mb-l-video-ph {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--brand-tint);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: var(--brand);
}
.mb-l-video-ph small {
  font-size: var(--text-small);
  color: var(--ink-muted);
  max-width: 34ch;
  line-height: 1.5;
}

/* --- las fotos de las tarjetas de área, al ras del borde superior --- */
.elementor-widget-image img { display: block; }

/* --- ningún contenedor se pasa del viewport: los anchos en px del template se
       recortan solos en pantalla chica, sin scroll horizontal --- */
.e-con { max-width: 100%; }


/* --- el texto de un botón nunca se parte en dos renglones --- */
.elementor-button { white-space: nowrap; }


/* --- menú principal ---------------------------------------------------
   El widget es el de Header Footer Elementor (.hfe-nav-menu), no el de
   Elementor Pro. Con 6 ítems y uno de 29 caracteres ("Programación
   Neurolingüística") el menú se partía en dos renglones: acá se compacta el
   espaciado y se impide que una palabra se corte al medio. */
.hfe-nav-menu .hfe-menu-item,
.hfe-nav-menu .hfe-sub-menu-item {
  font-size: 13.5px;
  /* los ítems salían en violeta claro, con poco contraste. Va con !important
     porque HFE emite su propio CSS por elemento y gana en especificidad. */
  color: var(--ink) !important;
}

/* El compactado de arriba vale SOLO en escritorio: abajo de 1025px HFE cambia
   al menú desplegable (hamburguesa) y ahí el `nowrap` dejaba los 6 ítems en
   una sola fila cortada por el borde de la pantalla. */
@media (min-width: 1025px) {
  .hfe-nav-menu .hfe-menu-item,
  .hfe-nav-menu .hfe-sub-menu-item {
    white-space: nowrap;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
  .hfe-nav-menu-layout.horizontal .hfe-nav-menu { flex-wrap: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  .hfe-nav-menu .hfe-menu-item {
    font-size: 11.5px;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* --- menú desplegable (tablet y teléfono) ---
   Panel de ancho completo, un ítem por renglón y área de toque de 46px. */
@media (max-width: 1024px) {
  /* El selector es `ul.hfe-nav-menu`, no el wrapper, para no depender de las
     clases que el JS de HFE va y viene poniendo en el contenedor. `column`
     apila aunque el `nowrap` lo ponga el plugin.
     Todo lo demás va con !important porque el CSS por widget de Elementor
     (`.elementor-28 .elementor-element-352a47af a.hfe-menu-item`) suma tres
     clases y le gana a cualquier selector del tema. */
  ul.hfe-nav-menu {
    flex-direction: column !important;
    /* `nowrap` es obligatorio: HFE deja el panel cerrado en altura 0, y un flex
       column CON wrap en altura 0 no apila — manda cada ítem a una columna
       nueva hacia la derecha. Eso estiraba el documento 530px y ponía scroll
       lateral en todo el sitio, con el menú cerrado. */
    flex-wrap: nowrap !important;
    width: 100%;
  }
  ul.hfe-nav-menu li { width: 100%; }
  /* y el panel cerrado no derrama el alto de sus 6 ítems hacia abajo */
  .hfe-nav-menu__toggle:not(.hfe-active-menu) + nav { overflow: hidden; }
  .hfe-nav-menu .hfe-menu-item,
  .hfe-nav-menu .hfe-sub-menu-item {
    white-space: normal;
    font-size: 15px !important;
    line-height: 1.3;
    padding: 14px 20px !important;
    /* la flecha del submenú se va al margen derecho, lejos del texto */
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }
  /* el submenú se lee como grupo: sangrado y con tinte propio (el fondo va en
     el <a>, que es lo que el widget pinta de blanco) */
  .hfe-nav-menu .sub-menu .hfe-sub-menu-item {
    font-size: 14px !important;
    padding-left: 36px !important;
    background-color: var(--brand-tint) !important;
  }
}

/* --- fotos de las tarjetas de área: todas al mismo alto -----------------
   La de PNL es 768x610 y el resto 768x540, así que el sello quedaba a distinta
   altura en esa tarjeta. Se fuerza 3:2 recortando desde el centro. El selector
   apunta al tamaño `medium_large` (768px de ancho) que sirve WordPress para
   estas fotos; el logo es SVG y no lo alcanza. */
.e-con > .elementor-widget-image img[width="768"] {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

/* --- menú: estados --- */
.hfe-nav-menu .hfe-menu-item:hover,
.hfe-nav-menu .current-menu-item > .hfe-menu-item,
.hfe-nav-menu .current_page_item > .hfe-menu-item { color: var(--brand) !important; }

/* ============================================================
   TARJETAS DE ÁREAS — clic completo y hover con velo
   ============================================================
   El selector de la tarjeta describe su FORMA: el contenedor que tiene una
   imagen como hijo directo y que además contiene un sello.

   No alcanza con `:has(.mb-seal-disc)` a secas: eso matchea cualquier ancestro
   con un sello adentro — el grid y la sección entera incluidos — así que al
   pasar el mouse por una tarjeta el efecto se disparaba en las siete. El grid no
   tiene imagen como hijo directo, y el contenedor del logo del header no tiene
   sello: con las dos condiciones juntas, solo quedan las 7 tarjetas.

   El clic sobre toda la tarjeta lo arma el script de functions.php, porque
   Elementor tampoco importa el `link` del contenedor. */

/* --- el color con el que reacciona cada tarjeta --- */
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):has(.mb-cat-bioecologia) { --mb-acc: #CD75E6; --mb-fg: #8E3AAE; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):has(.mb-cat-pnl) { --mb-acc: #CF8319; --mb-fg: #8A5410; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):has(.mb-cat-trayectoria) { --mb-acc: #B27DE6; --mb-fg: #7B45B0; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):has(.mb-cat-talleres) { --mb-acc: #D9CBFA; --mb-fg: #6E5A9E; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):has(.mb-cat-cocrear) { --mb-acc: #FDC066; --mb-fg: #8A5A10; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):has(.mb-cat-nacer) { --mb-acc: #58AB38; --mb-fg: #3A7522; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):has(.mb-cat-nutricion) { --mb-acc: #3F692C; --mb-fg: #3F692C; }

/* --- la tarjeta --- */
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc) {
  overflow: hidden;               /* recorta el velo al radio de la tarjeta */
  cursor: pointer;
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* --- la foto: velo de color + zoom --- */
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc) > .elementor-widget-image { position: relative; overflow: hidden; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc) > .elementor-widget-image img {
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc) > .elementor-widget-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mb-acc, var(--brand));
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):hover > .elementor-widget-image::after { opacity: .45; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):hover > .elementor-widget-image img { transform: scale(1.05); }

/* --- el sello se invierte --- */
.mb-svg.mb-seal-disc {
  transition: background .35s ease, box-shadow .35s ease, color .35s ease;
}
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):hover .mb-svg.mb-seal-disc {
  background: var(--mb-fg, var(--brand));
  box-shadow: var(--shadow-3);
  color: #FFFFFF !important;      /* el glifo usa currentColor */
}

/* --- el título toma el color de la categoría --- */
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc) .elementor-heading-title { transition: color .3s ease; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):hover .elementor-heading-title { color: var(--mb-fg, var(--brand)); }

/* --- el «Conocé más» --- */
.mb-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
}
.mb-more svg { flex: none; transition: transform .3s ease; }
.e-con:has(> .elementor-widget-image):has(.mb-seal-disc):hover .mb-more svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .e-con:has(> .elementor-widget-image):has(.mb-seal-disc), .e-con:has(> .elementor-widget-image):has(.mb-seal-disc) *, .mb-svg.mb-seal-disc { transition: none !important; }
  .e-con:has(> .elementor-widget-image):has(.mb-seal-disc):hover { transform: none; }
}

/* ============================================================
   TARJETAS DE SERVICIOS — clic completo y hover con barra de acento
   ============================================================
   Mismo criterio que Áreas: el selector describe la FORMA de la tarjeta, para
   no alcanzar también al grid ni a la sección. Acá la marca es el ícono
   (.mb-ico) dentro del contenedor interno.

   Como no hay foto donde poner un velo, el color entra por la barra superior,
   el disco del ícono y el título. La tarjeta no se mueve: el efecto es gráfico
   y la grilla queda quieta. */

.e-con:has(> .e-con > .elementor-widget-html .mb-ico) {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.e-con:has(> .e-con > .elementor-widget-html .mb-ico):hover { box-shadow: var(--shadow-3); border-color: var(--brand); }
.e-con:has(> .e-con > .elementor-widget-html .mb-ico):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* --- la barra de acento crece de izquierda a derecha --- */
.e-con:has(> .e-con > .elementor-widget-html .mb-ico)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
  z-index: 2;
}
.e-con:has(> .e-con > .elementor-widget-html .mb-ico):hover::before { transform: scaleX(1); }

/* --- el disco del ícono se llena --- */
.e-con:has(> .e-con > .elementor-widget-html .mb-ico) .mb-svg.mb-ico { transition: background .35s ease, color .35s ease; }
.e-con:has(> .e-con > .elementor-widget-html .mb-ico):hover .mb-svg.mb-ico { background: var(--brand); color: #FFFFFF !important; }

/* --- el título toma el color de marca --- */
.e-con:has(> .e-con > .elementor-widget-html .mb-ico) .elementor-heading-title { transition: color .3s ease; }
.e-con:has(> .e-con > .elementor-widget-html .mb-ico):hover .elementor-heading-title { color: var(--brand); }

/* --- el contenido ocupa todo el alto y el botón se apoya abajo, así los tres
       quedan alineados aunque los textos midan distinto --- */
.e-con:has(> .e-con > .elementor-widget-html .mb-ico) > .e-con { flex: 1; }
.e-con:has(> .e-con > .elementor-widget-html .mb-ico) .elementor-widget-html:has(.mb-btn) {
  margin-top: auto;      /* el botón se apoya abajo */
  align-self: center;    /* y queda centrado en la tarjeta */
}

/* --- el «botón» es un span: la tarjeta entera es el enlace --- */
.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 20px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  color: var(--brand);
  font-size: var(--text-small);
  font-weight: 700;
  transition: background .3s ease, color .3s ease;
}
.e-con:has(> .e-con > .elementor-widget-html .mb-ico):hover .mb-btn { background: var(--brand-tint); }

@media (prefers-reduced-motion: reduce) {
  .e-con:has(> .e-con > .elementor-widget-html .mb-ico), .e-con:has(> .e-con > .elementor-widget-html .mb-ico) *, .e-con:has(> .e-con > .elementor-widget-html .mb-ico)::before { transition: none !important; }
}

/* ============================================================
   INTERNAS DE CATEGORÍA — layout, cajas y estados
   ============================================================
   Se pega al final de assets/css/design-tokens.css.

   Por qué existe: **el contenido de las internas va en widgets NATIVOS de
   Elementor** (Encabezado, Editor de texto, Botón) para que se edite desde el
   editor visual. Lo que un widget nativo no sabe hacer —una grilla, la caja de
   una tarjeta con sombra de dos capas, un hover que cambia ícono y título a la
   vez, una lista convertida en pills— se define acá una sola vez y sirve para
   las 7 internas.

   **El enganche son marcadores, no IDs ni clases de widget.** Elementor descarta
   al importar tanto las "Clases CSS" como el **ID CSS** (`_element_id`) — se
   verificó en el HTML publicado: los contenedores salen con un id hex
   autogenerado. Lo único que viaja intacto es **el markup de un widget HTML**.

   Así que cada bloque abre con un widget HTML de una línea:

       <i class="mb-m mb-m-cards" id="antes" aria-hidden="true"></i>

   y el CSS sube al contenedor con `:has()`. Ese mismo marcador hace de **ancla**
   de navegación (`#antes`), porque un `id` dentro del markup sí llega.
   La categoría entra igual: el sello lleva `.mb-cat-bio` y `body:has(.mb-cat-bio)`
   define `--mb-acc` / `--mb-fg` / `--mb-tint` / `--mb-glow` para toda la página.

   Marcadores — `mb-m-<tipo>`:

     mb-m-hd       header de categoría (sección)
     mb-m-chips    fila de botones-ancla del recorrido
     mb-m-cards    grilla de tarjetas; cada hijo es una tarjeta
     mb-m-hab      tarjetas horizontales (ícono + texto)
     mb-m-pills    Editor de texto con <ul>: cada <li> sale como pill
     mb-m-pull     frase destacada
     mb-m-vs       dos cajas contrastadas
     mb-m-ledger   filas de registro     mb-lfoot-<cat>-<n>  su pie
     mb-m-fig      marco de imagen provisoria   mb-figcap-<cat>-<n>
     mb-m-aside    nota con borde de acento
     mb-m-dato     número grande        mb-nota-<cat>-<n>  nota al pie
     mb-m-shield   bloque oscuro
     mb-m-cta      CTA final            mb-quote-<cat>     su cita
   ============================================================ */

/* --- el color de la categoría entra por el ID y se hereda a los hijos --- */
body:has(.mb-cat-bio) { --mb-acc: var(--cat-bioecologia); --mb-fg: var(--cat-bioecologia-fg); --mb-tint: #F8EAFB; --mb-glow: rgba(205,117,230,.38); }
body:has(.mb-cat-pnl) { --mb-acc: var(--cat-pnl);         --mb-fg: var(--cat-pnl-fg);         --mb-tint: #F8ECDD; --mb-glow: rgba(207,131,25,.34); }
body:has(.mb-cat-tra) { --mb-acc: var(--cat-trayectoria); --mb-fg: var(--cat-trayectoria-fg); --mb-tint: #F3ECFB; --mb-glow: rgba(178,125,230,.36); }
/* Talleres no lleva el 12% del brief (#F9F7FE): contra --bg da 1.010, no se ve.
   #EDE6FA da 1.154 y el fg encima queda en 4.78:1. Ver sistema-de-diseno.md §2.2. */
body:has(.mb-cat-tal) { --mb-acc: var(--cat-talleres);    --mb-fg: var(--cat-talleres-fg);    --mb-tint: #EDE6FA; --mb-glow: rgba(217,203,250,.44); }
body:has(.mb-cat-coc) { --mb-acc: var(--cat-cocrear);     --mb-fg: var(--cat-cocrear-fg);     --mb-tint: #FFF6E8; --mb-glow: rgba(253,192,102,.40); }
body:has(.mb-cat-nac) { --mb-acc: var(--cat-nacer);       --mb-fg: var(--cat-nacer-fg);       --mb-tint: #E6F2E1; --mb-glow: rgba(88,171,56,.32); }
body:has(.mb-cat-nut) { --mb-acc: var(--cat-nutricion);   --mb-fg: var(--cat-nutricion-fg);   --mb-tint: #E2E9DF; --mb-glow: rgba(63,105,44,.30); }
/* `cur` no es una categoría del brief: es la página madre del submenú Cursos y va
   en el violeta de la marca, porque sus cuatro hijas ya tienen color propio. El fg
   es el violeta profundo (`--brand-hover`): contra el brand a secas, el lavanda de
   Seminarios queda a distancia 37 y se confundirían. */
body:has(.mb-cat-cur) { --mb-acc: var(--brand);           --mb-fg: var(--brand-hover);        --mb-tint: var(--brand-tint); --mb-glow: rgba(110,75,136,.34); }

/* Los widgets HTML que quedan solo llevan un SVG: sin caja ni interlineado.
   Un widget ocupa el 100% del contenedor, así que el SVG se centra a mano: el
   widget HTML no tiene setting de alineación. */
/* OJO con el alcance: estas reglas van acotadas a las páginas de categoría
   (`body:has(.mb-m)`). En su primera versión estaban sueltas y el
   `line-height: 0` —pensado para que un SVG suelto no arrastre interlineado—
   comprimió el texto de TODOS los widgets HTML de la home: los placeholders de
   video, la agenda y los testimonios quedaron con las líneas pegadas. */
body:has(.mb-m) .elementor-widget-html > .elementor-widget-container:has(> svg),
body:has(.mb-m) .elementor-widget-html > .elementor-widget-container:has(> .mb-ic),
body:has(.mb-m) .elementor-widget-html > .elementor-widget-container:has(> .mb-m) { line-height: 0; }
body:has(.mb-m) .elementor-widget-html svg { display: block; }
.mb-m { display: none; }
body:has(.mb-m) .elementor-widget-html > .elementor-widget-container > svg { margin-inline: auto; }
body:has(.mb-m) .elementor-widget-html > .elementor-widget-container > .mb-ic { display: inline-flex; }

/* ---------- HEADER DE CATEGORÍA ---------- */
.e-con:has(> .elementor-widget-html .mb-m-hd),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hd) { position: relative; overflow: hidden; }

/* Anillos de crecimiento: SVG en un widget HTML, posicionado respecto a la
   sección y apagado hacia afuera con una máscara para que no compita con el
   texto que queda encima. */
.mb-rings {
  position: absolute; left: 50%; top: 215px; transform: translate(-50%, -50%);
  width: 1000px; height: 1000px; pointer-events: none; opacity: .32; z-index: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, rgba(0,0,0,.35) 46%, transparent 70%);
          mask-image: radial-gradient(closest-side, #000 22%, rgba(0,0,0,.35) 46%, transparent 70%);
}
.e-con:has(> .elementor-widget-html .mb-m-hd) > .e-con-inner > .elementor-element,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hd) > .e-con-inner > .elementor-element,
 
.e-con:has(> .elementor-widget-html .mb-m-hd) > .e-con-inner > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hd) > .e-con-inner > .e-con { position: relative; z-index: 1; }
@media (max-width: 767px) { .mb-rings { width: 620px; height: 620px; top: 150px; } }

.e-con:has(> .elementor-widget-html .mb-m-hd) .elementor-heading-title em,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hd) .elementor-heading-title em { font-style: italic; font-weight: 600; color: var(--mb-fg); }

.e-con:has(> .elementor-widget-html .mb-m-hd) .elementor-widget-text-editor p,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hd) .elementor-widget-text-editor p { margin: 0; }
.e-con:has(> .elementor-widget-html .mb-m-hd) .elementor-widget-text-editor a,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hd) .elementor-widget-text-editor a { color: var(--brand); text-decoration: none; }
.e-con:has(> .elementor-widget-html .mb-m-hd) .elementor-widget-text-editor a:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hd) .elementor-widget-text-editor a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* chips del recorrido: widgets Botón; el punto y el hover van acá */
.e-con:has(> .elementor-widget-html .mb-m-chips),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-chips) { flex-wrap: wrap; }
.e-con:has(> .elementor-widget-html .mb-m-chips) .elementor-button,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-chips) .elementor-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-shadow: none;
  transition: background-color 180ms ease, border-color 180ms ease,
              color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-chips) .elementor-button::before,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-chips) .elementor-button::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--mb-acc); transition: background-color 180ms ease, transform 180ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-chips) .elementor-button:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-chips) .elementor-button:hover {
  border-color: var(--mb-acc); color: var(--mb-fg);
  box-shadow: var(--shadow-2); transform: translateY(-2px);
}
.e-con:has(> .elementor-widget-html .mb-m-chips) .elementor-button:hover::before,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-chips) .elementor-button:hover::before { background: var(--mb-fg); transform: scale(1.5); }

/* ---------- ÍCONO EN DISCO (widget HTML con un SVG) ---------- */
.mb-ic {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--mb-tint); color: var(--mb-fg);
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.mb-ic svg { width: 26px; height: 26px; }
.mb-ic--sm { width: 44px; height: 44px; }
.mb-ic--sm svg { width: 22px; height: 22px; }
.mb-ic--ring { background: var(--surface); border: 1.5px solid var(--mb-acc); }
.mb-ic--solid { background: var(--mb-fg); color: #fff; }

/* ---------- GRILLA DE TARJETAS ---------- */
.e-con:has(> .elementor-widget-html .mb-m-cards),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-cards),
.e-con:has(> .elementor-widget-html .mb-m-hab),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hab),
.e-con:has(> .elementor-widget-html .mb-m-vs),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) { flex-wrap: wrap; align-items: stretch; }
.e-con:has(> .elementor-widget-html .mb-m-cards) > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-cards) > .e-con {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-2);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-cards) > .e-con:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-cards) > .e-con:hover {
  transform: translateY(-4px); border-color: var(--mb-acc);
  box-shadow: 0 2px 4px rgba(43,37,48,.06), 0 18px 36px -12px var(--mb-glow);
}
.e-con:has(> .elementor-widget-html .mb-m-cards) > .e-con:hover .elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-cards) > .e-con:hover .elementor-heading-title { color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-cards) > .e-con:hover .mb-ic,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-cards) > .e-con:hover .mb-ic { background: var(--mb-fg); color: #fff; transform: scale(1.06); }
.e-con:has(> .elementor-widget-html .mb-m-cards) .elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-cards) .elementor-heading-title,
.e-con:has(> .elementor-widget-html .mb-m-hab) .elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hab) .elementor-heading-title { transition: color 200ms ease; }

/* ---------- TARJETAS HORIZONTALES ---------- */
.e-con:has(> .elementor-widget-html .mb-m-hab) > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hab) > .e-con {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-1);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-hab) > .e-con:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hab) > .e-con:hover {
  transform: translateY(-3px); border-color: var(--mb-acc); box-shadow: var(--shadow-2);
}
.e-con:has(> .elementor-widget-html .mb-m-hab) > .e-con:hover .elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hab) > .e-con:hover .elementor-heading-title { color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-hab) > .e-con:hover .mb-ic,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-hab) > .e-con:hover .mb-ic { background: var(--mb-fg); color: #fff; }

/* ---------- PILLS desde un Editor de texto con <ul> ---------- */
.e-con:has(> .elementor-widget-html [class*="mb-m-pills"]) ul,
.e-con:has(> .e-con-inner > .elementor-widget-html [class*="mb-m-pills"]) ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.e-con:has(> .elementor-widget-html [class*="mb-m-pills"]) li,
.e-con:has(> .e-con-inner > .elementor-widget-html [class*="mb-m-pills"]) li {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--text-small); font-weight: 600; color: var(--ink); box-shadow: var(--shadow-1);
  transition: background-color 180ms ease, border-color 180ms ease,
              color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.e-con:has(> .elementor-widget-html [class*="mb-m-pills"]) li::before,
.e-con:has(> .e-con-inner > .elementor-widget-html [class*="mb-m-pills"]) li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--mb-acc); transition: transform 180ms ease;
}
.e-con:has(> .elementor-widget-html [class*="mb-m-pills"]) li:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html [class*="mb-m-pills"]) li:hover {
  background: var(--mb-tint); border-color: var(--mb-acc); color: var(--mb-fg);
  box-shadow: var(--shadow-2); transform: translateY(-2px);
}
.e-con:has(> .elementor-widget-html [class*="mb-m-pills"]) li:hover::before,
.e-con:has(> .e-con-inner > .elementor-widget-html [class*="mb-m-pills"]) li:hover::before { transform: scale(1.6); }
.e-con:has(> .elementor-widget-html .mb-m-pillsc) ul,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-pillsc) ul { justify-content: center; }

/* ---------- FRASE DESTACADA ---------- */
.e-con:has(> .elementor-widget-html .mb-m-pull) .elementor-heading-title strong,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-pull) .elementor-heading-title strong { font-style: normal; font-weight: 700; color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-pull) .elementor-heading-title s,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-pull) .elementor-heading-title s { color: var(--ink-muted); text-decoration-thickness: 3px; text-decoration-color: var(--mb-acc); }
/* La rayita salía pegada arriba a la izquierda en las cuatro internas, y no era
   un problema de centrado: **Elementor le pone `position: absolute; inset: 0` al
   `::before` de TODO contenedor** (lo usa como capa de overlay de fondo).
   Medido en el sitio con una sonda de `getComputedStyle`: `POS=absolute
   INSET=0px/0px`. Un absolute no es flex item, así que ni `margin: 0 auto` ni
   `align-self` podían hacer nada. Con `position: static` vuelve al flujo.
   Contrapartida: este contenedor no puede usar overlay de fondo de Elementor. */
.e-con:has(> .elementor-widget-html .mb-m-pull)::before,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-pull)::before { content: ""; display: block; position: static; align-self: center; width: 44px; height: 2px; background: var(--mb-acc); margin: 0 auto 28px; }

/* ---------- DOS CAJAS CONTRASTADAS ---------- */
.e-con:has(> .elementor-widget-html .mb-m-vs) > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) > .e-con {
  border: 1px solid transparent; border-radius: var(--radius-lg); padding: 32px 28px;
  box-shadow: var(--shadow-2);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-vs) > .e-con:first-child,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) > .e-con:first-child { background: linear-gradient(160deg, var(--surface), var(--mb-tint)); }
.e-con:has(> .elementor-widget-html .mb-m-vs) > .e-con:last-child,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) > .e-con:last-child { background: var(--bg-alt); }
.e-con:has(> .elementor-widget-html .mb-m-vs) > .e-con:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) > .e-con:hover { transform: translateY(-4px); }
.e-con:has(> .elementor-widget-html .mb-m-vs) > .e-con:first-child:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) > .e-con:first-child:hover { border-color: var(--mb-acc); box-shadow: 0 2px 4px rgba(43,37,48,.06), 0 18px 36px -12px var(--mb-glow); }
.e-con:has(> .elementor-widget-html .mb-m-vs) > .e-con:last-child:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) > .e-con:last-child:hover { border-color: #B9AF98; box-shadow: var(--shadow-3); }
.e-con:has(> .elementor-widget-html .mb-m-vs) > .e-con:hover .mb-ic,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) > .e-con:hover .mb-ic { transform: rotate(-8deg) scale(1.06); }
.e-con:has(> .elementor-widget-html .mb-m-vs) .e-con:last-child .mb-ic,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) .e-con:last-child .mb-ic { background: #5C5A4E; color: #fff; }
/* Variante `vsw`: cuando el par de cajas va sobre una banda `--bg-alt`, la
   segunda caja de `vs` —que también es `--bg-alt`— desaparecería. Se invierte el
   par: la primera pasa a blanca con el ícono en el violeta de marca, y la
   segunda es la que toma el tinte de la categoría. */
.e-con:has(> .elementor-widget-html .mb-m-vsw) > .e-con:first-child,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vsw) > .e-con:first-child { background: var(--surface); border-color: var(--border); }
.e-con:has(> .elementor-widget-html .mb-m-vsw) .e-con:first-child .mb-ic,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vsw) .e-con:first-child .mb-ic { background: var(--brand); color: #fff; }
.e-con:has(> .elementor-widget-html .mb-m-vsw) > .e-con:last-child,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vsw) > .e-con:last-child { background: linear-gradient(160deg, var(--surface), var(--mb-tint)); border-color: transparent; }
.e-con:has(> .elementor-widget-html .mb-m-vsw) .e-con:last-child .mb-ic,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vsw) .e-con:last-child .mb-ic { background: var(--mb-fg); color: #fff; }
.e-con:has(> .elementor-widget-html .mb-m-vsw) > .e-con:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vsw) > .e-con:hover { border-color: var(--mb-acc); box-shadow: 0 2px 4px rgba(43,37,48,.06), 0 18px 36px -12px var(--mb-glow); }

/* ---------- REGISTRO (una fila por ítem) ---------- */
.e-con:has(> .elementor-widget-html .mb-m-ledger),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ledger) {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden;
}
.e-con:has(> .elementor-widget-html .mb-m-ledger) > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ledger) > .e-con {
  padding: 20px 26px; border-top: 1px solid var(--border);
  transition: background-color 200ms ease, padding-left 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-ledger) > .e-con:first-child,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ledger) > .e-con:first-child { border-top: 0; }
.e-con:has(> .elementor-widget-html .mb-m-ledger) > .e-con:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ledger) > .e-con:hover { background: var(--mb-tint); padding-left: 34px; }
.e-con:has(> .elementor-widget-html .mb-m-ledger) > .e-con:hover .mb-ic,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ledger) > .e-con:hover .mb-ic { background: var(--mb-fg); color: #fff; border-color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-ledger) b,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ledger) b { color: var(--ink); font-weight: 700; }
/* El <strong> de una fila destaca en el color de la categoría —es la regla general
   del sistema— y el <b> es la negrita neutra del sujeto. En la agenda de Cursos
   eso separa la fecha del nombre del curso. */
.e-con:has(> .elementor-widget-html .mb-m-ledger) strong,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ledger) strong { color: var(--mb-fg); font-weight: 700; }
.e-con:has(> .elementor-widget-html .mb-m-lfoot),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-lfoot) { background: var(--mb-tint); border-top: 1px solid var(--mb-acc); }
.e-con:has(> .elementor-widget-html .mb-m-lfoot) .elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-lfoot) .elementor-heading-title { color: var(--mb-fg); }

/* ---------- FIGURA PROVISORIA ---------- */
.e-con:has(> .elementor-widget-html .mb-m-fig),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-fig) {
  background: linear-gradient(160deg, var(--surface), var(--mb-tint));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  min-height: 360px; justify-content: center;
  box-shadow: var(--shadow-2);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-fig):hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-fig):hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(43,37,48,.06), 0 18px 36px -12px var(--mb-glow); }
.e-con:has(> .elementor-widget-html .mb-m-fig) svg,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-fig) svg { width: 168px; height: 168px; color: var(--mb-acc); margin-inline: auto; }

/* ---------- NOTAS ---------- */
.e-con:has(> .elementor-widget-html .mb-m-aside),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-aside) { border-left: 3px solid var(--mb-acc); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.e-con:has(> .elementor-widget-html .mb-m-aside) strong,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-aside) strong,
.e-con:has(> .elementor-widget-html .mb-m-nota) strong,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-nota) strong { color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-nota),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-nota) { background: var(--bg-alt); border-radius: var(--radius-lg); }

/* ---------- NÚMERO GRANDE ---------- */
.e-con:has(> .elementor-widget-html .mb-m-dato),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-dato) { background: linear-gradient(150deg, var(--surface), var(--mb-tint)); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.e-con:has(> .elementor-widget-html .mb-m-dato) .elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-dato) .elementor-heading-title { font-variant-numeric: tabular-nums; color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-dato) .elementor-heading-title small,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-dato) .elementor-heading-title small {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: 10px;
}

/* ---------- BLOQUE OSCURO ---------- */
.e-con:has(> .elementor-widget-html .mb-m-shield),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-shield) { position: relative; overflow: hidden; }
.e-con:has(> .elementor-widget-html .mb-m-shield) .mb-rings,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-shield) .mb-rings { top: 62%; opacity: .45; width: 1100px; height: 1100px; -webkit-mask-image: none; mask-image: none; }
.e-con:has(> .elementor-widget-html .mb-m-shield) > .e-con-inner > .elementor-element,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-shield) > .e-con-inner > .elementor-element,
.e-con:has(> .elementor-widget-html .mb-m-shield) > .e-con-inner > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-shield) > .e-con-inner > .e-con { position: relative; z-index: 1; }
.e-con:has(> .elementor-widget-html .mb-m-shield) .elementor-heading-title strong,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-shield) .elementor-heading-title strong { font-style: normal; font-weight: 700; }

/* ---------- CITA DEL CTA (un Editor de texto, dos párrafos) ---------- */
.e-con:has(> .elementor-widget-html .mb-m-quote) p,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-quote) p { margin: 0; }
.e-con:has(> .elementor-widget-html .mb-m-quote) p:first-child,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-quote) p:first-child {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(20px, 2.6vw, 28px); line-height: 1.45; color: var(--ink);
}
.e-con:has(> .elementor-widget-html .mb-m-quote) p + p,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-quote) p + p {
  margin-top: 16px; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: .04em; color: var(--mb-fg);
}

/* ---------- CTA: los tres botones ---------- */
.e-con:has(> .elementor-widget-html .mb-m-ctab),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ctab) { flex-wrap: wrap; }
.e-con:has(> .elementor-widget-html .mb-m-cta) .elementor-button,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-cta) .elementor-button {
  min-height: 44px; display: inline-flex; align-items: center; gap: 9px;
  transition: background-color 180ms ease, box-shadow 180ms ease,
              color 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-cta) .elementor-button:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-cta) .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* ============================================================
   TIPOGRAFÍA DE LOS TÍTULOS — obligada, no decorativa
   ============================================================
   Verificado en el sitio real el 2026-08-03: de un widget **Encabezado**
   Elementor importa `title_color` y `align`, y **descarta todo el grupo
   `title_typography_*`** (el CSS que genera para la página no tiene ni una
   `font-family`, `font-size` ni `text-transform` de heading). Los títulos salían
   con la tipografía del kit: los antetítulos en Fraunces minúsculas en vez de
   Bricolage mayúsculas, y los títulos de tarjeta más grandes de lo previsto.

   Así que la escala de titulares se define acá, por etiqueta + contexto. Ventaja
   sobre el setting: se puede usar `clamp()`, que el widget no acepta.
   El mapa de etiquetas lo pone `bloques_internas.py`:
     h1 título de página · h2 título de sección (o cita del bloque oscuro / CTA)
     h3 título de tarjeta (o frase destacada) · h4 tarjeta horizontal, rótulo de
     dos cajas, pie del registro · h6 antetítulo
   Si en el editor se cambia la tipografía de un título a mano, ese cambio gana:
   el CSS por elemento de Elementor tiene más especificidad que estas reglas. */

body:has(.mb-m) .elementor-widget-heading .elementor-heading-title { text-wrap: balance; }

/* antetítulo */
body:has(.mb-m) .elementor-widget-heading h6.elementor-heading-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: var(--text-eyebrow);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}
/* título de página */
body:has(.mb-m) .elementor-widget-heading h1.elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -.015em;
}
/* título de sección */
body:has(.mb-m) .elementor-widget-heading h2.elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.18;
}
/* título de tarjeta */
body:has(.mb-m) .elementor-widget-heading h3.elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: var(--text-h3); line-height: 1.25;
}
body:has(.mb-m) .elementor-widget-heading h4.elementor-heading-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: var(--text-body-lg); line-height: 1.3;
}

/* --- los contextos que se salen de la escala de arriba --- */

/* frase destacada: Fraunces itálica grande */
.e-con:has(> .elementor-widget-html .mb-m-pull) h3.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-pull) h3.elementor-heading-title {
  font-weight: 600; font-style: italic; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.35;
}
/* bloque oscuro: la cita es lo más grande de la página */
.e-con:has(> .elementor-widget-html .mb-m-shield) h2.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-shield) h2.elementor-heading-title {
  font-weight: 600; font-style: italic; font-size: clamp(26px, 4vw, 42px);
  line-height: 1.28; letter-spacing: -.01em;
}
/* la pregunta del CTA va un paso más abajo que un título de sección */
.e-con:has(> .elementor-widget-html .mb-m-cta) h2.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-cta) h2.elementor-heading-title {
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25;
}
/* rótulo de las dos cajas contrastadas: etiqueta, no título */
.e-con:has(> .elementor-widget-html .mb-m-vs) h4.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-vs) h4.elementor-heading-title {
  font-size: var(--text-eyebrow); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
/* pie del registro: remate, en Fraunces */
.e-con:has(> .elementor-widget-html .mb-m-lfoot) h4.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-lfoot) h4.elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: var(--text-h3); line-height: 1.35;
}

/* Un <strong> dentro de un párrafo destaca con el color de la categoría; para
   negrita neutra (el sujeto de cada fila del registro) se usa <b>. */
body:has(.mb-m) .elementor-widget-text-editor strong { color: var(--mb-fg); }
body:has(.mb-m) .elementor-widget-text-editor b { color: var(--ink); font-weight: 700; }

/* ---------- piezas propias de Nutrición ---------- */

/* el número grande: "3 o 4 veces por día". El dato es del texto y sostiene el
   argumento (la oportunidad se repite toda la vida), así que se muestra como
   dato y no como una frase más. */
.e-con:has(> .elementor-widget-html .mb-m-dato) h2.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-dato) h2.elementor-heading-title {
  font-size: clamp(52px, 8vw, 88px); line-height: .9; color: var(--mb-fg); white-space: nowrap;
}

/* "No existen las <s>dietas</s>": la palabra tachada es del texto, que dice
   literalmente "no hay dieta; no existen las dietas". */
.e-con:has(> .elementor-widget-html .mb-m-nodieta),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-nodieta) {
  background: var(--surface); border: 1px solid var(--mb-acc);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.e-con:has(> .elementor-widget-html .mb-m-nodieta) h2.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-nodieta) h2.elementor-heading-title {
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15;
}
.e-con:has(> .elementor-widget-html .mb-m-nodieta) s,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-nodieta) s {
  color: var(--ink-muted); text-decoration-thickness: 3px; text-decoration-color: var(--mb-acc);
}

/* tarjeta de "momento" (elegir / preparar / compartir la mesa): la misma caja de
   una tarjeta normal, con una lista de pills adentro */
.e-con:has(> .elementor-widget-html .mb-m-momentos) { flex-wrap: wrap; align-items: flex-start; }
.e-con:has(> .elementor-widget-html .mb-m-momentos) > .e-con {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-2);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-momentos) > .e-con:hover {
  transform: translateY(-4px); border-color: var(--mb-acc);
  box-shadow: 0 2px 4px rgba(43,37,48,.06), 0 18px 36px -12px var(--mb-glow);
}
.e-con:has(> .elementor-widget-html .mb-m-momentos) > .e-con:hover .elementor-heading-title { color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-momentos) > .e-con:hover .mb-ic { background: var(--mb-fg); color: #fff; }

/* ---------- ACORDEÓN (mb-m-acc) ----------
   El acordeón del template viejo de PNL era un widget HTML con su CSS y su JS: se
   veía bien pero **el texto no se podía editar**. Acá cada panel es un Editor de
   texto con `<details><summary>`, así que sigue siendo un widget nativo.

   **Sin JS y accesible sin esfuerzo:** `<details>` es un elemento nativo, responde
   a Enter y Espacio, y los lectores de pantalla lo anuncian como desplegable. Es
   mejor que el `<button>` + `aria-expanded` que pide `sistema-de-diseno.md` §8,
   porque no hay estado que se pueda desincronizar.

   Si TinyMCE llegara a aplanar el `<details>` al editar en modo visual, el panel
   queda abierto y el texto visible: se pierde el plegado, no el contenido. */
.e-con:has(> .elementor-widget-html .mb-m-acc) details,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-acc) details[open],
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) details[open] {
  border-color: var(--mb-acc); box-shadow: var(--shadow-2);
}
.e-con:has(> .elementor-widget-html .mb-m-acc) summary,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) summary {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; min-height: 44px; cursor: pointer; list-style: none;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: var(--text-body-lg); color: var(--ink); transition: color 200ms ease;
}
/* El disco con la inicial: es el acrónimo hecho visible, y lo que le daba
   carácter al acordeón del template viejo. La letra va en el markup (`<b>S</b>`)
   y no por contador CSS, porque no se deduce de la posición: es la inicial del
   título, y si se reordenan los paneles tiene que seguir a su panel. */
.e-con:has(> .elementor-widget-html .mb-m-acc) summary > b,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) summary > b {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mb-tint); color: var(--mb-fg);
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 15px;
  line-height: 1; transition: background-color 220ms ease, color 220ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-acc) details[open] summary > b,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) details[open] summary > b {
  background: var(--mb-fg); color: #fff;
}
.e-con:has(> .elementor-widget-html .mb-m-acc) summary::-webkit-details-marker,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) summary::-webkit-details-marker { display: none; }
.e-con:has(> .elementor-widget-html .mb-m-acc) summary:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) summary:hover { color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-acc) summary:focus-visible,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-sm);
}
/* el chevron: dos bordes rotados, sin imagen ni ícono aparte */
.e-con:has(> .elementor-widget-html .mb-m-acc) summary::after,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: 0 4px 0 auto;
  border-right: 1.8px solid var(--ink-muted); border-bottom: 1.8px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 220ms ease, border-color 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-acc) summary:hover::after,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) summary:hover::after,
.e-con:has(> .elementor-widget-html .mb-m-acc) details[open] summary::after,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) details[open] summary::after {
  border-color: var(--mb-fg);
}
.e-con:has(> .elementor-widget-html .mb-m-acc) details[open] summary::after,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
/* el contenido arranca alineado con el título, no con el disco: 22 de padding +
   34 del disco + 14 de gap */
.e-con:has(> .elementor-widget-html .mb-m-acc) details > *:not(summary),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-acc) details > *:not(summary) {
  padding: 0 22px 20px 70px; margin: 0; color: var(--ink-muted);
}
@media (max-width: 560px) {
  .e-con:has(> .elementor-widget-html .mb-m-acc) details > *:not(summary) { padding-left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .e-con:has(> .elementor-widget-html .mb-m-acc) summary::after { transition: none; }
}

/* ---------- FIGURA CON FOTO REAL (mb-m-figimg) ----------
   Hermana de `mb-m-fig`, para cuando la foto ya existe en la biblioteca de medios.
   `mb-m-fig` no sirve: tiene `min-height: 360px`, padding de 48 y centra un SVG de
   168px — pensado para el placeholder. Acá la imagen llena el marco. */
.e-con:has(> .elementor-widget-html .mb-m-figimg),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-figimg) {
  padding: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-2);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-figimg):hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-figimg):hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(43,37,48,.06), 0 18px 36px -12px var(--mb-glow);
}
.e-con:has(> .elementor-widget-html .mb-m-figimg) img,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-figimg) img {
  display: block; width: 100%; height: auto;
}

/* ---------- FOTO SUBIDA DENTRO DEL MARCO PROVISORIO ----------
   Cuando la foto se carga desde Elementor sobre un capítulo que todavía tenía
   placeholder, el widget de imagen queda como hermano del marcador `mb-m-fig`, no
   de `mb-m-figimg`. Entonces siguen aplicando el `min-height: 360px` y el degradado
   del marco provisorio: eso es la franja clara arriba y abajo de la foto. Con una
   imagen adentro, el marco pasa a comportarse como `mb-m-figimg`.

   Poner el min-height en 0 desde el panel de Elementor NO alcanza: `.e-con:has(…)`
   pesa más que la regla base que lee `--min-height`. Y el `gap: 0` va porque el
   marcador, aunque esté oculto, sigue contando como hijo para el espaciado. */
.e-con:has(> .elementor-widget-html .mb-m-fig):has(> .elementor-widget-image),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-fig):has(> .e-con-inner > .elementor-widget-image) {
  min-height: 0; padding: 0; gap: 0; overflow: hidden;
  background: var(--surface);
}
.e-con:has(> .elementor-widget-html .mb-m-fig) img,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-fig) img {
  display: block; width: 100%; height: auto;
}

/* ---------- LÍNEA DE TIEMPO (mb-m-tl) ----------
   El timeline del template viejo de Trayectoria era un widget HTML con su propio
   CSS y su propio JS: se veía bien pero **el texto no se podía editar**, que es el
   requisito que hizo rearmar todo el sitio. Acá los años y las frases son widgets
   nativos y esto pone la línea, los puntos y la animación.

   **Sin JS.** La animación va con `animation-timeline: view()` (scroll-driven), y
   el estado inicial vive DENTRO de `@supports`: si el navegador no la soporta, el
   timeline se ve completo y quieto en vez de quedar invisible. Es el mismo motivo
   por el que los reveal viejos están listados en el `prefers-reduced-motion` de
   `design-tokens.css`.

   Aprovecha algo que en otros bloques molesta: **Elementor pone el `::before` de
   todo contenedor en `position: absolute`** (lo usa como overlay). Para una línea
   y unos puntos posicionados, eso es justo lo que hace falta. */
.e-con:has(> .elementor-widget-html .mb-m-tl),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl) {
  position: relative; flex-wrap: wrap; align-items: flex-start;
  padding-top: 44px; margin-top: 12px;
}
/* la línea de fondo, gris */
.e-con:has(> .elementor-widget-html .mb-m-tl)::before,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl)::before {
  content: ""; position: absolute; inset: auto; top: 36px; left: 0; right: 0;
  height: 2px; background: var(--border); border-radius: 2px;
}
/* la línea de color que crece */
.e-con:has(> .elementor-widget-html .mb-m-tl)::after,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl)::after {
  content: ""; position: absolute; inset: auto; top: 36px; left: 0;
  width: 100%; height: 2px; background: var(--mb-acc); border-radius: 2px;
}
/* cada hito */
.e-con:has(> .elementor-widget-html .mb-m-tl) > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl) > .e-con {
  position: relative; text-align: center; padding: 0 6px;
}
/* el punto sobre la línea */
.e-con:has(> .elementor-widget-html .mb-m-tl) > .e-con::before,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl) > .e-con::before {
  content: ""; position: absolute; inset: auto; top: -15px; left: 50%;
  width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--mb-acc);
  transition: background-color 200ms ease, transform 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-tl) > .e-con:hover::before,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl) > .e-con:hover::before {
  background: var(--mb-fg); border-color: var(--mb-fg); transform: scale(1.25);
}
/* el año y la frase */
.e-con:has(> .elementor-widget-html .mb-m-tl) h4.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl) h4.elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 19px;
  line-height: 1.1; color: var(--mb-fg); font-variant-numeric: tabular-nums;
}
.e-con:has(> .elementor-widget-html .mb-m-tl) p,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl) p { margin: 0; }

@supports (animation-timeline: view()) {
  @keyframes mb-tl-grow { from { width: 0; } to { width: 100%; } }
  @keyframes mb-tl-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .e-con:has(> .elementor-widget-html .mb-m-tl)::after,
  .e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl)::after {
    animation: mb-tl-grow linear both;
    animation-timeline: view(); animation-range: entry 25% cover 55%;
  }
  .e-con:has(> .elementor-widget-html .mb-m-tl) > .e-con,
  .e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl) > .e-con {
    animation: mb-tl-in linear both;
    animation-timeline: view(); animation-range: entry 20% cover 42%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .e-con:has(> .elementor-widget-html .mb-m-tl)::after,
  .e-con:has(> .elementor-widget-html .mb-m-tl) > .e-con { animation: none !important; }
  .e-con:has(> .elementor-widget-html .mb-m-tl)::after { width: 100%; }
  .e-con:has(> .elementor-widget-html .mb-m-tl) > .e-con { opacity: 1; transform: none; }
}
/* En teléfono la línea pasa a vertical y los puntos al costado: siete columnas de
   150px no entran, y apilarlas sin mover la línea deja los puntos flotando. */
@media (max-width: 900px) {
  .e-con:has(> .elementor-widget-html .mb-m-tl),
  .e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-tl) {
    padding-top: 0; padding-left: 34px; flex-direction: column; gap: 26px;
  }
  .e-con:has(> .elementor-widget-html .mb-m-tl)::before,
  .e-con:has(> .elementor-widget-html .mb-m-tl)::after {
    top: 8px; bottom: 8px; left: 6px; right: auto; width: 2px; height: auto;
  }
  @supports (animation-timeline: view()) {
    @keyframes mb-tl-grow-v { from { height: 0; } to { height: 100%; } }
    .e-con:has(> .elementor-widget-html .mb-m-tl)::after {
      bottom: auto; height: 100%; animation-name: mb-tl-grow-v;
    }
  }
  .e-con:has(> .elementor-widget-html .mb-m-tl) > .e-con {
    text-align: left; padding: 0; width: 100%;
  }
  .e-con:has(> .elementor-widget-html .mb-m-tl) > .e-con::before {
    top: 4px; left: -34px; margin-left: 0;
  }
}

/* ---------- piezas propias de Formación en PNL ---------- */

/* --- ficha de la formación: 4 datos duros, montada sobre el borde del header.
   El solapado es lo que hace que header y ficha se lean como dos capas y no como
   dos bandas pegadas. La sección que la contiene va con padding vertical 0. --- */
.e-con:has(> .elementor-widget-html .mb-m-ficha),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ficha) {
  position: relative; z-index: 2; margin-top: -62px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden;
}
/* `flex` y no un `width` en px: así los cuatro reparten el ancho que haya y en
   tablet envuelven 2+2 sin necesitar un breakpoint propio. */
.e-con:has(> .elementor-widget-html .mb-m-ficha) > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ficha) > .e-con {
  flex: 1 1 200px; min-width: 0;
  padding: 26px 20px; border-left: 1px solid var(--border);
  transition: background-color 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-ficha) > .e-con:first-child,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ficha) > .e-con:first-child { border-left: 0; }
.e-con:has(> .elementor-widget-html .mb-m-ficha) > .e-con:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ficha) > .e-con:hover { background: var(--mb-tint); }
/* el ícono acá va suelto, sin el disco de `.mb-ic` */
.e-con:has(> .elementor-widget-html .mb-m-ficha) svg,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ficha) svg { width: 24px; height: 24px; color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-ficha) h3.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ficha) h3.elementor-heading-title { font-size: 21px; line-height: 1.15; }
.e-con:has(> .elementor-widget-html .mb-m-ficha) h6.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-ficha) h6.elementor-heading-title { letter-spacing: .06em; }

/* --- número fantasma de una tarjeta (los tres ejes): el dígito grande y
   translúcido en la esquina. Sale de un contador, así que no hay un widget de
   texto por tarjeta que se pueda desincronizar del orden real. --- */
.e-con:has(> .elementor-widget-html .mb-m-num),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-num) { counter-reset: mbeje; }
.e-con:has(> .elementor-widget-html .mb-m-num) > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-num) > .e-con { counter-increment: mbeje; position: relative; overflow: hidden; }
.e-con:has(> .elementor-widget-html .mb-m-num) > .e-con::after,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-num) > .e-con::after {
  content: counter(mbeje); position: absolute; top: 6px; right: 20px;
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 64px; line-height: 1;
  color: var(--mb-acc); opacity: .18; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-num) > .e-con:hover::after,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-num) > .e-con:hover::after { opacity: .34; transform: translateY(-2px) scale(1.04); }

/* --- pill sólida (el "Buenos Aires" de los módulos presenciales). Se llama
   `pillsolid` a propósito: el selector base de las pills es
   `[class*="mb-m-pills"]`, así que hereda el layout y acá solo cambian colores. */
.e-con:has(> .elementor-widget-html .mb-m-pillsolid) li,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-pillsolid) li {
  background: var(--mb-fg); border-color: var(--mb-fg); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; box-shadow: none;
}
.e-con:has(> .elementor-widget-html .mb-m-pillsolid) li::before,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-pillsolid) li::before { display: none; }
.e-con:has(> .elementor-widget-html .mb-m-pillsolid) li:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-pillsolid) li:hover {
  background: var(--mb-fg); border-color: var(--mb-fg); color: #fff; transform: none;
}

/* --- los 6 módulos del programa --- */
.e-con:has(> .elementor-widget-html .mb-m-mods),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) { flex-wrap: wrap; align-items: stretch; }
.e-con:has(> .elementor-widget-html .mb-m-mods) > .e-con,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) > .e-con {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 24px 24px; box-shadow: var(--shadow-2);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-mods) > .e-con:hover,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) > .e-con:hover {
  transform: translateY(-4px); border-color: var(--mb-acc);
  box-shadow: 0 2px 4px rgba(43,37,48,.06), 0 18px 36px -12px var(--mb-glow);
}
/* El presencial se distingue por tener la pill de ciudad, no por su posición en
   la fila: si el orden cambia en el editor, el tinte sigue al módulo correcto. */
.e-con:has(> .elementor-widget-html .mb-m-mods) > .e-con:has(.mb-m-pillsolid),
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) > .e-con:has(.mb-m-pillsolid) {
  background: linear-gradient(160deg, #FDF6EA, var(--mb-tint)); border-color: var(--mb-acc);
}
.e-con:has(> .elementor-widget-html .mb-m-mods) h3.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) h3.elementor-heading-title {
  font-size: 18px; line-height: 1.25; transition: color 200ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-mods) > .e-con:hover h3.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) > .e-con:hover h3.elementor-heading-title { color: var(--mb-fg); }
.e-con:has(> .elementor-widget-html .mb-m-mods) h6.elementor-heading-title,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) h6.elementor-heading-title { letter-spacing: .1em; }
/* La cabecera del módulo (disco + antetítulo + título) mide lo mismo en los
   seis: los títulos ocupan 2 o 3 líneas según el largo, y sin esto las seis
   listas de temas arrancan a distinta altura y la grilla se lee desprolija.
   OJO con el selector: la tarjeta es un contenedor `full`, y un contenedor full
   NO genera `.e-con-inner` (solo los boxed) — la cabecera es hija directa. */
.e-con:has(> .elementor-widget-html .mb-m-mods) > .e-con > .e-con:first-child,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) > .e-con > .e-con:first-child { min-height: 88px; }
/* la lista de temas del módulo: un <ul> normal del Editor de texto */
.e-con:has(> .elementor-widget-html .mb-m-mods) ul,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) ul { list-style: none; margin: 0; padding: 0; }
.e-con:has(> .elementor-widget-html .mb-m-mods) li,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) li {
  position: relative; padding-left: 18px; margin-top: 7px;
  font-size: var(--text-small); line-height: 1.55;
}
.e-con:has(> .elementor-widget-html .mb-m-mods) li::before,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mb-acc);
}
/* El número del módulo va en un widget HTML porque es estructura, no copy: el
   ordinal editable ya está en el antetítulo ("MÓDULO 4 · PRESENCIAL"). */
.mb-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--mb-acc); background: var(--mb-tint); color: var(--mb-fg);
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 20px; line-height: 1;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
body:has(.mb-m) .elementor-widget-html > .elementor-widget-container:has(> .mb-num) { line-height: 0; }
.e-con:has(> .elementor-widget-html .mb-m-mods) > .e-con:hover .mb-num,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-m-mods) > .e-con:hover .mb-num {
  background: var(--mb-fg); color: #fff; border-color: var(--mb-fg);
}

/* ---------- HOME: los dos antetítulos ----------
   La home tiene el mismo problema que tenían las internas —de un Encabezado
   Elementor descarta `title_typography_*`— y sus antetítulos ("PNL y Salud" en
   el hero, "Trayectoria" en la bio) salían en Fraunces minúsculas en vez de
   Bricolage mayúsculas. Van con `tag="div"` y 13px, así que se los identifica
   por eso. `body.home` es una clase que pone WordPress, no Elementor. */
body.home .elementor-widget-heading div.elementor-heading-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: var(--text-eyebrow);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}

/* ---------- responsive ----------
   Los anchos van en px (el % no se importa), así que el apilado se fuerza acá:
   con flex-wrap en el padre, en tablet las tarjetas envuelven solas; en teléfono
   pasan a ancho completo. */
@media (max-width: 767px) {
  /* todo hijo directo de un bloque marcado pasa a ancho completo: los anchos
     van en px porque el % no se importa, así que el apilado se fuerza acá */
  .e-con:has(> .elementor-widget-html [class*="mb-m-"]) > .e-con,
  .e-con:has(> .e-con-inner > .elementor-widget-html [class*="mb-m-"]) > .e-con-inner > .e-con { width: 100%; }
  .e-con:has(> .elementor-widget-html .mb-m-ledger) > .e-con:hover { padding-left: 24px; }
  .e-con:has(> .elementor-widget-html .mb-m-fig) svg { width: 120px; height: 120px; }
  .e-con:has(> .elementor-widget-html .mb-m-fig) { min-height: 240px; }
  /* la ficha apilada: los separadores pasan de vertical a horizontal y el
     solapado sobre el header se acorta */
  .e-con:has(> .elementor-widget-html .mb-m-ficha) { margin-top: -44px; }
  .e-con:has(> .elementor-widget-html .mb-m-ficha) > .e-con { border-left: 0; border-top: 1px solid var(--border); }
  .e-con:has(> .elementor-widget-html .mb-m-ficha) > .e-con:first-child { border-top: 0; }
  /* el dígito fantasma de los ejes no compite con el texto en pantalla chica */
  .e-con:has(> .elementor-widget-html .mb-m-num) > .e-con::after { font-size: 48px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.mb-m) .e-con,
  body:has(.mb-m) .elementor-button,
  body:has(.mb-m) li,
  body:has(.mb-m) .mb-ic { transition: none !important; }
}

/* ================================================================================
   HEADER DE CATEGORÍA CON FIGURA (mb-m-hdf)
   Variante aprobada el 2026-08-15 para el hero de las internas: texto a la
   izquierda, la ilustración de la categoría a la derecha recortada en arco, y las
   piezas entrando en cascada al cargar.

   El marcador del contenedor trae las dos clases —`mb-m-hd mb-m-hdf`— así que todo
   lo del header estándar (anillos, la itálica en color, los links del breadcrumb)
   se hereda y acá va sólo lo propio de la variante.

   Nada se engancha por `nth-child`: dentro de la columna de texto cada pieza es de
   un tipo de widget distinto (html = sello, heading = H1, text-editor = bajada,
   e-con = chips), y las dos columnas se distinguen por el marcador `mb-m-hdimg`.
   Agregar un widget no rompe la cascada.
   ============================================================================== */

/* la fila y su halo: profundidad detrás de la ilustración, sin tocar el markup.
   El `padding: 0` alinea la columna de texto con el breadcrumb: Elementor le pone
   10px de padding por defecto a todo contenedor, y el breadcrumb —que es un widget,
   no un contenedor— no los tiene, así que quedaban corridos entre sí. */
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con { position: relative; padding: 0; }
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 7%; top: -7%; width: 300px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--mb-glow), transparent 72%);
}
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con > .e-con { position: relative; z-index: 1; }

/* el sello: más chico que en el header centrado y pegado al margen izquierdo
   (hay una regla general que centra todo SVG de widget HTML) */
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) svg[class^="mb-cat-"] {
  width: 76px; height: 76px; margin-inline: 0;
}

/* el H1 pesa más: a 44px el interletrado por defecto queda flojo */
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) h1.elementor-heading-title { letter-spacing: -.015em; }

/* el marco en arco — el radio superior repite la geometría del sello y de los
   anillos; no es una forma nueva en el sistema */
.e-con:has(> .elementor-widget-html .mb-m-hdimg) {
  /* padding 0: Elementor le da 10px por defecto a todo contenedor y quedaba un
     anillo claro entre el borde del marco y la ilustración. */
  padding: 0;
  border-radius: 240px 240px var(--radius-lg) var(--radius-lg);
  overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-3);
  background: var(--surface);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.e-con:has(> .elementor-widget-html .mb-m-hdimg):hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(43,37,48,.06), 0 22px 44px -14px var(--mb-glow);
}
/* La proporción la fija la IMAGEN, no el contenedor: las siete ilustraciones son
   apaisadas (1350x950) y a ancho completo el arco las dejaba como un iglú. Con
   4/3.4 el recorte es vertical y el arco cierra arriba. Va acá y no en el
   contenedor porque `aspect-ratio` sobre un contenedor flex de Elementor lo
   resuelve el contenido y termina ignorándose. */
.e-con:has(> .elementor-widget-html .mb-m-hdimg) img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3.4; object-fit: cover;
}

/* ---------- la entrada, sin una línea de JS ----------
   Cada pieza arranca desplazada y opaca DENTRO del keyframe, no en una regla
   suelta: si el navegador no soportara animaciones, el hero se ve entero y quieto
   en vez de quedar invisible. Es el mismo criterio que el timeline. */
@keyframes mbHdRise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mbHdSeal  { from { opacity: 0; transform: scale(.82); }      to { opacity: 1; transform: none; } }
@keyframes mbHdArt   { from { opacity: 0; transform: scale(1.06); }     to { opacity: 1; transform: none; } }
/* los anillos conservan su centrado: el translate va dentro del keyframe */
@keyframes mbHdRings { from { opacity: 0; transform: translate(-50%,-50%) scale(.88); } to { opacity: .32; transform: translate(-50%,-50%) scale(1); } }

.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) .mb-rings {
  animation: mbHdRings 1500ms cubic-bezier(.22,.61,.36,1) both;
}
/* breadcrumb: el `width: 100%` es lo que lo deja pegado al margen izquierdo. La
   sección centra a sus hijos (flex_align_items: center) y el widget, que mide lo
   que su contenido, quedaba centrado aunque su texto esté alineado a la izquierda. */
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .elementor-widget-text-editor {
  width: 100%;
  animation: mbHdRise 760ms 90ms cubic-bezier(.22,.61,.36,1) both;
}
/* columna de texto: sello, título, bajada y chips, uno detrás de otro. Los caminos
   son explícitos porque en el header de curso la columna derecha también tiene
   headings y widgets HTML —los cuatro datos— y no tienen que animarse por separado. */
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con > .e-con:not(:has(> .elementor-widget-html :is(.mb-m-hdimg, .mb-m-hdcard))) > .elementor-widget-html {
  animation: mbHdSeal 780ms 220ms cubic-bezier(.34,1.32,.5,1) both;
}
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con > .e-con:not(:has(> .elementor-widget-html :is(.mb-m-hdimg, .mb-m-hdcard))) > .elementor-widget-heading {
  animation: mbHdRise 760ms 340ms cubic-bezier(.22,.61,.36,1) both;
}
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con > .e-con:not(:has(> .elementor-widget-html :is(.mb-m-hdimg, .mb-m-hdcard))) > .elementor-widget-text-editor {
  animation: mbHdRise 760ms 460ms cubic-bezier(.22,.61,.36,1) both;
}
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con > .e-con:not(:has(> .elementor-widget-html :is(.mb-m-hdimg, .mb-m-hdcard))) > .e-con {
  animation: mbHdRise 760ms 580ms cubic-bezier(.22,.61,.36,1) both;
}
/* la ilustración entra con un acercamiento leve mientras el texto sube */
.e-con:has(> .elementor-widget-html .mb-m-hdimg) {
  animation: mbHdArt 1000ms 240ms cubic-bezier(.22,.61,.36,1) both;
}

/* El marcador es un widget oculto, pero en una fila **sigue siendo un flex item**:
   se lleva su propio ancho más el gap. Medido en el sitio: 56px, y con eso las dos
   columnas (600 + 46 + 446 = 1092) no entraban en los 1140 del contenido, la fila
   envolvía y la ilustración caía debajo del texto. Sacarlo del flujo lo arregla sin
   tocar el markup —el `:has` lo sigue viendo—. En el header centrado no se notaba
   porque en una columna el marcador solo suma altura. */
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con > .elementor-widget-html {
  position: absolute;
}

/* El marcador es un widget oculto pero sigue siendo hijo: sin esto hereda la
   animación del sello y reserva su lugar animándose. */
.e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .elementor-widget-html { animation: none; }


/* ---------- LA FICHA DENTRO DEL HEADER (mb-m-hdcard) ----------
   Las tres páginas del submenú Cursos no tienen ilustración propia, pero sí datos
   duros. Los cuatro que vivían en un bloque suelto debajo del header suben acá. */
.e-con:has(> .elementor-widget-html .mb-m-hdcard) {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  padding: 6px 22px 22px;
  animation: mbHdCard 820ms 380ms cubic-bezier(.22,.61,.36,1) both;
}
/* una línea entre datos: el primero no la lleva porque lo precede el marcador,
   que es un widget y no un contenedor */
.e-con:has(> .elementor-widget-html .mb-m-hdcard) > .e-con {
  padding: 14px 2px;
}
.e-con:has(> .elementor-widget-html .mb-m-hdcard) > .e-con + .e-con {
  border-top: 1px solid var(--border);
}
.e-con:has(> .elementor-widget-html .mb-m-hdcard) svg { color: var(--mb-fg); }
/* el botón cierra la tarjeta a todo el ancho */
.e-con:has(> .elementor-widget-html .mb-m-hdcard) > .elementor-widget-button { margin-top: 16px; }
.e-con:has(> .elementor-widget-html .mb-m-hdcard) .elementor-button { width: 100%; }

@keyframes mbHdCard { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  /* la fila se apila; el ancho al 100% ya lo da la regla general de arriba */
  .e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con { flex-direction: column; gap: 24px; }
  /* la ilustración sube al primer golpe de vista: en una pantalla angosta es lo
     único que da peso antes del primer scroll. El breadcrumb no se mueve —cuelga
     de la sección, no de la fila— así que la navegación sigue arriba de todo. */
  .e-con:has(> .elementor-widget-html .mb-m-hdimg) {
    order: -1; border-radius: 170px 170px var(--radius) var(--radius);
  }
  .e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) svg[class^="mb-cat-"] { width: 64px; height: 64px; }
  /* el halo no aporta nada a 390px y se come el contraste del texto */
  .e-con:has(> .e-con-inner > .elementor-widget-html :is(.mb-m-hdf, .mb-m-hdc)) > .e-con-inner > .e-con::after { display: none; }
}

/* ==========================================================================
   NOTAS — el listado que arma el shortcode [mb_notas] (functions.php)
   Todo cuelga de .mb-notas: no toca ningún selector de Elementor, así que no
   puede afectar al resto del sitio.
   El color de cada tarjeta llega en --c / --c-fg / --c-tint desde el PHP,
   según la categoría de la entrada; el default es el violeta de marca.
   ========================================================================== */
.mb-notas { --c: var(--brand); --c-fg: var(--brand); --c-tint: var(--brand-tint);
  display: flex; flex-direction: column; gap: 34px; width: 100%; }

/* Las fuentes hay que declararlas: `design-tokens.css` no define tipografía
   global — de eso se encarga el kit de Elementor, y solo para SUS widgets.
   Todo lo que sale de un shortcode o de un filtro cae en el stack por defecto
   del tema padre. Medido el 2026-09-05: títulos y cuerpo del listado estaban
   en `-apple-system`. En las previews no se nota porque ahí el <body> ya trae
   las dos familias. */
.mb-notas, .mb-single { font-family: "Bricolage Grotesque", "Segoe UI", sans-serif; }
.mb-notas :is(h1, h2, h3, h4),
.mb-single :is(h1, h2, h3, h4) { font-family: "Fraunces", Georgia, serif; }
/* El .e-con-inner de la sección tiene align-items:center (el default de
   seccion()) y en un flex column eso deja al hijo con el ancho de su
   contenido: medido el 2026-09-05, el listado salía a 542px dentro de 1140.
   Los widgets nativos no lo sufren porque Elementor ya les pone width:100%;
   el widget Shortcode, no. El JSON también lo corrige con align="stretch",
   esto cubre el caso de reimportar un template viejo. */
.elementor-widget-shortcode:has(.mb-notas) { width: 100%; align-self: stretch; }

/* ---------- filtros ---------- */
.mb-n-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mb-n-chips .mb-n-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  font-size: var(--text-small); font-weight: 600; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow-1);
  transition: background-color 180ms ease, border-color 180ms ease,
              color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.mb-n-chips .mb-n-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--c); transition: transform 180ms ease;
}
.mb-n-chips .mb-n-chip:hover, .mb-n-chips .mb-n-chip:focus-visible {
  background: var(--c-tint); border-color: var(--c); color: var(--c-fg);
  box-shadow: var(--shadow-2); transform: translateY(-2px);
}
.mb-n-chips .mb-n-chip:hover::before { transform: scale(1.6); }
.mb-n-chips .mb-n-chip[aria-current="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-2);
}
.mb-n-chips .mb-n-chip[aria-current="true"]::before { background: #fff; transform: scale(1.6); }

/* ---------- rótulo de la grilla ---------- */
.mb-n-rail { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.mb-n-rail h2 { font-size: 26px; margin: 0; color: var(--ink); }
.mb-n-rail span {
  font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}

/* ---------- piezas compartidas ---------- */
.mb-n-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-n-badge, .mb-n-kind {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.mb-n-badge { gap: 7px; padding-left: 9px; background: var(--c-tint); color: var(--c-fg); }
.mb-n-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none;
}
.mb-n-kind { background: var(--bg-alt); color: var(--ink); }
.mb-n-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--text-eyebrow); font-weight: 600; color: var(--ink-muted);
}
.mb-n-meta i { font-style: normal; opacity: .5; }
.mb-n-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-small); font-weight: 700; color: var(--c-fg);
}
.mb-n-more svg { width: 15px; height: 15px; transition: transform 200ms ease; }

/* El <a> del título estira su área de clic a toda la tarjeta: un solo <a> real
   por nota (Tab, click derecho, abrir en pestaña nueva) y ningún <a> anidado. */
.mb-n-feat .mb-n-link, .mb-n-card .mb-n-link { color: inherit; text-decoration: none; }
.mb-n-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mb-n-link:focus-visible { outline: none; }
.mb-n-feat:has(.mb-n-link:focus-visible), .mb-n-card:has(.mb-n-link:focus-visible) {
  outline: 3px solid var(--brand); outline-offset: 3px;
}

/* ---------- destacada ---------- */
.mb-n-feat {
  position: relative; display: grid; grid-template-columns: 1.08fr 1fr;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.mb-n-feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--c); }
.mb-n-feat:hover .mb-n-more svg { transform: translateX(4px); }
.mb-n-feat:hover h2 { color: var(--c-fg); }
.mb-n-feat-media { position: relative; background: var(--c-tint); }
.mb-n-feat-media img {
  display: block; width: 100%; height: 100%; min-height: 340px;
  object-fit: cover; transition: transform 600ms ease;
}
.mb-n-feat:hover .mb-n-feat-media img { transform: scale(1.03); }
.mb-n-flag {
  position: absolute; top: 18px; left: 18px; z-index: 2; padding: 7px 14px;
  border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-fg); box-shadow: var(--shadow-1);
}
.mb-n-feat-body {
  padding: 40px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 16px; justify-content: center;
}
.mb-n-feat-body h2 {
  margin: 0; font-size: 30px; line-height: 1.18; letter-spacing: -.01em;
  color: var(--ink); transition: color 200ms ease;
}
.mb-n-feat-body p { margin: 0; color: var(--ink-muted); }

/* ---------- grilla ---------- */
/* auto-FILL y no auto-fit: `auto-fit` colapsa las pistas vacías y estira lo que
   queda, así que una sola nota salía a 1140px de ancho con una miniatura de
   1140×712 — y lo mismo le pasaría a la cuarta, a la séptima… Con `auto-fill`
   la tarjeta mide siempre lo mismo, haya 1 o 12. */
.mb-n-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); }
.mb-n-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.mb-n-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--c); }
.mb-n-card:hover h3 { color: var(--c-fg); }
.mb-n-card:hover .mb-n-more svg { transform: translateX(4px); }
.mb-n-thumb { position: relative; overflow: hidden; background: var(--c-tint); }
.mb-n-thumb img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; transition: transform 600ms ease;
}
.mb-n-card:hover .mb-n-thumb img { transform: scale(1.04); }
.mb-n-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 20px 22px 24px; flex: 1;
}
.mb-n-card h3 { margin: 0; font-size: var(--text-h3); line-height: 1.25; color: var(--ink); transition: color 200ms ease; }
.mb-n-card p { margin: 0; font-size: var(--text-small); color: var(--ink-muted); }
.mb-n-body .mb-n-more { margin-top: auto; padding-top: 4px; }

/* Entrada sin imagen destacada: en vez de un hueco gris, los anillos de la
   marca sobre el tinte de la categoría y la categoría escrita en Fraunces. */
.mb-n-seal {
  aspect-ratio: 16 / 10; display: grid; place-items: center; position: relative;
  overflow: hidden; background: linear-gradient(160deg, var(--surface), var(--c-tint));
}
.mb-n-feat .mb-n-seal { aspect-ratio: auto; height: 100%; min-height: 340px; }
.mb-n-seal svg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 300px; height: 300px; opacity: .38; color: var(--c);
}
.mb-n-seal b {
  position: relative; padding: 0 24px; text-align: center;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 23px;
  letter-spacing: -.01em; color: var(--c-fg); opacity: .82;
}

/* ---------- paginación y vacío ---------- */
.mb-n-pag { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.mb-notas .mb-n-pag .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 9px 14px; border-radius: 999px;
  font-size: var(--text-small); font-weight: 700; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.mb-notas .mb-n-pag .page-numbers:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.mb-notas .mb-n-pag .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.mb-notas .mb-n-pag .page-numbers.dots { border-color: transparent; background: none; }
.mb-n-empty { text-align: center; padding: 48px 24px; color: var(--ink-muted); font-size: var(--text-body-lg); }

@media (max-width: 900px) {
  .mb-notas { gap: 26px; }
  .mb-n-feat { grid-template-columns: 1fr; }
  .mb-n-feat-media img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
  .mb-n-feat .mb-n-seal { aspect-ratio: 16 / 9; min-height: 0; }
  .mb-n-feat-body { padding: 30px 26px 32px; }
  .mb-n-feat-body h2 { font-size: 25px; }
  .mb-n-rail { flex-direction: column; gap: 6px; }
}

/* ==========================================================================
   NOTAS — SINGLE  (marcador de sección: no borrar, la preview extrae desde acá)
   La nota abierta. Todo cuelga de .mb-single, que envuelve al contenido desde
   el filtro `the_content`; el color lo pone la categoría en --c / --c-fg /
   --c-tint, igual que en las tarjetas del listado.
   ========================================================================== */
.mb-single {
  --c: var(--brand); --c-fg: var(--brand); --c-tint: var(--brand-tint);
  display: flex; flex-direction: column; gap: 64px; text-align: left;
}

/* ---------- encabezado de la nota ---------- */
/* En caja y no en banda a todo el ancho: el contenedor de Hello Elementor ya
   está acotado a 1140 y un full-bleed acá saca scroll horizontal. */
.mb-s-hd {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 44px 48px 60px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface) 0%, var(--c-tint) 100%);
  border: 1px solid var(--border);
}
.mb-s-crumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: var(--text-eyebrow); font-weight: 600; color: var(--ink-muted);
}
.mb-single .mb-s-crumbs a { color: var(--ink-muted); text-decoration: none; }
.mb-single .mb-s-crumbs a:hover { color: var(--c-fg); text-decoration: underline; text-underline-offset: 3px; }
.mb-s-crumbs i { font-style: normal; opacity: .5; }
.mb-s-hd h1 {
  margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.14;
  letter-spacing: -.015em; color: var(--ink); text-wrap: balance;
}
.mb-s-lede { margin: 0; max-width: 640px; font-size: var(--text-body-lg); color: var(--ink-muted); }

/* la portada monta sobre el borde inferior del encabezado */
.mb-s-cover { margin: -104px 0 0; }
.mb-s-cover img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 8;
  object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
}
/* El fallback conserva su `display: grid`: con `block` el nombre de la
   categoría se va al ángulo superior izquierdo en vez de quedar centrado.
   Y a este tamaño los anillos de 300px se pierden. */
.mb-s-cover .mb-n-seal {
  width: 100%; aspect-ratio: 16 / 8;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
}
.mb-s-cover .mb-n-seal svg { width: 460px; height: 460px; }
.mb-s-cover .mb-n-seal b { font-size: 30px; }
.mb-s-cover figcaption {
  margin-top: 10px; font-size: var(--text-eyebrow); color: var(--ink-muted); text-align: center;
}

/* ---------- cuerpo ---------- */
.mb-s-body {
  max-width: 700px; margin-inline: auto; width: 100%;
  font-size: var(--text-body-lg); line-height: 1.75; color: var(--ink);
}
.mb-s-body > * + * { margin-top: 1.15em; }
.mb-s-body > :first-child { margin-top: 0; }
.mb-s-body h2, .mb-s-body h3, .mb-s-body h4 {
  font-family: "Fraunces", Georgia, serif; line-height: 1.2; letter-spacing: -.01em;
  margin-top: 1.9em; margin-bottom: -.35em; color: var(--ink); text-wrap: balance;
}
.mb-s-body h2 { font-size: 28px; font-weight: 700; }
.mb-s-body h3 { font-size: 22px; font-weight: 600; }
.mb-s-body h4 { font-size: 19px; font-weight: 600; color: var(--c-fg); }
.mb-single .mb-s-body a { color: var(--c-fg); text-underline-offset: 3px; }
.mb-s-body strong { font-weight: 700; }
.mb-s-body ul, .mb-s-body ol { padding-left: 1.3em; }
.mb-s-body li + li { margin-top: .4em; }
.mb-s-body li::marker { color: var(--c-fg); font-weight: 700; }
.mb-s-body img { border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.mb-s-body figcaption {
  margin-top: 10px; font-size: var(--text-eyebrow); color: var(--ink-muted); text-align: center;
}
.mb-s-body blockquote {
  margin-inline: 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--c);
  font-family: "Fraunces", Georgia, serif; font-size: 23px; font-style: italic;
  font-weight: 600; line-height: 1.4; color: var(--ink);
}
.mb-s-body blockquote p { margin: 0; }
.mb-s-body blockquote cite {
  display: block; margin-top: 12px; font-family: inherit; font-size: var(--text-small);
  font-style: normal; font-weight: 600; color: var(--ink-muted);
}
.mb-s-body hr { border: 0; border-top: 1px solid var(--border); margin-block: 2.2em; }
.mb-s-body table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.mb-s-body th, .mb-s-body td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.mb-s-body th { font-weight: 700; background: var(--c-tint); }

/* ---------- pie: etiquetas y compartir ---------- */
.mb-s-foot {
  max-width: 700px; margin-inline: auto; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 28px; border-top: 1px solid var(--border);
}
.mb-s-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-s-tags .mb-s-tag {
  display: inline-flex; padding: 6px 13px; border-radius: 999px;
  background: var(--bg-alt); color: var(--ink); text-decoration: none;
  font-size: var(--text-eyebrow); font-weight: 600;
  transition: background-color 180ms ease, color 180ms ease;
}
.mb-s-tags .mb-s-tag:hover { background: var(--c-tint); color: var(--c-fg); }
.mb-s-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mb-s-share > span {
  font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
}
.mb-s-share .mb-s-sh {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; cursor: pointer;
  font-family: inherit; font-size: var(--text-small); font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  text-decoration: none; box-shadow: var(--shadow-1);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.mb-s-share .mb-s-sh svg { width: 15px; height: 15px; }
.mb-s-share .mb-s-sh:hover { background: var(--c-tint); border-color: var(--c); color: var(--c-fg); transform: translateY(-2px); }
.mb-s-share .mb-s-sh[data-copiado] { background: var(--c-tint); border-color: var(--c); color: var(--c-fg); }

/* ---------- seguí leyendo ---------- */
.mb-s-rel { display: flex; flex-direction: column; gap: 22px; }

/* ---------- cierre ---------- */
.mb-s-cta {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 56px 40px; border-radius: var(--radius-lg); background: var(--c-tint); text-align: center;
}
.mb-s-cta blockquote {
  margin: 0; max-width: 720px; font-family: "Fraunces", Georgia, serif;
  font-size: 21px; font-style: italic; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.mb-s-cta blockquote footer {
  margin-top: 12px; font-family: "Bricolage Grotesque", "Segoe UI", sans-serif;
  font-size: var(--text-small); font-style: normal; font-weight: 700; color: var(--ink-muted);
}
.mb-s-cta h2 { margin: 0; font-size: 28px; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.mb-s-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.mb-s-btns .mb-s-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px;
  border-radius: var(--radius); border: 1px solid transparent;
  font-size: var(--text-small); font-weight: 700; text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.mb-s-btns .mb-s-btn svg { width: 17px; height: 17px; }
.mb-s-btns .mb-s-btn:hover { transform: translateY(-2px); }
.mb-s-btns .mb-s-btn--wa { background: #25D366; color: #0B3D22; }
.mb-s-btns .mb-s-btn--wa:hover { background: #1FBE5A; color: #0B3D22; }
.mb-s-btns .mb-s-btn--primary { background: var(--brand); color: #fff; }
.mb-s-btns .mb-s-btn--primary:hover { background: var(--brand-hover); color: #fff; }
.mb-s-btns .mb-s-btn--ghost { background: var(--surface); color: var(--brand); border-color: var(--border); }
.mb-s-btns .mb-s-btn--ghost:hover { color: var(--brand-hover); border-color: var(--brand); }

@media (max-width: 780px) {
  .mb-single { gap: 44px; }
  .mb-s-hd { padding: 30px 24px 44px; gap: 14px; }
  .mb-s-cover { margin-top: -76px; }
  .mb-s-cover img, .mb-s-cover .mb-n-seal { aspect-ratio: 16 / 10; }
  .mb-s-body { font-size: var(--text-body); }
  .mb-s-body h2 { font-size: 24px; }
  .mb-s-body blockquote { font-size: 20px; padding-left: 18px; }
  .mb-s-foot { flex-direction: column; align-items: flex-start; }
  .mb-s-cta { padding: 40px 24px; }
  .mb-s-cta h2 { font-size: 24px; }
}
/* ==== FIN NOTAS — SINGLE ==== */

/* Hello Elementor imprime su propio título en .page-header; en las notas lo
   dibuja .mb-s-hd. El filtro `hello_elementor_page_title` ya lo apaga desde
   functions.php — esto es el cinturón por si el tema padre cambia el hook. */
body.single-post .page-header { display: none; }

/* Comentarios apagados: la clase la pone el filtro `body_class`, y el
   interruptor único es MB_NOTAS_COMENTARIOS en functions.php. */
body.mb-sin-comentarios .comments-area { display: none; }

/* ==========================================================================
   CONTACTO — el formulario de Fluent Forms vestido con el sistema de diseño
   El formulario NO lo dibuja el child theme: es el widget de Fluent Forms
   (Elementor free no trae widget de formulario; el de Elementor es Pro). Acá
   solo se lo viste, colgando de sus propias clases: `.fluentform` es el
   envoltorio, `.frm-fluent-form` el <form>, `.ff-el-group` cada campo,
   `.ff-el-form-control` los controles y `.ff-btn-submit` el botón.

   Especificidad: se compite contra dos hojas a la vez —la del plugin y la del
   kit de Elementor, que genera
   `.elementor-kit-N input:not([type="button"]):not([type="submit"])` (0,3,1)—,
   así que las reglas de los controles van con CUATRO clases y sin !important.
   ========================================================================== */
.fluentform {
  max-width: 820px; margin-inline: auto; width: 100%;
  font-family: "Bricolage Grotesque", "Segoe UI", sans-serif;
}
/* Un widget que no es nativo de Elementor sale con el ancho de su contenido
   dentro de una sección (el .e-con-inner centra los hijos). Le pasó al listado
   de notas: 542px dentro de 1140. */
[class*="elementor-widget-fluent"] { width: 100%; align-self: stretch; }

/* El contenedor que recibe el widget queda centrado en su sección, esté donde
   esté: sin esto el formulario se pega a la izquierda cuando el contenedor que
   lo aloja tiene un ancho fijo (medido en el sitio el 2026-09-18: la caja de
   820px arrancaba en x=145 dentro de 1140). */
.e-con:has(> .elementor-widget-fluent-form-widget),
.e-con-inner:has(> .elementor-widget-fluent-form-widget) { margin-inline: auto; }

.fluentform .frm-fluent-form {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  padding: 36px 36px 32px;
}
/* Fluent Forms envuelve TODOS los campos en un <fieldset> con estilos inline,
   así que el `gap` del <form> no llega a los campos: su único hijo es el
   fieldset. Medido en el sitio: los campos salían pegados uno al otro. El
   fieldset toma el flex y el gap en su lugar. */
.fluentform .frm-fluent-form fieldset {
  display: flex; flex-direction: column; gap: 18px; width: 100%;
  border: 0; margin: 0; padding: 0; min-inline-size: 0;
}
.fluentform .frm-fluent-form .ff-el-group { margin: 0; }

/* --- rótulos --- */
.fluentform .frm-fluent-form .ff-el-input--label label {
  font-family: inherit; font-size: var(--text-small); font-weight: 700;
  color: var(--ink); margin-bottom: 7px; padding: 0;
}
/* El asterisco de obligatorio: los tres campos lo son, así que se muestra
   discreto y en el violeta de marca en vez del rojo del plugin. */
.fluentform .frm-fluent-form .ff-el-is-required.asterisk-right label:after,
.fluentform .frm-fluent-form .ff-el-is-required.asterisk-left label:before {
  color: var(--brand); opacity: .7;
}

/* --- controles --- */
.fluentform .frm-fluent-form .ff-el-group .ff-el-form-control {
  width: 100%; box-sizing: border-box;
  padding: 13px 15px; height: auto; min-height: 0;
  font-family: inherit; font-size: var(--text-body); line-height: 1.55;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.fluentform .frm-fluent-form .ff-el-group textarea.ff-el-form-control {
  resize: vertical; min-height: 148px;
}
.fluentform .frm-fluent-form .ff-el-group .ff-el-form-control::placeholder { color: var(--ink-muted); }
.fluentform .frm-fluent-form .ff-el-group .ff-el-form-control:hover { border-color: var(--brand); }
.fluentform .frm-fluent-form .ff-el-group .ff-el-form-control:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(110, 75, 136, .16);
}

/* --- errores de validación del plugin --- */
.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: #B3261E; }
.fluentform .frm-fluent-form .error.text-danger {
  margin-top: 6px; font-size: var(--text-small); font-weight: 600; color: #B3261E;
}

/* --- botón --- */
.fluentform .frm-fluent-form .ff-el-group.ff_submit_btn_wrapper { margin-top: 4px; }
/* OJO con el color del botón: el widget de Fluent Forms para Elementor escribe
   `background-color … !important` en el CSS de la página (post-<id>.css), así
   que gana siempre. El violeta va en el panel del widget → Estilo → Botón; lo
   de acá es la forma (radio, padding, tipografía) y el color de respaldo si
   alguna vez se vacía el control del widget. */
.fluentform .frm-fluent-form .ff-btn-submit.ff-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; cursor: pointer;
  font-family: inherit; font-size: var(--text-small); font-weight: 700; line-height: 1.2;
  color: #fff; background: var(--brand);
  border: 1px solid var(--brand); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: background-color 180ms ease, border-color 180ms ease,
              box-shadow 180ms ease, transform 180ms ease;
}
.fluentform .frm-fluent-form .ff-btn-submit.ff-btn:hover {
  background: var(--brand-hover); border-color: var(--brand-hover);
  box-shadow: var(--shadow-2); transform: translateY(-2px);
}

/* --- el aviso de enviado y el de error --- */
.fluentform .ff-message-success {
  display: flex; flex-direction: column; gap: 10px; text-align: center;
  padding: 52px 36px; background: var(--brand-tint);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  font-family: "Fraunces", Georgia, serif; font-size: 26px; line-height: 1.3;
  color: var(--ink);
}
.fluentform .ff-errors-in-stack, .fluentform .error-clear {
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: #FCEDEC; border: 1px solid #E6BDB9; color: #7A1C16;
  font-size: var(--text-small); font-weight: 600;
}

@media (max-width: 780px) {
  .fluentform .frm-fluent-form { padding: 26px 20px 24px; }
  .fluentform .frm-fluent-form .ff-btn-submit.ff-btn { width: 100%; }
  .fluentform .ff-message-success { padding: 40px 24px; font-size: 22px; }
}
/* ==== FIN CONTACTO ==== */