/* ============================================================
   MAZA ENTERPRISE HOLDINGS — Design Tokens
   "Proyección 2036": blanco cálido-premium, redondeado, atemporal.
   Lenguaje Jobs / Ive / Chiat\Day. Cero dependencias de red.
   ============================================================ */

/* ---- Fuentes self-hosted (woff2 local, sin CDN) ---- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/space-grotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/space-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/inter-300.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}

:root {
  /* ---- Superficies (blanco cálido) ---- */
  --canvas:    #f6f3ec;   /* fondo base, marfil cálido */
  --paper:     #fffefb;   /* tarjetas / superficies elevadas */
  --mist:      #efeae0;   /* hover suave, separación tonal */
  --veil:      #faf8f2;   /* secciones alternas */

  /* ---- Tinta (negro cálido, nada de #000 puro salvo hero contraste) ---- */
  --ink:       #16150f;   /* titulares, texto fuerte */
  --slate:     #5e5c52;   /* texto cuerpo */
  --smoke:     #9a978c;   /* texto terciario, captions */
  --hairline:  #e7e2d6;   /* bordes finísimos */

  /* ---- Acentos (moderación máxima) ---- */
  --blue:      #1d4ed8;   /* interactivo: links, foco, CTA */
  --blue-deep: #163c85;   /* hover de azul */
  --gold:      #c9a23d;   /* acento escaso, jamás decorativo de relleno */
  --void:      #0b0b0a;   /* hero/contraste, 1 por vista máx */
  --chalk:     #faf8f2;   /* texto sobre void */

  /* ---- Radios (redondeado, nada puntiagudo) ---- */
  --r-xs:  10px;
  --r-sm:  16px;
  --r-md:  24px;
  --r-lg:  36px;
  --r-xl:  48px;
  --r-pill: 999px;

  /* ---- Sombras suaves y difusas (web de marca, no hairlines de dashboard) ---- */
  --shadow-whisper: 0 2px 8px -2px rgba(22,21,15,.06);
  --shadow-soft:    0 24px 60px -24px rgba(22,21,15,.14);
  --shadow-float:   0 48px 110px -36px rgba(22,21,15,.20);
  --shadow-ring:    0 0 0 1px rgba(22,21,15,.05);

  /* ---- Tipografía ---- */
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* escala fluida */
  --t-hero:  clamp(2.8rem, 7vw, 6.5rem);
  --t-h1:    clamp(2.2rem, 5vw, 4.25rem);
  --t-h2:    clamp(1.7rem, 3.4vw, 2.85rem);
  --t-h3:    clamp(1.25rem, 2vw, 1.6rem);
  --t-lead:  clamp(1.1rem, 1.5vw, 1.4rem);
  --t-body:  1.0625rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* ---- Ritmo / layout ---- */
  --maxw:    1200px;
  --maxw-narrow: 760px;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --section: clamp(6rem, 14vh, 11rem);

  /* ---- Movimiento (con significado, no decorativo) ---- */
  --ease:        cubic-bezier(.22, .61, .36, 1);   /* salida suave */
  --ease-cinema: cubic-bezier(.16, 1, .3, 1);       /* expo-out, cine */
  --ease-soft:   cubic-bezier(.45, .05, .25, 1);
  --t-fast:  280ms;
  --t-med:   560ms;
  --t-slow:  900ms;
  --t-cine: 1200ms;
}

/* Respeto a quien reduce movimiento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; --t-cine: 1ms;
  }
}