html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/*/////////////////////webfonts////////////////////////*/
@font-face {
	font-family: 'Asap';
	src: url('fonts/asap-regular-webfont.eot');
	src:local( '☺' ), 
	url('fonts/asap-regular-webfont.woff') format('woff'),
	url('fonts/Asap-Regular.ttf') format('truetype'),
	url('fonts/asap-regular-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Asap';
	src: url('fonts/asap-italic-webfont.eot');
	src:local( '☺' ), 
	url('fonts/asap-italic-webfont.woff') format('woff'),
	url('fonts/Asap-Italic.ttf') format('truetype'),
	url('fonts/asap-italic-webfont.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Asap';
	src: url('fonts/asap-bold-webfont.eot');
	src:local( '☺' ), 
	url('fonts/asap-bold-webfont.woff') format('woff'),
	url('fonts/Asap-Bold.ttf') format('truetype'),
	url('fonts/asap-bold-webfont.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Asap';
	src:local( '☺' ), 
	url('fonts/asap-bolditalic-webfont.woff') format('woff'),
	url('fonts/Asap-BoldItalic.ttf') format('truetype'),
	url('fonts/asap-bolditalic-webfont.svg') format('svg');
	font-weight: bold;
	font-style: italic;
}
/*//////////////////////////////////////////////////////*/
/*///////////////////////FORMATO TEXTO///////////////////////////////*/
h1{
font-family:'Asap';
font-size:1.3em;
color:#4c385b;
font-weight: bold;
font-style: italic;
text-align: right;
margin-bottom:-3px;
}
h2{
font-family:'Asap';
font-size:.96em;
color:#16c0db;	
font-weight: bold;
font-style: italic;
text-align: right;
margin-bottom:5px;
letter-spacing:1px;
}
p{
font-family:'Asap';
font-size:9.5pt;
/*text-align: justify;*/
line-height:1.25em;
font-weight: normal;
font-style: normal;
color:#5e5a66;
}
a{text-decoration: none;}
.h-left{
text-align:left;	
}
.white{
color:white;
}
.greenblue{
color:#1ed1c6;
}
.pink{
color:#d61577;
}
#txt-home{
position:absolute;
top:146px;
left:935px;
width:315px;
font-size:1.02em;
z-index:7000;
}
#th01{
position:absolute;
top:0px;
left:-29px;
font-size:1.8em;
font-weight:normal;
font-style:italic;
}
#th02{
position:absolute;
top:24px;
left:-15px;
font-size:2.3em;
font-weight:normal;
font-style:italic;
}
#th03{
position:absolute;
top:69px;
font-size:9.5pt;
}
#txt-reel{
position:absolute;
top:73px;
left:848px;
z-index:7000;
}
#tr01{
font-size:1.9em;
}
#tr02{
position:absolute;
top:21px;
left:9px;
font-size:3.1em;
}
#research{
position: absolute;
top:896px;
left:689px;
width:400px;
height:100px;
z-index:7000;
}
#point-r01{
font-size:1.1em;
position:absolute;
}
#plus-r01{
font-size:1.2em;
position:absolute;
top:1px;
left:62px;
}
#txt-r01{
font-size:1.45em;
position:absolute;
top:1px;
left:76px;
}
#txt-r02{
font-size:1em;
position:absolute;
top:27px;
left:99px;
}
#txt-r03{
font-size:1.3em;
position:absolute;
top:22px;
left:115px;
}
#txt-r04{
position:absolute;
top:46px;
left:105px;
}
#solution{
position: absolute;
top:1011px;
left:270px;
width:344px;
height:100px;
z-index:7000;
}
#point-sol01{
font-size:1.1em;
position:absolute;
right:0px;
}
#plus-sol01{
font-size:1.2em;
position:absolute;
top:1px;
right:62px;
}
#txt-sol01{
font-size:1.25em;
position:absolute;
top:5px;
left:5px;
text-shadow:1px 1px 8px #b7b7b7;
}
#txt-sol02{
font-size:1.5em;
position:absolute;
top:1px;
left:124px;
}
#txt-sol03{
font-size:1em;
position:absolute;
top:32px;
left:101px;
text-shadow:1px 1px 8px #b7b7b7;
}
#txt-sol04{
position:absolute;
top:22px;
left:117px;
font-size:1.7em;
text-shadow:1px 1px 8px #b7b7b7;
}
#txt-sol05{
position:absolute;
top:56px;
left:113px;
text-shadow:1px 1px 8px #b7b7b7;
}
#implement{
position: absolute;
top:1084px;
left:763px;
width:425px;
height:100px;
z-index:7000;
}
#point-i01{
font-size:1.1em;
position:absolute;
}
#plus-i01{
font-size:1.2em;
position:absolute;
top:1px;
left:62px;
}
#txt-i01{
font-size:1.45em;
position:absolute;
top:1px;
left:76px;
}
#txt-i02{
font-size:.9em;
position:absolute;
top:26px;
left:128px;
}
#txt-i03{
font-size:1em;
position:absolute;
top:25px;
left:138px;
}
#txt-i04{
position:absolute;
top:46px;
left:128px;
}
#txt-work{
position: absolute;
top:620px;
left:273px;
width:370px;
height:125px;
z-index:7000;
}
#txt-w01{
font-size:1.35em;
position:absolute;
}
#txt-w02{
font-size:3.7em;
position:absolute;
top:11px;
left:5px;
}
#txt-w03{
position:absolute;
top:78px;
left:130px;
}
#txt-services{
position:absolute;
top:-196px;
left:842px;
width:340px;
height:0px;
z-index:7000;
}
#txt-s01{
position:absolute;
top:0px;
left:37px;
color:#433150;
font-size:1.6em;
}
#txt-s03{
position:absolute;
top:65px;
left:60px;
color:#433150;
}
#txt-s02{
position:absolute;
top:18px;
left:54px;
color:#433150;
font-size:2.5em;
}
#txt-design{
position:absolute;
top:555px;
left:294px;
width:322px;
z-index:7001;
text-align: right;
}
#arrow-design{
position:absolute;
top:9px;
left:340px;
width:8px;
height:10px;
background-position:-58px -156px;
}
#txt-mobile{
position:absolute;
top:320px;
left:244px;
width:276px;
text-align:right;
}
#arrow-mobile{
position:absolute;
top:9px;
left:281px;
width:8px;
height:10px;
background-position:-58px -156px;
}
#txt-commerce{
position:absolute;
top:70px;
left:283px;
width:261px;
text-align: right;
}
#arrow-commerce{
position:absolute;
top:8px;
left:282px;
width:8px;
height:10px;
background-position:-58px -156px;
}
#txt-social{
position:absolute;
top:580px;
left:411px;
width:277px;
z-index:7001;
text-align:right;
}
#arrow-social{
position:absolute;
top:9px;
left:279px;
width:8px;
height:10px;
background-position:-58px -156px;
}
#txt-production{
position:absolute;
top:372px;
left:401px;
width:270px;
z-index:7000;
text-align:right;
}
#arrow-production{
position:absolute;
top:9px;
left:291px;
width:8px;
height:10px;
background-position:-58px -156px;
}
#txt-web{
position:absolute;
top:42px;
left:613px;
width:350px;
z-index:7001;
}
#arrow-web{
position:absolute;
top:10px;
left:-26px;
width:8px;
height:10px;
background-position:-58px -156px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
#txt-augmented{
position:absolute;
top:560px;
left:732px;
width:281px;
z-index:7000;
}
#arrow-augmented{
position:absolute;
top:9px;
left:-24px;
width:8px;
height:10px;
background-position:-58px -156px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
#txt-webgames{
position:absolute;
top:338px;
left:737px;
width:302px;
}
#arrow-webgames{
position:absolute;
top:10px;
left:-26px;
width:8px;
height:10px;
background-position:-58px -156px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
#txt-motion{
position:absolute;
top:110px;
left:773px;
width:308px;
z-index:7000;
}
#arrow-motion{
position:absolute;
top:9px;
left:-25px;
width:8px;
height:10px;
background-position:-58px -156px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
/*//////////////////////////////////////////////////////*/
body{
width:100%;
height:9464px;
}
#wrapped{
width:100%;
height:9463px;
overflow:hidden;
position:absolute;
}
section#background{
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: #052a33; /* Old browsers */
background: -moz-linear-gradient(top, #052a33 0%, #418085 50%, #b4d2d9 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #052a33 0%,#418085 50%,#b4d2d9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #052a33 0%,#418085 50%,#b4d2d9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #052a33 0%,#418085 50%,#b4d2d9 100%); /* IE10+ */
background: linear-gradient(to bottom, #052a33 0%,#418085 50%,#b4d2d9 100%); /* W3C */
z-index: 10;
pointer-events: none;
}
.light{
background:url("images/back/sprite-light.png") no-repeat;
}
#luz01{
position:absolute;
top:62px;
left:327px;
width:60px;
height:100px;
background-position:0px 0px;
z-index:2900;
}
#luz02{
position:absolute;
top:319px;
left:1156px;
width:60px;
height:125px;
background-position:0px -100px;
z-index:2900;
}
#luz03{
position:absolute;
top:435px;
left:285px;
width:60px;
height:95px;
background-position:0px -230px;
z-index:2900;
}
#luz04{
position:absolute;
top:567px;
left:1234px;
width:60px;
height:385px;
background-position:0px -325px;
z-index:2900;
}
#luz05{
position:absolute;
top:-369px;
left:86px;
width:60px;
height:450px;
background-position:0px -715px;
z-index:2900;
}
#luz06{
position:absolute;
top:104px;
left:1234px;
width:60px;
height:600px;
background-position:0px -1170px;
z-index:2900;
}
#luz07{
position:absolute;
top:504px;
left:227px;
width:50px;
height:405px;
background-position:-50px 0px;
z-index:2900;
}
#luz08{
position:absolute;
top:3px;
left:443px;
width:50px;
height:95px;
background-position:-50px -405px;
z-index:2900;
}
#luz09{
position:absolute;
top:347px;
left:229px;
width:50px;
height:611px;
background-position:-50px -500px;
z-index:2900;
}
#luz10{
position:absolute;
top:704px;
left:1186px;
width:50px;
height:95px;
background-position:-50px -1170px;
z-index:2900;
}
#luz11{
position:absolute;
top:308px;
left:1185px;
width:50px;
height:440px;
background-position:-50px -1265px;
z-index:2900;
}
#luz12{
position:absolute;
top:710px;
left:65px;
width:50px;
height:100px;
background-position:-110px 0px;
z-index:2900;
}
#luz13{
position:absolute;
top:84px;
left:393px;
width:50px;
height:130px;
background-position:-110px -100px;
z-index:2900;
}
#luz14{
position:absolute;
top:576px;
left:1357px;
width:50px;
height:640px;
background-position:-110px -230px;
z-index:2900;
}
#luz15{
position:absolute;
top:507px;
left:20px;
width:50px;
height:125px;
background-position:-110px -870px;
z-index:2900;
}
#luz16{
position:absolute;
top:364px;
left:1033px;
width:50px;
height:270px;
background-position:-110px -995px;
z-index:2900;
}
#luz17{
position:absolute;
top:472px;
left:28px;
width:50px;
height:355px;
background-position:-110px -1265px;
z-index:2900;
}
.nav{
background:url("images/nav/sprite-nav.png") no-repeat;
}
header{
position:fixed;
width:100%;
height:50px;
top:0px;
z-index:7100;
pointer-events:none;
}
header a{
pointer-events:auto;
}
#bt-headlogo{
position:fixed;
top:25px;
left:45px;
display:flex;
flex-direction:column;
align-items:center;
text-decoration:none;
z-index:7200;
cursor:pointer;
transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#bt-headlogo:hover{
transform:scale(1.06);
}
.header-logo-img{
width:90px;
height:auto;
display:block;
filter:drop-shadow(0 0 12px rgba(255, 222, 23, 0.55)) drop-shadow(0 5px 14px rgba(0, 0, 0, 0.75));
transition:filter 0.3s ease;
}
#bt-headlogo:hover .header-logo-img{
filter:drop-shadow(0 0 22px rgba(255, 222, 23, 0.95)) drop-shadow(0 0 30px rgba(0, 243, 255, 0.6));
}
.logo-title{
margin-top:5px;
font-family:'Asap', sans-serif;
font-size:13px;
font-weight:700;
letter-spacing:3px;
color:#ffffff;
text-align:center;
text-transform:uppercase;
text-shadow:0 0 10px rgba(255, 222, 23, 0.7), 0 2px 4px rgba(0,0,0,0.9);
user-select:none;
}
.header-social-nav{
position:fixed;
top:25px;
right:35px;
display:flex;
align-items:center;
gap:12px;
z-index:7200;
pointer-events:auto;
}
.social-btn{
width:38px;
height:38px;
border-radius:50%;
border:2.5px solid #ffffff;
display:flex;
align-items:center;
justify-content:center;
color:#ffffff !important;
font-size:18px;
text-decoration:none;
box-shadow:0 3px 10px rgba(0,0,0,0.5), inset 0 0 4px rgba(255,255,255,0.3);
transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor:pointer;
position:relative;
}
.social-btn:hover{
transform:scale(1.15) translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,0.6), 0 0 15px rgba(255,255,255,0.7);
}
.social-btn.social-fb{
background:#1877f2;
}
.social-btn.social-fb:hover{
box-shadow:0 6px 16px rgba(24,119,242,0.6), 0 0 15px rgba(24,119,242,0.85);
}
.social-btn.social-ig{
background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social-btn.social-ig:hover{
box-shadow:0 6px 16px rgba(214,36,159,0.6), 0 0 15px rgba(253,89,73,0.85);
}
.social-btn.social-li{
background:#0077b5;
}
.social-btn.social-li:hover{
box-shadow:0 6px 16px rgba(0,119,181,0.6), 0 0 15px rgba(0,119,181,0.85);
}
.social-btn.social-tt{
background:#000000;
border-color:#ffffff;
}
.social-btn.social-tt:hover{
box-shadow:0 6px 16px rgba(0,243,255,0.6), 0 0 15px rgba(254,44,85,0.85);
}
nav{
position:fixed;
top:50%;
margin-top:-193px;
left:37px;
width:63px;
height:386px;
z-index:7100;
}
#img-backnav{
position:absolute;
top:0px;
left:0px;
width:47px;
height:376px;
background-position:-306px -92px;
}
#btn-home{
position:absolute;
top:50px;
left:13px;
width:23px;
height:15px;
background-position:-104px -63px;
}
#btn-webreel{
position:absolute;
top:112px;
left:14px;
width:23px;
height:15px;
background-position:-81px -63px;
}
#btn-work{
position:absolute;
top:177px;
left:14px;
width:20px;
height:17px;
background-position:-58px -63px;
}
#btn-services{
position:absolute;
top:238px;
left:14px;
width:20px;
height:22px;
background-position:-4px -92px;
}
#btn-contact{
position:absolute;
top:301px;
left:17px;
width:15px;
height:23px;
background-position:-81px -91px;
}
#btn-handle{
position:absolute;
top:29px;
left:-6px;
width:60px;
height:72px;
background-position:-306px -13px;
}
.nav-txt{
position:absolute;
font-weight:bold;
color:#433150;
font-size:10px;
}
#nav-txt-inicio{
top:52px;
left:60px;
display:none;
}
#nav-txt-webreel{
top:114px;
left:60px;
display:none;
}
#nav-txt-portafolio{
top:180px;
left:60px;
display:none;
}
#nav-txt-servicios{
top:243px;
left:60px;
display:none;
}
#nav-txt-contacto{
top:307px;
left:60px;
display:none;
}
/*---------------------------HOME----------------------------------------------*/
#home{
position:absolute;
width:1280px;
height:800px;
top:0px;
left:50%;
margin-left:-640px;
}
#home-parallax{
position:relative;
width:1280px;
height:800px;
top:0px;
left:50%;
margin-left:-640px;
}
#parallax-home-bee01,#parallax-home-bee02,#parallax-home-bee03,#parallax-home-bee04,#parallax-home-bee05,
#parallax-home-bee06,#parallax-home-bee07,#parallax-home-bee08,#parallax-home-bee09,#parallax-home-bee10,
#parallax-homep01,#parallax-homep02,#parallax-homep03,#parallax-homep04{
position:absolute;
}
#parallax-homep01{width:1300px; height:830px;}
#parallax-homep02{width:1320px; height:850px;}
#parallax-homep03{width:1340px; height:870px;}
#parallax-homep04{width:1380px; height:910px;}

