@charset "utf-8";
body {
    margin: 0 auto;
    background-color: #fff;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}



@font-face {
    font-family: "merri";
    src: url(../fonts/merri.otf) format("opentype")
}


@font-face {
    font-family: "snf";
    src: url(../fonts/snf.ttf) format("truetype")
}


@font-face {
    font-family: "Dulcelin";
    src: url(../fonts/Dulcelin.otf) format("opentype")
}

@font-face {
    font-family: "east";
    src: url(../fonts/east.otf) format("opentype")
}


@font-face {
    font-family: "carson";
    src: url(../fonts/carson.otf) format("opentype")
}

@font-face {
    font-family: "Roboto-Light";
    src: url(../fonts/Roboto-Light.ttf) format("truetype")
}


@font-face {
    font-family: "dacila";
    src: url(../fonts/dacila.otf) format("opentype")
}

@font-face {
    font-family: "jennifer";
    src: url(../fonts/jennifer.ttf) format("truetype")
}


h1 {
    font-family: "Roboto-Light";
}

h2 {
    font-family: "Roboto-Light";
}

p {
    font-family: "Roboto-Light";
}


a {
    font-family: "snf";
}


#capa1Body{
	position: relative;
	width: 100%;
	height: auto;
	background-image: url(../imagenes/fondo2.png); background-size: cover; background-repeat: no-repeat;
}


	.fila1Capa1Body{
		position: relative;
		width: 100%;
		height: 100px;
	}

	.txt1Capa1Body{
		position: relative;
		text-align: center;
		font-size: 2em;
	}


	.txt2Capa1Body{
		position: relative;
		text-align: center;
		font-size: 2.5em;
		color: #ff6100;
	}

	.icon{position: relative; left: -30px; width: 40px; height: auto;}





#capa2Body{
	position: relative;
	width: 100%;
	height: auto;
}

	.fila1Capa2Body{
		position: relative;
		display: inline-table;
		width: 100%;
		height: 40px;
	}

	.txt1Capa2{
		text-align: center;
		font-size: 3em;

	}

	
	.container {
		display: flex;
		justify-content: center; /* Centra las columnas horizontalmente */
		gap: 20px; /* Agrega espacio entre las columnas */
		flex-wrap: wrap;
		padding: 30px; /* Agrega espacio alrededor del contenedor (60/2 = 30) */
		box-sizing: border-box; /* Incluye el padding en el tamaño total del contenedor */
		width: 80%; /* El contenedor externo ocupa el 80% del ancho de la pantalla */
        margin: 0 auto; /*el cojntenedor se establece como centrado*/
	  }
  
	  .column {
		flex: 1; /* Calcula el ancho de cada columna con espacio */
		box-sizing: border-box;
		padding: 20px;
		/*background-color: #e74c3c;  Fondo de las columnas */text-align: center;
	  }

	  .column h1{
		font-size: 4em; color: #86ae34;
	  }
  
	  /* Media query para apilar las columnas cuando el ancho de la pantalla es menor a 600px */
	  @media (max-width: 600px) {
		.column {
		  flex: 100%;
		}
	  }



#capa33{
	position: relative;
	width: 100%;
	height: auto;
	background-color: #f2f1ed;
}	  

.fila1Capa33{
	position: relative;
	width: 100%;
	height: 100px;
}

.lnkProds{text-decoration: none;}

	.container2 {
		display: flex;
		flex-wrap: wrap; 
		gap: 0px; /*para o quitar dar mas espacio entre columnas aplica el mismo espacio para la verticalizacion*/
		width: 80%; /* El contenedor externo ocupa el 80% del ancho de la pantalla */
		margin: 0 auto;
	  }
  
	  .column2 {
		flex: 1;
		/*flex: 2 1 200px;*/
		background-color: #188972;
		padding: 0px;/*es espaciado general para los elementos dentro de la columna*/
		margin:5px;/*es margen general para la columna de acuerdo al borde del contenedor*/
		box-sizing: border-box; text-align: center; color: #fff; cursor: pointer; transition:  0.5s ease;
	  }

	  .column2 h2{
		font-size: 1.5em; color: #fff;
	  }
	  .column2:hover{
		opacity: 0.4;
	  }
  
	  /* Media query para apilar las columnas cuando el ancho de la pantalla es menor a 600px */
	  @media (max-width: 600px) {
		.column2 {
		  flex: 100%;
		}
	  }





#capa3Body{
	position: relative;
	width: 100%;
	height: auto;
}

	.fila1Capa3Body{
		position: relative;
		display: inline-table;
		width: 100%;
		height: auto;
	}

	.col1Capa3Body{

		float: left;
		width: 60%;
		height: auto;
		

	}

	.col2Capa3Body{

		float: left;
		width: 40%;
		height: auto; 
		

	}

	.imgEmpresa{
		position: relative;
		width: 100%;
		height:auto;
		display: block;
		margin-left: auto;
		margin-right: auto;  
	}


	.txt1Capa3Body{position: relative; font-size: 2em; color: #202c9d; margin-left: 10%; padding-top: 50px;}
	.txt2Capa3Body{position: relative; font-size: 2.5em; color: #4c4b4b; margin-left: 10%; padding-top: 10px;}
	.txt3Capa3Body{position: relative; font-size: 1.4em; color: #676666; margin-left: 10%; padding-top: 10px; width: 70%; text-align: justify;}

	.fila2Capa3Body{
		position: relative; width: 100%; height: 50px;

	}



@media screen and (min-width: 1px) and (max-width: 360px) {


	.col1Capa2Body{position: relative; width: 100%; height: 800px;  background-repeat: no-repeat; background-size: cover; }


	.fila2Capa3Body{ height: 50px;}
	.col1Capa3Body{position: relative; width: 100%; height: auto;}

	.col2Capa3Body{position: relative; width: 100%; height: auto;}

	.txt1Capa3Body{position: relative; font-size: 2em; color: #202c9d; margin-left: 10%; padding-top: 10px;}
	


	
}
    
    
@media screen and (min-width: 361px) and (max-width: 640px) {

	.col1Capa2Body{position: relative; width: 100%; height: 1000px;  background-repeat: no-repeat; background-size: cover; }
	

	.fila2Capa3Body{ height: 50px;}
	.col1Capa3Body{position: relative; width: 100%; height: auto;}

	.col2Capa3Body{position: relative; width: 100%; height: auto;}

	.txt1Capa3Body{position: relative; font-size: 2em; color: #202c9d; margin-left: 10%; padding-top: 10px;}
	
	

}
    
    
@media screen and (min-width: 641px) and (max-width: 960px){


	.fila2Capa3Body{ height: 50px;}
	.col1Capa3Body{position: relative; width: 100%; height: auto;}

	.col2Capa3Body{position: relative; width: 100%; height: auto;}

	.txt1Capa3Body{position: relative; font-size: 2em; color: #202c9d; margin-left: 10%; padding-top: 10px;}
	
	
	
}
    
    
@media screen and (min-width: 961px) and (max-width: 1210px) {


			
}