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

a {
	text-decoration: none;
	color: inherit;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #f7f7f7;
}

body {
	display: flex;
	flex-direction: column;
	/* line-height: 1.5; */
}

main {
	flex: 1;
	margin: 0 auto;

	&.index-page {
		margin: 0;
	}
}

header {
	position: fixed;
	top: 25px;
	left: 0;
	width: 100%;
	height: clamp(3rem, 5vw, 4rem);
	padding: 0 clamp(1rem, 2.5vw, 2rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1000;
	background-color: #f7f7f7;

	.logo {
		height: clamp(100px, 20vw, 160px);
		width: clamp(160px, 20vw, 300px);
	}

	#nav-check {
		display: none;
	}

	.nav-toggler {
		cursor: pointer;
		display: none;

		span {
			&::before,
			&::after {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
			}
		}
	}

	.nav-links {
		display: flex;
		align-items: center;
		gap: clamp(1rem, 2vw, 2rem);

		.nav-item {
			transition: color 0.3s;

			&:hover {
				color: #f7c074;
			}
		}
	}

	.redes-sociales {
		display: flex;
		align-items: center;
	}

	&.default {
		top: 0;
		height: 60px;

		background-color: #f7f7f7;
		gap: clamp(1rem, 2vw, 2rem);

		.logo {
			height: clamp(50px, 10vw, 80px);
			width: clamp(80px, 10vw, 150px);
		}

		.nav-toggler {
			span {
				position: relative;
				display: block;
				height: 2.5px;
				width: 25px;
				background-color: #333;

				&::before,
				&::after {
					background-color: #333;
				}

				&::before {
					top: -6px;
				}

				&::after {
					top: 6px;
				}
			}
		}

		.nav-links {
			.nav-item {
				font-weight: bold;
				color: #333;

				&:hover {
					color: #f7c074;
				}
			}
		}

		.redes-sociales {
			gap: clamp(0.5rem, 1vw, 1rem);
			color: #333;

			p {
				font-size: clamp(0.75rem, 2vw, 1rem);
			}

			.telefono {
				font-weight: bold;
			}

			img {
				width: clamp(1.25rem, 3vw, 2.5rem);
				height: auto;
				transition: transform 0.3s;

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

	&.index {
		background-color: transparent;

		.nav-toggler {
			position: relative;
			width: clamp(2rem, 5vw, 3rem);
			height: clamp(2rem, 5vw, 3rem);
			flex-shrink: 0;

			span {
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 0.25rem;
				background-color: #fff;
				transform: translateY(-50%);

				&::before,
				&::after {
					background-color: #fff;
				}

				&::before {
					top: -0.6rem;
				}

				&::after {
					top: 0.6rem;
				}
			}
		}

		.nav-links {
			.nav-item {
				color: #fff;
				font-size: clamp(1rem, 2vw, 1.25rem);
				text-transform: uppercase;

				&:hover {
					color: #f7c074;
				}
			}
		}

		.redes-sociales {
			gap: clamp(1rem, 2vw, 2rem);

			i {
				font-size: clamp(0.7rem, 1.5vw, 1.2rem);
				color: #fff;
				transition: transform 0.3s;

				&:hover {
					transform: scale(1.1);
					color: #f7c074;
				}
			}
		}
	}
}

/* Botón de WhatsApp */
.whatsapp-btn {
	position: fixed;
	bottom: clamp(1rem, 5vw, 2.5rem);
	right: clamp(1rem, 5vw, 2.5rem);
	background-color: #25d366;
	border-radius: 50%;
	width: clamp(3.75rem, 10vw, 5.3rem);
	height: clamp(3.75rem, 10vw, 5.3rem);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s;
	z-index: 100;

	svg {
		width: clamp(1.875rem, 6vw, 2.5rem);
		height: clamp(1.875rem, 6vw, 2.5rem);
		fill: #fff;
		transition: transform 0.3s;
	}

	&:hover {
		svg {
			transform: scale(1.5);
		}
	}
}

.footer {
	width: 100%;
	background-color: #333;
	color: #fff;
	padding: clamp(0.5rem, 1vw, 1rem) 0;

	.container__footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 1500px;
		margin: auto;

		.box__footer {
			display: flex;
			flex-direction: column;
			padding: clamp(0.5rem, 1vw, 1rem);

			h2 {
				margin-bottom: clamp(0.3rem, 0.6vw, 0.6rem);
				color: #fff;
				font-weight: 700;
				font-size: clamp(0.8rem, 2vw, 1.2rem);
			}

			a {
				margin-top: clamp(0.3rem, 0.6vw, 0.6rem);
				color: #7a7a7a;
				font-weight: 600;
				transition: opacity 0.3s ease, color 0.3s ease;

				&:hover {
					opacity: 0.8;
					color: #fff;
				}

				&.bi {
					display: flex;
					align-items: center;

					&::before {
						margin-right: 5px;
					}
				}
			}

			.social-links {
				display: flex;
				justify-content: flex-star;
				gap: 10px;

				a {
					font-size: clamp(1rem, 1.2vw + 0.4rem, 1.2rem);
				}
			}
		}

		.logo__footer {
			margin: auto;

			img {
				width: 150px;
			}
		}

		.contacto_footer {
			max-width: 250px;
			line-height: 1;
			h2 {
				a {
					color: #fff;
					font-weight: 700;
					font-size: clamp(0.8rem, 2vw, 1.2rem);
				}
			}

			p {
				color: #7a7a7a;
				font-size: clamp(0.7rem, 1.5vw, 0.9rem);
				margin: 10px 0;
				text-align: justify;
			}
		}

		.terms__footer {
			max-width: 350px;
			font-weight: 500;
			color: #7a7a7a;
			font-size: clamp(1rem, 2.5vw, 1.2rem);

			p {
				font-size: clamp(1.2rem, 2.5vw, 1.8rem);
				/* text-align: justify; */
				line-height: 1.1;
				margin-bottom: 20px;
				color: #fff;
			}

			form {
				display: flex;
				gap: 5px;
				margin-top: 10px;

				input {
					height: 40px;
					border-radius: 6px;
					background: none;
					width: 100%;
					outline: none;
					border: 1px solid #7489c6;
					caret-color: #fff;
					color: #7a7a7a;
					padding-left: 10px;
					font-size: 16px;
				}

				button {
					background-color: #25d366;
					color: #f3f3f3;
					outline: none;
					border: none;
					padding: 5px 15px;
					border-radius: 6px;
					cursor: pointer;
					font-weight: 500;
					transition: 0.2s ease;

					&:hover {
						background: #128c7e;
						color: #fff;
					}
				}
			}
		}
	}

	.box__copyright {
		max-width: 1500px;
		margin: auto;
		text-align: center;
		padding: 0px 40px;

		p {
			margin-top: 10px;
			color: #7a7a7a;
			font-size: clamp(0.8rem, 2vw, 1rem);
		}

		hr {
			border: none;
			height: 1px;
			background-color: #7a7a7a;
		}
	}
}

/* Responsive: Menú hamburguesa para pantallas pequeñas */
@media (max-width: 900px) {
	header {
		.nav-links {
			display: none;
			flex-direction: column;
			align-items: center;
			gap: clamp(0.5rem, 1vw, 1rem);
			position: absolute;
			top: 60px; /* Justo debajo del header */
			left: 0;
			width: 100%;
			background-color: #f2f2f2;
			padding: clamp(0.5rem, 2vw, 1rem) 0;
		}
		/* Al marcar el checkbox se muestra el menú */
		#nav-check:checked ~ .nav-links {
			display: flex;
		}
		/* Se muestra el botón de hamburguesa */
		.nav-toggler {
			display: flex;
		}

		&.index {
			.nav-links {
				left: 50%;
				transform: translateX(-50%);
				width: 60%;

				.nav-item {
					font-weight: bold;
					color: #000;
				}
			}
		}
	}
}