/* Containers */

header {
	background-image: url('/images/bg/poker01.png');
	background-size: cover;
}

section {background-color: var(--bg01)}

/* IDs */

#feats {
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: space-around;
	/* Structure */
	gap: 3rem;
	margin: 2rem;
	padding: 2rem 0;
	/* Visuals */
	text-align: center;
}

#feats > div {
	display: flex;
	flex-flow: column;
	justify-content: center;
}

.feat {
	display: flex;
	flex-flow: column;
	/* Visuals */
	color: #e6e6e6;
	font-size: 175%;
}

.feat > h3 {
	font-size: 9rem;
	color: transparent;
	background-image: linear-gradient(var(--gold02), var(--gold00));
	background-clip: text;
}

.feat > p {font-size: 2rem}

#main-logo-row {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: repeat(2, 1fr);
	place-items: center;
	gap: 2rem;
	/* Structure */
	transition-duration: 300ms;
}

.big-logo {
	height: 14rem;
	aspect-ratio: 135 / 108;
	background-color: black;
	transition-duration: 300ms;
	border: 2px solid white;
	border-radius: 1rem;
}

.big-logo:hover {
	border: 3px solid var(--gold02);
	transform: perspective(100px) translateZ(15px);
}

.big-logo > img {
	height: 100%;
	aspect-ratio: auto;
}

/* Bonuses */

#bonuses {
	display: grid;
	grid-template-rows: repeat(3, auto);
	align-items: center;
	justify-items: center;
	/* Structure */
	gap: 2rem;
	padding: 2rem 0;
}

#scroller {
	display: flex;
	align-items: flex-start;
	overflow-x: hidden;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* Structure */
	width: 90%;
	gap: 3%;
	margin: 0 5%;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease;
	/* Visual */
	background-color: black;
}

/* Ancho de la barra vertical */
#scroller::-webkit-scrollbar {width: 12px}

#scroller::-webkit-scrollbar-track {background: black;border-radius: 10px}

/* Controlador deslizante */
#scroller::-webkit-scrollbar-thumb {background: var(--gold01); border-radius: 10px}

#scroller::-webkit-scrollbar-thumb:hover {background: #555}

#scroller > * {max-height: 50rem}

@keyframes growShrink {
	0% {transform: scale(1)}
	50% {transform: scale(1.2)}
	100% {transform: scale(1)}
}

#open-scroller {
	animation: growShrink 1s ease-in-out infinite alternate;
}

/* Form Section */

#form-fill {
	display: flex;
	flex-flow: column;
	align-items: center;
	/* Structure */
	gap: 2rem;
	margin: 2rem;
}

#form-fill > article {
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: space-between;
	/* Structure */
	width: 90%;
	height: 70%;
	gap: 3rem;
	padding: 2rem;
}

/* Form */

form {
	display: flex;
	justify-content: center;
	flex-flow: column;
	/* Structure */
	width: 90%;
	gap: 1.6rem;
	margin: 0;
	padding: 3rem 2rem;
	/* Visuals */
	background-image: radial-gradient(var(--bg01), var(--bg02));
	border: 2px solid var(--gold01);
	border-radius: 2rem;
	box-shadow: inset;
	color: var(--gold01);
	font-weight: bold;
}

form > button {
	align-self: center;
	/* Structure */
	width: 50%;
	height: 4rem;
	/* Visuals */
	background-color: var(--bg02);
	color: var(--gold00);
	font-size: 2.2rem;
	font-weight: bold;
}

form > div {
	display: flex;
	justify-content: space-between;
	/* Structure */
	padding: 0;
}

#form-apps {flex-flow: column}

.app-input {
	display: flex;
	flex-flow: row;
	background-color: var(--bg03);
	border-radius: 0.8rem;
	padding: 0.8rem 1.2rem;
	margin: 4px 0;
}

.form-checkbox {
	display: inline-flex;
	align-items: center;
	/* Structure */
	width: 80%;
	height: 3.2rem;
	gap: 1.6rem;
}

.username-field {display: none}

input, select {height: 2.4rem; width: 22rem}

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
}

input[type="checkbox"]:checked {
	background-color: var(--gold01);
}

/* Contacts */

#contacts {
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: space-around;
	/* Structure */
	gap: 3rem;
	margin: 2rem;
	padding: 16%;
	/* Visuals */
	text-align: center;
}

#contacts > article {
	display: flex;
	flex-direction: column;
	/* Structure */
	border: 2px solid white;
	gap: 2rem;
	padding: 2rem 0;
}

#contacts span {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
 
.agent-picture {width: 100%; aspect-ratio: auto}

.link-whatsapp {
	display: block;
	background-image: url('/images/icons/whatsapp.svg');
	background-size: cover;
	width: 6rem;
	aspect-ratio: 1 / 1;
}

.link-telegram {
	display: block;
	background-image: url('/images/icons/telegram.svg');
	background-size: cover;
	width: 6rem;
	aspect-ratio: 1 / 1;
}

/* Text */

.mega-header {
	font-size: 8rem;
	color: transparent;
	background-image: linear-gradient(65deg, #ff007f, #7f00ff);
	background-clip: text;
}

/* Default values made for 360px to 430px */

@media (min-width: 768px) { /* Tablet (Portrait) */

	#feats > div {
		flex-flow: row;
		width: 100%;
		justify-content: space-around;
	}

	#main-logo-row {
		grid-template-rows: 1fr;
		grid-template-columns: repeat(4, 1fr);
		gap: 3rem;
	}

	#form-fill {
		display: grid;
		align-items: center;
		justify-items: center;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 1fr;
		/* Structure */
		padding: 2rem 0;
	}

	#form-fill > article {height: 80%; padding: 2rem}
	input, select {width: 20rem}
	#contacts {flex-direction: row; padding: 2rem}
}

@media (min-width: 1024px) { /* Laptops & Landscape Tablets */
	
	header {
		flex-flow: column;
		justify-content: center;
		/* Structure */
		height: auto;
		gap: 2.6rem;
	}

	.big-logo {height: 17rem}
	form {width: 80%}
	input, select {width: 22rem}
	#contacts {gap: 8%}
	.mega-header {font-size: 11rem}
}

@media (min-width: 1440px) { /* WXGA+ */
 form {width: 70%}
}

@media (min-width: 1600px) { /* HD+ */

}

@media (min-width: 1920px) { /* FHD */
	#scroller > * {max-height: 60}
}

@media (min-width: 2560px) { /* QHD */

}