/* typography.css
 * ZERO — generado por scripts/build-tokens.mjs desde scripts/lib/brand.mjs
 * NO EDITAR A MANO: se sobreescribe en cada build.
 */

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Light.ttf') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Regular.ttf') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Medium.ttf') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-SemiBold.ttf') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-Light.ttf') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-Regular.ttf') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-Medium.ttf') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-Italic.ttf') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-texto:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-portada:     44px;
  --lh-portada:     48px;
  --tr-portada:     -0.012em;

  --fs-display:     clamp(30px, 9.4vw, 42px);
  --lh-display:     1.02;
  --tr-display:     -0.024em;

  --fs-titular:     34px;
  --lh-titular:     37px;
  --tr-titular:     -0.015em;

  --fs-title:       24px;
  --lh-title:       30px;
  --tr-title:       0;

  --fs-body-lg:     17px;
  --lh-body-lg:     24px;
  --tr-body-lg:     0;

  --fs-body:        15px;
  --lh-body:        22px;
  --tr-body:        0;

  --fs-caption:     13px;
  --lh-caption:     18px;
  --tr-caption:     0;

  --fs-ui-fuerte:   12.5px;
  --lh-ui-fuerte:   16px;
  --tr-ui-fuerte:   0;

  --fs-label:       12px;
  --lh-label:       14px;
  --tr-label:       0.21em;
}

.t-portada {
  font-family: var(--ff-display);
  font-size: var(--fs-portada);
  line-height: var(--lh-portada);
  font-weight: 300;
  letter-spacing: var(--tr-portada);
}

.t-display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 300;
  letter-spacing: var(--tr-display);
}

.t-titular {
  font-family: var(--ff-display);
  font-size: var(--fs-titular);
  line-height: var(--lh-titular);
  font-weight: 400;
  letter-spacing: var(--tr-titular);
}

.t-title {
  font-family: var(--ff-display);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 500;
  letter-spacing: var(--tr-title);
}

.t-body-lg {
  font-family: var(--ff-texto);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: 400;
  letter-spacing: var(--tr-body-lg);
}

.t-body {
  font-family: var(--ff-texto);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: var(--tr-body);
}

.t-caption {
  font-family: var(--ff-texto);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
  letter-spacing: var(--tr-caption);
}

.t-ui-fuerte {
  font-family: var(--ff-texto);
  font-size: var(--fs-ui-fuerte);
  line-height: var(--lh-ui-fuerte);
  font-weight: 600;
  letter-spacing: var(--tr-ui-fuerte);
}

.t-label {
  font-family: var(--ff-texto);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* Toda cifra que se actualice en vivo. Sin esto, pasar de 89 a 90 mueve el layout. */
.tabular { font-variant-numeric: tabular-nums; }

/* El logotipo se usa en outline (assets/logo/). Esta clase es solo para
   maquetas: Inter Light 300, mayusculas, tracking 0.32em. */
.logotipo {
  font-family: var(--ff-texto);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.32em;
}