/* Cabecera: fila pegada arriba, buscador y menú del móvil. */

.alo-cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
}

.alo-saltar {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: var(--alo-r-campo);
	background: var(--alo-navy);
	color: var(--alo-blanco);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform var(--alo-d-estado) var(--alo-ease-salida);
}

.alo-saltar:focus-visible {
	transform: none;
	--alo-foco: var(--alo-turquesa);
}

.alo-cabecera__principal {
	height: var(--alo-alto-cabecera);
	background: rgba(255, 252, 248, 0.97);
	border-bottom: var(--alo-filete);
	transition: box-shadow var(--alo-d-estado) ease;
}

@supports (backdrop-filter: blur(1px)) {
	.alo-cabecera__principal {
		background: rgba(255, 252, 248, 0.88);
		backdrop-filter: saturate(1.3) blur(12px);
	}
}

.alo-cabecera__principal[data-alo-pegada] {
	box-shadow: var(--alo-sombra-suave);
}

.alo-cabecera__fila {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 100%;
}

.alo-cabecera__logo {
	display: flex;
	align-items: center;
	flex: none;
	min-height: 44px;
	text-decoration: none;
}

.alo-cabecera__logo-img {
	width: 56px;
	height: 56px;
}

.alo-nav {
	margin-inline: auto;
}

.alo-nav__lista {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alo-nav__enlace {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	color: var(--alo-navy);
	font-size: 0.9688rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--alo-d-estado) ease;
}

.alo-nav__enlace::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 8px;
	background: var(--alo-puntada-frambuesa) repeat-x left center;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 260ms var(--alo-ease-salida);
}

.alo-nav__enlace[aria-current]::after {
	clip-path: inset(0);
}

@media (hover: hover) and (pointer: fine) {
	.alo-nav__enlace:hover {
		color: var(--alo-turquesa-hondo);
	}

	.alo-nav__enlace:hover::after {
		clip-path: inset(0);
	}
}

.alo-cabecera__acciones {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.alo-nav + .alo-cabecera__acciones {
	margin-left: 0;
}

.alo-cabecera__icono {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--alo-navy);
	cursor: pointer;
	transition: background-color var(--alo-d-estado) ease;
}

.alo-cabecera__icono .alo-icono {
	width: 23px;
	height: 23px;
}

@media (hover: hover) and (pointer: fine) {
	.alo-cabecera__icono:hover {
		background: var(--alo-menta);
		color: var(--alo-navy);
	}
}

.alo-cabecera__whatsapp {
	min-height: 42px;
	margin-inline: 6px;
	padding: 8px 16px;
	font-size: 0.9375rem;
}

.alo-cabecera__contador {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--alo-frambuesa);
	color: var(--alo-blanco);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

.alo-cabecera__contador[data-alo-salto] {
	animation: alo-salto 420ms var(--alo-ease-salida);
}

@keyframes alo-salto {
	0% {
		transform: scale(0.6);
	}

	60% {
		transform: scale(1.15);
	}

	100% {
		transform: scale(1);
	}
}

.alo-cabecera__menu {
	display: none;
}

/* Buscador: un diálogo pegado arriba */
.alo-buscador {
	width: min(760px, calc(100vw - 32px));
	max-width: none;
	margin: 88px auto auto;
	padding: 0;
	border: 0;
	border-radius: var(--alo-r-tarjeta);
	background: var(--alo-blanco);
	color: var(--alo-navy);
	box-shadow: var(--alo-sombra-flotante);
}

.alo-buscador::backdrop {
	background: rgba(28, 36, 75, 0.45);
}

.alo-buscador__form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
}

.alo-buscador__lupa {
	margin-left: 6px;
	color: var(--alo-tinta-suave);
}

.alo-buscador input {
	flex: 1;
	min-width: 0;
	border-color: transparent;
	background: transparent;
	font-size: 1.0625rem;
}

.alo-buscador__cerrar,
.alo-panel__cerrar {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--alo-navy);
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
	.alo-buscador__cerrar:hover,
	.alo-panel__cerrar:hover {
		background: var(--alo-menta);
	}
}

/* Menú del móvil: cajón lateral (<dialog> modal) */
.alo-panel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(380px, 88vw);
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 16px 20px 28px;
	border: 0;
	background: var(--alo-papel);
	color: var(--alo-navy);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: var(--alo-sombra-flotante);
	transform: translateX(100%);
	transition: transform var(--alo-d-panel) var(--alo-ease-cajon), overlay var(--alo-d-panel) allow-discrete, display var(--alo-d-panel) allow-discrete;
}

.alo-panel[open] {
	transform: none;
}

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

.alo-panel::backdrop {
	background: rgba(28, 36, 75, 0);
	transition: background-color var(--alo-d-panel) ease, overlay var(--alo-d-panel) allow-discrete, display var(--alo-d-panel) allow-discrete;
}

.alo-panel[open]::backdrop {
	background: rgba(28, 36, 75, 0.45);
}

@starting-style {
	.alo-panel[open]::backdrop {
		background: rgba(28, 36, 75, 0);
	}
}

.alo-panel__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.alo-panel__logo {
	width: 56px;
	height: 56px;
}

.alo-panel__lista {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.alo-panel__enlace {
	display: flex;
	align-items: center;
	min-height: 54px;
	border-bottom: var(--alo-filete);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--alo-navy);
	text-decoration: none;
}

.alo-panel__enlace[aria-current] {
	color: var(--alo-frambuesa);
}

.alo-panel__contacto {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alo-panel__contacto a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: var(--alo-navy);
	text-decoration: none;
}

.alo-panel__contacto .alo-icono {
	color: var(--alo-turquesa-hondo);
}

@media (max-width: 999px) {
	.alo-nav {
		display: none;
	}

	.alo-cabecera__menu {
		display: inline-grid;
	}

	.alo-cabecera__acciones,
	.alo-nav + .alo-cabecera__acciones {
		margin-left: auto;
	}
}

@media (max-width: 760px) {
	.alo-cabecera__fila {
		gap: 8px;
	}

	.alo-cabecera__logo-img {
		width: 48px;
		height: 48px;
	}

	.alo-cabecera__cuenta,
	.alo-cabecera__whatsapp {
		display: none;
	}

	/* En las pantallas de compra, WhatsApp va en la cabecera: el botón flotante tapaba los campos */
	.woocommerce-cart .alo-cabecera__whatsapp,
	.woocommerce-checkout .alo-cabecera__whatsapp,
	.woocommerce-account .alo-cabecera__whatsapp {
		display: inline-flex;
		width: 44px;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		font-size: 0;
	}

	.woocommerce-cart .alo-cabecera__whatsapp .alo-icono,
	.woocommerce-checkout .alo-cabecera__whatsapp .alo-icono,
	.woocommerce-account .alo-cabecera__whatsapp .alo-icono {
		width: 22px;
		height: 22px;
	}

	.woocommerce-cart .alo-wa-flotante,
	.woocommerce-checkout .alo-wa-flotante,
	.woocommerce-account .alo-wa-flotante {
		display: none;
	}

	.alo-buscador {
		margin-top: 72px;
	}
}