/*Import*/
	@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,500;1,300;1,400&family=Open+Sans:ital,wght@0,300;0,400;1,300&display=swap');
/*Parametros generales*/
	*{
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}
/* MEDIA QUERY 320 - Móvil (principal)*/
	/* Estilos generales*/
		/* Variables */
			:root{
				--colorPrincipal: #009de0;
				--colorPrincipalHover: rgba(0, 157, 224, 0.4);
				--fuenteTitulos: "Open Sans";
				--fuenteTextos: "Montserrat";
			}
		a{
			text-decoration: none;
			font-family: var(--fuenteTextos);
		}
		img{
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		section, main{
			margin-bottom: 30px;
		}
		/* Fuentes */
			h1, h2, h3, h4, h5{
				font-family: var(--fuenteTitulos);
			}
			h6, p{
				font-family: var(--fuenteTextos);
			}
			h3{
				/* Titulos de secciones */
				font-size: 35px;
				font-weight: 400;
				text-align: center;
				color: var(--colorPrincipal);
				margin-bottom: 30px;
			}
		/* Marcos */
			.marco{
				width: 100%;
				max-width: 1200px;
				margin: auto;
				padding: 0 15px;
			}
		/* Elementos comunes */
			/* Ir arriba */
				.irArriba{
					width: 40px;
					height: 40px;
					font-size: 25px;
					color: #fff;
					background-color: var(--colorPrincipal);
					border: 1px solid #fff;
					border-radius: 50%;
					justify-content: center;
					align-items: center;
					position: fixed;
					bottom: 15px;
					left: 15px;
					cursor: pointer;
					z-index: 2000;
				}
				.irArriba.fas{
					display: flex;
				}
		/* Header */
			header{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
			}
			header > a{
				display: flex;
				justify-content: center;
			}
			header img{
				margin: 20px 0;
				width: 60%;
				max-width: 400px;
			}
			.menu_Redes{
				width: 100%;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 20px 0;
			}
			/* Menu movil */
				.menuBurger{
					height: 40px;
					font-size: 24px;
					color: #fff;
					background-color: var(--colorPrincipal);
					padding: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
				}
				.menuMovil{
					width: 75%;
					max-width: 350px;
					height: 100vh;
					padding: 0 10px;
					background-color: #fff;
					border: 2px solid var(--colorPrincipal);
					position: fixed;
					top: 0;
					right: 0;
					z-index: 1001;
					display: none;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
				.overlay{
					width: 100%;
					height: 100vh;
					background-color: rgba(0, 0, 0, 0.3);
					position: fixed;
					top: 0;
					z-index: 3;
					display: none;
				}
				.cerrar{
					font-size: 40px;
					font-family: var(--fuenteTextos);
					align-self: flex-end;
					text-decoration: none;
					color: var(--colorPrincipal);
				}
				.navMovil{
					width: 100%;
					height: 80%;
					display: flex;
					flex-direction: column;
				}
				.navMovil a{
					font-size: 23px;
					font-weight: 300;
					color: var(--colorPrincipal);
					text-decoration: none;
					padding: 20px 0;
					border-bottom: 2px dashed var(--colorPrincipal);
				}
				.visibleF{
					display: flex;
				}
				.visibleB{
					display: block;
				}
				.cerrado{
					display: none;
				}
			/* menu desk*/
				.menuDesk{
					display: none;
				}
			/* redes sociales*/
				.redes{
					display: flex;
					justify-content: flex-end;
				}
				.redes a{
					width: 35px;
					height: 35px;
					font-size: 15px;
					color: #fff;
					background-color: var(--colorPrincipal);
					border-radius: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.redes a:not(:last-child){
					margin-right: 15px;
				}
		/* Footer */
			footer{
				height: 80px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
			}
			footer p, footer h6{
				font-size: 18px;
				font-weight: 300;
				text-align: center;
			}
			footer p{
				display: flex;
			}
			footer a{
				margin-left: 10px;
			}
			footer img{
				width: 100px;
			}
	/* Estilos recursivos*/
		.backgroundColorPrincipal{
			background-color: var(--colorPrincipal);
		}
		.flex_EXT, .flex_INT{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.flex_EXT{
			justify-content: space-between;
		}
		.flex_INT{
			justify-content: space-around;
		}
	/*Estilos especificos*/
		/* SECCIÓN 1 - "Desarrollo web"*/
			.S1_desarrollo{
				height: 500px;
				padding: 0;
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				justify-content: space-between;
			}
			.S1_desarrollo img{
				height: 400px;
			}
			.S1_desarrollo h1{
				color: #fff;
				font-size: 30px;
				font-weight: 300;
				text-align: center;
				margin: 25px 0 0 0;
			}
		/* SECCIÓN 2 - Sobre mí */
			.S2_sobreMi{
				max-width: 500px;
			}
			.S2_sobreMi img{
				width: 200px;
				height: 200px;
				border: 2px solid var(--colorPrincipal);
				border-radius: 50%;
				padding-top: 20px;
				margin: 0 0 25px 0;
				transition: border 0.3s;
			}
			.S2_sobreMi p{
				font-size: 18px;
				font-weight: 300;
			}
		/* SECCION 3 - Tarifas */
			.S3_tarifas{
				max-width: 400px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 25px;
			}
			.S3_tarifasIMG{
				width: 80px;
				height: 80px;
				min-height: 100px;
				transition: all 0.5s;
			}
			.S3_tarifas h2{
				font-size: 25px;
				font-weight: 300;
			}
			.S3_tarifas > div{
				width: 100%;
				border-bottom: 4px dashed var(--colorPrincipal);
				padding: 10px 0;
				margin: 10px 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.S3_tarifas > div > div{
				font-size: 23px;
				font-weight: 500;
				font-family: var(--fuenteTextos);
				color: var(--colorPrincipal);
			}
			.S3_tarifas p, .S3_tarifas li{
				font-size: 16px;
				text-align: center;
			}
			.S3_tarifas p{
				font-weight: 500; 
				margin-bottom: 15px;
			}
			.S3_tarifas li{
				font-weight: 300;
				font-family: var(--fuenteTextos);
			}
			.S3_tarifas ul {
				list-style: none;
			}
			.S3_tarifas ul li::before {
				width: 20px;
				content: "\2022";
				color: var(--colorPrincipal);
				font-weight: bold;
				margin-right: 10px;
			  }
		/* SECCION 4 - Portfolio */
			.S4_portfolio{
				width: 100%;
				max-width: 400px;
				margin: auto;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
			}
			.contenido_Portfolio{
				width: 40%;
				padding: 15px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.contenido_Portfolio a{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.contenido_Portfolio a > div{
				width: 130px;
				height: 130px;
				min-height: 130px;
				border: 2px solid var(--colorPrincipal);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: border 0.5s;
			}
			.contenido_Portfolio a img{
				width: 90%;
				height: 90%;
				padding: 10px;
			}
			.contenido_Portfolio a p{
				font-size: 18px;
				font-weight: 500;
				text-align: center;
				color: var(--colorPrincipal);
			}
			.contenido_Portfolio a span{
				height: 65px;
				display: flex;
				align-items: center;
			}
			.contenido_Portfolio a h4{
				font-size: 15px;
				font-weight: 300;
				color: #000;
				text-align: center;
			}
		/* SECCIÓN 5 - Opiniones */
			.S5_opiniones > div{
				max-width: 400px;
				padding: 15px;
				align-self: flex-end;
			}
			.S5_opiniones h5{
				font-size: 20px;
				font-weight: 400;
				font-style: italic;
			}
			.S5_opiniones > div > div{
				width: 100%;
				text-align: right;
				margin-top: 20px;
			}
			.S5_opiniones h6{
				font-size: 20px;
				font-weight: 300;
				color: var(--colorPrincipal);
			}
			.S5_opiniones a{
				font-size: 15px;
				font-weight: 300;
				font-style: italic;
				color: #000;
			}
		/* SECCION 6 - FAQ */
			.S6_FAQ .pregunta,
			.S6_FAQ .respuesta{
				max-width: 700px;
			}
			.S6_FAQ .pregunta{
				background-color: var(--colorPrincipal);
				padding: 10px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				cursor: pointer;
				margin-bottom: 1px;
			}
			.S6_FAQ a{
				width: 90%;
				font-size: 18px;
				color: #fff;
			}
			.S6_FAQ i{
				font-size: 25px;
				color: #fff;
			}
			.S6_FAQ .respuesta{
				overflow: hidden;
				transition: height 0.4s;
			}
			.S6_FAQ p{
				font-size: 16px;
				padding: 20px 10px;
			}
		/* SECCIÓN 7 - Contacto */
			.S7_contacto{
				margin: 0;
			}
			.S7_contacto iframe{
				width: 100%;
				height: 200px;
				filter: grayscale(85%);
				border: none;
				transition: filter 1.5s;
			}
			.contenido_Contacto{
				height: 400px;
				padding: 20px 0;
			}
			.contenido_Contacto > div{
				max-width: 500px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.contenido_Contacto > div p{
				font-size: 20px;
				color: #fff;
				text-align: center;
				margin-bottom: 15px;
			}
			.contenido_Contacto > div form{
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.contenido_Contacto > div input,
			.contenido_Contacto > div textarea,
			.contenido_Contacto > div button{
				width: 90%;
				height: 40px;
				color: #000;
				background-color: #fff;
				font-family: var(--fuenteTextos);
				font-size: 15px;
				font-weight: 300;
				border: none;
				border-radius: 10px;
				margin-bottom: 10px;
				padding: 5px 10px;
			}
			.contenido_Contacto > div input:focus,
			.contenido_Contacto > div textarea:focus,
			.contenido_Contacto > div button:active{
				background-color: #E9E9E9;
			}
			.contenido_Contacto > div input,
			.contenido_Contacto > div button{
				height: 40px;
			}
			.contenido_Contacto > div textarea{
				height: 60px;
			}
			.contenido_Contacto > div button{
				cursor: pointer;
			}
			.contenido_Contacto a, .contenido_Contacto i{
				font-size: 18px;
				color: #fff;
			}
			.contenido_Contacto i{
				margin-right: 10px;
			}
/* MEDIA QUERY - Tablet 768 */
	@media (min-width: 768px){
		/* Estilos generales */
			section, main{
				margin-bottom: 40px;
			}
			/* Fuentes */
				h3{
					font-size: 40px;
				}
			/* Header*/
				header{
					flex-direction: row;
				}
				.menu_Redes{
					justify-content: flex-end;
				}
				/* Menu Movil*/
					.menuBurger{
						margin-right: 40px;
					}
			/* Footer */
				footer{
					height: 50px;
					flex-direction: row;
					justify-content: space-between;
				}
				footer p, footer h4{
					font-size: 20px;
				}
		/* Estilos recursivos */
			.flex_INT{
				flex-direction: row;
			}
		/* Estilos especificos*/
			/* SECCIÓN 1 - "Desarrollo web"*/
				.S1_desarrollo{
					flex-direction: row;
				}
				.S1_desarrollo img{
					height: 90%;
					width: 50%;
					align-self: flex-end;
				}
				.S1_desarrollo h1{
					font-size: 40px;
					margin: 0 5% 0 0;
				}
			/* SECCIÓN 2 - Sobre mí */
				.S2_sobreMi{
					max-width: 800px;
				}
				.S2_sobreMi img{
					width: 230px;
					height: 230px;
					margin: 0 50px 0 0;
				}
			/* SECCION 3 - Tarifas */
				.S3_tarifasCONT{
					align-items: flex-start;
				}
				.S3_tarifas{
					width: 28%;
				}
				.S3_tarifas > div{
					height: 85px;
					margin: 15px 0;
					flex-direction: column;
				}
			/* SECCION 4 - Portfolio */
				.S4_portfolio{
					width: 650px;
					max-width: none;
				}
				.contenido_Portfolio{
					width: 30%;
				}
				.contenido_Portfolio a p{
					font-size: 20px;
				}
			/* SECCION 5 - Opiniones */
				.S5_opiniones > div{
					width: 32%;
					padding: 13px;
				}
			/* SECCIÓN 7 - Contacto */
				.contenido_Contacto{
					flex-direction: column;
				}
				.contenido_Contacto a, .contenido_Contacto i{
					font-size: 20px;
				}
	}
/* MEDIA QUERY - Ordenador 1200 */
	@media (min-width: 1200px){
		/* Estilos generales */
			/* Header*/
				header{
					flex-direction: column;
				}
				.sticky{
					max-width: none;
					position: sticky;
					top: 0;
					left: 0;
					right: 0;
					background-color: #fff;
					animation: fadeIn 5s linear;
					z-index: 1000;
				}
				header.sticky{
					flex-direction: row;
					border-bottom: 3px solid var(--colorPrincipal);
					padding: 10px;
				}
				.menu_Redes{
					height: 30px;
					justify-content: center;
				}
				/* Menu Movil*/
					.menuBurger{
						display: none;
					}
				/* Menu desk*/
					.menuDesk{
						display: block;
						text-align: center;
						margin-right: 30px;
					}
					.menuDesk a{
						font-size: 20px;
						font-weight: 500;
						color: #000;
					}
					.menuDesk a:hover{
						color: var(--colorPrincipal);
					}
					.menuDesk a:not(:last-child){
						margin-right: 20px;
					}
				/* Redes sociales */
					.redes a:hover{
						background-color: var(--colorPrincipalHover);
					}
		/* Estilos especificos*/
			/* SECCIÓN 1 - "Desarrollo web"*/
				.S1_desarrollo{
					height: 600px;
				}
				.S1_desarrollo h1{
					font-size: 50px;
				}
			/* SECCIÓN 2 - Sobre mí */
				.S2_sobreMi:hover .imgSobre{
					border: 5px solid var(--colorPrincipalHover);
				}
			/* SECCION 3 - Tarifas */
				.S3_tarifas:hover .S3_tarifasIMG{
					width: 95px;
					height: 95px;
				}
			/* SECCION 4 - Porfolio */
				.S4_portfolio{
					width: 70%;
					margin: auto;
				}
				.contenido_Portfolio a > div:hover{
					border: 3px solid var(--colorPrincipalHover);
				}
				.contenido_Portfolio a img{
					width: 100px;
					height: 100px;
					filter: grayscale(90%);
					transition: all 0.5s;
				}
				.contenido_Portfolio a img:hover{
					width: 110px;
					height: 110px;
					filter: grayscale(0%);
				}
			/* SECCIÓN 7 - Contacto */
				.S7_contacto iframe:hover{
					filter: grayscale(0);
				}
				.contenido_Contacto a,
				.contenido_Contacto i{
					min-height: 25px;
				}
				.contenido_Contacto a:hover,
				.contenido_Contacto a:hover .iconoDatosCont{
					font-size: 22px;
					color: #D9D9D9;
				}
	}
/* KEYFRAMES */
	@keyframes fadeIn{
		0% {opacity: 0;}
		25% {opacity: 25;}
		50% {opacity: 50;}
		100% {opacity: 100;}
	}