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


@import url('https://fonts.googleapis.com/css2?family=Nata+Sans:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

	
		body,html{
		margin: 0px;
		height: 100%;
		}

		*{
		font-family: "Nata Sans", sans-serif;
		color: #101920;
		box-sizing: border-box;
		}


		h1{
		font-family: "Abril Fatface", serif;
		font-weight: normal;
		font-size: 3em;
		line-height: 1.1em;
		margin-bottom: 0px;
		}


		h2{
		font-family: "Abril Fatface", serif;
		font-weight: normal;
		font-size: 4em;
		line-height: 1em;
		margin: 0px;

		}

		h3{
		font-family: "Abril Fatface", serif;
		font-weight: normal;
		font-size: 2em;
		line-height: 1em;
		margin: 0px;

		}


		p{
		font-size: 19px;
		margin: 0px;
		}

		h5, h4{
		margin: 0px;
			margin-top: 10px;
		}








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


		h1{
		font-size: 2em;
		line-height: 1.1em;
		}


		h2{
		font-size: 3em;
		line-height: 1em;

		}

		h3{
		font-size: 1.7em;
		line-height: 1em;

		}


		p{
		font-size: 14px;
		margin: 0px;
		}

		h5{
		margin: 0px;
		}

}


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


		h2{
		font-size: 2em;
		line-height: 1em;

		}


}




		/*header{
		background: white;
		text-align: center;
		height:75px;
		padding-top: 30px;
		padding-bottom: 15px;
		font-size: 14px;
		}

	header ul li{
		vertical-align: top;
		display: inline-block;
		}


nav{
		vertical-align: top;
		display: inline-block;
		text-align: left;
		float: left;
		}

		nav li{
		margin-right:25px;
		}

aside li{
		margin-left: 25px;
		}
		aside{
		vertical-align: top;
		display: inline-block;
		text-align: right;
		float: right;
		}


*/
		section{
		width: 90%;
		max-width: 1500px;
		margin: auto;
		}

		
		

		ul{
		padding: 0px;
		margin: 0px;
		}

		.mylogo{
		width:300px;
		position: absolute;
		left: 50%;
		margin-left: -150px;
		}

	

		.w50,.w33,.w66,.w30,.w70,.w75,.w80,.w90,.w10,.w20,.w25,.w60,.w40,.w100,.wauto{
		vertical-align: top;
		display: inline-block;
		box-sizing: border-box;
		}
		.w100{
		width:100%;
		}
		.w50{
		width:50%;
		}
		.w33{
		width:33.33%;
		}
		.w60{
		width:60%;
		}
		.w40{
		width:40%;
		}

		.w66{
		width:66.66%;
		}
		.w30{
		width:30%;
		}
		.w70{
		width:70%;
		}
		.w75{
		width:75%;
		}
		.w20{
		width:20%;
		}
		.w80{
		width:80%;
		}
		.w90{
		width:90%;
		}
		.w25{
		width:25%;
		}
		.w10{
		width:10%;
		}


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

		
.w50{
	width:100%;
}
		
.w70{
	width:100%;
}
	
.w30{
	width:100%;
}
	
.w33{
	width:100%;
}
	
.w40{
	width:100%;
}
	
.w60{
	width:100%;
}

.w25{
width: 50%;
}
	
.w20{
width: 50%;
}	
	
	
}



		.video-section {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		}

		.video-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 0;
		}

		.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 56.25vw; /* 16:9 aspect ratio (9/16 = 0.5625) */
		min-height: 100vh;
		min-width: 177.77vh; /* (16/9)*100 = 177.77 to maintain aspect */
		}

		.video-overlay {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		text-align: center;
		padding: 20px;
		background: rgba(0,0,0,0.3);
		box-sizing: border-box;
		}

		.video-overlay h1 {
		font-size: 3em;
		margin: 0;
		}

		@media (max-width: 768px) {
		.video-overlay h1 {
		font-size: 2em;
		}
		}




		.contenedor {
		height:90vh;
		display: flex;
		background-color: #F5F1ED;
		}



		.col-video {
		width: 66%;
		height: 100%;
		position: relative;
		overflow: hidden;
		}

		.col-video video {
		width: 100%;
		height: 100%;
		object-fit: cover; /* rellena el espacio recortando si es necesario */
		}



		.col-texto {
		width: 33%;
		display: flex;
		flex-direction: column; /* ← Esto los apila */
		justify-content: center; /* Centra verticalmente */
		color: white;
		padding-left:4em;
		text-align: left;

		}


