@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700;800&display=swap');

html{scroll-behavior: smooth;}

/** GLOBALES **/
.no-padding {padding: 0; }
.no-margin {margin: 0; }
a {cursor: pointer !important;}

body {font-family: "Inter Tight", sans-serif;color:#333;font-weight: normal;-webkit-text-size-adjust: 100%;}
ul, ol {margin: 0;padding: 0; }
ul li {list-style: none; }

/** COLORS **/

.dark {color: #002e33 !important;}
.white {color: #fff !important;}
.orange {color: rgba(240, 168, 49, 1) !important;}
.green {color: #2c73b9 !important;}

.bgDark {background-color: #002e33 !important;}
.bgGrisLight {background-color: #f8f8f8 !important;}
.bgWhite {background-color: #fff !important;}
.bgOrange {background-color: #f4991a !important;}
.bgGreen {background-color: #2c73b9 !important;}

.bgGradient {background: linear-gradient(90deg,rgba(5, 124, 145, 1) 0%, rgba(61, 190, 169, 1) 20%, rgba(105, 172, 97, 1) 40%, rgba(180, 184, 64, 1) 60%, rgba(243, 226, 49, 1) 80%, rgba(240, 168, 49, 1) 100%);}
.textGradient {
  background: -webkit-linear-gradient(0deg,rgba(5, 124, 145, 1) 0%, rgba(61, 190, 169, 1) 20%, rgba(105, 172, 97, 1) 40%, rgba(180, 184, 64, 1) 60%, rgba(243, 226, 49, 1) 80%, rgba(240, 168, 49, 1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

.bg-cover {width: 100%;min-height: 100%;height:100%;background-size: cover;background-position: 50%;}
.bgSeparador {background-color: #fff;margin: 0;position: relative;}
.bgSeparador:after {background: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05) 5%, rgba(0, 0, 0, 0));bottom: 0;content: '';display: block;height: 26px;left: 0;position: absolute;right: 0;}

.square {aspect-ratio: 1 / 1;max-height: 100%;}
.list-item li {text-wrap: pretty;background-image: url(../img/light_check_circle.svg);background-position: 0 2px;background-repeat: no-repeat;background-size: 20px;margin-bottom: 15px;padding-left: 30px;font-size: 20px;
  font-weight: 600;line-height: 1.25;} 
.grid-item {overflow: hidden;border:1px solid #404040;display: grid;grid-template-columns: 100px auto;align-items: center;padding: 1rem 0;}

.grid-clientes {display: grid;grid-template-columns:repeat(8, [col-start] auto [col-end]);}
.grid-clientes img {width: 100%;}

.item-hover {overflow: hidden;position: relative;width: 100%;cursor: pointer;}
.item-hover img{width: 100%;transition: all ease 0.3s;}
.item-hover-overlay {transition: all ease 0.3s;position: absolute;top:0;text-align: center;width: 100%;height: 100%;background-color:rgba(0,0,0,0.5);}
.item-hover:hover img {transform: scale(1.2);}
.item-hover:hover .item-hover-overlay {background-color:rgba(0,0,0,0.65);}

/* FONTS SIZES */

p {font-weight: 400;font-size:20px;line-height: 1.4;}

h1 {font-size: 70px;font-weight: 800;line-height: 1;}
h2 {font-size: 50px;font-weight: 800;line-height: 1;}
h3 {font-size: 36px;font-weight: 800;line-height: 1;}
h4 {;font-size: 28px;font-weight: 600;line-height: 1.4;}
h5 {font-size: 24px;font-weight: 600;line-height: 1.4;}
h6 {font-size: 18px;font-weight: 600;line-height: 1.4;}
strong {font-weight: 600 !important;}

.fontLight {font-weight: 300 !important;}
.fontBlack {font-weight: 800 !important;}
.smallfont {font-size:1em !important;}
.bigfont {font-size:1.6em !important;}
.subsection {margin:1.5rem auto 0 auto;width:3rem;height: 1px;background-color:#fff}
.letter-mas {letter-spacing: 0.15em;}
.letter-menos {letter-spacing: -0.02em;}

.sombraTexto {text-shadow:0px 5px 12px rgba(0, 0, 0, 0.85)}

.separador {background: #000; height:2px; margin-top:10px;}
.separador span {background: #fff; padding:15px; position:relative; top:-10px; left: 3em;letter-spacing: 5px;}


.overlayStrongBlue {position:absolute;background:rgba(53,78,163,.55);width:100%;height:100%;top:0;overflow: hidden;}
.overlayBlack {position:absolute;background:rgba(0,0,0,.65);width:100%;height:100%;top:0;overflow: hidden;}
.subrayado:after {content:"";background: #fff;width: 140px;height: 8px;display: block;margin-top: 6px;margin-bottom: 30px;}

#back-to-top {bottom: 5%;right: 2%;background-color: rgba(61, 190, 169, 1);width: 50px;height: 50px;border-radius:25px;z-index: 99;position: fixed;display: none;}
#back-to-top i {display: inline-block;box-sizing: border-box;cursor: pointer;line-height: 50px;color: #000;width: 50px;height: 50px;text-align: center;font-size: 18px;}
#back-to-top.active {display: block;}

/** ESTILOS SECCIONES **/
.hero {height:70vh;position: relative;overflow: hidden;width: 100%;background:url(../img/bg-hero.jpg) center center;background-size: cover;}
/* .hero::after {content: "";position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(4, 12, 36, 0.7);z-index: -99;} */
.hero h1 {font-size: 60px;}
.hero-animacion {position:absolute;right:0;bottom:0;width:100%;height:100%;overflow:hidden;}
.nube-01 {z-index:3;top:0%;position: absolute;animation-name:nube;animation-duration:35s;animation-iteration-count: infinite;animation-timing-function: linear;height: 100%;}
.nube-02 {z-index:2;top:12%;position: absolute;animation-name:nube;animation-duration:40s;animation-iteration-count: infinite;animation-timing-function: linear;animation-delay:10s;height: 75%;opacity:0;}
.nube-03 {z-index:1;top:18%;position: absolute;animation-name:nube;animation-duration:55s;animation-iteration-count: infinite;animation-timing-function: linear;animation-delay:20s;height: 40%;opacity:0;}
.nube-04 {z-index:3;top:15%;right:0%;position: absolute;animation-name:nube;animation-duration:35s;animation-iteration-count: infinite;animation-timing-function: linear;height: 150%;animation-delay:5s;opacity:0;}
@keyframes nube { 0%{left:100%;opacity:1;} 100% {left:-15%;opacity: 1;} }
.hero-cloud {background: url(../img/clouds.png) right bottom no-repeat;background-size:auto 100%;position:absolute;right:0;bottom:0;width:50%;height:100%;z-index:4;transform: translateY(0px);animation: float1 6s ease-in-out infinite;}
@keyframes float1 {
    0% {transform: translateY(0px);}
    50% {transform: translateY(-15px);}
    100% {transform: translateY(0px);}
}
video.videoHome {background-size: cover;top:50%;height: auto;min-width: 100%;min-height: 100%;position: absolute;left:50%;width: auto;z-index: -100;transform: translate(-50%,-50%);}

.box-wrapper {width: 100%;display: grid;aspect-ratio: 2 / 2;width: 100%;max-height: 432px;max-width: 432px;background: grey;}
.box-wrapper-link {display: flex;flex-direction: column;box-shadow: rgba(1, 12, 45, 0.72) 0px 10px 20px 5px;position: relative;transition: background-color 300ms ease 0s, box-shadow 300ms ease 0s;padding: 40px 32px;background: linear-gradient(0deg, rgba(4, 12, 36, 0.8) 0%, rgba(4, 12, 36, 0.8) 0.01%, rgba(4, 12, 36, 0) 100%) 0% 0% / cover, linear-gradient(120deg, rgba(176, 218, 0, 0.42) 8%, rgba(159, 200, 4, 0.38) 13%, rgba(118, 156, 17, 0.28) 25%, rgba(82, 118, 27, 0.19) 38%, rgba(52, 87, 36, 0.13) 50%, rgba(30, 63, 43, 0.07) 63%, rgba(13, 46, 48, 0.03) 75%, rgba(4, 36, 51, 0.01) 88%, rgba(1, 33, 52, 0) 100%), url(/static/img/solution-family/solution-1.jpg) center top no-repeat;overflow: hidden;}


.clientes-grid {display: flex;flex-wrap: wrap;gap: 2rem 1rem;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;max-width: 880px;margin: 0px auto;padding: 2rem 0px;}
.kofDcH {max-width: 180px;width: 100%;position: relative;aspect-ratio: 16 / 9;display: flex;align-items: center;justify-content: center;}

.icono {width: 90px;margin-right:1rem;}

/** BOTONES **/
.btn-rojo {background-color: #DA291C;transition: all .3s ease;font-weight: 600;color:#fff;}
.btn-rojo:hover {background-color: #fff;color: #DA291C;}

.btn-habbertec {background:rgba(5, 124, 145, 1);transition: all .3s ease;font-weight: 600;color:#fff;}
.btn-habbertec:hover {background-color:rgba(61, 190, 169, 1);color: #fff;}

.btn-black {background-color: #262626;transition: all .3s ease;font-weight: 600;color:#fff;}
.btn-black:hover {background-color: #DA291C;color: #fff;}

a {color: #fff;-webkit-transition-timing-function: ease;transition-timing-function: ease;-webkit-transition-duration: 200ms;transition-duration: 200ms;-webkit-transition-property: color, border-color, background-color;transition-property: color, border-color, background-color;text-decoration: none; }
a:hover, a:focus {color:rgba(61, 190, 169, 1);}

.btn-play-video{display: inline-block;transition: transform .15s ease-in-out;transform: scale(1);position: relative;width: 120px;height: 120px;border-radius: 120px;background-color: #fff;box-shadow: 0 6px 26px 0 #525966;}
.btn-play-video:after {content: "";width: 0;height: 0;border-style: solid;border-width: 25.6px 0 25.6px 43.7px;border-color: transparent transparent transparent #2c73b9;margin: auto;position: absolute;top: 0;left: 9%;bottom: 0;right: 0;display: inline-block;transition: transform .15s ease-in-out;transform: scale(1);}

button {line-height: 50px !important;height: 50px !important;padding: 0 20px !important;}

/** FORMULARIO **/
.sign-up {position:fixed;z-index:999999;top:5vh;right:2%;width:20%;border-radius:20px;box-shadow: 0px 0px 40px rgba(0,0,0,.25);}
.sign-up .signup-form .sign-up-btn {padding: 15px 0;width: 100%;font-size: 13px; }
.sign-up .signup-form .form-input-group {width: 100%;height: 55px;margin: 0 auto 10px;border:none;border-bottom: solid 1px rgba(5, 124, 145, 1);text-align: left;position: relative; }
.sign-up .signup-form .form-input-group i {color: #fff;font-size: 14px; }
.sign-up .signup-form .form-input-group i:after {content: "";height: 30px;width: 1px;border-right: solid 1px #3c3c3c;position: absolute;top: 50%;left: 30px;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%); }
.sign-up .signup-form .form-input-group i.fa-comments, .sign-up .signup-form .form-input-group i.fa-user, .sign-up .signup-form .form-input-group i.fa-building, .sign-up .signup-form .form-input-group i.fa-paperclip, .sign-up .signup-form .form-input-group i.fa-envelope, .sign-up .signup-form .form-input-group i.fa-phone, .sign-up .signup-form .form-input-group i.fa-address-card {font-size: 18px;position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);margin-left: 20px; }
.sign-up .signup-form .form-input-group input {padding-left:20px;width: 100%;height: 100%;border: none;background: transparent;color:#262626;}
.sign-up .signup-form .form-input-group input::-webkit-input-placeholder {color: #666;opacity:.5 }
.sign-up .signup-form .form-input-group input:-moz-placeholder {color: #666;opacity:.5 }
.sign-up .signup-form .form-input-group input::-moz-placeholder {color: #666;opacity:.5 }
.sign-up .signup-form .form-input-group input:-ms-input-placeholder {color: #666;opacity:.5 }
select {padding-left:20px;width: 100%;height: 100%;border: none !important;background: transparent !important;color:#3c3c3c !important;font-size: 1rem !important;}
select:focus{outline: none !important;outline-color: transparent !important; outline-style: none !;}
.g-recaptcha {display: inline-block !important;margin: 30px auto;}
.formError {position: relative;z-index: 1;padding: 20px 30px;border-radius:30px;color:#000;width:auto;text-align: center; font-size: 14px;background: #fff;top:22px;}
.formError::after {content: '';border-bottom: 15px solid #fff;border-right: 15px solid transparent;border-left: 15px solid transparent;position: absolute;left: 45%;top: -14px;}
.alert {position: fixed;padding: 4rem;margin-bottom: 1rem;border: 1px solid transparent;border-radius: 0.25rem;width: 50%;left: 25%;top: 45%;text-align: center !important;display:none;}
.close:focus {outline-color: transparent; outline-style: none;}    
.modal.show {display:flex!important;flex-direction:column;justify-content:center;align-content:center;align-items: flex-start;}

/** MODALS **/
.modal {z-index: 9999999999999999999999 !important;background:rgba(26,58,104,.75);}
.modal-dialog {width:80%;max-width: 80%;} 
.modal .logo {width: 200px;}

/** FOOTER **/
footer {position: relative;padding: 70px 0px 40px 0px;}
header .logo, footer .logo {width: 240px;}
.logo-ibm {height: 60px;width: auto;}
.linea-separador {margin: 50px 15px 20px 15px;width: 100%;height: 1px;background: rgba(255, 255, 255, 0.2);}
footer .social i {padding:10px;font-size:24px !important;}

/** HEADER **/
header {height: 80px;width:100%;position:fixed;top: 0px;z-index: 100;border-bottom: 1px solid #333;backdrop-filter: blur(12px);background-color:rgba(255,255,255,1);transition: background-color 250ms ease 0s;display: flex;align-items: center;padding: 0 70px;justify-content: space-between;}
header .logo {width: 189px;}