@charset "utf-8";
/* CSS Document */
   
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 
/*
	font-family: "Mulish", sans-serif;
	font-family: "Montserrat", sans-serif;  
font-family: "Playfair Display", serif;
font-family: "Noto Serif", serif;
 
 */
:root{

--p: rgba(230,223,201,1.00); /*parchment*/
--s: #CDBD9F;/*sand*/
--o: #AEB592;/*olive*/
--s: rgba(143,149,126,1.00);/*sage*/
--b: #6E6552;/*bark*/
--ow: #2C2F1F;/*olivewood*/
	--LG: rgba(15,63,47,1.00);
		--DG: rgba(7,26,28,1.00);
		--G: rgba(10,43,44,1.00); 
		--LB: rgba(0, 92, 102, 1);
		--DB: rgba(5, 25, 30, 1);
		--B: rgba(0, 55, 65,1);  
}
  /*##########################################################
	   0.0 custom cursor
##########################################################*/ 
    .cursor-dot {
      top: 0px;
      left: 0px;
      position: fixed;
      width: 15px;
      height: 15px;
      background-color:#fff;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 9999999; 
		mix-blend-mode: difference;
    }
    .cursor-ring {
      top: -2px;
      left: -2px;
      position: fixed;
      width: 30px;
      height: 30px;
      border: 2px solid  beige;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 99999999;
		mix-blend-mode: difference;
    }
    .cursor-dot.is-hover {
      top: 0px;
      left: 0px;
      position: fixed;
      width: 5px;
      height: 5px;
      background-color:#ddd;
      border-radius: 0%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 99999999999; 
    }
    .cursor-ring.is-hover {
		box-shadow: 0 0 55px 1px #ddd;
		transition: 0.5s ease all;
      top: -45px;
      left: -45px;
      position: fixed;
      width: 100px;
      height: 100px;
      border: 1px solid #ddd;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 999999999;
		background-color: rgba(0,0,0,0.10);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px); 
    }
a:hover,
button:hover,
input:hover,
textarea:hover,
select:hover,
label:hover,
h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover,
p:hover,
div:hover,
label:hover,
*[role="button"]:hover{
	cursor: none !important;
}
    * {
	cursor: none !important;
        margin: 0;
        padding: 0;
        box-sizing: border-box; 
	font-family: "Montserrat", sans-serif;
    }
html{
	scroll-behavior: smooth;
}
    body {
        background:#222;
        overflow-x: hidden; 
		transition: all ease 1s;  
		scroll-behavior: smooth;
    } 
   
/* UX/UI FONTS LABELS Desktop FULL HD #########################################################*/
 
	.labelTitle{  
		font-weight: 700;  
		font-size: 55px; 
	}
	.labelSubtitle{ 
		font-size: 27px; 
		font-weight: 700;    
	}
	.labelText{  
		line-height: 1.5;
		font-size: 19px; 
  		font-weight: 300; 	 
	} 
    
	/*
	 font-family: "Cormorant Garamond", serif;
	font-family: "Allerta Stencil", sans-serif;
	
	*/ 
    /* DEBUG SCROLL */
    #scrollConsole { 
		display:none;
        position: fixed;
        bottom: 10px;
        left: 10px;
        padding: 8px 14px;
        background: rgba(25,25,25,1);
        color: #0f0;
        font-family: monospace;
        font-size: 14px;
        border: 1px solid rgba(0,255,0,0.4);
        border-radius: 6px;
        z-index: 999999;
        backdrop-filter: blur(5px); 
    }
/* ================= INTRO ================= */
	@keyframes intro{
		0%{
			background: black;
		}
		50%{
		}
		100%{
			background: black;
		}
	}
#intro {
  position: fixed;
  inset: 0;  
			background: black;
	animation: intro 2s ease;
  transition: background 1s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;pointer-events: none;
	background-color: #000;
	height:100vh;
}
.introBlinds{
	top:0;
	left:0;
	width: 100%;
	height:100vh;
	position: absolute; pointer-events: none; 
}	
.stageOne{
	top:0;
	left:0;
	width: 100%;
	height:100vh;
	position: absolute; 
	display: flex;
	flex-direction:column;
	z-index: 3;pointer-events: none; 
	}	
	.imgOneStageOne{
		width: 100%;
	height: 50%; 
	position: absolute;
	transition: 1s ease all;
	left: 0;
	top: 0;
	
	
	background-image: url("../blindOne.jpg");
	 
	background-size:  100% 100%;
  background-position: left top;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
		
	animation: imgStageOne 4s forwards;
  transition: all 1s ease;
	}
	.imgTwoStageOne{
	width: 100%;
	height: 50%; 
	position: absolute; 
	left: 0;
	bottom:0;	
	background-image: url("../blindOne.jpg");
	background-size:  100% 100%;
  	background-position: left bottom;
  	background-repeat:no-repeat;
  	background-attachment:fixed; /* EFECTO PARALLAX */ 
	animation: imgStageOne 4s forwards;
  transition: all 1s ease;
	}
	@keyframes imgStageOne{
		0%{
			height: 50%; 
		}
		33%{
			 height: 50%; 
		} 
		66%{
			 height: 50%; 
		} 
		100%{
			 height: 00%; 
		} 
	}	
	.stageTwo{
	top:0;
	left:0;
	width: 100%;
	height:100vh;
	position: absolute; 
	display: flex;
	flex-direction:column;
	z-index: 2;pointer-events: none; 
	}	
	.imgOneStageTwo{
		width: 100%;
	height: 50%; 
	position: absolute;
	transition: 1s ease all;
	left: 0;
	top: 0;
	background-image: url("../blindTwo.jpg");
	 
	background-size:  100% 100%;
  background-position: left top;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
		
	animation: imgStageTwo 6s forwards; 
	}
	.imgTwoStageTwo{
	width: 100%;
	height: 50%; 
	position: absolute;
	transition: 1s ease all;
	left: 0;
	bottom:0;	
	background-image: url("../blindTwo.jpg"); 
	background-size:  100% 100%;
  	background-position: left bottom;
  	background-repeat:no-repeat;
  	background-attachment:fixed; /* EFECTO PARALLAX */ 
	animation: imgStageTwo 6s forwards; 
	}
	@keyframes imgStageTwo{
		0%{
			height: 50%; 
		}
		33%{
			 height: 50%; 
		} 
		66%{
			 height: 50%; 
		} 
		100%{
			 height: 00%; 
		} 
	}	
	.stageThree{ 
	top:0;
	left:0;
	width: 100%;
	height:100vh;
	position: absolute; 
	display: flex;
	flex-direction:column;
	z-index: 1;pointer-events: none;
	}	
	.imgOneStageThree{
		width: 100%;
	height: 50%; 
	position: absolute; 
	left: 0;
	top: 0;
	background-image: url("../blindThree.jpg");
	 
	background-size:  100% 100%;
  background-position: left top;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
		
	animation: imgStageThree 8s forwards;
  transition: all 1s ease;
	}
	.imgTwoStageThree{
	width: 100%;
	height: 100%; 
	position: absolute;
	transition: 1s ease all;
	left: 0;
	bottom:0;	
	background-image: url("../blindThree.jpg");
	background-size:  100% 100%;
  	background-position: left bottom;
  	background-repeat:no-repeat;
  	background-attachment:fixed; /* EFECTO PARALLAX */ 
	animation: imgStageThree 8s forwards;
  transition: all 1s ease;
	}
	@keyframes imgStageThree{
		0%{
			height: 50%; 
		}
		33%{
			 height: 50%; 
		} 
		66%{
			 height: 50%; 
		} 
		100%{
			 height: 00%; 
		} 
	} 
	
