/*
 * Wapu Theme Design System · WTDS 1.0
 * Canonical storefront token runtime for WapuOS - Ecommerce Theme 7.7.0.
 *
 * Public tokens: --wtds-*
 * Layout spacing follows the 8-point grid; .25rem is the explicit micro token.
 * No page/feature rules belong in this file.
 */

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

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

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

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

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

/* 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;
	--wtds-fw-light: 300;
	--wtds-fw-regular: 400;
	--wtds-fw-medium: 500;
	--wtds-fw-semibold: 500;
	--wtds-fw-bold: 500;
	--wtds-fw-extrabold: 500;
	--wtds-fw-black: 500;

	/* Spacing. V2 usa grid .5rem y permite .25rem solo como micro-token explicito. */
	--wtds-s-half: .25rem;
	--wtds-s-micro: .25rem;

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

	/* Roles semanticos canonicos para futuras pantallas internas. */
	
	
	
	
	
	
	
	
	
	
	
	
	

	/* Contrato de spacing para docs y componentes nuevos. */
	
	
	
	
	
	
	
	
	
	
}

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

/* R20.5 DSH2 — public semantic aliases consumed by storefront feature plugins.
 * These aliases are WTDS-owned; plugins may consume them but must not redefine
 * WOS/PGDS primitives on the public storefront. */
:root{
  
  
  
  
  
  
  
  --wtds-success-pressed:#248a3d;
  
}
.wapu-dark{--wtds-success-pressed:#30d158}

:root{--wtds-swatch-size:1.5rem;--wtds-swatch-gap:.25rem;}
/* T5 · Canonical operational/identity aliases live in wtds-foundations-2.css. */
/* T5 · Physical compatibility paint retired.
 * Storefront consumers use semantic WTDS roles; literal paint remains
 * centralized here only as named design-system primitives.
 */

/* WTDS semantic paint bridge · T3.6F4 */
:root {
  --wtds-surface-translucent: rgba(255, 255, 255, .96);
  --wtds-overlay-strong: rgba(0, 0, 0, .48);
  --wtds-shadow-color-faint: rgba(17, 24, 39, .05);
  --wtds-shadow-color-soft: rgba(17, 24, 39, .10);
  --wtds-shadow-color-medium: rgba(17, 24, 39, .16);
  --wtds-shadow-color-strong: rgba(17, 24, 39, .22);
  --wtds-shadow-color-heavy: rgba(15, 23, 42, .30);
  --wtds-focus-ring-color: color-mix(in srgb, var(--wtds-focus) 50%, transparent);
  --wtds-danger-ring-soft: color-mix(in srgb, var(--wtds-danger) 16%, transparent);
  --wtds-success-outline: color-mix(in srgb, var(--wtds-success) 36%, transparent);
  --wtds-warning-outline: color-mix(in srgb, var(--wtds-warning) 36%, transparent);
  --wtds-danger-outline: color-mix(in srgb, var(--wtds-danger) 36%, transparent);
  --wtds-info-outline: color-mix(in srgb, var(--wtds-info) 36%, transparent);
  --wtds-shimmer-highlight: rgba(255, 255, 255, .55);
  --wtds-provider-google: #4285f4;
  /* T5 neutral/media roles. */
  --wtds-surface-inverse: #111111;
  --wtds-on-surface-inverse: #ffffff;
  --wtds-on-image: #ffffff;
  --wtds-on-image-muted: rgba(255, 255, 255, .72);
  --wtds-on-image-subtle: rgba(255, 255, 255, .50);
  --wtds-scrim-faint: rgba(0, 0, 0, .06);
  --wtds-scrim-soft: rgba(0, 0, 0, .12);
  --wtds-scrim: rgba(0, 0, 0, .24);
  --wtds-scrim-strong: rgba(0, 0, 0, .48);
  --wtds-scrim-heavy: rgba(0, 0, 0, .64);
  --wtds-glass-faint: rgba(255, 255, 255, .18);
  --wtds-glass-soft: rgba(255, 255, 255, .64);
  --wtds-glass: rgba(255, 255, 255, .86);
  --wtds-warning-pressed: #c26a00;
  --wtds-info-pressed: #3634a3;

}
.wapu-dark {
  --wtds-surface-translucent: rgba(28, 28, 30, .96);
  --wtds-overlay-strong: rgba(0, 0, 0, .64);
  --wtds-shadow-color-faint: rgba(0, 0, 0, .28);
  --wtds-shadow-color-soft: rgba(0, 0, 0, .38);
  --wtds-shadow-color-medium: rgba(0, 0, 0, .50);
  --wtds-shadow-color-strong: rgba(0, 0, 0, .62);
  --wtds-shadow-color-heavy: rgba(0, 0, 0, .72);
  --wtds-shimmer-highlight: rgba(255, 255, 255, .12);
  --wtds-surface-inverse: #f5f5f7;
  --wtds-on-surface-inverse: #111111;
  --wtds-glass-faint: rgba(28, 28, 30, .18);
  --wtds-glass-soft: rgba(28, 28, 30, .64);
  --wtds-glass: rgba(28, 28, 30, .86);
  --wtds-warning-pressed: #ffb340;
  --wtds-info-pressed: #7d7aff;

}