/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@font-face {
	font-family: 'Hanken-Grotesk-Bold';
	src: url('../fonts/HankenGrotesk-Bold.woff2') format('woff2'),
		url('../fonts/HankenGrotesk-Bold.woff') format('woff'),
		url('../fonts/HankenGrotesk-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Hanken-Grotesk-SemiBold';
	src: url('../fonts/HankenGrotesk-SemiBold.woff2') format('woff2'),
		url('../fonts/HankenGrotesk-SemiBold.woff') format('woff'),
		url('../fonts/HankenGrotesk-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Hanken-Grotesk-Medium';
	src: url('../fonts/HankenGrotesk-Medium.woff2') format('woff2'),
		url('../fonts/HankenGrotesk-Medium.woff') format('woff'),
		url('../fonts/HankenGrotesk-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montecatini-Pro-Normale-Bold';
	src: url('../fonts/MontecatiniPro-NormaleBold.woff2') format('woff2'),
		url('../fonts/MontecatiniPro-NormaleBold.woff') format('woff'),
		url('../fonts/MontecatiniPro-NormaleBold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
/* Fonts */
:root {
	--default-font: 'Hanken-Grotesk-Medium', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--hg-bold: 'Hanken-Grotesk-Bold', "Helvetica Neue", Arial, sans-serif;
	--hg-semibold: 'Hanken-Grotesk-SemiBold', "Helvetica Neue", Arial, sans-serif;
	--hg-medium: 'Hanken-Grotesk-Medium', "Helvetica Neue", Arial, sans-serif;
	--Montecatini-bold: 'Montecatini-Pro-Normale-Bold', "Helvetica Neue", Arial;
}

/* Colors */
:root {
	--background-color: #ffffff;
	--default-color: #222B38;
	--secondtext-color: #586477;
	--accent-color: #ff0000;
	--primary-color: #ff0000;
	--white-color: #ffffff;
	--black-color: #000000;
	--lightgrey-color: #f1f1f1;
	--mediumgrey-color: #dddddd;
	--grey-color: #A9B3C3;
	--darkgrey-color: #778396;
	--darlblue-color: #3c424d;
}

:root {
	scroll-behavior: smooth;
}


/*--------------------------------------------------------------
# Estilos general
--------------------------------------------------------------*/
body {
	color: var(--default-color);
	background-color: var(--background-color);
	font-family: var(--default-font);
}

a {
	color: var(--accent-color);
	text-decoration: none;
	transition: 0.3s;
}

a:hover {
	color: color-mix(in srgb, var(--accent-color), transparent 25%);
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--default-color);
	font-family: var(--default-font);
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
	color: var(--secondtext-color);
	background-color: rgba(255, 255, 255, .90);
	backdrop-filter: blur(5px);
	padding: 15px 0;
	transition: all 0.5s;
	z-index: 997;

	.logo img {
		max-height: inherit;
	}

	.dropdown {
		position: relative;
		display: inline-block;

		button {
			background-color: transparent;
			color: var(--white-color);
			padding: 10px;
			border: solid 1px transparent;
			border-radius: 5px;
			cursor: pointer;
			font-size: 16px;
			text-align: left;
			min-width: auto;
			display: flex;
			align-items: center;
			gap: 10px;

			span {
				display: block;
				border-radius: 50%;
				width: 22px;
				height: 22px;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
			}

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

		}

		ul {
			display: none;
			position: absolute;
			background-color: var(--white-color);
			border: 1px solid var(--mediumgrey-color);
			margin: 0;
			padding: 0;
			list-style: none;
			width: auto;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			z-index: 1000;

			li {
				padding: 10px;
				cursor: pointer;
				display: flex;
				align-items: center;
				gap: 10px;

				span {
					display: block;
					border-radius: 50%;
					width: 22px;
					height: 22px;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
				}

				:hover {
					background-color: var(--lightgrey-color);
				}

			}

		}

		&.open ul {
			display: block;
		}

	}

	.btn-text.volver-mobile {
		font-size: 20px;
		display: none;

		i {
			color: var(--primary-color);
		}

	}

	.btn-text {
		color: var(--secondtext-color);
		text-decoration: none;
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 120%;

		&:hover {
			color: var(--darlblue-color);
			text-decoration: underline;
		}

	}

	.btn-login,
	.btn-editaccount,
	.btn-exit {
		display: inline-block;
		border: solid 1px var(--primary-color);
		color: var(--primary-color);
		display: inline-flex;
		width: auto;
		padding: 8px 12px;
		align-items: center;
		flex-shrink: 0;
		margin-left: .5em;
		margin-right: .5em;

		&:hover {
			border: solid 1px var(--secondtext-color);
			color: var(--white-color);
			background-color: var(--secondtext-color);
		}

		span {
			margin-left: 5px;
		}

	}

	.btn-exit {

		i {
			font-size: 16px;
		}

	}

}

@media (max-width: 768px) {

	.header {
		box-shadow: 0px 4px 4px 0px rgba(34, 43, 56, 0.20);

		.btn-text.volver-mobile {
			display: block;
		}

		.btn-text {
			display: none;
		}

		.navmenu {
			display: none;
		}

		.logo {
			width: 100%;
			display: flex !important;
			flex-direction: row;
			justify-content: flex-start;

			img {
				max-height: 40px;
				margin-right: 0;
				margin-left: 5px;
			}
		}

		.btn-login,
		.btn-editaccount,
		.btn-exit {
			border: solid 1px transparent;
			border-radius: 5px;
			margin-left: 0;
			margin-right: 0;

			span {
				display: none;
			}

			&:hover {
				background-color: var(--lightgrey-color);
				border: solid 1px transparent;
			}

		}

		.btn-exit {
			padding: 4px 8px;

			i {
				font-size: 22px;
			}

			&:hover {
				background-color: var(--lightgrey-color);
				border: solid 1px transparent;

				i {
					color: var(--primary-color);
				}
			}

		}

	}

}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
	color: var(--white-color);
	background-color: var(--black-color);
	padding-bottom: 50px;
	position: relative;
	font-family: var(--hg-bold);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 80%;

	.footer-top {
		padding-top: 50px;
	}

	.social-links {
		justify-content: center;
		align-items: center;

		a {
			background-color: var(--white-color);
			border: solid 1px var(--white-color);
			width: 40px;
			height: 40px;
			margin-right: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50px;
			border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
			font-size: 16px;
			color: color-mix(in srgb, var(--default-color), transparent 20%);
			transition: 0.3s;

			i {
				color: var(--black-color);
				font-size: 22px;
				font-weight: normal;
			}

			&:hover {
				border: solid 2px var(--primary-color);
			}

			&:last-child {
				margin-right: 0;
			}

		}

	}

	.footer-links {

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-shrink: 0;
			align-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 20px;

			li {

				a {
					color: var(--white-color);
					text-align: center;
					font-family: var(--Montecatini-bold);
					font-size: 16px;
					font-style: normal;
					font-weight: 700;
					line-height: 80%;

					&:hover {
						color: var(--primary-color);
					}

				}

			}

		}

	}

	.footer-legales {

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-shrink: 0;
			align-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 20px;

			li {
				a {
					color: var(--white-color);
					font-family: var(--hg-bold);
					font-size: 16px;
					font-style: normal;
					font-weight: 700;
					line-height: 80%;

					&:hover {
						color: var(--primary-color);
					}
				}
			}
		}
	}

	.ftext-izq {
		text-align: left;
	}

	.ftext-der {
		p {
			text-align: right;
		}
	}

}

@media (max-width: 990px) {

	.footer {
		.social-links {
			a {
				margin-right: 15px;
				font-size: 30px;
			}
		}

		.ftext-izq {
			text-align: center;
		}

		.ftext-der {
			p {
				text-align: center;
			}
		}

	}

}


/*--------------------------------------------------------------
# Section Home
--------------------------------------------------------------*/
.btn-primary {
	display: flex;
	padding: 14px 35px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 0;
	border: 1px solid var(--primary-color);
	background: var(--primary-color);
	color: var(--white-color);
	text-align: center;
	font-family: var(--Montecatini-bold);
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px;
	text-transform: uppercase;
	transition: ease .3s;
	margin: 1rem auto;

	&:hover {
		border: 1px solid var(--primary-color);
		background: var(--white-color);
		color: var(--primary-color);
	}

}

.btn-secondary {
	display: flex;
	padding: 14px 35px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 0;
	border: 1px solid var(--primary-color);
	background: var(--white-color);
	color: var(--primary-color);
	text-align: center;
	font-family: var(--Montecatini-bold);
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px;
	text-transform: uppercase;
	transition: ease .3s;
	margin: 1rem 0;

	&:hover {
		border: 1px solid var(--primary-color);
		background: var(--primary-color);
		color: var(--white-color);
	}

}

.home-section {
	scroll-margin-top: 88px;
	overflow: clip;
	padding-bottom: 60px;

	.h1,
	.h2 {
		display: flex;
		padding: 32px 0px 24px 0px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		color: var(--default-color);
		text-align: center;
		font-family: var(--Montecatini-bold);
		font-size: 48px;
		font-style: normal;
		font-weight: 700;
		line-height: 80%;
	}

	.h2 {
		font-size: 37px;
	}

	.hero {
		width: 100%;
		min-height: 550px;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		align-content: center;
		justify-content: flex-end;
		margin: 1em 0;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;

		.hero-video {

            width: 1355px;
            height: 550px;
            margin: 0 auto;
            position: relative;
            background-color: black;
            overflow: hidden;
			z-index: 2;

			video {
				width: 100%;
				height: auto;
			}

			.youtube-lazyload {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			
				.youtube-lazyload-poster {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: auto;
					object-fit: cover;
					transition: opacity 1s ease-in-out;
					opacity: 1;
					display: block;
					z-index: 2;
					transform: scale(1.4);

					&.fade-out {
						opacity: 0;
						pointer-events: none;
					}

				}

				.youtube-player-container {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}

				iframe {
					width: 100%;
					height: 100%;
					transform: scale(1.75);
				}

				.replay-button {
					position: absolute;
					/* modificar para cuando se quiera ver a top:30px right:30px */
					top: -100px;
					right: -100px;
					z-index: 3;
					background-color: rgba(0, 0, 0, 0.6);
					color: white;
					border: 1px solid rgba(255, 255, 255, 0.5);
					border-radius: 50%;
					width: 50px;
					height: 50px;
					font-size: 24px;
					line-height: 50px;
					text-align: center;
					cursor: pointer;
					display: none;
					transition: background-color 0.3s ease;
					z-index: 999999;
				}

				.replay-button:hover {
					background-color: rgba(0, 0, 0, 0.8);
				}

			}

		}

		.hero-img {
			position: absolute;
			width: 100%;
			height: auto;
			max-height: 550px;
			overflow: hidden;
			top: 0;
			left: 0;
			z-index: 1;

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 101%;
				height: 100%;
				background-color: rgba(0, 0, 0, .25);
				z-index: 2;
			}

			img {
				width: 100%;
			}

		}

		.hero-content {
			position: absolute;
			padding: 2em;
			text-align: center;
			z-index: 3;
			bottom: 140px;
		}

		h4.hero-date,
		h3.hero-title {
			color: var(--white-color);
			text-align: center;
			font-family: var(--Montecatini-bold);
			font-size: 18px;
			font-style: normal;
			font-weight: 700;
			line-height: 22px;
			text-transform: uppercase;
			text-wrap: balance;
		}

		h3.hero-title {
			font-size: 34px;
			margin: .5em 1em 1em 1em;
			line-height: 36px;
			text-wrap: balance;
		}

		.hero-description {
			color: var(--white-color);
			text-align: center;
			font-family: var(--hg-semibold);
			font-size: 18px;
			font-style: normal;
			font-weight: 600;
			line-height: 120%;
			max-width: 574px;
			width: 100%;
			margin: .5em auto;
			min-height: 30px;
			text-wrap: balance;
		}

		.btn-primary {
			display: inline-flex;
		}

	}

	.hero>* {
		position: relative;
		z-index: 2;
	}

}

