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

body {
  color: #333;
  overflow-x: hidden;
  font-size: 1rem;
  font-weight: normal!important;
  font-family: 'frutigerregular';
}

/* elementos */

.section {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contenedor {
  width: 1550px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.title{
  font-size: 2.06rem;
  font-size: clamp(2.06rem, 1.3245rem + 3.6774999999999993vw, 5.7375rem);
  opacity: 1;
  line-height: 1em;
  margin: 16px 0px 32px 0px;
  font-weight: unset!important;
  font-family: 'frutigerbold';
}

.description {
  font-size: 1.525rem;
  font-size: clamp(1.525rem, 1.263rem + 1.31vw, 2.835rem);
  opacity: 1;
  font-family: 'frutigerregular';
}

.esconder-desktop{
  display: none!important;
}



/* FLOTANTE */

.flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  /*box-shadow: 1px 1px 45px 1px rgb(0 0 0 / 22%);
  -webkit-box-shadow: 1px 1px 45px 1px rgb(0 0 0 / 22%);
  -moz-box-shadow: 1px 1px 45px 1px rgb(0 0 0 / 22%);*/
  background-color: transparent;

}

.flotante button{
  background-image: url('img/asset_flecha.svg');
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #9b9b9b;
  transition: .2s ease;
  cursor: pointer;
  display:none;
}

.flotante button:hover{
  background-color: #1d1d1d;
}

.flotante button:hover{
  background-color: #1d1d1d;
}

/* SECTION 1 */ 

#section-1 {
  /*background-image: linear-gradient(rgba(60, 60, 59, 0.45), rgba(60, 60, 59, 0.45)),url(img/img_01.png);*/
  background-size: cover;
  position: relative;
  color: white;
}

  #section-1 .contenedor {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  }

  #section-1 #video{
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -5;
  }

  #section-1 .title{
    margin-bottom: 82px;
    font-weight: unset!important;
    font-family: 'frutigerbold';
    line-height: 1.13;
  }

    #section-1:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(60, 60, 59, 0.45);
      z-index: -1;
    }

  #section-1 .volanta {
    font-size: 1.06rem;
    font-size: clamp(1.06rem, 0.797rem + 1.315vw, 2.375rem);
    text-align: left;
    font-family: 'frutigerregular';
  }

  #section-1 h1{
    position: absolute;
    top: 100px;
    width: 370px;
    align-self: center;
    z-index: 10;
  }

  #section-1 .description{
    width: 60%;
  }



/* SECTION 2 */

  #section-2 .uno, #section-2 .dos{
    height: 50%;
    width: 100%;
  }

  #section-2 .uno .contenedor{
    height: 100%;
    justify-content: center;
  }
      #section-2 .uno ul {
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        margin-top: 5%;
      }

        #section-2 .uno ul li {
          flex-basis: 50%;
          gap: clamp(16px, 6.25vw, 50px);
          display: flex;
          flex-direction: row;
        }

        #section-2 .uno ul li div{
          display: flex;
          flex-direction: column;
        }

        #section-2 .uno ul h3{
          font-weight: unset!important;
          font-family: 'frutigerbold';
          font-size: 0.875rem;
          font-size: clamp(0.875rem, 0.688rem + 0.935vw, 1.81rem);
          color: #009E56;
          line-height: 1.6;
        }

        #section-2 .uno ul p{
          font-family: 'frutigerlight';
          font-size: 0.85rem;
          font-size: clamp(0.85rem, 0.6699999999999999rem + 0.9000000000000001vw, 1.75rem);
          color: #68696C;
        }

        #section-2 .uno ul img{
          width: clamp(50px, 6.25vw, 106px);
          height: clamp(50px, 6.25vw, 106px);
          min-height: 0vw;
        }

        #section-2 .anim1, 
        #section-2 .anim3 {
          transform-origin: center; /* Scale from the center */
        }

  #section-2 h2{
    font-family: 'frutigerlight';
    font-weight: unset;
    font-size: 2.125rem;
    font-size: clamp(2.125rem, 1.95rem + 0.8750000000000001vw, 3rem);
    color: #68696C;
  }

    #section-2 h2:after{
      content: '';
      width: 88px;
      height: 4px;
      display: block;
      background-color: #68696C;
      margin-top: 20px;
    }

  #section-2 .dos{
    background-image: url(img/img_02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 25%;
    height: 50%;
  }

  #section-2 h2 strong{
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }


/* SECTION 3 */

