// ───────────────────────────────────────────────────────────────────────────── // script.js — Página Marina · Dobras 1, 2 e 3 combinadas // ───────────────────────────────────────────────────────────────────────────── const { useState, useEffect, useRef, useMemo } = React; const HERO_VTURB_PLAYER_ID = "vid-6a15ab73cc7627fe0e7b0439"; const HERO_VTURB_SCRIPT_SRC = "https://scripts.converteai.net/33f73f45-0dba-4fc4-8d45-cc24cdc73ca2/players/6a15ab73cc7627fe0e7b0439/v4/player.js"; // Public build: edit/tweaks UI removed from visitor path. // hero.jsx — Primeira dobra Página Marina // Editorial Científico: revista de anatomia vocal + editorial de música // ───────────────────────────────────────────────────────────────────────────── // Spectrogram background pattern — conceptual, low opacity // ───────────────────────────────────────────────────────────────────────────── function SpectrogramBG({ opacity = 0.06 }) { // Pre-generated semi-random rows of "spectrogram" lines const rows = React.useMemo(() => { const out = []; const seed = 7; let s = seed; const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; for (let y = 0; y < 38; y++) { const row = []; let x = 0; while (x < 100) { const w = 0.6 + rand() * 5.5; const gap = 0.4 + rand() * 2.2; if (rand() > 0.32) row.push({ x, w }); x += w + gap; } out.push(row); } return out; }, []); return ( ); } // ───────────────────────────────────────────────────────────────────────────── // Mapa Anatômico card — stylized "vocal lobe" diagram // ───────────────────────────────────────────────────────────────────────────── function MapaAnatomicoCard({ style }) { return (
Mapa Anatômico

Pontos de tensão, ataque e ressonância lidos ao vivo.

); } // ───────────────────────────────────────────────────────────────────────────── // Sinal Acústico card — gradient spectrogram bars // ───────────────────────────────────────────────────────────────────────────── function SinalAcusticoCard({ style }) { const widths = [86, 64, 92, 48, 72, 38]; return (
Sinal Acústico
{widths.map((w, i) =>
)}
440 Hz —42 dB
); } // ───────────────────────────────────────────────────────────────────────────── // Technical corner marks (editorial scientific frame) // ───────────────────────────────────────────────────────────────────────────── function CornerMark({ pos = 'tl', label }) { return (
{label && {label}}
); } // ───────────────────────────────────────────────────────────────────────────── // Main Hero // ───────────────────────────────────────────────────────────────────────────── function Hero({ t, setTweak }) { React.useEffect(() => { if (document.querySelector(`script[src="${HERO_VTURB_SCRIPT_SRC}"]`)) return; const script = document.createElement("script"); script.src = HERO_VTURB_SCRIPT_SRC; script.async = true; document.head.appendChild(script); }, []); return (
{t.bg === 'dark' && } {/* top nav strip */}
Workshop Manual da Voz
Ao vivo 08, 09 e 10 de Junho
{/* LEFT — text column */}

Destrave os trechos{" "} que mais te desafiam no seu repertório,{" "} mapeando sua voz{" "} e construindo um{" "} plano de treino ao vivo.

Com tecnologia acústica e o método que já transformou +12 mil cantores você traz a música que te trava, identifica a causa real da dificuldade e sai com direção clara de treino.

Comprar ingresso
R$ 37,90 8, 9 e 10 de Junho
Vagas limitadas
{/* RIGHT — image stage */}
{/* Technical readout strip — top */}
Take 01 · Live 00:42
{/* Video frame */}
); } function Annotation({ top, left, label, color = 'primary' }) { return (
{label}
); } function CheckIcon() { return ( ); } // ───────────────────────────────────────────────────────────────────────────── // App // ───────────────────────────────────────────────────────────────────────────── // dobra2.jsx — Dobra 2: O que é Mapeamento Vocal? // Inclui mockup editorial da Ficha de Automapeamento Vocal const { useState: useState2, useEffect: useEffect2 } = React; // ───────────────────────────────────────────────────────────────────────────── // Ficha de Automapeamento Vocal — document mockup // ───────────────────────────────────────────────────────────────────────────── function FichaMockup() { return (
{/* Paperclip + edge tab */}
{/* Header */}
Documento · Mapeamento

Ficha de Automapeamento Vocal

{/* Field 01 — Extensão real */}
01 Extensão real Preenchido
{Array.from({ length: 25 }).map((_, i) => )}
C3 A5
Tessitura confortável · E3 — F#4
{/* Field 02 — Perfil vocal */}
02 Perfil vocal · 1 de 7 Soprano lírico
{['I', 'II', 'III', 'IV', 'V', 'VI', 'VII'].map((p, i) =>
{p}
)}
{/* Field 03 — Pontos críticos */}
03 Tensão · Ar · Passagem 3 marcas
{/* Field 04 — Trecho-chave */}
04 Trecho-chave da música 00:42 — 00:58
refrão · "vou voar"
{/* Field 05 — Próximo passo (handwritten) */}
05 Por onde começar Recomendação

