/**
 * Theme Name:        Hunting y DO
 * Description:       Agencia de marketing digital
 * Version:           1.0.0
 * Author:            Bárbara Cremades
 * Author URI:        https://example.com
 * Tags:              Responsive Layout, full-site-editing
 * Text Domain:       fabled-sunset
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */


 :root {
    /*========== Colors ==========*/
    --color-primary: #2062ae;
    --color-secondary: #59A0DA;
    --color-tertiary: #ED7037;
    --color-quaternary: #FFD028;
    --color-background: #dee8f3;
    --color-background-menu:#e7edf5;
    --color-text-background: #ECEFF6;
    --color-subtitle:#4f5769;
    --color-text: #393f4c;
    --color-submenu-background: rgb(55, 64, 71);
    --color-contact-background: rgb(53, 105, 183);
    --color-contact-background-overlay: rgba(53, 105, 183,0.9);
    --color-contact-background-overlay-footer:rgba(53, 105, 183, 0.94);
    --color-contact-text: #FBFCFE;
    
    /*========== Font and typography ==========*/
    --h1-font-size: 2.5rem;
    --title: 2rem;
    --sub-title: 1.75rem;
    --medium-large-font-size: 1.125rem;
    --font-size-base: 1rem;
    --normal-font-size: 1rem;
    --title-overlay-who-we-are: 2.5rem;
    --title-header-page: 2.4rem;
    --caption-header-page: 1.125rem;
    
    /*========== Line height ==========*/
    --line-height: 2;
    
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;

    /*========== Line title ==========*/

    --line-title: 1.75rem;
    
    /*========== Font weight ==========*/
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
}

@media screen and (max-width: 730px) {
    :root {
        --sub-title: 1.5rem;
        --title-overlay-who-we-are: 1.875rem;
        /*========== Line title responsive ==========*/
        --line-title: 1.5rem;
    }
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    
}

div {
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    box-sizing: border-box;
    display: inline-block;
}

img {
    max-width: 100%;
    height: auto;
}


span {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text);
    padding-top: 130px;
}

main{
    overflow: hidden;/*For animation*/
}

header{
    overflow: hidden;/*For animation*/
}

.section{
    max-width: 67.5rem;
    margin: auto;
}

/*=============== MENÚ ===============*/
.nav-bar{
    position: fixed;
    z-index: 1000;
    top: 0px;
    width: 100%;
}

.nav-bar__button {
    display: flex;
    width: 100%;
    top: 0;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 4px 18px;
    cursor: pointer;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 6px 0px;
}
.nav-bar__logo--mobile.shrink__mobile {
    width: 58%;
}

.nav-bar__logo--mobile {
    display: block;
    width: 88%;
    max-width: 99px;
    transition: width 0.3s ease;
}

.nav-bar__contact-menu{
    display: flex;
    gap: 10px;
}


.main-nav__logo-img {
    display: none;
}

.nav-bar__contact-company {
    display: block;
    font-size: 1rem;
    padding: 0.8125rem 1.125rem;
    background: var(--color-primary);
    color: var(--color-contact-text);
    text-decoration: none;
    border-radius: 6.25rem;
    font-weight: var(--font-weight-medium);
    margin-right: 1.125rem;
}

.nav-bar__menu-burger {
    height: 2.75rem;
}

.main-nav__menu, .main-nav__submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav__menu {
    background: var(--color-background-menu);
    width: 100%;
    margin-left: -100%;
    transition: all 0.5s;
    position: absolute;
}

.main-nav__link {
    display: block;
    padding: 1.875rem 2.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    font-size: var(--font-size-base);
    text-decoration: none;
}

.main-nav__link:hover {
    background: var(--color-primary);
    color: var(--color-contact-text);
}

.main-nav__link--shade {
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 6px 0px;
}

.main-nav__submenu .main-nav__link:hover {
    background: #222;
}

.main-nav__submenu {
    height: 0;
    overflow: hidden;
    transition: all 0.3s;
}

.main-nav__submenu .main-nav__submenu-link {
    color: var(--color-text);
    padding-left: 3.125rem;
}

.main-nav__submenu-item {
    background: var(--color-submenu-background);
    padding: 1.25rem;
}

.main-nav--visible {
    margin-left: 0;
}

.main-nav__contact-company-laptop {
    display: none;
}


/*=============== HEADER ===============*/

