/** ==========================================================================
 * MenuNavegacion — Header 2026
 *
 * Diseño de láminas translúcidas (Figma «Web CEI 2026») con vidrio
 * (blur 5px + saturación + refracción «liquid glass» en motores Blink).
 * Las flechas (↓ ↗ →) son glifos de la tipografía Inter.
 * Breakpoints: ≥1560 diseño completo · 1320–1559 compacto · <1320 hamburguesa
 * con navegación en dos niveles (drill-down).
 * Formato SUITCSS: ComponentName-descendentName--modifierName / is-stateName
 * ========================================================================== */

/**
 * Variables propias del componente. Los tokens del sistema (Global-*, Area-*,
 * Font-*) viven en css/cei-tokens.css, que se carga antes que esta hoja.
 *
 * Los valores de aquí salen medidos del nodo 857-1094 «Menú de navegación»
 * (barra) y del diseño de las láminas; Figma no tiene variable para ellos.
 * Los breakpoints del final del fichero redefinen algunos.
 */

:root {
  --MenuNavegacion-altura: 80px; /* Figma: 80 */
  /*
   * Margen de página compartido por cabecera y footer, y alineado con el
   * contenido del sitio.
   *
   * VEINTE PÍXELES, FIJOS (Eduardo, 16/09/2026). Era una rampa fluida —16px en
   * el móvil, 34 en la tableta, hasta 60 en pantalla ancha— pensada para que la
   * barra siguiera cabiendo en los escritorios estrechos. El nuevo margen de la
   * web es 20 en todos los anchos: la misma distancia al borde se mire donde se
   * mire, que es lo que hace que un bloque y el de arriba se lean alineados sin
   * tener que medirlos.
   */
  --MenuNavegacion-margenPagina: 20px;
  --MenuNavegacion-paddingX: var(--MenuNavegacion-margenPagina); /* Figma: 16 */

  /*
   * Los dos valores de arriba dejaron de ser de la cabecera en cuanto el resto
   * de la pagina tuvo que alinearse con ella, asi que tienen tambien un nombre
   * global. Se quedan definidos aqui porque aqui estan sus breakpoints, y como
   * son alias los siguen sin tener que repetirlos.
   */
  --Global-Margen-Pagina: var(--MenuNavegacion-margenPagina);
  --Global-Alto-Cabecera: var(--MenuNavegacion-altura);
  /* Barra fluida: los máximos son los del Figma (1920) y comprime hasta ~1300px */
  --MenuNavegacion-logoAlto: clamp(30px, 2.65vw, 38px); /* +25px de ancho a petición (alto máx. 34 → 38; el SVG es 6,44:1) */
  --MenuNavegacion-itemGap: clamp(18px, 1.8vw, 35px); /* Figma: 35 */
  --MenuNavegacion-linkTamano: var(--Font-Size-19); /* cuerpo de la escala (antes clamp fluido) */
  /* Figma da interlineado automatico para el cuerpo de texto. Estaba en 24px,
     que sobre Size-19 son 1.26 —casi lo mismo—, pero en px no sigue a la
     escala: al bajar el token a 17 en movil se queda en 1.41. */
  --MenuNavegacion-linkInterlineado: normal;
  --MenuNavegacion-ctaMargen: clamp(20px, 3vw, 60px); /* Figma: hueco menú → CTA */
  /*
   * Unidad base de espaciado: TODOS los paddings, gaps y separaciones del
   * componente son múltiplos de esta variable (el modo compacto solo la
   * reduce y todo escala en proporción).
   */
  --MenuNavegacion-espacio: 8px;
  /* Hueco barra → lámina. Cuanto menor, menos recorrido en el aire al ir
     con el ratón hacia el submenú (el ::before hace de puente, pero un salto
     grande se pierde con cualquier movimiento diagonal). Figma decía 16. */
  --MenuNavegacion-panelHueco: var(--MenuNavegacion-espacio);
  --MenuNavegacion-panelRadio: var(--Global-Radio-Panel);
  --MenuNavegacion-panelPaddingX: calc(var(--MenuNavegacion-espacio) * 4); /* borde unificado de la lámina */
  --MenuNavegacion-panelPaddingTop: calc(var(--MenuNavegacion-espacio) * 4);
  --MenuNavegacion-panelPadding: var(--MenuNavegacion-panelPaddingTop) var(--MenuNavegacion-panelPaddingX);
  --MenuNavegacion-panelGap: calc(var(--MenuNavegacion-espacio) * 6); /* separación entre columnas */
  --MenuNavegacion-tituloTamano: var(--Font-Size-14); /* encabezados de sección (letra pequeña) */
  --MenuNavegacion-enlaceTamano: var(--MenuNavegacion-linkTamano); /* mismo tamaño que la barra */
  --MenuNavegacion-enlaceGap: calc(var(--MenuNavegacion-espacio) * 2); /* separación vertical entre enlaces */
  --MenuNavegacion-destacadosAncho: 440px; /* columna «Nuevas formaciones» */
  --MenuNavegacion-noticiaAncho: 400px; /* tarjetas de noticias (reducidas a petición) */
  --MenuNavegacion-noticiaGap: calc(var(--MenuNavegacion-espacio) * 5);
}

/**
 * Barra principal (position: fixed en todos los anchos)
 *
 * 1. Inter ya se importa en style.css; es la tipografía del diseño 2026.
 * 2. --MenuNavegacion-topOffset lo fija el JS cuando está la barra de admin de WP.
 */

.MenuNavegacion {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; /* siempre por encima del footer (9990) y del contenido */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--MenuNavegacion-altura);
  padding: 0 var(--MenuNavegacion-paddingX);
  border-bottom: 1px solid var(--Global-Color-Grey);
  font-family: var(--MenuNavegacion-fuente); /* 1 */
  letter-spacing: var(--Font-Letter-spacing-2); /* tracking único; hereda a todo */
}

/*
 * Fondo de vidrio de la barra en un ::before para que los desplegables
 * (hijos del header) puedan aplicar su propio backdrop-filter: un elemento
 * con backdrop-filter crea un «backdrop root» y anularía el de sus hijos.
 */
/*
 * La barra es fixed, asi que no ocupa sitio en el flujo: sin esto el contenido
 * de la pagina arranca en el borde superior y se queda debajo de ella.
 *
 * El selector lleva [class] a proposito. Escrito como `body` a secas no
 * llegaba a aplicarse: el tema declara `.layout-full-width { padding: 0 }` en
 * el propio body, y una clase gana a un tipo. Con el atributo suma un nivel y
 * pasa por delante sin necesidad de !important.
 */
body[class] {
  padding-top: var(--Global-Alto-Cabecera);
}

/*
 * Anclas bajo la barra. Al saltar a un #id —los tipos de estudio de un área,
 * el índice de una ficha— el navegador alinea el destino con el borde superior
 * de la ventana, y la barra, fija, lo tapaba. scroll-padding le reserva el alto
 * de la barra más el espacio título-contenido, y vale para todos los saltos:
 * enlaces, la almohadilla de la URL y scrollIntoView.
 */
html {
  scroll-padding-top: calc(var(--Global-Alto-Cabecera) + var(--Global-Espacio-TituloContenido));
}

.MenuNavegacion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--Global-Velo-Blanco);
  -webkit-backdrop-filter: var(--Global-Vidrio-Blur);
  backdrop-filter: var(--Global-Vidrio-Blur);
}

