[class*=btn] {
  align-self: flex-start
}

.crop,
.truncate,
dialog {
  overflow: hidden
}

.navbar .container,
.navbar .top-menu {
  gap: 1rem;
  display: flex
}

.acessibility-options-body .text-options [class*=btn-text]:disabled:active,
[class*=btn] .loading,
[class*=btn]:disabled:active {
  pointer-events: none
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

.navbar .logo svg,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

html *,
html * :before,
html :after {
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important
}

*,
:after,
:before {
  box-sizing: border-box
}

ol,
ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

img:not([src]) {
  visibility: hidden
}

:root {
  --white-100: hsl(0 0% 100%);
  --white-60: hsl(0 0% 100% / 0.6);
  --white-30: hsl(0 0% 100% / 0.3);
  --white-10: hsl(0 0% 100% / 0.1);
  --grey-darker: hsl(220 9% 6%);
  --grey-default: hsl(230 8% 18%);
  --grey-lighter: hsl(225 8% 29%);
  --alternate-100: hsl(41 100% 50%);
  --alternate-80: hsl(41 100% 50% / 0.8);
  --alternate-60: hsl(41 100% 50% / 0.6);
  --alternate-40: hsl(41 100% 50% / 0.4);
  --alternate-20: hsl(41 100% 50% / 0.2);
  --alternate-10: hsl(41 100% 50% / 0.1);
  --primary-100: hsl(263 92% 59%);
  --primary-80: hsl(263 92% 59% / 0.8);
  --primary-60: hsl(263 92% 59% / 0.6);
  --primary-40: hsl(263 92% 59% / 0.4);
  --primary-20: hsl(263 92% 59% / 0.2);
  --primary-10: hsl(263 92% 59% / 0.1);
  --primary-darker: color-mix(in srgb, var(--primary-100) 100%, #000 15%);
  --primary-lighter: color-mix(in srgb, var(--primary-100) 100%, #fff 15%);
  --secondary-100: hsl(13 95% 68%);
  --secondary-80: hsl(13 95% 68% / 0.8);
  --secondary-60: hsl(13 95% 68% / 0.6);
  --secondary-40: hsl(13 95% 68% / 0.4);
  --secondary-20: hsl(13 95% 68% / 0.2);
  --secondary-10: hsl(13 95% 68% / 0.1);
  --background-contrast: hsl(0 0% 100% / 1);
  --complementary: hsl(212 61% 22% / 1);
  --secondary-anhanguera: hsl(40 61% 78% / 1);
  --main: hsl(15 95% 52% / 1);
  --font-body: var(--font-poppins);
  --font-heading: 'Radial', sans-serif;
  font-feature-settings: "salt" on, "clig" off, "liga" off
}

:root {
  color-scheme: light dark;

  --border: light-dark(hsl(209 38% 14% / 0.1), hsl(0 0% 100% / 0.1));
  --bg-highlight: light-dark(hsl(150 13% 94%), hsl(230 14% 15%));
  --bg-secondary: light-dark(hsl(210 13% 97%), hsl(230 14% 18%));

  --contrast-100: light-dark(hsl(0 0% 100%), hsl(230 12% 21%));
  --contrast-80: light-dark(hsl(0 0% 100% / 0.8), hsl(230 12% 21% / 0.8));
  --contrast-60: light-dark(hsl(0 0% 100% / 0.6), hsl(230 12% 21% / 0.6));
  --contrast-40: light-dark(hsl(0 0% 100% / 0.4), hsl(230 12% 21% / 0.4));
  --contrast-20: light-dark(hsl(0 0% 100% / 0.2), hsl(230 12% 21% / 0.2));
  --contrast-10: light-dark(initial, hsl(230 12% 21% / 0.1)); /* not defined in light */

  --semantic-danger-100: light-dark(hsl(353 100% 56%), hsl(353 100% 67%));
  --semantic-danger-80: light-dark(hsl(353 100% 56% / 0.8), hsl(353 100% 67% / 0.8));
  --semantic-danger-60: light-dark(hsl(353 100% 56% / 0.6), hsl(353 100% 67% / 0.6));
  --semantic-danger-40: light-dark(hsl(353 100% 56% / 0.4), hsl(353 100% 67% / 0.4));
  --semantic-danger-20: light-dark(hsl(353 100% 56% / 0.2), hsl(353 100% 67% / 0.2));
  --semantic-danger-10: light-dark(hsl(353 100% 56% / 0.1), hsl(353 100% 67% / 0.1));

  --semantic-info-100: light-dark(hsl(230 100% 57%), hsl(230 100% 66%));
  --semantic-info-80: light-dark(hsl(230 100% 57% / 0.8), hsl(231 100% 66% / 0.8));
  --semantic-info-60: light-dark(hsl(230 100% 57% / 0.6), hsl(231 100% 66% / 0.6));
  --semantic-info-40: light-dark(hsl(230 100% 57% / 0.4), hsl(231 100% 66% / 0.4));
  --semantic-info-20: light-dark(hsl(230 100% 57% / 0.2), hsl(231 100% 66% / 0.2));
  --semantic-info-10: light-dark(hsl(230 100% 57% / 0.1), hsl(231 100% 66% / 0.1));

  --semantic-success-100: light-dark(hsl(168 99% 38%), hsl(168 100% 63%));
  --semantic-success-80: light-dark(hsl(168 99% 38% / 0.8), hsl(169 100% 63% / 0.8));
  --semantic-success-60: light-dark(hsl(168 99% 38% / 0.6), hsl(169 100% 63% / 0.6));
  --semantic-success-40: light-dark(hsl(168 99% 38% / 0.4), hsl(169 100% 63% / 0.4));
  --semantic-success-20: light-dark(hsl(168 99% 38% / 0.2), hsl(169 100% 63% / 0.2));
  --semantic-success-10: light-dark(hsl(168 99% 38% / 0.1), hsl(169 100% 63% / 0.1));

  --semantic-warning-100: light-dark(hsl(58 100% 39%), hsl(58 100% 63%));
  --semantic-warning-80: light-dark(hsl(58 100% 39% / 0.8), hsl(57 100% 63% / 0.8));
  --semantic-warning-60: light-dark(hsl(58 100% 39% / 0.6), hsl(57 100% 63% / 0.6));
  --semantic-warning-40: light-dark(hsl(58 100% 39% / 0.4), hsl(57 100% 63% / 0.4));
  --semantic-warning-20: light-dark(hsl(58 100% 39% / 0.2), hsl(57 100% 63% / 0.2));
  --semantic-warning-10: light-dark(hsl(58 100% 39% / 0.1), hsl(57 100% 63% / 0.1));

  --text-contrast: light-dark(hsl(208 39% 14%), hsl(0 0% 100%));
  --text-default: light-dark(hsl(208 30% 27%), hsl(206 23% 88%));
  --text-extra-light: light-dark(hsl(208 19% 49%), hsl(207 10% 55%));
  --text-light: light-dark(hsl(208 27% 32%), hsl(207 16% 74%));
  --text-ultra-light: light-dark(hsl(207 30% 75%), hsl(209 8% 50%));

  --background-contrast: light-dark(hsla(0, 0%, 100%, 1), hsla(0, 0%, 16%, 1));
}

.theme-light {
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

.theme-dark {
  color-scheme: dark;
}

.bg-border {
  background-color: var(--border) !important
}

.bg-bg-secondary {
  background-color: var(--bg-secondary) !important
}

.bg-secondary-anhanguera {
  background-color: var(--secondary-anhanguera) !important
}

.bg-complementary {
  background-color: var(--complementary) !important
}

.bg-contrast-100 {
  background-color: var(--contrast-100) !important
}

.color-semantic-danger-100 {
  color: var(--semantic-danger-100) !important
}

.color-text-contrast {
  color: var(--text-contrast) !important
}

.color-text-default {
  color: var(--text-default) !important
}

.color-text-extra-light {
  color: var(--text-extra-light) !important
}

.color-text-light {
  color: var(--text-light) !important
}

.color-white-100 {
  color: var(--white-100) !important
}

.color-primary-100 {
  color: var(--primary-100) !important
}

.bg-primary-100 {
  background-color: var(--primary-100) !important
}

.bg-primary-10 {
  background-color: var(--primary-10) !important
}

.color-primary-lighter {
  color: var(--primary-lighter) !important
}

.color-secondary-100 {
  color: var(--secondary-100) !important
}

.bg-secondary-100 {
  background-color: var(--secondary-100) !important
}

.bg-white-100 {
  background-color: var(--white-100) !important
}

.rotate-180 {
  transform: rotate(180deg)
}

html {
  font-size: clamp(14px, 2vw, 16px);
  scroll-behavior: smooth;
  font-family: var(--font-body)
}

body {
  line-height: 1.5
}

p {
  margin: .5rem 0 0
}

[class*=text-body][class*=-bold],
b,
strong {
  font-weight: 700
}

.h1,
h1 {
  font-weight: 900
}

.page-title,
.subtitle {
  color: var(--text-contrast)
}

.navbar .top-menu-item,
.uppercase {
  text-transform: uppercase
}

.h1,
h1 {
  font-size: clamp(3rem, 6.5vw, 4.375rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: 'liga' off, 'clig' off;
}

.h2,
.h3,
.h4,
.h5,
h2,
h3,
h4,
h5 {
  letter-spacing: -.02em;
  font-weight: 700;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: 'liga' off, 'clig' off;
}

.h2,
h2 {
  font-size: clamp(2rem, 4vw, 2.8125rem);
  line-height: 1.1
}

.h3,
.h4,
.h5,
.h6,
h3,
h4,
h5,
h6 {
  line-height: 1.2
}

.h3,
h3 {
  font-size: 2.1875rem
}

.h4,
h4 {
  font-size: 1.375rem
}

.h5,
.switch .lg,
[class*=text-body][class*=-lg],
h5 {
  font-size: 1.25rem
}

.h6,
h6 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em
}

[class*=text-body] {
  line-height: 1.5;
  font-family: var(--font-body)
}

[class*=text-body] {
  letter-spacing: -.015em
}

[class*=text-body][class*=-book] {
  font-weight: 400
}

[class*=text-body][class*=-medium] {
  font-weight: 500
}

[class*=text-body][class*=-black] {
  font-weight: 900
}

.switch .md,
[class*=btn][class*=-lg],
[class*=text-body][class*=-md] {
  font-size: 1rem
}

.acessibility-options-header i,
.switch .sm,
[class*=btn][class*=-md],
[class*=text-body][class*=-sm] {
  font-size: .875rem
}

[class*=btn][class*=-sm],
[class*=text-body][class*=-xs] {
  font-size: .8125rem
}

.text-caption {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6
}

.subtitle {
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto
}

.nowrap {
  white-space: nowrap
}

.fw-400 {
  font-weight: 400 !important
}

.fw-500 {
  font-weight: 500 !important
}

.fw-600 {
  font-weight: 600 !important
}

.acessibility-options-body .modes input:checked+label i::before,
.fw-700 {
  font-weight: 700 !important
}

.page-title {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  padding: 1rem 0
}

.section-title,
form {
  flex-direction: column;
  display: flex;
  gap: .5rem
}

.page-title button {
  opacity: 1
}

.page-title .title-icon {
  min-width: 2.5rem;
  font-size: 2.5rem;
  color: var(--primary-100);
  line-height: .9
}

.section-title {
  color: var(--text-default);
  line-height: 1
}

.section-title::after {
  content: "";
  display: block;
  height: .5rem;
  background-color: var(--primary-100);
  width: 2.5rem;
  position: relative
}

[class*=btn].outlined,
[class*=btn].text,
dialog .dialog-close {
  background-color: rgba(0, 0, 0, 0)
}

.section-title.center {
  text-align: center;
  max-width: 42.5rem;
  margin: 0 auto;
  text-wrap: balance
}

.section-title.center::after {
  display: none
}

.text-center {
  text-align: center !important
}

.text-right {
  text-align: right !important
}

.text-left {
  text-align: left !important
}

[class*=btn] {
  --color: var(--primary-100);
  --shadow: var(--primary-darker);
  --text-color: var(--white-100);
  user-select: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  border-radius: 5em;
  leading-trim: both;
  text-edge: cap;
  border: 0;
  padding: 0 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  font-size: 1rem;
  height: 3em;
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--text-color);
  background-color: var(--color);
  transition: .3s;
  cursor: pointer;
  position: relative
}

.col,
.col-xs-12 {
  box-sizing: border-box;
  padding: 1rem
}

[class*=btn]:disabled {
  filter: grayscale(1);
  opacity: .5;
  cursor: not-allowed
}

[class*=btn].default {
  --color: var(--bg-highlight);
  --text-color: var(--text-light)
}

[class*=btn].alternate,
[class*=btn].success,
[class*=btn].warning,
[class*=btn].white {
  --text-color: var(--grey-darker)
}

[class*=btn].primary {
  --color: var(--primary-100)
}

[class*=btn].secondary {
  --color: var(--secondary-100)
}

[class*=btn].alternate {
  --color: var(--alternate-100)
}

[class*=btn].danger {
  --color: var(--semantic-danger-100)
}

[class*=btn].success {
  --color: var(--semantic-success-100)
}

[class*=btn].warning {
  --color: var(--semantic-warning-100)
}

[class*=btn].white {
  --color: var(--white-100)
}

[class*=btn] i:is(.fal, .fa, .fas, .fat) {
  font-size: 1.125em;
  vertical-align: baseline
}

[class*=btn] .loading {
  text-indent: -9999ch
}

[class*=btn] .loading::before {
  content: "";
  position: absolute;
  text-indent: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: 1s linear infinite loading
}

[class*=btn].outlined {
  color: var(--text-light);
  position: relative;
  box-shadow: none
}

[class*=btn].outlined:before {
  content: "";
  display: block;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: inherit;
  position: absolute;
  opacity: .25
}

[class*=btn].text {
  border: none;
  box-shadow: unset;
  padding: 0;
  color: var(--color)
}

[class*=btn].expand::after {
  content: "";
  font-family: "Font Awesome 6 Pro";
  font-size: 1.125em;
  font-weight: 300;
  transition: .3s;
  transform-origin: center;
  display: block;
  width: .875rem;
  line-height: .875;
  text-align: center
}

[class*=btn].block {
  width: 100%
}

[class*=btn][class*=-xs] {
  font-size: .7rem
}

[class*=btn][class*=-xl] {
  font-size: 1.125rem
}

[class*=btn][class*=-icon] {
  border-radius: .25rem;
  padding: 0;
  flex-shrink: 0;
  width: 2.8575em;
  height: 2.8575em;
  aspect-ratio: 1/1
}

[class*=btn][class*=-icon].round {
  border-radius: 50%
}

input[type=checkbox]:checked+.expand::after {
  rotate: 180deg
}

form:invalid button[type=submit] {
  filter: grayscale(1);
  opacity: .5;
  cursor: not-allowed;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 1px var(--text-default);
  color: var(--text-ultra-light)
}

form:invalid button[type=submit]:active {
  pointer-events: none
}

[class*=input-control] {
  --height: 3.6925em;
  --bg: var(--contrast-100);
  --text-color: var(--text-default);
  --highlight-outline: var(--primary-20);
  --highlight-border: var(--primary-100);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  position: relative;
  isolation: isolate;
  user-select: none;
  width: 100%;
  font-size: .8125rem
}

[class*=input-control] label {
  user-select: none;
  pointer-events: none;
  font-size: 1em;
  position: absolute;
  top: 1.15em;
  left: .65rem;
  color: var(--text-color);
  opacity: .8;
  line-height: 1.4;
  padding: 0 .35rem;
  border-radius: .25rem .25rem .25rem 0;
  transform-origin: left center;
  z-index: 3;
  font-weight: 400;
  transition: .3s
}

[class*=input-control] label:before {
  content: attr(data-text)
}

[class*=input-control] label:after {
  content: "";
  position: absolute;
  right: 1rem;
  display: inline-block;
  width: 1.5em;
  height: 1.5em
}

[class*=input-control].persistent :where(input:not([type=checkbox]):not([type=radio]):not([type=file])) {
  + label {
    transition: all .5s !important;
  }

  &:focus-visible { 
      + label {
        top: -1.5em;
        opacity: 1;
        color: white;
    } 
  }

  &:valid:not(select), &:invalid:not(select) {
    + label {
      left: .65rem !important;
      right: unset !important;
    }
  }
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select) {
  font-family: var(--font-body);
  appearance: none;
  height: var(--height);
  font-size: inherit;
  padding: 0 3em 0 1em;
  font-weight: 400;
  border: 1px solid var(--border);
  background-color: var(--bg);
  border-radius: .5rem;
  transition: .3s;
  outline: 0;
  box-shadow: inset 0 0 0 30px var(--bg);
  color: var(--text-color);
  z-index: 2;
  width: 100%;
  caret-color: var(--primary-lighter)
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):-webkit-autofill,
[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):-webkit-autofill:focus-visible,
[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):-webkit-autofill:hover {
  box-shadow: inset 0 0 0 30px var(--bg);
  -webkit-text-fill-color: var(--text-color) !important
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):hover:not(:focus-visible):not(:valid) {
  box-shadow: inset 0 0 1px 300px var(--bg)
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select)::placeholder {
  color: transparent
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):not(:placeholder-shown)+label {
  color: transparent
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):focus-visible {
  color: var(--text-color);
  box-shadow: 0 0 0 4px var(--highlight-outline);
  border: 1px solid var(--highlight-border)
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):focus-visible+label {
  opacity: 0
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):not([value]):not(:focus)+label {
  transition: translate .3s, opacity .3s, border .3s
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):required:invalid:not(:-webkit-autofill):not(:placeholder-shown):not(:focus-visible) {
  color: var(--semantic-danger-100);
  border: 1px solid var(--semantic-danger-100);
  animation: .4s cubic-bezier(.175, .885, .32, 1.275) forwards shake
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):required:invalid:not(:-webkit-autofill):not(:placeholder-shown):not(:focus-visible)~.hint:not(.persistent) {
  translate: 0;
  height: 1.2em;
  opacity: 1
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):required:invalid:not(:-webkit-autofill):not(:placeholder-shown):not(:focus-visible)+label {
  opacity: 1;
  color: transparent;
  right: 0;
  left: unset
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):required:invalid:not(:-webkit-autofill):not(:placeholder-shown):not(:focus-visible)+label:after {
  mask: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 16.725q.35 0 .575-.225.225-.225.225-.575t-.225-.575q-.225-.225-.575-.225t-.575.225q-.225.225-.225.575t.225.575q.225.225.575.225Zm-.75-3.65h1.5v-6h-1.5ZM12 21.5q-1.975 0-3.712-.75Q6.55 20 5.275 18.725T3.25 15.712Q2.5 13.975 2.5 12t.75-3.713Q4 6.55 5.275 5.275T8.288 3.25Q10.025 2.5 12 2.5t3.713.75q1.737.75 3.012 2.025t2.025 3.012q.75 1.738.75 3.713t-.75 3.712q-.75 1.738-2.025 3.013t-3.012 2.025q-1.738.75-3.713.75Zm0-1.5q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z" fill="black"/></svg>') no-repeat center/contain;
  -webkit-mask: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 16.725q.35 0 .575-.225.225-.225.225-.575t-.225-.575q-.225-.225-.575-.225t-.575.225q-.225.225-.225.575t.225.575q.225.225.575.225Zm-.75-3.65h1.5v-6h-1.5ZM12 21.5q-1.975 0-3.712-.75Q6.55 20 5.275 18.725T3.25 15.712Q2.5 13.975 2.5 12t.75-3.713Q4 6.55 5.275 5.275T8.288 3.25Q10.025 2.5 12 2.5t3.713.75q1.737.75 3.012 2.025t2.025 3.012q.75 1.738.75 3.713t-.75 3.712q-.75 1.738-2.025 3.013t-3.012 2.025q-1.738.75-3.713.75Zm0-1.5q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z" fill="black"/></svg>') no-repeat center/contain;
  background-color: var(--semantic-danger-100);
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):required:invalid:not(:-webkit-autofill):not(:placeholder-shown):not(:focus-visible):is(select) {
  color: var(--text-color);
  border: 1px solid var(--border)
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):required:invalid:not(:-webkit-autofill):not(:placeholder-shown):not(:focus-visible):is(select)+label {
  opacity: 0
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):required:invalid:not(:-webkit-autofill):not(:placeholder-shown):-webkit-autofill:focus+label {
  opacity: 0
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):disabled {
  opacity: .8
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):-webkit-autofill {
  font-size: 1em;
  transition: .3s
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):valid:not(select)+label {
  right: 0;
  left: unset;
  opacity: 1;
  transition: border .3s
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):valid:not(select)+label:after {
  mask: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z" fill="black"/></svg>') no-repeat center/contain;
  -webkit-mask: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z" fill="black"/></svg>') no-repeat center/contain;
  background-color: var(--semantic-success-100)
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):valid:not(select):focus-visible {
  color: var(--text-color);
  border: 1px solid var(--semantic-success-100);
  box-shadow: inset 0 0 0 30px var(--bg), 0 0 0 4px var(--semantic-success-20)
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):valid:not(select):focus-visible:-webkit-autofill {
  -webkit-text-fill-color: var(--text-color) !important
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):not(:required)+label {
  left: .65em !important
}

[class*=input-control] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select):not(:required)+label::after {
  display: none
}

[class*=input-control] textarea {
  resize: none;
  padding: 1em 3em 1em 1em;
  height: unset
}

[class*=input-control] select {
  margin-bottom: .25rem;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L7 7L13 1" stroke="gray" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
  background-position: right 1rem center;
  padding-right: 2.5em;
  background-repeat: no-repeat;
  background-size: 12px;
  box-shadow: unset !important;
  cursor: pointer
}

[class*=input-control] select:valid {
  color: var(--text-color)
}

[class*=input-control] input[type=date] {
  position: relative;
  appearance: none
}

[class*=input-control] input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto
}

[class*=input-control] input[type=file] {
  cursor: pointer;
  font-family: var(--font-body);
  appearance: none;
  height: var(--height);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0 3em 0 1em;
  font-weight: 300;
  border: 1px solid var(--border);
  background-color: var(--bg);
  border-radius: .5rem;
  transition: border .3s;
  outline: 0;
  color: var(--text-color)
}

[class*=input-control] input[type=file]::-webkit-file-upload-button {
  border: 0;
  background: rgba(0, 0, 0, 0);
  height: 100%;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--text-color)
}

