/* ═══════════════════════════════════════════════════════════════════════════
   PV7 · "LUX" — camada de layout clara/premium
   ───────────────────────────────────────────────────────────────────────────
   Carrega DEPOIS de v4-soft-premium.min.css (tokens/tipografia/botões),
   pv4-base-pv2.css (componentes: vsx player, story cards, marquee, ilha de
   oferta, FAQ) e pv5-banana.css (grid bn-*).

   O que esta camada faz de diferente da PV5:
   1. Assume a paleta CLARA como protagonista. O escuro vira pontuação, usado
      em no máximo 2 blocos, para dar respiro e contraste.
   2. Cada seção tem um FORMATO próprio (escada, sticky, bento, faixa, trilho).
      A regra é: duas seções vizinhas nunca repetem a mesma diagramação.
   3. Animação ligada ao scroll, não só fade. Barra de progresso na trilha de
      instalação, números que sobem, cards que assentam em profundidade.

   Prefixo desta camada: .lx-
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1 · Tokens e base ───────────────────────── */

:root{
  /* Tipografia VTSD (home vendatodosantodia): Inter + Montserrat + Space Grotesk */
  --fd:'Inter',system-ui,-apple-system,sans-serif;
  --fb:'Inter',system-ui,-apple-system,sans-serif;
  --fs:'Montserrat',system-ui,sans-serif;
  --fm:'Space Grotesk',system-ui,sans-serif;

  /* Superfícies claras. A cream é a base; o papel é o card que flutua nela. */
  --lx-cream:#F7F4ED;
  --lx-cream-2:#FCFAF7;
  --lx-paper:#FFFFFF;
  --lx-sand:#F0E9DB;
  --lx-sand-2:#E7DECB;

  /* Hairlines: a linha fina é o que separa "claro" de "lavado". */
  --lx-hair:rgba(18,30,43,.085);
  --lx-hair-2:rgba(18,30,43,.045);
  --lx-hair-gold:rgba(204,153,0,.28);

  /* Sombras em camadas. Nunca uma sombra só: sempre contato + difusa. */
  --lx-sh-1:0 1px 2px rgba(18,30,43,.04), 0 4px 14px rgba(18,30,43,.045);
  --lx-sh-2:0 2px 4px rgba(18,30,43,.05), 0 12px 32px rgba(18,30,43,.07);
  --lx-sh-3:0 4px 8px rgba(18,30,43,.06), 0 26px 60px rgba(18,30,43,.10);
  --lx-sh-gold:0 12px 34px rgba(204,153,0,.18);

  --lx-r:20px;
  --lx-r-lg:28px;
  --lx-r-xl:36px;

  /* ── Escala de ritmo vertical ──
     O respiro percebido entre duas seções é a soma do padding-bottom de uma com
     o padding-top da seguinte. Então o valor abaixo é METADE do respiro final.

     Calibrado contra a PV5, que é a referência validada: mediana de 224px de
     respiro no desktop. 112 + 112 = 224. A versão anterior desta página usava
     150px de base, o que dava 300px e deixava a leitura frouxa.

     --lx-sect        padrão, respiro de 224px no desktop
     --lx-sect-tight  para o par de seções que conta UM movimento só (128px)
     --lx-sect-air    para o clímax, onde o respiro maior é intencional (280px) */
  --lx-sect:clamp(64px, 8.75vw, 112px);
  --lx-sect-tight:clamp(36px, 5vw, 64px);
  --lx-sect-air:clamp(80px, 10.9vw, 140px);

  /* ── Escala de espaçamento DENTRO da seção ──
     Três níveis, e nada fora deles. Sem isso a página acumula valores soltos
     (48, 52, 58, 69...) que ninguém percebe um a um, mas que somados fazem o
     ritmo interno parecer descuidado.
     head  cabeçalho da seção para o conteúdo
     block conteúdo para conteúdo, e conteúdo para CTA
     note  elemento para a nota dele (fonte, disclaimer, microcopy) */
  --lx-gap-head:clamp(40px, 5vw, 64px);
  --lx-gap-block:clamp(38px, 4.6vw, 59px);
  --lx-gap-note:clamp(18px, 2.2vw, 28px);

  --lx-ease:cubic-bezier(.22,.61,.36,1);
  --lx-ease-out:cubic-bezier(.16,1,.3,1);
}

/* ── Neutraliza regras por ID herdadas do pv4-base-pv2.css ──
   Aquele arquivo traz padding específico para #dado-quebrado, #limite-planilha,
   #contexto-meta e #ancoragem, escrito para a PV2, onde dashboard + Sheets +
   Meta formavam um bloco visual só. Na PV7 o controle volta para a escala
   acima; o trio de dor fica colado de propósito (paper → painel Sheets → Meta). */
#dado-quebrado.lx-sect{ padding-bottom:var(--lx-sect-tight) }
/* Split centralizado; no mobile o trecho “O dash…” vai após a imagem */
#dado-quebrado .lx-split--dado{
  text-align:center;
}
#dado-quebrado .lx-split-copy h2,
#dado-quebrado .lx-split-copy .lx-dek{
  margin-inline:auto;
  text-align:center;
  max-width:min(52ch, 100%);
}
#dado-quebrado .lx-split-copy .lx-dek + .lx-dek{
  margin-top:16px;
}
/* Ilustração integrada ao papel — bordas esfumaçadas no fundo da seção */
#dado-quebrado .lx-split-media{
  width:100%;
  max-width:100%;
}
#dado-quebrado .lx-split-media::after{ display:none }
#dado-quebrado .lx-split-media img{
  width:100%;
  height:auto;
  max-width:100%;
  border:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width:900px){
  #dado-quebrado .lx-split--dado{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(22px,5vw,32px);
  }
  #dado-quebrado .lx-split-copy{
    display:contents;
  }
  #dado-quebrado .lx-split-copy h2{ order:1; width:100% }
  #dado-quebrado .lx-split-copy .lx-dek:not(.lx-dek--dash-tail){ order:2; width:100% }
  #dado-quebrado .lx-split-media{ order:3 }
  #dado-quebrado .lx-dek--dash-tail{
    order:4;
    width:100%;
    margin-top:0;
  }
  #dado-quebrado .lx-split-media{
    max-width:min(380px, 82vw);
    margin-inline:auto;
  }
}
#limite-planilha.lx-sect{
  padding-top:var(--lx-sect-tight);
  padding-bottom:var(--lx-sect-tight);
}
#contexto-meta.lx-sect{ padding-top:var(--lx-sect-tight) }
#contexto-meta .lx-head{
  max-width:min(92ch, 100%);
}
#contexto-meta .lx-head h3{
  font-family:var(--fd);
  font-weight:800;
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  line-height:1.22;
  letter-spacing:-.025em;
  margin-bottom:18px;
  text-wrap:balance;
}
#contexto-meta .lx-head h3 .em-gold{
  background-image:linear-gradient(100deg, var(--gold-bright), #FC7148) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
#contexto-meta .lx-head .lx-dek{
  max-width:min(68ch, 100%);
}
/* Mercado seletivo — split: copy à esquerda · diagrama à direita */
#mercado-seletivo.lx-sect--tight{
  padding-top:var(--lx-sect-tight);
  padding-bottom:var(--lx-sect-tight);
  background:#F6F5F9;
  overflow:hidden;
}
#mercado-seletivo.lx-sect--tight::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:0;
  top:0;
  bottom:0;
  width:min(26%, 300px);
  background:linear-gradient(
    105deg,
    rgba(88,212,23,.11) 0%,
    rgba(88,212,23,.05) 38%,
    transparent 82%
  );
}
#mercado-seletivo.lx-sect--tight::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:-10%;
  top:50%;
  transform:translateY(-50%);
  width:min(300px, 24vw);
  height:min(480px, 82%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(88,212,23,.14) 0%, rgba(255,195,15,.08) 42%, transparent 72%);
  filter:blur(68px);
}
#mercado-seletivo .lx-split--mercado{
  align-items:center;
}
#mercado-seletivo .lx-split-copy h2{
  text-wrap:balance;
}
#mercado-seletivo .lx-split-copy .lx-dek{
  max-width:58ch;
}
#mercado-seletivo .lx-split-media::after{
  display:none;
}
#mercado-seletivo .lx-split-media img{
  border:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
