/* Mistério de Hoje — estilo do quiz, com a mesma identidade do app (compartilhado/telas-app.css):
   paleta do site misteriodehoje.online (azul-marinho, ouro, creme), bloco de cor no topo,
   cards arredondados com sombra suave, títulos grandes em negrito, botões grandes.
   Celular e pouca prática: base de 20 px, contraste AA conferido por conta
   (ferramentas/conferir-contraste.mjs), toque de 48 px ou mais, fontes do sistema.
   Resposta marcada em cor neutra (nada de verde, vermelho, certo ou errado).
   2026-10-19 (teste de Luis Henrique, "cores mais bonitas, que sejam mais atraentes"): mais vida e
   calor com a mesma âncora azul: fundo creme quente em degradê, topo em degradê azul com brilho
   dourado, ouro com mais presença (botão, faixas dos cards, medalhão das opções), azul vivo nos
   números e rótulos, e na T15 um selo e uma cor por passo, ligados por um fio (azul → azul vivo → ouro). */

:root {
  /* Marca: os mesmos valores de .tela-app em compartilhado/telas-app.css (o contraste confere que são iguais).
     As telas do app dentro da moldura usam só estas. */
  --marca: #1b2a5c;
  --marca-escura: #14204a;
  --marca-media: #2f4a8f;
  --ouro: #e8b630;
  --ouro-claro: #f6d77a;
  --fundo: #fbf7ee;
  --fundo-2: #f3ecdc;
  --cartao: #ffffff;
  --texto: #1a1f33;
  --texto-suave: #5b6177;
  --texto-no-topo: #f3ecdc;
  --linha: #e6dfcc;
  --foco: #14204a;
  --foco-no-topo: #f6d77a;
  /* Só do quiz (2026-10-19). Cada par de cor está em ferramentas/conferir-contraste.mjs. */
  --marca-viva: #2c4cb0; /* azul vivo: fim do degradê do topo, números, rótulos, selo do passo 2 */
  --ouro-vivo: #f7c948; /* começo do degradê do botão principal */
  --ouro-forte: #e8a317; /* fim do degradê do botão principal */
  --ouro-texto: #8a5a00; /* dourado escuro, para texto e para o ✓ */
  --dourado-suave: #fff1cf; /* medalhão das opções, destaque da T12, card suave */
  --borda-quente: #efe0bd; /* borda decorativa das opções e dos cards */
  --azul-suave: #eaf0ff; /* fundo da opção marcada */
  --fundo-quiz: #fcf3e3; /* fundo creme quente, em cima */
  --fundo-quiz-fim: #f8ead2; /* ... e embaixo */
  --trilho: #eadfc6; /* trilho da barra de progresso */
  --brilho-topo: rgba(246, 215, 122, 0.1); /* brilho dourado no canto do topo (o contraste confere o pior ponto) */
  --raio: 20px;
  --sombra: 0 10px 30px rgba(20, 32, 74, 0.1);
  --sombra-quente: 0 12px 30px rgba(138, 90, 0, 0.12);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: var(--fundo-quiz);
  background-image: linear-gradient(180deg, var(--fundo-quiz) 0%, var(--fundo-quiz-fim) 100%);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.55;
}

.tela-quiz {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

/* Entrada suave: só o deslocamento (se não rodar, a tela aparece inteira) */
.conteudo-quiz > * {
  animation: quiz-entrar 0.25s ease-out both;
}

@keyframes quiz-entrar {
  from {
    transform: translateY(10px);
  }
  to {
    transform: none;
  }
}

/* ---- Voltar + barra de progresso ---- */
.cabecalho-quiz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
}

.botao-voltar {
  min-height: 3rem;
  padding: 0.5rem 1.15rem;
  border: 2px solid var(--marca);
  border-radius: 999px;
  background: var(--cartao);
  color: var(--marca);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.progresso {
  flex: 1 1 12rem;
}

.rotulo-progresso {
  margin: 0 0 0.35rem;
  color: var(--marca-viva);
  font-size: 1rem;
  font-weight: 800;
}

.barra {
  height: 0.75rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--trilho);
}

.barra-cheia {
  height: 100%;
  border-radius: 999px;
  background-color: var(--marca-viva);
  background-image: linear-gradient(90deg, var(--marca) 0%, var(--marca-viva) 100%);
  box-shadow: inset -0.35rem 0 0 var(--ouro); /* a ponta dourada mostra até onde já foi */
}