[class*=input-control] input[type=file]:hover::-webkit-file-upload-button {
  color: var(--primary-100)
}

[class*=input-control] input[type=file]:required:not(:focus) {
  border-color: var(--border);
  color: var(--text-color)
}

[class*=input-control] input[type=file]+label {
  left: unset;
  right: 1em
}

[class*=input-control] .checkbox {
  padding: .25em 0
}

[class*=input-control] .checkbox :is(input[type=checkbox], input[type=radio]) {
  display: none
}

[class*=input-control] .checkbox :is(input[type=checkbox], input[type=radio])+label {
  position: unset;
  display: flex;
  gap: 1em;
  align-items: flex-start;
  opacity: 1;
  cursor: pointer;
  pointer-events: all;
  padding: 0;
  font-weight: 400
}

[class*=input-control] .checkbox :is(input[type=checkbox], input[type=radio])+label::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  font-size: 1.53845em;
  color: var(--text-ultra-light)
}

[class*=input-control] .checkbox.white :is(input[type=checkbox], input[type=radio]):checked+label::before {
  color: var(--white-100)
}

[class*=input-control] .checkbox input[type=checkbox]+label::before {
  content: ""
}

[class*=input-control] .checkbox input[type=checkbox]:checked+label::before {
  content: "";
  font-weight: 900;
  color: var(--primary-100)
}

