/*
 * WÖRTH Selection · cabecera corporativa
 *
 * La misma cabecera que worthselection.com: logo de 173 px, menú con
 * desplegables, selector Candidatos/Empresas, buscador y cuenta.
 * Medidas tomadas de la web: altura 90 px, contenido de 1150 px.
 */

.ws-site-header {
    position: relative;
    --hdr-h: 90px;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #EDF1EF;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

.ws-site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 90px;
    padding-left: max(18px, calc((100% - 1150px) / 2));
    padding-right: max(18px, calc((100% - 1150px) / 2));
}

.ws-site-header__logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.ws-site-header__logo img {
    display: block;
    width: 173px;
    height: auto;
}

/* ---------- Menú principal ---------- */

.ws-site-header__nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    height: 100%;
}

.ws-nav__item {
    height: 100%;
    display: flex;
    align-items: center;
}

.ws-site-header .ws-nav__top {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #0F3B2E;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.ws-site-header .ws-nav__top:hover {
    background: #F1F5F3;
}

.ws-site-header .ws-nav__top[aria-expanded="true"] {
    background: #0F3B2E;
    color: #fff;
    font-weight: 600;
}

/* Desplegable: tarjeta de color + categorías + enlaces */
.ws-dd {
    position: absolute;
    top: calc(100% + 2px);
    left: max(24px, calc((100% - 1314px) / 2));
    right: max(24px, calc((100% - 1314px) / 2));
    z-index: 70;
    display: grid;
    grid-template-columns: minmax(260px, 350px) minmax(220px, 302px) 1fr;
    gap: 0;
    padding: 36px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(15, 59, 46, .12);
    font-family: "Inter", Arial, sans-serif;
}

.ws-dd[hidden] {
    display: none;
}

.ws-dd__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 34px 28px;
    min-height: 300px;
    background: #A7F3D0;
    color: #0F3B2E;
}

.ws-dd__card--contact {
    background: #FDE047;
}

.ws-dd__card--about {
    background: #0F3B2E;
    color: #fff;
}

.ws-dd__eyebrow {
    margin-bottom: 26px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ws-dd__heading {
    display: block;
    margin-bottom: 14px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.05;
}

.ws-dd__card p {
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.6;
}

.ws-site-header .ws-dd__btn {
    margin-top: auto;
    padding: 14px 22px;
    border-radius: 999px;
    background: #0F3B2E;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.ws-site-header .ws-dd__card--about .ws-dd__btn {
    background: #fff;
    color: #0F3B2E;
}

.ws-dd__triggers {
    padding: 0 34px;
    border-left: 1px solid #EDF1EF;
    border-right: 1px solid #EDF1EF;
    margin-left: 34px;
}

.ws-site-header .ws-dd__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 22px 0 14px;
    border: 0;
    border-bottom: 1px solid #EDF1EF;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 13px;
    color: #0F3B2E;
    text-align: left;
    cursor: pointer;
}

.ws-site-header .ws-dd__trigger.is-active {
    font-weight: 600;
    border-bottom-color: #A7F3D0;
}

.ws-dd__arrow {
    font-size: 18px;
    color: #9BB0A8;
    transition: transform .15s;
}

.ws-dd__trigger.is-active .ws-dd__arrow {
    color: #0F3B2E;
    transform: translateX(4px);
}

.ws-dd__panels {
    padding: 0 0 0 24px;
}

.ws-dd__links[hidden] {
    display: none;
}

.ws-dd__title {
    display: block;
    padding: 22px 0 12px;
    font-size: 12px;
    color: rgba(15, 59, 46, .52);
}

.ws-site-header .ws-dd__links a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #EDF1EF;
    font-size: 13px;
    color: #0F3B2E;
    text-decoration: none;
}

.ws-site-header .ws-dd__links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Acciones ---------- */

.ws-site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 31px;
}

.ws-site-header__switch {
    display: flex;
    align-items: center;
    padding: 3px;
    border: 1px solid #DCE3DF;
    border-radius: 999px;
}

.ws-site-header .ws-site-header__switch a {
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: #0F3B2E;
    text-decoration: none;
    white-space: nowrap;
}

.ws-site-header .ws-site-header__switch a[aria-current="true"] {
    background: #0F3B2E;
    color: #fff;
}

.ws-site-header__icon--search {
    color: #1E73BE !important;
}

.ws-site-header .ws-site-header__burger {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ws-site-header__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #0F3B2E;
}

