﻿/* Fuentes usadas
Abhaya+Libre:400;500;700
Montserrat:400;700

font-family: 'Abhaya Libre', serif;
font-family: 'Montserrat', sans-serif;
*/


/* <BANNER NOSOTROS> */
#fBannerNosotros {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-nosotros-interior.svg) bottom right no-repeat;
    background-color: #381185;
}

    #fBannerNosotros .columna1 h2 {
        color: #fff;
    }

    #fBannerNosotros .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerNosotros .columna1 {
        padding-top: 6rem;
        padding-right: 5rem;
    }


    #fBannerNosotros .columna2 {
    }

@media only screen and (max-width: 1200px) {
    #fBannerNosotros .columna1 {
        padding-top: 2rem;
    }

}

@media only screen and (max-width: 992px) {

    #fBannerNosotros {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(/images/fondos/fondo-banner-nosotros-interior-movil.svg) bottom right no-repeat;
        background-color: #381185;
    }

    #fBannerNosotros .columna1 {
        padding-top: 2rem !important;
        padding-right: 1rem;
    }

    #fBannerNosotros h2 {
        font-size: 135% !important;
        padding-bottom: 0rem;
    }

}
/* </BANNER NOSOTROS> */

/* <BANNER PAGINAS WEB> */
#fBannerPaginas {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-paginas-web-interior.svg) bottom right no-repeat;
    background-color: #381185;
}

    #fBannerPaginas .columna1 h2 {
        color: #fff;
    }

    #fBannerPaginas .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerPaginas .columna1 {
        padding-top: 5rem;
        padding-right: 5rem;
    }


    #fBannerPaginas .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #fBannerPaginas {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(/images/fondos/fondo-banner-paginas-web-interior-movil.svg) bottom right no-repeat;
        background-color: #381185;
    }
    #fBannerPaginas .columna1 {
        padding-top: 2rem !important;
        padding-right: 1rem;
    }
        #fBannerPaginas h2 {
            font-size: 135% !important;
            padding-bottom: 0rem;
        }
}
/* </BANNER PAGINAS WEB> */

/* <BANNER TIENDAS > */
#fBannerTiendas {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: 
        url(/images/fondos/fondo-banner-tiendas-interior.svg) bottom right no-repeat, 
        url(/images/fondos/fondo-banner-tiendas-interior-02.svg) top left no-repeat;
    background-color: #381185;
}

    #fBannerTiendas .columna1 h2 {
        color: #fff;
    }

    #fBannerTiendas .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerTiendas .columna1 {
        padding-top: 6rem;
        padding-right: 5rem;
    }


    #fBannerTiendas .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #fBannerTiendas {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(/images/fondos/fondo-banner-tiendas-interior-movil.svg) bottom right no-repeat, url(/images/fondos/fondo-banner-tiendas-interior-02-movil.svg) top right no-repeat;
        background-color: #381185;
    }
    #fBannerTiendas .columna1 {
        padding-top: 2rem !important;
        padding-right: 1rem;
    }

        #fBannerTiendas h2 {
            font-size: 135% !important;
            padding-bottom: 0rem;
        }
}
/* </BANNER TIENDAS> */

/* <BANNER APLICACIONES > */
#fBannerAplicaciones {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-aplicaciones-web-interior.svg) bottom left no-repeat;
    background-color: #381185;
}

    #fBannerAplicaciones .columna1 h2 {
        color: #fff;
    }

    #fBannerAplicaciones .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerAplicaciones .columna1 {
        padding-top: 3rem;
        padding-right: 5rem;
    }


    #fBannerAplicaciones .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {

    #fBannerAplicaciones .columna1 {
        padding-top: 2rem !important;
        padding-right: 1rem;
    }

    #fBannerAplicaciones h2 {
        font-size: 135% !important;
        padding-bottom: 0rem;
    }

}
/* </BANNER APLICACIONES> */

/* <BANNER APPS> */
#fBannerApps {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-apps-interior.svg) bottom right no-repeat;
    background-color: #381185;
}

    #fBannerApps .columna1 h2 {
        color: #fff;
    }

    #fBannerApps .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerApps .columna1 {
        padding-top: 5rem;
        padding-right: 5rem;
    }


    #fBannerApps .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #fBannerApps {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(/images/fondos/fondo-banner-apps-interior-movil.svg) bottom right no-repeat;
        background-color: #381185;
    }

        #fBannerApps .columna1 {
            padding-top: 2rem !important;
            padding-right: 1rem;
        }

        #fBannerApps h2 {
            font-size: 135% !important;
            padding-bottom: 0rem;
        }
}
/* </BANNER PAGINAS APPS> */

