/*
 * Wapu Theme Design System · WTDS 1.0
 * Canonical storefront token runtime for Wapu Ecommerce Theme 7.5.13.
 *
 * Public tokens: --wtds-*
 * Legacy bridge: --ds-* mirrors the canonical token in the same scope.
 * Layout spacing follows the 8-point grid; 4px is the explicit micro token.
 * No page/feature rules belong in this file.
 */

:root{--wtds-ink: #000000;--ds-ink: var(--wtds-ink);--wtds-ink-2: rgba(60, 60, 67, .85);--ds-ink-2: var(--wtds-ink-2);--wtds-ink-3: rgba(60, 60, 67, .6);--ds-ink-3: var(--wtds-ink-3);--wtds-ink-4: rgba(60, 60, 67, .3);--ds-ink-4: var(--wtds-ink-4);--wtds-surface: #ffffff;--ds-surface: var(--wtds-surface);--wtds-surface-2: #f2f2f7;--ds-surface-2: var(--wtds-surface-2);--wtds-surface-3: #ffffff;--ds-surface-3: var(--wtds-surface-3);--wtds-surface-group: #f2f2f7;--ds-surface-group: var(--wtds-surface-group);--wtds-fill: rgba(120, 120, 128, .2);--ds-fill: var(--wtds-fill);--wtds-fill-2: rgba(120, 120, 128, .16);--ds-fill-2: var(--wtds-fill-2);--wtds-fill-3: rgba(118, 118, 128, .12);--ds-fill-3: var(--wtds-fill-3);--wtds-fill-4: rgba(116, 116, 128, .08);--ds-fill-4: var(--wtds-fill-4);--wtds-separator: rgba(60, 60, 67, .29);--ds-separator: var(--wtds-separator);--wtds-separator-soft: rgba(60, 60, 67, .18);--ds-separator-soft: var(--wtds-separator-soft);--wtds-separator-strong: rgba(0, 0, 0, .55);--ds-separator-strong: var(--wtds-separator-strong);--wtds-action: #000000;--ds-action: var(--wtds-action);--wtds-action-pressed: rgba(60, 60, 67, .85);--ds-action-pressed: var(--wtds-action-pressed);--wtds-action-soft: rgba(116, 116, 128, .08);--ds-action-soft: var(--wtds-action-soft);--wtds-action-ink: #ffffff;--ds-action-ink: var(--wtds-action-ink);--wtds-danger: #ff3b30;--ds-danger: var(--wtds-danger);--wtds-danger-soft: rgba(255, 59, 48, .12);--ds-danger-soft: var(--wtds-danger-soft);--wtds-danger-ink: #ffffff;--ds-danger-ink: var(--wtds-danger-ink);--wtds-success: #34c759;--ds-success: var(--wtds-success);--wtds-success-soft: rgba(52, 199, 89, .12);--ds-success-soft: var(--wtds-success-soft);--wtds-success-ink: #ffffff;--ds-success-ink: var(--wtds-success-ink);--wtds-warning: #ff9500;--ds-warning: var(--wtds-warning);--wtds-warning-soft: rgba(255, 149, 0, .12);--ds-warning-soft: var(--wtds-warning-soft);--wtds-warning-ink: #ffffff;--ds-warning-ink: var(--wtds-warning-ink);--wtds-info: #5856d6;--ds-info: var(--wtds-info);--wtds-info-soft: rgba(88, 86, 214, .12);--ds-info-soft: var(--wtds-info-soft);--wtds-info-ink: #ffffff;--ds-info-ink: var(--wtds-info-ink);--wtds-font-text: "Poppins", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;--ds-font-text: var(--wtds-font-text);--wtds-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;--ds-font-display: var(--wtds-font-display);--wtds-fw-regular: 400;--ds-fw-regular: var(--wtds-fw-regular);--wtds-fw-medium: 500;--ds-fw-medium: var(--wtds-fw-medium);--wtds-fw-semibold: 600;--ds-fw-semibold: var(--wtds-fw-semibold);--wtds-fw-bold: 700;--ds-fw-bold: var(--wtds-fw-bold);--wtds-fs-hero-display: clamp(1.625rem, 4.58vw + .552rem, 2.75rem);--ds-fs-hero-display: var(--wtds-fs-hero-display);--wtds-fs-brand-display: clamp(2.25rem, 1.527vw + 1.892rem, 2.625rem);--ds-fs-brand-display: var(--wtds-fs-brand-display);--wtds-fs-large-title: clamp(1.75rem, 1.527vw + 1.392rem, 2.125rem);--ds-fs-large-title: var(--wtds-fs-large-title);--wtds-fs-price-display: clamp(1.5rem, 1.527vw + 1.142rem, 1.875rem);--ds-fs-price-display: var(--wtds-fs-price-display);--wtds-fs-title-1: clamp(1.5rem, 1.018vw + 1.261rem, 1.75rem);--ds-fs-title-1: var(--wtds-fs-title-1);--wtds-fs-hero-medium: clamp(1.25rem, 1.527vw + .892rem, 1.625rem);--ds-fs-hero-medium: var(--wtds-fs-hero-medium);--wtds-fs-title-2: clamp(1.25rem, .509vw + 1.131rem, 1.375rem);--ds-fs-title-2: var(--wtds-fs-title-2);--wtds-fs-title-3: clamp(1.125rem, .509vw + 1.006rem, 1.25rem);--ds-fs-title-3: var(--wtds-fs-title-3);--wtds-fs-headline: 1.0625rem;--ds-fs-headline: var(--wtds-fs-headline);--wtds-fs-body: 1.0625rem;--ds-fs-body: var(--wtds-fs-body);--wtds-fs-callout: 1rem;--ds-fs-callout: var(--wtds-fs-callout);--wtds-fs-subhead: .9375rem;--ds-fs-subhead: var(--wtds-fs-subhead);--wtds-fs-footnote: .8125rem;--ds-fs-footnote: var(--wtds-fs-footnote);--wtds-fs-caption-1: .75rem;--ds-fs-caption-1: var(--wtds-fs-caption-1);--wtds-fs-caption-2: .6875rem;--ds-fs-caption-2: var(--wtds-fs-caption-2);--wtds-lh-tight: 1.2;--ds-lh-tight: var(--wtds-lh-tight);--wtds-lh-snug: 1.3;--ds-lh-snug: var(--wtds-lh-snug);--wtds-lh-base: 1.4;--ds-lh-base: var(--wtds-lh-base);--wtds-lh-relax: 1.55;--ds-lh-relax: var(--wtds-lh-relax);--wtds-ls-tighter: -.02em;--ds-ls-tighter: var(--wtds-ls-tighter);--wtds-ls-tight: -.01em;--ds-ls-tight: var(--wtds-ls-tight);--wtds-ls-normal: 0;--ds-ls-normal: var(--wtds-ls-normal);--wtds-ls-wide: .02em;--ds-ls-wide: var(--wtds-ls-wide);--wtds-s-0: 0;--ds-s-0: var(--wtds-s-0);--wtds-s-1: .5rem;--ds-s-1: var(--wtds-s-1);--wtds-s-2: 1rem;--ds-s-2: var(--wtds-s-2);--wtds-s-3: 1.5rem;--ds-s-3: var(--wtds-s-3);--wtds-s-4: 2rem;--ds-s-4: var(--wtds-s-4);--wtds-s-5: 2.5rem;--ds-s-5: var(--wtds-s-5);--wtds-s-6: 3rem;--ds-s-6: var(--wtds-s-6);--wtds-s-7: 4rem;--ds-s-7: var(--wtds-s-7);--wtds-s-8: 5rem;--ds-s-8: var(--wtds-s-8);--wtds-r-xs: .5rem;--ds-r-xs: var(--wtds-r-xs);--wtds-r-sm: .625rem;--ds-r-sm: var(--wtds-r-sm);--wtds-r-md: .875rem;--ds-r-md: var(--wtds-r-md);--wtds-r-lg: 1.25rem;--ds-r-lg: var(--wtds-r-lg);--wtds-r-xl: 1.75rem;--ds-r-xl: var(--wtds-r-xl);--wtds-r-pill: 999px;--ds-r-pill: var(--wtds-r-pill);--wtds-border-hairline: .5px;--ds-border-hairline: var(--wtds-border-hairline);--wtds-border-thin: 1px;--ds-border-thin: var(--wtds-border-thin);--wtds-border-thick: 2px;--ds-border-thick: var(--wtds-border-thick);--wtds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--ds-shadow-sm: var(--wtds-shadow-sm);--wtds-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--ds-shadow-md: var(--wtds-shadow-md);--wtds-shadow-lg: 0 16px 40px rgba(0, 0, 0, .12);--ds-shadow-lg: var(--wtds-shadow-lg);--wtds-shadow-focus: 0 0 0 2px #007aff;--ds-shadow-focus: var(--wtds-shadow-focus);--wtds-shadow-focus-danger: 0 0 0 2px var(--wtds-danger);--ds-shadow-focus-danger: var(--wtds-shadow-focus-danger);--wtds-blur-sm: blur(10px);--ds-blur-sm: var(--wtds-blur-sm);--wtds-blur-md: blur(20px);--ds-blur-md: var(--wtds-blur-md);--wtds-blur-lg: blur(40px);--ds-blur-lg: var(--wtds-blur-lg);--wtds-ease: cubic-bezier(.25, .46, .45, .94);--ds-ease: var(--wtds-ease);--wtds-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ds-ease-spring: var(--wtds-ease-spring);--wtds-ease-in: cubic-bezier(.4, 0, 1, 1);--ds-ease-in: var(--wtds-ease-in);--wtds-ease-out: cubic-bezier(0, 0, .2, 1);--ds-ease-out: var(--wtds-ease-out);--wtds-dur-fast: .15s;--ds-dur-fast: var(--wtds-dur-fast);--wtds-dur: .25s;--ds-dur: var(--wtds-dur);--wtds-dur-slow: .4s;--ds-dur-slow: var(--wtds-dur-slow);--wtds-z-base: 1;--ds-z-base: var(--wtds-z-base);--wtds-z-dropdown: 100;--ds-z-dropdown: var(--wtds-z-dropdown);--wtds-z-sticky: 200;--ds-z-sticky: var(--wtds-z-sticky);--wtds-z-overlay: 900;--ds-z-overlay: var(--wtds-z-overlay);--wtds-z-modal: 1000;--ds-z-modal: var(--wtds-z-modal);--wtds-z-toast: 1200;--ds-z-toast: var(--wtds-z-toast);--wtds-layer-base: 0;--th-z-base: var(--wtds-layer-base);--wtds-layer-raised: 10;--th-z-raised: var(--wtds-layer-raised);--wtds-layer-sticky: 100;--th-z-sticky: var(--wtds-layer-sticky);--wtds-layer-dropdown: 200;--th-z-dropdown: var(--wtds-layer-dropdown);--wtds-layer-fixed-bar: 700;--th-z-fixed-bar: var(--wtds-layer-fixed-bar);--wtds-layer-overlay-content: 800;--th-z-overlay-content: var(--wtds-layer-overlay-content);--wtds-layer-sheet: 900;--th-z-sheet: var(--wtds-layer-sheet);--wtds-layer-modal: 1000;--th-z-modal: var(--wtds-layer-modal);--wtds-layer-modal-secondary: 1100;--th-z-modal-secondary: var(--wtds-layer-modal-secondary);--wtds-layer-toast: 1200;--th-z-toast: var(--wtds-layer-toast);--wtds-layer-tooltip: 1300;--th-z-tooltip: var(--wtds-layer-tooltip);--wtds-layer-critical: 9000;--th-z-critical: var(--wtds-layer-critical);--wtds-layer-skip-link: 9999;--th-z-skip-link: var(--wtds-layer-skip-link);--wtds-bp-sm: 480px;--ds-bp-sm: var(--wtds-bp-sm);--wtds-bp-md: 768px;--ds-bp-md: var(--wtds-bp-md);--wtds-bp-lg: 1024px;--ds-bp-lg: var(--wtds-bp-lg);--wtds-bp-xl: 1440px;--ds-bp-xl: var(--wtds-bp-xl);--wtds-backdrop: rgba(0,0,0,.32);--ds-backdrop: var(--wtds-backdrop);--wtds-shadow-xl: 0 24px 56px rgba(17,24,39,.16), 0 8px 16px rgba(17,24,39,.06);--ds-shadow-xl: var(--wtds-shadow-xl);--wtds-glass-bg: rgba(255,255,255,.86);--ds-glass-bg: var(--wtds-glass-bg);--wtds-glass-bg-strong: rgba(255,255,255,.94);--ds-glass-bg-strong: var(--wtds-glass-bg-strong);--wtds-img-gradient: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 100%);--ds-img-gradient: var(--wtds-img-gradient);--wtds-hover-faint: rgba(0,0,0,.02);--ds-hover-faint: var(--wtds-hover-faint);--wtds-hover-soft: rgba(0,0,0,.04);--ds-hover-soft: var(--wtds-hover-soft);--wtds-hover-med: rgba(0,0,0,.08);--ds-hover-med: var(--wtds-hover-med);color-scheme:light}
.wapu-dark,.wapu-dark :root{--wtds-ink: #ffffff;--ds-ink: var(--wtds-ink);--wtds-ink-2: rgba(235, 235, 245, .85);--ds-ink-2: var(--wtds-ink-2);--wtds-ink-3: rgba(235, 235, 245, .6);--ds-ink-3: var(--wtds-ink-3);--wtds-ink-4: rgba(235, 235, 245, .3);--ds-ink-4: var(--wtds-ink-4);--wtds-surface: #000000;--ds-surface: var(--wtds-surface);--wtds-surface-2: #1c1c1e;--ds-surface-2: var(--wtds-surface-2);--wtds-surface-3: #2c2c2e;--ds-surface-3: var(--wtds-surface-3);--wtds-surface-group: #000000;--ds-surface-group: var(--wtds-surface-group);--wtds-fill: rgba(120, 120, 128, .36);--ds-fill: var(--wtds-fill);--wtds-fill-2: rgba(120, 120, 128, .32);--ds-fill-2: var(--wtds-fill-2);--wtds-fill-3: rgba(118, 118, 128, .24);--ds-fill-3: var(--wtds-fill-3);--wtds-fill-4: rgba(118, 118, 128, .18);--ds-fill-4: var(--wtds-fill-4);--wtds-separator: rgba(84, 84, 88, .65);--ds-separator: var(--wtds-separator);--wtds-separator-soft: rgba(84, 84, 88, .4);--ds-separator-soft: var(--wtds-separator-soft);--wtds-separator-strong: rgba(84, 84, 88, .85);--ds-separator-strong: var(--wtds-separator-strong);--wtds-action: #ffffff;--ds-action: var(--wtds-action);--wtds-action-pressed: rgba(235, 235, 245, .85);--ds-action-pressed: var(--wtds-action-pressed);--wtds-action-soft: rgba(120, 120, 128, .2);--ds-action-soft: var(--wtds-action-soft);--wtds-action-ink: #000000;--ds-action-ink: var(--wtds-action-ink);--wtds-danger: #ff453a;--ds-danger: var(--wtds-danger);--wtds-danger-soft: rgba(255, 69, 58, .18);--ds-danger-soft: var(--wtds-danger-soft);--wtds-danger-ink: #ffffff;--ds-danger-ink: var(--wtds-danger-ink);--wtds-success: #30d158;--ds-success: var(--wtds-success);--wtds-success-soft: rgba(48, 209, 88, .18);--ds-success-soft: var(--wtds-success-soft);--wtds-success-ink: #ffffff;--ds-success-ink: var(--wtds-success-ink);--wtds-warning: #ff9f0a;--ds-warning: var(--wtds-warning);--wtds-warning-soft: rgba(255, 159, 10, .18);--ds-warning-soft: var(--wtds-warning-soft);--wtds-warning-ink: #ffffff;--ds-warning-ink: var(--wtds-warning-ink);--wtds-info: #5e5ce6;--ds-info: var(--wtds-info);--wtds-info-soft: rgba(94, 92, 230, .18);--ds-info-soft: var(--wtds-info-soft);--wtds-info-ink: #ffffff;--ds-info-ink: var(--wtds-info-ink);--wtds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--ds-shadow-sm: var(--wtds-shadow-sm);--wtds-shadow-md: 0 4px 12px rgba(0, 0, 0, .6);--ds-shadow-md: var(--wtds-shadow-md);--wtds-shadow-lg: 0 16px 40px rgba(0, 0, 0, .8);--ds-shadow-lg: var(--wtds-shadow-lg);--wtds-shadow-focus: 0 0 0 2px #0a84ff;--ds-shadow-focus: var(--wtds-shadow-focus);--wtds-shadow-focus-danger: 0 0 0 2px var(--wtds-danger);--ds-shadow-focus-danger: var(--wtds-shadow-focus-danger);--wtds-backdrop: rgba(0,0,0,.5);--ds-backdrop: var(--wtds-backdrop);--wtds-shadow-xl: 0 24px 56px rgba(0,0,0,.6), 0 8px 16px rgba(0,0,0,.4);--ds-shadow-xl: var(--wtds-shadow-xl);--wtds-glass-bg: rgba(28,28,30,.86);--ds-glass-bg: var(--wtds-glass-bg);--wtds-glass-bg-strong: rgba(28,28,30,.94);--ds-glass-bg-strong: var(--wtds-glass-bg-strong);--wtds-img-gradient: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 100%);--ds-img-gradient: var(--wtds-img-gradient);--wtds-hover-faint: rgba(255,255,255,.04);--ds-hover-faint: var(--wtds-hover-faint);--wtds-hover-soft: rgba(255,255,255,.08);--ds-hover-soft: var(--wtds-hover-soft);--wtds-hover-med: rgba(255,255,255,.12);--ds-hover-med: var(--wtds-hover-med);color-scheme:dark}
:root {
	/* Elevation · premium silent (W6 PR-2 + W7A PR-2 pattern canonized) */
	--wtds-shadow-xs: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .04);--ds-shadow-xs: var(--wtds-shadow-xs);

	/* Motion · duration scale */
	--wtds-motion-fast: 100ms;--ds-motion-fast: var(--wtds-motion-fast);
	--wtds-motion-normal: 150ms;--ds-motion-normal: var(--wtds-motion-normal);
	--wtds-motion-slow: 250ms;--ds-motion-slow: var(--wtds-motion-slow);
	--wtds-motion-slower: 400ms;--ds-motion-slower: var(--wtds-motion-slower);

	/* Motion · easing canon */
	--wtds-motion-easing-default: cubic-bezier(.4, 0, .2, 1);--ds-motion-easing-default: var(--wtds-motion-easing-default);
	--wtds-motion-easing-out: cubic-bezier(0, 0, .2, 1);--ds-motion-easing-out: var(--wtds-motion-easing-out);
	--wtds-motion-easing-in: cubic-bezier(.4, 0, 1, 1);--ds-motion-easing-in: var(--wtds-motion-easing-in);

	/* Hover · darken amount (filter-based · for canon button/card hover) */
	--wtds-hover-darken-amount: 8%;--ds-hover-darken-amount: var(--wtds-hover-darken-amount);

	/* Action color tokens · resolved via fallback chain */
	--wtds-action-hover: var(--wtds-action);--ds-action-hover: var(--wtds-action-hover);
	--wtds-action-ink: #fff;--ds-action-ink: var(--wtds-action-ink);
}

/* Compatibility/foundation aliases retained from the pre-WTDS V2 layer. */

/*
 * WTDS compatibility foundation
 *
 * Capa de contratos visuales para el equipo de desarrollo. Debe cargarse
 * antes de main.css: main.css conserva el look actual y este archivo aporta
 * aliases estables, tokens faltantes y defaults para integraciones WapuOS.
 *
 * No agregar reglas de pagina aqui. Solo tokens, aliases y contratos base.
 */

:root {
	/* Legacy bridge usado por plugins y drops. Playground puede sobrescribirlos inline. */
	--color-primary: var(--wtds-ink, #000000);
	--color-secondary: var(--wtds-surface, #ffffff);
	--color-accent: var(--wtds-action, #000000);
	--color-muted: var(--wtds-ink-3, #737373);

	--wp-primary: var(--color-primary);
	--wp-primary-dark: var(--color-primary);
	--wp-secondary: var(--color-secondary);
	--wp-text: var(--wtds-ink, #111111);
	--wp-text-muted: var(--wtds-ink-3, #737373);
	--wp-text-inverse: var(--wtds-surface, #ffffff);
	--wp-surface: var(--wtds-surface, #ffffff);
	--wp-surface-alt: var(--wtds-surface-2, #f2f2f7);
	--wp-border: var(--wtds-separator-soft, rgba(60, 60, 67, .18));

	/* Font aliases historicos. */
	--font-sans: var(--wtds-font-text, "Poppins", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif);
	--font-display: var(--wtds-font-display, "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif);
	--wp-font-body: var(--font-sans);
	--wp-font-heading: var(--font-display);

	/* Pesos oficiales. El theme actual usa 400-700; V2 documenta la escala completa. */
	--wtds-fw-thin: 100;--ds-fw-thin: var(--wtds-fw-thin);
	--wtds-fw-light: 300;--ds-fw-light: var(--wtds-fw-light);
	--wtds-fw-regular: 400;--ds-fw-regular: var(--wtds-fw-regular);
	--wtds-fw-medium: 500;--ds-fw-medium: var(--wtds-fw-medium);
	--wtds-fw-semibold: 600;--ds-fw-semibold: var(--wtds-fw-semibold);
	--wtds-fw-bold: 700;--ds-fw-bold: var(--wtds-fw-bold);
	--wtds-fw-extrabold: 800;--ds-fw-extrabold: var(--wtds-fw-extrabold);
	--wtds-fw-black: 800;--ds-fw-black: var(--wtds-fw-black);

	/* Spacing. V2 usa grid 8px y permite 4px solo como micro-token explicito. */
	--wtds-s-half: .25rem;--ds-s-half: var(--wtds-s-half);
	--wtds-s-micro: .25rem;--ds-s-micro: var(--wtds-s-micro);

	/* Alias para CSS que ya usa el nombre largo. */
	--wtds-lh-relaxed: var(--wtds-lh-relax, 1.55);--ds-lh-relaxed: var(--wtds-lh-relaxed);

	/* Roles semanticos canonicos para futuras pantallas internas. */
	--th-color-primary: var(--ws-primary, var(--wp-primary, var(--color-primary)));
	--th-color-secondary: var(--wp-secondary, var(--color-secondary));
	--th-color-accent: var(--color-accent);
	--th-color-background: var(--wtds-surface, #ffffff);
	--th-color-surface: var(--wtds-surface-3, #ffffff);
	--th-color-surface-soft: var(--wtds-surface-2, #f2f2f7);
	--th-color-border: var(--wp-border);
	--th-color-text: var(--wp-text);
	--th-color-text-muted: var(--wp-text-muted);
	--th-color-success: var(--wtds-success, #34c759);
	--th-color-warning: var(--wtds-warning, #ff9500);
	--th-color-error: var(--wtds-danger, #ff3b30);
	--th-color-info: var(--wtds-info, #5856d6);

	/* Contrato de spacing para docs y componentes nuevos. */
	--th-space-0: 0;
	--th-space-025: var(--wtds-s-half);
	--th-space-050: var(--wtds-s-1, .5rem);
	--th-space-100: var(--wtds-s-2, 1rem);
	--th-space-150: var(--wtds-s-3, 1.5rem);
	--th-space-200: var(--wtds-s-4, 2rem);
	--th-space-250: var(--wtds-s-5, 2.5rem);
	--th-space-300: var(--wtds-s-6, 3rem);
	--th-space-400: var(--wtds-s-7, 4rem);
	--th-space-500: var(--wtds-s-8, 5rem);
}

.wapu-dark {
	--wp-text-inverse: #000000;
}