/* =========================================================================
   CITEM web — Fuentes y tokens propios de la web
   -------------------------------------------------------------------------
   Los tokens de MARCA (paleta, estados, tipografía, bordes, sombras,
   espaciado, velocidades) no se declaran aquí: son de campus_dc y llegan en
   /css/marca/tokens.css, una copia firmada que pone al día el workflow
   `marca` (marca.config.json). Se carga antes que este fichero.

   Aquí solo vive lo que es de la web pública y no existe en la app: las
   caras de Gobold, la escala tipográfica de las landings, el layout y los
   índices z. Un token que ya exista en campus no se redeclara aquí: uno que
   pisara a la marca sería justo la deriva que este reparto viene a quitar.
   ========================================================================= */

/* ─── @font-face: Gobold ─────────────────────────────────────────────────── */
/* Dos formatos y el orden importa: el navegador se queda con el PRIMERO que
   entiende. WOFF2 desde el 2026-08-24 — mismo tipo de letra, mismos 231/228
   glifos y las mismas métricas, comprobado glifo a glifo; solo se cae `DSIG`,
   que la especificación WOFF2 obliga a retirar y que no pinta nada. 23,5 KB
   -> 17,2 KB en la ruta crítica de las 19 páginas.
   El `.woff` se queda como fallback: si el `.woff2` fallara, el navegador cae
   al siguiente `src` y se sirve exactamente lo de antes. Por eso el cambio no
   tiene un modo de fallo peor que el estado anterior. */
@font-face {
  font-family: 'Gobold';
  src: url('/assets/fonts/Gobold-Regular.woff2') format('woff2'),
       url('/assets/fonts/Gobold-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gobold';
  src: url('/assets/fonts/Gobold-Bold.woff2') format('woff2'),
       url('/assets/fonts/Gobold-Bold.woff') format('woff');
  /* SYNC DS §3.3: Gobold se expone como 900 para evitar bold-synthesis ambiguo. */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Escala tipográfica de las landings. El interlineado display
     (--leading-display) y el tracking (--tracking-display*) son de marca. */
  --text-base: 1.125rem;
  --text-sm: 0.875rem;
  --text-h1: clamp(2.5rem, 5vw, 5rem);
  --text-h2: clamp(2rem, 4vw, 3.5rem);
  --text-h3: clamp(1.5rem, 3vw, 2.5rem);
  --text-p: 1.25rem;
  /* Suelo a 2.5rem, antes 3.5rem. Con 3.5rem (56px) el clamp nunca bajaba de
     ahí —a 320px, 8vw son 25,6px— y una palabra larga sin puntos de corte no
     cabía: "Herramientas" medía 326px en una caja de 288 y desbordaba el
     documento. El suelo solo actúa por debajo de ~700px de ancho. */
  --text-hero: clamp(2.5rem, 8vw, 7rem);

  /* Ritmo de sección de la web, sobre la escala de espaciado de marca. */
  --spacing-xs: var(--space-sm);
  --spacing-sm: var(--space-md);
  --spacing-md: var(--space-xl);
  --spacing-lg: var(--space-3xl);
  --spacing-xl: 5rem;

  /* SYNC DS §5.2: el contenido de una página nunca pasa de 1440 px. */
  --site-max-width: 1440px;
  /* La barra superior: en el móvil, el logotipo a su mínimo con su área de
     respeto; en pantallas anchas, más aire (navegacion.css). */
  --nav-height: 5rem;
  /* Dónde empieza y acaba la columna del contenido (la de .container) medido
     desde el borde de la pantalla. Lo usan las piezas a sangre —el hero partido—
     para que su texto caiga en la misma línea que el resto de la página. Va en
     % y no en vw: en un padding, el % es el ancho del bloque, sin la barra de
     scroll que sí cuenta 100vw. */
  --margen-de-columna: calc(max(0px, (100% - var(--site-max-width)) / 2) + var(--spacing-md));

  --border-weight: var(--border-w-structural);

  /* SYNC DS §5.4: el revelado en scroll. Velocidad y curvas son de marca
     (--dur-reveal, --ease-blockout, --ease-wipe); el recorrido y el
     escalonado son de la web, que es la única que revela al hacer scroll. */
  --reveal-shift: 32px;
  --reveal-stagger: 80ms;
  /* Tope del escalonado. Sin él, el retardo crece con el número de hermanos:
     una rejilla de 12 tarjetas dejaría la última esperando casi un segundo.
     Una cascada se lee como cascada en los primeros cuatro pasos. */
  --reveal-stagger-max: 320ms;

  --z-nav: 50;
}

@media (min-width: 768px) {
  :root {
    --nav-height: 6.5rem;
  }
}