*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x: hidden;}
body{
font-family:Georgia,serif;background:
radial-gradient(circle at top,#3b2313 0%,#16110d 30%,#0f0b09 100%);
color:#f5ead9;min-height:100vh}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.main-shell{width:min(1200px,92%);margin:0 auto;padding-bottom:50px}

.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px 4%;background:rgba(15,11,9,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(214,169,82,.25)}

.brand{font-weight:700;color:#f0d29a;font-size:1.1rem}

.nav-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.nav-links a{padding:10px 14px;border-radius:999px}

.btn-gold,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;font-weight:700;cursor:pointer;border:none}
.btn-gold{background:linear-gradient(135deg,#f0d29a,#b77c28);color:#1c140f;box-shadow:0 10px 30px rgba(183,124,40,.25)}
.btn-outline{border:1px solid rgba(240,210,154,.45);background:rgba(255,255,255,.03);color:#f5ead9}

.user-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(240,210,154,.18);border-radius:999px}
.user-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #c99840}

.hero{padding:80px 0 40px;display:grid;align-items:center}
.hero-copy{max-width:760px}
.eyebrow{display:inline-block;margin-bottom:10px;color:#d6a952;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}
.hero h1,.section h1{font-size:clamp(2rem,5vw,4rem);margin:.1em 0}
.hero p{max-width:620px;color:#dbcab3;font-size:1.05rem}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}

.section{padding:30px 0}
.section.narrow{width:min(900px,100%);margin:0 auto}
.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;flex-wrap:wrap;margin-bottom:22px}

/* 🔥 GRID CORREGIDO */
.book-grid,.character-grid,.stats-grid,.admin-links{display:grid;gap:22px}

/* Desktop */
.book-grid{
    grid-template-columns:repeat(4,1fr);
}

/* Tablet */
@media (max-width:900px){
    .book-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* 📱 MÓVIL → SIEMPRE 2 COLUMNAS */
@media (max-width:768px){
    .book-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }
}

/* Móvil chico */
@media (max-width:480px){
    .book-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }
}

.book-card{position:relative;display:flex;flex-direction:column;gap:14px}

.book-cover{
    aspect-ratio:3/4;
    border-radius:18px;
    background-size:cover;
    background-position:center;
    box-shadow:0 30px 60px rgba(0,0,0,.35);
    border:1px solid rgba(240,210,154,.2);
    position:relative;
    overflow:hidden
}

.book-cover:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 28%,rgba(255,255,255,.06) 52%,rgba(0,0,0,.35) 100%)}

.book-meta h3{margin:.2em 0 .4em}
.book-meta p{color:#d8c4a6}

.empty-box,.panel{background:rgba(255,248,235,.05);border:1px solid rgba(240,210,154,.14);border-radius:24px;padding:22px;box-shadow:0 20px 40px rgba(0,0,0,.18)}

.auth-shell{display:grid;place-items:center;padding:70px 0}
.form-card{max-width:800px;margin:auto}
.form-card h1,.form-card h2{margin-top:0}

label{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;font-weight:700;color:#f0d29a}

input,select,textarea,button{font:inherit}

input,select,textarea{
    width:100%;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid rgba(240,210,154,.2);
    background:rgba(255,255,255,.05);
    color:#fff
}

textarea{resize:vertical}

.grid-2,.grid-3,.grid-4,.grid-6{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}

.flash{margin:18px auto 0;padding:14px 18px;border-radius:16px}
.flash-success{background:#1c4327}
.flash-error{background:#5a1d1d}

.site-footer{text-align:center;padding:30px;color:#d3b98d}

/* resto intacto */
.campaign-banner{position:relative;min-height:360px;border-radius:28px;overflow:hidden;background-size:cover;background-position:center;margin-top:24px;display:flex;align-items:end}
.campaign-banner .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,5,.2),rgba(8,6,5,.88))}
.campaign-banner-content{position:relative;padding:38px;max-width:760px}

.book-reader{position:relative;min-height:620px}
.book-page{display:none;grid-template-columns:1fr 1fr;min-height:560px;background:#efe0c5;color:#2b1d16;border-radius:26px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.32);transform-origin:left center;transition:transform .6s ease, opacity .4s ease;perspective:1000px}
.book-page.active{display:grid;animation:pageIn .55s ease}
.book-page.to-left{display:none}

@keyframes pageIn{
from{transform:rotateY(-12deg) translateX(30px);opacity:.2}
to{transform:none;opacity:1}
}

.page-left{padding:34px;overflow:auto;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(0,0,0,0)),repeating-linear-gradient(180deg,transparent,transparent 31px,rgba(66,43,29,.06) 32px)}

.page-right{background-size:cover;background-position:center;position:relative}
.page-right:before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,transparent 50%,rgba(239,224,197,.92) 100%)}

.session-date{color:#7e5832}
.session-body{line-height:1.8}

.reader-controls{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px}

.comment-card{margin-bottom:16px}
.comment-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}

.comment-head img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid #c99840}

.stars{color:#c99840;margin-top:6px}
.inline-rate{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}

.character-card img{aspect-ratio:3/4;object-fit:cover;border-radius:18px;margin-bottom:14px}
.stats-line{color:#d0bb95}

.table-shell{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:14px;border-bottom:1px solid rgba(240,210,154,.12);text-align:left}

.stat-box{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:130px}
.stat-box strong{font-size:2rem;color:#f0d29a}

.stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.admin-links{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.admin-link{display:grid;place-items:center;min-height:120px;font-size:1.1rem;font-weight:700}

/* Responsive general */
@media (max-width:900px){
    .book-page{grid-template-columns:1fr}
    .page-right{min-height:260px;order:-1}
    .page-right:before{background:linear-gradient(180deg,transparent 60%,rgba(239,224,197,.92) 100%)}
    .grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr}
}

.epic-divider{
    width: 100%;
    height: 50px;
    position: relative;
    margin: 60px 0 0 0;

    background: linear-gradient(
        180deg,
        #5a0f16 0%,
        #7a1c24 40%,
        #4a0c12 100%
    );

    box-shadow:
        inset 0 4px 10px rgba(0,0,0,.5),
        inset 0 -4px 10px rgba(0,0,0,.5),
        0 6px 18px rgba(0,0,0,.4);
}

/* BORDE DORADO SUPERIOR */
.epic-divider::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        #8a6a2b,
        #d4af37,
        #fff3a0,
        #d4af37,
        #8a6a2b
    );
}

/* BORDE DORADO INFERIOR */
.epic-divider::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        #8a6a2b,
        #d4af37,
        #fff3a0,
        #d4af37,
        #8a6a2b
    );


}