header{
	position: fixed;
	top:0;
	left:0;
	z-index: 910;
	 width: 100%;
  height: 60px; 
	margin-top:-50%;
  transition: all 1s ease;
	display: flex;
	background:linear-gradient( rgba(7,26,28,0.0), rgba(0, 92, 102, 0.0));
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px); 
	border-bottom: 0px solid #777;
	box-shadow: 0 0 0px 0px #666;
}	
.header.active{
	margin-top: 0%; 
}
.header.changeBg{
	background:linear-gradient( rgba(44,47,31,0.80), rgba(44,47,31,0.20));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
	border-bottom: 1px solid #777;
	box-shadow: 0 0 33px 8px var(--DG);
}
.intro-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;pointer-events: none;
}
.intro-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: #ccc;
	border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition:
    transform 1.4s cubic-bezier(.77,0,.18,1),
    all 1s ease;pointer-events: none;
	z-index: 4;
}
.intro-logo.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: transparent;
}
#logoLeft {
  margin-left: -50px;
  transition: 1s ease all;
  display: flex;
  justify-content: center;
  align-items: center; pointer-events: auto; 
	position: fixed;
	background-color: black; 
}
#logoLeft img{
	margin: auto;
	width: 121px; pointer-events: auto;
}	
#logoRight {
  margin-left: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s ease all;
	position: fixed;  
}
#logoRight img{
	margin:  auto auto;
	width:121px;
	background-color: black; 
}
/* ================= idioma btn ================= */
.lan{
	margin: auto  auto  auto 3%;
	display: flex;
	text-decoration: none;
}
.lan p{
	font-size: 13px;
	margin: auto  auto  auto  5px ;
	text-decoration: none;
	color: #fff;
}
.idioma{
  width: 20px;
  height: 20px; 
	margin: auto  auto ;
}
/* =================logo in header ================= */
#logoHeader{
position: relative;
	z-index: 99999999;
	margin: auto  auto ;
  width: 60px;
  height: 60px; 
} 
/* ================= HAMBURGER ================= */
#hamburgerBtn{
position: relative;
	z-index: 99999999;
	margin: auto 3% auto auto;
  width: 60px;
  height: 60px;
  cursor: pointer; 
} 
.hamburger span {
  position: absolute;
  left: 0;
  width: 60px;
  height: 2px;
  background: #fff;
	border-radius: 13px;
  transition: 0.6s cubic-bezier(.77,0,.18,1);
  transform-origin: center;
}
.hamburger span:nth-child(1) {
  top: 14px;
}
.hamburger span:nth-child(2) {
  top: 29px;
}
.hamburger span:nth-child(3) {
  top: 43px;
}
.hamburger.active span:nth-child(1) {
  top: 25px;
  transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  top: 25px;
  transform: rotate(-45deg);
} 

/* ================= SIDENAV ================= */
#sidebar {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  overflow: hidden;
} 
.sidebar-Bg{
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	opacity: 0;
	pointer-events: none;
	width: 100vw;
	height: 100vh;
	background-image: url("../bg1.jpg"); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	transition: all 2s forwards;
}
.sidebar-BgMask{
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	background:linear-gradient(45grad,var(--ow),rgba(44,47,31,0.10));
}
.blinds {
  position: absolute;
  inset: 0;/* ✨ BLUR REAL SIN BORRAR CONTENIDO */
}
.blinds span {
  position: absolute;
  left: 0;
  width: 100%;
	height: calc(100% / 8 + 1px);
background-image: linear-gradient(90rad,var(--ow),var(--ow));
    
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.8s cubic-bezier(.77,0,.18,1);
  transition-delay: 0.3s;
}
/* POSICIÓN Y DELAY */
.blinds span:nth-child(1) { top: 0%;    transition-delay: 0s; }
.blinds span:nth-child(2) { top: 12.5%; transition-delay: .05s; }
.blinds span:nth-child(3) { top: 25%;   transition-delay: .1s; }
.blinds span:nth-child(4) { top: 37.5%; transition-delay: .15s; }
.blinds span:nth-child(5) { top: 50%;   transition-delay: .2s; }
.blinds span:nth-child(6) { top: 62.5%; transition-delay: .25s; }
.blinds span:nth-child(7) { top: 75%;   transition-delay: .3s; }
.blinds span:nth-child(8) { top: 87.5%; transition-delay: .35s; }
#sidebar .blinds span {
  transition-delay: .4s;
}
#sidebar.active .blinds span {
  transition-delay: 0s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
} 
#sidebar.active {
  pointer-events: auto;
}
#sidebar.active .blinds span {
  transform: scaleY(1);
  transition-delay: 0s;
}
/* ================= CONTENIDO ================= */
.sidebar-content {
  position: relative;
  z-index: 2;
	width: 80vw;
	margin: 10% 10vw 0% 10vw;
	height: auto; 
  padding: 0px 0px;
  color: #fff;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .6s ease,
    transform .6s ease; 
	display: grid; 
  perspective: 800px; 
}
#sidebar.active .sidebar-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .8s;
} 
#sidebar.active .sidebar-Bg{ 
	animation: 3s sideBarBg forwards;
	transition: all 2s forwards;
	
}
@keyframes sideBarBg{
		0%{
			opacity: 0; 
		}
		80%{
			opacity: 0; 
		}
		100%{
			opacity: 1; 
		}
	}	
