/* Tipografías autoalojadas (RGPD + rendimiento) — subset latin, .woff2 propios en /fonts/ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/fraunces-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url(/fonts/fraunces-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/spectral-300-latin.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/spectral-400-latin.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/spectral-500-latin.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/spectral-italic-400-latin.woff2) format('woff2')}
:root{--bg:#17110D;--bg-deep:#0E0A07;--surface:#241A13;--bone:#ECE3C7;--dim:#A2917A;--oxblood:#6E2420;--oxblood-2:#8A2E28;--amber:#C67A2E;--line:rgba(236,227,199,.12);--line-2:rgba(236,227,199,.22);--body:#D8CCB0}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-deep);color:var(--bone);font-family:'Spectral',Georgia,serif;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:72rem;margin:0 auto;padding:0 28px}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

header{position:sticky;top:0;z-index:50;background:rgba(14,10,7,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:15px 28px}
.logo{display:flex;align-items:center;gap:11px;color:var(--bone)}
.logo .name{font-family:'Fraunces',serif;font-weight:500;font-size:20px;line-height:1}
.logo .sub{font-size:8px;letter-spacing:.34em;color:var(--amber)}
header nav{display:flex;gap:24px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
header nav a:hover{color:var(--bone)}
.tri path{fill:none;stroke-width:5;stroke-linejoin:round}
.tri .o{stroke:var(--bone)}.tri .i{stroke:var(--amber)}
.navtoggle{display:none}.hamb{display:none}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--oxblood);color:var(--bone);border:none;border-radius:6px;padding:13px 24px;font-size:15px;font-family:'Spectral',serif;cursor:pointer;transition:.18s}
.btn:hover{background:var(--oxblood-2)}
.soon{color:var(--dim);font-style:italic;font-size:14.5px}

.crumbs{font-size:13px;color:var(--dim);padding:26px 0 0;display:flex;gap:7px;flex-wrap:wrap}
.crumbs a:hover{color:var(--bone)}
.crumbs span{color:var(--body)}

.cover{border-radius:5px;overflow:hidden;background:var(--surface);box-shadow:0 14px 34px rgba(0,0,0,.5);aspect-ratio:1600/2560;display:block;position:relative}
.cover img{width:100%;height:100%;object-fit:cover}
.cover.ph{display:flex;flex-direction:column;justify-content:center;padding:16px;border:1px solid var(--line);background:linear-gradient(160deg,#241A13,#17110D)}
.cover.ph .phs{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.cover.ph .pht{font-family:'Fraunces',serif;font-size:17px;line-height:1.2;color:var(--bone)}
.cover.ph .phm{margin-top:auto;font-size:11px;color:var(--dim);font-style:italic}

.status{font-size:11px;letter-spacing:.13em;text-transform:uppercase;padding:4px 11px;border-radius:20px;display:inline-block}
.status.venta{background:var(--oxblood);color:var(--bone)}
.status.pronto{background:transparent;border:1px solid var(--line-2);color:var(--dim)}
.status.mixto{background:rgba(198,122,46,.16);color:var(--amber);border:1px solid rgba(198,122,46,.35)}

/* book page */
.book .top{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;padding:30px 0 12px}
.book .top .cover.big{width:300px}
.book .meta h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-.01em;margin:12px 0 0;text-wrap:balance}
.book .subtitle{font-style:italic;color:var(--dim);font-size:19px;margin-top:12px}
.book .statusrow{margin:22px 0 18px}
.book .buy{margin-top:6px}
.synopsis,.contra,.sibs,.sample{padding:34px 0;border-top:1px solid var(--line);margin-top:34px}
.synopsis h2,.contra h2,.sibs h2,.sample h2{font-family:'Fraunces',serif;font-weight:500;font-size:22px;margin-bottom:16px}
.synopsis p{max-width:44em;margin-bottom:14px;color:var(--body);font-size:17px}
.contra{border-left:3px solid var(--oxblood);border-top:1px solid var(--line);padding-left:24px}
.contra p{max-width:42em;margin-bottom:12px;color:var(--body);font-style:italic}
.sibgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.sibs .mini{display:block}
.sibs .cover.sm{margin-bottom:9px;transition:transform .2s}
.sibs .mini:hover .cover.sm{transform:translateY(-5px)}
.sibs .mt{font-family:'Fraunces',serif;font-size:13.5px;color:var(--bone);line-height:1.2}

