body {
    margin: 0 auto;
    background-color: #fff;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}



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



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



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

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

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

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

#capa0Body{
	position: relative;
	width: 100%;
	height: auto;	background-color: #f36f21;
	
}


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

}

.fila2Capa0Body{
	position: relative;
	width: 100%;
	height: auto;

	display: inline-table;
}
	.col1Capa0Body{
		float: left;
		width: 40%;
		height: 500px;
		background-color: #f36f21;
	}


	.col2Capa0Body{
		float: left;
		width: 60%;
		height: auto;
	}

	.youLink{
		position: relative;
		width: 50%;
		height: 400px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.txt1Capa0{
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-top: 50px;
		width: 60%;
		font-size: 3em; color: #fff;

	}

	.txt2Capa0{
		position: relative;
		
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 60%;
		font-family: "Roboto-Light";
		font-size: 1.3em;
		color: #2d2d2d;

	}

  @media (max-width: 1200px) {
       .txt1Capa0{
		font-size: 2.5em;
	}


      
        }     



        .txt1Slider{ border: solid; border-width: 0px 0px 0px 4px; border-color: #f36f21; padding: 5px; text-align: left;}
        .txt2Slider{ font-size: 3em;}
        .btnSlider{padding: 10px;  background-color: #f36f21; border: none; color: #fff; font-size: 2em; position: absolute;left: 0;}
      
        @media (max-width: 900px) {
        .txt1Slider{display: none;}
        .txt2Slider{ display: none;}
        .btnSlider{display: none;}
      
        }     




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

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

	.txt1Capa21{
		text-align: center;
		font-size: 3em;
    color: #1c1c1c;

	}
.lineaCentrada {
  width: 90%;
  max-width: 400px;
  height: 5px;
  background-color: #f36f21;
  margin: 0 auto;
}
	
	.container21 {
		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*/
	  }
  
	  .column21 {
		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;
	  }

	  .column21 h1{
		font-size: 4em; 
	  }



    .column21 p{
      font-size: 1.4em; 
      }
  
	  /* Media query para apilar las columnas cuando el ancho de la pantalla es menor a 600px */
	  @media (max-width: 600px) {
		.column21 {
		  flex: 100%;
		}
	  }

         

      
#capa22{
  position: relative;
 background-color: #5d5d5d;
} 

#capa2{
  position: relative;
  width: 80%; display: block; margin-left: auto; margin-right:auto ;
  height: auto; 
}

.lineaIzquierda {
  width: 100%;
  /*max-width: 400px;*/
  height: 5px;
  background-color: #f36f21;
  margin-left: 0;   /* Alineado a la izquierda */
}

.fila1Capa2Body{position: relative; width: 100%; height: 50px;}
.txt1Capa2{text-align: left; font-size: 3.5em; color: #FFF;}

.contTxt2Capa2 {width: 40%;margin: 0 auto;}
.txt2Capa2{text-align: center; font-size: 1.3em;}
@media (max-width: 600px) {
  .txt1Capa2{text-align: center; font-size: 1.5em;}
  .contTxt2Capa2 {width: 70%;margin: 0 auto;}
}   



.fila2Capa2Body {
  display: flex;
  flex-wrap: wrap; 
  gap: 10px; /*para o quitar dar mas espacio entre columnas aplica el mismo espacio para la verticalizacion*/
  width: 100%; /* El contenedor externo ocupa el 80% del ancho de la pantalla */
  margin: 0 auto;
}

.col1Capa2Body {
  flex: 1;
  /*flex: 2 1 200px;*/
 border: solid; border-width: 1px; border-color: #000; background-color: #f36f21;
  padding: 0px;/*es espaciado general para los elementos dentro de la columna*/
  margin: 0px;/*es margen general para la columna de acuerdo al borde del contenedor*/
  box-sizing: border-box; text-align: center; color: #fff;  border-radius: 10px; overflow: hidden;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
}

.col1Capa2Body h1{
  color: #fff;
}

.col1Capa2Body a {
  text-decoration: none;color: inherit;
}

.col1Capa2Body h1 {
  width: 90%; text-align: center; display: block; margin-left: auto; margin-right: auto; font-size: 1.5em;
}

.col1Capa2Body p {
  width: 90%; text-align: center; display: block; margin-left: auto; margin-right: auto; 
}


.btnServ{
  position: relative; display: block; margin-left: auto; margin-right: auto; width: 200px; 
  height: 50px; border-radius: 10px; border: none; background-color: #f36f21; color: #fff; font-size: 1.4em; cursor: pointer;
}

@media (max-width: 600px) {
  /* Aplicar estilos específicos para pantallas con un ancho máximo de 600px */
  .col1Capa2Body {
    flex-basis: 100%; /* Hacer que las columnas ocupen el 100% del ancho en pantallas pequeñas */
  }
}






#capa1Body{
  background-color: #ff6600;
}

       

        .fila2Capa1Body {
            display: flex;
            flex-wrap: wrap; 
            gap: 25px; /*para o quitar dar mas espacio entre columnas aplica el mismo espacio para la verticalizacion*/
            width: 100%; /* El contenedor externo ocupa el 80% del ancho de la pantalla */
            margin: 0 auto;  
          }
      
          .col2Fila2 {
            flex: 1;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            display: flex;           /* hace que sea un contenedor flex */
            flex-direction: column;  /* opcional, si los elementos se apilan verticalmente */
            justify-content: center; /* centra verticalmente */
          }

          .img1Capa1{position: relative; width: 100%; height: 100%; }

          .txt1Capa1Body{
            font-size: 2.5em;
            width: 100%; color: #fff;
            padding-left: 150px;margin: 5px;
          }

          .txt2Capa1Body{
            font-size: 3.5em;color: #fff;padding-left: 150px;margin: 5px;
          }

          .col2Fila2 p{
            font-size: 1.5em;color: #fff;
          }

         
        .btnCont{
          position: relative;top: 20px; width: 300px; height: 60px; color: #ff6600; border: none; border-radius: 10px; 
          background-color:#fff; left: 150px; cursor: pointer; font-size: 2em;
        }

      
          @media (max-width: 1200px) {
                /* Aplicar estilos específicos para pantallas con un ancho máximo de 600px */
                .col2Fila2 {
                  flex-basis: 100%; /* Hacer que las columnas ocupen el 100% del ancho en pantallas pequeñas */
                }

                .txt1Capa1Body{
                    font-size: 1.5em;
                  
                    padding-left: 0px;
                    text-align: center;
                }

                .txt2Capa1Body{
                    font-size: 2.5em;  padding-left: 0px;
                    text-align: center;
                }

                .btnCont{ left: 10px;}

         }     
          

          @media screen and (min-width: 1px) and (max-width: 360px) {
            .fila2Capa1Body{width: 90%;}
           }




#capa3{
  position: relative;
  width: 80%; display: block; margin-left: auto; margin-right:auto ;
  height: auto; 
}


