@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');

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

html{
    scroll-behavior: smooth;
    
}

body{
    font-family: 'Roboto', sans-serif;
   /* Activar cuando sea tipo fullscreen 100vh
   overflow: hidden;
   */
}

/* unvisited link */
a:link {
    font-size: 1rem;
    color: #6B4C26;
  }
  
  /* visited link */
  a:visited {
    color: #6B4C26;
  }
  
  /* mouse over link */
  a:hover {
    text-decoration: underline;
    color: #3D3835;
  }
  
  /* selected link */
  a:active {
    color: #3D3835;
  }


  /* unvisited link */
.link2:link {
    font-size: 1rem;
    color: #F0EFED;
    text-decoration: none;
  }
  
  /* visited link */
  .link2:visited {
    opacity: .5;
    text-decoration: none;
  }
  
  /* mouse over link */
  .link2:hover {
    text-decoration: underline;
  }
  
  /* selected link */
  .link2:active {
  }


/* Seccion NAVBAR*/

.navbar{
    background-color: rgba(107, 76, 38, 0.9);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    height: 10vh;
    min-width: 100%;
    align-items: center;
    box-shadow: none;
    position:fixed;
    z-index: 10;
}

.navbar .logo{
    grid-column: 2/7;
    
}
.navbar .symbol{
    margin-right: 0.5rem;
}


.navbar .menu{
    grid-column: 7/12;
    display: flex;
    justify-content:space-between;

}

.navbar .menu li{
    list-style: none;
}

.navbar .menu a{
    text-decoration: none;
    font-size: 0.75rem;
    color: #F0EFED;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    cursor: pointer;
    background-color: transparent;
}

.navbar .menu a:hover{
    color: #CD964F;
    background-color: transparent;
}


.navbar .hamburguesa{
    display: none;
}

.fa-solid, .fa-bars{
    color: #F0EFED;
}


/* Seccion SLOGAN*/
.slogan{
    height: 60vh;
    background-color: #6B4C26;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(8,1fr);
    z-index: -1;
}

.slogan .info-content{
    grid-column: 2/7;
    grid-row: 5/8;
    color: #F0EFED;
}

.slogan h1{
    font-size: 3.5rem;
    line-height: 3.5rem;
    font-weight: 500;
}

/* Seccion HERO*/
.hero{
    height: 70vh;
    background-image:url(../images/Hero_1.png);
    background-size: cover;
    background-attachment: fixed;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    justify-content: center;
    /* Activar cuando tenga gradient
  background-image:linear-gradient(to left, rgba(61,56,53,.6), rgba(61,56,53,1)), url(../images/Hero_1.png);
   */
}


/* Seccion ABOUT*/

.container-about{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    max-width: 100%;
    padding-top: 10rem;
    padding-bottom: 10rem;
    background-color: #F4F3EF;
}

.container-about .info-about-titles{
    grid-column: 2/6;
    
}

.container-about .info-about-left{
    grid-column: 2/6;
    
    
}

.container-about .info-about-right{
    grid-column: 7/11;
    
}

.container-about h2{
    font-size: 2rem;
    font-weight: 500;
    line-height: 3rem;
    margin-top: 1rem;
    color: #3D3835;
    grid-column: 2/4;
}

.container-about h3{
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.75rem;
    letter-spacing: 0.1rem;
    color: #6B4C26;
}

.container-about p{
    font-size: 1rem;
    font-weight: 300;
    line-height: 2rem;
    margin-top: 3rem;
    color: #3D3835;
}



/* Seccion PROJECTS*/

  .projects-container {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    max-width: 100%;
    min-height: 100vh;
    align-items: center;
    background-color: #F4F3EF;
    
    
  }

  .projects-container-village {
    grid-column: 2/6;
    gap: 4rem;
    justify-items: left;
    margin-top: 4rem;
    
  }

  .projects-container-delcielo {
    grid-column: 7/11;
    gap: 4rem;
    justify-items: left;
    margin-top: 4rem;
    
  }

  .projects-container  h2{
    font-size: 2rem;
    font-weight: 500;
    line-height: 3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #3D3835;
}

.projects-container  h3{
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.75rem;
    letter-spacing: 0.1rem;
    color: #6B4C26;
}

.project-description-container{
    display: flex;
    max-width: 100%;
    justify-content:space-between;
}


.projects-container p{
    display: flex;
    font-size: 1rem;
    font-weight: 300;
    line-height: 2rem;
    margin-top: 1rem;
    color: #3D3835;
    max-width: 35vw;
    justify-content: start;
    
}