/* Refracción «liquid glass» (solo motores Blink; la clase la pone el JS) */
.MenuNavegacion.has-liquidGlass::before {
  backdrop-filter: var(--Global-Vidrio-Blur) url(#CeiLiquidGlass);
}

/*
 * Reset defensivo (mismo patrón que el footer): en la web real los estilos
 * del tema pisan los p/a/span de las láminas (la tipografía de las noticias
 * de Empresas salía en serif). :where() mantiene la especificidad a cero y
 * el !important gana a cualquier override del tema.
 */
.MenuNavegacion :where(h3, p, a, li, span, button, article) {
  font-family: var(--MenuNavegacion-fuente);
  font-weight: var(--Font-Weight-400) !important; /* peso único del sistema */
  letter-spacing: var(--Font-Letter-spacing-2); /* tracking único del sistema */
}

/*
 * Ningún hover del componente subraya: el a:hover del tema (Autoptimize)
 * subraya con más especificidad en la web real, así que se anula con
 * !important para todos los enlaces del header de una vez.
 */
.MenuNavegacion a:hover,
.MenuNavegacion a:focus-visible {
  text-decoration: none !important;
}

/* El SVG con el filtro no debe ocupar sitio (style.css fuerza svg { width: 100% }) */
.MenuNavegacion-filtros {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.MenuNavegacion-logo {
  display: block;
  flex-shrink: 0;
  /* Caja reservada: en WooCommerce otro bundle CSS colapsaba el ancla a 0×0 */
  width: calc(var(--MenuNavegacion-logoAlto) * 6.44); /* proporción del SVG completo (1319.9/205) */
  height: var(--MenuNavegacion-logoAlto);
}

/*
 * Con el padre delante a proposito (0,2,0): en la tienda, WooCommerce trae
 * `.woocommerce img { height: auto; max-width: 100% }` (0,1,1), que a la clase
 * sola le ganaba y dejaba el acronimo a su tamano natural —185 x 80— al hacer
 * scroll en una pagina de producto (Eduardo, 07/09/2026). Las reglas de abajo
 * que tocan al logo llevan el mismo prefijo para seguir ganando a esta.
 */
.MenuNavegacion .MenuNavegacion-logoImg {
  display: block;
  width: auto;
  max-width: none;
  height: var(--MenuNavegacion-logoAlto);
}

/*
 * Con scroll (clase is-scrolled, la pone el JS) el logo pasa al acrónimo con
 * un cross-fade: ambos SVG superpuestos (las letras «CEI.» arrancan en x=0 en
 * los dos), así que no hay salto de layout ni de posición.
 */
.MenuNavegacion-logo {
  position: relative;
}

.MenuNavegacion-logoImg--completo {
  transition: opacity 0.25s ease;
}

.MenuNavegacion .MenuNavegacion-logoImg--acronimo {
  position: absolute;
  top: 0;
  left: 0;
  /* iguala la altura óptica de las letras CEI entre ambos SVG (viewBox 205 vs 195.9) */
  height: calc(var(--MenuNavegacion-logoAlto) * 0.983);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.MenuNavegacion.is-scrolled .MenuNavegacion-logoImg--completo {
  opacity: 0;
}

.MenuNavegacion.is-scrolled .MenuNavegacion-logoImg--acronimo {
  opacity: 1;
}

/**
 * Navegación (barra en escritorio, panel en acordeón en móvil)
 */

.MenuNavegacion-nav {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: auto;
}

.MenuNavegacion-list {
  display: flex;
  align-items: center;
  gap: var(--MenuNavegacion-itemGap);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.MenuNavegacion-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.MenuNavegacion-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--Global-Color-Black);
  font-size: var(--MenuNavegacion-linkTamano);
  font-weight: var(--Font-Weight-400);
  line-height: var(--MenuNavegacion-linkInterlineado);
  text-decoration: none;
  transition: color 0.15s ease;
}

.MenuNavegacion-link:hover {
  color: var(--Global-Hover-Grey);
}

.MenuNavegacion-link:focus-visible {
  outline: 2px solid var(--Global-Destacado);
  outline-offset: 4px;
}

/* Flecha tipográfica (glifo ↓ de Inter); girada 180º hace de ↑ al abrir.
   scale/translate son propiedades individuales: se componen con el rotate
   del estado abierto sin pisarlo */
.MenuNavegacion-arrow {
  display: inline-block;
  flex-shrink: 0;
  scale: 0.9;
  translate: -2px;
  font-weight: var(--Font-Weight-400);
  transition: transform 0.2s ease;
}

.MenuNavegacion-item.is-open > .MenuNavegacion-link .MenuNavegacion-arrow {
  transform: rotate(180deg);
}

/**
 * CTA «Solicita información»
 */

.MenuNavegacion-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* la flecha, pegada al texto */
  flex-shrink: 0;
  margin-left: var(--MenuNavegacion-ctaMargen);
  padding: 7px 12px; /* a petición: 7 vertical, 12 horizontal; alto por contenido */
  border: 1px solid var(--Global-CTA-Destacado);
  border-radius: var(--Global-Radio-Pastilla);
  color: var(--Global-CTA-Destacado);
  font-size: var(--MenuNavegacion-linkTamano);
  font-weight: var(--Font-Weight-400);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.MenuNavegacion-cta:hover {
  background-color: var(--Global-CTA-Destacado);
  color: var(--Global-Color-White);
}

/**
 * CTA doble: al pasar por encima se cambia por Contacto y Asesoria
 *
 * Dos capas en la misma celda de la reticula, una encima de otra, y se funden
 * en opacidad. Que compartan celda es lo que resuelve los dos problemas de la
 * primera version, que animaba el ancho: la pastilla mide siempre lo que la
 * capa mas ancha, asi que ni cambia de tamano al pasar por encima ni puede
 * cortar el texto. Antes la etiqueta tenia un tope de 144px con 209 de
 * contenido y se leia «Solicita informa».
 *
 * Las dos partes existen siempre y son siempre enlaces; en reposo estan a cero
 * de opacidad y sin recibir el raton. Con el teclado se llega igual: recibir el
 * foco dispara el :focus-within y la pastilla se abre.
 *
 * Esto es solo para la barra de escritorio. En movil la pastilla de la barra se
 * oculta y manda la del panel, que sigue siendo un enlace normal: sin hover, un
 * boton que hay que sobrevolar para poder pulsarlo no se puede usar.
 */
.MenuNavegacion-cta--doble {
  display: grid;
  padding: 0;
  gap: 0;
  /* Recorta el relleno de cada mitad a la forma de la pastilla: sin esto el
     fondo del hover asoma por las esquinas redondeadas. */
  overflow: hidden;
}

.MenuNavegacion-ctaEtiqueta,
.MenuNavegacion-ctaPartes {
  grid-area: 1 / 1;
  transition: opacity 0.2s ease;
}

/*
 * La etiqueta no recibe el raton nunca. Comparte celda con las dos mitades y,
 * aunque estas se pintan encima, dejarla activa se comia el clic. Es
 * decorativa —lleva aria-hidden— y el :hover de la pastilla lo recoge el
 * contenedor igual, porque un hijo sin pointer-events deja pasar el raton al
 * padre en vez de tragarselo.
 */
.MenuNavegacion-ctaEtiqueta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 12px;
  white-space: nowrap;
  pointer-events: none;
}

.MenuNavegacion-ctaPartes {
  display: inline-flex;
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
}

.MenuNavegacion-ctaParte {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * Las mitades no llevan esquinas propias: la forma la pone la pastilla que las
 * contiene. Con un radio aqui, el borde de separacion de la segunda mitad se
 * curvaba y dibujaba una segunda capsula dentro de la primera.
 */
.MenuNavegacion-ctaParte + .MenuNavegacion-ctaParte {
  border-left: 1px solid var(--Global-CTA-Destacado);
}

.MenuNavegacion-cta--doble:hover .MenuNavegacion-ctaEtiqueta,
.MenuNavegacion-cta--doble:focus-within .MenuNavegacion-ctaEtiqueta {
  opacity: 0;
}

.MenuNavegacion-cta--doble:hover .MenuNavegacion-ctaPartes,
.MenuNavegacion-cta--doble:focus-within .MenuNavegacion-ctaPartes {
  opacity: 1;
  pointer-events: auto;
}

/* El relleno pasa a cada mitad, asi que el hover tambien */
.MenuNavegacion-cta--doble:hover {
  background-color: transparent;
  color: var(--Global-CTA-Destacado);
}

.MenuNavegacion-ctaParte:hover {
  background-color: var(--Global-CTA-Destacado);
  color: var(--Global-Color-White);
}

.MenuNavegacion-ctaParte:focus-visible {
  outline: 2px solid var(--Global-Color-Black);
  outline-offset: -4px;
}

/*
 * Cada mitad lleva la misma flecha que la etiqueta, y aparece al pasar por
 * encima. Va en el marcado y no en un ::after para que ocupe su sitio desde el
 * principio: revelandola con opacidad, la pastilla no cambia de ancho al
 * pasar de una mitad a otra.
 */
.MenuNavegacion-ctaParte .MenuNavegacion-ctaArrow {
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.MenuNavegacion-ctaParte:hover .MenuNavegacion-ctaArrow,
.MenuNavegacion-ctaParte:focus-visible .MenuNavegacion-ctaArrow {
  opacity: 1;
}

.MenuNavegacion-cta:focus-visible {
  outline: 2px solid var(--Global-Color-Black);
  outline-offset: 4px;
}

/* Flecha del CTA: el mismo glifo ↓ que las flechas del menú, girado -135°
   para apuntar ↗ (el !important de la fuente evita que el stack del tema o
   la fuente de emojis del sistema lo sustituyan en la web real) */
.MenuNavegacion-ctaArrow {
  display: inline-block;
  flex-shrink: 0;
  rotate: -135deg;
  scale: 0.9;
  font-family: var(--MenuNavegacion-fuente);
  font-weight: var(--Font-Weight-400);
}

/* El CTA del panel, el bloque Blog y el botón de volver solo existen en móvil */
@media (min-width: 1320px) {
  .MenuNavegacion-item--cta,
  .MenuNavegacion-item--blog,
  .MenuNavegacion-volver {
    display: none;
  }
}

/**
 * Accesos del equipo: «Ir al admin» y el modo oscuro (Eduardo, 27/09/2026)
 *
 * La cabecera los pinta solo para administradores y CEI_Creativo, que ya no
 * tienen la barra negra de WordPress (cei_equipo_sin_barra() en functions.php).
 * A un alumno no le llega el marcado; de esto solo descarga estas reglas.
 *
 * Mismas medidas que el botón de Accesibilidad (14px, icono de 18, pastilla de
 * 34 de alto): son herramientas del equipo, no una llamada a la acción para el
 * alumno, y así no compiten con «Solicita información».
 *
 * La pastilla es de tinta: negra sobre la página clara y clara sobre la oscura,
 * porque --Global-Color-Black se da la vuelta en modo oscuro. El texto lleva el
 * color del papel, que solo existe como token en oscuro (--Global-Superficie);
 * en claro cae al blanco.
 */

.MenuNavegacion-equipo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  margin-left: 12px;
}

.MenuNavegacion-equipoAdmin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--Global-Color-Black);
  border-radius: var(--Global-Radio-Pastilla);
  background-color: var(--Global-Color-Black);
  color: var(--Global-Superficie, var(--Global-Color-White));
  font-size: var(--Font-Size-14);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.MenuNavegacion-equipoAdmin:hover {
  background-color: transparent;
  color: var(--Global-Color-Black);
}

/*
 * La luna es un <button>, y en las fichas de producto el tema la pisaría.
 * header-shop.php sí usa body_class(), así que ahí el body lleva la clase
 * button-default de Betheme, y `.button-default button` (0,1,1) le quita el
 * borde, le pone 5px de radio y una sombra, y al pasar por encima le echa una
 * cortina gris (:after). En la portada no pasa porque header.php escribe las
 * clases del body a mano (comprobado en cei.es el 27/09/2026). Por eso esas
 * propiedades van con !important, como en la hamburguesa de más abajo, y el
 * hover repite las suyas.
 */
.MenuNavegacion-equipoTema,
.MenuNavegacion-equipoTema:focus,
.MenuNavegacion-equipoTema:active {
  background: none !important;
  background-color: transparent !important;
  border: 1px solid var(--Global-Color-Black) !important;
  border-radius: var(--Global-Radio-Pastilla) !important;
  box-shadow: none !important;
  color: var(--Global-Color-Black) !important;
}

.MenuNavegacion-equipoTema:hover {
  background-color: var(--Global-Color-Black) !important;
  color: var(--Global-Superficie, var(--Global-Color-White)) !important;
}

.MenuNavegacion-equipoTema::after {
  content: none !important;
}

.MenuNavegacion-equipoTema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * El lápiz (Eduardo, 05/10/2026): abre en wp-admin la edición de lo que se
 * está viendo. Un <a> redondo con las medidas de la luna; como es un enlace y
 * no un <button>, Betheme no lo pisa y no hacen falta los !important.
 */
.MenuNavegacion-equipoEditar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--Global-Color-Black);
  border-radius: var(--Global-Radio-Pastilla);
  background-color: transparent;
  color: var(--Global-Color-Black);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.MenuNavegacion-equipoEditar:hover {
  background-color: var(--Global-Color-Black);
  color: var(--Global-Superficie, var(--Global-Color-White));
}

