/* tokens.css de @company/tokens (copia de novoexpert-web/fuente/ds, my-design-system 1b0702d).
   Oscuro: sigue al sistema (prefers-color-scheme); data-theme="dark"|"light" lo fuerza. */
/* @company/tokens — temas claro y oscuro (excepción de novoexpert.net). Copiado de my-design-system 1b0702d 2026-11-10. No editar: correr herramientas/traer-del-ds.py */
/* AUTO-GENERATED by @company/tokens (Style Dictionary). Do not edit. Source: the DTCG token files in packages/tokens/src. */

:root {
  --ds-component-control-height-sm: 32px;
  --ds-component-control-height-md: 40px;
  --ds-component-control-height-lg: 48px;
  --ds-component-control-padding-x-sm: 12px;
  --ds-component-control-padding-x-md: 16px;
  --ds-component-control-padding-x-lg: 24px;
  --ds-component-control-gap-sm: 8px;
  --ds-component-control-gap-md: 8px;
  --ds-component-control-gap-lg: 12px;
  --ds-component-control-radius: 8px;
  --ds-component-control-border-width: 0px;
  --ds-component-control-icon-size-sm: 16px;
  --ds-component-control-icon-size-md: 20px;
  --ds-component-control-icon-size-lg: 24px;
  --ds-component-focus-ring-width: 2px;
  --ds-component-focus-ring-offset: 2px;
  --ds-z-index-base: 0;
  --ds-z-index-raised: 1;
  --ds-z-index-sticky: 100;
  --ds-z-index-overlay: 1000;
  --ds-z-index-modal: 1100;
  --ds-z-index-toast: 1200;
  --ds-border-width-none: 0px;
  --ds-border-width-thin: 1px;
  --ds-border-width-medium: 2px;
  --ds-border-width-thick: 4px;
  --ds-border-focus-offset: 2px;
  --ds-layout-gap-xs: 4px;
  --ds-layout-gap-sm: 8px;
  --ds-layout-gap-md: 16px;
  --ds-layout-gap-lg: 24px;
  --ds-layout-gap-xl: 32px;
  --ds-layout-inset-sm: 8px;
  --ds-layout-inset-md: 16px;
  --ds-layout-inset-lg: 24px;
  --ds-layout-inset-xl: 32px;
  --ds-layout-gutter-compact: 16px;
  --ds-layout-gutter-medium: 24px;
  --ds-layout-gutter-expanded: 32px;
  --ds-layout-gutter-large: 40px;
  --ds-layout-container-max-width: 1200px;
  --ds-layout-dialog-max-width: 384px;
  --ds-layout-popover-max-width: 320px;
  --ds-layout-tooltip-max-width: 256px;
  --ds-layout-sheet-side-width: 384px;
  --ds-layout-top-bar-height: 64px;
  --ds-layout-bottom-bar-height: 64px;
  --ds-layout-navigation-rail-width: 80px;
  --ds-layout-sidebar-width: 256px;
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-feedback: 100ms;
  --ds-motion-duration-transition: 200ms;
  --ds-motion-duration-enter: 300ms;
  --ds-motion-duration-exit: 200ms;
  --ds-motion-duration-indeterminate: 1000ms;
  --ds-motion-duration-ambient-pulse: 2000ms;
  --ds-motion-duration-ambient-scan: 4000ms;
  --ds-motion-duration-ambient-sweep: 5000ms;
  --ds-motion-delay-tooltip-show: 500ms;
  --ds-motion-delay-tooltip-hide: 100ms;
  --ds-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
  --ds-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --ds-opacity-pressed: 0.8;
  --ds-opacity-disabled: 0.38;
  --ds-opacity-scrim: 0.5;
  --ds-radius-none: 0px;
  --ds-radius-xs: 2px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 9999px;
  --ds-radius-control: 8px;
  --ds-radius-surface: 12px;
  --ds-radius-pill: 9999px;
  --ds-size-icon-xs: 12px;
  --ds-size-icon-sm: 16px;
  --ds-size-icon-md: 20px;
  --ds-size-icon-lg: 24px;
  --ds-size-icon-xl: 32px;
  --ds-size-control-sm: 32px;
  --ds-size-control-md: 40px;
  --ds-size-control-lg: 48px;
  --ds-size-sheet-handle-width: 32px;
  --ds-size-sheet-handle-height: 4px;
  --ds-size-slider-track-sm: 2px;
  --ds-size-slider-track-md: 4px;
  --ds-size-slider-thumb-sm: 16px;
  --ds-size-slider-thumb-md: 20px;
  --ds-size-touch-target-coarse: 48px;
  --ds-size-touch-target-fine: 24px;
  --ds-size-radar-sm: 160px;
  --ds-size-radar-md: 256px;
  --ds-size-radar-lg: 384px;
  --ds-size-live-dot: 8px;
  --ds-size-hud-corner: 16px;
  --ds-size-grid-cell: 40px;
  --ds-size-accent-line: 2px;
  --ds-size-sparkline-sm: 24px;
  --ds-size-sparkline-md: 40px;
  --ds-size-status-bars: 32px;
  --ds-size-glass-blur: 12px;
  --ds-space-0: 0px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;
  --ds-space-24: 96px;
  --ds-space-32: 128px;
  --ds-space-40: 160px;
  --ds-space-48: 192px;
  --ds-space-64: 256px;
  --ds-space-80: 320px;
  --ds-space-96: 384px;
  --ds-typography-display-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-display-font-size: 3rem;
  --ds-typography-display-line-height: 3.5rem;
  --ds-typography-display-font-weight: 700;
  --ds-typography-display-letter-spacing: -1px;
  --ds-typography-brand-heading-font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-heading-1-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-heading-1-font-size: 2.25rem;
  --ds-typography-heading-1-line-height: 2.75rem;
  --ds-typography-heading-1-font-weight: 700;
  --ds-typography-heading-1-letter-spacing: -0.5px;
  --ds-typography-heading-2-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-heading-2-font-size: 1.875rem;
  --ds-typography-heading-2-line-height: 2.5rem;
  --ds-typography-heading-2-font-weight: 600;
  --ds-typography-heading-2-letter-spacing: -0.25px;
  --ds-typography-heading-3-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-heading-3-font-size: 1.5rem;
  --ds-typography-heading-3-line-height: 2rem;
  --ds-typography-heading-3-font-weight: 600;
  --ds-typography-heading-3-letter-spacing: 0px;
  --ds-typography-heading-4-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-heading-4-font-size: 1.25rem;
  --ds-typography-heading-4-line-height: 1.75rem;
  --ds-typography-heading-4-font-weight: 600;
  --ds-typography-heading-4-letter-spacing: 0px;
  --ds-typography-body-large-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-body-large-font-size: 1.125rem;
  --ds-typography-body-large-line-height: 1.75rem;
  --ds-typography-body-large-font-weight: 400;
  --ds-typography-body-large-letter-spacing: 0px;
  --ds-typography-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-body-font-size: 1rem;
  --ds-typography-body-line-height: 1.5rem;
  --ds-typography-body-font-weight: 400;
  --ds-typography-body-letter-spacing: 0px;
  --ds-typography-body-small-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-body-small-font-size: 0.875rem;
  --ds-typography-body-small-line-height: 1.25rem;
  --ds-typography-body-small-font-weight: 400;
  --ds-typography-body-small-letter-spacing: 0px;
  --ds-typography-label-large-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-label-large-font-size: 1rem;
  --ds-typography-label-large-line-height: 1.5rem;
  --ds-typography-label-large-font-weight: 500;
  --ds-typography-label-large-letter-spacing: 0px;
  --ds-typography-label-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-label-font-size: 0.875rem;
  --ds-typography-label-line-height: 1.25rem;
  --ds-typography-label-font-weight: 500;
  --ds-typography-label-letter-spacing: 0.1px;
  --ds-typography-caption-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-typography-caption-font-size: 0.75rem;
  --ds-typography-caption-line-height: 1.125rem;
  --ds-typography-caption-font-weight: 400;
  --ds-typography-caption-letter-spacing: 0.2px;
  --ds-typography-code-font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-typography-code-font-size: 0.875rem;
  --ds-typography-code-line-height: 1.25rem;
  --ds-typography-code-font-weight: 400;
  --ds-typography-code-letter-spacing: 0px;
  --ds-typography-overline-font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-typography-overline-font-size: 0.75rem;
  --ds-typography-overline-line-height: 1rem;
  --ds-typography-overline-font-weight: 500;
  --ds-typography-overline-letter-spacing: 1.5px;
  --ds-typography-metric-font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ds-typography-metric-font-size: 1.875rem;
  --ds-typography-metric-line-height: 2.5rem;
  --ds-typography-metric-font-weight: 600;
  --ds-typography-metric-letter-spacing: -0.5px;
  --ds-text-scale-control-max: 2;
}

:root {
  --ds-size-class: "compact";
  --ds-layout-gutter: var(--ds-layout-gutter-compact);
  --ds-height-class: "compact";
}

@media (min-width: 600px) {
  :root {
    --ds-size-class: "medium";
    --ds-layout-gutter: var(--ds-layout-gutter-medium);
  }
}

@media (min-width: 840px) {
  :root {
    --ds-size-class: "expanded";
    --ds-layout-gutter: var(--ds-layout-gutter-expanded);
  }
}

@media (min-width: 1200px) {
  :root {
    --ds-size-class: "large";
    --ds-layout-gutter: var(--ds-layout-gutter-large);
  }
}

@media (min-height: 480px) {
  :root {
    --ds-height-class: "medium";
  }
}

@media (min-height: 900px) {
  :root {
    --ds-height-class: "expanded";
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-motion-duration-instant: 0ms;
    --ds-motion-duration-feedback: 0ms;
    --ds-motion-duration-transition: 0ms;
    --ds-motion-duration-enter: 0ms;
    --ds-motion-duration-exit: 0ms;
    --ds-motion-duration-indeterminate: 0ms;
    --ds-motion-duration-ambient-pulse: 0ms;
    --ds-motion-duration-ambient-scan: 0ms;
    --ds-motion-duration-ambient-sweep: 0ms;
  }
}

