body {
	@media (width < 960px) {
		padding-bottom: 10rem;
	}
}

/* *********** header */
header {
	width: 100%;
	height: auto;
	padding: 0 1rem;
	background: rgba(32, 32, 32, 0.33);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(7.2px);
	position: sticky;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	& img {
		width: 6rem;
		height: auto;
	}
	& i {
		font-size: 2.5rem;
		cursor: pointer;
		@media (width < 1480px) {
			display: none;
		}
		@media (width < 1190px) {
			display: inline-block;
		}
		& span {
			display: inline-block;
		}
	}
	& nav {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		& a {
			width: auto;
			padding: 0.5rem 1rem;
			text-align: center;
			background-color: var(--primario);
			border-radius: var(--border-radius);
			outline: 1px solid var(--blanco);
			outline-offset: -0.3rem;
			@media (width < 1050px) {
				display: none;
			}
		}
	}
}
/* **** Enlaces a Excursiones y transfers */
.enlaces {
	width: 100%;
	height: auto;
	padding: 0.5rem;
	display: flex;
	justify-content: center;
	gap: 1rem;
	z-index: 1;
	.btn-enlaces {
		cursor: pointer;
	}
	& a {
		width: auto;
		padding: 0.5rem 1rem;
		text-align: center;
		background: rgba(32, 32, 32, 0.33);
		border-radius: var(--border-radius);
		outline: 1px solid var(--blanco);
		outline-offset: -0.3rem;
	}
}
.ocultar-btn {
	@media (width < 1480px) {
		display: none;
	}
}
.manu {
	@media (width < 1190px) {
		display: none;
	}
}
.menu2 {
	width: 100%;
	height: auto;
	padding: 1rem;
	display: flex;
	justify-content: center;
	gap: 1rem;
	z-index: 1;
}

h1 {
	color: var(--primario);
	padding: 1rem;
	@media (width < 960px) {
		font-size: 2rem;
	}
}
h2 {
	margin-bottom: 1rem;
}

/* **** Menú de navegación lateral */
.oscurecer {
	width: 100dvw;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--transparente);
	transition: 0.3s ease-in-out;
}
.menu-lateral {
	width: 60dvw;
	max-width: 25rem;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(32, 32, 32, 0.83);
	display: flex;
	flex-direction: column;
	align-items: left;
	gap: 3rem;
	padding: 9rem 1.5rem;
	transform: translateX(-100%);
	transition: transform 0.3s ease-in-out;
	& i {
		position: absolute;
		top: 6rem;
		right: 2rem;
		cursor: pointer;
		&:hover {
			color: lightblue;
		}
	}
	& img {
		width: 7rem;
	}
	& ul {
		padding-left: 2rem;
		@media (width > 560px) {
			padding-left: 7rem;
		}
		& li {
			list-style-type: none;
			padding: 0.5rem;
			cursor: pointer;
			&:hover {
				color: lightblue;
			}
		}
	}
}
/* Mostrar el menú */
.mostrar {
	transform: translateX(0);
}

/* ************ grid */
.grid {
	width: 95%;
	height: 60vh;
	margin: 0 auto;
	padding: 0.2rem;
	background-size: cover;
	background-repeat: no-repeat;
	background: var(--blanco);
	border-radius: var(--border-radius);
	z-index: 1;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr, 1fr, 1fr;
	gap: 0.2rem;
	grid-template-areas:
		"uno uno dos tres"
		"uno uno dos cuatro";
	animation: fadeIn ease 2s;
	@media (width < 960px) {
		height: 40vh;
	}
	& button {
		z-index: 1;
		position: absolute;
		top: 10rem;
		right: 4rem;
		color: var(--blanco);
		background-color: var(--secundario);
		align-items: center;
		border-radius: 10px;
		display: inline-flex;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.125rem;
		padding: 3px 8px;
		cursor: pointer;
		@media (width < 960px) {
			right: 2rem;
		}
	}
	& div {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: var(--border-radius);
		overflow: hidden;
		box-shadow: var(--sombra);
	}
	& img {
		width: 100%;
		height: 100%;
		max-height: 100%;
		object-fit: cover;
		border-radius: var(--border-radius);
		transition: 0.5s all ease-in-out;
		cursor: pointer;
		&:hover {
			transform: scale(1.3);
			filter: brightness(1.4);
		}
	}
}
/* & .carrousel {
	position: absolute;
	top: 7rem;
	right: 4rem;
	font-size: 2rem;
	background-color: var(--primario);
	padding: 0.3rem 0.5rem;
	border-radius: var(--border-radius);
	cursor: pointer;
} */

