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

/*inicio del CSS de los botones*/
*{
	padding:0px;
	margin:0px;
	text-decoration:none;
	box-sizing: border-box;
}

.container_card{
	width: 100%;
	/*ax-width: 1420px;*/
	/*background-color: aqua;*/
	/*padding: 20px 20px;*/
	/*padding-bottom: 20px;*/
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-image: image(url:);
	background-image: url("../imagen/sateclima-logo-grande.jpg");
	background-position: center bottom;
	background-repeat: no-repeat;
	height: 400px;
}

.card{
	width: 220px;
	position: relative;
	margin: 0px 20px;
	margin-top: 20px;
	font-family: 'open_sansregular', "sans-serif";
	transition: all 650ms;	
}
/*aqui es el efecto de movimiento del boton*/
.card:hover >.info_description{
	margin-top: -18px;
}

.card:hover .icon{
	margin-top: -90px;
}

.icon {
	width: 100%;
	height: 240px;
	background-color: #d1d7d4;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff0000+0,ff0000+31,d1d7d4+71 */
	background: #ff0000; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff0000 0%, #ff0000 31%, #e9ecea 71%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ff0000 0%,#ff0000 31%,#e9ecea 71%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ff0000 0%,#ff0000 31%,#e9ecea 71%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#e9ecea',GradientType=0 ); /* IE6-9 */
	padding: 9px;
	border-radius: 22px;
	display: flex;
	position: relative;
	z-index: 15;
	flex-wrap: wrap;
	justify-content: center;
	transition: all 650ms cubic-bezier(0.1,0,0,1);
}

.icon img{
	font-size: 15px;
	border-radius: 13px 13px 0px 0px;
}

.titulo-boton{
	font-size: 21px;
	margin-top: 10px;
	font-family: 'open_sansbold', "sans-serif";
	letter-spacing: 0.5px;
	line-height : 25px;
	text-align: left;
	color: #e00000;

}

.txt-descrip-boton {
	margin-top: -212px;
	margin-left: -94px;
	font-family: 'open_sansbold', "sans-serif";
	font-size:16px;
	font-weight: 500;
	line-height : 22px;
	
}

.info_description {
	width: 100%;
	height: 220px;
	color: #474747;
	background-color: /*rgba(244,244,244,0.9)*/#e9ecea;
	padding: 14px 10px;
	margin-top: -220px;
	border-radius: 0px 0px 22px 22px;
	transition: all 650ms cubic-bezier(0.1,0,0,1);
	position: relative;
	z-index: 14;
}

.info_description p {
	font-size: 14px;
	margin-top: 4px;
	/* desabilitado para esconder texto esto es sancionado por google*/
	/*display: -webkit-box;
	display: -moz-box;
	display:  box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
	webkit-line-clamp; 5;
	line-clamp; 5;
	overflow: hidden;*/
}

.info_description input{
	/*margin: 12px 0px;*/
	margin-top: 17px;
	padding: 9px 34px;
	background-color: #FF0000;
	color: #ffffff;
	border-radius: 3px;
	font-weight: 500;
	font-size: 13.5px;
	cursor: pointer;
	border: none;
	/*box-shadow: 1px 1px 16px 0px #20202040;*/
}

.info_description input:hover{
	background-color: #626161;
}
/*final del CSS de los botones*/


.logotipo-presentacion{
	display: none;
}

.txt-presentacion{
	width: 80%;
	margin: auto;
	margin-top: 22px;
	margin-bottom: 50px;
}
/* final botones*/

/* diseño de marcas */
.div-contenedor-marcas{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*background-color: aqua;*/
}
.div-marcas{
	width: 45%;
	max-width: 900px;
	margin: 0px 20px;
	margin-bottom: 24px;
	/*background-color: aliceblue;*/
}
.h2-marca{
	font-family: 'open_sansregular', "sans-serif";
	font-size: 22px;
	margin: 0;
	margin-top: 2px;
	margin-bottom: 16px;
	text-align: center;
}
.pie-marca{
	font-family: 'open_sanssemibold', 'open_sansregular', "sans-serif";
	font-size: 16px;
	margin: 0;
	margin-top: 4px;
	margin-bottom: 15px;
	text-align: center;
}