/* Marcador pill (estilo DADOS REAIS — verde) */
.lx-mark{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(16px,2.2vw,22px);
  padding:6px 14px 6px 10px;
  border-radius:var(--r-pill);
  font-family:var(--fb);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
}
.lx-mark-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
}
.lx-mark--green{
  background:rgba(88,212,23,.14);
  color:#2a7a12;
  border:1px solid rgba(62,154,26,.18);
}
.lx-mark--green .lx-mark-dot{
  background:#3E9A1A;
  box-shadow:0 0 0 2px rgba(88,212,23,.35);
}
.lx-mercado-shot{
  margin:0;
  max-width:100%;
}
/* Diagrama mercado seletivo — sem card, bordas limpas */
.lx-mercado-shot img{
  display:block;
  width:100%;
  height:auto;
  border:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
@media (max-width:900px){
  #mercado-seletivo .lx-split-copy{
    text-align:center;
  }
  #mercado-seletivo .lx-split-copy .lx-mark{
    margin-inline:auto;
  }
  #mercado-seletivo .lx-split-copy .lx-dek{
    margin-inline:auto;
  }
  #mercado-seletivo .lx-mercado-shot{
    width:calc(100% + 2 * clamp(18px, 3.5vw, 40px));
    max-width:none;
    margin-inline:calc(-1 * clamp(18px, 3.5vw, 40px));
  }
  #mercado-seletivo.lx-sect--tight::before{
    left:50%;
    top:-8%;
    bottom:auto;
    width:min(420px, 92vw);
    height:min(480px, 70vh);
    transform:translateX(-50%);
    background:
      radial-gradient(ellipse 80% 70% at 50% 40%, rgba(88,212,23,.09), transparent 68%),
      radial-gradient(ellipse 65% 55% at 50% 30%, rgba(255,195,15,.1), transparent 72%);
  }
  #mercado-seletivo.lx-sect--tight::after{
    display:none;
  }
}
#contexto-meta-media.lx-sect--top0{
  padding-top:0;
}
#ancoragem.lx-sect{ padding-top:var(--lx-sect) }

/* Painel escuro do Sheets: o .em-gold da lux (#FC7148) some no ink;
   no card preto volta o ouro da marca. */
#limite-planilha .lpl-head h2 .em-gold{
  color:var(--gold-bright);
  background:none;
  -webkit-text-fill-color:var(--gold-bright);
}

body{ background:var(--lx-cream); }

/* Grão. Dá textura de papel e mata o aspecto "chapado" do fundo claro.
   SVG inline em data URI: nenhum request extra, nenhum host externo. */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
@media (max-width:700px){ body::before{ opacity:.32 } }

/* ─────────────────────────── 2 · Utilitários da camada ─────────────────── */

.lx-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(18px,3.5vw,40px); width:100% }
.lx-wrap--tight{ max-width:980px }
.lx-wrap--wide{ max-width:1400px }
.lx-wrap--mosaic{ max-width:min(1520px,96vw) }

.lx-sect{ position:relative; padding:var(--lx-sect) 0 }
.lx-sect--top0{ padding-top:0 }
.lx-sect--bot0{ padding-bottom:0 }
/* Respiro maior, para o clímax do argumento */
.lx-sect--air{ padding-top:var(--lx-sect-air); padding-bottom:var(--lx-sect-air) }
/* Par colado: duas seções que contam um movimento só */
.lx-sect--tight-b{ padding-bottom:var(--lx-sect-tight) }
.lx-sect--tight-t{ padding-top:var(--lx-sect-tight) }

/* Fundos alternados. A troca de superfície é o que dá ritmo à descida. */
.lx-bg-cream{ background:var(--lx-cream) }
.lx-bg-paper{ background:var(--lx-paper) }
.lx-bg-sand{ background:linear-gradient(180deg, var(--lx-cream) 0%, var(--lx-sand) 100%) }
.lx-bg-ink{ background:var(--night); color:var(--sand-soft) }
.lx-bg-ink h2,.lx-bg-ink h3,.lx-bg-ink h4{ color:var(--sand) }

/* Aurora: manchas de luz muito suaves. Só no claro, e só onde a seção
   precisa de profundidade sem ganhar mais um elemento gráfico. */
.lx-aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.lx-aurora::before,.lx-aurora::after{
  content:''; position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5;
}
.lx-aurora::before{
  width:52vw; height:52vw; max-width:680px; max-height:680px;
  top:-18%; left:-12%;
  background:radial-gradient(circle, rgba(255,195,15,.22), transparent 68%);
}
.lx-aurora::after{
  width:44vw; height:44vw; max-width:560px; max-height:560px;
  bottom:-22%; right:-10%;
  background:radial-gradient(circle, rgba(23,150,212,.13), transparent 68%);
}
.lx-sect > .lx-wrap,.lx-sect > .lx-wrap--tight,.lx-sect > .lx-wrap--wide{ position:relative; z-index:1 }

/* Cabeçalho de seção */
.lx-head{ max-width:min(64ch,100%); margin-bottom:var(--lx-gap-head) }
.lx-head--center{ margin-left:auto; margin-right:auto; text-align:center }
.lx-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fm); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-d); margin-bottom:18px;
}
.lx-bg-ink .lx-eyebrow{ color:var(--gold-bright) }

