Spaces:

wachynaky
/

mecagoenlos

Running

App Files Files Community

wachynaky commited on Jul 3

Commit

86fc06a

verified ·

1 Parent(s): 0ad226b

redisign lateral meny to works fine on mobile - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +619 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mecagoenlos
-emoji: 🚀
-colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mecagoenlos
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,619 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>¿Se está transformando Google en un motor de recomendación?</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Lateral Menu Styles */
+        .lateral-menu {
+            position: fixed;
+            left: 0;
+            top: 0;
+            width: 250px;
+            height: 100vh;
+            background-color: #2e2e2a;
+            box-shadow: 2px 0 15px rgba(0,0,0,0.2);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 1000;
+            border-right: 1px solid #3a3a35;
+            transform: translateX(-100%);
+            overflow-y: auto;
+        }
+        @media (max-width: 768px) {
+            .lateral-menu {
+                transform: translateX(-100%);
+                width: 280px;
+            }
+            .lateral-menu.active {
+                transform: translateX(0);
+            }
+            .menu-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0,0,0,0.5);
+                z-index: 999;
+                opacity: 0;
+                pointer-events: none;
+                transition: opacity 0.3s ease;
+            }
+            .menu-overlay.active {
+                opacity: 1;
+                pointer-events: all;
+            }
+        }
+        .lateral-menu::after {
+            content: '';
+            position: absolute;
+            right: -3px;
+            top: 0;
+            height: 100%;
+            width: 6px;
+            background: linear-gradient(90deg,
+                        rgba(255,255,255,0.05) 0%,
+                        rgba(255,255,255,0.1) 50%,
+                        rgba(255,255,255,0.05) 100%);
+            border-radius: 2px;
+        }
+        .lateral-menu.active {
+            transform: translateX(0);
+            box-shadow: 5px 0 25px rgba(0,0,0,0.3);
+        }
+        .lateral-menu.active {
+            transform: translateX(0);
+        }
+        .menu-toggle {
+            position: fixed;
+            left: 10px;
+            top: 10px;
+            z-index: 1001;
+            background: #faff69;
+            color: #2e2e2a;
+            border: none;
+            padding: 12px 18px;
+            border-radius: 50px;
+            cursor: pointer;
+            font-weight: bold;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        @media (max-width: 768px) {
+            .menu-toggle {
+                left: 15px;
+                top: 15px;
+                z-index: 1002;
+            }
+        }
+        .menu-toggle:hover {
+            background: #e0e65e;
+            transform: scale(1.05);
+            box-shadow: 0 6px 12px rgba(0,0,0,0.4);
+        }
+        .menu-toggle::after {
+            content: "MENU";
+            font-size: 1rem;
+            font-weight: 700;
+        }
+        .lateral-menu-content {
+            padding: 20px;
+            padding-top: 80px;
+        }
+        .lateral-menu h3 {
+            color: #faff69;
+            margin-bottom: 15px;
+            font-size: 1.1rem;
+        }
+        .lateral-menu ul {
+            list-style: none;
+            padding: 0;
+        }
+        .lateral-menu li {
+            margin-bottom: 10px;
+        }
+        .lateral-menu a {
+            color: #d1d1d1;
+            text-decoration: none;
+            transition: color 0.2s;
+            display: block;
+            padding: 5px 0;
+        }
+        .lateral-menu a:hover {
+            color: #faff69;
+        }
+        .prose img {
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            margin: 1.5rem auto;
+            max-width: 100%;
+            height: auto;
+        }
+        .prose a {
+            color: #faff69;
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.2s;
+        }
+        .prose a:hover {
+            color: #e0e65e;
+            text-decoration: underline;
+        }
+        .prose blockquote {
+            border-left: 4px solid #faff69;
+            padding-left: 1rem;
+            margin: 1.5rem 0;
+            color: #d1d1d1;
+            font-style: italic;
+            background-color: rgba(250, 255, 105, 0.05);
+        }
+        .no-scroll {
+            overflow: hidden;
+        }
+        .prose h2, .prose h3 {
+            scroll-margin-top: 100px;
+        }
+        .toc-item {
+            position: relative;
+            padding-left: 1rem;
+        }
+        .toc-item::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 6px;
+            height: 6px;
+            background-color: #faff69;
+            border-radius: 50%;
+        }
+        .toc-item:hover::before {
+            background-color: #e0e65e;
+        }
+        @media (max-width: 768px) {
+            .article-container {
+                flex-direction: column;
+            }
+            .toc-container {
+                width: 100%;
+                position: static;
+                margin-bottom: 2rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-[#242420] text-gray-100">
+    <!-- Menu Toggle Button -->
+    <button class="menu-toggle" id="menuToggle">
+        <i class="fas fa-bars"></i>
+    </button>
+    <!-- Lateral Menu -->
+    <div class="lateral-menu" id="lateralMenu">
+    <div class="menu-overlay" id="menuOverlay"></div>
+        <div class="lateral-menu-content">
+            <h3>Menu</h3>
+            <ul>
+                <li><a href="#"><i class="fas fa-home mr-2"></i>Home</a></li>
+                <li><a href="#"><i class="fas fa-newspaper mr-2"></i>Articles</a></li>
+                <li><a href="#"><i class="fas fa-search mr-2"></i>Search</a></li>
+                <li><a href="#"><i class="fas fa-bookmark mr-2"></i>Bookmarks</a></li>
+                <li><a href="#"><i class="fas fa-cog mr-2"></i>Settings</a></li>
+            </ul>
+            <h3>Categories</h3>
+            <ul>
+                <li><a href="#"><i class="fas fa-hashtag mr-2"></i>SEO</a></li>
+                <li><a href="#"><i class="fab fa-google mr-2"></i>Google</a></li>
+                <li><a href="#"><i class="fas fa-code mr-2"></i>Algorithms</a></li>
+                <li><a href="#"><i class="fas fa-chart-line mr-2"></i>Analytics</a></li>
+            </ul>
+        </div>
+    </div>
+    <!-- Header -->
+    <header class="bg-[#242420] shadow-sm sticky top-0 z-10 border-b border-[#3a3a35]">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-search text-[#faff69] text-xl"></i>
+                <h1 class="text-xl font-bold text-[#faff69]">SEO Insights</h1>
+            </div>
+            <nav>
+                <ul class="flex space-x-6">
+                    <li><a href="#" class="text-white hover:text-[#faff69] transition">Inicio</a></li>
+                    <li><a href="#" class="text-white hover:text-[#faff69] transition">Artículos</a></li>
+                    <li><a href="#" class="text-white hover:text-[#faff69] transition">Acerca de</a></li>
+                    <li><a href="#" class="text-white hover:text-[#faff69] transition">Contacto</a></li>
+                </ul>
+            </nav>
+            <button class="md:hidden text-gray-600">
+                <i class="fas fa-bars text-xl"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Breadcrumbs -->
+    <div class="bg-[#2e2e2a] py-2">
+        <div class="container mx-auto px-4">
+            <div class="flex items-center text-sm text-gray-300">
+                <a href="#" class="text-white hover:text-[#faff69]">Inicio</a>
+                <span class="mx-2 text-white">/</span>
+                <a href="#" class="text-white hover:text-[#faff69]">Artículos</a>
+                <span class="mx-2 text-white">/</span>
+                <span class="text-[#faff69]">Google como motor de recomendación</span>
+            </div>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8 ml-0 md:ml-0">
+        <div class="article-container flex">
+            <!-- Table of Contents -->
+            <div class="toc-container hidden md:block w-64 flex-shrink-0 pr-8">
+                <div class="bg-white p-4 rounded-lg shadow-sm sticky top-24">
+                    <h3 class="font-bold text-lg mb-4 text-gray-800 border-b pb-2">Contenido</h3>
+                    <ul class="space-y-2">
+                        <li class="toc-item"><a href="#motores-busqueda" class="text-gray-700 hover:text-blue-500">Motores de búsqueda</a></li>
+                        <li class="toc-item"><a href="#motores-recomendacion" class="text-gray-700 hover:text-blue-500">Motores de recomendación</a></li>
+                        <li class="toc-item"><a href="#funcionamiento-youtube" class="text-gray-700 hover:text-blue-500">¿Cómo funciona YouTube?</a></li>
+                        <li class="toc-item"><a href="#id-semanticos" class="text-gray-700 hover:text-blue-500">ID semánticos</a></li>
+                        <li class="toc-item"><a href="#generacion-sid" class="text-gray-700 hover:text-blue-500">¿Cómo genera YouTube el Semantic ID?</a></li>
+                        <li class="toc-item"><a href="#lenguaje-youtube" class="text-gray-700 hover:text-blue-500">YouTube habla "inglés" y "YouTube"</a></li>
+                        <li class="toc-item"><a href="#recuperacion-generativa" class="text-gray-700 hover:text-blue-500">Recuperación Generativa Personalizada</a></li>
+                        <li class="toc-item"><a href="#transformacion-google" class="text-gray-700 hover:text-blue-500">¿Está transformándose la búsqueda de Google?</a></li>
+                    </ul>
+                </div>
+            </div>
+            <!-- Article -->
+            <div class="prose max-w-3xl mx-auto bg-[#2e2e2a] p-6 md:p-8 rounded-lg shadow-sm flex-grow text-gray-200">
+                <!-- Article Header -->
+                <div class="mb-8">
+                    <div class="flex items-center text-sm text-gray-500 mb-2">
+                        <span class="flex items-center">
+                            <i class="fas fa-user mr-1"></i>
+                            <span>Lino Uruñuela</span>
+                        </span>
+                        <span class="mx-2">•</span>
+                        <span class="flex items-center">
+                            <i class="fas fa-calendar-alt mr-1"></i>
+                            <span>1 de Julio, 2025</span>
+                        </span>
+                        <span class="mx-2">•</span>
+                        <span class="flex items-center">
+                            <i class="fas fa-clock mr-1"></i>
+                            <span>8 min lectura</span>
+                        </span>
+                    </div>
+                    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">¿Se está transformando Google en un motor de recomendación?</h1>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="bg-[#faff69]/20 text-[#faff69] px-3 py-1 rounded-full text-sm">SEO</span>
+                        <span class="bg-[#faff69]/20 text-[#faff69] px-3 py-1 rounded-full text-sm">Google</span>
+                        <span class="bg-[#faff69]/20 text-[#faff69] px-3 py-1 rounded-full text-sm">Algoritmos</span>
+                        <span class="bg-[#faff69]/20 text-[#faff69] px-3 py-1 rounded-full text-sm">Recomendación</span>
+                    </div>
+                </div>
+                <!-- Article Content -->
+                <h2 id="motores-busqueda" class="text-2xl font-bold text-gray-800 mt-8 mb-4">Motores de búsqueda</h2>
+                <p>No voy a explicar a fondo qué es un motor de búsqueda, cualquiera que lea este blog debería tener más o menos claro ese concepto. Pero quizás sí sea bueno recordar que un motor de búsqueda intenta ofrecer la información más relevante para la búsqueda del usuario... con todo lo que eso conlleva.</p>
+                <img src="https://www.mecagoenlos.com/imagenes/como-funciona-yotube.png" alt="Cómo funciona YouTube" class="w-full">
+                <p>Uno de los puntos más difíciles para los buscadores ha sido el interpretar la intención del usuario cuando realiza una búsqueda, es algo que podría parecer sencillo pero no lo es en absoluto.</p>
+                <p>Con la llegada de Bert, Google dio un gran paso adelante a la hora de interpretar la consulta de búsqueda de los usuarios, ese fue un cambio muy importante, y aunque muchas veces pensamos en cómo Bert podría influir a la hora de valorar el contenido de nuestro site, realmente, lo más relevante fue que Bert permitía conocer mucho mejor la intención que un usuario tenía al realizar una búsqueda.</p>
+                <p>De esta forma podía seleccionar resultados que se ajustasen a esa intención, por ejemplo si la intención era comprar algo, mostraría resultados más cercanos a tiendas online o resultados que diesen una buena reseña sobre el producto.</p>
+                <h2 id="motores-recomendacion" class="text-2xl font-bold text-gray-800 mt-8 mb-4">Motores de recomendación</h2>
+                <p>Los motores de recomendación (Instagram, Google Discover, TikTok, YouTube, etc.) son sistemas que intentan predecir cuál es la probabilidad de que un usuario realice determinadas acciones si se le presenta determinado contenido, por ejemplo, en Instagram te mostrará aquello que tenga más posibilidades de que interactúes con ello, basándose, entre otras cosas, en la actividad anterior en la plataforma.</p>
+                <p>Cada vez que interactúas con piezas de contenido se va generando un perfil de qué temática de contenido te gusta en qué momento, qué le ha gustado a usuarios que tienen perfiles similares al tuyo.</p>
+                <p>Cuando digo perfiles debemos entender cómo qué usuarios tienen una actividad en la que interactúan con contenidos con las mismas características que el contenido con el que tú interactúas.</p>
+                <h2 id="funcionamiento-youtube" class="text-2xl font-bold text-gray-800 mt-8 mb-4">¿Cómo funciona YouTube?</h2>
+                <p>Pero entender en profundidad estos algoritmos no es nada sencillo, como muestra <a href="https://www.youtube.com/live/3k4a0PemMu4?feature=shared&t=11303">podemos ver este vídeo</a> dónde muestran cómo en YouTube, la recomendación no es una función más sino que es <strong>el corazón de la plataforma</strong>.</p>
+                <p>La gran mayoría del tiempo de visualización de los usuarios es generado por su sistema de recomendación. Divyansh, gerente de producto de YouTube, dice que el uso de los LLMs en YouTube es una implementación <strong>"más grande y subestimada que su uso en la búsqueda"</strong>, precisamente porque su impacto es "invisible" pero masivo.</p>
+                <p>Un problema típico y que YouTube también sufrió, fue el arranque en frío (o <strong>"cold-start"</strong>), ¿cómo Youtube puede recomendar un vídeo que acaba de ser subido si el sistema no sabe nada de él?.</p>
+                <p>A pesar de que Google / Youtube tienen uno de los modelos de lenguaje más avanzados, los IDs de los vídeos "tradicionales", basados en un hash (una simple cadena de letras y números), no le dicen nada sobre el contenido del vídeo al LLM, en este caso Gemini.</p>
+                <p>Para el motor de recomendación que vertebra Youtube, un vídeo de un gatito y uno sobre física cuántica eran, en esencia, dos códigos aleatorios. Hace dos años lo repensaron desde cero usando Gemini como base. El resultado es el <strong>LRM (Large Recommender Model)</strong>.</p>
+                <h3 id="id-semanticos" class="text-xl font-bold text-gray-800 mt-6 mb-3">ID semánticos</h3>
+                <p>Para que un LLM entienda los vídeos, primero necesita un "vocabulario" de vídeos y YouTube creó <strong>Semantic ID (SID)</strong>, que no solo es un identificador sino también una representación semántica del contenido del vídeo y de sus características.</p>
+                <h3 id="generacion-sid" class="text-xl font-bold text-gray-800 mt-6 mb-3">¿Cómo genera YouTube el Semantic ID?</h3>
+                <ol class="list-decimal pl-6 space-y-2">
+                    <li><strong>Extracción Multimodal:</strong> Además de usar el <strong>título</strong> y la <strong>descripción</strong> del vídeo también usan la <strong>transcripción completa del audio</strong>, las características del <strong>sonido</strong> e incluso <strong>fotogramas clave del vídeo</strong>. Para seleccionar estos fotogramas clave extraen los tiempos en los que hay mayor interacción de los usuarios.</li>
+                    <li><strong>Creación del Embedding:</strong> Toda esta información multimodal se combina y se convierte a <strong>embeddings multidimensionales</strong>.</li>
+                    <li><strong>Cuantificación y Tokenización:</strong> Este embedding se "cuantifica", es decir, se comprime y se le asigna un <strong>token único</strong>: la SID.</li>
+                </ol>
+                <img src="https://www.mecagoenlos.com/imagenes/youtube-embeddings.png" alt="YouTube embeddings" class="w-full">
+                <p>Al realizar esto con miles de millones de vídeos surge un <strong>"nuevo lenguaje de vídeos de YouTube"</strong>. En este lenguaje, el SID de un vídeo no es aleatorio. Por ejemplo, dos vídeos de voleibol podrían compartir los primeros tokens de su SID (que representan "deportes" -> "voleibol"), pero tendrían un identificador único al final.</p>
+                <p>Con este método un vídeo nuevo ya no entra al sistema siendo un desconocido. Entra con un SID que le dice al recomendador: "Hola, soy un vídeo sobre la historia del rock de los 80, similar a estos otros vídeos" y esto soluciona el problema pasando de un arranque en frío a un <strong>"arranque en caliente en un espacio semánticamente significativo"</strong>.</p>
+                <h3 id="lenguaje-youtube" class="text-xl font-bold text-gray-800 mt-6 mb-3">YouTube habla "inglés" y "YouTube"</h3>
+                <p>El "lenguaje de YouTube" es el lenguaje de los SIDs, pero necesitaban un "traductor" al lenguaje humano. Este traductor es un modelo Gemini adaptado y reentrenado <strong>LRM (Large Recommender Model)</strong> para ser "bilingüe".</p>
+                <p>El entrenamiento consta de dos tareas principales:</p>
+                <ul class="list-disc pl-6 space-y-2">
+                    <li><strong>Vincular Texto y SID:</strong> Le dan al modelo el título de un vídeo y le piden que genere su SID, o viceversa. Así aprende la conexión directa entre el lenguaje humano (texto) y el lenguaje de YouTube (SIDs).</li>
+                    <li><strong>Comprender Secuencias de Visualización:</strong> Le muestran miles de millones de secuencias de vídeos que los usuarios han visto (ej: A -> B -> C -> D). Luego, ocultan un vídeo (ej: A -> B -> [MÁSCARA] -> D) y le piden al modelo que prediga cuál es el vídeo que falta. Es algo muy parecido a cómo se entrenan los LLMs.</li>
+                </ul>
+                <p>El LRM no solo memoriza, sino que <strong>aprende a <em>razonar</em></strong>. Puede ver un historial de visualización y, basándose solo en el SID de un nuevo vídeo, inferir que "este vídeo es interesante para los usuarios a los que les gusta la tecnología porque trata sobre IA".</p>
+                <h3 id="recuperacion-generativa" class="text-xl font-bold text-gray-800 mt-6 mb-3">Recuperación Generativa Personalizada</h3>
+                <p>Una de las primeras aplicaciones en producción es la <strong>recuperación generativa</strong>. Así funciona para los usuarios:</p>
+                <ol class="list-decimal pl-6 space-y-2">
+                    <li><strong>Construyen un prompt personalizado</strong> en tiempo real. Este prompt incluye la información demográfica del usuario (edad, género, ubicación), el vídeo que está viendo ahora mismo y el historial reciente del usuario (los últimos 50 vídeos que ha visto y cómo interactúa con ellos).</li>
+                    <li><strong>Le pasan este prompt al LRM.</strong></li>
+                    <li>El modelo, en lugar de generar texto, <strong>decodifica su respuesta como una lista de SIDs</strong>: las recomendaciones de vídeo que considera perfectas para ese usuario en concreto en ese preciso momento.</li>
+                </ol>
+                <p>De esta manera consigue mostrar recomendaciones muy precisas y personalizadas. Por ejemplo, para un usuario que veía un vídeo de los mejores momentos de los Juegos Olímpicos, el LRM fue capaz de encontrar y recomendar <strong>carreras femeninas relacionadas</strong> que los sistemas anteriores no hubieran mostrado.</p>
+                <h2 id="transformacion-google" class="text-2xl font-bold text-gray-800 mt-8 mb-4">¿Está transformándose la búsqueda de Google en un Motor de Recomendación?</h2>
+                <p>Y esta es mi corazonada... ya desde hace años había gente (como Luisma, Chuiso y otros "locos") que ya venían diciendo cómo los clics afectaban a los rankings, aunque pocos les creímos, como yo mismo, eso sí, cuando me lo demostraron me lo creí y lo asumí.</p>
+                <p>También este año hemos visto cómo el caso antimonopolio de Google ha destapado que sí se utilizan los datos de clics (y otras interacciones) en las SERPs de Google y que eran usados de una u otra manera para evaluar y optimizar los resultados de búsqueda. Ahora <a href="https://blog.google/products/search/search-customization-tips/">anuncian oficialmente más personalización</a> de los resultados...</p>
+                <p>Todo esto junto al nuevo AI Mode que ofrecerá, en muchas ocasiones, la respuesta completa a la consulta del usuario, y sabiendo lo importante que son para los grandes LLMs como ChatGPT o Gemini la retroalimentación por parte de los usuarios... me hace pensar que la búsqueda de Google se está transformando en un motor de recomendación.</p>
+                <p>Os recomiendo ver el vídeo, concretamente la parte en la que explica cómo funciona YouTube.</p>
+                <!-- Article Footer -->
+                <div class="mt-12 pt-6 border-t border-gray-200">
+                    <div class="flex flex-wrap gap-2 mb-6">
+                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">#SEO</span>
+                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">#Google</span>
+                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">#Algoritmos</span>
+                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">#Recomendación</span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center space-x-4">
+                            <button class="text-gray-500 hover:text-blue-500 transition">
+                                <i class="far fa-thumbs-up mr-1"></i> 24
+                            </button>
+                            <button class="text-gray-500 hover:text-blue-500 transition">
+                                <i class="far fa-comment mr-1"></i> 5 comentarios
+                            </button>
+                        </div>
+                        <div class="flex items-center space-x-4">
+                            <button class="text-gray-500 hover:text-blue-500 transition">
+                                <i class="fas fa-share-alt"></i>
+                            </button>
+                            <button class="text-gray-500 hover:text-blue-500 transition">
+                                <i class="far fa-bookmark"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Related Articles -->
+    <section class="bg-[#2e2e2a] py-12">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl font-bold text-[#faff69] mb-8">Artículos relacionados</h2>
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="bg-[#242420] rounded-lg shadow-sm overflow-hidden hover:shadow-md transition border border-[#3a3a35]">
+                    <img src="https://via.placeholder.com/600x400" alt="Artículo relacionado" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <span class="text-sm text-blue-500">SEO</span>
+                        <h3 class="text-lg font-semibold mt-1 mb-2">Cómo afectan los LLMs al SEO tradicional</h3>
+                        <p class="text-gray-600 text-sm">Exploramos cómo los grandes modelos de lenguaje están cambiando las reglas del SEO.</p>
+                        <div class="flex items-center mt-4 text-sm text-gray-500">
+                            <span>5 min lectura</span>
+                            <span class="mx-2">•</span>
+                            <span>15 Jun 2025</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition">
+                    <img src="https://via.placeholder.com/600x400" alt="Artículo relacionado" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <span class="text-sm text-blue-500">Algoritmos</span>
+                        <h3 class="text-lg font-semibold mt-1 mb-2">El futuro de la búsqueda semántica</h3>
+                        <p class="text-gray-600 text-sm">Cómo los motores de búsqueda están evolucionando para entender mejor la intención del usuario.</p>
+                        <div class="flex items-center mt-4 text-sm text-gray-500">
+                            <span>7 min lectura</span>
+                            <span class="mx-2">•</span>
+                            <span>22 May 2025</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition">
+                    <img src="https://via.placeholder.com/600x400" alt="Artículo relacionado" class="w-full h-48 object-cover">
+                    <div class="p-4">
+                        <span class="text-sm text-blue-500">Tendencias</span>
+                        <h3 class="text-lg font-semibold mt-1 mb-2">Personalización vs Privacidad</h3>
+                        <p class="text-gray-600 text-sm">El delicado equilibrio entre ofrecer resultados relevantes y respetar la privacidad del usuario.</p>
+                        <div class="flex items-center mt-4 text-sm text-gray-500">
+                            <span>6 min lectura</span>
+                            <span class="mx-2">•</span>
+                            <span>10 Abr 2025</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Newsletter -->
+    <section class="bg-[#2e2e2a] py-12">
+        <div class="container mx-auto px-4 max-w-4xl">
+            <div class="bg-[#242420] p-8 rounded-lg shadow-sm text-center border border-[#3a3a35]">
+                <h2 class="text-2xl font-bold text-[#faff69] mb-2">Suscríbete a nuestro newsletter</h2>
+                <p class="text-gray-300 mb-6">Recibe los últimos artículos y análisis sobre SEO y marketing digital directamente en tu correo.</p>
+                <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
+                    <input type="email" placeholder="Tu correo electrónico" class="flex-grow px-4 py-2 border border-[#3a3a35] rounded-md focus:outline-none focus:ring-2 focus:ring-[#faff69] bg-[#2e2e2a] text-gray-200">
+                    <button type="submit" class="bg-[#faff69] text-[#242420] px-6 py-2 rounded-md hover:bg-[#e0e65e] transition font-medium">Suscribirse</button>
+                </form>
+                <p class="text-xs text-gray-400 mt-3">Nos preocupamos por tus datos. Lee nuestra <a href="#" class="text-[#faff69]">política de privacidad</a>.</p>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-[#1a1a18] text-gray-200 py-8">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">SEO Insights</h3>
+                    <p class="text-gray-400">El blog donde analizamos las últimas tendencias en SEO, algoritmos de búsqueda y marketing digital.</p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Enlaces</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Inicio</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Artículos</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Acerca de</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Contacto</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Categorías</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">SEO</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Google</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Algoritmos</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Marketing Digital</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Síguenos</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
+                <p>© 2025 SEO Insights. Todos los derechos reservados.</p>
+            </div>
+        </div>
+    </footer>
+    <!-- Back to Top Button -->
+    <button id="back-to-top" class="fixed bottom-6 right-6 bg-[#faff69] text-[#242420] p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300 font-medium">
+        <i class="fas fa-arrow-up"></i>
+    </button>
+    <script>
+        // Back to Top Button
+        const backToTopButton = document.getElementById('back-to-top');
+        window.addEventListener('scroll', () => {
+            if (window.pageYOffset > 300) {
+                backToTopButton.classList.remove('opacity-0', 'invisible');
+                backToTopButton.classList.add('opacity-100', 'visible');
+            } else {
+                backToTopButton.classList.remove('opacity-100', 'visible');
+                backToTopButton.classList.add('opacity-0', 'invisible');
+            }
+        });
+        backToTopButton.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+        // Smooth scrolling for table of contents links
+        document.querySelectorAll('.toc-item a').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 90,
+                        behavior: 'smooth'
+                    });
+                    // Update URL without page reload
+                    history.pushState(null, null, targetId);
+                }
+            });
+        });
+        // Lateral Menu Toggle
+        const menuToggle = document.getElementById('menuToggle');
+        const lateralMenu = document.getElementById('lateralMenu');
+        const menuOverlay = document.getElementById('menuOverlay');
+        menuToggle.addEventListener('click', () => {
+            lateralMenu.classList.toggle('active');
+            menuOverlay.classList.toggle('active');
+            document.body.classList.toggle('no-scroll');
+        });
+        menuOverlay.addEventListener('click', () => {
+            lateralMenu.classList.remove('active');
+            menuOverlay.classList.remove('active');
+            document.body.classList.remove('no-scroll');
+        });
+        // Close menu when clicking outside on desktop
+        document.addEventListener('click', (e) => {
+            if (window.innerWidth > 768 && !lateralMenu.contains(e.target) && e.target !== menuToggle) {
+                lateralMenu.classList.remove('active');
+                menuOverlay.classList.remove('active');
+                document.body.classList.remove('no-scroll');
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wachynaky/mecagoenlos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>