/* wwwroot/assets_careers/css/careers-public.css */
.page-title h1 {
    letter-spacing: .2px;
}

.page-title p {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/* Tarjetas de job */
.card-job {
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
    border-radius: 12px;
    background: var(--surface-color);
    padding: 20px;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .card-job:hover {
        box-shadow: 0 6px 24px rgba(0,0,0,.06);
        transform: translateY(-2px);
    }

    .card-job .job-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--heading-color);
    }

    .card-job .badge {
        border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
        background: color-mix(in srgb, var(--accent-color), transparent 96%);
        font-weight: 500;
    }

    .card-job .btn-apply {
        background: var(--accent-color);
        color: var(--contrast-color);
    }

        .card-job .btn-apply:hover {
            background: color-mix(in srgb, var(--accent-color), transparent 10%);
        }


/* --- Badges legibles y con buen contraste --- */
.job-card .badge,
.badge.badge-tag {
    /* Overwrites a variables de Bootstrap para asegurar legibilidad */
    --bs-badge-font-size: .72rem;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: .55rem;
    --bs-badge-padding-y: .30rem;
    --bs-badge-border-radius: 999px;
    --bs-badge-color: #3b4a6b; /* texto oscuro y nítido */

    color: var(--bs-badge-color) !important;
    background: #f5f8ff !important; /* pill suave */
    border: 1px solid #e8efff !important;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* separación entre tags */
.job-meta .badge + .badge {
    margin-left: .35rem;
}

/* micro-ajustes de la línea meta para que todo respire bien */
.job-meta {
    font-size: .875rem;
    color: #6b7a90;
}


/* ===========================
   Careers — Look & Feel WOW
   =========================== */
:root {
    --careers-bg: #f6f9fc;
    --careers-card: #ffffff;
    --careers-border: rgba(28, 33, 50, 0.08);
    --careers-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    --careers-shadow-hover: 0 14px 34px rgba(16, 24, 40, 0.10);
    --careers-text: #0f172a;
    --careers-muted: #6b7280;
    /* Marca (puedes ajustar a tu paleta) */
    --brand-500: #4f46e5;
    --brand-600: #4338ca;
    --brand-700: #3730a3;
    /* Gradientes */
    --brand-gradient: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    --chip-bg: #eef2ff;
    --chip-text: #3730a3;
    /* Success/Info neutrales */
    --ok-bg: #ecfdf5;
    --ok-text: #065f46;
}

/* Hero / encabezado suave */
.careers-hero {
    background: radial-gradient(1200px 420px at 50% -120px, #ebf1ff 0%, transparent 60%) var(--careers-bg);
    padding: clamp(36px, 7vw, 80px) 0 32px;
}

    .careers-hero h1 {
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--careers-text);
    }

    .careers-hero p {
        color: var(--careers-muted);
    }

/* Filtros (card) */
.careers-filters {
    background: var(--careers-card);
    border: 1px solid var(--careers-border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--careers-shadow);
}

    .careers-filters .form-select,
    .careers-filters .form-control {
        border-radius: 10px;
        border-color: var(--careers-border);
    }

    .careers-filters .btn-primary {
        background: var(--brand-gradient);
        border: none;
        box-shadow: 0 6px 16px rgba(79,70,229,.25);
    }

    .careers-filters .btn-outline-secondary {
        border-radius: 10px;
    }

/* Tarjeta de job */
.job-card {
    background: var(--careers-card);
    border: 1px solid var(--careers-border);
    border-radius: 14px;
    box-shadow: var(--careers-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .job-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--careers-shadow-hover);
        border-color: rgba(79,70,229,.18);
    }

.job-title {
    color: #0b1220;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Chips */
.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    --_bg: var(--chip-bg);
    --_tx: var(--chip-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
    border-radius: 999px;
    background: var(--_bg);
    color: var(--_tx);
    border: 1px solid rgba(55,48,163,.15);
    white-space: nowrap;
}

/* Estado (fecha / abierto) */
.job-meta {
    color: var(--careers-muted);
    font-size: 12px;
}

/* CTA Postular */
.btn-apply {
    background: var(--brand-gradient);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 600;
    box-shadow: 0 10px 18px rgba(79,70,229,.22);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .btn-apply:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
        box-shadow: 0 14px 26px rgba(79,70,229,.28);
    }

/* details/summary (Descripción) */
.job-details {
    border-top: 1px dashed rgba(28,33,50,.14);
    margin-top: 8px;
    padding-top: 12px;
}

    .job-details summary {
        list-style: none;
        cursor: pointer;
        color: var(--brand-600);
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 10px;
        padding: 6px 10px;
    }

        .job-details summary::before {
            content: "▸";
            font-size: 14px;
            transition: transform .18s ease;
        }

    .job-details[open] summary::before {
        transform: rotate(90deg);
    }

    .job-details summary:focus-visible {
        outline: 3px solid rgba(79,70,229,.35);
        outline-offset: 2px;
    }

/* Empty state */
.careers-empty {
    background: var(--careers-card);
    border: 1px dashed rgba(28,33,50,.18);
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    color: var(--careers-muted);
}

/* Micro ajustes responsive */
@media (max-width: 768px) {
    .btn-apply {
        width: 100%;
    }
}

/* ===== HERO / PORTADA ===== */
.hero-careers {
    position: relative;
    padding: min(11vh, 8rem) 0 2.5rem;
    background: radial-gradient(1200px 500px at -10% -10%, rgba(111,132,255,.15), transparent 60%), radial-gradient(900px 500px at 110% -10%, rgba(255,152,167,.14), transparent 50%), #f5f8fe;
}

            /* Desktop por defecto */
    .hero-careers.has-image {
        --hero-image: url('/assets_careers/img/hero/fitOFC.jpg');
    }

        /* Tablet */
        @media (max-width: 991.98px) {
            .hero-careers.has-image {
                --hero-image: url('/assets_careers/img/hero/fitOFC.jpg');
            }
        }

        /* Mobile */
        @media (max-width: 575.98px) {
            .hero-careers.has-image {
                --hero-image: url('/assets_careers/img/hero/hero-1080x1400.webp');
                background-position: 50% 30%; /* sube el foco aún más en móvil */
            }
        }

    .hero-careers .hero-overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(1000px 350px at 50% 0, rgba(255,255,255,.35), transparent 70%);
        pointer-events: none;
    }






/* Hero con imagen de fondo */
.hero-careers.has-image {
    background-image: var(--hero-image);
    background-size: cover;
    background-repeat: no-repeat;
    /* Este punto encuadra bien tu foto (centro un poco elevado) */
    background-position: 50% 42%;
}

/* Oscurece un pelín para dar contraste al título y filtros */
.hero-careers .hero-overlay {
    /* si ya existe, puedes hacerlo un poco más fuerte que antes */
    background: linear-gradient(180deg, rgba(8,11,21,0.42), rgba(8,11,21,0.22));
}

/* Un poquito de “glow” al título para que flote mejor sobre fondos claros */
.hero-title {
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* En pantallas grandes baja un pelo el foco (tu imagen tiene techo muy claro) */
@media (min-width: 1200px) {
    .hero-careers.has-image {
        background-position: 50% 45%;
    }
}

@media (max-width: 575.98px) {
    /* En mobile subimos el foco porque el panel ocupa más alto */
    .hero-careers.has-image {
        background-position: 50% 38%;
    }
}






.hero-title {
    color: #0b1023;
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: .25rem;
    font-size: clamp(2rem, 2.7vw + 1rem, 3rem);
}

.has-image .hero-title {
    color: #fff;
    text-shadow: 0 6px 28px rgba(0,0,0,.25);
}

.hero-subtitle {
    color: #51607a;
    font-size: clamp(.95rem, .55vw + .85rem, 1.125rem);
    margin-bottom: 1.25rem;
}

.has-image .hero-subtitle {
    color: rgba(255,255,255,.90);
}

/* Tarjeta de filtros elevada */
.filters-elevated {
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 1rem 1rem 1.1rem;
    box-shadow: 0 28px 80px rgba(37,44,97,.18), 0 10px 22px rgba(12,14,29,.08);
}

    .filters-elevated .form-select,
    .filters-elevated .form-control {
        height: 44px;
        border-radius: 12px;
        border-color: #e6ecf8;
    }

.btn-cta {
    height: 44px;
    border-radius: 12px;
    padding-inline: 1.1rem;
    box-shadow: 0 10px 20px rgba(65,105,225,.22);
}

.btn-ghost {
    border-radius: 12px;
    height: 44px;
}

/* ===== CARDS DE VACANTES ===== */
.card-job {
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 16px;
    padding: 1.2rem 1.25rem;
    box-shadow: 0 6px 20px rgba(14,20,36,.05);
}

.job-title {
    font-size: clamp(1.05rem, .4vw + 1rem, 1.25rem);
    font-weight: 700;
    color: #0b1023;
}

/* Chips legibles */
.badge-chip {
    background: #eef3ff;
    border: 1px solid #dbe6ff;
    color: #2f4fb3;
    font-weight: 600;
    padding: .35rem .65rem;
}

/* Botón “Postular” */
.btn-apply {
    --c1: #3d7cff;
    --c2: #5ab0ff;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    border-radius: 12px;
    padding: .55rem 1rem;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(61,124,255,.28);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .btn-apply:hover {
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 12px 30px rgba(61,124,255,.35);
    }

/* Mejor respiración en desktop ancho */
@media (min-width: 1200px) {
    .filters-elevated {
        padding: 1.1rem 1.25rem 1.2rem;
    }
}
/* ====== STATS BAND ====== */
.stats-band {
    padding: clamp(2.25rem, 3vw, 3.25rem) 0;
    background: #f7fbff; /* sutil */
}

.stats-item {
    background: #ffffff;
    border: 1px solid #eef2f8;
    border-radius: 16px;
    padding: clamp(1.2rem, 2.2vw, 1.75rem);
    height: 100%;
    box-shadow: 0 14px 34px rgba(27, 43, 90, 0.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .stats-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 44px rgba(27, 43, 90, 0.10);
    }

.stat-value {
    display: block;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .5px;
    font-size: clamp(2rem, 2.9vw + 1rem, 3.25rem);
    background: linear-gradient(135deg, #2f74ff 0%, #5ab0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 6px 22px rgba(63, 118, 255, .15);
    margin-bottom: .35rem;
}

.stat-label {
    color: #6a7a95;
    font-weight: 600;
    letter-spacing: .2px;
    font-size: clamp(.85rem, .4vw + .8rem, 1rem);
}

/* Ajuste para móviles: que quepan 2 por fila */
@media (max-width: 767.98px) {
    .stats-item {
        padding: 1rem;
        border-radius: 14px;
    }
}


/* Ampliar layout general */
.hero-careers .container-xxl,
.stats-band .container-xxl,
.section .container-xxl {
    max-width: 1320px; /* ancho de Bootstrap container-xxl */
}

/* Filtros: algo más de aire en ancho grande */
@media (min-width: 992px) {
    .filters-elevated {
        padding: 22px 24px 14px;
    }
}

/* Contadores: más grandes y cómodos */
.stats-band {
    padding-block: clamp(22px, 3.5vw, 36px);
}

.stats-item {
    padding: 24px 22px 18px;
}

.stat-value {
    font-size: clamp(34px, 5vw, 46px);
}

.stat-label {
    font-size: .95rem;
}

/* Botones CTA un toque más anchos en desktop */
@media (min-width: 992px) {
    .btn-cta, .btn-apply {
        padding-inline: 20px;
    }
}

/* Job card pro */
.card-job.pro {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .card-job.pro:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(2, 6, 23, .08);
        border-color: rgba(88,112,255,.25);
    }

.shadow-soft {
    box-shadow: 0 6px 20px rgba(14, 30, 64, .06);
}

/* Icono circular del rol */
.job-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, #6ea8fe, #5b7cfa);
    box-shadow: 0 8px 20px rgba(50, 90, 250, .25);
}

/* Título con mejor jerarquía */
.job-title {
    font-weight: 700;
    line-height: 1.25;
}

/* Chips */
.badge-chip {
    background: #f3f6ff;
    color: #3a57e8;
    border: 1px solid rgba(58, 87, 232, .12);
    font-weight: 600;
}

/* details: flecha giratoria + reset marker */
.job-details summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
}

    .job-details summary::-webkit-details-marker {
        display: none;
    }

.job-details[open] summary .bi-chevron-down {
    transform: rotate(180deg);
    transition: transform .2s ease;
}

/* Botón aplicar (coincide con tu estilo actual) */
.btn-apply {
    background: linear-gradient(135deg, #3a57e8, #5f8cff);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .6rem 1rem;
    box-shadow: 0 8px 15px rgba(58, 87, 232, .25);
}

    .btn-apply:hover {
        filter: brightness(1.05);
        color: #fff;
    }



/* === JOB DESC — override final, tipografía y respiración === */
.card-job.pro .job-desc {
    /* tamaño levemente mayor y line-height amplio */
    font-size: clamp(1.02rem, 0.25vw + 1rem, 1.12rem);
    line-height: 1.7;
    color: #1f2937; /* gris-oscuro legible */
    -webkit-font-smoothing: antialiased;
    max-width: 75ch; /* ancho de lectura cómodo */
}

@media (min-width: 1400px) {
    .card-job.pro .job-desc {
        font-size: clamp(1.06rem, 0.2vw + 1.02rem, 1.18rem);
    }
}

.card-job.pro .job-desc p {
    margin: 0 0 0.9rem;
}

.card-job.pro .job-desc h5,
.card-job.pro .job-desc h6 {
    margin: 1.1rem 0 .55rem;
    font-weight: 700;
    letter-spacing: .2px;
    color: #0b1023;
}

.card-job.pro .job-desc h6 {
    font-size: 1rem;
    border-left: 3px solid rgba(59,124,255,.35);
    padding-left: .55rem;
}

/* listas con aire y viñeta visible */
.card-job.pro .job-desc ul,
.card-job.pro .job-desc ol {
    margin: .5rem 0 1.1rem;
    padding-left: 1.2rem;
}

    .card-job.pro .job-desc ul li {
        margin: .3rem 0;
    }

        .card-job.pro .job-desc ul li::marker {
            color: #3d7cff;
        }

/* enlaces, bloques de nota y código dentro de la descripción */
.card-job.pro .job-desc a {
    color: #3a57e8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.card-job.pro .job-desc blockquote {
    margin: 1rem 0;
    padding: .75rem 1rem;
    background: var(--bs-secondary-bg);
    border-left: 4px solid rgba(58,87,232,.35);
    border-radius: .5rem;
}

.card-job.pro .job-desc code,
.card-job.pro .job-desc .token {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    padding: .1rem .35rem;
    border-radius: .35rem;
    font-size: .9em;
}

/* “Ver descripción” más claro y táctil */
.card-job.pro .job-details summary {
    font-weight: 700;
    color: #3a57e8;
    padding: 6px 10px;
    border-radius: 10px;
}

    .card-job.pro .job-details summary:hover {
        background: #eef3ff;
    }

/* Si la descripción está cerrada, aplica fade al final para invitar a abrir */
.card-job.pro .job-details:not([open]) .job-desc {
    max-height: 360px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 75%, transparent);
    mask-image: linear-gradient(#000 75%, transparent);
}

/* --- Plan B (por si no pudieras poner class="job-desc" aún) --- */
.card-job.pro .job-details > .mt-2:not(.job-desc) {
    font-size: clamp(1.02rem, 0.25vw + 1rem, 1.12rem);
    line-height: 1.7;
    color: #1f2937;
}


/* Acordeón de empleos */
#jobs-accordion .accordion-button {
    font-weight: 700;
    letter-spacing: .2px;
    background: #f8faff;
    border-radius: 14px !important;
}

#jobs-accordion .accordion-item {
    border: 0;
}

#jobs-accordion .accordion-collapse {
    transition: height .25s ease;
}

#jobs-accordion .card-job.pro {
    border-radius: 0;
}
    /* tarjetas planas dentro del grupo */
    #jobs-accordion .card-job.pro + .card-job.pro {
        border-top: 1px dashed var(--bs-border-color);
    }