.sidebar-content a { 
  font-size: 39px;
  font-weight: 300; 
  display: inline-block; 
  text-decoration: none ;
  margin-bottom: 13px;
  opacity: 0;
  transform: translateY(40px) rotateX(-90deg);
  transform-origin: top;
  transition:
    transform 0.8s cubic-bezier(.77,0,.18,1),
    opacity 0.6s ease;
	  background: linear-gradient(0deg,#fff,#fff,#fff);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Para Firefox */
  background-clip: text;
  color: transparent;
} 
#sidebar.active .sidebar-content a {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
} 
#sidebar.active .sidebar-content a:nth-child(1) { transition-delay: 0.9s; }
#sidebar.active .sidebar-content a:nth-child(2) { transition-delay: 1.0s; }
#sidebar.active .sidebar-content a:nth-child(3) { transition-delay: 1.1s; }
#sidebar.active .sidebar-content a:nth-child(4) { transition-delay: 1.2s; }
#sidebar.active .sidebar-content a:nth-child(5) { transition-delay: 1.3s; }
/* sidebarSocial */
.sidebarSocial{
	position: absolute;
	z-index: 3;
	width: 80vw;
	margin: 5% 10vw 0% 10vw;
	height: 10%; 
	display: flex;
  opacity: 0;
  transform: translateX(-1140px);
  transition:
    opacity 1s ease,
    transform 3s ease; 
  perspective: 800px;
}	
#sidebar.active .sidebarSocial {
  opacity: 1;
  transform: translateX(0);
  transition-delay: .8s;z-index: 3;
}	
	.sidebarSocial a{
		margin: 13px 21px 13px 0;
		text-decoration: none;
	}	
	.sidebarSocial a> img{
		width: 33px;
		height: 33px;
	}
	 
/* ================= hero================= */	
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
	z-index: 20;
}
/* VIDEO FULLSCREEN */
.slide-video {
		width: 130%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: -15%;
		z-index: 0;
	} 
.heroMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background-color: rgba(0,0,0,0.5);
}
.bg{
		position: absolute;
		width: 100vw;
		height: 100vh;
		z-index: 3; 
		object-fit: cover; /* 🔑 */
		transition: 1s ease all;
	}	
	@keyframes contentDx{
		0%{
			opacity: 0;
			transform: translateX(40px);
		}
		80%{
			opacity: 0;
			transform: translateX(40px);
		}
		100%{
			opacity: 1;
			transform: translateX(0px);
		}
	}	
.content{
	padding: 0px 0;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;  
	transition: ease all 1s;
	animation: contentDx 9s forwards; 
	display: flex;
	flex-direction: column; 
	}	
.content img{
	height: 100px;
	width: 200px;
	margin: auto auto 0 auto;
	}
.content h1{  
	text-align: center;
color:#eee; 
	width: 50%;
	font-size: 27px;
	margin:0 auto auto auto;
	font-family: "Noto Serif", serif; 
	font-weight: 300; 
	} 
 
	 	

