diff --git a/huella.html b/huella.html
index 7a0ab3e..59b88d8 100644
--- a/huella.html
+++ b/huella.html
@@ -203,32 +203,44 @@
                 </p>
               </div>
 
-              <!-- Compromiso 2: Tipografías de Google Fonts -->
-              <div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
+              <!-- Compromiso 2: Tipografías e Iconos Autoalojados (Self-Hosted) -->
+              <div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
                 <h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
-                  <span class="material-symbols-outlined text-amber-500">warning</span>
-                  Google Fonts externas vs. Fuentes del Sistema
+                  <span class="material-symbols-outlined text-emerald-500">verified</span>
+                  Tipografías e Iconos 100% Autoalojados (Zero Third-Party Requests)
                 </h3>
                 <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
-                  <strong>El problema:</strong> Importamos <em>Space Grotesk</em> y <em>Instrument Serif</em> externamente. Esto requiere establecer una conexión con los servidores de Google y descargar los archivos tipográficos.
+                  <strong>La optimización:</strong> Hemos migrado tanto las fuentes (<em>Space Grotesk</em> e <em>Instrument Serif</em>) como la iconografía (<em>Material Symbols Outlined</em>) a nuestra propia infraestructura (`/fonts`).
                 </p>
                 <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
-                  <strong>El compromiso:</strong> Las fuentes del sistema son la opción más limpia energéticamente. Sin embargo, para un portfolio personal, la tipografía es un pilar estético de la identidad visual. Optamos por descargar solo los pesos indispensables y compensamos el consumo eliminando por completo cualquier animación pesada de JavaScript o imágenes sin optimizar.
+                  <strong>El impacto:</strong> Eliminamos por completo el rastreo y las llamadas DNS externas a Google Fonts, garantizando soberanía de datos, estricto cumplimiento del RGPD y menor latencia en el renderizado inicial.
                 </p>
               </div>
 
-              <!-- Compromiso 3: Material Symbols (Iconos) -->
-              <div class="p-6 bg-white/20 dark:bg-white/5 border border-white/10 rounded-2xl">
-                <h3 class="font-bold text-lg dark:text-white mb-2 flex items-center gap-2">
-                  <span class="material-symbols-outlined text-amber-500">warning</span>
-                  Librería de Iconos en la Nube
-                </h3>
-                <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-3">
-                  <strong>El problema:</strong> Cargamos los iconos Material Symbols a través del CDN de Google en lugar de incrustar manualmente solo los SVGs que utilizamos.
-                </p>
-                <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
-                  <strong>El compromiso:</strong> Incrustar SVGs en línea es más óptimo, pero dificulta la legibilidad del código HTML y hace que el mantenimiento del portfolio sea más complejo para cambios rápidos. Usar el CDN proporciona una API simple y limpia para el mantenimiento cotidiano.
-                </p>
+              <!-- Certificación Green Software Foundation -->
+              <div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+                <div>
+                  <div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">
+                    <span class="material-symbols-outlined text-sm">workspace_premium</span>
+                    Acreditación Oficial Green Software Foundation
+                  </div>
+                  <h3 class="font-bold text-lg dark:text-white mb-1">
+                    Green Software Practitioner
+                  </h3>
+                  <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
+                    Credential ID: <code>b80fdaac-96a2-48e1-9170-7a84c0297295</code> — Certificación en patrones de diseño sostenible y reducción de emisiones de software.
+                  </p>
+                </div>
+                <a
+                  href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded-xl text-xs font-bold hover:bg-emerald-700 transition-colors shrink-0 shadow-md shadow-emerald-600/20"
+                >
+                  <span class="material-symbols-outlined text-sm">verified</span>
+                  Verificar Credencial
+                  <span class="material-symbols-outlined text-xs">open_in_new</span>
+                </a>
               </div>
             </div>
           </section>
diff --git a/index.html b/index.html
index 9a9c33e..79fbabf 100644
--- a/index.html
+++ b/index.html
@@ -135,12 +135,18 @@
           <h1
             class="text-4xl md:text-6xl font-serif italic leading-[1.2] text-slate-900 dark:text-white mb-6 max-w-4xl font-light"
           >
-            Cuando necesites utilizar la tecnología para generar impacto social de forma responsable, habla <span class="text-primary not-italic font-display font-black tracking-tighter">conmigo</span>.
+            Cuando necesites utilizar la tecnología para generar impacto social
+            de forma responsable, habla
+            <span
+              class="text-primary not-italic font-display font-black tracking-tighter"
+              >conmigo</span
+            >.
           </h1>
           <p
             class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-12 leading-relaxed"
           >