#parallax-home-bee01{width:1283px; height:803px;}
#parallax-home-bee02{width:1285px; height:805px;}
#parallax-home-bee03{width:1287px; height:807px;}
#parallax-home-bee04{width:1289px; height:809px;}
#parallax-home-bee05{width:1291px; height:811px;}
#parallax-home-bee06{width:1293px; height:813px;}
#parallax-home-bee07{width:1295px; height:815px;}
#parallax-home-bee08{width:1297px; height:817px;}
#parallax-home-bee09{width:1298px; height:818px;}
#parallax-home-bee10{width:1299px; height:819px;}

.sprite-home{
background:url("images/home/sprite-home1.png") no-repeat;
}
.sprite-home2{
background:url("images/home/sprite-home2.png") no-repeat;
}
.sprite-ph{
background:url("images/home/sprite-particulash.png") no-repeat;
}
.sprite-cables{
background:url("images/back/sprite-cables.png") no-repeat;
}
#cableh01{
position:absolute;
top:367px;
left:572px;
width:240px;
height:795px;
background-position:-180px -5px;
z-index:3100;
}
#cableh02{
position:absolute;
top:499px;
left:550px;
width:175px;
height:620px;
background-position:-5px -5px;
z-index:3200;
}
#beeh01{
position:absolute;
top:146px;
left:429px;
width:373px;
height:570px;
background:url("images/home/h1.png") no-repeat;
z-index:3500;
}
#beeh02{
position:absolute;
top:302px;
left:215px;
width:390px;
height:234px;
background-position:-5px -5px;
z-index:3600;
}
#beeh03{
position:absolute;
top:263px;
left:576px;
width:340px;
height:265px;
background-position:-390px -5px;
z-index:3700;
}
#beeh04{
position:absolute;
top:237px;
left:403px;
width:380px;
height:340px;
background:url("images/home/h4.png");
z-index:3800;
}
#beeh05{
position:absolute;
top:319px;
left:324px;
width:340px;
height:120px;
background-position:-5px -270px;
z-index:3900;
}
#beeh06{
position:absolute;
top:301px;
left:590px;
width:340px;
height:120px;
background-position:-390px -270px;
z-index:4000;
}
#beeh07{
position:absolute;
top:312px;
left:408px;
width:385px;
height:270px;
background-position:-820px -5px;
z-index:4100;
}
#beeh08{
position:absolute;
top:356px;
left:366px;
width:385px;
height:270px;
background-position:-214px -5px;
z-index:4200;
}
#beeh09{
position:absolute;
top:232px;
left:461px;
width:202px;
height:245px;
background-position:-5px -5px;
z-index:4300;
}
#beeh10{
position:absolute;
top:329px;
left:496px;
width:215px;
height:210px;
background-position:-600px -5px;
z-index:4400;
}
#ph01{
position:absolute;
top:205px;
left:55px;
width:1145px;
height:1050px;
background-position:-1710px -5px;
z-index:4500;
}
#ph02{
position:absolute;
top:48px;
left:199px;
width:840px;
height:930px;
background-position:-870px -5px;
z-index:4600;
}
#nubeh01{
position:absolute;
top:-441px;
left:-1190px;
width:2002px;
height:1058px;
background:url("images/back/nube1low.png") no-repeat;
background-size:2002px 1058px;/*2002 x 1058*/
z-index:4610;
}
#ph03{
position:absolute;
top:284px;
left:236px;
width:865px;
height:394px;
background-position:-5px -5px;
z-index:4700;
}
#ph04{
position:absolute;
top:48px;
left:-299px;
width:1620px;
height:1071px;
background:url("images/home/particulas4.png");
z-index:4800;
}

/* Levitación orgánica continua de los cristales y fragmentos dorados */
@keyframes shardIdleFloatA {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(1.2deg); }
    100% { transform: translateY(3px) rotate(-0.8deg); }
}

