@charset "utf-8";
/* CSS Document */

:root {
	/* Layout */
	--header-after-height: 30px;
	--total-header-height: calc(var(--header-height) + var(--header-after-height));
	--content-max-width: 1200px;
	
	/* Spacing */
	--margin-xl: 60px;
	--margin-lg: 40px;
	--margin-md: 30px;
	--margin-sm: 20px;
	--gap-sm: 20px;
	
	/* Typography */
	--font-size-xl: 22pt;
	--font-size-lg: 15pt;
	
	/* Colors */
	--bg-color: #f0f0f0;
	
	/* Transitions */
	--transition-speed: 0.5s;
	--transition-timing: ease-in-out;
}

/* CONTENIDO */
.imagengrande {
	position: relative;
	width: 90%;
	max-width: var(--content-max-width);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	box-sizing: border-box;
}

.imagengrande img {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: calc(var(--total-header-height) + 20px) auto 0;
	display: block;
}

.slogan p {
	width: 90%;
	margin: var(--margin-xl) auto;
	text-align: center;
	font-size: var(--font-size-xl);
	font-weight: bold;
}

/* Carousel styles */
#carrusel-container {
	width: 100%;
	max-width: var(--content-max-width);
	margin: 0 auto var(--margin-xl);
	padding: 0;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

#carrusel {
	display: flex;
	transition: transform var(--transition-speed) var(--transition-timing);
	width: 100%;
	box-sizing: border-box;
}

.slide {
	flex: 0 0 33.333%;
	padding: 0 calc(var(--gap-sm) / 2);
	box-sizing: border-box;
	position: relative;
}

.slide img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 4px;
}

@media screen and (max-width: 1500px) {
	:root {
		--margin-xl: 80px;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--margin-xl: 40px;
		--margin-lg: 30px;
		--gap-sm: 15px;
	}

	.imagengrande img {
		margin-top: calc(var(--total-header-height) + 20px);
	}

	.imagengrande.show {
		margin-top: calc(var(--total-header-height) + 20px);
	}

	.slogan p {
		margin: var(--margin-lg) auto;
		font-size: var(--font-size-lg);
	}

	.slide {
		padding: 0 calc(var(--gap-sm) / 2);
	}
}

@media screen and (max-width: 480px) {
	:root {
		--margin-xl: 30px;
		--gap-sm: 10px;
	}

	.imagengrande img {
		margin-top: calc(var(--total-header-height) + 20px);
	}

	.imagengrande.show {
		margin-top: calc(var(--total-header-height) + 20px);
	}

	.slide {
		padding: 0 calc(var(--gap-sm) / 2);
	}
}

@media screen and (max-width: 375px) {
	:root {
		--margin-xl: 20px;
		--gap-sm: 8px;
	}

	.imagengrande img {
		margin-top: calc(var(--total-header-height) + 20px);
	}

	.imagengrande.show {
		margin-top: calc(var(--total-header-height) + 20px);
	}

	.slogan p {
		margin: var(--margin-lg) auto;
		font-size: var(--font-size-lg);
	}

	.slide {
		padding: 0 calc(var(--gap-sm) / 2);
	}
}