/* ============================================================================
   variables.css — Design tokens
   Única fuente de verdad para colores, tipografía, espaciados y tiempos.
   Cambiar un valor aquí se propaga a todo el sitio (DRY).
   ========================================================================== */

:root {
  /* --- Paleta de marca (extraída del diseño) ------------------------------ */
  --cream: #f1ece4;          /* Fondo principal, cálido */
  --cream-2: #e8e2d8;        /* Fondo alterno / secciones */
  --sand: #ded5c7;           /* Bordes y superficies sutiles */
  --gold: #e9b84c;           /* Color de marca: CTAs y acentos */
  --gold-strong: #dfa838;    /* Hover de dorado */
  --gold-soft: #f5e4b0;      /* Resaltados suaves (ej. "recorrido virtual") */
  --taupe: #7e7880;          /* Elementos secundarios (pills de menú) */
  --taupe-dark: #6a646c;
  --ink: #443b36;            /* Títulos, texto de alto contraste */
  --ink-soft: #5f574f;       /* Texto de cuerpo */
  --white: #ffffff;

  /* --- Superposiciones sobre imágenes ------------------------------------- */
  --overlay-strong: rgba(38, 31, 26, 0.55);
  --overlay-soft: linear-gradient(180deg, rgba(38, 31, 26, 0.15) 0%, rgba(38, 31, 26, 0.55) 100%);

  /* --- Tipografía --------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Escala tipográfica fluida (clamp: min, preferido, max) */
  --fs-hero: clamp(2.6rem, 6vw, 5rem);
  --fs-h2: clamp(1.9rem, 4vw, 3.1rem);
  --fs-h3: clamp(1.3rem, 2.4vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;

  /* --- Espaciado ---------------------------------------------------------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6.5rem;         /* Padding vertical de secciones */
  --container: 1200px;        /* Ancho máximo de contenido */
  --container-wide: 1400px;

  /* --- Formas y sombras --------------------------------------------------- */
  --radius-pill: 999px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 4px 16px rgba(45, 38, 33, 0.08);
  --shadow-md: 0 12px 40px rgba(45, 38, 33, 0.16);
  --shadow-lg: 0 24px 60px rgba(45, 38, 33, 0.28);

  /* --- Movimiento --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-mid: 400ms;
  --dur-slow: 650ms;

  /* Alto del header. Debe dejar aire alrededor del logo (60px en reposo).
     Se usa además para compensar el header fijo al saltar a un ancla y para
     el padding superior de la página de postulación. */
  --header-h: 84px;

  /* Botón flotante de WhatsApp (abajo a la derecha). Se declara acá porque las
     notificaciones emergentes se apilan justo encima y necesitan estas medidas
     para no taparlo: si cambia el botón, los avisos se reubican solos. */
  --fab-size: 58px;
  --fab-offset: clamp(1rem, 3vw, 1.75rem);
}