/* ==========================================================
   Método VIVA — landing page
   Cabeçalho, rodapé, accordion do FAQ e a marca de play vêm de
   componentes.css. Aqui fica só o que é desta página.

   O arco de cor é o oposto do da LP de consultorias: lá a página vai do
   escuro (ela sozinha) ao claro (acompanhada). Aqui o produto é uma
   jornada guiada, então o escuro abre e fecha, e o miolo — o que ela
   recebe, para quem é, quanto custa — fica claro e direto.
   ========================================================== */

/* ---------- TOPO (promessa + vídeo + as duas saídas) ----------
   Duas colunas em vez de uma coluna centralizada: a promessa à esquerda, o
   vídeo à direita, e as duas saídas atravessando as duas embaixo. Tudo
   centralizado numa coluna só era texto solto sobre fundo escuro — sem
   âncora nenhuma, e com o vídeo caindo abaixo da primeira tela. */
.topo {
  position: relative;
  background: var(--preto);
  color: var(--branco);
  overflow: hidden;
  padding-block: clamp(7rem, 12vw, 9rem) var(--sec-y);
}
/* A mesma textura de monograma das seções escuras da outra página. */
.topo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/padrao-monograma.png') repeat;
  background-size: 132px 123px;
  opacity: .05;
  pointer-events: none;
}
/* Uma luz roxa atrás do vídeo, saindo do canto: o fundo era chapado do topo
   ao fim da dobra, e é ela que dá profundidade e puxa o olho para a direita,
   onde está o play. */
.topo::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--roxo-profundo) 55%, transparent), transparent 68%);
  pointer-events: none;
}
/* z-index explícito: ::after é o ÚLTIMO filho na ordem da árvore, então
   sem isto a luz roxa pinta POR CIMA do conteúdo e lavava a foto do vídeo
   inteira. Não basta position:relative. */
.topo > .container { position: relative; z-index: 1; }

.topo-grade {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* ----- coluna da esquerda ----- */
.topo-marca {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--roxo-digital);
}
.topo-traco { width: 2rem; height: 2px; background: var(--roxo-digital); }
/* O "60 dias" é o número mais concreto da oferta e estava enterrado no meio
   do parágrafo. Aqui ele entra como etiqueta, ao lado do nome do produto. */
.topo-chip {
  padding: .2rem .5rem;
  border-radius: 4px;
  background: var(--roxo-profundo);
  color: var(--branco);
  letter-spacing: .1em;
}
.topo h1 { max-width: 12ch; margin-bottom: 1.5rem; }
.topo-texto { color: var(--cinza-lilas); max-width: 44ch; margin-bottom: 1.75rem; }

/* A frase curta é o gancho da página, e estava passando como só mais um
   parágrafo em negrito. Agora é um grito: caixa alta, peso 900 e um grifo
   roxo cobrindo a metade de baixo das letras, como marca-texto.

   Grifo e não pílula: uma cápsula roxa arredondada aqui pareceria botão —
   e há dois botões de verdade poucos centímetros abaixo. O grifo chama
   atenção sem prometer clique.

   box-decoration-break: clone faz o grifo se repetir em cada linha quando
   a frase quebra; sem isso a segunda linha sairia sem fundo. */
.topo-grito {
  display: inline;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 900;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: -.01em;
  /* As paradas são em % da CAIXA DE LINHA, não das letras — estimar isso a
     olho errou duas vezes. Medido no render: a faixa precisa começar na
     metade das letras e fechar logo abaixo do cedilha do "Ç".
     Ao mexer no font-size ou no line-height, medir de novo. */
  background-image: linear-gradient(
    transparent 50%,
    color-mix(in srgb, var(--roxo-profundo) 88%, transparent) 50% 88%,
    transparent 88%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .4rem;
}

/* ----- coluna da direita: o vídeo ----- */
.video-moldura {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-lg);
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 40%, transparent);
  background: linear-gradient(160deg, var(--roxo-profundo), var(--grafite));
  box-shadow: var(--sombra-alta);
}
.video-moldura img { width: 100%; height: 100%; object-fit: cover; }
/* A chamada vira uma pílula miúda sob o vídeo. Como linha solta ela lia
   como legenda e passava batida; fechada numa pílula com um ponto pulsando
   ela vira aviso. inline-flex para a pílula ter a largura do texto, e o
   centro vem do text-align do bloco. */
