/**
 * La carta: baraja de platillos y visor.
 *
 * Medidas tomadas de la página 5 del PDF de diseño, sobre una banda de 650 pt de
 * ancho, y pasadas a `cqi` dividiendo por ese ancho:
 *
 *   · banda            650 × 287 pt
 *   · tarjeta central  187 × 248 pt  → 28,8 × 38,2 cqi   (relación 3:4)
 *   · retrato redondo   80 pt        → 12,3 cqi
 *   · «creaciones de»   30,5 pt      →  4,69 cqi   Tamara Falies, #0C3846
 *   · «NUESTROS/COCINEROS» 21,6 pt   →  3,32 cqi   Einer Grotesk, #997953
 *   · fondo            #F5FDFF, que es el token --vela-fondo-alt
 *
 * Todo va en `cqi` y no en `vw` porque la sección se mide contra su propio hueco:
 * así se ve igual en la portada, en una columna estrecha de Elementor y en la
 * previsualización del panel.
 */

/*
 * Dos cajas, y cada una hace una cosa.
 *
 * `.vela-menu` es la banda: se va a sangre para que el fondo llegue a los dos
 * bordes de la ventana, con la misma técnica que el tema le da a `vela-a-sangre`.
 * `.vela-menu__interior` es el contenido, y ese sí cae sobre el eje global, el
 * mismo del pie y de la barra de navegación.
 *
 * La contención va en el interior y no en la banda, y es lo que hace que esto
 * funcione: `cqi` mide contra el contenedor, así que con `container-type` en la
 * banda a sangre todas las proporciones pasarían a medirse contra la ventana y
 * la baraja crecería con la pantalla en vez de con su columna.
 *
 * De paso arregla un fallo que estaba latente: un elemento **no es su propio
 * contenedor**, así que el bloque `@container menu` de abajo nunca llegó a casar
 * con `.vela-menu` y los ajustes de móvil no se aplicaban.
 */
.vela-menu {
	--menu-fondo:  #f5fdff;
	--menu-script: #0c3846;
	--menu-titulo: #997953;
	--menu-curva:  var(--vela-curva, cubic-bezier(.22, .61, .36, 1));

	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);

	background: var(--menu-fondo);

	font-family: var(--vela-fuente, "Montserrat", system-ui, sans-serif);
}

/* Y si en alguna página se quiere la banda dentro del margen, como en el PDF. */
.vela-menu--contenido {
	width: min(100% - (2 * var(--vela-gutter, 20px)), var(--vela-ancho, 1772px));
	max-width: 100%;
	margin-inline: auto;
	border-radius: 1.4cqi;
}

.vela-menu__interior {
	/* La relación 3:4 de la tarjeta central, medida en la maqueta, menos los
	   50 px de alto que se decidieron en revisión. */
	--menu-carta-ancho: 28.8cqi;
	--menu-carta-alto:  calc(38.2cqi - 50px);
	--menu-radio:       3.4cqi;

	container-type: inline-size;
	container-name: menu;

	width: min(100% - (2 * var(--vela-gutter, 20px)), var(--vela-ancho, 1772px));
	max-width: 100%;
	margin-inline: auto;

	/*
	 * El aire vertical va aquí, en `cqi`, y no arriba: la banda no es contenedor
	 * y allí `cqi` no tendría contra qué medir. En el eje vertical no hay
	 * circularidad —la contención es solo del ancho—, así que es seguro.
	 */
	/*
	 * Sin aire por abajo: la banda termina justo debajo de los puntos, para que
	 * la sección de después arranque pegada. No hay ningún `margin-bottom` que
	 * quitar —se comprobó midiendo, los márgenes de la banda son solo los
	 * laterales de ir a sangre—; ese hueco era este relleno.
	 */
	padding-block: 4cqi 0;
}

.vela-menu *,
.vela-menu *::before,
.vela-menu *::after {
	box-sizing: border-box;
}

/* ================================================================= rótulo */

.vela-menu__rotulo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.2cqi;
	margin-bottom: 1.6cqi;
}

.vela-menu__retrato {
	flex: 0 0 auto;
	display: block;
	width: 12.3cqi;
	height: 12.3cqi;
	border-radius: 50%;
	overflow: hidden;
	/* Un filete blanco: en la maqueta el retrato se recorta en círculo sobre el
	   fondo claro y necesita ese respiro para no fundirse con él. */
	box-shadow: 0 0 0 .5cqi #fff, 0 .4cqi 1.4cqi rgba(12, 56, 70, .14);
}

