@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@font-face {
  font-family: "Navigator Extended";
  src: url("/assets/fonts/Navigator-Extended.ttf") format("truetype");
}
body {
  position: relative;
  font-family: "Roboto", sans-serif;
  font-size: 1.8rem;
  line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  font-family: "Navigator Extended", sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 4rem;
}

h1 {
  font-size: 5.4rem;
}
@media (max-width: 64em) {
  h1 {
    font-size: 3.2rem;
  }
}

h2 {
  font-size: 3.6rem;
}
@media (max-width: 64em) {
  h2 {
    font-size: 2.8rem;
  }
}

h3 {
  font-size: 3.2rem;
}

h4 {
  font-size: 2.8rem;
}

h5 {
  font-size: 2.4rem;
}

h6 {
  font-size: 2rem;
}

p:not(:last-child) {
  margin-bottom: 2rem;
}

.bold {
  font-weight: 700;
}

.cidilha {
  position: relative;
}
.cidilha::after {
  z-index: 0;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-70%);
  width: 0.5rem;
  height: 0.5rem;
  background-color: #ffffff;
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.8);
}

.lightbox-close {
  position: fixed;
  top: 2rem;
  right: 2rem;
  font-size: 3rem;
  color: white;
  cursor: pointer;
  z-index: 100000;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
  justify-content: center;
  gap: 1rem;
}

