:root {
  /*PRIMITIVOS*/
  --color-green-10: #e7ffeaff;
  --color-green-20: #beffc4ff;
  --color-green-30: #94ff9eff;
  --color-green-40: #6aff79ff;
  --color-green-50: #40ff53ff;
  --color-green-60: #16fd2dff;
  --color-green-70: #00d415ff;
  --color-green-80: #00ab11ff;
  --color-green-90: #00820dff;
  --color-green-100: #005a09ff;

  --color-neutro-0: #ffffffff;
  --color-neutro-10: #ebebebff;
  --color-neutro-20: #d6d6d6ff;
  --color-neutro-30: #c2c2c2ff;
  --color-neutro-40: #adadadff;
  --color-neutro-50: #999999ff;
  --color-neutro-60: #858585ff;
  --color-neutro-70: #707070ff;
  --color-neutro-80: #5c5c5cff;
  --color-neutro-90: #474747ff;
  --color-neutro-100: #333333ff;

  --color-red-80: #990000;

  /*TOKENS*/
  --brand-primary-lighter-xl: var(--color-green-50);
  --brand-primary-lighter-l: var(--color-green-60);
  --brand-primary-lighter: var(--color-green-70);
  --brand-primary-default: var(--color-green-80);
  --brand-primary-heavy: var(--color-green-90);
  --brand-primary-heavy-l: var(--color-green-100);

  --surface-primary: var(--color-neutro-10);
  --surface-secondary: var(--color-neutro-0);
  --surface-contrast-heavy: var(--color-neutro-50);
  --surface-invert: var(--color-neutro-100);

  --buttons-outline-default: var(--color-neutro-100);
  --buttons-outline-hover-outline: var(--color-neutro-80);
  --buttons-outline-hover-pressed: var(--color-neutro-100);
  --buttons-inactive-text: var(--color-neutro-80);
  --buttons-inactive-bg: var(--color-neutro-20);
  --buttons-fill-default: var(--brand-primary-default);
  --buttons-fill-hover: var(--brand-primary-heavy);
  --buttons-fill-pressed: var(--brand-primary-heavy-l);

  --text-default: var(--color-neutro-0);
  --text-hover: var(--brand-primary-lighter-xl);
  --text-pressed: var(--brand-primary-lighter);
  --text-inverted: var(--color-neutro-100);

  --icons-default: var(--color-neutro-0);
  --icons-invert: var(--color-neutro-100);

  --other-bg-section-2-homepage: #101828ff;

  /*TIPOGRAFIA*/
  --font-family-title: "Inter", sans-serif;
  --font-family-body: "Work Sans", sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --font-size-display: 61px;
  --font-size-h1: 49px;
  --font-size-h2: 39px;
  --font-size-h3: 31px;
  --font-size-h4: 25px;
  --font-size-h5: 20px;
  --font-size-body: 16px;
  --font-size-overline: 13px;
  --font-size-caption: 12px;

  --line-height-xs: 16px;
  --line-height-s: 20px;
  --line-height-sm: 24px;
  --line-height-md: 32px;
  --line-height-lg: 40px;
  --line-height-xl: 48px;
  --line-height-2xl: 56px;
  --line-height-3xl: 64px;
  --line-height-4xl: 72px;
}

html {
  background-color: var(--surface-primary);
  scroll-behavior: smooth;
}

/* RESET BÁSICO */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
small,
input,
select,
textarea {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  /* color: var(--text-default); */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* DISPLAY */
.display {
  font-family: var(--font-family-title);
  font-size: var(--font-size-display);
  line-height: var(--line-height-4xl);
  font-weight: var(--font-weight-semibold);
}

h1 {
  font-family: var(--font-family-title);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-2xl);
  font-weight: var(--font-weight-semibold);
}

h2 {
  font-family: var(--font-family-title);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-xl);
  font-weight: var(--font-weight-semibold);
}

h3 {
  font-family: var(--font-family-title);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-lg);
  font-weight: var(--font-weight-medium);
}

h4 {
  font-family: var(--font-family-title);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-medium);
}

h5 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-medium);
}

/* BODY TEXT */
p,
span,
select {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-s);
  font-weight: var(--font-weight-regular);
}

.h5-lg-lineheight {
  font-family: var(--font-family-body);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-regular);
}

.body-md-bold {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-medium);
}