-            Desarrolladora front-end especializada en tecnología ligera, accesible y soberana. Con base en Ibiza.
+            Desarrolladora front-end especializada en tecnología ligera,
+            accesible y soberana. Con base en Ibiza.
           </p>
           <div class="flex flex-wrap justify-center gap-4">
             <a
@@ -184,96 +190,192 @@
               </h2>
               <div class="h-1 w-20 bg-primary mx-auto mb-10 rounded-full"></div>
             </div>
-            
+
             <div class="grid md:grid-cols-2 gap-12 mb-16">
               <div class="p-8 glass rounded-3xl border border-white/20">
                 <div class="flex items-center gap-3 mb-4">
-                  <span class="material-symbols-outlined text-primary text-3xl">target</span>
-                  <h3 class="text-2xl font-serif italic font-bold dark:text-white">Propósito</h3>
+                  <span class="material-symbols-outlined text-primary text-3xl"
+                    >target</span
+                  >
+                  <h3
+                    class="text-2xl font-serif italic font-bold dark:text-white"
+                  >
+                    Propósito
+                  </h3>
                 </div>
                 <p class="text-slate-700 dark:text-slate-300 leading-relaxed">
-                  Democratizar y humanizar la tecnología, poniéndola al servicio de las personas y del planeta, y no al revés. Busco crear herramientas que empoderen a las comunidades en lugar de concentrar el poder.
+                  Democratizar y humanizar la tecnología, poniéndola al servicio
+                  de las personas y del planeta, y no al revés. Busco crear
+                  herramientas que empoderen a las comunidades en lugar de
+                  concentrar el poder.
                 </p>
               </div>
               <div class="p-8 glass rounded-3xl border border-white/20">
                 <div class="flex items-center gap-3 mb-4">
-                  <span class="material-symbols-outlined text-primary text-3xl">explore</span>
-                  <h3 class="text-2xl font-serif italic font-bold dark:text-white">Misión</h3>
+                  <span class="material-symbols-outlined text-primary text-3xl"
+                    >explore</span
+                  >
+                  <h3
+                    class="text-2xl font-serif italic font-bold dark:text-white"
+                  >
+                    Misión
+                  </h3>
                 </div>
                 <p class="text-slate-700 dark:text-slate-300 leading-relaxed">
-                  Desarrollar soluciones digitales eficientes, accesibles y respetuosas con los derechos digitales, demostrando que otra tecnología es posible desde el compromiso local y el impacto global.
+                  Desarrollar soluciones digitales eficientes, accesibles y
+                  respetuosas con los derechos digitales, demostrando que otra
+                  tecnología es posible desde el compromiso local y el impacto
+                  global.
                 </p>
               </div>
             </div>
 
             <div class="text-center mb-10">
-              <h3 class="text-2xl font-serif italic text-slate-800 dark:text-slate-200">Principios rectores</h3>
+              <h3
+                class="text-2xl font-serif italic text-slate-800 dark:text-slate-200"
+              >
+                Principios rectores
+              </h3>
             </div>
 
             <div class="grid md:grid-cols-3 gap-6">
               <!-- Principio 1: Sostenibilidad -->
-              <div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
-                <div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
-                  <span class="material-symbols-outlined">eco</span>
+              <div
+                class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full justify-between"
+              >
+                <div>
+                  <div
+                    class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
+                  >
+                    <span class="material-symbols-outlined">eco</span>
+                  </div>
+                  <h4 class="font-bold text-lg mb-2 dark:text-white">
+                    Sostenibilidad (Green Software)
+                  </h4>
+                  <p
+                    class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
+                  >
+                    Optimizar el consumo de recursos, minimizando la transferencia
+                    de datos y la huella de carbono de las aplicaciones web que
+                    desarrollo.
+                  </p>
                 </div>
-                <h4 class="font-bold text-lg mb-2 dark:text-white">Sostenibilidad (Green Software)</h4>
-                <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                  Optimizar el consumo de recursos, minimizando la transferencia de datos y la huella de carbono de las aplicaciones web que desarrollo.
-                </p>
+                <a
+                  href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
+                >
+                  <span class="material-symbols-outlined text-base">verified</span>
+                  <span>Green Software Practitioner</span>
+                  <span class="material-symbols-outlined text-xs ml-auto">open_in_new</span>
+                </a>
               </div>
 
               <!-- Principio 2: Software Libre -->
-              <div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
-                <div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
+              <div
+                class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
+              >
+                <div
+                  class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
+                >
                   <span class="material-symbols-outlined">folder_open</span>
                 </div>
-                <h4 class="font-bold text-lg mb-2 dark:text-white">Software Libre</h4>
-                <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                  Apoyar y contribuir al código abierto como bien público digital que fomenta la soberanía tecnológica y el aprendizaje compartido.
+                <h4 class="font-bold text-lg mb-2 dark:text-white">
+                  Software Libre
+                </h4>
+                <p
+                  class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                >
+                  Apoyar y contribuir al código abierto como bien público
+                  digital que fomenta la soberanía tecnológica y el aprendizaje
+                  compartido.
                 </p>
               </div>
 
               <!-- Principio 3: Bien Común -->
