/* Design tokens — Propuesta A "Momentum" (hifi, valores finales).
   Fuente de verdad: .claude/skills/cuponera-design-system/SKILL.md
   Usar SIEMPRE las variables; nunca hex sueltos en las páginas. */

:root {
  /* Color */
  --ink: #0B0B0C;
  --paper: #FFFFFF;
  --accent: #1F5AE0;
  --accent-soft: #5B8DEF;
  --text-body: #4A4A52;
  --text-muted: #8A8A90;
  --text-inverse-soft: #A9A9B2;
  --surface: #F4F4F6;
  --line: #E4E4E7;
  --line-dark: #1E1E21;
  --line-dark-2: #2A2A2E;
  --row-dark: #1A1A1D;
  --field-dark: #141416;
  --error-bg: #FEF3F2;
  --error-border: #D92D20;
  --error-text: #912018;

  /* Badges de nivel */
  --tier-diamante-bg: #0B0B0C;   --tier-diamante-ink: #FFFFFF;
  --tier-diamante-dark-bg: #25252A; --tier-diamante-dark-ink: #C9C9CF;
  --tier-gold-bg: #F0E3BE;       --tier-gold-ink: #5A4A14;
  --tier-gold-dark-bg: #3A3218;  --tier-gold-dark-ink: #E8D28A;
  --tier-silver-bg: #EFEFF2;     --tier-silver-ink: #4A4A52;

  /* Estados de cuponera (sobre oscuro) */
  --estado-activa-bg: #0E2F1C;    --estado-activa-ink: #6FDB92;
  --estado-inactiva-bg: #25252A;  --estado-inactiva-ink: #C9C9CF;
  --estado-anulada-bg: #3A1414;   --estado-anulada-ink: #F3A0A0;

  /* Semáforo auditoría */
  --alerta-info: #1F5AE0;
  --alerta-critica: #E06A6A;
  --alerta-ok: #6FDB92;

  /* Extensiones Fase 2 — valores presentes en el prototipo Momentum */
  --line-mid: #D4D4D8;        /* borde de campos secundarios y píldoras inactivas */
  --bar-rest: #C9C9CF;        /* barra de ranking fuera del top-3 */
  --hero-paragraph: #D5D5DA;  /* párrafo sobre la foto del hero */
  --disabled-bg: #EFEFF2;     /* botón deshabilitado "Ya canjeado" */
  --text-deep: #2A2A30;       /* texto de compromisos de transparencia */
  --bar-rest-dark: #3A3A40;   /* barra de ranking fuera del top-3 sobre fondo ink (admin) */

  /* Layout */
  --container-max: 1760px;
  --container-pad: 40px;
  --section-gap: 120px;
  --nav-height: 72px;

  /* Tipografía */
  --font: 'Archivo', system-ui, sans-serif;
}

/* Reset mínimo + reglas globales de la propuesta */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

/* Números siempre tabulares */
.num { font-variant-numeric: tabular-nums; }

/* Tipos base */
.display-hero {
  font-size: clamp(56px, 8.4vw, 148px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: .86;
  text-transform: uppercase;
}
.display-section {
  font-size: clamp(40px, 4.6vw, 76px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: .92;
  text-transform: uppercase;
}
.h1-vista {
  font-size: clamp(38px, 4.4vw, 68px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: .95;
  text-transform: uppercase;
}
.h2-seccion { font-size: 44px; font-weight: 900; letter-spacing: -0.035em; }
.cifra {
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 900;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.parrafo-destacado { font-size: 20px; color: var(--text-body); text-wrap: pretty; }
.micro-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Botones — únicos elementos redondeados junto a badges */
.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 19px 34px;
  font: 800 13px/1 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #1C51CA; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #232326; }
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 12px;
  font: 800 11px/1.4 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Input grande de la propuesta: solo borde inferior */
.input-grande {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--ink);
  font: 900 38px/1.2 var(--font);
  padding: 8px 0;
  background: transparent;
  outline: none;
}

/* Focus visible obligatorio */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Mensaje de error */
.error-msg {
  border-left: 3px solid var(--error-border);
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px 16px;
}