@charset "UTF-8";
/* CSS Document */

/*FONTS*/
@font-face {
    font-family: 'futuracondensed_extrabold';
    src: url('../fonts/futura-condensedextrabold-05-webfont.woff2') format('woff2'),
         url('../fonts/futura-condensedextrabold-05-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'made_miragemedium';
    src: url('../fonts/made_mirage_medium-webfont.woff2') format('woff2'),
         url('../fonts/made_mirage_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NeueHaasGroteskBold';
    src: url('../fonts/NeueHaasGroteskBold.woff2') format('woff2'),
         url('../fonts/NeueHaasGroteskBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NeueHaasGroteskRegular';
    src: url('../fonts/NeueHaasGroteskRegular.woff2') format('woff2'),
         url('../fonts/NeueHaasGroteskRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*FONTS*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{background-color: #000000; color: #FFFFFF; line-height: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; cursor: none; overflow-x: hidden;}

a{text-decoration: none; color: inherit;}
a:hover{text-decoration: none; color: inherit;}

button:focus{outline: none !important;}
button{background: none; border: none;}

h1, h2, h3, h4, h5, h6, ul, li, a, p, figure{
padding: 0 0 0 0; margin: 0 0 0 0; list-style-type: none; font-weight: normal; font-size: inherit; line-height: normal;}

.container{max-width: 1212px;}

/*TEXT COLORS*/
.color-000000{color: #000000;}
.color-FFFFFF{color: #FFFFFF !important;}
.color-FFFAFA{color: #FFFAFA !important;}
.color-FF3333{color: #FF3333;}
.color-212121{color: #212121 !important;}
/*TEXT COLORS*/

.bg-FFFFFF{background-color: #FFFFFF !important;}

.mt-170{margin-top: 170px;}
.mt-30{margin-top: 30px;}
.mb-90{margin-bottom: 90px;}
.mb-35{margin-bottom: 35px;}
.p-100-0{padding: 100px 0;}

img{display: block; max-width: 100%; height: auto;}
.container-fluid{max-width: 1890px;}
.container-fluid.w-100{max-width: 100% !important;}

/*MOUSE CURSOR*/
.mouse-cursor{position: fixed; left: 0; top: 0; pointer-events: none; border-radius: 50%; -webkit-transform: translateZ(0); transform: translateZ(0); visibility: hidden;}
.cursor-inner{margin-left: 2px; margin-top: 2px; width: 6px; height: 6px; z-index: 10000001; background-color: #FF3333; -webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out; -o-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out; transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;}
.cursor-inner.cursor-hover{margin-left: -40px; margin-top: -40px; width: 80px; height: 80px; background-color: #FF3333; opacity: .3;}
.cursor-outer{margin-left: -15px; margin-top: -15px; width: 40px; height: 40px; border: 1px solid #FF3333; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 10000000; opacity: .5; -webkit-transition: all .08s ease-out; -o-transition: all .08s ease-out; transition: all .08s ease-out;}
.cursor-outer.cursor-hover{opacity: 0;}

.cursor-pointer{margin-left: 2px; margin-top: 2px; width: 6px; height: 6px; z-index: 10000001; background-color: #000000; -webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out; -o-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out; transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;}

.mousepointer_outer{border: 1px solid #000000 !important;}
.mousepointer_inner{background-color: #000000 !important;}
.mousepointer_inner.cursor-inner.cursor-hover{background-color: #000000 !important;}
/*MOUSE CURSOR*/

/*TEXT BORDER*/
.text-border-FF3333{-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FF3333; color: transparent;}
/*TEXT BORDER*/

/*SECTION TITLE*/
.section-title{position: relative; width: 100%; margin-bottom: 50px;}
.section-title h3{font-family: 'NeueHaasGroteskRegular'; text-transform: uppercase; font-size: 23px; color: #EE4037; overflow: hidden;}
.section-title h3 span{transform: translateY(32px); display: block;}
.section-title .after-line{position: absolute; left: 0; bottom: -10px; width: 0%; height: 2px; background-color: #EE4037; transition: width 0.8s cubic-bezier(.19,1,.22,1);}
/*SECTION TITLE*/

#main{overflow-x: hidden !important; position: relative; z-index: 2;/* margin-bottom: 600px;*/ background-color: #000000;}

/*MAIN HEADER*/
.main-header{position: fixed; top: 30px; left: 0; padding: 0 85px; width: 100%; z-index: 99999; transition: 1s;}
.main-header .header-logo{height: 17px; display: inline-block;}
.main-header .header-isotipo{height: 17px; opacity: 0; position: absolute; left: 0; top: 2px;}
.main-header.header_sticky{top: 40px; position: fixed;}
.main-header.header_sticky .header-logo{opacity: 0; transition: 0.3s;}
.main-header.header_sticky .header-isotipo{opacity: 1;}
/*MAIN HEADER*/

/*HERO*/
#hero{position: relative; width: 100%; height: 100vh; z-index: 3; overflow: hidden}
#hero h1{font-family: 'futuracondensed_extrabold'; text-transform: uppercase; text-align: center; font-size: 108px; line-height: 94px; transform: skew(-5deg); letter-spacing: -4px;}
#hero h1 .h1-1{position: relative;}
#hero h1 .h1-2{position: relative;}

#hero .btn-scroll{position: absolute; right: 50%; bottom: 80px; transform: translateY(-50%);}
#hero .btn-scroll span.text{position: absolute; top: -36px; font-family: 'NeueHaasGroteskBold'; font-size: 11.5px; color: #FFFFFF; width: max-content; /* margin-left: 15px; */ transform: translate(-50%); left: 50%;}
#hero .btn-scroll span.line{position: absolute; top: -12px; width: 2px; height: 60px; background-color: #FF3333; animation: line-scroll 1.5s cubic-bezier(1,0,0,1) infinite;}

@keyframes line-scroll {
    0% {
        transform: scaleY(0);
        transform-origin: 0 0
    }

    50% {
        transform: scale(1);
        transform-origin: 0 0
    }

    51% {
        transform: scale(1);
        transform-origin: 0 100%
    }

    to {
        transform: scaleY(0);
        transform-origin: 0 100%
    }
}

.btn-play text {
  fill: #FF3333;
  font-family: 'NeueHaasGroteskBold';
  font-size: 25px;
  text-transform: uppercase;
  font-variant-ligatures: none;
  letter-spacing: 0px;
  animation: rotate 15s linear infinite;
  transform-origin: 250px 250px;
}

.btn-play svg{
  max-width: 200px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.btn-play .textcircle {
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: 250px 250px;
}
#hero .icon-play{position: absolute; width: 18px; left: calc(50% + 5px); top: 50%; transform: translate(-50%, -50%);}

[data-aos=hero-h1-anim] {
	transform: translateY(250px);
}
[data-aos=hero-h1-anim].aos-animate {
	transform: translateY(0)
}

#hero .teaser{position: absolute; top: 75px; left: 0; width: 100%; height: calc(100% - 135px); overflow: hidden;}
#hero .teaser video{width: 100%; padding: 75px 75px 75px 75px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#hero .btn-play{width: 200px; height: 200px; position: absolute; z-index: 999; right: 150px; bottom: 50%; transform: translateY(50%);}
/*HERO*/

.mask-main{position: fixed; top: 0; left: 0; width: 100%; transition-duration: 0.5s !important;  transition-timing-function: ease-in-out; background-color: #000000; z-index: 999;}
[data-aos=mask-main-anim] {
	height: 100%;
}
[data-aos=mask-main-anim].aos-animate {
	height: 0;
}

body.bg-FFFFFF .mask-main{background-color: #EEEEEE;}

/*ABOUT US*/
#about-us{width: 100%; position: relative; padding: 80px 114px 80px 114px; z-index: 2; background-color: #000000; margin-top: -30%;}
#about-us p{font-family: 'made_miragemedium'; font-size: 53px; line-height: 89px; padding: 0 88px;}
#about-us p span{font-family: 'futuracondensed_extrabold'; font-size: 64px; transform: skew(-5deg); letter-spacing: -2px; margin-top: 25px;}
#about-us p.pr-1{opacity: 0; transform: translateY(20px);}
#about-us p.pr-2{opacity: 0; transform: translateY(20px);}
/*ABOUT US*/

#services2{width: 100%; height: 100vh; position: relative; background-color: #000000;}
#services2 h2{color: #FFFFFF; position: absolute; top: 10%; width: 100%;}
#services2 h2 span{position: absolute; transform: translate(0,0); transition: 0.5s; opacity: 0;}

/*SERVICES*/
#services{width: 100%; height: 100vh; position: relative; background-image:url("../images/01.jpg"); background-position: center center; background-size: cover; opacity: 0; margin-top: -800px; overflow: hidden;}
#services .weanalize{opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}
#services .weanalize .text-1{display: block; transform: scale(50); background-image: url("../images/WE_ANALIZE-01_2.svg"); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;}
#services .weanalize .text-1 img{width: 100%;}
#services .wecreate{opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image:url("../images/02.jpg"); background-position: center center; background-size: cover; overflow: hidden;}
#services .wecreate .text-2{display: block; transform: scale(50); background-image: url("../images/WE_CREATE-01_2.svg"); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;}
#services .wecreate .text-2 img{width: 100%;}
#services .weevolve{opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image:url("../images/03.jpg"); background-position: center center; background-size: cover; overflow: hidden;}
#services .weevolve .text-3{display: block; transform: scale(50); background-image: url("../images/WE_EVOLVE-01_2.svg"); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;}
#services .weevolve .text-3 img{width: 100%;}
#services .div-services{position: absolute; width: 100%; height: 100%;  top: 0; background-color: #000000; opacity: 0;}
#services .div-services .item-service{margin: 0 30px; opacity: 0; transform: translate(0px, 150px); }
#services .div-services h2{font-family: 'futuracondensed_extrabold'; text-transform: uppercase; color: #EE4037; font-size: 63px; transform: skew(-5deg); letter-spacing: -2px; margin-bottom: 30px; margin-left: 10px;}
#services .div-services p{font-family: 'NeueHaasGroteskRegular'; color: #FFFFFF; font-size: 17px; margin-bottom: 12px; margin-left: 17px;}
.noise-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/bg-noise.gif"); background-position: 0px 0px; background-size: auto; opacity: 0.04;}
#service{padding: 0 114px 0 114px;}
/*SERVICES*/

/*WORKS*/
#works{width: 100%; position: relative; z-index: 1; padding: 0 9% 100px 9%; margin-top: 0; background-color: #000000;}
#works .project-item{position: relative; margin-bottom: 100px;}
#works .project-item .figure-container{overflow: hidden; will-change: transform;}
#works .project-item figure{max-width: 73.2%; overflow: hidden;}
#works .project-item figure img{transition: 1s; opacity: 0.7;}
#works .project-item .project-title{position: absolute; right: 80px; bottom: 30px; max-width: 533px; width: 45%; text-align: right;}
#works .project-item .project-title h2{font-family: 'futuracondensed_extrabold'; text-transform: uppercase; color: #EE4037; font-size: 73px; line-height: 68px; transform: skew(-5deg); letter-spacing: -2px; transition: 0.5s;}
#works .project-item .project-title h2 a{line-height: inherit;}
#works .project-item:hover img{transform: scale(1.1); opacity: 1;}
#works .project-item:hover h2{transform: translateX(-10px) skew(-5deg);}
/*WORKS*/

/*CLIENTS*/
#clients{width: 100%; position: relative; z-index: 1; padding: 0 9% 100px 9%; margin-top: 0; background-color: #000000;}
#clients .section-title{margin-bottom: 30px;}
#clients .clients-logo img{opacity: 0.8; transition: 0.3s;}
#clients .clients-logo img:hover{opacity: 1;}
/*CLIENTS*/

/*CONTACT*/
.contact{width: 100%; height: 600px; position: relative; /*bottom: 0; left: 0;*/ z-index: 1; overflow-x: hidden;}
.contact .bg-red{position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #EE4037;}
.contact .bg-black{position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-color: #000000;}
.contact .contact-info{width: 100%; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.contact .contact-info h2{text-align: center; text-transform: uppercase; font-family: 'futuracondensed_extrabold'; font-size: 72px; transform: skew(-8deg); letter-spacing: -2px; margin-top: 5px;}
.contact .contact-info h3{position: relative; text-align: center; font-family: 'made_miragemedium'; font-size: 52px; letter-spacing: -1px; margin-top: 5px;}
.contact .contact-info h3 a{position: relative; display: inline-block;}
.contact .contact-info h3 a:after{content: ""; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 0%; height: 1px; background-color: #000000; transition: 0.2s;}
.contact .bg-black .contact-info h3 a:after{background-color: #FFFFFF;}
.contact .contact-info h3 a:hover:after{ width: 100%;}
.contact .contact-info p{text-align: center; font-family: 'made_miragemedium'; font-size: 18px;}
.contact .bg-red .contact-info h2{color: #000000;}
.contact .bg-red .contact-info h3{color: #000000;}
.contact .bg-red .contact-info p{color: #000000;}
.contact #envelope_dark{width: 85px; display: block; margin: 0 auto;}
.contact #envelope_light{width: 85px; display: block;  margin: 0 auto;}

footer{width: 100%; position: absolute; left: 0; bottom: 35px;}
footer span{font-family: 'NeueHaasGroteskRegular'; font-size: 15px; color: #000000;}
footer ul{text-align: right;}
footer ul li{display: inline-block; font-family: 'NeueHaasGroteskBold'; font-size: 15px; margin: 0 0 0 18px;}
footer ul li a{display: block; color: #000000; transition: 0.5s;}
footer ul li a:hover{opacity: 0.5;}
/*CONTACT*/

/*WORK PAGE*/
.work-page{width: 100%; min-height: 100%; position: fixed; top: -100%; left: 0; z-index: 1; visibility: hidden; background-color: #EE4037; transition: 0.4s; transition-delay: 2s;}
.work-page.active{overflow-y: scroll; top: 0; visibility: visible; z-index: 9999; transition: 0.4s; transition-delay: 0s;}
.work-page h2{font-family: 'futuracondensed_extrabold'; text-transform: uppercase; animation-delay: 0.5s; animation-duration: 0.5s; transition-delay: 0s; font-size: 50px;}
.work-page.active h2{animation-delay: 2s; transition-delay: 0s;}
.work-page p{font-family: 'NeueHaasGroteskRegular';}
/*WORK PAGE*/

/*PROJECT PAGE*/
.body-intro{background-color: #FFFFFF; transition: 1s;}
.body-more{background-color: #000000; transition: 1s;}
.main-project-page{background-color: #FFFFFF !important; margin-bottom: 0 !important;}
.main-project-page.bg-transparent{background-color: transparent !important;}
.footer-project-page{position: relative !important;}
.main-project-page .contact{overflow-x: visible !important;}
.project-page{position: relative; width: 100%; padding: 150px 0 0 0; background-color: #FFFFFF;}
.project-page .project-date{display: block; color: #000000; font-family: 'made_miragemedium'; font-size: 12px; text-transform: uppercase;}
.project-page .project-title{font-family: 'futuracondensed_extrabold'; text-transform: uppercase; color: #000000; font-size: 64px; transform: skew(-5deg); letter-spacing: -2px; margin-bottom: 15px;}
.project-page p{font-family: 'NeueHaasGroteskRegular'; font-size: 17px; margin-bottom: 20px; line-height: 23px;  color: #989898;}
.project-page p:last-child{margin-bottom: 0;}
.project-page .color-212121{color: #212121;}
.project-page .project-description.color-212121 p{color: #212121 !important;}
.project-page .project-description .ps-v2{font-size: 24px; line-height: 30px; margin-bottom: 30px;}
.project-page .project-tags{margin-top: 60px; font-family: 'NeueHaasGroteskRegular'; font-size: 15px;}
.project-page .project-tags li{display: inline-block; margin-right: 10px; margin-bottom: 5px;}
.project-page .project-tags li:last-child{margin-right: 0;}
.project-page .project-tags li{color: #ED4037; border: solid 2px #ED4037; border-radius: 50px; padding: 8px 22px; /*display: block;*/ background-color: transparent; transition: 0.3s;}
/*.project-page .project-tags li a:hover{color: #000000; background-color: #ED4037;}*/
.project-page .project-description-container{margin-bottom: 100px;}
.project-description-container.mh-100{min-height: 100vh;}
.project-page .section-title-project{margin-bottom: 18px;}
.project-page .section-title-project h2{font-family: 'futuracondensed_extrabold'; text-transform: uppercase; font-size: 40px; transform: skew(-5deg); letter-spacing: -1px; margin-bottom: 5px;}

.page-title{color: #EF4037; border-bottom: solid 1px; padding-bottom: 8px; margin-bottom: 28px; font-weight: 600; text-transform: uppercase; font-size: 32px; letter-spacing: -1px;}

.pr-0{padding-right: 0 !important;}
.pl-0{padding-left: 0 !important;}
.bg-F5E1E4{background-color: #F5E1E4;}
.bg-C7E3EF{background-color: #C7E3EF;}
.bg-0B0B0B{background-color: #0B0B0B;}
.mw-80{max-width: 80%;}
.mw-60{max-width: 60%;}
.ml--100{margin-left: -100px;}
.mr--100{margin-right: -100px;}
.mw-972px{max-width: 972px;}

.work-specifications{position: absolute; z-index: 1; bottom: 25%; left: 14%;}
.work-specifications.style-2{left: inherit; bottom: 14%; right: 8%;}
.work-specifications ul{display: flex ; flex-direction: column;}
.work-specifications.style-2 ul{align-items: start;}
.work-specifications ul li{display: flex; align-items: center; background-color: #FFFFFF; border-radius: 50px; box-shadow: 0 4px 11px rgb(0,0,0, 0.33); margin-bottom: 12px; padding: 12px 28px 12px 24px;}
.work-specifications ul li .icon{width: 32px; height: auto; margin-right: 16px;}
.work-specifications ul li span{color: #000000; font-size: 18px; font-weight: 400;}

.grid-specifications{grid-template-columns: 1fr 1.5fr 1fr; display: grid ; gap: 24px;}
.grid-specifications-item{box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.30); border-radius: 24px;padding: 36px; background-color: #FFFFFF;}
.grid-specifications-item p{font-size: 22px; margin-bottom: 0;}

.grid-specifications.grid-specifications2{grid-template-columns: 1fr; gap: 12px;}
.grid-specifications.grid-specifications2 .grid-specifications-item{border-radius: 24px; padding: 16px 24px; display: flex; align-items: center;}
.grid-specifications.grid-specifications2 .grid-specifications-item .icon{width: 46px; margin-right: 16px;}

.img-the-select-experience-05-2{position: absolute; top: 50%; right: 5%; width: 27%; transform: translateY(-50%); z-index: 2;}

.aspect-54{aspect-ratio: 5/4; object-fit: cover;}

.video-wrapper {
    position: relative;
    width: 100%;
    height: auto;
}
.video {
    opacity: 1;
    transition: opacity 1s ease;  display: block;
}
.poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.ratio-3x2{aspect-ratio: 3 / 2 !important; object-fit: cover !important;}
.ratio-87x75{aspect-ratio: 82 / 75 !important; object-fit: cover !important;}
.ratio-16x10{aspect-ratio: 16 / 10 !important; object-fit: cover !important;}
.ratio-16x9{aspect-ratio: 16 / 9 !important; object-fit: cover !important;}
.ratio-1280x720{aspect-ratio: 1280 / 720 !important; object-fit: cover !important;}

.audio-player{display: flex; justify-content: center; align-items: center; background-color: #101010;}
.play-btn, .pause-btn {
	background-color: #FFFFFF;
	cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
	border-radius: 50%;
}
.play-btn svg, .pause-btn svg {
    width: 24px;
    height: 24px;
    fill: #212121;
}
.pause-btn {
	display: none; /* Oculta el botón de pausa por defecto */
}
.audio-title{font-family: 'futuracondensed_extrabold'; text-transform: uppercase; font-size: 22px;  background-color: #212121; padding: 12px 20px 8px 20px;}
.audio-title span{transform: skew(-8deg); letter-spacing: -1px; display: block;}

.bg-1d1d1d{background-color: #1d1d1d;}
/*PROJECT PAGE*/

.back-to-top{margin-top: 40px; margin-bottom: 100px; color: #949494; transition: 0.3s;}
.back-to-top span{font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 15px;}
.back-to-top img{display: inline-block; height: 12px; margin-right: 3px;}
.back-to-top:hover{color: #000000;}

/*MENU*/
.fullPageMenu {position: fixed; top: -100vh; left: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #EE4037; transition: 1s; z-index: 1; visibility: hidden; opacity: 1; }
.fullPageMenu.active {top: 0%; transition: 0.6s; visibility: visible; opacity: 1; z-index: 9998; }
.fullPageMenu .nav { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.fullPageMenu .nav ul{position: relative;}
.fullPageMenu .nav ul li{ position: relative; list-style: none; margin: 25px 0; overflow: hidden; display: block; font-size: 60px; font-family: 'futuracondensed_extrabold'; text-align: center; line-height: 50px; }
.fullPageMenu .nav ul li a {position: relative; color: #000000; text-decoration: none; display: inline-block; text-transform: uppercase; transition: 0.5s ease-in-out; line-height: inherit; transform:  translateY(100%) skew(-8deg); letter-spacing: -3px; padding: 0 10px;}
.fullPageMenu .nav ul li a:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0%; height: 6px; background-color: #000000; transition: 0.2s;}
.fullPageMenu .nav ul li a:hover:after{ width: 100%;}
.fullPageMenu .nav ul li a.active:after{ width: 100%;}
.fullPageMenu .nav ul li a.fadeInUp{animation-delay: 1s !important;  animation: animfadeInUp 0.8s; animation-fill-mode: forwards;}
.fullPageMenu .nav ul li a.fadeOutUp{animation: animfadeInOut 0.6s; animation-fill-mode: forwards;}
.fullPageMenu .social-nav{position: absolute; left: 0; bottom: 25px; width: 100%;}
.fullPageMenu .social-nav ul{text-align: center;}
.fullPageMenu .social-nav ul li{display: inline-block; font-family: 'NeueHaasGroteskBold'; font-size: 16px; margin: 0 5px;}
.fullPageMenu .social-nav ul li a{opacity: 0; color: #000000; transition: 0.5s;}
.fullPageMenu .social-nav ul li a:hover{opacity: 0.7;}
.fullPageMenu .social-nav ul li a.fadeIn{animation: animfadeIn 1s; animation-delay: 1.5s; animation-fill-mode: forwards;}
.fullPageMenu .social-nav ul li a.fadeOut{animation: animfadeOut 1s; animation-fill-mode: forwards;}

.fullPageMenu .sub-menu{display: none; margin-top: 12px;}
.fullPageMenu  .nav ul li .sub-menu li{margin: 0 12px; font-size: 22px; font-family: 'NeueHaasGroteskBold'; text-align: center; line-height: 1.5;}
/*.fullPageMenu .sub-menu li{overflow: visible !important;}
.fullPageMenu .sub-menu li a{position: relative; transform: translateY(0) skew(0deg) !important;}
.fullPageMenu .sub-menu li a:after{display: none;}*/
/*.fullPageMenu .sub-menu li a.fadeOutUp{animation: none !important;}
.fullPageMenu .sub-menu li a.fadeInUp{animation: none !important;}*/
.fullPageMenu .nav ul li .sub-menu li a{letter-spacing: -1px !important; transform: translateY(100%) skew(-0deg); border-bottom: solid 1px #000000; display: block; padding: 4px 0;}
.fullPageMenu .nav ul li .sub-menu li a:hover:after{ width: 0%;}
.fullPageMenu .nav ul li .sub-menu li a.fadeInUp{animation-duration: 0.5s !important; animation-delay: 0s !important;}

@keyframes animfadeInUp {
  0% {
    transform:  translateY(100%) skew(-8deg);
  }
  100% {
    transform:  translateY(0%) skew(-8deg); opacity: 1;
  }
}

@keyframes animfadeInOut {
  0% {
    transform:  translateY(0) skew(-8deg); opacity: 1;
  }
  100% {
    transform:  translateY(-100%) skew(-8deg); opacity: 1;
  }
}

@keyframes animfadeIn {
  0% {
    opacity:  0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes animfadeOut {
  0% {
    opacity:  1;
  }
  100% {
    opacity: 0;
  }
}

.menuicon {
    position: absolute;
    top: 0;
    right: 20px;
    width: 28px;
    height: 20px;

    cursor: pointer;
	z-index: 9999;
	transition: 1s;
}

.menuicon span:first-child{
	width: 28px;
	height: 3px;
	background-color: #FF3333;
	position: absolute;
	top: 6px;
	right: 0;
	transition: 0.2s 
}

.menuicon span:nth-child(2){
	width: 20px;
	height: 3px;
	background-color: #FF3333;
	position: absolute;
	top: 12px;
	right: 0;
	transition: 0.2s;
}

.menuicon.active span:first-child{transform: rotate(45deg); top: 12px; background-color: #000000;}
.menuicon.active span:nth-child(2){transform: rotate(-45deg); width: 28px; transition: 0.2s; background-color: #000000;}

.menuicon:hover span:first-child{width: 20px; transition: 0.2s;}
.menuicon:hover span:nth-child(2){width: 28px; transition: 0.2s;}

.menuicon.active:hover span:first-child{width: 28px; transition: 0.2s;}

.header_sticky .menuicon{top: 0;}

/*LOADING*/
#preloader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; z-index: 99999;}
#status{width: 48px; height: 48px; display: inline-block; position: relative; left: calc(50% - 20px); top: calc(50% - 20px);}
#status::after,
#status::before {
  content: '';  
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #EE4037;
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}
#status::after{animation-delay: 1s;}

body.bg-FFFFFF #preloader{background-color: #FFFFFF;}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
/*LOADING*/

.lity.lity-opened{z-index: 99999;}
.lity-close{color: #FFFFFF !important; font-family: 'NeueHaasGroteskRegular' !important; font-size: 45px !important; right: 100px !important; top: 22px !important;}


@media (max-width: 1366px){
	.main-header{padding: 0 30px;}
	#hero .teaser video{padding: 75px 15px 15px 15px;}
	#about-us{padding: 80px 0 80px 0;}
	#works{padding: 0 85px 100px 85px;}
	#works .project-item .project-title h2{font-size: 63px; line-height: 63px;}
	#clients{padding: 0 85px 100px 85px;}
}

@media (max-width: 1140px){
	#hero h1{font-size: 89px; line-height: 80px; letter-spacing: -3px;}
	
	#services .div-services h2{font-size: 45px; margin-bottom: 15px;}
	#services .div-services p{font-size: 15px;}
}

@media (max-width: 1024px){
	body{cursor:inherit;}
	#mousepointer-outer{display: none;} 
	#mousepointer-inner{display: none;}
	
	#about-us{margin-top: -50%;}
	#about-us p{font-size: 43px; line-height: 79px;}
	#works .project-item .project-title h2{font-size: 53px; line-height: 53px;}
	#about-us p{font-size: 43px;}
	#about-us p span{font-size: 54px}
	
	#works .project-item{margin-bottom: 60px;}
}

@media (max-width: 971px){
	.work-specifications,.work-specifications.style-2{max-width: 90%; margin: 0 auto; margin-top: -86px; position: relative; left: inherit; right: inherit; bottom: inherit;}
	.aspect-54-lg{aspect-ratio: 5/4 !important; object-fit: cover !important;}
	.img-casa-cefiro-03-2-lg{margin: 0 auto; margin-top: -100px;}
	.img-casa-cefiro-04-2-lg{margin: 0 auto; margin-bottom: -62px;}
	.bg-F5E1E4-lg{background-color: #F5E1E4;}
}

@media (max-width: 800px){
	.main-header{top: 19px; padding: 0 15px;}
	.main-header.header_sticky{top: 25px;}
	
	#hero .teaser{top: 35px; width: calc(100% - 40px); height: calc(100% - 75px); margin: 0 20px 0 20px;}	
	#hero .teaser video{width: auto; height: 100%; padding: 20px 20px 20px 20px;}
	
	/*#about-us{margin-top: -100%;}*/
	
	/*#hero .teaser{height: 100%;}*/
	
	#services .weanalize .text-1{transform: scale(55);}
	#services .wecreate .text-2{transform: scale(55);}
	#services .weevolve .text-3{transform: scale(55);}
}

@media (max-width: 768px){
	.mb-50-767{margin-bottom: 50px !important;}
	
	.section-title{margin-bottom: 35px;}
	.menuicon{right: 10px;}
	
	#about-us p{padding: 0px 65px;}
	
	#works{padding: 0px 65px 100px 65px;}
	#works .project-item figure{max-width: 100%;}
	#works .project-item .project-title{position: relative; max-width: 100%; width: 100%; right: inherit; bottom: inherit;}
	#works .project-item .project-title h2{margin-right: 30px; margin-top: -20px;}
	
	#clients{padding: 0px 65px 100px 65px;}
	
	.project-description-container{padding: 0 80px;}
	.project-page .project-title{font-size: 55px; line-height: 65px;}
	
	.contact{height: 70vh;}
	.contact #envelope_dark{width: 75px;}
	.contact .contact-info h2{font-size: 50px; letter-spacing: -1.5px;}
	.contact .contact-info h3{font-size: 37px;}
	.contact .contact-info p{font-size: 14px;}
	
	#hero .btn-play{right: 50%; bottom: 50%; transform: translate(50%, 50%);}
	
	.lity-close{right: 22px !important; top: 12px !important;}
	
	.grid-specifications { grid-template-columns: 1fr;}
}

@media (max-width: 767px){
	.dn-767{display: none !important;}
	.mb-767-32{margin-bottom: 32px !important;}
	.pb-767-42{padding-bottom: 42px !important;}
	
	.back-to-top{margin-bottom: 120px;}
	footer{bottom: 20px;}
	footer span{display: block; text-align: center;}
	footer ul{text-align: center; margin-top: 20px;}
	
	.img-the-select-experience-05-2 { position: relative; top: inherit; right: inherit; width: 60%; transform: inherit; z-index: 2; margin: 0 auto; margin-bottom: -50px; }
}

@media (max-width: 576px){
	
	.w-sm-75{width: 75% !important;}
	
	.d-none-575{display: none !important;}
	.section-title h3{font-size: 19px;}
	
	.fullPageMenu .nav ul li{font-size: 40px; margin: 12px 0;}
	.fullPageMenu .nav ul li a{letter-spacing: -1.5px;}
	
	.main-header .header-logo{height: 15px;}
	.main-header .header-isotipo{height: 15px;}
	
	#about-us p{padding: 0px 15px;}
	#about-us p{font-size: 27px; line-height: 45px;}
	#about-us p span{font-size: 37px; letter-spacing: -1px;}
	
	#service{padding: 0 40px 0 40px;}
	#what-we-do{margin-top: -155% !important;}
	
	#works{padding: 0px 15px 50px 15px;}
	#works .project-item .project-title h2{margin-left: 15px; margin-right: 15px; font-size: 32px; line-height: 35px;}
	
	.project-page{padding: 120px 0 0 0;}
	.project-description-container{padding: 100px 30px;}
	.project-page .project-description-container{margin-bottom: 80px;}
	.project-page .project-title{font-size: 35px; line-height: 40px;}
	.project-page p{font-size: 15px; line-height: 21px;}
	.section-title-project p br{display: none;}
	
	.project-page .project-description .ps-v2{font-size: 20px; line-height: 24px; margin-bottom: 24px;}
	.project-page .project-tags{margin-top: 36px; font-size: 12px;}
	.project-page .project-tags li{margin-right: 2px;}
	.project-page .section-title-project h2{font-size: 36px; line-height: 36px; margin-bottom: 8px;}
	
	.page-title{font-size: 24px;}
	
	.item-service{margin-left: 30px;}
	#services .div-services h2{font-size: 30px; margin-bottom: 0px; letter-spacing: -1px;}
	#services .div-services p{margin-bottom: 8px; margin-left: 12px;}
	
	.contact .contact-info h2{font-size: 40px;}
	.contact .contact-info h3{font-size: 34px;}
	.contact #envelope_dark{width: 70px;}
}

.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  background-color: #25D366;
  color: white;
  text-decoration: none;
  border-radius: 40px;
  padding: 12px 18px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: background-color 0.3s ease;
}

.whatsapp-btn:hover {
  background-color: #1ebe5d;
}

.whatsapp-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  flex-shrink: 0;
  fill: white;
}

.whatsapp-text {
  display: inline;
}

/* Responsive: solo el ícono en pantallas pequeñas */
@media (max-width: 600px) {
  .whatsapp-text {
    display: none;
  }
  .whatsapp-btn {
    padding: 12px;
    border-radius: 50%;
  }
  .whatsapp-icon {
    margin-right: 0;
  }
}