@charset "UTF-8";
:root {
  /* CORES */
  --roxo-logo: #7f3f98;
  --laranja-logo: #f79433;
  --branco-bg: #fff;
  --roxo-footer: #231c25;
  --creme: #fff8f1;
  /* FONTES */
  --font-nav: 'Urbanist', 'Inter', 'Segoe UI Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Asap', Helvetica, sans-serif;
  --titles-font: 'National Park', Arial, sans-serif;
  /* DIMENSÕES */
  --header-height: 100px;
  --main-padding: 15vw;
}

h1,
h2,
h3 {
  font-family: var(--titles-font);
}

h1 {
  font-weight: 500;
  font-size: 2.25rem;
}

body {
  font-family: var(--font-body);
  background: var(--branco-bg);
  margin: 0px;
  overflow-x: hidden;
}

a:link,
a:visited {
  color: inherit;
  text-decoration: none;
}

header {
  width: 100vw;
  padding: 0px var(--main-padding);
  padding-top: 100px;
  box-sizing: border-box;
  position: relative;
}
header div.triangles {
  position: absolute;
  height: 250px;
  width: 100vw;
  top: 0px;
  left: 0px;
  overflow: hidden;
  z-index: 0;
}
header div.triangles div[index] {
  position: absolute;
  background: var(--roxo-logo);
  clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
}
header div.triangles div[index="1"] {
  top: 0px;
  left: 0px;
  height: 13vw;
  width: 12vw;
  transform: rotate(180deg);
  left: -6vw;
}
header div.triangles div[index="2"] {
  height: 27vw;
  width: 25vw;
  transform: rotate(270deg) scaleY(0.75);
  right: -2.5vw;
  top: -13.6vw;
}
header nav.menu {
  width: 100%;
  text-align: right;
  padding-left: 40px;
  vertical-align: bottom;
}
header nav.menu ul {
  display: inline-flex;
  list-style-type: none;
  gap: 10px;
  line-height: 1rem;
  padding: 0px;
  margin: 0px;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  max-width: 600px;
}
header nav.menu li {
  position: relative;
  font-family: var(--font-nav);
  font-size: 1.33rem;
  font-weight: 400;
  padding: 10px;
  line-height: 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
header nav.menu li:hover {
  background: var(--roxo-logo);
  color: var(--branco-bg);
}
header nav.menu li:has(svg, i) {
  padding-right: 26px;
}
header nav.menu li svg {
  position: absolute;
  width: 24px;
  bottom: 6px;
}
header nav.menu nav.submenu {
  position: absolute;
  visibility: hidden;
  z-index: -1;
  margin-top: -15px;
  background: var(--roxo-logo);
  border-radius: 10px;
  left: 0px;
  right: 0px;
  text-align: left;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
header nav.menu nav.submenu.visible {
  visibility: visible;
  z-index: 1;
  opacity: 1;
  margin-top: 15px;
}
header nav.menu nav.submenu ul {
  line-height: 24px;
  flex-direction: column;
  gap: 0px;
}
header nav.menu nav.submenu li {
  line-height: 1.5rem;
}
header nav.menu nav.submenu li:hover {
  background: #9a52b7;
}
header .logo {
  height: var(--header-height);
}
header > div {
  display: inline-table;
  table-layout: fixed;
}
header > div > *:not(.triangles, .triangles *) {
  display: table-cell;
  max-height: var(--header-height);
}

main {
  padding: 0px var(--main-padding);
  height: calc(100vh - 204px - 30px);
  margin-top: 30px;
  background: var(--creme);
}
main .main-grid {
  display: grid;
  grid-template-columns: 3fr 5fr;
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
  grid-template-areas: "main-left main-right";
  height: 100%;
}
main .main-grid h1 {
  margin-bottom: 0px;
}
main .main-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 100px;
}
main .main-left p {
  font-size: 1.2rem;
  line-height: 1.5;
}
main .main-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas: "y1x1 y1x2" "y2x1 y2x2";
  grid-area: main-right;
  padding-left: 48px;
}
main .main-right .y1x1,
main .main-right .y1x2,
main .main-right .y2x1,
main .main-right .y2x2 {
  position: relative;
  padding: 30px;
}
main .main-right .y1x1::after,
main .main-right .y1x2::after,
main .main-right .y2x1::after,
main .main-right .y2x2::after {
  position: absolute;
  font-size: 8rem;
  font-family: "Oswald", "Arial Narrow", serif;
  font-weight: bold;
  color: white;
  opacity: 0.1;
}
main .main-right .y1x1::after {
  content: "1";
  bottom: 0px;
  right: 0px;
}
main .main-right .y1x1 {
  grid-area: y1x1;
  background: #ecb680;
}
main .main-right .y1x2::after {
  content: "2";
  bottom: 0px;
  left: 0px;
  color: #ECB680;
}
main .main-right .y1x2 {
  grid-area: y1x2;
  background: #ffeedd;
}
main .main-right .y2x1::after {
  content: "3";
  top: 0px;
  right: 0px;
  color: #CF9256;
}
main .main-right .y2x1 {
  grid-area: y2x1;
  background: #ffe1c4;
}
main .main-right .y2x2::after {
  content: "4";
  top: 0px;
  left: 0px;
}
main .main-right .y2x2 {
  grid-area: y2x2;
  background: #cf9256;
}
main .main-right .y1x1,
main .main-right .y2x1 {
  text-align: right;
}
main .main-right .y1x1,
main .main-right .y1x2 {
  align-content: end;
}

section#indicadores {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: center;
  align-items: center;
  gap: 48px;
  font-size: 1.4rem;
}
section#indicadores p span,
section#indicadores p strong {
  display: block;
  text-align: center;
}
section#indicadores p strong {
  font-size: 5rem;
  color: var(--roxo-logo);
}

footer {
  padding: 60px var(--main-padding);
  padding-bottom: 20px;
  background: var(--roxo-footer);
  color: var(--creme);
  font-size: 1.1rem;
}
footer ul {
  list-style-type: none;
  padding: 0px;
}
footer section.links-list {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 66.6%;
  text-transform: uppercase;
  font-family: var(--font-nav);
}
footer section.links-list li {
  margin: 8px 0px;
}
footer section.credits-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 3rem;
}
footer a:link:hover, footer a:visited:hover {
  color: #7F3F98;
}/*# sourceMappingURL=index.css.map */