/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM FDB — camada de acabamento das páginas do funil do Corte
   01/08/2026

   POR QUE ESTE ARQUIVO EXISTE
   As páginas do funil (quiz, vendas, VSL, upsell, downsell) precisam parecer
   o mesmo produto e num padrão acima do "template com fonte bonita". Em vez
   de repetir 400 linhas de CSS em cada arquivo, o acabamento vive aqui e cada
   página só traz o que é dela.

   O QUE ESTA CAMADA **NÃO** FAZ: inventar paleta.
   A skill de design premium manda sortear um "vibe archetype" (creme editorial,
   glass roxo…). Aqui isso está VETADO: o padrão visual da Faculdade da Beleza
   é fechado — Plus Jakarta Sans, fundo #0a0a0c, ouro #D4AF37 — e é o mesmo do
   app da aluna. Trocar a paleta pra parecer premium quebraria o
   reconhecimento de marca, que vale mais que originalidade de layout.
   O que se aplica da skill é a ENGENHARIA: bezel duplo, ritmo espacial,
   física de motion, revelação por scroll. Craft, não maquiagem.

   REGRAS DE PERFORMANCE (obedecidas, não decorativas)
   · Só `transform` e `opacity` animam. Nada de top/left/width/height.
   · `backdrop-filter` SÓ em elemento fixo/sticky. Nunca em container que rola
     — repaint contínuo de GPU derruba o frame no celular, e o público aqui é
     majoritariamente iOS em rede móvel.
   · Grão fica num pseudo-elemento `fixed` + `pointer-events:none`.
   · Scroll reveal por IntersectionObserver. `addEventListener('scroll')` é
     proibido: reflow contínuo.
   · `prefers-reduced-motion` desliga tudo — acessibilidade não é opcional.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Jakarta';src:url('/fonts/jk-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/fonts/jk-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/fonts/jk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/fonts/jk-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  /* Tokens da home institucional — mesmos NOMES, não só valores. */
  --bg:#0a0a0c; --bg2:#141418; --surface:#18181d; --surface2:#22222a;
  --gold:#D4AF37; --gold-hi:#F5D67B; --gold-dim:#A8862B;
  --text:#f5f5f7; --text2:#c9cbd4; --muted:#8a8a97;
  --line:rgba(212,175,55,.16); --line2:rgba(255,255,255,.08);
  --display:'Jakarta',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Jakarta',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --green:#00A868; --green-hi:#00c47a;
  /* Vermelho OFICIAL da casa — o mesmo do bump do checkout (#E23A2E). Antes eu
     tinha inventado tons lavados (#c04a4a, #e08a5a, #ff8f8f): fora da paleta e
     sem contraste no fundo escuro. Alerta que nao se le nao alerta. */
  --red:#E23A2E; --red-hi:#FF5B4D;
  /* curva única de todo o funil: massa física, nunca `ease-in-out` */
  --ease:cubic-bezier(.32,.72,0,1);
  --r-out:28px;              /* raio do casco externo */
  --r-in:calc(28px - 7px);   /* raio do miolo — concêntrico, não chutado */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
/* Coluna flex + main que estica: o rodapé fica COLADO embaixo mesmo quando a
   página tem pouco conteúdo — que é o caso do quiz, onde cada tela é só uma
   pergunta. Sem isso o rodapé sobe e fica boiando no meio da tela.
   `100dvh` e não `100vh`: no Safari do iPhone a barra de endereço muda a altura
   e o `vh` faz a página pular. */
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;position:relative;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1 0 auto}
footer{flex:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:0}

/* ── Atmosfera: orbes de ouro + grão ────────────────────────────────────────
   Ambos FIXOS e pointer-events:none — não entram no fluxo, não repintam. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 78% -8%, rgba(212,175,55,.13), transparent 62%),
    radial-gradient(52vw 52vw at 6% 32%, rgba(212,175,55,.07), transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(212,175,55,.05), transparent 60%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer,.barra{position:relative;z-index:2}

/* ── Ritmo espacial ───────────────────────────────────────────────────────── */
.wrap{width:min(760px,100%);margin-inline:auto;padding-inline:clamp(20px,5vw,32px)}
.secao{margin:clamp(64px,12vw,112px) 0}   /* a página respira: nada de 40px */
.secao > h2{font-size:clamp(24px,5.4vw,36px);margin-bottom:26px;line-height:1.14}
.secao p{color:var(--text2);font-size:17px;line-height:1.75;margin:0 0 22px}
.secao p:last-child{margin-bottom:0}
.secao strong{color:var(--text);font-weight:700}

