diff --git a/landing/app/globals.css b/landing/app/globals.css
index 8c2c043..482cfc8 100644
--- a/landing/app/globals.css
+++ b/landing/app/globals.css
@@ -188,6 +188,84 @@ footer,
   transform: translateY(0);
 }
 
+@keyframes screenshotFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modalPanelIn {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes screenshotSlideNext {
+  from {
+    opacity: 0;
+    transform: translateX(22px) scale(0.985);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes screenshotSlidePrevious {
+  from {
+    opacity: 0;
+    transform: translateX(-22px) scale(0.985);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes screenshotSlideDirect {
+  from {
+    opacity: 0;
+    transform: scale(0.985);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.screenshot-image-fade {
+  animation: screenshotFadeIn 260ms ease both;
+}
+
+.modal-panel-in {
+  animation: modalPanelIn 220ms ease both;
+}
+
+.screenshot-slide-next {
+  animation: screenshotSlideNext 240ms ease both;
+}
+
+.screenshot-slide-previous {
+  animation: screenshotSlidePrevious 240ms ease both;
+}
+
+.screenshot-slide-direct {
+  animation: screenshotSlideDirect 200ms ease both;
+}
+
 .faq-item:hover {
   background: rgba(var(--theme-primary-rgb), 0.04);
 }
diff --git a/landing/components/download-cta.tsx b/landing/components/download-cta.tsx
index 2473a34..189fbfc 100644
--- a/landing/components/download-cta.tsx
+++ b/landing/components/download-cta.tsx
@@ -4,7 +4,14 @@ import { TiltLink } from "@/components/tilt-link";
 
 function GithubIcon({ className }: { className?: string }) {
   return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
       <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
     </svg>
   );
diff --git a/landing/components/features.tsx b/landing/components/features.tsx
index c3c8981..e931bdf 100644
--- a/landing/components/features.tsx
+++ b/landing/components/features.tsx
@@ -68,8 +68,14 @@ export function Features() {
   useEffect(() => {
     const cards = document.querySelectorAll<HTMLElement>(".feature-card-reveal");
 
+    function revealCard(card: Element) {
+      window.setTimeout(() => {
+        card.classList.add("is-visible");
+      }, 80);
+    }
+
     if (!("IntersectionObserver" in window)) {
-      cards.forEach((card) => card.classList.add("is-visible"));
+      cards.forEach(revealCard);
       return;
     }
 
@@ -77,7 +83,7 @@ export function Features() {
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            entry.target.classList.add("is-visible");
+            revealCard(entry.target);
             observer.unobserve(entry.target);
           }
         });
diff --git a/landing/components/footer.tsx b/landing/components/footer.tsx
index 815b3f0..42dd5b5 100644
--- a/landing/components/footer.tsx
+++ b/landing/components/footer.tsx
@@ -1,6 +1,13 @@
 function GithubIcon({ className }: { className?: string }) {
   return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
       <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
     </svg>
   );
diff --git a/landing/components/header.tsx b/landing/components/header.tsx
index 22e3fdb..af406a4 100644
--- a/landing/components/header.tsx
+++ b/landing/components/header.tsx
@@ -7,7 +7,14 @@ import { ThemeToggle } from "@/components/theme-toggle";
 
 function GithubIcon({ className }: { className?: string }) {
   return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
       <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
     </svg>
   );
diff --git a/landing/components/hero.tsx b/landing/components/hero.tsx
index c60d283..3dd3c0a 100644
--- a/landing/components/hero.tsx
+++ b/landing/components/hero.tsx
@@ -5,7 +5,14 @@ import { TiltLink } from "@/components/tilt-link";
 
 function GithubIcon({ className }: { className?: string }) {
   return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
       <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.21 11.39.6.11.79-.26.79-.58v-2.23c-3.34.73-4.03-1.42-4.03-1.42-.55-1.39-1.33-1.76-1.33-1.76-1.09-.74.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.49 1 .11-.78.42-1.3.76-1.6-2.66-.31-5.46-1.33-5.46-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23.96-.27 1.98-.4 3-.4s2.05.13 3 .4c2.29-1.55 3.3-1.23 3.3-1.23.65 1.65.24 2.87.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.62-5.48 5.92.43.37.82 1.1.82 2.22v3.29c0 .32.19.69.8.58A12.01 12.01 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
     </svg>
   );
@@ -17,7 +24,7 @@ export function Hero() {
       <div className="mx-auto max-w-4xl text-center">
         <div className="animate-hero-in mb-6 flex justify-center">
           <Image
-            src="/logo.png"
+            src="/images/logo.webp"
             alt="Logo de FreeTPV"
             width={360}
             height={203}
diff --git a/landing/components/screenshots.tsx b/landing/components/screenshots.tsx
index 25881e7..82b1b81 100644
--- a/landing/components/screenshots.tsx
+++ b/landing/components/screenshots.tsx
@@ -1,4 +1,19 @@
-import { CreditCard, Monitor, Package, Settings } from "lucide-react";
+"use client";
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  CreditCard,
+  Maximize2,
+  Monitor,
+  Package,
+  Settings,
+  X,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+type Theme = "latte" | "mocha";
+type SlideDirection = "next" | "previous" | "direct";
 
 const screenshots = [
   {
@@ -6,32 +21,147 @@ const screenshots = [
     icon: Monitor,
     title: "Pantalla de ventas",
     description: "Categorías, productos, ticket y total en una sola vista.",
-    filename: "screenshot-ventas.png",
+    src: "/images/screenshots/screenshot-ventas.webp",
+    srcDark: "/images/screenshots/screenshot-ventas-d.webp",
+    alt: "Pantalla de ventas de FreeTPV con categorías, productos y ticket",
   },
   {
     id: "cobro",
     icon: CreditCard,
     title: "Cobro y cambio",
     description: "Pago en efectivo o tarjeta con calculadora y vuelta.",
-    filename: "screenshot-cobro.png",
+    src: "/images/screenshots/screenshot-cobro.webp",
+    srcDark: "/images/screenshots/screenshot-cobro-d.webp",
+    alt: "Pantalla de cobro de FreeTPV con opciones de efectivo y tarjeta",
   },
   {
     id: "productos",
     icon: Package,
     title: "Gestión de productos",
     description: "Tabla de productos, filtros, búsqueda y formulario de edición.",
-    filename: "screenshot-productos.png",
+    src: "/images/screenshots/screenshot-productos.webp",
+    srcDark: "/images/screenshots/screenshot-productos-d.webp",
+    alt: "Pantalla de gestión de productos de FreeTPV",
   },
   {
     id: "ajustes",
     icon: Settings,
     title: "Ajustes del negocio",
     description: "Empresa, ticket, impresora, apariencia y copias de seguridad.",
-    filename: "screenshot-ajustes.png",
+    src: "/images/screenshots/screenshot-ajustes.webp",
+    srcDark: "/images/screenshots/screenshot-ajustes-d.webp",
+    alt: "Pantalla de ajustes de negocio de FreeTPV",
   },
 ];
 
+function getInitialTheme(): Theme {
+  if (typeof window === "undefined") {
+    return "latte";
+  }
+
+  const currentTheme = document.documentElement.dataset.theme;
+
+  if (currentTheme === "latte" || currentTheme === "mocha") {
+    return currentTheme;
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "mocha" : "latte";
+}
+
 export function Screenshots() {
+  const [theme, setTheme] = useState<Theme>("latte");
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [slideDirection, setSlideDirection] = useState<SlideDirection>("direct");
+  const activeScreenshot = activeIndex === null ? null : screenshots[activeIndex];
+  const activeNumber = activeIndex === null ? 0 : activeIndex + 1;
+  const isDark = theme === "mocha";
+  const themeLabel = isDark ? "Modo oscuro" : "Modo claro";
+
+  function getScreenshotSrc(screenshot: (typeof screenshots)[number]) {
+    return isDark ? screenshot.srcDark : screenshot.src;
+  }
+
+  function handleScreenshotError(
+    event: React.SyntheticEvent<HTMLImageElement>,
+    fallbackSrc: string,
+  ) {
+    if (event.currentTarget.src.endsWith(fallbackSrc)) {
+      return;
+    }
+
+    event.currentTarget.src = fallbackSrc;
+  }
+
+  function closeCarousel() {
+    setActiveIndex(null);
+  }
+
+  function openCarousel(index: number) {
+    setSlideDirection("direct");
+    setActiveIndex(index);
+  }
+
+  function showPrevious() {
+    setSlideDirection("previous");
+    setActiveIndex((current) => {
+      if (current === null) return current;
+      return current === 0 ? screenshots.length - 1 : current - 1;
+    });
+  }
+
+  function showNext() {
+    setSlideDirection("next");
+    setActiveIndex((current) => {
+      if (current === null) return current;
+      return current === screenshots.length - 1 ? 0 : current + 1;
+    });
+  }
+
+  function showDirect(index: number) {
+    setSlideDirection("direct");
+    setActiveIndex(index);
+  }
+
+  useEffect(() => {
+    setTheme(getInitialTheme());
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const root = document.documentElement;
+
+    function updateThemeFromDocument() {
+      setTheme(getInitialTheme());
+    }
+
+    const observer = new MutationObserver(updateThemeFromDocument);
+    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+    mediaQuery.addEventListener("change", updateThemeFromDocument);
+
+    return () => {
+      observer.disconnect();
+      mediaQuery.removeEventListener("change", updateThemeFromDocument);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (activeIndex === null) return;
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") closeCarousel();
+      if (event.key === "ArrowLeft") showPrevious();
+      if (event.key === "ArrowRight") showNext();
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [activeIndex]);
+
   return (
     <section id="capturas" className="px-4 py-20 sm:px-6 lg:px-8">
       <div className="mx-auto max-w-6xl">
@@ -40,33 +170,129 @@ export function Screenshots() {
             Un vistazo a FreeTPV
           </h2>
           <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
-            Las capturas mostrarán las partes principales de la aplicación,
+            Capturas reales de las partes principales de la aplicación,
             desde la venta diaria hasta la configuración del negocio.
           </p>
         </div>
 
         <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-          {screenshots.map((screenshot) => (
-            <div key={screenshot.id} className="group">
-              <div className="mb-4 flex aspect-video items-center justify-center overflow-hidden rounded-xl border border-border bg-muted transition-colors group-hover:border-primary/40 group-hover:bg-primary/[0.03]">
-                <div className="p-8 text-center">
-                  <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg border border-border bg-background group-hover:border-primary/30">
-                    <screenshot.icon className="h-6 w-6 text-primary" />
-                  </div>
-                  <p className="text-sm font-medium text-foreground">
-                    Captura pendiente
-                  </p>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {screenshot.filename}
-                  </p>
+          {screenshots.map((screenshot, index) => (
+            <button
+              key={screenshot.id}
+              type="button"
+              className="group block text-left"
+              onClick={() => openCarousel(index)}
+              aria-label={`Abrir captura: ${screenshot.title}`}
+            >
+              <div className="relative mb-4 aspect-video overflow-hidden rounded-xl border border-border bg-muted p-2 shadow-sm transition-all duration-300 group-hover:-translate-y-1 group-hover:border-primary/40 group-hover:shadow-lg group-focus-visible:outline-none group-focus-visible:ring-2 group-focus-visible:ring-primary/50">
+                <img
+                  key={`${screenshot.id}-${theme}`}
+                  src={getScreenshotSrc(screenshot)}
+                  alt={screenshot.alt}
+                  loading="lazy"
+                  className="screenshot-image-fade h-full w-full rounded-lg object-contain transition-opacity duration-300"
+                  onError={(event) => handleScreenshotError(event, screenshot.src)}
+                />
+                <div className="absolute left-4 top-4 rounded-full border border-border bg-background/90 px-3 py-1 text-xs font-medium text-muted-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">
+                  {themeLabel}
                 </div>
+                <div className="absolute right-4 top-4 rounded-full border border-border bg-background/90 p-2 text-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">
+                  <Maximize2 className="h-4 w-4" aria-hidden="true" />
+                </div>
+              </div>
+              <div className="mb-1 flex items-center gap-2">
+                <screenshot.icon className="h-4 w-4 text-primary" aria-hidden="true" />
+                <h3 className="font-semibold text-foreground">{screenshot.title}</h3>
               </div>
-              <h3 className="mb-1 font-semibold text-foreground">{screenshot.title}</h3>
               <p className="text-sm text-muted-foreground">{screenshot.description}</p>
-            </div>
+            </button>
           ))}
         </div>
       </div>
+
+      {activeScreenshot && (
+        <div
+          className="modal-backdrop-in fixed inset-0 z-[100] flex items-center justify-center bg-background/55 p-4 backdrop-blur-lg sm:p-6"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Carrusel de capturas"
+          onClick={closeCarousel}
+        >
+          <div className="modal-panel-in relative flex h-full w-full max-w-7xl flex-col" onClick={(event) => event.stopPropagation()}>
+            <div className="mb-4 flex items-center justify-between gap-4">
+              <div>
+                <div className="mb-1 flex flex-wrap items-center gap-2">
+                  <p className="text-sm text-muted-foreground">
+                    {activeNumber} / {screenshots.length}
+                  </p>
+                  <span className="rounded-full border border-border bg-background/85 px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm">
+                    {themeLabel}
+                  </span>
+                </div>
+                <h3 className="text-xl font-semibold text-foreground">{activeScreenshot.title}</h3>
+              </div>
+              <button
+                type="button"
+                className="rounded-full border border-border bg-background/90 p-2 text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                onClick={closeCarousel}
+                aria-label="Cerrar carrusel"
+              >
+                <X className="h-5 w-5" aria-hidden="true" />
+              </button>
+            </div>
+
+            <div className="relative min-h-0 flex-1 overflow-hidden rounded-2xl border border-border bg-background/80 p-2 shadow-2xl ring-1 ring-border/60 sm:p-4">
+              <img
+                key={`${activeScreenshot.id}-${theme}-${slideDirection}`}
+                src={getScreenshotSrc(activeScreenshot)}
+                alt={activeScreenshot.alt}
+                className={`h-full w-full rounded-xl object-contain screenshot-slide-${slideDirection}`}
+                onError={(event) => handleScreenshotError(event, activeScreenshot.src)}
+              />
+
+              <button
+                type="button"
+                className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full border border-border bg-background/90 p-2 text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 sm:left-6"
+                onClick={showPrevious}
+                aria-label="Ver captura anterior"
+              >
+                <ChevronLeft className="h-6 w-6" aria-hidden="true" />
+              </button>
+
+              <button
+                type="button"
+                className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full border border-border bg-background/90 p-2 text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 sm:right-6"
+                onClick={showNext}
+                aria-label="Ver captura siguiente"
+              >
+                <ChevronRight className="h-6 w-6" aria-hidden="true" />
+              </button>
+            </div>
+
+            <div className="mt-4 grid grid-cols-4 gap-2 sm:gap-3">
+              {screenshots.map((screenshot, index) => (
+                <button
+                  key={screenshot.id}
+                  type="button"
+                  className={`aspect-video rounded-lg border bg-background/80 p-1 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 ${
+                    activeIndex === index ? "border-primary shadow-md" : "border-border hover:border-primary/40"
+                  }`}
+                  onClick={() => showDirect(index)}
+                  aria-label={`Ver captura: ${screenshot.title}`}
+                >
+                  <img
+                    src={getScreenshotSrc(screenshot)}
+                    alt=""
+                    className="h-full w-full rounded-md object-contain"
+                    aria-hidden="true"
+                    onError={(event) => handleScreenshotError(event, screenshot.src)}
+                  />
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
     </section>
   );
 }
diff --git a/landing/package-lock.json b/landing/package-lock.json
index 5ddf890..12fbe1f 100644
--- a/landing/package-lock.json
+++ b/landing/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "landing",
+  "name": "freetpv-landing",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "landing",
+      "name": "freetpv-landing",
       "version": "0.1.0",
       "dependencies": {
         "lucide-react": "^1.16.0",
@@ -1606,6 +1606,35 @@
         "tailwindcss": "4.3.0"
       }
     },
+    "node_modules/@tailwindcss/postcss/node_modules/postcss": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
+      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -5201,9 +5230,9 @@
       }
     },
     "node_modules/next/node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
+      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -5220,9 +5249,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -5517,35 +5546,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/postcss": {
-      "version": "8.5.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
-      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.12",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
diff --git a/landing/package.json b/landing/package.json
index 7b425db..c4d57a5 100644
--- a/landing/package.json
+++ b/landing/package.json
@@ -23,5 +23,8 @@
     "eslint-config-next": "16.2.6",
     "tailwindcss": "^4",
     "typescript": "^5"
+  },
+  "overrides": {
+    "postcss": "8.5.10"
   }
 }
diff --git a/landing/public/images/logo.webp b/landing/public/images/logo.webp
new file mode 100644
index 0000000..caa9beb
Binary files /dev/null and b/landing/public/images/logo.webp differ
diff --git a/landing/public/images/screenshots/screenshot-ajustes-d.webp b/landing/public/images/screenshots/screenshot-ajustes-d.webp
new file mode 100644
index 0000000..a63a1ea
Binary files /dev/null and b/landing/public/images/screenshots/screenshot-ajustes-d.webp differ
diff --git a/landing/public/images/screenshots/screenshot-ajustes.webp b/landing/public/images/screenshots/screenshot-ajustes.webp
new file mode 100644
index 0000000..25c7bab
Binary files /dev/null and b/landing/public/images/screenshots/screenshot-ajustes.webp differ
diff --git a/landing/public/images/screenshots/screenshot-cobro-d.webp b/landing/public/images/screenshots/screenshot-cobro-d.webp
new file mode 100644
index 0000000..47a6d30
Binary files /dev/null and b/landing/public/images/screenshots/screenshot-cobro-d.webp differ
diff --git a/landing/public/images/screenshots/screenshot-cobro.webp b/landing/public/images/screenshots/screenshot-cobro.webp
new file mode 100644
index 0000000..026c6d3
Binary files /dev/null and b/landing/public/images/screenshots/screenshot-cobro.webp differ
diff --git a/landing/public/images/screenshots/screenshot-productos-d.webp b/landing/public/images/screenshots/screenshot-productos-d.webp
new file mode 100644
index 0000000..095d9ac
Binary files /dev/null and b/landing/public/images/screenshots/screenshot-productos-d.webp differ
diff --git a/landing/public/images/screenshots/screenshot-productos.webp b/landing/public/images/screenshots/screenshot-productos.webp
new file mode 100644
index 0000000..ec68600
Binary files /dev/null and b/landing/public/images/screenshots/screenshot-productos.webp differ
diff --git a/landing/public/images/screenshots/screenshot-ventas-d.webp b/landing/public/images/screenshots/screenshot-ventas-d.webp
new file mode 100644
index 0000000..6cf48c3
Binary files /dev/null and b/landing/public/images/screenshots/screenshot-ventas-d.webp differ
diff --git a/landing/public/images/screenshots/screenshot-ventas.webp b/landing/public/images/screenshots/screenshot-ventas.webp
new file mode 100644
index 0000000..fdaf657
Binary files /dev/null and b/landing/public/images/screenshots/screenshot-ventas.webp differ
diff --git a/landing/public/logo.png b/landing/public/logo.png
deleted file mode 100644
index 636530c..0000000
Binary files a/landing/public/logo.png and /dev/null differ
diff --git a/src/main/resources/com/mateo/freetpv/view/main-view.fxml b/src/main/resources/com/mateo/freetpv/view/main-view.fxml
index c00726a..0f037d2 100644
--- a/src/main/resources/com/mateo/freetpv/view/main-view.fxml
+++ b/src/main/resources/com/mateo/freetpv/view/main-view.fxml
@@ -13,7 +13,7 @@
    <left>
       <VBox fx:id="sidebar" alignment="TOP_CENTER" maxHeight="1.7976931348623157E308" maxWidth="250.0" minWidth="250.0" prefWidth="250.0" spacing="10.0" styleClass="bg-inset" BorderPane.alignment="CENTER">
          <children>
-            <ImageView fitHeight="138.0" fitWidth="240.0" pickOnBounds="true" preserveRatio="true">
+             <ImageView fitHeight="135.0" fitWidth="224.0" pickOnBounds="true" preserveRatio="true">
                <image>
                   <Image url="@../images/freetpv_logo.png" />
                </image>
@@ -72,7 +72,10 @@
                         <Insets />
                      </VBox.margin>
                   </Button>
-                  <Button fx:id="mesasButton" alignment="TOP_LEFT" graphicTextGap="25.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" style="-fx-background-radius: 0;" text="Gestión de mesas">
+                   <Button fx:id="mesasButton" alignment="TOP_LEFT" graphicTextGap="25.0"
+                           maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity"
+                           minWidth="-Infinity" mnemonicParsing="false" style="-fx-background-radius: 0;"
+                           text="Gestión de mesas" visible="false">
                      <font>
                         <Font size="16.0" />
                      </font>
@@ -84,7 +87,10 @@
                         </StackPane>
                      </graphic>
                   </Button>
-                  <Button fx:id="clientesButton" alignment="TOP_LEFT" graphicTextGap="25.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" style="-fx-background-radius: 0;" text="Gestión de clientes">
+                   <Button fx:id="clientesButton" alignment="TOP_LEFT" graphicTextGap="25.0"
+                           maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity"
+                           minWidth="-Infinity" mnemonicParsing="false" style="-fx-background-radius: 0;"
+                           text="Gestión de clientes" visible="false">
                      <font>
                         <Font size="16.0" />
                      </font>
@@ -123,8 +129,11 @@
             </Label>
          </children>
           <BorderPane.margin>
-            <Insets bottom="10.0" top="10.0" />
+              <Insets/>
           </BorderPane.margin>
+          <padding>
+            <Insets bottom="10.0" top="10.0" />
+          </padding>
       </VBox>
    </left>
    <center>
diff --git a/src/main/resources/com/mateo/freetpv/view/ventas-view.fxml b/src/main/resources/com/mateo/freetpv/view/ventas-view.fxml
index ded605f..426c82d 100644
--- a/src/main/resources/com/mateo/freetpv/view/ventas-view.fxml
+++ b/src/main/resources/com/mateo/freetpv/view/ventas-view.fxml
@@ -1,26 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import java.lang.String?>
-<?import javafx.geometry.Insets?>
-<?import javafx.scene.control.Button?>
-<?import javafx.scene.control.ChoiceBox?>
-<?import javafx.scene.control.Label?>
-<?import javafx.scene.control.ScrollPane?>
-<?import javafx.scene.control.Separator?>
-<?import javafx.scene.control.TableColumn?>
-<?import javafx.scene.control.TableView?>
-<?import javafx.scene.control.TextField?>
-<?import javafx.scene.layout.BorderPane?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.HBox?>
-<?import javafx.scene.layout.RowConstraints?>
-<?import javafx.scene.layout.StackPane?>
-<?import javafx.scene.layout.TilePane?>
-<?import javafx.scene.layout.VBox?>
-<?import javafx.scene.text.Font?>
-<?import org.kordamp.ikonli.javafx.FontIcon?>
-
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
+<?import org.kordamp.ikonli.javafx.*?>
+<?import java.lang.*?>
 <StackPane xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.mateo.freetpv.controller.VentasController">
    <children>
       <BorderPane fx:id="ventasBorderPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
@@ -84,7 +69,7 @@
                               <Font size="14.0" />
                            </font>
                         </Button>
-                        <VBox alignment="BOTTOM_LEFT" spacing="10.0" style="-fx-background-radius: 8;">
+                         <VBox alignment="BOTTOM_LEFT" spacing="10.0" style="-fx-background-radius: 8;" visible="false">
                            <children>
                               <Label text="Camarero">
                                  <graphic>