/* ── RESET & VARIABLES ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --obsidian:#080808; --deep:#0d0d0f; --surface:#131318; --surface2:#1a1a22;
    --gold:#c9a84c; --gold2:#e8c97a; --gold-dim:#8b6f2e;
    --cream:#f5efe0; --muted:#888; --border:#2a2a35;
    --serif:'Playfair Display',serif; --cond:'Cormorant Garamond',serif; --mono:'Space Mono',monospace;
    --sans:'Roboto','Open Sans','Segoe UI',system-ui,-apple-system,sans-serif;
    --ease-out:cubic-bezier(0.16,1,0.3,1);
}

/* ── CURSOR Y FONDO ─────────────────────────────────────────── */
html, body {
    background: var(--obsidian);
    color: var(--cream);
    font-family: var(--cond);
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dim) var(--obsidian);
}

button, a, [onclick], .book-card {
    cursor: pointer !important;
}

/* ── AURORA BACKGROUND (OPTIMIZADO CERO LAG) ────────────────── */
#aurora-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;background:var(--obsidian)}
.aurora-orb{position:absolute;border-radius:50%;animation:auroraFloat 20s ease-in-out infinite}
.a1{width:70vw;height:70vw;top:-20vh;left:-10vw;background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 60%);animation-delay:0s}
.a2{width:60vw;height:60vw;top:30%;right:-20vw;background:radial-gradient(circle,rgba(100,50,150,.07) 0%,transparent 60%);animation-delay:-7s}
.a3{width:50vw;height:50vw;bottom:-10vh;left:30%;background:radial-gradient(circle,rgba(201,168,76,.05) 0%,transparent 60%);animation-delay:-14s}
@keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.08)}66%{transform:translate(-40px,50px) scale(0.95)}}

/* ── THREE.JS CANVAS ────────────────────────────────────────── */
#three-canvas{position:absolute;top:0;right:0;width:58%;height:100%;pointer-events:all;z-index:2;background:transparent}

/* ── SECTION TRANSITIONS ────────────────────────────────────── */
.section-transition{position:relative}
.section-transition::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(201,168,76,.2),transparent);
}

/* ── GLASSMORPHISM ──────────────────────────────────────────── */
.glass-panel{
    background:rgba(13,13,15,.82);
    backdrop-filter:blur(28px) saturate(180%);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    border:1px solid rgba(201,168,76,.18);
    box-shadow:0 25px 80px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── AUTH MODAL ─────────────────────────────────────────────── */
.auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:400;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(8px)}
.auth-overlay.open{opacity:1;pointer-events:all}
.auth-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-54%);width:90%;max-width:420px;z-index:401;padding:3rem;border-radius:4px;opacity:0;pointer-events:none;transition:transform .4s var(--ease-out),opacity .3s;will-change:transform}
.auth-modal.open{transform:translate(-50%,-50%);opacity:1;pointer-events:all}
.auth-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--muted);font-size:1.1rem;transition:color .2s;line-height:1}
.auth-close:hover{color:var(--cream)}
.auth-logo{font-family:var(--serif);font-size:1.8rem;font-weight:800;color:var(--gold);letter-spacing:.08em;text-align:center;margin-bottom:1.5rem}
.auth-logo span{font-style:italic;font-weight:400}
.auth-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:1.8rem;gap:0}
.auth-tab{flex:1;background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;padding:.75rem 0;transition:color .2s;position:relative}
.auth-tab::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s var(--ease-out)}
.auth-tab.active{color:var(--gold)}
.auth-tab.active::after{transform:scaleX(1)}
.auth-form-group{margin-bottom:1.2rem}
.auth-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.4rem}
.auth-input{
    width:100%;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    color:var(--cream);
    padding:.8rem 1rem;
    font-family:var(--sans);
    font-size:.92rem;
    font-weight:400;
    line-height:1.4;
    outline:none;
    transition:border-color .2s, background .2s;
    border-radius:3px;
}
.auth-input:focus{border-color:var(--gold);background:rgba(201,168,76,.05)}
.auth-input::placeholder{color:rgba(245,239,224,.45);font-style:normal}
/* Options dropdown — explicit color/background para forzar contraste
   en todos los browsers (Chrome/Edge respetan estos atributos en option) */
.auth-input option,
select.auth-input option{
    background:var(--surface);
    color:var(--cream);
    font-family:var(--sans);
    font-style:normal;
    padding:.6rem;
}
.auth-err{font-family:var(--mono);font-size:.6rem;color:#e05555;min-height:.9rem;letter-spacing:.06em;margin-top:.3rem}
.auth-submit-btn{width:100%;background:var(--gold);color:var(--obsidian);padding:.9rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:none;transition:background .2s,transform .2s;margin-top:1.2rem}
.auth-submit-btn:hover{background:var(--gold2);transform:translateY(-1px)}
.auth-switch-text{font-family:var(--cond);font-size:.85rem;color:var(--muted);text-align:center;margin-top:1rem;font-style:italic}
.auth-switch-text button{background:none;border:none;color:var(--gold);font-family:var(--cond);font-size:.85rem;font-style:italic;text-decoration:underline}

/* Nav auth */
.auth-nav-group{display:flex;gap:.5rem;align-items:center}
.nav-auth-btn{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;padding:.45rem 1rem;border-radius:2px;transition:all .25s}
.nav-auth-btn.ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}
.nav-auth-btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.nav-auth-btn.solid{background:var(--gold);border:none;color:var(--obsidian);font-weight:700}
.nav-auth-btn.solid:hover{background:var(--gold2);transform:translateY(-1px)}
/* User pill */
.auth-user-pill{display:flex;align-items:center;gap:.6rem;background:rgba(201,168,76,.1);border:1px solid var(--gold-dim);padding:.4rem .9rem;border-radius:40px;position:relative}
.auth-avatar{width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--obsidian);font-family:var(--serif);font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.auth-username{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.auth-user-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:var(--surface);border:1px solid var(--border);padding:.5rem;min-width:160px;z-index:10;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .22s,transform .22s}
.auth-user-dropdown.open{opacity:1;pointer-events:all;transform:translateY(0)}
.auth-user-dropdown button{width:100%;background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.5rem .8rem;text-align:left;transition:color .2s}
.auth-user-dropdown button:hover{color:var(--cream)}