:root {
  color-scheme: light;
  --ds-color-background-primary: #ffffff;
  --ds-color-background-secondary: #f4f7fb;
  --ds-color-background-tertiary: #eaedf2;
  --ds-color-surface-default: #ffffff;
  --ds-color-surface-raised: #ffffff;
  --ds-color-surface-sunken: #eaedf2;
  --ds-color-surface-inverse: #3f444c;
  --ds-color-text-primary: #2b2f36;
  --ds-color-text-secondary: #545a64;
  --ds-color-text-tertiary: #6a707b;
  --ds-color-text-disabled: #a1a6af;
  --ds-color-text-inverse: #ffffff;
  --ds-color-text-link: #4742c0;
  --ds-color-icon-primary: #3f444c;
  --ds-color-icon-secondary: #6a707b;
  --ds-color-icon-disabled: #a1a6af;
  --ds-color-icon-inverse: #ffffff;
  --ds-color-border-subtle: #d9dce3;
  --ds-color-border-default: #c0c4cc;
  --ds-color-border-strong: #858b95;
  --ds-color-focus-ring: #5b59e0;
  --ds-color-disabled-background: #eaedf2;
  --ds-color-disabled-foreground: #a1a6af;
  --ds-color-disabled-border: #d9dce3;
  --ds-color-tone-neutral-solid-background: #3f444c;
  --ds-color-tone-neutral-solid-background-hover: #2b2f36;
  --ds-color-tone-neutral-solid-background-pressed: #191c21;
  --ds-color-tone-neutral-solid-foreground: #ffffff;
  --ds-color-tone-neutral-subtle-background: #f4f7fb;
  --ds-color-tone-neutral-subtle-background-hover: #eaedf2;
  --ds-color-tone-neutral-subtle-background-pressed: #d9dce3;
  --ds-color-tone-neutral-subtle-foreground: #2b2f36;
  --ds-color-tone-neutral-outline-border: #858b95;
  --ds-color-tone-neutral-outline-foreground: #3f444c;
  --ds-color-tone-brand-solid-background: #5b59e0;
  --ds-color-tone-brand-solid-background-hover: #4742c0;
  --ds-color-tone-brand-solid-background-pressed: #353096;
  --ds-color-tone-brand-solid-foreground: #ffffff;
  --ds-color-tone-brand-subtle-background: #f5f6fe;
  --ds-color-tone-brand-subtle-background-hover: #e8ecff;
  --ds-color-tone-brand-subtle-background-pressed: #d4daff;
  --ds-color-tone-brand-subtle-foreground: #353096;
  --ds-color-tone-brand-outline-border: #5b59e0;
  --ds-color-tone-brand-outline-foreground: #4742c0;
  --ds-color-tone-success-solid-background: #058644;
  --ds-color-tone-success-solid-background-hover: #016c35;
  --ds-color-tone-success-solid-background-pressed: #005226;
  --ds-color-tone-success-solid-foreground: #ffffff;
  --ds-color-tone-success-subtle-background: #ebfcef;
  --ds-color-tone-success-subtle-background-hover: #d8f6de;
  --ds-color-tone-success-subtle-background-pressed: #b5ecc3;
  --ds-color-tone-success-subtle-foreground: #005226;
  --ds-color-tone-success-outline-border: #058644;
  --ds-color-tone-success-outline-foreground: #016c35;
  --ds-color-tone-warning-solid-background: #f6b84d;
  --ds-color-tone-warning-solid-background-hover: #d99807;
  --ds-color-tone-warning-solid-background-pressed: #b67f02;
  --ds-color-tone-warning-solid-foreground: #281800;
  --ds-color-tone-warning-subtle-background: #fef5e8;
  --ds-color-tone-warning-subtle-background-hover: #ffeaca;
  --ds-color-tone-warning-subtle-background-pressed: #ffd595;
  --ds-color-tone-warning-subtle-foreground: #5b3d00;
  --ds-color-tone-warning-outline-border: #946600;
  --ds-color-tone-warning-outline-foreground: #5b3d00;
  --ds-color-tone-danger-solid-background: #d20322;
  --ds-color-tone-danger-solid-background-hover: #aa0119;
  --ds-color-tone-danger-solid-background-pressed: #830011;
  --ds-color-tone-danger-solid-foreground: #ffffff;
  --ds-color-tone-danger-subtle-background: #fff4f3;
  --ds-color-tone-danger-subtle-background-hover: #fee7e4;
  --ds-color-tone-danger-subtle-background-pressed: #ffcfcb;
  --ds-color-tone-danger-subtle-foreground: #830011;
  --ds-color-tone-danger-outline-border: #d20322;
  --ds-color-tone-danger-outline-foreground: #aa0119;
  --ds-color-tone-info-solid-background: #0378ad;
  --ds-color-tone-info-solid-background-hover: #03608b;
  --ds-color-tone-info-solid-background-pressed: #00496c;
  --ds-color-tone-info-solid-foreground: #ffffff;
  --ds-color-tone-info-subtle-background: #f0f8fe;
  --ds-color-tone-info-subtle-background-hover: #dbf0ff;
  --ds-color-tone-info-subtle-background-pressed: #bae3fe;
  --ds-color-tone-info-subtle-foreground: #00496c;
  --ds-color-tone-info-outline-border: #0378ad;
  --ds-color-tone-info-outline-foreground: #03608b;
  --ds-color-accent-start: #6a58e8;
  --ds-color-accent-end: #0a7499;
  --ds-color-accent-foreground: #ffffff;
  --ds-color-accent-grid: #191c210f;
  --ds-color-accent-ring: #b6bffe;
  --ds-color-accent-sweep: #0a749959;
  --ds-color-accent-wash: #eceafd;
  --ds-color-accent-glass: #ffffffd9;
  --ds-color-accent-backdrop: #f4f7fb;
  --ds-color-accent-panel: #ffffff;
  --ds-color-accent-field-border: #858b95;
  --ds-elevation-flat-color: #191c21;
  --ds-elevation-flat-offset-y: 0px;
  --ds-elevation-flat-blur: 0px;
  --ds-elevation-flat-opacity: 0;
  --ds-elevation-flat-shadow: #191c2100;
  --ds-elevation-raised-color: #191c21;
  --ds-elevation-raised-offset-y: 1px;
  --ds-elevation-raised-blur: 4px;
  --ds-elevation-raised-opacity: 0.12;
  --ds-elevation-raised-shadow: #191c211f;
  --ds-elevation-sticky-color: #191c21;
  --ds-elevation-sticky-offset-y: 2px;
  --ds-elevation-sticky-blur: 8px;
  --ds-elevation-sticky-opacity: 0.14;
  --ds-elevation-sticky-shadow: #191c2124;
  --ds-elevation-floating-color: #191c21;
  --ds-elevation-floating-offset-y: 4px;
  --ds-elevation-floating-blur: 12px;
  --ds-elevation-floating-opacity: 0.16;
  --ds-elevation-floating-shadow: #191c2129;
  --ds-elevation-overlay-color: #191c21;
  --ds-elevation-overlay-offset-y: 8px;
  --ds-elevation-overlay-blur: 24px;
  --ds-elevation-overlay-opacity: 0.2;
  --ds-elevation-overlay-shadow: #191c2133;
  --ds-elevation-flat: none;
  --ds-elevation-raised: 0 1px 4px 0 rgba(25, 28, 33, 0.12);
  --ds-elevation-sticky: 0 2px 8px 0 rgba(25, 28, 33, 0.14);
  --ds-elevation-floating: 0 4px 12px 0 rgba(25, 28, 33, 0.16);
  --ds-elevation-overlay: 0 8px 24px 0 rgba(25, 28, 33, 0.2);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-color-background-primary: #191c21;
  --ds-color-background-secondary: #2b2f36;
  --ds-color-background-tertiary: #3f444c;
  --ds-color-surface-default: #2b2f36;
  --ds-color-surface-raised: #3f444c;
  --ds-color-surface-sunken: #191c21;
  --ds-color-surface-inverse: #d9dce3;
  --ds-color-text-primary: #f4f7fb;
  --ds-color-text-secondary: #d9dce3;
  --ds-color-text-tertiary: #c0c4cc;
  --ds-color-text-disabled: #6a707b;
  --ds-color-text-inverse: #191c21;
  --ds-color-text-link: #b6bffe;
  --ds-color-icon-primary: #eaedf2;
  --ds-color-icon-secondary: #a1a6af;
  --ds-color-icon-disabled: #6a707b;
  --ds-color-icon-inverse: #191c21;
  --ds-color-border-subtle: #3f444c;
  --ds-color-border-default: #545a64;
  --ds-color-border-strong: #a1a6af;
  --ds-color-focus-ring: #b6bffe;
  --ds-color-disabled-background: #3f444c;
  --ds-color-disabled-foreground: #6a707b;
  --ds-color-disabled-border: #545a64;
  --ds-color-tone-neutral-solid-background: #d9dce3;
  --ds-color-tone-neutral-solid-background-hover: #eaedf2;
  --ds-color-tone-neutral-solid-background-pressed: #f4f7fb;
  --ds-color-tone-neutral-solid-foreground: #191c21;
  --ds-color-tone-neutral-subtle-background: #3f444c;
  --ds-color-tone-neutral-subtle-background-hover: #545a64;
  --ds-color-tone-neutral-subtle-background-pressed: #6a707b;
  --ds-color-tone-neutral-subtle-foreground: #f4f7fb;
  --ds-color-tone-neutral-outline-border: #858b95;
  --ds-color-tone-neutral-outline-foreground: #d9dce3;
  --ds-color-tone-brand-solid-background: #929bff;
  --ds-color-tone-brand-solid-background-hover: #b6bffe;
  --ds-color-tone-brand-solid-background-pressed: #d4daff;
  --ds-color-tone-brand-solid-foreground: #141048;
  --ds-color-tone-brand-subtle-background: #141048;
  --ds-color-tone-brand-subtle-background-hover: #24206e;
  --ds-color-tone-brand-subtle-background-pressed: #353096;
  --ds-color-tone-brand-subtle-foreground: #d4daff;
  --ds-color-tone-brand-outline-border: #929bff;
  --ds-color-tone-brand-outline-foreground: #b6bffe;
  --ds-color-tone-success-solid-background: #4fc076;
  --ds-color-tone-success-solid-background-hover: #86db9d;
  --ds-color-tone-success-solid-background-pressed: #b5ecc3;
  --ds-color-tone-success-solid-foreground: #00230d;
  --ds-color-tone-success-subtle-background: #00230d;
  --ds-color-tone-success-subtle-background-hover: #003a19;
  --ds-color-tone-success-subtle-background-pressed: #005226;
  --ds-color-tone-success-subtle-foreground: #b5ecc3;
  --ds-color-tone-success-outline-border: #4fc076;
  --ds-color-tone-success-outline-foreground: #86db9d;
  --ds-color-tone-warning-solid-background: #f6b84d;
  --ds-color-tone-warning-solid-background-hover: #ffd595;
  --ds-color-tone-warning-solid-background-pressed: #ffeaca;
  --ds-color-tone-warning-solid-foreground: #281800;
  --ds-color-tone-warning-subtle-background: #281800;
  --ds-color-tone-warning-subtle-background-hover: #402a00;
  --ds-color-tone-warning-subtle-background-pressed: #5b3d00;
  --ds-color-tone-warning-subtle-foreground: #ffd595;
  --ds-color-tone-warning-outline-border: #d99807;
  --ds-color-tone-warning-outline-foreground: #f6b84d;
  --ds-color-tone-danger-solid-background: #ff756e;
  --ds-color-tone-danger-solid-background-hover: #ffaba3;
  --ds-color-tone-danger-solid-background-pressed: #ffcfcb;
  --ds-color-tone-danger-solid-foreground: #3d0003;
  --ds-color-tone-danger-subtle-background: #3d0003;
  --ds-color-tone-danger-subtle-background-hover: #5f0009;
  --ds-color-tone-danger-subtle-background-pressed: #830011;
  --ds-color-tone-danger-subtle-foreground: #ffcfcb;
  --ds-color-tone-danger-outline-border: #ff756e;
  --ds-color-tone-danger-outline-foreground: #ffaba3;
  --ds-color-tone-info-solid-background: #3bb1f3;
  --ds-color-tone-info-solid-background-hover: #82ceff;
  --ds-color-tone-info-solid-background-pressed: #bae3fe;
  --ds-color-tone-info-solid-foreground: #001f31;
  --ds-color-tone-info-subtle-background: #001f31;
  --ds-color-tone-info-subtle-background-hover: #00334d;
  --ds-color-tone-info-subtle-background-pressed: #00496c;
  --ds-color-tone-info-subtle-foreground: #bae3fe;
  --ds-color-tone-info-outline-border: #3bb1f3;
  --ds-color-tone-info-outline-foreground: #82ceff;
  --ds-color-accent-start: #b4a9ff;
  --ds-color-accent-end: #22c3ee;
  --ds-color-accent-foreground: #191c21;
  --ds-color-accent-grid: #ffffff0f;
  --ds-color-accent-ring: #0c4a5c;
  --ds-color-accent-sweep: #22c3ee59;
  --ds-color-accent-wash: #211d45;
  --ds-color-accent-glass: #0d1324d9;
  --ds-color-accent-backdrop: #070b18;
  --ds-color-accent-panel: #0d1324;
  --ds-color-accent-field-border: #6a707b;
  --ds-elevation-flat-color: #000000;
  --ds-elevation-flat-offset-y: 0px;
  --ds-elevation-flat-blur: 0px;
  --ds-elevation-flat-opacity: 0;
  --ds-elevation-flat-shadow: #00000000;
  --ds-elevation-raised-color: #000000;
  --ds-elevation-raised-offset-y: 1px;
  --ds-elevation-raised-blur: 4px;
  --ds-elevation-raised-opacity: 0.35;
  --ds-elevation-raised-shadow: #00000059;
  --ds-elevation-sticky-color: #000000;
  --ds-elevation-sticky-offset-y: 2px;
  --ds-elevation-sticky-blur: 8px;
  --ds-elevation-sticky-opacity: 0.4;
  --ds-elevation-sticky-shadow: #00000066;
  --ds-elevation-floating-color: #000000;
  --ds-elevation-floating-offset-y: 4px;
  --ds-elevation-floating-blur: 12px;
  --ds-elevation-floating-opacity: 0.45;
  --ds-elevation-floating-shadow: #00000073;
  --ds-elevation-overlay-color: #000000;
  --ds-elevation-overlay-offset-y: 8px;
  --ds-elevation-overlay-blur: 24px;
  --ds-elevation-overlay-opacity: 0.5;
  --ds-elevation-overlay-shadow: #00000080;
  --ds-elevation-flat: none;
  --ds-elevation-raised: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
  --ds-elevation-sticky: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
  --ds-elevation-floating: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
  --ds-elevation-overlay: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --ds-color-background-primary: #191c21;
  --ds-color-background-secondary: #2b2f36;
  --ds-color-background-tertiary: #3f444c;
  --ds-color-surface-default: #2b2f36;
  --ds-color-surface-raised: #3f444c;
  --ds-color-surface-sunken: #191c21;
  --ds-color-surface-inverse: #d9dce3;
  --ds-color-text-primary: #f4f7fb;
  --ds-color-text-secondary: #d9dce3;
  --ds-color-text-tertiary: #c0c4cc;
  --ds-color-text-disabled: #6a707b;
  --ds-color-text-inverse: #191c21;
  --ds-color-text-link: #b6bffe;
  --ds-color-icon-primary: #eaedf2;
  --ds-color-icon-secondary: #a1a6af;
  --ds-color-icon-disabled: #6a707b;
  --ds-color-icon-inverse: #191c21;
  --ds-color-border-subtle: #3f444c;
  --ds-color-border-default: #545a64;
  --ds-color-border-strong: #a1a6af;
  --ds-color-focus-ring: #b6bffe;
  --ds-color-disabled-background: #3f444c;
  --ds-color-disabled-foreground: #6a707b;
  --ds-color-disabled-border: #545a64;
  --ds-color-tone-neutral-solid-background: #d9dce3;
  --ds-color-tone-neutral-solid-background-hover: #eaedf2;
  --ds-color-tone-neutral-solid-background-pressed: #f4f7fb;
  --ds-color-tone-neutral-solid-foreground: #191c21;
  --ds-color-tone-neutral-subtle-background: #3f444c;
  --ds-color-tone-neutral-subtle-background-hover: #545a64;
  --ds-color-tone-neutral-subtle-background-pressed: #6a707b;
  --ds-color-tone-neutral-subtle-foreground: #f4f7fb;
  --ds-color-tone-neutral-outline-border: #858b95;
  --ds-color-tone-neutral-outline-foreground: #d9dce3;
  --ds-color-tone-brand-solid-background: #929bff;
  --ds-color-tone-brand-solid-background-hover: #b6bffe;
  --ds-color-tone-brand-solid-background-pressed: #d4daff;
  --ds-color-tone-brand-solid-foreground: #141048;
  --ds-color-tone-brand-subtle-background: #141048;
  --ds-color-tone-brand-subtle-background-hover: #24206e;
  --ds-color-tone-brand-subtle-background-pressed: #353096;
  --ds-color-tone-brand-subtle-foreground: #d4daff;
  --ds-color-tone-brand-outline-border: #929bff;
  --ds-color-tone-brand-outline-foreground: #b6bffe;
  --ds-color-tone-success-solid-background: #4fc076;
  --ds-color-tone-success-solid-background-hover: #86db9d;
  --ds-color-tone-success-solid-background-pressed: #b5ecc3;
  --ds-color-tone-success-solid-foreground: #00230d;
  --ds-color-tone-success-subtle-background: #00230d;
  --ds-color-tone-success-subtle-background-hover: #003a19;
  --ds-color-tone-success-subtle-background-pressed: #005226;
  --ds-color-tone-success-subtle-foreground: #b5ecc3;
  --ds-color-tone-success-outline-border: #4fc076;
  --ds-color-tone-success-outline-foreground: #86db9d;
  --ds-color-tone-warning-solid-background: #f6b84d;
  --ds-color-tone-warning-solid-background-hover: #ffd595;
  --ds-color-tone-warning-solid-background-pressed: #ffeaca;
  --ds-color-tone-warning-solid-foreground: #281800;
  --ds-color-tone-warning-subtle-background: #281800;
  --ds-color-tone-warning-subtle-background-hover: #402a00;
  --ds-color-tone-warning-subtle-background-pressed: #5b3d00;
  --ds-color-tone-warning-subtle-foreground: #ffd595;
  --ds-color-tone-warning-outline-border: #d99807;
  --ds-color-tone-warning-outline-foreground: #f6b84d;
  --ds-color-tone-danger-solid-background: #ff756e;
  --ds-color-tone-danger-solid-background-hover: #ffaba3;
  --ds-color-tone-danger-solid-background-pressed: #ffcfcb;
  --ds-color-tone-danger-solid-foreground: #3d0003;
  --ds-color-tone-danger-subtle-background: #3d0003;
  --ds-color-tone-danger-subtle-background-hover: #5f0009;
  --ds-color-tone-danger-subtle-background-pressed: #830011;
  --ds-color-tone-danger-subtle-foreground: #ffcfcb;
  --ds-color-tone-danger-outline-border: #ff756e;
  --ds-color-tone-danger-outline-foreground: #ffaba3;
  --ds-color-tone-info-solid-background: #3bb1f3;
  --ds-color-tone-info-solid-background-hover: #82ceff;
  --ds-color-tone-info-solid-background-pressed: #bae3fe;
  --ds-color-tone-info-solid-foreground: #001f31;
  --ds-color-tone-info-subtle-background: #001f31;
  --ds-color-tone-info-subtle-background-hover: #00334d;
  --ds-color-tone-info-subtle-background-pressed: #00496c;
  --ds-color-tone-info-subtle-foreground: #bae3fe;
  --ds-color-tone-info-outline-border: #3bb1f3;
  --ds-color-tone-info-outline-foreground: #82ceff;
  --ds-color-accent-start: #b4a9ff;
  --ds-color-accent-end: #22c3ee;
  --ds-color-accent-foreground: #191c21;
  --ds-color-accent-grid: #ffffff0f;
  --ds-color-accent-ring: #0c4a5c;
  --ds-color-accent-sweep: #22c3ee59;
  --ds-color-accent-wash: #211d45;
  --ds-color-accent-glass: #0d1324d9;
  --ds-color-accent-backdrop: #070b18;
  --ds-color-accent-panel: #0d1324;
  --ds-color-accent-field-border: #6a707b;
  --ds-elevation-flat-color: #000000;
  --ds-elevation-flat-offset-y: 0px;
  --ds-elevation-flat-blur: 0px;
  --ds-elevation-flat-opacity: 0;
  --ds-elevation-flat-shadow: #00000000;
  --ds-elevation-raised-color: #000000;
  --ds-elevation-raised-offset-y: 1px;
  --ds-elevation-raised-blur: 4px;
  --ds-elevation-raised-opacity: 0.35;
  --ds-elevation-raised-shadow: #00000059;
  --ds-elevation-sticky-color: #000000;
  --ds-elevation-sticky-offset-y: 2px;
  --ds-elevation-sticky-blur: 8px;
  --ds-elevation-sticky-opacity: 0.4;
  --ds-elevation-sticky-shadow: #00000066;
  --ds-elevation-floating-color: #000000;
  --ds-elevation-floating-offset-y: 4px;
  --ds-elevation-floating-blur: 12px;
  --ds-elevation-floating-opacity: 0.45;
  --ds-elevation-floating-shadow: #00000073;
  --ds-elevation-overlay-color: #000000;
  --ds-elevation-overlay-offset-y: 8px;
  --ds-elevation-overlay-blur: 24px;
  --ds-elevation-overlay-opacity: 0.5;
  --ds-elevation-overlay-shadow: #00000080;
  --ds-elevation-flat: none;
  --ds-elevation-raised: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
  --ds-elevation-sticky: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
  --ds-elevation-floating: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
  --ds-elevation-overlay: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
  }
}

