/* ROUTES CARDS */

.routes-cards {
	display: flex;
	flex-wrap: wrap;
	row-gap: 3rem;
	column-gap: 3.1rem;
	cursor: pointer;
}

.routes-cards a > * {
	pointer-events: none;
}
.routes-cards .card-route {
	position: relative;
	flex: 0 1 100%;
	border-radius: 2rem;
	background-color: var(--azul-cards);
	box-shadow: 0px 12px 16px -4px rgba(0, 0, 0, 0.21), 0px 4px 6px -2px rgba(65, 75, 90, 0.1);
	color: var(--crema-fondo);
}
.routes-cards .card-route .img-box {
	height: 17.3rem;
	margin: 0;
	border-radius: 2rem 2rem 0 0;
}

.routes-cards .card-route .content {
	padding: 0 1.6rem 1.6rem;
}
.routes-cards .card-route .content .has-label-font-size {
	margin-bottom: 0.6rem;
	text-transform: uppercase;
}
.routes-cards .card-route .content .has-m-font-size {
	margin-bottom: 1.8rem;
}
.routes-cards .card-route .content ul {
	position: relative;
	padding: 1.2rem 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0.8rem;
	list-style: none;
}
.routes-cards .card-route .content ul::before,
.routes-cards .card-route .content ul::after {
	content: "";
	height: 1px;
	opacity: 0.5;
	position: absolute;
	left: -0.3rem;
	right: -0.3rem;
	background: var(--crema-fondo);
}
.routes-cards .card-route .content ul::before {
	top: 0;
}
.routes-cards .card-route .content ul::after {
	bottom: 0;
}
.routes-cards .card-route .content ul li {
	border-left: 1px solid var(--rojo);
	padding: 0.4rem 0.8rem;
	font-size: 1.4rem;
	font-weight: var(--font-weight-medium);
	line-height: 142.857%;
	margin-bottom: 0.8rem;
	width: fit-content;
}
.routes-cards .card-route .content .has-xs-font-size {
	margin: 1.2rem 0;
}
.routes-cards .card-route .content .buttons {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.routes-cards .card-route .content .buttons .bttn.filled {
	color: var(--azul-oscuro);
}
@media only screen and (min-width: 961px) {
	.routes-cards:not(.more-than-two) {
		justify-content: center;
	}
	.routes-cards .card-route {
		transition: all var(--anim-delay);
	}
	.routes-cards.more-than-two .card-route {
		flex: 1 1 calc(25% - 2.35rem);
	}
	.routes-cards:not(.more-than-two) .card-route {
		flex: 0 1 calc(50% - 2.35rem);
	}
	.routes-cards .card-route .img-box {
		height: 26.4rem;
		transition: all var(--anim-delay);
	}
	.routes-cards .card-route .img-box::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 26.4rem;
		background: linear-gradient(182deg, rgba(32, 44, 58, 0) 80.31%, #324a66 98.55%);
		z-index: var(--z-index-lowest);
		pointer-events: none;
	}
	.routes-cards .card-route .img-box:not(.hover)::after {
		background: linear-gradient(180deg, rgba(50, 74, 102, 0) 73.78%, #324a66 100%);
	}
	.routes-cards .card-route .img-box.hover::after {
		background: linear-gradient(180deg, rgba(32, 44, 58, 0) 80.27%, rgba(32, 44, 58, 0.42) 87.37%, #202c3a 100%);
	}
	.routes-cards .card-route .img-box.hover {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: var(--z-index-lowest);
		opacity: 0;
		pointer-events: none;
	}
	.routes-cards .card-route .content {
		padding: 0.6rem 3rem 3rem;
	}
	.routes-cards .card-route .content .has-m-font-size {
		margin-bottom: 1.8rem;
	}
	.routes-cards .card-route .content ul {
		padding: 1.6rem 0;
		gap: 1.2rem 0;
		justify-content: flex-start;
	}
	.routes-cards .card-route .content ul::before {
		left: 0;
		right: 0;
	}
	.routes-cards .card-route .content ul::after {
		opacity: 0;
	}
	.routes-cards .card-route .content ul li {
		padding: 0.4rem 1.6rem;
		margin-bottom: 0;
		flex: 0 1 33%;
		min-width: fit-content;
	}
	.routes-cards .card-route .content .has-xs-font-size {
		margin: 1.4rem 0;
	}
	.routes-cards .card-route .content .buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.routes-cards .card-route .content .buttons .bttn {
		text-align: center;
	}
	.routes-cards:not(.more-than-two) .card-route:nth-child(2) .content :is(.has-label-font-size, .has-m-font-size) {
		text-align: right;
	}
	.routes-cards:not(.more-than-two) .card-route .content .buttons .bttn {
		width: calc(50% - 0.35rem);
	}
	.routes-cards.more-than-two .card-route .content .buttons .bttn {
		width: 100%;
	}
	.routes-cards .card-route:hover {
		background-color: var(--azul-oscuro);
		box-shadow: 0px 20px 30.9px -4px rgba(0, 0, 0, 0.3), 0px 8px 8px -4px rgba(65, 75, 90, 0.05);
	}
	.routes-cards .card-route:hover .img-box.hover {
		opacity: 1;
	}
	.routes-cards .card-route:hover .img-box:not(.hover) {
		opacity: 0;
	}
	.routes-cards .card-route.active,
	.routes-cards .card-route:hover {
		background-color: var(--azul-oscuro);
		box-shadow: 0px 20px 30.9px -4px rgba(0, 0, 0, 0.3), 0px 8px 8px -4px rgba(65, 75, 90, 0.05);
	}
	.routes-cards .card-route.active .img-box.hover,
	.routes-cards .card-route:hover .img-box.hover {
		opacity: 1;
	}
	.routes-cards .card-route:hover .img-box:not(.hover) {
		opacity: 0;
	}
}

@media only screen and (min-width: 0) and (max-width: 960px) {
	.routes-cards {
		text-align: center;
	}
	.routes-cards .card-route::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 17.5rem;
		background: linear-gradient(182deg, rgba(32, 44, 58, 0) 80.31%, #324a66 98.55%);
		z-index: var(--z-index-lowest);
		pointer-events: none;
	}
}

/* @end */

.editor-styles-wrapper .routes-cards.more-than-two,
.editor-styles-wrapper .routes-cards:not(.more-than-two) {
	justify-content: flex-start;
}
.editor-styles-wrapper .routes-cards.more-than-two .card-route,
.editor-styles-wrapper .routes-cards:not(.more-than-two) .card-route {
	flex: 0 1 calc(50% - 2.35rem);
}
.editor-styles-wrapper .routes-cards .card-route .content .buttons .bttn {
	pointer-events: none;
}