/* ===================================================================
   DWSI-CSS 2026.09.25 · Core
   Versão do sistema: a mesma nos 5 snippets (Core, M, TM/T, DW/W, widgets).
   Quando se muda um deles, muda-se a data em todos (2.ª alteração no
   mesmo dia: 2026.09.25-2). A auditoria compara as versões entre sites.

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

   Breakpoints (Elementor). Em media queries escrever SEMPRE o número:
   o var() não funciona dentro de @media.
     mobile       ≤ 767px
     tablet       768px – 1024px
     desktop      ≥ 1025px
     widescreen   ≥ 1920px

   Como funciona: os VALORES vivem em tokens no :root e mudam por
   breakpoint (tipografia, spacing, sections). As CLASSES não mudam.
   O V4 guarda o valor desktop; o tablet e o mobile vêm daqui (:root:root).
   ===================================================================

   ÍNDICE
   -------------------------------------------------------------------
    1. VARIÁVEIS (:root) ............ spacing, radius, shadows, sections,
                                      fonts + blocos responsivos
                                      (tipografia, sections, spacing)
    2. BASE ......................... html font-size (16px fixo)
    3. BORDER ....................... width, lados, inline/block, style
    4. MARGIN ....................... all, lados, inline/block · 0→3xl
    5. PADDING ...................... all, lados, inline/block · 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 ............ block + inline, tokens por breakpoint
   10. SECÇÕES — Layout ............. hero, full, narrow, offset
   11. SECÇÕES — Alinhamento ........ columns-* / content-* (containers)
   12. SECÇÕES — Responsivo ......... stack / hide / reverse (m + t)
   13. SECÇÕES — Overlays ........... overlay / light / dark
   14. SECÇÕES — Sticky e z-index ... sticky-top/offset + z-index-*
   15. SECÇÕES — Background ......... fixed, cover, contain, repeat
   16. SECÇÕES — Dividers ........... divider-top / divider-bottom
   17. SECÇÕES — Header e footer .... transparent, sticky, footer
   18. SECÇÕES — Transições ......... transition / slow / fast
   19. WIDGETS — Alinhamento ........ widget-center/left/right, narrow
   20. ESTADOS (toggle via JS) ...... is-visible/hidden/active/inactive
   21. HELPERS — Position .......... relative, absolute, fixed
   22. HELPERS — Display ........... block, inline-block, flex, none
   23. HELPERS — Overflow .......... hidden, visible, auto
   24. HELPERS — Text align ........ center, left, right
   25. HELPERS — Width / height .... width/height-100, auto, fit, 100vh
   26. HELPERS — Flex .............. grow, row/column, wrap, center
   27. ELEMENTOR — Resets .......... widget margins, .e-con, text-editor
   28. TEXTO ....................... family, size, height, transform,
                                      style, weight, spacing, balance
   29. SVG — Fill .................. white, black, grey-050/200/950,
                                      primary, secondary
   30. ASPECT RATIO ................ base + m / t / tm / w
   -------------------------------------------------------------------
   =================================================================== */