/* ================= io (Listen After Desing) ================= */	
.io{
	background-image: url("../bg.jpg"); 
	background-size:  120% 120%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	 margin: 0;
	width: 100%;
	height: 100vh; 
	position:sticky;  
	display: flex;
 	transition: 1s ease all;
  padding: 0.2em;
	z-index: 19;
	
}
.ioMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background:linear-gradient(45grad,var(--ow),rgba(44,47,31,0.20));
}
.ioBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
}
.ioBox img{ 
	width: 400px;
	height: 200px;
}
.ioBox h2{
color:#eee; 
	width: 50%;
	font-size: 27px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-style: italic;
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.ioBox p{
color:#eee; 
	width: 50%;
	font-size: 21px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}

/* ================= ioSpacer (we Work) ================= */	
.ioSpacer{
	position: relative;
	width: 100%;
	height: 200vh; 
	display: flex;
	flex-direction: column;
	z-index: 18;
}
.ioSpacerFirst{ 
  position: sticky;
	top: 0;
	left: 0;
	background-image: url("../arquitectura-zona-hotelera.jpg"); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
  
	transition: 0.2s ease all;
	width: 100%;
	height: 100vh; 
  z-index: 1;
}
.ioSpacerBox{  
	background:linear-gradient(45grad,var(--ow),rgba(44,47,31,0.10));
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100vh;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 3; 
}
.ioSpacerBox img{ 
	margin-top: 100px;
	width: 100px;
	height: 100px;
}
.ioSpacerBox h3{
color:#eee; 
	width: 45%;
	font-size: 27px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.ioSpacerBox p{
color:#eee; 
	width: 45%;
	font-size: 21px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.ioSpacerSecond{ 
  z-index: 5;
	position: absolute;

	bottom: 0;
	right: 0;
	width: 50%;
	height: 200vh;
  clip-path: inset( 0 0 0 100% );
	transition: 1s ease all;
background-image: linear-gradient(90rad,var(--ow),var(--b));
}
.ioSpacerSecond.active{ 
  clip-path: inset(0% 0 0 0);
}
.ioSpacerSecond p{
color:#eee; 
	width: 95%;
	font-size: 21px;
	margin:130vh auto 0 auto;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.ioSpacerSecond h4{
color:#eee; 
	width: 95%;
	font-size: 27px;
	margin:0 auto auto auto;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
	font-style: italic;
}


/* ================= io (Listen After Desing) ================= */	
.howWeWork{
	background-image: url("../despacho-arquitectura.jpg"); 
	background-size:  120% 120%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	 margin: 0;
	width: 100%;
	height: 100vh; 
	position:sticky;  
	display: flex;
 	transition: 1s ease all;
  padding: 0.2em;
	z-index: 17;
	
}
.howWeWorkMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background:linear-gradient(45grad,var(--ow),rgba(44,47,31,0.20));
}
.howWeWorkBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
}
.howWeWorkBox img{ 
	width: 100px;
	height: 100px;
}
.howWeWorkBox h2{
	font-style: italic;
color:#eee; 
	width: 50%;
	font-size: 27px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.howWeWorkBox p{
color:#eee; 
	width: 50%;
	font-size: 21px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
 


/* ================= process ================= */	
.process{
	position: relative;
	width: 100%;
	height: 600vh; 
	display: flex;
	flex-direction: column;
	z-index: 19;
}
  
/* ================= oneItem ================= */	
.oneItem{
	position: sticky;
	top: 0;
	left: 0;
	background-image: url("../arquitectura-studio.jpg"); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal; 
	width: 100%;
	height: 100vh;  
	 margin: 0; 
	display: flex;
 	transition: 1s ease all;
  padding: 0.2em;
	z-index: 1; 
}
.oneItemMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background:linear-gradient(45grad,var(--DG),rgba(0,0,0,0.3));
}
.oneItemSpacer{
  position: relative; 
  width: 100%;
  height: 100vh;
  object-fit: cover; /*  */
  z-index: 1; 
}
.oneItemBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
display:flex;	top: 0;
	left: 0;
	position: s;
}
.oneItemBoxCard{ 
	position: relative;
	background-image: linear-gradient(#ccc,beige); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	width: 50vh;
	height: 50vh; 
	margin:  auto; 
  z-index: 1;
	display: flex;
	flex-direction: column;
}
.oneItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%;
	margin: auto;
  z-index: 1;
}
.oneItemBox h6{
color: brown;
	width: 90%;
	font-size: 27px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.oneItemBoxText { 
	width: 50%; 
	margin:auto 0 auto 0; 
}
.oneItemBoxText h5{
color:beige;  
	font-size: 21px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px goldenrod;
	font-style: italic;
}
.oneItemBoxText p{
color:#fff;  
	font-size: 17px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.oneItemBoxText span{
	font-family: "Noto Serif", serif; 
color:beige;  
}


/* ================= twoItem ================= */	
.twoItem{
	background-image: url("../arquitectura.jpg"); 
	background-size:  120% 120%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	 margin: 0;
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
 	transition: 1s ease all;
  padding: 0.2em;
	z-index: 2;
	
}
.twoItemMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background:linear-gradient(45grad,var(--DG),rgba(0,0,0,0.3));
}
.twoItemSpacer{
  position: relative; 
  width: 100%;
  height: 100vh;
  object-fit: cover; /*  */
  z-index: 1; 
}
.twoItemBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
display:flex;
	position: sticky	;top: 0;
	left: 0;
}
.twoItemBoxCard{ 
	position: relative;
	background-image: linear-gradient(beige,darkgoldenrod); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	width: 50vh;
	height: 50vh; 
	margin:  auto; 
  z-index: 1;
	display: flex;
	flex-direction: column;
}
.twoItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%;
	margin: auto;
  z-index: 1;
}
.twoItemBox h6{
color:#eee; 
	width: 90%;
	font-size: 27px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.twoItemBoxText { 
	width: 50%; 
	margin:auto 0 auto 0; 
}
.twoItemBoxText h5{
color:beige;  
	font-size: 21px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px goldenrod;
	font-style: italic;
}
.twoItemBoxText p{
color:#fff;  
	font-size: 17px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.twoItemBoxText span{
	font-family: "Noto Serif", serif; 
color:beige;  
}

/* ================= threeItem ================= */	
.threeItem{
	background-image: url("../arquitectura-despacho.jpg"); 
	background-size:  120% 120%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	 margin: 0;
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
 	transition: 1s ease all;
  padding: 0.2em;
	z-index: 2;
	
}
.threeItemMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background:linear-gradient(45grad,var(--DG),rgba(0,0,0,0.3));
}
.threeItemSpacer{
  position: relative; 
  width: 100%;
  height: 100vh;
  object-fit: cover; /*  */
  z-index: 1; 
}
.threeItemBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
display:flex;
	position: sticky	;top: 0;
	left: 0;
}
.threeItemBoxCard{ 
	position: relative;
	background-image: linear-gradient(darkgoldenrod,brown); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	width: 50vh;
	height: 50vh; 
	margin:  auto; 
  z-index: 1;
	display: flex;
	flex-direction: column;
}
.threeItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%;
	margin: auto;
  z-index: 1;
}
.threeItemBox h6{
color:#eee; 
	width: 90%;
	font-size: 27px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.threeItemBoxText { 
	width: 50%; 
	margin:auto 0 auto 0; 
}
.threeItemBoxText h5{
color:beige;  
	font-size: 21px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px goldenrod;
	font-style: italic;
}
.threeItemBoxText p{
color:#fff;  
	font-size: 17px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.threeItemBoxText span{
	font-family: "Noto Serif", serif; 
color:beige;  
}

/* ================= tfourItem ================= */	
.fourItem{
	background-image: url("../bg2.jpg"); 
	background-size:  120% 120%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	 margin: 0;
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
 	transition: 1s ease all;
  padding: 0.2em;
	z-index: 2;
	
}
.fourItemMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background:linear-gradient(45grad,var(--DG),rgba(0,0,0,0.3));
}
.fourItemSpacer{
  position: relative; 
  width: 100%;
  height: 100vh;
  object-fit: cover; /*  */
  z-index: 1; 
}
.fourItemBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
display:flex;
	position: sticky	;top: 0;
	left: 0;
}
.fourItemBoxCard{ 
	position: relative;
	background-image: linear-gradient(brown,var(--DG)); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	width: 50vh;
	height: 50vh; 
	margin:  auto; 
  z-index: 1;
	display: flex;
	flex-direction: column;
}
.fourItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%;
	margin: auto;
  z-index: 1;
}
.fourItemBox h6{
color:#eee; 
	width: 90%;
	font-size: 27px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.fourItemBoxText { 
	width: 50%; 
	margin:auto 0 auto 0; 
}
.fourItemBoxText h5{
color:beige;  
	font-size: 21px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px goldenrod;
	font-style: italic;
}
.fourItemBoxText p{
color:#fff;  
	font-size: 17px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.fourItemBoxText span{
	font-family: "Noto Serif", serif; 
color:beige;  
}

/* ================= fiveItem ================= */	
.fiveItem{
	background-image: url("../diseno.jpg"); 
	background-size:  120% 120%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	 margin: 0;
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
 	transition: 1s ease all;
  padding: 0.2em;
	z-index: 2;
	
}
.fiveItemMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background:linear-gradient(45grad,var(--DG),rgba(0,0,0,0.3));
}
.fiveItemSpacer{
  position: relative; 
  width: 100%;
  height: 100vh;
  object-fit: cover; /*  */
  z-index: 1; 
}
.fiveItemBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
display:flex;
	position: sticky	;top: 0;
	left: 0;
}
.fiveItemBoxCard{ 
	position: relative;
	background-image: linear-gradient( var(--DG),var(--G)); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	width: 50vh;
	height: 50vh; 
	margin:  auto; 
  z-index: 1;
	display: flex;
	flex-direction: column;
}
.fiveItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%;
	margin: auto;
  z-index: 1;
}
.fiveItemBox h6{
color:#eee; 
	width: 90%;
	font-size: 27px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.fiveItemBoxText { 
	width: 50%; 
	margin:auto 0 auto 0; 
}
.fiveItemBoxText h5{
color:beige;  
	font-size: 21px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px goldenrod;
	font-style: italic;
}
.fiveItemBoxText p{
color:#fff;  
	font-size: 17px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.fiveItemBoxText span{
	font-family: "Noto Serif", serif; 
color:beige;  
}


/* ================= sixItem ================= */	
.sixItem{
	background-image: url("../cancun.jpg"); 
	background-size:  120% 120%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	 margin: 0;
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
 	transition: 1s ease all;
  padding: 0.2em;
	z-index: 2;
	
}
.sixItemMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background:linear-gradient(45grad,var(--DG),rgba(0,0,0,0.3));
}
.sixItemSpacer{
  position: relative; 
  width: 100%;
  height: 100vh;
  object-fit: cover; /*  */
  z-index: 1; 
}
.sixItemBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
display:flex;
	position: sticky	;top: 0;
	left: 0;
}
.sixItemBoxCard{ 
	position: relative;
	background-image: linear-gradient(var(--LB),rgba(255,80,161,1.00)); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	width: 50vh;
	height: 50vh; 
	margin:  auto; 
  z-index: 1;
	display: flex;
	flex-direction: column;
}
.sixItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%;
	margin: auto;
  z-index: 1;
}
.sixItemBox h6{
color:#eee; 
	width: 90%;
	font-size: 27px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.sixItemBoxText { 
	width: 50%; 
	margin:auto 0 auto 0; 
}
.sixItemBoxText h5{
color:beige;  
	font-size: 21px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px goldenrod;
	font-style: italic;
}
.sixItemBoxText p{
color:#fff;  
	font-size: 17px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.sixItemBoxText span{
	font-family: "Noto Serif", serif; 
color:beige;  
}


/* ================= contact ================= */	
.contact{
	position: relative;
	width: 100%;
	height: 100vh; 
	display: flex;
	flex-direction: column;
	z-index: 19;
}
  
/* ================= oneItem ================= */	
.contactItem{
	position: sticky;
	top: 0;
	left: 0;
	background-image: url("../tulum.jpg"); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal; 
	width: 100%;
	height: 100vh;  
	 margin: 0; 
	display: flex;
 	transition: 1s ease all;
  padding: 0.2em;
	z-index: 1; 
}
.contactItemMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
	background:linear-gradient(45grad,var(--ow),rgba(0,0,0,0.3));
}
.contactItemSpacer{
  position: relative; 
  width: 100%;
  height: 100vh;
  object-fit: cover; /*  */
  z-index: 1; 
}
.contactItemBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
display:flex;	top: 0;
	left: 0; 
  clip-path: inset( 0 0  100%  0 );
	transition: 3s ease all;
}
.contactItemBox.active{ 
  clip-path: inset(0% 0 0 0);
}
.contactItemBoxCard{ 
	position: relative;
	background-image: linear-gradient(sandybrown,beige); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	width: 50vh;
	height: 50vh; 
	margin:  auto; 
  z-index: 1;
	display: flex;
	flex-direction: column;
}
.contactItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%;
	margin: auto;
  z-index: 1;
}
.contactItemBox a{
color: white;
	width: 90%;
	font-size: 17px;
	margin:auto auto ;
	font-family: "Montserrat", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
	text-decoration: none;
	background-color:var(--ow);
	border-radius: 55px;
	padding: 13px 21px;
	text-align: center;
}
.contactItemBoxText { 
	width: 50%; 
	margin:auto 0 auto 0; 
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-content: center;
}
.contactItemBoxText h5{
	text-align: right;
color:beige;   width:80%;
	margin:auto 13px auto auto ;
	font-size: 21px; 
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px goldenrod;
	font-style: italic;
}
.contactItemBoxText p{
	text-align: right;
color:#fff;   
	font-size: 17px; 
	margin:auto 13px auto auto ;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.contactItemBoxText span{
	font-family: "Noto Serif", serif; 
color:beige;  
}



/* ================= costos ================= */
.costos{ 
	 
	background-image: url("../riviera-maya.jpg"); 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal; 
	width: 100%; 
	 margin: 0; 
	display: flex;
	flex-direction: column;
 	transition: 1s ease all;
  padding: 0.2em; 
} 
.costosMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
}
.costosTitlep  {	
	z-index: 2;
	font-size: 33px;
	margin: auto auto 13px auto;
	background-color:var(--ow);
	padding: 5px 13px;
	border-radius: 13px;
	color :#fff;
}
.costosTextp  {	
	z-index: 2;
	font-size: 17px;
	margin: auto auto 13px auto;
	background-color: rgba(230,223,200,0.70);backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px); 
	padding: 5px 13px;
	border-radius: 13px;
	color :#444;
}
.costosTitlep  span{ 
	background: linear-gradient(45grad,var(--s),var(--o));
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
}
.costosBox{	
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	gap:13px; 
	width: 90%;margin:13px  auto auto auto;
	position: relative;
}
.costosBoxItem{ 
	margin:0% auto auto auto;
	width: 90%;
	height: 100%;
	display: flex;
	flex-direction: column; 
	justify-content: space-around; 
	background-color:rgba(230,223,201,0.50);backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px); 
	border-radius:13px;    
	border:1px solid #aaa;
	padding: 33px 21px;
} 
.costosBoxItem h3{
	width: 100%;
	font-size: 21px;
	color: #000;
	margin: auto auto 3px  auto;
	justify-content: center;
	text-align: center;font-weight: 500;
} 
.costosBoxItem h5{
	width: 100%;
	font-size: 20px;
	background: linear-gradient(45grad,brown,sandybrown);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	margin: 0 auto;
	justify-content: center;
	text-align: center;font-weight: 500;
} 
.costosBoxItem h6{
	width: 100%;
	font-size: 15px;
	color: #000;
	margin: 3px auto 21px auto;
	justify-content: center;
	text-align: center;
	font-weight: 300;
} 
.line{
	margin:0 auto  21px auto;
	width: 90%;
	height: 1px;
	background-color: #aaa;	border-radius:13px;  
}
.costosBoxItem p{
	font-size: 14px;
	color: #000;
	margin: 5px auto auto 5px; 
	text-align: left;
	font-weight: 300;
} 

