/**
 * Los desplegables de la barra principal (11 E1, opción A del usuario, 2026-10-07).
 *
 * El HTML lo pone inc/desplegables.php detrás de cada apartado; lo abre y lo
 * cierra assets/js/desplegables.js. En la barra de escritorio es un panel a lo
 * ancho bajo la cabecera, con el fondo de la barra; en el menú del móvil, cada
 * apartado lleva su «+» y abre solo sus tipos.
 */

/* Fuera del menú principal de la cabecera, ni botón ni panel. */
.vl-desplegable,
.vl-desplegable__boton {
	display: none;
}

/* ==========================================================
   Lo común: letras y listas
   ========================================================== */

.cabecera-flotante .vl-desplegable {
	box-sizing: border-box;

	color: var(--wp--preset--color--custom-negro) !important;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9375rem;
	line-height: 1.3;
	text-align: left;
	white-space: normal;
}

.cabecera-flotante .vl-desplegable a {
	color: inherit !important;
	text-decoration: none;
}

.cabecera-flotante .vl-desplegable a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vl-desplegable ul {
	display: grid;
	gap: 12px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.vl-desplegable li {
	display: block;
	margin: 0;
}

/* Cuántas piezas: pequeño y en gris, detrás del nombre. */
.vl-desplegable li small {
	margin-left: 4px;

	color: var(--wp--preset--color--custom-gris-suave);
	font-size: 0.75rem;
}

/* El editor de cada diseñador, en versalitas debajo. */
.vl-desplegable li span {
	display: block;
	margin-top: 3px;

	color: var(--wp--preset--color--custom-gris-suave);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vl-desplegable__titulo {
	margin: 0 0 12px;

	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.05;
}

.vl-desplegable__frase {
	margin: 0 0 22px;

	color: var(--wp--preset--color--custom-gris-suave);
	font-size: 0.875rem;
}

.cabecera-flotante .vl-desplegable a.vl-desplegable__ver {
	display: inline-block;
	padding-bottom: 2px;

	border-bottom: 1px solid currentColor;

	font-size: 0.875rem;
}

.cabecera-flotante .vl-desplegable a.vl-desplegable__ver:hover {
	text-decoration: none;
}

.vl-desplegable__nombre {
	margin: 0 0 16px;

	font-family: var(--wp--preset--font-family--baskerville-display-pt);
	font-size: 1.5rem;
	line-height: 1.1;
}

.cabecera-flotante .vl-desplegable .vl-desplegable__nombre a {
	font: inherit;
}

.vl-desplegable__rotulo {
	margin: 0 0 18px;

	color: var(--wp--preset--color--custom-gris-suave);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================
   La barra de escritorio: el panel a lo ancho
   ========================================================== */

@media (min-width: 1100px) {

	/*
	 * El panel cuelga de la barra principal (que ya es `position: relative`),
	 * no del apartado: así va de lado a lado. El bloque de navegación y sus
	 * apartados de WordPress van posicionados; aquí no.
	 */
	.cabecera-flotante:not(.vl-menu-no-cabe) .vl-nav-escritorio,
	.cabecera-flotante:not(.vl-menu-no-cabe) .vl-nav-escritorio .wp-block-navigation__container,
	.cabecera-flotante .vl-nav-escritorio .vl-con-desplegable {
		position: static;
	}

	/*
	 * El botón solo es para el teclado: con el ratón se abre al pasar por el
	 * apartado. Escondido hasta que le llega el foco; entonces, una flecha.
	 */
	.cabecera-flotante .vl-nav-escritorio .vl-desplegable__boton {
		display: inline-grid;
		place-items: center;

		width: 1px;
		height: 1px;
		margin: 0 0 0 -1px;
		padding: 0;

		overflow: hidden;
		clip-path: inset(50%);

		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.cabecera-flotante .vl-nav-escritorio .vl-desplegable__boton:focus-visible {
		width: 20px;
		height: 20px;
		margin-left: 2px;

		clip-path: none;
		outline: 1px solid currentColor;
		outline-offset: 2px;
	}

	.cabecera-flotante .vl-nav-escritorio .vl-desplegable__boton::before {
		content: "";

		width: 7px;
		height: 7px;

		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;

		transform: translateY(-2px) rotate(45deg);
	}

	.cabecera-flotante .vl-nav-escritorio .vl-desplegable {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 3;

		padding: 40px var(--vl-borde) 48px;

		border-top: 1px solid var(--wp--preset--color--custom-borde-suave);
		background-color: var(--wp--preset--color--custom-fondo);
		box-shadow: 0 32px 40px -36px color-mix(in srgb, var(--wp--preset--color--custom-negro) 40%, transparent);

		cursor: auto;
	}

	.cabecera-flotante .vl-nav-escritorio .vl-con-desplegable.is-abierto > .vl-desplegable {
		display: block;
		animation: vl-desplegable-entra 240ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	/*
	 * De un panel a otro no hay entrada (la clase la pone desplegables.js): el
	 * panel entra desde transparente y, con otro ya abierto, se veía la página
	 * por detrás un instante. El usuario, 2026-10-13: «un pequeño parpadeo».
	 */
	.cabecera-flotante.vl-desplegable-cambio .vl-nav-escritorio .vl-con-desplegable.is-abierto > .vl-desplegable {
		animation: none;
	}

	/* Nombre y cifras · tipos · editores · foto, como en el prototipo. */
	.vl-nav-escritorio .vl-desplegable__dentro {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
		gap: 48px;
		align-items: start;
	}

	/* Los diseñadores, en cuatro columnas que ocupan lo de las listas y la foto. */
	.vl-nav-escritorio .vl-desplegable__lista--disenadores {
		grid-column: 2 / -1;
	}

	.vl-nav-escritorio .vl-desplegable__lista--disenadores ul {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 14px;
	}

	.vl-nav-escritorio .vl-desplegable__foto {
		grid-column: -2;
		margin: 0;
	}

	/*
	 * La tienda (opción C, usuario, 2026-10-07): las cuatro categorías con sus
	 * tipos y los editores en el hueco de nombre, tipos y editores; la foto en
	 * su sitio y de su tamaño, para que pasar de Tienda a Asientos no salte.
	 */
	.vl-nav-escritorio .vl-desplegable__listas {
		grid-column: 1 / -2;

		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr);
		column-gap: 32px;
		row-gap: 28px;
		align-items: start;
	}

	.vl-nav-escritorio .vl-desplegable__listas > .vl-desplegable__ver {
		grid-column: 1 / -1;
		justify-self: start;
	}

	/* Los editores siempre en su columna, haya las categorías que haya (staging tiene una). */
	.vl-nav-escritorio .vl-desplegable__listas .vl-desplegable__lista--editores {
		grid-column: -2;
		grid-row: 1;

		padding-left: 32px;
		border-left: 1px solid var(--wp--preset--color--custom-borde-suave);
	}

	.vl-nav-escritorio .vl-desplegable__lista--categoria ul {
		gap: 10px;
	}

	.vl-nav-escritorio .vl-desplegable__lista--categoria li {
		font-size: 0.875rem;
	}

	.cabecera-flotante .vl-nav-escritorio .vl-desplegable__lista--categoria a.vl-desplegable__ver {
		margin-top: 16px;
		font-size: 0.8125rem;
	}

	.vl-nav-escritorio .vl-desplegable__foto a {
		display: block;
	}

	.vl-nav-escritorio .vl-desplegable__img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.vl-nav-escritorio .vl-desplegable__foto figcaption {
		margin-top: 10px;

		color: var(--wp--preset--color--custom-gris-suave);
		font-family: var(--wp--preset--font-family--baskerville-display-pt);
		font-size: 0.875rem;
		font-style: italic;
		line-height: 1.4;
	}

	/* El enlace de la firma, en la letra de la firma: los enlaces del tema van en Montserrat. */
	.cabecera-flotante .vl-nav-escritorio .vl-desplegable__foto figcaption a {
		font: inherit;
	}

	/*
	 * Abierto un panel, la barra lleva su fondo aunque el ratón ya no esté
	 * encima (abierto con el teclado) y la página se oscurece un poco detrás.
	 */
	.cabecera-flotante.vl-desplegable-abierto .vl-header-bar::before {
		opacity: 1;
	}

	.cabecera-flotante.vl-desplegable-abierto::after {
		content: "";

		position: fixed;
		inset: 0;
		z-index: -1;

		background-color: color-mix(in srgb, var(--wp--preset--color--custom-negro) 22%, transparent);

		pointer-events: none;

		animation: vl-desplegable-velo 240ms ease;
	}
}

@keyframes vl-desplegable-entra {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes vl-desplegable-velo {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ==========================================================
   El menú del móvil: cada apartado con su «+»
   ========================================================== */

/* La lista a todo el ancho del panel: el «+» va al borde derecho. */
.vl-nav-panel .vl-nav-menu,
.vl-nav-panel .vl-nav-menu .wp-block-navigation__container {
	width: 100%;
}

.vl-nav-panel .vl-nav-menu .vl-con-desplegable {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-self: stretch;
	width: 100%;
}

/*
 * 44 px para el dedo, pero ocupando la línea del apartado (30 px): con más, los
 * apartados con «+» quedaban más separados que los demás.
 */
.vl-nav-panel .vl-nav-menu .vl-desplegable__boton {
	position: relative;

	display: inline-grid;
	place-items: center;

	width: 44px;
	height: 44px;
	margin: -7px -12px -7px auto;
	padding: 0;

	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.vl-nav-panel .vl-nav-menu .vl-desplegable__boton:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: -4px;
}

/* El «+», con dos trazos finos; abierto, la raya vertical se va y queda «−». */
.vl-nav-panel .vl-nav-menu .vl-desplegable__boton::before,
.vl-nav-panel .vl-nav-menu .vl-desplegable__boton::after {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 16px;
	height: 1px;

	background-color: currentColor;

	transform: translate(-50%, -50%);
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vl-nav-panel .vl-nav-menu .vl-desplegable__boton::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.vl-nav-panel .vl-nav-menu .vl-desplegable__boton[aria-expanded="true"]::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.vl-nav-panel .vl-nav-menu .vl-con-desplegable.is-abierto > .vl-desplegable {
	display: block;
	flex-basis: 100%;
	min-width: 0;
	padding: 14px 0 6px 2px;
}

/* La tienda no se despliega en el móvil: sus categorías ya están debajo, en el mismo menú. */
.vl-nav-panel .vl-nav-menu .vl-con-desplegable:has(> .vl-desplegable--tienda) > .vl-desplegable__boton {
	display: none;
}

/* Solo la lista (tipos, diseñadores o enlaces) y, debajo, «Ver todo». */
.vl-nav-panel .vl-nav-menu .vl-desplegable__dentro {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.vl-nav-panel .vl-nav-menu .vl-desplegable__cabeza {
	order: 2;
}

.vl-nav-panel .vl-nav-menu :is(.vl-desplegable__titulo, .vl-desplegable__frase, .vl-desplegable__rotulo, .vl-desplegable__lista--editores, .vl-desplegable__foto) {
	display: none;
}

.vl-nav-panel .vl-nav-menu .vl-desplegable {
	font-size: 1.0625rem;
}

.vl-nav-panel .vl-nav-menu .vl-desplegable ul {
	gap: 14px;
}

.vl-nav-panel .vl-nav-menu .vl-desplegable li small {
	font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
	.cabecera-flotante .vl-nav-escritorio .vl-con-desplegable.is-abierto > .vl-desplegable,
	.cabecera-flotante.vl-desplegable-abierto::after {
		animation: none;
	}

	.vl-nav-panel .vl-nav-menu .vl-desplegable__boton::before,
	.vl-nav-panel .vl-nav-menu .vl-desplegable__boton::after {
		transition: none;
	}
}