@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wdth,wght,YTLC@0,6..12,75..125,200..1000,440..540;1,6..12,75..125,200..1000,440..540&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
:root {
  --blacktce: #000000;
  --whitetce: #FFFFFF;
  /* Gray */
  --gray-50: #eaeaea;
  --gray-100: #bcbcbc;
  --gray-200: #9c9c9c;
  --gray-300: #6f6f6f;
  --gray-400: #535353;
  --gray-500: #282828;
  --gray-600: #242424;
  --gray-700: #1c1c1c;
  --gray-800: #161616;
  --gray-900: #111111;
  /* Blue TCE */
  --bluetce-50: #e6ecf0;
  --bluetce-100: #b0c4d1;
  --bluetce-200: #8aa8bb;
  --bluetce-300: #55809d;
  --bluetce-400: #346889;
  --bluetce-500: #01426c;
  --bluetce-600: #013c62;
  --bluetce-700: #012f4d;
  --bluetce-800: #01243b;
  --bluetce-900: #001c2d;
  /* Green */
  --green-50: #e8f3e8;
  --green-100: #b7d9b7;
  --green-200: #94c694;
  --green-300: #64ad64;
  --green-400: #459d45;
  --green-500: #178417;
  --green-600: #157815;
  --green-700: #105e10;
  --green-800: #0d490d;
  --green-900: #0a370a;
  /* Yellow */
  --yellow-50: #fefbe6;
  --yellow-100: #fdf3b0;
  --yellow-200: #fced8a;
  --yellow-300: #fbe554;
  --yellow-400: #fae033;
  --yellow-500: #f9d800;
  --yellow-600: #e3c500;
  --yellow-700: #b19900;
  --yellow-800: #897700;
  --yellow-900: #695b00;
  /* Blue */
  --blue-50: #e6f3fb;
  --blue-100: #b0dbf2;
  --blue-200: #8ac8ec;
  --blue-300: #54b1e4;
  --blue-400: #33a2de;
  --blue-500: #008bd6;
  --blue-600: #007ec3;
  --blue-700: #006398;
  --blue-800: #004c76;
  --blue-900: #003a5a;
  /* Orange */
  --orange-50: #faebe8;
  --orange-100: #f0c0b8;
  --orange-200: #e9a296;
  --orange-300: #df7866;
  --orange-400: #d95d49;
  --orange-500: #cf351b;
  --orange-600: #bc3019;
  --orange-700: #932613;
  --orange-800: #721d0f;
  --orange-900: #57160b;
}