/* diseño de productos mod01 */
.imagen-mod01{
	grid-area: imagen-mod01;
}
.titulos-mod01{
	grid-area: titulos-mod01;
}
.texto-mod01{
	grid-area: texto-mod01;
}
.producto-mod01{
	width: 100%;
	margin-right: 20px;
	/*background-color: aqua;*/
	border-radius: 20px;
	margin-top: 40px;
	padding-right: 34px;
	display: grid;
	gap:0px;
	grid-template-columns: auto 420px;
	grid-template-areas: 
		"imagen-mod01 titulos-mod01"
		"imagen-mod01 texto-mod01";
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(left,  #ffffff 4%, #e9ecea 65%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #ffffff 4%,#e9ecea 65%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #ffffff 4%,#e9ecea 65%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9ecea',GradientType=1 ); /* IE6-9 */
}

.pantallav2{
	display: none;
}

.txt-producto{
	margin-top: 36px;
	margin-bottom: 16px;
	font-size: 14px;
	line-height : 25px;
}

/* diseño de productos mod02 */
.imagen-mod02{
	grid-area: imagen-mod02;
	z-index:1;
}
.imagen-mod02_1{
	grid-area: imagen-mod02_1;
	z-index:1;
}
.imagen-mod02_2{
	grid-area: imagen-mod02_2;
	z-index:1;
}
.titulos-mod02{
	grid-area: titulos-mod02;
	z-index:5;
	margin-bottom: 24px;
}
.texto-mod02{
	grid-area: texto-mod02;
	z-index:4;
}
.producto-mod02{
	width: 100%;
	margin-right: 20px;
	/*background-color: aqua;*/
	border-radius: 20px;
	margin-top: 40px;
	padding-right: 34px;
	display: grid;
	gap:0px;
	grid-template-columns: auto 420px;
	grid-template-areas: 
		"imagen-mod02_1 titulos-mod02"
		"imagen-mod02 texto-mod02";
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(left,  #ffffff 4%, #e9ecea 65%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #ffffff 4%,#e9ecea 65%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #ffffff 4%,#e9ecea 65%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9ecea',GradientType=1 ); /* IE6-9 */
}
.img_mod02-pantalla2{
	display: none;
}
.pantallamod2-v2{
	display: none;
}
.producto-mod02_2{
	width: 100%;
	margin-right: 20px;
	/*background-color: aqua;*/
	border-radius: 20px;
	margin-top: -590px;
	padding-right: 34px;
	display: grid;
	gap:0px;
	grid-template-columns: auto 410px;
	grid-template-areas: 
		"imagen-mod02 texto-mod02";
	pointer-events: none;	
}
.pantallav3{
	display: none;
}
/* diseño de productos mod02 */

.titulos-mod03{
	grid-area: titulos-mod03;
	z-index: 5;
	width: 90%;
	max-width: 700px;
	margin: auto;
	/*background-color: aqua;*/
	margin-top: -20px;
}
.imagen-mod03{
	grid-area: imagen-mod03;
	z-index:1;
	width: 90%;
	max-width: 900px;
	margin: auto;
	padding-left: 20px;
}
.texto-mod03{
	grid-area: texto-mod03;
	z-index:4;
	width: 90%;
	max-width: 900px;
	margin: auto;
}

.producto-mod03{
	width: 90%;
	max-width: 1200px;
	/*background-color: aqua;*/
	margin: auto;
	display: grid;
	gap:0px;
	grid-template-columns: 1fr;
	grid-template-areas:
		"titulos-mod03"
		"imagen-mod03"
		"texto-mod03";
}
/* DISEÑO DE PRODUCTO 03*/
.txtsobreimg{
	z-index: 3;
}

.imgindustrial{
	margin-top: -70px;
}

.imgmantenimiento{
	margin-top: -50px;
}

.imgasesoramiento{
	margin-top: -40px;
}

/* TAMAÑOS DE PANTALLA MENORES */

@media screen and (max-width:1315px) {
	.container_card{
		margin-top: 20px;
		height: 650px;
	}
	
	.c5{
		margin-top: -100px;
	}
}

@media screen and (max-width:1170px){
	.producto-mod02{
		margin-top: 20px;
	}
	.producto-mod02_2{
		/*background-color: aqua;*/
		margin-top: -536px;
	}
	.pantallav2{
		display: block;
	}
	.titulos-mod02 h1 {
		margin-top: 26px;
	}
	
	.producto-mod01{
		grid-template-columns: 1fr;
		grid-template-areas:
			"titulos-mod01"
			"imagen-mod01"
			"texto-mod01";
		padding-right: 0px;
	}
	.pantalla-v2{
		display: grid;
	}
	.txt-producto{
		display: none;
	}
	.imagen-mod01{
		width: auto;
		margin: auto;
		margin-top: -80px;
		z-index:1;
	}
	.titulos-mod01{
		width: auto;
		margin: auto;
		margin-top: -26px;
		z-index:5
	}
	.texto-mod01{
		width: 90%;
		max-width: 900px;
		margin: auto;
		margin-top: -30px;
		margin-bottom: 26px;
		z-index:4
	}
	.btn-producto {
		margin-bottom: 0px;
	}
	.img-reparaciones{
		margin-top: 40px;
		margin-bottom: 20px;
	}
}

@media screen and (max-width:1058px){
	.br-productos{
		display: none;
	}
	.img_mod02-pantalla2{
	display: block;
		width: 90%;
		max-width: 900px;
		margin: auto;
}
	.titulos-mod02-h {
		width: 90%;
		max-width: 900px;
		margin: auto;
		
	}
	.titulos-mod02{
		width:90%;
		max-width: 700px;
		margin: auto;
	}
	.producto-mod02_2{
		display: none;
	}
	.producto-mod02{
		grid-template-columns: 1fr;
		grid-template-areas: 
			"titulos-mod02"
			"imagen-mod02_1"
			"texto-mod02";
		justify-content: center;
		padding: 0px;
		margin: 0px;
		margin-top: 40px;
	}
	.txt-producto2{
		margin-top: 20px;
		margin-bottom: 20px;
		display: none;
	}
	.pantallamod2-v2{
		display: grid;
		width: 90%;
		max-width: 900px;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.container_card{
		height: 678px;
	}
	
	.c4{
		margin-top: -90px;
	}
	
	.c5{
		margin-top: -90px;
	}
	.txt-presentacion{
		width: 90%;
	}
	.div-marcas{
		width: 90%;
		max-width: 900px;
		}
	.marca-div2{
		margin-top: 60px;
	}
	.marca2 {
		margin-top: 30px;
	}
}
@media screen and (max-width:900px){
	.imagen-mod01{
		margin-top: -64px;
	}
	.titulos-mod01{
		margin-top: -26px;
	}
}

@media screen and (max-width:796px){
	.container_card{
		height: auto;
		background: none;
	}
	
	.c4{
		margin-top: 20px;
	}
	
	.c5{
		margin-top: 20px;
	}
	.logotipo-presentacion{
		display: block;
		width: 70%;
		max-width: 500px;
		margin: auto;
		margin-top: 40px;
		}
	.txt-presentacion{
		width: 96%;
	}
}
@media screen and (max-width:740px){
	.producto-mod01{
		margin-top: 20px;
	}
	.imagen-mod01{
		margin-top: -10px;
	}
		.titulos-mod01{
		margin-top: -30px;
	}
	.texto-mod01{
		margin-top: -12px;
	}
	.marca2 {
		margin-top: 20px;
	}
}

@media screen and (max-width:950px){
	.titulo-contacto{
		font-size: 46px;
		padding: 8px 15px 8px 15px;
	}
}

@media screen and (max-width:800px){
	.imgindustrial{
		margin-top: -45px;
	}
	.imgmantenimiento{
	margin-top: -30px;
}
}

@media screen and (max-width:750px){
	.titulo-contacto{
		font-size: 38px;
		padding: 6px 12px 6px 12px;
	}
}

@media screen and (max-width:743px){
	.img-reparaciones{
		margin-top: 0px;
		margin-bottom: 10px;
	}
}

@media screen and (max-width:620px){
	.titulo-contacto{
		font-size: 33px;
		padding: 3px 10px 3px 10px;
	}
}
@media screen and (max-width:600px){
	.imgindustrial{
		margin-top: -30px;
	}
	.imgmantenimiento{
	margin-top: -15px;
}
}

@media screen and (max-width:1000px){
	.imgasesoramiento{
		margin-top: -20px;
	}
}

@media screen and (max-width:600px){
	.imgasesoramiento{
		margin-top: -10px;
	}
}

@media screen and (max-width:1350px){
	.separadorproducto{
		margin-bottom: 100px;
		display: block;
	}
}

@media screen and (max-width:1250px){
	.separadorproducto{
		margin-bottom: 140px;
		display: block;
	}
}

@media screen and (max-width:1170px){
	.separadorproducto{
		margin-bottom: 120px;
		display: block;
	}
}

@media screen and (max-width:1100px){
	.separadorproducto{
		margin-bottom: 155px;
		display: block;
	}
}

@media screen and (max-width:1058px){
	.separadorproducto{
		margin-bottom: 40px;
		display: block;
	}
}