.showpc{
	display: block;
}

.showphone{
	display: none;
}

@media screen and (max-width:768px){	
.showpc{
	display: none;
}

.showphone{
	display: block;
}

}

@media screen and (max-width:1024px){	
	
	
		.contenedor {
		height:auto;
		display: block;
		background-color: #F5F1ED;
		padding-bottom: 3em;
		}

	
		.col-video {
		width:100%;
		height: 100%;
		display: inline-block;
		vertical-align: top;
		position: relative;
		}

	
		.col-texto {
		width:100%;
		display: inline-block;
		vertical-align: top;
		position: relative;
			padding: 0 1em 2em 1em;

		}

	
	
}


.textooverlaycentradi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
}

.textooverlaycentradi *{
	color: white;
	margin: 0px;
}



		.link{
		background: #03D1BD;
		display: inline-block;
		width: auto;
		padding: 20px;
		margin-top: 1em;
		position: relative;
		}

.col-texto .link{
	width: 180px;
}

		.necesidades{
		background: #101920;
		background: -webkit-linear-gradient(0deg,rgba(16, 25, 32, 1) 50%, rgba(255, 255, 255, 1) 50%);
		background: -moz-linear-gradient(0deg,rgba(16, 25, 32, 1) 50%, rgba(255, 255, 255, 1) 50%);
		background: linear-gradient(0deg,rgba(16, 25, 32, 1) 50%, rgba(255, 255, 255, 1) 50%);
		filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr="#101920",
		endColorstr="#FFFFFF",
		GradientType=0
		);
		padding-top:5em;
		margin-bottom: 0px;
		}


		.containersquare {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 50px; /* Espacio entre cuadrados */
		margin-top: 3em;
		}

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

		.containersquare {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px; /* Espacio entre cuadrados */
		margin-top: 3em;
		}
}

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

		.containersquare {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 20px; /* Espacio entre cuadrados */
		margin-top: 3em;
		}
}



		.square {
		aspect-ratio: 1 / 1;
		box-sizing: border-box;

		display: flex;             /* Activa flexbox */
		align-items: center;       /* Centra verticalmente */
		justify-content: center;   /* Centra horizontalmente */
		font-size: 1.5rem;
		font-weight: bold;
		text-align: center;        /* Por si el texto es largo */
		position: relative;
		}

		.containersquare *{
		color: white;
		}

		.sbg1{
		background-image: url("../img/2149937914.jpg");
		background-position: center;
		background-size: 200%;
		transition: all ease 0.5s;
		}

		.sbg2{
		background-image: url("../img/11043.jpg");
		background-position: center;
		background-size: 200%;
		transition: all ease 0.5s;
		}


		.containersquare .sbg1:hover{
		background-size: 250%;
		transition: all ease 0.5s;
		}

		.containersquare .sbg2:hover{
		background-size: 250%;
		transition: all ease 0.5s;
		}

		.alphablack{
		background-color: rgba(0,0,0,0.45);
		height: 100%;
		width: 100%;
		position: absolute;
		z-index: 1;
			transition: all ease 0.3s;
		}
		.info{
		position: relative;
		z-index: 2;
		}



		.lugarideal{
		background: #101920;
		text-align: center;
		margin-top: 0px;
			padding-top: 3em;
		}

		.lugarideal h2{
		color: #03D0B3;
		}

		.lugarideal p{
		color: white;
		}


		.boxcorner{
		position: absolute; width: 100%; height: 100%; left: 0%; top:0%; border: solid 2px white; z-index: 2;transition: all ease 0.3s; opacity: 0;
		}


		.containersquare .boxcorner:hover{
		width: 90%; height: 90%; left: 5%; top:5%; transition: all ease 0.3s; opacity: 1;
		}


		.features-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
		background-color: #101920;
		padding-bottom: 3em;
		}

		.feature {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30px 20px;
		text-align: center;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		}

		.feature:nth-child(4n) {
		border-right: none; /* Quita borde derecho en última columna de cada fila */
		}
		.feature:nth-child(5n) {
		border-bottom: none; /* Quita borde derecho en última columna de cada fila */
		}
		.feature:nth-child(6n) {
		border-bottom: none; /* Quita borde derecho en última columna de cada fila */
		}
		.feature:nth-child(7n) {
		border-bottom: none; /* Quita borde derecho en última columna de cada fila */
		}
		.feature:nth-child(8n) {
		border-bottom: none; /* Quita borde derecho en última columna de cada fila */
		}










		.feature img {
		width: 100px;
		height: auto;
		margin-bottom: 10px;
		filter: brightness(0) saturate(100%) invert(52%) sepia(93%) saturate(400%) hue-rotate(130deg);
		}

		.feature p {
		color: white;
		font-size: 14px;
		margin: 0;
		}

		/* Responsive */
		@media (max-width: 1024px) {
		.features-grid {
		grid-template-columns: repeat(2, 1fr);
		}
		.feature:nth-child(2n) {
		border-right: none;
		}
			
			.feature:nth-child(5n) {
		border-bottom: 1px solid #ccc;
		}
		.feature:nth-child(6n) {
		border-bottom: 1px solid #ccc;
		}
		}



		.totalk{

		height: 50vh;
		background: yellow;
		position: relative;
		}


		.insidetalk{
		position: absolute;
		bottom:3em; /* Espacio desde abajo */
		width: 90%;
		left: 5%;
		}

		.bgtalk{
		background: #101920;
		background: -webkit-linear-gradient(180deg,rgba(16, 25, 32, 1) 70%, rgba(245, 241, 237, 1) 70%);
		background: -moz-linear-gradient(180deg,rgba(16, 25, 32, 1) 70%, rgba(245, 241, 237, 1) 70%);
		background: linear-gradient(180deg,rgba(16, 25, 32, 1) 70%, rgba(245, 241, 237, 1) 70%);
		filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr="#101920",
		endColorstr="#F5F1ED",
		GradientType=0
		);
		}


		footer ul li{
		vertical-align: top;
		display: inline-block;
		margin-left: 25px;
		}


		footer .social{
		text-align: right;
			margin-top: 10px;
		}

		footer hr{
		margin: 2em 0;
		}


		footer{
		background: #F5F1ED;
		padding-bottom: 2em;
		}

