update art

Author: wachin

Tux-en-la-barra-de-disco-simulada.png

@@ -449,19 +449,71 @@ <h3>⚠️ Explicación de la advertencia oficial de Microsoft</h3>
 
 </section>
 </main>
-<footer class="footer">
-<div class="footer__cta">
-<div class="footer__title">¿Te sirvió? Haz fork, traduce, mejora el simulador 👇</div>
-<a class="footer__link" href="https://github.com/wachin/reducir-disco" rel="noopener" target="_blank">
-        https://github.com/wachin/reducir-disco
-      </a>
-</div>
-<div class="footer__meta">
-<div>Copyright: Washington Indacochea Delgado</div>
-<div>Correo: linuxfrontier@proton.me</div>
-<div>Licencia: GPL 3</div>
-<div>Año: 2026</div>
-</div>
+<footer class="siteFooter">
+  <!-- Franja con arte -->
+  <div class="siteFooter__art">
+    <div class="siteFooter__artInner">
+      <img
+        class="siteFooter__artImg"
+        src="./Tux-en-la-barra-de-disco-simulada.png"
+        alt="Robot colocando a Tux en el espacio no asignado"
+        loading="lazy"
+      />
+    </div>
+  </div>
+
+  <!-- Barra inferior con info + links -->
+  <div class="siteFooter__bottom">
+    <div class="siteFooter__bottomInner">
+
+      <div class="siteFooter__left">
+        <div class="siteFooter__headline">¿Te sirvió el simulador?</div>
+        <div class="siteFooter__desc">
+          Haz <b>fork</b>, traduce o mejora el proyecto. ¡Aportes bienvenidos!
+        </div>
+
+        <a class="siteFooter__repo"
+           href="https://github.com/wachin/reducir-disco"
+           target="_blank" rel="noopener">
+          Ver código fuente en GitHub →
+        </a>
+
+        <div class="siteFooter__meta">
+          <span>© 2026 <b>Washington Indacochea Delgado</b></span>
+          <span>Licencia: <b>GPL-3.0</b></span>
+          <a class="siteFooter__mail" href="mailto:linuxfrontier@proton.me">linuxfrontier@proton.me</a>
+        </div>
+      </div>
+
+      <div class="siteFooter__right">
+        <div class="siteFooter__follow">Encuéntrame en</div>
+
+        <div class="socialRow">
+          <a class="socialBtn"
+             href="https://facilitarelsoftwarelibre.blogspot.com/"
+             target="_blank" rel="noopener"
+             aria-label="Blog (Blogger)">
+            <img src="./blogger-icon.png" alt="Blogger">
+          </a>
+
+          <a class="socialBtn"
+             href="https://www.facebook.com/wachin.id"
+             target="_blank" rel="noopener"
+             aria-label="Facebook">
+            <img src="./facebook-icon.png" alt="Facebook">
+          </a>
+
+          <a class="socialBtn"
+             href="https://www.youtube.com/@WashingtonIndacocheaDeldago"
+             target="_blank" rel="noopener"
+             aria-label="YouTube">
+            <img src="./youtube-icon.png" alt="YouTube">
+          </a>
+        </div>
+      </div>
+
+    </div>
+  </div>
 </footer>
 <script src="./app.js"></script>
 </body>

blogger-icon.png

@@ -401,4 +401,140 @@ main{
 }
 .eduList li{
   margin: 4px 0;
+}
+
+/* ===== Pretty footer with art ===== */
+.siteFooter{
+  margin-top: 18px;
+}
+
+.siteFooter__art{
+  background: #e9e9e9;
+  border-top: 1px solid #d7d7d7;
+}
+
+.siteFooter__artInner{
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 22px 18px 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.siteFooter__artImg{
+  width: min(560px, 92vw);
+  height: auto;
+  display: block;
+  filter: drop-shadow(0 14px 26px rgba(0,0,0,.18));
+}
+
+.siteFooter__bottom{
+  background: #3f5460;
+  color: rgba(255,255,255,.92);
+  border-top: 1px solid rgba(0,0,0,.10);
+}
+
+.siteFooter__bottomInner{
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 18px 18px 22px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.siteFooter__headline{
+  font-size: 16px;
+  font-weight: 800;
+  margin-bottom: 6px;
+  color: #fff;
+}
+
+.siteFooter__desc{
+  font-size: 13px;
+  line-height: 1.35rem;
+  margin-bottom: 10px;
+  color: rgba(255,255,255,.88);
+}
+
+.siteFooter__repo{
+  display: inline-block;
+  font-weight: 700;
+  font-size: 13px;
+  color: #ffffff;
+  text-decoration: none;
+  border: 1px solid rgba(255,255,255,.25);
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(255,255,255,.06);
+}
+.siteFooter__repo:hover{
+  background: rgba(255,255,255,.12);
+}
+
+.siteFooter__meta{
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  font-size: 12.5px;
+  color: rgba(255,255,255,.82);
+}
+
+.siteFooter__mail{
+  color: rgba(255,255,255,.92);
+  text-decoration: underline;
+}
+
+.siteFooter__right{
+  min-width: 210px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.siteFooter__follow{
+  font-size: 12.5px;
+  color: rgba(255,255,255,.82);
+}
+
+.socialRow{
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.socialBtn{
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,.18);
+  background: rgba(255,255,255,.08);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  transition: transform .08s ease, background .15s ease;
+}
+.socialBtn:hover{
+  transform: translateY(-1px);
+  background: rgba(255,255,255,.14);
+}
+.socialBtn img{
+  width: 22px;
+  height: 22px;
+  display: block;
+}
+
+/* Responsive footer */
+@media (max-width: 720px){
+  .siteFooter__bottomInner{
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .siteFooter__right{
+    align-items: flex-start;
+  }
 }