/* ===================================================================
   CORE — Variáveis e Classes Base
   Sistema CSS unificado: variáveis, utilities e classes de secção.

   Breakpoints de referência:
   --breakpoint-mobile:        ≤ 767px
   --breakpoint-tablet:        768px – 1024px
   --breakpoint-desktop:       ≥ 1025px
   --breakpoint-widescreen:    ≥ 1920px
   ===================================================================

   ÍNDICE
   -------------------------------------------------------------------
    1. VARIÁVEIS (:root) ............ cores, spacing, radius, shadows,
                                      section padding/layout, fonts
    2. BASE ......................... html font-size + override mobile
    3. BORDER ....................... width, lados, inline/block, style
    4. MARGIN ....................... all, top/right/bottom/left,
                                      inline/block · escala 0→3xl
    5. PADDING ...................... all, top/right/bottom/left,
                                      inline/block · escala 0→3xl
    6. GAP .......................... gap, row-gap, column-gap
    7. BORDER RADIUS ................ .radius-0 → .radius-round
    8. SHADOWS ...................... .shadow-none → .shadow-xl
    9. SECÇÕES — Padding fluido ..... block (clamp) + inline por escala
   10. SECÇÕES — Layout ............. hero, full, narrow, offset
   11. SECÇÕES — Estrutura .......... resets + alinhamento colunas/conteúdo
   12. SECÇÕES — Responsivo ......... stack / hide / reverse (m + t)
   13. SECÇÕES — Radius e shadow .... aplicado a elementos Elementor
   14. SECÇÕES — Overlays ........... overlay / light / dark
   15. SECÇÕES — Sticky e z-index ... sticky-top/offset + z-index-*
   16. SECÇÕES — Colunas ............ column-gap-* + equal-height
   17. SECÇÕES — Background ......... fixed, cover, contain, repeat
   18. SECÇÕES — Dividers ........... divider-top / divider-bottom
   19. SECÇÕES — Header e footer .... transparent, sticky, footer
   20. SECÇÕES — Transições ......... transition / slow / fast
   21. WIDGETS — Alinhamento ........ widget-center/left/right, narrow
   22. ESTADOS (toggle via JS) ...... is-visible/hidden/active/inactive
   23. HELPERS — Position .......... relative, absolute, fixed
   24. HELPERS — Display ........... block, inline-block, flex, none
   25. HELPERS — Overflow .......... hidden, visible, auto
   26. HELPERS — Text align ........ center, left, right
   27. HELPERS — Width / height .... width/height-100, auto, 100vh
   28. HELPERS — Flex .............. grow, row/column, wrap, center
   29. ELEMENTOR — Resets .......... widget margins, .e-con, text-editor
   30. TEXTO ....................... family, size, height, transform,
                                      style, weight, spacing, balance
   31. SVG — Fill .................. white, black, grey-050/200/950
   32. ASPECT RATIO ................ base + m / t / tm / w
   -------------------------------------------------------------------
   =================================================================== */
:root {
  
  /* ----- Border width ----- */
  --border-0: 0px;
  --border-1: 1px;

  /* ----- Spacing scale - VALORES FIXOS ----- */
  --space-0:   0px;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /*   2px */
  --space-1:   0.25rem;   /*   4px */
  --space-1-5: 0.375rem;  /*   6px */
  --space-2:   0.5rem;    /*   8px */
  --space-2-5: 0.625rem;  /*  10px */
  --space-3:   0.75rem;   /*  12px */
  --space-4:   1rem;      /*  16px */
  --space-6:   1.5rem;    /*  24px */
  --space-8:   2rem;      /*  32px */
  --space-11:  2.75rem;   /*  44px */
  --space-16:  4rem;      /*  64px */
  --space-24:  6rem;      /*  96px */

  /* ----- Border radius ----- */
  --radius-xs:    2px;
  --radius-s:     4px;
  --radius-m:     8px;
  --radius-l:     16px;
  --radius-xl:    24px;
  --radius-2xl:   48px;
  --radius-3xl:   72px;
  --radius-round: 50%;

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

  /* ----- Section padding (inline / lados) ----- */
  --fluid-side-padding-min: 1.25rem; /* 20px */
  --fluid-side-padding-max: 5rem;    /* 80px */

  /* ----- Section padding (block / topo-fundo) ----- */
  --section-xxl-padding-min:    9.375rem; /* 150px */
  --section-xxl-padding-max:    10rem;    /* 160px */
  --section-xl-padding-min:     6.875rem; /* 110px */
  --section-xl-padding-max:     7.5rem;   /* 120px */
  --section-l-padding-min:      5.625rem; /* 90px */
  --section-l-padding-max:      6.25rem;  /* 100px */
  --section-m-padding-min:      5rem;     /* 80px */
  --section-m-padding-max:      5rem;     /* 80px */
  --section-s-padding-min:      3.75rem;  /* 60px */
  --section-s-padding-max:      3.75rem;  /* 60px */
  --section-xs-padding-min:     2.5rem;   /* 40px */
  --section-xs-padding-max:     2.5rem;   /* 40px */
  --section-xxs-padding-min:    1.5rem;   /* 24px */
  --section-xxs-padding-max:    1.5rem;   /* 24px */
  --section-header-padding-min: 1.25rem;  /* 20px */
  --section-header-padding-max: 1.25rem;  /* 20px */

  /* ----- Section layout ----- */
  --section-hero-height:   100vh;   /* altura total do ecrã */
  --section-offset-header: 80px;    /* margem negativa do header em overlay */
  --section-narrow:        62.5rem; /* 1000px */
  --section-narrow-xs:     45rem;   /* 720px */

  /* ----- Font size ----- */
  --font-size-1:  2.986em;
  --font-size-2:  2.488em;
  --font-size-3:  2.074em;
  --font-size-4:  1.728em;
  --font-size-5:  1.44em;
  --font-size-6:  1.2em;
  --font-size-7:  1em;
  --font-size-s:  0.833em;
  --font-size-xs: 0.694em;

  /* ----- Line height ----- */
  --font-height-3xl: 1.4em;
  --font-height-2xl: 1.3em;
  --font-height-xl:  1.2em;
  --font-height-l:   1.1em;
  --font-height-m:   1em;
  --font-height-s:   0.9em;
  --font-height-xs:  0.8em;
  --font-height-0:   0px;
}

/* ----- Font size: override mobile (≤768px) ----- */
@media (max-width: 768px) {
  :root {
    --font-size-1:  2.027em;
    --font-size-2:  1.802em;
    --font-size-3:  1.602em;
    --font-size-4:  1.424em;
    --font-size-5:  1.266em;
    --font-size-6:  1.125em;
    --font-size-7:  1em;
    --font-size-s:  0.889em;
    --font-size-xs: 0.79em;
  }
}

/* ===================================================================
   2. BASE
   =================================================================== */