/* === VACANTES FULL-BLEED === */
.section-jobs.full-bleed .container-fluid {
    padding-left: 0;
    padding-right: 0; /* sin gutters del contenedor */
}

.section-jobs .jobs-accordion { /* el acordeón ocupa 100% */
    width: 100%;
}

/* Cabecera del acordeón a lo ancho, sin bordes redondeados laterales */
.section-jobs .accordion,
.section-jobs .accordion-item,
.section-jobs .accordion-button {
    border-radius: 0 !important;
}

.section-jobs .accordion-button {
    padding: 1rem 1.25rem;
    background: rgba(255,255,255,.75);
    backdrop-filter: saturate(140%) blur(6px);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}

    .section-jobs .accordion-button:not(.collapsed) {
        background: #fff;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
    }

/* El cuerpo del acordeón no mete margen lateral, lo hacemos nosotros en las cards */
.section-jobs .accordion-body {
    padding: 0;
}

/* Cards con sangría agradable respecto a los bordes del viewport */
.section-jobs .card-job.pro {
    margin-inline: clamp(12px, 4vw, 28px);
    border-radius: 14px;
}

/* Barra con acciones (expandir/colapsar) fija en el top del listado en desktop */
.section-jobs .jobs-tools {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: .5rem clamp(12px, 4vw, 28px);
    background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.6) 80%, transparent);
    backdrop-filter: blur(6px);
}

