.sin_margen { margin-right:0px; margin-left:0px; }
.sin_padding { padding-left:0px; padding-right:0px;  }
.sin_flex { display:inherit; }

.sin_padding_der { padding-right:0px; }
.sin_padding_izq { padding-left:0px; }

.margen_arriba_1 { margin-top:1%; }
.margen_arriba_2 { margin-top:2%; }
.margen_arriba_3 { margin-top:3%; }
.margen_arriba_4 { margin-top:4%; }
.margen_arriba_5 { margin-top:5%; }

.margen_abajo_1 { margin-bottom:1%; }
.margen_abajo_2 { margin-bottom:2%; }
.margen_abajo_3 { margin-bottom:3%; }
.margen_abajo_4 { margin-bottom:4%; }
.margen_abajo_5 { margin-bottom:5%; }

.padding_arriba_1 { padding-top:1%; }
.padding_arriba_2 { padding-top:2%; }
.padding_arriba_3 { padding-top:3%; }
.padding_arriba_4 { padding-top:4%; }
.padding_arriba_5 { padding-top:5%; }

.padding_abajo_1 { padding-bottom:1%; }
.padding_abajo_2 { padding-bottom:2%; }
.padding_abajo_3 { padding-bottom:3%; }
.padding_abajo_4 { padding-bottom:4%; }
.padding_abajo_5 { padding-bottom:5%; }

body {
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}




.barra_nav { 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding-bottom: 0;
  padding-top: 0px;
}

.navbar-brand {
  max-width: 170px;
  margin-bottom: 10px;
  border-right: 2px solid #1280C7;
  padding-right: 20px;
}

.bot_reporte_nav {
  margin-bottom: 10px;
  color:#1280C7;
  font-weight: 700;
  line-height: 1.2;
  border:2px solid #1280C7;
  padding: 5px 15px;
  text-decoration: none;
  font-size: 14px;
  padding-right: 30px;
  position: relative;
  transition: .4s all ease-in-out;

    &::before {
      content:'';
      top: 14px;
      right: 7px;
      width: 20px;
      height: 20px;
      mask: url('../imagenes/flecha_menu.svg') no-repeat center;
      mask-size: contain;
      -webkit-mask: url('../imagenes/flecha_menu.svg') no-repeat center;
      -webkit-mask-size: contain;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: #1280C7; /* color que quieras aplicar */
      position: absolute;
      transition: .4s all ease-in-out;
    }

    &:hover {
      background-color: #1280C7;
      color:#FFF;

      &::before {
        background-color: #FFF;
      }
    }
}

.nav-link {
  font-size: 12px;
  line-height: 1.2;
  transition: .4s all ease-in-out;
  padding-bottom: 30px;
  padding-top: 30px;
  min-width: 100px;
  padding-left: 4px !important;
  color:#000;
}

.nav-item {
  
  position: relative;
  z-index: 2;
  transition: .4s all ease-in-out;
  margin-right: 5px;

  &::before {
    content:'';
    position: absolute;
    width: 100%;
    height: 10%;
    z-index: -1;
    bottom: 0;
    left: 0;
    transition: .4s all ease-in-out;
  }

  &:hover {

    &::before {
      height: 100%;
    }

    .nav-link {
      color:#FFF;
    }
  }

}

.m_1 {
  &::before {
    background-color: #3366FF;
  }
}

.m_2 {
  &::before {
    background-color: #F55C36;
  }
}

.m_3 {
  &::before {
    background-color: #8A2BFF;
  }
}


.m_4 {
  &::before {
    background-color: #03A880;
  }
}


.m_5 {
  &::before {
    background-color: #F59E12;
  }
}

.m_6 {
  &::before {
    background-color: #00BFDB;
  }
}

.m_7 {
  &::before {
    background-color: #59A30D;
  }
}

.m_8 {
  &::before {
    background-color: #3366FF;
  }
}



.banner_top {
  background-image: url('../imagenes/banner_top.png');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
  min-height: 1000px;
  margin-top: 56px;
  overflow: hidden;
  position: relative;
}

.img_banner_abs {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

/**************** ANIM CIRCULO ********************************/
.container-circ {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 1130px;
    height: 1080px;
    top: 0%;
    left: -15%;
    z-index: 5;
}

/* Círculo principal que rota */
.rotating-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 4s linear infinite;
}

/* El círculo sólido */
.circle {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgb(59, 130, 246);
    border-radius: 50%;
    top: 86.2%;
    right: 49%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8),
                0 0 40px rgba(59, 130, 246, 0.4);
    z-index: 2;
}

/* La estela - anillo con gradiente (detrás del círculo) */
.trail {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
   background: conic-gradient(
        from 180deg, /* ← dirección correcta */
        rgb(59, 130, 246) 0%,              /* sólido cerca del círculo */
        rgba(59, 130, 246, 0.85) 7%,
        rgba(59, 130, 246, 0.7) 14%,
        rgba(59, 130, 246, 0.5) 22%,
        rgba(59, 130, 246, 0.3) 30%,
        rgba(59, 130, 246, 0.15) 38%,
        transparent 45%,                  /* transparente al salir */
        transparent 100%
    );

    /* Máscara del grosor del arco */
    -webkit-mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    z-index: 1;
}

/* Animación de rotación */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}



.ano_bt {
  margin-top: 600px;
  color:#FFF;
  font-size: 20px;
  font-weight: 600;
  display: inline-block;
  border:1px solid #FFF;
  border-radius: 25px;
  padding:10px 35px;
}

.tit_bt {
  font-size: 44px;
  font-weight: 300;
  line-height: 1.3;
  color:#FFF;
  margin-top: 15px;
}


.flecha_scroll {
  margin-top: 680px;
  border-radius: 50%;
  padding:15px;
  display: inline-block;
  img {
    transform: rotate(180deg);
    max-width: 70px;
  }
}

.scroll_azul {
    background-color: #3366FF;
}


.secc_ceo {
  padding-top: 100px;
  padding-bottom: 50px;
}

.cuadro_ceo {
  border:1px solid #3366FF;
  border-radius: 45px;
  padding:50px 40px;
  height: 100%;
}

.texto_ceo {
  color:#3366FF;
  line-height: 1.3;
  max-width: 550px;
  font-size: 18px;
}

.ico_mensaje {
  max-width: 90px;
  margin-top: -15px;
}


.flecha_negra_abajo {
  transform: rotate(225deg);
  max-width: 50px;
  margin-top: 50px;
}

.nombre_ceo {
  color:#3366FF;
  font-weight: 700;
  font-size: 18px;
  margin-top: 30px;
}

