@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* CSS */

* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", serif;
  color: var(--verdeoscuro);
}
html{
  overflow-x: hidden;
  scroll-behavior: smooth;
}
:root {
  --verde: #06be63;
  --verdeoscuro: #003333;
  --gris: #898989;
  --blanco: #f4f4f4;
  --blancofff: #FFF;
  --grisclaro: #dddddd;
}

h1, h2, h3, h4,
h1 b, h2 b, h3 b, h4 b,
h1 span, h2 span, h3 span, h4 span{
  position: relative;
  font-family: "Roboto Slab", serif;
}
ul{
  list-style: none;
}
img{
  max-width: 100%;
}

.btn{
  padding: 0.5rem 1rem;
  border-radius: 6px;
}
  .btn-primary{
    background-color: var(--verde);
    color: var(--blanco);
    text-decoration: none;
    transition: all 200ms
  }
    .btn-primary:hover{
      background-color: #059c51;
    }

body {
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--blanco);
}

#header {
  position: fixed;
  width: calc(100% - 10em);
  top: 0;
  left: 0;
  padding: 1em 5em;
  padding-top: 5em;
  background-color: var(--blanco);
  z-index: 9;
  transition: all 500ms;
}
  #header.fixed{
    padding-top: 1em;
    /*padding: 1em 5em;
    width: calc(100% - 6em);
    padding-bottom: 0.75em;*/
  }

  #header .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gris);
    padding-bottom: 10px;
  }

  #logo{
    width: 175px;
  }
  
  #menu{
    display: flex;
    list-style: none;
  }
    #menu li a{
      position: relative;
      font-size: 16px;
      color: var(--verdeoscuro);
      text-decoration: none;
      padding: 0.5rem 1rem;
    }
      #menu li a:hover, #menu li.active a{
        color: var(--verde);
      }
      #nav ul li a:after, #nav ul li.active a:after{
        content: "";
        position: absolute;
        height: 0.05em;
        width: 85%;
        left: 7.5%;
        bottom: 5px;
        background-color: var(--verde);
        transform: scale(0, 1);
        transition: all 300ms;
      }
        #nav ul li a:hover:after{
          transform: scale(1);
        }

.cls {
  fill: var(--verde);
  stroke-width: 0px;
}
.cls-arrow{
  fill: none;
  stroke: var(--gris);
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.country{
  display: none;
  position: absolute;
  padding: 5px;
  right: 0;
  background-color: var(--blanco);
  box-shadow: 0 3px 4px 0 rgb(0 0 0 / 25%);
  min-width: 90px;
}
  .options .country li a {
    margin: 0.25rem 0;
    border: 0;
  }
    .options .country li a:hover{
      background-color: var(--verde);
      color: var(--blanco);
    }

.options{
  display: flex;
  align-items: center;
  gap: 10px;
}
  .options li{
  }
    .options li a{
      display: flex;
      align-items: center;
      padding: 0.1rem 0.5rem;
      border-right: 1px solid var(--gris);
      font-size: 0.8em;
      color: var(--gris);
      text-decoration: none;
    }
      .options li a.btn{
        padding: 0.6rem 2rem;
        color: var(--blanco);
      }
      .options li:last-child a{
        border: 0
      }
      .options li a svg{
        width: 10px;
        margin-right: 2px;
      }

.container{
  padding: 0 5em;
  padding-top: 10em;
}

#presentation{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 5em;
}

.bg-shadow{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 3;
}

.h2{
  font-size: 4.5em;
  color: var(--verde);
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1em;
  padding: 2em 0;
}
  .h2 span{
    color: var(--verdeoscuro);
  }
  .nuestras-plataformas .h2 span{
    color: var(--verde);
  }

.presentation{
  display: flex;
}
  .presentation-left{
    position: relative;
    width: calc(40% - 50px);
    padding: 0 25px;
  }
    #asesor{
      position: relative;
      z-index: 2;
    }
    #mensaje{
      position: absolute;
      left: 10px;
      top: 5.5em;
      z-index: 2;
    }
  .presentation-right{
    width: calc(60% - 50px);
    padding: 3em 25px;
    padding-bottom: 0;
  }
    .presentation-right h5{
      font-size: 1.5em;
      color: var(--verde);
      line-height: 1.25em;
      margin-bottom: 25px;
    }

    .presentation-right p{
      font-size: 1.2em;
      color: var(--verdeoscuro);
      margin-bottom: 25px;
      line-height: 1.4em;
    }
    .presentation-right p:last-child{
      margin-bottom: 0;
    }

