/* =========================================================================
   Aula de Sara — Menú de navegación · v1.0
   Tokens: verde pizarra #2E4B45 · coral #E8674C · miel #E7A33A
           terracota #C1553B · crema #FBF6EE · grafito #2B2B28

   NOTA DE ESPECIFICIDAD: GeneratePress estiliza con selectores del tipo
   «.main-navigation .main-nav ul li a», que ganan a una sola clase. Por eso
   cada bloque se declara dos veces: la forma corta (contextos sin GP) y la
   forma reforzada dentro de .main-navigation.
   ========================================================================= */

:root {
	--av-pizarra: #2e4b45;
	--av-coral: #e8674c;
	--av-coral-oscuro: #d2593d;
	--av-miel: #e7a33a;
	--av-terracota: #c1553b;
	--av-crema: #fbf6ee;
	--av-grafito: #2b2b28;

	--av-font-ui: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--av-font-serif: "Fraunces", "Bitter", Georgia, serif;

	--av-radio: 12px;
	--av-transicion: 160ms cubic-bezier(0.2, 0, 0.2, 1);
	--av-borde: rgba(46, 75, 69, 0.12);
	--av-sombra: 0 18px 44px -26px rgba(46, 75, 69, 0.5), 0 2px 6px -2px rgba(46, 75, 69, 0.08);
}

/* -------------------------------------------------------------------------
   1. Lista raíz
   ---------------------------------------------------------------------- */

.aula-menu,
.main-navigation .main-nav ul.aula-menu,
.aula-menu .aula-menu__submenu,
.main-navigation .main-nav ul.aula-menu ul.aula-menu__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aula-menu,
.main-navigation .main-nav ul.aula-menu {
	display: flex;
	align-items: center;
	font-family: var(--av-font-ui);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0;
}

.aula-menu > .aula-menu__item,
.main-navigation .main-nav ul.aula-menu > li.aula-menu__item {
	position: relative;
}

/* -------------------------------------------------------------------------
   2. Enlaces de nivel 1
   ---------------------------------------------------------------------- */

.aula-menu > .aula-menu__item > .aula-menu__link,
.main-navigation .main-nav ul.aula-menu > li > a.aula-menu__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	padding: 0 0.95rem;
	color: rgba(46, 75, 69, 0.78);
	text-decoration: none;
	font-family: var(--av-font-ui);
	font-size: 0.94rem;
	font-weight: 600;
	background: none;
	transition: color var(--av-transicion);
}

/* Anula el bloque gris de hover/activo de GeneratePress */
.main-navigation .main-nav ul.aula-menu > li:hover > a.aula-menu__link,
.main-navigation .main-nav ul.aula-menu > li.is-active > a.aula-menu__link,
.main-navigation .main-nav ul.aula-menu > li.sfHover > a.aula-menu__link,
.main-navigation .main-nav ul.aula-menu > li > a.aula-menu__link:focus,
.main-navigation .main-nav ul.aula-menu > li > a.aula-menu__link:hover {
	background: none;
	background-color: transparent;
	color: var(--av-pizarra);
}

/* Indicador coral inferior, tipo pestaña */
.aula-menu > .aula-menu__item > .aula-menu__link::after,
.main-navigation .main-nav ul.aula-menu > li > a.aula-menu__link::after {
	content: "";
	position: absolute;
	left: 0.95rem;
	right: 0.95rem;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--av-coral);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--av-transicion);
}

.aula-menu > .aula-menu__item:hover > .aula-menu__link::after,
.aula-menu > .aula-menu__item:focus-within > .aula-menu__link::after,
.aula-menu > .aula-menu__item.is-active > .aula-menu__link::after,
.main-navigation .main-nav ul.aula-menu > li:hover > a.aula-menu__link::after,
.main-navigation .main-nav ul.aula-menu > li.is-active > a.aula-menu__link::after {
	transform: scaleX(1);
}

.aula-menu > .aula-menu__item.is-active > .aula-menu__link,
.main-navigation .main-nav ul.aula-menu > li.is-active > a.aula-menu__link {
	color: var(--av-pizarra);
	font-weight: 800;
}

.aula-menu__link:focus-visible {
	outline: 2px solid var(--av-coral);
	outline-offset: -4px;
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
   3. Icono, badge y flecha
   ---------------------------------------------------------------------- */

.aula-menu .aula-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	opacity: 0.6;
	transition: opacity var(--av-transicion);
}

.aula-menu .aula-menu__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.aula-menu .aula-menu__item:hover > .aula-menu__link .aula-menu__icon,
.aula-menu .aula-menu__item.is-active > .aula-menu__link .aula-menu__icon {
	opacity: 1;
}

