@axzydev/axzy_ui_system 1.4.8 → 1.5.1

package/src/showcases/HomeShowcase.tsx

@@ -1,284 +1,359 @@
-import { useState, type ReactNode } from "react";
+import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
 import {
-  FaBoxOpen,
-  FaCloud,
-  FaCode,
-  FaDatabase,
+  FaArrowRight,
+  FaCheck,
   FaDownload,
   FaExternalLinkAlt,
   FaGithub,
-  FaLayerGroup,
   FaLinkedin,
-  FaMapMarkerAlt,
-  FaMedium,
-  FaMobileAlt,
   FaSearch,
-  FaServer,
 } from "react-icons/fa";
-import ITBadget from "../components/atoms/badget/badget";
-import ITButton from "../components/atoms/button/button";
-import ITDivider from "../components/atoms/divider/divider";
 import ITFlex from "../components/atoms/flex/flex";
 import ITGrid from "../components/atoms/grid/grid";
-import ITStack from "../components/atoms/stack/stack";
 import ITText from "../components/atoms/text/text";
 import { techIcon, type TechIconEntry } from "./techIcons";
 import { PRODUCTOS, type Producto } from "./productos";
-import ProductoDetalle from "./ProductoDetalle";
 import ProductoIcono from "./ProductoIcono";
+import {
+  BarraProgreso,
+  CARD,
+  ControlesPortafolio,
+  CARD_HOVER,
+  CHIP,
+  EYEBROW,
+  EnlaceBoton,
+  Etiqueta,
+  SaltarContenido,
+  VolverArriba,
+} from "./portfolioUi";
+import { useITTranslation } from "@/i18n";
 
 const CV_URL = "/Martin_Amaro_CV_ES_2026.pdf";
 const GITHUB_URL = "https://github.com/maag070208";
 const LINKEDIN_URL = "https://www.linkedin.com/in/maag070208/";
 const MEDIUM_URL = "https://medium.com/@axzydev";
+const SANDBOX_URL = "#ui-system";
+
+/** Producto que ocupa el bloque destacado del portafolio. */
+const DESTACADO = "checkapp";
+
+/** Ancho de la hoja: una sola columna de lectura, sin cajas flotantes. */
+const HOJA = "mx-auto w-full max-w-[1180px] px-5 sm:px-8 lg:px-10";
+
+/** Anchor ids of the portfolio sections, in document order (drives the scroll-spy). */
+const SECTION_IDS = ["sobre-mi", "stack", "proyectos", "contacto"] as const;
+
+/** Top navigation entries: anchor id → i18n key. El orden es el número de sección. */
+const NAV_ITEMS: { id: (typeof SECTION_IDS)[number]; key: string }[] = [
+  { id: "sobre-mi", key: "showcase.home.navAbout" },
+  { id: "stack", key: "showcase.home.navStack" },
+  { id: "proyectos", key: "showcase.home.navProjects" },
+  { id: "contacto", key: "showcase.home.navContact" },
+];
+
+/** Cabecera sticky: en móvil ocupa dos filas, así que el ancla deja más aire. */
+const ANCLA = "scroll-mt-[6.75rem] md:scroll-mt-[4.5rem]";
+
+/** Shared stagger offset for the hero entrance cascade (`it-reveal`). */
+const reveal = (delay: number): CSSProperties =>
+  ({ "--it-delay": `${delay}ms` }) as CSSProperties;
+
+/** Filete de 1px: la separación entre bloques (no hay tarjetas contenedoras). */
+const FILETE = "border-slate-200 dark:border-slate-800";
+
+/** Índice de sección en mono: `01`, `02`… */
+const numero = (index: number): string => String(index + 1).padStart(2, "0");
 
 /**
- * Degradados literales para los íconos de las métricas. Tailwind v4 no ve las
- * clases construidas en runtime, así que van escritas completas y se eligen por
- * posición.
+ * Tracks which anchored section is currently in view (scroll-spy) so the top
+ * navigation can highlight the active link.
  */
