/* RESET */

html,
body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:
linear-gradient(
to bottom,
#ffffff 0%,
#f7f7f7 100%
);

    position:fixed;

    inset:0;

    font-family:Arial, Helvetica, sans-serif;
}

/* CONTROLES */
/* CONTROLES */

#controls{

    position:fixed;

    bottom:15px;

    left:50%;

    transform:translateX(-50%);

    z-index:99999;

    display:flex;

    gap:6px;

    align-items:center;

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

    padding:6px 10px;

    border-radius:14px;

    backdrop-filter:blur(10px);

    box-shadow:
    0 6px 20px rgba(0,0,0,.12);

    border:
    1px solid rgba(255,255,255,.5);
}

/* BOTONES */
button{

    border:none;

    background:white;

    padding:6px 10px;

    border-radius:8px;

    cursor:pointer;

    font-weight:600;

    font-size:13px;

    transition:.2s;

    box-shadow:
    0 2px 8px rgba(0,0,0,.08);
}

button:hover{

    background:#f2f2f2;

    transform:translateY(-1px);

    box-shadow:
    0 4px 10px rgba(0,0,0,.12);
}

/* CONTADOR */

#page-num{

    color:#222;

    min-width:70px;

    text-align:center;

    font-size:12px;

    font-weight:600;
}

/* CONTENEDOR PRINCIPAL */

#book-container{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    display:flex;

    justify-content:center;
    align-items:center;

    overflow:hidden;
}

/* LIBRO */

#book{

    width:1000px;
    height:700px;

    transform-origin:center center;

    transition:transform .25s ease;

    will-change:transform;

    overflow:hidden;

    filter:

        drop-shadow(0 25px 60px rgba(0,0,0,.18))

        drop-shadow(0 10px 20px rgba(0,0,0,.08))

        drop-shadow(0 0 1px rgba(0,0,0,.15));
}

/* FIX SCROLL PAGEFLIP */

.stf__parent,
.stf__wrapper,
.stf__block,
.stf__item,
.stf__outerShadow,
.stf__innerShadow{

    overflow:hidden !important;
}

/* PAGINAS */

.page{

    position:relative;

    background:white;

    overflow:hidden;

    border-radius:2px;

    box-shadow:

        /* SOMBRA GENERAL */

        0 8px 25px rgba(0,0,0,.12),

        /* PROFUNDIDAD */

        0 2px 8px rgba(0,0,0,.08),

        /* LUZ PAPEL */

        inset 0 0 25px rgba(255,255,255,.8),

        /* SOMBRA INTERIOR */

        inset 0 0 35px rgba(0,0,0,.03);

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

.page::before{

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    width:30px;

    left:0;

    pointer-events:none;

    background:
    linear-gradient(
        to right,

        rgba(0,0,0,.12) 0%,

        rgba(0,0,0,.06) 25%,

        rgba(0,0,0,.02) 45%,

        transparent 100%
    );
}
.page::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
    linear-gradient(
        135deg,

        rgba(255,255,255,.18) 0%,

        transparent 20%,

        transparent 80%,

        rgba(0,0,0,.03) 100%
    );
}

/* CANVAS PDF */

canvas{

    width:100%;
    height:100%;

    display:block;

    user-select:none;

    pointer-events:none;
}

/* RESPONSIVE */

@media(max-width:1100px){

    #book{

        width:90vw;
        height:65vh;
        perspective:4000px;
    }

    #controls{

        transform:
        translateX(-50%) scale(.9);
    }
}

/* MOVIL */

@media(max-width:768px){

    #controls{

        gap:5px;

        padding:8px 10px;

        flex-wrap:wrap;

        width:95%;

        justify-content:center;
    }

    button{

    border:none;

    background:linear-gradient(
        to bottom,
        #ffffff,
        #dcdcdc
    );

    padding:8px 14px;

    border-radius:8px;

    cursor:pointer;

    font-weight:bold;

    transition:.2s;

    box-shadow:
        0 2px 8px rgba(0,0,0,.25);
}

    #book{

        width:95vw;
        height:70vh;
    }
}
.page{

    background:white;

    overflow:hidden;

    border-radius:3px;

    box-shadow:
        0 0 2px rgba(255,255,255,.3),
        0 10px 30px rgba(0,0,0,.45),
        inset 0 0 30px rgba(0,0,0,.03);

    transition:box-shadow .3s ease;
}