/*======================================== FONT GOOGLE ==========================================*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url(slidercomentario.css);
@import url(productos.css);
@import url(contacto.css);
@import url(aplicaciones.css);
@import url(especificaciones.css);
/*===============================================================================================*/




/*======================================= CSS VARIABLE ==========================================*/
:root{
    --white-color: #fff;
    --dark-color: #161616;
    --body-bg-color: #fff;
    --section-bg-color: #414142;
    --navigation-item-hover-color: #3b5378;

    --text-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
    --box-shadow:  0 5px 25px rgb(0 0 0 /20%);

    --scroll-bar-color: #fff;
    --scroll-thumb-color: #282f4e;
    --scroll-thumb-hover-color: #454f6b;
}
/*===============================================================================================*/




/*====================================== CSS PRINCIPAL ==========================================*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}


body{
    background: var(--body-bg-color);
}


section{
    position: relative;
}


.section{
    width: 100%;
    height: 100%;
    padding: 45px 200px;
    transition: .3s ease;    
}


.container{
    width: 100%;
    height: 100%;
    padding: 45px 200px;
    margin: auto;
    transition: .3s ease;
    
}


/*===============================================================================================*/




/*=========================================== HEADER ============================================*/
header{
    z-index: 20999;
    position: fixed;
    width: 100%;
    height: calc(5.4rem +1rem);
    background: rgba(13, 17, 16, .97);
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    transition: 0.5s ease;
    transition-property: height, background;
}


header.sticky{
    height: calc(2.5rem + 1rem);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);  /*Efecto gausiano*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header .nav-bar{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 200px;
    transition: 0.1s ease;
}




.nav-bar .logo{
    width: 130px;
    height: 100%;
}




.nav-close-btn, .nav-menu-btn{
    display: none;   /*Ocultar btn*/
}
 



header .nav-bar li{
    display: inline;
    padding-left: 30px;
    align-content: center; 
}




.navigation .nav-items li a{
    color:var(--white-color);
    font-size: 1em;
    text-decoration: none;
}



.navigation .nav-items a i{
    display: none; /*Ocultar icono*/
}



/*------------------------Active link---------------------*/

.navigation .nav-items .active-link{
    position: relative;
    color:  #fd8c22;
}


.navigation .nav-items .active-link::before{
    content: '';
    position: absolute;
    background-color:  #fd8c22;
    width: 100%;
    height: 2px;
    bottom: -0.55rem;
}




.navigation .nav-items a:not(:last-child){
    margin-right: 45px;    
}


/*------------------------------ DISPOSITIVO TABLET 1200PX --------------------------------------*/
@media screen and (max-width: 1200px){
    header .nav-bar{
        padding: 0 150px;
        margin: 20px 0;
    }

    .navigation .nav-items a{
        margin-right: 10px;
    }

    .navigation .nav-items a:not(:last-child){
        margin-right: 35px;    
    }
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 1024PX --------------------------------------*/
@media screen and (max-width: 1024px){
    header .nav-bar{
        padding: 0 120px;
        margin: 20px 0;
    }

    .navigation .nav-items a{
        margin-right: 5px;
    }

    .navigation .nav-items a:not(:last-child){
        margin-right: 20px;    
    }
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 768PX --------------------------------------*/
@media screen and (max-width: 768px){
    header .nav-bar{
        padding: 5px 35px;
    }    
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 480PX --------------------------------------*/
@media screen and (max-width: 480px){
    header .nav-bar{
        padding: 5px 30px;
    }    
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 320PX --------------------------------------*/
@media screen and (max-width: 320px){
    header .nav-bar{
        padding: 5px 20px;
    }    
}
/*------------------------------------ ============== -------------------------------------------*/
/*===============================================================================================*/





/*============================================= HOME ============================================*/
.home{ 
    height: 100vh;
}

.home::before{
    z-index: 888;
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    left: 0;
    background: linear-gradient(transparent, var(--section-bg-color));
}
/*===============================================================================================*/





/*=================================== FONDO INICIO SLIDER =======================================*/
.bg-slider{
    z-index:777;
    position: relative;
    width: 100%;
    min-height: 100vh;
    
}


.bg-slider .swiper-slider{
    position: relative;
    width: 100%;
    height: 100vh;
}


.bg-slider .swiper-slide img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}


.dark-layer:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.07);
}

.swiper-slide .text-content{ 
    position: absolute;
    top: 25%;
    color: var(--white-color); 
    margin: 0 200px;
    transition: .3s ease;  
}


.swiper-slide .text-content .title{
    font-size: 3em; 
    font-weight: 500;
    text-shadow: var(--text-shadow);
    margin-bottom: 10px;
    transform: translateY(-50px);
    opacity: 0;
}


.swiper-slide-active .text-content .title{
    transform: translateY(0);
    opacity: 1;
    transition: 1s ease;
    transition-delay:  0.3s;
    transition-property: transform, opacity;
}

.swiper-slide .text-content .title span{
    font-size: 1em;
    font-weight: 700;
    color: #fccf3e;
}


.swiper-slide .text-content p{
    max-width: 700px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    text-shadow:var(--text-shadow);
    padding: 20px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--box-shadow);
    transform: translateX(-80px); /*Efecto de transición*/
    opacity: 0;                   /*Efecto de transición*/
}