.bot_mas_info_ceo {
  display: inline-block;
  margin-top: 30px;
  border-radius: 20px;
  padding:8px 25px;
  color:#FFF;
  background-color: #223382;
  padding-right: 45px;
  position: relative;
  text-decoration: none;
  font-size: 14px;
  &::before {
    content:'';
    top: 7px;
    right: 14px;
    width: 22px;
    height: 22px;
    background-image: url('../imagenes/ico_pdf.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
  }
}

.indice_ceo {
  color:#000;
  font-size: 14px;
  margin-top: 5px;
}




.bot_mas_info {
  display: inline-block;
  border-radius: 20px;
  padding:8px 25px;
  margin-top: 20px;
  color:#FFF;
  background-color: #223382;
  padding-right: 45px;
  position: relative;
  text-decoration: none;
  font-size: 14px;
  &::before {
    content:'';
    top: 7px;
    right: 14px;
    width: 22px;
    height: 22px;
    background-image: url('../imagenes/ico_pdf.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
  }
}

.indice {
  color:#000;
  font-size: 14px;
  margin-top: 5px;
}


.bg_impacto {
  padding-top: 70px;
  padding-bottom: 30px;
  background-color: #EDF1FF;
}

.tit_impacto {
  color:#3366FF;
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 10px;
}

.texto_impacto {
  color:#000;
  font-weight: 600;
  line-height: 1.3;
  max-width: 600px;
  margin-bottom: 60px;
}

.c_imp_1 {
  border:1px solid #3366FF;
  border-radius: 55px;
  padding: 20px 15px;

  .num_imp_1 {
    color:#223382;
    font-size: 60px;
    font-weight: 200;
    display: inline-block;
    line-height: 1;
  }
  .texto_imp_1 {
    display: inline-block;
    color:#000000;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
  }
}

.c_imp_2 {
  border-radius: 50%;
  background-color: #3366FF;
  padding:25px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin-left: -15px;
  margin-right: 15px;
  img {
    max-width: 40px;
    margin:0 auto;
  }
}

.c_imp_3 {
  border-radius: 50%;
  background-color: #223382;
  padding:25px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin-left: -30px;
  margin-right: 30px;
  img {
    max-width: 40px;
    margin:0 auto;
  }
}


.c_imp_4 {  
  background-color: #3366FF;
  border-radius: 55px;
  padding: 20px 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  gap: 15px;

  .num_imp_4 {
    color:#FFF;
    font-size: 60px;
    font-weight: 200;
    display: inline-block;
    line-height: 1;
  }
  .texto_imp_4 {
    display: inline-block;
    color:#FFF;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
  }
}


.graf_imp_3 {
  margin-top: 15px;
}

.tit_imp_5 {
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 5px;
  max-width: 135px;
  margin-top: 25px;
}

.texto_imp_5 {
  font-size: 12px;
  color:#000;
  font-weight: 500;
}

.c_ico_imp_6 {
  border-radius: 50%;
  padding:15px;
  border:1px solid #3366FF;
}

.c_imp_6 {
  border:1px solid #3366FF;
  border-radius: 45px;
  padding:8px 15px;
}

.num_c_imp_6 {
  color:#3366FF;
  font-size: 38px;
  font-weight: 200;
  line-height: 1;
}

.texto_c_imp_6 {
  font-weight: 600;
  font-size: 12px;
  color:#223382;
}

.texto_c_imp_7 {
  color:#000;
  font-size: 12px;
  max-width: 150px;
  line-height: 1.3;
  font-weight: 600;
  margin-top: 40px;
}

.c_imp_8 {
  background-color: #3366FF;
  border-radius: 45px;
  padding:8px 25px;

  .num_c_imp_8 {
    color:#FFF;
    font-size: 38px;
    line-height: 1;
    font-weight: 200;
  }

  .texto_c_imp_8 {
    color:#FFF;
    font-size: 12px;
    font-weight: 600;
  }
}

.c_imp_9 {
  background-color: #223382;
  border-radius: 45px;
  padding:8px 25px;

  .num_c_imp_9 {
    color:#FFF;
    font-size: 38px;
    line-height: 1;
    font-weight: 200;
  }

  .texto_c_imp_9 {
    color:#FFF;
    font-size: 12px;
    font-weight: 600;
  }
}

.c_imp_10 {
  background-color: #FFF;
  border-radius: 45px;
  padding:8px 25px;

  .num_c_imp_10 {
    color:#3366FF;
    font-size: 38px;
    line-height: 1;
    font-weight: 200;
  }

  .texto_c_imp_10 {
    color:#223382;
    font-size: 11px;
    font-weight: 600;
  }
}

.c_ico_imp_10 {
  background-color: #FFF;
  border-radius: 50%;
  padding:15px;
}


.c_imp_11 {
  border:1px solid #3366FF;
  border-radius: 55px;
  padding: 10px 25px;

  .num_imp_11 {
    color:#223382;
    font-size: 60px;
    font-weight: 200;
    display: inline-block;
    line-height: 1;
  }
  .texto_imp_11 {
    display: inline-block;
    color:#000000;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 300;
  }
}

.c_imp_12 {
  border-radius: 50%;
  background-color: #3366FF;
  padding: 25px 20px;
  height: 100%;
  display: inline-block;
  margin-left: -15px;
  margin-right: 15px;

  .texto_c_imp_12 {
    color:#FFF;
    font-weight: 600;
    font-size: 12px;
  }

  .num_c_imp_12 {
    font-weight: 200;
    font-size: 34px;
    line-height: 1;
    color:#FFF;
  }
}

.c_imp_13 {
  border-radius: 50%;
  background-color: #223382;
  padding: 25px 20px;
  height: 100%;
  display: inline-block;
  margin-left: -45px;
  margin-right: 45px;

  .texto_c_imp_13 {
    color:#FFF;
    font-weight: 600;
    font-size: 12px;
  }

  .num_c_imp_13 {
    font-weight: 200;
    font-size: 34px;
    line-height: 1;
    color:#FFF;
  }
}

.num_imp_14 {
  color:#223382;
  font-weight: 200;
  font-size: 60px;
  line-height: 1;
}

.texto_imp_14 {
  font-size: 22px;
  color:#000;
  font-weight: 300;
  line-height: 1.3;
}

.c_imp_15 {
  border-radius: 55px;
  border:1px solid #3366FF;
  padding: 15px 15px;
  display: inline-block;

  .row {
    align-items: center;
  }

  .texto_c_imp_15 {
    color:#223382;
    font-weight: 600;
    font-size: 11px;
  }

  .num_c_imp_15 {
    font-weight: 200;
    font-size: 44px;
    line-height: 1;
    color:#3366FF;
  }
}

.c_imp_16 {
  border-radius: 55px;
  background-color: #3366FF;
  padding: 18px 20px;
  display: inline-block;

  .row {
    align-items: center;
  }

  .texto_c_imp_16 {
    color:#FFF;
    font-weight: 600;
    font-size: 12px;
  }

  .num_c_imp_16 {
    font-weight: 200;
    font-size: 44px;
    line-height: 1;
    color:#FFF;
  }
}


.c_imp_17 {

  .row {
    align-items: center;
  }

  .texto_c_imp_17 {
    color:#000;
    font-weight: 600;
    font-size: 12px;
  }

  .num_c_imp_17 {
    font-weight: 200;
    font-size: 44px;
    line-height: 1;
    color:#3366FF;
    border-radius: 50%;
    padding:32px 15px;
    position: relative;
    
    &::before {
      position: absolute;
      content:'';
      background-image: url('../imagenes/graf_porc_20.svg');
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      width: 120%;
      height: 120%;
      top: -12%;
      left: -6%;
    }
  }
}


.c_imp_18 {

  .row {
    align-items: center;
  }

  .texto_c_imp_18 {
    color:#000;
    font-weight: 600;
    font-size: 12px;
  }

  .num_c_imp_18 {
    font-weight: 200;
    font-size: 44px;
    line-height: 1;
    color:#FFF;
    border-radius: 50%;
    padding:32px 15px;
    position: relative;
    z-index: 3;

    span {
      position: relative;
      z-index: 2;
    }

    &::before {
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #3366FF;
      border-radius: 50%;
      z-index: 0;
      transform: scale(0);
      transform-origin: center;
      transition: .5s all ease-in-out;
    }
  }

}

.anim_full_circ {

  &::before {
    transform: scale(1) !important;
  }
}


/***************************************************************** FILOSOFIA **************************************************************************************/

.bg_filosofia {
  padding-top: 70px;
  padding-bottom: 30px;
}

.tit_filosofia {
  color:#3366FF;
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 10px;
}

.texto_filosofia {
  color:#000;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 60px;
}


.cont_c_filo {
  width: 100%;
  display: flex;
  flex-direction: row;
  
  .c_filo_1 {
    display: inline-block;
    width: 35%;
    transition: .4s all ease-in-out;
  }

  .c_filo_2 {
    display: inline-block;
    width: 65%;
    transition: .4s all ease-in-out;
  }

  .column_3 {
    width: 100%;
  }

  .caja_filo {
    width: 31%;
    display: inline-block;
    min-height: 350px;
    max-height: 350px;
    margin-right: 1%;
    border-radius: 35px;
    padding:25px;
    vertical-align: top;
    position: relative;
    transition: .4s all ease-in-out;
    max-width: 140px;
    overflow: hidden;

    .circ_c_filo {
      background-color: #FFF;
      border-radius: 50%;
      padding:15px;
      max-width: 75px;
      margin:0 auto;
    }

    .tit_c_vert_filo {
      color:#3366FF;
      display: block;
      margin-left: -10px;
      writing-mode: vertical-rl; 
      transform: rotate(180deg);
      font-size: 32px;    
      font-weight: 200;
      transition: .6s all ease-in-out;
      line-height: 1.1;
      position: absolute;
      top: -30px;
      height: 100%;
      transition: .4s all ease-in-out;
      transform-origin: center;
    }

    .flecha_c_filo_h {
      position: absolute;
      bottom: 6%;
      right: 9%;
      transition: .4s all ease-in-out;
      img {
        max-width: 40px;
        transform: rotate(137deg);
      }
    }

    .texto_c_filo {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      width: 100%;
      transform: scale(0);
      transition: .4s all ease-in-out;
    }

    &:hover {
      max-width: 350px;
      width: 50%;

      .tit_c_vert_filo {
        top: 150px;
        transform: rotate(360deg);
        writing-mode: horizontal-tb;
        margin-left: 0;
      }

      .flecha_c_filo_h {
        display: none;
      }

      .texto_c_filo {
        transform: scale(1);
        margin-top: 140px;
      }

    }

  }


  .caja_filo_1 {
    background-color: #EDF1FF;
    .texto_c_filo {
      color:#223382;
    }
  }

  .caja_filo_2 {
    background-color: #85A3FF;
    .tit_c_vert_filo {
      color:#FFF;
    }
    .texto_c_filo {
      color:#223382;
    }
  }

  .caja_filo_3 {
    background-color: #223382;
    .tit_c_vert_filo {
      color:#FFF;
    }
    .texto_c_filo {
      color:#FFF;
    }
  }

  .c_img_filo {
    overflow: hidden;
    border-radius: 45px;
    max-height: 500px;
    min-height: 500px;
    img {
      min-height: 500px;
      object-fit: cover;
    }
  }

}


.caja_filo_h {
    width: 97%;
    display: inline-block;
    min-height: 130px;
    margin-right: 3%;
    border-radius: 35px;
    padding:25px;
    vertical-align: top;
    position: relative;
    background-color: #3366FF;
    margin-top: 15px;
    max-width: 439px;
    transition: .4s all ease-in-out;

    .circ_c_filo {
      background-color: #FFF;
      border-radius: 50%;
      padding:15px;
      max-width: 75px;
      display: inline-block;
    }

    .tit_c_vert_filo {
      color:#FFF;
      font-size: 32px;    
      font-weight: 200;
      transition: .6s all ease-in-out;
      line-height: 1.1;
      position: relative;
      display: inline-block;
      vertical-align: middle;
      margin-left: 15px;
    }

    .caja_filo_4 {
      
      .tit_c_vert_filo {
        color:#FFF;
      }
    }

    .flecha_c_filo_v {
      position: absolute;
      top: 40px;
      right: 5%;
      img {
        max-width: 40px;
        transform: rotate(224deg);
      }
    }

    .texto_c_filo_v {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      width: 100%;
      height: 0;
      transform: scale(0);
      transition: .4s all ease-in-out;
      color:#FFF;
    }

    &:hover {
      height: auto;

      

      .flecha_c_filo_h {
        display: none;
      }

      .texto_c_filo_v {
        transform: scale(1);
        margin-top: 40px;
        height: 100%;
      }

    }

  }

/******************************************************************* DESEMPEÑO ECONOMICO ****************************************************************************/

.bg_desempeno {
  background-image: url('../imagenes/bg_desempeno.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 850px;
  position: relative;
  overflow: hidden;

  &::before {
    content:'';
    position: absolute;
    top: -50%;
    left: -22%;
    border-radius: 50%;
    width: 0px;
    height: 0px;
    background: #F55C37;
    background: linear-gradient(180deg, rgba(245, 92, 55, 1) 0%, rgba(122, 46, 28, 1) 100%);
    transform-origin: center;
    transition: .8s all ease-in-out;
    z-index: 0;
  }
}

.anim_circ_banner {

  &::before {
    width: 1350px !important;
    height: 1350px !important;
  }
}

.tit_banner_secc {
  font-size: 64px;
  color:#FFF;
  font-weight: 200;
  line-height: 1.1;
  padding-top: 200px;
  margin-bottom: 100px;
  position: relative;
  z-index: 4;
}

.bot_banner_secc {
  color:#F55C36;
  background-color: #FFF;
  border-radius: 25px;
  padding: 8px 25px;
  display: inline-block;
  text-decoration: none;
  position: relative;
  padding-right: 50px;
  z-index: 4;

  &::before {
    content:'';
    top: 8px;
    right: 14px;
    width: 22px;
    height: 22px;
    mask: url('../imagenes/ico_pdf.svg') no-repeat center;
    mask-size: contain;

    -webkit-mask: url('../imagenes/ico_pdf.svg') no-repeat center;
    -webkit-mask-size: contain;
    background-repeat: no-repeat;
    background-size: contain;

    background-color: #F55C36; /* color que quieras aplicar */
  
 
    position: absolute;
  }
}

.frase_banner_secc {
  color:#FFF;
  font-size: 14px;
  margin-top: 10px;
  position: relative;
  z-index: 4;
}

.flecha_scroll_secc {
  margin-top: 480px;
  border-radius: 50%;
  padding:15px;
  display: inline-block;
  img {
    transform: rotate(180deg);
    max-width: 70px;
  }
}


.scroll_naranja {
    background-color: #F55C36;
}


/**************** ANIM CIRCULO NARANJA ********************************/
.container-circ_njn {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 2030px;
    height: 1980px;
    top: -82%;
    left: -36%;
    z-index: 2;
}

/* Círculo principal que rota */
.rotating-circle_njn {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 4s linear infinite;
}

/* El círculo sólido */
.circle_njn {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgb(122, 46, 28);
    border-radius: 50%;
    top: 85.9%;
    right: 49%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(245, 92, 55, 0.8),
                0 0 40px rgba(245, 92, 55, 0.4);
    z-index: 2;
}

/* La estela - anillo con gradiente (detrás del círculo) */
.trail_njn {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
   background: conic-gradient(
        from 180deg, /* ← dirección correcta */
        rgb(245, 92, 55) 0%,              /* sólido cerca del círculo */
        rgba(245, 92, 55, 0.85) 7%,
        rgba(245, 92, 55, 0.7) 14%,
        rgba(245, 92, 55, 0.5) 22%,
        rgba(245, 92, 55, 0.3) 30%,
        rgba(245, 92, 55, 0.15) 38%,
        transparent 45%,                  /* transparente al salir */
        transparent 100%
    );

    /* Máscara del grosor del arco */
    -webkit-mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    z-index: 1;
}

/* Animación de rotación */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}


.frase_lineas_desempeno {
  color:#000;
  font-size: 20px;
  line-height: 1.3;
  position: relative;
  max-width: 800px;
  margin:0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;

  &::before {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #F55C36;
    left: -150px;
    top: 60px;
  }

  &::after {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #F55C36;
    right: -150px;
    top: 60px;
  }
}

.c_rojo_desempeno {
  background-color: #FEF0ED;
  padding: 50px;
  border-radius: 45px;
}

.c_des_1 {
  background-color: #F55C36;
  border-radius: 50px;
  padding:5px 25px;
  margin-bottom: 10px;

  .num_c_des_1 {
    color:#FFF;
    font-weight: 200;
    font-size: 40px;
    line-height: 1.2;
  }

  .texto_c_des_1 {
    color:#FFF;
    font-weight: 600;
    font-size: 12px;
  }
}

.c_des_2 {
  background-color: #7A2E1C;
  border-radius: 50px;
  padding:5px 25px;

  .num_c_des_2 {
    color:#FFF;
    font-weight: 200;
    font-size: 40px;
    line-height: 1.2;
  }

  .texto_c_des_2 {
    color:#FFF;
    font-weight: 600;
    font-size: 12px;
  }
}

.graf_desemp {
  max-height: 175px;
  margin:0 auto;
  display: block;
}

.c_des_3 {
  border:1px solid #7A2E1C;
  border-radius: 25px;
  padding:20px;
  display: flex;
  align-items: center;
  height: 100%;

  .texto_c_des_3 {
    color:#7A2E1C;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
  }
}

.tit_uni_secc {
  color:#F55C36;
  text-align: center;
  font-size: 40px;
  font-weight: 300;
  margin-bottom: 50px;
}


  .tit_circ_uni {
    color:#F55C36;
    font-weight: 300;
    font-size: 26px;
    text-align: center;
    margin-top: 30px;
  }


/**************** ANIM CIRCULO NARANJA UNIDADES DE NEGOCIO ********************************/
.container-circ_njn_uni {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 532px;
    height: 532px;
   /* top: -82%;
    left: -36%;*/
    top: -59px;
    left: -59px;
    z-index: 2;
    transition: .5s all ease-in-out;
}

/* Círculo principal que rota */
.rotating-circle_njn_uni {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 4s linear infinite;
}

/* El círculo sólido */
.circle_njn_uni {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgb(245, 92, 55);
    border-radius: 50%;
    top: 85.4%;
    right: 49%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(245, 92, 55, 0.8),
                0 0 40px rgba(245, 92, 55, 0.4);
    z-index: 2;
}

/* La estela - anillo con gradiente (detrás del círculo) */
.trail_njn_uni {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
   background: conic-gradient(
        from 180deg, /* ← dirección correcta */
        rgb(245, 92, 55) 0%,              /* sólido cerca del círculo */
        rgba(245, 92, 55, 0.85) 7%,
        rgba(245, 92, 55, 0.7) 14%,
        rgba(245, 92, 55, 0.5) 22%,
        rgba(245, 92, 55, 0.3) 30%,
        rgba(245, 92, 55, 0.15) 38%,
        transparent 45%,                  /* transparente al salir */
        transparent 100%
    );

    /* Máscara del grosor del arco */
    -webkit-mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 20px),
        black calc(50% - 20px),
        black calc(50% + 20px),
        transparent calc(50% + 20px)
    );
    mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 20px),
        black calc(50% - 20px),
        black calc(50% + 20px),
        transparent calc(50% + 20px)
    );
    z-index: 1;
}

