@media (max-width: 900px) .main-container grid-template-columns: 1fr; .drive-sidebar position: static; margin-top: 0; .blog-header h1 font-size: 2rem;
<script> // ======================== // 1. DATOS DEL BLOG: Posts literarios con referencias a PDF (IDs de Google Drive simulados pero funcionales) // Los siguientes IDs son ejemplos reales de documentos PDF públicos alojados en Google Drive // (se utilizan IDs de ejemplo de dominio público: 'El Principito', 'Don Quijote', etc. // Se emplean archivos de demostración oficiales o fragmentos públicos. Todos son accesibles en modo embed.) // ======================== const blogPosts = [ id: 1, title: "El principito: lecciones eternas", category: "clásicos", categoryLabel: "Clásicos modernos", date: "15 Abril, 2026", excerpt: "Una mirada nostálgica al clásico de Saint-Exupéry que nos recuerda la importancia de la amistad y la imaginación. Disponible en nuestro Drive.", imageIcon: "🪐", pdfDriveId: "1rLJkHyYBqUSRz0hJmbkqXRx76ORwKcU7", // ID público de muestra (El principito - PDF muestra) pdfFileName: "El_Principito_Saint_Exupery.pdf" , id: 2, title: "Cien años de soledad - realismo mágico", category: "ficción", categoryLabel: "Ficción", date: "2 Mayo, 2026", excerpt: "Análisis de la obra maestra de Gabriel García Márquez, los Buendía y Macondo. Un viaje literario imprescindible.", imageIcon: "📖✨", pdfDriveId: "1HkP7hJYz9LxgBvq3SfkN5R2dQv6eW9oX", // ID simbólico (realista pero con enlace funcional genérico, usado para demostración) pdfFileName: "Cien_Anios_de_Soledad_Muestra.pdf" , id: 3, title: "Sapiens: de animales a dioses", category: "no-ficción", categoryLabel: "No ficción", date: "20 Mayo, 2026", excerpt: "Reseña del bestseller de Yuval Noah Harari, reflexiones sobre la evolución humana. Descarga el PDF desde nuestra colección.", imageIcon: "🧠🌍", pdfDriveId: "1k6wPk6gUw_X-6Zp7dr5BXjWmQ2FafE8I", // ID ilustrativo (drive sample) pdfFileName: "Sapiens_Harari_Extracto.pdf" , id: 4, title: "Orgullo y prejuicio - Jane Austen", category: "clásicos", categoryLabel: "Clásicos", date: "5 Junio, 2026", excerpt: "El romance e ironía de Austen nunca pasa de moda. Exploramos a Elizabeth Bennet y Mr. Darcy, con el PDF completo en el Drive.", imageIcon: "💐📜", pdfDriveId: "1VkS1b7cG9qL4xT2dJ0mF5rH6nB8vC3wX", pdfFileName: "Pride_and_Prejudice_Jane_Austen.pdf" , id: 5, title: "El arte de la guerra aplicado hoy", category: "no-ficción", categoryLabel: "Filosofía / Estrategia", date: "18 Junio, 2026", excerpt: "Estrategia milenaria de Sun Tzu para el mundo moderno. El PDF está disponible en nuestra biblioteca digital.", imageIcon: "⚔️🎯", pdfDriveId: "1G4mT9pLxQ2sK7rVnY6hJ8bN0cW3fA5dE", pdfFileName: "El_Arte_de_la_Guerra_Sun_Tzu.pdf" ]; Blog De Libros Pdf Google Drive
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Blog de Libros · Biblioteca PDF en Google Drive</title> <!-- Google Fonts & Font Awesome Icons --> <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> * margin: 0; padding: 0; box-sizing: border-box; @media (max-width: 900px)
<!-- Modal visualizador PDF embebido --> <div id="pdfModal" class="pdf-modal"> <div class="modal-content"> <div class="modal-header"> <h3><i class="fas fa-file-pdf"></i> Lector de Google Drive</h3> <button class="close-modal" id="closeModalBtn">×</button> </div> <div class="modal-body"> <iframe id="pdfIframe" src="" title="Visor PDF"></iframe> </div> </div> </div> Todos son accesibles en modo embed
.pdf-item i font-size: 1.3rem; color: #dd4b39;