@charset "utf-8";
/* CSS Document */
		
		@font-face {
			font-family: "ROADSTORE";
			src: url("../fonts/ROADSTORE.ttf")
			format('truetype');
			font-weight: normal;
			font-style:normal;
		}
		@font-face {
			font-family: "Carnevalee";
			src: url("../fonts/Carnevalee.ttf")
			format('truetype');
			font-weight: normal;
			font-style:normal;
		}
		@font-face {
			font-family: "Bronco";
			src: url("../fonts/Bronco.ttf")
			format('truetype');
			font-weight: normal;
			font-style:normal;
		}	
	  /*
	  blue #00205B
	  red #d90000
	  Orange #bf5700
	  darkgray #333F48
	  
	  	font-family: 'Nunito Sans', sans-serif; 
	font-family: 'Rubik', sans-serif;
	font-family: 'Roboto', sans-serif;
	font-family: 'Fredoka', sans-serif;
	font-family: 'Libre Baskerville', serif;
	font-family: 'Saira', sans-serif;
	font-family: 'Montserrat', sans-serif;  
	 */
	  
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      font-family: sans-serif;
      perspective: 1000px;
      overflow-x: hidden;  
		background-color: #000;
    }
    #main {
      height: 100%;
      width: 100%;
      overflow-y: scroll; 
      overflow-x: hidden;
		background-color: #000;
    }
    #console {
      position: fixed;
      bottom: 33vh;
      right: 13px;
      background:rgba(0,44,255,1);
      color: lawngreen; 
      font-family: monospace;
      z-index: 1000;
		border-radius: 5px;
		padding: 13px; 
		pointer-events: none;
		display:none;
    }
    .welcome {
      width: 100vw;
      height: 100vh;
		background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;		
      animation: fadeOut 1s forwards;
      animation-delay: 5s;
		z-index: 5;
		position: fixed;
    }
    #expanding-image {
      width: 50px;
      height: 50px; 
      animation: expandImage 5s forwards;
      animation-delay: 1s;
    }
    @keyframes expandImage {
      0% {
        width: 50px;
        height: 50px;
      }
      100% {
        width: 500vh;
        height: 500vh;
        object-fit: cover;
      }
    }	  
    @keyframes fadeOut {
      0% { 
		  opacity: 1;
      }
		
      99% {  	  
      height: 0%;
      }
      100% { 
		opacity: 0;		  
      height: 0%;
      }
    }  
    @keyframes showHeader {
      0% {  
		  top: -89px;
      } 
	  100% {  
		  top: 0px;
      }
		 
    }


	/* next *******************************/ 
#next{
	width: 100vw;
	height: 130vh;
	margin-top: 130vh; 
	top: 0;
	left: 0;
	z-index: 99;
	border-top-left-radius: 21%;
	border-top-right-radius: 21%;
	position: absolute;
      background-color:white; 
	text-align: center;
}
#next img{
	  position:relative; 
  width:133px;
  height:133px;
  top: 50%;  
}

.activeNext{
         animation: showNext 1s forwards; 
	  }
    @keyframes showNext {
      0% {  
	margin-top: 130vh;
      } 
	  100% {  
	margin-top: -30vh;
      }
		 
    }
	  
	 
	/* header *******************************/ 
	  .menu-btn {
		 display: none;
            transition: top 0.3s; /* Smooth transition for the header */
	}
	  #header{
		  width: 100vw;
		  height: 89px;
		  background-color: #fff;
		  position: fixed;
		  top: 0px;
		  left: 0;
		  z-index: 2;
            transition: top 0.3s; /* Smooth transition for the header */
		  box-shadow: 0 0 21px 1px #aaa;		  
		  display: 	  flex;
	  }
	  #logoHeader{
		  width: 79px;
		  height: 79px;
		  margin: 5px;
		  margin-left: 5vw;
	  }	  
	  .menuDesktop{
		  width: auto; 
		  height: 100%;
		  margin-left: auto; /* 👈 Esto lo empuja a la derecha */
		  margin-right: 5vw;
		  font-size: 1.5em;

  display: flex;               /* Flexbox para alinear contenido */
  align-items: center;         /* Centrado vertical */

  justify-content: center;     /* Centrado horizontal */
	  }  
	  .menuDesktopBtn{
		  text-decoration: none;
		  margin: auto 13px;
		  color: #888;
	  	font-family: 'Bronco', sans-serif; 
		  transition: ease 1s;
		  font-size: 1.2em;
      padding: 12px 20px; 
	  }
	  .menuDesktopBtn:hover{
		  color: #111;
	  }
      .dropdown {
      position: relative;
      display: inline-block;
		float: left;
	  	font-family: 'Nunito Sans', sans-serif; 
    }
      .dropbtn {
		  text-decoration: none;
		  margin: auto 13px;
		  color: #888;
	  	font-family: 'Bronco', sans-serif; 
		  transition: ease 1s;
		  font-size: 1.2em;
      padding: 12px 20px; 
    }
      .dropdown-content {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 160px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
      border-radius: 5px;
      z-index: 1;
		  transition: 2s ease;
		  opacity: 0;
    }
	  .dropdown-content a {
      color: #333;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      transition: background 0.3s;
    }
      .dropdown-content a:hover {
      background-color: #f1f1f1;
    }
      .dropdown:hover .dropdown-content {
      display: block;
		  opacity: 1;
    }
      .dropdown:hover .dropbtn {
      background-color:  #bf5700;color: white;
    }

