:root {

    /*============== Typography ==============*/
    --base-font-size-mobile: 14px;
    --base-font-size-desktop: 16px;


    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --letter-spacing-default: 0;
    --letter-spacing-display: -0.02em;
    --letter-spacing-label: 0.01em;
    --letter-spacing-label-md: 0.063em;

    --line-height-display: 95%;
    --line-height-display-sm: 120%;
    --line-height-heading: 120%;
    --line-height-body: 150%;
    --line-height-caption: 120%;
    --line-height-label: 120%;

    --font-size-display-xl: 5rem;
    --font-size-display-lg: 4rem;
    --font-size-display-md: 3rem;
    --font-size-display-sm: 2.5rem;
    --font-size-display-xs: 2rem;
    --font-size-display-xxs: 1.5rem;

    --font-size-heading-xl: 3rem;
    --font-size-heading-lg: 2.5rem;
    --font-size-heading-md: 2rem;
    --font-size-heading-sm: 1.5rem;

    --font-size-body-lg: 1.25rem;
    --font-size-body-md: 1rem;
    --font-size-body-sm: 0.875rem;

    --font-size-caption-lg: 0.875rem;
    --font-size-caption-sm: 0.75rem;

    --font-size-label-md: 1rem;

    /* Red Variants */
    --color-red-500: #E43838;
    --color-red-600: #C32226;

    /* Gray Variants */
    --color-gray-50: #FAFBFD;
  
    --color-gray-100: #F2F4F8;

    --color-gray-200: #ECEFF5;

    --color-gray-300: #E2E8F3;

    --color-gray-400: #D0D9EC;
    --color-gray-500: #6A7DA6;
    --color-gray-600: #5D7489;
    --color-gray-700: #485A6A;
 
    --color-gray-800: #293854;

    --color-gray-900: #232A38;

    /* Blue Variants */
    --color-blue-100: #E9F2FB;
    --color-blue-200: #DBE5F0;
    --color-blue-300: #C1D8F0;
    --color-blue-400: #7EAFE7;
    --color-blue-500: #2F6AE1;
    --color-blue-600: #1764CF;
    --color-blue-700: #14529E;
    --color-blue-800: #0E365F;
    --color-blue-900: #07243B;

    --tabs-active-background: var(--color-blue-800);

    --font-main: 'Plus Jakarta Sans', sans-serif;
 
    --font-display: 'HeroKid Bold Expanded', sans-serif;

    --font-weight-bold-expanded: 700;
    --font-weight-extrabold-expanded: 800;

    /*---text display---*/
    --text-display-xl: var(--font-size-display-xl);
    --text-display-xl--font-weight: var(--font-weight-extrabold-expanded);
    --text-display-xl--line-height: var(--line-height-display);
    --text-display-xl--letter-spacing: var(--letter-spacing-display);

    --text-display-lg: var(--font-size-display-lg);
    --text-display-lg--font-weight: var(--font-weight-bold-expanded);
    --text-display-lg--line-height: var(--line-height-display);
    --text-display-lg--letter-spacing: var(--letter-spacing-display);

    --text-display-md: var(--font-size-display-md);
    --text-display-md--font-weight: var(--font-weight-bold-expanded);
    --text-display-md--line-height: var(--line-height-display);
    --text-display-md--letter-spacing: var(--letter-spacing-display);

    --text-display-sm: var(--font-size-display-sm);
    --text-display-sm--font-weight: var(--font-weight-bold-expanded);
    --text-display-sm--line-height: var(--line-height-display);
    --text-display-sm--letter-spacing: var(--letter-spacing-display);

    --text-display-xs: var(--font-size-display-xs);
    --text-display-xs--font-weight: var(--font-weight-bold-expanded);
    --text-display-xs--line-height: var(--line-height-display-sm);
    --text-display-xs--letter-spacing: var(--letter-spacing-display);

    --text-display-xxs: var(--font-size-display-xxs);
    --text-display-xxs--font-weight: var(--font-weight-extrabold-expanded);
    --text-display-xxs--line-height: var(--line-height-display-sm);
    --text-display-xxs--letter-spacing: var(--letter-spacing-display);

    /*---text heading---*/
    --text-heading-xl: var(--font-size-heading-xl);
    --text-heading-xl--font-weight: var(--font-weight-bold);
    --text-heading-xl--line-height: var(--line-height-heading);
    --text-heading-xl--letter-spacing: var(--letter-spacing-default);

    --text-heading-lg: var(--font-size-heading-lg);
    --text-heading-lg--font-weight: var(--font-weight-bold);
    --text-heading-lg--line-height: var(--line-height-heading);
    --text-heading-lg--letter-spacing: var(--letter-spacing-default);

    --text-heading-md: var(--font-size-heading-md);
    --text-heading-md--font-weight: var(--font-weight-bold);
    --text-heading-md--line-height: var(--line-height-heading);
    --text-heading-md--letter-spacing: var(--letter-spacing-default);

    --text-heading-sm: var(--font-size-heading-sm);
    --text-heading-sm--font-weight: var(--font-weight-bold);
    --text-heading-sm--line-height: var(--line-height-heading);
    --text-heading-sm--letter-spacing: var(--letter-spacing-default);

    /*---text body---*/
    --text-body-lg: var(--font-size-body-lg);
    --text-body-lg--font-weight: var(--font-weight-regular);
    --text-body-lg--line-height: var(--line-height-body);
    --text-body-lg--letter-spacing: var(--letter-spacing-default);

    --text-body-md: var(--font-size-body-md);
    --text-body-md--font-weight: var(--font-weight-regular);
    --text-body-md--line-height: var(--line-height-body);
    --text-body-md--letter-spacing: var(--letter-spacing-default);

    --text-body-sm: var(--font-size-body-sm);
    --text-body-sm--font-weight: var(--font-weight-regular);
    --text-body-sm--line-height: var(--line-height-body);
    --text-body-sm--letter-spacing: var(--letter-spacing-default);

    /*---text caption---*/
    --text-caption-lg: var(--font-size-caption-lg);
    --text-caption-lg--font-weight: var(--font-weight-bold);
    --text-caption-lg--line-height: var(--line-height-caption);
    --text-caption-lg--letter-spacing: var(--letter-spacing-default);

    --text-caption-sm: var(--font-size-caption-sm);
    --text-caption-sm--font-weight: var(--font-weight-bold);
    --text-caption-sm--line-height: var(--line-height-caption);
    --text-caption-sm--letter-spacing: var(--letter-spacing-default);

    /*---text label---*/
    --text-label-md: var(--font-size-label-md);
    --text-label-md--font-weight: var(--font-weight-bold);
    --text-label-md--line-height: var(--line-height-label);
    --text-label-md--letter-spacing: var(--letter-spacing-default);

 }

 html {
  font-size: clamp(var(--base-font-size-mobile), 2vw, var(--base-font-size-desktop));
 }