/* ── SEARCH OVERLAY ─────────────────────────────────────────── */
.search-overlay{position:fixed;inset:0;background:rgba(8,8,8,.97);z-index:500;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
.search-overlay.open{opacity:1;pointer-events:all}
.search-overlay-close{position:absolute;top:2rem;right:2.5rem;background:none;border:none;color:var(--muted);font-size:1.5rem;transition:color .2s}
.search-overlay-close:hover{color:var(--cream)}
.search-overlay-inner{width:100%;max-width:720px;padding:0 2rem}
.search-overlay-label{font-family:var(--mono);font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.5rem}
.search-overlay-wrapper{position:relative;display:flex;align-items:center}
.search-overlay-icon{position:absolute;left:1.2rem;font-size:1.4rem;color:var(--gold-dim)}
.search-overlay-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--cream);padding:1rem 1rem 1rem 3.2rem;font-family:var(--serif);font-size:2rem;outline:none;transition:border-color .2s;font-style:italic}
.search-overlay-input:focus{border-color:var(--gold)}
.search-overlay-input::placeholder{color:#333}
.search-results{margin-top:2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:55vh;overflow-y:auto;padding-right:.5rem}
.search-results::-webkit-scrollbar{width:2px}
.search-results::-webkit-scrollbar-thumb{background:var(--gold-dim)}
.search-result-item{background:var(--surface);border:1px solid var(--border);padding:.8rem;transition:all .2s}
.search-result-item:hover{border-color:var(--gold);background:var(--surface2)}
.search-result-cover-bg{width:100%;height:120px;margin-bottom:.6rem;position:relative;overflow:hidden}
.search-result-cover-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.search-result-title{font-family:var(--serif);font-size:.8rem;font-weight:600;color:var(--cream);line-height:1.3;margin-bottom:.2rem}
.search-result-author{font-family:var(--mono);font-size:.55rem;color:var(--muted);letter-spacing:.08em}
.search-result-price{font-family:var(--serif);font-size:.9rem;color:var(--gold);margin-top:.4rem}
.search-no-results{grid-column:1/-1;text-align:center;padding:3rem;font-family:var(--cond);color:var(--muted);font-style:italic}

/* ── CART SIDEBAR ───────────────────────────────────────────── */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.cart-overlay.open{opacity:1;pointer-events:all}
.cart-sidebar{position:fixed;top:0;right:0;width:420px;max-width:95vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:201;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s var(--ease-out);will-change:transform}
.cart-sidebar.open{transform:translateX(0)}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.8rem;border-bottom:1px solid var(--border);flex-shrink:0}
.cart-title{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--cream);display:flex;align-items:center;gap:.8rem}
.cart-badge{background:var(--gold);color:var(--obsidian);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.65rem;font-weight:700;flex-shrink:0}
.cart-close{background:none;border:none;color:var(--muted);font-size:1.2rem;transition:color .2s;padding:.3rem;line-height:1}
.cart-close:hover{color:var(--cream)}
.cart-items{flex:1;overflow-y:auto;padding:0 1.8rem;scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;min-height:0}
.cart-items::-webkit-scrollbar{width:2px}
.cart-items::-webkit-scrollbar-thumb{background:var(--gold-dim)}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:280px;gap:1rem;text-align:center;padding:2rem}
.cart-empty-icon{font-size:3rem;opacity:.4}
.cart-empty p{font-family:var(--cond);font-size:1rem;color:var(--muted);font-style:italic}
.cart-empty-btn{margin-top:.5rem;background:transparent;border:1px solid var(--border);color:var(--cream);padding:.6rem 1.5rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;transition:all .2s}
.cart-empty-btn:hover{border-color:var(--gold);color:var(--gold)}
.cart-item{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--border);position:relative;align-items:flex-start}
.cart-item-cover{width:58px;height:82px;flex-shrink:0;position:relative;overflow:hidden;background:var(--surface2)}
.cart-item-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.cart-item-info{flex:1;min-width:0;padding-right:1.5rem}
.cart-item-title{font-family:var(--serif);font-size:.9rem;font-weight:600;color:var(--cream);line-height:1.3;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-author{font-family:var(--mono);font-size:.55rem;color:var(--muted);letter-spacing:.08em;margin-bottom:.5rem;text-transform:uppercase}
.cart-item-price{font-family:var(--serif);font-size:1rem;color:var(--gold);font-weight:600;margin-bottom:.5rem}
.cart-item-controls{display:flex;align-items:center;gap:.4rem}
.qty-btn{background:var(--surface2);border:1px solid var(--border);color:var(--cream);width:26px;height:26px;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:.85rem;font-family:var(--mono);flex-shrink:0}
.qty-btn:hover{border-color:var(--gold);color:var(--gold)}
.qty-display{font-family:var(--mono);font-size:.75rem;min-width:22px;text-align:center;color:var(--cream)}
.cart-item-remove{position:absolute;top:.8rem;right:0;background:none;border:none;color:#555;font-size:.85rem;transition:color .2s;line-height:1;padding:.2rem}
.cart-item-remove:hover{color:#e05555}
.cart-footer{padding:1.2rem 1.8rem;border-top:1px solid var(--border);background:var(--deep);flex-shrink:0}
.cart-summary{margin-bottom:1rem}
.cart-summary-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:var(--muted);padding:.35rem 0}
.cart-total-row{border-top:1px solid var(--border);padding-top:.7rem;margin-top:.3rem;font-family:var(--serif);font-size:1.1rem;color:var(--cream);font-weight:600}
.cart-total-row span:last-child{color:var(--gold)}
.free-tag{color:#5ab870;font-family:var(--mono);font-size:.65rem}
.checkout-btn{width:100%;background:var(--gold);color:var(--obsidian);padding:.85rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:none;transition:background .2s,transform .2s;margin-bottom:.5rem}
.checkout-btn:hover{background:var(--gold2);transform:translateY(-1px)}
.continue-btn{width:100%;background:transparent;color:var(--muted);padding:.55rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--border);transition:all .2s}
.continue-btn:hover{border-color:var(--gold-dim);color:var(--cream)}

/* ── BOOK MODAL ─────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:300;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(8px)}
.modal-overlay.open{opacity:1;pointer-events:all}
.book-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-56%);width:90%;max-width:860px;max-height:88vh;background:var(--surface);border:1px solid var(--border);z-index:301;overflow-y:auto;opacity:0;pointer-events:none;transition:transform .4s var(--ease-out),opacity .3s;scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;will-change:transform}
.book-modal.open{transform:translate(-50%,-50%);opacity:1;pointer-events:all}
.modal-close{display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);color:var(--muted);width:34px;height:34px;border-radius:50%;transition:all .2s;z-index:10;margin:1rem 1rem 0 auto;position:sticky;top:1rem;left:calc(100% - 2.5rem);font-size:.9rem}
.modal-close:hover{border-color:var(--gold);color:var(--cream)}
.book-modal-content{display:grid;grid-template-columns:260px 1fr;gap:2.5rem;padding:1rem 2rem 2.5rem}
.modal-cover{width:100%;aspect-ratio:.7;position:relative;overflow:hidden;box-shadow:-16px 20px 50px rgba(0,0,0,.75)}
.modal-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s;z-index:1}
.modal-cover-gradient{position:absolute;inset:0;z-index:0}
.modal-cover-text{position:absolute;bottom:0;left:0;right:0;padding:1rem .9rem;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%)}
.modal-cover::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 55%,rgba(0,0,0,.35) 100%);z-index:2;pointer-events:none}
.modal-cover::after{content:'';position:absolute;top:0;right:0;width:2px;height:100%;background:rgba(0,0,0,.5);z-index:2}
.modal-cover-title{font-family:var(--serif);font-size:.85rem;font-weight:700;color:#fff;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.modal-cover-author{font-family:var(--mono);font-size:.55rem;color:rgba(255,255,255,.65);margin-top:.3rem;letter-spacing:.08em}
.modal-info{padding:.3rem 0}
.modal-genre-badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);padding:.2rem .8rem;display:inline-block;margin-bottom:.9rem}
.modal-title{font-family:var(--serif);font-size:1.7rem;font-weight:800;line-height:1.1;margin-bottom:.4rem;color:var(--cream)}
.modal-author{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.modal-rating{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.modal-stars{color:var(--gold);font-size:.9rem;letter-spacing:.05rem}
.modal-reviews{font-family:var(--mono);font-size:.6rem;color:var(--muted)}
.modal-desc{font-family:var(--cond);font-size:1.1rem;color:#e0e0e0;line-height:1.7;font-style:normal;margin-bottom:1.2rem}
.modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:1.2rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.8rem 0}
.modal-meta-row{display:flex;flex-direction:column;gap:.15rem}
.modal-meta-label{font-family:var(--mono);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.modal-meta-value{font-family:var(--cond);font-size:.9rem;color:var(--cream)}
.modal-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.modal-tag{font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);padding:.2rem .6rem}
.modal-price-block{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1rem}
.modal-price{font-family:var(--serif);font-size:1.9rem;font-weight:600;color:var(--gold)}
.modal-price-old{font-family:var(--mono);font-size:.8rem;color:#555;text-decoration:line-through}
.modal-discount{background:var(--gold);color:var(--obsidian);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;padding:.25rem .7rem;font-weight:700}
.modal-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.modal-add-cart{background:var(--gold);color:var(--obsidian);padding:.78rem 1.8rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:none;transition:background .2s,transform .2s;flex:1;min-width:140px}
.modal-add-cart:hover{background:var(--gold2);transform:translateY(-1px)}
.modal-wishlist-btn{background:transparent;border:1px solid var(--border);color:var(--cream);padding:.78rem 1rem;font-family:var(--mono);font-size:.7rem;transition:all .2s}
.modal-wishlist-btn:hover,.modal-wishlist-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.08)}

/* ── CHECKOUT MODAL ─────────────────────────────────────────── */
.checkout-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-56%);width:92%;max-width:960px;max-height:90vh;background:var(--surface);border:1px solid var(--border);z-index:301;overflow-y:auto;opacity:0;pointer-events:none;transition:transform .4s var(--ease-out),opacity .3s;scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;will-change:transform}
.checkout-modal.open{transform:translate(-50%,-50%);opacity:1;pointer-events:all}
.checkout-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;padding:2rem 2.5rem}
.checkout-summary-col{border-left:1px solid var(--border);padding-left:2.5rem}
.checkout-title{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--cream);margin-bottom:1.8rem}
.checkout-section{margin-bottom:1.8rem;padding-bottom:1.8rem;border-bottom:1px solid var(--border)}
.checkout-section:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.checkout-section-title{font-family:var(--mono);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.7rem}
.form-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.form-input{
    background:transparent;
    border:1px solid var(--border);
    color:var(--cream);
    padding:.7rem 1rem;
    font-family:var(--sans);
    font-size:.92rem;
    font-weight:400;
    outline:none;
    transition:border-color .2s;
    border-radius:3px;
}
.form-input:focus{border-color:var(--gold)}
.form-input::placeholder{color:rgba(245,239,224,.4);font-style:normal}
.form-input option{background:var(--surface);color:var(--cream);font-family:var(--sans)}
.form-input.error{border-color:#c44}
.form-error{font-family:var(--mono);font-size:.55rem;color:#c44;letter-spacing:.06em;min-height:.85rem}
.payment-methods{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.payment-method{display:flex;align-items:center;gap:.8rem;border:1px solid var(--border);padding:.7rem 1rem;transition:all .2s}
.payment-method.active{border-color:var(--gold);background:rgba(201,168,76,.05)}
.payment-method input{accent-color:var(--gold)}
.pm-label{font-family:var(--cond);font-size:.95rem;color:var(--cream)}
.card-fields{overflow:hidden;transition:opacity .25s,max-height .4s;max-height:300px}
.card-fields.hidden{opacity:0;max-height:0;pointer-events:none}
.checkout-submit-btn{width:100%;background:var(--gold);color:var(--obsidian);padding:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:none;transition:background .2s,transform .2s;margin-top:.4rem}
.checkout-submit-btn:hover{background:var(--gold2);transform:translateY(-1px)}
.checkout-submit-btn:disabled{opacity:.6;transform:none}
.checkout-items-list{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.7rem;max-height:280px;overflow-y:auto;padding-right:.3rem}
.checkout-item{display:flex;gap:.8rem;align-items:center}
.checkout-item-cover{width:40px;height:56px;flex-shrink:0;position:relative;overflow:hidden;background:var(--surface2)}
.checkout-item-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.checkout-item-title{font-family:var(--serif);font-size:.85rem;font-weight:600;color:var(--cream);line-height:1.3}
.checkout-item-qty{font-family:var(--mono);font-size:.6rem;color:var(--muted)}
.checkout-item-price{font-family:var(--serif);font-size:.9rem;color:var(--gold);margin-left:auto;flex-shrink:0}
.checkout-totals{border-top:1px solid var(--border);padding-top:1rem}
.order-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}
.order-success-icon{width:68px;height:68px;border-radius:50%;background:rgba(201,168,76,.12);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--gold);margin-bottom:1.5rem}
.order-success-title{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--cream);margin-bottom:.7rem}
.order-success-sub{font-family:var(--cond);font-size:1rem;color:var(--muted);font-style:italic;max-width:400px;line-height:1.7;margin-bottom:1.5rem}
.order-code{font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;color:var(--gold);border:1px solid var(--gold-dim);padding:.6rem 1.5rem}

/* ── NAV ─────────────────────────────────────────────────────── */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 1.1rem 3rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    backdrop-filter: blur(12px) saturate(160%);
    background: rgba(8,8,8,.72);
    border-bottom: 1px solid rgba(201,168,76,.1);
    transition: background .3s;
}
.nav-logo {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--serif);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--gold);
    text-decoration: none;
    transition: opacity .2s, transform .25s var(--ease-out);
}
.nav-logo:hover { opacity: .85; transform: translateY(-1px); }
.folio-mark {
    width: 32px; height: 32px;
    color: var(--gold);
    flex-shrink: 0;
    transition: transform .35s var(--ease-out);
}
.nav-logo:hover .folio-mark { transform: rotate(-4deg) scale(1.05); }
.folio-text { display: inline-block; line-height: 1; }
.folio-text em { font-style: italic; font-weight: 400; }
.footer-logo .folio-mark { width: 28px; height: 28px; }
.footer-logo { font-size: 1.6rem; }
.nav-links { justify-self: center; display: flex; gap: 2rem; list-style: none; }
.nav-links a{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease-out)}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after{width:100%}
.nav-actions { justify-self: end; display: flex; align-items: center; gap: .7rem; }
.nav-search-btn{background:none;border:1px solid var(--border);color:var(--cream);padding:.5rem .9rem;font-size:1rem;transition:all .2s;border-radius:2px;line-height:1}
.nav-search-btn:hover{border-color:var(--gold);color:var(--gold)}
.nav-wishlist-btn{background:none;border:1px solid var(--border);color:var(--cream);padding:.5rem .9rem;font-size:.85rem;transition:all .2s;border-radius:2px;position:relative;display:flex;align-items:center;gap:.3rem}
.nav-wishlist-btn:hover{border-color:var(--gold);color:var(--gold)}
.wishlist-count{font-size:.65rem;font-family:var(--mono);background:var(--gold);color:var(--obsidian);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-weight:700}
.nav-cart-btn{position:relative;background:var(--gold);color:var(--obsidian);border:none;padding:.5rem 1rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;transition:background .2s,transform .2s;font-weight:700;display:flex;align-items:center;gap:.5rem}
.nav-cart-btn:hover{background:var(--gold2);transform:translateY(-1px)}
.nav-cart-btn svg{flex-shrink:0}
.cart-count{background:var(--obsidian);color:var(--gold);border-radius:50%;width:18px;height:18px;font-size:.55rem;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700}

