/* =========================================================
   AVANTAR — style.css
   Seções na mesma ordem em que aparecem na página.
   Nenhum hex aqui: tudo sai das variáveis do reset.css.
   ========================================================= */

/* =========================================================
   00 — Componentes compartilhados (botão e formulário)
   Ficam no topo porque a primeira aparição dos dois é no hero,
   e eles se repetem em blocos 04, 11 e no obrigado.html.
   ========================================================= */

.btn {
  display: inline-block;
  width: 100%;
  padding: 1.05rem 1.75rem;
  border-radius: var(--raio-campo);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao), transform var(--transicao);
}

/* Variante para CTAs fora de formulário: largura própria em vez de
   esticar para 100% do pai (que antes exigia um max-width no wrapper
   pra simular isso). */
.btn--hug {
  width: auto;
  min-width: 260px;
  padding-inline: 2.5rem;
}

.btn--primario {
  background-color: var(--tiffany);
  color: var(--preto);
  box-shadow: 0 0 0 0 rgba(var(--tiffany-rgb), 0.45), 0 12px 34px -12px rgba(var(--tiffany-rgb), 0.65);
  transition: background-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.btn--primario:hover {
  background-color: var(--tiffany-d);
  box-shadow: 0 0 0 4px rgba(var(--tiffany-rgb), 0.18), 0 14px 40px -10px rgba(var(--tiffany-rgb), 0.75);
}

.btn--secundario {
  background-color: transparent;
  color: var(--texto);
  border: 1px solid rgba(var(--texto-rgb), 0.35);
}

.btn--secundario:hover {
  border-color: var(--roxo-400);
  color: var(--roxo-400);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* --- Formulário --- */
.form {
  display: grid;
  gap: var(--esp-2);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  background-image: linear-gradient(155deg,
      rgba(var(--roxo-luz-rgb), 0.28) 0%,
      rgba(var(--roxo-900-rgb), 0.92) 46%,
      rgba(var(--preto-rgb), 0.94) 100%);
  border: 1px solid rgba(var(--roxo-400-rgb), 0.18);
  border-radius: var(--raio-card);
  box-shadow: 0 30px 70px -30px rgba(var(--preto-rgb), 0.9);
}

.form__campo {
  display: grid;
  gap: 0.4rem;
}

.form__input {
  width: 100%;
  padding: 0.95rem 1rem;
  background-color: rgba(var(--preto-rgb), 0.75);
  color: var(--texto);
  border: 1px solid rgba(var(--roxo-600-rgb), 0.4);
  border-radius: var(--raio-campo);
  transition: border-color var(--transicao), background-color var(--transicao);
}

.form__input::placeholder {
  color: var(--texto-mudo);
  opacity: 1;
}

.form__input:hover {
  border-color: rgba(var(--roxo-400-rgb), 0.6);
}

.form__input:focus {
  outline: none;
  border-color: var(--tiffany);
  background-color: var(--preto);
  box-shadow: 0 0 0 3px rgba(var(--tiffany-rgb), 0.2);
}

.form__input[aria-invalid='true'] {
  border-color: var(--erro);
}

/* O <select> reaproveita .form__input e só ajusta o que o navegador
   estiliza sozinho: a seta nativa (trocada por uma nossa) e a cor do
   texto enquanto mostra o placeholder (option vazia, desabilitada). */
.form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  color: var(--texto-mudo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9aec6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  cursor: pointer;
}

.form__select:valid {
  color: var(--texto);
}

.form__check-linha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}

.form__check {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
  accent-color: var(--tiffany);
  cursor: pointer;
}

.form__check-texto {
  color: var(--texto-mudo);
  font-size: 0.85rem;
  line-height: 1.5;
  cursor: pointer;
}

.form__erro {
  color: var(--erro);
  font-size: 0.8rem;
  line-height: 1.4;
}

.form__erro:empty {
  display: none;
}

.form__status {
  color: var(--erro);
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: center;
}

.form__status:empty {
  display: none;
}

.form__micro {
  color: var(--texto-mudo);
  font-size: 0.78rem;
  text-align: center;
}

/* =========================================================
   01 — Hero
   ========================================================= */

.hero {
  position: relative;
  isolation: isolate;
  /* A mancha de luz do hero passa de propósito da largura da tela.
     Sem este recorte, ela vira rolagem horizontal na página inteira. */
  overflow: hidden;
  background-color: var(--preto);
}

.hero__media {
  position: relative;
  overflow: hidden;
}

/* height:auto é obrigatório: sem ele os atributos width/height do <img>
   valem como altura e o aspect-ratio é ignorado — a foto renderiza na
   altura intrínseca (1080px) em vez dos 4:5 pedidos. */
.hero__imagem {
  width: 100%;
  height: auto;
  /* Teto de altura da foto no celular e no tablet. Em 46svh (valor
     anterior), a foto + título + subtítulo já preenchiam a tela toda
     em aparelhos de 375×667/812, e o formulário ficava inteiro fora
     da primeira dobra. 34svh dá menos protagonismo à foto e deixa o
     campo "Seu nome" visível já no primeiro scroll. */
  max-height: 34vh;
  max-height: 34svh;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

/* No mobile a foto é o topo e o degradê desce até o preto sólido.
   Duas camadas: um brilho roxo por cima da luz da foto e um fade
   para o preto, para a imagem terminar sem costura na seção. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      var(--preto) 3%,
      rgba(var(--preto-rgb), 0.68) 34%,
      rgba(var(--preto-rgb), 0) 78%),
    radial-gradient(90% 55% at 50% 18%,
      rgba(var(--roxo-luz-rgb), 0.3) 0%,
      rgba(var(--roxo-luz-rgb), 0) 72%);
}

.hero__conteudo {
  position: relative;
  z-index: 1;
  /* A base da foto já está apagada no preto, então o texto pode subir
     por cima dela: ganha altura e fica mais cinematográfico. Valor
     reduzido de -22vw pra acompanhar a foto mais baixa (34svh): menos
     imagem embaixo do texto exige menos sobreposição. */
  margin-top: -12vw;
  padding-bottom: clamp(1.5rem, 6vw, var(--esp-5));
}

/* Luz ambiente do hero: o brilho roxo nasce atrás do texto e some
   antes de chegar no sujeito, que já tem a própria luz na foto. */
.hero__conteudo::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline: -25%;
  top: -25%;
  height: 130%;
  background: radial-gradient(58% 55% at 26% 42%,
      rgba(var(--roxo-luz-rgb), 0.42) 0%,
      rgba(var(--roxo-600-rgb), 0.16) 42%,
      rgba(var(--roxo-luz-rgb), 0) 72%);
  pointer-events: none;
}