@media (max-width: 1199px) {

	.home-section {
		scroll-margin-top: 66px;
	}

}

@media (max-width: 990px) {

	.home-section {
		.hero {
			.hero-video {
				video {
					width: auto;
					height: 100%;
				}
			}
		}
	}

}

@media (max-width: 768px) {

	.home-section {
		.hero {
			width: 95%;
			margin: .4em auto;
			justify-content: flex-end;
			padding-bottom: 3em;
			min-height: 395px;
			overflow: hidden;

			.hero-img {
				height: auto;
				overflow: hidden;
			}

			.hero-content {
                padding: 1em;
				bottom: 60px;
            }

		}

		h4.hero-date {
			font-size: 14px;
			line-height: 22px;
		}

		h3.hero-title {
			font-size: 30px !important;
			margin: .3em .2em !important;
			line-height: 100%;
		}

		.hero-description {
			font-size: 14px !important;
		}

	}

}

@media (max-width: 520px) {

	.home-section {
		.hero {
			.hero-content {
				padding: 2em;
				bottom: inherit;
			}

			h4.hero-date, h3.hero-title,.hero-description {
				text-shadow: 1px 1px 1px rgb(0 0 0 / 45%);
			}

		}

	}

}


@media (max-width: 420px) {

	.home-section {
        h3.hero-title {
            font-size: 24px !important;
            line-height: 1 !important;
        }
    }
}