/* ── HERO ─────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;z-index:1}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 60% 50%,rgba(201,168,76,.055) 0%,transparent 70%),radial-gradient(ellipse 40% 80% at 20% 30%,rgba(201,168,76,.03) 0%,transparent 60%);z-index:1;pointer-events:none}
.hero-content{position:relative;z-index:3;padding:7rem 3rem 4rem;max-width:50%}
.hero-tag{font-family:var(--mono);font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.8rem;display:flex;align-items:center;gap:.8rem;opacity:0;animation:fadeUp .8s .3s var(--ease-out) forwards}
.hero-tag::before{content:'';display:inline-block;width:40px;height:1px;background:var(--gold)}
.hero-title{font-family:var(--serif);font-size:clamp(3rem,6vw,6rem);line-height:1.0;font-weight:800;margin-bottom:1.5rem;overflow:hidden}
.hero-title .line{display:block;transform:translateY(100%);animation:slideUp .9s var(--ease-out) forwards}
.hero-title .line:nth-child(1){animation-delay:.5s}
.hero-title .line:nth-child(2){animation-delay:.65s;font-style:italic;color:var(--gold)}
.hero-title .line:nth-child(3){animation-delay:.8s}
.hero-sub{font-size:1.1rem;font-weight:300;color:#aaa;line-height:1.7;max-width:400px;opacity:0;animation:fadeUp .8s 1s var(--ease-out) forwards}
.hero-cta{display:flex;gap:1.5rem;margin-top:2.5rem;opacity:0;animation:fadeUp .8s 1.2s var(--ease-out) forwards}
.btn-primary{background:var(--gold);color:var(--obsidian);padding:.85rem 2.4rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:none;transition:background .25s,transform .25s;position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--gold2);transform:translateX(-100%);transition:transform .3s var(--ease-out)}
.btn-primary:hover::before{transform:translateX(0)}
.btn-primary span{position:relative;z-index:1}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(201,168,76,.3)}
.btn-secondary{background:transparent;color:var(--cream);padding:.85rem 2.4rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--border);transition:all .25s}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.hero-stats{display:flex;align-items:center;gap:0;margin-top:3rem;opacity:0;animation:fadeUp .8s 1.4s var(--ease-out) forwards}
.stat{padding:0 1.5rem;text-align:center;position:relative}
.stat:not(:last-child)::after{content:'';position:absolute;right:0;top:15%;height:70%;width:1px;background:var(--border)}
.stat:first-child{padding-left:0}
.stat-num{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--gold);line-height:1}
.stat-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.hero-3d-hint{position:absolute;right:2rem;bottom:4rem;z-index:3;display:flex;align-items:center;gap:.6rem;opacity:0;animation:fadeIn 1s 2.5s forwards;pointer-events:none}
.hero-3d-hint span{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(201,168,76,.6)}
.hint-arrow{color:var(--gold);font-size:1rem;animation:hintBounce 2s ease-in-out infinite}
@keyframes hintBounce{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-4px)}}

/* ── SEARCH BAR ──────────────────────────────────────────────── */
.search-section{position:relative;z-index:1;padding:3.5rem 3rem;background:var(--deep);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.search-container{max-width:800px;margin:0 auto}
.search-label{font-family:var(--mono);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;display:block}
.search-wrapper{display:flex}
.search-input{flex:1;background:transparent;border:1px solid var(--border);border-right:none;color:var(--cream);padding:1rem 1.4rem;font-family:var(--cond);font-size:1.1rem;outline:none;transition:border-color .2s;font-style:italic}
.search-input::placeholder{color:#555;font-style:italic}
.search-input:focus{border-color:var(--gold)}
.search-btn{background:var(--gold);color:var(--obsidian);padding:1rem 1.8rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:none;transition:background .2s;white-space:nowrap}
.search-btn:hover{background:var(--gold2)}
.search-tags{display:flex;gap:.7rem;margin-top:.9rem;flex-wrap:wrap}
.search-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);padding:.28rem .75rem;transition:all .2s;background:transparent}
.search-tag:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.05)}

/* ── SECTIONS ────────────────────────────────────────────────── */
section{position:relative;z-index:1}
.section-header{text-align:center;margin-bottom:3rem}
.section-tag{font-family:var(--mono);font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;display:block}
.section-title{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:600;line-height:1.15}
.section-title em{font-style:italic;color:var(--gold)}
.section-line{width:55px;height:1px;background:var(--gold);margin:1.4rem auto 0}

/* ── CATEGORIES — Cosmic Velvet ──────────────────────────────── */
.categories{
    padding:5.5rem 3rem;
    position:relative;
    overflow:hidden;
    background-color:var(--surface);
    background-image:
            radial-gradient(ellipse 130% 120% at 50% 50%, transparent 50%, rgba(0,0,0,.22) 100%),
            radial-gradient(ellipse 80% 50% at 12% 0%, rgba(125,70,200,.13) 0%, transparent 62%),
            radial-gradient(ellipse 70% 50% at 90% 100%, rgba(201,168,76,.10) 0%, transparent 65%),
            radial-gradient(ellipse 110% 80% at 50% 50%, rgba(40,20,80,.18) 0%, transparent 70%);
}
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem}

.cat-card{
    position:relative;aspect-ratio:.75;overflow:hidden;
    border:1px solid var(--border);
    transition:transform .45s var(--ease-out),border-color .3s,box-shadow .45s var(--ease-out);
    will-change:transform;
    contain:layout style;
}
.cat-card:hover{
    transform:translateY(-8px) scale(1.03);
    border-color:rgba(201,168,76,.45);
    box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(201,168,76,.12);
}

.cat-card-bg{
    position:absolute;inset:0;
    background:var(--cat-bg,var(--surface2));
    transition:transform .55s var(--ease-out);
}
.cat-card:hover .cat-card-bg{transform:scale(1.08)}

.cat-card-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.2) 55%,transparent 100%);
}

.cat-glow{
    position:absolute;inset:0;
    opacity:0;
    transition:opacity .5s var(--ease-out);
    pointer-events:none;
}
.cat-card:hover .cat-glow{opacity:1}

.cat-card::before{
    content:'';
    position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    transform:scaleX(0);
    transition:transform .5s var(--ease-out);
    z-index:4;
}
.cat-card:hover::before{transform:scaleX(1)}

.cat-icon{
    position:absolute;
    top:42%;left:50%;
    transform:translate(-50%,-50%);
    color:var(--gold);
    opacity:.75;
    transition:transform .45s var(--ease-out),opacity .35s,color .35s;
    display:flex;align-items:center;justify-content:center;
    z-index:3;
    filter:drop-shadow(0 0 10px rgba(201,168,76,.0));
}
.cat-icon svg{width:52px;height:52px;stroke-width:1.2}

.cat-card:hover .cat-icon{
    transform:translate(-50%,-60%) scale(1.18);
    opacity:1;
    color:var(--gold2);
    filter:drop-shadow(0 0 14px rgba(201,168,76,.5));
}

.cat-info{position:absolute;bottom:0;left:0;right:0;padding:1.1rem .9rem;z-index:3;
    transition:transform .4s var(--ease-out);
}
.cat-card:hover .cat-info{transform:translateY(-4px)}

.cat-name{font-family:var(--serif);font-size:.88rem;font-weight:700;color:#fff;line-height:1.2;
    text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.cat-count{font-family:var(--mono);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:.3rem;
    opacity:.85;
}

/* ── MARQUEE ─────────────────────────────────────────────────── */
.marquee-section{overflow:hidden;background:var(--gold);padding:.75rem 0;position:relative;z-index:1}
.marquee-track{display:flex;gap:2rem;animation:marquee 28s linear infinite;white-space:nowrap}
.marquee-item{font-family:var(--mono);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--obsidian);font-weight:700;flex-shrink:0;display:flex;align-items:center;gap:1.5rem}
.marquee-dot{width:4px;height:4px;background:var(--obsidian);border-radius:50%;opacity:.5}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── FILTER TABS ─────────────────────────────────────────────── */
.filter-tabs{display:flex;gap:.5rem;margin-bottom:2.5rem;flex-wrap:wrap;justify-content:center}
.filter-tab{background:transparent;border:1px solid var(--border);color:var(--muted);padding:.48rem 1.2rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;transition:all .2s}
.filter-tab:hover{border-color:var(--gold-dim);color:var(--cream)}
.filter-tab.active{background:var(--gold);color:var(--obsidian);border-color:var(--gold);font-weight:700}

