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

/* ===================================================================
   1. VARIÁVEIS (:root)
   =================================================================== */
:root {

  /* ----- Cores ----- */
  --colour-main:        var(--e-global-color-primary);
  --colour-secondary:   var(--e-global-color-secondary);
  --colour-text:        var(--e-global-color-text);
  --colour-highlight:   var(--e-global-color-accent);
  --colour-transparent: #00000000;
  --colour-white:       #FFFFFF;
  --colour-grey-050:    #FAFAFA;
  --colour-grey-100:    #EFEFEF;
  --colour-grey-200:    #DCDCDC;
  --colour-grey-300:    #BDBDBD;
  --colour-grey-400:    #989898;
  --colour-grey-500:    #7C7C7C;
  --colour-grey-600:    #656565;
  --colour-grey-700:    #525252;
  --colour-grey-800:    #464646;
  --colour-grey-900:    #3D3D3D;
  --colour-grey-950:    #292929;
  --colour-black:       #000000;

  /* ----- Border width ----- */
  --border-0: 0px;
  --border-1: 1px;

  /* ----- Spacing scale ----- */
  --space-3xs: 0.29rem;  /*   2px */
  --space-2xs: 0.375rem;   /*   4px */
  --space-xs:  0.625rem;    /*   8px */
  --space-s:   1rem;      /*  16px */
  --space-m:   1.4rem;    /*  22.4px */
  --space-l:   2rem;   /*  31.36px */
  --space-xl:  2.75rem;  /*  43.9px */
  --space-2xl: 4rem;  /*  61.47px */
  --space-3xl: 6rem;  /*  86.05px */

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

  /* ----- Headings ----- */
   /* .font-h1 {
        font-size: 2,027rem;
        font-weight: 700;
        line-height: 2,986rem;
        letter-spacing: -0,03em;
    }*/

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

/* ----- Spacing scale: override mobile (≤768px) ----- */
@media (max-width: 768px) {
  :root {
    --space-3xs: 1px;  
    --space-2xs: 0.125rem;  /*  2px */
    --space-xs:  0.25rem;   /*  4px */
    --space-s:   0.625rem;    /*  8px */
    --space-m:   1rem;      /* 16px */
    --space-l:   1.5rem;   /* 22.56px */
    --space-xl:  2rem;   /* 31.84px */
    --space-2xl: 2.75rem;   /* 45.12px */
    --space-3xl: 4rem;   /* 63.84px */
  }
}

/* ----- 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: 18px;
}

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

/* ===================================================================
   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
   =================================================================== */
/* ----- Todos os lados ----- */
.margin-0   { margin: 0 !important; }
.margin-3xs { margin: var(--space-3xs) !important; }
.margin-2xs { margin: var(--space-2xs) !important; }
.margin-xs  { margin: var(--space-xs)  !important; }
.margin-s   { margin: var(--space-s)   !important; }
.margin-m   { margin: var(--space-m)   !important; }
.margin-l   { margin: var(--space-l)   !important; }
.margin-xl  { margin: var(--space-xl)  !important; }
.margin-2xl { margin: var(--space-2xl) !important; }
.margin-3xl { margin: var(--space-3xl) !important; }

/* ----- Top ----- */
.margin-top-0   { margin-top: 0 !important; }
.margin-top-3xs { margin-top: var(--space-3xs) !important; }
.margin-top-2xs { margin-top: var(--space-2xs) !important; }
.margin-top-xs  { margin-top: var(--space-xs)  !important; }
.margin-top-s   { margin-top: var(--space-s)   !important; }
.margin-top-m   { margin-top: var(--space-m)   !important; }
.margin-top-l   { margin-top: var(--space-l)   !important; }
.margin-top-xl  { margin-top: var(--space-xl)  !important; }
.margin-top-2xl { margin-top: var(--space-2xl) !important; }
.margin-top-3xl { margin-top: var(--space-3xl) !important; }

/* ----- Right ----- */
.margin-right-0   { margin-right: 0 !important; }
.margin-right-3xs { margin-right: var(--space-3xs) !important; }
.margin-right-2xs { margin-right: var(--space-2xs) !important; }
.margin-right-xs  { margin-right: var(--space-xs)  !important; }
.margin-right-s   { margin-right: var(--space-s)   !important; }
.margin-right-m   { margin-right: var(--space-m)   !important; }
.margin-right-l   { margin-right: var(--space-l)   !important; }
.margin-right-xl  { margin-right: var(--space-xl)  !important; }
.margin-right-2xl { margin-right: var(--space-2xl) !important; }
.margin-right-3xl { margin-right: var(--space-3xl) !important; }

/* ----- Bottom ----- */
.margin-bottom-0   { margin-bottom: 0 !important; }
.margin-bottom-3xs { margin-bottom: var(--space-3xs) !important; }
.margin-bottom-2xs { margin-bottom: var(--space-2xs) !important; }
.margin-bottom-xs  { margin-bottom: var(--space-xs)  !important; }
.margin-bottom-s   { margin-bottom: var(--space-s)   !important; }
.margin-bottom-m   { margin-bottom: var(--space-m)   !important; }
.margin-bottom-l   { margin-bottom: var(--space-l)   !important; }
.margin-bottom-xl  { margin-bottom: var(--space-xl)  !important; }
.margin-bottom-2xl { margin-bottom: var(--space-2xl) !important; }
.margin-bottom-3xl { margin-bottom: var(--space-3xl) !important; }

/* ----- Left ----- */
.margin-left-0   { margin-left: 0 !important; }
.margin-left-3xs { margin-left: var(--space-3xs) !important; }
.margin-left-2xs { margin-left: var(--space-2xs) !important; }
.margin-left-xs  { margin-left: var(--space-xs)  !important; }
.margin-left-s   { margin-left: var(--space-s)   !important; }
.margin-left-m   { margin-left: var(--space-m)   !important; }
.margin-left-l   { margin-left: var(--space-l)   !important; }
.margin-left-xl  { margin-left: var(--space-xl)  !important; }
.margin-left-2xl { margin-left: var(--space-2xl) !important; }
.margin-left-3xl { margin-left: var(--space-3xl) !important; }

/* ----- Inline (horizontal) ----- */
.margin-inline-0   { margin-left: 0 !important;                 margin-right: 0 !important; }
.margin-inline-3xs { margin-left: var(--space-3xs) !important;  margin-right: var(--space-3xs) !important; }
.margin-inline-2xs { margin-left: var(--space-2xs) !important;  margin-right: var(--space-2xs) !important; }
.margin-inline-xs  { margin-left: var(--space-xs)  !important;  margin-right: var(--space-xs)  !important; }
.margin-inline-s   { margin-left: var(--space-s)   !important;  margin-right: var(--space-s)   !important; }
.margin-inline-m   { margin-left: var(--space-m)   !important;  margin-right: var(--space-m)   !important; }
.margin-inline-l   { margin-left: var(--space-l)   !important;  margin-right: var(--space-l)   !important; }
.margin-inline-xl  { margin-left: var(--space-xl)  !important;  margin-right: var(--space-xl)  !important; }
.margin-inline-2xl { margin-left: var(--space-2xl) !important;  margin-right: var(--space-2xl) !important; }
.margin-inline-3xl { margin-left: var(--space-3xl) !important;  margin-right: var(--space-3xl) !important; }

/* ----- Block (vertical) ----- */
.margin-block-0   { margin-top: 0 !important;                margin-bottom: 0 !important; }
.margin-block-3xs { margin-top: var(--space-3xs) !important; margin-bottom: var(--space-3xs) !important; }
.margin-block-2xs { margin-top: var(--space-2xs) !important; margin-bottom: var(--space-2xs) !important; }
.margin-block-xs  { margin-top: var(--space-xs)  !important; margin-bottom: var(--space-xs)  !important; }
.margin-block-s   { margin-top: var(--space-s)   !important; margin-bottom: var(--space-s)   !important; }
.margin-block-m   { margin-top: var(--space-m)   !important; margin-bottom: var(--space-m)   !important; }
.margin-block-l   { margin-top: var(--space-l)   !important; margin-bottom: var(--space-l)   !important; }
.margin-block-xl  { margin-top: var(--space-xl)  !important; margin-bottom: var(--space-xl)  !important; }
.margin-block-2xl { margin-top: var(--space-2xl) !important; margin-bottom: var(--space-2xl) !important; }
.margin-block-3xl { margin-top: var(--space-3xl) !important; margin-bottom: var(--space-3xl) !important; }

/* ===================================================================
   5. PADDING
   =================================================================== */
/* ----- Todos os lados ----- */
.padding-0   { padding: 0 !important; }
.padding-3xs { padding: var(--space-3xs) !important; }
.padding-2xs { padding: var(--space-2xs) !important; }
.padding-xs  { padding: var(--space-xs)  !important; }
.padding-s   { padding: var(--space-s)   !important; }
.padding-m   { padding: var(--space-m)   !important; }
.padding-l   { padding: var(--space-l)   !important; }
.padding-xl  { padding: var(--space-xl)  !important; }
.padding-2xl { padding: var(--space-2xl) !important; }
.padding-3xl { padding: var(--space-3xl) !important; }

/* ----- Top ----- */
.padding-top-0   { padding-top: 0 !important; }
.padding-top-3xs { padding-top: var(--space-3xs) !important; }
.padding-top-2xs { padding-top: var(--space-2xs) !important; }
.padding-top-xs  { padding-top: var(--space-xs)  !important; }
.padding-top-s   { padding-top: var(--space-s)   !important; }
.padding-top-m   { padding-top: var(--space-m)   !important; }
.padding-top-l   { padding-top: var(--space-l)   !important; }
.padding-top-xl  { padding-top: var(--space-xl)  !important; }
.padding-top-2xl { padding-top: var(--space-2xl) !important; }
.padding-top-3xl { padding-top: var(--space-3xl) !important; }

/* ----- Right ----- */
.padding-right-0   { padding-right: 0 !important; }
.padding-right-3xs { padding-right: var(--space-3xs) !important; }
.padding-right-2xs { padding-right: var(--space-2xs) !important; }
.padding-right-xs  { padding-right: var(--space-xs)  !important; }
.padding-right-s   { padding-right: var(--space-s)   !important; }
.padding-right-m   { padding-right: var(--space-m)   !important; }
.padding-right-l   { padding-right: var(--space-l)   !important; }
.padding-right-xl  { padding-right: var(--space-xl)  !important; }
.padding-right-2xl { padding-right: var(--space-2xl) !important; }
.padding-right-3xl { padding-right: var(--space-3xl) !important; }

/* ----- Bottom ----- */
.padding-bottom-0   { padding-bottom: 0 !important; }
.padding-bottom-3xs { padding-bottom: var(--space-3xs) !important; }
.padding-bottom-2xs { padding-bottom: var(--space-2xs) !important; }
.padding-bottom-xs  { padding-bottom: var(--space-xs)  !important; }
.padding-bottom-s   { padding-bottom: var(--space-s)   !important; }
.padding-bottom-m   { padding-bottom: var(--space-m)   !important; }
.padding-bottom-l   { padding-bottom: var(--space-l)   !important; }
.padding-bottom-xl  { padding-bottom: var(--space-xl)  !important; }
.padding-bottom-2xl { padding-bottom: var(--space-2xl) !important; }
.padding-bottom-3xl { padding-bottom: var(--space-3xl) !important; }

/* ----- Left ----- */
.padding-left-0   { padding-left: 0 !important; }
.padding-left-3xs { padding-left: var(--space-3xs) !important; }
.padding-left-2xs { padding-left: var(--space-2xs) !important; }
.padding-left-xs  { padding-left: var(--space-xs)  !important; }
.padding-left-s   { padding-left: var(--space-s)   !important; }
.padding-left-m   { padding-left: var(--space-m)   !important; }
.padding-left-l   { padding-left: var(--space-l)   !important; }
.padding-left-xl  { padding-left: var(--space-xl)  !important; }
.padding-left-2xl { padding-left: var(--space-2xl) !important; }
.padding-left-3xl { padding-left: var(--space-3xl) !important; }

/* ----- Inline (horizontal) ----- */
.padding-inline-0   { padding-left: 0 !important;                padding-right: 0 !important; }
.padding-inline-3xs { padding-left: var(--space-3xs) !important; padding-right: var(--space-3xs) !important; }
.padding-inline-2xs { padding-left: var(--space-2xs) !important; padding-right: var(--space-2xs) !important; }
.padding-inline-xs  { padding-left: var(--space-xs)  !important; padding-right: var(--space-xs)  !important; }
.padding-inline-s   { padding-left: var(--space-s)   !important; padding-right: var(--space-s)   !important; }
.padding-inline-m   { padding-left: var(--space-m)   !important; padding-right: var(--space-m)   !important; }
.padding-inline-l   { padding-left: var(--space-l)   !important; padding-right: var(--space-l)   !important; }
.padding-inline-xl  { padding-left: var(--space-xl)  !important; padding-right: var(--space-xl)  !important; }
.padding-inline-2xl { padding-left: var(--space-2xl) !important; padding-right: var(--space-2xl) !important; }
.padding-inline-3xl { padding-left: var(--space-3xl) !important; padding-right: var(--space-3xl) !important; }

/* ----- Block (vertical) ----- */
.padding-block-0   { padding-top: 0 !important;                padding-bottom: 0 !important; }
.padding-block-3xs { padding-top: var(--space-3xs) !important; padding-bottom: var(--space-3xs) !important; }
.padding-block-2xs { padding-top: var(--space-2xs) !important; padding-bottom: var(--space-2xs) !important; }
.padding-block-xs  { padding-top: var(--space-xs)  !important; padding-bottom: var(--space-xs)  !important; }
.padding-block-s   { padding-top: var(--space-s)   !important; padding-bottom: var(--space-s)   !important; }
.padding-block-m   { padding-top: var(--space-m)   !important; padding-bottom: var(--space-m)   !important; }
.padding-block-l   { padding-top: var(--space-l)   !important; padding-bottom: var(--space-l)   !important; }
.padding-block-xl  { padding-top: var(--space-xl)  !important; padding-bottom: var(--space-xl)  !important; }
.padding-block-2xl { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }
.padding-block-3xl { padding-top: var(--space-3xl) !important; padding-bottom: var(--space-3xl) !important; }

/* ===================================================================
   6. GAP
   =================================================================== */
/* ----- Todos ----- */
.gap-0   { gap: 0 !important; }
.gap-3xs { gap: var(--space-3xs) !important; }
.gap-2xs { gap: var(--space-2xs) !important; }
.gap-xs  { gap: var(--space-xs)  !important; }
.gap-s   { gap: var(--space-s)   !important; }
.gap-m   { gap: var(--space-m)   !important; }
.gap-l   { gap: var(--space-l)   !important; }
.gap-xl  { gap: var(--space-xl)  !important; }
.gap-2xl { gap: var(--space-2xl) !important; }
.gap-3xl { gap: var(--space-3xl) !important; }

/* ----- Row (vertical) ----- */
.row-gap-0   { row-gap: 0 !important; }
.row-gap-3xs { row-gap: var(--space-3xs) !important; }
.row-gap-2xs { row-gap: var(--space-2xs) !important; }
.row-gap-xs  { row-gap: var(--space-xs)  !important; }
.row-gap-s   { row-gap: var(--space-s)   !important; }
.row-gap-m   { row-gap: var(--space-m)   !important; }
.row-gap-l   { row-gap: var(--space-l)   !important; }
.row-gap-xl  { row-gap: var(--space-xl)  !important; }
.row-gap-2xl { row-gap: var(--space-2xl) !important; }
.row-gap-3xl { row-gap: var(--space-3xl) !important; }

/* ----- Column (horizontal) ----- */
.column-gap-0   { column-gap: 0 !important; }
.column-gap-3xs { column-gap: var(--space-3xs) !important; }
.column-gap-2xs { column-gap: var(--space-2xs) !important; }
.column-gap-xs  { column-gap: var(--space-xs)  !important; }
.column-gap-s   { column-gap: var(--space-s)   !important; }
.column-gap-m   { column-gap: var(--space-m)   !important; }
.column-gap-l   { column-gap: var(--space-l)   !important; }
.column-gap-xl  { column-gap: var(--space-xl)  !important; }
.column-gap-2xl { column-gap: var(--space-2xl) !important; }
.column-gap-3xl { column-gap: var(--space-3xl) !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. 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));
}

