/* The English comics shelf that opens the page: three cards on wide screens,
   a horizontal strip with arrows on narrow ones. No automatic advance. */
.comic-shelf{margin:30px 0 8px;scroll-margin-top:24px}
.comic-shelf .section-heading{margin-bottom:18px}
.comic-shelf .section-heading p{margin:0;font-size:15px;color:var(--tenue)}
.shelf-viewport{position:relative}
.shelf-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.shelf-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--linea);background:#080b0f}
.shelf-card .shelf-art{display:block;border:0;overflow:hidden;aspect-ratio:3/4;background:#05070a}
.shelf-card .shelf-art img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .2s,transform .3s}
.shelf-card .shelf-art:hover img,.shelf-card .shelf-art:focus-visible img{filter:brightness(1.1);transform:scale(1.015)}
.shelf-card .shelf-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex-grow:1}
.shelf-card .shelf-kind{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tenue);margin-bottom:8px}
.shelf-card h3{font:500 28px/1.08 'Cormorant Garamond',serif;color:var(--papel);margin:0 0 10px}
.shelf-card .shelf-line{font-size:16.5px;line-height:1.45;color:var(--prosa);margin:0 0 18px;flex-grow:1}
.shelf-card .shelf-read{display:inline-block;align-self:flex-start;border:1px solid var(--oro);color:var(--papel);
  padding:10px 20px;font-size:16px;background:rgba(201,162,75,.08)}
.shelf-card .shelf-read:hover{background:rgba(201,162,75,.18);border-color:var(--papel)}
.shelf-card .shelf-more{margin-top:12px;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 16px}
.shelf-card .shelf-more a{color:var(--tenue)}
.shelf-card .shelf-more a:hover{color:var(--oro)}
.shelf-also{margin:16px 0 0;font-size:15px;color:var(--tenue)}
.shelf-also a{color:var(--papel)}
.shelf-also a:hover{color:var(--oro)}
.shelf-arrows{display:none}
/* con más de tres cómics, también en escritorio se ven tres y el resto se alcanza con las flechas */
@media(min-width:901px){
  .shelf-many .shelf-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:10px}
  .shelf-many .shelf-card{flex:0 0 calc((100% - 56px) / 3);scroll-snap-align:start}
  .shelf-many .shelf-viewport{display:flex;flex-direction:column}
  .shelf-many .shelf-arrows{display:flex;justify-content:flex-end;gap:10px;margin:0 0 12px;order:-1}
  .shelf-many .shelf-arrows button{font:inherit;font-size:20px;line-height:1;width:44px;height:44px;cursor:pointer;
    color:var(--papel);background:#080b0f;border:1px solid var(--oro-tenue)}
  .shelf-many .shelf-arrows button:disabled{opacity:.35;cursor:default}
}
@media(max-width:900px){
  .shelf-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scrollbar-width:thin;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .shelf-card{flex:0 0 min(78%,340px);scroll-snap-align:start}
  .shelf-viewport{display:flex;flex-direction:column}
  .shelf-arrows{display:flex;justify-content:flex-end;gap:10px;margin:0 0 12px;order:-1}
  .shelf-arrows button{font:inherit;font-size:20px;line-height:1;width:44px;height:44px;cursor:pointer;
    color:var(--papel);background:#080b0f;border:1px solid var(--oro-tenue)}
  .shelf-arrows button:hover:not(:disabled){border-color:var(--oro)}
  .shelf-arrows button:disabled{opacity:.35;cursor:default}
  .comic-shelf .section-heading p{flex-basis:100%}
}
@media(max-width:650px){.comic-shelf{margin-top:22px}.shelf-card h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.shelf-card .shelf-art img{transition:none}.shelf-card .shelf-art:hover img{transform:none}}