/* ================= footer ================= */
footer{
  z-index: 5;
	position: relative; 
	width: 100%;
	height: 100vh; 
	transition: 1s ease all;
background-image: linear-gradient(90rad,var(--s),var(--s));
	display: flex;
	flex-direction: column;
	color: var(--ow);
}
footer img{
	width: 300px;
	height:150px;
	margin: auto auto 0 auto;
}
.lineFooter{
	margin:0 auto  21px auto;
	width: 100%;
	height: 1px;
	background-color: #aaa;	border-radius:13px;  
}
.footerBox{
	width: 90%;
	margin: 0 auto auto auto;
}
.footerText{
	margin: auto  auto ; 
	text-decoration: none;
	font-size: 17px;
}
.footerHeader{
	width: 100%;
	display: flex;
}
.footerHeader a{
	margin: auto auto 13px 0; 
	text-decoration: none;
	font-size: 17px;
	color: var(--ow);
}
.footerHeader p{
	margin: auto 0 13px auto ; 
	text-decoration: none;
	font-size: 17px;
}
.footerBottom{
	width: 100%;
	display: flex;
	margin: auto 0 ;
}
.footerBottom a{
	text-decoration: none;
}
.desing{
	margin: auto auto 13px 0 ;
	  
	text-decoration: none;
	font-size: 17px;
}
.desing a{  
	text-decoration: none;
	font-size: 17px;
	color: var(--ow);
}
.social{
	margin: auto 0 13px auto ;
	display: flex;
	flex-direction: column;
}
.icons{
	margin: auto 0 13px auto ;
	display: flex;
}
.social a{
	margin: auto 8px ; 
	color: var(--ow);
}
.social img{
	margin: auto auto ;
	width: 30px;
	height:30px; 
}

