@font-face {
  font-family: "Montserrat Fallback";
  font-weight: 400;
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("Roboto");
  size-adjust: 111.8%;
  ascent-override: 86.58%;
  descent-override: 22.45%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Fallback";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Arial");
  size-adjust: 107.34%;
  ascent-override: 90.18%;
  descent-override: 23.38%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Arial");
  size-adjust: 109.23%;
  ascent-override: 88.62%;
  descent-override: 22.98%;
  line-gap-override: 0%;
}

:root {
  --bg-body: #07040d;
  --bg-elevado: #150c29;
  --bg-card: #1c1233;
  --violeta: #8b5cf6;
  --violeta-claro: #a78bfa;
  --roxo-medio: #4b2e8c;
  --lavanda: #b9a2f5;
  --texto-titulo: #f5f3fa;
  --texto-corpo: #c3b8da;
  --texto-secundario: #8b7fa8;
  --borda: rgba(255, 255, 255, 0.08);

  --violeta-acao: #7c3aed;
  --violeta-acao-hover: #8457f1;
  --whatsapp: #25d366;

  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;
  --esp-9: 88px;

  --raio-sm: 10px;
  --raio-md: 16px;
  --raio-lg: 24px;
  --raio-pill: 999px;

  --largura: 1120px;
  --largura-cabecalho: 1400px;
  --medida-hero: 820px;
  --header-h: 64px;
  --fonte: "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sombra-botao: 0 8px 24px rgba(124, 58, 237, 0.38);
  --sombra-botao-forte: 0 12px 30px rgba(132, 87, 241, 0.52);
  --sombra-card: 0 18px 40px rgba(0, 0, 0, 0.28);
  --transicao: 180ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--esp-4));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg-body);
  color: var(--texto-corpo);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--violeta-claro);
  outline-offset: 3px;
  border-radius: var(--esp-1);
}

.pular {
  position: absolute;
  left: var(--esp-4);
  top: -100px;
  z-index: 200;
  padding: var(--esp-3) var(--esp-5);
  background: var(--violeta-acao);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--raio-pill);
  transition: top var(--transicao);
}

.pular:focus {
  top: var(--esp-3);
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--esp-5);
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  color: var(--violeta-claro);
}

.selo {
  display: block;
  width: 46px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(to top right, #7c3aed, var(--lavanda));
  transform: skewX(-18deg);
}

.sobretitulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: var(--violeta-claro);
  text-transform: uppercase;
}

.titulo {
  color: var(--texto-titulo);
  font-weight: 700;
  font-size: clamp(1.625rem, 5.6vw, 2.375rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.titulo--hero {
  font-size: clamp(2rem, 8.4vw, 3.25rem);
  line-height: 1.1;
}

.destaque {
  color: var(--violeta-claro);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 46px;
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--raio-pill);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicao), transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.botao--primario {
  background: var(--violeta-acao);
  color: #fff;
  box-shadow: var(--sombra-botao);
}

.botao--primario:hover {
  background: var(--violeta-acao-hover);
  box-shadow: var(--sombra-botao-forte);
  transform: translateY(-2px);
}

.botao--contorno {
  background: transparent;
  color: var(--texto-titulo);
  border: 1px solid var(--violeta);
}

.botao--contorno:hover {
  border-color: var(--violeta-claro);
  background: rgba(139, 92, 246, 0.12);
  transform: translateY(-2px);
}

.botao--grande {
  min-height: 54px;
  padding: var(--esp-4) var(--esp-6);
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .botao:hover {
    transform: none;
  }
}

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(7, 4, 13, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}

.cabecalho-barra {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  height: 100%;
  max-width: var(--largura-cabecalho);
}

.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.marca {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}

.marca img {
  height: 26px;
  width: 123px;
}

.menu-lista {
  display: grid;
  gap: var(--esp-1);
}

.menu-lista a {
  display: block;
  padding: var(--esp-3) var(--esp-2);
  color: var(--texto-corpo);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--esp-2);
  transition: color var(--transicao), background-color var(--transicao);
}

.menu-lista a:hover {
  color: var(--texto-titulo);
  background: rgba(139, 92, 246, 0.12);
}

.idiomas {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.idioma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: var(--esp-3) var(--esp-1);
  color: var(--texto-secundario);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--esp-2);
  transition: color var(--transicao);
}

.idioma:hover {
  color: var(--texto-titulo);
}

.idioma--ativo {
  color: var(--violeta-claro);
}

.idioma-sep {
  color: var(--texto-secundario);
  font-size: 0.75rem;
  opacity: 0.6;
}

.cabecalho-cta {
  display: none;
}

.hamburguer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--esp-3);
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.03);
}