.projects-container a{
    display: flex;
    font-size: 1rem;
    font-weight: 300;
    line-height: 2rem;
    margin-top: 1rem;
    
}

.project-description-container .icon{
    display: flex;
    max-width: 30px;
    height: 38px;
    
}

.projects-container img{
    min-width: 100%;
    transition-duration: 0.4s;
}

.projects-container img:hover{
    opacity: 0.5;
}






/* Seccion TEAM*/

.team-container{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    min-width: 100%;
    background-color: #F4F3EF;
}


.team-container h2{
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 3rem;
    color: #3D3835;
}

.team-container h3{
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.75rem;
    letter-spacing: 0.1rem;
    color: #6B4C26;
}

.team-container p{
    font-size: 1rem;
    font-weight: 300;
    line-height: 2rem;
    color: #3D3835;
}

section.horizontal {
    grid-column: 2/13;
  }

  section {
    width: 100%;
    height: 100%;
    position: relative;
    
  }
  
  
  section:nth-of-type(odd) {
    background-color: none;
  }
  
  section:nth-of-type(even) {
    background-color: none;
    display: none;
  }
  
  
  section.horizontal {
    overflow-x: hidden;
  }
  
  section.horizontal .pin-wrap,
  section.horizontal .animation-wrap {
      display: flex;
      position: relative;
      z-index: 1;  
      height: 100vh;
  }
  
  
  section.horizontal .item {
      position: relative;
      padding: 25vh 0px;
      margin-right: 12vw;
      height: 100vh;
      display: flex;
      align-items: left;
      justify-content: start;
      line-height: 1.7;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border-right: 1px solid rgba(107, 76, 38, 0.9);
      background-color: transparent;
      flex-direction: column;
  }
  
  
  section.horizontal .item:before {/* La oculto para no ver los numeros*/
      position: absolute;
      font-size: 8rem;
      opacity: .13;
      font-weight: bold;    
      z-index: -1;
      -webkit-transform: translate(-30px, -50px);
      transform: translate(-30px, -50px);
      line-height: 1;
      display: none; /* La oculto para no ver los numeros*/
  }
  
  
  section.horizontal .animation-wrap.to-right {
      counter-reset: item;
      float: left;
  }
  
  section.horizontal .animation-wrap.to-left {
      counter-reset: item 11;
      float: right; 
  }
  
  section.horizontal .animation-wrap.to-right .item:before {
      counter-increment: item;
      content: counter(item);
  }
  
  section.horizontal .animation-wrap.to-left .item:before {
      counter-increment: item -1;
      content: counter(item);
  }
  
  
  section.horizontal .animation-wrap .item:nth-child(2n+2) {
      align-items: flex-start;
  }
  
        /* Lo oculto porque el texto se alineaba a la derecha
        
        section.horizontal .animation-wrap .item:nth-child(4n+4) {
            align-items: flex-end;
        }
        
        */


/* Seccion CONTACT*/

.contact-container{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    min-height: 100vh;
    min-width: 100%;
    color: #F0EFED;
    background-color: #3D3835;
}



.contact-container h2{
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 400;
    line-height: 3rem;
    color: #F0EFED;
    margin-top: 1rem;
}

.contact-container h3{
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.75rem;
    letter-spacing: 0.1rem;
    color: #6B4C26;
}

.contact-container p{
    font-size: 1rem;
    color: #F0EFED;
    opacity: .5;
    font-weight: 300;
    line-height: 1.5rem;
}




.contact-container .footerimage{
    grid-column: 7/13;
    min-height: 100vh;
    background-image:url(../images/WR_2.jpg);
    background-size: cover;
    min-width: 100%;
    opacity: .4;
}

.container-form{
    grid-column: 2/6;
    height: 80vh;
    padding: 5rem 0rem;
    margin-top: 3rem;
    
}


.container-form input{
    min-width: 100%;
    height: 2rem;
    padding: 1rem;
    margin-top: 1rem;
    border-color: rgba(0, 0, 0, .3);
    border-width: 2px;
    border-style: solid;
    box-shadow: none !important;
    margin-top: 2rem;
    color: #F0EFED;
}

input[type=text] {
    background: transparent;border-color: rgba(0, 0, 0, .3);
    border-width: 2px;
    box-shadow: none !important;
}

input[type=email] {
    background: transparent;border-color: rgba(0, 0, 0, .3);
    border-width: 2px;
    box-shadow: none !important;
}

.container-form textarea{
    min-width: 100%;
    height: 15rem;
    padding: 1rem;
    margin-top: 2.5rem;
    background-color: transparent;
    border-color: rgba(0, 0, 0, .30);
    border-width: 2px;
    border-style: solid;
    box-shadow: none !important;
    color: #F0EFED;
    
}

