/* sales.css — PÁGINA DE VENDAS do Método Flow (Fase 7, reescrita 09/10/2026).
   Landing pública, tema dark, TIPOGRÁFICA: a única mídia é o vídeo do topo.
   O que carrega a página é texto, bloco de cor e espaço — o público acessa
   pelo celular.
   EQUILÍBRIO DE COR (como o e-mail e o checkout): VERDE ESMERALDA protagonista;
   DOURADO só acento nobre pontual (o preço).
   RITMO: a copy vive em pausas — .beat (um parágrafo = uma respiração) e
   .punch (frase de impacto serifada).
   REGRA DE OURO: só consome os tokens do theme.css — nenhuma cor de marca solta.
   Reaproveita .btn/.btn-primary do app.css; aqui mora só a landing. */

/* ---------- Estrutura geral ---------- */
.sales-main { flex: 1; width: 100%; }
.s-wrap { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; }
.s-narrow { max-width: 680px; }
.s-section { padding: 4rem 0; }
.s-section-alt { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Coluna de leitura: a prosa longa da página. Largura de livro (62ch) e texto
   alinhado à ESQUERDA — bordas regulares, sem quebra torta. */
.s-read { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: left; }

/* Títulos da landing: serifado discreto = acabamento refinado */
.s-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.25;
  margin: 0 0 1.5rem;
  color: var(--text-main);
}
.s-lead { color: var(--text-muted); font-size: 1.08rem; line-height: 1.7; margin: 0 0 1.5rem; max-width: 640px; }
.s-center { text-align: center; }
.s-center .s-lead { margin-left: auto; margin-right: auto; }

/* Quebras de linha equilibradas: títulos e frases curtas não deixam uma
   palavra órfã pendurada (navegadores antigos simplesmente ignoram) */
.s-title, .s-hero-title, .punch { text-wrap: balance; }
.beat { text-wrap: pretty; }

/* ---------- RITMO CINEMATOGRÁFICO: cada quebra é uma pausa ----------
   .beat  = um parágrafo curto, uma respiração entre ideias;
   .punch = a frase de impacto — serifada, maior, com o negrito esmeralda. */
.beat { margin: 0 0 1.15rem; font-size: 1.05rem; line-height: 1.7; color: var(--text-main); }
.beat:last-child { margin-bottom: 0; }
.beat strong { color: var(--emerald-light); }
.punch {
  margin: 1.9rem 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--text-main);
}
.punch strong { color: var(--emerald-light); }

/* ---------- Topo (com assinatura da marca) ---------- */
.sales-topbar { position: sticky; top: 0; z-index: 20; }
.brand-signed { display: inline-flex; align-items: baseline; gap: .55rem; }
/* Assinatura da autora: só o wordmark + "por Regiane Rios" */
.brand-sign { display: inline-flex; align-items: center; gap: .45rem; }
.brand-by { color: var(--text-muted); font-weight: 400; font-size: .8rem; letter-spacing: .04em; white-space: nowrap; }

/* ---------- Botão-joia (CTA): esmeralda com reflexo que corre ---------- */
.btn-lg { padding: .95rem 1.9rem; font-size: 1.08rem; border-radius: 12px; }
/* Os CTAs da landing são em CAIXA ALTA por CSS (o HTML guarda o texto com a
   acentuação normal, que é o que o leitor de tela lê). */
.btn-caps { text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; }
.btn-jewel {
  position: relative; overflow: hidden;
  box-shadow: var(--emerald-glow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-jewel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, var(--sheen) 50%, transparent 75%);
  transform: translateX(-130%);
  animation: jewel-shine 4.5s ease-in-out infinite;
}
.btn-jewel:hover { transform: translateY(-2px); box-shadow: var(--emerald-glow), var(--shadow); }

/* Faixa de CTA no meio da página: o botão sozinho, com muito ar em volta */
.cta-band { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin-top: 3.25rem; }

/* Preço junto de cada botão (partials/price-offer.ejs): a parcela em dourado,
   o resto em texto normal; abaixo, o aviso dos juros em letra pequena. */
.price-offer { text-align: center; }
.po-main { margin: 0; color: var(--text-main); font-size: 1rem; line-height: 1.5; }
.po-installments { color: var(--gold-light); font-weight: 700; }
.po-note { margin: .2rem 0 0; color: var(--text-muted); font-size: .8rem; line-height: 1.5; }

