/* =========================================================
   Design tokens — Firmas Electrónicas Ecuador
   ========================================================= */
:root {
  /* ---------- Color: marca ---------- */
  --color-brand-deep: #20116e;      /* azul violeta oscuro (header) */
  --color-brand-blue: #1c51ff;      /* azul eléctrico */
  --color-brand-blue-2: #295bff;    /* azul eléctrico (fin del degradado) */

  /* ---------- Color: acento amarillo ---------- */
  --color-yellow-light: #fed727;
  --color-yellow: #f1d009;          /* amarillo principal */
  --color-yellow-dark: #f1ba09;     /* amarillo secundario */

  /* ---------- Color: secciones oscuras ---------- */
  --color-navy-deep: #061e3e;       /* fondo de la franja de beneficios */
  --color-gold: #f4b500;            /* titulares sobre fondo oscuro */

  /* ---------- Color: sección Tipos de firma ---------- */
  --color-navy-title: #171168;      /* azul marino de titulares */
  --color-electric: #245bff;        /* azul eléctrico */
  --color-blue-accent: #087cff;     /* azul destacado */
  --color-violet: #6e56f8;          /* acento de persona jurídica */
  --color-text-soft: #7d8aa8;       /* texto secundario */
  --color-border-soft: #e1e6f2;     /* bordes */
  --surface-cool: #f8faff;          /* fondo general frío */
  --surface-info: #f0f3ff;          /* fondo informativo */
  --color-urgent: #ffd900;          /* amarillo "urgente" */
  --color-whatsapp-green: #20c978;

  /* ---------- Color: apoyo ---------- */
  --color-whatsapp: #28ce53;
  --color-white: #ffffff;
  --color-ink: #080808;             /* texto oscuro */
  --color-nav-text: #c0c1e9;        /* texto del menú */
  --color-page-bg: #ffffff;

  /* ---------- Color: secciones claras ---------- */
  --color-ink-muted: #55566e;       /* texto secundario sobre blanco */
  --surface-soft: #f4f6ff;          /* fondo suave con tinte de marca */
  --surface-card: #ffffff;
  --border-subtle: rgba(32, 17, 110, 0.12);
  --border-strong: rgba(32, 17, 110, 0.22);

  /* ---------- Superficies translúcidas ---------- */
  --surface-ghost: rgba(255, 255, 255, 0.06);
  --surface-ghost-hover: rgba(255, 255, 255, 0.12);
  --border-ghost: rgba(255, 255, 255, 0.25);
  --border-ghost-strong: rgba(255, 255, 255, 0.4);
  --divider-header: rgba(255, 255, 255, 0.08);
  --overlay-scrim: rgba(8, 8, 8, 0.5);

  /* ---------- Degradados ---------- */
  --gradient-promo: linear-gradient(
    90deg,
    var(--color-brand-blue) 0%,
    var(--color-brand-blue-2) 100%
  );
  --gradient-yellow: linear-gradient(
    135deg,
    var(--color-yellow-light) 0%,
    var(--color-yellow) 55%,
    var(--color-yellow-dark) 100%
  );

  /* ---------- Tipografía ---------- */
  --font-base: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xs: 0.75rem;     /* 12px — promo bar */
  --fs-sm: 0.8125rem;   /* 13px */
  --fs-base: 0.875rem;  /* 14px — nav y botones */
  --fs-md: 1rem;        /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 2rem;       /* 32px */
  --fs-display: clamp(1.9rem, 1.15rem + 2.4vw, 3.05rem);
  --fs-price: clamp(1.75rem, 1.3rem + 1.4vw, 2.35rem);

  --lh-tight: 1.2;
  --lh-base: 1.5;

  /* ---------- Espaciado ---------- */
  --space-3xs: 0.25rem;  /* 4px  */
  --space-2xs: 0.375rem; /* 6px  */
  --space-xs: 0.5rem;    /* 8px  */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-padding: 24px;
  --promo-height: 28px;
  --promo-slide-duration: 600ms;
  --navbar-height: 66px;
  --logo-height: 52px;      /* nunca debe superar --navbar-height */
  --header-height: calc(var(--promo-height) + var(--navbar-height));

  /* ---------- Radios ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-header: 0 6px 24px rgba(8, 8, 8, 0.14);
  --shadow-yellow: 0 4px 14px rgba(241, 208, 9, 0.32);
  --shadow-yellow-hover: 0 8px 20px rgba(241, 208, 9, 0.42);
  --shadow-panel: 0 18px 40px rgba(8, 8, 8, 0.28);
  --shadow-card: 0 2px 4px rgba(32, 17, 110, 0.04), 0 12px 28px rgba(32, 17, 110, 0.09);
  --shadow-card-hover: 0 4px 8px rgba(32, 17, 110, 0.06), 0 20px 40px rgba(32, 17, 110, 0.14);
  --shadow-chip: 0 8px 24px rgba(32, 17, 110, 0.16);

  /* ---------- Alturas de control ---------- */
  --control-height: 40px;

  /* ---------- Transiciones ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;

  /* ---------- Foco accesible ---------- */
  --focus-ring: 2px solid var(--color-yellow);
  --focus-offset: 2px;

  /* ---------- Capas ---------- */
  --z-header: 100;
  --z-overlay: 90;
}