/* block */
.block {
	--block-dt-base-color: rgb(var(--n) / 1);
	--block-dt-photo-color: rgb(var(--b) / 1);
	position: relative;
	display: flex;
	width: 100%;
	padding: 0;
}
.block .overlay{
	position: absolute;
	inset: 0 50% 0 0;
	background: 
		linear-gradient(90deg, rgb(var(--c1)/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;
	z-index: 0;
}

.block > article:nth-of-type(1) {
	position: relative;
	display: flex;
	align-items: center;
	width: 36%;
	z-index: 2;
}

.block > article:nth-of-type(2) {
	position: relative;
	width: 64%;
}

.block.reverse .overlay{
	position: absolute;
	inset: 0 0 0 50%;
	background: 
		linear-gradient(90deg, rgb(var(--c2)/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;
	z-index: 0;
}

.block.reverse > article:nth-of-type(1) {
	position: relative;
	width: 64%;
}

.block.reverse > article:nth-of-type(2) {
	position: relative;
	display: flex;
	align-items: center;
	width: 36%;
	z-index: 2;
}

.block .artxt {
	width: 100%;
	padding-left: 6rem;
	box-sizing: border-box;
}

.block.reverse .artxt {
	width: 100%;
	padding-right: 3rem;
	padding-left: 3rem;
	box-sizing: border-box;
}

/* Regla anti-desborde y rotura de palabras */
.block .artxt h1,
.block .artxt h2,
.block .artxt h3,
.block .artxt h4,
.block .artxt p,
.block .artxt span,
.block .artxt .lead {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

.block .artxt dt,
.block.reverse .artxt dt {
	position: relative;
	width: 200%;
	color: transparent;
	transform: none;
	text-align: left;
}

.block.reverse .artxt dt {
	text-align: right;
	transform: translateX(-50%)
}

.block .artxt dd {
	padding-right: 3rem;
	box-sizing: border-box;
}

.block.reverse .artxt dd {
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

.block-dt-base,
.block-dt-photo {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.block.reverse .block-dt-base,
.block.reverse .block-dt-photo {
	align-items: flex-end;
}

.block-dt-base {
	z-index: 1;
	color: var(--block-dt-base-color);
}

.block-dt-photo {
	z-index: 2;
	color: var(--block-dt-photo-color);
	clip-path: inset(0 100% 0 0);
}

.block-dt-real {
	position: relative;
	z-index: 0;
	display: block;
	visibility: hidden;
	pointer-events: none;
}

.block .artxt dt h1,
.block .artxt dt h2,
.block .artxt dt h3,
.block .artxt dt h4,
.block .artxt dt p,
.block .artxt dt .lead,
.block .artxt dt span {
	color: inherit;
}

.block .block-media {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.block .block-media img,
.block .block-media video,
.block .block-media .responsive-img,
.block .block-media .responsive-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.block .block-media .media-empty {
	width: 100%;
	min-height: 24rem;
}

body.simple-edit-mode .block .block-media-edit-trigger {
	position: absolute !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	left: 50% !important;
	z-index: 999999 !important;
	transform: translate(-50%, -50%) !important;
}

/* block mobile */
@media (max-width: 767px) {
	.block,
	.block.reverse {
		flex-direction: column-reverse;
		width: 100%;
		overflow: hidden; /* Evita cualquier desborde lateral en el viewport */
	}

	.block figure figcaption {
		bottom: 10%;
		transform: rotate(-90deg);
		transform-origin: top left;
	}

	.block > article:nth-of-type(1),
	.block > article:nth-of-type(2),
	.block.reverse > article:nth-of-type(1),
	.block.reverse > article:nth-of-type(2) {
		position: relative;
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.block > article:nth-of-type(1) {
		margin-top: -6rem;
		z-index: 20;
	}

	.block.reverse {
		flex-direction: column;
	}

	.block.reverse > article:nth-of-type(2) {
		margin-top: -6rem;
		z-index: 20;
	}

	.block .artxt,
	.block.reverse .artxt {
		position: relative;
		width: 100%;
		max-width: 100%;
		padding: 0 1.25rem 2rem;
		box-sizing: border-box;
		transform: none;
		z-index: 20;
	}

	.block .artxt dt,
	.block.reverse .artxt dt {
		position: relative;
		width: 100%;
		max-width: 100%;
		color: transparent;
		transform: none;
		box-sizing: border-box;
	}

	.block.reverse .artxt dt {
		text-align: right;
	}

	.block .artxt dd,
	.block.reverse .artxt dd {
		width: 100%;
		max-width: 100%;
		padding: 0;
		color: rgb(var(--n) / 1);
		box-sizing: border-box;
	}
}