/* ================= Aanimaton ================= */
.section { 
  overflow: hidden;	
	
}
/* TEXTO */
.title  {   
	opacity: 0;
  transition: all ease 1s;    
	 transform:  translateY(113px);
}
/* visible */
.title.show  { 
	animation: textA forwards 1.5s;
} 
.img {  
  transition: all ease 1s;    
	 transform:  translateY(133px);
	opacity: 0;
}
/* visible */
.img.show { 
	animation: imgA forwards  1.5s;
}
@keyframes imgA {
	0%{
	opacity: 0.2; 
	 transform:  translateY(133px);
	}
	50%{
	opacity: 0.2;  
	} 
	
	100%{
  transform:  translateY(0px);
	opacity: 1; 
	}

	
}
@keyframes textA {
	0%{
	opacity: 0.2; 
	 transform:  translateY(133px);
	} 
	60%{    
	} 
	
	80%{ 
	opacity: 0.2;    
	} 
	
	100%{
	opacity: 1;  
	 transform:  translateY(0px);
	}

	
}


/* ================= next section animation ================= */	
	.next{
		width: 100vw;
		height: 100vh;
	  background: linear-gradient(90deg,var(--ow),var(--s));
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		transform: translateY(100vh);

  display: flex;
  align-items: center; 
		justify-content: space-around;
	}
	.activeNext{
		animation: next 1s forwards;
		transition: 0.51s ease all;
	}
@keyframes next{
		0%{ 
		transform: translateY(100vh);
		} 
		100%{ 
		transform: translateY(0vh);
		}
	}
	.next img{
		 width: 133px;
		height: 133px;
		margin: auto;
	}
	
	

/******************************************/	
/* MOBILE */
	@media(max-width:1024px){
		
	
	.imgOneStageOne{ 
	background-size:  200% 100%;
  background-position: center top;
  background-repeat:no-repeat;
  background-attachment:fixed;  
	}
	.imgTwoStageOne{ 
		
	background-size:  200% 100%;
  background-position: center top;
  background-repeat:no-repeat;
  background-attachment:fixed;  
	}
	.imgOneStageTwo{ 
	background-size:  200% 100%;
  background-position: center top;
  background-repeat:no-repeat;
  background-attachment:fixed;  
	}
	.imgTwoStageTwo{ 
		
	background-size:  200% 100%;
  background-position: center top;
  background-repeat:no-repeat;
  background-attachment:fixed;  
	}	
	.imgOneStageThree{ 
	background-size:  200% 100%;
  background-position: center top;
  background-repeat:no-repeat;
  background-attachment:fixed;  
	}
	.imgTwoStageThree{ 
		
	background-size:  200% 100%;
  background-position: center top;
  background-repeat:no-repeat;
  background-attachment:fixed;  
	}
		
.sidebar-Bg{
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	opacity: 0;
	pointer-events: none;
	width: 100vw;
	height: 100vh; 
	background-size:  200% 100%;
  background-position: right top;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	transition: all 2s forwards;
}
/* ================= hero================= */	
.hero {
  position: relative;
  width: 100vw;
  height: 100%;
  overflow: hidden;
}	
/* 📌 MENU LATERAL */
.hero-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 3;

  color: black;

  display: flex;
  align-items: center; 
}
.li {
  position: relative;
  overflow: hidden;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  padding-left: 10%;
  background: transparent;
	text-decoration: none;
}	
.liActive{
			margin-top: 5vh;
			height: 45vh;
			width: 100%;
		}	
.one{
			margin-top: 2vh;
			height: 8vh;
			width: 90%;
		}	
.two{
			margin-top: 2vh;
			height: 8vh;
			width: 80%;
		}	
.three{
			margin-top: 2vh;
			height: 8vh;
			width: 90%;
		}			
.four{
			margin-top: 2vh;
			height: 8vh;
			width: 100%;
		}
.li p{
			font-size: 17px; 
		}
.bg1,.bg2,.bg3,.bg4{
			display: none;
		} 
.content{
	padding: 0px 0;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%; 
	opacity: 0;
	transition: ease all 1s;
	animation: contentDx 9s forwards; 
	display: flex;
	flex-direction: column;
	}	
.content img{
	height: 100px;
	width: 200px;
	margin: 20% auto 0 0%;
	}		
.content h1{  
color:#eee; 
	width: 80%;
	font-size: 27px;
	margin:0 auto auto 3%;
	font-family: "Noto Serif", serif; 
	font-weight: 300; 
	text-align: left;     
	} 
 
