Arreglo posts horizontales

Actualización de librerias
Remove unused Image import and format indentation
2025-03-25 09:47:24 +01:00 · 2025-03-25 09:45:11 +01:00 · 2025-03-13 08:54:01 +01:00 · 2025-03-11 10:37:59 +01:00 · 2025-03-11 09:27:28 +01:00 · 2025-03-11 09:21:57 +01:00
22 changed files with 2115 additions and 1266 deletions
--- a/.gitea/workflows/upload.yaml
+++ b/.gitea/workflows/upload.yaml
@@ -1,46 +1,10 @@
-name: Verificar versión, Compilar y Desplegar
+name: Compilar y Desplegar

 on:
  workflow_dispatch:
-    # Puedes añadir inputs si lo necesitas, por ejemplo:
-    # inputs:
-    #   deploy_tag:
-    #     description: 'Etiqueta de la versión a desplegar'
-    #     required: true
-    #     default: 'latest'

 jobs:
-  check-version:
-    runs-on: ubuntu-latest
-    outputs:
-      version_changed: ${{ steps.compare_versions.outputs.version_changed }}
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 2
-
-      - name: Obtener versión del package.json
-        run: |
-          git show HEAD:package.json > current_package.json
-          git show HEAD~1:package.json > previous_package.json
-
-      - name: Comparar versiones del proyecto
-        id: compare_versions
-        run: |
-          current_version=$(jq -r .version current_package.json)
-          previous_version=$(jq -r .version previous_package.json)
-          if [ "$current_version" != "$previous_version" ]; then
-            echo "Versión cambiada de $previous_version a $current_version"
-            echo "version_changed=true" >> $GITHUB_OUTPUT
-          else
-            echo "La versión no ha cambiado"
-            echo "version_changed=false" >> $GITHUB_OUTPUT
-          fi
-
  build:
-    needs: check-version
-    if: needs.check-version.outputs.version_changed == 'true'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
@@ -64,8 +28,7 @@ jobs:
          path: dist

  deploy:
-    needs: [check-version, build]
-    if: needs.check-version.outputs.version_changed == 'true'
+    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Descargar build
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,12 +1,14 @@
 import { defineConfig } from 'astro/config';
-
 import mdx from '@astrojs/mdx';
-
 import sitemap from '@astrojs/sitemap';
+import tailwindcss from "@tailwindcss/vite";

 // https://astro.build/config
 export default defineConfig({
    // Enable Svelte to support Svelte components.
    integrations: [mdx(), sitemap()],
-    site: "https://ecobjetivos.h4ckdata.es"
+    site: "https://ecobjetivos.h4ckdata.es",
+    vite: {
+        plugins: [tailwindcss()],
+    },
 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,8 +11,12 @@
    "astro": "astro"
  },
  "dependencies": {
-    "@astrojs/mdx": "^4.0.8",
-    "@astrojs/sitemap": "^3.2.1",
-    "astro": "^5.3.1"
+    "@astrojs/mdx": "^4.2.1",
+    "@astrojs/sitemap": "^3.3.0",
+    "@tailwindcss/vite": "^4.0.12",
+    "astro": "^5.5.4"
+  },
+  "devDependencies": {
+    "daisyui": "^5.0.0"
  }
 }
--- a/public/imgs/logoPodcast.png
+++ b/public/imgs/logoPodcast.png
--- a/public/imgs/videoPodcast.mp4
+++ b/public/imgs/videoPodcast.mp4
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,26 +1,27 @@
-
 <footer class="bg-dark text-white py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-6 text-center text-md-start">
                <p>
-                    &copy; 2024 Ecobjetivos. Todos los derechos
+                    &copy; 2025 Ecobjetivos. Todos los derechos
                    reservados.
                </p>
            </div>
            <div class="col-md-6 text-center text-md-end">
-                <a href="#" class="text-white me-2"
-                    ><i class="fab fa-facebook-f"></i></a
-                >
-                <a href="#" class="text-white me-2"
-                    ><i class="fab fa-twitter"></i></a
-                >
-                <a href="#" class="text-white me-2"
-                    ><i class="fab fa-instagram"></i></a
-                >
-                <a href="#" class="text-white"
-                    ><i class="fab fa-linkedin-in"></i></a
-                >
+                <a href="#" class="text-white me-2 text-decoration-none">
+                    <i class="fab fa-facebook-f"></i>
+                </a>
+                <a href="#" class="text-white me-2 text-decoration-none">
+                    <i class="fab fa-twitter"></i>
+                </a>
+                <a href="#" class="text-white me-2 text-decoration-none">
+                    <i class="fab fa-instagram"></i>
+                </a>
+                <a href="#" class="text-white me-2 text-decoration-none">
+                    <i class="fab fa-linkedin-in"></i>
+                </a>
+                |
+                <a href="/contacto" class="text-light ms-2 text-decoration-none">Contacto</a>
            </div>
        </div>
    </div>
--- a/src/components/ListadoPostsHorizontal.astro
+++ b/src/components/ListadoPostsHorizontal.astro
@@ -1,51 +1,57 @@
 ---
 import { getCollection } from "astro:content";
 const posts = await getCollection("posts");
+// Selecciona 3 posts aleatorios
+const selectedPosts = posts.sort(() => Math.random() - 0.5).slice(0, 3);
 ---
-
-<div class="row">
-    {
-        posts.slice(0, 3).map((post) => (
-            <div class="col-md-4 mb-4 animate-on-scroll">
-                <div class="card h-100">
-                    <div class="card-body d-flex flex-column">
-                        <h5 class="card-title">
+<div class="flex flex-wrap justify-center -mx-2">
+{
+selectedPosts.map((post) => (
+<div class="w-full md:w-1/3 p-2 mb-4 animate-on-scroll">
+  <div class="card relative overflow-hidden bg-gradient-to-b from-neutral/80 to-neutral/90 dark:from-base-100/80 dark:to-base-100/90 shadow-lg h-full">
+    <div class="absolute inset-0 z-0">
+      <div class="aspect-[16/9] overflow-hidden">
+        <img
+          src={post.data.imagen}
+          class="w-full h-full object-cover opacity-40 dark:opacity-50"
+          alt={post.data.titulo}
+        />
+      </div>
+      <div class="absolute inset-0 bg-black/40 dark:bg-black/30"></div>
+    </div>
+    <div class="relative z-10 flex flex-col p-6 h-full">
+      <h5 class="text-xl font-bold mb-3 text-white dark:text-base-content">
        {post.data.titulo}
      </h5>
-                        <p class="card-text post-content flex-grow-1">
+      <p class="text-base mb-4 text-white/90 dark:text-base-content/80 line-clamp-3">
        {post.data.descripcion}
      </p>
-                        <a href={"/posts/" + post.id} class="btn btn-success mt-auto">
-                            Ver detalles
+      <a
+        href={"/posts/" + post.id}
+        class="btn btn-primary w-full mt-auto"
+      >
+        Leer post
      </a>
    </div>
  </div>
-            </div>
-        ))
-    }
 </div>
-
+ ))
+}
+</div>
 <style>
-    .post-content {
+.card {
+  transition: 
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15) !important;
+}
+.line-clamp-3 {
  display: -webkit-box;
+  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
-        -webkit-line-clamp: 4; /* Limita a 4 líneas */
-        line-height: 1.5; /* Ajusta según el diseño */
-        max-height: calc(1.5em * 4); /* Calcula la altura máxima */
-    }
-    .card {
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        background: #ffffff;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-    }
-    .card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
-    }
-    .btn-success {
-        transition: transform 0.3s ease;
-    }
+}
 </style>
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,48 +1,42 @@
 ---
 import { Image } from "astro:assets";
 const { home, posts, proyectos } = Astro.props;
+import "../styles/global.css";
 ---

-<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
-  <div class="container">
-    <a class="navbar-brand d-flex align-items-center" href={home ? home : "/"}>
-      <Image
-        src="/logo.png"
-        alt="Logo Ecobjetivos"
-        class="me-2 biglogo"
-        height="25"
-        width="25"
-      />
-      &nbsp Ecobjetivos
+<head>
+  <meta charset="utf-8" />
+</head>
+
+<main>
+  <nav class="navbar bg-base-100 fixed top-0 z-50 shadow-lg">
+    <div class="navbar-start">
+      <a class="btn btn-ghost normal-case text-xl" href={home ? home : "/"}>
+        <Image src="/logo.png" alt="Logo Ecobjetivos" class="mr-2" height="25" width="25" />
+        Ecobjetivos
      </a>
-    <button
-      class="navbar-toggler"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarNav"
-      aria-controls="navbarNav"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
-      <ul class="navbar-nav ms-auto">
-        <li class="nav-item">
-          <a type="button" class="nav-link btn btn-light" href={posts ? posts : "/posts"}>Posts</a>
-        </li>
-        <li class="nav-item">
-          <a type="button" class="nav-link btn btn-light disabled" href={proyectos ? proyectos : "#proyectos"}
-            >Proyectos</a
-          >
-        </li>
+    </div>
+    <div class="navbar-end">
+      <!-- Mobile Dropdown -->
+      <div class="dropdown lg:hidden">
+        <label tabindex="0" class="btn btn-ghost">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </label>
+        <ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
+          <li><a href={posts ? posts : '/posts'}>Posts</a></li>
+          <li><a href={proyectos ? proyectos : '/proyectos'}>Proyectos</a></li>
+        </ul>
+      </div>
+      <!-- Desktop Menu -->
+      <div class="hidden lg:flex">
+        <ul class="menu menu-horizontal p-0">
+          <li><a href={posts ? posts : '/posts'} class="hover:scale-105 transition-transform">Posts</a></li>
+          <li><a href={proyectos ? proyectos : '/proyectos'} class="hover:scale-105 transition-transform">Proyectos</a></li>
        </ul>
      </div>
    </div>