.MenuNavegacion-equipoAdmin:focus-visible,
.MenuNavegacion-equipoEditar:focus-visible,
.MenuNavegacion-equipoTema:focus-visible {
  outline: 2px solid var(--Global-Destacado);
  outline-offset: 3px;
}

.MenuNavegacion-equipoIcono {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Luna para pasar a oscuro; ya en oscuro, sol para volver. */
.MenuNavegacion-equipoIcono--sol,
:root[data-tema="oscuro"] .MenuNavegacion-equipoIcono--luna {
  display: none;
}

:root[data-tema="oscuro"] .MenuNavegacion-equipoIcono--sol {
  display: block;
}

/*
 * Donde no cabe el texto, la pastilla se queda en el icono. Medido en cei.es
 * (27/09/2026), el hueco entre el logo y el menú con el texto puesto es de 0px
 * a 1320 (la barra desborda), 47 a 1440, 31 a 1560, 66 a 1600 y 347 a 1920;
 * con solo el icono, 44 a 1320 y 112 a 1560. En un móvil de 320, entre el logo
 * y la pastilla quedan 17px con texto y 94 sin él. El texto no se borra: lo
 * siguen leyendo los lectores de pantalla, y el title lo enseña al pasar el
 * ratón.
 */
@media (max-width: 359.98px), (min-width: 1320px) and (max-width: 1439.98px), (min-width: 1560px) and (max-width: 1599.98px) {
  .MenuNavegacion-equipoAdmin {
    padding: 7px;
  }

  .MenuNavegacion-equipoTexto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* En tableta y móvil el menú sale de la barra: el grupo se arrima a la hamburguesa. */
@media (max-width: 1319.98px) {
  .MenuNavegacion-equipo {
    margin-left: auto;
  }
}

/*
 * Botón hamburguesa: solo visible en <1320px.
 * Los estilos de botón del tema (fondo, borde, sombra y color, también en
 * :hover) pisan el componente en la web real, así que esas cuatro
 * propiedades van con !important y se repiten en los estados: una regla con
 * :hover propio hace falta para ganar al button:hover del tema.
 */
.MenuNavegacion-btn,
.MenuNavegacion-btn:hover,
.MenuNavegacion-btn:focus,
.MenuNavegacion-btn:active {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important; /* «0» no es válido en box-shadow */
  color: var(--Global-Color-Black) !important;
}

.MenuNavegacion-btn {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 16px;
  padding: 0;
  cursor: pointer;
}

.MenuNavegacion-btn:focus-visible {
  outline: 2px solid var(--Global-Destacado);
  outline-offset: 4px;
}

/* Tres líneas clásicas que forman la X con el panel abierto */
.MenuNavegacion-btnIcono {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.MenuNavegacion-btnIcono > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.MenuNavegacion-btnIcono > span:nth-child(1) {
  top: 0;
}

.MenuNavegacion-btnIcono > span:nth-child(2) {
  top: 7px;
}

.MenuNavegacion-btnIcono > span:nth-child(3) {
  top: 14px;
}

.MenuNavegacion.is-open .MenuNavegacion-btnIcono > span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.MenuNavegacion.is-open .MenuNavegacion-btnIcono > span:nth-child(2) {
  opacity: 0;
}

.MenuNavegacion.is-open .MenuNavegacion-btnIcono > span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/**
 * Desplegables — escritorio (≥1320px): láminas translúcidas ancladas al ítem
 *
 * Son hijas del <li>, de modo que el :hover del ítem se mantiene al entrar en
 * el panel; el ::before hace de puente sobre el hueco de 16px. Los
 * desplazamientos negativos dejan la columna de enlaces alineada bajo su ítem
 * y el contenido extra (destacados, noticias) se extiende hacia la izquierda.
 */

@media (min-width: 1320px) {
  /* Los ítems con submenú solo despliegan (href="#"): no son navegables,
     así que no muestran el cursor de mano. En móvil sí actúan como botón. */
  .MenuNavegacion-item--hasSubmenu > .MenuNavegacion-link {
    cursor: default;
  }

  .MenuNavegacion-submenu {
    position: absolute;
    top: calc(100% + var(--MenuNavegacion-panelHueco));
    left: calc(-1 * var(--MenuNavegacion-panelPaddingX));
    z-index: 991;
    display: flex;
    align-items: flex-start;
    gap: var(--MenuNavegacion-panelGap);
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: var(--MenuNavegacion-panelPadding);
    background-color: var(--Global-Velo-Blanco);
    -webkit-backdrop-filter: var(--Global-Vidrio-Blur);
    backdrop-filter: var(--Global-Vidrio-Blur);
    border-radius: var(--MenuNavegacion-panelRadio);
    box-shadow: 0 32px 56px -32px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  /* Refracción «liquid glass» de los desplegables (solo motores Blink) */
  .MenuNavegacion.has-liquidGlass .MenuNavegacion-submenu {
    backdrop-filter: var(--Global-Vidrio-Blur) url(#CeiLiquidGlass);
  }

  /*
   * Dos puentes sobre el hueco barra → lámina, para que el :hover no se
   * corte al llevar el ratón hacia el submenú:
   * 1) en la lámina, tan ancho como ella (cubre los movimientos diagonales);
   * 2) en el propio ítem, que además tapa el filete de 1px de la barra —
   *    la lámina no puede, porque la barra va por encima en el apilado.
   */
  .MenuNavegacion-submenu::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--MenuNavegacion-panelHueco));
    left: 0;
    right: 0;
    height: var(--MenuNavegacion-panelHueco);
  }

  .MenuNavegacion-item--hasSubmenu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(var(--MenuNavegacion-panelHueco) + 2px);
  }

  /* :has(:focus-visible) y no :focus-within: el foco que deja un clic de
     ratón no debe mantener el panel abierto (solo la navegación por teclado) */
  .MenuNavegacion-item:hover > .MenuNavegacion-submenu,
  .MenuNavegacion-item:has(:focus-visible) > .MenuNavegacion-submenu,
  .MenuNavegacion-item.is-open > .MenuNavegacion-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .MenuNavegacion-item:hover > .MenuNavegacion-link .MenuNavegacion-arrow,
  .MenuNavegacion-item:has(:focus-visible) > .MenuNavegacion-link .MenuNavegacion-arrow {
    transform: rotate(180deg);
  }

  /*
   * Primera columna (destacados/noticias): un ::after absoluto pinta su fondo
   * blanco hasta los bordes de la lámina — esquinas izquierdas redondeadas
   * como el panel, esquinas derechas a 0 — de modo que solo esa columna
   * queda de otro color, sin duplicar paddings.
   */
  .MenuNavegacion-destacados,
  .MenuNavegacion-noticias {
    position: relative;
    align-self: stretch;
  }

  .MenuNavegacion-destacados::after,
  .MenuNavegacion-noticias::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-1 * var(--MenuNavegacion-panelPaddingTop));
    bottom: calc(-1 * var(--MenuNavegacion-panelPaddingTop));
    left: calc(-1 * var(--MenuNavegacion-panelPaddingX));
    right: calc(-1 * var(--MenuNavegacion-panelGap) / 2);
    background-color: var(--Global-Velo-Blanco-60);
    border-radius: var(--MenuNavegacion-panelRadio) 0 0 var(--MenuNavegacion-panelRadio);
  }

  /*
   * Láminas con bloque destacado (Formaciones, Empleo y Alumnos): el bloque
   * queda a la izquierda del ítem, así las columnas de enlaces siguen
   * alineadas bajo su palabra del menú.
   */
  .MenuNavegacion-submenu--mega,
  .MenuNavegacion-submenu--empleo,
  .MenuNavegacion-submenu--destacado {
    left: calc(-1 * (var(--MenuNavegacion-destacadosAncho) + var(--MenuNavegacion-panelPaddingX) + var(--MenuNavegacion-panelGap)));
  }

  /* Empresas: las dos noticias quedan a la izquierda del ítem */
  .MenuNavegacion-submenu--noticias {
    left: calc(-1 * (var(--MenuNavegacion-noticiaAncho) * 2 + var(--MenuNavegacion-noticiaGap) + var(--MenuNavegacion-panelPaddingX) + var(--MenuNavegacion-panelGap)));
  }

  /* Conócenos (último ítem): la lámina se ancla por la derecha y crece hacia la izquierda */
  .MenuNavegacion-submenu--derecha {
    left: auto;
    right: calc(-1 * var(--MenuNavegacion-panelPaddingX));
  }
}

