/* o-txt */
.o-txt {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 4rem 0;
	overflow: visible;
}

.o-txt .overlay {
	position: absolute;
	inset: 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;
	z-index: 0;
}

.o-txt article {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 4rem;
	box-sizing: border-box;
}

.o-txt .artxt {
	display: grid;
	grid-template-columns: repeat(var(--o-txt-columns, 3), minmax(0, 1fr));
	gap: 3rem;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-txt dd {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.o-txt-block {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	min-width: 0;
}

.o-txt-block h4 {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	color: rgb(var(--c2) / 1);
}

.o-txt-block p {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

/* o-txt mobile */
@media (max-width: 767px) {
	.o-txt {
		padding: 2rem 0;
		overflow: hidden;
	}

	.o-txt article {
		padding: 0;
	}

.o-txt .artxt {
		display: flex;
		flex-flow: row nowrap;
		gap: 0;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		
		/* Modificar estas líneas: */
		touch-action: pan-x pan-y;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}
	
	.o-txt .artxt::-webkit-scrollbar {
		display: none;
	}
	
	.o-txt dd {
		flex: 0 0 100vw;
		width: 100vw;
		padding: 0 1.25rem;
		box-sizing: border-box;
		
		/* Añadir esta línea para que cada tarjeta encaje de forma limpia: */
		scroll-snap-align: start;
	}
}