/* VSL vertical no topo: título + vídeo + botão de compra. */
.hero-vsl{padding:40px 0 84px;--vsl-h:min(66vh,700px)}
.vsl-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:72px;align-items:center}
.vsl-hero-copy{min-width:0}
.hero-vsl h1{font:700 clamp(42px,4.4vw,64px)/1.08 Syne,sans-serif;letter-spacing:-.055em;margin:0 0 24px;max-width:680px;text-wrap:balance}
.hero-vsl .hero-copy{margin:0 0 26px}
.hero-vsl .compat{margin-top:0}
.vsl-column{width:calc(var(--vsl-h) * 9 / 16);min-width:300px;display:flex;flex-direction:column;align-items:stretch}

.vsl-player{position:relative;width:100%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#07040f url(assets/our/vsl-poster.jpg) center/cover no-repeat;border:1px solid #c599ff40;box-shadow:0 35px 100px #02000665,0 0 110px #a046ef24;isolation:isolate}
.vsl-player video{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;display:block;background:transparent}
.vsl-surface{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;border-radius:inherit}
.vsl-surface:focus-visible{outline:3px solid #c7a7ff;outline-offset:-3px}

.vsl-unmute{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(64%,216px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:20px;border:1px solid #ffffff55;background:linear-gradient(150deg,#a466f7f5,#6b31c6f5);color:#fff;text-align:center;cursor:pointer;font-family:Manrope,sans-serif;box-shadow:0 22px 60px #000a;animation:vslPulse 1.9s ease-out infinite}
.vsl-unmute:hover{background:linear-gradient(150deg,#b27dff,#7a3ddb)}
.vsl-unmute:focus-visible{outline:3px solid #fff;outline-offset:4px}
.vsl-unmute-kicker{font-size:13px;font-weight:600;line-height:1.3;opacity:.95}
.vsl-unmute svg{width:58px;height:58px;flex:none}
.vsl-unmute strong{font:700 19px/1.15 Syne,sans-serif;letter-spacing:-.02em}
.vsl-player:not(.is-muted) .vsl-unmute{display:none}

.vsl-paused{position:absolute;inset:0;z-index:2;display:none;place-items:center;pointer-events:none;background:#05020c66}
.vsl-paused svg{width:92px;height:92px;padding:22px 20px 22px 26px;border-radius:24px;background:linear-gradient(150deg,#a466f7ee,#6b31c6ee);color:#fff;box-shadow:0 18px 50px #0009}
.vsl-player.is-paused .vsl-paused{display:grid}

.vsl-progress{position:absolute;left:0;right:0;bottom:0;z-index:4;height:7px;background:#ffffff26;pointer-events:none}
.vsl-progress span{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#c9a4ff,#9152f5);box-shadow:0 0 14px #a86dff}

.hero-vsl .vsl-cta{width:100%;min-width:0;margin-top:18px;justify-content:space-between}
.vsl-cta-note{margin:11px 0 0;font-size:12px;line-height:1.5;color:#b4a9c6;text-align:center}

@keyframes vslPulse{0%{box-shadow:0 22px 60px #000a,0 0 0 0 #b07dffb0}70%{box-shadow:0 22px 60px #000a,0 0 0 24px #b07dff00}100%{box-shadow:0 22px 60px #000a,0 0 0 0 #b07dff00}}
@media(prefers-reduced-motion:reduce){.vsl-unmute{animation:none}}

@media(max-width:1050px) and (min-width:761px){.vsl-hero{gap:40px}.hero-vsl h1{font-size:clamp(34px,4.3vw,46px)}}

/* Celular: título → vídeo → botão → resto. */
@media(max-width:760px){
 .hero-vsl{padding:18px 0 50px;--vsl-h:min(62vh,600px)}
 @supports(height:1svh){.hero-vsl{--vsl-h:min(62svh,600px)}}
 .vsl-hero{display:flex;flex-direction:column;align-items:center;gap:0}
 .vsl-hero-copy,.vsl-column{display:contents}
 .hero-vsl .eyebrow{display:none}
 .hero-vsl h1{order:2;font-size:clamp(28px,7.7vw,38px);line-height:1.1;letter-spacing:-.05em;text-align:center;margin:0 auto 16px;max-width:440px}
 .vsl-player{order:3;width:min(100%,calc(var(--vsl-h) * 9 / 16));border-radius:18px}
 .hero-vsl .vsl-cta{order:4;width:min(100%,calc(var(--vsl-h) * 9 / 16));min-width:0;margin-top:14px;font-size:14px;padding:16px 18px;gap:12px;white-space:nowrap}
 .vsl-cta-note{order:5}
 .hero-vsl .hero-copy{order:6;margin:30px auto 0;text-align:center;max-width:470px}
 .hero-vsl .compat{order:7;justify-content:center;margin-top:18px}
 .vsl-unmute{width:min(64%,196px);gap:6px;padding:12px}
 .vsl-unmute svg{width:44px;height:44px}
 .vsl-unmute strong{font-size:17px}
 .vsl-unmute-kicker{font-size:12px}
}

/* Marca oficial no topo. */
.brand-official{display:inline-flex;align-items:center;line-height:0;gap:0}
.brand-official img{display:block;height:46px;width:auto}
/* Logos do ChatGPT e do Claude nos selos de compatibilidade. */
.hero-vsl .compat span{display:inline-flex;align-items:center;gap:0;font-size:12px;padding:8px 13px 8px 11px;border-radius:8px}
.compat-logo{width:17px;height:17px;flex:none;color:#fff;margin-right:8px}.hero-vsl .compat b{margin-left:4px}
@media(max-width:760px){.brand-official img{height:36px}.hero-vsl .compat span{font-size:11px;padding:7px 11px 7px 9px}.compat-logo{width:15px;height:15px}}

/* Ajuste do topo (23/09): cabeçalho só com o logo, título menor e vídeo ocupando a tela no celular. */
.hero-vsl h1{font-size:clamp(34px,3.6vw,52px)}
@media(max-width:760px){
 .top{padding:12px 18px;justify-content:center}
 .brand-official img{height:32px}
 .hero-vsl{padding-top:14px;--vsl-h:max(380px,calc(100vh - 168px))}
 @supports(height:1svh){.hero-vsl{--vsl-h:max(380px,calc(100svh - 168px))}}
 .hero-vsl h1{font-size:clamp(21px,6vw,27px);line-height:1.12;margin-bottom:12px;max-width:420px}
 .hero-vsl .vsl-cta{margin-top:12px}
}
/* O botão de compra do topo só aparece depois de 50% do vídeo assistido. */
.vsl-column.cta-locked .vsl-cta,.vsl-column.cta-locked .vsl-cta-note{display:none}
.vsl-cta.cta-in,.vsl-cta-note.cta-in{animation:vslCtaIn .7s cubic-bezier(.2,1.25,.4,1) both}
@keyframes vslCtaIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vsl-cta.cta-in,.vsl-cta-note.cta-in{animation:none}}

/* Botão de compra entre a galeria e o método. */
.mid-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin:-24px auto -40px;position:relative;z-index:1}
.mid-cta-btn{min-width:320px;justify-content:space-between;gap:28px}
.mid-cta-note{margin:0;font-size:13px;color:#b4a9c6}
@media(max-width:760px){.mid-cta{margin:-8px auto -28px}.mid-cta-btn{width:min(100%,354px);min-width:0;font-size:15px}}