/* .hero__grade divide o elemento com .container, então NÃO pode receber
   max-width própria: isso sobrescreveria a largura do container e o
   margin-inline:auto centralizaria o bloco na tela. A largura de leitura
   é limitada nos filhos, que assim ficam alinhados à esquerda, na mesma
   guia vertical de todas as outras seções da página. */
.hero__grade {
  display: grid;
  gap: var(--esp-3);
  justify-items: start;
}

.hero__texto {
  display: grid;
  gap: var(--esp-2);
  max-width: 620px;
}

.hero__form {
  width: 100%;
  max-width: 620px;
}

/* No celular o formulário também vem mais compacto: é o bloco mais
   alto do hero e cada pixel aqui aproxima o botão do topo. */
.hero__form .form {
  padding: clamp(1rem, 3.6vw, 1.4rem);
  gap: 0.75rem;
}

.hero__form .form__input {
  padding-block: 0.8rem;
}

.hero__titulo {
  margin-top: 0.35rem;
}

/* Sobre a foto (roxo claro, não preto), o texto de apoio precisa de
   mais brilho que o --texto-mudo para manter contraste AA. */
.hero__linha-fina {
  max-width: var(--largura-texto);
  color: rgba(var(--texto-rgb), 0.84);
}

.hero__apoio {
  max-width: 620px;
  margin-top: var(--esp-3);
  color: rgba(var(--texto-rgb), 0.72);
  font-size: 0.85rem;
  font-weight: var(--peso-rotulo);
  letter-spacing: 0.02em;
}