/*--------------------------------------------------------------
# Slider Swipe Cards Sorteos
--------------------------------------------------------------*/
.card-content {
	margin: 1rem 0;
	padding-left: 15px;
	padding-right: 15px;

	&.dnone {
		display: none;
	}

	.card-content-int {
		padding-left: 45px;

		.card-sorteos {
			position: relative;
			width: 340px;
			height: 420px;
			min-height: 335px;
			flex-shrink: 0;
			border: solid 1px var(--grey-color);
			padding: 8px;

			.card-sorteos-head {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				gap: 8px;

				.head-dia {
					width: auto;

					.txt-dia {
						color: var(--default-color);
						text-align: center;
						font-family: var(--Montecatini-bold);
						font-size: 34px;
						font-style: normal;
						font-weight: 700;
						line-height: 100%;
						text-transform: uppercase;
					}

				}

				.head-mes {
					width: 100%;

					.txt-mes {
						display: block;
						color: var(--default-color);
						text-align: left;
						font-family: var(--hg-bold);
						font-size: 18px;
						font-style: normal;
						font-weight: 700;
						line-height: 1;
					}

					.txt-dia {
						display: block;
						color: var(--darkgrey-color);
						text-align: left;
						font-family: var(--hg-bold);
						font-size: 14px;
						font-style: normal;
						font-weight: 700;
						line-height: 1;
					}
				}

				.head-hora {
					width: auto;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-items: center;
					gap: 4px;
					justify-content: center;

					i {
						color: var(--primary-color);
						font-weight: bold;
						width: 18px;
						height: 18px;
						font-size: 18px;
						line-height: 0;
					}

					.txt-hora {
						color: var(--default-color);
						text-align: left;
						font-family: var(--hg-bold);
						font-size: 22px;
						font-style: normal;
						font-weight: 600;
						line-height: 120%;
					}

				}

			}

			.card-sorteos-body {
				padding: 5px 15px;

				a {
					display: block;

					.body-imagen {
						min-height: 200px;
						width: 100%;
						background-position: center center !important;
						background-size: cover !important;
						background-repeat: no-repeat !important;
						margin-bottom: 10px;
						aspect-ratio: 16 / 9;
					}

					.h5 {
						color: var(--default-color);
						font-family: var(--hg-bold);
						font-size: 22px;
						font-style: normal;
						font-weight: 700;
						line-height: 120%;
					}

					p {
						color: var(--darkgrey-color);
						font-family: var(--hg-medium);
						font-size: 14px;
						font-style: normal;
						font-weight: 500;
						line-height: 110%;
					}

				}

			}

			.btn-primary-int {
				position: absolute;
				bottom: 10px;
				left: 20px;
				display: inline-flex;
				padding: 12px 30px;
				justify-content: center;
				align-items: center;
				border-radius: 0;
				border: 1px solid var(--primary-color);
				background: var(--primary-color);
				color: var(--white-color);
				text-align: center;
				font-family: var(--Montecatini-bold);
				font-size: 16px;
				font-style: normal;
				font-weight: 700;
				line-height: 16px;
				text-transform: uppercase;
				transition: ease .3s;
				margin: .5rem 0;
				width: auto;
				flex-direction: row;
				flex-wrap: nowrap;

				&:hover {
					border: 1px solid var(--primary-color);
					background: var(--white-color);
					color: var(--primary-color);
				}

			}

		}

	}

}


