@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
html {
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: 0;
  background-color: #1c1f2a;
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  box-sizing: content-box;
}

a {
  text-decoration: none !important;
}

/* Estilize o canvas */
#canvas {
  border: 1px solid #ccc;
  margin-bottom: 20px;
  background-color: #f3eef0;
}

input[type=file] {
  margin: 10px;
  display: none; /* Oculta o input de arquivo */
}

label {
  width: 290px;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 10px 20px;
  color: #1c1f2a;
  background-color: #f2edf0;
  border: 1px solid #fa4a00;
  font-size: 16px;
  text-align: center;
  transition: all 300ms ease;
}
label:hover {
  color: #f2edf0;
  background-color: #fa4a00;
}

label i {
  margin-right: 8px;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.text-content {
  text-align: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.text-content p {
  color: #1c1f2a;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  max-width: 750px;
  margin: 30px auto;
  font-size: 20px;
  line-height: 120%;
  padding: 0 15px;
}

.whatsapp-button {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  fill: #000000;
  color: #000000;
  background-color: #fa4a00; /* Cor verde mais destacada */
  border: none;
  display: inline;
  text-align: center;
  text-decoration: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 10px;
}

.avatar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 30px;
  background-color: #1c1f2a;
}
.avatar .inputs {
  width: 320px;
  padding: 20px;
}

.controls {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.controls button {
  padding: 0;
  background-color: #f2edf0;
  color: #1c1f2a;
  border: 1px solid #f2edf0;
  font-size: 16px;
  transition: all 300ms ease;
  border-radius: 5px;
  margin: 0 3px;
}
.controls button svg {
  width: 35px;
  height: 35px;
}

input[type=text], textarea {
  background: transparent;
  border: none;
  font-size: 16px;
  color: #1c1f2a;
  width: 100%;
  margin-top: 20px;
  border: 1px solid #fa4a00;
  background-color: #f2edf0;
  padding: 5px;
  text-align: center;
}

.logo {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #000000;
  width: 100%;
  text-align: center;
}

.logo img {
  max-width: 100%;
  width: 300px;
}

.contamos {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #fa4a00;
  width: 100%;
  text-align: center;
}

.contamos h4 {
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
}

#downloadBtn, #downloadJpgBtn {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  fill: #f2edf0;
  color: #f2edf0;
  background-color: #fa4a00; /* Cor verde mais destacada */
  border: 1px solid #fa4a00;
  display: inline;
  text-align: center;
  text-decoration: none;
  padding: 10px;
  cursor: pointer;
  margin: 20px 0 0 0;
  transition: all 300ms ease;
}
#downloadBtn:hover, #downloadJpgBtn:hover {
  color: #1c1f2a;
  background-color: #f2edf0;
  border: 1px solid #fa4a00;
}

#shareJpgBtn {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  fill: #f2edf0;
  color: #f2edf0;
  background-color: #fa4a00; /* Cor verde mais destacada */
  border: 1px solid #fa4a00;
  display: inline;
  text-align: center;
  text-decoration: none;
  padding: 10px;
  cursor: pointer;
  margin: 20px 0 0 0;
  transition: all 300ms ease;
}
#shareJpgBtn:hover {
  color: #1c1f2a;
  background-color: #f2edf0;
  border: 1px solid #fa4a00;
}

.topo {
  background-color: #1c1f2a;
  padding: 20px 0;
  width: 100%;
  overflow-x: hidden;
  box-sizing: content-box;
  max-width: 100%;
  text-align: center;
}
.topo img {
  max-width: 280px;
  margin: 0 auto 30px auto;
}
.topo h3 {
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 48px;
  color: #f2edf0;
  margin-bottom: 0;
  font-weight: 600;
  text-align: center;
  line-height: 100%;
}
.topo h2 {
  font-family: "Inter", sans-serif;
  color: #ff4a00;
  font-size: 26px;
  margin: 0 0 30px 0;
  font-weight: 600;
  text-align: center;
}
.topo h2 span {
  color: #f2edf0;
}

.foto {
  width: 100%;
  position: relative;
}
.foto h3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  z-index: 2;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 138px;
  color: #ff4a00;
  margin-bottom: 0;
  font-weight: 700;
  text-align: center;
  line-height: 74%;
}
.foto img {
  width: 100%;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}