@media (min-width: 900px) {
  /* O hero tem que caber inteiro numa tela, sem rolagem e sem corte.
     Como o conteúdo é fixo (título + parágrafo + formulário + apoio),
     quem manda no tamanho é a ALTURA da viewport, não a largura: por
     isso os valores abaixo usam vh junto com vw. Em telas altas eles
     batem no teto do clamp e a composição fica no tamanho cheio; em
     notebooks baixos tudo encolhe junto, proporcionalmente. */
  .hero {
    display: grid;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: clamp(0.5rem, 2.5vh, var(--esp-4));
  }

  .hero__media {
    position: absolute;
    inset: 0;
  }

  /* A foto é 16:9 e a tela costuma ser mais larga que alta, então o
     object-fit encosta a imagem na largura e o Daniel fica pequeno.
     A escala com origem em cima dele aumenta o sujeito sem deslocá-lo;
     o excesso sai pela esquerda, onde só existe fundo. */
  .hero__imagem {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-position: 88% center;
    transform: scale(1.12);
    transform-origin: 74% 42%;
  }

  /* No desktop, três camadas em vez de um degradê preto chapado:
     1) fade final para o preto na base, para emendar com a seção;
     2) scrim da esquerda para a direita, que segura a legibilidade
        do texto e libera a luz da foto no lado do sujeito;
     3) um sopro de roxo-luz na diagonal, que devolve o brilho que
        o scrim tirou sem tocar na área onde o texto assenta. */
  .hero__media::after {
    background:
      linear-gradient(to top,
        var(--preto) 0%,
        rgba(var(--preto-rgb), 0) 22%),
      linear-gradient(96deg,
        rgba(var(--preto-rgb), 0.95) 0%,
        rgba(var(--preto-rgb), 0.88) 26%,
        rgba(var(--roxo-900-rgb), 0.6) 46%,
        rgba(var(--roxo-900-rgb), 0.18) 62%,
        rgba(var(--preto-rgb), 0) 80%),
      radial-gradient(45% 60% at 62% 55%,
        rgba(var(--roxo-luz-rgb), 0.32) 0%,
        rgba(var(--roxo-luz-rgb), 0) 70%);
  }

  .hero__conteudo {
    margin-top: 0;
    padding-bottom: 0;
  }

  /* A coluna de texto tem que terminar antes do Daniel, que na foto
     começa por volta de 58% da largura. Com o container mais largo
     sobra espaço à esquerda, então o display volta a crescer.
     Teto reduzido de 4.25rem pra 3.4rem: no teto anterior o título
     ocupava a metade da altura do hero e sobrava pouco respiro pro
     resto do bloco (subtítulo, formulário). */
  .hero__titulo {
    font-size: clamp(1.75rem, min(3.6vw, 5.4vh), 3.4rem);
  }

  .hero__grade {
    gap: clamp(0.6rem, 2vh, var(--esp-3));
  }

  .hero__texto {
    max-width: 640px;
    gap: clamp(0.3rem, 1.2vh, var(--esp-2));
  }

  .hero__linha-fina {
    font-size: clamp(0.9rem, 1.9vh, 1.05rem);
  }

  /* Igual à largura de .hero__texto (640px): com o título menor, a
     largura antiga (720px) deixava a borda direita do formulário bem
     à frente do fim das linhas de texto acima. */
  .hero__form {
    max-width: 640px;
  }

  /* O formulário é o bloco mais alto do hero, então ele encolhe junto:
     menos respiro interno e campos mais baixos em telas baixas. */
  .hero__form .form {
    padding: clamp(0.8rem, 2.2vh, 1.75rem);
    gap: clamp(0.4rem, 1.4vh, var(--esp-2));
  }

  .hero__form .form__input {
    padding-block: clamp(0.6rem, 1.5vh, 0.95rem);
  }

  .hero__form .form__enviar {
    padding-block: clamp(0.7rem, 1.7vh, 1.05rem);
  }

  .hero__apoio {
    margin-top: clamp(0.5rem, 1.5vh, var(--esp-2));
  }

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

/* =========================================================
   02 e 07 — Marquee (elemento de assinatura)
   ========================================================= */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 8vw, 4.5rem);
  user-select: none;
}

