/* ============================================================
   PRC — Programa de Reeducação Capilar — Sales Page
   Identidade: azul-marinho (#0A2E52) + gradiente verde (#25D366→#0F6A49)
   Paleta extraída da página atual (lj.eusourafaelguerra.com.br/prc), novo layout.
   Mobile-first | breakpoints: 640px, 768px, 900px, 1024px
   ============================================================ */

:root {
  /* Paleta */
  --cor-primaria: #0A2E52;
  /* Verde mais escuro que o da página original (#25D366) — o tom claro do
     WhatsApp falha contraste AA com texto branco (~2:1). Ajustado para
     ~4.8:1, dentro do padrão de design-principles.md. */
  --cor-cta-topo: #168527;
  --cor-cta-base: #0F6A49;
  --cor-acento: #6A9686;
  --cor-acento-claro: #EAF2EE;
  /* Lavanda decorativa — extraída do CSS real da página de referência
     (lj.eusourafaelguerra.com.br/prc, post-2850.css: blobs/fundos suaves
     atrás de imagens e cards). Ausente na 1ª versão do PRC, adicionada em
     11/07/2026 após calibração por referência. */
  --cor-lavanda: #D1C4E9;
  --cor-lavanda-claro: #EFE8FD;
  --cor-texto: #14181c;
  --cor-texto-suave: #5B6570;
  --cor-fundo: #ffffff;
  --cor-fundo-claro: #F6F8F7;
  --cor-borda: #E1E5E3;
  --cor-alerta: #F02727;

  /* Tipografia (px fixo — nunca rem, padrão do projeto) */
  --fs-titulo-principal: 22px;
  --fs-titulo-secao: 22px;
  --fs-titulo-menor: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;

  --fonte-titulo: 'Poppins', sans-serif;
  --fonte-base: 'Montserrat', sans-serif;

  /* Espaçamento (múltiplos de 8px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --padding-lateral: 28px;
  --radius-card: 16px;
  --radius-botao: 15px;
  --sombra-suave: 0 4px 24px rgba(10, 46, 82, 0.08);
  --max-width: 1200px;
}

@media (min-width: 768px) {
  :root { --padding-lateral: 32px; }
}

@media (min-width: 1024px) {
  :root {
    --padding-lateral: 40px;
    --fs-titulo-principal: 28px;
    --fs-titulo-secao: 26px;
    --fs-titulo-menor: 26px;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--fonte-base);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.7;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--cor-primaria);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p { color: var(--cor-texto); }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
}

.container--estreito { max-width: 760px; }

.centro { text-align: center; }

.titulo-secao {
  font-size: var(--fs-titulo-secao);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.acesso-mockup {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto var(--space-5);
}

.titulo-secao--centro { text-align: center; margin-left: auto; margin-right: auto; }

.secao {
  padding: var(--space-6) 0;
}

@media (min-width: 768px) {
  .secao { padding: var(--space-8) 0; }
}

.secao--clara { background: var(--cor-fundo-claro); }

.secao--textura {
  background-image: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
    url('_images/hero/hero-fundo.webp');
  background-size: cover;
  background-position: center;
}

.secao--escura {
  background: var(--cor-primaria);
  color: #fff;
}
.secao--escura h2, .secao--escura h3 { color: #fff; }
.secao--escura p { color: rgba(255, 255, 255, 0.88); }

/* ===== FRAME VAZIO (imagem ausente) ===== */
.frame-vazio {
  background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #fafafa 10px, #fafafa 20px);
  border: 2px dashed #cbd3d0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 200px;
  color: #8a938e;
  font-family: monospace;
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-card);
}
.frame-vazio small { color: #a3aba6; font-size: var(--fs-tiny); }

.frame-vazio--logo, .frame-vazio--logo-footer {
  min-height: 40px;
  width: 160px;
  padding: var(--space-2);
  border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
}

.frame-vazio--hero { min-height: 320px; }
.frame-vazio--especialista { min-height: 320px; }
.frame-vazio--quadrado { aspect-ratio: 1 / 1; min-height: 0; }

/* ===== BOTÕES ===== */
.botao-cta {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--fonte-base);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg, var(--cor-cta-topo) 0%, var(--cor-cta-base) 100%);
  border: none;
  border-radius: var(--radius-botao);
  padding: 16px var(--space-4);
  text-decoration: none;
  min-height: 48px;
  box-shadow: 0 4px 14px rgba(15, 106, 73, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.botao-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 106, 73, 0.34);
}