-              <div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
-                <div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
+              <div
+                class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
+              >
+                <div
+                  class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
+                >
                   <span class="material-symbols-outlined">groups</span>
                 </div>
-                <h4 class="font-bold text-lg mb-2 dark:text-white">Bien Común</h4>
-                <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                  Priorizar proyectos y herramientas que generen un impacto social positivo, medible y orientado a resolver necesidades reales de la sociedad.
+                <h4 class="font-bold text-lg mb-2 dark:text-white">
+                  Bien Común
+                </h4>
+                <p
+                  class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                >
+                  Priorizar proyectos y herramientas que generen un impacto
+                  social positivo, medible y orientado a resolver necesidades
+                  reales de la sociedad.
                 </p>
               </div>
 
               <!-- Principio 4: Accesibilidad -->
-              <div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
-                <div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
-                  <span class="material-symbols-outlined">accessibility_new</span>
+              <div
+                class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
+              >
+                <div
+                  class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
+                >
+                  <span class="material-symbols-outlined"
+                    >accessibility_new</span
+                  >
                 </div>
-                <h4 class="font-bold text-lg mb-2 dark:text-white">Accesibilidad (a11y)</h4>
-                <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                  Diseñar interfaces web inclusivas para que todo el mundo pueda acceder a la información sin barreras físicas, cognitivas o tecnológicas.
+                <h4 class="font-bold text-lg mb-2 dark:text-white">
+                  Accesibilidad (a11y)
+                </h4>
+                <p
+                  class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                >
+                  Diseñar interfaces web inclusivas para que todo el mundo pueda
+                  acceder a la información sin barreras físicas, cognitivas o
+                  tecnológicas.
                 </p>
               </div>
 
               <!-- Principio 5: Privacidad -->
-              <div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
-                <div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
+              <div
+                class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
+              >
+                <div
+                  class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
+                >
                   <span class="material-symbols-outlined">shield</span>
                 </div>
-                <h4 class="font-bold text-lg mb-2 dark:text-white">Privacidad</h4>
-                <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                  Respetar la soberanía de los datos personales, usando analíticas éticas y cookieless, protegiendo a los usuarios del rastreo corporativo.
+                <h4 class="font-bold text-lg mb-2 dark:text-white">
+                  Privacidad
+                </h4>
+                <p
+                  class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                >
+                  Respetar la soberanía de los datos personales, usando
+                  analíticas éticas y cookieless, protegiendo a los usuarios del
+                  rastreo corporativo.
                 </p>
               </div>
 
               <!-- Principio 6: IA Responsable -->
-              <div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full">
-                <div class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4">
+              <div
+                class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
+              >
+                <div
+                  class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
+                >
                   <span class="material-symbols-outlined">psychology</span>
                 </div>
-                <h4 class="font-bold text-lg mb-2 dark:text-white">IA Responsable</h4>
-                <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                  Utilizar modelos de IA de forma ética y transparente, priorizando la ejecución local y velando porque sirvan de apoyo a la agencia humana.
+                <h4 class="font-bold text-lg mb-2 dark:text-white">
+                  IA Responsable
+                </h4>
+                <p
+                  class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                >
+                  Utilizar modelos de IA de forma ética y transparente,
+                  priorizando la ejecución local y velando porque sirvan de
+                  apoyo a la agencia humana.
                 </p>
               </div>
             </div>
@@ -290,12 +392,15 @@
                 Mi laboratorio
               </h2>
               <p class="text-slate-500 dark:text-slate-400">
-                Un espacio de experimentación técnica, herramientas reales e infraestructura digital soberana.
+                Un espacio de experimentación técnica, herramientas reales e
+                infraestructura digital soberana.
               </p>
             </div>
 
             <!-- Tab Buttons Container -->
-            <div class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8">
+            <div
+              class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
+            >
               <button
                 class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
                 data-tab="infraestructura"
@@ -324,55 +429,104 @@
 
             <!-- Tab Contents -->
             <div id="tab-contents">
-              
               <!-- Tab 1: Infraestructura -->
               <div id="tab-infraestructura" class="tab-pane block">
                 <div class="grid md:grid-cols-2 gap-8">
                   <div class="space-y-6">
