/*
black: #110C03
white: #FEFBF6
*/

html{
  scroll-behavior: smooth;
}
body {
   background-color: var(--black);
}




/***---------LANDING-----------***/
/***---------LANDING-----------***/
/***---------LANDING-----------***/
/***---------LANDING-----------***/
/***---------LANDING-----------***/

*{
   color: var(--white);
}
      #landing{
         pointer-events: none;
        width: 100%;
        height: auto;
        padding: 150px 0;
        position: fixed;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        top: 0;
        left: 0;
        z-index: 950;
          }

          .title{
            z-index: 999;
            pointer-events: auto;
            position: fixed;
            transform: translate(-50%, 0);
            left: 50%;
            bottom: 50svh;
            width: 870px;
            text-align: center;
            color: var(--white);
            font-style: italic;
            font-weight: 400;
            }

             .title_2{
               opacity: 0;
               animation: animacion_titulo_1;
               animation-duration: 0.65s;
               animation-delay: 0.45s;
               pointer-events: none;
             }
             .title_1{
                opacity: 0;
               animation: animacion_titulo_1;
               animation-duration: 0.375s;
               animation-delay: 0s;
               text-align: center;
               pointer-events: none;
               }
            @keyframes animacion_titulo_1 {
               0%{
                  transform: translate(-50%, -0.15em);
                  opacity: 0;
                  }
               15%{
                  opacity: 1;
               }
               25%{
                  transform: translate(-50%, -0em);
               }
               85%{
                  opacity: 1
               }
               100%{
                  opacity: 0;
                  }
               }

               /* Contenedor principal */
               #landing_title {
                 position: relative;
                 margin: 0;
                 display: flex;
                 flex-direction: column;
                 justify-content: flex-start;
                 align-items: flex-start;
                 width: auto;
                 height: auto;
                 animation: fadeIn 0.5s ease-in 0.5s forwards;
               }
               #landing_title>div{
               }


               /* estado inicial: oculto */
               .landing_title_animation span {
                 display: inline-block;
                 opacity: 1;
                 transform: translateY(0);
                 filter: blur(0);
                 transition: opacity 0.27s ease, transform 0.27s ease, filter 0.27s ease;
                 margin-right: 0.25em;
               }

               .landing_title_animation.hidden span {
                 opacity: 0;
                 transform: translateY(20px);
                 filter: blur(20px);
               }





               /* H1 principal */
               #landing_title h1 {
                 padding: 0;
                 margin: 0 0 0.25em 50px;
                 font-weight: 500;
                 text-align: left;
                 line-height: 1.2em;
                 color: var(--white);
                  }
                  #landing_title h1 .word{
                     transform: translateY(105%);
                  }

                  #landing_info{
                     position: relative;
                     left: 37.5px;
                     bottom: 1.88rem;
                     opacity: 1;
                     animation: landing_title_animation;
                     animation-duration: 1.35s;
                     animation-delay: 1.5s;
                     animation-fill-mode: forwards;
                       }




    /***---------PROJECTS-----------***/
    /***---------PROJECTS-----------***/
    /***---------PROJECTS-----------***/
    /***---------PROJECTS-----------***/
    /***---------PROJECTS-----------***/