@media (min-width: 640px) {
  .botao-cta {
    display: inline-block;
    width: auto;
    font-size: 16px;
    padding: 16px var(--space-5);
  }
}

.botao-cta--hero { margin-top: var(--space-4); }

.botao-cta--secundario {
  background: transparent;
  color: var(--cor-primaria);
  border: 2px solid var(--cor-primaria);
  box-shadow: none;
  margin-top: var(--space-4);
}

.botao-cta--claro {
  background: #fff;
  color: var(--cor-primaria);
  box-shadow: none;
}

/* botão discreto nos planos não-recomendados — guia o olho pro CTA verde
   cheio do plano anual (destaque), em vez de disputar atenção com ele */
.botao-cta--suave {
  background: var(--cor-acento-claro);
  color: var(--cor-primaria);
  box-shadow: none;
}

.botao-whatsapp {
  background: linear-gradient(180deg, #25D366 0%, #0F6A49 100%);
  font-size: 15px;
  margin-top: var(--space-4);
}

.botao-oferta {
  width: 100%;
  font-size: 14px;
}

/* CTA com texto longo demais para 1 linha em mobile (ex: "Quero entrar no
   Programa de Reeducação Capilar") — quebra em 2 linhas em vez de forçar
   overflow horizontal na página. Mantém 1 linha a partir de 480px. */
.botao-cta--extenso {
  white-space: normal;
  line-height: 1.3;
}

@media (min-width: 480px) {
  .botao-cta--extenso { white-space: nowrap; }
}

/* ===== HERO ===== */
.hero {
  /* dossiê responsivo: padrão oficial 100svh (só a hero na 1ª tela) — piso, não teto;
     nunca height:100vh; nunca cortar conteúdo (apertar espaçamento antes de fonte) */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--cor-texto);
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
    url('_images/hero/hero-fundo.webp');
  background-size: cover;
  background-position: center;
}

.logo-header, .logo-footer { display: block; height: auto; }
.logo-header { width: 140px; }
.logo-footer { width: 120px; margin: 0 auto; }

@media (min-width: 640px) {
  .logo-header { width: 160px; }
}

/* desktop: logo um pouco maior — 200px é o teto sem perder nitidez
   (arquivo nativo tem 320px de largura, mantém ~1.6x de densidade) */
@media (min-width: 1024px) {
  .logo-header { width: 200px; }
}

.hero-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-badge {
  font-size: var(--fs-tiny);
  color: var(--cor-texto-suave);
}

.hero-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 5vh, 40px);
  /* padding-block (não o shorthand padding) — senão zera o padding-inline
     que o .container já aplica nessa mesma div (mesma especificidade,
     essa regra vem depois no arquivo e sobrescreveria as laterais) */
  padding-block: clamp(16px, 4vh, 32px);
}

.hero-conteudo { text-align: center; }

.hero-rotulo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.hero-rotulo-tag {
  background: var(--cor-lavanda-claro);
  border: 1px solid var(--cor-lavanda);
  color: var(--cor-primaria);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: var(--fs-small);
  font-weight: 600;
}

.hero-headline {
  font-size: var(--fs-titulo-principal);
  font-weight: 800;
  color: var(--cor-primaria);
  margin-bottom: var(--space-3);
}

.hero-headline .destaque { color: var(--cor-cta-base); }

.hero-sub {
  color: var(--cor-texto);
  font-size: var(--fs-body);
  margin-bottom: var(--space-4);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: fit-content;
  margin: 0 auto;
  font-weight: 600;
  color: var(--cor-primaria);
}

/* max-width aqui (e não só no <img>): a moldura do app é position:absolute e se ancora
   neste elemento. Sem limitar a largura dele, o celular ia parar na borda da coluna, longe
   da foto. No mobile a foto encolheu de 340 para 280 — ver a nota da VSL abaixo. */
.hero-imagem {
  position: relative;
  max-width: 280px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .hero-imagem { max-width: 340px; }
}

