/* ==========================================================
   Componentes compartilhados pelas páginas de venda.
   Estavam dentro de lp-viva.css até a página do Método VIVA
   precisar dos mesmos cabeçalho, rodapé e accordion — mantê-los
   duplicados nos dois arquivos garantiria que divergissem.

   O que é específico de cada página fica no CSS dela: a grade do FAQ
   com o card de contato, por exemplo, só existe na LP das Consultorias.
   ========================================================== */

/* ---------- CABEÇALHO ----------
   Efeito vidro. Sem ele, os links da direita caem sobre o céu claro da foto
   do hero e o contraste do texto branco desabava para 1,97:1 em "Qual
   escolher" e 1,64:1 em "Dúvidas" — o mínimo AA é 4,5:1.

   O fundo opaco é o padrão, não o vidro: se o navegador não suportar
   backdrop-filter, uma barra translúcida sem desfoque continuaria ilegível.
   Só quando o desfoque existe é que a barra fica translúcida. Assim o pior
   caso é uma barra preta sólida, que lê perfeitamente.

   58% de preto sobre o ponto mais claro do céu resulta em 6,7:1 de
   contraste — e o desfoque puxa ainda mais para baixo, porque mistura o
   lado escuro da diagonal. */
.cabecalho {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  padding-block: .7rem;
  background: var(--preto);
  border-bottom: 1px solid transparent;
}

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .cabecalho {
    background: color-mix(in srgb, var(--preto) 58%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: color-mix(in srgb, var(--branco) 10%, transparent);
  }
}
.cabecalho-interno { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
/* aspect-ratio reserva a altura antes do SVG carregar, para o cabeçalho
   não pular. 565/221 é a proporção real do logotipo.
   É o logo que define a altura da barra (48px contra ~42px do botão), então
   encolher a barra passa por ele. */
.cabecalho-marca img { width: 124px; aspect-ratio: 565 / 221; }

.cabecalho-nav { display: flex; align-items: center; gap: 2rem; }
.cabecalho-nav a { color: var(--branco); font-size: .95rem; font-weight: 500; }
.cabecalho-nav a:hover { color: var(--roxo-digital); }
.cabecalho-cta { padding: .75rem 1.4rem; }

.cabecalho-menu { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.cabecalho-menu span { width: 26px; height: 2px; background: var(--branco); border-radius: 2px; }

@media (max-width: 900px) {
  .cabecalho-menu { display: flex; }
  .cabecalho-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
    /* O painel do menu fica quase opaco, não translúcido como a barra:
       ele cobre conteúdo da página e precisa de leitura limpa. O desfoque
       entra só para casar com o vidro da barra acima. */
    background: var(--preto);
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: none;
  }
  @supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
    .cabecalho-nav {
      background: color-mix(in srgb, var(--preto) 92%, transparent);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
  }
  .cabecalho-nav.aberto { display: flex; }
}

/* ---------- FAQ ---------- */
.faq { background: var(--branco); padding-block: var(--sec-y); }
.faq-cabecalho { margin-bottom: 2rem; }
.faq-item { border-bottom: 1px solid var(--borda); }

.faq-pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding: 1.375rem 0;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--texto);
}
.faq-pergunta:hover { color: var(--roxo-profundo); }
.faq-pergunta:focus-visible { outline: 3px solid var(--roxo-digital); outline-offset: 2px; }

.faq-seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--raio-sm);
  background: var(--lilas-suave);
  transition: transform .25s ease, background-color .25s ease;
}
.faq-seta::before {
  content: '';
  width: .45rem; height: .45rem;
  border: solid var(--roxo-profundo);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}
.faq-pergunta[aria-expanded="true"] .faq-seta { transform: rotate(180deg); background: var(--roxo-digital); }
.faq-pergunta[aria-expanded="true"] .faq-seta::before { border-color: var(--branco); }

.faq-resposta { padding-bottom: 1.5rem; }
.faq-resposta p { color: var(--texto-suave); font-size: .95rem; max-width: 62ch; }

/* ---------- RODAPÉ ---------- */
.rodape { background: var(--preto); color: var(--cinza-lilas); padding-block: 3rem; }
.rodape-interno { display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.rodape-logo { width: 168px; aspect-ratio: 565 / 221; }
.rodape-links { display: flex; gap: 1.75rem; }
.rodape-links a { font-size: .95rem; }
.rodape-links a:hover { color: var(--roxo-digital); }
.rodape-legal { font-size: .8rem; }


/* ---------- MARCA DE PLAY ----------
   Usada nas duas páginas sobre o poster do vídeo. A moldura do vídeo (o
   recorte, a proporção) é de cada página; isto aqui é só o botão. */
/* Play decorativo (ver o comentário no HTML): pulsa para puxar o olho, mas
   não é controle — sem cursor de clique, fora do Tab, invisível para
   leitores de tela. Vira <button> quando o vídeo existir. */
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: var(--sombra-alta);
}
.video-play span {
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 16px solid var(--roxo-profundo);
  border-block: 10px solid transparent;
}
/* Dois anéis com meio ciclo de defasagem: um saindo enquanto o outro
   começa, para a pulsação não ter buraco. */
.video-play::before,
.video-play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--branco);
  animation: pulso-play 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}
.video-play::after { animation-delay: 1.2s; }
@keyframes pulso-play {
  0%        { transform: scale(1);    opacity: .75; }
  70%, 100% { transform: scale(1.75); opacity: 0; }
}
/* Sem movimento, o anel vira um halo parado — o destaque continua existindo
   sem nada piscando na tela. */
@media (prefers-reduced-motion: reduce) {
  .video-play::before { animation: none; transform: scale(1.28); opacity: .5; }
  .video-play::after { display: none; }
}


/* ---------- LISTA COM TIQUE ----------
   A base é desenhada para fundo claro: disco lilás com o tique roxo
   por cima. Sobre fundo escuro cada página esconde o disco e deixa só
   o tique, senão vira um ponto branco duro. */
.lista-check { list-style: none; padding: 0; display: grid; gap: .75rem; }
.lista-check li {
  position: relative;
  padding-left: 2rem;
  font-size: .95rem;
  line-height: 1.5;
}
.lista-check li::before {
  content: '';
  position: absolute;
  left: 0; top: .3rem;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--lilas-suave);
}
.lista-check li::after {
  content: '';
  position: absolute;
  left: .43rem; top: .52rem;
  width: .3rem; height: .58rem;
  border: solid var(--roxo-profundo);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}