/* HERO más alto y centrado */
/* tamaño por defecto mejorado */
.hero-careers {
    /* +alto sin exagerar en móviles y ultrawide */
    min-height: clamp(420px, 58vh, 720px);
    padding: clamp(40px, 8vh, 120px) 0 2.5rem;
}

    /* cuando queramos “extra alto” aplicamos .is-tall en el HTML */
    .hero-careers.is-tall {
        min-height: clamp(520px, 68vh, 860px);
        padding-top: clamp(56px, 10vh, 140px);
    }

    /* centra verticalmente título + filtros dentro del hero */
    .hero-careers .container-xxl {
        min-height: inherit; /* hereda alto del hero */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* centrado vertical */
        gap: 14px;
    }

/* el panel de filtros no “salta” hacia abajo en móviles */
@media (max-width: 575.98px) {
    .hero-careers,
    .hero-careers.is-tall {
        min-height: clamp(380px, 52vh, 560px);
        padding-bottom: 1.5rem;
    }
}

/* para que la imagen se vea un poco más de “cuerpo” en pantallas grandes */
@media (min-width: 1200px) {
    .hero-careers.has-image {
        background-position: 50% 52%;
    }
}


/* ===== Header Pro – blanco, limpio, con acentos sutiles ===== */
:root {
    --hdr-h: 66px;
    --brand-h: 42px;
}

