/* ==========================================================================
   54. PUNTOS: ESTRUCTURA Y HERO (#pointReward)
   ========================================================================== */
#pointReward {
    background-color: var(--cream-extra-light);
}

#pointReward .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 140px 0 52px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--cream-dark);
}

#pointReward .card__sup {
    display: none;
}

/* Link de retorno/navegación en la tarjeta */
#pointReward .card__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    gap: 16px;
    padding: 0 0 88px 12px;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

#pointReward .card__link p {
    margin: 0;
}

#pointReward .card__title {
    max-width: 900px;
    margin: 0;
    padding-inline: 16px;
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: 0.83px;
    text-transform: uppercase;
    text-align: center;
}

#pointReward .card__description {
    margin: 84px 0 24px;
    padding-inline: 24px;
    color: var(--cream-dark);
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
}

/* Énfasis tipográfico dentro de la descripción */
#pointReward .card__description .bambo {
    font-family: var(--font-heading);
    font-size: 22px;
}

#pointReward .card .primary {
    font-family: var(--font-main);
    color: var(--primary-dark-green);
    text-transform: uppercase;
}

/* ==========================================================================
   55. PUNTOS: FUNCIONAMIENTO (.function)
   ========================================================================== */
#pointReward .row {
    margin: 0;
}

#pointReward .function {
    display: flex;
    flex-direction: column;
}

#pointReward .function__title {
    margin: 0 0 32px;
    padding-inline: 5px;
    color: var(--primary-dark-green);
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

#pointReward .function__description {
    padding-inline: 20px;
    color: var(--primary-dark-green);
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

#pointReward .function__img {
    width: 100%;
    object-fit: cover;
    border-radius: 14px;
}

/* ==========================================================================
   56. PUNTOS: BENEFICIOS (.benefits)
   ========================================================================== */
#pointReward .benefits__title {
    margin-top: 8rem;
    color: var(--primary-dark-green);
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

#pointReward .benefits__description {
    padding-inline: 20px;
    color: var(--primary-dark-green);
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

/* Contenedor con scroll horizontal para móviles */
#pointReward .benefits__content {
    overflow-x: auto;
}

#pointReward .benefits__items {
    display: flex;
    justify-content: center;
    gap: 24px;
    min-width: 650px;
    margin-top: 40px;
    padding: 0;
    list-style: none;
}

#pointReward .benefits__items__card {
    width: 150px;
    color: inherit;
}

#pointReward .benefits__items__card__img {
    width: 52px;
}

#pointReward .benefits__items__card__title,
#pointReward .benefits__items__card__type,
#pointReward .benefits__items__card__benef {
    margin: 0;
    color: var(--primary-dark-green);
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
}

#pointReward .benefits__items__card__type {
    margin: 8px 0;
    font-size: 24px;
}

#pointReward .benefits__items__card__benef {
    margin-top: 24px;
}

#pointReward .benefits__items__card__description {
    max-width: 160px;
    color: var(--primary-dark-green);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

/* Línea decorativa entre tarjetas de beneficio */
#pointReward .benefits__items__card__line {
    position: absolute;
    top: 40%;
    left: 57%;
    width: 98%;
    height: 4px;
    background-color: var(--primary-green);
}

@media (min-width: 720px) {
    #pointReward .benefits__items {
        margin-top: 80px;
    }

    #pointReward .benefits__items__card {
        width: 300px;
    }

    #pointReward .benefits__items__card__description {
        max-width: 100%;
        padding-inline: 40px;
    }
}

/* ==========================================================================
   57. PUNTOS: SECCIÓN FINAL (.points)
   ========================================================================== */
#pointReward .points {
    margin-top: 80px;
}

#pointReward .points__sup {
    margin: 0;
    color: var(--primary-dark-green);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.4px;
    text-align: center;
}

/* ==========================================================================
   58. PUNTOS: LISTADO DE RECOMPENSAS (.points__items)
   ========================================================================== */