.lx-head h2{ margin-bottom:18px }
.lx-dek{ font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--mut); max-width:60ch }
.lx-dek .em-gold,
.bn-mq-cap .em-gold,
.cam-verdict .em-gold,
.caplist-tx .em-gold,
.lx-hero-sub .em-gold,
.lx-close .em-gold,
.lx-auth-lead .em-gold{
  background:linear-gradient(100deg, var(--gold-bright), #FC7148);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:700;
}
.lx-head--center .lx-dek{ margin-inline:auto }
.lx-bg-ink .lx-dek{ color:var(--sand-soft) }

/* Grifo dourado sob a palavra-chave.
   Feito com background-size animado em vez de um ::after posicionado, por dois
   motivos: (1) box-decoration-break faz o grifo acompanhar a frase quando ela
   quebra em mais de uma linha, e (2) sem position/absolute não é preciso
   white-space:nowrap, que era o que fazia frases longas vazarem da coluna.
   O gatilho aceita QUALQUER ancestral com .in, porque as seções desta página
   usam .lx-rise / .lx-zoom / .lx-slide-*, e não só .reveal. */
.lx-hl{
  background-image:linear-gradient(90deg, rgba(255,195,15,.42), rgba(255,195,15,.20));
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:0 .32em;
  padding:0 .06em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background-size .7s var(--lx-ease-out) .25s;
}
.in .lx-hl,.lx-hl.in{ background-size:100% .32em }

/* Serifa itálica para a frase de emoção */
.lx-serif{ font-family:var(--fs); font-style:normal; font-weight:600; letter-spacing:0 }

/* Ênfase amarelo → laranja (padrão PV2) em títulos e corpo */
.lx-hero h1 .em-gold,
.lx-sect h2 .em-gold,
.lx-sect h3 .em-gold,
.lx-breath .em-gold,
.lx-head h2 .em-gold,
.lx-head h3 .em-gold,
.lx-bg-ink h2 .em-gold,
.lx-bg-ink h3 .em-gold,
.lx-stories h2 .em-gold,
.lx-stories h3 .em-gold,
.feat-copy h3 .em-gold,
.d4pill h3 .em-gold,
.feat8-head h2 .em-gold,
.cam-card h3 .em-gold{
  background-image:linear-gradient(100deg, var(--gold-bright), #FC7148) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

/* ─────────────────────── 3 · Animações de entrada ──────────────────────── */

/* A base (.reveal → .in) vem do CSS herdado. Aqui entram as variações que
   dão personalidade diferente para cada formato de seção. */

.lx-rise{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--lx-ease-out), transform .8s var(--lx-ease-out) }
.lx-rise.in{ opacity:1; transform:none }

.lx-zoom{ opacity:0; transform:scale(.965) translateY(18px); transition:opacity .9s var(--lx-ease-out), transform .9s var(--lx-ease-out) }
.lx-zoom.in{ opacity:1; transform:none }

.lx-slide-l{ opacity:0; transform:translateX(-30px); transition:opacity .8s var(--lx-ease-out), transform .8s var(--lx-ease-out) }
.lx-slide-r{ opacity:0; transform:translateX(30px); transition:opacity .8s var(--lx-ease-out), transform .8s var(--lx-ease-out) }
.lx-slide-l.in,.lx-slide-r.in{ opacity:1; transform:none }

/* Escalonamento por atraso. data-d="1..8" */
[data-d="1"]{ transition-delay:.08s } [data-d="2"]{ transition-delay:.16s }
[data-d="3"]{ transition-delay:.24s } [data-d="4"]{ transition-delay:.32s }
[data-d="5"]{ transition-delay:.40s } [data-d="6"]{ transition-delay:.48s }
[data-d="7"]{ transition-delay:.56s } [data-d="8"]{ transition-delay:.64s }

@media (prefers-reduced-motion: reduce){
  .lx-rise,.lx-zoom,.lx-slide-l,.lx-slide-r{ opacity:1; transform:none; transition:none }
  .lx-hl{ background-size:100% .32em; transition:none }
}

/* ───────────────────────────── 4 · HERO ────────────────────────────────── */
/* Sem imagem, sem navbar, sem card lateral. Só tipografia grande, uma linha
   de subtítulo e o vídeo. Todo o peso visual está no vídeo. */

.lx-hero{
  position:relative;
  padding:clamp(56px,9vh,104px) 0 clamp(40px,5vw,64px);
  background:
    radial-gradient(120% 74% at 50% -12%, rgba(255,195,15,.16), transparent 62%),
    linear-gradient(180deg, var(--lx-cream-2) 0%, var(--lx-cream) 100%);
  overflow:hidden;
}
@media (max-width:700px){
  .lx-hero{
    padding:clamp(28px,4.5vh,40px) 0 clamp(32px,5vw,48px);
  }
}
/* Malha de linhas muito leve atrás do hero: dá o ar "técnico" sem ruído. */
.lx-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(18,30,43,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,30,43,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 72%);
}

.lx-hero-inner{ position:relative; z-index:1; text-align:center }

.lx-hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px 7px 10px; margin-bottom:clamp(22px,3vw,30px);
  border:1px solid var(--lx-hair-gold); border-radius:100px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(8px);
  font-family:var(--fm); font-size:.7rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-d);
  box-shadow:var(--lx-sh-1);
}
.lx-hero-badge b{ color:var(--ink); font-weight:700 }
.lx-hero-badge-dot{
  width:7px; height:7px; border-radius:50%; background:var(--green-br);
  box-shadow:0 0 0 3px rgba(88,212,23,.18);
  animation:lx-pulse 2.4s ease-in-out infinite;
}
@keyframes lx-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* H1 longo (carteira + IA + 50k): container mais largo para caber em ≤4
   linhas no desktop (antes: 16ch → ~6 linhas). Escala grande mantida. */
.lx-hero h1{
  font-size:clamp(2.5rem, 6.2vw, 4.6rem);
  font-weight:700;
  line-height:1.02; letter-spacing:-.038em;
  max-width:min(32ch, 100%); margin:0 auto clamp(20px,2.6vw,28px);
  text-wrap:balance;
}
.lx-hero-sub{
  font-size:clamp(1.06rem,1.9vw,1.32rem);
  font-weight:600;
  color:var(--ink-soft); max-width:52ch; margin:0 auto;
  line-height:1.55; text-wrap:pretty;
}
.lx-hero-sub b{ color:var(--ink); font-weight:600 }

/* Linha typewriter entre subtítulo e vídeo: outcome ciclando em dourado. */
.lx-hero-tw{
  margin:clamp(18px,2.4vw,26px) auto 0;
  max-width:44ch;
  min-height:1.45em;
  font-family:var(--fd);
  font-size:clamp(1.12rem,2.2vw,1.48rem);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.02em;
  text-align:center;
  text-wrap:balance;
}
.lx-tw{
  display:inline;
  background:linear-gradient(100deg, var(--gold-bright), #FC7148);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:600;
}
.lx-tw-cursor{
  display:inline-block;
  width:.55ch;
  margin-left:.06em;
  color:var(--gold-d);
  -webkit-text-fill-color:var(--gold-d);
  animation:lxTwBlink 1.05s step-end infinite;
  vertical-align:baseline;
}
@keyframes lxTwBlink{ 0%,100%{opacity:1} 50%{opacity:0} }
@media (prefers-reduced-motion: reduce){
  .lx-tw-cursor{ animation:none }
  .lx-tw{ min-width:0 !important }
}

/* Palco do vídeo: moldura clara (passe-partout) sem anel interno marcado. */
.lx-hero-stage{
  margin-top:clamp(28px,4vw,48px);
  max-width:960px; margin-inline:auto;
  position:relative;
}
/* Halo dourado por baixo, para o vídeo "assentar" na página */
.lx-hero-stage::after{
  content:''; position:absolute; z-index:-1;
  left:6%; right:6%; bottom:-26px; height:60px;
  background:radial-gradient(ellipse at center, rgba(204,153,0,.26), transparent 70%);
  filter:blur(22px);
}
.lx-hero-stage .vsx-stage{ margin:0; perspective:none }
.lx-hero-stage .vsx-mat{
  padding:clamp(6px,1vw,12px);
  background:var(--lx-paper);
  border:1px solid var(--lx-hair);
  border-radius:var(--lx-r-lg);
  box-shadow:var(--lx-sh-3);
  opacity:1;
  transform:none;
  will-change:auto;
}
/* Tira o anel ::before/::after da base VSX — era o que deixava o quadro "marcado". */
.lx-hero-stage .vsx-mat::before,
.lx-hero-stage .vsx-mat::after{ display:none !important }
.lx-hero-stage .vsx-frame{
  border-radius:calc(var(--lx-r-lg) - 8px);
  overflow:hidden;
  box-shadow:none;
  border:0;
}
.lx-hero-stage .vsx-chrome{ height:7px }
@media (max-width:700px){
  .lx-hero-stage .vsx-chrome{ height:6px }
}

/* Idle e autoplay: nunca mostrar play no centro; start dos 2s sem fade de botão */
.lx-hero-stage .vsx-play,
.lx-hero-stage .vsx-play-label,
.lx-hero-stage .vsx-play-ic,
.lx-hero-stage .vsx-center{
  display:none !important;
}
.lx-hero-stage .vsx-poster-shade{
  background:
    linear-gradient(180deg, rgba(6,6,10,.12), transparent 40%, rgba(6,6,10,.22));
}
.lx-hero-stage .vsx-trigger{
  transition:none;
  background:transparent;
}
.lx-hero-stage .vsx-trigger:hover .vsx-poster,
.lx-hero-stage .vsx-trigger:focus-visible .vsx-poster{
  transform:none; filter:none;
}
.lx-hero-stage .vsx-video::-webkit-media-controls,
.lx-hero-stage .vsx-video::-webkit-media-controls-start-playback-button,
.lx-hero-stage .vsx-video::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance:none;
}