.marquee__faixa {
  position: relative;
  width: 112%;
  margin-left: -6%;
  overflow: hidden;
  padding-block: 0.55rem;
}

.marquee__faixa--solida {
  z-index: 2;
  background-image: linear-gradient(90deg,
      var(--roxo-600) 0%,
      var(--roxo-luz) 34%,
      var(--roxo-600) 62%,
      var(--roxo-luz) 100%);
  box-shadow: 0 0 32px -6px rgba(var(--roxo-luz-rgb), 0.35);
  transform: rotate(-1deg);
}

/* Mesma inclinação da faixa de cima (era rotação oposta): duas faixas
   torcidas em direções contrárias liam como banner de evento/gaming,
   não como o registro dark-editorial que a marca pede. */
.marquee__faixa--contorno {
  z-index: 1;
  margin-top: -1.4rem;
  opacity: 0.55;
  transform: rotate(-1deg);
}

.marquee__trilho {
  display: flex;
  width: max-content;
  animation: marquee-rolar 42s linear infinite;
  will-change: transform;
}

.marquee__trilho[data-direcao='reversa'] {
  animation-duration: 52s;
  animation-direction: reverse;
}

.marquee__grupo {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__item,
.marquee__ponto {
  display: inline-block;
  padding-inline: 0.5rem;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  font-weight: var(--peso-display);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.marquee__faixa--solida .marquee__item {
  color: var(--texto);
}

.marquee__faixa--solida .marquee__ponto {
  color: rgba(var(--texto-rgb), 0.5);
}

.marquee__faixa--contorno .marquee__item,
.marquee__faixa--contorno .marquee__ponto {
  color: var(--tiffany);
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .marquee__faixa--contorno .marquee__item {
    color: transparent;
    -webkit-text-stroke: 1px var(--tiffany);
  }
}

@keyframes marquee-rolar {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================================
   03 — Pra quem é
   ========================================================= */

.publico__titulo {
  max-width: 18ch;
  margin-bottom: var(--esp-4);
}

.cards {
  display: grid;
  gap: var(--esp-2);
}

.cards__item {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--roxo-800);
  background-image: linear-gradient(158deg,
      rgba(var(--roxo-luz-rgb), 0.22) 0%,
      rgba(var(--roxo-800-rgb), 0) 52%);
  border: 1px solid rgba(var(--roxo-600-rgb), 0.25);
  border-radius: var(--raio-card);
}

.cards__titulo {
  margin-bottom: 0.6rem;
}

.cards__texto {
  color: var(--texto-mudo);
  font-size: 0.98rem;
}

.publico__fecho {
  max-width: 24ch;
  margin: var(--esp-5) auto 0;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  font-weight: var(--peso-display);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 760px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-3);
  }
}

/* Em 2×2 dentro de um container de 1400px os cards ficariam largos e
   rasos. Em quatro colunas eles voltam a ter proporção de card e a
   seção inteira encurta. */
@media (min-width: 1240px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================
   04 — CTA intermediário
   ========================================================= */

.cta-meio {
  position: relative;
  isolation: isolate;
  padding-block: clamp(1rem, 4vw, var(--esp-4));
}

/* Luz atrás do botão: puxa o olho para a única ação do bloco. */
.cta-meio::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(40% 90% at 50% 50%,
      rgba(var(--roxo-luz-rgb), 0.32) 0%,
      rgba(var(--roxo-luz-rgb), 0) 70%);
  pointer-events: none;
}

.cta-meio__interno {
  display: flex;
  justify-content: center;
}

/* =========================================================
   05 — O que você leva
   ========================================================= */

/* A luz da página alterna de lado conforme se desce: hero à esquerda,
   CTA do meio no centro, esta seção à direita, Daniel à esquerda de
   novo e CTA final no centro. */
.leva {
  position: relative;
  isolation: isolate;
}

/* Glow removido de propósito: das 10 seções da página, 5 tinham o
   mesmo radial roxo atrás do conteúdo. Esta vira a seção "neutra" que
   dá respiro entre o brilho do hero e o da seção do Daniel/CTA final,
   em vez de mais uma seção com a mesma muleta de profundidade. */