/* ---- Títulos e texto ---- */
h1 {
  margin: 1.5rem 0 1rem;
  color: var(--marca);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1:focus {
  outline: none;
}

h2 {
  margin: 0 0 0.5rem;
  color: var(--marca);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
}

h3 {
  margin: 1rem 0 0.25rem;
  color: var(--marca-media);
  font-size: 1.1rem;
}

p {
  margin: 0 0 1rem;
}

.subtitulo {
  font-size: 1.15rem;
}

.microcopy,
.aviso-mockup {
  color: var(--texto-suave);
  font-size: 1rem;
}

/* ---- Bloco de cor no topo (capa e resultado): degradê azul, brilho dourado no canto, fio de ouro embaixo ---- */
.bloco-topo-quiz {
  margin: 0 -1rem 1.5rem;
  padding: 1rem 1.25rem 1.75rem;
  border-radius: 0 0 28px 28px;
  background-color: var(--marca);
  background-image: radial-gradient(circle at 100% 0%, var(--brilho-topo) 0, rgba(246, 215, 122, 0) 11rem),
    linear-gradient(160deg, var(--marca) 0%, var(--marca-viva) 100%);
  box-shadow: inset 0 -5px 0 var(--ouro), 0 14px 30px rgba(27, 42, 92, 0.22);
  color: #ffffff;
}

.bloco-topo-quiz.no-meio {
  margin: 1rem 0 1.5rem;
  border-radius: var(--raio);
}

@media (min-width: 42rem) {
  .bloco-topo-quiz {
    margin: 1rem 0 1.5rem;
    border-radius: 28px;
  }
}

.bloco-topo-quiz h1 {
  margin: 0.75rem 0;
  color: #ffffff;
  font-size: 1.9rem;
}

.bloco-topo-quiz.no-meio h1 {
  margin-top: 0;
}

.bloco-topo-quiz .subtitulo {
  color: var(--texto-no-topo);
}

.bloco-topo-quiz .marca-quiz {
  color: var(--ouro-claro);
  letter-spacing: 0.02em;
}

.bloco-topo-quiz p:last-child {
  margin-bottom: 0;
}

.marca-quiz {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.data-roteiro {
  color: var(--ouro-claro);
  font-size: 1.2rem;
  font-weight: 700;
}

.imagem-capa {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 1rem;
  border-radius: var(--raio);
}

/* ---- Cards: brancos, com uma faixa de ouro no alto ---- */
.card-quiz {
  margin: 0 0 1rem;
  padding: 1.25rem 1.25rem 0.5rem;
  border: 1px solid var(--borda-quente);
  border-top: 5px solid var(--ouro);
  border-radius: var(--raio);
  background: var(--cartao);
  box-shadow: var(--sombra-quente);
}

.card-suave {
  border: 2px solid var(--borda-quente);
  background: var(--dourado-suave);
  box-shadow: none;
}

/* ---- Botão principal (também o link da T16): ouro em degradê, mais presente ---- */
.botao-principal-quiz {
  display: block;
  width: 100%;
  min-height: 3.75rem;
  margin: 1.5rem 0 0.75rem;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--ouro);
  background-image: linear-gradient(180deg, var(--ouro-vivo) 0%, var(--ouro-forte) 100%);
  color: var(--marca-escura);
  font: inherit;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 12px 26px rgba(232, 163, 23, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.botao-principal-quiz:active {
  transform: scale(0.985);
}

/* ---- Opções das perguntas ---- */
.opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1rem 0;
}

.opcao {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.85rem 1rem;
  border: 3px solid var(--borda-quente);
  border-radius: var(--raio);
  background: var(--cartao);
  box-shadow: var(--sombra-quente);
  color: var(--texto);
  font: inherit;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.opcao:active {
  transform: scale(0.985);
}

/* O emoji num medalhão dourado */
.opcao .emoji {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--dourado-suave);
  font-size: 1.4rem;
  line-height: 1;
}

.opcao .apoio {
  display: block;
  margin-top: 0.15rem;
  color: var(--texto-suave);
  font-size: 1rem;
}

.opcao.marcada {
  border-color: var(--marca-viva);
  background: var(--azul-suave);
  box-shadow: 0 10px 24px rgba(44, 76, 176, 0.18);
}

.opcao.marcada .emoji {
  background: var(--cartao);
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.bloco-topo-quiz a:focus-visible {
  outline-color: var(--foco-no-topo);
}

/* ---- Eco da P6 no resultado (o estado 2 da T7 saiu em 2026-10-19, e com ele a tabela e a citação) ---- */
.eco {
  font-weight: 700;
}

/* ---- T8 ---- */
.legenda {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

/* a lista da T8 é também um card: o padding do card vale (antes, o texto encostava na borda) */
.legenda.card-quiz {
  padding: 1.25rem 1.25rem 0.5rem;
}

.legenda li {
  margin: 0 0 0.75rem;
}

.marca-ok {
  color: var(--ouro-texto);
  font-weight: 800;
}

.impacto {
  color: var(--marca);
  font-size: 1.35rem;
  font-weight: 800;
}

/* ---- T12 ---- */
.destaque {
  padding: 0.85rem 1rem;
  border-left: 6px solid var(--ouro);
  border-radius: 0 14px 14px 0;
  background: var(--dourado-suave);
  color: var(--marca);
  font-weight: 800;
}

/* ---- T13 ---- */
.rotulo-amostra {
  margin: 0;
  color: var(--ouro-texto);
  font-size: 1rem;
  font-weight: 800;
}

.amostra h3 {
  color: var(--marca-viva);
}

.amostra h2 {
  margin-top: 0.4rem;
}

.amostra-parte h3 {
  margin-top: 0.75rem;
}

.depois-amostra {
  margin: 0.5rem 0 1rem;
  color: var(--texto-suave);
  font-size: 1rem;
}

/* ---- T14 ---- */
.carregamento {
  padding: 0;
  list-style: none;
}

.carregamento li {
  margin: 0 0 0.85rem;
}

.misterios-de-hoje {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.misterios-de-hoje li {
  margin: 0 0 0.45rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--ouro);
}

.linha {
  margin: 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--borda-quente);
}

.jeito h2 + .linha {
  border-top: 0;
  padding-top: 0.25rem;
}

.linha-ponte {
  margin-bottom: 0.75rem;
}

.rotulo-linha {
  margin: 0 0 0.25rem;
  color: var(--marca-viva);
  font-size: 1rem;
}

.frase {
  margin: 0;
}

/* ---- T15: um selo e uma cor por passo (azul → azul vivo → ouro), ligados por um fio ---- */
.passo {
  --cor-passo: var(--marca);
  position: relative;
  margin-bottom: 1.75rem;
  border-top-color: var(--cor-passo);
}

.passo-2 {
  --cor-passo: var(--marca-viva);
}

.passo-3 {
  --cor-passo: var(--ouro);
}

/* o fio entre um passo e o seguinte, na cor de um até a do outro */
.passo + .passo::before {
  content: "";
  position: absolute;
  top: calc(-1.75rem - 5px);
  left: 2.25rem;
  width: 5px;
  height: 1.75rem;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--cor-anterior, var(--marca)) 0%, var(--cor-passo) 100%);
}

.passo-3::before {
  --cor-anterior: var(--marca-viva);
}

.rotulo-passo {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--cor-passo, var(--marca));
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

.passo-3 .rotulo-passo {
  color: var(--marca-escura);
}

.passo h2 {
  margin-top: 0.6rem;
}

/* ---- Rodapé de todas as telas ---- */
.rodape {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda-quente);
  color: var(--texto-suave);
  font-size: 1rem;
}

