/* =========================================================
   CATÁLOGO DE RECETARIOS
========================================================= */

.sh-recetarios-catalog {
    --catalog-accent:
        #e56b4a;

    --catalog-soft:
        #e5ece8;

    min-height:
        70vh;

    background:
        #f7f4ed;
}


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

.sh-recetarios-hero {
    padding:
        62px 0 34px;
}


.sh-recetarios-heading {
    max-width:
        760px;

    margin:
        0 auto;

    text-align:
        center;
}


.sh-recetarios-heading .sh-script {
    margin-bottom:
        7px;

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


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

    font-size:
        clamp(
            3.15rem,
            6.2vw,
            5.35rem
        );

    line-height:
        0.9;
}


.sh-recetarios-heading p {
    max-width:
        580px;

    margin:
        21px auto 0;

    font-size:
        1rem;

    line-height:
        1.65;

    color:
        #304a43;
}


/* =========================================================
   FILTROS
========================================================= */

.sh-recetarios-filters {
    position:
        sticky;

    top:
        78px;

    z-index:
        100;

    padding:
        12px 0 18px;

    background:
        rgba(
            247,
            244,
            237,
            0.92
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        rgba(
            24,
            53,
            47,
            0.075
        );
}


.sh-recetarios-type-tabs {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        8px;

    flex-wrap:
        wrap;
}


.sh-recetarios-type-link {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        36px;

    padding:
        8px 15px;

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

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.54
        );

    font-size:
        0.78rem;

    color:
        #18352f;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.sh-recetarios-type-link:hover,
.sh-recetarios-type-link.is-active {
    border-color:
        #e56b4a;

    background:
        #e56b4a;

    color:
        #ffffff;

    transform:
        translateY(-1px);
}


.sh-recetarios-category-scroll {
    display:
        flex;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        12px;

    padding-bottom:
        2px;

    overflow-x:
        auto;

    scrollbar-width:
        thin;

    overscroll-behavior-x:
        contain;
}


.sh-recetarios-category-link {
    flex:
        0 0 auto;

    display:
        inline-flex;

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        #e5ece8;

    color:
        #304a43;

    font-size:
        0.69rem;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.sh-recetarios-category-link:hover,
.sh-recetarios-category-link.is-active {
    background:
        #18352f;

    color:
        #ffffff;
}


/* =========================================================
   RESULTADOS
========================================================= */

.sh-recetarios-results {
    padding:
        38px 0 94px;
}


.sh-recetarios-result-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    max-width:
        940px;

    margin:
        0 auto 36px;

    font-size:
        0.72rem;

    color:
        #8a9691;
}


.sh-recetarios-result-meta a {
    color:
        #c65338;
}


/* =========================================================
   ZIGZAG
========================================================= */

.sh-recetarios-zigzag {
    width:
        min(
            100%,
            940px
        );

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        18px 74px;

    align-items:
        start;
}


.sh-recetario-card {
    --card-accent:
        #e56b4a;

    --card-soft:
        #e5ece8;

    width:
        min(
            100%,
            320px
        );
}


.sh-recetario-card-1,
.sh-recetario-card-3 {
    justify-self:
        start;
}


.sh-recetario-card-2,
.sh-recetario-card-4 {
    justify-self:
        end;
}


.sh-recetario-card-2 {
    margin-top:
        62px;
}


.sh-recetario-card-3 {
    margin-top:
        -34px;
}


.sh-recetario-card-4 {
    margin-top:
        46px;
}


/* =========================================================
   ACENTOS POR CATEGORÍA
========================================================= */

.sh-recetario-cat-desayunos {
    --card-accent:
        #e56b4a;

    --card-soft:
        #f8ddd5;
}


.sh-recetario-cat-oficina {
    --card-accent:
        #789588;

    --card-soft:
        #e5ece8;
}


.sh-recetario-cat-loncheras {
    --card-accent:
        #9c87c6;

    --card-soft:
        #eee8fa;
}


.sh-recetario-cat-snacks {
    --card-accent:
        #557064;

    --card-soft:
        #e5ece8;
}


.sh-recetario-cat-meal-prep {
    --card-accent:
        #d0a64a;

    --card-soft:
        #f2e7c7;
}


.sh-recetario-cat-para-ninos {
    --card-accent:
        #d98b79;

    --card-soft:
        #f8ddd5;
}


.sh-recetario-cat-bebidas {
    --card-accent:
        #789588;

    --card-soft:
        #e5ece8;
}


.sh-recetario-cat-retos {
    --card-accent:
        #d8a34a;

    --card-soft:
        #f2e7c7;
}


/* =========================================================
   TARJETA
========================================================= */

.sh-recetario-card-link {
    display:
        block;
}


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

    isolation:
        isolate;
}


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

    z-index:
        -1;

    inset:
        9% -8% -5% 9%;

    border-radius:
        40% 60% 54% 46% /
        46% 44% 56% 54%;

    background:
        var(
            --card-soft
        );

    transform:
        rotate(
            4deg
        );
}