/* src/tokens/_spacing.scss */
.tce-ui {
  /* Margens e Paddings Utilitários */
  /* Nível 0 (0rem) */
}
.tce-ui .m-0 {
  margin: 0;
}
.tce-ui .mt-0 {
  margin-top: 0;
}
.tce-ui .mb-0 {
  margin-bottom: 0;
}
.tce-ui .ml-0 {
  margin-left: 0;
}
.tce-ui .mr-0 {
  margin-right: 0;
}
.tce-ui .p-0 {
  padding: 0;
}
.tce-ui .pt-0 {
  padding-top: 0;
}
.tce-ui .pb-0 {
  padding-bottom: 0;
}
.tce-ui .pl-0 {
  padding-left: 0;
}
.tce-ui .pr-0 {
  padding-right: 0;
}
.tce-ui {
  /* Nível 1 (0.5rem) */
}
.tce-ui .m-1 {
  margin: 0.5rem;
}
.tce-ui .mt-1 {
  margin-top: 0.5rem;
}
.tce-ui .mb-1 {
  margin-bottom: 0.5rem;
}
.tce-ui .ml-1 {
  margin-left: 0.5rem;
}
.tce-ui .mr-1 {
  margin-right: 0.5rem;
}
.tce-ui .p-1 {
  padding: 0.5rem;
}
.tce-ui .pt-1 {
  padding-top: 0.5rem;
}
.tce-ui .pb-1 {
  padding-bottom: 0.5rem;
}
.tce-ui .pl-1 {
  padding-left: 0.5rem;
}
.tce-ui .pr-1 {
  padding-right: 0.5rem;
}
.tce-ui {
  /* Nível 2 (0.75rem) */
}
.tce-ui .m-2 {
  margin: 0.75rem;
}
.tce-ui .mt-2 {
  margin-top: 0.75rem;
}
.tce-ui .mb-2 {
  margin-bottom: 0.75rem;
}
.tce-ui .ml-2 {
  margin-left: 0.75rem;
}
.tce-ui .mr-2 {
  margin-right: 0.75rem;
}
.tce-ui .p-2 {
  padding: 0.75rem;
}
.tce-ui .pt-2 {
  padding-top: 0.75rem;
}
.tce-ui .pb-2 {
  padding-bottom: 0.75rem;
}
.tce-ui .pl-2 {
  padding-left: 0.75rem;
}
.tce-ui .pr-2 {
  padding-right: 0.75rem;
}
.tce-ui {
  /* Nível 3 (1rem) */
}
.tce-ui .m-3 {
  margin: 1rem;
}
.tce-ui .mt-3 {
  margin-top: 1rem;
}
.tce-ui .mb-3 {
  margin-bottom: 1rem;
}
.tce-ui .ml-3 {
  margin-left: 1rem;
}
.tce-ui .mr-3 {
  margin-right: 1rem;
}
.tce-ui .p-3 {
  padding: 1rem;
}
.tce-ui .pt-3 {
  padding-top: 1rem;
}
.tce-ui .pb-3 {
  padding-bottom: 1rem;
}
.tce-ui .pl-3 {
  padding-left: 1rem;
}
.tce-ui .pr-3 {
  padding-right: 1rem;
}
.tce-ui {
  /* Nível 4 (1.25rem) */
}
.tce-ui .m-4 {
  margin: 1.25rem;
}
.tce-ui .mt-4 {
  margin-top: 1.25rem;
}
.tce-ui .mb-4 {
  margin-bottom: 1.25rem;
}
.tce-ui .ml-4 {
  margin-left: 1.25rem;
}
.tce-ui .mr-4 {
  margin-right: 1.25rem;
}
.tce-ui .p-4 {
  padding: 1.25rem;
}
.tce-ui .pt-4 {
  padding-top: 1.25rem;
}
.tce-ui .pb-4 {
  padding-bottom: 1.25rem;
}
.tce-ui .pl-4 {
  padding-left: 1.25rem;
}
.tce-ui .pr-4 {
  padding-right: 1.25rem;
}
.tce-ui {
  /* Nível 5 (1.5rem) */
}
.tce-ui .m-5 {
  margin: 1.5rem;
}
.tce-ui .mt-5 {
  margin-top: 1.5rem;
}
.tce-ui .mb-5 {
  margin-bottom: 1.5rem;
}
.tce-ui .ml-5 {
  margin-left: 1.5rem;
}
.tce-ui .mr-5 {
  margin-right: 1.5rem;
}
.tce-ui .p-5 {
  padding: 1.5rem;
}
.tce-ui .pt-5 {
  padding-top: 1.5rem;
}
.tce-ui .pb-5 {
  padding-bottom: 1.5rem;
}
.tce-ui .pl-5 {
  padding-left: 1.5rem;
}
.tce-ui .pr-5 {
  padding-right: 1.5rem;
}
.tce-ui {
  /* Nível 6 (2rem) */
}
.tce-ui .m-6 {
  margin: 2rem;
}
.tce-ui .mt-6 {
  margin-top: 2rem;
}
.tce-ui .mb-6 {
  margin-bottom: 2rem;
}
.tce-ui .ml-6 {
  margin-left: 2rem;
}
.tce-ui .mr-6 {
  margin-right: 2rem;
}
.tce-ui .p-6 {
  padding: 2rem;
}
.tce-ui .pt-6 {
  padding-top: 2rem;
}
.tce-ui .pb-6 {
  padding-bottom: 2rem;
}
.tce-ui .pl-6 {
  padding-left: 2rem;
}
.tce-ui .pr-6 {
  padding-right: 2rem;
}
.tce-ui {
  /* Nível 7 (2.5rem) */
}
.tce-ui .m-7 {
  margin: 2.5rem;
}
.tce-ui .mt-7 {
  margin-top: 2.5rem;
}
.tce-ui .mb-7 {
  margin-bottom: 2.5rem;
}
.tce-ui .ml-7 {
  margin-left: 2.5rem;
}
.tce-ui .mr-7 {
  margin-right: 2.5rem;
}
.tce-ui .p-7 {
  padding: 2.5rem;
}
.tce-ui .pt-7 {
  padding-top: 2.5rem;
}
.tce-ui .pb-7 {
  padding-bottom: 2.5rem;
}
.tce-ui .pl-7 {
  padding-left: 2.5rem;
}
.tce-ui .pr-7 {
  padding-right: 2.5rem;
}
.tce-ui {
  /* Nível 8 (3rem) */
}
.tce-ui .m-8 {
  margin: 3rem;
}
.tce-ui .mt-8 {
  margin-top: 3rem;
}
.tce-ui .mb-8 {
  margin-bottom: 3rem;
}
.tce-ui .ml-8 {
  margin-left: 3rem;
}
.tce-ui .mr-8 {
  margin-right: 3rem;
}
.tce-ui .p-8 {
  padding: 3rem;
}
.tce-ui .pt-8 {
  padding-top: 3rem;
}
.tce-ui .pb-8 {
  padding-bottom: 3rem;
}
.tce-ui .pl-8 {
  padding-left: 3rem;
}
.tce-ui .pr-8 {
  padding-right: 3rem;
}
.tce-ui {
  /* Nível 9 (4rem) */
}
.tce-ui .m-9 {
  margin: 4rem;
}
.tce-ui .mt-9 {
  margin-top: 4rem;
}
.tce-ui .mb-9 {
  margin-bottom: 4rem;
}
.tce-ui .ml-9 {
  margin-left: 4rem;
}
.tce-ui .mr-9 {
  margin-right: 4rem;
}
.tce-ui .p-9 {
  padding: 4rem;
}
.tce-ui .pt-9 {
  padding-top: 4rem;
}
.tce-ui .pb-9 {
  padding-bottom: 4rem;
}
.tce-ui .pl-9 {
  padding-left: 4rem;
}
.tce-ui .pr-9 {
  padding-right: 4rem;
}
.tce-ui {
  /* Nível 10 (6rem) */
}
.tce-ui .m-10 {
  margin: 6rem;
}
.tce-ui .mt-10 {
  margin-top: 6rem;
}
.tce-ui .mb-10 {
  margin-bottom: 6rem;
}
.tce-ui .ml-10 {
  margin-left: 6rem;
}
.tce-ui .mr-10 {
  margin-right: 6rem;
}
.tce-ui .p-10 {
  padding: 6rem;
}
.tce-ui .pt-10 {
  padding-top: 6rem;
}
.tce-ui .pb-10 {
  padding-bottom: 6rem;
}
.tce-ui .pl-10 {
  padding-left: 6rem;
}
.tce-ui .pr-10 {
  padding-right: 6rem;
}
.tce-ui {
  /* Classe para remover gap entre linhas */
}
.tce-ui .row.no-gap {
  gap: 0;
}
.tce-ui {
  /* Classe para gap personalizado */
}
.tce-ui .row.gap-1 {
  gap: 0.5rem;
}
.tce-ui .row.gap-2 {
  gap: 0.75rem;
}
.tce-ui .row.gap-3 {
  gap: 1rem;
}
.tce-ui .row.gap-4 {
  gap: 1.25rem;
}
.tce-ui .row.gap-5 {
  gap: 1.5rem;
}
.tce-ui .row.gap-6 {
  gap: 2rem;
}
.tce-ui .row.gap-7 {
  gap: 2.5rem;
}
.tce-ui .row.gap-8 {
  gap: 3rem;
}
.tce-ui .row.gap-9 {
  gap: 4rem;
}
.tce-ui .row.gap-10 {
  gap: 6rem;
}
.tce-ui {
  /* Espaçamento base */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
}