#plataformas{
  position: relative;
  padding: 15em 5em;
  /*background-image: url('../img/lines-bg.svg');
  background-size: 100%;
  background-repeat: no-repeat;*/
}
  .cards{
    display: flex;
    gap: 8%;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
  }
    .card{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: calc(40% - 4%);
      padding: 2%;
      background-color: #FFF;
      background-image: url(../img/card-line.png);
      background-size: auto 90%;
      background-repeat: no-repeat;
      background-position: 10px center;
      border-radius: 12px;
      box-shadow: 20px 15px 30px 0px rgb(0 0 0 / 25%);

      /*transition: all 500ms;*/
    }
      .card.aos-animate{
        transition-delay: 0;
      }
      .card:hover{
        transform: scale(1.05) !important;
        box-shadow: 20px 15px 20px 0px rgb(0 0 0 / 25%);
      }
      .card h3{
        font-size: 1.75em;
        color: var(--verde);
        padding: 0 10px;
      }
      .card p{
        font-size: 1em;
        color: var(--verdeoscuro);
        margin: 25px 0;
        padding: 0 10px;
      }
      .card a{
        position: relative;
        font-size: 1em;
        color: var(--verde);
        text-decoration: none;
        padding: 0 10px;
        margin-top: 20px;
      }
        .card a:after{
          content: "";
          position: absolute;
          height: 0.05em;
          width: 85%;
          left: 7.5%;
          bottom: 0;
          background-color: var(--verde);
          transform: scale(0, 1);
          transition: all 300ms;
        }
          .card a:hover:after{
            transform: scale(1);
          }

.slides-section{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15em 5em;
  /*background-image: url('../img/lines-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;*/
}
  .slides-section h5{
    padding-left: 2.4em;
    margin-bottom: 20px;
    color: var(--verdeoscuro);
    font-size: 16px;
  }
  .slides-section h3{
    font-size: 30px;
    color: var(--verde);
    margin-bottom: 25px;
    padding-left: 1.25em;
  }
  .slider{
    background-color: transparent;
  }
    .slick-list{
      overflow: visible;
      z-index: 2;
    }
    .slick-initialized .slick-slide.slide, .slidernotslider .slide{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      flex-direction: row;

      padding: 2em 4em;
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 20px 15px 30px 0px rgb(0 0 0 / 25%);
      margin: 0 2em;
    }
      .slide-text{
        width: calc(60% - 10em);
        padding: 0 5em;
      }
      .slide-text h4{
        font-size: 28px;
        color: var(--verdeoscuro);
      }
        .slide-text h4 span{
          color: var(--verde);
        }
      
      #apertura-de-cuentas .slide-text p{
        position: relative;
        padding-left: 12px;
        font-size: 18px;
        color: var(--verdeoscuro);
        margin: 25px 0;
      }
        #apertura-de-cuentas .slide-text p:before{
          content: "";
          position: absolute;
          width: 3px;
          height: 100%;
          top: 0;
          left: 2px;
          border-radius: 10px;
          background-color: var(--verde);
        }
      .slide-img{
        position: relative;
        display: flex;
        width: 40%;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        height: 400px;
        /*overflow: hidden;*/
      }
        .slide.cuenta-personal .slide-img{
          align-items: flex-start;
        }
        #celu-apertura-01{
          margin-top: 35px;
        }
        #celu-apertura-02, #celu-apertura-03{
          position: absolute;
          margin-top: 35px;
        }
        
        .slides-section .slide.cuenta-personal.slick-slide img{
          max-height: 450px;
        }
.slick-dots{
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  bottom: 10px;
  z-index: 2;
}
  .slick-dots li button{
    width: 12px;
    height: 12px;
    border: 0;
    padding: 0;
    background-color: var(--grisclaro);
    transition: all 300ms;
    border-radius: 100%;
    text-indent: -9999px;
    cursor: pointer;
  }
    .slick-dots li.slick-active button, .slick-dots li button:hover{
      background-color: var(--verde);
    }