.ws-site-header__icon:hover {
    background: #F1F5F3;
}

/* ---------- Mi cuenta (con sesión iniciada) ---------- */

.ws-site-header__account {
    position: relative;
}

.ws-site-header .ws-site-header__me {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.ws-site-header .ws-site-header__me.has-initials {
    background: #0F3B2E;
    color: #fff;
}

.ws-site-header .ws-site-header__me.has-initials:hover {
    background: #08271E;
}

.ws-site-header__me.has-initials svg {
    display: none;
}

.ws-site-header__initials {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
}

.ws-site-header__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    min-width: 236px;
    padding: 8px;
    background: #fff;
    border: 1px solid #DCE3DF;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 59, 46, .14);
}

.ws-site-header__menu[hidden] {
    display: none;
}

.ws-site-header__who {
    display: grid;
    gap: 2px;
    padding: 8px 10px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #EDF1EF;
}

.ws-site-header__who[hidden] {
    display: none;
}

.ws-site-header__who strong {
    font-size: 13.5px;
    font-weight: 600;
    color: #0F3B2E;
}

.ws-site-header__who span {
    overflow: hidden;
    font-size: 12px;
    color: #5D6E67;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-site-header .ws-site-header__menu a,
.ws-site-header .ws-site-header__menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    color: #0F3B2E;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ws-site-header .ws-site-header__menu a:hover,
.ws-site-header .ws-site-header__menu button:hover {
    background: #F1F5F3;
}

.ws-site-header .ws-site-header__menu [data-ws-logout] {
    color: #9B2C2C;
}

.ws-site-header .ws-site-header__menu button:disabled {
    opacity: .6;
    cursor: wait;
}

.ws-site-header button:focus-visible,
.ws-site-header a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 167, 117, .55);
    border-radius: 4px;
}

@media (max-width: 1240px) {
    .ws-site-header__nav {
        gap: 4px;
    }

    .ws-site-header__actions {
        margin-left: 16px;
    }
}

/* Tablet y móvil: el menú se abre con el botón de tres líneas */
@media (max-width: 1060px) {
    .ws-site-header {
        --hdr-h: 77px;
    }

    .ws-site-header__inner {
        height: 77px;
    }

    .ws-site-header__logo img {
        width: 125px;
    }

    .ws-site-header__actions {
        margin-left: auto;
    }

    .ws-site-header .ws-site-header__burger {
        display: grid;
    }

    .ws-site-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 70;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: auto;
        max-height: calc(100vh - 77px);
        overflow-y: auto;
        padding: 8px 18px 18px;
        background: #fff;
        border-bottom: 1px solid #EDF1EF;
        box-shadow: 0 18px 30px rgba(15, 59, 46, .12);
    }

    .ws-site-header.is-menu-open .ws-site-header__nav {
        display: flex;
    }

    .ws-nav__item {
        display: block;
        height: auto;
        border-bottom: 1px solid #EDF1EF;
    }

    .ws-site-header .ws-nav__top {
        width: 100%;
        height: 52px;
        padding: 0 4px;
        border-radius: 0;
        font-size: 15px;
        justify-content: space-between;
    }

    .ws-site-header .ws-nav__top[aria-expanded="true"] {
        background: transparent;
        color: #0F3B2E;
    }

    .ws-dd {
        position: static;
        display: block;
        padding: 0 4px 12px;
        box-shadow: none;
        border-radius: 0;
    }

    .ws-dd__card,
    .ws-dd__triggers {
        display: none;
    }

    .ws-dd__panels {
        padding: 0;
    }

    .ws-dd__links[hidden] {
        display: block;
    }

    .ws-site-header .ws-dd__links a {
        padding: 11px 0;
        font-size: 14px;
    }
}

@media (max-width: 544px) {
    .ws-site-header {
        --hdr-h: 71px;
    }

    .ws-site-header__inner {
        height: 71px;
    }

    .ws-site-header__logo img {
        width: 101px;
    }

    .ws-site-header__actions {
        gap: 4px;
    }

    .ws-site-header__switch {
        display: none;
    }
}

/*
 * portal.html: la cabecera antigua (header.header, con «Salir» y menú
 * superior) ya no se usa. Su navegación está en el panel lateral y la
 * cuenta en la cabecera nueva.
 */
body > header.header,
header.header:not(.ws-site-header),
.ws-v3-legacy-chrome:not(.ws-site-header) {
    display: none !important;
}