/* ================= io (Listen After Desing) ================= */	
.io{ 
	background-size:  220% 120%; 
	width: 100%;
	height: 100vh;  
	
}
.ioBox{  
	padding: 2%; 
}
.ioBox img{ 
	margin-top: 25vh;
	width: 200px;
	height: 100px;
}
.ioBox h2{ 
	width: 75%;
	font-size: 21px;
	margin:auto auto auto 13px; 
}
.ioBox p{ 
	width: 75%;
	font-size: 17px; 
}
		
		
	
/* ================= ioSpacer (we Work) ================= */	
.ioSpacer{
	position: relative;
	width: 100%;
	height: 300vh; 
	background-size:  220% 120%; 
	display: flex;
	flex-direction: column;
}
.ioSpacerFirst{ 
  position: sticky;
	top: 0;
	left: 0; 
	
	background-size:  220% 120%; 
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
  
	transition: 0.2s ease all;
	width: 100%;
	height: 100vh; 
  z-index: 1;
}
.ioSpacerBox{   
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100vh;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 3; 
}
.ioSpacerBox img{ 
	width: 50px;
	height: 50px;
}
.ioSpacerBox h3{ 
	width: 100%;
	font-size: 21px;
	margin:auto auto auto 13px;
	font-family: "Noto Serif", serif; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.ioSpacerBox p{ 
	width: 100%;
	font-size: 21px;
	margin:auto auto auto 13px; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.ioSpacerSecond{ 
  z-index: 5;
	position: absolute;
	 
	bottom: 0;
	right: 0;
	width: 100%;
	height: 300vh;
  clip-path: inset( 100% 0 0 0);
	transition: 3s ease all; 
}
.ioSpacerSecond.active{ 
  clip-path: inset(0% 0 0 0);
}
.ioSpacerSecond p{
color:#eee; 
	width: 95%;
	font-size: 21px;
	margin:200vh auto 0 auto; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
.ioSpacerSecond h4{ 
	width: 95%;
	font-size: 27px;
	margin:0 auto auto auto; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}	

/* ================= io (Listen After Desing) ================= */	
.howWeWork{ 
	background-size:  220% 120%; 
	width: 100%;
	height: 100vh;  
	
}
.howWeWorkBox{  
	padding: 2%; 
}
.howWeWorkBox img{ 
	margin-top: 25vh;
	width: 33px;
	height: 33px;
}
.howWeWorkBox h2{ 
	width: 75%;
	font-size: 21px;
	margin:auto auto auto 13px; 
}
.howWeWorkBox p{ 
	width: 75%;
	font-size: 17px; 
}
		
		

/* ================= oneItem ================= */	
.oneItem{ 
	background-size:  220% 120%; 
  
} 
.oneItemBox{  
	margin: 0 auto;
	padding: 5%; 
display:flex;
	flex-direction: column; 
}
.oneItemBoxCard{  
	width: 40vh;
	height: 40vh; 
	margin:  auto auto 0 0%;  
}
.oneItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%; 
}
.oneItemBox h6{ 
	width: 90%;
	font-size: 21px; 
}
.oneItemBoxText { 
	width: 100%; 
	margin:5px 0 auto 0; 
	padding: 1% 2%;
}
.oneItemBoxText h5{ 
	font-size: 17px;  
}
.oneItemBoxText p{ 
	font-size: 15px;  
} 	

/* ================= twoItem ================= */	
.twoItem{ 
	background-size:  220% 120%; 
  
}  
.twoItemBox{  
	background-size:  220% 120%; 
	margin: 0 auto;
	padding: 5%; 
display:flex;
	flex-direction: column; 
}
.twoItemBoxCard{  
	width: 40vh;
	height: 40vh; 
	margin:  auto auto 0 0%;  
}
.twoItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%; 
}
.twoItemBox h6{ 
	width: 90%;
	font-size: 21px; 
}
.twoItemBoxText { 
	width: 100%; 
	margin:5px 0 auto 0; 
	padding: 1% 2%;
}
.twoItemBoxText h5{ 
	font-size: 17px;  
}
.twoItemBoxText p{ 
	font-size: 15px;  
} 	
		

/* ================= threeItem ================= */
.threeItem{ 
	background-size:  220% 120%; 
  
} 	 
.threeItemBox{  
	background-size:  220% 120%; 
	margin: 0 auto;
	padding: 5%; 
display:flex;
	flex-direction: column; 
}
.threeItemBoxCard{  
	width: 40vh;
	height: 40vh; 
	margin:  auto auto 0 0%;  
}
.threeItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%; 
}
.threeItemBox h6{ 
	width: 90%;
	font-size: 21px; 
}
.threeItemBoxText { 
	width: 100%; 
	margin:5px 0 auto 0;
	padding: 1% 2%; 
}
.threeItemBoxText h5{ 
	font-size: 17px;  
}
.threeItemBoxText p{ 
	font-size: 15px;  
} 	
		

/* ================= fourItem ================= */	
.fourItem{ 
	background-size:  220% 120%; 
  
}  
.fourItemBox{ 
	background-size:  220% 120%;  
	margin: 0 auto;
	padding: 5%; 
display:flex;
	flex-direction: column; 
}
.fourItemBoxCard{  
	width: 40vh;
	height: 40vh; 
	margin:  auto auto 0 0%;  
}
.fourItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%; 
}
.fourItemBox h6{ 
	width: 90%;
	font-size: 21px; 
}
.fourItemBoxText { 
	width: 100%; 
	margin:5px 0 auto 0; 
	padding: 1% 2%;
}
.fourItemBoxText h5{ 
	font-size: 17px;  
}
.fourItemBoxText p{ 
	font-size: 15px;  
} 	
				

/* ================= fiveItem ================= */	
.fiveItem{ 
	background-size:  220% 120%; 
  
}  
.fiveItemBox{  
	background-size:  220% 120%; 
	margin: 0 auto;
	padding: 5%; 
display:flex;
	flex-direction: column; 
}
.fiveItemBoxCard{  
	width: 40vh;
	height: 40vh; 
	margin:  auto auto 0 0%;  
}
.fiveItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%; 
}
.fiveItemBox h6{ 
	width: 90%;
	font-size: 21px; 
}
.fiveItemBoxText { 
	width: 100%; 
	margin:5px 0 auto 0; 
	padding: 1% 2%;
}
.fiveItemBoxText h5{ 
	font-size: 17px;  
}
.fiveItemBoxText p{ 
	font-size: 15px;  
} 	
		
