* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    /* border: 1px solid rgb(190, 190, 190); */
    /* font-family: 'Quicksand', sans-serif; */
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Montserrat', sans-serif; */
    /* font-family: 'Roboto Condensed', sans-serif; */
}

body {
    background-color: #EDEEF0;
}

header.cabecera {
    width: 100%;
    height: 140px;
    background-color: #000000;
    display: flex;
    flex-flow: row nowrap;
    align-items:center;
    justify-content:space-between;
    padding: 0px 60px;
}

a.link-logo {
    display: block;
    width: auto;
    height: auto;
}

a.link-logo:hover {
    scale: 1.1;
    transition: 0.5s;
}

img.logo-Qrmenu {
    width: 90px;
    height: auto;
}

div.box-redes {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    column-gap: 5px;
}

div.box-redes a {
    display: block;
    width: auto;
    height: auto;
}

img.icono-whatsapp,
img.icono-linkedIn,
img.icono-telegram {
    width: 32px;
    height: auto;
}


img.icono-whatsapp:hover,
img.icono-linkedIn:hover,
img.icono-telegram:hover {
    scale: 1.3;
    transition: 0.5s;
  
}

section.banner-home {
    background-color:#000000;
    background-image:url("imagenes/banner_home.jpg");
    background-size: cover;
    background-position: center;
    max-width: 1480px;
    height: 340px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

div.demo-URL {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    width: 70%;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 25px;
}

    img.icono-candado {
        width: 25px;
        height: auto;
    }

    img.icono-lupa {
        width: 35px;
        height: auto;
    }

    p.direccion-URL {
        font-family: 'Roboto', sans-serif;
        font-size: 0.9em;
        color: #000000;
        letter-spacing: 1px;
    }

    @media screen and (max-width: 460px) { 
        header.cabecera {
            height: 200px;
            flex-flow: column nowrap;
            align-items:center;
            justify-content:center;
            padding: 0px 0px;
        }

        img.logo-Qrmenu {
            width: 130px;
            height: auto;
        }

        div.box-redes {      
            column-gap: 15px;
        }

        img.icono-whatsapp,
        img.icono-linkedIn,
        img.icono-telegram {
            width: 36px;

        }

        section.banner-home {
            height: 300px;
        }

        div.demo-URL {
            justify-content: space-evenly;
            width: 90%;
        }

        p.direccion-URL {
            font-size: 0.8em;
            letter-spacing: 1px;
        }


    }


    @media screen and (max-width: 360px) {
        
        div.demo-URL {
            width: 90%;
        }
    }

/* --------------- SECCION INFO CONTENEDOR --------------- */



section.info-contenedor {
    width: 100%;
    height: 960px;
    background-image: radial-gradient(#ffff 25%, #e6e6e6);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

div.info-app {
    width: 70%;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;

}

div.info-QR {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 160px;
    height: auto;
    margin-top: 60px;

}

div.info-QR h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    font-size: 1.8em;
    color: #6f6f6e;
    text-align: center;
}

div.info-QR h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    color: #6f6f6e;
    text-align: center;
    margin-bottom: 5px;

} 

img.imagen-plataformas {
    width: 100%;
    height: auto;
}

div.box-APP {
    position: relative;
    top: -70px;
    left: 0px;
    display: flex;
    width: 300px;
    height: auto;
}

img.imagen-app {
    width: 100%;
    height: auto;
}

div.info-funcionalidad {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    width: 260px;
    height: auto;
    margin-top: 60px;
}

div.info-funcionalidad h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.2em;
    color: #232e4d;
    text-align:left;
    margin-top: 5px;
    margin-bottom: 10px;
}

div.info-funcionalidad ul {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    row-gap: 10px;
}

div.info-funcionalidad ul li {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #6f6f6e;
    text-align:justify;

}

div.info-apply, div.contendor-textos-apply {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: auto;
}

p.text-desarrollo {
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.4em;
    color: #232e4d;
    
}

ul.text-negocios {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow:row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    column-gap: 12px;
}

ul.text-negocios li {
    font-family: 'Roboto', sans-serif;
    color: #232e4d;
    font-size: 1.4em;
    font-weight: 400;
    list-style: none;
    letter-spacing: 2px;
}

div.imagenes-negocios {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow:row wrap;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    column-gap: 15px;
}

div.imagenes-negocios img {
    width: 150px;
    height: auto;
}


@media screen and (max-width: 1200px) {
    div.info-app {
        width: 80%;
    }



}

@media screen and (max-width: 980px) {
    div.info-app {
        width: 90%;
    }

}

