:root {
  color-scheme: light;

  /* Marca */
  --a-brand: #01a8de;
  --a-brand-50: #eaf8fd;
  --a-brand-100: #cdeffa;
  --a-brand-200: #9fdff4;
  --a-brand-700: #007bb0;
  --a-brand-800: #00658f;
  --a-on-brand: #062b3d;
  --a-on-primary: #ffffff;

  --a-offer: #f21364;
  --a-offer-50: #fff0f5;
  --a-offer-100: #ffd9e6;
  --a-offer-600: #e0115c;
  --a-offer-700: #c40d4f;

  --a-deal: #c6f432;
  --a-on-deal: #1a2e05;

  --a-success: #11804a;
  --a-success-50: #e8f7ef;
  --a-whatsapp: #0f7a40;
  --a-whatsapp-700: #0b6434;

  /* Colores propios de las redes (solo los cuadros "Síguenos en" del footer). */
  --a-facebook: #1877f2;
  --a-instagram-1: #fdc468;
  --a-instagram-2: #fa7e1e;
  --a-instagram-3: #d62976;
  --a-instagram-4: #962fbf;
  --a-instagram-5: #4f5bd5;

  /* Estado "atención" (ámbar): pendiente, aviso, fuerza media de clave; estrellas. */
  --a-warning: #d08a00;
  --a-warning-50: #fff8e6;
  --a-warning-100: #fff1cc;
  --a-warning-200: #f6dc9b;
  --a-warning-700: #6b4200;
  --a-star: #b7791f;

  /*
   * Velos (siempre con transparencia vía color-mix): fondo de cajones y
   * modales, degradado sobre fotos del hero y panel del login.
   */
  --a-scrim: #080f1a;
  --a-scrim-hero: #061621;
  --a-scrim-brand: #003c58;

  /* Superficies y tinta */
  --a-bg: #ffffff;
  --a-surface: #ffffff;
  --a-surface-2: #f4f7fa;
  --a-surface-3: #e9eef4;
  --a-line: #e1e7ee;
  --a-line-strong: #c9d3de;
  --a-ink: #0f172a;
  --a-ink-2: #334155;
  --a-muted: #5b6577;
  --a-inverse: #0b1f2c;
  --a-on-inverse: #e8f1f7;
  --a-on-inverse-2: #b9c9d6;
  --a-on-inverse-3: #9fb3c2;
  --a-inverse-accent: #6fd5f4;

  
  --a-on-fill: #ffffff;
  --a-paper: #ffffff;
  --a-paper-ink: #0f172a;

  /* Tipo: Onest autoalojada en /fonts (@font-face en base.css) */
  --a-font: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --a-text-micro: 0.6875rem;
  --a-text-xs: 0.75rem;
  --a-text-sm: 0.8125rem;
  --a-text-md: 0.9375rem;
  --a-text-base: 1rem;
  --a-text-lg: 1.125rem;
  --a-text-numeral: 1.5rem;
  --a-text-xl: 1.375rem;
  --a-text-2xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --a-text-3xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --a-text-4xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  /* Solo el título de los slides de categoría del carrusel principal. */
  --a-text-hero: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  --a-text-price-lg: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  --a-leading-tight: 1.15;
  --a-leading: 1.5;

  /* Espacio (escala de 4px) */
  --a-space-1: 0.25rem;
  --a-space-2: 0.5rem;
  --a-space-3: 0.75rem;
  --a-space-4: 1rem;
  --a-space-5: 1.25rem;
  --a-space-6: 1.5rem;
  --a-space-8: 2rem;
  --a-space-10: 2.5rem;
  --a-space-12: 3rem;
  --a-space-16: 4rem;
  --a-gutter: 1rem;
  --a-wrap: 1320px;
  --a-section-gap: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);

  /* Radio */
  --a-radius-sm: 6px;
  --a-radius: 10px;
  --a-radius-lg: 16px;
  --a-radius-xl: 22px;
  --a-radius-pill: 999px;

  /* Sombra: siempre con desplazamiento y desenfoque suave */
  --a-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --a-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.16), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --a-shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, 0.28);

  /* Capas */
  --a-z-header: 40;
  --a-z-rail-ui: 5;
  --a-z-drawer: 90;

  /* Movimiento (ver emil-design-eng: ease-out fuerte, < 300ms en UI) */
  --a-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --a-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --a-dur-press: 140ms;
  --a-dur: 200ms;
  --a-dur-drawer: 280ms;

  --a-focus: 0 0 0 3px var(--a-bg), 0 0 0 5px var(--a-brand-700);
}

@media (min-width: 640px) {
  :root { --a-gutter: 1.5rem; }
}

@media (min-width: 1024px) {
  :root { --a-gutter: 2rem; }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --a-brand-50: #0c2a3b;
  --a-brand-100: #0f3a52;
  --a-brand-200: #155a7c;
  --a-brand-700: #3cc8f4;
  --a-brand-800: #8adcf7;
  --a-on-primary: #04202e;

  --a-offer-50: #3a0f22;
  --a-offer-100: #561733;
  --a-offer-700: #ff77a8;

  --a-success: #4fd18b;
  --a-success-50: #0e2b1d;
  --a-warning-50: #2c2208;
  --a-warning-100: #3a2a06;
  --a-warning-200: #5a4310;
  --a-warning-700: #ffd27a;

  --a-bg: #0a101c;
  --a-surface: #121c2f;
  --a-surface-2: #172339;
  --a-surface-3: #1e2c46;
  --a-line: #24324d;
  --a-line-strong: #37496d;
  --a-ink: #eef3fb;
  --a-ink-2: #c9d4e5;
  --a-muted: #9eadc4;
  --a-inverse: #060a12;

  --a-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --a-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --a-shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, 0.8);
  --a-focus: 0 0 0 3px var(--a-bg), 0 0 0 5px var(--a-brand-700);
}

:root[data-theme="dark"] .a-only-light,
:root:not([data-theme="dark"]) .a-only-dark { display: none !important; }


:root[data-theme="dark"] [style*="--acc-ink-d"] { --acc-ink: var(--acc-ink-d) !important; }
:root[data-theme="dark"] [style*="--brand-ink-d"] { --brand-ink: var(--brand-ink-d) !important; }