/*<--------------------------------------------------->
<!--  Beneficios (section component)                 -->
<!----------------------------------------------------->
* Description:
    Institutional benefits section for #beneficios with
    a mobile scroll-snap carousel and desktop card grid.
* Parameters:
    - None
* Dependencies:
    - style.css custom properties
    - beneficios.js JSON rendering
* Returns/results:
    Styles the section intro, benefits cards, mobile controls,
    and responsive 3x2 desktop grid.
<!--------------------------------------------------->*/

/*###################################################*/
/*...................................................*/
/* beneficios shell                                  */
/*...................................................*/
/*###################################################*/

.beneficios {
    --beneficiosContentWidth: 60rem;

    display: flex;
    align-items: center;
    justify-content: center;

    @media (min-width: 1300px) {
        --beneficiosContentWidth: 64rem;
    }
}

.beneficios > .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-bottom: 1rem;

    @media (min-width: 768px) {
        padding-bottom: 3rem;
    }
}

.beneficios .sectionHeader {
    width: min(100%, var(--beneficiosContentWidth));

    @media (min-width: 991px) {
        width: 100%;
    }
}

.beneficiosIntro {
    max-width: 44rem;
    margin: 1.35rem 0 0;
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1vw, 1.08rem);
    line-height: 1.7;
    color: hsla(0, 30%, 96%, 0.54);
}

/*###################################################*/
/*...................................................*/
/* end beneficios shell                              */
/*...................................................*/
/*###################################################*/

/*###################################################*/
/*...................................................*/
/* beneficios carousel                               */
/*...................................................*/
/*###################################################*/

.beneficiosCarousel {
    width: min(100%, var(--beneficiosContentWidth));
    min-width: 0;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2.75rem;
    padding-left: 0.5rem;

    @media (min-width: 768px) {
        padding: 0 2rem;
    }
}

.beneficiosTrack {
    display: flex;
    gap: 0.85rem;
    width: 100%;
    margin: 0;
    padding: 0 1rem 0.5rem 0;
    list-style: none;
    overflow-x: auto;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    @media (min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
    }
}

/*###################################################*/
/*...................................................*/
/* end beneficios carousel                           */
/*...................................................*/
/*###################################################*/

/*###################################################*/
/*...................................................*/
/* beneficios cards                                  */
/*...................................................*/
/*###################################################*/

.beneficiosCard {
    display: block;
    flex: 0 0 min(86%, 20rem);
    min-height: 15.75rem;
    padding: 1.65rem 1.5rem;
    scroll-snap-align: start;
    background: hsla(0, 0%, 100%, 0.035);
    border: 1px solid hsla(0, 0%, 100%, 0.055);
    border-radius: 8px;
    transition: border-color 0.2s ease, background-color 0.2s ease;

    @media (hover: hover) {
        &:hover {
            background: hsla(0, 0%, 100%, 0.055);
            border-color: hsla(0, 0%, 100%, 0.11);
        }
    }

    @media (min-width: 768px) {
        min-height: 17.25rem;
        padding: 1.7rem 1.45rem;
        scroll-snap-align: none;
    }
}

.beneficiosCardNumber {
    display: block;
    margin-bottom: 1.3rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
    color: hsla(0, 30%, 96%, 0.22);
    letter-spacing: 0.05em;
}

.beneficiosCardTitle {
    margin: 0 0 1.05rem;
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.22vw, 1.28rem);
    font-weight: 700;
    line-height: 1.14;
    color: hsla(0, 0%, 100%, 0.94);
}

.beneficiosCardText {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(0.84rem, 0.9vw, 0.95rem);
    line-height: 1.65;
    color: hsla(0, 30%, 96%, 0.48);
}

.beneficiosFallback {
    flex: 0 0 min(86%, 20rem);
    padding: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: hsla(0, 30%, 96%, 0.58);
    background: hsla(0, 0%, 100%, 0.035);
    border: 1px solid hsla(0, 0%, 100%, 0.055);
    border-radius: 8px;

    @media (min-width: 768px) {
        grid-column: 1 / -1;
    }
}

/*###################################################*/
/*...................................................*/
/* end beneficios cards                              */
/*...................................................*/
/*###################################################*/

/*###################################################*/
/*...................................................*/
/* beneficios controls                               */
/*...................................................*/
/*###################################################*/

.beneficiosControls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.45rem;

    @media (min-width: 768px) {
        display: none;
    }
}

.beneficiosControl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    font-size: 1rem;
    color: hsla(0, 30%, 96%, 0.55);
    background: hsla(0, 0%, 100%, 0.04);
    border: 1px solid hsla(0, 0%, 100%, 0.15);
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;

    @media (hover: hover) {
        &:hover:not(:disabled) {
            color: hsla(0, 30%, 96%, 0.9);
            background: hsla(0, 0%, 100%, 0.08);
            border-color: hsla(0, 0%, 100%, 0.22);
        }
    }

    &:disabled {
        opacity: 0.25;
        cursor: not-allowed;
    }

    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
    }
}

.beneficiosDots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.beneficiosDot {
    width: 7px;
    height: 7px;
    padding: 0;
    background: hsla(0, 0%, 100%, 0.15);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width 0.28s ease, background 0.28s ease;

    &.active {
        width: 22px;
        background: var(--primary);
    }

    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 4px;
    }
}

/*###################################################*/
/*...................................................*/
/* end beneficios controls                           */
/*...................................................*/
/*###################################################*/

/*<!--------------------------------------------------->
<!--  end Beneficios                                -->
<!--------------------------------------------------->*/