@font-face {
    font-family: "GothamBlack";
    src: url("/fonts/Gotham/Gotham-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'GothamLight';
    src: url('/fonts/Gotham/Gotham-Light.otf') format('opentype');
    /*font-weight: 300;*/
    font-style: normal;
}

@font-face {
    font-family: 'GothamMedium';
    src: url('/fonts/Gotham/Gotham-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --brand-900: #FF6600;
    --brand-300: #FFD9C0;
    --background-primary: #FFFFFF;
    --blacka5: rgba(0,0,0,.05);
    --blacka10: rgba(0,0,0,.10);
}


.sef-section {
    /* max-width: 83.07vw; */
    width: 100%;
    /* margin-top: 3vw; */
    border-radius: 1.39vw;
    background: #F7F7F7;
    padding: 4.94vw 3.89vw 4.44vw !important;
    height: auto;
    min-height: 33.33vw;
    overflow: visible;
}

.sef-inner {
    width: 100%;
    /* max-width: 75.28vw; */
    /* margin: 0 auto; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.67vw;
}

/* Title */
.sef-title {
    margin: 0;
    display: block;
    width: 100%;
    font-family: Gotham-Black !important;
    font-weight: 900 !important;
    font-size: 3.75vw !important;
    line-height: 5.56vw;
    letter-spacing: -0.07vw;
    color: #C7C7C7;
    /* max-width: 20ch; */
    word-wrap: break-word;
    hyphens: auto;
    text-align: initial;
}

/* Description block */
.sef-descwrap {
    position: relative;
    width: 100%;
    /* max-width: 75.14vw; */ /* 1082px ~ 75.14vw */
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.22,.61,.36,1);
    max-height: 5vw; /* ~150px -> 10.42vw */
    /* margin-top: 0.56vw; */ /* 8px -> 0.56vw */
    clear: both;
}

.sef-desc {
    font-family: "GothamLight", system-ui;
    font-weight: 300;
    font-size: 1.05vw;
    line-height: 1.39vw;
    color: #606060;
    text-align: justify;
    display: block;
    padding-right: 0.56vw;
}

.sef-descwrap[data-has-toggle="true"][data-mode="collapsed"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5vw;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(247,247,247,0) 0%, rgba(247,247,247,0) 20%, #F7F7F7 100%);
}

/* Toggle (JS controla visibilidad) */
.sef-toggle {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: Gotham-Medium;
    width: 100%;
    justify-content: initial;
    font-weight: 350;
    font-size: 1vw;
    line-height: 1rem;
    color: var(--brand-900);
    cursor: pointer;
}

.sef-toggleicon {
    width: 1.5vw !important;
    height: 1.5vw !important;
}
/* Media (imagen de sección) */
.sef-mediawrap {
    width: 100%;
    border-radius: 1.39vw; /* 20px -> 1.39vw */
    background: linear-gradient(180deg, rgba(248,248,248,0) 35.1%, rgba(248,248,248,0) 59.62%, rgba(248,248,248,0.65) 82.69%, #F8F8F8 100%);
    position: relative;
    /* padding: 1.67vw; */ /* 24px -> 1.67vw */
    border: none;
    /* margin-top: 0.56vw; */
}

.sef-media {
    width: 100%;
    /* mejor usar aspect-ratio para mantener proporciones del mockup */
    aspect-ratio: calc(1084 / 867.7999877929688); /* aprox 1.25 */
    max-height: 52.78vw; /* 760px -> 52.78vw (límite) */
    min-height: 15.28vw; /* 220px -> 15.28vw */
    border-radius: 1.39vw;
    background: #eee center/cover no-repeat;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 0;
    border: none;
}

    .sef-media::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,102,0,0) 0%, rgba(255,102,0,0) 50%, rgba(247,247,247,1) 100% );
    }

