/* Ruizz: cabecera. Fija arriba; en la portada, transparente sobre el vídeo hasta que se baja. */
.ruz-cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ruz-lino);
	border-bottom: 1px solid var(--ruz-hilo);
	transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.ruz-cabecera[data-ruz-pegada] {
	box-shadow: var(--ruz-sombra);
}

.ruz-cabecera__fila {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--ruz-alto-cabecera);
}

.ruz-cabecera__logo {
	position: relative;
	display: block;
	flex: none;
	width: clamp(104px, 9vw, 132px);
}

.ruz-cabecera__logo img {
	width: 100%;
	height: auto;
	transition: opacity 320ms ease;
}

.ruz-cabecera__logo-blanco {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/* Sobre el vídeo de la portada */
.ruz-cabecera--sobre {
	position: fixed;
	inset: 0 0 auto;
	background: transparent;
	border-bottom-color: transparent;
}

.ruz-cabecera--sobre:not([data-ruz-pegada]) {
	color: var(--ruz-blanco);
}

.ruz-cabecera--sobre:not([data-ruz-pegada]) .ruz-cabecera__logo-negro {
	opacity: 0;
}

.ruz-cabecera--sobre:not([data-ruz-pegada]) .ruz-cabecera__logo-blanco {
	opacity: 1;
}

.ruz-cabecera--sobre[data-ruz-pegada] {
	background: var(--ruz-lino);
	border-bottom-color: var(--ruz-hilo);
}

.ruz-cabecera--sobre:not([data-ruz-pegada]) :focus-visible {
	outline-color: var(--ruz-blanco);
}

/* Menú de escritorio */
.ruz-nav {
	display: none;
	margin-left: auto;
}

@media (min-width: 1100px) {
	.ruz-nav {
		display: block;
	}
}

.ruz-nav__lista {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.6vw, 26px);
}

.ruz-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.ruz-nav__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	font-size: var(--ruz-t-label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 9px);
	background-size: 0 1px;
	transition: background-size 280ms var(--ruz-salida), color 160ms ease;
}

.ruz-cabecera:not(.ruz-cabecera--sobre) .ruz-nav__enlace,
.ruz-cabecera--sobre[data-ruz-pegada] .ruz-nav__enlace {
	color: var(--ruz-tinta);
}

.ruz-nav__enlace[aria-current="page"] {
	background-size: 100% 1px;
}

@media (hover: hover) and (pointer: fine) {
	.ruz-nav__enlace:hover {
		background-size: 100% 1px;
	}
}

.ruz-nav__abrir {
	display: grid;
	place-items: center;
	width: 28px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.ruz-nav__abrir .ruz-icono {
	width: 14px;
	height: 14px;
	transition: transform 220ms var(--ruz-salida);
}

.ruz-nav__item[data-ruz-abierto] .ruz-nav__abrir .ruz-icono {
	transform: rotate(180deg);
}

/* Desplegable: crece desde su botón */
.ruz-nav__sub {
	position: absolute;
	top: calc(100% + 10px);
	left: -20px;
	z-index: 60;
	min-width: 280px;
	padding: 14px;
	border: 1px solid var(--ruz-hilo);
	border-radius: var(--ruz-r-sm);
	background: var(--ruz-blanco);
	box-shadow: var(--ruz-sombra);
	color: var(--ruz-tinta);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.98);
	transform-origin: 30px 0;
	transition: opacity 180ms ease, transform 220ms var(--ruz-salida), visibility 0s linear 220ms;
}

.ruz-nav__sub::before {
	content: "";
	position: absolute;
	inset: -12px 0 auto;
	height: 12px;
}

.ruz-nav__sub--doble {
	min-width: 560px;
}

.ruz-nav__sub--doble ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ruz-nav__item[data-ruz-abierto] .ruz-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 160ms ease, transform 220ms var(--ruz-salida), visibility 0s;
}

@media (hover: hover) and (pointer: fine) {
	.ruz-nav__item--grupo:not([data-ruz-cerrado]):hover .ruz-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 160ms ease 60ms, transform 220ms var(--ruz-salida) 60ms, visibility 0s 60ms;
	}
}

/* Sin JavaScript, con el teclado */
.ruz-nav__item--grupo:focus-within .ruz-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Con JavaScript, el teclado abre con el botón de la flecha. Pero no se esconde con el ratón encima: Chrome da el foco
   al enlace al apretar el botón, y si el desplegable se escondía en ese instante, el clic caía en lo de debajo. */
.ruz-js .ruz-nav__item--grupo:focus-within:not([data-ruz-abierto]):not(:hover) .ruz-nav__sub,
.ruz-js .ruz-nav__item--grupo[data-ruz-cerrado]:not([data-ruz-abierto]) .ruz-nav__sub {
	opacity: 0;
	visibility: hidden;
}

.ruz-nav__sub a {
	display: grid;
	gap: 1px;
	padding: 10px 12px;
	border-radius: var(--ruz-r-sm);
	color: var(--ruz-tinta);
	text-decoration: none;
	transition: background-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.ruz-nav__sub a:hover {
		background: var(--ruz-arena);
	}
}

.ruz-nav__sub a[aria-current="page"] {
	background: var(--ruz-arena);
}

.ruz-nav__sub-nombre {
	font-family: var(--ruz-serif);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.2;
}

.ruz-nav__sub-linea {
	color: var(--ruz-tinta-suave);
	font-size: 0.8125rem;
}

