* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	line-height: 1.6;
}

:root {
	--orange: hsl(26, 100%, 55%);
	--pale-orange: hsl(25, 100%, 94%);
	--very-dark-blue: hsl(220, 13%, 13%);
	--dark-grayish-blue: hsl(219, 9%, 45%);
	--grayish-blue: hsl(220, 14%, 75%);
	--light-grayish-blue: hsl(223, 64%, 98%);
	--white: hsl(0, 0%, 100%);
	--black: hsl(0, 0%, 0%);
	--black-with-opacity: hsla(0, 0%, 0%, 0.75);
	--dark-color: #151515;
}

body {
	max-width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	color: #ffffff;
}

/* Primera Parte */

#hero-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to right, #669933 70%, #FFCC33 30%);
	width: 100%;
	height: 100vh;
	overflow: hidden;
	/* Solo si es necesario */
}

.header-logo {
	width: 100%;
}

.hero-left img {
	max-width: 100%;
	/* Mantiene la imagen dentro de su contenedor */
	height: auto;
	/* Mantiene la proporción */
}

main {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 0 5rem;
	/* Reduce el padding lateral */
	width: 100%;
	overflow: hidden;
}

main .hero-left {
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 6rem 0;
	flex-basis: 50%;
	/* Ocupa el 60% del espacio disponible */
}

.hero-left h1 {
	font-size: 6em;
	font-weight: bold;
	text-transform: uppercase;
}

.hero-left h2 {
	font-size: 3em;
	font-weight: bold;
	text-transform: uppercase;
}

.hero-left p {
	line-height: 2rem;
	opacity: 0.6;
	width: 35rem;
}

.hero-left .hero-btn {
	display: flex;
	gap: 15px;
	/* Ajusta el espacio entre botones */
}

.hero-btn button {
	background-color: #FFD700;
	padding: 10px 30px;
	color: #000;
	border: none;
	border-radius: 25px;
	font-weight: bold;
	font-size: 1.2rem;
	transition: all 0.5s ease;
	/* Unifica las transiciones */
	display: inline-block;
	margin-top: 15px;
}

.hero-btn button:hover {
	background-color: #ffffff;
	color: #f4694c;
	transform: scale(1.03);
	/* Cambia scale a transform */
	cursor: pointer;
}

main .hero-right {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-basis: 50%;
	/* Ocupa el 40% del espacio disponible */
}

.hr-logo {
	width: 100%;
	height: 100%;
}

.hr-logo img {
	max-width: 100%;
	/* Usa max-width en lugar de width */
	height: auto;
	/* Mantiene las proporciones */
	object-fit: cover;
}

.hero-right .hr-text {
	display: flex;
}

.hero-right .hr-text h3 {
	font-size: 1.5rem;
	font-weight: 400;
	width: 15rem;
}

.hr-text .dash {
	align-self: flex-start;
	padding-top: 1rem;
	padding-right: 1rem;
}

.hr-text .right-arrow {
	align-self: flex-end;
	padding-left: 1rem;
	padding-bottom: 0.5rem;
}

/* FIN Parte */

/* Media Queries for Hero Section */
/* Pantallas medianas (tablets y pantallas entre 768px y 1199px) */
@media (max-width: 1199px) {
	@media (max-width: 1199px) and (min-width: 768px) {
		#hero-section {
			width: 100%;
			height: 100vh;
			overflow: hidden;
		}

		main {
			padding: 0 2rem;
			/* Reduce el padding interno para tablets */
		}

		main .hero-left {
			flex-basis: 60%;
			/* Mantén el layout en fila */
			padding: 4rem 0;
			/* Reduce el padding vertical */
		}

		main .hero-right {
			flex-basis: 40%;
			/* Mantén el layout en fila */
			padding: 4rem 0;
			/* Reduce el padding vertical */
		}

		.hero-left h1 {
			font-size: 4em;
			/* Ajusta el tamaño para tablets */
		}


		.hr-logo img {
			max-width: 100%;
			height: auto;
		}
	}
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 767px) {

	#hero-section {
		/* overflow: hidden;
		height: auto; */
		overflow: hidden;
		width: 100%;
		/* Asegura que el ancho sea del 100% */
		height: auto;
		/* Permite que la altura se ajuste automáticamente */
		padding: 0;
		/* Elimina el padding para que no afecte el ancho */
		margin: 0;
		/* Asegura que no haya márgenes que reduzcan el ancho */
	}

	main {
		flex-direction: column;
		width: 100%;
		/* Asegura que el main también tenga un ancho completo */
		padding: 0 0.5rem;
		/* Reduce el padding para móviles */
	}

	main .hero-left,
	main .hero-right {
		flex-basis: 100%;
		/* Ocupa el 100% en móviles */
	}

	.hero-left h1 {
		font-size: 2.5em;
		/* Tamaño reducido para móviles */
	}

	.hero-left h2 {
		font-size: 2.5em;
	}

	.hr-logo img {
		max-width: 100%;
	}

	.hero-left .hero-btn {
		flex-direction: column;
		/* Botones en columna en móviles */
	}

	.hero-btn button {
		padding: 8px 20px;
	}
}



