/* ==========================================================================
   VARIABLES.CSS
   Tokens de diseño del sitio (New House Constructora).
   Cambiar un valor acá lo actualiza en todo el sitio: es el único lugar
   donde deberían tocarse colores, tipografías y espaciados globales.
   ========================================================================== */

:root {
  /* ---- Color: extraído y ampliado a partir del logo -------------------- */
  --color-navy: #1e3a5c;         /* Azul oscuro principal (marca) */
  --color-navy-ink: #14212f;     /* Casi negro azulado, para texto largo */
  --color-blue: #4a73a8;         /* Azul medio (acento, degradés) */
  --color-blue-light: #7fa1c9;   /* Azul claro (detalles, hover) */
  --color-slate: #7c8896;        /* Gris pizarra (texto secundario) */
  --color-bg: #f7f8fa;           /* Fondo general */
  --color-surface: #ffffff;      /* Tarjetas y superficies elevadas */
  --color-line: #e2e6ea;         /* Bordes y divisores sutiles */
  --color-line-strong: #c7cfd7;  /* Bordes con más presencia */

  /* Estados */
  --color-whatsapp: #25d366;

  /* ---- Tipografía --------------------------------------------------------
     Display: Space Grotesk -> geométrica, de trazo firme, remite a
     planos técnicos / arquitectura (coherente con el isologo).
     Texto:   Public Sans   -> pensada para claridad en documentos
     técnicos, buena legibilidad en párrafos largos.
  -------------------------------------------------------------------------- */
  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "Public Sans", "Segoe UI", sans-serif;

  --fs-hero: clamp(2.25rem, 4.2vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* ---- Espaciado (escala base 8px) -------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Corte diagonal característico del isologo (letras N/H). Se usa con
     clip-path en tarjetas y contenedores destacados para que la marca
     se sienta en la estructura, no sólo en el logo. */
  --cut: 18px;

  --radius-sm: 4px;
  --shadow-soft: 0 12px 28px -18px rgba(20, 33, 47, 0.35);

  --transition-fast: 160ms ease;
  --transition-base: 260ms ease;
}