/* ---------- BLOCO 1 — TOPO ---------- */
.s-hero {
  position: relative;
  padding: 5rem 0 4.5rem;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(700px 340px at 50% -8%, var(--emerald-soft) 0%, transparent 65%),
    radial-gradient(900px 480px at 50% 0%, var(--bg-surface) 0%, var(--bg-base) 70%);
  border-bottom: 1px solid var(--border);
}
.s-hero-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.25;
  margin: 0 auto 1.1rem;
  max-width: 820px;
}
.s-hero-lead { font-size: 1.12rem; max-width: 640px; margin: 0 auto 2.25rem; }
.s-cta-group { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.hero-terms { margin: 0; color: var(--text-muted); font-size: .9rem; letter-spacing: .02em; }

/* Vídeo do topo: 16:9, no máximo 720px, centralizado. Enquanto o vídeo não
   existe, o espaço reservado ocupa exatamente a mesma caixa. */
.hero-video {
  width: 100%; max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 2.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-base);
  box-shadow: var(--shadow);
}
.hero-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.hero-video-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, var(--emerald-soft) 0%, transparent 70%);
}
.hero-video-placeholder span {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding-left: 5px; /* o triângulo é assimétrico: centra no olho */
  font-size: 1.6rem;
  color: var(--emerald-light);
  border: 1px solid var(--emerald-light);
  background: var(--emerald-soft);
}

/* ---------- Player próprio do topo (estilo VSL) ----------
   Ocupa a mesma caixa 16:9 do .hero-video. Sem barra de avanço: só o botão
   grande no centro, e embaixo play/pausa, volume e tela cheia (sales.js).
   Sem marca, nome ou link — o vídeo fala sozinho. */
.vsl { position: relative; width: 100%; height: 100%; background: #000; outline: none; }
.vsl [hidden] { display: none; } /* sem JS: só o vídeo com os controles nativos */
.vsl-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vsl.is-ready .vsl-video { cursor: pointer; }
.vsl.is-idle, .vsl.is-idle .vsl-video { cursor: none; }

.vsl-big-play {
  position: absolute; top: 50%; left: 50%;
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; padding: 0;
  background: var(--emerald-metal);
  box-shadow: var(--emerald-glow), 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff; cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.vsl-big-play svg { width: 40px; height: 40px; margin-left: 5px; fill: currentColor; } /* triângulo centrado no olho */
.vsl-big-play:hover { transform: scale(1.06); }
.vsl-big-play:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.vsl.is-playing .vsl-big-play { opacity: 0; pointer-events: none; transform: scale(.9); }

.vsl-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .35rem;
  padding: 2rem .75rem .6rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  transition: opacity .3s ease;
}
/* Antes do primeiro play, só o botão grande aparece (capa limpa). */
.vsl:not(.is-started) .vsl-bar { opacity: 0; pointer-events: none; }
.vsl.is-idle .vsl-bar { opacity: 0; }
.vsl-spacer { flex: 1; }
.vsl-btn {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: #fff; cursor: pointer;
}
.vsl-btn:hover { background: rgba(255, 255, 255, 0.12); }
.vsl-btn:focus-visible { outline: 2px solid var(--emerald-light); outline-offset: 1px; }
.vsl-btn svg { width: 22px; height: 22px; fill: currentColor; }
.vsl .i-pause, .vsl.is-playing .i-play,
.vsl .i-muted, .vsl.is-muted .i-vol,
.vsl .i-fs-exit, .vsl.is-fs .i-fs { display: none; }
.vsl.is-playing .i-pause, .vsl.is-muted .i-muted, .vsl.is-fs .i-fs-exit { display: block; }

.vsl-volume { width: 84px; accent-color: var(--emerald-light); cursor: pointer; }
.vsl.no-volume .vsl-volume { display: none; }

/* Tela cheia: o quadro inteiro (não o <video>), para manter estes controles.
   .is-pseudo-fs é a versão por CSS para onde o navegador não deixa (iPhone). */
.vsl:fullscreen { width: 100%; height: 100%; }
.vsl.is-pseudo-fs {
  position: fixed; inset: 0; z-index: 100;
  width: 100vw; height: 100vh; height: 100dvh;
}
.vsl-lock, .vsl-lock body { overflow: hidden; }

/* ---------- Listas da landing ----------
   .ask-list   = as perguntas do bloco 2, serifadas, com fio esmeralda;
   .check-list = o que a planilha faz (bloco 4);
   .not-list   = o que isto não é (bloco 5) — mesmo peso visual das outras:
                 nem escondida, nem dramatizada. */
.ask-list, .check-list, .not-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ask-list { gap: 1rem; }
.ask-list li {
  padding: .2rem 0 .2rem 1.1rem;
  border-left: 2px solid var(--emerald-light);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.2rem; line-height: 1.5;
  color: var(--text-main);
}
.check-list { gap: .9rem; }
.check-list li { position: relative; padding-left: 1.8rem; color: var(--text-main); line-height: 1.6; font-size: 1.05rem; }
.check-list .pt-ico { position: absolute; left: 0; top: .05rem; color: var(--emerald-light); }
.lessons-note { margin-top: 2rem; }

.not-list { gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--border); }
.not-list li {
  position: relative;
  padding: 1rem 0 1rem 1.8rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-main); line-height: 1.65; font-size: 1.02rem;
}
.not-list li::before { content: "✕"; position: absolute; left: 0; top: 1rem; color: var(--text-muted); }

/* ---------- BLOCO 6 — A OFERTA (o dourado acende no que importa) ---------- */
.price-card {
  max-width: 540px; margin: 0 auto;
  background: var(--bg-base);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--gold-glow);
  padding: 2.75rem 2.25rem;
  text-align: center;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.price-product { font-family: Georgia, 'Times New Roman', serif; font-size: 1.9rem; font-weight: 400; margin: 0; color: var(--text-main); }
