:root {
    /*=================================================================
    BLOQUE: VARIABLES
=================================================================*/
    /*** ELEMENT: Resets ***/
    --none: 0px;
    --gap-none: 0px;
    --margin-none: 0px;
    --padding-none: 0px;
    --radius-none: 0px;
    --border-none: 0px;

    /*** ELEMENT: Opacity ***/
    --opacity-0: 0;
    --opacity-5: 0.05;
    --opacity-10: 0.1;
    --opacity-15: 0.15;
    --opacity-20: 0.2;
    --opacity-25: 0.25;
    --opacity-30: 0.3;
    --opacity-35: 0.35;
    --opacity-40: 0.4;
    --opacity-45: 0.45;
    --opacity-50: 0.5;
    --opacity-55: 0.55;
    --opacity-60: 0.6;
    --opacity-65: 0.65;
    --opacity-70: 0.7;
    --opacity-75: 0.75;
    --opacity-80: 0.8;
    --opacity-85: 0.85;
    --opacity-90: 0.9;
    --opacity-95: 0.95;
    --opacity-100: 1;
    --opacity-placeholder: var(--opacity-100);

    /*** ELEMENT: Percentage ***/
    --percent-0: 0%;
    --percent-5: 5%;
    --percent-10: 10%;
    --percent-15: 15%;
    --percent-20: 20%;
    --percent-25: 25%;
    --percent-30: 30%;
    --percent-33: 33%;
    --percent-35: 35%;
    --percent-40: 40%;
    --percent-45: 45%;
    --percent-50: 50%;
    --percent-55: 55%;
    --percent-60: 60%;
    --percent-65: 65%;
    --percent-70: 70%;
    --percent-75: 75%;
    --percent-80: 80%;
    --percent-85: 85%;
    --percent-90: 90%;
    --percent-95: 95%;
    --percent-100: 100%;

    /*** ELEMENT: ViewPorts ***/
    /* ViewPort Width */
    --vw-0: 0vw;
    --vw-5: 5vw;
    --vw-10: 10vw;
    --vw-15: 15vw;
    --vw-20: 20vw;
    --vw-25: 25vw;
    --vw-30: 30vw;
    --vw-33: 33vw;
    --vw-35: 35vw;
    --vw-40: 40vw;
    --vw-45: 45vw;
    --vw-50: 50vw;
    --vw-55: 55vw;
    --vw-60: 60vw;
    --vw-65: 65vw;
    --vw-70: 70vw;
    --vw-75: 75vw;
    --vw-80: 80vw;
    --vw-85: 85vw;
    --vw-90: 90vw;
    --vw-95: 95vw;
    --vw-100: 100vw;

    /* ViewPort Height */
    --vh-0: 0vh;
    --vh-5: 5vh;
    --vh-10: 10vh;
    --vh-15: 15vh;
    --vh-20: 20vh;
    --vh-25: 25vh;
    --vh-30: 30vh;
    --vh-33: 33vh;
    --vh-35: 35vh;
    --vh-40: 40vh;
    --vh-45: 45vh;
    --vh-50: 50vh;
    --vh-55: 55vh;
    --vh-60: 60vh;
    --vh-65: 65vh;
    --vh-70: 70vh;
    --vh-75: 75vh;
    --vh-80: 80vh;
    --vh-85: 85vh;
    --vh-90: 90vh;
    --vh-95: 95vh;
    --vh-100: 100vh;

    /*** ELEMENT: Fonts ***/
    /** Font families **/
    --font-primary: 'Space Grotesk', sans-serif;
    --font-secondary: 'Playfair Display', sans-serif;
    --font-title: var(--font-secondary);
    --font-text: var(--font-primary);

    /** Font weights **/
    --font-weight-xthin: 100;
    --font-weight-thin: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;

    /** Font styles **/
    --font-style-normal: normal;
    --font-style-italic: italic;
    --font-style-oblique: oblique;

    /** Font Letter spacing **/
    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.05em;

    /** Font Sizes **/
    /* Titles */
    --h1-parent: clamp(2rem, 5vw + 1rem, 4rem);
    /* 32px – 64px */
    --h1-child: clamp(1.5rem, 3.5vw + 0.5rem, 3rem);
    /* 24px – 32px – 48px */
    --h2: clamp(1.5rem, 3.5vw + 0.5rem, 3rem);
    /* 24px – 32px – 40px */
    --h3: clamp(1.25rem, 1.4vw + 0.5rem, 1.5rem);
    /* 20px – 24px – 32px */
    --h4: clamp(1.25rem, 1.4vw + 0.5rem, 1.5rem);
    /* 20px – 22px – 24px */
    --h5: clamp(1rem, 1.2vw, 1.125rem);
    /* 16px – 17px – 18px */

    /* Text */
    --text-xxs: 0.625rem;
    /* 10px */
    --text-xs: 0.75rem;
    /* 12px */
    --text-s: 0.875rem;
    /* 14px */
    --text-m: clamp(0.875rem, 0.6vw + 0.25rem, 1rem);
    /* 14px–16px–16px */
    --text-l: clamp(1rem, 1vw + 0.25rem, 1.125rem);
    /* 16px–18px–18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: clamp(1.25rem, 1vw + 0.5rem, 1.5rem);
    /* 20px–24px–24px */
    --text-3xl: clamp(1.5rem, 2vw + 0.25rem, 2rem);
    /* 24px–24px–32px */
    --text-4xl: clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
    /* 24px–32px–40px */

    /* Botones del slider */
    --text-btn-bar: clamp(1.5rem, 4vw + 0.5rem, 3.5rem);
    /* 24px min → fluido → 56px max */
    --icon-btn-bar: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
    /* 24px min → fluido → 40px max */

    /* Claim */
    --text-claim: var(--text-3xl);
    --text-claim-footer: var(--text-2xl);
    --sub-text-claim: var(--text-l);

    /* Tarjetas */
    --title-card-course: clamp(1rem, 1vw + 0.25rem, 1.125rem);
    /* 16px–18px–18px */
    --text-card-course: 0.875rem;
    /* 14px */

    /* Data */
    --text-data: var(--text-4xl);

    /* Toggle */
    --title-toggle: var(--text-xl);

    /** Font Line Heights **/
    /* General */
    --lh-text-xs: 0.9;
    --lh-text-s: 1;
    --lh-text-m: 1.25;
    --lh-text-l: 1.5;
    --lh-text-xl: 2;

    /* Titles */
    --lh-text-h1-parent: var(--lh-text-s);
    --lh-text-h1-child: var(--lh-text-m);
    --lh-text-h2: var(--lh-text-m);
    --lh-text-h3: var(--lh-text-m);
    --lh-text-h4: var(--lh-text-m);
    --lh-text-h5: var(--lh-text-m);
    --lh-text-h6: var(--lh-text-m);

    /*** ELEMENT: Colors ***/
    /** Color Primary **/
    --color-primary-rgb: 90, 104, 78;
    --color-primary-100: rgba(var(--color-primary-rgb), var(--opacity-10));
    --color-primary-200: rgba(var(--color-primary-rgb), var(--opacity-20));
    --color-primary-300: rgba(var(--color-primary-rgb), var(--opacity-30));
    --color-primary-400: rgba(var(--color-primary-rgb), var(--opacity-40));
    --color-primary-500: rgba(var(--color-primary-rgb), var(--opacity-50));
    --color-primary-600: rgba(var(--color-primary-rgb), var(--opacity-60));
    --color-primary-700: rgba(var(--color-primary-rgb), var(--opacity-70));
    --color-primary-800: rgba(var(--color-primary-rgb), var(--opacity-80));
    --color-primary-900: rgba(var(--color-primary-rgb), var(--opacity-90));
    --color-primary-1000: #5A684E;

    /** Color  Secondary **/
    --color-secondary-rgb: 63, 81, 65;
    --color-secondary-0: rgba(var(--color-secondary-rgb), 0.0);
    --color-secondary-100: rgba(var(--color-secondary-rgb), 0.1);
    --color-secondary-200: rgba(var(--color-secondary-rgb), 0.2);
    --color-secondary-300: rgba(var(--color-secondary-rgb), 0.3);
    --color-secondary-400: rgba(var(--color-secondary-rgb), 0.4);
    --color-secondary-500: rgba(var(--color-secondary-rgb), 0.5);
    --color-secondary-600: rgba(var(--color-secondary-rgb), 0.6);
    --color-secondary-700: rgba(var(--color-secondary-rgb), 0.7);
    --color-secondary-800: rgba(var(--color-secondary-rgb), 0.8);
    --color-secondary-900: rgba(var(--color-secondary-rgb), 0.9);
    --color-secondary-1000: #3F5141;

    /** Color  Tertiary **/
    --color-tertiary-rgb: 90, 104, 78; /* #5A684E */
    --color-tertiary-rgb: 132, 55, 29; /* #84371D */
    --color-tertiary-0: rgba(var(--color-tertiary-rgb), var(--opacity-0));
    --color-tertiary-100: rgba(var(--color-tertiary-rgb), var(--opacity-10));
    --color-tertiary-200: rgba(var(--color-tertiary-rgb), var(--opacity-20));
    --color-tertiary-300: rgba(var(--color-tertiary-rgb), var(--opacity-30));
    --color-tertiary-400: rgba(var(--color-tertiary-rgb), var(--opacity-40));
    --color-tertiary-500: rgba(var(--color-tertiary-rgb), var(--opacity-50));
    --color-tertiary-600: rgba(var(--color-tertiary-rgb), var(--opacity-60));
    --color-tertiary-700: rgba(var(--color-tertiary-rgb), var(--opacity-70));
    --color-tertiary-800: rgba(var(--color-tertiary-rgb), var(--opacity-80));
    --color-tertiary-850: rgba(var(--color-tertiary-rgb), var(--opacity-85));
    --color-tertiary-900: rgba(var(--color-tertiary-rgb), var(--opacity-90));
    --color-tertiary-1000: #84371D;

    /** Color  Quaternary **/
    --color-quaternary-rgb: 189, 171, 147;
    --color-quaternary-0: rgba(var(--color-quaternary-rgb), var(--opacity-0));
    --color-quaternary-100: rgba(var(--color-quaternary-rgb), var(--opacity-10));
    --color-quaternary-200: rgba(var(--color-quaternary-rgb), var(--opacity-20));
    --color-quaternary-300: rgba(var(--color-quaternary-rgb), var(--opacity-30));
    --color-quaternary-400: rgba(var(--color-quaternary-rgb), var(--opacity-40));
    --color-quaternary-500: rgba(var(--color-quaternary-rgb), var(--opacity-50));
    --color-quaternary-600: rgba(var(--color-quaternary-rgb), var(--opacity-60));
    --color-quaternary-700: rgba(var(--color-quaternary-rgb), var(--opacity-70));
    --color-quaternary-800: rgba(var(--color-quaternary-rgb), var(--opacity-80));
    --color-quaternary-850: rgba(var(--color-quaternary-rgb), var(--opacity-85));
    --color-quaternary-900: rgba(var(--color-quaternary-rgb), var(--opacity-90));
    --color-quaternary-1000: #BDAB93;

    /** Color White **/
    /* Full White */
    --color-white-rgb: 255, 255, 255;
    --color-white-100: rgba(var(--color-white-rgb), var(--opacity-10));
    --color-white-200: rgba(var(--color-white-rgb), var(--opacity-20));
    --color-white-300: rgba(var(--color-white-rgb), var(--opacity-30));
    --color-white-400: rgba(var(--color-white-rgb), var(--opacity-40));
    --color-white-500: rgba(var(--color-white-rgb), var(--opacity-50));
    --color-white-600: rgba(var(--color-white-rgb), var(--opacity-60));
    --color-white-700: rgba(var(--color-white-rgb), var(--opacity-70));
    --color-white-800: rgba(var(--color-white-rgb), var(--opacity-80));
    --color-white-900: rgba(var(--color-white-rgb), var(--opacity-90));
    --color-white-1000: #FFFFFF;
    
    /* White Alt */
    --color-white-alt: #FFF9ED;
    --color-white-alt-rgb: 255, 249, 237;
    --color-white-alt-500: rgba(var(--color-white-alt-rgb), var(--opacity-50));
    --color-white-alt-hover: #e2e2e2;

    /** Color  Black **/
    /* Full Black */
    --color-black-rgb: 0, 0, 0;
    --color-black-100: rgba(var(--color-black-rgb), var(--opacity-10));
    --color-black-200: rgba(var(--color-black-rgb), var(--opacity-20));
    --color-black-300: rgba(var(--color-black-rgb), var(--opacity-30));
    --color-black-400: rgba(var(--color-black-rgb), var(--opacity-40));
    --color-black-500: rgba(var(--color-black-rgb), var(--opacity-50));
    --color-black-600: rgba(var(--color-black-rgb), var(--opacity-60));
    --color-black-700: rgba(var(--color-black-rgb), var(--opacity-70));
    --color-black-800: rgba(var(--color-black-rgb), var(--opacity-80));
    --color-black-900: rgba(var(--color-black-rgb), var(--opacity-90));
    --color-black-1000: #000000;

    /* Black Alt */
    --color-black-alt-rgb: 56, 56, 56;
    --color-black-alt-100: rgba(var(--color-black-alt-rgb), var(--opacity-10));
    --color-black-alt-200: rgba(var(--color-black-alt-rgb), var(--opacity-20));
    --color-black-alt-300: rgba(var(--color-black-alt-rgb), var(--opacity-30));
    --color-black-alt-400: rgba(var(--color-black-alt-rgb), var(--opacity-40));
    --color-black-alt-500: rgba(var(--color-black-alt-rgb), var(--opacity-50));
    --color-black-alt-600: rgba(var(--color-black-alt-rgb), var(--opacity-60));
    --color-black-alt-700: rgba(var(--color-black-alt-rgb), var(--opacity-70));
    --color-black-alt-800: rgba(var(--color-black-alt-rgb), var(--opacity-80));
    --color-black-alt-900: rgba(var(--color-black-alt-rgb), var(--opacity-90));
    --color-black-alt-1000: #1F2329;

    /** Color  Grayscale **/
    --color-gray-100: #F8F8F8;
    --color-gray-200: #EEEEEE;
    --color-gray-300: #DDDDDD;
    --color-gray-400: #e5e5e5;
    --color-gray-500: #bebebe;
    --color-gray-600: #777777;
    --color-gray-700: #666666;
    --color-gray-800: #555555;
    --color-gray-900: #4D4D4D;
    --color-gray-1000: #3D3D3D;

    /** Utility colors **/
    /* Transparent */
    --color-transparent: transparent;

    /* Error */
    --color-error: #a00;

    /** Background colors - Layouts **/
    --color-bg-primary: var(--color-primary-1000);
    --color-bg-primary-hover: var(--color-primary-600);
    --color-bg-secondary: var(--color-secondary-1000);
    --color-bg-secondary-hover: var(--color-secondary-600);
    --color-bg-tertiary: var(--color-tertiary-1000);
    --color-bg-tertiary-hover: var(--color-tertiary-850);
    --color-bg-quaternary: var(--color-quaternary-1000);
    --color-bg-quaternary-hover: var(--color-quaternary-850);
    --color-bg-white-alt: var(--color-bg-light-alt);
    --color-bg-light: var(--color-white-1000);
    --color-bg-light-200: var(--color-white-200);
    --color-bg-light-hover: var(--color-white-alt-hover);
    --color-bg-light-alt: var(--color-white-alt);
    --color-bg-light-alt-hover: var(--color-white-alt-hover);
    --color-bg-dark: var(--color-black-1000);
    --color-bg-dark-hover: var(--color-black-600);
    --color-bg-on-dark-hover: var(--color-white-300);
    --color-bg-dark-alt: var(--color-black-alt-1000);
    --color-bg-dark-alt-hover: var(--color-black-alt-600);
    --color-bg-gray: var(--color-gray-1000);
    --color-bg-gray-hover: var(--color-gray-600);
    --color-bg-light-gray: var(--color-gray-400);
    --color-bg-light-gray-hover: var(--color-gray-200);
    --color-bg-lighter-gray: var(--color-gray-200);
    --color-bg-lighter-gray-hover: var(--color-gray-100);
    --color-bg-transparent: var(--color-transparent);

    /** Icon colors **/
    /* On backgrounds */
    --color-icon-on-primary: var(--color-black-alt-1000);
    --color-icon-on-secondary: var(--color-white-1000);
    --color-icon-on-tertiary: var(--color-white-1000);
    --color-icon-on-dark: var(--color-white-1000);
    --color-icon-on-light: var(--color-black-alt-1000);
    /* Layouts */
    --color-icon-primary: var(--color-primary-1000);
    --color-icon-primary-hover: var(--color-primary-600);
    --color-icon-secondary: var(--color-secondary-1000);
    --color-icon-secondary-hover: var(--color-secondary-600);
    --color-icon-tertiary: var(--color-tertiary-1000);
    --color-icon-tertiary-hover: var(--color-tertiary-600);
    --color-icon-quaternary: var(--color-quaternary-1000);
    --color-icon-quaternary-hover: var(--color-quaternary-600);
    --color-icon-light-blue: var(--color-light-blue-1000);
    --color-icon-light-blue-hover: var(--color-light-blue-600);
    --color-icon-light: var(--color-white-1000);
    --color-icon-light-hover: var(--color-white-600);
    --color-icon-light-alt: var(--color-white-alt);
    --color-icon-light-alt-hover: var(--color-white-alt-hover);
    --color-icon-dark: var(--color-black-1000);
    --color-icon-dark-hover: var(--color-black-600);
    --color-icon-dark-alt: var(--color-black-alt-1000);
    --color-icon-dark-alt-hover: var(--color-black-alt-600);
    --color-icon-gray: var(--color-gray-1000);
    --color-icon-gray-hover: var(--color-gray-600);

    /** Border colors **/
    /* On backgrounds */
    --color-border-on-primary: var(--color-black-alt-1000);
    --color-border-on-secondary: var(--color-white-1000);
    --color-border-on-tertiary: var(--color-white-1000);
    --color-border-on-dark: var(--color-white-1000);
    --color-border-on-light: var(--color-black-alt-1000);

    /* Layouts */
    --color-border-primary: var(--color-primary-1000);
    --color-border-secondary: var(--color-secondary-1000);
    --color-border-tertiary: var(--color-tertiary-1000);
    --color-border-light-blue: var(--color-light-blue-1000);
    --color-border-light: var(--color-white-1000);
    --color-border-dark: var(--color-black-alt-1000);
    --color-border-gray: var(--color-gray-1000);
    --color-border-light-gray: var(--color-gray-400);
    --color-border-lighter-gray: var(--color-gray-200);
    --color-border-transparent: var(--color-transparent);

    /** Text colors **/
    /* Main */
    --color-text: #1F2329;
    --color-text-rgb: 31, 35, 41;
    --color-text-50: rgba(var(--color-text-rgb), var(--opacity-50));
    --color-text-15: rgba(var(--color-text-rgb), var(--opacity-15));
    --color-text-primary: var(--color-primary-1000);
    --color-text-secondary: var(--color-secondary-1000);
    --color-text-tertiary: var(--color-tertiary-1000);
    --color-text-quaternary: var(--color-quaternary-1000);
    --color-text-gray: var(--color-gray-1000);
    --color-text-light-gray: var(--color-gray-400);
    --color-text-lighter-gray: var(--color-gray-200);
    --color-text-white-alt: var(--color-white-alt);
    /* Functional */
    --color-text-on-primary: var(--color-white-1000);
    --color-text-on-secondary: var(--color-white-1000);
    --color-text-on-tertiary: var(--color-white-1000);
    --color-text-on-quaternary: var(--color-white-1000);
    --color-text-on-dark: var(--color-white-1000);
    --color-text-on-light: var(--color-black-1000);
    /* Dark Alt (para fondos --color-bg-dark-alt) */
    --color-text-on-dark-alt: var(--color-text-on-dark);
    --color-icon-on-dark-alt: var(--color-icon-on-dark);
    --color-placeholder-on-light: var(--color-gray-700);
    --color-placeholder-on-dark: var(--color-gray-300);

    /** Accent colors - On backgrounds **/
    --color-accent-on-primary: var(--color-black-1000);
    --color-accent-on-primary-hover: var(--color-black-600);
    --color-accent-on-secondary: var(--color-white-1000);
    --color-accent-on-secondary-hover: var(--color-white-600);
    --color-accent-on-tertiary: var(--color-white-1000);
    --color-accent-on-tertiary-hover: var(--color-white-600);
    --color-accent-on-light: var(--color-secondary-1000);
    --color-accent-on-light-hover: var(--color-secondary-600);
    --color-accent-on-dark: var(--color-primary-1000);
    --color-accent-on-dark-hover: var(--color-primary-600);

    /*** ELEMENT: Spacings ***/
    /** Scroll **/
    --scroll-padding-top: clamp(125px, 7.5vw + 100px, 225px);
    /* 125px en mobile – 225px en desktop */

    /** General **/
    --space-xxs: 0.125rem;
    /* 2px */
    --space-xs: 0.25rem;
    /* 4px */
    --space-s: 0.375rem;
    /* 6px */
    --space-m: 0.5rem;
    /* 8px */
    --space-l: clamp(0.75rem, 1vw, 1rem);
    /* 12px – fluido – 16px */
    --space-xl: clamp(1rem, 2vw, 1.5rem);
    /* 16px–24px */
    --space-2xl: clamp(1rem, 2vw + 0.5rem, 2rem);
    /* 16px–24px–32px */
    --space-3xl: clamp(1.5rem, 3.7vw + 0.6rem, 2.5rem);
    /* 24px–32px–40px */
    --space-4xl: clamp(1rem, calc((48 - 24) / (1920 - 1336) * (100vw - 1336px) + 1rem), 3rem);
    /* 16px-24px-48px */
    --space-5xl: clamp(1rem, calc((56 - 16) / (1440 - 320) * (100vw - 320px) + 1rem), 3.5rem);
    /* 16px–fluido–56px */
    --space-6xl: clamp(1.5rem, 6vw, 4rem);
    /* 24px – fluido – 64px */
    --space-7xl: clamp(3rem, calc(3rem + 4vw), 7rem);

    /** Functional **/
    --main-padding-x: 1rem;
    /* min 16px, ~64px tablet, max 160px - Para todas las secciones */
    /* Menu */
    --menu-padding-x: 1rem;
    --menu-padding-y: 1rem;
    /* Header Content Container */
    --content-padding-x: clamp(1rem, calc(-5rem + 16.667vw), 10rem);
    /* 24px, ~64px, 160px */
    --content-padding-y: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    /* 32px, ~40px , 72px */
    --content-padding-y-lg: 56px;
    /* Section */
    --section-padding-x: var(--main-padding-x);
    --section-padding-y: clamp(1.5rem, 1rem + 3vw, 4.5rem);
    /* min 24px, ~32px tablet, max 72px - Para todas las secciones */
    /* Buttons */
    --btn-padding-x-xxs: 0.75rem;
    /* 12px */
    --btn-padding-y-xxs: 0.4rem;
    /* 8px */
    --btn-padding-x-xs: 0.875rem;
    /* 14px */
    --btn-padding-y-xs: 0.625rem;
    /* 10px */
    --btn-padding-x-s: 1rem;
    /* 16px */
    --btn-padding-y-s: 0.75rem;
    /* 12px */
    --btn-padding-x-m: clamp(1rem, 2vw, 1.5rem);
    /* 16px-24px */
    --btn-padding-y-m: 0.875rem;
    /* 14px */
    --btn-padding-x-l: 1rem;
    /* 16px */
    --btn-padding-y-l: 1rem;
    /* 16px */
    --btn-padding-x-xl: 0.75rem;
    /* 12px */
    --btn-padding-y-xl: 1.25rem;
    /* 20px */
    /* Buttons Slider */
    --btn-padding-bar: 16px;

    /** Margin **/
    --margin-xs: var(--space-xs);
    --margin-s: var(--space-s);
    --margin-m: var(--space-m);
    --margin-l: var(--space-l);
    --margin-xl: var(--space-xl);
    --margin-2xl: var(--space-2xl);
    --margin-3xl: var(--space-3xl);
    --margin-4xl: var(--space-4xl);
    --margin-5xl: var(--space-5xl);
    --margin-6xl: var(--space-6xl);

    /** Padding **/
    --padding-xs: var(--space-xs);
    --padding-s: var(--space-s);
    --padding-m: var(--space-m);
    --padding-l: var(--space-l);
    --padding-xl: var(--space-xl);
    --padding-2xl: var(--space-2xl);
    --padding-3xl: var(--space-3xl);
    --padding-4xl: var(--space-4xl);
    --padding-5xl: var(--space-5xl);
    --padding-6xl: var(--space-6xl);

    /** Gap **/
    --gap-xxs: var(--space-xxs);
    --gap-xs: var(--space-xs);
    --gap-s: var(--space-s);
    --gap-m: var(--space-m);
    --gap-l: var(--space-l);
    --gap-xl: var(--space-xl);
    --gap-2xl: var(--space-2xl);
    --gap-3xl: var(--space-3xl);
    --gap-4xl: var(--space-4xl);
    --gap-5xl: var(--space-5xl);
    --gap-6xl: var(--space-6xl);

    /*** ELEMENT: Sizes ***/
    /** Border sizes **/
    --border-s: 1px;
    --border-m: 2px;
    --border-l: 4px;
    --border-xl: 6px;
    --border-2xl: 8px;
    --border-3xl: 10px;
    --size-border-multiplier: 1.5;

    /** Border radius **/
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: clamp(16px, 2vw + 12px, 24px);
    --full-radius: 999px;

    /** Dimensiones **/
    /* Contenedores */
    --width-100: var(--percent-100);
    --width-70: var(--percent-100);
    --width-60: var(--percent-100);
    --width-50: var(--percent-100);
    --width-40: var(--percent-100);
    --width-30: var(--percent-100);

    /* Highlights: Info Data */
    --highlight-height: clamp(125px, calc((150 - 125) / (768 - 320) * (100vw - 320px) + 125px), 160px);
    --box-margin: var(--margin-none);

    /* Medias - image, iframe, video */
    /* Por tipo */
    --media-height-slider: clamp(42vh, 16vh + 24vw, 75vh);
    --media-height-hero: 100vh;
    --media-height-flip: 425px;
    --media-height-card: 225px;
    /* Por tamaños */
    --media-height-4xs: 30px;
    --media-height-3xs: clamp(35px, calc((45 - 35) / (768 - 320) * (100vw - 320px) + 35px), 45px);
    --media-height-xxs: clamp(50px, calc((60 - 50) / (768 - 320) * (100vw - 320px) + 50px), 60px);
    --media-height-xs: clamp(100px, calc((175 - 100) / (768 - 320) * (100vw - 320px) + 100px), 175px);
    --media-height-s: clamp(175px, calc((200 - 175) / (768 - 320) * (100vw - 320px) + 175px), 200px);
    --media-height-m: clamp(175px, calc((300 - 175) / (768 - 320) * (100vw - 320px) + 175px), 300px);
    --media-height-l: clamp(175px, calc((300 - 175) / (768 - 320) * (100vw - 320px) + 175px), 400px);
    --media-height-xl: clamp(175px, calc((300 - 175) / (768 - 320) * (100vw - 320px) + 175px), 500px);
    /* Iconos */
    --icon-s: 0.875rem;
    /* 14px */
    --icon-m: clamp(1rem, 1.3vw, 1.125rem);
    /* 16px a 18px */
    --icon-l: 1.375rem;
    /* 22px */
    --icon-xl: clamp(1.375rem, 1.5vw + 0.25rem, 1.75rem);
    /* 22px–28px */
    --icon-2xl: clamp(1.375rem, 2vw + 0.25rem, 2rem);
    /* 22px–32px */
    --icon-3xl: clamp(2rem, 2.5vw + 0.5rem, 2.5rem);
    /* 32px – fluido – 40px */
    --icon-4xl: clamp(3rem, 5vw + 1rem, 6rem);
    /* 48px – fluido – 96px */
    /* Logos */
    --logo-height-brand-menu: 25px;
    --logo-width-brand-menu: 45px;
    --logo-height-brand-footer: 60px;
    --logo-width-brand-footer: 100px;

    /*** ELEMENT: Transforms & Effects ***/
    /** Z-Index system **/
    --z-index-base: 0;
    --z-index-dropdown: 10;
    --z-index-overlay: 20;
    --z-index-modal: 30;
    --z-index-toast: 40;
    --z-index-tooltip: 50;

    /** Transition durations **/
    --transition-fast: all 150ms ease-in-out;
    --transition-medium: all 300ms ease-in-out;
    --transition-slow: all 500ms ease-in-out;

    /** Shadows **/
    /* General */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-l: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Botones */
    --button-shadow-hover: -2px 2px 6px 0px rgba(var(--color-black-rgb), 0.4);
    --button-shadow-pressed: -2px 2px 6px 0px rgba(var(--color-black-rgb), 0.2) inset;

    /* Secciones y tarjetas */
    --shadow-section: 0 6px 8px rgba(var(--color-black-rgb), var(--opacity-15));
    --shadow-container-s: 0 2px 6px rgba(var(--color-black-rgb), var(--opacity-10));
    --shadow-container-m: 0 4px 10px rgba(var(--color-black-rgb), var(--opacity-20));

    /* Inputs */
    --shadow-input: 0 0 10px rgba(var(--color-primary-rgb), var(--opacity-20));

    /** Overlays & Gradients **/
    /* Tamaño del overlay */
    --size-image-overlay-sm: 300px;
    --size-image-overlay-md: 400px;
    --size-image-overlay-lg: 500px;
    /* Versiones en negro */
    --gradient-black-bottom-medium: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.85) 100%);
    --gradient-black-bottom-hard: linear-gradient(to bottom, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.85) 100%);
    /* Versiones en blanco */
    --gradient-white-bottom-medium: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.85) 100%);
    --gradient-white-bottom-hard: linear-gradient(to bottom, transparent 0%, transparent 45%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.20) 55%, rgba(255, 255, 255, 0.40) 60%, rgba(255, 255, 255, 0.60) 70%, rgba(255, 255, 255, 0.80) 80%, rgba(255, 255, 255, 0.90) 90%, rgba(255, 255, 255, 1) 100%);
    /* Por función */
    --gradient-black-bottom-header: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 0.95) 100%);
    --gradient-white-bottom-header: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.95) 100%);
    /* Gradiente más pronunciado */
    --gradient-primary-top-black-bottom-slide: linear-gradient(180deg,
            rgba(var(--color-primary-rgb), var(--opacity-70)) 0%,
            rgba(var(--color-primary-rgb), var(--opacity-50)) 15%,
            transparent 35%,
            transparent 45%,
            rgba(var(--color-black-rgb), var(--opacity-70)) 65%,
            rgba(var(--color-black-rgb), var(--opacity-90)) 100%);
    --gradient-secondary-top-black-bottom-slide: linear-gradient(180deg,
            rgba(var(--color-secondary-rgb), var(--opacity-70)) 0%,
            rgba(var(--color-secondary-rgb), var(--opacity-50)) 15%,
            transparent 35%,
            transparent 45%,
            rgba(var(--color-black-rgb), var(--opacity-70)) 65%,
            rgba(var(--color-black-rgb), var(--opacity-90)) 100%);
    --gradient-tertiary-top-black-bottom-slide: linear-gradient(180deg,
            rgba(var(--color-tertiary-rgb), var(--opacity-70)) 0%,
            rgba(var(--color-tertiary-rgb), var(--opacity-50)) 15%,
            transparent 35%,
            transparent 45%,
            rgba(var(--color-black-rgb), var(--opacity-70)) 65%,
            rgba(var(--color-black-rgb), var(--opacity-90)) 100%);
}