/* ── VSL: aviso “Clique para ativar o som” — visível desde o load, some no unmute ── */
.lx-hero-stage .vsx-unmute{
  position:absolute; left:50%; top:clamp(12px,2.4vw,20px);
  translate:-50% 0; z-index:8;
  display:none; align-items:center; justify-content:center; gap:8px;
  width:max-content; max-width:calc(100% - 24px);
  margin:0; padding:10px 16px;
  border:1px solid rgba(26,18,0,.35);
  border-radius:3px;
  background:rgba(255,195,15,.92);
  color:#1a1200;
  font-family:var(--fm, ui-sans-serif, system-ui, sans-serif);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.15;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  -webkit-tap-highlight-color:transparent;
  animation:vsxUnmuteBlink 1.15s ease-in-out infinite;
}
.lx-hero-stage .vsx-screen.is-muted .vsx-unmute{ display:inline-flex }
.lx-hero-stage .vsx-unmute-ic{
  display:grid; place-items:center; flex:0 0 auto;
  width:auto; height:auto;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.lx-hero-stage .vsx-unmute-ic svg{ display:block; width:16px; height:16px }
.lx-hero-stage .vsx-unmute-txt{ white-space:nowrap }
.lx-hero-stage .vsx-screen.is-muted .vsx-center{ display:none !important }
.lx-hero-stage .vsx-screen.is-muted .vsx-hit{ z-index:7 }
@keyframes vsxUnmuteBlink{
  0%, 100%{
    opacity:1;
    filter:brightness(1);
  }
  50%{
    opacity:.48;
    filter:brightness(1.08);
  }
}
@media (min-width:801px){
  .lx-hero-stage .vsx-unmute{
    top:18px;
    gap:12px;
    padding:16px 36px;
    border-radius:3px;
    border:1px solid rgba(26,18,0,.35);
    font-size:1.12rem;
    letter-spacing:.12em;
    font-weight:700;
    background:rgba(255,195,15,.92);
    box-shadow:0 6px 22px rgba(0,0,0,.28);
  }
  .lx-hero-stage .vsx-unmute-ic{
    width:auto; height:auto;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .lx-hero-stage .vsx-unmute-ic svg{ width:24px; height:24px }
}
@media (max-width:520px){
  .lx-hero-stage .vsx-unmute{
    gap:7px; padding:9px 14px;
    letter-spacing:.06em;
    font-size:.68rem;
  }
}
@media (prefers-reduced-motion: reduce){
  .lx-hero-stage .vsx-unmute{ animation:none; opacity:1 }
}

/* Indicativo de rolagem. Pedido explícito do briefing: sinalizar que o que
   vem abaixo é diferente do que a pessoa já viu em outras páginas. */
.lx-scroll-cue{
  margin-top:clamp(46px,6vw,72px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
.lx-scroll-cue-txt{
  font-size:.98rem; color:var(--mut); max-width:44ch; line-height:1.5;
}
.lx-scroll-cue-txt b{ color:var(--ink); font-weight:600 }
.lx-scroll-arrow{
  display:inline-flex; width:28px; height:36px;
  color:var(--gold-d);
  animation:lx-arrow-bob 1.85s var(--lx-ease) infinite;
}
.lx-scroll-arrow svg{ width:100%; height:100%; display:block }
.lx-scroll-arrow-stem{ opacity:.45 }
.lx-scroll-arrow-head{ opacity:.95 }
@keyframes lx-arrow-bob{
  0%,100%{ transform:translateY(0); opacity:.55 }
  50%{ transform:translateY(10px); opacity:1 }
}
@media (prefers-reduced-motion: reduce){
  .lx-scroll-arrow{ animation:none; opacity:.85 }
}

/* ─────────────────── 5 · FAIXA DE PROVA (formato: banda) ───────────────── */
/* Formato distinto: banda estreita, escura, coladinha no hero. Serve de
   "chão" para o vídeo e entrega os números antes de qualquer argumento. */

.lx-band{
  background:var(--night);
  padding:clamp(24px,3vw,36px) 0;
  position:relative;
  overflow-x:hidden;
}
.lx-band-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,28px);
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:none;
}
.lx-band-cell{ text-align:center; position:relative }
.lx-band-cell + .lx-band-cell::before{
  content:''; position:absolute; left:calc(-1 * clamp(7px,1vw,14px)); top:12%;
  width:1px; height:76%; background:var(--line-d);
}
.lx-band-n{
  display:block; font-family:var(--fd); font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1;
  color:var(--gold-bright); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.lx-band-n .u{ font-size:.5em; margin-left:2px; color:var(--sand-soft) }
.lx-band-l{
  display:block; margin-top:9px;
  font-size:.76rem; line-height:1.35; color:var(--mut-d);
  letter-spacing:.03em;
}
@media (max-width:640px){
  .lx-band-grid{ grid-template-columns:repeat(2,1fr); gap:26px 14px }
  .lx-band-cell:nth-child(3)::before{ display:none }
}

/* Autoridade do expert: retrato + dissertação, invertido em relação ao
   split da dobra seguinte (lá o texto vem primeiro; aqui a foto). Não é
   grid de 4 nem cards. Continua o mesmo --night da faixa.
   Mobile: título → foto → texto. Desktop: foto à esquerda, copy à direita. */
.lx-auth{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "head"
    "photo"
    "copy";
  gap:18px;
  align-items:start;
  text-align:center;
}
.lx-auth-head{ grid-area:head; min-width:0 }
.lx-auth-frame{ grid-area:photo }
.lx-auth-copy{ grid-area:copy; min-width:0; color:var(--sand-soft) }
.lx-auth-head{ grid-area:head; min-width:0 }
.lx-auth-frame{ grid-area:photo }
.lx-auth-copy{ grid-area:copy; min-width:0; color:var(--sand-soft) }
.lx-auth-frame{
  margin:0;
  position:relative;
  border-radius:var(--lx-r-lg);
  overflow:hidden;
  border:1px solid var(--line-d);
  background:var(--night-2);
  width:100%;
  height:340px;
  max-height:360px;
}
.lx-auth-frame::before{
  content:'';
  position:absolute; inset:0 auto 0 0; width:3px; z-index:2;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, transparent);
  pointer-events:none;
}
.lx-auth-photo{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 10%;
}
.lx-auth-head h2{
  margin:0;
  font-family:var(--fd); font-weight:800;
  font-size:clamp(1.48rem,2.55vw,2.28rem);
  line-height:1.12; letter-spacing:-.03em;
  color:var(--sand);
}
.lx-auth-lead{
  margin:0 0 12px;
  font-size:clamp(.95rem,1.15vw,1.04rem);
  line-height:1.48;
  color:var(--sand-soft);
}
.lx-auth-lead strong{
  color:var(--sand);
  font-weight:600;
}
.lx-auth-topics{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  border-top:1px solid var(--line-d);
}
.lx-auth-topics li{
  padding:14px 0;
  border-bottom:1px solid var(--line-d);
  display:flex; flex-direction:column; gap:5px;
}
.lx-auth-topics li.lx-auth-topic--desk{ display:none }
.lx-auth-topics strong{
  font-family:var(--fd); font-weight:600;
  font-size:.98rem; letter-spacing:-.02em;
  color:var(--sand);
}
.lx-auth-topics span{
  font-size:.92rem; line-height:1.5;
  color:var(--sand-soft);
}
@media (min-width:801px){
  .lx-auth{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    grid-template-areas:
      "photo head"
      "photo copy";
    gap:18px clamp(24px,3.6vw,48px);
    align-items:start;
    text-align:left;
  }
  .lx-auth-topics li.lx-auth-topic--desk{ display:flex }
  .lx-auth-frame{
    height:auto;
    max-height:560px;
    aspect-ratio:4/5;
    align-self:start;
  }
  .lx-auth-photo{ object-position:50% 12% }
  .lx-auth-lead,.lx-auth-topics{ max-width:48ch }
}
@media (prefers-reduced-motion: reduce){
  .lx-auth-frame,.lx-auth-photo{ transition:none }
}

#expert.lx-bg-ink{
  padding-top:clamp(52px,6vw,84px);
  padding-bottom:clamp(56px,6.5vw,92px);
}

/* ───────── 6 · A ESTRUTURA PRONTA (formato: escada / stair grid) ───────── */
/* Formato distinto: cards em degrau, cada um deslocado verticalmente do
   anterior. Rompe a grade regular sem virar bagunça. */

.lx-stair{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);
  align-items:start;
}
.lx-stair-card{
  background:var(--lx-paper);
  border:1px solid var(--lx-hair);
  border-radius:var(--lx-r-lg);
  padding:clamp(26px,3vw,36px);
  box-shadow:var(--lx-sh-1);
  transition:transform .5s var(--lx-ease-out), box-shadow .5s var(--lx-ease-out);
  position:relative; overflow:hidden;
}
/* O degrau. Cada card desce um pouco mais que o anterior. */
.lx-stair-card:nth-child(2){ margin-top:clamp(20px,3.4vw,46px) }
.lx-stair-card:nth-child(3){ margin-top:clamp(40px,6.8vw,92px) }
.lx-stair-card:hover{ transform:translateY(-6px); box-shadow:var(--lx-sh-2) }
.lx-stair-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--lx-ease-out);
}
.lx-stair-card.in::before{ transform:scaleX(1) }