/* ===== Hoja común de las webs de apps (Yumilla, Rekuento): solo referencias a tokens y a la capa de marca (--mk-*) ===== */
:root {
  --mk-titulo: var(--ds-typography-brand-heading-font-family);
  --mk-mono: var(--ds-typography-code-font-family);
  --mk-contenedor: var(--ds-layout-container-max-width);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ds-color-background-primary);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-typography-body-font-family);
  font-size: var(--ds-typography-body-font-size);
  line-height: var(--ds-typography-body-line-height);
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ds-color-text-link); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: var(--ds-component-focus-ring-width) solid var(--ds-color-focus-ring); outline-offset: var(--ds-component-focus-ring-offset); border-radius: var(--ds-radius-sm); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--ds-space-4); top: calc(-1 * var(--ds-space-16)); z-index: var(--ds-z-index-toast); padding: var(--ds-space-2) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); }
.saltar:focus { top: var(--ds-space-16); }
.ico { width: var(--ds-size-icon-md); height: var(--ds-size-icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); }
.ico--lg { width: var(--ds-size-icon-lg); height: var(--ds-size-icon-lg); }
.num { font-variant-numeric: tabular-nums; }

/* --- Ambient del DS (ThemeRoot) --- */
@keyframes ds-live { 0% { box-shadow: 0 0 0 var(--ds-space-0) var(--ds-color-accent-sweep); } 100% { box-shadow: 0 0 0 var(--ds-size-live-dot) transparent; } }
[data-ds-accent-text] { background-image: linear-gradient(90deg, var(--ds-color-accent-start), var(--ds-color-accent-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-ds-glass] { -webkit-backdrop-filter: blur(var(--ds-size-glass-blur)); backdrop-filter: blur(var(--ds-size-glass-blur)); }


/* --- Base --- */
.contenedor { width: 100%; max-width: var(--mk-contenedor); margin-inline: auto; padding-inline: var(--ds-layout-gutter-compact); }
@media (min-width: 600px) { .contenedor { padding-inline: var(--ds-layout-gutter); } }
.seccion { padding-block: var(--ds-space-16); position: relative; scroll-margin-top: var(--ds-layout-top-bar-height); }
@media (min-width: 840px) { .seccion { padding-block: var(--ds-space-24); } }
.seccion--alterna { background: var(--ds-color-accent-backdrop); border-block: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.cabecera { display: grid; gap: var(--ds-space-3); max-width: 46rem; margin-bottom: var(--ds-space-10); }
.cabecera--centro { margin-inline: auto; text-align: center; justify-items: center; }
.sobrelinea { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-family: var(--mk-mono); font-size: var(--ds-typography-overline-font-size); line-height: var(--ds-typography-overline-line-height); letter-spacing: var(--ds-typography-overline-letter-spacing); font-weight: var(--ds-typography-overline-font-weight); text-transform: uppercase; color: var(--ds-color-tone-brand-outline-foreground); }
.sobrelinea::before { content: var(--mk-sobrelinea, "// "); color: var(--mk-deco); white-space: pre; }
.t-display, .t-h1, .t-h3 { font-family: var(--mk-titulo); color: var(--ds-color-text-primary); text-wrap: balance; }
.t-display { font-size: var(--ds-typography-heading-1-font-size); line-height: var(--ds-typography-heading-1-line-height); font-weight: 800; letter-spacing: var(--ds-typography-display-letter-spacing); }
@media (min-width: 840px) { .t-display { font-size: calc(var(--ds-typography-display-font-size) * 1.1); line-height: 1.08; } }
.t-h1 { font-size: var(--ds-typography-heading-2-font-size); line-height: var(--ds-typography-heading-2-line-height); font-weight: 800; letter-spacing: var(--ds-typography-display-letter-spacing); }
@media (min-width: 840px) { .t-h1 { font-size: var(--ds-typography-heading-1-font-size); line-height: var(--ds-typography-heading-1-line-height); } }
.t-h3 { font-size: var(--ds-typography-heading-4-font-size); line-height: var(--ds-typography-heading-4-line-height); font-weight: 700; }
.t-sub { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-large-font-size); line-height: var(--ds-typography-body-large-line-height); }
.t-suave { color: var(--ds-color-text-secondary); }
.t-pequeno { font-size: var(--ds-typography-body-small-font-size); line-height: var(--ds-typography-body-small-line-height); }
.t-mono { font-family: var(--mk-mono); font-size: var(--ds-typography-overline-font-size); letter-spacing: var(--ds-typography-overline-letter-spacing); text-transform: uppercase; }

/* Botones (Button del DS) */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-component-control-gap-md); min-height: var(--ds-component-control-height-lg); padding-inline: var(--ds-component-control-padding-x-lg); border-radius: var(--ds-radius-control); border: var(--ds-border-width-thin) solid transparent; font-weight: var(--ds-typography-label-large-font-weight); text-decoration: none; cursor: pointer; transition: background var(--ds-motion-duration-transition) var(--ds-motion-easing-standard), transform var(--ds-motion-duration-transition) var(--ds-motion-easing-standard), box-shadow var(--ds-motion-duration-transition); white-space: nowrap; }
.boton--sm { min-height: var(--ds-component-control-height-sm); padding-inline: var(--ds-component-control-padding-x-sm); font-size: var(--ds-typography-label-font-size); }
.boton--marca { background: var(--ds-color-tone-brand-solid-background); color: var(--ds-color-tone-brand-solid-foreground); box-shadow: var(--ds-elevation-raised); }
.boton--marca:hover { background: var(--ds-color-tone-brand-solid-background-hover); transform: translateY(calc(-1 * var(--ds-border-width-medium))); box-shadow: var(--ds-elevation-floating); }
.boton--contorno { border-color: var(--ds-color-border-default); color: var(--ds-color-text-primary); background: var(--ds-color-surface-default); }
.boton--contorno:hover { background: var(--ds-color-accent-wash); }