/* Cards area (ajustes en vw) */
.sef-cards-area {
    --cards-horizontal-reduce: 2vw; /* 30px -> 2.08vw */
    width: 100% !important;
    /* margin-left: calc(var(--cards-horizontal-reduce)/1); */
    /* margin-right: calc(var(--cards-horizontal-reduce)/1); */
    --cards-height: 27.78vw; /* 400px -> 27.78vw */
    --cards-overlap-ratio: 0.55;
    position: relative;
    height: auto;
    /* margin-top: 0; */
    /* margin-left: 2.08vw; */ /* 30px -> 2.08vw */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.11vw; /* 16px -> 1.11vw */
    z-index: 5;
    pointer-events: auto;
    padding: 0;
}

/* Carrusel horizontal */
.sef-cards {
    width: 100%;
    display: flex;
    /* gap: 2vw; */ /* 24px -> 1.67vw */
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 1.83vw 2.42vw; /* 12px 6px -> 0.83vw 0.42vw */
    -webkit-overflow-scrolling: touch;
    background: transparent;
    align-items: center;
    z-index: 6;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

    .sef-cards::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.sef-cards {
    -ms-overflow-style: none;
}

    .sef-cards > * {
        min-height: 1px;
    }

/* Nav y botones */
.sef-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.11vw; /* 16px -> 1.11vw */
    margin-top: 0.56vw;
}