/* Producto */

.product {

	display: flex;
	gap: 125px;
	min-height: 570px;
	align-items: center;
	padding: 5rem 5rem;

}

/* Image gallery */
.gallery {
	flex: 1;
	display: flex;
	flex-direction: column;

}

.gallery .main-img img {
	display: none;
}

.gallery .main-img img.active {
	display: inline-block;
	max-width: 445px;
	max-height: 445px;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	cursor: pointer;
}

.gallery .thumb-list {
	display: flex;
	justify-content: space-around;
	max-width: 445px;
	width: 100%;
}

.gallery .thumb-list div {
	max-width: 90px;
	max-height: 90px;
	margin: 0 2px;
}

.gallery .thumb-list img {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	cursor: pointer;
}


.gallery .thumb-list img:hover {
	opacity: 50%;
}

.gallery .thumb-list .active img {
	opacity: 30%;
}

.gallery .thumb-list .active {
	border: 2px solid #FFCC33;
	border-radius: 13px;
	margin: 0;
}


.content {
	flex: 1;
}

.content h3 {
	font-size: 2.5rem;
	text-transform: uppercase;
	color: #669933;
}

.content h2 {
	font-size: 37px;
	margin: 0 0 20px 0;
	color: var(--dark-color);
}

.content p {
	font-size: 16px;
	color: var(--dark-grayish-blue);
	margin-bottom: 30px;
}

.price {
	display: flex;
	align-items: center;
	gap: 15px;
}

.current-price {
	font-weight: 700;
	font-size: 25px;
}

.discount {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	border-radius: 10%;
	height: 25px;
	background-color: var(--pale-orange);
	font-weight: 700;
	color: var(--orange);
}

.prev-price {
	margin: 10px 0 35px 0;
	font-size: 18px;
	color: var(--grayish-blue);
	font-weight: 700;
	text-decoration: line-through;
}

/* Diseño para tablets: mantén la dirección en fila pero ajusta los espacios */
@media (max-width: 1199px) {
	@media (max-width: 1199px) and (min-width: 768px) {

		.product {
			flex-direction: row;
			gap: 40px;
			/* Ajusta el espacio entre elementos */
			padding: 2rem;
		}

		.gallery .main-img img.active {
			max-width: 300px;
			max-height: 300px;
		}

		.gallery .thumb-list {
			justify-content: center;
		}

		.gallery .thumb-list div {
			max-width: 70px;
			max-height: 70px;
		}

		.content h3 {
			font-size: 2.2rem;
			/* Ajusta según prefieras */
		}

		.content h2 {
			font-size: 2.2rem;
			/* Ajusta según prefieras */
		}
	}
}

/* Diseño para pantallas de celular: cambia la dirección a columna */
@media (max-width: 767px) {
	.product {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		/* Espacio entre la galería y el contenido */
		padding: 0;
		margin: 0;
	}


	.gallery {
		align-items: center;
	}

	.gallery .main-img img.active {
		max-width: 250px;
		max-height: 250px;
	}

	.gallery .thumb-list {
		flex-wrap: wrap;
		gap: 10px;
	}

	.gallery .thumb-list div {
		max-width: 60px;
		max-height: 60px;
	}

	.content {
		text-align: center;
		/* Centra el contenido en móviles */
	}

	.content h3 {
		font-size: 2rem;
		/* Ajusta según prefieras */
	}

	.content h2 {
		font-size: 1.8rem;
		/* Ajusta según prefieras */
	}

	.space-product {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin: 10px 0;
	}
}




/* selector de pulpa o bola */

