:root {
  /*==================================================
TIPOGRAFÍA
==================================================*/

  --font-heading: "DM Serif Display", serif;
  --font-body: "Montserrat", sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --line-tight: 1.05;
  --line-heading: 1.15;
  --line-body: 1.65;
  --line-loose: 1.85;

  --letter-tight: -0.03em;
  --letter-normal: 0;
  --letter-wide: 0.06em;

  /*==================================================
ESCALA ESPACIADO
(8pt Design System)
==================================================*/

  --space-3xs: 0.125rem; /*2*/
  --space-2xs: 0.25rem; /*4*/
  --space-xs: 0.5rem; /*8*/
  --space-sm: 0.75rem; /*12*/
  --space-md: 1rem; /*16*/
  --space-lg: 1.5rem; /*24*/
  --space-xl: 2rem; /*32*/
  --space-2xl: 3rem; /*48*/
  --space-3xl: 4rem; /*64*/
  --space-4xl: 6rem; /*96*/
  --space-5xl: 8rem; /*128*/
  --space-6xl: 10rem; /*160*/

  /*==================================================
LAYOUT
==================================================*/

  --container-sm: 720px;
  --container-md: 900px;
  --container-lg: 1080px;
  --container-xl: 1200px;
  --container-2xl: 1320px;

  --header-height: 5.25rem;

  --section-padding: clamp(5rem, 8vw, 8rem);

  --section-padding-sm: clamp(3rem, 6vw, 5rem);

  --section-padding-lg: clamp(7rem, 10vw, 10rem);

  /*==================================================
BREAKPOINTS
(documentación)
==================================================*/

  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;
  --bp-2xl: 1440px;

  /*==================================================
TIPOGRAFÍA FLUIDA
==================================================*/

  --text-xs: clamp(0.78rem, 0.76rem + 0.08vw, 0.82rem);

  --text-sm: clamp(0.9rem, 0.87rem + 0.18vw, 0.96rem);

  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.08rem);

  --text-md: clamp(1.1rem, 1.02rem + 0.35vw, 1.25rem);

  --text-lg: clamp(1.15rem, 1rem + 0.4vw, 1.4rem);

  --text-xl: clamp(1.6rem, 1.3rem + 0.8vw, 2rem);

  --text-h4: clamp(1.8rem, 1.45rem + 0.9vw, 2.3rem);

  --text-h3: clamp(2.3rem, 1.7rem + 1.4vw, 3rem);

  --text-h2: clamp(3rem, 2.2rem + 2vw, 4.4rem);

  --text-h1: clamp(2.8rem, 2rem + 4vw, 5.5rem);

  --text-display: clamp(5rem, 3rem + 5vw, 8rem);

  /*==================================================
IDENTIDAD
==================================================*/

  --brand: #4747e2;
  --brand-dark: #393452;
  --brand-light: #bfd0fe;
  --blue-deep: #0b102b;
  --brand-purple: #5f39c4;

  /*==================================================
  TRAYECTORIAS DEL HERO
  ==================================================*/

  --trajectory-purple: #4747e2;
  --trajectory-blue: #4d8bf2;
  --trajectory-lavender: #bfd0fe;

  /*==================================================
SUPERFICIES
==================================================*/

  --surface-body: #f9fbf2;

  /*==================================================
TEXTOS
==================================================*/

  --text-primary: #25243a;
  --text-secondary: #626174;

  /*==================================================
BORDERS
==================================================*/

  --border-light: 1px solid rgba(57, 52, 82, 0.08);

  --border-medium: 1px solid rgba(57, 52, 82, 0.14);

  --border-strong: 2px solid var(--brand);

  /*==================================================
  RADIOS
  ==================================================*/

  --radius-xs: 0.375rem; /* 6 */
  --radius-sm: 0.625rem; /* 10 */
  --radius-md: 1rem; /* 16 */
  --radius-lg: 1.5rem; /* 24 */
  --radius-xl: 2rem; /* 32 */

  --radius-pill: 999px;

  /*==================================================
  SOMBRAS
  ==================================================*/

  --shadow-xs: 0 2px 8px rgba(57, 52, 82, 0.03);

  --shadow-sm: 0 8px 20px rgba(57, 52, 82, 0.05);

  --shadow-md: 0 14px 40px rgba(57, 52, 82, 0.07);

  --shadow-lg: 0 24px 60px rgba(57, 52, 82, 0.1);

  --shadow-xl: 0 40px 90px rgba(57, 52, 82, 0.14);

  --shadow-brand: 0 18px 40px rgba(71, 71, 226, 0.18);

  /*==================================================
BLUR
==================================================*/

  --blur-xs: 8px;
  --blur-sm: 18px;
  --blur-md: 40px;
  --blur-lg: 80px;
  --blur-xl: 140px;

  /*==================================================
  BOTONES
  ==================================================*/

  --btn-height: 56px;

  --btn-padding-inline: 1.5rem;

  --btn-radius: 0.625rem;

  --btn-gap: 0.75rem;

  /*==================================================
HEADER
==================================================*/

  --header-bg: rgba(249, 251, 242, 0.92);

  --header-bg-scrolled: rgba(249, 251, 242, 0.97);

  --header-border: rgba(57, 52, 82, 0.08);

  --header-blur: 14px;

  --header-height-scrolled: 4.25rem; /* 68px */

  /*==================================================
Z INDEX
==================================================*/

  --z-loader: 99999;
  --z-modal: 9999;
  --z-header: 500;
  --z-overlay: 400;
  --z-dropdown: 300;
  --z-floating: 200;
  --z-content: 10;

  /*==================================================
TRANSICIONES
==================================================*/

  --speed-fast: 0.18s;
  --speed-base: 0.35s;
  --speed-slow: 0.6s;
  --speed-ultra: 1.1s;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --ease-in: cubic-bezier(0.65, 0, 0.35, 1);

  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  /*==================================================
  HERO / SVG
  ==================================================*/

  --hero-ring-opacity: 0.055;

  --hero-path-width: 2.3px;
}