/* magazzine */
.magazzine{
	position:relative;
	padding: 3rem;
	min-height: 90dvh;
}

.magazzine .overlay{
	position: absolute;
	inset: 0 72% 0 0;
	background: 
		linear-gradient(90deg, rgb(var(--c1)/1) 0%, rgb(var(--c2)/1)),
		url("/assets/img/bg.webp");
	background-repeat: repeat, repeat;
	background-size: auto, auto;
	background-position: center, center;
	background-blend-mode: multiply, normal;
	z-index: 0;
}

.magazzine > article{
	position:relative;
}

.magazzine .header{
	position: absolute;
	top: 36%;
	left: 9%;
	width: 27%;
	z-index: 2;
	transform: translateY(-50%);
}

.magazzine .header dt h2{
	width: 200%;
}


.magazzine .pic{
	position:relative;
	inset: 0;
	padding: 0;
	z-index: 1
}

.magazzine .pic .overlay {
	position: absolute;
	top: 50%;
	left: 9%;
	width: 27%;
	height: 80%;
	transform: translateY(-50%);
	background: linear-gradient(
		90deg,
		rgb(var(--c2) / 1) 0%,
		rgb(var(--c1) / 1) 100%
	);
	mix-blend-mode: multiply;
	z-index: 1;
}

.magazzine dl.artxt.body{
	display:flex;
	flex-flow:row nowrap;
	align-items:stretch;
	gap: 3rem;
	padding: 1.5rem 3rem 0;
	z-index: 2;
	width: 100%
}

.magazzine dl.artxt.body dd{
	flex:1;
	min-width:0;
	margin:0;
	border: none;
}

.magazzine button.artxt-toggle{
	background: none;
}

/* magazzine mobile */
@media (max-width: 767px) {
	section.magazzine {
		width: 100%;
		padding: 2rem 0;
	}

	.magazzine .overlay {
		position: absolute;
		inset: 0;
		background: 
			linear-gradient(90deg, rgb(var(--c1) / 1) 0%, rgb(var(--c1) / .75) 33%, rgb(var(--c3) / 0) 33%, rgb(var(--c3) / 0) 100%),
			url("/assets/img/bg.webp");
		background-repeat: repeat, repeat;
		background-size: auto, auto;
		background-position: center, center;
		background-blend-mode: multiply, normal;
		z-index: 0;
	}

	section.magazzine .header-container {
		position: absolute;
		top: 30%;
		left: 0;
		width: 60%;
		height: 50%;
		max-height: 50%;
		transform: translateY(-50%);
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y pan-x;
		scrollbar-width: none;
		z-index: 5;
		background: #ea6262;
	}

	section.magazzine .header-container::-webkit-scrollbar {
		display: none;
	}

	section.magazzine .header-container .header {
		position: absolute;
		top: 0;
		left: 0;
		transform: none;
		width: 100%;
		padding: 2rem;
	}
	section.magazzine .header-container .header dt{
		width: 100%
	}
	section.magazzine .header-container .header h2{
		width: 100%;
	}
	section.magazzine .header-container .header dd{
		width: 100%;
	}

	section.magazzine .pic {
		z-index: auto;
		padding: 0;
	}

	.magazzine .pic .overlay {
		position: absolute;
		top: 50%;
		left: 3%;
		width: 55%;
		height: 90%;
		transform: translateY(-50%);
		background: linear-gradient(
			90deg,
			rgb(var(--c2) / 1) 0%,
			rgb(var(--c1) / 1) 100%
		);
		mix-blend-mode: multiply;
		z-index: 1;
	}

	section.magazzine dl.artxt.body {
		position: relative;
		bottom: auto;
		z-index: auto;
		display: flex;
		flex-flow: row nowrap;
		align-items: stretch;
		gap: 1rem;
		width: 100%;
		margin: 0;
		padding: 0;
		overflow-x: auto;
		overflow-y: hidden; /* <-- CAMBIADO: Evita conflictos verticales en este contenedor */
		scroll-snap-type: x mandatory;
		scroll-padding: 8%;
		-webkit-overflow-scrolling: touch;
		
		/* Volvemos a habilitar explícitamente ambos ejes para que el navegador decida sin trabarse */
		touch-action: pan-x pan-y; 
		
		overscroll-behavior-x: contain;
		overscroll-behavior-y: auto;
	}

	section.magazzine dl.artxt.body::-webkit-scrollbar {
		display: none;
	}

	section.magazzine dl.artxt.body > dd {
		position: relative;
		isolation: auto;
		flex: 0 0 100%;
		width: 100%;
		min-width: 100%;
		margin: 0;
		padding: 2rem;
		overflow: visible;
		color: rgb(var(--b) / 1);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		scroll-snap-align: start;
		background: #24bda1
	}

	/* señales laterales */
	section.magazzine .body-wrap,
	.magazzine-wrap {
		position: relative;
	}

	section.magazzine .hv-btn {
		top: 80%;
		transform: translateY(-50%);
		background: rgb(var(--n) / .3);
	}
}