Treinar a passagem F#4 → G4 com apoio diafragmático antes do refrão. Reduzir vibrato no ataque.

{/* Footer */}
Manual DA VOZ · mapeado ao vivo ·
Data 16 · 06 · 2025
Duração 12 min
{/* External arrow annotations pointing into the ficha */}
perfil entre 7
direção de treino
); } // ───────────────────────────────────────────────────────────────────────────── // Section text // ───────────────────────────────────────────────────────────────────────────── function Dobra2() { const bullets = [ <>Sua extensão real e tessitura confortável, <>Seu perfil vocal entre 7 perfis, <>Onde aparece tensão, onde escapa ar, onde a passagem trava, <>O trecho da sua música que expõe o que precisa ser trabalhado, <>Por onde começar a treinar]; return (

O que é Mapeamento Vocal?

É a solução que grandes cantores utilizam para fazer o público pensar: "parece tão fácil".

Com tecnologia acústica e orientação ao vivo, você preenche a Ficha de Automapeamento Vocal — o documento que revela:

    {bullets.map((b, i) =>
  • {b}
  • )}

Tudo a partir da SUA música, com a SUA voz.

); } window.Dobra2 = Dobra2; window.FichaMockup = FichaMockup; // dobra3.jsx — Dobra 3: O problema não é falta de esforço, é falta de leitura // Diagnóstico diferencial — prontuário de hipóteses // ───────────────────────────────────────────────────────────────────────────── // Subtle spectrogram BG (reused concept from hero, lighter) // ───────────────────────────────────────────────────────────────────────────── function D3BG({ opacity = 0.05 }) { const rows = React.useMemo(() => { const out = []; let s = 11; const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; for (let y = 0; y < 38; y++) { const row = []; let x = 0; while (x < 100) { const w = 0.6 + rand() * 5.2; const gap = 0.4 + rand() * 2.4; if (rand() > 0.35) row.push({ x, w }); x += w + gap; } out.push(row); } return out; }, []); return ( ); } // ───────────────────────────────────────────────────────────────────────────── // Diagnostic card — symptom + differential hypotheses // ───────────────────────────────────────────────────────────────────────────── function DiagnosticCard({ index, complaint, symptom, hypotheses }) { return (

{symptom}

pode ser
    {hypotheses.map((h, i) => (
  • {h}
  • ))}
Conclusão sem leitura indeterminado
); } // ───────────────────────────────────────────────────────────────────────────── // Main // ───────────────────────────────────────────────────────────────────────────── function Dobra3() { const cards = [ { symptom: 'Meu agudo trava', hypotheses: [ 'Passagem mal trabalhada', 'Tensão na musculatura extrínseca', 'Excesso de força no ataque', ], }, { symptom: 'Meu ar acaba', hypotheses: [ 'Controle respiratório frágil', 'Frase musical mal planejada', 'Emissão desperdiçando ar', ], }, { symptom: 'Eu desafino', hypotheses: [ 'Escuta interna pouco desenvolvida', 'Memória melódica instável', 'Desafine só dentro da música', ], }, ]; return (
{/* Top bar */}
03 Diagnóstico · Por que treino não basta
{/* Intro */}

O problema não é falta de esforço.
É falta de mapeamento.

Te ensinaram a buscar o exercício certo antes de descobrir o problema certo.

Quando o agudo trava, professores mandam treinar agudo. Quando o ar acaba, dizem que é apoio. Quando a voz aperta, surge outra dica genérica.

Mas a mesma dificuldade pode esconder necessidades completamente diferentes.

{/* Diagnostic differential grid */}
{cards.map((c, i) => ( ))}

O mesmo sintoma esconde causas diferentes. Sem saber a causa, qualquer exercício parece servir… mas nenhum resolve.

{/* Punchline */}

