/* ============================================
   ME — Medicina y Cirugía Estética
   Design System · Variables globales
   ============================================ */

:root {

  /* ---- Color ---- */
  --color-black:      #0B0B0B;
  --color-black-soft:  #161616;
  --color-gold:       #C6A46A;
  --color-gold-dark:   #A5875A;
  --color-white:       #FFFFFF;
  --color-grey-50:      #F7F7F5;
  --color-grey-200:    #E4E2DD;
  --color-grey-400:    #A9A79F;
  --color-text:         #1A1A1A;
  --color-text-muted:  #5C5C5C;

  /* ---- Tipografía ---- */
  --font-heading: 'Marcellus', serif;
  --font-body:    'Poppins', sans-serif;

  --fs-h1:      clamp(2.5rem, 5vw, 5rem);
  --fs-h2:      clamp(2rem, 3.5vw, 3.25rem);
  --fs-h3:      clamp(1.4rem, 2vw, 1.9rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-heading: 1.15;
  --lh-body:    1.7;

  --ls-heading: -0.02em;
  --ls-eyebrow: 0.2em;

  /* ---- Espaciado ---- */
  --space-section: clamp(6rem, 12vw, 12rem);
  --space-block:   clamp(2rem, 5vw, 4rem);
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;

  --container-max:    1440px;
  --container-narrow: 720px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* ---- Bordes ---- */
  --radius-sm: 2px;
  --border-hairline: 1px solid var(--color-grey-200);

  /* ---- Animación ---- */
  --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 300ms;
  --duration-slow: 900ms;
}