-const ACCENTS = [
-  "from-primary-500 to-info-500",
-  "from-purple-500 to-primary-500",
-  "from-primary-600 to-purple-600",
-  "from-info-500 to-purple-500",
-];
+function useActiveSection(ids: readonly string[]): string {
+  const [active, setActive] = useState(ids[0]);
+  useEffect(() => {
+    const elements = ids
+      .map((id) => document.getElementById(id))
+      .filter((el): el is HTMLElement => Boolean(el));
+    if (elements.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (visible[0]) setActive(visible[0].target.id);
+      },
+      { rootMargin: "-35% 0px -55% 0px", threshold: 0 }
+    );
+
+    elements.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, [ids]);
+  return active;
+}
 
 /**
- * Encabezado de sección: eyebrow en mayúsculas, título y subtítulo opcional.
- * Mismo patrón que el landing del sistema (`#ui-system`).
+ * Cabecera: marca, índice de secciones con scroll-spy, progreso de lectura y el
+ * único punto de entrada al sandbox de componentes (`#ui-system`).
+ */
+const PortfolioNav = () => {
+  const { t } = useITTranslation();
+  const active = useActiveSection(SECTION_IDS);
+
+  const linkClass = (id: string) =>
+    `inline-flex items-baseline gap-1.5 whitespace-nowrap rounded-[6px] px-2.5 py-1.5 font-mono !text-[11px] uppercase !tracking-[0.14em] transition-colors ${
+      active === id
+        ? "text-primary-700 dark:text-primary-500"
+        : "text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
+    }`;
+
+  const enlaces = NAV_ITEMS.map((item, index) => (
+    <li key={item.id}>
+      <a
+        href={`#${item.id}`}
+        aria-current={active === item.id ? "location" : undefined}
+        className={linkClass(item.id)}
+      >
+        <span className="tabular-nums">{numero(index)}</span>
+        {t(item.key)}
+      </a>
+    </li>
+  ));
+
+  return (
+    <header className="sticky top-0 z-[100] border-b border-slate-200 bg-white/85 backdrop-blur-md dark:border-slate-800 dark:bg-[#0b0d10]/85">
+      <nav aria-label={t("showcase.home.sectionNav")} className={HOJA}>
+        <div className="flex h-14 items-center gap-4">
+          <a href="#sobre-mi" className="flex items-center gap-2.5">
+            <span className="grid h-6 w-6 place-items-center rounded-[6px] bg-primary-700 font-mono !text-[10px] !font-bold text-white">
+              AA
+            </span>
+            <ITText
+              as="span"
+              className="hidden font-display !text-[13px] !font-bold -tracking-[0.01em] text-slate-900 dark:text-white sm:block"
+            >
+              Asael Amaro
+            </ITText>
+          </a>
+
+          <ul className="ml-auto hidden items-center gap-1 md:flex">{enlaces}</ul>
+
+          <div className="ml-auto flex items-center gap-2 md:ml-3">
+            <ControlesPortafolio />
+            <EnlaceBoton
+              href={SANDBOX_URL}
+              variante="outlined"
+              tamano="sm"
+              icono={<FaArrowRight size={10} />}
+            >
+              {t("showcase.home.navUiSystem")}
+            </EnlaceBoton>
+          </div>
+        </div>
+
+        {/* Móvil: el mismo índice en una fila desplazable */}
+        <ul className="flex items-center gap-1 overflow-x-auto pb-2 md:hidden">{enlaces}</ul>
+      </nav>
+
+      <BarraProgreso />
+    </header>
+  );
+};
+
+/**
+ * Encabezado de sección: número mono + título display + apoyo, con acciones a la
+ * derecha. El bloque lo separa el filete superior de cada sección.
  */
 const SectionHeading = ({
-  eyebrow,
+  index,
+  label,
   title,
   subtitle,
-  className = "",
+  actions,
 }: {
-  /** Texto chico en mayúsculas sobre el título. */
-  eyebrow: string;
-  /** Título de la sección. */
+  /** Índice de sección (0-based: se pinta con dos dígitos). */
+  index: number;
+  /** Etiqueta mono corta. */
+  label: string;
+  /** Título display. */
   title: string;
-  /** Frase de apoyo debajo del título. */
+  /** Frase de apoyo. */
   subtitle?: string;
-  /** Clases extra del contenedor (márgenes). */
-  className?: string;
+  /** Contenido alineado a la derecha (filtros). */
+  actions?: ReactNode;
 }) => (
-  <ITStack spacing={1} className={className}>
-    <ITText as="p" className="!text-[11px] !font-bold uppercase !tracking-wider text-primary-600 dark:text-primary-400">
-      {eyebrow}
-    </ITText>
-    <ITText as="h2" className="!text-xl !font-bold !tracking-tight text-slate-900 dark:text-white">
-      {title}
-    </ITText>
-    {subtitle && (
-      <ITText as="p" className="!text-sm text-slate-500 dark:text-slate-400">
-        {subtitle}
+  <div className="flex flex-col gap-5 pb-7 md:flex-row md:items-end md:justify-between">
+    <div className="min-w-0">
+      <ITText as="p" className={EYEBROW}>
+        <span className="tabular-nums">{numero(index)}</span>
+        {` — ${label}`}
       </ITText>
-    )}
-  </ITStack>
+      <ITText
+        as="h2"
+        className="font-display !mt-2.5 !text-[26px] !font-bold -tracking-[0.02em] text-slate-900 dark:text-white sm:!text-[32px]"
+      >
+        {title}
+      </ITText>
+      {subtitle && (
+        <ITText
+          as="p"
+          className="!mt-2 max-w-[62ch] !text-[15px] !leading-relaxed text-slate-500 dark:text-slate-400"
+        >
+          {subtitle}
+        </ITText>
+      )}
+    </div>
+    {actions && <div className="shrink-0">{actions}</div>}
+  </div>
 );
 
 /**
- * Ícono de tecnología local, invertido en modo oscuro cuando la marca es
- * monocromática (GitHub, Express).
+ * Ícono de tecnología local. Es decorativo (el nombre va al lado), así que se
+ * oculta a lectores de pantalla y solo conserva el `title` nativo.
  */
-const TechIconImg = ({
-  icon,
-  alt,
-  size = "w-7 h-7",
-}: {
-  /** Ícono resuelto por `techIcons`. */
-  icon: TechIconEntry;
-  /** Texto alternativo. */
-  alt: string;
-  /** Clases de tamaño. @default "w-7 h-7" */
-  size?: string;
-}) => (
+const TechIconImg = ({ icon, alt }: { icon: TechIconEntry; alt: string }) => (
   <img
     src={icon.src}
-    alt={alt}
-    className={`${size} object-contain ${icon.mono ? "dark:invert" : ""}`}
+    alt=""
+    aria-hidden
+    title={alt}
+    className={`h-4 w-4 object-contain ${icon.mono ? "dark:invert" : ""}`}
     loading="lazy"
   />
 );
 
-/** Tarjeta de una tecnología: ícono en caja blanca + nombre. */
-const TechTile = ({ icon, label }: { icon: TechIconEntry; label: string }) => (
-  <div className="group flex h-full flex-col items-center justify-center gap-2 rounded-xl border border-slate-100 bg-slate-50/70 p-3 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary-300 hover:bg-white hover:shadow-md dark:border-slate-800 dark:bg-slate-950/40 dark:hover:border-primary-700 dark:hover:bg-slate-900">
-    <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-white shadow-sm dark:bg-slate-900">
-      <TechIconImg icon={icon} alt={label} size="w-7 h-7" />
-    </div>
-    <ITText as="span" className="w-full truncate text-center text-[11px] font-semibold text-slate-600 dark:text-slate-300">
-      {label}
-    </ITText>
-  </div>
-);
-
-/** Métrica del hero: valor grande, ícono con degradado y texto de apoyo. */
-const StatCard = ({ stat, index }: { stat: { label: string; value: string; hint: string; icon: ReactNode }; index: number }) => (
-  <div className="flex h-full flex-col gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:border-primary-300 hover:shadow-lg dark:border-slate-800 dark:bg-slate-900 dark:hover:border-primary-700">
-    <div className="flex items-start justify-between gap-3">
-      <ITText as="p" className="!text-3xl !font-extrabold !leading-none !tracking-tight tabular-nums text-slate-900 dark:text-white">
-        {stat.value}
-      </ITText>
-      <span className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-[13px] text-white shadow-sm ${ACCENTS[index % ACCENTS.length]}`}>
-        {stat.icon}
-      </span>
-    </div>
-
-    <div className="mt-auto">
-      <ITText as="p" className="!text-sm !font-semibold text-primary-600 dark:text-primary-400">
-        {stat.label}
-      </ITText>
-      <ITText as="p" className="!mt-0.5 !text-[11px] text-slate-400 dark:text-slate-500">
-        {stat.hint}
-      </ITText>
-    </div>
-  </div>
-);
-
 /**
- * Tarjeta de producto, compacta: portada (captura real o degradado), nombre,
- * descripción corta, stack y acceso al detalle.
+ * Tarjeta de producto de la rejilla: portada, índice + tipo, nombre, descripción
+ * acotada, stack y acciones.
  */
-const TarjetaProducto = ({
-  producto,
-  onVerDetalle,
-}: {
-  producto: Producto;
-  onVerDetalle: (producto: Producto) => void;
-}) => {
+const TarjetaProducto = ({ producto, index }: { producto: Producto; index: number }) => {
+  const { t } = useITTranslation();
   const capturas = producto.capturas ?? [];
   const portada = capturas[0];
   const tieneDetalle = capturas.length > 0;
   const enlaceInterno = producto.enlace?.startsWith("#");
+  const stackVisible = producto.stack.slice(0, 3);
+  const stackResto = producto.stack.length - stackVisible.length;
 
   return (
-    <div className="group flex h-full flex-col gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-primary-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 dark:hover:border-primary-700">
-      {/* Portada */}
-      <button
-        type="button"
-        disabled={!tieneDetalle}
-        onClick={() => onVerDetalle(producto)}
-        aria-label={tieneDetalle ? `Ver detalle de ${producto.nombre}` : producto.nombre}
-        className="relative block aspect-[16/10] w-full overflow-hidden rounded-xl border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950/60"
-      >
+    <article className={`group flex h-full flex-col ${CARD} ${CARD_HOVER}`}>
+      <div className="relative flex aspect-[16/10] w-full items-center justify-center overflow-hidden border-b border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950">
         {portada ? (
-          <img
-            src={portada.src}
-            alt={`${producto.nombre}: ${portada.titulo}`}
-            className="h-full w-full object-cover object-top transition-transform duration-300 group-hover:scale-[1.02]"
-            loading="lazy"
-          />
+          <a
+            href={`#proyecto/${producto.id}`}
+            aria-label={t("showcase.home.viewDetailOf", { name: producto.nombre })}
+            className="absolute inset-0"
+          >
+            <img
+              src={portada.src}
+              alt={`${producto.nombre}: ${portada.titulo}`}
+              className="h-full w-full object-cover object-top transition-transform duration-500 group-hover:scale-[1.02]"
+              loading="lazy"
+            />
+          </a>
         ) : (
-          <div className={`flex h-full w-full items-center justify-center bg-gradient-to-br ${producto.gradiente} text-white`}>
-            <ProductoIcono icono={producto.icono} size={44} />
-          </div>
-        )}
-
-        {capturas.length > 1 && (
-          <span className="absolute bottom-2 right-2 rounded-full bg-slate-900/70 px-2.5 py-1 text-[10px] font-semibold text-white backdrop-blur-sm">
-            {capturas.length} capturas
+          <span className="flex flex-col items-center gap-2 text-primary-700 dark:text-primary-500">
+            <ProductoIcono icono={producto.icono} size={30} />
+            <ITText as="span" className={EYEBROW}>
+              {producto.tipo}
+            </ITText>
           </span>
         )}
