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


@import url('fonts.googleapis.com');

:root {
    
  --font-family-primaria: "Varien", sans-serif;
 
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  
  
}

.main{
  display: flex;
  justify-content: center;
  position: relative;
 

}
.fondo1{
  position: absolute;
  z-index: -1;  
  top: 0;
  right:42%; 
  animation: dezplazamiento 1s;
  height: 100%;
 
}
#img{
  width: 450px;
}
.fondo1 img{
    height: 100%;
  
}
.fondo2{
  position: absolute;
   z-index: -1;
   top: -70px;
   left: 200px;
   animation: diagarriba 1s;
}
.fondo3{
  position: absolute;
   z-index: -1;
   top: -70px;
   left: 0px;
   animation: diagarriba 1s;
   
}
.fondo4{
  position: absolute;
   z-index: -1;
   bottom: -100px;
   left: 100px;
   animation: diagabajo 1s;
   
}
.fondo5{
  position: absolute;
   z-index: -1;
   left:-350px ;
   bottom: 50px;
   animation: diagabajo 1s;
}
.banner{
display: flex;
position: relative;
overflow: hidden;
z-index: 5;
max-width: 1600px;



} 
.butn img{
  width: 170px;
  

}

.butn{
  transition: transform .3s;
}

.butn:hover{
  transform: scale(1.2);
  
}


.izquierdabanner{
  display: flex;
  width: 50%;
  
  padding: 40px;  
  align-items: center;
}

.contenidop{
  width: 100%;
  
  margin-top: 30px;
  margin-bottom: 60px;
  font-size: 15px ;
  color: white;
  font-family: 'Poppins', sans-serif;
  
}

.contenidoh{
  width: 80%;
  font-size: 40px;
 
  color: white;
}

.btnsDescarga{
  display: flex;
  justify-content:space-evenly;
  align-items: center; 


}

.celphoneimg img {
 width: 240px;
 animation: opacidad 2s;
  

}

.contenedorimg {
  margin: 40px;
  
  position: relative;
  

  
}
.rgl1{
position: absolute;
bottom: 30px;
left: 60px;
width: 100px;


}
.rgl1 img{
  width: 100%;
  animation: flotar 3s ease-in-out infinite;
  width: 100%;
}

.rgl2{
position: absolute;
top: 0;
right: 50px;
 
 width: 100px;
}
.rgl2 img{
  width: 100%;
  animation: flotar2 3s ease-in-out infinite;
}