/* <BANNER MARKETING > */
#fBannerMarketing {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-marketing-interior.svg) top right no-repeat;
    background-color: #381185;
}

    #fBannerMarketing .columna1 h2 {
        color: #fff;
    }

    #fBannerMarketing .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerMarketing .columna1 {
        padding-top: 5rem;
        padding-right: 5rem;
    }


    #fBannerMarketing .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {

    #fBannerMarketing {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(/images/fondos/fondo-banner-marketing-interior-movil.svg) top right no-repeat;
        background-color: #381185;
    }

    #fBannerMarketing .columna1 {
        padding-top: 2rem !important;
        padding-right: 1rem;
    }

        #fBannerMarketing h2 {
            font-size: 135% !important;
            padding-bottom: 0rem;
        }

}
/* </BANNER MARKETING> */

/* <BANNER REDES > */
#fBannerRedes {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-redes-interior.svg) top right no-repeat;
    background-color: #381185;
}

    #fBannerRedes .columna1 h2 {
        color: #fff;
    }

    #fBannerRedes .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerRedes .columna1 {
        padding-top: 5rem;
        padding-right: 5rem;
    }


    #fBannerRedes .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {

    #fBannerRedes {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(/images/fondos/fondo-banner-redes-interior-movil.svg) top right no-repeat;
        background-color: #381185;
    }

        #fBannerRedes .columna1 {
            padding-top: 2rem !important;
            padding-right: 1rem;
        }

        #fBannerRedes h2 {
            font-size: 135% !important;
            padding-bottom: 0rem;
        }
}
/* </BANNER REDES> */

/* <BANNER GOOGLE > */
#fBannerGoogle {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-google-interior.svg) bottom right no-repeat;
    background-color: #381185;
}

    #fBannerGoogle .columna1 h2 {
        color: #fff;
    }

    #fBannerGoogle .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerGoogle .columna1 {
        padding-top: 5rem;
        padding-right: 5rem;
    }


    #fBannerGoogle .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {

    #fBannerGoogle {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(/images/fondos/fondo-banner-google-interior-movil.svg) bottom center no-repeat;
        background-color: #381185;
    }

        #fBannerGoogle .columna1 {
            padding-top: 2rem !important;
            padding-right: 1rem;
        }

        #fBannerGoogle h2 {
            font-size: 135% !important;
            padding-bottom: 0rem;
        }
}
/* </BANNER GOOGLE> */

/* <BANNER CASOS EXITO > */
#fBannerCasosExito {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: 
        url(/images/fondos/fondo-banner-casos-exito-interior.svg) top right no-repeat, 
        url(/images/fondos/fondo-banner-casos-exito-interior-02.svg) bottom left no-repeat;
    background-color: #381185;
}

    #fBannerCasosExito .columna1 h2 {
        color: #fff;
    }

    #fBannerCasosExito .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerCasosExito .columna1 {
        padding-top: 5rem;
        padding-right: 5rem;
    }


    #fBannerCasosExito .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #fBannerCasosExito {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(/images/fondos/fondo-banner-casos-exito-interior-movil.svg) top right no-repeat, url(/images/fondos/fondo-banner-casos-exito-interior-02-movil.svg) bottom left no-repeat;
        background-color: #381185;
    }

    #fBannerCasosExito .columna1 {
        padding-top: 2rem !important;
        padding-right: 1rem;
    }

    #fBannerCasosExito h2 {
        font-size: 135% !important;
        padding-bottom: 0rem;
    }

}
/* </BANNER CASOS EXITO> */

/* <BANNER CONTACTO> */
#fBannerContacto {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: 
        url(/images/fondos/fondo-banner-contacto-interior.svg) bottom right no-repeat,
        url(/images/fondos/fondo-banner-contacto-interior-02.svg) top left no-repeat;
    background-color: #381185;
    min-height: 27rem;
}

    #fBannerContacto .columna1 h2 {
        color: #fff;
    }

    #fBannerContacto .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerContacto .columna1 {
        padding-top: 5rem;
        padding-right: 5rem;
    }


    #fBannerContacto .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #fBannerContacto {
        background:             
            url(/images/fondos/fondo-banner-contacto-interior-movil.svg) bottom right no-repeat, 
            url(/images/fondos/fondo-banner-contacto-interior-02-movil.svg) top left no-repeat;
        background-color: #381185;
            padding-bottom: 2rem;
    }
        #fBannerContacto .columna1 {
            padding-top: 2rem !important;
            padding-right: 1rem;
            padding-bottom: 1rem;
        }

    #fBannerContacto h2 {
        font-size: 135% !important;
        padding-bottom: 0rem;
    }
}
/* </BANNER CONTACTO> */

