
/*========================================================================================================================
PAGINA BIBLIOTECA
========================================================================================================================*/
/* ==========================================================
   LIBRARY PAGE
========================================================== */

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

.library-hero{
    position: relative;
    overflow: hidden;
    padding: 140px 0 120px;
}

.library-hero::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:240px;
    height:1px;
    background:linear-gradient(
        to right,
        transparent,
        rgba(164,131,99,.35),
        transparent
    );
}

.library-hero .container{
    position:relative;
    z-index:1;
}

.library-hero-map{

    background:
        linear-gradient(
            90deg,
            #F8F4EF 0%,
            rgba(248,244,239,.98) 25%,
            rgba(248,244,239,.90) 45%,
            rgba(248,244,239,.45) 75%,
            rgba(248,244,239,0) 100%
        ),
        url("../assets/imgdesktop/sketch.png");

    background-repeat:no-repeat,no-repeat;

    background-position:left top,right center;

    background-size:cover,100%;

    background-attachment:scroll,fixed;
}
/* ==========================================================
   LIBRARY PAGE
========================================================== */

.library-page{

    position:relative;

    overflow:hidden;

    background:#F8F4EF;

}

.library-page::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../assets/imgdesktop/sketch.png");

    background-repeat:no-repeat;

    background-position:right center;

    background-size:55%;

    opacity:.12;

    pointer-events:none;

    z-index:0;

}

.library-page::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        #F8F4EF 0%,
        rgba(248,244,239,.98) 28%,
        rgba(248,244,239,.92) 45%,
        rgba(248,244,239,.55) 72%,
        rgba(248,244,239,.15) 100%
    );

    pointer-events:none;

    z-index:1;

}

.library-page > *{

    position:relative;

    z-index:2;

}
/* ==========================================================
   FEATURED BOOK
========================================================== */

.featured-book{
    display:grid;
    grid-template-columns:420px minmax(0,1fr);
    gap:120px;
    align-items:center;
}

/* ==========================================================
   FEATURED BOOK COVER
========================================================== */

.featured-book-cover{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.featured-book-cover::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:#F3E8D8;
    opacity:.55;
    filter:blur(70px);
    z-index:-1;
}

.featured-book-cover::after{
    content:"";
    position:absolute;
    bottom:-30px;
    width:220px;
    height:26px;
    border-radius:50%;
    background:rgba(0,0,0,.08);
    filter:blur(18px);
    z-index:-2;
}

.featured-book-cover img{
    width:100%;
    max-width:360px;
    border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.12);
    transition:transform .45s ease, box-shadow .45s ease;
}

.featured-book-cover:hover img{
    transform:translateY(-12px) rotate(-1.2deg);
    box-shadow:0 40px 90px rgba(0,0,0,.16);
}

/* ==========================================================
   FEATURED BOOK CONTENT
========================================================== */

.featured-book-content{
    max-width:650px;
    padding-top:20px;
}

.featured-book-label{
    display:inline-block;
    margin-bottom:28px;
    color:#A48363;
    font-size:.80rem;
    font-weight:600;
    letter-spacing:.28em;
    text-transform:uppercase;
}

.featured-book-title{
    font-size:clamp(3rem,5vw,4rem);
    line-height:.92;
    margin-bottom:34px;
}

.featured-book-description{
    max-width:620px;
    margin-bottom:40px;
    font-size:1.15rem;
    line-height:1.95;
    color:#62574F;
}

.featured-book-description p{
    margin-bottom:18px;
}

.featured-book-description p:last-child{
    margin-bottom:0;
}

/* ==========================================================
   FEATURED BOOK META
========================================================== */

.featured-book-meta{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:26px;
}

.featured-book-price{
    font-family:"Cormorant Garamond",serif;
    font-size:3rem;
    font-weight:600;
    color:#43372F;
    line-height:1;
}

.featured-book-format{
    color:#8A7868;
    font-size:1rem;
    letter-spacing:.06em;
}

.featured-book-actions{
    display:flex;
    margin-top:10px;
}

/* ==========================================================
   LIBRARY GRID
========================================================== */

.library-grid{
    padding:20px 0 70px;
}

#booksGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:60px 50px;
}