/* Animación de rotación */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.c_circ_uni {
  position: relative;

  .gif_c_circ_uni {
    position: absolute;
    top: calc(50% - 45px);
    left: calc(50% - 45px);
    z-index: 8;
    background-color: #7A2E1C;
    padding: 15px;
    border-radius: 50%;
    transition: .5s all ease-in-out;

    img {
      max-width: 70px;
      
    }
  }

  .circ_hover_uni {
    visibility: hidden;
    opacity: 0;
    border-radius: 50%;
    position: absolute;
    height: 101%;
    width: 101%;
    background-color: #FEF0ED;
    padding: 70px;
    z-index: 19;
    top: -.5%;
    left: -.5%;
    transition: .5s all ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .texto_circ_hover_uni {
    color:#7A2E1C;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
  }

  .num_circ_hover_uni {
    color:#F55C36;
    font-size: 62px;
    font-weight: 200;
    line-height: 1.1;
    text-align: center;
    margin-top: 10px;
  }

  .subtexto_circ_hover_uni {
    font-size: 12px;
    color:#F55C36;
    line-height: 1.1;
    text-align: center;
    font-weight: 600;
  }

  &:hover {

      .circ_hover_uni {
        visibility: visible;
        opacity: 1;
      }

      .container-circ_njn_uni {
        opacity: 0;
      }


  }

}


/******************************************************************* GESTION CAPITAL HUMANO ****************************************************************************/

.bg_ch {
  background-image: url('../imagenes/bg_ch.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 850px;
  position: relative;
  overflow: hidden;

  &::before {
    content:'';
    position: absolute;
    top: -50%;
    left: -22%;
    border-radius: 50%;
    width: 0px;
    height: 0px;
    background: #8A2BFF;
    background: linear-gradient(180deg, rgba(138, 43, 255, 1) 0%, rgba(83, 26, 153, 1) 100%);
    transform-origin: center;
    transition: .8s all ease-in-out;
    z-index: 0;
  }

  .bot_banner_secc {
    color:#8A2BFF;

    &::before {
      background-color: #8A2BFF; /* color que quieras aplicar */
    }
  }

}

.scroll_violeta {
    background-color: #8A2BFF;
}


/**************** ANIM CIRCULO VIOLETA ********************************/
.container-circ_ch {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 2030px;
    height: 1980px;
    top: -82%;
    left: -36%;
    z-index: 2;
}

/* Círculo principal que rota */
.rotating-circle_ch {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 4s linear infinite;
}

/* El círculo sólido */
.circle_ch {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #451780;
    border-radius: 50%;
    top: 85.9%;
    right: 49%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(138, 43, 255, 0.8),
                0 0 40px rgba(138, 43, 255, 0.4);
    z-index: 2;
}

/* La estela - anillo con gradiente (detrás del círculo) */
.trail_ch {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
   background: conic-gradient(
        from 180deg, /* ← dirección correcta */
        rgb(138, 43, 255) 0%,              /* sólido cerca del círculo */
        rgba(138, 43, 255, 0.85) 7%,
        rgba(138, 43, 255, 0.7) 14%,
        rgba(138, 43, 255, 0.5) 22%,
        rgba(138, 43, 255, 0.3) 30%,
        rgba(138, 43, 255, 0.15) 38%,
        transparent 45%,                  /* transparente al salir */
        transparent 100%
    );

    /* Máscara del grosor del arco */
    -webkit-mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    z-index: 1;
}



.frase_lineas_ch {
  color:#000;
  font-size: 20px;
  line-height: 1.3;
  position: relative;
  max-width: 800px;
  margin:0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;

  &::before {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #8A2BFF;
    left: -150px;
    top: 7px;
  }

  &::after {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #8A2BFF;
    right: -150px;
    top: 7px;
  }
}


.c_violeta_ch {
  background-color: #F4ECFF;
  padding: 50px;
  border-radius: 45px;
}

.c_ch_1 {
  background-color: #8A2BFF;
  border-radius: 50px;
  padding:5px 35px;
  margin-bottom: 20px;

  .num_c_ch_1 {
    color:#FFF;
    font-weight: 200;
    font-size: 50px;
    line-height: 1;
  }

  .texto_c_ch_1 {
    color:#FFF;
    font-weight: 300;
    font-size: 22px;
  }
}

.c_ch_2 {
  background-color: #FFF;
  border:2px solid #451780;
  border-radius: 50px;
  padding:5px 25px;
  margin-bottom: 10px;

  .num_c_ch_2 {
    color:#8A2BFF;
    font-weight: 200;
    font-size: 36px;
    line-height: 1.2;
  }

  .texto_c_ch_2 {
    color:#8A2BFF;
    font-weight: 600;
    font-size: 10px;
  }
}

.c_ch_3 {
  background-color: #FFF;
  border:2px solid #451780;
  border-radius: 50%;
  padding:0px;
  display: inline-block;
  margin-left: -15px;
  img {
    max-width: 55px;
  }
}

.c_ch_4 {
  position: relative;
  padding: 25px 25px;

  .num_c_ch_4 {
    font-weight: 200;
    font-size: 54px;
    line-height: 1;
    color:#451780;
    border-radius: 50%;
    position: relative;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .texto_c_ch_4 {
    color:#451780;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
  }
    
  &::before {
    position: absolute;
    content:'';
    background-image: url('../imagenes/graf_ch_1.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 130%;
    height: 130%;
    top: -15%;
    left: -10%;   
  }

}


.img_ch_1 {
  max-height: 180px;
  display: block;
  margin:0 auto;
}

.c_ch_5 {
  background-color: #451780;
  border-radius: 35px;
  padding:15px 45px;
  margin-top: -4px;

  img {
    margin-bottom: 10px;
  }

  .num_c_ch_5 {
    font-weight: 200;
    font-size: 50px;
    line-height: 1;
    color:#FFF;
    border-radius: 50%;
    position: relative;
  }

  .texto_c_ch_5 {
    color:#FFF;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.1;
  }

}



/******************************************************************* GESTION CAPITAL HUMANO ****************************************************************************/

.bg_clientes {
  background-image: url('../imagenes/bg_clientes.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 850px;
  position: relative;
  overflow: hidden;

  &::before {
    content:'';
    position: absolute;
    top: -50%;
    left: -22%;
    border-radius: 50%;
    width: 0px;
    height: 0px;
    background: #03A880;
    background: linear-gradient(180deg, rgba(3, 168, 128, 1) 0%, rgba(3, 84, 64, 1) 100%);
    transform-origin: center;
    transition: .8s all ease-in-out;
    z-index: 0;
  }

  .bot_banner_secc {
    color:#03A880;

    &::before {
      background-color: #03A880; /* color que quieras aplicar */
    }
  }

}

.scroll_verde {
    background-color: #03A880;
}


/**************** ANIM CIRCULO VIOLETA ********************************/
.container-circ_cl {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 2030px;
    height: 1980px;
    top: -82%;
    left: -36%;
    z-index: 2;
}

/* Círculo principal que rota */
.rotating-circle_cl {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 4s linear infinite;
}

/* El círculo sólido */
.circle_cl {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #035440;
    border-radius: 50%;
    top: 85.9%;
    right: 49%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(3, 168, 128, 0.8),
                0 0 40px rgba(3, 168, 128, 0.4);
    z-index: 2;
}

/* La estela - anillo con gradiente (detrás del círculo) */
.trail_cl {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
   background: conic-gradient(
        from 180deg, /* ← dirección correcta */
        rgb(3, 168, 128) 0%,              /* sólido cerca del círculo */
        rgba(3, 168, 128, 0.85) 7%,
        rgba(3, 168, 128, 0.7) 14%,
        rgba(3, 168, 128, 0.5) 22%,
        rgba(3, 168, 128, 0.3) 30%,
        rgba(3, 168, 128, 0.15) 38%,
        transparent 45%,                  /* transparente al salir */
        transparent 100%
    );

    /* Máscara del grosor del arco */
    -webkit-mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    z-index: 1;
}



.frase_lineas_cl {
  color:#000;
  font-size: 20px;
  line-height: 1.3;
  position: relative;
  max-width: 800px;
  margin:0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;

  &::before {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #03A880;
    left: -150px;
    top: 50px;
  }

  &::after {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #03A880;
    right: -150px;
    top: 50px;
  }
}


.c_verde_cl {
  background-color: #E9F7F3;
  padding: 50px;
  border-radius: 45px;
}

.c_cl_1 {
  border:25px solid #035440;
  border-radius: 50%;
  padding:30px 15px;

  .num_c_cl_1 {
    font-size: 50px;
    font-weight: 200;
    color:#03A880;
    text-align: center;
  }
}

.c_cl_2 {
  display: flex;
  align-items: center;
  height: 100%;

  .texto_c_cl_2 {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
  }
}

.num_cl_3 {
  font-size: 60px;
  font-weight: 200;
  color:#035440;
  line-height: 1.1;
}

.texto_cl_3 {
  font-size: 30px;
  font-weight: 300;
  color:#000;
  line-height: 1.1;
}

.c_cl_4 {
  background-color: #03A880;
  border-radius: 50%;
  padding: 30px 25px;
  display: inline-block;

  .texto_c_cl_4 {
    color:#FFF;
    font-size: 11px;
    font-weight: 600;
  }

  .num_c_cl_4 {
    color:#FFF;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 200;
  }
}

.c_cl_5 {
  background-color: #035440;
  border-radius: 50%;
  padding: 30px 20px;
  display: inline-block;
  margin-left: -30px;

  .texto_c_cl_5 {
    color:#FFF;
    font-size: 11px;
    font-weight: 600;
  }

  .num_c_cl_5 {
    color:#FFF;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 200;
  }
}

.c_cl_6 {
  background-color: #69CCB2;
  border-radius: 50%;
  padding: 30px 25px;
  display: inline-block;
  margin-left: -50px;
  position: relative;
  z-index: 5;

  .texto_c_cl_6 {
    color:#035440;
    font-size: 11px;
    font-weight: 600;    
  }

  .num_c_cl_6 {
    color:#035440;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 200;
    min-width: 68px;
    max-width: 68px;
  }
}

.c_cl_7 {
  border:2px solid #035440;
  padding: 15px 15px;
  border-radius: 50%;
  margin-left: -80px;
  display: inline-block;
  z-index: 4;
  position: relative;

  img {
    max-width: 85px;
  }
}

.img_clientes_1 {
  max-height: 210px;
  display: block;
  margin:0 auto;
}



/******************************************************************* PROVEEDORES ****************************************************************************/

.bg_prov {
  background-image: url('../imagenes/bg_prov.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 850px;
  position: relative;
  overflow: hidden;

  &::before {
    content:'';
    position: absolute;
    top: -50%;
    left: -22%;
    border-radius: 50%;
    width: 0px;
    height: 0px;
    background: #F59E12;
    background: linear-gradient(180deg, rgba(245, 158, 18, 1) 0%, rgba(122, 79, 10, 1) 100%);
    transform-origin: center;
    transition: .8s all ease-in-out;
    z-index: 0;
  }

  .bot_banner_secc {
    color:#F59E12;

    &::before {
      background-color: #F59E12; /* color que quieras aplicar */
    }
  }

}

.scroll_prov {
    background-color: #F59E12;
}


/**************** ANIM CIRCULO PROVEEDORES ********************************/
.container-circ_prov {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 2030px;
    height: 1980px;
    top: -82%;
    left: -36%;
    z-index: 2;
}

/* Círculo principal que rota */
.rotating-circle_prov {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 4s linear infinite;
}

/* El círculo sólido */
.circle_prov {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #7A4F0A;
    border-radius: 50%;
    top: 85.9%;
    right: 49%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(245, 158, 18, 0.8),
                0 0 40px rgba(245, 158, 18, 0.4);
    z-index: 2;
}

/* La estela - anillo con gradiente (detrás del círculo) */
.trail_prov {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
   background: conic-gradient(
        from 180deg, /* ← dirección correcta */
        rgb(245, 158, 18) 0%,              /* sólido cerca del círculo */
        rgba(245, 158, 18, 0.85) 7%,
        rgba(245, 158, 18, 0.7) 14%,
        rgba(245, 158, 18, 0.5) 22%,
        rgba(245, 158, 18, 0.3) 30%,
        rgba(245, 158, 18, 0.15) 38%,
        transparent 45%,                  /* transparente al salir */
        transparent 100%
    );

    /* Máscara del grosor del arco */
    -webkit-mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    z-index: 1;
}



.frase_lineas_prov {
  color:#000;
  font-size: 20px;
  line-height: 1.3;
  position: relative;
  max-width: 800px;
  margin:0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;

  &::before {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #F59E12;
    left: -150px;
    top: 40px;
  }

  &::after {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #F59E12;
    right: -150px;
    top: 40px;
  }
}


.c_naranja_prov {
  background-color: #FEF6EA;
  padding: 50px;
  border-radius: 45px;
}



.img_prov_1 {
  max-height: 170px;
  display: block;
  margin:0 auto;
}

.c_prov_cont {
  margin-top: 35px;
}

.c_prov_1 {
  border:1px solid #F59E12;
  padding:15px 25px;
  border-radius: 50px;

  .num_c_prov_1 {
    color:#7A4F0A;
    font-weight: 200;
    font-size: 46px;
    line-height: 1.1;
  }

  .texto_c_prov_1 {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.1;
    color:#000;
  }
}


.c_prov_2 {
  background-color: #F59E12;
  padding:30px 20px;
  border-radius: 50%;
  margin-left: -30px;
  display: inline-block;
  position: relative;
  z-index: 5;

  .num_c_prov_2 {
    color:#FFF;
    font-weight: 200;
    font-size: 30px;
    line-height: 1.1;
  }

  .texto_c_prov_2 {
    font-weight: 600;
    font-size: 10px;
    line-height: 1.1;
    color:#FFF;
  }
}

.c_prov_3 {
  background-color: #7A4F0A;
  padding:30px 22px;
  border-radius: 50%;
  margin-left: -35px;
  display: inline-block;
  position: relative;
  z-index: 3;

  .num_c_prov_3 {
    color:#FFF;
    font-weight: 200;
    font-size: 30px;
    line-height: 1.1;
  }

  .texto_c_prov_3 {
    font-weight: 600;
    font-size: 10px;
    line-height: 1.1;
    color:#FFF;
  }
}


.c_prov_4 {
  position: relative;
  padding: 35px 5px;
  padding-right: 25px;

  .num_c_prov_4 {
    font-weight: 200;
    font-size: 36px;
    line-height: 1;
    color:#7A4F0A;
    border-radius: 50%;
    position: relative;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .texto_c_prov_4 {
    color:#7A4F0A;
    font-weight: 600;
    font-size: 10px;
    text-align: center;
  }
    
  &::before {
    position: absolute;
    content:'';
    background-image: url('../imagenes/img_prov_2.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 122%;
    height: 122%;
    top: -11%;
    left: -10%; 
  }

}





/******************************************************************* PROVEEDORES ****************************************************************************/

.bg_comu {
  background-image: url('../imagenes/bg_comu.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 850px;
  position: relative;
  overflow: hidden;

  &::before {
    content:'';
    position: absolute;
    top: -50%;
    left: -22%;
    border-radius: 50%;
    width: 0px;
    height: 0px;
    background: #00BFDB;
    background: linear-gradient(180deg, rgba(0, 191, 219, 1) 0%, rgba(0, 97, 110, 1) 100%);
    transform-origin: center;
    transition: .8s all ease-in-out;
    z-index: 0;
  }

  .bot_banner_secc {
    color:#00BFDB;

    &::before {
      background-color: #00BFDB; /* color que quieras aplicar */
    }
  }

}

.scroll_comu {
    background-color: #00BFDB;
}


/**************** ANIM CIRCULO COMUNIDAD ********************************/
.container-circ_comu {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 2030px;
    height: 1980px;
    top: -82%;
    left: -36%;
    z-index: 2;
}

/* Círculo principal que rota */
.rotating-circle_comu {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 4s linear infinite;
}

/* El círculo sólido */
.circle_comu {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #00616E;
    border-radius: 50%;
    top: 85.9%;
    right: 49%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(0, 191, 219, 0.8),
                0 0 40px rgba(0, 191, 219, 0.4);
    z-index: 2;
}

/* La estela - anillo con gradiente (detrás del círculo) */
.trail_comu {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
   background: conic-gradient(
        from 180deg, /* ← dirección correcta */
        rgb(0, 191, 219) 0%,              /* sólido cerca del círculo */
        rgba(0, 191, 219, 0.85) 7%,
        rgba(0, 191, 219, 0.7) 14%,
        rgba(0, 191, 219, 0.5) 22%,
        rgba(0, 191, 219, 0.3) 30%,
        rgba(0, 191, 219, 0.15) 38%,
        transparent 45%,                  /* transparente al salir */
        transparent 100%
    );

    /* Máscara del grosor del arco */
    -webkit-mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    z-index: 1;
}



.frase_lineas_comu {
  color:#000;
  font-size: 20px;
  line-height: 1.3;
  position: relative;
  max-width: 800px;
  margin:0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;

  &::before {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #00BFDB;
    left: -150px;
    top: 40px;
  }

  &::after {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #00BFDB;
    right: -150px;
    top: 40px;
  }
}


.c_celeste_comu {
  background-color: #E8F9FC;
  padding: 50px;
  border-radius: 45px;
}

.c_comu_1 {
  background-color: #00BFDB;
  padding:20px 20px;
  border-radius: 50px;
  margin-bottom: 10px;

  .num_c_comu_1 {
    color:#FFF;
    font-weight: 200;
    font-size: 50px;
    line-height: 1;
    margin-top: 5px;
  }

  .texto_c_comu_1 {
    color:#FFF;
    font-weight: 600;
    font-size: 10px;
  }
}

.img_comu_1 {
  max-width: 220px;
  margin:0 auto;
  display: block;
}

.img_comu_3 {
  max-height: 180px;
  margin:0 auto;
  display: block;
}

.c_comu_2 {
    border:1px solid #00BFDB;
    border-radius: 35px;
    padding:37px 20px;

  .num_c_comu_2 {
    color:#00BFDB;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 200;
    margin-bottom: 10px;
  }

  .texto_c_comu_2 {
    color:#00616E;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.3;
  }
}



/******************************************************************* AMBIENTE ****************************************************************************/

.bg_amb {
  background-image: url('../imagenes/bg_amb.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 850px;
  position: relative;
  overflow: hidden;

  &::before {
    content:'';
    position: absolute;
    top: -50%;
    left: -22%;
    border-radius: 50%;
    width: 0px;
    height: 0px;
    background: #59A30D;
    background: linear-gradient(180deg, rgba(89, 163, 13, 1) 0%, rgba(46, 82, 8, 1) 100%);
    transform-origin: center;
    transition: .8s all ease-in-out;
    z-index: 0;
  }

  .bot_banner_secc {
    color:#59A30D;

    &::before {
      background-color: #59A30D; /* color que quieras aplicar */
    }
  }

}

.scroll_amb {
    background-color: #59A30D;
}


/**************** ANIM CIRCULO AMBIENTE ********************************/
.container-circ_amb {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 2030px;
    height: 1980px;
    top: -82%;
    left: -36%;
    z-index: 2;
}

/* Círculo principal que rota */
.rotating-circle_amb {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 4s linear infinite;
}

/* El círculo sólido */
.circle_amb {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #2E5208;
    border-radius: 50%;
    top: 85.9%;
    right: 49%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(89, 163, 13, 0.8),
                0 0 40px rgba(89, 163, 13, 0.4);
    z-index: 2;
}

/* La estela - anillo con gradiente (detrás del círculo) */
.trail_amb {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
   background: conic-gradient(
        from 180deg, /* ← dirección correcta */
        rgb(89, 163, 13) 0%,              /* sólido cerca del círculo */
        rgba(89, 163, 13, 0.85) 7%,
        rgba(89, 163, 13, 0.7) 14%,
        rgba(89, 163, 13, 0.5) 22%,
        rgba(89, 163, 13, 0.3) 30%,
        rgba(89, 163, 13, 0.15) 38%,
        transparent 45%,                  /* transparente al salir */
        transparent 100%
    );

    /* Máscara del grosor del arco */
    -webkit-mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    z-index: 1;
}



.frase_lineas_amb {
  color:#000;
  font-size: 20px;
  line-height: 1.3;
  position: relative;
  max-width: 800px;
  margin:0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;

  &::before {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #59A30D;
    left: -150px;
    top: 80px;
  }

  &::after {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #59A30D;
    right: -150px;
    top: 80px;
  }
}


.c_verde_amb {
  background-color: #F0F7E9;
  padding: 50px;
  border-radius: 45px;
}

.num_c_amb_1 {
  color:#59A30D;
  font-weight: 200;
  font-size: 60px;
  line-height: 1.1;
}

.texto_c_amb_1 {
  color:#2E5208;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.3;
  max-width: 160px;
}

.img_amb_1 {
  max-width: 160px;
  margin-top: 10px;
}

.c_amb_2 {

  .texto_c_amb_2 {
    font-size: 24px;
    color:#000;
    line-height: 1.3;
    font-weight: 500;
    max-width: 150px;
  }

  .subtexto_c_amb_2 {
    font-size: 12px;
    color:#000;
    line-height: 1.3;
    font-weight: 600;
    margin-top: 10px;
  }
}

.c_amb_3 {
  background-color: #2E5208;
  padding:20px 15px;
  border-radius: 60px;

  .num_c_amb_3 {
    color:#FFF;
    font-size: 50px;
    font-weight: 200;
    line-height: 1.3;
  }

  .texto_c_amb_3 {
    font-size: 10px;
    font-weight: 600;
    color:#FFF;
  }
}


.c_amb_4 {
  padding:10px 10px;
  border-radius: 50px;
  border:2px solid #59A30D;
  margin-right: -15px;

  .num_c_amb_4 {
    font-weight: 200;
    font-size: 36px;
    color:#2E5208;
  }

  .texto_c_amb_4 {
    color:#59A30D;
    font-weight: 600px;
    font-size: 10px;
    line-height: 1.3;
    max-width: 90px;
  }
}

.c_amb_5 {
  padding:10px 10px;
  border-radius: 50%;
  border:2px solid #59A30D;
  background-color: #F0F7E9;
  display: inline-block;


  img {
    max-width: 55px;
  }
}

.c_amb_6 {
  padding:20px 15px;
  border-radius: 50px;
  background-color: #FFF;
  margin-right: -20px;

  .texto_c_amb_6 {
    color:#035440;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
  }
}

.c_amb_7 {
  padding:10px;
  border-radius: 50%;
  background-color: #FFF;
  display: inline-block;
  margin-left: 10px;
  
  img {
    max-width: 50px;
  }
}

.c_amb_8 {
  padding:25px 20px;
  border-radius: 25px;
  background-color: #59A30D;
  margin-top: 15px;

  .texto_c_amb_8 {
    color:#FFF;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
  }
}




/******************************************************************* FUTURO ****************************************************************************/

.bg_fut {
  background-image: url('../imagenes/bg_fut.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 850px;
  position: relative;
  overflow: hidden;
  margin-top: 30px;

  &::before {
    content:'';
    position: absolute;
    top: -50%;
    left: -22%;
    border-radius: 50%;
    width: 0px;
    height: 0px;
    background: #3366FF;
    background: linear-gradient(180deg, rgba(51, 102, 255, 1) 0%, rgba(34, 51, 130, 1) 100%);
    transform-origin: center;
    transition: .8s all ease-in-out;
    z-index: 0;
  }

  .bot_banner_secc {
    color:#3366FF;

    &::before {
      background-color: #3366FF; /* color que quieras aplicar */
    }
  }

}

.scroll_fut {
    background-color: #3366FF;
}


/**************** ANIM CIRCULO FUTURO ********************************/
.container-circ_fut {
    position: absolute;
    width: 100%;
    height: 100%;
    width: 2030px;
    height: 1980px;
    top: -82%;
    left: -36%;
    z-index: 2;
}

/* Círculo principal que rota */
.rotating-circle_fut {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 4s linear infinite;
}

/* El círculo sólido */
.circle_fut {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #223382;
    border-radius: 50%;
    top: 85.9%;
    right: 49%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(51, 102, 255, 0.8),
                0 0 40px rgba(51, 102, 255, 0.4);
    z-index: 2;
}

/* La estela - anillo con gradiente (detrás del círculo) */
.trail_fut {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
   background: conic-gradient(
        from 180deg, /* ← dirección correcta */
        rgb(51, 102, 255) 0%,              /* sólido cerca del círculo */
        rgba(51, 102, 255, 0.85) 7%,
        rgba(51, 102, 255, 0.7) 14%,
        rgba(51, 102, 255, 0.5) 22%,
        rgba(51, 102, 255, 0.3) 30%,
        rgba(51, 102, 255, 0.15) 38%,
        transparent 45%,                  /* transparente al salir */
        transparent 100%
    );

    /* Máscara del grosor del arco */
    -webkit-mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    mask: radial-gradient(
        circle,
        transparent 0%,
        transparent calc(50% - 50px),
        black calc(50% - 50px),
        black calc(50% + 50px),
        transparent calc(50% + 50px)
    );
    z-index: 1;
}



.frase_lineas_fut {
  color:#000;
  font-size: 20px;
  line-height: 1.3;
  position: relative;
  max-width: 800px;
  margin:0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;

  &::before {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #3366FF;
    left: -150px;
    top: 50px;
  }

  &::after {
    content:'';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #3366FF;
    right: -150px;
    top: 50px;
  }
}


.bg_banner_footer {
  background-color: #3366FF;
  padding-top: 40px;
  padding-bottom: 40px;
}

.texto_banner_footer {
  color:#FFF;
  font-weight: 200;
  font-size: 24px;
  text-align: center;
  line-height: 1.2;
  margin-top: 10px;
}

.img_footer_1 {
  max-width: 120px;
  display: block;
  margin:0 auto;
}


.img_footer_2 {
  max-width: 120px;
  display: block;
  margin:0 auto;
}

.footer {
  background-color: #1280C71A;
  padding-top: 30px;
  padding-bottom: 30px;
}

.logo_footer {
  max-width: 150px;
  display: inline-block;
}

.derechos {
  font-size: 16px;
  color:#000;
  display: inline-block;
  margin-left: 30px;
}

.hecho {
  font-weight: 600;
  font-size: 14px;
  margin-top: 10px;
  a {
    text-decoration: none;
    color:#000;
  }
}













.show_resp {
  display: none;
}

.show_desk {

}

/************************************************************************** RESPONSIVE ***********************************************************************************/

@media (max-width: 1520px) { 

  .banner_top {
    min-height: 800px;
  }

  .container-circ {
      width: 800px;
      height: 870px;
      top: -0.5%;
      left: -12%;
  }

  .circle {
      top: 83.9%;
      right: 49%;
  }

  .num_imp_11 {
    min-height: 60px;
    min-width: 112px;
  }

  .anim_circ_banner {

    &::before {
      width: 1070px !important;
      height: 1070px !important;
      top: -35%;
    }
  }

  .bg_desempeno {
    min-height: 800px;
  }

  .container-circ_njn {
      width: 1700px;
      height: 1680px;
      top: -70%;
      left: -42%;
  }

  .circle_njn {
      top: 85.6%;
  }

  .bg_ch {
    min-height: 800px;
  }

  .container-circ_ch {
      width: 1700px;
      height: 1680px;
      top: -70%;
      left: -42%;
  }

  .circle_ch {
      top: 85.6%;
  }

  .bg_clientes {
    min-height: 800px;
  }

  .container-circ_cl {
      width: 1700px;
      height: 1680px;
      top: -70%;
      left: -42%;
  }

  .circle_cl {
      top: 85.6%;
  }

  .bg_prov {
    min-height: 800px;
  }

  .container-circ_prov {
      width: 1700px;
      height: 1680px;
      top: -70%;
      left: -42%;
  }

  .circle_prov {
      top: 85.6%;
  }

  .bg_comu {
    min-height: 800px;
  }

  .container-circ_comu {
      width: 1700px;
      height: 1680px;
      top: -70%;
      left: -42%;
  }

  .circle_comu {
      top: 85.6%;
  }

  .bg_amb {
    min-height: 800px;
  }

  .container-circ_amb {
      width: 1700px;
      height: 1680px;
      top: -70%;
      left: -42%;
  }

  .circle_amb {
      top: 85.6%;
  }

  .bg_fut {
    min-height: 800px;
  }

  .container-circ_fut {
      width: 1700px;
      height: 1680px;
      top: -70%;
      left: -42%;
  }

  .circle_fut {
      top: 85.6%;
  }

  .ano_bt {
    margin-top: 400px;
    margin-left: 50px;
  }

  .tit_bt {
    margin-left: 50px;
  }

  .flecha_scroll {
    margin-top: 480px;
  }


}

@media (max-width: 1440px) { 

  .banner_top {
    min-height: 700px;
  }

  .ano_bt {
    margin-top: 400px;
    margin-left: 50px;
  }

  .tit_bt {
    margin-left: 50px;
  }

  .flecha_scroll {
    margin-top: 480px;
  }

  .container-circ {
      width: 840px;
      height: 715px;
      top: 3%;
      left: -15%;
  }

  .circle {
      top: 88.2%;
  }

  .anim_circ_banner {

    &::before {
      width: 980px !important;
      height: 1015px !important;
      top: -50%;
    }
  }

  .bg_desempeno {
    min-height: 700px;
  }

  .container-circ_njn {
      width: 1630px;
      height: 1580px;
      top: -84%;
      left: -43%;
  }

  .bg_ch {
    min-height: 700px;
  }

  .container-circ_ch {
      width: 1630px;
      height: 1580px;
      top: -84%;
      left: -43%;
  }

  .bg_clientes {
    min-height: 700px;
  }

  .container-circ_cl {
      width: 1630px;
      height: 1580px;
      top: -84%;
      left: -43%;
  }

  .bg_prov {
    min-height: 700px;
  }

  .container-circ_prov {
      width: 1630px;
      height: 1580px;
      top: -84%;
      left: -43%;
  }

  .bg_comu {
    min-height: 700px;
  }

  .container-circ_comu {
      width: 1630px;
      height: 1580px;
      top: -84%;
      left: -43%;
  }

  .bg_amb {
    min-height: 700px;
  }

  .container-circ_amb {
      width: 1630px;
      height: 1580px;
      top: -84%;
      left: -43%;
  }

  .bg_fut {
    min-height: 700px;
  }

  .container-circ_fut {
      width: 1630px;
      height: 1580px;
      top: -84%;
      left: -43%;
  }



}

@media (max-width: 1366px) { 

  .nav-link {
    min-width: 85px;

    br {
      display: none;
    }
  }

  .bot_reporte_nav {
    padding: 5px 5px;
    font-size: 11px;
    padding-right: 20px;
    margin-right: 20px;

    &::before {
      right: 2px;

   }
  }

  .navbar-brand {
    max-width: 160px;
    padding-right: 10px;
    margin-right: 10px;
  }

  .banner_top {
    min-height: 600px;
    margin-top: 103px;
  }

  .ano_bt {
    margin-top: 250px;
  }

  .flecha_scroll {
    margin-top: 340px;
  }

  .container-circ {
      width: 785px;
      height: 680px;
      top: -2%;
      left: -14.8%;
  }

  .num_c_imp_6 {
    max-width: 170px;
    font-size: 34px;
  }

   .texto_imp_1 {
    font-size: 10px !important;
  }

  .num_imp_1 {
    font-size: 50px !important;
  }

  .c_imp_4 {  
    padding: 15px 15px;

    .num_imp_4 {
      font-size: 50px;
    }
    .texto_imp_4 {
      font-size: 10px;
    }
  }

  .tit_imp_5 {
    font-size: 22px;
    margin-top: 10px; 
  }

  .texto_c_imp_6 {
    font-size: 10px;
  }

  .texto_c_imp_7 {
    margin-top: 25px;
  }

  .c_imp_8 {

    .num_c_imp_8 {
      font-size: 34px;
    }

    .texto_c_imp_8 {
      font-size: 10px;
    }
  }

  .c_imp_9 {

    .num_c_imp_9 {
      font-size: 34px;
    }

    .texto_c_imp_9 {
      font-size: 10px;
    }
  }

  .c_imp_10 {
    padding: 8px 15px;
    

    .num_c_imp_10 {
      font-size: 34px;
    }

    .texto_c_imp_10 {
      font-size: 10px;
    }
  }

  .num_imp_14 {
    font-size: 50px;
  }

  .texto_imp_14 {
    font-size: 20px;
    line-height: 1.2;
  }

  .c_imp_15 {
    padding: 10px 10px;

    .texto_c_imp_15 {
      font-size: 10px;
    }

    .num_c_imp_15 {
      font-size: 40px;
    }
  }


  .c_imp_17 {

    .num_c_imp_17 {
      font-weight: 200;
      font-size: 40px;
      line-height: 1;
      color:#3366FF;
      border-radius: 50%;
      padding:32px 15px;
      position: relative;
      
      
      &::before {
        position: absolute;
        content:'';
        background-image: url('../imagenes/graf_porc_20.svg');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        width: 120%;
        height: 120%;
        top: -12%;
        left: -2%;
      }
    }
  }

  .c_imp_16 {
    padding: 12px 10px;

    .texto_c_imp_16 {
      font-size: 10px;
    }

    .num_c_imp_16 {
      font-size: 40px;
    }
  }


  .c_imp_18 {

    .num_c_imp_18 {
      font-size: 40px;
      padding: 26px 10px;
    }

  }

  .cont_c_filo {
    
    .c_filo_1 {
      display: inline-block;
      width: 40%;
      transition: .4s all ease-in-out;
    }

    .c_filo_2 {
      display: inline-block;
      width: 60%;
      transition: .4s all ease-in-out;
    }

  }

  .tit_banner_secc {
    font-size: 58px;
    padding-top: 120px;
    margin-bottom: 80px;
  }

  .flecha_scroll_secc {
    margin-top: 400px;
  }


   .anim_circ_banner {

    &::before {
      width: 950px !important;
      height: 950px !important;
    }
  }

  .bg_desempeno {
    min-height: 600px;
  }

  .container-circ_njn {
      width: 1430px;
      height: 1430px;
      top: -88%;
      left: -37%;
  }

  .circle_njn {
      width: 50px;
      height: 50px;
      top: 85.4%;
      right: 49.5%;
  }

  .trail_njn {

      /* Máscara del grosor del arco */
      -webkit-mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
      mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
  }

  .bg_ch {
    min-height: 600px;
  }

  .container-circ_ch {
      width: 1430px;
      height: 1430px;
      top: -88%;
      left: -37%;
  }

  .circle_ch {
      width: 50px;
      height: 50px;
      top: 85.4%;
      right: 49.5%;
  }

  .trail_ch {

      /* Máscara del grosor del arco */
      -webkit-mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
      mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
  }

  .bg_clientes {
    min-height: 600px;
  }

  .container-circ_cl {
      width: 1430px;
      height: 1430px;
      top: -88%;
      left: -37%;
  }

  .circle_cl {
      width: 50px;
      height: 50px;
      top: 85.4%;
      right: 49.5%;
  }

  .trail_cl {
     
      /* Máscara del grosor del arco */
      -webkit-mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
      mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
  }


  .bg_prov {
    min-height: 600px;
  }

  .container-circ_prov {
      width: 1430px;
      height: 1430px;
      top: -88%;
      left: -37%;
  }

  .circle_prov {
      width: 50px;
      height: 50px;
      top: 85.4%;
      right: 49.5%;
  }

  .trail_prov {

      /* Máscara del grosor del arco */
      -webkit-mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
      mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
  }


  .bg_comu {
    min-height: 600px;
  }

  .container-circ_comu {
      width: 1430px;
      height: 1430px;
      top: -88%;
      left: -37%;
  }

  .circle_comu {
      width: 50px;
      height: 50px;
      top: 85.4%;
      right: 49.5%;
  }

  .trail_comu {
    
      /* Máscara del grosor del arco */
      -webkit-mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
      mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
  }


  .bg_amb {
    min-height: 600px;
  }

  .container-circ_amb {
      width: 1430px;
      height: 1430px;
      top: -88%;
      left: -37%;
  }

  .circle_amb {
      width: 50px;
      height: 50px;
      top: 85.4%;
      right: 49.5%;
  }

  /* La estela - anillo con gradiente (detrás del círculo) */
  .trail_amb {
     
      -webkit-mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
      mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
  }

  .bg_fut {
    min-height: 600px;
  }

  .container-circ_fut {
      width: 1430px;
      height: 1430px;
      top: -88%;
      left: -37%;
  }

  .circle_fut {
      width: 50px;
      height: 50px;
      top: 85.4%;
      right: 49.5%;
  }

  /* La estela - anillo con gradiente (detrás del círculo) */
  .trail_fut {
      -webkit-mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
      mask: radial-gradient(
          circle,
          transparent 0%,
          transparent calc(50% - 25px),
          black calc(50% - 25px),
          black calc(50% + 25px),
          transparent calc(50% + 25px)
      );
  }



  .c_des_1 {
    padding:5px 20px;

    .num_c_des_1 {
      font-size: 34px;
    }

    .texto_c_des_1 {
      font-size: 10px;
    }
  }

  .c_des_2 {
    padding:5px 20px;
    margin-top: 15px;

    .num_c_des_2 {
      font-size: 34px;
    }

    .texto_c_des_2 {
      font-size: 10px;
    }
  }


  .container-circ_njn_uni {
      width: 450px;
      height: 450px;
      top: -48px;
      left: -48px;
  }

  .c_circ_uni {

    .texto_circ_hover_uni {
      font-size: 14px;
    }

    .num_circ_hover_uni {
      font-size: 46px;
    }
  }

  .c_ch_1 {
    padding:5px 25px;

    .num_c_ch_1 {
      font-size: 40px;
    }

    .texto_c_ch_1 {
      font-size: 18px;
    }
  }

  .c_ch_2 {
    padding: 5px 15px;
    
    .num_c_ch_2 {
      font-size: 30px;
    }

    .texto_c_ch_2 {
      font-size: 9px;
    }
  }
  
  .c_ch_4 {
    position: relative;
    padding: 25px 25px;

    .num_c_ch_4 {
      font-size: 44px;
    }

    .texto_c_ch_4 {
      font-size: 10px;
    }

  }

  .c_ch_5 {

    .num_c_ch_5 {
      font-size: 40px;
    }

    .texto_c_ch_5 {
      font-size: 18px;
    }

  }

  .c_cl_1 {
    padding: 25px 10px;
    border:20px solid #035440;
    margin-top: 30px;
    
    .num_c_cl_1 {
      font-size: 40px;
    }
  }

  .c_cl_2 {

    .texto_c_cl_2 {
      font-size: 12px;
    }
  }

  .num_cl_3 {
    font-size: 50px;
  }

  .texto_cl_3 {
    font-size: 24px;
  }

  .c_cl_4 {

    .texto_c_cl_4 {
      font-size: 10px;
    }

    .num_c_cl_4 {
      font-size: 32px;
    }
  }

  .c_cl_5 {
    padding: 22px 20px;
    margin-left: -20px;
    .texto_c_cl_5 {
      font-size: 10px;
    }

    .num_c_cl_5 {
      font-size: 32px;
    }
  }

  .c_cl_6 {
    margin-left: -40px;
    .texto_c_cl_6 {
      font-size: 10px;
    }

    .num_c_cl_6 {
      font-size: 32px;
    }
  }

  .c_cl_7 {
    margin-left: -60px;

    img {
      max-width: 72px;
    }
  }

  .c_prov_1 {
    padding:20px 25px;
    border-radius: 50px;

    .num_c_prov_1 {
      font-size: 38px;
    }

    .texto_c_prov_1 {
      font-size: 16px;
    }
  }

  .c_prov_3 {
    margin-left: -25px;
  }

  .c_prov_4 {
    padding: 45px 5px;
    padding-right: 15px;

    &::before {
      width: 115%;
      height: 115%;
      top: -11%;
      left: -5%;
    }
  }

  .c_comu_1 {

    .num_c_comu_1 {
      font-size: 44px;
    }

  }

  .c_comu_2 {

    .num_c_comu_2 {
      font-size: 38px;
    }

  }

  .num_c_amb_1 {
    font-size: 54px;
  }

  .c_amb_3 {

    .num_c_amb_3 {
      font-size: 40px;
    }
  }

  .c_amb_4 {
    padding:10px 10px;
    border-radius: 50px;
    border:2px solid #59A30D;
    margin-right: -10px;

    .num_c_amb_4 {
      font-size: 32px;
    }
  }

  .texto_banner_footer {
    font-size: 20px;
  }







}



@media (max-width: 1280px) { 

  .container-circ {
    width: 740px;
    height: 620px;
    top: 3%;
    left: -15%;
  }

  .circle {
      top: 88.9%;
  }

  .anim_circ_banner {

    &::before {
      width: 880px !important;
      height: 880px !important;
    }
  }

  .container-circ_njn {
      width: 1330px;
      height: 1330px;
      top: -82%;
      left: -37%;
  }

  .container-circ_ch {
      width: 1330px;
      height: 1330px;
      top: -82%;
      left: -37%;
  }

  .container-circ_cl {
      width: 1330px;
      height: 1330px;
      top: -82%;
      left: -37%;
  }

  .container-circ_prov {
      width: 1330px;
      height: 1330px;
      top: -82%;
      left: -37%;
  }

  .container-circ_comu {
      width: 1330px;
      height: 1330px;
      top: -82%;
      left: -37%;
  }

  .container-circ_amb {
      width: 1330px;
      height: 1330px;
      top: -82%;
      left: -37%;
  }

  .container-circ_fut {
      width: 1330px;
      height: 1330px;
      top: -82%;
      left: -37%;
  }





}


@media (max-width: 991px) { 

  .show_resp {
    display: block;
  }

  .show_desk {
    display: none;
  }


  .navbar-toggler {
    margin-right: 0;
    margin-left: auto;
    border:none;

    &:focus {
      box-shadow: none;
    }
  }

  .barra_nav {
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .anim_circ_banner {

    &::before {
      width: 980px !important;
      height: 680px !important;
      top: -19%;
      left: -20%;
    }
  }

  .flecha_scroll_secc {
    margin-top: 450px;
    margin-bottom: 20px;

    img {
      max-width: 40px;
    }
  }

  .tit_banner_secc {
    font-size: 38px;
    padding-top: 30px;
    margin-bottom: 25px;
  }

  .bot_banner_secc {
    padding: 8px 20px;
    font-size: 14px;
    padding-right: 40px;
  }

  .container-circ_njn {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_ch {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_cl {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_prov {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_comu {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_amb {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_fut {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .frase_lineas_desempeno {
    margin-top: 50px;
    margin-bottom: 50px;

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_desempeno {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_ch {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_cl {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_prov {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_comu {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_amb {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_fut {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .c_imp_17 {

    .num_c_imp_17 {
      
      &::before {
        width: 100%;
        height: 100%;
      }
    }
  }

  .container-circ_njn_uni {
    display: none;
  }

  .banner_top {
    background-image: url('../imagenes/banner_top_resp.jpg');
  }

  .ano_bt {
    margin-top: 80px;
    margin-left: 0;
    padding: 5px 35px;
  }

  .tit_bt {
    margin-left: 0;
    font-size: 28px;
  }

  .flecha_scroll {
    margin-top: 240px;
    img {
      max-width: 40px;
    }
  }

  .secc_ceo {
    padding-top: 10px;
  }

  .cuadro_ceo {
    margin-top: 20px;
    padding: 20px 30px;
    margin-bottom: 30px;
    height: auto;
  }

  .nombre_ceo {
    margin-top: 10px;
  }

  .tit_impacto {
    font-size: 30px;
    line-height: 1.3;
  }

  .bg_impacto {
    padding-top: 40px;
  }

  .texto_impacto {
    margin-bottom: 30px;
  }

  .c_imp_1 {
    margin-left: 15px;
    margin-top: 30px;
  }

  .c_imp_2 {
    margin-top: 30px;
    height: calc(100% - 30px);
  }

  .c_imp_3 {
    margin-top: 30px;
    height: calc(100% - 30px);
  }

  .graf_imp_3 {
    margin-top: 7px;
  }

  .c_ico_imp_6 {
    margin-top: 20px;
  }

  .c_imp_6 {
    margin-top: 20px;
    padding: 20px 20px;
  }

  .texto_c_imp_7 {
    font-size: 16px;
  }

  .c_imp_10 {
    padding: 20px 20px;
    margin-bottom: 20px;
  }

  .c_ico_imp_10 {
    margin-bottom: 20px;
  }

  .c_imp_12 {
    padding: 25px 20px;
    height: 100%;
    margin-left: -15px;
    margin-right: 0px;
  }

  .c_imp_13 {
    padding: 25px 20px;
    margin-left: -15px;
    margin-right: 0px;
  }

  .c_imp_11 {

    .num_imp_11 {
      font-size: 50px;
      min-height: auto;
      min-width: auto;
    }
  }

  .c_imp_15 {
    padding: 10px 15px;
  }

  .c_imp_16 {
    padding: 18px 20px;
  }

  .c_imp_18 {
    margin-top: 20px;

    .num_c_imp_18 {
      font-size: 34px;
      text-align: center;
      padding: 30px 10px;

      &::before {
        left: 22%;
        width: 55%;
        height: 100%;
      }
    }

    .texto_c_imp_18 {
      margin-top: 15px;
      text-align: center;
    }

  }

  .c_imp_17 {
    margin-top: 20px;

    .num_c_imp_17 {
      font-weight: 200;
      font-size: 40px;
      text-align: center;
      
      &::before {
        width: 120%;
        height: 120%;
        top: -12%;
        left: -6%;
      }
    }

    .texto_c_imp_17 {
      margin-top: 15px;
      text-align: center;
    }

  }

  .bg_filosofia {
    padding-top: 40px;
  }

  .cont_c_filo {
    margin-top: 40px;
    flex-direction: column;

    .c_img_filo {
      margin-top: 20px;
    }
  }
  
  .caja_filo_1 {

    .tit_c_vert_filo {
      color:#000;
    }

    .texto_c_filo_v {
      color:#000;
    }
  }

  .caja_filo_h {
    min-height: auto;
    width: 100%;
    max-width: 100%;
  }

  .texto_c_filo_v {
      transform: scale(1) !important;
      margin-top: 40px;
      height: 100% !important;
    }


  .bg_desempeno {
    background-image: url('../imagenes/bg_desempeno_resp.jpg');
    min-height: 900px;
  }

  .bg_ch {
    background-image: url('../imagenes/bg_ch_resp_2.jpg');
    min-height: 900px;
  }

  .bg_clientes {
    background-image: url('../imagenes/bg_clientes_resp.jpg');
    min-height: 900px;
  }

  .bg_prov {
    background-image: url('../imagenes/bg_prov_resp.jpg');
    min-height: 900px;
  }

  .bg_comu {
    background-image: url('../imagenes/bg_comu_resp.jpg');
    min-height: 900px;
  }

  .bg_amb {
    background-image: url('../imagenes/bg_amb_resp.jpg');
    min-height: 900px;
  }

  .bg_fut {
    background-image: url('../imagenes/bg_fut_resp.jpg');
    min-height: 900px;
  }

  .c_rojo_desempeno {
    padding: 50px 15px;
  }

  .c_des_3 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .c_des_2 {
    margin-bottom: 20px;
  }

  .img_desemp_2 {
    display: block;
    margin:0 auto;
    max-height: 175px;
    margin-top: 40px;
  }

  .tit_uni_secc {
    font-size: 28px;
  }

  .c_circ_uni {
    max-width: 448px;
    margin:0 auto;
  }

  .circ_hover_uni {
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #fef0edd1 !important;
  }

  .container-circ_njn_uni {
    opacity: 0 !important;
  }

  .gif_c_circ_uni {
    display: none !important;
  }

   .tit_circ_uni {
    margin-top: 10px;
    margin-bottom: 40px;
  }

  .frase_lineas_ch {
    margin-bottom: 50px;
    margin-top: 50px;
  }

   .c_ch_2 {

    .num_c_ch_2 {
      font-size: 30px;
      margin-left: 15px;
    }

  }

  .img_ch_1 {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .c_ch_4 {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .c_ch_5 {
    margin-bottom: 15px;
  }

  .img_ch_3 {
    max-height: 175px;
    display: block;
    margin:0 auto;
  }

  .c_verde_cl {
    background-color: #E9F7F3;
    padding: 50px;
    border-radius: 45px;
  }

  .frase_lineas_cl {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .img_clientes_1 {
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .c_cl_1 {
    padding: 25px 10px;
    border: 10px solid #035440;
    margin-top: 5px;
    display: inline-block;
    min-width: 126px;
  }

  .c_cl_5 {
    padding: 30px 20px;
    margin-left: 0px;
  }

  .c_cl_6 {
    margin-left: 0;
    margin-top: 15px;
  }

  .c_cl_7 {
    margin-left: 0;
    margin-top: 15px;
  }

  .frase_lineas_prov {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .c_prov_1 {
    padding: 20px 10px;
    border-radius: 30px;
  }

  .c_naranja_prov {
    background-color: #FEF6EA;
    padding: 50px 15px;
    border-radius: 45px;
  }


  .img_prov_1 {
    margin:20px auto;
  }

  .c_prov_4 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .semi_c_prov {
    margin-top: 0;
  }

  .frase_lineas_comu {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .img_comu_2 {
    max-height: 175px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .img_comu_3 {
    max-height: 160px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .img_comu_4 {
    max-height: 175px;
    display: block;
    margin:0 auto;
    margin-top: 20px;
  }

  .frase_lineas_amb {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .align_amb_1_resp {
    text-align: center;
  }

  .texto_c_amb_1 {
    display: inline-block;
  }

  .img_amb_1 {
    margin-bottom: 20px;
  }

   .texto_c_amb_2 {
    font-size: 18px !important;
  }

  .c_amb_2 {
    margin-bottom: 20px;
  }

  .frase_lineas_fut {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .bg_banner_footer .row {
    align-items: center;
  }

  .derechos {
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .flecha_c_filo_v {
    display: none;
  }

  .c_verde_cl {
    padding: 50px 20px;
  }



}



@media (max-width: 767px) { 

  

  

  .container-circ {
    width: 300px;
    height: 300px;
    top: 3%;
    left: -15%;
    display: none;
  }

  .circle {
      top: 88.9%;
  }

  .anim_circ_banner {

    &::before {
      width: 580px !important;
      height: 440px !important;
      top: -19%;
      left: -32%;
    }
  }

  .flecha_scroll_secc {
    margin-top: 250px;
    margin-bottom: 20px;

    img {
      max-width: 40px;
    }
  }

  .tit_banner_secc {
    font-size: 28px;
    padding-top: 30px;
    margin-bottom: 25px;
  }

  .bot_banner_secc {
    padding: 8px 20px;
    font-size: 14px;
    padding-right: 40px;
  }

  .container-circ_njn {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_ch {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_cl {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_prov {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_comu {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_amb {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .container-circ_fut {
      width: 300px;
      height: 300px;
      top: -82%;
      left: -37%;
      display: none;
  }

  .frase_lineas_desempeno {
    margin-top: 50px;
    margin-bottom: 50px;

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_desempeno {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_ch {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_cl {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_prov {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_comu {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_amb {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .frase_lineas_fut {

    &::before {
      left: 0px;
      display: none;
    }

    &::after {
      right: 0px;
      display: none;
    }
  }

  .c_imp_17 {

    .num_c_imp_17 {
      
      &::before {
        width: 100%;
        height: 100%;
      }
    }
  }

  .container-circ_njn_uni {
    display: none;
  }

  .banner_top {
    background-image: url('../imagenes/banner_top_resp.jpg');
  }

  .ano_bt {
    margin-top: 80px;
    margin-left: 0;
    padding: 5px 35px;
  }

  .tit_bt {
    margin-left: 0;
    font-size: 28px;
  }

  .flecha_scroll {
    margin-top: 240px;
    img {
      max-width: 40px;
    }
  }

  .secc_ceo {
    padding-top: 10px;
  }

  .cuadro_ceo {
    margin-top: 20px;
    padding: 20px 30px;
    margin-bottom: 30px;
    height: auto;
  }

  .nombre_ceo {
    margin-top: 10px;
  }

  .tit_impacto {
    font-size: 30px;
    line-height: 1.3;
  }

  .bg_impacto {
    padding-top: 40px;
  }

  .texto_impacto {
    margin-bottom: 30px;
  }

  .c_imp_1 {
    margin-left: 15px;
    margin-top: 30px;
  }

  .c_imp_2 {
    margin-top: 30px;
    height: calc(100% - 30px);
  }

  .c_imp_3 {
    margin-top: 30px;
    height: calc(100% - 30px);
  }

  .graf_imp_3 {
    margin-top: 7px;
  }

  .c_ico_imp_6 {
    margin-top: 20px;
  }

  .c_imp_6 {
    margin-top: 20px;
    padding: 20px 20px;
  }

  .texto_c_imp_7 {
    font-size: 16px;
  }

  .c_imp_10 {
    padding: 20px 20px;
    margin-bottom: 20px;
  }

  .c_ico_imp_10 {
    margin-bottom: 20px;
  }

  .c_imp_12 {
    padding: 25px 20px;
    height: 100%;
    margin-left: -15px;
    margin-right: 0px;
  }

  .c_imp_13 {
    padding: 25px 20px;
    margin-left: -15px;
    margin-right: 0px;
  }

  .c_imp_11 {

    .num_imp_11 {
      font-size: 50px;
      min-height: auto;
      min-width: auto;
    }
  }

  .c_imp_15 {
    padding: 10px 15px;
  }

  .c_imp_16 {
    padding: 18px 20px;
  }

  .c_imp_18 {
    margin-top: 20px;

    .num_c_imp_18 {
      font-size: 34px;
      text-align: center;
      padding: 30px 10px;

      &::before {
        left: 22%;
        width: 55%;
        height: 100%;
      }
    }

    .texto_c_imp_18 {
      margin-top: 15px;
      text-align: center;
    }

  }

  .c_imp_17 {
    margin-top: 20px;

    .num_c_imp_17 {
      font-weight: 200;
      font-size: 40px;
      text-align: center;
      
      &::before {
        width: 120%;
        height: 120%;
        top: -12%;
        left: -6%;
      }
    }

    .texto_c_imp_17 {
      margin-top: 15px;
      text-align: center;
    }

  }

  .bg_filosofia {
    padding-top: 40px;
  }

  .cont_c_filo {
    margin-top: 40px;
    flex-direction: column;

    .c_img_filo {
      margin-top: 20px;
    }
  }
  
  .caja_filo_1 {

    .tit_c_vert_filo {
      color:#000;
    }

    .texto_c_filo_v {
      color:#000;
    }
  }

  .caja_filo_h {
    min-height: auto;
  }

  .texto_c_filo_v {
      transform: scale(1) !important;
      margin-top: 40px;
      height: 100% !important;
    }


  .bg_desempeno {
    background-image: url('../imagenes/bg_desempeno_resp.jpg');
    min-height: 600px;
  }

  .bg_ch {
    background-image: url('../imagenes/bg_ch_resp_2.jpg');
    min-height: 600px;
  }

  .bg_clientes {
    background-image: url('../imagenes/bg_clientes_resp.jpg');
    min-height: 600px;
  }

  .bg_prov {
    background-image: url('../imagenes/bg_prov_resp.jpg');
    min-height: 600px;
  }

  .bg_comu {
    background-image: url('../imagenes/bg_comu_resp.jpg');
    min-height: 600px;
  }

  .bg_amb {
    background-image: url('../imagenes/bg_amb_resp.jpg');
    min-height: 600px;
  }

  .bg_fut {
    background-image: url('../imagenes/bg_fut_resp.jpg');
    min-height: 600px;
  }
 
  .c_rojo_desempeno {
    padding: 50px 15px;
  }

  .c_des_3 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .c_des_2 {
    margin-bottom: 20px;
  }

  .img_desemp_2 {
    display: block;
    margin:0 auto;
    max-height: 175px;
    margin-top: 40px;
  }

  .tit_uni_secc {
    font-size: 28px;
  }

  .circ_hover_uni {
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #fef0edd1 !important;
  }

  .container-circ_njn_uni {
    opacity: 0 !important;
  }

  .gif_c_circ_uni {
    display: none !important;
  }

   .tit_circ_uni {
    margin-top: 10px;
    margin-bottom: 40px;
  }

  .frase_lineas_ch {
    margin-bottom: 50px;
    margin-top: 50px;
  }

   .c_ch_2 {

    .num_c_ch_2 {
      font-size: 30px;
      margin-left: 15px;
    }

  }

  .img_ch_1 {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .c_ch_4 {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .c_ch_5 {
    margin-bottom: 15px;
  }

  .img_ch_3 {
    max-height: 175px;
    display: block;
    margin:0 auto;
  }

  .c_verde_cl {
    background-color: #E9F7F3;
    padding: 50px;
    border-radius: 45px;
  }

  .frase_lineas_cl {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .img_clientes_1 {
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .c_cl_1 {
    padding: 25px 10px;
    border: 10px solid #035440;
    margin-top: 5px;
    display: inline-block;
    min-width: 126px;
  }

  .c_cl_5 {
    padding: 30px 20px;
    margin-left: 0px;
  }

  .c_cl_6 {
    margin-left: 0;
    margin-top: 15px;
  }

  .c_cl_7 {
    margin-left: 0;
    margin-top: 15px;
  }

  .frase_lineas_prov {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .c_prov_1 {
    padding: 20px 10px;
    border-radius: 30px;
  }

  .c_naranja_prov {
    background-color: #FEF6EA;
    padding: 50px 15px;
    border-radius: 45px;
  }


  .img_prov_1 {
    margin:20px auto;
  }

  .c_prov_4 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .semi_c_prov {
    margin-top: 0;
  }

  .frase_lineas_comu {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .img_comu_2 {
    max-height: 175px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .img_comu_3 {
    max-height: 160px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .img_comu_4 {
    max-height: 175px;
    display: block;
    margin:0 auto;
    margin-top: 20px;
  }

  .frase_lineas_amb {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .align_amb_1_resp {
    text-align: center;
  }

  .texto_c_amb_1 {
    display: inline-block;
  }

  .img_amb_1 {
    margin-bottom: 20px;
  }

   .texto_c_amb_2 {
    font-size: 18px !important;
  }

  .c_amb_2 {
    margin-bottom: 20px;
  }

  .frase_lineas_fut {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .bg_banner_footer .row {
    align-items: center;
  }

  .derechos {
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .flecha_c_filo_v {
    display: none;
  }

  .c_verde_cl {
    padding: 50px 20px;
  }





}



@media (max-width: 390px) { 

  .anim_circ_banner {

    &::before {
      width: 580px !important;
      height: 440px !important;
      top: -19%;
      left: -40%;
    }
  }

}

@media (max-width: 360px) { 

  .anim_circ_banner {

    &::before {
      width: 580px !important;
      height: 440px !important;
      top: -19%;
      left: -44%;
    }
  }

}