/* Insignias */
.insignia { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-space-6); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-pill); font-size: var(--ds-typography-caption-font-size); font-weight: var(--ds-typography-label-large-font-weight); white-space: nowrap; line-height: 1.2; vertical-align: middle; }
.insignia--ok { background: var(--ds-color-tone-success-subtle-background); color: var(--ds-color-tone-success-subtle-foreground); }
.insignia--aviso { background: var(--ds-color-tone-warning-subtle-background); color: var(--ds-color-tone-warning-subtle-foreground); }
.insignia--marca { background: var(--ds-color-tone-brand-subtle-background); color: var(--ds-color-tone-brand-subtle-foreground); }
.insignia--plus { background: var(--mk-plus-fondo); color: var(--mk-plus-texto); letter-spacing: .02em; }
.insignia--neutra { background: var(--ds-color-surface-default); color: var(--ds-color-text-secondary); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }

/* LiveIndicator del DS */
.vivo { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); border: var(--ds-border-width-thin) solid var(--ds-color-border-default); background: var(--ds-color-accent-glass); font-family: var(--mk-mono); font-size: var(--ds-typography-overline-font-size); line-height: var(--ds-typography-overline-line-height); letter-spacing: var(--ds-typography-overline-letter-spacing); text-transform: uppercase; color: var(--ds-color-text-secondary); justify-self: start; }
.vivo__punto { width: var(--ds-size-live-dot); height: var(--ds-size-live-dot); border-radius: var(--ds-radius-pill); background: var(--mk-vivo); flex: none; animation: ds-live var(--ds-motion-duration-ambient-pulse) ease-out infinite; }

/* Card del DS y marcos (panel / hud / acento) */
.tarjeta { position: relative; display: grid; align-content: start; gap: var(--ds-space-3); padding: var(--ds-space-6); border-radius: var(--ds-radius-surface); background: var(--ds-color-surface-raised); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); box-shadow: var(--ds-elevation-raised); }
.tarjeta--acento::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--ds-size-accent-line); border-radius: var(--ds-radius-surface) var(--ds-radius-surface) 0 0; background-image: linear-gradient(90deg, var(--ds-color-accent-start), var(--ds-color-accent-end), transparent); }
.tarjeta__ceja { font-family: var(--mk-mono); font-size: var(--ds-typography-overline-font-size); line-height: var(--ds-typography-overline-line-height); letter-spacing: var(--ds-typography-overline-letter-spacing); text-transform: uppercase; color: var(--ds-color-text-secondary); }
.tarjeta__ceja::before { content: var(--mk-sobrelinea, "// "); color: var(--mk-deco); white-space: pre; }
.tarjeta p, .tarjeta li { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); line-height: var(--ds-typography-body-small-line-height); }
.tarjeta--viva { transition: transform var(--ds-motion-duration-transition) var(--ds-motion-easing-standard), box-shadow var(--ds-motion-duration-transition), border-color var(--ds-motion-duration-transition); }
.tarjeta--viva:hover { transform: translateY(calc(-1 * var(--ds-space-1))); box-shadow: var(--ds-elevation-floating); border-color: var(--ds-color-accent-ring); }
.esquina { position: absolute; width: var(--ds-size-hud-corner); height: var(--ds-size-hud-corner); pointer-events: none; border-color: var(--mk-deco); border-style: solid; border-width: 0; }
.esquina--a { top: calc(-1 * var(--ds-border-width-thin)); left: calc(-1 * var(--ds-border-width-thin)); border-top-width: var(--ds-border-width-medium); border-left-width: var(--ds-border-width-medium); border-top-left-radius: var(--ds-radius-surface); }
.esquina--b { bottom: calc(-1 * var(--ds-border-width-thin)); right: calc(-1 * var(--ds-border-width-thin)); border-bottom-width: var(--ds-border-width-medium); border-right-width: var(--ds-border-width-medium); border-bottom-right-radius: var(--ds-radius-surface); }
.icono-caja { width: var(--ds-size-control-lg); height: var(--ds-size-control-lg); display: grid; place-items: center; border-radius: var(--ds-radius-lg); background: var(--ds-color-tone-brand-subtle-background); color: var(--ds-color-tone-brand-subtle-foreground); border: var(--ds-border-width-thin) solid var(--ds-color-accent-ring); font-size: var(--ds-typography-heading-4-font-size); line-height: 1; }
.vinetas { display: grid; gap: var(--ds-space-2); }
.vinetas li { display: flex; gap: var(--ds-space-2); align-items: start; }
.vinetas li > .ico { color: var(--mk-check); margin-top: calc(var(--ds-space-1) / 2); width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); }
.vinetas .insignia { margin-left: var(--ds-space-1); }

/* --- Barra del sitio --- */
.barra { position: sticky; top: 0; z-index: var(--ds-z-index-sticky); background: var(--ds-color-accent-glass); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); min-height: var(--ds-layout-top-bar-height); }
.marca { display: inline-flex; align-items: center; gap: var(--ds-space-3); text-decoration: none; color: var(--ds-color-text-primary); }
.marca__logo { width: var(--ds-size-control-md); height: var(--ds-size-control-md); flex: none; border-radius: var(--ds-radius-lg); overflow: hidden; box-shadow: var(--ds-elevation-raised); }
.marca__nombre { font-family: var(--mk-titulo); font-weight: 800; font-size: var(--ds-typography-heading-4-font-size); letter-spacing: var(--ds-typography-display-letter-spacing); }
.barra__menu { display: none; gap: var(--ds-space-1); }
.barra__menu a { padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-control); color: var(--ds-color-text-secondary); text-decoration: none; font-weight: var(--ds-typography-label-large-font-weight); font-size: var(--ds-typography-label-large-font-size); }
.barra__menu a:hover { color: var(--ds-color-text-primary); background: var(--ds-color-accent-wash); }
@media (min-width: 1024px) { .barra__menu { display: flex; } }
.pronto { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-size-control-md); padding: 0 var(--ds-space-4); border-radius: var(--ds-radius-pill); border: var(--ds-border-width-thin) dashed var(--ds-color-border-strong); color: var(--ds-color-text-secondary); font-size: var(--ds-typography-label-font-size); font-weight: var(--ds-typography-label-large-font-weight); white-space: nowrap; }
.menu-movil { position: relative; }
.menu-movil summary { list-style: none; display: grid; place-items: center; width: var(--ds-size-touch-target-coarse); height: var(--ds-size-touch-target-coarse); border-radius: var(--ds-radius-control); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-default); cursor: pointer; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil ul { position: absolute; right: 0; top: calc(100% + var(--ds-space-2)); min-width: 14rem; display: grid; padding: var(--ds-space-2); border-radius: var(--ds-radius-surface); background: var(--ds-color-surface-raised); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); box-shadow: var(--ds-elevation-overlay); }
.menu-movil a { display: block; padding: var(--ds-space-3); border-radius: var(--ds-radius-control); color: var(--ds-color-text-primary); text-decoration: none; }
.menu-movil a:hover { background: var(--ds-color-accent-wash); }
@media (min-width: 1024px) { .menu-movil { display: none; } }
@media (max-width: 599px) { .barra .pronto { display: none; } }

