/* =========================================================
   VISOR DE RECETARIOS
========================================================= */

.sh-recetario {
    --book-accent: #e56b4a;
    --book-soft: #e5ece8;

    min-height: 70vh;

    background:
        #f7f4ed;
}

.sh-recetario-premium {
    --book-accent: #d8a34a;
    --book-soft: #f2e7c7;
}


/* =========================================================
   INTRO
========================================================= */

.sh-recetario-intro {
    padding:
        58px 0 30px;
}

.sh-recetario-intro-inner {
    max-width:
        920px;
}

.sh-recetario-back {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        24px;

    padding:
        8px 12px;

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

    border-radius:
        999px;

    background:
        var(--book-soft);

    font-size:
        0.8rem;

    color:
        #18352f;

    box-shadow:
        0 6px 16px
        rgba(24, 53, 47, 0.05);

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

.sh-recetario-back:hover {
    transform:
        translateX(-2px);

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

.sh-recetario-heading {
    max-width:
        720px;

    margin:
        0 auto;

    text-align:
        center;
}

.sh-recetario-kicker {
    display:
        inline-flex;

    padding:
        7px 11px;

    border-radius:
        999px;

    background:
        var(--book-soft);

    color:
        #18352f;

    font-size:
        0.7rem;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}

.sh-recetario-heading h1 {
    margin:
        13px 0 0;

    font-size:
        clamp(3rem, 7vw, 5.7rem);

    line-height:
        0.92;
}

.sh-recetario-heading > p {
    max-width:
        600px;

    margin:
        20px auto 0;

    line-height:
        1.65;

    color:
        #304a43;
}

.sh-recetario-categories {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        18px;
}

.sh-recetario-categories span {
    padding:
        6px 10px;

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

    border-radius:
        999px;

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

    font-size:
        0.67rem;
}


/* =========================================================
   LIBRO — PAGE CURL REAL
========================================================= */

.sh-book-section {
    padding:
        8px 0 76px;
}

.sh-book {
    width:
        min(100%, 760px);

    margin:
        0 auto;

    outline:
        0;
}


/*
 * El motor calcula el libro dentro de este espacio.
 * En escritorio cada página queda aprox. en 310 × 413 px
 * como máximo, de modo que el recetario se vea completo.
 */

.sh-book-stage {
    width:
        min(100%, 620px);

    height:
        420px;

    min-height:
        420px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    overflow-anchor:
        none;
}


/*
 * Importante:
 * no aplicamos transforms, transitions ni clip-path
 * sobre la página. El motor los necesita para doblarla.
 */

.sh-book-page {
    box-sizing:
        border-box;

    overflow:
        hidden;

    background:
        #ffffff;

    color:
        #18352f;

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

    box-shadow:
        inset 11px 0 17px
        rgba(24, 53, 47, 0.025);
}


.sh-book-page::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        30;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(24, 53, 47, 0.045) 0%,
            transparent 8%,
            transparent 93%,
            rgba(24, 53, 47, 0.02) 100%
        );

    mix-blend-mode:
        multiply;

    opacity:
        0.65;
}


/* =========================================================
   CONTENEDOR GENERADO POR STPAGEFLIP
========================================================= */

.sh-book-stage
.stf__parent {
    margin:
        0 auto !important;

    overflow-anchor:
        none;

    filter:
        drop-shadow(
            0 18px 27px
            rgba(24, 53, 47, 0.13)
        );
}

.sh-book-stage
.stf__wrapper {
    overflow:
        visible !important;
}

.sh-book-stage
.stf__item {
    background:
        #ffffff;
}


/* =========================================================
   FALLBACK
========================================================= */

.sh-book-fallback
.sh-book-stage {
    width:
        min(100%, 310px);

    min-height:
        0;

    aspect-ratio:
        3 / 4;

    position:
        relative;
}

.sh-book-fallback
.sh-book-page {
    display:
        none;

    width:
        100%;

    height:
        100%;
}

.sh-book-fallback
.sh-book-page.is-fallback-active {
    display:
        block;
}


/* =========================================================
   DESKTOP — MENOS ALTURA ANTES DEL LIBRO
========================================================= */