#work{
   width: 100%;
   margin-top: 700px;
   height: auto;
   display: flex;
   justify-content: center;
   position: relative;
   z-index: 99;
   }

        #landing_info a{
           text-decoration: none;
            }
            #landing_info p{
               font-weight: 300;
               color: var(--white);
               letter-spacing: 0.01em;
               line-height: 1.5em;
               }

               #landing_more_info{
                  position: absolute;
                  top: -150px;
                  right: 50px;
                  animation: landing_title_animation;
                  animation-duration: 1.35s;
                  animation-delay: 1.5s;
                  animation-fill-mode: forwards;
                  opacity: 0;
                  width: 375px;
                  }
                  #landing_more_info>h2{
                     text-align: left;
                     font-weight: 300;
                     color: var(--white);
                  }
   #work>div{
      width: calc(100% - 25px);
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 12.5px;
      }
      #work>div>div{
         overflow: hidden;
         flex: auto;
         width: 33vw;
         aspect-ratio: 16 / 9;
         }
         #work>div>div>a{
            /*overflow: hidden;*/
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            width: 100%;
            height: 100%;
            text-decoration: none;
            }
            #work>div>div>a>p{
               margin-top: 0.2em;
               left: 0;
               z-index: 1000;
               color: var(--white);
            }
            #work>div>div>a>span{
               height: 500px;
               width: 100%;
               display: flex;
               overflow: hidden;
               justify-content: center;
               }
               #work>div>div>a>span>video{
                  background-color: rgba(255, 255, 255, 0.15);
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
               }
               #work>div>div>a>span>img{
                  background-color: rgba(255, 255, 255, 0.15);
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  }



   #more_work{
      margin-top: 100px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
      }
      #more_work>span{
         position: absolute;
         top: 45%;
         left: 50%;
         transform: translate(-50%, -50%);
         background-color: var(--black);
         width: 200px;
         padding: .25em 0;
         text-align: center;
         }
         #more_work>span>p{
            text-align: center;
            color: var(--white);
         }
      #more_work>div:nth-child(1){
         width: calc(100% - 25px);
         justify-content: flex-start;
         margin-bottom: 25px;
      }
      #more_work>div:nth-child(2){
         transition: all 0.25s;
         margin-bottom: 75px;
         width: 100%;
         display: flex;
         justify-content: center;

         /*filter: blur(5px);
         opacity: 0.5;
         pointer-events: none;*/
      }
      #more_work>div:nth-child(2)>div{
         columns: 4;
         column-gap: 12.5px;
         width: calc(100% - 50px);
      }
         .more_works{
            width: 100%;
            display: flex;
            justify-content: center;
            }
            .more_works>a{
               width: 100%;
               text-decoration: none;
               }
               .more_works>a>span>video, .more_works>a>span>img{
                  width: 100%;
               }



   #solutions{
      border-top: 1.6px solid var(--white);
      width: 100%;
      padding: 200px 0;
      height: auto;
      display: flex;
      justify-content: center;
      z-index: 99;
      position: relative;
      }
      #solutions>div{
         display: flex;
         justify-content: space-between;
         width: calc(100% - 50px);
         flex-wrap: nowrap;
      }
      #solutions>div>div{
         width: calc(50% - 0px);
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
         }
         #solutions>div>div:nth-child(1){
            justify-content: flex-end;
         }
         #solutions>div>div>p{
               width: 100%;
               margin-bottom: 25px;
               line-height: 1em;
         }
         #solutions>div>div>ul{
            width: 100%;
            display: flex;
            flex-wrap: no-wrap;
            flex-direction: column;
            align-items: flex-start;
            gap: 12.5px;
            }

            #solutions>div>div>ul>a{
               position: relative;
               text-decoration: none;
               }
               #solutions>div>div>ul>a>li{
               }
            #solutions>div>div>ul>a>li{
               position: relative;
               color: var(--white);
               }
               #solutions>div>div>ul>a>li>p{
                  font-weight: 400;
                  line-height: .9em;
               }
               .solution{
               }
               .solution span{
                  font-weight: 600;
                  margin-right: 6.25px;
               }

#info{
   width: 100%;
   height: auto;
   display: flex;
   justify-content: center;
   padding-bottom: 75px;
   }
   #info p{
      color: var(--white);
   }
   #info>div{
      border-top: 1.6px solid var(--white);
      border-bottom: 1.6px solid var(--white);
      padding: 200px 0;
      width: calc(100% - 50px);
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      }

      #info_profile{
         position: relative;
         width: 100%;
         display: flex;
         flex-wrap: nowrap;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
         }
         #info_profile>div{
            width: calc(50% - 12.5px);
         }
         #info_profile>div>p{
            margin-bottom: 25px;
         }
         #contact{
            opacity: 1;
            margin-top: 25px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            width: 100%;
            align-items: flex-start;
            }
            #contact>a{
               padding: 0.25em 0.5em;
               background-color: var(--black);
               border: 1.6px solid var(--white);
               border-radius: 2.5px;
               color: var(--white);
               display: inline-block;
               width: auto;
               }
               #contact>a:hover{
                  opacity: 1;
                  background-color: var(--white);
                  border: 1.6px solid var(--black);
                  color: var(--black);
               }
         #info_profile>figure{
            position: absolute;
            width: 275px;
            aspect-ratio: 3 / 4;
            top: 50%;
            left: 50%;
            transform: translateY(-50%);
            }
            #info_profile>figure>img{
               object-fit: cover;
               width: 100%;
               height: 100%;
            }
         #info_background{
            width: 100%;
            margin-left: 6.25px;
         }
         #info_background>p{
            margin-bottom: 25px;
            }
            #info_background>li{
               margin-bottom: 0.25rem;
               font-weight: 400;
               }
               #info_background>li>span{
                  font-weight: 400;
                  opacity: 0.66;
                  margin-left: 1em;
               }


