/* =========================================================
   RETOS — CATÁLOGO V1
========================================================= */

.sh-retos-page {
    min-height:
        70vh;

    background:
        var(--sh-cream);
}


/* =========================================================
   HERO
========================================================= */

.sh-retos-hero {
    padding:
        58px 0 34px;
}


.sh-retos-heading {
    width:
        min(100%, 720px);

    margin:
        0 auto;

    text-align:
        center;
}


.sh-retos-heading .sh-script {
    margin-bottom:
        5px;

    font-size:
        clamp(
            1.9rem,
            4vw,
            2.5rem
        );
}


.sh-retos-heading h1 {
    margin:
        0;

    font-size:
        clamp(
            3.6rem,
            7vw,
            5.9rem
        );

    line-height:
        .92;
}


.sh-retos-heading p {
    width:
        min(100%, 590px);

    margin:
        19px auto 0;

    font-size:
        .98rem;

    line-height:
        1.68;

    color:
        var(--sh-green-2);
}


/* =========================================================
   RETO DESTACADO
========================================================= */

.sh-retos-featured {
    padding:
        28px 0 56px;
}


.sh-reto-featured-card {
    position:
        relative;

    isolation:
        isolate;

    display:
        grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items:
        center;

    gap:
        clamp(
            38px,
            6vw,
            82px
        );

    width:
        min(100%, 930px);

    margin:
        0 auto;

    padding:
        clamp(
            28px,
            4vw,
            46px
        );

    border:
        1px solid
        rgba(24, 53, 47, .08);

    border-radius:
        38px;

    background:
        rgba(255, 255, 255, .54);

    box-shadow:
        0 24px 70px
        rgba(24, 53, 47, .07);

    overflow:
        hidden;
}


.sh-reto-featured-card::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    width:
        240px;

    height:
        240px;

    right:
        -85px;

    bottom:
        -105px;

    border-radius:
        48% 52% 58% 42% /
        52% 41% 59% 48%;

    background:
        rgba(216, 163, 74, .16);

    transform:
        rotate(12deg);
}


.sh-reto-featured-gratis::before {
    background:
        rgba(229, 107, 74, .13);
}


.sh-reto-featured-art {
    position:
        relative;

    width:
        min(100%, 320px);

    margin:
        0 auto;
}


.sh-reto-featured-blob {
    position:
        absolute;

    inset:
        8% -8% -7% 7%;

    border-radius:
        44% 56% 48% 52% /
        52% 43% 57% 48%;

    background:
        #dce5dc;

    transform:
        rotate(-5deg);
}


.sh-reto-featured-premium
.sh-reto-featured-blob {
    background:
        #dcc58a;
}


.sh-reto-featured-image {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    aspect-ratio:
        3 / 4;

    overflow:
        hidden;

    border:
        7px solid #fff;

    border-radius:
        22px;

    background:
        #e5ece8;

    box-shadow:
        0 19px 45px
        rgba(24, 53, 47, .15);

    transform:
        rotate(2.2deg);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.sh-reto-featured-image:hover {
    transform:
        rotate(.6deg)
        translateY(-3px);

    box-shadow:
        0 24px 52px
        rgba(24, 53, 47, .18);
}


.sh-reto-featured-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.sh-reto-image-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        grid;

    align-content:
        center;

    justify-items:
        center;

    gap:
        5px;

    padding:
        20px;

    text-align:
        center;

    background:
        #e5ece8;

    color:
        var(--sh-green);
}


.sh-reto-featured-premium
.sh-reto-image-placeholder,
.sh-reto-card-premium
.sh-reto-image-placeholder {
    background:
        #efe3c8;
}


.sh-reto-image-placeholder small {
    font-size:
        .67rem;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.sh-reto-image-placeholder strong {
    font-family:
        "Chewy",
        cursive;

    font-size:
        clamp(
            2.7rem,
            6vw,
            4.8rem
        );

    font-weight:
        400;

    line-height:
        1;
}


.sh-reto-featured-eyebrow {
    display:
        block;

    margin-bottom:
        12px;

    font-size:
        .67rem;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    color:
        var(--sh-terra-dark);
}


.sh-reto-featured-meta,
.sh-reto-card-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px;
}


.sh-reto-badge,
.sh-reto-duration,
.sh-reto-category {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        28px;

    padding:
        5px 10px;

    border-radius:
        999px;

    font-size:
        .63rem;

    line-height:
        1;
}


.sh-reto-badge {
    background:
        var(--sh-terra);

    color:
        #fff;
}


.sh-reto-badge-premium {
    background:
        var(--sh-yellow);

    color:
        var(--sh-green);
}


.sh-reto-duration {
    background:
        var(--sh-sage);

    color:
        var(--sh-green-2);
}


.sh-reto-category {
    background:
        rgba(255, 255, 255, .8);

    border:
        1px solid
        rgba(24, 53, 47, .08);

    color:
        var(--sh-muted);
}


.sh-reto-featured-content h2 {
    max-width:
        580px;

    margin:
        18px 0 0;

    font-size:
        clamp(
            2.45rem,
            5vw,
            4.4rem
        );

    line-height:
        .96;

    text-wrap:
        balance;
}


