/**
 * AQURA Mega Menú
 *
 * Todas las clases llevan el prefijo .aqm-, y ningún selector menciona una clase
 * del tema: no hay forma de que Astra y este archivo se pisen.
 *
 * Los valores vienen de variables CSS que el plugin inyecta desde los ajustes.
 * Los de aquí son solo el respaldo por si esa inyección fallara.
 */

.aqm {
	--aqm-marca: #173F6B;
	--aqm-acento: #1CABE2;
	--aqm-acento-suave: #EAF6FC;
	--aqm-texto: #1F2A36;
	--aqm-texto-suave: #5B6B7A;
	--aqm-linea: #D6E1EA;
	--aqm-panel-fondo: #FFFFFF;
	--aqm-fuente: inherit;
	--aqm-tam-pestana: 15px;
	--aqm-tam-enlace: 14px;
	--aqm-tam-desc: 12px;
	--aqm-tam-label: 11px;
	--aqm-panel-ancho: 700px;
	--aqm-panel-padding: 26px;
	--aqm-col-gap: 26px;
	--aqm-panel-radio: 12px;
	--aqm-panel-sombra: 0 18px 40px -18px rgba(23, 63, 107, .34);
	--aqm-transicion: 150ms;

	font-family: var(--aqm-fuente);
	color: var(--aqm-texto);
}

/* ==========================================================================
   Escritorio
   ========================================================================== */

.aqm--escritorio {
	position: relative;
	z-index: 99;
	display: flex;
	align-items: stretch;
	align-self: stretch;
}

.aqm-nav {
	position: relative; /* ancla del panel: no se usa nada del tema */
	display: flex;
	align-items: stretch;
	/* Sin separación entre pestañas: un hueco, por pequeño que sea, es una
	   franja donde no hay nada bajo el cursor y el panel se cierra al cruzarla.
	   La separación visual ya la da el relleno lateral de cada pestaña. */
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aqm-item {
	position: static;
	display: flex;
	align-items: stretch;
}

.aqm-top {
	display: flex;
	align-items: center;
	padding: 0 13px;
	font-size: var(--aqm-tam-pestana);
	font-weight: 500;
	color: var(--aqm-texto);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color var(--aqm-transicion), border-color var(--aqm-transicion);
}

.aqm-item--panel .aqm-top::after {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	opacity: .5;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--aqm-transicion), opacity var(--aqm-transicion);
}

.aqm-item:hover .aqm-top,
.aqm-item:focus-within .aqm-top,
.aqm-item--actual .aqm-top {
	color: var(--aqm-marca);
	border-bottom-color: var(--aqm-acento);
	font-weight: var(--aqm-peso-activo, 600);
}

/* Pasar a negrita ensancha el texto, y eso empuja las pestañas vecinas. Si el
   ratón queda justo en el borde entre dos, el elemento se mueve, sale de debajo
   del cursor, vuelve a su sitio, lo vuelve a tocar… y tiembla.

   Aquí cada pestaña reserva desde el principio el ancho que ocuparía en su peso
   máximo: un pseudo-elemento con el mismo texto, en negrita, de altura cero y
   fuera del flujo visual. Nadie lo ve ni lo lee, pero cuenta para el ancho, así
   que la caja ya no cambia de tamaño al iluminarse. Sin JavaScript y sin medir
   nada. */

.aqm-top .aqm-t {
	display: inline-block;
}

.aqm-top .aqm-t::after {
	content: attr(data-t);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: var(--aqm-peso-activo, 600);
	pointer-events: none;
	user-select: none;
}

.aqm-item--panel:hover .aqm-top::after,
.aqm-item--panel:focus-within .aqm-top::after {
	opacity: 1;
	transform: translateY(1px) rotate(225deg);
}

/* --- el panel: 2 columnas de enlaces + 1 de oferta --- */

.aqm-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9990;
	width: var(--aqm-panel-ancho);
	max-width: calc(100vw - 48px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--aqm-col-gap);
	padding: var(--aqm-panel-padding);
	background: var(--aqm-panel-fondo);
	border: 1px solid var(--aqm-linea);
	border-top: 0;
	border-radius: 0 0 var(--aqm-panel-radio) var(--aqm-panel-radio);
	box-shadow: var(--aqm-panel-sombra);
	opacity: 0;
	visibility: hidden;

	/* Un panel a opacidad cero seguía capturando el ratón mientras duraba la
	   transición de cierre: una losa invisible de 700 px por encima de la
	   barra. Con el cursor sobre ella, la pestaña de debajo no recibía el
	   hover, el panel se cerraba, la losa desaparecía, la pestaña volvía a
	   recibirlo… y de ahí el parpadeo. Esto lo corta de raíz, sin depender de
	   cuánto tarde ninguna transición. */
	pointer-events: none;

	/* Entra desde abajo, no desde arriba. Con translateY(-6px) el panel se
	   metía 6 px dentro de la fila de pestañas justo al abrirse, que es la
	   franja donde aparecía el temblor: debajo de las letras, sobre la línea. */
	transform: translateY(6px);

	/* El cierre va con retardo. Así, al cruzar el borde entre dos pestañas o
	   al bajar hacia el panel, un instante sin hover no apaga nada. */
	transition:
		opacity var(--aqm-transicion) ease var(--aqm-cierre, 120ms),
		transform var(--aqm-transicion) ease var(--aqm-cierre, 120ms),
		visibility 0s linear calc(var(--aqm-transicion) + var(--aqm-cierre, 120ms));
}