.leva__titulo {
  max-width: 24ch;
  margin-bottom: var(--esp-4);
}

.leva__parentese {
  display: block;
  margin-top: 0.4rem;
  color: var(--texto-mudo);
  font-size: 0.5em;
  font-weight: var(--peso-corpo);
  letter-spacing: 0;
  line-height: 1.4;
}

.leva__lista {
  display: grid;
  gap: var(--esp-3);
}

/* Os quatro itens em duas colunas: a leitura continua na ordem
   01 → 02 → 03 → 04 e a seção ocupa a largura em vez de deixar
   meia tela vazia à direita de cada parágrafo. */
@media (min-width: 1100px) {
  .leva__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--esp-5);
  }
}

/* Fio de separação em degradê: nasce no roxo-luz e desaparece
   para a direita, em vez de cortar a coluna de ponta a ponta. */
.leva__item {
  display: grid;
  /* minmax(0, 1fr) e não 1fr: sem isso a coluna de texto usa o
     min-content como piso e estoura a largura da grade de fora. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--esp-2);
  align-items: start;
  padding-top: var(--esp-3);
  background-image: linear-gradient(90deg,
      rgba(var(--roxo-400-rgb), 0.55) 0%,
      rgba(var(--roxo-luz-rgb), 0.35) 35%,
      rgba(var(--roxo-600-rgb), 0) 90%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
}

.leva__numero {
  color: var(--tiffany);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: var(--peso-display);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.leva__item-titulo {
  margin-bottom: 0.5rem;
}

.leva__item-texto {
  max-width: var(--largura-texto);
  color: var(--texto-mudo);
  font-size: 0.98rem;
}

/* =========================================================
   06 — Como funciona
   ========================================================= */

.passos__titulo {
  max-width: 22ch;
  margin-bottom: var(--esp-4);
}

.passos__lista {
  display: grid;
  gap: var(--esp-3);
}

.passos__item {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--roxo-800);
  background-image: linear-gradient(158deg,
      rgba(var(--roxo-luz-rgb), 0.22) 0%,
      rgba(var(--roxo-800-rgb), 0) 52%);
  border: 1px solid rgba(var(--roxo-600-rgb), 0.25);
  border-radius: var(--raio-card);
}

.passos__cabecalho {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.passos__numero {
  color: var(--tiffany);
  font-size: clamp(2.6rem, 7vw, 3.4rem);
  font-weight: var(--peso-display);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.passos__rotulo {
  color: var(--texto-mudo);
  font-size: 0.72rem;
  font-weight: var(--peso-rotulo);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.passos__texto {
  color: var(--texto-mudo);
  font-size: 0.98rem;
}

/* Sem este degrau, um tablet de 768px (ex. iPad retrato) ficava preso
   em 1 coluna: o próximo breakpoint só disparava em 860px. */
@media (min-width: 700px) {
  .passos__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .passos__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   08 — Quem vai te mostrar isso
   ========================================================= */

.daniel {
  position: relative;
  isolation: isolate;
}

/* Contraluz roxa atrás da foto, do lado em que ela fica no desktop. */
.daniel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(38% 55% at 26% 48%,
      rgba(var(--roxo-luz-rgb), 0.3) 0%,
      rgba(var(--roxo-luz-rgb), 0) 72%);
  pointer-events: none;
}

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

.daniel__foto {
  width: 100%;
  height: auto;
  max-width: 500px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(72% 68% at 50% 42%, rgba(0, 0, 0, 1) 38%, rgba(0, 0, 0, 0) 88%);
  mask-image: radial-gradient(72% 68% at 50% 42%, rgba(0, 0, 0, 1) 38%, rgba(0, 0, 0, 0) 88%);
}

.daniel__texto {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
}

.daniel__nome {
  margin-top: 0.2rem;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
}

.daniel__bio {
  max-width: var(--largura-texto);
  color: var(--texto-mudo);
  font-size: 0.98rem;
}

.contadores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-2);
  margin-top: var(--esp-2);
  padding-top: var(--esp-3);
  background-image: linear-gradient(90deg,
      rgba(var(--roxo-400-rgb), 0.55) 0%,
      rgba(var(--roxo-luz-rgb), 0.35) 35%,
      rgba(var(--roxo-600-rgb), 0) 90%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
}

.contadores__numero {
  display: block;
  color: var(--tiffany);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: var(--peso-display);
  line-height: 1;
  letter-spacing: -0.03em;
}

.contadores__rotulo {
  display: block;
  margin-top: 0.35rem;
  color: var(--texto-mudo);
  font-size: 0.72rem;
  font-weight: var(--peso-rotulo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

@media (min-width: 860px) {
  .daniel__grade {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--esp-5);
    align-items: center;
  }
}

/* =========================================================
   08.5 — Sem a aula × Com a aula
   ========================================================= */

.comparacao__titulo {
  max-width: 24ch;
  margin: 0 auto var(--esp-4);
  text-align: center;
}

.comparacao__grade {
  display: grid;
  gap: var(--esp-2);
}

.comparacao__card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--raio-card);
  border: 1px solid rgba(var(--roxo-600-rgb), 0.25);
}

.comparacao__card--sem {
  background-color: var(--roxo-900);
}

.comparacao__card--com {
  background-color: var(--roxo-800);
  border-color: rgba(var(--tiffany-rgb), 0.35);
  box-shadow: 0 20px 60px -30px rgba(var(--tiffany-rgb), 0.4);
}

.comparacao__rotulo {
  display: block;
  margin-bottom: 1.1rem;
  font-size: 0.75rem;
  font-weight: var(--peso-rotulo);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.comparacao__card--sem .comparacao__rotulo {
  color: var(--erro);
}

.comparacao__card--com .comparacao__rotulo {
  color: var(--tiffany);
}

.comparacao__lista {
  display: grid;
  gap: 0.85rem;
}

.comparacao__lista li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--texto-mudo);
  font-size: 0.95rem;
  line-height: 1.5;
}