.lx-stair-num{
  font-family:var(--fm); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; color:var(--gold-d); display:block; margin-bottom:16px;
}
.lx-stair-card h3{ font-size:clamp(1.16rem,1.7vw,1.38rem); margin-bottom:12px; line-height:1.2 }
.lx-stair-card p{ font-size:.97rem; color:var(--mut); line-height:1.62 }

.lx-stair-ic{
  width:46px; height:46px; border-radius:13px; margin-bottom:20px;
  display:grid; place-items:center;
  background:linear-gradient(145deg, rgba(255,195,15,.2), rgba(204,153,0,.08));
  border:1px solid var(--lx-hair-gold);
}
.lx-stair-ic svg{ width:21px; height:21px; fill:none; stroke:var(--gold-d); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }

@media (max-width:900px){
  .lx-stair{ grid-template-columns:1fr; gap:18px }
  .lx-stair-card:nth-child(2),.lx-stair-card:nth-child(3){ margin-top:0 }
}

/* ────────── 7 · INSTALAÇÃO (formato: sticky split + trilha) ────────────── */
/* Formato distinto: mídia fixa à esquerda, passos rolando à direita. O passo
   que entra no centro da tela assume o vídeo. É a seção mais "viva" da página. */

.lx-inst-grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,4.6vw,72px);
  align-items:start;
}

.lx-inst-sticky{ position:sticky; top:clamp(80px,12vh,120px) }

.lx-inst-screen{
  position:relative; border-radius:var(--lx-r-lg); overflow:hidden;
  background:var(--night-2);
  border:1px solid var(--lx-hair);
  box-shadow:var(--lx-sh-3);
  aspect-ratio:16/10;
}
.lx-inst-screen video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .45s var(--lx-ease);
}
.lx-inst-screen.is-swapping video{ opacity:.25 }

/* Barra de janela, para ler como "tela de software" e não como vídeo solto */
.lx-inst-bar{
  position:absolute; top:0; left:0; right:0; z-index:2;
  height:38px; display:flex; align-items:center; gap:7px;
  padding:0 14px;
  background:linear-gradient(180deg, rgba(10,12,20,.94), rgba(10,12,20,.6) 70%, transparent);
}
.lx-inst-dot{ width:9px; height:9px; border-radius:50%; background:rgba(217,200,183,.28) }
.lx-inst-bar-t{
  font-family:var(--fm); font-size:.68rem; color:var(--mut-d);
  margin-left:8px; letter-spacing:.04em;
}

/* Cronômetro sobre a tela */
.lx-inst-clock{
  position:absolute; right:14px; bottom:14px; z-index:2;
  font-family:var(--fm); font-size:.82rem; font-weight:700;
  color:var(--gold-bright); letter-spacing:.06em;
  padding:6px 12px; border-radius:8px;
  background:rgba(10,12,20,.78); border:1px solid var(--line-d);
  font-variant-numeric:tabular-nums;
}

/* Passos */
.lx-steps{ position:relative; padding-left:clamp(30px,3.4vw,44px) }
/* Trilho + progresso preenchido por JS via --lx-prog (0 a 1) */
.lx-steps::before{
  content:''; position:absolute; left:9px; top:8px; bottom:8px;
  width:2px; background:var(--lx-hair); border-radius:2px;
}
.lx-steps::after{
  content:''; position:absolute; left:9px; top:8px;
  width:2px; border-radius:2px;
  height:calc(var(--lx-prog,0) * (100% - 16px));
  background:linear-gradient(180deg, var(--gold), var(--gold-bright));
  transition:height .25s linear;
}

.lx-step{
  position:relative; padding:clamp(20px,2.4vw,28px) 0;
  border-bottom:1px solid var(--lx-hair-2);
  cursor:pointer;
  opacity:.44; transition:opacity .5s var(--lx-ease);
}
.lx-step:last-child{ border-bottom:0 }
.lx-step.is-on{ opacity:1 }
.lx-step::before{
  content:''; position:absolute;
  left:calc(-1 * clamp(30px,3.4vw,44px) + 4px); top:calc(clamp(20px,2.4vw,28px) + 7px);
  width:12px; height:12px; border-radius:50%;
  background:var(--lx-cream); border:2px solid var(--lx-hair);
  transition:border-color .4s var(--lx-ease), background .4s var(--lx-ease), transform .4s var(--lx-ease-out);
}
.lx-step.is-on::before{
  background:var(--gold); border-color:var(--gold);
  transform:scale(1.22);
  box-shadow:0 0 0 5px rgba(204,153,0,.15);
}
.lx-step-t{
  display:flex; align-items:baseline; gap:12px; margin-bottom:8px; flex-wrap:wrap;
}
.lx-step-time{
  font-family:var(--fm); font-size:.76rem; font-weight:700;
  color:var(--gold-d); letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.lx-step h3{ font-size:clamp(1.08rem,1.6vw,1.28rem); line-height:1.24 }
.lx-step p{ font-size:.95rem; color:var(--mut); line-height:1.6 }

@media (max-width:960px){
  .lx-inst-grid{ grid-template-columns:1fr; gap:34px }
  .lx-inst-sticky{ position:sticky; top:64px; z-index:3 }
  .lx-inst-screen{ aspect-ratio:16/9 }
}

/* ──────────── 8 · BENTO (formato: grade irregular de telas) ────────────── */
/* Formato distinto: blocos de tamanhos diferentes, cada um com um loop de
   vídeo real da plataforma. É o "prova visual" da página. */

.lx-bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.7vw,22px);
}
.lx-bento-cell{
  position:relative; overflow:hidden;
  border-radius:var(--lx-r);
  background:var(--lx-paper);
  border:1px solid var(--lx-hair);
  box-shadow:var(--lx-sh-1);
  display:flex; flex-direction:column;
  transition:transform .55s var(--lx-ease-out), box-shadow .55s var(--lx-ease-out);
}
.lx-bento-cell:hover{ transform:translateY(-5px); box-shadow:var(--lx-sh-2) }

.lx-bento-cell--lg{ grid-column:span 4 }
.lx-bento-cell--sm{ grid-column:span 2 }
.lx-bento-cell--md{ grid-column:span 3 }

.lx-bento-media{
  position:relative; overflow:hidden;
  aspect-ratio:16/10;
  /* Fundo de espera. Os blocos de <video> carregam o MP4 da própria origem e
     cobrem isto em milissegundos. Os blocos de iframe do Vimeo demoram mais e,
     no WebView do Instagram, podem nem carregar (bloqueio de cookies de
     terceiros). Sem este fundo, o bloco lê como buraco preto quebrado.
     PENDÊNCIA DE ASSET: exportar MP4 dos painéis e da Íris resolve de vez,
     igual já foi feito com n8n/mysql/aulas. */
  background:
    linear-gradient(115deg, transparent 35%, rgba(217,200,183,.07) 50%, transparent 65%),
    linear-gradient(160deg, var(--panel-d) 0%, var(--night-2) 100%);
  background-size:220% 100%, 100% 100%;
  animation:lx-shim 2.6s linear infinite;
}
@keyframes lx-shim{ 0%{ background-position:120% 0, 0 0 } 100%{ background-position:-120% 0, 0 0 } }
@media (prefers-reduced-motion: reduce){ .lx-bento-media{ animation:none } }
.lx-bento-cell--sm .lx-bento-media{ aspect-ratio:4/3 }
.lx-bento-media video,.lx-bento-media iframe,.lx-bento-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border:0; display:block;
}
.lx-bento-body{ padding:clamp(18px,2vw,24px) }
.lx-bento-tag{
  display:inline-block; margin-bottom:9px;
  font-family:var(--fm); font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-d);
}
.lx-bento-body h3{ font-size:clamp(1.02rem,1.4vw,1.18rem); margin-bottom:8px; line-height:1.25 }
.lx-bento-body p{ font-size:.92rem; color:var(--mut); line-height:1.58 }

@media (max-width:900px){
  .lx-bento{ grid-template-columns:repeat(2,1fr) }
  .lx-bento-cell--lg,.lx-bento-cell--md,.lx-bento-cell--sm{ grid-column:span 2 }
}

