/* ==========================================================================
   Pragmática Consultores
   ========================================================================== */

/* 1. Fonts
   ========================================================================== */

@font-face {
  font-family: "Mukta";
  src: url("../assets/fonts/mukta-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mukta";
  src: url("../assets/fonts/mukta-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mukta";
  src: url("../assets/fonts/mukta-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens
   ========================================================================== */

:root {
  --color-red: #ff0000;
  --color-red-dark: #7f0000;
  --color-red-footer: #af0100;
  --color-white: #f5f5f5;
  --color-canvas: #e5e5e5;
  --color-dark: #07141c;

  --font-primary: "Mukta", sans-serif;
  --page-gutter: clamp(2rem, 8vw, 7.2rem);

  --header-height: clamp(92px, 13.6vh, 138px);
  --header-height-scrolled: 82px;
  --header-gradient: linear-gradient(
    to bottom,
    rgb(9 22 31 / 38%) 0%,
    rgb(9 22 31 / 16%) 58%,
    rgb(9 22 31 / 0%) 100%
  );

  --transition-fast: 200ms ease;
  --transition-default: 300ms ease;
}

/* 3. Base and reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-canvas);
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  scrollbar-width: thin;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--color-canvas);
  color: var(--color-white);
  font-family: var(--font-primary);
  overscroll-behavior-y: none;
}

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

img {
  display: block;
}

/* Preserve the requested width while using native browser colors. */
::-webkit-scrollbar {
  width: 10px;
}

h1 {
  margin: 0 0 17px;
  font-size: clamp(3rem, 3.7vw, 3.35rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

@media (max-width: 900px) {
  :root {
    --page-gutter: 28px;
  }

  h1 {
    font-size: clamp(2.25rem, 8vw, 3rem);
  }
}