[class*=input-control] .checkbox input[type=radio]+label::before {
  content: ""
}

[class*=input-control] .checkbox input[type=radio]:checked+label::before {
  content: "";
  font-weight: 900;
  color: var(--primary-100)
}

[class*=input-control] .hint {
  white-space: nowrap;
  line-height: 1.2;
  font-size: .875em;
  color: var(--semantic-danger-100);
  transition: .6s .6s;
  z-index: 1;
  translate: 0 -1.5em;
  height: 0;
  opacity: 0;
  text-align: right
}

[class*=input-control] .hint.persistent {
  translate: 0;
  opacity: 1;
  height: auto;
  color: var(--text-default)
}

[class*=input-control] .optional {
  white-space: nowrap;
  line-height: 1.2;
  font-size: .75rem;
  color: var(--text-color);
  font-weight: 300;
  text-align: right
}

[class*=input-control][class*=-sm] {
  font-size: .6433rem
}

[class*=input-control][class*=-md] {
  font-size: .7448rem
}

[class*=input-control][class*=-lg] {
  font-size: .8802rem
}

dialog {
  --width: 640px;
  --height: 560px;
  color: var(--text-default);
  flex-direction: column;
  width: 100%;
  inset: auto 0 0 0;
  margin: 0;
  max-width: unset;
  border-radius: 1.5rem 1.5rem 0 0;
  background-color: var(--contrast-100);
  padding: 0;
  border: 0;
  box-shadow: var(--elevation-5);
  z-index: 999;
  position: fixed
}

