/* Base herdada da PV2 (bloco <style> inline do head da PV2).
   Extraido sem alteracao para a PV4 continuar usando, sem reescrever:
   player VSX, cards de story, marquee de clientes, regua, pipeline,
   Venn de mercado, selos de garantia, stack de ancoragem, checkout, FAQ e footer.
   O layout novo (formato banana) vive em pv4-banana.css, carregado depois. */

/* ═══ HERO v4 — overrides e estilos exclusivos ═══ */
html{
  background:#06060A;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* reforço iOS/Instagram: evita scroll/recorte horizontal por elementos full-bleed */
  overflow-x:clip
}
html::-webkit-scrollbar{display:none}
body{scrollbar-width:none;-ms-overflow-style:none}
body::-webkit-scrollbar{display:none}
#autoridade{background:#06060A}
#autoridade{position:relative}
#ancoragem::before{display:none}

/* Neutraliza padding do soft-premium (.hero{padding:clamp(124px...)}) e define variáveis do tema escuro */
.hero{
  --line:rgba(241,228,212,.12);
  --line-2:rgba(241,228,212,.07);
  position:relative;min-height:100vh;min-height:100dvh;width:100%;overflow:hidden;
  display:flex;align-items:center;background:#06060A !important;padding:0
}
/* Reforço sutil no bg, atrás da foto */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:rgba(6,6,10,.15)}
/* ::after do .art: apenas reforço sutil no topo — base e esquerda tratadas pelo mask da imagem */
.art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background: linear-gradient(to bottom, rgba(6,6,10,.45) 0%, transparent 14%)
}

/* Nav: cores para fundo escuro (antes do scroll) */
.hero .nav .brand-name,.hero .nav .brand-sub{
  transition:color .4s
}
.hero .nav:not(.scrolled) .brand-name{color:var(--white)}
.hero .nav:not(.scrolled) .brand-sub{color:rgba(140,147,166,.9)}

/* ── Nav: fundo aparece já na primeira rolada (independente da hero) ── */
.nav.bg{
  background:rgba(6,6,10,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(241,228,212,.08);
  transition:background .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease,padding .5s cubic-bezier(.2,.7,.2,1)
}
.nav.bg .brand-name{color:var(--white)}
.nav.bg .brand-sub{color:rgba(140,147,166,.85)}

/* ── Nav: links de seção + CTA só surgem ao passar da hero ── */

/* Preço some já na hero: só a marca fica visível até sairmos da seção */
.nav-price{display:none}

/* Links de navegação por seção — surgem em cascata, um a um, só após sair da hero */
.nav-links{display:flex;align-items:center;gap:26px;margin-right:6px}
.nav-links a{
  font-family:var(--fb);font-size:.84rem;font-weight:500;color:rgba(205,212,224,.66);
  text-decoration:none;white-space:nowrap;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),color .3s ease
}
.nav-links a:hover{color:var(--white)}
.nav.scrolled .nav-links a{opacity:1;transform:none;pointer-events:auto}
/* cascata: cada link aparece levemente depois do anterior */
.nav.scrolled .nav-links a:nth-child(1){transition-delay:.05s}
.nav.scrolled .nav-links a:nth-child(2){transition-delay:.12s}
.nav.scrolled .nav-links a:nth-child(3){transition-delay:.19s}
.nav.scrolled .nav-links a:nth-child(4){transition-delay:.26s}
.nav.scrolled .nav-links a:nth-child(5){transition-delay:.33s}
.nav.scrolled .nav-links a:nth-child(6){transition-delay:.40s}
@media(max-width:980px){.nav-links{display:none}}

/* CTA "Quero acesso": some na hero, surge suave após os links e então cresce e pulsa */
.nav-right{
  opacity:0;transform:translateY(-6px) scale(.96);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1) .4s,transform .5s cubic-bezier(.2,.7,.2,1) .4s
}
.nav.scrolled .nav-right{opacity:1;transform:none;pointer-events:auto}
.nav .btn-primary{
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s cubic-bezier(.2,.7,.2,1),
             padding .55s cubic-bezier(.2,.7,.2,1),font-size .55s cubic-bezier(.2,.7,.2,1)
}
.nav.scrolled .btn-primary{
  transform:scale(1.07);
  transition-delay:.7s
}
@media(prefers-reduced-motion:no-preference){
  .nav.scrolled .btn-primary{animation:navCtaPulse 2.6s ease-in-out 1.2s infinite}
}
@keyframes navCtaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,195,15,.34)}
  50%{box-shadow:0 0 0 9px rgba(255,195,15,0)}
}
@media(prefers-reduced-motion:reduce){
  .nav-links a,.nav-right,.nav .btn-primary{transition:none;animation:none;opacity:1;transform:none;pointer-events:auto}
}

/* Heading e destaque */
.hero h1{color:var(--white);font-size:clamp(2rem, 4.1vw, 3.15rem)}
.hero h1 .em{background:linear-gradient(100deg,var(--gold-bright),#FC7148);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Eyebrow no contexto escuro do hero */
.hero .ey{color:var(--gold-soft);background:rgba(255,195,15,.08);border:1px solid rgba(255,195,15,.2)}

/* Layout */
.hero > .wrap{position:relative;z-index:3}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:20px;padding:118px 0 70px;min-height:100vh;min-height:100dvh}
.copy{position:relative;z-index:4;max-width:600px}
.lead{font-size:clamp(1.25rem,2.2vw,1.7rem);margin-top:22px;line-height:1.3;
  background:linear-gradient(100deg,#4FA8FF 0%,#82CDFF 60%,#4FA8FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.6;color:var(--sand-soft);margin-top:16px;max-width:520px}
.sub b{color:var(--sand);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* CTAs da hero — presença sobre o fundo escuro sem exagerar no brilho */
.hero .cta .btn-primary{
  background:linear-gradient(135deg,#E0B22E,var(--gold) 60%,#C97E00);
  color:#0A0C14;
  box-shadow:0 8px 18px rgba(204,153,0,.22)
}
.hero .cta .btn-primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 24px rgba(204,153,0,.3)
}
.cta-band .btn-primary{
  background:linear-gradient(135deg,#FFD23F,var(--gold-bright) 60%,#FFA600);
  color:#0A0C14;
  box-shadow:0 14px 38px rgba(255,195,15,.38),0 0 0 1px rgba(255,195,15,.4) inset
}
.cta-band .btn-primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 20px 50px rgba(255,195,15,.5),0 0 0 1px rgba(255,195,15,.55) inset
}
.hero .cta .btn-ghost{
  background:rgba(241,228,212,.06);
  border-color:rgba(241,228,212,.32);
  color:var(--white);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.hero .cta .btn-ghost:hover{
  background:rgba(241,228,212,.11);
  border-color:rgba(255,195,15,.6);
  color:var(--gold-bright)
}
.proof{display:flex;gap:38px;margin-top:46px;flex-wrap:wrap}
.pf{display:flex;flex-direction:column}
.proof .pf .n{font-family:var(--fd);font-weight:700;font-size:2.35rem;color:var(--white);line-height:.92;letter-spacing:-.035em}
.proof .pf .n .u{font-size:.42em;color:var(--gold-bright);font-weight:600;margin-left:2px;letter-spacing:0;vertical-align:.14em}
.pf .l{font-family:var(--fm);font-size:.64rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--mut-d);margin-top:12px;max-width:130px;line-height:1.5}
.pf+.pf{padding-left:38px;border-left:1px solid var(--line-2)}

/* Arte / imagem */
.art{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.art-img{position:absolute;right:0;bottom:0;height:100%;width:auto;max-width:none;object-fit:contain;
  /* intersect: esquerda E base somem para o bg sem overlay de cor — imagem emerge naturalmente */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.04) 7%, rgba(0,0,0,.18) 16%, rgba(0,0,0,.48) 26%, rgba(0,0,0,.82) 38%, #000 52%),
    linear-gradient(to top,   transparent 0%, rgba(0,0,0,.35) 7%, #000 20%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.04) 7%, rgba(0,0,0,.18) 16%, rgba(0,0,0,.48) 26%, rgba(0,0,0,.82) 38%, #000 52%),
    linear-gradient(to top,   transparent 0%, rgba(0,0,0,.35) 7%, #000 20%);
  mask-composite: intersect}
.art-img.boost{filter:contrast(1.07) saturate(1.1);
  -webkit-mask:radial-gradient(62% 58% at 74% 46%,#000 34%,transparent 78%);
  mask:radial-gradient(62% 58% at 74% 46%,#000 34%,transparent 78%)}

/* Chips flutuantes */
.hero-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:13px;
  background:linear-gradient(135deg,rgba(18,24,38,.78),rgba(10,14,24,.72));
  border:1px solid var(--line);border-radius:16px;padding:13px 17px;backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.hero-chip-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(255,195,15,.12);border:1px solid rgba(255,195,15,.25)}
.hero-chip-ic svg{width:20px;height:20px}
.hero-chip-tx{display:flex;flex-direction:column;line-height:1.15}
.hero-chip-v{font-family:var(--fd);font-weight:700;font-size:1.18rem;color:var(--white)}
.hero-chip-v small{font-size:.62em;color:var(--gold-bright);font-weight:600}
.hero-chip-l{font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(140,147,166,.9);margin-top:3px}
.hero-chip.c1{top:13%;left:48.5%;animation:heroFloat 7s ease-in-out infinite}
.hero-chip.c2{bottom:13%;right:5%;animation:heroFloat 8s ease-in-out infinite .6s}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Animações de entrada */
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* LCP: sem opacity — a maior imagem pinta imediatamente (o Chrome ignora LCP de elemento com opacity:0). Só o slide por transform. */
@keyframes heroImgIn{from{transform:translateX(40px) scale(1.04)}to{transform:none}}
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;animation:heroRise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .rv.d1{animation-delay:.08s}.rv.d2{animation-delay:.16s}.rv.d3{animation-delay:.24s}.rv.d4{animation-delay:.32s}.rv.d5{animation-delay:.42s}
  .art-img{animation:heroImgIn 1.4s cubic-bezier(.2,.7,.2,1) .15s both}
  .hero-chip{opacity:0;animation:heroRise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-chip.c1{animation-delay:.7s}.hero-chip.c2{animation-delay:.9s}
}

/* Responsivo */
@media(max-width:760px){
  /* Layout: coluna — foto em cima, texto centralizado abaixo */
  .hero{flex-direction:column;align-items:stretch;min-height:0}
  /* Arte: bloco full-width no topo, altura fixa — overflow recorta abaixo do rosto */
  .art{position:relative;inset:auto;width:100%;height:clamp(230px,64vw,360px);overflow:hidden}
  .art::after{background:linear-gradient(to bottom,rgba(6,6,10,.35) 0%,transparent 30%,rgba(6,6,10,.88) 82%,#06060A 100%)}
  .art-img.boost{display:none}
  /* Foto ancora no topo, preenche a largura */
  .art-img{position:absolute;top:-8%;left:0;right:auto;bottom:auto;
    width:100%;height:auto;max-width:none;
    filter:contrast(1.07) saturate(1.1);
    -webkit-mask:linear-gradient(to bottom,#000 58%,transparent 100%);
    mask:linear-gradient(to bottom,#000 58%,transparent 100%)}
  .hero-chip{display:none}
  /* Texto centralizado abaixo da foto — sobe um pouco sobre o fade da imagem */
  .hero-grid{grid-template-columns:1fr;padding:8px 0 48px;gap:0;min-height:0;margin-top:-24px}
  .copy{max-width:640px;margin:0 auto;text-align:center}
  .hero .ey{margin:0 auto}
  .cta{justify-content:center}
  /* Bignumbers: faixa full-bleed SEM 100vw.
     100vw + margin calc(50%-50vw) estoura a largura no Safari/Instagram iPhone
     (vw ≠ largura visível) e, com overflow-x:hidden no body, corta o h1 à direita. */
  .copy{max-width:100%;min-width:0;width:100%;padding:0;box-sizing:border-box}
  .hero-grid{min-width:0;width:100%}
  .hero h1{max-width:100%;overflow-wrap:break-word}
  .sub{font-size:1.06rem;line-height:1.55;margin:12px auto 0;max-width:400px;opacity:.85}
  /* Bignumbers só no desktop — no mobile somem para aliviar a hero */
  .proof{display:none}

  .hero .cta{justify-content:center;margin-top:22px}

  /* Hierarquia: hero manda, dobras 2 e 3 apoiam (h2 um degrau menor e mais leve) */
  #contexto-meta .sec-head h2,
  #autoridade .auth-marquee-head h2{
    font-size:clamp(1.55rem,5.2vw,1.95rem);
    font-weight:500;
    line-height:1.16
  }
  .hero,
  #autoridade{
    background:#06060A !important
  }
  .hero{padding-bottom:0}
  .hero-grid{padding-bottom:28px}
  #contexto-meta,
  #autoridade{
    padding-top:clamp(36px,7vw,56px);
    padding-bottom:clamp(36px,7vw,56px)
  }
  #autoridade::before{
    opacity:.55
  }
}

/* Seções "brancas" usam o neutro quente em vez de #FFF puro */
section.white{background:var(--bg)}

/* aproxima "Tudo isso por apenas" da seção anterior */
#ancoragem{padding-top:clamp(20px,3.5vw,40px)}

/* Gradiente dourado nos títulos — igual ao hero */
h1 .em-gold,h2 .em-gold,h3 .em-gold,
.bn-hero-sub .em-gold{
  background:linear-gradient(100deg,var(--gold-bright),#FC7148) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important
}

/* Headline grande dentro do card yes */
.aud-headline{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:28px
}

/* ── Jornada de etapas (seção 04) ── */
.journey{position:relative;margin-top:clamp(48px,7vw,72px)}

/* Linha vertical — espessa, dourada, com glow */
.journey::before{
  content:'';position:absolute;left:40px;top:32px;bottom:32px;width:3px;
  border-radius:3px;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,195,15,.6) 8%,
    rgba(255,195,15,.85) 30%,
    rgba(255,167,15,.9) 50%,
    rgba(255,195,15,.85) 70%,
    rgba(255,195,15,.6) 92%,
    transparent 100%
  );
  box-shadow:0 0 12px rgba(255,195,15,.35),0 0 24px rgba(255,195,15,.15)
}

.jstep{display:grid;grid-template-columns:82px 1fr;gap:clamp(20px,3vw,40px);
  padding:clamp(28px,4.5vw,48px) 0;
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.jstep.in{opacity:1;transform:none}
.jstep+.jstep{border-top:1px solid var(--line-2)}
.jstep-badge{display:flex;justify-content:center;align-items:flex-start;padding-top:2px}

/* Círculo — anel dourado multicamada + profundidade */
.jstep-num{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(145deg,#16192a 0%,#0a0c14 100%);
  border:none;
  box-shadow:
    0 0 0 2px rgba(255,195,15,.45),
    0 0 0 5px rgba(255,195,15,.08),
    0 8px 28px rgba(10,12,20,.4),
    inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;z-index:1;flex-shrink:0
}
/* Etapa visível: anel dourado mais forte, sem loop de animação */
.jstep.in .jstep-num{
  box-shadow:
    0 0 0 2px rgba(255,195,15,.6),
    0 0 0 6px rgba(255,195,15,.12),
    0 0 18px rgba(255,195,15,.3),
    0 8px 28px rgba(10,12,20,.4),
    inset 0 1px 0 rgba(255,255,255,.09)
}
.jstep-num .et{font-family:var(--fm);font-size:.42rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:2px;opacity:.85}
.jstep-num .nn{font-family:var(--fd);font-weight:700;font-size:1.4rem;color:var(--white);line-height:1}

.jstep-tag{display:inline-flex;font-family:var(--fm);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:#FC7148;background:rgba(252,113,72,.1);
  border:1px solid rgba(252,113,72,.35);border-radius:4px;padding:4px 10px;margin-bottom:14px;
  font-weight:600}
.jstep-body h3{font-size:clamp(1.2rem,2.2vw,1.65rem);color:var(--ink);line-height:1.2;margin-bottom:10px}
.jstep-body p{font-size:.97rem;color:var(--ink-soft);line-height:1.65;max-width:62ch;margin-bottom:18px}
.jstep-chips{display:flex;flex-wrap:wrap;gap:8px}
.jstep-chip{font-family:var(--fm);font-size:.71rem;letter-spacing:.03em;
  color:var(--ink-soft);background:var(--white);border:1px solid var(--line);border-radius:6px;padding:5px 12px}
.jstep-chip.hi{color:var(--gold-d);background:rgba(204,153,0,.06);border-color:rgba(204,153,0,.28)}

/* ── Possibilidades: nota de horizonte + disclaimer ── */
.pos-note{max-width:72ch;margin:clamp(40px,6vw,60px) auto 0;text-align:center}
.pos-pull{font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.5;color:var(--ink);margin:0 auto}
.pos-disc{font-size:.84rem;line-height:1.6;color:var(--mut);max-width:60ch;margin:14px auto 0}

/* ── Workflows um a um: lista com divisores (nº, nome, descrição) ── */
.wf-detail{max-width:860px;margin:clamp(48px,7vw,72px) auto 0}
.wf-detail-title{font-family:var(--fd);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.7rem);
  letter-spacing:-.02em;color:var(--ink);text-align:center;margin:0 0 10px}
.wf-detail-sub{font-size:.95rem;line-height:1.65;color:var(--ink-soft);text-align:center;
  max-width:56ch;margin:0 auto clamp(24px,3.5vw,36px)}
.wf-list{border-top:1px solid var(--line)}
.wf-row{display:grid;grid-template-columns:44px 200px 1fr;gap:14px;align-items:baseline;
  padding:16px 4px;border-bottom:1px solid var(--line)}
.wf-row-num{font-family:var(--fm);font-size:.72rem;font-weight:600;color:var(--gold-d);letter-spacing:.06em}
.wf-row-name{font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--ink);letter-spacing:-.01em}
.wf-row-desc{font-size:.9rem;line-height:1.65;color:var(--ink-soft);margin:0}
@media(max-width:700px){
  .wf-row{grid-template-columns:36px 1fr;row-gap:4px}
  .wf-row-desc{grid-column:2}
}

@media(max-width:600px){
  .journey::before{left:27px;width:2px}
  .jstep{grid-template-columns:56px 1fr;gap:14px}
  .jstep-num{width:46px;height:46px}
  .jstep-num .nn{font-size:1.1rem}
}

/* ── Elementos de fundo ICP ── */
.hbg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hbg-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(204,153,0,.09) 1.2px, transparent 1.2px);
  background-size:30px 30px;
  -webkit-mask:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,.65) 40%, transparent 58%),
    linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,.65) 40%, transparent 58%),
    linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-composite:intersect
}
.hbg-code{
  position:absolute;bottom:14%;left:3%;
  font-family:var(--fm);font-size:.6rem;line-height:1.9;letter-spacing:.03em;
  color:var(--gold-bright);opacity:.07;
  transform:rotate(-2deg);white-space:pre;
  -webkit-mask:linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask:linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)
}
@media(max-width:760px){.hbg{display:none}}

/* ── Dashboard do problema: no mobile, as 3 fontes viram colunas de uma tabela única ── */
.vc-table{display:none}
@media(max-width:760px){
  .vc-app,.vc-neq-slot{display:none}
  .vc-table{
    display:block;border-radius:10px;overflow:hidden;
    background:#0f1220;border:1px solid rgba(255,255,255,.07);
    box-shadow:0 10px 28px rgba(0,0,0,.45)
  }
  .vc-table-row{display:grid;grid-template-columns:1.05fr repeat(3,1fr)}
  .vc-table-row+.vc-table-row{border-top:1px solid rgba(255,255,255,.06)}
  .vc-table-cell{
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:11px 6px;font-size:.78rem;font-weight:600;color:#e4e6eb;
    font-variant-numeric:tabular-nums;letter-spacing:-.005em
  }
  .vc-table-cell.is-empty{color:rgba(228,230,235,.3);font-weight:400}
  .vc-table-cell--highlight{color:var(--gold-bright);font-weight:700}
  .vc-table-metric{
    justify-content:flex-start;text-align:left;
    font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
    font-weight:500;color:rgba(205,212,224,.6);background:rgba(255,255,255,.025)
  }
  .vc-table-head{background:rgba(255,255,255,.03)}
  .vc-table-head .vc-table-cell{padding:13px 6px}
  .vc-table-src{
    flex-direction:column;gap:5px;
    font-family:var(--fm);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;
    font-weight:600;color:rgba(228,230,235,.7)
  }
  .vc-table-src svg{flex-shrink:0}
  .vc-table-src--meta span{color:#5BB1FF}
  .vc-table-src--sheets span{color:#5FD68C}
  .vc-table-src--checkout span{color:#9C97FF}
}
@media(max-width:420px){
  .vc-table-cell{font-size:.7rem;padding:10px 4px}
  .vc-table-src{font-size:.56rem}
  .vc-table-metric{font-size:.6rem}
}

/* ── Autoridade: marquee de clientes ── */
.auth-marquee-head{text-align:center;margin-bottom:clamp(10px,2vw,18px)}
.auth-marquee-head h2{margin-left:auto;margin-right:auto;max-width:52ch}
.auth-marquee-sub{
  text-align:center;margin-bottom:clamp(32px,5vw,52px);
  font-size:clamp(.92rem,1.3vw,1.05rem);line-height:1.7;
  color:rgba(205,188,168,.68);max-width:62ch;margin-left:auto;margin-right:auto
}
.auth-mq-wrap{
  position:relative;
  display:flex;flex-direction:column;gap:12px;
  /* overflow visível para o hover não ser clipado; o fade é via pseudo */
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)
}
.auth-mq-row{
  overflow:hidden;
  /* padding vertical para o translateY do hover não ser clipado */
  padding:6px 0
}
.auth-marquee-cta{text-align:center;margin-top:clamp(32px,5vw,52px)}
.auth-mq-row:hover .auth-mq-track{animation-play-state:paused}
.auth-mq-track{
  display:flex;gap:12px;width:max-content;
  animation:authMqLeft 52s linear infinite
}
.auth-mq-track.auth-mq-right{animation:authMqRight 60s linear infinite}
.auth-mq-track.auth-mq-left-slow{animation:authMqLeft 56s linear infinite}
@keyframes authMqLeft{
  from{transform:translateX(0)}to{transform:translateX(-50%)}
}
@keyframes authMqRight{
  from{transform:translateX(-50%)}to{transform:translateX(0)}
}

/* Card: mesma linguagem dos hero-chip da página */
.auth-mq-card{
  display:inline-flex;align-items:center;gap:15px;
  background:linear-gradient(135deg,rgba(18,24,38,.78),rgba(10,14,24,.72));
  border:1px solid rgba(241,228,212,.12);border-radius:18px;
  padding:16px 22px 16px 16px;white-space:nowrap;flex-shrink:0;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  transition:border-color .45s cubic-bezier(.2,.7,.2,1),
             box-shadow .45s cubic-bezier(.2,.7,.2,1),
             transform .35s cubic-bezier(.2,.7,.2,1)
}
.auth-mq-card:hover{
  border-color:rgba(255,195,15,.34);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,195,15,.12) inset;
  transform:translateY(-4px)
}

/* Avatar: anel dourado duplo, igual ao hero-chip-ic */
.auth-mq-avatar-wrap{
  position:relative;flex-shrink:0;width:46px;height:46px;
  border-radius:50%;
  background:rgba(255,195,15,.12);
  border:1px solid rgba(255,195,15,.25);
  padding:2px
}
.auth-mq-avatar{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block
}
.auth-mq-avatar-ring{display:none}

.auth-mq-info{display:flex;flex-direction:column;gap:4px}
.auth-mq-name{
  font-family:var(--fd);font-weight:700;font-size:1.02rem;
  color:var(--white);line-height:1.15;letter-spacing:-.01em
}
.auth-mq-niche{
  font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(140,147,166,.8)
}
@media(prefers-reduced-motion:reduce){.auth-mq-track{animation:none}}
/* Desktop: 2 fileiras; mobile: 3 */
.auth-mq-row--mobile-only{display:none}
@media(max-width:760px){
  .auth-mq-row--mobile-only{display:block}
  .auth-mq-wrap{gap:10px}
  .auth-mq-card{padding:12px 16px 12px 12px;gap:12px;border-radius:16px}
  .auth-mq-avatar-wrap{width:40px;height:40px}
  .auth-mq-name{font-size:.92rem}
  .auth-mq-niche{font-size:.55rem;letter-spacing:.08em}
  .auth-marquee-sub{max-width:34ch}
}

/* ── Professor: identidade do mentor (foto + nome + cargo) com moldura e movimento ── */
.prof-id{display:flex;flex-direction:column;align-items:center;text-align:center}
.prof-photo{
  position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  /* moldura: borda quente + traço dourado interno */
  padding:7px;background:linear-gradient(160deg,rgba(255,195,15,.32),rgba(19,32,46,.08) 42%,rgba(255,195,15,.14));
  box-shadow:0 24px 54px rgba(19,32,46,.14),inset 0 0 0 1px rgba(255,195,15,.18);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1);
  will-change:transform
}
.prof-photo .prof-img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  border-radius:calc(var(--r-lg) - 7px);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s cubic-bezier(.2,.7,.2,1);
  will-change:transform
}
/* brilho dourado que percorre a moldura no hover */
.prof-photo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:var(--r-lg);
  background:linear-gradient(115deg,transparent 38%,rgba(255,234,170,.28) 50%,transparent 62%);
  background-size:240% 240%;background-position:120% 0;
  opacity:0;transition:opacity .5s ease
}
.prof-id:hover .prof-photo{
  transform:translateY(-6px) scale(1.012) rotate(-.4deg);
  box-shadow:0 34px 72px rgba(19,32,46,.22),inset 0 0 0 1px rgba(255,195,15,.4)
}
.prof-id:hover .prof-img{transform:scale(1.06);filter:saturate(1.06) contrast(1.03)}
.prof-id:hover .prof-photo::after{opacity:1;animation:profShine 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes profShine{from{background-position:120% 0}to{background-position:-40% 0}}
@media(prefers-reduced-motion:reduce){
  .prof-photo,.prof-photo .prof-img{transition:none}
  .prof-id:hover .prof-photo{transform:none}
  .prof-id:hover .prof-img{transform:none}
  .prof-id:hover .prof-photo::after{animation:none}
}
.prof-id-name{font-family:var(--fd);font-weight:700;font-size:1.1rem;color:var(--ink);margin-top:20px;letter-spacing:-.01em}
.prof-id-role{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);margin-top:6px}