/**
 * Contenido de los desplegables (compartido escritorio/móvil)
 */

.MenuNavegacion-submenuCol {
  flex: 1 0 auto;
}

.MenuNavegacion-submenuCol--aside {
  flex: 0 0 auto;
  min-width: 260px;
}

.MenuNavegacion-submenuGroup + .MenuNavegacion-submenuGroup {
  margin-top: calc(var(--MenuNavegacion-espacio) * 6);
}

.MenuNavegacion-submenuTitle {
  margin: 0 0 calc(var(--MenuNavegacion-espacio) * 3);
  padding-bottom: var(--MenuNavegacion-espacio);
  border-bottom: 1px solid var(--Global-Filete);
  /* !important: los h3 del tema (serif) pisan al componente en la web real */
  font-family: var(--MenuNavegacion-fuente);
  color: var(--Global-Gris-Seccion);
  font-size: var(--MenuNavegacion-tituloTamano);
  font-weight: var(--Font-Weight-400);
  line-height: normal; /* Figma: interlineado automatico */
  text-transform: uppercase;
}

.MenuNavegacion-submenuList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.MenuNavegacion-submenuList > li + li {
  margin-top: var(--MenuNavegacion-enlaceGap);
}

.MenuNavegacion-submenuLink {
  display: inline-flex;
  align-items: center;
  color: var(--Global-Color-Black);
  font-size: var(--MenuNavegacion-enlaceTamano);
  font-weight: var(--Font-Weight-400);
  line-height: normal; /* Figma: interlineado automatico */
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.MenuNavegacion-submenuLink:hover,
.MenuNavegacion-submenuLink:focus-visible {
  color: var(--Global-Destacado);
}

/**
 * Columna «* Nuevas formaciones *» (desplegable de Formaciones)
 */

/*
 * Bloque destacado: el título queda fuera de la caja (alineado con los títulos
 * de sección) y la caja clara envuelve solo las tarjetas, de modo que el
 * padding de la lámina es uniforme en los cuatro lados.
 */
.MenuNavegacion-destacados {
  flex: 0 0 var(--MenuNavegacion-destacadosAncho);
}



.MenuNavegacion-destacadosTitle {
  margin: 0 0 calc(var(--MenuNavegacion-espacio) * 3);
  font-family: var(--MenuNavegacion-fuente);
  color: var(--Global-Destacado);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  line-height: normal; /* Figma: interlineado automatico */
  text-transform: uppercase;
}

.MenuNavegacion-destacadoCard {
  display: block;
  padding: 15px; /* a petición: exacto, fuera de la unidad de espaciado */
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: var(--Global-Radio-Tarjeta);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.MenuNavegacion-destacadoCard + .MenuNavegacion-destacadoCard {
  margin-top: calc(var(--MenuNavegacion-espacio) * 3);
}

.MenuNavegacion-destacadoCard:hover,
.MenuNavegacion-destacadoCard:focus-visible {
  border-color: var(--Global-Destacado);
}

/* Con hover en la tarjeta, su texto también pasa al color destacado
   (la píldora no: ya es naranja con texto blanco) */
.MenuNavegacion-destacadoCard:hover .MenuNavegacion-destacadoNombre,
.MenuNavegacion-destacadoCard:hover .MenuNavegacion-cardText,
.MenuNavegacion-destacadoCard:focus-visible .MenuNavegacion-destacadoNombre,
.MenuNavegacion-destacadoCard:focus-visible .MenuNavegacion-cardText {
  color: var(--Global-Destacado);
}

.MenuNavegacion-pill {
  display: inline-block;
  padding: 4px 20px;
  background-color: var(--Global-Destacado);
  border-radius: var(--Global-Radio-Pastilla);
  color: var(--Global-Color-White);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  text-transform: uppercase;
}

.MenuNavegacion-destacadoNombre {
  display: block;
  margin-top: 14px;
  color: var(--Global-Color-Black);
  font-size: var(--MenuNavegacion-enlaceTamano);
  font-weight: var(--Font-Weight-400);
  line-height: normal; /* Figma: interlineado automatico */
}

.MenuNavegacion-destacadoCard .MenuNavegacion-cardText {
  display: block;
  margin-top: 8px;
}

/**
 * Píldoras de certificaciones (sustituir textos por logos cuando se exporten)
 */

/* Rejilla: auto-fit en móvil (entran las que caben y bajan de una en una);
   3 columnas en compacto y 4 en escritorio completo */
.MenuNavegacion-logoPills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--MenuNavegacion-espacio) * 8), max-content));
  gap: calc(var(--MenuNavegacion-espacio) * 1.25);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1320px) {
  .MenuNavegacion-logoPills {
    grid-template-columns: repeat(3, max-content);
  }
}