/*=================================================================
	BLOQUE: MEDIA QUERY
=================================================================*/
@media screen and (min-width:325px) {
    :root {
        --media-height-card: 250px;
    }
}

@media screen and (min-width:425px) {
    :root {
        --media-height-card: 275px;
    }
}

@media screen and (min-width:480px) {
    :root {
        --lh-text-h1-child: 1.15;
        --media-height-card: clamp(175px, calc((200 - 175) / (768 - 320) * (100vw - 320px) + 175px), 225px);
        --box-margin: var(--margin-5xl);
        --logo-height-brand-menu: 35px;
        --logo-width-brand-menu: 65px;
        --logo-height-brand-footer: 90px;
        --logo-width-brand-footer: 150px;
        --content-padding-y-lg: clamp(2rem, 1.5rem + 3vw, 4.5rem);
        /* 32px, ~40px , 72px */
        --gradient-primary-top-black-bottom-slide: linear-gradient(180deg,
                rgba(var(--color-primary-rgb), var(--opacity-70)) 0%,
                /* Verde casi sólido */
                rgba(var(--color-primary-rgb), var(--opacity-50)) 15%,
                transparent 35%,
                transparent 45%,
                rgba(var(--color-black-rgb), var(--opacity-75)) 75%,
                rgba(var(--color-black-rgb), var(--opacity-90)) 100%);
        --gradient-secondary-top-black-bottom-slide: linear-gradient(180deg,
                rgba(var(--color-secondary-rgb), var(--opacity-70)) 0%,
                /* Verde casi sólido */
                rgba(var(--color-secondary-rgb), var(--opacity-50)) 15%,
                transparent 35%,
                transparent 45%,
                rgba(var(--color-black-rgb), var(--opacity-75)) 75%,
                rgba(var(--color-black-rgb), var(--opacity-90)) 100%);
        --gradient-tertiary-top-black-bottom-slide: linear-gradient(180deg,
                rgba(var(--color-tertiary-rgb), var(--opacity-70)) 0%,
                /* Verde casi sólido */
                rgba(var(--color-tertiary-rgb), var(--opacity-50)) 15%,
                transparent 35%,
                transparent 45%,
                rgba(var(--color-black-rgb), var(--opacity-75)) 75%,
                rgba(var(--color-black-rgb), var(--opacity-90)) 100%);
    }
}