.slick-arrow {
  position: absolute;
  width: 40px;
  height: 100%;
  padding: 0 10px;
  text-indent: 9999px;
  border: 0;
  background-color: transparent;
  background-image: url(../img/arrow-slide.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45%;
  top: 0;
  opacity: 0.85;;
  cursor: pointer;
  z-index: 9;
  transition: all 300ms;
}
  .slick-arrow:hover{
    opacity: 1;
  }
  .slick-prev{
    left: 2.2em;
  }
  .slick-next{
    right: 2.2em;
    transform: rotate(180deg);
  }
    .slick-arrow.slick-disabled{
      opacity: 0;
    }

  #footer {
    box-sizing: border-box;
  }
  
  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    border-top: 1px solid #505d69;
    padding-top: 24px;
  }
  
  .link-list-footer {
    display: flex;
    gap: 50px;
  }
  
  .link-list-footer ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
  }
  
  .link-list-footer ul li a{
    font-size: 13px;
    color: #606060;
    text-decoration: none;
  }
    .link-list-footer ul li a:hover{
      color: var(--gris);
    }
  
  .redes-footer {
    display: flex;
    justify-content: end;
    /*margin-top: 24px;*/
    gap: 8px;
  }
  
  .arg-footer {
    display: flex;
      justify-content: end;
      align-items: center;
      margin-top: 16px;
  }
    .arg-footer img{
      margin-right: -10px;
    }
  
  .footer-bottom {
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 24px;
    padding-bottom: 40px;
    border-bottom: 1px solid #505d69;
  }
  
  .footer-bottom-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #606060;
    font-size: 12px;
    line-height: 16px;
  }
  
  .footer-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 250px;
  }
    .footer-data .aaip{
      height: 50px;
    }
    .footer-data a{
      height: 50px;
    }
      .footer-data a img{
        width: 100%;
        height: auto;
      }
  
  .lf-footer {
    display: flex;
    margin: 0 auto;
    margin-bottom: 64px;
  }

.bg, .bg-hover{
  width: 545px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
}
  .bg-hover{
    opacity: 1;
  }
  .bg.bottom, .bg-hover.bottom{
    right: 0;
    left: inherit;
    bottom: 0;
    top: inherit;
    transform: rotate(180deg) !important;
  }
    .bg.bottom.left, .bg-hover.bottom{
      right: inherit;
      left: 0;
      bottom: 10em;
      transform: rotate(270deg) !important;
    }

#bg02, #bg-hover-02{
  bottom: -15em;
}
  body#index #bg-hover-02, body#index #bg-hover-04{
    right: 0;
    left: inherit;
    transform: rotate(180deg) !important;
  }
    body#index #bg-hover-04{
      bottom: 0;
    }
.bg-cls{
  fill: none;
  stroke: #cecdcd;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-miterlimit: 10;
  stroke-dasharray: 1000;
}
/*.bg-cls {
  fill: none;
  stroke: #cecdcd;
  stroke-width: 2px;
  stroke-miterlimit: 10;
  stroke-dasharray: 1000;
  /*stroke-dashoffset: 320;*/
  /*stroke-dashoffset: 1000;
  animation: dash 8s ease-in;
  animation-iteration-count: infinite;*/
  /*animation: all 2000ms;
}*/
.bg-hover .bg-cls{
  opacity: 0;
  stroke: var(--verde);
  animation: dash 3s ease-in;
  animation-iteration-count: infinite;
  stroke-dasharray: 0;
  -webkit-filter: drop-shadow(0px 0px 8px var(--verde));
  filter: drop-shadow(0px 0px 8px var(--verde));
}
  .bg-hover .bg-cls-2, .bg-hover .bg-cls-6{
    animation-delay: 1500ms;
  }
  .bg-hover .bg-cls-2, .bg-hover .bg-cls-6{
    animation-delay: 3000ms;
  }
  .bg-hover .bg-cls-3, .bg-hover .bg-cls-7{
    animation-delay: 4500ms;
  }
  .bg-hover .bg-cls-4, .bg-hover .bg-cls-8{
    animation-delay: 6000ms;
  }
  .bg-hover .bg-cls-5, .bg-hover .bg-cls-9{
    animation-delay: 7500ms;
  }
  /*.path {
    stroke-dasharray: 320;
    stroke-dashoffset: 0;
    animation: dash 2s ease-out;
  }*/

  #trigger2, #trigger4{
    position: absolute;
    left: 0;
    top: 0;
  }
  #trigger3{
    position: absolute;
    margin-top: 5em;
  }

  @keyframes dash {
    0% {
      opacity: 0;
      stroke-dashoffset: 1000;
    }
    35%{
      opacity: 0.1;
      stroke-dashoffset: 200;
    }
    70%{
      opacity: 0;
      stroke-dashoffset: 1000;
    }
    100%{
      opacity: 0;
      stroke-dashoffset: 1000;
    }
  }