-                    <h3 class="text-2xl font-serif italic dark:text-white">Qué uso y por qué</h3>
-                    <p class="text-slate-700 dark:text-slate-300 leading-relaxed">
-                      La soberanía tecnológica empieza en los cimientos. He decidido gestionar mi propia infraestructura para asegurar el control de mis datos, la privacidad de mis proyectos y reducir la dependencia de los gigantes de la nube.
+                    <h3 class="text-2xl font-serif italic dark:text-white">
+                      Qué uso y por qué
+                    </h3>
+                    <p
+                      class="text-slate-700 dark:text-slate-300 leading-relaxed"
+                    >
+                      La soberanía tecnológica empieza en los cimientos. He
+                      decidido gestionar mi propia infraestructura para asegurar
+                      el control de mis datos, la privacidad de mis proyectos y
+                      reducir la dependencia de los gigantes de la nube.
                     </p>
-                    <div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl">
-                      <div class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2">
+                    <div
+                      class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl"
+                    >
+                      <div
+                        class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
+                      >
                         <span class="material-symbols-outlined">bolt</span>
                         <span>Compromiso Verde</span>
                       </div>
                       <p class="text-sm text-slate-600 dark:text-slate-400">
-                        Nuestra infraestructura está alojada en el centro de datos de Hetzner en Helsinki, alimentado por energía 100% libre de carbono procedente de fuentes eólicas e hidráulicas.
+                        Mi infraestructura está alojada en el centro de datos de
+                        Hetzner en Helsinki, alimentado por energía 100% libre
+                        de carbono procedente de fuentes eólicas e hidráulicas.
                       </p>
                     </div>
                   </div>
                   <div class="grid grid-cols-2 gap-4">
                     <div class="p-6 glass rounded-2xl border border-white/10">
-                      <span class="material-symbols-outlined text-primary text-3xl mb-3 block">dns</span>
-                      <h4 class="font-bold dark:text-white">Hetzner Helsinki</h4>
-                      <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Servidores dedicados y VPS alimentados por energía verde en Finlandia.</p>
+                      <span
+                        class="material-symbols-outlined text-primary text-3xl mb-3 block"
+                        >dns</span
+                      >
+                      <h4 class="font-bold dark:text-white">
+                        Hetzner Helsinki
+                      </h4>
+                      <p
+                        class="text-xs text-slate-500 dark:text-slate-400 mt-1"
+                      >
+                        Servidores dedicados y VPS alimentados por energía verde
+                        en Finlandia.
+                      </p>
                     </div>
                     <div class="p-6 glass rounded-2xl border border-white/10">
-                      <span class="material-symbols-outlined text-primary text-3xl mb-3 block">deployed_code</span>
+                      <span
+                        class="material-symbols-outlined text-primary text-3xl mb-3 block"
+                        >deployed_code</span
+                      >
                       <h4 class="font-bold dark:text-white">Coolify</h4>
-                      <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Alternativa self-hosted y de código abierto a Vercel/Heroku.</p>
+                      <p
+                        class="text-xs text-slate-500 dark:text-slate-400 mt-1"
+                      >
+                        Alternativa self-hosted y de código abierto a
+                        Vercel/Heroku.
+                      </p>
                     </div>
                     <div class="p-6 glass rounded-2xl border border-white/10">
-                      <span class="material-symbols-outlined text-primary text-3xl mb-3 block">git_gesture</span>
+                      <span
+                        class="material-symbols-outlined text-primary text-3xl mb-3 block"
+                        >git_gesture</span
+                      >
                       <h4 class="font-bold dark:text-white">Forgejo</h4>
-                      <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Servicio Git ligero autohospedado para control soberano de código.</p>
+                      <p
+                        class="text-xs text-slate-500 dark:text-slate-400 mt-1"
+                      >
+                        Servicio Git ligero autohospedado para control soberano
+                        de código.
+                      </p>
                     </div>
                     <div class="p-6 glass rounded-2xl border border-white/10">
-                      <span class="material-symbols-outlined text-primary text-3xl mb-3 block">hub</span>
+                      <span
+                        class="material-symbols-outlined text-primary text-3xl mb-3 block"
+                        >hub</span
+                      >
                       <h4 class="font-bold dark:text-white">n8n</h4>
-                      <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Automatización de flujos de trabajo self-hosted libre de ataduras de SaaS.</p>
+                      <p
+                        class="text-xs text-slate-500 dark:text-slate-400 mt-1"
+                      >
+                        Automatización de flujos de trabajo self-hosted libre de
+                        ataduras de SaaS.
+                      </p>
                     </div>
                     <div class="p-6 glass rounded-2xl border border-white/10">
-                      <span class="material-symbols-outlined text-primary text-3xl mb-3 block">monitoring</span>
+                      <span
+                        class="material-symbols-outlined text-primary text-3xl mb-3 block"
+                        >monitoring</span
+                      >
                       <h4 class="font-bold dark:text-white">Umami</h4>