.links-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.link-politica,
.link-preferencias {
  display: inline-block;
  min-height: 3rem;
  padding: 0.6rem 0;
  border: 0;
  background: none;
  color: var(--marca);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- Aviso de cookies: embaixo, sem cobrir a tela; "aceitar" e "recusar" com o mesmo peso ---- */
.aviso-cookies {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  max-height: 45vh;
  overflow: auto;
  padding: 1.1rem 1rem 1rem;
  border-top: 5px solid var(--ouro);
  border-radius: var(--raio) var(--raio) 0 0;
  background: var(--cartao);
  box-shadow: 0 -8px 30px rgba(20, 32, 74, 0.18);
}

.aviso-cookies p {
  max-width: 40rem;
  margin: 0 auto 0.75rem;
}

.aviso-cookies-botoes {
  display: flex;
  gap: 0.75rem;
  max-width: 40rem;
  margin: 0 auto;
}

.botao-aviso {
  flex: 1 1 0;
  min-height: 3rem;
  border: 2px solid var(--marca);
  border-radius: 999px;
  background: var(--cartao);
  color: var(--marca);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body.com-aviso {
  padding-bottom: 14rem;
}

/* ---- Mini VSL: a tela do app (375 x 667) escalada dentro de uma moldura de celular ---- */
.demo {
  margin: 1rem 0;
}

.demo-moldura {
  position: relative;
  width: min(16rem, 75vw);
  margin: 0 auto 1rem;
  overflow: hidden;
  border: 8px solid var(--marca-escura);
  border-radius: 1.8rem;
  background: var(--marca-escura);
  box-shadow: 0 0 0 3px rgba(232, 182, 48, 0.45), var(--sombra);
}

.demo-moldura::before {
  content: "";
  display: block;
  padding-top: 177.87%; /* 667 / 375 */
}

.demo-parada .demo-moldura {
  width: min(13rem, 62vw);
}

.demo-tela {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 667px;
  overflow: hidden;
  transform: scale(var(--escala, 0.6));
  transform-origin: 0 0;
}

.demo-quadro {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: var(--fundo);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.demo-quadro.ativo {
  opacity: 1;
}

/* Na demonstração, as telas não fazem a entrada suave (cada quadro já é uma tela parada) */
.demo .tela-app .conteudo-app > * {
  animation: none;
}

/* A faixa do app fica por cima do conteúdo que rola, como na tela de verdade */
.demo-quadro .topo {
  position: relative;
  z-index: 1;
}

.demo-rolagem {
  position: relative;
  transform: translateY(var(--rolagem, 0));
  transition: transform var(--duracao-rolagem, 0ms) ease-in-out;
}

.tela-app .card-link.demo-tocado {
  box-shadow: 0 0 0 3px var(--marca-media), var(--sombra);
}

.tela-app .card-link.demo-tocado::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  border-radius: 50%;
  background: rgba(47, 74, 143, 0.25);
  animation: demo-toque 0.7s ease-out both;
}

@keyframes demo-toque {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}

/* =====================================================================================
   PÁGINA DE VENDAS (2026-10-19): a tela depois da T15, com a identidade do quiz.
   Celular primeiro (360 px). Cada par de cor novo está em ferramentas/conferir-contraste.mjs.
   ===================================================================================== */
.pv-topo .subtitulo {
  font-size: 1.1rem;
}

.pv-bloco {
  margin: 0 0 2.25rem;
}

.pv-bloco > h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 1.25;
}

.pv-bloco h3 {
  margin: 0 0 0.4rem;
  color: var(--marca);
  font-size: 1.2rem;
  line-height: 1.3;
}

.pv-bloco .card-quiz > p:last-child {
  margin-bottom: 0.75rem;
}

/* ---- Botão secundário (o "Quero só o básico" e o "Não, quero só o básico") ---- */
.botao-secundario-quiz {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  margin: 1rem 0 0.75rem;
  padding: 0.9rem 1.25rem;
  border: 2px solid var(--marca);
  border-radius: 999px;
  background: var(--cartao);
  color: var(--marca);
  font: inherit;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* ---- Marcadores de TESTE (link da Hubla e data do áudio ainda vazios): visíveis de propósito ---- */
.pv-pendente {
  cursor: not-allowed;
}

.pv-rotulo-botao {
  display: block;
}

.pv-marcador-botao {
  display: block;
  margin: 0.4rem auto 0;
  padding: 0.15rem 0.6rem;
  border: 2px dashed var(--texto);
  border-radius: 8px;
  background: var(--cartao);
  color: var(--texto);
  font-size: 1rem;
  font-weight: 700;
}

.pv-marcador {
  padding: 0 0.25rem;
  border-radius: 4px;
  background: var(--ouro-claro);
  color: var(--texto);
  font-weight: 700;
  outline: 2px dashed var(--texto);
}

/* ---- 3 · Cartões com números ---- */
.pv-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-numero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.9rem 0.35rem;
  border: 1px solid var(--borda-quente);
  border-top: 5px solid var(--ouro);
  border-radius: var(--raio);
  background: var(--cartao);
  box-shadow: var(--sombra-quente);
  line-height: 1.25;
  text-align: center;
}

.pv-numero-valor {
  color: var(--marca-viva);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
}

.pv-numero-texto {
  font-size: 1rem;
  font-weight: 600;
}

/* ---- 4 · As duas imagens, lado a lado (800 x 1000; a altura fica reservada) ---- */
.pv-figuras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.pv-figura {
  margin: 0;
}

.pv-figura figcaption {
  margin: 0 0 0.4rem;
  color: var(--marca);
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
}

.pv-imagem {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  background: var(--fundo-2);
}

/* Aviso das fotos: legenda discreta de rodapé de foto (Luis Henrique, 2026-10-19, sessão 6),
   12 px, sem negrito, com a mesma cor de texto suave (contraste AA conferido no conferir-contraste). */
.pv-aviso {
  margin: 0.375rem 0 0;
  color: var(--texto-suave);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

/* ---- 5 · Sem o app × Com o app: nada riscado, os dois lados com o mesmo peso de cor ---- */
.pv-comparacao {
  width: 100%;
  table-layout: fixed;
  border: 1px solid var(--borda-quente);
  border-spacing: 0;
  border-collapse: separate;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cartao);
  box-shadow: var(--sombra-quente);
  font-size: 1.05rem;
  line-height: 1.4;
}

.pv-comparacao th {
  padding: 0.75rem 0.6rem;
  background: var(--marca);
  color: #ffffff;
  text-align: left;
}

.pv-comparacao td {
  padding: 0.75rem 0.6rem;
  border-top: 1px solid var(--borda-quente);
  vertical-align: top;
}

.pv-comparacao th + th,
.pv-comparacao td + td {
  border-left: 1px solid var(--borda-quente);
}

/* ---- 11 · Lista com ✓ ---- */
.pv-lista-ok {
  margin: 0 0 0.5rem;
  padding: 1.25rem 1.25rem 0.5rem;
  list-style: none;
}

.pv-lista-ok li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  margin: 0 0 0.75rem;
}

