/* Cabecera: barra de contacto (se va al bajar), fila principal pegada arriba, buscador y menú del móvil. */

:root {
	--obt-alto-barra: 38px;
	--obt-alto-cabecera: 76px;
}

.obt-cabecera {
	position: sticky;
	top: calc(-1 * var(--obt-alto-barra));
	z-index: 50;
}

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

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

.obt-cabecera__barra {
	height: var(--obt-alto-barra);
	background: var(--obt-bosque);
	color: var(--obt-hueso-atenuado);
	font-size: var(--obt-t-dato);
}

.obt-cabecera__barra-dentro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 100%;
}

.obt-cabecera__lema {
	margin: 0;
	font-family: var(--obt-mono);
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.obt-cabecera__contacto {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.obt-cabecera__contacto a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--obt-hueso);
	text-decoration: none;
	--obt-foco: var(--obt-hueso);
}

.obt-cabecera__contacto .obt-icono {
	width: 15px;
	height: 15px;
}

@media (hover: hover) and (pointer: fine) {
	.obt-cabecera__contacto a:hover span {
		text-decoration: underline;
	}
}

.obt-cabecera__principal {
	height: var(--obt-alto-cabecera);
	background: rgba(245, 239, 228, 0.97);
	border-bottom: var(--obt-filete);
	transition: box-shadow var(--obt-d-estado) ease;
}

@supports (backdrop-filter: blur(1px)) {
	.obt-cabecera__principal {
		background: rgba(245, 239, 228, 0.88);
		backdrop-filter: saturate(1.3) blur(12px);
	}
}

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

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

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

.obt-cabecera__logo-img {
	width: 132px;
	height: auto;
}

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

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

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

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

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

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

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

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

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

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

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

@media (hover: hover) and (pointer: fine) {
	.obt-cabecera__icono:hover {
		background: var(--obt-lino);
		color: var(--obt-bosque);
	}
}

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

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

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

	60% {
		transform: scale(1.15);
	}

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

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

.obt-cabecera__menu {
	display: none;
}

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

.obt-buscador::backdrop {
	background: rgba(30, 48, 30, 0.45);
}

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

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

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

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

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

/* Menú del móvil: cajón lateral (<dialog> modal) */
.obt-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(--obt-hueso);
	color: var(--obt-bosque);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: var(--obt-sombra-flotante);
	transform: translateX(100%);
	transition: transform var(--obt-d-panel) var(--obt-ease-cajon), overlay var(--obt-d-panel) allow-discrete, display var(--obt-d-panel) allow-discrete;
}

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

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

.obt-panel::backdrop {
	background: rgba(30, 48, 30, 0);
	transition: background-color var(--obt-d-panel) ease, overlay var(--obt-d-panel) allow-discrete, display var(--obt-d-panel) allow-discrete;
}

.obt-panel[open]::backdrop {
	background: rgba(30, 48, 30, 0.45);
}

@starting-style {
	.obt-panel[open]::backdrop {
		background: rgba(30, 48, 30, 0);
	}
}

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

.obt-panel__logo {
	width: 120px;
	height: auto;
}

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

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

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

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

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

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

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

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

.obt-panel__contacto .obt-icono {
	color: var(--obt-andevalo);
}

@media (max-width: 1199px) {
	/* El lema no cabe entero junto al contacto: fuera antes que cortarlo con puntos suspensivos */
	.obt-cabecera__lema {
		display: none;
	}

	.obt-cabecera__barra-dentro {
		justify-content: flex-end;
	}

	.obt-nav {
		display: none;
	}

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

	.obt-cabecera__acciones {
		margin-left: auto;
	}
}

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

	.obt-cabecera__barra {
		display: none;
	}

	.obt-cabecera__fila {
		gap: 8px;
	}

	.obt-cabecera__logo-img {
		width: 112px;
	}

	.obt-cabecera__cuenta {
		display: none;
	}

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

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

@media (max-width: 379px) {
	.obt-cabecera__tienda {
		display: none;
	}
}

/* Selector de idioma de GTranslate, con la piel del tema (abajo a la derecha, por encima de la barra de compra) */
.gt_float_switcher,
#gt_float_wrapper .gt_float_switcher {
	border-radius: 999px !important;
	background: var(--obt-bosque) !important;
	color: var(--obt-hueso) !important;
	box-shadow: var(--obt-sombra-flotante) !important;
	font-family: var(--obt-mono) !important;
	font-size: var(--obt-t-dato) !important;
}

.gt_float_switcher .gt-selected,
.gt_float_switcher .gt-selected .gt-current-lang {
	background: transparent !important;
	color: var(--obt-hueso) !important;
}

.gt_float_switcher .gt_options {
	background: var(--obt-hueso) !important;
}

.gt_float_switcher .gt_options a {
	color: var(--obt-bosque) !important;
}

/* Con la barra de compra de la ficha a la vista, el selector de idioma sube por encima de ella */
body:has(.obt-barra[data-obt-visible]) #gt_float_wrapper {
	bottom: calc(80px + env(safe-area-inset-bottom)) !important;
	transition: bottom var(--obt-d-panel) var(--obt-ease-cajon);
}

/* Con el aviso de cookies abierto, el selector (z-index 999999 de GTranslate, el aviso va a 99999) tapaba sus
   enlaces y, en el móvil, parte de los botones: fuera hasta que se elija */
body:has(.cmplz-cookiebanner.cmplz-show) #gt_float_wrapper {
	visibility: hidden;
}