#section-3{
  background-color: #383D41;
  flex-direction: row;
}

  #section-3 .section-back{
    width: 60%;
    position: absolute;
    right: -7%;
  }

  #section-3 .contenedor{
    background-color: #383D41;
    flex-direction: row;
  }

  #section-3 .uno{
    flex-basis:  40%;
    background-color: white;
    color: #68696C;
    padding: 4%;
    position: relative;
    border-top: 11px solid #009E56;
  }

    #section-3 .piquito{
      width: 55px;
      position: absolute;
      fill:red;
      top: 5%;
      right: 1px;
      transform: translateX(50%);
    }

    #section-3 .uno h3{
      font-weight: unset!important;
      font-family: 'frutigerbold';
      font-size: 1.68rem;
      font-size: clamp(1.68rem, 1.391rem + 1.445vw, 3.125rem);
      line-height: 1;
      color: #68696C;
    }

    #section-3 .uno h3:after{
      content: '';
      width: 88px;
      height: 4px;
      display: block;
      background-color: #68696C;
      margin-top: 22px;
    }

    #section-3 .uno p{
      font-family: 'frutigerlight';
      font-size: 0.88rem;
      font-size: clamp(0.88rem, 0.736rem + 0.7200000000000001vw, 1.6rem);
      line-height: 1.4;
      margin-top: 25px;
      margin-bottom: 25px;
    }

    #section-3 ul{
      list-style-type: none;
      font-family: 'frutigerregular';
    }

      #section-3 ul li{
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 20px;
        position: relative;
      }

        #section-3 ul li img{
          width: clamp(24px, 6.25vw, 50px);
          height: clamp(24px, 6.25vw, 50px);
          z-index: 1;
        }

          #section-3 ul li hr{
            display: block;
            width: 1px;
            height: 30px;
            background-color: #68696C;
            border: none;
            position: absolute;
            left: 26px;
            top: 0;
            transform: translateY(-50px);
            z-index: 0;
          }

        #section-3 ul li h4{
          font-size: 0.81rem;
          font-size: clamp(0.81rem, 0.6360000000000001rem + 0.8699999999999999vw, 1.68rem);
          font-family: 'frutigerlight';
          font-weight: unset!important;
        }

        #section-3 ul li h4 strong{
          font-weight: unset!important;
          font-family: 'frutigerbold';
        }

  #section-3 .dos{
    flex-basis:  50%;
    position: relative;
  }

      #section-3 .dos .mapa2{
        display: none;
      }

      #section-3 .dos p{
        color: #FFFFFF;
        font-family: 'frutigerlight';
        font-size: 0.71rem;
        font-size: clamp(0.71rem, 0.6519999999999999rem + 0.29000000000000004vw, 1rem); 
      }

      #section-3 .mapa-datos{
        position: absolute;
        bottom:0;
        right:0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-family: 'frutigerlight';
      }

      #section-3 .mapa-datos strong{
        font-weight: unset!important;
        font-family: 'frutigerbold';
      }

      #section-3 hr{
        margin-top: 24px;
        width: 70%;
      }

/* SECTION 4 */

#section-4 .contenedor{
  align-items: center;
}

#section-4 h2{
  color: #009E56;
}

#section-4 .title{
  font-weight: unset!important;
  font-family: 'frutigerbold';
  font-size: 2.7rem;
  font-size: clamp(2.7rem, 2.4400000000000004rem + 1.2999999999999998vw, 4rem);
  text-align: center;
}

#section-4 p{
  font-family: 'frutigerlight';
  width: 70%;
  margin-bottom: 5%;
  font-size: 0.925rem;
  font-size: clamp(0.925rem, 0.7100000000000001rem + 1.075vw, 2rem);
  line-height: 1.2;
  text-align: center;
  color: #68696C;
  max-width: 860px;
}

  #section-4 p strong {
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }

#section-4 div img{
  width: 900px;
  max-width: 80%;
}


/* SECTION 5 */

#section-5 .contenedor{
  flex-direction: row;
  color: #68696C;
  gap: 1vw;
}

#section-5 .uno{
  flex-basis: 70%;
}

#section-5 .uno .flecha .flechus{
  width: clamp(24px, 6.25vw, 37px);
  height: clamp(24px, 6.25vw, 37px);
}

#section-5 .uno .title{
  font-family: 'frutigerregular';
  font-size: 1.88rem;
  font-size: clamp(1.88rem, 1.4379999999999997rem + 2.21vw, 4.09rem);
  line-height: 1.2;
  text-transform: uppercase;
}

    #section-5 .uno .title b{
      color: #009E56;
      font-weight: unset!important;
      font-family: 'frutigerbold';
    }

    #section-5 .uno .title strong{
      font-weight: unset!important;
      font-family: 'frutigerbold';
    }

#section-5 .uno p{
  font-size: 1.25rem;
  font-size: clamp(1.25rem, 0.8374999999999999rem + 2.0625vw, 3.3125rem);
}

