/* Ajustes da página Títulos Virais sobre o modelo do curso. */
.marca-logo{height:36px;width:auto;display:block}
.nav .marca{max-width:60%}.course-footer .marca-logo{height:42px}
.hero-emblema-alto{filter:blur(2px) drop-shadow(0 0 35px #e8802955)}
.hero-emblema-lado{right:6vw;bottom:-90px;width:clamp(200px,20vw,380px);opacity:.5;transform:rotate(18deg);filter:blur(3px) drop-shadow(0 0 30px #ffffff22);animation:emblema-flutuar-alto 14s cubic-bezier(.77,0,.175,1) -6s infinite alternate}
.vsl-caption{text-transform:none}
/* Cartões de versão no carrossel claro. */
.versao-card{display:flex;align-items:flex-start;justify-content:center;padding-top:11%;background:radial-gradient(circle at 50% 30%,var(--tom,#e88029) 0%,#141416 60%,#0a0a0b 100%)}
.versao-card.premiere{--tom:#9999ff}.versao-card.davinci{--tom:#f5762e}.versao-card.capcut{--tom:#f7f7f5}
.versao-card .versao-logo{width:44%;height:auto;object-fit:contain;border-radius:22%;filter:drop-shadow(0 20px 40px #0008)}
.versao-card .module-copy{padding:40px 22px 22px}
.versao-card .module-copy p{color:var(--nevoa);font-size:14px;margin:6px 0 16px}
.versao-card .btn-versao{width:100%;min-height:0;padding:12px 14px;font-size:14px;transform:none!important}.versao-card .btn-versao span{color:var(--ink);font-size:14px}.versao-card .btn-versao small{display:none}.versao-card .module-copy{padding-top:30px}
.versao-card:not(.frente) .btn-versao{pointer-events:none}
/* Botões de checkout com o logo de cada editor. */
.versao-botoes{display:grid;gap:12px;margin-top:22px}
.btn-versao{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;width:100%;border:0;border-radius:12px;color:var(--ink);background:var(--tom,#fff);box-shadow:0 0 30px color-mix(in srgb,var(--tom,#fff) 45%,transparent);transition:transform .15s,box-shadow .2s}
.btn-versao:hover{box-shadow:0 0 42px color-mix(in srgb,var(--tom,#fff) 65%,transparent)}
.btn-versao img{width:34px;height:34px;object-fit:contain;border-radius:8px;flex:0 0 auto}
.btn-versao span{display:flex;flex-direction:column;line-height:1.15}
.btn-versao small{font:500 12px var(--body);opacity:.8;letter-spacing:0}
.btn-versao.premiere{--tom:#9999ff}.btn-versao.davinci{--tom:#f5762e}.btn-versao.capcut{--tom:#fff}
.plano .btn-versao{margin-top:0}
/* Vídeos do pack são horizontais. */
#cover-videos .take{width:clamp(280px,46vw,600px)}
#cover-videos .take-monitor{aspect-ratio:16/9}
#cover-videos.cover .cover-palco{height:clamp(240px,32vw,400px)}
#cover-videos .cover-palco > .dir{transform:translate(calc(-50% + 70%),-50%) scale(.72) rotateY(-26deg)}
#cover-videos .cover-palco > .esq{transform:translate(calc(-50% - 70%),-50%) scale(.72) rotateY(26deg)}
#cover-videos .cover-palco > .dir2,#cover-videos .cover-palco > .esq2{opacity:0}
/* Bônus: logo do Plus sobre o vídeo. */
.bonus-plus{max-width:980px;margin:auto}
.bonus-plus > img{width:min(520px,80%);height:auto;margin:0 auto 32px;filter:drop-shadow(0 0 30px #e8802955)}
.bonus-plus .wide-video video{object-fit:cover}
/* Depoimentos são capturas largas. */
.testimonial-largo{flex-basis:420px}
.testimonial-largo img{background:#fff}
@media(max-width:700px){.marca-logo{height:28px}.hero-emblema-lado{display:none}#cover-videos .take{width:min(84vw,420px)}#cover-videos.cover .cover-palco{height:56vw}#cover-videos .cover-palco > .dir,#cover-videos .cover-palco > .esq{opacity:0}.testimonial-largo{flex-basis:300px}.versao-card .versao-logo{width:40%}.versao-card .module-copy{padding:20px 16px 16px}.versao-card .module-copy h3{font-size:19px}.versao-card .btn-versao{padding:10px 12px}}
/* Logo claro precisa de fundo escuro quando a barra fica clara. */
.nav.clara .marca,.course-footer .marca{background:var(--ink);padding:6px 10px;border-radius:10px}
/* Garantia: o 7 flutua sem o quadrado preto. */
.guarantee img{max-width:300px;filter:drop-shadow(0 30px 40px #0002);animation:sete-flutuar 6s ease-in-out infinite alternate}
@keyframes sete-flutuar{from{transform:translateY(-10px) rotate(-2deg)}to{transform:translateY(12px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.guarantee img{animation:none}}

/* Checkout: carrossel de planos, um por editor, ao lado do vídeo. */
#checkout .course-offer{max-width:1240px;grid-template-columns:minmax(220px,.55fr) 1.45fr;gap:24px;align-items:center}
#checkout .offer-art{max-width:360px;justify-self:end}
#cover-planos{overflow:hidden;padding:24px 0;max-width:none}
#cover-planos .cover-palco{height:clamp(660px,58vw,760px)}
#cover-planos .plano{position:absolute;top:50%;left:50%;width:clamp(280px,32vw,400px);padding:34px 30px 30px;margin:0;transition:transform .62s cubic-bezier(.22,1,.36,1),opacity .5s,filter .5s,box-shadow .5s}
#cover-planos .plano:hover{transform:translate(-50%,-50%) scale(1.06)}
#cover-planos .plano.dir:hover{transform:translate(calc(-50% + 60%),-50%) scale(.78) rotateY(-26deg)}
#cover-planos .plano.esq:hover{transform:translate(calc(-50% - 60%),-50%) scale(.78) rotateY(26deg)}
#cover-planos .plano:not(.frente) .btn-versao{pointer-events:none}
#cover-planos .plano.frente{box-shadow:6px 6px 0 var(--rec)}
.plano-editor{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.plano-editor img{width:56px;height:56px;object-fit:contain;border-radius:14px;flex:0 0 auto;box-shadow:0 8px 20px #0002}
.plano-editor h3{font:700 22px/1.2 var(--titulo);margin:0}
.plano-editor p{color:var(--grafite);font-size:14px;margin-top:2px}
#cover-planos .plano-lista{margin:18px 0 20px;gap:9px}
#cover-planos .plano-valor b{font-size:clamp(32px,3vw,42px)}
#cover-planos .checkout-note{margin-top:12px;font-size:13px}
#cover-planos .cover-seta{z-index:20}
@media(max-width:900px){#checkout .course-offer{grid-template-columns:1fr}#checkout .offer-art{justify-self:center;max-width:290px}#cover-planos .plano{width:min(86vw,380px);padding:30px 22px 24px}#cover-planos .cover-palco{height:640px}#cover-planos .cover-palco > .dir,#cover-planos .cover-palco > .esq{opacity:0}}
/* Depoimentos: faixa contínua com arrasto. */
.tv-strip{overflow:hidden;padding:12px 0 24px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;scroll-snap-type:none;max-width:none}
.tv-strip.arrastando{cursor:grabbing}
.tv-strip .tv-track{display:flex;align-items:flex-start;gap:20px;width:max-content;will-change:transform}
.tv-strip .testimonial{flex:0 0 420px;scroll-snap-align:none}
.tv-strip .testimonial img{pointer-events:none;-webkit-user-drag:none}
.tv-strip .testimonial:hover{transform:none}
@media(max-width:700px){.tv-strip .testimonial{flex-basis:300px}}
/* Hero: logos maiores, CapCut branco e flutuação mais ampla. */
.hero-emblema-alto{width:clamp(340px,36vw,700px);right:-110px;top:-120px;animation:tv-flutuar-alto 11s cubic-bezier(.45,0,.55,1) infinite alternate}
.hero-emblema-baixo{width:clamp(300px,30vw,560px);animation:tv-flutuar-baixo 13s cubic-bezier(.45,0,.55,1) -4s infinite alternate}
.hero-emblema-lado{width:clamp(280px,28vw,540px);right:3vw;bottom:-140px;opacity:.7;filter:blur(2px) drop-shadow(0 0 40px #ffffff33);animation:tv-flutuar-lado 12s cubic-bezier(.45,0,.55,1) -7s infinite alternate}
@keyframes tv-flutuar-alto{from{transform:translate3d(0,0,0) rotate(12deg)}to{transform:translate3d(-90px,140px,0) rotate(24deg)}}
@keyframes tv-flutuar-baixo{from{transform:translate3d(0,0,0) rotate(-16deg)}to{transform:translate3d(110px,-120px,0) rotate(-4deg)}}
@keyframes tv-flutuar-lado{from{transform:translate3d(0,0,0) rotate(18deg)}to{transform:translate3d(-120px,-110px,0) rotate(6deg)}}
@media(max-width:700px){.hero-emblema-alto{width:260px}.hero-emblema-baixo{width:240px}.hero-emblema-lado{display:block;width:200px;right:-70px;bottom:-40px;opacity:.4}}
@media(prefers-reduced-motion:reduce){.hero-emblema{animation:none}}

/* Seção 02: os três logos grandes, flutuando com só uma ponta sobreposta. */
.logos-flutuantes{position:relative;max-width:1100px;height:clamp(300px,40vw,500px);margin:10px auto 0}
.logo-flutuante{position:absolute;top:50%;width:clamp(200px,31vw,360px);height:auto;border-radius:22%;filter:drop-shadow(0 30px 50px #0004);will-change:transform;animation:logo-boiar 7s ease-in-out infinite alternate}
.logo-flutuante.davinci{left:5%;transform:translateY(-44%) rotate(-9deg);z-index:1;animation-delay:-2s}
.logo-flutuante.premiere{left:50%;margin-left:calc(clamp(200px,31vw,360px) / -2);transform:translateY(-56%);z-index:3;animation-delay:-5s}
.logo-flutuante.capcut{right:5%;transform:translateY(-44%) rotate(9deg);z-index:2;animation-delay:-7s}
@keyframes logo-boiar{from{margin-top:-20px}to{margin-top:20px}}
@media(max-width:700px){.logos-flutuantes{height:240px}.logo-flutuante{width:150px}.logo-flutuante.davinci{left:0}.logo-flutuante.capcut{right:0}.logo-flutuante.premiere{margin-left:-75px}}
@media(prefers-reduced-motion:reduce){.logo-flutuante{animation:none}}

/* Prévia: loop contínuo, sem controles. */
.vsl-loop{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}.vsl-loop video{display:block;width:100%;height:100%;object-fit:cover}

.plano-recebe{margin:20px 0 -8px;font-size:11px;letter-spacing:.18em;color:var(--rec-escuro)}

.chips-centro{justify-content:center}

/* Hero aparece já no carregamento, sem esperar a abertura do curso. */
.hero-texto > *:nth-child(1){animation-delay:.05s}.hero-texto > *:nth-child(2){animation-delay:.15s}.hero-texto > *:nth-child(3){animation-delay:.25s}.hero-texto > *:nth-child(4){animation-delay:.35s}
/* Faixa laranja do título entra meio segundo depois do texto. */
.hero h1 .marcar::before{animation-delay:.65s}

/* Checkout escuro: cartões claros sobre o fundo preto. */
#checkout .plano{box-shadow:0 30px 60px #000a}
#cover-planos .plano.frente{box-shadow:6px 6px 0 var(--rec),0 30px 60px #000a}
#checkout .offer-art{box-shadow:0 30px 60px #000a}
/* No celular o checkout mostra só os cartões. */
@media(max-width:900px){#checkout .offer-art{display:none}#checkout .course-offer{margin-top:24px}}
/* Checkout no celular: cartão compacto e vizinhos visíveis nas laterais. */
@media(max-width:900px){
 #cover-planos{padding:12px 0;overflow:visible}
 #cover-planos .cover-palco{height:560px}
 #cover-planos .plano{width:min(74vw,330px);padding:24px 18px 20px}
 #cover-planos .plano-selo{font-size:11px;top:-11px;right:14px;padding:5px 10px}
 #cover-planos .plano-nome{font-size:11px;margin-bottom:6px}
 #cover-planos .plano-editor{gap:10px;margin-bottom:12px}
 #cover-planos .plano-editor img{width:44px;height:44px;border-radius:11px}
 #cover-planos .plano-editor h3{font-size:18px}
 #cover-planos .plano-editor p{font-size:13px}
 #cover-planos .original-price{font-size:14px;margin-bottom:4px}
 #cover-planos .plano-valor b{font-size:34px}
 #cover-planos .plano-conta{font-size:14px;margin-top:6px}
 #cover-planos .plano-recebe{margin:14px 0 -6px;font-size:10px}
 #cover-planos .plano-lista{margin:14px 0 14px;gap:7px}
 #cover-planos .plano-lista li{font-size:14px;padding-left:22px}
 #cover-planos .btn-versao{padding:10px 12px;gap:10px}
 #cover-planos .btn-versao img{width:28px;height:28px}
 #cover-planos .btn-versao span{font-size:13px}
 #cover-planos .btn-versao small{font-size:11px}
 #cover-planos .checkout-note{font-size:11px;margin-top:10px}
 #cover-planos .cover-palco > .dir,#cover-planos .cover-palco > .esq{opacity:.55;filter:blur(1px) saturate(.8)}
 #cover-planos .cover-palco > .dir{transform:translate(calc(-50% + 78%),-50%) scale(.82) rotateY(-18deg)}
 #cover-planos .cover-palco > .esq{transform:translate(calc(-50% - 78%),-50%) scale(.82) rotateY(18deg)}
 #cover-planos .cover-seta{width:36px;height:36px;font-size:18px;background:#0a0a0be6;position:absolute;top:50%;transform:translateY(-50%);z-index:20}
 #cover-planos .cover-seta.esq{left:4px}#cover-planos .cover-seta.dir{right:4px}
 #cover-planos .cover-pontos{margin-top:10px}
}
/* Celular: indicador de carrossel acima dos cartões e título mais compacto no checkout. */
@media(max-width:900px){
 #checkout .cabecalho{margin-bottom:12px}
 #checkout .cabecalho h2{font-size:clamp(26px,7vw,34px)}
 #checkout .cabecalho p{font-size:15px;margin-top:8px}
 #checkout .course-offer{margin-top:8px}
 #checkout .carousel-group{display:flex;flex-direction:column}
 #checkout .carousel-group .cover{order:3}
 #checkout .carousel-group .cover-pontos{order:1;margin:0 0 4px}
 #checkout .carousel-group .carrossel-dica{order:2;margin:0 0 6px}
 #checkout .carousel-group .carrossel-dica::before{content:"DESLIZE · ";color:var(--rec)}
}

/* Cada seção cabe na tela ao pular pelo "Próximo": espaçamentos menores e mídia limitada pela altura da janela. */
.secao{padding-top:72px;padding-bottom:72px}
.cabecalho{margin-bottom:26px}.cabecalho p{margin-top:10px}
.vsl-frame,.wide-video{max-width:min(980px,max(560px,calc((100vh - 380px) * 1.7778)))}
.logos-flutuantes{height:min(clamp(300px,40vw,500px),max(240px,calc(100vh - 430px)))}
.logo-flutuante{width:min(clamp(200px,31vw,360px),max(180px,calc(100vh - 470px)))}
.logo-flutuante.premiere{margin-left:calc(min(clamp(200px,31vw,360px),max(180px,calc(100vh - 470px))) / -2)}
#checkout .course-offer{margin-top:0}
#cover-planos{padding:12px 0}
#cover-planos .cover-palco{height:clamp(600px,54vw,700px)}
#cover-planos .plano{padding:28px 26px 24px}
#cover-planos .plano-editor{margin-bottom:12px}#cover-planos .plano-editor h3{font-size:20px}#cover-planos .plano-editor img{width:48px;height:48px}
#cover-planos .original-price{margin-bottom:4px}#cover-planos .plano-valor b{font-size:clamp(30px,2.6vw,38px)}#cover-planos .plano-conta{margin-top:6px}
#cover-planos .plano-recebe{margin:14px 0 -8px}#cover-planos .plano-lista{margin:14px 0 16px;gap:7px}#cover-planos .plano-lista li{font-size:15px}
#cover-planos .btn-versao{padding:11px 14px}#cover-planos .checkout-note{margin-top:10px}
@media(max-height:860px) and (min-width:901px){#checkout .course-offer{zoom:.82}#checkout .cabecalho{margin-bottom:10px}}
@media(max-height:760px) and (min-width:901px){#checkout .course-offer{zoom:.72}}
@media(max-width:900px){
 .secao{padding-top:56px;padding-bottom:56px}.cabecalho{margin-bottom:18px}
 #checkout .course-offer{zoom:.74}
 #checkout .carousel-group .cover-pontos{margin:0 0 2px}
}
/* A palavra gigante fica atrás do título, sem ocupar espaço; títulos e mídias calibrados para caber na tela. */
.secao > .pf{position:absolute;top:-20px}
.secao{padding-top:56px;padding-bottom:56px}
.cabecalho{margin-bottom:20px}.cabecalho h2{font-size:clamp(30px,3.6vw,50px)}.cabecalho p{font-size:16px;margin-top:8px}
.vsl-frame,.wide-video{max-width:min(980px,max(560px,calc((100vh - 350px) * 1.7778)))}
.logos-flutuantes{height:min(clamp(300px,40vw,500px),max(240px,calc(100vh - 380px)))}
.logo-flutuante{width:min(clamp(200px,31vw,360px),max(180px,calc(100vh - 420px)))}
.logo-flutuante.premiere{margin-left:calc(min(clamp(200px,31vw,360px),max(180px,calc(100vh - 420px))) / -2)}
@media(min-width:901px){
 #checkout .course-offer{zoom:.9}
 @media(max-height:960px){#checkout .course-offer{zoom:.8}}
 @media(max-height:860px){#checkout .course-offer{zoom:.7}}
 @media(max-height:760px){#checkout .course-offer{zoom:.62}}
}
@media(max-width:900px){.secao{padding-top:48px;padding-bottom:48px}#checkout .course-offer{zoom:.7}}
/* Telas baixas de desktop: título e mídia mais compactos. */
.vsl-frame,.wide-video{max-width:min(980px,max(560px,calc((100vh - 430px) * 1.7778)))}
.logos-flutuantes{height:min(clamp(300px,40vw,500px),max(240px,calc(100vh - 430px)))}
@media(min-width:901px){
 .secao{padding-top:40px;padding-bottom:40px}
 .cabecalho{margin-bottom:14px}.cabecalho h2{font-size:clamp(28px,3vw,40px)}.cabecalho p{font-size:15px;margin-top:6px}
 .kicker{font-size:12px}
 .logo-flutuante{width:min(clamp(200px,31vw,360px),max(180px,calc(100vh - 470px)))}
 .logo-flutuante.premiere{margin-left:calc(min(clamp(200px,31vw,360px),max(180px,calc(100vh - 470px))) / -2)}
}

.vsl-frame,.wide-video{max-width:min(980px,max(560px,calc((100vh - 470px) * 1.7778)))}
/* Hero com física: os logos saem das posições fixas do CSS e passam a ser posicionados pelo script. */
.hero.fisica .hero-emblema{animation:none;top:0;left:0;right:auto;bottom:auto;transition:none;will-change:transform}
.hero.fisica .hero-emblema-alto,.hero.fisica .hero-emblema-baixo,.hero.fisica .hero-emblema-lado{opacity:.72}