/* ── BOOKS GRID ──────────────────────────────────────────────── */
.bestsellers{padding:5.5rem 3rem;background:var(--obsidian)}
.books-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.book-card{position:relative;perspective:800px;transform-style:preserve-3d}
.book-card-inner{position:relative;transition:transform 1.1s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d;will-change:transform}
.book-card:hover .book-card-inner{transform:rotateY(180deg)}
.book-card-front,.book-card-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.book-card-front{position:relative;z-index:2}
.book-card-back {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    transform: rotateY(180deg);
    background: var(--surface2);
    border: 1px solid var(--gold-dim);
    padding: 1.3rem;
    display: flex; flex-direction: column;
    pointer-events: none;
    border-radius: 4px;
}
.book-card:hover .book-card-back{pointer-events:auto}
.book-cover{width:100%;aspect-ratio:.7;position:relative;overflow:hidden}
.book-cover-bg{width:100%;height:100%;display:flex;align-items:flex-end;padding:1.1rem .9rem;position:relative;overflow:hidden}
.book-cover-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(0,0,0,.38) 100%);z-index:1}
.book-cover-bg::after{content:'';position:absolute;top:0;right:0;width:2px;height:100%;background:rgba(0,0,0,.45);z-index:1}
.book-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.book-cover-info{position:relative;z-index:2}
.book-cover-title{font-family:var(--serif);font-size:.8rem;font-weight:700;color:#fff;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.book-cover-author{font-family:var(--mono);font-size:.55rem;color:rgba(255,255,255,.65);margin-top:.3rem;letter-spacing:.08em}
.book-badge{position:absolute;top:.75rem;left:0;background:var(--gold);color:var(--obsidian);font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:.22rem .65rem;z-index:3}
.book-wishlist-btn{position:absolute;top:.55rem;right:.55rem;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);color:#fff;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:3;font-size:.9rem;border-radius:50%;backdrop-filter:blur(4px)}
.book-wishlist-btn:hover,.book-wishlist-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.18)}
.book-info{padding:.9rem 0 .4rem}
.book-info-title{font-family:var(--serif);font-size:1rem;font-weight:600;line-height:1.3;margin-bottom:.2rem;color:var(--cream)}
.book-info-author{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.book-rating{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.stars{color:var(--gold);font-size:.72rem;letter-spacing:.04rem}
.reviews-count{font-family:var(--mono);font-size:.55rem;color:#555}
.book-price-row{display:flex;align-items:center;justify-content:space-between}
.book-price{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--gold)}
.book-price-old{font-size:.68rem;color:#555;text-decoration:line-through;margin-left:.3rem;font-family:var(--mono)}
.add-cart-btn{background:transparent;border:1px solid var(--border);color:var(--cream);padding:.38rem .85rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;transition:all .2s}
.add-cart-btn:hover{background:var(--gold);color:var(--obsidian);border-color:var(--gold)}
.back-title{font-family:var(--serif);font-size:.95rem;font-weight:600;color:var(--gold);margin-bottom:.3rem}
.back-genre{font-family:var(--mono);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.back-desc{
    font-family:var(--cond);font-size:.95rem;color:#e0e0e0;line-height:1.6;
    font-style:normal;margin-bottom:.7rem;flex:1;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
}
.back-meta-mini{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-bottom:.7rem}
.back-meta-item{font-family:var(--mono);font-size:.53rem;color:var(--muted)}
.back-meta-item span{color:var(--cream);display:block}
.back-stars{color:var(--gold);font-size:.78rem;margin-bottom:.25rem}
.back-actions{display:flex;gap:.5rem;margin-top:auto}
.back-btn{flex:1;background:var(--gold);color:var(--obsidian);padding:.6rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;border:none;transition:background .2s}
.back-btn:hover{background:var(--gold2)}
.back-detail-btn{background:transparent;border:1px solid var(--border);color:var(--cream);padding:.6rem .75rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;transition:all .2s}
.back-detail-btn:hover{border-color:var(--gold);color:var(--gold)}
.no-results{text-align:center;padding:4rem 2rem;border:1px dashed var(--border)}
.no-results p{font-family:var(--cond);font-size:1rem;color:var(--muted);font-style:italic;margin-bottom:1.5rem}
.book-card.hidden{display:none}

/* ── FEATURED ────────────────────────────────────────────────── */
.featured-banner{padding:5.5rem 3rem;background:var(--deep);position:relative;overflow:hidden}
.featured-banner::before{content:'';position:absolute;top:-200px;right:-200px;width:650px;height:650px;border:1px solid rgba(201,168,76,.06);border-radius:50%}
.featured-banner::after{content:'';position:absolute;top:-100px;right:-100px;width:460px;height:460px;border:1px solid rgba(201,168,76,.04);border-radius:50%}
.featured-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:1}
.featured-image-wrap{display:flex;justify-content:center;perspective:1000px}
.featured-book-3d{transform-style:preserve-3d;animation:featuredFloat 5s ease-in-out infinite;will-change:transform}
@keyframes featuredFloat{0%,100%{transform:rotateX(5deg) rotateY(-10deg)}50%{transform:rotateX(8deg) rotateY(-15deg) translateY(-12px)}}
.featured-cover{width:270px;height:385px;position:relative;transform:rotateY(-20deg);box-shadow:-36px 36px 70px rgba(0,0,0,.75);overflow:hidden}
.featured-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s;z-index:1}
.featured-cover-inner{position:absolute;bottom:0;left:0;right:0;padding:1.8rem 1.4rem;z-index:3;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 80%)}
.featured-spine{position:absolute;left:-34px;top:0;width:34px;height:100%;display:flex;align-items:center;justify-content:center}
.featured-spine-txt{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--serif);font-size:.68rem;color:rgba(255,255,255,.65);letter-spacing:.12em;font-weight:600}
.featured-glow{position:absolute;bottom:-55px;left:50%;transform:translateX(-50%);width:180px;height:70px;background:#8B2635;filter:blur(38px);opacity:.35;border-radius:50%}
.featured-desc{font-family:var(--cond);font-size:1.05rem;color:#999;line-height:1.8;margin-top:1.8rem;font-style:italic}
.featured-author-row{display:flex;align-items:center;gap:1rem;margin-top:1.8rem}
.featured-author-avatar{width:46px;height:46px;border-radius:50%;border:1px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1rem;color:var(--gold);background:var(--surface);flex-shrink:0}
.featured-author-name{font-family:var(--serif);font-size:.95rem;font-weight:600;color:var(--cream)}
.featured-author-role{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.featured-price-row{display:flex;align-items:center;justify-content:space-between;margin-top:2rem;flex-wrap:wrap;gap:1rem}
.featured-price-main{font-family:var(--serif);font-size:2.1rem;font-weight:600;color:var(--gold)}
.featured-price-old{font-family:var(--mono);font-size:.82rem;color:#555;text-decoration:line-through;margin-left:.6rem}
.featured-discount{background:var(--gold);color:var(--obsidian);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;padding:.2rem .65rem;font-weight:700;margin-left:.5rem}

/* ── NEW RELEASES — Library at Dusk ──────────────────────────── */
.new-releases{
    padding:5.5rem 3rem;
    position:relative;
    overflow:hidden;
    background-color:var(--deep);
    background-image:
            radial-gradient(ellipse 90% 45% at 50% 0%, rgba(201,168,76,.13) 0%, transparent 70%),
            radial-gradient(ellipse 60% 45% at 0% 75%, rgba(160,80,40,.10) 0%, transparent 70%),
            radial-gradient(ellipse 60% 45% at 100% 75%, rgba(160,80,40,.10) 0%, transparent 70%),
            linear-gradient(180deg, rgba(20,15,10,.4) 0%, transparent 30%, transparent 70%, rgba(10,8,5,.5) 100%);
}
.new-releases::before{
    content:'';position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(201,168,76,.35),transparent);
}
.releases-scroll{display:flex;gap:1.6rem;overflow-x:auto;padding-bottom:1.4rem;scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;perspective:700px}
.releases-scroll::-webkit-scrollbar{height:3px}
.releases-scroll::-webkit-scrollbar-thumb{background:var(--gold-dim)}
.release-card{flex-shrink:0;width:155px;transition:transform .4s var(--ease-out)}
.release-card:hover{transform:rotateY(-5deg) rotateX(3deg) translateZ(14px) translateY(-5px)}
.release-cover{width:155px;height:222px;position:relative;overflow:hidden;margin-bottom:.85rem;border:1px solid var(--border)}
.release-cover-inner{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:.85rem .75rem;position:relative;transition:transform .4s}
.release-cover-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 50%,rgba(0,0,0,.5) 100%)}
.release-cover-inner::after{content:'';position:absolute;top:0;right:0;width:2px;height:100%;background:rgba(0,0,0,.5)}
.release-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.release-card:hover .release-cover-inner{transform:scale(1.04)}
.release-t{font-family:var(--serif);font-size:.73rem;font-weight:700;color:#fff;position:relative;z-index:1;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.release-a{font-family:var(--mono);font-size:.5rem;color:rgba(255,255,255,.6);position:relative;z-index:1;margin-top:.25rem;letter-spacing:.08em}
.release-info-title{font-family:var(--serif);font-size:.83rem;font-weight:600;color:var(--cream);line-height:1.3;margin-bottom:.2rem}
.release-info-sub{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.release-price{font-family:var(--serif);font-size:.95rem;font-weight:600;color:var(--gold)}
.release-add-btn{width:100%;margin-top:.55rem;background:transparent;border:1px solid var(--border);color:var(--muted);padding:.38rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;transition:all .2s;opacity:0;transform:translateY(5px)}
.release-card:hover .release-add-btn{opacity:1;transform:translateY(0)}
.release-add-btn:hover{background:var(--gold);color:var(--obsidian);border-color:var(--gold)}

/* ── NEWSLETTER — Velvet Study ───────────────────────────────── */
.newsletter{
    padding:5.5rem 3rem;
    position:relative;
    overflow:hidden;
    background-color:var(--surface2);
    background-image:
            radial-gradient(ellipse 130% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.20) 100%),
            radial-gradient(ellipse 70% 55% at 50% 50%, rgba(201,168,76,.13) 0%, transparent 60%),
            radial-gradient(ellipse 100% 70% at 50% 100%, rgba(80,40,140,.12) 0%, transparent 70%),
            radial-gradient(ellipse 60% 50% at 0% 0%, rgba(40,30,80,.10) 0%, transparent 65%),
            radial-gradient(ellipse 60% 50% at 100% 0%, rgba(40,30,80,.10) 0%, transparent 65%);
}
.newsletter::before{content:'FOLIO';position:absolute;font-family:var(--serif);font-size:18rem;font-weight:800;color:rgba(201,168,76,.035);top:-3rem;right:-1.5rem;pointer-events:none;white-space:nowrap;font-style:italic;letter-spacing:-0.02em;z-index:0}
.newsletter-inner{max-width:580px;margin:0 auto;text-align:center;position:relative;z-index:1}
.newsletter-title{font-family:var(--serif);font-size:clamp(2rem,4vw,2.9rem);font-weight:600;margin-bottom:.9rem}
.newsletter-sub{font-family:var(--cond);font-size:1rem;color:#888;line-height:1.7;font-style:italic;margin-bottom:2.2rem}
.newsletter-form{display:flex}
.newsletter-input{flex:1;background:transparent;border:1px solid var(--border);border-right:none;color:var(--cream);padding:1rem 1.4rem;font-family:var(--cond);font-size:1rem;outline:none;transition:border-color .2s;font-style:italic}
.newsletter-input:focus{border-color:var(--gold)}
.newsletter-input.error{border-color:#c44}
.newsletter-input::placeholder{color:#444;font-style:italic}
.newsletter-btn{background:var(--gold);color:var(--obsidian);padding:1rem 1.8rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:none;transition:background .2s;white-space:nowrap}
.newsletter-btn:hover{background:var(--gold2)}
.newsletter-msg{margin-top:.9rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;padding:.5rem 1rem}
.newsletter-msg.success{color:#5ab870;border:1px solid rgba(90,184,112,.3);background:rgba(90,184,112,.05)}
.newsletter-msg.error{color:#c44;border:1px solid rgba(204,68,68,.3);background:rgba(204,68,68,.05)}

/* ── FOOTER ──────────────────────────────────────────────────── */
footer{background:var(--obsidian);border-top:1px solid var(--border);padding:3.5rem 3rem 2rem;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3.5rem;margin-bottom:3.5rem}
.footer-brand>p{font-family:var(--cond);font-size:.93rem;color:#666;line-height:1.7;font-style:italic;margin-top:.5rem}
.footer-col h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:.7rem}
.footer-col ul li a{font-family:var(--cond);font-size:.93rem;color:#666;text-decoration:none;transition:color .2s;font-style:italic}
.footer-col ul li a:hover{color:var(--cream)}
.footer-socials{display:flex;gap:1rem;margin-top:1.5rem;align-items:center}
.social-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:2px;color:#555;transition:all .3s;text-decoration:none}
.social-icon svg{width:17px;height:17px}
.social-icon:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.06);transform:translateY(-2px)}
.footer-col-map .footer-map-link{display:block;border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:border-color .25s,transform .35s var(--ease-out);position:relative}
.footer-col-map .footer-map-link:hover{border-color:var(--gold);transform:translateY(-2px)}
.footer-map{display:block;width:100%;height:155px;border:0;filter:grayscale(.4) contrast(1.05) brightness(.9);transition:filter .35s}
.footer-col-map .footer-map-link:hover .footer-map{filter:none}
.footer-map-addr{font-family:var(--cond);font-size:.88rem;color:#777;font-style:italic;margin-top:.8rem;line-height:1.5}

.footer-bottom{border-top:1px solid var(--border);padding-top:1.8rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-copy{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#444}

/* ── TOAST ───────────────────────────────────────────────────── */
.toast{position:fixed;bottom:1.8rem;left:50%;transform:translateX(-50%) translateY(70px);background:var(--surface2);border:1px solid var(--gold-dim);padding:.75rem 1.6rem;z-index:999;opacity:0;transition:transform .3s var(--ease-out),opacity .3s;white-space:nowrap;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
#toast-text{font-family:var(--cond);font-size:.9rem;color:var(--cream)}

/* ── RATING ──────────────────────────────────────────── */
.rating-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:600;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(10px)}
.rating-modal.open{opacity:1;pointer-events:all}
.rating-modal-inner{background:var(--surface);border:1px solid var(--border);padding:3rem 3.5rem 2.5rem;max-width:460px;width:90%;text-align:center;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.9)}
.rating-modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--muted);font-size:1.1rem;transition:color .2s;line-height:1}
.rating-modal-close:hover{color:var(--cream)}
.rating-title{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--cream);line-height:1.2;margin-bottom:.4rem}
.rating-subtitle{font-family:var(--cond);font-size:.9rem;color:var(--muted);font-style:italic}
.rating-stars-container{display:flex;gap:.6rem;justify-content:center;margin:1.8rem 0 1rem;user-select:none}
.rs-star{font-size:3rem;transition:transform .12s;color:#2a2a35;line-height:1}
.rs-star.full{color:var(--gold)}
.rs-star.half{background:linear-gradient(to right,var(--gold) 50%,#2a2a35 50%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rs-star:hover{transform:scale(1.12)}
.rating-label-text{font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);min-height:1.2rem;transition:color .2s}
.rating-submit-btn{width:100%;background:var(--gold);color:var(--obsidian);padding:.85rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:none;transition:background .2s,transform .2s;margin-top:1.5rem}
.rating-submit-btn:hover{background:var(--gold2);transform:translateY(-1px)}
.rating-result{flex-direction:column;align-items:center;gap:.8rem;margin-top:1.5rem}
.rating-result-stars{display:flex;gap:.4rem;justify-content:center}
.rating-result-text{font-family:var(--cond);font-size:1rem;color:var(--cream);font-style:italic}
.rating-change-btn{background:transparent;border:1px solid var(--border);color:var(--muted);padding:.5rem 1.2rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;transition:all .2s}
.rating-change-btn:hover{border-color:var(--gold-dim);color:var(--cream)}
.rating-close-btn{background:var(--gold);color:var(--obsidian);padding:.5rem 1.5rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border:none;transition:background .2s}
.rating-close-btn:hover{background:var(--gold2)}
.rating-fab{position:fixed;bottom:1.8rem;right:1.8rem;z-index:150;background:var(--gold);color:var(--obsidian);border:none;padding:.65rem 1.3rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:.45rem;border-radius:40px;transition:all .3s;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.rating-fab:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.6)}
#fab-star{font-size:1rem;line-height:1}

/* ── THEME SWITCHER ──────────────────────────────────────────── */
.theme-switcher{position:fixed;bottom:1.8rem;left:1.8rem;z-index:150;display:flex;align-items:center;gap:.55rem;background:var(--surface2);border:1px solid var(--border);padding:.5rem .9rem;border-radius:40px;backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.5)}
.theme-switcher-label{font-family:var(--mono);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:.15rem}
.theme-btn{width:22px;height:22px;border-radius:50%;border:2px solid transparent;overflow:hidden;transition:all .25s;background:none;flex-shrink:0}
.theme-btn.active{border-color:var(--gold);transform:scale(1.2)}
.theme-btn:hover:not(.active){transform:scale(1.1)}
.theme-dot{display:block;width:100%;height:100%;border-radius:50%}

/* ── SCROLL ANIMATIONS ───────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(35px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-35px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(35px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.stagger>*{opacity:0;transform:translateY(25px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.stagger.visible>:nth-child(1){opacity:1;transform:none;transition-delay:.04s}
.stagger.visible>:nth-child(2){opacity:1;transform:none;transition-delay:.12s}
.stagger.visible>:nth-child(3){opacity:1;transform:none;transition-delay:.20s}
.stagger.visible>:nth-child(4){opacity:1;transform:none;transition-delay:.28s}
.stagger.visible>:nth-child(5){opacity:1;transform:none;transition-delay:.36s}
.stagger.visible>:nth-child(6){opacity:1;transform:none;transition-delay:.44s}

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scrollDrop{0%,100%{opacity:0;transform:scaleY(.3);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}

/* ── WARM THEME ──────────────────────────────────────────────── */
[data-theme="warm"]{--obsidian:#0c0805;--deep:#110d07;--surface:#18100a;--surface2:#201609;--gold:#d4922a;--gold2:#e8b45a;--gold-dim:#8c5a18;--cream:#faf0d8;--muted:#907060;--border:#2e1f10}
[data-theme="warm"] html,[data-theme="warm"] body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10,1 19,10 10,19 1,10' fill='none' stroke='%23d4922a' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%23d4922a'/%3E%3C/svg%3E") 10 10, auto!important}
[data-theme="warm"] body{background-image:repeating-linear-gradient(-45deg,transparent,transparent 50px,rgba(212,146,42,.012) 50px,rgba(212,146,42,.012) 51px)}
[data-theme="warm"] .a1{background:radial-gradient(circle,rgba(212,130,30,.08) 0%,transparent 70%)}
[data-theme="warm"] .a2{background:radial-gradient(circle,rgba(150,80,20,.05) 0%,transparent 70%)}
[data-theme="warm"] .a3{background:radial-gradient(circle,rgba(200,120,30,.04) 0%,transparent 70%)}

/* ── NEON THEME ──────────────────────────────────────────────── */
[data-theme="neon"]{--obsidian:#040810;--deep:#060c18;--surface:#0a1422;--surface2:#0f1c32;--gold:#00c8ff;--gold2:#60deff;--gold-dim:#0078aa;--cream:#d8f0ff;--muted:#506878;--border:#1a2840}
[data-theme="neon"] html,[data-theme="neon"] body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10,1 19,10 10,19 1,10' fill='none' stroke='%2300c8ff' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%2300c8ff'/%3E%3C/svg%3E") 10 10, auto!important}
[data-theme="neon"] body{background-image:radial-gradient(rgba(0,200,255,.055) 1px,transparent 1px);background-size:34px 34px}
[data-theme="neon"] .a1{background:radial-gradient(circle,rgba(0,200,255,.06) 0%,transparent 70%)}
[data-theme="neon"] .a2{background:radial-gradient(circle,rgba(0,100,220,.05) 0%,transparent 70%)}
[data-theme="neon"] nav{background:rgba(4,8,16,.88);border-bottom:1px solid rgba(0,200,255,.15)}
[data-theme="neon"] .nav-logo,[data-theme="neon"] .stat-num,[data-theme="neon"] .book-price,[data-theme="neon"] .featured-price-main{text-shadow:0 0 22px rgba(0,200,255,.45)}
[data-theme="neon"] .btn-primary{background:var(--gold);color:#04080f}
[data-theme="neon"] .btn-primary:hover{background:var(--gold2);box-shadow:0 0 30px rgba(0,200,255,.4)}
[data-theme="neon"] .filter-tab.active{background:var(--gold);color:#04080f;border-color:var(--gold);box-shadow:0 0 14px rgba(0,200,255,.35)}
[data-theme="neon"] .book-badge,[data-theme="neon"] .checkout-btn,[data-theme="neon"] .search-btn,[data-theme="neon"] .newsletter-btn,[data-theme="neon"] .rating-submit-btn,[data-theme="neon"] .rating-fab,[data-theme="neon"] .nav-cart-btn,[data-theme="neon"] .nav-auth-btn.solid{background:var(--gold);color:#04080f}
[data-theme="neon"] .cart-count{background:#04080f;color:var(--gold)}
[data-theme="neon"] .section-line,[data-theme="neon"] .hero-tag::before{background:var(--gold)}
[data-theme="neon"] .section-title em,[data-theme="neon"] .hero-title .line:nth-child(2){color:var(--gold)}
[data-theme="neon"] .book-card-back{border-color:var(--gold-dim)}
[data-theme="neon"] .cat-card:hover{border-color:var(--gold-dim);box-shadow:0 0 20px rgba(0,200,255,.12)}
[data-theme="neon"] .featured-glow{background:#003a5c;filter:blur(40px);opacity:.6}
[data-theme="neon"] .marquee-section{background:var(--gold)}
[data-theme="neon"] .marquee-item{color:#04080f}
[data-theme="neon"] .marquee-dot{background:#04080f}
[data-theme="neon"] .back-btn{background:var(--gold);color:#04080f}
[data-theme="neon"] .rs-star.full,[data-theme="neon"] .rs-star.half{color:var(--gold)}
[data-theme="neon"] .rs-star.half{background:linear-gradient(to right,var(--gold) 50%,#2a3a50 50%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme="neon"] .rs-star.empty{color:#2a3a50}
[data-theme="neon"] .search-input:focus,[data-theme="neon"] .form-input:focus,[data-theme="neon"] .newsletter-input:focus,[data-theme="neon"] .auth-input:focus{box-shadow:0 0 0 1px var(--gold);border-color:var(--gold)}

/* ── MEJORAS FINALES ─────────────────────────────────────────── */
.aurora-orb{will-change:transform;contain:layout style}
.book-card-inner{contain:layout style}
.release-card{contain:layout}

.back-title{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--gold);margin-bottom:.4rem}
.back-genre{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.back-desc{
    font-family:var(--cond);font-size:.97rem;line-height:1.65;
    color:#e8e8e8;font-style:normal;
    flex:1;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
    margin-bottom:.9rem;
}
.back-meta-item{font-family:var(--mono);font-size:.6rem;color:var(--muted)}
.back-meta-item span{font-family:var(--cond);font-size:.88rem;color:var(--cream);display:block;margin-top:.15rem}
.back-stars{color:var(--gold);font-size:.9rem;letter-spacing:.05rem;margin-bottom:.35rem}

.featured-banner::before,
.featured-banner::after { content: none; }

.featured-image-wrap{position:relative}
.featured-image-wrap::before,
.featured-image-wrap::after{
    content:'';
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}
.featured-image-wrap::before{
    width:560px;height:560px;
    border:1px solid rgba(201,168,76,.10);
}
.featured-image-wrap::after{
    width:380px;height:380px;
    border:1px solid rgba(201,168,76,.06);
}
.featured-book-3d{position:relative;z-index:1}
.featured-glow{
    background:radial-gradient(circle,rgba(201,168,76,.6) 0%,transparent 70%) !important;
    filter:blur(22px) !important;
    opacity:.22 !important;
    bottom:-35px !important;
    width:220px !important;
    height:80px !important;
}

.modal-title{font-family:var(--serif);font-size:1.95rem;font-weight:800;line-height:1.1;color:var(--cream)}
.modal-desc{font-family:var(--cond);font-size:1.08rem;color:#e0e0e0;font-style:normal;line-height:1.75;margin-bottom:1.2rem}
.modal-meta-value{font-family:var(--cond);font-size:.98rem;color:var(--cream)}

@keyframes shimmer{
    0%{background-position:-200% center}
    100%{background-position:200% center}
}
.nav-logo{
    background:linear-gradient(90deg,var(--gold) 0%,var(--gold2) 40%,var(--gold) 60%,var(--gold2) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    animation:shimmer 5s linear infinite;
}

.reveal,.reveal-left,.reveal-right{
    transition:opacity .75s cubic-bezier(0.22,1,0.36,1),transform .75s cubic-bezier(0.22,1,0.36,1);
}
.stagger>*{
    transition:opacity .65s cubic-bezier(0.22,1,0.36,1),transform .65s cubic-bezier(0.22,1,0.36,1);
}

.book-card-front{transition:box-shadow .4s var(--ease-out)}
.book-card:hover .book-card-front{box-shadow:0 20px 50px rgba(0,0,0,.5)}

.section-line{transition:width .6s var(--ease-out);margin-left:auto;margin-right:auto}
.section-header.visible .section-line{width:80px}

nav{transition:background .35s,box-shadow .35s}
nav.scrolled{background:rgba(8,8,8,.92);box-shadow:0 4px 30px rgba(0,0,0,.5)}

.marquee-section:hover .marquee-track{animation-play-state:paused}

.toast{border-left:3px solid var(--gold);padding-left:1.4rem}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--obsidian)}
::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

[data-theme="neon"] .cat-card:hover{
    border-color:rgba(0,200,255,.4);
    box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 25px rgba(0,200,255,.12);
}
[data-theme="neon"] .cat-card::before{
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
[data-theme="neon"] .cat-card:hover .cat-icon{
    filter:drop-shadow(0 0 14px rgba(0,200,255,.6));
    color:var(--gold2);
}
[data-theme="neon"] .nav-logo{
    background:linear-gradient(90deg,var(--gold) 0%,var(--gold2) 40%,var(--gold) 60%,var(--gold2) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:shimmer 4s linear infinite;
}
.modal-meta-value{font-size:1rem}

/* Obliga a la tarjeta gráfica (GPU) a procesar los elementos más pesados */
#aurora-bg,
.aurora-orb,
.glass-panel,
#main-nav {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
}
/* ════ Vitrina 3D — libros como objetos volumétricos ════════════════ */
/* Dimensiones del libro: 180w x 260h x 28d (px) */
.showcase-3d{
    padding:5rem 2rem 3rem;
    text-align:center;
    position:relative;
}
.showcase-3d-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:3rem 2.5rem;
    max-width:1280px;
    margin:2.5rem auto 0;
    perspective:1400px;
    perspective-origin:50% 30%;
    padding:1.5rem 0;
}
.b3d-empty{
    grid-column:1/-1;
    color:var(--muted);
    font-family:var(--mono);
    font-size:.78rem;
    letter-spacing:.1em;
    padding:3rem 0;
}
.b3d-stage{
    position:relative;
    width:180px;
    height:260px;
    margin:0 auto;
    transform-style:preserve-3d;
    cursor:pointer;
    outline:none;
}
.b3d-stage:focus-visible .b3d{
    box-shadow:0 0 0 2px var(--gold);
}
.b3d{
    position:relative;
    width:180px;
    height:260px;
    transform-style:preserve-3d;
    transform:rotateX(4deg) rotateY(-22deg);
    will-change:transform;
}
/* Patrón: cada cara se centra (left:50%; top:50%) y se traslada por la
   mitad de su tamaño con margin negativo, luego se transforma desde su
   propio centro hacia la posición correcta de la caja del libro. */
.b3d-face{
    position:absolute;
    left:50%;
    top:50%;
    overflow:hidden;
    box-shadow:inset 0 0 30px rgba(0,0,0,.35);
}
.b3d-front,
.b3d-back{
    width:180px;
    height:260px;
    margin:-130px 0 0 -90px;
}
.b3d-front{
    transform:translateZ(14px);
    border-radius:1px 3px 3px 1px;
    background-size:cover;
    background-position:center;
}
.b3d-cover-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.b3d-front-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 45%,rgba(0,0,0,.45) 100%),
        linear-gradient(90deg,rgba(0,0,0,.35) 0%,transparent 8%);
    pointer-events:none;
}
.b3d-front-spine-line{
    position:absolute;
    left:0; top:0;
    width:6px; height:100%;
    background:linear-gradient(90deg,rgba(0,0,0,.55),transparent);
    pointer-events:none;
}
.b3d-front-text{
    position:absolute;
    left:14px; right:14px; bottom:14px;
    font-family:var(--serif);
    color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.7);
    pointer-events:none;
    z-index:2;
}
.b3d-front-text .b3d-title{
    font-size:.78rem;
    font-weight:700;
    line-height:1.25;
    max-height:3.6em;
    overflow:hidden;
}
.b3d-front-text .b3d-author{
    font-family:var(--mono);
    font-size:.55rem;
    letter-spacing:.08em;
    opacity:.7;
    margin-top:.35rem;
}
.b3d-badge{
    position:absolute;
    top:10px; right:10px;
    padding:.2rem .55rem;
    background:var(--gold);
    color:#0a0a10;
    font-family:var(--mono);
    font-size:.55rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    z-index:3;
    border-radius:2px;
}
.b3d-back{
    transform:translateZ(-14px) rotateY(180deg);
    background-size:cover;
}
.b3d-back-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}
.b3d-spine{
    width:28px;
    height:260px;
    margin:-130px 0 0 -14px;
    transform:translateX(-90px) rotateY(-90deg);
    background-size:1000% 100%;
    background-position:center;
    box-shadow:inset 0 0 14px rgba(0,0,0,.6);
}
.b3d-spine::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.3) 60%,rgba(0,0,0,.6));
    pointer-events:none;
}
.b3d-spine-text{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%) rotate(90deg);
    transform-origin:center;
    color:rgba(255,255,255,.85);
    font-family:var(--serif);
    font-size:.7rem;
    font-weight:600;
    white-space:nowrap;
    max-width:230px;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:0 1px 3px rgba(0,0,0,.6);
}
/* Cantos (páginas) — patrón clásico de hojas de papel */
.b3d-edge-r{
    width:28px;
    height:260px;
    margin:-130px 0 0 -14px;
    transform:translateX(90px) rotateY(90deg);
    background:repeating-linear-gradient(
        180deg,
        #f5ecd6 0,#f5ecd6 1px,
        #d8cba6 1px,#d8cba6 2px
    );
    box-shadow:inset 0 0 8px rgba(0,0,0,.18);
}
.b3d-edge-t{
    width:180px;
    height:28px;
    margin:-14px 0 0 -90px;
    transform:translateY(-130px) rotateX(90deg);
    background:repeating-linear-gradient(
        90deg,
        #f5ecd6 0,#f5ecd6 1px,
        #d8cba6 1px,#d8cba6 2px
    );
    box-shadow:inset 0 0 6px rgba(0,0,0,.15);
}
.b3d-edge-b{
    width:180px;
    height:28px;
    margin:-14px 0 0 -90px;
    transform:translateY(130px) rotateX(-90deg);
    background:repeating-linear-gradient(
        90deg,
        #f5ecd6 0,#f5ecd6 1px,
        #d8cba6 1px,#d8cba6 2px
    );
    box-shadow:inset 0 0 6px rgba(0,0,0,.15);
}
.b3d-shadow{
    position:absolute;
    left:50%;
    bottom:-22px;
    width:160px;
    height:24px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,transparent 70%);
    filter:blur(6px);
    z-index:-1;
    pointer-events:none;
    transition:opacity .4s;
}
.b3d-stage:hover .b3d-shadow{opacity:.85}

@media (max-width:520px){
    .showcase-3d-grid{gap:2.5rem 1.2rem}
    .b3d-stage,.b3d{width:140px;height:200px}
    .b3d-front,.b3d-back{width:140px;height:200px;margin:-100px 0 0 -70px}
    .b3d-spine{height:200px;margin:-100px 0 0 -14px;transform:translateX(-70px) rotateY(-90deg)}
    .b3d-edge-r{height:200px;margin:-100px 0 0 -14px;transform:translateX(70px) rotateY(90deg)}
    .b3d-edge-t{width:140px;margin:-14px 0 0 -70px;transform:translateY(-100px) rotateX(90deg)}
    .b3d-edge-b{width:140px;margin:-14px 0 0 -70px;transform:translateY(100px) rotateX(-90deg)}
}

/* ════════════════════════════════════════════════════════════════
   FASE UI/UX — Identidad visual unificada
   ──────────────────────────────────────────────────────────────── */

/* ── Modo claro (toggle desde theme-switcher) ───────────────────── */
[data-theme="light"]{
    /* Paleta off-white / Bootstrap gray-50 — profesional y tenue */
    --obsidian:#f8f9fa;   /* fondo principal — Bootstrap gray-50 */
    --deep:#e9ecef;       /* secciones más profundas — gray-200 */
    --surface:#ffffff;    /* tarjetas y modales sobre fondo gris */
    --surface2:#f1f3f5;   /* superficies levemente recesadas — gray-100 */
    --gold:#9a7820;       /* dorado oscurecido para contraste */
    --gold2:#b89540;
    --gold-dim:#6f5616;
    --cream:#212529;      /* texto principal — gray-900 */
    --muted:#6c757d;      /* texto secundario — gray-600 */
    --border:#dee2e6;     /* bordes neutros — gray-300 */
}
[data-theme="light"] html,
[data-theme="light"] body{
    background:var(--obsidian);
    color:var(--cream);
}
[data-theme="light"] .auth-input,
[data-theme="light"] .form-input{
    background:var(--surface2);
    color:var(--cream);
    border-color:var(--border);
}
[data-theme="light"] .nav-auth-btn.ghost{color:var(--cream);border-color:var(--border)}
[data-theme="light"] #aurora-bg .aurora-orb{opacity:.45;mix-blend-mode:multiply}
[data-theme="light"] .b3d-edge-r,
[data-theme="light"] .b3d-edge-t,
[data-theme="light"] .b3d-edge-b{filter:brightness(.96)}
[data-theme="light"] .glass-panel{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(24px) saturate(150%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    border-color:rgba(160,122,31,.25);
    box-shadow:0 25px 80px rgba(120,90,40,.18), inset 0 1px 0 rgba(255,255,255,.6);
}

/* Sobrescribir backgrounds hardcoded que no usan variables */
[data-theme="light"] nav{
    background:rgba(248,249,250,.78)!important;
    border-bottom:1px solid rgba(0,0,0,.06);
}
[data-theme="light"] nav.scrolled{
    background:rgba(248,249,250,.92)!important;
    box-shadow:0 1px 0 rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
}
[data-theme="light"] .nav-links a{color:#5a5a5a}
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active{color:var(--gold)}
[data-theme="light"] .search-overlay{background:rgba(244,239,230,.97)!important}
[data-theme="light"] .cart-overlay,
[data-theme="light"] .auth-overlay{background:rgba(120,90,40,.35)!important;backdrop-filter:blur(8px)}
[data-theme="light"] .cart-sidebar{background:var(--surface);border-left:1px solid var(--border)}
[data-theme="light"] .book-modal,
[data-theme="light"] .checkout-modal,
[data-theme="light"] .auth-modal,
[data-theme="light"] .profile-modal{background:var(--surface);border:1px solid var(--border);color:var(--cream)}
[data-theme="light"] .auth-modal{background:rgba(255,255,255,.92)}
[data-theme="light"] #aurora-bg{background:var(--obsidian)}
[data-theme="light"] .a1{background:radial-gradient(circle,rgba(160,122,31,.10) 0%,transparent 60%)}
[data-theme="light"] .a2{background:radial-gradient(circle,rgba(180,130,50,.08) 0%,transparent 60%)}
[data-theme="light"] .a3{background:radial-gradient(circle,rgba(200,150,60,.06) 0%,transparent 60%)}
[data-theme="light"] body::before{
    background:
        radial-gradient(ellipse 60% 80% at 20% 0%, rgba(160,122,31,.06), transparent 60%),
        radial-gradient(ellipse 50% 70% at 80% 100%, rgba(120,80,200,.04), transparent 60%);
}
[data-theme="light"] .nav-logo,
[data-theme="light"] .folio-text,
[data-theme="light"] .folio-text em,
[data-theme="light"] .section-title,
[data-theme="light"] .hero-h1,
[data-theme="light"] .modal-title{color:var(--cream)}
[data-theme="light"] .section-tag,
[data-theme="light"] .hero-tag{color:var(--gold);border-color:var(--gold-dim)}
[data-theme="light"] .filter-tab{color:#5a5a5a;border-color:var(--border);background:transparent}
[data-theme="light"] .filter-tab.active{background:var(--gold);color:#fff;border-color:var(--gold)}
[data-theme="light"] .book-card-front,
[data-theme="light"] .book-card-back{background:var(--surface);color:var(--cream)}
[data-theme="light"] .book-info-title,
[data-theme="light"] .book-info-author,
[data-theme="light"] .modal-author,
[data-theme="light"] .modal-meta-value{color:var(--cream)}
[data-theme="light"] .reviews-count,
[data-theme="light"] .modal-meta-label{color:var(--muted)}
[data-theme="light"] .auth-input,
[data-theme="light"] .form-input,
[data-theme="light"] select.auth-input{
    background:#fcfcfd;        /* off-white sutil, no blanco puro */
    color:#212529;             /* gray-900, contraste AAA */
    border:1px solid var(--border);
    font-family:var(--sans);
}
[data-theme="light"] .auth-input::placeholder,
[data-theme="light"] .form-input::placeholder{
    color:#6c757d;             /* gray-600, legible */
    font-style:normal;
}
[data-theme="light"] .auth-input option,
[data-theme="light"] .form-input option,
[data-theme="light"] select.auth-input option{
    background:#fcfcfd;
    color:#212529;
    font-family:var(--sans);
}
[data-theme="light"] .auth-label,
[data-theme="light"] .checkout-section-title{color:var(--gold-dim)}
[data-theme="light"] .auth-tab{color:var(--muted)}
[data-theme="light"] .auth-tab.active{color:var(--gold)}
[data-theme="light"] .reg-avatar-preview{background:#f0e9d8;border-color:var(--gold-dim);color:var(--muted)}
[data-theme="light"] .profile-row{background:#f0f1f4;border-color:var(--border)}
[data-theme="light"] .reg-avatar-preview{background:#eef0f3;border-color:#c5c5cb;color:var(--muted)}
[data-theme="light"] .profile-key{color:var(--muted)}
[data-theme="light"] .profile-val,
[data-theme="light"] .profile-name,
[data-theme="light"] .profile-success-title{color:var(--cream)}
[data-theme="light"] footer{background:#ebe4d6;color:var(--muted);border-top:1px solid var(--border)}
[data-theme="light"] .scroll-indicator,
[data-theme="light"] .stat-num{color:var(--gold)}

/* ── Fondo con profundidad: capa de partículas suaves ─────────── */
#aurora-bg::after{
    content:'';
    position:absolute;
    inset:-20%;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(201,168,76,.5), transparent 60%),
        radial-gradient(1px 1px at 70% 80%, rgba(201,168,76,.35), transparent 60%),
        radial-gradient(1px 1px at 40% 70%, rgba(232,201,122,.45), transparent 60%),
        radial-gradient(2px 2px at 85% 20%, rgba(201,168,76,.3), transparent 60%),
        radial-gradient(1px 1px at 12% 85%, rgba(232,201,122,.3), transparent 60%),
        radial-gradient(1px 1px at 55% 15%, rgba(201,168,76,.4), transparent 60%);
    background-size:1100px 900px;
    animation:dustDrift 70s linear infinite;
    pointer-events:none;
    opacity:.55;
}
[data-theme="light"] #aurora-bg::after{opacity:.25}

@keyframes dustDrift{
    from{transform:translate3d(0,0,0)}
    to  {transform:translate3d(-1100px,-300px,0)}
}

/* ── Gradiente animado ambiental sobre el fondo ─────────────────── */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
        radial-gradient(ellipse 60% 80% at 20% 0%, rgba(201,168,76,.08), transparent 60%),
        radial-gradient(ellipse 50% 70% at 80% 100%, rgba(120,80,200,.06), transparent 60%),
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,200,255,.04), transparent 70%);
    background-size:200% 200%;
    animation:bgShift 26s ease-in-out infinite alternate;
    z-index:-1;
    pointer-events:none;
}
@keyframes bgShift{
    0%   {background-position:0% 0%, 100% 100%, 50% 50%}
    100% {background-position:30% 20%, 70% 80%, 60% 40%}
}
[data-theme="light"] body::before{opacity:.5}

/* ════════════════════════════════════════════════════════════════
   REGISTRO — Avatar uploader + nuevos campos
   ──────────────────────────────────────────────────────────────── */
.reg-avatar-row{
    display:flex;
    justify-content:center;
    margin-bottom:1.2rem;
}
.reg-avatar-preview{
    width:96px;
    height:96px;
    border-radius:50%;
    background:var(--surface2);
    border:2px dashed var(--gold-dim);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    font-family:var(--mono);
    font-size:.7rem;
    letter-spacing:.1em;
    background-size:cover;
    background-position:center;
    transition:border-color .25s, transform .25s;
    cursor:pointer;
    outline:none;
    position:relative;
    overflow:hidden;
}
.reg-avatar-preview:hover{
    border-color:var(--gold);
    transform:translateY(-2px);
}
.reg-avatar-preview.has-image{
    border:2px solid var(--gold);
    color:transparent;
}
.reg-avatar-preview.has-image::after{
    content:'Cambiar';
    position:absolute;
    inset:auto 0 0 0;
    height:28px;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-family:var(--mono);
    font-size:.55rem;
    letter-spacing:.15em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity .2s;
}
.reg-avatar-preview.has-image:hover::after{opacity:1}

.auth-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.9rem;
}
@media (max-width:480px){
    .auth-form-row{grid-template-columns:1fr}
}

.auth-label-hint{
    color:var(--muted);
    font-weight:400;
    font-size:.62rem;
    margin-left:.35rem;
}

.field-feedback{
    font-family:var(--mono);
    font-size:.62rem;
    letter-spacing:.04em;
    margin-top:.35rem;
    min-height:.95rem;
    color:var(--muted);
}
.field-feedback.ok   { color:#4caf7d }
.field-feedback.warn { color:var(--gold-dim) }
.field-feedback.err  { color:#e05555 }

.field-valid {
    border-color:#4caf7d !important;
    background:rgba(76,175,125,.06) !important;
}
.field-invalid{
    border-color:#e05555 !important;
    background:rgba(224,85,85,.06) !important;
}

select.auth-input{
    appearance:none;
    -webkit-appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                     linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position:calc(100% - 18px) calc(50% - 2px),
                        calc(100% - 12px) calc(50% - 2px);
    background-size:6px 6px, 6px 6px;
    background-repeat:no-repeat;
    padding-right:2.5rem;
}

/* ════════════════════════════════════════════════════════════════
   PERFIL ÉXITO — Modal de bienvenida tras registro
   ──────────────────────────────────────────────────────────────── */
.profile-modal{
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(.94);
    width:92%;
    max-width:480px;
    max-height:92vh;
    overflow-y:auto;
    padding:2.4rem 2rem;
    text-align:center;
    background:var(--surface);
    border:1px solid var(--border);

    /* 🔥 EL CAMBIO ESTÁ AQUÍ 🔥 (Antes estaba en 301) */
    z-index:405;

    opacity:0;
    pointer-events:none;
    transition:transform .45s var(--ease-out), opacity .3s;
    border-radius:6px;
}
.profile-modal.open{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);
}
.profile-success-tag{
    display:inline-block;
    font-family:var(--mono);
    font-size:.6rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:#4caf7d;
    border:1px solid rgba(76,175,125,.4);
    padding:.25rem .8rem;
    border-radius:30px;
    margin-bottom:1rem;
}
.profile-success-title{
    font-family:var(--serif);
    font-size:1.6rem;
    font-weight:600;
    margin-bottom:1.4rem;
    color:var(--cream);
}
.profile-success-title em{color:var(--gold);font-style:italic}
.profile-avatar{
    width:104px;
    height:104px;
    border-radius:50%;
    margin:0 auto 1rem;
    background:var(--gold);
    color:var(--obsidian);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--serif);
    font-size:2.2rem;
    font-weight:700;
    background-size:cover;
    background-position:center;
    box-shadow:0 0 0 4px rgba(201,168,76,.18), 0 8px 28px rgba(0,0,0,.35);
}
.profile-avatar.has-image{color:transparent;background-color:var(--surface2)}
.profile-name{
    font-family:var(--serif);
    font-size:1.25rem;
    color:var(--cream);
    margin-bottom:.3rem;
}
.profile-success-sub{
    color:var(--muted);
    font-family:var(--cond);
    font-size:.95rem;
    margin-bottom:1.6rem;
}
.profile-grid{
    display:flex;
    flex-direction:column;
    gap:.55rem;
    margin-bottom:1.6rem;
    text-align:left;
}
.profile-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:.55rem .8rem;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:4px;
    gap:1rem;
}
.profile-key{
    font-family:var(--mono);
    font-size:.6rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    flex-shrink:0;
}
.profile-val{
    font-family:var(--cond);
    font-size:.95rem;
    color:var(--cream);
    text-align:right;
    word-break:break-word;
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARDS — Admin & Empleado
   ──────────────────────────────────────────────────────────────── */

/* Overlay full-screen */
.dash-overlay{
    position:fixed;
    inset:0;
    z-index:600;
    background:var(--obsidian);
    overflow-y:auto;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease-out);
}
.dash-overlay.open{
    opacity:1;
    pointer-events:auto;
}
.dash-close{
    position:fixed;
    top:1.2rem;
    right:1.2rem;
    z-index:610;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--cream);
    font-size:1rem;
    cursor:pointer;
    transition:all .2s;
}
.dash-close:hover{
    border-color:var(--gold);
    color:var(--gold);
    transform:rotate(90deg);
}

.dash-content{
    max-width:1280px;
    margin:0 auto;
    padding:5rem 2rem 3rem;
}

/* ── Header ───────────────────────────────────────────────────── */
.dash-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:1.5rem;
    margin-bottom:2.5rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid var(--border);
}
.dash-tag{
    display:inline-block;
    font-family:var(--mono);
    font-size:.62rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:.5rem;
}
.dash-title{
    font-family:var(--serif);
    font-size:2.4rem;
    font-weight:600;
    color:var(--cream);
    line-height:1.1;
}
.dash-title em{color:var(--gold);font-style:italic}
.dash-head-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* ── Botones ──────────────────────────────────────────────────── */
.dash-btn{
    font-family:var(--mono);
    font-size:.62rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    padding:.7rem 1.2rem;
    border-radius:3px;
    cursor:pointer;
    transition:all .2s;
    border:1px solid var(--border);
}
.dash-btn.ghost{
    background:transparent;
    color:var(--cream);
}
.dash-btn.ghost:hover{
    border-color:var(--gold);
    color:var(--gold);
}
.dash-btn.solid{
    background:var(--gold);
    color:var(--obsidian);
    border-color:var(--gold);
    font-weight:700;
}
.dash-btn.solid:hover{
    background:var(--gold2);
    transform:translateY(-1px);
}

/* ── KPIs ─────────────────────────────────────────────────────── */
.dash-kpis{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:1rem;
    margin-bottom:2rem;
}
.kpi{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:4px;
    padding:1.2rem 1.4rem;
    transition:transform .25s, border-color .25s;
}
.kpi:hover{
    transform:translateY(-2px);
    border-color:var(--gold-dim);
}
.kpi-label{
    font-family:var(--mono);
    font-size:.6rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:.5rem;
}
.kpi-value{
    font-family:var(--serif);
    font-size:1.7rem;
    font-weight:600;
    color:var(--gold);
    line-height:1.1;
}

/* ── Grid de cards ────────────────────────────────────────────── */
.dash-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:1.5rem;
    margin-bottom:1.5rem;
}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}

.dash-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:4px;
    padding:1.6rem 1.6rem 1.4rem;
    margin-bottom:1.5rem;
}
.dash-card-title{
    font-family:var(--serif);
    font-size:1.05rem;
    font-weight:600;
    color:var(--cream);
    margin-bottom:1.2rem;
}

/* ── Bar chart de ingresos mensuales ──────────────────────────── */
.dash-bars{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:.5rem;
    height:160px;
    align-items:end;
    padding-top:.5rem;
}
.dash-bar{
    display:flex;
    flex-direction:column;
    align-items:center;
    height:100%;
    justify-content:flex-end;
}
.dash-bar-fill{
    width:100%;
    background:linear-gradient(180deg,var(--gold) 0%,var(--gold-dim) 100%);
    border-radius:2px 2px 0 0;
    min-height:6px;
    transition:height .4s var(--ease-out), opacity .25s;
}
.dash-bar-fill:hover{opacity:.85}
.dash-bar-label{
    font-family:var(--mono);
    font-size:.55rem;
    color:var(--muted);
    margin-top:.4rem;
    letter-spacing:.05em;
}

/* ── Filas con barra de progreso (por género) ─────────────────── */
.dash-row{
    display:grid;
    grid-template-columns:130px 1fr 50px;
    align-items:center;
    gap:.8rem;
    padding:.55rem 0;
    font-family:var(--cond);
    font-size:.95rem;
    color:var(--cream);
    border-bottom:1px solid var(--border);
}
.dash-row:last-child{border-bottom:none}
.dash-row strong{
    text-align:right;
    font-family:var(--mono);
    font-size:.78rem;
    color:var(--gold);
}
.dash-prog{
    height:6px;
    background:var(--surface2);
    border-radius:3px;
    overflow:hidden;
}
.dash-prog-fill{
    height:100%;
    background:linear-gradient(90deg,var(--gold-dim),var(--gold));
    transition:width .4s var(--ease-out);
}

/* ── Tablas ───────────────────────────────────────────────────── */
.dash-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
.dash-table{
    width:100%;
    border-collapse:collapse;
    font-family:var(--cond);
    font-size:.92rem;
}
.dash-table thead th{
    text-align:left;
    font-family:var(--mono);
    font-size:.6rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    padding:.6rem .8rem;
    border-bottom:1px solid var(--border);
    background:var(--surface2);
}
.dash-table tbody td{
    padding:.7rem .8rem;
    border-bottom:1px solid var(--border);
    color:var(--cream);
    vertical-align:middle;
}
.dash-table tbody tr:hover td{
    background:rgba(201,168,76,.04);
}
.dash-table code{
    font-family:var(--mono);
    font-size:.78rem;
    color:var(--gold);
    background:rgba(201,168,76,.08);
    padding:.15rem .45rem;
    border-radius:2px;
}

/* ── Pills de estado / rol ────────────────────────────────────── */
.dash-pill{
    display:inline-block;
    font-family:var(--mono);
    font-size:.55rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    padding:.18rem .55rem;
    border-radius:30px;
    border:1px solid;
    background:transparent;
}
.dash-pill.paid     { color:#4caf7d; border-color:rgba(76,175,125,.5);  background:rgba(76,175,125,.08) }
.dash-pill.pending  { color:#d9a73a; border-color:rgba(217,167,58,.5);  background:rgba(217,167,58,.08) }
.dash-pill.shipped  { color:#5a9fd6; border-color:rgba(90,159,214,.5);  background:rgba(90,159,214,.08) }
.dash-pill.delivered{ color:#4caf7d; border-color:rgba(76,175,125,.5);  background:rgba(76,175,125,.08) }
.dash-pill.cancelled{ color:#e05555; border-color:rgba(224,85,85,.5);   background:rgba(224,85,85,.08) }
.dash-pill.role-admin    { color:var(--gold); border-color:var(--gold-dim); background:rgba(201,168,76,.08) }
.dash-pill.role-employee { color:#5a9fd6; border-color:rgba(90,159,214,.5);  background:rgba(90,159,214,.08) }
.dash-pill.role-client   { color:var(--muted); border-color:var(--border)  }

/* ── Mini-botones de fila (Editar / Quitar / etc) ─────────────── */
.dash-mini-btn{
    font-family:var(--mono);
    font-size:.55rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:.4rem .7rem;
    border-radius:2px;
    cursor:pointer;
    transition:all .2s;
    border:1px solid var(--border);
    background:transparent;
    color:var(--cream);
    margin-right:.3rem;
}
.dash-mini-btn:hover{
    border-color:var(--gold);
    color:var(--gold);
}
.dash-mini-btn.danger{color:#e05555;border-color:rgba(224,85,85,.4)}
.dash-mini-btn.danger:hover{background:rgba(224,85,85,.1);color:#ff6b6b}

/* ── Estados de carga / error / vacío ─────────────────────────── */
.dash-loading,.dash-error,.dash-empty{
    text-align:center;
    padding:3rem 1rem;
    font-family:var(--mono);
    font-size:.7rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
}
.dash-error{color:#e05555}

/* ── Acciones del empleado en cada fila de libro ──────────────── */
.emp-actions-cell{
    white-space:nowrap;
    text-align:right;
}

/* ── Form modal del empleado (libro / descuento) ──────────────── */
.emp-form-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    z-index:700;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
    backdrop-filter:blur(8px);
}
.emp-form-overlay.open{opacity:1;pointer-events:auto}
.emp-form-box{
    width:100%;
    max-width:640px;
    max-height:88vh;
    overflow-y:auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:4px;
    padding:2rem;
    position:relative;
}
.emp-form-box h3{
    font-family:var(--serif);
    font-size:1.3rem;
    color:var(--cream);
    margin-bottom:.8rem;
}
.emp-form-sub{color:var(--muted);font-size:.85rem;margin-bottom:1.2rem}
.emp-form-close{
    position:absolute;
    top:1rem;right:1rem;
    width:30px;height:30px;
    border-radius:50%;
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--muted);
    cursor:pointer;
    transition:all .2s;
}
.emp-form-close:hover{border-color:var(--gold);color:var(--gold)}
.emp-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-bottom:1.4rem;
}
.emp-form-grid label{
    display:flex;
    flex-direction:column;
    gap:.3rem;
    font-family:var(--mono);
    font-size:.6rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
}
.emp-form-grid label.emp-full{grid-column:1/-1}
.emp-form-grid input,
.emp-form-grid select,
.emp-form-grid textarea{
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--cream);
    padding:.65rem .8rem;
    font-family:var(--cond);
    font-size:.95rem;
    border-radius:2px;
    outline:none;
    transition:border-color .2s,background .2s;
}
.emp-form-grid input:focus,
.emp-form-grid select:focus,
.emp-form-grid textarea:focus{
    border-color:var(--gold);
    background:rgba(201,168,76,.04);
}
.emp-form-grid textarea{resize:vertical;min-height:80px;font-family:var(--cond)}
.emp-form-actions{
    display:flex;
    gap:.6rem;
    justify-content:flex-end;
    flex-wrap:wrap;
}
@media (max-width:540px){
    .emp-form-grid{grid-template-columns:1fr}
}

/* ── Light theme overrides para dashboards ─────────────────────── */
[data-theme="light"] .dash-overlay{background:var(--obsidian)}
[data-theme="light"] .dash-close{background:var(--surface);color:var(--cream)}
[data-theme="light"] .kpi,
[data-theme="light"] .dash-card{background:var(--surface);border-color:var(--border)}
[data-theme="light"] .dash-table thead th{background:var(--surface2);color:var(--muted)}
[data-theme="light"] .dash-table tbody td{color:var(--cream)}
[data-theme="light"] .dash-table tbody tr:hover td{background:rgba(154,120,32,.06)}
[data-theme="light"] .dash-mini-btn{color:var(--cream)}
[data-theme="light"] .dash-bar-fill{background:linear-gradient(180deg,var(--gold) 0%,#7a5f1c 100%)}
[data-theme="light"] .emp-form-box{background:var(--surface);border-color:var(--border)}
[data-theme="light"] .emp-form-grid input,
[data-theme="light"] .emp-form-grid select,
[data-theme="light"] .emp-form-grid textarea{
    background:#fff;color:var(--cream);border-color:var(--border)
}
[data-theme="light"] .emp-form-overlay{background:rgba(120,90,40,.35)}

/* ── PASSWORD EYE ICON ───────────────────────────────────────── */
.password-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.password-group .auth-input {
    padding-right: 2.8rem; /* Espacio para que el texto no toque el ojito */
}
.toggle-pass-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.8rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--muted);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toggle-pass-btn:hover {
    color: var(--gold);
}