Treino genérico {' '}não resolve uma voz que{' '} nunca foi mapeada.

); } window.Dobra3 = Dobra3; window.D3BG = D3BG; // dobra5.jsx — Dobra 5: Ciclo da Frustração // Circular diagnostic diagram, editorial // ───────────────────────────────────────────────────────────────────────────── // Node icons — minimal outline, 1.5px stroke // ───────────────────────────────────────────────────────────────────────────── const NodeIcon = { copia: , tenta: , duvida: , frustra: , busca: }; // ───────────────────────────────────────────────────────────────────────────── // CycleDiagram — circular 5-node editorial diagram // ───────────────────────────────────────────────────────────────────────────── function CycleDiagram() { // Pentagon vertices starting at top, clockwise // Coordinates in a 600×600 viewBox, center (300,300), radius 220 const nodes = [ { key: 'copia', num: '01', label: 'Copia', hint: 'a música, com tudo da versão original', x: 300, y: 80, icon: 'copia', color: 'magenta' }, { key: 'tenta', num: '02', label: 'Tenta', hint: 'cantar como ouviu, no automático', x: 510, y: 235, icon: 'tenta', color: 'magenta' }, { key: 'naoEnt', num: '03', label: 'Não entende', hint: 'por que um trecho não sai', x: 430, y: 480, icon: 'duvida', color: 'magenta' }, { key: 'frustra', num: '04', label: 'Se frustra', hint: 'se culpa, perde confiança', x: 170, y: 480, icon: 'frustra', color: 'coral' }, { key: 'busca', num: '05', label: 'Procura dica', hint: 'busca a próxima dica genérica', x: 90, y: 235, icon: 'busca', color: 'magenta' }]; // Connector arcs — curves between consecutive nodes // Each path goes from outer edge of node i to outer edge of node i+1 const arcs = [ { d: 'M 358 102 Q 480 110 510 198', color: 'var(--primary)' }, { d: 'M 528 280 Q 520 410 470 462', color: 'var(--primary)' }, { d: 'M 380 506 Q 300 540 220 506', color: 'var(--primary)' }, { d: 'M 130 462 Q 80 410 72 280', color: 'var(--accent)' }, // coral/accent — return loop { d: 'M 90 198 Q 120 110 242 102', color: 'var(--primary)' }]; return (
); } // ───────────────────────────────────────────────────────────────────────────── // Main // ───────────────────────────────────────────────────────────────────────────── function Dobra5() { return (
{/* Top bar */}
{/* Intro */}

O que a sua voz está revelando dentro da música que você quer cantar?

Sem essa pergunta, o cantor entra num ciclo silencioso:

{/* Diagram */}
{/* Punchline */}
E o mais perverso

Depois de repetir esse ciclo × n vezes, ele começa a achar que o problema é a própria voz .

Diagnóstico de superfície erro de leitura, não erro de voz
); } window.Dobra5 = Dobra5; window.CycleDiagram = CycleDiagram; // dobra6.jsx — Dobra 6: O mapa da sua própria Voz · SEM MAPA / COM MAPA const pairs = [ { sem: 'No agudo, minha voz trava e não sei por quê.', com: 'Sei o que trava, onde trava e por quê.', tag: 'agudo · passagem', }, { sem: 'Copia exercício genérico e nada muda.', com: 'Treino o exercício certo pro meu problema.', tag: 'treino · alvo', }, { sem: 'Medo de machucar sem saber se está machucando.', com: 'Entendo os sinais da minha própria voz.', tag: 'segurança · escuta', }, { sem: 'Treino todo dia e não evoluo.', com: 'Treino menos, com foco, e evoluo mais.', tag: 'tempo · eficiência', }, { sem: '"Desafino", "não tenho agudo", "minha voz é fraca".', com: '"Preciso trabalhar passagem", "preciso treinar escuta", "preciso ajustar emissão".', tag: 'linguagem · precisão', }, ]; // ───────────────────────────────────────────────────────────────────────────── // Header icons // ───────────────────────────────────────────────────────────────────────────── const XIcon = ( ); const CheckIcon6 = ( ); const ArrowRight = ( ); // ───────────────────────────────────────────────────────────────────────────── // Main // ───────────────────────────────────────────────────────────────────────────── function Dobra6() { return (
{/* Split background — dark left, light right */}
); } window.Dobra6 = Dobra6; // dobra8.jsx — Dobra 8: Entregas concretas // Editorial spreads: Ficha de Automapeamento + Atlas Vocal // ───────────────────────────────────────────────────────────────────────────── // Background — spectrogram (reused concept) // ───────────────────────────────────────────────────────────────────────────── function D8BG({ opacity = 0.04 }) { const rows = React.useMemo(() => { const out = []; let s = 17; const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; for (let y = 0; y < 38; y++) { const row = []; let x = 0; while (x < 100) { const w = 0.6 + rand() * 5.2; const gap = 0.4 + rand() * 2.4; if (rand() > 0.36) row.push({ x, w }); x += w + gap; } out.push(row); } return out; }, []); return ( ); } // ───────────────────────────────────────────────────────────────────────────── // MiniFicha — compact mockup of the Ficha de Automapeamento // ───────────────────────────────────────────────────────────────────────────── function MiniFicha() { return (
Documento · PM-0247

Ficha de Automapeamento