.vela-menu__retrato-img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.vela-menu__texto {
	margin: 0;
	/* El rótulo es una sola unidad tipográfica: la línea manuscrita monta un poco
	   sobre la de abajo, igual que en la maqueta. */
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.vela-menu__script {
	font-family: var(--vela-fuente-script, "Tamara Falies", "Brush Script MT", cursive);
	font-size: var(--vela-script-sm, 34px);
	font-weight: 400;
	line-height: .9;
	color: var(--menu-script);
	/* La cursiva arranca a la izquierda del bloque en mayúsculas, no centrada. */
	align-self: flex-start;
	margin-left: .6cqi;
}

.vela-menu__nombre {
	display: flex;
	align-items: baseline;
	gap: .9cqi;

	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-2xl, 26px);
	line-height: 1.05;
	letter-spacing: .01em;
	color: var(--menu-titulo);
	text-transform: uppercase;
}

.vela-menu__ligero {
	font-weight: 200;
}

.vela-menu__fuerte {
	font-weight: 700;
}

/* ================================================================= baraja */

.vela-menu__baraja {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * La pista mide una sola tarjeta y dibuja un abanico.
 *
 * Las de los lados se mueven por `transform`, que no ocupa sitio en el flujo, así
 * que la caja real es la de la tarjeta central. Es lo que permite centrarla sin
 * que el abanico se salga del margen global por un lado —el problema que dio la
 * baraja de destinos—, porque lo que sobresale lo hace a partes iguales.
 */
.vela-menu__pista {
	position: relative;
	flex: 0 0 auto;
	width: var(--menu-carta-ancho);
	height: var(--menu-carta-alto);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * El ancestro no sobra: el tema trae un reinicio `ul[class], ol[class]
 * { padding: 0; margin: 0 }` que, con su atributo, gana a una clase sola.
 */
.vela-menu .vela-menu__pista,
.vela-menu .vela-menu__puntos,
.vela-menu .vela-menu__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vela-menu__hueco {
	--pos:  0;   /* Distancia con signo al centro; la calcula el JavaScript. */
	--dist: 0;   /* La misma en valor absoluto. */
	--x:    0;   /* Desplazamiento en anchos de carta, también del JavaScript. */

	position: absolute;
	inset: 0;

	/* Cuanto más lejos del centro, más pequeña y más al fondo. */
	translate: calc(var(--x) * 100%) 0;
	scale: calc(1 - (var(--dist) * .13));
	z-index: calc(10 - var(--dist));

	transition:
		translate .45s var(--menu-curva),
		scale .45s var(--menu-curva),
		opacity .45s var(--menu-curva),
		filter .45s var(--menu-curva);
}

/* Más allá del tercer puesto no se ve: se apila detrás sin repintar nada. */
.vela-menu__hueco[data-lejos="1"] {
	opacity: 0;
	pointer-events: none;
}

.vela-menu__carta {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--menu-radio);
	background: none;
	cursor: pointer;
	overflow: hidden;

	box-shadow: 0 1.2cqi 3cqi rgba(8, 40, 50, .18);
	transition:
		box-shadow .35s var(--menu-curva),
		outline-color .2s ease;
}

.vela-menu__foto {
	display: block;
	width: 100%;
	/*
	 * `!important` y no es pereza: Elementor declara `.elementor img
	 * { height: auto }`, que con su clase y su elemento gana a una clase sola, y
	 * sin esto la foto se sale de la tarjeta por abajo.
	 */
	height: 100% !important;
	object-fit: cover;
	border-radius: inherit;
}

.vela-menu__foto--vacia {
	height: 100%;
	background: var(--vela-turquesa-suave, #b4e0e1);
}

/* La del frente: a todo color y con más sombra, sin filete. Se distingue por
   el tamaño y por ser la única que no está apagada, que ya es suficiente. */
.vela-menu__hueco[data-activo="1"] .vela-menu__carta {
	box-shadow: 0 2cqi 4.4cqi rgba(8, 40, 50, .26);
}

/* Las del fondo se apagan para que el ojo vaya al centro. */
.vela-menu__hueco:not([data-activo="1"]) .vela-menu__carta {
	filter: saturate(.72) brightness(.88);
}

.vela-menu__carta:focus-visible {
	outline: .4cqi solid var(--vela-petroleo, #0c3846);
	outline-offset: .4cqi;
}

/* ================================================== flechas y paginación */

/*
 * Las flechas van a los cantos de la banda, no junto a la carta central.
 *
 * Como hermanas del abanico quedaban encima de las cartas vecinas, que se
 * mueven por `transform` y por tanto no las empujan. Absolutas contra la banda
 * caen donde la maqueta las pone: en los extremos, fuera del abanico.
 */
.vela-menu__flecha {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 20;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.4cqi;
	height: 3.4cqi;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: var(--vela-petroleo, #0c3846);
	color: #fff;
	font-size: 1.9cqi;
	line-height: 0;
	cursor: pointer;

	transition:
		background-color .25s var(--menu-curva),
		transform .25s var(--menu-curva);
}

.vela-menu__flecha--prev { left: 0; }
.vela-menu__flecha--next { right: 0; }

.vela-menu__flecha:hover,
.vela-menu__flecha:focus-visible {
	background: var(--vela-turquesa, #5eb0c8);
	/* `scale` y no `transform`, que aquí lo usa el centrado vertical. */
	scale: 1.08;
}

.vela-menu__flecha--next .vela-menu__chevron {
	rotate: 180deg;
}

.vela-menu__chevron {
	display: block;
}

/*
 * El ancestro va aquí también, y esta vez por culpa nuestra.
 *
 * Arriba hay un `.vela-menu .vela-menu__puntos { margin: 0 }` para ganarle al
 * reinicio `ul[class]` del tema; con dos clases, ese cero le gana a cualquier
 * `margin-top` declarado con una sola por mucho que vaya después. Medido: los
 * puntos quedaban pegados a la carta, a 0 px.
 */
.vela-menu .vela-menu__puntos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .85cqi;
	/*
	 * Aire suficiente para que la carta central no se les eche encima —el
	 * abanico sobresale del flujo por abajo al escalar—, menos los 10 px que se
	 * decidieron en revisión. Como la banda ya no lleva relleno inferior, esos
	 * 10 px se convierten en el respiro de abajo.
	 */
	margin-top: calc(4.2cqi - 10px);
}

.vela-menu__punto {
	display: block;
	width: .62cqi;
	height: .62cqi;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vela-petroleo, #0c3846);
	opacity: .28;
	cursor: pointer;
	transition:
		opacity .25s ease,
		scale .25s var(--menu-curva);
}

.vela-menu__punto[aria-current="true"] {
	opacity: 1;
	scale: 1.4;
}

/* ================================================================== visor */

/*
 * Una fila de tres: flecha, tarjeta, flecha. El telón no cuenta, va absoluto y
 * fuera del flujo.
 */
.vela-menu__visor {
	position: fixed;
	inset: 0;
	/*
	 * Por encima de la burbuja de contacto, que está en 9990. Al mismo nivel
	 * ganaba ella —se inyecta en el pie, o sea más tarde en el documento— y en
	 * móvil se comía la flecha de siguiente. Un diálogo modal tapa lo que flota,
	 * no al revés.
	 */
	z-index: 9995;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 1.6vw, 22px);
	padding: clamp(14px, 4vw, 40px);
}

.vela-menu__visor[hidden] {
	display: none;
}

.vela-menu__telon {
	position: absolute;
	inset: 0;
	background: rgba(8, 40, 50, .52);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
}

.vela-menu__panel {
	position: relative;
	width: min(1040px, 100%);
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;

	padding: clamp(22px, 3vw, 38px);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(4, 26, 34, .4);

	/* Las medidas del visor van en `px` y `vw` y no en `cqi`: es una ventana
	   sobre toda la pantalla, no una pieza dentro de la sección. */
	font-size: var(--vela-txt-md, 15px);
	animation: vela-menu-entrar .32s var(--menu-curva) both;
}

@keyframes vela-menu-entrar {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

.vela-menu__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: rgba(12, 56, 70, .08);
	color: var(--vela-petroleo, #0c3846);
	cursor: pointer;
	transition: background-color .2s ease;
}

.vela-menu__cerrar:hover,
.vela-menu__cerrar:focus-visible {
	background: rgba(12, 56, 70, .16);
}

/* ---------------------------------------------------------------- ficha */

.vela-menu__detalle {
	display: grid;
	/* Dos columnas desde que las flechas salieron fuera de la tarjeta. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(16px, 2.4vw, 30px);
}

.vela-menu__detalle[hidden],
.vela-menu__rejilla[hidden] {
	display: none;
}

/*
 * La foto llena su hueco entero, y por eso lleva alto definido en vez de forma.
 *
 * Con `aspect-ratio: 3/4` + `max-height` pasaba algo que solo se ve midiendo: al
 * toparse con el techo, el navegador **vuelve a derivar el ancho desde el alto
 * ya recortado** —326 × 3/4 = 245—, así que la figura se encogía dentro de su
 * columna y dejaba una franja vacía a la derecha.
 *
 * Sin `aspect-ratio`, el ancho lo manda la rejilla y el alto es el que decidimos:
 * atado a la ventana para que el panel siga sin desbordar. La imagen va con
 * `object-fit: cover`, así que llena el hueco recortando lo que sobre en vez de
 * deformarse.
 */
.vela-menu__figura {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--vela-turquesa-suave, #b4e0e1);
	height: min(52vh, 460px);
}

.vela-menu__grande {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.vela-menu__ficha {
	min-width: 0;
	/*
	 * Arriba, no centrada. La rejilla centra todo lo demás —las flechas lo
	 * necesitan—, pero el texto tiene que arrancar a la misma altura que la
	 * foto: con descripciones cortas, centrado quedaba flotando a media altura
	 * y sin relación con la imagen de al lado.
	 */
	align-self: start;
}

.vela-menu__cuenta {
	margin: 0 0 8px;
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--vela-texto-tenue, #859ba2);
}

.vela-menu__plato {
	margin: 0 0 12px;
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-xl, 21px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--vela-petroleo, #0c3846);
}

.vela-menu__descripcion {
	font-size: var(--vela-txt-md, 15px);
	font-weight: 300;
	line-height: 1.65;
	color: var(--vela-petroleo, #0c3846);
}

.vela-menu__descripcion p {
	margin: 0 0 .8em;
}

.vela-menu__descripcion p:last-child {
	margin-bottom: 0;
}

.vela-menu__todos,
.vela-menu__volver {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding: 12px 26px;

	border: 0;
	border-radius: 999px;
	background: var(--vela-petroleo, #0c3846);
	color: #fff;

	font-family: inherit;
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 500;
	cursor: pointer;

	transition:
		background-color .25s var(--menu-curva),
		transform .25s var(--menu-curva);
}

.vela-menu__todos:hover,
.vela-menu__volver:hover,
.vela-menu__todos:focus-visible,
.vela-menu__volver:focus-visible {
	background: var(--vela-turquesa, #5eb0c8);
	transform: translateY(-2px);
}

/*
 * Fuera de la tarjeta se ven contra el telón oscuro, no contra blanco, así que
 * cambian de ropa: círculo claro con el chevron en petróleo, como las de la
 * baraja pero al revés.
 */
.vela-menu__nav {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--vela-petroleo, #0c3846);
	box-shadow: 0 6px 20px rgba(4, 26, 34, .28);
	font-size: 20px;
	line-height: 0;
	cursor: pointer;

	transition:
		background-color .2s ease,
		color .2s ease,
		scale .2s var(--menu-curva);
}

.vela-menu__nav:hover,
.vela-menu__nav:focus-visible {
	background: var(--vela-petroleo, #0c3846);
	color: #fff;
	scale: 1.08;
}

/* Con la rejilla a la vista no hay platillo que pasar. */
.vela-menu__visor.is-rejilla .vela-menu__nav {
	display: none;
}

.vela-menu__nav--next .vela-menu__chevron {
	rotate: 180deg;
}

/* -------------------------------------------------------------- rejilla */

.vela-menu__rejilla-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	padding-right: 44px; /* Deja sitio al aspa. */
}

.vela-menu__rejilla-titulo {
	margin: 0;
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-xl, 21px);
	font-weight: 600;
	color: var(--vela-petroleo, #0c3846);
}

.vela-menu__volver {
	margin-top: 0;
}

.vela-menu__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 16px;
}

.vela-menu__ficha-mini {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.vela-menu__mini-foto {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: var(--vela-turquesa-suave, #b4e0e1);
	aspect-ratio: 1 / 1;

	transition:
		transform .25s var(--menu-curva),
		box-shadow .25s var(--menu-curva);
}

.vela-menu__mini-foto img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.vela-menu__ficha-mini:hover .vela-menu__mini-foto,
.vela-menu__ficha-mini:focus-visible .vela-menu__mini-foto {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(8, 40, 50, .22);
}

.vela-menu__mini-nombre {
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 500;
	line-height: 1.35;
	color: var(--vela-petroleo, #0c3846);
}

.vela-menu__aviso {
	margin: 16px 0;
	padding: 10px 14px;
	border-left: 3px solid var(--vela-dorado, #997952);
	background: rgba(153, 121, 82, .08);
	font-size: var(--vela-txt-sm, 13px);
}

/* ============================================================ responsive */

/*
 * En pantalla estrecha la baraja necesita más sitio proporcional: la tarjeta
 * crece en `cqi` y el abanico se cierra, porque con el ancho de un móvil las
 * vecinas se saldrían del margen.
 */
@container menu ( max-width: 640px ) {
	/*
	 * Las variables se redefinen en la baraja y no en el interior porque el
	 * interior **es** el contenedor, y una consulta de contenedor no puede
	 * dar estilo al contenedor que consulta. La baraja es descendiente suya,
	 * así que sí casa, y desde ahí heredan las cartas.
	 */
	.vela-menu__baraja {
		--menu-carta-ancho: 48cqi;
		--menu-carta-alto:  calc(70cqi - 30px);
		--menu-radio:       5cqi;
	}

	.vela-menu__hueco {
		/* En móvil el abanico se cierra: con este ancho, el paso de la maqueta
		   sacaría las vecinas fuera del margen. */
		translate: calc(var(--x) * 74%) 0;
		scale: calc(1 - (var(--dist) * .2));
	}

	.vela-menu__flecha {
		width: 6.6cqi;
		height: 6.6cqi;
		margin-inline: 1.4cqi;
		font-size: 3.6cqi;
	}

	.vela-menu__rotulo {
		flex-direction: column;
		gap: 1.6cqi;
	}

	.vela-menu__retrato {
		width: 22cqi;
		height: 22cqi;
	}

	.vela-menu__script  { align-self: center; margin-left: 0; }
	.vela-menu__nombre  { justify-content: center; }
	.vela-menu__punto   { width: 1.3cqi; height: 1.3cqi; }
}

/* El visor se apila cuando no caben las dos columnas. */
@media ( max-width: 820px ) {
	.vela-menu__detalle {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * En pantalla estrecha las flechas dejan de flanquear —se comerían el ancho de
 * la tarjeta, que es lo que hay que leer— y se apoyan sobre el telón, abajo, a
 * los lados. El gesto de deslizar sigue funcionando dentro del visor, que en un
 * móvil es como se navega de verdad.
 */
@media ( max-width: 640px ) {
	.vela-menu__visor {
		gap: 0;
	}

	.vela-menu__nav {
		position: absolute;
		bottom: clamp(14px, 4vw, 40px);
		width: 42px;
		height: 42px;
	}

	/*
	 * Juntas y centradas, no en las esquinas: abajo a la derecha vive la burbuja
	 * de contacto, y dos botones disputándose ese rincón en una pantalla de
	 * teléfono es pedir un toque equivocado.
	 */
	.vela-menu__nav--prev { right: calc(50% + 7px); }
	.vela-menu__nav--next { left: calc(50% + 7px); }

	/* Y la tarjeta deja sitio abajo para que no queden encima de ella. */
	.vela-menu__panel {
		max-height: calc(100% - 70px);
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.vela-menu__hueco,
	.vela-menu__carta,
	.vela-menu__flecha,
	.vela-menu__punto,
	.vela-menu__todos,
	.vela-menu__volver,
	.vela-menu__mini-foto,
	.vela-menu__panel {
		transition-duration: .01ms;
		animation-duration: .01ms;
	}

	.vela-menu__flecha:hover,
	.vela-menu__todos:hover,
	.vela-menu__volver:hover {
		transform: none;
	}
}