*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: lightblue transparent;

}

html, body{
	width: 100%;
	height: 100%;
}

body{
	overflow: hidden;
}

h1{
	-webkit-text-stroke: 10px transparent;
	background: linear-gradient(var(--angle), yellow, yellow, blue, blue, red, red);
	-webkit-background-clip:text;
	background-clip: text;
	paint-order: stroke fill;
	-webkit-text-fill-color:white;
	animation: rotate-gradient 3s linear infinite;
	filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px black) drop-shadow(0 0 2px black) drop-shadow(0 0 2px black) drop-shadow(0 0 2px black);
	text-shadow: 2px 4px 6px black;
}

@property --angle{
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes rotate-gradient{
	to{
		--angle: 180deg;
	}
}

/*==============================
=======CONTENEDOR PRINCIPAL=====
==============================*/

.snap-container{
	width: 100vw;
	height: 100vh;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}


/*==============================
===========CADA SECCIÓN=========
==============================*/

.seccion{
	position: relative;
	min-width: 100vw;
	max-width: 100vw;
	height: 100vh;
	flex-shrink: 0;
	scroll-snap-align: start;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: arial, sans-serif;
	font-size: 50px;
	overflow: hidden;
	background-size: cover;

}

.seccion::before{
	content: "";

	position: absolute;
	inset: -20px;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	z-index: 0;

	transition: .1s ease-in-out;
}

.seccion > h1,
.seccion > .snap-intern{
	position: relative;
	z-index: 2;
	padding-left: 15px;
}


/*Clase llamada por el javascrip*/

.seccion.intern-activo::before{
	filter: blur(10px);
	transform: scale(1.08);
	transition: 1s ease-in-out;
}
.sphere{
	filter: blur(10px);
	transform: scale(1.08);
	transition: 1s ease-in-out;

}

.seccion::after{
	content: "";
	
	position: absolute;
	inset: 0;

	background: rgba( 0, 0, 0, 0);

	z-index: 1;

	pointer-events: none;

	transition: .1s ease-in-out;
}

.seccion.intern-activo::after{
	background: rgba( 0, 0, 0, 0.5);
}

.snap-intern{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	position: relative;
	z-index: 2;
}

.item{
	width: 100%;
	height: 100vh;
	min-height: 80vh;
	flex-shrink: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}

	.item [class*="img-"]{
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		border: 2px solid white;
		width: min(300px, 60vw);
		height: min(300px, 60vh);
		border-radius: 20px;
		box-shadow: 2px 5px 8px black;
		margin-top: 1rem;
		transition: .3s ease;
	}

		.item [class*="img-"]:hover{
			box-shadow: 0 0 8px white;
			border: 4px solid white;
			transition: .3s ease;
			transform: scale(1.2);
		}

	.item p{
		width: min( 400px, 80vw);

		margin: 0;

		text-align: justify;

		font-size: clamp( 1rem, 4vw, 2.4rem);
		color: white;
		padding-top: 25px;
	}

	.item h5{
		width: min( 300px, 80vw);

		margin: 0;

		text-align: justify;

		color: black;
		text-shadow: 0 0 4px white;
		padding-top: 25px;
		filter: drop-shadow(0 0 4px white);
	}

	@media (max-width: 399px){

		.seccion{
			display: block;
		}

		.seccion h1{
			font-size: 2rem;
			padding-left: 0px;
			text-align: center;
			margin: 25px 0;
		}

		.item{
			height: 100vh;
			min-height: 80vh;
			padding: 10px 15px;
			overflow: hidden;
		}

		.item h5{
		font-size: clamp(1rem, 6vw, 6rem);
    	margin: 10px 0 15px;
		flex-shrink: 0;
    	width: 30vw;
    	display: contents;
    	}

		.item [class*="img-"]{
			width: min(160px, 50vw);
			height: min(160px, 50vh);

			flex-shrink: 1;
		}

		.item p{
			width: 50vw;
			height: 120vh;
			margin: 10px 0;
			font-size: 1rem;
			text-align: center;
		}

		.seccion .kuula{
		display: none;
		}
	}

	@media (max-height: 399px){

		.seccion h1{
			font-size: 2rem;
			padding-left: 0px;
			text-align: center;
			margin: 25px 0;
		}

		.item{
			display: grid;
   			grid-auto-columns: auto 1fr;
    		align-items: center;
    		margin: 0 80px;
    		padding: 10px 0 !important;
    		min-height: 0vh !important;
		}

		.item h5{
    	width: 30vw;
    	display: contents;
    	font-size: clamp(1rem, 1vw, 6rem) !important;
    	}

		.item [class*="img-"]{
			width: 25vw !important;
   			height: 30vh !important;
			margin-left: 32px;
		}

		.item p{
			grid-column: span 2;
			font-size: clamp(0rem, 1.5vw, 1rem) !important;
			margin: 0 0 !important;
			width: 50vw !important;
			padding-top: 0px;
		}

		.seccion .kuula{
		display: none;
		}
	}

	@media (min-width: 400px) and (max-width: 599px){

		.seccion{
			overflow: hidden;
			display: block;
		}


		.seccion h1{
			font-size: 2rem;
			padding-left: 15px;
			text-align: center;
			margin: 25px 0;
		}

		.item{
			height: 100vh;
			min-height: 80vh;
			padding: 10px 15px;
			overflow: hidden;
		}

		.item h5{
			font-size: clamp(2rem, 5vw, 6rem);
			margin: 35px 0 15px;
			flex-shrink: 0;
			width: 30vw
		}

		.item [class*="img-"]{
			width: min(200px, 50vw);
			height: min(200px, 50vh);

			flex-shrink: 1;
		}

		.item p{
			width: 54vw;
			margin: 10px 0;
			font-size: 1rem;
			text-align: center;
		}

		.seccion .kuula{
		display: none;
		}

	}

	@media (min-width: 600px) and (max-width: 899px){

		.seccion h1{
			font-size: 3rem;
			padding-left: 25px;
		}

		.item{
			height: 100vh;
			min-height: 80vh;
			padding: 10px 15px;
			overflow: hidden;
		}

		.item h5{
			font-size: clamp(2rem, 1vw, 6rem);
			margin: 10px 0 15px;
			flex-shrink: 0;
		}

		.item [class*="img-"]{
			width: min(280px, 50vw);
			height: min(280px, 50vh);

			flex-shrink: 1;
		}

		.item p{
			width: 50vw;
			margin: 10px 0;
			font-size: 1.3rem;
			text-align: center;
		}
	}

	@media (min-width: 900px){

		.seccion h1{
			font-size: 6rem;
			padding-left: 15px;
		}

		.item{
			height: 100vh;
			min-height: 80vh;
			padding: 10px 15px;
			overflow: hidden;
		}

		.item h5{
			font-size: clamp(2rem, 4vw, 6rem);
			margin: 10px 0 15px;
			flex-shrink: 0;
		}

		.item [class*="img-"]{
			width: min(350px, 50vw);
			height: min(350px, 50vh);

			flex-shrink: 1;
		}

		.item p{
			width: 37vw;
			margin: 10px 0;
			font-size: 1.4rem;
			text-align: center;
		}
	}

.seccion-1::before{
	background-color: red;
	background-color: orange;
	background-image: url(https://img.magnific.com/foto-gratis/flor-orquidea-phalaenopsis_1373-125.jpg);
	
}
	.img-1-1{
	background-image: url(https://png.pngtree.com/thumb_back/fh260/background/20240916/pngtree-phalaenopsis-pink-orchid-flowers-on-branch-in-summer-black-background-image_16214635.jpg);
	}
	.img-1-2{
	background-image: url(https://images.pexels.com/photos/37793598/pexels-photo-37793598.jpeg?cs=srgb&dl=pexels-enzo-renz-424999667-37793598.jpg&fm=jpg);
	}
	.img-1-3{
	background-image: url(https://images.unsplash.com/photo-1757865579201-693dd2080c73?fm=jpg&q=60&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
	}
	.img-1-4{
	background-image: url(https://img.magnific.com/foto-gratis/vibrante-flor-hibisco-naranja-flor_84443-82043.jpg);
	}
	.img-1-5{
	background-image: url(https://img.magnific.com/foto-gratis/fotografia-vertical-flores-hortensia-azul-jardin_181624-36830.jpg?semt=ais_hybrid&w=740&q=80);
	}

.seccion-2::before{
	background-color: orange;
	background-image: url(https://muyinteresante.okdiario.com/wp-content/uploads/sites/5/2022/10/13/6347d1f87a763.jpeg);
}

	.img-2-1{
	background-image: url(https://www.ecoregistros.org/site/images/dataimages/2022/04/07/488779/DSC_3934-Editar.jpg);
	}
	.img-2-2{
	background-image: url(https://wallpaper.forfun.com/fetch/e9/e963189f9c7f12331dc6c2a9c72f9be9.jpeg);
	}
	.img-2-3{
	background-image: url(https://mochileaperu.com/wp-content/uploads/2022/09/delfin-1024x683.jpg);
	}
	.img-2-4{
	background-image: url(https://efeverde.com/wp-content/uploads/2022/01/mono-titi-cabeciblanco.jpg);
	}
	.img-2-5{
	background-image: url(https://www.teleantioquia.co/wp-content/850x450/uploads/2025/07/649714984db63.jpeg);
	}

.seccion-3::before{
	background-color: yellow;
	background-image: url(https://i.pinimg.com/736x/45/ca/e0/45cae003c32b64efbc4bcc41b6c02551.jpg);
}

	.img-3-1{
	background-image: url(https://comedera.com/wp-content/uploads/sites/9/2021/09/ajiaco-colombiano.jpg);
	}
	.img-3-2{
	background-image: url(https://www.elespectador.com/wp-content/uploads/elespectador/HFA2CSDA7FCE5HO735QQ5ZMMCU.jpg);
	}
	.img-3-3{
	background-image: url(https://www.mycolombianrecipes.com/wp-content/uploads/2024/03/Sancocho-de-Pollo-Chicken-Sancocho-771x1024.jpg);
	}
	.img-3-4{
	background-image: url(https://imag.bonviveur.com/mondongo.jpg);
	}
	.img-3-5{
	background-image: url(https://recetasdecocina.elmundo.es/wp-content/uploads/2025/05/bandeja-paisa-1024x683.jpg);
	}

.seccion-4::before{
	background-color: lightgreen;
	background-color: orange;
	background-image: url(https://wallpapers.com/images/hd/ciudad-amurallada-cartagena-aerial-view-vld051hj1n9ir0xc.jpg);
}

	.img-4-1{
	background-image: url(https://i.pinimg.com/736x/77/3a/ec/773aecd64bcdfddfe40e94ff01490660.jpg);
	}
	.img-4-2{
	background-image: url(https://wallpapercave.com/wp/wp3925550.jpg);
	}
	.img-4-3{
	background-image: url(https://wallpapercat.com/w/full/c/f/7/281887-1920x1080-desktop-full-hd-colombia-wallpaper-image.jpg);
	}
	.img-4-4{
	background-image: url(https://wallup.net/wp-content/uploads/2019/09/866079-santiago-cali-colombia-sudamerica-748x497.jpg);
	}
	.img-4-5{
	background-image: url(https://images.trvl-media.com/place/1118/268c9f01-07c1-4e93-8cfd-675ce3d0d696.jpg);
	}

.seccion-5::before{
	background-color: lightblue;
	background-color: orange;
	background-image: url(https://travelgrafia.co/wp-content/uploads/2023/06/Listado-de-los-mejores-lugares-turisticos-de-Colombia.jpg);
}

	.img-5-1{
	background-image: url(https://dynamic-media-cdn.tripadvisor.com/media/photo-o/1a/ce/ea/dd/caption.jpg?w=1200&h=-1&s=1);
	}
	.img-5-2{
	background-image: url(https://dynamic-media.tacdn.com/media/photo-o/2f/b1/fa/62/caption.jpg?w=700&h=500&s=1);
	}
	.img-5-3{
	background-image: url(https://phantom-elmundo.unidadeditorial.es/444261db21f3160a62bb9636698dc403/resize/1200/f/jpg/assets/multimedia/imagenes/2021/09/03/16306829892598.jpg);
	}
	.img-5-4{
	background-image: url(https://www.lacoladerata.co/wp-content/uploads/2020/02/portada-final-900x900.png);
	}
	.img-5-5{
	background-image: url(https://entrenevadoshotel.com/wp-content/uploads/2025/04/laslajas.jpg);
	}

.seccion .kuula{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 1;
}

.seccion.intern-activo .kuula {
    filter: blur(10px); 
    pointer-events: none; 
}