-      </button>
+      </div>
 
-      {/* Encabezado */}
-      <ITFlex align="center" justify="between" gap={3}>
-        <ITFlex align="center" gap={2.5}>
-          <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${producto.gradiente} text-white shadow-sm`}>
-            <ProductoIcono icono={producto.icono} size={16} />
-          </div>
-          <ITText as="h3" className="!text-base !font-bold !tracking-tight text-slate-900 dark:text-white">
-            {producto.nombre}
+      <div className="flex flex-1 flex-col p-5">
+        <div className="flex items-center justify-between gap-3">
+          <ITText as="span" className={`${EYEBROW} tabular-nums`}>
+            {numero(index)}
           </ITText>
-        </ITFlex>
-        <ITBadget label={producto.tipo} color="primary" variant="outlined" />
-      </ITFlex>
+          <Etiqueta>{producto.tipo}</Etiqueta>
+        </div>
 
-      <ITText as="p" className="!text-sm !leading-relaxed text-slate-600 dark:text-slate-300">
-        {producto.descripcion}
-      </ITText>
+        <ITText
+          as="h3"
+          className="font-display !mt-3 !text-[19px] !font-bold -tracking-[0.02em] text-slate-900 dark:text-white"
+        >
+          {producto.nombre}
+        </ITText>
 
-      <ITFlex gap={1.5} wrap="wrap">
-        {producto.stack.map((tecnologia) => (
-          <span
-            key={tecnologia}
-            className="rounded-md bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-500 dark:bg-slate-800 dark:text-slate-400"
-          >
-            {tecnologia}
-          </span>
-        ))}
-      </ITFlex>
-
-      {/* Acciones */}
-      <ITFlex align="center" justify="between" gap={3} wrap="wrap" className="mt-auto pt-2">
-        {tieneDetalle ? (
-          <ITButton variant="filled" color="primary" size="sm" onClick={() => onVerDetalle(producto)}>
-            Ver detalle
-          </ITButton>
-        ) : (
-          <ITText as="span" />
-        )}
+        <ITText
+          as="p"
+          className="line-clamp-3 !mt-2 !text-[13.5px] !leading-relaxed text-slate-600 dark:text-slate-300"
+        >
+          {producto.descripcion}
+        </ITText>
 
-        {producto.enlace && (
-          <a
-            href={producto.enlace}
-            {...(enlaceInterno ? {} : { target: "_blank", rel: "noopener noreferrer" })}
-            className="!text-xs !font-semibold !text-primary-600 dark:!text-primary-400 inline-flex items-center gap-1.5"
-          >
-            {!enlaceInterno && <FaExternalLinkAlt size={11} />}
-            {producto.enlaceTexto ?? "Ver el repositorio"}
-          </a>
-        )}
-      </ITFlex>
-    </div>
+        <ITFlex gap={1.5} wrap="wrap" className="!mt-4">
+          {stackVisible.map((tecnologia) => (
+            <span key={tecnologia} className={CHIP}>
+              {tecnologia}
+            </span>
+          ))}
+          {stackResto > 0 && (
+            <span className={CHIP}>{t("showcase.home.moreStack", { count: stackResto })}</span>
+          )}
+        </ITFlex>
+
+        <div className="mt-auto flex items-center justify-between gap-3 pt-5">
+          {tieneDetalle ? (
+            <EnlaceBoton href={`#proyecto/${producto.id}`} tamano="sm">
+              {t("showcase.home.viewDetail")}
+            </EnlaceBoton>
+          ) : (
+            <ITText as="span" className={EYEBROW}>
+              {t("showcase.home.noPreview")}
+            </ITText>
+          )}
+
+          {producto.enlace && (
+            <a
+              href={producto.enlace}
+              {...(enlaceInterno ? {} : { target: "_blank", rel: "noopener noreferrer" })}
+              className="inline-flex items-center gap-1.5 !text-xs !font-semibold !text-primary-700 dark:!text-primary-500"
+            >
+              {!enlaceInterno && <FaExternalLinkAlt size={10} />}
+              {producto.enlaceTexto ?? t("showcase.home.viewRepo")}
+            </a>
+          )}
+        </div>
+      </div>
+    </article>
   );
 };
 
