/* ─── TYPOGRAPHY ────────────────────────────────────────────────── */

@font-face {
  font-family: 'Satoshi';
  src: url('/Assets/Tipografía/Satoshi-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/Assets/Tipografía/Satoshi-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/Assets/Tipografía/Satoshi-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/Assets/Tipografía/Satoshi-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/Assets/Tipografía/Satoshi-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: 700;
  margin: 0;
}

/* Escala Figma — "Desktop Typestyles". Las etiquetas h01-h06 son las del
   style guide, no el nivel semántico de heading HTML (eso lo decide cada
   bloque según su jerarquía real, no el tamaño). */
.text-h0  { font-size: var(--fs-h0);  line-height: var(--lh-h0);  font-weight: 700; }
.text-h01 { font-size: var(--fs-h01); line-height: var(--lh-h01); font-weight: 700; }
.text-h02 { font-size: var(--fs-h02); line-height: var(--lh-h02); font-weight: 700; }
.text-h03 { font-size: var(--fs-h03); line-height: var(--lh-h03); font-weight: 400; }
.text-h04 { font-size: var(--fs-h04); line-height: var(--lh-h04); font-weight: 500; }
.text-h05 { font-size: var(--fs-h05); line-height: var(--lh-h05); font-weight: 500; }
.text-h06 { font-size: var(--fs-h06); line-height: var(--lh-h06); font-weight: 500; }

h1 { font-size: var(--fs-h01); line-height: var(--lh-h01); }
h2 { font-size: var(--fs-h02); line-height: var(--lh-h02); }
h3 { font-size: var(--fs-h04); line-height: var(--lh-h04); font-weight: 500; }

p { margin: 0; font-size: var(--fs-body-md); line-height: var(--lh-body); }

.text-body-xl { font-size: var(--fs-body-xl); line-height: var(--lh-body); }
.text-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.label {
  font-size: var(--fs-label);
  font-weight: 500;
}