.swiper-slide-active .text-content p{       /*Agregar -active*/
    transform: translateX(0);               /*Efecto de transición*/
    opacity: 1;                             /*Efecto de transición*/
    transition: 1s ease;                    /*Efecto de transición*/
    transition-delay:  0.3s;                /*Efecto de transición*/
    transition-property: transform, opacity;/*Efecto de transición*/
}

.swiper-slide-active .text-content b{       /*Agregar -active*/
    color: #fd8c22;
}



.swiper-slide .text-content .read-btn{    
    border: none;
    outline: none;
    background: var(--white-color);
    color: var(--dark-color);
    font-size: 1em;
    font-weight: 500;
    padding: 12px 25px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    border-radius: 10px;
    cursor: pointer;
    transform: translateX(50px); /*Efecto de transición*/
    opacity: 0;                  /*Efecto de transición*/
}


.swiper-slide-active .text-content .read-btn{
    transform: translateX(0);
    opacity: 1;
    transition: 0.1s ease;                    /*Efecto de transición*/
    transition-delay:  0.1s;                /*Efecto de transición*/
    transition-property: transform, opacity;/*Efecto de transición*/    
}


.swiper-slide .text-content .read-btn i{
    font-size: 1.6em;
    transition: 0.1s ease;
}

.swiper-slide .text-content .read-btn a{
    color: #000000;
    font-size: 1em;
    transition: 0.1s ease;
    text-decoration: none;
}


.swiper-slide .text-content .read-btn:hover i{
    transform: translateX(5px);    
}


.swiper-slide .text-content .read-btn:hover {
    background-color:#fccf3e;
    box-shadow:0 5px 10px rgba(252, 250, 250, 0.7);
    transition: .1s ease;    
}


.bg-slider-thumbs{
    z-index: 777;
    position: absolute;
    bottom: 7em;
    left: 50%;
    transform: translateX(-50%);
    transition:  .1s ease;
    display: flex;
    flex-direction: row;
}


.thumbs-container{
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 10px 3px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--box-shadow);
}


.thumbs-container img{
    width: 50px;
    height: 35px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
}


.swiper-slide-thumb-active{
    border: 1px solid var(--white-color);
}