.topo-midia { text-align: center; }
.topo-chamada {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .875rem;
  padding: .4rem .8rem .4rem .65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 35%, transparent);
  background: color-mix(in srgb, var(--roxo-profundo) 35%, transparent);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--branco);
}
/* O ponto pisca; o texto, não. Um halo sai dele em cada ciclo — é o mesmo
   gesto do play sobre o vídeo, em miniatura. */
.topo-pisca {
  position: relative;
  flex: none;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--roxo-digital);
  animation: pisca 1.8s ease-in-out infinite;
}
.topo-pisca::after {
  content: '';
  position: absolute;
  inset: -.25rem;
  border-radius: 50%;
  border: 1px solid var(--roxo-digital);
  animation: pisca-halo 1.8s ease-out infinite;
}
@keyframes pisca {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
@keyframes pisca-halo {
  0%        { transform: scale(.6); opacity: .9; }
  70%, 100% { transform: scale(2); opacity: 0; }
}
/* Sem movimento o ponto fica aceso e o halo vira um anel parado: a pílula
   continua se destacando, sem nada pulsando na tela. */
@media (prefers-reduced-motion: reduce) {
  .topo-pisca, .topo-pisca::after { animation: none; }
  .topo-pisca::after { opacity: .5; }
}

/* ----- o fecho, atravessando as duas colunas ----- */
.topo-fecho {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid color-mix(in srgb, var(--branco) 10%, transparent);
  text-align: center;
}
.topo-ponte {
  max-width: 42ch;
  margin-inline: auto;
  font-size: 1.0625rem;
}
/* A seta da copy, desenhada: um caractere "↓" solto herdaria a fonte de
   texto e ficaria fino demais nesse tamanho. */
.topo-seta {
  display: block;
  width: 1rem; height: 1rem;
  margin: 1.25rem auto clamp(1.75rem, 4vw, 2.25rem);
  border: solid var(--roxo-digital);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.topo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  justify-content: center;
}
.btn--grande { padding: 1.125rem 2rem; font-size: 1.0625rem; }

@media (max-width: 900px) {
  /* Empilha na ordem do HTML: promessa e depois vídeo. Reordenar por CSS
     exigiria display:contents na coluna de texto — e isso apaga a caixa do
     elemento, levando junto a opacidade da revelação no scroll. */
  .topo-grade { grid-template-columns: 1fr; }
  .topo::after { width: 120%; right: -30%; }
}
@media (max-width: 560px) {
  /* Empilhados e da largura toda: no celular os dois viram alvo de polegar. */
  .topo-acoes { flex-direction: column; }
  .topo-acoes .btn { width: 100%; }
}

/* ---------- O QUE VOCÊ RECEBE ----------
   Sete cartões iguais em duas colunas deixavam a seção plana e o sétimo
   órfão. Agora o programa em si atravessa a grade como bloco largo e os
   outros seis fecham duas fileiras de três, cada um com o próprio ícone. */
.recebe { background: var(--branco); padding-block: var(--sec-y); }
.recebe-cabecalho { text-align: center; margin-bottom: 2.5rem; }
.recebe-cabecalho .titulo-secao { margin-inline: auto; }

.recebe-grade {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* ----- o bloco largo ----- */
.recebe-destaque {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .25rem 1.75rem;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--lilas-suave);
  border: 1px solid var(--lilas-claro);
  border-radius: var(--raio-lg);
}
.recebe-numero {
  grid-row: span 2;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  color: var(--roxo-profundo);
  /* O fio à direita separa o número do texto sem precisar de mais uma
     caixa dentro da caixa. */
  padding-right: clamp(1.5rem, 3vw, 2rem);
  border-right: 1px solid var(--lilas-claro);
  white-space: nowrap;
}
.recebe-numero strong {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1;
  margin-right: .25rem;
}
.recebe-nome {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 900;
  line-height: 1.2;
}
.recebe-apoio { color: var(--texto-suave); font-size: .95rem; }

/* ----- os seis ----- */
.recebe-item {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: clamp(1.25rem, 2.5vw, 1.5rem);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-card);
  transition: border-color .25s ease, transform .25s ease;
}
.recebe-item:hover { border-color: var(--roxo-digital); transform: translateY(-2px); }
.recebe-item p { font-weight: 500; }
/* Ícone contornado sobre lilás: --roxo-profundo dá 9,35:1 aqui, bem acima
   dos 3:1 que um elemento gráfico precisa. */