.careers-navbar {
    background: #fff !important;
    border-bottom: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 2px 10px rgba(16,24,40,.04);
    padding: .65rem 0;
    transition: padding .16s ease, box-shadow .16s ease, border-color .16s ease;
    position: relative;
    z-index: 1040;
}

    /* franja de acento minimal */
    .careers-navbar::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: linear-gradient(90deg,#2563eb, #0ea5e9);
        opacity: .25; /* muy sutil; sube si quieres más presencia */
        pointer-events: none;
    }

    /* estado compacto on-scroll */
    .careers-navbar.scrolled {
        padding: .45rem 0;
        box-shadow: 0 8px 18px rgba(16,24,40,.06);
    }

/* LOGO más largo/nítido */
.navbar-brand .brand-mark {
    height: var(--brand-h);
    width: auto;
    display: block;
}

/* Word-mark opcional junto al logo (ensancha sin deformar el PNG) */
.brand-stack .brand-word {
    font-weight: 800;
    letter-spacing: .2px;
    color: #0f172a;
    font-size: clamp(1rem, .9rem + .3vw, 1.15rem);
}

.brand-stack .brand-by {
    font-size: .72rem;
    margin-top: .15rem;
}

/* Nav links alineados + subrayado animado */
.navbar .nav-link {
    position: relative;
    padding: .9rem 1rem;
    line-height: 1;
    font-weight: 700;
    color: #0f172a;
}

    .navbar .nav-link:hover {
        color: var(--bs-primary);
        text-decoration: none;
    }

    .navbar .nav-link::after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: .35rem;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .18s ease;
        opacity: .55;
    }

    .navbar .nav-link:hover::after {
        transform: scaleX(1);
    }