/* ── Professor: layout geral, título e bloco de copy à direita ── */
.prof{
  align-items:start;
  grid-template-columns:.74fr 1.26fr;
  grid-template-areas:"photo title" "photo body";
  row-gap:clamp(28px,4vw,40px)
}
.prof-title{grid-area:title;margin:0 0 8px;align-self:end}
.prof-id{grid-area:photo}
.prof > .reveal:last-child{grid-area:body}
@media(max-width:840px){
  .prof{grid-template-columns:1fr;grid-template-areas:"title" "photo" "body";row-gap:0}
  .prof-title{margin-bottom:34px;text-align:center}
  .prof-id{margin-bottom:38px}
}
.prof-role{font-family:var(--fd);font-weight:700;font-size:1.25rem;color:#FC7148;margin-bottom:4px}
.prof-role-sub{font-size:.92rem;color:var(--mut);line-height:1.5;margin-bottom:22px}
.prof > .reveal:last-child > p strong{color:#FC7148;font-weight:700}
.prof > .reveal:last-child > p{margin-bottom:18px;line-height:1.7}
@media(max-width:840px){
  .prof-role,.prof-role-sub{display:none}
  .prof > .reveal:last-child{text-align:left}
}

/* ══════════════════════════════════════════════════════════
   OFERTA — HERO-DNA DARK THEME
   Mesma linguagem visual da hero: glassmorphism, glow
   dourado, backdrop-filter, profundidade multicamada.
   ═══════════════════════════════════════════════════════ */

/* ── Seção: fundo da hero e remoção do quadriculado global ── */
.dark.hero-like{
  position:relative;overflow:hidden;
  background:#06060A !important;
}
.dark.hero-like::before{
  display:none
}
.dark.hero-like::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:rgba(6,6,10,.15)
}

/* ── Bolinhas e Fundo (Dot Grid): Brilho extra e centralizado ── */
.dark.hero-like .hbg-grid{
  background-image:radial-gradient(rgba(204,153,0,.15) 1.2px, transparent 1.2px);
  -webkit-mask: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

/* ── Card principal: glassmorphism hero-chip style ── */
.dark .offer{
  background:#06060A; /* Teste: mesma cor de fundo da hero */
  border:1px solid rgba(241,228,212,.12);
  border-radius:20px;
  box-shadow:
    0 0 0 1px rgba(255,195,15,.06) inset,
    0 40px 100px -30px rgba(0,0,0,.7),
    0 0 60px -20px rgba(255,195,15,.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  overflow:hidden;
  position:relative
}
/* Glow sutil no topo do card — como a borda superior da hero */
.dark .offer::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,195,15,.4),transparent);
  z-index:2
}
/* Radial glow atrás do card — profundidade de camada */
.dark .offer::after{
  content:'';position:absolute;inset:-1px;border-radius:21px;z-index:-1;
  background:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(255,195,15,.1),transparent 60%);
  pointer-events:none
}

/* ── Top bar: estilo eyebrow da hero ── */
.dark .offer-top{
  background:linear-gradient(135deg,rgba(255,195,15,.06),rgba(255,195,15,.02));
  border-bottom:1px solid rgba(241,228,212,.08);
  color:var(--sand);
  padding:18px 28px;
  font-size:.82rem;letter-spacing:.02em
}
.dark .offer-top .pulse{color:var(--gold-bright);font-weight:600}
.dark .offer-top .pulse i{
  background:var(--gold-bright);
  box-shadow:0 0 8px rgba(255,195,15,.6);
  animation:offerPulse 2s ease-in-out infinite
}
@keyframes offerPulse{
  0%,100%{box-shadow:0 0 4px rgba(255,195,15,.4);opacity:.7}
  50%{box-shadow:0 0 12px rgba(255,195,15,.8);opacity:1}
}

/* ── Colunas: divisor sutil como os separadores da hero ── */
.dark .offer-col+.offer-col{
  border-left:1px solid rgba(241,228,212,.07)
}
@media(max-width:880px){
  .dark .offer-col+.offer-col{
    border-left:0;
    border-top:1px solid rgba(241,228,212,.07)
  }
}

/* ── Título da coluna de itens ── */
.dark .offer-col-title{
  color:var(--white);font-weight:700;
  font-family:var(--fd);font-size:1rem;letter-spacing:-.01em
}

/* ── Linhas de item: estilo hero-chip condensado ── */
.dark .offer-row{
  border-bottom-color:rgba(241,228,212,.06);
  padding:15px 0;
  position:relative;
  transition:background .3s ease
}
.dark .offer-row:hover{
  background:transparent
}
.dark .offer-row:hover::before{
  content:"";position:absolute;inset:0 -8px;
  background:rgba(255,195,15,.03);border-radius:8px;
  pointer-events:none
}
.dark .offer-row p{color:rgba(205,188,168,.72);font-size:.95rem;line-height:1.6}
.dark .offer-row p b{
  color:var(--white);font-weight:600
}

/* Checkmarks: anel dourado glassmorphic — como hero-chip-ic */
.dark .offer-row .ck{
  background:linear-gradient(135deg,rgba(255,195,15,.15),rgba(255,195,15,.06));
  border:1px solid rgba(255,195,15,.25);
  color:var(--gold-bright);
  width:28px;height:28px;border-radius:9px;
  font-size:.82rem;
  box-shadow:0 0 12px rgba(255,195,15,.1)
}
.dark .offer-row .ck.ck-green{
  background:linear-gradient(135deg,rgba(88,212,23,.15),rgba(88,212,23,.06));
  border:1px solid rgba(88,212,23,.3);
  color:#58D417;
  box-shadow:0 0 12px rgba(88,212,23,.1)
}

/* ── ROI box: painel glassmorphic como os chips da hero ── */
.dark .offer-roi{
  background:linear-gradient(135deg,rgba(18,24,38,.6),rgba(10,14,24,.4));
  border:1px solid rgba(255,195,15,.15);border-radius:14px;
  padding:22px 24px;
  color:rgba(205,188,168,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  font-size:.93rem;line-height:1.6;
  text-align:left
}
.dark .offer-roi strong{
  color:var(--gold-bright);font-weight:700
}

/* ── Bloco de preço: destaque máximo, moldura dourada ── */
.dark .offer-price{
  background:linear-gradient(160deg,rgba(255,195,15,.06),rgba(10,14,24,.5));
  border:1.5px solid rgba(255,195,15,.25);
  border-radius:16px;
  padding:clamp(28px,4vw,38px) clamp(24px,3vw,34px);
  position:relative;overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,195,15,.08) inset,
    0 20px 50px rgba(0,0,0,.4)
}
/* Shine sutil no topo do bloco de preço */
.dark .offer-price::before{
  content:'';position:absolute;top:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,195,15,.5),transparent)
}
.dark .offer-price .tag{
  color:var(--gold-bright);
  font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600
}
.dark .offer-price .was{
  color:rgba(140,147,166,.6);
  text-decoration:line-through;
  font-size:.92rem
}
.dark .offer-price .now{
  color:var(--white);
  font-size:clamp(3.2rem,8vw,4.5rem);
  text-shadow:0 0 40px rgba(255,195,15,.15)
}
.dark .offer-price .now sup{
  color:var(--gold-bright);font-size:.36em;font-weight:600
}
.dark .offer-price .now .now-pre{
  display:block;
  font-family:var(--fb);font-size:.88rem;font-weight:400;
  color:rgba(140,147,166,.6);letter-spacing:0;
  margin-bottom:6px;text-shadow:none
}
.dark .offer-price .now small{
  font-size:.55em;color:var(--white);font-weight:500
}
.dark .offer-price .inst{
  color:rgba(205,188,168,.55);font-size:.88rem
}
.dark .offer-price .inst strong{
  color:var(--white);font-weight:700;font-size:1rem
}

/* ── Benefícios: micro-chips com ícone dourado ── */
.dark .offer-benefits{gap:16px;margin-bottom:32px}
.dark .offer-benefit{
  color:rgba(205,188,168,.72);
  font-size:.9rem;gap:12px
}
.dark .offer-benefit .ic{
  background:linear-gradient(135deg,rgba(255,195,15,.15),rgba(255,195,15,.06));
  border:1px solid rgba(255,195,15,.2);
  color:var(--gold-bright);
  border-radius:10px;
  width:32px;height:32px;
  font-size:.82rem;
  box-shadow:0 0 10px rgba(255,195,15,.08)
}

/* ── CTA button: gradiente dourado hero + glow respirando ── */
.dark .offer .btn-primary{
  background:linear-gradient(135deg,#FFD23F,var(--gold-bright) 60%,#FFA600);
  color:#0A0C14;
  box-shadow:
    0 12px 30px rgba(255,195,15,.25),
    0 0 0 1px rgba(255,195,15,.3) inset;
  font-size:1.08rem;font-weight:700;
  border-radius:var(--r-pill);
  position:relative
}
.dark .offer .btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:
    0 20px 40px rgba(255,195,15,.35),
    0 0 0 1px rgba(255,195,15,.5) inset
}
@media(prefers-reduced-motion:no-preference){
  /* halo dourado respira atras do botao (so opacity, composited, sem repaint) */
  .dark .offer .btn-primary::before{
    content:"";position:absolute;inset:0;border-radius:inherit;
    z-index:-1;
    box-shadow:0 0 34px 4px rgba(255,195,15,.5);
    animation:offerCtaGlow 2.4s ease-in-out infinite
  }
}
@keyframes offerCtaGlow{
  0%,100%{opacity:.3}
  50%{opacity:.7}
}

/* ── Guard / disclaimer ── */
.dark .offer-guard{
  color:rgba(140,147,166,.6);
  font-size:.84rem;margin-top:14px
}
.dark .offer-guard .sh{color:var(--gold-bright)}

/* press instantâneo; !important necessário para vencer hover de alta especificidade */
html .btn:active{transform:scale(.97) !important;transition:transform 0s !important}

