:root {
  --color-primary: #13444b;
  --color-accent: #bed73c;
  --color-white: #ffffff;
  --color-secondary: #55b4be;
  --font-primary: "Chillax";
  --font-secundary: "Utendo";
}

/* =============================================
   PRIMARIA
   ============================================= */
@font-face {
  font-family: "Chillax";
  src: url("../assets/fuentes/Chillax-Extralight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

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

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

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

@font-face {
  font-family: "Chillax";
  src: url("../assets/fuentes/Chillax-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chillax";
  src: url("../assets/fuentes/Chillax-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================
   SEGUNDARIA
   ============================================= */

@font-face {
  font-family: "Utendo";
  src: url("../assets/fuentes/Utendo-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Utendo";
  src: url("../assets/fuentes/Utendo-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

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

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

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

@font-face {
  font-family: "Utendo";
  src: url("../assets/fuentes/Utendo-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Utendo";
  src: url("../assets/fuentes/Utendo-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Utendo";
  src: url("../assets/fuentes/Utendo-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Utendo";
  src: url("../assets/fuentes/Utendo-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Utendo";
  src: url("../assets/fuentes/Utendo-ExtraBlack.ttf") format("truetype");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-primary);
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
}