@keyframes shardIdleFloatB {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(6px) rotate(-1.5deg); }
    100% { transform: translateY(-4px) rotate(0.9deg); }
}

#beeh02, #beeh04, #beeh06, #beeh08, #beeh10, #ph02, #ph04 {
    animation: shardIdleFloatA 5s ease-in-out infinite alternate;
}

#beeh03, #beeh05, #beeh07, #beeh09, #ph01, #ph03 {
    animation: shardIdleFloatB 6s ease-in-out infinite alternate;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////ACCESS LOGIN (AULA VIRTUAL)///////////////////////////////////////*/
#access-client{
	position: fixed;
	top: auto;
	bottom: 30px;
	left: 45px;
	width: auto;
	height: auto;
	z-index: 7500;
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.access-client-link{
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s ease;
}
.access-client-link:hover{
	transform: scale(1.05);
}
.access-client-text{
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	text-align: right;
}
.access-client-tag, #label01{
	font-family: 'Asap', sans-serif;
	font-size: 11px;
	font-weight: 800;
	font-style: italic;
	color: #1ed1c6;
	letter-spacing: 0.5px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(30, 209, 198, 0.5);
	margin-bottom: -2px;
}
.access-client-title, #label02{
	font-family: 'Asap', sans-serif;
	font-size: 19px;
	font-weight: 800;
	font-style: italic;
	color: #ffffff;
	letter-spacing: 1px;
	text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.7);
}
.access-client-logo, #l-engranebox{
	position: relative;
	top: 0;
	left: 0;
	width: 44px;
	height: auto;
	filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.7)) drop-shadow(0 2px 5px rgba(0,0,0,0.8));
	transition: transform 0.3s ease, filter 0.3s ease;
}
.access-client-link:hover .access-client-logo,
.access-client-link:hover #l-engranebox{
	transform: scale(1.1) rotate(4deg);
	filter: drop-shadow(0 0 14px rgba(0, 243, 255, 0.95)) drop-shadow(0 2px 6px rgba(0,0,0,0.9));
}
.access-client-btn, #entrar-engranebox{
	position: relative;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	transition: transform 0.25s ease, filter 0.25s ease;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.access-client-link:hover .access-client-btn,
.access-client-link:hover #entrar-engranebox{
	transform: scale(1.08);
	filter: drop-shadow(0 0 12px rgba(0, 243, 255, 0.8));
}
.access-client-btn img, #entrar-engranebox img{
	display: block;
	height: 29px;
	width: auto;
}
#user-client,#pass-client{
position:absolute;
width:128px;
height:21px;
font-family: 'Asap';
font-weight:bold;
font-size:.7em;
text-indent:5px;
color:#1d1d1d;
background-position:-105px -128px;
padding:0;
outline:0;
border:0;
}
#user-client{
top:5px;
left:80px;
}
#pass-client{
top:5px;
right:0px;
}
#btn-login{
position: absolute;
bottom:13px;
right:2px;
width:40px;
height:16px;
border:0;
background:#1ed1c6;
font-family: 'Asap';
font-weight: bold;
font-style: normal;
color: white;
font-size:.6em;
text-indent: -3px;
}
#btn-login:hover{
background:#179890;
}
/*#login-help{
position:absolute;
top:832px;
left:613px;
width:21px;
height:21px;
background-position:-81px -129px;
z-index:5000;
}*/
/*-------------------------------------------------------------------------*/
/*-------------------------------WEBREEL------------------------------------------*/
#webreel{
position:absolute;
width:1280px;
height:800px;
top:918px;
left:50%;
margin-left:-661px;
}
#casilla-reel{
position:absolute;
width:685px;
height:405px;
top:154px;
left:326px;
background:url("images/webreel/casilla-reel.png") no-repeat;
z-index:3500;
}
#nuber01{
position:absolute;
top:0px;
left:925px;
width:1060px;
height:848px;
background:url("images/back/nube4low.png") no-repeat;
background-size:1060px 848px;
z-index:3510;
}
#cabler01{
position:absolute;
top:343px;
left:426px;
width:380px;
height:625px;
background-position:-710px -5px;
z-index:3100;
}
#cabler02{
position:absolute;
top:421px;
left:612px;
width:150px;
height:970px;
background-position:-550px -5px;
z-index:3200;
}
.sprite-engranes{
background:url("images/back/sprite-engranes.png") no-repeat;
}
#engraner01a{
position:absolute;
top:877px;
left:589px;
width:100px;
height:80px;
background-position:-5px -5px;
z-index:3110;
}
#engraner01b{
position:absolute;
top:897px;
left:589px;
width:100px;
height:60px;
background-position:-5px -105px;
z-index:3210;
}
#engraner02a{
position:absolute;
top:974px;
left:615px;
width:135px;
height:85px;
background-position:-125px -5px;
z-index:3110;
}
#engraner02b{
position:absolute;
top:977px;
left:615px;
width:135px;
height:83px;
background-position:-125px -105px;
z-index:3210;
}
#engraner03a{
position:absolute;
top:1069px;
left:684px;
width:75px;
height:65px;
background-position:-280px -5px;
z-index:3110;
}
#engraner03b{
position:absolute;
top:1092px;
left:685px;
width:75px;
height:65px;
background-position:-280px -105px;
z-index:3210;
}
#nuber02{
position:absolute;
top:110px;
left:-400px;
width:1516px;
height:1650px;
background:url("images/back/nube3low.png") no-repeat;
background-size:1516px 1650px;
z-index:4510;
}
/*-------------------------------------------------------------------------*/
/*-------------------------------WORK------------------------------------------*/
#work{
position:absolute;
width:1280px;
height:800px;
top:2121px;
left:50%;
margin-left:-662px;
}
#work-parallax{
position:relative;
width:1280px;
height:800px;
top:0px;
left:50%;
margin-left:-640px;
}
#parallax-work-bee01,#parallax-work-bee02,#parallax-work-bee03,#parallax-work-bee04,#parallax-work-bee05,
#parallax-work-bee06,#parallax-work-bee07,#parallax-work-bee08,#parallax-work-bee09,#parallax-work-bee10,
#parallax-workp01,#parallax-workp02,#parallax-workp03{
position:absolute;
}
#parallax-workp01{width:1300px; height:830px;}
#parallax-workp02{width:1320px; height:850px;}
#parallax-workp03{width:1340px; height:870px;}

#parallax-work-bee01{width:1283px; height:803px;}
#parallax-work-bee02{width:1285px; height:805px;}
#parallax-work-bee03{width:1287px; height:807px;}
#parallax-work-bee04{width:1289px; height:809px;}
#parallax-work-bee05{width:1291px; height:811px;}
#parallax-work-bee06{width:1293px; height:813px;}
#parallax-work-bee07{width:1295px; height:815px;}
#parallax-work-bee08{width:1297px; height:817px;}
#parallax-work-bee09{width:1298px; height:818px;}
#parallax-work-bee10{width:1299px; height:819px;}