@media (min-width: 1560px) {
  .MenuNavegacion-logoPills {
    grid-template-columns: repeat(4, max-content);
  }
}

.MenuNavegacion-logoPill {
  width: calc(var(--MenuNavegacion-espacio) * 8);
  height: calc(var(--MenuNavegacion-espacio) * 4);
  border: 1px solid var(--Global-Color-Black);
  border-radius: var(--Global-Radio-Pastilla);
  transition: border-color 0.15s ease;
}

.MenuNavegacion-logoPill:hover {
  border-color: var(--Global-Destacado);
}

.MenuNavegacion-logoPill a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Logos en monocromo, como en el diseño (style.css fuerza img { width: 100% }) */
.MenuNavegacion-logoPill img {
  display: block;
  width: auto;
  max-width: calc(var(--MenuNavegacion-espacio) * 5);
  height: calc(var(--MenuNavegacion-espacio) * 2);
  object-fit: contain;
  filter: brightness(0);
  transition: filter 0.15s ease;
}

/* En hover el logo se tiñe de --Global-Destacado (#e43713): al ser <img>, el
   color se consigue con una cadena de filtros calibrada para ese hexadecimal */
.MenuNavegacion-logoPill:hover img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(95%) saturate(5044%) hue-rotate(3deg) brightness(98%) contrast(84%);
}

/**
 * Noticias destacadas (desplegable de Empresas)
 */

.MenuNavegacion-noticias {
  display: flex;
  gap: var(--MenuNavegacion-noticiaGap);
}

/* Sin fondo ni borde (a petición): la tarjeta vive directamente sobre el
   velo de la columna; el !important evita que el tema añada los suyos */
.MenuNavegacion-noticia {
  width: var(--MenuNavegacion-noticiaAncho);
  padding: 15px;
  background-color: transparent;
  border: 0;
}

/* TODO: sustituir el fondo por la imagen real de cada noticia */
.MenuNavegacion-noticiaImg {
  height: 200px; /* en proporción con el ancho reducido de la tarjeta */
  margin-bottom: 20px;
  background-color: #dcdcda;
  background-position: center;
  background-size: cover;
  border-radius: var(--Global-Radio-Imagen);
}

.MenuNavegacion-noticiaTexto {
  margin: 0;
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-19);
  line-height: normal; /* Figma: interlineado automatico */
}