.hero-imagem img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-suave);
}

.hero-video-wrap {
  text-align: center;
}

/* O respiro entre o vídeo e o CTA não pode depender do modificador do botão: o
   `--secundario` traz margin-top embutido, o `--claro` não. Quando a dobra virou navy e o
   botão trocou de modificador, o espaço sumiu e o CTA colou na barra de progresso do
   player. Aqui o espaçamento é da dobra, então vale para qualquer botão que entre nela. */
.hero-video-wrap .botao-cta {
  margin-top: var(--space-5);
}

/* A dobra do vídeo ficou em faixa navy (v4, 31/08/2026): o vídeo é 16:9 e, solto no
   branco logo abaixo de uma hero com foto de retrato, parecia pequeno e sem importância.
   A faixa escura dá moldura ao bloco preto do player em vez de deixá-lo boiando, e no
   mobile o vídeo sangra até a borda. Não dá para mexer na proporção: 16:9 é o formato do
   arquivo, e o corte vertical comeria as legendas do vídeo (conferido no pôster real). */
.hero-video-legenda {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-3);
}

.video-frame {
  aspect-ratio: 16 / 9;
  max-width: 640px;
  width: 100%;
  margin: 0 auto var(--space-4);
}

/* VSL (VTurb): o player monta o próprio placeholder 16:9 por dentro.
   Reservamos a altura aqui também para não haver CLS antes do script carregar. */
.vsl-player {
  display: block;
  max-width: 640px;
  width: 100%;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* O vídeo fica dentro do gutter, com o mesmo raio dos cards da página (Simone, 31/08/2026).
   Chegou a sangrar até a borda no mobile para compensar a diferença de altura com a foto da
   hero (16:9 dentro do gutter dá ~188px de altura, contra 420px da foto), mas sangramento
   exige canto reto e isso quebrava o padrão visual. Quem resolve a presença do vídeo agora é
   a faixa navy da dobra, não o tamanho. Se ainda parecer pequeno, o próximo ajuste é
   diminuir a foto da hero — a proporção do vídeo não se mexe, 16:9 é o formato do arquivo.

   isolation: isolate — o player da VTurb injeta o vídeo dentro do custom element, e sem um
   contexto de empilhamento próprio o canto arredondado não recorta o conteúdo injetado no
   Safari. */
.vsl-player { isolation: isolate; }

.vsl-player:not(:defined)::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* depoimentos em vídeo: maioria é reels (retrato 9:16) — usa contain com fundo
   preto pra não cortar o único vídeo paisagem do lote nem esticar os retrato */
.video-frame--retrato {
  aspect-ratio: 3 / 4;
  max-width: 260px;
  background: #000;
  border-radius: var(--radius-card);
  /* cover (não contain) — no vídeo paisagem isso corta as laterais e dá
     zoom na pessoa, simulando gravação vertical igual aos outros 2 vídeos */
  object-fit: cover;
  object-position: center;
}

@media (min-width: 768px) {
  .hero-grade {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: left;
  }
  .hero-conteudo { text-align: left; }
  .hero-rotulo { justify-content: flex-start; }
  .hero-sub { margin-left: 0; }
  .hero-bullets { margin: 0; }
}

/* ===== GRID DE CARDS ===== */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.grid-cards > * { min-width: 0; }

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

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

.card-acesso, .card-bonus {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--sombra-suave);
  display: flow-root;
}

.card-acesso-icone { font-size: 28px; display: block; margin-bottom: var(--space-2); }

.card-acesso h3, .card-bonus h3 {
  font-size: var(--fs-body);
  margin-bottom: var(--space-2);
}

/* ===== BÔNUS — seção com destaque (fundo lavanda + fita + selo de preço) ===== */
/* v4: era lavanda-claro e encostava no lavanda do 'Para quem é', que vem logo acima —
   as duas dobras viravam um bloco só. O fundo agora vem do .secao--clara no HTML. */

.card-bonus {
  position: relative;
  text-align: center;
  /* padding-top maior que o padrão — dá clearance pra fita não bater no
     título quando ele quebra em 2 linhas (fita fica em top:-9px, absoluta) */
  padding: var(--space-6) var(--space-4) var(--space-4);
  box-shadow: 0 10px 28px rgba(10, 46, 82, 0.12);
}