@media screen and (min-width:768px) {
    :root {
        --btn-padding-x-xl: 2rem;
        /* 32px */
        --btn-padding-y-l: 1.125rem;
        /* 18px */
        --btn-padding-x-l: 1.75rem;
        /* 28px */
        --btn-padding-bar: clamp(1.5rem, 1.5rem + 3vw, 4.5rem);
        /* 24px, ~ calc fluido, 72px */
        --media-height-flip: 400px;
    }
}

@media screen and (min-width:1024px) {
    :root {
        /* Contenedores */
        --width-70: var(--percent-70);
        --width-60: var(--percent-60);
        --width-50: var(--percent-50);
        --width-40: var(--percent-40);
        --width-30: var(--percent-30);
    }
}

@media screen and (min-width:1280px) {
    :root {
        --main-padding-x: clamp(1rem, -0.5rem + 9vw, 10rem);
        /*min 16px, ~64px tablet, max 160px - Para todas las secciones*/
        /*--main-padding-x: clamp(7.5rem, calc(5.625rem + 7.5vw), 15rem);*/
        --menu-padding-x: clamp(1rem, 0.5rem + 5vw, 3.125rem);
        /* min 16px, fluido, max 60px */
        --menu-padding-y: clamp(1rem, 0.5rem + 2vw, 2rem);
        /* min 16px, ~24px en tablet, max 32px */
    }
}