@eduardoalvarez/arrecife 0.1.1 → 0.3.0

package/dist/index.cjs

@@ -220,11 +220,11 @@ var control = {
   icon: 42
 };
 var spacing = {
-  xs: 8,
-  sm: 12,
-  md: 16,
-  lg: 26,
-  xl: 40,
+  stepXs: 8,
+  stepSm: 12,
+  stepMd: 16,
+  stepLg: 26,
+  stepXl: 40,
   section: 96
 };
 var size = {
@@ -304,10 +304,11 @@ var tokens = {
   tagline,
   naming
 };
+var kebab = (nombre) => nombre.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 var escalas = Object.keys(typeScale);
 var radios = Object.keys(radius);
-var espacios = Object.keys(spacing);
-var controles = Object.keys(control).map((nombre) => `control-${nombre}`);
+var espacios = Object.keys(spacing).map(kebab);
+var controles = Object.keys(control).map((nombre) => `control-${kebab(nombre)}`);
 var twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
     classGroups: {
@@ -324,7 +325,7 @@ var twMerge = tailwindMerge.extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx.clsx(inputs));
 }
-var alert = classVarianceAuthority.cva("w-full rounded-card border p-md font-sans text-ui", {
+var alert = classVarianceAuthority.cva("w-full rounded-card border p-step-md font-sans text-ui", {
   variants: {
     variant: {
       accent: "text-text-secondary",
@@ -377,7 +378,7 @@ function Alert({
       role: tono === "error" ? "alert" : "status",
       className: cn(alert({ variant, enfasis }), className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-start", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-start", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -387,7 +388,7 @@ function Alert({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-          title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-xs text-text-primary font-medium", children: title }) : null,
+          title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-step-xs text-text-primary font-medium", children: title }) : null,
           children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-measure", children }) : null
         ] })
       ] })
@@ -433,7 +434,7 @@ function AvatarFallback({
   );
 }
 var badge = classVarianceAuthority.cva(
-  ["inline-flex items-center gap-xs", "rounded-chip px-xs py-0.5", "font-sans text-tag", "transition-standard"],
+  ["inline-flex items-center gap-step-xs", "rounded-chip px-step-xs py-0.5", "font-sans text-tag", "transition-standard"],
   {
     variants: {
       variant: {
@@ -453,8 +454,8 @@ function Badge({ className, variant, ...props }) {
 }
 var categoria = classVarianceAuthority.cva(
   [
-    "inline-flex items-center gap-xs",
-    "rounded-pill px-sm py-0.5",
+    "inline-flex items-center gap-step-xs",
+    "rounded-pill px-step-sm py-0.5",
     "font-mono text-chip",
     "border transition-standard"
   ],
@@ -478,12 +479,12 @@ function CategoryBadge({ className, active = false, ...props }) {
     }
   );
 }
-var metrica = ["inline-flex items-center gap-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
+var metrica = ["inline-flex items-center gap-step-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
 function MetricBadge({ className, boxed = false, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cn(metrica, boxed && "border-hairline px-sm py-0.5 border", className),
+      className: cn(metrica, boxed && "border-hairline px-step-sm py-0.5 border", className),
       ...props
     }
   );
@@ -593,7 +594,7 @@ var VolumeOn = (props) => /* @__PURE__ */ jsxRuntime.jsx(GlifoMedia, { fill: "cu
 var VolumeMuted = (props) => /* @__PURE__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) });
 var button = classVarianceAuthority.cva(
   [
-    "inline-flex cursor-pointer items-center justify-center gap-xs whitespace-nowrap select-none",
+    "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
     "rounded-control font-sans font-medium",
     "transition-standard",
     "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
@@ -702,8 +703,8 @@ function Calendar({
         // la raíz, y sin esto se ancla al primer ancestro posicionado —o al
         // viewport— y las flechas acaban en los bordes de la página.
         root: cn("relative", fullWidth ? "w-full" : "w-fit"),
-        months: cn("gap-md flex flex-col sm:flex-row", fullWidth && "w-full"),
-        month: cn("gap-sm flex flex-col", fullWidth && "min-w-0 flex-1"),
+        months: cn("gap-step-md flex flex-col sm:flex-row", fullWidth && "w-full"),
+        month: cn("gap-step-sm flex flex-col", fullWidth && "min-w-0 flex-1"),
         month_caption: "h-8 flex items-center justify-center",
         caption_label: "text-ui font-sans font-medium text-text-primary capitalize",
         nav: "absolute inset-x-0 top-0 flex items-center justify-between",
@@ -731,7 +732,7 @@ function Calendar({
         range_start: "[&_button]:bg-accent [&_button]:text-accent-on [&_button]:rounded-r-none",
         range_middle: "[&_button]:bg-surface-raised [&_button]:text-text-primary [&_button]:rounded-none",
         range_end: "[&_button]:bg-accent [&_button]:text-accent-on [&_button]:rounded-l-none",
-        footer: "text-label font-sans text-text-secondary pt-sm",
+        footer: "text-label font-sans text-text-secondary pt-step-sm",
         ...classNames
       },
       components: {
@@ -821,7 +822,7 @@ function Card({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(SUPERFICIE_TARJETA, className), ...props });
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-xs p-lg flex flex-col", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-step-xs p-step-lg flex flex-col", className), ...props });
 }
 function CardTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className, ...props });
@@ -830,13 +831,13 @@ function CardDescription({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className, ...props });
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-lg pb-lg", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-step-lg pb-step-lg", className), ...props });
 }
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn("border-hairline px-lg py-md gap-sm flex items-center border-t", className),
+      className: cn("border-hairline px-step-lg py-step-md gap-step-sm flex items-center border-t", className),
       ...props
     }
   );
@@ -887,7 +888,7 @@ function DateField({
       "data-invalid": invalid || void 0,
       "aria-invalid": invalid || void 0,
       className: cn(
-        "px-sm h-10 w-full",
+        "px-step-sm h-10 w-full",
         "rounded-control border-border bg-surface border",
         "font-mono text-ui text-text-primary",
         "transition-standard",
@@ -930,7 +931,7 @@ function DialogContent({
       {
         className: cn(
           "fixed top-1/2 left-1/2 z-50 w-full max-w-content -translate-x-1/2 -translate-y-1/2",
-          "gap-md p-lg flex flex-col",
+          "gap-step-md p-step-lg flex flex-col",
           "rounded-panel border-border bg-surface shadow-standard border",
           "text-text-primary font-sans",
           className
@@ -957,10 +958,10 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-xs flex flex-col pr-8", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-step-xs flex flex-col pr-8", className), ...props });
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-sm flex flex-col-reverse sm:flex-row sm:justify-end", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-step-sm flex flex-col-reverse sm:flex-row sm:justify-end", className), ...props });
 }
 function DialogTitle({
   className,
@@ -997,7 +998,7 @@ var panel = [
   "text-text-primary font-sans"
 ];
 var item = [
-  "rounded-chip px-sm relative flex h-9 cursor-default items-center gap-2 select-none",
+  "rounded-chip px-step-sm relative flex h-9 cursor-default items-center gap-2 select-none",
   "text-ui text-text-secondary transition-standard",
   "data-[highlighted]:bg-surface data-[highlighted]:text-text-primary",
   "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
@@ -1049,7 +1050,7 @@ function DropdownMenuLabel({
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Label,
     {
-      className: cn("px-sm text-eyebrow font-mono text-text-secondary py-1.5 uppercase", className),
+      className: cn("px-step-sm text-eyebrow font-mono text-text-secondary py-1.5 uppercase", className),
       ...props
     }
   );
@@ -1090,7 +1091,7 @@ function Input({ className, invalid = false, ...props }) {
       "data-invalid": invalid || void 0,
       "aria-invalid": invalid || void 0,
       className: cn(
-        "h-10 w-full px-sm",
+        "h-10 w-full px-step-sm",
         "rounded-control border border-border bg-surface",
         "font-sans text-ui text-text-primary placeholder:text-text-muted",
         "transition-standard",
@@ -1098,7 +1099,7 @@ function Input({ className, invalid = false, ...props }) {
         "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
-        "file:mr-sm file:border-0 file:bg-transparent file:font-sans file:text-label file:text-text-secondary",
+        "file:mr-step-sm file:border-0 file:bg-transparent file:font-sans file:text-label file:text-text-secondary",
         className
       ),
       ...props
@@ -1130,7 +1131,7 @@ function Pagination({ className, ...props }) {
   );
 }
 function PaginationContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("gap-xs flex flex-row items-center", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("gap-step-xs flex flex-row items-center", className), ...props });
 }
 function PaginationItem(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("li", { ...props });
@@ -1141,7 +1142,7 @@ function PaginationLink({ className, isActive = false, ...props }) {
     {
       "aria-current": isActive ? "page" : void 0,
       className: cn(
-        "rounded-chip px-sm inline-flex h-9 min-w-9 cursor-pointer items-center justify-center",
+        "rounded-chip px-step-sm inline-flex h-9 min-w-9 cursor-pointer items-center justify-center",
         "font-sans text-ui text-text-secondary",
         "transition-standard",
         "hover:bg-surface hover:text-text-primary",
@@ -1154,13 +1155,13 @@ function PaginationLink({ className, isActive = false, ...props }) {
   );
 }
 function PaginationPrevious({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-xs", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-step-xs", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {}),
     "Anterior"
   ] });
 }
 function PaginationNext({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-xs", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-step-xs", className), ...props, children: [
     "Siguiente",
     /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
   ] });
@@ -1191,7 +1192,7 @@ function PopoverContent({
       align,
       sideOffset,
       className: cn(
-        "z-50 w-72 p-md",
+        "z-50 w-72 p-step-md",
         "rounded-panel border-border bg-surface-raised shadow-standard border",
         "text-text-primary font-sans text-ui",
         "outline-none",
@@ -1220,7 +1221,7 @@ function Progress({ className, value, label, tone = "accent", ...props }) {
   );
 }
 function RadioGroup2({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("gap-sm grid", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("gap-step-sm grid", className), ...props });
 }
 function RadioGroupItem({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1252,7 +1253,7 @@ function SelectTrigger({
     SelectPrimitive__namespace.Trigger,
     {
       className: cn(
-        "gap-sm px-sm flex h-10 w-full cursor-pointer items-center justify-between",
+        "gap-step-sm px-step-sm flex h-10 w-full cursor-pointer items-center justify-between",
         "rounded-control border-border bg-surface border",
         "font-sans text-ui text-text-primary",
         "transition-standard",
@@ -1303,7 +1304,7 @@ function SelectLabel({
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Label,
     {
-      className: cn("px-sm text-eyebrow font-mono text-text-secondary py-1.5 uppercase", className),
+      className: cn("px-step-sm text-eyebrow font-mono text-text-secondary py-1.5 uppercase", className),
       ...props
     }
   );
@@ -1317,7 +1318,7 @@ function SelectItem({
     SelectPrimitive__namespace.Item,
     {
       className: cn(
-        "rounded-chip px-sm relative flex h-9 w-full cursor-default items-center pr-8 select-none",
+        "rounded-chip px-step-sm relative flex h-9 w-full cursor-default items-center pr-8 select-none",
         "text-ui text-text-secondary transition-standard",
         "data-[highlighted]:bg-surface data-[highlighted]:text-text-primary",
         "data-[state=checked]:text-text-primary",
@@ -1419,19 +1420,19 @@ function SheetHeader({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn("border-hairline gap-xs p-lg flex flex-col border-b pr-12", className),
+      className: cn("border-hairline gap-step-xs p-step-lg flex flex-col border-b pr-12", className),
       ...props
     }
   );
 }
 function SheetBody({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-lg flex-1 overflow-y-auto", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-step-lg flex-1 overflow-y-auto", className), ...props });
 }
 function SheetFooter({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn("border-hairline gap-sm p-lg flex flex-wrap justify-end border-t", className),
+      className: cn("border-hairline gap-step-sm p-step-lg flex flex-wrap justify-end border-t", className),
       ...props
     }
   );
@@ -1542,7 +1543,7 @@ function TableHead({ className, ...props }) {
     "th",
     {
       className: cn(
-        "px-sm h-10 text-left align-middle",
+        "px-step-sm h-10 text-left align-middle",
         "text-eyebrow font-mono text-text-muted uppercase",
         className
       ),
@@ -1551,13 +1552,13 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: cn("px-sm py-sm text-text-secondary align-middle", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: cn("px-step-sm py-step-sm text-text-secondary align-middle", className), ...props });
 }
 function TableCaption({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("caption", { className: cn("mt-sm text-label text-text-muted", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("caption", { className: cn("mt-step-sm text-label text-text-muted", className), ...props });
 }
 function Tabs({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { className: cn("gap-md flex flex-col", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { className: cn("gap-step-md flex flex-col", className), ...props });
 }
 function TabsList({
   className,
@@ -1566,7 +1567,7 @@ function TabsList({
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.List,
     {
-      className: cn("rounded-control bg-surface gap-xs inline-flex items-center p-1", className),
+      className: cn("rounded-control bg-surface gap-step-xs inline-flex items-center p-1", className),
       ...props
     }
   );
@@ -1579,7 +1580,7 @@ function TabsTrigger({
     TabsPrimitive__namespace.Trigger,
     {
       className: cn(
-        "rounded-chip px-sm inline-flex h-8 cursor-pointer items-center justify-center whitespace-nowrap",
+        "rounded-chip px-step-sm inline-flex h-8 cursor-pointer items-center justify-center whitespace-nowrap",
         "font-sans text-label text-text-secondary",
         "transition-standard",
         "hover:text-text-primary",
@@ -1614,7 +1615,7 @@ function Textarea({ className, invalid = false, ...props }) {
       "data-invalid": invalid || void 0,
       "aria-invalid": invalid || void 0,
       className: cn(
-        "min-h-24 w-full px-sm py-xs",
+        "min-h-24 w-full px-step-sm py-step-xs",
         "rounded-control border border-border bg-surface",
         "font-sans text-ui text-text-primary placeholder:text-text-muted",
         "transition-standard",
@@ -1638,7 +1639,7 @@ function ToastViewport({
     ToastPrimitive__namespace.Viewport,
     {
       className: cn(
-        "gap-sm p-lg fixed right-0 bottom-0 z-50 flex max-h-screen w-full flex-col-reverse",
+        "gap-step-sm p-step-lg fixed right-0 bottom-0 z-50 flex max-h-screen w-full flex-col-reverse",
         "sm:max-w-[420px] sm:flex-col",
         className
       ),
@@ -1648,7 +1649,7 @@ function ToastViewport({
 }
 var toast = classVarianceAuthority.cva(
   [
-    "gap-md p-md pr-10 relative flex w-full items-start justify-between",
+    "gap-step-md p-step-md pr-10 relative flex w-full items-start justify-between",
     "rounded-card border bg-surface shadow-standard",
     "font-sans text-ui text-text-secondary"
   ],
@@ -1712,7 +1713,7 @@ function TooltipContent({
     {
       sideOffset,
       className: cn(
-        "z-50 px-sm py-1.5",
+        "z-50 px-step-sm py-1.5",
         "rounded-chip border-border bg-surface-raised shadow-standard border",
         "font-sans text-label text-text-primary",
         className
@@ -1748,14 +1749,14 @@ function ArticleCard({
       " min de lectura"
     ] }, "lectura") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
-    meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-xs flex items-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+    meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-step-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
     excerpt ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: excerpt }) : null,
-    tags && tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-xs mt-auto flex flex-wrap pt-sm", children: tags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(CategoryBadge, { children: t }, t)) }) : null
+    tags && tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-xs mt-auto flex flex-wrap pt-step-sm", children: tags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(CategoryBadge, { children: t }, t)) }) : null
   ] }) });
 }
 var AVATAR = "size-[52px]";
@@ -1763,16 +1764,16 @@ function iniciales(nombre) {
   return nombre.split(/\s+/).slice(0, 2).map((p) => p[0] ?? "").join("").toUpperCase();
 }
 function AuthorCard({ name, role, src, bio, action, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-lg gap-md flex items-start", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-md flex items-start", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn(AVATAR, "shrink-0"), children: [
       src ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, alt: "" }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: iniciales(name) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex min-w-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: name }),
       role ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "chip", tone: "muted", as: "p", children: role }) : null,
-      bio ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "mt-xs", children: bio }) : null,
-      action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-xs gap-sm flex flex-wrap items-center", children: action }) : null
+      bio ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "mt-step-xs", children: bio }) : null,
+      action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-step-xs gap-step-sm flex flex-wrap items-center", children: action }) : null
     ] })
   ] });
 }
@@ -1891,7 +1892,7 @@ function Volumen({
   onSilenciar,
   onCambiarVolumen
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs hidden items-center sm:flex", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs hidden items-center sm:flex", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -2138,8 +2139,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             ...puntero
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm px-md flex items-center py-5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex shrink-0 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm px-step-md flex items-center py-5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex shrink-0 items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Onda, { grosor: "w-[2px]", alto: "h-4", sonando: isPlaying }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-accent hidden uppercase sm:block", children: "Narraci\xF3n" })
           ] }),
@@ -2156,7 +2157,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             /* @__PURE__ */ jsxRuntime.jsx(
               BotonPlay,
               {
-                className: "rounded-pill px-sm gap-xs flex items-center py-1.5",
+                className: "rounded-pill px-step-sm gap-step-xs flex items-center py-1.5",
                 tamano: "w-4 h-4",
                 etiqueta: etiquetaPlay,
                 onAlternar: togglePlay,
@@ -2181,7 +2182,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: staticRef, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm mb-md flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm mb-step-md flex items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Onda, { grosor: "w-[3px]", alto: "h-5", sonando: isPlaying }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-accent uppercase", children: "Narraci\xF3n de audio" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-chip font-mono text-text-muted ml-auto tabular-nums", children: [
@@ -2190,13 +2191,13 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             formatTime(duration)
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-md", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-md", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
           /* @__PURE__ */ jsxRuntime.jsx(
             BotonPlay,
             {
-              className: "rounded-pill px-lg gap-xs text-ui flex items-center py-2 font-medium",
+              className: "rounded-pill px-step-lg gap-step-xs text-ui flex items-center py-2 font-medium",
               tamano: "w-4 h-4",
               etiqueta: etiquetaPlay,
               texto: etiquetaPlay,
@@ -2205,7 +2206,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm ml-auto flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm ml-auto flex items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               BotonVelocidad,
               {
@@ -2235,8 +2236,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: staticRef, className: "w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-xs", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-sm flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-xs", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(currentTime) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
         ] }),
@@ -2268,16 +2269,16 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       flotanteJsx
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface rounded-control border-border p-md w-full border", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface rounded-control border-border p-step-md w-full border", children: [
     /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
-    title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui font-sans text-text-secondary mb-sm truncate", children: title }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-sm", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-sm flex justify-between", children: [
+    title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui font-sans text-text-secondary mb-step-sm truncate", children: title }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-sm", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(currentTime) }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip }),
         /* @__PURE__ */ jsxRuntime.jsx(
           BotonPlay,
@@ -2291,7 +2292,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
         ),
         /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           BotonVelocidad,
           {
@@ -2319,11 +2320,11 @@ function Blockquote({ children, author, source, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "blockquote",
     {
-      className: cn("border-accent pl-md my-lg border-l-2", className),
+      className: cn("border-accent pl-step-md my-step-lg border-l-2", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children }),
-        author || source ? /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "mt-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "muted", as: "span", children: [
+        author || source ? /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "mt-step-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "muted", as: "span", children: [
           author ? /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "not-italic", children: author }) : null,
           author && source ? " \xB7 " : null,
           source
@@ -2342,11 +2343,11 @@ function Breadcrumb({
   ...props
 }) {
   const enlace = (href, contenido) => linkAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: ENLACE, children: linkAsChild({ href, children: contenido }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: ENLACE, children: contenido });
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "gap-xs flex flex-wrap items-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "gap-step-xs flex flex-wrap items-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx("li", { children: enlace(homeHref, /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": homeLabel, children: "~" })) }),
     items.map((item2, i) => {
       const ultimo = i === items.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "gap-xs flex items-center", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-border", children: "/" }),
         item2.href && !ultimo ? enlace(item2.href, item2.label) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": ultimo ? "page" : void 0, className: "text-text-secondary", children: item2.label })
       ] }, i);
@@ -2376,7 +2377,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-hairline px-sm flex items-center justify-between border-b py-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-hairline px-step-sm flex items-center justify-between border-b py-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-eyebrow font-mono text-text-muted uppercase", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "\u276F" }),
             " ",
@@ -2390,7 +2391,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
               "aria-label": copiado ? "C\xF3digo copiado" : "Copiar c\xF3digo",
               "aria-live": "polite",
               className: cn(
-                "gap-xs rounded-chip flex items-center px-2 py-1",
+                "gap-step-xs rounded-chip flex items-center px-2 py-1",
                 "text-label font-mono text-text-muted cursor-pointer",
                 "transition-standard hover:bg-surface hover:text-text-primary",
                 "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
@@ -2402,7 +2403,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-step-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
       ]
     }
   );
@@ -2416,15 +2417,15 @@ function CourseCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
     status ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warm", children: status }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
     summary ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
-    meta && meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-xs flex items-center", children: [
+    meta && meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null,
-    typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs mt-auto flex flex-col pt-sm", children: [
+    typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs mt-auto flex flex-col pt-step-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Progress, { value: progress, tone: "warm", label: `Progreso del curso: ${progress}%` }),
       /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "muted", as: "p", children: [
         progress,
@@ -2515,13 +2516,13 @@ function EmptyState({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(SUPERFICIE_TARJETA, "p-lg gap-sm flex flex-col items-center text-center", className),
+      className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-sm flex flex-col items-center text-center", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(CaraDeMascota, { expresion, className: CARA, basePath }),
         /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: title }),
         description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "max-w-measure font-normal", children: description }) : null,
-        action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-xs", children: action }) : null
+        action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-step-xs", children: action }) : null
       ]
     }
   );
@@ -2533,8 +2534,8 @@ function Footer({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-md py-xl gap-lg mx-auto flex flex-col", children: [
-    children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-md flex flex-wrap items-center", children }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-step-md py-step-xl gap-step-lg mx-auto flex flex-col", children: [
+    children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-md flex flex-wrap items-center", children }) : null,
     social && social.length > 0 ? (
       // 18px de separación, del documento. No es un escalón de `spacing`:
       // es el ritmo de una fila de iconos, no el de una página.
@@ -2593,16 +2594,16 @@ function Hero({
       className: cn(
         "degradado-hero rounded-panel border-hairline relative overflow-hidden border",
         // 44 arriba, 40 a los lados y abajo. Del documento.
-        "px-xl pt-[44px] pb-xl",
+        "px-step-xl pt-[44px] pb-step-xl",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-md flex flex-col md:max-w-[62%]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-md flex flex-col md:max-w-[62%]", children: [
           eyebrow ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h1", variant: "display", children: title }),
           description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
-          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-sm mt-xs flex flex-wrap items-center", children: action }) : null
+          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm mt-step-xs flex flex-wrap items-center", children: action }) : null
         ] }),
         pose ? /* @__PURE__ */ jsxRuntime.jsx(
           Mascota,
@@ -2612,7 +2613,7 @@ function Hero({
             className: cn(
               // En móvil, en el flujo y bajo los botones. Desde md, sangrando por
               // la esquina inferior derecha.
-              "mt-lg mx-auto w-40",
+              "mt-step-lg mx-auto w-40",
               "md:mt-0 md:absolute md:right-0 md:-bottom-4 md:mx-0 md:w-64"
             )
           }
@@ -2634,11 +2635,11 @@ function LinkRow({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tarjeta,
     {
-      className: cn("px-md py-sm", className),
+      className: cn("px-step-md py-step-sm", className),
       ...props,
       rel,
       ...target ? { target } : {},
-      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-sm flex items-center", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-sm flex items-center", children: [
         icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted group-hover:text-accent transition-standard shrink-0 text-2xl", children: icon }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", variant: "ui", className: "group-hover:text-accent transition-standard block font-medium", children: name }),
@@ -2668,10 +2669,10 @@ function Nav({ brand: brand2, children, actions, className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-md h-nav gap-lg mx-auto flex items-center", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-step-md h-nav gap-step-lg mx-auto flex items-center", children: [
         brand2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: brand2 }) : null,
-        children ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-md flex items-center", children }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-        actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-sm flex shrink-0 items-center", children: actions }) : null
+        children ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-step-md flex items-center", children }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+        actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
       ] })
     }
   );
@@ -2725,17 +2726,17 @@ function NewsletterForm({
     "section",
     {
       className: cn(
-        "degradado-seccion rounded-panel border-hairline p-lg gap-md flex flex-col border",
+        "degradado-seccion rounded-panel border-hairline p-step-lg gap-step-md flex flex-col border",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-col", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h2", variant: "h3", children: title }),
           description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", children: description }) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: enviar, className: "gap-sm flex flex-col sm:flex-row sm:items-end", noValidate: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: enviar, className: "gap-step-sm flex flex-col sm:flex-row sm:items-end", noValidate: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: id, children: fieldLabel }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
@@ -2765,7 +2766,7 @@ function NewsletterForm({
         ] }),
         state === "exito" ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-aviso`, variant: "success", enfasis: "fuerte", children: successMessage }) : null,
         error ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-aviso`, variant: "error", enfasis: "fuerte", children: errorMessage }) : null,
-        disclaimer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-center", children: [
+        disclaimer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
           expresion ? /* @__PURE__ */ jsxRuntime.jsx(CaraDeMascota, { expresion, basePath, className: "w-10 max-w-none" }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "font-normal", children: disclaimer })
         ] }) : null
@@ -2773,11 +2774,11 @@ function NewsletterForm({
     }
   );
 }
-var cabecera = classVarianceAuthority.cva("gap-sm flex flex-col", {
+var cabecera = classVarianceAuthority.cva("gap-step-sm flex flex-col", {
   variants: {
     size: {
       display: "py-section",
-      page: "py-xl"
+      page: "py-step-xl"
     }
   },
   defaultVariants: { size: "page" }
@@ -2796,7 +2797,7 @@ function PageHeader({
     eyebrow ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as, variant: size2 === "display" ? "display" : "h1", className: "max-w-measure", children: title }),
     description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
-    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-sm mt-sm flex flex-wrap items-center", children: action }) : null
+    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm mt-step-sm flex flex-wrap items-center", children: action }) : null
   ] });
 }
 function SidebarItem({
@@ -2813,7 +2814,7 @@ function SidebarItem({
     {
       "aria-current": active ? "page" : void 0,
       className: cn(
-        "rounded-chip px-sm gap-xs flex cursor-pointer items-center py-1.5",
+        "rounded-chip px-step-sm gap-step-xs flex cursor-pointer items-center py-1.5",
         "font-mono text-meta transition-standard",
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
         // El activo es fondo `surfaceRaised` y tinta primaria, igual que
@@ -2847,14 +2848,14 @@ function SidebarNav({
     {
       "aria-label": typeof title === "string" ? title : "Administraci\xF3n",
       className: cn(
-        "border-hairline bg-surface p-sm gap-sm flex h-full flex-col border-r",
+        "border-hairline bg-surface p-step-sm gap-step-sm flex h-full flex-col border-r",
         className
       ),
       ...props,
       children: [
-        title ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-sm", children: title }) : null,
+        title ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-0.5 flex flex-1 flex-col", children }),
-        pie.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "border-hairline px-sm pt-sm border-t", children: pie.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        pie.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "border-hairline px-step-sm pt-step-sm border-t", children: pie.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
           i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
           p
         ] }, i)) }) : null
@@ -2863,7 +2864,7 @@ function SidebarNav({
   );
 }
 function Stat({ value, label, tone = "neutral", progress, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-lg gap-xs flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "stat", as: "p", tone: tone === "alerta" ? "warm" : "accent", children: value }),
     /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: label }),
     typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2872,7 +2873,7 @@ function Stat({ value, label, tone = "neutral", progress, className, ...props })
         value: progress,
         tone: tone === "alerta" ? "warm" : "accent",
         label: `${label}: ${progress}%`,
-        className: "mt-sm"
+        className: "mt-step-sm"
       }
     ) : null
   ] });
@@ -2891,13 +2892,13 @@ function TalkCard({
     date ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime, children: date }, "fecha") : null,
     location ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: location }, "lugar") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-start justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: event }),
       status ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "neutral", children: status }) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