:root {
  
  /* ----- Border width ----- */
  --border-0: 0px;
  --border-1: 1px;

  /* ----- Spacing scale - VALORES FIXOS -----
     Fonte de verdade: variáveis V4 (kit, post-61.css), que carregam depois e ganham.
     Aqui ficam só como fallback para páginas sem o CSS do kit. Valores iguais aos do V4. */
  --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-5:   1.25rem;   /*  20px */
  --space-6:   1.5rem;    /*  24px */
  --space-7:   1.75rem;   /*  28px */
  --space-8:   2rem;      /*  32px */
  --space-9:   2.25rem;   /*  36px */
  --space-11:  2.75rem;   /*  44px */
  --space-12:  3rem;      /*  48px */
  --space-16:  4rem;      /*  64px */
  --space-20:  5rem;      /*  80px */
  --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 (block / topo-fundo) — desktop -----
     Tablet e mobile: ver "Sections responsivas" a seguir ao :root. */
  --section-xxl-padding:    10rem;    /* 160px */
  --section-xl-padding:     7.5rem;   /* 120px */
  --section-l-padding:      6.25rem;  /* 100px */
  --section-m-padding:      5rem;     /*  80px */
  --section-s-padding:      3.75rem;  /*  60px */
  --section-xs-padding:     2.5rem;   /*  40px */
  --section-xxs-padding:    1.5rem;   /*  24px */
  --section-header-padding: 1.25rem;  /*  20px */

  /* ----- Section padding (inline / lados) — desktop ----- */
  --section-side-l:   5rem;     /* 80px — 2xl, xxl, xl, l, m */
  --section-side-s:   3rem;     /* 48px — s */
  --section-side-xs:  2.25rem;  /* 36px — xs */
  --section-side-2xs: 1.5rem;   /* 24px — 2xs, xxs, header */

  /* ----- 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 -----
     Aliases da escala V4 (--text-*): uma só escala para V3, V4 e estas classes.
     Em rem, por isso não multiplica em elementos aninhados.
     Tablet e mobile: ver "Tipografia responsiva" a seguir ao :root. */
  --font-size-1:  var(--text-h1);
  --font-size-2:  var(--text-h2);
  --font-size-3:  var(--text-h3);
  --font-size-4:  var(--text-h4);
  --font-size-5:  var(--text-h5);
  --font-size-6:  var(--text-h6);
  --font-size-7:  var(--text-m);
  --font-size-s:  var(--text-s);
  --font-size-xs: var(--text-xs);

  /* ----- Line height ----- */
  /* Sem unidade: é um multiplicador do font-size de cada elemento.
     Com em/rem o valor era calculado uma vez e herdado fixo pelos filhos. */
  --font-height-3xl: 1.4;
  --font-height-2xl: 1.3;
  --font-height-xl:  1.2;
  --font-height-l:   1.1;
  --font-height-m:   1;
  --font-height-s:   0.9;
  --font-height-xs:  0.8;
  --font-height-0:   0;

  /* ----- Space semântico (margin, padding, gap): --space-3xs … --space-3xl -----
     As classes .m-*, .p-*, .gap-* e as prefixadas (.m-, .tm-, .t-, .dw-, .w-)
     lêem estes tokens. O valor muda por breakpoint (ver "Space responsivo");
     as classes não. Desktop (px):                          */
  --space-3xs: var(--space-1);    /*  4 */
  --space-2xs: var(--space-1-5);  /*  6 */
  --space-xs:  var(--space-2-5);  /* 10 */
  --space-s:   var(--space-4);    /* 16 */
  --space-m:   var(--space-6);    /* 24 */
  --space-l:   var(--space-8);    /* 32 */
  --space-xl:  var(--space-11);   /* 44 */
  --space-2xl: var(--space-16);   /* 64 */
  --space-3xl: var(--space-24);   /* 96 */
}

/* ----- Sections responsivas -----
   Degraus por breakpoint (decisão 24/09: sem clamp). Tablet ≈ 75–80% do desktop,
   mobile ≈ 50–65%. Lados: 20px em mobile, como o mínimo que o clamp já usava. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root:root {
    --section-xxl-padding:    7.5rem;   /* 120 */
    --section-xl-padding:     6rem;     /*  96 */
    --section-l-padding:      5rem;     /*  80 */
    --section-m-padding:      4rem;     /*  64 */
    --section-s-padding:      3rem;     /*  48 */
    --section-xs-padding:     2rem;     /*  32 */
    --section-xxs-padding:    1.25rem;  /*  20 */
    --section-header-padding: 1rem;     /*  16 */
    --section-side-l:   3rem;           /*  48 */
    --section-side-s:   2.5rem;         /*  40 */
    --section-side-xs:  2rem;           /*  32 */
    --section-side-2xs: 1.5rem;         /*  24 */
  }
}

@media (max-width: 767px) {
  :root:root {
    --section-xxl-padding:    5rem;     /*  80 */
    --section-xl-padding:     4rem;     /*  64 */
    --section-l-padding:      3.5rem;   /*  56 */
    --section-m-padding:      3rem;     /*  48 */
    --section-s-padding:      2.5rem;   /*  40 */
    --section-xs-padding:     2rem;     /*  32 */
    --section-xxs-padding:    1rem;     /*  16 */
    --section-header-padding: 1rem;     /*  16 */
    --section-side-l:   1.25rem;        /*  20 */
    --section-side-s:   1.25rem;
    --section-side-xs:  1.25rem;
    --section-side-2xs: 1.25rem;
  }
}