/* Footer — preto sólido (sem grid), no padrão da referência BM/API */
.foot{background:#000}
.foot::before{display:none}

/* ═══ Feature split (seção 3) — mídia | título + texto + CTA ═══ */
.feat-head{text-align:center;margin-bottom:clamp(42px,6vw,72px);max-width:42ch;margin-left:auto;margin-right:auto}
.feat-head h2{
  font-family:var(--fd);font-weight:700;font-size:clamp(2rem,4.2vw,3rem);
  letter-spacing:-.03em;line-height:1.08;color:var(--ink);margin:0
}
.feat-stack{display:flex;flex-direction:column;gap:clamp(52px,7vw,88px)}
.feat-row{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,4.5vw,64px);align-items:center
}
.feat-row--flip{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.feat-row--flip .feat-media{order:2}
.feat-row--flip .feat-copy{order:1}
.feat-media{
  position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10;
  background:#0B0F18;
  box-shadow:0 28px 60px -28px rgba(19,32,46,.35);
  isolation:isolate
}
.feat-media::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 50% at 18% 78%,rgba(252,113,72,.32) 0%,transparent 58%),
    radial-gradient(ellipse 50% 45% at 88% 18%,rgba(255,195,15,.22) 0%,transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%,rgba(23,150,212,.12) 0%,transparent 60%)
}
.feat-media-frame{
  position:absolute;inset:clamp(14px,2.4vw,22px);z-index:1;border-radius:14px;
  overflow:hidden;background:#0A0C14;
  box-shadow:0 16px 40px rgba(0,0,0,.45);border:1px solid rgba(241,228,212,.1)
}
.feat-media-frame .cmp-gif-video,
.feat-media-frame iframe,
.feat-media-frame img,
.feat-media-frame video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;pointer-events:none
}
.feat-media-frame--contain img{object-fit:contain;object-position:center;background:#FBF9F4}
/* ═══ Itens de BÔNUS: moldura dourada forte + etiqueta pulsante ═══ */
.feat-bonus-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#7A5C00;
  background:linear-gradient(120deg,rgba(255,195,15,.28),rgba(255,210,63,.16));
  border:1.5px solid var(--gold-bright);
  border-radius:var(--r-pill);padding:7px 16px;margin-bottom:14px;
  animation:bonusGlow 1.6s ease-in-out infinite
}
.feat-bonus-tag::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold-bright);
  animation:bonusBlink 1.6s ease-in-out infinite
}
@keyframes bonusGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,195,15,.45)}
  50%{box-shadow:0 0 0 7px rgba(255,195,15,0)}
}
@keyframes bonusBlink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,195,15,.6)}
  50%{opacity:.35;box-shadow:0 0 0 4px rgba(255,195,15,0)}
}
.feat-row--bonus .feat-media{
  box-shadow:
    0 28px 60px -28px rgba(204,153,0,.6),
    0 0 0 3px var(--gold-bright),
    0 0 26px rgba(255,195,15,.38)
}
.feat-row--bonus .feat-media-frame{border-color:rgba(255,195,15,.55)}
@media (prefers-reduced-motion:reduce){
  .feat-bonus-tag,.feat-bonus-tag::before{animation:none}
}
/* slot de mídia (placeholder até entrar print/vídeo real via data-media) */
.feat-media-slot{
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 70% 60% at 30% 30%,rgba(255,195,15,.08),transparent 60%),
    linear-gradient(160deg,#0E1220,#0A0C14)
}
.feat-slot-label{
  display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
  font-family:var(--fd);font-weight:700;font-size:clamp(1rem,1.6vw,1.25rem);
  color:rgba(235,216,199,.9);letter-spacing:-.01em;padding:0 18px
}
.feat-slot-label small{
  font-family:var(--fm);font-weight:500;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-bright)
}
.feat-copy{max-width:34rem}
.feat-copy h3{
  font-family:var(--fd);font-weight:700;font-size:clamp(1.55rem,2.8vw,2.15rem);
  letter-spacing:-.03em;line-height:1.12;color:var(--ink);margin:0 0 16px
}
.feat-copy h3 .em-gold{
  background:linear-gradient(100deg,var(--gold-bright),#FC7148);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.feat-copy p{
  font-size:clamp(.98rem,1.35vw,1.08rem);line-height:1.65;color:var(--ink-soft);margin:0 0 26px
}
.feat-copy p strong{color:var(--ink);font-weight:600}
.feat-list{
  list-style:none;margin:0 0 26px;padding:0;
  display:flex;flex-direction:column;gap:14px;
  text-align:left
}
.feat-list li{
  position:relative;padding-left:1.15em;
  font-size:clamp(.98rem,1.35vw,1.08rem);line-height:1.6;color:var(--ink-soft)
}
.feat-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-bright),#FC7148)
}
.feat-list li strong{color:var(--ink);font-weight:600}
.feat-copy .btn{margin-top:4px}

/* ═══ Capacidades / Mercado — ambient glow + grid ═══ */
#capacidades,
#mercado-profissao{
  background:#F6F3EC;position:relative;overflow:hidden
}
#capacidades::before,
#mercado-profissao::before{
  content:'';position:absolute;inset:-8% -4%;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 55% 42% at 18% 18%, rgba(255,195,15,.16), transparent 68%),
    radial-gradient(ellipse 50% 40% at 88% 78%, rgba(252,113,72,.1), transparent 65%),
    linear-gradient(rgba(19,32,46,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,32,46,.028) 1px, transparent 1px);
  background-size:auto,auto,56px 56px,56px 56px;
  animation:capaAmbient 16s ease-in-out infinite alternate
}
@keyframes capaAmbient{
  from{opacity:.55;transform:translate3d(0,0,0) scale(1)}
  to{opacity:1;transform:translate3d(0,-1.5%,0) scale(1.03)}
}
@media(prefers-reduced-motion:reduce){
  #capacidades::before,
  #mercado-profissao::before{animation:none;opacity:.75}
}
#capacidades > .wrap,
#capacidades > .lx-wrap,
#mercado-profissao > .wrap,
#mercado-profissao > .lx-wrap{position:relative;z-index:1}
.capa-head{text-align:center;max-width:46ch;margin:0 auto;position:relative;z-index:1}
.capa-head h2{
  font-family:var(--fd);font-weight:700;font-size:clamp(1.9rem,4vw,2.85rem);
  letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin:0 0 16px
}
.capa-head h2 .em-gold{
  background:linear-gradient(100deg,var(--gold-bright),#FC7148);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.capa-sub{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.5;
  color:var(--ink);margin:0
}
#capacidades .pil-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))
}
@media(min-width:761px){
  #capacidades .pil-card{opacity:1}
  #capacidades .pil-card:nth-child(5),
  #capacidades .pil-card:nth-child(6){transition-delay:0s}
}
@media(max-width:1100px){
  #capacidades .pil-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  #capacidades .pil-grid{grid-template-columns:1fr}
}
.capa-cta{text-align:center;margin-top:clamp(36px,5vw,52px);position:relative;z-index:1}

/* ═══ Dobra 4 · lista de capacidades com check que fica verde no scroll ═══ */
.caplist{max-width:760px;margin:clamp(40px,5vw,60px) auto 0;position:relative;z-index:1;
  display:flex;flex-direction:column;gap:clamp(10px,1.4vw,16px)}
.caplist-item{display:flex;align-items:center;gap:16px;
  padding:clamp(15px,1.8vw,20px) clamp(18px,2.2vw,26px);
  background:#fff;border:1px solid rgba(19,32,46,.09);border-radius:14px;
  box-shadow:0 1px 2px rgba(19,32,46,.03);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ezs,cubic-bezier(.2,.7,.2,1)),transform .5s var(--ezs,cubic-bezier(.2,.7,.2,1)),border-color .5s ease}
.caplist-item.on{opacity:1;transform:none}
.caplist-item.on{border-color:rgba(88,212,23,.32)}
/* check circular: cinza -> verde quando .on */
.caplist-ck{flex-shrink:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(19,32,46,.06);border:1.5px solid rgba(19,32,46,.14);
  transition:background .45s ease .05s,border-color .45s ease .05s}
.caplist-ck svg{width:16px;height:16px;fill:none;stroke:#9aa0ac;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .5s var(--ezs,cubic-bezier(.2,.7,.2,1)) .12s,stroke .45s ease .05s}
.caplist-item.on .caplist-ck{background:rgba(88,212,23,.14);border-color:var(--green-br)}
.caplist-item.on .caplist-ck svg{stroke:var(--green-br);stroke-dashoffset:0}
.caplist-tx{font-family:var(--fd);font-weight:600;
  font-size:clamp(1.02rem,1.6vw,1.22rem);line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.caplist-tx .em-gold{background:linear-gradient(100deg,var(--gold-bright),#FC7148);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media(prefers-reduced-motion:reduce){
  .caplist-item{opacity:1;transform:none;transition:none}
  .caplist-item .caplist-ck{background:rgba(88,212,23,.14);border-color:var(--green-br)}
  .caplist-item .caplist-ck svg{stroke:var(--green-br);stroke-dashoffset:0}
}

/* ═══ Dobra 4 · três pilares de valor (o que você ganha) ═══ */
.capa-lead{max-width:52ch;margin:14px auto 0;position:relative;z-index:1;
  font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6;color:var(--ink-soft);text-align:center}
.d4pill-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin-top:clamp(40px,5vw,56px);position:relative;z-index:1
}
.d4pill{
  position:relative;background:#fff;border:1px solid rgba(19,32,46,.1);
  border-radius:18px;padding:30px 26px 28px;
  box-shadow:0 1px 2px rgba(19,32,46,.04),0 12px 30px -18px rgba(19,32,46,.16);
  display:flex;flex-direction:column;overflow:hidden
}
.d4pill::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold-bright),#FC7148)}
.d4pill-n{font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-strong,#B8860B);font-weight:600;margin:0 0 14px}
.d4pill-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin:0 0 16px;
  background:rgba(255,195,15,.12);border:1px solid rgba(255,195,15,.28)}
.d4pill-ic svg{width:23px;height:23px;stroke:#B8860B;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.d4pill h3{font-family:var(--fd);font-weight:700;font-size:clamp(1.18rem,1.9vw,1.42rem);
  line-height:1.18;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.d4pill h3 .em-gold{
  background:linear-gradient(100deg,var(--gold-bright),#FC7148);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.d4pill p{font-size:.98rem;line-height:1.58;color:var(--ink-soft);margin:0}
.d4pill p strong{color:var(--ink);font-weight:600}
.d4pill-foot{margin-top:auto;padding-top:16px}
.d4pill-chip{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fm);font-size:.72rem;letter-spacing:.02em;color:var(--ink);
  background:rgba(19,32,46,.045);border:1px solid rgba(19,32,46,.09);
  border-radius:999px;padding:7px 13px;line-height:1.3}
.d4pill-chip b{color:#B8860B;font-weight:700}
.d4pill-note{max-width:60ch;margin:22px auto 0;position:relative;z-index:1;text-align:center;
  font-family:var(--fm);font-size:.74rem;letter-spacing:.01em;color:var(--ink-soft);opacity:.85}
@media(max-width:900px){.d4pill-grid{grid-template-columns:1fr;gap:14px}}

/* ═══ Features mosaico (features-8 → HTML/CSS THE) ═══ */
.feat8-head{text-align:center;max-width:42ch;margin:0 auto clamp(36px,5vw,52px)}
.feat8-head h2{
  font-family:var(--fd);font-weight:700;font-size:clamp(1.85rem,3.8vw,2.6rem);
  letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin:0 0 14px
}
.feat8-head h2 .em-gold{
  background:linear-gradient(100deg,var(--gold-bright),#FC7148);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.feat8-sub{font-size:1.02rem;line-height:1.6;color:var(--ink-soft);margin:0}
.feat8-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;margin-top:clamp(36px,5vw,52px)
}
.feat8-card{
  grid-column:span 6;
  background:#fff;
  border:1px solid rgba(19,32,46,.1);
  border-radius:18px;
  padding:clamp(22px,3vw,28px);
  box-shadow:0 1px 3px rgba(19,32,46,.04);
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease;
  -webkit-tap-highlight-color:transparent
}
.feat8-card.is-active,
.feat8-card:active{
  transform:translateY(-6px);
  border-color:rgba(255,195,15,.38);
  box-shadow:0 18px 42px rgba(19,32,46,.11),0 0 0 1px rgba(255,195,15,.1)
}
.feat8-card.is-active .feat8-ring,
.feat8-card:active .feat8-ring{
  transform:scale(1.05);
  box-shadow:0 0 0 8px rgba(255,195,15,.09)
}
@media(hover:hover) and (pointer:fine){
  .feat8-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,195,15,.38);
    box-shadow:0 18px 42px rgba(19,32,46,.11),0 0 0 1px rgba(255,195,15,.1)
  }
  .feat8-card:hover .feat8-ring{
    transform:scale(1.05);
    box-shadow:0 0 0 8px rgba(255,195,15,.09)
  }
}
@media(prefers-reduced-motion:reduce){
  .feat8-card,.feat8-ring{transition:none}
  .feat8-card.is-active,
  .feat8-card:active,
  .feat8-card:hover{transform:none}
}
@media(min-width:640px){
  .feat8-card{box-sizing:border-box}
  /* fileira 1: 3 cards */
  .feat8-card:nth-child(1),
  .feat8-card:nth-child(2),
  .feat8-card:nth-child(3){grid-column:span 2}
  /* fileira do meio: 2 cards split */
  .feat8-card--split{grid-column:span 3}
  /* fileira final: último card (WhatsApp) ocupa a largura toda, conteúdo centrado */
  .feat8-card:nth-child(6):last-child{grid-column:span 6}
  .feat8-card:nth-child(6):last-child .feat8-desc{max-width:60ch}
}
.feat8-title{
  font-family:var(--fd);font-weight:700;font-size:1.12rem;
  letter-spacing:-.02em;line-height:1.25;color:var(--ink);margin:0
}
.feat8-desc{
  font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:8px 0 0
}
.feat8-card--hero{
  align-items:center;justify-content:center;text-align:center
}
.feat8-stat{
  position:relative;width:min(100%,220px);height:96px;
  display:grid;place-items:center;margin:0 auto 18px
}
.feat8-stat-bg{position:absolute;inset:0;width:100%;height:100%;color:rgba(19,32,46,.08)}
.feat8-stat-num{
  position:relative;z-index:1;
  font-family:var(--fd);font-weight:700;font-size:clamp(2.6rem,5vw,3.4rem);
  letter-spacing:-.04em;line-height:1;color:var(--ink)
}
.feat8-card--hero .feat8-title{font-size:1.35rem;margin-top:4px}
.feat8-ring{
  width:88px;height:88px;border-radius:50%;margin:0 auto 18px;
  display:grid;place-items:center;position:relative;
  border:1px solid rgba(19,32,46,.12);color:var(--gold-d);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease
}
.feat8-ring::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(19,32,46,.06)
}
.feat8-ring svg{width:36px;height:36px}
.feat8-ring .feat8-meta{
  width:54px;height:36px;display:block;
  background:var(--gold-d);
  -webkit-mask:url(assets/fotos/elementos/meta-logo-facebook.png) center / contain no-repeat;
  mask:url(assets/fotos/elementos/meta-logo-facebook.png) center / contain no-repeat
}
.feat8-spark{
  color:var(--gold-bright);margin:8px 0 20px;height:48px;
  display:flex;align-items:center
}
.feat8-spark svg{width:100%;max-width:160px;height:48px}
.feat8-card--split{
  display:grid;grid-template-columns:1fr;gap:0;padding:0;overflow:hidden
}
@media(min-width:640px){
  .feat8-card--split{
    grid-template-columns:1fr 1fr;align-items:stretch;
    min-height:252px
  }
}
.feat8-split-copy{
  padding:clamp(22px,3vw,28px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;min-height:0;text-align:center
}
.feat8-mini-ic{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;position:relative;margin:0 auto;
  border:1px solid rgba(19,32,46,.12);color:var(--ink)
}
.feat8-mini-ic::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(19,32,46,.06)
}
.feat8-mini-ic svg{width:20px;height:20px}
.feat8-split-viz{
  position:relative;border-left:1px solid rgba(19,32,46,.08);
  border-top:1px solid rgba(19,32,46,.08);
  border-top-left-radius:18px;padding:28px 20px 20px;
  background:rgba(246,243,236,.55);color:var(--gold-bright);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:0;height:100%
}
.feat8-split-viz--photo{
  padding:0;overflow:hidden;min-height:180px;height:100%;
  position:relative;align-self:stretch;border-top:0;background:#F6F3EC
}
@media(min-width:640px){
  .feat8-split-viz--photo{min-height:0}
}
.feat8-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block
}
.feat8-win{position:absolute;top:12px;left:14px;display:flex;gap:5px}
.feat8-win span{
  width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(19,32,46,.14);background:rgba(19,32,46,.04)
}
.feat8-bars{width:100%;height:auto;display:block;margin-top:auto}
.feat8-people{
  position:relative;
  border-left:1px solid rgba(19,32,46,.08);
  background:rgba(246,243,236,.45);
  display:flex;align-items:center;justify-content:center;
  min-height:0;height:100%;padding:12px;overflow:hidden
}
.feat8-orbit-bg{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;pointer-events:none;user-select:none
}
.feat8-orbit-bg span{
  font-family:var(--fd);font-weight:800;font-size:clamp(1.45rem,2.6vw,1.9rem);
  letter-spacing:-.045em;line-height:.95;color:var(--ink);
  opacity:.08;white-space:nowrap
}
.feat8-orbit-bg span:nth-child(1){transform:translateX(-8px) rotate(-5deg)}
.feat8-orbit-bg span:nth-child(2){transform:translateX(10px) rotate(4deg);opacity:.1}
.feat8-orbit-bg span:nth-child(3){transform:translateX(-4px) rotate(-3deg);opacity:.12;color:var(--gold-d)}
.feat8-orbit{
  position:relative;z-index:1;width:min(100%,200px);aspect-ratio:1;flex-shrink:0
}
.feat8-orbit-spin{
  position:absolute;inset:0;
  animation:feat8OrbitSpin 42s linear infinite
}
.feat8-orbit-av{
  --n:11;
  position:absolute;left:50%;top:50%;
  width:30px;height:30px;margin:-15px;
  transform:rotate(calc(var(--i) * 360deg / var(--n))) translateY(-78px)
}
.feat8-orbit-av img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 2px #fff,0 2px 8px rgba(19,32,46,.12);
  animation:feat8OrbitFace 42s linear infinite
}
@keyframes feat8OrbitSpin{to{transform:rotate(360deg)}}
@keyframes feat8OrbitFace{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}
@media(prefers-reduced-motion:reduce){
  .feat8-orbit-spin,.feat8-orbit-av img{animation:none}
}

@media(max-width:900px){
  .feat-row,.feat-row--flip{grid-template-columns:1fr;gap:22px}
  .feat-row--flip .feat-media,.feat-row--flip .feat-copy{order:unset}
  .feat-media{aspect-ratio:16/11}
  .feat-copy{text-align:center;max-width:40rem;margin:0 auto}
  .feat-list{text-align:left;max-width:34rem;margin-left:auto;margin-right:auto}
  .feat-copy .btn{margin-inline:auto}
}

/* ═══ Conteúdo Completo — cards numerados com slot de gif ═══ */
.cmp-head{text-align:center;margin-bottom:clamp(42px,6vw,66px)}
.cmp-ey{display:block;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(1rem,1.7vw,1.2rem);color:var(--gold-d);margin-bottom:8px}
.cmp-h2{font-family:var(--fd);font-weight:700;font-size:clamp(2.1rem,4.5vw,3.1rem);letter-spacing:-.03em;line-height:1.08;color:var(--ink);margin:0}
.cmp-track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}