-    pie.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-xs mt-auto flex items-center pt-sm", children: pie.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-xs flex items-center", children: [
+    pie.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs mt-auto flex items-center pt-step-sm", children: pie.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null
@@ -2911,16 +2912,16 @@ function TableOfContents({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-sm flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-step-sm flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "border-hairline gap-xs flex flex-col border-l", children: items.map((item2) => {
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "border-hairline gap-step-xs flex flex-col border-l", children: items.map((item2) => {
       const activo = item2.href === activeHref;
       const clases = cn(
-        "px-sm -ml-px block border-l",
+        "px-step-sm -ml-px block border-l",
         "font-sans text-label transition-standard",
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
         "cursor-pointer",
-        item2.nested && "pl-lg",
+        item2.nested && "pl-step-lg",
         activo ? "border-accent text-accent" : "border-transparent text-text-secondary hover:text-text-primary"
       );
       return /* @__PURE__ */ jsxRuntime.jsx("li", { children: linkAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: clases, "aria-current": activo ? "location" : void 0, children: linkAsChild({ href: item2.href, children: item2.label }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: item2.href, className: clases, "aria-current": activo ? "location" : void 0, children: item2.label }) }, item2.href);
@@ -2954,7 +2955,7 @@ function Logo({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("gap-xs inline-flex items-center", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Isotipo,
       {