#pointReward .points__title {
    margin-top: 8px;
    color: var(--primary-dark-green);
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

#pointReward .points__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 0;
}

/* Tarjeta de Recompensa */
#pointReward .points__items__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    padding-block: 18px;
    background-color: var(--primary-green);
    border-radius: 16px;
}

#pointReward .points__items__card__title {
    margin-bottom: 8px;
    padding-inline: 12px;
    color: var(--primary-dark-green);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    opacity: 1;
}

#pointReward .points__items__card__description {
    margin: 0;
    color: var(--primary-dark-green);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    opacity: 1;
}

#pointReward .points__items__card__img {
    margin-top: 32px;
    width: 100%;
}

#pointReward .points__items__card--inactive {
    opacity: 0.56;
}

/* Imagen de fondo / Decoración final */
#pointReward .bg__montaine {
    width: 100%;
    height: 450px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    filter: saturate(100%);
}

/* ==========================================================================
   59. PUNTOS: OPTIMIZACIÓN DESKTOP (min-width: 720px)
   ========================================================================== */
@media (min-width: 720px) {
    #pointReward .card .primary:hover {
        background-color: var(--primary-green);
    }

    #pointReward .card__sup {
        display: block;
        margin: 0;
        color: var(--cream-dark);
        font-family: var(--font-heading);
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
        text-transform: uppercase;
        opacity: 1;
    }

    #pointReward .card__link {
        display: flex;
        padding-left: 92px;
        padding-bottom: 80px;
    }

    #pointReward .card__title {
        width: 600px;
        font-size: 58px;
        line-height: 72px;
        letter-spacing: 0.83px;
    }

    #pointReward .card__description {
        width: 550px;
        font-size: 16px;
    }

    /* Ajustes de bloque de función (Lado a lado) */
    #pointReward .function {
        flex-direction: row;
        margin-top: 150px;
    }

    #pointReward .function div {
        max-width: 600px;
    }

    #pointReward .function__title {
        max-width: 448px;
        font-size: 64px;
        text-align: left;
    }

    #pointReward .function__description {
        max-width: 448px;
        padding: 0;
        text-align: justify;
    }

    #pointReward .function__img {
        max-width: 750px;
        max-height: 464px;
    }

    /* Recompensas en Desktop */
    #pointReward .points {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 20;
    }

    #pointReward .points__items {
        max-width: 1224px;
        padding-left: 2.5rem;
        flex-direction: row;
        align-items: flex-start;
        gap: 64px;
    }

    #pointReward .points__items__card {
        justify-content: space-evenly;
        width: 304px;
        height: 234px;
        padding: 0;
    }

    #pointReward .points__items__card__img {
        width: 600px;
        height: 600px;
        object-fit: contain;
    }

    #pointReward .bg__montaine {
        position: relative;
        z-index: 1;
        margin-top: -8px;
    }
}

/* ==========================================================================
   60. PUNTOS: AJUSTES MÓVILES ADICIONALES
   ========================================================================== */
@media screen and (max-width: 767px) {
    #pointReward .points__items { gap: 16px; }
    #pointReward .points__items__card { min-height: 226px; }
    #pointReward .function { margin-top: 4rem; }
    #pointReward .function__title { margin-bottom: 24px; }
    #pointReward .function__img { padding: 0 1rem; }
    #pointReward .function__img iframe { width: 100%; }
    #pointReward .benefits__title { margin-top: 4rem; }
}

/* Iframe Global y otros ajustes de contenedor */
#pointReward iframe {
    border-radius: 20px;
}

#pointReward .function {
    @media screen and (max-width: 1023px) {
        gap: 2rem;
    }
}

/* ==========================================================================
   496. FIDELIZACIÓN: TARJETAS DE BENEFICIOS
   ========================================================================== */
#pointReward .benefits__items__card__benefits {
    padding: 0;
    list-style: none;
}

#pointReward .benefits__items__card__description {
    margin-bottom: 10px;
    line-height: 1.2;
    text-align: left;
}