@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); 
    } 
	@keyframes intro{
		0%{
		
		transform: translateY(0vh);
		}
		60%{
		
		transform: translateY(0vh);
		}
		100%{
		
		transform: translateY(-100vh);
		}
	}
#intro {
  position: fixed;
  inset: 0;  
	top: 0;
	left: 0; 
	animation: intro 3s forwards;
  transition: all 1s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;pointer-events: none;
	  background: linear-gradient(90deg,var(--ow),var(--s));
	
} 
 
	#intro img{
		 width: 133px;
		height: 133px;
		margin: auto;
	}
	
	
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: 100%;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;
	}
	  

/* ================= 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){
		 
		
.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;
} 
 

	
		
/* ================= 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;
	}	 
	}