/* Eyebrow: pílula microscópica antes de todo H2 */
.eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);background:rgba(212,175,55,.08);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;margin-bottom:22px}

/* ── Bezel duplo: casco + miolo, raios concêntricos ───────────────────────── */
.bezel{background:rgba(255,255,255,.035);border:1px solid var(--line2);
  border-radius:var(--r-out);padding:7px}
.bezel > .core{background:var(--surface);border-radius:var(--r-in);
  padding:clamp(26px,5.5vw,38px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.055)}
.bezel.gold{background:rgba(212,175,55,.08);border-color:var(--line)}

/* ── Botão: pílula + ícone aninhado no próprio círculo ────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  width:100%;cursor:pointer;border:none;text-decoration:none;
  padding:9px 9px 9px 69px;min-height:68px;
  font:inherit;font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(135deg,var(--green-hi),var(--green));
  border-radius:999px;
  box-shadow:0 10px 34px rgba(0,168,104,.26), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.btn:hover{box-shadow:0 16px 44px rgba(0,168,104,.34), inset 0 1px 0 rgba(255,255,255,.28)}
.btn:active{transform:scale(.985)}
.btn .lbl{flex:1;text-align:center;line-height:1.3}
.btn .ico{flex:none;width:46px;height:46px;border-radius:999px;
  background:rgba(255,255,255,.16);display:grid;place-items:center;
  transition:transform .5s var(--ease), background .5s var(--ease)}
.btn:hover .ico{transform:translate(3px,-2px) scale(1.05);background:rgba(255,255,255,.24)}
.btn .ico svg{width:19px;height:19px;stroke:#fff;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.btn-ouro{color:#0a0a0c;background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  box-shadow:0 10px 34px rgba(212,175,55,.24), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ouro:hover{box-shadow:0 16px 44px rgba(212,175,55,.32), inset 0 1px 0 rgba(255,255,255,.36)}
.btn-ouro .ico{background:rgba(10,10,12,.12)}
.btn-ouro:hover .ico{background:rgba(10,10,12,.18)}
.btn-ouro .ico svg{stroke:#0a0a0c}

/* No celular o rótulo tinha espaço demais tomado pelo ícone e quebrava em 3
   linhas. Ícone menor, paddings menores (mantendo a simetria: esquerda =
   ícone + padding direito + gap) e fonte um pouco menor. */
@media (max-width:480px){
  .btn{padding:8px 8px 8px 52px;min-height:62px;font-size:14.5px;gap:10px;letter-spacing:-.02em}
  .btn .ico{width:34px;height:34px}
  .btn .ico svg{width:16px;height:16px}
  .barra .btn{padding:6px 6px 6px 50px;font-size:13.5px;gap:10px;min-height:50px}
  .barra .btn .ico{width:34px;height:34px}
}

/* ── Revelação por scroll ─────────────────────────────────────────────────────
   PROGRESSIVE ENHANCEMENT, e isso NÃO é preciosismo.
   Se `.rev` nascesse com opacity:0 direto no CSS, qualquer falha de JS (rede
   ruim, bloqueador, erro em outro script da página) deixaria a PÁGINA DE VENDAS
   INTEIRA invisível — o pior modo de falha possível num funil pago.
   Por isso o estado escondido só existe quando o <html> ganha a classe `js`,
   que é escrita pelo próprio JS logo no topo do documento. Sem JS: tudo visível. */
html.js .rev{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease)}
html.js .rev.in{opacity:1;transform:none}

/* ── Navbar: pílula de vidro DESCOLADA do topo ────────────────────────────── */
.nav{position:sticky;top:14px;z-index:40;display:flex;justify-content:center;
  margin:14px 0 0;padding-inline:16px}
.nav .pill{display:inline-flex;align-items:center;gap:10px;
  background:rgba(20,20,24,.72);border:1px solid var(--line2);border-radius:999px;
  padding:10px 20px;font-size:14.5px;font-weight:800;letter-spacing:.01em;
  text-decoration:none;color:var(--text);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 8px 30px rgba(0,0,0,.4)}
.nav .pill i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:block}

/* Sentinela do gatilho da barra. PRECISA de altura: elemento com área zero não
   intersecta de forma confiável no IntersectionObserver — foi exatamente por
   isso que a barra não subia. 1px basta e é invisível. */
.sentinela-barra{height:1px;margin:0;padding:0}

