:root {
    /* Colors */
    --colors-primary-100: #e8eefc;
    --colors-primary-200: #bfcff7;
    --colors-primary-300: #132a8c;
    --colors-primary-400: #0c2464;
    --colors-primary-500: #07163b;
    --colors-secondary-100: #e5f0db;
    --colors-secondary-200: #7f9f60;
    --colors-secondary-300: #3e5824;
    --colors-secondary-400: #2e411b;
    --colors-secondary-500: #19240f;
    --colors-light-100: #f3f3f2;
    --colors-light-200: #e6e7e4;
    --colors-light-300: #dadbd7;
    --colors-light-400: #cecfc9;
    --colors-light-500: #c1c2bc;
    --colors-dark-100: #848679;
    --colors-dark-200: #6a6b61;
    --colors-dark-300: #4f5049;
    --colors-dark-400: #353630;
    --colors-dark-500: #1a1b18;
    --colors-system-light-100: #fff;
    --colors-system-light-200: #f2f1ee;
    --colors-system-light-300: #ecece9;
    --colors-system-light-400: #e1dfdb;
    --colors-system-light-500: #cccac2;
    --colors-system-dark-100: #51575c;
    --colors-system-dark-200: #3f4448;
    --colors-system-dark-300: #373c3f;
    --colors-system-dark-400: #2f3438;
    --colors-system-dark-500: #1b2227;
    --colors-blue-100: #e8f3f9;
    --colors-blue-200: #c2e0f0;
    --colors-blue-300: #2c81b1;
    --colors-blue-400: #1b4e6a;
    --colors-brown-100: #f6ecec;
    --colors-brown-200: #d0b2a5;
    --colors-brown-300: #9f6b53;
    --colors-brown-400: #54382c;
    --colors-orange-100: #fcebdb;
    --colors-orange-200: #f7c89c;
    --colors-orange-300: #d97f26;
    --colors-orange-400: #6c4013;
    --colors-purple-100: #f6f2fb;
    --colors-purple-200: #dbcdee;
    --colors-purple-300: #9256bf;
    --colors-purple-400: #522a6f;
    --colors-pink-100: #fbf0f6;
    --colors-pink-200: #f1c6de;
    --colors-pink-300: #d65c9d;
    --colors-pink-400: #661942;
    --colors-gray-100: #f1f1ef;
    --colors-gray-200: #e7e7e4;
    --colors-gray-300: #787773;
    --colors-gray-400: #3f3e3c;
    --colors-red-100: #feebed;
    --colors-red-200: #fecdd2;
    --colors-red-300: #dd433e;
    --colors-red-400: #821a17;
    --colors-yellow-100: #fcf4db;
    --colors-yellow-200: #f8e2a5;
    --colors-yellow-300: #d49325;
    --colors-yellow-400: #8b6118;
    --colors-green-100: #ecf4ea;
    --colors-green-200: #cde3c9;
    --colors-green-300: #3b8b61;
    --colors-green-400: #204b34;
    --colors-white: #fff;
    --colors-black: #000;

    /* Typography */
    --font: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* Gaps */
    --xs-gap: 0.25rem;
    --sm-gap: 0.5rem;
    --df-gap: 1rem;
    --md-gap: 1.5rem;
    --lg-gap: 3rem;
    --xl-gap: 6rem;
    --xxl-gap: 8rem;

    /* Radius */
    --radius-sm: 0.1875rem;
    --radius: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.5rem;

    /* Breakpoints */
    --breaks-xs: 21.4375rem;
    --breaks-sm: 44rem;
    --breaks-md: 60rem;
    --breaks-lg: 80rem;
    --breaks-xl: 100rem;
    --2k: 125rem;
    --4k: 120rem; }


        /* Encabezados */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--colors-dark-500);
        }
    
        h1 {
            font-size: 2.5rem;
            font-weight: 700;
        }
    
        h2 {
            font-size: 2rem;
            font-weight: 600;
        }
    
        h3 {
            font-size: 1.75rem;
            font-weight: 500;
        }
    
        h4 {
            font-size: 1.5rem;
            font-weight: 500;
        }
    
        h5 {
            font-size: 1.25rem;
            font-weight: 500;
        }
    
        h6 {
            font-size: 1rem;
            font-weight: 500;
        }

        /* Texto */
        p {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--colors-dark-400);
        }
    
        /* Enlaces */
        a {
            color: var(--colors-primary-300);
            text-decoration: none;
            transition: color 0.3s ease;
        }
    
        a:hover {
            color: var(--colors-blue-400);
        }
    
        /* Botones */
        a {
            text-decoration: none;
        }
    
        button,
        .btn {
            background-color: var(--colors-primary-300);
            color: #ffffff;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: var(--radius);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
    
        button:hover,
        .btn:hover {
            background-color: var(--colors-primary-400);
        }