/* ─────────────────────────────────────────────────────────────────────────
   El menú de medicina-integrativa.eu
   ─────────────────────────────────────────────────────────────────────────

   Mismo menú, mismas entradas, mismos enlaces. Lo que cambia es cómo se ve y,
   en un sitio, cómo se navega.

   ## De qué se partía (medido el 15 sep 2026, no estimado)

   - Los desplegables eran de **240px fijos** y **cinco rótulos partían en dos
     líneas**: «Información del Máster», «Programa Mindfulness», «Inscripción a
     otros cursos» y los dos calendarios. Eso es lo que se veía «cortado».
   - **El tercer nivel volaba a la derecha.** «Fechas del Máster» abría otro
     panel al lado que había que perseguir con el ratón.
   - **`boton-campus` no pintaba nada.** La clase lleva puesta en el menú desde
     siempre; su CSS vivía en `divi-edu-2025`, que está instalado y **apagado**.
   - Cajas blancas de esquina recta, sin sombra y pegadas a la barra.

   ## Lo que se ha hecho

   El tercer nivel se **aplana dentro del primero**: los dos calendarios se ven
   al abrir «Máster Medicina Integrativa», sangrados bajo su rótulo. Un clic
   menos, nada que perseguir, y no hay forma de que se salga por el borde en una
   pantalla estrecha. Lo eligió Eduardo el 15 sep 2026.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. La barra ───────────────────────────────────────────────────────── */

/* La cabecera es translúcida (.83) y se apoya en lo que haya debajo, que en la
   home es el hero azul. Una línea de pelo la separa del contenido claro sin
   pesar; la sombra se guarda para cuando está fija, que es cuando de verdad
   flota sobre el contenido. */
#main-header {
  border-bottom: 1px solid var(--mi-linea);
  backdrop-filter: saturate(1.6) blur(10px);
}

#main-header.et-fixed-header {
  box-shadow: 0 4px 20px rgba(40, 49, 64, .10);
}

/* ── 2. Las entradas de primer nivel ───────────────────────────────────── */

#top-menu > li {
  padding-right: 26px;
  /* ⚠️ **Sin esto, el botón CAMPUS descoloca todo el menú.**
     Los `li` son `inline-block` y se alinean por la LÍNEA BASE de su texto. El
     botón lleva relleno propio, así que su línea base cae más abajo que la de
     los rótulos y el navegador **empuja los rótulos hacia abajo** hasta
     cuadrarlas: la cabecera pasó de 64 a 94px y cada cosa quedó a una altura.
     Alineando por arriba, la altura de la barra vuelve a mandarla Divi. */
  vertical-align: top;
}

#top-menu > li > a {
  position: relative;
  color: var(--mi-tinta);
  transition: color .18s ease;
}

/* El subrayado crece desde el centro.
   ⚠️ Va en `::before`: Divi ya usa el `::after` de estos enlaces para su propia
   decoración, y pisárselo deja la flecha de los desplegables sin sitio. */
#top-menu > li > a::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 18px;
  height: 2px;
  border-radius: 2px;
  /* ⚠️ `currentColor`, no un color fijo. El de la sección activa lo decide el
     Customizer de Divi y **gana a este fichero**: con un azul escrito a mano,
     el rótulo activo salía coral y su subrayado azul. Así el subrayado es
     siempre del color del texto que subraya, diga lo que diga el Customizer. */
  background: currentColor;
  transition: left .22s ease, right .22s ease;
}

#top-menu > li:hover > a {
  color: var(--mi-acento-texto);
  opacity: 1;
}

/* La sección en la que estás.
   ⚠️ **El `!important` es para ganarle al Customizer de Divi**, que lo pinta en
   `#ee6c4d` — el coral de la web—. Ese coral da **3,05** sobre la cabecera casi
   blanca, por debajo del 4,5 que pide un rótulo de 15px. `--mi-destacado`
   (#da3a16) es ese mismo coral bajado hasta 4,57: se lee y sigue siendo el
   color de la casa. Es el mismo que usan los plugins como «destacado». */
#top-menu > li.current-menu-item > a,
#top-menu > li.current-menu-ancestor > a {
  color: var(--mi-destacado) !important;
  opacity: 1;
}

#top-menu > li:hover > a::before,
#top-menu > li.current-menu-item > a::before,
#top-menu > li.current-menu-ancestor > a::before {
  left: 0;
  right: 0;
}

/* ── 3. CAMPUS, el botón ───────────────────────────────────────────────── */

#top-menu > li.boton-campus {
  padding-right: 0;
  margin-left: 6px;
}

/* ⚠️ En el azul PROFUNDO, no en el acento. Blanco sobre #0085bd da 4,13 y este
   rótulo es de 15px en negrita —«texto grande» empieza en 18,66px—, así que
   pide 4,5. Sobre #1a4f6b da 8,84. El naranja #e5724f que usaba el tema de la
   agencia se queda en 3,0: tampoco valía. */

/* ⚠️ **El `!important` del padding no es pereza: Divi lo impone.**
   Así centra su menú en la barra: `#et-top-navigation` lleva `padding-top:25px`
   y cada enlace `padding-bottom:25px`, y esos 25 los escribe su CSS dinámico,
   que gana a un selector más específico. Sin forzarlo, el botón salía de
   **52px de alto** —9 arriba, 18 de texto y 25 abajo— y estiraba la cabecera
   de 64 a 94px: era el «descuadrado». Medido en producción el 15 sep 2026.

   Y por eso hace falta el `margin-top` negativo: sin el relleno de abajo de
   Divi, el botón es más bajo que un rótulo y, alineado por arriba, quedaría
   colgando de la parte superior de la barra. El margen lo sube hasta el centro.
   El número sale de medir, no de probar: centro de la barra menos media altura
   del botón, menos el relleno superior del `nav`. */
