@eduardoalvarez/arrecife 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,9 +1,9 @@
-export { tokens } from './chunk-22OXRTAL.js';
-import { cn, CaraDeMascota, Mascota } from './chunk-ZL5X6XO7.js';
-export { CaraDeMascota, Isotipo, Logo, Mascota, cn } from './chunk-ZL5X6XO7.js';
+export { tokens } from './chunk-VSMW2CT4.js';
+import { cn, CaraDeMascota, Mascota } from './chunk-ND45OQOC.js';
+export { CaraDeMascota, Isotipo, Logo, Mascota, cn } from './chunk-ND45OQOC.js';
 export { RUTA_ASSETS, aletas, caras, listaCaras, listaPoses, poses, usoDeCara } from './chunk-E3OMP2DL.js';
-import { __export, naming } from './chunk-DHF63QNM.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, typeScale } from './chunk-DHF63QNM.js';
+import { __export, naming } from './chunk-I7GYZD2A.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, typeScale } from './chunk-I7GYZD2A.js';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -25,7 +25,7 @@ import * as ToastPrimitive from '@radix-ui/react-toast';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useRef, useState, useEffect, useCallback, useId } from 'react';
 
-var alert = cva("w-full rounded-card border p-md font-sans text-ui", {
+var alert = cva("w-full rounded-card border p-step-md font-sans text-ui", {
   variants: {
     variant: {
       accent: "text-text-secondary",
@@ -78,7 +78,7 @@ function Alert({
       role: tono === "error" ? "alert" : "status",
       className: cn(alert({ variant, enfasis }), className),
       ...props,
-      children: /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-start", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-start", children: [
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -88,7 +88,7 @@ function Alert({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          title ? /* @__PURE__ */ jsx("p", { className: "mb-xs text-text-primary font-medium", children: title }) : null,
+          title ? /* @__PURE__ */ jsx("p", { className: "mb-step-xs text-text-primary font-medium", children: title }) : null,
           children ? /* @__PURE__ */ jsx("div", { className: "max-w-measure", children }) : null
         ] })
       ] })
@@ -134,7 +134,7 @@ function AvatarFallback({
   );
 }
 var badge = 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: {
@@ -154,8 +154,8 @@ function Badge({ className, variant, ...props }) {
 }
 var categoria = 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"
   ],
@@ -179,12 +179,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__ */ 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
     }
   );
@@ -294,7 +294,7 @@ var VolumeOn = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor"
 var VolumeMuted = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ 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 = 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",
@@ -403,8 +403,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",
@@ -432,7 +432,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: {
@@ -522,7 +522,7 @@ function Card({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn(SUPERFICIE_TARJETA, className), ...props });
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("gap-xs p-lg flex flex-col", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("gap-step-xs p-step-lg flex flex-col", className), ...props });
 }
 function CardTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className, ...props });
@@ -531,13 +531,13 @@ function CardDescription({ className, ...props }) {
   return /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className, ...props });
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("px-lg pb-lg", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("px-step-lg pb-step-lg", className), ...props });
 }
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ 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
     }
   );
@@ -588,7 +588,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",
@@ -631,7 +631,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
@@ -658,10 +658,10 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("gap-xs flex flex-col pr-8", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("gap-step-xs flex flex-col pr-8", className), ...props });
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("gap-sm flex flex-col-reverse sm:flex-row sm:justify-end", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("gap-step-sm flex flex-col-reverse sm:flex-row sm:justify-end", className), ...props });
 }
 function DialogTitle({
   className,
@@ -698,7 +698,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"
@@ -750,7 +750,7 @@ function DropdownMenuLabel({
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.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
     }
   );
@@ -791,7 +791,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",
@@ -799,7 +799,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
@@ -831,7 +831,7 @@ function Pagination({ className, ...props }) {
   );
 }
 function PaginationContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("ul", { className: cn("gap-xs flex flex-row items-center", className), ...props });
+  return /* @__PURE__ */ jsx("ul", { className: cn("gap-step-xs flex flex-row items-center", className), ...props });
 }
 function PaginationItem(props) {
   return /* @__PURE__ */ jsx("li", { ...props });
@@ -842,7 +842,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",
@@ -855,13 +855,13 @@ function PaginationLink({ className, isActive = false, ...props }) {
   );
 }
 function PaginationPrevious({ className, ...props }) {
-  return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-xs", className), ...props, children: [
+  return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-step-xs", className), ...props, children: [
     /* @__PURE__ */ jsx(ChevronLeft, {}),
     "Anterior"
   ] });
 }
 function PaginationNext({ className, ...props }) {
-  return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-xs", className), ...props, children: [
+  return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-step-xs", className), ...props, children: [
     "Siguiente",
     /* @__PURE__ */ jsx(ChevronRight, {})
   ] });