.card-bonus p {
  font-size: var(--fs-small);
}

.card-bonus-fita {
  position: absolute;
  top: -9px;
  left: var(--space-4);
  background: var(--cor-cta-base);
  color: #fff;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(15, 106, 73, 0.35);
}

.card-bonus-preco {
  display: inline-block;
  margin-top: var(--space-2);
  background: var(--cor-acento-claro);
  color: var(--cor-cta-base);
  font-weight: 800;
  font-size: var(--fs-small);
  padding: 4px 12px;
  border-radius: 999px;
}

/* .bonus-intro e .bonus-fecho existiam no HTML mas nunca tinham regra própria
   — texto/galeria/texto ficavam colados um no outro (0 margin do reset global) */
.bonus-intro {
  text-align: center;
  margin-bottom: var(--space-5);
}

.bonus-fecho {
  margin-top: var(--space-5);
}

/* ===== LEAD / IDENTIFICAÇÃO (dobra de problema — v4) ===== */
.lead-frase {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.lead-virada {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 700;
  color: var(--cor-primaria);
  line-height: 1.4;
  margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .lead-frase, .lead-virada { font-size: 20px; }
}

/* ===== DOBRAS TEXTO + VISUAL (v4) =====
   Substituem a grade de 6 cards da v2. Uma dobra = um argumento + o seu próprio
   visual, alternando o lado da imagem para dar ritmo (igual à hero).
   No mobile o texto SEMPRE vem antes do visual, inclusive na versão invertida —
   quem rola no celular precisa do argumento antes da ilustração. */
.dobra-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.dobra-grade > * { min-width: 0; }

.dobra-texto { order: 1; }
.dobra-visual { order: 2; }

.dobra-texto p { margin-bottom: var(--space-3); }
.dobra-texto p:last-child { margin-bottom: 0; }

.dobra-destaque {
  border-left: 4px solid var(--cor-acento);
  background: var(--cor-acento-claro);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-3) var(--space-4);
}

@media (min-width: 900px) {
  .dobra-grade {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
  }
  .dobra-grade--invertida .dobra-visual { order: 1; }
  .dobra-grade--invertida .dobra-texto { order: 2; }
}

/* ===== RÉGUA DAS FASES (v4) =====
   Desenho em CSS puro: é o visual que prova a promessa "você não recebe tudo de uma
   vez". Cada fase mostra a TRANSFORMAÇÃO daquele estágio — nada aparece trancado,
   porque quem lê a página ainda está decidindo comprar e precisa enxergar o programa
   inteiro (Simone, 31/08/2026).
   Crescendo visual claro → sálvia → navy: o mesmo recurso dos cards de plano, aqui
   dizendo "cada fase é melhor que a anterior". Sem número de aulas, sem menção a
   avaliação (ver comentário no index.html). */
.fases {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fase {
  position: relative;
  border: 2px solid var(--cor-borda);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  background: var(--cor-fundo);
  box-shadow: var(--sombra-suave);
}

/* linha de ligação entre as fases — mostra que uma leva à outra */
.fase:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-4) * -1);
  transform: translateX(-50%);
  width: 2px;
  height: var(--space-4);
  background: var(--cor-borda);
}

.fase--dois {
  border-color: var(--cor-acento);
  background: var(--cor-acento-claro);
}

.fase--tres {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
}

.fase-numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 700;
  color: var(--cor-primaria);
  line-height: 1.3;
}

.fase-apelido {
  display: block;
  font-family: var(--fonte-base);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--cor-texto-suave);
  letter-spacing: 0;
}

.fase-resumo {
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
  margin-top: var(--space-2);
  line-height: 1.6;
}

/* Fase 3 em navy sólido — texto claro para manter contraste AA. */
.fase--tres .fase-numero { color: #fff; }
.fase--tres .fase-apelido { color: rgba(255, 255, 255, 0.78); }
.fase--tres .fase-resumo { color: rgba(255, 255, 255, 0.9); }

.fases-legenda {
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
  text-align: center;
  margin-top: var(--space-4);
}

@media (min-width: 1024px) {
  .fase-numero { font-size: 20px; }
}

/* ===== LISTA ILUSTRADA DAS DOBRAS (comunidade — v4) ===== */
.dobra-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dobra-lista li {
  display: flex;
  gap: var(--space-3);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--sombra-suave);
}

