* { 
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Spartan', sans-serif; 
}
html {
  scroll-behavior: smooth; 
}

body{
	display: flex;
	flex-direction: column;
	max-width: 100vw;
}


	


/********************************/
/*estilos para ENCABEZADO de la página*/
/********************************/

	/*estilos para FONDO del encabezado*/
		.menu-container {	
			background-image: url("Ilustraciones/Inicio\ 2.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			height: 100vh;
			width: 100%;	
			transition: 100ms;
			display: flex; 
			flex-direction: column; 
		}

	/*estilos para TITULO del encabezado*/

		.titulo {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			color: #fff;
			text-align: center ;
			margin-top: 90px;
			padding-left: 10%; 
			padding-right: 10%;  
		}
		.titulo span {
			color: #00def8;
			font-family: 'Roboto Mono', monospace;
			font-size: large;
			font-weight: 300;
		}
		.imagen-identificador{
			display:none;
		}
	
		@media screen and (max-width: 700px){
			.titulo{
				flex-wrap: nowrap;
				margin-top: 70px;
			}
		}
	

	/*estilos para FONDO del MENU NAVEGACIÓN*/

		#navegador {			
			width: 100%; 
			display: flex; 
			justify-content: space-evenly; 	
			background-color: #000000cc;	
			box-shadow: 1px 10px 15px #000000aa;
			height: max-content; 
			align-items: center;
			align-self: flex-end;	
			position: absolute;
			bottom: 10px;
			z-index: 100;
		}

	/*caracteristicas elementos tipo enlace dentro del contenedor con clase secciones*/

		.ligas-secciones a{
			color: #ffffff95; 
			text-decoration: none; 
			transition: 50ms; 
			padding: 15px;
			font-family:'Roboto Mono', monospace;
			font-weight: 300;
			font-size: 16px;
		}
		.ligas-secciones a:hover{
		transform: scale(1.03);
		transition: 50ms;
		color: #fff;
		font-weight: 400;
		}
		
/***************************************************************************************************/

/********************************/
/* MOBILE estilos para ENCABEZADO de la página*/
/********************************/

		@media screen and (max-width: 700px) {
			
			.menu-container {								
				background: linear-gradient(#000000, #361576);}

			.imagen-identificador{
				display:flex;				
				max-width: 100%;
				justify-content: center;
				align-items: center;
				margin-bottom: 20px;
			}

			.imagen-identificador img{
				width: 100%;

			}

			/*menu navegación*/

			#navegador{
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				text-align: center;
				justify-content: center;
				align-self: center;
				background-color: transparent;
				box-shadow: none;
				width: 100%;
				margin:0;
				bottom: 20px;
			}
			

			.ligas-secciones a{
				justify-self: center;
				background-color: #000000cc;
				width: 80%;
				height: fit-content;
				margin-top: 20px;
			}
		}
/***************************************************************************************************/

/********************************/
/*estilos para body de la página*/
/********************************/

	.secciones {
		display: flex; 
		flex-direction: column; 
		
	}

	.seccion-contenedor{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		
	}

	@media screen and (max-width: 768px){
		.seccion-contenedor{
			flex-direction: column;
		}
	}

/********************************/
/*estilos para TÍTULO de las secciones */
/********************************/

	.title-secc{
		display: flex;
		flex-direction: column;
		background: #361576dd;
		align-content: center;
		text-align: center;
		padding: 20px 10%;	
		margin: 30px auto;
		width: 100vw;
		
	}

	.title-secc h2{
		color: #fff;
		font-weight: 500;
		font-size: 25px;
		margin-bottom: 8px;
		
	}

		.title-secc span{
			display:block;
			font-size: 20px;
			margin-top:5px;
		}


	.title-secc p{
		color: #00def8;
		font-family: 'Roboto Mono', monospace;
		font-size: 15px;
		font-weight: 500;
		
	}

	@media screen and (max-width: 768px){
		.title-secc{
			margin: 10px auto 0;
		}
	}

/********************************/
/*estilos para FONDO de las secciones */
/********************************/

	#secc1{
		background-image: url("Ilustraciones/F1-MundoFeliz.png");	
		background-size: cover;
		background-repeat: no-repeat;
		background-position: bottom center;
		width: 100%;
		
	}

	#secc2{
		background-image: url("Ilustraciones/F2-1894.png");	
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
	}

	#secc3{
		background-image: url("Ilustraciones/F3-\ Mind.png");	
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
	}

	@media screen and (max-width: 768px){

		#secc1{
			background: linear-gradient( #361576, #307bb1 , #fff) ;
		}
		#secc2{
			background: linear-gradient(  #fff, #000) ;
		}
		#secc3{
			background: #000;
		}
	}