.header{
    display: grid;
    grid-template-columns: 46% 54%;
    margin: auto;
    height: 37rem;
}

.header__box--text{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 4.625rem;
}

.header__title{
    font-size: var(--h1-font-size);
    color: var(--color-tertiary);
    margin-bottom: 0;
    letter-spacing: 0.05px;
}

.header__caption{
    font-size: var(--medium-large-font-size);
    color: var(--color-subtitle);
    line-height: var(--line-height);
    font-weight: var(--font-weight-medium);
    margin-bottom: 2rem;
}

.header__box-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.header__link{
    padding: 0.8125rem 1.625rem;
    background: var(--color-primary);
    color: var(--color-contact-text);
    text-decoration: none;
    border-radius: 6.25rem;
    font-weight: var(--font-weight-medium);
}


.header__content{
    width: 76%;
}

.header__box--image{
    background: var(--color-contact-background);
    display: flex;
    align-items: center;
}

.header__img{
    width: 73%;
    margin-left: 2.4rem;
    border-radius: 3.75rem 0rem 3.75rem 0rem;
    filter: brightness(0.9) saturate(0.9);
}

/*=============== SERVICES ===============*/

.services{
    background: var(--color-background);
    padding: 5rem 0rem 8rem;
}

.services__title{
    font-size: var(--title);
    color: var(--color-text);
    position: relative;
    margin-left: 1.3125rem;
}

.services__title::before {
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 2rem;
    background-color: var(--color-tertiary);
    border-radius: 0rem 3.75rem 0rem 3.75rem;
    left: -1.375rem;
    top: 0px;
}

.services__caption{
    color: #393f4c;
    font-size: var(--normal-font-size);
    line-height: var(--line-height);
    font-weight: var(--font-weight-medium);
}

.services__section{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 60px;
    margin-top:50px;
}

.services__box{
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 270px;
    height: 280px;
    border-radius: 27px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 6px 0px;
}

.services__icon{
    background: var(--color-primary);
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    cursor: pointer;
}

.services__img-icon{
    display: flex;
}

.services__box-title{
    height: 96px;
}

.services__title-box{
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-subtitle);
    line-height: 1.6;
    text-align: center;
}

/*=============== BENEFICIOS DE LOS SERVICIOS ===============*/
.benefits-services{
    background: #fff url(../img/arrow-background.png) no-repeat center -1px;
    padding: 5rem 0rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.375rem;
}

.benefits-services__title{
    font-size: var(--sub-title);
    text-align: center;
    color: #fff;
    text-shadow: 0px 1px 0.5px rgba(149, 143, 143, 0.5);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.09px;
}

.benefits-services__box{
    display: flex;
    align-items: center;
    background: #FFD028;
    height: 12.25rem;
    padding: 1.5rem 2.125rem;
    line-height: 1.6;
    border-radius: 3.125rem 0rem 3.125rem 0rem;
    max-width: 363px;
}
/*=============== NUESTROS CLIENTES ===============*/
.our-client{
    padding: 4rem 0rem 8rem;
}

.our-client__container{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: space-between;
}

.our-client__box{
    display: flex;
    align-items: center;
    justify-content: center;
}

.our-client__img{
    width: 80%;
}


/*=============== FONDO BENEFICIOS ===============*/