/* NUESTRAS PLATAFORMAS */
.cards-nuestras-plataformas{
  display: flex;
  gap: 5%;
  width: 100%;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 50px;
}
  .card-np{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: calc(45% - 2.5%);
    padding: 2%;
    background-color: #FFF;
    border-radius: 12px;
    box-shadow: 20px 15px 30px 0px rgb(0 0 0 / 25%);
  }
    .card-np h4{
      font-size: 25px;
      font-family: "Roboto", serif;
      color: var(--verdeoscuro);
    }
      .card-np h4 b{
        font-family: "Roboto", serif;
        color: var(--verde);
      }
    .card-np-images {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-end;
    }
      .card-np-images{
        max-width: 80%;
      }
      #np-celu{
        margin-left: -100px;
        margin-bottom: -25px;
        max-width: 150px;
      }
    .card-np-tags {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 25px;
    }
      .card-np-tags span {
        display: inline-block;
        padding: 10px 15px;
        font-size: 18px;
        color: var(--verdeoscuro);
        background-color: #e8e8e8;
        border-radius: 8px;
      }
    .arrow-card{
      position: absolute;
      width: 25px;
      bottom: 10px;
    }
    .slides-section .slide-text{
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: calc(60% - 4em);
      padding: 0 2em;
    }
      .slides-section .slide-text.full{
        width: calc(100% - 10em);
      }
      .slides-section .slide-text img{
        max-width: 50px;
      }
      .slides-section .slide-text b{
        color: var(--verde);
      }
    .slides-section #celu-integracion-02{
      margin-left: -30%;
      margin-top: 50px;
    }

    #boton-transferir, #touch{
      position: absolute;
      top: 0;
      transform-origin: bottom center;
    }

    .slides-section .slick-slide img{
      max-height: 100%;
    }
      #pc-cuenta-empresa{
        max-width: inherit;
        max-height: 115%;
      }

    #movimientos-control, #search-control{
      position: absolute;
      top: 0;
    }

    .slides-section .mas-control .slide-text{
      width: calc(40% - 4em);
    }
    .slides-section .mas-control .slide-img{
      width: 60%;
    }

    #card-atencion-01, #card-atencion-02, #operacion-rapida, #card-operacion-rapida{
      position: absolute;
    }
    #app-plataforma-asesores.slides-section h3{
      padding-right: 15em;
    }
    #nuestras-plataformas .slide .slide-text {
      height: 300px;
      padding-top: 100px;
    }
      #nuestras-plataformas .slide .slide-text img{
        height: 50px; 
      }