/* ----- Space responsivo -----
   Tablet: um degrau entre desktop e mobile. Mobile: os valores que o Core
   já usava em mobile. :root:root pelo mesmo motivo da tipografia. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root:root {
    --space-3xs: var(--space-1);    /*  4 */
    --space-2xs: var(--space-1);    /*  4 */
    --space-xs:  var(--space-2);    /*  8 */
    --space-s:   var(--space-3);    /* 12 */
    --space-m:   var(--space-5);    /* 20 */
    --space-l:   var(--space-7);    /* 28 */
    --space-xl:  var(--space-9);    /* 36 */
    --space-2xl: var(--space-12);   /* 48 */
    --space-3xl: var(--space-20);   /* 80 */
  }
}

@media (max-width: 767px) {
  :root:root {
    --space-3xs: var(--space-px);   /*  1 */
    --space-2xs: var(--space-0-5);  /*  2 */
    --space-xs:  var(--space-1);    /*  4 */
    --space-s:   var(--space-2-5);  /* 10 */
    --space-m:   var(--space-4);    /* 16 */
    --space-l:   var(--space-6);    /* 24 */
    --space-xl:  var(--space-8);    /* 32 */
    --space-2xl: var(--space-11);   /* 44 */
    --space-3xl: var(--space-16);   /* 64 */
  }
}

/* ----- Tipografia responsiva (tablet e mobile) -----
   O V4 guarda o valor desktop de --text-* e não permite valor por breakpoint.
   Aqui sobrepõem-se as mesmas variáveis. Propaga-se às classes V4, aos globais
   V3 sincronizados (design-system-sync.css) e às classes .font-size-*.
   :root:root (especificidade 0,2,0) ganha ao :root do kit V4 (post-61.css),
   seja qual for a ordem de carregamento.
   Escala typescale.com, base 16px (25/09): desktop 1.25 Major Third (V4),
   tablet e mobile 1.2 Minor Third (tablet aqui; mobile = --m-text-* do V4, mesmos valores).
   text-display-1…3 = 3 degraus acima do h1 na mesma escala, para destaques pontuais. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root:root {
    --text-h1: 2.986rem;  /* 48px */
    --text-h2: 2.488rem;  /* 40px */
    --text-h3: 2.074rem;  /* 33px */
    --text-h4: 1.728rem;  /* 28px */
    --text-h5: 1.44rem;   /* 23px */
    --text-h6: 1.2rem;    /* 19px */
    --text-display-1: 5.16rem;   /* 83px */
    --text-display-2: 4.3rem;    /* 69px */
    --text-display-3: 3.583rem;  /* 57px */
  }
}

@media (max-width: 767px) {
  :root:root {
    --text-display-1: var(--m-text-display-1);
    --text-display-2: var(--m-text-display-2);
    --text-display-3: var(--m-text-display-3);
    --text-h1: var(--m-text-h1);
    --text-h2: var(--m-text-h2);
    --text-h3: var(--m-text-h3);
    --text-h4: var(--m-text-h4);
    --text-h5: var(--m-text-h5);
    --text-h6: var(--m-text-h6);
  }
}

/* ===================================================================
   2. BASE
   =================================================================== */
/* 16px em todos os ecrãs. A redução no mobile vem dos tokens, não do html:
   um html a 14px encolhia 12,5% tudo o que está em rem (texto, spacing, sections). */
html {
  font-size: 16px;
}

/* ===================================================================
   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 (tokens --space-*, mudam por breakpoint)
   =================================================================== */
/* ----- Todos os breakpoints: o valor vem de --space-<tamanho> (ver :root) ----- */
.m-0   { margin: 0 !important; }
.m-1   { margin: var(--space-px) !important; }
.m-3xs { margin: var(--space-3xs) !important; }
.m-2xs { margin: var(--space-2xs) !important; }
.m-xs  { margin: var(--space-xs) !important; }
.m-s   { margin: var(--space-s) !important; }
.m-m   { margin: var(--space-m) !important; }
.m-l   { margin: var(--space-l) !important; }
.m-xl  { margin: var(--space-xl) !important; }
.m-2xl { margin: var(--space-2xl) !important; }
.m-3xl { margin: var(--space-3xl) !important; }

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

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

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