#section-5 .uno .flecha{
  font-family: 'frutigerlight';
  display: flex;
  gap: 30px;
  margin-top: 55px;
}

  #section-5 .uno .flecha p{
    font-family: 'frutigerlight';
    font-size: 0.7875rem;
    font-size: clamp(0.7875rem, 0.5700000000000001rem + 1.0875vw, 1.875rem);
    line-height: 1.5;
  }

  #section-5 .uno .flecha div .b{
    margin-top: 40px;
    font-weight: unset!important;
    font-family: 'frutigerbold';
    font-size: 0.85rem;
    font-size: clamp(0.85rem, 0.645rem + 1.025vw, 1.875rem);
  }

  #section-5 .projects{
    flex-direction: row;
    display: flex;
    margin-top: 10vh;
    gap: 4vw;
    font-family: 'frutigerlight';
  }

  #section-5 .projects h4{
    font-weight: unset;
    font-size: 0.86rem;
    font-size: clamp(0.86rem, 0.6659999999999999rem + 0.97vw, 1.83rem);
    line-height: 1.16;
    font-family: 'frutigerlight';
  }

  #section-5 .projects h4 b{
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }

      #section-5 .projects .project-1{
        display: flex;
        gap: 5px;
      }

      #section-5 .projects .project-1 a{
        text-decoration: none;
        color: #68696C;
      }



      #section-5 .projects .project-1 div{
        border: 1px solid black;
        justify-self: center;
        padding: 18px 20px;
        display: flex;
        align-items: center;
        margin-top: 20px;
      }

      #section-5 .projects .project-1 div:nth-child(2){
        
      }

      #section-5 .projects .project-1 div img{
        width: 38px!important;
      }

      #section-5 .projects .project-1 p{
        font-weight: unset!important;
        font-family: 'frutigerbold';
        line-height: 1.2;
        text-transform: uppercase;
        font-size: 0.54rem;
        font-size: clamp(0.54rem, 0.3680000000000001rem + 0.8599999999999999vw, 1.4rem);
      }

      #section-5 .project-1:hover > div:first-child, #section-5 .project-1:hover > div:nth-child(2)  {
        background-color: #68696C;
        color: white;
        transition: all .5s ease;
        border: 1px solid #68696C;
      }

      #section-5 .project-1:hover > div img, #section-5 .project-1:hover > div img{
        filter: brightness(0) invert(1);
        transition: all .5s ease;
      }

      #section-5 .project-1:hover > div a:first-child {
        color: white;
        transition: all .5s ease;
      }


  #section-5 .dos{
    flex-basis: 30%;
    position: relative;
  }

    #section-5 .dos ul{
      list-style-type: none;
      z-index: 10;
      position: relative;
    }

        #section-5 .dos ul li{
          display: flex;
          margin-top: 50px;
          gap: 45px;
        }

        #section-5 .dos ul li:fist-child{
          margin-top: 25px;
        }

        #section-5 .dos ul li img{
          width: 37px;
          align-self: flex-start;
          margin-top: 5px;
        }

        #section-5 .dos ul li h4 {
          font-size: 0.68rem;
          font-size: clamp(0.68rem, 0.3440000000000001rem + 1.68vw, 2.36rem);
          margin-bottom: 15px;
          font-weight: unset!important;
          font-family: 'frutigerbold';
        }

        #section-5 .dos ul li span{
          font-size: 0.625rem;
          font-size: clamp(0.625rem, 0.406rem + 1.095vw, 1.72rem);
          color: #68696C;
          font-family: 'frutigerlight';
        }
  
  #section-5 .linea{
    position: absolute;
    height: 100%;
    border-left: 1px solid #68696C;
    left: 18px;
  }

  #section-5 .title{
    margin: 16px 0px 50px 0px;
  }


/* SECTION 6 */

#section-6 {
  background-image: linear-gradient(90deg, rgba(29, 29, 27, 1), rgba(104, 105, 108, 0.20)),url('img/6_img_01.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
  #section-6 .title, #section-6 .description{
    color: white;
  }

  #section-6 .description{
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.25rem + 1.875vw, 3.5rem);
    font-family: 'frutigerregular';
    line-height: 1.23;
  }

  #section-6 .title{
    font-size: 2.56rem;
    font-size: clamp(2.56rem, 2.122rem + 2.19vw, 4.75rem);
    margin-bottom: 70px;
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }

  #section-6 hr{
    width: 100px;
    background-color: #009E56;
    height: 5px;
    margin-bottom: 68px;
    border: none;
  }


/* CAROUSEL */

#carrousel {
  display: flex;
  width: 100vw;
  overflow: hidden;
}

.section {
  min-width: 100vw;
  height: 100vh; /* Make each section occupy the full viewport height as well */
}


/* SECTION 7 */