/* NUESTRAS PLATAFORMAS */
/* PRODUCTO FINANCIERO */
#donde-invertir{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 5em;
}
  #donde-invertir .h2{
    padding-top: 0.5em;
    padding-bottom: 10px;
  }
    #donde-invertir .h2 b{
      color: var(--verde);
    }
  #donde-invertir p{
    width: 55%;
    padding: 0 5em;
    font-size: 1.25em;
    font-weight: 500;
    color: var(--verdeoscuro);
    text-align: center;
  }

  #donde-invertir .donde-invertir{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-top: 25px;
  }
    #donde-invertir .donde-invertir .mercado{
      display: flex;
      flex-direction: column;
      gap: 30px;
      width: 33.33%;
    }
      #donde-invertir .donde-invertir .mercado-local{
        position: relative;
        align-items: flex-end;
        margin-right: -5%;
        z-index: 2;
      }
      #donde-invertir .donde-invertir .mercado-internacional{
        align-items: flex-start;
        margin-left: -5%;
        z-index: 2;
      }
      #donde-invertir .donde-invertir h4{
        font-family: "Roboto", serif;
        font-size: 23px;
        color: var(--verdeoscuro);
      }
      #donde-invertir .donde-invertir h5{
        background-color: var(--blancofff);
        color: var(--verde);
        padding: 8px 15px;
        box-shadow: 0 0 10px 0 rgb(0 0 0 / 25%);
        font-size: 23px;
        border-radius: 4px;
        transition: all 400ms;
        cursor: grab;
      }
        #donde-invertir .donde-invertir h5.ml-arrow{
          background-color: transparent;
          padding-top: 0;
          box-shadow: inherit;
          margin-top: -20px;
        }
          #donde-invertir .donde-invertir h5.ml-arrow span{
            opacity: 0;
          }
          #donde-invertir .donde-invertir h5.ml-arrow a{
            transition: all 300ms;
          }
            #donde-invertir .donde-invertir h5.ml-arrow a:hover{
              transform: scale(1.05);
            }
        #donde-invertir .donde-invertir h5:hover{
          transform: scale(1.05);
        }
        #donde-invertir .donde-invertir h5 small{
          font-family: "Roboto", serif;
          font-size: 15px;
          font-weight: 400;
          color: var(--verdeoscuro);
        }

        @property --num {
          syntax: '<integer>';
          initial-value: 0;
          inherits: false;
        }

        #donde-invertir .donde-invertir h5.aos-animate span{
          transition: --num 1500ms;
          counter-reset: num var(--num);
          color: var(--verde);
        }
          #donde-invertir .donde-invertir h5 span:after{
            content: counter(num);
          }
          #donde-invertir .donde-invertir h5.aos-animate span.ml-01{
            transition: --num 1500ms;
            --num: 100;
          }
          #donde-invertir .donde-invertir h5.aos-animate span.ml-02{
            --num: 2000;
          }

          #donde-invertir .donde-invertir h5.aos-animate span.mi-01{
            --num: 25;
          }
          #donde-invertir .donde-invertir h5.aos-animate span.mi-02{
            --num: 40000;
          }
        
        #donde-invertir .donde-invertir h5 .arrow-card{
          left: 50%;
          transform: translate(-50%, -50%) !important;
        }
          
        #donde-invertir .bg-shadow{
          bottom: 0;
        }
    #mercado-local-slides{
      padding: 8em 5em;
    }

    #celu-patrimonio-personal{
      margin-bottom: -4em;
    }
    #celu-mercado-internacional{
      margin-bottom: -4em;
    }

    .slide-cards ul{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      gap: 40px;
      margin-top: 25px;
    }
      .slide-cards ul li{
        display: inline-block;
      }
      .slide-cards span{
        position: relative;
        display: inline-block;
        background-color: var(--blancofff);
        color: var(--verdeoscuro);
        padding: 10px 25px;
        box-shadow: -2px 2px 10px 0 rgb(0 0 0 / 20%);
        font-size: 18px;
        font-weight: 600;
        border-radius: 6px;
        transition: all 400ms;
        cursor: grab;
      }
        .slide-cards span:hover{
          transform: scale(1.05);
        }
        .slide-cards span:before{
          content: "";
          position: absolute;
          width: 4px;
          height: 80%;
          top: 10%;
          left: 8px;
          background-color: var(--verdeoscuro);
          border-radius: 10px;
        }
          .slide-cards span.orange:before{background-color: #F45200;}
          .slide-cards span.orange2:before{background-color: #F4AB00;}
          .slide-cards span.violet:before{background-color: #6E00F4;}
          .slide-cards span.pink:before{background-color: #FB0058;}
          .slide-cards span.lila:before{background-color: #2C48D3;}
          .slide-cards span.yellow:before{background-color: #FAE355;}
          .slide-cards span.green:before{background-color: #06BE63;}
          .slide-cards span.bluelight:before{background-color: #1474F8;}
          .slide-cards span.turquoise:before{background-color: #00F4D1;}
    
    .slides-section .slide-text.full .slide-cards ul{
      align-items: flex-start;
      padding-bottom: 10.5em;
    }
      .slides-section .slide-text.full .slide-cards ul li{
        width: 30%;
      }
        .slides-section .slide-text.full .slide-cards ul li span{
          margin-bottom: 25px;
        }

    .slidernotslider{
      position: relative;
      z-index: 2;
    }
    .slides-section .slide-text a{
      color: var(--verde);
      font-size: 18px;
      margin-top: 50px;
    }

    .ampliar-opciones .slide-img{
      padding: 0 5em;
    }
/* PRODUCTO FINANCIERO */

/* QUIENES SOMOS */
#quienes-somos{
  position: relative;
  padding-bottom: 5em;
}
  #quienes-somos .h2{
    position: relative;
    text-align: left;
  }
    #quienes-somos .h2 img{
      position: absolute;
      max-height: 140%;
      top: -20%;
      right: -15%;
    }
    #quienes-somos p{
      font-size: 1.5em;
      line-height: 150%;
      color: var(--verdeoscuro);
      margin-bottom: 50px;
    }

#mapa{
  position: relative;
  display: flex;
  padding-top: 0;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}
  .mapa-text{
    width: 50%;
  }
    .scalize{
      width: 680px !important;
      height: auto;
    }
    .mapa-text p{
      font-size: 1.5em;
      line-height: 150%;
      color: var(--verdeoscuro);
    }
      .mapa-text p b{
        color: var(--verde);
      }
  .mapa{
    position: relative;
    width: 50%;
  }

  .scalize .item-point{
    position: absolute;
    z-index: 2;
  }
    .scalize .item-point a{
      display: inline-block;
    }
    .popOver{
      position: absolute;
      /*top: 0;
      right: 0;*/
      opacity: 0;
      transform: scale(0) translate(50%, 0);
      transform-origin: right center;
      transition: all 300ms;
    }
    .popOver.big{
      background-color: #e8e8e8;
      border-radius: 4px;
      padding: 4px;
      max-width: 175px;
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%);
    }
      .item-point:hover .popOver, .popOver.on{
        opacity: 1;
        transform: scale(1) translate(55%, 5px);
        z-index: 3;
      }
      .popOver.big.on{
        transform: scale(1) translate(40%, 0);
      }
      .popOver span{
        position: relative;
        display: inline-block;
        background-color: #E8E8E8;
        color: var(--verdeoscuro);
        padding: 10px 25px;
        box-shadow: -2px 2px 10px 0 rgb(0 0 0 / 20%);
        font-size: 18px;
        font-weight: 600;
        border-radius: 6px;
        transition: all 400ms;
      }
        .popOver span:hover{
          transform: scale(1.05);
        }
        .popOver span:before{
          content: "";
          position: absolute;
          width: 4px;
          height: 80%;
          top: 10%;
          left: 8px;
          background-color: var(--verdeoscuro);
          border-radius: 10px;
        }
    .popOver.big img{
      padding-bottom: 10px;
      border-bottom: 1px solid var(--verde);
    }
    .popOver.big h5{
      font-family: "Roboto", serif;
      color: var(--verde);
    }
    .popOver.big h3{
      font-family: "Roboto", serif;
      color: var(--verdeoscuro);
    }

#nuestro-equipo{
  position: relative;
  padding-bottom: 15em;
}
  #nuestro-equipo h2{
    font-size: 36px;
    margin-bottom: 50px;
    color: var(--verdeoscuro);
  }
  #nuestro-equipo #bg03, #nuestro-equipo #bg-hover-03{
    top: -2em;
  }
  #nuestro-equipo #bg-hover-04{
    right: 0;
    left: inherit;
    bottom: -15em;
    top: inherit;
    transform: rotate(180deg) !important;
  }
    #nuestro-equipo #bg04{
      bottom: -15em;
    }
  .team-line{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }
    .team{
      position: relative;
      padding: 0 20px;
      padding-bottom: 5em;
    }
      .team-info {
        position: absolute;
        width: 100%;
        text-align: center;
        margin-top: 15px;
        left: 0;
      }
        .team-info h5{
          font-size: 1.1rem;
          color: var(--verdeoscuro);
        }
        .team-info h3{
          font-size: 1.1rem;
          font-weight: normal;
          color: var(--verde);
        }

  #team-shadow{
    position: absolute;
    left: 0;
    bottom: 4.1em;
    z-index: 5;
  }

  .team-lines{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-top: 8em;
  }
    .team-lines h4{
      position: absolute;
      top: -3em;
      font-family: 'Roboto';
      font-size: 1.5rem;
      color: var(--verde);
    }

    .team-lines .team-line-two #team-shadow{
      bottom: 4em;
    }

