/* ===========================================================
   JuntoCompra — Design tokens
   Extraídos del diseño original (DISEÑO/WEB.ai, FICHA *.ai)
   =========================================================== */
:root{

  /* ── Color: extraído píxel a píxel del .ai ────────────── */
  --ink:            #242444;   /* navy corporativo */
  --ink-80:         #3b3b58;
  --ink-60:         #5d5a70;   /* texto secundario */
  --ink-40:         #8a8698;   /* texto terciario / labels */
  --ink-15:         #cfcdd6;

  --red:            #D8385C;   /* primario */
  --red-hover:      #c22e4f;
  --red-soft:       #f7e4e9;   /* fondo fila activa */
  --red-glow:       #d1375a;   /* resplandor del hero */

  --bg:             #EEECEC;   /* fondo de página claro */
  --surface:        #EFEBE7;   /* tarjeta / panel cálido */
  --surface-2:      #E7E3DE;   /* tarjeta de producto */
  --track:          #D3CEC7;   /* pista vacía de las barras */
  --white:          #ffffff;

  /* Cristal (glassmorphism) sobre fondo oscuro */
  /* Medido sobre el .ai: las tarjetas son blanco al 24% y los
     botones/píldoras blanco al 32%. */
  --glass:          rgba(255,255,255,.24);
  --glass-strong:   rgba(255,255,255,.32);
  --glass-border:   rgba(255,255,255,.26);
  --glass-blur:     18px;

  /* ── Tipografía ───────────────────────────────────────── */
  /* El diseño original usa Coolvetica (licencia comercial de
     Typodermic). Onest es la sustituta libre más cercana.
     Para volver a Coolvetica basta con cambiar esta línea. */
  --font: 'Onest', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Coolvetica va muy apretada: compensamos con tracking */
  --track-display:  -.035em;
  --track-heading:  -.025em;
  --track-body:     -.006em;
  --track-label:     .06em;

  --fs-hero:        clamp(2.4rem, 5.4vw, 3.9rem);
  --fs-h2:          clamp(1.9rem, 3.6vw, 2.7rem);
  --fs-h3:          1.25rem;
  --fs-lead:        1rem;
  --fs-body:        .9375rem;
  --fs-sm:          .8125rem;
  --fs-xs:          .6875rem;

  /* ── Espaciado ────────────────────────────────────────── */
  /* Medida de lectura alineada con la rejilla de tarjetas. Vivía en
     .market-head; se sube aquí para que la reutilicen otros bloques. */
  --medida-cifras:  38.95rem;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 80px;
  --s11: 112px;

  --section-y:      clamp(64px, 8vw, 112px);
  --container:      1160px;

  /* Alto real de la cabecera: logo (relación 2.142) + relleno vertical.
     Lo necesita el hero para reservar sitio, porque la cabecera va fija. */
  --header-h: max(72px, calc(clamp(112px,10.3vw,132px) / 2.142 + 2 * clamp(10px,1.2vw,15px)));
  --gutter:         clamp(18px, 4vw, 40px);

  /* ── Radios ───────────────────────────────────────────── */
  --r-xs:  8px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ── Sombras ──────────────────────────────────────────── */
  --sh-card:  0 1px 2px rgba(36,36,68,.04), 0 8px 24px rgba(36,36,68,.06);
  --sh-lift:  0 2px 6px rgba(36,36,68,.06), 0 18px 40px rgba(36,36,68,.12);
  --sh-panel: -18px 0 60px rgba(36,36,68,.22);

  /* ── Movimiento ───────────────────────────────────────── */
  --ease: cubic-bezier(.22,.61,.36,1);
  /* Las duraciones van sueltas porque el panel lateral las necesita
     también como retardo, y ahí no vale el atajo con la curva. */
  --dur-fast:  .16s;
  --dur:       .26s;
  --dur-panel: .30s;
  --t-fast: var(--dur-fast) var(--ease);
  --t:      var(--dur) var(--ease);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}