/*--------------------------------------------------------------
# Cards Sorteos sin Slider 
--------------------------------------------------------------*/
.card-content-int.center {
	padding-left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;

	.card-sorteos {
		margin: 0 20px 1.8rem;
	}

}

@media (max-width: 1200px) {

	.card-content {
		.card-content-int {
			.card-sorteos {
				width: 100%;
				height: 450px;
				max-width: 300px;
			}
		}
	}

}

@media (max-width: 990px) {
	.card-content.mnone {
		/*display: none;*/
	}

	.card-content.dnone {
		display: block;
		margin-top: 0;
	}

	.card-content {
		.card-content-int {
			.card-sorteos {
				width: 100%;
				height: auto;
				max-width: 100%;
				padding-bottom: 70px;
			}
		}
	}

	.card-content-int.center {
		padding: 1rem !important;
	}

}


/*--------------------------------------------------------------
# Slider Historico promociones
--------------------------------------------------------------*/
.card-content.promociones {
	position: relative;
}

.card-content.historico {
	position: relative;

	.swiper-button-next-hist,
	.swiper-button-prev-hist {
		position: absolute;
		top: 50%;
		left: 10px;
		width: calc(48px / 44* 27);
		height: 48px;
		margin-top: calc(0px -(48px/2));
		z-index: 10;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper-button-next-hist {
		right: 10px;
		left: auto;
	}

}

.card-content.otros {
	position: relative;
}

.swiper-button-next {
	right: 0px;
	left: auto;
}

.swiper-button-next:after,
.swiper-button-prev:after,
.swiper-button-next-hist:after,
.swiper-button-prev-hist:after {
	display: flex;
	width: 48px;
	height: 48px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	line-height: 0;
	transition: ease .3s;
}

.swiper-button-next:hover:after,
.swiper-button-prev:hover:after,
.swiper-button-next-hist:hover:after,
.swiper-button-prev-hist:hover:after {
	background-color: var(--white-color);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.30);
}