/* Con tarjeta de oferta, la tercera columna. La clase la pone PHP: usar :has()
   dejaba una columna vacía en los navegadores que no lo soportan. */
.aqm-panel--promo {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 232px;
}

.aqm-item:hover .aqm-panel,
.aqm-item:focus-within .aqm-panel,
.aqm-item[data-abierto="1"] .aqm-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);

	/* Al abrir no hay retardo: la respuesta tiene que ser inmediata. */
	transition:
		opacity var(--aqm-transicion) ease,
		transform var(--aqm-transicion) ease,
		visibility 0s;
}

.aqm-col {
	min-width: 0;
}

.aqm-label {
	margin: 0 0 9px;
	font-size: var(--aqm-tam-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .11em;
	color: var(--aqm-acento);
}

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

.aqm-list li + li {
	border-top: 1px solid var(--aqm-acento-suave);
}

.aqm-link {
	display: block;
	padding: 9px 0;
	font-size: var(--aqm-tam-enlace);
	color: var(--aqm-texto);
	text-decoration: none;
	transition: color var(--aqm-transicion);
}

.aqm-link .aqm-t {
	display: block;
	font-weight: 600;
	line-height: 1.3;
	color: var(--aqm-marca);
}

.aqm-link .aqm-d {
	display: block;
	margin-top: 2px;
	font-size: var(--aqm-tam-desc);
	line-height: 1.35;
	color: var(--aqm-texto-suave);
}

.aqm-link:hover .aqm-t,
.aqm-link:focus-visible .aqm-t {
	color: var(--aqm-acento);
}

/* --- tarjeta de oferta --- */

.aqm-promo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 17px;
	background: var(--aqm-acento-suave);
	border-radius: var(--aqm-panel-radio);
}

.aqm-promo-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.aqm-promo-tit {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--aqm-marca);
}

.aqm-promo-txt {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--aqm-texto-suave);
}

.aqm-promo-precio {
	margin: 2px 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: var(--aqm-marca);
	font-variant-numeric: tabular-nums;
}

.aqm-promo-precio span {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--aqm-texto-suave);
}

.aqm-promo-cta {
	margin-top: auto;
	align-self: flex-start;
	padding: 9px 16px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: var(--aqm-acento);
	border-radius: 999px;
}

/* ==========================================================================
   Barra de cabecera
   --------------------------------------------------------------------------
   [aqura_mega tel="1" cta="1"] mete el menú, el teléfono y el botón en esta
   caja. Es la forma fiable de que queden alineados entre sí: la alineación la
   decide este flex y no el hueco del tema donde se haya pegado el shortcode,
   que en cada tema mide distinto. De paso evita tener que gastar un elemento
   de cabecera por cada pieza.
   ========================================================================== */

.aqm-barra {
	display: flex;
	align-items: center;
	gap: var(--aqm-barra-hueco, 22px);
}

.aqm-barra > .aqm--escritorio {
	flex: 0 1 auto;
}

/* En el panel lateral no hay barra que valga: cada pieza en su línea. */
.aqm-barra--movil {
	display: block;
}

.aqm-barra--movil > .aqm-tel,
.aqm-barra--movil > .aqm-cta {
	margin-top: var(--aqm-barra-hueco, 16px);
}

.aqm-barra--movil > .aqm-tel {
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   Teléfono y botón de acción
   --------------------------------------------------------------------------
   Se colocan con sus propios shortcodes, así que pueden ir donde haga falta:
   la barra del escritorio, el pie del panel móvil o los dos.
   ========================================================================== */

.aqm-tel {
	display: inline-flex;
	align-items: center;
	font-size: var(--aqm-tel-tam, var(--aqm-tam-pestana, 15px));
	font-weight: 600;
	color: var(--aqm-tel-color, var(--aqm-marca));
	text-decoration: none;
	white-space: nowrap;
}

.aqm-tel:hover,
.aqm-tel:focus-visible {
	color: var(--aqm-acento);
}

.aqm-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--aqm-cta-tam, 13px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--aqm-cta-color, #fff);
	background: var(--aqm-cta-fondo, var(--aqm-acento));
	padding: var(--aqm-cta-padding, 10px 18px);
	border-radius: var(--aqm-cta-radio, 999px);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity var(--aqm-transicion);
}