.background-benefits{
    height: 24.375rem;
    width: 100%;
    background-image: url('../img/seleccion-de-personal.webp'); /* Reemplaza con la URL de tu imagen */
    background-attachment: fixed; /* Este es el efecto parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.background-benefits__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-contact-background-overlay); 
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;
}

.background-benefits__container {
    position: relative;
    width: 707px;
    text-align: center;
    color: var(--color-text-background);
}

.background-benefits__title{
    font-size: 2.5rem;
    font-weight: var(--font-weight-semibold);
    text-shadow: 0px 0px 1px rgba(80, 86, 96, 25);
    margin-bottom: 30px;
}

.background-benefits__caption{
    font-size: 1.3rem;
    line-height: var(--line-height);
    font-weight: var(--font-weight-medium);
    text-shadow:0px 0px 1px rgba(80, 86, 96, 25);
}

/*=============== SOBRE NOSOTROS ===============*/

.about-us{
    padding: 4rem 0rem;
}

.about-us__title{
    font-size: var(--title);
    color: var(--color-subtitle);
    margin-left: 1.3125rem;
    position: relative;
    margin-bottom: 60px;
}

.about-us__title::before {
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 2rem;
    background-color: var(--color-tertiary);
    border-radius: 0rem 3.75rem 0rem 3.75rem;
    left: -1.375rem;
    top: 0px;
}

.about-us__container{
    display: grid;
    grid-template-columns: 50% 50%;
}

.about-us__img{
    border-radius: 3.75rem 0rem 3.75rem 0rem;
    width: 94%;
    object-fit: cover;
    height: 360px;
}

.about-us__box-how-we-do-it--content{
    padding: 0px 50px;
}

.about-us__title-how-we-do-it{
    color: var(--color-tertiary);
    font-size: var(--sub-title);
    margin-bottom: 0px;
}

.about-us__content-how-we-do-it{
    font-size: var(--normal-font-size);
    line-height: var(--line-height);
    color: var(--color-subtitle);
    font-weight: var(--font-weight-medium);
    margin: 30px 0px 36px;
}

.about-us__btn-how-we-do-it{
    padding: 13px 26px;
    background: var(--color-primary);
    color: var(--color-contact-text);
    text-decoration: none;
    border-radius: 6.25rem;
    font-weight: var(--font-weight-medium);
}

.about-us__equipment-solution{
    display: grid;
    grid-template-columns: 10% 20% 20% 50%;
    height: 190px;
    margin: 100px 0px;
}

.about-us__box-customers--company{
    background: var(--color-contact-background);
    border-radius: 3.125rem 0rem 3.125rem 0rem;
    color: #fff;
    text-align: center;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 0;
}

.about-us__box-customers--title-solution{
    background: #FFD028;
    color: #fff;
    padding: 40px 80px;
}

.about-us__title-we-achieved{
    font-size: var(--sub-title);
    line-height: 1.6;
    font-weight: var(--font-weight-bold);
    text-shadow: 0px 1px 0.5px rgba(149, 143, 143, 0.5);
    letter-spacing: 0.09px;
}

.about-us__number{
    font-size: 38px;
    font-weight: var(--font-weight-semibold);
    margin: 48px 0px 20px;
}

.about-us__number--margin{
    margin: 42px 0px 20px;
}

.about-us__text{
    font-size: var(--normal-font-size);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.09px;
}

.padding{
    padding: 4px 0px 0px;
}

/*=============== FOOTER ===============*/

footer {
    position: relative; /* Para que el overlay esté posicionado correctamente */
    background-image: url('../img/consultores-de-rrhh-con-experiencia-en-chile.webp'); /* Cambia la ruta por la imagen que desees */
    background-size: cover;
    background-position: center;
    padding: 38px 0px 10px;
    color: #fff;
    text-align: center;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-contact-background-overlay-footer); /* Overlay azul con 50% de transparencia */
    z-index: 1;
}

.footer__content {
    position: relative;
    z-index: 2; /* Para asegurarse de que el contenido esté por encima del overlay */
}

.footer__box-content{
    display: grid;
    grid-template-columns: 30% 30% 40%;
    gap: 20px;
    padding: 48px 0px;
}

.footer__logo{
    display: block;
}

.footer__nav{
    text-align: left;
    padding: 0;
}

.footer__item{
    padding: 0px 0px 28px;
}

.footer__link{
    color: var(--color-text-background);
    font-weight: var(--font-weight-medium);
    text-shadow: 0px 0px 1px rgba(80, 86, 96, 25);
}

.footer__title-contact{
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    margin: 0px 0px 38px;
    text-align: left;
    color: var(--color-text-background);
    text-shadow: 0px 0px 1px rgba(80, 86, 96, 25);
}

.footer__contact{
    display: flex;
    text-align: left;
}

.footer__contact-link{
    color: var(--color-text-background);
    font-weight: var(--font-weight-medium);
    text-shadow: 0px 0px 1px rgba(80, 86, 96, 25);
    margin-left: 16px;
}

.footer__contact--bottom{
    margin-bottom: 28px;
}

.footer__copyright{
    border-top: 1px solid var(--color-text-background);
}

.footer__copyright p{
    text-shadow: 0px 0px 1px rgba(80, 86, 96, 25);
    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
    color: var(--color-text-background);
}

/*=============== BACK TO TOP ===============*/
.back-to-top-btn__container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