01
Extensão real
{Array.from({ length: 18 }).map((_, i) => ( ))}
C3 A5
02
Perfil · 1 de 7
{['I','II','III','IV','V','VI','VII'].map((p, i) => ( {p} ))}
03
Tensão · Ar · Passagem
T · tensão A · escape P · passagem
Recomendação

Trabalhar a passagem F#4 → G4 com apoio antes do refrão.

Marina · ao vivo 16 · 06 · 2025
); } // ───────────────────────────────────────────────────────────────────────────── // MiniAtlas — atlas index spread mockup // ───────────────────────────────────────────────────────────────────────────── function MiniAtlas() { const entries = [ { n: '01', name: 'Escape de ar', page: '08', range: '08–14' }, { n: '02', name: 'Passagem instável', page: '22', range: '22–30' }, { n: '03', name: 'Apoio diafragmático', page: '38', range: '38–47' }, { n: '04', name: 'Ressonância anterior', page: '54', range: '54–62' }, { n: '05', name: 'Pressão subglótica', page: '70', range: '70–78' }, { n: '06', name: 'Vibrato controlado', page: '86', range: '86–94' }, { n: '07', name: 'Articulação consonantal', page: '102', range: '102–110' }, ]; return (
Catálogo · Ed. 2025

Atlas Vocal

Vol. I +50 exercícios 110 pp.
Índice · por problema
    {entries.map((e) => (
  • {e.n} {e.name}
  • ))}
  • + 43 outros sintomas
{/* Right-edge tabs */}
Indexação por sintoma · não por estilo
); } // ───────────────────────────────────────────────────────────────────────────── // Delivery spread // ───────────────────────────────────────────────────────────────────────────── function DeliverySpread({ index, kind, title, titleEm, punchline, body, visual, alignment = 'visual-left' }) { return (
{visual}
Entrega {index} {kind}

{title} {titleEm}

{punchline}

{body}

); } // ───────────────────────────────────────────────────────────────────────────── // Main // ───────────────────────────────────────────────────────────────────────────── function Dobra8() { return (
Entregas · O que você leva

Experiência concreta, não aula {' '}para assistir e {' '}esquecer.

Ao final das 3 noites, sua dificuldade estará observada, registrada e apontando uma direção.

2 peças tangíveis documento + catálogo
} alignment="visual-left" /> } alignment="visual-right" />
); } window.Dobra8 = Dobra8; // ───────────────────────────────────────────────────────────────────────────── // Mount — render each dobra into its root // ───────────────────────────────────────────────────────────────────────────── const daysV3 = [ { num: '1', title: 'Localização', question: '“Onde estou?”', body: 'Antes de qualquer exercício, é preciso saber de onde sua voz está partindo. Você marca seu ponto de partida: gravação inicial, mapa de percepção, escuta da própria voz e os primeiros testes funcionais.', outcomes: [ 'onde sua voz começa', 'em quais áreas você tem mais consciência', 'em quais ainda está no escuro', 'qual trecho da sua música revela mais sobre o seu canto', ], }, { num: '2', title: 'Sinais do caminho', question: '“O que minha voz está me mostrando?”', body: 'No segundo dia, sua voz é lida. Testes de tempo máximo de expiração, relação S/Z, cromatismo, glissando, sustentação de nota, extensão e tessitura. Aqui entram as tecnologias que capturam o que o ouvido sozinho não enxerga.', outcomes: [ 'qual é a sua extensão real', 'onde está sua tessitura confortável', 'como sua fonte sonora se comporta', 'onde aparece tensão, onde escapa ar e onde a passagem trava', ], offset: true, }, { num: '3', title: 'Rota', question: '“Para onde devo ir agora?”', body: 'No terceiro dia, os dados viram direção. Seu perfil vocal é identificado entre os 7 perfis possíveis, seu trecho-problema vira plano de treino, e você recebe o que estudar, como estudar e por quanto tempo.', outcomes: [ 'qual é o seu foco principal', 'qual exercício atende a sua necessidade', 'qual rotina cabe na sua semana', 'como medir se você melhorou', ], }, ]; function D6V3TopoBg() { return ( ); } function D6V3CompassRose() { return ( ); } function D6V3NodeIcon({ type }) { if (type === 'compass') { return ( ); } if (type === 'target') { return ( ); } return ( ); } function D6V3MapNode({ day, type, className }) { return (
Dia {day}
); } function D6V3MapPlate() { return (
); } function D6V3DayCard({ day, index }) { return (
{day.num}
Dia {day.num}

{day.title}

{day.question}

{day.body}

Você sai sabendo
    {day.outcomes.map((item) =>
  • {item}
  • )}
); } function Dobra6V3() { React.useEffect(() => { const nodes = document.querySelectorAll('#root-dobra6 .d6v3-reveal'); if (!('IntersectionObserver' in window)) { nodes.forEach((node) => node.classList.add('d6v3-in')); document.querySelectorAll('#root-dobra6 .d6v3-path-in').forEach((node) => node.classList.add('d6v3-in')); return undefined; } const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) return; entry.target.classList.add('d6v3-in'); if (entry.target.classList.contains('d6v3-map-plate')) { const path = entry.target.querySelector('.d6v3-path-in'); if (path) path.classList.add('d6v3-in'); } io.unobserve(entry.target); }); }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' }); nodes.forEach((node) => io.observe(node)); return () => io.disconnect(); }, []); return (
A jornada · 3 dias