#carrousel .section{
  background-image: url('img/7_img_01.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}

#carrousel .section .punta {
    position: absolute;
    top: 8vw;
    transform: translateX(-100%);
    left: 1px;
    opacity: 0.8;
  }

  #carrousel .section .uno {
    position: relative;
    background-color: rgba(0, 158, 87, 0.808);
    display: flex;
    width: 55%;
    justify-content: flex-end;
    height: 100%;
    align-items: center;
    color: white;
    padding: 5%;
  }

  #carrousel .section hr{
    width: 81px;
    height: 4px;
    border: none;
    background-color: white;
    margin: 45px 0px 40px 0px;
  }

  #carrousel .section .ficha img{
    margin-bottom: 68px;
    width: clamp(44px, 6.25vw, 120px);
  }

  #carrousel .section p{
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.6639999999999999rem + 1.055vw, 1.93rem);
    line-height: 1.22;
    font-family: 'frutigerlight';
  }

  #carrousel .section .volanta{
    font-size: clamp(0.75rem, 0.525rem + 1.125vw, 1.875rem);
    display: block;
    margin-bottom: 10px;
    font-family: 'frutigerregular';
  }

  #carrousel .section .titulin {
    font-size: clamp(1.8125rem, 1.3625rem + 2.25vw, 4.0625rem);
    display: block;
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }

  /* SECTION 8 */

  #carrousel #section-8{
    background-image: url('img/8_img_01.jpg');
  }

  #carrousel #section-8{
    align-items: flex-start;
  }

  #carrousel #section-8 .uno{
    background-color: rgba(255, 255, 255, 0.815);
    color: #68696C;
  }

  #carrousel #section-8 .punta{
    transform: translateX(100%) rotate(180deg);
    right: 1px;
    left: unset;
  }

  #carrousel #section-8 hr{
    background-color:#68696C;
  }

  /* SECTION 9 */

  #carrousel #section-9{
    background-image: url('img/9_img_01.jpg');
  }

  #carrousel #section-9 .uno{
    background-color: rgba(166, 52, 147, 0.815);
    color: white;;
  }

  #carrousel #section-9 hr{
    background-color: white;
  }
  
  /* SECTION 10 */

  #carrousel #section-10{
    background-image: url('img/10_img_01.jpg');
    background-position: bottom;
  }

  #carrousel #section-10{
    align-items: flex-start;
  }

  #carrousel #section-10 .uno{
    background-color: rgba(255, 255, 255, 0.808);
    color: #68696C;
  }

  #carrousel #section-10 hr{
    background-color: #68696C;
  }

  #carrousel #section-10 .punta{
    transform: translateX(100%) rotate(180deg);
    right: 1px;
    left: unset;
  }

  /* SECTION 11 */

  #carrousel #section-11{
    background-image: url('img/11_img_01.jpg');
  }

  #carrousel #section-11 .uno{
    background-color: rgba(0, 107, 183, 0.808);
    color: white;;
  }

  #carrousel #section-11 hr{
    background-color: white;
  }

  /* SECTION 12 */

  #carrousel #section-12{
    background-image: url('img/12_img_01.jpg');
  }

  #carrousel #section-12{
    align-items: flex-start;
  }

  #carrousel #section-12 .uno{
    background-color: rgba(255, 255, 255, 0.808);
    color: #68696C;
  }

  #carrousel #section-12 hr{
    background-color: #68696C;
  }

  #carrousel #section-12 .punta{
    transform: translateX(100%) rotate(180deg);
    right: 1px;
    left: unset;
  }

  /* SECTION 13 */

  #carrousel #section-13{
    background-image: url('img/13_img_01.jpg');
  }

  /* SECTION 14 */

  .section-quote{
    background-color: #383D41;
    position: relative;
  }

  .section-quote .contenedor{
    flex-direction: row;
    color: #68696C;
    gap: 5vw;
    align-items: center;
    height: 100vh!important;
    position: absolute;
    top: 0;
  }

  .section-quote .uno p{
    color: white;
    font-size: 1.125rem;
    font-size: clamp(1.125rem, 0.875rem + 1.25vw, 2.375rem);
    line-height: clamp(1.27em, calc(1.27rem + ((1vw - 0.2em) * -0.27)), 1em);
    min-height: 0vw;
  }

  .section-quote .uno p:first-child{
    margin-bottom: 20px;
    font-family: 'frutigerlight';
  }

  .section-quote .uno p:nth-child(2){
    padding: 50px 0px;
    border-top: 3px solid white;
    border-bottom: 1px solid white;
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }

  .section-quote p strong{
    margin-right: 15px;
    font-size: 0.843rem;
    font-size: clamp(0.843rem, 0.6866rem + 0.782vw, 1.625rem);
  }

  .section-quote p span{
    margin-left: 15px;
    font-size: 0.856rem;
    font-size: clamp(0.856rem, 0.7021999999999999rem + 0.769vw, 1.625rem);
  }
  
  .section-quote img{
      width: clamp(146px, calc(9.125rem + ((1vw - 3.2px) * 19.625)), 460px);
      min-height: 0vw;
  }

  .section-quote .quote2{
    position: absolute;
    bottom:0;
    right:0;
    width: unset!important;
    
  }

  .section-quote .quote1{
    position: absolute;
    top: 0;
    left:-10%;
    width: unset!important;
  }




