/* ==========================================================================
   Tokens de diseño — VS · Venta solo al contado
   Paleta: negro, blanco y grises cálidos + un único acento (verde oscuro).
   Cambiar aquí afecta a todo el sitio.
   ========================================================================== */

:root {
  /* --- Color: neutros cálidos (evitan la frialdad de un gris azulado) --- */
  --ink-900: #1A1918;   /* Titulares, texto principal */
  --ink-700: #46443F;   /* Texto secundario */
  --ink-500: #6E6B64;   /* Texto de apoyo, metadatos */
  --ink-300: #9B9790;   /* Placeholders, texto deshabilitado */
  --line:    #E2DFD8;   /* Bordes y separadores */
  --line-strong: #CFCBC2;

  --paper:      #FFFFFF;
  --paper-warm: #F7F5F1;  /* Fondo alterno de secciones */
  --paper-deep: #EFECE6;  /* Fondo de imágenes / skeleton */

  /* --- Acento único: verde oscuro. Serio, asociado a tierra y propiedad,
         con buen contraste sobre blanco (AAA en texto normal). --- */
  --accent:        #2F4A3C;
  --accent-hover:  #24382D;
  --accent-soft:   #EDF1EE;
  --accent-line:   #C7D3CB;

  --focus: #2F4A3C;

  /* --- Tipografía --- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --step--1: 0.8125rem;  /* 13px — etiquetas */
  --step-0:  1rem;       /* 16px — cuerpo */
  --step-1:  1.125rem;   /* 18px — cuerpo destacado */
  --step-2:  1.375rem;   /* 22px */
  --step-3:  1.75rem;    /* 28px */
  --step-4:  2.25rem;    /* 36px */
  --step-5:  clamp(2.25rem, 1.5rem + 3vw, 3.5rem);   /* Títulos de sección */
  --step-6:  clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);/* Hero */

  --tracking-caps: 0.16em;

  /* --- Espaciado --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Medidas --- */
  --container: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;

  /* --- Radios: casi rectos. La elegancia aquí viene de la línea, no del redondeo --- */
  --radius-sm: 2px;
  --radius-md: 3px;

  /* --- Sombras: mínimas y frías-neutras --- */
  --shadow-sm: 0 1px 2px rgba(26, 25, 24, 0.05);
  --shadow-md: 0 8px 24px -12px rgba(26, 25, 24, 0.22);
  --shadow-lg: 0 24px 60px -28px rgba(26, 25, 24, 0.35);

  /* --- Movimiento: discreto --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}