#back-to-top-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 2.5rem;
    padding: 1rem;
    background-color: #fff;
    cursor: pointer;
    outline: none;
    border-radius: 0.9375rem;
    box-shadow: 0 3px 26px 0 rgba(0, 0, 0, .08);
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    z-index: 1000;
}

.back-to-top-btn__img{
    width: 16px;
}
  /* Animations */
.btnEntrance {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: btnEntrance;
}

@keyframes btnEntrance {
    from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    }
    to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    }
}

.btnExit {
    animation-duration: 0.25s;
    animation-fill-mode: both;  
    animation-name: btnExit;
}

@keyframes btnExit {
    from {
    opacity: 1;
    }
    to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    }
}

/*================================================*/
/*=============== PÁGINA SERVICIOS ===============*/
/*================================================*/

/*========== HEADER SERVICIOS ==========*/

.main-page-services{
    background: var(--color-background);
}

.header-services__container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-contact-background);
}


.header-services__box{
    height: 400px;
}

.header-services__box--content{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 4.625rem;
}

.header-services__content{
    width: 76%;
}

.header-services__title{
    font-size: var(--title-header-page);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-background);
    letter-spacing: 0.09px;
    margin-bottom: 0;
    text-shadow: 0px 0px 1px rgba(80, 86, 96, 25);
}

.header-services__caption{
    font-size: var(--caption-header-page);
    color: var(--color-text-background);
    line-height: var(--line-height);
    font-weight: var(--font-weight-medium);
    text-shadow: 0px 0px 1px rgba(80, 86, 96, 25);
}

.header-services__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9) saturate(0.9);
}

/*========== CONTENIDO SERVICIOS ==========*/

.contents{
    padding: 3rem 0rem 8rem;
}

.content-services__container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5rem 0rem 0rem;
}

.content-services__information{
    background: #fff;
    padding: 1.875rem;
    border-radius: 2.3125rem;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 6px 0px;
    min-height: 35.3125rem;
}

.content-services__img-information{
    border-radius: 3.75rem 0rem 3.75rem 0rem;
    width: 94%;
    object-fit: cover;
    min-height: 35.3125rem;
    filter: brightness(0.9);
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 6px 0px;
}

.content-services__img-information--saturation{
    filter: brightness(0.9) saturate(0.9);
}



.content-services__title-information{
    font-size: var(--sub-title);
    line-height: 1.6;
    color: #545C6F;
    margin-left: 1.3125rem;
    position: relative;
}

.content-services__information--width{
    width: 94%;
}

.content-services__title-information::before {
    position: absolute;
    content: '';
    width: 0.5rem;
    height: var(--line-title);
    background-color: var(--color-tertiary);
    border-radius: 0rem 3.75rem 0rem 3.75rem;
    left: -1.375rem;
    top: 6px;
}

.content-services__content-information{
    font-size: var(--normal-font-size);
    line-height: var(--line-height);
    color: var(--color-subtitle);
    font-weight: var(--font-weight-medium);
}

/*================================================*/
/*=============== PÁGINA QUIÉNES SOMOS ===============*/
/*================================================*/
.background-benefits__who-we-are{
    height: 32.5rem;
    margin-top: 4rem;
    width: 100%;
    background-image: url('../img/Consultorias estrategicas-de-recursos-humanos.webp');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.background-benefits__overlay-who-we-are {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 23, 24,0.7); 
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;
}

.background-benefits__container-who-we-are {
    position: relative;
    padding: 0rem 1rem;
    width: 64.1875rem;
    text-align: center;
    color: #FEFEFE;
}

.background-benefits__title-who-we-are{
    font-size: var(--title-overlay-who-we-are);
    text-shadow: 0px 0px 1px rgba(80, 86, 96, 25);
    color: #FFE176;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
}

/*================================================*/
/*=============== PÁGINA POSTULA CON NOSOTROS ===============*/
/*================================================*/