@keyframes flotar {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

@keyframes flotar2 {
  0% { transform: translateY(-20px); }
  50% { transform: translateY(0px); }
  100% { transform: translateY(-20px); }
  
}



.derechabanner{
  
  width: 50%;
  text-align: center;
  margin: auto;
  padding-top: 40px;
  padding-bottom:40px ;
}

.valor{
  display: flex;
  justify-content: center;

}


.contValor{
  max-width: 1600px;
  
  display: flex;
   justify-content: center;  
  
  
}

.valorizq{
 
  display: flex;
  justify-content: right;  
  width: 35%;
  margin-top: 40px;
  margin-bottom: 40px;
  
  

}

.imgcel{
  background-image: url('/images/app-madero/fondo1.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 400px;
  
  position: relative;
  
  
}

.imgcel img{
  width: 100%;
}

.valorder{

    display: flex;
    
    margin-top: 40px;
  margin-bottom: 40px;
  padding: 90px;
    width: 50%;
   
}

.sparkie{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 260px;

    
    
}
.sparkie img {
  width: 100%;
}

.contenidovalor p {
  font-family: 'Poppins', sans-serif;

}

.teofrece{
  display: flex;
  justify-content: center;

}

.conteofrece{
 background-image:url('/images/app-madero/fondo2.png') ;
 background-repeat: no-repeat;
 background-size: cover;
 max-width: 1000px;


}

.ofrecetop{
  margin-top:40px ;
  margin-bottom:20px ;
 text-align: center;
 
}

.ofrecetop h2 {
  margin: 0;
  padding: 0;
  color: transparent;            
  -webkit-text-stroke: 1px green; 
  
}

.ofrecebotton{
 
  display: flex;
  justify-content: center;
  
}

.infoizq{
  
  display: flex;
  flex-direction: column;
  justify-content:space-evenly;
   width: 33%;

}



.imgcel2{
  width: 250px;
}

.imgcel2 img {
  width: 100%;
}

.infoder{
  
  display: flex;
  flex-direction: column;
  justify-content:space-evenly;
  width: 33%;

}

.infogrid{
  
  width: 70%;
}

.infogrid h2{
  font-size: 20px; 

}
.infogrid p{
font-size: 15px;
 font-family: 'Poppins', sans-serif;
 
}
.infogrid2{
  margin-left: 20px;
  width: 70%;
}

.infogrid2 h2{
  font-size: 20px; 
  text-align: right;

}
.infogrid2 p{
font-size: 15px;
 font-family: 'Poppins', sans-serif;
 text-align: right;
 
}

.icon{
  width: 70px;
  

}

.icon img{
  width: 100%;
}
.grid{
  display: flex;
  
  height: 160px;
}
.grid2{
  display: flex;
  
  height: 160px;
}

.iframe{
  display: flex;
  justify-content: center;

}

.contenedoriframe{
  width: 1000px;  
  background-image: url('/images/app-madero/fondo2.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  

}

.video{

  margin-top: 100px;
  margin-bottom: 100px;
  
}

.video iframe{
  width: 700px;
  height: 400px;
}

.celphones{
  display: flex;
  justify-content: center;
  

}


.contcellphone{
  display: flex;
  margin: 100px;
   width: 1600px;
    height: 520px;
    position: relative;
     overflow: hidden;

}



.descargarla{

  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}

.contdescargarla{
  display: flex;
  flex-direction: column; 

}

.botonesdescarga{
  display: flex;
  justify-content: space-evenly;

}
.desctittle{
  text-align: center;

}

.btnab{
  width: 200px;
  margin: 20px;
  transition: transform .3s;

}
.btnab:hover{
  transform: scale(1.2);
  
}

.btnab img{
  width: 100%;
}



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

/* base */


.cellimg{
    position: absolute;
    top: 50%;
    width: 500px;
    transform: translateY(-50%);
    animation: carouselZoom 9s infinite ease-in-out;
     
}

/* delays escalonados */
.cellimg:nth-child(1){ animation-delay: 0s; }
.cellimg:nth-child(2){ animation-delay: -3s; }
.cellimg:nth-child(3){ animation-delay: -6s; }

.cellimg img{
    width: 100%;
    display: block;
   
}

/* animación circular real */
@keyframes carouselZoom {
    0%{
        left: 0%;
        transform: translate(0, -50%) scale(0.8);
        opacity: 1;
        z-index: 1;
    }

    33%{
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        z-index: 3;
    }

    66%{
        left: 100%;
        transform: translate(-100%, -50%) scale(0.8);
        opacity: 1;
        z-index: 1;
    }

    100%{
        left: 0%;
        transform: translate(0, -50%) scale(0.8);
        opacity: 1;
        z-index: 1;
    }
}


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


  .hero-bg {

    object-position: 0% center;

  }

  .imgcel{
    width: 100%;
  }

.banner{
  flex-direction: column-reverse;
  
}

.derechabanner{
 display: none;


}

.izquierdabanner{
  text-align: center;
  padding: 0;
  padding-bottom: 40px;
  width: 100%;
}

.contenidoh{
  width: 100%;
  
  margin-top: 60px;
  margin-bottom: 60px;
}

.contenidop{

  margin-top: 60px;
  font-size: 20px; 

}

.contValor{
  
  flex-direction: column;
}

.valorizq{
 
  width: 100%;
  
   justify-content: center;
  


}

.btnsDescarga{
  width: 100%;
}

.butn{
  margin: 10px;
}

.butn img{
  width: 100%;

}


.valorder{
  
   width: 100%;
   margin: 0;
   padding: 0;
    text-align: center;
  


}
.conteofrece{
  
  padding-bottom: 20px;
}

.ofrecebotton{
  flex-direction: column;
}

.infoizq{
  width: 100%;
  
  margin: 0;
  padding: 0;
  order: 2;
  
}

.infoder{
  width: 100%;
  order: 2;
  
}

.infomiddle{
  width: 100%;
  display: flex;
  justify-content: center;
 
  order: 1;
 
}
.grid{
  height: auto;
  
  justify-content: space-evenly
  
  
  
}
.grid2{
  height: auto;
  
  justify-content: center;
  flex-direction: row-reverse;
  
}

.infogrid2 h2{
  text-align: left;
}

.infogrid2 p{
  
  text-align: left;
}

.video iframe{

  width: 100%;
}

.video{
 
  width: 100%;
}


.btnab{
  width: auto;
}




.contcellphone{
 
 height: 500px;
 margin: 0;
 padding: 0;
 
 

   
}

.celphones{
  padding-bottom: 60px;
  padding-top: 60px;
}



.slider{
  padding-top:20px ;  
  
}
@keyframes carouselZoom {
    0%{
        left: 0%;
        transform: translate(20%, -50%) scale(0.8);
        opacity: 1;
        z-index: 1;
    }

    33%{
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        z-index: 3;
    }

    66%{
        left: 70%;
        transform: translate(-100%, -50%) scale(0.8);
        opacity: 1;
        z-index: 1;
    }

    100%{
        left: 0%;
        transform: translate(20%, -50%) scale(0.8);
        opacity: 1;
        z-index: 1;
    }
}



}