@font-face {

    font-family: Sora-regular;

    src: url('./fonts/Sora-Regular.woff');



}

@font-face {

    font-family: Sora-medium;

    src: url('./fonts/Sora-Medium.woff');



}

@font-face {

    font-family: Sora-semibold;

    src: url('./fonts/Sora-SemiBold.woff');



}



@font-face {

    font-family: Sora-bold;

    src: url('./fonts/Sora-Bold.woff');



}



#nosotros, #experiencias, #areas, #soluciones,#contact_form {

    scroll-margin-top: 70px; 

  }

  #soluciones{

    scroll-margin-top: 130px; 

  }

  #metodologia{

    scroll-margin-top:-200px; 

  }

html {

  scroll-behavior: smooth;

}



/* Aseg��rate de que el body tenga height m��nimo para que el scroll funcione */

body, html {

    margin: 0;

    padding: 0;

    height: 100%;

}



.fullscreen-bg {

    background-image: url('../assets/images/innovar.webp');

    background-size: cover;

    background-position: center;

    position: fixed; /* Esto mantiene la imagen de fondo fija */

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1; /* Esto asegura que el contenido est�� por encima */

}



.soluciones .innovar__div {

    /* Este estilo se aplicar�� inicialmente, JavaScript ajustar�� el background-size seg��n el scroll */

     background-size: cover; /* O 'cover', dependiendo de c��mo quieras que se vea al final */

    background-attachment:fixed;

}







body{

    background: #FFFDFA;

}



.efecto {

    height: 150vh;

    position: relative;

}



@media (max-width: 423px) {

    .efecto {

        height:auto !important;

    }

}



.mi_scroll {

    position: -webkit-sticky; /* Para soporte en Safari */

    position: sticky;

    top: 70px; /* Ajusta esto para controlar a qu�� distancia del top del contenedor efecto mi_scroll se volver�� fijo */

    /* No es necesario establecer width y height aqu�� a menos que desees limitar mi_scroll de alguna manera espec��fica */

}





/* Estilos para campos de error */

.error {

    border: 1px solid red; /* Borde rojo para resaltar el campo con error */

    color: red; /* Texto en rojo para el mensaje de error */

}



/* Estilos para mensajes de error */

.error-message {

    color: red; /* Color de texto rojo para el mensaje de error */

    font-size: 14px; /* Tama�0�9o de fuente para el mensaje de error */

    margin-top: 5px; /* Espacio superior para separar el mensaje del campo */

}



.form-group {

    margin-bottom: 20px;

}



label {

    display: block;

    margin-bottom: 5px;

    font-size: 16px !important;

    line-height: 20px;

}



input[type=text],input[type=email],input[type=tel]{

    width: 100%;

   padding: 5px 0px;

}



.error-message {

    color: red;

    font-size: 14px;

}



a{

    font-family: Sora-regular;

    text-decoration: none !important;

    color: inherit !important;

    cursor: pointer;

}



h1{

    font-size: 67px !important;

    line-height: 72px !important;

     font-family: Sora-bold;

}

h2{

    font-size: 48px !important;

    line-height: 56px !important;

     font-family: Sora-bold;

}

h3, .h3{

    font-size: 38px !important;

    line-height: 45px !important;

     font-family: Sora-bold;

}





h6{

    font-size: 20px !important;

     font-family: Sora-bold;



}

.h6{

    font-size: 22px !important;

    line-height: 28px !important;

     font-family: Sora-bold;



} 



.p22{

    font-size: 22px !important;

    line-height: 28px !important;

   

}

.p9{

    font-size: 9px !important;

    line-height: 12px;

    

}

a{

    font-family: Sora-regular;

}



.a, p, ul{

    font-size: 16px !important;

    line-height: 20px;

    font-family: Sora-regular;

    color: #1B1B25;



}



.p-small{

    font-size: 12px !important;

    line-height: 22px;

}



hr{

    color:#1B1B25 !important;

    opacity: 1 !important;

}

