@import url('fuentes.css');

/* IDIOMANDIAS: catálogo de libros. Cada libro define su color con --book (en el <li>). */
:root {
  --wall: #eef0f3;
  --ink: #1c2430;
  --ink-soft: #586170;
  --plank: #2c3441;
  --display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --text: 'Noto Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--wall); color: var(--ink); font: 400 17px/1.6 var(--text);
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.top, .page, .foot {
  width: 100%; max-width: 1160px; margin: 0 auto;
  padding-left: clamp(16px, 5vw, 56px); padding-right: clamp(16px, 5vw, 56px);
}
.top { padding-top: 30px; padding-bottom: 10px; }
.wordmark { font: 700 26px/1 var(--display); letter-spacing: .03em; text-decoration: none; }

/* presentación a la izquierda y estantería a la derecha */
.page {
  flex: 1; display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 48px 72px; align-items: start; padding-top: 56px;
}
.intro h1 { margin: 0; font: 600 clamp(40px, 5.2vw, 64px)/1.02 var(--display); }
.intro p { margin: 20px 0 0; max-width: 40ch; color: var(--ink-soft); font-size: 18px; }

/* cada portada se apoya en su balda */
.books {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 250px)); gap: 64px 48px;
}
.book { display: flex; flex-direction: column; }
.book-main { display: flex; flex-direction: column; text-decoration: none; }
.cover {
  position: relative; display: block; padding: 0 16px;
  transition: transform .25s ease;
}
.cover img {
  display: block; width: 100%; border-radius: 2px 4px 4px 2px;
  box-shadow: 10px 16px 26px -12px rgba(18, 22, 30, .6), 0 1px 2px rgba(18, 22, 30, .25);
}
.cover::before { /* lomo */
  content: ''; position: absolute; top: 0; bottom: 0; left: 16px; width: 9px; border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .16) 55%, rgba(0, 0, 0, 0));
  pointer-events: none;
}
.shelf {
  display: block; height: 12px; border-radius: 2px; background: var(--plank);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 12px 18px -12px rgba(18, 22, 30, .7);
}
.series { margin-top: 22px; font: 600 15px/1.2 var(--display); color: var(--book, var(--ink)); }
.title { margin-top: 4px; font: 600 24px/1.15 var(--display); }
.desc { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cta, .buy {
  padding: 11px 16px; border-radius: 6px; font: 600 15px/1 var(--text); text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cta { background: var(--ink); color: #fff; }
.buy { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cta:hover { background: var(--book, var(--ink)); }
.buy:hover { color: var(--book, var(--ink)); box-shadow: inset 0 0 0 1.5px var(--book, var(--ink)); }
.book-main:hover .cover, .book-main:focus-visible .cover { transform: translateY(-6px); }
.book-main:focus-visible { outline-offset: 8px; }

.foot { padding-top: 80px; padding-bottom: 36px; }
.foot p { margin: 0; font-size: 14px; color: var(--ink-soft); }

@media (max-width: 860px) {
  .page { grid-template-columns: 1fr; padding-top: 28px; gap: 40px; }
  .intro p { max-width: 52ch; }
}
@media (max-width: 480px) {
  .books { grid-template-columns: minmax(0, 250px); }
  .foot { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}