.events {
	position: relative;
	display: flex;
	flex-direction: row;
	height: 81dvh;
}
section.events .overlay{
position: absolute;
inset: 0 72% 0 0;
 background: 
	linear-gradient(90deg, rgb(var(--n)/1) 0%, rgb(var(--c1)/1) 100%),
	url("/assets/img/bg.webp");
background-repeat: repeat, repeat;
background-size: auto, auto;
background-position: center, center;
background-blend-mode: multiply, normal;
}

.events > article:nth-of-type(1) {
width: 64%
}
.events > article:nth-of-type(2) {
width: 36%
}


.events-pics {
	--var-padding: 2rem;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: var(--var-padding);
	list-style: none;
}

.events-pics li {
	position: absolute;
width: calc(100% - (var(--var-padding) * 2));
	height:  calc(100% - (var(--var-padding) * 2));
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	transition:
		opacity .45s ease,
		transform .45s ease,
		filter .45s ease;
	transform: scale(1.03);
	filter: blur(8px);
}

.events-pics li.is-active {
	opacity: 1;
	z-index: 2;
	transform: scale(1);
	filter: blur(0);
	pointer-events: auto;
	
}

.events-pics figure {
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.events-pics figure::after {
	content: "";
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

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

}

.events-pics img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.events-pics .artxt.poster-copy {
position: absolute;
top: 50%;
left: 9%;
transform: translateY(-50%);
z-index: 3;
}


.events-details {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 9rem 18rem 9rem 0;
	list-style: none;
	overflow-y: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.events-details > li {
	position: relative;
	opacity: .55;
	transition:
		opacity .35s ease,
		transform .35s ease;
		margin-top: 3rem;
}

.events-details > li.is-active {
	opacity: 1;
}

.events-details .artxt {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(4rem, 4.5rem) 1px 1fr;
	gap: 1rem;
	align-items: stretch;
	margin: 0;
	padding: 0;
}

.events-details dt {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: .1rem;
}
.events-details dt h2{
	color: rgb(var(--c3) / 1);
	text-shadow: none;
	font-size: 3rem;
}
.events-details hr {
	width: 1px;
	height: auto;
	margin: 0;
	border: 0;
}

.events-details .artxt > button:not(.artxt-toggle) {
	grid-column: 3;
	justify-self: start;
}

/* events + hide_txt */
.events.hide-txt-clean .events-pics .poster-copy,
.events.hide-txt-clean .events-pics .layer-overlay,
.events.hide-txt-clean .events-pics .overlay{
	opacity:0 !important;
	visibility:hidden !important;
	pointer-events:none !important;
}

.events.hide-txt-clean .events-details,
.events.hide-txt-clean .events-details .artxt,
.events.hide-txt-clean .events-details .artxt *,
.events.hide-txt-clean .events-details dl,
.events.hide-txt-clean .events-details dt,
.events.hide-txt-clean .events-details dd{
	opacity:1 !important;
	visibility:visible !important;
	pointer-events:auto !important;
}

.events .events-details .hide-txt-target-clean,
.events .events-details .artxt.hide-txt-target-clean{
	opacity:1 !important;
	visibility:visible !important;
	pointer-events:auto !important;
}

/* 1. Mapeo genérico para tarjetas activas: asegurar z-index superior */
.events-pics li.is-active,
/* .events-details li.is-active, */
.hd-slide-item.is-active {
	z-index: 10 !important;
	pointer-events: auto !important;
}

/* 2. Desactivar intercepción de clics en tarjetas inactivas */
.events-pics li:not(.is-active),
/* .events-details li:not(.is-active), */
.hd-slide-item:not(.is-active) {
	z-index: 1 !important;
	pointer-events: none !important;
}

/* 3. Asegurar que en modo edición los elementos editables de la tarjeta activa capturen clics */
body.is-edit-mode .events-pics li.is-active *,
/* body.is-edit-mode .events-details li.is-active *, */
body.is-edit-mode .hd-slide-item.is-active * {
	pointer-events: auto;
}

@media (max-width: 767px) {
	section.events {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		width: 100% !important;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: hidden;
		contain: paint;
		transform: translateZ(0);
		backface-visibility: hidden;
		background: none;
	}

	section.events > article:nth-of-type(1),
	section.events > article:nth-of-type(2) {
		width: 100%;
		min-width: 0;
	}
	
	section.events .overlay{
		position: absolute;
		inset: 0 18% 0 0;
		background: 
			linear-gradient(90deg, rgb(var(--n)/1) 0%, rgb(var(--c1)/1) 100%),
			url("/assets/img/bg.webp");
		background-repeat: repeat, repeat;
		background-size: auto, auto;
		background-position: center, center;
		background-blend-mode: multiply, normal;
	}

	section.events .events-pics {
		--var-padding: 2rem;
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		width: 100%;
		height: 72dvh;
		margin: 0;
		padding: var(--var-padding) 0 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		overscroll-behavior-y: auto;
		list-style: none;
		contain: paint;
		transform: translateZ(0);
		backface-visibility: hidden;
		touch-action: pan-x pan-y;
	}

	section.events .events-pics > li,
	section.events .events-pics > li.is-active {
		position: relative;
		inset: auto;
		z-index: auto;
		flex: 0 0 100%;
		width: 100%;
		min-width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		opacity: 1;
		filter: none;
		transform: translateZ(0);
		transition: none;
		pointer-events: auto;
		scroll-snap-align: start;
		backface-visibility: hidden;
	}

	section.events .events-pics figure {
		position: absolute;
		inset: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		margin: 0;
		overflow: hidden;
	}

	section.events .events-pics figure img,
	section.events .events-pics figure video {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	section.events .events-pics figure::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
	}
	
	section.events figure .overlay{
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 63%;
		height: 90%;
		background: 
			linear-gradient(90deg, rgb(var(--n)/1) 0%, rgb(var(--c1)/1) 100%);
		z-index: 2;
		mix-blend-mode: multiply;
	}

	.events-pics .poster-copy-content {
		position: absolute;
		top: 5%;
		left: 0;
		width: 63%;
		padding: 0;
		z-index: 5;
		height: 90%;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
	}

	.events-pics .artxt.poster-copy {
		position: absolute;
		top: 0;
		left: 0;
		transform: none;
		width: 100%;
		padding: 2rem;
		z-index: 5;
		
	}
	
	.events-pics .artxt.poster-copy dt h2{
		width: 100%;
		background: none;
	}
	.events-pics .artxt.poster-copy dt h3{
		width: 110%;
	}

	section.events .events-details {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
		list-style: none;
	}

	section.events .events-details > li {
		position: static;
		display: none;
		margin: 0;
		opacity: 1;
		transform: none;
		transition: none;
	}

	section.events .events-details > li.is-active {
		display: block;
		opacity: 1;
	}

	section.events .events-details .artxt {
		margin: 0;
		width: 100%;
		padding: 2rem 3rem 2rem 1rem;
		background: 
			linear-gradient(90deg, rgb(var(--c2)/1) 0%, rgb(var(--c2)/1) 100%),
			url("/assets/img/bg.webp");
		background-repeat: repeat, repeat;
		background-size: auto, auto;
		background-position: center, center;
		background-blend-mode: multiply, normal;
	}

	section.events .events-details dt {
		display: block;
		border: none;
		margin: 0;
		padding: 0;
	}
	
	section.events .events-details dd {
		display: block;
		border: none;
		margin: 0;
		padding: 0;
	}

	section.events .events-details .artxt > button:not(.artxt-toggle) {
		grid-column: auto;
	}

	section.events,
	section.events .events-pics,
	section.events .events-pics > li,
	.xscroll,
	.xscroll-body,
	.xscroll-list > li {
		contain: initial !important;
		transform: none !important;
		backface-visibility: visible !important;
	}
}