/* Barra de navegación de Sortícula.
   Vivía dentro de .hero, pero la usan todas las páginas: en la home va
   superpuesta sobre el hero y en el resto como barra sólida. Por eso sale de
   hero.css a su propia hoja, que se carga en toda la tienda. */

.sc-nav {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-6) var(--pad);
	gap: var(--space-4);

	.nav-side {
		display: flex;
		gap: var(--space-7);
		align-items: center;
		flex: 1;
	}

	.nav-side.end {
		justify-content: flex-end;
		gap: var(--space-5);
	}

	.navlink {
		font-size: var(--fs-label);
		font-weight: 600;
		letter-spacing: var(--track-caps-xs);
		text-transform: uppercase;
		color: var(--on-dark);
		/* Los enlaces del menú son flex items de un contenedor con `flex: 1`, así
		   que se encogían por debajo de su contenido: el ítem con submenú partía
		   en dos líneas y dejaba el chevron solo, debajo del texto. Un nombre de
		   menú no se parte nunca. */
		white-space: nowrap;
		flex-shrink: 0;
	}

	.brand img {
		height: 26px;
		width: auto;
		max-width: none;
	}

	.cta-pill {
		font-size: var(--fs-label);
		font-weight: 600;
		letter-spacing: var(--track-caps-sm);
		text-transform: uppercase;
		text-decoration: none;
		color: var(--on-dark);
		border: 1.5px solid var(--line-on-dark-strong);
		padding: var(--btn-pad-sm);
		border-radius: 100px;
		transition:
			border-color 0.3s,
			background 0.3s,
			color 0.3s;
	}

	.cta-pill:hover {
		border-color: var(--on-dark);
	}

	/* Ítem de menú con submenú (categorías con hijos desde el panel). El
	   desplegable se revela por :hover Y por :focus-within, así queda
	   navegable por teclado sin depender de JS: al tabular hasta el enlace
	   padre, el submenú ya es visible antes de que el foco siga avanzando
	   hacia sus hijos. */
	.navlink--has-sub {
		position: relative;
		display: flex;
		align-items: center;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.navlink--has-sub .lnk {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		white-space: nowrap;
	}

	/* Era el glifo ⌄ (U+2304), que lleva la tinta en la mitad baja de su caja:
	   por más que se centre el elemento, el dibujo queda hundido respecto a las
	   versalitas. Un SVG se alinea de verdad. El medio píxel compensa que las
	   mayúsculas no tienen descendentes, así que su centro óptico está por
	   encima del centro de la línea. */
	.navlink-caret {
		display: block;
		flex: none;
		transform: translateY(0.5px);
	}

	.navlink-sub {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin: var(--space-3) 0 0;
		padding: var(--space-2) 0;
		min-width: 200px;
		list-style: none;
		background: var(--bg);
		border: 1px solid var(--line-on-dark);
		border-radius: 8px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
		visibility: hidden;
		opacity: 0;
		transition:
			opacity 0.2s var(--ease, ease),
			visibility 0.2s;
		z-index: 20;
	}

	.navlink--has-sub:hover .navlink-sub,
	.navlink--has-sub:focus-within .navlink-sub {
		visibility: visible;
		opacity: 1;
	}

	.navlink-sub li {
		display: block;
	}

	.navlink-sub a {
		display: block;
		padding: var(--space-2) var(--space-4);
		font-size: var(--fs-label);
		font-weight: 600;
		letter-spacing: var(--track-caps-md);
		text-transform: uppercase;
		color: var(--on-dark);
		white-space: nowrap;
	}

	.navlink-sub a:hover,
	.navlink-sub a[aria-current='page'] {
		color: var(--accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.navlink-sub {
		transition: none;
	}
}

/* Fuera de la home no hay hero detrás, así que la barra pone su propio fondo. */
.sc-nav--solid {
	background: var(--bg);
	border-bottom: 1px solid var(--line-on-dark);
}

/* Hamburguesa: oculta en escritorio, aparece solo bajo 900px (ver media
   query de abajo). Área de toque de 44px aunque el ícono sea chico. */
.nav-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--on-dark);
	cursor: pointer;
}