/* Tarjeta de noticia enlazada al post (imagen + título + «Leer la noticia») */
.MenuNavegacion-noticiaEnlace {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Con hover en la tarjeta (o en su texto), TODO pasa al color destacado */
.MenuNavegacion-noticiaEnlace:hover .MenuNavegacion-noticiaTexto,
.MenuNavegacion-noticiaEnlace:focus-visible .MenuNavegacion-noticiaTexto,
.MenuNavegacion-noticiaEnlace:hover .MenuNavegacion-noticiaLink,
.MenuNavegacion-noticiaEnlace:focus-visible .MenuNavegacion-noticiaLink {
  color: var(--Global-Destacado);
}

.MenuNavegacion-noticiaLink {
  display: inline-block;
  margin-top: 14px;
  color: var(--Global-Destacado);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* La flecha es el mismo glifo ↓ de Inter girado -90° (regla del sistema) */
.MenuNavegacion-noticiaLink > span {
  display: inline-block;
  rotate: -90deg;
  margin-right: 4px;
}

/* Texto secundario de tarjetas */
.MenuNavegacion-cardText {
  margin: 0;
  color: var(--Global-Enlace-Submenu);
  font-size: var(--Font-Size-14);
  line-height: normal; /* Figma: interlineado automatico */
}

/**
 * Compactación entre 1200 y 1559px: la barra se aprieta y las láminas grandes
 * pasan a ocupar el ancho del viewport (siguen siendo hijas del <li>, así que
 * el hover se mantiene).
 */

@media (min-width: 1320px) and (max-width: 1559.98px) {
  :root {
    --MenuNavegacion-espacio: 7px;
    --MenuNavegacion-destacadosAncho: 340px;
    --MenuNavegacion-noticiaAncho: 330px;
    /* Con el cuerpo de barra a 19px (escala), en compacto se aprietan los
       espaciados y el logo para que los seis ítems + CTA sigan cabiendo
       (rampa recalculada desde 1320, el nuevo inicio del escritorio) */
    --MenuNavegacion-itemGap: clamp(14px, 2.6vw - 20px, 26px);
    --MenuNavegacion-ctaMargen: clamp(18px, 4vw - 35px, 44px);
    --MenuNavegacion-logoAlto: clamp(26px, 2vw, 30px);
  }

  /*
   * En compacto todas las láminas pasan a ocupar el ancho del viewport
   * (ancladas al ítem se saldrían). Siguen siendo hijas del <li>, así que
   * el hover se mantiene.
   */
  .MenuNavegacion-submenu {
    position: fixed;
    top: calc(var(--MenuNavegacion-altura) + var(--MenuNavegacion-panelHueco) + var(--MenuNavegacion-topOffset, 0px));
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }

  .MenuNavegacion-submenu--mega {
    justify-content: space-between;
  }

  /*
   * En la lámina a ancho completo de Empleo, la zona blanca destacada absorbe
   * el sobrante. En Empresas NO: con flex-grow las noticias descuadran la
   * lámina (comprobado en la web real con contenido dinámico).
   */
  .MenuNavegacion-submenu--empleo .MenuNavegacion-destacados,
  .MenuNavegacion-submenu--destacado .MenuNavegacion-destacados {
    flex: 1 1 auto;
  }

  .MenuNavegacion-submenuCol--aside {
    max-width: 280px;
    min-width: 0;
  }

  .MenuNavegacion-noticiaImg {
    height: 190px;
  }
}

/**
 * Móvil y tablet (<1320px): barra compacta con la hamburguesa; la
 * navegación es un panel de vidrio a pantalla completa con acordeones.
 */

@media (max-width: 1319.98px) {
  :root {
    --MenuNavegacion-altura: 64px;
    --MenuNavegacion-logoAlto: 24px;
    --MenuNavegacion-enlaceGap: 14px;
    /*
     * Aquí había un margen de página propio para tableta y móvil —una rampa de
     * 16 a 34px— porque la de escritorio se quedaba clavada en su mínimo de 16
     * y en una tableta de 1024 el contenido salía casi pegado al borde. Con los
     * 20px fijos del sistema ya no hace falta: son los mismos aquí que arriba
     * (Eduardo, 16/09/2026).
     */
  }

  .MenuNavegacion-btn {
    display: flex;
  }

  /* En móvil el logo es siempre el acrónimo (estático, sin cross-fade) */
  .MenuNavegacion-logo {
    width: calc(var(--MenuNavegacion-logoAlto) * 2.33); /* proporción del acrónimo (456/195.9) */
  }

  .MenuNavegacion .MenuNavegacion-logoImg--completo {
    display: none;
  }

  .MenuNavegacion .MenuNavegacion-logoImg--acronimo {
    position: static;
    height: var(--MenuNavegacion-logoAlto);
    opacity: 1;
  }

  .MenuNavegacion-nav {
    position: fixed;
    top: calc(var(--MenuNavegacion-altura) + var(--MenuNavegacion-topOffset, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    height: auto;
    margin: 0;
    padding: var(--MenuNavegacion-espacio) calc(var(--MenuNavegacion-espacio) * 3) calc(var(--MenuNavegacion-espacio) * 6);
    overflow-y: auto;
    background-color: var(--Global-Velo-Blanco);
    -webkit-backdrop-filter: var(--Global-Vidrio-Blur);
    backdrop-filter: var(--Global-Vidrio-Blur);
  }

  .MenuNavegacion.is-open .MenuNavegacion-nav {
    display: block;
  }

  .MenuNavegacion-list {
    display: block;
    height: auto;
  }

  .MenuNavegacion-item {
    display: block;
    height: auto;
  }

  /*
   * El CTA sale de la barra y vive dentro del panel, bajo Conócenos.
   *
   * Este grupo va DESPUÉS de .MenuNavegacion-item, no antes: la variante
   * --cta empata con él en especificidad (0,1,0), así que decide el orden.
   * Escrito arriba —donde estaba— el `display: block` del ítem base le ganaba
   * y los dos destinos se apilaban en vez de ponerse uno al lado del otro,
   * que es justo lo que este bloque existe para hacer.
   */
  .MenuNavegacion > .MenuNavegacion-cta {
    display: none;
  }

  .MenuNavegacion-item--cta {
    /* Los dos destinos, uno al lado del otro y repartiendose el ancho. */
    display: flex;
    gap: calc(var(--MenuNavegacion-espacio) * 1.5);
    border-bottom: 0;
    padding: calc(var(--MenuNavegacion-espacio) * 3) 0 var(--MenuNavegacion-espacio);
    text-align: center;
  }

  /* Mismas medidas que el CTA de escritorio (padding 7px 12px del base),
     solo que a ancho completo dentro del panel */
  .MenuNavegacion-cta--panel {
    display: flex;
    justify-content: center;
    flex: 1 1 0;
    margin: 0;
  }

  .MenuNavegacion-link {
    justify-content: space-between;
    width: 100%;
    /*
     * De 0.25 a 1.25 del espacio base: 2px de relleno vertical pasan a 10, y
     * con eso el item del menu pasa de 29px de alto a 45. No es solo aire: 29px
     * es la mitad del objetivo tactil que recomienda cualquier guia —44— y en
     * una lista de seis enlaces seguidos eso se traduce en pulsar el de al
     * lado.
     */
    padding: calc(var(--MenuNavegacion-espacio) * 1.25) 0;
    font-size: var(--Font-Size-29);
    line-height: var(--Font-Line-height-110); /* Figma: 110% */
  }

  /* En el panel los ítems con submenú marcan «→»: el mismo glifo ↓ de
     Inter girado -90°; hereda los 29px del ítem, con lo que su tinta queda
     al tamaño de los demás iconos móviles (X y hamburguesa) */
  .MenuNavegacion-arrow {
    rotate: -90deg;
    scale: 0.7; /* solo móvil; en escritorio se queda el 0.9 base */
    line-height: 1;
  }

  /* Drill-down: al abrir un ítem, su submenú sustituye a la lista de nivel 1
     (el JS pone .has-nivel2 en el header) y se vuelve con el botón ← */
  .MenuNavegacion-submenu {
    display: none;
    padding: 0 0 24px;
  }

  .MenuNavegacion-item.is-open > .MenuNavegacion-submenu {
    display: flex;
    flex-direction: column;
  }

  .MenuNavegacion.has-nivel2 .MenuNavegacion-nav {
    background-color: var(--Global-Color-White);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .MenuNavegacion.has-nivel2 .MenuNavegacion-item:not(.is-open) {
    display: none;
  }

  .MenuNavegacion.has-nivel2 .MenuNavegacion-item.is-open > .MenuNavegacion-link {
    display: none;
  }

  .MenuNavegacion-volver {
    display: block;
    align-self: flex-start;
    margin: 0;
    padding: calc(var(--MenuNavegacion-espacio) * 1.5) 0;
    border: 0;
    background: none;
    color: var(--Global-Color-Black);
    font-size: var(--Font-Size-29); /* como la X y la hamburguesa */
    line-height: var(--Font-Line-height-110); /* Figma: 110% */
    cursor: pointer;
  }

  /* El mismo glifo ↓ de Inter girado +90° hace de ←, con la misma escala
     que las flechas de abrir submenú */
  .MenuNavegacion-volver span {
    display: inline-block;
    rotate: 90deg;
    scale: 0.7;
  }

  .MenuNavegacion-submenuCol--aside {
    min-width: 0;
  }

  .MenuNavegacion-submenuCol + .MenuNavegacion-submenuCol,
  .MenuNavegacion-submenuGroup + .MenuNavegacion-submenuGroup {
    margin-top: 32px;
  }

  .MenuNavegacion-submenuLink {
    white-space: normal;
  }

  /* El bloque destacado abre el submenú (orden del DOM) como carrusel */
  .MenuNavegacion-destacados {
    flex: 0 0 auto; /* en columna, el flex-basis de escritorio se volvería altura */
    margin: 0 0 calc(var(--MenuNavegacion-espacio) * 3);
  }

  /* Carrusel horizontal con scroll-snap: MISMO patrón para los destacados
     de Formaciones y las noticias de Empresas */
  .MenuNavegacion-destacadosCarrusel,
  .MenuNavegacion-noticias {
    display: flex;
    flex-direction: row;
    padding: calc(var(--MenuNavegacion-espacio) * 3); /* uniforme en los cuatro lados */
    scroll-padding: calc(var(--MenuNavegacion-espacio) * 3);
    background-color: var(--Global-Color-Grey);
    border-radius: var(--Global-Radio-Panel); /* iba a mano en 16px */
    gap: calc(var(--MenuNavegacion-espacio) * 1.5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .MenuNavegacion-destacadosCarrusel::-webkit-scrollbar,
  .MenuNavegacion-noticias::-webkit-scrollbar {
    display: none;
  }

  .MenuNavegacion-destacadosCarrusel .MenuNavegacion-destacadoCard {
    flex: 0 0 min(260px, 80%);
    scroll-snap-align: start;
    border-color: var(--Global-Borde-Tarjeta);
  }

  .MenuNavegacion-destacadosCarrusel .MenuNavegacion-destacadoCard + .MenuNavegacion-destacadoCard {
    margin-top: 0;
  }

  /* Mismo hueco inferior que el bloque de destacados */
  .MenuNavegacion-noticias {
    margin-bottom: calc(var(--MenuNavegacion-espacio) * 3);
  }

  /* Cada noticia es una diapositiva; algo más anchas que las destacadas
     porque llevan imagen + titular largo */
  .MenuNavegacion-noticias .MenuNavegacion-noticia {
    flex: 0 0 min(300px, 90%);
    width: auto;
    padding: 0; /* el carrusel ya aporta el margen interior */
    scroll-snap-align: start;
  }

  .MenuNavegacion-noticiaImg {
    height: 160px;
  }

  /*
   * Bloque Blog del nivel 1: filete arriba, título sin regla y tarjetas
   * imagen + texto + «Leer más» (la píldora reutiliza su estilo).
   * OCULTO a petición: para recuperarlo, display: block. El resto de reglas
   * del bloque se conservan tal cual.
   */
  .MenuNavegacion-item--blog {
    display: none;
    margin-top: calc(var(--MenuNavegacion-espacio) * 3);
    padding-top: calc(var(--MenuNavegacion-espacio) * 3);
    border-top: 1px solid var(--Global-Filete);
    font-family: var(--MenuNavegacion-fuente);
  }

  .MenuNavegacion-item--blog :where(h3, a, span, article) {
    font-family: var(--MenuNavegacion-fuente);
  }

  .MenuNavegacion-item--blog .MenuNavegacion-submenuTitle {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .MenuNavegacion-blogCard + .MenuNavegacion-blogCard {
    margin-top: calc(var(--MenuNavegacion-espacio) * 3);
  }

  .MenuNavegacion-blogEnlace {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: calc(var(--MenuNavegacion-espacio) * 2.5);
    align-items: start;
    text-decoration: none;
  }

  /* Hover sin subrayado (el a:hover del tema subraya en la web real) */
  .MenuNavegacion-blogEnlace:hover,
  .MenuNavegacion-blogEnlace:focus-visible {
    text-decoration: none;
  }

  .MenuNavegacion-blogImg {
    display: block;
    aspect-ratio: 1;
    border: 0; /* sin borde, a petición */
    background-color: var(--Global-Color-White);
    background-position: center;
    background-size: cover;
  }

  /* El bloque de texto se centra verticalmente respecto a la imagen */
  .MenuNavegacion-blogInfo {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-start;
    gap: calc(var(--MenuNavegacion-espacio) * 1.5);
    justify-content: center;
  }

  /* El botón «Leer más» reutiliza la píldora pero en caja de frase */
  .MenuNavegacion-blogInfo .MenuNavegacion-pill {
    text-transform: none;
  }

  /* Con el panel abierto, la página de detrás no hace scroll */
  body.cei-menuAbierto {
    overflow: hidden;
  }
}

/**
 * Aire para la barra fija: el contenido del tema arrancaba pegado al header.
 * Arriba, la altura real de la barra (80 en escritorio, 64 en móvil) + 20px,
 * así el hueco es el mismo en los dos modos; a los lados, el margen de página
 * compartido con el header y el footer (60 máx., 16 en móvil: con 60 fijos el
 * contenido se ahogaría en pantallas estrechas).
 */

body.cei-header-admin #Content.contenido_area,
body.cei-header-admin #Content.blanco_completo,
body.cei-header-admin .the_content_wrapper.the_content_wrapper,
body.cei-header-admin .BlogCategories .sections_group .section-filters .section_wrapper,
body.cei-header-admin .testing_padding {
  padding: calc(var(--MenuNavegacion-altura) + 20px) var(--MenuNavegacion-margenPagina) 0;
}

/*
 * Y ese carril, en las paginas sin migrar tambien.
 *
 * La regla de style.css heredada del tema —.the_content_wrapper por partida
 * doble, #Content.contenido_area…— clava los lados en 60px con !important, asi
 * que gana a la de aqui arriba y el contenido se quedaba en 60px mientras la
 * cabecera y el pie seguian el carril del sistema: 34px hasta 1320 y 51px a
 * 1440. En /finalizar-reserva/, con el formulario a 60 y el pie a 34, parecia
 * que al pie le faltaban los margenes (Eduardo, 08/09/2026).
 *
 * Solo se tocan los lados: el aire de arriba lo sigue poniendo la regla vieja,
 * que en las paginas de compra ya lo reserva #Wrapper y no conviene sumarlo dos
 * veces. Y con !important porque a un !important no se le gana de otra forma.
 * Pendiente: quitar los 60px de style.css y borrar esta regla.
 */
body.cei-header-admin #Content.contenido_area,
body.cei-header-admin #Content.blanco_completo,
body.cei-header-admin .the_content_wrapper.the_content_wrapper,
body.cei-header-admin .BlogCategories .sections_group .section-filters .section_wrapper,
body.cei-header-admin .testing_padding {
  padding-inline: var(--MenuNavegacion-margenPagina) !important;
}

/*
 * WooCommerce (tienda y carrito): aquí la compensación de la barra fija NO
 * puede ir en #Content, porque el título del producto vive en
 * `.productos_mios`, un hermano anterior dentro de #Wrapper. Va en #Wrapper,
 * que envuelve toda la página, y así cada bloque conserva su padding interno
 * de diseño (los 56px de #Content…) y el aire de la barra es el mismo 20px
 * que en el resto del sitio. Sustituye a los valores del header antiguo en
 * style.css: 0 / 112 / 105px.
 */
body.cei-header-admin.woocommerce #Wrapper,
body.cei-header-admin.naranja_claro #Wrapper {
  /*
   * Solo el aire, no el alto de la barra: eso ya lo reserva «body[class]» mas
   * abajo con --Global-Alto-Cabecera. Cuando se escribio esto aquella regla no
   * estaba, y el hueco se contaba dos veces: 80 del body + 100 de aqui dejaban
   * el titulo del producto a 180px de la barra (Eduardo, 08/09/2026).
   */
  padding-top: 20px;
}

/*
 * El bloque del título del producto llevaba el aire bajo el header antiguo
 * (50px en escritorio, 0 en móvil, de ahí que el título quedara pegado a la
 * barra). Ahora el aire lo pone el wrapper y este bloque no suma.
 */
body.cei-header-admin .productos_mios.section_wrapper {
  padding-top: 0;
  /* …y a los lados, el mismo margen de página que la barra, #Content y el
     footer: el tema le daba 20px propios y el título quedaba desalineado. Con
     !important porque por debajo de 1025 hay un «.shop_mio .section_wrapper
     { padding-left: 20px !important }» que si no gana (Eduardo, 08/09/2026). */
  padding-right: var(--MenuNavegacion-margenPagina) !important;
  padding-left: var(--MenuNavegacion-margenPagina) !important;
}

/*
 * Margen de página unificado en el contenido de la tienda y del carrito.
 *
 * Con !important porque la regla que hay que ganar tambien lo lleva:
 * «.woocommerce #Content { padding: 56px 60px !important }» en style.css. Sin
 * el, en /matriculaciones/<curso>/ el titulo y su antetitulo caian en el carril
 * del sistema (51px a 1440) y el precio, el texto y el formulario en los 60px
 * del tema: dos alineaciones distintas en la misma pagina, que es lo que se
 * veia al bajar (Eduardo, 08/09/2026). Solo los lados: el aire de arriba lo
 * sigue poniendo la regla vieja.
 */
body.cei-header-admin.woocommerce #Content,
body.cei-header-admin.naranja_claro.carrito #Content {
  padding-right: var(--MenuNavegacion-margenPagina) !important;
  padding-left: var(--MenuNavegacion-margenPagina) !important;
}

/*
 * En pantallas medianas y pequeñas el tema mete 24px propios en la columna
 * del producto (`.single-product.woocommerce div.product div.entry-summary`,
 * dentro de una media query), y el precio, la descripción y el formulario
 * salían 24px más adentro que el título y que la barra. Se anula: el margen
 * de página ya lo pone #Content. En escritorio esa regla no está activa, así
 * que allí no cambia nada.
 *
 * Hace falta repetir `div.product div` y el !important: la regla del tema pesa
 * (0,4,2) y la de aquí, con una sola clase de cuerpo, se quedaba corta.
 */
body.cei-header-admin.woocommerce div.product div.summary.entry-summary {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/**
 * TIPOGRAFIA UNIFICADA EN LA MATRICULA (Eduardo, 08/09/2026)
 *
 * En la misma columna convivian cuatro cuerpos distintos: la descripcion del
 * producto a 18px con interlineado 19,8; la nota de «Te estás matriculando
 * en…» a 16 con 25; las etiquetas de las variaciones a 16 con 32 y peso 530; y
 * los campos a 15. Todo pasa al cuerpo del sistema —Size-19, interlineado
 * normal y el tracking de la escala—, que es el mismo que se lee en el resto
 * de la web. Los !important son para las reglas de la tienda, que los llevan.
 */
body.cei-header-admin.single-product #Content p:not(.price),
body.cei-header-admin.single-product #Content label,
body.cei-header-admin.single-product #Content li,
body.cei-header-admin.single-product #Content .custom-field-wrapper input,
body.cei-header-admin.single-product #Content .variations select {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19) !important;
  line-height: normal !important;
  letter-spacing: var(--Font-Letter-spacing-2) !important;
}

/*
 * El precio no entra en esa unificacion: es una cifra y se lee como tal. Los
 * dos —el rango del producto y el de la variacion elegida— al mismo cuerpo de
 * la escala, que estaban a 30 y a 16.
 */
body.cei-header-admin.single-product #Content .price,
body.cei-header-admin.single-product #Content .woocommerce-variation-price .price {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-29) !important;
  line-height: var(--Font-Line-height-110) !important;
  letter-spacing: var(--Font-Letter-spacing-2) !important;
}

/* La nota del curso al que te matriculas: el mismo cuerpo, en su sitio. */
.custom-field-curso {
  max-width: 62ch;
  margin: 0 0 var(--Global-Espacio-TituloContenido);
}

/*
 * El antetitulo y el precio, mas pequeños; y menos aire entre el antetitulo y
 * lo que viene debajo (Eduardo, 08/09/2026). El antetitulo iba a 30 con
 * interlineado 45 y el precio a 29: al lado de un titular de 55 pesaban
 * demasiado los tres.
 */
body.cei-header-admin.single-product .productos_mios .subtitle {
  margin: 0 !important;
  font-size: var(--Font-Size-20) !important;
  line-height: var(--Font-Line-height-110) !important;
  letter-spacing: var(--Font-Letter-spacing-2);
}

body.cei-header-admin.single-product #Content .price,
body.cei-header-admin.single-product #Content .woocommerce-variation-price .price {
  font-size: var(--Font-Size-20) !important;
}

/* El hueco entre el bloque del titulo y el contenido: el aire del sistema y no
   los 56px que trae «.woocommerce #Content» de style.css. */
body.cei-header-admin.single-product #Content {
  padding-top: var(--Global-Espacio-TituloContenido) !important;
}

/*
 * «Limpiar» fuera (Eduardo, 08/09/2026): el enlace de WooCommerce para deshacer
 * la seleccion. Con los desplegables ya rellenos no hay nada que limpiar, y
 * cambiar una opcion es elegir otra.
 */
body.cei-header-admin.single-product .reset_variations {
  display: none !important;
}

/* Los campos, con las esquinas del sistema: iban a escuadra. */
body.cei-header-admin.single-product #Content .variations select,
body.cei-header-admin.single-product #Content .custom-field-wrapper input,
body.cei-header-admin.woocommerce #Content input.input-text,
body.cei-header-admin.woocommerce #Content select {
  border-radius: var(--Global-Radio-Imagen) !important;
}

/*
 * El extracto del producto (descripción corta) se muestra ENTERO. Estuvo
 * recortado a tres líneas con `line-clamp` para que los extractos largos no
 * empujaran el precio y el formulario fuera de la primera pantalla, pero el
 * recorte se comía condiciones de matrícula que hay que leer y terminaba en
 * unos puntos suspensivos que no abrían nada (Eduardo, 09/09/2026).
 *
 * Si algún extracto vuelve a estorbar, se acorta el texto en el admin del
 * producto; no se esconde con CSS.
 */
body.cei-header-admin.woocommerce .woocommerce-product-details__short-description {
  display: block;
  overflow: visible;
}

/* Los legales van a sangre a propósito: solo se corrige el aire superior */
body.cei-header-admin #Content.desk_legal.completa {
  padding-top: calc(var(--MenuNavegacion-altura) + 20px);
}

/* En móvil el carrito llevaba 113px arriba para el header antiguo: sobra,
   porque ahora la barra la compensa #Wrapper */
@media (max-width: 1319.98px) {
  body.cei-header-admin.naranja_claro.carrito #Content {
    padding-top: 50px; /* el mismo valor que en escritorio */
  }
}

