/* Sistema tipografico de Splat Entertainment.

   Los tokens se llaman --tipo-display y --tipo-texto, no --display y --texto. No es capricho:
   tokens.css (generado desde datos/paleta.json) ya usa --texto para el COLOR del texto, y con
   mas especificidad ([data-marca="paint"] contra :root). Mientras se llamaron igual,
   `font-family: var(--tipo-texto)` resolvia a un color, el navegador lo descartaba y TODO el texto
   corrido del sitio se dibujaba en la serif por defecto. Eso era la mitad de "se ve barato".
   Direccion B, elegida por Axel el 2026-09-23: Archivo para titulos. La cara de texto paso de Inter
   a Work Sans el mismo dia: el detector de Impeccable marca a Inter como fuente quemada (la que usan
   todas las interfaces generadas por IA) y Work Sans es la que usa layrmedia, que es la referencia.
   El registro de Stazione Leopolda: mayusculas anchas y macizas que aguantan arriba de una foto.

   Es la unica fuente de verdad del tipo. Ninguna hoja de estilo declara font-family ni tamanos
   de titulo por su cuenta: usan los roles de aca.

   Necesita tokens.css antes (el color sale de datos/paleta.json). */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/assets/fonts/work-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tipo-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --tipo-texto: 'Work Sans', system-ui, -apple-system, sans-serif;

  /* Escala. El tope por alto de viewport (vh) existe para que el titular no se coma la pantalla
     en un portatil bajo, que es donde mira medio mundo. El maximo nunca pasa de 6rem. */
  --t-hero:  clamp(2.4rem, min(7vw, 13vh), 5.4rem);
  --t-h1:    clamp(2rem,   min(5vw, 10vh), 3.8rem);
  --t-h2:    clamp(1.6rem, min(3.4vw, 8vh), 2.6rem);
  --t-h3:    1.0625rem;
  --t-cuerpo: 1.0625rem;
  --t-chico: 0.9375rem;
  --t-dato:  0.8125rem;
}

/* --------------------------------------------------------------------- base */

body {
  font-family: var(--tipo-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.62;
  font-weight: 400;
  /* Las duraciones y capacidades piden numeros tabulares, y eso se pide por rol (.dato), no aca. */
}

/* ------------------------------------------------------------------ titulos */

.hero, .h1, .h2 {
  font-family: var(--tipo-display);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

/* Archivo en 800 y mayusculas necesita el tracking cerrado: suelta, en caja alta, se desarma.
   -0.02em esta arriba del piso de -0.04em que pide el craft floor de impeccable. */
.hero {
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.96;
}

.h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1;
}

.h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.06;
}

/* h3 no va en mayusculas: a este tamano la caja alta se vuelve ilegible en parrafos cortos. */
.h3 {
  font-family: var(--tipo-display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0;
}

/* --------------------------------------------------------------------- texto */

/* Medida de lectura: 45 a 75 caracteres. Ni una linea de texto corrido mas ancha. */
.parrafo { max-width: 68ch; margin: 0; }
.parrafo--corto { max-width: 46ch; }

.secundario { color: var(--texto-secundario); font-size: var(--t-chico); }

/* Duraciones, capacidades y horarios. Tabulares para que alineen en columna. */
.dato {
  font-size: var(--t-dato);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}

.marca {
  font-family: var(--tipo-texto);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* ------------------------------------------------- claro sobre fondo oscuro */

/* Los tres ejes juntos, que es lo que pide el piso de calidad: mas interlineado, mas tracking y
   un paso mas de peso. Texto claro sobre negro se adelgaza opticamente; compensar solo con peso
   deja las lineas apretadas y compensar solo con interlineado deja la letra flaca. */
[data-marca='mind'] body,
[data-marca='mind'] .parrafo,
.sobre-oscuro {
  line-height: 1.72;
  letter-spacing: 0.012em;
  font-weight: 450;
}

[data-marca='mind'] .hero,
[data-marca='mind'] .h1,
.sobre-oscuro.hero {
  letter-spacing: -0.012em; /* en caja alta sobre negro, menos cierre que en claro */
}

/* --------------------------------------------------------------------- reglas */

/* Prohibida la ceja: nada de etiqueta chica arriba del titulo anunciando la seccion. El titulo
   se sostiene solo. Esta en el manual de marca y lo verifica validar-datos.mjs. */