html {
  font-size: 16px;
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
}

/* ===================================================================
   3. BORDER
   =================================================================== */
/* ----- Width: todos os lados ----- */
.border-0 { border-width: var(--border-0) !important; }
.border-1 { border-width: var(--border-1) !important; }

/* ----- Width: lados individuais ----- */
.border-top-0    { border-top-width:    var(--border-0) !important; }
.border-top-1    { border-top-width:    var(--border-1) !important; }
.border-right-0  { border-right-width:  var(--border-0) !important; }
.border-right-1  { border-right-width:  var(--border-1) !important; }
.border-bottom-0 { border-bottom-width: var(--border-0) !important; }
.border-bottom-1 { border-bottom-width: var(--border-1) !important; }
.border-left-0   { border-left-width:   var(--border-0) !important; }
.border-left-1   { border-left-width:   var(--border-1) !important; }

/* ----- Width: inline / block ----- */
.border-inline-0 { border-left-width:  var(--border-0) !important; border-right-width:  var(--border-0) !important; }
.border-inline-1 { border-left-width:  var(--border-1) !important; border-right-width:  var(--border-1) !important; }
.border-block-0  { border-top-width:   var(--border-0) !important; border-bottom-width: var(--border-0) !important; }
.border-block-1  { border-top-width:   var(--border-1) !important; border-bottom-width: var(--border-1) !important; }

/* ----- Style ----- */
.border-solid  { border-style: solid  !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }
.border-none   { border-style: none   !important; }

/* ===================================================================
   4. MARGIN (com mapeamento desktop/mobile)
   =================================================================== */
/* ----- DESKTOP (≥1025px) ----- */
.m-0   { margin: 0 !important; }
.m-1   { margin: var(--space-px) !important; }
.m-3xs { margin: var(--space-1) !important; }
.m-2xs { margin: var(--space-1-5) !important; }
.m-xs  { margin: var(--space-2-5) !important; }
.m-s   { margin: var(--space-4) !important; }
.m-m   { margin: var(--space-6) !important; }
.m-l   { margin: var(--space-8) !important; }
.m-xl  { margin: var(--space-11) !important; }
.m-2xl { margin: var(--space-16) !important; }
.m-3xl { margin: var(--space-24) !important; }

.mt-0   { margin-top: 0 !important; }
.mt-1   { margin-top: var(--space-px) !important; }
.mt-3xs { margin-top: var(--space-1) !important; }
.mt-2xs { margin-top: var(--space-1-5) !important; }
.mt-xs  { margin-top: var(--space-2-5) !important; }
.mt-s   { margin-top: var(--space-4) !important; }
.mt-m   { margin-top: var(--space-6) !important; }
.mt-l   { margin-top: var(--space-8) !important; }
.mt-xl  { margin-top: var(--space-11) !important; }
.mt-2xl { margin-top: var(--space-16) !important; }
.mt-3xl { margin-top: var(--space-24) !important; }

.mr-0   { margin-right: 0 !important; }
.mr-1   { margin-right: var(--space-px) !important; }
.mr-3xs { margin-right: var(--space-1) !important; }
.mr-2xs { margin-right: var(--space-1-5) !important; }
.mr-xs  { margin-right: var(--space-2-5) !important; }
.mr-s   { margin-right: var(--space-4) !important; }
.mr-m   { margin-right: var(--space-6) !important; }
.mr-l   { margin-right: var(--space-8) !important; }
.mr-xl  { margin-right: var(--space-11) !important; }
.mr-2xl { margin-right: var(--space-16) !important; }
.mr-3xl { margin-right: var(--space-24) !important; }

.mb-0   { margin-bottom: 0 !important; }
.mb-1   { margin-bottom: var(--space-px) !important; }
.mb-3xs { margin-bottom: var(--space-1) !important; }
.mb-2xs { margin-bottom: var(--space-1-5) !important; }
.mb-xs  { margin-bottom: var(--space-2-5) !important; }
.mb-s   { margin-bottom: var(--space-4) !important; }
.mb-m   { margin-bottom: var(--space-6) !important; }
.mb-l   { margin-bottom: var(--space-8) !important; }
.mb-xl  { margin-bottom: var(--space-11) !important; }
.mb-2xl { margin-bottom: var(--space-16) !important; }
.mb-3xl { margin-bottom: var(--space-24) !important; }

.ml-0   { margin-left: 0 !important; }
.ml-1   { margin-left: var(--space-px) !important; }
.ml-3xs { margin-left: var(--space-1) !important; }
.ml-2xs { margin-left: var(--space-1-5) !important; }
.ml-xs  { margin-left: var(--space-2-5) !important; }
.ml-s   { margin-left: var(--space-4) !important; }
.ml-m   { margin-left: var(--space-6) !important; }
.ml-l   { margin-left: var(--space-8) !important; }
.ml-xl  { margin-left: var(--space-11) !important; }
.ml-2xl { margin-left: var(--space-16) !important; }
.ml-3xl { margin-left: var(--space-24) !important; }

.mx-0   { margin-left: 0 !important;                   margin-right: 0 !important; }
.mx-1   { margin-left: var(--space-px) !important;    margin-right: var(--space-px) !important; }
.mx-3xs { margin-left: var(--space-1) !important;     margin-right: var(--space-1) !important; }
.mx-2xs { margin-left: var(--space-1-5) !important;   margin-right: var(--space-1-5) !important; }
.mx-xs  { margin-left: var(--space-2-5) !important;   margin-right: var(--space-2-5) !important; }
.mx-s   { margin-left: var(--space-4) !important;     margin-right: var(--space-4) !important; }
.mx-m   { margin-left: var(--space-6) !important;     margin-right: var(--space-6) !important; }
.mx-l   { margin-left: var(--space-8) !important;     margin-right: var(--space-8) !important; }
.mx-xl  { margin-left: var(--space-11) !important;    margin-right: var(--space-11) !important; }
.mx-2xl { margin-left: var(--space-16) !important;    margin-right: var(--space-16) !important; }
.mx-3xl { margin-left: var(--space-24) !important;    margin-right: var(--space-24) !important; }

.my-0   { margin-top: 0 !important;                   margin-bottom: 0 !important; }
.my-1   { margin-top: var(--space-px) !important;    margin-bottom: var(--space-px) !important; }
.my-3xs { margin-top: var(--space-1) !important;     margin-bottom: var(--space-1) !important; }
.my-2xs { margin-top: var(--space-1-5) !important;   margin-bottom: var(--space-1-5) !important; }
.my-xs  { margin-top: var(--space-2-5) !important;   margin-bottom: var(--space-2-5) !important; }
.my-s   { margin-top: var(--space-4) !important;     margin-bottom: var(--space-4) !important; }
.my-m   { margin-top: var(--space-6) !important;     margin-bottom: var(--space-6) !important; }
.my-l   { margin-top: var(--space-8) !important;     margin-bottom: var(--space-8) !important; }
.my-xl  { margin-top: var(--space-11) !important;    margin-bottom: var(--space-11) !important; }
.my-2xl { margin-top: var(--space-16) !important;    margin-bottom: var(--space-16) !important; }
.my-3xl { margin-top: var(--space-24) !important;    margin-bottom: var(--space-24) !important; }