.dobra-lista-marca { font-size: 24px; line-height: 1.2; flex-shrink: 0; }

.dobra-lista strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-body);
  color: var(--cor-primaria);
  line-height: 1.3;
}

.dobra-lista p {
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
  margin-top: var(--space-1);
  line-height: 1.5;
}

/* ===== DOBRA DO APLICATIVO — DESTAQUE (v4) =====
   O app é o diferencial do programa (Simone, 31/08/2026), então esta dobra tem tratamento
   próprio: largura inteira, fundo lavanda (a mesma família de cor da interface do app, o
   que faz os prints parecerem parte da página e não recortes colados) e três telas em vez
   de uma ao lado do texto.
   No mobile as telas viram uma faixa que rola de lado com encaixe — três celulares
   empilhados dariam ~1600px de altura e enterrariam a oferta. */
.secao--app {
  background: linear-gradient(180deg, var(--cor-lavanda-claro) 0%, var(--cor-fundo) 100%);
}

.app-intro {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.app-selo {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cor-primaria);
  background: var(--cor-lavanda);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: var(--space-3);
}

.app-intro p { margin-bottom: var(--space-3); }

.app-frase-forte {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 700;
  color: var(--cor-primaria);
  line-height: 1.4;
}

.app-telas {
  list-style: none;
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* sangra até a borda da tela no mobile: a faixa rola de lado, mas o texto
     continua respeitando o gutter do container */
  margin: 0 calc(var(--padding-lateral) * -1);
  padding: 0 var(--padding-lateral) var(--space-3);
  -webkit-overflow-scrolling: touch;
}

.app-tela {
  flex: 0 0 230px;
  scroll-snap-align: center;
  text-align: center;
}

.app-tela h3 {
  font-size: var(--fs-body);
  margin: var(--space-3) 0 var(--space-1);
}

.app-tela p {
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
  line-height: 1.5;
}

@media (min-width: 900px) {
  .app-telas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    overflow: visible;
    margin: 0;
    padding: 0;
    align-items: start;
  }
  .app-tela { flex: none; }
  /* a do meio sobe um pouco — dá hierarquia sem precisar de outra cor */
  .app-tela--centro { transform: translateY(calc(var(--space-4) * -1)); }
}

/* ===== MOLDURA DE CELULAR (dobra do app — v4) =====
   Desenhada em CSS: a imagem é só a tela, sem aparelho embutido, então trocar o print
   depois não exige refazer arte nenhuma. A moldura corta a própria imagem com
   border-radius + overflow, e a "ilha" do topo é um pseudo-elemento. */
.celular {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 10px;
  background: #1a1d21;
  border-radius: 38px;
  box-shadow: 0 18px 45px rgba(10, 46, 82, 0.22);
}

.celular::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 5px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  z-index: 1;
}

.celular img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}

@media (min-width: 900px) {
  .celular { max-width: 300px; }
}

/* Variante da moldura para a hero: o app encostado na foto do Rafael, para o produto
   aparecer antes de qualquer rolagem. Fica menor e com raio menor que a moldura da
   dobra #aplicativo — ali ele é o assunto, aqui é um selo. */
.hero-imagem { position: relative; }

/* Menor e mais para fora do que na primeira tentativa (Simone, 31/08/2026): com 104px
   encostado na borda da foto, o celular cobria o rosto do Rafael. Agora ele avança sobre
   o fundo, não sobre ele — a maior parte da moldura fica FORA da foto. */
.celular--hero {
  position: absolute;
  right: -22px;
  bottom: 6%;
  width: 84px;
  padding: 4px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(10, 46, 82, 0.3);
}

.celular--hero::before { top: 7px; width: 24px; height: 3px; }
.celular--hero img { border-radius: 12px; }

@media (min-width: 768px) {
  .celular--hero { width: 100px; right: -30px; }
}

@media (min-width: 1024px) {
  .celular--hero { width: 116px; right: -38px; }
}

.frame-vazio--app { min-height: 340px; }