/* ── Barra fixa de preço ──────────────────────────────────────────────────────
   NÃO nasce visível. Barra de preço na primeira dobra faz o mesmo estrago que
   as pílulas de "7 módulos" faziam: entrega que tem algo à venda antes de a
   pessoa querer alguma coisa. Ela sobe só depois que a aluna passou pela dor e
   pelo mecanismo (o gatilho é marcado no HTML com data-barra-apos), e se
   esconde de novo enquanto o bloco de oferta está na tela — dois CTAs de compra
   competindo ao mesmo tempo é ruído, não reforço. */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px clamp(14px,4vw,20px) calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,12,.9);border-top:1px solid var(--line2);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  display:flex;gap:12px;align-items:center}
.barra .v{flex:1;min-width:0}
.barra .v b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.barra .v span{font-size:12px;color:var(--muted)}
.barra .btn{width:auto;min-height:54px;padding:7px 7px 7px 61px;font-size:14.5px}
.barra .btn .ico{width:40px;height:40px}
/* Sob JS ela começa fora da tela e sobe quando liberada. Sem JS fica visível
   (o de sempre: comportamento degradado nunca pode esconder conteúdo). */
html.js .barra{transform:translateY(115%);transition:transform .6s var(--ease);
  will-change:transform}
html.js .barra.on{transform:none}

/* ── Preço ────────────────────────────────────────────────────────────────── */
.preco{text-align:center}
.preco .de{color:var(--muted);font-size:15px;text-decoration:line-through}
/* Rotulo do preco. O riscado "De R$197" saiu daqui: o stack logo acima ja soma
   R$495, e dois valores de referencia na mesma caixa se anulam — a aluna nao
   sabe de qual numero os R$47 estao descendo. */
.preco .de-rot{color:var(--muted);font-size:14px;letter-spacing:.02em;
  padding-top:26px;border-top:1px solid var(--line2);margin-top:6px}
