@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,strong,b,u,i,center,ol,ul,li,fieldset,form,label,table,tbody,tfoot,thead,tr,th,td,header,menu,.menu,section,article,video{margin:0;padding:0;border:0;outline:0}
input,button,textarea,select{outline:0}
html{background:#FFF;overflow-x:hidden}
body{float:left;width:100%;font-size:26px;font-family:"Poppins","sans-serif";font-weight:400;color:#7979A5;margin:0}
img{max-width:100%;height:auto}
ul,ol{list-style:none}
a{cursor:pointer;transition:all ease-in-out .5s}
a:hover{transition:all ease-in-out .5s}
p{float:left;width:100%;line-height:36px}
.infoContent{float:left;width:calc(100% - 40px);max-width:1560px;padding:80px 20px;margin-left:50%;transform:translateX(-50%)}
.img{line-height:0}
.button{text-align:center}
.button a{display:inline-block;height:50px;line-height:50px;padding:0 20px;background:#3363f4;background:linear-gradient(to right,#3363f4 0%,#7005bd 100%);border-radius:50px;text-decoration:none;font-weight:600;color:#FFF;letter-spacing:-1px;font-size:32px}
.button a:hover{filter:sepia(30%) brightness(90%) saturate(250%)}
header{float:left;width:100%;transition:all ease-out .5s;background:#4b33d0;background:linear-gradient(to right, #4b33d0 0%,#623aa2 100%);position:sticky;z-index:+9}
header .infoContent{padding:5px 20px 0 20px}
header .grid{float:left;width:100%;display:grid;grid-template-columns:200px calc(100% - 220px);grid-template-rows:1fr;gap:20px;grid-auto-flow:row;align-items:center}
header .logoWO .logoS{max-width:0 !important;overflow:hidden}
header .logoWO a{float:left}
header .linea a{float:right;height:60px;line-height:60px;padding:0 20px;background:#00BBF9;border-radius:60px;text-decoration:none;font-weight:500;color:#FFF;letter-spacing:-1px;font-size:36px;box-shadow:0 0px 40px 5px rgba(48,29,84,0.8)}
header .linea a:hover{filter:brightness(110%)}
header .linea a span{float:left;margin-right:10px;max-height:100%}
header .linea a span img{line-height:0}
header .linea a.mobile{display:none}
header.active{position:fixed;height:70px;z-index:+9}
header.active .infoContent{transition:all ease-in-out 0.5s}
header.active .logoWO .logoS{float:left;max-width:100px !important;transition:all ease-in-out 0.5s}
header.active .logoWO .logoL{float:left;max-width:0;max-height:0;overflow:hidden;transition:all ease-in-out 0.5s}
header.active .linea a{height:36px;line-height:36px;border-radius:36px;font-size:26px;transition:all ease-in-out 0.5s}
header.active .linea a span img{padding-top:4px}
section{float:left;width:100%}
section h1{float:left;width:100%;margin-left:50%;transform:translateX(-50%);text-align:center;font-weight:500;font-size:44px;color:#704EC9;line-height:40px;margin-bottom:15px}
section h1+p{max-width:1200px;text-align:center;margin-left:50%;transform:translateX(-50%);margin-bottom:40px}
#intro{background:#4b33d0;background:linear-gradient(to right, #4b33d0 0%,#623aa2 100%);box-shadow:0 0px 30px 5px rgba(83,71,105,0.5)}
#intro .text {float:left;width:100%;max-width:1200px;margin-left:50%;transform:translateX(-50%);padding-bottom:40px}
#intro .text h1{float:left;width:100%;text-align:center;font-size:50px;color:#FFFFFF;line-height:50px;letter-spacing:-1px;font-weight:300}
#intro .text h2{float:left;width:100%;text-align:center;font-size:50px;color:#33F0FF;line-height:50px;letter-spacing:-1px;font-weight:600;margin-bottom:30px}
#intro .text .button{text-align:left}
#intro .video{float:left;width:100%;text-align:center}
#intro .video .content{float:left;width:710px;margin-left:50%;padding:20px;transform:translateX(-50%);position:relative;line-height:0;background:rgba(255,255,255,0.4);border-radius:8px}
#intro .video:before{content:"";background:url("../images/shadowVideo.png") no-repeat;background-size:contain;position:absolute;left:30px;bottom:-39px;width:calc(100% - 60px);height:39px;overflow:hidden}
#intro .video iframe{float:left;width:100%;height:373px}
#soluciones .contTabs{float:left;width:100%;margin-bottom:30px}
#soluciones .contTabs main{float:left;width:100%;margin-left:50%;transform:translateX(-50%);text-align:center}
#soluciones .contTabs main label{position:relative;display:inline-block;width:calc(25% - 20px);border-bottom:4px solid #C2C2D8;margin:0 -4px;padding:0 10px 10px 10px;text-align:center;line-height:24px;cursor:pointer}
#soluciones .contTabs main input{display:none}
#soluciones .contTabs main input:checked + label{border-bottom:4px solid #704EC9;color:#444459}
#soluciones .contTabs main #content1,#soluciones .contTabs main #content2,#soluciones .contTabs main #content3,#soluciones .contTabs main #content4{display:none;float:left;width:calc(100% - 80px);padding:40px;background:#F3F5FE;overflow:auto;animation:fadeEffect 2s;margin-top:2px}
@keyframes fadeEffect{from{opacity:0}to{opacity:1}}
#soluciones .contTabs main #tab1:checked ~ #content1,
#soluciones .contTabs main #tab2:checked ~ #content2,
#soluciones .contTabs main #tab3:checked ~ #content3,
#soluciones .contTabs main #tab4:checked ~ #content4{display:block}
#soluciones .grid{float:left;width:100%;display:grid;grid-template-columns:calc(70% - 40px) calc(30% - 40px);grid-template-rows:1fr;gap:80px;grid-auto-flow:row;align-items:center}
#soluciones .txt p{text-align:left;margin-bottom:25px}
#soluciones .txt p.destacado{color:#434AE5;margin-bottom:0}
#soluciones .contTabs + p{text-align:center}
#integrado{background:#F8F8FA}
#integrado .grid{float:left;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;grid-auto-flow:row;margin-bottom:40px}
#integrado li p{text-align:center}
#integrado li .img{margin-bottom:10px}
#app h1{max-width:1080px}
#app .grid{float:left;width:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;gap:80px;grid-auto-flow:row;align-items:center;justify-items:center}
#app .grid ul{float:left;width:100%}
#app .grid li{float:left;width:calc(100% - 50px);padding-left:50px;background:url("../images/bullet.png") no-repeat;background-position:0 0;margin-bottom:10px}
#app .grid li:last-of-type{margin-bottom:0}
#app .grid2{float:left;width:100%;max-width:720px;margin-left:50%;transform:translateX(-50%);display:grid;grid-template-columns:300px 300px;grid-template-rows:1fr;gap:120px;grid-auto-flow:row;align-items:center;justify-items:center;margin-top:40px}
#app .grid2 li{border:1px solid #CAD2E3;padding:20px 20px 5px 20px}
#app .grid2 li a{float:left;width:100%}
#app .grid2 li:hover{background:#F2F4F9;transition:all ease-in-out .5s}
#plataformas{background:#EDEFFC}
#plataformas h1{margin-bottom:35px}
#plataformas .grid{float:left;width:80%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;gap:40px;grid-auto-flow:row;align-items:center;justify-items:center;margin-left:50%;transform:translateX(-50%);margin-bottom:40px}
#plataformas p{text-align:center;margin-bottom:40px}
#plataformas p:last-of-type{margin-bottom:0}
.slider{float:left;width:100%}
.slider .grid{float:left;width:100%;position:relative;display:grid;grid-template-columns:calc(100% - 344px) 300px;grid-auto-flow:row;gap:40px;align-items:center;justify-items:center;border:2px solid #EDEFFC;padding:40px 0 66px 40px}
.slider .grid:before{content:"";position:absolute;top:0;right:0;width:300px;height:100%;background:#EDEFFC;z-index:-1}
.slider .grid img{max-width:260px;margin-top:40px}
.slick-track{display:flex;flex-wrap:wrap}
.slick-slide{display:none;float:left;min-height:1px}
[dir='rtl'] .slick-slide{float:right}
.slick-slide p:first-of-type{margin-bottom:12px;font-weight:500}
.slick-slide p:last-of-type{margin-bottom:44px}
.slick-slider{position:relative;display:block;box-sizing:border-box;user-select:none}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list{transform:translate3d(0,0,0)}
.slick-loading{visibility:hidden}
.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-arrow{width:60px;height:60px;background: url("../images/arrow.jpg") no-repeat;color:#F3F0F7;font-size:0px;text-indent:-120px;border:0;position:absolute;left:40px;bottom:40px;cursor:pointer;z-index:+1}
.slick-arrow:hover{filter:brightness(0.96)}
.slick-next{left:140px;transform:rotate(180deg);transition:all ease-in-out .5s}
#salto{background:linear-gradient(to bottom,#f8f8fa 0%,#ffffff 100%)}
#salto h1{max-width:1180px}
#salto p{text-align:center}
#salto p:first-of-type{margin-bottom:40px}
footer{float:left;width:100%;background:#CDD2EB}
footer .infoContent{padding:40px 20px}
footer .grid{display:grid;grid-template-columns:25% 75%;grid-template-rows:1fr;gap:0;grid-auto-flow:row;align-items:center;width:1200px;margin-left:50%;transform:translateX(-50%)}
footer p{float:right;text-align:right;font-size:18px;color:#FFF;margin-bottom:0}
footer a{text-decoration:none;color:#5F5BFA}
footer a:hover{color:#322fa9;transition:all ease-in-out .5s}
footer ul{float:right;width:100%;margin-top:5px}
footer li{float:right;width:36px;height:36px;margin-left:20px}
footer li a{float:left;width:36px;height:36px;line-height:36px;text-align:center;border:1px solid #9EA8D8;border-radius:4px;background:#CDD2EB}
footer li a:hover{background:#c3caed;transition:all ease-in-out .5s}
#lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(39 37 63 / 85%);z-index:99}
.modal{position:fixed;top:50%;max-width:1120px;width:calc(100% - 80px);max-height:calc(100% - 100px);background:#FFF;margin-left:50%;transform:translateX(-50%) translateY(-50%);padding:20px;box-shadow:0 20px 20px 0 rgb(4 10 20 / 65%);overflow-x:hidden;overflow-y:auto}
.modal h1{float:left;width:100%;font-size:28px;font-weight:500;color:#5F59F8;text-align:center;letter-spacing:-1.5px;line-height:26px}
.modal p{text-align:center;margin-bottom:20px;font-size:22px;line-height:20px}
.modal form{float:left;width:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:row;gap:20px 20px}
.modal form div:first-of-type,.modal form div:last-of-type{grid-column:1 / -1}
.modal label{float:left;width:100%;font-size:22px}
.modal label span{float:left;margin-right:6px}
.modal input[type=text]{float:left;width:calc(100% - 22px);height:32px;padding:0 10px;margin-top:-5px;background:#F7F7FB;border:1px solid #B5BADD;font-family:"Poppins","sans-serif";font-size:18px;font-weight:400;color:#9f9fc8}
.modal select{float:left;width:100%;height:34px;padding:0 10px;margin-top:-5px;background:url(../images/form/arrowSelect.png) no-repeat #F7F7FB;border:1px solid #B5BADD;appearance:none;background-position:98% 50%;font-family:"Poppins","sans-serif";font-size:18px;font-weight:400;color:#9f9fc8}
.modal input[type=button]{width:auto;height:50px;line-height:50px;padding:0 20px;border:0;border-radius:60px;font-size:26px;font-weight:600;letter-spacing:-1px;color:#FFF;background:#3363f4;background:linear-gradient(to right, #3363f4 0%,#7005bd 100%);cursor:pointer}
.modal input[type=button]:hover{background:#123cb9;background:linear-gradient(to right,#123cb9 0%,#51028b 100%);transition:all ease-in-out .5s}
.modal .campo-ok{border-color:#06cfa4 !important}
.modal .campo-error{border-color:#a12626 !important}
.modal::-webkit-scrollbar{width:10px}
.modal::-webkit-scrollbar-track{background:#CECDD8}
.modal::-webkit-scrollbar-thumb{background:#9BA2C1}
#close{position:absolute;width:22px;height:26px;top:calc(50% - 275px);right:calc(50% - 580px);color:#FFFFFF;text-decoration:none;font-size:35px;font-weight:300;line-height:26px;transform:scaleX(1.2)}
#close:hover{color:#00BBF9}
#whatsapp{position:fixed;bottom:30px;right:10px;height:60px;width:60px;border-radius:50%;background:#2ecc71;outline:none;cursor:pointer;transition:all ease-in-out 0.5s}
#whatsapp:hover{background:#27AD61}
#whatsapp a{float:left;width:100%;height:100%;line-height:60px !important;text-align:center}
#whatsapp img{margin-top:50%;transform:translateY(-50%)}
.gracias .linea a{display:none}
.gracias #intro{background:none;box-shadow:none}
.gracias #intro .infoContent{max-width:1560px;padding:40px 20px 0 20px}
.gracias #intro h1{font-size:50px;line-height:50px;margin-bottom:20px}
.gracias #intro h2{font-size:40px;line-height:40px;margin-bottom:20px;color:#00BBF9;font-weight:400;text-align:center}
.gracias .table{display:table;float:left;with:100%}
.gracias .table div{display:table-cell;vertical-align:middle}
.gracias .table div:first-of-type{width:calc(50% - 100px);padding-right:100px;text-align:center}
.gracias .table div:last-of-type{width:50%}
.gracias .table div:last-of-type p{text-align:left;margin-bottom:20px}
.gracias .table div:last-of-type p:last-of-type{margin-bottom:0}
.gracias footer{position:absolute;bottom:0;margin-top:0}
.ml4{position:relative}
.ml4 .letters{position:absolute;margin:auto;left:0;top:0;right:0;opacity:0}
/*DIALOG FORM*/
.ui-dialog .mensaje-error-boton a{max-width:inherit;transform:none;float:none;font-weight:inherit}
/*RESPONSIVE*/
@media (max-width:1680px){
body{font-size:24px}
p{line-height:34px}
.button a{height:44px;line-height:44px;border-radius:44px;font-size:26px}
header .grid{grid-template-columns:170px calc(100% - 190px)}
header .linea a{height:44px;line-height:44px;border-radius:44px;font-size:24px}
header .linea a span img{padding-top:7px}
header.active .linea a{height:34px;line-height:34px;border-radius:34px;font-size:24px}
header.active .linea a span img{max-width:24px}
section h1{font-size:40px;line-height:34px;letter-spacing:-0.5px}}
@media (max-width:1600px){
.gracias footer{ position:relative;margin-top:60px}}
@media (max-width:1440px){
.button a{height:40px;line-height:40px;border-radius:40px;font-size:24px}
#intro .text h1,#intro .text h2{font-size:48px;line-height:48px}
section h1{font-size:38px}}
@media (max-width:1366px){
body{font-size:22px}
p{line-height:32px}
.button a{height:36px;line-height:36px;border-radius:36px;font-size:22px;padding:0 15px}
section h1{font-size:36px}
#intro .infoContent {padding:40px 20px 80px 20px}
#intro .video .content{width:650px}
#intro .video iframe{height:341px}
#app .grid{margin-bottom:40px}
#app .grid img{max-width:400px}
#app .grid2{width:auto;grid-template-columns:182px 182px;gap:80px}
#app .grid2 li{max-height:120px}}
@media (max-width:1260px){
footer .grid,#plataformas .grid{width:100%}
.gracias .table div:first-of-type{width:calc(50% - 40px);padding-right:40px}}
@media (max-width:1220px){
.modal{top:40px;transform:translateX(-50%) translateY(0%)}
#close{top:10px;right:20px}
.modal h1{font-size:26px;line-height:24px}
.modal p{margin-bottom:10px;font-size:20px;line-height:18px}
.modal form{gap:15px 20px}
.modal label{margin-bottom:0;font-size:20px}
.modal label span{transform:scale(0.9)}
.modal input[type=text]{height:26px}
.modal select{height:28px}
.modal input[type=button]{height:44px;line-height:44px;border-radius:44px;font-size:22px}}
@media (max-width:1160px){
#intro .text h1,#intro .text h2{font-size:44px;line-height:44px}}
@media (max-width:1080px){
.gracias .table div{float:left;width:100% !important;padding-right:0 !important}
.gracias .table div:first-of-type{margin-bottom:20px}
.gracias .table div img{max-width:320px}}
@media (max-width:1060px){
body{font-size:20px}
p{line-height:28px}}
@media (max-width:1024px){
header .grid{grid-template-columns:160px calc(100% - 180px)}
header .linea a{height:40px;line-height:40px;border-radius:40px;font-size:22px}
header .linea a span img{padding-top:5px}
header .linea a.web{display:none}
header .linea a.mobile{display:inline-block}
header.active .linea a{height:30px;line-height:30px;border-radius:30px;font-size:20px;padding:0 15px}
header.active .linea a span img{max-width: 20px;padding-top:5px}
#intro .text h1,#intro .text h {font-size:40px;line-height:40px}
#intro .video .content{width:600px}
#intro .video iframe{height:338px}
.gracias #intro h1{font-size:42px;line-height:42px;margin-bottom:10px}
.gracias #intro h2{font-size:32px;line-height:32px;margin-bottom:10px}
.gracias .table div:first-of-type{margin-bottom:10px}
.gracias #intro p{margin-bottom:20px}
.gracias #intro p:last-of-type{margin-bottom:0}
.slider .grid{padding: 20px 0 66px 20px}
.slick-arrow{width:40px;height:40px;background:url(../images/arrow.jpg) no-repeat;background-size:contain;bottom:40px}
.slick-slide p:last-of-type{margin-bottom:15px}}
@media (max-width:980px){
#soluciones .infoContent{padding:80px 20px}
#soluciones .contTabs main label{float:left;width:calc(100% - 20px);padding:5px 10px;margin:0;text-align:left}
#soluciones .contTabs main label br{content:" ";margin-right:6px}
#soluciones .contTabs main label:last-of-type{margin-bottom:0}
#soluciones .contTabs main #content1,#soluciones .contTabs main #content2,#soluciones .contTabs main #content3,#soluciones .contTabs main #content4{width:calc(100% - 40px);padding:20px;margin-top:0;border-bottom:4px solid #C2C2D8}
#soluciones .contTabs main label:before{content:url(../images/arrowAccordion.png);position:absolute;top:14px;right:10px;width:12px;height:9px;line-height:0;filter:grayscale(1);opacity:0.7}
#soluciones .contTabs main input:checked + label:before{content:url(../images/arrowAccordion.png);right:10px;transform:rotate(-180deg);filter:brightness(80%) contrast(240%)}
#integrado .grid{grid-template-columns:repeat(3,1fr)}
#app .grid{grid-template-columns:350px calc(100% - 430px)}
#app .grid img{max-width:350px}}
@media (max-width:900px){
.slider .grid{grid-template-columns:repeat(1,1fr);gap:0;position:relative;padding:0 0 50px 0}
.slider .grid div:first-of-type{padding:160px 20px 0 20px}
.slider .grid div:last-of-type{position:absolute;top:0;left:0;width:calc(100% - 40px);height:100px;text-align:center;padding:20px;background:#EDEFFC;display:flex;align-items:center;justify-content:center}
.slider .grid div:last-of-type img{margin-top:0}
.slider .grid:before{display:none}
.slick-slide p{text-align:center}
.slick-slide p:last-of-type{margin-bottom:30px}
.slick-arrow{left:calc(50% - 50px)}
.slick-next{left:inherit;right:calc(50% - 50px)}}
@media (max-width:840px){
.modal h1{font-size:24px;line-height:22px}
.modal form{grid-template-columns: repeat(1,1fr)}}
@media (max-width:800px){
header .linea a{height:38px;line-height:38px;border-radius:38px;font-size:20px;padding:0 15px}
section h1{font-size:32px}
#intro .text h1,#intro .text h2{font-size:38px;line-height:38px}
#intro .video .content{position:relative;padding-bottom:36%;width:62%;height:0}
#intro .video iframe{position:absolute;top:20px;left:20px;width:calc(100% - 40px);height:calc(100% - 40px)}
#integrado .grid{grid-template-columns:repeat(2,1fr)}
#app .grid{grid-template-columns:repeat(1,1fr);gap:40px}
#app .grid img{max-width:290px}
#app .grid .text{max-width:520px;width:100%}
#plataformas .grid{width:100%}}
@media (max-width:740px){
#intro .text h1,#intro .text h2{font-size:36px;line-height:36px}
section h1{font-size:30px;line-height:30px}
#soluciones .grid{grid-template-columns:repeat(1,1fr);position:relative}
#soluciones .txt{padding-top:200px}
#soluciones .img{position:absolute;top:0;left:0;width:100%;height:180px}
#soluciones .img img{height:180px}
#soluciones .txt p{text-align:center}
#soluciones .txt p:first-of-type{margin-bottom:20px}}
@media (max-width:700px){
footer .grid{grid-template-columns:200px calc(100% - 220px);gap:20px}
footer p{line-height:18px}}
@media (max-width:620px){
#intro .video .content{padding-bottom:50%;width:calc(100% - 80px)}}
@media (max-width:580px){
header .grid{grid-template-columns:140px calc(100% - 160px)}
header .infoContent{padding:5px 10px 0 10px;width:calc(100% - 20px)}
header .linea a{height:36px;line-height:36px;border-radius:36px;padding:0 10px}
header .linea a span img{padding-top:8px;max-width:20px}
header.active .linea a{height:26px;line-height:26px;border-radius:26px;font-size:18px;padding:0 10px}
header .linea a span{margin-right:5px}
header.active .linea a span img{max-width:18px;padding-top:4px}
#app .grid2{width:80%;grid-template-columns:repeat(2,1fr);gap:40px}
#app .grid2 li{max-height:130px;padding:20px}}
@media (max-width:560px){
footer .grid{grid-template-columns:repeat(1,auto);gap:20px;text-align:center}
footer .grid p{text-align:center}
footer ul{width:260px;margin-right:50%;transform:translateX(50%);margin-top:12px}
footer li:last-of-type{margin-left:0}}
@media (max-width:520px){
.button a{font-size:20px}
p{line-height:24px;letter-spacing:-0.8px}
#intro .video .content{padding:10px;padding-bottom:50%;width:calc(100% - 60px)}
#intro .video iframe{top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
#plataformas .grid{grid-template-columns:repeat(1,1fr)}}
@media (max-width:480px){
.button a{padding:5px 15px;font-size:20px;height:auto;line-height:20px;border-radius:48px}
#integrado .grid{grid-template-columns:repeat(1,1fr)}}
@media (max-width:440px){
header .infoContent{padding:5px 10px 10px 10px}
header .grid{grid-template-columns:repeat(1,1fr);gap:5px}
header .logoWO,header .linea{text-align:center}
header .logoWO a,header .linea a{float:none;display:inline-block}
header .logoWO .logoL{max-width:140px}
header.active .grid{grid-template-columns:100px calc(100% - 120px);gap:20px}
header.active .linea{text-align:right}
section h1{font-size:30px;line-height:28px}
#integrado p:last-of-type{font-size:22px;line-height:20px}
.modal label{line-height:18px;margin-bottom:6px}}
@media (max-width:380px){
#intro .text h1,#intro .text h2{font-size:32px;line-height:32px}
.modal input[type=button]{font-size:19px;letter-spacing:-0.5px;padding:0 10px}}
@media (max-width:350px){
header.active .linea a{font-size:17px}
header.active .linea a span{display:none}
footer ul{width:220px}
footer li{margin-left:10px}}