/*
 * portal.html tiene reglas antiguas muy fuertes para cualquier botón dentro
 * de #ws-wordpress-header-host (fondo, borde, relleno). Aquí ganan las de la
 * cabecera nueva.
 */
#ws-wordpress-header-host .ws-site-header .ws-site-header__me {
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #0F3B2E !important;
    box-shadow: none !important;
}

#ws-wordpress-header-host .ws-site-header .ws-site-header__me.has-initials {
    background: #0F3B2E !important;
    color: #fff !important;
}

#ws-wordpress-header-host .ws-site-header .ws-site-header__menu button {
    width: 100% !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #9B2C2C !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

#ws-wordpress-header-host .ws-site-header .ws-site-header__menu button:hover {
    background: #F1F5F3 !important;
}

/* portal.html: sus reglas genéricas de botones no deben tocar el menú */
#ws-wordpress-header-host .ws-site-header .ws-nav__top {
    height: 42px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #0F3B2E !important;
}

#ws-wordpress-header-host .ws-site-header .ws-nav__top:hover {
    background: #F1F5F3 !important;
}

#ws-wordpress-header-host .ws-site-header .ws-nav__top[aria-expanded="true"] {
    background: #0F3B2E !important;
    color: #fff !important;
    font-weight: 600 !important;
}

#ws-wordpress-header-host .ws-site-header .ws-dd__trigger {
    min-height: 0 !important;
    padding: 22px 0 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #EDF1EF !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #0F3B2E !important;
}

#ws-wordpress-header-host .ws-site-header .ws-dd__trigger.is-active {
    font-weight: 600 !important;
    border-bottom-color: #A7F3D0 !important;
}

#ws-wordpress-header-host .ws-site-header .ws-site-header__burger {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #0F3B2E !important;
}

@media (max-width: 1060px) {
    #ws-wordpress-header-host .ws-site-header .ws-nav__top {
        width: 100% !important;
        height: 52px !important;
        padding: 0 4px !important;
        border-radius: 0 !important;
        font-size: 15px !important;
    }

    #ws-wordpress-header-host .ws-site-header .ws-nav__top[aria-expanded="true"] {
        background: transparent !important;
        color: #0F3B2E !important;
    }
}

/* Por si algún script antiguo marca elementos de la cabecera como menú del portal */
.ws-site-header [data-client-top-action]::before,
.ws-site-header [data-client-top-action]::after {
    content: none !important;
}

/* ---------- Variante simple (inicio de sesión): logo, accesibilidad y cuenta ---------- */

.ws-site-header[data-variant="simple"] .ws-site-header__actions {
    margin-left: auto;
    gap: 14px;
}

.ws-site-header .ws-site-header__a11y {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.ws-site-header .ws-site-header__a11y[aria-expanded="true"] {
    background: #0F3B2E;
    color: #fff;
}

.ws-site-header .ws-site-header__a11y:focus-visible {
    outline: 3px solid #C8A574;
    outline-offset: 2px;
}

/* ---------- Logo y márgenes idénticos a worthselection.com ----------
   Medidas tomadas de la web en cada ancho: contenedor de 1240 px con 48 px
   de margen interior; logo de 180 × 90 (130 × 65 desde 1099 px, 105 × 52,5
   desde 766 px); cabecera de 90 / 82 / 77 / 71 px. Así el cambio entre la
   web y el portal no se nota. */

.ws-site-header {
    --hdr-h: 90px;
}

.ws-site-header__inner {
    height: 90px;
    padding-left: max(48px, calc((100% - 1240px) / 2 + 48px));
    padding-right: max(48px, calc((100% - 1240px) / 2 + 48px));
}

.ws-site-header__logo img {
    width: 180px;
    height: 90px;
    max-width: none;
    object-fit: contain;
}

@media (max-width: 1099px) {
    .ws-site-header {
        --hdr-h: 82px;
    }

    .ws-site-header__inner {
        height: 82px;
    }

    .ws-site-header__logo img {
        width: 130px;
        height: 65px;
    }
}

@media (max-width: 921px) {
    .ws-site-header {
        --hdr-h: 77px;
    }

    .ws-site-header__inner {
        height: 77px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 766px) {
    .ws-site-header {
        --hdr-h: 71px;
    }

    .ws-site-header__inner {
        height: 71px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .ws-site-header__logo img {
        width: 105px;
        height: 52.5px;
    }
}