/* ===== FECHAMENTO (v4, copy bloco 13) ===== */
.secao--fechamento { background: var(--cor-lavanda-claro); }

.fechamento-cena {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.fechamento-virada {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-titulo-secao);
  font-weight: 700;
  color: var(--cor-primaria);
  line-height: 1.3;
  margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .fechamento-cena { font-size: 20px; }
}

/* ===== PADRÃO DE ALINHAMENTO DE TEXTO (v4 — 31/08/2026) =====
   Antes desta versão não havia padrão: parágrafo centralizado com medida de 760px convivia
   com parágrafo à esquerda na dobra seguinte. O que mais saltava não era o alinhamento em
   si, e sim a MEDIDA: texto centralizado numa linha de ~110 caracteres não tem eixo para o
   olho voltar, e é isso que dá a sensação de "cada dobra alinhada de um jeito".

   A regra adotada, válida para mobile e desktop:

   · Corpo de texto (dobras de leitura, cards, FAQ, listas) → SEMPRE à esquerda.
   · Centralizado → só título, tag/selo, botão e frase de abertura/fecho de seção.
   · Justificado → NUNCA. Em coluna estreita abre rios brancos no meio do parágrafo.
   · Todo bloco centralizado ganha medida curta (52ch) para não passar de ~3 linhas.

   (Conferido: não havia nenhum `text-align: justify` na folha — o que existia era
   parágrafo centralizado largo, que lê como justificado.) */
.app-intro p,
.fases-legenda,
.hero-video-legenda,
.bonus-intro,
.bonus-fecho,
.stack-fecho,
.para-quem-fecho,
.fechamento-cena,
.fechamento-virada,
.secao--escura .container--estreito > p {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ===== PREÇOS DE ANCORAGEM — RISCADOS =====
   Todo valor da lista de ancoragem e do selo de bônus é um preço que a aluna NÃO paga.
   Riscado em vermelho, com o número na cor original: risco e texto na mesma cor viram
   mancha ilegível no fundo navy. `text-decoration-thickness` explícito porque o risco
   default some no navy e em tela de alta densidade.
   Esta regra existia só na /oferta197 (`oferta197.css`); subiu para cá porque a página
   oficial passou a usar o mesmo tratamento. A cópia de lá vira duplicata — remover quando
   formos mexer naquela página (lembrar de subir o `?v=` da folha dela). */
.lista-stack li span:last-child,
.card-bonus-preco {
  text-decoration: line-through;
  text-decoration-color: var(--cor-alerta);
  text-decoration-thickness: 2px;
}

/* ===== QUEBRA DE OBJEÇÃO ===== */
.objecao-pensamento {
  font-style: italic;
  color: var(--cor-texto-suave);
  text-align: center;
}

.objecao-intro {
  text-align: center;
  margin-bottom: var(--space-4);
  font-weight: 600;
}

.objecao-antes-depois {
  background: var(--cor-fundo-claro);
  border-left: 4px solid var(--cor-alerta);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.objecao-label { font-weight: 700; color: var(--cor-primaria); display: block; margin-bottom: var(--space-2); }
.objecao-antes p { color: var(--cor-texto-suave); text-decoration: line-through; margin-bottom: var(--space-1); }
.objecao-casos-reais { font-weight: 700; text-align: center; margin-top: var(--space-4); }

/* ===== PARA QUEM ===== */
.secao--para-quem { background: var(--cor-lavanda-claro); position: relative; overflow: hidden; }

.cartela-diagnostico {
  background: var(--cor-fundo);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 30px rgba(10, 46, 82, 0.1);
  max-width: 560px;
  margin: var(--space-5) auto;
  padding: var(--space-4) var(--space-4) var(--space-3);
  position: relative;
}

.selo-personalizado {
  position: absolute;
  top: -18px;
  right: -14px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--cor-fundo);
  border: 2px dashed var(--cor-lavanda);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(10, 46, 82, 0.14);
  transform: rotate(8deg);
  text-align: center;
}

.selo-personalizado span {
  font-size: 10px;
  font-weight: 800;
  color: var(--cor-primaria);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.cartela-diagnostico-titulo {
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* era #8f7bb0 — 3.73:1 sobre branco, reprovava AA em texto de 12px.
     Mesma família da lavanda, escurecida até 5.2:1. */
  color: #7A5FA8;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.lista-check {
  list-style: none;
  margin: 0;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--cor-borda);
  font-size: var(--fs-small);
  text-align: left;
}

.lista-check li:last-child { border-bottom: none; }

.lista-check-caixa {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  margin-top: 1px;
  background: var(--cor-primaria);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.para-quem-fecho {
  max-width: 640px;
  margin: 0 auto var(--space-5);
  text-align: center;
}

/* ===== CARROSSEL DE MÓDULOS ===== */
.carrossel-modulos {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  -webkit-overflow-scrolling: touch;
}

.carrossel-slide {
  display: block;
  flex: 0 0 276px;
  width: 276px;
  height: auto;
  scroll-snap-align: start;
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-suave);
  border: 1px solid var(--cor-borda);
}

.legenda-ausente {
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
  font-style: italic;
  margin-top: var(--space-3);
  text-align: center;
}

/* ===== EMPILHAMENTO DE VALOR ===== */
.lista-stack {
  list-style: none;
  margin: var(--space-5) 0;
}

.lista-stack li {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
}

.lista-stack-principal {
  font-weight: 700;
  font-size: var(--fs-titulo-menor);
  color: #fff;
}

.stack-fecho { margin-bottom: var(--space-4); }

/* ===== OFERTA ===== */
.grid-planos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  /* 2 colunas: a oferta tem trimestral e anual (a mensal foi encerrada em 03/08/2026).
     O max-width evita que dois cards estiquem na largura de três. */
  .grid-planos {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin: 0 auto;
    align-items: end;
  }
}