.gallery img {
  cursor: pointer;
  max-width: 60rem;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

section {
  position: relative;
  padding: 10rem 2rem;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
section > * {
  z-index: 5;
  max-width: 130rem;
}
@media (max-width: 100em) {
  section > * {
    max-width: 80%;
  }
}
@media (max-width: 64em) {
  section {
    height: auto;
    padding: 4rem 3rem;
  }
  section > * {
    max-width: 100%;
  }
}

.list {
  list-style: none;
}
.list__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.list__icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
}
.list__icon--roxo {
  background: url("/assets/imgs/olho-roxo.png") no-repeat center/contain;
}
.list__icon--rosa {
  background: url("/assets/imgs/olho-rosa.png") no-repeat center/contain;
}
.list__icon--verde {
  background: url("/assets/imgs/olho-verde.png") no-repeat center/contain;
}
.list__icon--vermelho {
  background: url("/assets/imgs/olho-vermelho.png") no-repeat center/contain;
}

.column-2 {
  display: flex;
  gap: 6rem;
}
@media (max-width: 64em) {
  .column-2 {
    flex-direction: column;
    gap: 4rem;
  }
}
.column-2--reverse {
  flex-direction: row-reverse;
}
@media (max-width: 64em) {
  .column-2--reverse {
    flex-direction: column-reverse;
  }
}
.column-2 > div {
  z-index: 2;
  max-width: 60%;
}
@media (max-width: 64em) {
  .column-2 > div {
    max-width: 100%;
  }
}

.bg-white {
  background: url("/assets/imgs/textura-verde.png");
}

.bg-purple {
  background: url("/assets/imgs/textura-roxo.png") no-repeat center/cover, #9801fe;
  background-blend-mode: multiply;
}

.bg-blue {
  background: url("/assets/imgs/textura-verde.png") no-repeat center/cover, #1e7bd6;
  background-blend-mode: multiply;
}

.bg-aqua {
  background: url("/assets/imgs/textura-verde.png") no-repeat center/cover, #39b2b5;
  background-blend-mode: multiply;
}

.bg-yellow {
  background: url("/assets/imgs/textura-rosa.png") no-repeat center/cover, #f4c803;
  background-blend-mode: multiply;
}

.bg-orange {
  background: url("/assets/imgs/textura-rosa.png") no-repeat center/cover, #ff9900;
  background-blend-mode: multiply;
}

.bg-pink {
  background: url("/assets/imgs/textura-rosa.png") no-repeat center/cover, #ff69b4;
  background-blend-mode: multiply;
}

.bg-salmon {
  background: url("/assets/imgs/textura-roxo.png") no-repeat center/cover, #fe5757;
  background-blend-mode: multiply;
}

.bg-red {
  background: url("/assets/imgs/textura-roxo.png") no-repeat center/cover, #f41003;
  background-blend-mode: multiply;
}

.bg-green {
  background: url("/assets/imgs/textura-verde.png") no-repeat center/cover, #62dc76;
  background-blend-mode: multiply;
}

.comp::after {
  z-index: 0;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.comp::before {
  z-index: 0;
  content: "";
  display: block;
  position: absolute;
  top: 5rem;
  left: 1rem;
  width: 100%;
  height: 100%;
}
.comp.bg-purple::before, .comp.bg-blue::before, .comp.bg-aqua::before, .comp.bg-salmon::before, .comp.bg-red::before {
  background: url("/assets/imgs/pontinhos-verde.png") no-repeat center/cover;
}
.comp.bg-yellow::before, .comp.bg-orange::before, .comp.bg-pink::before, .comp.bg-green::before {
  background: url("/assets/imgs/pontinhos-vermelho.png") no-repeat center/cover;
}
.comp--1::after {
  background: url("/assets/imgs/comp-1.png") no-repeat center/cover;
}
@media (max-width: 64em) {
  .comp--1::after {
    background-position: 30%;
  }
}
.comp--1::before {
  background: url("/assets/imgs/pontinhos-vermelho.png") no-repeat center/cover;
}
.comp--2::after {
  background: url("/assets/imgs/comp-2.png") no-repeat center/cover;
}
@media (max-width: 64em) {
  .comp--2::after {
    background-position: 70%;
  }
}
.comp--reverse::after {
  transform: scaleX(-1);
}

.details::after {
  z-index: 0;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.details::before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: unset;
  right: -18%;
  transform: translateY(-50%) scale(-1);
  width: 80rem;
  height: 80rem;
  background: url("/assets/imgs/ondinhas-laranja.png") no-repeat center/cover;
}
.details--red::after {
  background: url("/assets/imgs/moldura-2.png") no-repeat center/cover;
}
@media (max-width: 64em) {
  .details--red::after {
    background-position: 10%;
  }
}
.details--purple::after {
  background: url("/assets/imgs/moldura-1.png") no-repeat center/cover;
}
@media (max-width: 64em) {
  .details--purple::after {
    background-position: 10%;
  }
}
.details--reverse::after {
  transform: scaleX(-1);
}
@media (max-width: 64em) {
  .details--reverse::after {
    background-position: 90%;
  }
}
.details--reverse::before {
  right: unset;
  left: -18%;
  transform: translateY(-50%);
}

.blobs::after {
  z-index: 0;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}
.blobs--top::after {
  top: 0;
  left: 0;
  background: url("/assets/imgs/moldura-4.png") no-repeat top left/contain;
}
.blobs--bottom::after {
  bottom: 0;
  right: 0;
  background: url("/assets/imgs/moldura-5.png") no-repeat bottom right/contain;
}
.blobs--reverse::after {
  transform: scaleX(-1);
}

.barco,
.algas,
.olhos {
  z-index: 1;
  position: absolute;
  bottom: -12rem;
}
@media (max-width: 64em) {
  .barco,
  .algas,
  .olhos {
    bottom: -8rem;
  }
}
.barco--right,
.algas--right,
.olhos--right {
  left: unset;
  right: -2rem;
}
@media (max-width: 100em) {
  .barco--right,
  .algas--right,
  .olhos--right {
    right: -4rem;
  }
}
.barco--left,
.algas--left,
.olhos--left {
  left: -2rem;
  right: unset;
}
@media (max-width: 100em) {
  .barco--left,
  .algas--left,
  .olhos--left {
    left: -4rem;
  }
}

.barco {
  width: 50rem;
}
.barco--right {
  transform: rotate(0);
}
.barco--left {
  transform: rotate(25deg);
}
@media (max-width: 100em) {
  .barco {
    width: 35rem;
  }
}
@media (max-width: 64em) {
  .barco {
    width: 20rem;
  }
}

.algas {
  width: 60rem;
}
.algas--right {
  transform: rotate(10deg);
}
.algas--left {
  transform: rotate(-10deg) scaleX(-1);
}
@media (max-width: 100em) {
  .algas {
    width: 45rem;
  }
}

.olhos {
  width: 30rem;
  bottom: 0;
}
.olhos--right {
  transform: rotate(0);
}
.olhos--left {
  transform: rotate(-15deg) scaleX(-1);
}
@media (max-width: 100em) {
  .olhos {
    width: 20rem;
  }
}

.header {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 4rem 6rem;
}
@media (max-width: 64em) {
  .header {
    padding: 0 2rem;
  }
}

.navbar {
  width: 100%;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  box-shadow: 0 1rem 2rem rgba(0, 14, 136, 0.5);
}
@media (max-width: 64em) {
  .navbar {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
  }
}
.navbar__logo {
  width: 25rem;
  position: relative;
  display: block;
  transform: translateY(3rem) rotate(20deg);
  transition: transform 0.3s ease;
}
@media (max-width: 64em) {
  .navbar__logo {
    transform: none;
  }
}
.navbar__logo:has(img:hover) {
  transform: rotate(0deg);
}
@media (max-width: 64em) {
  .navbar__logo:has(img:hover) {
    transform: none;
  }
}
.navbar__logo::after {
  z-index: 0;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-45%, -30%);
  width: 330%;
  height: 330%;
  background: url("/assets/imgs/barco-azul.png") no-repeat center/contain;
}
@media (max-width: 64em) {
  .navbar__logo::after {
    transform: translate(-44%, -29%);
  }
}
.navbar__logo .logo {
  z-index: 1;
  position: relative;
  display: block;
  width: 10rem;
  transform: rotate(-12deg);
}
@media (max-width: 100em) {
  .navbar__logo .logo {
    width: 8rem;
  }
}
@media (max-width: 64em) {
  .navbar__logo .logo {
    width: 10rem;
  }
}
.navbar__navlist {
  list-style: none;
  display: flex;
  gap: 1rem;
}
@media (max-width: 100em) {
  .navbar__navlist {
    gap: 0.5rem;
  }
}
@media (max-width: 64em) {
  .navbar__navlist {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
}
.navbar__navlist:has(+ .active) {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.navbar__navitem {
  position: relative;
}
.navbar__navitem.navbar__experiencias:hover .menu-experiencias {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}
.navbar__navlink:visited, .navbar__navlink:link {
  display: inline-block;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
  color: #000e88;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  padding: 0.5rem 1rem;
  border: 3px solid transparent;
  transition: all 0.2s ease;
}
.navbar__navlink:visited:hover, .navbar__navlink:link:hover {
  color: #ffffff;
  background-color: #1e7bd6;
  border: 3px solid #1e7bd6;
  border-bottom-color: #000e88;
}
@media (max-width: 100em) {
  .navbar__navlink:visited, .navbar__navlink:link {
    font-size: 1.3rem;
    padding: 0.5rem;
  }
}
@media (max-width: 64em) {
  .navbar__navlink:visited, .navbar__navlink:link {
    font-size: 1.8rem;
    padding: 0.5rem 1rem;
  }
}
.navbar__menu {
  flex-shrink: 0;
  display: none;
  position: relative;
  width: 7rem;
  height: 7rem;
  background-color: #ffffff;
  box-shadow: 0 1rem 2rem rgba(0, 14, 136, 0.5);
  outline: none;
  border: none;
  transition: box-shadow 0.3s ease;
}
@media (max-width: 64em) {
  .navbar__menu {
    display: block;
  }
}
.navbar__menu::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: all 0.3s ease;
}
.navbar__menu.active {
  box-shadow: none;
}
.navbar__menu.active::after {
  transform: scale(50);
}
.navbar__menu.active span:nth-of-type(1) {
  top: 3.5rem;
  transform: translate(-50%, -50%) rotate(45deg);
}
.navbar__menu.active span:nth-of-type(2) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.navbar__menu.active span:nth-of-type(3) {
  top: 3.5rem;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.navbar__menu span {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 4rem;
  height: 0.6rem;
  background-color: #1e7bd6;
  transition: transform 0.2s ease;
}
.navbar__menu span:nth-of-type(1) {
  top: 2rem;
}
.navbar__menu span:nth-of-type(2) {
  top: 3.5rem;
}
.navbar__menu span:nth-of-type(3) {
  top: 5rem;
}

.menu-experiencias {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateY(calc(100% + 3.4rem));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease;
}
.menu-experiencias__list {
  display: flex;
  flex-direction: column;
  gap: 0rem;
  background-color: #000e88;
}
.menu-experiencias__list-item {
  list-style: none;
}
.menu-experiencias__list-link {
  display: block;
  padding: 1rem 1.5rem;
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
}
.menu-experiencias__list-link:visited, .menu-experiencias__list-link:link {
  color: #ffffff;
}
.menu-experiencias__list-link:hover {
  background-color: #1e7bd6;
}
@media (max-width: 90em) {
  .menu-experiencias {
    transform: translateY(calc(100% + 4.7rem));
  }
}
@media (max-width: 64em) {
  .menu-experiencias {
    display: none;
  }
}

#footer {
  position: relative;
  width: 100%;
  padding: 2rem;
  background: url("/assets/imgs/textura-rosa.png");
  box-shadow: 0 -1rem 4rem rgba(136, 0, 79, 0.5);
}
@media (max-width: 48em) {
  #footer {
    padding: 1rem;
  }
}
#footer .regua-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}
@media (max-width: 48em) {
  #footer .regua-logos {
    gap: 1rem;
  }
}
#footer .regua-logos__logo {
  display: block;
}
#footer .regua-logos__logo img {
  max-height: 10rem;
  height: 6rem;
}
@media (max-width: 48em) {
  #footer .regua-logos__logo img {
    height: 2.5rem;
  }
}
#footer .regua-logos__logo:nth-child(1) img {
  height: 9rem;
}
@media (max-width: 48em) {
  #footer .regua-logos__logo:nth-child(1) img {
    height: 4rem;
  }
}
#footer .regua-logos__logo:nth-of-type(4) img {
  height: 4rem;
}
@media (max-width: 48em) {
  #footer .regua-logos__logo:nth-of-type(4) img {
    height: 2rem;
  }
}
#footer .regua-logos__logo:nth-of-type(5) img {
  height: 6rem;
}
@media (max-width: 48em) {
  #footer .regua-logos__logo:nth-of-type(5) img {
    height: 3rem;
  }
}

