trama-ui 0.1.0

package/dist/components/ui/styles/ui-kit.css

@@ -0,0 +1,1135 @@
+/* =====================================================================
+   Kit de componentes (prefijo ui-)
+   1) Sistema de estilos: 7 variantes que fijan --s-* (superficie, borde, radio, sombra…)
+   2) Componentes: leen SOLO tokens (--bg --fg --mut --acc --acc2 --card --ln --r) y --s-*
+   ===================================================================== */
+
+/*
+ * Legibilidad por defecto para texto "sin superficie" (sin --s-bg detrás: SectionHeader, Hero con
+ * backdrop="none", LogoCloud, Divider…) y para las dos variantes con --s-bg: transparent (outline,
+ * minimal) — pensados para poder sentarse encima de un fondo de la categoría "fondos" (guía §7).
+ *
+ * Un halo ligero con el propio --bg del tema, por `text-shadow` (--legibility-ts): dos capas, 1 px y 3 px de
+ * desenfoque, con alfa reducida. Invisible sobre un fondo --bg liso y con un margen de contraste discreto en
+ * cuanto deja de serlo. La primera línea de defensa NO es este halo sino que el fondo sea sencillo (guía §7:
+ * celdas grandes, sin bloom, estilos "dots"/"lines"): un halo agresivo tapando un fondo cargado se ve peor
+ * que el problema que arregla. Para el look sin halo, a propósito: `--legibility-ts: 0 0 transparent` en el
+ * contenedor.
+ *
+ * Por qué `text-shadow` y NO `filter: drop-shadow()`: en Chromium el filtro fuerza un compositado que suaviza
+ * los glifos — con texto oscuro sobre un tema claro (FOLIO) se leía borroso por pequeño que fuese el radio, y
+ * solo desaparecía quitando el filtro. Con texto claro sobre fondo oscuro no se nota (el halo oscuro apenas
+ * se ve sobre los glifos), por eso tardó en aparecer. `text-shadow` no tiene ese efecto secundario. Y se puede
+ * combinar con la sombra del propio estilo (`text-shadow: var(--s-ts), var(--legibility-ts)`) porque --s-ts es
+ * SIEMPRE un <shadow> válido — `0 0 transparent` cuando el estilo no tiene sombra, nunca la palabra clave
+ * `none`, que invalidaría toda la lista.
+ */
+:root, :host {
+  --legibility-ts: 0 1px 1px color-mix(in srgb, var(--bg, #000) 85%, transparent), 0 0 3px color-mix(in srgb, var(--bg, #000) 65%, transparent);
+}
+
+/* ---------- 1. Sistema de estilos ---------- */
+.ui-s {
+  --ok: #3ddc84; --warn: #ffb020; --bad: #ff5470; --info: #4cb8ff;
+  --mono: var(--font-jetbrains-mono), ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
+  --s-bg: var(--card); --s-bd: 1px solid var(--ln); --s-r: var(--r, 12px); --s-sh: none; --s-bf: none;
+  --s-ff: inherit; --s-tt: none; --s-ls: normal; --s-fw: 500; --s-ts: 0 0 transparent;
+  --s-pri-bg: var(--acc); --s-pri-fg: var(--bg); --s-pri-bd: 1px solid transparent; --s-pri-sh: none; --s-pri-ts: none;
+}
+.ui-s--glass {
+  --s-bg: var(--card); --s-bd: 1px solid var(--ln); --s-r: max(var(--r, 12px), 12px); --s-bf: blur(14px);
+  --s-pri-bg: color-mix(in srgb, var(--acc) 88%, transparent); --s-pri-sh: 0 8px 30px -10px var(--acc);
+}
+.ui-s--solid {
+  --s-bg: color-mix(in srgb, var(--fg) 9%, var(--bg)); --s-bd: 3px solid var(--ln); --s-r: min(var(--r, 12px), 6px);
+  --s-sh: 5px 5px 0 var(--ln); --s-fw: 700; --s-pri-bd: 3px solid var(--fg); --s-pri-sh: 4px 4px 0 var(--ln);
+}
+.ui-s--outline {
+  --s-bg: transparent; --s-bd: 1px solid var(--acc); --s-r: min(var(--r, 12px), 3px); --s-sh: inset 0 0 26px -14px var(--acc);
+  --s-tt: uppercase; --s-ls: 0.08em; --s-pri-bg: transparent; --s-pri-fg: var(--acc); --s-pri-bd: 1px solid var(--acc);
+}
+.ui-s--neon {
+  --s-bg: rgba(0, 0, 0, 0.42); --s-bd: 1px solid var(--acc); --s-r: min(var(--r, 12px), 10px);
+  --s-sh: 0 0 16px -2px var(--acc), inset 0 0 14px -8px var(--acc); --s-ff: var(--mono); --s-ts: 0 0 8px var(--acc);
+  --s-pri-bg: rgba(0, 0, 0, 0.4); --s-pri-fg: var(--acc); --s-pri-bd: 1px solid var(--acc); --s-pri-sh: 0 0 18px -2px var(--acc), inset 0 0 12px -6px var(--acc); --s-pri-ts: 0 0 8px var(--acc);
+}
+.ui-s--retro {
+  --s-bg: color-mix(in srgb, var(--acc) 10%, var(--bg)); --s-bd: 3px solid var(--acc); --s-r: 0px; --s-sh: 4px 4px 0 var(--acc2);
+  --s-ff: var(--font-space-mono), "Courier New", Courier, monospace; --s-tt: uppercase; --s-fw: 800; --s-ls: 0.04em;
+  --s-pri-bg: var(--acc); --s-pri-fg: var(--bg); --s-pri-bd: 3px solid var(--fg); --s-pri-sh: 4px 4px 0 var(--acc2);
+}
+.ui-s--terminal {
+  --s-bg: color-mix(in srgb, var(--bg) 92%, #000); --s-bd: 1px solid var(--ln); --s-r: 4px; --s-ff: var(--mono);
+  --s-pri-bg: transparent; --s-pri-fg: var(--acc); --s-pri-bd: 1px solid var(--acc);
+}
+.ui-s--minimal {
+  --s-bg: transparent; --s-bd: 0 solid transparent; --s-r: 0px; --s-pri-bg: transparent; --s-pri-fg: var(--fg); --s-pri-bd: 0 solid transparent;
+}
+/*
+ * outline y minimal son las dos únicas variantes con --s-bg: transparent — su legibilidad depende
+ * por completo de lo que haya detrás, no solo el texto suelto (SectionHeader, Hero…) que ya lleva
+ * --legibility-ts por su cuenta. Antes usaba `filter: var(--legibility)` en el elemento raíz para
+ * proteger TODO el subárbol de una vez (borde incluido) sin tener que añadir la clase a cada hijo;
+ * se cambió a `text-shadow` (heredado por CSS a todo el texto descendiente igual que --s-ts) porque
+ * `filter: drop-shadow()` sobre texto suaviza visiblemente los glifos (mismo hallazgo que llevó a
+ * --legibility-ts para el texto suelto — ver arriba). Ninguna de las dos variantes tiene borde o
+ * relleno propio que proteger (outline: solo un borde de 1px ya de por sí contrastado; minimal: sin
+ * borde ni relleno), así que no hace falta lo que `filter` daba de más.
+ */
+.ui-s--outline, .ui-s--minimal { text-shadow: var(--legibility-ts); }
+
+.ui-surface {
+  background: var(--s-bg); border: var(--s-bd); border-radius: var(--s-r); box-shadow: var(--s-sh);
+  -webkit-backdrop-filter: var(--s-bf); backdrop-filter: var(--s-bf);
+  font-family: var(--s-ff); text-transform: var(--s-tt); letter-spacing: var(--s-ls); text-shadow: var(--s-ts); color: var(--fg);
+}
+/* minimal no tiene borde en ninguna superficie; solo los campos de formulario conservan una línea inferior, que es
+ * lo único que los delimita (sin fondo ni borde, no se vería dónde escribir) */
+.ui-s--minimal:is(.ui-field__box, .ui-select__trigger, .ui-otp__box) { border-width: 0 0 1px; border-color: var(--ln); border-style: solid; }
+
+/* ---------- Fondos de tarjeta (components/ui/fill.ts) ----------
+ * Independientes de la variante: la variante pone borde, radio, sombra y tipografía; el fill, lo que hay detrás.
+ * Se sobrescribe --s-bg (que .ui-surface usa como `background`), así que admite degradados e imágenes.
+ * `.ui-s.ui-cfill--*` (dos clases) para ganar a `.ui-s--<variante>` sin depender del orden. */
+.ui-tone--acc2 { --acc: var(--acc2); }
+.ui-s.ui-cfill--tint { --s-bg: color-mix(in srgb, var(--acc) 16%, var(--bg)); --s-bf: none; }
+.ui-s.ui-cfill--gradient {
+  --s-bg: linear-gradient(150deg, color-mix(in srgb, var(--acc) 30%, var(--bg)) 0%, color-mix(in srgb, var(--acc2) 22%, var(--bg)) 100%);
+  --s-bf: none;
+}
+.ui-s.ui-cfill--pattern { --s-bg: var(--pat), color-mix(in srgb, var(--acc) 6%, var(--bg)); --s-bf: none; }
+.ui-s.ui-cfill--image {
+  /* velo del color de fondo sobre la imagen: --veil-top/--veil-mid/--veil-bottom (en % de opacidad) */
+  --s-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg) var(--veil-top, 62%), transparent) 0%, color-mix(in srgb, var(--bg) var(--veil-mid, 74%), transparent) 45%, color-mix(in srgb, var(--bg) var(--veil-bottom, 92%), transparent) 80%), var(--fill-img, none) center / cover no-repeat, var(--bg);
+  --s-bf: none;
+}
+/* Invertida: fondo de acento, texto del color de fondo. Los hijos reciben la paleta invertida entera (un botón
+ * primario dentro pasa a ser oscuro sobre acento, sin tocar el botón). --inv-* se calculan en el raíz con los
+ * valores originales; redefinir --bg/--fg en el mismo elemento que los lee sería un ciclo. */
+.ui-s.ui-cfill--accent { --inv-a: var(--acc); --inv-b: var(--bg); --s-bg: var(--acc); --s-bf: none; color: var(--bg); text-shadow: none; }
+.ui-cfill--accent > * {
+  --bg: var(--inv-a); --fg: var(--inv-b); --acc: var(--inv-b); --acc2: var(--inv-b);
+  --mut: color-mix(in srgb, var(--inv-b) 70%, var(--inv-a)); --ln: color-mix(in srgb, var(--inv-b) 26%, transparent);
+  --card: color-mix(in srgb, var(--inv-b) 10%, transparent); --legibility-ts: 0 0 transparent;
+}
+/* Tramas: solo el dibujo (--pat), en --acc con poca opacidad para no competir con el texto. Las usan el fill
+ * `pattern` y cualquier zona decorativa (la cabecera de BlogCard, por ejemplo). */
+.ui-pat--dots { --pat: radial-gradient(circle, color-mix(in srgb, var(--acc) 40%, transparent) 1.2px, transparent 1.8px) 0 0 / 14px 14px; }
+.ui-pat--grid { --pat: linear-gradient(color-mix(in srgb, var(--acc) 20%, transparent) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, color-mix(in srgb, var(--acc) 20%, transparent) 1px, transparent 1px) 0 0 / 18px 18px; }
+.ui-pat--diagonal { --pat: repeating-linear-gradient(45deg, color-mix(in srgb, var(--acc) 22%, transparent) 0 1px, transparent 1px 11px); }
+.ui-pat--waves { --pat: radial-gradient(circle at 50% 0%, transparent 8px, color-mix(in srgb, var(--acc) 28%, transparent) 9px 10px, transparent 11px) 0 0 / 24px 12px; }
+.ui-pat--checker { --pat: conic-gradient(color-mix(in srgb, var(--acc) 12%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--acc) 12%, transparent) 0 75%, transparent 0) 0 0 / 22px 22px; }
+.ui-pat--rays { --pat: repeating-conic-gradient(from 0deg at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent) 0deg 3deg, transparent 3deg 9deg); }
+
+/* ---------- Scrollbars personalizadas ---------- */
+/*
+ * Base neutra (tokens, sin --s-*): para cualquier área con overflow que no esté dentro de una
+ * superficie con estilo propio — el escenario (.ui-center), el body de un Modal/Drawer largo…
+ * Firefox usa scrollbar-width/-color (dos colores, sin más control); WebKit/Blink (Chrome, Edge,
+ * Safari) usan los pseudo-elementos ::-webkit-scrollbar-*, que no son propiedades heredadas: hay
+ * que declararlos también con el combinador descendiente para alcanzar cualquier hijo que scrollee.
+ */
+html { scrollbar-width: thin; scrollbar-color: var(--ln, rgba(255, 255, 255, 0.25)) transparent; }
+.ui-center::-webkit-scrollbar, .ui-drawer::-webkit-scrollbar, .ui-modal::-webkit-scrollbar { width: 10px; height: 10px; }
+.ui-center::-webkit-scrollbar-track, .ui-drawer::-webkit-scrollbar-track, .ui-modal::-webkit-scrollbar-track { background: transparent; }
+.ui-center::-webkit-scrollbar-thumb, .ui-drawer::-webkit-scrollbar-thumb, .ui-modal::-webkit-scrollbar-thumb { background: var(--ln); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
+.ui-center::-webkit-scrollbar-thumb:hover, .ui-drawer::-webkit-scrollbar-thumb:hover, .ui-modal::-webkit-scrollbar-thumb:hover { background: var(--acc); }
+.ui-modal { max-height: 80vh; overflow-y: auto; }
+
+/*
+ * Por estilo: cualquier superficie ui-s--<variante> (o lo que scrollee dentro de ella, p. ej. el
+ * <pre> de CodeBlock o la lista de Select) hereda el tratamiento de su variante, en vez de la barra
+ * neutra de arriba — el mismo principio que --s-*: se define una vez por estilo, no por componente.
+ */
+.ui-s { scrollbar-width: thin; scrollbar-color: var(--ln) transparent; }
+.ui-s::-webkit-scrollbar, .ui-s ::-webkit-scrollbar { width: 10px; height: 10px; }
+.ui-s::-webkit-scrollbar-track, .ui-s ::-webkit-scrollbar-track { background: transparent; }
+.ui-s::-webkit-scrollbar-thumb, .ui-s ::-webkit-scrollbar-thumb { background: var(--ln); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
+.ui-s::-webkit-scrollbar-thumb:hover, .ui-s ::-webkit-scrollbar-thumb:hover { background: var(--acc); }
+
+.ui-s--glass::-webkit-scrollbar-thumb, .ui-s--glass ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg) 22%, transparent); backdrop-filter: blur(4px); }
+
+.ui-s--solid { scrollbar-color: var(--fg) transparent; }
+.ui-s--solid::-webkit-scrollbar, .ui-s--solid ::-webkit-scrollbar { width: 12px; height: 12px; }
+.ui-s--solid::-webkit-scrollbar-thumb, .ui-s--solid ::-webkit-scrollbar-thumb { background: var(--fg); border: 2px solid var(--bg); border-radius: 4px; background-clip: padding-box; }
+
+.ui-s--outline { scrollbar-color: var(--acc) transparent; }
+.ui-s--outline::-webkit-scrollbar, .ui-s--outline ::-webkit-scrollbar { width: 6px; height: 6px; }
+.ui-s--outline::-webkit-scrollbar-thumb, .ui-s--outline ::-webkit-scrollbar-thumb { background: var(--acc); border-radius: 0; border: 0; }
+
+.ui-s--neon { scrollbar-color: var(--acc) transparent; }
+.ui-s--neon::-webkit-scrollbar-thumb, .ui-s--neon ::-webkit-scrollbar-thumb { background: var(--acc); border: 0; box-shadow: 0 0 8px var(--acc); }
+
+.ui-s--retro { scrollbar-color: var(--acc) color-mix(in srgb, var(--bg) 80%, #000); }
+.ui-s--retro::-webkit-scrollbar, .ui-s--retro ::-webkit-scrollbar { width: 14px; height: 14px; }
+.ui-s--retro::-webkit-scrollbar-track, .ui-s--retro ::-webkit-scrollbar-track { background: color-mix(in srgb, var(--bg) 80%, #000); }
+.ui-s--retro::-webkit-scrollbar-thumb, .ui-s--retro ::-webkit-scrollbar-thumb { background: var(--acc); border: 2px solid var(--fg); border-radius: 0; background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, 0.25) 3px 6px); background-clip: padding-box; }
+
+.ui-s--terminal { scrollbar-color: var(--acc) color-mix(in srgb, var(--bg) 85%, #000); }
+.ui-s--terminal::-webkit-scrollbar, .ui-s--terminal ::-webkit-scrollbar { width: 8px; height: 8px; }
+.ui-s--terminal::-webkit-scrollbar-track, .ui-s--terminal ::-webkit-scrollbar-track { background: color-mix(in srgb, var(--bg) 85%, #000); }
+.ui-s--terminal::-webkit-scrollbar-thumb, .ui-s--terminal ::-webkit-scrollbar-thumb { background: var(--acc); border-radius: 0; }
+
+.ui-s--minimal { scrollbar-color: color-mix(in srgb, var(--fg) 22%, transparent) transparent; }
+.ui-s--minimal::-webkit-scrollbar, .ui-s--minimal ::-webkit-scrollbar { width: 4px; height: 4px; }
+.ui-s--minimal::-webkit-scrollbar-thumb, .ui-s--minimal ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg) 22%, transparent); border-radius: 0; }
+
+/* ---------- Base compartida ---------- */
+.ui-fill { position: absolute; inset: 0; overflow: hidden; }
+.ui-fill__media { position: absolute; inset: 0; }
+.ui-fill-canvas { display: block; width: 100% !important; height: 100% !important; }
+.ui-center { position: absolute; inset: 0; display: grid; place-content: safe center; justify-items: center; gap: 12px; padding: 24px; overflow: auto; }
+.ui-center--full { padding: 0; }
+.ui-center--top { place-content: start center; padding-top: 0; }
+/* Una columna de hasta 780 px que sí se estira (por defecto los hijos de .ui-center se ajustan al contenido): para galerías. */
+.ui-center--cols { grid-template-columns: minmax(0, 780px); justify-items: stretch; }
+.ui-hint { font-size: 12px; color: var(--mut, #9aa3b5); }
+.ui-sample {
+  position: absolute; left: 24px; bottom: 24px; max-width: 320px; display: grid; gap: 4px;
+  padding: 14px 16px; border: 1px solid var(--ln); border-radius: var(--r, 12px);
+  background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); pointer-events: none;
+}
+.ui-sample strong { font-size: 18px; text-shadow: 0 1px 10px #000; }
+.ui-sample span { font-size: 12px; color: var(--mut); }
+.ui-tone--fg { --tone: var(--fg); } .ui-tone--acc { --tone: var(--acc); } .ui-tone--acc2 { --tone: var(--acc2); } .ui-tone--mut { --tone: var(--mut); }
+
+/* Paletas de los fondos: reinterpretan los colores de la escena con los tokens del tema */
+.ui-pal { isolation: isolate; opacity: var(--op, 1); }
+.ui-pal__a, .ui-pal__b { position: absolute; inset: 0; pointer-events: none; display: none; }
+.ui-pal--tint .ui-pal__a { display: block; background: var(--acc); mix-blend-mode: color; opacity: var(--tint, 0.7); }
+.ui-pal--duotone .ui-fill__media { filter: grayscale(1) contrast(1.15) brightness(1.05); }
+.ui-pal--duotone .ui-pal__a { display: block; background: var(--acc); mix-blend-mode: multiply; opacity: var(--tint, 1); }
+.ui-pal--duotone .ui-pal__b { display: block; background: var(--bg); mix-blend-mode: lighten; opacity: var(--tint, 1); }
+.ui-pal--gradient .ui-fill__media { filter: grayscale(1) contrast(1.15) brightness(1.05); }
+.ui-pal--gradient .ui-pal__a { display: block; background: linear-gradient(135deg, var(--acc), var(--acc2)); mix-blend-mode: multiply; opacity: var(--tint, 1); }
+.ui-pal--gradient .ui-pal__b { display: block; background: var(--bg); mix-blend-mode: lighten; opacity: var(--tint, 1); }
+
+/* ---------- Button / MagneticButton ---------- */
+.ui-button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
+  font: inherit; font-family: var(--s-ff); font-weight: var(--s-fw, 700); text-transform: var(--s-tt); letter-spacing: var(--s-ls);
+  border-radius: var(--s-r); transition: box-shadow 0.2s, filter 0.2s, transform 0.12s, background 0.2s;
+}
+.ui-button--sm { padding: 7px 14px; font-size: 13px; }
+.ui-button--md { padding: 11px 22px; font-size: 15px; }
+.ui-button--lg { padding: 15px 32px; font-size: 18px; }
+.ui-button--full { width: 100%; }
+.ui-button--primary { background: var(--s-pri-bg); color: var(--s-pri-fg); border: var(--s-pri-bd); box-shadow: var(--s-pri-sh); text-shadow: var(--s-pri-ts); }
+.ui-button--secondary { background: var(--s-bg); color: var(--fg); border: var(--s-bd); box-shadow: var(--s-sh); }
+.ui-button--ghost { background: transparent; color: var(--fg); border: 1px solid transparent; box-shadow: none; }
+.ui-button:hover:not(:disabled, [aria-disabled="true"]) { filter: brightness(1.14); }
+.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+a.ui-button { text-decoration: none; }
+.ui-button:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
+
+/* Color (intent): las reglas .ui-intent--* están al final del archivo, comunes a todo el kit. En el botón sustituyen
+ * --acc; como --s-pri-* se declaran en el mismo elemento (.ui-s) leyendo var(--acc), relleno, borde, halo y texto
+ * cambian a la vez en los 7 estilos sin reglas por variante. */
+/* en secondary y ghost el color se nota en el texto; con el acento del tema siguen con el texto normal */
+.ui-button--secondary:not(.ui-intent--accent), .ui-button--ghost:not(.ui-intent--accent) { color: var(--acc); }
+.ui-button--secondary:not(.ui-intent--accent) { border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
+
+/* Énfasis nuevos: outline (solo borde) y link (texto subrayado, sin caja) */
+.ui-button--outline { background: transparent; color: var(--acc); border: 1px solid var(--acc); box-shadow: none; }
+.ui-s--solid.ui-button--outline, .ui-s--retro.ui-button--outline { border-width: 3px; }
+.ui-s--neon.ui-button--outline { box-shadow: 0 0 12px -2px var(--acc), inset 0 0 10px -6px var(--acc); text-shadow: 0 0 8px var(--acc); }
+.ui-button--outline:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--acc) 12%, transparent); filter: none; }
+.ui-button--link { background: none; border: 0; box-shadow: none; padding-inline: 2px; color: var(--acc); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
+.ui-button--link:hover:not(:disabled, [aria-disabled="true"]) { text-decoration-thickness: 2px; filter: none; }
+
+/* Pulsado (active / aria-pressed): hundido en los rellenos, tinte de acento en los demás */
+.ui-button.is-active { filter: brightness(0.9); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35); translate: 0 1px; }
+.ui-button--secondary.is-active, .ui-button--ghost.is-active, .ui-button--outline.is-active {
+  filter: none; background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc); border-color: var(--acc);
+}
+.ui-button--link.is-active { box-shadow: none; translate: none; filter: none; text-decoration-thickness: 2px; }
+.ui-s--retro.ui-button.is-active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--acc2); }
+.ui-s--terminal.ui-button.is-active::after { content: "*"; }
+
+/* Cargando: indicador que hereda el color del texto; el botón no reacciona pero no se atenúa como disabled */
+.ui-button.is-loading { cursor: progress; }
+.ui-button.is-loading:disabled { opacity: 0.85; }
+.ui-button__spin { width: 1em; height: 1em; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin 0.7s linear infinite; }
+.ui-s--terminal .ui-button__spin, .ui-s--retro .ui-button__spin, .ui-s--terminal.ui-button .ui-button__spin, .ui-s--retro.ui-button .ui-button__spin { border-radius: 0; }
+@media (prefers-reduced-motion: reduce) { .ui-button__spin { animation-duration: 2s; } }
+
+/* Solo icono: cuadrado */
+.ui-button--icon { aspect-ratio: 1; padding: 0; }
+.ui-button--icon.ui-button--sm { width: 32px; } .ui-button--icon.ui-button--md { width: 42px; } .ui-button--icon.ui-button--lg { width: 54px; }
+.ui-s--terminal.ui-button--primary::before { content: ">"; opacity: 0.8; }
+.ui-s--retro.ui-button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--acc2); }
+.ui-s--minimal.ui-button--primary { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--acc); }
+.ui-s--minimal.ui-button--primary:hover { text-decoration-thickness: 2px; }
+/* minimal no tiene relleno: con un color semántico, el texto lo lleva (si no, «Eliminar» se leería igual que «Guardar») */
+.ui-s--minimal.ui-button--primary:not(.ui-intent--accent) { color: var(--acc); }
+.ui-button__glyph { font-family: var(--mono); display: inline-flex; align-items: center; }
+
+/* ---------- TextField ---------- */
+.ui-field { display: grid; gap: 6px; width: min(100%, 340px); font-size: 14px; --tone: var(--acc); }
+/* estado de validación: el color lo pone .ui-intent--* (al final del archivo) */
+.ui-field__label { font-size: 12px; letter-spacing: 0.06em; color: var(--mut); text-transform: none; }
+.ui-field__box { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
+.ui-field--sm .ui-field__box { height: 34px; } .ui-field--md .ui-field__box { height: 42px; } .ui-field--lg .ui-field__box { height: 52px; font-size: 16px; }
+.ui-field__box:focus-within { border-color: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 28%, transparent); }
+.ui-field--state .ui-field__box { border-color: var(--tone); }
+.ui-field__prefix { color: var(--tone); font-family: var(--mono); }
+.ui-field input {
+  flex: 1; min-width: 0; font: inherit; color: inherit; text-transform: none; letter-spacing: normal; text-shadow: none;
+  background: none; border: 0; outline: none; border-radius: 0; appearance: none; -webkit-appearance: none;
+}
+.ui-field input::placeholder, .ui-field textarea::placeholder { color: var(--mut); }
+.ui-field--multiline .ui-field__box { height: auto; align-items: flex-start; padding: 10px 12px; }
+.ui-field textarea {
+  flex: 1; min-width: 0; min-height: 84px; resize: vertical; font: inherit; color: inherit; text-transform: none; letter-spacing: normal; text-shadow: none;
+  background: none; border: 0; outline: none; border-radius: 0; appearance: none; -webkit-appearance: none;
+}
+.ui-field__hint { font-size: 12px; color: var(--mut); }
+.ui-field--state .ui-field__hint { color: var(--tone); }
+
+/* ---------- Toggle ---------- */
+.ui-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; color: var(--fg); background: none; border: 0; padding: 0; font-family: var(--s-ff); text-transform: var(--s-tt); letter-spacing: var(--s-ls); }
+.ui-toggle__track { position: relative; flex: none; width: 44px; height: 24px; background: var(--s-bg); border: var(--s-bd); border-radius: 999px; box-shadow: var(--s-sh); transition: background 0.2s, box-shadow 0.2s; }
+.ui-toggle--sm .ui-toggle__track { width: 34px; height: 18px; } .ui-toggle--lg .ui-toggle__track { width: 56px; height: 30px; }
+.ui-toggle__thumb { position: absolute; top: 50%; left: 3px; width: calc(100% * 0.42); aspect-ratio: 1; height: auto; translate: 0 -50%; border-radius: 50%; background: var(--mut); transition: left 0.18s, background 0.2s; }
+.ui-toggle.is-on .ui-toggle__track { background: color-mix(in srgb, var(--acc) 30%, transparent); }
+.ui-toggle.is-on .ui-toggle__thumb { left: calc(100% - 3px - 100% * 0.42); background: var(--acc); }
+.ui-toggle__text { display: none; font-family: var(--mono); font-weight: 700; color: var(--mut); }
+.ui-toggle.is-on .ui-toggle__text { color: var(--acc); }
+.ui-s--retro .ui-toggle__track, .ui-s--terminal .ui-toggle__track { display: none; }
+.ui-s--retro .ui-toggle__text, .ui-s--terminal .ui-toggle__text { display: inline; }
+.ui-s--retro .ui-toggle__track { border-radius: 0; }
+.ui-s--solid .ui-toggle__track, .ui-s--outline .ui-toggle__track { border-radius: var(--s-r); }
+.ui-s--solid .ui-toggle__thumb, .ui-s--outline .ui-toggle__thumb { border-radius: calc(var(--s-r) - 2px); }
+.ui-s--neon .ui-toggle.is-on .ui-toggle__thumb { box-shadow: 0 0 10px var(--acc); }
+
+/* ---------- RangeSlider ---------- */
+.ui-range { display: grid; gap: 8px; width: min(100%, 340px); font-family: var(--s-ff); text-transform: var(--s-tt); letter-spacing: var(--s-ls); font-size: 13px; }
+.ui-range__head { display: flex; justify-content: space-between; color: var(--mut); }
+.ui-range__head output { color: var(--acc); font-variant-numeric: tabular-nums; }
+.ui-range input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
+.ui-range input::-webkit-slider-runnable-track { height: 6px; border-radius: var(--s-r); background: linear-gradient(90deg, var(--acc) var(--pct, 50%), color-mix(in srgb, var(--fg) 16%, transparent) var(--pct, 50%)); border: var(--s-bd); box-shadow: var(--s-sh); }
+.ui-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: calc(var(--s-r) + 999px * 0); background: var(--acc); border: 2px solid var(--bg); }
+.ui-range input::-moz-range-track { height: 6px; background: color-mix(in srgb, var(--fg) 16%, transparent); border-radius: var(--s-r); }
+.ui-range input::-moz-range-thumb { width: 14px; height: 14px; background: var(--acc); border: 2px solid var(--bg); border-radius: var(--s-r); }
+.ui-s--glass .ui-range input::-webkit-slider-thumb, .ui-s--neon .ui-range input::-webkit-slider-thumb, .ui-s--minimal .ui-range input::-webkit-slider-thumb { border-radius: 50%; }
+.ui-s--retro .ui-range input::-webkit-slider-thumb, .ui-s--solid .ui-range input::-webkit-slider-thumb, .ui-s--terminal .ui-range input::-webkit-slider-thumb { border-radius: 0; }
+.ui-s--neon .ui-range input::-webkit-slider-thumb { box-shadow: 0 0 12px var(--acc); }
+.ui-s--retro .ui-range input::-webkit-slider-runnable-track { height: 10px; }
+.ui-s--minimal .ui-range input::-webkit-slider-runnable-track { height: 2px; border: 0; }
+
+/* ---------- Tabs ---------- */
+.ui-tabs { display: grid; gap: 14px; width: min(100%, 520px); font-family: var(--s-ff); text-transform: var(--s-tt); letter-spacing: var(--s-ls); }
+.ui-tabs__list { display: flex; gap: 4px; padding: 4px; background: var(--s-bg); border: var(--s-bd); border-radius: var(--s-r); box-shadow: var(--s-sh); backdrop-filter: var(--s-bf); width: fit-content; max-width: 100%; overflow: auto; }
+.ui-tabs__tab { font: inherit; font-weight: var(--s-fw); text-transform: inherit; letter-spacing: inherit; color: var(--mut); background: none; border: 0; padding: 8px 16px; cursor: pointer; border-radius: calc(var(--s-r) - 2px); white-space: nowrap; transition: color 0.15s, background 0.15s; }
+.ui-tabs__tab:hover { color: var(--fg); }
+.ui-tabs__tab[aria-selected="true"] { color: var(--fg); background: color-mix(in srgb, var(--acc) 22%, transparent); }
+.ui-s--outline .ui-tabs__tab[aria-selected="true"] { background: none; color: var(--acc); box-shadow: inset 0 -2px 0 var(--acc); border-radius: 0; }
+.ui-s--neon .ui-tabs__tab[aria-selected="true"] { color: var(--acc); text-shadow: 0 0 8px var(--acc); background: none; box-shadow: inset 0 -2px 0 var(--acc); border-radius: 0; }
+.ui-s--retro .ui-tabs__tab[aria-selected="true"] { background: var(--acc); color: var(--bg); }
+.ui-s--terminal .ui-tabs__tab[aria-selected="true"] { background: none; color: var(--acc); }
+.ui-s--terminal .ui-tabs__tab[aria-selected="true"]::before { content: "["; } .ui-s--terminal .ui-tabs__tab[aria-selected="true"]::after { content: "]"; }
+.ui-s--minimal .ui-tabs__list { padding: 0; border: 0; background: none; gap: 18px; }
+.ui-s--minimal .ui-tabs__tab { padding: 6px 0; border-radius: 0; }
+.ui-s--minimal .ui-tabs__tab[aria-selected="true"] { background: none; box-shadow: inset 0 -2px 0 var(--acc); }
+.ui-tabs__panel { font-family: var(--s-ff); text-transform: none; letter-spacing: normal; padding: 16px; line-height: 1.6; font-size: 14px; color: var(--fg); background: var(--s-bg); border: var(--s-bd); border-radius: var(--s-r); box-shadow: var(--s-sh); backdrop-filter: var(--s-bf); }
+.ui-s--minimal .ui-tabs__panel { border: 0; padding: 4px 0; }
+
+/* ---------- Icon (pixel art) ---------- */
+/* Sin `tone` hereda `currentColor`; con `tone` usa el token (--tone lo fija .ui-tone--*). `crispEdges`: al no ser
+   el tamaño múltiplo de 24, sin esto cada píxel del icono saldría con los bordes suavizados. */
+.ui-icon { display: inline-block; flex: none; vertical-align: middle; shape-rendering: crispEdges; }
+.ui-icon--tone { color: var(--tone); }
+/* Galería del catálogo (Pixel art → Icono): el elegido en grande y el set curado entero debajo. */
+.ui-icongal { display: grid; align-content: start; gap: 18px; width: 100%; max-width: 780px; }
+.ui-icongal__hero { display: grid; justify-items: center; gap: 8px; padding: 8px 0 4px; }
+.ui-icongal__hero code { font-size: 12px; color: var(--mut); }
+.ui-icongal h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); }
+.ui-icongal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
+.ui-icongal__cell { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border: 1px solid var(--ln); border-radius: var(--r, 8px); background: var(--card); color: var(--fg); font-size: 10px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
+.ui-icongal__cell span { color: var(--mut); }
+.ui-icongal__cell[data-on="true"] { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
+.ui-icongal__cell[data-on="true"] span { color: var(--fg); }
+/* Hoja de sprites del catálogo: la hoja entera a escala 2 con la baldosa elegida marcada. */
+.ui-sheet { position: relative; flex: none; image-rendering: pixelated; background-color: #6b7f99; background-repeat: no-repeat; }
+.ui-sheet__mark { position: absolute; border: 2px solid #fff; outline: 2px solid #000; box-sizing: border-box; pointer-events: none; }
+
+/* ---------- PixelFrame / Sprite (Kenney "Pixel UI", CC0) ---------- */
+/* Las imágenes llegan por variable inline (--pf-img / --sp-img) en vez de `url()` aquí: así el empaquetador de CSS no
+   intenta resolver una ruta de /public. Escala entera => cada píxel del sprite = --pf-s / --sp-s píxeles CSS exactos. */
+.ui-pframe {
+  --pf-s: 2;
+  /* El marco es opaco y de tono medio/claro sea cual sea el tema: la paleta del kit se REEMPLAZA aquí dentro por una
+     de tinta sobre papel, para que el texto y los componentes que haya dentro (que leen --bg/--fg/--mut/--acc/--card/
+     --ln) se lean sobre el marco y no sobre la página. Los acentos también pasan a tinta: un acento de tema (cian,
+     rosa neón…) sobre un marco azul u ocre no llega a contraste, y la legibilidad manda sobre el color. Las variantes
+     pensadas para fondo oscuro (neon) no son legibles aquí dentro: usa solid, outline, minimal, glass o retro. */
+  --bg: #eee; --fg: #000; --mut: #333; --acc: #111; --acc2: #333; --card: rgba(0, 0, 0, 0.06); --ln: rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+  min-width: calc(48px * var(--pf-s));
+  border: calc(16px * var(--pf-s)) solid transparent;
+  border-image: var(--pf-img) 16 fill / calc(16px * var(--pf-s)) stretch;
+  image-rendering: pixelated;
+  color: var(--fg);
+  /* Relleno del color del marco DETRÁS del border-image, recortado 3 píxeles de sprite hacia dentro (el aro exterior y
+     sus esquinas redondeadas quedan libres): con escala de pantalla fraccionaria (110 %, 125 %, 150 %…) el navegador
+     deja rendijas de 1 px entre las 9 regiones y sin esto se ve la página a través de ellas. */
+  background: linear-gradient(var(--pf-bg, transparent), var(--pf-bg, transparent)) center / calc(100% - 6px * var(--pf-s)) calc(100% - 6px * var(--pf-s)) no-repeat;
+  background-origin: border-box;
+}
+.ui-sprite {
+  --sp-s: 2; --sp-x: 0; --sp-y: 0;
+  display: inline-block; flex: none; vertical-align: middle;
+  width: calc(16px * var(--sp-s)); height: calc(16px * var(--sp-s));
+  background: var(--sp-img) no-repeat;
+  background-size: calc(538px * var(--sp-s)) calc(592px * var(--sp-s));
+  background-position: calc(var(--sp-x) * -18px * var(--sp-s)) calc(var(--sp-y) * -18px * var(--sp-s));
+  image-rendering: pixelated;
+}
+
+/* ---------- Badge ---------- */
+.ui-badge { --tone: var(--fg); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12px; line-height: 1.5; font-family: var(--s-ff); text-transform: var(--s-tt); letter-spacing: var(--s-ls); font-weight: var(--s-fw); color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); border-radius: min(var(--s-r), 999px); text-shadow: var(--s-ts); }
+.ui-badge--lg { padding: 5px 14px; font-size: 14px; }
+.ui-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 8px var(--tone); }
+.ui-s--solid.ui-badge { background: var(--tone); color: var(--bg); border: 2px solid var(--fg); box-shadow: 2px 2px 0 var(--ln); text-shadow: none; }
+.ui-s--retro.ui-badge { background: var(--tone); color: var(--bg); border: 2px solid var(--fg); border-radius: 0; text-shadow: none; }
+.ui-s--neon.ui-badge { background: transparent; box-shadow: 0 0 10px -2px var(--tone); }
+.ui-s--terminal.ui-badge { background: none; border-radius: 2px; }
+.ui-s--terminal.ui-badge::before { content: "["; } .ui-s--terminal.ui-badge::after { content: "]"; }
+.ui-s--terminal.ui-badge { border: 0; padding: 0 2px; }
+.ui-s--minimal.ui-badge { background: none; border: 0; border-radius: 0; padding: 0 2px; }
+
+/* ---------- Progress ---------- */
+.ui-progress { display: grid; gap: 8px; width: min(100%, 380px); font-family: var(--s-ff); text-transform: var(--s-tt); letter-spacing: var(--s-ls); font-size: 13px; }
+.ui-progress__head { display: flex; justify-content: space-between; color: var(--mut); }
+.ui-progress__head output { color: var(--acc); font-variant-numeric: tabular-nums; }
+.ui-progress__track { position: relative; height: 12px; overflow: hidden; background: var(--s-bg); border: var(--s-bd); border-radius: var(--s-r); box-shadow: var(--s-sh); }
+.ui-progress__fill { height: 100%; width: var(--v, 0%); background: var(--acc); transition: width 0.4s; border-radius: inherit; }
+.ui-progress--striped .ui-progress__fill { background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.22) 0 8px, transparent 8px 16px); background-color: var(--acc); background-size: 22px 22px; animation: ui-stripes 0.8s linear infinite; }
+@keyframes ui-stripes { to { background-position: 22px 0; } }
+.ui-s--neon .ui-progress__fill { box-shadow: 0 0 14px var(--acc); }
+.ui-s--retro .ui-progress__track { height: 20px; background-image: repeating-linear-gradient(90deg, transparent 0 9px, var(--bg) 9px 11px); }
+.ui-s--retro .ui-progress__fill { background-image: repeating-linear-gradient(90deg, var(--acc) 0 9px, transparent 9px 11px); animation: none; }
+.ui-s--minimal .ui-progress__track { height: 2px; border: 0; background: color-mix(in srgb, var(--fg) 16%, transparent); }
+.ui-progress__ascii { margin: 0; font-family: var(--mono); font-size: 14px; color: var(--acc); white-space: pre; text-shadow: var(--s-ts); }
+
+/* ---------- Alert ---------- */
+.ui-alert { --tone: var(--acc); display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; width: min(100%, 460px); font-size: 14px; line-height: 1.5; }
+.ui-alert__icon { flex: none; display: grid; place-content: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--mono); font-weight: 800; color: var(--bg); background: var(--tone); }
+.ui-alert__body { display: grid; gap: 2px; flex: 1; min-width: 0; text-transform: none; letter-spacing: normal; }
+.ui-alert__body strong { color: var(--tone); }
+.ui-alert__body span { color: var(--fg); opacity: 0.85; }
+.ui-alert__close { flex: none; background: none; border: 0; color: var(--mut); cursor: pointer; font: inherit; font-size: 16px; line-height: 1; padding: 2px 4px; }
+.ui-alert__close:hover { color: var(--fg); }
+.ui-alert.ui-surface { border-left: 3px solid var(--tone); }
+.ui-s--retro .ui-alert__icon, .ui-s--solid .ui-alert__icon { border-radius: 0; }
+.ui-s--terminal .ui-alert__icon, .ui-s--minimal .ui-alert__icon { background: none; color: var(--tone); width: auto; }
+.ui-s--terminal .ui-alert__icon::before { content: "["; } .ui-s--terminal .ui-alert__icon::after { content: "]"; }
+.ui-s--neon .ui-alert__icon { box-shadow: 0 0 12px var(--tone); }
+
+/* ---------- Spinner ---------- */
+.ui-spin { display: inline-flex; align-items: center; gap: 10px; font-family: var(--s-ff); text-transform: var(--s-tt); letter-spacing: var(--s-ls); color: var(--fg); font-size: 14px; }
+.ui-spin__frames { font-family: var(--mono); color: var(--acc); white-space: pre; text-shadow: var(--s-ts); }
+.ui-spin__ring { width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--acc) 25%, transparent); border-top-color: var(--acc); animation: ui-spin 0.8s linear infinite; }
+@keyframes ui-spin { to { rotate: 360deg; } }
+
+/* ---------- NavBar ---------- */
+.ui-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; width: 100%; font-size: 14px; }
+.ui-nav__brand { font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
+.ui-s--terminal .ui-nav__brand::before { content: "~/"; color: var(--acc); }
+.ui-nav__links { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow: auto; }
+.ui-nav__link { position: relative; font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--mut); background: none; border: 0; padding: 8px 12px; cursor: pointer; border-radius: calc(var(--s-r) - 2px); white-space: nowrap; transition: color 0.15s, background 0.15s; }
+.ui-nav__link:hover { color: var(--fg); }
+.ui-nav__link[aria-current="true"] { color: var(--fg); background: color-mix(in srgb, var(--acc) 20%, transparent); }
+.ui-s--outline .ui-nav__link[aria-current="true"], .ui-s--minimal .ui-nav__link[aria-current="true"] { background: none; box-shadow: inset 0 -2px 0 var(--acc); border-radius: 0; }
+.ui-s--neon .ui-nav__link[aria-current="true"] { background: none; color: var(--acc); text-shadow: 0 0 8px var(--acc); }
+.ui-s--retro .ui-nav__link[aria-current="true"] { background: var(--acc); color: var(--bg); border-radius: 0; }
+.ui-s--terminal .ui-nav__link[aria-current="true"] { background: none; color: var(--acc); }
+.ui-s--terminal .ui-nav__link[aria-current="true"]::before { content: "> "; }
+.ui-nav--floating { width: fit-content; border-radius: 999px; }
+
+/* ---------- Accordion ---------- */
+.ui-acc { display: grid; gap: 8px; width: min(100%, 520px); font-family: var(--s-ff); }
+.ui-acc__item { background: var(--s-bg); border: var(--s-bd); border-radius: var(--s-r); box-shadow: var(--s-sh); backdrop-filter: var(--s-bf); overflow: hidden; }
+.ui-s--minimal .ui-acc__item { border: 0; border-radius: 0; }
+.ui-acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font: inherit; font-weight: var(--s-fw); text-transform: var(--s-tt); letter-spacing: var(--s-ls); text-shadow: var(--s-ts); color: var(--fg); background: none; border: 0; text-align: left; cursor: pointer; }
+.ui-acc__mark { font-family: var(--mono); color: var(--acc); transition: rotate 0.2s; flex: none; }
+.ui-acc__item.is-open .ui-acc__mark { rotate: 45deg; }
+.ui-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
+.ui-acc__item.is-open .ui-acc__panel { grid-template-rows: 1fr; }
+.ui-acc__panel > div { overflow: hidden; }
+.ui-acc__panel p { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.6; color: var(--fg); opacity: 0.85; text-transform: none; letter-spacing: normal; text-shadow: none; }
+
+/* ---------- Panel ---------- */
+.ui-panel { width: min(100%, 420px); overflow: hidden; }
+.ui-panel__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ln); font-size: 12px; font-weight: var(--s-fw); color: var(--mut); }
+.ui-panel__bar i { width: 9px; height: 9px; border-radius: 50%; }
+.ui-panel__body { padding: 16px; display: grid; gap: 8px; font-size: 14px; line-height: 1.6; text-transform: none; letter-spacing: normal; text-shadow: none; }
+.ui-panel__body h4 { margin: 0; font-size: 18px; text-transform: var(--s-tt); letter-spacing: var(--s-ls); text-shadow: var(--s-ts); }
+.ui-panel__body p { margin: 0; opacity: 0.85; }
+.ui-panel__foot { padding: 10px 16px; border-top: 1px solid var(--ln); font-size: 12px; color: var(--mut); }
+.ui-panel[data-corners]::before { content: attr(data-corners); position: absolute; left: 8px; top: 6px; color: var(--acc); font-size: 12px; }
+.ui-panel { position: relative; }
+
+/* ---------- PricingCard ---------- */
+/* PricingCard */
+.ui-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.ui-price { position: relative; display: grid; gap: 16px; align-content: start; padding: 24px; width: min(100%, 300px); text-align: start; }
+.ui-price__badge { position: absolute; top: -12px; left: 20px; }
+.ui-price__head { display: grid; gap: 6px; }
+.ui-price__name { font-size: 13px; letter-spacing: 0.14em; color: var(--mut); }
+.ui-price__desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mut); text-transform: none; letter-spacing: normal; }
+.ui-price__cost { display: grid; gap: 6px; }
+.ui-price__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 42px; font-weight: 800; line-height: 1; text-transform: none; }
+.ui-price__amount small { font-size: 14px; color: var(--mut); font-weight: 500; }
+.ui-price__was { font-size: 18px; font-weight: 500; color: var(--mut); text-decoration-thickness: 2px; }
+.ui-price__note { font-size: 12px; color: var(--mut); text-transform: none; letter-spacing: normal; }
+.ui-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; text-transform: none; letter-spacing: normal; text-shadow: none; }
+.ui-price li { display: flex; gap: 8px; }
+.ui-price li::before { content: "+"; flex: none; color: var(--acc); font-family: var(--mono); }
+.ui-s--terminal.ui-price li::before { content: "[x]"; }
+.ui-s--retro.ui-price li::before { content: ">"; }
+.ui-price li.ui-price__off { color: var(--mut); opacity: 0.6; text-decoration: line-through; }
+.ui-price li.ui-price__off::before { content: "–"; color: var(--mut); }
+.ui-s--terminal.ui-price li.ui-price__off::before { content: "[ ]"; }
+.ui-price__inline { margin: 0; font-size: 13px; line-height: 1.6; color: var(--mut); text-transform: none; letter-spacing: normal; }
+/* destacado */
+.ui-price--hl { translate: 0 -4px; }
+.ui-price--hl-glow { border-color: var(--acc); box-shadow: var(--s-sh), 0 0 0 1px var(--acc), 0 20px 50px -24px var(--acc); }
+.ui-price--hl-border { border: 3px solid var(--acc); }
+.ui-price--hl-invert { box-shadow: var(--s-sh), 0 24px 60px -26px var(--acc); }
+.ui-price--hl-invert .ui-price__amount { font-size: 48px; }
+/* la insignia queda a caballo entre la tarjeta y la página: sólida, para leerse sobre ambos */
+.ui-price--hl-invert > .ui-price__badge > * { background: var(--inv-b); color: var(--inv-a); border-color: var(--inv-a); }
+/* maquetaciones */
+.ui-price--compact { gap: 12px; padding: 20px; }
+.ui-price--compact .ui-price__amount { font-size: 34px; }
+.ui-price--horizontal { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
+.ui-price__main { flex: 999 1 260px; display: grid; gap: 14px; }
+.ui-price__main ul { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
+.ui-price__side { flex: 1 1 200px; display: grid; gap: 14px; }
+/* PricingSection: selector mensual/anual y lista */
+.ui-billing { display: inline-flex; gap: 4px; padding: 4px; border-radius: max(var(--s-r), 999px); }
+.ui-s--retro.ui-billing, .ui-s--terminal.ui-billing, .ui-s--outline.ui-billing { border-radius: var(--s-r); }
+.ui-billing button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: inherit; background: transparent; color: var(--mut); font: inherit; font-size: 14px; cursor: pointer; }
+.ui-billing button[aria-pressed="true"] { background: var(--acc); color: var(--bg); }
+.ui-billing button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
+.ui-billing__note { padding: 2px 7px; border-radius: 999px; font-size: 11px; background: color-mix(in srgb, var(--acc2) 22%, transparent); color: var(--fg); }
+.ui-billing button[aria-pressed="true"] .ui-billing__note { background: color-mix(in srgb, var(--bg) 22%, transparent); color: inherit; }
+.ui-pricing__grid.ui-pricing__grid--list { max-width: 820px; grid-template-columns: 1fr; gap: 24px; }
+
+/* ---------- Testimonial ---------- */
+.ui-quote { display: grid; gap: 16px; padding: 24px; width: min(100%, 440px); }
+.ui-quote__stars { color: var(--acc); letter-spacing: 0.2em; font-family: var(--mono); font-size: 14px; }
+.ui-quote blockquote { margin: 0; font-size: 18px; line-height: 1.5; text-transform: none; letter-spacing: normal; text-shadow: none; }
+.ui-quote__by { display: flex; align-items: center; gap: 12px; font-size: 13px; }
+.ui-quote__avatar { display: grid; place-content: center; width: 40px; height: 40px; border-radius: min(var(--s-r), 50%); background: color-mix(in srgb, var(--acc) 22%, transparent); border: 1px solid var(--acc); color: var(--acc); font-weight: 800; font-family: var(--mono); }
+.ui-quote__by strong { display: block; } .ui-quote__by span { color: var(--mut); text-transform: none; letter-spacing: normal; }
+
+/* ---------- SectionHeader ---------- */
+.ui-sh { display: grid; gap: 10px; width: min(100%, 560px); min-width: 0; font-family: var(--s-ff); }
+.ui-sh--center { text-align: center; justify-items: center; }
+.ui-sh__kicker { font-size: 12px; letter-spacing: 0.2em; color: var(--acc); text-transform: uppercase; text-shadow: var(--s-ts), var(--legibility-ts); }
+.ui-sh h2 { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.02em; text-transform: var(--s-tt); text-shadow: var(--s-ts), var(--legibility-ts); font-weight: 800; }
+.ui-sh p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mut); text-transform: none; letter-spacing: normal; text-shadow: var(--legibility-ts); }
+.ui-sh__rule { color: var(--ln); font-family: var(--mono); overflow: hidden; white-space: nowrap; width: 100%; }
+.ui-sh__line { height: 1px; width: 64px; background: var(--acc); }
+
+/* ---------- Divider ---------- */
+.ui-div { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--mut); font-family: var(--s-ff); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: var(--legibility-ts); }
+.ui-div__rule { flex: 1; overflow: hidden; white-space: nowrap; color: var(--ln); font-family: var(--mono); }
+.ui-div__rule--line { height: 1px; background: var(--ln); font-size: 0; }
+.ui-s--neon .ui-div__rule--line { background: var(--acc); box-shadow: 0 0 8px var(--acc); }
+.ui-s--retro .ui-div__rule--line { height: 3px; background: repeating-linear-gradient(90deg, var(--acc) 0 8px, transparent 8px 12px); }
+
+/* ---------- AsciiChart ---------- */
+.ui-chart { display: grid; gap: 6px; font-family: var(--mono); }
+/* Mismo caso que .ui-bitmap: barras en <pre>, sin salto de línea posible — max-width + overflow-x
+   evita que fuerce el ancho mínimo de un contenedor grid/flex sin `min-width: 0` en móvil. */
+.ui-chart pre { margin: 0; max-width: 100%; overflow-x: auto; font-size: 13px; line-height: 1.15; color: var(--acc); text-shadow: var(--s-ts); white-space: pre; }
+.ui-chart__labels { max-width: 100%; overflow-x: auto; font-size: 11px; color: var(--mut); white-space: pre; }
+.ui-s--terminal.ui-chart pre { color: var(--acc); } .ui-s--retro.ui-chart pre { color: var(--acc2); }
+
+/* ---------- Typewriter / NeonSign ---------- */
+.ui-type { font-family: var(--s-ff); color: var(--fg); font-weight: 800; letter-spacing: -0.01em; text-shadow: var(--s-ts), var(--legibility-ts); text-transform: var(--s-tt); }
+.ui-type__cursor { display: inline-block; width: 0.1em; min-width: 3px; height: 1em; margin-left: 4px; vertical-align: text-bottom; background: var(--acc); animation: ui-blink 1s steps(1) infinite; }
+.ui-type__cursor--block { width: 0.55em; } .ui-type__cursor--underscore { height: 0.12em; width: 0.6em; vertical-align: baseline; }
+.ui-neon { margin: 0; font-weight: 800; letter-spacing: 0.04em; text-align: center; color: color-mix(in srgb, var(--tone, var(--acc)) 30%, #fff); }
+.ui-neon--tube { text-shadow: 0 0 4px #fff, 0 0 12px var(--tone), 0 0 28px var(--tone), 0 0 60px var(--tone); }
+.ui-neon--outline { color: transparent; -webkit-text-stroke: 2px var(--tone); text-shadow: 0 0 18px var(--tone); }
+.ui-neon--pixel { color: var(--tone); font-family: "Courier New", monospace; text-transform: uppercase; text-shadow: 4px 4px 0 var(--acc2); }
+.ui-neon--flicker { animation: ui-neonflick 3.4s steps(1) infinite; }
+@keyframes ui-neonflick { 0%, 18%, 22%, 62%, 66%, 100% { opacity: 1; } 20% { opacity: 0.4; } 64% { opacity: 0.55; } }
+@keyframes ui-blink { 50% { opacity: 0; } }
+
+/* ---------- Reveal / Spotlight ---------- */
+/* ---------- Reveal (components/ui/Reveal.tsx) ----------
+ * Una sola variable, --rv-p (0 oculto → 1 visible), mueve todos los efectos; está registrada con @property para
+ * poder interpolarla. El CSS solo declara estados estáticos: el contenedor fija el objetivo --rv-t (0/1, o el
+ * progreso del scroll con trigger="scroll") y cada unidad (el contenedor, sus hijos o las palabras/letras) deriva
+ * de él su --rv-p. La animación 0 → 1 la hace Reveal.tsx con la Web Animations API sobre --rv-p, así que no toca
+ * la propiedad `transition` de nadie (los hijos conservan sus propias transiciones de hover).
+ * En modo scroll el escalonado se reparte en el recorrido con --rv-k. */
+@property --rv-p { syntax: "<number>"; inherits: false; initial-value: 1; }
+.ui-rv {
+  --rv-t: 1; --rv-dx: 0px; --rv-dy: 0px; --rv-rx: 0deg; --rv-ry: 0deg; --rv-origin: 50% 50%;
+  --rv-ct: 0%; --rv-cr: 0%; --rv-cb: 0%; --rv-cl: 0%;
+}
+.ui-rv[data-rv="0"] { --rv-t: 0; }
+.ui-rv--self, .ui-rv--each > :not(.ui-rv__sr), .ui-rv__word > .ui-rv__u {
+  --rv-p: clamp(0, calc(var(--rv-t) * (1 + (var(--rv-n, 1) - 1) * var(--rv-k, 0)) - var(--rv-i, 0) * var(--rv-k, 0)), 1);
+}
+/* Unidades de texto troceado: inline-block para poder moverlas; las letras no parten palabras */
+.ui-rv__u { display: inline-block; }
+.ui-rv__word { display: inline-block; white-space: nowrap; }
+.ui-rv__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+.ui-rv--fade:not([data-rv-done]).ui-rv--self, .ui-rv--fade:not([data-rv-done]).ui-rv--each > :not(.ui-rv__sr), .ui-rv--fade:not([data-rv-done]) .ui-rv__word > .ui-rv__u { opacity: var(--rv-p); }
+.ui-rv--slide:not([data-rv-done]).ui-rv--self, .ui-rv--slide:not([data-rv-done]).ui-rv--each > :not(.ui-rv__sr), .ui-rv--slide:not([data-rv-done]) .ui-rv__word > .ui-rv__u { opacity: var(--rv-p); translate: calc((1 - var(--rv-p)) * var(--rv-dx)) calc((1 - var(--rv-p)) * var(--rv-dy)); }
+.ui-rv--scale:not([data-rv-done]).ui-rv--self, .ui-rv--scale:not([data-rv-done]).ui-rv--each > :not(.ui-rv__sr), .ui-rv--scale:not([data-rv-done]) .ui-rv__word > .ui-rv__u { opacity: var(--rv-p); scale: calc(1 - (1 - var(--rv-p)) * 0.14); }
+.ui-rv--blur:not([data-rv-done]).ui-rv--self, .ui-rv--blur:not([data-rv-done]).ui-rv--each > :not(.ui-rv__sr), .ui-rv--blur:not([data-rv-done]) .ui-rv__word > .ui-rv__u { opacity: var(--rv-p); filter: blur(calc((1 - var(--rv-p)) * 12px)); translate: calc((1 - var(--rv-p)) * var(--rv-dx) * 0.35) calc((1 - var(--rv-p)) * var(--rv-dy) * 0.35); }
+.ui-rv--wipe:not([data-rv-done]).ui-rv--self, .ui-rv--wipe:not([data-rv-done]).ui-rv--each > :not(.ui-rv__sr), .ui-rv--wipe:not([data-rv-done]) .ui-rv__word > .ui-rv__u { clip-path: inset(calc((1 - var(--rv-p)) * var(--rv-ct)) calc((1 - var(--rv-p)) * var(--rv-cr)) calc((1 - var(--rv-p)) * var(--rv-cb)) calc((1 - var(--rv-p)) * var(--rv-cl))); }
+.ui-rv--flip:not([data-rv-done]).ui-rv--self, .ui-rv--flip:not([data-rv-done]).ui-rv--each > :not(.ui-rv__sr), .ui-rv--flip:not([data-rv-done]) .ui-rv__word > .ui-rv__u { opacity: var(--rv-p); transform-origin: var(--rv-origin); transform: perspective(900px) rotateX(calc((1 - var(--rv-p)) * var(--rv-rx))) rotateY(calc((1 - var(--rv-p)) * var(--rv-ry))); }
+.ui-rv--iris:not([data-rv-done]).ui-rv--self, .ui-rv--iris:not([data-rv-done]).ui-rv--each > :not(.ui-rv__sr), .ui-rv--iris:not([data-rv-done]) .ui-rv__word > .ui-rv__u { clip-path: circle(calc(var(--rv-p) * 75%) at 50% 50%); }
+
+/* Las reglas de efecto dejan de aplicarse al terminar ([data-rv-done]): no queda transform/filter/clip-path
+ * residual (un transform, aunque valga 0, atrapa a los position: fixed de dentro — Modal, Drawer, guía §12) y cada
+ * elemento vuelve a sus propios estilos. Sin JS o con movimiento reducido el contenido se ve directamente. */
+@media (prefers-reduced-motion: reduce) { .ui-rv { --rv-t: 1 !important; } }
+.ui-spot { position: relative; overflow: hidden; }
+.ui-spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--spot-o, 0); transition: opacity 0.25s; background: radial-gradient(var(--spot-r, 220px) circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--tone, var(--acc)) var(--spot-i, 30%), transparent), transparent 70%); }
+.ui-spot:hover { --spot-o: 1; }
+.ui-spot--border::after { content: ""; position: absolute; inset: 0; pointer-events: none; padding: 1px; border-radius: inherit; background: radial-gradient(var(--spot-r, 220px) circle at var(--mx, 50%) var(--my, 50%), var(--tone, var(--acc)), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: var(--spot-o, 0); transition: opacity 0.25s; }
+
+/* ---------- GridBackground / CrtOverlay ---------- */
+.ui-grid { position: absolute; inset: 0; overflow: hidden; background-color: var(--bg); }
+.ui-grid__layer { position: absolute; inset: -80px; opacity: var(--gop, 0.6); }
+.ui-grid--dots .ui-grid__layer { background-image: radial-gradient(var(--acc) 1.2px, transparent 1.4px); background-size: var(--gs, 28px) var(--gs, 28px); }
+.ui-grid--lines .ui-grid__layer { background-image: linear-gradient(var(--ln) 1px, transparent 1px), linear-gradient(90deg, var(--ln) 1px, transparent 1px); background-size: var(--gs, 28px) var(--gs, 28px); }
+.ui-grid--cross .ui-grid__layer { background-image: linear-gradient(var(--acc) 1px, transparent 1px), linear-gradient(90deg, var(--acc) 1px, transparent 1px); background-size: var(--gs, 28px) var(--gs, 28px); mask-image: radial-gradient(circle at center, #000 0 1.5px, transparent 2px); mask-size: var(--gs, 28px) var(--gs, 28px); }
+.ui-grid--diagonal .ui-grid__layer { background-image: repeating-linear-gradient(45deg, var(--ln) 0 1px, transparent 1px var(--gs, 28px)); }
+.ui-grid--drift .ui-grid__layer { animation: ui-drift 14s linear infinite; }
+@keyframes ui-drift { to { transform: translate(var(--gs, 28px), var(--gs, 28px)); } }
+.ui-grid--fade { mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); }
+.ui-crt { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
+.ui-crt__scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, var(--scan, 0.3)) 0 1px, transparent 1px 3px); }
+.ui-crt__vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, var(--vig, 0.6)) 100%); }
+.ui-crt__flick { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.04); animation: ui-crtflick 0.16s steps(2) infinite; opacity: var(--flk, 0.5); }
+@keyframes ui-crtflick { 50% { opacity: 0; } }
+.ui-crt__bar { position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.07), transparent); animation: ui-crtbar 5s linear infinite; }
+@keyframes ui-crtbar { from { top: -20%; } to { top: 110%; } }
+
+/* ---------- Timeline / Table ---------- */
+.ui-tl { position: relative; display: grid; gap: 22px; width: min(100%, 460px); margin: 0; padding: 0 0 0 34px; list-style: none; font-family: var(--s-ff); }
+.ui-tl::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px; background: var(--ln); }
+.ui-tl li { position: relative; display: grid; gap: 2px; }
+.ui-tl__dot { position: absolute; left: -34px; top: 1px; box-sizing: border-box; width: 22px; height: 22px; display: grid; place-content: center; font-size: 12px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; text-shadow: none; font-family: var(--mono); color: var(--bg); background: var(--acc); border-radius: min(var(--s-r), 50%); }
+.ui-tl strong { text-transform: var(--s-tt); letter-spacing: var(--s-ls); text-shadow: var(--s-ts); }
+.ui-tl li > span:not(.ui-tl__dot) { font-size: 13px; color: var(--mut); line-height: 1.5; text-transform: none; letter-spacing: normal; }
+.ui-s--retro .ui-tl__dot, .ui-s--solid .ui-tl__dot { border-radius: 0; }
+.ui-s--terminal .ui-tl__dot, .ui-s--minimal .ui-tl__dot { background: none; color: var(--acc); border: 1px solid var(--acc); }
+.ui-s--neon .ui-tl__dot { box-shadow: 0 0 12px var(--acc); }
+.ui-table { border-collapse: collapse; width: min(100%, 520px); font-size: 14px; }
+.ui-table th, .ui-table td { padding: 10px 14px; text-align: left; }
+.ui-table th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); border-bottom: 1px solid var(--ln); font-weight: 700; }
+.ui-table td { border-bottom: 1px solid color-mix(in srgb, var(--ln) 55%, transparent); text-transform: none; letter-spacing: normal; text-shadow: none; }
+.ui-table--striped tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--fg) 5%, transparent); }
+.ui-table tbody tr:hover td { background: color-mix(in srgb, var(--acc) 12%, transparent); }
+.ui-table-wrap { overflow: auto; max-width: 100%; }
+.ui-s--solid .ui-table th { background: color-mix(in srgb, var(--fg) 12%, var(--bg)); border-bottom-width: 3px; }
+.ui-s--retro .ui-table th { background: var(--acc); color: var(--bg); }
+.ui-s--terminal .ui-table td:first-child { color: var(--acc); }
+
+/* ---------- ScrambleText / BitmapText / StatCounter ---------- */
+.ui-scramble { margin: 0; line-height: 1.05; letter-spacing: -0.02em; color: var(--tone, var(--fg)); }
+.ui-scramble--gradient { background: linear-gradient(90deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.ui-scramble--upper { text-transform: uppercase; }
+/* max-width + overflow-x: el arte ASCII no puede reflotar (es <pre>, ancho fijo por carácter), así
+   que un texto largo con `size` por defecto puede ser más ancho que el viewport en móvil. Antes
+   solo tenía `overflow: hidden`, que no reduce el ancho de la caja (sigue empujando la página) y
+   además recorta el arte en vez de dejarlo legible — con scroll horizontal contenido no se sale de
+   la página y el texto completo sigue accesible. */
+.ui-bitmap { margin: 0; max-width: 100%; color: var(--tone, var(--acc)); font-family: var(--mono, ui-monospace, Consolas, monospace); white-space: pre; letter-spacing: 0; overflow-x: auto; overflow-y: hidden; }
+.ui-bitmap--glow { text-shadow: 0 0 8px var(--tone, var(--acc)); }
+.ui-bitmap--flicker { animation: ui-flicker 2.4s steps(1) infinite; }
+@keyframes ui-flicker { 0%, 92%, 96% { opacity: 1; } 93% { opacity: 0.35; } 97% { opacity: 0.6; } }
+.ui-bitmap--scan { -webkit-mask-image: linear-gradient(180deg, #000 0 40%, rgba(0, 0, 0, 0.35) 50%, #000 60% 100%); -webkit-mask-size: 100% 300%; animation: ui-scan 3s linear infinite; }
+@keyframes ui-scan { from { -webkit-mask-position: 0 100%; } to { -webkit-mask-position: 0 -100%; } }
+.ui-stat { display: grid; gap: 10px; }
+.ui-stat--center { justify-items: center; text-align: center; } .ui-stat--left { justify-items: start; } .ui-stat--right { justify-items: end; }
+/* Mismo caso que .ui-bitmap / .ui-chart pre: arte en <pre>, sin salto de línea posible. */
+.ui-stat__art { margin: 0; max-width: 100%; overflow-x: auto; color: var(--tone, var(--acc)); font-family: ui-monospace, Consolas, monospace; font-size: 8px; line-height: 8px; white-space: pre; text-shadow: 0 0 8px var(--tone, var(--acc)); }
+.ui-stat__label { font-size: 12px; letter-spacing: 0.18em; color: var(--mut); }
+
+/* ---------- Marquee ---------- */
+.ui-marquee { width: 100%; overflow: hidden; font-weight: 800; line-height: 1.4; font-family: var(--s-ff); text-transform: var(--s-tt); }
+.ui-marquee--edges { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
+.ui-marquee__row { overflow: hidden; white-space: nowrap; }
+.ui-marquee__track { display: inline-flex; animation: ui-marq linear infinite; will-change: transform; }
+.ui-marquee--pause:hover .ui-marquee__track { animation-play-state: paused; }
+@keyframes ui-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+.ui-marquee--glass { color: var(--tone, var(--fg)); opacity: 0.9; }
+.ui-marquee--solid { color: var(--bg); background: var(--tone, var(--acc)); }
+.ui-marquee--outline { color: transparent; -webkit-text-stroke: 1px var(--tone, var(--acc)); }
+.ui-marquee--neon { color: var(--tone, var(--acc)); text-shadow: 0 0 10px var(--tone, var(--acc)); }
+.ui-marquee--retro { color: var(--tone, var(--acc)); background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.25) 3px 4px); }
+.ui-marquee--terminal { color: var(--tone, var(--acc)); font-family: var(--mono); }
+.ui-marquee--minimal { color: var(--tone, var(--mut)); font-weight: 500; }
+
+/* ---------- GlyphCursor ---------- */
+.ui-cursor-scope { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
+.ui-cursor { position: absolute; left: 0; top: 0; color: var(--tone, var(--acc)); line-height: 1; }
+.ui-cursor--glow { text-shadow: 0 0 10px var(--tone, var(--acc)); }
+.ui-cursor--spin { animation: ui-spin 3s linear infinite; }
+.ui-cursor--ring { border: 2px solid var(--tone, var(--acc)); border-radius: 50%; margin: -12px 0 0 -12px; }
+.ui-cursor--dot { background: var(--tone, var(--acc)); border-radius: 50%; margin: -5px 0 0 -5px; }
+
+/* ---------- SceneFlash ---------- */
+.ui-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; overflow: hidden; }
+.ui-flash--sweep { background: linear-gradient(0deg, transparent 0%, var(--acc2) 45%, var(--acc) 55%, transparent 100%); }
+.ui-flash--iris { inset: auto; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, transparent 55%, var(--acc) 62%, transparent 70%); }
+.ui-flash--slices { background: repeating-linear-gradient(0deg, var(--acc) 0 6px, transparent 6px 20px, var(--acc2) 20px 24px, transparent 24px 46px); mix-blend-mode: screen; }
+.ui-flash--blinds, .ui-flash--pixels { display: grid; opacity: 1; }
+.ui-flash--blinds { grid-template-columns: repeat(10, 1fr); }
+.ui-flash--pixels { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); }
+.ui-flash__cell { background: var(--acc); opacity: 0; }
+.ui-flash__cell:nth-child(even) { background: var(--acc2); }
+
+/* ---------- TerminalTyper ---------- */
+.ui-term { width: 100%; overflow: hidden; font-family: var(--mono); }
+.ui-term__bar { display: flex; gap: 6px; align-items: center; padding: 10px 12px; background: rgba(255, 255, 255, 0.06); font-size: 11px; color: var(--mut); }
+.ui-term__bar i { width: 10px; height: 10px; border-radius: 50%; }
+.ui-term__body { margin: 0; padding: 16px; min-height: 150px; font-size: 13px; line-height: 1.7; color: var(--fg); white-space: pre-wrap; text-transform: none; letter-spacing: normal; }
+.ui-term__cmd { color: var(--acc2); } .ui-term__ok { color: var(--acc); }
+.ui-term__cursor { display: inline-block; width: 8px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--fg); animation: ui-blink 1s steps(1) infinite; }
+.ui-term__cursor--bar { width: 2px; } .ui-term__cursor--underscore { height: 2px; width: 9px; vertical-align: baseline; }
+.ui-s--retro.ui-term { background: #031006; border-color: var(--acc); box-shadow: inset 0 0 40px color-mix(in srgb, var(--acc) 18%, transparent), var(--s-sh); }
+.ui-s--retro .ui-term__body { color: var(--acc); text-shadow: 0 0 6px color-mix(in srgb, var(--acc) 70%, transparent); background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.25) 2px 3px); }
+.ui-s--retro .ui-term__cmd, .ui-s--retro .ui-term__ok { color: var(--fg); }
+
+/* ---------- AsciiCard ---------- */
+.ui-card { position: relative; overflow: hidden; min-height: 250px; transform-style: preserve-3d; will-change: transform; color: var(--fg); }
+.ui-card--center .ui-card__inner { text-align: center; justify-items: center; }
+.ui-card::before, .ui-card::after { content: attr(data-corner); position: absolute; z-index: 3; font-size: 12px; line-height: 1; color: var(--acc); pointer-events: none; }
+.ui-card::before { left: 8px; top: 8px; } .ui-card::after { right: 8px; bottom: 8px; }
+.ui-card__bg, .ui-card__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+.ui-card__fx { z-index: 4; }
+.ui-card__glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%); }
+.ui-card--glowon:hover .ui-card__glow { opacity: 1; }
+.ui-card__inner { position: relative; z-index: 2; padding: 22px; display: grid; gap: 10px; transform: translateZ(30px); }
+.ui-card__art { margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: 5px; line-height: 5px; color: var(--acc); text-shadow: 0 0 8px var(--acc); white-space: pre; overflow: hidden; }
+.ui-card h3 { margin: 4px 0 0; font-size: 22px; letter-spacing: -0.01em; min-height: 1.2em; text-transform: var(--s-tt); text-shadow: var(--s-ts); }
+.ui-card p { margin: 0; font-size: 14px; line-height: 1.55; opacity: 0.85; text-transform: none; letter-spacing: normal; text-shadow: none; }
+.ui-card__meta { font-size: 12px; letter-spacing: 0.08em; color: var(--acc2); }
+.ui-s--minimal.ui-card { border-width: 0; border-top: 1px solid var(--ln); }
+
+.ui-s--terminal .ui-alert__icon, .ui-s--minimal .ui-alert__icon { white-space: nowrap; flex: none; }
+
+/* ---------- Presence (aparición / desaparición) ---------- */
+.ui-tx { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
+.ui-tx__content { position: relative; z-index: 1; will-change: transform, filter, opacity, clip-path; }
+.ui-tx__clones { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
+.ui-tx__clone { position: absolute; inset: 0; overflow: hidden; will-change: transform, opacity; }
+.ui-tx__fx { position: absolute; inset: 0; z-index: 3; width: 100% !important; height: 100% !important; pointer-events: none; }
+.ui-tx__boot {
+  position: absolute; inset: 0; z-index: 4; margin: 0; padding: 18px; pointer-events: none;
+  background: var(--bg); font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 13px;
+  line-height: 1.7; white-space: pre-wrap; overflow: hidden; opacity: 0; visibility: hidden;
+}
+
+/* Presence en modo fill: ocupa el contenedor en vez de ajustarse al contenido */
+.ui-tx--fill { position: absolute; inset: 0; display: block; }
+.ui-tx--fill .ui-tx__content { position: absolute; inset: 0; }
+
+/* ---------- HoverFX (envoltorio de hover reutilizable) ---------- */
+.ui-hoverfx { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
+.ui-hoverfx--fill { position: absolute; inset: 0; display: block; }
+.ui-hoverfx--fill .ui-hoverfx__inner { position: absolute; inset: 0; }
+.ui-hoverfx__inner { position: relative; z-index: 1; }
+
+.ui-hoverfx--lift .ui-hoverfx__inner { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s; }
+.ui-hoverfx--lift:hover .ui-hoverfx__inner {
+  transform: translateY(calc(var(--hf-strength, 0.6) * -10px));
+  filter: drop-shadow(0 calc(var(--hf-strength, 0.6) * 16px) calc(var(--hf-strength, 0.6) * 20px) rgba(0, 0, 0, 0.35));
+}
+
+.ui-hoverfx--scale .ui-hoverfx__inner { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: center; }
+.ui-hoverfx--scale:hover .ui-hoverfx__inner { transform: scale(calc(1 + var(--hf-strength, 0.6) * 0.08)); }
+
+.ui-hoverfx--tilt { perspective: 900px; }
+.ui-hoverfx--tilt .ui-hoverfx__inner { transform-style: preserve-3d; will-change: transform; }
+
+.ui-hoverfx__glow {
+  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.3s; border-radius: inherit;
+  background: radial-gradient(var(--hf-radius, 220px) circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--tone, var(--acc)) calc(var(--hf-strength, 0.6) * 55%), transparent), transparent 70%);
+}
+.ui-hoverfx--glow:hover .ui-hoverfx__glow { opacity: 1; }
+
+.ui-hoverfx--shine { overflow: hidden; border-radius: inherit; }
+.ui-hoverfx__shine {
+  position: absolute; inset: -20% -60%; z-index: 2; pointer-events: none;
+  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--tone, var(--acc)) 55%, transparent) 50%, transparent 58%);
+  transform: translateX(-60%); transition: transform 0.7s ease;
+}
+.ui-hoverfx--shine:hover .ui-hoverfx__shine { transform: translateX(60%); }
+
+.ui-hoverfx--scanline { overflow: hidden; border-radius: inherit; }
+.ui-hoverfx__scan {
+  position: absolute; left: 0; right: 0; top: -30%; height: 26%; z-index: 2; pointer-events: none; opacity: 0;
+  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tone, var(--acc)) 45%, transparent), transparent);
+  animation: ui-hf-scan 1.6s linear infinite; animation-play-state: paused;
+}
+.ui-hoverfx--scanline:hover .ui-hoverfx__scan { opacity: 1; animation-play-state: running; }
+@keyframes ui-hf-scan { from { top: -30%; } to { top: 110%; } }
+
+.ui-hoverfx--jitter:hover .ui-hoverfx__inner { animation: ui-hf-jitter 0.22s steps(2, end) infinite; }
+@keyframes ui-hf-jitter {
+  0% { transform: translate(0, 0) skewX(0deg); filter: none; }
+  25% { transform: translate(calc(var(--hf-strength, 0.6) * -3px), calc(var(--hf-strength, 0.6) * 1px)) skewX(-1deg); }
+  50% {
+    transform: translate(calc(var(--hf-strength, 0.6) * 3px), 0) skewX(1deg);
+    filter: drop-shadow(calc(var(--hf-strength, 0.6) * 2px) 0 0 var(--acc)) drop-shadow(calc(var(--hf-strength, 0.6) * -2px) 0 0 var(--acc2));
+  }
+  75% { transform: translate(0, calc(var(--hf-strength, 0.6) * -1px)); }
+  100% { transform: translate(0, 0); filter: none; }
+}
+
+.ui-hoverfx__bracket {
+  position: absolute; width: 16px; height: 16px; z-index: 2; pointer-events: none;
+  border-color: var(--tone, var(--acc)); border-style: solid; border-width: 0; opacity: 0;
+  transition: opacity 0.25s, transform 0.25s;
+}
+.ui-hoverfx--brackets:hover .ui-hoverfx__bracket { opacity: 1; }
+.ui-hoverfx__bracket--tl { top: -7px; left: -7px; border-top-width: 2px; border-left-width: 2px; transform: translate(7px, 7px); }
+.ui-hoverfx--brackets:hover .ui-hoverfx__bracket--tl { transform: translate(0, 0); }
+.ui-hoverfx__bracket--tr { top: -7px; right: -7px; border-top-width: 2px; border-right-width: 2px; transform: translate(-7px, 7px); }
+.ui-hoverfx--brackets:hover .ui-hoverfx__bracket--tr { transform: translate(0, 0); }
+.ui-hoverfx__bracket--bl { bottom: -7px; left: -7px; border-bottom-width: 2px; border-left-width: 2px; transform: translate(7px, -7px); }
+.ui-hoverfx--brackets:hover .ui-hoverfx__bracket--bl { transform: translate(0, 0); }
+.ui-hoverfx__bracket--br { bottom: -7px; right: -7px; border-bottom-width: 2px; border-right-width: 2px; transform: translate(-7px, -7px); }
+.ui-hoverfx--brackets:hover .ui-hoverfx__bracket--br { transform: translate(0, 0); }
+
+.ui-hoverfx--underline .ui-hoverfx__inner::after {
+  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
+  background: var(--tone, var(--acc)); transition: right 0.3s ease;
+}
+.ui-hoverfx--underline:hover .ui-hoverfx__inner::after { right: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-hoverfx__inner, .ui-hoverfx__shine, .ui-hoverfx__scan, .ui-hoverfx__glow, .ui-hoverfx__bracket { transition: none !important; animation: none !important; }
+}
+
+/* =====================================================================
+   Secciones compuestas (prefijo ui-, categoría "secciones")
+   Combinan los componentes de arriba en bloques de página completos:
+   Hero, ContactForm, CTASection, FAQSection, StatsSection, PricingSection,
+   TestimonialSection, Footer. No definen tokens ni --s-* propios: leen los
+   mismos tokens y pasan `variant` a las piezas que envuelven.
+   ===================================================================== */
+
+/* ---------- Hero ---------- */
+.ui-hero { position: relative; width: 100%; overflow: hidden; padding: clamp(40px, 8vw, 88px) clamp(20px, 5vw, 56px); }
+.ui-hero__inner { position: relative; z-index: 1; display: grid; gap: 16px; max-width: 720px; }
+.ui-hero--center { text-align: center; justify-items: center; margin-inline: auto; }
+.ui-hero--left { text-align: left; justify-items: start; }
+.ui-hero__kicker { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acc); text-shadow: var(--legibility-ts); }
+.ui-hero h1 { margin: 0; font-size: clamp(32px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 800; text-shadow: var(--legibility-ts); }
+.ui-hero p { margin: 0; max-width: 52ch; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; color: var(--mut); text-shadow: var(--legibility-ts); }
+.ui-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
+.ui-hero--center .ui-hero__cta { justify-content: center; }
+.ui-hero__trust { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
+.ui-hero--center .ui-hero__trust { justify-content: center; }
+.ui-hero--bd-grid::before, .ui-hero--bd-dots::before, .ui-hero--bd-glow::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
+.ui-hero--bd-grid::before { background-image: linear-gradient(var(--ln) 1px, transparent 1px), linear-gradient(90deg, var(--ln) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 50% 0%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 75%); }
+.ui-hero--bd-dots::before { background-image: radial-gradient(var(--mut) 1.2px, transparent 1.4px); background-size: 26px 26px; opacity: 0.5; }
+.ui-hero--bd-glow::before { background: radial-gradient(480px circle at 50% 0%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%); }
+
+/* ---------- ContactForm ---------- */
+.ui-cform { position: relative; width: min(100%, 480px); display: grid; gap: 14px; padding: 24px; }
+.ui-cform h3 { margin: 0; font-size: 20px; text-transform: var(--s-tt); letter-spacing: var(--s-ls); text-shadow: var(--s-ts); }
+.ui-cform__sub { margin: 0; margin-top: -8px; font-size: 13px; color: var(--mut); text-transform: none; letter-spacing: normal; }
+.ui-cform__row { display: grid; gap: 14px; }
+.ui-cform__row .ui-field { width: 100%; }
+.ui-cform--inline { width: 100%; max-width: 560px; }
+.ui-cform--inline .ui-cform__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
+.ui-cform--inline .ui-field { flex: 1; min-width: 200px; width: auto; }
+.ui-cform--sent { display: grid; gap: 8px; text-align: center; justify-items: center; padding: 32px 24px; }
+.ui-cform--sent strong { font-size: 18px; color: var(--acc); }
+.ui-cform--sent p { margin: 0; color: var(--mut); font-size: 14px; }
+.ui-cform__again { margin-top: 8px; font: inherit; font-size: 13px; color: var(--acc); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
+
+/* ---------- CTASection ---------- */
+.ui-cta { position: relative; width: 100%; display: grid; gap: 12px; padding: clamp(32px, 6vw, 56px); overflow: hidden; }
+.ui-cta--center { text-align: center; justify-items: center; }
+.ui-cta--left { text-align: left; justify-items: start; }
+.ui-cta__kicker { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc); }
+.ui-cta h3 { margin: 0; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.1; letter-spacing: -0.01em; text-transform: var(--s-tt); text-shadow: var(--s-ts); }
+.ui-cta p { margin: 0; max-width: 48ch; color: var(--mut); font-size: 15px; line-height: 1.6; text-transform: none; }
+.ui-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
+.ui-cta--center .ui-cta__actions { justify-content: center; }
+
+/* ---------- FAQSection / StatsSection / PricingSection / TestimonialSection ---------- */
+.ui-faqs, .ui-stats, .ui-pricing, .ui-testimonials { width: 100%; min-width: 0; display: grid; gap: 28px; justify-items: center; text-align: center; }
+.ui-faqs--left { justify-items: start; text-align: left; }
+.ui-faqs__body { width: 100%; min-width: 0; display: flex; justify-content: center; }
+.ui-stats__row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 6vw, 64px); }
+.ui-pricing__grid, .ui-testimonials__grid { width: 100%; min-width: 0; max-width: 980px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
+.ui-pricing__grid > *, .ui-testimonials__grid > *, .ui-articles__grid > * { width: 100%; }
+
+/* ---------- Footer ---------- */
+.ui-footer { width: 100%; padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 48px) 20px; }
+.ui-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; padding-bottom: 24px; }
+.ui-footer__brand { max-width: 280px; display: grid; gap: 10px; }
+.ui-footer__brand strong { font-size: 16px; }
+.ui-footer__brand p { margin: 0; font-size: 13px; color: var(--mut); line-height: 1.6; text-transform: none; }
+.ui-footer__social { display: flex; gap: 10px; margin-top: 4px; }
+.ui-footer__social span { display: grid; place-content: center; width: 30px; height: 30px; border: 1px solid var(--ln); border-radius: 999px; font-size: 11px; letter-spacing: 0.04em; color: var(--mut); }
+.ui-footer__cols { display: flex; flex-wrap: wrap; gap: 40px; }
+.ui-footer__cols > div { display: grid; gap: 10px; min-width: 120px; }
+.ui-footer__cols span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); }
+.ui-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
+.ui-footer__bottom { padding-top: 18px; border-top: 1px solid var(--ln); font-size: 12px; color: var(--mut); }
+
+/* =====================================================================
+   Overlays (prefijo ui-, categoría "overlays")
+   Elementos que aparecen por encima de la página: diálogos, notificaciones, ayuda contextual.
+   Modal y Drawer usan `position: fixed` (no portal): escapan de cualquier `overflow` ancestro sin
+   `createPortal`. Toast se apoya en `sonner` (ver components/ui/Toast.tsx) en vez de reimplementar
+   apilado/gestos/temporizador; aquí solo se le da el aspecto del kit con `unstyled` + estas clases.
+   ===================================================================== */
+
+/* ---------- Modal ---------- */
+.ui-modal__backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); animation: ui-fade-in 0.15s ease; }
+.ui-modal { width: min(100%, 420px); display: grid; gap: 14px; padding: 24px; animation: ui-modal-in 0.2s ease; }
+.ui-modal--sm { width: min(100%, 320px); }
+.ui-modal--lg { width: min(100%, 560px); }
+.ui-modal h3 { margin: 0; font-size: 19px; text-transform: var(--s-tt); letter-spacing: var(--s-ls); text-shadow: var(--s-ts); }
+.ui-modal p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mut); text-transform: none; letter-spacing: normal; }
+.ui-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
+@keyframes ui-fade-in { from { opacity: 0; } }
+@keyframes ui-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
+
+/* ---------- Toast (sonner) ---------- */
+.ui-toast { position: relative; display: flex; align-items: flex-start; gap: 10px; width: min(100%, 360px); padding: 14px 16px; }
+.ui-toast__title { display: block; font-size: 14px; font-weight: var(--s-fw, 700); text-transform: var(--s-tt); letter-spacing: var(--s-ls); text-shadow: var(--s-ts); color: var(--fg); }
+.ui-toast__desc { display: block; margin-top: 2px; font-size: 13px; color: var(--mut); text-transform: none; letter-spacing: normal; }
+.ui-toast__icon { flex: none; color: var(--acc); }
+.ui-toast__close { position: absolute; top: 6px; right: 6px; background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 14px; padding: 4px; }
+.ui-toast__close:hover { color: var(--fg); }
+.ui-toast__action, .ui-toast__cancel { font: inherit; font-size: 12px; border-radius: calc(var(--s-r, 12px) - 2px); padding: 5px 10px; cursor: pointer; margin-top: 8px; }
+.ui-toast__action { background: var(--acc); color: var(--bg); border: 0; }
+.ui-toast__cancel { background: none; border: 1px solid var(--ln); color: var(--fg); }
+
+/* ---------- Tooltip ---------- */
+.ui-tip { position: relative; display: inline-block; border-bottom: 1px dashed var(--mut); cursor: help; font-size: 14px; }
+/* envolviendo un botón/icono: sin subrayado ni cursor de ayuda; el disparador conserva su aspecto */
+.ui-tip--wrap { border-bottom: 0; cursor: inherit; font-size: inherit; }
+.ui-tip__bubble { position: absolute; z-index: 20; width: max-content; max-width: 220px; padding: 8px 12px; font-size: 13px; line-height: 1.5; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
+.ui-tip:hover .ui-tip__bubble, .ui-tip:focus-within .ui-tip__bubble { opacity: 1; visibility: visible; }
+.ui-tip--top .ui-tip__bubble { bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); }
+.ui-tip--top:hover .ui-tip__bubble, .ui-tip--top:focus-within .ui-tip__bubble { transform: translate(-50%, 0); }
+.ui-tip--bottom .ui-tip__bubble { top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); }
+.ui-tip--bottom:hover .ui-tip__bubble, .ui-tip--bottom:focus-within .ui-tip__bubble { transform: translate(-50%, 0); }
+.ui-tip--left .ui-tip__bubble { right: calc(100% + 8px); top: 50%; transform: translate(4px, -50%); }
+.ui-tip--left:hover .ui-tip__bubble, .ui-tip--left:focus-within .ui-tip__bubble { transform: translate(0, -50%); }
+.ui-tip--right .ui-tip__bubble { left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%); }
+.ui-tip--right:hover .ui-tip__bubble, .ui-tip--right:focus-within .ui-tip__bubble { transform: translate(0, -50%); }
+
+/* ---------- Drawer ---------- */
+.ui-drawer__backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.55); animation: ui-fade-in 0.15s ease; }
+.ui-drawer { position: fixed; top: 0; bottom: 0; width: min(84vw, 340px); display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 20px; overflow: auto; }
+.ui-drawer--left { left: 0; animation: ui-drawer-in-left 0.22s ease; }
+.ui-drawer--right { right: 0; animation: ui-drawer-in-right 0.22s ease; }
+.ui-drawer__head { display: flex; align-items: center; justify-content: space-between; }
+.ui-drawer__head strong { font-size: 16px; text-transform: var(--s-tt); letter-spacing: var(--s-ls); }
+.ui-drawer__close { background: none; border: 0; color: var(--mut); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }
+.ui-drawer__close:hover { color: var(--fg); }
+.ui-drawer p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--mut); text-transform: none; letter-spacing: normal; }
+@keyframes ui-drawer-in-left { from { transform: translateX(-100%); } }
+@keyframes ui-drawer-in-right { from { transform: translateX(100%); } }
+
+/* ---------- Select ---------- */
+.ui-select { position: relative; display: grid; gap: 6px; width: min(100%, 280px); font-size: 14px; }
+.ui-select__label { font-size: 12px; letter-spacing: 0.06em; color: var(--mut); }
+.ui-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 12px; cursor: pointer; color: var(--fg); text-align: left; }
+.ui-select--sm .ui-select__trigger { height: 34px; }
+.ui-select--md .ui-select__trigger { height: 42px; }
+.ui-select--lg .ui-select__trigger { height: 52px; font-size: 16px; }
+.ui-select__placeholder { color: var(--mut); }
+.ui-select__mark { color: var(--mut); transition: rotate 0.15s; }
+.ui-select__trigger[aria-expanded="true"] .ui-select__mark { rotate: 180deg; }
+.ui-select__list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 220px; overflow: auto; padding: 6px; list-style: none; margin: 0; display: grid; gap: 2px; }
+.ui-select__opt { width: 100%; text-align: left; font: inherit; color: var(--fg); background: none; border: 0; padding: 8px 10px; border-radius: calc(var(--s-r, 12px) - 4px); cursor: pointer; }
+.ui-select__opt:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); }
+.ui-select__opt.is-selected { color: var(--acc); font-weight: 700; }
+
+/* ---------- CheckboxGroup / RadioGroup ---------- */
+.ui-cgroup, .ui-rgroup { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; font-family: var(--s-ff); }
+.ui-cgroup legend, .ui-rgroup legend { padding: 0 0 2px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
+.ui-cgroup__item, .ui-rgroup__item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg); cursor: pointer; text-transform: none; letter-spacing: normal; }
+.ui-cgroup__box { flex: none; width: 20px; height: 20px; display: grid; place-content: center; background: var(--s-bg); border: var(--s-bd); border-radius: calc(var(--s-r, 12px) / 3); box-shadow: var(--s-sh); cursor: pointer; color: var(--acc); font-size: 12px; padding: 0; }
+.ui-cgroup__box span { opacity: 0; transition: opacity 0.12s; }
+.ui-cgroup__box.is-on span { opacity: 1; }
+.ui-cgroup__box.is-on { border-color: var(--acc); }
+.ui-rgroup__dot { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--s-bg); border: var(--s-bd); box-shadow: var(--s-sh); cursor: pointer; position: relative; padding: 0; }
+.ui-rgroup__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--acc); opacity: 0; transition: opacity 0.12s; }
+.ui-rgroup__dot.is-on { border-color: var(--acc); }
+.ui-rgroup__dot.is-on::after { opacity: 1; }
+.ui-s--retro .ui-cgroup__box, .ui-s--terminal .ui-cgroup__box { width: auto; height: auto; background: none; border: 0; box-shadow: none; border-radius: 0; font-family: var(--mono); }
+.ui-s--retro .ui-cgroup__box::before, .ui-s--terminal .ui-cgroup__box::before { content: "[ ]"; }
+.ui-s--retro .ui-cgroup__box.is-on::before, .ui-s--terminal .ui-cgroup__box.is-on::before { content: "[x]"; color: var(--acc); }
+.ui-s--retro .ui-cgroup__box span, .ui-s--terminal .ui-cgroup__box span { display: none; }
+.ui-s--retro .ui-rgroup__dot, .ui-s--terminal .ui-rgroup__dot { width: auto; height: auto; background: none; border: 0; box-shadow: none; border-radius: 0; font-family: var(--mono); }
+.ui-s--retro .ui-rgroup__dot::before, .ui-s--terminal .ui-rgroup__dot::before { content: "( )"; }
+.ui-s--retro .ui-rgroup__dot.is-on::before, .ui-s--terminal .ui-rgroup__dot.is-on::before { content: "(•)"; color: var(--acc); }
+.ui-s--retro .ui-rgroup__dot::after, .ui-s--terminal .ui-rgroup__dot::after { display: none; }
+
+/* ---------- Stepper ---------- */
+.ui-steps { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; width: 100%; overflow: auto; font-family: var(--s-ff); }
+.ui-steps__item { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 13px; white-space: nowrap; }
+.ui-steps__item:not(:last-child)::after { content: ""; width: 28px; height: 1px; background: var(--ln); margin-left: 8px; }
+.ui-steps__mark { flex: none; width: 24px; height: 24px; display: grid; place-content: center; border-radius: 50%; background: var(--s-bg); border: var(--s-bd); font-size: 11px; font-weight: 700; color: var(--mut); }
+.ui-steps__item.is-current { color: var(--fg); font-weight: 700; }
+.ui-steps__item.is-current .ui-steps__mark { color: var(--bg); background: var(--acc); border-color: var(--acc); }
+.ui-steps__item.is-done .ui-steps__mark { color: var(--acc); border-color: var(--acc); }
+.ui-steps__item.is-done:not(:last-child)::after { background: var(--acc); }
+
+/* ---------- OtpInput ---------- */
+.ui-otp { display: flex; gap: 8px; }
+.ui-otp__box { text-align: center; font: inherit; font-family: var(--mono); font-weight: 700; color: var(--fg); background: var(--s-bg); border: var(--s-bd); border-radius: var(--s-r); box-shadow: var(--s-sh); outline: none; appearance: none; -webkit-appearance: none; }
+.ui-otp__box:focus { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 28%, transparent); }
+.ui-otp--sm .ui-otp__box { width: 32px; height: 38px; font-size: 15px; }
+.ui-otp--md .ui-otp__box { width: 40px; height: 48px; font-size: 18px; }
+.ui-otp--lg .ui-otp__box { width: 50px; height: 58px; font-size: 22px; }
+
+/* ---------- Breadcrumbs ---------- */
+.ui-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-family: var(--s-ff); text-transform: var(--s-tt); letter-spacing: var(--s-ls); }
+.ui-crumbs__item { display: inline-flex; align-items: center; gap: 6px; }
+.ui-crumbs__link { font: inherit; color: var(--mut); background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
+.ui-crumbs__link:hover { color: var(--acc); text-decoration: underline; }
+.ui-crumbs [aria-current="page"] { color: var(--fg); font-weight: 700; }
+.ui-crumbs__sep { color: var(--ln); font-family: var(--mono); }
+
+/* ---------- Pagination ---------- */
+.ui-page { display: flex; align-items: center; gap: 4px; font-family: var(--s-ff); }
+.ui-page__nav, .ui-page__num { min-width: 34px; height: 34px; padding: 0 8px; display: grid; place-content: center; font: inherit; font-size: 13px; color: var(--fg); background: var(--s-bg); border: var(--s-bd); border-radius: var(--s-r); box-shadow: var(--s-sh); cursor: pointer; }
+.ui-page__nav:disabled { opacity: 0.35; cursor: not-allowed; }
+.ui-page__num.is-on { background: var(--acc); color: var(--bg); border-color: transparent; font-weight: 700; }
+.ui-page__gap { min-width: 24px; text-align: center; color: var(--mut); }
+.ui-s--minimal .ui-page__nav, .ui-s--minimal .ui-page__num { background: none; border: 0; box-shadow: none; }
+.ui-s--minimal .ui-page__num.is-on { background: none; color: var(--acc); box-shadow: inset 0 -2px 0 var(--acc); border-radius: 0; }
+.ui-s--terminal .ui-page__num.is-on { background: none; color: var(--acc); }
+.ui-s--terminal .ui-page__num.is-on::before { content: "["; }
+.ui-s--terminal .ui-page__num.is-on::after { content: "]"; }
+
+/* ---------- Dropdown ---------- */
+.ui-ddown { position: relative; display: inline-block; }
+.ui-ddown__trigger { min-width: 36px; height: 36px; padding: 0 12px; display: grid; place-content: center; font: inherit; font-size: 16px; color: var(--fg); cursor: pointer; }
+.ui-ddown__menu { position: absolute; z-index: 20; top: calc(100% + 6px); min-width: 180px; list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
+.ui-ddown__menu--right { right: 0; }
+.ui-ddown__menu--left { left: 0; }
+.ui-ddown__item { width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--fg); background: none; border: 0; padding: 8px 10px; border-radius: calc(var(--s-r, 12px) - 4px); cursor: pointer; }
+.ui-ddown__item:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); }
+
+/* ---------- BlogCard ---------- */
+/* BlogCard: cuatro maquetaciones sobre la misma anatomía (cabecera + cuerpo). Siempre alineada a la izquierda,
+ * aunque la sección que la contenga centre su texto. */
+.ui-blog { position: relative; width: 100%; overflow: hidden; display: flex; flex-direction: column; text-align: start; color: var(--fg); text-decoration: none; }
+.ui-blog__media { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: var(--s-bd); background: var(--pat, none), color-mix(in srgb, var(--acc) 10%, var(--bg)); }
+.ui-blog__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
+.ui-blog__media--glyph { aspect-ratio: auto; height: 64px; padding: 8px 12px; font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.1em; color: color-mix(in srgb, var(--acc) 55%, transparent); word-break: break-all; }
+.ui-blog__media--pattern::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--acc2) 22%, transparent), transparent 60%); }
+.ui-blog__body { flex: 1; padding: 16px; display: grid; gap: 8px; align-content: start; }
+.ui-blog__cat { justify-self: start; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }
+.ui-blog__body h4 { margin: 0; font-size: 17px; line-height: 1.3; text-transform: var(--s-tt); letter-spacing: var(--s-ls); text-shadow: var(--s-ts); }
+.ui-blog__body p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--mut); text-transform: none; letter-spacing: normal; }
+.ui-blog__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--mut); text-transform: none; }
+.ui-blog__meta > span + span:not(.ui-blog__more)::before { content: "·"; margin-right: 10px; }
+.ui-blog__author { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
+.ui-blog__avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--acc) 24%, var(--bg)); color: var(--acc); }
+.ui-blog__more { margin-left: auto; color: var(--acc); font-weight: 600; }
+/* enlace: toda la tarjeta; sube un poco y la imagen se acerca */
+.ui-blog--link { cursor: pointer; transition: translate 0.25s ease, box-shadow 0.25s ease; }
+.ui-blog--link:hover { translate: 0 -3px; box-shadow: var(--s-sh), 0 16px 34px -20px var(--acc); }
+.ui-blog--link:hover .ui-blog__media img { scale: 1.05; }
+.ui-blog--link:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
+/* horizontal: cabecera a la izquierda; al no caber (tarjeta estrecha) se apila sola, sin media queries */
+.ui-blog--horizontal { flex-direction: row; flex-wrap: wrap; }
+.ui-blog--horizontal .ui-blog__media { flex: 1 1 170px; aspect-ratio: auto; min-height: 140px; border-bottom: 0; border-right: var(--s-bd); }
+.ui-blog--horizontal .ui-blog__body { flex: 999 1 240px; }
+/* overlay: la imagen (o el degradado) es el fondo de toda la tarjeta y el texto se apoya abajo */
+.ui-blog--overlay { min-height: 320px; justify-content: flex-end; --veil-top: 8%; --veil-mid: 40%; --veil-bottom: 94%; }
+.ui-blog--overlay .ui-blog__body { flex: none; padding: 22px; }
+.ui-blog--overlay .ui-blog__body h4 { font-size: clamp(19px, 2.4vw, 26px); }
+.ui-blog--overlay .ui-blog__body p { color: color-mix(in srgb, var(--fg) 82%, transparent); }
+.ui-blog--overlay .ui-blog__cat { padding: 3px 8px; border-radius: 999px; background: var(--acc); color: var(--bg); }
+/* minimal: sin cabecera; el acento marca el borde izquierdo */
+.ui-blog--minimal { box-shadow: inset 3px 0 0 var(--acc), var(--s-sh); }
+.ui-blog--minimal .ui-blog__body { padding: 18px 18px 18px 22px; }
+.ui-blog--minimal .ui-blog__body h4 { font-size: 19px; }
+/* ArticlesSection: composiciones */
+.ui-articles__grid.ui-articles__grid--grid { align-items: stretch; }
+.ui-articles__grid.ui-articles__grid--list { max-width: 760px; grid-template-columns: 1fr; }
+.ui-articles__grid.ui-articles__grid--featured { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: stretch; }
+.ui-articles__grid--featured > :first-child { grid-row: span var(--feat-rows, 2); min-height: 380px; }
+.ui-articles__grid--featured > :not(:first-child) .ui-blog__media { flex-basis: 130px; min-height: 110px; }
+
+/* ---------- CodeBlock ---------- */
+.ui-code { width: 100%; max-width: 640px; overflow: hidden; font-family: var(--mono); }
+.ui-code__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ln); }
+.ui-code__dots { display: flex; gap: 6px; }
+.ui-code__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ln); }
+.ui-code__name { flex: 1; font-size: 12px; color: var(--mut); }
+.ui-code__copy { font: inherit; font-size: 12px; color: var(--mut); background: none; border: 1px solid var(--ln); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
+.ui-code__copy:hover { color: var(--fg); border-color: var(--acc); }
+.ui-code__pre { margin: 0; padding: 12px 0; overflow: auto; font-size: 13px; line-height: 1.7; }
+.ui-code__line { display: block; padding: 0 16px; white-space: pre; }
+.ui-code__ln { display: inline-block; width: 26px; margin-right: 12px; text-align: right; color: var(--mut); opacity: 0.5; user-select: none; }
+
+/* ---------- Skeleton ---------- */
+.ui-skel { position: relative; overflow: hidden; background: color-mix(in srgb, var(--tone, var(--mut)) 18%, transparent); border-radius: 6px; }
+.ui-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tone, var(--mut)) 35%, transparent), transparent); transform: translateX(-100%); animation: ui-shimmer 1.6s ease-in-out infinite; }
+.ui-skel--line { height: 12px; }
+.ui-skel--block { height: 120px; border-radius: 10px; }
+.ui-skel--avatar { width: 48px; height: 48px; border-radius: 50%; }
+.ui-skel--row { height: 34px; border-radius: 8px; }
+.ui-skel-lines, .ui-skel-table { display: grid; gap: 10px; width: 100%; max-width: 320px; }
+.ui-skel-card { display: grid; gap: 10px; width: 100%; max-width: 260px; }
+@keyframes ui-shimmer { to { transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) { .ui-skel::after { animation: none; } }
+
+/* ---------- FeatureGrid / TeamSection / LogoCloud / ArticlesSection ---------- */
+.ui-feats, .ui-team, .ui-articles { width: 100%; min-width: 0; display: grid; gap: 28px; justify-items: center; text-align: center; }
+.ui-feats__grid, .ui-team__grid, .ui-articles__grid { width: 100%; min-width: 0; max-width: 980px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+.ui-feats__item { padding: 24px; display: grid; gap: 8px; justify-items: center; text-align: center; }
+.ui-feats__glyph { width: 40px; height: 40px; display: grid; place-content: center; border-radius: 50%; background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); font-family: var(--mono); font-weight: 700; }
+.ui-feats__item strong { font-size: 16px; }
+.ui-feats__item p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--mut); text-transform: none; letter-spacing: normal; }
+.ui-team__card { padding: 24px; display: grid; gap: 8px; justify-items: center; text-align: center; }
+.ui-team__avatar { width: 56px; height: 56px; display: grid; place-content: center; border-radius: min(var(--s-r, 12px), 50%); background: color-mix(in srgb, var(--acc) 22%, transparent); border: 1px solid var(--acc); color: var(--acc); font-weight: 800; font-family: var(--mono); font-size: 16px; }
+.ui-team__card span:last-child { font-size: 13px; color: var(--mut); }
+.ui-logos { width: 100%; display: grid; gap: 16px; justify-items: center; text-align: center; }
+.ui-logos__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); text-shadow: var(--legibility-ts); }
+.ui-logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 48px); font-family: var(--s-ff); }
+.ui-logos__brand { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--mut); text-transform: var(--s-tt); opacity: 0.75; text-shadow: var(--legibility-ts); transition: opacity 0.15s, color 0.15s; }
+.ui-logos__brand:hover { opacity: 1; color: var(--fg); }
+
+/* ---------- ScrollArea ---------- */
+.ui-scroll { width: 100%; max-width: 420px; overflow-y: auto; padding: 16px 18px; display: grid; gap: 10px; align-content: start; font-size: 14px; line-height: 1.6; color: var(--mut); text-transform: none; letter-spacing: normal; }
+.ui-scroll p { margin: 0; }
+.ui-scroll__head { color: var(--fg); font-weight: var(--s-fw, 700); text-transform: var(--s-tt); letter-spacing: var(--s-ls); text-shadow: var(--s-ts); }
+
+/* ---------- Color semántico común (components/ui/intent.ts) ----------
+ * Un solo vocabulario para Button, Badge, Alert, TextField, Toast y Modal. Fija --tone (insignias, avisos, campos) y
+ * --acc (botones y lo que haya dentro). Va al final del archivo para ganar por orden a los valores base de cada
+ * componente (p. ej. `.ui-badge { --tone: var(--fg) }`). */
+.ui-intent--accent { --tone: var(--acc); }
+.ui-intent--neutral { --tone: var(--fg); --acc: var(--fg); }
+.ui-intent--success { --tone: var(--ok); --acc: var(--ok); }
+.ui-intent--info { --tone: var(--info); --acc: var(--info); }
+.ui-intent--warning { --tone: var(--warn); --acc: var(--warn); }
+.ui-intent--danger { --tone: var(--bad); --acc: var(--bad); }
+/* Toast: sonner marca el tipo en data-type; se traduce al mismo color (antes todos pintaban el icono con --acc) */
+.ui-toast[data-type="success"] { --acc: var(--ok); } .ui-toast[data-type="info"] { --acc: var(--info); }
+.ui-toast[data-type="warning"] { --acc: var(--warn); } .ui-toast[data-type="error"] { --acc: var(--bad); }
+.ui-toast[data-type="success"], .ui-toast[data-type="info"], .ui-toast[data-type="warning"], .ui-toast[data-type="error"] { border-left: 3px solid var(--acc); }
+