/*
 * Sistema visual do funil Claude do Zero.
 * Tokens herdados da área de membros e da página de vendas do Cyber Hustler,
 * para o comprador não sentir que trocou de empresa entre o checkout e o upsell.
 */

:root {
  --bg: #08080a;
  --bg-2: #0b0b0f;
  --surface: #16161c;
  --elevated: #1d1d26;
  --border: #2a2a35;

  --fg: #f4f5f7;
  --muted: #9a9aa7;
  --dim: #6b6b78;

  --neon: #1fc7ff;
  --neon-bright: #6fe6ff;
  --blue: #2b6bff;
  --danger: #ff4d6d;
  --success: #2ee6a8;
  --gold: #e3b341;
  --gold-bright: #f9da7b;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Chakra Petch", var(--font-sans);

  --readw: 720px;
  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --grad-neon: linear-gradient(95deg, #6fe6ff 0%, #1fc7ff 45%, #2b6bff 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  /* 66% de branco: texto corrido não compete com a headline. */
  font-size: clamp(17px, 1.2vw, 19.5px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Sala iluminada: a luz atravessa as seções em vez de acompanhar as bordas. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60vw 40vh at 50% -5%, rgba(31, 199, 255, 0.12), transparent 70%),
    radial-gradient(50vw 40vh at 10% 45%, rgba(43, 107, 255, 0.07), transparent 70%),
    radial-gradient(45vw 35vh at 95% 80%, rgba(31, 199, 255, 0.06), transparent 70%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Acima do conteúdo. Em z-index 1 o grão ficava atrás de painel, botão e
     preço: pagava o custo do layer fixo e não texturizava nada. */
  z-index: 60;
  opacity: 0.04;
  mix-blend-mode: overlay;
  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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.envolve {
  position: relative;
  z-index: 2;
  width: min(100% - 2.4rem, var(--readw));
  margin-inline: auto;
}

/* ------------------------------------------------------------- tipografia */

h1,
h2,
h3 {
  font-family: var(--font-display);
  /* Nunca 700+: peso alto em display vira ruído, não hierarquia. */
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5.4vw, 3.1rem);
}

h2 {
  font-size: clamp(1.75rem, 1.25rem + 2.4vw, 3rem);
  margin-top: 2.4em;
}

p {
  margin: 0 0 1.15em;
  color: rgba(244, 245, 247, 0.82);
  text-wrap: pretty;
}

/* Headline longa pede display + lede, não display maior. */
.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.24rem);
  color: rgba(244, 245, 247, 0.72);
  line-height: 1.5;
}

strong,
b {
  color: var(--fg);
  font-weight: 600;
}

.destaque {
  color: var(--neon-bright);
  font-weight: 600;
}

.sobrancelha {
  font-family: var(--font-display);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--neon-bright);
  text-shadow: 0 0 14px rgba(31, 199, 255, 0.55);
  margin-bottom: 1.1rem;
  display: block;
}

/* ------------------------------------------------------------ barra de topo */

.alerta-topo {
  position: relative;
  z-index: 3;
  background: linear-gradient(90deg, rgba(255, 77, 109, 0.16), rgba(255, 77, 109, 0.07));
  border-bottom: 1px solid rgba(255, 77, 109, 0.3);
  color: #ffd9e0;
  font-family: var(--font-display);
  font-size: clamp(0.76rem, 2.1vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.72rem 1rem;
}

/* ------------------------------------------------------------------ vídeo */

.player {
  position: relative;
  margin: 2rem 0 2.4rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow:
    0 0 0 1px rgba(31, 199, 255, 0.08),
    0 30px 80px -30px rgba(31, 199, 255, 0.35);
  aspect-ratio: 16 / 9;
}

.player > * {
  width: 100%;
  height: 100%;
}

/* Placeholder enquanto o editor não devolve a VSL. Sai quando o player entra. */
.player-vazio {
  display: grid;
  place-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--dim);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- oferta */

.painel {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid rgba(31, 199, 255, 0.3);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.3rem);
  margin: 2.2rem 0;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 40px 90px -30px #000,
    0 0 70px -24px var(--neon);
}

.painel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 199, 255, 0.55), transparent);
}

/*
 * O riscado vive só no número. Aplicado no bloco, o line-through herdava para
 * todo o conteúdo inline e renderizava "D̶e̶ ̶R̶$̶4̶9̶7̶ ̶p̶o̶r̶" — a frase inteira cortada.
 */
.preco-de {
  font-family: var(--font-display);
  color: var(--dim);
  font-size: 1.15rem;
}

.preco-de [data-de] {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 77, 109, 0.7);
}

.preco {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 3.9rem);
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Brilho por text-shadow, nunca filter: drop-shadow apaga texto com
     background-clip no Safari iOS. inline-block evita o gradiente sumir
     quando a linha quebra. */
  text-shadow: 0 0 26px rgba(31, 199, 255, 0.5);
  display: inline-block;
}

.preco-parcela {
  font-family: var(--font-display);
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 0.35rem;
}

/* ----------------------------------------------------------------- botões */