/* ----- MOBILE (≤767px) - Mapeamento para variáveis menores ----- */
@media (max-width: 767px) {
  .m-3xs { margin: var(--space-px) !important; }
  .m-2xs { margin: var(--space-0-5) !important; }
  .m-xs  { margin: var(--space-1) !important; }
  .m-s   { margin: var(--space-2-5) !important; }
  .m-m   { margin: var(--space-4) !important; }
  .m-l   { margin: var(--space-6) !important; }
  .m-xl  { margin: var(--space-8) !important; }
  .m-2xl { margin: var(--space-11) !important; }
  .m-3xl { margin: var(--space-16) !important; }

  .mt-3xs { margin-top: var(--space-px) !important; }
  .mt-2xs { margin-top: var(--space-0-5) !important; }
  .mt-xs  { margin-top: var(--space-1) !important; }
  .mt-s   { margin-top: var(--space-2-5) !important; }
  .mt-m   { margin-top: var(--space-4) !important; }
  .mt-l   { margin-top: var(--space-6) !important; }
  .mt-xl  { margin-top: var(--space-8) !important; }
  .mt-2xl { margin-top: var(--space-11) !important; }
  .mt-3xl { margin-top: var(--space-16) !important; }

  .mr-3xs { margin-right: var(--space-px) !important; }
  .mr-2xs { margin-right: var(--space-0-5) !important; }
  .mr-xs  { margin-right: var(--space-1) !important; }
  .mr-s   { margin-right: var(--space-2-5) !important; }
  .mr-m   { margin-right: var(--space-4) !important; }
  .mr-l   { margin-right: var(--space-6) !important; }
  .mr-xl  { margin-right: var(--space-8) !important; }
  .mr-2xl { margin-right: var(--space-11) !important; }
  .mr-3xl { margin-right: var(--space-16) !important; }

  .mb-3xs { margin-bottom: var(--space-px) !important; }
  .mb-2xs { margin-bottom: var(--space-0-5) !important; }
  .mb-xs  { margin-bottom: var(--space-1) !important; }
  .mb-s   { margin-bottom: var(--space-2-5) !important; }
  .mb-m   { margin-bottom: var(--space-4) !important; }
  .mb-l   { margin-bottom: var(--space-6) !important; }
  .mb-xl  { margin-bottom: var(--space-8) !important; }
  .mb-2xl { margin-bottom: var(--space-11) !important; }
  .mb-3xl { margin-bottom: var(--space-16) !important; }

  .ml-3xs { margin-left: var(--space-px) !important; }
  .ml-2xs { margin-left: var(--space-0-5) !important; }
  .ml-xs  { margin-left: var(--space-1) !important; }
  .ml-s   { margin-left: var(--space-2-5) !important; }
  .ml-m   { margin-left: var(--space-4) !important; }
  .ml-l   { margin-left: var(--space-6) !important; }
  .ml-xl  { margin-left: var(--space-8) !important; }
  .ml-2xl { margin-left: var(--space-11) !important; }
  .ml-3xl { margin-left: var(--space-16) !important; }

  .mx-3xs { margin-left: var(--space-px) !important;   margin-right: var(--space-px) !important; }
  .mx-2xs { margin-left: var(--space-0-5) !important;  margin-right: var(--space-0-5) !important; }
  .mx-xs  { margin-left: var(--space-1) !important;    margin-right: var(--space-1) !important; }
  .mx-s   { margin-left: var(--space-2-5) !important;  margin-right: var(--space-2-5) !important; }
  .mx-m   { margin-left: var(--space-4) !important;    margin-right: var(--space-4) !important; }
  .mx-l   { margin-left: var(--space-6) !important;    margin-right: var(--space-6) !important; }
  .mx-xl  { margin-left: var(--space-8) !important;    margin-right: var(--space-8) !important; }
  .mx-2xl { margin-left: var(--space-11) !important;   margin-right: var(--space-11) !important; }
  .mx-3xl { margin-left: var(--space-16) !important;   margin-right: var(--space-16) !important; }

  .my-3xs { margin-top: var(--space-px) !important;    margin-bottom: var(--space-px) !important; }
  .my-2xs { margin-top: var(--space-0-5) !important;   margin-bottom: var(--space-0-5) !important; }
  .my-xs  { margin-top: var(--space-1) !important;     margin-bottom: var(--space-1) !important; }
  .my-s   { margin-top: var(--space-2-5) !important;   margin-bottom: var(--space-2-5) !important; }
  .my-m   { margin-top: var(--space-4) !important;     margin-bottom: var(--space-4) !important; }
  .my-l   { margin-top: var(--space-6) !important;     margin-bottom: var(--space-6) !important; }
  .my-xl  { margin-top: var(--space-8) !important;     margin-bottom: var(--space-8) !important; }
  .my-2xl { margin-top: var(--space-11) !important;    margin-bottom: var(--space-11) !important; }
  .my-3xl { margin-top: var(--space-16) !important;    margin-bottom: var(--space-16) !important; }
}

/* ===================================================================
   5. PADDING (com mapeamento desktop/mobile)
   =================================================================== */
/* ----- DESKTOP (≥1025px) ----- */
.p-0   { padding: 0 !important; }
.p-1   { padding: var(--space-px) !important; }
.p-3xs { padding: var(--space-1) !important; }
.p-2xs { padding: var(--space-1-5) !important; }
.p-xs  { padding: var(--space-2-5) !important; }
.p-s   { padding: var(--space-4) !important; }
.p-m   { padding: var(--space-6) !important; }
.p-l   { padding: var(--space-8) !important; }
.p-xl  { padding: var(--space-11) !important; }
.p-2xl { padding: var(--space-16) !important; }
.p-3xl { padding: var(--space-24) !important; }

.pt-0   { padding-top: 0 !important; }
.pt-1   { padding-top: var(--space-px) !important; }
.pt-3xs { padding-top: var(--space-1) !important; }
.pt-2xs { padding-top: var(--space-1-5) !important; }
.pt-xs  { padding-top: var(--space-2-5) !important; }
.pt-s   { padding-top: var(--space-4) !important; }
.pt-m   { padding-top: var(--space-6) !important; }
.pt-l   { padding-top: var(--space-8) !important; }
.pt-xl  { padding-top: var(--space-11) !important; }
.pt-2xl { padding-top: var(--space-16) !important; }
.pt-3xl { padding-top: var(--space-24) !important; }