#quienes-somos #bg-hover-02{
  right: 0;
  left: inherit;
  top: inherit;
  transform: rotate(180deg) !important;
}

#trabaja-en-inviu .slide-text{
  width: calc(50% - 2em);
  padding: 0 1em;
}
  #trabaja-en-inviu .slide-text h4{
    color: var(--verde);
    margin-bottom: 25px;
  }
  #trabaja-en-inviu .slide-text p{
    font-size: 1.1rem;
    color: var(--verdeoscuro);
  }
  #trabaja-en-inviu .slide-text a{
    font-size: 1.1rem;
    color: var(--verde);
    transition: all 300ms;
  }
    #trabaja-en-inviu .slide-text a:hover{
      color: var(--verdeoscuro);
    }

#trabaja-en-inviu{
  position: relative;
  padding-bottom: 10em;
}
  #trabaja-en-inviu .slide-img{
    width: 50%;
  }
  #trabaja-en-inviu #bg06, #trabaja-en-inviu #bg-hover-06{
    bottom: -5em;
  }
/* QUIENES SOMOS */

/* SELECTOR DE PAIS */
#country-selection{
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
  #country-selection #bg02, #country-selection #bg-hover-02{
    bottom: 0;
  }
  #country-selection .bg-hover.bottom{
    left: inherit;
    right: 0;
    transform: rotate(180deg) !important;
  }

  .site-selector {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 40%;
    margin-top: -5em;
  }
    .site-selector li {
      border-radius: 10px;
      overflow: hidden;
    }
      .site-selector li.first{
        display: block !important;
      }
      .site-selector li.site-options{
        position: absolute;
        width: 100%;
        margin-top: 30px;
        border-radius: 0px 0 10px 10px;
        transform: scale(1, 0);
        transform-origin: top center;
        transition: all 500ms;
      }
      .site-selector li.site-options.on{
        transform: scale(1);
      }
        .site-selector li a{
          background-color: #E8E8E8;
          width: calc(100% - 40px);
          padding: 10px 20px;
          display: flex;
          justify-content: flex-start;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          color: #606060;
          text-decoration: none;
          transition: all 400ms;
        }
        .site-selector li a:hover{
          background-color: #dfdfdf;
        }
        .site-selector li a img{
          position: absolute;
          right: 20px;
          height: 20px;
          transition: all 300ms;
        }
          .site-selector li a img.on{
            transform: rotate(90deg);
          }