:root {
  --font-family-primary: 'Nunito Sans', sans-serif;
  --font-family-secondary: 'Roboto', sans-serif;
}

:root {
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 34px;
  --font-size-4xl: 48px;
  --font-size-5xl: 60px;
  --font-size-6xl: 96px;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
  --line-height-sm: 1.167;
  --line-height-md: 1.2;
  --line-height-lg: 1.235;
  --line-height-xl: 1.334;
  --line-height-2xl: 1.6;
}
:root .typography-h1-light {
  /* typography/h1/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-6xl, 96px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 116.7%; /* 112.032px */
  letter-spacing: -1.5px;
}
:root .typography-h1-regular {
  /* typography/h1/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-6xl, 96px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 116.7%; /* 112.032px */
  letter-spacing: -1.5px;
}
:root .typography-h1-medium {
  /* typography/h1/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-6xl, 96px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 116.7%; /* 112.032px */
  letter-spacing: -1.5px;
}
:root .typography-h1-semibold {
  /* typography/h1/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-6xl, 96px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 116.7%; /* 112.032px */
  letter-spacing: -1.5px;
}
:root .typography-h1-bold {
  /* typography/h1/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-6xl, 96px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 116.7%; /* 112.032px */
  letter-spacing: -1.5px;
}
:root .typography-h2-light {
  /* typography/h2/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-5xl, 60px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 120%; /* 72px */
  letter-spacing: -0.5px;
}
:root .typography-h2-regular {
  /* typography/h2/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-5xl, 60px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 120%; /* 72px */
  letter-spacing: -0.5px;
}
:root .typography-h2-medium {
  /* typography/h2/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-5xl, 60px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 120%; /* 72px */
  letter-spacing: -0.5px;
}
:root .typography-h2-semibold {
  /* typography/h2/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-5xl, 60px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 120%; /* 72px */
  letter-spacing: -0.5px;
}
:root .typography-h2-bold {
  /* typography/h2/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-5xl, 60px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 120%; /* 72px */
  letter-spacing: -0.5px;
}
:root .typography-h3-light {
  /* typography/h3/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-4xl, 48px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 116.7%; /* 56.016px */
}
:root .typography-h3-regular {
  /* typography/h3/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-4xl, 48px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 116.7%; /* 56.016px */
}
:root .typography-h3-medium {
  /* typography/h3/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-4xl, 48px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 116.7%; /* 56.016px */
}
:root .typography-h3-semibold {
  /* typography/h3/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-4xl, 48px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 116.7%; /* 56.016px */
}
:root .typography-h3-bold {
  /* typography/h3/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-4xl, 48px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 116.7%; /* 56.016px */
}
:root .typography-h4-light {
  /* typography/h4/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-3xl, 34px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 123.5%; /* 41.99px */
  letter-spacing: 0.25px;
}
:root .typography-h4-regular {
  /* typography/h4/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-3xl, 34px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 123.5%; /* 41.99px */
  letter-spacing: 0.25px;
}
:root .typography-h4-medium {
  /* typography/h4/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-3xl, 34px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 123.5%; /* 41.99px */
  letter-spacing: 0.25px;
}
:root .typography-h4-semibold {
  /* typography/h4/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-3xl, 34px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 123.5%; /* 41.99px */
  letter-spacing: 0.25px;
}
:root .typography-h4-bold {
  /* typography/h4/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-3xl, 34px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 123.5%; /* 41.99px */
  letter-spacing: 0.25px;
}
:root .typography-h5-light {
  /* typography/h5/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-2xl, 24px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 133.4%; /* 32.016px */
}
:root .typography-h5-regular {
  /* typography/h5/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-2xl, 24px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 133.4%; /* 32.016px */
}
:root .typography-h5-medium {
  /* typography/h5/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-2xl, 24px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 133.4%; /* 32.016px */
}
:root .typography-h5-semibold {
  /* typography/h5/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-2xl, 24px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 133.4%; /* 32.016px */
}
:root .typography-h5-bold {
  /* typography/h5/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-2xl, 24px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 133.4%; /* 32.016px */
}
:root .typography-h6-light {
  /* typography/h6/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-xl, 20px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 160%; /* 32px */
  letter-spacing: 0.15px;
}
:root .typography-h6-regular {
  /* typography/h6/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-xl, 20px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 160%; /* 32px */
  letter-spacing: 0.15px;
}
:root .typography-h6-medium {
  /* typography/h6/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-xl, 20px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 160%; /* 32px */
  letter-spacing: 0.15px;
}
:root .typography-h6-semibold {
  /* typography/h6/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-xl, 20px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 160%; /* 32px */
  letter-spacing: 0.15px;
}
:root .typography-h6-bold {
  /* typography/h6/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-xl, 20px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 160%; /* 32px */
  letter-spacing: 0.15px;
}
:root .typography-subtitle1-light {
  /* typography/subtitle1/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 175%; /* 28px */
  letter-spacing: 0.15px;
}
:root .typography-subtitle1-regular {
  /* typography/subtitle1/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 175%; /* 28px */
  letter-spacing: 0.15px;
}
:root .typography-subtitle1-medium {
  /* typography/subtitle1/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 175%; /* 28px */
  letter-spacing: 0.15px;
}
:root .typography-subtitle1-semibold {
  /* typography/subtitle1/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 175%; /* 28px */
  letter-spacing: 0.15px;
}
:root .typography-subtitle1-bold {
  /* typography/subtitle1/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 175%; /* 28px */
  letter-spacing: 0.15px;
}
:root .typography-subtitle2-light {
  /* typography/subtitle2/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 157%; /* 21.98px */
  letter-spacing: 0.1px;
}
:root .typography-subtitle2-regular {
  /* typography/subtitle2/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 157%; /* 21.98px */
  letter-spacing: 0.1px;
}
:root .typography-subtitle2-medium {
  /* typography/subtitle2/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 157%; /* 21.98px */
  letter-spacing: 0.1px;
}
:root .typography-subtitle2-semibold {
  /* typography/subtitle2/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 157%; /* 21.98px */
  letter-spacing: 0.1px;
}
:root .typography-subtitle2-bold {
  /* typography/subtitle2/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 157%; /* 21.98px */
  letter-spacing: 0.1px;
}
:root .typography-body1-light {
  /* typography/body1/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 150%; /* 24px */
  letter-spacing: 0.15px;
}
:root .typography-body1-regular {
  /* typography/body1/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 150%; /* 24px */
  letter-spacing: 0.15px;
}
:root .typography-body1-medium {
  /* typography/body1/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 150%; /* 24px */
  letter-spacing: 0.15px;
}
:root .typography-body1-semibold {
  /* typography/body1/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 150%; /* 24px */
  letter-spacing: 0.15px;
}
:root .typography-body1-bold {
  /* typography/body1/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-lg, 16px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 150%; /* 24px */
  letter-spacing: 0.15px;
}
:root .typography-body2-light {
  /* typography/body2/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 143%; /* 20.02px */
  letter-spacing: 0.17px;
}
:root .typography-body2-regular {
  /* typography/body2/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 143%; /* 20.02px */
  letter-spacing: 0.17px;
}
:root .typography-body2-medium {
  /* typography/body2/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 143%; /* 20.02px */
  letter-spacing: 0.17px;
}
:root .typography-body2-semibold {
  /* typography/body2/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 143%; /* 20.02px */
  letter-spacing: 0.17px;
}
:root .typography-body2-bold {
  /* typography/body2/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-md, 14px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 143%; /* 20.02px */
  letter-spacing: 0.17px;
}
:root .typography-caption-light {
  /* typography/caption/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 166%; /* 19.92px */
  letter-spacing: 0.4px;
}
:root .typography-caption-regular {
  /* typography/caption/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 166%; /* 19.92px */
  letter-spacing: 0.4px;
}
:root .typography-caption-medium {
  /* typography/caption/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 166%; /* 19.92px */
  letter-spacing: 0.4px;
}
:root .typography-caption-semibold {
  /* typography/caption/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 166%; /* 19.92px */
  letter-spacing: 0.4px;
}
:root .typography-caption-bold {
  /* typography/caption/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 166%; /* 19.92px */
  letter-spacing: 0.4px;
}
:root .typography-overline-light {
  /* typography/overline/light */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-light, 300);
  line-height: 266%; /* 31.92px */
  letter-spacing: 1px;
  text-transform: uppercase;
}
:root .typography-overline-regular {
  /* typography/overline/regular */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-regular, 400);
  line-height: 266%; /* 31.92px */
  letter-spacing: 1px;
  text-transform: uppercase;
}
:root .typography-overline-medium {
  /* typography/overline/medium */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  line-height: 266%; /* 31.92px */
  letter-spacing: 1px;
  text-transform: uppercase;
}
:root .typography-overline-semibold {
  /* typography/overline/semibold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 266%; /* 31.92px */
  letter-spacing: 1px;
  text-transform: uppercase;
}
:root .typography-overline-bold {
  /* typography/overline/bold */
  font-family: var(--font-family-primary, "Nunito Sans");
  font-size: var(--font-size-sm, 12px);
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  line-height: 266%; /* 31.92px */
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tce-ui .container {
  margin: 0 auto;
  width: 90%;
}
.tce-ui .container:not(:has(iframe)) {
  max-width: 1280px;
}
@media only screen and (min-width: 601px) {
  .tce-ui .container {
    width: 85%;
  }
}
@media only screen and (min-width: 993px) {
  .tce-ui .container {
    width: 70%;
  }
}

.tce-ui {
  /* ============================================
   SISTEMA DE GRID CSS GRID COM GRID-AREA DINÂMICO
   ============================================ */
  /* Sistema de Grid - Mobile First */
}
.tce-ui .row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
  gap: 1.5rem;
  margin: 0;
}
.tce-ui {
  /* Classe base para colunas */
}
.tce-ui .col {
  grid-column: span var(--grid-columns, 12);
  margin-bottom: 1.5rem;
}
.tce-ui {
  /* ============================================
   SISTEMA DINÂMICO DE COLUNAS
   ============================================ */
  /* Função para gerar classes de colunas dinâmicas */
  /* Classes gerais para qualquer proporção */
}
.tce-ui .col[class*="-1-"] {
  grid-column: span 1;
}
.tce-ui .col[class*="-2-"] {
  grid-column: span 2;
}
.tce-ui .col[class*="-3-"] {
  grid-column: span 3;
}
.tce-ui .col[class*="-4-"] {
  grid-column: span 4;
}
.tce-ui .col[class*="-5-"] {
  grid-column: span 5;
}
.tce-ui .col[class*="-6-"] {
  grid-column: span 6;
}
.tce-ui .col[class*="-7-"] {
  grid-column: span 7;
}
.tce-ui .col[class*="-8-"] {
  grid-column: span 8;
}
.tce-ui .col[class*="-9-"] {
  grid-column: span 9;
}
.tce-ui .col[class*="-10-"] {
  grid-column: span 10;
}
.tce-ui .col[class*="-11-"] {
  grid-column: span 11;
}
.tce-ui .col[class*="-12-"] {
  grid-column: span 12;
}
.tce-ui .col[class*="-13-"] {
  grid-column: span 13;
}
.tce-ui .col[class*="-14-"] {
  grid-column: span 14;
}
.tce-ui .col[class*="-15-"] {
  grid-column: span 15;
}
.tce-ui .col[class*="-16-"] {
  grid-column: span 16;
}
.tce-ui .col[class*="-17-"] {
  grid-column: span 17;
}
.tce-ui .col[class*="-18-"] {
  grid-column: span 18;
}
.tce-ui .col[class*="-19-"] {
  grid-column: span 19;
}
.tce-ui .col[class*="-20-"] {
  grid-column: span 20;
}
.tce-ui {
  /* ============================================
   SISTEMA COM GRID-AREA PARA POSICIONAMENTO AVANÇADO
   ============================================ */
  /* Grid template para layout com áreas nomeadas */
}
.tce-ui .row.grid-areas {
  grid-template-areas: var(--grid-template-areas, none);
}
.tce-ui {
  /* Classes para posicionar elementos em áreas específicas */
}
.tce-ui .area-header {
  grid-area: header;
}
.tce-ui .area-sidebar {
  grid-area: sidebar;
}
.tce-ui .area-main {
  grid-area: main;
}
.tce-ui .area-footer {
  grid-area: footer;
}
.tce-ui .area-nav {
  grid-area: nav;
}
.tce-ui .area-content {
  grid-area: content;
}
.tce-ui .area-aside {
  grid-area: aside;
}
.tce-ui {
  /* ============================================
   BREAKPOINTS RESPONSIVOS
   ============================================ */
  /* Telas Pequenas (Mobile - default) */
  /* Já definido acima - mobile first */
  /* Tablet (≥ 768px) */
}
@media (min-width: 768px) {
  .tce-ui .row {
    --grid-columns: var(--grid-columns-md, var(--grid-columns, 12));
  }
  .tce-ui .col.md1 {
    grid-column: span 1;
  }
  .tce-ui .col.md2 {
    grid-column: span 2;
  }
  .tce-ui .col.md3 {
    grid-column: span 3;
  }
  .tce-ui .col.md4 {
    grid-column: span 4;
  }
  .tce-ui .col.md6 {
    grid-column: span 6;
  }
  .tce-ui .col.md8 {
    grid-column: span 8;
  }
  .tce-ui .col.md12 {
    grid-column: span 12;
  }
  .tce-ui {
    /* Classes dinâmicas para tablet */
  }
  .tce-ui .col[class*=md1-] {
    grid-column: span 1;
  }
  .tce-ui .col[class*=md2-] {
    grid-column: span 2;
  }
  .tce-ui .col[class*=md3-] {
    grid-column: span 3;
  }
  .tce-ui .col[class*=md4-] {
    grid-column: span 4;
  }
  .tce-ui .col[class*=md5-] {
    grid-column: span 5;
  }
  .tce-ui .col[class*=md6-] {
    grid-column: span 6;
  }
  .tce-ui .col[class*=md7-] {
    grid-column: span 7;
  }
  .tce-ui .col[class*=md8-] {
    grid-column: span 8;
  }
  .tce-ui .col[class*=md9-] {
    grid-column: span 9;
  }
  .tce-ui .col[class*=md10-] {
    grid-column: span 10;
  }
  .tce-ui .col[class*=md11-] {
    grid-column: span 11;
  }
  .tce-ui .col[class*=md12-] {
    grid-column: span 12;
  }
}
.tce-ui {
  /* Desktop (≥ 1024px) */
}
@media (min-width: 1024px) {
  .tce-ui .row {
    --grid-columns: var(--grid-columns-lg, var(--grid-columns, 12));
  }
  .tce-ui .col.lg1 {
    grid-column: span 1;
  }
  .tce-ui .col.lg2 {
    grid-column: span 2;
  }
  .tce-ui .col.lg3 {
    grid-column: span 3;
  }
  .tce-ui .col.lg4 {
    grid-column: span 4;
  }
  .tce-ui .col.lg6 {
    grid-column: span 6;
  }
  .tce-ui .col.lg8 {
    grid-column: span 8;
  }
  .tce-ui .col.lg12 {
    grid-column: span 12;
  }
  .tce-ui {
    /* Classes dinâmicas para desktop */
  }
  .tce-ui .col[class*=lg1-] {
    grid-column: span 1;
  }
  .tce-ui .col[class*=lg2-] {
    grid-column: span 2;
  }
  .tce-ui .col[class*=lg3-] {
    grid-column: span 3;
  }
  .tce-ui .col[class*=lg4-] {
    grid-column: span 4;
  }
  .tce-ui .col[class*=lg5-] {
    grid-column: span 5;
  }
  .tce-ui .col[class*=lg6-] {
    grid-column: span 6;
  }
  .tce-ui .col[class*=lg7-] {
    grid-column: span 7;
  }
  .tce-ui .col[class*=lg8-] {
    grid-column: span 8;
  }
  .tce-ui .col[class*=lg9-] {
    grid-column: span 9;
  }
  .tce-ui .col[class*=lg10-] {
    grid-column: span 10;
  }
  .tce-ui .col[class*=lg11-] {
    grid-column: span 11;
  }
  .tce-ui .col[class*=lg12-] {
    grid-column: span 12;
  }
  .tce-ui .col[class*=lg13-] {
    grid-column: span 13;
  }
  .tce-ui .col[class*=lg14-] {
    grid-column: span 14;
  }
  .tce-ui .col[class*=lg15-] {
    grid-column: span 15;
  }
  .tce-ui .col[class*=lg16-] {
    grid-column: span 16;
  }
  .tce-ui .col[class*=lg17-] {
    grid-column: span 17;
  }
  .tce-ui .col[class*=lg18-] {
    grid-column: span 18;
  }
  .tce-ui .col[class*=lg19-] {
    grid-column: span 19;
  }
  .tce-ui .col[class*=lg20-] {
    grid-column: span 20;
  }
}
.tce-ui {
  /* ============================================
   CLASSES PARA DEFINIR O NÚMERO TOTAL DE COLUNAS
   ============================================ */
  /* Classes para definir o número total de colunas no grid */
}
.tce-ui .row.cols-5 {
  --grid-columns: 5;
}
.tce-ui .row.cols-8 {
  --grid-columns: 8;
}
.tce-ui .row.cols-10 {
  --grid-columns: 10;
}
.tce-ui .row.cols-12 {
  --grid-columns: 12;
}
.tce-ui .row.cols-16 {
  --grid-columns: 16;
}
.tce-ui .row.cols-20 {
  --grid-columns: 20;
}
.tce-ui .row.cols-24 {
  --grid-columns: 24;
}
.tce-ui {
  /* Classes responsivas para número de colunas */
}
@media (min-width: 768px) {
  .tce-ui .row.cols-md-5 {
    --grid-columns-md: 5;
  }
  .tce-ui .row.cols-md-8 {
    --grid-columns-md: 8;
  }
  .tce-ui .row.cols-md-10 {
    --grid-columns-md: 10;
  }
  .tce-ui .row.cols-md-12 {
    --grid-columns-md: 12;
  }
  .tce-ui .row.cols-md-16 {
    --grid-columns-md: 16;
  }
  .tce-ui .row.cols-md-20 {
    --grid-columns-md: 20;
  }
}
@media (min-width: 1024px) {
  .tce-ui .row.cols-lg-5 {
    --grid-columns-lg: 5;
  }
  .tce-ui .row.cols-lg-8 {
    --grid-columns-lg: 8;
  }
  .tce-ui .row.cols-lg-10 {
    --grid-columns-lg: 10;
  }
  .tce-ui .row.cols-lg-12 {
    --grid-columns-lg: 12;
  }
  .tce-ui .row.cols-lg-16 {
    --grid-columns-lg: 16;
  }
  .tce-ui .row.cols-lg-20 {
    --grid-columns-lg: 20;
  }
  .tce-ui .row.cols-lg-24 {
    --grid-columns-lg: 24;
  }
}
.tce-ui {
  /* ============================================
   CLASSES DE POSICIONAMENTO COM GRID-AREA
   ============================================ */
  /* Posicionamento manual com grid-column */
}
.tce-ui .col-start-1 {
  grid-column-start: 1;
}
.tce-ui .col-start-2 {
  grid-column-start: 2;
}
.tce-ui .col-start-3 {
  grid-column-start: 3;
}
.tce-ui .col-start-4 {
  grid-column-start: 4;
}
.tce-ui .col-start-5 {
  grid-column-start: 5;
}
.tce-ui .col-end-2 {
  grid-column-end: 2;
}
.tce-ui .col-end-3 {
  grid-column-end: 3;
}
.tce-ui .col-end-4 {
  grid-column-end: 4;
}
.tce-ui .col-end-5 {
  grid-column-end: 5;
}
.tce-ui .col-end-6 {
  grid-column-end: 6;
}
.tce-ui {
  /* Span completo: col-start-1 / col-end-[-1] */
}
.tce-ui .col-full {
  grid-column: 1/-1;
}
.tce-ui {
  /* Classes de Ordem (útil para reorganizar conteúdo) */
}
.tce-ui .order-first {
  order: -1;
}
.tce-ui .order-last {
  order: 999;
}
.tce-ui .order-1 {
  order: 1;
}
.tce-ui .order-2 {
  order: 2;
}
.tce-ui .order-3 {
  order: 3;
}
.tce-ui .order-4 {
  order: 4;
}
.tce-ui .order-5 {
  order: 5;
}
.tce-ui {
  /* Alinhamento Vertical */
}
.tce-ui .align-start {
  align-self: start;
}
.tce-ui .align-center {
  align-self: center;
}
.tce-ui .align-end {
  align-self: end;
}
.tce-ui .align-stretch {
  align-self: stretch;
}
.tce-ui {
  /* Alinhamento Horizontal no container */
}
.tce-ui .justify-start {
  justify-items: start;
}
.tce-ui .justify-center {
  justify-items: center;
}
.tce-ui .justify-end {
  justify-items: end;
}
.tce-ui .justify-stretch {
  justify-items: stretch;
}
.tce-ui {
  /* Alinhamento do conteúdo do grid */
}
.tce-ui .content-start {
  align-content: start;
}
.tce-ui .content-center {
  align-content: center;
}
.tce-ui .content-end {
  align-content: end;
}
.tce-ui .content-between {
  align-content: space-between;
}
.tce-ui .content-around {
  align-content: space-around;
}
.tce-ui {
  /* Classes Utilitárias Essenciais */
}
.tce-ui .text-left {
  text-align: left;
}
.tce-ui .text-center {
  text-align: center;
}
.tce-ui .text-right {
  text-align: right;
}
.tce-ui .hide {
  display: none;
}
.tce-ui .show {
  display: block;
}
.tce-ui {
  /* Visibilidade por Breakpoint */
}
@media (max-width: 767px) {
  .tce-ui .hide-on-mobile {
    display: none;
  }
  .tce-ui .show-on-mobile {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tce-ui .hide-on-tablet {
    display: none;
  }
  .tce-ui .show-on-tablet {
    display: block;
  }
}
@media (min-width: 1024px) {
  .tce-ui .hide-on-desktop {
    display: none;
  }
  .tce-ui .show-on-desktop {
    display: block;
  }
}

/* ============================================
   EXEMPLO DE USO NO HTML:
   ============================================

   <div class="container">
     <div class="row">
       <div class="col s12 md6 lg4">
         Conteúdo
       </div>
       <div class="col s12 md6 lg4">
         Conteúdo
       </div>
       <div class="col s12 md12 lg4">
         Conteúdo
       </div>
     </div>
   </div>

   Classes disponíveis:
   - s1 a s12 (mobile)
   - md1 a md12 (tablet)
   - lg1 a lg12 (desktop)

   Ou use apenas .col para coluna flexível

   ===========================================
   EXEMPLOS ESPECIFICOS DE GRID-AREA:
   ===========================================
   <main class="tce-ui">

    <h2>Exemplo: Grid Básico (12 colunas)</h2>
    <div class="row cols-24">
      <div class="col col-4-" style="background:#eef; padding:1rem">Coluna 4</div>
      <div class="col col-4-" style="background:#dde; padding:1rem">Coluna 4</div>
      <div class="col col-4-" style="background:#ccd; padding:1rem">Coluna 4</div>
    </div>

    <h2>Exemplo: Spans dinâmicos (usando classes com "-N-")</h2>
    <div class="row cols-12" style="margin-top:1rem">
      <div class="col col-3-" style="background:#f7e7e7; padding:1rem">Span 3</div>
      <div class="col col-6-" style="background:#f0f0f0; padding:1rem">Span 6</div>
      <div class="col col-3-" style="background:#f7f0e7; padding:1rem">Span 3</div>
    </div>

    <h2>Exemplo: Responsivo (classes md / lg)</h2>
    <p>Cada bloco ocupa 12 colunas no mobile, 6 no tablet e 4 no desktop.</p>
    <div class="row cols-12" style="margin-top:1rem">
      <div class="col md6 lg4" style="background:#e8f7ff; padding:1rem">md6 lg4</div>
      <div class="col md6 lg4" style="background:#e8fff2; padding:1rem">md6 lg4</div>
      <div class="col md6 lg4" style="background:#fff7e8; padding:1rem">md6 lg4</div>
    </div>

    <h2>Exemplo: Grid Areas (layout com header / sidebar / main / footer)</h2>
    <div class="row grid-areas" style="--grid-template-areas:'header header' 'sidebar main' 'footer footer'; grid-template-columns: 1fr 3fr; gap:1rem; margin-top:1rem;">
      <div class="area-header" style="background:#333;color:#fff;padding:1rem">Header</div>
      <div class="area-sidebar" style="background:#f4f4f4;padding:1rem">Sidebar</div>
      <div class="area-main" style="background:#fff;padding:1rem">Main content</div>
      <div class="area-footer" style="background:#222;color:#fff;padding:1rem">Footer</div>
    </div>

    <h2>Exemplo: Posicionamento manual (col-start / col-end)</h2>
    <div class="row cols-12" style="margin-top:1rem">
      <div class="col col-3- col-start-1" style="background:#f0e8ff;padding:1rem">Start 1 / span 3</div>
      <div class="col col-6- col-start-4" style="background:#e8f0ff;padding:1rem">Start 4 / span 6</div>
      <div class="col col-3- col-end-13" style="background:#fff0f0;padding:1rem">End 13 / span 3</div>
    </div>

    <h2>Exemplo: Ordem e Alinhamento</h2>
    <div class="row cols-12" style="gap:1rem;align-items:center;margin-top:1rem">
      <div class="col col-4- order-last" style="background:#ffeecc;padding:1rem">Order last</div>
      <div class="col col-4- order-first" style="background:#e6ffed;padding:1rem">Order first</div>
      <div class="col col-4-" style="background:#e6f0ff;padding:1rem">Normal</div>
    </div>
  </main>
   ===========================================
   FIM DOS EXEMPLOS
   ===========================================
*/
.tce-ui .btn {
  width: auto;
  height: 42px;
  padding: 8px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  text-transform: none;
  border-radius: 4px;
  opacity: 1;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tce-ui .card {
  background-color: var(--bg-card);
  padding: var(--spacing-lg);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.tce-ui .card__title {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}

.theme-light {
  --hover-color: var(--gray-50);
  --bg-color: var(--whitetce);
}

.theme-dark {
  --hover-color: var(--bluetce-800);
  --bg-color: var(--bluetce-dark);
  --text-default: var(--lightgraytce-light);
}

:root {
  --hover-color: #e6e6e6;
  --bg-color: var(--gray-50);
  /* Cores TCE Azul */
  --bluetce-light: var(--bluetce-400);
  --bluetce: var(--bluetce-500);
  --bluetce-dark: var(--bluetce-700);
  /* Cores TCE Cinza */
  --graytce-light: #8A8786;
  --graytce: #6D6968;
  --graytce-dark: #4D4A49;
  /* Cores TCE Cinza escuro */
  --gray-light: var(--gray-400);
  --gray: var(--gray-500);
  --gray-dark: var(--gray-700);
  /* Cores TCE Cinza claro*/
  --lightgraytce-light: #FFFFFF;
  --lightgraytce: #F3F3F5;
  --lightgraytce-dark: #ABABAC;
  /* Cores TCE Verde */
  --green-light: var(--green-400);
  --green: var(--green-500);
  --green-dark: var(--green-700);
  /* Cores TCE Amarelo */
  --yellow-light: var(--yellow-400);
  --yellow: var(--yellow-500);
  --yellow-dark: var(--yellow-700);
  /* Cores TCE Azul claro */
  --blue-light: var(--blue-400);
  --blue: var(--blue-500);
  --blue-dark: var(--blue-700);
  /* Cores TCE Laranja-Vermelho */
  --orange-light: var(--orange-400);
  --orange: var(--orange-500);
  --orange-dark: var(--orange-700);
  /* TEXT */
  --text-default: var(--gray-500);
  --text-default-secondary: var(--gray-200);
  --text-default-disabled: var(--gray-50);
  --text-default-hover: var(--gray-50);
  --text-default-selected: var(--gray-50);
  --text-default-focus: var(--gray-100);
  /* PRIMARY */
  --text-primary: var(--bluetce-500);
  --text-primary-dark: var(--bluetce-700);
  --text-primary-light: var(--bluetce-100);
  --text-primary-hover: var(--bluetce-700);
  --text-primary-selected: var(--bluetce-700);
  --text-primary-focus: var(--bluetce-700);
  /* SECONDARY */
  --text-secondary: var(--graytce-500);
  --text-secondary-dark: var(--graytce-700);
  --text-secondary-light: var(--lightgraytce-light);
  --text-secondary-hover: var(--graytce-700);
  --text-secondary-selected: var(--graytce-700);
  --text-secondary-focus: var(--graytce-700);
  /* ERROR */
  --text-error: var(--orange-500);
  --text-error-dark: var(--orange-700);
  --text-error-light: var(--orange-100);
  --text-error-contrast: var(--lightgraytce-light);
  --text-error-hover: var(--orange-700);
  --text-error-selected: var(--orange-700);
  --text-error-focus: var(--orange-700);
  /* INFO */
  --text-info: var(--blue-500);
  --text-info-dark: var(--blue-700);
  --text-info-light: var(--blue-100);
  --text-info-contrast: var(--lightgraytce-light);
  --text-info-hover: var(--blue-700);
  --text-info-selected: var(--blue-700);
  --text-info-focus: var(--blue-700);
  /* WARNING */
  --text-warning: var(--yellow-500);
  --text-warning-dark: var(--yellow-700);
  --text-warning-light: var(--yellow-100);
  --text-warning-contrast: var(--lightgraytce-light);
  --text-warning-hover: var(--yellow-700);
  --text-warning-selected: var(--yellow-700);
  --text-warning-focus: var(--yellow-700);
  /* SUCCESS */
  --text-success: var(--green-500);
  --text-success-dark: var(--green-700);
  --text-success-light: var(--green-100);
  --text-success-contrast: var(--lightgraytce-light);
  --text-success-hover: var(--green-700);
  --text-success-selected: var(--green-700);
  --text-success-focus: var(--green-700);
}

/*# sourceMappingURL=tce-ui-styles.css.map */