.aula-menu .aula-menu__label {
	white-space: nowrap;
}

.aula-menu .aula-menu__badge {
	font-size: 0.6rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: var(--av-miel);
	color: #3a2a08;
	line-height: 1.6;
	margin-left: 0.1rem;
}

.aula-menu .aula-menu__arrow {
	display: inline-flex;
	width: 12px;
	height: 12px;
	opacity: 0.5;
	transition: transform var(--av-transicion), opacity var(--av-transicion);
}

.aula-menu .aula-menu__arrow svg {
	width: 100%;
	height: 100%;
	stroke-width: 2.2;
}

.aula-menu .aula-menu__item:hover > .aula-menu__link .aula-menu__arrow {
	opacity: 0.9;
}

.aula-menu .aula-menu__item.is-open > .aula-menu__link .aula-menu__arrow {
	transform: rotate(180deg);
}

/* Se oculta la flecha propia de GeneratePress para no duplicarla */
.aula-menu .dropdown-menu-toggle {
	display: none !important;
}

/* -------------------------------------------------------------------------
   4. Botón CTA (clase de menú: av-cta)
   ---------------------------------------------------------------------- */

.aula-menu__item--cta,
.main-navigation .main-nav ul.aula-menu > li.aula-menu__item--cta {
	margin-left: 0.5rem;
	display: flex;
	align-items: center;
}

.aula-menu__link--cta,
.main-navigation .main-nav ul.aula-menu > li > a.aula-menu__link--cta {
	background: var(--av-coral);
	color: #fff;
	font-weight: 800;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	line-height: 1.2;
	box-shadow: 0 2px 8px -2px rgba(232, 103, 76, 0.6);
	transition: background-color var(--av-transicion), transform var(--av-transicion), box-shadow var(--av-transicion);
}

.aula-menu__link--cta::after,
.main-navigation .main-nav ul.aula-menu > li > a.aula-menu__link--cta::after {
	display: none;
}

.main-navigation .main-nav ul.aula-menu > li > a.aula-menu__link--cta:hover,
.main-navigation .main-nav ul.aula-menu > li:hover > a.aula-menu__link--cta,
.aula-menu__link--cta:hover,
.aula-menu__link--cta:focus-visible {
	background: var(--av-coral-oscuro);
	background-color: var(--av-coral-oscuro);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(232, 103, 76, 0.7);
}

.aula-menu__link--cta .aula-menu__icon {
	opacity: 0.95;
}

/* -------------------------------------------------------------------------
   5. Submenús
   ---------------------------------------------------------------------- */

.aula-menu .aula-menu__submenu,
.main-navigation .main-nav ul.aula-menu ul.aula-menu__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 290px;
	background: #fff;
	background-color: #fff;
	border: 1px solid var(--av-borde);
	border-radius: var(--av-radio);
	box-shadow: var(--av-sombra);
	padding: 0.35rem;
	margin: 0;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--av-transicion), transform var(--av-transicion), visibility var(--av-transicion);
}

.aula-menu .aula-menu__item--has-children:hover > .aula-menu__submenu,
.aula-menu .aula-menu__item--has-children:focus-within > .aula-menu__submenu,
.aula-menu .aula-menu__item--has-children.is-open > .aula-menu__submenu,
.main-navigation .main-nav ul.aula-menu > li.aula-menu__item--has-children:hover > ul.aula-menu__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	left: 0;
}

/* Tercer nivel: al lateral */
.aula-menu .aula-menu__submenu .aula-menu__submenu,
.main-navigation .main-nav ul.aula-menu ul ul.aula-menu__submenu {
	top: -0.35rem;
	left: 100%;
	margin-left: 0.25rem;
}

.aula-menu__item--flip > .aula-menu__submenu {
	left: auto;
	right: 0;
}

/* Ítems del submenú: icono a la IZQUIERDA, subtítulo debajo del texto */
.aula-menu .aula-menu__submenu .aula-menu__link,
.main-navigation .main-nav ul.aula-menu ul.aula-menu__submenu li a.aula-menu__link {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.6rem;
	row-gap: 0.1rem;
	width: 100%;
	padding: 0.55rem 0.65rem;
	border-radius: 8px;
	background: none;
	color: var(--av-pizarra);
	font-family: var(--av-font-ui);
	font-size: 0.885rem;
	font-weight: 650;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color var(--av-transicion), color var(--av-transicion);
}

.aula-menu .aula-menu__submenu .aula-menu__link::after {
	display: none;
}