/* ==========================================================
   BOOK CARD
========================================================== */
.book-body{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.book-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.book-cover{
    position:relative;
    margin-bottom:24px;
}

.book-cover::before{
    content:"";
    position:absolute;
    inset:12%;
    border-radius:50%;
    background:#F3E8D8;
    filter:blur(45px);
    opacity:.45;
    z-index:-1;
}

.book-cover::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    width:160px;
    height:18px;
    border-radius:50%;
    background:rgba(0,0,0,.08);
    filter:blur(14px);
    z-index:-2;
}

.book-cover img{
    width:100%;
    max-width:250px;
    border-radius:14px;
    box-shadow:0 18px 50px rgba(0,0,0,.10);
    transition:transform .40s ease, box-shadow .40s ease;
}

.book-card:hover .book-cover img{
    transform:translateY(-8px) rotate(-1deg);
    box-shadow:0 30px 65px rgba(0,0,0,.16);
}

.book-title{
    margin-bottom:18px;
    font-size:2.25rem;
    line-height:1.1;
}

.book-description{
    margin-bottom:24px;
    font-size:1rem;
    line-height:1.8;
    color:#62574F;
}

.book-price{
    margin-bottom:22px;
    font-family:"Cormorant Garamond",serif;
    font-size:2rem;
    color:#43372F;
}

/* ==========================================================
   LIBRARY RESPONSIVE
========================================================== */

@media (max-width:1200px){

    #booksGrid{
        grid-template-columns:repeat(2,1fr);
        gap:80px 50px;
    }

}

@media (max-width:1100px){

    .featured-book{
        grid-template-columns:1fr;
        gap:70px;
        text-align:center;
    }

    .featured-book-content{
        max-width:760px;
        margin:auto;
    }

    .featured-book-meta{
        align-items:center;
    }

    .featured-book-actions{
        justify-content:center;
    }

}

@media (max-width:768px){

    .library-hero{
        padding:80px 0;
    }

    .featured-book{
        gap:50px;
    }

    .featured-book-cover img{
        max-width:280px;
    }

    .featured-book-price{
        font-size:1.8rem;
    }

    #booksGrid{
        grid-template-columns:1fr;
        gap:70px;
    }

    .book-cover img{
        max-width:230px;
    }

}
/* ===========================================================
   MY LIBRARY HEADER
=========================================================== */

.my-library-header{
    padding:50px 0 10px;
}

.my-library-header h1{
    margin:10px 0 18px;
    font-family:"Cormorant Garamond", serif;
    font-size:4.8rem;
    font-weight:500;
    line-height:.95;
    color:#43372F;
}

.my-library-intro{
    max-width:620px;
    font-size:1.1rem;
    line-height:1.8;
    color:#5B514A;
}

/* ==========================================================
   BOOK ACTIONS
========================================================== */

.book-actions{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:18px;

}

.book-download{

    color:#A48363;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.book-download:hover{

    color:#43372F;

}

/* ==========================================================
   MY LIBRARY - BOOK CARDS
========================================================== */

.my-library-book {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* ==========================================================
   COVER
========================================================== */

.my-library-book-cover {
    position: relative;

    display: block;

    margin-bottom: 26px;

    text-decoration: none;
}


.my-library-book-cover::before {
    content: "";

    position: absolute;

    inset: 12%;

    border-radius: 50%;

    background: #F3E8D8;

    filter: blur(45px);

    opacity: .45;

    z-index: -1;
}


.my-library-book-cover::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -18px;

    transform: translateX(-50%);

    width: 160px;
    height: 18px;

    border-radius: 50%;

    background: rgba(0, 0, 0, .08);

    filter: blur(14px);

    z-index: -2;
}


.my-library-book-cover img {
    display: block;

    width: 100%;

    max-width: 250px;

    border-radius: 14px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, .10);

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


.my-library-book:hover
.my-library-book-cover img {

    transform:
        translateY(-8px)
        rotate(-1deg);

    box-shadow:
        0 30px 65px rgba(0, 0, 0, .16);
}


/* ==========================================================
   BODY
========================================================== */

.my-library-book-body {
    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;
}


/* ==========================================================
   TITLE
========================================================== */

.my-library-book-title {
    margin: 0 0 16px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 2.25rem;

    line-height: 1.1;

    font-weight: 500;

    color: #43372F;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.my-library-book-description {
    max-width: 520px;

    margin: 0 0 20px;

    font-size: 1rem;

    line-height: 1.8;

    color: #62574F;
}


/* ==========================================================
   ACTIONS
========================================================== */

.my-library-book-actions {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    margin-top: 4px;
}


/* ==========================================================
   ACTION
========================================================== */