.sh-recetario-card:nth-child(even)
.sh-recetario-card-blob {
    transform:
        rotate(
            -4deg
        );
}


.sh-recetario-card-cover {
    aspect-ratio:
        3 / 4;

    margin:
        0;

    overflow:
        hidden;

    border:
        7px solid
        #ffffff;

    border-radius:
        28px;

    background:
        #ffffff;

    box-shadow:
        0 22px 55px
        rgba(
            24,
            53,
            47,
            0.12
        );

    transform:
        rotate(
            -1deg
        );

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}


.sh-recetario-card:nth-child(even)
.sh-recetario-card-cover {
    transform:
        rotate(
            1.1deg
        );
}


.sh-recetario-card-link:hover
.sh-recetario-card-cover {
    transform:
        rotate(0deg)
        translateY(-5px);

    box-shadow:
        0 30px 68px
        rgba(
            24,
            53,
            47,
            0.16
        );
}


.sh-recetario-card-cover img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.sh-recetario-card-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    padding:
        28px;

    text-align:
        center;

    background:
        var(
            --card-soft
        );
}


.sh-recetario-card-placeholder span {
    font-family:
        "Sacramento",
        cursive;

    font-size:
        1.8rem;

    color:
        var(
            --card-accent
        );
}


.sh-recetario-card-placeholder strong {
    font-family:
        "Chewy",
        cursive;

    font-size:
        2.7rem;

    font-weight:
        400;

    line-height:
        0.95;
}


/* =========================================================
   INFORMACIÓN
========================================================= */

.sh-recetario-card-info {
    position:
        relative;

    z-index:
        2;

    width:
        calc(
            100% - 24px
        );

    margin:
        -24px auto 0;

    padding:
        15px 17px 16px;

    border:
        2px solid
        var(
            --card-accent
        );

    border-radius:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    box-shadow:
        0 11px 28px
        rgba(
            24,
            53,
            47,
            0.075
        );
}


.sh-recetario-card-topline {
    display:
        grid;

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

    align-items:
        center;

    gap:
        8px;
}


.sh-recetario-card-topline span {
    display:
        inline-flex;

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        var(
            --card-soft
        );

    font-size:
        0.61rem;

    color:
        #304a43;
}


.sh-recetario-card-topline strong {
    font-size:
        0.65rem;

    font-weight:
        400;

    color:
        var(
            --card-accent
        );
}


.sh-recetario-card-info h2 {
    margin:
        9px 0 0;

    font-size:
        clamp(
            1.42rem,
            2.45vw,
            1.88rem
        );

    line-height:
        0.97;

    color:
        #18352f;
}


.sh-recetario-card-info p {
    margin:
        9px 0 0;

    font-size:
        0.74rem;

    line-height:
        1.45;

    color:
        #5d6c66;
}


.sh-recetario-card-action {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        12px;

    color:
        var(
            --card-accent
        );

    font-size:
        0.7rem;
}


.sh-recetario-card-action
span:last-child {
    transition:
        transform 0.2s ease;
}


.sh-recetario-card-link:hover
.sh-recetario-card-action
span:last-child {
    transform:
        translateX(
            4px
        );
}


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

.sh-recetarios-pagination {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        72px;
}


.sh-recetarios-page-link {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #18352f;

    font-size:
        0.74rem;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.sh-recetarios-page-link:hover,
.sh-recetarios-page-link.is-active {
    background:
        #18352f;

    color:
        #ffffff;

    transform:
        translateY(
            -2px
        );
}


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

.sh-recetarios-empty {
    max-width:
        620px;

    margin:
        36px auto;

    padding:
        62px 30px;

    border-radius:
        34px;

    text-align:
        center;

    background:
        #ffffff;

    box-shadow:
        0 20px 54px
        rgba(
            24,
            53,
            47,
            0.07
        );
}


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

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

    line-height:
        0.95;
}