.p-gray{

    color: #706A6A !important;

}

.p-gray-1{

    color:#BDBDBD !important;

}



/* a, p{

    color: #1B1B25;

} */

.p5{

    font-size: 5px !important;

    line-height: 6px !important;

}

.padd80{

    padding-top: 80px;

    padding-bottom: 80px;

}

.padT80{

    padding-top: 80px;    

}

.padB80{

    padding-bottom: 80px;

    

}

.padgral56{

    padding-top: 56px;

    padding-bottom: 56px;

}

.paddT40{

    padding-top: 40px;

}

.paddB40{

    padding-bottom: 40px;

}

.padgral40{

    padding-top: 40px;

    padding-bottom: 40px;

}

.hb:hover{

    font-weight: 700;

}

@media (max-width: 991px) {

    .footer__img{

        object-fit: contain;

        width: 80% !important;

        align-self: center;

    }

}

@media (max-width: 767px) {



    

    h1{

        font-size: 38px !important;

        line-height: 40px !important;

       

    }

    h2,h3{

        font-size: 24px !important;

        line-height: 29px !important;

       

    }

    .h3{

        font-size: 18px !important;

        line-height: 29px !important;

       

    }

   h6, .h6 {

        font-size: 18px !important;

        line-height:26px !important;

    }



    .p20, .p24{

        font-size: 14px !important;

        line-height: 22px !important;

    }

    p, .a, a, ul{

        font-size: 12px !important;

        line-height: 18px !important;

    }

    .p5{

        font-size: 4px !important;

        line-height: 5px !important;

    }

    .section_card{

        max-width: 90% !important;

    }

 

    .padgral{

        padding-top: 40px;

        padding-bottom: 40px;

    }

 

    .padgral40{

        padding-top: 24px;

        padding-bottom: 24px;

    }

    .padT40{

        padding-top: 24px;

        

    }

    .paddB40{

        padding-bottom: 24px;

        

    }

    .padT80{

        padding-top: 40px;

        

    }

    .padB80{

        padding-bottom:40px;

        

    }

    .padd80{

        padding-top: 40px;

        padding-bottom: 40px;

    }

    }





/*****/

nav{

    background: #ffffff00;

}



.navbar{

    transition: .1s linear;

}



.navbar .btn__2, .btn__2{

    font-size: 12px;

}





    .nav__active{

      display: inline !important;

      border-bottom: 1px solid #000000;

    }

    .nav__firts_div{

        height: 50px;

    }

    .logo_movil{

        margin-top: auto;

    }

    .main-header{

        /* background: #050301a1; */

        background: #05030100;

        color: #ffffff !important;

        width: 100%;

        height:70px;

        position: fixed;

        z-index: 100;

      

    

      

      }

    .nav-link{

        color: #ffffff !important;

        font-size: 16px;

    }

    .nav-item{

        list-style: none;

    }

      .menu_open{

        display: block;

      }

      .close_menu{

        display: none;

      }

  

      /**mopvil**/

      .nav_{

        position: fixed;

        right:0;

        top:0;

        width: 324px;

        height: 100vh;

        background:#ffffff;   

        transition:.8s ease;

       z-index: 1000;

         transform:translateX(100%);

         padding-left: 24px;

      }

      .nav_ a{

        color: #000000 !important;

      }



      .nav_ .nav-link{

        font-size: 18px !important;

      }

      .nav_ p{

        color: #000000;

      }

    

      .navigation{

        padding-top: 20px;

      }

      .navigation li{

        list-style:none !important;

        width: 100%;

      }

      .navbar a:hover{

        font-weight: 800;

      }

      

      .navigation a{

    line-height: 18px !important;

        display: block;

        line-height:3.5;

        padding: 0px;

       font-size: 18px;

        text-decoration:none;

        /* transition:.4s ease; */

        margin: 4px 0px;

        display: inline-block !important;

        

      }

     

      .navigation .btn__1{

        font-size: 12px;

        font-weight: 700;

      }

      

      .navigation a:hover, .nav_ a:hover{

        /* transform:translateX(10%);   */

        font-weight: 700;

        /* transition:.4s ease; */

    /* border-bottom: 1px solid #000000;    */

      }

      

      #btn-nav{

        display: none;

      }

      .main-header{

         transition:10s linear;

      }

      

      .hidden {

        visibility: hidden;

        transition:.4s ease-in;

    }

      #btn-nav:checked ~ nav{

        transform:translateX(0);

        visibility: visible;

         display: block;   

    

        } 

    

    

        #header{

          overflow: hidden;

        }

     

      .btn-nav{

        font-size:30px;

        position: absolute;

        right:0;

        top:0;

        cursor:pointer;

        padding:0px 15px;

        /* transition:.2s ease; */

      }

      /* .navigation .btn__1:hover{

        background:#ffffff !important;

        color: #312C27 !important;

        

      } */



      .nav-1 {        

        transition: 0.1s linear; 

    }

    .fixed-desktop {

        background:#050301 !important;

        transition: 0.3s linear;

    }

    

 

    .nav__footer a:first-child{

      display: flex;

      justify-content: start;

    }