/* sidenav *******************************/ 
#logoSideNav{
	width: 133px;
	height: 133px;
	z-index: 5;
	position: absolute; 
	left: 21px;
	opacity: 0;
}
@keyframes activeLogo { 
    0%{ 
		top: -133px;
	}    
    100%{
		opacity: 1;	
		top: 13px;
	}    
}
@keyframes activeSocialBtns{ 
    0%{ 
		bottom: -133px;
	}  
	 75%{ 
		opacity: 0;
	}  
    100%{
		opacity: 1;	
		bottom: 13px;
	}    
}
@keyframes activeSN { 
    0%{ 
		
      transform: rotateX(90deg);
	}  
	50%{ 
		
      transform: rotateX(90deg);
	}    
    100%{
      transform: rotateX(0deg);
	}    
}
.activeLogoSN{
         animation: activeLogo 1s forwards; 
}
.activeL{
         animation: activeSocialBtns 3s forwards; 
}
.activeSNOne{	
         animation: activeSN 1.2s forwards; 
}
.activeSNTwo{
         animation: activeSN 1.52s forwards; 
}
.activeSNThree{
         animation: activeSN 1.82s forwards; 
}
.activeSNFour{
         animation: activeSN 2s forwards; 
}

#socialBtns{
	width: 133px;
	height: 133px;
	z-index: 5;
	position: absolute; 
	left: 21px;
	bottom: 0; 
	opacity: 0;
}

      .flip-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index:2;
      width: 100vw;
      height: 100vh;
      background-color: navajowhite; 
      display: grid;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      border-radius: 10px;
      transform: rotateX(90deg);
      transition: transform 0.6s ease; 
		  opacity: 0;
    }
	  .flip-box.visible {
      transform: rotateX(0deg);
    }
      button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 1rem;
      cursor: pointer;
    }	  
      .items { 
		  height: 70vh;
		  width: auto;
		  margin: 20vh auto 10vh 10vw;
		  display: grid;
    }
	  .items a{
			font-size: 2.1em;
			color: transparent;
			-webkit-text-stroke: 2px #333; /* grosor y color del borde */
  			text-stroke: 2px #333; /* estándar (por compatibilidad futura) */	 
      transform: rotateX(90deg);
		  text-decoration: none;
		} 

	/* index *******************************/
	  .index{
		  width: 100vw;
		  height: 100vh;
		  background-image: url("../index.jpg");
	  } 
	  .videoHome{ 		  	
	  position:relative;
  z-index: 0;
  object-fit: cover;
  width:100vw;
  height:100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
		  pointer-events: none;
	  }
	  .mask{
		  background-color: rgba(0,0,0,0.69);
		  width: 100%;
		  height: 100vh;
		  top: -95vh;
		  left: 0;
		  position: relative;
		  z-index: 1;
}
	  .mask h1{
		  padding-top: 33vh;
		  font-size: 3.5em;
		  font-weight: 100;
		  color: #fff;
		  width: 80%;
		  padding-left: 10%;
		  font-family: "ROADSTORE";
 		  mix-blend-mode: difference; 
	  }
	  .mask p{
		  padding-top: 1vh;
		  font-size: 1.7em; 
		  color: #aaa;
		  width: 80%;
		  padding-left: 10%;  
	font-family: 'Libre Baskerville', serif;
	  }
	  .re{ 
	background: linear-gradient(25grad,gold,orangered,#bf5700,orangered,orange,gold,gold,orangered,#bf5700,orangered,orange,gold);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;  
		    background-size: 400% 400%; 
         animation: moveBg 5s ease infinite;
	  }
	  
	/* time *******************************/
	  #time{
		  width: 100%;
		  height:200vh;
		  background-color: #000;
	  } 
	  .timeInside{
		  width: 90%;
		  padding: 10vh 5% 0 5%;
		  display: flex;
	  }
	  .timeItem{
		  width: 50%;
		  display: grid;
	  }
	  .t{ 
		  color: #fff;
		  margin: auto;
		  padding-top: 1vh;
		  font-size: 1.7em;    
	font-family: 'Libre Baskerville', serif;
		  z-index: 1;
  mix-blend-mode: difference; 
	  }
	  #timeText{
		  padding-top: 33vh;
		  font-size: 3.5em;
		  font-weight: 100;
		  color: #fff;
		  width: 80%;
		  padding-left: 10%;
			font-family: "ROADSTORE";
  mix-blend-mode: difference; 
		  z-index: 1;
	  }
	  .icon{
		  width: 133px;
		  height: 133px;
		  margin: auto auto 0 auto;
		  z-index: 0;
	  }
	  .img{
		  width: 333px;
		  height: 333px;
		  margin: auto;
		  z-index: 0;
	  }
	  
	/* experience  *******************************/
	  .experience{
		  width: 100%;
		  height: 200vh;
	  }
	  #rec{
	  	position:relative;
  		z-index: 0;
  		object-fit: cover;
  		width:10px;
  		height:10px;
  		top: 50%;
  		left: 50%; 
  		transform: translate(-50%, -50%); 
	  }
   	  @keyframes cubeExpand {
      0%   { 
	  	position:relative;
  		z-index: 0;
  		object-fit: cover;
  		width:10px;
  		height:10px;
  		top: 0%;
  		left: 50%;
	 	background-color: orangered;
  		transform: translate(-50%, -50%);
		pointer-events: none;
		border-radius: 144px;
		}
	50%   { 
	  	position:relative;
  		z-index: 0;
  		object-fit: cover;
  		width:300px;
  		height:300px;
  		top: 0%;
  		left: 50%;
	 	background-color: orangered;
  		transform: translate(-50%, -50%);
		pointer-events: none;
		border-radius: 144px;
		}
		
    75% {   
 	 	top: 49%;
  		width:100vw;
  		height:202vh; 
	 	background-color: #fff;  
		}
    90% {   
	 	background-color: #fff;  
		}
		
    100% {  
 	 	top: 49%;
  		width:100vw;
  		height:202vh; 
	 	background-color: #000  
		}
   	 }
	  @keyframes bout {
	 0% {  
 	 	top: 49%;
  		width:100vw;
  		height:202vh; 
	 	background-color: #000; 
		}
      100%   { 
	  	position:relative;
  		z-index: 0;
  		object-fit: cover;
  		width:10px;
  		height:10px;
  		top: 0%;
  		left: 50%;
	 	background-color: orangered;
  		transform: translate(-50%, -50%);
		pointer-events: none;
		border-radius: 144px;
		}
		
    
   	 }
	  @keyframes s {
	 0% {    
		 opacity: 0;
		}
      90%   {   
		 opacity: 0;
		}
      100%   {   
		 opacity: 1;
		}
		
    
   	 }
	  @keyframes moveBg { 
    0%{background-position:0% 0%; }  
	25%{background-position:25% 25%; } 
	50%{background-position:75% 75%; }
	55%{background-position:100% 100%; }
	75%{background-position:80% 80%;  }
	80%{background-position:70% 70%; } 
    100%{background-position:0% 0%;   }
	
	
}
	  .vi{
         animation: cubeExpand 1s forwards; 
	  }
	  .vi0{
         animation: bout 1s forwards; 
	  }
	  .bg{
		  width: 100%;
		  height: 100%;
		  background-image: url("../index.jpg");
		  background-size: cover;
		  opacity: 0;
	  }
	  .ba{
         animation: s 1s forwards; 
	  }
	  #titleEx{ 
		  padding-top: 33vh;
		  font-size: 3.5em;  
		  width: 80%;
		  padding-left: 10%;
		  font-family: "ROADSTORE";  
	background: linear-gradient(0grad,gold,orangered,#bf5700,orangered,orange,gold,gold,orangered,#bf5700,orangered,orange,gold);
		    background-size: 400% 400%; 
         animation: moveBg 8s ease infinite;
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	  } 
	  #textEx{ 
		  font-size: 1.5em; 
		  color: #fff;
		  width: 80%;
		  padding-left: 10%;  
	font-family: 'Libre Baskerville', serif; 
	  }
	  .contactBtns{
		  width: 80%;
		  margin: auto 10%;
		  display: flex;
	  }
	  .contactBtnsInside{
		  width: 50%;
		  margin: 3vh 0%;
		  display: block;
	  }
	  .btnCall{
		  width: auto;
		  height: auto;
		  background-image: linear-gradient(0grad,#bf5700,gold,#bf5700); 		
		  background-size: 400% 400%; 
         animation: moveBg 8s ease infinite;
		  background-size: 400% 400%; 
         animation: moveBg 21s ease infinite;
		  color: #000;
		  margin: 13px;
		  padding: 13px;
		  border-radius: 13px; 
		  font-size: 2.5em; 
		  text-decoration: none;
		  color: #000; 
	font-family: 'Montserrat', sans-serif;  
		  transition: all 2s ease; 
	  }  
	  .btnCall:hover{
		  box-shadow: 0 0 21px 3px goldenrod;
		  color: #fff;
	  }
	  .contactP{
		  padding-top: 1vh;
		  font-size: 2.3em;  
	font-family: 'Bronco'; 
	background: linear-gradient(25grad,gold,orangered,#bf5700,orangered,orange,gold);
		  background-size: 400% 400%; 
         animation: moveBg 8s ease infinite;
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;  
	  }	  
	  .contact{  
		  padding-top: 1vh;
		  font-size: 1.7em; 
		  color: #aaa; 
	font-family: 'Libre Baskerville', serif;
		  width: 80%;
		  padding-left: 10%;   
	  }
	  
	  
	/* budget  *******************************/
	  #budget{
		  width: 100%;
		  height: 100vh;
		  background-color: #000;
	  }
	  .budget{		  
	  	position:relative;
  		z-index: 0;
  		object-fit: cover;
  		width:80vw;
  		height:20vh;
  		top: 50%;
  		left: 50%; 
  		transform: translate(-50%, -50%); 
		background-image: url(../badget.jpg);
		  background-size: cover;
      transition: all 1s ease;
	  }
	  .budgetTop{
		  width: 100%;
		  height: 10vh;
		  background-color: #000;  
		  transform: translate3d(50px, 20px, 100px)
                 scale3d(1.2, 1.2, 1)
                 rotate3d(1, 1, 0, 30deg) rotateX(60deg);
      transition: transform 0.8s ease;
		  position: relative;
		  display: grid;
		  border: 1px solid #000;
		  outline:  1px solid #000;
		  margin: 0;
	  }   	  
	  .budgetTop p{		
		  position: relative;   
		  font-size: 1.5em;   
		  margin: auto;
		  font-family: "ROADSTORE";  
	background: linear-gradient(25grad,gold,orangered,#bf5700,orange,gold);  
		 background-size: 400% 400%; 
         animation: moveBg 8s ease infinite;
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	  } 
	  .trapezoid {
      width: 100%;
      height: 10vh;
      background: #000;
      clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
		  
		  transform: translate3d(50px, 20px, 100px)
                 scale3d(1.2, 1.2, 1)
                 rotate3d(1, 1, 0, 30deg) rotateX(60deg);
      transition: transform 0.8s ease;
    } 	  
	  #textBudget{ 
		 margin: auto;
  width: 80%;
		 padding-top: 3ch;
  font-size: 1.5em; 
  font-family: 'Libre Baskerville', serif;  
		  color: #000; 
      transition: all 2s ease;
		 opacity: 0;
	  } 
	  .btnsBudget{
		  width: 80%;
		  margin: 5vh 10%;
		  display: flex;
	  }	  
	  .btnBudget{
		  width: auto;
		  height: auto; 
		  color: #fff;
		  margin: 13px;
		  padding: 13px;
		  border-radius: 13px; 
		  font-size: 2em; 
		  text-decoration: none; 
	font-family: 'Bronco';  
		  border: 1px solid gold;
		  background-color: rgba(0,0,0,0.80);
		  opacity: 0;
		  
	  }  
	  .btnBudget:hover{
		  box-shadow: 0 0 21px 3px goldenrod;
		  color: #fff; 
	  }
	  .active{		  
		   animation: 2s forwards s;
	  }
	  .active0{
		  
		   animation: 3s forwards s;
	  } 
	  
	/* aboutUs *******************************/
	  #aboutUs{
		  width: 100%;
		  height: 100vh;
		  background-color: #fff;
		  display: grid;
		  position: relative;
	  }
	  #aboutUsTitle{ 
		  padding-top: 3vh;
		  font-size: 2.5em;  
		  width: 80%;
		  padding-left: 10%;
		  font-family: "ROADSTORE";  
	background: linear-gradient(25grad,gold,orangered,#bf5700,orangered,orange,gold);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	  } 
	  #aboutUsText{    
  width: 80%;
		  margin: 0 10%;
  font-size: 1.5em; 
  font-family: 'Libre Baskerville', serif;
  text-align: left;
  z-index: 1;  
		  color: #fff;
  transition: background 0.2s ease;
		  mix-blend-mode: difference;
	  }	  
	  #aboutUsImg{
	  width: 333px;
  height: 333px;
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
  pointer-events: none;
		  background-image: url("../vera.jpg");
		  background-size: cover;
	  }
	  
	 /* works *******************************/ 
	  #works {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
	  .worksWrapper {
  display: flex;
  height: 100%;
  transition: transform 1s linear;
  padding: 0 10vw;
  box-sizing: border-box;
  gap: 4vw;
}
	  .works {
  flex: 0 0 40vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  font-family: "ROADSTORE";
  color: #eee;
  background-size: cover;
  background-position: center;
			  -webkit-text-stroke: 2px black; /* grosor y color del borde */
  text-stroke: 2px black; /* estándar (por compatibilidad futura) */
}
	  #work1{
  		background-image: url("../f0.jpg");
  		background-size: cover;
	  }
	   #work2{
  		background-image: url("../f1.jpg");
  		background-size: cover;
	  }
	   #work3 {
  		background-image: url("../f2.jpg");
  		background-size: cover;
	  } 
	   #work4 {
  		background-image: url("../f3.jpg");
  		background-size: cover;
	  } 
	  #work5 {
  		background-image: url("../f4.jpg");
  		background-size: cover;
	  } 
	  #work6 {
  		background-image: url("../f5.jpg");
  		background-size: cover;
	  } 
	  #work7 {
  		background-image: url("../f6.jpg");
  		background-size: cover;
	  } 
	  #work8 {
  		background-image: url("../f7.jpg");
  		background-size: cover;
	  } 
	  #work9 {
  		background-image: url("../f8.jpg");
  		background-size: cover;
	  } 

	  
	/* materials *******************************/ 
		#materials{
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 columnas */
  grid-template-rows: repeat(2, 1fr);    /* 2 filas */
  width: 100vw;
  height: 100vh;
}
		.materials{
  display: flex;
  align-items: center;
  justify-content: center; 	
  font-size: 2em;   
  font-family: "ROADSTORE";  
  color: #fff;
			  -webkit-text-stroke: 2px black; /* grosor y color del borde */
  text-stroke: 2px black; /* estándar (por compatibilidad futura) */
}  
		#material0{   	
  font-size: 2em;   
  font-family: "ROADSTORE";  
  background: linear-gradient(25grad,gold,orangered,#bf5700,orangered,orange,gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
} 
		#material1{
			background-image: url("../m1.jpg");
			background-size: cover; 
			background-position: 0 ;
	  }
	  #material2{
			background-image: url("../m2.jpg");
			background-size: cover; 
			background-position: 0 ;
	  }
	  #material3{
			background-image: url("../m3.jpg");
			background-size: cover; 
			background-position: 0 ;
	  }
	  #material4{
			background-image: url("../m4.jpg");
			background-size: cover; 
			background-position: 0 ;
	  }
	  #material5{
			background-image: url("../m5.jpg");
			background-size: cover; 
			background-position: 0 ;
	  }
	  #material6{
			background-image: url("../m6.jpg");
			background-size: cover; 
			background-position: 0 ;
	  }
	  #material7{
			background-image: url("../m7.jpg");
			background-size: cover; 
			background-position: 0 ;
	  }
	  #material8{
			background-image: url("../m8.jpg");
			background-size: cover; 
			background-position: 0 ;
	  }
	  #material9{
			background-image: url("../m9.jpg");
			background-size: cover; 
			background-position: 0 ;
	  }
	  
	  
	/* footer *******************************/ 
	#footer{
			display: flex;
			width: 100vw;
			height: 100vh;
			background-color: #fff; 
	  }	
	.fam{
			width: 50vw;
			height: 100vh; 
	  } 	
	.logo{
		padding-top: 3vh;
			width: 150px;
			height: 150px; 
	  } 	  
	.circle-wrapper {
  position: relative;
  top: 50%;
  left: 20%;
	padding-top: 50vh;
  transform: translate(-50%, -50%);
  perspective: 2000px;

}
	.text-circle {
  position: relative; 
  transform-style: preserve-3d;
  animation: rotate 5s linear infinite;
  transform: rotateX(-45deg) rotateY(0deg)  ;
	
}
	.text-circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  font-size: 33px;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  font-family: "ROADSTORE";
}
	.contactForm{
		  text-align: center;
		background-image: url(tx.jpg);
		background-size: cover;
	  }
	.title{
		padding-top: 3vh;
		font-size: 2.5em;  
		width: 80%;
		padding-left: 10%;
		font-family: "ROADSTORE";  
    	background: linear-gradient(25grad,gold,orangered,#bf5700,orangered,orange,gold);
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent; 
	  } 
	.text{    
		  width: 80%;
		  margin: 0 10%;
  		  font-size: 1.5em; 
  		  font-family: 'Libre Baskerville', serif;
  		  text-align: left;
  		  z-index: 1;  
		  color: #fff;
  		  transition: background 0.2s ease;
		  mix-blend-mode: difference;
	  }  
	  .btnContact{
		  width: auto;
		  height: auto;
		  background-image: linear-gradient(45grad,#000,#000,#000,#555,#000,#000,#000,#000,#000,#000,#000,#000); 		
		  background-size: 400% 400%;   
         animation: moveBg 3s ease infinite;
		  color: #000;
		  margin: 13px;
		  padding: 13px;
		  border-radius: 13px; 
		  font-size: 1.3em; 
		  text-decoration: none;
		  color: #fff; 
	font-family: 'Montserrat', sans-serif;  
		  transition: all 2s ease; 
	  }  
	  .btnContact:hover{
		  background-image: linear-gradient(45grad,gold,brown); 
		  box-shadow: 0 0 21px 3px goldenrod;
		  color: #000;
	  }
	 
	  .social{
		  display: flex;
		  width: 150px;
		  margin:8vh auto;
	  }
	  .social img{
		  margin: auto;
		  width: 55px;
		  height: 55px;
		  padding: 5px;
	  }
	  .powered{
		  position: relative;
		  right: 0;
		  bottom: 0;
		  height: 66px;
		  border-top: 1px solid #aaa;
		  display: flex;
		  width: 80%;
		  margin: auto 10% 0 10%;
	  }
	   .powered p{
		   margin: auto 3px auto auto;
		   font-size: 13px;
		   color: #666;
	  }
	  .powered img{
		  width: 133px;
		  height: 21px;
		  margin: auto auto auto 3px;
	  } 
	  
	  
	  
	/* footer *******************************/ 
	  #truck{
		  width: 133px;
		  height: 133px;
		  display: block;
		  position: absolute;
		  bottom: 0;
		  right: -25vw;
		  z-index: 2;
	  }
	  	  
	/* wa *******************************/ 
	  #wa{
		  width: 89px;
		  height: 89px;
		  display: block;
		  position: absolute;
		  bottom: 40vh;
		  right: 13px;
		  z-index: 2;
		  background-image: url(wa.png);
		  background-size: cover;
	  }