.card-plano {
  background: #fff;
  border: 2px solid var(--cor-borda);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  box-shadow: var(--sombra-suave);
}

/* ===== Crescendo visual dos planos =====
   Cada card tem sua própria cor da paleta, e a intensidade sobe junto com o
   compromisso: lavanda na borda + no fundo → navy tomando o card inteiro.
   Assim o trimestral deixa de ser "caixa branca sem graça" sem roubar o
   destaque do anual, que continua sendo o único bloco sólido. */

/* 1º degrau — cor na borda e no fundo */
.card-plano--trimestral {
  background: var(--cor-lavanda-claro);
  border-color: var(--cor-lavanda);
  box-shadow: 0 10px 30px rgba(140, 110, 190, 0.16);
}

.card-plano--trimestral .card-plano-tag {
  background: var(--cor-lavanda);
  color: var(--cor-primaria);
}

.card-plano--trimestral .card-plano-equivalente { color: var(--cor-primaria); }

/* 2º degrau — card do plano recomendado vira bloco navy sólido: a cor toma o
   card inteiro. Contraste forte em vez de só borda mais grossa (destaque fraco
   demais pra guiar a escolha). */
.card-plano--destaque {
  position: relative;
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
  box-shadow: 0 16px 40px rgba(10, 46, 82, 0.22);
}

.card-plano--destaque h3,
.card-plano--destaque .card-plano-preco { color: #fff; }

.card-plano--destaque .card-plano-preco-alt,
.card-plano--destaque .card-plano-preco span,
.card-plano--destaque .card-plano-selo { color: rgba(255, 255, 255, 0.75); }

.card-plano--destaque .card-plano-tag {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.card-plano-ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cor-cta-base);
  color: #fff;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(15, 106, 73, 0.35);
}

.card-plano-equivalente {
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--cor-cta-base);
  margin-bottom: var(--space-3);
}

.card-plano--destaque .card-plano-equivalente { color: rgba(255, 255, 255, 0.85); }

