/* Componente de estrategia extraído de assets/css/estilos.css del sitio 2024.
   Reglas originales completas, incluidos sus breakpoints; conservar el efecto existente. */



.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%;
      }

    }

  }














.show_resp {
  display: none;
}


.show_desk {

}
@media (max-width: 1366px) {


  .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;
    }

  }
}
@media (max-width: 991px) {
 

  .show_resp {
    display: block;
  }


  .show_desk {
    display: none;
  }


  .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;
    }
}
@media (max-width: 767px) {


  .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;
    }
}