/* =========================================================
   INFOlibre - HEADER USERS
========================================================= */

@font-face {
    font-family: "Font Awesome 5 Pro";
    src: url("https://www.infolibre.es/assets/fonts/fa-light-300.h-a3702ff5a941f1099e82213464232e81-7de7e855.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    src: url("https://www.infolibre.es/assets/fonts/fa-solid-900.h-c81f398359cea101e48978f6a03079e0-7de7e855.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

.fa,
.fas {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.fal {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
}

.fa-user-circle::before {
    content: "\f2bd";
}

.fa-times::before {
    content: "\f00d";
}


/* =========================
   CONTENEDOR GENERAL
========================= */

.header-container header .husers {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    grid-area: husers;
    position: relative;
    width: 100%;
}

.header-container header .husers .husers-top {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* =========================
   SEARCH
========================= */

.header-container header .husers .search-cont {
    display: flex;
    align-items: center;
    position: relative;
}

.header-container header .husers .btn-searcher {
    /* display: none; */
}

/* Icon search */

.fa.fa-search:before {
    content: none;
}

.fa.fa-search {
    width: 24px;
    height: 24px;
    min-width: 24px;

    display: block;

    font-size: 0;

    background-image: url("https://www.infolibre.es/assets-search.h-a492a2371ab46d5781ee556bc955bc52-15905d17.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* =========================
   USER MENU
========================= */

.header-container header .husers .edi-user-menu {
    width: auto;
    position: relative;
    z-index: 3;
}

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

.header-container header .husers .user-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: auto;
}

/* =========================
   BOTÓN SUSCRÍBETE
========================= */

.header-container header .husers .user-header .become-partner {
    height: 32px;

    border: 2px solid #0077CC;
    border-radius: 4px;

    background-color: #0077CC;

    box-sizing: border-box;

    margin-right: 0;
}

.header-container header .husers .user-header .become-partner a {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    padding: 0 16px;

    box-sizing: border-box;

    font-family: "Roboto", sans-serif;

    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    color: #ffffff;
}

/* =========================
   LOGIN
========================= */

.header-container header .husers .user-header .login a {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 32px;
    padding: 0 8px;

    box-sizing: border-box;

    color: #0077CC;
    text-decoration: none;

    gap: 4px;

    cursor: pointer;

    border: 2px solid #0077CC;
    border-radius: 4px;
}

/* Texto login */

.header-container header .husers .user-header .login a span {
    display: none;
}

/* =========================
   TRANSPARENCIA
========================= */

.header-container header .husers .transparencia {
    display: none;
}

.header-container header .husers .transparencia a {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    text-decoration: none;

    color: #0077CC;
}

.header-container header .husers .transparencia .icon {
    font-size: 12px;
    color: inherit;
}

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

.header-container:not(.sticky) header.header-home .husers {
    align-items: center;
}

.header-container header.header-home .husers .transparencia {
    transform: translateY(10px);
}

/* Sticky */

.header-container.sticky header.header-home .husers .transparencia,
.header-container.sticky header.header-home .transparencia {
    display: none;
}

/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    .header-container header .husers {
        align-items: center;
    }

    .header-container header .husers .husers-top {
        gap: 8px;
    }

    .header-container header .husers .user-header {
        gap: 8px;
    }

    .header-container header .husers .user-header .become-partner {
        height: 32px;
    }

    .header-container header .husers .user-header .become-partner a {
        font-size: 11px;
        padding: 0 16px;
    }

    .header-container header .husers .user-header .login a {
        height: 32px;
        padding: 0 16px;
    }

    .header-container header .husers .transparencia {
        display: none !important;
    }
}

/* =========================================================
   DESKTOP
========================================================= */

@media only screen and (min-width: 768px) {

    .header-container header .husers {
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }

    .header-container:not(.sticky) header.header-home .husers {
        align-items: flex-end;
    }

    .header-container header .husers .husers-top {
        gap: 10px;
    }

    .header-container header .husers .edi-user-menu {
        margin-left: 15px;
    }

    .header-container header .husers .user-header .become-partner {
        padding: 0;
    }


    .header-container header .husers .user-header {
        gap: 10px;
    }

    .header-container header .husers .user-header .become-partner a {
        font-size: 14px;
        font-weight: 400;
    }

    .header-container:not(.sticky) header.header-home .husers .user-header .login a {
        padding-bottom: 0 !important;
    }
}


.header-container header .husers .user-header .login a span {
    display: inline-flex;

    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-left: 0;
    text-transform: uppercase;
}

.header-container header .husers .transparencia {
    display: block;

    margin-top: 10px;

    text-align: right;
}

.header-container header .husers .transparencia a {
    font-family: "Roboto", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 17px;
}

/* Fix iconos header */
.header-container header .husers .user-header .login a i.fa.fa-user-circle {
    display: inline-block !important;

    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;

    background-color: #0077CC !important;
    background-image: none !important;

    -webkit-mask: url("../img/user.svg") center / 100% 100% no-repeat !important;
    mask: url("../img/user.svg") center / 100% 100% no-repeat !important;

    font-size: 0 !important;
    line-height: 20px !important;
}

.header-container header .husers .user-header .login a i.fa.fa-user-circle::before {
    content: none !important;
}



.header-container header .husers .fa.fa-search {
    display: inline-block !important;

    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;

    background-image: url("../img/search.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;

    background-color: transparent !important;

    font-size: 0 !important;
    line-height: 20px !important;
}

.header-container header .husers .fa.fa-search::before {
    content: none !important;
}