dialog.sm {
  --width: 375px;
  --height: 350px
}

dialog.md {
  --width: 640px;
  --height: 560px
}

dialog.lg {
  --width: 720px;
  --height: 600px
}

dialog.full {
  --width: 100%;
  --height: 100%;
  width: 100%;
  border-radius: 0
}

@keyframes show {

  0%,
  50% {
    translate: 0 100%
  }

  100% {
    translate: 0 0
  }
}

@keyframes hide {
  to {
    translate: 0 100%
  }
}

@keyframes blurIn {
  0% {
    backdrop-filter: blur(0);
    background-color: rgba(0, 0, 0, 0)
  }

  to {
    backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, .7)
  }
}

@keyframes blurOut {

  0%,
  50% {
    backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, .7)
  }

  to {
    backdrop-filter: blur(0);
    background-color: rgba(0, 0, 0, 0)
  }
}

dialog form {
  flex: 1 0 0;
  align-self: stretch;
  flex-direction: column;
  gap: 0
}

dialog .dialog-close {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  font-size: 1.25rem;
  color: var(--text-light);
  cursor: pointer;
  z-index: 2
}

dialog[open] {
  display: flex;
  animation: 1s forwards show
}

dialog[open]::backdrop {
  animation: .8s forwards blurIn
}

dialog.hide {
  animation: .8s cubic-bezier(.215, .61, .355, 1) forwards hide
}

dialog.hide::backdrop {
  animation: .8s forwards blurOut
}

dialog .dialog-header {
  display: flex;
  padding: 1.5rem;
  flex-shrink: 0;
  position: relative
}

dialog .dialog-header:not(:empty)::before {
  content: "";
  display: block;
  position: absolute;
  bottom: .7em;
  height: .5rem;
  width: 2.5rem;
  background-color: var(--primary-100)
}

dialog .dialog-body {
  padding: 0
}

dialog .dialog-footer {
  padding: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  flex-shrink: 0
}

dialog.scrollable {
  overflow-y: hidden;
  height: calc(100dvh - 2rem)
}

dialog.scrollable .dialog-header {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background-color: var(--contrast-100)
}

dialog.scrollable .dialog-body {
  padding: 1.5rem;
  flex: 1 1 0;
  align-self: stretch;
  overflow-y: auto;
  overflow-x: hidden
}

dialog.scrollable .dialog-footer {
  border-top: 1px solid var(--border);
  background-color: var(--contrast-100)
}

.dialog-illustration {
  width: 100%;
  height: auto;
  max-width: 260px;
  max-height: 35dvh
}

body:has(dialog[open]) {
  overflow: hidden
}

.row {
  box-sizing: border-box;
  margin: -1rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap
}

.container,
footer .social {
  margin-left: auto;
  margin-right: auto
}

.row.reverse {
  flex-direction: row-reverse
}

.row.flex-column {
  flex-direction: column
}

.col {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%
}

.col.reverse {
  flex-direction: column-reverse
}

.first {
  order: -1
}

.last {
  order: 1
}

.align-center,
.navbar .logo {
  align-self: center
}

.container {
  width: 100%;
  max-width: 1170px;
  padding-right: 1rem;
  padding-left: 1rem
}

.container.xxs {
  max-width: 30rem
}

.container.xs {
  max-width: 640px
}

.container.sm {
  max-width: 1024px
}

.container.md {
  max-width: 1170px
}

.container.lg {
  max-width: 1920px
}

.container.fluid {
  max-width: unset
}

