/* =====================================================================
   gig.mx Fase 1 · Tokens de diseño (XD GIG_V1.2, lienzo 1920 px)
   ERS sección 4. Todas las medidas de componentes usan var(--gx-u).
   ===================================================================== */
@font-face { font-family: "Polymath"; src: url("../fonts/polymath-regular.woff2") format("woff2"), url("../fonts/polymath-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Polymath"; src: url("../fonts/polymath-medium.woff2") format("woff2"), url("../fonts/polymath-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Colores (4.1) */
  --gx-purple: #25175C;
  --gx-purple-rgb: 37, 23, 92;
  --gx-ink: #1F1A33;
  --gx-green: #21C73B;
  --gx-bg: #FAFAFA;
  --gx-surface: #F7F7FA;
  --gx-surface-rgb: 247, 247, 250;
  --gx-white: #FFFFFF;
  --gx-grey-100: #F2F2F2;
  --gx-map-off: #EDEDF3;
  --gx-map-dim: #B5B4B9;
  --gx-line: rgba(31, 26, 51, .20);
  --gx-status-preventa: #DDB039;
  --gx-status-preventa-bg: rgba(221, 176, 57, .20);
  --gx-status-activo: #17932A;
  --gx-status-activo-bg: rgba(23, 147, 42, .20);
  --gx-status-proximamente: #223BC4;
  --gx-status-proximamente-bg: rgba(34, 59, 196, .20);
  --gx-error: #FF4D4D;
  --gx-error-text: #D81212;
  --gx-warning: #E8892F;

  /* Opacidades de texto morado (4.1) */
  --gx-t-96: rgba(var(--gx-purple-rgb), .96);
  --gx-t-85: rgba(var(--gx-purple-rgb), .85);
  --gx-t-80: rgba(var(--gx-purple-rgb), .80);
  --gx-t-70: rgba(var(--gx-purple-rgb), .70);
  --gx-t-60: rgba(var(--gx-purple-rgb), .64); /* XD: 60%; .64 para contraste AA (4.8:1) */
  --gx-t-50: rgba(var(--gx-purple-rgb), .50);
  --gx-t-40: rgba(var(--gx-purple-rgb), .40);
  --gx-l-95: rgba(var(--gx-surface-rgb), .95);
  --gx-l-60: rgba(var(--gx-surface-rgb), .60);
  --gx-l-50: rgba(var(--gx-surface-rgb), .50);
  --gx-l-40: rgba(var(--gx-surface-rgb), .40);
  --gx-l-30: rgba(var(--gx-surface-rgb), .30);
  --gx-l-10: rgba(var(--gx-surface-rgb), .10);

  /* Sombras y efectos (4.3) */
  --gx-shadow-card: 0 3px 6px rgba(37, 23, 92, .10);
  --gx-shadow-pill: 0 0 2px rgba(31, 26, 51, .45);
  --gx-gradient-card: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, .80) 100%);

  /* Escala: 1 unidad = 1 px del lienzo de 1920 (4.4) */
  --gx-u: calc(100vw / 1920);
  --gx-max: 1920px;

  /* Radios (4.3) */
  --gx-r-pill: calc(var(--gx-u) * 30);
  --gx-r-xl: calc(var(--gx-u) * 45);
  --gx-r-lg: calc(var(--gx-u) * 35);
  --gx-r-md: calc(var(--gx-u) * 30);
  --gx-r-card: calc(var(--gx-u) * 25);
  --gx-r-img: calc(var(--gx-u) * 22);
  --gx-r-input: calc(var(--gx-u) * 10);

  /* Tipografía (4.2) */
  --gx-font: "Polymath", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gx-fs-display-xl: max(44px, calc(var(--gx-u) * 130));
  --gx-fs-display-l: max(44px, calc(var(--gx-u) * 120));
  --gx-fs-display-m: max(38px, calc(var(--gx-u) * 100));
  --gx-fs-h2: max(30px, calc(var(--gx-u) * 60));
  --gx-fs-h3: max(28px, calc(var(--gx-u) * 50));
  --gx-fs-num: max(22px, calc(var(--gx-u) * 40));
  --gx-fs-h4: max(22px, calc(var(--gx-u) * 35));
  --gx-fs-lead: max(18px, calc(var(--gx-u) * 28));
  --gx-fs-input: max(16px, calc(var(--gx-u) * 25));
  --gx-fs-body-l: max(16px, calc(var(--gx-u) * 22));
  --gx-fs-body: max(15px, calc(var(--gx-u) * 20));
  --gx-fs-small: max(14px, calc(var(--gx-u) * 18));
  --gx-fs-eyebrow: max(14px, calc(var(--gx-u) * 17));

  /* Movimiento (4.5) */
  --gx-ease-in-out: cubic-bezier(.42, 0, .58, 1);
  --gx-ease-out: cubic-bezier(0, 0, .58, 1);
  --gx-snap: cubic-bezier(.2, .9, .3, 1);
  --gx-reveal: cubic-bezier(.2, .7, .2, 1);
  --gx-d-btn: .8s;
  --gx-d-arrow: .4s;
  --gx-d-map: .5s;
  --gx-d-slide: 1.2s;
  --gx-d-credit: 1.3s;
  --gx-d-page: .4s;
  --gx-d-filter: .3s;
  --gx-d-reveal: .6s;

  /* Layout */
  --gx-header-h: calc(var(--gx-u) * 140);
  --gx-pad-x: calc(var(--gx-u) * 100);
  --gx-pad-x-sm: calc(var(--gx-u) * 80);
}
@media (min-width: 1921px) { :root { --gx-u: 1px; } }
@media (max-width: 1279px) { :root { --gx-u: calc(1280px / 1920); --gx-pad-x: 40px; --gx-pad-x-sm: 40px; } }