@font-face {
  font-family: "Bellefair";
  src: url("../fonts/Bellefair-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Importante para el rendimiento (evita el FOUT) */
}

:root {
  /* Fonts */
  --font-main: "Tahoma", "Verdana", sans-serif;
  --font-titles: "Bellefair", sans-serif;

  /* Font Sizes */
  --font-h1: clamp(1.75rem, 1.45rem + 1.25vw, 2rem); /* 28px → 32px */
  --font-h2: clamp(1.5rem, 1.3rem + 0.95vw, 1.75rem); /* 24px → 28px */
  --font-h3: clamp(1.35rem, 1.2rem + 0.75vw, 1.5rem); /* 21px → 24px */
  --font-h4: clamp(1.25rem, 1.1154rem + 0.6731vw, 1.5rem); /* 20px → 24px */
  --font-h5: clamp(1.125rem, 1.0481rem + 0.3846vw, 1.25rem); /* 18px → 20px */
  --font-p: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); /* 14px → 16px */

  /* Colors */
  --color-principal: oklch(31.893% 0.07349 255.117);
  --color-seccondary: oklch(48.923% 0.10876 242.088);
  --color-complementary: oklch(75.483% 0.00112 12.953);
  --color-light: oklch(99.107% 0.00011 271.152);
  --color-text: oklch(32.109% 0.00004 271.152);
  --color-contrast-dark: oklch(33.168% 0.12448 352.292);
  --color-contrast-light: oklch(44.755% 0.16095 353.727);

  /* Unit */
  --space-unit: 1rem;

  /* Paddings */
  --p-sm: calc(var(--space-unit) * 0.5); /* 8px */
  --p-md: var(--space-unit);
  --p-lg: calc(var(--space-unit) * 1.5); /* 24px */
  --p-xl: calc(var(--space-unit) * 3); /* 48px */

  /* Margins */
  --m-sm: calc(var(--space-unit) * 0.5); /* 8px */
  --m-md: var(--space-unit);
  --m-lg: calc(var(--space-unit) * 1.5); /* 24px */
  --m-xl: calc(var(--space-unit) * 3); /* 48px */
  --m-xxl: calc(var(--space-unit) * 4.5); /* 72px */

  /* Transitions */

  --tr-short-time: 0.3s;
  --tr-simple: ease;
}

/* ==========================================
   Breakpoints - Mobile First

   Base : 0px
   sm   : 576px
   md   : 768px
   lg   : 992px
   xl   : 1200px
   xxl  : 1400px

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