/* ==========================================================================
   IBC — Design tokens
   Única fuente de verdad para color, tipografía, espaciado y movimiento.
   Cambiar el esquema visual del sitio completo se hace SOLO desde aquí.
   ========================================================================== */

:root {
  /* --- Color: azules corporativos ------------------------------------- */
  --color-navy-950: #060f1b;
  --color-navy-900: #0a1626;
  --color-navy-800: #0f2036;
  --color-navy-700: #16304d;
  --color-navy-600: #1e4066;

  /* --- Color: latón / dorado antiguo (acento de marca) ----------------- */
  --color-brass-600: #8a6c3a;
  --color-brass-500: #b8965c;
  --color-brass-400: #cbae7c;
  --color-brass-300: #ddc9a3;

  /* --- Color: neutros claros ------------------------------------------ */
  --color-bone-50: #faf9f6;
  --color-bone-100: #f4f2ed;
  --color-bone-200: #e8e5dd;
  --color-bone-300: #d6d2c8;

  /* --- Color: texto ---------------------------------------------------- */
  --color-ink: #12202f;
  --color-ink-soft: #4a5a6b;
  --color-ink-muted: #5d6b7a;
  --color-on-dark: #f4f2ed;
  --color-on-dark-soft: #b3c0cd;
  --color-on-dark-muted: #8496a8;

  /* --- Superficies y bordes -------------------------------------------- */
  --surface-page: var(--color-bone-50);
  --surface-alt: var(--color-bone-100);
  --surface-dark: var(--color-navy-900);
  --border-hairline: rgba(18, 32, 47, 0.12);
  --border-hairline-dark: rgba(244, 242, 237, 0.16);

  /* --- Tipografía ------------------------------------------------------ */
  /* Titulares, logotipo y números de paso */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* Subtítulos, rótulos y botones */
  --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Texto corrido */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Bebas Neue es condensada y sólo tiene mayúsculas: pide más cuerpo y menos
     interletraje que la sans de interfaz para leerse igual de bien. */
  --font-menu: "Bebas Neue", "Oswald", "Haettenschweiler", Impact, var(--font-ui);

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --text-h2: clamp(1.875rem, 1.4rem + 2.1vw, 3.25rem);
  --text-hero: clamp(2.375rem, 1.1rem + 5.4vw, 5.5rem);
  --text-menu: clamp(0.9375rem, 0.88rem + 0.22vw, 1.0625rem);

  /* Interletraje de los titulares de sección (no del hero, que va aparte). */
  --tracking-title: 0.05em;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --tracking-widest: 0.28em;

  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-normal: 1.72;

  /* --- Espaciado: ritmo, no relleno uniforme --------------------------- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 2.75rem;
  --space-xl: 4.25rem;
  /* Ritmo vertical de las secciones. Al 40% del valor original
     (3.5rem / 2.4rem + 4.6vw / 7.5rem) por decisión de diseño. */
  --space-section: clamp(1.4rem, 0.96rem + 1.84vw, 3rem);
  /* Ídem para las bandas cinemáticas (original: 3rem / 2rem + 4vw / 6rem). */
  --space-cinematic: clamp(1.2rem, 0.8rem + 1.6vw, 2.4rem);
  --space-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);

  --container-max: 1280px;
  --container-narrow: 940px;

  /* --- Radios y elevación ---------------------------------------------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --shadow-card: 0 24px 60px -28px rgba(6, 15, 27, 0.55);
  --shadow-raised: 0 34px 80px -34px rgba(6, 15, 27, 0.7);

  /* --- Movimiento ------------------------------------------------------ */
  --duration-fast: 180ms;
  --duration-normal: 340ms;
  --duration-slow: 720ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Capas ------------------------------------------------------------ */
  --z-header: 100;
  --z-drawer: 120;
  --z-skip: 200;

  --header-height: 76px;
}

@media (max-width: 900px) {
  :root { --header-height: 64px; }
}

/* Escritorio: los titulares de sección bajan al 75% de su tamaño y aprietan
   el interletraje. Los tres términos del `clamp` se escalan por igual para
   que el recorte sea exacto en todo el rango, no sólo en un ancho concreto.
   El titular del hero queda fuera: tiene su propia escala en sections.css. */
@media (min-width: 901px) {
  :root {
    /* Original: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem) */
    --text-h3: clamp(1.03125rem, 0.9rem + 0.525vw, 1.40625rem);
    /* Original: clamp(1.875rem, 1.4rem + 2.1vw, 3.25rem) */
    --text-h2: clamp(1.40625rem, 1.05rem + 1.575vw, 2.4375rem);
    --tracking-title: 0em;
  }
}