/* CSS Document */

/*TIPOGRAFÍA ROBOTO */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,900);

/*COLORES UTILIZADOS:
#d64746 ROJO
#f7b23c AMARILLO
#4faca7 VERDE
#5f5354 MARRON
#F3F0EC BLANCO */

*{box-sizing:border-box; margin: 0; padding: 0;} /*esto es para evitar problemas con la sumatoria de margin y padding de todos los elementos*/
html {max-width: 1280px; }

#page { margin: 0 auto; width: 100%;}

head { max-width: 1280px;}

header { 
  width: 100%; margin: 0 auto; 
    height: 2.69rem;  }

body {   max-width: 1280px; /*este es el ancho maximo de la web*/
  font-family: 'Roboto', sans-serif;
      display: -webkit-flex;/*esto es el responsive aplicado a toda la pag*/
   display:flex;
   -webkit-flex-flow: column;
           flex-flow: column; 
    background: url("../img/trama.jpg")repeat fixed bottom right; }

/*NAVEGADOR*/
 nav { height: 45px; width: 100%; position: relative;
    margin: 0; max-height: 45px; margin-top: 2.69rem;
   background: #f7b23c;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
       -webkit-order: 1;
           order: 1;  }  
.clear {clear:both;}

#logo {display: block;
    margin: -2.5rem -1rem 0.81rem -1rem;
    margin-left: 6.25rem;
    position: relative;
    float: left;
    z-index: 1;}

nav ul {   font-size: 1rem;
    height: 0.1rem;
    list-style-type: none;
    padding: 0rem; 
    margin: 0rem;  }

nav ul li {float: left;
     font-size: 1rem; 
   margin-left: 4rem;
    padding: 0.5rem; 0.5rem;
    position: relative;  top: 0.3rem; left: 1rem;
   
    text-decoration: none;}