@@ -892,7 +892,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",
@@ -921,7 +921,7 @@ function Progress({ className, value, label, tone = "accent", ...props }) {
   );
 }
 function RadioGroup2({ className, ...props }) {
-  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("gap-sm grid", className), ...props });
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("gap-step-sm grid", className), ...props });
 }
 function RadioGroupItem({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -953,7 +953,7 @@ function SelectTrigger({
     SelectPrimitive.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",
@@ -1004,7 +1004,7 @@ function SelectLabel({
   return /* @__PURE__ */ jsx(
     SelectPrimitive.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
     }
   );
@@ -1018,7 +1018,7 @@ function SelectItem({
     SelectPrimitive.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",
@@ -1120,19 +1120,19 @@ function SheetHeader({ className, ...props }) {
   return /* @__PURE__ */ 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__ */ jsx("div", { className: cn("p-lg flex-1 overflow-y-auto", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("p-step-lg flex-1 overflow-y-auto", className), ...props });
 }
 function SheetFooter({ className, ...props }) {
   return /* @__PURE__ */ 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
     }
   );
@@ -1243,7 +1243,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
       ),
@@ -1252,13 +1252,13 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx("td", { className: cn("px-sm py-sm text-text-secondary align-middle", className), ...props });
+  return /* @__PURE__ */ jsx("td", { className: cn("px-step-sm py-step-sm text-text-secondary align-middle", className), ...props });
 }
 function TableCaption({ className, ...props }) {
-  return /* @__PURE__ */ jsx("caption", { className: cn("mt-sm text-label text-text-muted", className), ...props });
+  return /* @__PURE__ */ jsx("caption", { className: cn("mt-step-sm text-label text-text-muted", className), ...props });
 }
 function Tabs({ className, ...props }) {
-  return /* @__PURE__ */ jsx(TabsPrimitive.Root, { className: cn("gap-md flex flex-col", className), ...props });
+  return /* @__PURE__ */ jsx(TabsPrimitive.Root, { className: cn("gap-step-md flex flex-col", className), ...props });
 }
 function TabsList({
   className,
@@ -1267,7 +1267,7 @@ function TabsList({
   return /* @__PURE__ */ jsx(
     TabsPrimitive.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
     }
   );
@@ -1280,7 +1280,7 @@ function TabsTrigger({
     TabsPrimitive.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",
@@ -1315,7 +1315,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",
@@ -1339,7 +1339,7 @@ function ToastViewport({
     ToastPrimitive.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
       ),
@@ -1349,7 +1349,7 @@ function ToastViewport({
 }
 var toast = 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"
   ],
@@ -1413,7 +1413,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
@@ -1449,14 +1449,14 @@ function ArticleCard({
       " min de lectura"
     ] }, "lectura") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
-    meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-xs flex items-center", children: [
+  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+    meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-step-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null,
     /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
     excerpt ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: excerpt }) : null,
-    tags && tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "gap-xs mt-auto flex flex-wrap pt-sm", children: tags.map((t) => /* @__PURE__ */ jsx(CategoryBadge, { children: t }, t)) }) : null
+    tags && tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "gap-step-xs mt-auto flex flex-wrap pt-step-sm", children: tags.map((t) => /* @__PURE__ */ jsx(CategoryBadge, { children: t }, t)) }) : null
   ] }) });
 }
 var AVATAR = "size-[52px]";
@@ -1464,16 +1464,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__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-lg gap-md flex items-start", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-md flex items-start", className), ...props, children: [
     /* @__PURE__ */ jsxs(Avatar, { className: cn(AVATAR, "shrink-0"), children: [
       src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: "" }) : null,
       /* @__PURE__ */ jsx(AvatarFallback, { children: iniciales(name) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "gap-xs flex min-w-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: name }),
       role ? /* @__PURE__ */ jsx(Text, { variant: "chip", tone: "muted", as: "p", children: role }) : null,
-      bio ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "mt-xs", children: bio }) : null,
-      action ? /* @__PURE__ */ jsx("div", { className: "mt-xs gap-sm flex flex-wrap items-center", children: action }) : null
+      bio ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "mt-step-xs", children: bio }) : null,
+      action ? /* @__PURE__ */ jsx("div", { className: "mt-step-xs gap-step-sm flex flex-wrap items-center", children: action }) : null
     ] })
   ] });
 }
