/* La base de Lecturas se genera desde su CSS existente. */
.hero {width:min(820px,86vw);min-height:auto;padding:9rem 0 3.5rem;}
.hero-info {max-width:100%;}
h1 {font-size:clamp(2.7rem,6.2vw,5.2rem);line-height:1.05;text-wrap:balance;}
.lectura-contenido {padding-top:0;padding-bottom:4rem;}
.cabecera {position:static;transform:none;justify-content:center;flex-wrap:wrap;padding:1.4rem 5vw;font-size:1rem;}
.cabecera a {color:#b7afa6;}
.obra-editorial {display:grid;grid-template-columns:125px minmax(0,1fr);gap:2rem;align-items:center;margin:3rem 0;padding:1.8rem 0;border-block:1px solid rgba(238,232,223,.15);}
.obra-editorial img {display:block;width:100%;height:auto;max-height:230px;object-fit:contain;}
.obra-editorial .tipo {margin-bottom:.6rem;}
.obra-editorial h2 {margin:0 0 .65rem;font:italic 2rem/1.1 var(--font-display);}
.obra-editorial h2 a {text-decoration:none;}
.obra-editorial .datos {color:#b7afa6;font-size:.88rem;line-height:1.6;margin:0;}
.obra-editorial .abrir {display:inline-block;margin-top:1rem;font-size:.8rem;text-underline-offset:5px;color:#c8bdb1;}
.indice {list-style:none;padding:0;margin:0;}
.indice li {border-top:1px solid rgba(238,232,223,.15);}
.indice a {display:flex;gap:1.6rem;padding:1.7rem 0;text-decoration:none;align-items:baseline;}
.indice .numero {font-size:.7rem;letter-spacing:.15em;color:#c9535e;}
.indice .titulo {font:italic clamp(1.6rem,3vw,2.3rem)/1.25 var(--font-display);}
.recorrido {display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;width:min(720px,86vw);margin:0 auto;padding:2rem 0 4rem;color:#b7afa6;font-size:.9rem;}
.recorrido a {max-width:100%;line-height:1.5;text-underline-offset:5px;}
.volver {min-height:25svh;}
a:focus-visible {outline:2px solid #c9535e;outline-offset:6px;}
@media(max-width:520px) {
 .hero {padding:4rem 0 2.5rem;}
 .obra-editorial {grid-template-columns:85px minmax(0,1fr);gap:1.1rem;}
 .obra-editorial h2 {font-size:1.65rem;}
 .obra-editorial img {max-height:170px;}
 .indice a {gap:1rem;}
}