.pr-0   { padding-right: 0 !important; }
.pr-1   { padding-right: var(--space-px) !important; }
.pr-3xs { padding-right: var(--space-1) !important; }
.pr-2xs { padding-right: var(--space-1-5) !important; }
.pr-xs  { padding-right: var(--space-2-5) !important; }
.pr-s   { padding-right: var(--space-4) !important; }
.pr-m   { padding-right: var(--space-6) !important; }
.pr-l   { padding-right: var(--space-8) !important; }
.pr-xl  { padding-right: var(--space-11) !important; }
.pr-2xl { padding-right: var(--space-16) !important; }
.pr-3xl { padding-right: var(--space-24) !important; }

.pb-0   { padding-bottom: 0 !important; }
.pb-1   { padding-bottom: var(--space-px) !important; }
.pb-3xs { padding-bottom: var(--space-1) !important; }
.pb-2xs { padding-bottom: var(--space-1-5) !important; }
.pb-xs  { padding-bottom: var(--space-2-5) !important; }
.pb-s   { padding-bottom: var(--space-4) !important; }
.pb-m   { padding-bottom: var(--space-6) !important; }
.pb-l   { padding-bottom: var(--space-8) !important; }
.pb-xl  { padding-bottom: var(--space-11) !important; }
.pb-2xl { padding-bottom: var(--space-16) !important; }
.pb-3xl { padding-bottom: var(--space-24) !important; }

.pl-0   { padding-left: 0 !important; }
.pl-1   { padding-left: var(--space-px) !important; }
.pl-3xs { padding-left: var(--space-1) !important; }
.pl-2xs { padding-left: var(--space-1-5) !important; }
.pl-xs  { padding-left: var(--space-2-5) !important; }
.pl-s   { padding-left: var(--space-4) !important; }
.pl-m   { padding-left: var(--space-6) !important; }
.pl-l   { padding-left: var(--space-8) !important; }
.pl-xl  { padding-left: var(--space-11) !important; }
.pl-2xl { padding-left: var(--space-16) !important; }
.pl-3xl { padding-left: var(--space-24) !important; }

.px-0   { padding-left: 0 !important;                  padding-right: 0 !important; }
.px-1   { padding-left: var(--space-px) !important;   padding-right: var(--space-px) !important; }
.px-3xs { padding-left: var(--space-1) !important;    padding-right: var(--space-1) !important; }
.px-2xs { padding-left: var(--space-1-5) !important;  padding-right: var(--space-1-5) !important; }
.px-xs  { padding-left: var(--space-2-5) !important;  padding-right: var(--space-2-5) !important; }
.px-s   { padding-left: var(--space-4) !important;    padding-right: var(--space-4) !important; }
.px-m   { padding-left: var(--space-6) !important;    padding-right: var(--space-6) !important; }
.px-l   { padding-left: var(--space-8) !important;    padding-right: var(--space-8) !important; }
.px-xl  { padding-left: var(--space-11) !important;   padding-right: var(--space-11) !important; }
.px-2xl { padding-left: var(--space-16) !important;   padding-right: var(--space-16) !important; }
.px-3xl { padding-left: var(--space-24) !important;   padding-right: var(--space-24) !important; }

.py-0   { padding-top: 0 !important;                   padding-bottom: 0 !important; }
.py-1   { padding-top: var(--space-px) !important;   padding-bottom: var(--space-px) !important; }
.py-3xs { padding-top: var(--space-1) !important;    padding-bottom: var(--space-1) !important; }
.py-2xs { padding-top: var(--space-1-5) !important;  padding-bottom: var(--space-1-5) !important; }
.py-xs  { padding-top: var(--space-2-5) !important;  padding-bottom: var(--space-2-5) !important; }
.py-s   { padding-top: var(--space-4) !important;    padding-bottom: var(--space-4) !important; }
.py-m   { padding-top: var(--space-6) !important;    padding-bottom: var(--space-6) !important; }
.py-l   { padding-top: var(--space-8) !important;    padding-bottom: var(--space-8) !important; }
.py-xl  { padding-top: var(--space-11) !important;   padding-bottom: var(--space-11) !important; }
.py-2xl { padding-top: var(--space-16) !important;   padding-bottom: var(--space-16) !important; }
.py-3xl { padding-top: var(--space-24) !important;   padding-bottom: var(--space-24) !important; }

/* ----- MOBILE (≤767px) - Mapeamento para variáveis menores ----- */
@media (max-width: 767px) {
  .p-3xs { padding: var(--space-px) !important; }
  .p-2xs { padding: var(--space-0-5) !important; }
  .p-xs  { padding: var(--space-1) !important; }
  .p-s   { padding: var(--space-2-5) !important; }
  .p-m   { padding: var(--space-4) !important; }
  .p-l   { padding: var(--space-6) !important; }
  .p-xl  { padding: var(--space-8) !important; }
  .p-2xl { padding: var(--space-11) !important; }
  .p-3xl { padding: var(--space-16) !important; }

  .pt-3xs { padding-top: var(--space-px) !important; }
  .pt-2xs { padding-top: var(--space-0-5) !important; }
  .pt-xs  { padding-top: var(--space-1) !important; }
  .pt-s   { padding-top: var(--space-2-5) !important; }
  .pt-m   { padding-top: var(--space-4) !important; }
  .pt-l   { padding-top: var(--space-6) !important; }
  .pt-xl  { padding-top: var(--space-8) !important; }
  .pt-2xl { padding-top: var(--space-11) !important; }
  .pt-3xl { padding-top: var(--space-16) !important; }

  .pr-3xs { padding-right: var(--space-px) !important; }
  .pr-2xs { padding-right: var(--space-0-5) !important; }
  .pr-xs  { padding-right: var(--space-1) !important; }
  .pr-s   { padding-right: var(--space-2-5) !important; }
  .pr-m   { padding-right: var(--space-4) !important; }
  .pr-l   { padding-right: var(--space-6) !important; }
  .pr-xl  { padding-right: var(--space-8) !important; }
  .pr-2xl { padding-right: var(--space-11) !important; }
  .pr-3xl { padding-right: var(--space-16) !important; }

  .pb-3xs { padding-bottom: var(--space-px) !important; }
  .pb-2xs { padding-bottom: var(--space-0-5) !important; }
  .pb-xs  { padding-bottom: var(--space-1) !important; }
  .pb-s   { padding-bottom: var(--space-2-5) !important; }
  .pb-m   { padding-bottom: var(--space-4) !important; }
  .pb-l   { padding-bottom: var(--space-6) !important; }
  .pb-xl  { padding-bottom: var(--space-8) !important; }
  .pb-2xl { padding-bottom: var(--space-11) !important; }
  .pb-3xl { padding-bottom: var(--space-16) !important; }

  .pl-3xs { padding-left: var(--space-px) !important; }
  .pl-2xs { padding-left: var(--space-0-5) !important; }
  .pl-xs  { padding-left: var(--space-1) !important; }
  .pl-s   { padding-left: var(--space-2-5) !important; }
  .pl-m   { padding-left: var(--space-4) !important; }
  .pl-l   { padding-left: var(--space-6) !important; }
  .pl-xl  { padding-left: var(--space-8) !important; }
  .pl-2xl { padding-left: var(--space-11) !important; }
  .pl-3xl { padding-left: var(--space-16) !important; }

  .px-3xs { padding-left: var(--space-px) !important;   padding-right: var(--space-px) !important; }
  .px-2xs { padding-left: var(--space-0-5) !important;  padding-right: var(--space-0-5) !important; }
  .px-xs  { padding-left: var(--space-1) !important;    padding-right: var(--space-1) !important; }
  .px-s   { padding-left: var(--space-2-5) !important;  padding-right: var(--space-2-5) !important; }
  .px-m   { padding-left: var(--space-4) !important;    padding-right: var(--space-4) !important; }
  .px-l   { padding-left: var(--space-6) !important;    padding-right: var(--space-6) !important; }
  .px-xl  { padding-left: var(--space-8) !important;    padding-right: var(--space-8) !important; }
  .px-2xl { padding-left: var(--space-11) !important;   padding-right: var(--space-11) !important; }
  .px-3xl { padding-left: var(--space-16) !important;   padding-right: var(--space-16) !important; }

  .py-3xs { padding-top: var(--space-px) !important;    padding-bottom: var(--space-px) !important; }
  .py-2xs { padding-top: var(--space-0-5) !important;   padding-bottom: var(--space-0-5) !important; }
  .py-xs  { padding-top: var(--space-1) !important;     padding-bottom: var(--space-1) !important; }
  .py-s   { padding-top: var(--space-2-5) !important;   padding-bottom: var(--space-2-5) !important; }
  .py-m   { padding-top: var(--space-4) !important;     padding-bottom: var(--space-4) !important; }
  .py-l   { padding-top: var(--space-6) !important;     padding-bottom: var(--space-6) !important; }
  .py-xl  { padding-top: var(--space-8) !important;     padding-bottom: var(--space-8) !important; }
  .py-2xl { padding-top: var(--space-11) !important;    padding-bottom: var(--space-11) !important; }
  .py-3xl { padding-top: var(--space-16) !important;    padding-bottom: var(--space-16) !important; }
}