.container>.row {
  margin-left: -1rem;
  margin-right: -1rem
}

.container.flex-column {
  display: flex;
  flex-direction: column
}

.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%
}

.p-h {
  padding: .5rem !important
}

.p-2 {
  padding: 1.5rem !important
}

.py-1 {
  padding-top: 1rem !important
}

.px-1 {
  padding-right: 1rem !important
}

.py-1 {
  padding-bottom: 1rem !important
}

.px-1 {
  padding-left: 1rem !important
}

@media only screen and (min-width:641px) {
  .col-sm-6 {
    box-sizing: border-box;
    padding: 1rem
  }

  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%
  }
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
  display: block
}

.p-relative {
  position: relative !important
}

.section-divider.absolute {
  position: absolute
}

.isolate {
  isolation: isolate
}

.d-flex {
  display: flex !important
}

.flex-column {
  flex-direction: column !important
}

.flex-grow-1 {
  flex-grow: 1 !important
}

.flex-wrap {
  flex-wrap: wrap !important
}

.align-self-start {
  align-self: flex-start !important
}

.align-self-end {
  align-self: flex-end !important
}

.align-items-center {
  align-items: center !important
}

.align-items-start {
  align-items: flex-start !important
}

.align-items-end {
  align-items: flex-end !important
}

.justify-start {
  justify-content: flex-start !important
}

.justify-end {
  justify-content: flex-end !important
}

.justify-between {
  justify-content: space-between !important
}

.justify-center {
  justify-content: center !important
}

.capitalize {
  text-transform: capitalize
}

.gap-sm {
  gap: .5rem !important
}

.gap-md {
  gap: 1rem !important
}

.gap-xl {
  gap: 2rem !important
}

.fit-content {
  width: fit-content
}

.max-content {
  width: max-content
}

.min-content {
  width: min-content
}

.truncate {
  display: -webkit-box
}

#acessibility-toggle,
#topMenu,
.acessibility-tools input[type=radio],
.navbar .top-menu.exit,
.navbar .top-menu[data-menu=false],
.switch input,
.toggle-buttons input {
  display: none
}

.card-img,
.navbar {
  border-radius: 1rem
}

.card-img {
  box-shadow: var(--elevation-1);
  width: 100%;
  height: 100%;
  object-fit: cover
}

[class*=badge]:not([class*=fa-]) {
  --text-color: var(--primary-100);
  --bg-color: var(--primary-100);
  color: var(--text-color);
  display: inline-block;
  border-radius: .5em;
  background-color: var(--bg-color);
  padding: 0 .5rem;
  min-height: 1.5em;
  font-weight: 500;
  font-size: .75em
}

[class*=badge]:not([class*=fa-])[class*=-primary] {
  --text-color: var(--white-100);
  --bg-color: var(--primary-100)
}

[class*=badge]:not([class*=fa-])[class*=-secondary] {
  --text-color: var(--white-100);
  --bg-color: var(--secondary-100)
}

.section-divider {
  --color: var(--color-white);
  width: 100%;
  z-index: 2;
  display: block;
  height: 105px;
  mask-image: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="1440" height="105" viewBox="0 0 1440 105" fill="none"><path d="M0 105H1440V4.64916e-06C645.5 4.64916e-06 0 105 0 105Z" fill="black"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="1440" height="105" viewBox="0 0 1440 105" fill="none"><path d="M0 105H1440V4.64916e-06C645.5 4.64916e-06 0 105 0 105Z" fill="black"/></svg>');
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat
}

.section-divider.top {
  translate: 0 -1px;
  top: 0;
  scale: 1 -1;
  transform-origin: center
}

.section-divider.bottom {
  bottom: 0;
  translate: 0 1px;
  transform-origin: bottom center
}

.section-divider.lg {
  scale: 1 2
}

.section-divider.xl {
  scale: 1 3
}

.section-divider.flip-h {
  transform: scaleX(-1)
}

.mt-1,
.my-1 {
  margin-top: 1rem !important
}

.mr-1 {
  margin-right: 1rem !important
}

.mb-1,
.my-1 {
  margin-bottom: 1rem !important
}

.m-1 {
  margin: 1rem !important
}

.mt-2,
.my-2 {
  margin-top: 1.5rem !important
}

.mb-2,
.my-2 {
  margin-bottom: 1.5rem !important
}

.m-2 {
  margin: 1.5rem !important
}

.mt-3 {
  margin-top: 2rem !important
}

.mb-3 {
  margin-bottom: 2rem !important
}

.m-3 {
  margin: 2rem !important
}

.mt-4 {
  margin-top: 3.5rem !important
}

.mb-4 {
  margin-bottom: 3.5rem !important
}

.mt-6 {
  margin-top: 4.5rem !important
}

.m-8 {
  margin: 5.5rem !important
}

.mt-0 {
  margin-top: 0 !important
}

.m-0 {
  margin: 0 !important
}

.mt-xs {
  margin-top: .25rem !important
}

.mb-xs {
  margin-bottom: .25rem !important
}

.mt-sm {
  margin-top: .5rem !important
}

.m-h {
  margin: .5rem !important
}

.mx-auto {
  margin-right: auto !important
}

.ml-auto,
.mx-auto {
  margin-left: auto !important
}

.p-1 {
  padding: 1rem !important
}

.py-2 {
  padding-top: 1.5rem !important
}

.px-2 {
  padding-right: 1.5rem !important
}

.pb-2,
.py-2 {
  padding-bottom: 1.5rem !important
}

.px-2 {
  padding-left: 1.5rem !important
}

.pt-3,
.py-3 {
  padding-top: 2rem !important
}

.px-3 {
  padding-right: 2rem !important
}

.py-3 {
  padding-bottom: 2rem !important
}

.px-3 {
  padding-left: 2rem !important
}

.p-3 {
  padding: 2rem !important
}

.py-4 {
  padding-top: 3.5rem !important
}

.pb-4,
.py-4 {
  padding-bottom: 3.5rem !important
}

.p-4 {
  padding: 3.5rem !important
}

.pt-5 {
  padding-top: 4rem !important
}

.pb-5 {
  padding-bottom: 4rem !important
}

.py-8 {
  padding-top: 5.5rem !important
}

.pb-8,
.py-8 {
  padding-bottom: 5.5rem !important
}

.p-8 {
  padding: 5.5rem !important
}

.pt-10 {
  padding-top: 7rem !important
}

.pt-11 {
  padding-top: 8rem !important
}

.pt-12 {
  padding-top: 9rem !important
}

.py-0 {
  padding-top: 0 !important
}

.py-0 {
  padding-bottom: 0 !important
}

.p-0 {
  padding: 0 !important
}

.pt-xl {
  padding-top: 12rem !important
}

.navbar {
  display: flex;
  height: var(--header-height);
  background: var(--contrast-60);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: fixed;
  inset: .5rem .5rem auto .5rem;
  z-index: 10
}

.navbar .top-menu {
  flex-grow: 1;
  justify-content: flex-end;
  margin-right: 1rem
}

.acessibility-tools,
.navbar .top-menu-item {
  font-size: .6875rem;
  display: flex;
  align-items: center
}

.navbar .top-menu[data-menu=false]+.exit {
  display: flex
}

.navbar .top-menu-item {
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-default);
  text-decoration: none;
  transition: .3s
}