/* ───────── 9 · LOOP DE CARTEIRA (formato: 3 tempos decrescentes) ───────── */
/* Formato distinto: três colunas em que a barra encolhe, mostrando o tempo
   caindo a cada cliente novo. O argumento é visual antes de ser textual. */

.lx-loop{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px) }
.lx-loop-card{
  background:var(--lx-paper); border:1px solid var(--lx-hair);
  border-radius:var(--lx-r-lg); padding:clamp(24px,2.8vw,34px);
  box-shadow:var(--lx-sh-1); position:relative;
}
.lx-loop-card--last{
  background:linear-gradient(165deg, #FFFDF6, var(--lx-paper));
  border-color:var(--lx-hair-gold);
  box-shadow:var(--lx-sh-2), inset 0 1px 0 rgba(255,255,255,.9);
}
.lx-loop-lab{
  font-family:var(--fm); font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut); margin-bottom:14px; display:block;
}
.lx-loop-n{
  font-family:var(--fd); font-weight:600; letter-spacing:-.035em;
  font-size:clamp(2rem,3.6vw,2.9rem); line-height:1; color:var(--ink);
  display:block; margin-bottom:6px;
}
.lx-loop-card--last .lx-loop-n{ color:var(--gold-d) }
.lx-loop-sub{ font-size:.93rem; color:var(--mut); line-height:1.55 }
/* Barra proporcional ao tempo. --lx-w vem inline no HTML. */
.lx-loop-bar{
  height:6px; border-radius:100px; margin:18px 0 14px;
  background:var(--lx-hair-2); overflow:hidden;
}
.lx-loop-bar i{
  display:block; height:100%; border-radius:100px;
  width:0; background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition:width 1.1s var(--lx-ease-out) .2s;
}
.lx-loop-card.in .lx-loop-bar i{ width:var(--lx-w,50%) }

@media (max-width:820px){ .lx-loop{ grid-template-columns:1fr } }

/* ────────── 10 · SEQUÊNCIA (formato: lista de duas colunas) ────────────── */

.lx-seq{ border-top:1px solid var(--lx-hair) }
.lx-seq-row{
  display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);
  gap:clamp(12px,2vw,26px); align-items:center;
  padding:clamp(18px,2.1vw,24px) 0;
  border-bottom:1px solid var(--lx-hair);
  transition:background .4s var(--lx-ease);
}
.lx-seq-row:hover{ background:rgba(255,255,255,.6) }
.lx-seq-a{ display:flex; align-items:baseline; gap:12px }
.lx-seq-idx{
  font-family:var(--fm); font-size:.72rem; font-weight:700;
  color:var(--gold-d); letter-spacing:.08em; flex:none;
}
.lx-seq-a b{ font-family:var(--fd); font-weight:600; font-size:1.02rem; color:var(--ink); line-height:1.3 }
.lx-seq-arrow{ color:var(--gold); text-align:center; font-size:1.05rem }
.lx-seq-b{
  display:flex; align-items:center; gap:10px;
  font-size:.94rem; color:var(--mut); line-height:1.5;
}
.lx-seq-b .ck{
  flex:none; width:19px; height:19px; border-radius:50%;
  background:rgba(62,154,26,.13); color:var(--green);
  display:grid; place-items:center; font-size:.66rem; font-weight:700;
}
@media (max-width:760px){
  .lx-seq-row{ grid-template-columns:1fr; gap:8px }
  .lx-seq-arrow{ display:none }
  .lx-seq-b{ padding-left:30px }
}

/* ──────────── 11 · CITAÇÃO / RESPIRO (formato: bloco solto) ────────────── */
/* Bloco curto, sem card, tipografia grande em serifa. Serve de pausa entre
   duas seções densas. */

/* O respiro vem da seção ser curta e vazia, não de padding extra: usa a mesma
   base das outras para não quebrar o ritmo. */
.lx-breath{ text-align:center; padding:var(--lx-sect) 0 }
.lx-breath p{
  font-family:var(--fs); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.28;
  color:var(--ink); max-width:22ch; margin:0 auto; letter-spacing:-.01em;
}
.lx-breath .lx-breath-src{
  font-family:var(--fb); font-style:normal; font-size:.86rem;
  color:var(--mut); margin-top:22px; letter-spacing:.04em; max-width:none;
}

/* ───────────────── 12 · CAMINHOS (formato: comparativo) ────────────────── */

.lx-paths{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px) }
.lx-path{
  border-radius:var(--lx-r-lg); padding:clamp(24px,2.8vw,34px);
  border:1px solid var(--lx-hair); background:var(--lx-paper);
  box-shadow:var(--lx-sh-1); position:relative;
}
.lx-path--no{ background:linear-gradient(180deg, #FBF7F5, var(--lx-paper)) }
.lx-path--yes{
  background:linear-gradient(165deg, #FFFCF2, var(--lx-paper));
  border-color:var(--lx-hair-gold); box-shadow:var(--lx-sh-2);
}
.lx-path-mark{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  font-size:1rem; font-weight:700; margin-bottom:16px;
}
.lx-path--no .lx-path-mark{ background:rgba(194,68,18,.1); color:var(--copper) }
.lx-path--yes .lx-path-mark{ background:rgba(204,153,0,.14); color:var(--gold-d) }
.lx-path h3{ font-size:clamp(1.06rem,1.5vw,1.22rem); margin-bottom:10px; line-height:1.25 }
.lx-path p{ font-size:.94rem; color:var(--mut); line-height:1.6 }
.lx-path-cost{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--lx-hair-2);
  font-family:var(--fm); font-size:.76rem; letter-spacing:.04em;
}
.lx-path--no .lx-path-cost{ color:var(--copper) }
.lx-path--yes .lx-path-cost{ color:var(--green) }
@media (max-width:880px){ .lx-paths{ grid-template-columns:1fr } }

/* ───────────────────────── 13 · CTA intermediário ──────────────────────── */

.lx-cta{ text-align:center; margin-top:var(--lx-gap-block) }

/* Utilitários de espaçamento. Existem para que nenhuma margem vertical precise
   ser escrita como style inline no HTML, que é onde os valores soltos nascem. */
.lx-after-block{ margin-top:var(--lx-gap-block); margin-inline:auto }
.lx-after-note{ margin-top:var(--lx-gap-note); margin-inline:auto }
.lx-cta-micro{
  margin-top:14px; font-size:.84rem; color:var(--mut); letter-spacing:.02em;
}
.lx-bg-ink .lx-cta-micro{ color:var(--mut-d) }

/* ───────────── 14 · Ajustes nos componentes herdados (claro) ───────────── */

/* A ilha de oferta ganha fundo claro: na PV5 ela era escura. */
#oferta.lx-offer{ background:linear-gradient(180deg, var(--lx-sand) 0%, var(--lx-cream) 55%) }

/* 1ª oferta (bn-island): card off-white — pv5-banana deixa .bn-island escura por padrão */
#oferta .bn-island{
  background:var(--lx-paper, #FFFFFF);
  border:1px solid var(--lx-hair);
  box-shadow:var(--lx-sh-2);
  color:var(--ink);
}
#oferta .bn-island h2,
#oferta .bn-island h3,
#oferta .bn-island strong{ color:var(--ink) }
#oferta .bn-island .em-gold{
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
  color:var(--gold-d);
  -webkit-text-fill-color:var(--gold-d);
}
#oferta .bn-island-head .lx-mark{
  margin-left:auto;
  margin-right:auto;
}
#oferta .bn-island-head h2{ margin-top:clamp(14px,2vw,18px) }
#oferta .bn-island-head .dek{ color:var(--ink-soft) }
#oferta .bn-incl-head{ color:var(--mut) }
#oferta .bn-incl li{ color:var(--ink-soft) }
#oferta .bn-incl li::before{ color:var(--gold-d) }
#oferta .bn-div{
  background:linear-gradient(90deg, transparent, var(--lx-hair), transparent);
}
#oferta .bn-price-was{ color:var(--mut) }
#oferta .bn-price-inst{ color:var(--ink-soft) }
#oferta .bn-price-now{ color:var(--gold-d) }
#oferta .bn-price-cash{ color:var(--ink) }
#oferta .bn-price-micro{ color:var(--mut) }
#oferta .bn-glow{
  background:radial-gradient(circle at 50% 40%, rgba(255,195,15,.07), transparent 62%);
  opacity:.85;
}