.hamburguer .material-symbols-rounded {
  font-size: 26px;
}

.menu {
  position: fixed;
  top: var(--header-h);
  right: 0;
  left: auto;
  width: min(80vw, 320px);
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-5);
  padding-right: max(var(--esp-5), env(safe-area-inset-right));
  padding-bottom: max(var(--esp-5), env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-elevado);
  border-left: 1px solid var(--borda);
  box-shadow: -24px 0 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}

.menu[data-aberto="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu-cta {
  margin-top: auto;
}

.hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--esp-8)) var(--esp-8);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(74% 56% at 38% 4%, rgba(139, 92, 246, 0.26), transparent 66%),
    radial-gradient(48% 40% at 88% 44%, rgba(75, 46, 140, 0.24), transparent 70%);
}

.hero-conteudo {
  display: grid;
  gap: var(--esp-5);
}

.hero-conteudo > * {
  max-width: var(--medida-hero);
}

.hero-subtitulo {
  font-size: clamp(1rem, 3.6vw, 1.1875rem);
  max-width: 620px;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}

.hero-acoes .botao {
  flex: 1 1 200px;
}

.secao {
  padding-block: var(--esp-8);
}

.secao--elevada {
  background: var(--bg-elevado);
  border-block: 1px solid var(--borda);
}

.secao-cabecalho {
  display: grid;
  gap: var(--esp-4);
  margin-bottom: var(--esp-7);
  max-width: 680px;
}

.grade {
  display: grid;
  gap: var(--esp-4);
}

.cartao {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-5);
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.cartao:hover {
  border-color: var(--roxo-medio);
  transform: translateY(-3px);
  box-shadow: var(--sombra-card);
}

@media (prefers-reduced-motion: reduce) {
  .cartao:hover {
    transform: none;
  }
}

.icone-caixa {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.22), rgba(75, 46, 140, 0.2));
  border: 1px solid rgba(167, 139, 250, 0.24);
}

.icone-caixa .material-symbols-rounded {
  font-size: 26px;
}

.cartao-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--violeta-claro);
  text-transform: uppercase;
}

.cartao-titulo {
  color: var(--texto-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.cartao-texto {
  font-size: 0.9375rem;
}

.etapas {
  position: relative;
  display: grid;
  gap: var(--esp-6);
}

.etapas::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg, var(--roxo-medio), rgba(75, 46, 140, 0.18));
}

.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: start;
  gap: var(--esp-4);
}

.etapa-marca {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--roxo-medio);
}

.etapa-marca .material-symbols-rounded {
  font-size: 26px;
}

.etapa-num {
  position: absolute;
  top: -8px;
  right: -12px;
  padding: 1px 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--violeta-claro);
  background: var(--bg-elevado);
  border: 1px solid var(--roxo-medio);
  border-radius: var(--raio-pill);
}

.etapa-texto {
  display: grid;
  gap: var(--esp-1);
}

.etapa-texto p {
  font-size: 0.9375rem;
}

.projeto {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.projeto-arte {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1a1030 0%, #2c1b57 55%, #1a1030 100%);
  border-bottom: 1px solid var(--borda);
}

.projeto-arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projeto-barra {
  display: block;
  width: 78px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(to top right, #7c3aed, var(--lavanda));
  transform: skewX(-18deg);
  opacity: 0.85;
}

.projeto-corpo {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-5);
}

.chamada {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  padding: var(--esp-7) var(--esp-5);
  text-align: center;
  background: var(--bg-elevado);
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-radius: var(--raio-lg);
  box-shadow: 0 0 60px rgba(139, 92, 246, 0.12);
}

.chamada-texto {
  max-width: 460px;
}

.chamada .botao {
  margin-top: var(--esp-2);
}

.rodape {
  padding-block: var(--esp-6) calc(var(--esp-6) + var(--esp-5));
  background: var(--bg-elevado);
  border-top: 1px solid var(--borda);
}

.rodape-grade {
  display: grid;
  gap: var(--esp-5);
  padding-bottom: var(--esp-5);
}

.rodape-marca {
  display: grid;
  gap: var(--esp-2);
  justify-items: start;
}

.rodape-marca img {
  height: 30px;
  width: 142px;
}

.rodape-frase {
  color: var(--texto-secundario);
  font-size: 0.9375rem;
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-5);
}

.rodape-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) 0;
  min-height: 32px;
  color: var(--texto-corpo);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transicao);
}

.rodape-links a:hover {
  color: var(--violeta-claro);
}

.rodape-links .material-symbols-rounded {
  font-size: 20px;
}

.rodape-copy {
  padding-top: var(--esp-4);
  text-align: center;
  border-top: 1px solid var(--borda);
  color: var(--texto-secundario);
  font-size: 0.8125rem;
}