/* ================= sixItem ================= */
.sixItem{ 
	background-size:  220% 120%; 
  
} 	 
.sixItemBox{  
	background-size:  220% 120%; 
	margin: 0 auto;
	padding: 5%; 
display:flex;
	flex-direction: column; 
}
.sixItemBoxCard{  
	width: 40vh;
	height: 40vh; 
	margin:  auto auto 0 0%;  
}
.sixItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%; 
}
.sixItemBox h6{ 
	width: 90%;
	font-size: 21px; 
}
.sixItemBoxText { 
	width: 100%; 
	margin:5px 0 auto 0; 
	padding: 1% 2%;
}
.sixItemBoxText h5{ 
	font-size: 17px;  
}
.sixItemBoxText p{ 
	font-size: 15px;  
} 	



/* ================= contact ================= */	 
.contactItemBox{ 
	width: 100%;
	height: 100%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5%;
  z-index: 2;
display:flex;
	flex-direction: column;top: 0;
	left: 0; 
  clip-path: inset( 0 0  100%  0 );
	transition: 3s ease all;
} 
.contactItemBoxCard{ 
	position: relative; 
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal;
	width: 40vh;
	height: 40vh; 
	margin:  0 auto auto auto; 
  z-index: 1;
	display: flex;
	flex-direction: column;
}
.contactItemBoxCard img{ 
	position: relative;
	width:90%;
	height: 70%;
	margin: auto;
  z-index: 1;
}
.contactItemBox a{ 
	width: 90%;
	font-size: 17px;
	margin:auto auto ; 
	font-weight: 300; 
	text-decoration: none; 
	border-radius: 55px;
	padding: 13px 21px;
	text-align: center;
}
.contactItemBoxText { 
	width: 100%; 
	margin:auto 0 auto 0; 
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-content: center;
}
.contactItemBoxText h5{
	text-align: left;   width:100%;
	margin: auto auto ;
	font-size: 21px;  
	font-weight: 300; 
}
.contactItemBoxText p{
	text-align: left; 
	font-size: 17px; 
	margin:auto 13px auto auto ; 
	font-weight: 300;
	-webkit-text-stroke:0.1px #666;
}
 	

/* ================= costos ================= */
.costos{ 
	  
	background-size:  100% 100%;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
  background-blend-mode: screen, screen, normal; 
	width: 100%; 
	 margin: 0; 
	display: flex;
	flex-direction: column;
 	transition: 1s ease all;
  padding: 0.2em; 
} 
.costosMask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /*  */
  z-index: 1;
}
.costosTitlep  {	
	z-index: 2;
	font-size: 33px;
	margin: 21px auto 13px auto; 
	padding: 5px 13px;
	border-radius: 13px; 
}
.costosTextp  {	
	z-index: 2;
	font-size: 17px;
	margin: 13px auto 13px auto; 
	padding: 5px 13px;
	border-radius: 13px; 
	width: 90%;
}
.costosBox{	
	display: flex;
	flex-direction: column; 
    grid-template-columns: repeat(1, 1fr);
	gap:13px; 
	width: 90%;margin:13px  auto auto auto;
	position: relative;
}
.costosBoxItem{ 
	margin:0% auto 0 auto;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column; 
	justify-content: space-around; 
	background-color: rgba(255,255,255,0.70);backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px); 
	border-radius:13px;    
	border:1px solid #aaa;
	padding: 33px 21px;
} 
.costosBoxItem h3{
	width: 100%;
	font-size: 21px; 
	margin: auto auto 3px  auto;
	justify-content: center;
	text-align: center;font-weight: 500;
} 
.costosBoxItem h5{
	width: 100%;
	font-size: 20px; 
	margin: 0 auto;
	justify-content: center;
	text-align: center;font-weight: 500;
} 
.costosBoxItem h6{
	width: 100%;
	font-size: 15px; 
	margin: 3px auto 21px auto;
	justify-content: center;
	text-align: center;
	font-weight: 300;
} 
.line{
	margin:0 auto  21px auto;
	width: 90%;
	height: 1px;
	background-color: #aaa;	border-radius:13px;  
}
.costosBoxItem p{
	font-size: 14px; 
	margin: 5px auto auto 5px; 
	text-align: left;
	font-weight: 300;
} 		
	

		
/* ================= footer ================= */
footer{
  z-index: 5;
	position: relative; 
	width: 100%;
	height: 100vh; 
	transition: 1s ease all; 
	display: flex;
	flex-direction: column;
}
footer img{
	width: 200px;
	height:100px;
	margin: 2px auto 0 auto;
}
.lineFooter{
	margin:0 auto  21px auto;
	width: 100%;
	height: 1px;
	background-color: #aaa;	border-radius:13px;  
}
.footerBox{
	width: 90%;
	margin: 0 auto auto auto;
}
.footerText{
	width: 90%;
	margin: auto auto 13px auto ; 
	text-decoration: none;
	font-size: 13px;
}
.footerHeader{
	width: 100%;
	display: flex;
flex-direction: column;
}
.footerHeader a{
	margin: auto auto 13px auto; 
	text-decoration: none;
	font-size: 13px;
}
.footerHeader p{
	margin: auto auto 13px auto; 
	text-decoration: none;
	font-size: 13px;
}
.footerBottom{
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	margin: 35% 0 auto 0;
}
.desing{
	margin: auto auto 13px auto; 
	text-decoration: none;
	font-size: 13px;
}
.desing a{  
	text-decoration: none;
	font-size: 13px;
}
.icons{
	margin: auto auto 13px auto ;
	display: flex;
}
.social{
	margin: auto auto 13px auto ;
	display: flex;
}
.social a{
	margin: auto 8px ; 
}
.social img{
	margin: auto auto ;
	width: 30px;
	height:30px; 
}
	
/* ================= CONTENIDO ================= */
.sidebar-content { 
	margin: 30% 10vw 0% 10vw; 
} 
.sidebar-content a { 
  font-size: 33px; 
  margin-bottom: 33px; 
}  
		
    .cursor-dot { 
		display:none;
    }
    .cursor-ring { 
		display:none;
    }
    .cursor-dot.is-hover { 
		display:none;
    }
    .cursor-ring.is-hover {  
		display:none; 
    } 
	.sidebarSocial a{
		margin: 13px 21px 13px 0;
		text-decoration: none;
	}	 
	}