/*------------------------------ DISPOSITIVO TABLET 1200PX --------------------------------------*/
@media screen and (max-width: 1200px){
    .section{
        padding: 25px 80px;
    }


    .swiper-slider .text-content{
        margin: 0 120px 0 50px;
    }


    .bg-slider-thumbs{
        bottom: 3em;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 1024PX --------------------------------------*/
@media screen and (max-width: 1024px){
    .section{
        padding: 25px 80px;
    }


    .swiper-slider .text-content{
        margin: 0 120px 0 50px;
    }


    .bg-slider-thumbs{
        bottom: 3em;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 768PX --------------------------------------*/
@media screen and (max-width: 768px){
    .section{
        padding: 25px 35px;
    }

    .swiper-slide .text-content{
        margin: 0 70px 0 35px;
    }

    .swiper-slide .text-content .title{
        font-size: 3em;
    }

    .swiper-slide .text-content .title span{
        font-size: 1em;
    }


    .swiper-slide .text-content p{
        font-size: 0.9em;
    }


    .nav-menu-btn{
        display: block;
        color: var(--white-color);
        font-size: 1.5em;
        cursor: pointer;
    }


    .nav-close-btn{
        z-index: 20993;
        display: block;
        color: var(--white-color);
        position: absolute;
        top: 0;
        right: 0;
        font-size: 1.3em;
        margin: 10px;
        cursor: pointer;
        transition: 0.3s ease;
    }


    .navigation{
        z-index: 99999;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.25);
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
        transition: 0.5s ease;
    }

    
    .navigation.active{
        visibility: visible;
        opacity: 1;
    }


    .navigation .nav-items{
        z-index: 1;
       position: relative;
       background:  rgba(13, 17, 16, 0.97);
       width: 400px;
       max-width: 400px;
       display: grid;
       place-content: center;
       margin: 15px;
       padding: 20px;
       padding-left: 25px;
       border-radius: 20px;
       box-shadow: var(--box-shadow);
       transform: translateY(-120px);
       transition: 0.3s ease;
    }



    .navigation.active .nav-items{
        transform: translateY(0);
     }



    .navigation .nav-items a{
        color: var(--white-color);
        font-size: 1em; 
        margin: 15px 25px;
        transition: 0.1s ease;
        display: flex;
        align-items: center;       
     }


     .navigation .nav-items a:hover{
        color: #fd8c22;  
        transform: scale(1.1);
        transition: 0.1s ease;     
     }


     .navigation .nav-items a i{
        display: inline-block; 
        font-size: 1.3em;
        margin-right: 5px;      
     }


     .swiper-slide .text-content .read-btn{
        font-size: 0.9em;
        padding: 10px 15px;
     }
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 480PX --------------------------------------*/
@media screen and (max-width: 480px){
    .swiper-slide .text-content .title{
        font-size: 3em;
        bottom: 5px;
    }


    .swiper-slide .text-content{
        margin: 0 60px 0 30px;
    }

    .swiper-slide .text-content .title span{
        font-size: 1em;
        bottom: 5px;
    }
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 320PX --------------------------------------*/
@media screen and (max-width: 320px){
    .swiper-slide .text-content .title{
        font-size: 3em;
        bottom: 5px;
    }


    .swiper-slide .text-content{
        margin: 0 50px 0 20px;
    }

    .swiper-slide .text-content .title span{
        font-size: 1em;
        bottom: 5px;
    }
}
/*------------------------------------ ============== -------------------------------------------*/
/*===============================================================================================*/




/*======================================== MEDIA ICONS ==========================================*/
.media-icons{
    z-index: 990;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 90px;
}


.media-icons a{
    color: var(--white-color);
    font-size: 1.7em;
    margin: 10px 0;
}


.media-icons a:hover{
    color: #fd8c22;
    transform: scale(1.2);
    transition: 0.1s ease;

}

/*------------------------------ DISPOSITIVO TABLET 1200PX --------------------------------------*/
@media screen and (max-width: 1200px){
    .media-icons{
        right: 0;
        margin-right: 200px;
    }
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 10240PX --------------------------------------*/
@media screen and (max-width: 1024px){
    .media-icons{
        right: 0;
        margin-right: 150px;
    }
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 768PX --------------------------------------*/
@media screen and (max-width: 768px){
    .media-icons{
        margin-right: 35px;
    }

    .media-icons a{
        font-size: 1.5em;
    }
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 480PX --------------------------------------*/
@media screen and (max-width: 480px){
    .media-icons{
        margin-right: 30px;
    }

    .media-icons a{
        font-size: 1.5em;
    }
}
/*------------------------------------ ============== -------------------------------------------*/

/*------------------------------ DISPOSITIVO TABLET 320PX --------------------------------------*/
@media screen and (max-width: 320px){
    .media-icons{
        margin-right: 20px;
    }

    .media-icons a{
        font-size: 1.5em;
    }
}
/*------------------------------------ ============== -------------------------------------------*/
/*===============================================================================================*/



/*====================================== NUESTRA EMPRESA ========================================*/
.section__inicio{
    width: 100%;
    height: 100%;
    background: #ffffff;
}


.inicio__content h1{
    color: #000000;
    text-align: center;
    margin: 10px 0;
}


.inicio__content h2{
    color: #000000;
    text-align: center;
    margin: 10px 0;
}



.inicio__content .lineatitulo{
    border-top: 5px solid #fd6722;
    width: 60px;
    height: 2px;
    padding: 0;
    margin: 10px auto 0 auto;
}

.section__inicio .inicio__content  .content__seccion__inicio{
   padding-top: 30px;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}



.content__seccion__inicio .contenedor__text__inicio{
    margin-right: 20px;
    transition: 0.5s ease;
}



.contenedor__text__img img{
   display: block;
   margin: 0 auto;
   transition: 0.5s ease;
}


/*------------------------------ DISPOSITIVO TABLET 1200PX --------------------------------------*/
@media screen and (max-width: 1200px){
    .inicio__content{
        width: 100%;
        height: 100%;
        padding: 35px 150px;
        margin: auto;
        transition: .3s ease;
    }

    
    .content__seccion__inicio .contenedor__text__inicio{
        margin-right: 20px;
    }

    .contenedor__text__img img{
        width: 96%;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 1024PX --------------------------------------*/
@media screen and (max-width: 1024px){
    .inicio__content{
        width: 100%;
        height: 100%;
        padding: 35px 120px;
        margin: auto;
        transition: .3s ease;
    }

    
    .content__seccion__inicio .contenedor__text__inicio{
        margin-right: 20px;
    }


    .contenedor__text__img img{
        width: 94%;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 768PX --------------------------------------*/
@media screen and (max-width: 768px){
    .inicio__content{
        width: 100%;
        height: 100%;
        padding: 35px 35px;
        margin: auto;
        transition: .3s ease;
    }

    
    .section__inicio .inicio__content  .content__seccion__inicio{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .contenedor__text__img{
        margin: auto;
        margin-top: 20px;
    }

    .content__seccion__inicio .contenedor__text__inicio p{
        margin-right: 0;
        margin: auto;
    }

    
    .contenedor__text__img img{
       display: block;
       margin: 0 auto;
       width: 90%;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 480PX --------------------------------------*/
@media screen and (max-width: 480px){
    .section__inicio{
        margin-top: 20px;
    }

    .inicio__content{
        width: 100%;
        height: 100%;
        padding: 35px 30px 40px 30px;
        margin: auto;
        transition: .3s ease;
    }

    
    .section__inicio .inicio__content  .content__seccion__inicio{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }


    .content__seccion__inicio .contenedor__text__inicio{
        margin-right: 0;
    }

    .contenedor__text__img{
        margin: auto;
        margin-top: 20px;
    }

    .contenedor__text__img img{
        width: 90%;
        height: 100%;
        margin: 0 auto;
    }

}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 320PX --------------------------------------*/
@media screen and (max-width: 320px){
    
    .contenedor__text__img img{
        width: 245px;
        height: 100%;
    }
    
    .contenedor__text__img img{
        width: 90%;
        height: 100%;
        margin: 0 auto;
    }
}
/*------------------------------------ ============== -------------------------------------------*/
/*===============================================================================================*/





/*======================================== CSS SERVICIOS =======================================*/
.section__servicios{
    width: 100%;
    height: 100%;
    background: #eceaea;
    padding-bottom: 20px;
}


.servicios__content{
    width: 100%;
    margin: 0 auto;
}



.servicios__content h1{
    text-align: center;
    margin: 10px 0;
}



.servicios__content .lineatitulo{
    border-top: 5px solid #fd6722;
    width: 60px;
    height: 2px;
    padding: 0;
    padding-bottom: 10px;
    margin: 10px auto 0 auto;    
}



.servicios__content .content__section__servicios{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px 10px;
    margin-top: 10px;
    transition: 0.3s ease;
}



.content__section__servicios .content__servicios {
    background: #f5f5f8;
    box-shadow: 0px 0px 4px 0px rgba(27, 27, 27, 0.75) ;
    border-radius: 5px;
    display: grid;
    align-items: center;
    align-content: start;
    padding: 20px;
    width: 100%;
    height: 620px;
    cursor: pointer;
    transform: translateY(1rem);
    display: grid; 
    
}

.content__section__servicios .content__servicios:hover {
    border: 1px solid #fd8c22;
    background: #fff;
    box-shadow: 0px 0px 8px 0px rgba(247, 139, 16, 0.75) ;
    transform: translateY(0);
    transition: .3s ease; 
    
}


.content__section__servicios .content__servicios h4{
    text-align: center;
    padding-bottom: 10px;
}



.servicios__content .content__section__servicios .content__servicios img{
    width: 80%;
    margin: auto;
    display: grid;
    justify-items: center;
    justify-content: center;
    border-radius: 5px; 
    padding-bottom: 10px;  
}

/*------------------------------ DISPOSITIVO TABLET 1200PX --------------------------------------*/
@media screen and (max-width: 1200px){
    .section__servicios{
        width: 100%;
        height: 100%;
    }

    .servicios__content{
        width: 100%;
        padding: 20px 150px 20px 150px;
        align-items: center;
    }


    .servicios__content .content__section__servicios{
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 20px 10px;
        margin-top: 10px;
        }  
    


   .servicios__content .content__section__servicios .content__servicios img{
        width: 75%;
        display: grid;
        justify-content: center;
        border-radius: 5px; 
        padding-bottom: 10px;  
    }
   
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 1024PX --------------------------------------*/
@media screen and (max-width: 1024px){
    
    .servicios__content{
        width: 100%;
        padding: 20px 120px 20px 120px;
        align-items: center;
        margin: auto;
    }


    .servicios__content .content__section__servicios{
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 20px 10px;
        margin-top: 10px;
    }
    
          

   .servicios__content .content__section__servicios .content__servicios img{
        width: 75%;
        display: grid;
        justify-content: center;
        border-radius: 5px; 
        padding-bottom: 10px;  
    }    
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 768PX --------------------------------------*/
@media screen and (max-width: 768px){
     
    .servicios__content{
        width: 100%;
        padding: 20px 35px 20px 35px;
        align-items: center;
        margin: auto;
    }


    .servicios__content .content__section__servicios{
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px 10px;
        margin-top: 10px;
    }
    
          

   .servicios__content .content__section__servicios .content__servicios img{
        width: 75%;
        display: grid;
        justify-content: center;
        border-radius: 5px; 
        padding-bottom: 10px;  
    }       
}   
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 480PX --------------------------------------*/
@media screen and (max-width: 480px){
    .servicios__content{
        width: 100%;
        padding: 20px 30px 20px 30px;
        align-items: center;
        margin: auto;
    }


    .servicios__content .content__section__servicios{
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: 1fr;
        grid-gap: 20px 10px;
        margin-top: 10px;
    }
    
          

   .servicios__content .content__section__servicios .content__servicios img{
        width: 65%;
        display: grid;
        justify-content: center;
        border-radius: 5px; 
        padding-bottom: 10px;  
    }           
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 320PX --------------------------------------*/
@media screen and (max-width: 320px){
    .servicios__content{
        width: 100%;
        padding: 20px 20px 20px 20px;
        align-items: center;
        margin: auto;
    }


    .servicios__content .content__section__servicios{
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: 1fr;
        grid-gap: 20px 10px;
        margin-top: 10px;
    }
    
          

   .servicios__content .content__section__servicios .content__servicios img{
        width: 85%;
        display: grid;
        justify-content: center;
        border-radius: 5px; 
        padding-bottom: 10px;  
    }    
}
/*------------------------------------ ============== -------------------------------------------*/
/*===============================================================================================*/






/*======================================== CSS TRABAJOS ========================================*/
.section__trabajos{
    width: 100%;
    height: 100%;
    background: #fccf3e;
    padding-bottom: 20px;
}


.trabajos__content{
    width: 100%;
    margin: 0 auto;
}



.trabajos__content h1{
    text-align: center;
    margin: 10px 0;
}



.trabajos__content .lineatitulo{
    border-top: 5px solid #fd6722;
    width: 60px;
    height: 2px;
    padding: 0;
    padding-bottom: 10px;
    margin: 10px auto 0 auto;    
}



.container-grid{
    display: grid;
    height:20%;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(6,1fr);
    grid-template-areas:
    "img1 img2 img13 img13 img13"
    "img15 img15 img25 img3 img22"
    "img4 img21 img20 img20 img20"
    "img4 img21 img19 img19 img19"
    "img6 img6 img5 img5 img23"
    "img6 img6 img24 img24 img23"    
    "img7 img7 img8 img8 img14"
    "img7 img7 img8 img8 img14"
    "img9 img9 img18 img10 img11"
    "img9 img9 img18 img10 img11"
    "img16 img17 img17 img10 img12";
    gap: 5px;
}


.img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img:hover{
    filter: grayscale(60%);
    cursor: pointer;
    transition: filter .5s;
}

.img-1{
    grid-area: img1;

}

.img-2{
    grid-area: img2;   
}

.img-3{
    grid-area: img3;        
}

.img-4{
    grid-area: img4; 
}

.img-5{
    grid-area: img5; 
}

.img-6{
    grid-area: img6; 
}

.img-7{
    grid-area: img7;

}

.img-8{
    grid-area: img8;   
}

.img-9{
    grid-area: img9;        
}

.img-10{
    grid-area: img10; 
}

.img-11{
    grid-area: img11; 
}

.img-12{
    grid-area: img12; 
}

.img-13{
    grid-area: img13; 
}

.img-14{
    grid-area: img14; 
}

.img-15{
    grid-area: img15; 
}

.img-16{
    grid-area: img16; 
}


.img-17{
    grid-area: img17; 
}

.img-18{
    grid-area: img18; 
}

.img-19{
    grid-area: img19; 
}


.img-20{
    grid-area: img20; 
}

.img-21{
    grid-area: img21; 
}


.img-22{
    grid-area: img22; 
}


.img-23{
    grid-area: img23; 
}

.img-24{
    grid-area: img24; 
}


.img-25{
    grid-area: img25; 
}



.container-img{ 
    z-index: 9000;   
    position: fixed;
    height: 100%;
    width: 100%;
    top: 20px;
    left: 0;
    transform: translateX(-100%);
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .4s ease-in;

}

.move{
    transform: translateX(0); 
}

.img-show{
    height: 80%;
    transform: scale(0);
    display: block;
    object-fit: cover;
    transition: transform .2s .4s;
}

.show{
    transform: scale(1);
}

.copy{
    position: fixed;
    color: #fff;
    bottom: 40px;

}

.imgclose{
    position: absolute;
    color: #fff;
    top: 65px;
    right: 20px;
    font-size: 40px;
    cursor: pointer;
}


/*------------------------------ DISPOSITIVO TABLET 1200PX --------------------------------------*/
@media screen and (max-width: 1200px){
    .section__trabajos{
        width: 100%;
        height: 100%;
    }

    .trabajos__content{
        width: 100%;
        padding: 20px 150px 20px 150px;
        align-items: center;
    }    
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 1024PX --------------------------------------*/
@media screen and (max-width: 1024px){
    .trabajos__content{
        width: 100%;
        padding: 20px 120px 20px 120px;
        align-items: center;
    }      
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 768PX --------------------------------------*/
@media screen and (max-width: 768px){
    .trabajos__content{
        width: 100%;
        padding: 20px 35px 20px 35px;
        align-items: center;
    } 
    
    .img-show{
        width: 70%;
    }

    .copy{
        bottom: 35px;
    }

    .imgclose{
        top: 70px;
        font-size: 25px;
    }
}   
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 480PX --------------------------------------*/
@media screen and (max-width: 480px){
    .trabajos__content{
        width: 100%;
        padding: 20px 30px 20px 30px;
        align-items: center;
    } 
    
    .img-show{
        width: 87%;
        height: 50%;
    }

    .copy{
        bottom: 140px;
    }

    .imgclose{
        top: 130px;
        font-size: 25px;
    }       
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 320PX --------------------------------------*/
@media screen and (max-width: 320px){
    .trabajos__content{
        width: 100%;
        padding: 20px 20px 20px 20px;
        align-items: center;
    } 
    
    .img-show{
        width: 87%;
        height: 50%;
    }

    .copy{
        bottom: 140px;
    }

    .imgclose{
        top: 130px;
        font-size: 25px;
    }           
}
/*------------------------------------ ============== -------------------------------------------*/
/*===============================================================================================*/





/*======================================= CSS APLICATION =========================================*/
.section__aplication{
    width: 100%;
    background:#ffffff;
    margin-bottom: 30px;
}


.aplication__content{
    width: 100%;
    margin: 0 auto;
}




.aplication__content h1{
    text-align: center;
    height: auto;
    margin: 20px 0px;
}



.aplication__content .content__seccion__aplication{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px 10px;
    margin-top: 10px;
}



.aplication__content .lineatitulo{
    border-top: 5px solid #fd6722;
    width: 60px;
    height: 2px;
    padding: 0;
    padding-bottom: 10px;
    margin: 10px auto 0 auto;    
}


.img__aplication{
    z-index: 2;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center; 
    padding-bottom: 25px;
    transform: translateY(1rem);    
}


.img__aplication:hover{
    background: #fccf3e;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.85);
    transform: translateY(0);
    transition: .3s ease;    
}



.img__aplication i{
    color: #fd6722;
    font-size: 4rem;
    display: grid;
    justify-content: center;
    margin: 10px;
    
}

.img__aplication h3{
    font-size: 1.2rem;
    font-weight: 400;
    display: grid;
    align-items: center;
    justify-content: center;
    margin: 10px;
    
}


.img__aplication p{
    color: #3d3d3d;
    display: grid;
    margin: 15px;
}


.img__aplication .btn__veraplic{   
    background: #161616;
    color: #fff;
    margin: auto;
    padding: 10px 30px;
    position:relative; 
    display: grid;
    align-items: center;
    justify-content: center;
    outline:none;
    border: 0;
}


.img__aplication .btn__veraplic:hover{   
    background: #525151;
    transition: .4s ease;    
}

.img__aplication .btn__veraplic a{      
    color: #fff;   
    text-decoration: none;     
}
/*------------------------------ DISPOSITIVO TABLET 1200PX --------------------------------------*/
@media screen and (max-width: 1200px){
    .aplication__content{
    width: 100%;
    padding: 20px 150px 20px 150px;
    align-items: center;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 1024PX --------------------------------------*/
@media screen and (max-width: 1024px){
    .aplication__content{
    width: 100%;
    padding: 20px 120px 20px 120px;
    align-items: center;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 768PX --------------------------------------*/
@media screen and (max-width: 768px){
    .aplication__content{
        width: 100%;
        padding: 20px 35px 20px 35px;
        align-items: center;
    }

    .aplication__content .content__seccion__aplication{
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns:1fr 1fr;
        grid-gap: 20px 10px;
        margin-top: 10px;
    }    
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 480PX --------------------------------------*/
@media screen and (max-width: 480px){
    .aplication__content{
        width: 100%;
        padding: 20px 30px 20px 30px;
        align-items: center;
    }

    .aplication__content .content__seccion__aplication{
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns:1fr;
        grid-gap: 20px 10px;
        margin-top: 10px;
    }  
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 320PX --------------------------------------*/
@media screen and (max-width: 320px){
    .aplication__content{
        width: 100%;
        padding: 20px 20px 20px 20px;
        align-items: center;
    }
}
/*------------------------------------ ============== -------------------------------------------*/
/*===============================================================================================*/






/*========================================= FOOTER ==============================================*/
.section__footer{
    width: 100%;
    height: 100%;
    background:#272727;
}


.footer__content {
    width: 100%;
    margin: 0 auto;
}


.footer__content .content__text{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px 20px;
    margin-top: 10px;
    padding-bottom: 30px;
}


.content__text .section__footer__text{
    display: flex;
    flex-direction: column;
}



.section__footer__text h3{
    color: #fccf3e;
    padding-bottom: 10px;
}


.section__footer__text p,a,span{
    color: #fff;
}


.section__footer__text a{    
    text-decoration: none;
    padding: 3px 0;
}


.section__footer__text a:hover{  
    color: #fd8c22;
}


.section__footer__text span{    
    padding: 3px 0;
}

.section__footer__text span i{    
    color: #fd8c22;
}


.section__footer__text .footer__mediosocial a{
    font-size: 1.5em;
}


.footer__content  .content__text__copyrigh{
    color: #777676;
    text-align: center;
    font-size: 0.9em;
    font-weight: 100;
    margin-top: 10px;
}
/*------------------------------ DISPOSITIVO TABLET 1200PX --------------------------------------*/
@media screen and (max-width: 1200px){
    .footer__content {
        width: 100%;
        margin: 0 auto;
        padding: 30px 150px 20px 150px;
    }

    .footer__content .content__text{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 20px 20px;
        margin-top: 10px;
        padding-bottom: 30px;
    }   
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 1024PX --------------------------------------*/
@media screen and (max-width: 1024px){
    .footer__content {
        width: 100%;
        margin: 0 auto;
        padding: 30px 120px 20px 120px;
    }

    .footer__content .content__text{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 20px 20px;
        margin-top: 10px;
        padding-bottom: 30px;
    }   
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 768PX --------------------------------------*/
@media screen and (max-width: 768px){
    .footer__content {
        width: 100%;
        margin: 0 auto;
        padding: 30px 35px 20px 35px;
    }

    .footer__content .content__text{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px 20px;
        margin-top: 10px;
        padding-bottom: 30px;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 480PX --------------------------------------*/
@media screen and (max-width: 480px){
    .footer__content {
        width: 100%;
        margin: 0 auto;
        padding: 30px 30px 20px 30px;
    }
    
    .footer__content .content__text{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px 20px;
        margin-top: 10px;
        padding-bottom: 30px;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 420PX --------------------------------------*/
@media screen and (max-width: 420px){
    .footer__content {
        width: 100%;
        margin: 0 auto;
        padding: 30px 30px 20px 30px;
    }
    
    .footer__content .content__text{
        display: grid;
        grid-template-columns:1fr;
        grid-gap: 20px 20px;
        margin-top: 10px;
        padding-bottom: 30px;
    }
}
/*------------------------------------ ============== -------------------------------------------*/


/*------------------------------ DISPOSITIVO TABLET 320PX --------------------------------------*/
@media screen and (max-width: 320px){
    .footer__content {
        width: 100%;
        margin: 0 auto;
        padding: 30px 20px 20px 20px;
    }
    
    .footer__content .content__text{
        display: grid;
        grid-template-columns:1fr;
        grid-gap: 20px 20px;
        margin-top: 10px;
        padding-bottom: 30px;
    }
}
/*------------------------------------ ============== -------------------------------------------*/

/*===============================================================================================*/





/*======================================== SCROLL UP ============================================*/
.scrollup{
    z-index: 50000;
    position: fixed;
    right: 1rem;
    bottom: -20%;
    background:  #fd8c22;    
    display: flex;
    transition: .4s ease;
    padding: 10px;
    text-decoration: none; 
}

.scrollup .scrollup-icon{
    color: #000000;
    font-size: 1.5rem;
    text-decoration: none; 
}


.scrollup i{
    text-decoration: none;    
}



.scrollup:hover{
    background-color:  #fc9e45; 
    border: 2px solid  #fd8c22;
    transition: .4s ease;   
}


.show-scroll{
    bottom: 5rem;
}
/*===============================================================================================*/





/*========================================= xxxxxx ==============================================*/
/*===============================================================================================*/