.swiper-button-next:after,
.swiper-button-next-hist:after {
	content: url('../img/arrow-right.svg');
}

.swiper-button-prev:after,
.swiper-button-prev-hist:after {
	content: url('../img/arrow-left.svg');
}


/* cambio para altura de la card */
.card-content.historico {
	.card-sorteos {
		height: auto;
	}

	.card-content-int {
		.card-sorteos {
			padding-bottom: 5px;
		}
	}

	.card-sorteos:has(> a.btn) {
		padding-bottom: 70px;
		height: 410px;
	}

}




@media (max-width: 1400px) {
	.card-content.promociones {
		.card-content-int {
			padding-left: 0;
		}
	}

	.card-content.historico {
		.card-content-int {
			padding-left: 0;
		}
	}
}

@media (max-width: 768px) {

	.home-section {
		padding: 0 0 70px;
	}

	.card-content.historico {
		.card-content-int {
			.swiper-slide {
				padding: 15px;
			}
		}

		.swiper-button-prev-hist {
			top: 100%;
			left: 40%;
			right: auto;
		}

		.swiper-button-next-hist {
			top: 100%;
			right: 40%;
			left: auto;
		}

	}

	.card-content.promociones {
		margin-bottom: 4rem;
		.card-content-int {
			.swiper-slide {
				padding: 15px;
			}
		}

		.swiper-button-prev {
			top: 100%;
			left: 40%;
			right: auto;
		}

		.swiper-button-next {
			top: 100%;
			right: 40%;
			left: auto;
		}

	}




}


