/* =========================================================
   SAVORIAHUB
   SISTEMA VISUAL DE RECETAS
========================================================= */


/* =========================================================
   VARIABLES GENERALES
========================================================= */

.sh-single-recipe {

    --recipe-accent:
        #e56b4a;

    --recipe-accent-dark:
        #c65338;

    --recipe-soft:
        #e5ece8;

    --recipe-surface:
        #ffffff;

    --recipe-hero:
        #f7f4ed;

    --recipe-radius:
        29px;

    --recipe-overlay:
        rgba(247, 244, 237, 0.82);

    --recipe-bg-opacity:
        0.16;
}


/* =========================================================
   01 — NATURAL
========================================================= */

.sh-theme-natural {

    --recipe-accent:
        #e56b4a;

    --recipe-accent-dark:
        #c65338;

    --recipe-soft:
        #e5ece8;

    --recipe-surface:
        #ffffff;

    --recipe-hero:
        #f7f4ed;

    --recipe-radius:
        29px;

    --recipe-overlay:
        rgba(247, 244, 237, 0.84);
}


/* =========================================================
   02 — LONCHERAS
========================================================= */

.sh-theme-lunch {

    --recipe-accent:
        #9c87c6;

    --recipe-accent-dark:
        #745ea5;

    --recipe-soft:
        #eee8fa;

    --recipe-surface:
        #fffdf7;

    --recipe-hero:
        #fbf6e8;

    --recipe-radius:
        35px;

    --recipe-overlay:
        rgba(251, 246, 232, 0.84);
}


/* =========================================================
   03 — OFICINA
========================================================= */

.sh-theme-oficina {

    --recipe-accent:
        #789588;

    --recipe-accent-dark:
        #557064;

    --recipe-soft:
        #e5ece8;

    --recipe-surface:
        #ffffff;

    --recipe-hero:
        #f3f1ea;

    --recipe-radius:
        21px;

    --recipe-overlay:
        rgba(243, 241, 234, 0.86);
}


/* =========================================================
   04 — ANTOJOS
========================================================= */

.sh-theme-antojos {

    --recipe-accent:
        #d98b79;

    --recipe-accent-dark:
        #b85e50;

    --recipe-soft:
        #f8ddd5;

    --recipe-surface:
        #fffdfa;

    --recipe-hero:
        #fff3ed;

    --recipe-radius:
        33px;

    --recipe-overlay:
        rgba(255, 243, 237, 0.84);
}


/* =========================================================
   05 — EMPRENDE
========================================================= */

.sh-theme-emprende {

    --recipe-accent:
        #d0a64a;

    --recipe-accent-dark:
        #9d7624;

    --recipe-soft:
        #f2e7c7;

    --recipe-surface:
        #fffdfa;

    --recipe-hero:
        #f7f2e7;

    --recipe-radius:
        21px;

    --recipe-overlay:
        rgba(247, 242, 231, 0.86);
}


/* =========================================================
   CONTENEDOR GENERAL
========================================================= */

.sh-recipe-main {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        58px 0 92px;

    background:
        var(--recipe-hero);
}


/* =========================================================
   FONDO PERSONALIZADO
========================================================= */

.sh-recipe-custom-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    opacity:
        var(--recipe-bg-opacity);

    filter:
        saturate(0.92);
}


.has-custom-bg
.sh-recipe-main::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        var(--recipe-overlay);

    pointer-events:
        none;
}


.sh-recipe-layout {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    grid-template-areas:
        "copy visual"
        "ingredients preparation";

    align-items:
        start;

    gap:
        54px 66px;
}


/* =========================================================
   CABECERA
========================================================= */

.sh-recipe-copy {

    grid-area:
        copy;

    position:
        relative;

    padding-top:
        20px;
}


.sh-recipe-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-bottom:
        22px;
}


.sh-recipe-tag {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        31px;

    padding:
        6px 12px;

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

    border-radius:
        999px;

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

    color:
        var(--sh-green);

    font-size:
        0.76rem;

    font-weight:
        400;
}



.sh-recipe-script {

    margin-bottom:
        7px;

    font-size:
        clamp(
            2rem,
            3vw,
            2.6rem
        );
}


