/* Menú: separadores en pantallas anchas y las tres carreras dentro de La carrera cuando no caben. */

.hero-verdad {
	margin: 0.55rem 0 0.2rem;
	max-width: 38rem;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--crema);
}

.hero-verdad a { color: var(--lima); }

.huecos-resumen li {
	font-family: "Anton", sans-serif;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
}

.marca { flex-shrink: 0; }

.cabecera nav.menu { gap: 1.05rem; }

.nav-bloque,
.nav-sub { display: contents; }

.nav-flecha {
	display: none;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--crema);
	cursor: pointer;
}

.nav-flecha::before {
	content: "";
	border: 5px solid transparent;
	border-top-color: currentColor;
	border-bottom-width: 0;
	transform: translateY(2px);
}

.nav-flecha:hover,
.nav-flecha[aria-expanded="true"] { color: var(--lima); background: rgba(214, 255, 0, 0.12); }

.nav-flecha:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }

.menu .nav-sep { position: relative; padding-left: 1.05rem; }

.menu .nav-sep::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 1.25rem;
	background: rgba(214, 255, 0, 0.45);
	transform: translateY(-50%);
}

@media (max-width: 1400px) {
	.nav-bloque {
		display: flex;
		align-items: center;
		position: relative;
		gap: 0.2rem;
	}
	.nav-flecha { display: inline-flex; }
	.nav-sub {
		display: none;
		position: absolute;
		top: calc(100% + 0.55rem);
		left: 0;
		z-index: 40;
		flex-direction: column;
		gap: 0.15rem;
		min-width: 15rem;
		max-width: calc(100vw - 1.4rem);
		padding: 0.45rem;
		border-radius: 16px;
		background: #102408;
		border: 2px solid rgba(214, 255, 0, 0.45);
		box-shadow: 6px 6px 0 #000;
	}
	.nav-bloque.abierto .nav-sub { display: flex; }
	.nav-sub::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 1.35rem;
	}
	.nav-sub .nav-ruta {
		width: 100%;
		box-sizing: border-box;
		padding: 0.5rem 0.65rem;
		border-radius: 12px;
	}
	.nav-sub .nav-ruta:hover,
	.nav-sub .nav-ruta[aria-current="page"] { background: rgba(214, 255, 0, 0.12); }
	.nav-sub .nav-ruta img { width: 36px; height: 36px; flex-basis: 36px; }
	.nav-sub .nav-ruta span {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
	.nav-sub .nav-sep { padding-left: 0.65rem; }
	.nav-sub .nav-sep::before { content: none; }
}

@media (max-width: 1400px) and (hover: hover) and (pointer: fine) {
	.nav-bloque:hover .nav-sub { display: flex; }
}

@media (max-width: 980px) {
	.menu a[href="#camiseta"] { display: none; }
	.cabecera nav.menu { gap: 0.55rem; }
}

@media (max-width: 720px) {
	.cabecera nav.menu { gap: 0.45rem; }
}