/* --- Héroe --- */
.heroe { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--ds-space-12) var(--ds-space-16); background: var(--ds-color-accent-backdrop); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.heroe::before { content: ""; position: absolute; inset: 0; z-index: -2; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 80%); background-image: linear-gradient(var(--ds-color-accent-grid) var(--ds-border-width-thin), transparent var(--ds-border-width-thin)), linear-gradient(90deg, var(--ds-color-accent-grid) var(--ds-border-width-thin), transparent var(--ds-border-width-thin)); background-size: var(--mk-celda, var(--ds-size-grid-cell)) var(--mk-celda, var(--ds-size-grid-cell)); }
.luz { position: absolute; z-index: -1; border-radius: var(--ds-radius-full); pointer-events: none; filter: blur(var(--ds-space-16)); }
.luz--a { width: var(--ds-space-96); height: var(--ds-space-96); background: var(--mk-glow-a); top: calc(-1 * var(--ds-space-24)); right: 4%; }
.luz--b { width: var(--ds-space-80); height: var(--ds-space-80); background: var(--mk-glow-b); bottom: calc(-1 * var(--ds-space-24)); right: 34%; }
.heroe__rejilla { display: grid; gap: var(--ds-space-12); align-items: center; }
@media (min-width: 1024px) { .heroe__rejilla { grid-template-columns: 1.05fr 1fr; gap: var(--ds-space-12); } .heroe { padding-block: var(--ds-space-20) var(--ds-space-24); } }
.heroe__texto { display: grid; gap: var(--ds-space-6); align-content: start; min-width: 0; }
.heroe__ctas { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.tiendas { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.tienda { display: inline-flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-size-control-lg); padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-lg); border: var(--ds-border-width-thin) dashed var(--ds-color-border-strong); background: var(--ds-color-surface-default); color: var(--ds-color-text-primary); }
.tienda .ico { width: var(--ds-size-icon-lg); height: var(--ds-size-icon-lg); }
.tienda small { display: block; font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); color: var(--ds-color-text-secondary); }
.tienda strong { display: block; font-size: var(--ds-typography-label-large-font-size); line-height: var(--ds-typography-label-large-line-height); }
.heroe__nota { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); display: flex; gap: var(--ds-space-2); align-items: start; }
.heroe__nota .ico { color: var(--mk-deco-texto); margin-top: calc(var(--ds-space-1) / 2); }
.pruebas { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.pruebas li { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-default); font-size: var(--ds-typography-body-small-font-size); color: var(--ds-color-text-secondary); }
.pruebas .ico { color: var(--mk-check); }

/* Escena del producto: teléfono */
.escena { position: relative; display: grid; justify-items: center; padding-block: var(--ds-space-6); min-width: 0; }
.escena__rotulo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; }
.telefono { position: relative; width: min(100%, 20rem); padding: var(--ds-space-2); border-radius: calc(var(--ds-radius-xl) * 3); background: var(--mk-telefono); box-shadow: var(--ds-elevation-overlay), 0 0 0 var(--ds-border-width-thin) var(--ds-color-border-default); }
.telefono::before { content: ""; position: absolute; top: calc(var(--ds-space-2) + var(--ds-space-2)); left: 50%; width: 30%; height: calc(var(--ds-space-6) - var(--ds-space-1)); transform: translateX(-50%); border-radius: var(--ds-radius-pill); background: var(--mk-telefono); z-index: 2; }
.pantalla { position: relative; border-radius: calc(var(--ds-radius-xl) * 2.5); overflow: hidden; background: var(--ap-bg); color: var(--ap-texto); font-family: var(--ds-typography-body-font-family); height: 38rem; display: flex; flex-direction: column; font-size: var(--ds-typography-body-small-font-size); line-height: 1.35; }
.pantalla__estado { display: flex; justify-content: space-between; padding: var(--ds-space-3) var(--ds-space-6) var(--ds-space-2); font-size: var(--ds-typography-caption-font-size); font-weight: 700; color: var(--ap-texto); }
.pantalla__cuerpo { flex: 1; display: grid; gap: var(--ds-space-2); align-content: start; padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-20); }
.pantalla__barra { position: absolute; left: var(--ds-space-3); right: var(--ds-space-3); bottom: var(--ds-space-3); display: flex; justify-content: space-around; padding: var(--ds-space-1); border-radius: var(--ds-radius-pill); background: var(--ap-tarjeta); border: var(--ds-border-width-thin) solid var(--ap-borde); box-shadow: var(--ds-elevation-floating); }
.pantalla__barra span { flex: 1; display: grid; justify-items: center; gap: 2px; padding: var(--ds-space-1) 0; border-radius: var(--ds-radius-pill); font-size: 0.6875rem; line-height: 1.2; color: var(--ap-suave); }
.pantalla__barra span .ico { width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); }
.pantalla__barra span.activo { background: var(--ap-primario-suave); color: var(--ap-texto); font-weight: 700; }
.ap-tarjeta { background: var(--ap-tarjeta); border: var(--ds-border-width-thin) solid var(--ap-borde); border-radius: var(--ds-radius-xl); padding: var(--ds-space-2) var(--ds-space-3); display: grid; gap: calc(var(--ds-space-2) - 2px); }
.ap-titulo { font-weight: 800; font-size: var(--ds-typography-heading-4-font-size); line-height: 1.15; letter-spacing: -.01em; }
.ap-h { font-weight: 800; font-size: var(--ds-typography-body-small-font-size); margin-top: var(--ds-space-1); }
.ap-suave { color: var(--ap-suave); font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); }
.ap-pista { height: calc(var(--ds-space-2) - 1px); border-radius: var(--ds-radius-pill); background: var(--ap-pista); overflow: hidden; }
.ap-pista i { display: block; height: 100%; width: var(--v, 50%); border-radius: inherit; background: var(--c, var(--ap-primario)); transform-origin: left; }
.ap-fila { display: flex; align-items: center; gap: var(--ds-space-2); min-width: 0; }
.ap-fila > .crece { flex: 1; min-width: 0; }
.ap-etq { display: inline-flex; align-items: center; padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-pill); border: var(--ds-border-width-thin) solid currentColor; font-size: 0.6875rem; line-height: 1.5; font-weight: 700; white-space: nowrap; }
.ap-emoji { width: var(--ds-size-control-sm); height: var(--ds-size-control-sm); display: grid; place-items: center; border-radius: var(--ds-radius-lg); background: var(--ap-primario-suave); font-size: var(--ds-typography-body-font-size); flex: none; }
.ap-pct { font-weight: 800; font-size: var(--ds-typography-label-large-font-size); font-variant-numeric: tabular-nums; }
.ap-nombre { font-weight: 700; font-size: var(--ds-typography-body-small-font-size); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-monto { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Chips flotantes del héroe */
.chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-2); border-radius: var(--ds-radius-xl); background: var(--ds-color-accent-glass); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); box-shadow: var(--ds-elevation-floating); -webkit-backdrop-filter: blur(var(--ds-size-glass-blur)); backdrop-filter: blur(var(--ds-size-glass-blur)); max-width: 16rem; text-align: left; }
.chip__ico { width: var(--ds-size-control-sm); height: var(--ds-size-control-sm); display: grid; place-items: center; border-radius: var(--ds-radius-lg); flex: none; font-size: var(--ds-typography-body-font-size); }
.chip__ico--marca { background: var(--ds-color-tone-brand-subtle-background); color: var(--ds-color-tone-brand-subtle-foreground); }
.chip__ico--ok { background: var(--ds-color-tone-success-subtle-background); color: var(--ds-color-tone-success-subtle-foreground); }
.chip__ico--aviso { background: var(--ds-color-tone-warning-subtle-background); color: var(--ds-color-tone-warning-subtle-foreground); }
.chip strong { display: block; font-size: var(--ds-typography-label-large-font-size); line-height: var(--ds-typography-label-large-line-height); }
.chip small { display: block; font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); color: var(--ds-color-text-secondary); }
.envoltura-tel { position: relative; width: min(100%, 20rem); display: grid; justify-items: center; }
.chip--1 { top: 4%; left: calc(-1 * var(--ds-space-40)); }
.chip--2 { top: 21%; right: calc(-1 * var(--ds-space-40)); }
.chip--3 { top: 72%; right: calc(-1 * var(--ds-space-32)); }
.chip--4 { bottom: 4%; left: calc(-1 * var(--ds-space-32)); }
@media (min-width: 1024px) { .chip { max-width: none; } .chip strong { white-space: nowrap; } .chip small { max-width: 14rem; } }
@media (max-width: 1023px) {
  .envoltura-tel { width: 100%; }
  .envoltura-tel > .telefono { width: min(100%, 20rem); }
  .chip { position: static; max-width: none; }
  .chips-movil { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--ds-space-2); width: 100%; margin-top: var(--ds-space-6); }
}
@media (max-width: 599px) { .chip--3, .chip--4 { display: none; } }
@media (min-width: 1024px) { .chips-movil { display: contents; } }

/* Cifras del producto */
.banda-cifras { background: var(--ds-color-surface-default); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 840px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifra { display: grid; gap: var(--ds-space-1); padding: var(--ds-space-8) var(--ds-space-3); text-align: center; align-content: start; }
@media (min-width: 840px) { .cifra + .cifra { border-left: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); } }
@media (max-width: 839px) { .cifra:nth-child(-n+2) { border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); } .cifra:nth-child(odd) { border-right: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); } }
.cifra strong { font-family: var(--mk-titulo); font-size: var(--ds-typography-heading-1-font-size); line-height: var(--ds-typography-heading-1-line-height); font-weight: 800; background-image: linear-gradient(90deg, var(--ds-color-accent-start), var(--ds-color-accent-end)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); }

/* Rejillas */
.rejilla { display: grid; gap: var(--ds-space-4); }
@media (min-width: 600px) { .rejilla--2, .rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) and (max-width: 1023px) { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }

/* Pestañas que muestran el producto */
.pestanas__lista { display: flex; gap: var(--ds-space-2); overflow-x: auto; padding: var(--ds-space-1); margin-bottom: var(--ds-space-8); scrollbar-width: thin; }
.pestanas__lista button { flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: var(--ds-size-touch-target-coarse); padding-inline: var(--ds-space-4); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-pill); background: var(--ds-color-surface-default); color: var(--ds-color-text-secondary); font-weight: var(--ds-typography-label-large-font-weight); cursor: pointer; }
.pestanas__lista button:hover { color: var(--ds-color-text-primary); background: var(--ds-color-accent-wash); }
.pestanas__lista button[aria-selected="true"] { background: var(--ds-color-tone-brand-solid-background); border-color: var(--ds-color-tone-brand-solid-background); color: var(--ds-color-tone-brand-solid-foreground); }
.pestana { display: grid; gap: var(--ds-space-8); align-items: center; }
.pestana[hidden] { display: none; }
@media (min-width: 1024px) { .pestana { grid-template-columns: 1fr 1fr; gap: var(--ds-space-12); } }
.pestana__texto { display: grid; gap: var(--ds-space-4); align-content: start; }
.pestana__texto .vinetas { gap: var(--ds-space-3); }
.pestana__texto .vinetas li { color: var(--ds-color-text-primary); font-size: var(--ds-typography-body-font-size); }
.ejemplo { font-family: var(--mk-mono); font-size: var(--ds-typography-overline-font-size); letter-spacing: var(--ds-typography-overline-letter-spacing); text-transform: uppercase; color: var(--ds-color-text-secondary); }

