/*
  ARREGLADO: antes apuntaba a archivos .otf que no existen
  (ClashGrotesk-Regular.otf, Inter-Regular.ttf...).
  Ahora apunta a los .ttf reales que están dentro de /Fonts.
  Si en el futuro cambias el nombre de un archivo de fuente,
  solo tienes que actualizar la ruta correspondiente aquí abajo.
*/

@font-face {
  font-family: "Clash Grotesk";
  src: url("../Fonts/ClashGrotesk-Extralight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../Fonts/ClashGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../Fonts/ClashGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../Fonts/ClashGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../Fonts/ClashGrotesk-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../Fonts/ClashGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../Fonts/Inter_18pt-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../Fonts/Inter_18pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../Fonts/Inter_18pt-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Long Cang";
  src: url("../Fonts/LongCang-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  background: var(--background);
  color: var(--navy);
  font-family: var(--clash);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}