diff --git a/src/app/page.tsx b/src/app/page.tsx
index 05a2ed0..05292ab 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,10 +8,12 @@ import {
   getModuleMeta,
   getStatusInfo,
   moduleUrl,
+  REFERENCE_APPS,
   sectionOf,
   SECTIONS,
   type ApiResponse,
   type ModuleState,
+  type RefApp,
 } from "@/lib/sam";
 
 // Store externo: evita setState en efectos (regla react-hooks)
@@ -80,6 +82,42 @@ export default function Home() {
     bySection[s].push(m);
   });
 
+  const renderRefCard = (app: RefApp) => (
+    <div className="col-md-6" key={`ref-${app.name}`}>
+      <div className="app-card p-2">
+        <table className="table table-borderless mb-0 align-middle">
+          <tbody>
+            <tr>
+              <td className="ps-3" style={{ width: 56 }}>
+                <i
+                  className={`bx ${app.icon} bx-sm bx-border text-light ${app.bg}`}
+                />
+              </td>
+              <td>
+                <a
+                  href={app.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-decoration-none text-dark d-block py-2 stretched-link"
+                >
+                  {app.title}
+                </a>
+                <div className="d-flex align-items-center gap-2">
+                  <small className="text-muted" style={{ fontSize: "0.75rem" }}>
+                    sam.norteamericano.cl
+                  </small>
+                </div>
+              </td>
+              <td className="text-end pe-3" style={{ width: 40 }}>
+                <i className="bx bx-chevron-right text-muted" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+
   const renderModuleCard = (m: ModuleState) => {
     const meta = getModuleMeta(m.name);
     const status = getStatusInfo(m);
@@ -229,6 +267,14 @@ export default function Home() {
 
                         {list.map(renderModuleCard)}
 
+                        {section.id === "sam" &&
+                          REFERENCE_APPS.filter(
+                            (a) =>
+                              !list.some(
+                                (m) => m.name.toLowerCase() === a.name
+                              )
+                          ).map(renderRefCard)}
+
                         {isReview && backend && (
                           <>
                             <div className="col-md-6">
diff --git a/src/lib/sam.ts b/src/lib/sam.ts
index b6532f6..87a7b40 100644
--- a/src/lib/sam.ts
+++ b/src/lib/sam.ts
@@ -131,7 +131,58 @@ export function getModuleFunctions(name: string): ApiFunction[] {
   return CORE;
 }
 
-// --- Meta visual por módulo (iconos boxicons + fondo) ---
+// ============================================================
+// Apps de referencia (lanzador sam.norteamericano.cl).
+// Mientras no exista el módulo integrado, la sección SAM
+// muestra el acceso legacy; al integrarse, la tarjeta del
+// módulo reemplaza al acceso.
+// ============================================================
+
+export interface RefApp {
+  name: string;
+  title: string;
+  icon: string;
+  bg: string;
+  url: string;
+}
+
+export const REFERENCE_APPS: RefApp[] = [
+  {
+    name: "ventas",
+    title: "Ventas",
+    icon: "bx-money",
+    bg: "bg-success",
+    url: "https://sam.norteamericano.cl/ventas/login.aspx",
+  },
+  {
+    name: "comercial",
+    title: "Comercial",
+    icon: "bx-money",
+    bg: "bg-success",
+    url: "https://sam.norteamericano.cl/comercial/",
+  },
+  {
+    name: "contabilidad",
+    title: "Finanzas",
+    icon: "bx-detail",
+    bg: "bg-danger",
+    url: "https://sam.norteamericano.cl/contabilidad/",
+  },
+  {
+    name: "academico",
+    title: "Académico",
+    icon: "bx-user",
+    bg: "bg-primary",
+    url: "https://sam.norteamericano.cl/academico/",
+  },
+  {
+    name: "profesores",
+    title: "Profesor",
+    icon: "bx-pencil",
+    bg: "bg-warning text-dark",
+    url: "https://sam.norteamericano.cl/profesor/",
+  },
+];
 const iconMap: Record<string, { icon: string; bg: string }> = {
   sam: { icon: "bx-layer", bg: "bg-primary" },
   ventas: { icon: "bx-money", bg: "bg-success" },