.ml-0   { margin-left: 0 !important; }
.ml-1   { margin-left: var(--space-px) !important; }
.ml-3xs { margin-left: var(--space-3xs) !important; }
.ml-2xs { margin-left: var(--space-2xs) !important; }
.ml-xs  { margin-left: var(--space-xs) !important; }
.ml-s   { margin-left: var(--space-s) !important; }
.ml-m   { margin-left: var(--space-m) !important; }
.ml-l   { margin-left: var(--space-l) !important; }
.ml-xl  { margin-left: var(--space-xl) !important; }
.ml-2xl { margin-left: var(--space-2xl) !important; }
.ml-3xl { margin-left: var(--space-3xl) !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-3xs) !important;     margin-right: var(--space-3xs) !important; }
.mx-2xs { margin-left: var(--space-2xs) !important;   margin-right: var(--space-2xs) !important; }
.mx-xs  { margin-left: var(--space-xs) !important;   margin-right: var(--space-xs) !important; }
.mx-s   { margin-left: var(--space-s) !important;     margin-right: var(--space-s) !important; }
.mx-m   { margin-left: var(--space-m) !important;     margin-right: var(--space-m) !important; }
.mx-l   { margin-left: var(--space-l) !important;     margin-right: var(--space-l) !important; }
.mx-xl  { margin-left: var(--space-xl) !important;    margin-right: var(--space-xl) !important; }
.mx-2xl { margin-left: var(--space-2xl) !important;    margin-right: var(--space-2xl) !important; }
.mx-3xl { margin-left: var(--space-3xl) !important;    margin-right: var(--space-3xl) !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-3xs) !important;     margin-bottom: var(--space-3xs) !important; }
.my-2xs { margin-top: var(--space-2xs) !important;   margin-bottom: var(--space-2xs) !important; }
.my-xs  { margin-top: var(--space-xs) !important;   margin-bottom: var(--space-xs) !important; }
.my-s   { margin-top: var(--space-s) !important;     margin-bottom: var(--space-s) !important; }
.my-m   { margin-top: var(--space-m) !important;     margin-bottom: var(--space-m) !important; }
.my-l   { margin-top: var(--space-l) !important;     margin-bottom: var(--space-l) !important; }
.my-xl  { margin-top: var(--space-xl) !important;    margin-bottom: var(--space-xl) !important; }
.my-2xl { margin-top: var(--space-2xl) !important;    margin-bottom: var(--space-2xl) !important; }
.my-3xl { margin-top: var(--space-3xl) !important;    margin-bottom: var(--space-3xl) !important; }


/* ===================================================================
   5. PADDING (tokens --space-*, mudam por breakpoint)
   =================================================================== */
/* ----- Todos os breakpoints: o valor vem de --space-<tamanho> (ver :root) ----- */
.p-0   { padding: 0 !important; }
.p-1   { padding: var(--space-px) !important; }
.p-3xs { padding: var(--space-3xs) !important; }
.p-2xs { padding: var(--space-2xs) !important; }
.p-xs  { padding: var(--space-xs) !important; }
.p-s   { padding: var(--space-s) !important; }
.p-m   { padding: var(--space-m) !important; }
.p-l   { padding: var(--space-l) !important; }
.p-xl  { padding: var(--space-xl) !important; }
.p-2xl { padding: var(--space-2xl) !important; }
.p-3xl { padding: var(--space-3xl) !important; }

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

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

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