/* ═══ Conteúdo Completo — cards (editorial, mídia-primeiro) ═══
   Estrutura visual: thumbnail no topo (protagonista) → índice mono +
   título → descrição. O reorder é feito por flex-order; o HTML
   permanece [top(badge+name) · gif · desc]. */
.cmp-card{
  display:flex;flex-direction:column;
  background:#FBF9F4;
  border:1px solid rgba(19,32,46,.07);
  border-radius:16px;
  padding:0;
  position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 1px 3px rgba(19,32,46,.04);
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),
    border-color .45s ease,box-shadow .45s ease
}
.cmp-card.in{opacity:1;transform:none}
.cmp-card.in:hover{
  transform:translateY(-6px);
  border-color:rgba(19,32,46,.12);
  box-shadow:0 24px 50px -18px rgba(19,32,46,.22)
}
.cmp-card.in:hover .cmp-gif-slot::after{opacity:1}
.cmp-card.in:hover .cmp-gif-ph svg{opacity:.52}

/* THUMBNAIL — primeiro elemento visual, sangra de borda a borda.
   z-index:2 garante que cubra a marca d'água, mesmo que o número
   suba até a região da thumb. */
.cmp-gif-slot{
  order:1;position:relative;z-index:2;
  aspect-ratio:16/10;
  background:linear-gradient(145deg,#141926,#0B0F18);
  overflow:hidden;
  border-bottom:1px solid rgba(19,32,46,.07)
}
/* Brilho diagonal sutil que cruza a thumb no hover — vida sem glow genérico */
.cmp-gif-slot::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,234,170,.14) 50%,transparent 60%);
  opacity:0;transition:opacity .6s ease
}
.cmp-gif-slot img,.cmp-gif-slot video{width:100%;height:100%;object-fit:cover;display:block}
.cmp-gif-slot .cmp-gif-video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
/* Imagem estática (ex: card de suporte): o slot mantém a MESMA proporção
   dos slots de vídeo (16/10) e a foto entra inteira, no tamanho real,
   sem ampliar nem recortar (contain). O fundo escuro casa com a arte. */
.cmp-gif-slot--contain img{object-fit:contain;object-position:center}
/* Card bônus — destaque laranja clean (fundo suave, texto escuro) */
.cmp-card--bonus{
  background:#FFE3D5;border-color:#F7C9B4;
  box-shadow:0 14px 40px rgba(252,113,72,.18),0 2px 10px rgba(19,32,46,.06)
}
.cmp-card--bonus.in:hover{
  border-color:#F1B79B;
  box-shadow:0 20px 48px rgba(252,113,72,.26),0 2px 10px rgba(19,32,46,.08)
}
.cmp-card--bonus .cmp-gif-slot{
  background:#F6F3EC;
  border-bottom-color:rgba(210,95,45,.14)
}
.cmp-card--bonus .cmp-card-name{color:var(--ink)}
.cmp-card--bonus .cmp-card-desc{color:var(--ink-soft)}
.cmp-card--bonus .cmp-badge{color:rgba(210,95,45,.14)}
.cmp-card--bonus.in:hover .cmp-badge{color:rgba(210,95,45,.2)}
.cmp-gif-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px
}
.cmp-gif-ph svg{opacity:.28;transition:opacity .4s ease}
.cmp-gif-ph-lbl{
  font-family:var(--fm);font-size:.54rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.18)
}

/* Número marca d'água — grande, preenchendo a área branca atrás do
   bloco de texto. Ancorado mais abaixo, no miolo da região textual. */
.cmp-badge{
  position:absolute;z-index:0;
  left:clamp(8px,1.2vw,16px);top:58%;
  transform:translateY(-28%);
  font-family:var(--fd);font-weight:800;
  font-size:clamp(8rem,15vw,12rem);
  line-height:.8;letter-spacing:-.06em;
  color:rgba(19,32,46,.06);
  background:none;border:none;border-radius:0;width:auto;height:auto;
  pointer-events:none;user-select:none;
  transition:color .45s ease
}
.cmp-card.in:hover .cmp-badge{color:rgba(166,125,0,.1)}

/* CABEÇALHO — título sobre a marca d'água.
   min-height reserva espaço p/ 2 linhas de título: as descrições de
   todos os cards da fileira começam no mesmo nível. */
.cmp-card-top{
  order:2;position:relative;z-index:1;
  display:flex;align-items:flex-end;
  min-height:calc(clamp(1.04rem,1.6vw,1.24rem) * 1.22 * 2);
  padding:clamp(18px,2.4vw,24px) clamp(20px,2.6vw,26px) 0
}
.cmp-card-name{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(1.04rem,1.6vw,1.24rem);
  color:var(--ink);line-height:1.22;letter-spacing:-.02em
}

/* DESCRIÇÃO */
.cmp-card-desc{
  order:3;position:relative;z-index:1;
  font-size:.9rem;line-height:1.72;color:var(--ink-soft);margin:0;
  padding:clamp(11px,1.5vw,14px) clamp(20px,2.6vw,26px) clamp(20px,2.6vw,26px)
}
.cmp-card-list{
  order:3;position:relative;z-index:1;
  list-style:none;margin:0;padding:clamp(11px,1.5vw,14px) clamp(20px,2.6vw,26px) clamp(20px,2.6vw,26px);
  display:flex;flex-direction:column;gap:12px
}
.cmp-card-list li{
  position:relative;padding-left:1.1em;
  font-size:.9rem;line-height:1.65;color:var(--ink-soft)
}
.cmp-card-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-bright),#FC7148)
}
.cmp-card-list li strong{color:var(--ink);font-weight:600}
#conteudo,
section#conteudo{
  position:relative;z-index:2;
  padding-bottom:0
}
.cmp-cta-wrap{
  position:relative;z-index:3;
  margin-top:clamp(32px,5vw,52px);
  margin-bottom:clamp(24px,4vw,40px)
}
.cmp-cta-wrap .cta-band{
  padding:clamp(12px,2vw,20px) 0 clamp(12px,2vw,20px)
}
.cta-band{
  position:relative;z-index:2;
  padding:0 0 clamp(8px,1vw,16px);
  text-align:center
}
@media(max-width:700px){
  .cmp-track{display:flex;flex-direction:column;gap:16px}
  .cmp-card{width:100%;opacity:1;transform:none}
  .cmp-cta-wrap{margin-top:clamp(20px,5vw,32px);margin-bottom:clamp(20px,4vw,32px)}
  .cmp-cta-wrap .cta-band{padding:clamp(8px,2vw,16px) 0 clamp(8px,2vw,16px)}
  .cta-band{padding-bottom:0}

  /* ── "Luz ligando" no mobile ──
     Card começa apagado (apenas levemente atenuado p/ não esconder
     conteúdo). Ao ficar 100% visível recebe .lit: acende a superfície,
     o número marca d'água ascende em dourado e um reflexo percorre. */
  .cmp-card{
    transition:filter .7s cubic-bezier(.16,1,.3,1),
      box-shadow .7s cubic-bezier(.16,1,.3,1),
      border-color .7s ease;
    filter:brightness(.93) saturate(.9)
  }
  .cmp-card.lit{
    filter:brightness(1) saturate(1);
    border-color:rgba(204,153,0,.22);
    box-shadow:0 18px 44px -20px rgba(19,32,46,.28)
  }
  /* Número marca d'água: apaga e acende em dourado */
  .cmp-badge{
    color:rgba(19,32,46,.05);
    transition:color .8s cubic-bezier(.16,1,.3,1)
  }
  .cmp-card.lit .cmp-badge{color:rgba(204,153,0,.14)}

  /* Reflexo de luz que cruza o card uma vez, ao acender */
  .cmp-card::after{
    content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(115deg,
      transparent 38%,rgba(255,231,168,.0) 44%,
      rgba(255,231,168,.30) 50%,
      rgba(255,231,168,.0) 56%,transparent 62%);
    background-size:260% 260%;background-position:130% 0;
    opacity:0
  }
  .cmp-card.lit::after{
    animation:cmpSweep 1.1s cubic-bezier(.16,1,.3,1) .12s forwards
  }
  @keyframes cmpSweep{
    0%{opacity:0;background-position:130% 0}
    18%{opacity:1}
    100%{opacity:0;background-position:-30% 0}
  }
  @media(prefers-reduced-motion:reduce){
    .cmp-card{filter:none;transition:none}
    .cmp-card::after{display:none}
    .cmp-card.lit .cmp-badge{transition:none}
  }
}

/* ═══ 4 Pilares — seção clara #F6F3EC, acendem em cascata ao entrar ═══ */
.pil-text{margin-top:24px}
.pil-text p{font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.7;color:var(--ink-soft);margin:0 auto 16px;max-width:62ch}
.pil-text .pil-pull{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(1.2rem,2vw,1.5rem);color:var(--ink);
  margin-top:10px;max-width:none
}
.pil-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,20px);margin-top:clamp(36px,4.5vw,54px)}
.pil-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,2.6vw,32px) clamp(20px,2.4vw,28px);
  opacity:.5;
  box-shadow:0 3px 16px rgba(19,32,46,.05),0 1px 3px rgba(19,32,46,.04);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),background .6s ease,border-color .6s ease,box-shadow .6s ease,transform .5s cubic-bezier(.16,1,.3,1)
}
/* Cascata: no desktop os 4 acendem um a um */
@media(min-width:761px){
  .pil-card:nth-child(2){transition-delay:.22s}
  .pil-card:nth-child(3){transition-delay:.44s}
  .pil-card:nth-child(4){transition-delay:.66s}
}
/* Iluminado (amarelo) */
.pil-card.on{
  opacity:1;transform:translateY(-3px);
  background:#FFC30F;border-color:#FFC30F;
  box-shadow:0 16px 40px rgba(255,195,15,.34),0 2px 8px rgba(19,32,46,.08)
}
/* Ícone circular */
.pil-ic{
  width:clamp(56px,5vw,68px);height:clamp(56px,5vw,68px);border-radius:50%;
  display:grid;place-items:center;margin-bottom:clamp(16px,2vw,22px);
  background:rgba(19,32,46,.06);color:var(--gold-d);
  transition:background .6s ease,color .6s ease
}
.pil-ic svg{width:50%;height:50%}
.pil-card.on .pil-ic{background:rgba(255,255,255,.45);color:#241a02}
.pil-title{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(.98rem,1.4vw,1.12rem);
  line-height:1.22;letter-spacing:-.013em;
  color:var(--ink);margin:0 0 10px;transition:color .6s ease
}
.pil-desc{font-size:.9rem;line-height:1.72;color:var(--ink-soft);margin:0;transition:color .6s ease}
.pil-card.on .pil-title{color:#241a02}
.pil-card.on .pil-desc{color:rgba(40,28,4,.84)}
/* Último pilar iluminado: laranja vibrante (destaque) */
.pil-card:last-child.on{
  background:#FC7148;border-color:#FC7148;
  box-shadow:0 18px 46px rgba(252,113,72,.42),0 2px 10px rgba(19,32,46,.1)
}
.pil-card:last-child.on .pil-ic{background:rgba(255,255,255,.22);color:#fff}
.pil-card:last-child.on .pil-title{color:#fff}
.pil-card:last-child.on .pil-desc{color:rgba(255,255,255,.92)}
@media(max-width:760px){
  .pil-grid{grid-template-columns:repeat(2,1fr)}
  .pil-card{opacity:.5;transition:opacity .5s ease,background .5s ease,border-color .5s ease,box-shadow .5s ease,transform .4s ease}
}
@media(max-width:520px){.pil-grid{grid-template-columns:1fr}}

/* ═══ DOBRA 8 — Ancoragem + mockup tudão ═══ */
.offer-anchor{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);
  align-items:center;margin-top:clamp(36px,5vw,52px)
}
.offer-anchor-list{display:grid;gap:0}
.offer-anchor-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line-2)
}
.offer-anchor-row .val{
  font-family:var(--fb);font-weight:600;font-size:.9rem;color:var(--mut);
  text-decoration:line-through;white-space:nowrap;margin-top:2px
}
.offer-anchor-row:last-child{border-bottom:0}
.offer-anchor-row .ck{
  width:26px;height:26px;border-radius:50%;background:rgba(62,154,26,.14);color:var(--green);
  display:grid;place-items:center;font-weight:700;font-size:.78rem;flex-shrink:0;margin-top:2px
}
.offer-anchor-row b{display:block;font-family:var(--fb);font-weight:600;font-size:.98rem;color:var(--ink);margin-bottom:2px}
.offer-anchor-row span{font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.offer-anchor-bonus{
  margin-top:18px;padding:18px 20px;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,195,15,.14),rgba(255,195,15,.06));
  border:1px solid rgba(204,153,0,.28)
}
.offer-anchor-bonus .bonus-tag{
  font-family:var(--fb);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:10px
}
.offer-anchor-total{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;
  margin-top:20px;padding-top:18px;border-top:2px solid var(--line)
}
.offer-anchor-total-lab{font-family:var(--fb);font-weight:700;font-size:1rem;color:var(--ink)}
.offer-anchor-total-val{
  position:relative;display:inline-block;
  font-family:var(--fd);font-weight:700;font-size:clamp(1.4rem,3vw,1.8rem);color:var(--ink);
  white-space:nowrap
}
.offer-anchor-total-val::after{
  content:"";position:absolute;left:-4%;top:50%;width:108%;height:3px;
  background:#E03B3B;border-radius:2px;
  transform:translateY(-50%) rotate(-8deg);pointer-events:none
}
@media(max-width:480px){
  .offer-anchor-total{flex-direction:column;align-items:center;gap:6px;text-align:center}
  .offer-anchor-total-val{font-size:2rem}
  .offer-anchor-total-val::after{height:4px}
}
/* Preço com desconto + CTA, fechando a ancoragem.
   Card branco de propósito: o box de bônus logo acima já é dourado,
   então o bloco de ação precisa de outro peso pra não virar mais do mesmo. */
.offer-anchor-deal{
  margin-top:22px;padding:clamp(20px,3vw,26px);border-radius:var(--r);
  background:#FFFFFF;border:1px solid rgba(204,153,0,.34);
  box-shadow:0 18px 42px -26px rgba(24,20,14,.4);
  text-align:center
}
.offer-anchor-deal-lab{
  display:block;
  font-family:var(--fb);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:12px
}
.offer-anchor-deal-inst{font-family:var(--fb);font-size:.95rem;color:var(--ink-soft)}
.offer-anchor-deal-now{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,2.8rem);line-height:1.04;letter-spacing:-.03em;
  color:var(--ink);margin:2px 0 7px
}
.offer-anchor-deal-cash{font-family:var(--fb);font-size:1rem;color:var(--ink-soft)}
.offer-anchor-deal-cash b{font-weight:700;color:var(--ink)}
.offer-anchor-deal .btn{margin-top:20px;width:100%;justify-content:center}
.offer-anchor-deal-micro{margin-top:12px;font-size:.84rem;color:var(--mut)}
.offer-anchor-mockup{display:grid;place-items:center;padding:clamp(8px,2vw,24px) 0}
.offer-anchor-mockup-img{
  width:100%;height:auto;display:block
}