-</nav>
+  </nav>
  
-<style>
-  .biglogo {
-    scale: 1.5;
-  }
-</style>
+</main>
--- a/src/layouts/PostStyle.astro
+++ b/src/layouts/PostStyle.astro
@@ -1,261 +0,0 @@
---
-import RelatedPosts from "../components/PostsRelacionados.astro"; // Componente para posts relacionados
-import Navbar from "../components/Navbar.astro";
-import Footer from "../components/Footer.astro";
-
-const { frontmatter } = Astro.props;
-const headings = Astro.props.headings;
-const description = frontmatter.descripcion;
-
-// URLs para compartir en redes sociales
-const shareUrl = new URL(Astro.url.pathname, Astro.site).toString();
-const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`;
-const twitterShareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(frontmatter.titulo)}`;
-const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(frontmatter.titulo)}`;
-
-const blogJsonLd = {
-    "@context": "https://schema.org",
-    "@type": "BlogPosting",
-    "headline": frontmatter.titulo,
-    "image": frontmatter.imagen && new URL(frontmatter.imagen, Astro.site),
-    "datePublished": frontmatter.fecha,
-    "dateModified": frontmatter.fecha,
-    "author": {
-        "@type": "Person",
-        "name": frontmatter.autor
-    },
-    "publisher": {
-        "@type": "Organization",
-        "name": "Ecobjetivos",
-        "logo": {
-            "@type": "ImageObject",
-            "url": new URL('/logo.png', Astro.site)
-        }
-    },
-    "description": description
-};
---
-
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{frontmatter.titulo} - Ecobjetivos</title>
-        <link rel="icon" type="image/png" href="logo.png" />
-        <meta name="description" content={description} />
-        <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).toString()} />
-
-        <!-- Open Graph / Facebook -->
-        <meta property="og:type" content="article" />
-        <meta property="og:url" content={Astro.url} />
-        <meta property="og:title" content={frontmatter.titulo} />
-        <meta property="og:description" content={description} />
-        <meta property="og:image" content={frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)} />
-
-        <!-- Twitter -->
-        <meta property="twitter:card" content="summary_large_image" />
-        <meta property="twitter:url" content={Astro.url} />
-        <meta property="twitter:title" content={frontmatter.titulo} />
-        <meta property="twitter:description" content={description} />
-        <meta property="twitter:image" content={frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)} />
-
-        <!-- Google tag (gtag.js) -->
-        <script async src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"></script>
-        <script>
-            window.dataLayer = window.dataLayer || [];
-            function gtag() {
-                dataLayer.push(arguments);
-            }
-            gtag("js", new Date());
-            gtag("config", "G-1JT18RF3R4");
-        </script>
-
-        <!-- Structured Data for Google -->
-        <script type="application/ld+json" set:html={JSON.stringify(blogJsonLd)} />
-
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
-        <style>
-            body {
-                font-family: "Arial", sans-serif;
-                line-height: 1.6;
-                color: #333;
-            }
-            .post-header {
-                background-color: #4caf50;
-                color: white;
-                padding: 2rem 0;
-            }
-            .post-content {
-                font-size: 1.1rem;
-            }
-            .post-content img {
-                max-width: 100%;
-                height: auto;
-                margin: 1.5rem 0;
-            }
-            .post-meta {
-                font-size: 0.9rem;
-                margin: 0px !important;
-            }
-            blockquote {
-                background-color: #f9f9f9;
-                border-left: 5px solid #4caf50;
-                padding: 1rem;
-                margin: 1rem 0;
-                font-style: italic;
-            }
-            .table-of-contents {
-                background-color: #f8f9fa;
-                border-radius: 10px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-                border: 1px solid #e9ecef;
-            }
-            .table-of-contents h4 {
-                color: #2c3e50;
-                border-bottom: 2px solid #4caf50;
-                font-size: 1.2rem;
-            }
-            .table-of-contents ul {
-                list-style-type: none;
-                padding-left: 0;
-            }
-            .table-of-contents a {
-                color: #495057;
-                text-decoration: none;
-                display: block;
-                border-radius: 5px;
-                transition: all 0.2s ease;
-                font-size: 0.9rem;
-                position: relative;
-            }
-            .table-of-contents a:hover {
-                color: #4caf50;
-                background-color: #e8f5e9;
-                padding-left: 0.6rem;
-            }
-            /* Estilos para la indentación visual */
-            .toc-level-2 { padding-left: 1.1rem; }
-            .toc-level-3 { padding-left: 2.1rem; }
-            .toc-level-4 { padding-left: 3.1rem; }
-            .toc-level-5 { padding-left: 4.1rem; }
-            .toc-level-6 { padding-left: 5.1rem; }
-            /* Líneas verticales para la indentación */
-            .toc-level-2,
-            .toc-level-3,
-            .toc-level-4,
-            .toc-level-5,
-            .toc-level-6 {
-                border-left: 2px solid #e9ecef;
-                margin-left: 0.5rem;
-            }
-            html { scroll-padding-top: 70px; }
-            img { max-width: 100%; height: auto; }
-        </style>
-    </head>
-    <body>
-        <Navbar proyectos="/" />
-
-        <header class="post-header">
-            <div class="container">
-                <h1 class="display-4">{frontmatter.titulo}</h1>
-            </div>
-        </header>
-
-        <main class="container my-5">
-            <div class="row">
-                <div class="col-lg-8">
-                    <article class="post-content" data-bs-spy="scroll" data-bs-target="#toc" data-bs-offset="70" tabindex="0">
-                        <slot />
-                    </article>
-                </div>
-                <div class="col-lg-4">
-                    <aside class="sticky-top" style="top: 5rem;">
-                        <div class="d-none d-lg-block">
-                            <!-- Se añade el id "toc" para ser usado por scrollspy -->
-                            <div id="toc" class="table-of-contents p-3 mb-4">
-                                <h4 class="mb-3 pb-2 fw-bold">Contenido</h4>
-                                <ul class="m-0">
-                                    {headings.map((heading) => (
-                                        <li class={`mb-2 toc-level-${heading.depth}`}>
-                                            <a href={`#${heading.slug}`} class="py-1 px-2">
-                                                {heading.text}
-                                            </a>
-                                        </li>
-                                    ))}
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="card mb-4">
-                            <div class="card-body">
-                                <p class="post-meta">
-                                    <i class="fas fa-calendar-alt"></i>
-                                    {new Date(frontmatter.fecha).toLocaleDateString("es-ES", {
-                                        year: "numeric",
-                                        month: "long",
-                                        day: "numeric",
-                                    })}
-                                    &nbsp;|&nbsp;
-                                    <i class="fas fa-user"></i>
-                                    {frontmatter.autor}
-                                </p>
-                            </div>
-                        </div>
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">Compartir</h5>
-                                <a
-                                    href={facebookShareUrl}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="btn btn-primary me-2"
-                                >
-                                    <i class="fab fa-facebook-f fa-fw"></i>
-                                </a>
-                                <a
-                                    href={twitterShareUrl}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="btn btn-info me-2"
-                                >
-                                    <i class="fab fa-twitter fa-fw"></i>
-                                </a>
-                                <a
-                                    href={linkedinShareUrl}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="btn btn-secondary"
-                                >
-                                    <i class="fab fa-linkedin-in fa-fw"></i>
-                                </a>
-                            </div>
-                        </div>
-                    </aside>
-                </div>
-            </div>
-
-            <RelatedPosts currentPost={frontmatter} />
-        </main>
-
-        <Footer />
-
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-    </body>
-</html>
-
-<style is:global>
-    @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
-    @import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
-
-    h1, h2, h3, h4, h5, h6, p, a {
-        font-family: "Inter Tight", sans-serif !important;
-        font-optical-sizing: auto;
-        font-weight: 400 !important;
-        font-style: normal;
-    }
-    .londrina-sketch-regular {
-        font-family: "Londrina Sketch", sans-serif !important;
-        font-weight: 400;
-        font-style: normal;
-    }
-</style>
--- a/src/pages/contacto.astro
+++ b/src/pages/contacto.astro
@@ -0,0 +1,125 @@
+---
+import Footer from "../components/Footer.astro";
+import Navbar from "../components/Navbar.astro";
+
+const animateOnScroll = `
+  document.addEventListener('DOMContentLoaded', () => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animate__animated', 'animate__fadeIn');
+          entry.target.style.visibility = 'visible';
+        }
+      });
+    });
+
+    document.querySelectorAll('.animate-on-scroll').forEach(el => {
+      observer.observe(el);
+    });
+  });
+`;
+---
+
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="generator" content={Astro.generator} />
+        <link rel="sitemap" href="/sitemap-index.xml" />
+        <meta
+            name="description"
+            content="Contacta con nosotros para cualquier duda sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS)."
+        />
+        <link rel="icon" type="image/png" href="logo.png" />
+        <link
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+            rel="stylesheet"
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+        />
+        <title>Contacto | Ecobjetivos</title>
+    </head>
+    <body>
+        <div class="page-container">
+        <Navbar />
+
+        <main class="container py-5">
+            <h1 class="text-center mt-4 mb-5 animate__animated animate__fadeInDown">Contacta con Nosotros</h1>
+            
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <div class="card shadow-lg animate-on-scroll">
+                        <div class="card-body p-5">
+                            <div class="row mb-4 justify-content-center">
+                                <div class="col-md-6 mb-4 mb-md-0">
+                                    <div class="text-center">
+                                        <i class="fas fa-envelope fa-3x text-primary mb-3"></i>
+                                        <h3>Email</h3>
+                                        <p>Escríbenos a:</p>
+                                        <a href="mailto:ecobjetivos@h4ckdata.es" class="btn btn-primary">
+                                            ecobjetivos@h4ckdata.es
+                                        </a>
+                                    </div>
+                                </div>
+<!--                                 <div class="col-md-6">
+                                    <div class="text-center">
+                                        <i class="fab fa-discord fa-3x text-primary mb-3"></i>
+                                        <h3>Discord</h3>
+                                        <p>Únete a nuestra comunidad:</p>
+                                        <a href="https://discord.gg/tuenlace" class="btn btn-primary">
+                                            Servidor de Discord
+                                        </a>
+                                    </div>
+                                </div> -->
+                            </div>
+<!-- 
+                            <hr class="my-5" />
+
+                            <form class="animate-on-scroll">
+                                <h3 class="text-center mb-4">O envíanos un mensaje directamente</h3>
+                                <div class="mb-3">
+                                    <label for="nombre" class="form-label">Nombre</label>
+                                    <input type="text" class="form-control" id="nombre" required />
+                                </div>
+                                <div class="mb-3">
+                                    <label for="email" class="form-label">Email</label>
+                                    <input type="email" class="form-control" id="email" required />
+                                </div>
+                                <div class="mb-3">
+                                    <label for="asunto" class="form-label">Asunto</label>
+                                    <input type="text" class="form-control" id="asunto" required />
+                                </div>
+                                <div class="mb-3">
+                                    <label for="mensaje" class="form-label">Mensaje</label>
+                                    <textarea class="form-control" id="mensaje" rows="5" required></textarea>
+                                </div>
+                                <div class="text-center">
+                                    <button type="submit" class="btn btn-primary btn-lg">Enviar Mensaje</button>
+                                </div>
+                            </form> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <Footer/>
+        </div>
+
+        <script set:html={animateOnScroll} />
+    </body>
+</html>
+
+<style>
+.page-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  main {
+    flex: 1;
+  }
+</style>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,6 +4,7 @@ import Footer from "../components/Footer.astro";
 import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
 import Navbar from "../components/Navbar.astro";
 import { Image } from "astro:assets";