/* Mobile V 0.0.1  */
@media (max-width: 767px){	  
	/* header *******************************/ 
	  .menuDesktop{	 
		  display: none;          
	  }
	 .menu-btn {
		 display: block;
	  	width: 40px;
  		height: 30px;
  		cursor: pointer;
  		position: fixed; 
  		z-index: 4; /* asegura que esté sobre el sidenav si es necesario */
		   object-fit: cover;  
		 right: 5%;
		 top: 21px;
  pointer-events: auto;
	}
	.line {
  		height: 4px;
  		width: 100%;
  		background-color: #333;
  		margin: 6px 0;
  		border-radius: 2px;
  		transition: all 0.4s ease;
  		transform-origin: center;
	}
	/* Estado activo - animación hacia "X" */
	.menu-btn.open .middle {
  		width: 0;
  		opacity: 0;
	}
	.menu-btn.open .top {
  		transform: translateY(10px) rotate(45deg);
	}
	.menu-btn.open .bottom {
  		transform: translateY(-10px) rotate(-45deg);
	}
	
	
	/* index *******************************/ 
	  .mask h1{
		  padding-top: 13vh;
		  font-size: 2em;
		  font-weight: 100;
		  color: #fff;
		  width: 80%;
		  padding-left: 10%;
		  font-family: "ROADSTORE";
 		  mix-blend-mode: difference; 
	  }
	  .mask p{
		  padding-top: 1vh;
		  font-size: 1.3em; 
		  color: #aaa;
		  width: 80%;
		  padding-left: 10%;  
	font-family: 'Libre Baskerville', serif;
	  }
	  
	
	/* time *******************************/
	  #time{
		  width: 100%;
		  height:300vh;
		  background-color: #000;
	  } 
	  .timeInside{
		  width: 90%;
		  padding: 10vh 5% 0 5%;
		  display: grid;
	  }
	  .timeItem{
		  width: 100%;
		  display: grid;
	  } 
	
		/* experience  *******************************/
	  .experience{
		  width: 100%;
		  height: 200vh;
	  }
	  #rec{
	  	position:relative;
  		z-index: 0;
  		object-fit: cover;
  		width:10px;
  		height:10px;
  		top: 50%;
  		left: 50%; 
  		transform: translate(-50%, -50%); 
	  }  
	  .bg{
		  width: 100%;
		  height: 100%;
		  background-image: url("../index.jpg");
		  background-size: cover;
		  opacity: 0;
	  } 
	  #titleEx{ 
		  padding-top: 33vh;
		  font-size: 2em;  
		  width: 80%;
		  padding-left: 10%;
		  font-family: "ROADSTORE";  
	background: linear-gradient(0grad,gold,orangered,#bf5700,orangered,orange,gold,gold,orangered,#bf5700,orangered,orange,gold);
		    background-size: 400% 400%; 
         animation: moveBg 8s ease infinite;
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	  } 
	  #textEx{ 
		  font-size: 1.3em; 
		  color: #fff;
		  width: 80%;
		  padding-left: 10%;  
	font-family: 'Libre Baskerville', serif; 
	  }
	  .contactBtns{
		  width: 80%;
		  margin: auto 10%;
		  display: grid;
	  }
	  .contactBtnsInside{
		  width: 100%;
		  margin: 3vh 0%;
		  display: block;
	  }
	  .btnCall{
		  width: auto;
		  height: auto;
		  background-image: linear-gradient(0grad,#bf5700,gold,#bf5700); 		
		  background-size: 400% 400%; 
         animation: moveBg 8s ease infinite; 
		  color: #000;
		  margin: 13px;
		  padding: 13px;
		  border-radius: 13px; 
		  font-size: 1.3em; 
		  text-decoration: none; 
	font-family: 'Montserrat', sans-serif;  
		  transition: all 2s ease; 
	  }  
	  .btnCall:hover{
		  box-shadow: 0 0 21px 3px goldenrod;
		  color: #fff;
	  }
	  .contactP{
		  padding-top: 1vh;
		  font-size: 2.3em;  
	font-family: 'Bronco'; 
	background: linear-gradient(25grad,gold,orangered,#bf5700,orangered,orange,gold);
		  background-size: 400% 400%; 
         animation: moveBg 8s ease infinite;
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;  
	  }	  
	  .contact{  
		  padding-top: 1vh;
		  font-size: 1.7em; 
		  color: #aaa; 
	font-family: 'Libre Baskerville', serif;
		  width: 80%;
		  padding-left: 10%;   
	  }
	
	
	  
	  
	/* budget  *******************************/
	  #budget{
		  width: 100%;
		  height: 100vh;
		  background-color: #000;
	  }
	  .budget{		  
	  	position:relative;
  		z-index: 0;
  		object-fit: cover;
  		width:80vw;
  		height:20vh;
  		top: 50%;
  		left: 50%; 
  		transform: translate(-50%, -50%); 
		background-image: url(../badget.jpg);
		  background-size: cover;
      transition: all 1s ease;
	  }
	  .budgetTop{
		  width: 100%;
		  height: 10vh;
		  background-color: #000;  
		  transform: translate3d(50px, 20px, 100px)
                 scale3d(1.2, 1.2, 1)
                 rotate3d(1, 1, 0, 30deg) rotateX(60deg);
      transition: transform 0.8s ease;
		  position: relative;
		  display: grid;
		  border: 1px solid #000;
		  outline:  1px solid #000;
		  margin: 0;
	  }   	  
	  .budgetTop p{		
		  position: relative;   
		  font-size: 1.2em;   
		  margin: auto;
		  font-family: "ROADSTORE";  
	background: linear-gradient(25grad,gold,orangered,#bf5700,orange,gold);  
		 background-size: 400% 400%; 
         animation: moveBg 8s ease infinite;
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	  } 
	  .trapezoid {
      width: 100%;
      height: 10vh;
      background: #000;
      clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
		  
		  transform: translate3d(50px, 20px, 100px)
                 scale3d(1.2, 1.2, 1)
                 rotate3d(1, 1, 0, 30deg) rotateX(60deg);
      transition: transform 0.8s ease;
    } 	  
	  #textBudget{ 
		 margin: auto;
  width: 80%;
		 padding-top: 3ch;
  font-size: 1.2em; 
  font-family: 'Libre Baskerville', serif;  
		  color: #000; 
      transition: all 2s ease;
		 opacity: 0;
	  } 
	  .btnsBudget{
		  width: 80%;
		  margin: 5vh 10%;
		  display:grid;
		  text-align: center;
	  }	  
	  .btnBudget{
		  width: auto;
		  height: auto;  
		  margin: 13px;
		  padding: 13px;
		  border-radius: 13px; 
		  font-size: 1.3em; 
		  text-decoration: none; 
	font-family: 'Bronco';   
		  opacity: 0;
		  
	  }   
	  .active{		  
		   animation: 2s forwards s;
	  }
	  .active0{
		  
		   animation: 3s forwards s;
	  } 
	
	
	/* aboutUs *******************************/
	  #aboutUs{
		  width: 100%;
		  height: 100vh;
		  background-color: #fff;
		  display: grid;
		  position: relative;
	  }
	  #aboutUsTitle{ 
		  padding-top: 3vh;
		  font-size: 1.5em;  
		  width: 80%;
		  padding-left: 10%;
		  font-family: "ROADSTORE";  
	background: linear-gradient(25grad,gold,orangered,#bf5700,orangered,orange,gold);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	  } 
	  #aboutUsText{    
  width: 80%;
		  margin: 0 10%;
  font-size: 1.2em; 
  font-family: 'Libre Baskerville', serif;
  text-align: left;
  z-index: 1;  
		  color: #fff;
  transition: background 0.2s ease;
		  mix-blend-mode: difference;
	  }	  
	  #aboutUsImg{
	  width: 333px;
  height: 333px;
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
  pointer-events: none;
		  background-image: url("../vera.jpg");
		  background-size: cover;
	  }
	
	
	/* materials *******************************/ 
		#materials{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 5 columnas */
  grid-template-rows: repeat(5, 1fr);    /* 2 filas */
  width: 100vw;
  height: 100vh;
}
		.materials{
  display: flex;
  align-items: center;
  justify-content: center; 	
  font-size: 2em;   
  font-family: "ROADSTORE";  
  color: #fff;
			  -webkit-text-stroke: 2px black; /* grosor y color del borde */
  text-stroke: 2px black; /* estándar (por compatibilidad futura) */
} 
	
	
	/* footer *******************************/ 
	#footer{
			display: grid;
			width: 100vw;
			height: 200vh;
			background-color: #fff; 
	  }	
	.fam{
			width: 100vw;
			height: 100vh; 
	  } 	
	.logo{
		padding-top: 3vh;
			width: 150px;
			height: 150px; 
	  } 	  
	.circle-wrapper {
  position: relative;
  top: 0%;
  left: 20%;
	padding-top: 0vh;
  transform: translate(-50%, -50%);
  perspective: 2000px;

}
	.text-circle {
  position: relative; 
  transform-style: preserve-3d;
  animation: rotate 5s linear infinite;
  transform: rotateX(-45deg) rotateY(0deg)  ;
	
}
	.text-circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  font-size: 33px;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  font-family: "ROADSTORE";
}
	.contactForm{
		  text-align: center;
		background-image: url(../tx.jpg);
		background-size: cover;
			width: 100vw;
			height: 100vh; 
	  }
	.title{
		padding-top: 3vh;
		font-size: 2em;  
		width: 80%;
		padding-left: 10%;
		font-family: "ROADSTORE";  
    	background: linear-gradient(25grad,gold,orangered,#bf5700,orangered,orange,gold);
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent; 
	  } 
	.text{    
		  width: 80%;
		  margin: 0 10%;
  		  font-size: 1.3em; 
  		  font-family: 'Libre Baskerville', serif;
  		  text-align: left;
  		  z-index: 1;  
		  color: #fff;
  		  transition: background 0.2s ease;
		  mix-blend-mode: difference;
	  }  
	  .btnContact{
		  width: auto;
		  height: auto;
		  background-image: linear-gradient(45grad,#000,#000,#000,#555,#000,#000,#000,#000,#000,#000,#000,#000); 		
		  background-size: 400% 400%;   
         animation: moveBg 3s ease infinite;
	 
		  margin: 13px;
		  padding: 13px;
		  border-radius: 13px; 
		  font-size: 1.3em; 
		  text-decoration: none;
		  color: #fff; 
	font-family: 'Montserrat', sans-serif;  
		  transition: all 2s ease; 
	  }  
	  .btnContact:hover{
		  background-image: linear-gradient(45grad,gold,brown); 
		  box-shadow: 0 0 21px 3px goldenrod;
		  color: #000;
	  }
	 
	  .social{
		  display: flex;
		  width: 150px;
		  margin:8vh auto;
	  }
	  .social img{
		  margin: auto;
		  width: 55px;
		  height: 55px;
		  padding: 5px;
	  }
	  .powered{
		  position: relative;
		  right: 0;
		  bottom: 0;
		  height: 66px;
		  border-top: 1px solid #aaa;
		  display: flex;
		  width: 80%;
		  margin: auto 10% 0 10%;
	  }
	   .powered p{
		   margin: auto 3px auto auto;
		   font-size: 13px;
		   color: #666;
	  }
	  .powered img{
		  width: 133px;
		  height: 21px;
		  margin: auto auto auto 3px;
	  }
	  
	
	
}