/* ---- 15 · Pagamento ---- */
.pv-pagamento {
  padding: 1rem 1.25rem 0.25rem;
  text-align: center;
}

.pv-pagamento-unico {
  margin-bottom: 0.4rem;
  color: var(--marca);
  font-size: 1.35rem;
  font-weight: 800;
}

/* ---- 16 · Bônus ---- */
.pv-rotulo-bonus {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.2rem 0.85rem;
  border-radius: 999px;
  background: var(--marca-viva);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

/* ---- 17 · Planos, preços e pop-up ---- */
#pv-planos-titulo {
  scroll-margin-top: 1rem;
}

#pv-planos-titulo:focus {
  outline: none;
}

.pv-plano {
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.25rem 0.75rem;
  border-top-color: var(--marca);
}

.pv-plano-recomendado {
  border: 3px solid var(--ouro);
  border-top-width: 6px;
  box-shadow: 0 14px 34px rgba(232, 163, 23, 0.28);
}

.pv-selo {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  background: var(--ouro);
  color: var(--marca-escura);
  font-size: 1rem;
  font-weight: 800;
}

.pv-subtitulo-plano {
  margin-bottom: 0.6rem;
  color: var(--marca-viva);
  font-weight: 700;
}

.pv-linhas-plano {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.pv-linhas-plano li {
  margin: 0 0 0.5rem;
}

.pv-linha-preco {
  margin-bottom: 0.25rem;
  color: var(--ouro-texto);
  font-weight: 800;
}

.pv-preco {
  margin: 0;
  color: var(--marca);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.pv-popup {
  width: min(92vw, 30rem);
  max-height: 90vh;
  margin: auto;
  padding: 1.5rem 1.25rem 0.75rem;
  border: 0;
  border-top: 6px solid var(--ouro);
  border-radius: var(--raio);
  background: var(--cartao);
  color: var(--texto);
  box-shadow: 0 20px 60px rgba(20, 32, 74, 0.35);
}

.pv-popup::backdrop {
  background: rgba(20, 32, 74, 0.55);
}

.pv-popup h2 {
  padding-right: 2.5rem;
  font-size: 1.45rem;
}

.pv-popup-rotulo {
  margin: 0 0 0.3rem;
  color: var(--ouro-texto);
  font-size: 1rem;
  font-weight: 800;
}

.pv-fechar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: var(--fundo-2);
  color: var(--marca);
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- 18 · Garantia e entrega ---- */
.pv-chip {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--azul-suave);
  color: var(--marca);
  font-size: 1rem;
  font-weight: 800;
}

/* ---- 19 · Perguntas frequentes (sanfona, <details>; o sinal é desenhado, sem texto) ---- */
.pv-faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pv-pergunta {
  border: 1px solid var(--borda-quente);
  border-radius: 16px;
  background: var(--cartao);
  box-shadow: var(--sombra-quente);
}

.pv-pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.85rem 1rem;
  color: var(--marca);
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.pv-pergunta summary::-webkit-details-marker {
  display: none;
}

.pv-pergunta summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(var(--ouro-texto), var(--ouro-texto)) center / 0.9rem 3px no-repeat,
    linear-gradient(var(--ouro-texto), var(--ouro-texto)) center / 3px 0.9rem no-repeat, var(--dourado-suave);
}