/*--------------------------------------------------------------
# Section Promociones
--------------------------------------------------------------*/
.promo-section {
	padding: 30px 0 60px;
	scroll-margin-top: 88px;
	overflow: clip;

	.btn-text {
		color: var(--secondtext-color);
		text-decoration: none;
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 120%;

		&:hover {
			color: var(--darlblue-color);
			text-decoration: underline;
		}

	}

	.h1,
	.h2 {
		display: flex;
		padding: 32px 0px 24px 0px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		color: var(--default-color);
		text-align: center;
		font-family: var(--Montecatini-bold);
		font-size: 48px;
		font-style: normal;
		font-weight: 700;
		line-height: 80%;
	}

	.h2 {
		font-size: 37px;
	}

	.hero {
		width: 100%;
		min-height: 550px;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		align-content: center;
		justify-content: flex-end;
		margin: 1em 0;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;

		.hero-video {

			width: 1355px;
            height: 550px;
            margin: 0 auto;
            position: relative;
            background-color: black;
            overflow: hidden;
			z-index: 2;
			
			video {
				width: 100%;
				height: auto;
			}

			.youtube-lazyload {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			
				.youtube-lazyload-poster {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: auto;
					object-fit: cover;
					transition: opacity 1s ease-in-out;
					opacity: 1;
					display: block;
					z-index: 2;
					transform: scale(1.4);

					&.fade-out {
						opacity: 0;
						pointer-events: none;
					}

				}

				.youtube-player-container {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}

				iframe {
					width: 100%;
					height: 100%;
					transform: scale(1.75);
				}

				.replay-button {
					position: absolute;
					top: 20px;
					right: 20px;
					z-index: 3;
					background-color: rgba(0, 0, 0, 0.6);
					color: white;
					border: 1px solid rgba(255, 255, 255, 0.5);
					border-radius: 50%;
					width: 50px;
					height: 50px;
					font-size: 24px;
					line-height: 50px;
					text-align: center;
					cursor: pointer;
					display: none;
					transition: background-color 0.3s ease;
					z-index: 999999;
				}

				.replay-button:hover {
					background-color: rgba(0, 0, 0, 0.8);
				}

			}

		}

		.hero-img {
			position: absolute;
			width: 100%;
			height: auto;
			max-height: 550px;
			overflow: hidden;
			top: 0;
			left: 0;
			z-index: 1;

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .25);
				z-index: 2;
			}

			img {
				width: 100%;
			}

		}

		.hero-content {
			position: absolute;
			padding: 2em 2em 0 2em;
			text-align: center;
			z-index: 3;
			bottom: 200px;
		}



		h4.hero-date,
		h3.hero-title {
			color: var(--white-color);
			text-align: center;
			font-family: var(--Montecatini-bold);
			font-size: 18px;
			font-style: normal;
			font-weight: 700;
			line-height: 22px;
			text-transform: uppercase;
			text-wrap: balance;
		}

		h3.hero-title {
			font-size: 34px;
			margin: .5em 1em 1em 1em;
			line-height: 36px;
		}

		.hero-description {
			color: var(--white-color);
			text-align: center;
			font-family: var(--hg-semibold);
			font-size: 18px;
			font-style: normal;
			font-weight: 600;
			line-height: 120%;
			max-width: 574px;
			width: 100%;
			margin: .5em auto;
			min-height: 30px;
		}

	}

	.hero>* {
		position: relative;
		z-index: 2;
	}

	.content-promo {
		position: relative;
		background-color: var(--white-color);
		width: 100%;
		max-width: 760px;
		margin: -160px auto 15px;
		z-index: 99;
		padding: 2rem 2rem;
		text-align: center;
		box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.25);

		.h4 {
			color: var(--default-color);
			text-align: center;
			font-family: var(--hg-bold);
			font-size: 25px;
			font-style: normal;
			font-weight: 700;
			line-height: 120%;
		}

		.h5 {
			color: var(--default-color);
			text-align: center;
			font-family: var(--hg-bold);
			font-size: 22px;
			font-style: normal;
			font-weight: 700;
			line-height: 120%;
		}

		label {
			font-family: var(--hg-medium);
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 24px;

			a {
				text-decoration-line: underline;
				text-decoration-style: solid;
				text-decoration-skip-ink: none;
				text-decoration-thickness: auto;
				text-underline-offset: auto;
				text-underline-position: from-font;
				color: var(--secondtext-color);

				&:hover {
					color: var(--primary-color);
				}

			}

		}

		.check-wrapper {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: flex-start;
			justify-content: center;
			align-items: flex-start;
			margin: .6rem 0;

			.checkbox-forms {
				width: 20px;
				height: 20px;
				margin-right: 8px;
				accent-color: var(--primary-color);
			}

		}

		&.gracias {
			margin-bottom: 45px;
			margin-top: -220px;

			.h4 {
				font-size: 40px;
			}

			.h5 {
				font-size: 30px;
			}

			.promo-number {
				display: inline-flex;
				width: auto;
				padding: 15px 25px;
				justify-content: center;
				align-items: center;
				border: 1px solid var(--primary-color);
				background: var(--primary-color);
				color: var(--white-color);
				text-align: center;
				font-family: var(--Montecatini-bold);
				font-size: 22px;
				font-style: normal;
				font-weight: 700;
				line-height: 22px;
				text-transform: uppercase;
				margin-top: 1.5rem;
				margin-bottom: 1.5rem;
				flex-wrap: nowrap;
				flex-direction: row;
			}

			.txt-gracias {
				color: var(--default-color);
				text-align: center;
				font-family: var(--hg-semibold);
				font-size: 24px;
				font-style: normal;
				font-weight: 600;
				line-height: 132%;
			}

			.social-links {
				flex-direction: row;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				gap: 50px;
				margin-top: 1.5rem;
				margin-bottom: 1.5rem;
				text-align: center;
				line-height: 1;

				a {
					background-color: var(--primary-color);
					border: solid 1px var(--primary-color);
					color: var(--white-color);
					width: 62px;
					height: 62px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					font-size: 35px;
					transition: 0.3s;
				}

			}

			.promo-link {
				position: relative;
				display: inline-flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 10px;
				border: 1px solid var(--primary-color);
				width: 100%;
				max-width: 70%;
				padding: 14px 25px;

				span {
					color: var(--primary-color);
					text-align: center;
					font-family: var(--hg-medium);
					font-size: 16px;
					font-style: normal;
					font-weight: 500;
					line-height: 120%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				a {

					i {
						color: var(--primary-color);
					}

					.tooltip2 {
						visibility: hidden;
						background-color: black;
						color: var(--white-color);
						text-align: center;
						padding: 5px 10px;
						border-radius: 2px;
						position: absolute;
						top: 30px;
						left: 50%;
						transform: translateX(-50%);
						font-size: 12px;
						opacity: 0;
						transition: opacity 0.3s ease-in-out;
					}

					.tooltip2.show {
						visibility: visible;
						opacity: 1;
					}

				}

			}

		}

	}


	.camisetas {
		background-color: #F8F8F8;
		padding-top: 2.5rem;
		padding-bottom: 2rem;

		.container .row:hover> :not(:hover) {
			opacity: 0.6;
		}

		.row{
			justify-content: center;
			padding-left: 15px;
			padding-right: 15px;
		}

		.cardcamiseta {
			transition: ease .3s;
			margin-bottom: 2rem;

			.img {
				width: 100%;
				max-width: 100%;
				height: 580px;
				background-size: cover;
				cursor: pointer;
				transition: ease .3s;
				overflow: hidden;
				display: flex ;
				flex-direction: row;
				align-content: center;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;

				&:hover {
					transform: scale(1.02);
				}

				img {
					object-fit: cover;
				}

			}

			&.chico .img {
				background: url('../img/camiseta-hombres.png') no-repeat center center;
			}

			&.chica .img {
				background: url('../img/camiseta-mujeres.png') no-repeat center center;
			}

			&.nino .img {
				background: url('../img/camiseta-ninos.png') no-repeat center center;
			}

			.btn {
				width: auto;
				max-width: 150px;
			}

		}

	}

}