.aqm-cta:hover,
.aqm-cta:focus-visible {
	color: var(--aqm-cta-color, #fff);
	opacity: .88;
}

/* En el pie del panel móvil conviene que ocupe todo el ancho. */
.aqm-cta--ancho {
	display: flex;
	width: 100%;
}

/* ==========================================================================
   Móvil
   ========================================================================== */

.aqm--movil {
	display: block;
	width: 100%;
	/* Si el que hace scroll es este menú, que no arrastre la página de detrás. */
	overscroll-behavior: contain;
}

.aqm-mov-sec,
.aqm-mov-simple {
	border-bottom: 1px solid var(--aqm-linea);
}

.aqm-mov-simple {
	display: block;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--aqm-marca);
	text-decoration: none;
}

.aqm-mov-sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--aqm-marca);
	cursor: pointer;
	list-style: none;
}

.aqm-mov-sum::-webkit-details-marker {
	display: none;
}

.aqm-mov-sum::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--aqm-acento);
	border-bottom: 2px solid var(--aqm-acento);
	transform: translateY(-3px) rotate(45deg);
	transition: transform var(--aqm-transicion);
}

.aqm-mov-sec[open] .aqm-mov-sum::after {
	transform: translateY(1px) rotate(225deg);
}

.aqm-mov-body {
	padding-bottom: 9px;
}

.aqm-mov-grp {
	margin: 0;
	padding: 10px 18px 3px;
	font-size: var(--aqm-tam-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .11em;
	color: var(--aqm-acento);
}

.aqm-mov-row {
	display: block;
	padding: 8px 18px;
	font-size: 13.5px;
	color: var(--aqm-texto);
	text-decoration: none;
}

.aqm-mov-row .aqm-d {
	display: block;
	margin-top: 1px;
	font-size: 11.5px;
	color: var(--aqm-texto-suave);
}

.aqm-mov-row--padre {
	font-weight: 600;
	color: var(--aqm-acento);
}

/* ==========================================================================
   Blindaje contra envoltorios ajenos
   --------------------------------------------------------------------------
   Los campos HTML de algunos temas envuelven lo que se les mete, y basta con
   pegar el shortcode con formato para colar un <code> de más. Eso cambiaba la
   tipografía a monoespaciada y, al recolocar el navegador las etiquetas,
   dejaba el panel fuera de su <li> y el menú no abría. Aquí esos envoltorios
   se anulan: fuente heredada y display:contents, que los saca del árbol de
   cajas sin tocar el DOM. Por lo mismo, los selectores de arriba usan
   descendiente y no hijo directo.
   ========================================================================== */

.aqm code,
.aqm kbd,
.aqm samp,
.aqm pre,
.aqm-nav > p,
.aqm-item > p {
	display: contents;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	white-space: normal;
}

/* --------------------------------------------------------------------------
   El caso de arriba se cubre cuando el envoltorio cae dentro del menú. Pero
   si envuelve al shortcode entero queda por encima de .aqm y desde dentro no
   hay forma de alcanzarlo con un selector normal: el teléfono salía en
   monoespaciada y el párrafo vacío que deja wpautop empujaba el menú 26px
   hacia abajo, descuadrándolo del resto de la cabecera. Con :has() sí se
   alcanza. Va dentro de @supports para que un navegador que no lo entienda
   simplemente lo ignore en vez de tirar el bloque entero.
   -------------------------------------------------------------------------- */

@supports selector(:has(*)) {

	code:has(> .aqm),
	kbd:has(> .aqm),
	samp:has(> .aqm),
	pre:has(> .aqm) {
		display: contents;
		font: inherit;
		color: inherit;
		background: none;
		border: 0;
		padding: 0;
		margin: 0;
		white-space: normal;
	}

	p:has(> .aqm),
	p:has(> code > .aqm),
	p:has(> code:empty) {
		margin: 0;
	}
}

/* ==========================================================================
   Accesibilidad y respeto por las preferencias del sistema
   ========================================================================== */

.aqm a:focus-visible {
	outline: 2px solid var(--aqm-acento);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.aqm *,
	.aqm *::after {
		transition: none !important;
	}
}

/* El JS opcional marca data-abierto al tocar en un dispositivo sin ratón.
   Aquí NO se desactiva :hover: un portátil con pantalla táctil declara
   hover:none aunque tenga ratón, y el menú se quedaba sin abrir. */