/* ==========================================================================
   Perspirex — Design tokens (design.md §2)
   Todos los valores son finales. No inventar colores ni tamaños aquí.
   ========================================================================== */

:root {
  /* --- 2.1 Color: base de marca ------------------------------------------ */
  --px-blue-deep: #0A2463;
  --px-blue: #499ADB;
  --px-blue-mid: #2E7DBE;
  --px-navy: #06163F;
  --px-blue-tint: #EAF3FB;
  --px-blue-tint-2: #F4F9FD;
  --px-blue-border: #CFE3F4;
  --px-white: #FFFFFF;

  /* --- 2.2 Color: neutrales ---------------------------------------------- */
  --px-text: #0A2463;
  --px-text-body: #5B6573;
  --px-text-soft: #6A7281;
  --px-text-strong: #3F4854;
  --px-muted: #9AA3B0;
  --px-border: #E6ECF3;
  --px-border-soft: #EEF2F7;
  --px-border-input: #D6E3F0;
  --px-border-btn: #D6DEE8;
  --px-border-card: #E0E9F2;

  /* Colores de apoyo usados en la referencia */
  --px-ink-nav: #3A4658;
  --px-blue-soft: #7FB8E4;
  --px-blue-pale: #E8F1FA;
  --px-footer-text: #B7C4DC;
  --px-footer-muted: #6E7FA0;
  --px-footer-label: #5E7098;
  --px-footer-desc: #8FA0BF;
  --px-on-navy: #A9BEDC;
  --px-inkafarma: #43AA00;
  --px-mifarma: #FF6700;
  --px-green: #7AB23E;

  /* --- 2.4 Gradientes de sistema ------------------------------------------ */
  --px-grad-cta: linear-gradient(135deg, #499ADB, #2E7DBE);
  --px-grad-soft: linear-gradient(180deg, #EAF3FB 0%, #FFFFFF 100%);
  --px-grad-section: linear-gradient(180deg, #F4F9FD, #EAF3FB);
  /* Gradientes de la home (pedido del cliente 2026-08-28, intensidad subida el
     mismo día): cada fondo plano arranca en su propio color y profundiza dentro
     de la escala azul existente — sin colores nuevos: los pasos intermedios
     salen de color-mix() sobre los propios tokens. */
  --px-grad-blanco: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, #EAF3FB 75%, #CFE3F4) 100%);
  --px-grad-tinte: linear-gradient(180deg, #EAF3FB 0%, color-mix(in srgb, #CFE3F4 60%, #7FB8E4) 100%);
  --px-grad-tinte-2: linear-gradient(180deg, #F4F9FD 0%, color-mix(in srgb, #CFE3F4 75%, #7FB8E4) 100%);
  --px-grad-azul: linear-gradient(180deg, color-mix(in srgb, #0A2463 72%, #499ADB) 0%, #06163F 100%);
  --px-grad-navy: linear-gradient(180deg, #06163F 0%, color-mix(in srgb, #0A2463 72%, #499ADB) 100%);
  --px-grad-severity: linear-gradient(90deg, #95CE56, #499ADB, #0A2463);
  /* La barra de severidad de la referencia arranca en #BFE08F */
  --px-grad-severity-track: linear-gradient(90deg, #BFE08F, #499ADB 52%, #0A2463);

  /* --- 2.6 Espaciado y layout --------------------------------------------- */
  --px-container: min(100%, 1440px);
  --px-container-md: min(100%, 1240px);
  --px-container-sm: min(100%, 1120px);
  --px-gutter: clamp(20px, 4.5vw, 64px);
  --px-section-y: clamp(72px, 8.8vw, 120px);
  --px-section-y-lg: clamp(74px, 9vw, 126px);
  --px-section-y-sm: clamp(70px, 8.5vw, 118px);
  --px-gap: clamp(32px, 5vw, 64px);

  /* --- 2.7 Radios, bordes, sombras ----------------------------------------- */
  --px-r-sm: 8px;
  --px-r: 14px;
  --px-r-md: 16px;
  --px-r-lg: 20px;
  --px-r-pill: 50px;
  --px-shadow-cta: 0 8px 24px rgba(73, 154, 219, .42);
  --px-shadow-cta-hover: 0 14px 34px rgba(73, 154, 219, .55);
  --px-shadow-card: 0 22px 54px rgba(10, 36, 99, .12);
  --px-shadow-menu: 0 22px 48px rgba(10, 36, 99, .20);

  /* --- 2.5 Tipografía ------------------------------------------------------ */
  --px-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --px-fs-hero-h1: clamp(44px, 7.4vw, 94px);
  --px-fs-product-h1: clamp(40px, 5vw, 66px);
  --px-fs-h2: clamp(30px, 3.8vw, 46px);
  --px-fs-h2-sm: clamp(28px, 3.4vw, 42px);
  --px-fs-h2-xs: clamp(24px, 2.6vw, 32px);
  --px-fs-lead: clamp(16.5px, 1.6vw, 21px);
  --px-fs-stat: clamp(30px, 3.4vw, 42px);

  /* --- Motion -------------------------------------------------------------- */
  --px-ease: cubic-bezier(.22, 1, .36, 1);

  /* --- 2.3 Tema por SKU: valores por defecto (Original) --------------------- */
  --sku-accent: #499ADB;
  --sku-accent-soft: #8FC4EA;
  --sku-deep: #0A2463;
  --sku-tint: #EAF3FB;
  --sku-tint-border: #CFE3F4;
  --sku-dot: #499ADB;
  --sku-hero-grad: radial-gradient(circle at 32% 26%, #8FC4EA 0%, #499ADB 52%, #2E6FA8 100%);
  --sku-glow: rgba(73, 154, 219, .36);
}

/* --- 2.3 Temas por SKU (clase en <body>) ---------------------------------- */

.theme-comfort {
  --sku-accent: #6FA52F;
  --sku-accent-soft: #AEDB6B;
  --sku-deep: #2E5410;
  --sku-tint: #EFF7E6;
  --sku-tint-border: #D7EBBE;
  --sku-dot: #95CE56;
  --sku-hero-grad: radial-gradient(circle at 32% 26%, #C6E89A 0%, #95CE56 54%, #6FA52F 100%);
  --sku-glow: rgba(111, 165, 47, .34);
}

.theme-original {
  --sku-accent: #499ADB;
  --sku-accent-soft: #8FC4EA;
  --sku-deep: #0A2463;
  --sku-tint: #EAF3FB;
  --sku-tint-border: #CFE3F4;
  --sku-dot: #499ADB;
  --sku-hero-grad: radial-gradient(circle at 32% 26%, #8FC4EA 0%, #499ADB 52%, #2E6FA8 100%);
  --sku-glow: rgba(73, 154, 219, .36);
}

.theme-strong {
  --sku-accent: #1E4FA0;
  --sku-accent-soft: #6E9AD6;
  --sku-deep: #0A2463;
  --sku-tint: #E9EEF8;
  --sku-tint-border: #CBD7EC;
  --sku-dot: #0A2463;
  --sku-hero-grad: radial-gradient(circle at 32% 26%, #3A6FB5 0%, #13357E 50%, #0A2463 100%);
  --sku-glow: rgba(10, 36, 99, .40);
}

.theme-locion {
  --sku-accent: #2E7DBE;
  --sku-accent-soft: #7FB8E4;
  --sku-deep: #1F5C8F;
  --sku-tint: #EAF3FB;
  --sku-tint-border: #CFE3F4;
  --sku-dot: #2E7DBE;
  --sku-hero-grad: radial-gradient(circle at 32% 26%, #7FB8E4 0%, #2E7DBE 52%, #1F5C8F 100%);
  --sku-glow: rgba(46, 125, 190, .36);
}