/* Consola (tarjeta tipo terminal) */
.consola { position: relative; border-radius: var(--ds-radius-surface); background: var(--ds-color-surface-raised); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); box-shadow: var(--ds-elevation-floating); overflow: hidden; }
.consola__barra { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-background-secondary); }
.consola__puntos { display: flex; gap: var(--ds-space-1); }
.consola__puntos i { width: var(--ds-space-2); height: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-color-border-default); }
.consola__titulo { font-family: var(--mk-mono); font-size: var(--ds-typography-caption-font-size); color: var(--ds-color-text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consola__cuerpo { padding: var(--ds-space-4); display: grid; gap: var(--ds-space-3); font-size: var(--ds-typography-body-small-font-size); }
.consola__fila { display: flex; justify-content: space-between; gap: var(--ds-space-3); align-items: baseline; padding-block: var(--ds-space-1); border-bottom: var(--ds-border-width-thin) dashed var(--ds-color-border-subtle); }
.consola__fila:last-child { border-bottom: 0; }
.consola__fila span { color: var(--ds-color-text-secondary); }
.consola__fila b { font-family: var(--mk-mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.consola__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-3); padding-top: var(--ds-space-3); border-top: var(--ds-border-width-medium) solid var(--ds-color-text-primary); font-weight: 700; }
.consola__total b { font-family: var(--mk-mono); font-size: var(--ds-typography-heading-3-font-size); font-variant-numeric: tabular-nums; }

/* Planes */
.planes { display: grid; gap: var(--ds-space-6); align-items: start; }
@media (min-width: 840px) { .planes { grid-template-columns: 1fr 1fr; max-width: 64rem; margin-inline: auto; } }
.plan { display: grid; gap: var(--ds-space-4); align-content: start; padding: var(--ds-space-8) var(--ds-space-6); }
.plan .plan__precio { color: var(--ds-color-text-primary); font-family: var(--mk-titulo); font-size: var(--ds-typography-heading-1-font-size); line-height: var(--ds-typography-heading-1-line-height); font-weight: 800; letter-spacing: var(--ds-typography-display-letter-spacing); }
.plan .plan__precio[data-ds-accent-text] { color: transparent; }
.plan--destacado { border-color: var(--ds-color-tone-brand-outline-border); box-shadow: var(--ds-elevation-overlay); }
.plan .vinetas li { color: var(--ds-color-text-primary); }
.tabla-precios { width: 100%; border-collapse: collapse; font-size: var(--ds-typography-body-small-font-size); }
.tabla-precios th, .tabla-precios td { padding: var(--ds-space-3); text-align: left; border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.tabla-precios th { font-family: var(--mk-mono); font-size: var(--ds-typography-overline-font-size); letter-spacing: var(--ds-typography-overline-letter-spacing); text-transform: uppercase; color: var(--ds-color-text-secondary); font-weight: 600; }
.tabla-precios td { font-variant-numeric: tabular-nums; }
.tabla-precios td:not(:first-child), .tabla-precios th:not(:first-child) { text-align: right; white-space: nowrap; }
.letra-chica { max-width: 52rem; margin: var(--ds-space-8) auto 0; text-align: center; color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); }

/* Plataformas */
.plataforma { display: grid; gap: var(--ds-space-3); align-content: start; }
.plataforma__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.plataforma h3 { font-family: var(--mk-titulo); font-size: var(--ds-typography-heading-4-font-size); font-weight: 700; }

/* Privacidad */
.privacidad { display: grid; gap: var(--ds-space-10); align-items: center; }
@media (min-width: 1024px) { .privacidad { grid-template-columns: 1fr 1.1fr; } }
.escudo-lista { display: grid; gap: var(--ds-space-3); }
.escudo-lista li { display: flex; gap: var(--ds-space-4); align-items: start; padding: var(--ds-space-4); border-radius: var(--ds-radius-surface); background: var(--ds-color-surface-default); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.escudo-lista strong { display: block; }
.escudo-lista p { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); }
.escudo-lista .icono-caja { width: var(--ds-size-control-md); height: var(--ds-size-control-md); flex: none; }

/* Preguntas */
.preguntas { display: grid; gap: var(--ds-space-2); max-width: 48rem; margin-inline: auto; }
.preguntas details { border-radius: var(--ds-radius-surface); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-default); }
.preguntas details[open] { border-color: var(--ds-color-accent-ring); box-shadow: var(--ds-elevation-raised); }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); padding: var(--ds-space-4) var(--ds-space-6); cursor: pointer; list-style: none; font-weight: var(--ds-typography-label-large-font-weight); min-height: var(--ds-size-touch-target-coarse); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .ico { transition: transform var(--ds-motion-duration-transition) var(--ds-motion-easing-standard); color: var(--ds-color-text-secondary); }
.preguntas details[open] summary .ico { transform: rotate(45deg); color: var(--mk-deco-texto); }
.preguntas details p { padding: 0 var(--ds-space-6) var(--ds-space-6); color: var(--ds-color-text-secondary); }
.preguntas .mas { text-align: center; color: var(--ds-color-text-secondary); margin-top: var(--ds-space-4); }

/* Llamada final (superficie de marca, igual en claro y oscuro) */
.llamada { position: relative; isolation: isolate; overflow: hidden; border-radius: calc(var(--ds-radius-xl) * 1.5); padding: var(--ds-space-12) var(--ds-space-6); text-align: center; display: grid; gap: var(--ds-space-4); justify-items: center; background: var(--mk-llamada-fondo); color: var(--mk-llamada-texto); }
@media (min-width: 840px) { .llamada { padding: var(--ds-space-20) var(--ds-space-12); } }
.llamada .t-h1 { color: var(--mk-llamada-texto); }
.llamada p { color: var(--mk-llamada-suave); max-width: 36rem; }
.llamada .sobrelinea { color: var(--mk-llamada-texto); }
.llamada .tienda { background: transparent; color: var(--mk-llamada-texto); border-color: var(--mk-llamada-borde); }
.llamada .tienda small { color: var(--mk-llamada-suave); }

/* Pie */
.pie { padding-block: var(--ds-space-16) var(--ds-space-8); border-top: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-accent-backdrop); }
.pie__rejilla { display: grid; gap: var(--ds-space-8); }
@media (min-width: 600px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.pie h3, .pie__titulo { font-size: var(--ds-typography-label-large-font-size); margin-bottom: var(--ds-space-3); }
.pie ul { display: grid; gap: var(--ds-space-2); }
.pie a { color: var(--ds-color-text-secondary); text-decoration: none; font-size: var(--ds-typography-body-small-font-size); }
.pie a:hover { color: var(--ds-color-text-primary); text-decoration: underline; }
.pie__texto { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); max-width: 26rem; margin-top: var(--ds-space-3); }
.pie__empresa { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); display: grid; gap: var(--ds-space-1); font-style: normal; }
.pie__empresa strong { color: var(--ds-color-text-primary); }
.pie__legal { margin-top: var(--ds-space-12); padding-top: var(--ds-space-6); border-top: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-3); color: var(--ds-color-text-secondary); font-size: var(--ds-typography-caption-font-size); }

/* Aparecer al hacer scroll */
.js .aparece { opacity: 0; transform: translateY(var(--ds-space-6)); transition: opacity calc(var(--ds-motion-duration-enter) * 2) var(--ds-motion-easing-enter), transform calc(var(--ds-motion-duration-enter) * 2) var(--ds-motion-easing-enter); transition-delay: var(--retraso, 0ms); }
.js .aparece.visible { opacity: 1; transform: none; }

/* Movimiento ambiental (desactivado con menos movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .chip { animation: flota calc(var(--ds-motion-duration-indeterminate) * 4) var(--ds-motion-easing-standard) infinite alternate; }
  .chip--2 { animation-delay: -1.5s; } .chip--3 { animation-delay: -3s; } .chip--4 { animation-delay: -4.5s; }
  .js .chip.entra { animation: entra-chip calc(var(--ds-motion-duration-enter) * 2) var(--ds-motion-easing-enter) both, flota calc(var(--ds-motion-duration-indeterminate) * 4) var(--ds-motion-easing-standard) calc(var(--ds-motion-duration-enter) * 2) infinite alternate; }
  .js .pestana:not([hidden]) { animation: entra calc(var(--ds-motion-duration-enter) * 1.5) var(--ds-motion-easing-enter); }
  .js .visible .ap-pista i, .js .pestana:not([hidden]) .ap-pista i, .heroe .ap-pista i { animation: crece calc(var(--ds-motion-duration-enter) * 4) var(--ds-motion-easing-enter) both; }
  .luz--a { animation: deriva calc(var(--ds-motion-duration-indeterminate) * 9) ease-in-out infinite alternate; }
  .luz--b { animation: deriva calc(var(--ds-motion-duration-indeterminate) * 11) ease-in-out infinite alternate-reverse; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .aparece { opacity: 1; transform: none; transition: none; } .vivo__punto { animation: none; } }
@keyframes flota { to { transform: translateY(calc(-1 * var(--ds-space-2))); } }
@keyframes entra-chip { from { opacity: 0; transform: translateY(var(--ds-space-3)) scale(.96); } }
@keyframes entra { from { opacity: 0; transform: translateY(var(--ds-space-2)); } }
@keyframes crece { from { transform: scaleX(0); } }
@keyframes deriva { to { transform: translate(calc(-1 * var(--ds-space-12)), var(--ds-space-8)); } }
.tabla-precios tbody th { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--ds-color-text-primary); }
/* --- Sin JS: todas las pantallas a la vista, una debajo de otra (las pestañas solo existen con JS) --- */
html:not(.js) .pestanas__lista { display: none; }
html:not(.js) .pestana + .pestana { margin-top: var(--ds-space-16); }

