Refactor code structure for improved readability and maintainability

Author: cortega26

dist/_astro/Footer.CJ-r0z0e.css

@@ -5,47 +5,107 @@ const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 ---
 
-<footer style="background: var(--bg-card); border-top: 1px solid var(--border-subtle); padding: 3rem 0;">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <div class="text-center lg:text-left">
-        <h2 class="text-lg font-semibold mb-6" style="font-family: var(--font-heading);">
-          RETARDO <span style="color: var(--text-accent);">CNE</span>
-        </h2>
-        <p class="text-gray-500 mb-1 text-sm" style="max-width: 440px; line-height: 1.6;">
-          &copy; 2024–2026 {t('footer_rights')}
-          <br/>
-          {t('footer_built_by')} <a href="https://tooltician.com/" target="_blank" rel="noopener noreferrer" style="color: var(--text-accent); text-decoration: none; font-weight: 500;">Tooltician</a>
-        </p>
-        <div style="margin-top: 1rem; font-size: 0.78rem; line-height: 1.6; color: var(--text-secondary); max-width: 480px;">
-          <p style="margin: 0 0 0.35rem;">
-            {t('footer_disclaimer')}
-          </p>
-          <p style="margin: 0;">
-            <a href="https://github.com/cortega26/retardo_cne/issues/new" target="_blank" rel="noopener noreferrer" style="color: var(--text-accent);">{t('footer_report_correction')}</a>
-            <span aria-hidden="true"> · </span>
-            CC BY 4.0
-            <span aria-hidden="true"> · </span>
-            {t('cred_update').replace('{{date}}', '2025-05-27')}
-          </p>
-        </div>
-      </div>
-      <div class="text-center lg:text-right">
-        <div class="flex flex-wrap justify-center lg:justify-end gap-3 items-center">
-          <a href="https://github.com/cortega26/retardo_cne" target="_blank" rel="noopener noreferrer"
-             class="btn btn-outline-primary btn-sm font-bold">
-            <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14" style="margin-right:0.35rem;vertical-align:-2px;" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
-            {t('footer_opensource')}
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="mt-6 pt-6" style="border-top: 1px solid var(--border-subtle);">
-      <div class="flex justify-center gap-4 text-gray-500" style="font-size: 0.7rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;">
-        <a href="#inicio" class="story-link">{t('nav_home')}</a>
-        <a href="#cronologia" class="story-link">{t('nav_evidence')}</a>
-        <a href="#sistema" class="story-link">{t('nav_context')}</a>
-      </div>
-    </div>
-  </div>
+<footer class="site-footer">
+  <p class="footer-copy">&copy; 2024–2026 {t('footer_rights')}</p>
+  <p class="footer-built">
+    {t('footer_built_by')} <a href="https://tooltician.com/" target="_blank" rel="noopener noreferrer">Tooltician</a>
+  </p>
 </footer>
+
+<a href="#inicio" id="back-to-top" class="back-to-top" aria-label={lang === 'es' ? 'Volver al inicio' : 'Back to top'}>
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+       stroke-linecap="round" stroke-linejoin="round" width="18" height="18" aria-hidden="true">
+    <polyline points="18 15 12 9 6 15"/>
+  </svg>
+</a>
+
+<script>
+  const btn = document.getElementById('back-to-top');
+  if (btn) {
+    window.addEventListener('scroll', () => {
+      btn.classList.toggle('visible', window.scrollY > 400);
+    }, { passive: true });
+
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      document.getElementById('inicio')?.scrollIntoView({ behavior: 'smooth' });
+    });
+  }
+</script>
+
+<style>
+  .site-footer {
+    text-align: center;
+    padding: 2rem 1rem 2.5rem;
+    border-top: 1px solid var(--border-subtle);
+    background: var(--bg-card);
+  }
+
+  .footer-copy {
+    font-size: 0.84rem;
+    color: var(--text-secondary);
+    margin: 0 0 0.3rem;
+    line-height: 1.5;
+  }
+
+  .footer-built {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    margin: 0;
+  }
+
+  .footer-built a {
+    color: var(--text-accent);
+    text-decoration: none;
+    font-weight: 600;
+  }
+
+  .footer-built a:hover {
+    text-decoration: underline;
+  }
+
+  /* Back-to-top button */
+  .back-to-top {
+    position: fixed;
+    bottom: 1.75rem;
+    right: 1.75rem;
+    z-index: 200;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 50%;
+    background: var(--color-brand-600);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+    text-decoration: none;
+    opacity: 0;
+    transform: translateY(0.6rem);
+    transition: opacity 0.22s ease, transform 0.22s ease, background 0.15s;
+    pointer-events: none;
+  }
+
+  .back-to-top.visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  .back-to-top:hover,
+  .back-to-top:focus-visible {
+    background: var(--color-brand-700);
+    outline: 2px solid var(--color-brand-400);
+    outline-offset: 2px;
+  }
+
+  :global([data-theme="dark"]) .back-to-top {
+    background: var(--color-brand-500);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  :global([data-theme="dark"]) .back-to-top:hover,
+  :global([data-theme="dark"]) .back-to-top:focus-visible {
+    background: var(--color-brand-400);
+  }
+</style>