.sprite-work{
background:url("images/work/sprite-work1.png") no-repeat;	
}
.sprite-work2{
background:url("images/work/sprite-work2.png") no-repeat;	
}
.sprite-work3{
background:url("images/work/sprite-work3.png") no-repeat;	
}
#nubew01{
position:absolute;
top:-110px;
left:-200px;
width:3032px;
height:1480px;
background:url("images/back/nube2low.png") no-repeat;
background-size:3032px 1480px;
z-index:0;
}
#beew01{
position:absolute;
top:-46px;
left:547px;
width:270px;
height:750px;
background:url("images/work/w1.png") no-repeat;
z-index:3500;
}
#cablew01{
position:absolute;
top:453px;
left:770px;
width:135px;
height:235px;
background-position:-1095px -5px;
z-index:3100;
}
#beew02{
position:absolute;
top:152px;
left:343px;
width:605px;
height:385px;
background-position:-5px -5px;
z-index:3600;
}
#beew03{
position:absolute;
top:41px;
left:352px;
width:682px;
height:565px;
background:url("images/work/w3.png") no-repeat;
z-index:3700;
}
#beew04{
position:absolute;
top:233px;
left:471px;
width:380px;
height:325px;
background-position:-620px -5px;
z-index:3800;
}
#beew05{
position:absolute;
top:329px;
left:304px;
width:283px;
height:130px;
background-position:-1010px -5px;
z-index:3900;
}
#beew06{
position:absolute;
top:121px;
left:452px;
width:371px;
height:447px;
background:url("images/work/w6.png") no-repeat;
z-index:4000;
}
#beew07{
position:absolute;
top:327px;
left:764px;
width:315px;
height:140px;
background-position:-1295px -5px;
z-index:4100;
}
#beew08{
position:absolute;
top:142px;
left:511px;
width:470px;
height:340px;
background-position:-5px -5px;
z-index:4200;
}
#beew09{
position:absolute;
top:144px;
left:618px;
width:225px;
height:265px;
background-position:-765px -5px;
z-index:4300;
}
#beew10{
position:absolute;
top:216px;
left:531px;
width:290px;
height:300px;
background-position:-470px -5px;
z-index:4400;
}
#pw01{
position:absolute;
top:129px;
left:274px;
width:1005px;
height:500px;
background-position:-5px -5px;
z-index:4500;
}
#pw02{
position:absolute;
top:-58px;
left:275px;
width:905px;
height:745px;
background-position:-1010px -5px;
z-index:4600;
}
#pw03{
position:absolute;
top:48px;
left:99px;
width:880px;
height:540px;
background-position:-1920px -5px;
z-index:4700;
}
/*-------------------------------WORK P1------------------------------------------*/
#workp1{
position:absolute;
width:1280px;
height:800px;
top:2977px;
left:50%;
margin-left:-663px;
}
.sprite-casillas1{
background:url("images/work/sprite-casillas1.png") no-repeat;	
}
.sprite-casillas2{
background:url("images/work/sprite-casillas2.png") no-repeat;	
}
.sprite-casillas3{
background:url("images/work/sprite-casillas3.png") no-repeat;	
}
#solero{
position:absolute;
top:-2px;
left:691px;
width:346px;
height:295px;
background-position:-351px -15px;
z-index:3100;
}
/*#solero:hover{
-webkit-transform:scale(1.4);
-webkit-transition: all 2s ease-in-out;
}*/
#domeqc-beat{
position:absolute;
top:94px;
left:316px;
width:335px;
height:305px;
background-position:-5px -328px;
z-index:3100;
}
#pepsi{
position:absolute;
top:282px;
left:89px;
width:265px;
height:265px;
background-position:-882px -12px;
z-index:3000;
}
#votaryo{
position:absolute;
top:282px;
left:970px;
width:182px;
height:165px;
background-position:-806px -11px;
z-index:3000;
}
#johncarter{
position:absolute;
top:344px;
left:661px;
width:405px;
height:335px;
background-position:-395px -11px;
z-index:3100;
}
#samsung{
position:absolute;
top:398px;
left:348px;
width:310px;
height:282px;
background-position:-16px -11px;
z-index:3600;
}
#cinemahavana{
position:absolute;
top:555px;
left:191px;
width:265px;
height:250px;
background-position:-885px -294px;
z-index:3000;
}
#casapedrodomeqc{
position:absolute;
top:564px;
left:887px;
width:345px;
height:285px;
background-position:-698px -14px;
z-index:3000;
}
/*-------------------------------WORK P2------------------------------------------*/
#workp2{
position:absolute;
width:1280px;
height:800px;
top:3796px;
left:50%;
margin-left:-597px;
}
#fox{
position:absolute;
top:-121px;
left:470px;
width:325px;
height:300px;
background-position:-698px -330px;
z-index:3100;
}
#peugeot207{
position:absolute;
top:13px;
left:793px;
width:270px;
height:250px;
background-position:-605px -10px;
z-index:3000;
}
#disney-gigantes{
position:absolute;
top:42px;
left:114px;
width:375px;
height:315px;
background-position:-395px -370px;
z-index:3100;
}
#hacienda{
position:absolute;
top:215px;
left:411px;
width:250px;
height:235px;
background-position:-1171px -294px;
z-index:3000;
}
#holanda{
position:absolute;
top:217px;
left:747px;
width:385px;
height:365px;
background-position:-13px -370px;
z-index:3100;
}
#neutrogena{
position:absolute;
top:421px;
left:18px;
width:270px;
height:255px;
background-position:-16px -294px;
z-index:3100;
}
#votar-rock{
position:absolute;
top:458px;
left:598px;
width:190px;
height:160px;
background-position:-806px -187px;
z-index:3000;
}
#grupoasa{
position:absolute;
top:495px;
left:952px;
width:340px;
height:320px;
background-position:-350px -326px;
z-index:3000;
}
#peugeot208{
position:absolute;
top:517px;
left:298px;
width:243px;
height:225px;
background-position:-334px -11px;
z-index:3100;
}
#revolver{
position:absolute;
top:613px;
left:554px;
width:341px;
height:320px;
background-position:-10px -11px;
z-index:3000;
}
/*-------------------------------WORK P3------------------------------------------*/
#workp3{
position:absolute;
width:1280px;
height:800px;
top:4642px;
left:50%;
margin-left:-705px;
}
.nube05{
background:url("images/back/nube5low.png") no-repeat;	
}
#organika{
position:absolute;
top:-143px;
left:57px;
width:260px;
height:240px;
background-position:-605px -294px;
z-index:3100;
}
#mexicana{
position:absolute;
top:-88px;
left:328px;
width:385px;
height:365px;
background-position:-13px -8px;
z-index:3000;
}
#zebra{
position:absolute;
top:10px;
left:976px;
width:256px;
height:235px;
background-position:-1167px -12px;
z-index:3100;
}
#natura{
position:absolute;
top:120px;
left:699px;
width:270px;
height:245px;
background-position:-333px -294px;
z-index:3100;
}
#ciudad{
position:absolute;
top:189px;
left:132px;
width:190px;
height:178px;
background-position:-807px -371px;
z-index:3100;
}
#btn-more{
position:absolute;
top:400px;
left:569px;
width:167px;
height:36px;
background-position:-104px -155px;
font-family:'Asap';
color:white;
font-size:.9em;
z-index:5000;
}
#txt-btnmore{
position:absolute;
top:410px;
left:588px;
z-index:5010;
font-size:.75em;
}
#arrow1{
position:absolute;
top:412px;
left:712px;
width:7px;
height:11px;
background-position:-42px -157px;
z-index:5010;
}
#arrow2{
position:absolute;
top:412px;
left:718px;
width:7px;
height:11px;
background-position:-42px -157px;
z-index:5010;
}
#nubew-01{
position:absolute;/*absolute*/
top:-80px;/*-900*/
left:400px;/*400*/
width:3072px;
height:1488px;
background-size:3072px 1488px;
z-index:3101;
}
#nubew02{
position:absolute;
top:10px;/*870*/
left:-2200px;/*-2200*/
width:3072px;
height:1488px;
background-size:3072px 1488px;
z-index:3101;
}
#nube0{
position:absolute;
top:8px;/*-170*/
left:-349px;
width:2000px;
height:1018px;
background:url("images/back/nube6low.png") no-repeat;
background-size:2000px 1018px;
z-index:3101;
}
/*-------------------------------------------------------------------------*/
/*-------------------------------SERVICES------------------------------------------*/
#services{
position:absolute;
width:1280px;
height:800px;
top:5504px;
left:50%;
margin-left:-730px;
}
#services-parallax{
position:relative;
width:1280px;
height:800px;
top:0px;
left:50%;
margin-left:-640px;
}
#parallax-services-bee01,#parallax-services-bee02,#parallax-services-bee03,#parallax-services-bee04,#parallax-services-bee05,
#parallax-services-bee06,#parallax-services-bee07,#parallax-servicesp01,#parallax-servicesp02,#parallax-servicesp03{
position:absolute;
}
#parallax-servicesp01{width:1312px; height:832px;}
#parallax-servicesp02{width:1350px; height:870px;}
#parallax-servicesp03{width:1380px; height:900px;}

#parallax-services-bee01{width:1286px; height:806px;}
#parallax-services-bee02{width:1290px; height:810px;}
#parallax-services-bee03{width:1294px; height:814px;}
#parallax-services-bee04{width:1298px; height:818px;}
#parallax-services-bee05{width:1302px; height:822px;}
#parallax-services-bee06{width:1306px; height:826px;}
#parallax-services-bee07{width:1310px; height:830px;}

.sprite-services{
background:url("images/services/sprite-services1.png") no-repeat;
}
.sprite-services2{
background:url("images/services/sprite-services2.png") no-repeat;
}
.sprite-servicesp{
background:url("images/services/sprite-servicesp.png") no-repeat;
}
.cable-ser{
background:url("images/services/cable-ser.png") no-repeat;
}
.sprite-da{
background:url("images/services/sprite-s1.png") no-repeat;	
}
.nube-gray{
background:url("images/back/nube2Glow.png") no-repeat;
}
#nav-services{
position: absolute;
top:324px;/*336*/
left:199px;
width:200px;
height:200px;
z-index:5000;
}
#item01{
width:70px;
height:19px;
font-size:.8em;
font-weight:bold;
font-style:normal;
color:#433150;
background-position:-300px -470px;
}
#item02{
width:149px;
height:19px;
font-size:.8em;
font-weight: bold;
font-style: normal;
color:#433150;
background-position:-300px -470px;	
}
#item03{
width:62px;
height:19px;
font-size:.8em;
font-weight: bold;
font-style: normal;
color:#433150;
background-position:-300px -470px;
}
#item04{
width:187px;
height:19px;
font-size:.8em;
font-weight: bold;
font-style: normal;
color:#433150;
background-position:-300px -470px;	
}
#item05{
width:114px;
height:19px;
font-size:.8em;
font-weight: bold;
font-style: normal;
color:#433150;
background-position:-300px -470px;	
}
#item06{
width:101px;
height:19px;
font-size:.8em;
font-weight: bold;
font-style: normal;
color:#433150;
background-position:-300px -470px;	
}
#item07{
width:120px;
height:19px;
font-size:.8em;
font-weight: bold;
font-style: normal;
color:#433150;
background-position:-300px -470px;	
}
#item08{
width:190px;
height:19px;
font-size:.8em;
font-weight: bold;
font-style: normal;
color:#433150;
background-position:-300px -470px;	
}
#item09{
width:212px;
height:19px;
font-size:.8em;
font-weight: bold;
font-style: normal;
color:#433150;
background-position:-300px -470px;	


}
#item01:hover,#item02:hover,#item03:hover,#item04:hover,#item05:hover,
#item06:hover,#item07:hover,#item08:hover,#item09:hover{
color:white;
text-indent:12px;
font-size:1em;
background-position:0px -470px;
padding: 1px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;	
}