/* Acciones */
.ruz-cabecera__acciones {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

@media (min-width: 1100px) {
	.ruz-cabecera__acciones {
		margin-left: clamp(8px, 1.4vw, 20px);
	}
}

.ruz-cabecera__icono {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	transition: transform 160ms var(--ruz-salida);
}

.ruz-cabecera:not(.ruz-cabecera--sobre) .ruz-cabecera__icono,
.ruz-cabecera--sobre[data-ruz-pegada] .ruz-cabecera__icono {
	color: var(--ruz-tinta);
}

.ruz-cabecera__icono:active {
	transform: scale(0.94);
}

.ruz-cabecera__icono .ruz-icono {
	width: 22px;
	height: 22px;
}

.ruz-cabecera__cita {
	display: none;
}

@media (min-width: 720px) {
	.ruz-cabecera__cita {
		display: inline-flex;
	}
}

.ruz-cabecera--sobre:not([data-ruz-pegada]) .ruz-cabecera__cita {
	background: rgba(20, 18, 16, 0.32);
	border-color: rgba(255, 255, 255, 0.85);
	color: var(--ruz-blanco);
}

@media (hover: hover) and (pointer: fine) {
	.ruz-cabecera--sobre:not([data-ruz-pegada]) .ruz-cabecera__cita:hover {
		background: var(--ruz-blanco);
		border-color: var(--ruz-blanco);
		color: var(--ruz-tinta);
	}
}

@media (min-width: 1100px) {
	.ruz-cabecera__menu {
		display: none;
	}
}

/* Buscador */
.ruz-buscador {
	border-top: 1px solid var(--ruz-hilo);
	background: var(--ruz-lino);
	color: var(--ruz-tinta);
}

.ruz-buscador__form {
	display: flex;
	gap: 10px;
	padding-block: 14px;
}

.ruz-buscador input,
.ruz-buscar-pagina input,
.ruz-panel__buscar input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--ruz-borde-campo);
	border-radius: var(--ruz-r-sm);
	background: var(--ruz-blanco);
	color: var(--ruz-tinta);
}

/* Menú del móvil */
.ruz-panel {
	width: min(100%, 440px);
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0 0 0 auto;
	padding: 0 22px 32px;
	overflow-y: auto;
	border: 0;
	background: var(--ruz-lino);
	color: var(--ruz-tinta);
	transform: none;
	opacity: 1;
	transition: transform 380ms var(--ruz-cajon), opacity 240ms ease, display 380ms allow-discrete, overlay 380ms allow-discrete;
}

.ruz-panel:not([open]) {
	transform: translateX(100%);
}

@starting-style {
	.ruz-panel[open] {
		transform: translateX(100%);
	}
}

.ruz-panel::backdrop {
	background: rgba(26, 26, 26, 0.38);
	opacity: 1;
	transition: opacity 300ms ease, display 300ms allow-discrete, overlay 300ms allow-discrete;
}

.ruz-panel:not([open])::backdrop {
	opacity: 0;
}

@starting-style {
	.ruz-panel[open]::backdrop {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ruz-panel,
	.ruz-panel:not([open]) {
		transform: none;
	}

	@starting-style {
		.ruz-panel[open] {
			transform: none;
			opacity: 0;
		}
	}
}

.ruz-panel__cabeza {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--ruz-alto-cabecera);
	background: var(--ruz-lino);
}

.ruz-panel__cabeza img {
	width: 104px;
}

.ruz-panel__cerrar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	border: 0;
	background: none;
}

.ruz-panel__cerrar .ruz-icono {
	width: 24px;
	height: 24px;
}

.ruz-panel__buscar {
	display: flex;
	gap: 8px;
	margin: 8px 0 12px;
}

.ruz-panel__buscar-boton {
	display: grid;
	place-items: center;
	width: 48px;
	border: 1px solid var(--ruz-tinta);
	background: var(--ruz-tinta);
	color: var(--ruz-blanco);
}

.ruz-panel__lista > li {
	border-bottom: 1px solid var(--ruz-hilo-fuerte);
}

.ruz-panel__enlace {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ruz-tinta);
	font-family: var(--ruz-serif);
	font-size: 1.5rem;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
}

.ruz-panel__enlace .ruz-icono {
	width: 18px;
	height: 18px;
	color: var(--ruz-taupe-tostado);
	transition: transform 220ms var(--ruz-salida);
}

.ruz-panel__enlace[aria-expanded="true"] .ruz-icono {
	transform: rotate(180deg);
}

.ruz-panel__sub {
	display: grid;
	padding: 0 0 14px 2px;
}

.ruz-panel__sub a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--ruz-tinta-suave);
	font-size: 1rem;
	text-decoration: none;
}

.ruz-panel__sub a[aria-current="page"] {
	color: var(--ruz-tinta);
	font-weight: 500;
}

.ruz-panel__cita {
	margin-top: 24px;
}

.ruz-panel__cita .ruz-boton {
	width: 100%;
}

.ruz-panel__tiendas {
	display: grid;
	gap: 2px;
	margin-top: 20px;
	font-size: var(--ruz-t-small);
}

.ruz-panel__tiendas li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ruz-panel__tienda {
	color: var(--ruz-tinta-suave);
}

.ruz-panel__tiendas a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--ruz-tinta);
}

.ruz-panel__tiendas .ruz-icono {
	width: 16px;
	height: 16px;
	color: var(--ruz-taupe-tostado);
}

/* Redes */
.ruz-redes {
	display: flex;
	gap: 4px;
	margin-top: 16px;
}

.ruz-redes a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--ruz-tinta);
	transition: color 160ms ease;
}

.ruz-redes .ruz-icono {
	width: 22px;
	height: 22px;
}

@media (hover: hover) and (pointer: fine) {
	.ruz-redes a:hover {
		color: var(--ruz-taupe-tostado);
	}
}