:root{
    --fuenteHeading: 'Lato', sans-serif;
    --fuenteParrafo: 'Roboto', sans-serif;

    --backGround: #343a40;
    --backForm: #5c5858;
    --gris: #beb8b8;
    --blanco: #FFFFFF;
    --negro: #000000;
    --hover:#064894bd;
    --gradInit: #1976d2;
    --gradFin:rgb(100, 221, 23);
    --iconColor: #7bc62d;
}
html{
    box-sizing: border-box;
    font-size: 62.5%; 
}
*, 
*:before, 
*:after{
    box-sizing: inherit;
}
body{
    font-family: var(--fuenteParrafo);
    font-size: 2.5rem;
    line-height: 1.5;
    color: var(--backGround);
}
h1, h2{
    font-family: var(--fuenteHeading);
}
h1{
    font-size: 5rem;
}
h2{
    font-size: 4rem;
}
h3{
    font-size: 2rem; 
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
}
span{
    font-weight: 900;
}
.text-verde{
    color: var(--iconColor);
}
.italica{
    font-style:italic;
}
.no-margin{
    margin: 0;
}
.centrar-texto{
    text-align: center;
}
.justificar-texto{
    text-align: justify;
}
.titulo-degradado{
    color:transparent;
    background: linear-gradient(to right, var(--gradFin)0%, var(--gradInit) 100% );
    -webkit-background-clip: text;
}
.sombras{
    box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -webkit-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -moz-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
}
.atenuacion{
    position: absolute;
    background-color: rgba(0,0,0, 0.5);
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
}
.header{
    background-color: var(--backGround);
}
.contenedor{
    width: 90%;
    max-width: 120rem;
    margin: 0 auto;
}
.barra{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.navegacion{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.navegacion a{
    color: var(--blanco);
    padding: 1rem 0;
}
.navegacion a:hover{
    color: var(--gradFin);
    
}
@media(min-width: 768px ){
    .barra{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .navegacion{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .navegacion a{
        padding: 0 2rem;
    }
    .logo{
        width: 30rem;
        padding: 2rem 0;
    }
}
/** CONTENIDO HEADER**/
.header-contenido h1, section{
    text-align: center;
    color:transparent;
    background: linear-gradient(to right, var(--gradInit)0%, var(--gradFin) 100% );
    -webkit-background-clip: text;
    
}
.header-contenido h2{
    color: var(--blanco);
}
.header-contenido{
    display: flex;
    flex-direction: column-reverse;
}
.contenedor-textos{
    grid-row: 1/2;  
    margin-bottom: 4rem;  
}
.header-img{
    align-items: center;
    grid-row: 2/3;
    padding: 4rem 0;
    transition: all 300ms;
}
.header-img:hover{
    transform: scale(1.05);
}
.boton{
    display: block;
    background: var(--gradInit);
    color: var(--blanco);
    padding: 1rem 5rem;
    border-radius: 1.5rem;
    text-align: center;
    width: 90%;
    border: none;
    margin: 0 auto;
    transition: all 300ms;
}
.boton:hover{
    transform: scale(1.15);
    box-shadow: 15px 10px 11px -3px rgba(0,0,0,0.75);
-webkit-box-shadow: 15px 10px 11px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 15px 10px 11px -3px rgba(0,0,0,0.75);
}
@media(min-width: 768px){
    .header-contenido{
        padding: 5rem 0;
        display: grid;
        grid-template-columns: 60% 40%;
        gap: 5rem;
        align-items: center;
    }
    .header-texto{
        grid-column: 2/3;
        grid-row: 1/2;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    .header-img{
        max-width: 100%;
        grid-column: 1/2;
        grid-row: 1/2;
    }
    .boton{
        width: auto;
    }
}

.titulos{
    margin-top: 7rem;
}
.titulos h2{
    margin-bottom: 3rem;
    color:transparent;
    background: linear-gradient(to right, var(--gradInit)0%, var(--gradFin) 100% );
    -webkit-background-clip: text;
    
}
.titulos p{
    text-align: justify;
}
.contenedor__banner{
    display: block;
    align-items: center;
    margin: 5rem auto 0 auto;
}
@media(min-width: 768px){
    .contenedor__banner{
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 2rem;
        margin: 5rem auto 0 auto;
    }
}
.banner{
    background: var(--backGround);
    border-radius: 2rem;
    display: flex;
    justify-content: flex-start;    
    align-items: center;
    margin: 4rem auto;
    height: 15rem;
    box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -webkit-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -moz-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    
}
.banner__icon{
    max-width: 20rem;
    width: 100%;
    position: relative;
    transition: all 300ms;
  
}
.banner__icon:hover{
    transform: scale(1.05);
}
.banner__texto h3{
    color: var(--blanco);
    text-align: center;
    /*padding-right: 1rem;*/
    width: 100%;
    margin: 0 auto;
    
}
@media(min-width: 768px){
    .banner{
        height: 15rem;
        margin: 2rem 0;
        justify-content: start;
        width: 100%;
    }
    
}

/*BANNER INTERMEDIO*/
.banner-intermedio{
    margin: 8rem 0;
}
.banner-izq{
    background-image: url(../img/banner-intermedio.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-repeat: center;
    height: 30rem;
}
.banner-der{  
    color: var(--blanco);
    /*background: linear-gradient(to right, var(--gradInit)35%, var(--gradFin ) 100% );*/
    background-color: var(--backGround);
}
.banner-intermedio__texto{
    display: flex;
    flex-direction: column;
    padding: 3rem 0;
}
@media(min-width: 768px){
    .banner-intermedio{
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .banner-izq{
        height: auto;
        background-attachment:unset;
    }
    .banner-intermedio__texto{
        display: flex;
        flex-direction: column;
    }
}
.ofrecemos-img{
    background-image: url(../img/ofrecemos-img.webp);
    /*height: 50rem;*/
    height: 40rem;
    border-radius: 3rem;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-position: 70% 70%;*/
    /*background-position: center center;*/
    background-position: 85% center;
    box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -webkit-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -moz-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
}
.alcance-img{
    background-image: url(../img/mobileAPP.webp);
    /*height: 50rem;*/
    height: 40rem;
    border-radius: 3rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /*background-position: 70% 70%;*/
    box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -webkit-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -moz-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
}
.ofrecemos-img img, .alcance__img img{
    border-radius: 2rem;
}

.ofrecemos-texto, .ofrecemos-img, .ofrecemos{
    margin-bottom: 7rem;
}
@media(min-width: 768px){
    .ofrecemos{
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        column-gap: 5rem;
    }
    .alcance-texto{
        grid-column: 2/3;
    }
    .alcance-img{
        grid-column: 1/2;
        grid-row: 2/3;
    }
}

/** APLICACIONES **/
.aplicaciones{
    margin: 7rem 0
}
.aplicaciones h2{
    font-size: 4.7rem;
    color:transparent;
    background: linear-gradient(to right, var(--gradInit)0%, var(--gradFin) 100% );
    -webkit-background-clip: text;
}
.banner-icon__an{
    background-image: url(../img/playstore-icon.webp);
    background-size: 15rem;
    background-repeat: no-repeat;
    background-position: 95% center;
    transition: all, 0.3s;
    padding-left: 10%;
}
.banner-icon__and{
    background-image: url(../img/playstore-icon.webp);
    background-size: 25rem;
    background-repeat: no-repeat;
    background-position: 95% center;
    transition: all, 0.3s;
    padding-left: 10%;
}
.banner-icon__an:hover{
    background-size: 60%;
    transform: scale(1.1)
}
.banner-icon__and:hover{
    background-size: 90%;
    transform: scale(1.1)
}
.banner-icon__ap{
    background-image: url(../img/appstore-icon.webp);
    background-size: 15rem;
    background-repeat: no-repeat;
    background-position: 95% center;
    transition: all, 0.3s;
    padding-left: 10%;
}
.banner-icon__ap:hover{
    background-size: 85%;
    transform: scale(1.1)
}
@media(min-width: 768px){
    .banner-icon__ap{
        background-size: 25rem;
    }
}


@media(min-width: 768px){
    .aplicaciones-enlaces{
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        column-gap: 7rem
    }
    .tracker .banner{
        height: 32rem;
    }
}

/** FORMULARIO **/
section h2{
    font-size: 5rem;
}
.formulario{
    margin: 0 auto 5rem auto;
    width: min(80rem, 100%);
    background-color: var(--backForm);
    border-radius: 2rem;
    box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -webkit-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    -moz-box-shadow: 15px 10px 11px -3px rgba(88,90,94,0.75);
    
}
.formulario fieldset{
    border: none;
}
.formulario legend{
    padding-top: 2rem;
    color:gold;
    margin: 0 auto;
    text-transform: uppercase;
    font-family: var(--fuenteHeading);
    margin-bottom: 2rem;
}
.campo{
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    
}
.campo label{
    color: var(--blanco);
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-right: 1rem;
    
}
.input-text{
    border: none;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
}

/**FOOTER**/
.footer-sol{
    padding: 3rem 0 0.5rem 0;
}
.footer{
    background-color: var(--backGround);

}
.footer span{
    font-size: 1.2rem;
}

.grupos{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 2rem 0  
}
.grupos h3{
    color: var(--blanco);
    /*margin: 0 auto;*/
    padding-bottom: 0.5rem;
}
.grupos a{
    color: var(--gris);
    font-size: 1.5rem;
}
.grupos a:hover{
    color: var(--gradFin);
}
.footer p{
    text-align: center;
    margin: 0;
    font-size: 2rem;
    color: var(--blanco);
}
.contacto p{
    text-align: left;
    margin: 0;
    font-size: 1.5rem;
    color: var(--gris);
}
@media(min-width:768px){
    .footer-sol{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .grupos h3{
        margin: 0 auto;
    }
}
.grupos .pagina-elegida{
    color: var(--gradFin);
}


/* RESTO DE PAGINAS*/
.encabezado-page{
    background-image: url(../img/hero-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
}
.e404-page{
    background-color: var(--backGround);
}
.copiloto-viartual__page{
    background-image: url(../img/comportamiento-header.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 100%;
    margin-bottom: 2rem;
}
.multi-hero__page{
    background-image: url(../img/multi-hero.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 30% center;
    margin-bottom: 2rem;
}
.reportes-page{
    background-image: url(../img/reportes-hero.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 20%;
    margin-bottom: 2rem;
}
.encabezado-page__ruteo-libre{
    background-image: url(../img/banner-intermedio.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
}
.encabezado-page__navitrack{
    background-image: url(../img/navitrack-hero.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 80%;
    margin-bottom: 2rem;
}
.encabezado-page__ruteo{
    background-image: url(../img/ruteo-hero.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 45%;
    margin-bottom: 2rem;
}
.encabezado-page__soluciones-hero{
    background-image: url(../img/soluciones-hero.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 40%;
    margin-bottom: 2rem;
}
.encabezado-page__panela-lertas{
    background-image: url(../img/alertas-card.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 30% center;
    margin-bottom: 2rem;
}
.encabezado-page__vencimiento{
    background-image: url(../img/vencimiento.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 80%;
    margin-bottom: 2rem;
}
.encabezado-page__mantenimientos{
    background-image: url(../img/mantenimientos-page.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 30% center;
    margin-bottom: 2rem;
}
.encabezado-page__delivery{
    background-image: url(../img/delivery-header.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
}
.encabezado-page__buses{
    background-image: url(../img/bus-header.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
}
.encabezado-page__comportamiento{
    background-image: url(../img/comportamiento-header.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 45%;
    margin-bottom: 2rem;
}
.encabezado-page__rondines{
    background-image: url(../img/rondin-header.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 10%;
    margin-bottom: 2rem;
}

.encabezado-contenedor{
    position: relative;
    background-color: rgba(0,0,0, 0.5);
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
}
.encabezado-titulos{
    background-color: rgba(0,0,0, 0.4);
    border-radius: 2rem;
    padding: 0 2rem;
}
.encabezado-titulos p{
    color: var(--blanco);
    
}
.encabezado-principal{
    padding: 5rem 0;
}
@media(min-width: 768px){
    .encabezado-principal{
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        gap: 3rem;
        padding: 5rem 0;
    }
}

.encabezado-imagen{
    transition: all 300ms;
    
}
.encabezado-imagen img{
    border-radius: 3rem;
}

.encabezado-imagen:hover{
    transform: scale(1.05);
}
.iconos-info{
    padding: 10rem;
    /*color: #7bc62d;*/
    color: #6fb328;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    
}
.iconos{
    height: 20rem;
    width: 20rem;
    margin: 0 auto;
}
.iconos-sensors{
    display: flex;
    justify-content: center;
    align-items: center;
}
.redes-iconos{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
}
@media(min-width: 768px){
        .iconos-info{
        display: grid;
        grid-template-columns: 33.33% 33.33% 33.33%;
        align-items: center;
    }
}
@media(min-width: 1024px){
    .iconos-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }
}
.app-img{
    background-image: url(../img/mobileAPP.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.trazo-virtual__img{
    background-image: url(../img/trazo-virtual.webp);
    background-repeat: no-repeat;
    background-size: 105%;
    background-position: center center;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.atencion-img{
    background-image: url(../img/atencion-importante.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.conductor-libre__img{
    background-image: url(../img/comportamiento-header.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.reportes-img{
    background-image: url(../img/reporte-configurable.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 80%;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.navitrack-botones{
    background-image: url(../img/navitrack-botones.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.incidentes-img{
    background-image: url(../img/incidentes.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 80%;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.nube-img{
    background-image: url(../img/nube-docs.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.mantenimiento__dashboard-img{
    background-image: url(../img/mantenimiento-dashboard.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 80%;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.rondin__dashboard-img{
    background-image: url(../img/rondas-dashboard.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 80%;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.dashboard-img{
    background-image: url(../img/dashboard-img.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 70%;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.delivery-img{
    background-image: url(../img/delivery-city.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 10% center;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}
.onbus-img{
    background-image: url(../img/onbus-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 10% center;
    margin-bottom: 2rem;
    height: 70rem;
    border-radius: 2rem;
}

/** SECCION 2**/
.seccion2{
    background-color: var(--backGround);
    color: var(--blanco);
    padding: 3rem 0;
    margin: 5rem 0 0 0;
}
.seccion2-text1, 
.seccion2-text2, 
.seccion4-text1, 
.seccion4-text2,
.seccion6-text1, 
.seccion6-text2{
    margin-bottom: 2rem;
}
.seccion2-img1__video-verificacion{
    background-image: url(../img/video-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 80% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__velocidad-segmento{
    background-image: url(../img/velocidad-segmento.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__ruta-dinamica{
    background-image: url(../img/ruta-dinamica.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 80% center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__rutas-proceso{
    background-image: url(../img/rutas-proceso.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center ;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__navitrack-qr{
    background-image: url(../img/navitrack-qr.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 80% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__onwall-alertas{
    background-image: url(../img/onwall-alertas.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 25% center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__calendario{
    background-image: url(../img/calendario.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__preventivo{
    background-image: url(../img/preventivo.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center  80%   ;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__eficiente{
    background-image: url(../img/eficiente-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__velocidad{
    background-image: url(../img/velocidad-img.webp);
    background-repeat: no-repeat;
    background-size: cover;  
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    
    border-radius: 2rem;
}

.seccion2-img1__delivery-dashboard{
    background-image: url(../img/delivery-dashboard.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 80% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img1__programacion-rondin{
    background-image: url(../img/programacion-rondin.webp);
    background-repeat: no-repeat;
    background-size: cover   ;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__control-combustible{
    background-image: url(../img/diesel-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__lugares-virtual{
    background-image: url(../img/lugares-virtual.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__reportes-rutas{
    background-image: url(../img/reportes-rutas.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__navitrack-rondin{
    background-image: url(../img/navitrack-rondin.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__orden-servicio{
    background-image: url(../img/orden-servicio.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 80% center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__driver-app{
    background-image: url(../img/driver-app.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__inventarios{
    background-image: url(../img/inventarios-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__eventos{
    background-image: url(../img/eventos-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__qr-rondin{
    background-image: url(../img/qr-rondin.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__terceros-ondocs{
    background-image: url(../img/terceros-ondocs.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__doble-autenticacion{
    background-image: url(../img/doble-autenticacion.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 20%;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion2-img2__ruta-proceso{
    background-image: url(../img/ruta-proceso.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
@media(min-width: 1024px){
    .seccion2_contenedor, .seccion6-contenedor{
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 5rem;
        align-items: center;
    }
    .seccion2-text2, .seccion6-text2{
        grid-column:2/3 ;
    }
    .seccion2-img2__control-combustible, 
    .seccion6-img2__kilometrico, 
    .seccion2-img2__inventarios,
    .seccion2-img2__driver-app,
    .seccion2-img2__eventos,
    .seccion2-img2__qr-rondin,
    .seccion2-img2__orden-servicio,
    .seccion2-img2__terceros-ondocs,
    .seccion2-img2__doble-autenticacion,
    .seccion2-img2__navitrack-rondin,
    .seccion2-img2__reportes-rutas,
    .seccion6-img2__pasajero,
    .seccion2-img2__ruta-proceso,
    .seccion2-img2__lugares-virtual,
    .seccion6-img2__combustible,
    .seccion6-img2__navitrack-perfiles     
    {
        grid-row: 2/3;
    }
}

/**<!--SECCCION 3-->**/
.seccion3-trailer{
    background-image: url(../img/trailer-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 120rem;
    color: var(--blanco);
}
.seccion3__personalizadas-virtual{
    background-image: url(../img/personalizadas-virtual.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 60rem;
    color: var(--blanco);
}
.seccion3-multiples{
    background-image: url(../img/multiples-pantallas.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center 70%;
    height: 60rem;
    color: var(--blanco);
}
.seccion3__categoria-reporte{
    background-image: url(../img/categoria-reporte.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 60rem;
    color: var(--blanco);
}
.seccion3-flexible{
    background-image: url(../img/solucion-flexible.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 60rem;
    color: var(--blanco);
}
.seccion3__seguimiento-rutas{
    background-image: url(../img/seguimiento-rutas.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 60rem;
    color: var(--blanco);
}
.seccion3__navitrack-seguimiento{
    background-image: url(../img/navitrack-seguimiento.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 60rem;
    color: var(--blanco);
}
.seccion3-rastreo_total{
    background-image: url(../img/rastreo-total.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 60rem;
    color: var(--blanco);
}
.seccion3-multas{
    background-image: url(../img/multas-ondocs.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 60rem;
    color: var(--blanco);
}
.seccion3__gastos-mantenimiento{
    background-image: url(../img/gastos-mantenimiento.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 60rem;
    color: var(--blanco);
}
.seccion3-bus_station{
    background-image: url(../img/bus-station.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    height: 120rem;
    color: var(--blanco);
}
.seccion3-waze{
    background-image: url(../img/waze-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: 70% center;
    height: 120rem;
    color: var(--blanco);
}
.seccion3-app-rondin{
    background-image: url(../img/app-rondin.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    background-position: 70% center;
    height: 60rem;
    color: var(--blanco);
}
.seccion3-contenedor{
    position: absolute;
    background-color: rgba(0,0,0, 0.5);
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;

    padding: 5rem;
    
}
@media(min-width: 768px){
    .seccion3-trailer{
        height: 65rem;
    }
    .seccion3-waze{
        height: 65rem;
    }
    .seccion3-bus_station{
        height: 65rem;
    }
}
@media(min-width: 1028px){
    .seccion3-trailer   {
        height: 60rem;
    }
    .seccion3-waze   {
        height: 60rem;
    }
    .seccion3-bus_station{
        height: 60rem;
    }
    .seccion3-contenedor{
        display: flex;
        align-items: center;
        padding: 5rem;
    }
}

/** SECCION 4 **/
.seccion4{
    padding: 3rem 0;
    margin: 5rem 0 0 0;
}
.seccion4-img1__adas{
    background-image: url(../img/adas-im.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center bottom;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__mdt{
    background-image: url(../img/mdt-howen.webp);
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__ecosistema-ruta{
    background-image: url(../img/ecosistema-ruta.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center bottom;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__navitrack-conductores-rutas{
    background-image: url(../img/navitrack-rutas.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center bottom;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__navitrack-rutas{
    background-image: url(../img/navitrack-rutas.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center bottom;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__mantenimientos-ondocs{
    background-image: url(../img/mantenimientos-ondocs.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center bottom;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__formulario-matenimientos{
    background-image: url(../img/formulario-matenimiento.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center bottom;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__levantar-pedido{
    background-image: url(../img/levantar-pedido.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: 70% center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__alertas-comportamiento{
    background-image: url(../img/alertas-comportamiento.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center 30%;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__perfil-rondin{
    background-image: url(../img/perfil-rondin.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__comandos-alertas{
    background-image: url(../img/comandos-alertas.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: 20% center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__obd{
    background-image: url(../img/obd-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: 90% 70%;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__mina{
    background-image: url(../img/mina.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: 90% 70%;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__eficacia-ruta{
    background-image: url(../img/eficacia-ruteo.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__video-rutas{
    background-image: url(../img/video-rutas.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__navitrack-streaming{
    background-image: url(../img/navitrack-streamming.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__repuestos{
    background-image: url(../img/respuestos.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__alertas-ondocs{
    background-image: url(../img/alertas-ondocs.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__indor-outdor{
    background-image: url(../img/indor-outdor.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__ralenti{
    background-image: url(../img/ralenti-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__multas{
    background-image: url(../img/multas-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: 90% 70%;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__alertas-onwall{
    background-image: url(../img/alertas-onwall.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: 20% 70%;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img2__qr{
    background-image: url(../img/qr-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
.seccion4-img1__onbus-mobile{
    background-image: url(../img/mobileAPP.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 50rem;
    border-radius: 2rem;
}
@media(min-width: 1024px){
    .seccion4_contenedor{
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 5rem;
        align-items: center;
    }
    .seccion4-text1{
        grid-column: 2/3;
        grid-row: 1/2;
    }
}

/**SECCION 5 **/
.seccion5-img__temp{
    background-image: url(../img/temp-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__comportamiento-virtual{
    background-image: url(../img/ecosistema-ruta.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__puntos-onwall{
    background-image: url(../img/puntos-onwall.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__grafico{
    background-image: url(../img/reporte-grafico.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center 80%;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__demo-ruteo{
    background-image: url(../img/demo-ruteo.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center 30%;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__comandos-rutas{
    background-image: url(../img/comandos-rutas.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center 80%;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__navitrack-formulario{
    background-image: url(../img/navitrack-formulario.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center 40%;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__reportes-mantenimientos{
    background-image: url(../img/reportes-mantenimientos.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__reporte-rondin{
    background-image: url(../img/reporte-rondin.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__salidas{
    background-image: url(../img/salidas-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: 20% center;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__conductor{
    background-image: url(../img/conductor-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center center;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}
.seccion5-img__ecologico{
    background-image: url(../img/ecologico-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center 80%;
    height: 70rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
}

/** SECCION 6 **/
.seccion6{
    padding: 3rem 0;
    margin: 5rem 0 0 0;
}
.seccion6-img1__cartografia{
    background-image: url(../img/cartografia-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion6-img1__navitrack-panico{
    background-image: url(../img/navitrack-panico.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion6-img2__kilometrico{
    background-image: url(../img/centroamerica-img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion6-img2__pasajero{
    background-image: url(../img/pasajeros.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 5% center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion6-img2__combustible{
    background-image: url(../img/combustible-conductor.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion6-img2__navitrack-perfiles{
    background-image: url(../img/perfil-rondin.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 5% center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion6-img1__mensaje-conductor{
    background-image: url(../img/mensaje-conductor.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:  center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}
.seccion6-img1__velocidad-constante{
    background-image: url(../img/velocidad-constante.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:  center center;
    margin-bottom: 2rem;
    height: 50rem;
    border-radius: 2rem;
}


/** CARD PRUEBA**/
.container__card{   
     
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.container__card p{
    font-size: 1.5rem;
     
}
.card__father{
    margin: 2rem;
    perspective: 1000px;
}
.card__father:hover .card{
    transform: rotateY(180deg);
}
.card{
    width: 35rem;
    height: 40rem;
    position: relative;
    transform-style: preserve-3d;
    transition: all 1000ms;

}
.card__front{
    background-size: cover;
    background-position: center;
}
.card__front,
.card__back{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    border-radius: 2rem;
}
.card__back{
    transform: rotateY(180deg);
    /*background: white;*/
    /*background-color: #e7eff5;*/
    background-color: #dbf7ff;
}
.body__card_front{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blanco);
    transform: translateZ(60px);

}
.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    border-radius: 2rem;
}
.body__card_back{
    padding: 4rem;
    text-align: center;
    transform: translateZ(60px);
}
.body__card_back p{
    margin-top: 3rem;

}
.body__card_back input{
    padding: 1rem 4rem;
    margin-top: 3rem;
    font-size: 1.6rem;
    cursor: pointer;
    border: none;
    color: var(--blanco);
    background-color: #58B0F6;
    box-shadow: 1px 1px 30px -5px #58B0F6;
    border-radius: 1rem;
    transition: box-shadow 600ms;

}
.body__card_back input:hover{
    box-shadow: 1px 1px 30px 0px #449DE6;
}
.enlace-paginas{
    color: var(--iconColor);
}