:root {
	--dd-overlay: rgba(0, 0, 0, 0.75);
	--dd-background: #ffffff;
	--dd-text1: #454545 !important;
	--dd-text2: #ffffff;
	--dd-primary: #fd8926;
	--dd-gradient: linear-gradient(45deg, #fd8926 0%, #fd8926 100%) !important;
	--dd-radius: 0.35em;
	--dd-shadow: 0 0 2.5em rgba(0, 0, 0, 0.1);
	--dd-range: rgba(0, 0, 0, 0.05);
}
.promociones_menu_destinos {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 40px 0;

	& ul {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 27px;
		font-size: 0.75em;
		padding: 18px 12px;
		text-transform: uppercase;
		color: #d0c9d6;
		border-bottom: 1px solid rgba(208, 201, 214, 1);

		& li {
			list-style: none;
			cursor: pointer;
			position: relative;
			font-weight: 600 !important;
			padding: 12px 8px;

			&.activo {
				position: relative;
				color: var(--gris);
				font-weight: bold !important;

				&::before {
					content: "";
					position: absolute;
					bottom: -18px;
					left: 0;
					width: 100%;
					height: 4px;
					background: var(--naranja);
					border-top-right-radius: 5px;
					border-top-left-radius: 5px;
				}
			}
		}
	}
}
.promociones_destinos__fiesta {
	width: 100%;
	max-width: 1600px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: center;

	& article {
		width: 350px;
		height: 620px;

		perspective: 1000px;

		&.hide {
			display: none;
		}

		&.activo {
			display: block;
		}

		&.active .article-card-inner {
			transform: rotateY(180deg);
		}

		& .article-card-inner {
			position: relative;
			width: 100%;
			height: 100%;
			transition: transform 0.8s;
			transform-style: preserve-3d;

			& .article-card-front,
			.article-card-back {
				position: absolute;
				width: 100%;
				height: 100%;
				-webkit-backface-visibility: hidden; /* Safari */
				backface-visibility: hidden;
				border-radius: 20px;
				border: 1px solid rgba(208, 201, 214, 1);
				overflow: hidden;
			}

			& .article-card-back {
				background-color: var(--gris);
				color: white;
				transform: rotateY(180deg);
				padding: 20px 10px;

				& .close {
					position: absolute;
					width: 20px;
					display: flex;
					justify-content: center;
					border-radius: 50%;
					align-items: center;
					height: 20px;
					cursor: pointer;
					background: white;
					right: 10px;
					top: 10px;

					& img {
						width: 10px;
					}
				}
				& h1 {
					text-align: center;
					font-size: 1em;
				}
				& p {
					text-align: justify;
					font-size: 0.7em;
					margin-top: 5px;
				}
			}

			& .article-card-front {
				background: #f7f7f7;
				& header {
					position: relative;
					width: 100%;
					z-index: 0;
					height: 232px;

					& .article_promocion_imagen {
						& img {
							width: 100%;
						}
					}
					& .article_mensaje {
						position: absolute;
						top: 20px;
						right: 0;
						z-index: 2;

						& h2 {
							color: #444444;
							font-size: 0.8em;
							font-weight: bold;
							text-transform: uppercase;
							padding: 12px 8px;
							background: #fdc601;
						}
					}
				}
				& .article_promocion_informacion {
					padding: 20px 12px;
					width: 100%;
					height: 250px;
					color: #606060 !important;
					& h3 {
						font-size: 1em;
						font-weight: bold !important;
						color: #606060 !important;
					}
					& h4 {
						font-weight: 600 !important;
						margin-top: 5px;
					}
					& h1 {
						margin: 20px 0;
						font-size: 1em;
						font-weight: bold !important;
						color: var(--naranja);
					}
					& p{
						font-weight: 500 !important;
					} 
					& .informacion_fechas {
						margin-top: 20px;
						font-weight: 500 !important;

						& p {
							font-size: 0.8em;
							font-weight: 300;

							& span {
								color: var(--naranja);
							}
						}
					}
				}
				& footer {
					width: 100%;
					padding: 20px 12px;
					background: transparent !important;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;

					& .btn_footer_reserva {
						font-family: "Montserrat", sans-serif;
						padding: 20px;
						background: var(--naranja);
						color: white;
						height: auto;
						line-height: 0 !important;
						font-size: 0.8em;
						font-weight: bold !important;
						border: none;
						text-transform: uppercase;
						border-radius: 5px;
						display: flex;
						justify-content: center;
						cursor: pointer;
					}
					& hr {
						margin: 15px 0;
						width: 95%;
						height: 0;
						border: medium none;
						border-top: 1px dashed var(--naranja);
					}
					& button:last-child {
						color: #606060;
						background: transparent !important;
						border: none;
						font-size: 0.7em;
						font-family: "Montserrat", sans-serif;
						cursor: pointer;
					}
				}
			}
		}
	}
}
@media screen and (max-width: 1140px) {
	.promociones_menu_destinos {
		& ul {
			flex-wrap: wrap;
			border-bottom: none;
		}
	}
}