/**
 * Navegación compartida de "A tu lado" (maqueta editorial) — barra
 * lateral en escritorio entre las 5 páginas (Envíos, Garantía, Guía de
 * tallas, FAQ, Métodos de pago), carril horizontal en móvil. Cada
 * página conserva su propia URL; esto solo enlaza entre ellas.
 */

.mka-ayuda-layout {
	display: grid;
	grid-template-columns: 230px minmax(0, 760px);
	gap: 4.6875rem;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0.625rem var(--mka-espaciado-lg) 0 var(--mka-espaciado-lg);
}

.mka-ayuda-contenido {
	min-width: 0;
}

/* Las secciones de cada página ya traen su propio padding horizontal pensado para ancho completo; dentro de la columna de contenido no hace falta. */
.mka-ayuda-contenido > * {
	padding-left: 0;
	padding-right: 0;
}

.mka-ayuda-nav {
	display: flex;
	flex-direction: column;
	padding-top: var(--mka-espaciado-xl);
}

.mka-ayuda-nav__link {
	padding: var(--mka-espaciado-sm) 0;
	border-bottom: 1px solid var(--mka-color-plata);
	font-size: 0.875rem;
	color: var(--mka-color-texto-suave);
	text-decoration: none;
}

.mka-ayuda-nav__link:hover,
.mka-ayuda-nav__link:focus-visible {
	color: var(--mka-color-texto);
}

.mka-ayuda-nav__link.is-active {
	color: var(--mka-color-burdeos);
	font-weight: 600;
}

@media (max-width: 900px) {
	.mka-ayuda-layout {
		display: block;
		padding: 0;
	}

	/**
	 * El contenido quedaba pegado al borde en móvil: .mka-ayuda-layout
	 * pasa a padding:0 aquí y cada sección ya trae su propio padding
	 * horizontal en 0 (regla de arriba, pensada para la columna de
	 * escritorio). Se repone un margen fijo aquí, en el único lugar que
	 * envuelve a las 5 páginas, para no repetirlo página por página.
	 */
	.mka-ayuda-contenido {
		padding: 0 1.375rem;
	}

	/* El hero (Contacto también lo usa) ya trae su propio margen lateral en móvil — no se suma al del contenido. */
	.mka-ayuda-contenido .mka-hero-sin-foto > [class$="__texto"] {
		padding-left: 0;
		padding-right: 0;
	}

	.mka-ayuda-nav {
		flex-direction: row;
		overflow-x: auto;
		gap: var(--mka-espaciado-lg);
		padding: var(--mka-espaciado-md) 1.375rem;
		scrollbar-width: none;
	}

	.mka-ayuda-nav::-webkit-scrollbar {
		display: none;
	}

	.mka-ayuda-nav__link {
		flex: 0 0 auto;
		padding: 0 0 var(--mka-espaciado-xs) 0;
		white-space: nowrap;
		border-bottom: 2px solid transparent;
	}

	.mka-ayuda-nav__link.is-active {
		border-bottom-color: var(--mka-color-burdeos);
	}
}