/* ===================================================================
   6. GAP (com mapeamento desktop/mobile)
   =================================================================== */
/* ----- DESKTOP ----- */
.gap-0   { gap: 0 !important; }
.gap-1   { gap: var(--space-px) !important; }
.gap-3xs { gap: var(--space-1) !important; }
.gap-2xs { gap: var(--space-1-5) !important; }
.gap-xs  { gap: var(--space-2-5) !important; }
.gap-s   { gap: var(--space-4) !important; }
.gap-m   { gap: var(--space-6) !important; }
.gap-l   { gap: var(--space-8) !important; }
.gap-xl  { gap: var(--space-11) !important; }
.gap-2xl { gap: var(--space-16) !important; }
.gap-3xl { gap: var(--space-24) !important; }

.row-gap-0   { row-gap: 0 !important; }
.row-gap-1   { row-gap: var(--space-px) !important; }
.row-gap-3xs { row-gap: var(--space-1) !important; }
.row-gap-2xs { row-gap: var(--space-1-5) !important; }
.row-gap-xs  { row-gap: var(--space-2-5) !important; }
.row-gap-s   { row-gap: var(--space-4) !important; }
.row-gap-m   { row-gap: var(--space-6) !important; }
.row-gap-l   { row-gap: var(--space-8) !important; }
.row-gap-xl  { row-gap: var(--space-11) !important; }
.row-gap-2xl { row-gap: var(--space-16) !important; }
.row-gap-3xl { row-gap: var(--space-24) !important; }

.column-gap-0   { column-gap: 0 !important; }
.column-gap-1   { column-gap: var(--space-px) !important; }
.column-gap-3xs { column-gap: var(--space-1) !important; }
.column-gap-2xs { column-gap: var(--space-1-5) !important; }
.column-gap-xs  { column-gap: var(--space-2-5) !important; }
.column-gap-s   { column-gap: var(--space-4) !important; }
.column-gap-m   { column-gap: var(--space-6) !important; }
.column-gap-l   { column-gap: var(--space-8) !important; }
.column-gap-xl  { column-gap: var(--space-11) !important; }
.column-gap-2xl { column-gap: var(--space-16) !important; }
.column-gap-3xl { column-gap: var(--space-24) !important; }

/* ----- MOBILE (≤767px) ----- */
@media (max-width: 767px) {
  .gap-3xs { gap: var(--space-px) !important; }
  .gap-2xs { gap: var(--space-0-5) !important; }
  .gap-xs  { gap: var(--space-1) !important; }
  .gap-s   { gap: var(--space-2-5) !important; }
  .gap-m   { gap: var(--space-4) !important; }
  .gap-l   { gap: var(--space-6) !important; }
  .gap-xl  { gap: var(--space-8) !important; }
  .gap-2xl { gap: var(--space-11) !important; }
  .gap-3xl { gap: var(--space-16) !important; }

  .row-gap-3xs { row-gap: var(--space-px) !important; }
  .row-gap-2xs { row-gap: var(--space-0-5) !important; }
  .row-gap-xs  { row-gap: var(--space-1) !important; }
  .row-gap-s   { row-gap: var(--space-2-5) !important; }
  .row-gap-m   { row-gap: var(--space-4) !important; }
  .row-gap-l   { row-gap: var(--space-6) !important; }
  .row-gap-xl  { row-gap: var(--space-8) !important; }
  .row-gap-2xl { row-gap: var(--space-11) !important; }
  .row-gap-3xl { row-gap: var(--space-16) !important; }

  .column-gap-3xs { column-gap: var(--space-px) !important; }
  .column-gap-2xs { column-gap: var(--space-0-5) !important; }
  .column-gap-xs  { column-gap: var(--space-1) !important; }
  .column-gap-s   { column-gap: var(--space-2-5) !important; }
  .column-gap-m   { column-gap: var(--space-4) !important; }
  .column-gap-l   { column-gap: var(--space-6) !important; }
  .column-gap-xl  { column-gap: var(--space-8) !important; }
  .column-gap-2xl { column-gap: var(--space-11) !important; }
  .column-gap-3xl { column-gap: var(--space-16) !important; }
}

/* ===================================================================
   7. BORDER RADIUS
   =================================================================== */