/* Justificativa pós-preço: a ilha é alta no mobile; lx-rise (opacity:0) + IO
   com threshold > 0 às vezes nunca dispara — bloco some. Fundo sólido +
   garantia de opacidade evitam o “buraco” entre garantia e especialista. */
#oferta-justificativa{
  background:var(--lx-cream, var(--bg));
}
#oferta-justificativa .bn-island.lx-rise{
  opacity:1;
  transform:none;
}

/* Fechamento (#oferta-final): card claro sobre fundo escuro.
   .dark → v4-soft-premium força strong/em-gold claros; reset no card. */
#oferta-final .offer-checkout{
  background:var(--lx-paper, #FFFFFF);
  border-color:var(--lx-hair);
}
#oferta-final .offer-checkout-actions{
  padding-bottom:clamp(16px,2.2vw,20px);
}
#oferta-final .offer-checkout .offer-checkout-nudge{
  margin:0 clamp(18px,3.6vw,28px) clamp(22px,3vw,28px);
  padding:clamp(18px,2.4vw,22px) clamp(18px,2.2vw,22px);
  text-align:left;
  background:var(--lx-cream-2, #FCFAF7);
  border:1px solid rgba(19,32,46,.14);
  border-left:3px solid var(--gold-d);
  border-radius:14px;
  color:var(--ink);
}
#oferta-final .offer-checkout .offer-checkout-nudge p{
  margin:0;
  font-size:clamp(.88rem,1.35vw,.94rem);
  line-height:1.58;
  color:var(--ink-soft);
}
#oferta-final .offer-checkout .offer-checkout-nudge p + p{
  margin-top:12px;
}
#oferta-final .offer-checkout .offer-checkout-nudge-lead,
#oferta-final .offer-checkout .offer-checkout-nudge strong{
  display:inline;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  font-weight:800;
  font-size:1.02em;
}
#oferta-final .offer-checkout .offer-checkout-nudge-urgency{
  color:var(--ink-soft);
  font-weight:500;
}
#oferta-final .offer-checkout .offer-checkout-nudge .em-gold{
  background:none !important;
  -webkit-background-clip:unset !important;
  background-clip:unset !important;
  color:var(--gold-d) !important;
  -webkit-text-fill-color:var(--gold-d) !important;
  font-weight:700;
}

/* Trilho de depoimentos: mantém o bloco escuro como pontuação de contraste */
.lx-stories{ background:var(--night) }

/* ── Prova social: carrossel infinito + textura de papel ── */
#prova-alunos.lx-proof{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:clamp(52px,6vw,84px);
  padding-bottom:clamp(56px,6.5vw,92px);
}
/* Fundo branco + detalhes: auroras brand, grade de pontos, anéis suaves */
.lx-proof--light{
  --lx-proof-fade:#F6F5F9;
  background-color:#F6F5F9;
  color:var(--ink);
}
.lx-proof--light > .lx-wrap,
.lx-proof--light > .lx-proof-rail{
  position:relative;
  z-index:1;
}
.lx-proof-texture{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background-image:
    radial-gradient(ellipse 58% 48% at 8% 12%, rgba(255,195,15,.11), transparent 68%),
    radial-gradient(ellipse 52% 42% at 92% 88%, rgba(23,150,212,.08), transparent 68%),
    radial-gradient(ellipse 42% 36% at 78% 8%, rgba(255,195,15,.06), transparent 70%),
    radial-gradient(rgba(18,30,43,.055) .85px, transparent .9px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size:auto, auto, auto, 20px 18px, 240px 240px;
}
.lx-proof-texture::before,
.lx-proof-texture::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.lx-proof-texture::before{
  width:min(640px, 78vw);
  height:min(640px, 78vw);
  left:50%;
  top:58%;
  transform:translate(-50%, -50%);
  border:1px solid rgba(204,153,0,.14);
  box-shadow:
    0 0 0 48px rgba(255,195,15,.03),
    0 0 80px rgba(255,195,15,.05);
  opacity:.55;
}
.lx-proof-texture::after{
  width:min(420px, 52vw);
  height:min(420px, 52vw);
  right:-6%;
  top:6%;
  border:1px solid rgba(23,150,212,.13);
  box-shadow:0 0 60px rgba(23,150,212,.05);
  opacity:.42;
}
@media (prefers-reduced-motion: no-preference){
  .lx-proof-texture::before{
    animation:lxProofRing 28s ease-in-out infinite alternate;
  }
  .lx-proof-texture::after{
    animation:lxProofRingSide 34s ease-in-out infinite alternate;
  }
}
@keyframes lxProofRing{
  from{ transform:translate(-50%, -50%) scale(1); opacity:.45 }
  to{ transform:translate(-50%, -52%) scale(1.035); opacity:.62 }
}
@keyframes lxProofRingSide{
  from{ transform:translate(0, 0) scale(1); opacity:.32 }
  to{ transform:translate(-2%, 3%) scale(1.05); opacity:.5 }
}
/* Trilho: mobile = pilha; desktop = carrossel (em min-width:901px) */
.lx-proof-rail{
  position:relative;
  width:100%;
  overflow:visible;
  padding:4px clamp(16px,4vw,28px) 8px;
  cursor:default;
  touch-action:auto;
  user-select:auto;
  -webkit-user-select:auto;
  -webkit-mask-image:none;
  mask-image:none;
}
.lx-proof-track{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:400px;
  margin-inline:auto;
  padding-inline:0;
  will-change:auto;
}
.lx-proof-shot{
  margin:0;
  flex:0 0 auto;
  width:100%;
  max-width:min(100%, 380px);
  height:auto;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(18,30,43,.1);
  background:#fff;
  box-shadow:var(--lx-sh-2);
  cursor:zoom-in;
  transition:box-shadow .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.lx-proof-shot:focus-visible{
  outline:2px solid rgba(166,124,0,.7);
  outline-offset:3px;
}
@media (hover:hover){
  .lx-proof-shot:hover{
    box-shadow:var(--lx-sh-3);
    transform:translateY(-2px);
  }
}
.lx-proof-shot img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
}
.lx-proof-shot.is-tall,
.lx-proof-shot.is-wide,
.lx-proof-shot.is-feature{
  width:100%;
  max-width:min(100%, 380px);
}

/* Mobile: carrossel horizontal animado + peek da próxima imagem */
@media (max-width:900px){
  .lx-proof-rail{
    overflow:hidden;
    padding:4px 0 14px;
    cursor:grab;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.25) 3%,
      #000 10%,
      #000 90%,
      rgba(0,0,0,.25) 97%,
      transparent 100%
    );
    mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.25) 3%,
      #000 10%,
      #000 90%,
      rgba(0,0,0,.25) 97%,
      transparent 100%
    );
  }
  .lx-proof-rail.is-dragging{
    cursor:grabbing;
  }
  .lx-proof-rail.is-dragging .lx-proof-shot{
    cursor:grabbing;
  }
  .lx-proof-track{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    width:max-content;
    max-width:none;
    margin-inline:0;
    padding-inline:clamp(16px,4vw,24px);
    will-change:transform;
  }
  .lx-proof-shot,
  .lx-proof-shot.is-tall,
  .lx-proof-shot.is-wide,
  .lx-proof-shot.is-feature{
    flex:0 0 auto;
    width:min(72vw, 278px);
    max-width:none;
    opacity:1;
    transform:none;
    transition:box-shadow .35s cubic-bezier(.16,1,.3,1);
  }
}
@media (max-width:900px) and (prefers-reduced-motion: reduce){
  .lx-proof-shot{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media (min-width:901px){
  .lx-proof-rail{
    overflow:hidden;
    padding:10px 0 8px;
    cursor:grab;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.3) 2.5%,
      #000 8%,
      #000 92%,
      rgba(0,0,0,.35) 97.5%,
      transparent 100%
    );
    mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.3) 2.5%,
      #000 8%,
      #000 92%,
      rgba(0,0,0,.35) 97.5%,
      transparent 100%
    );
  }
  .lx-proof-rail.is-dragging{
    cursor:grabbing;
  }
  .lx-proof-rail.is-dragging .lx-proof-shot{
    cursor:grabbing;
  }
  .lx-proof-track{
    flex-direction:row;
    align-items:center;
    gap:16px;
    width:max-content;
    max-width:none;
    margin-inline:0;
    padding-inline:clamp(20px,4vw,48px);
    transform:translate3d(0,0,0);
    will-change:transform;
  }
  .lx-proof-shot{
    width:auto;
    max-width:none;
  }
  .lx-proof-shot.is-tall{ width:300px; max-width:none }
  .lx-proof-shot.is-wide{ width:460px; max-width:none }
  .lx-proof-shot.is-feature{ width:320px; max-width:none }
}