/* ═══ Display Cards (stack) — dobra 8, substitui mockup ═══ */
.display-cards-wrap{
  position:relative;min-height:clamp(420px,46vw,520px);
  display:grid;place-items:center;padding:clamp(24px,4vw,48px) 0 clamp(16px,2vw,24px)
}
.display-cards{
  display:grid;grid-template-areas:'stack';place-items:center;
  width:min(100%,22rem);min-height:clamp(340px,38vw,400px);
  opacity:1;animation:displayCardsIn .7s ease both;
  overflow:visible
}
@keyframes displayCardsIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.display-card{
  grid-area:stack;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  width:22rem;max-width:100%;min-height:9rem;
  padding:14px 16px;border-radius:14px;border:2px solid rgba(19,32,46,.1);
  background:rgba(251,249,244,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transform:skewY(-8deg);transform-origin:center;
  box-shadow:0 18px 40px rgba(19,32,46,.12);
  transition:transform .7s cubic-bezier(.16,1,.3,1),border-color .45s ease,background .45s ease,filter .7s ease,box-shadow .45s ease;
  cursor:default;overflow:hidden
}
.display-card::after{
  content:'';position:absolute;top:-5%;right:-4px;width:20rem;height:110%;
  background:linear-gradient(to left,var(--bg),transparent);
  pointer-events:none
}
.display-card-head{display:flex;align-items:center;gap:10px}
.display-card-ic{
  display:grid;place-items:center;width:28px;height:28px;border-radius:999px;
  background:#13202e;color:#4FA8FF;flex-shrink:0
}
.display-card-ic svg{width:14px;height:14px}
.display-card-title{
  font-family:var(--fd);font-weight:700;font-size:1.05rem;line-height:1.2;
  color:#4FA8FF;margin:0
}
.display-card-desc{
  font-family:var(--fb);font-size:.92rem;line-height:1.35;color:var(--ink);
  margin:10px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.display-card-meta{
  font-size:.78rem;color:var(--mut);margin:6px 0 0;font-family:var(--fm)
}
.display-card--1{z-index:1;filter:grayscale(1);transform:skewY(-8deg)}
.display-card--2{z-index:2;transform:skewY(-8deg) translate(2.5rem,2.2rem);filter:grayscale(1)}
.display-card--3{z-index:3;transform:skewY(-8deg) translate(5rem,4.4rem);filter:grayscale(1)}
.display-card--4{z-index:4;transform:skewY(-8deg) translate(7.5rem,6.6rem);filter:grayscale(1)}
.display-card--5{z-index:5;transform:skewY(-8deg) translate(10rem,8.8rem);
  background:linear-gradient(145deg,#fff8f0,#fff);border-color:rgba(252,113,72,.35)}
.display-card--5 .display-card-title{color:#FC7148}
.display-card--5 .display-card-ic{background:rgba(252,113,72,.15);color:#FC7148}
.display-card:hover{z-index:10;filter:grayscale(0);box-shadow:0 28px 56px rgba(19,32,46,.2)}
.display-card--1:hover{transform:skewY(-8deg) translateY(-5rem);border-color:rgba(19,32,46,.2)}
.display-card--2:hover{transform:skewY(-8deg) translate(2.5rem,-2.2rem);border-color:rgba(19,32,46,.2)}
.display-card--3:hover{transform:skewY(-8deg) translate(5rem,0rem);border-color:rgba(19,32,46,.2)}
.display-card--4:hover{transform:skewY(-8deg) translate(7.5rem,2.2rem);border-color:rgba(19,32,46,.2)}
.display-card--5:hover{transform:skewY(-8deg) translate(10rem,4.4rem);border-color:rgba(252,113,72,.5);box-shadow:0 28px 56px rgba(252,113,72,.28)}
@media(max-width:880px){
  .offer-anchor{grid-template-columns:1fr}
  .offer-anchor-mockup{order:-1}
  .display-cards-wrap{min-height:360px;margin-top:8px;overflow:visible;justify-items:center;padding-top:32px}
  .display-cards{transform:scale(.88);transform-origin:center top}
}
@media(max-width:520px){
  .display-cards{transform:scale(.78)}
  .display-card-desc{white-space:normal;font-size:.85rem}
}
@media(prefers-reduced-motion:reduce){
  .display-cards{animation:none}
  .display-card{transition:none}
}

.offer-mockup{position:relative;display:grid;place-items:center}
.offer-mockup-img{width:100%;height:auto;display:block}
@media(max-width:880px){
  .offer-mockup{margin-top:8px}
}

/* ═══ DOBRA 9 / 12 — Preço + CTA (formato PDF) ═══ */
section[data-screen-label="Oferta"],
section[data-screen-label="Oferta final"]{background:#06060A !important}
.offer-checkout{
  max-width:520px;margin:clamp(36px,5vw,52px) auto 0;
  background:#F7F2EF;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 34px 70px rgba(0,0,0,.35);overflow:hidden;text-align:center
}
.offer-checkout .offer-mockup{padding:clamp(24px,4vw,32px) clamp(20px,4vw,28px) 0;margin:0}
.offer-checkout .offer-mockup-img{max-width:340px;margin:0 auto}
.offer-checkout-price{padding:clamp(24px,4vw,32px) clamp(24px,4vw,36px) 0}
.offer-checkout-price .was{
  font-family:var(--fb);font-size:1.05rem;color:var(--mut);text-decoration:line-through;margin-bottom:4px
}
.offer-checkout-price .now{
  font-family:var(--fd);font-weight:700;font-size:clamp(3.2rem,8vw,4.4rem);
  color:var(--ink);line-height:1;letter-spacing:-.04em
}
.offer-checkout-price .inst{
  font-family:var(--fb);font-size:.92rem;color:var(--ink-soft);margin-top:10px
}
.offer-checkout-actions{padding:clamp(22px,3vw,28px) clamp(24px,4vw,36px) clamp(28px,4vw,36px)}
.offer-checkout-actions .btn-block{max-width:100%;justify-content:center}
.offer-checkout-micro{
  margin-top:14px;font-size:.84rem;color:var(--mut);letter-spacing:.01em
}

/* ═══ CONTEXTO META — split: argumento à esquerda, a conta e o rastreio à direita ═══ */
#contexto-meta .sec-head .dek{color:var(--mut)}
/* layout empilhado e centralizado: título, subtítulo e imagem em coluna única */
.ctm{display:flex;flex-direction:column;align-items:center}
.ctm-head{text-align:center;max-width:none;margin:0 auto}
.ctm-head h2{max-width:34ch;margin-left:auto;margin-right:auto}
.ctm-head .dek{margin:16px auto 0;max-width:52ch}
.ctm-punch{
  max-width:56ch;margin:clamp(32px,4.5vw,50px) auto 0;text-align:center;
  font-family:var(--fd);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.5;
  color:var(--ink-soft)
}
#contexto-meta .ctm-punch strong{color:var(--gold-d);font-weight:700}
/* recorte Folha de S.Paulo: moldura sutil e cantos arredondados */
.ctm-shot{margin:clamp(28px,4vw,44px) auto 0;width:100%;max-width:820px}
.ctm-shot img{display:block;width:100%;height:auto;
  border-radius:16px;
  border:1px solid rgba(19,32,46,.08);
  box-shadow:0 1px 2px rgba(19,32,46,.04),0 20px 44px -22px rgba(19,32,46,.22)}
@media(max-width:1000px){
  .ctm-shot{margin:clamp(18px,3vw,28px) auto 0;max-width:420px}
}
/* recortes de jornal empilhados em colagem */
.ctm-clips{display:flex;flex-direction:column}
.ctm-clips .clip-card{--tilt:-1.2deg;align-self:center}
.clip-card{
  position:relative;margin:0;width:100%;max-width:580px;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.55)) drop-shadow(0 0 46px rgba(242,233,213,.09));
  opacity:0;transform:rotate(var(--tilt)) translateY(16px);
  transition:opacity .6s var(--ezs),transform .6s var(--ezs)
}
.ctm-clips.in .clip-card{opacity:1;transform:rotate(var(--tilt))}
/* papel envelhecido com borda rasgada */
.clip-paper{
  clip-path:polygon(0% 1.2%,6% 0%,13% 1.6%,22% .3%,30% 1.9%,39% .5%,49% 1.7%,58% .2%,67% 1.8%,76% .4%,85% 1.5%,93% .3%,100% 1.4%,99.1% 8%,100% 16%,98.9% 26%,99.8% 37%,99% 48%,99.9% 59%,99% 70%,99.8% 80%,98.9% 90%,99.6% 97%,94% 100%,86% 98.6%,77% 99.8%,68% 98.4%,58% 99.9%,48% 98.5%,38% 99.8%,29% 98.4%,20% 99.7%,12% 98.5%,5% 99.8%,0% 98.6%,1% 91%,.2% 82%,1.1% 72%,.1% 61%,1% 50%,.2% 40%,1.2% 29%,.2% 19%,1% 9%);
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.55),transparent 55%),
    radial-gradient(150% 120% at 100% 100%,rgba(122,90,28,.16),transparent 55%),
    repeating-linear-gradient(104deg,rgba(120,90,40,.035) 0 2px,transparent 2px 5px),
    #F2E9D5;
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px) clamp(24px,2.8vw,32px);
  display:flex;flex-direction:column;gap:13px;color:#22201B
}
/* fita adesiva */
.clip-tape{
  position:absolute;z-index:2;top:-11px;left:50%;width:86px;height:24px;
  transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(rgba(248,244,230,.82),rgba(236,229,208,.72));
  border-left:1px dashed rgba(120,110,86,.4);border-right:1px dashed rgba(120,110,86,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.25)
}
/* masthead: fio grosso + nome do veículo + linha de data */
.clip-mast{display:flex;flex-direction:column;gap:6px}
.clip-src{
  font-family:var(--fs);font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;color:#22201B;line-height:1;
  border-top:2.5px solid #22201B;border-bottom:1px solid rgba(34,32,27,.75);
  padding:8px 0 7px
}
.clip-dateline{
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--fm);font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#6b6350;border-bottom:1px solid rgba(34,32,27,.28);padding-bottom:7px
}
.clip-headline{
  font-family:var(--fs);font-weight:400;font-size:clamp(1.4rem,2vw,1.7rem);
  line-height:1.18;letter-spacing:-.005em;color:#181613
}
/* marca-texto sobre o trecho chave */
.clip-hl{
  background:linear-gradient(180deg,transparent 14%,rgba(255,214,74,.85) 14% 90%,transparent 90%);
  color:inherit;padding:0 3px;margin:0 -1px;box-decoration-break:clone;-webkit-box-decoration-break:clone
}
.clip-lede{font-size:.92rem;line-height:1.55;color:#4a4636;border-top:1px dotted rgba(34,32,27,.3);padding-top:10px}
/* box de infográfico impresso: a conta do imposto */
.clip-figurebox{
  border:1.5px solid #22201B;outline:1px solid rgba(34,32,27,.35);outline-offset:3px;
  padding:16px 16px 14px;margin:4px 2px 2px;display:flex;flex-direction:column;gap:3px;text-align:center
}
.clip-figurebox-lab{font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6b6350;margin-bottom:6px}
.clip-stat-was{font-family:var(--fs);font-size:1rem;color:#6b6350;text-decoration:line-through}
.clip-stat-now{font-family:var(--fs);font-size:clamp(2.4rem,3.6vw,3rem);line-height:1.05;color:#8a2f10}
.clip-stat-lab{font-size:.9rem;color:#54503f}
@media(max-width:980px){
  .ctm{grid-template-columns:1fr;gap:28px}
  .ctm-head{text-align:center}
  .ctm-head .dek{margin:16px auto 0}
}
@media(prefers-reduced-motion:reduce){
  .clip-card{opacity:1;transform:rotate(var(--tilt));transition:none}
}

/* ═══ DADO QUEBRADO — vozes da cabeça: a confusão antes da auditoria ═══ */
:root{--ezs:cubic-bezier(.23,1,.32,1)}
/* palco mental: fragmentos tortos espalhados, sem tela */
/* dobra 2 (dashboard engana + contexto Meta) num fundo bege contínuo,
   igual ao fundo embutido na imagem do dashboard (#FBF9F7). O dot grid é
   removido nesta seção para o fundo ficar liso igual à imagem e o retângulo
   ao redor dela não aparecer. */
#limite-planilha,
#dado-quebrado,
#contexto-meta{background:#FEFCFB}
#limite-planilha::before,
#dado-quebrado::before,
#contexto-meta::before{display:none}

/* ═══ LIMITE DA PLANILHA — texto + print da cota da API do Sheets ═══ */
/* as 3 seções claras (dashboard, limite, meta) formam um bloco contínuo,
   com respiro moderado entre elas */
#limite-planilha{padding:clamp(40px,5vw,68px) 0}
#dado-quebrado{padding-bottom:clamp(44px,5.5vw,76px)}
#contexto-meta{padding-top:clamp(44px,5.5vw,76px)}
/* painel preto que envolve só o conteúdo (não vaza até as bordas da tela) */
.lpl-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,68px);align-items:center;
  background:#0A0C14;border-radius:clamp(20px,2.4vw,30px);
  padding:clamp(32px,5vw,64px) clamp(28px,5vw,68px);
  box-shadow:0 30px 70px -34px rgba(10,12,20,.5)}
.lpl-head{text-align:left}
.lpl-head h2{color:var(--white)}
.lpl-head .dek{margin:16px 0 0;max-width:48ch;color:#9aa0b0}
.lpl-shot{margin:0;align-self:center;width:100%;max-width:390px;justify-self:center}
.lpl-shot img{display:block;width:100%;height:auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 26px 54px -22px rgba(0,0,0,.6)}
@media(max-width:1000px){
  .lpl-grid{grid-template-columns:1fr;gap:8px;
    padding:clamp(28px,6vw,44px) clamp(22px,5vw,32px)}
  .lpl-head{text-align:center;margin-left:auto;margin-right:auto}
  .lpl-head .dek{margin:16px auto 0}
  .lpl-shot{margin:clamp(18px,3vw,28px) auto 0;max-width:420px}
}
.dbq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(20px,3vw,44px);align-items:center}
.dbq-head{text-align:left}
.dbq-head .dek{margin:16px 0 0;max-width:44ch}
/* prova visual: 3 fontes de dado desalinhadas (Meta vs planilha vs dash) */
/* imagem maior: mais peso na coluna via grid; a figura ocupa 100% sem vazar */
.dbq-shot{margin:0;width:100%}
/* sem drop-shadow: a imagem tem fundo opaco, então a sombra contornaria o
   retângulo inteiro e criaria uma moldura escura. Os cards da imagem já têm
   sombra própria embutida. */
.dbq-shot img{display:block;width:100%;height:auto}
.dbq-shot-cap{margin:18px auto 0;max-width:46ch;text-align:center;
  font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.dbq-shot-cap b{color:var(--copper);font-weight:700}
@media(max-width:1000px){
  /* versão mobile é retrato (941x1672): largura menor para não ficar alta demais */
  .dbq-shot{width:100%;max-width:400px;margin:clamp(18px,3vw,28px) auto 0}
}
.dbq-mind{position:relative;height:clamp(360px,30vw,430px);margin:0}
.dbq-q{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-54%) rotate(10deg);
  font-family:var(--fs);font-style:italic;font-size:clamp(11rem,22vw,17rem);line-height:1;
  color:rgba(19,32,46,.05);pointer-events:none;user-select:none;
  opacity:0;transition:opacity .8s ease .15s
}
.dbq-mind.in .dbq-q{opacity:1}
.dbq-q--2{left:84%;top:18%;transform:translate(-50%,-50%) rotate(-14deg);font-size:clamp(5rem,9vw,7.5rem);color:rgba(19,32,46,.045);transition-delay:.35s}
.dbq-q--3{left:11%;top:76%;transform:translate(-50%,-50%) rotate(-8deg);font-size:clamp(6rem,11vw,9rem);color:rgba(19,32,46,.04);transition-delay:.5s}
.dbq-q--4{left:15%;top:16%;transform:translate(-50%,-50%) rotate(16deg);font-size:clamp(4rem,7vw,5.5rem);color:rgba(19,32,46,.045);transition-delay:.65s}
.vz{
  position:absolute;margin:0;
  opacity:0;transform:rotate(var(--r,0deg)) scale(.85) translateY(8px);
  transition:opacity .5s var(--ezs),transform .5s var(--ezs)
}
.dbq-mind.in .vz{opacity:1;transform:rotate(var(--r,0deg))}
.vz-serif{font-family:var(--fs);font-style:italic;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.3;color:var(--copper);max-width:250px}
.vz-ink{font-family:var(--fd);font-weight:700;font-size:clamp(1rem,1.7vw,1.3rem);letter-spacing:-.01em;line-height:1.35;color:var(--ink);max-width:280px}
.vz:nth-of-type(1){left:2%;top:3%;--r:-4deg;max-width:260px}
.vz:nth-of-type(2){right:3%;top:10%;--r:2deg;text-align:right}
.vz:nth-of-type(3){right:0;top:33%;--r:-2.5deg;text-align:right;max-width:300px}
.vz:nth-of-type(4){left:3%;top:38%;--r:2.5deg;max-width:270px}
.vz:nth-of-type(5){left:8%;top:68%;--r:3deg;max-width:280px}
.vz:nth-of-type(6){right:4%;top:72%;--r:-2deg;text-align:right;max-width:250px}
.dbq-mind.in .vz:nth-of-type(1){transition-delay:.1s}
.dbq-mind.in .vz:nth-of-type(2){transition-delay:.3s}
.dbq-mind.in .vz:nth-of-type(3){transition-delay:.5s}
.dbq-mind.in .vz:nth-of-type(4){transition-delay:.7s}
.dbq-mind.in .vz:nth-of-type(5){transition-delay:.9s}
.dbq-mind.in .vz:nth-of-type(6){transition-delay:1.1s}
.dbq-close{max-width:56ch;margin:clamp(34px,4.5vw,50px) auto 0;text-align:center;font-size:1.05rem;line-height:1.7;color:var(--ink-soft)}
.dbq-close strong{color:var(--copper)}
@media(max-width:1000px){
  .dbq-grid{grid-template-columns:1fr;gap:10px}
  .dbq-head{text-align:center;margin-left:auto;margin-right:auto}
  .dbq-head .dek{margin:16px auto 0}
  .dbq-mind{max-width:880px;height:clamp(300px,34vw,360px);margin:clamp(18px,3vw,32px) auto 0}
}
@media(max-width:760px){
  .dbq-mind{height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:8px 0 4px}
  .vz{position:static}
  .vz:nth-of-type(2),.vz:nth-of-type(3){text-align:left}
  .vz:nth-of-type(2n){align-self:flex-end;text-align:right}
  .vz:nth-of-type(5){align-self:center}
  .dbq-q{font-size:13rem}
  .dbq-q--2{font-size:5.5rem}
  .dbq-q--3{font-size:7rem}
  .dbq-q--4{font-size:4.5rem}
}
@media(prefers-reduced-motion:reduce){
  .dbq-q,.vz{opacity:1;transition:none}
  .vz{transform:rotate(var(--r,0deg))}
}

/* ═══ RÉGUA + PIPELINE — um bloco dark contínuo com bolinhas amarelas ═══ */
#regua{
  background:#06060A;
  position:relative;
  overflow:hidden
}
#regua::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(204,153,0,.12) 1.2px,transparent 1.2px);
  background-size:30px 30px;
  background-position:center top
}
#regua > .wrap{position:relative;z-index:1}
#regua .sec-head .dek{color:var(--mut-d)}
.pipe-block{
  margin-top:clamp(80px,10vw,132px)
}
/* eyebrow que ancora a autoridade da THE no nível 4 */
.pipe-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fm);font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);
  padding:8px 15px;border-radius:999px;margin:0 auto 18px;
  background:rgba(255,195,15,.06);border:1px solid rgba(255,195,15,.22)
}
.pipe-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 10px var(--gold-bright)
}
#regua .pipe-block .sec-head h2,
#regua .pipe-block .sec-head h3{
  font-size:clamp(1.7rem,3.4vw,2.35rem);
  font-weight:700;letter-spacing:-.025em
}
.pipe-intro{max-width:58ch;margin:14px auto 0;text-align:center;
  font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6;color:#B9BECB}
.pipe-intro strong{color:var(--white);font-weight:600}

/* Pipeline: esteira conectada por uma linha dourada que se preenche no scroll */
.pipe-board{
  margin:clamp(50px,6vw,72px) auto 0;max-width:1180px;position:relative
}
.pipe-rail{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);align-items:stretch;position:relative
}
/* trilho base + trilho dourado que preenche (o dado fluindo) */
.pipe-rail::before,
.pipe-rail::after{
  content:"";position:absolute;top:26px;left:12.5%;right:12.5%;height:2px;border-radius:2px;z-index:0
}
.pipe-rail::before{background:rgba(217,200,183,.14)}
.pipe-rail::after{
  background:linear-gradient(90deg,rgba(255,195,15,.5),rgba(255,195,15,.92));
  box-shadow:0 0 18px rgba(255,195,15,.35);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1) .15s
}
.pipe-board.in .pipe-rail::after{transform:scaleX(1)}
.pipe-step{position:relative;display:flex;flex-direction:column;padding-top:66px}
/* nó numerado sobre o trilho */
.pipe-node{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;z-index:2;
  background:radial-gradient(circle at 50% 34%,#1b1e30,#0a0c15);
  border:1.5px solid rgba(255,195,15,.4);
  box-shadow:0 0 0 6px #06060A,0 0 22px rgba(255,195,15,.2)
}
.pipe-node-n{font-family:var(--fd);font-weight:800;font-size:1.12rem;
  color:var(--gold-soft);letter-spacing:-.02em}
.pipe-card{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:28px 24px 26px;border-radius:18px;overflow:hidden;
  background:#fff;
  border:1px solid rgba(19,32,46,.07);
  box-shadow:0 1px 2px rgba(0,0,0,.16),0 26px 52px -30px rgba(0,0,0,.72)
}
/* barra de acento no topo do card */
.pipe-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--gold-bright),#FC7148)
}
.pipe-ic{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(255,195,15,.12);
  border:1px solid rgba(255,195,15,.32)
}
.pipe-ic svg{width:23px;height:23px;stroke:#B8860B;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#regua .pipe-card h4{font-family:var(--fd);font-weight:700;
  font-size:clamp(1.12rem,1.55vw,1.32rem);line-height:1.22;letter-spacing:-.02em;
  color:#13202E;margin:0 0 12px}
#regua .pipe-step--goal .pipe-card h4{color:#1A1408}
.pipe-card p{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:0}
.pipe-card p strong{color:var(--ink);font-weight:600}
/* passo 04 = o nível da THE, em âmbar suave com glow contido */
.pipe-step--goal .pipe-node{
  border-color:rgba(255,195,15,.7);
  background:radial-gradient(circle at 50% 34%,#3a3016,#140f06);
  box-shadow:0 0 0 6px #06060A,0 0 14px rgba(255,195,15,.26)
}
.pipe-step--goal .pipe-node-n{color:var(--gold-bright)}
.pipe-step--goal .pipe-card{
  border-color:rgba(255,195,15,.55);
  background:linear-gradient(168deg,#FFF6E1,#FFFDF6);
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 26px 52px -30px rgba(180,130,0,.42)
}
.pipe-step--goal .pipe-ic{
  background:linear-gradient(145deg,rgba(255,195,15,.3),rgba(252,113,72,.14));
  border-color:rgba(255,195,15,.5)
}
@media(hover:hover) and (pointer:fine){
  .pipe-card{transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .35s ease}
  .pipe-step:hover .pipe-card{transform:translateY(-6px);border-color:rgba(255,195,15,.3)}
  .pipe-step--goal:hover .pipe-card{border-color:rgba(255,195,15,.55)}
}
.pipe-close{max-width:56ch;margin:clamp(32px,4.2vw,46px) auto 0;text-align:center;
  font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.55;color:#D9C8B7}
.pipe-close strong{color:var(--white);font-weight:700}
.pipe-close .em-gold{color:var(--gold-bright);font-weight:700;
  background:none;-webkit-background-clip:unset;background-clip:unset}
@media(prefers-reduced-motion:reduce){
  .pipe-rail::after{transition:none;transform:scaleX(1)}
}
@media(max-width:960px){
  .pipe-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}
  .pipe-rail::before,.pipe-rail::after{display:none}
  .pipe-step{padding-top:32px}
  .pipe-node{width:48px;height:48px}
}
@media(max-width:520px){
  .pipe-rail{grid-template-columns:1fr;max-width:420px;margin:0 auto}
}

/* ═══ RÉGUA DE CONSCIÊNCIA — escada editorial (nível 4 = âncora) ═══ */
.rgc{max-width:1180px;margin:clamp(40px,5.5vw,64px) auto 0}
.rgc-track{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);align-items:end}
.rgc-st{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.23,1,.32,1),transform .55s cubic-bezier(.23,1,.32,1)
}
.rgc.in .rgc-st{opacity:1;transform:none}
.rgc.in .rgc-st:nth-child(1){transition-delay:.04s}
.rgc.in .rgc-st:nth-child(2){transition-delay:.1s}
.rgc.in .rgc-st:nth-child(3){transition-delay:.16s}
.rgc.in .rgc-st:nth-child(4){transition-delay:.22s}
/* estação: tipografia no fundo — sem caixa nos níveis 1–3 */
.rgc-card{position:relative;padding:0 4px 20px;border-bottom:1px solid rgba(217,200,183,.12)}
.rgc-card::before{
  content:attr(data-n);display:block;
  font-family:var(--fd);font-weight:800;
  font-size:clamp(40px,4vw,56px);line-height:.92;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(217,200,183,.22);
  margin-bottom:12px
}
.rgc-card h3{
  font-family:var(--fd);font-weight:650;font-size:1.12rem;letter-spacing:-.018em;
  color:rgba(241,228,212,.88);margin:0 0 8px;line-height:1.3;text-wrap:balance
}
.rgc-card p{color:rgba(185,190,203,.78);font-size:.9rem;line-height:1.62;margin:0;max-width:36ch}
.rgc-st--goal .rgc-card{
  border-bottom:0;border:1px solid rgba(255,195,15,.45);border-radius:14px;
  padding:16px 16px 18px;background:#fff;
  box-shadow:
    0 0 0 1px rgba(255,195,15,.12),
    0 10px 28px -14px rgba(255,195,15,.55),
    0 18px 40px -24px rgba(0,0,0,.45)
}
.rgc-st--goal .rgc-card::before{
  color:var(--gold-bright);-webkit-text-stroke:0;
  text-shadow:0 0 28px rgba(255,195,15,.4)
}
.rgc-st--goal .rgc-card h3{color:var(--ink);font-weight:700}
.rgc-st--goal .rgc-card p{color:var(--ink-soft)}
/* badge: pill dourado (mesmo do amarelo), agora sobre card branco */
.rgc-badge{
  display:inline-flex;align-items:center;margin:0 0 12px;
  font-family:var(--fm);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#141005;
  background:var(--gold-bright);border-radius:100px;padding:5px 12px;
  box-shadow:0 6px 18px rgba(255,195,15,.35)
}
.rgc-stem{
  width:1.5px;margin:0 auto;height:var(--stem);
  background:linear-gradient(to top,rgba(217,200,183,.28),rgba(217,200,183,.04));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .65s cubic-bezier(.23,1,.32,1)
}
.rgc-st:nth-child(1){--stem:20px}
.rgc-st:nth-child(2){--stem:52px}
.rgc-st:nth-child(3){--stem:84px}
.rgc-st:nth-child(4){--stem:116px}
.rgc.in .rgc-st:nth-child(1) .rgc-stem{transform:scaleY(1);transition-delay:.28s}
.rgc.in .rgc-st:nth-child(2) .rgc-stem{transform:scaleY(1);transition-delay:.36s}
.rgc.in .rgc-st:nth-child(3) .rgc-stem{transform:scaleY(1);transition-delay:.44s}
.rgc.in .rgc-st:nth-child(4) .rgc-stem{transform:scaleY(1);transition-delay:.52s}
.rgc-st--goal .rgc-stem{background:linear-gradient(to top,rgba(255,195,15,.7),rgba(255,195,15,.1))}
.rgc-pin{
  position:relative;z-index:2;width:36px;height:36px;border-radius:50%;
  margin:0 auto;transform:translateY(50%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fm);font-weight:700;font-size:.82rem;letter-spacing:.02em;
  background:#0A0C14;border:1px solid rgba(217,200,183,.32);color:rgba(217,200,183,.7)
}
.rgc-st--goal .rgc-pin{
  background:var(--gold-bright);border-color:var(--gold-bright);color:#141005;
  box-shadow:0 0 0 4px #06060A,0 0 20px rgba(255,195,15,.35)
}
.rgc-ruler{
  position:relative;height:40px;
  background:
    repeating-linear-gradient(to right,rgba(217,200,183,.16) 0 1px,transparent 1px 10px) left top/100% 11px no-repeat,
    repeating-linear-gradient(to right,rgba(217,200,183,.28) 0 1px,transparent 1px 50px) left top/100% 20px no-repeat
}
.rgc-ruler::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1.5px;
  background:rgba(217,200,183,.14)
}
.rgc-ruler::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,rgba(194,68,18,.45),var(--gold-bright));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.05s cubic-bezier(.23,1,.32,1) .35s
}
.rgc.in .rgc-ruler::after{transform:scaleX(1)}
.rgc-cta{text-align:center;margin-top:clamp(30px,4vw,44px)}
.rgc-reassure{max-width:46ch;margin:0 auto clamp(18px,2.4vw,26px);color:var(--mut-d);font-size:.98rem;line-height:1.6}