.aula-menu .aula-menu__submenu .aula-menu__icon {
	grid-row: 1 / span 2;
	opacity: 0.55;
	width: 18px;
	height: 18px;
	flex-basis: 18px;
}

.aula-menu .aula-menu__submenu .aula-menu__label {
	grid-column: 2;
	white-space: normal;
}

.aula-menu .aula-menu__desc {
	grid-column: 2;
	font-size: 0.755rem;
	font-weight: 500;
	line-height: 1.35;
	color: rgba(43, 43, 40, 0.62);
}

/* Sin icono: el texto ocupa las dos columnas */
.aula-menu .aula-menu__submenu .aula-menu__link:not(:has(.aula-menu__icon)) .aula-menu__label,
.aula-menu .aula-menu__submenu .aula-menu__link:not(:has(.aula-menu__icon)) .aula-menu__desc {
	grid-column: 1 / -1;
}

.aula-menu .aula-menu__submenu .aula-menu__link:hover,
.aula-menu .aula-menu__submenu .aula-menu__link:focus-visible,
.main-navigation .main-nav ul.aula-menu ul.aula-menu__submenu li:hover > a.aula-menu__link {
	background: var(--av-crema);
	background-color: var(--av-crema);
	color: var(--av-pizarra);
}

.aula-menu .aula-menu__submenu .aula-menu__link:hover .aula-menu__icon {
	opacity: 0.9;
}

.aula-menu .aula-menu__submenu .aula-menu__item.is-active > .aula-menu__link {
	background: rgba(232, 103, 76, 0.14);
}

.aula-menu .aula-menu__submenu .aula-menu__badge {
	grid-column: 2;
	justify-self: start;
}

/* -------------------------------------------------------------------------
   6. Botón de despliegue (inyectado por JS)
   ---------------------------------------------------------------------- */

/* Botón neutro: muchos temas pintan TODOS los <button> con el color de marca;
   aquí se anula. */
.aula-menu .aula-menu__toggle,
.main-navigation .aula-menu .aula-menu__toggle,
.aula-menu .aula-menu__toggle:hover,
.aula-menu .aula-menu__toggle:focus {
	display: none;
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0.5rem;
	margin: 0;
	color: rgba(46, 75, 69, 0.62);
	cursor: pointer;
	line-height: 0;
	text-transform: none;
	min-width: 0;
}

.aula-menu .aula-menu__toggle:focus-visible {
	outline: 2px solid var(--av-coral);
	outline-offset: -3px;
	border-radius: 6px;
}

.aula-menu .aula-menu__item.is-open > .aula-menu__toggle {
	color: var(--av-pizarra);
}

.aula-menu__toggle svg {
	width: 15px;
	height: 15px;
	transition: transform var(--av-transicion);
}