/****hover nalinks***/

/* 

a.izdadcha {

    position: relative;

    overflow: hidden;

    color: #333;

   margin-top: 10px;

   transition: ease-in 0.3s;

   padding: 0 0 7px;

  }

  

  a.izdadcha:after {

    content: "";

    position: absolute;

    bottom: 0;

    left: -100%;

    width: 100%;

    height: 1px;

    background: #000032;

    transition: left .5s;

  }

  .izdadcha:hover{

   

    transition: ease-in 0.4s;

}

  a.izdadcha:hover:after {

    left: 0;

  } */

/***end *hover nalinks***/





    @media (max-width: 424px) {

      .btn__nav-book{

        

        right:30%;

      }

    }

    @media (min-width: 424px) and (max-width: 767px) {

      

      .btn__nav-book{

        right: 40%;

      }

      

        .efecto {

            height: 250vh;

        }

    }

    

      @media (max-width: 500px) {

       

        .nav_{    

          width: 100%;

        }

      }

      

/*********end navbar*************/   





.active-1, .container-puntos-emblematicos a:hover{

   font-weight: 700;  

    color: #ffffff !important;

}



/***********/

.btn__1{

    border: 1.5px solid #1B1B25 !important;

    color: #000000;

    /* transition: linear 0.4s; */

    border-radius: 30px;

    padding: 8px 16px !important;

    background: #ffffff00;/**transparente****/

    font-size: 12px;

}



.btn__1:hover{

    color: #ffffff !important; 

    border: 1px solid #000000 !important;

    background: #000000;

    /* transition: linear 0.4s; */



    

}



.btn__1:hover img{

    content: url('./images/icons/arrow-right-white.svg'); 

}





.btn__2{

    color: #ffffff !important; 

    border: 1px solid #ffffff !important;

    padding: 8px 16px !important;

    background: #ffffff00;

    /* transition: ease-in 0.4s; */

    border-radius: 30px;

}

/* .btn__2 img{

    transition: ease-in 0.4s;

} */



.btn__2:hover{

    color: #000000 !important; 

    border: 1px solid #000000 !important;

    

    background: #ffffff;

    /* transition: ease-in 0.4s; */

    border-radius: 30px;    

}

/* .navbar .btn__2:hover img{

    transition: ease-in 0.4s;

    content: url('./images/icons/flecha_negra-small.svg'); 

  

} */

.btn__2:hover img {

    /* transition: ease-in 0.9s; */

    content: url('./images/icons/arrow-right-black.svg'); 

    

}



/* Estilo transici��n  */

#inspiracion-image img {

    opacity: 1;

    transition: opacity 0.3s ease-in-out; 

  }





/**********video****************/



.section_home_video{

    height: 100vh;

}

.div-home-video{

    position: relative;

}

.home-text-video{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.295);

    color: white !important;

    

}