#sobre .hero {
  background: url("/assets/imgs/bg-fundo-vermelho.png") no-repeat center;
  background-size: cover;
}
@media (max-width: 64em) {
  #sobre .hero {
    height: 60rem;
    background-position: 70%;
  }
}
#sobre .hero__content {
  max-width: 60rem;
}
@media (max-width: 100em) {
  #sobre .hero__content {
    max-width: 50rem;
  }
}
@media (max-width: 27em) {
  #sobre .hero__content {
    max-width: 25rem;
  }
}
#sobre .hero__heading {
  width: 100%;
  margin-bottom: 2rem;
  background: url("/assets/imgs/logo-verde.png") no-repeat center/cover;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 100em) {
  #sobre .hero__heading {
    margin-bottom: 1rem;
  }
}
#sobre .hero__subheading {
  display: block;
  width: fit-content;
  margin: 0 auto 0.5rem;
  padding: 0.5rem 1rem;
  font-family: "Navigator Extended", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: #3a0061;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: #00ff00;
}
@media (max-width: 100em) {
  #sobre .hero__subheading {
    font-size: 2rem;
  }
}
#sobre .projeto__content {
  position: relative;
}
#sobre .projeto__heading {
  display: inline-block;
  color: #00ff00;
  background-color: #9801fe;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #sobre .projeto__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#sobre .projeto__text {
  color: #333;
}
#sobre .projeto__text .bold {
  color: #9801fe;
}
#sobre .projeto__img-wrapper {
  -webkit-mask-image: url("/assets/imgs/img-clip-5.png");
  -webkit-mask-size: 100% 150%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transform: scale(-1);
}
#sobre .projeto__img {
  width: 100%;
  transform: rotate(180deg);
}
#sobre .objetivo__content {
  position: relative;
  z-index: 2;
}
#sobre .objetivo__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #ff9900;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #sobre .objetivo__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#sobre .objetivo__text {
  color: #ffffff;
}
#sobre .objetivo__box {
  max-width: 40rem;
  padding: 4rem;
  background-color: #9801fe;
}
#sobre .objetivo__box .list__item {
  color: #00ff00;
  font-weight: 500;
  line-height: 1.1;
}
@media (max-width: 64em) {
  #sobre .objetivo__box {
    margin: 0 auto;
  }
}
#sobre .objetivo__box-text {
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 4rem;
}
#sobre .implementacao__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #f41003;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #sobre .implementacao__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#sobre .implementacao__img {
  width: 100%;
  width: 60rem;
}
@media (max-width: 64em) {
  #sobre .implementacao__img {
    width: 100%;
  }
}
#sobre .implementacao__img-caption {
  text-align: right;
  font-size: 1.4rem;
  color: #000000;
}
#sobre .implementacao__text {
  color: #000000;
}

@media (max-width: 100em) {
  #impacto .hero {
    height: auto;
  }
}
#impacto .hero__content {
  text-align: center;
}
@media (max-width: 100em) {
  #impacto .hero__content {
    padding-top: 12rem !important;
  }
}
#impacto .heading {
  display: inline-block;
  color: #ffffff;
  background-color: #000e88;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #impacto .heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#impacto .heading {
  border-bottom: 4px solid #ff69b4;
  margin: 0 auto 10rem;
}
#impacto .boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  row-gap: 8rem;
  justify-content: center;
}
@media (max-width: 64em) {
  #impacto .boxes {
    row-gap: 5rem;
  }
}
#impacto .box {
  width: 100%;
  max-width: 25rem;
  padding: 2rem;
}
#impacto .box__content {
  position: relative;
}
#impacto .box__icon {
  width: 8rem;
  height: 8rem;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
}
#impacto .box__number {
  padding-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
#impacto .box__number--icon {
  width: 3rem;
}
#impacto .box__number--text {
  font-family: "Navigator Extended", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  margin: 0;
  width: fit-content;
}
#impacto .box__text {
  line-height: 1.2;
  margin: 0;
}
@media (max-width: 100em) {
  #impacto .box__text {
    font-size: 1.4rem;
  }
}
#impacto .box:nth-child(1), #impacto .box:nth-child(7) {
  background-color: #fe5757;
}
#impacto .box:nth-child(1) .box__icon, #impacto .box:nth-child(7) .box__icon {
  background: url("/assets/imgs/olho-vermelho.png") no-repeat center/contain;
}
#impacto .box:nth-child(2), #impacto .box:nth-child(8) {
  background-color: #dc69ff;
}
#impacto .box:nth-child(2) .box__icon, #impacto .box:nth-child(8) .box__icon {
  background: url("/assets/imgs/olho-roxo.png") no-repeat center/contain;
}
#impacto .box:nth-child(3), #impacto .box:nth-child(5) {
  background-color: #ff69b4;
}
#impacto .box:nth-child(3) .box__icon, #impacto .box:nth-child(5) .box__icon {
  background: url("/assets/imgs/olho-rosa.png") no-repeat center/contain;
}
#impacto .box:nth-child(4), #impacto .box:nth-child(6) {
  background-color: #62dc76;
}
#impacto .box:nth-child(4) .box__icon, #impacto .box:nth-child(6) .box__icon {
  background: url("/assets/imgs/olho-verde.png") no-repeat center/contain;
}
@media (max-width: 100em) {
  #impacto .box {
    max-width: 30rem;
  }
}
#impacto .nuvem__content {
  width: 100%;
  text-align: center;
}
#impacto .nuvem__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #f41003;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #impacto .nuvem__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#impacto .nuvem__text {
  margin-bottom: 8rem;
  color: #ffffff;
  font-size: 2rem;
}
#impacto .nuvem .wordcloud {
  width: 100%;
  height: 40rem;
}