/* ===== Páginas de texto (privacidad, términos, soporte, eliminar, 404) con el mismo sistema ===== */
.documento { padding-block: var(--ds-space-12) var(--ds-space-16); background: var(--ds-color-background-primary); }
.documento__hoja { max-width: 50rem; }
.documento h1 { font-family: var(--mk-titulo); font-size: var(--ds-typography-heading-2-font-size); line-height: var(--ds-typography-heading-2-line-height); font-weight: 800; letter-spacing: var(--ds-typography-display-letter-spacing); color: var(--ds-color-text-primary); text-wrap: balance; margin-bottom: var(--ds-space-4); }
.documento h2 { font-family: var(--mk-titulo); font-size: var(--ds-typography-heading-4-font-size); line-height: var(--ds-typography-heading-4-line-height); font-weight: 800; color: var(--ds-color-text-primary); margin: var(--ds-space-10) 0 var(--ds-space-3); scroll-margin-top: calc(var(--ds-layout-top-bar-height) + var(--ds-space-4)); }
.documento h3 { font-size: var(--ds-typography-label-large-font-size); font-weight: 700; color: var(--ds-color-text-primary); margin: var(--ds-space-6) 0 var(--ds-space-2); }
.documento p, .documento li { color: var(--ds-color-text-secondary); }
.documento p { margin-bottom: var(--ds-space-4); }
.documento strong { color: var(--ds-color-text-primary); }
.documento ul, .documento ol { padding-left: var(--ds-space-6); margin-bottom: var(--ds-space-4); }
.documento ul { list-style: disc; }
.documento ol { list-style: decimal; }
.documento li { margin-bottom: var(--ds-space-2); }
.documento li::marker { color: var(--mk-deco-texto); }
.documento a { color: var(--ds-color-text-link); font-weight: 600; }
.documento .vigencia, .documento .meta { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); padding-bottom: var(--ds-space-6); margin-bottom: var(--ds-space-8); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.documento .tabla, .documento .tabla-envoltura { overflow-x: auto; margin: var(--ds-space-4) 0 var(--ds-space-6); border-radius: var(--ds-radius-surface); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-default); }
.documento table { width: 100%; border-collapse: collapse; font-size: var(--ds-typography-body-small-font-size); }
.documento th, .documento td { text-align: left; vertical-align: top; padding: var(--ds-space-3) var(--ds-space-4); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); color: var(--ds-color-text-secondary); }
.documento thead th { background: var(--ds-color-background-secondary); color: var(--ds-color-text-primary); font-weight: 700; }
.documento tr:last-child td { border-bottom: 0; }
.documento .aviso, .documento .contacto { margin: var(--ds-space-6) 0; padding: var(--ds-space-4) var(--ds-space-6); border-radius: var(--ds-radius-surface); border: var(--ds-border-width-thin) solid var(--ds-color-accent-ring); background: var(--ds-color-accent-wash); }
.documento .aviso p:last-child, .documento .contacto p:last-child { margin-bottom: 0; }
.documento .contacto a { font-size: var(--ds-typography-body-large-font-size); }
.documento .indice { margin: 0 0 var(--ds-space-8); padding: var(--ds-space-4) var(--ds-space-6); border-radius: var(--ds-radius-surface); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-default); }
.documento .indice strong { display: block; font-family: var(--mk-mono); font-size: var(--ds-typography-overline-font-size); letter-spacing: var(--ds-typography-overline-letter-spacing); text-transform: uppercase; color: var(--ds-color-text-secondary); margin-bottom: var(--ds-space-2); }
.documento .indice ol { columns: 2 16rem; margin: 0; }
.documento .ruta { font-weight: 650; color: var(--ds-color-tone-brand-subtle-foreground); background: var(--ds-color-tone-brand-subtle-background); padding: 0 var(--ds-space-1); border-radius: var(--ds-radius-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.documento .pasos { list-style: none; padding: 0; counter-reset: paso; }
.documento .pasos li { counter-increment: paso; position: relative; padding-left: var(--ds-space-12); min-height: var(--ds-space-8); margin-bottom: var(--ds-space-4); }
.documento .pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: var(--ds-space-8); height: var(--ds-space-8); display: grid; place-items: center; border-radius: var(--ds-radius-pill); background: var(--ds-color-tone-brand-solid-background); color: var(--ds-color-tone-brand-solid-foreground); font-weight: 800; font-size: var(--ds-typography-label-font-size); }
.documento details { margin-bottom: var(--ds-space-2); border-radius: var(--ds-radius-surface); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-default); }
.documento details[open] { border-color: var(--ds-color-accent-ring); box-shadow: var(--ds-elevation-raised); }
.documento summary { padding: var(--ds-space-4) var(--ds-space-6); cursor: pointer; font-weight: 700; color: var(--ds-color-text-primary); }
.documento summary::marker { color: var(--mk-deco-texto); }
.documento details > :not(summary) { padding: 0 var(--ds-space-6); }
.documento details > :last-child { padding-bottom: var(--ds-space-2); }
.documento .boton { text-decoration: none; font-weight: var(--ds-typography-label-large-font-weight); }
.documento .boton--marca { color: var(--ds-color-tone-brand-solid-foreground); }
.documento--centro .documento__hoja { text-align: center; display: grid; justify-items: center; }
.documento--centro img { border-radius: calc(var(--ds-radius-xl) * 1.5); box-shadow: var(--ds-elevation-floating); margin-bottom: var(--ds-space-6); }
.barra__acciones { display: flex; gap: var(--ds-space-2); align-items: center; }

/* ===== Capa de marca Rekuento (src/ui/theme.ts: azul marino #16508f / #6ea8e6, entra #05875f / #3fe0a0, sale #c2410c / #ff8a57, fondo #071426) ===== */
:root {
  --ds-color-background-primary: #f5f7fa;
  --ds-color-background-secondary: #eaf0f7;
  --ds-color-background-tertiary: #dbe3ee;
  --ds-color-surface-default: #ffffff;
  --ds-color-surface-raised: #ffffff;
  --ds-color-surface-sunken: #eaf0f7;
  --ds-color-surface-inverse: #0b1a2e;
  --ds-color-text-primary: #0b1a2e;
  --ds-color-text-secondary: #4d5d72;
  --ds-color-text-tertiary: #5b6b80;
  --ds-color-text-inverse: #ffffff;
  --ds-color-text-link: #16508f;
  --ds-color-border-subtle: #dbe3ee;
  --ds-color-border-default: #c3cfdd;
  --ds-color-border-strong: #7d8ca0;
  --ds-color-focus-ring: #16508f;
  --ds-color-tone-brand-solid-background: #16508f;
  --ds-color-tone-brand-solid-background-hover: #113f72;
  --ds-color-tone-brand-solid-background-pressed: #0c2f56;
  --ds-color-tone-brand-solid-foreground: #ffffff;
  --ds-color-tone-brand-subtle-background: #e3edf9;
  --ds-color-tone-brand-subtle-background-hover: #d3e3f5;
  --ds-color-tone-brand-subtle-background-pressed: #bcd4ef;
  --ds-color-tone-brand-subtle-foreground: #0f3a69;
  --ds-color-tone-brand-outline-border: #16508f;
  --ds-color-tone-brand-outline-foreground: #16508f;
  --ds-color-accent-start: #16508f;
  --ds-color-accent-end: #05875f;
  --ds-color-accent-foreground: #ffffff;
  --ds-color-accent-grid: #16508f12;
  --ds-color-accent-ring: #bcd4ef;
  --ds-color-accent-sweep: #05875f40;
  --ds-color-accent-wash: #e3edf9;
  --ds-color-accent-glass: #f8fafcdb;
  --ds-color-accent-backdrop: #eef3f8;
  --ds-color-accent-panel: #ffffff;
  --mk-celda: 24px;
  --mk-deco: #05875f;
  --mk-deco-texto: #047552;
  --mk-check: #05875f;
  --mk-vivo: #05875f;
  --mk-plus-fondo: #dcf5ea;
  --mk-plus-texto: #035c41;
  --mk-telefono: #0b1a2e;
  --mk-glow-a: #16508f24;
  --mk-glow-b: #05875f1f;
  --mk-entra: #05875f;
  --mk-sale: #c2410c;
  --mk-llamada-fondo: linear-gradient(135deg, #071426 0%, #0f2138 55%, #173050 100%);
  --mk-llamada-texto: #eef3f9;
  --mk-llamada-suave: #b7c5d8;
  --mk-llamada-borde: #3fe0a099;
  /* Pantallas de la app: src/ui/theme.ts y colores de categoría (src/domain/defaults.ts) */
  --ap-bg: #f5f7fa; --ap-tarjeta: #ffffff; --ap-borde: #e1e7ef; --ap-texto: #0b1a2e; --ap-suave: #5b6b80;
  --ap-primario: #16508f; --ap-primario-texto: #ffffff; --ap-primario-suave: #e3edf9; --ap-pista: #e1e7ef;
  --ap-entra: #05875f; --ap-sale: #c2410c; --ap-aviso: #b45309;
}
:root[data-theme="dark"] {
  --ds-color-background-primary: #071426;
  --ds-color-background-secondary: #0b1b31;
  --ds-color-background-tertiary: #13294a;
  --ds-color-surface-default: #0f2138;
  --ds-color-surface-raised: #11253f;
  --ds-color-surface-sunken: #040c18;
  --ds-color-surface-inverse: #eef3f9;
  --ds-color-text-primary: #eef3f9;
  --ds-color-text-secondary: #b7c5d8;
  --ds-color-text-tertiary: #a3b3c8;
  --ds-color-text-inverse: #071426;
  --ds-color-text-link: #8dbbec;
  --ds-color-border-subtle: #1f3350;
  --ds-color-border-default: #2b4566;
  --ds-color-border-strong: #5a7395;
  --ds-color-focus-ring: #6ea8e6;
  --ds-color-tone-brand-solid-background: #6ea8e6;
  --ds-color-tone-brand-solid-background-hover: #8dbbec;
  --ds-color-tone-brand-solid-background-pressed: #a9cdf2;
  --ds-color-tone-brand-solid-foreground: #071426;
  --ds-color-tone-brand-subtle-background: #13294a;
  --ds-color-tone-brand-subtle-background-hover: #1a3560;
  --ds-color-tone-brand-subtle-background-pressed: #22427a;
  --ds-color-tone-brand-subtle-foreground: #cfe2f7;
  --ds-color-tone-brand-outline-border: #6ea8e6;
  --ds-color-tone-brand-outline-foreground: #8dbbec;
  --ds-color-accent-start: #6ea8e6;
  --ds-color-accent-end: #3fe0a0;
  --ds-color-accent-foreground: #071426;
  --ds-color-accent-grid: #eef3f90c;
  --ds-color-accent-ring: #2b4566;
  --ds-color-accent-sweep: #3fe0a055;
  --ds-color-accent-wash: #10243f;
  --ds-color-accent-glass: #071426db;
  --ds-color-accent-backdrop: #040c18;
  --ds-color-accent-panel: #0f2138;
  --mk-deco: #3fe0a0;
  --mk-deco-texto: #3fe0a0;
  --mk-check: #3fe0a0;
  --mk-vivo: #3fe0a0;
  --mk-plus-fondo: #0f3a2c;
  --mk-plus-texto: #7ff0c0;
  --mk-telefono: #02070f;
  --mk-glow-a: #6ea8e633;
  --mk-glow-b: #3fe0a01f;
  --mk-entra: #3fe0a0;
  --mk-sale: #ff8a57;
  --ap-bg: #071426; --ap-tarjeta: #0f2138; --ap-borde: #1f3350; --ap-texto: #eef3f9; --ap-suave: #93a4bb;
  --ap-primario: #6ea8e6; --ap-primario-texto: #071426; --ap-primario-suave: #13294a; --ap-pista: #1f3350;
  --ap-entra: #3fe0a0; --ap-sale: #ff8a57; --ap-aviso: #fbbf24;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ds-color-background-primary: #071426;
  --ds-color-background-secondary: #0b1b31;
  --ds-color-background-tertiary: #13294a;
  --ds-color-surface-default: #0f2138;
  --ds-color-surface-raised: #11253f;
  --ds-color-surface-sunken: #040c18;
  --ds-color-surface-inverse: #eef3f9;
  --ds-color-text-primary: #eef3f9;
  --ds-color-text-secondary: #b7c5d8;
  --ds-color-text-tertiary: #a3b3c8;
  --ds-color-text-inverse: #071426;
  --ds-color-text-link: #8dbbec;
  --ds-color-border-subtle: #1f3350;
  --ds-color-border-default: #2b4566;
  --ds-color-border-strong: #5a7395;
  --ds-color-focus-ring: #6ea8e6;
  --ds-color-tone-brand-solid-background: #6ea8e6;
  --ds-color-tone-brand-solid-background-hover: #8dbbec;
  --ds-color-tone-brand-solid-background-pressed: #a9cdf2;
  --ds-color-tone-brand-solid-foreground: #071426;
  --ds-color-tone-brand-subtle-background: #13294a;
  --ds-color-tone-brand-subtle-background-hover: #1a3560;
  --ds-color-tone-brand-subtle-background-pressed: #22427a;
  --ds-color-tone-brand-subtle-foreground: #cfe2f7;
  --ds-color-tone-brand-outline-border: #6ea8e6;
  --ds-color-tone-brand-outline-foreground: #8dbbec;
  --ds-color-accent-start: #6ea8e6;
  --ds-color-accent-end: #3fe0a0;
  --ds-color-accent-foreground: #071426;
  --ds-color-accent-grid: #eef3f90c;
  --ds-color-accent-ring: #2b4566;
  --ds-color-accent-sweep: #3fe0a055;
  --ds-color-accent-wash: #10243f;
  --ds-color-accent-glass: #071426db;
  --ds-color-accent-backdrop: #040c18;
  --ds-color-accent-panel: #0f2138;
  --mk-deco: #3fe0a0;
  --mk-deco-texto: #3fe0a0;
  --mk-check: #3fe0a0;
  --mk-vivo: #3fe0a0;
  --mk-plus-fondo: #0f3a2c;
  --mk-plus-texto: #7ff0c0;
  --mk-telefono: #02070f;
  --mk-glow-a: #6ea8e633;
  --mk-glow-b: #3fe0a01f;
  --mk-entra: #3fe0a0;
  --mk-sale: #ff8a57;
  --ap-bg: #071426; --ap-tarjeta: #0f2138; --ap-borde: #1f3350; --ap-texto: #eef3f9; --ap-suave: #93a4bb;
  --ap-primario: #6ea8e6; --ap-primario-texto: #071426; --ap-primario-suave: #13294a; --ap-pista: #1f3350;
  --ap-entra: #3fe0a0; --ap-sale: #ff8a57; --ap-aviso: #fbbf24;
} }



