/* ==========================================================
   VARIABLES / DESIGN TOKENS
   Cambiá acá colores, tipografías y espaciados de todo el sitio.
   ========================================================== */
:root {
  /* --- Marca --- */
  --gold-500: #bd9337;           /* dorado principal */
  --gold-200: #f9e28a;           /* dorado claro */
  --gold-700: #8a6620;           /* dorado oscuro (derivado para sombras) */
  --gold-gradient: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-200) 50%, var(--gold-500) 100%);

  /* --- Neutros (fondo oscuro, como el logo) --- */
  --bg: #0b0b0c;
  --bg-alt: #121214;
  --surface: #17171a;
  --surface-2: #1f1f23;
  --border: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(189, 147, 55, 0.35);

  --text: #f4f1ea;
  --text-muted: #a9a59c;
  --text-dim: #6f6c66;

  /* --- Estados --- */
  --success: #3ecf8e;
  --error: #ff6b6b;
  --whatsapp: #25d366;

  /* --- Tipografía --- */
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-h3: 1.375rem;
  --fs-h2: clamp(2.2rem, 5vw, 3.75rem);
  --fs-h1: clamp(2.9rem, 7.5vw, 6rem);

  /* --- Espaciado / layout --- */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(72px, 11vw, 140px);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  /* --- Efectos --- */
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 10px 40px -10px rgba(189, 147, 55, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}