@import url(./main.css);
@import url(./promocion-variables.css);

/****************************** Hero Section ******************************/

html,
body {
	scroll-behavior: smooth;
}

.hero {
	background: #1d4fa2;
	background: linear-gradient(
		145deg,
		rgba(29, 79, 162, 1) 0%,
		rgba(19, 23, 24, 1) 100%
	);
	height: 100vh;
	display: flex;
	gap: 3vw;
	padding: 100px 5vw;
	position: relative;
	justify-content: center;
}

.indicacionesHero {
	width: 75% !important;
}

.logo-club-slpendor {
	position: absolute;
	left: 30px;
	top: 20px;
	width: 200px;
}

.hero-izquierda {
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.hero-derecha {
	max-width: 800px;
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 30px;
}

.btn {
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	border-radius: 0.5rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.btn-hero {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.3);
}

.btn-hero:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--blanco);
	transform: translateY(-2px);
}

.btn-primary {
	background: var(--primary);
	color: var(--primary-foreground);
}

.btn-primary:hover {
	color: var(--blanco);
	transform: translateY(-2px);
}

/****************************** Products Section ******************************/
.products {
	background: #0e93d2;
	background: radial-gradient(
		circle,
		rgba(14, 147, 210, 1) 0%,
		rgba(26, 78, 124, 1) 49%
	);
	padding: 100px 10%;
	display: flex;
	flex-direction: column;
	gap: 50px;
	min-height: 100dvh;
	justify-content: center;
}

.products-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.timeline {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 15px;
	grid-auto-rows: minmax(100px, auto);
	padding: 0px 5vw;
}

.timeline-item {
	border-radius: 1rem;
	align-self: center;
	overflow: hidden;
	transition: all 0.3s ease;
}

.timeline-item:hover {
	transform: translateY(-5px);
}

.timeline-item img {
	width: 100%;
}

.section-bases-concurso {
	display: flex;
	gap: 50px;
  width: 60%;
  align-self: center;
	align-items: center;
}

.card-promo {
	background-color: rgb(255 255 255 / 0.1);
	width: fit-content;
	padding: 20px 50px;
	border-radius: 0.5rem;
	/* border: 1px solid var(--celeste-100); */
}

.card-promo ol {
	list-style-position: inside; /* hace que los números estén dentro del padding */
}

.card-promo ol li::marker {
	font-weight: bold;
	font-size: 1.2em;
}

/****************************** Registration Section ******************************/
.registration {
	background: #1d4fa2;
	background: linear-gradient(
		145deg,
		rgba(29, 79, 162, 1) 0%,
		rgba(19, 23, 24, 1) 100%
	);
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding: 100px 15vw;
	position: relative;
	justify-content: center;
}

.form-container {
	background: var(--blanco-100);
	border-radius: 1rem;
	padding: 2rem;
	width: 50vw;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

#registration-form {
	margin-top: 20px !important;
}

.form-group {
	margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: start;
}

.form-label {
	display: block;
	font-weight: var(--font-semibold);
	color: var(--azul-default);
	font-family: var(--font-primary);
	font-size: clamp(0.75rem, 0.5vw + 0.5rem, 0.812rem);
}

.form-input {
	height: 50px !important;
	margin-top: 0px !important;
	width: 100%;
	background: var(--blanco) !important;
	border: 1px solid var(--azul-100) !important;
	border-radius: 0.5rem;
	color: var(--azul-default) !important;
	font-size: 1rem;
	transition: all 0.3s ease;
}

.underline{
	text-decoration: underline;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  color: var(--azul-100) !important;
}

.form-input::placeholder {
	color: var(--azul-100) !important;
}

.form-input:focus {
	color: var(--azul-default);
	outline: none;
	background: transparent;
}

.form-input option {
  background-color: var(--blanco-100) !important;
  color: var(--azul-default);
}

.terminos_container{
	display: flex;
	align-items: start;
	gap: 10px;
}

.terminos_container input{
	margin-top: 5px;
}