/********************************/
/*estilos para CONTENIDO de las secciones */
/********************************/

	/*estilos para estructura*/

		.contenedor-padding{
			padding-left: 10%; 
			padding-right: 10%; 
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			flex-direction: row;
		}

		#text-secc{
			order: 10;
			width: 60%;
			flex-grow: 1;
			
			background: transparent;
			height: fit-content;

		}

		.espacio-imagen{
			order:1;
			width: 30%;
			background: transparent;
			align-content: center;
			margin: 30px auto 30px;
			height: fit-content;
			flex-grow: 1;
			flex-shrink: 1;
			margin-right: 1.2em;
		}

		@media screen and (max-width: 768px){

			.contenedor-padding{
				padding: 0;
				flex-direction: column;
				justify-content: center;
				max-width: 100vw;
			}

			#text-secc{
				order: 1;
				min-width: 100%;
				
				width: 60%;
				background: transparent;
				height: fit-content;
	
			}
	
			.espacio-imagen{
				order:10;				
				min-width: 90vw;
				background: transparent;
				align-content: center;
				margin: 0 auto;
				height: fit-content;
				flex-grow: 1;
				flex-shrink: 1;
				
			}
		}

	/*estilos para cuadros de texto*/

		.texto-secc {
			display: flex; 
			flex-direction: column;
			background: #ffffffdf;
			padding: 25px;
			margin: 30px auto;	
		}

		.texto-secc p{		
			font-size: 16px;
			font-weight: 500;
			line-height: 1.3em;
		}

		.texto-secc h3{
			font-family: 'Roboto Mono', monospace;
			font-weight: 500;
			font-size: 18px;
			text-align: center;
			color: #361576;
			margin-bottom: 15px;	
		}

	/*estilos para imagen*/

		.contenedor-imagen {
			display: flex; 
			flex-direction: column;
			align-content: center;	
		}

		.contenedor-imagen img{
			display: flex; 
			width: 100%;
			transition: 200ms;
			
		}
		.contenedor-imagen img:hover{
		transform: scale(1.03);
		transition: 200ms;
		}

	/*estilos para PIE de imagen*/

		.pie-imagen{
			background: #ffffffcc;
			margin: 1.2em 0;
			padding: 8px;
		}

		.pie-imagen p{
			font-size: 14px;
			font-weight: 500;
			text-align: center;
			color: #361576;
		}


/***************************************************************************************************/



/**********************************/
/*estilos para footer de la página*/
/**********************************/
footer {
  	background-color: #00def8;
  	display: flex; 
  	flex-direction: column;
  	align-items: center; 
}
.footer-item{
	margin-top: 40px;
	width: 100%;
  	display: flex; 
  	justify-content: center; 
}
.footer-item img{
	height: 50px;
	margin: 0 20px;
}
.copyright{
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 90px;
	color: #fff;
}

@media screen and (max-width: 768px){
	.footer-item{
  		flex-direction: column;		
  		align-items: center; 
		margin-top: 0;
	}
	.footer-item img{
		height: 50px;
		margin-top: 35px;
		
	}
	.copyright{
		font-size: 12pt;
	}
}
/***************************************************/





/*********************************/
/*estilos para icono hacia arriba*/
/*********************************/
.ir-arriba {
  	display: flex; 
  	flex-direction: column;
  	align-items: center; 
}
.ir-arriba img{
  	height: 35px;  	
  	text-decoration: none;
  	cursor:pointer;
  	position:fixed;
 	bottom:25px;
}
.ir-arriba img:hover{
	transform: scale(1.1);
  	transition: 100ms;
}


@media screen and (max-width: 768px){
	.ir-arriba img{
		height: 30px;
  		padding-right: 0px;
	}
}
.ir-arriba img:hover{
	transform: scale(1.1);
  	transition: 100ms;
}
/***************************************************/