@media (max-width: 900px) {
	.sc-nav {
			.navlink,
			.navlink--has-sub {
				display: none;
			}
			.nav-burger {
				display: flex;
			}
			/* El idioma se muda al panel del menú: con la hamburguesa, la gema,
			   "ES / EN", el botón Reservar y el carrito, la barra no cabía en
			   390px y se partía en tres filas. */
			.lang {
				display: none;
			}
			/* Y los huecos se cierran: --space-7 son 48px por hueco, pensados
			   para el nav de escritorio con sus enlaces. */
			.nav-side,
			.nav-side.end {
				gap: var(--space-3);
				flex: 0 1 auto;
			}
			& {
				flex-wrap: wrap;
				row-gap: var(--space-4);
				padding: var(--space-5) var(--pad);
			}
			.brand {
				display: flex;
				justify-content: center;
				order: -1;
				flex: 0 0 100%;
			}
			.brand img {
				height: 30px;
			}
	}
}

/* --- Panel de menú móvil -------------------------------------------------
   Cajón (drawer) que se abre desde la derecha, mismo lenguaje que los
   modales del tema (fondo/texto por token, línea de borde, sombra suave) en
   vez del blanco fijo de los paneles nativos. Sin JS, `[hidden]` ya lo saca
   del árbol de accesibilidad y del tabulado; el JS solo agrega `.is-open`
   un frame después de mostrarlo, para poder animar la entrada. */
.nav-mobile {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
}

.nav-mobile:not([hidden]) {
	display: block;
}

.nav-mobile-backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--bg) 70%, transparent);
	opacity: 0;
	transition: opacity 0.25s var(--ease, ease);
}

.nav-mobile-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(86vw, 360px);
	overflow-y: auto;
	background: var(--bg);
	color: var(--fg);
	border-left: 1px solid var(--line);
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.32);
	padding: var(--space-7) var(--space-5);
	transform: translateX(100%);
	transition: transform 0.3s var(--ease-out, ease);
}

.nav-mobile.is-open .nav-mobile-backdrop {
	opacity: 1;
}

.nav-mobile.is-open .nav-mobile-panel {
	transform: translateX(0);
}

/* El selector de idioma, ya dentro del panel: acá hay sitio para el nombre
   completo del idioma en vez del "ES / EN" comprimido de la barra. */
.nav-mobile-lang {
	display: flex;
	gap: var(--space-5);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--line);
}

.nav-mobile-lang .opt {
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
	color: var(--fg-muted);
	text-decoration: none;
}

.nav-mobile-lang .opt.active {
	color: var(--fg);
}

.nav-mobile-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 var(--space-5) auto;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 100px;
	color: var(--fg);
	cursor: pointer;
}

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

.nav-mobile-item {
	border-bottom: 1px solid var(--line);
}

.nav-mobile-item > a {
	display: block;
	padding: var(--space-4) var(--space-2);
	font-family: var(--sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fg);
	text-decoration: none;
}

.nav-mobile-item > a:hover,
.nav-mobile-item > a[aria-current='page'] {
	color: var(--accent);
}

.nav-mobile-sub {
	list-style: none;
	margin: 0 0 var(--space-3);
	padding: 0 0 0 var(--space-4);
}

.nav-mobile-sub a {
	display: block;
	padding: var(--space-3) var(--space-2);
	font-family: var(--sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--fg-muted);
	text-decoration: none;
}

.nav-mobile-sub a:hover,
.nav-mobile-sub a[aria-current='page'] {
	color: var(--accent);
}

/* El botón vive en la barra normal (position: relative por herencia de
   .sc-nav), así que también respeta la paleta activa fuera de la home. */
html.nav-mobile-locked,
html.nav-mobile-locked body {
	overflow: hidden;
}

@media (min-width: 901px) {
	.nav-mobile {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav-mobile-backdrop,
	.nav-mobile-panel {
		transition: none;
	}
}

/* --- Escritorio: el logo al centro, siempre ----------------------------------
   Con flex, el lado izquierdo (gema, idioma y cuatro enlaces) medía 872px y
   empujaba el logo hasta dejarlo a 16px del último enlace; entre 900 y 1000px
   "Reservar" y el carrito se salían de la pantalla. Tres columnas —lado, logo,
   lado— dejan el logo en el centro exacto pase lo que pase a los lados, y el
   hueco entre enlaces se ajusta al ancho en vez de ser 48px fijos.

   Ojo: esto ordena, no hace sitio. Medido el 2-oct-2026, a la izquierda del
   logo caben DOS enlaces del menú en 1024px (más de dos se montan sobre el
   logo). Los demás se esconden en Personalizar → Menú. */
@media (min-width: 901px) {
	.sc-nav {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		column-gap: var(--space-5);
	}

	.sc-nav .nav-side {
		min-width: 0;
		gap: clamp(20px, 2.2vw, 48px);
	}

	.sc-nav .nav-side.end {
		gap: var(--space-5);
	}
}