/**
 * Aviso de cookies (CookieYes) con el mismo vidrio que la barra.
 *
 * POR QUE HAY !important AQUI. Compiten tres cosas por el fondo de la barra:
 * el gris opaco del restyling de 2023 (`.cky-consent-container
 * .cky-consent-bar` en style.css, con !important), el `background-color:
 * #121212` que CookieYes escribe EN LINEA sobre el elemento, y este vidrio.
 * A un !important no se le gana con especificidad —eso decia el comentario
 * anterior y era falso: el aviso llevaba tiempo saliendo gris plano, sin
 * vidrio (Eduardo, 10/09/2026)—, y a un estilo en linea tampoco. Asi que aqui
 * hace falta, y con el prefijo del body para no pisar nada mas.
 *
 * Todo va dentro de un @supports: un velo al 65% sin desenfoque detras deja el
 * texto sobre la pagina y no se lee. Donde no hay backdrop-filter se queda el
 * gris opaco de style.css, que es el que estaba.
 *
 * La refraccion va en una regla aparte a proposito: si el filtro SVG no
 * estuviera en la pagina, `url(#…)` invalidaria el backdrop-filter entero y no
 * quedaria ni el desenfoque. La clase del body la pone el JS solo en Blink.
 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.cei-header-admin .cky-consent-container .cky-consent-bar {
    background: var(--Global-Velo-Blanco) !important;
    border-color: var(--Global-Color-Grey) !important;
    color: var(--Global-Color-Black) !important;
    -webkit-backdrop-filter: var(--Global-Vidrio-Blur);
    backdrop-filter: var(--Global-Vidrio-Blur);
  }

  body.cei-has-liquidGlass .cky-consent-container .cky-consent-bar {
    backdrop-filter: var(--Global-Vidrio-Blur) url(#CeiLiquidGlass);
  }

  /* Los botones dejan ver el vidrio: en style.css van en gris opaco. */
  body.cei-header-admin .cky-consent-container .cky-notice-btn-wrapper .cky-btn,
  body.cei-header-admin .cky-consent-container .cky-btn-accept {
    background: transparent !important;
  }
}