#top-menu > li.boton-campus > a {
  display: inline-block;
  padding: 9px 18px !important;
  margin: -10px 0 0;
  border-radius: var(--mi-radio);
  background: var(--mi-oscuro);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  transition: background .18s ease, transform .18s ease;
}

#top-menu > li.boton-campus > a::before { display: none; }

#top-menu > li.boton-campus:hover > a,
#top-menu > li.boton-campus > a:hover {
  background: var(--mi-oscuro-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* ── 4. Los desplegables ───────────────────────────────────────────────── */

#top-menu .sub-menu {
  width: auto !important;
  min-width: 250px;
  max-width: min(92vw, 380px);
  padding: 8px;
  border-top: 0;
  border-radius: var(--mi-radio);
  background: var(--mi-papel);
  box-shadow: var(--mi-sombra);
  margin-top: 8px;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

#top-menu > li:hover > .sub-menu {
  transform: translateY(0);
}

/* El puente. Al separar el panel de la barra queda un hueco muerto de 8px, y
   al bajar el ratón el menú se cerraría a medio camino. Esto lo cubre sin que
   se vea. */
#top-menu > li > .sub-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

/* ⚠️ Uno por línea, explícitamente.
   Divi da a estos `li` un ancho fijo heredado del panel de 240px. Al soltar ese
   ancho para que los rótulos no partan, **los elementos se ponen uno al lado de
   otro**: «Programa Mindfulness  Profesorado» en la misma línea. El child theme
   de la agencia llevaba la misma corrección con el mismo comentario, así que no
   es una rareza de un navegador. */
#top-menu .sub-menu li {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  padding: 0;
}

#top-menu .sub-menu li a {
  /* Lo que arregla el recorte. */
  white-space: nowrap;
  width: auto !important;
  padding: 9px 14px;
  border-radius: 8px;
  color: var(--mi-tinta);
  line-height: 1.35;
  transition: background .15s ease, color .15s ease;
}

#top-menu .sub-menu li a:hover {
  background: var(--mi-velo);
  color: var(--mi-acento-texto);
  opacity: 1;
}

#top-menu .sub-menu li.current-menu-item > a {
  background: var(--mi-velo);
  color: var(--mi-acento-texto);
}

/* ── 5. El tercer nivel, aplanado ──────────────────────────────────────── */

/*
   ⚠️ **Solo si el padre no lleva a ninguna parte**, de ahí el `[href="#"]`.
   «Fechas del Máster» es un `#`: existe para agrupar, y como rótulo se lee
   mejor. Pero «Otros cursos relacionados» **sí es una página**, y pintarlo como
   rótulo apagado dejaba sin acceso a ella — se vio en el menú de móvil, donde
   la misma regla alcanzaba también al primer nivel. Atado al `#`, un padre que
   algún día tenga enlace real sigue siendo un enlace. */
#top-menu .sub-menu li.menu-item-has-children > a[href="#"] {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(40, 49, 64, .55);
  cursor: default;
  padding-bottom: 4px;
  margin-top: 6px;
}

#top-menu .sub-menu li.menu-item-has-children > a[href="#"]:hover {
  background: none;
  color: rgba(40, 49, 64, .55);
}

/* Divi marca los padres con una flecha; aquí ya no hay nada que desplegar. */
#top-menu .sub-menu li.menu-item-has-children > a::after {
  display: none !important;
}

#top-menu .sub-menu .sub-menu {
  position: static !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  min-width: 0;
  max-width: none;
  margin: 0 0 4px;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--mi-velo-fuerte);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

#top-menu .sub-menu .sub-menu::before { display: none; }

#top-menu .sub-menu .sub-menu li a {
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--mi-tinta);
  cursor: pointer;
  padding: 7px 12px;
  margin: 0;
}

/* ── 6. El carrito ─────────────────────────────────────────────────────── */

#et-top-navigation .et-cart-info {
  color: var(--mi-tinta);
  transition: color .18s ease;
}

#et-top-navigation .et-cart-info:hover {
  color: var(--mi-acento-texto);
}

/* ── 7. El menú de móvil ───────────────────────────────────────────────── */

.et_mobile_menu {
  padding: 10px;
  border-top: 0;
  border-radius: var(--mi-radio);
  box-shadow: var(--mi-sombra);
  background: var(--mi-papel);
}

.et_mobile_menu li a {
  padding: 12px 14px;
  border-radius: 8px;
  border-bottom: 0;
  color: var(--mi-tinta);
}

.et_mobile_menu li a:hover {
  background: var(--mi-velo);
  opacity: 1;
}

/* Aquí los rótulos SÍ pueden partir: en un móvil no hay ancho que sobre, y
   «Calendario MI32BCN (Edición Barcelona)» no cabe en una línea de ninguna
   manera. Por eso el `nowrap` de arriba es solo para el escritorio. */
.et_mobile_menu .sub-menu {
  padding-left: 12px;
  margin-left: 14px;
  border-left: 2px solid var(--mi-velo-fuerte);
}

.et_mobile_menu li.menu-item-has-children > a[href="#"] {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(40, 49, 64, .55);
  cursor: default;
}

.et_mobile_menu li.boton-campus > a {
  margin-top: 6px;
  background: var(--mi-oscuro);
  color: #fff;
  text-align: center;
}