:root {
  --pérola-a: #dbd5d3;
  --marrom-a: #424040;
  --pérola-b: #686565;
  --pérola-a-75: #dbd5d3bf;
  --marrom-c-75: #252424bf;
  --marrom-c: #252424;
  --sombra: #0000004d;
  --rosa: #d6374c;
  --laranja: #eb7235;
  --transparente: transparent;
  --marrom-b: #313030;
  --marrom-a-50: #42404080;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

a {
  color: var(--pérola-a);
  text-decoration: none;
}

.corpo {
  background-color: var(--marrom-a);
  color: var(--pérola-a);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  font-family: Exo, sans-serif;
  line-height: 1.5;
  display: flex;
}

.quem-somos---grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.quem-somos---panel-1 {
  border: 1px solid var(--pérola-b);
  border-radius: 8px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.quem-somos---panel-2 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.small-title {
  color: var(--pérola-a-75);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.small-title.escuro {
  color: var(--marrom-c-75);
}

.big-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.big-title.escuro {
  color: var(--marrom-c);
}

.paragraph {
  margin-bottom: 0;
}

.paragraph.escuro {
  color: var(--marrom-c-75);
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.paragraph.light {
    color: var(--pérola-a-75);
}

.quem-somos---image {
  z-index: 2;
  height: 127%;
  position: absolute;
}

.quem-somos---decorative-buttons {
  z-index: 1;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  position: absolute;
}

.quem-somos---decorative-button {
  background-color: var(--pérola-b);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  border-radius: 4px;
  width: 15px;
  height: 15px;
}

.highlight {
  z-index: 3;
  background-image: linear-gradient(333deg, var(--rosa), var(--laranja) 80%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.dark-button {
  border: 1px solid var(--pérola-b);
  background-color: var(--marrom-c);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
}

.dark-button:hover {
  border-color: var(--laranja);
  box-shadow: 0 0 20px -5px var(--laranja);
}

.dark-button:active {
  color: var(--laranja);
}

.modelos---grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.modelos---panel-1 {
  border: 1px solid var(--marrom-c-75);
  border-radius: 8px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.modelos---panel-2 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.modelos---decorative-buttons {
  z-index: 1;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  position: absolute;
}

.modelos---image {
  z-index: 2;
  height: 121%;
  position: absolute;
}

.modelos---decorative-button {
  background-color: var(--marrom-c-75);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  border-radius: 4px;
  width: 15px;
  height: 15px;
}

.orange-button {
  border: 1px solid var(--laranja);
  background-color: var(--marrom-c);
  background-image: linear-gradient(333deg, var(--rosa), var(--laranja));
  box-shadow: 5px 5px 10px -5px var(--sombra);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
}

.orange-button:hover {
  border-color: var(--laranja);
  background-image: linear-gradient(333deg, var(--rosa), var(--laranja) 50%);
  box-shadow: 0 0 20px -5px var(--laranja);
}

.orange-button:active {
  color: var(--marrom-c);
}

.contato---grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.contato---panel-1 {
  border: 1px solid var(--pérola-a-75);
  border-radius: 8px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.contato---panel-2 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.contato---image {
  z-index: 2;
  height: 129%;
  position: absolute;
}

.contato---decorative-buttons {
  z-index: 1;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  position: absolute;
}

.contato---decorative-button {
  background-color: var(--pérola-a-75);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  border-radius: 4px;
  width: 15px;
  height: 15px;
}

.light-button {
  border: 1px solid var(--pérola-a);
  background-color: var(--pérola-a-75);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  color: var(--marrom-c);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
}

.light-button:hover {
  color: var(--marrom-c);
  border-color: var(--laranja);
  background-color: var(--pérola-a);
  box-shadow: 0 0 20px -5px var(--laranja);
}

.light-button:active {
  color: var(--laranja);
}

.rodap---panel-1 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.rodap---panel-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.rodap---panel-3 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: right;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.logo {
  height: 40px;
}

.svg-icon {
  max-width: 1.2rem;
  max-height: 1.2rem;
}

.social-button {
  border: 1px solid var(--pérola-b);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  color: var(--pérola-a);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
  display: flex;
  line-height: 1.25;
}

.social-button:hover {
  color: var(--pérola-a);
  border-color: var(--laranja);
  box-shadow: 0 0 20px -5px var(--laranja);
  transform: translate(0, -2px);
}

.social-button:active {
  color: var(--laranja);
}

.benef-cios---grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  display: grid;
}

.benef-cios---panel-1 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: column;
  display: flex;
}

.benef-cios---panel-2 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.benef-cios---card {
  border: 1px solid var(--pérola-a);
  background-color: var(--pérola-a-75);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  color: var(--marrom-c);
  text-align: center;
  border-radius: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
  display: flex;
}

.benef-cios---card:hover {
  color: var(--marrom-c);
  border-color: var(--laranja);
  box-shadow: 0 0 20px -5px var(--laranja);
  transform: translate(0, -2px);
}

.benef-cios---card:active {
  color: var(--laranja);
}

.benef-cios---card.laranja {
  border-color: var(--laranja);
  background-image: linear-gradient(333deg, var(--rosa), var(--laranja) 80%);
  color: var(--pérola-a);
}

.benef-cios---card.laranja:active {
  background-image: linear-gradient(333deg, var(--rosa), var(--laranja) 60%);
}

.card-title {
  color: var(--marrom-c);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 0;
}

.benef-cios---icon {
  border: 1px solid var(--marrom-c);
  background-color: var(--marrom-c);
  border-radius: 50%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-width: 60px;
  max-width: 60px;
  min-height: 60px;
  max-height: 60px;
  margin-bottom: 20px;
  display: flex;
}

.recursos---grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start;
  width: 100%;
  display: grid;
  position: relative;
}

.recursos---panel-1 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 110px;
}

.recursos---panel-2 {
  width: 100%;
  height: 100%;
}

.recursos---collection {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.recursos---card {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border: 1px solid var(--pérola-a);
  background-color: var(--pérola-a-75);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  color: var(--marrom-c);
  text-align: center;
  border-radius: 8px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
  display: flex;
}

.recursos---card:hover {
  border-color: var(--laranja);
  box-shadow: 0 0 20px -5px var(--laranja);
  transform: translate(2px);
}

.recursos---card:active {
  color: var(--laranja);
}

.recursos---list {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
}

.recursos---icon {
  border: 1px solid var(--marrom-c);
  background-color: var(--marrom-c);
  border-radius: 50%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-width: 60px;
  max-width: 60px;
  min-height: 60px;
  max-height: 60px;
  display: flex;
}

.icon {
  min-width: 20px;
  max-width: 20px;
  min-height: 20px;
  max-height: 20px;
}

.recursos---text {
  border-left: 2px dotted var(--pérola-b);
  text-align: left;
  width: 100%;
  height: 100%;
  padding-left: 20px;
}

.list-button {
  border: 1px solid var(--pérola-b);
  background-color: var(--marrom-c);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  text-align: center;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: 8px;
  width: 100%;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
  display: none;
}

.list-button:hover {
  border-color: var(--laranja);
  background-color: var(--marrom-a);
  box-shadow: 0 0 20px -5px var(--laranja);
}

.list-button:active {
  color: var(--laranja);
}

.faq---grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: grid;
}

.faq---panel-1 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: column;
  display: flex;
}

.faq---panel-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: center;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.faq---card {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border: 1px solid var(--pérola-a);
  background-color: var(--pérola-a-75);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  color: var(--marrom-c);
  text-align: center;
  border-radius: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
  display: flex;
}

.faq---card:hover {
  color: var(--marrom-c);
  border-color: var(--laranja);
  box-shadow: 0 0 20px -5px var(--laranja);
}

.faq---card:active {
  color: var(--laranja);
}

.faq---question {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.faq---answer {
  text-align: center;
  align-self: center;
  width: 100%;
  display: none;
}

.footer---section {
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  margin-top: auto;
  display: flex;
}

.modelos---animation {
  z-index: 1;
  perspective: 1000px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.modelos---animation---grid {
  grid-column-gap: .8vw;
  grid-row-gap: .8vw;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.modelos---animation---image {
  box-shadow: 5px 5px 10px -5px var(--sombra);
  border-radius: .3vw;
}

.modelos---animation---gradient {
  background-image: linear-gradient(180deg, var(--transparente), var(--marrom-c));
  width: 100%;
  height: 100%;
  position: absolute;
}

.rodap---section {
  background-color: var(--marrom-c);
  flex-flow: column;
  width: 100%;
  display: flex;
}

.rodap---grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

.contato---section {
  border-top: 1px solid var(--laranja);
  border-bottom: 1px solid var(--laranja);
  background-image: linear-gradient(333deg, var(--rosa), var(--laranja));
  flex-flow: column;
  width: 100%;
  display: flex;
}

.contato---container {
  width: 100%;
  max-width: 1200px;
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 20px;
}

.contato---buttons {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.faq---section {
  background-color: var(--marrom-c);
  flex-flow: column;
  width: 100%;
  display: flex;
}

.faq---container {
  width: 100%;
  max-width: 1200px;
  margin-top: 0;
  margin-bottom: 80px;
  padding: 20px;
}

.modelos---section {
  z-index: 0;
  border-top: 1px solid var(--pérola-b);
  background-color: var(--marrom-b);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.modelos---container {
  z-index: 2;
  border: 1px solid var(--pérola-a);
  background-color: var(--pérola-a);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  border-radius: 8px;
  width: 100%;
  max-width: 1200px;
  margin-top: auto;
  margin-bottom: auto;
  padding: 20px;
  position: absolute;
  inset: auto 0;
}

.modelos---buttons {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.recursos---section {
  border-top: 1px solid var(--pérola-b);
  background-color: var(--marrom-a);
  flex-flow: column;
  width: 100%;
  display: flex;
}

.recursos---container {
  width: 100%;
  max-width: 1200px;
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 20px;
}

.benef-cios---section {
  border-top: 1px solid var(--pérola-b);
  background-color: var(--marrom-b);
  flex-flow: column;
  width: 100%;
  display: flex;
}

.benef-cios---container {
  max-width: 1200px;
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 20px;
}

.quem-somos---section {
  border-top: 1px solid var(--pérola-b);
  background-color: var(--marrom-c);
  flex-flow: column;
  width: 100%;
  display: flex;
}

.quem-somos---container {
  max-width: 1200px;
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 20px;
}

.menu---section {
  border-bottom: 1px solid var(--pérola-b);
  background-color: var(--marrom-a-50);
  background-image: linear-gradient(180deg, var(--marrom-c), var(--transparente)), linear-gradient(180deg, var(--marrom-c), var(--transparente));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  min-height: 80px;
  max-height: 80px;
  display: flex;
  position: fixed;
}

.menu---container {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.menu---logo---link {
  z-index: 2;
  margin-right: auto;
  position: relative;
}

.menu---link-box {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--rosa);
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}

.menu---link {
  border-top: 2px solid var(--transparente);
  border-bottom: 2px solid var(--transparente);
  color: var(--pérola-a);
  padding: 0;
  font-weight: 500;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
}

.menu---link:hover {
  border-bottom-color: var(--laranja);
}

.menu---link:active {
  color: var(--laranja);
}

.menu---button {
  border: 1px solid var(--laranja);
  background-image: linear-gradient(333deg, var(--rosa), var(--laranja) 90%);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  color: var(--pérola-a);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  height: 32px;
  padding: 5px 10px;
  font-weight: 500;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
  display: flex;
}

.menu---button:hover {
  background-image: linear-gradient(333deg, var(--rosa), var(--laranja) 50%);
  box-shadow: 0 0 20px -5px var(--laranja);
}

.menu---button:active {
  color: var(--marrom-c);
}

.rodap---logo---link {
  margin-right: auto;
}

.dark-screen {
  z-index: 1;
  background-color: #222121;
  width: 100vw;
  height: 0;
  margin-top: 0;
  position: fixed;
  inset: 0%;
}

.blog---section {
  background-color: var(--marrom-b);
  width: 100%;
}

.blog---container {
  width: 100%;
  max-width: 1200px;
  margin-top: 80px;
  margin-bottom: 0;
  padding: 20px;
}

.blog---grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  display: grid;
}

.blog---panel {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: column;
  display: flex;
}

.blog---panel-2 {
  width: 100%;
}

.blog---collection-list {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  display: flex;
}

.blog---content-box {
  color: var(--marrom-c-75);
  text-align: center;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 135px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.blog---collection {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.blog---card {
  border: 1px solid var(--pérola-b);
  background-color: var(--pérola-a);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  border-radius: 8px;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 100px;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.blog---image-box {
  z-index: 1;
  object-fit: cover;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.blog---image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.blog---image-hue-filter {
  z-index: 1;
  background-color: var(--laranja);
  mix-blend-mode: hue;
  width: 100%;
  height: 100%;
  position: absolute;
}

.blog---image-gradient {
  z-index: 2;
  background-image: linear-gradient(180deg, var(--transparente) 66.6%, var(--pérola-a)), linear-gradient(180deg, var(--transparente) 33.3%, var(--pérola-a));
  width: 100%;
  height: 100%;
  position: absolute;
}

.card-date {
  color: var(--laranja);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}

.blog---title-box {
  z-index: 2;
  color: var(--marrom-c-75);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90px;
  margin-top: -40px;
  padding: 20px;
  display: flex;
  position: relative;
}

.blog---button {
  border: 1px solid var(--marrom-c);
  background-color: var(--marrom-c);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-top: 40px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
}

.blog---button:hover {
  z-index: 2;
  border-color: var(--laranja) var(--laranja) var(--marrom-c);
  box-shadow: 0 0 20px -5px var(--laranja);
  position: relative;
}

.blog---button:active {
  color: var(--laranja);
}

.header---section {
  aspect-ratio: auto;
  background-color: var(--marrom-b);
  width: 100%;
  height: 100vh;
}

.header---slider {
  width: 100%;
  height: 100%;
}

.header---background-video {
  z-index: 2;
  opacity: .5;
  flex-flow: column;
  width: 100%;
  height: 100%;
}

.header---video-filter {
  background-color: var(--laranja);
  mix-blend-mode: hue;
  width: 100%;
  height: 100%;
  position: absolute;
}

.header---video-gradient {
  z-index: 3;
  background-image: linear-gradient(180deg, var(--transparente), var(--marrom-b)), linear-gradient(180deg, var(--transparente), var(--marrom-b));
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.slide {
  z-index: 1;
  background-color: var(--marrom-a);
}

.header---slider-mask {
  background-color: var(--marrom-b);
}

.header---left-arrow, .header---right-arrow {
  justify-content: center;
  align-items: center;
  display: flex;
}

.header---slider-icon {
  opacity: .5;
  max-width: 1.5rem;
  max-height: 1.5rem;
}

.header---slider-nav {
  mix-blend-mode: overlay;
}

.header---container {
  z-index: 4;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: auto;
  display: flex;
  position: absolute;
  inset: 0%;
}

.header-title {
  text-transform: uppercase;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.header-title.escuro {
  color: var(--marrom-c);
}

.blog---decorative-buttons {
  z-index: 1;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  position: absolute;
}

.blog---decorative-button {
  border: 1px solid var(--pérola-a-75);
  background-color: var(--transparente);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  border-radius: 4px;
  width: 15px;
  height: 15px;
}

.icon-button {
  border: 1px solid var(--marrom-a);
  background-color: var(--marrom-c);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  display: flex;
  line-height: 1.25;
}

.icon-button:hover {
  border-color: var(--laranja);
  box-shadow: 0 0 20px -5px var(--laranja);
  color: #dddddd;
}

.icon-button:active {
  color: var(--laranja);
}

.text-block {
  padding-left: 10px;
}

.header-button {
  border: 1px solid var(--pérola-b);
  background-color: var(--marrom-c);
  box-shadow: 5px 5px 10px -5px var(--sombra);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s cubic-bezier(.455, .03, .515, .955);
}

.header-button:hover {
  border-color: var(--laranja);
  box-shadow: 0 0 20px -5px var(--laranja);
}

.header-button:active {
  color: var(--laranja);
}

@media screen and (max-width: 991px) {
  .quem-somos---image {
    height: 105%;
  }

  .modelos---image {
    height: 110%;
  }

  .contato---image {
    height: 112%;
  }

  .modelos---animation {
    height: 50vw;
    position: static;
  }

  .faq---container {
    margin-top: 80px;
  }

  .modelos---container {
    box-shadow: none;
    border-radius: 0;
    position: static;
  }

  .menu---link-box {
    z-index: 2;
    margin-top: 1px;
  }

  .menu---link {
    border-top-width: 1px;
    border-top-color: var(--pérola-b);
    border-bottom-width: 1px;
    border-bottom-color: var(--pérola-b);
    background-color: var(--marrom-c);
    justify-content: center;
    align-items: center;
    margin-top: -1px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
  }

  .menu---link:hover {
    z-index: 1;
    border-top-color: var(--laranja);
    border-bottom-color: var(--laranja);
  }

  .menu---button {
    border-width: 1px 0;
    border-top-color: var(--pérola-b);
    border-bottom-color: var(--pérola-b);
    background-color: var(--marrom-c);
    box-shadow: none;
    background-image: none;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: -1px;
    padding: 10px 0;
    display: flex;
  }

  .menu---button:hover {
    border-top-color: var(--laranja);
    border-bottom-color: var(--laranja);
    box-shadow: none;
    background-image: none;
  }

  .menu---button:active {
    color: var(--laranja);
  }

  .menu-button {
    z-index: 2;
    border: 1px solid var(--pérola-b);
    background-color: var(--transparente);
    box-shadow: 5px 5px 10px -5px var(--sombra);
    border-radius: 8px;
  }

  .menu-button.w--open {
    border: 1px solid var(--pérola-b);
    background-color: var(--marrom-c);
    box-shadow: 5px 5px 10px -5px var(--sombra);
    border-radius: 8px;
  }

  .menu-button.w--open:hover {
    border-color: var(--laranja);
    box-shadow: 0 0 20px -5px var(--laranja);
  }

  .menu-button.w--open:active {
    color: var(--laranja);
  }

  .dark-screen {
    background-color: var(--marrom-c);
  }

  .icon-button {
    border-width: 1px 0;
    border-top-color: var(--pérola-b);
    border-bottom-color: var(--pérola-b);
    box-shadow: none;
    border-radius: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-top: -1px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .icon-button:hover {
    z-index: 1;
    box-shadow: none;
    position: relative;
  }
}

@media screen and (max-width: 767px) {
  .quem-somos---grid {
    grid-template-columns: 1fr;
  }

  .quem-somos---panel-1 {
    justify-content: center;
    align-items: center;
    min-height: 35px;
  }

  .quem-somos---panel-2 {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .quem-somos---image {
    display: none;
  }

  .quem-somos---decorative-buttons {
    min-height: 35px;
  }

  .dark-button {
    width: 100%;
  }

  .modelos---grid {
    grid-template-columns: 1fr;
  }

  .modelos---panel-1 {
    justify-content: center;
    align-items: center;
    min-height: 35px;
  }

  .modelos---panel-2 {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .modelos---decorative-buttons {
    min-height: 35px;
  }

  .modelos---image {
    display: none;
  }

  .orange-button {
    width: 100%;
  }

  .contato---grid {
    grid-template-columns: 1fr;
  }

  .contato---panel-1 {
    justify-content: center;
    align-items: center;
    min-height: 35px;
  }

  .contato---panel-2 {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .contato---image {
    display: none;
  }

  .contato---decorative-buttons {
    min-height: 35px;
  }

  .light-button {
    width: 100%;
  }

  .rodap---panel-1 {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .rodap---panel-2 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .rodap---panel-3 {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .benef-cios---panel-2 {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .recursos---grid {
    grid-template-columns: 1fr;
  }

  .recursos---panel-1 {
    text-align: center;
    justify-content: center;
    align-items: center;
    position: static;
  }

  .recursos---card:hover {
    transform: translate(0, -2px);
  }

  .list-button {
    width: 100%;
    display: block;
  }

  .faq---panel-2 {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .rodap---grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .rodap---logo---link {
    margin-left: auto;
  }

  .blog---collection-list {
    flex-flow: column;
    padding-left: 20px;
    padding-right: 20px;
  }

  .blog---card {
    margin-bottom: 0;
  }

  .header-title {
    font-size: 32px;
  }

  .blog---decorative-buttons {
    min-height: 35px;
  }
}

@media screen and (max-width: 479px) {
  .recursos---card {
    flex-flow: column;
  }

  .recursos---text {
    text-align: center;
    border-left-style: none;
    border-left-width: 0;
    padding-left: 0;
  }

  .contato---buttons, .modelos---buttons {
    flex-flow: column;
  }

  .header---left-arrow, .header---right-arrow {
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 30px;
  }
}

.assista-button {
  color: #fff;
  border: 1px solid var(--pérola-a);
  background-color: var(--laranja);
  background-image: linear-gradient(333deg, var(--rosa), var(--laranja));
  box-shadow: 5px 5px 10px -5px var(--sombra);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  position: absolute;
  left: -25px;
  bottom: 0;
  transition: .4s all;
}

.div-assista:hover {
  .assista-button {
    border: 1px solid var(--laranja);
    transform: scale(1.25);
    transition: .4s all;
  }
}

/*recursos*/
.interna---recursos---container {
    flex-flow: column;
    width: 100%;
    max-width: 1200px;
    margin-top: 110px;
    margin-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
}
.interna---recursos---collection-item {
    flex-flow: column;
    width: 100%;
    padding: 0;
    display: flex;
}
.interna---recursos---card {
    border: 1px solid var(--pérola-a);
    background-color: var(--pérola-a-75);
    box-shadow: 5px 5px 10px -5px var(--sombra);
    color: var(--marrom-c-75);
    text-align: center;
    border-radius: 8px;
    padding: 20px;
    transition: all .2s cubic-bezier(.455, .03, .515, .955);
    min-height: 220px;
}
.interna---recursos---card:hover {
    color: var(--marrom-c);
    border-color: var(--laranja);
    box-shadow: 0 0 20px -5px var(--laranja);
    transform: translate(0, -2px);
}
.interna---recursos---icon {
    border: 1px solid var(--marrom-c);
    background-color: var(--marrom-c);
    border-radius: 50%;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    min-width: 60px;
    max-width: 60px;
    min-height: 60px;
    max-height: 60px;
    margin-bottom: 20px;
    display: flex;
}

/*modelos*/
.interna---modelos---text-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    border: 1px solid var(--pérola-a);
    background-color: var(--pérola-a-75);
    border-radius: 8px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
}
.orange-button {
    border: 1px solid var(--laranja);
    background-color: var(--marrom-c);
    background-image: linear-gradient(333deg, var(--rosa), var(--laranja));
    box-shadow: 5px 5px 10px -5px var(--sombra);
    letter-spacing: 1.1px;
    text-transform: uppercase;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all .2s cubic-bezier(.455, .03, .515, .955);
}
.orange-button:hover {
    border-color: var(--laranja);
    background-image: linear-gradient(333deg, var(--rosa), var(--laranja) 50%);
    box-shadow: 0 0 20px -5px var(--laranja);
}
.caps-title {
    color: var(--marrom-c);
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}