/* Cabecera: la barra de contacto, la fila verde con el menú y el medallón del ánfora colgando en el centro (el
   semicírculo de siempre), y el menú del móvil como cajón. */

.os-cabecera {
	position: relative;
	z-index: 20;
	color: var(--os-blanco);
}

.os-cabecera__barra {
	background: var(--os-verde-hondo);
	color: var(--os-sobre-verde);
	font-size: var(--os-t-etiqueta);
}

.os-cabecera__barra-dentro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	min-height: 38px;
}

.os-cabecera__contacto {
	display: flex;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.os-cabecera__contacto a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	color: var(--os-sobre-verde);
	text-decoration: none;
}

.os-cabecera__contacto .os-icono,
.os-cabecera__envio .os-icono {
	width: 17px;
	height: 17px;
	color: var(--os-lima);
}

@media (hover: hover) and (pointer: fine) {
	.os-cabecera__contacto a:hover {
		color: var(--os-blanco);
	}
}

.os-cabecera__envio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--os-lima);
	font-weight: 700;
}

.os-cabecera__principal {
	background: var(--os-verde);
	transition: box-shadow var(--os-d-estado) ease;
}

.os-cabecera__fila {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 72px;
}

/* Menú de escritorio, a la izquierda del medallón */
.os-nav {
	grid-column: 1;
}

.os-nav__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 4px clamp(14px, 2vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.os-nav__enlace {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--os-blanco);
	font: 600 1.1875rem / 1 var(--os-titular);
	text-decoration: none;
}

.os-nav__enlace::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 2px;
	background: var(--os-lima);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--os-d-estado) var(--os-ease-salida);
}

.os-nav__enlace[aria-current="page"]::after {
	transform: scaleX(1);
}

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

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

/* El medallón: semicírculo verde que cuelga de la fila con el logotipo dentro */
.os-medallon {
	grid-column: 2;
	position: relative;
	z-index: 2;
	display: block;
	width: 180px;
	margin-bottom: -64px;
	padding: 8px 34px 40px;
	border-radius: 0 0 999px 999px;
	background: var(--os-verde);
	box-shadow: 0 14px 22px -14px rgba(31, 38, 8, 0.55);
	text-decoration: none;
}

.os-medallon img {
	width: 100%;
	height: auto;
}

.os-medallon:focus-visible {
	outline-offset: -6px;
}

.os-cabecera__acciones {
	grid-column: 3;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
}

.os-cabecera__icono {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 48px;
	min-height: 48px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--os-radio);
	background: none;
	color: var(--os-blanco);
	font: 700 var(--os-t-pequeno) / 1 var(--os-texto);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--os-d-estado) ease;
	-webkit-tap-highlight-color: transparent;
}

.os-cabecera__icono .os-icono {
	width: 24px;
	height: 24px;
}

@media (hover: hover) and (pointer: fine) {
	.os-cabecera__icono:hover {
		background: rgba(255, 255, 255, 0.1);
		color: var(--os-blanco);
	}
}

.os-cabecera__icono:active {
	transform: scale(0.96);
}

.os-cabecera__contador {
	position: absolute;
	top: 4px;
	left: 26px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--os-lima);
	color: var(--os-tinta);
	font: 700 12px / 20px var(--os-texto);
	text-align: center;
}

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

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

	60% {
		transform: scale(1.18);
	}

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

.os-cabecera__menu {
	display: none;
}

.os-cabecera[data-os-pegada] .os-cabecera__principal {
	box-shadow: 0 6px 18px rgba(31, 38, 8, 0.18);
}

/* Cajón del móvil */
.os-panel {
	width: min(420px, 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0 0 0 auto;
	padding: 0 22px 32px;
	border: 0;
	background: var(--os-verde);
	color: var(--os-sobre-verde);
	box-shadow: var(--os-sombra-panel);
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: transform var(--os-d-panel) var(--os-ease-cajon), overlay var(--os-d-panel) allow-discrete, display var(--os-d-panel) allow-discrete;
	transform: translateX(100%);
}

.os-panel[open] {
	transform: translateX(0);
}

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

.os-panel::backdrop {
	background: rgba(31, 38, 8, 0.55);
	opacity: 0;
	transition: opacity var(--os-d-panel) ease, overlay var(--os-d-panel) allow-discrete, display var(--os-d-panel) allow-discrete;
}

.os-panel[open]::backdrop {
	opacity: 1;
}

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

.os-panel__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid var(--os-linea-verde);
}

.os-panel__cabeza img {
	width: 92px;
}

.os-panel__cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--os-blanco);
	cursor: pointer;
}

.os-panel__cerrar .os-icono {
	width: 26px;
	height: 26px;
}

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

.os-panel__enlace {
	display: flex;
	align-items: center;
	min-height: 56px;
	border-bottom: 1px solid var(--os-linea-verde);
	color: var(--os-blanco);
	font: 600 1.5rem / 1.2 var(--os-titular);
	text-decoration: none;
}

.os-panel__enlace[aria-current="page"] {
	color: var(--os-lima);
}

.os-panel__acciones {
	display: grid;
	gap: 10px;
	margin-bottom: 24px;
}

.os-panel__contacto {
	display: grid;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.os-panel__contacto a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--os-sobre-verde);
	text-decoration: none;
}

.os-panel__contacto .os-icono {
	color: var(--os-lima);
}

.os-redes {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.os-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--os-blanco);
	transition: background-color var(--os-d-estado) ease, color var(--os-d-estado) ease;
}

.os-redes .os-icono {
	width: 20px;
	height: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.os-redes a:hover {
		background: var(--os-lima);
		color: var(--os-tinta);
	}
}

/* Hasta 1024 px: menú en el cajón, medallón a la izquierda */
@media (max-width: 1024px) {
	.os-nav {
		display: none;
	}

	/* Solo el icono a la vista; el texto sigue siendo el nombre del enlace para los lectores de pantalla. */
	.os-cabecera__icono-texto {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.os-cabecera__fila {
		grid-template-columns: auto 1fr;
		min-height: 62px;
	}

	.os-medallon {
		grid-column: 1;
		width: 124px;
		margin-bottom: -38px;
		padding: 6px 23px 28px;
	}

	.os-cabecera__acciones {
		grid-column: 2;
	}

	.os-cabecera__menu {
		display: inline-flex;
	}
}

@media (max-width: 600px) {
	.os-cabecera__correo {
		display: none;
	}

	.os-cabecera__barra-dentro {
		min-height: 36px;
		font-size: 0.875rem;
	}

	.os-medallon {
		width: 116px;
		padding: 6px 22px 26px;
	}
}

@media (max-width: 380px) {
	.os-cabecera__envio {
		display: none;
	}
}