#nubes01{
position:absolute;
top:-525px;
left:-2000px;
width:3012px;
height:1480px;
background-size:3012px 1480px;
z-index:3102;
}
#engrs01a{
position:absolute;
top:547px;
left:657px;
width:45px;
height:50px;
background-position:-5px -195px;
z-index:3500;
}
#engrs01b{
position:absolute;
top:552px;
left:657px;
width:45px;
height:50px;
background-position:-5px -275px;
z-index:3520;
}
#bees01{
position:absolute;
top:-102px;
left:234px;
width:680px;
height:460px;
background:url("images/services/s1.png") no-repeat;
z-index:3500;
}
#cables01{
position:absolute;
top:153px;
left:649px;
width:103px;
height:1010px;
background-position:-3px -2px;
z-index:3510;
}
#bees02{
position:absolute;
top:-101px;
left:522px;
width:582px;
height:320px;
background-position:-5px -5px;
z-index:3600;
}
#bees03{
position:absolute;
top:-100px;
left:444px;
width:480px;
height:430px;
background-position:-590px -5px;
z-index:3700;
}
#bees04{
position:absolute;
top:-10px;
left:430px;
width:455px;
height:242px;
background-position:-1070px -5px;
z-index:3800;
}
#bees05{
position:absolute;
top:12px;
left:368px;
width:472px;
height:240px;
background-position:-5px -5px;
z-index:3900;
}
#bees06{
position:absolute;
top:28px;
left:514px;
width:270px;
height:270px;
background-position:-475px -5px;
z-index:4000;
}
#bees07{
position:absolute;
top:10px;
left:524px;
width:260px;
height:265px;
background-position:-745px -5px;
z-index:4100;
}
#nubebee-services{
position:absolute;
top:-1006px;
left:210px;
width:3072px;
height:1488px;
background-size:3072px 1488px;
z-index:4101;
}
#ps01{
position:absolute;
top:-285px;
left:463px;
width:450px;
height:670px;
background-position:-1240px -5px;
z-index:4200;
}
#ps02{
position:absolute;
top:-125px;
left:380px;
width:540px;
height:540px;
background-position:-700px -5px;
z-index:4300;
}
#ps03{
position:absolute;
top:-317px;
left:312px;
width:692px;
height:670px;
background-position:-5px -5px;
z-index:4400;
}
#design{
position:absolute;
width:500px;
height:200px;
top:472px;/*498*/
left:750px;/*818*/
z-index:3400;
}
#sid01{
position:absolute;
top:69px;
left:70px;
width:75px;
height:78px;
background-position:-5px -4px;
}
#sid02{
position:absolute;
top:62px;
left:83px;
width:92px;
height:92px;
background-position:-5px -105px;
}
#sid03{
position:absolute;
top:38px;
left:101px;
width:153px;
height:165px;
background-position:-110px -5px;
}
#sid04{
position:absolute;
top:35px;
left:121px;
width:141px;
height:144px;
background-position:-280px -5px;
}
#sid05{
position:absolute;
top:18px;
left:135px;
width:163px;
height:168px;
background-position:-435px -5px;
}
#sid06{
position:absolute;
top:0px;
left:152px;
width:190px;
height:199px;
background-position:-600px -5px;
}
#sid07{
position:absolute;
top:64px;
left:266px;
width:98px;
height:92px;
background-position:-435px -205px;
}
#sid08{
position:absolute;
top:61px;
left:277px;
width:108px;
height:101px;
background-position:-435px -308px;
}
/*-------------------------------------------------------------------------*/
/*-------------------------------SERVICES P1------------------------------------------*/
#servicesp1{
position:absolute;
width:1280px;
height:800px;
top:6319px;
left:50%;
margin-left:-583px;
}
.sprite-webmobile{
background:url("images/services/sprite-s2.png") no-repeat;
}
#nubes02{
position:absolute;
top:-290px;
left:630px;
width:3012px;
height:1480px;
background-size:3012px 1480px;
z-index:0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#cables02{
position:absolute;
top:327px;
left:584px;
width:103px;
height:1010px;
background-position:-3px -2px;
z-index:3510;
}
#engrs01a-p1{
position:absolute;
top:22px;
left:504px;
width:70px;
height:60px;
background-position:-60px -195px;
z-index:3500;
}
#engrs01b-p1{
position:absolute;
top:22px;
left:504px;
width:70px;
height:60px;
background-position:-60px -275px;
z-index:3520;
}
#engrs02a-p1{
position:absolute;
top:305px;
left:559px;
width:72px;
height:60px;
background-position:-150px -195px;
z-index:3500;
}
#engrs02b-p1{
position:absolute;
top:312px;
left:559px;
width:72px;
height:60px;
background-position:-150px -275px;
z-index:3520;
}
#engrs03a-p1{
position:absolute;
top:545px;
left:628px;
width:70px;
height:60px;
background-position:-280px -195px;
z-index:3500;
}
#engrs03b-p1{
position:absolute;
top:567px;
left:628px;
width:70px;
height:35px;
background-position:-280px -275px;
z-index:3520;
}
#web{
position:absolute;
top:-40px;
left:-139px;
width:700px;
height:250px;
/*z-index:3400;*/
}
#siw01{
position:absolute;
top:9px;
left:199px;
width:285px;
height:210px;
background-position:-5px -390px;
z-index:3400;
}
#siw02{
position:absolute;
top:33px;/*83*/
left:174px;/*147*/
width:156px;
height:165px;
background-position:-329px -385px;
-webkit-transform:scale(.6,.6);
-moz-transform:scale(.6,.6);
-o-transform:scale(.6,.6);
-ms-transform:scale(.6,.6);
transform:scale(.6,.6);
z-index:3390;
}
#siw03{
position:absolute;
top:55px;/*105*/
left:415px;/*469*/
width:75px;
height:130px;
background-position:-528px -390px;
-webkit-transform:scale(.6,.6);
-moz-transform:scale(.6,.6);
-o-transform:scale(.6,.6);
-ms-transform:scale(.6,.6);
transform:scale(.6,.6);
z-index:3390;
}
#ipad{
position:absolute;
top:43px;
left:205px;
width:76px;
height:81px;
z-index:3390;
}
#cel{
position:absolute;
top:105px;
left:469px;
width:76px;
height:121px;
z-index:3390;
}
#mobile{
position:absolute;
top:172px;
left:771px;
width:325px;
height:340px;
z-index:3400;
}
#sim01{
position:absolute;
top:136px;
left:0px;
width:299px;
height:202px;
background-position:-329px -5px;
}
#sim02{
position:absolute;
top:124px;
left:41px;
width:243px;
height:155px;
background-position:-329px -209px;
}
#sim03{
position:absolute;
top:62px;
left:15px;
width:287px;
height:178px;
background-position:-5px -209px;
}
#sim04{
position:absolute;
top:4px;
left:0px;
width:320px;
height:204px;
background-position:-5px -5px;
}
/*.escalar04{
-webkit-transform:scale(.58,.58);
}
.escalar03{
-webkit-transform:scale(.7,.7);
}
.escalar02{
-webkit-transform:scale(.8,.8);
}*/
#augmented{
position:absolute;
top:481px;
left:224px;
width:228px;
height:330px;
overflow:hidden;
z-index:3400;
}
#sia01{
position:absolute;
top:2px;
left:13px;
width:206px;
height:60px;
background-position:-600px -205px;
}
#sia02{
position:absolute;
top:-45px;/*5*/
left:89px;
width:62px;
height:60px;
background-position:-750px -308px;
}
#sia03{
position:absolute;
top:3px;
left:53px;
width:111px;
height:60px;
background-position:-600px -308px;
display:none;
}
#sia04{
position:absolute;
top:-2px;/*0*/
left:0px;
width:228px;
height:200px;
background-position:-5px -205px;
}
#sia05{
position:absolute;
top:175px;/*135*/
left:56px;
width:114px;
height:162px;
background-position:-280px -205px;
}
#sia05a{
position:absolute;
top:0px;/*135*/
left:93px;
   width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 187px solid rgba(255,0,0,0.27);
   display:none;
}

/*-------------------------------------------------------------------------*/
/*-------------------------------SERVICES P2------------------------------------------*/
#servicesp2{
position:absolute;
width:1280px;
height:800px;
top:7081px;
left:50%;
margin-left:-660px;
}
.sprite-gamecom{
background:url("images/services/sprite-s3.png") no-repeat;
}
.sprite-sprod{
background:url("images/services/sprite-s4.png") no-repeat;
}
#nubes03{
position:absolute;
top:-340px;
left:-1700px;
width:3012px;
height:1480px;
background-size:3012px 1480px;
z-index:0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#cables03{
position:absolute;
top:533px;
left:741px;
width:103px;
height:1010px;
background-position:-3px -2px;
z-index:3510;
}
#engrs01a-p2{
position:absolute;
top:59px;
left:696px;
width:50px;
height:50px;
background-position:-5px -350px;
z-index:3500;
}
#engrs01b-p2{
position:absolute;
top:59px;
left:696px;
width:50px;
height:50px;
background-position:-5px -425px;
z-index:3520;
}
#engrs02a-p2{
position:absolute;
top:340px;
left:661px;
width:38px;
height:35px;
background-position:-70px -350px;
z-index:3500;
}
#engrs02b-p2{
position:absolute;
top:340px;
left:661px;
width:38px;
height:35px;
background-position:-70px -425px;
z-index:3520;
}
#engrs03a-p2{
position:absolute;
top:557px;
left:732px;
width:50px;
height:58px;
background-position:-125px -350px;
z-index:3500;
}
#engrs03b-p2{
position:absolute;
top:561px;
left:732px;
width:50px;
height:58px;
background-position:-125px -425px;
z-index:3520;
}
#commerce{
position:absolute;
top:-4px;
left:858px;
width:331px;
height:309px;
/*z-index:3400;*/
}
#sic01{
position:absolute;
top:12px;
left:0px;
width:85px;
height:115px;
background-position:-5px -5px;
z-index:3400;
}
#sic02{
position:absolute;
top:12px;
left:246px;
width:85px;
height:115px;
background-position:-5px -150px;
z-index: 3410;
}
#sic03{
position:absolute;
top:0px;
left:42px;
width:245px;
height:140px;
background-position:-100px -5px;
z-index: 3410;
}
#sic04{
position:absolute;
top:42px;
left:213px;/*62*/
width:172px;
height:194px;
background-position:-100px -150px;
-webkit-transform:rotate(34deg);
-moz-transform:rotate(34deg);
-ms-transform:rotate(34deg);
-o-transform:rotate(34deg);
z-index: 3420;
}
#sic04a{
position:absolute;
top:84px;
left:108px;
width:57px;
height:23px;
background-position:-199px -64px;
z-index: 3425;
display:none;
}
#sic05{
position:absolute;
top:52px;
left:75px;
width:146px;
height:175px;
background-position:-340px -150px;
display: none;
z-index: 3430;
}
#sic06{
position:absolute;
top:184px;/*184*/
left:142px;/*142*/
width:165px;
height:125px;
background-position:-340px -5px;
z-index: 3440;
display: none;
}
#webgames{
position:relative;
top:226px;
left:176px;
width:410px;
height:230px;
z-index:3400;
}
#parallax-wg01,#parallax-wg02,#parallax-wg03,#parallax-wg04,
#parallax-wg05,#parallax-wg06,#parallax-wg07{
	position: absolute;
}
#parallax-wg01{width:415px; height:235px;}
#parallax-wg02{width:420px; height:240px;}
#parallax-wg03{width:423px; height:243px;}
#parallax-wg04{width:435px; height:250px;}
#parallax-wg05{width:435px; height:250px;}
#parallax-wg06{width:435px; height:250px;}
#parallax-wg07{width:435px; height:250px;}

