@charset "utf-8";
/* base.css v1.1.0 */

@layer reset, base, components, formularios;

@layer base {
    /* =========================
     Montserrat Variable local
  ========================= */
    @font-face {
        font-family: "Montserrat";
        src: url("./fonts/Montserrat-Font-Variable.woff2") format("woff2");
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Montserrat";
        src: url("./fonts/Montserrat-Italic-Variable.woff2") format("woff2");
        font-weight: 100 900;
        font-style: italic;
        font-display: swap;
    }

    html{
        height: 100%;
        font-synthesis: none;
    }
    /* =========================
    Uso correcto en tu CSS

  body {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
}
h1 {
  font-weight: 700;
}

.light {
  font-weight: 300;
}

.black {
  font-weight: 900;
}

Si quieres precision total:
h1 {
  font-variation-settings: "wght" 720;
}
Mejor renderizado
html {
  font-synthesis: none;
}

  ========================= */

    /* =========================
     Tokens
  ========================= */
    :root {
        --font-sans: "Montserrat", system-ui, -apple-system, sans-serif;

        --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
        --fs-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
        --fs-md: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
        --fs-lg: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
        --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
        --fs-xxl: clamp(2rem, 1.5rem + 2vw, 3rem);

        --lh-tight: 1.2;
        --lh-normal: 1.5;

        --container-max: 1200px;
    }

    /* =========================
     Base
  ========================= */
    body {
        display: grid;
        grid-template-rows: auto 1fr auto; /* header / main / footer */
        min-height: 100vh;
        font-family: var(--font-sans);
        font-weight: 400;
        margin: 0;
    }

    /* =========================
     Typography
  ========================= */
    h1 {
        font-size: var(--fs-xxl);
        font-weight: 700;
    }

    h2 {
        font-size: var(--fs-xl);
        font-weight: 600;
    }
    h3 {
        font-size: var(--fs-lg);
    }
    h4 {
        font-size: var(--fs-md);
    }

    p,
    li {
        max-width: 65ch;
    }

    /* =========================
     Layout
  ========================= */
    .container {
        width: min(100% - 2rem, var(--container-max));
        margin-inline: auto;
    }

    /* =========================
     Responsive images + SVG
  ========================= */
    img,
    svg {
        max-width: 100%;
        height: auto;
        display: block;
    }

    svg {
        overflow: hidden;
    }

    img[src$=".svg"] {
        width: 100%;
    }
}