#trilha .hero {
  height: auto;
}
#trilha .hero__content {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 100em) {
  #trilha .hero__content {
    padding-top: 12rem !important;
  }
}
#trilha .hero .heading {
  display: inline-block;
  color: #ffffff;
  background-color: #3a0061;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #trilha .hero .heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#trilha .hero .heading {
  border-bottom: 4px solid #fe5757;
}
@media (max-width: 64em) {
  #trilha .hero .column-2 > div {
    display: none;
  }
}
#trilha .hero .column-2 > div {
  position: relative;
}
#trilha .hero .column-2 > div .hero__img-wrapper {
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
#trilha .hero .column-2 > div:nth-of-type(1) .hero__title:visited,
#trilha .hero .column-2 > div:nth-of-type(1) .hero__title:link {
  display: inline-block;
  color: #ffffff;
  background-color: #9801fe;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #trilha .hero .column-2 > div:nth-of-type(1) .hero__title:visited,
  #trilha .hero .column-2 > div:nth-of-type(1) .hero__title:link {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#trilha .hero .column-2 > div:nth-of-type(1) .hero__img-wrapper {
  -webkit-mask-image: url("/assets/imgs/img-clip-1.png");
}
#trilha .hero .column-2 > div:nth-of-type(1) img {
  transform: scale(0.95) translate(3rem, -1rem);
}
#trilha .hero .column-2 > div:nth-of-type(2) .hero__title:visited,
#trilha .hero .column-2 > div:nth-of-type(2) .hero__title:link {
  display: inline-block;
  color: #000e88;
  background-color: #ff9900;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #trilha .hero .column-2 > div:nth-of-type(2) .hero__title:visited,
  #trilha .hero .column-2 > div:nth-of-type(2) .hero__title:link {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#trilha .hero .column-2 > div:nth-of-type(2) .hero__img-wrapper {
  -webkit-mask-image: url("/assets/imgs/img-clip-3.png");
  -webkit-mask-size: 120%;
}
#trilha .hero .column-2 > div:nth-of-type(2) img {
  transform: scale(1.15) translateY(5rem);
}
#trilha .hero__img {
  width: 100%;
}
#trilha .hero__title {
  cursor: pointer;
  position: absolute;
  bottom: 8rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Navigator Extended", sans-serif;
  font-size: 2rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
#trilha .hero__title:hover {
  transform: translateX(-50%) scale(1.2);
}
#trilha .estudantes {
  height: auto;
}
#trilha .estudantes__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #f41003;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #trilha .estudantes__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#trilha .estudantes__text {
  color: #ffffff;
}
#trilha .estudantes__text--highlight {
  font-family: "Navigator Extended", sans-serif;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.2;
  float: left;
  width: 35rem;
  margin-right: 3rem;
  padding: 3rem;
  color: #9801fe;
  background-color: #00ff00;
}
@media (max-width: 48em) {
  #trilha .estudantes__text--highlight {
    float: none;
    display: block;
    width: 100%;
    margin-right: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}
#trilha .estudantes__text .bold {
  font-weight: 800;
  color: #f4c803;
}
#trilha .professores {
  height: auto;
}
#trilha .professores__content {
  padding-bottom: 15rem;
}
@media (max-width: 100em) {
  #trilha .professores__content {
    padding-bottom: 3rem;
  }
}
#trilha .professores__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #1e7bd6;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #trilha .professores__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#trilha .professores__text {
  color: #000000;
}
#trilha .professores__text--highlight {
  margin-top: -2rem;
  font-family: "Navigator Extended", sans-serif;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.2;
  float: right;
  width: 52rem;
  margin-top: 2rem;
  margin-left: 3rem;
  text-align: right;
  padding: 3rem;
  color: #ff9900;
  background-color: #000e88;
}
#trilha .professores__text--highlight .cidilha::after {
  background-color: #ff9900;
}
@media (max-width: 48em) {
  #trilha .professores__text--highlight {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}
#trilha .professores__text .bold {
  font-weight: 800;
  color: #88004f;
}

#escolas .hero {
  height: auto;
}
#escolas .hero__content {
  width: 100%;
  text-align: center;
}
@media (max-width: 100em) {
  #escolas .hero__content {
    padding-top: 12rem !important;
  }
}
#escolas .hero__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #88004f;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #escolas .hero__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#escolas .hero__heading {
  border-bottom: 4px solid #f4c803;
}
#escolas .hero__text {
  max-width: 65%;
  margin: 0 auto 4rem;
  color: #ffffff;
}
@media (max-width: 100em) {
  #escolas .hero__text {
    max-width: 100%;
  }
}
#escolas .hero .boxes {
  width: 100%;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
#escolas .hero .box {
  max-width: 40rem;
  display: flex;
}
#escolas .hero .box__content {
  width: 100%;
  padding: 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: background-color 0.2s ease;
}
#escolas .hero .box__img {
  width: 100%;
  height: 20rem;
  background-size: cover;
  background-position: center;
}
#escolas .hero .box__name {
  font-family: "Navigator Extended", sans-serif;
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 2rem 0;
}
#escolas .hero .box__text p {
  line-height: 1.2;
}
#escolas .hero .box__text p:not(:last-child) {
  margin-bottom: 1rem;
}
#escolas .hero .box__btn:visited, #escolas .hero .box__btn:link {
  width: 100%;
  padding: 1rem;
  display: block;
  margin-top: auto;
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
  background-color: #88004f;
  transition: all 0.3s ease;
}
#escolas .hero .box__btn:hover {
  background-color: #1e7bd6 !important;
}
#escolas .hero .box:nth-of-type(1) .box__content {
  background-color: #fe5757;
}
#escolas .hero .box:nth-of-type(1) .box__btn {
  background-color: #880000;
}
#escolas .hero .box:nth-of-type(1) .box__img {
  background-image: url("/assets/imgs/escola-jairo.png");
}
#escolas .hero .box:nth-of-type(2) .box__content {
  background-color: #62dc76;
}
#escolas .hero .box:nth-of-type(2) .box__btn {
  background-color: #003a08;
}
#escolas .hero .box:nth-of-type(2) .box__img {
  background-image: url("/assets/imgs/escola-manuel.png");
}
#escolas .hero .box:nth-of-type(3) .box__content {
  background-color: #dc69ff;
}
#escolas .hero .box:nth-of-type(3) .box__btn {
  background-color: #3a0061;
}
#escolas .hero .box:nth-of-type(3) .box__img {
  background-image: url("/assets/imgs/escola-nathalia.png");
}
#escolas .hero .box:nth-of-type(4) .box__content {
  background-color: #ff69b4;
}
#escolas .hero .box:nth-of-type(4) .box__btn {
  background-color: #88004f;
}
#escolas .hero .box:nth-of-type(4) .box__img {
  background-image: url("/assets/imgs/escola-roberto.png");
}
#escolas .hero .box:nth-of-type(5) .box__content {
  background-color: #69c8ff;
}
#escolas .hero .box:nth-of-type(5) .box__btn {
  background-color: #000e88;
}
#escolas .hero .box:nth-of-type(5) .box__img {
  background-image: url("/assets/imgs/escola-ruy.png");
}