/* mobile: linha 1→4 (centro a centro) + card final off-white */
@media(max-width:960px){
  .rgc{margin-top:clamp(32px,7vw,48px)}
  .rgc-track{
    grid-template-columns:1fr;gap:0;position:relative;
    padding:4px 0 8px;max-width:440px;margin:0 auto
  }
  .rgc-track::before,.rgc-track::after{display:none}
  .rgc-st{
    display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-areas:"pin card";
    column-gap:18px;align-items:start;padding:0 0 36px
  }
  .rgc-st:last-child{padding-bottom:0}
  .rgc-st:not(:last-child)::after{
    content:"";position:absolute;left:15.25px;top:16px;bottom:-16px;width:1.5px;z-index:0;
    background:linear-gradient(to bottom,rgba(194,68,18,.45),var(--gold-bright));
    transform:scaleY(0);transform-origin:top;
    transition:transform 1.05s cubic-bezier(.23,1,.32,1)
  }
  .rgc.in .rgc-st:nth-child(1)::after{transform:scaleY(1);transition-delay:.28s}
  .rgc.in .rgc-st:nth-child(2)::after{transform:scaleY(1);transition-delay:.4s}
  .rgc.in .rgc-st:nth-child(3)::after{transform:scaleY(1);transition-delay:.52s}
  .rgc-card{
    grid-area:card;padding:2px 0 0;border-bottom:0
  }
  .rgc-card::before{display:none}
  .rgc-card h3{
    font-size:1.05rem;line-height:1.32;margin:0 0 8px;font-weight:600;
    color:rgba(241,228,212,.82)
  }
  .rgc-card p{
    font-size:.92rem;line-height:1.65;
    color:rgba(198,210,222,.82);max-width:none
  }
  .rgc-pin{
    grid-area:pin;width:32px;height:32px;transform:none;margin:0;
    font-size:.76rem;z-index:2;
    background:#06060A;
    border:1.5px solid rgba(217,200,183,.34);
    color:rgba(241,228,212,.75);
    box-shadow:0 0 0 5px #06060A
  }
  .rgc-st--goal .rgc-pin{
    margin-top:0;
    box-shadow:0 0 0 5px #06060A,0 0 18px rgba(255,195,15,.28)
  }
  .rgc-st--goal .rgc-card{
    margin-left:0;padding:16px 14px 18px;border-radius:14px;
    border:1px solid rgba(255,195,15,.5);
    background:#fff;
    box-shadow:
      0 0 0 1px rgba(255,195,15,.14),
      0 10px 26px -12px rgba(255,195,15,.5),
      0 16px 34px -20px rgba(0,0,0,.4)
  }
  .rgc-st--goal .rgc-card h3{color:var(--ink);font-weight:700;margin-bottom:8px}
  .rgc-st--goal .rgc-card p{color:var(--ink-soft)}
  .rgc-badge{
    display:inline-flex;margin:0 0 10px;
    font-size:.56rem;letter-spacing:.12em;line-height:1.25;
    color:#141005;background:var(--gold-bright);
    border-radius:100px;padding:5px 11px;
    box-shadow:0 6px 16px rgba(255,195,15,.35);
    white-space:normal;max-width:100%
  }
  .rgc-stem,.rgc-ruler{display:none}
}
@media(prefers-reduced-motion:reduce){
  .rgc-st{opacity:1;transform:none;transition:none}
  .rgc-stem{transform:scaleY(1);transition:none}
  .rgc-ruler::after{transform:scaleX(1);transition:none}
  .rgc-st:not(:last-child)::after{transform:scaleY(1);transition:none}
}

/* ═══ MERCADO — escassez + valorização + faixa do nicho ═══ */
.mkt-pivot{text-align:center;margin-top:clamp(48px,6.5vw,76px)}
.mkt-pivot::before{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-bright));margin:0 auto 20px
}
.mkt-pivot h3{font-family:var(--fd);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.4rem);letter-spacing:-.02em;color:var(--ink)}
.mkt-pivot p{margin:12px auto 0;color:var(--mut);max-width:52ch;line-height:1.7}
/* ═══ DOBRA 6 · os caminhos do gestor (explicação lógica / eliminação de alternativas) ═══ */
#caminhos{background:var(--bg);overflow:visible}
#caminhos.lx-sect{ background:var(--bg) }
#caminhos .lx-wrap{ overflow:visible }
#caminhos .cam-grid{ padding-top:14px }
.cam-intro{max-width:56ch;margin:14px auto 0;text-align:center;
  font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6;color:var(--ink-soft)}
.cam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin:clamp(40px,5vw,56px) auto 0;max-width:1100px;align-items:stretch}
.cam-card{position:relative;background:#fff;border:1px solid rgba(19,32,46,.08);
  border-radius:22px;padding:32px 30px 30px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(19,32,46,.03),0 18px 40px -26px rgba(19,32,46,.2)}