.fila1Capa3Body{position: relative; width: 100%; height: 50px;}
.txt1Capa3{text-align: left; font-size: 3.5em; color: #181818;}

@media (max-width: 600px) {
  .txt1Capa3{text-align: center; font-size: 1.5em;}
  
}   



.fila2Capa3Body {
  display: flex;
  flex-wrap: wrap; 
  gap: 80px; /*para o quitar dar mas espacio entre columnas aplica el mismo espacio para la verticalizacion*/
  width: 100%; /* El contenedor externo ocupa el 80% del ancho de la pantalla */
  margin: 0 auto;
}

.col1Capa3Body {
  flex: 1;
  /*flex: 2 1 200px;*/
 border: solid; border-width: 1px; border-color: #000; background-color: #343434;
  padding: 0px;/*es espaciado general para los elementos dentro de la columna*/
  margin: 0px;/*es margen general para la columna de acuerdo al borde del contenedor*/
  box-sizing: border-box; text-align: center; color: #fff;  border-radius: 10px; overflow: hidden;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
}

.col1Capa3Body h1{
  color: #fff;
}

.col1Capa3Body a {
  text-decoration: none;color: inherit;
}

.col1Capa3Body h1 {
  width: 90%; text-align: center; display: block; margin-left: auto; margin-right: auto; font-size: 1.5em;
}

.col1Capa3Body p {
  width: 100%; text-align: center; display: block; margin-left: auto; margin-right: auto; 
}


@media (max-width: 600px) {
  /* Aplicar estilos específicos para pantallas con un ancho máximo de 600px */
  .col1Capa3Body {
    flex-basis: 100%; /* Hacer que las columnas ocupen el 100% del ancho en pantallas pequeñas */
  }
}








/*Celular portrait*/
@media screen and (min-width: 1px) and (max-width: 360px) {

	


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


	.col2Capa0Body{
		float: left;
		width: 100%;
		height: auto;
	}

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

	.txt1Capa0{
		padding-top: 20px;
		text-align: center;
		width: 100%;
		font-size: 3em;
	}

	.txt2Capa0{
		text-align: center;
		width: 80%;
	}



	

}

/*Celular landscape*/
@media screen and (min-width: 361px) and (max-width: 640px) {

	


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


	.col2Capa0Body{
		float: left;
		width: 100%;
		height: auto;
	}

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

	.txt1Capa0{
		padding-top: 20px;
		text-align: center;
		width: 100%;
		font-size: 3em;
	}

	.txt2Capa0{
		text-align: center;
		width: 80%;
	}


	
}

/*tablet 7.1 portrait*/
@media screen and (min-width: 641px) and (max-width: 1048px) {


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


	.col2Capa0Body{
		float: left;
		width: 100%;
		height: auto;
	}

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

	.txt1Capa0{
		padding-top: 20px;
		text-align: center;
		width: 100%;
		font-size: 3em;
	}

	.txt2Capa0{
		text-align: center;
		width: 80%;
	}
	
	
}