#experiencias .hero {
  height: auto;
}
#experiencias .hero__content {
  width: 100%;
  text-align: center;
}
@media (max-width: 100em) {
  #experiencias .hero__content {
    padding-top: 12rem !important;
  }
}
#experiencias .hero__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #1e7bd6;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #experiencias .hero__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#experiencias .hero__heading {
  border-bottom: 4px solid #ff69b4;
}
#experiencias .hero__text {
  color: #000000;
  font-size: 2rem;
  margin-bottom: 8rem;
}
#experiencias .hero .boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 48em) {
  #experiencias .hero .boxes {
    grid-template-columns: repeat(1, 1fr);
  }
}
#experiencias .hero .boxes--col-2 {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 2rem;
}
#experiencias .hero .boxes--col-2 .box:nth-of-type(1) {
  background: #62dc76;
}
#experiencias .hero .boxes--col-2 .box:nth-of-type(1) .box__btn:visited, #experiencias .hero .boxes--col-2 .box:nth-of-type(1) .box__btn:link {
  color: #ffffff;
  background-color: #003a08;
}
#experiencias .hero .boxes--col-2 .box:nth-of-type(1)::before {
  background: url("/assets/imgs/olho-verde.png") no-repeat center/contain;
  right: 0;
  left: unset;
  transform: translate(20%, -20%);
}
#experiencias .hero .boxes--col-2 .box:nth-of-type(2) {
  background: #69c8ff;
}
#experiencias .hero .boxes--col-2 .box:nth-of-type(2) .box__btn:visited, #experiencias .hero .boxes--col-2 .box:nth-of-type(2) .box__btn:link {
  color: #ffffff;
  background-color: #000e88;
}
#experiencias .hero .boxes--col-2 .box:nth-of-type(2)::before {
  background: url("/assets/imgs/olho-azul.png") no-repeat center/contain;
  right: 0;
  left: unset;
  transform: translate(20%, -20%);
}
@media (max-width: 48em) {
  #experiencias .hero .boxes--col-2 .box:nth-of-type(2)::before {
    right: unset;
    left: 0;
    transform: translate(-20%, -20%);
  }
}
#experiencias .hero .box {
  position: relative;
  padding: 2rem;
  transition: all 0.3s ease;
}
#experiencias .hero .box:nth-of-type(1) {
  background: #dc69ff;
}
#experiencias .hero .box:nth-of-type(1) .box__btn:visited, #experiencias .hero .box:nth-of-type(1) .box__btn:link {
  color: #ffffff;
  background-color: #3a0061;
}
#experiencias .hero .box:nth-of-type(1)::before {
  background: url("/assets/imgs/olho-roxo.png") no-repeat center/contain;
  left: 0;
  transform: translate(-20%, -20%);
}
#experiencias .hero .box:nth-of-type(2) {
  background: #ff69b4;
}
#experiencias .hero .box:nth-of-type(2) .box__btn:visited, #experiencias .hero .box:nth-of-type(2) .box__btn:link {
  color: #ffffff;
  background-color: #88004f;
}
#experiencias .hero .box:nth-of-type(2)::before {
  background: url("/assets/imgs/olho-rosa.png") no-repeat center/contain;
  right: 0;
  transform: translate(20%, -20%);
}
#experiencias .hero .box:nth-of-type(3) {
  background: #fe5757;
}
#experiencias .hero .box:nth-of-type(3) .box__btn:visited, #experiencias .hero .box:nth-of-type(3) .box__btn:link {
  color: #ffffff;
  background-color: #880000;
}
#experiencias .hero .box:nth-of-type(3)::before {
  background: url("/assets/imgs/olho-vermelho.png") no-repeat center/contain;
  left: 0;
  transform: translate(-20%, -20%);
}
#experiencias .hero .box__content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#experiencias .hero .box__name {
  font-family: "Navigator Extended", sans-serif;
  margin-bottom: 3rem;
  font-size: 2.4rem;
  line-height: 1.2;
}
#experiencias .hero .box__btns {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
#experiencias .hero .box__btn {
  display: block;
  padding: 1rem 2rem;
  width: 100%;
  font-weight: 500;
}
#experiencias .hero .box__btn:visited, #experiencias .hero .box__btn:link {
  text-decoration: none;
  transition: all 0.3s ease;
}
#experiencias .hero .box__btn:hover {
  color: #000000 !important;
  background-color: #ff9900 !important;
}
#experiencias .hero .box::before {
  content: "";
  display: block;
  width: 6rem;
  height: 6rem;
  position: absolute;
  top: 0;
}

#experiencias-escola .hero {
  height: auto;
}
#experiencias-escola .hero__content {
  width: 100%;
  text-align: center;
}
@media (max-width: 100em) {
  #experiencias-escola .hero__content {
    padding-top: 12rem !important;
  }
}
#experiencias-escola .hero__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #000e88;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #experiencias-escola .hero__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#experiencias-escola .hero__heading {
  border-bottom: 4px solid #00ff00;
}
#experiencias-escola .hero__text {
  color: #ffffff;
}
#experiencias-escola .boxes {
  width: 100%;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
