/* Cabecera negra pegada arriba, selector de idioma, buscador y menú del móvil. */

:root {
	--vvt-alto-cabecera: 76px;
}

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

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

.vvt-saltar:focus-visible {
	transform: none;
	--vvt-foco: var(--vvt-hueso);
}

.vvt-cabecera__principal {
	--vvt-foco: var(--vvt-hueso);
	height: var(--vvt-alto-cabecera);
	background: #000;
	border-bottom: 1px solid rgba(190, 154, 78, 0.28);
	color: var(--vvt-hueso);
	transition: box-shadow var(--vvt-d-estado) ease;
}

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

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

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

.vvt-cabecera__logo-img {
	width: 192px;
	height: auto;
	margin-left: -12px; /* el logotipo trae aire a la izquierda */
}

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

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

.vvt-nav__enlace {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	color: var(--vvt-hueso);
	font-size: 0.9688rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.vvt-nav__enlace::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 1px;
	background: var(--vvt-oro);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--vvt-d-estado) var(--vvt-ease-salida);
}

.vvt-nav__enlace[aria-current]::after {
	transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
	.vvt-nav__enlace:hover {
		color: var(--vvt-oro);
	}

	.vvt-nav__enlace:hover::after {
		transform: scaleX(1);
	}
}

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

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

.vvt-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(--vvt-hueso);
	cursor: pointer;
	transition: background-color var(--vvt-d-estado) ease, color var(--vvt-d-estado) ease;
}

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

@media (hover: hover) and (pointer: fine) {
	.vvt-cabecera__icono:hover {
		background: rgba(250, 247, 238, 0.12);
		color: var(--vvt-oro);
	}
}

.vvt-cabecera__contador {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--vvt-oro);
	color: var(--vvt-bosque);
	font-family: var(--vvt-mono);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

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

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

	60% {
		transform: scale(1.15);
	}

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

.vvt-cabecera__tienda {
	min-height: 44px;
	margin-left: 8px;
	padding: 10px 22px;
}

.vvt-cabecera__menu {
	display: none;
}

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

.vvt-buscador::backdrop {
	background: rgba(28, 27, 22, 0.45);
}

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

.vvt-buscador__lupa {
	margin-left: 6px;
	color: var(--vvt-musgo);
}

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

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

.vvt-panel__cerrar {
	color: var(--vvt-hueso);
}

@media (hover: hover) and (pointer: fine) {
	.vvt-buscador__cerrar:hover {
		background: var(--vvt-lino);
	}

	.vvt-panel__cerrar:hover {
		background: rgba(250, 247, 238, 0.12);
	}
}

/* Menú del móvil: cajón lateral (<dialog> modal) */
.vvt-panel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(400px, 88vw);
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 20px 24px 32px;
	border: 0;
	background: var(--vvt-noche);
	color: var(--vvt-hueso);
	--vvt-foco: var(--vvt-hueso);
	--vvt-filete: 1px solid rgba(250, 247, 238, 0.18);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: var(--vvt-sombra-flotante);
	transform: translateX(100%);
	transition: transform var(--vvt-d-panel) var(--vvt-ease-cajon), overlay var(--vvt-d-panel) allow-discrete, display var(--vvt-d-panel) allow-discrete;
}

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

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

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

.vvt-panel[open]::backdrop {
	background: rgba(28, 27, 22, 0.45);
}

@starting-style {
	.vvt-panel[open]::backdrop {
		background: rgba(28, 27, 22, 0);
	}
}

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

.vvt-panel__logo {
	width: 168px;
	height: auto;
}

.vvt-panel__lista {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	border-top: var(--vvt-filete);
}

.vvt-panel__enlace {
	display: flex;
	align-items: center;
	min-height: 56px;
	border-bottom: var(--vvt-filete);
	font-family: var(--vvt-serifa);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--vvt-hueso);
	text-decoration: none;
}

.vvt-panel__enlace[aria-current] {
	color: var(--vvt-oro);
	font-style: italic;
}

.vvt-panel__buscar {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}

.vvt-panel__buscar input {
	flex: 1;
	min-width: 0;
}

.vvt-panel__buscar-boton {
	display: inline-grid;
	place-items: center;
	width: 48px;
	border: 0;
	border-radius: var(--vvt-r-campo);
	background: var(--vvt-oro);
	color: var(--vvt-bosque);
	cursor: pointer;
}

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

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

.vvt-panel__contacto .vvt-icono {
	color: var(--vvt-oro);
}

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

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

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

@media (max-width: 760px) {
	:root {
		--vvt-alto-cabecera: 64px;
	}

	.vvt-cabecera__fila {
		gap: 8px;
	}

	.vvt-cabecera__logo-img {
		width: 138px;
		margin-left: -9px;
	}

	.vvt-cabecera__cuenta {
		display: none;
	}

	.vvt-cabecera__tienda {
		margin-left: 2px;
		padding: 8px 16px;
		font-size: 0.9375rem;
	}

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

/* En el móvil la tienda es la primera entrada del menú y el botón del héroe */
@media (max-width: 559px) {
	.vvt-cabecera__tienda {
		display: none;
	}
}

@media (max-width: 374px) {
	.vvt-cabecera__logo-img {
		width: 112px;
		margin-left: -7px;
	}

	.vvt-cabecera__acciones > [data-vvt-abrir="vvt-buscador"] {
		display: none;
	}
}

/* Selector de idioma: GTranslate pinta dentro .glink (ES y EN) y cabecera.js les pone idioma y nombre accesible */
.vvt-idioma {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid rgba(250, 247, 238, 0.24);
	border-radius: 999px;
}

.vvt-idioma:empty {
	display: none;
}

.vvt-idioma a.glink {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	height: 30px;
	padding: 0 8px;
	border-radius: 999px;
	color: var(--vvt-hueso) !important;
	font-size: var(--vvt-t-dato);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--vvt-d-estado) ease, color var(--vvt-d-estado) ease;
}

/* 44 px de objetivo sin ensanchar la cabecera */
.vvt-idioma a.glink {
	position: relative;
}

.vvt-idioma a.glink::after {
	content: "";
	position: absolute;
	inset: -8px 0;
}

.vvt-idioma a.glink.gt-current-lang {
	background: var(--vvt-oro);
	color: var(--vvt-bosque) !important;
	font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
	.vvt-idioma a.glink:not(.gt-current-lang):hover {
		background: rgba(250, 247, 238, 0.12);
		color: var(--vvt-oro) !important;
	}
}

.vvt-idioma #google_translate_element2 {
	display: none !important;
}

@media (min-width: 761px) {
	.vvt-idioma {
		margin-right: 6px;
	}
}