/* Lightbox */
.lx-proof-lb{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,40px);
  background:rgba(10,12,20,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.lx-proof-lb[hidden]{ display:none !important }
.lx-proof-lb-img{
  max-width:min(960px, 94vw);
  max-height:min(90vh, 920px);
  width:auto;
  height:auto;
  border-radius:12px;
  box-shadow:0 24px 64px rgba(0,0,0,.45);
  background:#fff;
}
.lx-proof-lb-close{
  position:absolute;
  top:clamp(12px,3vw,28px);
  right:clamp(12px,3vw,28px);
  border:0;
  border-radius:999px;
  padding:10px 16px;
  font-family:var(--fm);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.14);
  cursor:pointer;
}
.lx-proof-lb-close:hover{ background:rgba(255,255,255,.22) }
html.lx-proof-lb-open{ overflow:hidden }

@media (prefers-reduced-motion: reduce){
  .lx-proof-shot{ transition:none }
}

/* Marquee de clientes no claro */
.lx-mq-light .bn-mq-item{
  background:var(--lx-paper); border:1px solid var(--lx-hair);
  box-shadow:var(--lx-sh-1);
}
.lx-mq-light .bn-mq-name{ color:var(--ink) }
.lx-mq-light .bn-mq-niche{ color:var(--mut) }

/* Divisor de arco: transição suave entre uma seção clara e a banda escura */
.lx-arc{ position:relative; height:clamp(40px,5vw,72px); overflow:hidden }
.lx-arc svg{ position:absolute; bottom:-1px; left:0; width:100%; height:100% }

/* ──────────────────────────── 15 · Rodapé ──────────────────────────────── */

.lx-foot{
  background:var(--night); color:var(--mut-d);
  padding:clamp(46px,5vw,66px) 0 clamp(30px,3.4vw,42px);
  text-align:center; font-size:.85rem; line-height:1.7;
}
.lx-foot a{ color:var(--sand-soft); text-decoration:underline; text-underline-offset:3px }
.lx-foot a:hover{ color:var(--gold-bright) }
.lx-foot-links{ margin-bottom:18px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap }
.lx-foot-dis{
  max-width:70ch; margin:20px auto 0; font-size:.76rem;
  color:rgba(142,146,173,.8); line-height:1.65;
}

/* ── Peso tipográfico · paridade VTSD ─────────────────────────────────────
   VTSD: hero bold 700 · seções extrabold 800 · subtítulo semibold 600.
   PV7 base (v4-soft-premium) usa 600 em h1–h4; estes overrides só na lux. */
.lx-head h2,
.lx-split-copy h2,
.lx-sect > .lx-wrap > h2,
.sec-head h2,
.lx-stories h2,
.lx-breath h2,
.feat-head h2,
.capa-head h2,
.feat8-head h2,
.auth-marquee-head h2,
#oferta .sec-head h2,
.bn-mid h2{
  font-weight:800;
}

/* Destaques que ainda apontam Instrument Serif no pv4-base (VTSD → Montserrat) */
.pos-pull,.capa-sub,.cmp-ey,.pil-text .pil-pull,.vz-serif,.mkt-list .is-quote p{
  font-family:var(--fs);
  font-style:normal;
}

/* ── VSL sticky dock (padrão VTSD): rodapé direito ao sair da hero ───────── */
.vsx-frame.is-dock-hold{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#06060A;
  border-radius:inherit;
}

.vsx-dock-close{
  display:none;
  position:absolute;
  top:8px;
  right:8px;
  z-index:12;
  width:28px;
  height:28px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,20,.72);
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.vsx-dock-close:hover{ background:rgba(10,12,20,.9) }
.vsx-dock-close svg{ display:block }

/* Fora da hero (reparent no body): mantém o chrome do player */
.vsx-screen.is-docked{
  position:fixed !important;
  right:max(12px, env(safe-area-inset-right, 0px));
  bottom:max(12px, env(safe-area-inset-bottom, 0px));
  left:auto;
  top:auto;
  z-index:92;
  width:min(360px, calc(100vw - 24px));
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:#06060A;
  box-shadow:
    0 18px 48px rgba(10,12,20,.42),
    0 0 0 1px rgba(255,255,255,.08);
  animation:vsxDockIn .38s cubic-bezier(.22,1,.36,1) both;
}
.vsx-screen.is-docked .vsx-dock-close{ display:inline-flex }
.vsx-screen.is-docked .vsx-unmute{
  position:absolute; left:50%; top:8px;
  translate:-50% 0; z-index:8;
  display:none; align-items:center; justify-content:center; gap:6px;
  width:max-content; max-width:calc(100% - 24px);
  margin:0; padding:7px 10px;
  border:1px solid rgba(26,18,0,.35);
  border-radius:3px;
  background:rgba(255,195,15,.92);
  color:#1a1200;
  font-family:var(--fm, ui-sans-serif, system-ui, sans-serif);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.15;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  animation:none;
}
.vsx-screen.is-docked.is-muted .vsx-unmute{ display:inline-flex }
.vsx-screen.is-docked .vsx-unmute-txt{ white-space:nowrap }
.vsx-screen.is-docked .vsx-chrome{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  height:5px; display:block;
}
.vsx-screen.is-docked .vsx-center{ display:none !important }
.vsx-screen.is-docked .vsx-hit{
  position:absolute; inset:0; z-index:5;
  display:block; border:0; padding:0; margin:0;
  background:transparent; cursor:pointer;
}
.vsx-screen.is-docked video.vsx-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

@keyframes vsxDockIn{
  from{ opacity:0; transform:translate3d(18px, 22px, 0) scale(.92) }
  to{ opacity:1; transform:translate3d(0, 0, 0) scale(1) }
}

@media (prefers-reduced-motion: reduce){
  .vsx-screen.is-docked{ animation:none }
}

/* Dock sticky + resume: apenas desktop (≥901px) */
@media (max-width:900px){
  .vsx-screen.is-docked,
  .vsx-resume,
  .vsx-dock-close{
    display:none !important;
  }
  .vsx-frame.is-dock-hold{
    aspect-ratio:auto;
    background:transparent;
  }
}

/* Modal retomar progresso — canto inferior direito (referência VTSD) */
.vsx-resume{
  position:fixed;
  right:max(16px, env(safe-area-inset-right, 0px));
  bottom:max(16px, env(safe-area-inset-bottom, 0px));
  z-index:93;
  width:min(320px, calc(100vw - 32px));
  padding:22px 22px 18px;
  border-radius:18px;
  background:#36C4A7;
  color:#fff;
  box-shadow:0 16px 40px rgba(10,12,20,.28);
  font-family:var(--fm, ui-sans-serif, system-ui, sans-serif);
}
.vsx-resume[hidden]{ display:none !important }
.vsx-resume-x{
  position:absolute;
  top:12px;
  right:12px;
  width:28px;
  height:28px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:#fff;
  cursor:pointer;
  opacity:.85;
}
.vsx-resume-x:hover{ opacity:1; background:rgba(0,0,0,.12) }
.vsx-resume-title{
  margin:0 28px 16px 0;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  color:#fff;
}
.vsx-resume-opt{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0 0 8px;
  padding:10px 8px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#fff;
  font:inherit;
  font-size:.98rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.vsx-resume-opt:last-child{ margin-bottom:0 }
.vsx-resume-opt:hover{ background:rgba(0,0,0,.1) }
.vsx-resume-ic{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.22);
  color:#fff;
}
.vsx-resume-ic svg{ display:block }