/* CSS Document */

:root{
    --c-gc: #ccc; --c-g9: #999; --c-g7: #777; --c-g6: #666; --c-g3: #333; --c-g2: #222;
    --green:#79CC4D;
}
@media (max-width: 540px){
    :root{}
}

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

body{margin: 0; color:#333; background-color: white; font-family: roboto; overflow-x: hidden; padding-bottom: 100px;}
a{text-decoration: none;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_input{-webkit-tap-highlight-color: transparent;}
.no_sel:focus,.no_sel_input:focus  { outline: none !important;}
.no_sel:hover,.no_sel_input:hover { outline: none !important; background-color: transparent;}

.input {
    appearance: none;
}
img{display: block;}

@media (max-width: 540px){
    .hideMob{display:none!important;}
    body{padding-bottom: 80px;}
}


/*   FONTS   */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');

/*   Roboto  */

@font-face {
    font-family: 'roboto';
    src:  url('../fonts/roboto-light.woff2') format('woff2'),
          url('../fonts/roboto-light.woff') format('woff');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'roboto';
    src:  url('../fonts/roboto-regular.woff2') format('woff2'),
          url('../fonts/roboto-regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'roboto';
    src:  url('../fonts/roboto-medium.woff2') format('woff2'),
          url('../fonts/roboto-medium.woff') format('woff');
    font-weight: 500; font-style: normal; font-display: swap;
}

/*   Raleway  */

@font-face {
    font-family: 'raleway';
    src:  url('../fonts/raleway-regular.woff2') format('woff2'),
          url('../fonts/raleway-regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'raleway';
    src:  url('../fonts/raleway-medium.woff2') format('woff2'),
          url('../fonts/raleway-medium.woff') format('woff');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'raleway';
    src:  url('../fonts/raleway-bold.woff2') format('woff2'),
          url('../fonts/raleway-bold.woff') format('woff');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'raleway';
    src:  url('../fonts/raleway-extrabold.woff2') format('woff2'),
          url('../fonts/raleway-extrabold.woff') format('woff');
    font-weight: 800; font-style: normal; font-display: swap;
}

.r_r_15{font-family: raleway; font-size: 15px; line-height: 24px; letter-spacing: .9px;font-weight: 400;}

.r_r_26{font-family: raleway; font-size: 26px; line-height: 38px; letter-spacing: .8px;font-weight: 400;}

.r_m_24{font-family: raleway; font-size: 24px; line-height: 36px; letter-spacing: 1.3px;font-weight: 500;}

.r_m_26{font-family: raleway; font-size: 26px; line-height: 36px; letter-spacing: 1.3px;font-weight: 500;}

.r_b_26{font-family: raleway; font-size: 26px; line-height: 38px; letter-spacing: 1px; font-weight: 700;}

.parag{font-family: raleway; font-size: 18px; line-height: 40px; letter-spacing: 1px; font-weight: 400; direction:ltr!important}

.tUpper{text-transform: uppercase;}

@media (max-width: 540px){
    .r_r_26{font-size: 24.5px; line-height: 34px;}
    .parag{font-size: 17px; line-height: 34px; letter-spacing: .7px; }
}

.loader{
    background-image: url(../img/loader2.svg); background-repeat: no-repeat;
    background-position: center center;
}


/*    HEADER   */

.secCommon{
    opacity:0;
    width:100%; max-width:1230px; margin:0 auto; padding-left: 20px; padding-right: 20px;
    transition:opacity 300ms linear 1000ms; 
}

.hrCom{border:none; border-bottom: 3px solid var(--green); width:115px; margin: 24px auto 0 0;}

header{
    opacity:0; transform: translateY(-100px);
    position:fixed; top:0; width:100vw;  padding:14px 0 10px 0; background-color: white; z-index:10;
}
.headerAnim{
    animation: move-in 650ms ease-out 100ms; animation-fill-mode: forwards;
}
@keyframes move-in{
    0%{opacity:0; transform: translateY(-100px);}
    100%{opacity:1; transform: translateY(0);}
}

header>div{
    display: flex; align-items: center; justify-content: space-between; max-width: 1440px !important;;
}
@media (max-width: 720px){
    .secCommon{padding-right: 20px; padding-left: 20px;}
    header{padding:6px 0;}
    header>div>img{
        object-fit: cover; object-position: left; width: 50px; margin-left: -7px;
    }
}
@media (max-width: 540px){
    .secCommon{padding-right: 16px; padding-left: 16px;}
}
@media (max-width: 340px){
    header{padding:16px 0;}
    header>div{justify-content: center;}
    header>div>img{display: none;}
}

/*    NAV   */

nav, nav>a{
    display: flex; align-items: center; color:#666
}
nav>div{
    font-family: raleway; font-size: 12.5px; font-weight: 400; letter-spacing: 1.4px; padding: 0 15px; text-transform: uppercase; cursor:pointer;
}
nav>a{
    font-family: roboto; font-size: 12px; font-weight: 400; letter-spacing: 1.3px; color:#aaa;
    border: 1px solid #aaa; border-radius: 5px; padding: 4px 4px 4px 4.5px; margin-left: 10px;
    margin-top: -2px; cursor:pointer;
}
nav>a>img{margin-right: 4px;}
nav>a>p{margin-top: -1px;}

@media (max-width: 720px){
    nav>div{ font-size: 11px; letter-spacing: .75px; padding: 0 8px;}
    nav>a{font-size: 11.5px; letter-spacing: .8px; margin-left: 8px;}
    nav>a>p{margin-top: 0;}
}
@media (max-width: 540px){
    nav>div{ font-size: 13px;}
}


/*  HERO  */

main{
    width: 100%; background-color: var(--c-g2); 
    margin-top: 82px; overflow: hidden;
}
.heroConte{
    opacity:0;
    display: grid; grid-template-columns: auto 530px; max-width: 1400px; height: 530px; margin: 0 auto;
    transition:opacity 1000ms linear 600ms; 
}
.heroConte h1{
    font-family: raleway; font-size: 30px; line-height: 38px; letter-spacing: .75px; 
    font-weight: 800; text-transform: uppercase; color:#eee; margin-bottom: 8px;
}
.heroConte h2{
    font-family: raleway; font-size: 23px; line-height: 33px; letter-spacing: .6px; 
    font-weight: 500; color:#ccc
}
.heroLeft{
    display: flex; justify-content: center; align-items: center; max-width: 650px; padding-left: 24px;
}
.hL_anim h1{
    opacity: 0; transform:translateX(150px);
    animation:title_in 1200ms ease-out 1500ms;
    animation-fill-mode: forwards;
}
.hL_anim h2{
    opacity: 0; transform:translateX(150px);
    animation:title_in 1200ms ease-out 2300ms;
    animation-fill-mode: forwards;
}
.hL_anim hr{
    opacity: 0; 
    animation:fade_in 700ms linear 3200ms;
    animation-fill-mode: forwards;
}
@keyframes title_in{
    0%{opacity: 0; transform:translateX(100px)}
    100%{opacity: 1; transform:translateX(0)}
}
@keyframes fade_in{
    100%{opacity: 1;}
}

.heroMap{
    width:530px; height: 530px;
}
.mapConte{width:100%; height: 100%}

@media (max-width: 1024px){
    main{margin-top: 70px; padding-bottom: 48px;}
    .heroConte{display: flex; flex-direction: column-reverse; height: auto;}
    .heroLeft{max-width: 720px; padding: 0 24px; margin: 56px auto;}
    .heroMap{margin:0 auto}
}
@media (max-width: 720px){
    main{margin-top: 70px; padding-bottom: 56px;}
}
@media (max-width: 540px){
    .heroLeft{margin: 32px auto;}
    .heroMap{width:100vw; height: 100vw};
}
@media (max-width: 340px){
    main{margin-top: 55px;}
}

/*  SERVICIOSS   */

.servicios{
    padding:80px 0 40px 0;
}
.servicio{
    display: grid; grid-template-columns: auto 60%; 
    align-items: center; 
    color:var(--c-g6); padding:80px 0;
}
.servImg{
    padding-right: 40px;
}
.servImg>div{
    position: relative; width:280px; height: 280px; margin: 0 auto;
}
.servicio img{
    position: absolute; top:0; left:0;
   
}
.AnimOscila{
    animation:os_y 1200ms linear infinite;
}
.AnimOscila2{
    animation:os_y 1300ms linear infinite reverse;
}
@keyframes os_y{
    0%{transform:translateY(4px)}
    25%{transform:translateY(2px)}
    50%{transform:translateY(4px)}
    75%{transform:translateY(8px)}
    100%{transform:translateY(4px)}
}
.servicio hr{
    width:145px; margin: 32px 0;
}
.servReverse{
    direction: rtl; text-align: left;
}
.servReverse hr{
    margin: 32px auto 32px 0;
}
.servReverse .servImg{
    padding-right: 0px; padding-left: 40px;
}

@media (max-width: 1024px){
    .servicios{padding:40px 0;}
    .servicio{padding:56px 0; display: flex; flex-direction: column; text-align: center;}
    .servImg{padding-right: 0px; margin-bottom: 40px;}
    .servicio hr{
        width:145px; margin: 48px auto;
    }
    .servReverse .servImg{
        padding-left: 0;
    }
}
@media (max-width: 540px){
    .servicio{padding:40px 0;}
    .servImg>div, .servicio img{width:65vw; height: 65vw;}
    .servicio hr{
        margin: 40px auto;
    }
}

/*  TITULOS  */

.secTitle{
    opacity:1;
    display: flex; align-items: center;
    text-transform: uppercase; color:#777;
    margin-bottom:110px;
}
.secTitle>hr{
    height:1px; flex:1; margin:0;
    border:0; border-bottom: 1px solid #DDD; 
}
.secTitle>p{
    margin: 0 24px;
}
.secSubTitle{
    text-transform:unset; justify-content: center; flex-direction: column;
}
.secSubTitle>p{
    padding:24px
}
.secSubTitle>hr{
    flex:unset; text-transform:unset; width:48px; border-bottom: 3px solid #DDD; 
}
@media (max-width: 540px){
    .secTitle{margin-bottom:56px}
    .secSubTitle > hr{
        /*display:none;*/
    }
}


/*   PRODUCTOS  */

.product{
    width:100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 10px; overflow: hidden; border: 1px solid #DDD; 
    margin-bottom: 32px;
}
.prodImg{
    width:100%; height: 100%;
    object-fit: cover; object-position: center center;
}
.prodDetail{display: flex; flex-direction: column; align-items: center; justify-content: center; color: #666; text-align: center;}
.prodIco{border: 1px solid #ccc; border-radius:999px}
.prodDetail h3{margin:42px 0 36px 0}
.prodDetail p{color: #777; max-width: 70%;}
.prodDetail hr{width:99px; margin: 40px 0 0 0;}

@media (max-width: 1024px){
    .product{
        display: flex; flex-direction: column; max-width: 540px; margin: 0 auto 32px auto ;
    }
    .prodDetail{
        padding: 40px 0;
    }
    .prodDetail h3{margin:36px 0 24px 0}
    .prodDetail p{max-width: 80%;}
}

/* FLEXIBLES  */

.titFlex{
    margin-top: 100px;
}
.flexibles{
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px;
    
}
.flexible{
    position:relative;
    border-radius: 10px; overflow: hidden; border: 1px solid #DDD; 
    padding-bottom: 96px;
}
.flexTop{
    width: 100%; padding:32px; background-color: #95D573; margin-bottom: 12px;
}
.flexTop>img{
 margin: 0 auto; 
}
.detFlex{height: 100%; justify-content: flex-start;}
.detFlex p{
    display: flex; align-items: center;
    line-height: normal; max-width: 85%; height: 100%;
} 
.flexHr{
    position: absolute; bottom:48px; width:100%;
}
.flexible hr{
    border-color: #F5DED9;  margin: 0 auto;
}
@media (max-width: 1024px){
    .titFlex{
        margin-top: 80px;
    }
    .flexibles{
        grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: 540px; margin-left: auto; margin-right: auto;
    }
    .detFlex{ padding:0;}
    .detFlex p{max-width: 95%;}
}

/*   BRANDS  */

.brands{
    margin: 140px 0 180px 0;
}
.brandsLogos{
    display: flex; align-items: center; justify-content: space-around;
    margin-bottom: 48px;
}
.brands hr{
    margin-left: auto; margin-right: auto; width:90px
}
@media (max-width: 1024px){
    .brandsLogos{
        flex-direction: column-reverse;
    }
    .brandsLogos img{
        margin: 32px 0;
    }
}
@media (max-width: 540px){
    .brands{
        margin: 100px 0 120px 0;
    }
    .brandsLogos{
        flex-direction: column-reverse;
    }
    .brandsLogos img{
        margin: 0px 0; transform: scale(.8);
    }
}

/*   CONTACT  */

.contact{
    margin-bottom: 72px;
}
.contactInfo{
    padding: 56px; color:#666; 
}
.bRight{
    border-right: 1px solid #ddd;
}
.contactInfo h3{
    margin-bottom: 40px;
}
.contactInfo>p{
    margin: 40px 0 24px 0;
}
.contactInfo hr{
    width:147px;
}
.contactData{
    font-family: roboto;
    display: grid; grid-template-columns: max-content max-content; column-gap: 20px; color:#333; margin-bottom: 40px;
}
.contactData>span{
    color:#4FA421
}
.contactlocation{
    display: grid; grid-template-columns: min-content auto; column-gap: 8px;
}
.contactlocation>img{
    margin-top:-2px
}
.contactlocation li{
    color:#444; font-size: 13px; margin-top: 4px; font-family: roboto;
}
.contactInput{
    width:100%; border: none; border-bottom: 1px solid #ccc;
    font-family: roboto; font-size:18px; line-height: 24px; letter-spacing: .54px;
    color: #333; padding:20px 8px; margin-bottom: 16px; resize: none;
}
.contactInput::placeholder{
    color: #bbb
}
.contactInput:focus, .contactInput:hover{
    border-color:#6ed835
}
.contactInput:hover::placeholder{
    color: #999; 
}
.contactBt{
    width:100%; appearance: none; color:white; background-color: #222; border:none; font-weight: 500; border-radius: 12px; padding: 14px 0 10px 0;
}

.contactDevs{
    display: flex; height: 100%; flex-direction: column;
    text-align: center; justify-content: center; color: white;
    background-color: #4FA421; padding:24px; border-radius: 16px;
}
/*
.contactDevs span{
    color:#4FA421
}
*/
.contactDevs p{
    font-weight: 500;
}

@media (max-width: 1024px){
    .bRight{
        border-right: none;
    }
}
@media (max-width: 540px){
    .contact{
        border:none;  padding-bottom: 56px;
    }
    form{
        margin-top:24px
    }
    .contactInfo{
        padding: 8px; 
    }
    .contactInput{
     font-size:17px; 
      padding:16px 4px; margin-bottom: 12px;
    }
    .contactDevs{
        margin:40px 0; padding:56px 24px;
    }
}


/*   FOOTER  */

footer{
    position: fixed; bottom:0; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    background-color: white; padding:8px 48px; border-top:1px solid #ddd;
}
footer>div{display: flex;}

.footIco{
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; background-color: #222; border-radius: 999px;
    cursor:pointer; margin:0 4px;
}
.footIco img{ width: 24px; height:24px;}

.icoWhat{background-color:#25D366}
.icoIn{background-color:#0a66c2}

@media (max-width: 540px){
    footer{justify-content: center; padding:8px 0;} 
    footer p{ display:none}
    .footIco{ width: 40px; height: 40px;}
    .footIco img{ width: 26px; height:26px;}
}

/*  EXTRASS  */

.anchor{position: relative; top:-100px}

.curPoint{cursor: pointer;}

.faded{opacity: .1;}
.hide{opacity: 0;}
.show{opacity: 1;}

.show_mob{
	display: none;
}
@media(max-width: 540px){
    .show_desk{
        display: none;
    }
}

/* POPUP */

#pop-up{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #00000067;
    z-index: 9999;
}
#pop-up .popup-content{
    width: 65%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#pop-up img{
    width: 100%;
    max-width: 100%;
}

#pop-up button{
    position: absolute;
    top: -1.125rem;
    right: -1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
    border: 2px solid #ccc;
    background-color: #000;
    color: #fff;
    border-radius: 50rem;
    padding: 1.25rem 1.25rem 1.125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 .25rem 1rem #00000024;
}