Em 3 dias, sua voz para de ser um mistério.

A jornada do mapeamento segue a lógica de um mapa de verdade: você descobre onde está, lê os sinais do caminho e traça a rota.

{daysV3.map((day, index) => )}

Você não sai com mais informação solta.
Sai com um manual da sua própria voz.

); } window.Dobra6V3 = Dobra6V3; const CardIcons9 = { belting: ( ), years: ( ), degree: ( ), }; function SpecCard9({ icon, label, sub }) { return (
{CardIcons9[icon]} {label} {sub && {sub}}
); } function Dobra9() { return (
Marina cantando ao lado de um piano

Por que este workshop existe.

Depois de mais de 25 anos formando cantores, Marina percebeu um padrão: muita gente não está sem talento. Está sem leitura da própria voz.

Foi observando alunos iniciantes, cantores profissionais e professores de canto que nasceu o Manual da Voz: para quem cansou de colecionar dicas e quer entender o que a própria voz realmente precisa.

); } window.Dobra9 = Dobra9; const D10Icons = { clock: ( ), live: ( ), calendar: ( ), }; function LoteProgress({ className = '' }) { const loteStart = React.useMemo(() => new Date('2026-05-27T16:59:00-03:00'), []); const loteEnd = React.useMemo(() => new Date('2026-06-04T16:59:00-03:00'), []); const getLotePercent = React.useCallback(() => { const total = loteEnd - loteStart; if (total <= 0) return 100; const done = new Date() - loteStart; return Math.round(Math.max(0, Math.min(1, done / total)) * 100); }, [loteEnd, loteStart]); const [percent, setPercent] = React.useState(getLotePercent); React.useEffect(() => { const timer = setInterval(() => { setPercent(getLotePercent()); }, 60000); return () => clearInterval(timer); }, [getLotePercent]); return (
= 100 ? ' is-complete' : ''}`} style={{ width: `${percent}%` }} />
{percent}% do lote 4 vendido vagas finais
); } function Dobra10() { const loteStart = React.useMemo(() => new Date('2026-05-27T16:59:00-03:00'), []); const loteEnd = React.useMemo(() => new Date('2026-06-04T16:59:00-03:00'), []); const getLotePercent = React.useCallback(() => { const total = loteEnd - loteStart; if (total <= 0) return 100; const done = new Date() - loteStart; return Math.round(Math.max(0, Math.min(1, done / total)) * 100); }, [loteEnd, loteStart]); const [percent, setPercent] = React.useState(getLotePercent); React.useEffect(() => { const timer = setInterval(() => { setPercent(getLotePercent()); }, 60000); return () => clearInterval(timer); }, [getLotePercent]); return (
); } window.Dobra10 = Dobra10; function DobraCronograma() { return (
08, 09 e 10 de Junho | Ao Vivo | No Zoom

Cronograma

Os três encontros seguem esse horário:

19H00 Início
22H00 Encerramento
); } window.DobraCronograma = DobraCronograma; const faqItems = [ { question: 'O que é o Mapeamento Vocal?', answer: [ 'É uma leitura guiada da sua voz cantada. Ele mostra como sua voz funciona hoje, onde ela tem mais força, onde apresenta limitações e qual deve ser o próximo passo do seu treino.', 'No Manual da Voz, você mapeia dimensões como extensão, tessitura, perfil vocal, sustentação, fôlego, tensões, passagem de registro e nasalidade, até construir um manual da sua própria voz.' ] }, { question: 'Como funciona o Mapeamento Vocal?', answer: [ 'Ao longo dos 3 dias do workshop, você preenche a sua Ficha de Automapeamento Vocal enquanto realiza testes, observa seu repertório e acompanha análises guiadas ao vivo.', 'O processo une percepção vocal, testes práticos e tecnologias de leitura da voz em tempo real para mostrar onde sua voz está, o que ela revela e como transformar essas informações em direção de treino.' ] }, { question: 'Sou iniciante, esse Workshop é pra mim?', answer: [ 'Mesmo que você seja iniciante, esse conhecimento é essencial para seu desenvolvimento, e além disso, eu sempre estarei lá para responder suas dúvidas e deixar tudo o mais didático possível! Então se você tem o desejo de se destacar, esse curso vai ser ideal para a sua jornada.' ] }, { question: 'Esse Workshop vai ser gravado?', answer: [ 'Sim, o Workshop ao vivo será gravado e vendido à parte. Basta entrar no carrinho e você verá as opções de compra.' ] }, { question: 'O que eu vou aprender?', answer: [ 'Você vai aprender a entender como sua voz funciona hoje, identificar padrões importantes no seu canto e transformar essa leitura em direção prática de treino.', 'Ao longo do workshop, você vai passar por testes vocais e musicais, observar seu repertório, reconhecer pontos como extensão, tessitura, passagem de registro, sustentação, fôlego e tensões, e compreender quais caminhos fazem mais sentido para o desenvolvimento da sua voz.' ] }, { question: 'Nunca fiz aula de canto, posso participar?', answer: [ 'Vou ser sincera: se você tem o mínimo de noção sobre canto, eu recomendo muito a sua participação. Você conhecerá um mundo novo!', 'Eu vou estar lá para responder suas dúvidas, e tenho certeza de que esse aprendizado trará muita diferença para suas práticas e para sua autopercepção vocal futura.' ] }, { question: 'Sou professor de canto, vale a pena participar?', answer: [ 'Sim. Para mim, como professora, essa metodologia fez total diferença no aprendizado dos alunos, porque permite observar a voz com mais clareza, interpretar padrões e orientar o treino com mais precisão.', 'Além disso, o workshop é fortemente embasado em ciência, pedagogia vocal e nas minhas pesquisas sobre voz cantada. Você não encontrará essa proposta organizada dessa forma em outro lugar.' ] }, { question: 'Não conseguirei assistir à imersão toda ao vivo. E agora?', answer: [ 'Sem problemas. Você pode adquirir o Workshop + Gravação por R$ 187,90. A gravação será editada e separada em módulos para facilitar seu aprendizado.', 'De toda maneira, a imersão ao vivo está toda modularizada e materiais serão distribuídos. Então, se você perder algum trecho, poderá consultar o conteúdo, acompanhar os materiais e tirar suas dúvidas durante o evento.' ] }, { question: 'Sou cantor profissional, vale a pena participar?', answer: [ 'Muito. Muitos cantores profissionais treinam, cantam e se apresentam, mas ainda sentem dificuldade para entender exatamente o que está acontecendo na própria voz e qual caminho de estudo realmente faz sentido.', 'O Manual da Voz ajuda você a organizar essa leitura, reconhecer padrões no seu canto e tomar decisões de treino com mais clareza, autonomia e precisão.' ] } ]; function Dobra11() { const [openIndex, setOpenIndex] = React.useState(0); return (
FAQ · Perguntas frequentes

Antes de entrar, tire suas dúvidas.

Respostas diretas para você entender o formato, o nível indicado e como o mapeamento vocal funciona na prática.

{faqItems.map((item, index) => { const isOpen = openIndex === index; return (
{item.answer.map((paragraph) => (

{paragraph}

))}
); })}
); } window.Dobra11 = Dobra11; function initDobra4HScroll(){ const scene = document.getElementById('mt-hscroll-1'); if (!scene || scene.dataset.mtHsReady === 'true') return; scene.dataset.mtHsReady = 'true'; const pin = scene.querySelector('.mt-hs-pin'); const rail = scene.querySelector('.mt-hs-rail'); const track = scene.querySelector('#mt-hs-track-1'); if (!pin || !rail || !track) return; let sceneTop = 0; let travel = 0; // distancia entre "primeiro centrado" e "ultimo centrado" let startX = 0; // posicao X inicial (primeiro centrado) let ticking = false; let videoObserver = null; let sourcesLoaded = false; // ====== DETECCAO DE MODO (desktop vs mobile) ====== const mqMobile = window.matchMedia('(max-width: 768px)'); function setMode(){ if (mqMobile.matches) scene.classList.add('is-mobile'); else scene.classList.remove('is-mobile'); } setMode(); mqMobile.addEventListener('change', setMode); // --- bloqueio de pan-x (fallback para browsers que ignoram touch-action) --- let startTx = 0, startTy = 0, dragging = false; scene.addEventListener('touchstart', (e)=>{ if (scene.classList.contains('is-mobile')) return; // nao intercepta no mobile-coluna if (!e.touches || !e.touches[0]) return; dragging = true; startTx = e.touches[0].clientX; startTy = e.touches[0].clientY; }, {passive:true}); scene.addEventListener('touchmove', (e)=>{ if (scene.classList.contains('is-mobile')) return; // nao intercepta no mobile-coluna if (!dragging || !e.touches || !e.touches[0]) return; const dx = Math.abs(e.touches[0].clientX - startTx); const dy = Math.abs(e.touches[0].clientY - startTy); if (dx > dy) { e.preventDefault(); } // evita arrasto lateral }, {passive:false}); scene.addEventListener('touchend', ()=>{ if (scene.classList.contains('is-mobile')) return; dragging = false; }, {passive:true}); // autoplay cross-browser function ensureVideoAttrs(v){ v.muted = true; v.playsInline = true; v.setAttribute('muted',''); v.setAttribute('playsinline',''); } function loadVideoSources(){ if (sourcesLoaded) return; sourcesLoaded = true; track.querySelectorAll('source[data-src]').forEach((source)=>{ source.src = source.dataset.src; source.removeAttribute('data-src'); source.parentElement?.load(); }); } // Icones SVG - mudo e som const ICON_MUTED = ` `; const ICON_SOUND = ` `; // cria/garante botao por card e aplica estado visual function ensureAudioButtonFor(video){ const card = video.closest('.mt-hs-card'); if (!card) return; let btn = card.querySelector('.mt-audio-cardbtn'); if (!btn){ btn = document.createElement('button'); btn.className = 'mt-audio-cardbtn'; btn.type = 'button'; card.appendChild(btn); btn.addEventListener('click', ()=> toggleAudio(video, btn)); } syncButtonState(video, btn); } function syncButtonState(video, btn){ if (video.muted){ btn.dataset.state = 'muted'; btn.innerHTML = ICON_MUTED; btn.setAttribute('aria-label','Ativar som deste video'); } else { btn.dataset.state = 'unmuted'; btn.innerHTML = ICON_SOUND; btn.setAttribute('aria-label','Desativar som deste video'); } } // SOLO + TOGGLE function toggleAudio(video, btn){ if (video.muted){ // muta todos os outros track.querySelectorAll('video').forEach(v=>{ if (v !== video){ v.muted = true; v.setAttribute('muted',''); const b = v.closest('.mt-hs-card')?.querySelector('.mt-audio-cardbtn'); if (b) syncButtonState(v, b); } }); // ativa som aqui video.muted = false; video.removeAttribute('muted'); video.volume = 1; const p = video.play(); if (p && p.then) p.catch(()=>{}); syncButtonState(video, btn); } else { video.muted = true; video.setAttribute('muted',''); syncButtonState(video, btn); } } function pauseAll(){ track.querySelectorAll('video').forEach(v=>v.pause()); } // fix de altura do sticky em mobile (100vh oscilante) function setVH(){ if (scene.classList.contains('is-mobile')) return; pin.style.height = window.innerHeight + 'px'; } // mapeia scroll vertical -> posicao horizontal (centro->centro) function recalc(){ // MOBILE: desliga toda a logica do trilho if (scene.classList.contains('is-mobile')){ pin.style.height = 'auto'; rail.style.height = 'auto'; scene.style.height = 'auto'; // garante que nada fique transformado track.style.transform = 'none'; // desconecta IO se existir if (videoObserver) { videoObserver.disconnect(); videoObserver = null; } // garante atributos e botoes (funcionam tambem no modo coluna) track.querySelectorAll('video').forEach(v=>{ ensureVideoAttrs(v); ensureAudioButtonFor(v); }); return; } setVH(); // garante altura estavel do pin // 1) altura da rail pelo 9:16 do 1o card const firstCard = track.children[0]; if (firstCard){ const w = firstCard.getBoundingClientRect().width; rail.style.height = Math.round(w * (16/9)) + 'px'; } // 2) largura total do trilho (somando gaps) const styles = getComputedStyle(track); const gap = parseFloat(styles.gap) || 0; const kids = Array.from(track.children); let trackWidth = 0; kids.forEach((el, i)=>{ trackWidth += el.getBoundingClientRect().width; if (i < kids.length-1) trackWidth += gap; }); const railWidth = rail.clientWidth; const firstW = kids[0]?.getBoundingClientRect().width || 0; const lastW = kids[kids.length-1]?.getBoundingClientRect().width || 0; // 3) posicoes centralizadas startX = (railWidth - firstW)/2; // 1o centrado const endX = (railWidth + lastW)/2 - trackWidth; // ultimo centrado travel = startX - endX; // >0 // 4) altura da cena = altura fixa do pin + viagem scene.style.height = `${pin.clientHeight + Math.max(0, travel)}px`; // 5) topo absoluto da cena sceneTop = scene.getBoundingClientRect().top + window.scrollY; // 6) observers, botoes e posicao inicial setupVideoObserver(); track.querySelectorAll('video').forEach(v=>{ ensureVideoAttrs(v); ensureAudioButtonFor(v); }); apply(); } function apply(){ if (scene.classList.contains('is-mobile')) return; // sem transform no mobile const progressed = Math.min(Math.max(window.scrollY - sceneTop, 0), Math.max(0, travel)); const x = startX - progressed; track.style.transform = `translate3d(${x}px, 0, 0)`; } function onScroll(){ if (scene.classList.contains('is-mobile')) return; if (!ticking){ requestAnimationFrame(()=>{ apply(); ticking = false; }); ticking = true; } } // IO para autoplay/pause (root = rail) function setupVideoObserver(){ if (videoObserver) videoObserver.disconnect(); videoObserver = new IntersectionObserver((entries)=>{ entries.forEach(entry=>{ const vid = entry.target; if (entry.isIntersecting && entry.intersectionRatio >= 0.6){ loadVideoSources(); ensureVideoAttrs(vid); const p = vid.play(); if (p && p.then) p.catch(()=>{}); } else { vid.pause(); } }); }, { root: rail, threshold: [0,.25,.5,.6,.75,1] }); track.querySelectorAll('video').forEach(v=>{ ensureVideoAttrs(v); videoObserver.observe(v); }); } // pausa quando a dobra sai da tela const sceneObserver = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if (e.isIntersecting) loadVideoSources(); else pauseAll(); }); }, { rootMargin: '450px 0px', threshold: 0 }); sceneObserver.observe(scene); // pausa quando a aba fica oculta document.addEventListener('visibilitychange', ()=>{ if (document.hidden) pauseAll(); }); // listeners basicos const ro = new ResizeObserver(()=>recalc()); ro.observe(document.documentElement); window.addEventListener('load', recalc, { passive:true }); window.addEventListener('resize', ()=>{ setVH(); recalc(); }, { passive:true }); window.addEventListener('orientationchange', ()=>{ setTimeout(()=>{ setVH(); recalc(); }, 200); }); window.addEventListener('scroll', onScroll, { passive:true }); // ===== Swipe mapeado para scroll (somente no modo trilho) ===== (function(){ const sceneEl = scene; let touchStartX = 0; let touchStartY = 0; let touchActive = false; sceneEl.addEventListener('touchstart', (e) => { if (scene.classList.contains('is-mobile')) return; // nao atua no mobile-coluna if (!e.touches || !e.touches[0]) return; touchActive = true; touchStartX = e.touches[0].clientX; touchStartY = e.touches[0].clientY; }, { passive: true }); sceneEl.addEventListener('touchmove', (e) => { if (scene.classList.contains('is-mobile')) return; if (!touchActive || !e.touches || !e.touches[0]) return; const dx = e.touches[0].clientX - touchStartX; const dy = e.touches[0].clientY - touchStartY; // so reage a gestos mais horizontais que verticais if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10) { e.preventDefault(); // evita scroll lateral do navegador // deslizar p/ esquerda -> avanca scroll vertical window.scrollTo({ top: window.scrollY - dx, behavior: 'auto' }); } }, { passive: false }); sceneEl.addEventListener('touchend', () => { if (scene.classList.contains('is-mobile')) return; touchActive = false; }, { passive: true }); })(); // inicial setVH(); recalc(); } const HERO_DEFAULTS = { bg: "dark", specOpacity: 0.06, layout: "split", cornerMarks: true, annotations: true, imageTreatment: "frame" }; function AppHero() { return ; } function initFastAnchorScroll() { const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3); const scrollToTarget = (target) => { const start = window.scrollY; const top = target.getBoundingClientRect().top + window.scrollY; const distance = top - start; const duration = reduceMotion ? 0 : 520; if (duration === 0) { window.scrollTo(0, top); return; } const startTime = performance.now(); const step = (now) => { const progress = Math.min(1, (now - startTime) / duration); window.scrollTo(0, start + distance * easeOutCubic(progress)); if (progress < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); }; document.addEventListener('click', (event) => { const link = event.target.closest('a[href^="#"]'); if (!link) return; const id = link.getAttribute('href'); if (!id || id === '#') return; const target = document.querySelector(id); if (!target) return; event.preventDefault(); history.pushState(null, '', id); scrollToTarget(target); }); } ReactDOM.createRoot(document.getElementById('root-hero')).render(); ReactDOM.createRoot(document.getElementById('root-dobra2')).render(); ReactDOM.createRoot(document.getElementById('root-dobra3')).render(); ReactDOM.createRoot(document.getElementById('root-dobra5')).render(); ReactDOM.createRoot(document.getElementById('root-dobra6')).render(); ReactDOM.createRoot(document.getElementById('root-dobra8')).render(); ReactDOM.createRoot(document.getElementById('root-dobra9')).render(); ReactDOM.createRoot(document.getElementById('root-dobra10')).render(); ReactDOM.createRoot(document.getElementById('root-dobra-cronograma')).render(); ReactDOM.createRoot(document.getElementById('root-dobra11')).render(); initDobra4HScroll(); initFastAnchorScroll();