/* --- ESTRUCTURA GENERAL --- */
.grid-books {
  display: flex; 
  flex-direction: column; 
  align-items: center;
  gap: 50px; 
  width: 100%; 
  max-width: 1600px; 
  margin: 60px auto; 
  padding: 0 20px;
}

.grid-books .books-row {
  display: flex; 
  flex-direction: row; 
  justify-content: center;
  gap: 40px; 
  width: 100%; 
  flex-wrap: wrap;
}

/* --- 1. SLOTS (MISMA LÓGICA QUE GAMES) --- */
.grid-books .book-slot {
  height: 400px; 
  display: inline-flex; 
  padding: 40px 50px;
  background-image: url('img/centerBackground.png');
  background-size: 100% 100%; 
  position: relative;
  transition: transform 0.3s; 
}

/* Slot Featured: Basado en el tamaño de games-content.css */
.grid-books .book-slot.featured { 
  height: 650px; 
  padding: 60px 80px; 
  width: 100%;
  max-width: 1100px;
}

.grid-books .book-slot:hover { 
  transform: translateY(-8px); 
}

/* --- 2. CONTENEDORES E IMÁGENES --- */
.grid-books .card-container {
  height: 100%; 
  width: 100%; 
  background: #000;
  position: relative; 
  overflow: hidden; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-thumb {
  height: 100%; 
  width: 100%; 
  object-fit: cover; /* Asegura que la imagen de 2000px se encuadre bien */
  display: block;
  opacity: 0.85; 
  transition: opacity 0.3s;
}

.grid-books .book-slot:hover .book-thumb { 
  opacity: 1; 
}

/* --- 3. INTERACCIÓN E INFO --- */
.overlay-link {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 100; 
  cursor: pointer;
}

.book-info {
  position: absolute; 
  bottom: 0; 
  width: 100%; 
  padding: 25px 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
  z-index: 10; 
  pointer-events: none;
}

.book-info h3 {
  margin: 0;
  font-size: 1.3rem; 
  color: #fff; 
  text-transform: uppercase;
}

.book-info p { 
  margin: 5px 0 0;
  font-size: 0.9rem; 
  color: #bbb; 
}

/* --- 4. RESPONSIVE --- */
@media (max-width: 900px) {
  .grid-books .books-row { flex-direction: column; align-items: center; }
  .grid-books .book-slot { height: 320px; padding: 30px 40px; width: 100%; max-width: 450px; }
  .grid-books .book-slot.featured { height: 450px; padding: 40px 55px; }
}