/* <BANNER CONTACTO GRACIAS> */
#fBannerContactoGracias {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-casos-exito-interior.svg) top right no-repeat, url(/images/fondos/fondo-banner-casos-exito-interior-02.svg) bottom left no-repeat;
    background-color: #381185;
}

    #fBannerContactoGracias .columna1 h2 {
        color: #fff;
    }

    #fBannerContactoGracias .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerContactoGracias .columna1 {
        padding-top: 10rem;
        padding-right: 5rem;
    }


    #fBannerContactoGracias .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #fBannerContactoGracias .columna1 {
        padding-top: 2rem !important;
        padding-right: 1rem;
    }

    #fBannerContactoGracias h2 {
        font-size: 135% !important;
        padding-bottom: 0rem;
    }
}
/* </BANNER CONTACTO GRACIAS> */

/* <BANNER SOPORTE> */
#fBannerSoporte {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-marketing-interior.svg) top right no-repeat;
    background-color: #381185;
}

    #fBannerSoporte .columna1 h2 {
        color: #fff;
    }

    #fBannerSoporte .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerSoporte .columna1 {
        padding-top: 10rem;
        padding-right: 5rem;
    }


    #fBannerSoporte .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #fBannerSoporte {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(/images/fondos/fondo-banner-paginas-web-interior-movil.svg) bottom right no-repeat;
        background-color: #381185;
    }
    #fBannerSoporte .columna1 {
        padding-top: 2rem !important;
        padding-right: 1rem;
    }

    #fBannerSoporte h2 {
        font-size: 135% !important;
        padding-bottom: 0rem;
    }
}
/* </BANNER SOPORTE> */

/* <BANNER ERROR> */
#fBannerError {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(/images/fondos/fondo-banner-paginas-web-interior.svg) bottom right no-repeat;
    background-color: #381185;
}

    #fBannerError .columna1 h2 {
        color: #fff;
    }

    #fBannerError .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fBannerError .columna1 {
        padding-top: 10rem;
        padding-right: 5rem;
    }


    #fBannerError .columna2 {
    }

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #fBannerError .columna1 {
        padding-top: 2rem !important;
        padding-right: 1rem;
    }

    #fBannerError h2 {
        font-size: 135% !important;
        padding-bottom: 0rem;
    }
}
/* </BANNER ERROR> */

/* <BANNER ERROR B> */
#fBannerErrorB {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #381185;
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 992px) {
    #fBannerErrorB {
        padding-top: 4rem;
        padding-bottom: 1rem;
    }
}
/* </BANNER ERROR B> */

/* <SECCION> */
#fSeccion {
    padding-top: 2rem;
    padding-bottom: 3rem;
    color: #fff;
    background-color: #381185;
}

    #fSeccion h2 {
        color: #fff;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    #fSeccion h4 {
        color: #fff;
        font-weight:400 !important;
    }

@media only screen and (max-width: 992px) {

}
/* </SECCION> */

/* <INTRO> */
#fIntro {
    padding-top: 4rem;
    padding-bottom: 0rem;
    background-image: linear-gradient(to bottom, #e7eaeb, #edeff0, #f3f4f5, #f9fafa, #ffffff, #ffffff, #ffffff);
    font-family: 'Abhaya Libre', serif !important;
    font-weight: 500 !important;
    font-size: 125%;
}

    #fIntro .columna1 {
        padding-right: 0rem;
    }

        #fIntro .columna1 h2 {
            padding-bottom: 0rem;
        }

    #fIntro .columna2 {
        padding-top: 2rem;
    }

@media only screen and (max-width: 992px) {
    #fIntro {
        padding-top: 2rem;
    }
}
/* </INTRO> */


/* <CONTENIDO> */
#fContenido {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

    #fContenido .linea {
        border-top: solid 1px #E8E8E8;
        border-bottom: solid 1px #E8E8E8;
        padding-top: 2rem;
        padding-bottom: 1.5rem;
        margin-bottom: 1rem;
    }

    #fContenido h5 {
        text-transform: capitalize;
        letter-spacing: 15px;
    }

    #fContenido .renglon1 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    #fContenido .renglon2 {
        padding-top: 4rem;
        padding-bottom: 2rem;
    }


    #fContenido .renglon1 p {
        padding-bottom: 0rem !important;
    }

    #fContenido .divisor2 {
        margin-bottom: 2rem;
    }

    #fContenido .cuadroAzul {
        padding: 2rem 2rem 3rem 2rem;
        background: url(/images/fondo-recuadro-01.svg) bottom right no-repeat, url(/images/fondo-recuadro-02.svg) bottom right no-repeat;
        background-color: #381185;
        color: #fff;
        border-radius: 1rem;
    }

        #fContenido .cuadroAzul h4 {
            font-size: 95%;
            color: #fff;
            padding-bottom: 1rem;
        }

        #fContenido .cuadroAzul p, #fContenido .cuadroAzul li {
            font-size: 85%;
            color: #fff;
        }
        #fContenido .cuadroAzul a {
            color: #fff;
        }

        #fContenido a {
            color: #000;
            text-decoration: underline;
        }
        
        #fContenido a:hover {
            color: #00ABE5;
        }