#sig01{
position:absolute;
top:30px;
left:128px;
width:183px;
height:138px;
background-position:-5px -345px;
}
#sig02{
position:absolute;
top:70px;
left:41px;
width:142px;
height:138px;
background-position:-199px -345px;
}
#sig03{
position:absolute;
top:92px;
left:250px;
width:160px;
height:138px;
background-position:-340px -345px;
}
#sig04{
position:absolute;
top:0px;
left:200px;
width:43px;
height:55px;
background-position:-5px -485px;
}
#sig05{
position:absolute;
top:90px;
left:0px;
width:66px;
height:55px;
background-position:-100px -485px;
}
#sig06{
position:absolute;
top:168px;
left:192px;
width:47px;
height:52px;
background-position:-199px -485px;
}
#sig07{
position:absolute;
top:84px;
left:320px;
width:35px;
height:35px;
background-position:-340px -485px;
}
#social{
position:absolute;
top:449px;
left:987px;
width:191px;
height:361px;
z-index:3400;
}
#fb-like{
position:absolute;
top:514px;
left:500px;
width:120px;
height:21px;
border:none;
overflow:hidden; 
z-index:3400;
}
#btnSharedTwit{
position:absolute;
top:490px;
left:802px;
}
#btnSharedTwit p{
line-height:33px;
}
#siso01{
position:absolute;
top:182px;
left:0px;
width:192px;
height:179px;
background-position:-5px -195px;
}
#siso02{
position:absolute;
top:240px;/*230*/
left:81px;
width:19px;
height:19px;
background-position:-75px -55px;
}
#siso03{
position:absolute;
top:240px;/*205*/
left:111px;
width:28px;
height:30px;
background-position:-45px -5px;
}
#siso04{
position:absolute;
top:247px;/*198*/
left:32px;
width:23px;
height:23px;
background-position:-75px -5px;
}
#siso05{
position:absolute;
top:200px;/*150*/
left:80px;
width:36px;
height:38px;
background-position:-5px -55px;
}
#siso06{
position:absolute;
top:200px;/*162*/
left:40px;
width:15px;
height:14px;
background-position:-100px -5px;
}
#siso07{
position:absolute;
top:140px;/*92*/
left:38px;
width:40px;
height:45px;
background-position:-5px -5px;
}
#siso08{
position:absolute;
top:150px;/*61*/
left:119px;
width:25px;
height:25px;
background-position:-45px -55px;
}
#siso09{
position:absolute;
top:100px;/*0*/
left:101px;
width:15px;
height:15px;
background-position:-100px -5px;
}
#siso10{
position:absolute;
top:187px;
left:4px;
width:183px;
height:99px;
background-position:-5px -95px;
}
#btn-face{
position:absolute;
top:513px;
left:609px;
width:87px;
height:27px;
background-position:-5px -380px;
z-index:7001;
}
#btn-twitter{
position:absolute;
top:557px;
left:801px;
width:99px;
height:31px;
background-position:-95px -380px;
z-index:7001;
}
/*-------------------------------------------------------------------------*/
/*-------------------------------SERVICES P3------------------------------------------*/
#servicesp3{
position:absolute;
width:1280px;
height:800px;
top:7842px;
left:50%;
margin-left:-590px;
}
#engrs01a-p3{
position:absolute;
top:104px;
left:680px;
width:55px;
height:55px;
background-position:-200px -350px;
z-index:3500;
}
#engrs01b-p3{
position:absolute;
top:104px;
left:680px;
width:55px;
height:55px;
background-position:-200px -425px;
z-index:3520;
}
#engrs02a-p3{
position:absolute;
top:368px;
left:716px;
width:54px;
height:44px;
background-position:-280px -350px;
z-index:3500;
}
#engrs02b-p3{
position:absolute;
top:373px;
left:715px;
width:54px;
height:44px;
background-position:-280px -425px;
z-index:3520;
}
#motion{
position:absolute;
top:7px;
left:220px;
width:400px;
height:250px;
z-index:3400;
}
#simt01{
position:absolute;
top:64px;
left:223px;
width:130px;
height:115px;
background-position:-199px -355px;
}
#simt02{
position:absolute;
top:17px;
left:50px;
width:238px;
height:229px;
background:url("images/services/sprite-tong.png");
background-position:-4760px 0px;
}
#production{
position:absolute;
top:256px;
left:840px;
width:270px;
height:175px;
z-index:3400;
}
#sip01{
position:absolute;
top:8px;
left:119px;
width:150px;
height:161px;
background-position:-197px -193px;
}
#sip02{
position:absolute;
top:0px;
left:0px;
width:168px;
height:175px;
background-position:-197px -4px;
}
/*-------------------------------------------------------------------------*/
/*-------------------------------CONTACTO------------------------------------------*/
#contact{
position:absolute;
width:1280px;
height:800px;
top:8649px;
left:50%;
margin-left:-600px;/*-479----640 last change*/
}
#contact-parallax{
position:relative;
width:1280px;
height:800px;
top:0px;
left:50%;
margin-left:-640px;
}
#parallax-contact-bee01,#parallax-contact-bee02,#parallax-contact-bee03,#parallax-contact-bee04,#parallax-contact-bee05,
#parallax-contact-bee06,#parallax-contact-bee07,#parallax-contactp01,#parallax-contactp02,#parallax-contactp03,
#parallax-contactv01,#parallax-contactv02,#parallax-contactv03{
position:absolute;
}
#parallax-contactp01{width:1300px; height:830px;}
#parallax-contactp02{width:1320px; height:850px;}
#parallax-contactp03{width:1340px; height:870px;}/*870*/

#parallax-contactv01{width:1296px; height:826px;}
#parallax-contactv02{width:1316px; height:846px;}
#parallax-contactv03{width:1336px; height:866px;}

#parallax-contact-bee01{width:1283px; height:803px;}
#parallax-contact-bee02{width:1285px; height:805px;}
#parallax-contact-bee03{width:1287px; height:807px;}
#parallax-contact-bee04{width:1289px; height:809px;}
#parallax-contact-bee05{width:1291px; height:811px;}
#parallax-contact-bee06{width:1293px; height:813px;}
#parallax-contact-bee07{width:1295px; height:815px;}

