/* =========================================================
   RECETAS — NUEVA IDENTIDAD
========================================================= */

.sh-recipes-archive {
    min-height: 70vh;
    background: #f7f4ed;
}

.sh-recipes-hero {
    padding: 58px 0 30px;
}

.sh-recipes-heading {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.sh-recipes-heading .sh-script {
    margin-bottom: 5px;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
}

.sh-recipes-heading h1 {
    margin: 0;
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 0.9;
}

.sh-recipes-heading p {
    max-width: 560px;
    margin: 20px auto 0;
    line-height: 1.65;
    color: #304a43;
}

.sh-recipes-search {
    max-width: 720px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
    margin: 30px auto 0;
}

.sh-recipes-search-field {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid rgba(24,53,47,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
}

.sh-recipes-search-field svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: #5d6c66;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.sh-recipes-search-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #18352f;
}

.sh-recipes-search-button {
    min-width: 104px;
    border: 0;
    border-radius: 999px;
    padding: 10px 17px;
    background: #18352f;
    color: #fff;
}

.sh-recipes-category-scroll {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    padding-bottom: 3px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.sh-recipe-filter {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    background: #e5ece8;
    color: #304a43;
    font-size: .69rem;
    transition: background .2s ease, color .2s ease;
}

.sh-recipe-filter:hover,
.sh-recipe-filter.is-active {
    background: #e56b4a;
    color: #fff;
}

.sh-recipes-result-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 720px;
    margin: 16px auto 0;
    font-size: .68rem;
    color: #8a9691;
}

.sh-recipes-result-line a {
    color: #c65338;
}

.sh-recipes-catalog {
    padding: 30px 0 86px;
}

.sh-recipes-organic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px 22px;
}

.sh-organic-recipe-card {
    --recipe-bg: #dce5dc;
    --recipe-text: #18352f;
    min-width: 0;
}

.sh-organic-recipe-natural {
    --recipe-bg: #dce5dc;
}

.sh-organic-recipe-lunch {
    --recipe-bg: #b7aacd;
}

.sh-organic-recipe-oficina {
    --recipe-bg: #a9bbae;
}

.sh-organic-recipe-antojos {
    --recipe-bg: #e4aaa0;
}

.sh-organic-recipe-emprende {
    --recipe-bg: #dcc58a;
}

/*
 * Mancha irregular suave, más cercana al mockup de Canva.
 * Ya no es un óvalo/piedra.
 */
.sh-organic-recipe-link {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 5;
    display: block;
    overflow: hidden;
    background: var(--recipe-bg);

    -webkit-mask-image: url("../img/recipe-blob-2.svg");
    mask-image: url("../img/recipe-blob-2.svg");

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    filter: drop-shadow(
        0 12px 18px rgba(24,53,47,.075)
    );

    transform: rotate(-.4deg);

    transition:
        transform .24s ease,
        filter .24s ease;
}

.sh-organic-recipe-card:nth-child(even)
.sh-organic-recipe-link {
    -webkit-mask-image: url("../img/recipe-blob-3.svg");
    mask-image: url("../img/recipe-blob-3.svg");
    transform: rotate(.4deg);
}

.sh-organic-recipe-link:hover {
    transform: rotate(0deg) translateY(-3px);
    filter: drop-shadow(
        0 17px 24px rgba(24,53,47,.11)
    );
}

.sh-organic-recipe-media,
.sh-organic-recipe-tint,
.sh-organic-recipe-content {
    position: absolute;
    inset: 0;
}

.sh-organic-recipe-media {
    background: var(--recipe-bg);
}

.sh-organic-recipe-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: .24;
    filter: saturate(.68) contrast(.90);
    transform: scale(1.04);
    mix-blend-mode: multiply;
    transition: transform .3s ease, opacity .3s ease;
}

.sh-organic-recipe-link:hover
.sh-organic-recipe-media img {
    transform: scale(1.07);
    opacity: .30;
}

.sh-organic-recipe-tint {
    z-index: 1;
    background: rgba(255,255,255,.05);
}

.sh-organic-recipe-content {
    z-index: 4;

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

    padding: 20px 22px 18px;

    color: var(--recipe-text);
    text-align: center;

    pointer-events: none;
}


/*
 * El número ya no depende del borde exterior de la mancha.
 * Lo colocamos dentro de una "zona segura" para que las dos
 * siluetas aprobadas nunca lo recorten.
 */

