@charset "utf-8";
@import url("../css/variables.css");
@import url("../css/menu.css");
@import url("../css/columnas.css");
@import url("../css/banner.css");
@import url("../css/proyectos.css");
@import url("../css/carrusel-equipo.css");
@import url("../css/contacto-index.css");
@import url("../css/contacto.css");
@import url("../css/sociales.css");
@import url("../css/boton-flotante.css");
@import url("../css/footer.css");
@import url("../css/navegacion-tab.css");
@import url("../css/parallax.css");
@import url("../iconos-web/iconos-web.css");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-textos);
	font-weight: 300;
	font-size: 15pt;
	color: var(--color1);
	line-height: 140%;
}
section {
	margin: 30px 0;
}
section img {
	max-width: 100%;
}
.contenedor {
	width: var(--ancho);
	max-width: var(--ancho-max);
	margin: auto;
	overflow: hidden;
	padding: 0;
	z-index: -2;
}
.contenedor-item {
	width: 100%;
}
.contenedor-item .foto-contacto img {
	width: 100%;
	height: 100%;
	display: block;
}
.contenedor-iconos {
	width: 95%;
	display: flex;
	margin-top: 25px;
	justify-content: center;
	align-content: flex-start;
	gap: 15px;
	margin: auto;
	flex-wrap: wrap;
	/* margin-bottom: 20px; */
	/* position: relative; */
}
.iconos-index {
	width: 120px;
	text-align: center;
}
.iconos-index .iconos {
	width: 65px;
}
.iconos-index p {
	font-size: 9pt;
	line-height: 100%;
	font-weight: 700;
	margin: 0;
	padding: 0;
	color: var(--color4);
}
/* .item {
	margin-bottom: 25px;
} */
.item img {
	max-width: 100%;
	/* display: block; */
}
ul {
	margin-left: 25px;
	text-align: left;
}
.icono {
	width: 120px;
	height: 120px;
	margin: auto;
	border-radius: 100%;
	border: 3px solid var(--color3);
	text-align: center;
	padding: 15px;
}
.icono img {
	width: 100%;
}
.subtitulos {
	margin-bottom: 25px;
	color: var(--color2);
	text-transform: uppercase;
	font-size: 19pt;
}
.subtitulos:nth-child(odd) {
	margin-top: 30px;
}
.bajada {
	width: 70%;
	margin: 25px auto;
}
.cabecera {
	width: 100%;
	height: 200px;
	overflow: hidden;
	object-fit: cover;
	box-shadow: 0px 5px 15px var(--sombras);
	position: relative;
	z-index: -1;
}
.cabecera img {
	width: 100%;
}
.cabecera::before {
  content: "";
  /*background: #1e5872; // remplazalo por el color que desees;*/
  background: linear-gradient(180deg,#44546a,#44546a00);
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.5;/*hasta acaa la magia*/
}
.cabecera .titulos {
	position: absolute;
	bottom: 15px;
	left: 20px;
	z-index: 0;
	color: var(--color4);
	background: var(--color5);
	letter-spacing: 1px;
	padding: 5px 25px;
	border-radius: 20px;
	font-weight: 700;
 text-transform: uppercase;
}
.proyectos p {
	padding: 7px;
	background: var(--color4);
	border-bottom: 1px solid var(--color5);
}

.proyectos p:nth-child(odd) {
	background: var(--color7);
	/* border-bottom: 1px solid var(--color1); */
}
.productos {
	padding: 0;
	z-index: 0;
	/*border-top: 1px solid var(--color1);*/
	/* border-bottom: 1px solid var(--color1); */
}
.contenedor__productos {
	width: 100%;
	font-size: 12pt;
	display: flex;
	justify-content: space-between;
	margin: 25px 0;
	padding: 0;
	flex-wrap: wrap;
}
.contenedor__productos:last-child {
	margin: 0;
}
.item__productos__iconos img {
	width: 100%;
}
.item__productos__iconos {
	width: 20%;
}
.item__productos {
	width: 75%;
}
.contenedor__productos .tit {
	color: var(--color3);
	margin-bottom: 25px;
	font-weight: bold;
}
.item__productos .tit {
	font-weight: bold;
	line-height: 100%;
	color: var(--color2);
	margin: 0;
	padding: 0;
}
.item__productos p {
	margin-top: 7px;
	padding: 0;
	line-height: 100%;
}
.foto__productos {
	/* width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end; */
	display: none;
}
.foto-compu {
	display: none;
	max-width: 100%;
}

.foto-compu img {
    margin-top:0px;
}

.foto-mobile {
	max-width: 100%;
	height: auto;
}
.compu {
	display: none;
}
.flex {
	width: 100%;
	margin-top: 20px;
	padding: 20px;
	border: var(--bordes);
}
.boton-servicio,
.boton-servicio1 {
	background: var(--color2);
	padding: 10px 15px;
	color: var(--color4); 
	margin: 20px auto;
	text-align: center;
	transition: all .5s ease-in-out;
}
.boton-servicio1 {
	width: 120px;
}
.boton-servicio:hover,
.boton-servicio1:hover {
	background: var(--color1);
	color: var(--color4);
}
.foto-servicios {
	margin-top: 25px;
}
.contenedor-clientes {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	}
.logo-clientes {
	width: 45%;
	padding: 10px;
	border: var(--bordes);
	margin-bottom: 25px;
}
.justify-center {
	justify-content: center;
}
.justify-around {
	justify-content: space-around;
}
.contenedor__btn {
	display: flex;
	justify-content: center;
	align-content: center;
	gap: 10px;
}
.btn__volver {
	/* width: 100px; */
	position: fixed;
	bottom: 270px;
	right: 0;
	background: var(--color1);
	color: var(--color4);
	padding: 3px 7px;
	border-radius: 15px 0px 0 15px;
	transition: all .4s ease-in-out;
}
.btn__volver:hover {
	background: var(--color2);
	color: var(--color4);
}
.flechita {
	font-size: 10pt;
	color: var(--color4);
	margin-right: 5px;
	padding-right: 5px;
	border-right: 1px solid var(--color4);
}
main {
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0;
	padding: 0;
}
main .arbolito img {
	width: 100%;
}
main .arbolito {
	position: absolute;
	width: 70px;
	bottom: -45px;
	right: 0;
	display: inline-block;
}
/* DESDE */
@media screen and (min-width: 768px) {
	.contenedor-iconos {
		width: 95%;
		display: flex;
		margin-top: 25px;
		justify-content: center;
		align-content: center;
		margin-bottom: 30px;
		position: relative;
	}
	.contenedor-item {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.foto-mobile {
		display: none;
	}
	.foto-compu {
		display: block;
		max-width: 100%;
	}
	.mobile {
		display: none;
	}
	.compu {
		display: block;
	}
	.cabecera {
	height: 400px;
}
.flex {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.foto-servicios {
	margin-top: 0;
}
.logo-clientes {
	width: 185px;
}

.cabecera .titulos {
	left: 55px;
}
.contenedor__productos {
	width: 80%;
	font-size: 15pt;
}
.item__productos__iconos {
	width: 10%;
}

.item__productos {
	width: 85%;
}
.foto__productos {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
}

main .arbolito {
	position: absolute;
	width: 100px;
}

}


.contenedor-galeria{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}