/* tarjetas */
section.tarjetas{
	padding:3rem 18rem;
}
.tarjetas .overlay{
	position: absolute;
	inset: 0 63% 0 0;
	background: 
		linear-gradient(90deg, rgb(var(--c1)/1) 0%,  rgb(var(--c3)/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;
}

.tarjetas.comentarios-publicos .overlay{
	position: absolute;
	inset: 0 0 0 37%;
	background: 
		linear-gradient(-90deg, rgb(var(--c1)/1) 0%,  rgb(var(--c3)/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;
}

.tarjetas article{
	position:relative;
	width:100%;
}

.tarjetas article .artxt{
	width:45%;
	padding: 3rem 0;
}
.tarjetas article .artxt dt{
	width:100%;
}
.tarjetas article .artxt dt h2 {
	width:100%;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}
.tarjetas article .artxt dd{
	width:200%;
}

.tarjetas .cards-track{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	width:100%;
	overflow:hidden;
}

.tarjetas .cards-track dd{
	position:relative;
	display:flex;
	flex:0 0 28%;
	flex-direction:column;
	justify-content:flex-start;
	box-sizing:border-box;
	margin:0;
	padding:3rem;
	opacity:.65;
	transition:flex .4s cubic-bezier(.25, 1, .5, 1);
}

.tarjetas .cards-track dd .icon,
.tarjetas .cards-track dd .icon-text{
	color:rgb(var(--n) / 1);
	font-size:5rem;
	font-weight:900;
}

.tarjetas .cards-track dd.is-active{
	flex:0 0 44%;
	border-radius:.5rem;
	background-image:
		linear-gradient(110deg, rgb(var(--c2) / .9) 0%, rgb(var(--n) / .9) 100%),
		url("/assets/img/bg.webp");
	background-repeat:repeat;
	background-size:auto;
	background-attachment:fixed;
	background-position:center;
	background-blend-mode:multiply;
	color:rgb(var(--b) / 1);
	opacity:1;
}

.tarjetas .cards-track dd.is-active .icon,
.tarjetas .cards-track dd.is-active .icon-text{
	color:rgb(var(--c1) / 1);
	font-weight:900;
}

.tarjetas .cards-btn{
	position:absolute;
	top:50%;
	z-index:10;
	display:flex;
	align-items:center;
	justify-content:center;
	width:2rem;
	height:6rem;
	margin:0;
	padding:0;
	border:0;
	border-radius:.5rem;
	background:rgb(var(--c1) / .5);
	color:rgb(var(--b) / 1);
	font-size:0;
	cursor:pointer;
	transform:translateY(-50%);
}

.tarjetas .cards-btn.prev{
	left:0;
}

.tarjetas .cards-btn.next{
	right:0;
}

.tarjetas .cards-btn.hidden{
	display:none;
}

.tarjetas .cards-btn.prev::before{
	content:"‹";
	font-size:2.2rem;
	line-height:1;
}

.tarjetas .cards-btn.next::before{
	content:"›";
	font-size:2.2rem;
	line-height:1;
}

.tarjetas .cards-counter{
	position:absolute;
	right:1rem;
	bottom:.5rem;
	z-index:10;
	margin:0;
	color:inherit;
	font-size:.8rem;
	line-height:1;
	pointer-events:none;
}

.tarjetas i{
	display:block;
	width:max-content;
	margin:0 0 1rem;
	color:rgb(var(--c1) / .9);
	font-size:5rem;
	font-style:normal;
	font-weight:800;
	line-height:.8;
	text-transform:uppercase;
}

.tarjetas#all-toppings{
	color:rgb(var(--n) / 1);
}

.tarjetas#all-toppings .cards-track dd .icon,
.tarjetas#all-toppings .cards-track dd .icon-text{
	color:rgb(var(--n) / 1);
	font-size:5rem;
	font-weight:900;
}

/* comentarios públicos */
.comentarios-publicos .comentarios-publicos-cta{
	display:flex;
	justify-content:flex-start;
	width:100%;
	margin:0 0 .75rem;
}

.comentarios-publicos .comentarios-publicos-cta a,
.comentarios-publicos .comentarios-publicos-cta button{
	margin:0;
}

/* tarjetas mobile */
/* tarjetas mobile */
@media (max-width: 767px) {
	section.tarjetas {
		width: 100%;
		padding: 2rem 0;
		overflow: hidden;
		box-sizing: border-box;
		background: rgb(var(--n-d) / 1);
		color: rgb(var(--b) / 1);
	}

	.tarjetas article .artxt {
		width: 100%;
		padding: 0 1.25rem 1.5rem;
		box-sizing: border-box;
	}

	.tarjetas article .artxt dt h2 {
		width: 100%;
		max-width: 100%;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.tarjetas article .artxt dd {
		width: 100%;
	}

	section.tarjetas .cards-track {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: .5rem;
		width: 100%;
		padding: 0 .75rem;
		box-sizing: border-box;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		touch-action: pan-x pan-y;
	}

	section.tarjetas .cards-track::-webkit-scrollbar {
		display: none;
	}

	section.tarjetas dt {
		padding: 0;
	}

	/* Estado BASE (Inactivas - con !important para anular JS o reglas de desktop) */
	section.tarjetas .cards-track dd {
		flex: 0 0 auto !important;
		width: 88vw !important;
		min-width: 88vw !important;
		max-width: 88vw !important;
		margin: 0 !important;
		padding: 2rem 1.5rem;
		box-sizing: border-box;
		border-radius: .4rem;
		opacity: 0.35 !important;
		filter: blur(2px) grayscale(0.2) !important;
		transform: scale(0.96) !important;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
	}

	/* Estado ACTIVO (La que tiene la clase .is-active) */
	section.tarjetas .cards-track dd.is-active {
		z-index: 4;
		opacity: 1 !important;
		filter: blur(0px) grayscale(0) !important;
		transform: scale(1) !important;
		background: rgb(var(--b) / .85);
		color: rgb(var(--n) / 1);
	}

	section.tarjetas .cards-track dd.is-active .icon,
	section.tarjetas .cards-track dd.is-active .icon-text {
		color: rgb(var(--c1) / 1);
		font-size: 4rem;
	}

	section.tarjetas .cards-btn,
	section.tarjetas .cards-counter {
		display: none;
	}

	section.tarjetas i {
		font-size: 3rem;
	}
}