/* Botones del header */
.careers-navbar .btn-cta {
    font-weight: 800;
    border-radius: 10px;
    padding: .55rem .9rem;
}

.careers-navbar .btn-ghost {
    border-color: rgba(37,99,235,.35);
}

/* Reserva para fixed-top (si tu layout no la tiene) */
html {
    scroll-padding-top: calc(var(--hdr-h) + 8px);
}

body.has-fixed-header {
    padding-top: var(--hdr-h);
}

/* Responsivo: reduce la altura del logo en pantallas menores */
@media (max-width: 1199.98px) {
    :root {
        --brand-h: 36px;
        --hdr-h: 62px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --brand-h: 30px;
        --hdr-h: 58px;
    }
}

/* Offcanvas coherente */
#careersOffcanvas .nav-link {
    font-weight: 600;
    color: #0f172a;
}

    #careersOffcanvas .nav-link:hover {
        color: var(--bs-primary);
    }

/* Modo oscuro del SO: fuerza blanco en nav */
@media (prefers-color-scheme: dark) {
    .careers-navbar {
        background: #fff !important;
    }

    .navbar .nav-link {
        color: #0f172a;
    }
}


/* Barra superior limpia y blanca */
.careers-navbar {
    background: #fff;
    border-bottom: 1px solid rgba(16,24,40,.06);
    box-shadow: 0 1px 0 rgba(16,24,40,.02);
    padding-block: .45rem;
    height: 68px; /* altura consistente */
    transition: box-shadow .2s ease, height .2s ease;
}

