/*
Theme Name: Base
Theme URI: https://www.invbit.com
Author: Base
Author URI: https://www.invbit.com
Description: Base para Betheme
Template: betheme
Version: 1.6.2
*/

/*** GENERAL ***/
    html{ scroll-behavior: smooth; }
    .validate_email_against_bot { display: none; }

    #Side_slide .close-wrapper { height: auto; margin-bottom: 1rem; }
    #Side_slide .close-wrapper button.close { height: calc( (34 / 16) * 1rem ); width: calc( (34 / 16) * 1rem ); display: block; margin: 13px 13px 0 auto; background: transparent; padding: 0; font-size: 30px; }
    #Side_slide .close-wrapper button.close i { font-size: 22px; line-height: calc( (34 / 16) * 1rem ); }
    #Side_slide .search-wrapper button.submit { position: absolute; top: 0; right: 5px; font-size: calc( (20 / 16) * 1rem ); padding: 10px; background: transparent; }

    #Top_bar button.responsive-menu-toggle { display: none; position: absolute; right: 15px; top: 50%; margin-top: -17px; width: calc( (34 / 16) * 1rem ); height: calc( (34 / 16) * 1rem ); text-align: center; border-radius: 3px; z-index: 200; padding: 0; box-shadow: none; }
    #Top_bar button.responsive-menu-toggle span { font-size: 22px; line-height: calc( (34 / 16) * 1rem ); }
    #Top_bar .search_wrapper button[type="submit"] { display: none; }

    :root{
        --verde: #8CB62B;
        --verdeOscuro: #3B6841;
        --negro: #1E1E2D;
        --gris: #A1A5B7;
        --fondoGris: #F5F8FA;

        --pad-100: 100px 0px;
        --100: 100px;
        --40: 40px;

    }

    .verde{ color: var(--verde) !important; }

    .tituloH2 h2{ text-transform: uppercase; font-size: 16px !important; line-height: 16px !important; font-weight: 700; letter-spacing: 0.01em; }

    .pad-100{ padding: var(--pad-100); }
    .pad-100-top{ padding-top: var(--100); }
    .pad-100-bottom{ padding-bottom: var(--100); }
    .pad-40-bottom{ padding-bottom: var(--40); }


    /*Botones*/
    .column_button .button{ text-transform: uppercase; cursor: pointer; position: relative; z-index: 1; overflow: hidden; }
    .column_button .button:hover{ color: var(--verde); background-color: var(--verde) !important; }
    .column_button .button:after{ content: ""; background: #fff; position: absolute; z-index: -1; left: -20%; right: -20%; top: 0; bottom: 0; transform: skewX(-45deg) scale(0, 1); transition: all 0.5s; }
    .column_button .button:hover:after{ transform: skewX(-45deg) scale(1, 1); -webkit-transition: all 0.5s; transition: all 0.5s; }

    /*Cabecera*/
    #Subheader{ height: 30vh; }
    #Subheader .container{ display: flex; flex-direction: column; justify-content: center; }


    /*Complianz*/
    #cmplz-document{ font-size: 16px; max-width: 100%; padding: var(--pad-100); }
    #cmplz-document p, #cmplz-document li, #cmplz-document td{ font-size: 16px; color: var(--negro); }
    #cmplz-document h2{ font-size: 40px; line-height: 42px; font-weight: 600; margin-top: var(--40); border: unset; } 
    .legales h2{ font-size: 40px; line-height: 42px; margin-top: var(--40);  }

    .cmplz-cookiebanner .cmplz-message{ font-size: 12px !important; }
    .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title{ font-size: 14px !important; font-weight: 600 !important; }
    .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after{ top: 2px !important; }
    .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before{ top: 0px !important; }
    .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description{ font-size: 12px !important; line-height: 14px !important; }

    #cmplz-manage-consent .cmplz-manage-consent{ background-image: url(imagenes/fondo-ajustes.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; right: unset !important; left: 0px; 
        font-size: 0px; color: #fff !important; width: 140px; background-color: transparent !important; box-shadow: unset !important; bottom: -2px !important; padding: 0 !important; }
    #cmplz-manage-consent .cmplz-manage-consent:before{ content: ""; background-image: url(imagenes/icono-ajustes.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; width: 28px; height: 28px;
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.8s ease; }
    #cmplz-manage-consent .cmplz-manage-consent:hover:before{ transform: translate(-50%, -54%); }