.sh-organic-recipe-number {
    position: absolute;

    z-index: 6;

    top: 14%;
    left: 20%;

    margin: 0;

    font-family: "Chewy", cursive;

    font-size: 2rem;
    line-height: 1;

    color: #0d2b25;

    text-shadow:
        0 1px 0 rgba(255,255,255,.46);
}


/*
 * La forma 2 es un poco más cerrada arriba a la izquierda,
 * por eso los impares entran ligeramente más hacia el centro.
 */

.sh-organic-recipe-card:nth-child(odd)
.sh-organic-recipe-number {
    top: 15%;
    left: 23%;
}


.sh-organic-recipe-card:nth-child(even)
.sh-organic-recipe-number {
    top: 14%;
    left: 19%;
}


.sh-organic-recipe-content h2 {
    position: relative;

    z-index: 5;

    max-width: 82%;

    margin: 0 auto;

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

    font-size: clamp(1.18rem, 1.7vw, 1.58rem);
    font-weight: 400;
    line-height: 1.07;

    text-wrap: balance;

    color: #0d2b25;

    text-shadow:
        0 1px 0 rgba(255,255,255,.58);
}


/*
 * "Ver receta" queda pegado visualmente al título,
 * como en la referencia: ya no vive en el borde inferior.
 */

.sh-organic-recipe-open {
    position: relative;

    z-index: 5;

    margin-top: 13px;

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

    font-size: .82rem;
    line-height: 1;

    color: #0d2b25;

    text-shadow:
        0 1px 0 rgba(255,255,255,.52);
}

@media (max-width: 980px) {

    .sh-organic-recipe-content {
        padding: 18px 18px 16px;
    }

    .sh-organic-recipe-number {
        font-size: 1.78rem;
    }

    .sh-organic-recipe-card:nth-child(odd)
    .sh-organic-recipe-number {
        left: 22%;
    }

}


@media (max-width: 640px) {

    .sh-organic-recipe-content {
        padding: 15px 14px 13px;
    }

    .sh-organic-recipe-number {
        top: 14%;
        left: 20%;

        font-size: 1.55rem;
    }

    .sh-organic-recipe-card:nth-child(odd)
    .sh-organic-recipe-number {
        top: 15%;
        left: 23%;
    }

    .sh-organic-recipe-card:nth-child(even)
    .sh-organic-recipe-number {
        top: 14%;
        left: 19%;
    }

    .sh-organic-recipe-content h2 {
        max-width: 84%;

        font-size:
            clamp(
                1.02rem,
                5.2vw,
                1.24rem
            );
    }

    .sh-organic-recipe-open {
        margin-top: 10px;

        font-size: .70rem;
    }

}

.sh-recipes-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 56px;
}

.sh-recipes-pagination .page-numbers {
    min-width: 39px;
    height: 39px;
    display: inline-grid;
    place-items: center;
    padding: 0 9px;
    border: 1px solid rgba(24,53,47,.12);
    border-radius: 999px;
    background: #fff;
    font-size: .7rem;
    color: #18352f;
}

.sh-recipes-pagination .page-numbers.current {
    background: #18352f;
    color: #fff;
}

.sh-recipes-empty {
    max-width: 620px;
    margin: 36px auto;
    padding: 60px 28px;
    border-radius: 34px;
    background: #fff;
    text-align: center;
    box-shadow: 0 18px 48px rgba(24,53,47,.07);
}

.sh-recipes-empty h2 {
    margin: 8px 0 0;
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    line-height: .95;
}

.sh-recipes-empty p {
    margin: 16px 0 22px;
    color: #5d6c66;
}

@media (max-width: 980px) {
    .sh-recipes-organic-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 23px 18px;
    }
}

@media (max-width: 640px) {
    .sh-recipes-hero {
        padding: 36px 0 22px;
    }

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

    .sh-recipes-heading h1 {
        font-size: clamp(3.4rem, 18vw, 4.7rem);
    }

    .sh-recipes-heading p {
        margin-top: 14px;
        font-size: .86rem;
    }

    .sh-recipes-search {
        grid-template-columns: 1fr;
        margin-top: 23px;
    }

    .sh-recipes-search-field {
        min-height: 44px;
    }

    .sh-recipes-search-button {
        min-height: 42px;
    }

    .sh-recipes-category-scroll {
        justify-content: flex-start;
        margin-top: 14px;
    }

    .sh-recipes-catalog {
        padding: 22px 0 60px;
    }

    .sh-recipes-organic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px 12px;
    }

    .sh-recipes-pagination {
        margin-top: 42px;
    }
}