.endfooter{
	
}

.linksfooter{
	padding-bottom: 2em;
	border-bottom: solid 1px gray;
	margin-bottom: 1em;
}

.credits h5{
	font-weight: normal;
}

	.contacts{
		text-align: right;
		
	}

@media screen and (max-width:768px){
	
	.credits{
		display: none;
	
}
	
	.contacts{
		padding-top: 1em;
		border-top: solid 1px gray;
		margin-top: 1em;
		text-align: left;
		
	}

		footer .social{
		text-align: center;
		padding-bottom: 1em;
		border-bottom: solid 1px gray;
		margin-bottom: 1em;
		}
	
}



article{
		 position: relative;
	}
	.topproyect *{
		color: white;
	}
	
	.topproyect h1{
		margin: 0px; padding: 0px;
	}
	
	hr{
		margin:2em 0;
		background: lightgray;
	}
	
	
	.highlight{
		background: #F5F1ED;
		padding: 3.5em 2.5em;
		box-sizing: border-box;
		position: relative;
		z-index: 9;
		margin-top: -6em;
	}



	
	.highlight p{
		text-transform: uppercase;
		font-size: 16px;
	}
	
	.highlight h4{
		text-transform: uppercase;
		color: rgba(2,107,116,1.00);
		margin-bottom: 1em;
	}
	
	
	.galery{
		background: #101920;
		padding: 3em 0;
	}
	
	
	
	
	.infoproyecto{
	padding: 5em 0;
		position: relative;
	}
	
	
	.infoproyecto iframe {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height:400px;
  border: 0;
}
	
	.proyectadress{
	border-top:solid 1px lightgray;
	border-bottom:solid  1px lightgray;
	padding: 1em 0;
	margin: 1em 0;
	}
	
	.infoproyecto article:nth-child(1) {
		padding-right: 2em;
		
	}



	
	.publish{
		font-size: 12px;
		color: gray;
		margin-top: 10px;
	}
	
	.aboutproyecto p{
		margin-bottom: 1em;
		text-align: justify;
	}




