/* ============================================================
   CRÉCIMA — Design tokens
   Valores medidos sobre el frame "Home — Desktop 1440" del
   archivo de Figma. Todo el CSS consume estas variables.
   ============================================================ */

:root {
  /* --- Escala violeta --- */
  --violet-50:  #e8e7eb;
  --violet-100: #b7b5c0;
  --violet-200: #9591a2;
  --violet-300: #645e77;
  --violet-400: #463f5d;
  --violet-500: #180f34;
  --violet-600: #160e2f;
  --violet-700: #110b25;
  --violet-800: #0d081d;
  --violet-900: #0a0616;

  /* --- Neutros --- */
  --neutral-50:  #fbfbfc;
  --neutral-100: #f4f3f6;
  --neutral-200: #eeeef2;
  --neutral-300: #e7e6ec;
  --neutral-400: #e2e1e9;
  --neutral-500: #dbd9e3;
  --neutral-600: #c7c5cf;
  --neutral-700: #9b9aa1;
  --neutral-800: #78777d;
  --neutral-900: #5c5b5f;

  /* --- Marca --- */
  --brand:       #7c00f4;
  --brand-deep:  #6a4ce0;
  --brand-light: #a97bff;
  --brand-link:  #6663f6;   /* violeta del texto "Un ecosistema completo…" */

  /* --- Fondos de sección (medidos del render) --- */
  --bg-hero:      #180f34;
  --bg-light:     #f8f6ff;   /* intro + servicios */
  --bg-lavender:  #e8eaf7;   /* cultura + footer */
  --bg-dark:      #0a0614;   /* proyectos */
  --bg-navy:      #180f34;   /* marcas */

  /* --- Colores por servicio (medidos de cada tarjeta) --- */
  --srv-consultoria: #8e98a8;
  --srv-diseno:      #6a4ce0;
  --srv-infra:       #267bfc;
  --srv-seo:         #180f34;
  --srv-growth:      #f57600;

  /* --- Texto --- */
  --text:        #180f34;
  --text-soft:   #6b6b80;
  --text-invert: #ffffff;
  --text-invert-soft: rgba(255, 255, 255, 0.72);

  /* --- Gradientes --- */
  --grad-btn:  linear-gradient(180deg, #9a6cff, #6a4ce0);
  /* Fondo del bloque tiendanube, medido del frame actualizado.
     Muchas paradas en vez de dos: es lo que hace que el pasaje
     del blanco al azul no muestre borde (técnica de Ayana). */
  --grad-tn-base: #f8f6ff;
  --grad-tn: linear-gradient(180deg,
    #f8f6ff 0%,  #e4eafa 2%,  #dce5f8 4%,  #d4e1f8 6%,
    #cbdbf6 8%,  #c0d5f4 10%, #a8c5f0 14%, #8ab2eb 18%,
    #7ca9e7 22%, #6da0e5 26%, #5e97e3 30%, #4e8ddf 35%,
    #4d8bdf 55%, #4884da 80%, #407cd6 100%
  );
  --grad-blob: radial-gradient(circle, #6a4ce0 0%, rgba(106,76,224,0.55) 42%, rgba(232,234,247,0) 72%);

  /* --- Tipografía --- */
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida, calibrada al diseño de 1440 */
  --fs-hero:     clamp(2.25rem, 3.9vw, 3.5rem);   /* 56px @1440 */
  --fs-h2:       clamp(1.9rem, 3.05vw, 2.75rem);  /* 44px */
  --fs-h3:       clamp(1.45rem, 2.36vw, 2.125rem);/* 34px */
  --fs-proyecto: clamp(2rem, 3.33vw, 3rem);       /* 48px */
  --fs-intro:    clamp(1.6rem, 2.78vw, 2.5rem);   /* 40px */
  --fs-lead:     clamp(1.05rem, 1.25vw, 1.125rem);/* 18px */
  --fs-body:     1rem;
  --fs-small:    0.875rem;

  --lh-tight: 1.14;
  --lh-snug:  1.28;
  --lh-body:  1.55;

  /* --- Espaciado --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 7vw, 6.5rem);
  --space-4xl: clamp(5.5rem, 10vw, 9rem);

  /* --- Layout ---
     El diseño usa dos anchos distintos según la sección. */
  --container:      1168px;  /* servicios, intro, hero */
  --container-wide: 1312px;  /* grilla de proyectos */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Radios --- */
  --radius-card:  24px;
  --radius-panel: 48px;   /* esquinas superiores de las secciones */
  --radius-img:   16px;
  --radius-pill:  999px;

  /* --- Motion --- */
  --dur-fast: 0.25s;
  --dur-base: 0.5s;
  --dur-slow: 0.9s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
}