@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* CORES */
  --verde: #128037;
  --verde-hover: #08451d;
  --roxo-medio: #332b80;
  --roxo-forte: #080055;
  --roxo-claro: #7822a9;
  --branco-romance: #fcfcfc;
  --lilas: #e9caff;
  --lilas-claro: #f4e4ff;
  --azul-claro: #99cccd;

  /* FONTES */
  --fonte-texto: "Sora", sans-serif;
}

body {
  font-family: var(--fonte-texto);
  background-color: var(--branco-romance);
}

h1 {
  font-size: 24px;
  font-weight: 400;
  color: var(--roxo-forte);
}

h2 {
  font-size: 18px;
  font-weight: 400;
  color: var(--roxo-forte);
}

h3 {
  font-size: 16px;
  font-weight: 400;
  color: var(--roxo-forte);
}

p {
  font-size: 14px;
  color: var(--roxo-forte);
}

li {
  font-size: 14px;
  color: var(--roxo-forte);
}

/* HEADER */

header {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.228);
  display: flex;
  position: sticky;
  width: 100%;
  z-index: 1000;
  padding: 11px 20px;
  justify-content: space-between;
  align-items: center;
  background-color: var(--branco-romance);
  top: -1px;
}

.box-nome-e-logo-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nome-logo-header {
  display: none;
}