.comparacao__lista li::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  font-weight: 700;
}

.comparacao__card--sem .comparacao__lista li::before {
  content: '\2715';
  color: var(--erro);
}

.comparacao__card--com .comparacao__lista li::before {
  content: '\2713';
  color: var(--tiffany);
}

.comparacao__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--esp-5);
}

@media (min-width: 760px) {
  .comparacao__grade {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-3);
  }
}

/* =========================================================
   09 — FAQ
   ========================================================= */

.faq__interno {
  max-width: 980px;
}

.faq__titulo {
  margin-bottom: var(--esp-4);
}

.faq__lista {
  display: grid;
}

.faq__item {
  border-top: 1px solid rgba(var(--roxo-600-rgb), 0.3);
}

.faq__item:last-child {
  border-bottom: 1px solid rgba(var(--roxo-600-rgb), 0.3);
}

.faq__pergunta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--esp-2);
  align-items: center;
  padding-block: 1.2rem;
  font-size: 1.02rem;
  font-weight: var(--peso-rotulo);
  line-height: 1.4;
  transition: color var(--transicao);
}

.faq__pergunta:hover {
  color: var(--roxo-400);
}

.faq__pergunta::after {
  content: '+';
  color: var(--tiffany);
  font-size: 1.6rem;
  font-weight: var(--peso-corpo);
  line-height: 1;
  transition: transform var(--transicao);
}

.faq__item[open] .faq__pergunta::after {
  transform: rotate(45deg);
}

.faq__resposta {
  padding-bottom: 1.3rem;
  color: var(--texto-mudo);
  font-size: 0.96rem;
  max-width: var(--largura-texto);
}

/* =========================================================
   10 — CTA final
   ========================================================= */

.cta-final {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, var(--esp-7));
}

/* A mancha mais forte da página: é o último bloco antes do rodapé. */
.cta-final::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 45%,
      rgba(var(--roxo-luz-rgb), 0.45) 0%,
      rgba(var(--roxo-600-rgb), 0.16) 45%,
      rgba(var(--roxo-luz-rgb), 0) 74%);
  pointer-events: none;
}