/*** MENU ***/
    #Top_bar{ border-bottom: unset !important; }
    #Top_bar .top_bar_left{ display: flex; justify-content: flex-start; align-items: center; }
    #Top_bar .logo{ margin: 0 !important; }
    #Top_bar .menu_wrapper { width: 100%; display: flex; justify-content: center; align-items: center; }
    #Top_bar .menu > li > a:not(.menu-toggle):after{ background: var(--verde) !important; bottom: 0 !important; width: 80% !important; left: 50% !important; transform: translateX(-50%); }

    #Top_bar.is-sticky #logo img.logo-sticky{ max-height: 50px !important; }

    #Top_bar .top_bar_right .action_button{ text-transform: uppercase; padding: 10px 20px!important; line-height: 15px!important; cursor: pointer; position: relative; z-index: 1; overflow: hidden; margin-left: 20px !important; }
    #Top_bar .top_bar_right .action_button:hover{ color: var(--verde); background-color: var(--verde) !important; }
    #Top_bar .top_bar_right .action_button:after{ content: ""; background: #fff; position: absolute; z-index: -1; left: -20%; right: -20%; top: 0; bottom: 0; transform: skewX(-45deg) scale(0, 1); transition: all 0.5s ease; }
    #Top_bar .top_bar_right .action_button:hover:after{ transform: skewX(-45deg) scale(1, 1); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
    #Top_bar .top_bar_right .enlace{ font-size: 18px; letter-spacing: 0.01em; color: var(--negro); font-weight: 500; display: flex; justify-content: center; align-items: center; gap: 10px; }
    #Top_bar .top_bar_right .enlace .icono{ background-image: url(imagenes/icono-telefono-negro.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; width: 16px; height:16px; }



/*** FOOTER ***/
    #Footer .widgets_wrapper .container{ display: grid; grid-template-columns: repeat(3, 1fr); }
    #Footer .widgets_wrapper .container .one-third.column{ width: 100%; display: flex; flex-direction: column; justify-content: center; }
    #Footer .widgets_wrapper .container .one-third.column:nth-child(2) .mcb-column-inner{ width: fit-content;  margin: auto; }
    #Footer .widgets_wrapper .widget{ margin: 0 !important; }
    #Footer .widgets_wrapper #block-3 p{ margin-bottom: 0; }
    #Footer .widgets_wrapper #block-3 p > a{ font-size: 26px; font-weight: 700; line-height: 26px; letter-spacing: 0.01em; }
    #Footer .widgets_wrapper #block-4 p{ margin-bottom: 0; font-weight: 500; letter-spacing: 0.01em; }
    #Footer .widgets_wrapper #block-5 p{ margin-bottom: 0; text-align: right; }
    #Footer .widgets_wrapper #block-5 p > a{ font-size: 24px; font-weight: 500; line-height: 24px; letter-spacing: 0.01em; }
    #Footer .widgets_wrapper #block-6 img{ max-height: 80px; width: auto; }
    #Footer .widgets_wrapper #block-7 p{ margin-bottom: 0; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; font-size: 12px; }

    #Footer .footer_copy{ background-color: var(--verdeOscuro); border-top: unset; }
    #Footer .footer_copy .one{ min-height: unset !important; margin-bottom: 15px !important; padding-top: 15px !important; }
    #Footer .footer_copy .one .mcb-column-inner{ margin: 0 !important; }
    #Footer .footer_copy .social{ display: none; float: unset; }
    #Footer .footer_copy .copyright{ float: unset; display: flex; justify-content: center; align-items: center; flex-wrap: wrap-reverse; width: 100%; gap: 10px; }
    #Footer .footer_copy .copyright p{ margin-bottom: 0; color: #fff; font-size: 14px; line-height: 15px; font-weight: 500; }
    #Footer .footer_copy .copyright ul{ display: flex; justify-content: center; align-items: center; gap: 10px; }
    #Footer .footer_copy .copyright ul li a{ color: #fff; font-size: 14px; line-height: 14px; font-weight: 500; position: relative; }
    #Footer .footer_copy .copyright ul li a:before{ content: ""; height: 75%; width: 1px; background-color: #fff; position: absolute; left: -5px; top: 50%; transform:translateY(-50%); }