.pl-0   { padding-left: 0 !important; }
.pl-1   { padding-left: var(--space-px) !important; }
.pl-3xs { padding-left: var(--space-3xs) !important; }
.pl-2xs { padding-left: var(--space-2xs) !important; }
.pl-xs  { padding-left: var(--space-xs) !important; }
.pl-s   { padding-left: var(--space-s) !important; }
.pl-m   { padding-left: var(--space-m) !important; }
.pl-l   { padding-left: var(--space-l) !important; }
.pl-xl  { padding-left: var(--space-xl) !important; }
.pl-2xl { padding-left: var(--space-2xl) !important; }
.pl-3xl { padding-left: var(--space-3xl) !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-3xs) !important;    padding-right: var(--space-3xs) !important; }
.px-2xs { padding-left: var(--space-2xs) !important;  padding-right: var(--space-2xs) !important; }
.px-xs  { padding-left: var(--space-xs) !important;  padding-right: var(--space-xs) !important; }
.px-s   { padding-left: var(--space-s) !important;    padding-right: var(--space-s) !important; }
.px-m   { padding-left: var(--space-m) !important;    padding-right: var(--space-m) !important; }
.px-l   { padding-left: var(--space-l) !important;    padding-right: var(--space-l) !important; }
.px-xl  { padding-left: var(--space-xl) !important;   padding-right: var(--space-xl) !important; }
.px-2xl { padding-left: var(--space-2xl) !important;   padding-right: var(--space-2xl) !important; }
.px-3xl { padding-left: var(--space-3xl) !important;   padding-right: var(--space-3xl) !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-3xs) !important;    padding-bottom: var(--space-3xs) !important; }
.py-2xs { padding-top: var(--space-2xs) !important;  padding-bottom: var(--space-2xs) !important; }
.py-xs  { padding-top: var(--space-xs) !important;  padding-bottom: var(--space-xs) !important; }
.py-s   { padding-top: var(--space-s) !important;    padding-bottom: var(--space-s) !important; }
.py-m   { padding-top: var(--space-m) !important;    padding-bottom: var(--space-m) !important; }
.py-l   { padding-top: var(--space-l) !important;    padding-bottom: var(--space-l) !important; }
.py-xl  { padding-top: var(--space-xl) !important;   padding-bottom: var(--space-xl) !important; }
.py-2xl { padding-top: var(--space-2xl) !important;   padding-bottom: var(--space-2xl) !important; }
.py-3xl { padding-top: var(--space-3xl) !important;   padding-bottom: var(--space-3xl) !important; }


/* ===================================================================
   6. GAP (tokens --space-*, mudam por breakpoint)
   =================================================================== */
/* Também definem --gap / --row-gap / --column-gap (variáveis do Elementor): num container
   V3 boxed os filhos estão no .e-con-inner, que usa essas variáveis e herda-as daqui. */
.gap-0{ gap: 0 !important; --gap: 0 0 !important; --row-gap: 0 !important; --column-gap: 0 !important; }
.gap-1 { gap: var(--space-px) !important; --gap: var(--space-px) var(--space-px) !important; --row-gap: var(--space-px) !important; --column-gap: var(--space-px) !important; }
.gap-3xs { gap: var(--space-3xs) !important; --gap: var(--space-3xs) var(--space-3xs) !important; --row-gap: var(--space-3xs) !important; --column-gap: var(--space-3xs) !important; }
.gap-2xs { gap: var(--space-2xs) !important; --gap: var(--space-2xs) var(--space-2xs) !important; --row-gap: var(--space-2xs) !important; --column-gap: var(--space-2xs) !important; }
.gap-xs { gap: var(--space-xs) !important; --gap: var(--space-xs) var(--space-xs) !important; --row-gap: var(--space-xs) !important; --column-gap: var(--space-xs) !important; }
.gap-s { gap: var(--space-s) !important; --gap: var(--space-s) var(--space-s) !important; --row-gap: var(--space-s) !important; --column-gap: var(--space-s) !important; }
.gap-m { gap: var(--space-m) !important; --gap: var(--space-m) var(--space-m) !important; --row-gap: var(--space-m) !important; --column-gap: var(--space-m) !important; }
.gap-l { gap: var(--space-l) !important; --gap: var(--space-l) var(--space-l) !important; --row-gap: var(--space-l) !important; --column-gap: var(--space-l) !important; }
.gap-xl { gap: var(--space-xl) !important; --gap: var(--space-xl) var(--space-xl) !important; --row-gap: var(--space-xl) !important; --column-gap: var(--space-xl) !important; }
.gap-2xl { gap: var(--space-2xl) !important; --gap: var(--space-2xl) var(--space-2xl) !important; --row-gap: var(--space-2xl) !important; --column-gap: var(--space-2xl) !important; }
.gap-3xl { gap: var(--space-3xl) !important; --gap: var(--space-3xl) var(--space-3xl) !important; --row-gap: var(--space-3xl) !important; --column-gap: var(--space-3xl) !important; }

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