+import { proyectos } from "../pages/proyectos/index.astro";

 const animateOnScroll = `
  document.addEventListener('DOMContentLoaded', () => {
@@ -24,14 +25,20 @@ const animateOnScroll = `
 ---

 <html lang="es">
-<head>
+    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="generator" content={Astro.generator} />
        <link rel="sitemap" href="/sitemap-index.xml" />
        <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"></script>
-  <meta name="google-site-verification" content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk" />
+        <script
+            async
+            src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
+        ></script>
+        <meta
+            name="google-site-verification"
+            content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk"
+        />
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
@@ -40,68 +47,131 @@ const animateOnScroll = `
            gtag("js", new Date());
            gtag("config", "G-1JT18RF3R4");
        </script>
-  <meta name="description" content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible." />
+        <meta
+            name="description"
+            content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible."
+        />
        <link rel="icon" type="image/png" href="logo.png" />
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+        <link
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+            rel="stylesheet"
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+        />
        <title>Ecobjetivos | Tu web de desarrollo Sostenible</title>
-</head>
-<body>
+    </head>
+    <body>
        <Navbar />
-  <header class="header-bg text-white">
-    <img src={"/imgs/bosqueverde.png"} alt="Bosque Verde" class="video-bg" />
-    <video autoplay muted loop class="video-bg">
+        <header
+            class="bg-primary text-white min-h-screen flex items-center relative overflow-hidden"
+        >
+            <img
+                src="/imgs/bosqueverde.png"
+                alt="Bosque Verde"
+                class="absolute inset-0 w-full h-full object-cover"
+            />
+            <video
+                autoplay
+                muted
+                loop
+                class="absolute inset-0 w-full h-full object-cover"
+            >
                <source src="/imgs/bosqueverde.mp4" type="video/mp4" />
                Tu navegador no soporta la reproducción de videos.
            </video>
-
-    <div class="container text-center">
-      <h1 class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular">
+            <div class="container mx-auto text-center relative z-10">
+                <h1 class="text-6xl mb-4 font-bold font-londrina">
                    Ecobjetivos: Sostenibilidad y Desarrollo
                </h1>
-      <p class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s">
+                <p class="text-xl mb-5">
                    Construyendo juntos un futuro más verde y equitativo
                </p>
-      <a href="#intro" class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s">Descubre más</a>
+                <a href="#intro" class="btn btn-outline btn-lg">
+                    Descubre más
+                </a>
            </div>
        </header>

        <main>
-    <section id="intro" class="py-5 bg-light">
-      <div class="container">
-        <div class="row align-items-center">
-          <div class="col-md-6 animate-on-scroll">
-            <h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
-            <p class="lead">
-              Los Objetivos de Desarrollo Sostenible (ODS) son un llamado universal a la acción para erradicar la pobreza, proteger el planeta y garantizar que todas las personas gocen de paz y prosperidad para 2030. Estos objetivos buscan promover un desarrollo que asegure la sostenibilidad de nuestros recursos y ecosistemas para las futuras generaciones.
+            <section id="intro" class="py-10">
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-wrap items-center">
+                        <div class="w-full md:w-1/2 mb-4 md:mb-0">
+                            <h2 class="text-4xl mb-4 font-bold">
+                                ¿Qué son los ODS?
+                            </h2>
+                            <p class="text-lg">
+                                Los Objetivos de Desarrollo Sostenible (ODS) son
+                                un llamado universal a la acción para erradicar
+                                la pobreza, proteger el planeta y garantizar que
+                                todas las personas gocen de paz y prosperidad
+                                para 2030. Estos objetivos buscan promover un
+                                desarrollo que asegure la sostenibilidad de
+                                nuestros recursos y ecosistemas para las futuras
+                                generaciones.
                            </p>
                        </div>
-          <div class="col-md-6 animate-on-scroll">
-            <div class="text-white p-5 text-center">
-              <Image src="/imgs/17Objetivos.png" alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU" class="img-thumbnail .img-fluid" width="730" height="450" />
+                        <div class="w-full md:w-1/2">
+                            <div class="p-5 text-center">
+                                <Image
+                                    src="/imgs/17Objetivos.png"
+                                    alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU"
+                                    class="rounded shadow-lg mx-auto"
+                                    width="730"
+                                    height="450"
+                                />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
-		<section id="objetivos" class="py-5">
-			<div class="container">
-				<h2 class="text-center mb-5 animate-on-scroll">Nuestros Objetivos Principales</h2>
-				<div class="row">
+            <section id="objetivos" class="py-10 bg-base-300">
+                <div class="container mx-auto px-4">
+                    <h2 class="text-center mb-5 text-3xl font-bold">
+                        Nuestros Objetivos Principales
+                    </h2>
+                    <div class="flex flex-wrap -mx-2">
                        {
                            [
-							{ icon: "fa-chalkboard-teacher", title: "Educación en ODS", description: "Enseñar a la comunidad formas de vida sostenibles que cumplan con los Objetivos de Desarrollo Sostenible." },
-							{ icon: "fa-lightbulb", title: "Concienciación Energética", description: "Promover el uso eficiente de la energía en el hogar y el trabajo." },
-							{ icon: "fa-handshake", title: "Colaboración Comunitaria", description: "Fomentar la colaboración con organizaciones locales para proyectos sostenibles." },
-							{ icon: "fa-recycle", title: "Promoción del Reciclaje", description: "Incentivar la separación de residuos y el reciclaje en la comunidad para reducir el impacto ambiental." }
+                                {
+                                    icon: "fa-chalkboard-teacher",
+                                    title: "Educación en ODS",
+                                    description:
+                                        "Enseñar a la comunidad formas de vida sostenibles que cumplan con los Objetivos de Desarrollo Sostenible.",
+                                },
+                                {
+                                    icon: "fa-lightbulb",
+                                    title: "Concienciación Energética",
+                                    description:
+                                        "Promover el uso eficiente de la energía en el hogar y el trabajo.",
+                                },
+                                {
+                                    icon: "fa-handshake",
+                                    title: "Colaboración Comunitaria",
+                                    description:
+                                        "Fomentar la colaboración con organizaciones locales para proyectos sostenibles.",
+                                },
+                                {
+                                    icon: "fa-recycle",
+                                    title: "Promoción del Reciclaje",
+                                    description:
+                                        "Incentivar la separación de residuos y el reciclaje en la comunidad para reducir el impacto ambiental.",
+                                },
                            ].map((obj, index) => (
-							<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
-								<div class="card h-100 text-center">
+                                <div class="w-full md:w-1/2 lg:w-1/4 p-2 mb-4">
+                                    <div class="card bg-base-100 shadow-lg text-center h-full p-4">
                                        <div class="card-body">
-										<i class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`} />
-										<h5 class="card-title">{obj.title}</h5>
-										<p class="card-text">{obj.description}</p>
+                                            <i
+                                                class={`fa-solid ${obj.icon} text-3xl mb-3 text-primary`}
+                                            />
+                                            <h5 class="text-xl font-semibold mb-2">
+                                                {obj.title}
+                                            </h5>
+                                            <p class="text-base">
+                                                {obj.description}
+                                            </p>
                                        </div>
                                    </div>
                                </div>