.cta-final__card {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, var(--esp-4));
  background-color: var(--roxo-900);
  background-image: linear-gradient(165deg,
      rgba(var(--roxo-luz-rgb), 0.3) 0%,
      rgba(var(--roxo-900-rgb), 0.9) 48%,
      rgba(var(--preto-rgb), 0.92) 100%);
  border: 1px solid rgba(var(--tiffany-rgb), 0.3);
  border-radius: var(--raio-card);
  box-shadow: 0 40px 90px -40px rgba(var(--preto-rgb), 0.95);
  text-align: center;
}

.cta-final__titulo {
  font-size: clamp(1.65rem, 4.5vw, 2.5rem);
}

.cta-final__selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--esp-2);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(var(--tiffany-rgb), 0.4);
  border-radius: 999px;
  color: var(--tiffany);
  font-size: 0.75rem;
  font-weight: var(--peso-rotulo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cta-final__texto {
  margin: var(--esp-2) auto var(--esp-3);
  max-width: 42ch;
  color: var(--texto-mudo);
  font-size: 1rem;
}

/* O formulário dentro do card não repete fundo, borda nem sombra. */
.cta-final__card .form {
  padding: 0;
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  text-align: left;
}

/* =========================================================
   Rodapé
   ========================================================= */

.rodape {
  padding-block: var(--esp-4);
  border-top: 1px solid rgba(var(--roxo-600-rgb), 0.25);
}

.rodape__interno {
  display: grid;
  gap: 0.6rem;
  max-width: 760px;
  text-align: center;
}

.rodape__linha,
.rodape__aviso {
  color: var(--texto-mudo);
  font-size: 0.8rem;
  line-height: 1.55;
}

.rodape__link {
  color: var(--texto-mudo);
  text-decoration: underline;
  transition: color var(--transicao);
}

.rodape__link:hover {
  color: var(--roxo-400);
}

/* =========================================================
   obrigado.html
   ========================================================= */

.obrigado {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  padding-block: clamp(3rem, 9vw, var(--esp-6));
}

.obrigado::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(58% 52% at 50% 32%,
      rgba(var(--roxo-luz-rgb), 0.42) 0%,
      rgba(var(--roxo-600-rgb), 0.15) 45%,
      rgba(var(--roxo-luz-rgb), 0) 74%);
  pointer-events: none;
}

.obrigado__interno {
  max-width: 620px;
}

.obrigado__titulo {
  margin-top: 0.5rem;
  font-size: clamp(2rem, 6vw, 3.4rem);
}

.obrigado__texto {
  margin-top: var(--esp-2);
  color: var(--texto-mudo);
}

.obrigado__passos {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.obrigado__passo {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--roxo-800);
  background-image: linear-gradient(158deg,
      rgba(var(--roxo-luz-rgb), 0.22) 0%,
      rgba(var(--roxo-800-rgb), 0) 52%);
  border: 1px solid rgba(var(--roxo-600-rgb), 0.25);
  border-radius: var(--raio-card);
}

.obrigado__cabecalho {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}

.obrigado__numero {
  color: var(--tiffany);
  font-size: clamp(2.4rem, 7vw, 3rem);
  font-weight: var(--peso-display);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.obrigado__rotulo {
  color: var(--texto-mudo);
  font-size: 0.72rem;
  font-weight: var(--peso-rotulo);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.obrigado__passo-texto {
  margin-bottom: var(--esp-2);
  color: var(--texto-mudo);
  font-size: 0.98rem;
}

/* =========================================================
   politica-de-privacidade.html
   ========================================================= */

.politica__interno {
  max-width: var(--largura-texto);
}

.politica__titulo {
  margin-top: 0.5rem;
  margin-bottom: var(--esp-3);
}

.politica__intro {
  color: var(--texto-mudo);
  margin-bottom: var(--esp-4);
}

.politica__secao-titulo {
  margin-top: var(--esp-4);
  margin-bottom: 0.75rem;
}

.politica__paragrafo {
  color: var(--texto-mudo);
  margin-bottom: 1rem;
}

.politica__lista {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.politica__lista li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--texto-mudo);
  line-height: 1.5;
}

.politica__lista li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--tiffany);
}

.politica__voltar {
  display: inline-block;
  margin-top: var(--esp-4);
  color: var(--tiffany);
  text-decoration: underline;
  text-underline-offset: 3px;
}