@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,700&display=swap");

.cartelera__header {
	width: 100%;
	position: relative;
	display: none;
	justify-content: space-between;
	align-items: center;
	margin: 40px 0;

	&.active {
		display: flex;
	}
	& h1 {
		color: var(--naranja);
		font-size: 2em;
	}
	& .cartelera__btns {
		display: flex;
		gap: 20px;

		& button {
			padding: 10px 12px;
			border: none;
			outline: none;
			cursor: pointer;
			border-radius: 10px;
			line-height: 0 !important;
			font-weight: bold;
			background: #f2f2f2;

			&.active {
				background: var(--naranja);
				color: white;
			}
		}
	}
}

#carteleraAll,
#carteraFull {
	display: none;

	&.active {
		display: block;
	}
}

#carteraFull {
	width: 100%;
	position: relative;

	& .cartelera__full {
		position: relative;
		width: 100%;

		& .cartelera__full_img {
			position: relative;
			z-index: 2;

			& img {
				width: 100%;
			}
		}

		& h3 {
			width: 100%;
			position: absolute;
			top: 50%;
			color: white;
			text-align: center;
			z-index: 6;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 2.5em;
		}

		&::before {
			content: "";
			position: absolute;
			z-index: 5;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}

		& .cartelera__full_back {
			position: absolute;
			background: var(--gris);
			display: flex;
			width: auto;
			gap: 5px;
			font-size: 1em;
			color: white;
			padding: 10px 12px;
			height: 40px;
			top: 20px;
			left: 20px;
			z-index: 10;
			border-radius: 57px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			transition: all ease 0.3s;

			&:hover {
				background-color: var(--naranja);
			}
			& img {
				width: auto;
				height: 15px;
			}
		}
	}
	& .cartelera__full_detail {
		position: relative;
		display: flex;
		align-items: center;
		margin: 40px auto;
		width: 90%;
		gap: 20px;

		& .cartelera__full_detail_img {
			width: 60%;
			max-width: 800px;

			& img {
				width: 100%;
			}
		}
		& .cartelera__full_detail_inf {
			position: relative;
			width: 40%;
			text-align: center;

			& h4 {
				color: var(--naranja);
				font-size: 2em;
				margin-bottom: 40px;
			}

			& .cartelera__full_detail_inf_items {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				margin-bottom: 20px;
				text-align: center;
				gap: 20px;

				& > div {
					& img {
						width: auto;
						height: 25px;
					}
					p {
						font-size: 1em;
						margin-top: 10px;
					}
				}
			}
			& .cartelera__full_btns {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20px;
				margin-top: 20px;

				& a {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 15px 12px;
					color: white;
					text-decoration: none;
					background: var(--naranja);
					gap: 8px;
					border-radius: 15px;
					transition: all ease-in 0.3s;

					&:hover {
						background-color: var(--gris);
					}

					& img {
						width: auto;
						height: 15px;
					}
				}
			}
		}
	}

	& .cartelera__full_tyc {
		position: relative;
		margin: 20px 0 40px 0;

		& p {
			font-size: 0.8em;
			margin: 5px 0;
			text-align: justify;
			text-wrap: pretty;
		}
	}
}
.cartelera__access {
	width: 100%;
	padding: 40px 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	font-family: "Montserrat", sans-serif;

	& article {
		width: 100%;
		border-radius: 20px;
		overflow: hidden;
		border: 1px solid #ccc;
		display: none;

		&.active {
			display: block;
		}

		&:hover {
			& .cartelera_img {
				& img {
					transform: scale(1.1);
				}
			}
		}

		& header {
			position: relative;
			width: 100%;
			height: auto;
			overflow: hidden;
			color: white;

			& .cartelera_img {
				position: relative;

				&::before {
					content: "";
					position: absolute;
					z-index: 1;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					background: linear-gradient(
						180deg,
						rgba(0, 0, 0, 0) 0%,
						rgba(0, 0, 0, 0.4) 100%
					);
				}
				& img {
					width: 100%;
					transition: all ease 0.3s;
					object-fit: cover;
				}
			}
			& h2,
			h3,
			.cartlera__titulo {
				position: absolute;
				z-index: 5;

				& > div {
					display: none;
				}
			}
			& h2 {
				top: 15px;
				left: 0;
				padding: 10px;
				background: var(--naranja);
				font-size: 0.8em !important;
				font-weight: bold !important;
				text-transform: uppercase;
				color: white !important;
				border-top-right-radius: 6px;
				margin-left: 0 !important;
				border-bottom-right-radius: 6px;
			}
			& h3 {
				top: 15px;
				right: 0;
				padding: 10px;
				font-size: 1.2em;
				background: red;
				text-transform: uppercase;
				border-top-left-radius: 6px;
				border-bottom-left-radius: 6px;
				display: none;

				&.active {
					display: block;
				}
			}
			& .cartlera__titulo {
				bottom: 20px;
				left: 10px;

				& h1 {
					font-size: 1.2em !important;
					font-weight: bold !important;
				}
				& span {
					display: flex;
					gap: 20px;
					& p {
						font-size: 0.8em;
						margin-top: 10px;
					}
				}
			}
		}

		& main {
			width: 100%;
			position: relative;
			padding: 20px 0;

			& button {
				background: var(--naranja);
				position: relative;
				display: block;
				width: 60%;
				line-height: 0 !important;
				color: white;
				text-transform: uppercase;
				font-size: 0.8em;
				padding: 10px 15px;
				outline: none;
				border: none;
				border-radius: 6px;
				margin: 0 auto;
				cursor: pointer;
				transition: all ease 0.3s;

				&:hover {
					opacity: 0.8;
				}
				&:disabled {
					opacity: 0.5;
				}
			}
			& p {
				display: none;
			}
		}
	}
}