.sef-navbtn {
    width: 2.297vw !important;
    height: 2.297vw !important;
    border-radius: 999px;
    border: 0;
    color: #F7F7F7;
    background: #C7C7C7;
    cursor: not-allowed;
    transition: background .3s ease, transform .2s ease;
}

    .sef-navbtn img {
        width: 1.5vw;
        height: 1.5vw;
    }

    .sef-navbtn:not(.is-disabled) {
        background: var(--brand-900);
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sef-navbtn:active {
        transform: scale(.96);
    }

    .sef-navbtn.is-disabled {
        display: flex;
        background: #C7C7C7;
        cursor: not-allowed;
        align-items: center;
        justify-content: center;
    }



@media (max-width: 767px) {

    .sef-toggleicon {
        width: 4vw !important;
        height: 4vw !important;
    }

    .sef-navbtn img {
        width: 4.2vw;
        height: 4.2vw;
    }

    .sef-mediawrap {
        padding: 0;
    }

    .sef-section {
        /* margin: 5vw auto 0; */
        border-radius: 2.68vw; /* 11.03px -> 2.68vw */
        padding: 10vw 4vw !important; /* top/bot ~100px? adjusted to mockup sensibility */
        min-height: auto;
    }

    .sef-inner {
        /* max-width: 78vw; */
        gap: 5vw;
    }

    /* Title (mobile specified) */
    .sef-title {
        font-size: 6.37704vw !important;
        line-height: 8vw !important;
        width: 100%;
        text-align: center;
        letter-spacing: 0;
        /* margin: 3vw; */
        padding: 0 5vw;
    }

    /* Description text mobile */
    .sef-desc {
        font-weight: 400; /* Book */
        font-size: 3.1vw; /* size/body/sm approximation */
        line-height: 4.4vw; /* approximate to line-height/16 -> adapt */
        text-align: justify;
        padding-right: 0;
        background: linear-gradient(180deg, rgba(247,247,247,0) 0%, rgba(247,247,247,0) 20%, #F7F7F7 100%);
        padding: 0 5vw;
        font-family: Gotham-Book;
    }

    .sef-descwrap {
        max-height: 30vw;
    }

        .sef-descwrap[data-has-toggle="true"][data-mode="collapsed"]::after {
            height: 30vw;
        }

    /* Toggle mobile: center and position as requested (centering preferred) */
    .sef-toggle {
        display: inline-flex;
        justify-content: center;
        gap: 1.94vw; /* 8px -> 1.94vw */
        width: auto;
        font-size: 3.1vw;
    }

    /* Image mobile (mockup values) */
    .sef-media {
        width: 100%; /* 300px -> 72.82vw */
        height: 100%;
        max-height: 110vw;
        aspect-ratio: calc(300 / 405); /* preserve proportion */
        border-radius: 3.40vw; /* 14px -> 3.40vw */
    }

    /* Cards area on mobile adjustments */
    .sef-cards-area {
        --cards-height: 43vw; /* 240px -> example ~ 58.25vw (responsive) */
        /* margin-top: -18vw; */
        height: auto;
        /* margin-left: 0; */
        width: 100%;
        /* top: -20vw; */
    }

    .sef-cards {
        gap: 6vw;
        /* padding: 2vw; */
        width: 100%;
        overflow-x: auto;
    }

    /* nav */
    .sef-nav {
        gap: 4vw;
        margin-top: 2vw;
    }

    .sef-navbtn {
        width: 9.37176vw !important;
        height: 9.37176vw !important;
    }
    /* touch-friendly */
}


/* ===========================
   TAB SECTION (convertida parcialmente a vw)
   Mantengo la funcionalidad; cambio medidas para seguir mockup
   =========================== */

.tab-seccion {
    max-width: 83.07vw; /* 1195px -> 83.07vw */
    width: 100%;
    margin: 0.69vw auto; /* 10px -> 0.69vw */
    padding: 0.35vw; /* 5px -> 0.35vw */
}

.tab-seccion__inner {
    display: flex;
    flex-direction: column;
    gap: 1.67vw; /* 24px -> 1.67vw */
}

.tab-seccion__nav {
    display: flex;
    gap: 1.5vw; /* 8px -> 0.56vw */
    /*flex-wrap: wrap;*/
    overflow: auto;
}

@media(max-width:767px) {
    .tab-seccion__tab {
        border: 0.3vw solid #C7C7C7; /* 1px -> 0.07vw */
    }
}

.tab-seccion__tab {
    width: auto;
    height: 2.5vw; /* 36px -> 2.5vw */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.56vw; /* 8px */
    border-radius: 1000px;
    padding: 0.56vw 1.67vw; /* 8px 24px -> 0.56vw 1.67vw */
    border: 0.05vw solid #C7C7C7; /* 1px -> 0.07vw */
    background: transparent;
    color: #C7C7C7;
    font-family: 'Gotham-Medium';
    font-weight: 400;
    font-size: 0.97vw; /* 14px -> 0.97vw */
    /* line-height: 1.39vw; */ /* 20px -> 1.39vw */
    cursor: pointer;
    transition: all 0.3s ease;
}

    .tab-seccion__tab.is-active {
        background: var(--background-brand, #FF6600);
        color: var(--white-a100, #FFFFFF);
        border-color: #FF6600;
    }

    .tab-seccion__tab:hover:not(.is-active) {
        opacity: 0.8;
    }

.tab-seccion__content {
    position: relative;
}

.tab-seccion__panel {
    display: none;
}

    .tab-seccion__panel.is-active {
        display: block;
    }

/* Mobile tweaks for tabs (wrap into rows and scale) */
@media (max-width: 767px) {

    .tab-seccion__inner {
        gap: 6vw;
    }

    .tab-seccion__nav {
        gap: 4vw;
    }

    .tab-seccion {
        margin: 4vw auto;
    }

    .tab-seccion__tab {
        height: 100%;
        min-width: 60%;
        padding: 1.5vw 2.85vw;
        font-size: 3.12vw;
        line-height: 4.5vw;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 2vw 0vw;
        border: 0.05vw solid #C7C7C7
    }
}

/* keep any other existing rules intact */

@media (min-width: 768px) {
    .sef-cards {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: none;
        /* scroll-snap-type: x mandatory; */
        gap: 2.5vw;
        padding: 0 0vw 2vw 2vw;
        -webkit-overflow-scrolling: touch;
        position: relative;
        align-items: center;
        justify-content: start;
    }

        .sef-cards::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

    .gestion-card {
        flex: 0 0 22vw; /* ancho fijo como un slider real */
        scroll-snap-align: start;
    }
}

.gestion-card {
    scroll-snap-align: start;
}

.sef-media--movil {
    display: none;
}

@media (max-width: 767px) {
    .sef-media--desktop {
        display: none;
    }

    .sef-media--movil {
        display: block;
    }
}