+/**
+ * Portafolio (`/`): hoja técnica con masthead tipográfico, banda de métricas,
+ * stack en formato datasheet y productos (uno destacado + rejilla).
+ *
+ * No recibe props: cada tarjeta enlaza a `#proyecto/<id>` con un `<a>` real, así
+ * que el router por hash hace la navegación (y el detalle es compartible).
+ */
 export const HomeShowcase = () => {
+  const { t } = useITTranslation();
   const [techSearch, setTechSearch] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState("all");
-  const [detalle, setDetalle] = useState<Producto | null>(null);
-
-  const LANGUAGES = [
-    { name: "TypeScript", icon: techIcon("typescript") },
-    { name: "JavaScript", icon: techIcon("javascript") },
-    { name: "C#", icon: techIcon("csharp") },
-    { name: "Python", icon: techIcon("python") },
-    { name: "Kotlin", icon: techIcon("kotlin") },
-    { name: "Dart", icon: techIcon("dart") },
-  ];
 
-  const FRAMEWORKS = [
-    { name: "Angular", icon: techIcon("angular") },
-    { name: "React", icon: techIcon("react") },
-    { name: "Ionic", icon: techIcon("ionic") },
-    { name: ".NET", icon: techIcon("dotnet") },
-    { name: "Node.js", icon: techIcon("nodejs") },
-    { name: "Flutter", icon: techIcon("flutter") },
-    { name: "Express", icon: techIcon("express") },
-    { name: "Electron", icon: techIcon("electron") },
-  ];
-
-  const TECH_STACK = [
-    { name: "TypeScript", icon: techIcon("typescript"), category: "frontend" },
-    { name: "JavaScript", icon: techIcon("javascript"), category: "frontend" },
+  /** Stack completo: única fuente de verdad (el datasheet lo agrupa por categoría). */
+  const TECH_STACK: { name: string; icon: TechIconEntry; category: string }[] = [
+    { name: "TypeScript", icon: techIcon("typescript"), category: "languages" },
+    { name: "JavaScript", icon: techIcon("javascript"), category: "languages" },
+    { name: "C#", icon: techIcon("csharp"), category: "languages" },
+    { name: "Python", icon: techIcon("python"), category: "languages" },
+    { name: "Kotlin", icon: techIcon("kotlin"), category: "languages" },
+    { name: "Dart", icon: techIcon("dart"), category: "languages" },
     { name: "Angular", icon: techIcon("angular"), category: "frontend" },
     { name: "React", icon: techIcon("react"), category: "frontend" },
     { name: "Redux", icon: techIcon("redux"), category: "frontend" },
     { name: "HTML5", icon: techIcon("html5"), category: "frontend" },
     { name: "CSS3", icon: techIcon("css3"), category: "frontend" },
     { name: "Sass", icon: techIcon("sass"), category: "frontend" },
-    { name: "C#", icon: techIcon("csharp"), category: "backend" },
-    { name: "Python", icon: techIcon("python"), category: "backend" },
     { name: "Node.js", icon: techIcon("nodejs"), category: "backend" },
     { name: "Express", icon: techIcon("express"), category: "backend" },
     { name: ".NET Core", icon: techIcon("dotnet"), category: "backend" },
+    { name: "Spring Boot", icon: techIcon("springboot"), category: "backend" },
     { name: "MongoDB", icon: techIcon("mongodb"), category: "database" },
     { name: "MySQL", icon: techIcon("mysql"), category: "database" },
+    { name: "PostgreSQL", icon: techIcon("postgresql"), category: "database" },
     { name: "Flutter", icon: techIcon("flutter"), category: "mobile" },
-    { name: "Kotlin", icon: techIcon("kotlin"), category: "mobile" },
     { name: "Android", icon: techIcon("android"), category: "mobile" },
     { name: "Ionic", icon: techIcon("ionic"), category: "mobile" },
     { name: "Docker", icon: techIcon("docker"), category: "devops" },
@@ -289,329 +364,450 @@ export const HomeShowcase = () => {
     { name: "Electron", icon: techIcon("electron"), category: "desktop" },
     { name: "Visual Studio", icon: techIcon("visualstudio"), category: "tools" },
     { name: "Jest", icon: techIcon("jest"), category: "testing" },
+    { name: "Appium", icon: techIcon("appium"), category: "testing" },
   ];
 
-  const STATS = [
-    { label: "Experiencia", value: "5+", hint: "años como fullstack", icon: <FaCode /> },
-    { label: "Tecnologías", value: `${TECH_STACK.length}`, hint: "en el stack", icon: <FaLayerGroup /> },
-    { label: "Productos", value: `${PRODUCTOS.length}`, hint: "propios y en uso", icon: <FaBoxOpen /> },
-    { label: "Modalidad", value: "Remoto", hint: "disponible ya", icon: <FaMapMarkerAlt /> },
+  /** Orden y etiqueta i18n de cada fila del datasheet. */
+  const FILAS: { category: string; key: string }[] = [
+    { category: "languages", key: "showcase.home.catLanguages" },
+    { category: "frontend", key: "showcase.home.catFrontend" },
+    { category: "backend", key: "showcase.home.catBackend" },
+    { category: "database", key: "showcase.home.catDatabase" },
+    { category: "mobile", key: "showcase.home.catMobile" },
+    { category: "devops", key: "showcase.home.catDevops" },
+    { category: "desktop", key: "showcase.home.catDesktop" },
+    { category: "tools", key: "showcase.home.catTools" },
+    { category: "testing", key: "showcase.home.catTesting" },
   ];
 
-  const categoriesList = [
-    { id: "all", name: "Todos", icon: <FaLayerGroup size={10} /> },
-    { id: "frontend", name: "Frontend", icon: <FaCode size={10} /> },
-    { id: "backend", name: "Backend", icon: <FaServer size={10} /> },
-    { id: "mobile", name: "Móvil", icon: <FaMobileAlt size={10} /> },
-    { id: "database", name: "Bases de Datos", icon: <FaDatabase size={10} /> },
-    { id: "devops", name: "DevOps", icon: <FaCloud size={10} /> },
+  const termino = techSearch.trim().toLowerCase();
+  const filas = FILAS.map((fila) => ({
+    ...fila,
+    items: TECH_STACK.filter(
+      (tech) => tech.category === fila.category && tech.name.toLowerCase().includes(termino)
+    ),
+  })).filter((fila) => fila.items.length > 0);
+  const visibles = filas.reduce((total, fila) => total + fila.items.length, 0);
+
+  /** Métricas del perfil: una banda de datos con filetes, no cuatro tarjetas. */
+  const METRICAS = [
+    { label: t("showcase.home.statExperience"), value: "5+" },
+    { label: t("showcase.home.statProducts"), value: `${PRODUCTOS.length}` },
+    { label: t("showcase.home.statTech"), value: `${TECH_STACK.length}` },
+    { label: t("showcase.home.statMode"), value: t("showcase.home.statModeValue") },
   ];
 
-  const filteredTech = TECH_STACK.filter((tech) => {
-    const matchesSearch = tech.name.toLowerCase().includes(techSearch.toLowerCase());
-    const matchesCategory = selectedCategory === "all" || tech.category === selectedCategory;
-    return matchesSearch && matchesCategory;
-  });
+  const destacado = PRODUCTOS.find((producto) => producto.id === DESTACADO) ?? PRODUCTOS[0];
+  const portadaDestacada = destacado.capturas?.[0];
+  const resto = PRODUCTOS.filter((producto) => producto.id !== destacado.id);
+  const enlaceDestacadoExterno = Boolean(destacado.enlace && !destacado.enlace.startsWith("#"));
 
   return (
-    <ITStack spacing={10} className="animate-fadeIn overflow-x-clip pb-5">
-      {/* ─── HERO ─── */}
-      <section
-        aria-labelledby="home-hero-title"
-        className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-primary-50 via-white to-purple-50 px-8 py-14 dark:from-primary-950/30 dark:via-slate-900 dark:to-purple-950/30 sm:px-14"
-      >
-        <div aria-hidden className="it-landing-float pointer-events-none absolute -top-24 -right-16 h-72 w-72 rounded-full bg-primary-400/20 blur-3xl" />
-        <div
-          aria-hidden
-          className="it-landing-float pointer-events-none absolute -bottom-24 -left-16 h-72 w-72 rounded-full bg-purple-400/20 blur-3xl"
-          style={{ animationDelay: "1.5s" }}
-        />
-        <div aria-hidden className="it-landing-grid pointer-events-none absolute inset-0 text-slate-400/50 dark:text-slate-600/40" />
-
-        <div className="relative z-10 flex flex-col gap-12 xl:flex-row xl:items-center xl:gap-14">
-          <div className="min-w-0 max-w-3xl flex-1 xl:max-w-2xl">
-            <div className="it-landing-rise">
-              <ITBadget label="Portafolio · 2026" color="primary" variant="outlined" className="w-fit" />
-            </div>
-
-            <ITText
-              as="h1"
-              id="home-hero-title"
-              className="it-landing-rise !mt-5 !text-4xl !font-extrabold !tracking-tight text-slate-900 dark:text-white sm:!text-5xl"
-              style={{ animationDelay: "70ms" }}
-            >
-              Hola, soy{" "}
-              <span className="bg-gradient-to-r from-primary-600 via-primary-500 to-purple-500 bg-clip-text text-transparent">
-                Asael Amaro
-              </span>
-            </ITText>
-
-            <ITText
-              as="p"
-              className="it-landing-rise !mt-4 !text-base !leading-relaxed max-w-xl text-slate-600 dark:text-slate-300"
-              style={{ animationDelay: "140ms" }}
-            >
-              Fullstack Developer con 4+ años creando aplicaciones web modernas.
-              Especializado en TypeScript, Angular y React, con foco en arquitectura
-              limpia y en productos que la gente usa todos los días.
-            </ITText>
-
+    <>
+      <SaltarContenido />
+      <PortfolioNav />
+
+      <main id="contenido" className="animate-fadeIn">
+        {/* ─── 01 · MASTHEAD ─── */}
+        <section id="sobre-mi" aria-labelledby="home-hero-title" className={ANCLA}>
+          <div className={`${HOJA} pb-10 pt-10 sm:pb-12 sm:pt-14`}>
             <ITFlex
-              gap={3}
-              wrap="wrap"
               align="center"
-              className="it-landing-rise !mt-7"
-              style={{ animationDelay: "210ms" }}
-            >
-              <a href={CV_URL} download>
-                <ITButton variant="filled" color="primary" size="lg" icon={<FaDownload size={13} />}>
-                  Descargar CV
-                </ITButton>
-              </a>
-              <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
-                <ITButton variant="outlined" color="secondary" size="lg" icon={<FaGithub size={13} />}>
-                  GitHub
-                </ITButton>
-              </a>
-            </ITFlex>
-
-            <div
-              className="it-landing-rise mt-7 inline-flex flex-wrap items-center gap-x-3 gap-y-2 rounded-2xl border border-primary-200 bg-gradient-to-r from-primary-50 to-purple-50 px-4 py-2 shadow-sm dark:border-primary-800/50 dark:from-primary-950/30 dark:to-purple-950/30"
-              style={{ animationDelay: "280ms" }}
+              justify="between"
+              gap={4}
+              wrap="wrap"
+              className="it-reveal border-b border-slate-200 pb-4 dark:border-slate-800"
             >
-              <span className="relative flex h-2 w-2 shrink-0">
-                <span className="absolute inline-flex h-full w-full rounded-full bg-success-400 opacity-75" />
-                <span className="relative inline-flex h-2 w-2 rounded-full bg-success-500" />
+              <span className="inline-flex items-center gap-2.5">
+                <span className="relative flex h-1.5 w-1.5 shrink-0">
+                  <span className="absolute inline-flex h-full w-full rounded-full bg-success-500 opacity-75" />
+                  <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-success-500" />
+                </span>
+                <ITText
+                  as="span"
+                  className="font-mono !text-[11px] uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400"
+                >
+                  {`${t("showcase.home.availableFullstack")} · ${t("showcase.home.location")}`}
+                </ITText>
               </span>
-              <code className="text-sm font-medium text-slate-800 dark:text-slate-200">
-                Disponible para proyectos fullstack
-              </code>
               <a
                 href={LINKEDIN_URL}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 text-xs font-semibold text-primary-600 dark:text-primary-400"
+                className="inline-flex items-center gap-1.5 font-mono !text-[11px] uppercase !tracking-[0.14em] !text-primary-700 dark:!text-primary-500"
               >
-                <FaLinkedin size={12} />
+                <FaLinkedin size={11} />
                 LinkedIn
               </a>
-            </div>
-          </div>
+            </ITFlex>
 
-          {/* Foto en tarjeta flotante */}
-          <div className="flex w-full shrink-0 justify-center xl:w-[300px] xl:justify-end">
-            <div
-              className="it-landing-float w-full max-w-[300px] overflow-hidden rounded-2xl border border-slate-200/80 bg-white/85 shadow-xl backdrop-blur-sm dark:border-slate-700/70 dark:bg-slate-900/85"
-              style={{ animationDelay: "0.8s" }}
-            >
-              <img
-                src="/personalFoto.jpg"
-                alt="Asael Amaro"
-                className="aspect-[4/5] w-full object-cover"
-              />
-              <div className="flex items-center justify-between gap-3 border-t border-slate-200/80 px-4 py-3.5 dark:border-slate-700/70">
-                <div>
-                  <ITText as="p" className="!text-xs !font-bold text-slate-900 dark:text-white">
-                    Fullstack Developer
+            <div className="mt-10 grid gap-10 lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-14">
+              <div className="min-w-0">
+                <ITText
+                  as="h1"
+                  id="home-hero-title"
+                  className="it-reveal font-display !text-[38px] !font-bold !leading-[1.06] -tracking-[0.015em] text-slate-900 dark:text-white sm:!text-[54px] lg:!text-[62px]"
+                  style={reveal(60)}
+                >
+                  {t("showcase.home.heroLead")}{" "}
+                  <span className="text-primary-600 dark:text-primary-400">
+                    {t("showcase.home.heroAccent")}
+                  </span>
+                </ITText>
+
+                <ITText
+                  as="p"
+                  className="it-reveal !mt-6 max-w-[62ch] !text-[15.5px] !leading-[1.75] text-slate-600 dark:text-slate-300 sm:!text-[17px]"
+                  style={reveal(130)}
+                >
+                  {t("showcase.home.bio")}
+                </ITText>
+
+                <ITFlex
+                  gap={3}
+                  wrap="wrap"
+                  align="center"
+                  className="it-reveal !mt-8"
+                  style={reveal(200)}
+                >
+                  <EnlaceBoton href={CV_URL} descargar icono={<FaDownload size={12} />}>
+                    {t("showcase.home.downloadCv")}
+                  </EnlaceBoton>
+                  <EnlaceBoton href={GITHUB_URL} variante="text" icono={<FaGithub size={13} />}>
+                    GitHub
+                  </EnlaceBoton>
+                  <EnlaceBoton href={SANDBOX_URL} variante="text" icono={<FaArrowRight size={12} />}>
+                    {t("showcase.home.navUiSystem")}
+                  </EnlaceBoton>
+                </ITFlex>
+              </div>
+
+              {/* Retrato como documento: chico y con filete, sin tarjeta contenedora */}
+              <div
+                className="it-reveal flex items-start gap-4 lg:flex-col lg:gap-3 lg:self-end"
+                style={reveal(260)}
+              >
+                <img
+                  src="/personalFoto.jpg"
+                  alt="Asael Amaro"
+                  className="h-[150px] w-[120px] rounded-[10px] border border-slate-200 object-cover dark:border-slate-800 lg:h-[210px] lg:w-[168px]"
+                />
+                <div className="pt-0.5">
+                  <ITText
+                    as="p"
+                    className="font-mono !text-[10px] uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400"
+                  >
+                    {t("showcase.home.role")}
                   </ITText>
-                  <ITText as="p" className="!text-[11px] text-slate-400 dark:text-slate-500">
-                    Remoto · México
+                  <ITText as="p" className="!mt-1 !text-[11px] text-slate-500 dark:text-slate-400">
+                    {t("showcase.home.location")}
                   </ITText>
                 </div>
-                <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-success-500/40 px-2.5 py-1 text-[10px] font-semibold text-success-600 dark:text-success-400">
-                  <span className="h-1.5 w-1.5 rounded-full bg-success-500" />
-                  Disponible
-                </span>
               </div>
             </div>
           </div>
-        </div>
-      </section>
-
-      {/* ─── MÉTRICAS ─── */}
-      <section aria-label="Métricas del perfil">
-        <ITGrid container spacing={4}>
-          {STATS.map((stat, index) => (
-            <ITGrid item xs={6} lg={3} key={stat.label}>
-              <StatCard stat={stat} index={index} />
-            </ITGrid>
-          ))}
-        </ITGrid>
-      </section>
-
-      {/* ─── LENGUAJES Y FRAMEWORKS ─── */}
-      <section>
-        <SectionHeading
-          eyebrow="Base técnica"
-          title="Lenguajes y frameworks"
-          subtitle="Con los que trabajo todos los días."
-          className="!mb-5"
-        />
-
-        <ITGrid container spacing={5}>
-          <ITGrid item xs={12} lg={6}>
-            <div className="h-full rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
-              <ITText as="h3" className="!text-[11px] !font-bold uppercase !tracking-wider text-slate-400 dark:text-slate-500">
-                Lenguajes
-              </ITText>
-              <div className="mt-4 grid grid-cols-3 gap-3 sm:grid-cols-6 lg:grid-cols-3">
-                {LANGUAGES.map((lang) => (
-                  <TechTile key={lang.name} icon={lang.icon} label={lang.name} />
-                ))}
-              </div>
-            </div>
-          </ITGrid>
 
-          <ITGrid item xs={12} lg={6}>
-            <div className="h-full rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
-              <ITText as="h3" className="!text-[11px] !font-bold uppercase !tracking-wider text-slate-400 dark:text-slate-500">
-                Frameworks
-              </ITText>
-              <div className="mt-4 grid grid-cols-3 gap-3 sm:grid-cols-4 lg:grid-cols-4">
-                {FRAMEWORKS.map((fw) => (
-                  <TechTile key={fw.name} icon={fw.icon} label={fw.name} />
+          {/* Banda de métricas */}
+          <div className={`border-y ${FILETE}`}>
+            <dl
+              aria-label={t("showcase.home.ariaStats")}
+              className={`${HOJA} grid grid-cols-2 sm:grid-cols-4`}
+            >
+              {METRICAS.map((metrica, indice) => (
+                <div
+                  key={metrica.label}
+                  className={`py-5 ${indice > 0 ? "sm:border-l sm:pl-6 " : ""}${
+                    indice % 2 === 1 ? "border-l pl-6 " : ""
+                  }border-slate-200 dark:border-slate-800`}
+                >
+                  <dt className={EYEBROW}>{metrica.label}</dt>
+                  <dd className="mt-2 font-display text-[30px] font-bold leading-none tracking-[-0.02em] tabular-nums text-slate-900 dark:text-white">
+                    {metrica.value}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+        </section>
+
+        {/* ─── 02 · STACK (datasheet) ─── */}
+        <section id="stack" className={ANCLA}>
+          <div className={`${HOJA} py-12 sm:py-16`}>
+            <SectionHeading
+              index={1}
+              label={t("showcase.home.eyebrowStack")}
+              title={t("showcase.home.titleStack")}
+              subtitle={t("showcase.home.subtitleStack")}
+              actions={
+                <div className="relative w-full sm:w-[260px]">
+                  <FaSearch
+                    className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
+                    size={11}
+                  />
+                  <input
+                    type="search"
+                    placeholder={t("showcase.home.searchTech")}
+                    aria-label={t("showcase.home.searchTechAria")}
+                    value={techSearch}
+                    onChange={(e) => setTechSearch(e.target.value)}
+                    className="w-full rounded-[10px] border border-slate-200 bg-white py-2 pl-8 pr-3 font-mono text-xs text-slate-800 outline-none transition-colors focus:border-primary-600 dark:border-slate-800 dark:bg-slate-900 dark:text-white"
+                  />
+                </div>
+              }
+            />
+
+            {filas.length > 0 ? (
+              <dl className={`border-t ${FILETE}`}>
+                {filas.map((fila) => (
+                  <div
+                    key={fila.category}
+                    className={`grid gap-2 border-b py-4 sm:grid-cols-[150px_minmax(0,1fr)] sm:gap-6 ${FILETE}`}
+                  >
+                    <dt className="font-mono text-[11px] uppercase leading-6 tracking-[0.12em] text-slate-500 dark:text-slate-400">
+                      {t(fila.key)}
+                    </dt>
+                    <dd className="flex flex-wrap items-center gap-x-5 gap-y-2.5">
+                      {fila.items.map((tech) => (
+                        <span
+                          key={tech.name}
+                          className="inline-flex items-center gap-2 text-[14px] text-slate-700 dark:text-slate-200"
+                        >
+                          <TechIconImg icon={tech.icon} alt={tech.name} />
+                          {tech.name}
+                        </span>
+                      ))}
+                    </dd>
+                  </div>
                 ))}
-              </div>
-            </div>
-          </ITGrid>
-        </ITGrid>
-      </section>
-
-      {/* ─── STACK TECNOLÓGICO ─── */}
-      <section>
-        <SectionHeading
-          eyebrow="Stack"
-          title="Tecnologías que uso"
-          subtitle="Filtra por área o busca por nombre."
-          className="!mb-5"
-        />
-
-        <ITFlex align="center" justify="between" wrap="wrap" gap={4} className="!mb-6">
-          <ITFlex gap={2} wrap="wrap">
-            {categoriesList.map((cat) => (
-              <button
-                key={cat.id}
-                type="button"
-                onClick={() => setSelectedCategory(cat.id)}
-                className={`inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-xs font-semibold transition-all ${
-                  selectedCategory === cat.id
-                    ? "bg-primary-500 text-white shadow-sm"
-                    : "bg-slate-100 text-slate-500 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700"
-                }`}
+              </dl>
+            ) : (
+              <ITText
+                as="p"
+                className={`border-y py-10 text-center !text-sm text-slate-500 dark:text-slate-400 ${FILETE}`}
               >
-                {cat.icon}
-                {cat.name}
-              </button>
-            ))}
-          </ITFlex>
-
-          <div className="relative w-full sm:w-64">
-            <FaSearch className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={12} />
-            <input
-              type="text"
-              placeholder="Buscar tecnología..."
-              value={techSearch}
-              onChange={(e) => setTechSearch(e.target.value)}
-              className="w-full rounded-xl border border-slate-200 bg-white py-2 pl-8 pr-4 text-xs text-slate-800 outline-none transition-all focus:border-primary-400 focus:ring-2 focus:ring-primary-500/30 dark:border-slate-700 dark:bg-slate-900 dark:text-white"
-            />
-          </div>
-        </ITFlex>
+                {t("showcase.home.noTech", { term: techSearch })}
+              </ITText>
+            )}
 
-        {filteredTech.length > 0 ? (
-          <ITGrid container spacing={3}>
-            {filteredTech.map((tech, index) => (
-              <ITGrid item xs={4} sm={3} md={2} lg={2} key={`${tech.name}-${index}`}>
-                <TechTile icon={tech.icon} label={tech.name} />
-              </ITGrid>
-            ))}
-          </ITGrid>
-        ) : (
-          <div className="rounded-2xl border border-slate-200 bg-white py-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
-            <ITText as="p" className="!text-sm text-slate-500 dark:text-slate-400">
-              No se encontraron tecnologías para “{techSearch}”.
+            <ITText
+              as="p"
+              className="mt-4 font-mono !text-[11px] uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400"
+            >
+              {t("showcase.home.techCount", { shown: visibles, total: TECH_STACK.length })}
             </ITText>
           </div>
-        )}
+        </section>
 
-        <ITDivider className="!my-6" />
-        <ITText as="p" className="!text-xs text-center text-slate-400 dark:text-slate-500">
-          {filteredTech.length} de {TECH_STACK.length} tecnologías
-        </ITText>
-      </section>
-
-      {/* ─── PRODUCTOS ─── */}
-      <section>
-        <SectionHeading
-          eyebrow="Portafolio"
-          title="Productos que construí"
-          subtitle="Los que tienen capturas se abren en su pantalla de detalle."
-          className="!mb-5"
-        />
-
-        <ITGrid container spacing={5}>
-          {PRODUCTOS.map((producto) => (
-            <ITGrid item xs={12} md={6} key={producto.id}>
-              <TarjetaProducto producto={producto} onVerDetalle={setDetalle} />
-            </ITGrid>
-          ))}
-        </ITGrid>
-      </section>
-
-      {/* ─── CIERRE ─── */}
-      <section className="relative overflow-hidden rounded-3xl border border-primary-200 bg-gradient-to-br from-primary-50 via-white to-purple-50 p-6 shadow-sm dark:border-primary-900/40 dark:from-primary-950/30 dark:via-slate-900 dark:to-purple-950/30 sm:p-10">
-        <div aria-hidden className="it-landing-float pointer-events-none absolute -top-20 -right-16 h-56 w-56 rounded-full bg-primary-400/20 blur-3xl" />
-        <div aria-hidden className="it-landing-grid pointer-events-none absolute inset-0 text-slate-400/40 dark:text-slate-600/30" />
-
-        <div className="relative z-10">
-          <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between lg:gap-10">
+        {/* ─── 03 · PRODUCTOS ─── */}
+        <section id="proyectos" className={ANCLA}>
+          <div className={`${HOJA} border-t pb-14 pt-12 sm:pt-16 ${FILETE}`}>
             <SectionHeading
-              eyebrow="Siguientes pasos"
-              title="¿Trabajamos juntos?"
-              subtitle="Estoy disponible para proyectos fullstack, de producto o de diseño de sistemas."
+              index={2}
+              label={t("showcase.home.eyebrowPortfolio")}
+              title={t("showcase.home.titleProducts")}
+              subtitle={t("showcase.home.subtitleProducts")}
             />
 
-            <ITFlex gap={3} wrap="wrap" align="center" className="shrink-0">
-              <a href={CV_URL} download>
-                <ITButton variant="filled" color="primary" icon={<FaDownload size={13} />}>
-                  Descargar CV
-                </ITButton>
-              </a>
-              <a href={LINKEDIN_URL} target="_blank" rel="noopener noreferrer">
-                <ITButton variant="outlined" color="secondary" icon={<FaLinkedin size={13} />}>
+            {/* Destacado: copy a la izquierda, captura a la derecha */}
+            <article className={`${CARD} overflow-hidden`}>
+              <div className="grid lg:grid-cols-12">
+                <div className="flex flex-col p-6 sm:p-8 lg:col-span-5">
+                  <ITFlex align="center" gap={2.5} wrap="wrap">
+                    <ITText as="span" className={EYEBROW}>
+                      <span className="tabular-nums">
+                        {numero(PRODUCTOS.findIndex((p) => p.id === destacado.id))}
+                      </span>
+                      {` — ${t("showcase.home.featuredLabel")}`}
+                    </ITText>
+                    <Etiqueta>{destacado.tipo}</Etiqueta>
+                  </ITFlex>
+
+                  <ITText
+                    as="h3"
+                    className="font-display !mt-4 !text-[26px] !font-bold -tracking-[0.02em] text-slate-900 dark:text-white"
+                  >
+                    {destacado.nombre}
+                  </ITText>
+
+                  <ITText
+                    as="p"
+                    className="!mt-3 !text-[14px] !leading-relaxed text-slate-600 dark:text-slate-300"
+                  >
+                    {destacado.descripcion}
+                  </ITText>
+
+                  {!!destacado.caracteristicas?.length && (
+                    <ul className="mt-5 space-y-2.5">
+                      {destacado.caracteristicas.slice(0, 3).map((caracteristica) => (
+                        <li key={caracteristica} className="flex gap-2.5">
+                          <FaCheck
+                            size={10}
+                            className="mt-1.5 shrink-0 text-primary-700 dark:text-primary-500"
+                          />
+                          <ITText
+                            as="span"
+                            className="!text-[13px] !leading-relaxed text-slate-600 dark:text-slate-300"
+                          >
+                            {caracteristica}
+                          </ITText>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+
+                  <ITFlex gap={1.5} wrap="wrap" className="!mt-5">
+                    {destacado.stack.map((tecnologia) => (
+                      <span key={tecnologia} className={CHIP}>
+                        {tecnologia}
+                      </span>
+                    ))}
+                  </ITFlex>
+
+                  <ITFlex gap={3} wrap="wrap" align="center" className="!mt-6">
+                    <EnlaceBoton href={`#proyecto/${destacado.id}`} tamano="sm">
+                      {t("showcase.home.viewDetail")}
+                    </EnlaceBoton>
+                    {destacado.enlace && (
+                      <a
+                        href={destacado.enlace}
+                        {...(enlaceDestacadoExterno
+                          ? { target: "_blank", rel: "noopener noreferrer" }
+                          : {})}
+                        className="inline-flex items-center gap-1.5 !text-xs !font-semibold !text-primary-700 dark:!text-primary-500"
+                      >
+                        {enlaceDestacadoExterno && <FaExternalLinkAlt size={10} />}
+                        {destacado.enlaceTexto ?? t("showcase.home.viewRepo")}
+                      </a>
+                    )}
+                  </ITFlex>
+                </div>
+
+                {portadaDestacada && (
+                  <figure className="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950 lg:col-span-7 lg:border-l lg:border-t-0">
+                    <div className="p-3 sm:p-5">
+                      <img
+                        src={portadaDestacada.src}
+                        alt={`${destacado.nombre}: ${portadaDestacada.titulo}`}
+                        className="w-full rounded-[6px] border border-slate-200 object-cover object-top dark:border-slate-800"
+                      />
+                    </div>
+                    <figcaption className="px-3 pb-4 font-mono text-[11px] leading-relaxed text-slate-500 dark:text-slate-400 sm:px-5">
+                      {portadaDestacada.titulo}
+                    </figcaption>
+                  </figure>
+                )}
+              </div>
+            </article>
+
+            {/* Resto: rejilla de tres */}
+            <ITGrid container spacing={5} className="!mt-6">
+              {resto.map((producto) => (
+                <ITGrid item xs={12} md={6} lg={4} key={producto.id}>
+                  <TarjetaProducto
+                    producto={producto}
+                    index={PRODUCTOS.findIndex((p) => p.id === producto.id)}
+                  />
+                </ITGrid>
+              ))}
+            </ITGrid>
+          </div>
+        </section>
+
+        {/* ─── 04 · CONTACTO ─── */}
+        <section id="contacto" className={ANCLA}>
+          <div className={`${HOJA} border-t py-14 sm:py-16 ${FILETE}`}>
+            <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
+              <div className="min-w-0">
+                <ITText as="p" className={EYEBROW}>
+                  <span className="tabular-nums">04</span>
+                  {` — ${t("showcase.home.navContact")}`}
+                </ITText>
+                <ITText
+                  as="h2"
+                  className="font-display !mt-3 !text-[32px] !font-bold !leading-[1.08] -tracking-[0.02em] text-slate-900 dark:text-white sm:!text-[44px]"
+                >
+                  {t("showcase.home.titleTogether")}
+                </ITText>
+                <ITText
+                  as="p"
+                  className="!mt-4 max-w-[58ch] !text-[15px] !leading-relaxed text-slate-600 dark:text-slate-300"
+                >
+                  {t("showcase.home.subtitleTogether")}
+                </ITText>
+              </div>
+
+              <ITFlex gap={3} wrap="wrap" align="center">
+                <EnlaceBoton href={CV_URL} descargar icono={<FaDownload size={12} />}>
+                  {t("showcase.home.downloadCv")}
+                </EnlaceBoton>
+                <EnlaceBoton
+                  href={LINKEDIN_URL}
+                  variante="outlined"
+                  icono={<FaLinkedin size={12} />}
+                >
                   LinkedIn
-                </ITButton>
+                </EnlaceBoton>
+              </ITFlex>
+            </div>
+
+            <ITText
+              as="p"
+              className="!mt-8 font-mono !text-[11px] !tracking-[0.06em] text-slate-500 dark:text-slate-400"
+            >
+              {t("showcase.home.writingPrefix")}{" "}
+              <a
+                href={MEDIUM_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="!font-semibold !text-primary-700 dark:!text-primary-500"
+              >
+                Medium
+              </a>{" "}
+              {t("showcase.home.codeOn")}{" "}
+              <a
+                href={GITHUB_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="!font-semibold !text-primary-700 dark:!text-primary-500"
+              >
+                GitHub
               </a>
-            </ITFlex>
+              .
+            </ITText>
           </div>
+        </section>
+      </main>
 
-          <ITText as="p" className="!mt-6 !text-xs text-slate-500 dark:text-slate-400">
-            También escribo en{" "}
-            <a
-              href={MEDIUM_URL}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-semibold text-primary-600 dark:text-primary-400"
+      {/* ─── PIE ─── */}
+      <footer className={`border-t ${FILETE}`}>
+        <div
+          className={`${HOJA} flex flex-col items-start justify-between gap-3 py-7 sm:flex-row sm:items-center`}
+        >
+          <ITText
+            as="p"
+            className="font-mono !text-[11px] uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400"
+          >
+            {`Asael Amaro · ${t("showcase.home.role")}`}
+          </ITText>
+          <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
+            <ITText
+              as="span"
+              className="font-mono !text-[11px] uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400"
             >
-              <FaMedium size={11} />
-              Medium
-            </a>{" "}
-            y el código de mis productos está en{" "}
+              {t("showcase.home.badge")}
+            </ITText>
             <a
-              href={GITHUB_URL}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-semibold text-primary-600 dark:text-primary-400"
+              href={SANDBOX_URL}
+              className="inline-flex items-center gap-1.5 font-mono !text-[11px] uppercase !tracking-[0.14em] text-slate-500 transition-colors hover:text-primary-700 dark:text-slate-400 dark:hover:text-primary-500"
             >
-              <FaGithub size={11} />
-              GitHub
+              {t("showcase.home.footerBuiltWith")}
+              <FaArrowRight size={10} />
             </a>
-            .
-          </ITText>
+          </div>
         </div>
-      </section>
+      </footer>
 
-      {/* Pantalla de detalle del producto elegido */}
-      {detalle && <ProductoDetalle producto={detalle} onClose={() => setDetalle(null)} />}
-    </ITStack>
+      <VolverArriba />
+    </>
   );
 };