.banner-economia {
  background: var(--cor-lavanda-claro);
  border: 1px solid var(--cor-lavanda);
  border-radius: var(--radius-card);
  text-align: center;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  color: var(--cor-primaria);
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.banner-economia strong { color: var(--cor-cta-base); }

.card-plano-tag {
  display: inline-block;
  background: var(--cor-acento-claro);
  color: var(--cor-acento);
  font-size: var(--fs-tiny);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

.card-plano h3 { font-size: var(--fs-body); margin-bottom: var(--space-2); }

.card-plano-preco {
  font-size: 28px;
  font-weight: 800;
  color: var(--cor-primaria);
  margin-bottom: var(--space-1);
}

.card-plano-preco span { font-size: var(--fs-small); font-weight: 500; color: var(--cor-texto-suave); }

.card-plano-preco-alt {
  font-size: var(--fs-small);
  color: var(--cor-texto-suave);
  margin-bottom: var(--space-3);
}

.card-plano-selo {
  font-size: var(--fs-tiny);
  color: var(--cor-texto-suave);
  margin-top: var(--space-3);
}

/* ===== GARANTIA ===== */
.bloco-garantia {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  background: var(--cor-fundo-claro);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

/* selo de garantia — arquivo tem 280px (2x) e é servido a 140px pra ficar
   nítido em tela retina. height:auto é obrigatório: sem ele o atributo
   height do HTML vira altura fixa e a imagem distorce. */
.bloco-garantia-selo {
  width: 110px;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .bloco-garantia-selo { width: 140px; }
}

@media (min-width: 768px) {
  .bloco-garantia { flex-direction: row; text-align: left; }
}

/* ===== DEPOIMENTOS FOTOS ===== */
.grid-depoimentos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.grid-depoimentos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-suave);
}

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

/* ===== ESPECIALISTA ===== */
.especialista-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 768px) {
  .especialista-grade { grid-template-columns: 280px 1fr; }
}

.especialista-foto {
  display: block;
  width: 100%;
  height: auto;
  max-width: 280px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-suave);
}

.especialista-grade p { margin-bottom: var(--space-2); }

.especialista-citacao {
  border-left: 4px solid var(--cor-acento);
  padding-left: var(--space-3);
  margin-top: var(--space-3);
  font-style: italic;
  color: var(--cor-primaria);
}

/* ===== FAQ ===== */
.faq-lista { display: flex; flex-direction: column; gap: var(--space-2); }

.faq-item {
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  background: #fff;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--cor-primaria);
  font-size: var(--fs-body);
  min-height: 48px;
  display: flex;
  align-items: center;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  margin-left: auto;
  font-size: 20px;
  color: var(--cor-acento);
}

.faq-item[open] summary::after { content: '−'; }

.faq-item p { margin-top: var(--space-2); color: var(--cor-texto-suave); }

/* ===== RODAPÉ ===== */
.rodape {
  background: var(--cor-fundo-claro);
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  padding: var(--space-6) 0;
  text-align: center;
  font-size: var(--fs-small);
}

.rodape-conteudo { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

.rodape-conteudo .logo-footer { margin-bottom: var(--space-2); }

.rodape-disclaimer {
  max-width: 640px;
  font-size: var(--fs-tiny);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--cor-borda);
}

/* sem opacity: 0.8 — ela rebaixava #5B6570 para ~#7a828b (3.65:1) e reprovava
   AA em texto de 12px. A cor já é suave o bastante sozinha (5.56:1). */
.rodape-conteudo p:last-child { font-size: var(--fs-tiny); color: var(--cor-texto-suave); }

/* ===== ANIMAÇÃO DE ENTRADA (scroll reveal) ===== */
.secao {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  /* NÃO adicionar `content-visibility: auto` aqui. Testado em 26/07/2026: rende
     +4 pontos de Performance no Lighthouse mobile (TBT 230→70ms), mas QUEBRA a
     navegação por âncora. Com `scroll-behavior: smooth` (no topo do arquivo), as
     seções vão sendo renderizadas durante a rolagem e trocam a altura estimada
     pela real, então o alvo se move enquanto o navegador persegue ele: clicar num
     CTA para #oferta parava a 3076px do lugar certo. Numa página em que todo CTA
     salta para a oferta, isso custa mais do que os 4 pontos valem. */
}

.secao.visivel {
  opacity: 1;
  transform: none;
}

.hero { opacity: 1; }

/* ===== ZOOM DE IMAGEM (lightbox) ===== */
.zoom-imagem { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(10, 20, 30, 0.88);
  cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  cursor: default;
}

.lightbox-fechar {
  position: absolute;
  top: var(--space-4);
  right: var(--padding-lateral);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
}

.lightbox-fechar:hover { background: rgba(255, 255, 255, 0.28); }