.column-gap-0 { column-gap: 0 !important; --column-gap: 0 !important; }
.column-gap-1 { column-gap: var(--space-px) !important; --column-gap: var(--space-px) !important; }
.column-gap-3xs { column-gap: var(--space-3xs) !important; --column-gap: var(--space-3xs) !important; }
.column-gap-2xs { column-gap: var(--space-2xs) !important; --column-gap: var(--space-2xs) !important; }
.column-gap-xs { column-gap: var(--space-xs) !important; --column-gap: var(--space-xs) !important; }
.column-gap-s { column-gap: var(--space-s) !important; --column-gap: var(--space-s) !important; }
.column-gap-m { column-gap: var(--space-m) !important; --column-gap: var(--space-m) !important; }
.column-gap-l { column-gap: var(--space-l) !important; --column-gap: var(--space-l) !important; }
.column-gap-xl { column-gap: var(--space-xl) !important; --column-gap: var(--space-xl) !important; }
.column-gap-2xl { column-gap: var(--space-2xl) !important; --column-gap: var(--space-2xl) !important; }
.column-gap-3xl { column-gap: var(--space-3xl) !important; --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 (block + inline)
   Valores em --section-*-padding e --section-side-* (ver :root); mudam por
   breakpoint, as classes não. .section-2xl = .section-xxl e .section-2xs =
   .section-xxs (antes só tinham padding lateral).
   =================================================================== */
.section-2xl, .section-xxl { padding-block: var(--section-xxl-padding); }
.section-xl                { padding-block: var(--section-xl-padding); }
.section-l                 { padding-block: var(--section-l-padding); }
.section-m                 { padding-block: var(--section-m-padding); }
.section-s                 { padding-block: var(--section-s-padding); }
.section-xs                { padding-block: var(--section-xs-padding); }
.section-2xs, .section-xxs { padding-block: var(--section-xxs-padding); }
.section-header            { padding-block: var(--section-header-padding); }

.section-2xl,
.section-xxl,
.section-xl,
.section-l,
.section-m      { padding-inline: var(--section-side-l) !important; }
.section-s      { padding-inline: var(--section-side-s) !important; }
.section-xs     { padding-inline: var(--section-side-xs) !important; }
.section-2xs,
.section-xxs,
.section-header { padding-inline: var(--section-side-2xs) !important; }

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

/* O elemento flex é o .e-con-inner num container boxed, e o próprio
   elemento num container full width ou num V4 (flexbox / div block). */
.section-hero:not(.e-con-boxed),
.section-hero.e-con-boxed > .e-con-inner {
  justify-content: center !important;
}

/* Conteúdo a toda a largura dentro de um container boxed.
   Antes: ".section-full div", que tirava o max-width a TODAS as divs lá dentro. */
.section-full > .e-con-inner {
  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));
}

/* ===================================================================
   11. SECÇÕES — Alinhamento do conteúdo (containers V3 e V4)
   Antes visavam .elementor-row / .elementor-container, que só existem nas
   sections legacy V3: em containers não faziam nada.
   O elemento flex é o .e-con-inner (boxed) ou o próprio elemento (full / V4).
   =================================================================== */
.section-columns-top:not(.e-con-boxed),     .section-columns-top.e-con-boxed > .e-con-inner     { align-items: flex-start !important; }
.section-columns-center:not(.e-con-boxed),  .section-columns-center.e-con-boxed > .e-con-inner  { align-items: center     !important; }
.section-columns-bottom:not(.e-con-boxed),  .section-columns-bottom.e-con-boxed > .e-con-inner  { align-items: flex-end   !important; }
.section-columns-stretch:not(.e-con-boxed), .section-columns-stretch.e-con-boxed > .e-con-inner { align-items: stretch    !important; }