/* ----- Padding inline (lados) por escala de secção ----- */
.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
   =================================================================== */
/* ----- Hero ----- */
.section-hero {
  min-height: var(--section-hero-height) !important;
}

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

/* ----- Full width (sem padding lateral) ----- */
.section-full div {
  max-width: 100% !important;
}

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

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

/* ----- Offset para headers em overlay ----- */
.section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}

/* ===================================================================
   11. SECÇÕES — Estrutura e alinhamento (Elementor)
   =================================================================== */
.elementor-section.margin-0,
.elementor-widget-container.margin-0 { margin: 0 !important; }

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

.elementor-section {
  position: relative;
}

/* ----- Overflow ----- */
.section-overflow-hidden  { overflow: hidden  !important; }
.section-overflow-visible { overflow: visible !important; }

/* ----- Alinhamento das colunas ----- */
.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; }

/* ----- Alinhamento do conteúdo ----- */
.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-3xs  .elementor-row { gap: var(--space-3xs) !important; }
.section-column-gap-2xs  .elementor-row { gap: var(--space-2xs) !important; }
.section-column-gap-xs   .elementor-row { gap: var(--space-xs)  !important; }
.section-column-gap-s    .elementor-row { gap: var(--space-s)   !important; }
.section-column-gap-m    .elementor-row { gap: var(--space-m)   !important; }
.section-column-gap-l    .elementor-row { gap: var(--space-l)   !important; }

/* ----- Colunas de altura igual ----- */
.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; }

/* ----- Transform ----- */
.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; }

/* ----- Style / decoration ----- */
.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;
}

/* ----- Weight ----- */
.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; }

/* ----- Letter spacing ----- */
.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; }

/* ----- Wrap ----- */
.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
   =================================================================== */
/* ----- Base (desktop) ----- */
.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; }

/* ----- Mobile (≤767px) ----- */
@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; }
}

/* ----- Tablet (768px–1024px) ----- */
@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; }
}

/* ----- Tablet + Mobile (≤1024px) ----- */
@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; }
}

/* ----- Widescreen (≥1920px) ----- */
@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; }
}