/*========== HEADER POSTULA CON NOSOTROS ==========*/
.header-apply{
    height: 300px;
    width: 100%;
    background-image: url('../img/oportunidad-laboral.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.header-apply__company{
    height: 300px;
    width: 100%;
    background-image: url('../img/cotizar-consultores-de-recursos-humanos.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.header-apply__overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--color-contact-background-overlay-footer);
    display: flex;
    align-items: center;
}

.header-apply__content{
    padding-right: 270px;
    padding-left: 16px;
}

.header-apply__content-company{
    padding-right: 494px;
    padding-left: 16px;
}

.form-apply{
    padding: 40px 0px 100px;
}

.form-apply__box-title{
    display: flex;
    justify-content: center;
}

.form-apply__container-form{
    display: flex;
    justify-content: center;
}

.form-apply__box-form{
    width: 700px;
    margin: 0px 16px;
    padding: 1.875rem;
    border-radius: 2.3125rem;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 6px 0px;
    background: #fff;
}

.form-apply__mail{
    display: flex;
    justify-content: center;
}

.form-apply__box-contanct{
    margin: 60px 16px 0px;
    text-align: center;
    width: 702px;
    padding: 20px;
    background: #fff;
    border-radius: 2.3125rem;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 6px 0px;
}

.form-apply__box-contanct p{
    color: var(--color-text);
    font-size: var(--normal-font-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height);
}

.form-apply__link-mail{
    color: var(--color-primary);
    font-size: var(--normal-font-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height);
    text-decoration: none;
}

/*================================================*/
/*=============== PÁGINA CONTACTO EMPRESA ===============*/
/*================================================*/

/*========== CONTENIDO FORMULARIO ==========*/

.form-company__content{
    display: grid;
    grid-template-columns: 46% 54%;
    padding: 4rem 0rem;
    gap: 40px;
}

.form-company__box{
    background: #fff;
    padding: 1rem;
    border-radius: 2.3125rem;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 6px 0px;
}

.form-company__box--contact{
    max-height: 388px;
}

.form-company__paragraph{
    font-weight: var(--font-weight-semibold);
    font-size: var(--medium-large-font-size);
    line-height: var(--line-height);
    color: var(--color-tertiary);
    margin: 0;
}

.form-company__contact{
    display: flex;
    gap: 16px;
    margin-top: 30px;
}

.form-company__link{
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.form-company__form{
    background: #fff;
    border-radius: 2.3125rem;
}

.form-company__link--margin-left{
    margin-left: 7px;
}

.form-company__img-location{
    margin-left: 3px;
}

/* Estilos generales del formulario */
.wpcf7-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
}

/* Estilo de los campos de entrada */
.wpcf7-form-control.wpcf7-text, 
.wpcf7-form-control.wpcf7-email, 
.wpcf7-form-control.wpcf7-tel, 
.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Estilo del botón de envío */
.wpcf7-form-control.wpcf7-submit {
    display: inline-block;
    width: 140px;
    padding: 12px 12px;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wpcf7-form-control.wpcf7-submit:hover {
    background-color: var(--color-primary);
}

/* Estilo para el mensaje de respuesta */
.wpcf7-response-output {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    display: none; /* Se mostrará dinámicamente */
}

/* Mejora de la accesibilidad */
.wpcf7-form-control:focus {
    outline: none;
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Estilos para el contenedor del campo de carga de archivos */
.wpcf7-form-control-wrap[data-name="CargarCV"] {
    position: relative;
    margin-bottom: 15px;
}

/* Estilos para el campo de carga de archivos */
.wpcf7-form-control.wpcf7-file {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: 38px;
}

/* Estilo para el hover y el foco */
.wpcf7-form-control.wpcf7-file:hover, 
.wpcf7-form-control.wpcf7-file:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Ocultar el texto predeterminado del input file */
.wpcf7-form-control.wpcf7-file::file-selector-button {
    display: none;
}

/* Estilo para mejorar la apariencia del texto del archivo seleccionado */
.wpcf7-form-control.wpcf7-file::-webkit-file-upload-button {
    visibility: hidden;
}
.wpcf7-form-control.wpcf7-file::before {
    content: 'Seleccionar archivo';
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 10px;
    outline: none;
    white-space: nowrap;
    cursor: pointer;
    font-size: 16px;
}

.wpcf7-form-control.wpcf7-file:hover::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.wpcf7-form-control.wpcf7-file:active::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Estilos para el contenedor del select */
.wpcf7-form-control-wrap[data-name="AreasDeInteres"] {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

/* Estilos para el select */
.wpcf7-form-control-wrap[data-name="AreasDeInteres"] .wpcf7-form-control.wpcf7-select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    color: #333;
    appearance: none; /* Para eliminar la flecha por defecto en algunos navegadores */
    -webkit-appearance: none; /* Para Webkit (Safari y Chrome) */
    -moz-appearance: none; /* Para Firefox */
    background-image: url('../img/arrow-form.png'); /* Agrega una imagen personalizada para la flecha */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

/* Estilos para la opción seleccionada */
.wpcf7-form-control-wrap[data-name="AreasDeInteres"] .wpcf7-form-control.wpcf7-select option {
    color: #333;
    padding: 10px;
}

/* Estilos en focus */
.wpcf7-form-control-wrap[data-name="AreasDeInteres"] .wpcf7-form-control.wpcf7-select:focus {
    border-color: #66afe9;
    outline: none;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}



@media (max-width: 700px) {
    body {
        padding-top: 82px;
        background: rgb(255, 255, 255);
    }

    .nav-bar__contact-company {
        display: block;
        font-size: calc(1vw + 8px);
        padding: 0.8125rem 12px;
        margin-right: 0px;
    }

    .nav-bar__menu-burger {
        height: 2.50rem;
    }

    .header {
        display: flex;
        flex-direction: column-reverse;
        height: initial;
    }

    .header__img{
        width: 86%;
        margin-left: 0rem;
        max-height: 15.5rem;
        object-fit: cover;
    }

    .header__box--image {
        justify-content: center;
        padding: 76px 0px 40px;
    }

    .header__box--text {
        padding-left: 0rem;
    }

    .header__content {
        width: 100%;
        padding: 16px 16px 70px;
    }

    .header__link{
        padding: 14px 20px;
        font-size: 14px;
    }

    /*=============== SERVICIOS RESPONSIVE ===============*/

    .services__section {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0px 16px;
    }

    .services__content{
        padding: 0px 16px;
    }


    .services__title {
        font-size: 1.7rem;
    }

    .services__title::before {
        height: 1.7rem;
    }

    /*=============== BENEFICIOS SERVICIOS RESPONSIVE ===============*/

    .benefits-services {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 6rem 1rem;
        gap: 2.375rem;
    }

    .benefits-services__box {
        max-width: 19.9375rem;
    }

    /*=============== NUESTROS CLIENTES RESPONSIVE ===============*/

    .our-client__container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .our-client__box{
        padding: 10px 0px;
    }

    .our-client__img{
        width: 70%;
    }

    /*=============== FONDO BENEFICIOS RESPONSIVE ===============*/

    .background-benefits__container {
        padding: 0px 16px;
    }

    .background-benefits__title {
        font-size: 2.3rem;
    }

    .background-benefits__caption {
        font-size: 1.2rem;
    }

    /*=============== ABOUT US RESPONSIVE ===============*/
    .about-us {
        height: 1878px;
    }

    .about-us__title {
        font-size: 1.7rem;
    }

    .about-us__title::before {
        height: 1.7rem;
    }

    .about-us__box-title{
        padding: 0px 16px;
    }
    
    .about-us__container {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .about-us__box--img{
        display: flex;
        justify-content: center;
    }


    .about-us__box-how-we-do-it--content {
        padding: 0rem 1rem;
    }

    .about-us__equipment-solution {
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    .about-us__box-customers--company {
        width: 100%;
        margin: 0rem 1rem;
        height: 15.5rem;
    }

    .about-us__box-customers--title-solution {
        width: 100%;
        padding: 3.4375rem 3.375rem;
    }

    /*=============== FOOTER RESPONSIVE ===============*/


    .footer__box-content {
        display: flex;
        flex-direction: column;
        gap: 0px;
        padding: 2.5rem 1rem;
    }


    .footer__box--logo{
        display: flex;
        justify-content: center;
        padding: 0rem 0rem 2.5rem;
    }

    .footer__box--menu{
        display: block;
        margin: auto;
        width: 16.9375rem;
    }

    .footer__box--contacto{
        display: block;
        margin: auto;
    }

    .footer__contact--bottom {
        margin-bottom: 3rem;
    }

    .footer__item {
        padding: 0rem 0rem 3rem;
    }

    .footer__contact-link {
        margin-left: 0.5rem;
        font-size: 0.875rem;
    }

/*=============== back-to-top-btn RESPONSIVE ===============*/

    #back-to-top-btn {
        display: none;
        position: fixed;
        bottom: 8px;
        right: 1rem;
        padding: 0.9rem;
    }

    /*=============== PÁGINA SERVICIOS HEADER RESPONSIVE ===============*/

    .header-services__container {
        display: flex;
        flex-direction: column-reverse;
        background: var(--color-contact-background);
    }

    .header-services__title {
        line-height: 1.3;
    }


    .header-services__box--content {
        padding-left: 0rem;
    }

    .header-services__content {
        width: initial;
        padding: 0px 16px;
    }

    .header-services__box--content {
        padding-left: 0rem;
        padding-bottom: 1.75rem;
    }

    .header-services__img {
        max-height: 180px;
    }

    .header-services__box {
        height: initial;
    }

    /*========== CONTENIDO SERVICIOS RESPONSIVE ==========*/

    .content-services__container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem 0rem;
    }

    .content-services__information {
        margin: 20px 16px 0px;
    }

    .content-services__information--reverse {
        margin: 0px 16px 20px;
    }

    .content-services__box--img{
        display: flex;
        justify-content: center;
        padding: 0rem 0.625rem;
    }


    .content-services__img-information{
        min-height: 200px;
    }

    .content-services__information--width {
        width: initial;
    }

    /*=============== PÁGINA POSTULA CON NOSOTROS RESPONSIVE ===============*/
    /*========== HEADER RESPONSIVE ==========*/
    .header-apply {
        height: 444px;
    }

    .header-apply__content {
        padding-right: 16px;
        padding-left: 16px;
    }

    .header-apply__content-company{
        padding-right: 16px;
        padding-left: 16px;
    }

    /*=============== PÁGINA CONTACTO EMPRESA RESPONSIVE ===============*/
    /*========== FORMULARIO CONTACTO RESPONSIVE ==========*/

    .form-company__content {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        margin: 0px 16px;
    }
    

    .form-company__link {
        font-size: 12px;
    }

    .form-company__contact {
        gap: 8px;
    }

    .main-nav__logo-container{
        display: none;
    }

    /* Estilo del botón de envío */
.wpcf7-form-control.wpcf7-submit {
    height: 44px;
}

}

/*=============== RESPONSIVE MIN-WIDTH 700px MAX-WIDTH 1220px ===============*/

@media (min-width: 701px) and (max-width: 1220px) {
    
    body{
        background: rgb(255, 255, 255);
        padding-top: 104px;
    }


    /*=============== HEADER RESPONSIVE ===============*/

    .header {
        display: flex;
        flex-direction: column-reverse;
        height: initial;
    }

    .header__box--image {
        justify-content: center;
        padding: 60px 0px 44px;
    }

    .header__img{
        width: 86%;
        margin-left: 0rem;
        max-height: 15.5rem;
        object-fit: cover;
    }

    .header__box--text {
        padding-left: 0rem;
    }

    .nav-bar__logo--mobile.shrink__mobile {
        width: 59%;
    }

    .nav-bar__logo--mobile {
        display: block;
        width: 100%;
        transition: width 0.3s ease;
    }

    .header__content {
        width: 88%;
        padding: 16px 16px 70px;
    }

    /*=============== SERVICIOS RESPONSIVE ===============*/

    .services__section {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0px 16px;
    }

    .services__content{
        padding: 0px 16px;
    }

    /*=============== BENEFICIOS SERVICIOS RESPONSIVE ===============*/

    .benefits-services {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 6rem 1rem;
        gap: 2.375rem;
    }

    .background-benefits__title{
        font-size: 2.5rem;
    }
    
    .background-benefits__caption{
        font-size: 1rem;
    }

    /*=============== NUESTROS CLIENTES RESPONSIVE ===============*/

    .our-client__container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .our-client__box{
        padding: 10px 0px;
    }

    .our-client__img{
        width: 80%;
    }

    /*=============== FONDO BENEFICIOS RESPONSIVE ===============*/
    .background-benefits__container {
        width: 666px;
    }

    /*=============== ABOUT US RESPONSIVE ===============*/

    .about-us__box-title{
        padding: 0px 16px;
    }

    .about-us__box-customers--title-solution{
        padding: 0px 80px;
        display: flex;
        align-items: center;
    }

    .about-us__container {
        padding: 0px 16px;
    }

    .about-us__box-how-we-do-it--content {
        padding: 0px 10px 0px 0px;
    }

    .about-us__equipment-solution {
        display: grid;
        grid-template-columns: 0% 20% 20% 60%;
        padding-left: 16px;
    }

    .about-us__text {
        font-size: 10px;
    }

    /*=============== FOOTER RESPONSIVE ===============*/

    .footer__box-content {
        display: flex;
        flex-direction: column;
        gap: 0px;
        padding: 40px 16px;
    }

    .footer__box--logo{
        display: flex;
        justify-content: center;
        padding: 0px 0px 40px;
    }

    .footer__box--menu{
        display: block;
        margin: auto;
        width: 313px;
    }

    .footer__box--contacto{
        display: block;
        margin: auto;
    }

    .footer__item {
        padding: 0px 0px 48px;
    }

    .footer__contact-link {
        margin-left: 8px;
    }

    /*=============== PÁGINA SERVICIOS RESPONSIVE ===============*/

    .header-services__box--content {
        padding-left: 0rem;
        padding-bottom: 1.75rem;
    }

    .header-services__box {
        height: 443px;
    }

    /*========== CONTENIDO SERVICIOS RESPONSIVE ==========*/

    .content-services__container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 0rem;
    }

    .content-services__information {
        margin: 20px 16px 0px;
        min-height: initial;
    }

    .content-services__information--reverse {
        margin: 0px 16px 20px;
    }

    .content-services__box--img{
        display: flex;
        justify-content: center;
    }

    .content-services__img-information--height-responsive{
        height: 270px;
    }

    .content-services__img-information {
        min-height: 200px;
    }

    .content-services__information--width {
        width: initial;
    }
    /*=============== PÁGINA POSTULA CON NOSOTROS RESPONSIVE ===============*/
    /*========== CONTENIDO SERVICIOS RESPONSIVE ==========*/

    .header-apply__content {
        padding-right: 0px;
    }

    .header-apply__content-company{
        padding-right: 0px;
    }

    .header-apply__content-company {
        padding-right: 16px;
        padding-left: 16px;
        margin: 0;
    }

    /*=============== PÁGINA CONTACTO EMPRESA RESPONSIVE ===============*/
    /*========== FORMULARIO CONTACTO RESPONSIVE ==========*/

    .form-company__content {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        margin: 0px 16px;
    }

    .main-nav__logo-container{
        display: none;
    }

    
}

/*=============== RESPONSIVE MINIMO 1024 ===============*/

@media (min-width: 1024px) {
    /*=============== RESPONSIVE MENÚ ===============*/
    .main-nav__logo-container {
        display: block;
    }
    
    .nav-bar {
        box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 6px 0px;
        z-index: 1000;
        position: fixed;
        width: 100%;
        top: 0;
        background: #fff;
    }

    .main-nav {
        display: flex;
        margin: auto;
        max-width: 67.5rem;
    }

    .main-nav__link {
        display: block;
        padding: 0rem 2.5rem;
        font-weight: var(--font-weight-medium);
        color: var(--color-primary);
        font-size: var(--font-size-base);
        text-decoration: none;
    }

    .main-nav__logo-img.shrink{
        width: 48%;
    }

    .main-nav__logo-img {
        display: block;
        width: 78%;
        transition: width 0.3s ease;
    }

    .nav-bar__button {
        display: none;
    }

    .main-nav__menu {
        margin-left: 0;
        display: flex;
        align-items: center;
        justify-content: end;
        background: #fff;
        position: relative;
    }

    .main-nav__link--border-right {
        border-right: 0.185rem solid var(--color-tertiary);
        padding-right: 2.5rem; 
    }

    .main-nav__link:hover {
        background: transparent;
        color: var(--color-primary);
    }

    .main-nav__item--submenu {
        position: relative;
    }

    .main-nav__submenu {
        position: absolute;
        top: 3.75rem;
        width: 12.5rem;
        overflow: visible;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
    }

    .main-nav__item--submenu:hover .main-nav__submenu {
        opacity: 1;
        visibility: visible;
    }

    .main-nav__link--shade { 
        box-shadow: initial;
    }

    .main-nav__contact-company-laptop {
        display: block;
        font-size: 1rem;
        padding: 0.8125rem 1.625rem;
        margin-left: 1.5rem;
        background: var(--color-primary);
        color: var(--color-contact-text);
        text-decoration: none;
        border-radius: 6.25rem;
        font-weight: var(--font-weight-medium);
    }

}