@media only screen and (max-width: 992px) {
    #fContenido {
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    #fContenido h5 {
        text-transform: capitalize;
        letter-spacing: 5px;
    }

        #fContenido .renglon1 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        #fContenido .renglon2 {
            padding-top: 2rem;
            padding-bottom: 1rem;
        }

        #fContenido .cuadroAzul {
            margin:1rem;
        }

    .divisor2 {
     margin-bottom: 0rem; 
    }
}
/* </CONTENIDO> */




/* <CASOS 1> */
#fCasos1 {
    padding-top: 5rem;
    padding-bottom: 0rem;
    background: url(/images/fondo-banner-ppal-02.svg) bottom center repeat-x;
    background-color: #381185;
}

    #fCasos1 .columna1 h2 {
        color: #fff;
    }

    #fCasos1 .columna1 h4 {
        color: #fff;
        font-weight: 400 !important;
    }

    #fCasos1 .columna1 {
        padding-top: 0rem;
        padding-right: 5rem;
    }


    #fCasos1 .columna2 {
    }

@media only screen and (max-width: 1200px) {
    #fCasos1 {
        padding: 1rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
        background: url(/images/fondo-banner-ppal-02-movil.svg) bottom center repeat-x;
        background-color: #381185;
    }

        #fCasos1 .columna1 {
            padding-top: 0rem;
            padding-bottom: 4rem;
            padding-right: 0rem;
        }
}

@media only screen and (max-width: 992px) {
    #fCasos1 {
        padding: 1rem;
        padding-top: 0rem;
        padding-bottom: 3rem;
        background: url(/images/fondo-banner-ppal-02-movil.svg) bottom center repeat-x;
        background-color: #381185;
    }

        #fCasos1 .columna1 {
            padding: 1rem;
            padding-bottom: 0rem;
        }

        #fCasos1 .columna2 {
        }
}
/* </CASOS 1> */

/* <CASOS 2> */
#fCasos2 {
    padding-top: 3rem;
    padding-bottom: 0rem;
    background-image: linear-gradient(to top, #e7eaeb, #edeff0, #f3f4f5, #f9fafa, #ffffff, #ffffff, #ffffff);
}

    #fCasos2 .cuadro1 {
        padding-top: 0rem;
        padding-right: 3rem;
        padding-bottom: 0rem;
    }

    #fCasos2 .espacio1 {
        padding-top: 0rem;
    }

    #fCasos2 .espacio2 {
        padding-top: 4rem;
    }

    #fCasos2 .espacio3 {
        padding-top: 8rem;
    }

    #fCasos2 .espacio4 {
        padding-top: 12rem;
    }


    #fCasos2 .cuadro1 h1 {
        font-size: 400% !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        color: #C5F2F6;
        padding-bottom: 0rem !important;
        margin-bottom: 0rem !important;
    }

    #fCasos2 .cuadro1 h4 {
        padding-top: 0rem !important;
        margin-top: 0rem !important;
    }

    #fCasos2 .divisor2 {
        margin-bottom: 2rem;
    }


@media only screen and (max-width: 1200px) {
    #fCasos2 .cuadro1 {
        padding-top: 0rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }

    #fCasos2 .espacio1 {
        padding-top: 0rem;
    }

    #fCasos2 .espacio2 {
        padding-top: 4rem;
    }

    #fCasos2 .espacio3 {
        padding-top: 0rem;
    }

    #fCasos2 .espacio4 {
        padding-top: 4rem;
    }
}

@media only screen and (max-width: 992px) {

    #fCasos2 .cuadro1 {
        padding-top: 0rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }

    #fCasos2 .espacio1, #fProceso2 .espacio2, #fProceso2 .espacio3, #fProceso2 .espacio4 {
        padding-top: 0rem;
    }
}
/* </CASOS 2> */

/* <ADICIONAL> */
#fAdicional {
    padding-top: 2rem;
    padding-bottom: 1rem;
    background-image: linear-gradient(to top, #e7eaeb, #edeff0, #f3f4f5, #f9fafa, #ffffff, #ffffff, #ffffff);
}

    #fAdicional .lead {
        padding-bottom: 0rem;
    }
    #fAdicional .liga {
        padding-bottom: 3rem;
        font-size: 90%;
        color: #6B6B7A !important;
        text-decoration: underline;
    }

        #fAdicional .liga:hover {
            color: #00ABE5 !important;
        }

@media only screen and (max-width: 992px) {
    #fAdicional {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

}
/* </ADICIONAL> */