/* Estilo para las imágenes de los productos en el selector */
.product-thumb {
	width: 50px;
	/* Ajusta el tamaño según lo que prefieras */
	height: 50px;
	border-radius: 50%;
	/* Hace las imágenes circulares */
	object-fit: cover;
	/* Asegura que la imagen se ajuste al contenedor sin distorsionarse */
}

.add-to-cart-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.add-to-cart {
    color: var(--white);
    background-color: #25D366;
    border: none;
    height: 55px;
    width: 100%;
    border-radius: 10px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    padding: 0 5px;
    text-decoration: none; /* Elimina el subrayado de los enlaces */
}

.add-to-cart:hover {
    background-color: #1ebe56; /* Cambia el color al hacer hover */
}

.add-to-cart svg path {
    fill: var(--white);
}

.whatsapp-text {
    font-size: 1.25rem;
    font-weight: bold;
}


/* Selector de Maduracion */

.d-lg-block {
	display: block;
}

.space-product {
	display: flex;

	margin: 20px 0;
}

.select-maduration-title {
	display: block;
	margin-bottom: 10px;
	font-size: 1.2em;
	color: #212529;
}

.main-div {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	position: relative;
}

.space-radio {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.maturation-selector {
	margin-bottom: 5px;
	color: var(--dark-grayish-blue);
}

.outer-circle-ma {
	display: none;
	/* Oculta inicialmente */
	border-radius: 50%;
	height: 36px;
	width: 36px;
	border: #fff;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: all 0.25s ease;
}

.outer-circle-ma.active {
	display: flex;
	/* Muestra cuando está activo */
	background: #f0f0f0;
	/* Puedes cambiar el color de fondo cuando esté activo */
	border: 2px solid #bcc032;
	/* border-color: #000; /* Cambia el color del borde cuando esté activo */
}

.input-maturation {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100%;
	width: 100%;
}

.content-input {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0;
	height: 100%;
	width: 100%;
	cursor: pointer;
	padding: 0 !important;
}

.content-input span {
	display: flex;
	justify-content: center;
	align-items: center;
}

.content-input input {
	visibility: hidden;
	position: absolute;
}

.content-input span,
.content-input span:before {
	transition: all .25s ease;
}

.content-input input+span.sgree {
	background: #b6bf00 0 0 no-repeat padding-box;
	border: 2px solid #b6bf00;
}

.content-input input+span.smedium {
	background: transparent linear-gradient(270deg, #fd0, #b6bf00) 0 0 no-repeat padding-box;
}

.content-input input+span.smature {
	background: #fd0 0 0 no-repeat padding-box;
	border: 2px solid #fd0;
}

.content-input input[type=radio]+span {
	height: 26px;
	width: 26px;
	border-radius: 100%;
}

.content-input input[type=radio]+span.sgree:before,
.content-input input[type=radio]+span.smedium:before,
.content-input input[type=radio]+span.smature:before {
	content: "";
	display: block;
	height: 18px;
	width: 18px;
	border-radius: 100%;
	position: absolute;
	background: inherit;
	transition: all .25s ease;
	transform: scale(0);
	opacity: 0;
}

.content-input:hover input[type=radio]:not(:checked)+span.sgree {
	background: #bcc032;
}

.content-input:hover input[type=radio]:not(:checked)+span.smedium {
	background: transparent linear-gradient(270deg, #fd0, #b6bf00) 0 0 no-repeat padding-box;
}

.content-input:hover input[type=radio]:not(:checked)+span.smature {
	background: #fd0 0 0 no-repeat padding-box;
}

.content-input input[type=radio]:checked+span:before {
	transform: scale(1);
	opacity: 1;
}

.content-input input[type=radio]:checked+span {
	border-color: inherit;
}

.line-medium {
	border: 1px solid #acacac !important;
	opacity: 1;
	width: 100%;
	margin: 0;
	z-index: 0;
}

.line-container {
	position: absolute;
	width: 70%;
	top: 70%;
	transform: translateY(-50%);
	z-index: -1;
}


/* Cart */
.cart {
	position: relative;
}

.cart-icon {
	cursor: pointer;
}

.cart-container {
	right: -95px;
	top: 50px;
	z-index: 9;
	position: absolute;
	width: 360px;
	min-height: 260px;
	background: white;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	display: none;
}

.cart-container.active {
	display: flex;
	flex-direction: column;
}

.cart-title {
	padding: 25px 20px;
	font-weight: 700;
	border-bottom: 1px solid var(--grayish-blue);
}

.cart .cart-items {
	padding: 25px 20px;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.cart .cart-items.empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 185px;
	font-weight: 700;
}

.cart .cart-items.empty .cart-empty {
	color: var(--grayish-blue);
	display: inline-block;
}

.cart .cart-items .cart-empty {
	display: none;
}

.cart-item {
	display: flex;
	align-items: center;
	gap: 20px;
}

.cart-item img {
	height: 50px;
	border-radius: 5px;
}

.cart-item {
	color: var(--dark-grayish-blue);
}

.cart-item .total-price {
	color: var(--black);
	font-weight: 700;
}

.checkout.empty {
	display: none;
}

.checkout {
	height: 56px;
	margin: 27px 23px;
	border: none;
	color: var(--white);
	background-color: var(--orange);
	border-radius: 10px;
	font-weight: 700;
}

.checkout:hover {
	cursor: pointer;
}

.cart-count {
	cursor: pointer;
	position: absolute;
	top: -8px;
	right: -10px;
	background-color: var(--orange);
	color: var(--white);
	min-width: 25px;
	min-height: 17px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

.delete-item {
	border: none;
	background: none;
	cursor: pointer;
}





/* Most Played Games Section Styling*/

#most-played {
	display: flex;
	flex-direction: column;
	background-image: linear-gradient(to right, rgba(102, 153, 51, 0.65) 55%, transparent),
		url('./images/extracto\ de\ maracuya\ maracuya\ congelado\ pulpa.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #000;
	padding: 5rem 5rem;
	position: relative;
	color: #fff;
	/* Color de texto global */
}

#most-played .most-played-header h2 {
	font-size: 2.5rem;
	text-align: left;
	/* Alinea el título a la izquierda */
	margin-bottom: 2rem;
}

#most-played .most-played-paragraph {
	text-align: justify;
	/* Justifica el párrafo */
	font-size: 1.2rem;
	margin-top: 2rem;
}

#most-played .most-played-paragraph p {
	color: inherit;
	line-height: 2rem;
	width: 55%;

	/* Elimina el centrado automático */
}

#most-played .most-played-img {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 5rem;
	margin-top: 3rem;
}