.preco .por{font-size:clamp(44px,11vw,64px);font-weight:800;letter-spacing:-.045em;
  line-height:1;margin:12px 0 8px;
  background:linear-gradient(135deg,#fff 20%,var(--gold-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.preco .cent{font-size:.4em;font-weight:700;letter-spacing:-.02em}
.preco .parc{color:var(--text2);font-size:16px;line-height:1.65;margin-bottom:30px}
/* .secao p{margin:0 0 22px} tem especificidade MAIOR que .gar e zerava o
   margin-top — por isso a garantia colava no botao. Seletor mais especifico
   resolve sem !important. */
.preco .gar,.gar{color:var(--muted);font-size:13.5px;margin:28px 0 0;line-height:1.75}

/* ── Listas ───────────────────────────────────────────────────────────────── */
.dores,.bonus,.inclui{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dores li,.bonus li{display:flex;gap:13px;align-items:flex-start;
  background:rgba(255,255,255,.028);border:1px solid var(--line2);
  border-radius:16px;padding:19px 20px;color:var(--text2);font-size:16px;line-height:1.65;
  transition:border-color .5s var(--ease), transform .5s var(--ease)}
.dores li:hover,.bonus li:hover{border-color:var(--line);transform:translateX(3px)}
.dores svg{flex:none;width:18px;height:18px;color:var(--red-hi);margin-top:3px;
  stroke-width:2.2;fill:none;stroke:currentColor;stroke-linecap:round}
.bonus em{flex:none;font-style:normal;font-weight:800;color:var(--gold);font-size:15px;margin-top:1px}
.inclui li{display:flex;gap:13px;align-items:flex-start;color:var(--text2);font-size:16px;line-height:1.7}
.inclui svg{flex:none;width:18px;height:18px;color:var(--green);margin-top:3px;
  stroke-width:2.4;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.vira{margin-top:26px;color:var(--text);font-size:18px;font-weight:700;line-height:1.6}
.vira em{font-style:italic;color:var(--gold)}

/* ── HIERARQUIA ENTRE BLOCOS ──────────────────────────────────────────────────
   Página de vendas não é uma pilha de blocos iguais. Cada seção tem um PESO,
   e o olho precisa sentir a diferença: dor pesa menos que mecanismo, que pesa
   menos que oferta. Sem isso a página fica "esquisita" — tecnicamente correta
   e comercialmente morta. */
.secao.peso-1 > h2{font-size:clamp(21px,4.6vw,29px)}   /* apoio */
.secao.peso-2 > h2{font-size:clamp(24px,5.4vw,36px)}   /* padrão */
.secao.peso-3 > h2{font-size:clamp(28px,6.4vw,44px)}   /* clímax: oferta */
.secao.peso-3{margin:clamp(72px,14vw,128px) 0}

/* Faixa de respiro escuro: separa fisicamente os atos da página */
.faixa{margin:clamp(64px,12vw,112px) 0;padding:clamp(40px,8vw,72px) 0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.022) 18%,rgba(255,255,255,.022) 82%,transparent);
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.faixa .secao{margin:0}

/* ── CARDS DE BÔNUS COM VALOR ────────────────────────────────────────────────
   Bônus em lista não gera valor: gera "mais texto". Em card, com preço
   atribuído e riscado, cada item vira uma linha do stack de valor — que é o
   que sustenta o R$47 parecer barato no fim. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{background:rgba(255,255,255,.032);border:1px solid var(--line2);
  border-radius:22px;padding:28px 24px;position:relative;overflow:hidden;
  transition:border-color .5s var(--ease), transform .5s var(--ease)}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.5),transparent)}
.card .tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:15px}
.card h3{font-size:19px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.25}
.card p{color:var(--text2);font-size:15px;margin:0 0 20px;line-height:1.68}
/* Card com capa. Todo bônus tem arte no MESMO formato retrato dos cards Mestre:
   mostrar o que ela recebe vale mais que adjetivar. Um bônus sem imagem no meio
   de outros com imagem parece o que sobrou. */
.card.comcapa{padding:0;display:flex;flex-direction:column}
.card.comcapa .capa{position:relative;overflow:hidden;
  border-radius:22px 22px 0 0;background:var(--bg2)}
.card.comcapa .capa img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;
  transition:transform .8s var(--ease)}
.card.comcapa:hover .capa img{transform:scale(1.04)}
.card.comcapa .capa::after{content:'';position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(180deg,transparent,rgba(24,24,29,.92))}
.card.comcapa .txt{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.card.comcapa .txt .valor{margin-top:auto}
.card.comcapa.principal{border-color:var(--line);background:rgba(212,175,55,.05)}
.card .valor{display:flex;align-items:baseline;gap:10px;
  padding-top:18px;border-top:1px solid var(--line2)}
.card .valor .risc{color:var(--muted);text-decoration:line-through;font-size:15px}
.card .valor .free{font-size:15px;font-weight:800;color:var(--gold)}

/* ── STACK DE VALOR ──────────────────────────────────────────────────────────
   O somatório antes do preço. Sem ele o R$47 é só um número; com ele, é uma
   comparação — que é como preço barato se prova. */
.stack{display:grid;gap:0}
.stack .li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 0;border-bottom:1px dashed var(--line2)}
.stack .li span{color:var(--text2);font-size:15.5px}
.stack .li b{flex:none;font-weight:700;font-size:15.5px;color:var(--text)}
.stack .tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:22px 0 0;margin-bottom:6px}
.stack .tot span{font-size:16px;font-weight:800}
.stack .tot b{flex:none;font-size:20px;font-weight:800;color:var(--muted);text-decoration:line-through}

/* ── Números ──────────────────────────────────────────────────────────────── */
.num{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:14px;margin:28px 0}
.num div{background:rgba(255,255,255,.028);border:1px solid var(--line2);
  border-radius:18px;padding:24px 14px;text-align:center}
.num b{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff,var(--gold-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.num span{font-size:13px;color:var(--muted)}

/* ── Prova ────────────────────────────────────────────────────────────────── */
.prova{text-align:center;color:var(--text2);font-size:16px}
.prova b{display:block;font-weight:800;font-size:clamp(26px,6vw,34px);letter-spacing:-.03em;
  margin-bottom:6px;background:linear-gradient(135deg,#fff,var(--gold-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:12px}
.faq details{background:rgba(255,255,255,.028);border:1px solid var(--line2);
  border-radius:18px;padding:0 20px;transition:border-color .5s var(--ease)}
.faq details[open]{border-color:var(--line)}
.faq summary{cursor:pointer;padding:21px 0;font-weight:700;font-size:16.5px;line-height:1.5;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:22px;height:22px;border-radius:999px;
  border:1px solid var(--line);background:
    linear-gradient(currentColor,currentColor) center/9px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 9px no-repeat;
  color:var(--gold);transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq p{margin:0 0 21px;color:var(--text2);font-size:15.5px;line-height:1.72}

footer{border-top:1px solid var(--line2);padding:32px 0 110px;
  color:var(--muted);font-size:12.5px;text-align:center;line-height:1.8}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}