.radius-0     { border-radius: 0 !important; }
.radius-xs    { border-radius: var(--radius-xs)    !important; }
.radius-s     { border-radius: var(--radius-s)     !important; }
.radius-m     { border-radius: var(--radius-m)     !important; }
.radius-l     { border-radius: var(--radius-l)     !important; }
.radius-xl    { border-radius: var(--radius-xl)    !important; }
.radius-2xl   { border-radius: var(--radius-2xl)   !important; }
.radius-3xl   { border-radius: var(--radius-3xl)   !important; }
.radius-round { border-radius: var(--radius-round) !important; }

/* ===================================================================
   8. SHADOWS
   =================================================================== */
.shadow-none { box-shadow: none !important; }
.shadow-s    { box-shadow: var(--shadow-s)  !important; }
.shadow-m    { box-shadow: var(--shadow-m)  !important; }
.shadow-l    { box-shadow: var(--shadow-l)  !important; }
.shadow-xl   { box-shadow: var(--shadow-xl) !important; }

/* ===================================================================
   9. ELEMENTOR — Resets com margin abreviado
   =================================================================== */
.elementor-section.m-0,
.elementor-widget-container.m-0 { margin: 0 !important; }

.e-con.p-0 .e-con-inner,
.elementor-section.p-0,
.elementor-widget-container.p-0 { padding: 0 !important; }

.elementor-section {
  position: relative;
}

.elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

.e-con {
  --margin-top:    var(--e-con-margin-top, 0);
  --margin-right:  var(--e-con-margin-right, 0);
  --margin-bottom: var(--e-con-margin-bottom, 0);
  --margin-left:   var(--e-con-margin-left, 0);
  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
}

.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* ===================================================================
   10. HELPERS
   =================================================================== */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed    !important; }

.display-block        { display: block        !important; }
.display-inline-block { display: inline-block  !important; }
.display-flex         { display: flex         !important; }
.display-none         { display: none         !important; }

.overflow-hidden  { overflow: hidden  !important; }
.overflow-visible { overflow: visible !important; }
.overflow-auto    { overflow: auto    !important; }

.text-center { text-align: center !important; }
.text-left   { text-align: left   !important; }
.text-right  { text-align: right  !important; }

.width-100       { width: 100%  !important; }
.width-auto      { width: auto  !important; }
.height-100      { height: 100% !important; }
.min-height-100vh { min-height: 100vh !important; }

.flex-grow-1 { flex-grow: 1 !important; }
.flex-row    { flex-direction: row    !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap   { flex-wrap: wrap   !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.is-visible  { opacity: 1; visibility: visible; }
.is-hidden   { opacity: 0; visibility: hidden; }
.is-active   { display: block; }
.is-inactive { display: none; }

/* ===================================================================
   9. SECÇÕES — Padding fluido (block + inline)
   =================================================================== */
.section-xxl {
  padding-top:    clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
}

.section-xl {
  padding-top:    clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
}

.section-l {
  padding-top:    clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
}

.section-m {
  padding-top:    clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
}

.section-s {
  padding-top:    clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
}

.section-xs {
  padding-top:    clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
}

.section-xxs {
  padding-top:    clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
  padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
}

.section-header {
  padding-top:    clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  padding-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
}

.section-2xl,
.section-xxl,
.section-xl,
.section-l,
.section-m {
  padding-inline: clamp(var(--fluid-side-padding-min), 6.522vw - 0.217rem, 5rem) !important;
}

.section-s {
  padding-inline: clamp(var(--fluid-side-padding-min), 4.5vw, 3rem) !important;
}

.section-xs {
  padding-inline: clamp(var(--fluid-side-padding-min), 3.5vw, 2.25rem) !important;
}

.section-2xs,
.section-xxs,
.section-header {
  padding-inline: clamp(var(--fluid-side-padding-min), 2.5vw, 1.5rem) !important;
}

/* ===================================================================
   10. SECÇÕES — Layout
   =================================================================== */
.section-hero {
  min-height: var(--section-hero-height) !important;
}

.section-hero .e-con-inner {
  justify-content: center !important;
}

.section-full div {
  max-width: 100% !important;
}

.section-narrow .e-con-inner {
  max-width: var(--section-narrow) !important;
}

.section-narrow-xs .e-con-inner {
  max-width: var(--section-narrow-xs) !important;
}

.section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}

/* ===================================================================
   11. SECÇÕES — Estrutura e alinhamento (Elementor)
   =================================================================== */
.elementor-section.overflow-hidden  { overflow: hidden  !important; }
.elementor-section.overflow-visible { overflow: visible !important; }

.section-columns-top     .elementor-row { align-items: flex-start !important; }
.section-columns-center  .elementor-row { align-items: center     !important; }
.section-columns-bottom  .elementor-row { align-items: flex-end   !important; }
.section-columns-stretch .elementor-row { align-items: stretch    !important; }

.section-content-start         .elementor-container { justify-content: flex-start    !important; }
.section-content-center        .elementor-container { justify-content: center        !important; }
.section-content-end           .elementor-container { justify-content: flex-end      !important; }
.section-content-space-between .elementor-container { justify-content: space-between !important; }

/* ===================================================================
   12. SECÇÕES — Responsivo (stack / hide / reverse)
   =================================================================== */
@media (max-width: 767px) {
  .section-hide-m    { display: none !important; }
  .section-stack-m   .elementor-row { flex-direction: column         !important; }
  .section-reverse-m .elementor-row { flex-direction: column-reverse !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .section-hide-t    { display: none !important; }
  .section-stack-t   .elementor-row { flex-direction: column         !important; }
  .section-reverse-t .elementor-row { flex-direction: column-reverse !important; }
}

/* ===================================================================
   13. SECÇÕES — Radius e shadow (Elementor)
   =================================================================== */
.elementor-section.radius-s,
.elementor-widget-container.radius-s { border-radius: var(--radius-s) !important; overflow: hidden; }

.elementor-section.radius-m,
.elementor-widget-container.radius-m { border-radius: var(--radius-m) !important; overflow: hidden; }

.elementor-section.radius-l,
.elementor-widget-container.radius-l { border-radius: var(--radius-l) !important; overflow: hidden; }

.elementor-section.shadow-s,
.elementor-widget-container.shadow-s { box-shadow: var(--shadow-s) !important; }

.elementor-section.shadow-m,
.elementor-widget-container.shadow-m { box-shadow: var(--shadow-m) !important; }

.elementor-section.shadow-l,
.elementor-widget-container.shadow-l { box-shadow: var(--shadow-l) !important; }

/* ===================================================================
   14. SECÇÕES — Overlays
   =================================================================== */
.section-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.section-overlay-light::before { background-color: rgba(255, 255, 255, 0.7); }
.section-overlay-dark::before  { background-color: rgba(0, 0, 0, 0.7); }

.section-overlay > .elementor-container {
  position: relative;
  z-index: 2;
}

/* ===================================================================
   15. SECÇÕES — Sticky e z-index
   =================================================================== */
.section-sticky-top {
  position: sticky !important;
  top: 0;
  z-index: 100;
}

.section-sticky-offset {
  position: sticky !important;
  top: var(--section-offset-header);
  z-index: 100;
}

.section-z-index-1   { z-index: 1   !important; }
.section-z-index-2   { z-index: 2   !important; }
.section-z-index-3   { z-index: 3   !important; }
.section-z-index-10  { z-index: 10  !important; }
.section-z-index-100 { z-index: 100 !important; }

/* ===================================================================
   16. SECÇÕES — Controlo de colunas
   =================================================================== */
.section-column-gap-none .elementor-row { gap: 0 !important; }
.section-column-gap-1    .elementor-row { gap: var(--space-px) !important; }
.section-column-gap-3xs  .elementor-row { gap: var(--space-1) !important; }
.section-column-gap-2xs  .elementor-row { gap: var(--space-1-5) !important; }
.section-column-gap-xs   .elementor-row { gap: var(--space-2-5) !important; }
.section-column-gap-s    .elementor-row { gap: var(--space-4) !important; }
.section-column-gap-m    .elementor-row { gap: var(--space-6) !important; }
.section-column-gap-l    .elementor-row { gap: var(--space-8) !important; }

.section-columns-equal-height .elementor-column { height: 100%; }

.section-columns-equal-height .elementor-column-wrap,
.section-columns-equal-height .elementor-widget-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section-columns-equal-height .elementor-widget-wrap { flex-grow: 1; }

/* ===================================================================
   17. SECÇÕES — Background
   =================================================================== */
.section-bg-fixed     { background-attachment: fixed !important; }
.section-bg-cover     { background-size: cover   !important; background-position: center center !important; }
.section-bg-contain   { background-size: contain !important; background-position: center center !important; }
.section-bg-repeat    { background-repeat: repeat    !important; }
.section-bg-no-repeat { background-repeat: no-repeat !important; }

/* ===================================================================
   18. SECÇÕES — Dividers
   =================================================================== */
.section-divider-bottom { position: relative; }
.section-divider-bottom::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 50px;
  background-size: 100% 100%;
  z-index: 1;
}

.section-divider-top { position: relative; }
.section-divider-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 50px;
  background-size: 100% 100%;
  z-index: 1;
}