.home-video{

    height: 90vh;

}

.home-video video{

    height: 100vh;

    width: 100vw;

   

}



@media (max-width: 1300px) and (min-width: 768px) {



    .landing-video{

        height:50vh ;

    }

}

@media (max-width: 767px) {

    .landing-video{

        height:50vh ;

    }

}

.container-2{

    --bs-gutter-x: 1.5rem;

    --bs-gutter-y: 0;

    width: 100%;

    padding-right: calc(var(--bs-gutter-x) * .5);

    padding-left: calc(var(--bs-gutter-x) * .5);

    margin-right: auto;

    margin-left: auto;

    }



@media (min-width: 1400px){

.container-2{

    max-width: 1320px;

} }

@media (max-width: 1399px){

    .container-2{

    max-width: 1140px;

}

}

@media (max-width: 1200px){

.container-2{

    max-width: 960px;

}

}



@media (max-width: 991px){

.container-2{

    max-width: 720px;

}

}

@media (max-width: 769px){

.container-2{

    max-width: 540px;

}

}

/********cards*****************/

.img-s-effect{   

    opacity: 0;

    transform: translateY(300px);    

  }

  /* .img-s-effectX{

   visibility: hidden;

    opacity: 0;

    transform: translateX(-300px);

    

  } */



  /***3points*****/

  .threepoints{

   

    position: relative;

  }

  .overlaythreepoints{

    position: absolute;

    top: 0;    

    left: 0;

    width: 100%;

    height: 100%;



    background: #FFFDFA;



      visibility: visible; 

     /*opacity: 0;  */

     transform: translateX(0px); 

  }

  /******/

.card{

    border: none !important;

    border-radius: 1px !important;

    background: #FAFAFAFA !important;

}



.soluciones .card-1{

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;   

}



.soluciones .card-1{

    min-height: 324px;

    border-radius: 8px;

}

.soluciones .card-1 .h-100{    

    border-radius: 8px;

}

.soluciones .card-1 img{

    min-height: 324px;

    object-fit: cover;

}



.soluciones p{

    color: #ffffff;

}



@media (max-width: 769px){

    .soluciones .card-1{

        padding-left: 0;

        padding-right: 0;

    }

    .soluciones .card-1:first-child{

        padding-top: 24px;

    }

}



/************************/

