html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] { -moz-appearance:textfield; }
html, body{padding:0;margin:0;width: 100%;height: 100%;background-color: #001149;font-family: 'Open Sans', sans-serif}
*{box-sizing:border-box;}
a{color: inherit;text-decoration: none;}
section{overflow:hidden;width: 100vw;position: relative;}
body.open{overflow: hidden;}
.anima{transition: .7s cubic-bezier(.39,.51,.13,1.01);will-change: transform, opacity}
.hideme{opacity: 0}
header{
position:fixed;
top:50px;left: 0;
width: 100%;
padding: 20px 0;
z-index: 999;
transition: .7s cubic-bezier(.39,.51,.13,1.01);
}
@media screen and (max-width: 1366px) {
header {top:0;}
}
header .wp{
max-width: 1600px;
padding: 0 20px;
margin: 0 auto;
position: relative;
min-height: 62px;
}
header.init{opacity: 0;top:0;}
header h1 img{filter: drop-shadow(5px 5px 7px rgba(0,0,0,0.1));}
header .lang{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 100px;
font-size: 20px;
color: #fff;
}
header .lang a,
header .lang span {
padding: 0 5px;
}
header .lang a.active,
header .lang span.active {
font-weight: 800;
text-decoration: underline;
}
@media screen and (max-width: 780px) {
header .lang{
right: 70px;
font-size: 16px;
}
}
.floating{
position: absolute;
top: 48%;
right: 0;
-webkit-transform: translateY(0px) translateZ(0);
transform: translateY(0px) translateZ(0);
-webkit-animation: float 5s ease-in-out infinite;
animation: float 5s ease-in-out infinite;
z-index: 2;
width: 300px
}
@media screen and (max-width:1366px) {
.floating{display: none;}
}
.mascara {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201000%20566.6%22%20style%3D%22enable-background%3Anew%200%200%201000%20566.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%230047BA%3B%7D%20%3C%2Fstyle%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M-9-1h1012v500.9c0%2C0-95.3-127.3-255.1-127.3C585.2%2C372.6%2C377.7%2C486%2C220.7%2C486C87.4%2C486-9%2C431.3-9%2C431.3V-1z%22%2F%3E%20%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201000%20566.6%22%20style%3D%22enable-background%3Anew%200%200%201000%20566.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%230047BA%3B%7D%20%3C%2Fstyle%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M-9-1h1012v500.9c0%2C0-95.3-127.3-255.1-127.3C585.2%2C372.6%2C377.7%2C486%2C220.7%2C486C87.4%2C486-9%2C431.3-9%2C431.3V-1z%22%2F%3E%20%3C%2Fsvg%3E");
z-index: 3;
position: relative;
overflow: hidden;
width: 100%;
}
.mascara.interna{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201012%20244%22%20style%3D%22enable-background%3Anew%200%200%201012%20244%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%230047BA%3B%7D%20%3C%2Fstyle%3E%20%3Ctitle%3Emask2%3C%2Ftitle%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C0h1012v244c0%2C0-95.3-87.4-255.1-87.4c-162.7%2C0-370.2%2C77.9-527.2%2C77.9C96.4%2C234.5%2C0%2C196.9%2C0%2C196.9V0z%22%2F%3E%20%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201012%20244%22%20style%3D%22enable-background%3Anew%200%200%201012%20244%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%230047BA%3B%7D%20%3C%2Fstyle%3E%20%3Ctitle%3Emask2%3C%2Ftitle%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C0h1012v244c0%2C0-95.3-87.4-255.1-87.4c-162.7%2C0-370.2%2C77.9-527.2%2C77.9C96.4%2C234.5%2C0%2C196.9%2C0%2C196.9V0z%22%2F%3E%20%3C%2Fsvg%3E");
}
.mascara div#sliders{
width: 100%;
padding-top: 56.6%;
background:#0047ba;
background-image: url("../img/centro-de-datos-bgaming.jpg");
background-size: cover;
position: relative;
transition: 20s cubic-bezier(.39,.51,.13,1.01);
transform: scale(1) translateZ(0);
will-change: transform
}
.mascara div#sliders.empresa{background-image: url("../img/equipo-bgaming-centro-de-operaciones.jpg");}
.mascara.interna div#sliders{padding-top: 24.1%;}
.mascara ul{
position: absolute;
width: 1280px;
padding: 0 40px;
top:35%;left: 50%;
transform: translate(-50%,-50%) translateZ(0);
color: #FFF;
}
.mascara ul li h2{
font-size: 40px;
font-weight: 300;
line-height: 1.3;
}
.mascara ul li h2 strong{font-weight: 700}
.mascara ul li h2 span{
transition: 1s cubic-bezier(.39,.51,.13,1.01);
display: block;
transition-delay: .3s;
opacity: 0;transform: translateY(30px) translateZ(0);
will-change: transform, opacity
}
.mascara ul li h2 span:nth-child(2){
transition-delay: .6s
}
.mascara ul li h2 span:nth-child(3){
transition-delay: 1s
}
.mascara ul li.flex-active-slide span{opacity: 1;transform: translateY(0px) translateZ(0);}
.mascara .flex-direction-nav{display: none;}
.mascara ol.flex-control-nav{
position: absolute;
width: 100%;
width: 1180px;
top:50%;left: 50%;
transform: translateX(-50%);
margin-top: 50px;
display: flex;
align-items: center;
}
.mascara ol.flex-control-nav li{
display: inline-block;
margin-right: 10px;
}
.mascara ol.flex-control-nav li a{
width: 10px;
height: 10px;
display: block;
border-radius: 10px;
background-color: rgba(255,255,255,.4);
border:2px solid rgba(255,255,255,0);
transition: .5s cubic-bezier(.39,.51,.13,1.01);
font-size: 0;
}
.mascara ol.flex-control-nav li a.flex-active{
border-color: rgba(255,255,255,1);
background-color: transparent;
width: 14px;
height: 14px;
}
.wpWaves{
position: absolute;
z-index: 1;
top: 0;left: 0;
width: 100%;
padding-top: 56.25%;
z-index: 0;
}
.wpWaves.interna{padding-top: 34%;}
.wpWaves .wavet {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%223553px%22%20height%3D%22688px%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22PSgrad_0%22%20x1%3D%220%25%22%20x2%3D%22100%25%22%20y1%3D%220%25%22%20y2%3D%220%25%22%3E%20%3Cstop%20offset%3D%2236%25%22%20stop-color%3D%22rgb%280%2C15%2C58%29%22%20stop-opacity%3D%221%22%20%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22rgb%280%2C15%2C58%29%22%20stop-opacity%3D%221%22%20%2F%3E%20%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22url%28%23PSgrad_0%29%22%20d%3D%22M3553.000%2C0.000%20L3550.000%2C688.000%20C3550.000%2C688.000%203335.727%2C527.748%203176.148%2C527.748%20C3016.568%2C527.748%202817.762%2C672.569%202677.428%2C672.569%20C2537.094%2C672.569%202423.497%2C533.684%202260.641%2C533.684%20C2097.784%2C533.684%202064.275%2C688.000%201801.106%2C688.000%20C1792.676%2C688.000%201784.483%2C687.895%201776.500%2C687.699%20C1768.517%2C687.895%201760.324%2C688.000%201751.894%2C688.000%20C1488.725%2C688.000%201455.216%2C533.684%201292.359%2C533.684%20C1129.503%2C533.684%201015.906%2C672.569%20875.572%2C672.569%20C735.238%2C672.569%20536.432%2C527.748%20376.852%2C527.748%20C217.273%2C527.748%203.000%2C688.000%203.000%2C688.000%20L-0.000%2C0.000%20L1776.500%2C3.450%20L3553.000%2C0.000%20Z%22%2F%3E%20%3C%2Fsvg%3E") repeat-x;
position: absolute;
bottom: 80px;
width: 120%;
height: 500px;
background-position:80% bottom;
background-size:cover;
z-index: 1;
will-change: transform
}
.wpWaves .wavet:nth-child(1){transform: scaleX(-1) rotate(-3deg) translateX(0);}
.wpWaves .wavet:nth-child(2) {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%223553px%22%20height%3D%22688px%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22PSgrad_0%22%20x1%3D%220%25%22%20x2%3D%22100%25%22%20y1%3D%220%25%22%20y2%3D%220%25%22%3E%20%3Cstop%20offset%3D%2220%25%22%20stop-color%3D%22rgb%288%2C51%2C149%29%22%20stop-opacity%3D%221%22%20%2F%3E%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22rgb%281%2C20%2C70%29%22%20stop-opacity%3D%221%22%20%2F%3E%20%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22url%28%23PSgrad_0%29%22%20d%3D%22M3553.000%2C0.000%20L3550.000%2C688.000%20C3550.000%2C688.000%203335.727%2C527.748%203176.148%2C527.748%20C3016.568%2C527.748%202817.762%2C672.569%202677.428%2C672.569%20C2537.094%2C672.569%202423.497%2C533.684%202260.641%2C533.684%20C2097.784%2C533.684%202064.275%2C688.000%201801.106%2C688.000%20C1792.676%2C688.000%201784.483%2C687.895%201776.500%2C687.699%20C1768.517%2C687.895%201760.324%2C688.000%201751.894%2C688.000%20C1488.725%2C688.000%201455.216%2C533.684%201292.359%2C533.684%20C1129.503%2C533.684%201015.906%2C672.569%20875.572%2C672.569%20C735.238%2C672.569%20536.432%2C527.748%20376.852%2C527.748%20C217.273%2C527.748%203.000%2C688.000%203.000%2C688.000%20L-0.000%2C0.000%20L1776.500%2C3.450%20L3553.000%2C0.000%20Z%22%2F%3E%20%3C%2Fsvg%3E") repeat-x;
background-position:0% bottom;
transform: translateX(0);
opacity: 1;
}
.blocks.dwnPDF{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
}
.blocks.dwnPDF .block{
margin:15px 30px;
height: 60px;
padding-left: 60px;
background-image: url("../img/icono-descarga-pdf.png");
background-repeat: no-repeat;
background-position: left center;
font-size: 14px;
color: #b4bcd7;
display: flex;
align-items: center;
}
@media (max-width: 600px) {
.blocks.dwnPDF .block{width: 100%;}
}
@-webkit-keyframes waveT {
0% {
background-position:0% bottom;
}
100% {
background-position:10% bottom;
}
}
@keyframes waveT {
0% {
background-position:0% bottom;
}
100% {
background-position:10% bottom;
}
}
#bloque1{position: relative;}
#bloque1 .gif{width: 55%;}
#bloque1 .copy{
position: absolute;
top:30%;left: 50%;
transform: translateY(-50%) translateY(10%);
max-width: 45%;
margin: 0 auto;
color: #FFF
}
#bloque1.empresa .copy.politica {
top: auto;
}
#bloque1 .copy p{font-size: 18px;line-height: 1.4;font-weight: 400}
h4{color: #00aeef;font-weight: 700;font-size:14px;text-transform: uppercase;}
h3{font-weight: 300;font-size:48px;margin:25px 0;}
a.btn{
background: #0047ba;
height: 60px;
line-height: 60px;
display: block;
width: 260px;
position: relative;
border-radius: 30px;
padding: 0 30px;
font-size: 16px;
font-weight: 700;
margin-top: 50px;
color: #FFF;
overflow:hidden;
}
a.btn:after{
content: '';
position: absolute;
right: 30px;
top:50%;
width: 5px;
height: 5px;
border:solid #FFF;
border-width: 1px 1px 0 0;
transform: rotate(45deg) translateY(-50%) translateZ(0);
}
a.btn:before{
content: '';
top:50%;
left: -100%;
position: absolute;
width: 200%;
height: 300%;
border-radius: 50% 50%;
background: -moz-linear-gradient(left, rgba(1,179,240,1) 0%, rgba(112,216,255,1) 78%, rgba(112,216,255,1) 78%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(1,179,240,1) 0%,rgba(112,216,255,1) 78%,rgba(112,216,255,1) 78%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(1,179,240,1) 0%,rgba(112,216,255,1) 78%,rgba(112,216,255,1) 78%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
transform: translate(-50%,-50%) rotate(-5deg) translateZ(0);
transition: .4s cubic-bezier(.39,.51,.13,1.01);
will-change: transform
}
a.btn:hover:before{
left: 50%;
transform: translate(-50%,-50%) rotate(5deg) translateZ(0);
}
a.btn:hover{box-shadow: 0 0 30px rgba(0,174,239,0.6);}
a.btn span{position: relative;z-index: 1;}
h4.hideme,
h3.hideme,
p.hideme,
.btn.hideme{transform: translateY(30px);}
.copy h3{transition-delay: .3s}
#bloque1 .copy p{transition-delay: .5s;}
#bloque1 .copy .btn{transition-delay: .5s;}
#bloque2{
max-width: 1400px;
padding: 0 20px;
display: flex;
padding: 100px 0;
margin: auto;
align-items: center;
}
#bloque2 .mid{
width: 50%;
}
#bloque2 .mid a.btn{margin-right: auto;margin-left: auto;clear: both;}
#bloque2 .mid .copy{
max-width: 400px;
margin:auto;
position: relative;
z-index: 1
}
#bloque2 .mid > .copy h3{color:#FFF;}
#bloque2 .mid .block .copy{margin-top: 10px}
#bloque2 .mid .block.b01{
background-color: #FFF;
border-radius: 160px 0 0 0;
margin: 40px 0 40px;
float: right;
}
#bloque2 .mid .block.b02{
background-color: #0047ba;
border-radius:  0 160px 0 0;
margin-top: 110px
}
#bloque2 .mid .block.b03{
background-color: #00aeef;
border-radius:  0 0 160px 0;
}
#bloque2 .mid .block{
width: 100%;
height: 380px;
overflow:hidden;
position: relative;
transition: .7s cubic-bezier(.39,.51,.13,1.01);
}
#bloque2 .mid .block.hideme{opacity:1;width: 0;}
#bloque2 .mid .block .copy{
position: absolute;
width: 400px;
left: 50%;top:50%;
transform: translate(-50%,-50%) translateZ(0);
}
#bloque2 .mid .block h3{font-size: 28px;font-weight: 700;margin-top: 0;position: relative;}
#bloque2 .mid .block h3{transition-delay: .7s }
#bloque2 .mid .block p{transition-delay: .9s}
#bloque2 .mid .block h3:before{
content: '';
display: inline-block;
width: 35px;
height: 2px;
background-color: #FFF;
margin-right: 20px;
position: relative;
top:-10px;
}
#bloque2 .mid .block h3:after{
content: '00';
position: absolute;
right: calc(100% + 20px);
top:55%;
transform: translateY(-50%) translateZ(0);
font-family: 'Comfortaa', cursive;
font-size: 70px;
letter-spacing: -.06em;
font-weight: 300
}
#bloque2 .mid .block p{font-size: 16px;font-weight: 400;line-height: 1.4}
#bloque2 .mid .block.b01 h3{color: #0047ba}
#bloque2 .mid .block.b01 h3:before{background-color: #0047ba}
#bloque2 .mid .block.b01 h3:after{content:'01';}
#bloque2 .mid .block.b02 h3:after{content:'02';}
#bloque2 .mid .block.b03 h3:after{content:'03';}
#bloque2 .mid .block.b02,
#bloque2 .mid .block.b03{color: #FFF}
#bloque2 .mid .block:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
top:50%;left:50%;
transform: translate(-50%,-50%) translateZ(0);
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
mix-blend-mode: multiply;
opacity: 0;
transition: all 1s cubic-bezier(.06,.42,.38,.88);
transform-origin: left center;
will-change: transform, opacity
}
#bloque2:not(.servicios) .mid .block:hover:after{transform: scale(1.1) translate(-50%,-50%) translateZ(0);opacity: .5 }
#bloque2:not(.servicios) .mid .block.b01:after{background-image: url("../img/red-global-de-datos.jpg");filter: grayscale(100%);}
#bloque2:not(.servicios) .mid .block.b02:after{background-image: url("../img/satelite-de-comunicaciones.jpg")}
#bloque2:not(.servicios) .mid .block.b03:after{background-image: url("../img/centro-de-procesamiento-servidores.jpg")}
#bloque2:not(.servicios) .mid .block.b01:hover:after{opacity: .05}
footer.ocean {
height: 5%;
width: 100%;
position: relative;
margin-top: 350px;
margin-bottom: 30px;
background: #0047ba;
}
.ocean .wave2 {
background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201600%20198%22%20style%3D%22enable-background%3Anew%200%200%201600%20198%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%230047BA%3B%7D%20%3C%2Fstyle%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M1600%2C121C1289%2C121%2C1190.1-0.2%2C789%2C0C389%2C0%2C289%2C121%2C0%2C121v77h1600C1600%2C198%2C1600%2C150%2C1600%2C121z%22%2F%3E%20%3C%2Fsvg%3E") repeat-x;
position: absolute;
top: -180px;
width: 6400px;
height: 190px;
-webkit-animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
animation-direction: alternate;
will-change: transform
}
.ocean .wave2:nth-of-type(2) {
background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201600%20198%22%20style%3D%22enable-background%3Anew%200%200%201600%20198%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3Aurl%28%23SVGID_1_%29%3B%7D%20%3C%2Fstyle%3E%20%3ClinearGradient%20id%3D%22SVGID_1_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22600.875%22%20y1%3D%223.9308%22%20x2%3D%22600.875%22%20y2%3D%225.0404%22%20gradientTransform%3D%22matrix%28-1600%200%200%20198.0004%20962200%20-800.0037%29%22%3E%20%3Cstop%20offset%3D%220%22%20style%3D%22stop-color%3A%230073D0%3Bstop-opacity%3A0.25%22%2F%3E%20%3Cstop%20offset%3D%220.1593%22%20style%3D%22stop-color%3A%230073D0%3Bstop-opacity%3A0.19%22%2F%3E%20%3Cstop%20offset%3D%220.2613%22%20style%3D%22stop-color%3A%230073D0%3Bstop-opacity%3A0.16%22%2F%3E%20%3Cstop%20offset%3D%220.3473%22%20style%3D%22stop-color%3A%230073D0%3Bstop-opacity%3A0.13%22%2F%3E%20%3Cstop%20offset%3D%220.4243%22%20style%3D%22stop-color%3A%230073D0%3Bstop-opacity%3A0.1%22%2F%3E%20%3Cstop%20offset%3D%220.4954%22%20style%3D%22stop-color%3A%230073D0%3Bstop-opacity%3A8.000000e-02%22%2F%3E%20%3Cstop%20offset%3D%220.5621%22%20style%3D%22stop-color%3A%230073D0%3Bstop-opacity%3A5.000000e-02%22%2F%3E%20%3Cstop%20offset%3D%220.6255%22%20style%3D%22stop-color%3A%230073D0%3Bstop-opacity%3A3.000000e-02%22%2F%3E%20%3Cstop%20offset%3D%220.6845%22%20style%3D%22stop-color%3A%23E8EEF7%3Bstop-opacity%3A1.000000e-02%22%2F%3E%20%3Cstop%20offset%3D%220.7119%22%20style%3D%22stop-color%3A%23FFFFFF%3Bstop-opacity%3A0%22%2F%3E%20%3C%2FlinearGradient%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M1600%2C121C1289%2C121%2C1190.1-0.2%2C789%2C0C389%2C0%2C289%2C121%2C0%2C121v77h1600C1600%2C198%2C1600%2C150%2C1600%2C121z%22%2F%3E%20%3C%2Fsvg%3E") repeat-x;
top: -175px;
-webkit-animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
animation-direction: alternate-reverse;
opacity: 1;
}
footer .wp{
max-width: 1180px;
padding: 0 20px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height: 300px;
padding: 50px 0;
}
footer .wp ul{transform: translateX(-4px) translateZ(0);}
footer .wp ul li{display: inline-block;color: #dbdbdb;margin:0 10px; font-size: 80%; transition: .3s cubic-bezier(0.36, 0.45, 0.63, 0.53)}
footer .wp ul li:hover{color:#FFF;text-decoration: underline;}
footer .dire{
width: 100%;
font-size: 14px;
line-height: 2;
text-align: center;
opacity: .7;
color: #FFF;
}
footer .dire a{transition: ease-out 0.3s;}
footer .dire a:hover{color: #001149}
footer .white{background-color: #0047ba}
footer .white .wp{
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
justify-items: center;
gap: 20px;
max-width: 800px;
margin: 0 auto;
padding: 0;
}
footer .white .wp a:nth-child(1){ grid-column: span 1; }
footer .white .wp a:nth-child(2){ grid-column: span 2; }
footer .white .wp a:nth-child(3){ grid-column: span 1; }
footer .white .wp img{
width: 100%;
height: auto;
object-fit: contain;
max-width: 200px;
}
footer .white .wp a:nth-child(2) img{
max-width: 90%; /* que aproveche las 2 columnas completas */
}
header #burger{
padding:2px 0px;
position: absolute;
padding-left: 0;
display: block;
cursor: pointer;
bottom:2px;right: 21px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 30px;
background-color: #FFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
header #burger i{
width: 24px;
height: 3px;
background-color: #0047ba;
margin:2px 0;
display: block;
transition: ease-out 0.3s;
top:0;
position: relative;
}
header #burger.open{background-color: #0047ba;}
header #burger.open i{background-color: #ffffff;will-change: transform}
header #burger.open i:nth-child(2){transform: scale(2) translateZ(0);opacity: 0}
header #burger.open i:nth-child(1){transform: rotate(45deg) translateZ(0);top:7px;}
header #burger.open i:nth-child(3){transform: rotate(-45deg) translateZ(0);top:-7px;}
nav{
position: fixed;
height: 100vh;
width: 100%;
overflow:hidden;
top:0%;left:-100%;
transition: .3s cubic-bezier(.39,.51,.13,1.01);
background-color:#0047ba;
z-index: 998;
display: flex;
}
nav > div{
display: flex;
align-items: flex-start;
justify-content: center;
height: 100%;
padding-left: 4%
}
nav > div#nav{
width: 35%;
flex-direction: column;
}
nav > div#nav > a,
nav > div#nav > div{width: 250px;position: relative;color: #ffffff;}
nav > div#nav > a{
font-size: 28px;
font-weight: 100;
white-space: nowrap;
margin: 15px 0;
}
nav > div#nav > div{
font-size: 16px;
line-height: 1.4;
white-space: nowrap;
margin-top: 60px;
}
nav > div#nav > div a{text-decoration: underline;}
nav > div#nav > a sup{
position: absolute;
top:-10px;
left: -25px;
font-size: 14px;
transition: ease-out 0.3s;
opacity: 0
}
nav > div#nav a:hover sup{opacity: 1}
nav div.contacto.mobile{display: none;}
.mobile{display: none !important;}
nav div.contacto{
background: #FFF;
width: 65%;
opacity: 0;
transition: ease-out 0.4s
}
nav div.contacto.mobile{display: none;}
nav div.contacto .wpForm{max-width: 625px;margin: auto;padding: 0 30px;}
nav div.contacto .wpForm h3{
font-size: 48px;
font-weight: 100;
white-space: nowrap;
margin-bottom:30px;
color: #0047ba;
position: relative;
}
nav div.contacto .wpForm p{
font-size: 18px;
color: #202020;
margin-bottom: 30px
}
nav div.contacto .wpForm h3 sup{
position: absolute;
top:-10px;
left: -35px;
font-size: 24px;
}
nav div.contacto form{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
nav div.contacto form input,
nav div.contacto form textarea,
nav div.contacto form select{
-webkit-appearance:none;
-moz-appearance:none;
background-color: transparent;
border:none;
padding: 0;
margin: 0;
border-radius: 0;
resize: none;
outline: none;
width: 100%;
border-bottom: 2px solid #9e9e9e;
color: #9e9e9e;
margin-bottom: 20px;
height: 50px;
text-transform: uppercase;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
}
nav div.contacto form input{width: 49%;}
nav div.contacto form input:valid,
nav div.contacto form textarea:valid,
nav div.contacto form select:valid,
nav div.contacto form input:focus,
nav div.contacto form textarea:focus,
nav div.contacto form select:focus{border-bottom: 2px solid #00aeef;color: #0047ba}
nav div.contacto form button{
-webkit-appearance:none;
-moz-appearance:none;
background-color: rgba(1,174,239,1);
border:none;
padding: 0;
margin: 0;
resize: none;
outline: none;
border-radius:60px;
font-family: 'Open Sans', sans-serif;
height: 60px;
font-size: 16px;
color: #ffffff;
font-weight: 800;
padding: 0 30px;
cursor: pointer;
position: relative;
transition: ease-out 0.3s;
display: flex;
align-items: center;
}
nav div.contacto form button i{font-size:25px;transition: ease-out 0.4s;opacity: 0;display: inline-block;}
nav div.contacto form button:hover{
background: -webkit-linear-gradient(bottom left, rgba(1,174,239,1) 0%, rgba(101,213,254,1) 100%);
background: -o-linear-gradient(bottom left, rgba(1,174,239,1) 0%, rgba(101,213,254,1) 100%);
background: linear-gradient(to top right, rgba(1,174,239,1) 0%, rgba(101,213,254,1) 100%);
}
nav div.contacto form button:hover i{margin-left: 30px;opacity: 1}
nav div.contacto form .space{opacity: 0;}
nav.open{
width: 100%;
opacity: 1;
left: 0;top: 0;
border-radius: 0%;
}
@media (min-width: 1100px){
nav > div#nav > a:first-child{transition-delay: .2s}
nav > div#nav > a:nth-child(2){transition-delay: .4s;}
nav > div#nav > a:nth-child(3){transition-delay: .6s;}
nav > div#nav > a:nth-child(4){transition-delay: .8s;}
nav > div#nav > a:nth-child(5){transition-delay: 1s;}
nav > div#nav > a:nth-child(6){transition-delay: 1.2s;}
nav > div#nav > a:nth-child(7){transition-delay: 1.4s;}
nav > div#nav > a:nth-child(8){transition-delay: 1.6s;}
nav > div#nav div#info{transition: ease-out .5s;transition-delay: 1.1s;opacity: 0;transform: translateY(20px)}
nav > div#nav > a,
nav div.contacto .wpForm{transition: ease-out .5s;opacity: 0;transform: translateY(20px);}
nav.open div.contacto .wpForm,
nav.open > div#nav > a,
nav.open > div#nav div#info{opacity: 1;transform: translateY(0px)}
}
#lottie08{position: absolute;width:50%;top: -80px;left: 50%;transform: translateX(-50%) translateZ(0);z-index: 4}
#lottie.servicios{position: absolute;width:50%;top:-150px;left: 50%;transform: translateX(-50%) translateZ(0);z-index: 4}
#bloque1.empresa{margin:0 0 200px;}
#bloque1.empresa > .img{
position: relative;
left: 23%;
transform: translateX(-50%) translateZ(0);
transition: ease-out 0.4s;
width: 50%;
}
#bloque1.politica > .img {
transform: translateX(-50%) translateY(-50%) translateZ(0);
}
#bloque1.empresa .copy{top:50%;}
#bloque1.empresa .copy p{margin-bottom: 20px;}
#bloque0{text-align: center;color: #FFF;position: relative;z-index: 9;margin-top: 150px;}
#bloque0.empresa{margin-top: 140px}
#bloque0 .copy.politica p{text-align: left; margin: 30px auto;}
#bloque0 .copy.politica p sup {
position: absolute;
top: -10%;
left: -5%;
display: block;
color: #0047ba;
font-size: 200%;
}
#bloque0 .copy{max-width: 850px;margin: auto;}
#bloque0 .copy p {
font-size: 18px;
line-height: 1.4;
font-weight: 400;
}
#bloque0 .copy ul, #bloque0 .copy ol {
text-align: left;
margin-left: 40px;
margin-right: 40px;
}
#bloque0 .copy ul li, #bloque0 .copy ol li {
line-height: 1.4;
margin-bottom: 1em;
}
#bloque0 .copy ul li::before {
content: "\2022";
color: #0047ba;
font-size: 1em;
font-weight: 800;
display: inline-block;
width: 1em;
margin-left: -1em;
}
#bloque0 .copy ol li::marker {
color: #0047ba;
font-weight: 600;
}
#bloque0 > img{position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%) translateZ(0);}
#bloqueEmpresa{
background: #fff;
margin: 80px;
margin-right: 0;
border-radius: 100px 0 ;
}
#bloqueEmpresa .wrap{
padding: 100px 0;
max-width: 1100px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#bloqueEmpresa .wrap h4,
#bloqueEmpresa .wrap h3{width: 100%;}
#bloqueEmpresa .wrap h3{margin-bottom:60px }
#bloqueEmpresa .wrap .cols{
width: 560px;
color: #1d1d1d;
line-height: 1.4;
}
#bloqueEmpresa p{margin-bottom: 20px;transition-delay:.4s }
#bloqueEmpresa .wrap .cols.m{width: 395px;}
#bloqueEmpresa .wrap .cols.l span{
color: #0047ba;
font-size: 100px;
display: block;
text-align: center;
text-transform: uppercase;
font-family: 'Comfortaa';
font-weight: 300;
margin-top: 60px
}
#bloqueEmpresa .wrap .cols.l span small{
display: block;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight: 800
}
#bloqueEmpresa .wpImage{
background-image: url("../img/fondo-bloque-empresa.jpg");
background-size: cover;
background-position: center;
color: #FFF;
margin-right: 80px;
border-radius: 0 0 100px 0;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
#bloqueEmpresa .wpImage .copy{
width: 100%;
max-width: 1100px;
position: relative;
left: 40px
}
#bloqueEmpresa .wpImage .copy h4{color: #FFF}
#bloqueEmpresa .wpImage .copy h3{margin-bottom: 40px}
#bloqueEmpresa .wpImage .copy p{
max-width: 560px;
line-height: 1.4;
}
#bloqueEmpresa .clients{
padding-bottom: 150px;
max-width: 1100px;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
#bloqueEmpresa .clients h3{width: 100%;}
#bloqueEmpresa .clients img:nth-child(3){transition-delay: 0.2s;}
#bloqueEmpresa .clients img:nth-child(4){transition-delay: 0.4s;}
#bloqueEmpresa .clients img:nth-child(5){transition-delay: 0.6s;}
#bloqueEmpresa .clients img:nth-child(6){transition-delay: 0.8s;}
#bloqueEmpresa .clients img:nth-child(7){transition-delay: 1s;}
#bloqueEmpresa .clients img.hideme{transform: translateY(20px) translateZ(0);}
#bloqueEmpresa p.hideme{transform: translateY(30px) translateZ(0);}
#bloque1.empresa > img.hideme{transform: translateX(-60%) translateZ(0);}
@media (min-width: 1600px) {
#bloqueEmpresa{margin:140px;margin-right: 0;border-radius: 140px 0;}
#bloqueEmpresa .wpImage{margin-right: 140px}
}
#bloque0.servicios{
text-align: left;
}
#bloque0.servicios .copy{display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 1200px;padding: 0 20px}
#bloque0.servicios .copy h3,
#bloque0.servicios .copy h4{width: 100%;}
#bloque0.servicios p{
width: 50%;
max-width: 580px
}
#bloque0.servicios p:last-child{width: 35%;max-width: 390px}
#bloque2 .mid .copy{margin-top: 60px;}
#bloque2.servicios .mid .block.b02{margin-top: 0}
#bloque2.servicios .mid .block.b01{
background-color: transparent;
color: #fff;
margin:0;
}
#bloque2.servicios .mid .block.b01 h3 {color: #FFF;}
#bloque2.servicios .mid .block.b01 h3:before{background-color: #FFF}
#bloque2.servicios .mid .block h3.bs02:after{content: '02'}
#bloque2.servicios .mid .block h3.bs03:after{content: '03'}
#bloque2.servicios .flex-control-nav{
position: absolute;
bottom: -30px;
left: 0;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 0;
}
#bloque2.servicios .flex-control-nav li{width: 12px;margin-right: 5px;}
#bloque2.servicios .flex-control-nav li a{
display: block;
width: 10px;
height: 10px;
border-radius: 10px;
border:2px solid #FFF;
margin: 0 auto;
transition: ease-out 0.2s
}
#bloque2.servicios .flex-control-nav li a.flex-active{background: #FFF;width: 12px;height: 12px;}
#bloque2.servicios #counter .flex-control-nav,
#bloque2.servicios .flex-direction-nav{display: none;}
#bloque2.servicios .mid{position: relative;}
#bloque2.servicios .mid .bgBloque{
width: 50vw;
height: 100%;
transition: ease-out 0.3s;
background-color: #000f3a;
position:absolute;right: 0;
top: 0
}
#bloque2.servicios .mid .bgBloque.hideme{height: 0}
#bloque2.servicios .block.b01 .copy{margin-top: 0}
#bloque2.servicios .block.b02 .copy{
max-width: 100%;
width: 100%;
text-align: center;
margin-top: 0
}
#bloque2.servicios .block.b02 .num{
font-size: 100px;
font-family: 'Comfortaa', sans-serif;
transition: ease-out 0.3s;
transition-delay:.5s
}
#bloque2.servicios .block.b02 .num.hideme{transform: translateY(20px) translateZ(0);}
#bloque2.servicios .block.b03{
background-image: url("../img/fondo-bloque-servicios.jpg");
background-size: cover;
background-position: center;
transition-delay: .2s;
}
#infra .wp{
margin:auto;
max-width: 1200px;
width: 100%;
color: #FFF;
}
#infra .mid{
padding: 25px;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
#infra .mid > div{width: 50%;transition: ease-out 0.3s;position: relative;}
#infra .mid > div.img{height: 280px}
.animaListado{position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);width: 100%}
#infra .mid h5{
font-size: 28px;
margin-bottom: 30px;
transition: ease-out 0.3s;
transition-delay: .3s;
}
#infra .mid p{
line-height: 1.5;
color: #b4bcd7;
transition: ease-out 0.3s;
transition-delay: .6s;
}
#infra .texto.hideme h5,
#infra .texto.hideme p{transform: translateY(25px) translateZ(0);opacity: 0}
#infra .img.hideme{transform: translateX(45px) translateZ(0);}
#infra .mid:nth-child(even) .img.hideme{transform: translateX(-45px) translateZ(0);}
#infra .mid p span{color: #FFF;}
#infra .full{width: 100%;padding: 25px;margin-bottom: 30px;}
#infra h3{transition-delay: .2s;}
#infra small{display: block;transition-delay: .4s}
#infra small.hideme{transform: translateY(20px) translateZ(0);}
#step{
background: #FFF;
border-radius: 0 0 250px 0;
padding: 100px 0 150px;
position: relative;
z-index: 1;
}
#step .wp{
margin:auto;
max-width: 1200px;
width: 100%;
color: #FFF;
display: flex;
flex-wrap: wrap;
align-items: center;
}
#step .wp h3{color: #001149;transition-delay: .2s}
#step .wp h5{color: #1d1d1d;font-size: 18px;font-weight: 500;margin: 30px 0;line-height: 1.3;transition-delay: .4s}
#step .wp p{
font-size: 16px;
line-height: 1.5;
color: #1d1d1d;
transition-delay: .6s
}
#step .wp .full{
text-align: center;
width: 100%;
}
#step .wp .full p{
max-width: 730px;
margin:20px auto;
}
#step .wp .full .graph .lines{
position: relative;
height: 168px;
margin: 30px 0;
}
#step .wp .full .graph h5{
font-size: 18px;
color: #000f3a;
margin-top: 50px
}
#step .wp .full .graph .lines i{background-color: #bec3d0;position: absolute;transition: ease-out 0.4s;transition-delay:.2s; }
#step .wp .full .graph .lines i:not(.lh):after{
content: '';
width: 5px;
height: 5px;
border-radius: 3px;
background-color: #bec3d0;
position: absolute;
bottom:-1px;
left: -2px
}
#step .wp .full .graph .lines i.lv{
height: 100%;
width: 1px;
left: 50%;
}
#step .wp .full .graph .lines i.lv:before{
content: '';
width: 5px;
height: 5px;
border-radius: 3px;
background-color: #bec3d0;
position: absolute;
top:-1px;
left: -2px
}
#step .wp .full .graph .lines i.lh{
width: 70%;
height: 1px;
top: 50%;
left: 50%;
transform: translate(-50%) translateZ(0);
transition-delay:.3s;
}
#step .wp .full .graph .lines i.lv1,
#step .wp .full .graph .lines i.lv2{
height: 50%;
top:50%;
width: 1px;
left: 15%;
transition-delay:.6s;
}
#step .wp .full .graph .lines i.lv2{right: 15%;left: auto}
#step .wp .full .graph .lines.hideme i:not(.lh){height: 0;}
#step .wp .full .graph .lines.hideme i.lh{width: 0;}
#step .wp .full .boxs{display: flex;align-items: flex-start;justify-content: space-between;}
#step .wp .full .boxs .bx{width: 30%;transition-delay: .7s}
#step .wp .full .boxs .bx:nth-child(2){transition-delay: .9s}
#step .wp .full .boxs .bx:nth-child(3){transition-delay: 1.1s}
#step .wp .full .boxs .bx.hideme{transform: translateY(20px) translateZ(0);}
#step .wp .mid{
width: 50%;
max-width: 50%;
position: relative;
padding: 0 25px;
}
#step .wp .mid.phone img{
width: 80vw;
max-width: 1516px;
left: -50px;
position: relative;
transition: ease-out 0.5s;
will-change: transform
}
#step .wp .mid.phone img.hideme{transform: perspective(1200px) rotateX(10deg) rotateZ(15deg) translate(200px, 100px) scale(1.2);}
#step .wp .mid.bgs{align-self: flex-start;}
#step .wp .mid.bgs img{
margin:auto;
display: block;
transition: ease-out 0.5s;
}
#step .wp .mid.bgs img.hideme{transform: translateX(-50px) translateZ(0);}
#process{
background-repeat: no-repeat;
background-position: top center;
background-image: url("../img/fondo-servicios.jpg");
background-size: 100% auto;
padding-top: 250px;
position: relative;
top:-250px;
background-attachment: fixed;
}
#process .wp{
margin:auto;
max-width: 1200px;
width: 100%;
position: relative;
top: 50px;
}
#process .wp .row{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: 50px 0;
}
#process .wp .row .col{max-width: 50%}
#process .wp .row .col.tit{color: #00aeef;font-size: 32px;font-weight: 100;padding-right:140px}
#process .wp .row .col.text p{
line-height: 1.6;
color: #c3c9de;
font-size: 16px;
margin-bottom: 30px;
}
#process .wp .row .col.text p strong{color: #FFF}
#step .headUX{color:#FFF;margin-top: 100px;}
#step .headUX h4{width: 100%;}
#step .headUX h3{margin-top: 0}
#servicios{background-color: #001149}
#srvtubos{
position: absolute;
top:60vw;right: 35%;
opacity: .5;
mix-blend-mode: overlay;
}
#proceso{position: relative;top:0px;margin-bottom: 50px;}
#proceso .swipe{
position: absolute;
left: 50%;
top:102%;
transform: translateX(-50%) scale(.7);
filter: invert(100);
opacity: .4
}
#proceso .owl-carousel{color:#FFF;}
#proceso .owl-stage{left:calc((100vw - 1200px) / 2);}
#proceso .owl-carousel img{width: auto}
#proceso .owl-carousel .item{
width: 360px;
padding-top: 60px;
opacity: .3;
position: relative;
transition: ease-out 0.3s;
color: #001149
}
#proceso .owl-carousel .item small{
font-size: 200px;
font-family: 'Comfortaa', sans-serif;
color: rgba(0,0,0,0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #27bdf5;
position: absolute;
top:0px;left: -30px;
opacity: .0;
}
#proceso .owl-carousel .owl-item.firstActiveItem .item{opacity: 1;}
#proceso .owl-carousel .item .copy{
padding-top: 20px;
border-top: 1px solid #27bdf5;
margin-top: 20px;
line-height: 1.4;
padding-right: 40px;
}
#proceso .owl-carousel .owl-item.firstActiveItem .item small{opacity: .3}
#proceso .owl-carousel .item .copy h3{font-size: 28px;font-weight: 600;margin-top: 0}
@media screen and (max-width: 1024px) {
header{top:0;}
nav > div#nav{padding-left:40px }
nav > div#nav > a,
nav div.contacto .wpForm h3{font-size: 30px}
nav > div#nav > a sup,
nav div.contacto .wpForm h3 sup{font-size: 16px;left: -22px;}
nav > div#nav > div{font-size: 16px;margin-top: 40px}
.mascara ul{width: 100%;}
.mascara ul li h2{font-size: 26px}
.floating{display: none;}
#bloque2{flex-wrap: wrap}
#bloque2 .mid{width: 100%;}
#bloque2 .mid .copy{margin-top: 30px}
#bloque2 .mid .block.b02{margin-top: 50px}
footer.ocean{padding: 0 20px}
#bloque0{padding: 0 20px}
#bloque0 > img{max-width: 350px}
#bloque1.empresa{margin-top: 100px;}
#bloqueEmpresa .wrap{padding:80px 50px}
#bloqueEmpresa .wrap .cols, #bloqueEmpresa .wrap .cols.m{width: 100%;margin-bottom: 40px}
#bloqueEmpresa .clients{padding: 0 50px 100px}
#bloqueEmpresa .clients > img{width:17%;}
#bloque2.servicios .mid .bgBloque{width: 100%;}
#process{padding: 250px 30px 0}
}
@media screen and (max-width: 768px) {
#bloque1 .copy {
position: static;
width: 100%;
max-width: 90%;
padding: 20px;
transform: translate(0) translateZ(0);
}
#bloque1.empresa > .img {
left: 45%;
width: 100%;
}
}
@media screen and (max-width: 750px) {
header .wp{min-height: 0;}
header h1 img{max-height: 40px;max-width: 100px;}
header #burger{width: 40px;height: 40px;bottom:auto;top:50%;transform: translateY(-50%) translateZ(0);}
header #burger i{width: 20px;margin:1.5px 0;}
header #burger.open i:nth-child(3){top:-6px;}
header #burger.open i:nth-child(1){top:6px;}
.desktop{display: none !important;}
nav > div{align-items: center}
nav div.contacto .wpForm,
.mobile{display: block !important;}
nav > div#nav > a sup{opacity: 1}
nav div.contacto.mobile{display: block;width: 100%;background-color: transparent;margin-top:0px;opacity: 1}
nav div.contacto .wpForm{padding: 0}
nav div.contacto .wpForm p{white-space: normal;}
nav div.contacto .wpForm h3{color: #FFF;width: 250px;margin:25px auto;}
nav div.contacto .wpForm .mainForm{
padding: 20px;
background-color: #FFF;
display: none;
margin-bottom: 30px;
}
nav div.contacto form input{width: 100%;}
nav div.contacto form .space{display: none;}
nav div.contacto form button{width: 100%;}
nav > div#nav{width: 100%;padding-left: 0;overflow-x: scroll;display: block;padding: 100px 0;}
nav > div#nav > div{margin: auto;}
nav > div#nav > a{display: block;margin:25px auto;font-size: 24px;}
nav div.contacto .wpForm h3{font-size: 24px;}
#bloque1.empresa > .img{left: 45%;width: 100%;}
.wpWaves{display: none;}
.mascara{width: 291%;left: -120%;}
.mascara ul li h2 span{display: inline;}
.mascara ol.flex-control-nav,
.mascara ul{width: 100vw;padding: 0 20px;right: 0;transform: translate(-71%,-50%) translateZ(0);left: auto}
#bloque1{top:-120px;}
#bloque1 .gif{width: 100%;}
#bloque1 .copy{position: static;width: 100%;padding: 20px;transform: translate(0) translateZ(0);}
#bloque1 .copy p{font-size: 16px}
h3{font-size: 35px}
#bloque2{padding: 0}
#bloque2 .mid .block.b01{border-radius: 80px 0 0 0;float: none;display: flex;align-items: center;}
#bloque2 .mid .block.b02{border-radius: 0 80px 0 0}
#bloque2 .mid .block.b03{border-radius: 0 0 80px 0;}
#bloque2 .mid .copy{padding: 0 20px}
#bloque2 .mid .block .copy{padding: 0 20px;margin-top: 0;position: static;width: 100%;transform: translate(0, 50%) translateZ(0);}
#bloque2 .mid .block h3{padding-left: 60px;font-size: 25px}
#bloque2 .mid .block h3:after{left: 0;right: auto;font-size:50px}
#bloque2 .mid .block h3:before{width: 20px}
footer .wp > img{max-width: 100px;max-height: 40px}
footer .wp > ul{position: absolute;width: 100%;text-align: center;left: 0;transform: translateX(0px) translateZ(0);top: 130px}
footer .wp > ul li{margin:5px 10px;}
footer .dire{font-size: 12px;margin-top: 30px;font-size: 12px;
margin-top: 30px;
position: relative;
top: 50px;}
footer .white .wp{
grid-template-columns: 1fr;
gap: 20px;
padding-bottom: 30px;
}
footer .white .wp a:nth-child(1),
footer .white .wp a:nth-child(2),
footer .white .wp a:nth-child(3){
grid-column: span 1;
}
footer .white .wp a:nth-child(2) img{
max-width: 200px;
}
#bloque1.empresa{top:-90px;}
#bloque1.empresa > img{width: 80%;left: 50%;margin-bottom: 30px }
#bloque1.empresa{margin-bottom: 0}
#bloqueEmpresa,
#bloqueEmpresa .wpImage{margin:0px;}
#bloqueEmpresa .wrap{padding: 50px 30px}
#bloqueEmpresa .wrap h3{margin-bottom: 30px}
#bloqueEmpresa .wrap .cols.l span{font-size: 50px;margin-top: 30px}
#bloqueEmpresa .wrap .cols.l span small{font-size: 15px}
#bloqueEmpresa .wpImage .copy{left: 0;padding: 30px}
#bloqueEmpresa .clients{padding: 0 30px 100px;position: relative;top:-50px;}
#lottie.servicios{width: 100%;top: 50px}
#lottie08{width: 100%;}
.certificates-modal{
display: none;
position: fixed;
align-items: center;
justify-content: center;
inset: 0;
padding: 20px;
background: rgba(0, 0, 0, .65);
z-index: 1001;
}
.certificates-modal.open{display: flex;}
body.certificates-modal-open{overflow: hidden;}
.certificates-modal-content{
position: relative;
width: 100%;
max-width: 620px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 45px 35px 35px;
background: #ffffff;
box-sizing: border-box;
}
.certificates-modal-content h2{
margin: 0 0 30px;
color: #0047ba;
font-size: 36px;
font-weight: 300;
text-align: center;
}
.certificates-modal-close{
position: absolute;
top: 12px;
right: 16px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: #0047ba;
font-size: 30px;
font-weight: 300;
line-height: 36px;
cursor: pointer;
}
.certificates-list{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
.certificates-list a{
display: flex;
min-height: 120px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
padding: 15px;
border: 1px solid #d7e2ef;
box-sizing: border-box;
color: #0047ba;
font-size: 13px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
transition: background-color .2s ease, border-color .2s ease;
}
.certificates-list a:hover,
.certificates-list a:focus{
background: #eef8fd;
border-color: #00aeef;
outline: none;
}
.certificate-icon{
display: flex;
width: 48px;
height: 56px;
align-items: center;
justify-content: center;
background: #00aeef;
color: #ffffff;
font-size: 12px;
font-weight: 700;
clip-path: polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%);
}
@media screen and (max-width: 600px){
.certificates-modal{padding: 12px;}
.certificates-modal-content{max-height: calc(100vh - 24px);padding: 42px 15px 20px;}
.certificates-modal-content h2{margin-bottom: 20px;font-size: 28px;}
.certificates-list{grid-template-columns: 1fr;gap: 10px;}
.certificates-list a{min-height: 82px;flex-direction: row;justify-content: flex-start;text-align: left;}
.certificate-icon{flex: 0 0 42px;width: 42px;height: 48px;}
}
#bloque0.servicios p{width: 100%;font-size: 16px}
#bloque0.servicios p:last-child{width: 100%;margin: 20px 0}
#bloque2.servicios .block.b02 .num{font-size: 50px}
#bloque2.servicios .flex-control-nav{padding: 0 20px}
#bloque2.servicios .block.b02 .copy{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#infra .mid > div{width: 100%;margin-bottom: 30px}
#infra .mid > div.img > img{display: block;width: 100%;}
#infra .mid:nth-child(odd) .texto{order:1;}
#step .headUX{padding:0 20px;}
#step .wp .full{padding: 0 20px}
#step .wp .full .graph .lines{display: none;}
#step .wp .full .boxs{flex-wrap: wrap}
#step .wp .full .boxs .bx{width: 100%;margin: 20px 0}
#step .wp .mid{padding:20px;max-width: 100%;width: 100%}
#step .wp .mid.phone img{width: 160vw}
#step{border-radius: 0 0 100px 0;padding-bottom: 100px}
#process .wp .row{padding-bottom: 0}
#process .wp .row .col.tit{width: 100%;padding-right:0px;font-size: 30px;margin-bottom: 30px}
#process .wp .row .col{max-width: 100%;}
#process .wp .row .col.text p{margin-bottom: 20px}
#proceso .owl-stage{left: 20px}
#proceso .owl-carousel .item{width: 320px}
}
@-webkit-keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -2600px;
}
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -2600px;
}
}
@-webkit-keyframes swell {
0%, 100% {
-webkit-transform: translate3d(0, -25px, 0);
transform: translate3d(0, -25px, 0);
}
50% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
}
@keyframes swell {
0%, 100% {
-webkit-transform: translate3d(0, -25px, 0);
transform: translate3d(0, -25px, 0);
}
50% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
}
@-webkit-keyframes float {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-40px);
transform: translatey(-40px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
@keyframes float {
0% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
-webkit-transform: translatey(-40px);
transform: translatey(-40px);
}
100% {
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
.certificates-modal{
display: none;
position: fixed;
align-items: center;
justify-content: center;
inset: 0;
padding: 20px;
background: rgba(0, 0, 0, .65);
z-index: 1001;
}
.certificates-modal.open{display: flex;}
body.certificates-modal-open{overflow: hidden;}
.certificates-modal-content{
position: relative;
width: 100%;
max-width: 620px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 45px 35px 35px;
background: #ffffff;
box-sizing: border-box;
}
.certificates-modal-content h2{
margin: 0 0 30px;
color: #0047ba;
font-size: 36px;
font-weight: 300;
text-align: center;
}
.certificates-modal-close{
position: absolute;
top: 12px;
right: 16px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: #0047ba;
font-size: 30px;
font-weight: 300;
line-height: 36px;
cursor: pointer;
}
.certificates-list{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
.certificates-list a{
display: flex;
min-height: 120px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
padding: 15px;
border: 1px solid #d7e2ef;
box-sizing: border-box;
color: #0047ba;
font-size: 13px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
transition: background-color .2s ease, border-color .2s ease;
}
.certificates-list a:hover,
.certificates-list a:focus{
background: #eef8fd;
border-color: #00aeef;
outline: none;
}
.certificate-icon{
display: flex;
width: 48px;
height: 56px;
align-items: center;
justify-content: center;
background: #00aeef;
color: #ffffff;
font-size: 12px;
font-weight: 700;
clip-path: polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%);
}
@media screen and (max-width: 600px){
.certificates-modal{padding: 12px;}
.certificates-modal-content{max-height: calc(100vh - 24px);padding: 42px 15px 20px;}
.certificates-modal-content h2{margin-bottom: 20px;font-size: 28px;}
.certificates-list{grid-template-columns: 1fr;gap: 10px;}
.certificates-list a{min-height: 82px;flex-direction: row;justify-content: flex-start;text-align: left;}
.certificate-icon{flex: 0 0 42px;width: 42px;height: 48px;}
}
.skip-link{
position:absolute;
left:-9999px;
top:0;
z-index:10000;
background:#0047ba;
color:#fff;
padding:12px 20px;
border-radius:0 0 8px 0;
font-size:14px;
font-weight:700;
}
.skip-link:focus{left:0;}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
outline:3px solid #00aeef;
outline-offset:2px;
}
nav div.contacto form button .ico-arrow{
display:inline-block;
width:9px;
height:9px;
border:solid #fff;
border-width:2px 2px 0 0;
transform:rotate(45deg);
transition:ease-out .4s;
opacity:0;
}
nav div.contacto form button:hover .ico-arrow,
nav div.contacto form button:focus-visible .ico-arrow{margin-left:30px;opacity:1;}
nav div.contacto form .form-status{
display:block;
margin-top:14px;
font-size:14px;
line-height:1.4;
color:#fff;
min-height:1em;
}
nav div.contacto form .form-status.is-error{color:#ffb4b4;}
nav div.contacto form .form-status.is-ok{color:#8fe3ff;}
nav div.contacto form input.error,
nav div.contacto form select.error,
nav div.contacto form textarea.error{border-bottom:2px solid #ff6b6b;}
.hp-field{
position:absolute !important;
left:-9999px !important;
width:1px;
height:1px;
overflow:hidden;
}
.cookie-consent-banner{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#fff;
color:#1d1d1d;
padding:16px 20px;
text-align:center;
z-index:10000;
font-size:14px;
line-height:1.5;
box-shadow:0 -4px 20px rgba(0,0,0,.25);
display:none;
}
.cookie-consent-banner.show{display:block;}
.cookie-consent-banner p{display:inline;margin:0;}
.cookie-consent-banner a{text-decoration:underline;color:#0047ba;}
.cookie-consent-banner button{
-webkit-appearance:none;
appearance:none;
border:0;
background:#0047ba;
color:#fff;
font-family:'Open Sans',sans-serif;
font-size:14px;
font-weight:700;
padding:8px 22px;
border-radius:20px;
cursor:pointer;
margin-left:14px;
}
.cookie-consent-banner button:hover{background:#00aeef;}
@media screen and (max-width:750px){
.cookie-consent-banner p{display:block;margin-bottom:10px;}
.cookie-consent-banner button{margin-left:0;}
}
[data-lottie]{display:block;aspect-ratio:1 / 1;}
.error-wrap{max-width:760px;padding:200px 20px 120px;text-align:center;color:#fff;margin:0 auto;}
.error-wrap h2{font-size:120px;font-weight:300;font-family:'Comfortaa',sans-serif;color:#00aeef;line-height:1;margin:0;}
.error-wrap h3{margin:20px 0;}
.error-wrap p{font-size:18px;line-height:1.5;color:#b4bcd7;}
.error-wrap a.btn{margin:40px auto 0;}
@media screen and (max-width:750px){
.error-wrap{padding:140px 20px 80px;}
.error-wrap h2{font-size:80px;}
}
main{display:block;}
main:focus{outline:none;}
header .brand img{filter:drop-shadow(5px 5px 7px rgba(0,0,0,.1));}
@media screen and (max-width:1100px){
header .brand img{max-height:40px;max-width:100px;}
}
header button#burger{
border:0;
-webkit-appearance:none;
appearance:none;
font:inherit;
}
.spacer{height:50px;}
.visually-hidden{
position:absolute !important;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
}
.wave-srv{display:block;width:100%;height:auto;}
.flexslider:not(.slider-listo) ul.slides > li:nth-child(n+2),
#counter:not(.slider-listo) ul.slides > li:nth-child(n+2){
display:none;
}
.mascara ol.flex-control-nav li,
#bloque2.servicios .flex-control-nav li{
position:relative;
}
.mascara ol.flex-control-nav li a:after,
#bloque2.servicios .flex-control-nav li a:after{
content:"";
position:absolute;
top:50%;
left:50%;
width:44px;
height:44px;
transform:translate(-50%,-50%);
}
header .brand .brand-sm{display:none;}
header.scrolled .brand .brand-xl{display:none;}
header.scrolled .brand .brand-sm{display:block;}
nav div.contacto .wpForm h3 button{
all:unset;
display:block;
width:100%;
cursor:pointer;
font:inherit;
color:inherit;
letter-spacing:inherit;
text-transform:inherit;
}
.eyebrow{
color:#00aeef;
font-weight:700;
font-size:14px;
text-transform:uppercase;
}
.eyebrow.hideme{transform:translateY(30px);}
#bloqueEmpresa .wrap .eyebrow{width:100%;}
#bloqueEmpresa .wpImage .copy .eyebrow{color:#FFF;}
#bloque0.servicios .copy .eyebrow{width:100%;}
#step .headUX .eyebrow{width:100%;}
@media screen and (max-width: 1000px){
.mascara div#sliders{
background-image: url("../img/centro-de-datos-bgaming-movil.jpg");
}
.mascara div#sliders.empresa{
background-image: url("../img/equipo-bgaming-centro-de-operaciones-movil.jpg");
}
#bloque2:not(.servicios) .mid .block.b01:after{
background-image: url("../img/red-global-de-datos-movil.jpg");
}
#bloque2:not(.servicios) .mid .block.b02:after{
background-image: url("../img/satelite-de-comunicaciones-movil.jpg");
}
#bloque2:not(.servicios) .mid .block.b03:after{
background-image: url("../img/centro-de-procesamiento-servidores-movil.jpg");
}
#bloqueEmpresa .wpImage{
background-image: url("../img/fondo-bloque-empresa-movil.jpg");
}
#bloque2.servicios .block.b03{
background-image: url("../img/fondo-bloque-servicios-movil.jpg");
}
#process{
background-image: url("../img/fondo-servicios-movil.jpg");
}
}
/* ==========================================================================
Orden de encabezados
Algunos titulos cambiaron de etiqueta para que los niveles vayan sin saltos
(un <h4> no puede colgar de un <h2>), que es lo que esperan los lectores de
pantalla y los analizadores. Estas reglas le devuelven a cada uno exactamente
el aspecto que tenia: la clase dice cual era la etiqueta original.
========================================================================== */
h2.h3{font-weight:300;font-size:48px;margin:25px 0;text-transform:none;letter-spacing:normal;}
h2.h3.hideme{transform:translateY(30px);}
.copy h2.h3{transition-delay:.3s;}
h3.h4{color:#00aeef;font-weight:700;font-size:14px;text-transform:uppercase;margin:0;}
h3.h4.hideme{transform:translateY(30px);}
h3.h5,h4.h5{text-transform:none;letter-spacing:normal;}
#infra .mid h4.h5{font-size:28px;font-weight:700;color:inherit;margin:0 0 30px;transition:ease-out 0.3s;transition-delay:.3s;}
#infra .texto.hideme h4.h5{transform:translateY(25px) translateZ(0);opacity:0;}
#step .wp h4.h5{color:#1d1d1d;font-size:18px;font-weight:500;margin:30px 0;line-height:1.3;transition-delay:.4s;}
#step .wp .full .graph h4.h5{font-size:18px;color:#000f3a;margin-top:50px;}
@media screen and (max-width:750px){
h2.h3{font-size:35px;}
}
/* ==========================================================================
Area tactil de los puntos del slider
Los puntos median 14x14 px: demasiado chicos para el dedo (el minimo
recomendado es 24x24). Ahora el enlace ocupa 24x24 transparente y el punto se
dibuja adentro, centrado.
En el inicio las cuentas estan hechas para que los puntos queden EXACTAMENTE
donde estaban: antes cada punto ocupaba 14 px mas 10 de separacion (24 de
paso); ahora ocupa 24 y no lleva separacion, o sea el mismo paso. El
desplazamiento de 5 px que introduce centrar el punto se compensa con los
margenes negativos del <ol>.
========================================================================== */
.mascara ol.flex-control-nav{margin-top:45px;margin-left:-5px;}
.mascara ol.flex-control-nav li{margin-right:0;}
.mascara ol.flex-control-nav li a{
width:24px;
height:24px;
border:0;
background:none;
border-radius:0;
display:flex;
align-items:center;
justify-content:center;
}
.mascara ol.flex-control-nav li a:before{
content:"";
display:block;
width:10px;
height:10px;
border-radius:10px;
background-color:rgba(255,255,255,.4);
border:2px solid rgba(255,255,255,0);
transition:.5s cubic-bezier(.39,.51,.13,1.01);
}
.mascara ol.flex-control-nav li a.flex-active{
background-color:transparent;
border:0;
width:24px;
height:24px;
}
.mascara ol.flex-control-nav li a.flex-active:before{
border-color:rgba(255,255,255,1);
background-color:transparent;
width:14px;
height:14px;
}
/* Mismo criterio en el slider de Servicios. */
#bloque2.servicios .flex-control-nav li{width:24px;margin-right:0;}
#bloque2.servicios .flex-control-nav li a{
width:24px;
height:24px;
border:0;
background:none;
border-radius:0;
margin:0;
display:flex;
align-items:center;
justify-content:center;
}
#bloque2.servicios .flex-control-nav li a:before{
content:"";
display:block;
width:10px;
height:10px;
border-radius:10px;
border:2px solid #FFF;
transition:.5s cubic-bezier(.39,.51,.13,1.01);
}
#bloque2.servicios .flex-control-nav li a.flex-active{background:none;width:24px;height:24px;}
#bloque2.servicios .flex-control-nav li a.flex-active:before{background:#FFF;width:12px;height:12px;}