.section-content-start:not(.e-con-boxed),         .section-content-start.e-con-boxed > .e-con-inner         { justify-content: flex-start    !important; }
.section-content-center:not(.e-con-boxed),        .section-content-center.e-con-boxed > .e-con-inner        { justify-content: center        !important; }
.section-content-end:not(.e-con-boxed),           .section-content-end.e-con-boxed > .e-con-inner           { justify-content: flex-end      !important; }
.section-content-space-between:not(.e-con-boxed), .section-content-space-between.e-con-boxed > .e-con-inner { 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:not(.e-con-boxed),   .section-stack-m.e-con-boxed > .e-con-inner   { flex-direction: column         !important; }
  .section-reverse-m:not(.e-con-boxed), .section-reverse-m.e-con-boxed > .e-con-inner { flex-direction: column-reverse !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .section-hide-t { display: none !important; }
  .section-stack-t:not(.e-con-boxed),   .section-stack-t.e-con-boxed > .e-con-inner   { flex-direction: column         !important; }
  .section-reverse-t:not(.e-con-boxed), .section-reverse-t.e-con-boxed > .e-con-inner { flex-direction: column-reverse !important; }
}

/* Radius e shadow: usar .radius-* e .shadow-* (secções 7 e 8). Para o radius
   cortar imagens de fundo, juntar .overflow-hidden. A antiga secção
   "Radius e shadow (Elementor)" visava .elementor-widget-container.radius-*,
   que nunca corresponde (a classe fica no .elementor-element) e foi removida. */

/* ===================================================================
   13. SECÇÕES — Overlays
   =================================================================== */
.section-overlay { position: relative; }

/* .e-con.section-overlay: o Elementor usa o ::before dos containers para o overlay
   dele (.e-con::before { content: var(--background-overlay) }, frontend.min.css,
   carrega depois). Com a mesma especificidade ganhava e o overlay nunca aparecia. */
.e-con.section-overlay::before,
.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.section-overlay-light::before { background-color: rgba(255, 255, 255, 0.7); }
.section-overlay.section-overlay-dark::before  { background-color: rgba(0, 0, 0, 0.7); }

/* O conteúdo fica por cima do overlay (antes só funcionava em sections legacy). */
.section-overlay > :not(.elementor-absolute):not(.elementor-fixed) {
  position: relative;
  z-index: 2;
}

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

/* Colunas: em containers usar .gap-* / .column-gap-* (secção 6) e
   .section-columns-stretch (altura igual, secção 11). As antigas
   .section-column-gap-* e .section-columns-equal-height visavam .elementor-row /
   .elementor-column (só sections legacy V3) e foram removidas. */

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

/* ===================================================================
   16. 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; }
/* .e-con.: mesmo motivo do overlay (o ::before dos containers é do Elementor).
   Nota: overlay e divider-top usam ambos o ::before; não combinar os dois. */
.e-con.section-divider-top::before,
.section-divider-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 50px;
  background-size: 100% 100%;
  z-index: 1;
}

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

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

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

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

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

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

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

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

/* ===================================================================
   25. HELPERS — Width / height
   =================================================================== */
.width-100       { width: 100%  !important; }
.width-auto      { width: auto  !important; }
.width-fit       { width: fit-content !important; }
/* Nome antigo (estava no snippet de widgets). Mantido para não partir projectos antigos: usar .width-fit. */
.fit-content     { width: fit-content !important; }
.height-100      { height: 100% !important; }
.min-height-100vh { min-height: 100vh !important; }

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

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

/* .p-0 num container boxed também tira o padding do .e-con-inner. */
.e-con.p-0 .e-con-inner { padding: 0 !important; }

/* ===================================================================
   28. TEXTO — Font family / size / height
   =================================================================== */
/* Só existem as fontes V4 font-primary e font-secondary.
   .font-family-text e .font-family-accent apontavam para variáveis inexistentes e foram removidas. */
.font-family-primary,   .font-family-primary *   { font-family: var(--font-primary); }
.font-family-secondary, .font-family-secondary * { font-family: var(--font-secondary); }

.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; }

/* ===================================================================
   29. SVG — Fill
   =================================================================== */
/* !important (25/09): alguns SVG trazem a cor inline em cada path (ex.: Payshop), que ganha a CSS normal.
   Dentro de .svg-* todos os paths ficam da mesma cor: não usar em ícones de várias cores. */
.svg-white    svg, .svg-white    path { fill: var(--colour-white) !important; }
.svg-black    svg, .svg-black    path { fill: var(--colour-black) !important; }
.svg-grey-050 svg, .svg-grey-050 path { fill: var(--colour-grey-050) !important; }
.svg-grey-200 svg, .svg-grey-200 path { fill: var(--colour-grey-200) !important; }
.svg-grey-950 svg, .svg-grey-950 path { fill: var(--colour-grey-950) !important; }
.svg-primary   svg, .svg-primary   path { fill: var(--colour-primary) !important; }
.svg-secondary svg, .svg-secondary path { fill: var(--colour-secondary) !important; }

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