/* —— BRAND ——————————————————————————— */
.brand-slab {
    text-decoration: none;
    padding-block: .2rem;
}

.brand-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    line-height: 1;
}

/* Logo grande y nítido (crece en pantallas amplias y reduce al hacer scroll) */
.brand-logo {
    height: clamp(30px, 3.2vw, 44px); /* sube/baja estos límites si quieres aún más grande */
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.04));
    transition: height .2s ease;
}

/* Separador vertical elegante (sustituye al | textual) */
.brand-divider {
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, rgba(16,24,40,.35), rgba(16,24,40,.12));
    display: inline-block;
    transform: translateY(2px);
}

/* “Careers” con presencia (pero sin recargar) */
.brand-section {
    font-weight: 900;
    letter-spacing: .3px;
    font-size: clamp(1.05rem, .6rem + 1vw, 1.55rem);
    background: linear-gradient(90deg, #0d6efd, #579BFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0d6efd;
    white-space: nowrap;
}

/* En scroll: el header se compacta con sombra suave (look enterprise) */
.careers-navbar.scrolled {
    height: 62px;
    box-shadow: 0 6px 22px rgba(16,24,40,.08);
}

    .careers-navbar.scrolled .brand-logo {
        height: clamp(26px, 2.6vw, 36px);
    }

    .careers-navbar.scrolled .brand-section {
        font-size: clamp(1rem, .5rem + .8vw, 1.3rem);
    }

/* —— NAV ———————————————————————————— */
.careers-navbar .nav-link {
    color: #1f2937;
    font-weight: 600;
    padding-block: .4rem;
    padding-inline: .9rem;
    position: relative;
    transition: color .15s ease;
}

    .careers-navbar .nav-link:hover {
        color: #0d6efd;
    }

    /* Subrayado animado sutil bajo cada ítem al hover */
    .careers-navbar .nav-link::after {
        content: "";
        position: absolute;
        left: .85rem;
        right: .85rem;
        bottom: .35rem;
        height: 2px;
        background: currentColor;
        opacity: .6;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .18s ease;
    }

    .careers-navbar .nav-link:hover::after {
        transform: scaleX(1);
    }

/* —— Botones de acción ————————————————— */
.careers-navbar .btn {
    height: 36px;
}

.careers-navbar .btn-outline-primary {
    border-width: 2px;
    border-color: #dbe7ff;
    background: #f6f9ff;
    font-weight: 700;
}

.careers-navbar .btn-primary {
    border-radius: 999px;
    padding-inline: 16px;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(13,110,253,.15);
}

/* Offcanvas móvil hereda el estilo limpio */
#careersOffcanvas .nav-link {
    font-weight: 600;
}

.brand-logo {
    height: clamp(30px, 3.2vw, 48px);
}