.most-played-img .img-1 {
	width: 30%;
	min-width: 15rem;
	position: relative;
	top: -10rem;
}

.most-played-img .img-2,
.most-played-img .img-3 {
	width: 20%;
	min-width: 15rem;
	align-self: flex-end;
}

/* Pantallas medianas: 768px a 1199px */
@media (max-width: 1199px) and (min-width: 768px) {
	#most-played {
		padding: 8rem 3rem;
	}

	#most-played .most-played-header h2 {
		font-size: 2.2rem;
		width: 70%;
	}

	#most-played .most-played-paragraph p {
		width: 70%;
	}

	.most-played-img .img-1 {
		top: -5rem;
		width: 25%;
	}

	.most-played-img .img-2,
	.most-played-img .img-3 {
		width: 20%;
	}
}

/* Pantallas móviles grandes: 768px a 1023px */
@media (max-width: 1023px) and (min-width: 768px) {
	#most-played {
		padding: 6rem 2.5rem;
	}

	#most-played .most-played-header h2 {
		font-size: 2rem;
	}

	#most-played .most-played-paragraph p {
		width: 80%;
	}

	.most-played-img .img-1 {
		top: -4rem;
		width: 30%;
	}

	.most-played-img .img-2,
	.most-played-img .img-3 {
		width: 25%;
	}
}

/* Pantallas pequeñas: menos de 767px */
@media (max-width: 767px) {
	#most-played {
		padding: 2rem 2rem;
		flex-direction: column;
		
		
		/* Espacio entre la galería y el contenido */
		
	}

	#most-played .most-played-header h2 {
		font-size: 1.6rem;
		width: 90%;
	}

	#most-played .most-played-paragraph p {
		color: inherit;
		font-size: 1.2rem;
		line-height: 1.5rem;
		width: 100%;

		/* Elimina el centrado automático */
	}

	.most-played-img {
		gap: 15px;
		flex-direction: column;
		align-items: center;
	}

	.most-played-img .img-1 {
		width: 60%;
		top: -3rem;
	}

	.most-played-img .img-2,
	.most-played-img .img-3 {
		width: 40%;
	}
}


/* Beneficios */
.benefits-section {
	display: grid;
	min-height: 570px;
	grid-template-columns: 1fr 1fr 1fr;
	/* Tres columnas iguales */
	gap: 2rem;
	padding: 5rem 0;
}