/* ===================================================================
   19. SECÇÕES — Header e footer específicos
   =================================================================== */
.section-header-transparent { background-color: transparent !important; }

.section-header-sticky {
  position: sticky !important;
  top: 0;
  z-index: 1000;
}

.section-footer {
  position: relative;
  z-index: 10;
}

/* ===================================================================
   20. SECÇÕES — Transições
   =================================================================== */
.section-transition      { transition: all 0.3s  ease-in-out; }
.section-transition-slow  { transition: all 0.6s  ease-in-out; }
.section-transition-fast  { transition: all 0.15s ease-in-out; }

/* ===================================================================
   21. WIDGETS — Alinhamento e largura
   =================================================================== */
.widget-center {
  margin-left:  auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.widget-left {
  margin-right: auto !important;
  text-align: left !important;
}

.widget-right {
  margin-left: auto !important;
  text-align: right !important;
}

.content-width-narrow {
  max-width: var(--section-narrow-xs) !important;
  margin-left:  auto !important;
  margin-right: auto !important;
}

/* ===================================================================
   22. ESTADOS (toggle via JS)
   =================================================================== */
.is-visible  { opacity: 1; visibility: visible; }
.is-hidden   { opacity: 0; visibility: hidden; }
.is-active   { display: block; }
.is-inactive { display: none; }

/* ===================================================================
   23. HELPERS — Position
   =================================================================== */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed    !important; }

/* ===================================================================
   24. HELPERS — Display
   =================================================================== */
.display-block        { display: block        !important; }
.display-inline-block { display: inline-block  !important; }
.display-flex         { display: flex         !important; }
.display-none         { display: none         !important; }

/* ===================================================================
   25. HELPERS — Overflow
   =================================================================== */
.overflow-hidden  { overflow: hidden  !important; }
.overflow-visible { overflow: visible !important; }
.overflow-auto    { overflow: auto    !important; }

/* ===================================================================
   26. HELPERS — Text align
   =================================================================== */
.text-center { text-align: center !important; }
.text-left   { text-align: left   !important; }
.text-right  { text-align: right  !important; }

/* ===================================================================
   27. HELPERS — Width / height
   =================================================================== */
.width-100       { width: 100%  !important; }
.width-auto      { width: auto  !important; }
.height-100      { height: 100% !important; }
.min-height-100vh { min-height: 100vh !important; }

/* ===================================================================
   28. HELPERS — Flex
   =================================================================== */