/* SECTION 15 */

.section-16 {
  background-image: linear-gradient(90deg, rgba(29, 29, 27, 1), rgba(104, 105, 108, 0.20)),url('img/16_img_01.jpg')!important;
  background-size: cover;
  background-repeat: no-repeat;
}


/* SECTION 16 */


#section-16 {
  background-image: linear-gradient(90deg, rgba(29, 29, 27, 1), rgba(104, 105, 108, 0.20)),url('img/6_img_01.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
  #section-16 .title, #section-6 .description{
    color: white;
  }

  #section-16 .description{
    font-size: 1.625rem;
    font-size: clamp(1.625rem, 1.25rem + 1.875vw, 3.5rem);
    color: white;
    font-family: 'frutigerregular';
  }

  #section-16 .title{
    font-size: 2.56rem;
    font-size: clamp(2.56rem, 2.122rem + 2.19vw, 4.75rem);
    margin-bottom: 70px;
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }

  #section-16 hr{
    width: 100px;
    background-color: #009E56;
    height: 5px;
    margin-bottom: 70px;
    border: none;
  }

/* SECTION 17 */

/* CAROUSEL */

#carrousel2 {
  display: flex;
  width: 100vw;
  overflow: hidden;
}


#carrousel2 .section{
  background-image: url('img/17_img_01.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;

}

#carrousel2 .section .punta {
    position: absolute;
    top: 8vw;
    transform: translateX(-100%);
    left: 1px;
    opacity: 0.8;
  }

  #carrousel2 .section .uno {
    position: relative;
    background-color: rgba(0, 158, 87, 0.808);
    display: flex;
    width: 55%;
    justify-content: flex-end;
    height: 100%;
    align-items: center;
    color: white;
    padding: 5%;
  }

  #carrousel2 .section hr{
    width: 81px;
    height: 4px;
    border: none;
    background-color: white;
    margin: 40px 0px;
  }

  #carrousel2 .section .ficha img{
    margin-bottom: 68px;
    width: clamp(44px, 6.25vw, 120px);
  }

  #carrousel2 .section p{
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.6639999999999999rem + 1.055vw, 1.93rem);
    line-height: 1.22;
    font-family: 'frutigerlight';
  }

  #carrousel2 .section .volanta{
    font-size: clamp(0.75rem, 0.525rem + 1.125vw, 1.875rem);
    display: block;
    margin-bottom: 10px;
    font-family: 'frutigerregular';
  }

  #carrousel2 .section .titulin {
    font-size: clamp(1.8125rem, 1.3625rem + 2.25vw, 4.0625rem);
    display: block;
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }




/* SECTION 18 */

  #carrousel2 #section-8{
    background-image: url('img/18_img_01.jpg');
  }

  #carrousel2 #section-8{
    align-items: flex-start;
  }

  #carrousel2 #section-8 .uno{
    background-color: rgba(255, 255, 255, 0.815);
    color: #68696C;
  }

  #carrousel2 #section-8 .punta{
    transform: translateX(100%) rotate(180deg);
    right: 1px;
    left: unset;
  }

  #carrousel2 #section-8 hr{
    background-color:#68696C;
  }


/* SECTION 19 */

#carrousel2 #section-9{
    background-image: url('img/19_img_01.jpg');
  }

  #carrousel2 #section-9 .uno{
    background-color: rgba(166, 52, 147, 0.815);
    color: white;;
  }

  #carrousel2 #section-9 hr{
    background-color: white;
  }


/* SECTION 20 */

.section-quote2{
  background-color: white!important;
}

  .section-quote2 p{
    color: #68696C!important;
  }

  .section-quote2 .uno p:nth-child(2) {
    border-top: 3px solid #009E56!important;
    border-bottom: 1px solid #68696C!important;
  }


/* SECTION 22 */

#section-22{
  
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
}

  #section-22:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0)  0%, rgba(0,0,0,1) 100%);
    z-index: -1;

  }

  #section-22 video {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
  }

  #section-22 .contenedor{
    height: 60vh;
    justify-content: flex-end;
  }

  #section-22 h2{
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1.225rem + 1.375vw, 2.875rem);
    font-weight: unset!important;
    font-family: 'frutigerbold';
    line-height: 1.13;
  }

  #section-22 ul{
    margin-top: 90px;
    list-style-type: none;
    display: flex;
  }

  #section-22 ul li p{
    font-size: 0.75rem;
    font-size: clamp(0.75rem, 0.594rem + 0.78vw, 1.53rem);
    font-family: 'frutigerlight';
    line-height: 1.2em;
  }

  #section-22 ul li{
    border-right: 1px solid white;
    padding: 0 2vw;
  }

  #section-22 ul li:first-child{
    padding-left: 0px;
  }

  #section-22 ul li:last-child{
    padding-right: 0px;
    border-right: none;
  }