.recebe-icone {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--raio-sm);
  background: var(--lilas-suave);
  color: var(--roxo-profundo);
}
.recebe-icone svg { width: 1.4rem; height: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .recebe-item { transition: none; }
  .recebe-item:hover { transform: none; }
}
@media (max-width: 900px) {
  .recebe-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .recebe-grade { grid-template-columns: 1fr; }
  /* Empilhado, o número e o texto voltam a ser uma coluna só: o fio
     vertical entre eles não faz sentido sem duas colunas. */
  .recebe-destaque { grid-template-columns: 1fr; gap: .5rem; }
  .recebe-numero {
    grid-row: auto;
    padding-right: 0;
    border-right: 0;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--lilas-claro);
    margin-bottom: .25rem;
  }
}

/* ---------- PARA QUEM É ----------
   É o momento de identificação da página, e estava lendo como nota de
   rodapé: três parágrafos miúdos em cards brancos iguais aos de cima.

   A seção passa a ser escura. Fora o peso que isso dá, cria um respiro
   entre duas seções claras seguidas — e o conteúdo aqui é o da dor
   ("já tentaram de tudo e continuam frustradas"), que pede o escuro. O
   claro volta na oferta, que é a saída. */
.perfis {
  position: relative;
  background: var(--preto);
  color: var(--branco);
  overflow: hidden;
  padding-block: var(--sec-y);
}
.perfis::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/padrao-monograma.png') repeat;
  background-size: 132px 123px;
  opacity: .05;
  pointer-events: none;
}
.perfis > .container { position: relative; }
.perfis-cabecalho { text-align: center; margin-bottom: 2.5rem; }
.perfis-cabecalho .titulo-secao { margin-inline: auto; }
.perfis .selo { color: var(--roxo-digital); }

.perfis-grade {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}
.perfil {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--grafite);
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 28%, transparent);
  border-radius: var(--raio-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color .25s ease, transform .25s ease;
}
.perfil:hover { border-color: var(--roxo-digital); transform: translateY(-3px); }
/* O texto cresce e vira quase uma afirmação: é curto, e em corpo de leitura
   sumia. --cinza-lilas dá 6,68:1 sobre o grafite. */
.perfil p {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: var(--cinza-lilas);
}
/* O núcleo de cada frase em branco: é o que a pessoa tem de reconhecer em
   si. Branco e não roxo digital — sobre o grafite o roxo dá 4,18:1, que
   passa raspando como texto grande e falha se alguém reduzir o corpo. O
   roxo fica no ícone e na borda, onde é elemento gráfico e 3:1 basta. */
.perfil strong { color: var(--branco); font-weight: 700; }
.perfil-icone {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--roxo-profundo) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 45%, transparent);
  color: var(--roxo-digital);
}
.perfil-icone svg { width: 1.5rem; height: 1.5rem; }

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

/* ---------- INVESTIMENTO ----------
   Um card só: preço, o que está incluso e a garantia como faixa de rodapé.
   Antes eram dois blocos vizinhos, e a garantia flutuava num vazio à
   direita — metade da dobra era espaço vago. */
.oferta { background: var(--branco); padding-block: var(--sec-y); }
.oferta-cartao {
  max-width: 58rem;
  margin-inline: auto;
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--roxo-profundo) 60%, transparent), transparent 72%),
    var(--grafite);
  color: var(--branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-alta);
}
.oferta-corpo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.oferta-cartao .selo { color: var(--roxo-digital); }
.oferta-nome {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.oferta-lista { gap: .5rem; }
.oferta-lista li { padding-left: 1.35rem; font-size: .95rem; }
/* Sobre fundo escuro o disco branco do tique vira um ponto duro; fica só
   o tique, em roxo digital. */
.oferta-lista li::before { display: none; }
.oferta-lista li::after { left: .1rem; top: .42rem; border-color: var(--roxo-digital); }

/* O preço ganha caixa própria dentro do card: é o bloco de decisão, e
   solto na coluna ele lia como só mais um parágrafo grande. */
.oferta-preco-caixa {
  width: min(26rem, 100%);
  text-align: center;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--raio-md);
  background: color-mix(in srgb, var(--preto) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 30%, transparent);
}
.oferta-preco {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
}
.oferta-parcelas { color: var(--cinza-lilas); font-size: .95rem; margin-bottom: 1.25rem; }
/* padding lateral menor que o padrão do .btn: 26rem de caixa com o padding
   cheio ainda quebrava "Quero começar minha transformação" em duas linhas.
   Medido — não estimado. */