@@ -111,48 +181,61 @@ const animateOnScroll = `
                </div>
            </section>

-    <section id="impact" class="py-5 bg-success text-white">
-      <div class="container">
-        <h2 class="text-center mb-5 animate-on-scroll">Nuestro Impacto</h2>
-        <div class="row justify-content-center text-center">
+            <section id="impact" class="py-10 bg-success text-success-content">
+                <div class="container mx-auto px-4">
+                    <h2 class="text-center mb-5 text-3xl font-bold">
+                        Nuestro Impacto
+                    </h2>
+                    <div class="flex flex-wrap justify-center text-center">
                        {
                            [
-          { number: "500+", description: "Personas a las que hemos concienciado." },
-          { number: "5+", description: "Proyectos creados para fomentar la sostenibilidad." }
+                                {
+                                    number: "1k+",
+                                    description:
+                                        "Personas a las que hemos concienciado.",
+                                },
+                                {
+                                    number: "5+",
+                                    description:
+                                        "Proyectos creados para fomentar la sostenibilidad.",
+                                },
                            ].map((impact, index) => (
-              <div class="col-md-3 mb-4 animate-on-scroll">
-                <h3 class="display-4 fw-bold">{impact.number}</h3>
-                <p class="lead">{impact.description}</p>
+                                <div class="w-full md:w-1/3 lg:w-1/4 p-2 mb-4">
+                                    <h3 class="text-5xl font-bold mb-2">
+                                        {impact.number}
+                                    </h3>
+                                    <p class="text-lg">{impact.description}</p>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </section>
-    <section id="posts" class="py-5 bg-light">
-      <div class="container">
-        <h2 class="text-center mb-5 animate-on-scroll pt-1">Posts Recientes</h2>
+            <section id="posts" class="py-10 bg-base-100">
+                <div class="container mx-auto px-4">
+                  <h2 class="text-center mb-5 text-3xl font-bold pt-1">Posts Destacados</h2>
                  <ListadoPostsHorizontal />
                </div>
              </section>
-
-    <section id="proyectos" class="py-5">
-      <div class="container">
-        <h2 class="text-center mb-5 animate-on-scroll pt-2">Nuestros Proyectos</h2>
-        <div class="row">
+              <section id="proyectos" class="py-10">
+                <div class="container mx-auto px-4">
+                  <h2 class="text-center mb-5 text-3xl font-bold pt-2">Proyectos Destacados</h2>
+                  <div class="flex flex-wrap justify-center -mx-2">
                    {
-            [
-              { title: "Proyecto Verde", description: "Iniciativa para reforestar áreas urbanas y rurales." },
-              { title: "Educación para Todos", description: "Programa de educación inclusiva en comunidades desfavorecidas." },
-              { title: "Energía Limpia", description: "Desarrollo de tecnologías para energías renovables." },
-              { title: "Agua Limpia", description: "Proyectos para mejorar el acceso al agua potable." }
-            ].map((project, index) => (
-              <div class="col-md-6 mb-4 animate-on-scroll">
-                <div class="card">
-                  <div class="card-body">
-                    <h5 class="card-title" aria-label="Proyecto">{project.title}</h5>
-                    <p class="card-text">{project.description}</p>
-                    <a href="#" class="btn disabled btn-success">Ver detalles</a>
+                      proyectos.map((project) => (
+                        <div class="w-full md:w-1/2 p-2 mb-4">
+                          <div class="card bg-base-100 shadow-lg h-full">
+                            <div class="flex flex-wrap">
+                              <div class="w-full md:w-1/3">
+                                <img src={project.imagen} class="w-full h-auto rounded-l" alt={project.titulo} />
+                              </div>
+                              <div class="w-full md:w-2/3">
+                                <div class="card-body flex flex-col h-full p-4">
+                                  <h5 class="text-xl font-semibold mb-2" aria-label=\"Proyecto\">{project.titulo}</h5>
+                                  <p class="text-base flex-grow line-clamp">{project.descripcion}</p>
+                                  <a href={project.url} class="btn btn-primary mt-auto">Ver detalles</a>
+                                </div>
+                              </div>
                            </div>
                          </div>
                        </div>
@@ -161,40 +244,45 @@ const animateOnScroll = `
                  </div>
                </div>
              </section>
-
-	<section id="cta" class="py-5 bg-primary text-white text-center">
-		<div class="container">
-		  <h2 class="display-4 mb-4 animate-on-scroll">¡Únete al Cambio!</h2>
-		  <p class="lead mb-5 animate-on-scroll">Juntos podemos crear un impacto duradero. Descubre cómo puedes contribuir a los ODS.</p>
-		  <a href="/participa" class="btn btn-lg btn-light animate-on-scroll">¡Participa ahora!</a>
+              <section id="cta" class="py-10 bg-primary text-primary-content text-center">
+                <div class="container mx-auto px-4">
+                  <h2 class="text-5xl font-bold mb-4">¡Únete al Cambio!</h2>
+                  <p class="text-lg mb-5">Juntos podemos crear un impacto duradero. Descubre cómo puedes contribuir a los ODS.</p>
+                  <a href="/participa" class="btn btn-outline text-lg">¡Participa ahora!</a>
                </div>
              </section>
        </main>

        <Footer />

-	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
        <script set:html={animateOnScroll} />
    </body>
-  </html>
+</html>

-  <style is:global>
+<style is:global>
    @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");

