/* ─── VARIABLES GLOBALES — ESTUDIO LANDA ────────────────────────────────── */

:root {
  /* ── Paleta de color ──────────────────────────────────────────────────── */
  /* Fondo: blanco con tinte verde apenas perceptible */
  --color-bg:        #F2F5F2;
  /* Blanco puro como elemento de diseño */
  --color-white:     #FFFFFF;
  /* Superficie elevada (cards, paneles) */
  --color-surface:   #FFFFFF;
  /* Oscuro casi negro — del logo */
  --color-dark:      #1A1C1A;
  /* Texto secundario */
  --color-mid:       #5A5D5A;
  /* Líneas y bordes */
  --color-border:    rgba(26,28,26,0.1);
  /* Verde salvia — acento principal */
  --color-sage:      #4A7358;
  --color-sage-lt:   #7FAF90;
  --color-sage-bg:   rgba(74,115,88,0.08);
  /* Azul acero — acento secundario */
  --color-steel:     #3D6080;
  --color-steel-lt:  #7AAAC8;
  /* Acento activo (cambiar entre sage / steel) */
  --color-accent:    var(--color-sage);

  /* ── Tipografía ────────────────────────────────────────────────────────── */
  /* Hanken Grotesk = HK Grotesk (Google Fonts) */
  --font-main:    'Hanken Grotesk', sans-serif;
  /* Cormorant — solo para cursivas editoriales en títulos grandes */
  --font-serif:   'Cormorant', serif;

  /* Escala tipográfica */
  --size-2xs:  0.65rem;   /*  10px */
  --size-xs:   0.75rem;   /*  12px */
  --size-sm:   0.875rem;  /*  14px */
  --size-base: 1rem;      /*  16px */
  --size-md:   1.125rem;  /*  18px */
  --size-lg:   1.5rem;    /*  24px */
  --size-xl:   2rem;      /*  32px */
  --size-2xl:  3rem;      /*  48px */
  --size-3xl:  4.5rem;    /*  72px */
  --size-hero: clamp(3.5rem, 9vw, 8.5rem);
  --size-display: clamp(2rem, 5vw, 4.5rem);

  /* Pesos tipográficos */
  --w-thin:   200;
  --w-light:  300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semi:   600;
  --w-bold:   700;
  --w-black:  800;

  /* ── Espaciado ─────────────────────────────────────────────────────────── */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  2rem;
  --sp-lg:  4rem;
  --sp-xl:  7rem;
  --sp-2xl: 11rem;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --max-w:  1440px;
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --nav-h:  96px;

  /* ── Movimiento ────────────────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  0.2s;
  --dur-med:   0.5s;
  --dur-slow:  0.85s;
}