:root {

  /* Tipografías */
  /* Neuw Haas Grothec Display PRO */
  --font-title: 'NeueHaasGroteskDisplayPRO', sans-serif;

  /* Trade Gothic Next LT PRO*/
  --font-text: 'TradeGothicNextLTPro', sans-serif;
	
  /* Pesos */
  --font-weight-xtihn: 100;
  --font-weight-tihn: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Estilos */
  --font-style-normal: normal;
  --font-style-italic: italic;
  --font-style-oblique: oblique;

  /* Colores globales */
  --color-primary: #231F20;
  --color-secondary: #750014;
  --color-text: #000000;
  --color-accent: #750014;
  --color-light: #FFFFFF;
  --color-light-gray: #F6F6F6;
  --color-transparent-black: #00000001;

  /* Tamaños de títulos */
  --h1: clamp(2.33rem, 1.5rem + 3vw, 3.33rem);
  /* min: 42px | max: 60px */
  --h2: clamp(1.86rem, 1.4rem + 2.5vw, 2.66rem);
  /* min: 33.5px | max: 48px */
  --h3: clamp(1.55rem, 1.2rem + 2vw, 2.22rem);
  /* min: 28px   | max: 40px */
  --h4: clamp(1.24rem, 1rem + 1.5vw, 1.77rem);
  /* min: 22.3px | max: 32px */
  --h5: clamp(1.11rem, 0.9rem + 1vw, 1.44rem);
  /* min: 20px   | max: 26px */
  --h6: clamp(1.11rem, 1.11rem, 1.11rem);
  /* fijo: 20px */

  /* Tamaños de texto */
  --text-m: clamp(1rem, 1rem, 1rem);
  /* fijo: 18px */
  --text-s: clamp(0.888rem, 0.888rem, 0.888rem);
  /* fijo: 16px */
  --text-xs: clamp(0.777rem, 0.777rem, 0.777rem);
  /* fijo: 14px */
  --text-xxs: clamp(0.666rem, 0.666rem, 0.666rem);
  /* fijo: 12px */

  /* Altura de línea para títulos */
  --lh-h1: clamp(2.5rem, 2rem + 1vw, 3.5rem);
  /* min: 40px | max: 56px */
  --lh-h2: clamp(2.25rem, 1.8rem + 1vw, 3.25rem);
  /* min: 36px | max: 52px */
  --lh-h3: clamp(2rem, 1.6rem + 1vw, 3rem);
  /* min: 32px | max: 48px */
  --lh-h4: clamp(1.75rem, 1.4rem + 0.8vw, 2.5rem);
  /* min: 28px | max: 40px */
  --lh-h5: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  /* min: 24px | max: 32px */
  --lh-h6: clamp(1.25rem, 1rem + 0.6vw, 1.75rem);
  /* min: 20px | max: 28px */

  /* Altura de línea para textos */
  --lh-text-m: 1.5rem;
  /* fijo: 24px (para 18px de texto) */
  --lh-text-s: 1.333rem;
  /* fijo: ~21.33px (para 16px de texto) */
  --lh-text-xs: 1.2rem;
  /* fijo: ~19.2px (para 14px de texto) */
  --lh-text-xxs: 1rem;
  /* fijo: 16px (para 12px de texto) */
	
	/******************************************************
	 * Padding fluido para secciones y elementos
	*******************************************************/
	--padding-xs: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);   /* ideal para componentes pequeños o inputs */
	--padding-sm: clamp(1rem, 0.75rem + 1vw, 2rem);        /* secciones internas, bloques simples */
	--padding-md: clamp(2rem, 1rem + 2vw, 3rem);           /* secciones generales */
	--padding-lg: clamp(3rem, 1.5rem + 3vw, 4.5rem);       /* bloques importantes (hero, CTA) clamp(3rem, 1.5rem + 3vw, 4.5rem) */
	--padding-xl: clamp(4rem, 2rem + 4vw, 6rem);           /* grandes espacios verticales, portada */

}