.uno {
	grid-area: uno;
	background-image: url("/images/hero/hero4.webp");
}
.dos {
	grid-area: dos;
	background-image: url("/images/hero/hero5.webp");
}
.tres {
	grid-area: tres;
	background-image: url("/images/hero/hero6.webp");
}
.cuatro {
	grid-area: cuatro;
	background-image: url("/images/hero/hero7.webp");
}

/***** SLIDER de imágenes de productos  */
.cont-slider {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: var(--negro);
	z-index: 3;
	transform: translateX(-100%);
	transition: transform 0.5s ease-in-out;
}
.mostrar-slider {
	transform: translateX(0);
}
.logo-slider {
	width: 6rem;
	position: absolute;
	z-index: 1;
	top: 2rem;
	left: 50%;
	transform: translateX(-50%);
}
#cerrar-slider {
	position: absolute;
	top: 2rem;
	right: 2rem;
	font-size: 2rem;
	background-color: transparent;
	z-index: 1;
	cursor: pointer;
	&:hover {
		color: var(--primario);
	}
}
.slider {
	display: flex;
	height: 100%;
	transition: transform 1s ease-in-out;
}
.slide {
	flex: 0 0 100%; /* Cada slide ocupa el 100% del contenedor visible */
	height: 100%;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
	& img {
		width: 100%;
		height: 100%;
		padding: 10%;
		object-fit: cover;
	}
}
.slide::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* Permite que los clics pasen a la imagen */
	z-index: 1; /* Asegura que el degradado esté encima de la imagen */
}
.slide.active {
	opacity: 1;
	transform: scale(1);
}
.nav-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--transparente);
	color: white;
	border: none;
	padding: 0.5rem 1.5rem;
	cursor: pointer;
	z-index: 10;
	border: 1px solid white;
	border-radius: var(--border-radius);
	&:hover {
		background-color: rgba(255, 255, 255, 0.7);
		color: black;
	}
}

/* Botones */
#prev {
	left: 1.5rem;
}
#next {
	right: 1.5rem;
}