-                      <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Analítica web ética, respetuosa con la privacidad y cookieless.</p>
-                    </div>
-                    <div class="p-6 glass rounded-2xl border border-white/10">
-                      <span class="material-symbols-outlined text-primary text-3xl mb-3 block">screen_record</span>
-                      <h4 class="font-bold dark:text-white">Cap</h4>
-                      <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Herramienta de grabación de pantalla de código libre en nuestro nodo.</p>
+                      <p
+                        class="text-xs text-slate-500 dark:text-slate-400 mt-1"
+                      >
+                        Analítica web ética, respetuosa con la privacidad y
+                        cookieless.
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -381,34 +535,76 @@
               <!-- Tab 2: Experimentos -->
               <div id="tab-experimentos" class="tab-pane hidden">
                 <div class="grid md:grid-cols-3 gap-6">
-                  <div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all">
+                  <div
+                    class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
+                  >
                     <div class="flex items-center justify-between mb-4">
-                      <span class="material-symbols-outlined text-primary text-3xl">nest_eco_leaf</span>
-                      <span class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full">Activo</span>
+                      <span
+                        class="material-symbols-outlined text-primary text-3xl"
+                        >nest_eco_leaf</span
+                      >
+                      <span
+                        class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
+                        >Activo</span
+                      >
                     </div>
-                    <h4 class="font-bold dark:text-white mb-2">Medición de Green Software</h4>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                      Comparación empírica del consumo de CPU y red entre arquitecturas SSR (Astro/Next.js) y páginas HTML estáticas optimizadas.
+                    <h4 class="font-bold dark:text-white mb-2">
+                      Medición de Green Software
+                    </h4>
+                    <p
+                      class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                    >
+                      Comparación empírica del consumo de CPU y red entre
+                      arquitecturas SSR (Astro/Next.js) y páginas HTML estáticas
+                      optimizadas.
                     </p>
                   </div>
-                  <div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all">
+                  <div
+                    class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
+                  >
                     <div class="flex items-center justify-between mb-4">
-                      <span class="material-symbols-outlined text-primary text-3xl">memory</span>
-                      <span class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full">Activo</span>
+                      <span
+                        class="material-symbols-outlined text-primary text-3xl"
+                        >memory</span
+                      >
+                      <span
+                        class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
+                        >Activo</span
+                      >
                     </div>
-                    <h4 class="font-bold dark:text-white mb-2">IA Local en Raspberry Pi</h4>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                      Ejecución de modelos pequeños como Llama 3.2 1B y Phi-3 con Ollama en local para tareas de clasificación y etiquetado con cero coste de API y privacidad garantizada.
+                    <h4 class="font-bold dark:text-white mb-2">
+                      IA Local en Raspberry Pi
+                    </h4>
+                    <p
+                      class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                    >
+                      Ejecución de modelos pequeños como Llama 3.2 1B y Phi-3
+                      con Ollama en local para tareas de clasificación y
+                      etiquetado con cero coste de API y privacidad garantizada.
                     </p>
                   </div>
-                  <div class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all">
+                  <div
+                    class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
+                  >
                     <div class="flex items-center justify-between mb-4">
-                      <span class="material-symbols-outlined text-primary text-3xl">visibility</span>
-                      <span class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full">Pendiente</span>
+                      <span
+                        class="material-symbols-outlined text-primary text-3xl"
+                        >visibility</span
+                      >
+                      <span
+                        class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full"
+                        >Pendiente</span
+                      >
                     </div>
-                    <h4 class="font-bold dark:text-white mb-2">Estrés de Lectores de Pantalla</h4>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                      Auditoría manual de interfaces complejas con lectores NVDA y VoiceOver para validar flujos interactivos dinámicos y estados de ARIA en vivo.
+                    <h4 class="font-bold dark:text-white mb-2">
+                      Estrés de Lectores de Pantalla
+                    </h4>
+                    <p
+                      class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                    >
+                      Auditoría manual de interfaces complejas con lectores NVDA
+                      y VoiceOver para validar flujos interactivos dinámicos y
+                      estados de ARIA en vivo.
                     </p>
                   </div>
                 </div>
@@ -418,111 +614,217 @@
               <div id="tab-proyectos" class="tab-pane hidden">
                 <!-- Herramientas Reales -->
                 <div class="mb-12">
-                  <h3 class="text-2xl font-serif italic mb-6 dark:text-white">Herramientas reales, no demos</h3>
+                  <h3 class="text-2xl font-serif italic mb-6 dark:text-white">
+                    Herramientas reales, no demos
+                  </h3>
                   <div class="grid md:grid-cols-2 gap-8">
                     <!-- Navidrome -->
-                    <div class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between">
+                    <div
+                      class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
+                    >
                       <div>
                         <div class="flex items-center gap-3 mb-3">