.bg-image{

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

/********innovar***************/

.innovar__div{

    border-radius: 8px;

}

@media (min-width: 767px) {



.innovar__div{

    min-height: 514px;

}

}



@media (max-width: 766px) {

    .innovar__div{

        min-height: 200px;

    }

    

}

/***logos-marcas****/

.logos-marcas .row .col{

    display: flex;

    justify-content: center;

    margin: 0;

}

.logos-marcas .row {

    margin: 0;

}



@media (max-width: 766px) {

    .logos-marcas img{

        height: 24px;

    }

    

}



/***tu socio****/



@media (max-width: 766px) {

.img-movil{

    min-height: 393px;

    object-fit: cover;

    object-position: left center;

}

}

/***soluciones***/

.soluciones{

    position: relative;

}

.pxls{

    position: absolute;

    bottom: 40px;

    left: 40px;

}



@media (max-width: 766px) {

    .pxls{

       

        bottom: 10px;

        left: 10px;

    }

    

}

/*********Servicios trasnformamos ideas*******Videos*******/



.large-img{

    object-fit: cover;

    border-radius: 8px !important;

}

.img_galeria{

    border-radius: 8px;

}

.video_galeria video{

    border-radius: 8px;

    width: 100%; 

    display: block; 

}



@media (min-width: 992px) and (max-width: 1199px) {

    .large-img{

    height: 705px;  

    border-radius: 8px;

    }

    

    .img_galeria{

        height: 278px;

    }

  }

@media (min-width: 1200px) and (max-width: 1399px) {

    .large-img{

        height: 816px;

    }

  

    .img_galeria{

      height: 330px;

    }

  }

  

@media (min-width: 1400px) {

    .large-img{

    height: 906px;

    }

   

    .img_galeria{

     height: 382px;

    }

  }



@media (max-width: 991px) {

    .galeria img{

      padding-top: 24px;

    }

    .img_galeria, .galeria-img{

        height: 350px;

       }

    .large-img{

        /* margin-top: 24px; */

        height:350px;

        /* height:90vh; */

        /* object-fit: contain !important; */

       }

    }



    @media (min-width: 768px) {

    .cuatro, .cinco{

        width: 49%;

    }

}

/*overlay hover videos*/

.video_galeria, .div__img_content{

    position: relative;

    overflow: hidden;

}

.overlay-video{

    background: #000000ce;

    position: absolute;

    top: 0;    

    left: 0;

    width: 100%;

    height: 100%;

    border-radius: 8px;

    cursor: pointer;



    /* visibility: hidden; */

    transition: .35s ease-in;

    transform: translateY(100%);

}

.video_galeria:hover .overlay-video, .div__img_content:hover .overlay-video{

   

    /* visibility: visible; */

    transition: .35s ease-in;

    transform: translateY(0);

}

/* .video_galeria .btn__2 {

    transition: .4s ease-in !important;

} */





/******Acordeon*********/

.accordion{

    border-radius: none !important;

} 

.accordion-item{

    border: none !important;

    border-bottom: 2px solid #050301 !important;

}

.accordion-button{

    padding:29px 0px 11px;

    border-top: none !important;

    border-bottom: none !important;

    background-color: #FFFDFA;

    font-size:22px;

    line-height: 28px;

    /* border-bottom: 1.5px solid #050301; */

}

.accordion-button:not(.collapsed){

    background-color: #FFFDFA;

    color: inherit;

    border-bottom: none !important;

}

.accordion-button:focus {

    /* box-shadow: 0px 0px 6px #050301; */

    box-shadow: none;

}



.accordion-button::after {

    background-image: url(./images/icons/arrow-right-black.svg);

}



.accordion-button:not(.collapsed)::after {

    background-image: url(./images/icons/menuclose-1.svg);

    transform: var(--bs-accordion-btn-icon-transform);

}

.accordion-body{

   padding: 5px 0px 24px 0px !important;

    background-color: #FFFDFA;

   

}



.accordion__div_img img{

    border-radius: 6px;

}





@media (max-width: 991px) {

.accordion-body img{

    min-height: 379px;

    object-fit: cover;

}



}



@media (max-width: 756px) {

    .accordion-body img{

        min-height: 379px;

        object-fit: cover;

    }

    

    

    }

/**************lienzo digital**********/

.lienzo-digital{

    position: relative;

     background-attachment: fixed;

     background-position: 50% 23%;

     background-size: 93%;

}

.lienzo-pxl{

    position: absolute;

    top: 20px;

}

@media (max-width: 767px) {

    .lienzo-pxl img{

        top: 10px;

        height: 20px;

    }

     .lienzo-digital{          

            background-size: auto !important;

        }

}

/*********form**************/

input[type=text],input[type=email],input[type=tel], textarea{

    background: inherit;

    border: none;

    border-bottom: 2px solid #050301;    

}

textarea{

    resize: none;

    width:100%;

}

input[type=submit]{

    background: rgba(255, 255, 255, 0);

    border: none;

    color: inherit;

    /* transition: linear 0.2s; */

}

/***footer******/

footer a, footer p{

    color: rgb(255, 255, 255) !important;

}

footer a:hover{

    font-weight: 700;

}





/* Estilo para el fondo de la barra de desplazamiento en WebKit */

::-webkit-scrollbar {

  width: 12px;

}



::-webkit-scrollbar-track {

  background-color: #FFFDFA; /* Fondo */

}



::-webkit-scrollbar-thumb {

  background-color: #050301; /* Barra */

}



body {

  scrollbar-color: #050301 #FFFDFA;

  scrollbar-width: thin;

}