@media (max-width: 1200px) {

	.promo-section {
		.hero {
			.hero-content {
				bottom: 240px;
                padding: 0;
			}
		}
		.content-promo {
			margin: -220px auto 15px;
		}
	}


}

@media (max-width: 990px) {

	.promo-section {
		.hero {
			.hero-video {
				video {
					width: auto;
					height: 100%;
				}
			}
		}
	}

	.promo-section {
		.hero {
			.hero-content {
				bottom: 290px;
                padding: 0;
			}
		}
		.content-promo {
			margin: -310px auto 15px;

			&.gracias {
				margin-top: -290px;
			}

		}
	}


}


@media (max-width: 768px) {
	.promo-section {

		.btn-text {
			padding-left: 12px;
		}

		.hero {
			width: 95%;
			margin: .4em auto;
			justify-content: flex-end;
			padding-bottom: 120;
			min-height: 415px;
			overflow: hidden;

			h3.hero-title {
				font-size: 30px;
				margin: .2em;
			}

		}

		.content-promo {
			max-width: 75%;
			padding: 1rem;

			.h4 {
				font-size: 20px;
			}

			&.gracias {

				margin-top: -120px;

				.h4 {
					font-size: 25px;
				}

				.h5 {
					font-size: 21px;
				}

				.txt-gracias {
					font-size: 18px;
				}

				.promo-link {
					max-width: 100%;
				}

			}

		}

	}

	.promo-section {
		.hero {
			.hero-content {
				bottom: 160px;
                padding: 1em;
			}
		}
		.content-promo {
			margin: -100px auto 15px;
		}

	}

}