.text-display-xl {
  font-size: var(--font-size-display-xl);
  font-weight: var(--font-weight-extrabold-expanded);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.text-display-lg {
  font-size:  var(--font-size-display-lg);
  font-weight: var(--font-weight-bold-expanded);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.text-display-md {
  font-size: var(--font-size-display-md);
  font-weight: var(--font-weight-bold-expanded);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.text-display-sm {
 font-family: var(--font-display);
 font-size: var(--font-size-display-sm);
 font-weight: var(--font-weight-bold-expanded);
 line-height: var(--line-height-display);
 letter-spacing: var(--letter-spacing-display);
}

.text-display-xs {
 font-size: var(--font-size-display-xs);
 font-weight: var(--font-weight-bold-expanded);
 line-height: var(--line-height-display-sm);
 letter-spacing: var(--letter-spacing-display);
}

.text-display-xxs {
  font-family: var(--font-display);
  font-size: var(--font-size-display-xxs);
  font-weight: var(--font-weight-extrabold-expanded);
  line-height: var(--line-height-display-sm);
  letter-spacing: var(--letter-spacing-display);
}

.text-heading-xl {
 font-size: var(--font-size-heading-xl);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
}

.text-heading-lg {
 font-size: var(--font-size-heading-lg);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
}

.text-heading-md {
 font-size: var(--font-size-heading-md);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
}

.text-heading-sm {
 font-family: var(--font-main);
 font-size: var(--font-size-heading-sm);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-heading);
 letter-spacing: var(--letter-spacing-default);
}

.text-body-lg {
 font-family: var(--font-main);
 font-size: var(--font-size-body-lg);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-body);
 letter-spacing: var(--letter-spacing-default);
}

.text-body-md {
 font-family: var(--font-main);
 font-size: var(--font-size-body-md);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-body);
 letter-spacing: var(--letter-spacing-default);
}

.text-body-sm {
 font-family: var(--font-main);
 font-size: var(--font-size-body-sm);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-body);
 letter-spacing: var(--letter-spacing-default);
}

/*---text caption---*/
.text-caption-lg {
 font-size: var(--font-size-caption-lg);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-caption);
 letter-spacing: var(--letter-spacing-default);
}

.text-caption-sm {
 font-size: var(--font-size-caption-sm);
 font-weight: var(--font-weight-bold);
 line-height: var(--line-height-caption);
 letter-spacing: var(--letter-spacing-default);
}

 /*---text label---*/
.text-label-md {
 font-family: var(--font-main);
 font-size: var(--font-size-label-md);
 font-weight: var(--font-weight-regular);
 line-height: var(--line-height-label);
 letter-spacing: var(--letter-spacing-label-md);
}

.button-background { background-color:var(--color-blue-600); }
.button-on-background { color: var(--color-gray-100); }
.text-on-light { color: var(--color-gray-800); }
.surface-dark-darker { background-color: var(--color-blue-900); }
.surface-light-border { background-color: rgba(41, 56, 84, 0.25)); }

.text-on-dark-body-default { color: var(--color-gray-100); }

.text-on-dark-body-muted {
 color: var(--color-gray-100); 
 opacity: 0.9;
}

.bright-blue { color: var(--color-blue-600); }

.tabs-default-border {
 border: 1px solid rgba(41, 56, 84, 0.25))
}

button.tab.active {
 background: var(--tabs-active-background);
 color: var(--color-gray-100);
}

.hero-background {
  background: url(bg.jpg) center/cover no-repeat;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}   
     
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0, 0, 1), transform 0.8s cubic-bezier(0.2, 0, 0, 1);
}
    
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
    
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }
    
.editorial-hero-overlap {
  margin-bottom: -40px;
}




@font-face {
 font-family: 'HeroKid Bold Expanded';
 src: url('/site/midia/arquivos/herokid-bold-expanded.otf') format('opentype');
 font-weight: 700;
 font-style: normal;
}