@media (min-width: 641px) {

    .sh-recetario-intro {
        padding:
            30px 0 15px;
    }

    .sh-recetario-back {
        margin-bottom:
            16px;
    }

    .sh-recetario-heading h1 {
        font-size:
            clamp(2.7rem, 4.6vw, 4.3rem);
    }

    .sh-recetario-heading > p {
        margin-top:
            12px;
    }

    .sh-recetario-categories {
        margin-top:
            12px;
    }

    .sh-book-section {
        padding-top:
            0;
    }

}

/* =========================================================
   PORTADA
========================================================= */

.sh-book-cover img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    background:
        #ffffff;
}

.sh-book-cover-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    padding:
        35px;

    text-align:
        center;

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

.sh-book-cover-placeholder span {
    font-family:
        "Sacramento",
        cursive;

    font-size:
        2rem;

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

.sh-book-cover-placeholder strong {
    font-family:
        "Chewy",
        cursive;

    font-size:
        clamp(2.8rem, 8vw, 5.2rem);

    font-weight:
        400;

    line-height:
        0.95;
}


/* =========================================================
   PÁGINAS DE MUESTRA
========================================================= */

.sh-book-preview {
    background:
        #ffffff;
}

.sh-book-preview-inner {
    width:
        100%;

    height:
        100%;

    overflow:
        auto;

    overscroll-behavior:
        contain;

    scrollbar-width:
        thin;
}

.sh-book-preview-inner > * {
    margin-top:
        0;
}

.sh-book-preview-inner figure,
.sh-book-preview-inner .wp-block-image {
    width:
        100%;

    height:
        100%;

    margin:
        0;
}

.sh-book-preview-inner figure img,
.sh-book-preview-inner .wp-block-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    display:
        block;

    background:
        #ffffff;
}

.sh-book-preview-inner > :not(figure):not(.wp-block-image) {
    padding:
        30px;
}


/* =========================================================
   CTA FINAL — COMPACTA PARA VERSE COMPLETA
========================================================= */

.sh-book-cta-page {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            var(--book-soft) 100%
        );

    overflow:
        hidden;
}


.sh-book-cta-inner {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-start;

    padding:
        18px 16px 14px;

    text-align:
        center;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    scrollbar-width:
        thin;
}


/*
 * Ya no usamos vw aquí.
 * El texto debe responder al tamaño de la HOJA,
 * no al tamaño completo del monitor.
 */

