/*
 * Mr Chava · Menú: el menú propio (src/Menu.php), con el aspecto validado el 28-oct-2026 (assets/menu-pie.css) y los
 * mismos valores que el widget «Menú» de Elementor Pro al que sustituye, medidos en la página (deploy/estilos_menu.py):
 * letra Roboto 17 px 500, pastilla negra que sube al pasar el ratón, desplegable en tarjeta blanca, la página actual en
 * gris y, en el móvil, hamburguesa de 45 px y panel blanco a todo el ancho. Solo afecta a sus propias clases (mcm-…).
 */

.mcm-menu { display: flex; position: relative; }
.mcm-menu ul { margin: 0; padding: 0; list-style: none; }
.mcm-menu a { text-decoration: none; }

/* El kit de Elementor da a todos los enlaces la letra general y, al pasar el ratón, negrita y cursiva. El widget de
   Elementor lo anulaba; aquí también. */
.mcm-menu a.mcm-menu__enlace,
.mcm-menu a.mcm-menu__subenlace,
.mcm-menu a.mcm-menu__enlace:hover,
.mcm-menu a.mcm-menu__subenlace:hover { font-family: Roboto, sans-serif; font-style: normal; text-decoration: none; }
.mcm-menu__flecha { display: flex; align-items: center; margin: -10px 0; padding: 10px 0 10px 10px; line-height: 1; }
.mcm-menu__flecha svg { display: block; width: 11px; height: 11px; fill: currentColor; opacity: .6; }