.sh-recetarios-empty p {
    margin:
        17px auto 22px;

    max-width:
        420px;

    line-height:
        1.55;

    color:
        #5d6c66;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .sh-recetarios-zigzag {
        gap:
            30px 54px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 640px) {

    .sh-recetarios-hero {
        padding:
            38px 0 22px;
    }


    .sh-recetarios-heading .sh-script {
        font-size:
            1.72rem;
    }


    .sh-recetarios-heading h1 {
        font-size:
            clamp(
                2.85rem,
                14vw,
                3.85rem
            );
    }


    .sh-recetarios-heading p {
        margin-top:
            15px;

        font-size:
            0.86rem;
    }


    .sh-recetarios-filters {
        top:
            68px;

        padding:
            9px 0 12px;
    }


    .sh-recetarios-type-tabs {
        gap:
            6px;
    }


    .sh-recetarios-type-link {
        min-height:
            32px;

        padding:
            7px 12px;

        font-size:
            0.69rem;
    }


    .sh-recetarios-category-scroll {
        margin-top:
            9px;
    }


    .sh-recetarios-results {
        padding:
            27px 0 62px;
    }


    .sh-recetarios-result-meta {
        margin-bottom:
            28px;
    }


    /*
     * En móvil no hacemos dos portadas diminutas.
     * Conservamos una sola columna y alternamos
     * izquierda / derecha, como el boceto de Canva.
     */

    .sh-recetarios-zigzag {
        display:
            flex;

        flex-direction:
            column;

        gap:
            0;
    }


    .sh-recetario-card {
        width:
            min(
                56%,
                215px
            );

        margin-top:
            0;
    }


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

        margin-left:
            9%;
    }


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

        margin-right:
            8%;

        margin-top:
            -28px;
    }


    .sh-recetario-card:nth-child(3) {
        margin-top:
            -22px;
    }


    .sh-recetario-card:nth-child(4) {
        margin-top:
            -30px;
    }


    .sh-recetario-card-blob {
        inset:
            9% -5% -4% 8%;

        border-radius:
            35% 65% 58% 42% /
            48% 42% 58% 52%;
    }


    .sh-recetario-card-cover {
        border-width:
            5px;

        border-radius:
            21px;

        box-shadow:
            0 14px 35px
            rgba(
                24,
                53,
                47,
                0.1
            );
    }


    .sh-recetario-card-info {
        width:
            calc(
                100% - 10px
            );

        margin-top:
            -16px;

        padding:
            11px 12px 12px;

        border-width:
            1.5px;

        border-radius:
            15px;
    }


    .sh-recetario-card-topline span {
        padding:
            4px 6px;

        font-size:
            0.52rem;
    }


    .sh-recetario-card-topline strong {
        font-size:
            0.56rem;
    }


    .sh-recetario-card-info h2 {
        margin-top:
            7px;

        font-size:
            clamp(
                1.16rem,
                5.8vw,
                1.52rem
            );
    }


    .sh-recetario-card-info p {
        margin-top:
            7px;

        font-size:
            0.62rem;
    }


    .sh-recetario-card-action {
        margin-top:
            8px;

        font-size:
            0.61rem;
    }


    .sh-recetarios-pagination {
        margin-top:
            52px;
    }


    .sh-recetarios-page-link {
        width:
            37px;

        height:
            37px;

        font-size:
            0.68rem;
    }


    .sh-recetarios-empty {
        padding:
            46px 20px;

        border-radius:
            27px;
    }

}


/* =========================================================
   RECETARIOS — AJUSTE SÓLO DESKTOP
   Móvil permanece exactamente como estaba.
========================================================= */

@media (min-width: 641px) {

    .sh-recetarios-zigzag {
        width: min(100%, 710px);
        gap: 4px 28px;
    }

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

    .sh-recetario-card-1,
    .sh-recetario-card-3 {
        justify-self: end;
    }

    .sh-recetario-card-2,
    .sh-recetario-card-4 {
        justify-self: start;
    }

    .sh-recetario-card-2 {
        margin-top: 38px;
    }

    .sh-recetario-card-3 {
        margin-top: -46px;
    }

    .sh-recetario-card-4 {
        margin-top: 18px;
    }

}



/* =========================================================
   AJUSTES FINALES DE TARJETA
========================================================= */

.sh-recetario-card-topline > span {
    grid-column:
        1;

    justify-self:
        start;
}

.sh-recetario-card-topline > strong {
    grid-column:
        2;

    justify-self:
        center;

    min-width:
        48px;

    text-align:
        center;
}

.sh-recetario-card-topline > strong:first-child {
    grid-column:
        2;
}


/* =========================================================
   MISMO ACOMODO APROBADO DEL HOME
========================================================= */

@media (min-width: 641px) {

    .sh-recetarios-zigzag {
        width:
            min(100%, 700px);

        gap:
            4px 26px;
    }

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

    .sh-recetario-card-1,
    .sh-recetario-card-3 {
        justify-self:
            end;
    }

    .sh-recetario-card-2,
    .sh-recetario-card-4 {
        justify-self:
            start;
    }

    .sh-recetario-card-2 {
        margin-top:
            38px;
    }

    .sh-recetario-card-3 {
        margin-top:
            -48px;
    }

    .sh-recetario-card-4 {
        margin-top:
            18px;
    }

}


@media (max-width: 640px) {

    .sh-recetarios-category-scroll {
        justify-content:
            flex-start;
    }

    .sh-recetarios-zigzag {
        display:
            flex;

        flex-direction:
            column;

        gap:
            2px;

        width:
            100%;
    }

    .sh-recetario-card {
        width:
            min(52%, 205px);

        margin-top:
            0;
    }

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

        margin-left:
            12%;
    }

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

        margin-right:
            10%;

        margin-top:
            -28px;
    }

    .sh-recetario-card:nth-child(3) {
        margin-top:
            -20px;
    }

    .sh-recetario-card:nth-child(4) {
        margin-top:
            -30px;
    }

}