/*
Theme Name: JP Asesores
Author: JP Asesores
Author URI: https://bootscore.me
Description: A powerful Bootstrap 5 WordPress Starter Theme with WooCommerce Support. <a href="https://bootscore.me/category/documentation/" target="_blank">Documentation</a>. This theme gives you full control whatever you do and the full freedom to design whatever you want. It comes with a wide selection of category, page, post, author and archive templates as well as sidebar, header, footer and 404 widgets. There are no customizer settings in the backend. All settings can only be made by touching the code. Some CSS, HTML, PHP and JS Skills are required to customize it.
Version: 5.3.4
Requires at least: 5.0
Tested up to: 6.4.1
Requires PHP: 7.4
License: MIT License
License URI: https://github.com/bootscore/bootscore/blob/main/LICENSE
Text Domain: bootscore
Tags: featured-images, threaded-comments, translation-ready

Use this theme to make something cool, have fun, and share what you've learned with others.

JP Asesores is based on Underscores https://underscores.me/, (C) 2012-2022 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* 
All style editing is done via scss/_bscore_custom.scss
*/



:root{
    --black: #111111;
    --black2: #3b3b3a;
    --red: #e7302b;
    --coffee: #beaca8;

    --gray: #d9d7d2;

    --scale-factor: 1;
    --px14: calc(0.875rem * var(--scale-factor));
    --px16: calc(1rem * var(--scale-factor));
    --px18: calc(1.125rem * var(--scale-factor));
    --px20: calc(1.25rem * var(--scale-factor));
    --px22: calc(1.375rem * var(--scale-factor));
    --px24: calc(1.5rem * var(--scale-factor));
    --px26: calc(1.625rem * var(--scale-factor));
    --px28: calc(1.75rem * var(--scale-factor));
    --px30: calc(1.875rem * var(--scale-factor));
    --px32: calc(2rem * var(--scale-factor));
    --px34: calc(2.125rem * var(--scale-factor));
    --px36: calc(2.25rem * var(--scale-factor));
    --px38: calc(2.375rem * var(--scale-factor));
    --px40: calc(2.5rem * var(--scale-factor));
    --px45: calc(2.8125rem * var(--scale-factor));
    --px50: calc(3.125rem * var(--scale-factor));

}

@font-face {
    font-family: 'Abel';
    src: url(fonts/Abel-Regular.ttf);
}

@font-face {
    font-family: 'Zef';
    src: url(fonts/ZefaniStencil-Regular.otf);
}


html, body {
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body{
    color: var(--black);
    font-family: 'Abel', sans-serif;
    font-size: var(--px20);
}

b, strong{
    font-weight: bold
}

.abel{
    font-family: 'Abel', sans-serif;
}

.zef{
    font-family: 'Zef', sans-serif;
}

.bg-black{
    background-color: var(--black)
}

.bg-gray{
    background-color: var(--gray)
}
.bg-red{
    background-color: var(--red)
}
.bg-coffee{
    background-color: var(--coffee)
}


.text-black{
    color: var(--black)!important
}
.text-black2{
    color: var(--black2)!important
}

.text-red{
    color: var(--orange)
}



a{
    text-decoration: none;
    color: var(--black)
}

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

.fs-14 {
    font-size: var(--px14);
}
.fs-18 {
    font-size: var(--px16);
}
.fs-18 {
    font-size: var(--px18);
}
.fs-20 {
    font-size: var(--px20);
}
.fs-22 {
    font-size: var(--px22);
}
.fs-24 {
    font-size: var(--px24);
}
.fs-26 {
    font-size: var(--px26);
}
.fs-28 {
    font-size: var(--px28);
}
.fs-30 {
    font-size: var(--px30);
}
.fs-32 {
    font-size: var(--px32);
}
.fs-34 {
    font-size: var(--px34);
}
.fs-36 {
    font-size: var(--px36);
}
.fs-38 {
    font-size: var(--px38);
}
.fs-40 {
    font-size: var(--px40);
}
.fs-45 {
    font-size: var(--px45);
}
.fs-50 {
    font-size: var(--px50);
}


.bl{
    border-left: 1px solid #000
}
.br{
    border-right: 1px solid #000
}
.bt{
    border-top: 1px solid #000
}
.bb{
    border-bottom: 1px solid #000
}




#bootscore-navbar li a{
    color: var(--black);
    font-size: var(--px22)
}


#footer-menu li a:hover,
#bootscore-navbar li.current-menu-item a,
#bootscore-navbar li a:hover{
    color: var(--red);
}


.phone-header{
    position: relative
}

.phone-header:after{
    position: absolute;
    content: "";
    height: 20px;
    width: 1px;
    background-color: #000;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

#footer-menu li a{
    color: var(--black)
}

#footer-menu li{
    flex-grow: 1
}

.the-custom-logo img{
    width: 300px
}

#content{
    margin-top: 112px
}

.bf{
    border-top: 4px solid #b3aba3
}

.footer-img img{
    width: 250px;
    max-width: 100%
}

.caption{
    position: absolute!important;
    width: 100%;
    left: 0;
    bottom: 4rem;
    padding: 1rem 1.5rem;
    background-color: rgba(255,255,255,.7)
}

.caption-title{
    font-family: 'Zef', sans-serif;
    font-size: var(--px40);
    color: var(--black2)
}

.the-custom-logo img,
#nav-main{
    transition: all .15s linear
}

