/* ============================================================
   BLOQUE «LIBROS» AL FINAL DE CADA SECCIÓN (y «Cuatro puertas» en /libros)
   ------------------------------------------------------------
   Lo genera scripts/generar-libros.mjs entre <!-- LIBROS:INICIO --> y
   <!-- LIBROS:FIN -->. Hereda los colores y la tipografía de la página
   donde está (funciona con estilo.css y con los temas propios del
   Tercer Ojo y del Jardín). El color de cada libro (--acento, en la
   tarjeta) solo se usa como filo de la portada y en el botón.
   ============================================================ */
.libros-relacionados {
  margin: 72px 0 0; padding: 48px 0 0;
  border-top: 1px solid var(--borde, rgba(255, 255, 255, 0.12));
  color: inherit;
}
.libros-relacionados h2 {
  font-family: var(--display, 'Cormorant Garamond', Georgia, serif); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; margin: 0 0 10px; color: inherit;
}
.libros-relacionados__entradilla { margin: 0 0 36px; max-width: 62ch; line-height: 1.7; opacity: 0.85; }
.libros-relacionados ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 36px 44px; }
@media (min-width: 760px) {
  .libros-relacionados--2 ul, .libros-relacionados--3 ul, .libros-relacionados--4 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.libro-tarjeta { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: start; --acento: currentColor; }
.libros-relacionados--1 .libro-tarjeta { grid-template-columns: 150px minmax(0, 1fr); max-width: 720px; }
.libro-tarjeta > a { display: block; }
.libro-tarjeta img {
  width: 100%; height: auto; display: block;
  border: 1px solid color-mix(in srgb, var(--acento) 65%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.libro-tarjeta h3 { font-family: var(--display, 'Cormorant Garamond', Georgia, serif); font-weight: 400; font-size: 1.32rem; line-height: 1.25; margin: 0 0 4px; }
.libro-tarjeta h3 a { color: inherit; text-decoration: none; transition: color 0.35s; }
.libro-tarjeta h3 a:hover, .libro-tarjeta h3 a:focus-visible { color: var(--acento); }
.libro-tarjeta__edicion { margin: 0 0 8px; font-family: var(--codigo, monospace); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.libro-tarjeta__edicion:empty { display: none; }
.libro-tarjeta__frase { margin: 0 0 14px; font-size: 15px; line-height: 1.65; opacity: 0.9; }
.libro-tarjeta__acciones { margin: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.libro-tarjeta__acciones a { color: inherit; text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--acento); transition: color 0.35s, background 0.35s; }
.libro-tarjeta__acciones a:hover { color: var(--acento); }
.libro-tarjeta__acciones .boton {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--acento); background: var(--acento); color: #0b0c10;
  font-family: var(--codigo, monospace); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.libro-tarjeta__acciones .boton:hover, .libro-tarjeta__acciones .boton:focus-visible { background: transparent; color: inherit; }
.libros-relacionados__aviso { margin: 28px 0 0; font-size: 12px; line-height: 1.6; opacity: 0.65; }
.libros-relacionados--enlace { padding-top: 32px; }
.libros-relacionados__enlace { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; font-size: 15px; }
.libros-relacionados__enlace:hover { opacity: 0.8; }
/* En /libros el bloque abre la página: sin filete ni margen superior */
.libros-puertas .libros-relacionados { margin: 0; padding: 0; border-top: 0; }
/* Bloque en su propia sección al final de una página (Juegos, Vídeos, Bitácora, Jardín, Tercer Ojo, Radar, Iluminador) */
.seccion-libros .libros-relacionados { margin-top: 0; }
.seccion.seccion-libros { padding-top: 0; }
.seccion + .seccion-libros { border-top: 0; }
/* Libros Guaraní: centrado como la colección */
.guarani-main .libros-relacionados { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
/* El Baúl Dorado: al final de «Más caminos» */
.bd-view .libros-relacionados { margin-top: 40px; padding-top: 36px; }
/* Carta natal: dentro del bloque explicativo */
.ai-explicacion .libros-relacionados { margin-bottom: 40px; }
@media (max-width: 480px) {
  .libro-tarjeta, .libros-relacionados--1 .libro-tarjeta { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
}