/* sample + índice */
.sample .reading{position:relative;max-width:40rem;font-size:17.5px;line-height:1.85;color:var(--body)}
.sample .reading h4{font-family:'Fraunces',serif;font-weight:500;color:var(--bone);font-size:18px;margin:26px 0 12px}
.sample .reading h4:first-child{margin-top:0}
.sample .reading p{margin-bottom:16px}
.sample .reading em{font-style:italic}
.sample .fade{position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,transparent,var(--bg-deep));pointer-events:none}
.sample .samplecta{margin-top:24px}
.toc{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.toc summary{cursor:pointer;font-family:'Fraunces',serif;font-size:17px;color:var(--bone);list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::before{content:"▸  ";color:var(--amber)}
.toc[open] summary::before{content:"▾  ";color:var(--amber)}
.toc ol{margin:16px 0 0;padding-left:1.4em;columns:2;column-gap:40px}
.toc li{color:var(--dim);font-size:14.5px;margin-bottom:6px;break-inside:avoid;padding-left:4px}
@media(max-width:520px){.toc ol{columns:1}}

/* saga page */
.saga .sagahead{padding:32px 0 8px;max-width:52rem}
.saga h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(32px,5vw,54px);line-height:1.02;letter-spacing:-.015em;margin:12px 0 16px;text-wrap:balance}
.saga .blurb{font-size:18px;color:var(--dim);max-width:40em}
.saga .metaline{display:flex;align-items:center;gap:14px;margin-top:20px}
.saga .count{color:var(--dim);font-style:italic;font-size:15px}
.sgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;padding:40px 0 20px}
.scard{display:block;position:relative}
.scard .num{position:absolute;top:-10px;left:-6px;z-index:2;font-family:'Fraunces',serif;font-size:15px;color:var(--amber);background:var(--bg-deep);border:1px solid var(--line-2);border-radius:20px;padding:2px 9px}
.scard .cover{margin-bottom:10px;transition:transform .22s}
.scard:hover .cover{transform:translateY(-6px)}
.scard .bt{font-family:'Fraunces',serif;font-size:15px;color:var(--bone);line-height:1.2;display:block;margin-bottom:8px}

footer{background:var(--bg-deep);border-top:1px solid var(--line);padding:40px 0;margin-top:40px}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer .logo .name{font-size:17px}
footer .flinks{font-size:13px;color:var(--dim)}
footer .flinks a:hover{color:var(--bone)}

@media(max-width:820px){
  .hamb{display:flex;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;cursor:pointer}
  .hamb span{display:block;width:24px;height:2px;background:var(--bone);border-radius:2px;transition:transform .25s,opacity .2s}
  .navtoggle:checked ~ .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked ~ .hamb span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;font-size:13px;letter-spacing:.14em;background:#0E0A07;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.45);padding:4px 28px 12px}
  .navtoggle:checked ~ nav{display:flex}
  header nav a{display:block;padding:13px 2px;border-bottom:1px solid var(--line)}
  header nav a:last-child{border-bottom:none}
  .book .top{grid-template-columns:200px 1fr;gap:28px}
  .book .top .cover.big{width:200px}
  .sibgrid,.sgrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){
  .wrap{padding:0 18px}
  .book .top{grid-template-columns:1fr;justify-items:center;text-align:center}
  .book .top .cover.big{width:220px}
  .book .meta{text-align:center}
  .synopsis p,.contra p{text-align:left}
  .sibgrid,.sgrid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}