.zap {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 95;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.36);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.zap:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .zap:hover {
    transform: none;
  }
}

.sugestao {
  position: fixed;
  left: var(--esp-4);
  right: calc(var(--esp-4) + 68px);
  bottom: var(--esp-4);
  z-index: 94;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4);
  background: rgba(21, 12, 41, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--roxo-medio);
  border-radius: var(--raio-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.sugestao[hidden] {
  display: none;
}

.sugestao-texto {
  flex: 1 1 auto;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texto-corpo);
}

.sugestao-link {
  display: inline-block;
  color: var(--violeta-claro);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sugestao-fechar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--esp-2);
}

.sugestao-fechar .material-symbols-rounded {
  font-size: 20px;
}

.erro {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding-block: var(--esp-9) var(--esp-8);
  text-align: center;
}

.erro-conteudo {
  display: grid;
  justify-items: center;
  gap: var(--esp-5);
  max-width: 560px;
}

.erro-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-3);
}

.js-ativo .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms ease;
}

.js-ativo .reveal.visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-ativo .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 560px) {
  .grade--4,
  .grade--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .rodape-grade {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .rodape-links {
    justify-content: flex-end;
  }

  .sugestao {
    right: auto;
    max-width: 340px;
  }
}

@media (min-width: 900px) {
  .etapas {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--esp-5);
  }

  .etapas::before {
    left: 12.5%;
    right: 12.5%;
    top: 26px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(75, 46, 140, 0.18), var(--roxo-medio), rgba(75, 46, 140, 0.18));
  }

  .etapa {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--esp-4);
  }

  .etapa-texto {
    gap: var(--esp-2);
  }

  .grade--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grade--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 960px) {
  :root {
    --header-h: 76px;
    --medida-hero: min(500px, calc(47vw - 32px));
  }

  .container {
    padding-inline: var(--esp-6);
  }

  .marca {
    margin-right: 0;
    justify-self: start;
  }

  .marca img {
    height: 32px;
    width: 152px;
  }

  .cabecalho-barra {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .cabecalho-acoes {
    justify-self: end;
  }

  .menu {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .menu-lista {
    display: flex;
    gap: var(--esp-2);
  }

  .menu-lista a {
    padding: var(--esp-2) var(--esp-3);
  }

  .menu-cta,
  .hamburguer {
    display: none;
  }

  .cabecalho-cta {
    display: inline-flex;
    margin-left: var(--esp-4);
  }

  .idiomas {
    padding-left: var(--esp-2);
  }

  .secao {
    padding-block: var(--esp-9);
  }

  .hero {
    display: grid;
    align-content: center;
    min-height: min(47vw, 780px);
    padding-block: calc(var(--header-h) + var(--esp-7)) var(--esp-7);
  }

  .hero::before {
    background-image:
      linear-gradient(to top, rgba(7, 4, 13, 0.95) 0%, rgba(7, 4, 13, 0) 12%),
      linear-gradient(
        100deg,
        rgba(7, 4, 13, 0.97) 0%,
        rgba(7, 4, 13, 0.82) 30%,
        rgba(7, 4, 13, 0.35) 48%,
        rgba(7, 4, 13, 0) 64%
      ),
      url("../assets/img/Imagem-fundo.webp");
    background-position: center, center, center;
    background-size: cover, cover, cover;
    background-repeat: no-repeat;
  }

  .titulo--hero {
    font-size: clamp(2.5rem, 3.3vw, 2.875rem);
  }

  .hero-subtitulo {
    max-width: var(--medida-hero);
  }

  .hero-acoes .botao {
    flex: 0 0 auto;
  }

  .chamada {
    padding: var(--esp-8) var(--esp-7);
  }

  .zap {
    right: var(--esp-5);
    bottom: var(--esp-5);
    width: 62px;
    height: 62px;
  }

  .sugestao {
    left: var(--esp-5);
    bottom: var(--esp-5);
  }
}

/* Acima de ~1660px o teto de altura faria o cover ampliar e cortar a ilustracao.
   Aqui a imagem passa a ser dimensionada pela altura e ancorada na direita, e a
   largura extra da tela vira espaco de texto. No proprio 1660px as duas regras
   coincidem, entao a transicao e imperceptivel. */
@media (min-width: 1660px) {
  :root {
    --medida-hero: min(620px, calc(50vw - 336px));
  }

  .hero::before {
    background-position: center, center, right center;
    background-size: cover, cover, auto 100%;
  }

  .titulo--hero {
    font-size: clamp(2.875rem, 2.6vw, 3.5rem);
  }
}