input:focus { 
    outline: none !important;
    border-color: rgba(107, 76, 38, 1);
    box-shadow: none !important;
 }

 textarea:focus { 
    outline: none !important;
    border-color: rgba(107, 76, 38, 1);
    box-shadow: none !important;
 }

 input[type=submit] {
    padding: 2rem 2rem;
    width: 100%;
    height: 4rem;
    background-color: rgba(0, 0, 0, .3);
    color: #6B4C26;
    border: none;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    cursor: pointer;
}

.btn-send{
    padding: 2rem 2rem;
    width: 100%;
    height: 4rem;
    background-color: rgba(0, 0, 0, .3);
    color: #6B4C26;
    border: none;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    cursor: pointer;
}

    .btn-send {
    transition-duration: 0.4s;
  }

  .btn-send:hover {
    background-color: #6B4C26;
    color: #F0EFED;
  }


  /* Seccion PROJECT INSIDE About*/

.container-project{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    min-width: 100%;
    padding-top: 15rem;
    padding-bottom: 4rem;
    background-color: #6B4C26;
    background-image: linear-gradient(180deg, #6B4C26 50%, #F4F3EF 50%);
}


.container-project .info-project-titles{
    grid-column: 2/12;
    margin-bottom: 2.5rem;
    margin-top: 8rem;
    
}

.icon {
    margin-bottom: 4rem;
    opacity: 0.5;
    display: none;
}

.container-project .projecthero{
    grid-column: 2/12;
    margin-bottom: 2rem;
}

.container-project .projecthero img{
    height: 70vh;
    max-width: 100%;
}

.container-project .info-project-left{
    grid-column: 2/7;
    
}

.container-project .info-project-right{
    grid-column: 8/11;
    text-decoration: underline;
    
}

.container-project h2{
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 3rem;
    margin-top: 1rem;
    color: #F4F3EF;
}

.container-project h3{
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.75rem;
    letter-spacing: 0.1rem;
    color: rgba(240, 240, 240, .5);
}

.container-project h4{
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: 0.1rem;
    color: #3D3835;
    margin-top: 3rem;
    text-transform: uppercase;
}

.container-project p{
    font-size: 1rem;
    font-weight: 300;
    line-height: 2rem;
    margin-top: 3rem;
    color: #3D3835;
}


/* Seccion Project Inside IMAGE GALLERY*/

.container-gallery{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    min-width: 100%;
    padding-top: 2rem;
    padding-bottom: 0rem;
    background-color: #F4F3EF;
}


.container-gallery-inside{
    grid-column: 2/12;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content:space-evenly;
    gap: 2rem;
    margin-top: 2rem;
    min-width: 100%;
}

.container-gallery-inside .card img{
    min-width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}


/* Seccion SitePLAN*/

.container-siteplan{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    min-width: 100%;
    padding-top: 0rem;
    padding-bottom: 4rem;
    background-color: #F4F3EF;
}


.container-siteplan-inside{
    grid-column: 2/12;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content:space-evenly;
    gap: 2rem;
    margin-top: 2rem;
    min-width: 100%;
}

.container-siteplan-inside .card img{
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}



/* Seccion Carousel*/
        /* slider */
        .slider {
            position: relative;
        }

        .slider ul {
            list-style-type: none;
            margin: 0;
            padding: 0;    
        }

        .slider ul li  {
            position: relative;
            display: none;
            height:70vh;
        }

        .slider ul li img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .slider ul li video {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
        
        /* buttons */
        .slider .buttons  {
            position: absolute;
            top: 45%;
            width:  100%;
            height: 100%;
            
        }
        .slider .buttons .next {
            font-size: 3rem;
            right: 4rem;
            position: absolute;
            cursor: pointer;
            width: 50px;
            text-align: center;
            transition-duration: 0.5s;
        }    
        .slider .buttons .prev {
            font-size: 3rem;
            left: 4rem;
            position: absolute;
            cursor: pointer;
            width: 50px;
            text-align: center;
            transition-duration: 0.5s;
        }   
        .slider .buttons .next:hover {
            background: rgba(61, 56, 53, 93%);
            color: rgba(240, 239, 237, 93%);
        }
        .slider .buttons .prev:hover {
            background: rgba(61, 56, 53, 93%);
            color: rgba(240, 239, 237, 93%);
        }

        /* slider animation */
        .slider ul li {
            animation-name: fade;
            animation-duration: 2.5s;
        }
        
        @keyframes fade {
            from {opacity: .2} 
            to {opacity: 1}
        }