.texto {
  width: 100%;
  background-color: #30333d;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}
.texto p {
  text-align: center;
  color: #f2edf0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  max-width: 100%;
  font-size: 19px;
  line-height: 130%;
  margin-bottom: 0;
}

.quem {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fa4a00;
  padding: 10px 30px;
  width: 100%;
  overflow-x: hidden;
  box-sizing: content-box;
  max-width: 100%;
}
.quem .translate {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
}
.quem h3 {
  font-family: "Inter", sans-serif;
  color: #f2edf0;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0;
  line-height: 150%;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}
.quem h2 {
  font-family: "Inter", sans-serif;
  color: #f2edf0;
  font-size: 52px;
  line-height: 95%;
  font-weight: 700;
  margin: 0 0 20px 0;
  font-family: "Inter", sans-serif;
}
.quem h4 {
  font-family: "Inter", sans-serif;
  color: #1c1f2a;
  font-size: 20px;
  text-transform: uppercase;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}
.quem h4 span {
  font-family: "Inter", sans-serif;
  color: #1c1f2a;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0;
  line-height: 150%;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

.conselho {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: #1c1f2a;
  padding: 10px 30px;
  width: 100%;
  overflow-x: hidden;
  box-sizing: content-box;
  max-width: 100%;
}
.conselho .translate {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
}
.conselho h2 {
  font-family: "Inter", sans-serif;
  color: #fa4a00;
  font-size: 52px;
  line-height: 95%;
  margin: 0 0 10px 0;
  font-weight: 700;
}
.conselho h4 {
  font-family: "Inter", sans-serif;
  color: #f2edf0;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0;
  line-height: 150%;
  font-weight: 700;
}

.faixa {
  padding: 30px 30px;
  margin-top: 50px;
  width: 100%;
  background-color: #fa4a00;
  overflow-x: hidden;
  text-align: center;
}
.faixa a {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  fill: #f2edf0;
  color: #f2edf0;
  background-color: #1c1f2a; /* Cor verde mais destacada */
  border: none;
  display: inline;
  text-align: center;
  text-decoration: none;
  padding: 10px;
  cursor: pointer;
  margin: 0 10px;
  transition: all 300ms ease;
}
.faixa a:hover {
  color: #1c1f2a;
  background-color: #f2edf0;
}

.redes {
  width: 100%;
  background-color: #1c1f2a;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}
.redes > div a {
  font-family: "Inter", sans-serif;
  display: inline-block;
  cursor: pointer;
  text-transform: uppercase;
  padding: 5px 20px;
  background-color: #fa4a00;
  color: #f2edf0;
  border: 1px solid #fa4a00;
  font-size: 16px;
  transition: all 300ms ease;
  margin: 10px 0 20px 0;
  border-radius: 5px;
  text-decoration: none !important;
  font-weight: 700;
}
.redes > div a:hover {
  color: #1c1f2a;
  background-color: #f2edf0;
  border: 1px solid #f2edf0;
}
.redes a {
  text-decoration: none !important;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
}

.laranja {
  background-color: #ff4a00;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
}
.laranja p {
  text-align: center;
  color: #f2edf0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  max-width: 100%;
  font-size: 19px;
  line-height: 130%;
  margin-bottom: 0;
}

.modelos {
  width: 100%;
  background-color: #5e6166;
  padding-top: 50px;
  padding-bottom: 50px;
}
.modelos img {
  width: 100%;
  margin-bottom: 30px;
}

/* Small devices (smartphones, 480px ld or 320px pt and up) */
/* Small devices (smartphones, 480px ld or 320px pt and up) */
@media (min-width: 360px) and (orientation: portrait) {
  .topo h2 {
    font-size: 32px;
  }
}
@media (min-width: 384px) and (orientation: portrait) {
  .topo h2 {
    font-size: 34px;
  }
}
@media (min-width: 414px) and (orientation: portrait) {
  .topo h2 {
    font-size: 38px;
  }
  .conselho h2 {
    font-size: 54px;
  }
}
/* Small devices (tablets pt, 768px and up) */
@media (min-width: 768px) {
  .controls button svg {
    width: 40px;
    height: 40px;
  }
  .avatar .inputs {
    width: 330px;
    padding: 20px;
  }
  .topo img {
    max-width: 100%;
    margin: 0 auto;
  }
  .topo h2 {
    margin: 0;
    font-size: 20px;
  }
  .quem .translate {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 auto;
  }
  .quem h3 {
    width: 100%;
    text-align: center;
    color: #f2edf0;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0;
    line-height: 150%;
  }
  .quem h2 {
    font-size: 50px;
    margin: 0 10px;
    width: 100%;
    text-align: center;
  }
  .conselho .translate {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 auto;
  }
  .conselho h2 {
    font-size: 44px;
    margin: 0 20px 0 0;
    width: 100%;
    text-align: center;
  }
  .conselho h4 {
    width: 100%;
    text-align: center;
  }
}
@media (min-width: 981px) {
  .topo img {
    max-width: 300px;
    margin: 0;
  }
  .topo h2 {
    text-align: right;
    margin: 0;
    font-size: 26px;
  }
  .foto h3 {
    font-size: 155px;
  }
  .foto img {
    height: 113px;
  }
  .quem .translate {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    margin: 0 auto;
    transform: translateX(50px);
  }
  .quem h2 {
    font-size: 52px;
    margin: 0 20px;
    width: auto;
    text-align: unset;
  }
  .quem h3 {
    width: auto;
    text-align: unset;
  }
  .conselho .translate {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    margin: 0 auto;
    transform: translateX(80px);
  }
  .conselho h2 {
    margin: 0 20px;
    font-size: 52px;
    width: auto;
    text-align: unset;
  }
  .conselho h4 {
    width: auto;
    text-align: unset;
  }
  .texto p {
    max-width: 750px;
    font-size: 20px;
    line-height: 120%;
  }
  .modelos img {
    margin-bottom: 0;
  }
  .modelos .mod1 {
    margin-bottom: 30px;
  }
  .modelos .mod1 img {
    margin-bottom: 0;
  }
}
/* Medium devices (desktops and tablets ld, 992px and up) */
/* Large devices (large desktops, 1200px and up) */
@media all and (min-width: 1200px) {
  .avatar {
    display: flex;
    align-items: center;
  }
  .avatar .inputs {
    width: 320px;
    padding: 0 0 0 30px;
  }
}/*# sourceMappingURL=style.css.map */