.navbar .top-menu-item:hover {
  color: var(--text-contrast);
  box-shadow: inset 0 -.5rem 0 var(--text-contrast)
}

#topMenu:checked~.top-menu {
  visibility: visible;
  opacity: unset;
  translate: 0
}

#topMenu:checked+label::before {
  content: ""
}

label.top-menu-toggle {
  width: 2rem;
  height: 2rem;
  align-self: center;
  cursor: pointer;
  display: none;
  place-content: center
}

@media(max-width:640px) {
  .navbar .top-menu {
    position: absolute;
    left: .5rem;
    top: calc(100% - .5rem);
    background-color: var(--contrast-100);
    border: 1px solid var(--white-10);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: .5rem;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    translate: 0 1rem;
    transition: .3s;
    box-shadow: 0 .5rem .5rem rgba(0, 0, 0, .2);
    min-width: 160px
  }

  .navbar .top-menu-item {
    padding: 1rem;
    color: var(--text-default);
    font-size: .7rem
  }

  .navbar .top-menu-item:not(:last-child) {
    border-bottom: 1px solid var(--border)
  }

  label.top-menu-toggle {
    display: grid
  }
}

label.top-menu-toggle::before {
  content: "";
  font-family: "Font Awesome 6 Pro";
  font-size: 1.5rem;
  font-weight: 300
}

.btn-acessibility,
footer,
section {
  position: relative
}

.acessibility-tools {
  position: relative;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  letter-spacing: -.01em
}

#acessibility-toggle:checked+.btn-acessibility {
  background-color: var(--primary-100);
  box-shadow: 0 0 0 3px var(--white-30)
}

#acessibility-toggle:checked+.btn-acessibility::before {
  mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.25195 9.25195C9.08789 9.41602 8.78711 9.41602 8.62305 9.25195L5.01367 5.61523L1.37695 9.25195C1.21289 9.41602 .912109 9.41602 .748047 9.25195C0.583984 9.08789 .583984 8.78711 .748047 8.62305L4.38477 4.98633L0.748047 1.37695C0.583984 1.21289 .583984 .912109 .748047 .748047C0.912109 .583984 1.21289 .583984 1.37695 .748047L5.01367 4.38477L8.62305 .748047C8.78711 .583984 9.08789 .583984 9.25195 .748047C9.41602 .912109 9.41602 1.21289 9.25195 1.37695L5.61523 4.98633L9.25195 8.62305C9.41602 8.78711 9.41602 9.08789 9.25195 9.25195Z" fill="black"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.25195 9.25195C9.08789 9.41602 8.78711 9.41602 8.62305 9.25195L5.01367 5.61523L1.37695 9.25195C1.21289 9.41602 .912109 9.41602 .748047 9.25195C0.583984 9.08789 .583984 8.78711 .748047 8.62305L4.38477 4.98633L0.748047 1.37695C0.583984 1.21289 .583984 .912109 .748047 .748047C0.912109 .583984 1.21289 .583984 1.37695 .748047L5.01367 4.38477L8.62305 .748047C8.78711 .583984 9.08789 .583984 9.25195 .748047C9.41602 .912109 9.41602 1.21289 9.25195 1.37695L5.61523 4.98633L9.25195 8.62305C9.41602 8.78711 9.41602 9.08789 9.25195 9.25195Z" fill="black"/></svg>');
  color: var(--white-100)
}

#acessibility-toggle:checked~.acessibility-options {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  filter: blur(0)
}

.btn-acessibility {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: inline-block;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: 0 0;
  align-self: center
}

.acessibility-options,
.switch input:checked+label,
.toggle-buttons input:checked+label {
  background-color: var(--primary-100)
}

.btn-acessibility::before {
  content: "";
  display: block;
  mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.02203 0C6.99127 0 7.78428 .75 7.78428 1.66667C7.78428 2.625 6.99127 3.33333 6.02203 3.33333C5.00873 3.33333 4.25977 2.625 4.25977 1.66667C4.25977 .75 5.00873 0 6.02203 0ZM11.2207 5.66667L8.62135 6.33333C8.44513 6.41667 8.2689 6.41667 8.13673 6.45833V9.04167L9.45843 12.7083C9.67871 13.2083 9.37031 13.7917 8.79758 13.9583C8.70947 14 8.5773 14 8.48919 14C8.04862 14 7.60806 13.75 7.47589 13.3333L6.33042 10.4167C6.19825 10.125 5.80175 10.125 5.66958 10.4167L4.52411 13.3333C4.39194 13.75 3.95138 14 3.55487 14C3.4227 14 3.29053 14 3.20242 13.9583C2.62969 13.7917 2.32129 13.2083 2.54157 12.7083L3.90732 9.04167V6.45833C3.7311 6.41667 3.55487 6.41667 3.37865 6.33333L0.77932 5.66667C0.206587 5.5 -.101808 4.95833 .0303613 4.41667C0.206587 3.875 .77932 3.58333 1.35205 3.70833L3.95138 4.41667C5.31713 4.79167 6.72693 4.79167 8.04862 4.41667L10.6479 3.70833C11.2207 3.58333 11.7934 3.875 11.9696 4.41667C12.1018 4.95833 11.7934 5.5 11.2207 5.66667Z" fill="black"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.02203 0C6.99127 0 7.78428 .75 7.78428 1.66667C7.78428 2.625 6.99127 3.33333 6.02203 3.33333C5.00873 3.33333 4.25977 2.625 4.25977 1.66667C4.25977 .75 5.00873 0 6.02203 0ZM11.2207 5.66667L8.62135 6.33333C8.44513 6.41667 8.2689 6.41667 8.13673 6.45833V9.04167L9.45843 12.7083C9.67871 13.2083 9.37031 13.7917 8.79758 13.9583C8.70947 14 8.5773 14 8.48919 14C8.04862 14 7.60806 13.75 7.47589 13.3333L6.33042 10.4167C6.19825 10.125 5.80175 10.125 5.66958 10.4167L4.52411 13.3333C4.39194 13.75 3.95138 14 3.55487 14C3.4227 14 3.29053 14 3.20242 13.9583C2.62969 13.7917 2.32129 13.2083 2.54157 12.7083L3.90732 9.04167V6.45833C3.7311 6.41667 3.55487 6.41667 3.37865 6.33333L0.77932 5.66667C0.206587 5.5 -.101808 4.95833 .0303613 4.41667C0.206587 3.875 .77932 3.58333 1.35205 3.70833L3.95138 4.41667C5.31713 4.79167 6.72693 4.79167 8.04862 4.41667L10.6479 3.70833C11.2207 3.58333 11.7934 3.875 11.9696 4.41667C12.1018 4.95833 11.7934 5.5 11.2207 5.66667Z" fill="black"/></svg>');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: currentColor;
  width: 100%;
  height: 100%;
  color: var(--text-default);
  transition: .3s
}

.acessibility-options {
  user-select: none;
  visibility: hidden;
  position: absolute;
  filter: blur(5px);
  right: 0;
  opacity: 0;
  translate: 0 1rem;
  transition: .3s .1s;
  top: calc(100% - .5rem);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem -.5rem rgba(0, 0, 0, .6);
  color: var(--white-100)
}

.block-card,
.side-menu {
  color: var(--text-default)
}