-	h1, h2, h3, h4, h5, h6, p, a {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    a {
        font-family: "Inter Tight", sans-serif !important;
        font-optical-sizing: auto;
        font-weight: 400 !important;
        font-style: normal;
    }
-	.londrina-sketch-regular {
+    .font-londrina {
        font-family: "Londrina Sketch", sans-serif !important;
        font-weight: 400;
        font-style: normal;
    }
-  </style>
-  <style>
+</style>
+<style>
    .header-bg {
        background-color: #4caf50;
        min-height: 100vh;
@@ -233,16 +321,26 @@ const animateOnScroll = `
    .btn-outline-light:hover {
        background-color: #ffffff;
        color: #4caf50;
-	  transition: background-color 0.3s ease, color 0.3s ease;
+        transition:
+            background-color 0.3s ease,
+            color 0.3s ease;
    }

    .card {
-	  transition: transform 0.3s ease, box-shadow 0.3s ease;
+        transition:
+            transform 0.3s ease,
+            box-shadow 0.3s ease;
        background: #ffffff;
    }
    .card:hover {
        transform: translateY(-5px);
-	  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
-  </style>

+    .line-clamp {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+</style>
--- a/src/pages/participa.astro
+++ b/src/pages/participa.astro
@@ -37,10 +37,6 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Participa Ahora | Ecobjetivos</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      rel="stylesheet"
@@ -217,5 +213,3 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
    </script>
  </body>
 </html>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
--- a/src/pages/posts/[id].astro
+++ b/src/pages/posts/[id].astro
@@ -170,7 +170,7 @@ const blogJsonLd = {
        </style>
    </head>
    <body>
-        <Navbar proyectos="/" />
+        <Navbar />

        <header class="post-header">
            <div class="container">
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -1,20 +1,14 @@
 ---
-import Navbar from "../components/Navbar.astro";
-import ListadoPosts from "../layouts/ListadoPosts.astro";
+import Navbar from "../../components/Navbar.astro";
+import ListadoPosts from "../../layouts/ListadoPosts.astro";
 ---

-<html lang="es">
+<html lang="es" class="scroll-smooth">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="generator" content={Astro.generator} />
        <link rel="icon" type="image/png" href="logo.png" />
-        <link
-            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-            rel="stylesheet"
-            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-            crossorigin="anonymous"
-        />
        <link
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
            rel="stylesheet"
@@ -35,14 +29,10 @@ import ListadoPosts from "../layouts/ListadoPosts.astro";
        </script>
        <title>Ecobjetivos | Posts</title>
    </head>
-    <body>
-        <main>
+    <body class="min-h-screen bg-base-200 text-base-content">
+        <main class="container mx-auto p-4">
            <Navbar />
            <ListadoPosts />
        </main>
-        <script
-            src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
-            crossorigin="anonymous"></script>
    </body>
 </html>
--- a/src/pages/proyectos/index.astro
+++ b/src/pages/proyectos/index.astro
@@ -0,0 +1,242 @@
+---
+import Navbar from "../../components/Navbar.astro";
+
+export const proyectos = [
+    {
+        titulo: "Podcast ¿Arreglamos el Mundo?",
+        descripcion: "Un Podcast dinámico y entretenido que aborda los desafíos y soluciones relacionadas con la Sostenibilidad. Liderado por Rafa y Vicente, cada episodio se convierte en un espacio de debate y aprendizaje. Junto a ellos, los expertos invitados María Jesús y Rubén. Con conversaciones cercanas, datos relevantes y un toque de humor, este equipo busca, literalmente, arreglar el mundo. 🌍✨",
+        imagen: "/imgs/logoPodcast.png",
+        autor: "Rafa, Vicen, Rubén y María Jesús",
+        fecha: "2024-03-10",
+        url: "/proyectos/podcast"
+    }
+];
+
+const orderProyectos = (proyectos, orderBy = "fecha", ascending = false) => {
+    return proyectos.sort((a, b) => {
+        if (orderBy === "fecha") {
+            const comparison = new Date(b.fecha).getTime() - new Date(a.fecha).getTime();
+            return ascending ? -comparison : comparison;
+        } else if (orderBy === "titulo") {
+            const comparison = a.titulo.localeCompare(b.titulo);
+            return ascending ? comparison : -comparison;
+        }
+        return 0;
+    });
+};
+
+const initialProyectos = orderProyectos(proyectos, "fecha", false);
+---
+<body>
+    <Navbar />
+    <div class="container py-5">
+        <div class="text-center mb-5 mt-3">
+            <h1 class="display-4">Proyectos Sostenibles</h1>
+            <p class="lead text-muted">
+                Descubre nuestras iniciativas para un futuro más sostenible
+            </p>
+        </div>
+    
+        <!-- Controles de búsqueda y ordenamiento -->
+        <div class="row justify-content-center mb-5">
+            <div class="col-md-8">
+                <div class="card shadow-sm">
+                    <div class="card-body">
+                        <div class="row g-3">
+                            <div class="col-md-7">
+                                <div class="input-group">
+                                    <span class="input-group-text bg-white">
+                                        <i class="fas fa-search text-muted"></i>
+                                    </span>
+                                    <input
+                                        type="text"
+                                        id="searchInput"
+                                        class="form-control border-start-0"
+                                        placeholder="Buscar proyectos..."
+                                    />
+                                </div>
+                            </div>
+                            <div class="col-md-5">
+                                <select id="orderSelect" class="form-select">
+                                    <option value="fecha-desc">Más recientes primero</option>
+                                    <option value="fecha-asc">Más antiguos primero</option>
+                                    <option value="titulo-asc">Título A-Z</option>
+                                    <option value="titulo-desc">Título Z-A</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <!-- Grid de proyectos -->
+        <div class="row justify-content-center" id="proyectosContainer">
+            {initialProyectos.map((proyecto) => (
+                <div class="col-md-8 mb-4 proyecto-item">
+                    <article class="card shadow-sm h-100 border-0">
+                        <div class="row g-0">
+                            <div class="col-md-4">
+                                {proyecto.imagen ? (
+                                    <img
+                                        src={proyecto.imagen}
+                                        class="proyecto-image rounded-start"
+                                        alt={proyecto.titulo}
+                                    />
+                                ) : (
+                                    <div class="default-image rounded-start">
+                                        <i class="fas fa-leaf fa-3x text-success" />
+                                    </div>
+                                )}
+                            </div>
+                            <div class="col-md-8">
+                                <div class="card-body d-flex flex-column h-100">
+                                    <div class="mb-3">
+                                        <h2 class="card-title h4">{proyecto.titulo}</h2>
+                                        <p class="card-text text-muted">
+                                            {proyecto.descripcion}
+                                        </p>
+                                    </div>
+                                    <div class="mt-auto">
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <div class="author-info">
+                                                <small class="text-muted d-block">
+                                                    <i class="fas fa-user-edit me-2" />
+                                                    {proyecto.autor}
+                                                </small>
+                                                <small class="text-muted d-block">
+                                                    <i class="far fa-calendar-alt me-2" />
+                                                    <time datetime={proyecto.fecha}>
+                                                        {new Date(proyecto.fecha).toLocaleDateString(
+                                                            "es-ES",
+                                                            {
+                                                                year: "numeric",
+                                                                month: "long",
+                                                                day: "numeric",
+                                                            }
+                                                        )}
+                                                    </time>
+                                                </small>
+                                            </div>
+                                            <a
+                                                href={proyecto.url}
+                                                class="btn btn-outline-success"
+                                            >
+                                                Ver proyecto
+                                                <i class="fas fa-arrow-right ms-2" />
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                </div>
+            ))}
+        </div>
+    </div>
+    
+    <style>
+        .card {
+            transition:
+                transform 0.3s ease,
+                box-shadow 0.3s ease;
+            background: #ffffff;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+        }
+        .proyecto-image {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .default-image {
+            width: 100%;
+            height: 100%;
+            min-height: 200px;
+            background-color: #f8f9fa;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .card-title {
+            color: #2c3e50;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        .input-group-text {
+            border-right: 0;
+        }
+        .form-control:focus {
+            box-shadow: none;
+            border-color: #ced4da;
+        }
+        .form-select:focus {
+            box-shadow: none;
+            border-color: #ced4da;
+        }
+        .btn-outline-success:hover {
+            transform: translateX(5px);
+            transition: transform 0.3s ease;
+        }
+    </style>
+    
+    <script>
+        interface Proyecto {
+            titulo: string;
+            fecha: string;
+            element: string;
+        }
+    
+        const proyectos = {
+            frontmatter: JSON.stringify(Array.from(document.querySelectorAll('.proyecto-item')).map(proyecto => {
+                const timeEl = proyecto.querySelector('time');
+                const titleEl = proyecto.querySelector('.card-title');
+                return {
+                    titulo: titleEl?.textContent?.trim() || '',
+                    fecha: timeEl?.getAttribute('datetime') || '',
+                    element: proyecto.outerHTML
+                };
+            }))
+        };
+    
+        const searchInput = document.getElementById('searchInput') as HTMLInputElement;
+        const orderSelect = document.getElementById('orderSelect') as HTMLSelectElement;
+        const proyectosContainer = document.getElementById('proyectosContainer');
+        const proyectosList = JSON.parse(proyectos.frontmatter) as Proyecto[];
+    
+        function filterAndSortProyectos() {
+            if (!searchInput || !orderSelect || !proyectosContainer) return;
+    
+            const searchTerm = searchInput.value.toLowerCase();
+            const [orderBy, direction] = orderSelect.value.split('-');
+    
+            let filteredProyectos = proyectosList.filter(proyecto =>
+                proyecto.titulo.toLowerCase().includes(searchTerm)
+            );
+    
+            filteredProyectos.sort((a, b) => {
+                if (orderBy === 'fecha') {
+                    const dateA = new Date(a.fecha).getTime();
+                    const dateB = new Date(b.fecha).getTime();
+                    const comparison = dateB - dateA;
+                    return direction === 'asc' ? -comparison : comparison;
+                } else if (orderBy === 'titulo') {
+                    const comparison = a.titulo.localeCompare(b.titulo);
+                    return direction === 'asc' ? comparison : -comparison;
+                }
+                return 0;
+            });
+    
+            proyectosContainer.innerHTML = filteredProyectos
+                .map(proyecto => proyecto.element)
+                .join('');
+        }
+    
+        searchInput?.addEventListener('input', filterAndSortProyectos);
+        orderSelect?.addEventListener('change', filterAndSortProyectos);
+    </script>    
+</body>
+
--- a/src/pages/proyectos/podcast.astro
+++ b/src/pages/proyectos/podcast.astro
@@ -0,0 +1,364 @@
+---
+// Podcast page
+import Footer from "../../components/Footer.astro";
+import Navbar from "../../components/Navbar.astro";
+
+const animateOnScroll = `
+  document.addEventListener('DOMContentLoaded', () => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animate__animated', 'animate__fadeIn');
+          entry.target.style.visibility = 'visible';
+        }
+      });
+    });
+
+    document.querySelectorAll('.animate-on-scroll').forEach(el => {
+      observer.observe(el);
+    });
+  });
+`;
+
+// Lista de episodios del podcast
+const episodes = [
+    {
+        title: "Sostenibilidad ¿Qué es?",
+        description:
+            "En este episodio comenzaremos dando forma a este tema que nos engloba tanto en nuestro día a día. Sabemos lo que es la sostenibilidad y de que trata ?, pues aquí nuestro protagonistas nos hablarán de ello, que haces que no los estás escuchando ya?¡¡CORREEEEE!!",
+        spotifyLink:
+            "https://open.spotify.com/episode/218xJHgfhDBPAtr1qELCMa?si=FpuHWjR4TEegn0dDJLnO1w",
+        duration: "10:17",
+        date: "10 de diciembre de 2024",
+    },
+    {
+        title: "Criterios ASG",
+        description:
+            "🎙️ Bienvenidos a Arreglamos el Mundo, el podcast donde exploramos ideas, soluciones y reflexiones para construir un futuro más sostenible y justo. 🌎 En este episodio, nos sumergimos en los criterios ASG: ambiental, social y de gobernanza. ¿Qué significan? ¿Cómo están transformando el mundo de los negocios, las inversiones y nuestras vidas? Acompáñanos mientras desglosamos cómo estas herramientas nos acercan a un mundo mejor. ¡Comencemos a arreglar el mundo, un criterio a la vez! 🌱✨",
+        spotifyLink:
+            "https://open.spotify.com/episode/6dqCt8UAukJ8xD0lJnLZgp?si=llWNPManQueraMpaUhpMxQ",
+        duration: "14:11",
+        date: "10 de diciembre de 2024",
+    },
+    {
+        title: "Retos Ambientales",
+        description:
+            "🎙️ Bienvenidos a Arreglamos el Mundo, el espacio donde debatimos, reflexionamos y soñamos con un planeta más habitable para todos. 🌎 En este episodio, ponemos sobre la mesa los retos ambientales que enfrentamos hoy: desde el cambio climático hasta la pérdida de biodiversidad y la gestión sostenible de nuestros recursos. ¿Qué desafíos debemos superar y qué podemos hacer para marcar la diferencia? Es hora de analizar el panorama, cuestionar nuestras acciones y buscar soluciones que realmente arreglen el mundo. 🌱💡",
+        spotifyLink:
+            "https://open.spotify.com/episode/4g6wy4VLz9RPWu4Iu01cdX?si=NaVoDOoJTBKu54fkKQiOJQ",
+        duration: "10:03",
+        date: "10 de diciembre de 2024",
+    },
+    {
+        title: "Cómo Minimizar los Impactos Ambientales??",
+        description:
+            "🎙️ Bienvenidos a Arreglamos el Mundo, el podcast donde exploramos ideas para hacer del planeta un lugar mejor. 🌍✨ En este episodio, hablamos sobre cómo minimizar los impactos ambientales. Desde pequeñas acciones en nuestro día a día hasta grandes estrategias a nivel global, analizaremos qué podemos hacer para reducir nuestra huella ecológica y proteger los recursos naturales. ¡Acompáñanos mientras descubrimos juntos cómo marcar la diferencia y avanzar hacia un futuro más sostenible! 🌱💡",
+        spotifyLink:
+            "https://open.spotify.com/episode/2tWQ9PFQfo1qK55rop8h0s?si=9KTe45o9Rw-KBtIqsAlU4g",
+        duration: "9:02",
+        date: "10 de diciembre de 2024",
+    },
+    {
+        title: '¡¡Hemos vuelto!! Hablemos de: "Los 17 Puntos"',
+        description:
+            "En Agenda 2030: 17 Pasos hacia un Mundo Mejor, exploramos cada uno de los 17 Objetivos de Desarrollo Sostenible (ODS) propuestos por la ONU. Acompáñanos en este viaje donde analizamos los retos globales, las soluciones innovadoras y el impacto de estas metas en nuestra sociedad, economía y medioambiente. Con entrevistas a expertos, historias inspiradoras y casos reales, descubrirás cómo tú también puedes contribuir a un futuro más justo, sostenible e inclusivo. ¡Sintoniza y forma parte del cambio!",
+        spotifyLink:
+            "https://open.spotify.com/episode/6BluxrOOSnji7wkUt50nk3?si=VQf7Na7jQ4C7AnA4aY2leQ",
+        duration: "22:08",
+        date: "3 de marzo de 2025",
+    },
+    {
+        title: "Economía Verde y Circular",
+        description:
+            "En este episodio, exploramos la Economía Verde y Circular: ¿Cómo podemos producir y consumir de manera sostenible? Hablamos sobre innovación, reciclaje, energías renovables y nuevos modelos de negocio que buscan equilibrar desarrollo y medioambiente. ¡Únete a la conversación y descubramos juntos soluciones para un futuro más verde! 🌍♻️",
+        spotifyLink:
+            "https://open.spotify.com/episode/35E5Po2iiG5Fs2GsVfeCr7?si=THRxtld4QwCj1SmUvLT_TQ",
+        duration: "20:57",
+        date: "4 de marzo de 2025",
+    },
+];
+---
+
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="generator" content={Astro.generator} />
+        <script
+            async
+            src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
+        ></script>
+        <meta
+            name="google-site-verification"
+            content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk"
+        />
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag("js", new Date());
+            gtag("config", "G-1JT18RF3R4");
+        </script>
+        <meta
+            name="description"
+            content="Podcast Arreglamos el Mundo? - Podcast dinámico y entretenido
+                                que aborda los desafíos y soluciones relacionadas
+                                con la Sostenibilidad. "
+        />
+        <link rel="icon" type="image/png" href="/logo.png" />
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+            crossorigin="anonymous"
+        />
+        <link
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+            rel="stylesheet"
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+        />
+        <title>Arreglamos el Mundo? | Ecobjetivos</title>
+    </head>
+    <body>
+        <Navbar />
+
+        <header class="podcast-header text-white py-5 mt-5">
+            <div class="container text-center">
+                <h1
+                    class="display-3 mb-4 animate__animated animate__fadeInDown"
+                >
+                    ¿Arreglamos el Mundo?
+                </h1>
+                <p
+                    class="lead mb-4 animate__animated animate__fadeInUp animate__delay-1s"
+                >
+                    Podcast que aborda los desafíos sobre la Sostenibilidad.
+                </p>
+                <div
+                    class="d-flex justify-content-center gap-3 animate__animated animate__zoomIn animate__delay-1s"
+                >
+                    <a
+                        href="https://open.spotify.com/show/2snFzgOSnk1AVH4gx6HGG1?si=e8c250c65f534d72"
+                        target="_blank"
+                        class="btn btn-success btn-lg"
+                    >
+                        <i class="fab fa-spotify me-2"></i> Escuchar en Spotify
+                    </a>
+                    <!--                     <a
+                        href="https://podcasts.apple.com/podcast/example"
+                        target="_blank"
+                        class="btn btn-outline-light btn-lg"
+                    >
+                        <i class="fab fa-apple me-2"></i> Apple Podcasts
+                    </a> -->
+                </div>
+            </div>
+        </header>
+
+        <main>
+            <section class="py-5">
+                <div class="container">
+                    <div class="row align-items-center">
+                        <div class="col-lg-6 animate-on-scroll">
+                            <h2 class="display-5 mb-4">Sobre el Podcast</h2>
+                            <p class="lead">
+                                <strong>¿Arreglamos el Mundo?</strong> es un Podcast
+                                dinámico y entretenido que aborda los desafíos y
+                                soluciones relacionadas con la Sostenibilidad.
+                            </p>
+                            <p>
+                                Liderado por Rafa, el carismático presentador, y
+                                Vicente, el productor y segundo presentador,
+                                cada episodio se convierte en un espacio de
+                                debate y aprendizaje. Junto a ellos, los
+                                expertos invitados María Jesús y Rubén comparten
+                                conocimientos, experiencias y perspectivas para
+                                inspirar a los oyentes a tomar acción por un
+                                planeta más sostenible. Con conversaciones
+                                cercanas, datos relevantes y un toque de humor,
+                                este equipo busca, literalmente, arreglar el
+                                mundo. 🌍✨
+                            </p>
+                        </div>
+                        <div class="col-lg-6 animate-on-scroll">
+                            <iframe
+                                style="border-radius:12px"
+                                src="https://open.spotify.com/embed/show/2snFzgOSnk1AVH4gx6HGG1?utm_source=generator"
+                                width="100%"
+                                height="352"
+                                frameBorder="0"
+                                allowfullscreen=""
+                                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+                                loading="lazy"></iframe>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="py-5 bg-light">
+                <div class="container">
+                    <h2 class="text-center mb-5 animate-on-scroll">
+                        Episodios Destacados
+                    </h2>
+
+                    <div class="row g-4">
+                        {
+                            episodes.map((episode, index) => (
+                                <div class="col-md-6 animate-on-scroll">
+                                    <div class="card h-100 border-0 shadow-sm">
+                                        <div class="card-body">
+                                            <div class="d-flex justify-content-between mb-2">
+                                                <span
+                                                    class="badge bg-success"
+                                                    style="padding-top: 6px;"
+                                                >
+                                                    {episode.date}
+                                                </span>
+                                                <span class="text-muted">
+                                                    <i class="far fa-clock me-1" />
+                                                    {episode.duration}
+                                                </span>
+                                            </div>
+                                            <h3 class="h5 card-title">
+                                                {episode.title}
+                                            </h3>
+                                            <p class="card-text">
+                                                {episode.description}
+                                            </p>
+                                        </div>
+                                        <div class="card-footer bg-white border-0">
+                                            <a
+                                                href={episode.spotifyLink}
+                                                target="_blank"
+                                                class="btn btn-outline-success w-100"
+                                            >
+                                                <i class="fab fa-spotify me-2" />{" "}
+                                                Escuchar episodio
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        }
+                    </div>
+                </div>
+            </section>
+
+            <section class="py-5">
+                <div class="container">
+                    <div class="row">
+                        <div
+                            class="col-lg-8 mx-auto text-center animate-on-scroll"
+                        >
+                            <h2 class="mb-4">
+                                ¿Por qué escuchar Arreglamos el Mundo?
+                            </h2>
+                            <div class="row g-4 mt-3">
+                                <div class="col-md-12">
+                                    <div class="p-3 bg-light rounded-3 h-100">
+                                        <video controls class="w-100">
+                                            <source
+                                                src="/imgs/videoPodcast.mp4"
+                                                type="video/mp4"
+                                            />
+                                            Tu navegador no soporta la reproducción
+                                            de videos.
+                                        </video>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="py-5 bg-success text-white">
+                <div class="container text-center">
+                    <h2 class="mb-4 animate-on-scroll">
+                        ¿Tienes sugerencias para futuros episodios?
+                    </h2>
+                    <p class="lead mb-4 animate-on-scroll">
+                        Nos encantaría conocer qué temas te interesan
+                    </p>
+                    <a
+                        href="/contacto"
+                        class="btn btn-light btn-lg animate-on-scroll"
+                    >
+                        <i class="fas fa-envelope me-2"></i> Enviar sugerencia
+                    </a>
+                </div>
+            </section>
+        </main>
+
+        <Footer />
+
+        <script
+            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
+        ></script>
+        <script set:html={animateOnScroll} />
+    </body>
+</html>
+
+<style is:global>
+    @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
+    @import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    a {
+        font-family: "Inter Tight", sans-serif !important;
+        font-optical-sizing: auto;
+        font-weight: 400 !important;
+        font-style: normal;
+    }
+    .londrina-sketch-regular {
+        font-family: "Londrina Sketch", sans-serif !important;
+        font-weight: 400;
+        font-style: normal;
+    }
+</style>
+
+<style>
+    .podcast-header {
+        background-color: #1db954; /* Color verde de Spotify */
+        background-image: linear-gradient(45deg, #1db954, #219653);
+        padding: 6rem 0;
+        position: relative;
+    }
+
+    .podcast-header::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        /*background-image: url("/imgs/podcast-pattern.png");*/
+        opacity: 0.1;
+    }
+
+    .animate-on-scroll {
+        visibility: hidden;
+    }
+
+    .episode-card {
+        transition: transform 0.3s ease;
+    }
+
+    .episode-card:hover {
+        transform: translateY(-5px);
+    }
+
+    .object-fit-cover {
+        object-fit: cover;
+    }
+</style>
--- a/src/posts/EconomiaCIrcular.mdx
+++ b/src/posts/EconomiaCIrcular.mdx
@@ -5,7 +5,7 @@ fecha: '2025-03-04'
 descripcion: 'Explora cómo la economía circular contribuye a la sostenibilidad al reducir el desperdicio, optimizar los recursos y regenerar la naturaleza. Descubre sus principios y cómo puede transformar nuestro modelo de producción y consumo.'
 imagen: 'https://images.theconversation.com/files/275411/original/file-20190520-69182-1x6z8dg.png?ixlib=rb-4.1.0&q=45&auto=format&w=1000&fit=clip'
 hashtags: ['Economía Circular', 'Sostenibilidad', 'Recursos Naturales', 'Cambio Climático', 'Desarrollo Sostenible']
-relacionados: ['economía lineal', 'gestión de residuos', 'energías renovables']
+relacionados: ['EconomiaLineal', 'EconomiaVerde', 'ODS12','Explotacion-de-recursos']
 ---

 import ImagenMD from "../components/ImagenMD.astro"
--- a/src/posts/EconomiaLineal.mdx
+++ b/src/posts/EconomiaLineal.mdx
@@ -5,7 +5,7 @@ fecha: '2025-02-25'
 descripcion: 'Explora el impacto de la economía lineal en el medio ambiente y la sociedad. Conoce cómo este modelo de producción y consumo basado en "comprar, usar y tirar" está agotando los recursos y provocando graves consecuencias para el planeta.'
 imagen: 'https://cdn-icons-png.flaticon.com/512/4465/4465754.png'
 hashtags: ['Economía Lineal', 'Impacto Ambiental', 'Sostenibilidad', 'Desigualdad Social', 'Recursos Naturales']
-relacionados: ['sostenibilidad', 'economía circular', 'consumo responsable']
+relacionados: ['EconomiaCircular','EconomiaVerde','Explotacion-de-recursos']
 ---

 import ImagenMD from "../components/ImagenMD.astro"
--- a/src/posts/EconomiaVerde.mdx
+++ b/src/posts/EconomiaVerde.mdx
@@ -0,0 +1,78 @@
+---
+titulo: 'Economía Verde: Transformando el Futuro a Través de la Sostenibilidad'
+autor: 'Lucas Curiel'
+fecha: '01/03/2025'
+descripcion: 'Descubre cómo la economía verde busca equilibrar el desarrollo económico, la justicia social y la protección del medio ambiente, asegurando un futuro más sostenible. ¡Es hora de cambiar el modelo económico!'
+imagen: 'https://relevocontigo.com/wp-content/uploads/2019/02/que-es-economia-verde.jpg.webp'
+hashtags: ['Economía Verde', 'Sostenibilidad', 'Eficiencia de Recursos', 'Desarrollo Sostenible', 'ODS 12']
+relacionados: ['ODS12','Explotacion-de-recursos','Retos-ambientales','EconomiaCircular']
+---
+
+import ImagenMD from "../components/ImagenMD.astro"
+
+## Introducción: ¿Qué es la Economía Verde?
+
+La **economía verde** es un modelo económico que promueve el bienestar humano y social a la vez que reduce los riesgos ambientales y la escasez ecológica. Este enfoque busca alcanzar un equilibrio entre el desarrollo económico, la equidad social y la protección del medio ambiente. La economía verde no solo se basa en bajas emisiones de carbono y el uso eficiente de los recursos, sino que también fomenta la **inclusión social**, la **justicia ambiental** y la **conservación de la biodiversidad**.
+
+En lugar de centrarse únicamente en el crecimiento económico medido por indicadores como el PIB, la economía verde prioriza el **bienestar de las personas** y el **respeto por los límites planetarios**.
+
+<ImagenMD alt="Economía Verde" src="https://ecoembesempleo.es/web/app/uploads/2023/11/post-empleo-economia-verde.jpg"/>
+
+## Principales Características de la Economía Verde
+
+### 1. **Uso Eficiente de los Recursos Naturales**
+La economía verde busca maximizar la eficiencia en el uso de los recursos naturales. Esto incluye el fomento de energías renovables, la optimización de los procesos de producción y el reciclaje de materiales, minimizando el desperdicio.
+
+### 2. **Bajas Emisiones de Carbono**
+Este modelo promueve la reducción de las emisiones de gases de efecto invernadero, crucial para mitigar el cambio climático. La transición hacia fuentes de energía renovable, como la solar o eólica, es fundamental para reducir la huella de carbono.
+
+### 3. **Justicia Social y Económica**
+La economía verde fomenta la **equidad** social, asegurando que las oportunidades económicas sean accesibles para todos, sin excluir a los grupos vulnerables. Promueve la creación de **empleos verdes** y **condiciones laborales dignas**, buscando una distribución justa de los beneficios y los costos.
+
+### 4. **Protección de los Ecosistemas**
+La economía verde también pone énfasis en **proteger y restaurar** los ecosistemas, asegurando la conservación de la biodiversidad y el uso sostenible de los recursos naturales.
+
+<ImagenMD alt="Reciclaje y Energía Verde" src="https://www.bienestar.gob.mx/sibien/images/desarrollo/Reciclaje-04.png"/>
+
+## Beneficios de la Economía Verde
+
+### 1. **Mejorar el Bienestar Humano**
+Una economía verde promueve el **bienestar** de las personas no solo a través de la generación de empleo, sino también mediante el acceso a una mejor calidad de vida, con un entorno más limpio y saludable.
+
+### 2. **Reducción de la Desigualdad Social**
+La economía verde busca **inclusión social**, proporcionando oportunidades a las comunidades más desfavorecidas y fomentando la participación activa en la toma de decisiones.
+
+### 3. **Desarrollo Sostenible**
+Al promover la eficiencia en el uso de los recursos y la reducción de la contaminación, la economía verde es fundamental para alcanzar un **desarrollo sostenible** que respete los límites de la Tierra.
+
+### 4. **Impulso a la Innovación**
+Este modelo económico fomenta la **innovación tecnológica**, como el desarrollo de nuevos métodos de producción, procesos sostenibles y la mejora de la infraestructura verde.
+
+<ImagenMD alt="Energía Limpia y Economía Verde" src="https://www.loecheslineaverde.es/lv/consejos-ambientales/generacion-abusiva-de-nuestros-residuos/img/economia-circular.png"/>
+
+## Economía Verde en Acción: Casos de Éxito
+
+**Unilever**, por ejemplo, ha adoptado un modelo de economía verde al incluir el uso de energías renovables en sus fábricas y promover el reciclaje de sus envases. Esto no solo reduce las emisiones de carbono, sino que también fomenta la sostenibilidad a largo plazo.
+
+Otra compañía que implementa la economía verde es **Patagonia**, que no solo promueve la **reparación** y reutilización de sus productos, sino que también apoya proyectos de restauración ecológica, demostrando que es posible generar beneficios económicos mientras se protege el medio ambiente.
+
+<ImagenMD alt="Economía Verde en Acción" src="https://www.cantabriaeconomica.com/wp-content/uploads/2021/06/1591706764_711133_1591730353_noticia_normal.jpg"/>
+
+## El Camino hacia la Implementación de la Economía Verde
+
+Para que la economía verde sea una realidad global, es necesario impulsar políticas públicas que fomenten la sostenibilidad, como:
+
+- **Incentivar la eficiencia energética** y el uso de energías renovables.
+- **Impulsar el reciclaje** y la gestión responsable de los residuos.
+- **Promover la sostenibilidad empresarial** mediante el fomento de buenas prácticas ambientales en todas las industrias.
+- **Educar y sensibilizar** a la población para adoptar hábitos de consumo responsables.
+
+<ImagenMD alt="Futuro Sostenible y Verde" src="https://www.thecircularlab.com/web/app/uploads/2023/06/AdobeStock_437071815-copia.jpg"/>
+
+## Conclusión: Un Futuro Verde es Posible
+
+La economía verde es un paso necesario para alcanzar un futuro más **justo**, **sostenible** y **próspero** para todos. Basada en principios como la eficiencia de los recursos, la justicia social y la protección del medio ambiente, la transición hacia este modelo será crucial para cumplir con los Objetivos de Desarrollo Sostenible, especialmente el **ODS 12**, que promueve el consumo y la producción responsables.
+
+Es hora de tomar medidas y sumarse a esta transformación. La economía verde no solo es un modelo económico, sino una filosofía para vivir de manera más consciente y respetuosa con el planeta.
+
+🌍♻️ **¡Actuemos juntos por un futuro verde!**
--- a/src/posts/stakeholders.mdx
+++ b/src/posts/stakeholders.mdx
@@ -53,7 +53,7 @@ Los acreedores, como bancos y otras instituciones financieras, otorgan préstamo
 ### 7. Sindicatos

 Los sindicatos representan a los trabajadores y buscan mejorar sus condiciones, incluyendo salarios, beneficios y condiciones laborales. Las empresas deben dialogar con los sindicatos y tomar en cuenta sus demandas para mantener relaciones laborales armoniosas y sostenibles.
-<ImagenMD alt="sindicato" src="https://www.falange-autentica.es/images/stories/contenido/2018/sindicalismo.jpg"/>
+<ImagenMD alt="sindicato" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9dUFEtgBNPRvmyDs4vttKzH_0E5wUNd8Lx9takqO-aeWdmlLZFWp9auW52maXvDxGqn6TSR0Ozte0DZy2vlvugU6dRoZGiwmTjn4hUVj5INM4jHA-_jCrab3JHnxH8OvCib9ca4gacnGr/s1600/Dibujo26.JPG"/>

 ### 8. Comunidades Locales

@@ -63,7 +63,7 @@ Las comunidades locales están compuestas por las personas que viven en el área
 ### 9. Medios de Comunicación

 Los medios de comunicación son importantes transmisores de las políticas y logros ASG de las empresas. Es fundamental que las empresas vean a los medios como aliados en la difusión de su compromiso con el desarrollo sostenible y la responsabilidad social.
-<ImagenMD alt="periodista" src="https://media.istockphoto.com/id/881468094/es/vector/periodistas-camar%C3%B3grafo-y-reportero-operador-quita-noticias-ilustraci%C3%B3n-de-vector-de-dise%C3%B1o.jpg?s=612x612&w=0&k=20&c=JVhmJ1SRb26aWuLnEEfUGmz4f2ChDAxNkOa7KUR_ypY="/>
+<ImagenMD alt="periodista" src="https://www.nosequeestudiar.net/site/assets/files/2390/periodista-en-su-trabajo.400x300.jpg"/>

 ### 10. Instituciones Políticas

--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,78 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+
+
+@plugin "daisyui/theme" {
+    name: "forest";
+    default: false;
+    prefersdark: true;
+    color-scheme: "dark";
+    --color-base-100: oklch(20.84% 0.008 17.911);
+    --color-base-200: oklch(18.522% 0.007 17.911);
+    --color-base-300: oklch(16.203% 0.007 17.911);
+    --color-base-content: oklch(83.768% 0.001 17.911);
+    --color-primary: oklch(68.628% 0.185 148.958);
+    --color-primary-content: oklch(0% 0 0);
+    --color-secondary: oklch(69.776% 0.135 168.327);
+    --color-secondary-content: oklch(13.955% 0.027 168.327);
+    --color-accent: oklch(70.628% 0.119 185.713);
+    --color-accent-content: oklch(14.125% 0.023 185.713);
+    --color-neutral: oklch(30.698% 0.039 171.364);
+    --color-neutral-content: oklch(86.139% 0.007 171.364);
+    --color-info: oklch(72.06% 0.191 231.6);
+    --color-info-content: oklch(0% 0 0);
+    --color-success: oklch(64.8% 0.15 160);
+    --color-success-content: oklch(0% 0 0);
+    --color-warning: oklch(84.71% 0.199 83.87);
+    --color-warning-content: oklch(0% 0 0);
+    --color-error: oklch(71.76% 0.221 22.18);
+    --color-error-content: oklch(0% 0 0);
+    --radius-selector: 1rem;
+    --radius-field: 2rem;
+    --radius-box: 1rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 0;
+    --noise: 0;
+  }
+
+
+  @plugin "daisyui/theme" {
+    name: "lemonade";
+    default: true;
+    prefersdark: false;
+    color-scheme: "light";
+    --color-base-100: oklch(98% 0 0);
+    --color-base-200: oklch(97% 0 0);
+    --color-base-300: oklch(92% 0 0);
+    --color-base-content: oklch(20% 0 0);
+    --color-primary: oklch(62% 0.194 149.214);
+    --color-primary-content: oklch(98% 0.018 155.826);
+    --color-secondary: oklch(54% 0.281 293.009);
+    --color-secondary-content: oklch(96% 0.016 293.756);
+    --color-accent: oklch(60% 0.126 221.723);
+    --color-accent-content: oklch(98% 0.019 200.873);
+    --color-neutral: oklch(43% 0 0);
+    --color-neutral-content: oklch(98% 0 0);
+    --color-info: oklch(70% 0.165 254.624);
+    --color-info-content: oklch(28% 0.091 267.935);
+    --color-success: oklch(79% 0.209 151.711);
+    --color-success-content: oklch(26% 0.065 152.934);
+    --color-warning: oklch(85% 0.199 91.936);
+    --color-warning-content: oklch(28% 0.066 53.813);
+    --color-error: oklch(71% 0.194 13.428);
+    --color-error-content: oklch(27% 0.105 12.094);
+    --radius-selector: 1rem;
+    --radius-field: 2rem;
+    --radius-box: 0.5rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 0;
+    --noise: 1;
+  }
+  
+  
+
Author	SHA1	Message	Date
h4ckx0r	e1c6cf61cb	Arreglo posts horizontales	2025-03-25 09:47:24 +01:00
h4ckx0r	c16fd89953	Actualización de librerias	2025-03-25 09:45:11 +01:00
h4ckx0r	3c473f1968	Remove unused Image import and format indentation	2025-03-13 08:54:01 +01:00
h4ckx0r	6ecd7a18fb	Inicio de desarrollo de la rama	2025-03-11 10:37:59 +01:00
h4ckx0r	36a7d16d2b	Arreglo url	2025-03-11 09:27:28 +01:00
Lucas Curiel	c16f3f719d	cambio en las referencias a los post	2025-03-11 09:21:57 +01:00
Lucas Curiel	553bcee444	cambio de titulo	2025-03-11 09:01:16 +01:00
h4ckx0r	caa5958b28	Nuevo proyecto: Podcast	2025-03-10 21:13:34 +01:00
h4ckx0r	c4f00f8725	Nueva sección de proyectos	2025-03-10 21:13:21 +01:00
h4ckx0r	1e6e23d62a	Optimización de importaciones de Bootstrap	2025-03-10 21:12:49 +01:00
h4ckx0r	7e0d6d5a50	Optimización del código	2025-03-10 21:12:02 +01:00
h4ckx0r	4e8d2a379c	Formulario de contacto	2025-03-10 21:11:21 +01:00
Lucas Curiel	a05967d8ec	teminados los post sobre las distintas economias	2025-03-09 23:22:10 +01:00
Lucas Curiel	769f519dae	movimiento	2025-03-06 20:05:54 +01:00
Lucas Curiel	74e54bffec	Merge branch 'main' of https://git.h4ckdata.es/h4ckx0r/webSostenible	2025-03-06 20:05:03 +01:00
Lucas Curiel	f1d26440f3	economia verde	2025-03-06 20:05:00 +01:00
h4ckx0r	ff1f0352a3	Nueva página en desarrollo hablando sobre el podcast	2025-03-05 23:31:06 +01:00
h4ckx0r	66f357cc5a	cambio de fecha en el footer	2025-03-05 23:30:37 +01:00
h4ckx0r	a178e8e885	Upload actualizado	2025-03-04 09:38:02 +01:00
José Antonio Marín	22a4c9460c	Merge branch 'main' of https://git.h4ckdata.es/h4ckx0r/webSostenible	2025-03-04 09:34:48 +01:00
José Antonio Marín	794e0fcc68	arreglo 2 skateholders	2025-03-04 09:34:45 +01:00
José Antonio Marín	32c0ece1f4	arreglo 1 skateholders	2025-03-04 09:32:43 +01:00