.aula-menu__item.is-open > .aula-menu__toggle svg {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   7. Móvil (≤900px) — acordeón, sin hover
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {

	.aula-menu,
	.main-navigation .main-nav ul.aula-menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		background: #fff;
		font-size: 1rem;
	}

	/* REJILLA, no flex: con flex el <a> del padre se estiraba a lo alto de la
	   fila y tapaba el área del submenú, robando los toques a los hijos.
	   Fila 1 = enlace + botón; fila 2 = submenú a todo el ancho. */
	.aula-menu > .aula-menu__item,
	.main-navigation .main-nav ul.aula-menu > li.aula-menu__item {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: stretch;
		border-bottom: 1px solid var(--av-borde);
		background: none;
		box-shadow: none;
	}

	.aula-menu > .aula-menu__item > .aula-menu__link,
	.main-navigation .main-nav ul.aula-menu > li > a.aula-menu__link {
		grid-column: 1;
		grid-row: 1;
		padding: 0.9rem 1rem;
		line-height: 1.3;
	}

	.aula-menu > .aula-menu__item > .aula-menu__toggle {
		grid-column: 2;
		grid-row: 1;
	}

	.aula-menu > .aula-menu__item > .aula-menu__submenu,
	.main-navigation .main-nav ul.aula-menu > li > ul.aula-menu__submenu {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.aula-menu > .aula-menu__item > .aula-menu__link::after {
		display: none;
	}

	.aula-menu .aula-menu__arrow {
		display: none;
	}

	.aula-menu .aula-menu__toggle,
	.main-navigation .aula-menu .aula-menu__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.9rem 1rem;
		flex: 0 0 auto;
	}

	/* Jerarquía del acordeón: el color va SOLO en la fila del título (enlace +
	   botón), nunca detrás de los hijos. */
	.aula-menu > .aula-menu__item.is-open > .aula-menu__link,
	.main-navigation .main-nav ul.aula-menu > li.aula-menu__item.is-open > a.aula-menu__link {
		background: var(--av-crema);
		background-color: var(--av-crema);
		box-shadow: inset 3px 0 0 var(--av-coral);
		color: var(--av-pizarra);
		font-weight: 800;
	}

	.aula-menu > .aula-menu__item.is-open > .aula-menu__toggle {
		background: var(--av-crema);
		background-color: var(--av-crema);
		color: var(--av-pizarra);
	}

	.aula-menu > .aula-menu__item.is-open > .aula-menu__link .aula-menu__icon {
		opacity: 1;
	}

	.aula-menu .aula-menu__submenu,
	.main-navigation .main-nav ul.aula-menu ul.aula-menu__submenu {
		position: static;
		display: none;
		width: 100%;
		flex: 1 0 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		border-left: 2px solid rgba(46, 75, 69, 0.14);
		border-radius: 0;
		box-shadow: none;
		background: #fff;
		background-color: #fff;
		padding: 0.15rem 0.5rem 0.35rem 0.55rem;
		margin: 0 0 0.5rem 1.15rem;
		pointer-events: auto;
	}

	/* En táctil no hay hover: se anula para que solo mande is-open.
	   Los selectores llevan el mismo refuerzo de GeneratePress que la regla
	   que oculta el submenú; si no, display:none gana y el acordeón no abre. */
	.aula-menu .aula-menu__item--has-children:hover > .aula-menu__submenu,
	.aula-menu .aula-menu__item--has-children:focus-within > .aula-menu__submenu,
	.main-navigation .main-nav ul.aula-menu li.aula-menu__item--has-children:hover > ul.aula-menu__submenu,
	.main-navigation .main-nav ul.aula-menu li.aula-menu__item--has-children:focus-within > ul.aula-menu__submenu {
		display: none;
	}

	/* GeneratePress deja los submenús móviles con height:0 + overflow:hidden a
	   la espera de su propia clase «toggled-on». Sin devolver la altura, el
	   acordeón abre pero el panel queda recortado a la altura del padding. */
	.aula-menu .aula-menu__item.is-open > .aula-menu__submenu,
	.main-navigation .main-nav ul.aula-menu li.aula-menu__item.is-open > ul.aula-menu__submenu,
	.main-navigation .main-nav ul.aula-menu li.aula-menu__item--has-children.is-open > ul.aula-menu__submenu {
		display: block;
		height: auto;
		max-height: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
	}

	/* Los hijos del acordeón, a ancho completo y sin flotar */
	.aula-menu .aula-menu__submenu > .aula-menu__item,
	.main-navigation .main-nav ul.aula-menu ul.aula-menu__submenu > li {
		float: none;
		width: 100%;
		display: block;
		border-bottom: 0;
		background: none;
	}

	/* Enlaces hijos: un punto por debajo del padre en peso y tamaño.
	   pointer-events explícito: GeneratePress los deja en «none» mientras el
	   submenú está plegado y no lo revierte al abrirlo por nuestra vía. */
	.aula-menu .aula-menu__submenu .aula-menu__link,
	.main-navigation .main-nav ul.aula-menu ul.aula-menu__submenu li a.aula-menu__link {
		padding: 0.7rem 0.75rem;
		border-radius: 7px;
		font-size: 0.9rem;
		font-weight: 600;
		color: rgba(46, 75, 69, 0.82);
		background: none;
		background-color: transparent;
		pointer-events: auto;
		position: relative;
		z-index: 2;
	}

	.aula-menu .aula-menu__submenu .aula-menu__link:hover,
	.aula-menu .aula-menu__submenu .aula-menu__link:active,
	.main-navigation .main-nav ul.aula-menu ul.aula-menu__submenu li:hover > a.aula-menu__link {
		background: var(--av-crema);
		background-color: var(--av-crema);
		color: var(--av-pizarra);
	}

	.aula-menu .aula-menu__submenu .aula-menu__item.is-active > .aula-menu__link {
		background: rgba(232, 103, 76, 0.16);
		font-weight: 800;
	}

	.aula-menu .aula-menu__submenu .aula-menu__submenu {
		margin-left: 0;
	}

	.aula-menu__item--cta {
		border-bottom: 0;
		padding: 0.7rem 1rem;
	}

	.aula-menu__link--cta {
		justify-content: center;
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   8. Preferencias del sistema
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.aula-menu *,
	.aula-menu *::after {
		transition: none !important;
	}
}