﻿

@font-face {
    font-family: 'GothamMedium';
    src: url('/fonts/Gotham/Gotham-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

.ef-tabs {
    /* margin: 3.47vw auto 0; */ /* 50px → 3.47vw */
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background: var(--background-primary, #FFFFFF);
    border-radius: 0.56vw; /* 8px */
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.ef-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.56vw; /* 8px */
    min-height: 2.22vw; /* 32px */
    padding: 0.42vw 1.39vw; /* 6px 20px */
    border-right: 0.01vw solid var(--border-subtle, #606060); /* 1px */
    background: var(--background-primary, #FFFFFF);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .ef-tab {
        border-right: 0.2vw solid var(--border-subtle, #606060); /* 1px */
    }
}

.ef-tab:last-child {
    border-right: none;
}

.ef-tab__label {
    display: inline-block;
    height: 1.39vw; /* 20px */
    line-height: 1.39vw; /* 20px */
    font-family: Gotham-Medium;
    font-weight: 500;
    font-size: 0.97vw; /* 14px */
    letter-spacing: 0;
    color: var(--text-secondary, #606060);
    white-space: nowrap;
}

.ef-tab.is-active .ef-tab__label,
.ef-tab[aria-selected="true"] .ef-tab__label {
    color: var(--text-brand-bold, #FF6600);
}

.ef-tab:focus-visible {
    outline: 0.14vw solid var(--text-brand-bold, #FF6600); /* 2px */
    outline-offset: -0.14vw; /* -2px */
}

/* Responsive desktop/móvil */
@media (max-width: 1280px) {
    .ef-tabs {
        width: 100%;
    }
}

/* Adaptación móvil: wrap y tamaño proporcional */
@media (max-width: 767px) {
    .ef-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.94vw;
        /* margin: 4vw auto 0; */
    }

    .ef-tab {
        min-height: 6vw; /* 32px */
        padding: 1.46vw 4.85vw; /* 6px 20px */
        border-right: 0.15vw solid var(--border-sub tle, #D8D8D8); /* 1px ≈ 0.24vw */
    }

    .ef-tab__label {
        font-size: 3vw; /* 12.87px */
        line-height: 1.2;
        white-space: normal; /* permitir salto de línea si es necesario */
        text-align: center;
    }
}