/* SELECTOR DE PAIS*/

  @media (max-width: 1024px) {
    html{
      overflow-x: hidden;
    }
    #header, #header.fixed{
      display: flex;
      width: calc(100% - 2em);
      padding: 1em 1em;
      padding-bottom: 0;
      box-shadow: 0 0 12px 0 rgb(0 0 0 / 25%);
    }
      #header .header{
        width: 100%;
      }
    #nav{
      display: none;
    }
    .container{
      padding: 0 2em;
      padding-top: 4em;
    }
    .presentation{
      flex-direction: column;
    }
    .presentation-left{
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 0;
    }
    .presentation-right{
      width: calc(100% - 50px);
    }
    .footer-top{
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }
    .h2{
      font-size: 1.75em;
      padding: 1em 0;
    }
    .presentation-right p:last-child{
      margin-bottom: 50px;
    }
    .bg, .bg-hover{
      width: 50%;
    }
    .cards{
      flex-direction: column;
    }
      .cards .card{
        width: 100%;
        margin-bottom: 50px;
        box-sizing: border-box;
        padding-bottom: 2em;
      }
    .slick-initialized .slick-slide.slide{
      flex-direction: column;
      padding: 2em;
      margin: 0 1em;
      height: 525px;
    }
    .slides-section .slide-text, .slides-section .mas-control .slide-text{
      width: 100%;
    }
    .slides-section .slide-img, .slides-section .mas-control .slide-img{
      width: 100%;
      height: 200px;
      margin-top: 25px;
    }
      .slides-section .slide-img img{
        max-height: 100%;
      }
    .slides-section, #plataformas{
      padding: 5em 2em;
    }

    .card h3 {
      font-size: 1.5em;
      padding: 10px 35px;
    }

    .card p{
      margin: 25px;
    }
    .card a{
      padding: 0 35px;
    }

    .options li a.btn {
      padding: 0.4rem 0.5rem;
    }

    #mensaje{
      left: inherit;
      top: 4em;
    }

    .slick-arrow{
      display: none !important;
    }
    .slide-text h4{
      font-size: 23px;
    }

    #apertura-de-cuentas.slides-section .slick-slide #celu-apertura-01, #apertura-de-cuentas.slides-section .slick-slide #celu-apertura-02, #apertura-de-cuentas.slides-section .slick-slide #celu-apertura-03{
      max-height: 225px;
    }

    @keyframes dash {
      0% {
        opacity: 0;
        stroke-dashoffset: 1000;
      }
      35%{
        opacity: 0.4;
        stroke-dashoffset: 200;
      }
      70%{
        opacity: 0;
        stroke-dashoffset: 1000;
      }
      100%{
        opacity: 0;
        stroke-dashoffset: 1000;
      }
    }

    .card-np h4{
      font-size: 18px;
      text-align: center;
    }
    #np-celu{
      max-height: 100px;
    }
    .card-np-tags{
      margin: 10px;
      margin-bottom: 30px;
    }
      .card-np-tags span{
        padding: 5px;
        font-size: 11px;
        text-align: center;
      }
    .slides-section h3{
      font-size: 23px;
    }
    .slides-section h5{
      padding-left: 2.25em;
      margin-bottom: 10px;
    }
    #app-plataforma-asesores.slides-section h3{
      padding-right: 1em;
    }

    #quienes-somos .h2{
      font-size: 1.3em;
    }
    #quienes-somos p{
      font-size: 1.2em;
    }

    #mapa{
      flex-direction: column;
      padding: 2em 1em;
    }
      .mapa-text{
        width: 100%;
      }
      .mapa{
        width: 100%;
      }
      .scalize{
        /*position: relative;*/
        transform: translate(-22%, 0px);
      }
        body.ios .scalize .target{
          margin-top: -100px;
          margin-left: -100px;
        }
        /*.scalize-points{
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
        }*/
    #nuestro-equipo h2{
      font-size: 30px;
    }
    .team-line, .team-lines{
      flex-direction: column;
    }
    #team-shadow{
      display: none;
    }
    .team-lines{
      padding-top: 0;
    }
      .team-lines .team-line{
        padding-top: 8em;
      }
    .team-lines h4{
      top: 2em;
    }
    #nuestro-equipo{
      padding-bottom: 0;
    }
    #trabaja-en-inviu{
      padding: 1em;
    }
      #trabaja-en-inviu .slide{
        flex-direction: column;
        padding: 2em 1em;
      }
        #trabaja-en-inviu .slide-text{
          width: calc(100% - 2em);
        }
        #trabaja-en-inviu .slide-img{
          width: 100%;
          height: auto;
          padding: 3em 0;
        }
    #donde-invertir p{
      width: 100%;
    }
    #donde-invertir .donde-invertir .mercado-local,
    #donde-invertir .donde-invertir .mercado-internacional{
      width: 50%;
      margin: 0;
      align-items: center;
      padding: 10px;
    }
    #donde-invertir .mercado.mercado-world{
      width: 100%;
      position: absolute;
    }
    #donde-invertir .donde-invertir h4{
      text-align: center;
    }
    #donde-invertir .donde-invertir h5{
      text-align: center;
      line-height: 15px;
    }
    #mercado-local-slides {
      padding: 2em;
    }
    .slide-cards ul{
      gap: 15px;
    }
    #mercado-local-slides .slick-initialized .slick-slide.slide{
      height: auto;
    }
    #mercado-local-slides .slide-text h4 {
      font-size: 20px;
    }
    #mercado-local-slides.slides-section .slide-text.full {
      width: 100%;
    }
    #mercado-local-slides .slide-cards ul{
      /*flex-direction: column;
      align-items: flex-start;*/
    }
      #mercado-local-slides.slides-section .slide-text.full .slide-cards ul li {
        width: 100%;
      }
        #mercado-local-slides .slide-cards ul li span{
          font-size: 16px;
          padding: 6px 20px;
        }
    #mercado-local-slides.slides-section .slide-text.full .slide-cards ul{
      padding-bottom: 9em;
    }
    #mercado-local-slides.slick-dots{
      bottom: 7em;
    }
    #mercado-internacional .slidernotslider .slide{
      flex-direction: column;
      padding: 2em;
      margin: 0 1em;
    }
    .popOver.big.on, .item-point:hover .popOver, .popOver.on{  
      transform: scale(1) translate(-10%, 50px);
    }
      #uruguay.popOver.big.on{
        transform: scale(1) translate(-35%, 50px);
      }
    body.ios .popOver.big.on, body.ios .item-point:hover .popOver{
      transform: scale(1) translate(0, 0);
      margin-top: -100px;
      margin-left: -10px;
    }
      body.ios .popOver.on{
        transform: scale(1) translate(0, 0);
        margin-top: -75px;
        margin-left: -50px;
      }
    .footer-bottom{
      flex-direction: column;
    }
      .footer-data img{
        max-height: 50px;
      }
    .site-selector{
      width: 75%;
      margin-top: 0;
    }
  }

  @media (orientation: landscape) and (min-width: 1024px) and (max-width: 1200px){
    .slide.cuenta-personal .slide-img {
      align-items: center;
    }
    .slide-cards ul{
      gap: 15px;
    }
    .slides-section .slide-text.full .slide-cards ul{
      gap: 25px;
      padding-bottom: 7em;
    }
    .slide-cards span{
      font-size: 16px;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1024px) {
    .scalize{
      transform: translate(0, 0);
    }
    #quienes-somos .h2 img{
      right: -5px;
    }
  }
  @media (min-width: 1024px) and (max-width: 1200px) {
    #apertura-de-cuentas.slides-section .slick-slide img{
      max-height: 200%;
    }
    #apertura-de-cuentas.slides-section .slick-slide #celu-apertura-01{
      max-height: 260px;
      margin-left: 0;
    }
    #apertura-de-cuentas.slides-section .slick-slide #celu-apertura-02, #apertura-de-cuentas.slides-section .slick-slide #celu-apertura-03{
      max-height: 300px;
      margin-left: 0;
    }
    .scalize{
      transform: translate(0, 0);
    }
    #quienes-somos .h2{
      font-size: 4em;
    }
      #quienes-somos .h2 img{
        max-height: 50%;
        top: 24%;
        right: -10%;
      }
    .popOver.big.on, .item-point:hover .popOver, .popOver.on{  
      transform: scale(1) translate(-10%, 50px);
    }
      #uruguay.popOver.big.on{
        transform: scale(1) translate(-35%, 50px);
      }
    #menu li a{
      font-size: 14px;
    }
      .options li a.btn{
        padding: 0.6rem 1rem;
      }
  }

  @media (min-width: 1400px){
    #quienes-somos .h2 img{
      max-height: 120%;
      top: -10%;
    }
  }



  @media (max-width: 370px) {
    #logo {
      width: 150px;
    }
    #quienes-somos .h2 img {
      position: absolute;
      max-height: 100%;
      top: 0%;
    }
    .scalize {
      transform: translate(-30%, 0px);
    }
  }

  @media (min-width: 1425px) {
    #plataformas, .container{
      max-width: calc(1400px - 10em);
      margin: 0 auto;
    }
    .slides-section{
      max-width: calc(1400px - 10em);
      margin: 0 auto;
    }
    #header{
      right: 0;
    }
  }