#more_projects{
   width: 100%;
   height: auto;
   display: flex;
   justify-content: center;
   padding-bottom: 10vh;
   position: relative;
   }

   #more_projects>div{
      border-bottom: 1.6px solid var(--white);
      padding-top: 50px;
      width: calc(100% - 50px);
      }
      #more_projects>div>div{
         width: calc(100% - 50px);
         padding-bottom: 50px;
      }
      #more_projects p{
         color: var(--white);
         width: 100%;
         }
         #more_projects p:nth-child(2){
            margin-top: 0.25rem;
            font-weight: 50;
         }
      #more_projects img{
         background-color: var(--darkgray);
         }
         #more_projects video{
            height: 100%;
         }


footer{
   padding-bottom: 10vh;
   width: 100%;
   display: flex;
   justify-content: center;
   }
   footer a{
      border: 1.6px solid var(--white);
      padding: 0.2em 1em 0.35em 1em;
      color: var(--white);
      background-color: var(--black);
      border-radius: 2.5px;
      text-decoration: none;
      }
      footer a:hover{
         background-color: var(--white);
         color: var(--black);
      }



                  /*________MEDIA__QUERYS________*/
                  /*________MEDIA__QUERYS________*/
                  /*________MEDIA__QUERYS________*/
                  /*________MEDIA__QUERYS________*/
                  /*________MEDIA__QUERYS________*/

@media screen and (max-width: 1220px) {
   #info>div{
      flex-direction: column;
      }
      #info_profile>figure{
         top: 0;
         right: 25px;
         left: inherit;
         transform: translateY(0%);
         width: 350px;
      }
      #info_background{
         margin-top: 75px;
         margin-left: 0;
      }
}
@media screen and (max-width: 1035px) {


      #info_profile{

         }
         #info_profile>figure{
            width: 225px;
            top: -25px;
         }
}

@media screen and (max-width: 900px) {
   #landing{
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      }
      #landing_title>h1{
         margin-left: 25px;
         line-height: 1em;
      }
      #landing_info{
         left: 25px;
         top: .75em;
      }
}

@media screen and (max-width: 850px) {
   .work_amigajos{
      width: auto;
   }
   #work>div>div{
      width: 100%;
      }
      #work>div>div>a>span{
         height: 46vw;
      }
      #more_work{
         margin-top: 100px;
      }
      #more_work>div:nth-child(2)>div{
         columns: 2;
      }
      .more_works{
         margin-bottom: 12px;
      }
      .more_works>a>p{
         line-height: 1.1em;
      }

      #solutions>div{
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
         flex-wrap: wrap;
      }
      #solutions>div>div{
         width: calc(100% - 0px);
         }
      #solutions>div>div:nth-child(2){
         margin-top: 50px;
      }

}
@media screen and (max-width: 720px) {

   #landing_info{
      left: 25px;
   }
}
@media screen and (max-width: 650px) {
      #info>div>{
         width: calc(100% - 25px);
      }
   }
@media screen and (max-width: 555px) {
   #info_profile>figure{
      width: 175px;
   }
}
@media screen and (max-width: 550px) {
   #landing_more_info{
      width: 50%;
   }
}
@media screen and (max-width: 500px) {
   #work>div{
      width: calc(100% - 6.75px);
   }
   #project_list>div{
      width: calc(100% - 25px);
   }
   #more_projects>div{
      width: calc(100% - 25px);
   }

   #info_profile>figure{
      width: 100%;
      aspect-ratio: 16 / 9;
      position: inherit;
      top: 0;
      left: 0;
      right: 0;
      margin-top: 25px;
      display: flex;
      justify-content: flex-end;
      }
      #info_profile>figure>img{
         height: 100%;
         width: 200px;
      }
   #info_background{
      margin-top: 25px;
   }
}
@media screen and (max-width: 480px) {
   #landing_title>h1{
      width: 100%;
      transform-origin: left;
      transform: scale(.8);
   }
}
@media screen and (max-width: 370px) {
   #landing_info{
      right: 12.5px;
   }
   #landing_title>h1{
      }
}



















/**/