.cam-card--bad{background:#fff}
.cam-card--good{background:linear-gradient(180deg,#FFFDF7,#fff);
  border-color:rgba(255,195,15,.5);
  box-shadow:0 1px 2px rgba(19,32,46,.04),0 24px 50px -22px rgba(204,153,0,.36)}
/* topo do card: número grande + marcador circular */
.cam-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cam-num{font-family:var(--fd);font-weight:700;font-size:2.6rem;line-height:1;
  letter-spacing:-.03em;color:rgba(19,32,46,.14)}
.cam-card--good .cam-num{background:linear-gradient(160deg,var(--gold-bright),#FC7148);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
.cam-mk{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.cam-mk svg{width:20px;height:20px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cam-card--bad .cam-mk{background:rgba(252,113,72,.1);border:1px solid rgba(252,113,72,.24)}
.cam-card--bad .cam-mk svg{stroke:#D8552A}
.cam-card--good .cam-mk{background:rgba(88,212,23,.14);border:1px solid rgba(88,212,23,.34)}
.cam-card--good .cam-mk svg{stroke:#3E9A1A}
.cam-badge{position:absolute;top:-12px;left:30px;font-family:var(--fd);font-size:.72rem;letter-spacing:.01em;
  font-weight:700;padding:5px 14px;border-radius:999px;
  box-shadow:0 6px 16px -6px rgba(204,153,0,.5)}
.cam-card--good .cam-badge{background:linear-gradient(100deg,var(--gold-bright),#FC7148);color:#241900}
.cam-card h3{font-family:var(--fd);font-weight:700;font-size:clamp(1.18rem,1.8vw,1.4rem);
  line-height:1.22;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
.cam-card h3 .em-gold{background:linear-gradient(100deg,var(--gold-bright),#FC7148);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cam-card p{font-size:.96rem;line-height:1.62;color:var(--ink-soft);margin:0 0 18px}
/* conclusão do card: label discreto + frase editorial (sem cara de terminal) */
.cam-out{margin-top:auto;padding-top:18px;position:relative}
.cam-out::before{content:"";position:absolute;top:0;left:0;width:40px;height:2px;border-radius:2px}
.cam-card--bad .cam-out::before{background:rgba(216,85,42,.5)}
.cam-card--good .cam-out::before{background:linear-gradient(90deg,var(--gold-bright),#FC7148)}
.cam-out-lab{display:block;font-family:var(--fd);font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:5px}
.cam-card--bad .cam-out-lab{color:#C24412}
.cam-card--good .cam-out-lab{color:#3E9A1A}
.cam-out p{font-size:.92rem;line-height:1.5;color:var(--ink);margin:0}
.cam-out b{font-weight:700}
.cam-card--bad .cam-out b{color:#C24412}
.cam-card--good .cam-out b{color:#3E9A1A}
.cam-verdict{max-width:58ch;margin:clamp(30px,4vw,42px) auto 0;text-align:center;
  font-size:clamp(1.05rem,1.6vw,1.24rem);line-height:1.55;color:var(--ink)}
.cam-verdict strong{font-weight:700}
.cam-verdict .em-gold{background:linear-gradient(100deg,var(--gold-bright),#FC7148);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
/* Desktop: cards negativos um pouco menores — o do CDI mantém o peso visual */
@media(min-width:861px){
  .cam-grid{align-items:center}
  .cam-card--bad{
    padding:26px 24px 24px;
    box-shadow:0 1px 2px rgba(19,32,46,.03),0 14px 32px -24px rgba(19,32,46,.16)
  }
  .cam-card--bad .cam-top{margin-bottom:14px}
  .cam-card--bad .cam-num{font-size:2.2rem}
  .cam-card--bad .cam-mk{width:36px;height:36px}
  .cam-card--bad .cam-mk svg{width:17px;height:17px}
  .cam-card--bad h3{font-size:clamp(1.08rem,1.55vw,1.26rem);margin-bottom:10px}
  .cam-card--bad p{font-size:.9rem;line-height:1.58;margin-bottom:14px}
  .cam-card--bad .cam-out{padding-top:14px}
  .cam-card--bad .cam-out p{font-size:.86rem}
  .cam-card--good{z-index:1}
}
@media(max-width:860px){.cam-grid{grid-template-columns:1fr;gap:22px;max-width:480px}}

.mkt-cols{max-width:740px;margin:clamp(36px,5vw,56px) auto 0}
.mkt-shot{
  max-width:740px;margin:clamp(36px,5vw,56px) auto 0;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:0 18px 40px -24px rgba(19,32,46,.18)
}
.mkt-shot img{display:block;width:100%;height:auto}
.mkt-col{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:16px}
.mkt-tag{font-family:var(--fm);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d)}
.mkt-src{font-family:var(--fm);font-size:.68rem;letter-spacing:.01em;color:var(--mut)}
.mkt-col > .mkt-src{margin-top:auto}
.mkt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mkt-list li{padding:15px 0;border-bottom:1px dashed var(--line);display:flex;flex-direction:column;gap:5px}
.mkt-list li:first-child{padding-top:0}
.mkt-list li:last-child{border-bottom:0;padding-bottom:0}
.mkt-list p{color:var(--ink);font-weight:600;line-height:1.5}
.mkt-list .is-quote p{
  font-family:var(--fs);font-style:italic;font-weight:400;
  font-size:1.22rem;line-height:1.4;color:var(--ink)
}
/* interseção rara: tráfego ∩ dado = você */
.mkt-venn{
  display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(28px,4.5vw,60px);
  align-items:center;max-width:1020px;margin:clamp(50px,7vw,84px) auto 0
}
.mkt-venn-fig svg{width:100%;height:auto;display:block}
.mvn-a{
  fill:none;stroke:rgba(19,32,46,.3);stroke-width:1.5;
  stroke-dasharray:3 8;stroke-linecap:round;
  opacity:0;transition:opacity .9s ease .1s
}
.mkt-venn.in .mvn-a{opacity:1}
.mvn-b{
  fill:none;stroke:var(--gold-d);stroke-width:1.8;
  stroke-dasharray:932;stroke-dashoffset:932;
  transition:stroke-dashoffset 1.3s var(--ezs) .35s
}
.mkt-venn.in .mvn-b{stroke-dashoffset:0}
.mvn-lens{
  stroke:rgba(204,153,0,.5);stroke-width:1.2;
  opacity:0;transition:opacity .9s ease .9s
}
.mkt-venn.in .mvn-lens{opacity:1}
.mvn-dot{fill:var(--gold-d);opacity:0;transition:opacity .5s ease 1.15s}
.mkt-venn.in .mvn-dot{opacity:1}
.mvn-txt{opacity:0;transition:opacity .7s ease}
.mkt-venn.in .mvn-txt-a{opacity:1;transition-delay:.55s}
.mkt-venn.in .mvn-txt-b{opacity:1;transition-delay:.75s}
.mkt-venn.in .mvn-txt-you{opacity:1;transition-delay:1.1s}
.mvn-t{font-family:var(--fd);font-weight:700;font-size:19px;letter-spacing:-.01em;fill:var(--ink);text-anchor:middle}
.mvn-s{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;fill:var(--mut);text-anchor:middle}
.mvn-you{font-family:var(--fd);font-weight:800;font-size:27px;letter-spacing:.02em;fill:var(--gold-d);text-anchor:middle}
.mvn-t,.mvn-s{paint-order:stroke;stroke:var(--bg);stroke-width:6px;stroke-linejoin:round}
.mvn-txt-you text{stroke:none}
.mvn-s-you{fill:var(--gold-d)}
.mkt-venn-copy h3{font-family:var(--fd);font-weight:700;font-size:clamp(1.55rem,2.8vw,2.1rem);letter-spacing:-.02em;color:var(--ink);margin-bottom:16px}
.mkt-venn-copy p{color:var(--ink-soft);line-height:1.75;font-size:1rem;margin-bottom:14px}
.mkt-venn-copy p:last-child{margin-bottom:0}
.mkt-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(30px,4vw,44px);align-items:stretch}
.mkt-cell{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,26px);display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ezs),transform .55s var(--ezs)
}
.mkt-strip.in .mkt-cell{opacity:1;transform:none}
.mkt-strip.in .mkt-cell:nth-child(1){transition-delay:.05s}
.mkt-strip.in .mkt-cell:nth-child(2){transition-delay:.13s}
.mkt-strip.in .mkt-cell:nth-child(3){transition-delay:.21s}
.mkt-cell--hot{
  background:var(--warm);border-color:rgba(204,153,0,.4);
  box-shadow:0 14px 34px rgba(204,153,0,.12)
}
.mkt-cell-num{font-family:var(--fd);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.05;letter-spacing:-.03em;color:var(--gold-d)}
.mkt-cell p{font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.mkt-cell p strong{color:var(--ink)}
.mkt-cell .mkt-src{margin-top:auto}
/* anel dos 77% */
.mkt-ring{position:relative;width:92px;aspect-ratio:1;display:grid;place-items:center;margin-bottom:6px}
.mkt-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--gold-d) 0 77%,rgba(204,153,0,.16) 77% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px))
}
.mkt-ring b{font-family:var(--fd);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--gold-d)}
.mkt-disclaimer{margin:clamp(22px,3vw,30px) auto 0;text-align:center;font-size:.8rem;color:var(--mut);max-width:60ch}
.mkt-cta{text-align:center;margin-top:clamp(26px,3.4vw,36px)}
.sec-cta{text-align:center;margin-top:clamp(28px,3.6vw,40px)}
#regua .sec-cta{margin-top:clamp(24px,3vw,34px)}
/* Teste: mercado em branco puro (em vez do creme --bg do override section.white) */
#mercado-profissao{background:var(--white)}
#mercado-profissao .mvn-t,
#mercado-profissao .mvn-s{stroke:var(--white)}
@media(max-width:900px){
  .mkt-strip{grid-template-columns:1fr}
  .mkt-cell{text-align:center}
  .mkt-cell .mkt-src{text-align:left}
  .mkt-ring{margin-left:auto;margin-right:auto}
  .mkt-venn{grid-template-columns:1fr;gap:24px}
  .mkt-venn-fig{max-width:480px;margin:0 auto}
  .mkt-venn-copy{text-align:center}
  .mvn-t{font-size:22px}
  .mvn-s{font-size:11.5px}
  .mvn-you{font-size:30px}
}
@media(max-width:480px){
  .mkt-venn-fig{max-width:none;width:calc(100% + var(--gutter) * 2);margin:0 calc(var(--gutter) * -1)}
}
@media(prefers-reduced-motion:reduce){
  .mkt-cell{opacity:1;transform:none;transition:none}
  .mvn-b{stroke-dashoffset:0;transition:none}
  .mvn-a,.mvn-txt,.mvn-lens,.mvn-dot{opacity:1;transition:none}
}

/* ═══ A TROCA — pós-oferta: US$ 29 de plugin vira R$ 30 de estrutura ═══ */
.swp{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2.6vw,26px);
  align-items:stretch;max-width:880px;margin:clamp(30px,4.5vw,46px) auto 0
}
.swp-card{
  display:flex;flex-direction:column;gap:10px;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--line-d);border-radius:var(--r);
  padding:clamp(22px,3vw,32px) clamp(20px,2.8vw,30px)
}
.swp-card--in{
  background:linear-gradient(165deg,rgba(255,195,15,.09),rgba(255,195,15,.02) 55%);
  border-color:rgba(255,195,15,.35);
  box-shadow:0 18px 50px rgba(255,195,15,.08)
}
.swp-kicker{font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sand-soft)}
.swp-card--in .swp-kicker{color:var(--gold-bright)}
.swp-price{font-family:var(--fd);font-weight:700;font-size:clamp(2.1rem,4.6vw,2.9rem);letter-spacing:-.03em;line-height:1;color:#FC7148;margin:2px 0 0}
.swp-price span{font-family:var(--fm);font-size:.42em;font-weight:600;letter-spacing:0;color:var(--sand-soft);margin-left:4px}
.swp-card--in .swp-price{color:var(--gold-bright)}
.swp-what{color:var(--sand);font-size:1rem;line-height:1.6;margin:0}
.swp-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px}
.swp-list li{position:relative;padding-left:22px;color:var(--sand);font-size:.92rem;line-height:1.5}
.swp-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green-br);font-weight:700;font-size:.8rem}
.swp-note{margin:auto 0 0;padding-top:14px;border-top:1px dashed var(--line-d);font-family:var(--fm);font-size:.68rem;line-height:1.6;color:#FC7148}
.swp-arrow{
  align-self:center;font-family:var(--fd);font-weight:700;line-height:1;
  font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--gold-bright)
}
.swp-foot{text-align:center;margin:clamp(20px,3vw,30px) auto 0;font-family:var(--fm);font-size:.64rem;letter-spacing:.04em;line-height:1.7;color:var(--sand-soft);opacity:.75;max-width:60ch}
@media(max-width:760px){
  .swp{grid-template-columns:1fr;max-width:440px}
  .swp-arrow{transform:rotate(90deg);justify-self:center;margin:-2px 0}
}

/* ── Footer legal (BM / API oficial) ── */
.foot{padding:56px 0 64px}
.foot .wrap.foot-legal{
  flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:0;text-align:center;max-width:52ch;margin-inline:auto
}
.foot-legal-brand{
  font-family:var(--fd);font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:700;
  letter-spacing:-.01em;color:var(--white);margin:0 0 18px
}
.foot-legal-nav{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 12px;margin:0 0 22px
}
.foot-legal-nav a{
  font-family:var(--fb);font-size:.88rem;font-weight:500;
  color:rgba(241,228,212,.78);text-decoration:none;transition:color .25s ease
}
.foot-legal-nav a:hover{color:var(--white)}
.foot-legal-sep{color:rgba(241,228,212,.28);font-size:.88rem;user-select:none}
.foot-legal-razao,.foot-legal-cnpj{
  font-family:var(--fb);font-size:.86rem;line-height:1.5;
  color:rgba(205,212,224,.72);margin:0
}
.foot-legal-cnpj{margin-top:4px}
.foot-legal-copy{
  font-family:var(--fb);font-size:.8rem;line-height:1.5;
  color:rgba(142,146,173,.9);margin:18px 0 0
}
.foot-legal-disc{
  font-family:var(--fb);font-size:.72rem;line-height:1.55;
  color:rgba(142,146,173,.7);margin:14px 0 0;max-width:48ch
}

/* ═══ STORIES DE CLIENTES ═══ */
#stories-clientes .wrap{display:flex;flex-direction:column;align-items:center}
#stories-clientes .sec-head{color:var(--sand);text-align:center;margin-left:auto;margin-right:auto}
#stories-clientes .sec-head h2{color:var(--white)}
#stories-clientes .dek{color:var(--mut-d);margin:0 auto}
.auth-block{position:relative;padding-top:var(--sect);width:100%;min-width:0}
#stories-clientes::before{display:none}

/* Desktop 3+2 · 16:9 cover · player nativo (mesmo padrão da VSL) */
.stories-track{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(18px,2.2vw,26px);
  margin:clamp(36px,4.5vw,52px) auto 0;
  max-width:980px;width:100%
}
.story-card{
  flex:0 0 300px;margin:0;
  display:flex;flex-direction:column;align-items:center
}
.story-video{
  position:relative;width:100%;
  border-radius:18px;overflow:hidden;
  background:#06060A;
  border:1px solid rgba(235,216,199,.18);
  box-shadow:
    0 18px 40px -18px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.03) inset;
  transition:border-color .35s var(--ezs),box-shadow .35s var(--ezs),transform .4s cubic-bezier(.16,1,.3,1)
}
.story-video::before{content:"";display:block;padding-bottom:56.25%}
.story-video video.story-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;background:#06060A;display:block
}
.story-trigger{
  position:absolute;inset:0;z-index:5;display:block;width:100%;height:100%;
  margin:0;padding:0;border:0;cursor:pointer;background:#06060A;
  font:inherit;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent;
  transition:opacity .35s ease,visibility .35s ease
}
.story-video.is-playing .story-trigger{
  opacity:0;visibility:hidden;pointer-events:none
}
.story-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transform:scale(1.02)
}
.story-poster-shade{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(6,6,10,.18),rgba(6,6,10,.62) 68%),
    linear-gradient(180deg,rgba(6,6,10,.35),transparent 42%,rgba(6,6,10,.55))
}
.story-play{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none
}
.story-play-ic{
  position:relative;
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,195,15,.18);
  border:1px solid rgba(255,195,15,.42);
  box-shadow:
    0 0 0 1px rgba(255,195,15,.12) inset,
    0 12px 32px rgba(0,0,0,.4),
    0 0 28px rgba(255,195,15,.28);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:vsxPlayPulse 1.8s cubic-bezier(.45,0,.2,1) infinite
}
.story-play-ic svg{
  width:20px;height:20px;margin-left:2px;
  fill:rgba(255,255,255,.95);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))
}
.story-play-label{
  position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:2;pointer-events:none;
  font-family:var(--fm);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(241,228,212,.82);white-space:nowrap
}
.story-hit{
  position:absolute;inset:0;z-index:6;display:none;
  margin:0;padding:0;border:0;background:transparent;cursor:pointer
}
.story-video.is-playing .story-hit{display:block;pointer-events:auto}
.story-center{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  z-index:7;width:48px;height:48px;border-radius:0;
  display:none;place-items:center;
  border:0;background:transparent;
  color:rgba(255,255,255,.38);padding:0;
  pointer-events:none;
  opacity:.38;transition:opacity .25s ease,color .25s ease;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))
}
.story-video.is-playing .story-center{display:grid}
.story-video.is-playing:hover .story-center,
.story-video.is-paused .story-center{opacity:.55;color:rgba(255,255,255,.55)}
.story-center svg{width:28px;height:28px;fill:currentColor;pointer-events:none}
.story-center .ic-play{display:none;margin-left:2px}
.story-video.is-paused .story-center .ic-play{display:block}
.story-video.is-paused .story-center .ic-pause{display:none}
.story-chrome{
  position:absolute;left:0;right:0;bottom:0;z-index:8;
  height:4px;padding:0;margin:0;border:0;border-radius:0;
  background:transparent;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease
}
.story-video.is-playing .story-chrome{opacity:1;visibility:visible}
.story-pause{display:none!important}
.story-bar{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.14);overflow:hidden;pointer-events:none
}
.story-bar-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#E6A800,var(--gold-bright),#FFE08A);
  box-shadow:0 0 10px rgba(255,195,15,.3)
}
@media(hover:hover) and (pointer:fine){
  .story-card:hover .story-video{
    border-color:rgba(255,195,15,.45);
    box-shadow:
      0 24px 48px -16px rgba(0,0,0,.8),
      0 0 40px -18px rgba(255,195,15,.2),
      0 0 0 1px rgba(255,255,255,.04) inset;
    transform:translateY(-3px)
  }
  .story-card.is-playing:hover .story-video{transform:none}
}
.story-cap{padding:14px 6px 0;text-align:center;width:100%}
.story-name{display:block;font-family:var(--fd);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--white)}
.story-role{display:block;font-family:var(--fm);font-size:.64rem;letter-spacing:.04em;color:rgba(205,212,224,.72);margin-top:5px;line-height:1.4}

/* ═══ Thumb editorial (split 40/60) ═══════════════════════════════════
   Só no card marcado com .story-video--split. Vale apenas no estado idle:
   ao dar play o .story-trigger some e o vídeo volta ao 16:9 cheio.
   Geometria: bloco de frase nos primeiros 40%, retrato nos últimos ~62%,
   com sobreposição mascarada entre 38% e ~58% para a emenda sumir.
   O play segue no centro exato do slot (39%–61%), sem texto por perto. */
.story-video--split .story-trigger{
  background:
    radial-gradient(130% 110% at 0% 50%,rgba(255,195,15,.055),transparent 62%),
    #07070C
}
/* o retrato começa em 30% mas só fica opaco lá pelos 58% do slot:
   são ~85px de degradê, longo o bastante pra não existir emenda visível */
.story-shot{
  position:absolute;top:0;right:0;bottom:0;left:30%;
  z-index:1;display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.14) 14%,rgba(0,0,0,.62) 28%,#000 42%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.14) 14%,rgba(0,0,0,.62) 28%,#000 42%)
}
/* --shot-x / --shot-y afinam o enquadramento por card (setados no HTML).
   Valor baixo em --shot-x empurra o rosto para a direita, longe do degradê. */
.story-shot .story-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  object-position:var(--shot-x,32%) var(--shot-y,18%);
  transform:none
}
/* vinheta refeita: pesa no lado do texto e no rodapé, sem chapar o rosto */
.story-video--split .story-poster-shade{
  z-index:2;
  background:
    linear-gradient(90deg,rgba(7,7,12,.88) 0 26%,rgba(7,7,12,.34) 48%,transparent 66%),
    linear-gradient(180deg,rgba(7,7,12,.28),transparent 40%,rgba(7,7,12,.42))
}
/* coluna de texto: 40% de largura, mas o padding-direito garante ~16px
   de folga até a borda do play (que começa em 50% - 33px) */
.story-quote{
  position:absolute;left:0;top:0;bottom:0;width:40%;z-index:3;
  display:flex;flex-direction:column;justify-content:center;
  gap:10px;
  padding:12px 6.5% 12px 5%;
  text-align:left;pointer-events:none
}
.story-quote-tx{
  display:block;
  font-family:var(--fd);font-weight:600;
  font-size:clamp(.62rem,2.35vw,.72rem);line-height:1.32;letter-spacing:-.01em;
  color:rgba(246,238,228,.95);
  text-wrap:pretty;
  text-shadow:0 1px 10px rgba(0,0,0,.6)
}
/* assinatura: substitui a antiga figcaption abaixo do slot */
.story-quote-who{
  display:block;position:relative;padding-top:9px
}
.story-quote-who::before{
  content:"";position:absolute;left:0;top:0;
  width:18px;height:1px;background:rgba(255,195,15,.45)
}
.story-quote-nm{
  display:block;
  font-family:var(--fd);font-weight:700;
  font-size:clamp(.56rem,2vw,.62rem);line-height:1.2;letter-spacing:-.012em;
  color:var(--white);
  text-shadow:0 1px 8px rgba(0,0,0,.55)
}
.story-quote-rl{
  display:block;margin-top:4px;
  font-family:var(--fm);font-size:.45rem;line-height:1.45;letter-spacing:.03em;
  color:rgba(205,212,224,.58);
  text-shadow:0 1px 8px rgba(0,0,0,.5)
}
.story-video--split .story-play{z-index:4}

/* ═══ Desktop: trilho maior que a coluna de texto da seção ═══════════
   A .wrap tem 1340px (1260px de conteúdo). O trilho vai a 1340px e
   estoura de propósito o limite lateral do container, ganhando ~43%
   de área por card. Centralização por margem, não por transform:
   .stories-track carrega .lx-rise, que já anima transform. */
@media(min-width:1001px){
  .stories-track{
    --track-w:min(1340px,calc(100vw - 40px));
    --track-gap:clamp(18px,2.2vw,26px);
    width:var(--track-w);max-width:none;
    gap:var(--track-gap);
    margin-left:calc(50% - var(--track-w) / 2);margin-right:0
  }
  .story-card{flex:0 0 calc((var(--track-w) - 2 * var(--track-gap)) / 3)}
  /* card maior pede tipografia maior no bloco de frase */
  .story-quote{gap:13px;padding:16px 4.5% 16px 5.5%}
  .story-quote-tx{font-size:clamp(.8rem,1.03vw,.92rem);line-height:1.34}
  .story-quote-who{padding-top:11px}
  .story-quote-nm{font-size:clamp(.7rem,.88vw,.8rem)}
  .story-quote-rl{font-size:.56rem;letter-spacing:.04em}
}

@media(max-width:1000px){
  .stories-track{max-width:660px}
}
@media(max-width:680px){
  .stories-track{gap:22px;max-width:440px}
  .story-card{flex:0 0 100%}
  .story-video{border-radius:16px}
  .story-play-ic{width:60px;height:60px}
  /* card mais largo no mobile: a coluna de texto respira */
  .story-quote{gap:12px;padding:14px 7% 14px 5.5%}
  .story-quote-tx{font-size:clamp(.74rem,3.2vw,.9rem)}
  .story-quote-who{padding-top:11px}
  .story-quote-nm{font-size:clamp(.68rem,2.9vw,.78rem)}
  .story-quote-rl{font-size:.54rem}
}
@media(prefers-reduced-motion:reduce){
  .story-video,.story-play{transition:none}
  .story-card:hover .story-video{transform:none}
}

