: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: 'Poppins', sans-serif;
--font-title: var(--font-primary);
--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, 4.5rem); /* 32px – 64px – 72px */
	--h1-child: clamp(1.5rem, 3.5vw + 0.5rem, 3rem); /* 24px – 32px – 48px */
    --h2: clamp(1.5rem, 3.5vw + 0.5rem, 2.5rem); /* 24px – 32px – 40px */
    --h3: clamp(1.25rem, 1.7vw + 0.5rem, 2rem); /* 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-3xl);

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

/** 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: 176, 210, 53;
--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: #B0D235;

/** Color  Secondary **/
--color-secondary-rgb: 69, 100, 255;
--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: #4564FF;

/** Color  Tertiary **/
--color-tertiary-rgb: 255, 118, 49;
--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: #FF7631;

/** 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: #F4F4F6;
    --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: #383838;

/** 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;

    /* Light Blue */
    --color-light-blue-rgb: 211, 217, 233;
    --color-light-blue-0: rgba(var(--color-light-blue-rgb), var(--opacity-0));
    --color-light-blue-100: rgba(var(--color-light-blue-rgb), var(--opacity-10));
    --color-light-blue-200: rgba(var(--color-light-blue-rgb), var(--opacity-20));
    --color-light-blue-300: rgba(var(--color-light-blue-rgb), var(--opacity-30));
    --color-light-blue-400: rgba(var(--color-light-blue-rgb), var(--opacity-40));
    --color-light-blue-500: rgba(var(--color-light-blue-rgb), var(--opacity-50));
    --color-light-blue-600: rgba(var(--color-light-blue-rgb), var(--opacity-60));
    --color-light-blue-700: rgba(var(--color-light-blue-rgb), var(--opacity-70));
    --color-light-blue-800: rgba(var(--color-light-blue-rgb), var(--opacity-80));
    --color-light-blue-900: rgba(var(--color-light-blue-rgb), var(--opacity-90));
    --color-light-blue-1000: #D3D9E9;
	
	/* 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-light-blue: var(--color-light-blue-1000);
--color-bg-light-blue-hover: var(--color-light-blue-600);
--color-bg-light: var(--color-white-1000);
--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-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-primary: var(--color-primary-1000);
    --color-text-secondary: var(--color-secondary-1000);
    --color-text-tertiary: var(--color-tertiary-1000);
    --color-text-gray: var(--color-gray-1000);
    --color-text-light-gray: var(--color-gray-400);
    --color-text-lighter-gray: var(--color-gray-200);
    /* Functional */
    --color-text-on-primary: var(--color-black-1000);
    --color-text-on-secondary: var(--color-white-1000);
    --color-text-on-tertiary: var(--color-white-1000);
    --color-text-on-dark: var(--color-white-1000);
    --color-text-on-light: var(--color-black-1000);
	--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 */
    }
}
/* Actualización 10/10/2025 06:24 */