perf(landing): responsive screenshot variants and 30-day cache headers

landing/app.js

@@ -35,15 +35,23 @@
 
   // ---------- Slider de capturas ----------
   // Dos diapositivas por idioma: tema claro y oscuro.
+  function shot(base, cap, theme) {
+    return {
+      src: "assets/shots/" + base + "-960.webp",
+      srcset: "assets/shots/" + base + "-320.webp 320w, " +
+        "assets/shots/" + base + "-640.webp 640w, " +
+        "assets/shots/" + base + "-960.webp 960w, " +
+        "assets/shots/" + base + "-1080.webp 1080w, " +
+        "assets/shots/" + base + ".webp 1800w",
+      full: "assets/shots/" + base + ".webp",
+      thumb: "assets/shots/" + base + "-320.webp",
+      cap: cap,
+      theme: theme
+    };
+  }
   var slides = {
-    es: [
-      { src: "assets/shots/main-es-light.webp", cap: "shots.capLight", theme: "light" },
-      { src: "assets/shots/main-es-dark.webp", cap: "shots.capDark", theme: "dark" }
-    ],
-    en: [
-      { src: "assets/shots/main-en-light.webp", cap: "shots.capLight", theme: "light" },
-      { src: "assets/shots/main-en-dark.webp", cap: "shots.capDark", theme: "dark" }
-    ]
+    es: [shot("main-es-light", "shots.capLight", "light"), shot("main-es-dark", "shots.capDark", "dark")],
+    en: [shot("main-en-light", "shots.capLight", "light"), shot("main-en-dark", "shots.capDark", "dark")]
   };
   var slideImg = document.getElementById("slideImg");
   var slideCaption = document.getElementById("slideCaption");
@@ -65,7 +73,7 @@
       b.setAttribute("aria-label", dict[s.cap] || "");
       b.tabIndex = i === slideIndex ? 0 : -1;
       var img = document.createElement("img");
-      img.src = s.src; img.alt = ""; img.loading = "lazy"; img.decoding = "async";
+      img.src = s.thumb; img.alt = ""; img.loading = "lazy"; img.decoding = "async";
       img.width = 96; img.height = 64;
       b.appendChild(img);
       b.addEventListener("click", function () { showSlide(i); });
@@ -83,6 +91,7 @@
     slideIndex = mod(i, list.length);
     var s = list[slideIndex];
     slideImg.src = s.src;
+    slideImg.srcset = s.srcset;
     slideCaption.textContent = (I18N[lang] || I18N.es)[s.cap] || "";
     [...thumbs.children].forEach(function (b, j) {
       b.setAttribute("aria-selected", j === slideIndex ? "true" : "false");
@@ -214,7 +223,7 @@
   // ---------- Lightbox ----------
   slideImg.addEventListener("click", function () {
     if (suppressLightbox) { suppressLightbox = false; return; }
-    lightboxImg.src = slideImg.src;
+    lightboxImg.src = activeSlides()[slideIndex].full;
     lightboxImg.alt = slideImg.alt;
     lightbox.showModal();
   });

landing/index.html

@@ -172,7 +172,11 @@ <h2 class="reveal" data-i18n="shots.title">Un vistazo a la interfaz</h2>
       <p class="lead reveal" data-i18n="shots.lead">Capturas reales de la app, en los dos idiomas y los dos temas.</p>
       <div class="slider reveal" id="slider">
         <div class="slider-viewport" id="slideViewport" role="tabpanel">
-          <img id="slideImg" src="assets/shots/main-es-light.webp" alt="Ventana principal de NextSync" data-i18n-alt="shots.alt" width="1800" height="1200" draggable="false" />
+          <img id="slideImg"
+            src="assets/shots/main-es-light-960.webp"
+            srcset="assets/shots/main-es-light-320.webp 320w, assets/shots/main-es-light-640.webp 640w, assets/shots/main-es-light-960.webp 960w, assets/shots/main-es-light-1080.webp 1080w, assets/shots/main-es-light.webp 1800w"
+            sizes="(max-width: 860px) 92vw, 940px"
+            alt="Ventana principal de NextSync" data-i18n-alt="shots.alt" width="1800" height="1200" draggable="false" />
         </div>
         <button class="slider-arrow prev" id="slidePrev" aria-label="Captura anterior" data-i18n-aria="shots.prev">&#10094;</button>
         <button class="slider-arrow next" id="slideNext" aria-label="Captura siguiente" data-i18n-aria="shots.next">&#10095;</button>
@@ -261,6 +265,6 @@ <h2 class="reveal" data-i18n="about.title">Por qué existe</h2>
 
   <script defer src="https://stat.domatix.com/script.js" data-website-id="0fd3377e-8bba-4651-96e4-82faee5896be"></script>
   <script src="i18n.js?v=9"></script>
-  <script src="app.js?v=9"></script>
+  <script src="app.js?v=11"></script>
 </body>
 </html>