#carteleraStatus {
	display: none;

	&.active {
		display: block;
	}
}

@media screen and (max-width: 1520px) {
	.cartelera__access {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (max-width: 1280px) {
	#carteraFull {
		& .cartelera__full_detail {
			width: 100%;
			margin: 40px 0;
		}
	}
}
@media screen and (max-width: 990px) {
	#carteraFull {
		& .cartelera__full {
			& .cartelera__full_img {
				display: none;
			}
			& h3 {
				display: none;
			}
			& .cartelera__full_back {
				position: fixed;
				left: 50%;
				top: 90%;
				transform: translate(-50%, 0);
			}
		}
		& .cartelera__full_detail {
			flex-direction: column;

			& .cartelera__full_detail_img {
				width: 100%;
			}
			& .cartelera__full_detail_inf {
				width: 100%;
			}
		}
	}
}
@media screen and (max-width: 790px) {
	.cartelera__access {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 500px) {
	.cartelera__header {
		flex-direction: column;
		justify-content: center;
		gap: 20px;
	}
	.cartelera__access {
		grid-template-columns: repeat(1, 1fr);
	}
}

.modal_cartelera_access {
	position: fixed;
	width: 100%;
	height: 100vh;
	display: none;
	top: 0;
	left: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.7);

	&.active {
		display: block;
	}

	& .modal_cartelera_body {
		width: 100%;
		border-radius: 20px;
		max-width: 800px;
		min-height: 400px;
		background: white;
		position: absolute;
		left: 50%;
		top: 50%;
		overflow: hidden;
		transform: translate(-50%, -50%);

		& .modal_cartelera_cerrar {
			position: absolute;
			right: 20px;
			top: 20px;
			cursor: pointer;
			border-radius: 50px;
			width: 30px;
			z-index: 110;
			height: 30px;
			background: rgba(0, 0, 0, 0.6);
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all ease-in-out 0.3s;

			& img {
				width: 15px;
				position: relative;
				z-index: 120;
				filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(358deg)
					brightness(107%) contrast(101%);
			}
		}

		& .modal_cartelera_img {
			width: 100%;
			position: relative;
			overflow: hidden;
			border-radius: 20px 20px 0 0;

			&::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: linear-gradient(
					0deg,
					rgba(0, 0, 0, 0.8) 0%,
					rgba(0, 0, 0, 0) 100%
				);
			}

			& img {
				width: 100%;
			}
		}
		& .modal_cartelera_info {
			width: 100%;
			padding: 20px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			justify-content: center;
			align-items: flex-start;
			gap: 10px;
			text-align: center;
			position: absolute;
			bottom: 160px;

			& .modal__info_item {
				color: white;
				padding: 0 20px;
				height: 100px;
				border-right: 1px solid white;

				&:last-child {
					border-right: none;
				}

				& img {
					width: 30px;
					filter: invert(100%) sepia(0%) saturate(2%)
						hue-rotate(358deg) brightness(107%) contrast(101%);
				}
				& p {
					font-size: 0.8em;
					margin-top: 10px;
				}
			}
		}
		& > p {
			font-size: 1em;
			text-align: center;
			margin-top: 20px;
		}
		& .modal_cartelera_contacto {
			position: relative;
			width: 100%;
			padding: 20px;
			display: grid;
			gap: 8px;
			grid-template-columns: repeat(2, 1fr);
			justify-content: center;
			align-items: center;
			text-align: center;

			& div {
				& a {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 15px 12px;
					color: white;
					text-decoration: none;
					background: var(--naranja);
					gap: 8px;
					border-radius: 15px;
					transition: all ease-in 0.3s;

					&:hover {
						background: var(--gris);
					}

					& img {
						width: 15px;
					}
				}
			}
		}
		& .modal__terminos_btn {
			position: relative;
			display: block;
			left: 50%;
			color: var(--gris) !important;
			top: 50%;
			transform: translate(-50%, -50%);
			background: transparent;
			outline: 0;
			border: none;
			cursor: pointer;
			margin-top: 20px;
		}

		& .modal__access_terminos {
			display: none;
			width: 100%;
			position: absolute;
			height: 100%;
			background: var(--gris);
			overflow: hidden;
			z-index: 1000;
			top: 0;
			color: white;
			left: 0;
			overflow-y: auto;
			padding: 20px;

			&.active {
				display: block;
			}

			& h5 {
				text-align: center;
				margin-bottom: 10px;
			}
			& p {
				font-size: 0.8em;
				margin-top: 5px;
			}
			& button {
				color: white;
				position: relative;
				display: block;
				left: 50%;

				transform: translate(-50%, -50%);
				background: transparent;
				outline: 0;
				border: none;
				cursor: pointer;
				margin-top: 20px;
			}
		}
	}
}

@media screen and (max-width: 820px) {
	.modal_cartelera_access {
		& .modal_cartelera_body {
			width: 98%;
		}
	}
}
@media screen and (max-width: 520px) {
	.modal_cartelera_access {
		& .modal_cartelera_body {
			& .modal_cartelera_contacto {
				& div {
					& a {
						font-size: 0.8em;
					}
				}
			}
		}
	}
}
@media screen and (max-width: 440px) {
	.modal_cartelera_access {
		& .modal_cartelera_body {
			& .modal_cartelera_info {
				bottom: 160px;
			}
			& .modal_cartelera_contacto {
				& div {
					& a {
						font-size: 0.6em;
					}
				}
			}
		}
	}
}