.sprite-contact{
background:url("images/contact/sprite-contact.png") no-repeat;
}
.sprite-contactp{
background:url("images/contact/sprite-contactp.png") no-repeat;
}
#txt-contact{
position:relative;
z-index:2;
margin:0 0 16px 0;
padding:0;
}
#txt-c01{
font-family:'Asap', sans-serif;
font-size:12px;
font-weight:800;
color:#0284c7;
letter-spacing:3px;
text-transform:uppercase;
text-align:left;
margin:0 0 2px 0;
}
#txt-c02{
font-family:'Asap', sans-serif;
font-size:32px;
font-weight:900;
color:#0f172a;
letter-spacing:2px;
text-transform:uppercase;
text-align:left;
margin:0 0 10px 0;
line-height:1;
}
#txt-c03{
font-family:'Asap', sans-serif;
font-size:12px;
line-height:1.6;
color:#334155;
text-align:left;
margin:0 0 14px 0;
z-index:2;
}
#txt-c03 .size10{
font-size:11px;
color:#64748b;
display:block;
margin-top:3px;
}
#txt-c03 .contact-highlight{
color:#d97706;
font-weight:700;
font-size:13px;
display:inline-block;
margin-top:4px;
}
.contact-badges-row{
display:flex;
gap:10px;
align-items:center;
margin-top:12px;
flex-wrap:wrap;
}
.contact-wa-badge{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 14px;
background:rgba(34, 197, 94, 0.12);
border:1.5px solid #22c55e;
border-radius:8px;
color:#15803d;
font-size:12px;
font-weight:700;
text-decoration:none;
transition:all 0.25s ease;
}
.contact-wa-badge:hover{
background:rgba(34, 197, 94, 0.25);
box-shadow:0 4px 12px rgba(34, 197, 94, 0.3);
transform:translateY(-1px);
color:#166534;
}
.contact-email-tag{
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 14px;
background:rgba(2, 132, 199, 0.1);
border:1.5px solid rgba(2, 132, 199, 0.35);
border-radius:8px;
color:#0369a1;
font-size:12px;
font-weight:700;
}
#link-skype{
display:none !important;
}
#nubes04{
position:absolute;
top:-900px;
left:-200px;
width:3012px;
height:1480px;
background-size:3012px 1480px;
z-index:100;
}
#beec01{
position:absolute;
top:-143px;
left:361px;
width:506px;
height:673px;
background:url("images/contact/c1.png") no-repeat;
z-index:3500;
}
#beec02{
position:absolute;
top:-276px;
left:354px;
width:493px;
height:790px;
background:url("images/contact/c2.png") no-repeat;
z-index:3600;
}
#beec03{
position:absolute;
top:-11px;
left:202px;
width:325px;
height:275px;
background-position:-5px -5px;
z-index:3700;
}
#beec04{
position:absolute;
top:-34px;
left:368px;
width:395px;
height:450px;
background-position:-330px -5px;
z-index:3800;
}
#beec05{
position:absolute;
top:-43px;
left:419px;
width:520px;
height:500px;
background-position:-730px -5px;
z-index:3900;
}
#beec06{
position:absolute;
top:83px;
left:484px;
width:255px;
height:270px;
background-position:-1255px -5px;
z-index:4000;
}
#beec07{
position:absolute;
top:-193px;
left:504px;
width:190px;
height:370px;
background-position:-1515px -5px;
z-index:4100;
}
#beecv01{
position:absolute;
top:35px;
left:447px;
width:265px;
height:245px;
background-position:-1415px -350px;
z-index:4190;
}
#beecp01{
position:absolute;
top:24px;
left:440px;
width:265px;
height:245px;
background-position:-1415px -5px;
z-index:4200;
}
#beecv02{
position:absolute;
top:72px;
left:219px;
width:665px;
height:95px;
background-position:-630px -350px;
z-index:4290;
}
#beecp02{
position:absolute;
top:57px;
left:206px;
width:785px;
height:120px;
background-position:-630px -5px;
z-index:4300;
}
#beecv03{
position:absolute;
top:24px;
left:336px;
width:610px;
height:325px;
background-position:-5px -350px;
z-index:4390;
}
#beecp03{
position:absolute;
top:12px;
left:321px;
width:622px;
height:345px;
background-position:-5px -5px;
z-index:4400;
}
/* --- MONITOR TÁCTICO MAPA (FROSTED AERO GLASS) --- */
#mapa{
position:absolute;
width:390px;
height:515px;
top:105px;
left:95px;
z-index:5000;
background:rgba(255, 255, 255, 0.82);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1.5px solid rgba(255, 255, 255, 0.9);
border-radius:16px;
box-shadow:0 15px 35px rgba(0, 50, 90, 0.12), 0 0 20px rgba(0, 162, 210, 0.15);
overflow:hidden;
display:flex;
flex-direction:column;
box-sizing:border-box;
}
.mapa-header-bar{
background:linear-gradient(90deg, #0284c7 0%, #0369a1 100%);
padding:11px 16px;
border-bottom:none;
display:flex;
justify-content:space-between;
align-items:center;
font-family:'Asap', sans-serif;
font-size:10px;
font-weight:800;
color:#ffffff;
letter-spacing:0.8px;
text-transform:uppercase;
box-sizing:border-box;
flex-shrink:0;
white-space:nowrap;
}
.mapa-iframe-wrap{
flex:1;
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.mapa-iframe{
width:100%;
height:calc(100% + 50px);
margin-bottom:-50px;
border:0;
outline:none;
filter:contrast(1.05) saturate(1.1);
display:block;
}
.mapa-footer-bar{
background:rgba(241, 245, 249, 0.95);
padding:9px 16px;
border-top:1px solid rgba(2, 132, 199, 0.2);
display:flex;
justify-content:space-between;
align-items:center;
font-family:'Asap', sans-serif;
font-size:10px;
font-weight:700;
color:#0369a1;
letter-spacing:1px;
text-transform:uppercase;
box-sizing:border-box;
flex-shrink:0;
}
.mapa-live-radar{
display:inline-flex;
align-items:center;
gap:6px;
color:#16a34a;
font-weight:700;
}
.radar-dot{
width:7px;
height:7px;
border-radius:50%;
background:#16a34a;
box-shadow:0 0 8px #16a34a;
animation:radarPulse 1.8s infinite;
}
@keyframes radarPulse{
0%{transform:scale(0.9); opacity:0.6;}
50%{transform:scale(1.3); opacity:1; box-shadow:0 0 12px #16a34a;}
100%{transform:scale(0.9); opacity:0.6;}
}

/* --- CENTRO DE COMANDO & FORMULARIO (FROSTED AERO GLASS) --- */
#contact-panel{
position:absolute;
width:400px;
top:105px;
left:830px;
z-index:5000;
background:rgba(255, 255, 255, 0.82);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1.5px solid rgba(255, 255, 255, 0.9);
border-radius:16px;
box-shadow:0 15px 35px rgba(0, 50, 90, 0.12), 0 0 20px rgba(0, 162, 210, 0.15);
padding:24px 26px;
box-sizing:border-box;
}

#contactForm{
position:relative;
top:auto;
left:auto;
width:100%;
height:auto;
z-index:2;
margin:0;
padding:0;
}
#contact-form{
position:relative;
width:100%;
z-index:10;
}
#contact-form fieldset{
border:0;
margin:0;
padding:0;
}
.contact-input-wrapper{
position:relative;
margin-bottom:12px;
width:100%;
}
.contact-input-wrapper i{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
color:#0284c7;
font-size:13px;
pointer-events:none;
transition:color 0.25s ease;
z-index:5;
}
.contact-input-wrapper i.fa-comment-dots{
top:14px;
transform:none;
}
#contact-name,
#contact-mail{
width:100%;
height:42px;
padding:0 14px 0 40px;
background:rgba(255, 255, 255, 0.95);
border:1.5px solid rgba(2, 132, 199, 0.28);
border-radius:8px;
font-family:'Asap', sans-serif;
font-size:12px;
color:#0f172a;
box-sizing:border-box;
outline:none;
transition:all 0.25s ease;
margin:0;
box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);
}
#contact-comment{
width:100%;
height:75px;
padding:10px 14px 10px 40px;
background:rgba(255, 255, 255, 0.95);
border:1.5px solid rgba(2, 132, 199, 0.28);
border-radius:8px;
font-family:'Asap', sans-serif;
font-size:12px;
color:#0f172a;
box-sizing:border-box;
outline:none;
resize:none;
transition:all 0.25s ease;
margin:0;
box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);
}
#contact-name:focus,
#contact-mail:focus,
#contact-comment:focus{
border-color:#0284c7;
box-shadow:0 0 14px rgba(2, 132, 199, 0.25), inset 0 1px 3px rgba(0,0,0,0.02);
background:#ffffff;
}
.contact-input-wrapper:focus-within i{
color:#0284c7;
}
#contact-name::placeholder,
#contact-mail::placeholder,
#contact-comment::placeholder{
color:#94a3b8;
font-size:11px;
letter-spacing:0.5px;
}
#btn-send{
position:relative;
top:auto;
left:auto;
width:100%;
height:44px;
margin-top:4px;
background:linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
border:none;
border-radius:8px;
font-family:'Asap', sans-serif;
font-size:13px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
color:#ffffff;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-shadow:0 6px 20px rgba(2, 132, 199, 0.35);
transition:all 0.25s ease;
}
#btn-send:hover{
background:linear-gradient(135deg, #0369a1 0%, #075985 100%);
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(2, 132, 199, 0.45);
}
#btn-send:active{
transform:translateY(0);
}
#aviso-priv{
display:block;
margin-top:12px;
text-align:center;
color:#64748b;
font-size:11px;
text-decoration:none;
transition:color 0.2s ease;
}
#aviso-priv:hover{
color:#0284c7;
text-decoration:underline;
}
#success{
position:relative;
top:auto;
left:auto;
margin-top:10px;
padding:10px 14px;
background:rgba(34, 197, 94, 0.2);
border:1px solid #22c55e;
border-radius:8px;
color:#86efac;
font-size:12px;
font-weight:700;
text-align:center;
display:none;
}
#error{
position:relative;
top:auto;
left:auto;
margin-top:10px;
padding:8px 12px;
background:rgba(239, 68, 68, 0.2);
border:1px solid #ef4444;
border-radius:8px;
color:#fca5a5;
font-size:12px;
font-weight:700;
text-align:center;
display:none;
}
#nubemapa1, #nubemapa2, #form-name, #form-mail, #form-coment, #ico-name, #ico-mail, #ico-coment, #arrow-contact, #btn-skype, #link-skype{
display:none !important;
}
/*-------------------------------------------------------------------------*/
footer{
position:fixed;
bottom:0%;
width:100%;
height:52px;
background:url("images/footer/back-footer.jpg") repeat-x;
z-index:7100;
}
#img-tel{
position:absolute;
top:50%;
margin-top:-15px;
left:10px;
width:30px;
height:30px;
background-position:-372px -381px;
}
#telefono{
position:absolute;
top:16px;
left:45px;
font-size:.95em;
font-weight:bold;
}
#sendemail{
position:absolute;
top:22px;
left:260px;
font-size:.6em;
}
#img-skype{
position:absolute;
top:13px;
left:155px;
width:28px;
height:28px;
background-position:-149px -63px;
}
#llamanos{
position:absolute;
top:16px;
left:185px;
font-size:11px;
font-weight:bold;
}
#via-skype{
position:absolute;
top:26px;
left:185px;
font-size:10px;
font-weight:bold;
}
#img-lcd{
position:fixed;
bottom:26px;
left:50%;
margin:-11px -14px;
width:28px;
height:22px;
background-position:-3px -64px;
}
#img-arrow{
position:fixed;
bottom:24px;
left:50%;
margin-left:-6px;
width:12px;
height:20px;
background-position:-58px -92px;
}
#scroll,#down{
position:absolute;
top:19px;
left:50%;
margin-left:-52px;
font-weight:bold;
font-size: 10px;
}
#down{
margin-left:19px;
}
#engrane-logo{
position:fixed;
bottom:8px;
right:10px;
width:143px;
height:38px;
background-position:-148px -12px;
}
#scroll-down{
	position:fixed;
	left:50%;
}
/*--------------------------animation--------------------------*/
/*.ipad{
    animation-name: ipadAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: ipadAnimation;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: ipadAnimation;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;



}
@-webkit-keyframes ipadAnimation{
    from {top:33px;left:174px;
    	z-index: 3390;
    }
    33% {
    	top:50px;left:50px;
    	-webkit-transform:scale(.8,.8);
    	
    }
    66% {top:55px;
    	left:50px;
    	z-index:3410;
    	
    }
    to {top:83px;left:147px;z-index:3410;
    	-webkit-transform:scale(1,1);
    	
    }    
}*/
/*@-webkit-keyframes ipadAnimation{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 10px);}
    to {-webkit-transform: translate(0, -0px);}    
}*/
/*#siw02{
position:absolute;*/
/*top:33px;*//*83*/
/*left:174px;*//*147*/
/*width:156px;
height:165px;
background-position:-329px -385px;
-webkit-transform:scale(.6,.6);
-moz-transform:scale(.6,.6);
-o-transform:scale(.6,.6);
-ms-transform:scale(.6,.6);
transform:scale(.6,.6);
z-index:3390;
}*/
/* ==========================================================================
   DRON 3D NATURAL EXTRUIDO EN EL CIELO (ABIDRON)
   ========================================================================== */
#drone-extruded-container {
    position: absolute;
    top: 140px;
    left: 50%;
    margin-left: -330px;
    width: 660px;
    height: 480px;
    z-index: 4500;
    perspective: 1200px;
    pointer-events: none;
}

#drone-rig-3d {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg) translateZ(40px);
    transition: transform 0.12s cubic-bezier(0.1, 0.9, 0.3, 1);
}

.drone-depth-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65%;
    height: 55%;
    transform: translate(-50%, -50%) translateZ(-40px);
    background: radial-gradient(ellipse, rgba(0, 243, 255, 0.35) 0%, rgba(212, 175, 55, 0.18) 45%, transparent 75%);
    background: radial-gradient(ellipse, rgba(255, 215, 0, 0.42) 0%, rgba(255, 165, 0, 0.22) 48%, transparent 75%);
    filter: blur(28px);
    pointer-events: none;
    animation: droneGlowPulse 4s infinite alternate ease-in-out;
}