.pv-pergunta[open] summary::after {
  background: linear-gradient(var(--ouro-texto), var(--ouro-texto)) center / 0.9rem 3px no-repeat, var(--dourado-suave);
}

.pv-pergunta summary:focus-visible {
  border-radius: 16px;
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.pv-pergunta p {
  margin: 0;
  padding: 0 1rem 1rem;
}

/* ---- 20 · Fechamento e rodapé ---- */
.pv-fechamento {
  text-align: center;
}

.pv-rodape p {
  margin: 0 0 0.4rem;
}

/* ---- 2 · Vídeo do topo (pagina-vendas-quiz/design/direcao-video-topo.md) ----------------------
   18 s em loop, sem som, só transform e opacity. Números de arte/coordenadas.json (o
   testar-pagina.mjs confere): zoom Z = 3.9 com origem 50.57% 51.37%; tela-com-app x 463, y 407,
   120 x 213.4, raio 14; tela-rezando x 698, y 552 (unidades do viewBox de 1000).
   Tempos (1 s = 5.5556%): Q1 0–4,0 s; Q2 4,0–8,5 s; Q3 8,5–13,0 s; Q4 13,0–18,0 s.
   SEM animação (estado de base e "reduzir movimento"): o fim do Q2, com a legenda 2. */
.pv-bloco-video {
  margin: 0 -1rem 2rem; /* no celular, o palco ocupa a largura da tela: em 360 px, a tela do app fica com 168 px no Q2/Q3 */
}

@media (min-width: 30rem) {
  .pv-bloco-video {
    margin: 0 0 2rem;
  }
}

.pv-video {
  max-width: 30rem;
  margin: 0 auto;
}

.video-palco {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--raio) var(--raio) 0 0;
  background: var(--fundo-2);
}

