update: v4

astro.config.mjs

@@ -1,6 +1,9 @@
 import { defineConfig } from "astro/config";
 
 export default defineConfig({
+  devToolbar: {
+    enabled: false
+  },
   server: {
     host: true
   },

src/pages/index.astro

@@ -96,6 +96,29 @@ const coverage = [
   "Coordinación directa en modalidad remota"
 ];
 
+const stackTools = [
+  {
+    name: "Cloudflare",
+    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/cloudflare.png"
+  },
+  {
+    name: "Docker",
+    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/docker.png"
+  },
+  {
+    name: "Coolify",
+    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/coolify.png"
+  },
+  {
+    name: "Mailcow",
+    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/mailcow.png"
+  },
+  {
+    name: "Forgejo",
+    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/forgejo.png"
+  }
+];
+
 const whenFits = [
   "Cuando el proyecto requiere desarrollo y también operación posterior.",
   "Cuando hoy existen varios proveedores sin una responsabilidad técnica clara.",
@@ -328,6 +351,18 @@ const avoids = [
               <p>Se pueden implementar backups sobre Cloudflare R2 para reforzar continuidad, resguardo y recuperación.</p>
             </div>
           </article>
+
+          <div class="stack-tools" data-reveal>
+            <p class="stack-tools__label">Stack operativo habitual</p>
+            <div class="stack-tools__grid">
+              {stackTools.map((tool) => (
+                <div class="stack-tool">
+                  <img src={tool.icon} alt={tool.name} loading="lazy" width="32" height="32" />
+                  <span>{tool.name}</span>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
 
         <ul class="coverage__list">

src/styles/global.css

@@ -533,6 +533,48 @@ img {
   line-height: 1.58;
 }
 
+.stack-tools {
+  margin-top: 0.9rem;
+}
+
+.stack-tools__label {
+  margin-bottom: 0.65rem;
+  color: var(--text);
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.stack-tools__grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.7rem;
+}
+
+.stack-tool {
+  display: grid;
+  justify-items: center;
+  gap: 0.45rem;
+  padding: 0.8rem 0.55rem;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.stack-tool img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.stack-tool span {
+  color: var(--text);
+  font-size: 0.84rem;
+  font-weight: 700;
+  text-align: center;
+  line-height: 1.35;
+}
+
 .coverage__item {
   display: flex;
   align-items: center;
@@ -684,6 +726,10 @@ img {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .stack-tools__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .process-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -774,6 +820,10 @@ img {
     grid-template-columns: 1fr;
   }
 
+  .stack-tools__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .button,
   .header-mail {
     width: 100%;