@media screen and (max-width: 860px) {

    section.info-contenedor {
        height: auto;   
    }

    div.info-app {
        width: 100%;
        height: auto;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center; 
    }

    div.info-QR {
        order: 2;
        margin-top: 0px;
    
    }

    div.box-APP {
        top: -70px;
        left: 0px;
        display: flex;
        width: 300px;
        height: auto;
        order: 1;
    }
    
    div.info-funcionalidad {
        margin-top: 60px;
        order: 3;
    }


    div.info-apply {
        width: 90%;
        margin: 80px 0px;
    }
    
    div.contendor-textos-apply{ 
        width: 100%;
    }

    p.text-desarrollo {
        font-size: 1.3em;  
    }

    ul.text-negocios li {
        font-size: 1.2em;
    }

}


@media screen and (max-width:680px) {

    div.imagenes-negocios {
        row-gap: 30px;
        margin-top: 40px;
    }

    div.imagenes-negocios img {
        width: 200px;
        height: auto;
    }


}


/* ------------- SECCION NUESTROS SERVICIOS ------------ */

section.nuestros-servicios { 
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: #232e4d;

}

h2.titulo-servicios {
    font-family: 'Roboto', sans-serif;
    color: #ffff;
    font-size: 1.6em;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 100px;
}

div.contenedor-servicios {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: auto;
    column-gap: 15px;
    margin-bottom: 80px;
}

div.contenedor-servicios div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 20%;
    height: 160px;
    margin:60px 0px 0px 0px;
    row-gap: 10px;
}

div.contenedor-servicios div img {
    max-width: 90px;
    height: auto;
}

div.contenedor-servicios div p {
    font-family: 'Roboto', sans-serif;
    color: #ffff;
    font-size: 0.8em;
    font-weight: 400;
    text-align: justify;
    margin: 0px 20px;
}

@media screen and (max-width:980px) {

    div.contenedor-servicios {
        width: 100%;
        margin-bottom: 100px;   
    }

}

@media screen and (max-width:780px) {

    div.contenedor-servicios div {
        height: 200px;
        row-gap: 5px;
    }

    div.contenedor-servicios div p {
        text-align: center;
        margin: 0px 10px;
    }
}


@media screen and (max-width:680px) {

    div.contenedor-servicios {
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    div.contenedor-servicios div {
        width: 50%;
    }

    div.contenedor-servicios div img {
        max-width: 140px;
        height: auto;
    }

    div.contenedor-servicios div p {
     
        font-size: 1.1em;
    
    }

}

@media screen and (max-width:380px) {
    div.contenedor-servicios div {
        height: 260px;
        width: 70%;
    }
}


/* --------------- SECCIÓN PIE DE PÁGINA -------------- */

section.pie-pagina {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 280px;
    background-color: #000000;
    padding: 0px 80px;
}

div.info-contacto, div.nombre-desarrollador {
    display: flex;
    flex-flow: column nowrap;
    width: 300px;
    height: auto;
}

div.info-contacto {
    row-gap: 5px;
}


div.nombre-desarrollador h3{
    font-family: 'Roboto', sans-serif;
    color: #ffff;
    font-size: 1em;
    font-weight: 400;
}

div.nombre-desarrollador h4 {
    font-family: 'Roboto', sans-serif;
    color: #8cc63f;
    font-size: 0.7em;
    font-weight: 400;
}

div.box-num-whatsapp {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
}

img.logo-whasapp-original {
    width: 40px;
    height: auto;
}

div.box-textos-num-whatsapp, div.box-correos {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

p.num-whatsapp {
    font-family: 'Roboto', sans-serif;
    color: #ffff;
    font-size: 0.9em;
    font-weight: 400;
}

p.text-soporte-ventas {
    font-family: 'Roboto', sans-serif;
    color: #ffff;
    font-size: 0.6em;
    font-weight: 400;
}

div.box-correos a{
    font-family: 'Roboto', sans-serif;
    color: #ffff;
    font-size: 0.9em;
    font-weight: 400;
    /* text-decoration: none; */
}

div.box-copyright, div.box-logo-qr-vtotal, div.textos-copy {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 120px;
    height: auto;
}

div.box-logo-qr-vtotal {
    width: 100%;
    height: auto;
}

div.box-logo-qr-vtotal img {
    width: 120px;
    height: auto;
}

div.textos-copy p {
    font-family: 'Roboto', sans-serif;
    color: #ffff;
    font-size: 0.6em;
    font-weight: 400;
}

@media screen and (max-width: 580px) {
    
    section.pie-pagina {
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        height: auto;
        padding: 120px 0px;
        row-gap: 40px;
    }

    div.info-contacto, div.nombre-desarrollador {
        justify-content: flex-start;
        align-items: center;
        width: 160px;
        height: auto;
    }

    div.box-num-whatsapp {
        justify-content: center;
    }
    
}