.my-library-book-action {
    display: inline-block;

    font-size: .95rem;

    font-weight: 600;

    line-height: 1.4;

    text-decoration: none;

    color: #A48363;

    transition:
        color .25s ease,
        opacity .25s ease;
}


/* ==========================================================
   READ
========================================================== */

.my-library-book-action--read {
    font-size: 1rem;

    color: #43372F;
}


.my-library-book-action--read:hover {
    color: #A48363;
}


/* ==========================================================
   DOWNLOAD
========================================================== */

.my-library-book-action--download {
    font-size: .85rem;

    font-weight: 500;

    color: #8A7868;
}


.my-library-book-action--download:hover {
    color: #43372F;
}


/* ==========================================================
   EMPTY LIBRARY
========================================================== */

.my-library-empty {
    grid-column: 1 / -1;

    max-width: 620px;

    margin: 40px auto 80px;

    text-align: center;
}


.my-library-empty h2 {
    margin: 0 0 18px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 2.6rem;

    line-height: 1.05;

    font-weight: 500;

    color: #43372F;
}


.my-library-empty p {
    margin: 0 auto 24px;

    font-size: 1rem;

    line-height: 1.8;

    color: #62574F;
}


.my-library-empty-link {
    display: inline-block;

    color: #A48363;

    font-size: .95rem;

    font-weight: 600;

    text-decoration: none;

    transition: color .25s ease;
}


.my-library-empty-link:hover {
    color: #43372F;
}

/* =====================================================
   MY LIBRARY
   DOWNLOAD ROWS
   ===================================================== */


/* -----------------------------------------------------
   CONTENEDOR DE ARCHIVOS
   ----------------------------------------------------- */

.my-library-book-downloads {

    width: 100%;
    max-width: 620px;

    margin-top: 20px;

    border-top:
        1px solid
        rgba(92, 66, 50, 0.16);

}


/* -----------------------------------------------------
   FILA DE ARCHIVO
   ----------------------------------------------------- */

.my-library-download {

    display: flex !important;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    width: 100%;

    min-height: 64px;

    padding: 12px 0;

    border-bottom:
        1px solid
        rgba(92, 66, 50, 0.16);

}


/* -----------------------------------------------------
   ARCHIVO
   ----------------------------------------------------- */

.my-library-download-file {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    flex: 1;
}


.my-library-download-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    flex-shrink: 0;

    font-size: 18px;

    color: #5c4232;

}


.my-library-download-name {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

    color: #241c18;

}


/* -----------------------------------------------------
   ACCIONES
   ----------------------------------------------------- */

.my-library-download-actions {

    display: flex !important;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    flex-shrink: 0;

}


/* -----------------------------------------------------
   BOTÓN
   ----------------------------------------------------- */

.my-library-download-action {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding:
        7px
        12px;

    border-radius: 4px;

    font-family: inherit;

    font-size: 13px;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


/* -----------------------------------------------------
   LEER EN LÍNEA
   ----------------------------------------------------- */

.my-library-download-action--read {

    color: #4f3a2d;

    background: transparent;

    border:
        1px solid
        #9b806d;

}


.my-library-download-action--read:hover {

    color: #43372F;

    background: #f1e9e2;

    border-color: #705441;

}


/* -----------------------------------------------------
   DESCARGAR
   ----------------------------------------------------- */

.my-library-download-action--download {

    color: #ffffff;

    background: #5c4232;

    border:
        1px solid
        #5c4232;

}


.my-library-download-action--download:hover {

    background: #432f24;

    border-color: #432f24;

}


/* -----------------------------------------------------
   SIN ARCHIVOS
   ----------------------------------------------------- */

.my-library-no-downloads {

    margin-top: 20px;

    font-size: 14px;

    color: #806f64;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {

    .my-library-book-downloads {

        max-width: 100%;

    }


    .my-library-download {

        align-items: flex-start;

        gap: 14px;

    }


    .my-library-download-file {

        padding-top: 7px;

    }


    .my-library-download-actions {

        flex-shrink: 0;

    }


    .my-library-download-action {

        padding:
            7px
            10px;

        font-size: 12px;

    }

}


@media (max-width: 520px) {

    .my-library-download {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        padding: 16px 0;

    }


    .my-library-download-file {

        width: 100%;

        padding-top: 0;

    }


    .my-library-download-actions {

        justify-content: flex-start;

        width: 100%;

    }


    .my-library-download-action {

        flex: 0 0 auto;

    }

}