.sh-reto-featured-content > p {
    max-width:
        560px;

    margin:
        18px 0 0;

    font-size:
        .94rem;

    line-height:
        1.65;

    color:
        var(--sh-green-2);
}


.sh-reto-primary-action {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        24px;

    padding:
        11px 17px;

    border-radius:
        999px;

    background:
        var(--sh-green);

    color:
        #fff;

    font-size:
        .78rem;

    transition:
        transform .2s ease,
        background .2s ease;
}


.sh-reto-primary-action:hover {
    transform:
        translateY(-2px);

    background:
        var(--sh-terra-dark);
}


/* =========================================================
   CATÁLOGO
========================================================= */

.sh-retos-catalog {
    padding:
        42px 0 92px;
}


.sh-retos-section-heading {
    width:
        min(100%, 680px);

    margin:
        0 auto 42px;

    text-align:
        center;
}


.sh-retos-section-heading .sh-script {
    margin-bottom:
        4px;
}


.sh-retos-section-heading h2 {
    margin:
        0;

    font-size:
        clamp(
            2.7rem,
            5.8vw,
            4.9rem
        );

    line-height:
        .95;
}


.sh-retos-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px 70px;

    width:
        min(100%, 820px);

    margin:
        0 auto;
}


.sh-reto-card {
    width:
        min(100%, 320px);
}


.sh-reto-card:nth-child(odd) {
    justify-self:
        end;
}


.sh-reto-card:nth-child(even) {
    justify-self:
        start;

    margin-top:
        72px;
}


.sh-reto-card:nth-child(4n + 3) {
    margin-top:
        -24px;
}


.sh-reto-card-art {
    position:
        relative;

    display:
        block;

    width:
        88%;

    margin:
        0 auto 26px;
}


.sh-reto-card-blob {
    position:
        absolute;

    inset:
        8% -9% -6% 8%;

    border-radius:
        47% 53% 45% 55% /
        54% 43% 57% 46%;

    background:
        #e4aaa0;

    transform:
        rotate(-5deg);

    transition:
        transform .25s ease;
}


.sh-reto-card-2
.sh-reto-card-blob {
    background:
        #dce5dc;

    transform:
        rotate(4deg);
}


.sh-reto-card-3
.sh-reto-card-blob {
    background:
        #dcc58a;

    transform:
        rotate(-3deg);
}


.sh-reto-card-4
.sh-reto-card-blob {
    background:
        #b7aacd;

    transform:
        rotate(5deg);
}