/*** INICIO ***/
    .portada{ padding-top: var(--40); padding-bottom: var(--40); }
    .portada.section.full-width > .section_wrapper{ max-width: 90% !important; }
    .portada .col-texto .mcb-wrap-inner{ max-width: 430px; margin: auto; }
    .portada .col-texto p{ font-size: 22px; line-height: 24px; color: var(--gris); letter-spacing: 0.01em; font-weight: 600; margin: 30px 0; }
    .portada .button:after{ background: var(--fondoGris); }

    .casos-exito .gallery{ display: grid; grid-template-columns: repeat(4, 1fr); }
    .casos-exito .gallery .gallery-item{ width: 100% !important; margin: 0 !important; overflow: visible; float: unset; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .casos-exito .gallery .gallery-item img{ max-height: 80px !important; width: auto !important; margin: auto !important; }

    .por-que .section_wrapper, .ventajas .section_wrapper{ display: grid; grid-template-columns: 1fr 2fr; grid-gap: 0 55px; }
    .por-que .section_wrapper .mcb-wrap, .ventajas .section_wrapper .mcb-wrap{ width: 100% !important; }
    .titulo-num p{ font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; display: flex; justify-content: flex-start; align-items: center; gap: 45px; margin-bottom: 40px; }
    .titulo-num p .numero{ color: var(--verde); }
    .titulo-num p .texto{ position: relative; }
    .titulo-num p .texto:before{ content: ""; width: 20px; height: 1px; background-color: var(--negro); position: absolute; top: 50%; transform: translateY(-50%); left: -33px; }
    .por-que .texto p, .ventajas .texto p{ color: var(--gris); }
    .por-que .texto p strong, .ventajas .texto p strong{ color: var(--negro); }

    .cont-iconos .mcb-wrap-inner{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 25px 15px; }
    .cont-iconos .icono-box{ width: 100% !important; height: 100%; }
    .cont-iconos .icono-box .mcb-column-inner{ margin: 0; height: 100%; }
    .cont-iconos .icono-box .mfn-icon-box{ height: 100%; background-color: #fff; border: 1px solid #E4E6EF; border-radius: 10px; padding: 25px; }
    .cont-iconos .icono-box .mfn-icon-box .icon-wrapper{ margin-bottom: 25px; }
    .cont-iconos .icono-box .mfn-icon-box .desc-wrapper{ text-align: left; }
    .cont-iconos .icono-box .mfn-icon-box .desc-wrapper h4{ font-size: 18px; line-height: 22px; font-weight: 500; }
    .cont-iconos .icono-box .mfn-icon-box .desc-wrapper .desc{ font-size: 14px; font-weight: 400; line-height: 18px; color: var(--gris); }
    .cont-iconos .icono-box .mfn-icon-box:hover, .cont-iconos .icono-box .mfn-icon-box:hover .icon-wrapper{ transform: scale(1) !important; }
    .cont-iconos .icono-box .mcb-item-icon_box_2-inner:after { content: ""; display: block; position: absolute; width: 84%; height: 4px; background: linear-gradient(90deg, transparent, #8CB62B 30%, transparent) no-repeat; background-position-x: 0; 
        bottom: -1px; left: 50%; transform: translateX(-50%); z-index: -1; box-shadow: -5px -5px 15px #8CB62B; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
    .cont-iconos .icono-box .mcb-item-icon_box_2-inner:hover:after{ background-position-x: 45px; }

    .ventajas .cont-iconos .mcb-wrap-inner{ grid-template-columns: repeat(2, 1fr); grid-gap: 15px 25px; }

    .cont-video .content_video.iframe.auto-wh{ border-radius: 10px; border: 8px solid #fff; }
    .cont-video .content_video.iframe.auto-wh iframe{ border-radius: 10px; }

    .solicita-demo .section_wrapper:after{ content: "";  background-image: url(imagenes/delagros-deco.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; width: 50px; height: 50px; 
        position: absolute; top: 20px; left: -20px; visibility: visible; transform: rotate(-10deg); }
    .solicita-demo .section_wrapper:before{ content: ""; background: var(--fondoGris); border: 2px solid rgba(140, 182, 43, 0.2); box-shadow: 0px -2px 27px rgba(0, 0, 0, 0.04); border-radius: 20px; width: 100%; height: 275px;
        position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
    .solicita-demo .section_wrapper{ padding: 0 40px;  }
    .solicita-demo h3{ max-width: 380px; }
    .solicita-demo .button:after{ background: var(--fondoGris); }


/*** CONTACTO ***/
    .contacto-portada{ margin-bottom: 100px; padding: 100px 0 0; }
    .contacto-portada .mfn-shape-divider[data-name=bottom]{ transform: rotate(0deg); bottom: -150px; }
    .contacto-portada h2{ text-align: center; max-width: 900px; margin: 0 auto 30px; }
    .contacto-portada p{ text-align: center; max-width: 900px; margin: auto; font-size: 22px; line-height: 24px; color: var(--gris); letter-spacing: 0.01em; font-weight: 600; }

    .politicas p{ font-size: 12px; line-height: 14px; color: var(--negro); }

    span.wpcf7-form-control-wrap { display: inline-block; color: var(--negro); position: relative; }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance{ line-height: 20px; }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox] { position: absolute; visibility: hidden; width: 20px; height: 20px; top: 0; left: 0; }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox] + span:before { display: block; position: absolute; content: ''; border-radius: 0; height: 20px; width: 20px;
        top: 0px; left: 0px; background: transparent; border: 1px solid var(--verde); }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox] + span:after { display: block; position: absolute; content: "\2713"; height: 20px; width: 20px; top: 0px; left: 0;
        visibility: hidden; font-size: 16px; text-align: center; line-height: 20px; color: #fff; }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox]:checked + span:before { background: var(--verde); }
    span.wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-acceptance input[type=checkbox]:checked + span:after { visibility: visible; }
    .wpcf7-list-item-label { margin-left: 20px; display: inline-block; }

    .contacto-form .wpcf7-submit.button{ display: block; margin: 40px auto 0; width: fit-content; text-transform: uppercase; cursor: pointer; position: relative; z-index: 1; overflow: hidden; }
    .contacto-form .wpcf7-submit.button:hover{ color: var(--verde); background-color: var(--verde) !important; }
    .contacto-form .wpcf7-submit.button:after{ content: ""; background: #fff; position: absolute; z-index: -1; left: -20%; right: -20%; top: 0; bottom: 0; transform: skewX(-45deg) scale(0, 1); transition: all 0.5s; }
    .contacto-form .wpcf7-submit.button:hover:after{ transform: skewX(-45deg) scale(1, 1); -webkit-transition: all 0.5s; transition: all 0.5s; }


/*** RESPONSIVE ***/

    @media(max-width: 1239px){

        .cont-iconos .mcb-wrap-inner{ grid-template-columns: repeat(2, 1fr); }
        .solicita-demo .section_wrapper { padding: 0 20px; }
        .solicita-demo .section_wrapper:after{ top: -20px; left: -25px; }
        .solicita-demo p{ max-width: 540px; }
        .solicita-demo .image_frame, .solicita-demo .image_frame .image_wrapper{ overflow: visible; }
        .solicita-demo .image_frame .image_wrapper img{ transform: scale(1.27) !important; }

        #Footer .footer_copy .copyright ul li:first-child a:before{ content: unset; }
    }

    @media(max-width: 1024px){

        h2{ font-size: 48px !important; line-height: 48px !important; }

        /*MENU*/
        #Top_bar button.responsive-menu-toggle { display: block; }

        #Side_slide { width: 80% !important; right: -100% !important; transition: all 1s ease; display: flex; flex-direction: column; }
        body.side-slide-is-open #Side_slide {  right: 0 !important; }
        body.mobile-side-slide{ left: 0 !important; }
        #Side_slide #menu ul li, #Side_slide #menu>ul:last-child>li:last-child{ border-top: unset !important; }
        #Side_slide #menu ul li a{ text-align: right; }

        #Side_slide .extras{ display: none; }

        /*INICIO*/
        .por-que .section_wrapper, .ventajas .section_wrapper{ grid-gap: 0 30px; }
    }

    @media(max-width: 959px){

        #Footer .footer_copy .copyright ul{ gap: 0 10px; flex-wrap: wrap; }

        .portada.section.full-width > .section_wrapper .mcb-wrap{ width: 100%; }
        .portada .col-texto .mcb-wrap-inner { max-width: 100%; margin-bottom: 30px; }
        .por-que .section_wrapper, .ventajas .section_wrapper{  grid-template-columns: repeat(1, 1fr); grid-gap: 30px; }
        .solicita-demo .section_wrapper:after { top: -50px; left: -25px; transform: rotate(0deg); }
        .solicita-demo .section_wrapper:before{ height: 300px; }
        .solicita-demo p { max-width: 350px; }
        .solicita-demo .image_frame .image_wrapper img { transform: scale(1.95) !important; }

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

        /*MENU*/
        #Top_bar .top_bar_right .enlace .texto{ display: none }
        .mobile-header-mini #Top_bar button.responsive-menu-toggle { top: 30px!important; left: auto; right: 10px; margin-top: -20px; }
        .mobile-header-mini #Top_bar a.action_button{ display: block !important; }

        .portada .col-texto p{ margin: 0px 0 30px; }
        .casos-exito .gallery{ grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }
        .solicita-demo .section_wrapper{ flex-wrap: wrap-reverse; }
        .solicita-demo .image_frame .image_wrapper img { transform: scale(1) !important; margin-bottom: 30px; }
        .solicita-demo h3, .solicita-demo p { max-width: 100%; }
        .solicita-demo .section_wrapper:before { height: 620px; }

        #Footer .widgets_wrapper .container{ grid-template-columns: repeat(1, 1fr); }
        #Footer .widgets_wrapper .container .one-third.column, #Footer .widgets_wrapper #block-5 p{ text-align: center; }
        #Footer .widgets_wrapper .container .one-third.column:nth-child(1){ order: 1; margin-bottom: 20px; }
        #Footer .widgets_wrapper .container .one-third.column:nth-child(2){ order: 3; }
        #Footer .widgets_wrapper .container .one-third.column:nth-child(3){ order: 2; margin-bottom: 20px; }
        
    }
    @media(max-width: 480px){

        /*CREDITOS*/
        #creditos .cabecera .titulos h1{ padding-right: 0px !important; line-height: 25px !important; }
        #creditos .cabecera .titulos h2{ padding-right: 0px !important; font-size: 12px !important; line-height: 16px !important; }
        #creditos .phone, #creditos .cabecera .titulos{ left: 20px !important; }
        #creditos .interior { padding: 20px 20px 20px 20px !important; }
        #creditos .cabecera .icono{ width: 50px !important; height: 50px !important; bottom: 95px !important; line-height: 72px !important; }
        #creditos .cabecera .icono img{ width: 35px !important; }

        :root{
            --pad-100: 40px 0px;
            --100: 40px;
            --40: 20px;
        }

        h2, #Subheader .title { font-size: 40px !important; line-height: 40px !important; }

        .mobile-header-mini #Top_bar a.action_button{ display: none !important; }
        #Side_slide .extras{ display: block; }
        #Side_slide .extras .action_button{ margin-bottom: 0 !important; text-transform: uppercase; cursor: pointer; position: relative; z-index: 1; overflow: hidden; }
        #Side_slide .extras .action_button:hover{ color: var(--verde); background-color: var(--verde) !important; }
        #Side_slide .extras .action_button:after{ content: ""; background: #fff; position: absolute; z-index: -1; left: -20%; right: -20%; top: 0; bottom: 0; transform: skewX(-45deg) scale(0, 1); transition: all 0.5s; }
        #Side_slide .extras .action_button:hover:after{ transform: skewX(-45deg) scale(1, 1); -webkit-transition: all 0.5s; transition: all 0.5s; }

        .portada .col-texto p { margin: 0px 0 20px; }
        .titulo-num p{ margin-bottom: 20px;  }
        .cont-iconos .mcb-wrap-inner, .ventajas .cont-iconos .mcb-wrap-inner{ grid-template-columns: repeat(1, 1fr); }
        .solicita-demo .image_frame .image_wrapper img{ margin-bottom: 20px; }
        .solicita-demo .section_wrapper { padding: 20px; }
        .solicita-demo .section_wrapper:before { left: 50%; height: 670px; width: 95%; transform: translate(-50%,-50%); }
        .solicita-demo .section_wrapper:after{ top: -20px; left: 2px; }

        .contacto-portada { margin-bottom: 40px; padding: 40px 0 0; }
        .contacto-portada .mfn-shape-divider[data-name=bottom]{ bottom: -60px; }
        .contacto-portada .mfn-shape-divider[data-name=bottom] svg{ height: 60px; }

        #Footer .widgets_wrapper { padding: 25px 0; }
        #Footer .widgets_wrapper .container .one-third.column .mcb-column-inner{ margin: 0 !important; }
        #Footer .widgets_wrapper #block-5 p > a{ font-size: 22px; }
        #Footer .widgets_wrapper .container .one-third.column:nth-child(2) .mcb-column-inner{ width: 100%; }

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

        .solicita-demo .section_wrapper:before{ height: 620px; }
        
    }