.cta {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.98rem, 2.6vw, 1.16rem);
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: #04131a;
  background: var(--grad-neon);
  border: 0;
  border-radius: 12px;
  padding: 1.15rem 1.4rem;
  text-wrap: balance;
  margin: 1.6rem 0 0.9rem;
  cursor: pointer;
  box-shadow: 0 18px 45px -18px rgba(31, 199, 255, 0.85);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 55px -18px rgba(31, 199, 255, 0.95);
}

.cta:active {
  transform: translateY(0);
}

/* Link vazio precisa gritar em vez de engolir clique de comprador. */
.cta[data-sem-link="true"] {
  background: repeating-linear-gradient(
    45deg,
    #3a2a12,
    #3a2a12 12px,
    #4a3616 12px,
    #4a3616 24px
  );
  color: var(--gold-bright);
  box-shadow: none;
}

.cta[data-sem-link="true"]::after {
  content: " — falta o link da Guru";
  font-weight: 400;
  opacity: 0.8;
}

.microcopy {
  text-align: center;
  text-wrap: balance;
  font-size: 0.83rem;
  color: var(--dim);
  margin: 0;
}

/* Recusa: existe, é honesta, e não compete com o botão. */
.recusar {
  display: block;
  text-align: center;
  margin: 2.2rem 0 3.5rem;
  color: var(--dim);
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(154, 154, 167, 0.35);
}

.recusar:hover {
  color: var(--muted);
}

/* ------------------------------------------------------------- depoimento */

.depoimento {
  position: relative;
  padding: 0.2rem 0 0.2rem 2.6rem;
  margin: 2.4rem 0;
  color: rgba(244, 245, 247, 0.86);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.depoimento::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.35em;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--neon);
  opacity: 0.5;
}

/* --------------------------------------------------------------- garantia */

.garantia {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: rgba(31, 199, 255, 0.05);
  border: 1px solid rgba(31, 199, 255, 0.24);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  margin: 2.2rem 0;
}

.garantia svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--neon);
  filter: drop-shadow(0 0 10px rgba(31, 199, 255, 0.55));
  margin-top: 2px;
}

.garantia p {
  margin: 0;
  font-size: 0.94rem;
}

/* ------------------------------------------------------------------ regra */

.regra {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
  display: grid;
  gap: 0.85rem;
}

/*
 * Fluxo inline normal, não flex: com flex, cada <strong> vira um item de flex
 * e o texto se parte em colunas espremidas.
 */
.regra li {
  position: relative;
  padding-left: 1.45rem;
  color: rgba(244, 245, 247, 0.78);
  font-size: 0.96rem;
}

.regra li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 10px rgba(31, 199, 255, 0.9);
}

/* ------------------------------------------------------------------ rodapé */

.rodape {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding: 1.8rem 0 3rem;
  text-align: center;
  color: var(--dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------- entrada */

/*
 * Progressive enhancement: por padrao o conteudo aparece. Quem esconde e o JS,
 * marcando <html class="js-anim">. Antes era o contrario, e qualquer falha de
 * script (bloqueador, erro de rede) deixava a pagina de vendas em branco.
 */
.revela {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js-anim .revela {
  opacity: 0;
  transform: translateY(20px);
}

.js-anim .revela.dentro {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .js-anim .revela {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------- marca */

/*
 * Wordmark. O comprador paga num checkout do Cyber Hustler e cai aqui: sem
 * assinatura visual, a página parece de outra empresa. Vale principalmente na
 * /obrigado/, que é o último frame do produto.
 */
.marca {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1;
  text-decoration: none;
}

.marca .l1 {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dim);
}

.marca .l2 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(31, 199, 255, 0.4);
}

.topo-marca {
  position: relative;
  z-index: 3;
  width: min(100% - 2.4rem, var(--readw));
  margin: 0 auto;
  padding: 1.5rem 0 0;
}

/* ------------------------------------------------------------------ glows */

/*
 * Luz por seção, para a página ter curva de brilho em vez de um nível único do
 * topo ao rodapé. Só `transform` anima, e o blur fica num layer isolado.
 */
.brilho {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 44vw;
  height: 44vw;
  max-width: 560px;
  max-height: 560px;
  border-radius: 50%;
  filter: blur(48px);
  mix-blend-mode: screen;
  opacity: 0.5;
  background: radial-gradient(circle, rgba(31, 199, 255, 0.5), transparent 62%);
  animation: flutuar 28s ease-in-out infinite alternate;
}

.brilho-2 {
  background: radial-gradient(circle, rgba(43, 107, 255, 0.42), transparent 62%);
  animation-duration: 34s;
}

@keyframes flutuar {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.12); }
}

.painel > *,
.envolve > section,
.envolve > header {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------- barra fixa de CTA */

.cta-fixo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2rem);
  background: rgba(11, 11, 15, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(31, 199, 255, 0.22);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}

.cta-fixo.dentro {
  transform: none;
}

.cta-fixo .valor {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--fg);
  white-space: nowrap;
}

.cta-fixo .valor small {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
}

.cta-fixo .cta {
  width: auto;
  margin: 0;
  padding: 0.8rem 1.4rem;
  font-size: 0.9rem;
}

@media (max-width: 520px) {
  .cta-fixo .valor small { display: none; }
  .cta-fixo .cta { padding: 0.8rem 1rem; font-size: 0.82rem; }
}