@media (max-width: 520px) {

	.promo-section {
		.hero {
			.hero-content {
				padding: 1em;
				bottom: 180px;
			}

			h4.hero-date, h3.hero-title,.hero-description {
				text-shadow: 1px 1px 1px rgb(0 0 0 / 45%);
			}

		}

		.content-promo {
            &.gracias {
                margin-top: -200px;
            }
        }	

	}

}

@media (max-width: 480px) {

	.promo-section {
		.content-promo {
			&.gracias {
				.social-links {
					gap: 20px;

					a {
						width: 55px;
						height: 55px;
						display: flex;
						border-radius: 100px;
						font-size: 35px;
					}

				}
			}
		}
	}

	.promo-section {
		.hero {

			.hero-content {

                padding: 1rem;
			}

			h3.hero-title {
				font-size: 25px !important;
				line-height: 1.1;
			}

		}
		.content-promo {
			margin: -170px auto 15px;
		}
	}


}


/*--------------------------------------------------------------
# Sorteo inactivo
--------------------------------------------------------------*/
.sorteo-aviso {

	.h1,
	.h2 {
		display: inline-block;
		padding: 32px 0px 24px 0px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		color: var(--default-color);
		text-align: center;
		font-family: var(--Montecatini-bold);
		font-size: 48px;
		font-style: normal;
		font-weight: 700;
		line-height: 63px;
		width: 100%;

		span {
			color: var(--primary-color);
			display: inline;
		}
	}

	.h2 {
		font-size: 37px;
	}

	.aviso {
		width: 100%;
		max-width: 665px;
		margin: 3.5rem auto;

		p {
			color: #191919;
			text-align: center;
			font-family: var(--hg-medium);
			font-size: 18px;
			font-style: normal;
			font-weight: 600;
			line-height: 120%;
			padding-left: 6rem;
			padding-right: 6rem;
		}

		&.e404 {
			margin: 4.5rem auto;
			padding: 2rem;

			.big {
				font-size: 68px;
				color: var(--default-color);
			}

			.btn-primary {
				max-width: 250px;
				margin-top: 3rem;
			}

		}

	}

}

@media (max-width: 768px) {

	.sorteo-aviso {

		.h1,
		.h2 {
			font-size: 40px;
			line-height: 50px;
		}

		.h2 {
			font-size: 32px;
		}

		.aviso {

			&.e404 {
				margin: 2.5rem auto;
				padding: 1rem;

				.big {
					font-size: 50px;
				}

			}

		}

		.aviso>p {
			padding-left: 2rem;
			padding-right: 2rem;

		}

	}

}



/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: -15px;
	z-index: 99999;
	background-color: var(--primary-color);
	border: solid 1px var(--primary-color);
	width: 44px;
	height: 44px;
	border-radius: 50px;
	transition: all 0.4s;
}

.scroll-top i {
	font-size: 24px;
	color: var(--white-color);
	line-height: 0;
}

.scroll-top:hover {
	background-color: var(--white-color);
	border: solid 1px var(--primary-color);

}

.scroll-top:hover i {
	color: var(--primary-color);
}

.scroll-top.active {
	visibility: visible;
	opacity: 1;
	bottom: 15px;
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	overflow: hidden;
	background: var(--white-color);
	transition: all 0.6s ease-out;
}

#preloader:before {
	content: "";
	position: fixed;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	border: 6px solid var(--white-color);
	border-color: var(--primary-color) transparent var(--primary-color) transparent;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}