@keyframes droneGlowPulse {
    0% { opacity: 0.4; transform: translate(-50%, -50%) translateZ(-40px) scale(0.92); }
    100% { opacity: 0.8; transform: translate(-50%, -50%) translateZ(-40px) scale(1.1); }
    100% { opacity: 0.85; transform: translate(-50%, -50%) translateZ(-40px) scale(1.1); }
}

.drone-extrude-shadow {
    position: absolute;
    top: 25px;
    left: 15px;
    width: 100%;
    height: 100%;
    background: url('images/abidron/drone-hero.png') no-repeat center center;
    background-size: contain;
    filter: brightness(0) blur(12px);
    opacity: 0.5;
    transform: translateZ(10px);
    pointer-events: none;
}

.drone-chassis {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateZ(50px);
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.45));
    animation: droneForwardFlightNatural 4s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes droneForwardFlightNatural {
    0% {
        transform: translate3d(0, 0px, 50px) rotateX(10deg) rotateY(0deg) rotateZ(0deg);
    }
    28% {
        transform: translate3d(6px, -12px, 64px) rotateX(13deg) rotateY(1.6deg) rotateZ(0.9deg);
    }
    72% {
        transform: translate3d(-7px, 8px, 46px) rotateX(8deg) rotateY(-1.4deg) rotateZ(-1.1deg);
    }
    100% {
        transform: translate3d(0, 0px, 50px) rotateX(10deg) rotateY(0deg) rotateZ(0deg);
    }
}

/* =========================================================
   SISTEMA DE VUELO FRONTAL 3D CONTINUO (CINEMATIC FORWARD FLIGHT)
   ========================================================= */

#forward-flight-sky {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    z-index: 2000;
}

#forward-flight-foreground {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1200px;
    pointer-events: none;
    overflow: hidden;
    perspective: 750px;
    perspective-origin: 50% 45%;
    z-index: 4650;
}

/* Base de Nube Cinemática de Gran Escala */
.flight-cloud {
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    will-change: transform, opacity;
}

/* --- BANCO IZQUIERDO: CAÑÓN DE NUBES AVANZANDO HACIA EL FRENTE --- */
.cloud-left-corridor-a {
    top: -80px;
    left: 50%;
    margin-left: -1300px;
    width: 1700px;
    height: 950px;
    background-image: url("images/back/nube1low.png");
    animation: flightLeftCorridor 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.cloud-left-corridor-b {
    top: -80px;
    left: 50%;
    margin-left: -1300px;
    width: 1700px;
    height: 950px;
    background-image: url("images/back/nube5low.png");
    animation: flightLeftCorridor 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    animation-delay: -3.5s;
}

@keyframes flightLeftCorridor {
    0% {
        transform: translate3d(200px, -60px, -500px) scale(0.65);
        opacity: 0.15;
    }
    20% {
        opacity: 0.9;
    }
    70% {
        opacity: 0.95;
    }
    100% {
        transform: translate3d(-350px, 120px, 400px) scale(1.6);
        opacity: 0;
    }
}

/* --- BANCO DERECHO: CAÑÓN DE NUBES AVANZANDO HACIA EL FRENTE --- */
.cloud-right-corridor-a {
    top: -120px;
    left: 50%;
    margin-left: -200px;
    width: 1650px;
    height: 900px;
    background-image: url("images/back/nube2low.png");
    animation: flightRightCorridor 7.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.cloud-right-corridor-b {
    top: -120px;
    left: 50%;
    margin-left: -200px;
    width: 1650px;
    height: 900px;
    background-image: url("images/back/nube2Glow.png");
    animation: flightRightCorridor 7.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    animation-delay: -3.75s;
}

@keyframes flightRightCorridor {
    0% {
        transform: translate3d(-180px, -60px, -500px) scale(0.65);
        opacity: 0.15;
    }
    20% {
        opacity: 0.9;
    }
    70% {
        opacity: 0.95;
    }
    100% {
        transform: translate3d(380px, 100px, 400px) scale(1.6);
        opacity: 0;
    }
}

/* --- BANCO SUPERIOR (TECHO ATMOSFÉRICO PASANDO POR ENCIMA) --- */
.cloud-top-ceiling-a {
    top: -260px;
    left: 50%;
    margin-left: -700px;
    width: 1400px;
    height: 600px;
    background-image: url("images/back/nube1low.png");
    animation: flightTopCeiling 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.cloud-top-ceiling-b {
    top: -260px;
    left: 50%;
    margin-left: -700px;
    width: 1400px;
    height: 600px;
    background-image: url("images/back/nube5low.png");
    animation: flightTopCeiling 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    animation-delay: -4s;
}

@keyframes flightTopCeiling {
    0% {
        transform: translate3d(0, 0, -450px) scale(0.7);
        opacity: 0.15;
    }
    25% {
        opacity: 0.75;
    }
    75% {
        opacity: 0.8;
    }
    100% {
        transform: translate3d(0, -200px, 350px) scale(1.5);
        opacity: 0;
    }
}

/* --- BANCO INFERIOR (MAR DE NUBES CORRIENDO POR DEBAJO DEL DRON) --- */
.cloud-bottom-deck-a {
    bottom: -150px;
    top: auto;
    left: 50%;
    margin-left: -800px;
    width: 1600px;
    height: 700px;
    background-image: url("images/back/nube1low.png");
    animation: flightBottomDeck 6.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.cloud-bottom-deck-b {
    bottom: -150px;
    top: auto;
    left: 50%;
    margin-left: -800px;
    width: 1600px;
    height: 700px;
    background-image: url("images/back/nube5low.png");
    animation: flightBottomDeck 6.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    animation-delay: -3.25s;
}

@keyframes flightBottomDeck {
    0% {
        transform: translate3d(0, -50px, -450px) scale(0.65);
        opacity: 0.2;
    }
    25% {
        opacity: 0.8;
    }
    75% {
        opacity: 0.85;
    }
    100% {
        transform: translate3d(0, 240px, 350px) scale(1.5);
        opacity: 0;
    }
}

/* --- NIEBLA RÁPIDA DE PRIMER PLANO (CRUZA EL LENTE CON BLUR) --- */
.cloud-lens-speed-1 {
    top: 50px;
    left: 50%;
    margin-left: -600px;
    width: 1200px;
    height: 700px;
    background-image: url("images/back/nube5low.png");
    animation: flightLensSpeed1 5s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
    animation-delay: -1.2s;
}
@keyframes flightLensSpeed1 {
    0% {
        transform: translate3d(80px, -30px, -250px) scale(0.5);
        opacity: 0;
        filter: blur(2px);
    }
    20% {
        opacity: 0.45;
        filter: blur(6px);
    }
    70% {
        opacity: 0.35;
        filter: blur(12px);
    }
    100% {
        transform: translate3d(-350px, 180px, 500px) scale(2.2);
        opacity: 0;
        filter: blur(22px);
    }
}

.cloud-lens-speed-2 {
    top: 100px;
    left: 50%;
    margin-left: -500px;
    width: 1100px;
    height: 650px;
    background-image: url("images/back/nube2low.png");
    animation: flightLensSpeed2 5.5s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
    animation-delay: -3.8s;
}
@keyframes flightLensSpeed2 {
    0% {
        transform: translate3d(-80px, -20px, -250px) scale(0.5);
        opacity: 0;
        filter: blur(2px);
    }
    25% {
        opacity: 0.4;
        filter: blur(6px);
    }
    70% {
        opacity: 0.3;
        filter: blur(14px);
    }
    100% {
        transform: translate3d(320px, -150px, 500px) scale(2.0);
        opacity: 0;
        filter: blur(24px);
    }
}

/* --- ESTELAS DINÁMICAS DE VELOCIDAD AERODINÁMICA --- */
.flight-speed-streak {
    position: absolute;
    top: 360px;
    left: 50%;
    width: 2px;
    height: 140px;
    background: linear-gradient(to bottom, rgba(0, 243, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(0, 243, 255, 0) 100%);
    opacity: 0;
    pointer-events: none;
    transform-origin: top center;
}
.streak-1 {
    transform: rotate(-55deg);
    animation: speedStreak1 2.0s ease-in infinite;
    animation-delay: -0.3s;
}
.streak-2 {
    transform: rotate(55deg);
    animation: speedStreak2 2.3s ease-in infinite;
    animation-delay: -1.1s;
}
.streak-3 {
    transform: rotate(-135deg);
    animation: speedStreak3 2.1s ease-in infinite;
    animation-delay: -1.6s;
}
.streak-4 {
    transform: rotate(135deg);
    animation: speedStreak4 1.9s ease-in infinite;
    animation-delay: -0.7s;
}
@keyframes speedStreak1 {
    0% { transform: rotate(-55deg) translateY(0) scaleY(0.2); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: rotate(-55deg) translateY(480px) scaleY(2.6); opacity: 0; }
}
@keyframes speedStreak2 {
    0% { transform: rotate(55deg) translateY(0) scaleY(0.2); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: rotate(55deg) translateY(480px) scaleY(2.6); opacity: 0; }
}
@keyframes speedStreak3 {
    0% { transform: rotate(-135deg) translateY(0) scaleY(0.2); opacity: 0; }
    30% { opacity: 0.75; }
    100% { transform: rotate(-135deg) translateY(420px) scaleY(2.3); opacity: 0; }
}
@keyframes speedStreak4 {
    0% { transform: rotate(135deg) translateY(0) scaleY(0.2); opacity: 0; }
    30% { opacity: 0.75; }
    100% { transform: rotate(135deg) translateY(420px) scaleY(2.3); opacity: 0; }
}

/* WhatsApp Flotante */
.whatsapp-float-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.5);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.7);
    color: #fff;
}

/* Ocultar nubes estáticas 2D heredadas para que el cielo 3D dinámico cubra toda la página de forma limpia y continua */
#nuber01, #nuber02, #nubew01, #nubew-01, #nubew02, #nube0, #nubes01, #nubes02, #nubes03, #nubes04 {
    display: none !important;
}