-                          <span class="material-symbols-outlined text-primary text-2xl">music_note</span>
-                          <h4 class="font-bold text-lg dark:text-white">Servidor Navidrome</h4>
+                          <span
+                            class="material-symbols-outlined text-primary text-2xl"
+                            >music_note</span
+                          >
+                          <h4 class="font-bold text-lg dark:text-white">
+                            Servidor Navidrome
+                          </h4>
                         </div>
-                        <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
-                          Instancia personal autohospedada de música en Hetzner para recuperar la soberanía sobre mis archivos de audio y evitar algoritmos corporativos de streaming.
+                        <p
+                          class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
+                        >
+                          Instancia personal autohospedada de música en Hetzner
+                          para recuperar la soberanía sobre mis archivos de
+                          audio y evitar algoritmos corporativos de streaming.
                         </p>
                       </div>
                       <div class="flex items-center justify-between mt-4">
-                        <span class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded">Operativo</span>
-                        <span class="text-xs text-slate-400">Docker • Hetzner</span>
+                        <span
+                          class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
+                          >Operativo</span
+                        >
+                        <span class="text-xs text-slate-400"
+                          >Docker • Hetzner</span
+                        >
                       </div>
                     </div>
-                    
+
                     <!-- Flujo n8n + Ollama -->
-                    <div class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between">
+                    <div
+                      class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
+                    >
                       <div>
                         <div class="flex items-center gap-3 mb-3">
-                          <span class="material-symbols-outlined text-primary text-2xl">route</span>
-                          <h4 class="font-bold text-lg dark:text-white">Flujo n8n + Ollama</h4>
+                          <span
+                            class="material-symbols-outlined text-primary text-2xl"
+                            >route</span
+                          >
+                          <h4 class="font-bold text-lg dark:text-white">
+                            Flujo n8n + Ollama
+                          </h4>
                         </div>
-                        <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
-                          Pipeline autónomo en local que intercepta notas de voz, las transcribe y las procesa usando Ollama con modelos de IA open-source sin enviar datos a OpenAI.
+                        <p
+                          class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
+                        >
+                          Pipeline autónomo en local que intercepta notas de
+                          voz, las transcribe y las procesa usando Ollama con
+                          modelos de IA open-source sin enviar datos a OpenAI.
                         </p>
                       </div>
                       <div class="flex items-center justify-between mt-4">
-                        <span class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded">Operativo</span>
-                        <span class="text-xs text-slate-400">n8n • Ollama • Whisper</span>
+                        <span
+                          class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
+                          >Operativo</span
+                        >
+                        <span class="text-xs text-slate-400"
+                          >n8n • Ollama • Whisper</span
+                        >
                       </div>
                     </div>
 
                     <!-- Contribución Open Source -->
-                    <div class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between">
+                    <div
+                      class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
+                    >
                       <div>
                         <div class="flex items-center gap-3 mb-3">
-                          <span class="material-symbols-outlined text-primary text-2xl">volunteer_activism</span>
-                          <h4 class="font-bold text-lg dark:text-white">Contribución Open Source</h4>
+                          <span
+                            class="material-symbols-outlined text-primary text-2xl"
+                            >volunteer_activism</span
+                          >
+                          <h4 class="font-bold text-lg dark:text-white">
+                            Contribución Open Source
+                          </h4>
                         </div>
-                        <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
-                          Colaboración activa y corrección de bugs en herramientas y frameworks de código abierto que utilizamos en el día a día.
+                        <p
+                          class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
+                        >
+                          Colaboración activa y corrección de bugs en
+                          herramientas y frameworks de código abierto que
+                          utilizamos en el día a día.
                         </p>
                       </div>
                       <div class="flex items-center justify-between mt-4">
-                        <span class="text-[10px] uppercase font-bold tracking-wider text-primary bg-primary/10 px-2 py-1 rounded">Constante</span>
-                        <span class="text-xs text-slate-400">Forgejo • GitHub</span>
+                        <span
+                          class="text-[10px] uppercase font-bold tracking-wider text-primary bg-primary/10 px-2 py-1 rounded"
+                          >Constante</span
+                        >
+                        <span class="text-xs text-slate-400"
+                          >Forgejo • GitHub</span
+                        >
                       </div>
                     </div>
 
                     <!-- Visualización Datos Baleares -->
-                    <div class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between">
+                    <div
+                      class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
+                    >
                       <div>
                         <div class="flex items-center gap-3 mb-3">
-                          <span class="material-symbols-outlined text-primary text-2xl">query_stats</span>
-                          <h4 class="font-bold text-lg dark:text-white">Visualización Datos Baleares</h4>
+                          <span
+                            class="material-symbols-outlined text-primary text-2xl"
+                            >query_stats</span
+                          >
+                          <h4 class="font-bold text-lg dark:text-white">
+                            Visualización Datos Baleares
+                          </h4>
                         </div>
