/* Enchufá — tokens v1.0.0 (09/10/2026). Cargar fuentes:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Unbounded:wght@600;700&display=swap" rel="stylesheet"> */
:root {
  color-scheme: dark;
  --color-bg: #0B0D12;
  --color-surface-1: #12161D;
  --color-surface-2: #1A1F28;
  --color-surface-3: #232A35;
  --color-border: rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.14);
  --color-text: #F2F4F7;
  --color-text-2: #A9B1BE;
  --color-text-3: #7C8594;
  --color-accent: #FFD60A;
  --color-accent-hover: #FFE14D;
  --color-accent-press: #E6BF00;
  --color-on-accent: #0B0D12;
  --color-accent-on-light: #8A6D00;
  --color-accent-soft: rgba(255,214,10,0.10);
  --color-success: #3DD68C;
  --color-warning: #FFB547;
  --color-danger: #FF6B6B;
  --color-success-on-light: #0E7A4B;
  --color-warning-on-light: #8F5200;
  --color-danger-on-light: #B42828;
  --color-whatsapp: #25D366;
  --color-on-whatsapp: #0B0D12;
  --color-light-bg: #FFFFFF;
  --color-light-surface: #F3F4F7;
  --color-light-text: #0B0D12;
  --color-light-text-2: #4A5260;
  --color-light-border: rgba(11,13,18,0.12);
  --color-cat-cargadores-ev: #FFD60A;
  --color-cat-impresion-3d: #FF8C42;
  --color-cat-domotica: #2ED3C0;
  --color-cat-robotica: #A78BFA;
  --color-cat-drones: #4CC2FF;
  --color-cat-movilidad: #5BE38A;

  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --type-display-size: 56px;
  --type-display-line: 1.08;
  --type-display-weight: 700;
  --type-h1-size: 40px;
  --type-h1-line: 1.12;
  --type-h1-weight: 700;
  --type-h2-size: 30px;
  --type-h2-line: 1.18;
  --type-h2-weight: 600;
  --type-h3-size: 22px;
  --type-h3-line: 1.25;
  --type-h3-weight: 600;
  --type-title-size: 18px;
  --type-title-line: 1.3;
  --type-title-weight: 600;
  --type-body-lg-size: 18px;
  --type-body-lg-line: 1.55;
  --type-body-lg-weight: 400;
  --type-body-size: 16px;
  --type-body-line: 1.55;
  --type-body-weight: 400;
  --type-small-size: 14px;
  --type-small-line: 1.45;
  --type-small-weight: 500;
  --type-caption-size: 12px;
  --type-caption-line: 1.35;
  --type-caption-weight: 600;
  --type-price-size: 28px;
  --type-price-line: 1.1;
  --type-price-weight: 700;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.45);
  --shadow-focus: 0 0 0 3px rgba(255,214,10,0.45);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 60%);
  --gradient-hero: radial-gradient(60% 80% at 75% 50%, rgba(255,214,10,0.16) 0%, rgba(255,214,10,0) 70%);

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-toast: 500;

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --motion-easing: cubic-bezier(.2,.7,.2,1);
}

/* Tarjeta base: gradiente sutil + borde translúcido */
.e-card { background: var(--gradient-card), var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
/* Tinte por categoría: setear data-cat en el contenedor */
[data-cat="cargadores-ev"]{--cat: var(--color-cat-cargadores-ev)} [data-cat="impresion-3d"]{--cat: var(--color-cat-impresion-3d)} [data-cat="domotica"]{--cat: var(--color-cat-domotica)} [data-cat="robotica"]{--cat: var(--color-cat-robotica)} [data-cat="drones"]{--cat: var(--color-cat-drones)} [data-cat="movilidad"]{--cat: var(--color-cat-movilidad)}
.e-price { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }