* {
  box-sizing: border-box !important;
}

html,
body,
header,
aside,
section,
main,
footer {
  min-width: 320px;
  width: 100%;
}

html,
body {
  min-height: 100vh;
  overflow-x: hidden;
}

header,
header > div:first-of-type,
header > div:first-of-type > h1 {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

header,
header > div:first-of-type {
  gap: 20px;
}

header > aside:first-of-type {
  padding: 15px 20px;
}

header > div:first-of-type {
  width: 100%;
  padding: 30px 30px 87px 30px;
}

header > div:first-of-type > h1 {
  gap: 30px;
}

/*colocar no mediaquery maximo, e rever os minimos*/
header > div:first-of-type > h1:first-of-type > img:first-of-type {
  width: 23%;
}

/*colocar no mediaquery maximo, e rever os minimos*/
header > div:first-of-type > img:first-of-type {
  width: 39%;
}

.flex-table {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: stretch;
  gap: 15px;
  width: fit-content;
  /*width: min(80%, 1100px);*/
  max-width: calc(64% + 40px);
  margin-top: -30px;
  margin-bottom: 20px;
  padding: 30px 30px 40px 30px;
}

.flex-table-column {
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

header > div:first-of-type > a:first-of-type {
  min-width: 37%;
}

.cta-button {
  /*max-width: 580px;*/
  padding: 20px;
}

section .cta-button {
  width: 100%;
}

section {
  display: flex;
  gap: 40px;
  padding: 40px;
}

main, footer {
  padding: 40px;
}

main {
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
}

section:first-of-type {
  padding-top: 87px;
}

section > div {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;

  width: 100%;
  max-width: 27%;
}

section > img {
  width: 27%;
}

#garantia > span:first-of-type a {
  min-width: 37%;
}

img {
  height: auto;
  display: inline-block;
}

.conteudo-imagem-esquerda,
.conteudo-imagem-direita {
  display: flex;
  align-items: center;
  justify-content: center;
}

.conteudo-imagem-esquerda {
  flex-flow: row-reverse wrap;
}

.conteudo-imagem-direita {
  flex-flow: row wrap;
}

#tabela-beneficios {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
  gap: 20px;
}

#tabela-beneficios > div {
  flex: 1 1 1;
}

#tabela-beneficios > div:not(:last-of-type) {
  align-self: stretch;
  min-width: calc(40% - 10px);
}

#tabela-beneficios > div:last-of-type span {
  color: darkolivegreen;
  font-size: 14px;
}

#tabela-beneficios > h1:first-of-type,
#tabela-beneficios > div:last-of-type {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex: 0 0 100%;
  margin: 0px;
}

#tabela-beneficios > div:last-of-type {
  min-width: 37%;
  padding-top: 30px;
  gap: 20px;
}

#tabela-beneficios > h1:first-of-type {
  margin-bottom: 10px;
}

#tabela-beneficios img {
  width: max(280px, 20%);
  border-radius: 50%;
  align-self: center;
}

.centralizar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: center;
}

#garantia > span:first-of-type {
  /*flex: 0 0 100%;
  display: flex;
  flex-flow: row column;*/
  width: 100%;
  max-width: 100% !important;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex: 0 0 100%;
  margin: 0px;
  margin-top: 10px;
  order: 3 !important;
  min-width: 37%;
}

details {
  min-width: calc(64% + 40px);
  width: calc(64% + 40px);
}

@media (min-width: 1267px) AND (max-width: 1593px) {
  .fundo-multicor div {
    max-width: 37%;
  }

  .fundo-multicor img {
    width: 37%;
  }

  .flex-table {
    min-width: calc(84% + 40px);
  }

  details {
    min-width: calc(84% + 40px);
  }
}

@media (min-width: 769px) and (max-width: 1266px) {
  .flex-table {
    max-width: 80%;
  }

  details {
    width: 80% !important;
  }

  header h1 img {
    width: 38%;
  }

  header > div:first-of-type > img:first-of-type {
    width: 47%;
  }

  .conteudo-imagem-esquerda,
  .conteudo-imagem-direita {
    flex-flow: column-reverse wrap;
  }

  section > * {
    /*width: 100%;*/
    max-width: 80% !important;
  }

  section > img {
    width: 100% !important;
  }

  #garantia > span:first-of-type {
    width: 100%;
    max-width: 80% !important;
  }
}

@media (max-width: 768px) {
  header > div:first-of-type > h1:first-of-type > img:first-of-type {
    width: 60%;
  }

  header > div:first-of-type > img:first-of-type {
    width: calc(100% - 20px);
  }

  .cta-button {
    width: calc(100% - 20px);
  }

  /*fazer a fonte mais responsiva, long beauty se fosse com fonte seria mais legal e o logo em svg*/

  .flex-table {
    max-width: 100%;
  }

  details {
    width: 100% !important;
    max-width: 100%;
  }

  .flex-table-column {
    flex: 1 1 1;
    min-width: calc(50% - 7.5px);
  }

  .fundo-multicor div,
  .fundo-multicor img {
    width: 100%;
    max-width: 100% !important;
  }

  .conteudo-imagem-esquerda,
  .conteudo-imagem-direita {
    flex-flow: column-reverse wrap;
  }

  #tabela-beneficios {
    display: flex;
    flex-flow: column nowrap;
  }

  #tabela-beneficios > div,
  #tabela-beneficios > div img {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    max-width: 100% !important;
  }

  #tabela-beneficios > div {
    width: 100%;
  }

  #tabela-beneficios > div:not(:last-of-type) {
    align-self: center;
  }

  .centralizar {
    justify-content: center;
  }

  #tabela-beneficios > h1:first-of-type,
  #tabela-beneficios > div:last-of-type {
    align-items: start !important;
  }

  #tabela-beneficios > h1:first-of-type {
    width: 100%;
    max-width: 100% !important;
  }

  #tabela-beneficios > div:last-of-type a {
    width: inherit !important;
    max-width: inherit !important;
  }

  details {
    width: calc(100% - 70px);
    max-width: 100% !important;
  }
}

@media (max-width: 1266px) {
  #garantia > span:first-of-type {
    order: inherit !important;
    align-items: start;
    margin-top: -20px;
  }
}

@media (min-width: 1267px) {
  #garantia > span:first-of-type a {
    width: fit-content !important;
    max-width: inherit !important;
  }
}

@media (max-width: 428px) {
  .cta-button {
    width: 100%;
  }
}

footer > h1:first-of-type {
  width: min-content;
  margin: auto;
  text-align: center;
  font-size: 77px;
}

footer {
  padding-top: 87px !important;
}

details {
  background-color: white;
  padding: 15px;
}

details {
  background-color: white;
  padding: 15px;
}

details summary {
  display: flex;
  align-items: baseline;
  justify-content: start;
  margin-bottom: -2px;
  color: maroon;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: "\25B6";
  font-size: 10px;
  margin-right: 5px;
  transition: transform 0.3s ease;
}

details[open] summary::before {
  content: "\25B2"; 
  transform: rotate(0deg);
}

details p {
  color: #080913;
  padding: 20px 0 0px 0;
}

details p:last-of-type {
  color: #080913;
  padding: 20px 0 5px 0;
}

footer {
  /*margin-bottom: 500px;*/
}

footer > div:first-of-type {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

details p {
  /*max-width: 800px;*/
}

/*fit content no ultimo la que tem que mostrar um a um*/