/* SECTION 23*/

#section-23{
  position:Relative;
}

#section-23 .uno {
  height: 60%;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

#section-23 .slider-container:after{
  content: '';
  height: 100%;
  width:100%;
  position: absolute;
  bottom:0;
  left:0;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgb(60 60 59) 0%, rgb(60 60 59 / 0%) 43%);
  z-index:4 ;
}

#section-23 .dos {
  height: 40%;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

#section-23 .dos h2 {
  font-size: 2.56rem;
  font-size: clamp(2.56rem, 2.122rem + 2.19vw, 4.75rem);
  color: #68696C;
  text-align: center;
  width: 60%;
  margin: 0 auto;
  font-weight: unset;
  font-family: 'frutigerregular';
}

  #section-23 .dos h2 b{
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }

#section-23 .colores {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 20px;
}

#section-23 .colores ul {
  list-style-type: none;
  width: 100%;
  height: 20px;
  display: flex;
}

#section-23 .colores ul li {
  width: 33.3%;
  height: 20px;
}

#section-23 .colores ul li:first-child {
  background-color: #009E56;
}

#section-23 .colores ul li:nth-child(2) {
  background-color: #A63494;
}

#section-23 .colores ul li:last-child {
  background-color: #006AB7;
}

/* SECTION 23 NUEVO */

.slider-container {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
  z-index: 10;
}

.slider {
  transition: transform 0.5s ease-in-out;
  align-items: center;
  display: flex; /* Make it a flex container for images */
  height: 100%; /* Match the height of the container */
  width: 100%; /* Ensure it spans the container width */
  flex-wrap: nowrap; /* Prevent images from wrapping */
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.timeline {
  position: absolute;
  bottom: 30px; /* Adjust the bottom position of the timeline */
  width: 60%; /* Make the timeline a bit smaller */
  left: 20%; /* Center horizontally */
  height: 1px;
  background: #ddd;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.timeline .draggable {
  position: absolute;
  top: -3px; /* Vertically center the draggable handle */
  width: 50px;
  height: 6px;
  background: white;
  cursor: pointer;
  z-index: 10; /* Ensure the handle is above other elements */
}

.drag{
  position: absolute;
  left:0;
  right:0;
  margin: 0 auto;
  top:20px;
  opacity: 1;
  width: 30px;
}


@keyframes dragAnimation {
  0% {
    transform: translateX(0); /* Start at the initial position */
    opacity: 1; /* Fully visible */
  }
  80% {
    transform: translateX(20px); /* Move to the right */
    opacity: 1; /* Still visible */
  }
  100% {
    transform: translateX(20px); /* Stay at the end */
    opacity: 0; /* Fade out */
  }
}

.drag {
  width: 40px; /* Adjust to your icon size */
  height: 40px;
  animation: dragAnimation 2s infinite; /* Loop animation every 2 seconds */
  display: inline-block;
}



































/* Responsive */

/*** Escritorio 1600px ***/
@media all and (max-width: 1650px) {
  
  /*elementos*/
  .contenedor {
    width: 80%;
  }

}


/*** Escritorio 1440px ***/
@media all and (max-width: 1440px) {
  
  /*elementos*/
  .contenedor {
    width: 90%;
  }

  /*section 1*/
  #section-1 h1{
    width: 240px;
  }

  /* section 3 */

  #section-3 .uno{
    height: 90vh;
    padding: 5vh;
  }

  #section-3 .uno p{
    font-size: 16px;
  }

  #section-3 ul li h4{
    font-size: 16px;
  }

  #section-3 ul li img{
    width: 35px;
    height: 35px;
  }

  #section-3 ul li hr{
    left: 17px;
    top: 6px;
  }

  /* section 4 */

  #section-4 div img{
    width: 50vw;
  }


  /* section 7 section 17 */

  #carrousel .section p, #carrousel2 .section p{
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.81rem + 0.32499999999999996vw, 1.2rem);
  }


}