.to-fixed #nav-main{
    padding: 0;
    box-shadow: 0px 0px 7px 0px rgba(0,0,0,.3);
    border: 0!important
}

.to-fixed .the-custom-logo img{
    width: 280px
}

.w-100 > img{
    width: 100%
}

.home #nav-main{
    border-bottom: 0
}


.center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}



.wpcf7 label{
    display: block;
    font-size: var(--px22)
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-acceptance){
    padding: 6px 15px;
    border: 1px solid var(--bs-black);
    border-radius: 2px;
    width: 100%;
    border-radius: 0
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-acceptance):not(.wpcf7-submit){
    background-color: transparent
}


.wpcf7-list-item{
    margin-left: 0
}

.wpcf7 .wpcf7-submit{
    background-color: #fff;
    color: var(--bs-black);
    border: 1px solid var(--bs-black);
    min-width: 180px;
    width: auto!important;
    padding: 5px 15px;
    line-height: 1
}

.wpcf7-submit:hover{
    opacity: .7
}

input:not(.wpcf7-submit){
    font-size: var(--px20)
}

.wpcf7-list-item-label{
    font-size: 16px
}

.wpcf7-textarea{
    height: 245px;
    font-size: var(--px20)
}

.wpcf7-list-item input{
    vertical-align: middle!important;
    display: inline-block
}

.wpcf7-form-control-wrap {
    position: relative;
    margin-top: 7px;
    display: block;
}

.form-last {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.text-privacy{
    font-size: 12px;
    text-align: justify
}

form .wpcf7-not-valid-tip{
    font-size: 13px
}


input[type=checkbox], input[type=radio] {
    position: relative;
    border: 2px solid #000;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    opacity: .5;
    border-radius: 10px
}

input[type=radio]{
    border-radius: 0;
    border: 1px solid #000;
    height: 16px;
    width: 16px;
}

input[type=checkbox]:hover, input[type=radio] {
    opacity: 1;
}

input[type=checkbox]:checked, input[type=radio]:checked {
    background-color: #fff;
    opacity: 1;
}


input[type=checkbox]:checked:before, input[type=radio]:checked:before {
    content: '';
}

input[type=checkbox]:before, input[type=radio]:before  {
    position: absolute;
    right: 50%;
    top: 50%;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}

.box-servicio{
    position: relative
}

.box-servicio a{
    width: 100%;
    background-color: transparent;
    border: 0;
    padding: 0
}

.box-servicio a:hover{
    color: #333;
    opacity: .9
}

.box-header .number span{
    color: #fff;
    width: 130px;
    height: 130px;
    font-weight: 600
}

.content-servicios > div:first-child:before{
    display: none
}

.box-servicio:before{
    position: absolute;
    content: "";
    width: 100vw;
    height: 1px;
    background-color: #000;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}



.box-subtitle{
    background-color: var(--black2);
    color: #fff
}

.box-description{
    background-color: #f3eeeb
}

.box-description ul{
    list-style: none
}

.box-description ul li{
    position: relative;
}

.box-description ul li:after{
    position: absolute;
    content: "";
    left: -2rem;
    top: 10px;
    width: 12px;
    height: 12px;
    background-color: var(--black);
}

.box-arrow{
    width: 49px;
    font-size: 30px;
    border: 1px solid #000;
    color: var(--coffee);
    padding: 0 15px
}

.cont-img-contact{
    padding-bottom: 4rem
}

.cont-img-contact figure{
    padding-bottom: 2rem;
}

.cont-img-contact figure:after,
.cont-img-contact:before{
    position: absolute;
    content: "";
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
    background-color: #ece4e2;
    height: calc(50% + 3rem);
    bottom: 0;
    z-index: -1
}

.cont-img-contact figure:after {
    background-color: #777779;
    width: calc(100% + 4rem);
    left: -2rem;
    margin-left: 0;
    height: calc(50% - 2rem);
}

@media screen and (max-width: 1400px) {
    :root {
        --scale-factor: 0.9; /* Ajuste de escala para pantallas menores a 1400px */
    }
}


@media (max-width: 991px){
    .offcanvas-header{
        background-color: var(--red);
        color: #fff
    }

    .offcanvas-header .btn-close{
        filter: invert(1);
        opacity: 1
    }

    .header-actions .btn{
        border-radius: 0;
        font-size: 24px;
        line-height: 1.2
    }

    .phone-header:after{
        display: none
    }
}


@media (max-width: 767px){
    .row-md > div{
        flex: 0 0 auto;
        width: 100%
    }

    .img-p{
        margin-bottom: 0
    }

    .left-footer{
        border: 0
    }
    #footer-menu{
        text-align: center
    }
    .box-header{
        flex-wrap: wrap;
        align-items: center
    }

    .box-header .number span {
        width: 80px;
        height: 80px;
    }

    .box-subtitle{
        font-size: var(--px22)
    }

    .box-servicio a.d-block{
        width: auto;
        flex: 1 0 0%;
    }

    .box-title{
        margin-bottom: 0
    }

}


@media (max-width: 575px){
    .cont-subtitle{
        align-items: center
    }
    .box-arrow{
        padding: 5px
    }
}

a.text-start.collapsed .fa-caret-down {
    transform: rotateZ(0);
    transition: transform .5s ease;
}


a.text-start .fa-caret-down {
    transform: rotateZ(-180deg);
    transition: transform .5s ease;
}