.boton-registro{
	background-color: var(--amarillo-default);
}

.boton-registro:hover{
	background-color: var(--amarillo-300);
}

.boton-registro-celeste-100{
	background-color: var(--celeste-100);
}

.boton-registro-celeste-100:hover{
	background-color: var(--azul-100);
}

/* Tabs inactivos */
.nav-pills .nav-link {
  color: #ffffff; /* texto blanco */
  border-radius: 50px; /* bordes redondeados */
  margin-right: 8px; /* separación entre tabs */
  padding: 10px 20px;
  transition: all 0.3s ease;
}

/* Hover */
.nav-pills .nav-link:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--blanco);
	transform: translateY(-2px);
}

/* Tab activo */
.nav-pills .nav-link.active {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.3);
}

.mecanicas{
	background-color: var(--celeste-100);
	border: 1px solid var(--celeste-200);
	border-radius: 10px;
	width: 100%;
	padding: 20px;
}



/*************************************** Winners Section ****************************************/
.winners {
	background: #0e93d2;
	background: radial-gradient(
		circle,
		rgba(14, 147, 210, 1) 0%,
		rgba(26, 78, 124, 1) 49%
	);
	padding: 100px 10%;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.video_ganadores{
	border-radius: 20px;
}

.swiper {
      width: 100%;
      height: 100vh;
      padding-top: 80px;
    }
    
    .swiper-slide {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
	  display: flex !important;
    }
    
    .video-container {
      position: relative;
      width: 90%;
      max-width: max-content;
      height: 75vh;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
    
    video {
      width: 100%;
      height: -webkit-fill-available !important;
      object-fit: contain;
	  
    }
    
    .swiper-button-next,
    .swiper-button-prev {
      color: white !important;
      background: rgba(255, 255, 255, 0.2);
      width: 50px !important;
      height: 50px !important;
      border-radius: 50%;
      backdrop-filter: blur(10px);
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
      font-size: 20px !important;
    }
    
    .swiper-pagination-bullet {
      background: white !important;
      opacity: 0.4 !important;
    }
    
    .swiper-pagination-bullet-active {
      opacity: 1 !important;
      width: 32px !important;
      border-radius: 4px !important;
    }

/* Responsive */
@media (max-width: 768px) {
	/******************* Hero Section  ***********************/
	.hero {
		padding: 60px 0;
		flex-direction: column;
		align-items: center;
		height: auto;
	}

	.indicacionesHero {
		width: 80%;
	}

	.hero img {
		width: 60%;
	}

	.hero-izquierda,
	.hero-derecha {
		width: 90%;
		align-items: center;
	}

	.logo-club-slpendor {
		position: relative;
		display: block;
		top: auto;
		left: auto;
	}

	.form-container {
		width: 90vw;
	}

	/******************* Products Section  ***********************/
	.products {
		height: auto;
	}

	.products,
	.winners {
		padding: 100px 0px;
	}

	.products-container {
		width: 90%;
		place-self: center;
		display: flex;
		flex-direction: column;
		gap: 30px;
	}

	.timeline {
		display: grid;
		grid-template-columns: repeat(1, 5fr);
	}

	.timeline-item img {
		width: 80%;
		place-self: center;
	}

	.section-bases-concurso {
		flex-direction: column;
	}

	.card-promo {
		padding: 20px 20px;
	}

	/******************* Winners Section  ***********************/
	.winners-container {
		width: 90%;
		place-self: center;
	}

	.ganador-imagen {
		margin-bottom: -25%;
	}

	.ganador-contenedor {
		gap: 30px;
	}

	.registration{
		padding: 100px 5vw;
	}

	.section-bases-concurso{
		width: 100%;
	}

	.form-container{
		padding: 35px 20px;
	}
}

@media (max-width: 480px) {
	.winner-info {
		flex-direction: column;
		text-align: center;
    gap: 0.5rem;
	}

	.meta-info {
		justify-content: center;
	}
}