.acessibility-options-header {
  display: flex;
  gap: .5rem;
  padding: .5rem;
  align-items: center;
  border-bottom: 1px solid var(--white-30)
}

.acessibility-options-body .text-options {
  display: flex;
  align-items: center;
  padding: .5rem
}

.acessibility-options-body .text-options .text-size-value {
  text-align: center;
  flex-grow: 1
}

.acessibility-options-body .text-options .text-size-value:after {
  content: "%"
}

.acessibility-options-body .text-options [class*=btn-text] {
  width: 2rem;
  height: 2rem;
  border-radius: .4rem;
  padding: 0;
  border: 1px solid var(--white-100);
  transition: .3s;
  background-color: rgba(0, 0, 0, 0)
}

.acessibility-options-body .text-options [class*=btn-text]:disabled {
  opacity: .3;
  cursor: not-allowed
}

.acessibility-options-body .modes {
  padding: .5rem;
  display: flex;
  gap: .5rem;
  border-top: 1px solid var(--white-30)
}

.acessibility-options-body .modes label {
  height: 2rem;
  padding: 0 1rem;
  background-color: var(--white-30);
  color: var(--white-100);
  display: flex;
  align-items: center;
  border-radius: .4rem;
  gap: .5rem;
  cursor: pointer;
  transition: .3s
}

.block-card,
.card-switch,
.side-menu-view .content.card,
.skeleton-loader,
.switch label:before {
  background-color: var(--contrast-100)
}

.acessibility-options-body .modes input:checked+label {
  background-color: var(--white-100);
  color: var(--primary-100)
}

.acessibility-options-body .modes input:checked+label i {
  transition: .2s
}

.card-switch {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--elevation-1);

  &.with-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: 0;
  }

  & .card-switch-content {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    box-shadow: var(--elevation-1);
    width: 100%;
  }

  & .card-switch-details {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    box-shadow: var(--elevation-1);
    width: 100%;
    display: flex;
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    border-top: 1px solid var(--border);

    & .details__content {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      align-self: stretch;

      i {
        color: var(--contraste-promo-100);
        text-align: center;
        font-family: "Font Awesome 6 Pro";
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 900;
        line-height: normal;
      }

      > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        flex: 1 0 0;

        & .details__content__text {
          color: var(--text-default);
          font-size: 0.875rem;
          font-style: normal;
          font-weight: 700;
          line-height: 150%;
          letter-spacing: -0.00875rem;

          & strong {
            color: var(--contraste-promo-100);
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 700;
            line-height: 150%;
            letter-spacing: -0.00875rem;
          }
        }

        & .details__content__text--light {
          color: var(--text-light);
          font-size: 0.8125rem;
          font-style: normal;
          font-weight: 400;
          line-height: 160%; /* 1.3rem */
        }
      }
    }
  }
}

.card-switch label {
  flex-grow: 1
}

.card-switch-options {
  flex-grow: 1;
  flex-basis: calc(100% + 2rem);
  padding: 1rem;
  border-top: 1px solid var(--border);
  margin: .5rem -1rem -1rem
}

.switch label {
  width: 2.75em;
  height: 1.5em;
  display: flex;
  background-color: var(--text-ultra-light);
  border-radius: 2em;
  padding: 2px;
  transition: .3s;
  cursor: pointer
}

.switch label:before {
  content: "";
  display: block;
  height: 100%;
  border-radius: 50%;
  aspect-ratio: 1/1;
  transition: .3s cubic-bezier(.075, .82, .165, 1)
}

.switch input:checked+label:before {
  translate: 100% 0;
  background-color: var(--bg-secondary)
}

.switch .xs {
  font-size: .815rem
}

.toggle-buttons {
  display: flex;
  align-items: center;
  gap: 1rem
}

.toggle-buttons [class*=btn] {
  border-radius: .5rem;
  background-color: rgba(0, 0, 0, 0);
  color: var(--text-light)
}

.block-card,
.toggle-buttons input:not(:checked)+label {
  border: 1px solid var(--border)
}

@media(hover:hover) {
  .page-title button {
    opacity: .5
  }

  .page-title button:hover {
    opacity: 1
  }

  [class*=btn]:hover {
    box-shadow: 0 0 1em .5em color-mix(in srgb, var(--color) 50%, transparent 100%)
  }

  [class*=btn].outlined:hover {
    transition: .3s;
    background-color: color-mix(in srgb, currentColor 10%, transparent 80%)
  }

  [class*=input-control] select:hover {
    border-color: var(--highlight-border);
    box-shadow: unset !important
  }

  dialog {
    inset: 0;
    margin: auto;
    border-radius: 1rem;
    width: calc(100% - 2rem);
    max-width: var(--width)
  }

  @keyframes show {

    0%,
    50% {
      opacity: 0;
      translate: 0 -20%
    }

    100% {
      opacity: 1;
      translate: 0 0
    }
  }

  @keyframes hide {
    to {
      opacity: 0;
      translate: 0 -20%
    }
  }

  @keyframes blurIn {
    0% {
      backdrop-filter: blur(0);
      background-color: rgba(0, 0, 0, 0)
    }

    to {
      backdrop-filter: blur(15px);
      background-color: rgba(0, 0, 0, .7)
    }
  }

  @keyframes blurOut {

    0%,
    50% {
      backdrop-filter: blur(15px);
      background-color: rgba(0, 0, 0, .7)
    }

    to {
      backdrop-filter: blur(0);
      background-color: rgba(0, 0, 0, 0)
    }
  }

  dialog .dialog-close:hover {
    color: var(--primary-lighter)
  }

  dialog.scrollable {
    max-height: var(--height)
  }

  .btn-acessibility:hover {
    box-shadow: 0 0 0 4px var(--white-30)
  }

  .acessibility-options-body .text-options [class*=btn-text]:hover {
    background-color: var(--white-100);
    color: var(--primary-100)
  }

  .acessibility-options-body .text-options [class*=btn-text]:disabled:hover {
    background-color: rgba(0, 0, 0, 0);
    color: var(--white-100);
    box-shadow: none
  }

  .acessibility-options-body .modes label:hover {
    box-shadow: 0 0 0 1px var(--white-60)
  }

  .toggle-buttons input:not(:checked)+label:hover {
    box-shadow: none
  }
}

.toggle-buttons input:checked+label {
  color: var(--white-100);
  border: 1px solid var(--primary-100)
}

.block-card {
  padding: 2rem;
  border-radius: 1rem;
  word-wrap: break-word
}

.elevation-1 {
  box-shadow: var(--elevation-1)
}

.elevation-2 {
  box-shadow: var(--elevation-2)
}

.side-menu-view {
  --side-width: 21.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-width);
  gap: 1rem
}

.side-menu-view.sm {
  --side-width: 17rem
}

.side-menu-view.md {
  --side-width: 21.25rem
}

.side-menu-view.lg {
  --side-width: 25rem
}

@media(max-width:850px) {
  .side-menu-view {
    grid-template-columns: 1fr
  }
}

.side-menu-view.left {
  grid-template-columns: var(--side-width) minmax(0, 1fr)
}

.side-menu-view .content {
  container: content/inline-size
}

.side-menu-view .content.card {
  border: 1px solid var(--border);
  padding: 2rem;
  border-radius: 1rem
}