.sh-book-cta-inner .sh-script {
    margin:
        0;

    font-size:
        1.48rem;

    line-height:
        1;

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


.sh-book-cta-inner h2 {
    max-width:
        265px;

    margin:
        6px auto 0;

    font-size:
        2.18rem;

    line-height:
        0.91;

    text-wrap:
        balance;
}


.sh-book-cta-inner > p {
    max-width:
        250px;

    margin:
        10px auto 0;

    font-size:
        0.72rem;

    line-height:
        1.42;

    color:
        #304a43;
}


.sh-recetario-price {
    margin:
        12px auto 0;

    font-family:
        "Chewy",
        cursive;

    font-size:
        1.65rem;

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


.sh-recetario-buy,
.sh-freebie-submit {
    width:
        100%;

    min-height:
        40px;

    margin-top:
        9px;

    padding:
        9px 13px;

    border:
        0;

    font-size:
        0.73rem;

    background:
        var(--book-accent);

    color:
        #ffffff;
}


.sh-recetario-buy:hover,
.sh-freebie-submit:hover {
    background:
        #c65338;
}


/* =========================================================
   FORMULARIO REUTILIZADO DE LEADS — VERSIÓN COMPACTA
========================================================= */

.sh-freebie-form-card {
    position:
        relative;

    z-index:
        40;

    width:
        min(100%, 255px);

    margin:
        10px auto 0;
}


.sh-lead-form {
    display:
        grid;

    gap:
        7px;
}


.sh-email-field input {
    width:
        100%;

    min-height:
        39px;

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

    border-radius:
        999px;

    padding:
        8px 13px;

    outline:
        0;

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

    color:
        #18352f;

    font-size:
        0.72rem;
}


.sh-email-field input:focus {
    border-color:
        var(--book-accent);

    box-shadow:
        0 0 0 3px
        rgba(229, 107, 74, 0.12);
}


.sh-marketing-check {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    width:
        100%;

    margin-top:
        1px;

    text-align:
        left;

    color:
        #5d6c66;

    cursor:
        pointer;
}


.sh-marketing-check input {
    flex:
        0 0 auto;

    width:
        15px;

    height:
        15px;

    margin:
        1px 0 0;

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


.sh-marketing-copy {
    flex:
        1 1 auto;

    min-width:
        0;

    font-size:
        0.61rem;

    line-height:
        1.35;

    overflow-wrap:
        normal;

    word-break:
        normal;
}


.sh-freebie-privacy {
    min-height:
        12px;

    margin:
        0;

    font-size:
        0.55rem;

    line-height:
        1.25;

    color:
        #5d6c66;
}


.sh-screen-reader {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


.sh-recetario-admin-warning {
    max-width:
        250px;

    margin:
        10px auto 0;

    padding:
        8px 10px;

    border-radius:
        12px;

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

    font-size:
        0.58rem;

    line-height:
        1.3;
}


/* =========================================================
   CONTROLES
========================================================= */

.sh-book-controls {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    margin-top:
        36px;
}

.sh-book-arrow {
    width:
        48px;

    height:
        48px;

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

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #18352f;

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

.sh-book-arrow:disabled {
    opacity:
        0.3;

    cursor:
        default;
}

.sh-book-progress {
    min-width:
        66px;

    text-align:
        center;

    font-size:
        0.76rem;

    color:
        #5d6c66;
}

.sh-book-hint {
    margin:
        14px 0 0;

    text-align:
        center;

    font-size:
        0.7rem;

    color:
        #8a9691;
}


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

@media (max-width: 640px) {

    .sh-recetario-intro {
        padding:
            34px 0 18px;
    }

    .sh-recetario-back {
        margin-bottom:
            18px;
    }

    .sh-recetario-heading h1 {
        font-size:
            clamp(2.7rem, 13vw, 4rem);
    }

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

        font-size:
            0.9rem;
    }

    .sh-book-section {
        padding:
            8px 0 62px;
    }

    .sh-book-stage {
        width:
            min(100%, 330px);

        height:
            410px;

        min-height:
            410px;
    }

    .sh-book-stage::before {
        inset:
            8% -3% -4% 6%;

        border-radius:
            25px;
    }

    .sh-book-page {
        border-width:
            1px;
    }

    .sh-book-cta-inner {
        padding:
            17px 14px 13px;
    }

    .sh-book-cta-inner .sh-script {
        font-size:
            1.42rem;
    }

    .sh-book-cta-inner h2 {
        max-width:
            250px;

        font-size:
            2.05rem;
    }

    .sh-book-cta-inner > p {
        margin-top:
            9px;

        font-size:
            0.69rem;
    }

    .sh-marketing-copy {
        font-size:
            0.58rem;
    }

    .sh-book-controls {
        margin-top:
            27px;
    }

    .sh-book-hint {
        padding:
            0 20px;
    }

}


/* =========================================================
   ESTABILIDAD DEL VIEWPORT DURANTE EL FLIP
========================================================= */

.sh-book,
.sh-book-stage,
.sh-book-stage .stf__parent,
.sh-book-stage .stf__wrapper {
    overflow-anchor:
        none;
}

.sh-book.is-page-flipping {
    overscroll-behavior:
        contain;
}



/* =========================================================
   AJUSTE MÓVIL — GESTO HORIZONTAL SIN SALTO DE VIEWPORT
========================================================= */

.sh-book-stage,
.sh-book-stage .stf__parent,
.sh-book-stage .stf__wrapper {
    overflow-anchor:
        none;
}



/* =========================================================
   VISOR — MÓVIL SIN DESPLAZAMIENTO DEL VIEWPORT
========================================================= */

@media (max-width: 640px) {

    /*
     * StPageFlip tiene mobileScrollSupport activado.
     * Además impedimos el gesto nativo del navegador
     * mientras el dedo está dentro del libro.
     * Así un swipe diagonal no arrastra la página.
     */

    .sh-book-stage,
    .sh-book-stage .stf__parent,
    .sh-book-stage .stf__wrapper,
    .sh-book-stage .stf__item {
        touch-action: none !important;
        overscroll-behavior: none;
        overflow-anchor: none;
    }

    .sh-book-stage {
        position: relative;
        height: 410px;
        min-height: 410px;
    }

}