/* El botón del móvil: el tema da estilo a todos los botones, se anula. */
.mcm-menu .mcm-menu__abrir,
.mcm-menu .mcm-menu__abrir:hover,
.mcm-menu .mcm-menu__abrir:focus {
	align-items: center; justify-content: center; box-sizing: border-box; width: 45px; height: 45px; margin: 0 0 0 auto;
	padding: 7.5px; border: 0; border-radius: 3px; background: transparent; color: #000; font-size: 30px; line-height: 45px;
	cursor: pointer; box-shadow: none;
}
.mcm-menu__icono { display: block; width: 30px; height: 30px; fill: #33373d; }
.mcm-menu__icono--cerrar,
.mcm-menu--abierto .mcm-menu__icono--abrir { display: none; }
.mcm-menu--abierto .mcm-menu__icono--cerrar { display: block; }

/* ---------- Ordenador y tableta: en fila ----------
   Las transiciones solo animan lo que cambia al pasar el ratón (color y subida de la pastilla): los mismos elementos
   sirven al móvil, y con «transition: all» un cambio de tamaño de ventana que cruce los 767 px se veía medio segundo a
   medias (lo destapó la captura de página completa, 28-oct). */
@media (min-width: 768px) {
	.mcm-menu .mcm-menu__abrir { display: none; }
	.mcm-menu__lista { display: flex; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 2; margin-left: auto !important; }
	.mcm-menu__item { display: flex; position: relative; }
	.mcm-menu a.mcm-menu__enlace {
		display: flex; flex-grow: 1; align-items: center; position: relative; padding: 13px 20px 27px;
		font-family: Roboto, sans-serif; font-size: 17px; font-weight: 500; line-height: 20px; letter-spacing: .01em;
		color: #000; white-space: nowrap; transition: color .4s;
	}
	/* Pastilla negra: sube al pasar el ratón (el «barrido hacia arriba» de Elementor), ajustada al texto. */
	.mcm-menu a.mcm-menu__enlace::before {
		content: ""; position: absolute; top: 100%; bottom: 19px; left: 6px; right: 6px; z-index: -1;
		background: #000; border-radius: 6px; transition: top .3s;
	}
	.mcm-menu a.mcm-menu__enlace:hover,
	.mcm-menu a.mcm-menu__enlace:focus,
	.mcm-menu__item:hover > a.mcm-menu__enlace,
	.mcm-menu__item.mcm-abierto > a.mcm-menu__enlace { color: #fff; }
	.mcm-menu a.mcm-menu__enlace:hover::before,
	.mcm-menu a.mcm-menu__enlace:focus::before,
	.mcm-menu__item:hover > a.mcm-menu__enlace::before,
	.mcm-menu__item.mcm-abierto > a.mcm-menu__enlace::before { top: 5px; }
	/* La página actual, en gris y sin pastilla (como en Elementor). */
	.mcm-menu a.mcm-menu__enlace.mcm-menu--actual { color: #7a7a7a; }
	.mcm-menu a.mcm-menu__enlace.mcm-menu--actual::before { background: transparent; }
	.mcm-menu a.mcm-menu__enlace:hover .mcm-menu__flecha svg,
	.mcm-menu a.mcm-menu__enlace:focus .mcm-menu__flecha svg,
	.mcm-menu a.mcm-menu__enlace.mcm-menu--actual .mcm-menu__flecha svg,
	.mcm-menu__item:hover > a.mcm-menu__enlace .mcm-menu__flecha svg,
	.mcm-menu__item.mcm-abierto > a.mcm-menu__enlace .mcm-menu__flecha svg { fill: currentColor; opacity: .85; }

	/* Desplegable: tarjeta blanca justo bajo la línea de la cabecera. Se abre al pasar el ratón o con el teclado, y
	   tarda un poco en cerrarse para que no se escape al bajar el ratón. */
	.mcm-menu__sub {
		position: absolute; top: 100%; left: 0; box-sizing: border-box; min-width: 240px; margin-top: -8px !important;
		padding: 6px 0 !important; background: #fff; border: 1px solid #eee; border-radius: 6px;
		box-shadow: 0 12px 28px rgba(0, 0, 0, .09); visibility: hidden; opacity: 0;
		transition: visibility 0s linear .4s, opacity 0s linear .4s;
	}
	.mcm-menu__item:hover > .mcm-menu__sub,
	.mcm-menu__item:focus-within > .mcm-menu__sub,
	.mcm-menu__item.mcm-abierto > .mcm-menu__sub { visibility: visible; opacity: 1; transition-delay: 0s; }
	.mcm-menu__subitem { display: block; position: relative; }
	.mcm-menu a.mcm-menu__subenlace {
		display: flex; align-items: center; position: relative; z-index: 0; padding: 11px 20px;
		border-left: 8px solid transparent; font-family: Roboto, sans-serif; font-size: 15px; font-weight: 400;
		line-height: 20px; color: #000; white-space: nowrap; transition: color .4s;
	}
}

/* ---------- Móvil: hamburguesa y panel blanco a todo el ancho ---------- */
@media (max-width: 767px) {
	.mcm-menu .mcm-menu__abrir { display: flex; }
	.mcm-menu__lista {
		display: block; position: absolute; top: 45px; left: calc(-1 * var(--mcm-izq, 0px)); z-index: 9997;
		box-sizing: border-box; width: var(--mcm-ancho, 100vw); margin-top: 15px !important; max-height: 0; overflow: hidden;
		background: #fff; border-top: 1px solid #ececec; box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
		transform: scaleY(0); transform-origin: top; visibility: hidden;
		transition: max-height .3s, transform .3s, visibility 0s .3s;
	}
	.mcm-menu--abierto .mcm-menu__lista {
		max-height: 100vh; overflow-x: hidden; overflow-y: auto; transform: none; visibility: visible;
		transition: max-height .3s, transform .3s, visibility 0s;
	}
	.mcm-menu__item { display: block; position: relative; }
	.mcm-menu a.mcm-menu__enlace,
	.mcm-menu a.mcm-menu__subenlace {
		display: flex; align-items: center; position: relative; z-index: 0; color: #000;
		font-family: Roboto, sans-serif; line-height: 20px;
		transition: color .1s ease-in-out, background-color .1s ease-in-out;
	}
	.mcm-menu a.mcm-menu__enlace { padding: 17px 20px; border-bottom: 1px solid #ececec; font-size: 17px; font-weight: 500; }
	.mcm-menu__flecha { margin-left: auto; }
	.mcm-menu__sub { display: none; background: #fafafa; }
	.mcm-menu__item.mcm-abierto > .mcm-menu__sub { display: block; }
	.mcm-menu a.mcm-menu__subenlace {
		padding: 15px 20px 15px 36px; border-left: 8px solid transparent; border-bottom: 1px solid #f0f0f0;
		font-size: 16px; font-weight: 400;
	}
}

/* Pastilla negra con margen en el desplegable y en el panel del móvil (al pasar, abierta o página actual). */
.mcm-menu a.mcm-menu__subenlace:hover,
.mcm-menu a.mcm-menu__subenlace:focus,
.mcm-menu a.mcm-menu__subenlace.mcm-menu--actual { color: #fff; }
.mcm-menu a.mcm-menu__subenlace:hover::before,
.mcm-menu a.mcm-menu__subenlace:focus::before,
.mcm-menu a.mcm-menu__subenlace.mcm-menu--actual::before {
	content: ""; position: absolute; inset: 5px 10px; z-index: -1; background: #000; border-radius: 6px;
}
@media (max-width: 767px) {
	.mcm-menu a.mcm-menu__enlace:hover,
	.mcm-menu a.mcm-menu__enlace:focus,
	.mcm-menu a.mcm-menu__enlace.mcm-menu--actual,
	.mcm-menu__item.mcm-abierto > a.mcm-menu__enlace { color: #fff; }
	.mcm-menu a.mcm-menu__enlace:hover::before,
	.mcm-menu a.mcm-menu__enlace:focus::before,
	.mcm-menu a.mcm-menu__enlace.mcm-menu--actual::before,
	.mcm-menu__item.mcm-abierto > a.mcm-menu__enlace::before {
		content: ""; position: absolute; inset: 5px 10px; z-index: -1; background: #000; border-radius: 6px;
	}
	.mcm-menu a.mcm-menu__enlace:hover .mcm-menu__flecha svg,
	.mcm-menu a.mcm-menu__enlace.mcm-menu--actual .mcm-menu__flecha svg,
	.mcm-menu__item.mcm-abierto > a.mcm-menu__enlace .mcm-menu__flecha svg { fill: currentColor; opacity: .85; }
}