.flex-grow-1 { flex-grow: 1 !important; }
.flex-row    { flex-direction: row    !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap   { flex-wrap: wrap   !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===================================================================
   29. ELEMENTOR — Resets
   =================================================================== */
.elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

.e-con {
  --margin-top:    var(--e-con-margin-top, 0);
  --margin-right:  var(--e-con-margin-right, 0);
  --margin-bottom: var(--e-con-margin-bottom, 0);
  --margin-left:   var(--e-con-margin-left, 0);
  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
}

.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* ===================================================================
   30. TEXTO — Font family / size / height
   =================================================================== */
.font-family-primary,   .font-family-primary *   { font-family: var(--font-primary); }
.font-family-text,      .font-family-text *      { font-family: var(--font-text); }
.font-family-secondary, .font-family-secondary * { font-family: var(--font-secondary); }
.font-family-accent,    .font-family-accent *    { font-family: var(--font-accent); }

.font-size-1,  .font-size-1 *  { font-size: var(--font-size-1)  !important; }
.font-size-2,  .font-size-2 *  { font-size: var(--font-size-2)  !important; }
.font-size-3,  .font-size-3 *  { font-size: var(--font-size-3)  !important; }
.font-size-4,  .font-size-4 *  { font-size: var(--font-size-4)  !important; }
.font-size-5,  .font-size-5 *  { font-size: var(--font-size-5)  !important; }
.font-size-6,  .font-size-6 *  { font-size: var(--font-size-6)  !important; }
.font-size-7,  .font-size-7 *  { font-size: var(--font-size-7)  !important; }
.font-size-s,  .font-size-s *  { font-size: var(--font-size-s)  !important; }
.font-size-xs, .font-size-xs * { font-size: var(--font-size-xs) !important; }

.font-height-xs,  .font-height-xs *  { line-height: var(--font-height-xs)  !important; }
.font-height-s,   .font-height-s *   { line-height: var(--font-height-s)   !important; }
.font-height-m,   .font-height-m *   { line-height: var(--font-height-m)   !important; }
.font-height-l,   .font-height-l *   { line-height: var(--font-height-l)   !important; }
.font-height-xl,  .font-height-xl *  { line-height: var(--font-height-xl)  !important; }
.font-height-2xl, .font-height-2xl * { line-height: var(--font-height-2xl) !important; }
.font-height-3xl, .font-height-3xl * { line-height: var(--font-height-3xl) !important; }

.font-uppercase,  .font-uppercase *  { text-transform: uppercase  !important; }
.font-lowercase,  .font-lowercase *  { text-transform: lowercase  !important; }
.font-capitalize, .font-capitalize * { text-transform: capitalize !important; }
.font-straight,   .font-straight *   { text-transform: none       !important; }

.font-normal,       .font-normal *       { font-style: normal !important; }
.font-italic,       .font-italic *       { font-style: italic !important; }
.font-underline,    .font-underline *    { text-decoration-line: underline    !important; }
.font-line-through, .font-line-through * { text-decoration-line: line-through !important; }

.font-reset, .font-reset * {
  font-style: normal;
  text-transform: none;
  text-decoration: none;
}

.font-weight-100, .font-weight-100 * { font-weight: 100 !important; }
.font-weight-200, .font-weight-200 * { font-weight: 200 !important; }
.font-weight-300, .font-weight-300 * { font-weight: 300 !important; }
.font-weight-400, .font-weight-400 * { font-weight: 400 !important; }
.font-weight-500, .font-weight-500 * { font-weight: 500 !important; }
.font-weight-600, .font-weight-600 * { font-weight: 600 !important; }
.font-weight-700, .font-weight-700 * { font-weight: 700 !important; }
.font-weight-800, .font-weight-800 * { font-weight: 800 !important; }
.font-weight-900, .font-weight-900 * { font-weight: 900 !important; }

.font-spacing-2xs, .font-spacing-2xs * { letter-spacing: -0.037em !important; }
.font-spacing-xs,  .font-spacing-xs *  { letter-spacing: -0.027em !important; }
.font-spacing-s,   .font-spacing-s *   { letter-spacing: -0.022em !important; }
.font-spacing-m,   .font-spacing-m *   { letter-spacing: 0        !important; }
.font-spacing-l,   .font-spacing-l *   { letter-spacing: 0.022em  !important; }
.font-spacing-xl,  .font-spacing-xl *  { letter-spacing: 0.027em  !important; }
.font-spacing-2xl, .font-spacing-2xl * { letter-spacing: 0.037em  !important; }

.text-balance, .text-balance * { text-wrap: balance; }

/* ===================================================================
   31. SVG — Fill
   =================================================================== */
.svg-white    svg, .svg-white    path { fill: var(--colour-white); }
.svg-black    svg, .svg-black    path { fill: var(--colour-black); }
.svg-grey-050 svg, .svg-grey-050 path { fill: var(--colour-grey-050); }
.svg-grey-200 svg, .svg-grey-200 path { fill: var(--colour-grey-200); }
.svg-grey-950 svg, .svg-grey-950 path { fill: var(--colour-grey-950); }

/* ===================================================================
   32. ASPECT RATIO
   =================================================================== */
.aspect-1-1  { aspect-ratio: 1 / 1; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-3-4  { aspect-ratio: 3 / 4 !important; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-9-16 { aspect-ratio: 9 / 16; }
.aspect-3-2  { aspect-ratio: 3 / 2; }
.aspect-2-3  { aspect-ratio: 2 / 3; }
.aspect-2-1  { aspect-ratio: 2 / 1; }
.aspect-1-2  { aspect-ratio: 1 / 2; }
.aspect-21-9 { aspect-ratio: 21 / 9; }
.aspect-auto { aspect-ratio: auto; }

@media (max-width: 767px) {
  .m-aspect-1-1  { aspect-ratio: 1 / 1; }
  .m-aspect-4-3  { aspect-ratio: 4 / 3; }
  .m-aspect-3-4  { aspect-ratio: 3 / 4; }
  .m-aspect-16-9 { aspect-ratio: 16 / 9; }
  .m-aspect-9-16 { aspect-ratio: 9 / 16; }
  .m-aspect-3-2  { aspect-ratio: 3 / 2; }
  .m-aspect-2-3  { aspect-ratio: 2 / 3; }
  .m-aspect-2-1  { aspect-ratio: 2 / 1; }
  .m-aspect-1-2  { aspect-ratio: 1 / 2; }
  .m-aspect-21-9 { aspect-ratio: 21 / 9; }
  .m-aspect-auto { aspect-ratio: auto; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .t-aspect-1-1  { aspect-ratio: 1 / 1; }
  .t-aspect-4-3  { aspect-ratio: 4 / 3; }
  .t-aspect-3-4  { aspect-ratio: 3 / 4; }
  .t-aspect-16-9 { aspect-ratio: 16 / 9; }
  .t-aspect-9-16 { aspect-ratio: 9 / 16; }
  .t-aspect-3-2  { aspect-ratio: 3 / 2; }
  .t-aspect-2-3  { aspect-ratio: 2 / 3; }
  .t-aspect-2-1  { aspect-ratio: 2 / 1; }
  .t-aspect-1-2  { aspect-ratio: 1 / 2; }
  .t-aspect-21-9 { aspect-ratio: 21 / 9; }
  .t-aspect-auto { aspect-ratio: auto; }
}

@media (max-width: 1024px) {
  .tm-aspect-1-1  { aspect-ratio: 1 / 1; }
  .tm-aspect-4-3  { aspect-ratio: 4 / 3; }
  .tm-aspect-3-4  { aspect-ratio: 3 / 4; }
  .tm-aspect-16-9 { aspect-ratio: 16 / 9; }
  .tm-aspect-9-16 { aspect-ratio: 9 / 16; }
  .tm-aspect-3-2  { aspect-ratio: 3 / 2; }
  .tm-aspect-2-3  { aspect-ratio: 2 / 3; }
  .tm-aspect-2-1  { aspect-ratio: 2 / 1; }
  .tm-aspect-1-2  { aspect-ratio: 1 / 2; }
  .tm-aspect-21-9 { aspect-ratio: 21 / 9; }
  .tm-aspect-auto { aspect-ratio: auto; }
}

@media (min-width: 1920px) {
  .w-aspect-1-1  { aspect-ratio: 1 / 1; }
  .w-aspect-4-3  { aspect-ratio: 4 / 3; }
  .w-aspect-3-4  { aspect-ratio: 3 / 4; }
  .w-aspect-16-9 { aspect-ratio: 16 / 9; }
  .w-aspect-9-16 { aspect-ratio: 9 / 16; }
  .w-aspect-3-2  { aspect-ratio: 3 / 2; }
  .w-aspect-2-3  { aspect-ratio: 2 / 3; }
  .w-aspect-2-1  { aspect-ratio: 2 / 1; }
  .w-aspect-1-2  { aspect-ratio: 1 / 2; }
  .w-aspect-21-9 { aspect-ratio: 21 / 9; }
  .w-aspect-auto { aspect-ratio: auto; }
}