@media (max-width: 1024px) {
	
		.infoproyecto article:nth-child(1) {
		padding-right: 0em;
		
	}
	
	
		.highlight{
		padding: 1.5em 1.5em;
		margin-top: -6em;
	}
	
		.highlight h4{
		margin-bottom: 0.5em;
	}

}
	

					.resumen{
					/* 2 columnas; usa column-count o columns */
					column-count: 2;          /* o: columns: 2 320px; */
					column-gap: 2rem;         /* espacio entre columnas */
					column-rule: 1px solid #eee; /* (opcional) línea divisoria */
					}

					/* Evitar cortes feos en párrafos o ítems */
					.resumen p,
					.resumen li {
					break-inside: avoid;
					}

					/* Si tienes un título arriba y NO quieres que se parta */
					.titulo{
					column-span: all; /* hace que el h2 ocupe el ancho completo */
					}

					/* Responsive: en pantallas pequeñas, 1 columna */
					@media (max-width: 700px){
					.resumen{ column-count: 1; column-rule: none; }
					}
	
	
	.resumen ul{
		padding-left:1em;
		margin-bottom: 1.5em;
	}
	
	
	
	.galery hr{
		height:1px;
		border: none;
		color: white;
		position: relative;
		margin-top: -6em;
	}
	
	
	.galery h2{
		
		background: #101920;
		width: auto;
		position: relative;
		display: inline-block;
		text-align: center;	
		color: #03d1bd;
		padding:1em ;
		z-index: 2;
	}
	
	
	.galery .container{
		margin-top: 6em;
	}
	
	
	











			.embedmedia{
			background: #101920;
			}

			.proyectolist{
			height: 100vh;
			}

			.imagelock {
			width: 50%;
			max-width: 300px;
			height: auto;
			background-size: auto 100%;
			background-position: center;
			animation: zoomLoop 3s ease-in-out infinite alternate;
			display: block;
			}

			.imagelock-res {
			display: none;
			}

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

			.proyectolist{
			height: auto;
			border-bottom: solid 1px Lightgray;
			padding: 2em 0;
			}

	
			.imagelock {
			display: none;
			}
	
	.imagelock-res {
			width: 100%;
			max-width: 300px;
			height: auto;
			background-size: auto 100%;
			background-position: center;
			animation: zoomLoop 3s ease-in-out infinite alternate;
			display: block;
		margin-bottom: 20px;
			}
	
	.bigpicture{
		display: none;
	}


}

			/* Animación que sube y baja el zoom */
			@keyframes zoomLoop {
			0% {
			background-size: auto 100%;
			}
			100% {
			background-size: auto 140%;
			}
			}

			

			.borderaction{

			border: solid 1px gray; width:100%; height:100%; position: absolute; z-index: 2; left:0%; top:0%; pointer-events: none; transition: all ease 0.3s; opacity: 0;
			}

			.innerproyecto .alphablack{
			background-color: rgba(0,0,0,0.60);
			}
			.innerproyecto:hover .alphablack{
			background-color: rgba(0,0,0,0.00);
			}

			.innerproyecto:hover .borderaction{

			width: 98%; height: 95%;  left:1%; top:2%;  opacity: 1;
			}




			.innerproyecto{
			position: relative;
			}