/*** Escritorio 768px ***/
@media all and (max-width: 768px) {
  
  /* elementos */

  .esconder-mobile{
    display: none;
  }


  /* flotante */

  .flotante button{
    background-size: 15px;
    width: 35px;
    height: 35px;
  }

  /* SECTION 1*/

  #section-1{
    justify-content: flex-start;
  }

  #section-1 .description{
    width: 100%;
  }

  #section-1 .contenedor {
    margin-top: 89px;
  }

  #section-1 h1{
    width: 192px;
    position: unset;
    margin-top: 59px;
    line-height: 1;
    font-weight: unset;
  }

  #section-1 h2{
    margin-top: 10px;
    margin-bottom: 24px!important;
    font-weight: unset!important;
    font-family: 'frutigerbold';
  }

  #section-1 video{
    object-position: center top;
  }




  /* SECTION 2 */

  #section-2 .uno {
    height: 70%;
  }

  #section-2 .uno ul{
    margin-top: 45px;
  }

    #section-2 .uno ul li{
      flex-basis: 100%;
    }

      #section-2 .uno ul li:nth-child(2){
        margin-top: 32px;
      }

  #section-2 .dos{
    height: 30%;
  }

  #section-2 h2:after{
    height: 3px;
    width: 55px;
  }

  /* SECTION 3 */

  #section-3 .mapa{
    display: none;
  }


  #section-3 .uno{
    border-top: 3px solid #009E56;
    padding: 25px;
  }

      #section-3 .uno ul{
        display: flex;
        flex-wrap: wrap;
      }

        #section-3 .uno ul li{
          flex-basis: 50%;
        }

            #section-3 .uno ul li:first-child, #section-3 .uno ul li:nth-child(2) {
              margin-top: 0px;
            }

        #section-3 .uno hr{
          left: 17px;
          height: 44px;
          top: 1px;
          transform: translateY(-48px);
        }

        #section-3 .uno li:nth-child(2) hr{
          display: none;
        }

        #section-3 .uno p{
          margin-top: 16px;
          margin-bottom:: 24px;
        }

        #section-3 .uno .piquito{
          bottom: 0;
          left: 4%;
          top: unset;
          transform: translate(50%, 74%) rotate(90deg) ;
          width: 18px;
          height: auto;
        }

        #section-3 .uno h3:after{
          margin-top: 12px;
          height: 2px;
        }

        #section-3 ul li{
          gap: 10px;
        }



  #section-3 .dos .mapa2{
    display: block;
  }

  #section-3 .contenedor{
    flex-direction: column;
    height: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  #section-3 .contenedor .uno{
    height: auto;
  } 
  #section-3 .contenedor .dos{
    height: 50%;
  }

    #section-3 hr{
      display: none;
    }

    #section-3 .mapa-datos{
      bottom: 20px;
    }

    #section-3 .section-back {
      width: 100%;
      position: absolute;
      right: 0;
      bottom: 10vh;
    }

  /* SECTION 4 */

  #section-4 p{
    width: 100%;
    margin-bottom: 50px;
    line-height: 1.2;
    padding: 0 7%;
  }

  #section-4 div img{
    max-width: 90%;
    width: 90%;
  }

  #section-4 .title{
    margin-bottom: 18px;
  }


  /* SECTION 5 */

  #section-5 .contenedor{
    flex-direction: column;
  }

  #section-5 .dos ul{
    display: flex;
  }

  #section-5 .dos ul li{
    gap: 20px;
    display: flex;
    flex-direction: column;
  }

    #section-5 .dos ul li img{
      width: 17px;
      height: 17px;
      margin-top: 0px;
    }

    #section-5 .linea{
      display: none;
    }

    #section-5 .linea-mobile{
      width: 120%;
      height: 1px;
      background-color: black;
      position: absolute;
      top:56px;
      left:-24px;
    }

    #section-5 .uno .flecha{
      gap: 10px;
    }

    #section-5 .uno .flecha div .b{
      margin-top: 10px;
    }

    #section-5 .uno .title{
      line-height: 1;
    }


    #section-5 .projects{
      margin-top: 20px;
      margin-left: -26px;
    }

    #section-5 h4 {
      line-height: 1.2!important;
    }

    #section-5 .dos ul li{
      flex-basis: 25%;
    }

    #section-5 .dos ul li h4{
      margin-bottom: 5px!important;
      text-transform: uppercase;
    }

    #section-5 .dos ul li div{
      line-height: 1!important;
    }

    #section-5 .dos ul li span{
      line-height: 0.9!important;
    }



    #section-5 .projects .project-1, #section-5 .projects .project-2{
      gap: 2px;
    }

    #section .tres, #section .cuatro{
      flex-basis: 50%;
      width: 50%;
    }

    #section-5 .projects .project-1 div{
      padding: 6px 8px;
    }

    #section-5 .projects .project-1 div img{
      width: 13px!important;
    }


  /* SECTION 6 */

  #section-6 hr{
      margin-bottom: 22px;
      height: 2px;
      width: 43px;
    }

    #section-6 .title{
      margin-bottom: 27px;
      line-height: 1.02;
    }

  /* CAROUSEL */

  #carrousel .section {
    justify-content: flex-end;
    background-image: url('img/7_img_02.jpg');
  }

  #carrousel .section .uno {
    width: 100%;
    height: 70%;
    align-items: flex-start;
  }

  #carrousel .section .punta{
    top: 13px;
    transform: translateY(-100%) rotate(90deg);
    left: 34px;
    width: 25px;
  }

    #carrousel .section .uno .titulin{
      margin-bottom: 15px;
    }

    #carrousel .section .ficha img{
      margin-bottom: 30px;
    }

    #carrousel .section p{
      line-height: 1.37;
      font-size: 14px;
    }

    #carrousel #section-9{
      background-image: url(img/9_img_01b.jpg);
    }

    #carrousel #section-11{
      background-image: url(img/11_img_01b.jpg);
    }

    #carrousel #section-12 {
    
    background-position: center;
    }

  /* SECTION 14 */

  #section-14{
    justify-content: flex-start;
    padding-top: 50px;
  }

  #section-14 .contenedor{
    flex-direction: column-reverse;
    gap: 1vw;
    align-items: center;
    justify-content: center;
  }

  #section-14 p{
    text-align: center;
  }

  #section-14 img{
    max-width: 140px;
  }

  #section-14 .uno{
    display: flex;
    flex-direction: column-reverse;
  }

  #section-14 .uno p:nth-child(2){
    padding: 20px 0px 60px 0px;
    border-top: 0px;
    border-bottom: 0px;
  }

  #section-14 .uno p:first-child{
    position: absolute;
    bottom: 20px;
    right:0;
    left:0;
  }

  #section-14 .uno p:first-child:after{
    content: '';
    width: 60%;
    height: 1px;
    display: block;
    background-color: white;
    margin: 10px auto;
  }

  #section-14 p span{
    margin-left: 5px;
  }

  #section-14 p strong{
    margin-right: 5px;
  }


  /* SECTION 16 */

  #section-16 hr{
      margin-bottom: 22px;
      height: 2px;
      width: 43px;
    }

    #section-16 .title{
      margin-bottom: 27px;
      line-height: 1.02;
    }


  /* SECTION 17 */


  section.section-quote2{
    justify-content: flex-start;
    padding-top: 50px;
  }

  section.section-quote2 .contenedor{
    flex-direction: column-reverse;
    gap: 1vw;
    align-items: center;
    justify-content: center;
  }

  section.section-quote2 p{
    text-align: center;
  }

  section.section-quote2 img{
    max-width: 140px;
  }

  section.section-quote2 .uno{
    display: flex;
    flex-direction: column-reverse;
  }

  section.section-quote2 .uno p:nth-child(2){
    padding: 20px 0px 60px 0px!important;
    border-top: 0px!important;
    border-bottom: 0px!important;
  }

  section.section-quote2 .uno p:first-child{
    position: absolute!important;
    bottom: 20px!important;
    right:0!important;
    left:0!important;
    width: 90%;
    margin: 0 auto!important;
  }

  section.section-quote2 .uno p:first-child:after{
    content: ''!important;
    width: 60%!important;
    height: 1px!important;
    display: block!important;
    background-color: #009E56!important;
    margin: 10px auto!important;
  }

  section.section-quote2 p span{
    margin-left: 5px;
  }

  section.section-quote2 p strong{
    margin-right: 5px;
  }



  /* CAROUSEL */

  #carrousel2 .section {
    justify-content: flex-end;
    background-image: url('img/7_img_02.jpg');
  }

  #carrousel2 .section .uno {
    width: 100%;
    height: 75%;
    align-items: flex-start;
  }

  #carrousel2 .section .punta{
    top: 13px;
    transform: translateY(-100%) rotate(90deg);
    left: 34px;
    width: 25px;
  }

    #carrousel2 .section .uno .titulin{
      margin-bottom: 15px;
    }

    #carrousel2 .section .ficha img{
      margin-bottom: 30px;
    }



  /* SECTION 22 */

  #section-22{
    background-position: center center;
  }

  #section-22 ul{
    margin-top: 20px;
    flex-direction: column;
  }

    #section-22 .contenedor{
      height: 90vh;
    }

    #section-22 ul li{
      border-right: none;
      border-left: none;
      border-bottom: 1px solid white;
      padding: 15px 0px;
    }

    #section-22 ul li:first-child{
      padding-top: 0px;
    }

    #section-22 ul li:last-child{
      padding-bottom: 0px;
      border-bottom: none;
    }


/* SECTION 23 */


#section-23 .uno{
  height: 35%!important;
}

#section-23 .dos{
  height: 65%!important;
}

  #section-23 .dos h2{
    width: 80%;
    font-size: 32px;
  }


/* Background and slider container styles */
#section-23 .uno {
  background-image: url('img/23_img_01.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 60%;
  width: 100%;
}

.timeline{
  width: 90%;
  left: 5%;
}







}