/* ************** main */
main {
	width: 100%;
	padding: 2rem 2.5%;
	display: grid;
	grid-template-columns: 1fr 17rem;
	gap: 2rem;
	@media (width < 960px) {
		display: block;
	}
	.content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		.info-container {
			display: flex;
			flex-direction: column;
			background: url("/images/fondo.webp");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			color: var(--negro);
			padding: 2rem;
			outline: 1px solid var(--primario);
			outline-offset: -1rem;
			white-space: pre-line;
			@media (width > 960px) {
				padding: 2rem 6rem;
			}
			& h3 {
				font-size: 1.5rem;
				font-weight: 500;
				color: var(--primario);
				margin-bottom: 1rem;
			}
			& p {
				padding-left: 2rem;
			}
			.info {
				padding: 0.5rem 0;
				& i {
					font-size: 1.2rem;
					padding-left: 2rem;
					& span {
						padding-left: 1rem;
						font-size: 1.1rem;
					}
				}
			}
			.titulo-info {
				padding: 1rem;
				font-size: 1.1rem;
				font-weight: 500;
			}
		}
		.info1 {
			font-size: 0.9rem;
		}
		.transparente {
			background-color: var(--transparente);
		}
		& ul {
			font-size: 1rem;
		}
	}
	/** Adorno */
	.adorno1 {
		width: 100%;
		height: auto;
		padding: 1rem;
		background: var(--transparente);
		outline: 1px solid var(--blanco);
		outline-offset: -1rem;
		& h1 {
			color: var(--blanco);
		}
	}
	.adorno2 {
		width: 100%;
		height: auto;
		padding: 2rem;
		background: var(--transparente);
		outline: 1px solid var(--blanco);
		outline-offset: -1rem;
		& img {
			height: 3rem;
			width: auto;
			margin: 0 auto;
		}
	}

	/* *********** aside */
	& aside {
		width: 100%;
		height: 100%;
		max-height: 90dvh;
		position: sticky;
		top: 1rem;
		padding: 2rem;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: var(--transparente);
		color: var(--blanco);

		outline: 1px solid var(--blanco);
		outline-offset: -1rem;
		@media (width < 960px) {
			display: none;
		}
		.precio {
			font-size: 1.5rem;
			font-weight: 500;
		}
		.cancellation {
			padding-left: 1rem;
		}
		& i {
			display: inline-block;
			font-size: 1rem;
			& a {
				display: inline-block;
				margin-left: 1rem;
				text-decoration: underline;
				color: var(--secundario);
			}
		}
	}
}
.boton2 {
	width: 90%;
	margin: 0 auto;
	background-color: var(--secundario);
	padding: 1rem 1rem;
	border-radius: 1.5rem;
	text-align: center;
	font-size: 1.2rem;
	outline: 1px solid var(--blanco);
	outline-offset: -0.3rem;
}

/* ********* FOOTER */
.footer2 {
	width: 100%;
	height: auto;
	padding: 1rem;
	background-color: var(--secundario);
	color: var(--primario);
	text-align: center;
	outline: 1px solid var(--primario);
	outline-offset: -1rem;
	& h2 {
		font-weight: 200;
		margin-bottom: 1rem;
	}
	& p {
		font-size: 0.8rem;
		margin-bottom: 1rem;
	}
	.redes {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 1rem 0;
		gap: 1rem;
		& i {
			font-size: 1.5rem;
			&:hover {
				color: var(--negro);
				transition: var(--transition);
			}
		}
		.trip {
			width: 2.5rem;
			display: inline;
		}
	}
	& p {
		padding: 0.2rem;
	}
	.proweb {
		&:hover {
			text-decoration: underline;
			color: var(--negro);
			transition: var(--transition);
		}
	}
	.logo-footer {
		width: 10rem;
		height: auto;
		margin: 0 auto;
		padding: 1rem;
	}
}

/* *********  BOTON MÓVIL */
.boton-movil {
	display: none;
	width: 100%;
	padding: 0.2rem 0 1rem;
	z-index: 1;
	position: fixed;
	left: 0;
	bottom: 1rem;
	background: var(--transparente);
	@media (width < 960px) {
		display: block;
	}
	& p {
		text-align: center;
		font-size: 1.2rem;
		font-weight: 500;
		margin-bottom: 0.2rem;
	}
}

/* ********************************* */
/** Estilos para el overlay de carga */
/* ********************************* */
#loader {
	position: fixed; /* Fijo en la ventana de visualización */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(
		255,
		255,
		255,
		0.8
	); /* Fondo blanco semitransparente */
	display: flex; /* Para centrar el contenido */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999; /* Asegura que esté por encima de todo */
	transition: opacity 0.3s ease-in-out; /* Transición suave para ocultar/mostrar */
}

.loader-hidden {
	opacity: 0;
	visibility: hidden; /* Oculta completamente el elemento cuando no está activo */
}

.loader-visible {
	opacity: 1;
	visibility: visible;
}

/* Estilos para un spinner (ejemplo básico) */
.spinner {
	border: 8px solid #f3f3f3; /* Light grey */
	border-top: 8px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 2s linear infinite; /* Animación de giro */
	margin-bottom: 15px; /* Espacio entre spinner y texto */
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Opcional: Estilo para el texto de carga */
#loader p {
	font-family: Arial, sans-serif;
	font-size: 1.2em;
	color: #333;
}