.video-camera {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(3.9);
  transform-origin: 50.57% 51.37%;
}

.video-camera > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.video-tela {
  position: absolute;
  width: 12%;
  height: 21.34%;
  overflow: hidden;
  border-radius: 11.667% / 6.56%; /* raio 14 da arte, sobre 120 x 213.4 */
}

.video-tela-com-app {
  top: 40.7%;
  left: 46.3%;
}

.video-tela-rezando {
  top: 55.2%;
  left: 69.8%;
}

.video-tela .demo-quadro,
.video-tela .demo-rolagem {
  transition: none;
}

.pv-video .tela-app .conteudo-app > * {
  animation: none;
}

.video-veu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--fundo-2);
  opacity: 0;
  pointer-events: none;
}

.video-legendas {
  position: relative;
  height: calc(2 * 1.35 * 1.125rem + 1.5rem); /* 2 linhas reservadas: a página não pula */
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--marca);
}

.video-legenda {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.75rem 1rem;
  color: var(--texto-no-topo);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
}

/* Estado de base = o quadro parado (fim do Q2) */
.pv-video [data-anima="pose-sem"],
.pv-video [data-anima="pose-rezando"],
.pv-video [data-anima="tela-misterio"] {
  opacity: 0;
}

.pv-video [data-anima="pose-com"],
.pv-video [data-anima="tela-hoje"],
.pv-video [data-anima="legenda-2"] {
  opacity: 1;
}