.sh-reto-card-image {
    position:
        relative;

    z-index:
        2;

    aspect-ratio:
        3 / 4;

    margin:
        0;

    overflow:
        hidden;

    border:
        6px solid #fff;

    border-radius:
        20px;

    background:
        var(--sh-sage);

    box-shadow:
        0 15px 34px
        rgba(24, 53, 47, .12);

    transform:
        rotate(1.7deg);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.sh-reto-card:nth-child(even)
.sh-reto-card-image {
    transform:
        rotate(-1.7deg);
}


.sh-reto-card-art:hover
.sh-reto-card-image {
    transform:
        rotate(0deg)
        translateY(-3px);

    box-shadow:
        0 20px 42px
        rgba(24, 53, 47, .16);
}


.sh-reto-card-art:hover
.sh-reto-card-blob {
    transform:
        rotate(0deg);
}


.sh-reto-card-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.sh-reto-card-info {
    text-align:
        center;
}


.sh-reto-card-meta {
    justify-content:
        center;
}


.sh-reto-card-category {
    display:
        block;

    margin-top:
        10px;

    font-size:
        .65rem;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    color:
        var(--sh-muted);
}


.sh-reto-card-info h3 {
    margin:
        10px auto 0;

    font-family:
        "Sniglet",
        sans-serif;

    font-size:
        clamp(
            1.32rem,
            2.6vw,
            1.78rem
        );

    font-weight:
        400;

    line-height:
        1.12;

    text-wrap:
        balance;
}


.sh-reto-card-info p {
    max-width:
        290px;

    margin:
        11px auto 0;

    font-size:
        .78rem;

    line-height:
        1.52;

    color:
        var(--sh-muted);
}


.sh-reto-card-action {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        13px;

    font-size:
        .75rem;

    color:
        var(--sh-terra-dark);

    transition:
        gap .2s ease;
}


.sh-reto-card-action:hover {
    gap:
        9px;
}


/* =========================================================
   PAGINACIÓN
========================================================= */

.sh-retos-pagination {
    width:
        min(100%, 720px);

    margin:
        64px auto 0;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        16px;
}


.sh-retos-page-link {
    font-size:
        .75rem;

    color:
        var(--sh-terra-dark);
}


.sh-retos-page-prev {
    justify-self:
        start;
}


.sh-retos-page-next {
    justify-self:
        end;
}


.sh-retos-page-current {
    font-size:
        .66rem;

    color:
        var(--sh-muted);
}


/* =========================================================
   ESTADO VACÍO
========================================================= */

.sh-retos-empty {
    width:
        min(100%, 650px);

    margin:
        18px auto 0;

    padding:
        48px 30px;

    border:
        1px solid
        rgba(24, 53, 47, .08);

    border-radius:
        30px;

    background:
        rgba(255, 255, 255, .54);

    text-align:
        center;
}


.sh-retos-empty h2 {
    margin:
        8px 0 0;

    font-size:
        clamp(
            2.1rem,
            5vw,
            3.8rem
        );

    line-height:
        1;
}


.sh-retos-empty p,
.sh-retos-single-note p {
    max-width:
        500px;

    margin:
        15px auto 0;

    font-size:
        .84rem;

    line-height:
        1.6;

    color:
        var(--sh-muted);
}


.sh-retos-single-note {
    text-align:
        center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 820px) {

    .sh-reto-featured-card {
        grid-template-columns:
            minmax(0, .86fr)
            minmax(0, 1.14fr);

        gap:
            30px;

        padding:
            30px;
    }

    .sh-retos-grid {
        gap:
            12px 36px;
    }

}


@media (max-width: 640px) {

    .sh-retos-hero {
        padding:
            38px 0 20px;
    }

    .sh-retos-heading h1 {
        font-size:
            clamp(
                3rem,
                17vw,
                4.1rem
            );
    }

    .sh-retos-heading p {
        max-width:
            92%;

        font-size:
            .86rem;
    }


    .sh-retos-featured {
        padding:
            18px 0 42px;
    }

    .sh-reto-featured-card {
        display:
            flex;

        flex-direction:
            column;

        gap:
            30px;

        width:
            min(100%, 430px);

        padding:
            26px 22px 30px;

        border-radius:
            30px;
    }

    .sh-reto-featured-art {
        width:
            min(72%, 260px);
    }

    .sh-reto-featured-content {
        width:
            100%;

        text-align:
            center;
    }

    .sh-reto-featured-meta {
        justify-content:
            center;
    }

    .sh-reto-featured-content h2 {
        margin-top:
            15px;

        font-size:
            clamp(
                2.35rem,
                12vw,
                3.45rem
            );
    }

    .sh-reto-featured-content > p {
        margin:
            14px auto 0;

        font-size:
            .84rem;
    }

    .sh-reto-primary-action {
        margin-top:
            20px;
    }


    .sh-retos-catalog {
        padding:
            32px 0 72px;
    }

    .sh-retos-section-heading {
        margin-bottom:
            28px;
    }

    .sh-retos-section-heading h2 {
        font-size:
            clamp(
                2.5rem,
                13vw,
                3.7rem
            );
    }


    .sh-retos-grid {
        display:
            flex;

        flex-direction:
            column;

        gap:
            18px;

        width:
            100%;
    }

    .sh-reto-card,
    .sh-reto-card:nth-child(even),
    .sh-reto-card:nth-child(4n + 3) {
        width:
            min(72%, 275px);

        margin-top:
            0;
    }

    .sh-reto-card:nth-child(odd) {
        align-self:
            flex-start;

        margin-left:
            7%;
    }

    .sh-reto-card:nth-child(even) {
        align-self:
            flex-end;

        margin-right:
            7%;

        margin-top:
            -16px;
    }

    .sh-reto-card-art {
        width:
            86%;

        margin-bottom:
            22px;
    }

    .sh-reto-card-info h3 {
        font-size:
            1.35rem;
    }

    .sh-reto-card-info p {
        font-size:
            .73rem;
    }


    .sh-retos-pagination {
        grid-template-columns:
            1fr 1fr;

        margin-top:
            44px;
    }

    .sh-retos-page-current {
        grid-column:
            1 / -1;

        grid-row:
            1;

        justify-self:
            center;
    }

    .sh-retos-page-prev,
    .sh-retos-page-next {
        grid-row:
            2;
    }


    .sh-retos-empty {
        padding:
            38px 22px;
    }

}


/* =========================================================
   FASE 5 — CATÁLOGO MÁS COMERCIAL
========================================================= */

.sh-reto-featured-price {
    display:
        block;

    margin-top:
        13px;

    font-family:
        "Sniglet",
        sans-serif;

    font-size:
        1.18rem;

    font-weight:
        400;

    color:
        var(--sh-green);
}


.sh-reto-featured-perks,
.sh-reto-card-perks {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.sh-reto-featured-perks {
    margin-top:
        9px;
}


.sh-reto-featured-perks span,
.sh-reto-card-perks span {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        rgba(229, 107, 74, .10);

    font-size:
        .58rem;

    line-height:
        1;

    color:
        var(--sh-terra-dark);
}


.sh-reto-card-price {
    display:
        block;

    margin-top:
        9px;

    font-family:
        "Sniglet",
        sans-serif;

    font-size:
        .88rem;

    font-weight:
        400;

    color:
        var(--sh-green);
}


.sh-reto-card-perks {
    justify-content:
        center;

    margin-top:
        8px;
}


.sh-reto-card-action {
    font-weight:
        400;
}


@media (max-width: 640px) {

    .sh-reto-featured-perks {
        justify-content:
            center;
    }

}