/* ===== Propio de Rekuento: precisión de libro contable ===== */
.heroe::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--ds-size-accent-line); z-index: -1; background-image: linear-gradient(90deg, transparent, var(--ds-color-accent-start), var(--ds-color-accent-end), transparent); opacity: .6; }
.mv-entra { color: var(--mk-entra); } .mv-sale { color: var(--mk-sale); }
.ap-entra { color: var(--ap-entra); } .ap-sale { color: var(--ap-sale); }
.ap-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.ap-boton { width: var(--ds-size-control-md); height: var(--ds-size-control-md); display: grid; place-items: center; border-radius: var(--ds-radius-pill); background: var(--ap-tarjeta); border: var(--ds-border-width-thin) solid var(--ap-borde); color: var(--ap-texto); flex: none; }
.ap-boton .ico { width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); }
.ap-espacio { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: var(--ds-space-2) var(--ds-space-4); border-radius: var(--ds-radius-pill); background: var(--ap-tarjeta); border: var(--ds-border-width-thin) solid var(--ap-borde); font-weight: 800; }
.dona { position: relative; width: 60%; justify-self: center; aspect-ratio: 1; }
.dona svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dona circle { fill: none; stroke-width: 18; }
.dona__centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.dona__centro b { font-size: var(--ds-typography-body-font-size); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ap-hoy b.cifra-hoy { font-size: var(--ds-typography-heading-2-font-size); line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ap-enlace { color: var(--ap-primario); font-weight: 800; font-size: var(--ds-typography-caption-font-size); }
.cats { display: grid; gap: 4px; }
.cat { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--ds-space-2); align-items: center; font-size: var(--ds-typography-caption-font-size); }
.cat i { width: 9px; height: 9px; border-radius: var(--ds-radius-pill); background: var(--c); }
.cat .pct { color: var(--ap-suave); font-variant-numeric: tabular-nums; }
.cat b { font-variant-numeric: tabular-nums; }
.presu { display: grid; gap: var(--ds-space-1); }
.presu__fila { display: flex; justify-content: space-between; gap: var(--ds-space-2); font-size: var(--ds-typography-caption-font-size); }
.presu__fila b { font-weight: 700; color: var(--ap-texto); }
.presu__fila span { color: var(--ap-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.presu__fila span.ap-sale, .presu__fila span.aviso { font-weight: 700; }
.aviso { color: var(--ap-aviso); }
.cuenta { display: flex; align-items: center; gap: var(--ds-space-2); padding-block: 3px; font-size: var(--ds-typography-caption-font-size); }
.cuenta__ico { width: 26px; height: 26px; border-radius: var(--ds-radius-md); display: grid; place-items: center; background: var(--c); color: #ffffff; flex: none; }
.cuenta__ico .ico { width: 14px; height: 14px; }
.cuenta .crece { flex: 1; min-width: 0; }
.cuenta b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chispa { width: 100%; height: 3.25rem; }
.chispa path.linea { fill: none; stroke: var(--ap-entra); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chispa path.area { fill: color-mix(in srgb, var(--ap-entra) 16%, transparent); }
.chispa circle { fill: var(--ap-entra); }
.barras-mes { width: 100%; height: 7rem; }
.barras-mes .in { fill: var(--ap-entra); } .barras-mes .out { fill: var(--ap-sale); }
.barras-mes text { fill: var(--ap-suave); font-size: 10px; font-family: var(--ds-typography-body-font-family); }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendario i { aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--ap-sale) var(--n, 0%), var(--ap-pista)); }
.ap-alerta { display: flex; gap: var(--ds-space-2); align-items: start; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-lg); background: var(--ap-primario-suave); font-size: var(--ds-typography-caption-font-size); }
.segmento { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: var(--ds-radius-pill); background: var(--ap-pista); font-size: var(--ds-typography-caption-font-size); font-weight: 700; text-align: center; }
.segmento span { padding: 4px 0; border-radius: var(--ds-radius-pill); color: var(--ap-texto); font-weight: 600; }
.segmento span.activo { background: var(--ap-tarjeta); color: var(--ap-sale); box-shadow: var(--ds-elevation-raised); }
.monto { text-align: center; font-size: 2.25rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ap-sale); line-height: 1.1; }
.campos { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); justify-content: center; }
.campos span { padding: 3px var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ap-tarjeta); border: var(--ds-border-width-thin) solid var(--ap-borde); font-size: var(--ds-typography-caption-font-size); font-weight: 600; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.teclado span { display: grid; place-items: center; height: 2.5rem; border-radius: var(--ds-radius-lg); background: var(--ap-tarjeta); border: var(--ds-border-width-thin) solid var(--ap-borde); font-size: var(--ds-typography-body-large-font-size); font-weight: 700; }
.ap-guardar { display: grid; place-items: center; height: 2.5rem; border-radius: var(--ds-radius-pill); background: var(--ap-primario); color: var(--ap-primario-texto); font-weight: 800; }
.dictado { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-xl); background: var(--ap-primario-suave); font-size: var(--ds-typography-caption-font-size); }
.dictado .ico { color: var(--ap-primario); width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); }

@media (min-width: 1024px) { .chip--2 { top: 47%; } .chip--3 { top: 9%; right: calc(-1 * var(--ds-space-40)); } }

.llamada { border: var(--ds-border-width-thin) solid #2b4566; }
.llamada::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#eef3f90d 1px, transparent 1px), linear-gradient(90deg, #eef3f90d 1px, transparent 1px); background-size: var(--mk-celda) var(--mk-celda); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); }
.llamada::after { content: ""; position: absolute; z-index: -1; width: var(--ds-space-96); height: var(--ds-space-96); right: calc(-1 * var(--ds-space-24)); bottom: calc(-1 * var(--ds-space-48)); border-radius: var(--ds-radius-full); background: #3fe0a0; opacity: .18; filter: blur(var(--ds-space-20)); }

/* Cinta de movimientos de ejemplo */
.cinta { overflow: hidden; border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-default); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cinta__pista { display: flex; width: max-content; }
.cinta ul { display: flex; gap: var(--ds-space-10); padding: var(--ds-space-3) var(--ds-space-5, 20px); padding-right: var(--ds-space-10); font-family: var(--mk-mono); font-size: var(--ds-typography-caption-font-size); white-space: nowrap; color: var(--ds-color-text-secondary); }
.cinta li b { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: var(--ds-space-2); }
.cinta__rotulo { display: inline-block; font-family: var(--mk-mono); font-size: var(--ds-typography-overline-font-size); letter-spacing: var(--ds-typography-overline-letter-spacing); text-transform: uppercase; color: var(--ds-color-text-secondary); }

/* Problemas */
.problema { gap: var(--ds-space-4); padding: var(--ds-space-8) var(--ds-space-6); }
.problema h3 { font-family: var(--mk-titulo); font-size: var(--ds-typography-heading-3-font-size); line-height: var(--ds-typography-heading-3-line-height); font-weight: 800; color: var(--ds-color-text-primary); }
.problema .cita { font-style: italic; }
.problema .solucion { padding-top: var(--ds-space-4); border-top: var(--ds-border-width-thin) dashed var(--ds-color-border-default); color: var(--ds-color-text-primary); }
.problema .solucion strong { color: var(--mk-deco-texto); }
.problema .num-p { font-family: var(--mk-mono); font-size: var(--ds-typography-overline-font-size); color: var(--ds-color-text-secondary); letter-spacing: var(--ds-typography-overline-letter-spacing); }

/* La cuenta de «Hoy puedes gastar» */
.calculo { display: grid; gap: var(--ds-space-10); align-items: center; }
@media (min-width: 1024px) { .calculo { grid-template-columns: 1fr 1.1fr; } }
.consola__fila .op { font-family: var(--mk-mono); color: var(--mk-deco-texto); margin-right: var(--ds-space-2); }
.consola__total { border-top-color: var(--mk-deco); }
.consola__total b { background-image: linear-gradient(90deg, var(--ds-color-accent-start), var(--ds-color-accent-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notas-calculo { display: grid; gap: var(--ds-space-2); font-size: var(--ds-typography-body-small-font-size); color: var(--ds-color-text-secondary); }

/* Funciones */
.funcion { gap: var(--ds-space-4); }
.funcion__cab { display: flex; align-items: center; gap: var(--ds-space-3); }
.funcion__cab h3 { font-family: var(--mk-titulo); font-size: var(--ds-typography-heading-4-font-size); line-height: var(--ds-typography-heading-4-line-height); font-weight: 700; color: var(--ds-color-text-primary); }
.funcion .vinetas li { color: var(--ds-color-text-secondary); }

/* Datos: tres capas */
.capas { display: grid; gap: var(--ds-space-4); margin-top: var(--ds-space-10); }
@media (min-width: 840px) { .capas { grid-template-columns: repeat(3, 1fr); } }
.capa h3 { font-family: var(--mk-titulo); font-size: var(--ds-typography-heading-4-font-size); font-weight: 700; color: var(--ds-color-text-primary); }

@media (prefers-reduced-motion: no-preference) {
  .cinta__pista { animation: cinta calc(var(--ds-motion-duration-indeterminate) * 45) linear infinite; }
  .cinta:hover .cinta__pista { animation-play-state: paused; }
}
@keyframes cinta { to { transform: translateX(-50%); } }