/* CSS Document */

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

:root{
    --c-blue: #205ca1;
    --c-bluesky: #2c98d4;
    --c-gr2: #222;
    --c-gr3: #333;
    --c-gr5: #555;
    --c-gr6: #666;
    --c-gr9: #999;
}

body{margin: 0; background-color:#e6e6e6; font-family: source; font-size: 16px; line-height: 28px; letter-spacing: .5px; font-weight: 400; scroll-behavior: smooth; -webkit-scroll-behavior: smooth;}
@media (max-width: 580px){
    body{font-size: 17px; line-height: 29px;}
}


a{text-decoration: none;color:transparent;}
a:active{color:transparent;}
a:visited{color:transparent;}

h1,h2,h3,h4,p{margin: 0;}

.no_sel {-webkit-touch-callout: none;-webkit-user-select: none; user-select: none;-webkit-tap-highlight-color: transparent;}
.no_sel:focus { outline: none !important;}
.no_sel:hover { outline: none !important;}

/*   FONTS   */

/*   Source  */

@font-face {
    font-family: 'source';
    src:  url('../fonts/sourcesanspro-light.woff2') format('woff2'),
          url('../fonts/sourcesanspro-light.woff') format('woff');
    font-weight: 300; font-style: normal;
}
@font-face {
    font-family: 'source';
    src:  url('../fonts/sourcesanspro-regular.woff2') format('woff2'),
          url('../fonts/sourcesanspro-regular.woff') format('woff');
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: 'source';
    src:  url('../fonts/sourcesanspro-semibold.woff2') format('woff2'),
          url('../fonts/sourcesanspro-semibold.woff') format('woff');
    font-weight: 600; font-style: normal;
}
@font-face {
    font-family: 'source';
    src:  url('../fonts/sourcesanspro-bold.woff2') format('woff2'),
          url('../fonts/sourcesanspro-bold.woff') format('woff');
    font-weight: 700; font-style: normal;
}

.h2{
    font-size:2.3rem; line-height:2.3rem; letter-spacing:.75px;
    padding:20px 0 10px 0;
}
.secTwocols{
    column-count: 2; column-gap: 65px; padding:25px 0;
}


.fSour{font-family: source}

.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw600{font-weight: 600;}
.fw700{font-weight: 700;}

.txWhite{color:#fff}
.txBlue{color:var(--c-blue)}
.txSkyblue{color:var(--c-bluesky)}
.txGray3{color:var(--c-gr3)}
.txGray6{color:var(--c-gr6)}
.txGray9{color:var(--c-gr9)}

.bgBlack{background-color:#000}
.bgWhite{background-color:#fff}
.bgBlue{background-color:var(--c-blue)}
.bgSkyblue{background-color:var(--c-bluesky)}
.bgGray2{background-color:var(--c-gr2)}
.bgGray3{background-color:var(--c-gr3)}
.bgGray6{background-color:var(--c-gr6)}
.bgGray9{background-color:var(--c-gr9)}

.txUpper{text-transform: uppercase;}

.mt50{margin-top:50px}
.mxAuto{margin-left: auto; margin-right: auto;}

.flex{
    display:flex; width:100%;
}
.pMain{padding-left:20px; padding-right:20px}
.pConte{padding-left:65px; padding-right:65px;}
.pColumns{padding-left:65px; padding-right:65px}

.maxW1280{width:100%; max-width: 1280px;}

.hr{height:1px; border:none; border-bottom: 1px solid #ccc; margin:15px 0 15px 0}
.bSkyblue{border-color:var(--c-bluesky)}
.bGray3{border-color:var(--c-gr3)}
.bGray5{border-color:var(--c-gr5)}
.bGray6{border-color:var(--c-gr6)}
.bGray9{border-color:var(--c-gr9)}

.ding{
    display:flex; align-items: flex-end;
    width:fit-content; width:-moz-max-content;
    padding:30px 3px 4px 3px; margin-bottom: 15px;
}

.showMd{display:none;}
@media (max-width: 767px){
    .secTwocols{
        column-count: 1; padding:15px 0;
    }
    .showMd{display:block;}
}
@media (max-width: 580px){
    .pConte{width:100%; padding-left:25px; padding-right: 25px;}
    .pColumns{width:100%; padding-left:0; padding-right:0}
    .hideMob{display: none;}

    .txGray3{color:#555}
    .txGray6{color:#888}
    .txGray9{color:#bbb}

    .h2{
        font-size:2rem; line-height:2rem; letter-spacing:.5px;
        padding:15px 0 5px 0; color:#999;
    }
}
.delay50{animation-delay: 50ms;}
.delay700{animation-delay: 700ms;}
.delay1200{animation-delay: 1200ms;}
.delay1300{animation-delay: 1300ms;}
.delay1600{animation-delay: 1600ms;}

.dur650{animation-duration: 650ms;}
.dur1000{animation-duration: 1000ms;}


.animIn{
    animation: fade_in 1000ms ease-in-out 700ms; animation-fill-mode: forwards;
}
.animOut{
    animation: fade_out 300ms ease-in-out; animation-fill-mode: forwards;
}
.animFadeIn{
    animation-name: fade_in; animation-fill-mode: forwards;
}
.animMoveInX{
    transform:translateX(100px); opacity:0;
    animation-name: move_inYX; animation-timing-function: ease-out; animation-fill-mode: forwards;
}
.animMoveInY{
    transform:translateY(-80px); opacity:0;
    animation-name: move_inYX; animation-timing-function: ease-out; animation-fill-mode: forwards;
}
.animOscY{
    /*animation:move_oscY 1100ms ease-in-out infinite; 
    animation-direction: alternate-reverse;*/
}
.animBeat{
    animation:beat 2800ms linear infinite; 
}

@keyframes fade_in{
    100%{opacity: 1}
}
@keyframes fade_out{
    100%{opacity: 0}
}
@keyframes move_inYX{
    100%{opacity: 1; transform:translate(0); }
}
@keyframes move_oscY{
    0%{transform:translateY(-3px); }
    100%{transform:translateY(3px); }
}
@keyframes beat{
    80%{transform:scale(1)}
    84%{transform:scale(1.3)}
    88%{transform:scale(.8)}
    92%{transform:scale(1.15)}
    96%{transform:scale(.93)}
    100%{transform:scale(1)}
}

/*        HEADER       +++        NAV        */

header{
    position: fixed; top:0; z-index:1;
    align-items: center;
}
header>div>a{
    display: flex;
}
header>div{
    align-items: center; justify-content:space-between;
    padding-top:20px; padding-bottom:18px;
}
.headerNav{
    display:flex; 
}
.headerNav>a>p{
    color:var(--c-blue); font-size:15px; line-height: 15px;  letter-spacing: .75px; 
    margin-right:25px; transition: 250ms color linear;
    text-transform: uppercase;
}
.headerNav>a:last-of-type>p{
    margin-right:0px;
}
.headerNav>a>p:hover{
    color:var(--c-bluesky);
}
.navActive{
    color:var(--c-bluesky) !important;
}
.menu{
    display: none;
}
.icoComm{
    width:22px; height:22px;  cursor:pointer;
    margin:7px 0 7px 7px;
}
.icoMenu{
    background-size:cover;
    background-position-x: right;
    background-image: url(../img/ico_header_menu.svg);
}

@media (max-width: 767px){
    header>div{justify-content:center}
    header>div>a{display:none}
}
@media (max-width: 580px){
    .headerNav{
        position: absolute; width:220px; height:100vh;
        left:-250px; top:54px; padding:10px 0 15px 22px;
        flex-direction: column; z-index: 1;
        background-color: #072a52;
        transition: left 250ms ease-out;
    }
    .headerNav>a>p{
        width:174px;
        font-size:21px; line-height: 20px; font-weight:400;
        letter-spacing: 1.5px;
        padding:12px 0 12px 0; color:#4086d6;
        text-transform: unset;
        margin-bottom: 6px;
        border-bottom: 1px solid #2663a8;
    }

    .navLinksOut{left: 0;}
    .navLinksNone{display: none;}

    header>div{justify-content:space-between; padding-top:12px; padding-bottom:7px;}
    header>div>a{display:flex; margin-top:-3px; margin-left:-2px}
    .menu{display: block; cursor: pointer;}
    .menu>img{width:30px; height:30px; margin-top:3px}
    .icoMenu{
        transition:transform 300ms ease-in-out;
    }
}
@media (max-width: 280px){
    header>div>a{width:34px; height:32px;overflow: hidden;}
}

section{overflow:hidden}

/*    ---    HERO    ---   */

main{
    width:100%; background-color:black;
    background-image: url(../img/loader.svg);
    background-repeat: no-repeat; background-position: center center;
    overflow:hidden;
}
.hero{
    position:relative; z-index: 0; margin-top:69px;
    background-image: url(../img/pattern_hero.svg);
    /*background-image: url(../img/home_hero_bg.jpg);
    background-position-x: right;*/ max-width:2900px;
}
.heroContent{
    height:84vh; min-height:380px; max-height:680px;
}
.content2d,.content3d{
    display:flex; flex-direction: column; width: 50%; height: 100%; align-items: center; justify-content: center;
    z-index: 1;
}
.heroContent>div>h1{
    width:310px;
    font-size: 43.5px; line-height: 56px; font-weight: 300; 
}
.heroContent>div>h1:first-of-type{
    font-weight: 600; 
}
.content3d{
    position: relative;
    perspective: 330px;
}
.layer3d{
    position:absolute; perspective: 330px;
    transform: rotateX(15deg) rotateY(-15deg) translateZ(-15px);
    transition-property: transform; 
}
.ease0{
    transition-timing-function: linear;
    /*transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);*/
}
.ease1{
    transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
    /*
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);*/
}
.ease2{
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    /*transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);*/
}
.logo3d{
    width:240px; height:240px;
    top:-120px; left:-120px;
}
.logo3d_bg{
    width:440px; height:440px;
    top:-220px; left:-220px;z-index:-1;
}
.fondo3d{
    position: absolute; top:0; left:0;
    width:200px; height:200px; z-index:-1;
    border-radius:100%;
}


/*  ---  HERO gradient  ---  */

.heroBgBlack{
    position:absolute; width:100%; height:100%; opacity:.9;
    animation: fadeInOut 3s linear infinite;
    animation-direction: alternate-reverse;
    background-color: #09121a;
}
@keyframes fadeInOut{
    0%{opacity:0.9}
    70%{opacity: .7;}
    100%{opacity: .7;}
}
.heroBgGrad{
    position:absolute; width:50%; height:100%;
    background-image: linear-gradient(135deg, #103866,  #1577c6);
    z-index: 0; border-radius: 0 9999px 0 0;
}

@media (max-width: 1023px){
    .heroContent>div>h1{
        font-size: 2.5rem; line-height: 2.6rem;
        width:280px;
    }
    .logo3d{
        width:180px; height:180px;
        top:-90px; left:-90px;
    }
    .logo3d_bg{
        width:340px; height:340px;
        top:-170px; left:-170px;
    }
}
@media (max-width: 767px){
    .hero{
        background-position: right top; /*background-size: cover;*/
        margin-top:52px;
    }
    .heroBgBlack{
        position:absolute; width:100%; height:100%; opacity:80%;
        animation:none; z-index:-2;
    }
    .heroBgGrad{
        width:100%; height: 50%; bottom:0;
        border-radius: 0;
    }
    .heroContent{
        flex-direction: column-reverse; height:auto; max-height: none;
    }
    .content2d,.content3d{
       width:100%; height: 300px;
    }
    .content3d{
        z-index:-1;
    }
}
@media (max-width: 580px){
    .heroContent>div:first-of-type{
        height: 40vh;
     }
    .heroContent>div:last-of-type{
        height: 41vh;
     }
     .heroBgGrad{height: 40vh;}
     .heroContent>div>h1{
        font-size: 2rem; 
        line-height: 2.4rem;
        width:222px;
     }
     .hero{
        margin-top:58px;
     }
     .logo3d{
        width:160px; height:160px;
        top:-80px; left:-80px;
    }
    .logo3d_bg{
        width:320px; height:320px;
        top:-160px; left:-160px;
        opacity:.8;
    }
}
@media (max-width: 320px){
    .heroContent>div>h1{
        font-size: 2rem; line-height: 2.1rem;
        width:220px;
    }
}


/*   ---   SECTION About   ---   */

.secAbout{
    padding:150px 0 125px 0;
    box-shadow: inset 0px 4px 12px 0px rgba(0,0,0,0.4);
}
.bgNoise{
    background-image: url(../img/pattern_about.svg); background-attachment: fixed; 
    background-size: 6px 6px;
}
.secConte>div{
    display:flex; flex-direction: column; width:50%; align-items: center; justify-content: center;
}
.secConte>div>p:last-of-type{
    border-left: 1px solid #fff;
}

@media (max-width: 767px){
    .secAbout{padding-top:60px}
    .secConte{flex-direction: column;}
    .secConte>div{width:100%; align-items: flex-start;}
    .secConte img{
        margin:40px 0 80px 70px;
    }
}
@media (max-width: 580px){
    .secAbout{
        padding-bottom:80px;
    }

    .secConte>div:first-of-type{
        border-top: 1px solid #666;
        padding-top:40px;
    }
    .secConte>div>p:last-of-type{
        border-left: none; border-top: 1px solid #666;
        padding-top:40px; margin-top: 40px;
    }
    .secConte img{
        width:230px; height:45px;  margin:0;
    }
}

/*   ---   SECTION Services   ---   */


.secServ{
    padding-bottom: 40px;
}
.imgServicios{
    width:100%; height: 485px; margin-top:30px; 
    background-image: url(../img/home_servicios_bg_full.jpg);
    background-size: cover;
    background-position: center bottom;
    background-position-x: 0;
    animation: bgLeftToRight 8s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@media (max-width: 580px){
    .imgServicios{
        background-image: url(../img/home_servicios_bg_croped.jpg);
        height:100vw; 
    }
}
@keyframes bgLeftToRight {
    100%{background-position-x: 100%;}
}

/*   --- Section PRODUCTSSS   --- */

.secProductsConte{
    padding-top: 60px;
    padding-bottom: 40px;
}
.productsItems{
   flex-wrap: wrap; justify-content: space-around; margin:30px 0 25px 0;
}
.productsItem{
    flex-direction: column; align-items: center;
    text-align: center;
    max-width: 460px;
    padding:25px 20px;  
    margin-bottom:20px;
}
.productsItem>img{
    width:180px; height: 180px;
}
.productsItem>h3{
    font-size: 1.25rem; line-height: 1.25rem; letter-spacing: .75px;
    margin: 35px 0 25px 0;
}
.prodbutton{
    display: flex; justify-content: center; align-items: center;
    font-size:1rem; line-height: 1rem;
    width:180px; padding:15px 0; background: transparent;
    border:none; background-color: #1d96d1; border-radius:8px;
    margin: 35px 0 0 0; box-shadow: 0px 4px 6px 1px rgba(0,0,0,0.25);
    transition: all 350ms ease-out;
}
.prodbutton:hover{
    background-color:#2fb3f2;
    transform: scale(1.05);
    box-shadow: 0px 6px 8px 2px rgba(0,0,0,0.25);
}
.prodbutton>span:first-of-type{
    font-size:1.25rem; line-height: 1.25rem; margin-right: 5px;
}
@media (max-width: 767px){
    .productsItem{border-bottom: 1px solid #ddd; padding-bottom:60px}
}
@media (max-width: 480px){
    .secProductsConte{
        padding-top: 45px;
        padding-bottom: 1px;
    }
    .productsItem{
        padding:30px 10px 80px 10px;
    }
    .productsItem>img{
        width:175px; height: 175px;
    }
}

/*  PRUDUCTOS  INFO   */

.productInfo{
    /*display:none;*/ width:100%;
    border: 1px solid var(--c-bluesky);
    border-left:none; border-right:none;

    margin:30px 0 10px 0; padding:30px 0; 
    text-align: left;
}

.infoTitle{
    font-size: 24px; line-height: 24px; font-weight: 600;
    color:var(--c-bluesky); margin-bottom:25px;
}
.infoSteps{
    margin:15px 0 15px 0;
}
.infoStep{
    font-size:21px; line-height: 21px;
    display:flex; align-items: center; margin:5px 0;
}
.step{
    padding: 3px 12px 3px 0; border-radius: 9999px;
    background-color:#ebebeb;
}
.hrProd{
   height:1px; border:none; border-bottom: 1px solid var(--c-bluesky); margin:25px 0 35px 0;
}
.infoItem{
    margin:20px 0; line-height: 26px;
}
.infoDot{
    min-width:8px; height: 8px; 
    margin-right: 12px; margin-top: 8px;
    border-radius:100%;
}
.infoNotif{
    align-items: flex-start;
    line-height: 22px;
    padding:7px 12px 12px 8px; margin:35px 0 25px 0;
    border-radius: 5px;
}
.infoNotif>p{
    margin-top:4px; margin-left:10px;
}
.infoNotifOk{
    border:1px solid var(--c-blue);
}
.infoNotifKo{
    border:1px solid #d4623b;
}
@media (max-width: 480px){
    .infoTitle{
        font-size: 22px;
    }
}


/*    CLIENTESS    */

.secClientes{
    padding:80px 0;
    background-size: 30px 30px;
    box-shadow: inset 0px 4px 12px 0px rgba(0,0,0,0.8);
    background-image: url(../img/pattern_clientes.svg); background-attachment: fixed;
}
.clientes{
    flex-wrap: wrap; justify-content: space-around;
    margin-top: 40px; 
}
.cliente{
    display: flex; border-radius: 20px; overflow: hidden;
    margin: 35px; 
    box-shadow: 3px 3px 8px 2px rgba(0,0,0, .5);
}
.show480{display: none;}

@media (max-width: 1120px){
    .clientes{
        margin-top: 80px; 
       display:grid; grid-template-columns: 1fr 1fr;
       column-gap: 75px; row-gap: 75px;
        padding: 0 25%;
    }
    .cliente{
        margin:0;
    }
    .cliente>img{
        width:100%; height:100%;
    }
}
@media (max-width: 860px){
    .clientes{
        column-gap: 75px; row-gap: 75px;
        padding: 0 20%;
    }
}
@media (max-width: 640px){
    .clientes{
        margin-top: 60px; 
        column-gap: 30px; row-gap: 30px; padding: 0 10px; 
    }
    .secClientes{
        padding-top:60px;
    }
    .show480{display: block;}
}


/*    CONTACTT   */

.secContact{
    padding:80px 0;
}
.contact>div:first-of-type{
    width:35%; 
}
.contact>div:last-of-type{
    width:75%; margin-top: 85px;
}
.contactLogo{
    width: 230px; height:42px;
    margin-bottom:1.75rem;
}
.contactSubt{font-size:21px; margin-bottom:20px;}
.contactInfo>hr{width:50%; margin:25px 0;}
@media (max-width: 1023px){
    .secContact{ padding:60px 0;}
    .contact{flex-direction: column;}
    .contact>div{
        width:100%;
    }
}

form{display: flex; flex-direction:column; flex-grow:1}

.inputClear{appearance: none; background: transparent; border:none;}

input[type=submit] {
    -webkit-appearance: none;
  }
.input, .textarea{
    background-color: rgba(0,0,0,.08);
    width:100%; padding: 8px 10px; margin: 10px 0;
    font-family: source; font-size: 18px; color:#fff;
    border-bottom: 1px solid #666; 
    resize: none;
}
.input:focus, .textarea:focus{ outline: none !important;}
.input:hover, .textarea:hover{ outline: none !important;}
.input:active, .textarea:focus{ outline: none !important;}

.inputBt{
    width:100%; 
    background-color: #2dabe8;
    font-family: source; font-size: 18px; color:#fff;
    border-radius: 8px; line-height: 18px;
    padding:18px 0 15px 0; margin-top:20px;
    box-shadow: 0px 4px 6px 1px rgba(0,0,0,0.35);
    cursor:pointer;
}
.inputDoble{
    display:grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
}
@media (max-width: 1023px){
    .contact>div:first-of-type, .contact>div:last-of-type{
        width:100%; margin-top: 0;
    }
    .inputDoble{
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px){
    .secContact{padding:40px 0;}
    .contactSubt{font-size:19.5px; margin-bottom: 12px;}
    .contactLogo{display:none;}
    .input, .textarea{
        background-color: rgba(0,0,0,.4);
    }
    .contactInfo>hr{margin:23px 0;}
}

/*   FOOTER   */

.footerConte{
    font-size: 14px; line-height: 18px;
    padding-top: 30px; padding-bottom: 60px;
}

/* UI TRANSITION  */

.animCommon{
    transition-property: all; transition-duration:550ms;
    transition-timing-function: ease-out; transition-delay: 70ms;
}

.fadeInit{opacity: 0;}
.fade{opacity: 1;}

.fadeLeftInit{position: relative; transform: translateX(-100px); opacity: 0;}
.fadeLeft{
    transform: translateX(0); opacity: 1;
    transition-delay: 600ms;
    transition-delay: 250ms;
}
.fadeRightInit{position: relative; transform: translateX(100px); opacity: 0;}
.fadeRight{
    transform: translateX(0); opacity: 1;
    transition-delay: 600ms;
    transition-delay: 250ms;
}
.fadeBottomInit{
    position: relative; transform: translateY(60px); opacity: 0;}
.fadeBottom{
    transform: translateY(0); opacity: 1;
    transition-duration: 800ms;
    transition-delay: 100ms;
}
.fadeBottomLInit{position: relative; transform: translateY(120px); opacity: 0;}
.fadeBottomL{
    transform: translateY(0); opacity: 1;  transition-duration: 450ms; transition-delay: 300ms;
}
.static{
    transform: translate(0,0);  opacity: 1;
    transition: none;
}