.sh-recipe-copy h1 {

    max-width:
        620px;

    margin:
        0;

    font-family:
        "Chewy",
        cursive;

    font-size:
        clamp(
            3.5rem,
            5.5vw,
            5.8rem
        );

    font-weight:
        400;

    line-height:
        0.92;

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


.sh-recipe-intro {

    max-width:
        560px;

    margin:
        22px 0 0;

    font-size:
        1rem;

    line-height:
        1.65;

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


/* =========================================================
   CALORÍAS / PORCIÓN
========================================================= */

.sh-recipe-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        27px;
}


.sh-recipe-meta-item {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        170px;

    padding:
        11px 14px;

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

    border-radius:
        calc(
            var(--recipe-radius)
            * 0.58
        );

    background:
        rgba(255, 255, 255, 0.68);
}


.sh-meta-symbol {

    width:
        35px;

    height:
        35px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--recipe-soft);

    color:
        var(--recipe-accent-dark);

    font-size:
        0.85rem;

    font-weight:
        400;
}


.sh-recipe-meta-item
> div:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;
}


.sh-recipe-meta-item span {

    font-size:
        0.69rem;

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


.sh-recipe-meta-item strong {

    font-size:
        0.94rem;

    font-weight:
        400;

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


/* =========================================================
   IMAGEN
========================================================= */

.sh-recipe-visual {

    grid-area:
        visual;

    position:
        relative;

    min-height:
        430px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.sh-recipe-image-shape {

    position:
        absolute;

    width:
        360px;

    height:
        430px;

    border-radius:
        46% 54% 57% 43%
        /
        56% 43% 57% 44%;

    background:
        var(--recipe-soft);

    transform:
        rotate(-6deg);

    transition:
        transform 0.4s ease;
}


.sh-recipe-main-image {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            340px,
            84%
        );

    aspect-ratio:
        3 / 4;

    height:
        auto;

    margin:
        0;

    overflow:
        hidden;

    border:
        8px solid
        rgba(
            255,
            255,
            255,
            0.88
        );

    border-radius:
        calc(
            var(--recipe-radius)
            + 5px
        );

    box-shadow:
        0 25px 60px
        rgba(
            24,
            53,
            47,
            0.12
        );

    transform:
        rotate(1.5deg);

    transition:
        transform 0.35s ease;
}


.sh-recipe-main-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.sh-recipe-no-image {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        10px;

    padding:
        28px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            var(--recipe-soft),
            #f3d1c5
        );
}


.sh-recipe-no-image span {

    font-size:
        1.8rem;

    font-weight:
        400;
}


.sh-recipe-no-image p {

    max-width:
        230px;

    margin:
        0;

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


/* =========================================================
   ENCABEZADOS DE SECCIONES
========================================================= */

.sh-recipe-section-header {

    margin-bottom:
        25px;
}


.sh-recipe-section-header
.sh-script {

    font-size:
        1.8rem;
}


.sh-recipe-section-header h2 {

    margin:
        6px 0 0;

    font-family:
        "Chewy",
        cursive;

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

    font-weight:
        400;

    line-height:
        1;

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


/* =========================================================
   INGREDIENTES
========================================================= */

.sh-ingredients-card {

    grid-area:
        ingredients;

    padding:
        30px;

    border-radius:
        var(--recipe-radius);

    background:
        var(--recipe-surface);

    transition:
        border-radius 0.25s ease,
        box-shadow 0.25s ease;
}


.sh-ingredients-list {

    display:
        flex;

    flex-direction:
        column;

    padding:
        0;

    margin:
        0;

    list-style:
        none;
}


.sh-ingredients-list li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    padding:
        13px 0;

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

    font-size:
        0.98rem;

    line-height:
        1.5;

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


.sh-ingredients-list
li:last-child {

    border-bottom:
        0;
}


.sh-ingredient-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    margin-top:
        7px;

    border-radius:
        50%;

    background:
        var(--recipe-accent);
}


/* =========================================================
   PREPARACIÓN
========================================================= */

.sh-preparation {

    grid-area:
        preparation;

    padding-top:
        3px;
}


.sh-preparation-list {

    padding:
        0;

    margin:
        0;

    list-style:
        none;
}


.sh-preparation-list li {

    display:
        grid;

    grid-template-columns:
        54px 1fr;

    gap:
        18px;

    padding-bottom:
        25px;

    margin-bottom:
        25px;

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


.sh-preparation-list
li:last-child {

    margin-bottom:
        0;

    border-bottom:
        0;
}


.sh-step-number {

    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        calc(
            var(--recipe-radius)
            * 0.58
        );

    font-family:
        "Chewy",
        cursive;

    font-size:
        1.4rem;

    font-weight:
        400;

    color:
        var(--recipe-accent-dark);

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


.sh-step-content > span {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        0.68rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

    color:
        var(--recipe-accent-dark);
}


.sh-step-content p {

    margin:
        0;

    font-size:
        1rem;

    line-height:
        1.65;

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


.sh-empty-field {

    padding:
        18px;

    border-radius:
        17px;

    background:
        var(--recipe-soft);

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


/* =========================================================
   PERSONALIDAD — LONCHERAS
========================================================= */

.sh-theme-lunch
.sh-recipe-main-image {

    border-radius:
        42px;

    transform:
        rotate(-1deg);

    box-shadow:
        0 25px 60px
        rgba(
            116,
            94,
            165,
            0.13
        );
}


.sh-theme-lunch
.sh-recipe-image-shape {

    transform:
        rotate(7deg);

    border-radius:
        43% 57% 48% 52%
        /
        53% 45% 55% 47%;
}


.sh-theme-lunch
.sh-ingredients-card {

    box-shadow:
        0 16px 40px
        rgba(
            116,
            94,
            165,
            0.07
        );
}


.sh-theme-lunch
.sh-recipe-meta-item {

    border-radius:
        22px;
}


/* =========================================================
   PERSONALIDAD — OFICINA
========================================================= */

.sh-theme-oficina
.sh-recipe-main-image {

    border-radius:
        22px;

    transform:
        none;
}


.sh-theme-oficina
.sh-recipe-image-shape {

    border-radius:
        30px;

    transform:
        rotate(-2deg);
}


.sh-theme-oficina
.sh-ingredients-card {

    border-radius:
        21px;

    border:
        1px solid
        rgba(
            85,
            112,
            100,
            0.10
        );
}


.sh-theme-oficina
.sh-step-number {

    border-radius:
        12px;
}


/* =========================================================
   PERSONALIDAD — ANTOJOS
========================================================= */

.sh-theme-antojos
.sh-recipe-main-image {

    transform:
        rotate(2.5deg);

    box-shadow:
        0 25px 60px
        rgba(
            184,
            94,
            80,
            0.15
        );
}


.sh-theme-antojos
.sh-recipe-image-shape {

    transform:
        rotate(5deg)
        scale(1.025);
}


/* =========================================================
   PERSONALIDAD — EMPRENDE
========================================================= */

.sh-theme-emprende
.sh-recipe-main-image {

    transform:
        none;

    border-radius:
        24px;

    border-color:
        #fff8e8;
}


.sh-theme-emprende
.sh-recipe-image-shape {

    border-radius:
        26px;

    transform:
        rotate(-3deg);
}


.sh-theme-emprende
.sh-ingredients-card {

    border:
        1px solid
        rgba(
            157,
            118,
            36,
            0.17
        );

    border-radius:
        21px;
}


.sh-theme-emprende
.sh-step-number {

    border-radius:
        12px;
}


/* =========================================================
   CTA — SIEMPRE SAVORIAHUB
========================================================= */

.sh-recipe-cta {

    padding:
        0 0 85px;

    background:
        var(--recipe-hero);
}


.sh-recipe-cta-card {

    min-height:
        210px;

    padding:
        40px 50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        45px;

    border-radius:
        33px;

    /*
     * Importante:
     * esta parte NO cambia entre colecciones.
     * El terracota conserva la identidad
     * principal de SavoriaHub.
     */

    background:
        var(--sh-terra);

    color:
        white;
}


.sh-recipe-cta-card
.sh-script {

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


.sh-recipe-cta-card h2 {

    margin:
        7px 0;

    font-family:
        "Chewy",
        cursive;

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

    font-weight:
        400;

    line-height:
        0.98;
}


.sh-recipe-cta-card p {

    max-width:
        500px;

    margin:
        0;

    line-height:
        1.55;

    color:
        rgba(
            255,
            255,
            255,
            0.8
        );
}


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

@media (
    max-width: 980px
) {

    .sh-recipe-layout {

        grid-template-columns:
            1fr;

        grid-template-areas:
            "copy"
            "ingredients"
            "preparation"
            "visual";

        gap:
            45px;
    }


    .sh-recipe-copy {

        max-width:
            720px;

        padding-top:
            0;
    }


    .sh-recipe-visual {

        min-height:
            420px;
    }


    .sh-recipe-main-image {

        width:
            min(
                400px,
                80%
            );

        height:
            420px;
    }

}


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

@media (
    max-width: 640px
) {

    .sh-recipe-main {

        padding:
            34px 0 68px;
    }


    .sh-recipe-layout {

        grid-template-areas:
            "copy"
            "ingredients"
            "preparation"
            "visual";

        gap:
            34px;
    }


    /*
     * Fondo todavía más discreto
     * en pantalla pequeña.
     */

    .sh-recipe-custom-background {

        opacity:
            0.10;
    }


    /* CABECERA */

    .sh-recipe-tags {

        gap:
            6px;

        margin-bottom:
            17px;
    }


    .sh-recipe-tag {

        min-height:
            28px;

        padding:
            5px 10px;

        font-size:
            0.7rem;
    }


    .sh-recipe-script {

        margin-bottom:
            5px;

        font-size:
            2rem;
    }


    .sh-recipe-copy h1 {

        max-width:
            100%;

        font-size:
            clamp(
                2.9rem,
                12.3vw,
                4.05rem
            );

        line-height:
            0.94;
    }


    .sh-recipe-intro {

        margin-top:
            17px;

        font-size:
            0.94rem;

        line-height:
            1.55;
    }


    /* META */

    .sh-recipe-meta {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            8px;

        margin-top:
            21px;
    }


    .sh-recipe-meta-item {

        min-width:
            0;

        padding:
            10px;

        gap:
            8px;
    }


    .sh-meta-symbol {

        width:
            30px;

        height:
            30px;

        font-size:
            0.75rem;
    }


    .sh-recipe-meta-item span {

        font-size:
            0.62rem;
    }


    .sh-recipe-meta-item strong {

        font-size:
            0.82rem;
    }


    /* INGREDIENTES */

    .sh-ingredients-card {

        padding:
            22px;
    }


    .sh-recipe-section-header {

        margin-bottom:
            19px;
    }


    .sh-recipe-section-header
    .sh-script {

        font-size:
            1.65rem;
    }


    .sh-recipe-section-header h2 {

        font-size:
            2.65rem;
    }


    .sh-ingredients-list li {

        padding:
            10px 0;

        font-size:
            0.93rem;

        line-height:
            1.45;
    }


    /* PREPARACIÓN */

    .sh-preparation-list li {

        grid-template-columns:
            44px 1fr;

        gap:
            13px;

        padding-bottom:
            20px;

        margin-bottom:
            20px;
    }


    .sh-step-number {

        width:
            44px;

        height:
            44px;

        font-size:
            1.12rem;
    }


    .sh-step-content > span {

        margin-bottom:
            3px;

        font-size:
            0.62rem;
    }


    .sh-step-content p {

        font-size:
            0.93rem;

        line-height:
            1.55;
    }


    /* IMAGEN AL FINAL */

    .sh-recipe-visual {

        min-height:
            350px;

        margin-top:
            3px;
    }


    .sh-recipe-image-shape {

        width:
            255px;

        height:
            325px;
    }


    .sh-recipe-main-image {

        width:
            min(
                245px,
                78%
            );

        aspect-ratio:
            3 / 4;

        height:
            auto;

        border-width:
            6px;
    }


    /* CTA */

    .sh-recipe-cta {

        padding-bottom:
            60px;
    }


    .sh-recipe-cta-card {

        min-height:
            auto;

        padding:
            40px 22px;

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            25px;

        border-radius:
            27px;
    }


    .sh-recipe-cta-card h2 {

        font-size:
            2.8rem;
    }

}