@@ -1592,7 +1592,7 @@ function Volumen({
   onSilenciar,
   onCambiarVolumen
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "gap-xs hidden items-center sm:flex", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "gap-step-xs hidden items-center sm:flex", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -1839,8 +1839,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             ...puntero
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxs("div", { className: "gap-sm px-md flex items-center py-5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "gap-xs flex shrink-0 items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxs("div", { className: "gap-step-sm px-step-md flex items-center py-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex shrink-0 items-center", children: [
             /* @__PURE__ */ jsx(Onda, { grosor: "w-[2px]", alto: "h-4", sonando: isPlaying }),
             /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-accent hidden uppercase sm:block", children: "Narraci\xF3n" })
           ] }),
@@ -1857,7 +1857,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             /* @__PURE__ */ 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,
@@ -1882,7 +1882,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxs("div", { ref: staticRef, children: [
-        /* @__PURE__ */ jsxs("div", { className: "gap-sm mb-md flex items-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "gap-step-sm mb-step-md flex items-center", children: [
           /* @__PURE__ */ jsx(Onda, { grosor: "w-[3px]", alto: "h-5", sonando: isPlaying }),
           /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-accent uppercase", children: "Narraci\xF3n de audio" }),
           /* @__PURE__ */ jsxs("span", { className: "text-chip font-mono text-text-muted ml-auto tabular-nums", children: [
@@ -1891,13 +1891,13 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             formatTime(duration)
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mb-md", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
-        /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-step-md", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
           /* @__PURE__ */ jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
           /* @__PURE__ */ 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,
@@ -1906,7 +1906,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             }
           ),
           /* @__PURE__ */ jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
-          /* @__PURE__ */ jsxs("div", { className: "gap-sm ml-auto flex items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "gap-step-sm ml-auto flex items-center", children: [
             /* @__PURE__ */ jsx(
               BotonVelocidad,
               {
@@ -1936,8 +1936,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxs("div", { ref: staticRef, className: "w-full", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-xs", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
-        /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-sm flex justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-step-xs", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
           /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
           /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
         ] }),
@@ -1969,16 +1969,16 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       flotanteJsx
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "bg-surface rounded-control border-border p-md w-full border", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "bg-surface rounded-control border-border p-step-md w-full border", children: [
     /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
-    title ? /* @__PURE__ */ jsx("p", { className: "text-ui font-sans text-text-secondary mb-sm truncate", children: title }) : null,
-    /* @__PURE__ */ jsx("div", { className: "mb-sm", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
-    /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-sm flex justify-between", children: [
+    title ? /* @__PURE__ */ jsx("p", { className: "text-ui font-sans text-text-secondary mb-step-sm truncate", children: title }) : null,
+    /* @__PURE__ */ jsx("div", { className: "mb-step-sm", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
       /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
       /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "gap-xs flex items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip }),
         /* @__PURE__ */ jsx(
           BotonPlay,
@@ -1992,7 +1992,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
         ),
         /* @__PURE__ */ jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
         /* @__PURE__ */ jsx(
           BotonVelocidad,
           {
@@ -2020,11 +2020,11 @@ function Blockquote({ children, author, source, className, ...props }) {
   return /* @__PURE__ */ 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__ */ jsx(Text, { variant: "body", tone: "secondary", children }),
-        author || source ? /* @__PURE__ */ jsx("footer", { className: "mt-sm", children: /* @__PURE__ */ jsxs(Text, { variant: "label", tone: "muted", as: "span", children: [
+        author || source ? /* @__PURE__ */ jsx("footer", { className: "mt-step-sm", children: /* @__PURE__ */ jsxs(Text, { variant: "label", tone: "muted", as: "span", children: [
           author ? /* @__PURE__ */ jsx("cite", { className: "not-italic", children: author }) : null,
           author && source ? " \xB7 " : null,
           source
@@ -2043,11 +2043,11 @@ function Breadcrumb({
   ...props
 }) {
   const enlace = (href, contenido) => linkAsChild ? /* @__PURE__ */ jsx(Slot, { className: ENLACE, children: linkAsChild({ href, children: contenido }) }) : /* @__PURE__ */ jsx("a", { href, className: ENLACE, children: contenido });
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxs("ol", { className: "gap-xs flex flex-wrap items-center", children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxs("ol", { className: "gap-step-xs flex flex-wrap items-center", children: [
     /* @__PURE__ */ jsx("li", { children: enlace(homeHref, /* @__PURE__ */ jsx("span", { "aria-label": homeLabel, children: "~" })) }),
     items.map((item2, i) => {
       const ultimo = i === items.length - 1;
-      return /* @__PURE__ */ jsxs("li", { className: "gap-xs flex items-center", children: [
+      return /* @__PURE__ */ jsxs("li", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-border", children: "/" }),
         item2.href && !ultimo ? enlace(item2.href, item2.label) : /* @__PURE__ */ jsx("span", { "aria-current": ultimo ? "page" : void 0, className: "text-text-secondary", children: item2.label })
       ] }, i);
@@ -2077,7 +2077,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "border-hairline px-sm flex items-center justify-between border-b py-1.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-hairline px-step-sm flex items-center justify-between border-b py-1.5", children: [
           /* @__PURE__ */ jsxs("span", { className: "text-eyebrow font-mono text-text-muted uppercase", children: [
             /* @__PURE__ */ jsx("span", { className: "text-accent", children: "\u276F" }),
             " ",
@@ -2091,7 +2091,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"
@@ -2103,7 +2103,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx("pre", { className: "p-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
+        /* @__PURE__ */ jsx("pre", { className: "p-step-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
       ]
     }
   );
@@ -2117,15 +2117,15 @@ function CourseCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
+  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
     status ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: "warm", children: status }) }) : null,
     /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
     summary ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
-    meta && meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-xs flex items-center", children: [
+    meta && meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null,
-    typeof progress === "number" ? /* @__PURE__ */ jsxs("div", { className: "gap-xs mt-auto flex flex-col pt-sm", children: [
+    typeof progress === "number" ? /* @__PURE__ */ jsxs("div", { className: "gap-step-xs mt-auto flex flex-col pt-step-sm", children: [
       /* @__PURE__ */ jsx(Progress, { value: progress, tone: "warm", label: `Progreso del curso: ${progress}%` }),
       /* @__PURE__ */ jsxs(Text, { variant: "label", tone: "muted", as: "p", children: [
         progress,
@@ -2147,13 +2147,13 @@ function EmptyState({
   return /* @__PURE__ */ 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__ */ jsx(CaraDeMascota, { expresion, className: CARA, basePath }),
         /* @__PURE__ */ jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: title }),
         description ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "max-w-measure font-normal", children: description }) : null,
-        action ? /* @__PURE__ */ jsx("div", { className: "mt-xs", children: action }) : null
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-step-xs", children: action }) : null
       ]
     }
   );
@@ -2165,8 +2165,8 @@ function Footer({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-md py-xl gap-lg mx-auto flex flex-col", children: [
-    children ? /* @__PURE__ */ jsx("div", { className: "gap-md flex flex-wrap items-center", children }) : null,
+  return /* @__PURE__ */ jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-step-md py-step-xl gap-step-lg mx-auto flex flex-col", children: [
+    children ? /* @__PURE__ */ 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.
@@ -2225,16 +2225,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__ */ jsxs("div", { className: "gap-md flex flex-col md:max-w-[62%]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "gap-step-md flex flex-col md:max-w-[62%]", children: [
           eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
           /* @__PURE__ */ jsx(Text, { as: "h1", variant: "display", children: title }),
           description ? /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
-          action ? /* @__PURE__ */ jsx("div", { className: "gap-sm mt-xs flex flex-wrap items-center", children: action }) : null
+          action ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm mt-step-xs flex flex-wrap items-center", children: action }) : null
         ] }),
         pose ? /* @__PURE__ */ jsx(
           Mascota,
@@ -2244,7 +2244,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"
             )
           }
@@ -2266,11 +2266,11 @@ function LinkRow({
   return /* @__PURE__ */ jsx(
     Tarjeta,
     {
-      className: cn("px-md py-sm", className),
+      className: cn("px-step-md py-step-sm", className),
       ...props,
       rel,
       ...target ? { target } : {},
-      children: /* @__PURE__ */ jsxs("span", { className: "gap-sm flex items-center", children: [
+      children: /* @__PURE__ */ jsxs("span", { className: "gap-step-sm flex items-center", children: [
         icon ? /* @__PURE__ */ jsx("span", { className: "text-text-muted group-hover:text-accent transition-standard shrink-0 text-2xl", children: icon }) : null,
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx(Text, { as: "span", variant: "ui", className: "group-hover:text-accent transition-standard block font-medium", children: name }),
@@ -2300,10 +2300,10 @@ function Nav({ brand: brand2, children, actions, className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-md h-nav gap-lg mx-auto flex items-center", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-step-md h-nav gap-step-lg mx-auto flex items-center", children: [
         brand2 ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: brand2 }) : null,
-        children ? /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("ul", { className: "gap-md flex items-center", children }) }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-        actions ? /* @__PURE__ */ jsx("div", { className: "gap-sm flex shrink-0 items-center", children: actions }) : null
+        children ? /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("ul", { className: "gap-step-md flex items-center", children }) }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
       ] })
     }
   );
@@ -2357,17 +2357,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__ */ jsxs("div", { className: "gap-xs flex flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-col", children: [
           /* @__PURE__ */ jsx(Text, { as: "h2", variant: "h3", children: title }),
           description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", children: description }) : null
         ] }),
-        /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "gap-sm flex flex-col sm:flex-row sm:items-end", noValidate: true, children: [
-          /* @__PURE__ */ jsxs("div", { className: "gap-xs flex flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "gap-step-sm flex flex-col sm:flex-row sm:items-end", noValidate: true, children: [
+          /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
             /* @__PURE__ */ jsx(Label2, { htmlFor: id, children: fieldLabel }),
             /* @__PURE__ */ jsx(
               Input,
@@ -2397,7 +2397,7 @@ function NewsletterForm({
         ] }),
         state === "exito" ? /* @__PURE__ */ jsx(Alert, { id: `${id}-aviso`, variant: "success", enfasis: "fuerte", children: successMessage }) : null,
         error ? /* @__PURE__ */ jsx(Alert, { id: `${id}-aviso`, variant: "error", enfasis: "fuerte", children: errorMessage }) : null,
-        disclaimer ? /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-center", children: [
+        disclaimer ? /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
           expresion ? /* @__PURE__ */ jsx(CaraDeMascota, { expresion, basePath, className: "w-10 max-w-none" }) : null,
           /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "font-normal", children: disclaimer })
         ] }) : null
@@ -2405,11 +2405,11 @@ function NewsletterForm({
     }
   );
 }
-var cabecera = cva("gap-sm flex flex-col", {
+var cabecera = cva("gap-step-sm flex flex-col", {
   variants: {
     size: {
       display: "py-section",
-      page: "py-xl"
+      page: "py-step-xl"
     }
   },
   defaultVariants: { size: "page" }
@@ -2428,7 +2428,7 @@ function PageHeader({
     eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
     /* @__PURE__ */ jsx(Text, { as, variant: size2 === "display" ? "display" : "h1", className: "max-w-measure", children: title }),
     description ? /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
-    action ? /* @__PURE__ */ jsx("div", { className: "gap-sm mt-sm flex flex-wrap items-center", children: action }) : null
+    action ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm mt-step-sm flex flex-wrap items-center", children: action }) : null
   ] });
 }
 function SidebarItem({
@@ -2445,7 +2445,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
@@ -2479,14 +2479,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__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-sm", children: title }) : null,
+        title ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
         /* @__PURE__ */ jsx("ul", { className: "gap-0.5 flex flex-1 flex-col", children }),
-        pie.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "border-hairline px-sm pt-sm border-t", children: pie.map((p, i) => /* @__PURE__ */ jsxs("span", { children: [
+        pie.length > 0 ? /* @__PURE__ */ 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__ */ jsxs("span", { children: [
           i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
           p
         ] }, i)) }) : null
@@ -2495,7 +2495,7 @@ function SidebarNav({
   );
 }
 function Stat({ value, label, tone = "neutral", progress, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-lg gap-xs flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsx(Text, { variant: "stat", as: "p", tone: tone === "alerta" ? "warm" : "accent", children: value }),
     /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: label }),
     typeof progress === "number" ? /* @__PURE__ */ jsx(
@@ -2504,7 +2504,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
   ] });
@@ -2523,13 +2523,13 @@ function TalkCard({
     date ? /* @__PURE__ */ jsx("time", { dateTime, children: date }, "fecha") : null,
     location ? /* @__PURE__ */ jsx("span", { children: location }, "lugar") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-start justify-between", children: [
+  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
       /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: event }),
       status ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: status }) : null
     ] }),
     /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
-    pie.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-xs mt-auto flex items-center pt-sm", children: pie.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-xs flex items-center", children: [
+    pie.length > 0 ? /* @__PURE__ */ 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__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null
@@ -2543,16 +2543,16 @@ function TableOfContents({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-sm flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-step-sm flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: title }),
-    /* @__PURE__ */ jsx("ul", { className: "border-hairline gap-xs flex flex-col border-l", children: items.map((item2) => {
+    /* @__PURE__ */ 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__ */ jsx("li", { children: linkAsChild ? /* @__PURE__ */ jsx(Slot, { className: clases, "aria-current": activo ? "location" : void 0, children: linkAsChild({ href: item2.href, children: item2.label }) }) : /* @__PURE__ */ jsx("a", { href: item2.href, className: clases, "aria-current": activo ? "location" : void 0, children: item2.label }) }, item2.href);