-                        <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
-                          Panel interactivo y visualización ecológica sobre el consumo de agua y recursos en el archipiélago balear, diseñado con tecnologías web ligeras.
+                        <p
+                          class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
+                        >
+                          Panel interactivo y visualización ecológica sobre el
+                          consumo de agua y recursos en el archipiélago balear,
+                          diseñado con tecnologías web ligeras.
                         </p>
                       </div>
                       <div class="flex items-center justify-between mt-4">
-                        <span class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded">En Desarrollo</span>
-                        <span class="text-xs text-slate-400">HTML5 • JS • D3.js</span>
+                        <span
+                          class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
+                          >En Desarrollo</span
+                        >
+                        <span class="text-xs text-slate-400"
+                          >HTML5 • JS • D3.js</span
+                        >
                       </div>
                     </div>
                   </div>
                 </div>
 
                 <!-- Trabajo Anterior (Proyectos de IA previos) -->
-                <div class="border-t border-slate-200 dark:border-slate-800 pt-8">
+                <div
+                  class="border-t border-slate-200 dark:border-slate-800 pt-8"
+                >
                   <details class="group cursor-pointer">
-                    <summary class="flex justify-between items-center text-lg font-serif italic text-slate-700 dark:text-slate-300 select-none list-none">
-                      <span class="flex items-center gap-2 hover:text-primary transition-colors">
-                        <span class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400">chevron_right</span>
+                    <summary
+                      class="flex justify-between items-center text-lg font-serif italic text-slate-700 dark:text-slate-300 select-none list-none"
+                    >
+                      <span
+                        class="flex items-center gap-2 hover:text-primary transition-colors"
+                      >
+                        <span
+                          class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
+                          >chevron_right</span
+                        >
                         Trabajo Anterior (Proyectos e IA comercial)
                       </span>
                     </summary>
                     <div class="grid md:grid-cols-2 gap-8 mt-6">
                       <!-- Project 1: AI Knowledge Pipeline -->
-                      <div class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between">
+                      <div
+                        class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
+                      >
                         <div>
-                          <h4 class="font-bold text-slate-900 dark:text-white mb-2">AI Knowledge Pipeline</h4>
-                          <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
-                            Sistema de procesamiento inteligente multimedia. Recibe audios y PDFs, los transcribe y los estructura mediante APIs de IA comerciales para su posterior consulta semántica.
+                          <h4
+                            class="font-bold text-slate-900 dark:text-white mb-2"
+                          >
+                            AI Knowledge Pipeline
+                          </h4>
+                          <p
+                            class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
+                          >
+                            Sistema de procesamiento inteligente multimedia.
+                            Recibe audios y PDFs, los transcribe y los
+                            estructura mediante APIs de IA comerciales para su
+                            posterior consulta semántica.
                           </p>
                         </div>
                         <div class="flex gap-4 items-center">
-                          <button class="text-xs text-primary hover:underline font-bold" onclick="openModal('project-1')">Ver detalles y stack</button>
+                          <button
+                            class="text-xs text-primary hover:underline font-bold"
+                            onclick="openModal('project-1')"
+                          >
+                            Ver detalles y stack
+                          </button>
                         </div>
                       </div>
 
                       <!-- Project 2: ChefGPT -->
-                      <div class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between">
+                      <div
+                        class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
+                      >
                         <div>
-                          <h4 class="font-bold text-slate-900 dark:text-white mb-2">ChefGPT</h4>
-                          <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
-                            Bot conversacional de Telegram conectado con Google Sheets que sugiere recetas basándose en ingredientes disponibles en tiempo real.
+                          <h4
+                            class="font-bold text-slate-900 dark:text-white mb-2"
+                          >
+                            ChefGPT
+                          </h4>
+                          <p
+                            class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
+                          >
+                            Bot conversacional de Telegram conectado con Google
+                            Sheets que sugiere recetas basándose en ingredientes
+                            disponibles en tiempo real.
                           </p>
                         </div>
                         <div class="flex gap-4 items-center">
-                          <button class="text-xs text-primary hover:underline font-bold" onclick="openModal('project-2')">Ver detalles y stack</button>
+                          <button
+                            class="text-xs text-primary hover:underline font-bold"
+                            onclick="openModal('project-2')"
+                          >
+                            Ver detalles y stack
+                          </button>
                         </div>
                       </div>
                     </div>
@@ -533,37 +835,66 @@
               <!-- Tab 4: Writing -->
               <div id="tab-writing" class="tab-pane hidden">
                 <div class="max-w-2xl mx-auto space-y-8">