.price-sub { margin: -.6rem 0 0; color: var(--text-muted); font-size: 1rem; line-height: 1.5; }
.price-offer-card { margin: .5rem 0 0; }
.price-offer-card .po-main { font-size: 1.15rem; }
.price-offer-card .po-installments { display: block; font-size: 2.6rem; line-height: 1.1; margin-bottom: .35rem; text-shadow: var(--gold-glow); }
.price-terms { margin: 0; color: var(--text-main); font-size: .98rem; line-height: 1.7; }
/* O aviso técnico da planilha: pequeno e discreto, logo abaixo do botão */
.fineprint { margin: -.35rem 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.6; }
.fineprint strong { color: var(--text-muted); font-weight: 600; }

/* ---------- Garantia ---------- */
.guarantee {
  max-width: 540px; margin: 1.5rem auto 0;
  background: var(--bg-base);
  border: 1px solid var(--emerald-light);
  border-radius: var(--radius);
  padding: 1.4rem 1.75rem;
  text-align: center;
}
.guarantee p { margin: 0; color: var(--text-muted); line-height: 1.65; }
.guarantee strong { color: var(--emerald-light); }

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: .7rem; }
.faq details {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
}
.faq details[open] { border-color: var(--emerald-light); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 1.3rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--emerald-light); font-size: 1.3rem; font-weight: 400; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq .faq-body { padding: 0 1.3rem 1.15rem; color: var(--text-muted); line-height: 1.7; }
.faq .faq-body p { margin: 0 0 .6rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Barra fixa de compra ----------
   Presa ao rodapé da JANELA. O sales.js liga .is-on entre a saída do topo e a
   chegada da oferta. Desligada, fica fora da tela e invisível (sem foco). */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.buybar.is-on { transform: translateY(0); visibility: visible; transition: transform .3s ease, visibility 0s; }
.buybar-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.buybar-label { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem; color: var(--text-main); white-space: nowrap; }
.price-offer-bar { text-align: left; min-width: 0; }
.price-offer-bar .po-main { font-size: .95rem; }
.price-offer-bar .po-note { margin-top: 0; font-size: .75rem; }
.buybar-btn { padding: .75rem 1.5rem; font-size: .92rem; border-radius: 12px; white-space: nowrap; }

/* ---------- Rodapé da landing ---------- */
.sales-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 2rem 1.25rem;
}
.sales-footer-inner {
  max-width: 1000px; margin: 0 auto;
  display: flex; flex-direction: column; gap: .9rem; align-items: center;
  text-align: center;
}
.sales-footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; font-size: .9rem; }
.sales-footer-links a { color: var(--text-muted); }
.sales-footer-links a:hover { color: var(--emerald-light); }
.sales-footer small { color: var(--text-muted); }

/* ---------- GLAMOUR: blocos que surgem na rolagem ----------
   O JS (public/js/sales.js) adiciona .reveal aos elementos [data-reveal] e
   .is-visible quando entram na tela. SEM JS nada disso liga — a página fica
   100% visível (aprimoramento progressivo, nunca dependência). */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal.is-visible { transition: none; }
  .btn-jewel::after { animation: none; }
  .btn-jewel, .buybar, .buybar.is-on { transition: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .s-section { padding: 3rem 0; }
  .s-hero { padding: 3.5rem 0 3.25rem; }
  .cta-band { margin-top: 2.5rem; }
}

/* Celular: botões de compra em largura cheia (fácil de tocar) e
   caixas ajustadas para telas estreitas */
@media (max-width: 480px) {
  .s-hero { padding: 2.75rem 0 2.75rem; }
  .hero-video { margin-bottom: 1.75rem; border-radius: var(--radius-sm); }
  .vsl-big-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .vsl-big-play svg { width: 30px; height: 30px; margin-left: 4px; }
  .vsl-bar { padding: 1.5rem .4rem .3rem; gap: .15rem; }
  .vsl-volume { width: 64px; }
  .btn-lg { width: 100%; text-align: center; }
  .price-card { padding: 2rem 1.4rem; }
  .price-product { font-size: 1.65rem; }
  .price-offer-card .po-installments { font-size: 2.1rem; }
  .brand-sign { display: none; } /* topo estreito: a assinatura fica no rodapé */
  .sales-footer .brand-sign { display: inline-flex; }
  .punch { font-size: 1.18rem; }
  .ask-list li { font-size: 1.1rem; }
  .guarantee { padding: 1.25rem 1.2rem; }
  /* Barra fixa no celular: preço em cima, botão embaixo, largura inteira */
  .buybar-inner { flex-direction: column; align-items: stretch; gap: .5rem; }
  .buybar-label { display: none; }
  .price-offer-bar { text-align: center; }
  .price-offer-bar .po-main { font-size: .85rem; }
  .price-offer-bar .po-note { font-size: .7rem; }
  .buybar-btn { width: 100%; text-align: center; }
}