.column {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.maracuya-img {
	width: 100%;
	height: auto;

}

.box {
	display: flex;
	align-items: center;
	position: relative;
	/* Para posicionamiento si es necesario */
	margin-bottom: 1.5rem;
}

.box .image {
	margin-top: 2rem;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #FFD700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.5s;
}

.box .image img {
	width: 70%;
	height: auto;
}



.inner-box {
	margin: 1.5rem 0 0 1rem;
}

.inner-box h3 {
	color: #669933;
	/* Verde */
	font-size: 1.2rem;
}

.inner-box p {
	font-size: 14px;
	font-weight: 500;
	color: #555;
}



@media (max-width: 1199px) {
	@media (max-width: 1199px) and (min-width: 768px) {
		.benefits-section {
			grid-template-columns: 1fr 1fr;
			gap: 1.5rem;
			height: auto;
			padding: 0;
			margin: 0;
		}

		.column {
			justify-content: center;
			gap: 20px;

		}

		.maracuya-column {
			display: none;
		}

		.box .image {
			width: 70px;
			height: 70px;
		}

		.box {
			margin-bottom: 1rem;
		}

	}
}

@media (max-width: 767px) {
	.benefits-section {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		height: auto;
		padding: 0;
		margin: 0;
	}


	.column {
		justify-content: center;
		gap: 10px;

	}

	.maracuya-column {
		display: none;
	}

	.box .image {
		width: 60px;
		height: 60px;
	}

	.inner-box h3 {
		font-size: 1.1rem;
	}
}

@media (max-width: 480px) {
	.benefits-section {
		grid-template-columns: 1fr;
		padding: 0;
		margin: 0;
	}

	.box .image {
		width: 45px;
		height: 45px;
	}

	.inner-box h3 {
		font-size: 0.8rem;
	}

	/* Esconder la columna de la imagen de maracuyá */
	.maracuya-column {
		display: none;
	}
}


/* Fin Beneficios */

/* Call to Action Section Styling*/

#cta {
	background-color: #000000;
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
		url('./assets/Photos/Rectangle\ 606.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 7rem 5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

#cta h2 {
	font-size: 3rem;
	text-align: center;
}

#cta p {
	line-height: 1.5rem;
	text-align: center;
	opacity: 0.7;
	width: 40%;
}

#cta button {
	background-color: #f4694c;
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: 500;
	border: 2px solid transparent;
	padding: 1rem 2.5rem;
}

#cta button:hover {
	background-color: #ffffff;
	color: #f4694c;
	border: 2px solid #f4694c;
	scale: 1.05;
	transition: all 0.5s;
	cursor: pointer;
}

/* Media Queries for Call to Action Section */

@media (max-width: 1023px) {
	#cta h2 {
		font-size: 2.5rem;
	}

	#cta p {
		width: 60%;
	}
}

@media (max-width: 767px) {
	#cta {
		padding: 5rem 2rem;
	}

	#cta h2 {
		font-size: 2rem;
		font-weight: 600;
	}

	#cta p {
		width: 90%;
	}
}

/* Footer Section Styling */

footer {
	background-color: #000000;
	padding: 7rem 5rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 3rem;
}

.footer-logo p {
	margin-top: 1rem;
	margin-bottom: 1.5rem;
	font-weight: 300;
	opacity: 0.7;
}

.footer-logo img {
	margin-right: 1rem;
	cursor: pointer;
}

.footer-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.footer-list .footer-list-header {
	font-size: 1.1rem;
	font-weight: 500;
	opacity: 1;
	margin-bottom: 0.5rem;
}

.footer-list p {
	font-weight: 300;
	opacity: 0.7;
}

.footer-list p:not(:first-child):hover {
	cursor: pointer;
	color: #f4694c;
}

/* Media Queries for Footer Section */

@media (max-width: 767px) {
	footer {
		padding: 5rem 2rem;
		gap: 2rem;
	}
}

/* Footer Credits Section */

.footer-credits {
	background-color: #000000;
	text-align: center;
	padding-bottom: 3rem;
}

.footer-credits p {
	font-size: 1.1rem;
	font-weight: 500;
}

.footer-credits .github-link {
	text-decoration: none;
	color: #ffffff;
	padding-left: 5px;
}

.footer-credits .github-link:hover {
	color: #840cfd;
}