.btn-header {
  display: block;
  color: white;
  background-color: var(--verde);
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 12px;
  transition:
    background-color 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.btn-header:hover {
  transform: scale(1.05);
  background-color: var(--verde-hover);
}

/* HERO SECTION */

.tit-hero {
  margin: 22px 20px;
}

.tit-hero-destaque {
  font-weight: 700;
}

.subtit-hero {
  font-size: 18px;
  margin: 32px 20px;
  color: var(--roxo-forte);
}

.btn-cta-hero {
  font-size: 14px;
  display: block;
  color: white;
  background-color: var(--verde);
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 12px;
  width: 170px;
  max-width: 250px;
  margin: 32px 20px 0px;
  text-align: center;
  transition:
    background-color 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.btn-cta-hero:hover {
  transform: scale(1.05);
  background-color: var(--verde-hover);
}

.box-img-hero {
  text-align: end;
  margin: 0;
  padding: 0;
}

.img-hero-mobile {
  position: relative;
  width: 90%;
  height: 90%;
}

.scroll-infinito {
  overflow: hidden;
  background: var(--azul-claro);
  padding: 8px 0;
  position: relative;
  top: -8px;
}

.marquee {
  display: flex;
  width: max-content;
}

.marquee span {
  white-space: nowrap;
  padding-right: 0.1em;
  color: #fff;
  font-size: 1em;
}

.problema {
  padding: 36px 20px;
}

.tit-problema {
  text-align: center;
  margin: 0px;
}

.tit-problema-destaque {
  font-weight: 700;
}

.text-problema {
  margin-top: 16px;
  text-align: center;
}

.text-problema-destaque {
  font-weight: 700;
}

.custom-shape-divider-top-1768677988 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1768677988 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 22px;
}

.custom-shape-divider-top-1768677988 .shape-fill {
  fill: #fcfcfc;
}

/** For mobile devices **/
@media (max-width: 767px) {
  .custom-shape-divider-top-1768677988 svg {
    width: calc(100% + 1.3px);
    height: 15px;
  }
}

.solucao {
  background: linear-gradient(180deg, #332b80 0%, #050034 100%);
  text-align: center;
  padding-bottom: 20px;
}

.tit-solucao {
  color: var(--branco-romance);
  font-size: 16px;
  margin-top: 36px;
}
.tit-solucao-destaque {
  font-weight: 700;
}

.box-dos-cards-solucao {
  margin-top: 24px;
}

.card-solucao {
  background-color: var(--branco-romance);
  padding: 18px 18px;
  margin: 0 auto 24px;
  border-radius: 16px;
  text-align: start;
  width: 80%;
  max-width: 360px;
}

.tit-card-solucao {
  font-weight: 700;
}

.desc-card-solucao {
  margin-top: 8px;
}

/* MENTORIA EXPRESS */

.card-mentoria {
  margin: 24px 20px;
  padding: 36px 24px;
  border-radius: 24px;
  background: radial-gradient(
    38.28% 40.57% at 50% 50%,
    #e9caff 0%,
    #e9caff 100%
  );
  box-shadow: 0px 11px 18px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.card-mentoria > ul {
  margin: 0px 20px;
}

.tit-mentoria {
  font-size: 24px;
  font-weight: 700;
}

.desc-mentoria {
  text-align: start;
  margin-top: 12px;
}

.tit-topicos-mentoria {
  text-align: start;
  font-weight: 700;
  margin-top: 12px;
  color: var(--roxo-forte);
}

.topicos-lista-mentoria,
.topicos-lista-mentoria2 {
  text-align: start;
  margin-top: 4px;
}

.link-saber-mais-mentoria {
  display: flex;
  width: 80%;
  max-width: 300px;
  border-radius: 8px;
  padding: 8px 4px;
  margin: 16px auto 0px;
  background-color: var(--branco-romance);
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--roxo-forte);
  text-decoration: none;
  transition: transform 0.2s ease-in-out;
}

.link-saber-mais-mentoria:hover {
  transform: scale(1.05);
}

/* NOSSOS SERVICOS */

.nossos-servicos {
  padding: 0px 0px 36px 0;
}

.tit-nossos-servicos {
  font-weight: 700;
  margin: 36px 0px 24px 10vw;
}

.card-nossos-servicos {
  padding: 28px 20px;
  border-radius: 32px;
  background: radial-gradient(50% 50% at 50% 50%, #4c43a4 0.56%, #332b80 100%);
  box-shadow: 2px 9px 10px rgba(0, 0, 0, 0.25);
  margin: 16px 20px 0px;
  display: flex;
  flex-direction: column;
}

.tit-card-nossos-servicos {
  color: var(--branco-romance);
  font-weight: 700;
}

.desc-nossos-servicos {
  color: var(--branco-romance);
  margin-top: 16px;
}

.card-nossos-servicos > ul {
  margin: 24px 20px;
}

.topicos-lista-nossos-servicos {
  color: var(--branco-romance);
  margin-top: 4px;
}

.box-link-saber-mais-nossos-servicos {
  margin-top: auto;
}

.link-saber-mais-nossos-servicos {
  display: flex;
  width: 80%;
  max-width: 300px;
  border-radius: 8px;
  padding: 8px 4px;
  margin: 16px auto 0px;
  background-color: var(--branco-romance);
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--roxo-forte);
  text-decoration: none;
  transition: transform 0.2s ease-in-out;
}

.link-saber-mais-nossos-servicos:hover {
  transform: scale(1.05);
}

/* CONSULTORIA E MENTORIAS */

.tit-consultoria-mentorias {
  font-weight: 700;
  margin: 24px 0px 0px 10vw;
}

.subtit-consultoria-mentorias {
  margin: 8px 20px 24px 10vw;
}

.img-consultorias-mentorias {
  border: 4px solid #332b80;
  border-left: none;
  border-radius: 0 24px 24px 0;
  width: 90vw;
  height: 100%;
}

.card-consultoria-mentorias {
  padding: 28px 20px;
  border-radius: 32px;
  background: radial-gradient(50% 50% at 50% 50%, #4c43a4 0.56%, #332b80 100%);
  box-shadow: 2px 9px 10px rgba(0, 0, 0, 0.25);
  margin: 16px 20px 0px;
  display: flex;
  flex-direction: column;
}

.tit-card-consultoria-mentorias {
  color: var(--branco-romance);
  font-weight: 700;
}

.desc-consultoria-mentorias {
  color: var(--branco-romance);
  margin-top: 16px;
}

.card-consultoria-mentorias > ul {
  margin: 24px 20px;
}

.topicos-lista-consultoria-mentorias {
  color: var(--branco-romance);
  margin-top: 4px;
}

.box-link-saber-mais-consultoria-mentorias {
  margin-top: auto;
}

.link-saber-mais-consultoria-mentorias {
  display: flex;
  width: 80%;
  max-width: 300px;
  border-radius: 8px;
  padding: 8px 4px;
  margin: 16px auto 0px;
  background-color: var(--branco-romance);
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--roxo-forte);
  text-decoration: none;
  transition: transform 0.2s ease-in-out;
}

.link-saber-mais-consultoria-mentorias:hover {
  transform: scale(1.05);
}

.text-final-consultoria-mentorias {
  text-align: center;
  margin: 32px 40px 32px 40px;
  font-size: 16px;
}
.text-final-consultoria-mentorias-destaque {
  font-weight: 700;
}

/* PROVA SOCIAL */
.prova-social {
  background: linear-gradient(180deg, #5249a4 0%, #40065a 100%);
  padding: 40px 20px;
  text-align: center;
}

.tit-prova-social {
  color: var(--branco-romance);
  font-size: 16px;
  margin-bottom: 32px;
}

/* CARROSSEL */
.carrossel-prova-social {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.viewport {
  overflow: hidden;
  width: 100%;
}

.track {
  display: flex;
  gap: 16px; /* espaçamento entre os cards */
  transition: transform 0.4s ease;
}

/* SLIDE (CARD DE TEXTO) */
.slide {
  flex: 0 0 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgb(255, 255, 255);
  border-radius: 14px;
  min-height: 260px;
  gap: 24px;
}

/* TEXTO DO DEPOIMENTO */
.texto-depoimento {
  font-size: 14px;
  line-height: 1.6;
  text-align: start;
}

/* META CLIENTE */
.meta-cliente {
  margin-top: 16px;
  text-align: center;
  color: var(--roxo-forte);
}

.nome-cliente {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.empresa-cliente {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}

/* BOTÕES */
.nav {
  background: transparent;
  border: none;
  width: 44px;
  height: 36px;
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

@keyframes navPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.nav.is-animating {
  animation: navPulse 0.35s ease;
}

.nav:active:not(:disabled) {
  transform: scale(0.9);
}

.nav:disabled {
  opacity: 0.3;
  cursor: default;
}

/* TABLET */
@media (min-width: 600px) {
  .slide {
    flex: 0 0 50%;
    min-height: 280px;
    max-width: 45%;
  }

  .texto-depoimento {
    font-size: 15px;
  }
}

/* DESKTOP */
@media (min-width: 1024px) {
  .slide {
    flex: 0 0 33.3333%;
    min-height: 300px;
    max-width: 30%;
  }

  .texto-depoimento {
    font-size: 15.5px;
  }
}

/* CTA FINAL */

.cta-final {
  padding: 24px 20px;
  text-align: center;
}

.tit-cta-final {
  font-weight: 700;
  font-size: 24px;
}

.text-cta-final {
  margin-top: 16px;
}

.btn-cta-final {
  font-size: 14px;
  display: flex;
  color: white;
  background-color: var(--verde);
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 12px;
  margin: 16px auto;
  width: 90%;
  max-width: 300px;
  text-align: center;
  transition:
    background-color 0.2s ease-in-out,
    transform 0.2s ease-in-out;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.btn-cta-final:hover {
  transform: scale(1.05);
  background-color: var(--verde-hover);
}

footer {
  background: linear-gradient(180deg, #0f0c2e 0%, #100017 100%);
  padding: 24px 20px;
  text-align: center;
}

.img-bola-logo-final {
  width: 70px;
  height: 70px;
}
.tit-logo-final {
  color: var(--branco-romance);
}
.subtit-logo-final {
  color: #fcfcfca9;
}

.redes-sociais-final {
  margin-top: 24px;
}

.box-link-instagram-final,
.box-link-whatsapp-final {
  display: flex;
  flex-direction: row;
}

.link-whatsapp-final {
  width: auto;
  margin: 0 auto;
  justify-content: center;
  display: flex;
  text-decoration: none;
  gap: 8px;
  align-items: center;
}

.link-instagram-final {
  width: auto;
  margin: 16px auto 4px;
  justify-content: center;
  display: flex;
  text-decoration: none;
  gap: 8px;
  align-items: center;
}

.text-whatsapp,
.text-instagram {
  color: var(--branco-romance);
}

.textos-finais {
  margin-top: 24px;
}

.desenvolvimento-por-clarti,
.copy-final {
  color: #fcfcfca9;
  font-size: 12px;
}

.link-final-clarti {
  color: #fcfcfca9;
}
.link-final-clarti:hover {
  color: #677bffe3;
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: var(--verde);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.whatsapp-float:hover {
  background: var(--verde-hover);
  transform: scale(1.1);
}

.whatsapp-float:active {
  transform: scale(0.95);
}

.whatsapp-icon {
  width: 32px;
  height: 32px;
}

/* RESPONSIVIDADE - 768PX */

@media (min-width: 768px) {
  header {
    padding: 11px 10vw;
  }

  .nome-logo-header {
    display: block;
  }

  .tit-hero {
    margin: 32px 10vw;
  }
  .subtit-hero {
    margin: 32px 10vw;
  }

  .btn-cta-hero {
    margin: 32px 10vw 0;
  }

  .img-hero-mobile {
    width: 70%;
    height: 70%;
  }

  .problema {
    padding: 24px 10vw;
  }

  .box-dos-cards-solucao {
    display: flex;
    margin: 32px 6vw 16px;
  }

  .card-solucao {
    width: 32%;
  }

  .mentoria {
    padding: 24px 0 0 0;
  }

  .box-card-mentoria {
    padding: 24px 10vw 0 10vw;
  }

  .card-mentoria {
    margin: 24px auto;
  }

  .nossos-servicos {
    margin: 0 10vw;
  }

  hr {
    margin: 0 10vw;
  }

  .box-dos-cards-consultoria-mentorias {
    margin: 0px 0px 24px 0;
  }

  .card-nossos-servicos,
  .card-consultoria-mentorias {
    width: 70%;
    margin: 24px auto;
  }

  .prova-social {
    padding: 32px 4px;
  }

  .text-cta-final {
    padding: 24px 20vw 24px;
  }
}

@media (min-width: 1024px) {
  .conteudo-hero {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
  }

  .box-tit-subtit-ctabtn {
    grid-area: 1 / 1 / 2 / 2;
  }
  .box-img-hero {
    grid-area: 1 / 2 / 2 / 3;
  }

  .tit-hero {
    margin: 12vh 0 7vh 10vw;
    font-size: 2em;
  }
  .subtit-hero {
    margin: 7vh 0 7vh 10vw;
    align-self: center;
    font-size: 1.3em;
  }
  .btn-cta-hero {
    margin: 7vh 10vw;
    max-height: 60px;
    align-self: center;
  }

  .box-img-hero {
    align-self: end;
  }

  .img-hero-mobile {
    width: 100%;
    height: auto;
  }

  .nossos-servicos {
    display: flex;
  }

  .tit-nossos-servicos {
    margin: 48px 0 4px 10vw;
  }
  .card-nossos-servicos {
    width: 45%;
  }

  .mentoria {
    padding: 24px 0 0 0;
  }

  .picture-consultorias-mentorias {
    display: block;
    width: 40vw;
    max-width: 576px;
    margin: 5vh 0px;
  }

  .box-dos-cards-consultoria-mentorias {
    margin: 0 10vw;
  }

  .card-consultoria-mentorias {
    width: 45%;
  }

  .card-mentoria {
    display: flex;
    flex-direction: column;
  }
  .box-img-e-cards-mentorias-consultorias {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .img-consultorias-mentorias {
    display: flex;
    width: 100%;
    max-width: 576px;
    max-height: 100%;
  }

  .box-img-consultorias-mentorias {
    max-width: 100%;
    max-height: 30%;
  }

  .card-consultoria-mentorias {
    width: 100%;
  }

  .text-cta-final {
    padding: 12px 20vw;
  }
}

@media (min-width: 1440px) {
  body {
    max-width: 1440px;
    margin: 0 auto;
  }
}