/* OVERLINE */
.overline {
  font-family: var(--font-family-body);
  font-size: var(--font-size-overline);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* CAPTION */
.caption,
small {
  font-family: var(--font-family-body);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.5px;
}

/* SVGS*/

.icon-64-chevron-left {
  width: 64px;
  height: 64px;
  -webkit-mask-image: url('../assets/images/icon/64/chevron-left.svg');
  mask-image: url('../assets/images/icon/64/chevron-left.svg');
}

.icon-64-chevron-right {
  width: 64px;
  height: 64px;
  -webkit-mask-image: url('../assets/images/icon/64/chevron-right.svg');
  mask-image: url('../assets/images/icon/64/chevron-right.svg');
}

/*COLORS SVG*/

.white {
  background-color: var(--icons-default);
}


/*CODE TERMS*/

.s-desktop {
  display: block !important;
}

.s-tablet {
  display: none !important;
}

.s-footer-desk-mob {
  display: flex;
}

.s-mobile {
  display: none !important;
}

.h-desktop {
  display: none !important;
}

.hidden {
  visibility: hidden;
  transition: opacity 0.3s ease;
  /* Transição suave */
}

.icon-24 {
  width: 24px;
  height: 24px;
}

.rounded {
  border-radius: 99px !important;
}

.p-32 {
  padding: 16px 32px !important;
}

.bg-white {
  background-color: var(--surface-secondary);
}

/* BUTTON VARIATIONS */

.btn-primary {
  display: flex;
  width: fit-content;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: var(--buttons-fill-default);
  color: var(--text-default);
  text-decoration: none;
  border: none;
  transition: background 0.4s ease, transform 0.3s ease;
}

.btn-primary:hover {
  background: var(--buttons-fill-hover);
}

.btn-primary:active {
  background: var(--buttons-fill-pressed);
}

.btn-primary-invert {
  display: flex;
  width: fit-content;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: var(--surface-secondary);
  color: var(--buttons-fill-hover);
  text-decoration: none;
  border: none;
  transition: background 0.4s ease, transform 0.3s ease;
}

.btn-primary-invert:hover {
  color: var(--buttons-fill-pressed);
}

.btn-primary-invert:hover svg path {
  fill: var(--buttons-fill-pressed);
}

.btn-primary-invert:active {
  color: var(--text-default);
  background: var(--buttons-fill-pressed);
}

.btn-primary-invert:active svg path {
  fill: var(--text-default);
}

/* IS SLIDER BUTTON */

.slide {
  width: 240px !important;
}

/* BUTTON SIZE */
.lg {
  padding: 16px 24px;
  gap: 16px;
}

.md {
  gap: 8px;
  padding: 16px;
}

.sm {
  gap: 8px;
  padding: 8px 16px;
}

/* TEXT SIZE */

/* TAMANHO DO TEXTO ADAPTADO A TABLET */
@media (max-width: 1280px) {

  /* VERIFICAR O TAMANHO DO TEXTO DENTRO DOS BOTÕES
  TODOS OS BOTÕES TÊM A MESMA TAG DE HTML, MAS DEPENDENDO DO TAMANHO DO DISPOSITIVO TENS QUE AJUSTAR
  EX.: UM BOTÃO LG TEM UM <H4> COM 25PX DE TAMANHO DO TEXTO -- UM BOTÃO MD TEM UM <H4> COM 20PX DE TAMANHO DO TEXTO (ADAPTADO A TABLET)
  E VICE VERSA
  COMO VER OS TAMANHOS DO TEXTO NO FIGMA?
  -> EM FIGMA DEV CLICAR EM CIMA DO TEXT - NA ABA COM O CÓDIGO AO LADO DA VARIAVEL VAR(--font-size-title-h4) TENS UM VALOR CORRESPONDENTE.
  -> QUALQUER DUVIDA - 1º LER DOCUMENTAÇÃO NO FIGMA, CASO FIQUES NA MESMA PERGUNTAR-ME
  TODAS ESSAS ALTERAÇÕES DE TEXTO COLOCAR AQUI.
  
  EXEMPLO FEITO A BAIXO*/

  h1 {
    font-size: 40px;
    line-height: 48px;
  }

  h2 {
    font-size: 32px;
    line-height: 40px;
  }

  h3 {
    font-size: 26px;
    line-height: 32px;
  }

  h4 {
    font-size: 22px;
    line-height: 28px;
  }

  h5 {
    font-size: 18px;
    line-height: 24px;
  }

  p,
  span,
  select {
    font-size: 15px;
    line-height: 20px;
  }

  .body-md-bold {
    font-size: 15px;
    line-height: 24px;
  }

  .caption,
  small {
    font-size: 12px;
    line-height: 16px;
  }


  /* OUTRAS CLASSES */
  .slide {
    width: 220px !important;
  }

  .s-desktop {
    display: none !important;
  }

  .s-tablet {
    display: block !important;
  }

  .h-tablet {
    display: none !important;
  }

  .h-tab-mob {
    display: none !important;
  }

  .s-footer-desk-mob {
    display: none;
  }

}

/* TAMANHO DO TEXTO ADAPTADO A MOBILE */
@media (max-width: 768px) {


  h1 {
    font-size: 32px;
    line-height: 40px;
  }

  h2 {
    font-size: 28px;
    line-height: 32px;
  }

  h3 {
    font-size: 22px;
    line-height: 28px;
  }

  h4 {
    font-size: 20px;
    line-height: 24px;
  }

  h5 {
    font-size: 17px;
    line-height: 20px;
  }

  p,
  span,
  select {
    font-size: 14px;
    line-height: 20px;
  }

  .body-md-bold {
    font-size: 14px;
    line-height: 24px;
  }

  .caption,
  small {
    font-size: 11px;
    line-height: 16px;
  }

  /* OUTRAS CLASSES */
  .slide {
    width: 200px !important;
  }


  .s-tablet {
    display: none !important;
  }

  .s-mobile {
    display: block !important;
  }

  .h-tablet {
    display: block !important;
  }

  .h-mobile {
    display: none !important;
  }

  .s-footer-desk-mob {
    display: flex;
  }

}