nav ul li a {text-decoration: none;  color: #F3F0EC;}


/*SECCIÓN DESCARGA*/
.descarga { background-color: #F3F0EC; width: 80%; height: 500px;
position: relative; margin: 0 auto; margin-top: 6rem; margin-bottom: 1rem;
    -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
       -webkit-order: 2;
           order: 2; }

.descarga > h2 { padding: 0; margin: 0; position: absolute;
  text-align: left; 
    font-size: 3em; 
    font-weight: 700;  
    color: #d64746; 
      margin-left: 420px; top: 45%;}

.descarga > h3 {    padding: 0; margin: 0; 
    position: absolute; top: 15%;
  text-align: left; 
    font-size: 1.9rem; 
    font-weight: 500;  color: #d64746;
 margin-left: 95px; margin-top: }

 .estrellas { position: absolute; margin-left: 420px; top: 35%; }

 .celular { height: 40%; margin-left: 150px; width: 50%; margin-top: 10px;
    position: absolute; }
 .botondescargauno{  margin-left: 420px; top: 72%;
    position: absolute;   }
 .botondescargados {   margin-left: 630px; top:72%;
    position: absolute; }

/*SECCIÓN BENEFICIOS*/
.beneficios { width: 80%; height: 357px; background-color: #4faca7;
    position: relative; color: #F3F0EC; margin: 0 auto; 
    -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
       -webkit-order: 3;
           order: 3;}

.beneficios > ul {font-size: 1rem;
    height: 0.1rem;
    list-style-type: none;
    padding: 0rem; 
    margin: 0rem;  position: absolute; 
}

 .beneficios > ul li { float: left; 
     font-size: 1rem; font-weight: 700;
   margin-left: 6rem; 
    padding: 0.5rem; 0.5rem;
    position: relative;  top: 6.5rem; left: 2rem;
   text-decoration: none; 
}

.beneficios > h2 {  padding: 0; margin: 0;
    position: absolute; z-index: 1;
  width: 100%;
    font-size: 2em; 
    font-weight: 700;  
    color: #F3F0EC; 
     top: 4%; }

 .separadorbeneficios { position: absolute; 
    margin: 0; padding: 0; width: 100%; top: 0%;}



h3 { font-weight: 700;  color: #F3F0EC; font-size: 2rem;
position: absolute; left: 330px; top: 1900px;}




/*SECCION COMO FUNCIONA*/
.comofunciona {width: 80%; height: 465px; background-color: #f7b23c;
    position: relative; color: #F3F0EC; margin: 0 auto; text-align: left;
    -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
       -webkit-order: 4;
           order: 4; }

.separadorfunciona { position: absolute; 
    margin: 0; padding: 0; width: 100%; top: 0%;}

.comofunciona > h2 {  padding: 0; margin: 0;
    position: absolute; z-index: 1;
  width: 100%;
    font-size: 2em; 
    font-weight: 700;  
    color: #F3F0EC; 
     top: 4%; }
.texto1 {z-index: 1; position: absolute;
    font-size: 1.4rem; font-weight: 700;
color:#d64746; width: 100%; margin-top: 7rem;  }

.comofunciona > ul {font-size: 1rem;
    height: 0.1rem;
    list-style-type: none;
    padding: 0rem; 
    margin: 0rem;  position: absolute; }

 .comofunciona > ul li { float: left; color:#d64746;
     font-size: 1rem; font-weight: 700;
margin-left: 5rem; margin-right: 5rem;
    padding: 0.5rem; 0.5rem; text-align: left;
    position: relative;  top: 12rem; left: 2rem;
   text-decoration: none; }


/*SECCION COMO PAGO*/
.comopago {width: 80%; height: 380px; background-color: #F3F0EC; 
    position: relative; color: #d64746; margin: 0 auto; text-align: left;
    -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
       -webkit-order: 5;
           order: 5; }

.separadorpago { position: absolute; 
    margin: 0; padding: 0; width: 100%; top: 0%;}

.comopago > h2 {  padding: 0; margin: 0;
    position: absolute; z-index: 1;
  width: 100%;
    font-size: 2em; 
    font-weight: 700;  
    color: #F3F0EC; 
     top: 4%; }

.voucher1, .voucher2, .voucher3 { width: 27%; margin: 0 auto; 
margin-top:  13rem; margin-left: 3rem;}


/*SECCION COMEDOR*/
.elcomedor {width: 80%; height: 465px; background-color:#4faca7;
    position: relative; color: #F3F0EC; margin: 0 auto; 
    font-size: 1rem; font-weight: 700; text-align: left;
    -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
       -webkit-order: 6;
           order: 6;  }
.separadorcomedor { position: absolute; z-index: 1;
    margin: 0; padding: 0; width: 100%; top: 0%;}

.elcomedor > h2 {  padding: 0; margin: 0;
    position: absolute; z-index: 2;
  width: 100%;
    font-size: 2em; 
    font-weight: 700;  
    color: #F3F0EC; 
     top: 4%; }
.elcomedor > .texto1 {position: absolute;  color: #F3F0EC;
    font-size:1.2rem; margin-top: 10rem;
    margin-left: 2rem; font-weight: 500;  line-height: 2rem;}

.fotocomedor{  width: 600px; height: 401px;
margin-top: 4rem; z-index: 0; float: right;}

.miscelanea { position: absolute; margin: 0; margin-top: 5rem;
margin-left: 0.6rem; width: 360px; height: 370px;}


/*SECCION OFRECEMOS*/
.ofrecemos {width: 80%; height: 500px; background-color:#5f5354;
    position: relative; color: #F3F0EC; margin: 0 auto; 
    font-size: 1rem; font-weight: 700; 
    -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
       -webkit-order: 7;
           order: 7;  }
.separadorofrecemos { position: absolute; z-index: 1;
    margin: 0; padding: 0; width: 100%; top: 0%;}
.ofrecemos > .texto1{color: #F3F0EC;}
.ofrecemos > h2 {  padding: 0; margin: 0;
    position: absolute; z-index: 2;
  width: 100%;
    font-size: 2em; 
    font-weight: 700;  
    color: #F3F0EC; 
     top: 4%; }

.ofrecemos > ul {font-size: 1rem;
    height: 0.1rem;
    list-style-type: none;
    padding: 0rem; 
    margin: 0rem;  position: absolute; }

 .ofrecemos > ul li { float: left; text-align: center;
     font-size: 1rem; font-weight: 700;
   margin-left: 1rem; margin-right: 0.5rem;
 position: relative;  top: 15rem; left: 3rem;
   text-decoration: none; }

 h5 { font-weight: 400;  color: #F3F0EC; 
    font-size: 1rem; text-align: center;}


/*footer*/
 footer { color: #5f5354; font-size: 0.6rem;
   min-height: 6.25rem; width: 100%;
     padding: 1rem; margin:0 auto; padding-top: 1.8rem;
   background:#F3F0EC;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%; 
   -webkit-order: 6;
           order: 6;}
 




@media screen and (max-width:320px){
    
    body{ /*background: #be076a;*/
    font-size: 10px;
    background-color: 
    }
    nav { }
    
}