.oferta-cta { width: 100%; padding-inline: 1rem; }

/* A garantia como faixa de rodapé do card, não como vizinha: é onde ela
   mora em qualquer checkout — colada no botão que a pessoa vai apertar. */
.oferta-garantia {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem clamp(1.75rem, 4vw, 2.75rem);
  background: color-mix(in srgb, var(--preto) 55%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--branco) 10%, transparent);
}
.oferta-garantia p { color: var(--cinza-lilas); font-size: .875rem; }
.oferta-garantia strong { color: var(--branco); }
.garantia-selo {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--roxo-profundo) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--roxo-digital) 45%, transparent);
  color: var(--roxo-digital);
}
.garantia-selo svg { width: 1.4rem; height: 1.4rem; }

@media (max-width: 780px) {
  /* A caixa de preço desce para baixo da lista e ocupa a largura toda:
     lado a lado, as duas colunas ficariam estreitas demais. */
  .oferta-corpo { grid-template-columns: 1fr; }
  .oferta-preco-caixa { width: 100%; }
}

/* ---------- FAQ ----------
   O accordion mora em componentes.css. Aqui, ao contrário da LP de
   consultorias, não há card de contato ao lado: são três perguntas curtas,
   e uma coluna estreita e centralizada lê melhor que duas. */
/* Off-white e não branco: com "para quem é" agora escura, a oferta e o FAQ
   ficariam como dois brancos colados e a página perderia o ritmo. */
.faq { background: var(--off-white); padding-block: var(--sec-y); }
.faq-interno { max-width: 46rem; margin-inline: auto; }
.faq-cabecalho { text-align: center; }
.faq-cabecalho .titulo-secao { margin-inline: auto; }

/* ---------- FECHAMENTO ---------- */
.final {
  position: relative;
  background: var(--preto);
  color: var(--branco);
  overflow: hidden;
  padding-block: var(--sec-y);
}
.final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/padrao-monograma.png') repeat;
  background-size: 132px 123px;
  opacity: .05;
  pointer-events: none;
}
.final-interno { position: relative; text-align: center; }
.final-frase {
  color: var(--cinza-lilas);
  max-width: 46ch;
  margin: 0 auto .875rem;
}
.final-titulo {
  max-width: 20ch;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}

/* ---------- BOTÃO QUE PULSA ----------
   Usado nos três botões de compra da página: o do topo, o do investimento
   e o do fechamento.

   Quem pulsa são DUAS ondas atrás do botão, não o botão. Escalar o próprio
   botão faria o alvo mudar de tamanho debaixo do cursor — ruim para quem
   tem pouca precisão de movimento, justo na hora de clicar. As ondas são
   decorativas, sem pointer-events, e o alvo fica parado.

   A onda é feita com o spread do box-shadow, não com scale. Os botões são
   bem mais largos que altos: escalar afastava o anel dezenas de pixels nas
   laterais e uns poucos em cima e embaixo, e a onda sumia. O spread cresce
   igual nos quatro lados e acompanha o border-radius sozinho.

   Meio ciclo de defasagem entre as duas ondas, como no play do vídeo, para
   a pulsação não ter buraco. */
.btn--pulsa { position: relative; }
.btn--pulsa::before,
.btn--pulsa::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: pulso-cta 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}
.btn--pulsa::after { animation-delay: 1.2s; }
@keyframes pulso-cta {
  0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--roxo-digital) 80%, transparent); }
  70%, 100% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--roxo-digital) 0%, transparent); }
}
/* Ao passar o mouse ou chegar pelo teclado, o pulso para: a pessoa já
   achou o botão, e continuar chamando vira ruído. */
.btn--pulsa:hover::before, .btn--pulsa:hover::after,
.btn--pulsa:focus-visible::before, .btn--pulsa:focus-visible::after {
  animation-play-state: paused;
  opacity: 0;
}
/* Sem movimento sobra um anel parado em volta do botão: o destaque
   continua, sem nada pulsando. */
@media (prefers-reduced-motion: reduce) {
  .btn--pulsa::before {
    animation: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--roxo-digital) 40%, transparent);
  }
  .btn--pulsa::after { display: none; }
}
}