/* ═══ Interação sutil (hover + stagger) — leve, sem exagero ═══ */
@media(prefers-reduced-motion:no-preference){
  /* filhos entram em cascata quando o bloco .reveal ganha .in */
  .cam-grid.reveal:not(.in) .cam-card,
  .mkt-strip.reveal:not(.in) .mkt-cell,
  .stories-track.reveal:not(.in) .story-card,
  .pipe-board.reveal:not(.in) .pipe-step,
  .rgc.reveal:not(.in) .rgc-st{
    opacity:0;transform:translateY(16px)
  }
  .cam-grid.reveal .cam-card,
  .mkt-strip.reveal .mkt-cell,
  .stories-track.reveal .story-card,
  .pipe-board.reveal .pipe-step,
  .rgc.reveal .rgc-st{
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)
  }
  .cam-grid.reveal.in .cam-card,
  .mkt-strip.reveal.in .mkt-cell,
  .stories-track.reveal.in .story-card,
  .pipe-board.reveal.in .pipe-step,
  .rgc.reveal.in .rgc-st{opacity:1;transform:none}
  .cam-grid.reveal.in .cam-card:nth-child(1),
  .mkt-strip.reveal.in .mkt-cell:nth-child(1),
  .stories-track.reveal.in .story-card:nth-child(1),
  .pipe-board.reveal.in .pipe-step:nth-child(1),
  .rgc.reveal.in .rgc-st:nth-child(1){transition-delay:.04s}
  .cam-grid.reveal.in .cam-card:nth-child(2),
  .mkt-strip.reveal.in .mkt-cell:nth-child(2),
  .stories-track.reveal.in .story-card:nth-child(2),
  .pipe-board.reveal.in .pipe-step:nth-child(2),
  .rgc.reveal.in .rgc-st:nth-child(2){transition-delay:.1s}
  .cam-grid.reveal.in .cam-card:nth-child(3),
  .mkt-strip.reveal.in .mkt-cell:nth-child(3),
  .stories-track.reveal.in .story-card:nth-child(3),
  .pipe-board.reveal.in .pipe-step:nth-child(3),
  .rgc.reveal.in .rgc-st:nth-child(3){transition-delay:.16s}
  .cam-grid.reveal.in .cam-card:nth-child(4),
  .stories-track.reveal.in .story-card:nth-child(4),
  .pipe-board.reveal.in .pipe-step:nth-child(4),
  .rgc.reveal.in .rgc-st:nth-child(4){transition-delay:.22s}
  .cam-grid.reveal.in .cam-card:nth-child(5),
  .stories-track.reveal.in .story-card:nth-child(5),
  .pipe-board.reveal.in .pipe-step:nth-child(5),
  .rgc.reveal.in .rgc-st:nth-child(5){transition-delay:.28s}
}
@media(hover:hover) and (pointer:fine){
  .cam-card{
    transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .35s ease
  }
  .cam-card--bad:hover{
    transform:translateY(-4px);
    border-color:rgba(19,32,46,.12);
    box-shadow:0 1px 2px rgba(19,32,46,.04),0 20px 40px -22px rgba(19,32,46,.22)
  }
  .cam-card--good:hover{
    transform:translateY(-5px);
    border-color:rgba(255,195,15,.65);
    box-shadow:0 1px 2px rgba(19,32,46,.04),0 28px 52px -20px rgba(204,153,0,.4)
  }
  .mkt-cell,.mkt-col{
    transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .35s ease
  }
  .mkt-cell:hover,.mkt-col:hover{
    transform:translateY(-3px);
    border-color:rgba(204,153,0,.28);
    box-shadow:0 14px 32px -18px rgba(19,32,46,.18)
  }
  .mkt-cell--hot:hover{border-color:rgba(255,195,15,.45)}
  .rgc-card{
    transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .4s ease
  }
  .rgc-st:hover .rgc-card{
    transform:translateY(-4px);
    border-color:rgba(255,195,15,.35);
    box-shadow:0 16px 36px -18px rgba(0,0,0,.45)
  }
  .caplist-item.on{
    transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,background .3s ease
  }
  .caplist-item.on:hover{
    transform:translateX(4px);
    border-color:rgba(88,212,23,.45);
    background:rgba(88,212,23,.04)
  }
  .ctm-shot img,.dbq-shot img,.lpl-shot img{
    transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .45s ease
  }
  .ctm-shot:hover img,.dbq-shot:hover img,.lpl-shot:hover img{
    transform:scale(1.015);
    box-shadow:0 18px 40px -20px rgba(19,32,46,.22)
  }
  .feat-row .feat-media-frame{
    transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .35s ease
  }
  .feat-row:hover .feat-media-frame{
    transform:translateY(-3px);
    border-color:rgba(204,153,0,.35);
    box-shadow:0 20px 40px -18px rgba(19,32,46,.2)
  }
  .sec-cta .btn,.capa-cta .btn,.mkt-cta .btn{
    transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,filter .3s ease
  }
}
@media(prefers-reduced-motion:reduce){
  .cam-grid.reveal .cam-card,
  .mkt-strip.reveal .mkt-cell,
  .stories-track.reveal .story-card,
  .pipe-board.reveal .pipe-step,
  .rgc.reveal .rgc-st{opacity:1;transform:none;transition:none}
}

/* ═══════════════════════════════════════════════════════
   APRESENTAÇÃO EM VÍDEO (vsx-) — dobra logo abaixo da hero.
   Mesmo fundo (#06060A + dot grid) para ler como hero alongada.

   O reveal é ligado ao scroll, não a um toggle: o JS escreve o
   progresso em --vp (0 = ainda na penumbra, 1 = assentado) e todas
   as camadas derivam dele por calc(). Sem JS, --vp fica em 1 e a
   dobra aparece pronta.
   ═══════════════════════════════════════════════════════ */
.vsx{
  padding:clamp(28px,4vw,52px) 0 clamp(48px,6.5vw,84px);
  --vp:1;
  --vp-lift:72px;    /* reveal marcado no scroll */
  --vp-tilt:9deg;
  --vp-zoom:.1
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ── Chamada acima do quadro ── */
.vsx-lead{text-align:center;margin-bottom:clamp(36px,5vw,56px)}
.vsx-ey{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:lowercase;
  color:rgba(255,195,15,.72);
  padding:7px 14px;border-radius:100px;
  background:rgba(255,195,15,.05);border:1px solid rgba(255,195,15,.16)
}
.vsx-ey-dot{
  width:5px;height:5px;border-radius:50%;background:var(--gold-bright);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,195,15,.55);animation:vsxPulse 2.6s ease-out infinite
}
@keyframes vsxPulse{
  0%{box-shadow:0 0 0 0 rgba(255,195,15,.5)}
  70%{box-shadow:0 0 0 7px rgba(255,195,15,0)}
  100%{box-shadow:0 0 0 0 rgba(255,195,15,0)}
}
.vsx-kicker{
  font-family:var(--fd);font-weight:600;letter-spacing:-.025em;line-height:1.14;
  font-size:clamp(1.2rem,2.2vw,1.7rem);color:var(--sand);
  max-width:34ch;margin:0 auto;text-wrap:balance
}

/* ── Palco: moldura + vídeo se movem juntos no reveal ── */
.vsx-stage{
  position:relative;
  width:min(1040px,100%);margin:0 auto;
  perspective:1800px;perspective-origin:50% 18%
}

/* Hero-embedded VSL: --vp fixo, sem reveal 3D de scroll */
.bn-hero-vsl,
.bn-hero .vsx-stage{
  --vp:1;
  perspective:none;
}
.bn-hero .vsx-spot,
.bn-hero .vsx-glow{ display:none }
.bn-hero .vsx-mat{
  opacity:1; transform:none; will-change:auto
}
.bn-hero .vsx-mat::before,
.bn-hero .vsx-mat::after{ opacity:1 }
.bn-hero .vsx-veil{ opacity:0 }

/* Holofote: acende forte conforme o bloco assenta */
.vsx-spot{
  position:absolute;left:50%;top:42%;translate:-50% -50%;
  width:145%;aspect-ratio:1.55/1;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(255,195,15,.2),rgba(255,195,15,.06) 44%,transparent 72%);
  opacity:calc(var(--vp) * var(--vp));
  scale:calc(.68 + var(--vp) * .32);
  filter:blur(2px)
}
/* Base de luz sob a moldura — neutra, só elevação */
.vsx-glow{
  position:absolute;left:50%;bottom:-8%;translate:-50% 0;
  width:78%;height:36%;pointer-events:none;z-index:0;filter:blur(36px);
  background:radial-gradient(closest-side,rgba(255,255,255,.14),rgba(0,0,0,.2) 55%,transparent 78%);
  opacity:calc(var(--vp) * .85);
  scale:calc(.5 + var(--vp) * .5) 1
}

/* Moldura branca elegante (gallery mat) — bloco único no reveal */
.vsx-mat{
  position:relative;z-index:1;
  padding:10px;
  border-radius:20px;
  background:
    linear-gradient(165deg,#F7F4EE 0%,#EDE8DF 48%,#E6E0D6 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(20,16,8,.06) inset,
    0 28px 64px -28px rgba(0,0,0,calc(.55 + var(--vp) * .28)),
    0 0 0 1px rgba(255,255,255,.08);
  opacity:calc(.12 + var(--vp) * .88);
  transform:
    translateY(calc((1 - var(--vp)) * var(--vp-lift)))
    scale(calc(1 - var(--vp-zoom) + var(--vp) * var(--vp-zoom)))
    rotateX(calc((1 - var(--vp)) * var(--vp-tilt)));
  transform-origin:50% 100%;
  will-change:transform,opacity
}
.vsx-mat::before{
  content:"";position:absolute;inset:6px;border-radius:14px;pointer-events:none;z-index:3;
  border:1px solid rgba(20,16,8,.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;
  opacity:calc(.55 + var(--vp) * .45)
}
/* Fio de luz no topo da moldura no assentamento */
.vsx-mat::after{
  content:"";position:absolute;top:0;left:16%;right:16%;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  opacity:calc(var(--vp) * var(--vp))
}

/* Quadro interno — sem transform próprio (vai junto com a moldura) */
.vsx-frame{
  position:relative;z-index:2;
  border:0;border-radius:12px;
  background:#08090F;overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(20,16,8,.12),
    0 1px 2px rgba(0,0,0,.18) inset
}

/* Sem pontinhos dourados nesta dobra */
.vsx .hbg-grid{display:none}

/* Tela 16:9 — poster com play; vídeo nativo sobe por baixo e segue na rolagem */
.vsx-screen{position:relative;width:100%;aspect-ratio:16/9;background:#06060A}
.vsx-screen iframe,
.vsx-screen video.vsx-video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1;
  object-fit:cover;background:#06060A
}
.vsx-trigger{
  position:absolute;inset:0;z-index:5;display:block;width:100%;height:100%;
  margin:0;padding:0;border:0;cursor:pointer;background:#06060A;
  font:inherit;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent;
  transition:opacity .35s ease,visibility .35s ease
}
.vsx-screen.is-playing .vsx-trigger{
  opacity:0;visibility:hidden;pointer-events:none
}
.vsx-trigger:focus-visible{
  outline:2px solid var(--gold-bright);outline-offset:-2px
}
.vsx-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transform:scale(1.02);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease
}
.vsx-trigger:hover .vsx-poster,
.vsx-trigger:focus-visible .vsx-poster{
  transform:scale(1.05);filter:brightness(1.06)
}
.vsx-poster-shade{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(6,6,10,.18),rgba(6,6,10,.62) 68%),
    linear-gradient(180deg,rgba(6,6,10,.35),transparent 42%,rgba(6,6,10,.55))
}
.vsx-play{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none
}
.vsx-play-ic{
  position:relative;
  width:clamp(72px,9vw,92px);height:clamp(72px,9vw,92px);border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,195,15,.18);
  border:1px solid rgba(255,195,15,.42);
  box-shadow:
    0 0 0 1px rgba(255,195,15,.12) inset,
    0 18px 48px rgba(0,0,0,.32),
    0 0 36px rgba(255,195,15,.28);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:vsxPlayPulse 1.8s cubic-bezier(.45,0,.2,1) infinite;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s ease,box-shadow .35s ease,border-color .35s ease
}
.vsx-play-ic::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid rgba(255,195,15,.45);
  animation:vsxPlayRing 1.8s cubic-bezier(.45,0,.2,1) infinite;
  pointer-events:none
}
@keyframes vsxPlayPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 1px rgba(255,195,15,.12) inset,0 18px 48px rgba(0,0,0,.32),0 0 36px rgba(255,195,15,.28) }
  50%{ transform:scale(1.07); box-shadow:0 0 0 1px rgba(255,195,15,.18) inset,0 20px 52px rgba(0,0,0,.36),0 0 56px rgba(255,195,15,.48) }
}
@keyframes vsxPlayRing{
  0%{ transform:scale(.92); opacity:.7 }
  70%{ transform:scale(1.28); opacity:0 }
  100%{ transform:scale(1.28); opacity:0 }
}
.vsx-trigger:hover .vsx-play-ic,
.vsx-trigger:focus-visible .vsx-play-ic{
  animation:none;
  transform:scale(1.08);
  background:rgba(255,195,15,.28);
  border-color:rgba(255,195,15,.55);
  box-shadow:
    0 0 0 1px rgba(255,195,15,.16) inset,
    0 20px 52px rgba(0,0,0,.4),
    0 0 64px rgba(255,195,15,.4)
}
.vsx-trigger:hover .vsx-play-ic::before,
.vsx-trigger:focus-visible .vsx-play-ic::before{ animation:none; opacity:0 }
.vsx-play-ic svg{
  width:28px;height:28px;margin-left:3px;
  fill:var(--white);filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))
}
.vsx-play-label{
  position:absolute;left:50%;bottom:clamp(14px,2.4vw,22px);
  translate:-50% 0;z-index:2;pointer-events:none;
  font-family:var(--fm);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(241,228,212,.72);white-space:nowrap
}
/* Penumbra do reveal no scroll (some ao dar play para não cobrir o player) */
.vsx-veil{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(6,6,10,.34),rgba(6,6,10,.93) 72%),
    linear-gradient(180deg,rgba(6,6,10,.55),rgba(6,6,10,.2) 40%,rgba(6,6,10,.7));
  opacity:calc((1 - var(--vp)) * (1 - var(--vp)));
  transition:opacity .3s ease
}
.vsx-screen.is-playing .vsx-veil{opacity:0}

/* Progresso VSL: só a linha no limite inferior do quadro (sem dock/blur/tempo/toggle) */
.vsx-chrome{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  height:5px;padding:0;margin:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility .35s ease
}
.vsx-screen.is-playing .vsx-chrome{
  opacity:1;visibility:visible;pointer-events:none
}
.vsx-bar{
  position:relative;width:100%;height:100%;
  cursor:default;pointer-events:none;overflow:hidden;
  background:transparent
}
.vsx-bar-fill{
  position:relative;height:100%;width:0%;
  background:linear-gradient(90deg,#A67D00 0%,var(--gold-bright) 70%,#FFE08A 100%);
  box-shadow:
    0 0 8px rgba(255,195,15,.5),
    0 -1px 6px rgba(255,195,15,.25);
  transition:width .08s linear
}
.vsx-bar-fill::after{display:none}
.vsx-hit{
  position:absolute;inset:0;z-index:5;
  display:none;border:0;padding:0;margin:0;cursor:pointer;background:transparent
}
.vsx-screen.is-playing .vsx-hit{display:block;pointer-events:auto}

/* Ícone central translúcido (visual; toggle via #vsx-hit) */
.vsx-center{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  z-index:7;width:56px;height:56px;border-radius:0;
  display:none;place-items:center;
  border:0;background:transparent;
  color:rgba(255,255,255,.38);padding:0;
  pointer-events:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  opacity:.38;transition:opacity .25s ease,color .25s ease,transform .25s ease;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))
}
.vsx-screen.is-playing .vsx-center{display:grid}
.vsx-screen.is-playing:hover .vsx-center,
.vsx-screen.is-paused .vsx-center{opacity:.55;color:rgba(255,255,255,.55)}
.vsx-center svg{width:32px;height:32px;fill:currentColor;pointer-events:none}
.vsx-center .ic-play{display:none;margin-left:2px}
.vsx-screen.is-paused .vsx-center .ic-play{display:block}
.vsx-screen.is-paused .vsx-center .ic-pause{display:none}

/* ── Fecho abaixo do vídeo ── */
.vsx-after{
  width:min(52ch,100%);margin:clamp(48px,6vw,72px) auto 0;text-align:center
}
.vsx-punch{
  font-family:var(--fd);font-weight:600;letter-spacing:-.025em;line-height:1.2;
  font-size:clamp(1.15rem,2.2vw,1.55rem);color:var(--sand);
  text-wrap:balance;margin-bottom:0
}

/* Dica de rolagem: seta animada apontando para baixo */
.vsx-hint{
  display:flex;align-items:center;justify-content:center;
  margin-top:clamp(18px,2.8vw,28px)
}
.vsx-hint-arrow{
  width:40px;height:40px;border:0;padding:0;background:transparent;
  color:rgba(241,228,212,.7);
  animation:vsxArrowBounce 1.8s cubic-bezier(.45,0,.2,1) infinite
}
.vsx-hint-arrow svg{
  width:28px;height:28px;display:block;margin:0 auto;
  stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round
}
@keyframes vsxArrowBounce{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(8px);opacity:1}
}

/* ── Tablet / mobile: reveal mais amplo que no desktop ──
   A tela pequena mostra o quadro inteiro de uma vez e a rolagem é por
   flick, mais rápida. Amplitude maior e perspectiva mais curta para o
   assentamento ainda ser percebido no meio do gesto. */
@media(max-width:900px){
  .vsx{--vp-lift:96px;--vp-tilt:12deg;--vp-zoom:.16}
  .vsx-stage{perspective:1100px}
  .vsx-mat{padding:8px;border-radius:18px}
}
@media(max-width:760px){
  .vsx{padding-top:clamp(28px,6vw,40px);--vp-lift:110px;--vp-tilt:14deg;--vp-zoom:.2}
  .vsx-stage{perspective:900px}
  /* holofote abre de mais longe, acompanhando o curso maior do quadro */
  .vsx-spot{scale:calc(.5 + var(--vp) * .5)}
  .vsx-kicker{max-width:100%}
  .vsx-mat{padding:7px;border-radius:16px}
  .vsx-frame{border-radius:12px}
  .vsx-play-ic{width:68px;height:68px}
  .vsx-play-ic svg{width:24px;height:24px}
  .vsx-chrome{height:4px}
}

/* ── Sem animação por preferência do usuário: tudo já assentado ── */
@media(prefers-reduced-motion:reduce){
  .vsx{--vp:1 !important}
  .vsx-mat{transform:none}
  .vsx-ey-dot,.vsx-hint-arrow,.vsx-play-ic,.vsx-play-ic::before{animation:none}
  .vsx-poster,.vsx-play-ic,.vsx-trigger,.vsx-chrome,.vsx-bar-fill{transition:none}
}