/*
 * Las esquinas del aviso y de sus botones (Eduardo, 14/09/2026): la lamina
 * con el radio de panel del sistema, el mismo de los desplegables del menu, y
 * los botones a pastilla, como el resto de botones del sitio (borde de 1px y
 * el aire de los demas; CookieYes los trae con 2px y 8px de relleno). Fuera
 * del @supports porque no dependen del vidrio, y con !important por lo mismo
 * que arriba: CookieYes escribe su radio en su propia hoja.
 */
body.cei-header-admin .cky-consent-container,
body.cei-header-admin .cky-consent-container .cky-consent-bar {
  border-radius: var(--Global-Radio-Panel) !important;
}

body.cei-header-admin .cky-btn {
  border-radius: var(--Global-Radio-Pastilla) !important;
  border-width: 1px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
}

@media (prefers-reduced-motion: reduce) {
  .MenuNavegacion-link,
  .MenuNavegacion .MenuNavegacion-logoImg--completo,
  .MenuNavegacion .MenuNavegacion-logoImg--acronimo,
  .MenuNavegacion-arrow,
  .MenuNavegacion-cta,
  .MenuNavegacion-submenu,
  .MenuNavegacion-submenuLink,
  .MenuNavegacion-destacadoCard,
  .MenuNavegacion-noticiaLink {
    transition: none;
  }
}