-                  <p class="text-slate-600 dark:text-slate-400 italic text-center text-sm">
-                    Reflexiones, aprendizajes técnicos y notas sobre soberanía digital sin pretensiones de sentar cátedra.
+                  <p
+                    class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
+                  >
+                    Reflexiones, aprendizajes técnicos y notas sobre soberanía
+                    digital sin pretensiones de sentar cátedra.
                   </p>
-                  
+
                   <article class="p-6 glass rounded-2xl border border-white/10">
-                    <span class="text-xs text-slate-400 dark:text-slate-500 font-mono">19 de Julio, 2026</span>
-                    <h4 class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer">
-                      La imperfección como aliada: por qué no uso purismos al medir el carbono web
+                    <span
+                      class="text-xs text-slate-400 dark:text-slate-500 font-mono"
+                      >19 de Julio, 2026</span
+                    >
+                    <h4
+                      class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer"
+                    >
+                      La imperfección como aliada: por qué no uso purismos al
+                      medir el carbono web
                     </h4>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                      A veces obsesionarse con la máxima optimización técnica bloquea la publicación de herramientas útiles. En este post explico mis decisiones de infraestructura y los límites pragmáticos que asumo...
+                    <p
+                      class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                    >
+                      A veces obsesionarse con la máxima optimización técnica
+                      bloquea la publicación de herramientas útiles. En este
+                      post explico mis decisiones de infraestructura y los
+                      límites pragmáticos que asumo...
                     </p>
-                    <a href="huella.html" class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1">
+                    <a
+                      href="huella.html"
+                      class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
+                    >
                       Leer artículo completo en la sección Huella
-                      <span class="material-symbols-outlined text-xs">arrow_right_alt</span>
+                      <span class="material-symbols-outlined text-xs"
+                        >arrow_right_alt</span
+                      >
                     </a>
                   </article>
 
                   <article class="p-6 glass rounded-2xl border border-white/10">
-                    <span class="text-xs text-slate-400 dark:text-slate-500 font-mono">2 de Junio, 2026</span>
-                    <h4 class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer">
+                    <span
+                      class="text-xs text-slate-400 dark:text-slate-500 font-mono"
+                      >2 de Junio, 2026</span
+                    >
+                    <h4
+                      class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer"
+                    >
                       Migrando mi código: De GitHub a Forgejo en mi propio VPS
                     </h4>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
-                      Primeros pasos configurando Forgejo mediante Docker. Detalle de consumo de memoria RAM (spoiler: consume menos de 100MB en repositorios medianos) y facilidad de uso...
+                    <p
+                      class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
+                    >
+                      Primeros pasos configurando Forgejo mediante Docker.
+                      Detalle de consumo de memoria RAM (spoiler: consume menos
+                      de 100MB en repositorios medianos) y facilidad de uso...
                     </p>
-                    <span class="text-xs text-slate-400 mt-4 block">Próximamente</span>
+                    <span class="text-xs text-slate-400 mt-4 block"
+                      >Próximamente</span
+                    >
                   </article>
                 </div>
               </div>
-
             </div>
           </div>
         </section>
@@ -588,7 +919,9 @@
               <p
                 class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10"
               >
-                Si buscas tecnología ligera, accesible y con los pies en la tierra — o simplemente quieres hablar de soberanía digital — escríbeme.
+                Si buscas tecnología ligera, accesible y con los pies en la
+                tierra — o simplemente quieres hablar de soberanía digital —
+                escríbeme.
               </p>
               <div
                 class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
@@ -792,8 +1125,8 @@
               </h3>
               <p class="text-slate-700 dark:text-slate-300 leading-relaxed">
                 Agente conversacional inteligente en Telegram que actúa como
-                asistente culinario personal. Consulta tu inventario en Supabase,
-                accede a un RAG especializado con recetas para evitar
+                asistente culinario personal. Consulta tu inventario en
+                Supabase, accede a un RAG especializado con recetas para evitar
                 alucinaciones, y sugiere platos personalizados basados en lo que
                 tienes disponible.
               </p>
@@ -808,8 +1141,12 @@
               >
                 <li>Integración bidireccional con Supabase</li>
                 <li>Consulta automática de inventario en base de datos</li>
-                <li>RAG (Retrieval-Augmented Generation) con recetas verificadas</li>
-                <li>Prevención de alucinaciones mediante fine-tuning de prompts</li>
+                <li>
+                  RAG (Retrieval-Augmented Generation) con recetas verificadas
+                </li>
+                <li>
+                  Prevención de alucinaciones mediante fine-tuning de prompts
+                </li>
                 <li>Generación de recetas personalizadas sin alucinar</li>
                 <li>Actualización automática del inventario</li>
                 <li>Conversación natural y contextual</li>