#experiencias-escola .box {
  flex: 1;
  max-width: 60rem;
  width: 100%;
  display: flex;
}
@media (max-width: 64em) {
  #experiencias-escola .box {
    flex: none;
    max-width: 35rem;
  }
}
#experiencias-escola .box__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
#experiencias-escola .box__link:visited, #experiencias-escola .box__link:link {
  text-decoration: none;
  color: #000000;
}
#experiencias-escola .box__link:visited .cidilha::after, #experiencias-escola .box__link:link .cidilha::after {
  background-color: #000000;
  width: 0.4rem;
}
#experiencias-escola .box__link:hover .box__content {
  background-color: #f4c803 !important;
}
#experiencias-escola .box__btn:visited, #experiencias-escola .box__btn:link {
  width: 100%;
  padding: 1rem;
  display: block;
  margin-top: auto;
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
  transition: all 0.3s ease;
}
#experiencias-escola .box__btn:hover {
  background-color: #fe5757 !important;
}
#experiencias-escola .box__content {
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: background-color 0.2s ease;
}
#experiencias-escola .box__img {
  width: 100%;
  height: 20rem;
  background-size: cover;
  background-position: center;
}
#experiencias-escola .box__name {
  font-family: "Navigator Extended", sans-serif;
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 2rem 0;
}
#experiencias-escola .box__name .cidilha::after {
  background-color: #000000;
  width: 0.3rem;
}
#experiencias-escola .box__text p {
  line-height: 1.2;
}
#experiencias-escola .box__text p:not(:last-child) {
  margin-bottom: 1rem;
}
#experiencias-escola .box__text {
  margin-bottom: 3rem;
}
#experiencias-escola .box:nth-of-type(1) .box__content {
  background-color: #62dc76;
}
#experiencias-escola .box:nth-of-type(1) .box__btn {
  background-color: #003a08;
}
#experiencias-escola .box:nth-of-type(2) .box__content {
  background-color: #69c8ff;
}
#experiencias-escola .box:nth-of-type(2) .box__btn {
  background-color: #000e88;
}
#experiencias-escola .box:nth-of-type(3) .box__content {
  background-color: #dc69ff;
}
#experiencias-escola .box:nth-of-type(3) .box__btn {
  background-color: #3a0061;
}
#experiencias-escola .box:nth-of-type(4) .box__content {
  background-color: #39b2b5;
}
#experiencias-escola .box:nth-of-type(4) .box__btn {
  background-color: #00363a;
}
#experiencias-escola.nathalia .box:nth-of-type(1) .box__img {
  background-image: url("/assets/praticas/nathalia-uchoa/o-desafio-1.png");
}
#experiencias-escola.nathalia .box:nth-of-type(2) .box__img {
  background-image: url("/assets/praticas/nathalia-uchoa/seguranca-1.jpeg");
  background-size: 120%;
  background-position: 100% 20%;
}
#experiencias-escola.nathalia .box:nth-of-type(3) .box__img {
  background-image: url("/assets/praticas/nathalia-uchoa/starsgirls-1.png");
}
#experiencias-escola.nathalia .box:nth-of-type(4) .box__img {
  background-image: url("/assets/praticas/nathalia-uchoa/winters-1.jpg");
  background-size: 110%;
  background-position: 100% 20%;
}
#experiencias-escola.roberto .box:nth-of-type(1) .box__img {
  background-image: url("/assets/praticas/roberto-dos-santos-vieira/falta-2.jpg");
}
#experiencias-escola.roberto .box:nth-of-type(2) .box__img {
  background-image: url("/assets/praticas/roberto-dos-santos-vieira/quimera-1.png");
}
#experiencias-escola.roberto .box:nth-of-type(3) .box__img {
  background-image: url("/assets/praticas/roberto-dos-santos-vieira/twice-3.jpg");
}
#experiencias-escola.roberto .box:nth-of-type(4) .box__img {
  background-image: url("/assets/praticas/roberto-dos-santos-vieira/uni4-1.jpg");
}
#experiencias-escola.jairo .box:nth-of-type(1) .box__img {
  background-image: url("/assets/praticas/jairo-da-silva-rocha/5-elementos-2.jpg");
}
#experiencias-escola.jairo .box:nth-of-type(2) .box__img {
  background-image: url("/assets/praticas/jairo-da-silva-rocha/QUESTION-TAGS-1.jpeg");
}
#experiencias-escola.jairo .box:nth-of-type(3) .box__img {
  background-image: url("/assets/praticas/jairo-da-silva-rocha/vozes-3.png");
}
#experiencias-escola.manuel .box:nth-of-type(1) .box__img {
  background-image: url("/assets/praticas/manuel-rodrigues-de-souza/as-supermendes-1.jpg");
}
#experiencias-escola.manuel .box:nth-of-type(2) .box__img {
  background-image: url("/assets/praticas/manuel-rodrigues-de-souza/infraestrutura-3.jpg");
}
#experiencias-escola.ruy .box:nth-of-type(1) .box__img {
  background-image: url("/assets/praticas/ruy-alencar/parada-2.png");
}

@media (max-width: 64em) {
  #quem .blobs::after,
  #quem .details::after,
  #quem .details::before {
    display: none;
  }
}
#quem section:not(.hero, .conclusao) {
  height: 70vh;
}
@media (max-width: 64em) {
  #quem section:not(.hero, .conclusao) {
    height: auto;
  }
}
#quem .column-2 {
  gap: 15rem;
}
@media (max-width: 64em) {
  #quem .column-2 {
    flex-direction: column-reverse;
    gap: 1rem;
  }
}
#quem h2 {
  margin-bottom: 0;
}
@media (max-width: 100em) {
  #quem h2 {
    font-size: 3rem;
  }
}
#quem .general__text {
  position: relative;
  margin-top: 4rem;
}
#quem .general__logo {
  margin: auto;
  z-index: 1;
}
#quem .general__logo--wrapper {
  position: relative;
}
#quem .general__logo--wrapper::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  filter: brightness(10);
  z-index: -1;
}
#quem .general__logo--img {
  width: 100%;
  max-width: 50rem;
  max-height: 40rem;
}
@media (max-width: 64em) {
  #quem .general__logo--img {
    max-width: 30rem;
  }
}
@media (max-width: 64em) {
  #quem .hero .algas,
  #quem .hero .olhos,
  #quem .hero .barco {
    display: none;
  }
}
@media (max-width: 64em) {
  #quem .hero {
    padding-top: 10rem;
  }
}
#quem .hero__content {
  max-width: 60rem;
}
@media (max-width: 100em) {
  #quem .hero__content {
    max-width: 50rem;
  }
}
#quem .hero__heading {
  width: 80%;
  margin: 0 auto;
  background: url("/assets/imgs/logo-verde.png") no-repeat center/cover;
  -webkit-text-fill-color: transparent;
}
#quem .hero__text {
  color: #ffffff;
  text-align: center;
}
#quem .hero__text .bold {
  font-weight: 800;
  color: #00ff00;
}
@media (max-width: 100em) {
  #quem .hero__text {
    font-size: 1.6rem;
    margin-left: -5rem;
    margin-right: -5rem;
  }
}
@media (max-width: 48em) {
  #quem .hero__text {
    font-size: 1.8rem;
    margin: 0;
  }
}
#quem .unicef__content .general__logo--wrapper::after {
  background: url("/assets/imgs/img-clip-3.png") no-repeat center/contain;
  transform: scale(1.8);
}
#quem .unicef__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #000e88;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #quem .unicef__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#quem .unicef__text {
  color: #ffffff;
}
#quem .unicef__text .bold {
  color: #000e88;
}
#quem .sincroniza__content .general__logo--wrapper::after {
  background: url("/assets/imgs/img-clip-5.png") no-repeat center/contain;
  transform: scale(4) translateX(2rem);
}
#quem .sincroniza__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #00363a;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #quem .sincroniza__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#quem .sincroniza__text {
  color: #ffffff;
}
#quem .sincroniza__text .bold {
  color: #00363a;
}
#quem .icp__content .general__logo--wrapper::after {
  background: url("/assets/imgs/img-clip-2.png") no-repeat center/contain;
  transform: scale(4);
}
#quem .icp__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #88004f;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #quem .icp__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#quem .icp__text {
  color: #000000;
}
#quem .icp__text .bold {
  color: #88004f;
}
#quem .gedutec__content .general__logo--wrapper::after {
  background: url("/assets/imgs/img-clip-2.png") no-repeat center/contain;
  transform: scale(5);
  filter: grayscale(1) opacity(0.15);
}
#quem .gedutec__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #333;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #quem .gedutec__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#quem .gedutec__text {
  color: #333;
}
#quem .gedutec__text .bold {
  color: #000000;
}
#quem .nascente__content .general__logo--wrapper::after {
  background: url("/assets/imgs/img-clip-4.png") no-repeat center/contain;
  transform: scale(3) translateX(-1rem);
}
#quem .nascente__heading {
  display: inline-block;
  color: #ffffff;
  background-color: #883d00;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #quem .nascente__heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#quem .nascente__text {
  color: #000000;
}
#quem .nascente__text .bold {
  color: #883d00;
}
#quem .conclusao {
  text-align: center;
}
@media (max-width: 64em) {
  #quem .conclusao {
    padding: 6rem 3rem;
  }
}
#quem .conclusao__content {
  max-width: 60rem;
}
#quem .conclusao .heading {
  font-size: 6rem;
  display: inline-block;
  color: #000e88;
  background-color: #00ff00;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #quem .conclusao .heading {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