/* Com movimento: cada camada com o seu roteiro de 18 s, todas no mesmo relógio */
.pv-video:not(.video-parado) [data-anima="pose-sem"] {
  animation: video-pose-sem 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="pose-com"] {
  animation: video-pose-com 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="pose-rezando"] {
  animation: video-pose-rezando 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="camera"] {
  animation: video-camera 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="tela-hoje"] {
  animation: video-tela-hoje 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="tela-misterio"] {
  animation: video-tela-misterio 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="veu"] {
  animation: video-veu 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="legenda-1"] {
  animation: video-legenda-1 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="legenda-2"] {
  animation: video-legenda-2 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="legenda-3"] {
  animation: video-legenda-3 18s linear infinite;
}

.pv-video:not(.video-parado) [data-anima="legenda-4"] {
  animation: video-legenda-4 18s linear infinite;
}

/* Q1: o pendente do terço balança de leve (±3°, ciclo de 2 s: 1 s para cada lado), pelo pivô do coordenadas.json */
.pv-video:not(.video-parado) [data-anima="pendente"] {
  transform-box: view-box;
  transform-origin: 606px 668px;
  animation: video-pendente 1s ease-in-out infinite alternate;
}

/* Parado fora da tela e com a aba oculta (video-topo.js liga e desliga "video-rodando") */
.pv-video:not(.video-rodando) [data-anima] {
  animation-play-state: paused;
}

/* Poses: a nova surge por cima da anterior (0,4 s), e a anterior sai quando a nova está inteira */
@keyframes video-pose-sem {
  0%,
  24.444% {
    opacity: 1;
  }
  24.445%,
  100% {
    opacity: 0;
  }
}

@keyframes video-pose-com {
  0%,
  22.222% {
    opacity: 0;
  }
  24.444%,
  74.444% {
    opacity: 1;
  }
  74.445%,
  100% {
    opacity: 0;
  }
}

@keyframes video-pose-rezando {
  0%,
  72.222% {
    opacity: 0;
  }
  74.444%,
  100% {
    opacity: 1;
  }
}

/* Câmera: aproxima de 1 para Z em 1,4 s no começo do Q2; afasta de Z para 1 em 1,2 s no começo do Q4 */
@keyframes video-camera {
  0%,
  22.222% {
    transform: scale(1);
    animation-timing-function: ease-in-out;
  }
  30%,
  72.222% {
    transform: scale(3.9);
    animation-timing-function: ease-in-out;
  }
  78.889%,
  100% {
    transform: scale(1);
  }
}

/* Tela na mão: acende 0,3 s depois da troca de pose (fusão de 0,3 s); no Q3, fusão de 0,4 s para a cena */
@keyframes video-tela-hoje {
  0%,
  23.889% {
    opacity: 0;
  }
  25.556%,
  49.444% {
    opacity: 1;
  }
  49.445%,
  100% {
    opacity: 0;
  }
}

@keyframes video-tela-misterio {
  0%,
  47.222% {
    opacity: 0;
  }
  49.444%,
  100% {
    opacity: 1;
  }
}

/* Entra do creme no começo (0,3 s) e volta ao creme no fim (0,3 s) */
@keyframes video-veu {
  0% {
    opacity: 1;
  }
  1.667%,
  98.333% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Legendas: trocam por fusão de 0,3 s, junto com o quadro */
@keyframes video-legenda-1 {
  0% {
    opacity: 0;
  }
  1.667%,
  22.222% {
    opacity: 1;
  }
  23.889%,
  100% {
    opacity: 0;
  }
}

@keyframes video-legenda-2 {
  0%,
  22.222% {
    opacity: 0;
  }
  23.889%,
  47.222% {
    opacity: 1;
  }
  48.889%,
  100% {
    opacity: 0;
  }
}

@keyframes video-legenda-3 {
  0%,
  47.222% {
    opacity: 0;
  }
  48.889%,
  72.222% {
    opacity: 1;
  }
  73.889%,
  100% {
    opacity: 0;
  }
}

@keyframes video-legenda-4 {
  0%,
  72.222% {
    opacity: 0;
  }
  73.889%,
  98.333% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes video-pendente {
  from {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}