.side-menu,
.skeleton-loader {
  padding: 2rem;
  border-radius: 1rem;
  display: flex
}

.side-menu {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  flex-direction: column;
  gap: 2rem;
  background: var(--contrast-100);
  box-shadow: var(--elevation-2);
  align-self: flex-start
}

.side-menu .subheader {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-contrast);
  margin-top: 2rem;
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap
}

.side-menu .subheader:after {
  content: "";
  display: block;
  border-bottom: 1px solid var(--border);
  flex-grow: 1
}

.skeleton-loader {
  --bg-items: linear-gradient(90deg, var(--contrast-100) 0%, var(--bg-highlight) 25%, var(--contrast-100) 50%, var(--bg-highlight) 75%, var(--contrast-100) 100%);
  gap: .5rem
}

.skeleton-loader :is(.circle, .line, .button, .square) {
  opacity: .5;
  background-size: 400%;
  background-image: var(--bg-items);
  animation: 4s linear infinite loading
}

.skeleton-loader .circle {
  width: 2rem;
  height: 2rem;
  border-radius: 50%
}

.skeleton-loader .circle.sm {
  width: 2rem;
  height: 2rem
}

.skeleton-loader .circle.md {
  width: 3rem;
  height: 3rem
}

.skeleton-loader .circle.lg {
  width: 4rem;
  height: 4rem
}

.skeleton-loader .line {
  width: 100%;
  border-radius: .25rem
}

.skeleton-loader .line.sm {
  height: 1rem
}

.skeleton-loader .line.md {
  height: 1.5rem
}

.skeleton-loader .button.sm,
.skeleton-loader .line.lg {
  height: 2rem
}

.skeleton-loader .button {
  border-radius: 3rem;
  width: 120px;
  height: 2.5rem
}

.skeleton-loader .button.md {
  height: 2.5rem
}

.skeleton-loader .button.lg {
  height: 2.875rem
}

.skeleton-loader .square {
  width: var(--width, 180px);
  height: var(--height, 80px);
  border-radius: .5rem
}

@keyframes loading {
  to {
    rotate: 2turn
  }

  0% {
    background-position: 0 0
  }

  50% {
    background-position: 100% 100%
  }

  100% {
    background-position: 200% 200%
  }
}

footer {
  background-color: var(--grey-default)
}

footer .social {
  padding: .5rem;
  display: flex;
  gap: .5rem;
  justify-content: flex-end
}

footer .social a {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-content: center;
  text-decoration: none;
  font-size: 1.25rem;
  color: var(--white-100);
  border-radius: 50%;
  transition: .3s
}

footer .social a:hover {
  background-color: var(--white-100);
  color: var(--grey-default)
}

footer .copyright {
  font-size: .75rem;
  color: var(--white-60)
}

:root {
  --elevation-0: none;
  --elevation-1: 0 .5rem .75rem -0.5rem rgb(0 0 0 / 0.2);
  --elevation-2: 0 1rem 1.5rem -.7rem rgb(0 0 0 / .15), 0 .25rem .5rem -.25rem rgb(0 0 0 / .1);
  --elevation-3: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.3);
  --elevation-4: 0 2rem 3.5rem -1.5rem rgb(0 0 0 / 0.5);
  --elevation-5: 0 2.5rem 4rem -2rem rgb(0 0 0 / 1), 0 .5rem 1rem -.5rem rgb(0 0 0 / .2);
  --elevation-6: 0 3rem 4.5rem -2.5rem rgb(0 0 0 / 1), 0 .5rem 1rem -.5rem rgb(0 0 0 / .2);
  --elevation-7: 0 3.5rem 5rem -3rem rgb(0 0 0 / 1), 0 .5rem 1rem -.5rem rgb(0 0 0 / .2);
  --elevation-8: 0 4rem 5.5rem -3.5rem rgb(0 0 0 / 1), 0 .5rem 1rem -.5rem rgb(0 0 0 / .2);
  margin: 0;
  --header-height: 5rem;
  background-color: var(--bg-secondary)
}

@keyframes float {
  to {
    translate: 0 8%
  }
}

@keyframes floatDollar {
  to {
    translate: 0 8%;
    opacity: .5;
    transform: scale(1.1)
  }
}

/* Estilos para campos auto-preenchidos - adicionado do ResumeForm */
.input-with-icon {
  position: relative;
}

.autofilled {
  background-color: var(--semantic-success-10) !important;
  border-color: var(--semantic-success-20) !important;
  box-shadow: inset 0 0 0 1px var(--semantic-success-20) !important;
  transition: all 0.2s ease-in-out;
}

.autofilled:hover {
  background-color: var(--semantic-success-20) !important;
  cursor: pointer;
}

.autofilled.editing {
  background-color: var(--semantic-info-10) !important; /* Azul muito claro para indicar o foco */
  border-color: var(--semantic-info-40) !important;
  box-shadow: 0 0 0 2px var(--semantic-info-20) !important;
  cursor: text;
  position: relative;
  animation: pulse-border 1.5s ease-in-out infinite;
  color: var(--neutral-90) !important; /* Texto mais escuro para melhor legibilidade */
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 0 2px var(--semantic-info-20) !important; }
  50% { box-shadow: 0 0 0 3px var(--semantic-info-30) !important; }
  100% { box-shadow: 0 0 0 2px var(--semantic-info-20) !important; }
}

.autofill-icon {
  opacity: 0.7;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--semantic-success-100);
  font-size: 16px;
  transition: all 0.2s ease;
  cursor: pointer; /* Indicar que o ícone é clicável */
  z-index: 2; /* Garantir que o ícone fique acima do input */
}

.autofilled:hover .autofill-icon,
.autofilled.editing .autofill-icon {
  opacity: 1;
  color: var(--semantic-info-100);
}

/* Estilos para garantir que os campos autopreenchidos não apareçam como inválidos */
input.autofilled:invalid {
  border-color: #ddd !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

/* Sobrescrevendo as regras CSS do design-system para o form-valid */
form.form-valid button[type=submit] {
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background-color: var(--contraste-promo-100) !important;
  box-shadow: none !important;
  color: #000000 !important;
}

form.form-valid button[type=submit]:active {
  pointer-events: auto !important;
}

.autofilled-focused {
  /* Estilo para campo autofilled quando em foco */
  border-color: #007bff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
  /* ou qualquer outro estilo que indique foco */
}

/* Sobrescrevendo validação CSS para campos autopreenchidos */
/* .custom-valid button[type=submit] {
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background-color: var(--primary-100) !important;
  box-shadow: none !important;
  color: var(--white-100) !important;
}

.custom-valid button[type=submit]:active {
  pointer-events: auto !important;
} */

/* Previne que campos autopreenchidos apareçam como inválidos */
input.autofilled:invalid {
  border-color: var(--semantic-success-20) !important;
  box-shadow: inset 0 0 0 1px var(--semantic-success-20) !important;
  animation: none !important;
}

/* Forçar que o formulário seja considerado válido quando nossa lógica diz que é */
/* form.custom-valid:invalid button[type=submit] {
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background-color: var(--contraste-promo-100) !important;
  box-shadow: none !important;
  color: #000000 !important;
} */

/* Melhor estilo para botão habilitado */
button[type=submit].enabled {
  background-color: var(--contraste-promo-100) !important;
  color: #000000 !important;
}