@media (max-width: 64em) {
  #quem .conclusao .heading {
    font-size: 4rem;
  }
}
#quem .conclusao__text {
  color: #ffffff;
  font-size: 2.2rem;
}
@media (max-width: 64em) {
  #quem .conclusao__text {
    font-size: 1.8rem;
    line-height: 1.3;
  }
}

#pratica .hero {
  height: auto;
}
#pratica .hero__content {
  width: 100%;
  text-align: center;
}
@media (max-width: 100em) {
  #pratica .hero__content {
    padding-top: 12rem !important;
  }
}
#pratica .details::after {
  background: url("/assets/imgs/moldura-1-seamless.png") repeat center/contain;
}
#pratica .details::before {
  top: 0;
  background: url("/assets/imgs/ondinhas-laranja.png") repeat center/cover;
  transform: scale(-1);
}
#pratica .titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#pratica .nome-escola {
  display: inline-block;
  font-family: "Navigator Extended", sans-serif;
  font-size: 2rem;
  text-decoration: none;
  margin-bottom: 2rem;
  padding: 0.5rem 2rem;
  transition: all 0.2s ease;
}
#pratica .nome-escola:visited, #pratica .nome-escola:link {
  color: #ff9900;
}
#pratica .nome-escola:hover {
  color: #000e88;
  background-color: orange;
}
#pratica .tag {
  font-family: "Navigator Extended", sans-serif;
  color: #000000;
  font-size: 2.8rem;
}
#pratica .nome {
  display: inline-block;
  color: #3a0061;
  background-color: #00ff00;
  padding: 0.5rem 1rem;
}
@media (max-width: 64em) {
  #pratica .nome {
    display: block;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center;
  }
}
#pratica .nome {
  margin-bottom: 1rem;
}
#pratica .nome .cidilha::after {
  background-color: #3a0061;
  height: 1.5rem;
}
#pratica .subnome {
  color: #3a0061;
}
#pratica .subnome .cidilha::after {
  background-color: #3a0061;
  height: 0.8rem;
}
#pratica .informacoes-gerais {
  margin: 0 auto;
  display: flex;
  gap: 5rem;
  justify-content: center;
  margin-bottom: 8dvb;
}
#pratica .informacoes-gerais .integrantes {
  max-width: 50rem;
}
@media (max-width: 48em) {
  #pratica .informacoes-gerais .integrantes {
    max-width: 100%;
  }
}
@media (max-width: 48em) {
  #pratica .informacoes-gerais {
    flex-direction: column;
    gap: 2rem;
  }
}
#pratica .conteudo-principal {
  display: grid;
  gap: 6rem;
}
@media (max-width: 64em) {
  #pratica .conteudo-principal {
    gap: 2rem;
  }
}
@media (max-width: 48em) {
  #pratica .conteudo-principal {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
@media (max-width: 48em) {
  #pratica .conteudo-principal > div {
    grid-column: 1/-1 !important;
  }
}
#pratica .conteudo-principal > div:not(.galeria) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#pratica .conteudo-principal > div:not(.galeria) .tag + div {
  padding: 3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 27em) {
  #pratica .conteudo-principal > div:not(.galeria) .tag + div {
    padding: 2rem;
  }
}
#pratica .conteudo-principal .tag {
  display: block;
  width: 100%;
  padding: 1rem 3rem;
  line-height: 1;
  color: #ffffff;
}
@media (max-width: 27em) {
  #pratica .conteudo-principal .tag {
    padding: 1rem;
  }
}
#pratica .motivacao {
  background-color: #39b2b5;
}
#pratica .motivacao .tag {
  background-color: #883d00;
}
#pratica .o-que-foi-desenvolvido {
  background-color: #dc69ff;
}
#pratica .o-que-foi-desenvolvido .tag {
  background-color: #000e88;
}
#pratica .relevancia {
  background-color: #fe5757;
}
#pratica .relevancia .tag {
  background-color: #3a0061;
}
#pratica .aprendizados {
  background-color: #69c8ff;
}
#pratica .aprendizados .tag {
  background-color: #88004f;
}
#pratica .desafios {
  background-color: #f4c803;
}
#pratica .desafios .tag {
  background-color: #f41003;
}
#pratica .funcionamento-e-melhorias {
  background-color: #62dc76;
}
#pratica .funcionamento-e-melhorias .tag {
  background-color: #00363a;
}
#pratica .pdf {
  grid-column: 1/-1;
  padding: 0 !important;
}
#pratica .pdf .tag {
  background-color: #883d00;
}
#pratica .iframe {
  width: 100%;
  height: 60rem;
  border: 2px solid #333;
}
@media (max-width: 48em) {
  #pratica .iframe {
    height: 40rem;
  }
}
#pratica .galeria {
  grid-column: 1/-1;
  padding: 0 !important;
}
#pratica .galeria .tag {
  background-color: #3a0061;
  margin-bottom: 1rem;
}
#pratica .galeria .tag .cidilha::after {
  height: 0.5rem;
}
#pratica.cinco-elementos .conteudo-principal {
  grid-template-columns: repeat(6, 1fr);
}
#pratica.cinco-elementos .conteudo-principal.boxes--col-2 {
  grid-template-columns: repeat(1, 1fr);
  padding: 0;
}
#pratica.cinco-elementos .boxes--col-2 {
  grid-template-rows: repeat(2, 1fr) !important;
  grid-column: 4/-1;
}
#pratica.cinco-elementos .motivacao {
  grid-column: 1/-1;
}
#pratica.cinco-elementos .o-que-foi-desenvolvido {
  grid-column: 1/4;
}
#pratica.cinco-elementos .relevancia {
  grid-column: 4/-1;
}
#pratica.cinco-elementos .aprendizados {
  grid-column: 1/4;
}
#pratica.question-tags .conteudo-principal {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, auto);
}
#pratica.question-tags .conteudo-principal > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
#pratica.question-tags .o-que-foi-desenvolvido {
  grid-row: 1/-1;
}
#pratica.question-tags .o-que-foi-desenvolvido .tag + div {
  display: block !important;
  text-align: left;
}
#pratica.question-tags .pdf .tag {
  margin-bottom: 3rem;
}
#pratica.question-tags .pdf div {
  width: 100%;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 0 !important;
}
#pratica.question-tags .pdf .iframe {
  height: 40rem;
  flex: 1;
}
#pratica.vozes-comunidade .conteudo-principal {
  grid-template-columns: repeat(6, 1fr);
}
#pratica.vozes-comunidade .conteudo-principal.boxes--col-2 {
  grid-template-columns: repeat(1, 1fr);
}
#pratica.vozes-comunidade .boxes--col-2 {
  display: grid !important;
  grid-template-rows: repeat(2, auto) !important;
  row-gap: 4rem;
  grid-column: 1/4;
}
#pratica.vozes-comunidade .relevancia {
  grid-column: 4/-1;
}
#pratica.vozes-comunidade .aprendizados {
  grid-column: 1/3;
}
#pratica.vozes-comunidade .desafios {
  grid-column: 3/5;
}
#pratica.vozes-comunidade .funcionamento-e-melhorias {
  grid-column: 5/-1;
}
#pratica.supermendes .conteudo-principal, #pratica.infraestrutura .conteudo-principal {
  grid-template-columns: repeat(6, 1fr);
}
#pratica.supermendes .motivacao, #pratica.infraestrutura .motivacao {
  grid-column: 1/4;
}
#pratica.supermendes .o-que-foi-desenvolvido, #pratica.infraestrutura .o-que-foi-desenvolvido {
  grid-column: 4/-1;
}
#pratica.supermendes .relevancia, #pratica.infraestrutura .relevancia {
  grid-column: 1/5;
}
#pratica.supermendes .aprendizados, #pratica.infraestrutura .aprendizados {
  grid-column: 5/-1;
}
#pratica.supermendes .desafios, #pratica.infraestrutura .desafios {
  grid-column: 1/3;
}
#pratica.supermendes .funcionamento-e-melhorias, #pratica.infraestrutura .funcionamento-e-melhorias {
  grid-column: 3/-1;
}
#pratica.desafio .conteudo-principal, #pratica.starsgirls .conteudo-principal, #pratica.twice .conteudo-principal {
  grid-template-columns: repeat(3, 1fr);
}
#pratica.seguranca .conteudo-principal {
  grid-template-columns: repeat(3, 1fr);
}
#pratica.seguranca .o-que-foi-desenvolvido {
  grid-column: 1/-1;
}
#pratica.winters .conteudo-principal {
  grid-template-columns: repeat(6, 1fr);
}
#pratica.winters .motivacao {
  grid-column: 1/3;
}
#pratica.winters .o-que-foi-desenvolvido {
  grid-column: 3/5;
}
#pratica.winters .aprendizados {
  grid-column: 5/-1;
}
#pratica.winters .desafios {
  grid-column: 1/4;
}
#pratica.winters .funcionamento-e-melhorias {
  grid-column: 4/-1;
}
#pratica.falta .conteudo-principal {
  grid-template-columns: repeat(6, 1fr);
}
#pratica.falta .motivacao {
  grid-column: 1/5;
}
#pratica.falta .o-que-foi-desenvolvido {
  grid-column: 5/-1;
}
#pratica.falta .relevancia {
  grid-column: 1/5;
}
#pratica.falta .aprendizados {
  grid-column: 5/-1;
}
#pratica.falta .desafios {
  grid-column: 1/3;
}
#pratica.falta .funcionamento-e-melhorias {
  grid-column: 3/-1;
}
#pratica.quimera .conteudo-principal {
  grid-template-columns: repeat(6, 1fr);
}
#pratica.quimera .motivacao {
  grid-column: 1/4;
}
#pratica.quimera .o-que-foi-desenvolvido {
  grid-column: 4/-1;
}
#pratica.quimera .relevancia {
  grid-column: 1/-1;
}
#pratica.quimera .aprendizados {
  grid-column: 1/3;
}
#pratica.quimera .desafios {
  grid-column: 3/5;
}
#pratica.quimera .funcionamento-e-melhorias {
  grid-column: 5/-1;
}
#pratica.uni-quatro .conteudo-principal {
  grid-template-columns: repeat(6, 1fr);
}
#pratica.uni-quatro .o-que-foi-desenvolvido {
  grid-column: 1/-1;
}
#pratica.uni-quatro .motivacao {
  grid-column: 1/4;
}
#pratica.uni-quatro .relevancia {
  grid-column: 4/-1;
}
#pratica.uni-quatro .aprendizados {
  grid-column: 1/3;
}
#pratica.uni-quatro .desafios {
  grid-column: 3/5;
}
#pratica.uni-quatro .funcionamento-e-melhorias {
  grid-column: 5/-1;
}
#pratica.parada .conteudo-principal {
  grid-template-columns: repeat(4, 1fr);
}
#pratica.parada .conteudo-principal.boxes--col-2 {
  grid-template-columns: repeat(1, 1fr);
}
#pratica.parada .boxes--col-2 {
  display: grid !important;
  grid-template-rows: repeat(2, auto) !important;
  row-gap: 4rem;
  grid-column: 1/3;
}
#pratica.parada .o-que-foi-desenvolvido {
  grid-column: 1/-1;
}
#pratica.parada .motivacao {
  grid-column: 1/3;
}
#pratica.parada .relevancia {
  grid-column: 3/-1;
}
#pratica.parada .funcionamento-e-melhorias {
  grid-column: 3/-1;
}
#pratica.parada .pdf .tag {
  margin-bottom: 3rem;
}
#pratica.parada .pdf div {
  width: 100%;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 0 !important;
}
#pratica.parada .iframe {
  width: 100%;
  height: 30rem;
  flex: 1;
}

/*# sourceMappingURL=styles.css.map */